+ All Categories
Home > Documents > WISE BUDGET MANAGER FOR UNISZA’S STUDENT · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE...

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

Date post: 17-Nov-2020
Category:
Upload: others
View: 6 times
Download: 0 times
Share this document with a friend
76
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
Page 1: WISE BUDGET MANAGER FOR UNISZA’S STUDENT · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing)

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 STUDENT · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing)

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

AUGUST 2018

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

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

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

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

ii

CONFIRMATION

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 Honours in

Universiti Sultan Zainal Abidin (UniSZA).

________________________________

Supervisor: Mr. Mat Atar bin Mat Amin

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

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

iii

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 6: WISE BUDGET MANAGER FOR UNISZA’S STUDENT · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing)

iv

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. At the end of this project,

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 7: WISE BUDGET MANAGER FOR UNISZA’S STUDENT · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing)

v

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.

Kini, masalah biasa yang dihadapi oleh pelajar adalah mereka tidak menjejaki

dan merekod perbelanjaan harian mereka sehingga mereka tidak tahu dan lupa ke

mana wang itu menghilang. Di samping itu, mereka tidak mahir 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 tambahan pula mereka

kurang pengetahuan dalam bidang mengurus kewangan.

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

dapat menjejaki perbelanjaan dan belanjawan pelajar. Pada akhir projek ini, 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

dengan mengambil semula data dari pangkalan data untuk dipaparkan kepada

pengguna yang ingin mengetahui status belanjawan peribadi mereka.

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

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 ABBREVIATIONS x

LIST OF APPENDICES xi

CHAPTER I INTRODUCTION

1.1 Background 1

1.2 Problem Statement 3

1.3 Objectives 4

1.4 Scope 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) 10

2.2.4 Existing Application (Income and Expense

Tracker)

11

2.3 JSON 13

2.4 Summary 14

CHAPTER III METHODOLOGY

3.1 Methodology Chosen 15

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

vii

3.1.1 Phase 1: Planning 15

3.1.2 Phase 2: Analysis 18

3.1.3 Phase 3: Design 27

3.1.4 Phase 4: Implementation 27

3.2 Project Requirement 29

3.2.1 Software Requirement 29

3.2.2 Hardware Requirement 30

3.3 Framework Design 31

3.4 Proof of Concept 32

3.4.1 Method/technique 32

3.4.2 Mobile Computing 33

3.5 Summary 34

CHAPTER IV IMPLEMENTATION

4.1 Implementation and Output 35

4.1.1 Introduction 35

4.1.2 Interfaces 37

4.2 Testing and Result 45

4.2.1 Introduction 45

4.2.2 Testing Analysis 46

4.2.2.1 Black Box Testing 47

4.2.2.2 White Box Testing 47

4.2.3 Test Result and Analysis 48

4.2.4 Test Case 50

4.2.5 Results 56

4.3 Summary 56

CHAPTER V RESULT AND CONCLUSION

5.1 Discussion 58

5.2 System Constraints 59

5.3 Future Work 60

5.4 Conclusion 60

REFERENCE 62

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

viii

LIST OF TABLES

TABLE TITLE PAGE

3.1 Gantt Chart 17

3.2 Data Dictionary 26

3.3 List of software requirement 29

3.4 List of hardware requirement 30

4.1 Login for user interface input-output design 37

4.2 Registration for user interface input-output design 38

4.3 Home page for user interface input-output design 40

4.4 Expense page for user interface input-output design 41

4.5 Income page for user interface input-output design 42

4.6 Dashboard page for user interface input-output design 43

4.7 Report page for user interface input-output design 44

4.8 Profile page for user interface input-output design 45

4.9 Test Case for Successful of open the Application 50

4.10 Test Case for Unsuccessful of open the Application 50

4.11 Test Case for Successful Login for User 51

4.12 Test Case for Unsuccessful Login for User 52

4.13 Test Case for Successful User Input Information 54

4.14 Test Case for Successful User Update Information 56

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

