WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION...

50
WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL BACHELOR OF COMPUTER SCIENCE (INTERNET COMPUTING) WITH HONOURS UNIVERSITI SULTAN ZAINAL ABIDIN 2018

Transcript of WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION...

Page 1: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

WISE BUDGET MANAGER FOR UNISZA’S

STUDENT MOBILE APPLICATION

MOHAMAD IKHMAL BIN ISMAIL

BACHELOR OF COMPUTER SCIENCE

(INTERNET COMPUTING) WITH HONOURS

UNIVERSITI SULTAN ZAINAL ABIDIN

2018

Page 2: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION

MOHAMAD IKHMAL BIN ISMAIL

Bachelor of Computer Science (Internet Computing) with Honours

Faculty of Informatics and Computing

Universiti Sultan Zainal Abidin, Terengganu, Malaysia

MAY 2018

Page 3: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

i

APPROVAL

This project report entitled Wise Budget Manager for Unisza’s Student Mobile

Application was prepared and submitted by Mohamad Ikhmal bin Ismail, matric

number BTCL15040282 and in my point of view, this project fulfils a condition to be

awarded a Bachelor of Computer Science (Internet Computing) with Honor in

Universiti Sultan Zainal Abidin (UniSZA).

________________________________

Supervisor: Mr. Mat Atar bin Mat Amin

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

Page 4: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

ii

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 : Mohamad Ikhmal bin Ismail

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

Page 5: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

iii

CONFIRMATION

This is to confirm that:

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

________________________________

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

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

Page 6: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

iv

DEDICATION

In the name of Allah, I dedicate this project to Him, the Most Gracious and the

Most Merciful, all praise is only for Him. He has been the source of my strength

throughout this project. Never forget to my kind supervisor, Mr. Mat Atar Bin Mat

Amin for the valuable idea, time, support, advice, guidance and ideas given through the

development until completion part of the project. I also dedicate this work beloved

family that supports and encouraged me all the way and make sure that I give it all it

takes to finish which I have started. Next, thanks a lot to my friends that willing to lend

their hand for me to finish the project. Lastly, thank you to everyone who directly or

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

Page 7: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

v

ABSTRACT

Mobile applications are growing rapidly for business trying to produce income

and utilizing apps to solve and manage user’s difficulties. As we all know, budget

planner and money tracking application are very common mobile application that used

for daily task to manage and track user’s money in and out.

For the time being, common problem that had been face by students are they do

not keep track and record their daily expenses until they forgot what they did with the

money and where the money gone. In addition, it leads students to overconsume some

expenses and under consume others because they sometimes overestimate or

underestimate the money required for a particular amount of goods that are necessity

and which are desired. Students do not know how much they spend their needs and

requirements. Thus, they do not know where their money is going. They are lack of

knowledge in controlling the financial.

So, after completing the development process is it can simplify and precise

enough to keep track of students’ expenses and budgeting. The application will show to

the users how much they enter for particular spending. The information entered will be

stored in the database. They may freely see their past daily spending in the application.

Then, report is generated by retrieving the data from the database to show to the users

that would like to be aware to their personal budget status.

Page 8: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

vi

This application will be develop using mobile computing software. Mobile

application is user friendly for all people which is it is portable where we can use it

using our smartphone and carry it anywhere at any time. At the end of this project, high

expectation is needed so that the developed application can help people to manage their

commitment economically and wisely.

Page 9: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

vii

ABSTRAK

Aplikasi mudah alih berkembang pesat dalam bidang perniagaan bagi

menghasilkan pendapatan dan menggunakan aplikasi ini untuk menyelesaikan dan

mengurus kesulitan pengguna. Seperti yang kita semua tahu, aplikasi perancang bajet

dan aplikasi penjejak wang adalah aplikasi mudah alih yang biasa digunakan untuk

tugas harian bagi mengurus dan menjejaki keluar masuk wang pengguna.

Pada masa ini, masalah biasa yang dihadapi oleh pelajar adalah mereka tidak

menjejaki dan merekod perbelanjaan harian mereka sehingga mereka lupa apa yang

mereka lakukan dengan wang tersebut dan ke mana wang itu menghilang. Di samping

itu, ia menyebabkan para pelajar terlebih dan terkurang belanja dan kadang-kadang

