abdul latif bin alias - myfik.unisza.edu.my · 3.2 gantt chart. 12 3.3 the framework design of...

53
ONE CLICK LAUNDRY MOBILE APPLICATION ABDUL LATIF BIN ALIAS BACHELOR OF COMPUTER SCIENCE (INTERNET COMPUTING) WITH HONOURS UNIVERSITI SULTAN ZAINAL ABIDIN 2018

Upload: others

Post on 10-Jan-2020

2 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

ONE CLICK LAUNDRY MOBILE APPLICATION

ABDUL LATIF BIN ALIAS

BACHELOR OF COMPUTER SCIENCE

(INTERNET COMPUTING) WITH HONOURS

UNIVERSITI SULTAN ZAINAL ABIDIN

2018

Page 2: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

ONE CLICK LAUNDRY MOBILE APPLICATION

ABDUL LATIF BIN ALIAS

Bachelor of Computer Science (Internet Computing) With Honours

Faculty of Informatics and Computing

Universiti Sultan Zainal Abidin, Terengganu, Malaysia

AUGUST 2018

Page 3: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

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 : Abdul Latif Bin Alias

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

Page 4: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

ii

CONFIRMATION

This is to confirm that:

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

________________________________

Name : Dr. Ismahafezi Bin Ismail

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

Page 5: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

iii

DEDICATION

In the name of Allah, the Most Gracious and the Most Merciful, all praise is

only for Him the documentation and the system for the subject, Projek Ilmiah

2018/2019 is finished due the time. Never forget to my kind supervisor, Dr. Ismahafezi

Bin Ismail for the valuable idea, time, support, advice, guidance, and ideas given

through the development of research until complete the part of the project in phase one.

Also, I want to dedicate my appreciation to my beloved family that supports and

motivates me during process finishing project. Next, thanks a lot to friends that willing

to lend their hand for finishing the project. Lastly, thank you to everyone who directly

or indirectly involved in the process of making the system and documentation.

Page 6: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

iv

ABSTRACT

Nowadays, laundry service is growing up time to time. Basically, the current laundry

shop provide self-service cleaning and drying but the customer still need to approach

the laundry service. The problem of self-service laundry occurs when there is exceeded

customer and limited washing machines and the customers need to spend longer time

waiting for the available machine. In fact, the research find out that several housewives

insist to use the laundry to ease the house choirs however they do not capable to drive.

There is also no specific organization of laundry service which practice home to home

laundry service. In order to overcome these problems, One Click Laundry application

is built. One Click Laundry is a mobile application to facilitate customers using the

laundry service by proving home to home laundry delivery. It is aim to save the

customer time as customer just need to log on the application, then making a reservation

for the service for just one click. After that, the delivery staff will come to the location,

pick up the laundry and send to laundry service. This application will be developed

using mobile computing software call Android Studio and using the combination of

Json, PHP and MySQL. Through this application, users will always know the status of

the clothes they are requesting to be washed that updated in every process. Lastly, this

application can help customers to save the time and assist to do another jobs in one time

as the customers can track the laundry status whether it has done or not through this

application every time and everywhere.

Page 7: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

v

ABSTRAK

Pada masa kini, perkhidmatan dobi semakin meningkat dari semasa ke semasa.

Beberapa kedai dobi menyediakan perkhidmatan layan diri tetapi pelanggan terpaksa

membuang masa menunggu sehingga pakaian selesai dicuci di kedai tersebut. Pada

masa yang sama masih tiada organisasi yang menyediakan perkhidmatan dari rumah

ke rumah. Walau bagaimanapun, apabila masyarakat menggunakan perkhidmatan

dobi layan diri, mereka perlu membazirkan masa mereka dengan menunggu pakaian

sehingga selesai. Satu lagi masalah adalah bukan semua suri rumah yang ingin

menggunakan perkhidmatan dobi boleh memandu ke kedai dobi. Oleh itu, One Click

Laundry dibangunkan untuk memudahkan syarikat dobi berhubung dengan pelanggan

untuk menggunakan perkhidmatan dobi melalui aplikasi mudah alih. Aplikasi mudah

alih ini adalah untuk menjimatkan masa sambil pelanggan boleh melakukan kerja lain

ketika mereka menunggu pakaian siap di basuh. Pelanggan tidak perlu lagi pergi ke

kedai dobi untuk perkhidmatan dobi, mereka hanyalah perlu klik pada aplikasi untuk

membuat tempahan dan menunggu sehingga pakaian diambil dan siap dibasuh.

Aplikasi ini akan dibangunkan menggunakan peranti pengkomputeran mudah alih