ix

LIST OF FIGURES

FIGURE TITLE PAGE

2.1

2.2

2.3

Best Personal finance apps to invest in for the New Year!

Best Personal finance apps to invest in for the New Year!

Computerized Investing

8

9

11

2.4

2.5

Income and Expense Tracker

JSON Framework

12

13

3.2 Context Diagram of Application 19

3.3 DFD of Application Level 0 20

3.4 DFD of Application Level 1 21

3.5 DFD Level 2 Manage Income 22

3.6 DFD Level 2 Manage Expense 23

3.7 DFD Level 2 Report Generation 24

3.8 Entity Relationship Diagram 25

3.9 Application Framework Design 31

3.10 JSON sample syntax of storing data 33

3.11 JSON sample syntax of accessing information 33

4.1 First Interface of application for user site: Login Interface 37

4.2 Second Interface of application for user site: Registration

Interface

38

4.3 Third Interface of application for user site: Home Interface 39

4.4 Fourth Interface of application for user site: Expense

Interface

40

4.5 Fifth Interface of application for user site: Income

Interface

41

4.6 Sixth Interface of application for user site: Dashboard

Interface

42

4.7 Seven Interface of application for user site: Report

Interface

43

4.8 Eight Interface of application for user site: Profile

Interface

44

4.9 The Application works well 48

4.10 The Log in process for user 49

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

x

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

PHP Hypertext Preprocessor

IDE Integrated Development Environment

LAN Local Area Network

WWAN Wireless Wide Area Network

WLAN Wireless Local Area Network

Wi-Fi Wireless Fidelity

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

xi

LIST OF APPENDICES

APPENDIX TITLE PAGE

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

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 15: WISE BUDGET MANAGER FOR UNISZA’S STUDENT · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing)

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 16: WISE BUDGET MANAGER FOR UNISZA’S STUDENT · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing)

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 17: WISE BUDGET MANAGER FOR UNISZA’S STUDENT · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing)

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 18: WISE BUDGET MANAGER FOR UNISZA’S STUDENT · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing)

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 19: WISE BUDGET MANAGER FOR UNISZA’S STUDENT · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing)

6

CHAPTER II

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 20: WISE BUDGET MANAGER FOR UNISZA’S STUDENT · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing)

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 [6]. 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 21: WISE BUDGET MANAGER FOR UNISZA’S STUDENT · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing)

8

Figure 2.1 Best Personal finance apps to invest in for the New Year! (Gil, 2016)

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) [8]. 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.

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

9

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.

Figure 2.2 Best Personal finance apps to invest in for the New Year! (Gil, 2016)

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

10

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 [4]. 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.

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

11

Figure 2.3 Computerized Investing (Jaclyn N. McClellan, 2015)

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

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 [9]. Furthermore, it also

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

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

12

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.

Figure 2.4 Income and Expense Tracker (P.Thanapal et. al, 2015)

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

13

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.

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.5 JSON Framework

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

14

2.4 Summary

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 28: WISE BUDGET MANAGER FOR UNISZA’S STUDENT · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing)

15

CHAPTER III

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 29: WISE BUDGET MANAGER FOR UNISZA’S STUDENT · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing)

16

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 30: WISE BUDGET MANAGER FOR UNISZA’S STUDENT · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing)

17

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 31: WISE BUDGET MANAGER FOR UNISZA’S STUDENT · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing)

18

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 32: WISE BUDGET MANAGER FOR UNISZA’S STUDENT · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing)

19

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 33: WISE BUDGET MANAGER FOR UNISZA’S STUDENT · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing)

20

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 34: WISE BUDGET MANAGER FOR UNISZA’S STUDENT · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing)

21

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 35: WISE BUDGET MANAGER FOR UNISZA’S STUDENT · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing)

22

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 36: WISE BUDGET MANAGER FOR UNISZA’S STUDENT · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing)