mereka terlebih dan terkurang dalam menganggar kos perbelanjaan untuk sejumlah

barangan keperluan dan kehendak. Pelajar tidak tahu berapa banyak mereka perlu

belanjakan untuk keperluan dan kepentingan mereka. Oleh itu, mereka tidak tahu di

mana aliran wang mereka pergi. Mereka kurang pengetahuan dalam bidang mengurus

kewangan.

Oleh itu, setelah proses pembangunan selesai, ia dapat mempermudah dan

dengan tepat sekali ia dapat menjejaki perbelanjaan dan belanjawan pelajar. Aplikasi

ini akan menunjukkan kepada pengguna berapa banyak yang mereka masukkan untuk

perbelanjaan tertentu. Maklumat yang dimasukkan akan disimpan dalam pangkalan

data. Mereka boleh melihat perbelanjaan harian yang lepas. Kemudian, laporan dijana

Page 10: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

viii

dengan mengambil semula data dari pangkalan data untuk dipaparkan kepada

pengguna yang ingin mengetahui status belanjawan peribadi mereka.

Aplikasi ini akan dibangunkan menggunakan perisian pengkomputeran mudah

alih. Aplikasi mudah alih adalah aplikasi yang mesra pengguna yang sesusai untuk

semua orang di mana kita boleh menggunakannya menggunakan telefon pintar dan

membawanya ke mana saja pada bila-bila masa. Pada akhir projek ini, jangkaan yang

tinggi diperlukan supaya aplikasi yang maju dapat dibangunkan bagi membantu orang

ramai untuk menguruskan komitmen mereka secara ekonomi dan bijak.

Page 11: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

ix

CONTENTS

PAGE

APPROVAL i

DECLARATION ii

CONFIRMATION iii

DEDICATION iv

ABSTRACT v

ABSTRAK vii

CONTENTS ix

LIST OF TABLES xi

LIST OF FIGURES xii

LIST OF ABBREVIATIONS xiii

LIST OF APPENDICES xiv

CHAPTER I INTRODUCTION

1.1 Background 1

1.2 Problem Statement 3

1.3 Objectives 4

1.4 Scopes 4

1.5 Expected Outcomes 5

1.6 Summary 5

CHAPTER II

LITERATURE REVIEW

2.1 Introduction 6

2.2 Related Applications 6

2.2.1 Existing Software (Mint) 6

2.2.2 Existing Application (You Need A Budget) 8

2.2.3 Existing Application (Spending Tracker) 9

2.2.4 Existing Application (Income and Expense

Tracker)

9

2.3 JSON 10

2.4 Conclusion 12

Page 12: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

x

CHAPTER III METHODOLOGY

3.1 Methodology Chosen 13

3.1.1 Phase 1: Planning 13

3.1.2 Phase 2: Analysis 16

3.1.3 Phase 3: Design 23

3.1.4 Phase 4: Implementation 24

3.2 Project Requirement 25

3.2.1 Software Requirement 26

3.2.2 Hardware Requirement 27

3.3 Framework Design 28

3.4 Method/technique 29

3.4.1 JSON 29

CHAPTER IV IMPLEMENTATION AND RESULT

4.1 Implementation and Output 31

4.1.1 Interfaces 31

REFERENCES 33

Page 13: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

xi

LIST OF TABLES

TABLE TITLE PAGE

3.1 Gantt Chart 15

3.2 List of software requirement 26

3.3 List of hardware requirement 27

Page 14: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

xii

LIST OF FIGURES

FIGURE TITLE PAGE

2.1 JSON Framework 11

3.2 Context Diagram of System Application 17

3.3 DFD Level 0 18

3.4 DFD Level 1 19

3.5 DFD Level 2 Manage Income 20

3.6 DFD Level 2 Manage Expense 21

3.7 DFD Level 2 Report Generation 22

3.8 Entity Relationship Diagram 23

3.9 Application Framework Design 28

3.10 JSON sample syntax of storing data 30

3.11 JSON sample syntax of accessing information 30

4.1 Application Framework Design: Home Interface 31

4.2 Application Framework Design: Log in Interface 32

4.3 Application Framework Design: Registration Interface 32

Page 15: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

xiii

LIST OF ABBREVIATIONS / TERMS / SYMBOLS

CD Context Diagram