Android Studio dan menggunakan kombinasi Json, PHP dan MySQL. Melalui aplikasi

ini, pengguna akan sentiasa mengetahui status pakaian yang sedang dibasuh yang

dikemas kini dalam setiap proses oleh pekerja syarikat dobi. Akhir sekali, aplikasi ini

dapat membantu para pelanggan untuk menjimatkan masa dan membantu melakukan

pekerjaan lain dalam satu masa kerana para pelanggan dapat mengesan status dobi

apakah ia telah dilakukan atau tidak melalui aplikasi ini setiap saat dan di mana-mana.

Page 8: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

vi

CONTENTS

PAGE

DECLARATION i

CONFIRMATION ii

DEDICATION iii

ABSTRACT iv

ABSTRAK v

CONTENTS vi

LIST OF TABLES viii

LIST OF FIGURES Ix

LIST OF ABBREVIATONS / TERMS / SYMBOLS x

CHAPTER I INTRODUCTION

1.1 Project Introduction 1

1.2 Problem Statement 2

1.3 Objectives 2

1.4 Scope 2

1.5 Limitation Of Work 3

CHAPTER II LITERATURE REVIEW

2.1 Introduction 4

2.2 Project And Research

2.2.1 Existing System (www.mamawosh.com)

2.2.2 Existing System (www.freshpress.my)

4

4

5

Page 9: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

vii

2.2.3 Existing Application (Mobile Laundry

Services)

2.2.4 Existing Application (Mr. White)

5

5

2.3 Method For Develop Android Application 6

2.4 Summary 6

CHAPTER III METHODOLOGY

3.1 Methodology For Mobile Application

3.1.1 Phase 1: User Modelling

3.1.2 Phase 2: Conceptual Design

3.1.3 Phase 3: Implementation Design

3.1.4 Phase 4: Implementation

7

8

9

10

11

3.2 Gantt Chart 12

3.3 Project Requirement

3.3.1 Hardware Requirement

3.3.2 Software Requirement

13

13

14

3.4 Framework Design 14

3.5 Process Model

3.5.1 Context Diagram

3.5.2 Data Flow Diagram

3.5.3 Entity Relationship Diagram

15

15

16

16

3.6 Method / Technique 19

CHAPTER IV IMPLEMENTTAION AND RESULT

4.1 Implementation and Output

4.1.1 Introduction 21

Page 10: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

viii

4.1.2 Interfaces 22

4.2 Testing and Result

4.2.1 Introduction 31

4.2.2 Test Result and Analysis 31

4.2.3 Results 36

4.3 Summary 36

CHAPTER V CONCLUSION AND DISCUSSION

5.1 Conclusion 37

5.2 Project Contribution 37

5.3 System Constraints 38

5.4 Suggestion for Improvement 39

5.5 Summary 39

REFERENCES 40

Page 11: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

ix

LIST OF TABLES

TABLE TITLE PAGE

3.1 List of hardware requirement. 13

3.2 List of software requirement. 14

3.3 Data dictionary. 18

4.1 Test Case for Successful of open and Login the

application.

33

4.2 Test case for successful register. 33

4.3 Test case for User view and Update their information. 34

4.4 Test case for user booking service laundry. 34

4.5 Test case for user view process of their cloths. 35

Page 12: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

x

LIST OF FIGURES

FIGURE TITLE PAGE

3.1 Web Semantic Design Method (WSDM) flow. 7

3.2 Gantt chart. 12

3.3 The framework design of project. 14

3.4 Context diagram of application. 15

3.5 Data flow diagram of application. 16

3.6 Entity diagram relationship diagram. 17

3.7 The diagram shows the cycle of development android

application.

19

3.8 Example coding for insert real time. 20

4.1 First interface of an application user site. 22

4.2 Second interface of an application user site. 23

4.3 Third interface of application for user site. 24

4.4 Fourth interface of application user site. 25

4.5 Fifth interface of application user site. 26

4.6 Sixth interface of application user site. 27

4.7 First interface of website staff. 28

4.8 Second interface of website staff. 29

4.9 Third interface of website staff. 30

Page 13: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

xi

LIST OF ABBREVIATONS / TERMS / SIMBOLS

CD Context Diagram

DFD Data Flow Diagram

ERD Entity Relationship Diagram

WSDM Web Semantic Design Method

UOM User Object Models

JSON JavaScript Object Notation

APK Android Application Package

IDE Integrated Development Environment

Page 14: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

1

CHAPTER I

INTRODUCTION

1.1 Project Introduction

Every day we will change the clothes we wear. Clothes that are dirty will be washed

for wear on another day. These clothes will be washed by hand or washing machine to

