i-UMRAH Mobile Application

MOHAMAD AMIRUL HAKIM BIN MOHD SANUSI

BACHELOR OF INFORMATION TECHNOLOGY

(INFORMATICS MEDIA)

FACULTY INFORMATICS AND COMPUTING

UNIVERSITY SULTAN ZAINAL ABIDIN , TERENGGANU, MALAYSIA

2018

i-UMRAH Mobile Application

MOHAMAD AMIRUL HAKIM BIN MOHD SANUSI

BACHELOR OF INFORMATION TECHNOLOGY

(INFORMATICS MEDIA)

FACULTY INFORMATICS AND COMPUTING

UNIVERSITY SULTAN ZAINAL ABIDIN , TERENGGANU, MALAYSIA

DECEMBER 2018

i

DECLARATION

I hereby declare that this project paper is the result of my personal research. This

dissertation is submitted to the Faculty of Informatic and Computing, University Sultan

Zainal Abidin as partial fulfillment of the requirements for the Degree of Bachelor of

Information Technology (Informatic Media) with Honors. All stated information which

has been obtained from other sources is fully referenced.

Done

SIGNATURE : __________________________

NAME : Mohamad Amirul Hakim Bin Mohd Sanusi

MATRIC : 044710

DATE : __________________________

ii

CONFIRMATION

This is to confirm that i-Umrah Mobile Application was prepared and submitted by

Mohamad Amirul Hakim Bin Mohd Sanusi (Matric Number: BTDL16044710) and

have been found satisfactory in terms of scope, quality and presentation as a part of

fulfilment of the requirement for Bachelor of Information Technology (Informatics

Media) with honor’s in University Sultan Zainal Abidin. The research conducted and

writing of this report was under my supervision.

SIGNATURE : __________________________

NAME : Mohamad Amirul Hakim Bin Mohd Sanusi

MATRIC : 044710

DATE : __________________________

iii

ACKNOWLEDGEMENT

In the name of Allah, the Most Gracious and Most Merciful.

Alhamdulillah all praise it to ALLAH SWT, by His grace and blessings, I were

able to successfully finish my report. First of all, I would like to thank you to my

supervisor, Dr Wan Aezwani Wan Abu Bakar for his guides and a lot contribute ideas,

provide information and guidance as well as a bit of advice to me without giving up

until the end of the project was made. I want to take this opportunity to thanks to my

mother, Wan Sharifah Bt Wan Ismail and my father Mohd Sanusi Bin Abdullah. And

special thanks to all my lectures of Faculty of Informatics and Computing for their

support and advices. And for all my friends, thank you for helping, advising and support

me in finishing my project.

iv

ABSTRACT

Mobile applications are a technology that they use in various Education, banking, as

well as online goods sales industries. Furthermore, today's technology is needed to

facilitate the daily lives of the community. With this mobile i-Umrah app it will be able

to further facilitate the work or worship of Umrah congregation in performing their

umrah worship. Where previously the pilgrims perform umrah only using the book

solely as their guide in performing umrah worship. But now umrah congregation will

be easier to make any reference because only using mobile phones only to access this i-

umrah mobile app. And this developed application applies multimedia elements in

delivering information about umrah worship. The metadology used in this application

is the ADDIE method. The ADDIE method contains 5 phases namely Analysis, Design,

Development, Implementation, and Testing.

v

ABSTRAK

Mobile aplikasi adalah satu teknologi dimana ia digunakan dalam berbagai

Pendidikan, perbankkan, dan juga industri penjualan barang secara atas talian.

Tambahan pula pada masa sekarang ini teknologi seperti ini amat diperlukan bagi

memudahkan lagi kehidupan seharian masyarakat. Dengan adanya mobile aplikasi i-

Umrah ini ia akan dapat lagi memudahkan kerja-kerja ataupun ibadah Jemaah umrah

dalam melakukan ibadah umrah mereka. Dimana sebelum ini Jemaah yang

menunaikan umrah hanya menggunakan buku semata-mata sebagai panduan mereka

dalam mengerjakan ibadah umrah. Namun sekarang Jemaah umrah akan lebih mudah

untuk membuat sebarang rujukan kerana hanya menggunakan telefon bimbit sahaja

untuk mengakses mobile aplikasi i-Umrah ini. Dan aplikasi yang dibangunkan ini

mengaplikasikan elemen multimedia dalam penyampaian maklumat mengenai ibadah

