CSF 35204: FINAL YEAR PROJECT 2 REPORT TITLE: I-SURAU AR … · 2020. 7. 18. · Besut including...

CSF 35204: FINAL YEAR PROJECT 2 REPORT

TITLE:

I-SURAU AR-RAUDHAH NOTIFICATION SYSTEM

MUHAMMAD IKMAL BIN ABDULLAH

BACHELOR OF COMPUTER SCIENCE

(SOFTWARE DEVELOPMENT) WITH HONOURS

FACULTY OF INFORMATICS AND COMPUTING

UNIVERSITI SULTAN ZAINAL ABIDIN

2019/2020

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 Universiti Sultan

Zainal Abidin or other institutions

________________________________

Name : ..................................................

Date : ..................................................

ii

ENDORSEMENT

This is to confirm that:

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

________________________________

Name : ..................................................

Date : ..................................................

iii

DEDICATION

First and all, I express my gratitude to Allah SWT for the health and strength

that He gave to His servant to complete this final year project, I-Surau Ar-Raudhah

Notification System. Peace and blessings be upon to the Prophet Muhammad SAW.

This study is wholeheartedly dedicated to my beloved parents, who have been

my source of inspiration and strength when we thought of giving up, who continually

provide their moral, spiritual, emotional, and financial support.

To my supervisor, Dr. Mumtazimah Binti Mohamad for his advices, guidance’s

and support toward this project. Also, thanks to all the panels and lecturers for their

attention and opinions on my project.

And lastly to my friends who shared their words of advice and encouragement

to finish this project.

iv

ABSTRACT

In the today’s advancing world of technology, Mobile Applications are rapidly

growing segment of global mobile market. Mobile applications are developing at a

meteor space to give user a rich and fast user experience.

Over the years, notification on notice board has been carried to notify on

information with respect to the medium for the people to know the latest news.

Currently all the program or activities notification announce manually using social

media. Due to this problem, all JaPSAR’s members must participate to notify the

notification to students using WhatsApp in all group’s chats. So, to solve the problem

I-Surau Ar-Raudhah Notification System has been introduced. This system will notify

students about activities and program that will be held by JaPSAR for Surau Ar-

Raudhah by push the notification in web-based system.

In the nutshell, I-Surau Ar-Raudhah Notification System must function with full

functionality and meet the specified user’s requirement.

v

CONTENTS

DECLARATION I

ENDORSEMENT II

DEDICATION III

ABSTRACT IV

CONTENTS V

LIST OF FIGURES IX

LIST OF TABLES XII

LIST OF ABBREVIATIONS XIV

LIST OF APPENDICES XV

CHAPTER 1 1

1.1 Background 1

1.2 Problem Statement 2

1.3 Objectives 3

1.4 Scope 3

1.4.1 Admin 3

1.4.2 User 4

1.4.3 System 4

1.5 Limitation of Works 5

1.6 Expected Result 5

CHAPTER 2 6

2.1 Introduction 6

2.2 JavaScript Object Notation (JSON) 6

vi

2.3 Procedure of invoking a JSON-based Web Service 8

2.4 Extensible Mark-up Language (XML) 9

2.5 Comparison between JSON and XML 10

2.6 PHP (Hypertext Pre-processor) 12

2.7 Existing System 14

2.8 Comparison of SDLC Methodologies 16

2.9 Proposed Idea 18

CHAPTER 3 19

3.1 Introduction 19

3.2 Agile Model 20

3.2.1 Basic Stages of Agile Model 22

3.2.2 Advantages and Disadvantages of Agile Model 24

3.3 System Requirements 25

3.4 Framework and Design 27

3.4.1 Use Case Diagram 27

3.4.2 Data Flow Diagram Admin Level 0 Process 29

3.4.3 Data Flow Diagram User Level 0 process 30

3.4.4 Data Flow Diagram Level 1 Process for Admin 31

3.4.5 Data Flow Diagram Level 1 Process for User 32

3.4.4 Entity Relationship Diagram 34

3.4.5 Framework Design 36

3.4.6 Algorithms (Firebase Cloud Messaging (FCM)) 37

3.5 Implementation Phase 43

3.6 Testing Phase 43

3.7 Summary 43

CHAPTER 4 44

IMPLEMENTATION AND RESULT 44

4.1 Introduction 44

4.2 Implementation of I-Surau Ar-Raudhah Notification System 44

4.3 Design Interface for Web-Based System 45

vii

4.3.1 Login Form Interface 45

4.3.2 Main Interface / Dashboard 46

4.3.3 Form Add Activities Interface 47

4.3.4 Form Edit Activities Interface 48

4.3.5 List of Table Notification Interface 50

4.3.6 Form Add / Send Notification Interface 51

4.3.7 Form Edit / Resend Notification 52

4.3.8 Table List of Hadith Interface 54

4.3.9 Form Add Hadith and Form Edit Hadith Interface 55

4.3.10 Manage User Interface 57

4.4 Design Interface for Mobile Application 58

4.4.1 Login Interface 58

4.4.2 Sign Up Interface 60

4.4.3 Home Page Interface 61

4.4.4 Notification List Page Interface 63

4.4.5 Gallery Activity Page Interface 64

4.4.6 List of Hadith Page Interface 65

4.4.7 User Profile Interface 67

4.4.8 Form Edit User Profile Interface 68

4.4.9 The Notification Interface 70

4.5 Testing Analysis 71

4.6 Test Case 71

4.6.1 Login 71

4.6.2 Add Activities 72

4.6.3 Edit Activities 73

4.6.4 Delete Activities 74

4.6.5 Send Notification 75

4.6.6 Edit Notification 76

4.6.7 Delete Notification 77

4.6.8 Add Hadith 78

4.6.9 Edit Hadith 79

4.6.10 Delete Hadith 80

4.6.11 Manage User 81

4.6.12 Login 82

4.6.13 Register 83

4.6.14 View Notification 84

4.6.15 View Hadith 85

4.6.16 View User Profile 86

4.6.17 Edit User Profile 86

4.6.18 Log Out 87

4.7 Summary 88

CHAPTER 5 89

viii

5.1 Introduction 89

5.2 Project Contribution 89

5.3 Limitation 90

5.4 Recommendation 90

REFERENCES 91

ix

LIST OF FIGURES

CHAPTER 2

Figure 2. 1: A simple JSON document ..................................................................... 7

Figure 2. 2: Step for Invoking JSON-based Web Service .......................................... 8

Figure 2. 3: Example of php code............................................................................13

Figure 2. 4: Interface of OneSignal app ...................................................................14

Figure 2. 5: Interface of NotifyMe app ....................................................................15

CHAPTER 3

Figure 3. 1: Type of SDLC Model...........................................................................20

Figure 3. 2: Agile Model ........................................................................................21

Figure 3. 3: Graphical Illustration of the Agile Model ..............................................22

Figure 3. 4: Use Case Diagram ...............................................................................28

Figure 3. 5: Data Flow Diagram Admin Level 0 Process..........................................29

Figure 3. 6: Data Flow Diagram for User Level 0 process ........................................30

Figure 3. 7: Data Flow Diagram Level 1 process for admin......................................31

Figure 3. 8: Data Flow Diagram Level 1 Process for User........................................33

Figure 3. 9: Entity Relationship Diagram for User ...................................................34

Figure 3. 10: Entity Relationship Diagram for Admin ..............................................35

Figure 3. 11: Framework Design .............................................................................36

Figure 3. 12: Method for display regid and retrieve from firebase.............................37

Figure 3. 13: PHP file that contain declaration of firebase API key...........................38

Figure 3. 14: PHP code for retrieve input from admin ..............................................39

Figure 3. 15: Push Method ......................................................................................41

x

Figure 3. 16: Method to push notification into mobile app .......................................42

CHAPTER 4

Figure 4. 1: Sketch login interface...........................................................................45

Figure 4. 2: Login Interface for Admin....................................................................46

