let’s learn hajj (education games) mobile application · mobile application nurul asyiqin binti...

63
LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION NURUL ASYIQIN BINTI ZUKIFFLI BACHELOR OF INFORMATION TECHNOLOGY (INFORMATICS MEDIA) WITH HONOUR FACULTY OF INFORMATICS AND COMPUTING UNIVERSITI SULTAN ZAINAL ABIDIN 2019

Upload: others

Post on 17-Oct-2020

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

LET’S LEARN HAJJ (EDUCATION GAMES)

MOBILE APPLICATION

NURUL ASYIQIN BINTI ZUKIFFLI

BACHELOR OF INFORMATION TECHNOLOGY

(INFORMATICS MEDIA) WITH HONOUR

FACULTY OF INFORMATICS AND COMPUTING

UNIVERSITI SULTAN ZAINAL ABIDIN

2019

Page 2: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

LET’S LEARN HAJJ (EDUCATION GAMES)

MOBILE APPLICATION

NURUL ASYIQIN BINTI ZUKIFFLI

BACHELOR OF INFORMATION TECHNOLOGY

(INFORMATICS MEDIA) WITH HONOUR

FACULTY OF INFORMATICS AND COMPUTING

UNIVERSITI SULTAN ZAINAL ABIDIN

2019

Page 3: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

i

DECLARATION

I hereby declare that this report entitled Let’s Learn Hajj is based on my original work

except for quotation an citations, which have been duly acknowledged. I also declare

that it has not been previously or concurrently submitted for any other degree at

Universiti Sultan Zainal or other institutions.

Name : Nurul Asyiqin Binti Zukiffli

Date :……………………………………………..

Page 4: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

ii

CONFIRMATION

This project report entitled Let’s Learn Hajj was prepared and submitted by Nurul

Asyiqin Binti Zukiffli and has been found satisfactory in term of scope, quality and

presentation as partial fulfilment of the requirement for the Bachelor of Information

Technology (Informatics Media) with honors in University Sultan Zainal Abidin.

Name : Pn Fauziah Binti Abd Wahab

Date :………………………………………………..

Page 5: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

iii

ACKNOWLEDGEMENT

In the name of Allah, the most Graciuos and the most Merciful.

Praise to Allah for blessing me to undergoing the process of completing this final year

project. Here, I would like to express my thanks my beloved parents, En Zukiffli bin

Man and Puan Khalijah binti Che Hassan, my family and friends for always providing

me the continued support in order to complete this final year project. You are my

constant source of inspiration. I express my thank to my supervisor, Puan Fauziah

binti Ab Wahab, for her guidance, enthusiasm and patient in supervising me to

complete this final year project.

May Allah bless all the kindness done by everyone in helping me to finish this final

year project.

Page 6: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

iv

ABSTRACT

Education is very important in modern times today. Therefore, it is important for

parents to educate children since childhood. As time goes by, the education system

can only be done at the tip of the finger. With the latest technologies like smartphones

and tablets everything can be easily explored easily and fast. Hence, in line with the

times of development, the education system has also changed towards a more

systematic and fun way through the application. But the lack of an application that

reveals about Hajj education for Muslim children. With that Let's Learn Hajj is

introduced through educational games and also interesting animations besides having

easy-to-understand questions specifically for muslim children. Let's learn Hajj was

created to give an easy picture of the implementation of Hajj through interesting and

easy-to-understand games for children aged four to six years old. This project will be

developed as a mobile app that uses Adobe Flash, Adobe Audition, Adobe Photoshop

and Android studio software. With this mobile apps that will be developed it can

help parents easily provide the basis of religious education about hajj to children.

Page 7: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

v

ABSTRAK

Pendidikan sangat penting pada zaman moden hari ini. Oleh itu, amat penting bagi

ibu bapa memberi pendidikan kepada anak-anak sejak kecil. Seiring dengan

perjalanan zaman, kini sistem pendidikan hanya boleh dilakukan hanya di hujung

jari. Dengan adanya teknologi terkini seperti telefon pintar dan tablet segalanya dapat

diterokai dengan mudah senang dan pantas. Oleh itu, seiiring dengan perkembangan

