KHAIRUL KHAIRINA BINTI MUSTAFA · 2019. 5. 9. · Basically, ADDIE model have five phases which are Analysis, Design, Development, Implementation and Evaluation. The ADDIE model is

LEARNING TAJWEED USING MOBILE APPLICATION (EZTAJWEED)

KHAIRUL KHAIRINA BINTI MUSTAFA

BACHELOR OF INFORMATION TECHNOLOGY

(INFORMATICS MEDIA) WITH HONOURS

UNIVERSITI SULTAN ZAINAL ABIDIN

2019

i

DECLARATION

I hereby declare that this report is based on my original work except for quotations and

citations, which have been duly acknowledged. I also declare that it has not been

previously or concurrently submitted for any other degree at University Sultan Zainal

Abidin or other institutions.

_______________________________________

Name : Khairul Khairina Binti Mustafa

Date : 9th May 2019

ii

CONFIRMATION

This is to confirm that:

The research conducted and the writing of this report was under my supervision.

_________________________

Name : Pn Rohana Binti Ismail

Date : 9th May 2019

iii

DEDICATION

All praises is due to Allah (Glorified and Exalted is He). Indeed, He deserves

the best of thanks and the most beautiful of praises. Without his blessings, I would not

be able to complete this final year project. My hearties gratitude and deepest thanks

goes to my beloved supervisor, Pn Rohana Binti Ismail for the continuous support,

valuable guidance and critical comments throughout the development of the project.

Appreciation also goes to all lecturers who have provided guidance throughout the

entire long journey.

In addition, I am grateful for the continuous moral support given from my family

even before the project started to the end of the project submission. A lot of thanks and

appreciation goes especially for my parents for always being there for me along the

hardship and always pray for me. Indeed, the support given really help to motivate me

to complete this project.

iv

Last but not least, my sincerely thanks to my fellow friends who willing to help

me to complete this project and give a good suggestion in order to improve this project.

Lastly, I would like to acknowledge each and every person who has contribute to the

success of this final year project, whether directly or indirectly. May Allah S.W.T bless

all of them.

v

ABSTRACT

Now, day by day technology is growing rapidly. However, the way to study

tajweed at school is still the same as using the traditional method of using textbooks.

Students are getting bored with this kind of learning. So, Learning Tajweed Using

Mobile Application (EzTajweed) is a method that helps primary school students in

addressing this issue. This application will helps primary students to learn tajweed in a

fun way because the application contains a multimedia element that suits their age.

Besides the module of learning tajweed, the application also contains some quiz to the

user to make sure they understand what they have learned.

vi

ABSTRAK

Pada masa kini, teknologi hari demi hari berkembang pesat. Walau

bagaimanapun, cara belajar tajweed di sekolah masih sama dengan menggunakan

kaedah tradisional menggunakan buku teks. Pelajar merasa bosan dengan pembelajaran

seperti ini. Oleh itu, Learning Tajweed Using Mobile Application (EzTajweed) adalah

satu kaedah yang membantu pelajar sekolah rendah dalam menangani masalah ini.

Aplikasi ini akan membantu pelajar-pelajar utama belajar tajweed dengan cara yang

menyeronokkan kerana aplikasi ini mengandungi unsur multimedia yang sesuai dengan

usia mereka. Di samping modul pembelajaran tajweed, aplikasi ini juga mengandungi

beberapa kuiz kepada pengguna untuk memastikan mereka memahami apa yang mereka

pelajari.

vii

CONTENTS

Page

DECLARATION i

CONFIRMATION ii

DEDICATION iii-iv

ABSTRACT v

ABSTRAK vi

CONTENTS vii-xii

LIST OF TABLES xiii

LIST OF FIGURES xiv-xvi

CHAPTER I INTRODUCTION

1.1 Background 1-2

1.2 Problem Statement 3

1.3 Objectives 3

1.4 Project Scope 4

1.4.1 User Scope 4

1.4.2 System Scope 4

1.5 Limitation of Work 5

1.6 Expected Result 5

1.7 Milestone 6

viii

CHAPTER II LITERATURE REVIEW

2.1 Introduction 7-8

2.2 Mobile Application Learning 8

2.3 Tajweed Law 8-9

2.4 Analysis Model 9-13

2.5 Comparison between Journal and Mobile 14-16

Application

2.6 Conclusion 17

CHAPTER III RESEARCH METHODOLOGY


3.2 Methodology Model 19-20

3.2.1 Analysis Phase 20

3.2.2 Design Phase 21

3.2.3 Development Phase 22

3.2.4 Implementation Phase 22

3.2.5 Evaluation Phase 22

3.3 Hardware and Software Requirement 22

3.3.1 Hardware 22-23

3.3.2 Software 23

3.4 Application Design 24-30

ix

3.4.1 Navigation Maps 24

3.4.2 Storyboard 25-27

3.4.3 Design Interface 28-29

3.4.4 Entity Relationship Diagram 29-30

3.5 Conclusion 31

CHAPTER IV IMPLEMENTATION


4.2 Interface Design 33

4.2.1 Interface: Main Page 34

4.2.2 Interface: Content Page 35

4.2.3 Interface: Ikhfa’ Haqiqi Main 36

Page

4.2.4 Interface: Pengertian Ikhfa’ 37

Haqiqi Page

4.2.5 Interface: Huruf Ikhfa’ 38

Haqiqi Page

4.2.6 Interface: Potongan Ayat 39

Ikhfa’ Haqiqi Page

4.2.7 Interface: Iqlab Main Page 40

4.2.8 Interface: Pengertian 41

x

Iqlab Page

4.2.9 Interface: Huruf Iqlab Page 42


Iqlab Page

4.2.11 Interface: Izhar Halqi 44

Main Page

4.2.12 Interface: Pengertian Izhar 45

Halqi Main Page

4.2.13 Interface: Huruf Izhar Halqi 46

Page


Izhar Halqi Page

4.2.15 Interface: Idgham Maal 48