Figure 4. 3: Sketch Layout for dashboard / Main Interface .......................................47

Figure 4. 4: Main Interface of I-Surau Ar-Raudhah Notification System...................47

Figure 4. 5: Sketch Layout for Add Activities..........................................................48

Figure 4. 6: Add Activities Interface .......................................................................48

Figure 4. 7: Sketch Layout form Edit Activities .......................................................49

Figure 4. 8: Form Edit Activities .............................................................................49

Figure 4. 9: Sketch layout for table list of notification..............................................50

Figure 4. 10: List of Table Notification Interface .....................................................51

Figure 4. 11: Sketch of interface for add new notification ........................................52

Figure 4. 12: Form Send Notification ......................................................................52

Figure 4. 13: Sketch of Edit Notification interface ...................................................53

Figure 4. 14: Form Edit / Resend Notification .........................................................53

Figure 4. 15: Sketch interface for list of hadith ........................................................54

Figure 4. 16: Table List of Hadith Interface .............................................................55

Figure 4. 17: Sketch interface for form adding hadith ..............................................55

Figure 4. 18: Form Add Hadith Interface.................................................................56

Figure 4. 19: Sketch interface for Form update hadith ..............................................56

Figure 4. 20: Form Edit Hadith Interface .................................................................57

Figure 4. 21: Sketch interface for manage user ........................................................58

Figure 4. 22: Manage User Interface .......................................................................58

Figure 4. 23: Sketch layout for login interface .........................................................59

Figure 4. 24: Login Interface for I-Surau Mobile Application...................................59

Figure 4. 25: Sketch Layout for register interface ....................................................60

Figure 4. 26: Sign-Up Interface for I-Surau Mobile Application ...............................61

Figure 4. 27: Sketch for main interface....................................................................62

Figure 4. 28: Home Page Interface ..........................................................................62

Figure 4. 29: Sketch of List notification interface ....................................................63

Figure 4. 30: Notification List Page Interface ..........................................................63

xi

Figure 4. 31: Sketch for gallery notification interface...............................................64

Figure 4. 32: Gallery Activity Page Interface...........................................................64

Figure 4. 33: Gallery Activity Page Interface...........................................................65

Figure 4. 34: Sketch for list of hadith interface ........................................................66

Figure 4. 35: List of Hadith Page Interface ..............................................................66

Figure 4. 36: Sketch of User profile interface ..........................................................67

Figure 4. 37: User Profile Interface .........................................................................68

Figure 4. 38: Sketch for edit profile interface...........................................................69

Figure 4. 39: Form Edit User Profile Interface .........................................................69

xii

LIST OF TABLES

CHAPTER 2

Table 2. 1: Advantages and Disadvantages JSON over XML (Haq, Khan, & Hussein,

2015) .....................................................................................................................10

Table 2. 2: Comparison of Waterfall, Spiral and Agile Model (Victor, 2017). ...........16

CHAPTER 3

Table 3. 1: Advantages and Disadvantages of Agile Model (Victor, 2017) ...............24

Table 3. 2: List of Software ....................................................................................25

Table 3. 3: List of Hardware ...................................................................................26

CHAPTER 4

Table 4. 1: Test Case for Login ...............................................................................71

Table 4. 2: Test Case Add Activities .......................................................................72

Table 4. 3: Test Case Edit Activities .......................................................................73

Table 4. 4: Test Case Delete Activities ....................................................................74

Table 4. 5: Test Case Send Notification. ..................................................................75

Table 4. 6: Test Case Edit Notification. ...................................................................76

Table 4. 7: Test Case Delete Notification. ...............................................................77

Table 4. 8: Test Case Add Hadith. ...........................................................................78

Table 4. 9: Test Case Edit Hadith. ...........................................................................79

Table 4. 10: Test Case Delete Hadith. .....................................................................80

Table 4. 11: Test Case Manage User. ......................................................................81

xiii

Table 4. 12: Test Case for Login .............................................................................82

Table 4. 13: Test Case for Register .........................................................................83

Table 4. 14: Test Case for View Notification ...........................................................84

Table 4. 15: Test Case for View Hadith...................................................................85

Table 4. 16: Test Case for View User Profile ...........................................................86

Table 4. 17: Test Case for Edit User Profile.............................................................86

Table 4. 18: Test Case for Log Out. ........................................................................87

xiv

LIST OF ABBREVIATIONS

JSON JavaScript Object Notation

JaPSAR Jawatankuasa Pengurusan Surau Ar-Raudhah

DFD Data Flow Diagram

XML Extensible Mark-up Language

UniSZA University of Sultan Zainal Abidin

SDLC Software Development Life Cycle

FCM Firebase Cloud Messaging

FYP Final Year Project

Regid Firebase Id

App Application

xv

LIST OF APPENDICES

APPENDIX TITLE PAGE

A Gantt Chart FYP 1 94

B Gantt Chart FYP 2 96

1

CHAPTER 1

INTRODUCTION

1.1 Background

Kampus Besut is one of the campus of Universiti Sultan Zainal Abidin

(UniSZA) with only three faculty. There are many associations in UniSZA Kampus

Besut including ‘Jawatankuasa Pengurusan Surau Ar-Raudhah’ which is known as

JaPSAR.

JaPSAR is the organization that responsible in managing Surau Ar-Raudhah

such as making programs or activities to the Islamic activities and welfare of student

community in relate to the Surau Ar-Raudhah. Moreover, JaPSAR also provide a duty

schedule of Imam and Bilal for Surau Ar-Raudhah and many more.

Surau Ar-Raudhah has been the main place for Muslim students do religious

events like tazkirah, the reminder of the best practices as Muslim and Islamic guidance.

The Muslim students also prays at Surau Ar-Raudhah. Unfortunately, only few students

2

commit to attend events. Despite being notified, maybe they not remember or packed

with others schedule. Therefore, the activities of JaPSAR would have less attendee. In

addition, students always busy with learning schedule with assignment and other needs,

yet they still lack of mindfulness of Islamic teaching, spiritual reminder that is believed

will support good spiritual and self-development.

Through this problem, JaPSAR need to come up with an apps that able to record

the activities and remind the follower on the hadith, takzirah and the future activities of

Surau Ar-Raudhah so that the attendee will be increased, the program got many

attendances, and all in all the JaPSAR can achieve its objective. So, one way to solve

this problem is to have and mobile app that always notify reminder for students about

the activities will be held by JaPSAR.

Thus, the I-Surau Ar-Raudhah Notification System has been introduced in order

to solve the problem.

1.2 Problem Statement

Certainly, notifying the students is the most problem which is there’s no other

medium for centralised information for the Surau Ar-Raudhah. According to the past,

the medium that JaPSAR used only through verbal or conversation between members

of surau and students. Furthermore, usually all the program and activities announce

manually in surau or notified using social media like sharing in WhatsApp groups,

Instagram and many more. Despite being notified, only few students commit to attend

events. Maybe they not remember or packed with others schedule. Moreover, students

always busy with learning schedule with assignment and other needs, yet they still lack

3

of mindfulness of Islamic teaching, spiritual reminder that is believed will support good

spiritual and self-development.

1.3 Objectives

The objectives of developing I-Surau Ar-Raudhah Mobile App are to develop

integrated notification system for students about Surau Ar-Raudhah activities or events.

Moreover, the objective also to design information sharing management system for

Surau Ar-Raudhah. Last but not least, to test the functionality of application and system.

1.4 Scope

The scope means what will recovered in the research project and who involves

in the system. It defines clearly the extent of the content that will be covered by whole

system. The scope of study has to define at a preliminary stage and it is very important

to do it early as possible.

1.4.1 Admin

For web-based system, admin can log in to the system by entering the username

and password. Next, admin also can manage user such as delete user account or change

the user data. For the important function, admin can push notification with title,

4

message and image and anymore. Other than that, admin can manage user reviews such

as reports, ratings, and commends. Lastly, admin can add, delete and update data in