zaman, sistem pendidikan juga berubah kearah yang lebih mudah, sistematik dan

menyeronokkan melalui aplikasi .Tetapi kurangnya aplikasi yang mendedahkan

tentang pendidikan haji bagi kanak-kanak muslim. Dengan itu Let’s Learn Hajj di

perkenalkan melalui pendidikan berbentuk permainan dan juga animasi yang menarik

di samping mempunyai soalan-soalan yang mudah difahami khusus untuk kanak-

kanak muslim. Let’s Learn Hajj dicipta bagi memberi gambaran mudah tentang

perlaksanaan rukun haji melalui games yang menarik dan mudah difahami bagi

kanak-kanak yang berumur empat hingga enam tahun. Projek ini akan dibangunkan

sebagai aplikasi mudah alih yang menggunakan perisian Adobe Flash, Adobe

Audition, Adobe Photoshop dan Android studio. Dengan aplikasi yang akan

dibangunkan ini dapat membantu ibubapa memberi asas pendidikan agama tentang

haji kepada anak-anak dengan mudah.

Page 8: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

vi

CONTENT

PAGE

DECLARATION

CORFIRMATION

ACKNOWLEDGE

ABSTRACK

ABSTRAK

CONTENT

LIST OF TABLE

LIST OF FIGURES

CHAPTER 1 INTRODUCTION

1.1 Introduction 1

1.2 Problem Statement 2

1.3 Project Objectives 2

Page 9: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

vii

1.4 Project Scope 3

1.5 Milestone and Activities 3

1.6 Expected Result 5

CHAPTER 2 LITRATURE RIVIEW

2.1 Introduction 6

2.2 Review of Existing Resources 7

2.3 Summary 11

CHAPTER 3 METHODOLOGY

3.1 Introduction 12

3.2 Project Development Methodology 13

3.2.1 Planning Phase 13

3.2.2 Analysis 14

3.2.3 Design 14

3.2.4 Implementation and Testing 15

3.2.5 Maintenance 15

3.3 Project Requirement 15

3.3.1 Software Requirement 16

3.3.2 Hardware Requirement 17

3.4 System Design 18

3.4.1 Framework Design 18

3.4.2 Flowchart 19

3.4.2.1 Login 19

Page 10: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

viii

3.4.2.3 Manage Games 20

3.4.3 Storyboard Design 21

3.5 Summary 25

CHAPTER 4 IMPLEMENTATION AND TESTING

4.1 Specification Authoring Of Multimedia Elements 26

4.1.1 Button 27

4.1.2 Audio 27

4.1.3 Text 27

4.1.4 Animation 27

4.1.5 Software Implementation 28

4.2 Implementation and Output 28

4.2.1 Deployment 28

4.2.2 Interfaces 29

4.3 Testing and Result 37

4.3.1 Introduction 37

4.3.1.1 Black Box Testing 38

4.3.1.2 White Box Testing 38

4.3.2 Test Case 38

4.3 Summary 45

CHAPTER 5 CONCLUSION AND DISCUSSION

5.1 Conclusion 46

Page 11: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

ix

5.2 Benefit Of The Project 47

5.3 Suggestion for Improvement 47

5.4 Summary 48

REFERENCE 49

Page 12: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

x

LIST OF TABLES

TABLE TITLE PAGE

2.1 Review of existing resources(apps) 7

2.2 Review of existing resources(website) 10

2.3 Review of existing resources(journal) 10

3.1 List of software requirement 16

3.2 List of hardware requirement 17

4.1 Test Case for Successful of open

and login the application 38

4.2 Test case for User view the information 39

4.3 Test case for activity play games and quiz 40

4.4 Test case for user view the doa and zikr button 42

4.5 Test case for user view scoreboard 43

4.6 Test case for user view exits 43

4.7 Test case for user view credit 44

Page 13: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

xi

LIST OF FIGURES

FIGURE TITLE PAGE

1.1 Milestone and Activities 5

2.1 Let’s Hajj Games 8

2.2 Hajj Story 8

2.3 Kuis Seputar Haji 9

3.1 Project development methodology 13

3.2 Framework design 18

3.3 Enter Page 21

3.4 Main menu page 21

3.5 Introduction page 22

3.6 Games page 22