DFD Data Flow Diagram

ERD Entity Relationship Diagram

WBM Wise Budget Manager

JSON JavaScript Object Notation

XML Extensible Mark-up Language

Page 16: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

xiv

LIST OF APPENDICES

APPENDIX TITLE PAGE

Page 17: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

1

CHAPTER I

INTRODUCTION

1.1 Background

Nowadays, smartphones are expanding their colony while conquering the world

which is it were used everywhere and every time in our daily life ranging from

communication, entertainment to health and wellness applications. Today, we know

very well that the demand of mobile applications development is increasing rapidly and

it gives inspiration to create user friendly and effective applications. Android is open

source platform which provides all information and services for all users without any

license fees.

Mobile applications are growing rapidly for business trying to produce income

and utilizing apps to solve and manage user’s difficulties. As we all know, budget

planner and money tracking application are very common mobile application that used

for daily task to manage and track user’s money in and out. There are a lot of these

applications available today on Google Play Store that provide various kind of

functionalities to the user.

Page 18: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

2

For the time being, common problem that had been face by students are they do

not keep track and record their daily expenses until they forgot what they did with the

money and where the money gone. In addition, it leads students to overconsume some

expenses and under consume others because they sometimes overestimate or

underestimate the money required for a particular amount of goods that are necessity

and which are desired. Students do not know how much they spend their needs and

requirements. Thus, they do not know where their money is going. Besides, papers are

not able to maintain the record properly because it does not have an efficient accounting

information system to do calculation effectively.

Wise Budget Manager for Unisza’s Student Mobile Application is the solution

to the above problem. The idea of such an expense tracking tool where with just a few

inputs every day, users can make themselves organized and make their life a bit easier

in the long run. This mobile application will help students to maintain record of their

daily expenses and income due to lack of time. So, it can make students’ life easier,

arranged and organized. This application can help to organize users’ expenses which is

added with multifunctional.

Page 19: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

3

1.2 Problem Statement

There are many budget planner applications out there that were develop to help

people to solve their problems. But it lacking in lot of function. It does not work

effectively because it does not have additional features that very useful and the function

is limited. So, this kind of application is not practical anymore because it can’t manage

user’s budget efficiently. In this section, the main purpose of problem statement is to

focus the attention of solution to the problems.

There are three main problems currently. Firstly, students do not keep track and

record their daily expenses. They just simply forgot what they spend their money for.

Second, they also fail to control their spending since the knowledge in managing

financial are limited, some students do not use the opportunity to look for it. Third,

students are easily over budget. They usually do not plan their budget wisely. So, it

leads them to overconsume their expenses and under consume other expenses. Hence,

the students will over budget if they do not plan it probably.

Without a good budget planner, students will find it hard to keep track and record

their daily spending. Hence, they cannot control their spending very well. It is because,

they are lack of knowledge in controlling the financial. Concise descriptions of the

issues stated need to be addressed to deal with the problems.

Page 20: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

4

1.3 Objectives

a) To design an attractive and simple interface application that helps users to access

easily.

b) To develop a systematic application that improves students’ financial

management.

c) To implement an application that use JSON technique.

1.4 Scope

The scopes of this study are divided into:

i) Admin. The role of an admin is to login the application to make changes.

Admin can control user data and do the application maintenance.

ii) User. User is only limited to student in UniSZA. User can use this

application to input their daily income and expenses to manage their

financial.

iii) Android Based. This application will be develop for mobile devices that

used Android operating system.

Page 21: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

5

1.5 Expected Outcomes

The expected outcomes of the Wise Budget Manager for Unisza’s Student

Mobile Application after completing the development process is it can simplify and

precise enough to keep track of students’ expenses and budgeting. The application will

show to the users how much they enter for particular spending. The information entered

will be stored in the database. They may freely see their past daily spending in the

application. Lastly, report is generated by retrieving the data from the database to show

to the users that would like to be aware to their personal budget status.

1.6 Summary

The details introduction of Wise Budget Manager for Unisza’s Student Mobile

Application has been discussed in this chapter. The sub chapter of the chapter which

includes problem statement, objectives, scope, expected outcomes and the project

planning of the application were mentioned above.

Page 22: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

6

CHAPTER 2

LITERATURE REVIEW

2.1 Introduction