make sure the clothing is clean from all dirt. Today, most homes already have washing

machines. There are also companies that have opened laundry services. The laundry

service makes it easier for individuals who have time constraints to wash their clothes.

Nowadays, laundry service is growing up time to time. For example, Dobi Aquanano

Station 18, Mai Dobi, Juta Laundry and many others company. Some of the laundry

shop provide self-service and some of the laundry provide full service that people only

have to send to them. Even the shop provide self-service laundry but people still have

to go and wait until the laundry is finished. There is still no organization that provide

home to home delivery service.

There are several issues arise with the self-service laundry. When the people goes to

use the service, but arrives at the laundry shop, all the machine is being used. They had

to wait until there were empty machines that they could use. When they had to wait for

the machines to empty, they have wasted their time for that.

In conclusion, the developed the mobile application can help people to save their

time for waiting the washing machine is finish at the self-service laundry shop.

Page 15: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

2

1.2 Problem statement

There is some problem statement can identify in the issue of use laundry service.

When people use self-service laundry, they have to waste their time by waiting the

laundry to finish. In addition, all the machine is being used when they arrives at the

laundry shop. This problem often occurs during the monsoon season. Most of the user

laundry service are among housewives and students. The other problem is not all

housewives and students can drive to the laundry shop. So, it difficult for them to wait

people that can bring them to the laundry shop.

1.3 Objectives

The objectives of the project are:

1. To analyse problem that user use laundry application.

2. To design an application which provide the time tracking for user to see

their status of laundry.

3. To develop a mobile application laundry service that can help people save

their time.

1.4 Scope

The scope of this project divided into 3:

1. Admin. The role of an admin is login account of the application to control

the data of user and maintain the application.

2. User. The user can request service and they also can see the status laundry

of their clothes time by time.

3. Staff. The user can see the request service from user and they also can

update the status laundry process time by time.

Page 16: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

3

1.5 Limitation of work

The limitation of the project for the One Click Laundry is Android based. This

application will develop by using Android IDE and for sure use Android OS. This

application will be used in mobile devices that using android only. The other

limitation of this project is One Click Laundry do not support the Global Positioning

System (GPS). User cannot use the GPS to allocate their address home.

Page 17: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

4

CHAPTER II

LITERATURE REVIEW

2.1 Introduction

This topic focused on the research that directly or indirectly to the project. This

topic is also important to develop the project. It contains a lot of information that will

be use in the development project. Besides, this topic also helps in analysing

information of existing laundry application. By understanding the existing system

details, it will help in determining the best approach to the development system.

2.2 Project and Research

2.2.1 Existing System (www.mamawosh.com)

There has some system exist for assisting people to use laundry service. First,

the system has been developed is www.mamawosh.com which is web base platform.

This system focus on pickup, cleaning and delivery. Everything about laundry they tell

in their system such as price for wash and fold, hand wash, dry cleaning, curtains

cleaning and etc. These help the customer to calculate the price before order the service

through the system. For example, the price for hand wash is RM 6 per item.

Page 18: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

5

2.2.2 Existing System (www.freshpress.my)

The system has been developed is www.freshpress.my which is web based

platform too. This service is almost same with the www.mamawosh.com but they add

one another service that is household dry cleaning and also they told what area they

have cover. However the system is same in part that customer can know the price before

make order for laundry service. In the system, customer need to choose their city before

make an order.

2.2.3 Existing Application (Mobile Laundry Services)

Mobile Laundry Service application that Android mobile base system. It is

focused on Kuala Lumpur, Gombak, Ampang and Petaling Jaya. This application give

customer to place the order from their smartphone and choose the pick-up and delivery

time. Customer need to fill a “laundry pickup request form” in the application before

make an order. Like the other service system, the application also show the provided

service but they detailed the method how they do the service. For example, they guide

step by step about hand wash and fold from rinse until fold.

2.2.4 Existing Application (Mr. White)

Mr. White application that had been developed the Android base application.

This application is simple but the function is very well. They provide schedule pick up

and customer only just to choose the date and time. After choose the time in schedule,

automatically the order enter into the request chart. Then, customer will get a

notification for order received and pick up request. Like other system and application,

Mr. White application also show the price list to the customer.

Page 19: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

6

2.3 Method For Develop Android Application

To build an android application, the developer will use Android Studio software

to build the user interface. Then, the developer use PHP scripting language to connect

with MySQL database. Unfortunately, the data in database cannot connect direct send

to android device. The developer need to use JavaScript Object Notation (JSON) data

interchange format to make sure the device can read the data. This method will be

explain in next chapter three.

2.4 Summary