23

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 37: WISE BUDGET MANAGER FOR UNISZA’S STUDENT · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing)

24

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 38: WISE BUDGET MANAGER FOR UNISZA’S STUDENT · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing)

25

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.

User

user_id name

input Income

inc_type inc_id inc_date username

Admin

managed by

admin_pwd admin_name admin_id

inc_description inc_amount

1 M

1

1 1

M

Expense

exp_id exp_type exp_date

e

exp_description exp_amount

1

M

email password

photo

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

26

Entity Attribute Explanation Data Type Size Remark

user user_id Identification of user INT 10 PK

name Name of user TEXT

username Username of user VARCHAR 20

email Email of user TEXT

password Password of user VARCHAR 20

photo Photo of user TEXT

expense exp_id Identification of

expense

INT 50 PK

exp_type Type of expense TEXT

exp_amount Amount of expense VARCHAR 20

exp_description Description of expense VARCHAR 100

exp_date Date of expense DATE

exp_time Time of expense TIME

income inc id Identification of

income

INT 50 PK

inc_type Type of income TEXT

inc_amount Amount of income VARCHAR 20

inc_description Description of income VARCHAR 100

Table 3.2 Data Dictionary

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

27

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

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

MySQL and System Testing.

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

28

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

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 MySQL

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

open source SQL database which the core of it is MySQL server. The server handles all

of the database commands which is available as a separate program used in a client-

server environment and the library can be linked into separate applications.

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.

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

29

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.

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 , 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.3 List of software requirement

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

30

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.4 List of hardware requirement

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

31

3.3 Framework Design

Figure 3.9 Application Framework Design

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

32

3.4 Proof of Concept

3.4.1 Method/technique

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 STUDENT · WISE BUDGET MANAGER FOR UNISZA’S STUDENT MOBILE APPLICATION MOHAMAD IKHMAL BIN ISMAIL Bachelor of Computer Science (Internet Computing)

33

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

3.4.2 Mobile Computing

Mobile computing refers to devices that allow people to access data and

information. The key advantage of mobile computing is convenience, allowing users

access to information and computational resources anywhere and anytime. It also can

be called as “human-computer interaction” which it can transport data, voice and video

over a network via a mobile device. It can be connected to the internet through LAN or

wireless technology such as Wi-Fi, WWAN and WLAN.

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

34

Mobile devices include cell phones and portable devices such as laptops

smartphones, tablets and wearable computers. While, mobile applications are mostly

watered down versions of web applications and computer applications. However, a

reversal is in the offing with smartphones are most likely to deliver more versatile and

full featured suite of internet applications.

Therefore, mobile computing can give a lot of benefits to the users. In term of

connectivity, users can stay connected to all sources at all times. While in social

engagement, a user can interact with a variety of users via the internet. In future, people

need to be ready to adapt with changes and bring about a whole set of new ideas to keep

on expanding in line with technologies.

3.5 Summary

To conclude, this entire chapter includes methodology to be implement in the

project. The planning of the project has been scheduled and allocated wisely to make

sure the system is able to be completed on time. The developer also has already

identified the project requirements to make sure the system application smoothly

operate without having any difficulties.

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

35

CHAPTER IV

IMPLEMENTATION

4.1 Implementation and Output

4.1.1 Introduction

This project is implemented using Android Studio which used to develop an

android application. This software is integrated to Integrated Development

Environment (IDE) which could help all the developers to code, design, test, debug

using smartphone and lastly to execute the all main processes of the project running the

application. Besides, this project uses Extensible Markup Language (XML) to design

the application which combine with Java language to make the application functions

well. It also uses Hypertext Preprocessor (PHP) language to execute requested file by

PHP runtime. This language also used to connect program in the Android Studio to the

MySQL database.

The core of the project is to focus on User site only. The users’ functions are

they can log into the application and select expense or income to be insert. After they

insert all the needed input, they can view it and the application will generate report base

on their income and expenses behaviour. Whereas Admin’s function is to log in the

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

36

application, controlling the application by Insert or Update new features and make some