This topic focused on the work or research that relate either directly or indirectly

to the project. This topic is also important to develop the project. The reason is it

contains a lot of information that gives benefit in the process of development of the

project. This topic can assist by understanding the application details while help in

determining the best approach to the development of the application.

Wise Budget Manager for Unisza’s Student Mobile Application is the

combination of many current applications that has been exist in the market nowadays.

The function is to manage students’ income and expenses. It helps students to control

themselves in spending.

2.2 Related Applications

2.2.1 Existing Software (Mint)

There are a lot of people all around the world who may not paying attention to

their finances. They spent their money without knowing how much money they used

Page 23: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

7

for their necessities and how much money they wasted according to their intention and

desire. So, the Mint’s company find a solution about what they should do to overcome

this problem to remind users spending. They develop ‘Mint’ which is a budgeting

software which is develop to track money spending. It is a server-based web, but this

software can also be use by user through their PC and smartphone.

This software essential features are it can keep track of user’s spending and

allocating income to various budgeting categories. User can separate their needs which

he or she can plan to save for a vacation, put away money for a down payment on a

house. It also has built-in calculators which can help user establish a plan that will work

to meet their goals.

Moreover, Mint also has bill-paying feature which are online and offline. Its

purpose is to help user pay bills on time within the context of your financial transactions.

In online bills, the service has two specific functions which are it will find bills the user

are already routinely paying and reminds user the amount before they are due. Then, it

gives user convenience that lets user schedule bill payments. Besides, user also can

manually add offline bills such as regular payments for housekeeping service, utilities

bills and others. User will be reminded of them before they are due just as online bills.

The total of user’s bills due for the month appears to the user every month.

Lastly, this software will give an alert to make sure users are paying attention

and keeping track of their finances. It will give user a big picture view of the financial

situation which shows all recent transactions, user’s account totals, monthly budget and

even alerts for when user go over budget.

Page 24: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

8

2.2.2 Existing Application (You Need A Budget)

You need A Budget (YNAB) is a system that can help users to create a budget

for their own. The advantages of this system are the system can help user to gather the

remainder (where the income minus spending) to be carried to the next month. This

remainder is called budget buffer which can effect to take the user off living paycheck-

to-paycheck (user spend all the money and he or she does not save money before

receiving next paycheck). Next, the system also can help the users to create various

savings funds whether they are for emergencies, annual taxes and holiday spending. It

also has the feature that force user to reduce users’ budget if overspend. It has the

package that will warn users by telling the users not to do it and then, it will deduct it

from the next month’s available funds.

But, it also has it disadvantages which are user need to pay high amount of fees

in order to purchase this software after finish one-month free trial. Moreover, user also

unable to control in multicurrency which means user need to select the currency type

before create new budget. It is not good for users who have more than one currency in

their hands. For an example, a Singaporean has SGD and MYR in his hands, when he

travels to Malaysia, he need to spend the money with MYR not SGD. So, it will let

users to confuse what currency should they choose in the budget.

As a conclusion, YNAB is a really nice system that helps users a lot in planning

their budget. It not only provides the features such as key-in the income and spending,

but also let the users to control budget freely. It also can show all reports that users’

average spending and income.

Page 25: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

9

2.2.3 Existing Application (Spending Tracker)

Spending Tracker is an application which is an easy-to-use personal finance

application that assists users in manually tracking their spending and saving habits. It

can run in both Android and iOS. It also compatible with Windows operating system.

It come with features which have four options that are spending, transactions,

categories and settings. In the settings option, user can enter some of preferences

regarding user’s cash flow and budgeting. This application also has option for user to

operate in ‘Budget Mode’ where it will allow user to set a specific spending limit for

each time period. Besides, balance carry over is one of the best features which can help

user to determine whether the remaining balance at the end of one-month time period

is carried over to the next time period. In addition, user can add multiple accounts which

user can specify for having saving account and account from which the user spend

money.

To summarize, the application is very useful for individuals trying to simply

track their expenses. It lets user to input their income and expenses manually and can

be easily analyse the cash flow over time.

2.2.4 Existing Application (Income and Expense Tracker)

Income and Expense Tracker is an application which is helpful to manage out

income and expense as a daily or periodically or else whenever. It also acts as an

Page 26: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

10