3.7 Example of Quiz Hajj 23

3.8 Example of Quiz Doa and Zikr 24

3.9 Doa and Zikr Page 24

3.10 Scoreboard pages 25

4.1 First Interface of mobile application 29

Page 14: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

xii

4.2 Second Interface of mobile application 29

4.3 Page inside introduction button 30

4.4 Page inside games button 31

4.5 Page inside commandment (Ihram games) 31

4.6 Page in commandment(Wukuf games) 32

4.7 Page in commandment(Tawaf games) 33

4.8 Page inside commandment (Shaving games) 33

4.9 Page inside commandment (Sa’ie games) 34

4.10 Page for quiz hajj. 35

4.11 Page inside quiz doa and zikr 35

4.12 Page inside doa and zikr 36

4.13 Interface for page scoreboard 36

4.15 Exits Page 37

Page 15: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

1

CHAPTER 1

INTRODUCTION

1.1 Introduction

Hajj is the fifth term that must be fulfilled by the capable Muslims. Education about

the Hajj since childhood is highly demanded to expose them how important it is to

perform Hajj on every month of Zulhijah. In today's modernization stage, various

ways have been done to embark on Hajj, but are often non-continuous. In line with

current developments, the learning process through games using mobile apps is

rapidly developing, but fewer applications focusing on Hajj. Therefore, Let's Learn

Hajj is created to provide learning and exposure Hajj to Muslim’s children. Let's

Learn Hajj focuses on learning what are obliged to perform during Hajj through a

creative, engaging, easy-to-understand game. In addition, Let's Learn Hajj has the

introduction of Hajj, prayer and concise remembrance (zikr) in form of text, images

and audio for sound. Therefore, it is very important to expose the Hajj at an early age,

as some of them think they are still small to understand of learning Hajj. Therefore,

Page 16: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

2

Let's Learn Hajj can solve problems, with easy-to-understand game creation, kids can

learn while playing, with mind-blowing and entertaining games, while applying fun

values in every game.

1.2 Problem Statement

Here are some statements about the term of Hajj is that children cannot describe and

feel how the Hajj is performed. Additionally, the lack of an educational application in

the form of exciting, concise and easy-to-understand hajj education is poorly

developed. Hajj exposure is performed only during the season or near to the hajj

season and does not persist. In addition, the lack of parents and related parties' role in

providing early exposure on the Hajj in early childhood education. In addition, most

apps about Hajj are bored, unattractive and less creativity.

1.3 Project Objectives

The objectives of development this mobile application are:-

1. To develop learning applications through fun games.

2. To design mobile games that suitable for childrens.

3. To test player in games in form of a brief overview of the pilgrimage.

Page 17: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

3

1.4 Project Scope

Based on the objectives the user will use this app is for a children. Here are some of

the scopes that need to be taken care of, as it is to ensure that it is appropriate to use

based on their age. The project is proposed in defined scope:

1. Target user

Suitable for all children but focus on four to six years old.

2. Content

Focus on six pillar of hajj in form of creativity games and have a simple quiz in each

games

Have button short introduction of hajj.

Have button of simple zikr and prayers for hajj

1.5 Milestone and Activities

Page 18: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

4

No

.

ACTIVITIES WEEK

1 2 3 4 5 6 7 8 9 1

0

1

1

1

2

1

3

1

4

1

5

1 Topic Confirmation & Discussion with Supervisor

2 Project Title Proposal

3 Submission of proposal

4 Preparation of Chapter1

1.1 Background

1.2 Problem Statement

1.3 Objectives

1.4 Scope

1.6 Activities

1.7 Milestone

1.8 Expected result

5 Preparation of Chapter2

2.1 Introduction

2.2 Literature review

2.3 Research comparison

6 Proposal Progress Presentation & Evaluation

7 Discussion & Correction Proposal

8 Proposed Solution Methodology (Chapter 3)

3.1 Problem identification

3.2 Design conceptual model

3.2.1 Process model

3.2.2 Data model

3.3 Method

3.3.1 Formula/ Algorithm / technique

10 Proof of Concept– Develop prototype

11 Drafting Report of the Proposal

Page 19: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

5

Figure 1.1: Milestone and Activities

1.6 Expected Result.