database.

1.4.2 User

For the mobile app, user can register and login with username and password as

user. User can get notification about events and activities that admin push in web-based

system. User also get notified hadith, make report about surau problems and commend

activities. Moreover, user can fill out the form in the mobile app for examples fill out

the form for joining JaPSAR. User also can access their profile and can update their

data in the mobile app. Lastly, user can do rating to activities that passed already.

1.4.3 System

System will interact with admin and user. For example, when the user entered

wrong password and username, the system will notify that the username or password

that entered is wrong. The system has security like password and username for admin

and user to login before using the app or system. The system will provide notification

to users.

5

1.5 Limitation of Works

There are several limitations that occurred for this application. These problem

and limitation for this project is user need to have internet connection to get data from

server and this system is designed for students of UniSZA Kampus Besut. Moreover,

the system is for android phone only.

1.6 Expected Result

This project aims to involves an application for the android base operating

system for Surau Ar-Raudhah which will provide the notification and reminders to

users about activities that will be held at Surau Ar-Raudhah. There are abundance

applications that provide notifications about business, news and many more. Next, this

app will assist JaPSAR in notify activities or program about Surau Ar-Raudhah to

students or users. Other than that, the students must get notification from I-Surau Surau

Ar-Raudhah mobile app when the admin push the notification in web-based system.

Lastly, I-Surau Ar-Raudhah Notification System must function with full functionality

and meet the specified user’s requirement.

6

CHAPTER 2

LITERATURE REVIEW

2.1 Introduction

This chapter to present knowledge of existing research and debates relevant to

this project. Based on this project, JavaScript Object Notation (JSON) is chosen for data

exchange between web servers and browsers and mobile applications. This chapter also

cover the research on what is XML and comparison between JSON and XML.

2.2 JavaScript Object Notation (JSON)

JSON is a lightweight format based on the data types of the JavaScript

programming language. In their essence, JSON documents are dictionaries consisting

of key-value pairs, where the value can again be a JSON document, thus allowing an

arbitrary level of nesting.

7

As we can see from Figure 2.1, apart from simple dictionaries, JSON also

supports arrays and atomic types such as integers and strings.

{

"name": {

"first": "John",

"last": "Doe"

}

"age": 32,

"hobbies": ["fishing","yoga"]

}

Figure 2. 1: A simple JSON document

Arrays and dictionaries can again contain arbitrary JSON documents, thus

making the format fully compositional. JSON is quickly becoming one of the most

popular formats for exchanging data on the Web because it is easily readable both by

humans and by machines (Bourhis, Reutter, Vrgoc, & Suarez, 2017).

Despite its popularity, the coverage of the specifics of JSON format in the

research literature is very sparse, and to the best of our knowledge, there is still no

agreement on the correct data model for JSON, no formalisation of the core query

features which JSON systems should support, nor a logical foundation for JSON

8

Schema specification. Bourhis et al (2017) state while some preliminary studies do

exist, as far as we are aware, no attempt to describe a theoretical basis for JSON has

been made by the research community. Therefore, the main objective of this paper is to

formally define an appropriate data model for JSON, identify the key querying features

provided by the existing JSON systems, and to propose a logic allowing us to specify

schema constraints for JSON documents.

2.3 Procedure of invoking a JSON-based Web Service

Nowadays, data exchanging in web service applications between client and

server is through HTTP. HTTP itself might be a bottleneck of the web service

performance. Figure 2.2 shows the entire procedure of invoking a JSON-based request-

response web service. As we can see, it consists of five steps

Figure 2. 2: Step for Invoking JSON-based Web Service

9

Step 1 is to parse JSON data, which means the server will parse the data as soon

as it receives the request data from the clients. In Step 2, the parsed JSON data is DE

serialized into application data. Step 3 is service invocation. The server invokes specific

web service and catches the results. The time it takes is relevant to the computational

complexity of the web service. Step 4 is serializing the results returned from Java data

into JSON data. Step 5 is the final step which writes the JSON data into an output stream

of HTTP, and then sends it to the client side.

2.4 Extensible Mark-up Language (XML)

XML is a simple standard that can be used to transform and encode both text

and data and it can be processed and transformed across different platforms. XML is

simpler and more manageable as compared to SGML, it is not a full independent mark-

up language but it is a tool that enables users to define their own mark-up language,

user can define their own tags which are easier and more readable by both machines, as

well as user (Zia, Gul, & Tazar, 2015).

To take care of compatibility the XML is built to in the way to fit the HTML in

the new framework and after some time HTML 5.0 which is a very suitable version that

is compatible with XML and there it is named as XHTML, and simply we can say that

it is nothing more but a special application of XML.

10

2.5 Comparison between JSON and XML

Table 2.1 shows the strengths JSON over XML and strengths XML over JSON.

Both JSON and XML can be used to receive data from a web server and both also are

hierarchical (values within values).

Table 2. 1: Advantages and Disadvantages JSON over XML (Haq, Khan, & Hussein, 2015)

JSON XML

JSON strengths over XML

Completely programmed

technique for de-serializing

and serializing JavaScript

objects, with very little

coding.

JavaScript code

will be written by

developer to

serialize and de-

serialize to and

from XML

Most of the browsers have

enough support of JSON

All new browsers

have built in XML

parser but it could

be a bit tricky

when it comes to

cross-browser

XML parsing.

11

The format is very concise

due to having name/value

pair-based approach.

Because of tags

and namespaces,

the format is very

lengthy.

de-serialization is very

speedy in JavaScript

De-serialization is

slower in

JavaScript

Most of JavaScript libraries

and AJAX toolkits have good

support of JSON

AJAX toolkits

don’t have strong

support for it.

Having simple API for JS

and more other languages

The APIs are very

complicated

XML strengths over JSON

There is no grammar support

and that’s why it is difficult

to communicate and enforce

interface contracts

While XML have

XML schema and

Document Type

Definition which

can be used to

define grammar

rules

Extensibility is not good as

namespaces are not

supported

Very strong

support for

namespaces,

schema have more

extensibility

options

12

2.6 PHP (Hypertext Pre-processor)

PHP (recursive acronym for PHP: Hypertext Pre-processor) is a widely-used

open source general-purpose scripting language that is especially suited for web

development and can be embedded into HTML.

Development tools support is

very limited as it is newly

introduced.

As XML is in the

market since long

time there for is

supported by most

of the

development tools.

JSON is very narrow focused

as it is used only for Remote

Process Call (RPC), mainly

with JavaScript Clint.

XML is very

broad focused, it

can be used for

Remote Process

Call (RPC),

Electronic Data

Interchange (EDI),

Metadata etc.

Very limited support for web

services associated stuff

(products).

Huge hold of web

services related

products.

13

Instead of lots of commands to output HTML (as seen in C or Perl), PHP pages