Ghunnah Main Page

4.2.16 Interface: Pengertian Idgham 49

Maal Ghunnah Page

4.2.17 Interface: Huruf Idgham 50

Maal Ghunnah Page

4.2.18 Interface: Potongan Ayat Idgham 51

Maal Ghunnah Page

xi

4.2.19 Interface: Idgham Bila 52

Gnunnah Page

4.2.20 Interface: Pengertian 53

Idgham Bila Ghunnah Page

4.2.21 Interface: Huruf Idgham 54

Bila Ghunnah Page


Idgham Bila Ghunnah Page

4.2.23 Interface: Quiz Main Page 56

4.2.24 Interface: Quiz Level 1 Page 57


4.2.26 Interface: Total Mark Quiz 59

Level 1 Page



Level 2 Page



Level 3 Page

xii

4.3 Testing 64

4.4 White Box Testing 64

4.5 Black Box Testing 64-65

4.5 Test Case 65

4.6.1 Test Executed On 65-70

Application

CHAPTER V CONCLUSION

5.1 Introduction 71

5.2 Project Achievement and 72

Contribution

5.3 Project Constraint 72

5.4 Future Work 73

5.4 Conclusion 73

REFERENCES 74-75

xiii

LIST OF TABLES

TABLE TITLE PAGE

2.1 Comparison between Journal and Mobile Application 12-15

4.1 Test Case for Enter Application 63

4.2 Test Case for Enter “Belajar” Tajweed 63-64

4.3 Test Case for Enter Quiz 64

4.4 Test Case for Enter Quiz Level 1 65



xiv

LIST OF FIGURES

FIGURE TITLE PAGE

2.1 Sample of User Interface Menu Option in e-TLM 9

2.2 Mobile Courseware of M-Tajweed 11

2.3 User Interface of Secil Tajwid 13

3.1 ADDIE Model 20

3.2 Navigation Map of Learning Tajweed 24

3.3 Main Page 26

3.4 Hukum Page 26

3.6 Pengertian Page 26

3.7 Huruf Page 26

3.8 Potongan Ayat Page 26

3.9 Quiz Page 26

xv

3.10 Score Page 27

3.11 Video Page 27

3.12 Entity Relationship Diagram 30

4.1 Main Page 34

4.2 Content Page 35

4.3 Ikhfa’ Haqiqi Page 36

4.4 Pengertian Ikhfa’ Haqiqi Page 37

4.5 Huruf Ikhfa’ Haqiqi Page 38

4.6 Potongan Ayat Ikhfa’ Haqiqi Page 39

4.7 Iqlab Main Page 40

4.8 Pengertian Iqlab Page 41

4.9 Huruf Iqlab Page 42

4.10 Potongan Ayat Iqlab Page 43

4.11 Izhar Halqi Main Page 44

4.12 Pengertian Izhar Halqi Page 45

4.13 Huruf Izhar Halqi Page 46

4.14 Potongan Ayat Izhar Halqi 47

4.15 Idgham Maal Ghunnah Main Page 48

4.16 Pengertian Idgham Maal Ghunnah Page 49

4.17 Huruf Idgham Maal Ghunnah Page 50

xvi

4.18 Potongan Ayat Idgham Maal Ghunnah Page 51

4.19 Idgham Bila Ghunnah Main Page 52

4.20 Pengertian Idgham Bila Ghunnah Main Page 53

4.21 Huruf Idgham Bila Ghunnah Main Page 54

4.22 Potongan Ayat Idgham Bila Ghunnah Main Page 55

4.23 Quiz Main Page 56

4.24 Quiz Level 1 Page 57


4.26 Total Mark Quiz Level 1 Page 59





1

CHAPTER I

INTRODUCTION

1.1 Background

In this era of globalization, technology has become a convenient and useful way for

communication and interaction between individual. Day by day, technology

becoming more and more advanced and in accordance with the time flies. Technology

has become a part of our life because nowadays, everything that we do are using

technology and it will help our life easier when used it. Neither young people nor old

2

people used technology in their daily life activity. As usual, everything that is

invented has their own pros and cons. So, people must use it in a proper way.

One of the technologies that have become a trend in society is a mobile application.

The mobile application is popular regardless their age and all of them carry it

wherever they go and it is the most convenient devices to access anything quickly

(Firdzarullah, 2017). That is why a mobile application is a very demand item from

people around the world. The mobile application is a very good way to motivate

people into learning something or use the application to help them through their daily

activities. Unfortunately, people tend to misuse this device into doing something

which is not useful to them such as gaming. Therefore, mobile application related to

education must be provided especially Islamic education.

Learning Tajweed Using Mobile Application (EzTajweed) is one of the methods that

can help children in range 7 to 12 years old and teacher in the learning session. When

we recite the Quran, there are rules of tajweed which must be obeyed. So, this mobile

application is a method that helps children to easily understand the law. This is

because, children are attracted to something that has multimedia elements such as

pictures, colours, audio, videos and so on. This application might contain some videos

about how to pronounce the ‘makhraj huruf’, the description of the law, example of

Quran verses, letters in the law and some quizzes that user can play after they learnt

about some topics in this application.

3

1.2 Problem Statement

Nowadays, the student learnt Tajweed at school and used a traditional method which

is by using a textbook. By doing this method, a student will feel bored and the process

of learning will not fully be received by the student. A student with range 9 to 12

years old always attracted to something that has multimedia elements such as colours,

audio, video. Based on the previous studies about the multimedia element, a highly

significant role of multimedia in early childhood education for increased their content

knowledge and understandings. The different types of multimedia are highly

significant to their academic performance. (Singh, S & Mishra, S, 2013). Thus, this

learning tajweed using mobile application (EzTajweed) was developed to provide

student learnt in a fun way and attractive way.

1.3 Objectives

This are objectives that have been identified in this project.

1. To design a courseware based application Learning Tajweed (EzTajweed) for

primary school student using Android.