In conclusion, literature review gave details understanding or assumption on the

developer documentation. It involves some of research and studies that are done by

other people which are related to the project. Based on the research, the flow to develop

this project can be seen clearly throughout the application development process.

Page 20: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

7

CHAPTER III

METHODOLOGY

3.1 Methodology for Mobile Application

In order to develop “One Click Laundry” mobile application, we are going to

use Web Semantic Design Method (WSDM) methodology. This methodology consist

of four following phases which are user modelling, conceptual design, implementation

design and actual design.

Figure 3.1 : Web Semantic Design Method(WSDM) flow.

Page 21: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

8

3.1.1 Phase 1: User Modelling

This phase consist of two sub phases that are user classification and user

description. In this phase, we as the developer supposed to interview the clients and get

the requirement with information about what they want in the application. We are going

to concentrate on the potential users of this “One Click Laundry” application such as

student, housewife and others. The developer is going to identify as much as possible

the information that needed.

3.1.1.1 User Classification

For the user classification, the developer needs to identify the people that use

this application. The way to identify is by looking at the process which will be built in

the application. Each process could need people who are the potential user of the

application. If the developer identify the type of people that involve in each activity, we

can define the following user classes:

Admin

Customer

Staff

3.1.1.2 User Class Description

After we identified the classes of user of the application, we need analyse the

user class in more detail. This because the different user class requirements, the

information also will be different with each other. For example, admin can control all

the data of the customer which mean admin can create, retrieve, update and delete all

the data of customer. While the customer only can see their data and make request with

cancel order process. For staff, they will update the process in the application.

Page 22: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

9

3.1.2 Phase 2: Conceptual Design

The next phase, the Conceptual Design consist of two sub phases that is object

modelling and navigational design. This phase is used to specify the information,

functionality and structure of the system at a conceptual level.

3.1.2.1 Object Modelling

In the object modelling, the information requirements of the different user

classes and their perspective are described. This phase also call user object models

(UOM) that has been designed on the view of user class and will cover part of a total

set of business objects of the organization. In the conceptual model, it described the

relationship between object types, rules or constrains on the object types and the

relationship.

3.1.2.2 Navigational Design

The goal of the Navigational Design is to define the conceptual structure of the

web system and to model how the members of the different audience classes can

navigate through the web system and perform their tasks. A navigation track expresses

how users of a specific point of view can explore through the accessible information.

This portrayed regarding components and connections. The developer recognizes

information components, navigation components, and external components. The

navigation track consist of three layers which are the top layer, middle layer and lowest

layer.

The context layer – navigation track starts with a navigation component

with the same name as the perspective. For our environment is the Home

page

Page 23: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

10

The information layer – information component or an external

component in the navigation track. The availability of information

determines the choice between information component and external

component

The navigation layer – connects context layer and information layer.

3.1.3 Phase 3: Implementation Design

In the implementation design, the developer will analyse many mobile

application and web system to ensure the system feel like mobile application. The goal

is create in such a consistent, pleasant and efficient taste for conceptual design. There

is lot of literature on aspects of mobile application design. The result of design

implementation is a Model Implementation.

In WSDM, the developer can be decided to gather the components connected to

the links and to represent them on one page. Navigation components can be

implemented in a way by ordered or unordered list. We can use the index page and the

index page links to every page of the entire mobile application that provide a point for

user to find the pages in this site. The index page can be viewed as a simplified page.

Mobile application designed by WSDM centred on the concept of user

perspective. Users who follow a link from the start of the cruise tracks usually stay

within a perspective. However, the page may contain external links and inter

perspective coherency. Links between pages on different cruise track. It is good to

practice using different navigation signals to link to external pages and in perspective

link.

Page 24: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

11

In this way, users will have realized he left perspective or local sites. It should

be noted that the design of implementation may depend on the implementation of the

selected environment. Limit execution language can interfere with this process.

3.1.4 Phase 4: Implementation

The implementation is the last phase in the WSDM methodology. This phase is

the actual realization of the system using the chosen implementation environment. For

an Android based application, the implementation model must be converted into a set

of files containing XML source code. This step can be largely automated using available

tools and environments for assisting in android implementations such as using Android

Studio.

The database will be linked to the project to improve maintainability of the user

information details. We will use MySQL in order to create a database in Android that

connect by JSON.

Page 25: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

12

3.2 Gantt Chart

No. Task Month

2 3 4 5 6 7 8

1. Planning Phase

1.1 Problem Definition

1.2 Project Identification

1.3 Project Proposal

2. Requirement Analysis Phase

2.1 User Requirements

2.2 System Requirements

3. Design Phase

3.1 Process Design