1. This app will be developed using android platform. This app will be developed

using Adobe Flash.

2. This app will help facilitate learning about hajj based on term of hajj with

interesting games.

12 Submit draft of report to supervisor

13 Seminar Presentation & Final presentation

14 Correction Report

15 Final Report Submission

Page 20: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

6

CHAPTER 2

LITERATURE REVIEW

2.1 Introduction

Nowadays, there is difficulties in finding a best learning in hajj for children by using a

mobile apps that educated them about term of hajj. Hence, in this chapter continue

with the studies and research of hajj games using mobile app for a children. By using

mobile app, learning process will easier to be access anywhere through the

smartphone or tablet. Besides, this topic also help in analysing information of existing

hajj games. By understanding the existing system detail in each application games, it

will help in determining the best approach of learning to develop system.

Page 21: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

7

2.2 Review Of Existing Resource

APPS AUTOR/YE

AR

ABOUT ADVAN

TAGES

DISADVANTAGES

Learn

Hajj

Games

(Apps)

-Mizan

Application

(map@mizan.

com)

(2018)

-Focuses on two

games only -

tawaf and sai’.

-Easy to

kid to

play.

-Have a

fun

games.

-No

internet

needed

-Only have two pillar

of pilgrimage.

-Less attractive

interface.

Hajj

Story(Ap

ps)

-Aqtar

(Hajj.aqtar.co

m)

(2018)

-Concept

illustrates the

pilgrimage

learning using

AR (augmented

reality).

-

Combin

ation of

AR and

3D

animatio

n.

-User must purchase a

book to see the moving

picture

-Incomplete titles

provide confusion to

users.

Kuis

Seputar

Haji

-Pemuda

Kahfi

(mail@pemud

akahfi.com)

(2017)

-In the form of

Islamic learning

about Hajj based

on quiz

-User

friendly.

-Good

design

-No animation.

-Have limited question.

-Moving background

interface is disturbing.

Table 2.1 : Review of existing resource(Apps)

Page 22: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

8

1. Learn Hajj Games (Apps).

Figure 2.1: Let’s Hajj Games

2. Hajj Story(Apps).

Figure 2.2: Hajj Story

Page 23: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

9

3. Kuis Seputar Haji.

Figure 2.3: Kuis Seputar Haji

Page 24: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

10

WEB AUTOR ABOUT ADVANTAGES DISADVANTAGES

Hajj-

Pilgrimag

e

Fun Trivia

(www.funtr

ivia.com/

playquiz/

quiz18428

8151a608.h

tml)

(2018)

-This website

is a pilgrimage

quiz online. It

has questions

that test the

players about

the knowledge

of pilgrims. In

addition, this

website also

has a log in

and a new

player button

for players

who want to

play on this

website.

-User friendly.

-Aimed at testing

players'

knowledge of

Hajj.

- The player must

access the internet if

they want to play.

-Interface is not

interesting.

- No introduction to

hajj.

Table 2.2: Review of existing resource(Website)

AUTHOR /

YEARS

JOURNA

L

OBJECTIVE

SUMMARY

ADVANTAGES

Vika

Fitratunnany

Insanittaqwa,

Imam

Kuswardayan,

and Dwi

Sunaryono.

Haj

Simulatio

n using

Ren’PY

-An

educational

game is a

simulation

game that

guides the

player to solve

a specific

In conclusion, the

game "Haj

Simulation" made

from the

instructions and

guidance of the

pilgrimage is the

fact that the

-Has an

interesting

interface.

-Using Ren'Py in

creating games

in the form of

novel visuals.

-Have a

Page 25: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

11

(2014)

problem in the

real world.

- Making

information

more readily

accessible.

journey of

worship contains

accurate

information. The

game also has

good educational

benefit value

based on user test

results .

complete

pilgrimage.

Table 2.3: Review of existing resource(Journal)

2.3 Summary

In conclusion, literature review gave detail understanding about research and studies

of apps, website and journal that are done by other people which is related to the

project. With the availability of research on existing applications, journals and webs,

it can help in the process of implementing the project become more smoothly and

facilitate the development of the project become more effectively.

Page 26: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

12

CHAPTER 3

METHODOLOGY