changes of the application.

Testing and implementation are described to develop the system as a specific

design which are discussed early in the previous chapter. It is also verified to make sure

the application fulfils the user requirements and runs smoothly with error-free. This

chapter should be completed before the development of the application is finish. It will

cover entire of this chapter with testing the program on the mobile application

accurately.

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

37

4.1.2 Interfaces

Figure 4.1 First Interface of application for user site: Login Interface

The figure shows the interface of login activity for user site. User needs to input

their username and password in order to log into the application.

Input Process Output

Username

(Text field)

Password

(Text field)

User inserts both

username and

password data on

provided field.

If both username and password are valid, then

the home page will be displayed.

If both username and password entered are

wrong and invalid, then the user cannot log in.

Table 4.1 Login for user interface input-output design

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

38

Figure 4.2 Second Interface of application for user site: Registration Interface

The figure shows the interface of registration activity for user site. User needs

to input their name, username, email, password and confirm password to register for

using the application.

Input Process Output

Name (Text field)

Username (Text field)

Email (Text field)

Password (Text field)

Confirm password

(Text field)

User inserts name,

username, email,

password and

confirm password

data on provided

field.

If name, username, email, password

and confirm password are valid, then

the login page will be displayed.

If name, username, email, password

and confirm password entered are

wrong and invalid, then the user

registration is unsuccessful.

Table 4.2 Registration for user interface input-output design

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

39

Figure 4.3 Third Interface of application for user site: Home Interface

The figure shows the interface of homepage activity for user site. User can select

by tapping the activity to choose what to do.

Input Process Output

Expense

(Image button)

Income (Image

button)

Profile (Image

button)

Dashboard

(Image button)

User must choose to

select only an

activity which are

Expense, Income,

Profile, Dashboard,

Report and Logout.

If user click on “Expense”, then it will go to

the Expense page which will be appeared.

If user click on “Income”, then it will go to

the Income page which will be appeared.

If user click on “Profile”, then it will go to

the Profile page which will be appeared.

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

40

Report (Image

button)

Logout

(Button)

If user click on “Dashboard”, then it will go

to the Dashboard page which will be

appeared.

If user click on “Report”, then it will go to

the Report page which will be appeared.

If user click on “Logout”, then it will return

to the Login page.

Table 4.3 Home page for user interface input-output design

Figure 4.4 Fourth Interface of application for user site: Expense Interface

The figure shows the interface of expense activity for user site. User can insert

their expenses in the provided fields.

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

41

Input Process Output

Expense type (dropdown field)

Expense Amount (Text field)

Expense Description (Text field)

Date (Text field and button)

Time (Text field and button)

Add Expense (Button)

User needs to insert their

expenses (Expense type,

Expense amount, Expense

description, Expense date

and Expense time) data

into the provided field.

If user has insert all

the provided fields,

then the user clicks

on “Add Expense”,

the data inserted will

be insert into the

database.

Table 4.4 Expense page for user interface input-output design

Figure 4.5 Fifth Interface of application for user site: Income Interface

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

42

The figure shows the interface of income activity for user site. User can insert

their income in the provided field.

Input Process Output

Income Amount (Text

field)

Add Income (Button)

User needs to insert

their income (Income

Amount) data into

the provided field.

If user has insert into the provided

field, then the user clicks on “Add

Income”, the data inserted will be

insert into the database.

Table 4.5 Income page for user interface input-output design

Figure 4.6 Sixth Interface of application for user site: Dashboard Interface

The figure shows the interface of dashboard activity for user site. User can view

their income and expenses in this page.

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

43

Input Process Output

Tap on screen

and scroll

Tap on screen and scroll to

view income and expenses.

The details of income and expenses

inserted will be displayed.

Table 4.6 Dashboard page for user interface input-output design

Figure 4.7 Seven Interface of application for user site: Report Interface

The figure shows the interface of report activity for user site. User can view their

expenses report in this page.

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

44

Input Process Output

Tap on screen Tap on screen and scroll to