2. To develop a courseware application Learning Tajwid (EzTajweed) for primary

school student in efficient way.

3. To test the functionality of Learning Tajwid (EzTajweed).

4

1.4 Project Scope

The scope will explain the actors that involve in this system and their functionality.

Learning Tajwid (EzTajweed) is an android based application that using mobile

application where a student can learn tajweed law in an attractive way.

1.4.1 User Scope

1. Student

Student can used it as a learning aids.

2. Parent

Can check their child’s score.

1.4.2 System Scope

1. Tajweed module

This application will show some of the tajweed law which is “Hukum Nun Mati”.

This also includes the description of each rule, the way to pronounce the law in

animation.

2. Activity module

This application will have some quiz at each subtopic.

5

1.5 Limitation of Work

This application has its own limitations of works as mention below :

1. This application only focus at certain topic which is “Hukum Nun Mati”.

2. This application used “Bahasa Malaysia” as a main language.

3. This application only can used in android based application.

1.6 Expected Result

1. Design an android application that will support learning Tajweed with

multimedia elements.

2. The application will be function.

6

1.7 Milestone

Activity

Month

(week)

September

October

November

December

1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4

Topic

Discussion and

Determination

Project Title

Proposal

Proposal

Writing -

Introduction

Proposal

Writing –

Literature

Review

Proposal

Progress

Presentation

and Evaluation

Discussion and

Correction

Proposal and

Proposed

Solution

Methodology

Proposed

Solution

Methodology

Proof of

Concept

Drafting Report

of the Proposal

Submit Draft of

Report to

Supervisor

Seminar

Presentation

Correction

Report

Final Report

Submission

7

CHAPTER II

LITERATURE REVIEW

2.1 Introduction

Basically, in this chapter, the study of techniques, methods and approach is done. The

related journal an article about the various technique and approach was analysed to

find out the best implementation technique that can be used in this Learning Tajweed

using mobile application (EzTajweed), the comparison between the different

techniques is done to get a better understanding for each technique effectiveness.

8

Then, the related application that has the same functionality as EzTajweed is a review

to help in understanding and gain knowledge about how to implement the application

in real.

2.2 Mobile Application Learning

Mobile application learning can be developed for many different purposes. They can

be an entertainment purpose, learning the purpose, and so on. The majority of mobile

learning can be having audiences or user that is a lack of skills. They may not interest

in taking part in traditional education and training. The excellent mobile application

is they can interact with audiences or user which is user-friendly.

Mobile technologies can support learning across different context as their portability

enables them to be used by a learner in whichever context she or he is. They can be

particularly beneficial in informal and semi-formal context where learners have more

control over their learning goals and where motivation is often high. (Ann, 2012)

2.3 Tajweed Law

Many Islamic Scholars have highlighted the meaning of Al Tajweed literally and

technically. The word Tajweed is derived from the Arabic root Jawwada, which means

to make well, to improve or to make good. It also means to enable, to make possible or

to bring forth what is better. As a technical term, Tajweed means to make good or to better

the recitation of the Glorious Qur’an by giving each letter it’s right with regards to the

9

correct way of pronunciation. (Nasallah, 2016) There are many rules need to be

understood by a reciter. The rules have their own names such as the rules of Idgham

Bilaghunnah, Idgham Maalghunnah, Ikhfak Hakiki and many more.

Al-Quran is a life guide for Muslims. It covers all aspects of life. Hence, it is an obligation

for Muslims to learn Quran because they need to understand the content of each surah

(chapter) and the verses that they read. In addition, in performing the daily solah, one

needs to read chapters or verses of the Quran and usually, these are read with tajwid. (N.H

Saari, C.Umat, K. Shukri, M.Teh, 2012)

2.4 Analysis Model

i. Conceptual e-Tajweed Learning Model (e-TLM) Based On Semantic and

Multimedia Elements.

Figure 2.1 : Sample of user interface menu option in e-TLM prototype

10

Tajweed is the knowledge and application of the rules of recitation so the

reading of the Holy Quran is as the Prophet Mohammed peace and blessings

are upon him, recited. This study proposed the new conceptual model for

teaching and learning Tajweed. The model in this study was designed

specifically for a user who wants to learn Tajweed. It also assists those who

do not have the chance to meet a teacher in their local area, by assisting them

to seek this sacred knowledge of Holy Quran and Tajweed. This study also

explains the laws of Tajweed and focuses on the problems that user have in

reciting and understanding in the Holy Quran properly. The primary goal of

the study is to develop an e-TLM which provides an interactive and intuitive

learning environment. The objective of this application is to investigate the

currents method used learning Tajweed in Malaysia. Second, to construct a

model for e-learning Tajweed that adapts semantic and multimedia elements

and the last one is to evaluate the proposed model. Therefore, this study tries

to solve the problem by developing an e-TLM using semantic and multimedia

elements. (Nor Hashidah Mohd Nasir, Fauziah Baharom, Harryizman Harun,

Haslina Mohd, Ali Yusny Daud, Norida Muhd Darus, Ahmad Ghadafi,

Azman Yasin, 2010)

ii. Tajwid4U Mobile Platform – Enabling People to Learn Tajwid at Their

Comfort Space and Time.

Learning to read Al-Quran has always been compulsory to all Muslims. But,

most of us do not know that reading Al-Quran with a proper tajwid and rules is

11

also mandatory because the meaning of each word in Al-Quran will differ

without proper pronunciation. It is also hard to learn it by ourselves without

proper guidance from knowledgeable people such as Ustaz/Ustazah and

Madrasah Tahfiz. However, people do not have time or money to go learn at the

Madrasah and pay the tuition fees or with the people who are qualified.

Not every people has time or money to go and learn tajwid at the Madrasah or

with Ustaz/Ustazah. Therefore, many people do not know how to read Al-Quran

with proper pronunciation and rules. It is a sin to read Al-Quran with a wrong

pronunciation because it can alter the meaning of the ayat. Therefore, it is