3.1 Introduction

This chapter will describe the process involved in completing this games. The project

methodology should be organized in a scientific investigation to solve problem to

make sure this project achieve objective. Since this project is smaller scale of project

and takes only shorter of time to complete, waterfall model is used. Moreover, this

model is simple and easy to understand.

Page 27: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

13

3.2 Project Development Methodology

The methodology that used in developing this games application is Waterfall model.

The waterfall model is the System Development Live Cycle (SDLC) approach that to

was to be used for software development. Any phase in the development process will

begin if the previous phase is complete. Once the work produced in one phase is

approved, the phase end and the next phase begins, it very suitable to implement in

games because it will have level to user complete the games for next level.

Advantages of waterfall model is identifying requirement long before programming

begin. Another advantage of waterfall is limiting changes to the requirement as the

project proceeds. Furthermore, waterfall model is easy to use and easy to understand.

Figure 3.1: Project development methodology

3.2.1 Planning Phase

Based on this model, the first thing to be planned is brainstorming the idea and

discuss about title with supervisor. While proposing the title of the project, an abstract

Page 28: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

14

about the proposed project also being attached together. In this phase, the Gant chart

is also constructed to carry out all plan activities according as scheduled.

3.2.2 Analysis

To get clear picture about research problem, analysis will conducted. This process

could help to understand more about the games that will developed. It was conducted

by people that expert in developed games and interviewing with people that have go

to Meqah and do Hajj before. Beside, to get more understanding by visit some of

website about hajj, journal, trough hajj guide book, website or youtube and do some

research paper. Based from this analysis a clear view of problem scope will be

identified. By doing this analysis, boundary of the research will be determined

3.2.3 Design

In the design phase, the design of games will be develop in adobe illustration, adobe

photoshop and adobe flash. The design of games should be in line with the theme and

attracts children to play. Therefore, there will be a storyboard in this method to show a

bit of an overview of whole games. In addition, for data streaming, it will connect to

the database. Data Flow Diagram (DFD) and Entity Relationship Diagram (ERD) are

used to describe process to be develop.

Page 29: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

15

3.2.4 Implementation And Testing

In implementation phase, the plan laid out in the system design phase is executed. The

games is mainly implemented in PHP and MySQL language and also in Flash.

After implementation is complete, the games will be tested. Any faults and error will

find here. It will perform all the testing activities to make sure if it works as expected

and the games meet the requirement.

3.2.5 Maintenance

System maintenance is final phase in waterfall model. In this phase, it will make sure

that the application is up and running in the respective environment.

3.3 Project Requirement

Project requirement includes two part which are software requirement and hardware

requirement. The requirement the project to ensure the completion process well and

every aspect requirement need to be used for chapter implementation and analyse to

make sure the correct usage of the application.

Page 30: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

16

3.3.1 Software Requirement

List of software needed:

Table 3.1: List of software requirement

NO. Software Purpose

1. Adobe Flash Used to code the core program of the project

its debugs and run test the application

2. Notepad++ Used to code the program.

3. Adobe Photoshop Used to design logo, background and interface

of application

4. Adobe Audition Used to edit and recording music, sound and

voice to be implement to this project

5. Microsoft Word 2010 Used to document of application

Page 31: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

17

3.3.2 Hardware Requirement

List needed:

Table 3.2: List of hardware requirement

No. Hardware Description

1. Laptop ASUS DESKTOP-24UUCJ8

2. Processor Intel(R) Core(TM) i3-5005U CPU @

2.00GHz

3. Memory 4 GB RAM

4. Operation System Window 10

5. System Type 64 bit operating system

6. Pendrive HP 16.00 GB

Page 32: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

18

3.4 System Design

3.4.1 Framework Design

The framework for this apps is generally being defined as below:

Figure 3.2: Framework design

USER APPLICATION DATABASE

Register

Login

Learning

Information

Activities

Score

Page 33: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

19

3.4.2 Flowchart

3.4.2.1 Login

Page 34: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

20

3.4.2. Manage Games

Page 35: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

21

3.4.3 Storyboard Design

Storyboard design are help to see the whole project that want to build.

Figure 3.3 : Enter Page

Figure 3.4 : Main Menu Page