view user expenses.

The details of expenses inserted will

be displayed in pie chart.

Table 4.7 Report page for user interface input-output design

Figure 4.8 Eight Interface of application for user site: Profile Interface

The figure shows the interface of profile activity for user site. User can view

their profile and edit or update their name, username, email and password in this page.

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

45

Input Process Output

Photo (Image field)

Name (Text field)

Username (Text field)

Email (Text field)

Password (Text field)

Edit (Icon)

Save (Icon)

User can update their

profile (Photo, Name,

Username, Email and

Password) on the

provided fields.

If user clicks on “Edit Photo”, user

can upload their photo from

internal or external site

The information of user’s profile

can be updated if user clicks on

“Edit” and click “Save”.

Table 4.8 Profile page for user interface input-output design

4.2 Testing and Result

4.2.1 Introduction

Test case is a set of conditions or variables under which a tester will determine

whether a system or software under test satisfies requirements and functions properly.

The process of carry out test cases can also help find problems in the requirements or

design of a software application. It guides through the steps of the test which can define

test case as a set of step-by-step instructions to verify something behaves as it is required

to behave. The test case for log in, register new user, insert new data of income and

expenses, update user data and display all data of income and expenses. As a result, the

test case for main application which include the database for income and expenses.

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

46

4.2.2 Testing Analysis

Testing is a process rather than a single activity. It starts from test planning then

designing test cases, preparing for execution and evaluating status till the test closure.

Firstly, planning is to determine the scope and risks and identify the objectives of

testing. Control test is to measure and analyse the results of reviews and testing, monitor

test coverage, provide information on testing, initiate corrective actions and make

decisions. Second is an important phase which include analysis and design where

specifications are analysed and test cases designed. In this test phase, specifications are

analysed to understand what are the application’s functions.

This process advocates three step process. First is test conditions which verifies

a mall section of the functional specifications such as registration and login activities.

Second is test cases which is a set of inputs and expected outcome to verify the test

condition. Lastly, test procedure which is the actual sequence of actions or steps to

execute the test.

Third is implementation and execution. Test implementation is to develop and

prioritize test case by using techniques and create test data for those tests. Test

execution is to execute test suites and re-execute the test that previously failed in order

to confirm a fix. Then, compare actual results with expected results. Fourth is evaluating

and report. Evaluation is to check the test logs specified in test planning. Then, write a

test summary report. Fifth, test closure activities to check planned deliverables are

actually delivered.

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

47

4.2.2.1 Black Box Testing

Black Box Testing is a software testing method in which the design,

implementation details and knowledge of internal paths of the software being tested is

not known to the tester. These tests can be functional or non-functional. It also known

as Behavioural Testing. This test is entirely based of the software requirements and

specifications. For example, testing process were carried out with the test input and

output. The test is based on insert, update, delete and display the data.

4.2.2.2 White Box Testing

White Box Testing is a software testing method in which the internal structure,

design and implementation details being tested is known to the tester. It also known as

Clear Box Testing, Open Box Testing, Glass Box Testing, Transparent Box Testing,

Code Based Testing or Structural Testing. It focuses primarily on strengthening

security, the flow of inputs and outputs through the application and improving design

and usability. A tester usually he developer as well which studies the implementation

of codes of a certain field on software application. The testing involved a series of

predefined inputs against expected output. So, when the result produced is not as

expected, it must encounter a bug. For example, each forms are tested whether it can

fill and to check validation such as log in as user. The expected result will be checked

when the data input is view.

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

48

4.2.3 Test Result and Analysis

Figure 4.9 The Application works well

The figure shows the application work well and successful connection between

the database and the application. If there appear “no address associated with host

name”, it means that there is no internet connection. If it happened, user cannot enter

the application.

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

49

Figure 4.10 The Log in process for user

The figure shows that the username and password are already inserted by the

developer into the database to test the application. If the username and password are

correct, the user can go through to the next page after clicking the “Login” button. If

the username and password entered is incorrect, the user will be stuck at the login page.

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