necessary to provide a platform where people can learn tajwid from the

Madrasah and the qualified people such as Ustaz/Ustazah to guide them

properly.

iii. M-Tajweed : A Mobile Courseware to Assist in Tajweed Learning.

Figure 2.2 : Mobile courseware of M-Tajweed

Tajweed is the rules to recite the Quran with proper pronunciation. “Face to

Face” is the current method in learning Quran which is now becoming less

12

effective and unattractive to be implemented especially towards young

Muslim generation. The rapid changes in technology are now shifting from

the traditional learning environment which is in the classroom to a modern

learning environment which is mobile learning. There are numbers of

application designed to meet users’ requirement when the awareness of IT

gadgets for mobile learning is increasing. Unfortunately, the development of

Islamic mobile application is still lacking in Malaysia and in other Muslim

countries. Currently, a student is facing problems in understanding the rule of

Tajweed due to their limited time with their teacher in the classroom.

Therefore, with the help of mobile learning courseware, it is hoped to help the

teachers and students in better understanding of the difficult subject of

Tajweed. This paper looks into the design and development of mobile learning

courseware that teaches the rules of Tajweed and correct pronunciation

according to the current Sijil Pelajaran Malaysia (SPM) syllabus, and to test

the usability of the system in terms of learnability, memorability, simplicity,

satisfaction and overall reaction to the mobile courseware. Therefore, this

study was conducted to overcome the problems faced by teachers and students

while learning the rules of Tajweed. An Interactive learning method is

proposed to teach the rules of Tajweed since this is an effective method to

deliver course content. (Riaza Mohd Rias, 2009)

13

iv. Secil Tajwid Mobile Application

Figure 2.3 : User Interface of Secil Tajwid.

Secil Tajwid is a courseware learning application for kids that will help them to

gain knowledge for reciting Al-Quran with a proper way. This app is a child

education app that helps children learn to read al-Quran correctly with the law of

the divine in a fun way. In this app children will learn how to read the correct Al-

Quran with tajwid law like idzhar, idgham, iqlab, ikhfa and many more. The

concept of learning in this app is designed interactively with an interesting game

and interesting sound so the kids are not bored when playing.

14

2.5 Comparison between Journal and Mobile Application

Table 2.1 Comparison between Journal and Mobile Application

Author’s

Name

Title Description Method Strength

Nor Hashidah

Mohd Nasir,

Fauziah

Baharom,

Harryizman

Harun, Haslina

Mohd, Ali

Yusny Daud,

Norida Muhd

Darus, Ahmad

Ghadafi,

Azman Yasin

Conceptual e-

Tajweed

Learning Model

(e-TLM) Based

On Semantic

and Multimedia

Elements.

This study

proposed the new

conceptual model

for teaching and

learning Tajweed.

The primary goal

of the study is to

develop an e-TLM

which provides

interactive and

intuitive learning

environment.

e-learning

method

Used semantic

and have

multimedia

elements.

Firdzarullah

Aminuddin,

Muhammad

Ghufran bin

Musa, Abdul

Tajwid4U

Mobile Platform

– Enabling

People to Learn

Tajwid at Their

This study

proposed some of

the application that

are in Play Store

that is free to use

and the application

Mobile

Platform

Easy to use it.

Have audio to

listen how to

read the Quran

with proper

15

Rahman

Ahmad Dahlan

Comfort Space

and Time.

contain Tajweed

law. User can

install the app and

it is very easy to

use.

pronunciation

and rules.

Noor Aziezah

Sardan, Riaza

Mohd Rias

M-Tajweed :

A Mobile

Courseware to

Assist in

Tajweed

Learning.

This study was

conducted to

overcome the

problems faced by

teachers and

students while

learning the rules

of Tajweed. An

Interactive learning

method is proposed

to teach the rules of

Tajweed since this

is an effective

method to deliver

course content

Interactive

Learning

method

Used mind

map as a

teaching

approach.

Solite Kids Secil Tajwid

Mobile

Application

This app is a child

education app that

helps children learn

to read al-Quran

correctly with the

Interactive

Learning

method

Easy to use it.

Have

multimedia

elements that

can attract the

16

law of the divine in

a fun way. In this

app children will

learn how to read

the correct Al-

Quran with tajwid

law like idzhar,

idgham, iqlab,

ikhfa and many

more. The concept

of learning in this

app is designed

interactively with

interesting game

and interesting

sound so the kids

are not bored when

playing.

kid to learn

about Tajweed.

17

2.6 Conclusion

This chapter discusses the collected literature review that had been reviewed

during the feasibilities studies. The literature review helps the developer to

discover the problem of previous research which needs to improve and

overcome the problem. The main method that is suitable to use in the

development of the mobile app is an interactive learning method.

18

CHAPTER III

RESEARCH METHODOLOGY

3.1 Introduction

Basically, this chapter explains the detail of methodology that being used in the

development of Learning Tajweed Using Mobile Application (EzTajweed). The

project methodology is important in every project because it helps to organize

investigation in a scientific way to overcome problems, to discover new facts or truth

about the subject in order to achieve the objectives of the project. In order to have a

19

good project, it should begin with a good understanding of the user’s needs. There are

many approaches that can be used in the development of a mobile application project.

ADDIE Model is one of the approaches that will be used in this project.

3.2 Methodology Model

Instruction System Design (ISD) that is used to develop this “Learning Tajweed Using

Mobile Application (EzTajweed)” application is ADDIE model. Basically, ADDIE

model have five phases which are Analysis, Design, Development, Implementation

and Evaluation. 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. These phases sometimes overlap and can be

interrelated. However, they provide a dynamic, flexible guideline for developing

effective and efficient instruction.

20

Figure 3.1: ADDIE Model

3.2.1 Analysis Phase

The analysis is the first phase that is contained in the ADDIE model. The analysis

is the study we do in order to figure out what to do. (Sheldon, 2001) At this stage,

we need to identify the need to develop this EzTajweed mobile application. Then,