umrah. Metadologi yang digunakan dalam aplikasi ini ialah kaedah ADDIE. Kaedah

ADDIE mengandungi 5 fasa iaitu Analisis, Rekabentuk, Pembangunan, Pelaksanaan,

dan Pengujian.

vi

TABLE OF CONTENT

DECLARATION ............................................................................................................ i

CONFIRMATION ......................................................................................................... ii

ACKNOWLEDGEMENT ............................................................................................ iii

ABSTRACT .................................................................................................................. iv

ABSTRAK ..................................................................................................................... v

TABLE OF CONTENT ................................................................................................ vi

LIST OF FIGURES .................................................................................................... viii

LIST OF TABLES ........................................................................................................ ix

CHAPTER 1 .................................................................................................................. 1

1.1 Background Project ......................................................................................... 1

1.2 Problem Statement .......................................................................................... 2

1.3 Objective ......................................................................................................... 3

1.4 Scope ............................................................................................................... 3

1.4.1 Admin Scope ............................................................................................ 3

1.4.2 User Scope ............................................................................................... 3

1.4.3 Device Scope ........................................................................................... 3

1.5 Limitation of Work .......................................................................................... 4

1.6 Expected Result ............................................................................................... 4

1.7 Gantt Chart ...................................................................................................... 5

vii

1.8 Summary of Chapter ....................................................................................... 5

CHAPTER 2 .................................................................................................................. 6

2.1 Introduction ..................................................................................................... 6

2.2 Related Product ............................................................................................... 7

2.3 Summary of Chapter ..................................................................................... 13

CHAPTER 3 ................................................................................................................ 14

3.1 Introduction ................................................................................................... 14

3.2 ADDIE Methodology .................................................................................... 15

3.2.1 Analysis Phases ...................................................................................... 16

3.2.2 Design Phases ........................................................................................ 16

3.2.3 Development Phases .............................................................................. 25

3.2.4 Implementation Phases .......................................................................... 25

3.2.5 Evaluate .................................................................................................. 26

3.3 Hardware and Software Requirement ........................................................... 27

3.3.1 Hardware Requirement .......................................................................... 27

3.3.2 Software Requirement ........................................................................... 29

3.4 Technique/Method ........................................................................................ 30

3.5 Summary of Chapter ..................................................................................... 30

REFERENCES ........................................................................................................... 31

viii

LIST OF FIGURES

Figure 1. 1 Gantt Chart .................................................................................................. 5

Figure 2. 1 Mobile App Umrah (2015) .......................................................................... 7

Figure 2. 2 Mobile App Umrah (2016) .......................................................................... 9

Figure 2. 3 Umrah Book .............................................................................................. 10

Figure 2. 4 Umrah Book (2014) ................................................................................... 11

Figure 3. 1 ADDIE Model ........................................................................................... 15

Figure 3. 2 Start Page ................................................................................................... 17

Figure 3. 3 Page Sign-Up ............................................................................................. 17

Figure 3. 4 Main Menu ................................................................................................ 18

Figure 3. 5 Page Umrah ............................................................................................... 18

Figure 3. 6 Page Umrah (Niat) ..................................................................................... 19

Figure 3. 7 Page Umrah Niat (Amalan) ....................................................................... 19

Figure 3. 8 Page Umrah Niat (Larangan) ..................................................................... 20

Figure 3. 9 Page Umrah Niat (Doa) ............................................................................. 20

Figure 3. 10 Page Dam ................................................................................................. 21

Figure 3. 11 Page Doa Harian ...................................................................................... 21

Figure 3. 12 Page Kuiz ................................................................................................. 22

Figure 3. 13 Page Tasbih ............................................................................................. 22

Figure 3. 14 Page Video ............................................................................................... 23

Figure 3. 15 Page Nota ................................................................................................. 23

Figure 3. 16 Page Rujukan ........................................................................................... 24

Figure 3. 17 Page Ratings ............................................................................................ 24

ix

LIST OF TABLES

Table 2. 1 Comparison Element of Multimedia ........................................................... 12

Table 3. 1 Hardware Requirement ............................................................................... 28

Table 3. 2 Software Requirement ................................................................................ 30

1

CHAPTER 1

INTRODUCTION

1.1 Background Project

In today's era of globalization, mobile application most commonly referred to

as an app is a type of application software designed to run on a mobile device, such as