indicator or reminder the things user need to do for the end of month and what are the

payments that user has to pay for the particular month.

This application will help user to make a note for what or the things he or she

need to do and expense for a month. For business people who is having some multi

business, the income features of this application can help user to divide and store all the

income and manage the income for each month to be finalize. Furthermore, it also has

features like add expense, add income, export expense, export income and view expense

categories to help user manage income and expenses has been done each month. But,

this application will be an unpopulated data because it has some disadvantages by not

alerting a person for each and every month.

To conclude, this application developed work efficiently which it has

successfully avoids the manual calculation the income and expense per month. It also

come with simple concept which is like simple message storing mechanism combined

with reminder to remind in a particular day.

2.3 JSON

Mobile and web applications expecting an external data in JSON format. Hence,

converting MYSQL data into JSON format is something that developers usually did on

a regular basis. JSON is very fast and it became the most popular data format in server

or browser communication. It is quite simple, easy and light-weight format for

exchanging and storing data from and to database. Moreover, it is also human readable

which is easy for developer to generate and parse.

Page 27: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

11

JSON is an alternative for XML (Extensible Mark-up Language) which took it

place to run with its different easy and fast operating characteristics. JSON file format

plays an absolutely necessary which is an important role in present mobile and web

application development paradigm. Data from MySQL Database can be easily

converted into JSON format using PHP.

Figure 2.1 JSON Framework

Page 28: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

12

2.4 Conclusion

As discussed above, all existing applications, software and system have their

own strength and abilities but, there are still weakness. If there are little changes to the

existing application, it can improve a lot of things and functions by developing new

application.

JSON is the most popular technique which commonly used in the mobile

applications. So, I have decided to apply JSON technique in my application

development. I want to apply JSON to convert MySQL data using PHP in my mobile

application development. It is because JSON offers very useful method. The concept of

two languages (e.g. PHP and JavaScript) used, both need a language that understandable

to communicate. It is called JSON which is common language solely used for

communication. The method of using JSON can translate back and forth in order to

communicate while sending each other information. It converts the normal data into

much lighter significant format which can be easily accessible from android mobile

phones via parsing process. When Android application execute, it will connect Android

device to PHP script. Then, PHP script will fetch data from database. Next, it will

encode in into JSON format and send it to the device. Lastly, when Android application

get these encoded data, it will parse the data and display it on Android device.

In addition, it also has method that accepts a JavaScript object as a parameter

and outputs back a string with JSON format. This is very useful when we want to send

data back to the server. So, JSON is better at helping procedural decisions in mobile

application development.

Page 29: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

13

CHAPTER 3

METHODOLOGY

3.1 Methodology Chosen

In order to develop Wise Budget Manager for Unisza’s Student Mobile

Application, the methodologies that are going to use are Waterfall SDLC (System

Development Life Cycle) model and the Incremental Prototyping. This section consists

of how both the methodologies will be implemented in the project The phase involved

in the development would be based on the SDLC that are Planning, Analysis, Design

and Implementation.

3.1.1 Phase 1: Planning

Planning is the most important task in creating a software product. The

developer need to think carefully on how the project will be develop because once the

developer plans it wrongly, the whole system will be in such a big trouble. The project

involves the use of schedule such as Gantt chart to plan and subsequently report the

progress along the project execution.

Page 30: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

14

In this stage, planning on how this system looks like would be the priority

activity. Firstly, research on the existing system will be made in order to analyse, learn

and gather more details about mobile application that will be develop. Then, an

interview was carried out in order to get opinion and information from different users.

Next, project time planning is very critical in this project. Duration for each

activity in the development process must be specified in this stage. The time for each

activity must be plan and allocate it wisely. If not, the system development will not able

to be completed on time.

The developer will identify the tasks after verifying the requirements with the

users. This is very important process because it can determine the dependency of all

processes in the system for the system to operate smoothly thus reducing efficiency and

effectiveness. Below is the Gantt chart that has been created in this stage.

Page 31: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

15

No. Tasks 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

2.3 Methodology Chosen

3 Design Phase

3.1 Process Design

3.2 Database Design

3.3 Interface Design

4 Implementation Phase

4.1 Develop Database

4.2 User Module

4.3 System Functionalities

5 Testing Phase

5.1 System Testing

5.2 User Testing