the activities are involved in this phase is identifying the problem statement, the

objectives or goals of the project and the scope key actions that are included in the

application. In this EzTajweed are focusing on basic Tajweed which consists of

“Hukum Nun Mati” only. The analysis is also carried out by doing a comparison

between existing products that are using mobile application technology in learning

Tajweed. Through the analysis, the weaknesses of the existing application that are

relatable to this Tajweed learning can be identified. All information gathered were

used to develop goals and objective of developing mobile EzTajweed application.

21

3.2.2 Design Phase

During the design phase, the information gathered during the analysis phase is

reviewed and compiled to build the project. In the design stage, it is necessary to

create a storyboard or interface of the mobile application. This means that it is

necessary to have all the accurate guideline to ease the step in this development

process. This phase requires a logical and creative thinking skills. All the characters

also have been created in this phase. These characters will be used from the start

until the end of the mobile EzTajweed application.

3.2.3 Development Phase

This is the third phase of the ADDIE model. With all the information gathered at

the analysis and design phase, then this mobile EzTajweed are developed. Most of

the development process was done in Adobe Flash CS6. All the materials that are

involved in the design phase will be integrated and customize in this phase

according to the storyboard. In this development phase also, it uses any approach

or design that has been agreed upon in the design stage. For example, users are

provided with help button to prevent users from having trouble using software and

have various graphics, sound effects and so on are provided so users do not get

bored in the process of playing this game app.

22

3.2.4 Implementation Phase

The ready-to-formed EzTajweed mobile application should be presented to test the

effectiveness and to see unnoticed problems during the design and development

phase that may exist. This implementation phase is implemented by presenting to

providers and partners to meet the criteria set out in the analysis phase. From the

observations performed, the repair or recovery process will be implemented before

the application is actually issued or used officially.

3.2.5 Evaluation Phase

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

strategies, graphics, audio, interfaces and so forth that are available in this app by

either supervision, testing, questionnaire, interviews and so on to ensure it is

appropriate or not to use.

3.3 Hardware and Software Requirements.

3.3.1 Hardware

Laptop

Laptop Asus with 10GB memory, 64-bits operating system was used in

developing this EzTajweed application.

Laptop also used to create the sketches for the characters, background and create

scripts or document related.

Printer

Used to print all the hard copy of the system.

23

Pen drive and external hard disc

Used to back up all the data, report and design of the project.

3.3.2 Software

Adobe Flash CS6 and Action Script 3.0

Used to create the mobile application and overall project.

Adobe Photoshop

Used to create sketches of background, characters and character design.

Adobe InDesign CS6

Used to design storyboard.

Xampp

Used to store some data in quiz module.

24

3.4 Application Design

3.4.1 Navigation Maps

Figure 3.2 : Navigation map of the Learning Tajweed Application

(EzTajweed)

25

3.4.2 Storyboard

Storyboard is one of the things that developer might do before creating a

mobile application. Storyboard is important as a guideline to the developer for

developing an interactive mobile application “Learning Tajweed Using

Mobile Application (EzTajweed).

In figure 1, the homepage interface contains three activities which are

modules, quiz and video. When the user clicks the module activity, there are

some ‘Hukum Tajweed’ that user can choose to learn. In the module, the user

can learn Tajweed in an easy and attractive way. The user can hear audio about

how to pronounce the ‘huruf’ with the verses of the Quran, the description

about the ‘Hukum Tajweed’ and there is a video about the ‘Makhraj Huruf’.

The next activity is a quiz module. The quiz module contains three levels of

quizzes. The user needs to pass a level one quiz to pursue to the next level.

The user can see their score after answer the quiz.

26

27

28

3.4.3 Design Interface

The interface design of the Learning Tajweed Using Mobile Application

(EzTajweed) is using a design that suits the scope of the project which is for

primary school kids. The design of the mobile application contains

multimedia elements such as texts, audio, video, a colour which suitable for

range 7 to 12 years old kids.

For the homepage interface as in figure 3, there is a button help to guide the

user using the application. In the module ‘hukum’ as in figure 5, there is a

button ‘huruf’, ‘pengertian’, and ‘potongan ayat’. When the user click the

button ‘huruf’, there is the ‘huruf’ of the tajweed law and at the bottom right

corner, there is a button play. When the user clicks the button play, the

screen will pop out a 2-Dimensional animation about how the ‘makhraj

huruf’ will be pronounced correctly.

Next, when the user clicks the ‘potongan ayat’ button there will be the

‘potongan ayat’ of the Quran and user can click the button play, pause and

stop at the bottom of the interface. The user can hear the audio of how to

recite the ‘ayat’.

Lastly, at the quiz module, there are three levels of a quiz. Level one is quite

easy which contain a true-false question, level two is an intermediate level

which user will choose the correct answer and lastly, level three user must fill

in the empty space based on the tajweed law. When the user answers the

29

question, there is audio that will generate depends on the answer whether right

or wrong.

3.4.4 Entity Relationship Diagram

An entity relationship diagram (ERD) is a specialized graphics from that

illustrates the relationships between entities and database. ERD is crucial to

creating a good database design. There are three basic elements in ERD which

are:

Entities are the “things” for which we want to store information. An

entity basically a person, place, thing or event.

Attributes are the data we want to collect for an entity.

Relationships describe the relations between the entities.

Figure 3.12 shows the entity-relationship between user, question, level and

score. The user has a one-to-many relationship with question and score entity.

The question has one-to-one relationship with the level entity.

30

Figure 3.12: Entity Relationship Diagram about Learning Tajweed Application

EzTajweed)

31

3.5 Conclusion

This chapter describes about the methodology that has been used, explain the

hardware and software requirement that is guide to successful of this project.

32

CHAPTER IV

IMPLEMENTATION

4.1 Introduction

This chapter narrates the implementation of Learning Tajweed with Mobile

Application (EzTajweed) design and modeling that has been done previously. All the

process involved in implementation includes in getting the system to operate properly