a smartphone or laptop. A mobile application also may be known as an app, web app,

online app, iPhone app or smartphone app. Apps are usually available through platforms

like Apple App Store, Google Play, Windows Phone Store, and BlackBerry App World.

Some of the applications on the platform are free, while others need to be purchased by

the user. Typically, this app can be downloaded through from smartphones like iPhone,

BlackBerry, Android phone or Windows Phone. It can also be downloaded via laptop.

This project aims to create a platform to build an application for mobile application.

Performing hajj and umrah is one of the five pillars of Islam. The ritual involves many

2

rules and procedures, and to remember all these rules and procedures usually poses a

problem for pilgrims. The advancement of IT can provide a solution to the problem

mentioned above. Hence, we apply the Internet and smart phone technologies to

develop the i - Umrah application for users. The target users of this application are the

Malaysian hajj and umrah pilgrims. This application provides a step-by-step guide to

performing umrah, starting from preparation at home up until the pilgrimage is

completed. The application was developed on the Android platform to Help Pilgrims in

Performing Umrah.

1.2 Problem Statement

In the previous cases, when learning in the form of books used at this time is

less interactive. If use book just focuses only text and graphic. So, it very less

interactive. Secondly, with books, it will slow down some time to find information

while using the app can only search for information. If you want to find something in

the book, you have to open one by one page but if use mobile application, just searching

and find what you want. So from this, mobile application can waste time. Lastly, it's

hard to carry anywhere. Book very difficult carry where you want to go, but if in phone.

Easy to carry. You can access everywhere and every time you want.

3

1.3 Objective

Three objectives have been identified in this project. There are following

objective: -

I. To study and identify current mobile application.

II. To design interface and to develop i-Umrah mobile application.

III. To test the application is functional and benefit to the user.

1.4 Scope

The scope is going to outline the users and functions of this application and make the

implementation easier. The scope of this application is divided into three (3) which are

admin, user and device scope.

1.4.1 Admin Scope

I. Update application

II. Manage application

1.4.2 User Scope

I. Pilgrims umrah

II. Umrah company

1.4.3 Device Scope

I. Android phones only

4

1.5 Limitation of Work

There is some limitation in this project which are:

I. Mobile based application.

II. Only android user can access this application and not support iOS or

Apple phones.

III. This application only uses Malay language.

1.6 Expected Result

The expected results for i-Umrah Mobile Application are:

I. This application can provide fully function for functional requirement.

II. Succeed in developing a mobile application for Android phone.

III. Successfully creating user-friendly mobile apps that give the benefit to

users in performing umrah worship.

IV. The application is expected to be implemented in the mobile based.

5

1.7 Gantt Chart

Figure 1. 1 Gantt Chart

1.8 Summary of Chapter

The chapter covers the overall description of the application such identifies the

problem statement, objective, scope, expected result and project management plan.

Moreover, this mobile application is designed to help the umrah congregation to learn

about the Jemaah of umrah worship.

6

CHAPTER 2

LITERATURE REVIEW

2.1 Introduction

This chapter will continue with the discussion and idea from previous research

and exiting product that related to the i-Umrah Mobile Application. The idea from

previous resources or available resources helps to meet the objective of this application.

Therefore, the purpose of the literature review is to find, read and analyses the literature

or any works or studies related to this system. It is important to well understand about

all information to be considered and related before developing this application. Some

research has been studied to understand to implement in the i-Umrah Mobile

Application

7

2.2 Related Product

There is some research on existing applications or projects as well as analysis

of the problem of the project. It is aimed at fixing weaknesses and deficiencies in

existing applications or multimedia materials. By this way, comparisons and corrections

can be made and can also trigger new ideas in the production of learning applications.

Examples are:

2.2.1 Mobile App Umrah

Figure 2. 1 Mobile App Umrah (2015)

8

DEVELOPER YEARS ADVANTAGE DISADVANTAGE

Razlie Rosman

2015 Use of interesting icons on

app interface

Uninteresting interface at

sub topic.

Compilation of titles on

apps organized

Use to many text

9

2.2.2 Mobile App Umrah (2016)

Figure 2. 2 Mobile App Umrah (2016)

DEVELOPER YEARS ADVANTAGE DISADVANTAGE

Noorsyarida

Mohd Sapiai

2016 Attractive color usage.

No description in audio

and video form.

Has many functions in the

interface