6 Deployment Phase

Table 3.1 Gantt Chart

Page 32: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

16

3.1.2 Phase 2: Analysis

In this stage, all kind of information and requirements that are related to the

application to be develop are gathered from the target users. The purpose of these

activities is to understand more about the existing work flow before developing a system

that suits to ‘Wise Budget Manager for Unisza’s Student Mobile Application’. From

the previous stage (planning), the requirement study can only provide the conceptual

idea of this system. In addition, studies of the existing system in term of its processes,

problems and solutions should be in more details. By doing this analysis, the developer

will be able to understand how the work and task should be done through the studies to

have desired results.

Next, after studying the requirements in full detail, a finalized requirement

document can be produced. The document can be updated anytime since users’

requirements may change from time to time. Besides, the developer need to keep on

doing research in order to match with the users’ requirements

Before moving to the next phase, a few work flow diagrams will be constructed.

The diagrams will help developer to give clearer idea while developing the system. The

diagrams include Data Flow Diagram (DFD), Entity Relationship Diagram (ERD), use

case diagram and context diagram.

Page 33: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

17

Level 0

Figure 3.2 Context Diagram of Application

Figure 3.2 shows the main process of how Wise Budget Manager (WBM) work.

There are only two entities involves which are User and Admin. The role of admin is

that he can manage the data about the user and do maintenance of the application. The

admin does not need to register his profile in order to use the application as their data

information already inserted into the database in back-end development. So, the admin

only need to log in through the application by id and password.

While user need to register first their profile in order to use the application. Then

only he or she can log in into the application and input their income and expenses.

Wise Budget Manager for

Unisza’s Student Mobile

Application

0

User

Login

request

login

Login Message

Input income

Request

Report

Login Message

Expense updated message

Report details

Admin

login

Login Message

Manage

Maintain

User Information

Income updated message

Message

Input

expense

Page 34: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

18

Level 0

Data Flow Diagram Level 0

Figure 3.3 DFD of Application Level 0

Figure 3.3 shows the overview process of WBM application. The application

carried out four main processes. Firstly, log into system. Then, manage income and

expense. Lastly, show report to the user.

User

login

User

Login Message 1.0

login

Login Message Login to

system

Login Request

login

Login Message

Invalid Password

D1 User

login

Login Message

User

Password

Manage

Income

2.0

login

Login Message

User

Authorization

Input Income

D2 Income

login

User

Login Message

Update

Income

4.0

login

User

Login Message Generate

Report

Input Expense

Generate Report

Income Details

3.0

login

Login Message Manage

Expense

D3 Expense

login

User

Login Message

User

Authorization

User

Authorization

Update

Expense

Expense Details

Page 35: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

19

Level 1

1.0 Log into System

Figure 3.4 DFD Level 1

Figure 3.4 shows the login process of the system application in more detail. User

need to input their details in order to use the application. Then only he or she authorized

to use the application.

User

login

User

Login Message

New User

Registration

1.1

login

Login Message

D1 User

login

User

Login Message

Verify

Registration

Form

1.2

login

Login Message

1.3

login

Login Message Verify

Username

Password

1.5

login

User

Login Message Log into

system

Registration

request Registration

form

Valid

registration

form

Invalid registration

form

Username

Password

Details

Valid

Username

Password Access

Request

Valid Access

Authorization

Invalid

Username

Password

1.4

login

Login Message Username

Password

Recovery

D1 User

login

Login Message

Username

Password

Details

Page 36: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

20

Level 2

2.0 Input Income into System

Figure 3.5 DFD Level 2 Manage Income

Figure 3.5 shows the income management process in more detail. User can input

their income and edit their income. Also, they can delete it if needed.

Add new

income

User

login

User

Login Message

2.1 Access

authorization 2.2

Verify new

income

New income

form

Invalid new

income form

D2 Income

login

Login Message

Insert new

income

information

2.3 2.4

Edit Income

Form

Edit Income

Income

Information

Details

Income

Identification

Id

Edit User

Income

Delete

Income

2.5

Verify Edit

Income Form Invalid Form

Edit Income

Form

Update

Income

Delete User

Income

2.6

Page 37: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

21

Level 2

3.0 Input Expense into System

Figure 3.6 DFD Level 2 Manage Expense