with detail interfaces. Each interface of the project described in details and

demonstrated to guide users on how to use the system as it is in the user manual. A

33

complete user interface for respective system users are screen-capped and captioned

accordingly.

4.2 Interface Design

User interface design (UI) or user interface engineering is the design of user

interfaces for machines and software, such as computers, home appliances, mobile

devices and other electronic devices with the focus on maximizing the user

experiences. Good user interface design facilitates finishing the task at hand without

drawing unnecessary attention to itself. For most product designers it’s the series of

screens, pages, and visual elements that the user sees like buttons and icons that you

use to interact with a device or product. The goal of the UI should be to make the

interaction as simple and efficient as possible to make it easy for the user to

accomplish their goals and solve their problems.

34

4.2.1 Interface: Main Page

Figure 4.1: Main Page

The figure above shows the main page of EzTajweed. There are many buttons

on this main page to navigate thoroughly the application. In this main page, the

setting, information, “belajar”, “kuiz”, video button to navigate the entire

application. When users click the button, it will navigate to the next page. The

“belajar” button is where the user can learn about “Hukum Nun Mati”. Next,

the “kuiz” button where the user can answer some quiz that is relatable through

the content of the application. Lastly, the video button where the user can learn

about the “makhraj huruf” through the video.

35

4.2.2 Interface: Content Page

Figure 4.2: Content Page

The figure above shows the content page of the EzTajweed application.

In EzTajweed, there is only one title that will be studied which is “Hukum

Nun Mati”. In “Hukum Nun Mati” there are 5 main elements which is

“iqlab”, “izhar halqi”, “ikhfa’ haqiqi”, “idgham maal ghunaah” and

“idgham bila ghunnah”. There also have home button where user can

click to go to the main page.

36

4.2.3 Interface: Ikhfa’ Haqiqi Main Page

Figure 4.3: Ikhfa’ Haqiqi Main Page

The figure above shows the “ikhfa’ haqiqi” page of EzTajweed

application. In this page, there are “pengertian” button, “huruf” button

and “potongan ayat” button. When the user clicks the button, the next

page will pop up. There also has a button back and home button for the

user to navigate.

37

4.2.4 Interface: Pengertian Ikhfa’ Haqiqi Page

Figure 4.4: Pengertian Ikhfa’ Haqiqi Page

The figure above shows the “pengertian ikhfa’ haqiqi” page of

EzTajweed application. In this page, it will explain about what is “ikhfa’

haqiqi”. There is a button sound which is the user can hear the

explanation about the law. User can play and stop the sound if they want

to. There also a button back and home button to navigate the application.

The explanation about the law used two combination colors to help the

kids easy to read the text.

38

4.2.5 Interface: Huruf Ikhfa’ Haqiqi Page

Figure 4.5: Huruf Ikhfa’ Haqiqi Page

The figure above shows the “huruf ikhfa’ haqiqi” page of EzTajweed. In

this page, user can play the sound of the “huruf” that has been listed. The

user also can click back button and home button to navigate the

application.

39

4.2.6 Interface: Potongan Ayat Ikhfa’ Haqiqi Page

Figure 4.6: Potongan Ayat Ikhfa’ Haqiqi Page

The figure above shows the “potongan ayat” of “ikhfa’ haqiqi” laws.

There are three “potongan ayat” that has been listed and the user can hear

the way it pronounces. The user also can play and stop the audio if she

or he wants to. This page also contains a back and home button.

40

4.2.7 Interface: Iqlab Main Page

Figure 4.7: Iqlab Main Page

The figure above shows the “iqlab” page of EzTajweed application. In

this page, there are “pengertian” button, “huruf” button and “potongan

ayat” button. When the user clicks the button, the next page will pop up.

There also has a button back and home button for the user to navigate.

41

4.2.8 Interface: Pengertian Iqlab Page

Figure 4.8: Pengertian Iqlab Page

The figure above shows the “iqlab” page of EzTajweed application. In

this page, it will explain about what is “iqlab”. There is a button sound

which is the user can hear the explanation about the law. User can play

and stop the sound if they want to. There also a button back and home

button to navigate the application. The explanation about the law used

two combination colors to help the kids easy to read the text.

42

4.2.9 Interface: Huruf Iqlab Page

Figure 4.9: Huruf Iqlab Page

The figure above shows the “huruf iqlab” page of EzTajweed. In this

page, user can play the sound of the “huruf” that has been listed. The user

also can click back button and home button to navigate the application.

43

4.2.10 Interface: Potongan Ayat Iqlab Page

Figure 4.10: Potongan Ayat Iqlab Page

The figure above shows the “potongan ayat” of “iqlab” laws. There are

three “potongan ayat” that has been listed and the user can hear the way

it pronounces. The user also can play and stop the audio if she or he wants

to. This page also contains a back and home button.

44

4.2.11 Interface: Izhar Halqi Page

Figure 4.11: Izhar Halqi Page

The figure above shows the “izhar halqi” page of EzTajweed application.

In this page, there are “pengertian” button, “huruf” button and “potongan

ayat” button. When the user clicks the button, the next page will pop up.

There also has a button back and home button for the user to navigate.

45

4.2.12 Interface: Pengertian Izhar Halqi Page

Figure 4.12: Pengertian Izhar Halqi Page

The figure above shows the “izhar halqi” page of EzTajweed application.

In this page, it will explain about what is “izhar halqi”. There is a button

sound which is the user can hear the explanation about the law. User can

play and stop the sound if they want to. There also a button back and

home button to navigate the application. The explanation about the law

used two combination colors to help the kids easy to read the text.

46

4.2.13 Interface: Huruf Izhar Halqi Page

Figure 4.13: Huruf Izhar Halqi Page

The figure above shows the “huruf izhar halqi” page of EzTajweed. In

this page, user can play the sound of the “huruf” that has been listed. The

user also can click back button and home button to navigate the

application.

47

4.2.14 Interface: Potongan Ayat Izhar Halqi Page