3.2 Interface Design

3.3 Database Design

4. Implementation Phase

4.1 Develop Interface

4.2 Develop Database

5. Testing Phase

5.1 System Test

6. Deployment Phase

Figure 3.2 : Gantt chart.

Page 26: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

13

3.3 Project Requirement

In this project, the requirement includes two parts which are software

requirements and hardware requirement. The project requirements to make sure the

completion process well and every aspect requirement that need to be use for

implementation phase. This also to ensure the correct usage of the application.

3.3.1 Hardware Requirement

Table 3.1: List of hardware requirement.

No. Hardware Description

1. Laptop ASUS A550C notebook PC

2. Processor Intel Core i3-3217U CPU 1.80GHz

3. Memory 4 GB RAM

4. Operating system Windows 10

5. System type 64-bit operating system

6. Pen drive Kingston 4 GB

7. Mobile phone Xiaomi Redmi 5 Plus

Page 27: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

14

3.3.2 Software Requirement

Table 3.2 : List of software requirement.

No. Software Description

1. Android studio Used to code the program of the project. It

debugs and run, test the application.

2. Notepad++ Used to code the program, especially

connection application to database.

3. Java, XML, PHP Programming language.

4. MySQL database and SQLite manager Database for system.

5. JavaScript Object Notation (JSON) Connect the database to android studio.

6. Microsoft word 2013 Use to do the documentation of application.

7. Google chrome A browser to run the localhost and

searching information.

3.4 Framework Design

Figure 3.3: The framework design of project.

Page 28: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

15

3.5 Process Model

3.5.1 Context Diagram

Figure 3.4 : Context diagram of application.

Figure 3.3 shows the main process of One Click Laundry application work.

There are three entities involved that are User, Staff and Admin. The user must register

to the application first before they can use the system. Then user can make an order to

the laundry service using the application.

While at the staff site, they can see the order details from customer then update

the process order in the system. Admin can manage the data about the system. With this

data, admin can update and delete the data information user. The staff and admin does

not necessary to register the profile to use the application. Their data already inserted

into the database in back-end development. So, they just log in through the system by

id and password.

Page 29: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

16

3.5.2 Data Flow Diagram

Figure 3.5: Data flow diagram of application.

Figure 3.4 shows the process One Click Laundry application in more detail. The

application carried out three processes. The core of this application in the third process.

The third process includes three entities which are customer, staff and admin. The

ability of customer only can view the process while staff and admin can update and

delete the data beside view the process.

3.5.3 Entity Relationship Diagram

An entity-relationship diagram (ERD) describe system’s entities information

and entities relationship. This ERD create three features that are identifying and

defining the entities, determine entities interaction and the cardinality of the

relationship. Every box describes the table in database and lines to show the

relationship.

Page 30: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

17

Figure 3.6 : Entity diagram relationship diagram.

In the One Click Laundry application, the developer need to create five of

entities represented five tables into the database. Each entity has their own attributes as

shown in figure 3.5. The relationship between of entities explain the process that will

carry out by every entity. This entity relationship diagram also explains the data that

needed to run the application successfully. The diagram also shown the different role

between customer, staff and admin in more detail.

Page 31: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

18

Table 3.3 : Data dictionary.

Entity Attribute Description Data Type Size Remark

Customer custID Identification of

customer.

INT 10 PK

custName Name of customer. VARCHAR 100

custPhnNo Contact of customer. VARCHAR 20

custAdd Address of customer. VARCHAR 500

custEmail Email of customer. VARCHAR 100

Service serviceID Identification of service. INT 10 PK

Pickup Name of process service. VARCHAR 50

Wash Name of process service. VARCHAR 50

Dry Name of process service. VARCHAR 50

Fold Name of process service. VARCHAR 50

Deliver Name of process service. VARCHAR 50

Admin adminID Identification of admin. INT 10 PK

Password Password admin to

login.

VARCHAR 100

Staff staffID Identification of staff. INT 10 PK

StaffName Name of staff. VARCHAR 100

Password Password staff to login. VARCHAR 100

Order custID Identification of

customer.

INT 10 PK

serviceID Identification of service. INT 10 PK

Date Date of order. DATE 10

Page 32: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

19

3.6 Method / Techniques

Figure 3.7 : The diagram shows the cycle of development android application.

To build the One Click Laundry application, the developer will use this cycle.

The developer will use Android Studio software to develop android application

interface. Then the diagram show the way for an android application connect to the

database. Database need to use for keep the large data on the system. The database that

will be use is MySQL.

Android Studio is an integrated development environment (IDE) for Android

application development that provides developer with tools needed for the Android