Strict arrangement.

10

2.2.3 Umrah book (2013)

Figure 2. 3 Umrah Book

AUTHOR

YEARS ADVANTAGE DISADVANTAGE

Hj Johari Hj

Alias

2013 Lots of more detailed

information

It's hard to carry where to

go

Focus on series of Hajj &

Umrah

Just use text.

11

2.2.4 Umrah book (2014)

Figure 2. 4 Umrah Book (2014)

AUTHOR

YEARS ADVANTAGE DISADVANTAGE

Hj Mansor Hj

Daud

2014

Lots of more detailed

information

No description in audio

and video form.

Compact arrangement

12

2.2.5 Comparison Element of Multimedia

This table about comparison existing product in element multimedia. The

comparison with all element of multimedia such as audio, text, graphic, video, and

animation.

Product Text Images Audio Video Animation

Mobile App

Umrah (2015)

✓ ✓ y

u

Mobile App

Umrah (2016)

Umrah Book

(2013)

Umrah Book

(2014)

Table 2. 1 Comparison Element of Multimedia

13

2.3 Summary of Chapter

This chapter discusses the information about the study on the existing product

that same about Umrah. This study is more to focus on development and guide to the

successful project, to come out with the new application will benefit all user.

14

CHAPTER 3

METHODOLOGY

3.1 Introduction

In this chapter is more about the description of the application process or in the

other word the methodology that used to develop the application. There are lot of the

methodology such as agile, waterfall and other else. But for sure in this application, the

methodology that suitable is ADDIE Methodology which is contains 5 phases such as

analysis, design, development, implementation, and evaluate. More information about

each phases of this model will be explaining in this chapter.

15

3.2 ADDIE Methodology

The ADDIE model is an iterative instructional design process, where the results

of the formative evaluation of each phase may lead the instructional designer back to

any previous phase. This methodology is suitable to developed mobile application. The

ADDIE Model have 5 phases such as analysis, design, development, implementation,

and evaluate as illustrated in the Figure 3.1.

Figure 3. 1 ADDIE Model

16

3.2.1 Analysis Phases

At this stage, it involves several determining processes and identifying problems

in the process of developing mobile i-Umrah applications. Once a problem can be

identified, an analytical process will be undertaken to find out what causes, or factors

are related or that cause the problem. The analysis process involves various aspects

including analysis of Umrah pilgrims, analysis of the learning environment and identify

the goal of creating this mobile i-Umrah mobile app.

3.2.2 Design Phases

Identify design of the system and developed prototype based on the

functionalities that will be build. The data or requirement obtained during planning and

analysis phase was transform into the design. In the design phase, the focus is on

learning objectives, content, subject matter analysis, exercise, lesson planning,

assessment instruments used and media selection. The storyboard can show the look

and feel of the application that will be developed. Some of the storyboards can be seen

in Figure 3.2 until Figure 3.17.

17

Figure 3. 2 Start Page

Figure 3. 3 Page Sign-Up

18

Figure 3. 4 Main Menu

Figure 3. 5 Page Umrah

19

Figure 3. 6 Page Umrah (Niat)

Figure 3. 7 Page Umrah Niat (Amalan)

20

Figure 3. 8 Page Umrah Niat (Larangan)

Figure 3. 9 Page Umrah Niat (Doa)

21

Figure 3. 10 Page Dam

Figure 3. 11 Page Doa Harian

22

Figure 3. 12 Page Kuiz

Figure 3. 13 Page Tasbih

23

Figure 3. 14 Page Video

Figure 3. 15 Page Nota

24

Figure 3. 16 Page Rujukan

Figure 3. 17 Page Ratings

25

3.2.3 Development Phases

This level involves building a real i-Umrah mobile application by using all the

elements of multimedia and technology selected based on the requirements or

requirements of this application. Built based on analysis and design phase. The purpose

of this phase is to produce effective module plans to Umrah pilgrims using the mobile

application i-Umrah. During this phase will be developed, the learning steps and the

media to be used in teaching and other required documents. The output in the design

phase will be input to the development phase. Resource project development work will

be done according to agreed-upon specification requirements. Each development will

be tested to ensure that it is consistent and effective

3.2.4 Implementation Phases

The implementation phase represents the first test of making the entire course

and is therefore recommended to divide this phase conditionally into two parts: a test

implementation phase and final implementation phase. The implementation phase is a