Page 36: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

22

Figure 3.5 : Introduction Page

Figure 3.6 : Games Page

Page 37: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

23

Figure 3.6 : Example Of Games

Figure 3.7 : Example of Quiz Hajj

Page 38: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

24

Figure 3.8 : Example Of Quiz Doa and Zikr

Figure 3.9 : Quiz Doa and Zikr Page

Page 39: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

25

Figure 3.10 : Scoreboard Pages.

3.5 Summary

In this chapter, we have discussed about methodology of Let Learn Hajj. The

methodology which have been used is waterfall method. The waterfall method

provided a planning, analysis, design, implementation and testing and maintenance.

Beside, for the requirement of this project, we already stated above that are hardware

and software. Furthermore to show the flow and process of this project, content

diagram, data flow diagram, entity relationship diagram are shown in order to

illustrate a better understanding about this project.

Page 40: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

26

CHAPTER 4

IMPLEMENTATION AND TESTING

4.1 Specification Authoring Of Multimedia Elements

In this chapter, development will show and describe the elements contained in this

mobile application such as buttons, audio, text, and images. all the elements in this

app are designed by the developer themselves.

Page 41: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

27

4.1.1 Button

All the buttons available in this application are self-designed by project

developers. When the user presses the button, the button will produce a sound.

4.1.2 Audio

Audio is inserted into the application according to the suitability of the project

being created. Audio is inserted on every page and on every button.

4.1.3 Text

There are many uses of text in this application. especially in the quiz and the

introduction of hajj.

4.1.4 Animation

Due to this app to focus on learning for children.so each site of this app is

placed animated to attract their attention. Such as movement of cloud, camel

movement, and many more in this application.

Page 42: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

28

4.1.5 Software Implementation

In this mobile app, before starting the activity it is divided into parts from the

login, then enter the main menu and so on.

4.2 Implementation and Output

This chapter are discuss about implementation and testing. After design phase,

implementation phase is very important phase in the project development.

Implementation phase is where all the module involved is implemented into this

application in order the system is workability and usefulness. The output should be

done throughout the implementation process.

4.2.1 Deployment

This project is used in Android Platform devices and developed with software

Abode Flash Professional CS6. The language used to develop this application is Java

and Code Snippet. To store user data inside the flash it is already implemented flash.

Page 43: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

29

4.2.2 Interfaces

Figure 4.1: First interface of an mobile application.

When a user opens the application, this is the first page before user can use the

application. They need to enter the name before go in to play a games.

Figure 4.2 : Second interface of an mobile application.

Page 44: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

30

At second page there are have four main option button which is introduction,

games, doa&zikr and score. In the second page also have button exit the apps and

button credit for supervisor.

Figure 4.3 : Page inside introduction button.

For this page is about to give an information to a user before start the question

and games. This page is provided simple information about hajj and also have element

animations to extract children to learn more about hajj.

Page 45: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

31

Figure 4.4 : Page inside games button.

In this page are have three main button games, it’s include

commandment, quiz hajj and quiz doa&zikr button.

Figure 4.5 : Page inside commandment (Ihram games)

Page 46: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

32

In this page have step by step of commandment of hajj. Start with play

games ihram. For this games the player should choose the correct answer for ihram

clothe. The games have two version first is a boy animate and second is girl animate.

After play a games there will have next step games for wukuf. Also, the games will be

continue step by step like hajj commandment.

Figure 4.6 : Page in commandment(Wukuf games)

The second step is wukuf games. Same as ihram games the player

should choose the correct answer what to do during wukuf at arafah. Inside wukuf

games it’s have three questions.

Page 47: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

33

Figure 4.7 : Page in commandment(Tawaf games)

For third step is tawaf. The animation will moving and circling the

kaabah and a player should choose the correct answer for how much animation will

circle.

Figure 4.8 : Page inside commandment (shaving games).

Page 48: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

34

For a fourth step is shaving. This games is about to educated the player

what to do during shaving and what figure will look after shaving. There are have a

multiple choice of animation figure to player choose which one is suitable.

Figure 4.9 : Page inside commandment (sa’ie games)

For last step in commandment hajj is sa’ie games the player have to

complete the puzzle. The games was simple to understand by player in the same time