Figure 3.6 shows the expense management process in more detail. User can

input their expense and edit their expense. Also, they can delete it if needed.

Add new

expense

User

login

User

Login Message

3.1 Access

authorization 3.2

Verify new

expense

New

expense form

Invalid new

expense form

D3 Expense

login

Login Message

Insert new

Expense

information

3.3 3.4

Edit Expense

Form

Edit Expense

Expense

Information

Details

Expense

Identification

Id

Edit User

Expense

Delete

Expense

3.5

Verify Edit

Expense Form Invalid Form

Edit Expense

Form

Update

Expense

Delete User

Expense

3.6

Page 38: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

22

Level 2

4.0 Report Generation

Figure 3.7 DFD Level 2 Report Generation

Figure 3.7 shows the process of report generation in more detail. After retrieving

data from income and expense table, user can view the report details of their income

and expenses.

Generate

Report

User

login

User

Login Message

4.1

Request

Report

D3 Expense

login

Login Message

Expense

Information

Details

View Report Details

D2 Income

login

Login Message Income

Information

Details

View Report Details

Page 39: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

23

Figure 3.8 Entity Relationship Diagram

As Figure 3.8 shows, there are four entities designed named User, Income,

Expense and Admin represented tables in the database. The relationship between the

entities explains the process that will be carried out by each entity.

3.1.3 Phase 3: Design

In this stage, the system work flow, program design, interface design and

database structure of the system are created. The system work flow based on the

requirements documentation from previous phase has to be designed carefully. After

the first version of system work flow is created, the developer will present it to the users

to get users’ feedbacks and confirmation. If the users do not satisfy with the result, the

User

user_id user_name

input Income

inc_type inc_id inc_date user_pwd

Admin

managed by

admin_pwd admin_name admin_id

inc_desc inc_amt

1 M

1

1 1

M

Expense

exp_id exp_type exp_dat

e

exp_desc exp_amt

1

M

Page 40: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

24

system work flow will be redesign and modified. Then, the developer will present it

again to them until they satisfy with the result.

Next, for program and interface design, a first version of prototype will be

created according to the users’ requirements. This prototype will be presented to the

users in order to get user opinions. Once the users point out what they do not like and

what they really want in this system, then the prototype will be redesign again.

Lastly, database structure is created. The tables in the database have to be

organized properly so that the data retrieval can be work efficiently. Normalization on

the database is required in order to avoid time consuming while retrieving the data.

3.1.4 Phase 4: Implementation

This stage can be considered as complicated process. During implementation,

the tasks as following will be included: Implementing Wise Budget Manager for

Unisza’s Student Mobile Application in Android Studio, Implementing database in

SQLite and System Testing.

Implementing using Android Studio

A powerful compiler is needed to support the whole system application of Wise Budget

Manager for Unisza’s Student Mobile Application. Android Studio has been chosen

because it has features that can support Graphic User Interface, code editor and can run

Page 41: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

25

an emulator. Development of an application is quick and easy to be used hence it can

just simply drag and drop the controls to the forms to design.

Implementing database in SQLite

SQLite will be use in order to create database in Android development. SQLite is an

open source SQL database that stores data to a text file on a device while Android comes

with built in SQLite database implementation.

System Testing

Testing will be done after several functionalities are completed. This will allow the

developer to keep track the errors in this system. It could be easier to fix the errors when

the system does not consist too much of coding. It will help the developer to save a lot

of time while developing the system.

3.2 Project Requirement

Project requirement contains of two parts which are software requirement and

hardware requirement. The requirements in this project are needed to ensure the

completion of processes are well covered. Hence, every aspect requirement needed

during implementation chapter need to be analyse simultaneously to ascertain the

correct usage of the application.

Page 42: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

26

3.2.1 Software Requirement

List of software needed:

No. Software Purpose

1. Android Studio Used to code the core program of the project. It

debugs, run and test the application.

2. Notepad++ Used to code the program especially connection of

application to the database.

3. XAMPP Local Server.

4. Java, PHP, XML Programming language used.

5. MySQL Database ,

SQLite Manager

Database for the system application.

6. Microsoft Word 2016 Used to do the documentation of application.

7. Google Chrome A browser to run the localhost and searching for

information.

Table 3.2 List of software requirement

Page 43: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

27