Operating System platform. The developer choose Android Studio IDE because it is

free to download and use so that can cut off the cost. To build an application, the

developer can use Java or C++ language in Android Studio. The workflow for Android

Studio is built around the concept of continuous integration that allows for teams to test

their code each and every time a developer checks in their work. In the Android Studio,

performance tools provide access to view how well an Android Application Package

(APK) file is going.

Page 33: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

20

Next, after build the user interface using Android Studio, the developer will

connect between the client (android) and server (PHP) to make sure the system have

database. PHP is a server scripting language. The developer will call a PHP script to

perform create, read, update and delete operation. The android application will call a

PHP script to perform a data operation. Then, the PHP script connect to MySQL

database to perform the operation.

However, the android application cannot straight connect to database MySQL.

The developer need to use JavaScript Object Notation (JSON) to transmit the data

between the server and browser. JSON is a widely used data interchange format. When

developer execute the android application, it will connect android device to PHP script.

Then PHP script will fetch the data from the MySQL database. It will encode it into

JSON format and send the data to the android application device. After that android

application will get these encoded data and will parse the data. Last step the data will

display on android device.

For the time tracking, database MySQL will save the real time data. The

developer will using PHP language to insert real time data into the database. Then from

the database, time will retrieve to the android application using JSON data change

format. The example technique and coding is like the figure :

Figure 3.8 : Example coding for insert real time.

Page 34: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

21

CHAPTER IV

4.0 IMPLEMENTATION

4.1 Implementation

4.1.1 Introduction

This project is implemented as an android application by using Android Studio

which is Integrated Development Environment (IDE). This will help developer design,

code, test, debug and execute the main process of the project. This project also used

Hypertext Pre-processor (PHP) language to connect program in the Android Studio to

the database of application.

The main of the project is focused on Customer and Staff site. The customer

functions are register their information, booking the process of laundry and view time

of process of their laundry. While staff has function view all booking laundry from

customer and make updating about the process of laundry to customer.

Implementation is described to develop the system as a specific design that

discussed in the previous chapter, verified to make sure that the application is error-free

and fulfil the user requirements. This chapter should finish before the application is

complete.

Page 35: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

22

4.1.2 Interfaces

Figure 4.1 : First interface of an application user site.

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

application. They need to choose log in or register first.

Page 36: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

23

Figure 4.2 : Second interface of an application user site.

The user need to register this form before they can log in into the application.

User must fill all information in the form before make confirmation register as user.

Then click the button “Confirm” and data will save into database.

Page 37: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

24

Figure 4.3 : Third interface of application for user site.

When user done register and can login into application, they will see menu

interface like the figure 4.3. There are three menu in the interface which are “My

Profile”, “Booking” and “Process”. They just need to choose the button and click if user

want to access next page.

Page 38: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

25

Figure 4.4 : Fourth interface of application user site.

This interface will be see by user if they click button “My Profile” in the menu

page. They can see the information that they register before login and also they can edit

the data. After they edit the data and click button “Update”, all the data can save in the

database.

Page 39: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

26

Figure 4.5 : Fifth interface of application user site.

User need to fill all the form unit in this interface before they make booking for

laundry service. They also can check total price by click “Total” button then the price

will display. If user want to make confirmation for their booking, they must click button

“Booking”. Then confirmation order is done.

Page 40: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

27

Figure 4.6 : Sixth interface of application user site.

After user done booking, they can see the process of their laundry in this

interface. Every time the staff of company laundry update the process, user can view

the status in this interface. User can click button “Refresh” to refresh the interface and

new status will display if staff update new process at that time.

Page 41: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

28

Figure 4.7 : First interface of website staff.

This is the first page for website staff. They need to log in first before they can

use the website by clicking “Login” button. In this interface also have information about

company.

Page 42: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

29

Figure 4.8 : Second interface of website staff.

After log in the website, staff will see table that have all booking service from

customer. Staff need to click word “Update” at the right information first before they

make update status to customer.

Page 43: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

30

Figure 4.9 : Third interface of website staff.

When staff click “Update” at the table booking service from customer, it will go

to this page. In this page, single information of customer booking service will display.

Staff need to click “Done” for update the status. If staff make mistake on update the

status, they can click “Reset” to correct the status.

Page 44: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

31

4.2 Testing and Result

4.2.1 Introduction

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

if a requirement upon an application is partially or fully satisfied. Test case also can

define as a sequence of steps to test the correct behaviour of functionality or feature of

an application. There is a list of steps, test, procedures and expected outcomes would

be stated in a test case. The test case for login, insert new data of customer, update the

customer profile and display all the data of customer information and status laundry.