contain HTML with embedded code that does "something" (in this case, output "Hi, I'm

a PHP script!"). The PHP code is enclosed in special start and end processing

instructions that allow you to jump into and out of "PHP mode" (Shen,

2018).

What distinguishes PHP from something like client-side JavaScript is that the

code is executed on the server, generating HTML which is then sent to the client. The

client would receive the results of running that script, but would not know what the

underlying code was. You can even configure your web server to process all your

HTML files with PHP, and then there's really no way that users can tell what you have

up your sleeve.

The best things in using PHP are that it is extremely simple for a newcomer, but

offers many advanced features for a professional programmer. Figure 2.3 below shows

the example of php code.

Figure 2. 3: Example of php code

14

2.7 Existing System

I. OneSignal (George Deglin, CEO of One Team One Dream (2017))

OneSignal is incredibly helpful with a front-facing user interface that non-devs

can easily use, impeccable service, and the consistent system uptime that make

delivering pushes reliable. Figure 2.4 below shows the interface of the app.

Figure 2. 4: Interface of OneSignal app

The advantages of OneSignal app is real time reporting which is user can view

delivery and conversion performance for every message. This app is easy to use for user

and user friendly.

15

II. NotifyMe - Notes, Reminders and Birthdays (Sourabh Nayak (2016))

User can create remainder tasks for user daily day to day use and set the task

occurrence frequency. This system also can create shopping lists and to-do lists with

reminders. Figure 2.5 show the interface of the app.

Figure 2. 5: Interface of NotifyMe app

The advantages for NotifyMe app are the app will remind us about important

things that we have to do when we set up the reminder. This app also will make sure

that we did not late to go to work. Lastly, this app can ease our life by remind many

things that we can’t remember.

16

2.8 Comparison of SDLC Methodologies

Methodology is commonly heard among developer and there are many

methodologies that have been used for developed the systems such as System

Development Life Cycle or known as SDLC. Table 2.2 shows the comparison between

three methodologies in SDLC with advantages and disadvantages.

Table 2. 2: Comparison of Waterfall, Spiral and Agile Model (Victor, 2017).

Model Waterfall Model Spiral Model Agile Model

Definition The development

process moving step

by step through the

phases from the

requirement

analysis to

maintenance

phases.

A combined

architecture of the

iterative and

Waterfall SDLC

models and

prototyping by stages.

It is a risk-driven

software development

process model

The requirements

and solutions

evolve through the

collaborative efforts

of the development

team and their

customer (end

user).

Advantages • Simple to

use and can

understand

easily

• The phase can

be finished

early to

control threats

if exist.

• Project is

divided by

short and

transparent

iterations.

17

• Developmen

t stages

proceed one

by one.

• Easy to

determine

the key

points in the

development

cycle.

• The process is

precisely

documented

yet scalable to

the changes.

• Can make

changes and

new

functionality

even at the

late stages.

• Risks are

minimized

thanks to the

flexible

change

process.

• First product

version is

released

early.

Disadvantage

s

• The

software is

ready only

after the last

stage is

over.

• High risks

uncertainty.

• The

progress of

the stage is

hard to

measure

while it is

• The risk

control

demands

involvement

of highly-

skilled

professionals.

• Big number of

the

intermediate

stages requires

excessive

documentatio

n.

• Difficulties

in

measuring

the final cost

because of

permanent

changes.

• New

requirement

s may

conflict with

the existing

architecture.

18

still in

development

.

• Can be quite

expensive.

• The project

may exceed

expected

time

because of

the

corrections

and changes

along the

project

development

.

2.9 Proposed Idea

I-Surau Ar-Raudhah is a mobile application which notify the students about

‘surau’ programs or activities, 1 day 1 hadith. The methodology for develop this system

is Agile Model because the development can be divided into parts and the phase is

repeated in each part. This allow the developer to make improvement from time to time

if there are any changes made.

19

CHAPTER 3

METHODOLOGY

3.1 Introduction

Methodology is commonly heard among developer and there are many

methodologies that have been used for developed the systems such as System

Development Life Cycle or known as SDLC.

SDLC have been widely used by in the development of software as a model of

how a software will be developed. Figure 3.1 shows some of the methodologies. There

are Waterfall Model, Spiral Model, Agile Model, Top-Down Model, Bottom-Up

Model, and Rapid Application Development (RAD) Model (Victor, 2017).

20

Figure 3. 1: Type of SDLC Model

3.2 Agile Model

Agile software development is an approach to software while requirements and

solutions develop through the combine efforts of the development teams and their

customers as the end user. It supports adjustable planning, advancement development,

early delivery, and continual development. Also, it is flexible and rapid response to

changes (Victor, 2017).

Figure 3.2 below shows the stages or steps in agile model. There are four steps

in agile model which are requirements, architecture and design, development, and test

and feedback.

Waterfall

Rapid Application

Development (RAD) Bottom-Up Top-Down

Agile Spiral

21

Figure 3. 2: Agile Model

Agile methods break the product into small parts that can be called as

replication. After every development of replication, the customer is able to see the result

and understand if he satisfied or not. This one of the advantages of the agile software

development life cycle model (Victor, 2017). The chosen methodology is Agile Model

because the development can be divided into parts and the phase is repeated in each

part. This allow the developer to make improvement from time to time if there are any

changes made. The method chosen and its development phase will also be explained

more in this chapter.

Figure 3.3 shows the graphical illustration of the agile model. Agile model can

have many iterations until the user is satisfied with the system that had been developed.

22

Figure 3. 3: Graphical Illustration of the Agile Model

3.2.1 Basic Stages of Agile Model

a) Stage 1: Planning and Requirement Analysis

In this stage, planning and requirement analysis is discussed. The objective of

the project is to build a notification system for Surau Ar-Raudhah. The title of this

project is selected, I-Surau Ar-Raudhah Mobile App. The abstract was constructed with

all the information gathered. The risk may exist and once the risk is identified, a plan is

finalized to overcome the risk. The problems on current state of notification without

using apps are not all students are in the groups that members of JaPSAR notify the

23

notification, only few students attend to surau to announce the activities or program,

not all students use android phone, students takes time to find the message or

notification about the program in social media.

b) Stage 2: Designing Project Architecture

In this second phase, the project architecture is designed. Here are the defined

the limitations and milestones. The limitations of this project are listed including the

app is for android user only. The possible list to design the project based on the

problems in stage one is the student can create account for the mobile application before

they get the notification from app and the app will only available to android user only.

c) Stage 3: Development and Programming

In the third phase, the development and programming of the project is

conducted. I-Surau Ar-Raudhah Mobile App will be developed. It will combine the

modules to become a complete system. The development will be based on design stage

which are the login and registration for user, list of activities program and notification

for user, list of hadith and user profile for user details.

24

d) Stage 4: Testing

The testing phase involves the debugging process. All the code flaws missed

during the development are detected and fixed. Any improvements are listed and be

implemented to the system.

• These stages are repeated until user is satisfied with the end product of the

system

3.2.2 Advantages and Disadvantages of Agile Model

Table 3.1 below shows the advantages and disadvantages of agile model for use

in the proposed project.

Table 3. 1: Advantages and Disadvantages of Agile Model (Victor, 2017)

Advantages Disadvantages

Functionality can be developed rapidly

and demonstrated.

Not suitable for handling complex

dependencies.

Suitable for fixed or changing

requirement.

More risk of sustainability,

maintainability, and extensibility.

Gives flexibility to developers. There is very high individual

dependency, since there is minimum

documentation generated.

25

Minimal rules, documentation easily

employed

Strict delivery management determines

the scope. Functionality to be delivered,

and adjustments to meet the deadlines.

3.3 System Requirements

System requirement is a very essential part to develop a system. They

are the software and the hardware that built up the system from scratch into a complete

system. Thus, I-Surau Ar-Raudhah Mobile App deployed several software and

hardware when developing the system, as listed below. Table 3.2 below shows the list

of software that had been part to develop a proposed system and the description for all

software.

Table 3. 2: List of Software

Software Description

Wi-Fi UniSZA Internet connection used to search

information such as journals, articles

and coding-solve alternatives.

XAMPP Server, MySQL Localhost to create database for this

system.

Notepad++ Platform used to write coding to be run

into localhost.

26

Microsoft Office Software to write report for references

and slides for presentation

Microsoft Visio Software to design ERD, DFD and Use

Case Diagram.

Google Drive Cloud storage which is used for back up

all the coding and report.

Google Platform to search for information,

images and references.

Snipping tool Used to cut and capture image from the

computer screen.

In addition, hardware is important too in the project for make the project

success. Table 3.3 below shows the list of hardware and hardware description.

Table 3. 3: List of Hardware

Hardware Description

Laptop Asus Windows 10 Laptop used in developing the system

with 16GB Ram, 64-bit operating

system and write report using Microsoft

Office.

Printer Hardware used for printing the hard

copy of related information and the

report of this system.

27

External Hard Drive Hardware used to back up all coding,

data, information’s about the system and

references.

3.4 Framework and Design

This section discussed about the framework and design used in