Figure 4.14: Potongan Ayat Izhar Halqi Page

The figure above shows the “potongan ayat” of “izhar halqi” laws. There

are three “potongan ayat” that has been listed and the user can hear the

way it pronounces. The user also can play and stop the audio if she or he

wants to. This page also contains a back and home button.

48

4.2.15 Interface: Idgham Maal Ghunnah Page

Figure 4.15: Idgham Maal Ghunnah Page

The figure above shows the “idgham maal ghunnah” page of EzTajweed




user to navigate.

49

4.2.16 Interface: Pengertian Idgham Maal Ghunnah Page

Figure 4.16: Pengertian Idgham Maal Ghunnah Page

The figure above shows the “idgham maal ghunnah” page of EzTajweed

application. In this page, it will explain about what is “idgham maal

ghunnah”. There is a button sound which is the user can hear the





50

4.2.17 Interface: Huruf Idgham Maal Ghunnah Page

Figure 4.17: Huruf Idgham Maal Ghunaah Page

The figure above shows the “huruf idgham maal ghunnah” page of

EzTajweed. In this page, user can play the sound of the “huruf” that has

been listed. The user also can click back button and home button to

navigate the application.

51

4.2.18 Interface: Potongan Ayat Idgham Maal Ghunnah Page

Figure 4.18: Potongan Ayat Idgham Maal Ghunnah Page

The figure above shows the “potongan ayat” of “idgham maal ghunnah”

laws. There are three “potongan ayat” that has been listed and the user

can hear the way it pronounces. The user also can play and stop the audio

if she or he wants to. This page also contains a back and home button.

52

4.2.19 Interface: Idgham Bila Ghunnah Page

Figure 4.19: Idgham Bila Ghunnah Page

The figure above shows the “idgham bila ghunnah” page of EzTajweed




user to navigate.

53

4.2.20 Interface: Pengertian Idgham Bila Ghunnah Page

Figure 4.20: Pengertian Idgham Bila Ghunnah Page

The figure above shows the “idgham bila ghunnah” page of EzTajweed

application. In this page, it will explain about what is “idgham bila

ghunnah”. There is a button sound which is the user can hear the





54

4.2.21 Interface: Huruf Idgham Bila Ghunnah Page

Figure 4.21: Huruf Idgham Bila Ghunnah Page

The figure above shows the “huruf idgham bila ghunnah” page of

EzTajweed. In this page, user can play the sound of the “huruf” that has

been listed. The user also can click back button and home button to

navigate the application.

55

4.2.22 Interface: Potongan Ayat Idgham Bila Ghunnah Page

Figure 4.22: Potongan Ayat Idgham BilaGhunnah Page

The figure above shows the “potongan ayat” of “idgham bila ghunnah”

laws. There are three “potongan ayat” that has been listed and the user

can hear the way it pronounces. The user also can play and stop the audio

if she or he wants to. This page also contains a back and home button.

56

4.2.23 Interface: Quiz Main Page

Figure 4.23: Quiz Main Page

The figure above shows the main page of the activity which is quiz.

This page has three level of quiz which contain a different games each

level. There are three button that user can click which is button level

1, level 2 and level 3. If user click the button, they will navigate to the

next page.

57

4.2.24 Interface: Quiz Level 1 Page

Figure 4.24: Quiz Level 1 Page

The figure above shows the quiz level 1 page. Quiz level 1 page consists

of 10 questions that contain multiple choice questions and true or false

questions. The users must click the button to answer the questions. If

the users click the right answer, there is a sound that shows the answer

is correct and vice versa. If the users answer it correctly, the mark will

add up 10 marks each question.

58



The figure above shows the quiz level 1 page of true or false questions.

There are only 5 questions that contain true or false questions. Users need

to click the button to answer the question. If the user clicks the correct

answer, there is a sound that shows the answer is correct and if the click

the wrong answer, there is a sound that shows the answer is wrong. The

mark will add 10 marks if the users answer the questions correctly.

59

4.4.26 Interface: Total Mark Quiz Level 1 Page

Figure 4.26: Total Mark Quiz Level 1Page

The figure above shows the total mark page of quiz level 1. If the users

had answered all the 10 questions, the total mark will appear on the last

page. The highest mark also can be saved at this page.

60



The figure above shows the quiz level 2 page of EzTajweed application.

There are 10 questions users need to answer to complete the quiz level 2.

This quiz contains drag and drop quiz. Users need to drag the answer and

drop it to the box available. If the user answers it correctly, the mark will

add 10 marks. If the users answer it correctly, there is a sound that shows

the user answer correct and vice versa.

61


Figure 4.28: Total Mark Quiz Level 2 Page



page. The highest mark also can be save at this page.

62



The figure above shows the quiz level 3 page of EzTajweed application.

There are 10 questions users need to answer to complete the quiz level 3.

This quiz contains to choose the correct answer based on the audio

player. Users need to click the correct answer. If the user answers it

correctly, the mark will add 10 marks. If the users answer it correctly,

there is a sound that shows the user answer correct and vice versa.

63


Figure 4.30: Total Mark Quiz Level 3 Page



page. The highest mark also can be save at this page.

64

4.3 Testing

Testing is a technique and method that are used in order to validate the system

developed. White box and black box testing were used in order to get the respective

input and output for each process. Hence, test cases are needed. A test case is a set

of conditions under which a tester will determine whether an application or one of its

feature is working as it was originally established for it to do. A test case consists of

components which describe the input, action or event and expected outcome

responses. Test cases will be divided into two categories which are successful and

unsuccessful.

4.4 White Box Testing

White box testing is a method of testing software that tests internal structures or

workings of an application, as opposed to its functionality. This testing technique

focuses on strength and security, the flow of inputs and outputs throughout the

system, and improving design and usability.

4.5 Black Box Testing

Black box testing is a method of software testing that examines the functionality of

an application without peering into its internal structures. This type of testing is based

entirely on the software requirement and specification. Its only focus on input and