50

4.2.4 Test Case

Test Case for Successful of open the Application

Step Test Procedure Expected Result

1. Open the application of

Wise Budget Manager.

The login page will be display and the pop-up

message is not appear.

Table 4.9 Test Case for Successful of open the Application

Test Case for Unsuccessful of open the Application

Step Test Procedure Expected Result

1. Open the application of

Wise Budget Manager.

The login page will be display and the pop-up

message “no address associated with host name”

appear.

Table 4.10 Test Case for Unsuccessful of open the Application

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

51

Test Case for Successful Login for User

Step Test Procedure Expected Result

1. Open the application of Wise

Budget Manager.

View login page.

2. User enters the following details:

Example input:

Username: ikhmal

Password: 123

3. User click “Login” button. Login is loaded. Login is successful.

The application will be directed to the

user home page.

Table 4.11 Test Case for Successful Login for User

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

52

Test Case for Unsuccessful Login for User

Step Test Procedure Expected Result

1. Open the application of Wise

Budget Manager.

View login page.

2. User enters the following details:

Example input:

Username: ikhmal

Password: 123

3. User click “Login” button. Login is loaded. Login is unsuccessful.

The application will be stuck on the

login page until user rechecks the

username and password entered are

correct.

Table 4.12 Test Case for Unsuccessful Login for User

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

53

Test Case for Successful User Input Information

Step Test Procedure Expected Result

1. User home page. View user home page:

Image button for Expense

Image button for Income

Image button for Dashboard

Image button for Report

Image Button for Profile

2. User clicks on Expense image

button

View list of provided fields of “Input

Expense” form.

3. User key in the “Input Expense”

form:

Suggested input:

Expense Type: Food

Expense Amount: 10

Expense Description: Bunnyster

Cafe

Expense Date: 2018/8/1

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

54

Expense Time: 01:48

4. User clicks “Add Expense” It will display pop-up “Input Success”

and the application will be redirected

to the home page.

Table 4.13 Test Case for Successful User Input Information

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

55

Test Case for Successful User Update Information

Step Test Procedure Expected Result

1. User home page. View user home page:

Image button for Expense

Image button for Income

Image button for Dashboard

Image button for Report

Image Button for Profile

2. User clicks on Profile image

button

View list of user’s information in the

provided fields.

3. User update the data:

Suggested input:

Name: Ikhmal

Username: ikhmal

Email: [email protected]

Password: 123

The written field can be updated.

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

56

4. User clicks “Edit” and “Save”

icon.

The page will be loaded and it will

display pop-up “Success”. Then, user

details updated data is saved.

Table 4.14 Test Case for Successful User Update Information

4.2.5 Results

The expected results after releasing the application Wise Budget Manager is user

should be able to enter their income and spending of how much he or she expense for a

particular day, week and month. The user also can view their present and past of their

spending. Finally, this application will generate reports in chart such as expenses record

in order to summarize the money transaction that taken place to show the user budget

status. While on admin site, they can view, update or delete the data of the application

in the back-end. The developer also expected that the software application may be

usable, function well and fulfil the user requirement standard.

4.3 Summary

To summarize, this entire chapter includes all parts of the application. The

developer shows the interfaces that has been developed for Wise Budget Manager

application. The developer also does include few pop-up message after the user does

certain activities. This pop-up message will help alerting the user with their action. The

important phase which is testing phase did by the developer by testing the application

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

57

in order to optimize the application target for the high level. The developer can identify

errors and it is fixed properly in order to improve the functionality off the system.

Lastly, the developer does testing from test conditions, test cases until the test procedure

which can verify the execution test. If there’s error, the developer will fix the bugs

immediately.

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

58

CHAPTER V

RESULT AND CONCLUSION

5.1 Discussion

By the end of this study, “Wise Budget Manager for UniSZA’s Student Mobile

Application” project is successfully achieving objectives which are to design an

attractive and simple interface application that helps users to access easily, develop a

systematic application that improves students’ financial management and implement an