3.2.2 Hardware Requirement

There are some requirements which are as stated below:

No. Hardware Minimum Recommended

PC

1. CPU Intel Core i3 Intel Core i5

2. RAM 4GB 8GB

3. Hard Drive 100GB 150GB or more

Mobile Phone

1. CPU Quad Core 1.6GHz Octa Core 2.0GHz

2. Memory 16GB 32GB

Table 3.3 List of hardware requirement

Page 44: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

28

3.3 Framework Design

Figure 3.9 Application Framework Design

Page 45: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

29

3.4 Method/technique

3.4.1 JSON

JSON is short for JavaScript Object Notation. It is a lightweight data-

interchange format. It is a minimal, readable format for structuring data. It is used

primarily to transmit data between a server and web application, as an alternative to

XML. JSON is a way to store information in an organized, easy-to-access manner. It

gives us a human-readable collection of data that we can access in really logical manner.

It is also easy for machines to parse and generate data.

JSON is a text format that is completely language independent but uses

conventions that are familiar to programmers of C-family languages such as C, C++,

C#, Java, JavaScript, Perl, Python and others. These properties make JSON as an ideal

data-interchange language.

JSON is built on two structures. First, structure of collection of name or value

pairs. In various language, this is realized as an object, record, struct, dictionary, hash

table, keyed list or associative array. Second, structure of an ordered list of values. In

most language, this is realized as an array, vector, list or sequence. Thus, these are

universal data structures. In addition, all modern programming languages support them

in one form or another virtually. It makes sense that a data format which is

interchangeable with programming languages also be based on these structures.

Page 46: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

30

Figure 3.10 JSON sample syntax of storing data

Figure 3.10 shows a simple example of storing JSON data. This creates an object

that we access using the variable jason. By enclosing the variable’s value in curly

bracket, it should be indicating that the value is an object. Inside the object, it should be

declaring any number of properties using a “name”: “value” pairing, separated by

commas. To access the information stored in Jason, it can simply refer to the name of

the property needed. For instance, use the following snippets to access information as

below:

Figure 3.11 JSON sample syntax of accessing information

Page 47: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

31

CHAPTER 4

IMPLEMENTATION AND RESULT

4.1 Implementation and Output

4.1.1 Interfaces

Figure 4.1 Application Sample Prototype: Home Interface

Page 48: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

32

Figure 4.2 Application Sample Prototype: Log in Interface

Figure 4.3 Application Sample Prototype: Registration Interface

Page 49: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

33

REFERENCES

1. P.Thanapal’, Mohammed Yaseen Patel, T.P. Lokesh Raj, J.Satheesh Kumar.

Vol 8(S2)(2015). Income and Expense Tracker, Indian Journal of Science and

Technology, 118-122.

2. Angad Manchanda. (2012) Expense Tracker Mobile Application. San Diego

State University, California, United States.

3. Mecham. J (2010). You Need A Budget, Createspace Independent Pub

4. Laura Sanicola. “My budgeting app is judging me.” CNN Money (New York) 8

Nov. 2017

5. Jaclyn N. McClellan. “Spending Tracker.” Computerized Investing 21 Feb.

2015

6. Ralf Sternberg. (2013, Apr 18) A Fast and Minimal JSON Parser for Java.

Eclipse Source News. Retrieved from

https://eclipsesource.com/blogs/2013/04/18/minimal-json-parser-for-java/

[Accessed 15 May 2018].

7. Freeman. J (2017, Sep 7) What is JSON? JavaScript Object Notation

explained. InfoWorld. Retrieved from

https://www.infoworld.com/article/3222851/javascript/what-is-json-javascript-

object-notation-explained.html [Accessed 15 May 2018].

8. Json.org. (2018). JSON. [online] Available at: https://www.json.org/

[Accessed 17 May 2018].

Page 50: WISE BUDGET MANAGER FOR UNISZA’S · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing) with

34

9. Squarespace. (2018). Build a Website. [online] Available at:

https://developers.squarespace.com/what-is-json/ [Accessed 17 May 2018].

10. Copter Labs. (2018). JSON: What It Is, How It Works, & How to Use It -

Copter Labs. [online] Available at: https://www.copterlabs.com/json-what-it-

is-how-it-works-how-to-use-it/ [Accessed 17 May 2018].