developing this project. Project modelling has been used in order to define and analyses

the data required in this project. Use Case Diagram, Data Flow Diagram, Entity

Relationship Diagram and Framework diagram are used in order to explain the project

modelling. These diagrams also will represent the framework of the system. Algorithm

for method used in this system also represent in this chapter. In conclusion, this section

will explain more about how the system is designed and modelled.

3.4.1 Use Case Diagram

Figure 3.4 shows the use case diagram that includes the two main entities and

their main process in this system.

28

Users Admin

Register Login

View Notification

Comment and Rating

Make report

Log Out

Access profile

Fill out the form

username and password

Activities, program and hadith

View reports and commends

update data

Login as admin

Add activities notification

upload

Manage users

Figure 3. 4: Use Case Diagram

User will register and input all the user information such as name, matric

number and so on. Then the user will input the username and password that has been

register to login the system. User can get notification about activities and hadith after

login into system. User also can access their profile and update the profile. Next, user

can comment, rating for the activities that had been passed in the system. User also can

make report about Surau Ar-Raudhah problem or anything that involve with it.

29

Lastly, user can log out from the system by logging out the user account. Admin

can update activities and information into the system to notify the user later. Admin can

view report, comments and rating.

3.4.2 Data Flow Diagram Admin Level 0 Process

Figure 3.5 shows DFD for admin level 0 process. Based on Figure 3.5, admin

need to login to use all the function in the system. There are 5 function in homepage

after login which are logout, view activities, view hadith, manage user and view user

review. All the data are retrieved and store in the database.

Admin

1.0

Login

2.0

Logout

3.0

View Activities

4.0

View Hadith

5.0

Manage user

6.0

View User

Review

Database

Store and retrieve

Figure 3. 5: Data Flow Diagram Admin Level 0 Process

30

3.4.3 Data Flow Diagram User Level 0 process

Figure 3.6 show the DFD user level 0 process. First, user need to register and

login to use all the function in the system. There are 8 function in homepage after login

which are logout, view current notification, view archive, view user review, view

report, view hadith, manage account, and setting. All the data are retrieved and store in

the database.

1.0

Register

2.0

Login

3.0

Logout

4.0

View Current

notification

8.0

View Hadith

6.0

View User

Review

5.0

View Archive

7.0

View Report

9.0

Manage

account

10.0

Setting

Database

User

Figure 3. 6: Data Flow Diagram for User Level 0 process

31

3.4.4 Data Flow Diagram Level 1 Process for Admin

Figures 3.7 shows diagram (DFD) for admin. DFD is the expansion from Use

Case Diagram.

1.0

Login page displayed

Admin

2.0

Login into system

Admin

3.0

Logout from system

4.0

View Activities

14.0

View user review

13.0

Manage User

10.0

View Hadith

5.0

Display activities and

Options

8.0

Add activities

9.0

Edit activities

6.0

Delete activities

15.0

Display User Review Options

16.0

View Comment

12.0

Add/Modify and Delete

Hadith

11.0

Display Hadith and

Options

7.0

Create form for join activiies

Activities

18.0

View Report

20.0

View Rating

Hadith

17.0

Display Comment

19.0

Display Report

21.0

Display Rating

Comment Report Rating

User

Request login

LoginValidate

Try again

True

Choose

Retrieve and store

Choose

RetrieveRetrieveRetirive

Logout

Retrieve

Store

Store

Store

Figure 3. 7: Data Flow Diagram Level 1 process for admin

32

All the processes are connected with an entity and saved in data store. Admin

need to login into system in order to view, insert, update, delete and manage user. At

homepage, admin can logout, view activities page, view hadith page, go to manage user

page, and view user review page. Admin can create, add, edit and delete the activities

in view activities page. Next, admin also can add, edit, delete hadith in view hadith

page. At view user review, admin can view all the user comment, report and rating. All

the data is saved to database and retrieve from database.

3.4.5 Data Flow Diagram Level 1 Process for User

Figure 3.8 below shows the diagram (DFD) for user. Same like admin, all the

user needs to login into the system in order to view, insert, update, delete and create

report. In homepage, there are many links that go to another page which are view

current notification, view current hadith, view archive, view user review, view report,

manage account and setting.

33

1.0

Login page

displayed

10.0

View user

review

3.0

Logout from

system

2.0

Login into

system

4.0

View current

notification

7.0

Dsiplay list of

archive

6.0

View archive

18.0

View report

5.0

View curent

hadith

notification

25.0

View system

setting

24.0

View / Modify

account profile

User

8.0

Display Past

Activities/

Programs

9.0

Display Hadith

12.0

View

Comments

11.0

Display list of

user review

16.0

View Rating

15.0

Delete

comment

14.0

Edit comment

13.0

Add/upload

comment

17.0

Make Rating/

Unrating

19.0

Display list

report

20.0

Add report

21.0

Edit report

22.0

Delete Report

23.0

Upload

document

Request login

Login

Choose

Choose option Choose option

Choose Option

Logout

UserValidate

True

Try again

Store

Comment Rating Report

Store

Store

Store

Activities

Retrieve

Hadith

Retrieve

Data Flow Diagram User

24.0

Register page

displayed

User request register

Store

Request login

Choose

Retrieve

Retrieve

Retrieve

Retrieve

Figure 3. 8: Data Flow Diagram Level 1 Process for User

34

3.4.4 Entity Relationship Diagram

Figure 3.9 below shows the relationship table user among another table in the

database. User also can give one or many comment, rating and report. Table Comment,

Rating and Report contain one foreign key which is MatricNo (matric number). In table

Comment, actId is foreign key from table Activities. MatricNo in table User is primary

key. The attribute for table User is matricNo, Uname, Course, email, Fname, phoneNo,

icNo, Faculty and password. The attribute for Report table is reportId as primary key,

MatricNo, reportname and report. The attribute for table Comment is comId as primary

key, actId, Matricno and comment. The attribute for table Rating is ratingId as primary

key, MatricNo, actId, and rating. One user can create many reports, ratings and

commends.

User

MatricNoPK

Uname

Course

email

Fname

phoneNo

icNo

Faculty

Password

Rating

ratingIdPK

actId

rating

Report

reportIdPK

MatricNo

reportName

MatricNo

report

Comment

comIdPK

actId

MatricNo

comment

Give

Give

Give

Figure 3. 9: Entity Relationship Diagram for User

1.M

1.M

1.M

35

Based on Figure 3.10, admin have all access to all tables in database. In table

Activities, ActId is primary key, and others attribute is actName, StartTime, EndTime,

StartDate, EndDate, Place, Descriptuion and actStatus. One admin can access many

activities. Other than that, the attribute for table Hadith is Hid that act as primary key,

hadith and Hstatus. One admin can access many hadith. Lastly, for Admin table have

username as primary key and password for another attribute.

Hadith

HidPK

Hadith

Hstatus

Activities

ActIdPK

actName

StartTime

EndTime

StartDate

EndDate

Place

Description

actStatus

Admin

usernamePK

password

Rating

ratingIdPK

actId

rating

Report

reportIdPK

MatricNo

reportName

MatricNo

report

Comment

comIdPK

actId

MatricNo

comment

Figure 3. 10: Entity Relationship Diagram for Admin

1.M 1.M 1.M

1.M

1.M

36

3.4.5 Framework Design

Figure 3.11 below shows the framework design for I-Surau Ar-Raudhah Mobile

App.

User

Server

Admin

Laptop

Data

StoreSend

Get Notification

Manage profile

View notification

View Hadith

View setting

Create Report

Do Comment and Rating

Manage user

Manage activities

Manage system

Manage Hadith

View User Review

Figure 3. 11: Framework Design

Based on Figure 3.11, user can manage profile, view notification, view hadith,

view setting, create report and do comment and rating in the app. Admin can manage

user, manage activities such as add activities and many more. Admin also can manage

system, manage hadith and view user review like report, comment and rating in web-