The test case for the main application which database for customer and booking service.

4.2.2 Testing Analysis

Testing is needed to test system full function and free error. There is three type of testing

in the application. Those are unit testing, integration testing, and system testing. Unit

testing is carried out to verify the functionality of specific section code and integration

testing works to exposed defects in the interfaces and interaction between modules.

End-to-end testing or system testing tests a complete integrated system to verify that it

meets its requirements.

Page 45: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

32

4.2.2.1 Black Box Testing

Black box testing is a software testing technique which tests the application by

ignoring the internal code structure and knowledge of internal paths of the software.

This testing is based on entirely the software requirements and specifications. It is

focused on input and output of the application process without bothering about internal

knowledge of the application. Such as process testing are carried out with test the input

and output process on user site. There test based on display, insert and update the data

of user information.

4.2.2.2 White Box Testing

White box testing focuses on strengthening security, the flow of inputs and

outputs through the application and improving design and usability. The testing can be

done with the application, integration and unit levels of the software development. The

basic goals of white testing to verify working flow for an application. The testing

involved a series of predefined inputs against expected output. So, when it does not

result in the expected output, it must encounter a bug. Such as each form are test whether

it can fill and to check validation like login the user. The expected result will be checked

when the data input is view for example user profile.

Page 46: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

33

4.2.3 Test Case

Table 4.1 ; Test Case for Successful of open and Login the application.

Test case for successful of open the application

Steps Test Procedure Expected Result

1. Open the application of One

Click Laundry

Two button will appears that are

“Login” button and “Register” button.

2. Click the “Login” button to enter

page login.

View login page.

3. User enters the following details:

Email : [email protected]

Password : 12345

4. User click “Login” button. Login page loaded. Login is successful

and redirected to menu page.

Table 4.2 : Test case for successful register.

Test case for successful Register for user.

Steps Test Procedure Expected Result

1. Click the “Register” button to

enter page register.

View register page.

2. User enters the following details:

Name : Abdul Latif

Email : [email protected]

Phone : 0123456789

Address : Tembila, Besut,

Terengganu.

Password : 123456

3. User click “Register” button. Register page loaded. Register

successful and redirected to main page.

Page 47: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

34

Table 4.3 : Test case for User view and Update their information.

Test case for User View and Update the information.

Steps Test Procedure Expected Result

1. Menu page view. View four buttons. There are “Profile”,

”Booking”, ”Process” and “Logout”

button.

2. User click “Profile” button. View profile page that have information

that user register before. In the page

also has “Update” button.

3. User click “Update” button. View update page that have edit text to

edit the new information and “Update”

button.

4. User update the information :

Name : Abdul Latif

Email : [email protected]

Phone : 0123456798

Address : Besut, Terengganu.

Password : 987456

Only written field can be updated.

5. User select “Update” button. The application redirected to page

profile for view updated information.

Update detail is saved.

6. User select “Cancel” button. The update detail is cancelled.

Table 4.4 : Test case for user booking service laundry.

Test case for user make booking service of laundry.

Steps Test Procedure Expected Result

1. Menu page view. View four buttons. There are “Profile”,

”Booking”, ”Process” and “Logout”

button.

2. User click button “Booking”. View page booking that have some

information to fill. There are three

button in the page which are “Total”,

“Booking” and “Home”.

Page 48: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

35

3. User fill the Unit value and Click

“Total” button :

Pants : 3

Shirt : 5

Comforters : 8

The value input to calculate the price

before make booking service. Click the

“Total” button to see the total price after

input value.

4. User select “Booking” button. The application carry the user

information and price to confirm

booking page. View all detail before

make confirmation booking. There are

button “Confirm” and “Cancel”.

5. User select “Confirm” button. The application save the booking details

and redirected to menu page.

6. User select “Cancel” button. The application back to the page before.

Table 4.5 : Test case for user view process of their cloths.

Test case for user view process of their cloths.

Steps Test Procedure Expected Result

1. Menu page view. View four buttons. There are “Profile”,

”Booking”, ”Process” and “Logout” button.

2. User select “Process”

button.

View of list user detail and information about

cloths process. User can see information about

time the process happen. There are button

“Home” and “Refresh”.

3. User select “Refresh”

button.

The application will refresh the process page, if

have new information from database , it can be

view after refresh.

4. User select “Home”

button.

The application back to the menu page.

Page 49: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

36

4.2.3 Results

The expected result after releasing of the application One Click Laundry is user

should be able to make booking service by the application. The user also can see the

status of process laundry by using this application due the main process is to show the

time tracking of process laundry for the user. The benefit One Click Laundry also can