application using JSON technique based on methods that were carried out.

At the very first stage of the project, the objectives and scopes of the project are

clearly defined. Then, the task and schedule for the project implementation was planned

carefully to avoid project’s delay incident occurs. Next, after obtaining the system

requirements, the design of this system application interfaces and database is carried

out. During the design phase, every interfaces were coded and enhance intensively to

achieve perfection and well functions. After the completion of this software application

development and implementation, this application was then tested to ensure it is well

executed.

This application contributes toward solving some of the problem due to lack of

awareness in controlling the money especially students itself. User can manage their

budget related to their income and spending by just using a smartphone to manage that

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

59

data. Overall, the objectives and targets of the project was achieved and met. However,

there are some limitations to this system application.

5.2 System Constraints

Every system application needs some limitation to ensure it perform perfectly.

There are few problems found during the process in order to achieve the target and

objectives. The problems occur during the development of the application as the

following:

1. Since Wise Budget Manager is not a web based application, thus user cannot

retrieve username and password if they have forgotten.

2. The reports show comparison of expenses separately made on different type

of expenses. But the chart does not show or evaluate income made versus

expenses.

3. The android technology is rapidly growing from time to time. So, the

developer must alert with the new updated technology in order to prevent

application developed exist few bugs or not compatible with current

technology.

4. The application needs to have Wi-Fi connection to the internet or coverage

of mobile phone data network. If there is no internet connection, user cannot

input their records of their spending. So, user has too make sure the mobile

phone has internet connection before using the application.

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

60

5.3 Future Work

Although the application is well operated and well functions which follows the

milestone of the project respectively, there are few enhancements that can be carry out

in future to make Wise Budget Manager to become more powerful and better

performances.

For current report generation, it only limited to few options. Hence, it will be

better if the report can generate bar graph or line graph that shows all kind of reports

and it can evaluate income made versus expense. Currently, users have to key in income

amount manually. Hence, it is better if enhancements in bank synchronization which

could help users to keep track their records easily. It is lot better if the users can

synchronize with the electronic banking system.

Therefore, the constraints and limitations as described before can be corrected

and make some improvement in future. So, the developer must always alert with the

current technology to make sure the application developed meet the standard.

5.5 Conclusion

In a conclusion, “Wise Budget Manager for UniSZA’s Student Mobile

Application” project was developed to assist students manage their money. With

development of the application, it provides end users to record their income and

expenses. They also will always keep track of their expenses. Moreover, they were able

to control their spending and they will not easily over budget. Then, they were able to

manage their budget using their smartphone anywhere and anytime.

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

61

Lastly, the developer hopes this application can be used in business market and

achieve user expectation. Also, the application can give better solution or

recommendation to the users while giving feedback in order to improve the application

in future.

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

62

REFERENCE

[1] Angad Manchanda. (2012) Expense Tracker Mobile Application. San Diego

State University, California, United States.

[2] 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].

[3] 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].

[4] Jaclyn N. McClellan. “Spending Tracker.” Computerized Investing 21 Feb.

2015

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

[Accessed 17 May 2018].

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

Nov. 2017

[7] Level, I., Manager, I., Tutorial, A., Tests, I., Dates, 2., Us, C., Policy, P., Use,

T., Us, A., us, W., Zilpe, A., Guide, I., Agrahari, d. and Guide, I. (2018). What is

fundamental test process in software testing?. [online] Istqbexamcertification.com.

Available at: http://istqbexamcertification.com/what-is-fundamental-test-process-

in-software-testing/ [Accessed 1 Aug. 2018].

[8] Mecham. J (2010). You Need A Budget, Createspace Independent Pub.

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

63

[9] 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.

[10] 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].

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

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

[12] Sreeraman, S. (2018). ISTQB : Test Analysis and Design - Software Testing

- Get Software Services. [online] Get Software Services. Available at:

http://www.getsoftwareservice.com/istqb-foundation-test-analysis-and-design/

[Accessed 1 Aug. 2018].


Recommended