based system.

37

3.4.6 Algorithms (Firebase Cloud Messaging (FCM))

For this system, firebase cloud messaging is used to generate the token that declared

as regid and give to user that register account in mobile app. There are several steps to

set up the firebase cloud messaging.

a) STEP 1: Set up firebase cloud messaging into mobile app project in android

studio.

- Connect I-Surau Ar-Raudhah app with Firebase

- Add FCM into app

b) STEP 2: Retrieve regId from firebase that will be unique id for user when

register.

Based on Figure 3.12 below shows the example method of get regid from firebase

and display in mobile app.

private void displayFirebaseRegId() {

SharedPreferences pref =

getApplicationContext().getSharedPreferences(Config.SHARED_PREF, 0);

String regId = pref.getString("regId", null);

Log.e(TAG, "Firebase reg id: " + regId);

if (!TextUtils.isEmpty(regId))

txtRegId.setText("Firebase Reg Id: " + regId);

else

txtRegId.setText("Firebase Reg Id is not received yet!");

}

Figure 3. 12: Method for display regid and retrieve from firebase.

38

c) STEP 3: Copy Firebase server key/ API key from firebase console.

For each project that connected with firebase cloud messaging, it should have

one firebase server key or API key in firebase console. The firebase server key need to

define in php file. For example, is in Figure 3.13:

39

$push = new Push();

// optional payload

$payload = array();

$payload['team'] = 'Ikmal';

$payload['score'] = '10';

// notification title

$title = isset($_GET['title']) ? $_GET['title'] : '';

// notification message

$message = isset($_GET['message']) ? $_GET['message'] : '';

// push type - single user / topic

$push_type = isset($_GET['push_type']) ? $_GET['push_type'] : '';

// whether to include to image or not

$include_image = isset($_GET['include_image']) ?

$_GET['include_image']:'';

$push->setTitle($title);

$push->setMessage($message);

if ($include_image != null) {

$push->setImage($include_image);

} else {

$push->setImage('');

}

$push->setIsBackground(FALSE);

$push->setPayload($payload);

$json = '';

$response = '';

if ($push_type == 'topic') {

$json = $push->getPush();

$response = $firebase->sendToTopic('global', $json);

echo "alert('Done')";

} else if ($push_type == 'individual') {

$json = $push->getPush();

$regId = isset($_GET['regId']) ? $_GET['regId'] : '';

$response = $firebase->send($regId, $json);

}

?>

Figure 3. 14: PHP code for retrieve input from admin

40

e) STEP 5: Create push method

In Figure 3.15 below, $title, $message and $include_image will set into title,

message and image.

41

$res['data']['message'] = $this->message;

$res['data']['image'] = $this->image;

$res['data']['payload'] = $this->data;

$res['data']['timestamp'] = date('Y-m-d G:i:s');

return $res;

}

Figure 3. 15: Push Method

f) STEP 6: Create php file and rename as firebase.php for push notification to

mobile app.

In Figure 3.16 below shows the code will send the title, message and image in

array to mobile app.

42

);

return $this->sendPushNotification($fields);

}

// function makes curl request to firebase servers

private function sendPushNotification($fields) {

require_once __DIR__ . '/config.php';

// Set POST variables

$url = 'https://fcm.googleapis.com/fcm/send';

$headers = array(

'Authorization: key=' . FIREBASE_API_KEY,

'Content-Type: application/json'

);

// Open connection

$ch = curl_init();

// Set the url, number of POST vars, POST data

curl_setopt($ch, CURLOPT_URL, $url)

curl_setopt($ch, CURLOPT_POST, true);

curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

// Disabling SSL Certificate support temporarly

curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);

curl_setopt($ch,CURLOPT_POSTFIELDS,json_encode($fields));

// Execute post

$result = curl_exec($ch);

if ($result === FALSE) {

die('Curl failed: ' . curl_error($ch));

}

// Close connection

curl_close($ch);

return $result;

}

}

?>

Figure 3. 16: Method to push notification into mobile app

43

3.5 Implementation Phase

For the implementation phase, the I-Surau Ar-Raudhah Notification System will

be developed using PHP and MySQL for Web-based system and JAVA for mobile-

based. The editor tools to write the programming parts is Notepad++ using PHP

language and MySQL for database. The editor tools to write the programming part for

mobile -based is Android Studio. In this phase, Firebase algorithm will be used to send

the notification from web-based system to mobile application. Apache is run as local

host server to run this system. This phase is critical phase where user requirement needs

to be implemented.

3.6 Testing Phase

Testing the I-Surau Ar-Raudhah Notification System is the important part to

ensure the system works perfectly and firebase algorithm is successful implemented in

the system. The purpose of testing is to discover error so that the error found can be

corrected and thus lead to a better system development. The details testing phase in

Chapter 4.

3.7 Summary

In this Chapter, we discussed about methodology, hardware and software

requirement to develop this system. It is important to choose the right and suitable

methodology to fulfil the system requirement and can affect the development process.

This chapter also involve the design and framework of the system to ensure the system

is developed according to the requirement that have discussed.

44

CHAPTER 4

IMPLEMENTATION AND RESULT

4.1 Introduction

This chapter will cover the implementation and the result of the I-Surau Ar-

Raudhah Notification System using firebase algorithm to ensure that the system is

develop according to the main objectives and achieve user requirement.

4.2 Implementation of I-Surau Ar-Raudhah Notification System

I-Surau Ar-Raudhah Notification System is develop using several languages.

For the web-based system interface, HTML and CSS had been used. For the

programming language, this system used PHP (Hypertext Pre-processor) language.

PHP is widely used because it is an open source for general-purpose scripting language,

45

can be embedded into HTML and it suits for Web-development. This system used

HTML5, PHP and JavaScript for the validation. Validation is important to make sure

user have a minimum chance to make mistake when inserting data. Open Source

database also used in this system and the database is MySQL version 7.4.2- XAMP.

Apache use to run local host server. Notepad++ used for writing and edit the code.

While for mobile application, JAVA was used for programming language. Android

Studio 3.5 used for develop the mobile application.

4.3 Design Interface for Web-Based System

4.3.1 Login Form Interface

The proposed system also needs login system because only admin can use the

system. Figure 4.1 below shows the sketch login interface for I-Surau Ar-Raudhah

Notification System.

Figure 4. 1: Sketch login interface

46

Figure 4.2 below shows the interface for admin to log in into the I-Surau Ar-

Raudhah Notification System after development. The Admin must enter username

and password before log in.

Figure 4. 2: Login Interface for Admin

4.3.2 Main Interface / Dashboard

Main interface needs to have the table of list activities, form add activities and

time interface. Figure 4.3 shows the sketch dashboard interface after login into the

system.

47

Figure 4. 3: Sketch Layout for dashboard / Main Interface

Figure 4.4 shows the dashboard interface after login into the system. Admin can

view the activities in the table at dashboard.

Figure 4. 4: Main Interface of I-Surau Ar-Raudhah Notification System

4.3.3 Form Add Activities Interface

The add activities form is for admin adding the activities to MySQL (Database).

Figure 4.5 below shows the sketch interface about form to add activities.

48

Figure 4. 5: Sketch Layout for Add Activities

Figure 4.6 below shows the interface about form to add activities. There are

several input boxes like activity title, category, date, time, content and image. While,

for submitting the form, there are submit button and preview button.

Figure 4. 6: Add Activities Interface

4.3.4 Form Edit Activities Interface

The edit activities form is the essential to this system because it is for admin

easier edit the activities details in the system. Figure 4.7 below shows the sketch

layout form interface for admin edit the activities details.

49

Figure 4. 7: Sketch Layout form Edit Activities

Figure 4.8 below shows the form interface for admin edit the activities details.

After admin click button edit, the form edits activities appear and shows the activities

details that admin select to edit based on activities id. Admin can edit the image by

uploading new image at edit activities form.

Figure 4. 8: Form Edit Activities

50