will educated them what to do during sa’ie.

Page 49: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

35

Figure 4.10 : Page for quiz hajj.

For the quiz hajj there have five question to be answer also have a multiple

choices. At the last quiz will be shown a score.

Figure 4.11 : Page inside quiz doa and zikr.

Page 50: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

36

For this page also have multiple choice of question. There are have three question that

should be answer.

Figure 4.12 : Page inside doa and zikr.

This page in button doa and zikr at home page have short doa and zikr. It’s

have text and also button play for hear a sound.

Figure 4.13 : Interface for page scoreboard.

Page 51: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

37

This is page for scoreboard. In this page is shown the score the whole score after play

a games and answer the question.

Figure 4.15 : Exits Page

4.3 Testing and Result

4.3.1 Introduction

There are have three types of testing first is unit testing, integration testing and system

testing. The reason why the system needed to be test is that to see whether the system

is fully functioning, error free and also meets the user requirement. For unit testing,

it’s needed to verify the functionality of specific code while integration testing work

to expose defects in the interface and the interaction between components or between

the modules. Moreover, end-to-end testing test to completely integrated system to

verify so that it will meet requirement.

Page 52: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

38

4.3.1.1 Black Box Testing

Black box testing is a technique in which to test the functionality of the

software without looking at the internal code structure, implementation details and

knowledge of the internal path of the software. So we can include that this type of

testing is just based on the software requirement and specification by just focusing on

the inputs and outputs of the software without bothering the internal knowledge of the

software program.

4.3.1.2 White Box Testing

White box testing will focusing on improving design and usability, the flow of

input and output through the application. It will test the software internal structure or

work of an application. It also involved testing a series of predefined inputs against

the desired output. This because the objective of testing is to verify it’s working flow

for an application.

4.3.2 Test Case

Table 4.1 : Test Case for Successful of open and login the application

Test case for successful of

open and login the

application

Step Test Procedure Expected Result

1. Open the application of Let’s

Learn Hajj

One button will

appears that are

“Enter” button

Page 53: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

39

and have a input

button to put a

name.

2. User enter the input button. User enter the

name

3. User click Enter button Enter page is

loaded. Login

successful and

redirected to

menu page

Table 4.2 : Test case for User view the information.

Test case for user view the

information

Step Test Procedure Expected Result

1. Menu page view View six buttons.

There are

“Introduction”,

“Games”, “Doa and

Zikr”, “Scoreboard”,

“Exit” and “Credit”

button.

2. User click “Introduction”

button.

View page video

animation that review

an information about

hajj.

Page 54: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

40

3. User click “Exits” button. The video end and go

to main menu

Table 4.3 : Test case for activity play games and quiz

Test case for successful of

open and login the

application

Step Test Procedure Expected Result

1. Menu page view View six buttons.

There are

“Introduction”,

“Games”, “Doa

and Zikr”,

“Scoreboard”,

“Exit” and

“Credit” button.

2. User click “Games” button. View four button.

There are “

Commandment”,

“Quiz hajj”

,“Quiz Doa and

Zikr” and

“Home” button.

3. User click “Commandment”

button.

View the games

based on

commandment of

hajj. Start by

Page 55: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

41

Ihram, Wukuf,

Tawaf, Shaving

and Sa’ie games.

After play a

whole games its

will have a score,

it also provided

an answer button

for the correct

answer of the

games and home

button.

4. User click “Quiz Hajj” button. View a five

simple question

of hajj and also

have sound that

read the

questions. Also

have a score for

the quiz and home

button

5. User click “Quiz Doa and Zikr”

button.

View a three

question of doa

and zikr. After

play have a score

and home button

6. User click “Home” button. View the page

menu.

Page 56: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

42

Table 4.4 : Test case for user view the doa and zikr button

Test case for user view

the doa and zikr button

Step Test Procedure Expected Result

1. Menu page view. View six buttons.

There are

“Introduction”,

“Games”, “Doa

and Zikr”,

“Scoreboard”,

“Exit” and

“Credit” button.

2. User click “Doa and Zikr”

button.

View three

button. There are

“Doa”, “Zikr” and

“Home” button.

3. User click “Doa” button. Have text and

button sound to