reduce the cost travel, save time and energy. Finally, the user also keeps on track during

their cloths at the laundry. While on admin site, they can to view, update or delete the

data of the application. The developer also expected that the system could function well

and fulfil the user requirement standard.

4.3 Summary

In a nut shell for this chapter, the developer shows the interfaces those developed

for the One Click Laundry application. The developer also put a few of pop up message

after the user does certain activities. This will help the user alert with the action they

act. Next, testing phase did by the developer by testing the application. This phase also

important because to optimize the application for the high level. A few errors can be

identifying, and the developer fixed to improve the functionality of the system. The

developer does testing from unit testing until integrated testing. If there have an error,

the developer will be fixed it immediately. Finally, the test case necessary to guide the

tester to test the system. The system will repeatedly be tested to minimize the error.

Page 50: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

37

CHAPTER V

5.0 CONCLUSION AND DISCUSSION

5.1 Conclusion

By the end of this study, “One Click Laundry” application project is expected

that it can encourage the citizens to use the application platform to use laundry service

in their daily life. The interface less complex design and easy to use which the user only

need to fulfil the booking form and confirmation. Then, the automatic result for their

laundry service will display. While in the staff site, this application will help them to

view a list of booking data from customer and update data. It can do by using the

website.

5.2 Project Contribution

One Click Laundry application that will be applied into Laundry Company in

Malaysia. This application also contributes toward solving some of the challenging

problem due issue customer that use laundry application cannot view their time status

cloths while using laundry service. The application also introduces the new way in assist

the user keep time tracking their status cloths.

The application also contributes to the staff of company laundry. They can

manage the data that relate to customer order. They only need to access the website to

manage that data.

Page 51: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

38

5.3 System Constraints

There are few of problems can be found during the process to achieve the project

objectives. The problems during the development of the application as the following:

• The android technology is growing very rapidly. The developer must alert the new

update of Android technology. This is because we want to prevent the application is

developed will exist some bug or not compatible with the current technology. So, the

developer must follow the current technology.

• The application needs to the connection of Wi-Fi or coverage of mobile phone

network. This is because the application wants to load data from database. If there does

not has the connection, then the status will not appear, and the application will be

useless. The user must provide the connection first before using the application.

Page 52: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

39

5.4 Suggestion for Improvement

Although the application operates in properly and follows the milestone of

project respectively, there exist some changes can be taken for better performances. The

constraint as described before this can be corrected and improve the quality for the

future. The developer must come up to date with the current technology to ensure the

application that developed will meet the standard. For the future, the application also

can track the cloths by view in the google maps. At least customer can keep tracking

their cloths not just by time but also by place at the same time.

5.5 Summary

In a nutshell, One Click Laundry application project was developed to assist a

variety of people either customer or staff of the company laundry. With development

the application, it was systematically the management and planning to the customer and

staff of laundry service. So, the customer can save their cost travel, time and money by

directly booking their service and the application will automatically assist them connect

to the company laundry staff. Then, the management on staff site also become easy and

systematic in managing the data. With a smartphone, anytime and anywhere they can

manage the data. Finally, the developer hopes this application can use for business

market and achieve the user expectation. So, the application can give a better solution

or suggestion to them while giving feedback for improving the application in the future.

Page 53: ABDUL LATIF BIN ALIAS - myfik.unisza.edu.my · 3.2 Gantt chart. 12 3.3 The framework design of project. 14 3.4 Context diagram of application. 15 3.5 Data flow diagram of application

40

REFERENCES

1. Tom Marrs (2017). Json At Work: Practical Data Integration For The Web.

O’reilly Media.

2. Lindsay Bassett (2015). Introduction To JavaScript Object Notation: A To-The-

Point Guide To Json 1st Edition. O’reilly Media.

3. David V (2016). Json: Main Principals. Create space Independent Publishing

Platform.

4. Jackson, W. (2016). JSON Quick Syntax Reference. New York: Apress L.P.

5. Tania Rascia. (2018). How to Use JSON Data with PHP or JavaScript. [online]

Available at: https://www.taniarascia.com/how-to-use-json-data-with-php-or-

javascript/ [Accessed 19 May 2018].

6. Mama Wosh Dry Cleaning Laundry Service. (2018). Home - Mama Wosh -

Malaysia's #1 Dry Cleaning & Laundry Service - Mama Wosh Dry Cleaning

Laundry Service. [online] Available at: http://www.mamawosh.com/ [Accessed

19 May 2018].

7. Mobilelaundryservices.com. (2018). Mobile Laundry and Dry Cleaning

Services. [online] Available at: http://mobilelaundryservices.com/ [Accessed 19

May 2018].