4.3.5 List of Table Notification Interface

The table list of notification is to display the notification details from database

into the system. Figure 4.9 shows the sketch layout list of notification that admin

notifies using the system.

Figure 4. 9: Sketch layout for table list of notification

Figure 4.10 shows the list of notification that admin notifies using the system.

The attribute for table list notification are title, content, category, date, time and content

control. In content control, there are two text links named delete and resend.

51

Figure 4. 10: List of Table Notification Interface

4.3.6 Form Add / Send Notification Interface

This form is to send notification to user when admin click the submit button.

Figure 4.11 below shows the sketch interface about form add notification/send

notification to user.

52

Figure 4. 11: Sketch of interface for add new notification

Figure 4.12 below shows the interface about form add notification/send

notification to user. There are several input tables, one drop-down option and one

upload file function. In order to submit the notification, the admin must enter all the

details before submit.

Figure 4. 12: Form Send Notification

4.3.7 Form Edit / Resend Notification

This form is to when admin want to update the notification or resend. Figure

4.13 shows the sketch interface with update/send notification form.

53

Figure 4. 13: Sketch of Edit Notification interface

Figure 4.14 shows the same interface with add/send notification but have 3

buttons in the form. The admin needs to enter the details before submit.

Figure 4. 14: Form Edit / Resend Notification

54

4.3.8 Table List of Hadith Interface

This table is for display the hadith from database into the system and make the

admin can delete and update the hadith. Figure 4.15 shows the sketch interface for list

of hadith.

Figure 4. 15: Sketch interface for list of hadith

Figure 4.16 shows the list of hadith in one table with three attribute which are

hadith title, hadith content and content control.

55

Figure 4. 16: Table List of Hadith Interface

4.3.9 Form Add Hadith and Form Edit Hadith Interface

This form is to adding hadith into the database from system. Figure 4.17 shows

the sketch interface for form adding hadith.

Figure 4. 17: Sketch interface for form adding hadith

Figure 4.18 below shows the form of adding hadith into database MySQL.

There are two input box and one button for submit.

56

Figure 4. 18: Form Add Hadith Interface

This form is to admin update the hadith details in case admin make a mistake

when adding the hadith.Figure 4.19 below shows the sketch interface for form update

hadith.

Figure 4. 19: Sketch interface for Form update hadith

57

Figure 4.20 below shows the interface where there are two input box and two

buttons for submit and go back.

Figure 4. 20: Form Edit Hadith Interface

4.3.10 Manage User Interface

This interface for admin manages the registered user from the system. Figure

4.21 shows the sketch interface for Admin manage user.

58

Figure 4. 21: Sketch interface for manage user

Figure 4.22 shows the manage user interface which is the admin can only delete

the user account. The attribute is name, email, description, gender, phone number and

content control.

Figure 4. 22: Manage User Interface

4.4 Design Interface for Mobile Application

4.4.1 Login Interface

This form is needed it is because the user needs to login first before enter to

home page. Figure 4.23 below shows the sketch login interface for I-Surau mobile

application. Figure 4.24 below shows the login interface for I-Surau mobile application

after development. The user needs to enter email and password to log in into the system.

59

Figure 4. 23: Sketch layout for login interface

Figure 4. 24: Login Interface for I-Surau Mobile Application

60

4.4.2 Sign Up Interface

This form is for user register new account from app to use for login. Figure 4.25

shows the sketch layout for register user. Figure 4.26 below shows the sign-up interface

for I-Surau mobile application. User need to enter name, email and password to sign-

up. After sign-up, the page will go to login page.

Figure 4. 25: Sketch Layout for register interface

61

Figure 4. 26: Sign-Up Interface for I-Surau Mobile Application

4.4.3 Home Page Interface

This page is for displaying all the activities that admin submits. Figure 4.27

shows the sketch for home page interface. Figure 4.15 below shows the home page for

I-Surau Ar-Raudhah Mobile App. This page will display about the activities data from

MySQL. The latest activities will display at top.

62

Figure 4. 27: Sketch for main interface

Figure 4. 28: Home Page Interface

63

4.4.4 Notification List Page Interface

This interface is for listing the notification from MySQL. Figure 4.29 shows the

sketch of notification list interface. Figure 4.30 below shows the list of notification that

had been delivered from web-based I-Surau Ar-Raudhah Notification System. This

interface only shows the title of notification and category.

Figure 4. 29: Sketch of List notification interface

Figure 4. 30: Notification List Page Interface

64

4.4.5 Gallery Activity Page Interface

This page will display the notification details with more details included image

and date. Figure 4.31 shows the sketch for gallery interface. Figure 4.32 and 4.33 shows

the notification data with all data. This page will display, category, title, message and

date of notification.

Figure 4. 31: Sketch for gallery notification interface

Figure 4. 32: Gallery Activity Page Interface

65

Figure 4. 33: Gallery Activity Page Interface

4.4.6 List of Hadith Page Interface

This page is for displaying all the hadith in text view. Figure 4.34 shows the

sketch for list of hadith interface. Figure 4.35 below shows the list of hadith interface

after development. In this page, all the hadith been displayed with scroll function.

66

Figure 4. 34: Sketch for list of hadith interface

Figure 4. 35: List of Hadith Page Interface

67

4.4.7 User Profile Interface

This profile interface is for user view their information and image. Figure 4.36

shows the sketch for user profile interface. Figure 4.21 shows the user profile of

registered user. At the top profile bar, the Full name display there. There are six text

view that had been used for view the user data and two buttons for edit profile and sign

out. User need to click edit profile for go to edit profile page and click sig out button

for sig out account from app.

Figure 4. 36: Sketch of User profile interface

68

Figure 4. 37: User Profile Interface

4.4.8 Form Edit User Profile Interface

This form is for user to edit their profile data and image. Figure 4.38 shows the

sketch for edit profile interface. Figure 4.22 shows the form for user edit their profile.

There are five input boxes which is username, email, description, gender and phone

number. User can upload their photo from click the change photo text and select the

photo from gallery.

69

Figure 4. 38: Sketch for edit profile interface

Figure 4. 39: Form Edit User Profile Interface

70

4.4.9 The Notification Interface

This interface will show when the notification arrives. Figure 4.23 shows the

notification and when the user clicked the notification, the notification will be clear and

redirect to notification list page.

Figure 4.22: Notification Interface

71

4.5 Testing Analysis

After the development of the system are already complete. This system will be

test using two techniques of software testing which are black box testing and white box

testing in order to examine the functionality of the system. Black box testing module

involve login, sign-up, add activities, create notification. In white box testing it involve

generate the report of notification send.

4.6 Test Case

A test case is a set of condition or variables under which a tester will determine

whether a system works correctly or under test satisfies requirement. Process of

developing test case may help to find problem in the requirement or design of an

application.

a) Test Case for Web Based System.

4.6.1 Login

This test case is for validate the input and login the admin account. Table 4.1

shows the test case for admin login the I-Surau Ar-Raudhah Notification System.

Table 4. 1: Test Case for Login

Use case Login

Description Admin login to access the function in the

system.

72

Pre-condition Admin is on the login page

Basic flow 1. Admin enters username and

password

2. Admin click button Login

3. The System processes the login

Alternative flow 1. Admin browse I-Surau Ar-

Raudhah Notification System.

2. Admin enters id and password

3. Admin click button “Login”

4. The system processes the login.

Exception flow Admin enter wrong password

Post-condition Admin successfully login and able to

proceed to make services/ use the system

function.

Rules Admin who intended to send the

notification must login first.

4.6.2 Add Activities

This test case is for validate the input data and submit the data into database.

Table 4.2 shows the test case for add activities.

Table 4. 2: Test Case Add Activities

Use case Add Activities

Description Admin want to add activities

73

Pre-condition Admin must successfully login into

system

Basic flow 1. Admin enter the activities data

into input box.

2. Admin click button to submit.

Alternative flow Admin submit the form add activities