testing phase. Completed applications will be tested by the supervisor. Testing is aimed

at finding the weaknesses and detecting any unobserved errors during the authoring

process. During the test, the supervisor freely commented and criticized for

improvements to be made and any errors can be corrected.

3.2.4.1 Test Run Project

This is when the developer test runs the project by herself. This is to ensure that the

project can be used and is running accordingly.

26

3.2.4.2 User Test Run

Before presenting the final product, a demo version is given to alpha and beta testers to

ensure that the project is meeting their criteria. Criticisms and constructive feedback are

taken into account to be implemented later on.

3.2.5 Evaluate

This phase measures the effectiveness and efficiency of the instruction. This

assessment involves the process of obtaining feedback from users on the content,

graphics, audio, animation, interfaces and so forth contained in the application. This

process is carried out through the methods of purchase, testing, questionnaire,

interviews and so on to ensure the application will be in harmony with the needs of

consumers.

3.2.5.1 Debug

In debug, the first one is identify error. After the test run had been done, errors that were

found by the users must be identified. Glitches and mistakes must be brought to light

for the developer to improve the project while also implementing the feedback given by

the alpha and beta testers. Next is find solution. Once errors have been identified,

solutions to solve them must be done.

3.2.5.2 Final Product

In final product, the developer has to present their product. Product is ready to be

presented and launched for a large audience to use.

27

3.3 Hardware and Software Requirement

To be done this project, there are some hardware and software that must use to

launch the project. Without use this, may be difficult to develop this project and making

harder. This table illustrate the software and hardware used to develop the application.

3.3.1 Hardware Requirement

Hardware is important in ensuring the research of this project is success. Each

hardware has its own function in order to do this research. The hardware to develop this

project is shown as below.

No Hardware Description

1. Laptop

Function : To develop the system and for

documentation.

28

2. Mobile Phone

Function : To run and test the application.

3. Printer

Function : To print documents and reports.

4. External Hard Disk

Function : To backup all project data.

Table 3. 1 Hardware Requirement

29

3.3.2 Software Requirement

To develop this project, it can be many choices the best software, this is because

the selection of software depends on requirement needed in this project. The software

to develop this project shown as below.

No Software Description

1. Ionic A framework that provides tools and services

to develop this application.

2. Visual Studio Code Source code editor to write the coding for the

application.

3. XAMPP Provides a local web server and database

connection.

4. MySQL Database management system.

5. Google Chrome A platform to run the application.

6. Android Operating system to run the application.

7. Microsoft Office 2016

• Microsoft World 2016

• Microsoft PowerPoint

2016

Software that are used for documentation and

presentation of the project.

30

8. Adobe Reader Software that is used to view documents,

journals, research papers and PDF files.

Table 3. 2 Software Requirement

3.4 Technique/Method

The technique that I use to develop this application is a hybrid searching

technique, where this technique is used to make a search in the i-Umrah app that I'm

going to bump into. This feature is the common technique that used by various of

platform. Hybrid searching is combination of keywords and numbers which means

when we insert input that contain numbers and keyword at the same time in the search

process, we still will get the correct output. Differ from other traditional technique that

separate numbers and keywords searching.

3.5 Summary of Chapter

In this chapter, the methodology of this project is explained. The ADDIE

Method that be used because every phase during development this application follows

the project methodology that is mentioned in this chapter. The requirement of software

and hardware that being used are listed to ensure the development of this chapter.

31

REFERENCES

[1] Arshad, P. M. (16 August, 2013). Research. Retrieved from M-Umrah Mobile

Application: http://www.cs.usm.my/index.php/research/126-research/res-

achieves/228-m-umrah

[2] Dr, R. R. (2015). International Journal of Religious Tourism and. Pilgrimage

Experience and Consumption of Travel, p. 38.

[3] Girl, M. T. (31 November, 2016). 5 Smartphone Apps To Help You Make The

Most Of Your Umrah. Retrieved from Muslim Travel:

https://muslimtravelgirl.com/5-smartphone-umrah-apps-to-help-you-make-the-

most-of-your-umrah/

[4] Islam1, M. R. (2010). Mobile Application and Its Global Impact. International

Journal of Engineering & Technology, 74.

[5] Majid, H. A. (2016). HAJJRAH: An innovative application for pilgrims of Hajj

and Umrah. ARPN Journal of Engineering and Applied Sciences, 1948.