65

output of the software system without bothering about internal knowledge of

software program.

4.6 Test Case

A set of conditions or variables under which a tester will determine if a requirement

upon an application is partially or fully satisfied will be done in the test case. It also can

be defined as a sequence of steps to test the correct behaviour of the functionality of an

application. There is a list of procedures, expected result and result.

4.6.1 Test Executed On Application

Table 4.1: Test Case for Enter Application

Test Case for Enter The Application

Step Procedure Expected Result Result

1 Enter the main page Page loaded Success

66

Table 4.2: Test Case for Enter “Belajar” Tajweed

Test Case for Enter “Belajar” Tajweed


1 Click button “belajar” Page loaded.

There are 5 main topic

of tajweed

Success

2 Click button “Iqlab” There are 3 buttons

which is “belajar”,

”huruf” and

“potongan ayat”.

Success

3 Click button “pengertian” There is definition of

iqlab. User can click

button sound to play

the audio

Success

4 Click button “huruf” There is “huruf” of

Iqlab. User can click

button play to hear the

sound.

Success

5 Click button “potongan ayat” There is “potongan

ayat” of Iqlab. User

can click button play

to hear the way to

pronounce the “ayat”.

Success

67

Table 4.3: Test Case for Enter Quiz

Test Case for Enter Quiz


1 Click button quiz Page loaded. There is

3 levels of quiz which

is level 1, level 2 and

level 3.

Success

68

Table 4.4: Test Case for Enter Quiz Level 1

Test Case for Enter Quiz Level 1


1 Click button level 1 Page loaded. There is

10 questions user need

to be answered.

Success

2 User click the answer There is a sound that

shows that the answer

is correct or wrong. If

they answer it

correctly, the mark

will add 10 marks.

Success

3 Total mark page There is the total mark

of the user and the

highest score that has

been saved.

Success

69






to be answered.

Success

2 User drag the answer into the box There is a sound that



they answer it

correctly, the mark

will add 10 marks.

Success


of the user and the


been saved.

Success

70






to be answered.

Success

2 User need to click the sound

button to answer the question.

There is a sound that



they answer it

correctly, the mark

will add 10 marks.

Success


of the user and the


been saved.

Success

71

CHAPTER V

CONCLUSION

5.1 Introduction

This chapter will discussed on the achievement and conclusion in develop the

Learning Tajweed Using Mobile Application (EzTajweed). The limitation faced

throughout the system will be discuss in detail in project constraints. This chapter

also aimed to summarize the whole project. It will also discussed the direction of

research in the future.

72

5.2 Project Achievement and Contribution

Learning Tajweed Using Mobile Application (EzTajweed) is an application

developed for primary school student to learn tajweed in fun way. The major

contributions can be concluded as below:

Firstly, student be able to learn tajweed in a fun way anywhere and every time

they want. Unlike the manual learning at school, this application have many

source of attraction to them to explore.

Moreover, student will be able to answer the quiz after they have read the

content. There are three level of quiz that students can answer. All the quiz

have their own marks and the marks will be given at the end of each level.

Next, the application also saved the highest mark of each level.

5.3 Project Constraint

In this process of developing the proposal and preparation of fully functioning

application there is a few limitation of work that caused constraints and difficulties to

developer. Those limitation of works as follow:

During implementation, there is some problem which is the Adobe Flash

cannot read the “jawi” text. So, the developer need to import from Adobe

Photoshop then convert it into PNG.

73

5.4 Future Work

In the future, this application need to be improved with the several additional

functions as mentioned below:

This application may contain an animation of how the “makhraj huruf” will

be pronounced.

Moreover, the application should provide more sound to make it fun and

attractive.

Lastly, when the sound is play, the text need to be colour parallel to the sound

played.

5.5 Conclusion

Learning Tajweed Using Mobile Application (EzTajweed) are very useful

application in helping students to learn about tajweed. The application also make the

students easy to understand the tajweed more deeply. Moreover, added the

multimedia content will attract the students to learn about tajweed in fun way.

Hopefully this application can contribute to teachers and society in learning

courseware.

74

REFERENCES

Ann, C. J. (2012). Mobile learning: Two case studies of supporting inquiry learning in informal

and semiformal setting. . Computers & Education, 61,21-23.

Firdzarullah, M. G. (2017). Tajwid4U mobile platform – Enabling people to learn Tajwid at their

comfort space and time . International Journal for Social Studies, 77.

N.H Saari, C.Umat, K. Shukri, M.Teh. (2012). Augmented Reality to Memorize Al-Quran for

Hearing Impared Students : A Preliminary Analysis. Factors Affecting the Learning of

the Holy Quran anomg Severely and Profoundly Hearing-Impared Children with a

Cocolear Implant., 85-92.

Nasallah, M. K. (2016). The Importance Of Tajweed In The Recitation Of The Glorious Qur’an:

Emphasizing Its Uniqueness As A Channel Of Communication Between Creator And

Creations. . IOSR Journal Of Humanities And Social Science, 55.

75

Nor Hashidah Mohd Nasir, Fauziah Baharom, Harryizman Harun, Haslina Mohd, Ali Yusny

Daud, Norida Muhd Darus, Ahmad Ghadafi, Azman Yasin. (2010). Conceptual e-

Tajweed learning model (e-TLM) based on semantic and multimedia elements.

Riaza Mohd Rias, H. B. (2009). Using 3-D Animation in Multimedia Learning for Memory

Management Concepts. Proceedings of the International Conference on Signal

Processing Systems, 748-753.

Sheldon, A. R. (2001). Analysis in Instructional Design.

Singh, S & Mishra, S. (2013). A study about role of multimedia in early childhood education.

International Journal of Humanities and Social Science Invention, 80-85.

Documents

KHAIRUL KHAIRINA BINTI MUSTAFA · 2019. 5. 9. · Basically, ADDIE model have five phases which are Analysis, Design, Development, Implementation and Evaluation. The ADDIE model is