Exception flow Admin may abandon the login into

system

Post-condition Admin on add activities form

Rules Admin who intended to add the activites

must login first.

4.6.3 Edit Activities

This test case is for test the form is function and update the table in database.

Table 4.3 shows the test case for edit activities.

Table 4. 3: Test Case Edit Activities

Use case Edit Activities

Description Admin want to edit the information

about activities


system

74

Basic flow 1. Admin enter the activities data

into input box.


Alternative flow Admin submit the form edit activities


system

Post-condition Admin on edit activities form

Rules Admin who intended to edit the

activities must login first.

4.6.4 Delete Activities

This test case is for testing the delete button it is working or not and make sure

the data that selected for delete is deleted from database. Table 4.4 shows the test case

for add activities.

Table 4. 4: Test Case Delete Activities

Use case Delete activities

Description Admin want to delete activities


system

Basic flow 1. Admin click delete button.

Alternative flow Admin successfully delete the activities

75


system

Post-condition Admin on dashboard page

Rules Admin who intended to delete the

activities must login first.

4.6.5 Send Notification

This test case is for testing send notification through form in the system. Table

4.5 shows the test case for send notification to user.

Table 4. 5: Test Case Send Notification.

Use case Send notification

Description Admin want to send notification about to

user


system

Basic flow 1. Admin enter the data about what

to notify into input box.

2. Admin click button to send

notification.

Alternative flow Admin submit the form to notify user


system

76

Post-condition Admin on add notification page

Rules Admin who intended to add/send the


4.6.6 Edit Notification

This test case is for validate the input data and make sure the data is updated

into database and can resend the notification. Table 4.6 shows the test case for edit

notification and resend notification.

Table 4. 6: Test Case Edit Notification.

Use case Edit notification

Description Admin want to edit notification and

resend to user


system

Basic flow 1. Admin click edit in list of

notification table.

2. Admin enter the data about what

to notify into input box.

3. Admin click button to resend

notification or only save the

notification into database.

77

Alternative flow Admin submit the form to edit or notify

user


system

Post-condition Admin on edit notification page

Rules Admin who intended to edit notification

must login first.

4.6.7 Delete Notification

This test case is for test the delete button for deleting notification. Table 4.7

shows the test case for admin to delete notification from system.

Table 4. 7: Test Case Delete Notification.

Use case Delete notification

Description Admin want to delete the notification


system

Basic flow 1. Admin click delete button to

delete notification.

Alternative flow Admin click the delete button in the list

of notification table

78


system

Post-condition Admin on notification page

Rules Admin who intended to delete


4.6.8 Add Hadith

This test case is to test the input data is submitted to database and submit

button is working. Table 4.8 shows the test case for admin adding the hadith into the

system database using system.

Table 4. 8: Test Case Add Hadith.

Use case Add hadith

Description Admin want to add hadith into system


system

Basic flow 1. Admin enter the data into input

box.

2. Admin click button to add hadith

and submit.

Alternative flow Admin submit the form to add hadith

79


system

Post-condition Admin on hadith page

Rules Admin who intended to add hadith must

login first.

4.6.9 Edit Hadith

This test case is to make sure admin can edit the hadith and submit button is

working. Table 4.9 shows the test case for edit hadith.

Table 4. 9: Test Case Edit Hadith.

Use case Edit hadith

Description Admin want to edit hadith


system

Basic flow 1. Admin enter the hadith title and

hadith content to input box.


Alternative flow Admin submit the form to edit hadith


system

Post-condition Admin on edit hadith page

Rules Admin who intended to edit hadith must

login first.

80

4.6.10 Delete Hadith

This test case is to test the delete button for deleting hadith is working and the

selected id is deleted from database. Table 4.10 shows the test case for admin to delete

hadith.

Table 4. 10: Test Case Delete Hadith.

Use case Delete hadith

Description Admin want to delete the hadith


system

Basic flow 1. Admin click delete button to

delete hadith.


of hadith table


system

Post-condition Admin on hadith page

Rules Admin who intended to delete hadith

must login first.

81

4.6.11 Manage User

This test case is to test the table is display the user information from database

and delete button working for delete the selected user. Table 4.11 shows the test case

for admin to manage user.

Table 4. 11: Test Case Manage User.

Use case Manage user

Description Admin want to manage user


system

Basic flow 1. Admin can view user profile at

list of user table in manage user

page.

2. Admin can click delete button to

delete user.


of user table


system

Post-condition Admin on manage user page

Rules Admin who intended to manage user

must login first.

82

b) Test Case for Mobile Based System.

4.6.12 Login

This test case is to validate the credentials that user inputs and make sure the

login process is working successfully. Table 4.12 shows the test case for user login the

I-Surau Ar-Raudhah Notification System.

Table 4. 12: Test Case for Login

Use case Login

Description User login to access the function in the

system.

Pre-condition User is on the login page and already

have registered account.

Basic flow 1. User enters email and password

2. User click button Login

3. The System processes the login

Alternative flow 1. User browse I-Surau Ar-Raudhah

Notification System.

2. User enters email and password

3. User click button “Login”

4. The system processes the login.

Exception flow User enter wrong password and email

Post-condition User successfully login and able to

proceed to make services/ use the system

function.

83

Rules User who intended to use the function of

the system must login first.

4.6.13 Register

This test case is to test user can input the data into input box and make sure

button is working. Table 4.13 shows the test case for user register the I-Surau Ar-

Raudhah Notification System.

Table 4. 13: Test Case for Register

Use case Login

Description User register to create an account before

login.

Pre-condition User is on the register page.

Basic flow 1. User enter the user information

2. User click sign up to register

Alternative flow 1. User click Create one at login

page and redirect to register page.

2. User enter their credentials like

email, full name, password,

description, gender and phone

number.

3. User click Register button.

Exception flow User didn’t enter the credentials

84

Post-condition User successfully create an account

before login.

Rules User who intended to login must register

first.

4.6.14 View Notification

This test case is to test user can view the notification. Table 4.14 shows the test

case for user view notification.

Table 4. 14: Test Case for View Notification

Use case View notification

Description User can view the all list of notification

at notification page.

Pre-condition User is on the notification page.

Basic flow 1. User view notification

Alternative flow 1. User click notification tab at

bottom the app and go to

notification page.

2. User can view notification by

selecting one from all notification

in list.

Exception flow User didn’t click the notification tab

Post-condition User view the notification

85

Rules User who intended to view notification

must login first.

4.6.15 View Hadith

This test case is to test the user can view hadith. Table 4.15 shows the test case for user

view hadith.

Table 4. 15: Test Case for View Hadith

Use case View hadith

Description User can view the all list of hadith at

hadith page.

Pre-condition User is on the hadith page.

Basic flow 1. User view hadith

Alternative flow 1. User click the hadith tab at the

bottom app.

2. User can view all list of hadith

by scrolling.

Exception flow User didn’t click the hadith tab

Post-condition User view the hadith

Rules User who intended to view hadith must

login first.

86

4.6.16 View User Profile

This test case is to make sure user can view their user profile. Table 4.16 shows

the test case for user view their profile at profile page.

Table 4. 16: Test Case for View User Profile

Use case View user profile

Description User can view the user profile.

Pre-condition User is on the user profile page.

Basic flow 1. User view user profile

Alternative flow 1. User click profile tab at the

bottom

2. User view their profile picture

and profile data.

Exception flow User didn’t click the profile tab

Post-condition User view their profile

Rules User who intended to view user profile

must login first.

4.6.17 Edit User Profile

This test case is to test the edit profile button is working and redirect to edit

profile page and make sure the user can edit their profile and test the s

CSF 35204: FINAL YEAR PROJECT 2 REPORT TITLE: I-SURAU AR … · 2020. 7. 18. · Besut including...

Documents

Transcript of CSF 35204: FINAL YEAR PROJECT 2 REPORT TITLE: I-SURAU AR … · 2020. 7. 18. · Besut including...