play the audio.

4. User click “Zikr” button. Have text and

button sound to

play the audio

5. User click “Home” button. View the page

menu.

Page 57: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

43

Table 4.5 : Test case for user view scoreboard.

Test case for view

scoreboard.

Step Test Procedure Expected Result

1. Menu page view View six buttons.

There are

“Introduction”,

“Games”, “Doa

and Zikr”,

“Scoreboard”,

“Exit” and

“Credit” button.

2. User click “Scoreboard” button. Have table score

for whole games

as a summary and

button home

3. User click “Home” button. View the page

menu.

Table 4.6 : Test case for user view exits.

Test case for view exit

button.

Step Test Procedure Expected Result

1. Menu page view View six buttons.

There are

“Introduction”,

Page 58: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

44

“Games”, “Doa

and Zikr”,

“Scoreboard”,

“Exit” and

“Credit” button.

2. User click “Exit” button. View a question

for a user to

choose for stay in

the apps or quit

the games.

Table 4.7 : Test case for user view credit.

Test case for view credit button.

Step Test Procedure Expected Result

1. Menu page view View six buttons.

There are

“Introduction”,

“Games”, “Doa

and Zikr”,

“Scoreboard”,

“Exit” and

“Credit” button.

2. User click “Credit” button. View a name of

supervisor and

have home

button.

Page 59: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

45

3. User click “Home” button. View the page

menu.

4.4 Summary

In the nut shell of this chapter, the developer shows the interfaces those

developed for the Let’s Learn Hajj mobile application games for a kids. The

implementation phase is where the developer will test the system itself to see whether

the system can work properly and user-friendly.

Page 60: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

46

CHAPTER 5

CONCLUSION AND DISCUSSION

5.1 Conclusion

By the end of this study, “Let’s Learn Hajj” application project is expected

that it can encourage the children to learn more about hajj by using a mobile

application as platform. For Let’s Learn Hajj application is provided the five

commandment or step during hajj. Also, it’s provided a simple games, doa and zikr,

animation videos and sound for kid to learn about hajj.

Page 61: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

47

5.2 Benefit Of The Project

The project mobile application entitled "Let's Learn Hajj" can give a huge

contribution in helping the children's learning process. This is because it contains

solid learning with knowledge. This application helps children learn while playing

with fun content.

The benefit of this mobile application is:-

1. Interesting especially in children.

2. Combines technology and education.

3. Helping children in the learning process.

4. To increase children's knowledge of the pilgrimage.

5.3 Suggestion for Improvement

Although the application operates in properly and follows the milestone of

project respectively, there are exits some changes can be taken for better

performances. This is for improve the quality for future. The developer must come to

date with current technology to ensure the application that developed will meet the

standard. For the future, this mobile apps can be provided the whole version about

hajj and a lot of activity and games will be created.

Page 62: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

48

5.4 Summary

In a nutshell, Let’s Learn Hajj mobile application project was developed to

help a parent to teach their children about hajj in the simple way. Let’s Learn Hajj was

created because there are not much apps was being develop about hajj to a children

nowadays. Finally, the developer hopes this mobile application can be upgrades in full

version of hajj and can be market to educational sector or platform, for a children and

can give a benefit and knowledge to everyone also can achieve the user requirement.

Page 63: LET’S LEARN HAJJ (EDUCATION GAMES) MOBILE APPLICATION · mobile application nurul asyiqin binti zukiffli bachelor of information technology (informatics media) with honour faculty

49

REFERENCES

1. Application, M. (2018). google play. Retrieved from

https://play.google.com/store/apps/details?id=com.mizan.map.learnhajjgames

2. Application, M. (2018). Learb Hajj Games.

3. AQTAR. (n.d.). APK. Retrieved 2018, from https://apkpure.com/hajj-

story/com.aqtar.Hajj

4.Kahfi, P. (2018). APK. Retrieved from

https://play.google.com/store/apps/details?id=com.pemudakahfi.quiziduladhahaji&rdi

d=com.pemudakahfi.quiziduladhahaji

5.kajian agama lengkap. (n.d.). Retrieved from

https://kajianagamalengkap.blogspot.com/2016/08/syarat-dan-rukun-wajib-haji.html