BLOOD BANK MANAGEMENT APPLICATION USING IONIC

FRAMEWORK

AHMAD FADHLAN BIN MAT JOHA

BACHELOR OF COMPUTER SCIENCE

(SOFTWARE DEVELOPMENT)
UNIVERSITI SULTAN ZAINAL ABIDIN

2018
BLOOD BANK MANAGEMENT APPLICATION USING RULE-BASED

METHOD

AHMAD FADHLAN BIN MAT JOHA

Bachelor of Computer Science (Software Development)

Faculty of Informatics and Computing

Universiti Sultan Zainal Abidin, Terengganu, Malaysia

AUGUST 2018
 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 : Ahmad Fadhlan Bin Mat Joha

Date : .…………………………...…..

i
 CONFIRMATION

This is to confirm that:

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

________________________________

Name : Dr Syarilla Iryani Binti Ahmad Saany

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

ii
 DEDICATION

In the name of Allah, Most Gracious, Most Merciful.

Alhamdulillah with blessed from Allah to ease this project, Blood Bank Management

Application to be completed. I would like to express my gratitude to my beloved supervisor

of this Final Year Project, Dr Syarilla Iryani Binti Ahmad Saany for this suggestion or ideas

and also the valuable guidance and advice that encourage me to complete the system

successfully.

I would like to thank also to all lecturers and ISMSK (PP) group members who helped me

directly and indirectly in many ways. I would like to express my gratitude to my mother,

Wan Maharam Binti Wan Daud, my father, Mat Joha Bin Husin, siblings and friends for

giving me support and encouragement to complete this project and to propose this project

as Final Year Project.

iii
 ABSTRACT

In this technological and modern era, people like to interact with their gadget like mobile

phone. This proposed system of the Blood Bank Management Application is an application

that mobilize both the manual Blood Bank Management System and ready have web base

Blood Bank Management System. This application intend to keep the data regarding to

blood donation into mobile phone and manage the donation record to replace the blood

donor red card called Certificate. There are many flaws when keeping the blood donation

record manually like the record are more prone from being damaged, redundant and loss.

Blood Bank Center always have a difficult time when the quantity of the blood in blood

bank is almost running out. They are also facing a problem to inform donors about any

information related to blood donation. The application also provide calculation for the total

of blood packets which already stored into the blood bank according to each of the blood

type which are A, B, AB, and O will be keep updated. Finally, this application hopefully

make the management of blood donation and blood bank more effective and efficient.

iv
 ABSTRAK

Dalam era moden dan berteknologi ini, manusia suka untuk berinteraksi dengan gajet

seperti telefon mudah alih. Sistem cadangan Aplikasi Pengurusan Tabung Darah ini

merupakan satu aplikasi yang menaik taraf kedua-dua Sistem Tabung Darah manual dan

Sistem Tabung Darah berasaskan web. Aplikasi ini bertujuan untuk menyimpan data

berkaitan dengan pendermaan darah ke dalam telefon mudah alih dan mengurus rekod

derma darah untuk menggantikan kad merah penderma darah yang dipanggil sebagai

“Certificate”. Terdapat banyak kekurangan semasa menyimpan rekod derma darah secara

manual seperti rekod lebih terdedah kepada rosak, bertindan dan hilang. Pusat Tabung

Darah selalu menghadapi waktu kesukaran apabila kuantiti tabung darah hampir kehabisan.

Mereka juga menghadapi masalah untuk memaklumkan kepada penderma berkenaan apa-

apa maklumat berkaitan derma darah. Aplikasi inijuga menyediakan pengiraan bagi jumlah

paket darah yang sudah disimpan kedalam tabung darah mengikut setiap jenis darah yang

mana A, B, AB, and O akan dikemaskini. Akhir sekali aplikasi ini diharapkan dapat

membuatkan pengurusan pendermaan darah dan tabung darah lebih efektif dan efisyen.

v
 TABLE OF CONTENT

DECLARATION i
CONFIRMATION ii
DEDICATION iii
ABSTRACT iv
ABSTRAK v
LIST OF TABLES ix
LIST OF FIGURES x
LIST OF ABBREVIATION/TERM/SYMBOLS xiii
LIST OF APPENDICES xiv

CHAPTER 1 INTRODUCTION 1
1.1 Project Background 1
1.2 Problem Statement 2
1.3 Objective 2
1.4 Scope 3
1.5 Limitation Of Work 4

CHAPTER 2 LITERATURE REVIEW 5

2.1 Introduction 5
2.2 Blood Bank Management System Using Rule-Based Method 6
2.3 Designing a Web-Based Blood Bank Information Management System for the National
Blood Bank of Ethiopia 7
2.4 Friends2Support.org Mobile Application 8

vi
CHAPTER 3 METHODOLOGY 10
3.1 Introduction 10
3.1.1 Verification Phases 11
3.1.2 Coding Phase 12
3.1.3 Validation Phases 12
3.2 Requirement 13
3.2.1 Software Requirement 13
3.2.2 Hardware Requirement 14
3.3 System Design 15
3.3.1 Framework Design 15
3.3.2 Architecture Design 16
3.3.2.1 Data Dictionary 16
3.3.3 Process Model 21
3.3.3.1 Contact Diagram 21
3.3.4 Data Model 22
3.3.4.1 Data Flow Diagram (DFD) level 0 22
3.3.4.2 Data Flow Diagram (DFD) level 1 23
3.3.4.3 Entity Relationship Diagram (ERD) 26

CHAPTER 4 IMPLEMENTATION AND RESULT 27

4.1 Introduction 27
4.2 Interface Design 27
4.2.1 Welcome Page 28
4.2.2 Login Page 29
4.2.3 Homepage for users 30
4.2.4 Admin and Staff Detail page 31
4.2.5 Edit Profile 32
4.2.6 Admin Interface 33
4.2.6.1 Management Page 33
4.2.6.2 Register Staff 34
4.2.6.3 List Of Staff 35

vii
 4.2.6.4 Staff Report 36
4.2.7 Staff Interface 38
4.2.7.1 Management Page 38
4.2.7.2 Update Donor 39
4.2.7.3 Add Donation 40
4.2.7.4 Report Main Page 41
4.2.7.5 Report Donor 42
4.2.7.6 Donation Report 43
4.2.7.7 Blood Bank Report 44
4.2.8 Donor Interface 45
4.2.8.1 Donation Record (Red Card) 45
4.2.8.2 Blood Donation Information 46
4.3 Testing 47
4.4 Type of Testing 47
4.4.1 Black Box Testing 47
4.4.2 White Box testing 47
4.4.3 Test Cases 48
4.4.3.1 Test Case for Register 48
4.4.3.2 Test Case for Login 49
4.4.3.3 Edit Profile 49
4.4.3.4 Admin 50
4.4.3.5 Staff 52
4.4.3.6 Donor 55

CHAPTER 5 CONCLUSION 56
5.1 Introduction 56
5.2 Project Contribution 56
5.3 Project Limitation 57
5.4 Future work 57
REFERENCES 58
APPENDIX A (GANTT CHART) 60

viii
 LIST OF TABLES

TABLE TITLE PAGE

3.1 Software Requirement 13

3.2 Hardware Requirement 14

4.1 Test Case Register 48

4.2 Test Case for Login 49

4.3 Test Case for Edit Profile 49

4.4 Test Case for Register Staff 50

4.5 Test Case for List of Staff 51

4.6 Test Case for Report 52

4.7 Test Case for Update Donor 52

4.8 Test Case for Add Donation 53

4.9 Test Case for Donor Report 53

4.10 Test Case for Donation Report 54

4.11 Test Case for Blood Bank Report 54

4.12 Test Case for Donation record and Blood Donation Information 55

ix
 LIST OF FIGURES

FIGURE TITLE PAGE

2.1 Admin Main Page 6

2.2 The application shown at Play Store 8

3.1 V-Shape Model System Development Life Cycled 10

3.2 System Framework for Blood Bank Management Application 15

3.3 user Table 16

3.4 donor Table 17

3.5 staff Table 18

3.6 donation Table 19

3.7 bloodbank Table 20

3.8 Contact Diagram (CD) 21

3.9 Data Flow Diagram (DFD) level 0 22

3.10 DFD Level 1 (Process 1.0) 23

3.11 DFD Level 1 (Process 2.0) 24

3.12 DFD Level 1 (Process 3.0) 25

3.13 ERD for Blood Bank Management Application 26

4.1 Welcome Page for all users. 28

x
4.2 Login Page 29

4.3 Error alert if the login failed 29

4.4 (a) Profile Admin 30

(b) Profile Staff 30

(c) Profile Donor 30

4.5 (a) Detail Profile Admin 31

(b) Detail Profile Staff 31

4.6 Form for updating profile 32

4.7 Profile successfully updated 32

4.8 Management page for admin 33

4.9 Input for new staff ID 34

4.10 Input for new staff details 34

4.11 List of Staff 35

4.12 Staff details 35

4.13 Deleting staff 35

4.14 Staff report page 36

4.15 All staff report 36

4.16 Active staff report 37

4.17 Not active staff report 37

4.18 Management page for staff 38

4.19 Update donor page 39

4.20 form for updating donor details 39

xi
4.21 Add donation form 40

4.22 Main page for the report 41

4.23 Donor Report 42

4.24 Search donor 42

4.25 Input donorID for any donor 43

4.26 Donor details 43

4.27 Donation report of a donor 43

4.28 Blood type selection 44

4.29 Color indicator based on quantity of blood 44

4.30 List of blood type A 44

4.31 Donor donation record 45

4.32 Information about blood donation 46

xii
 LIST OF ABBREVIATION/TERM/SYMBOLS

CD Context Diagram

DFD Data Flow Diagram

FYP Final Year Project

BBMA Blood Bank Management Application

xiii
 LIST OF APPENDICES

APPENDIX TITLE PAGE

A Gantt Chart 60

xiv
 CHAPTER 1

INTRODUCTION

1.1 Project Background

This project Blood bank Management Application is developed for the mobile

operating system (or mobile OS), such as Android OS. A mobile OS is compatible

support various features like Web Browser, Email, Bluetooth and etc. It is also a

platform so developers can create applications or 'apps' (software programs developed

for smartphones that can carry out specific functions).

Blood Bank Management Application is a mobile application used by the

hospital or a blood center. The system developed to promote the important of blood

donation and also serve as a medium for public to increase their awareness on blood

donation that can save many lives. This system have function use to keep the donation

record of the donor. Besides, the process of adding data, delete data, update the data

can be done anywhere by using mobile phone.

This application goal is to save time and ease the blood bank management in

hospital. Moreover, donors no need to open the laptop or computer to check about the

blood donation information. Thus, all of the problem above is consuming a lot of time.
1
1.2 Problem Statement

Currently, the availability of mobile application for Blood Bank Management

is not wide, thus, it is done manually using traditional method. This will lead to the

problems where the staff hard to search for the blood donation record. The record can

be stored inside the application. Besides, some of the donors did not know what kind

of benefit they will get by donating blood. With this Blood Bank Management

Application, blood bank staff can manage the donor information in their phone and

this will save a lot of times. Moreover, this application will have information about

blood donation for the donors. This can encourage donor to come to the hospital and

donate their blood.

1.3 Objective

There are the objectives in this project to be achieve to make this project

successfully complete:

 To design an application for publicize and advertise the advantage of blood

donation to encourage people to donate blood.

 To develop an application that can manage blood bank using mobile phone and

records blood donation as the alternative to replace the traditional way of

recording Red Book Certificate.

 To test the functionality of the developed application to meet the user requirement.

2
1.4 Scope

The scope for this system is divided into four which are administrator, blood bank

staff, and donor.

1. Admin

 Manage Profile

 Manage Blood Bank Staff.

 View Report

2. Blood Bank Staff

 Manage Profile.

 Manage Donor

 Manage Donation

 View Report

3. Blood Donor.

 Manage registration and profile.

 View blood donation record

 View Information about blood donation.

3
1.5 Limitation Of Work

There are some limitation of work since the proposed system is only cover certain

aspects.

1. The system only cover English language. It did not support other languages.

2. There is no real time interaction between donor and blood bank staff in the system.

3. This application need human intervention to update the quantity of blood in the

hospital.

4
 CHAPTER 2

LITERATURE REVIEW

2.1 Introduction

In the literature review, it discusses about the previous journal and research paper.

The purpose of writing literature review is to provide background for the topic choose

using previous research that has been done.

5
2.2 Blood Bank Management System Using Rule-Based Method

Figure 2.1 Admin Main Page

This web-based system is developed to computerize the blood bank management

system in a hospital blood bank in order to manage the records of blood donors, blood

donation campaign announcement and broadcast message about critical blood demand to

donors. This Blood Bank Management System Using Rule Based method to store database

on blood donation and making notification on campaign and critical blood demand.

The advantages of the system would be as follows:

1. Access to the system secured by login.

2. This system filter the people that want to donate blood. So that the right people only

can login as a donor.

3. Donor will be noticed if the blood quantity reach critical.

4. Donor also will be informed if there are blood donation campaign around

Terengganu.

6
2.3 Designing a Web-Based Blood Bank Information Management System for the

National Blood Bank of Ethiopia

This paper is carried out at National Blood Bank Center, Addis Ababa. The project

follows a design science methodology and an object oriented system analysis and design

approach to analyze and design the system. In-depth interview, document review and

inventory were done to analyze the existing situation. To model the analysis and design of

the proposed system Unified Modeling Language (UML) modeling techniques is used and

both Hyper-Text Transfer Protocol (HTML) and Hypertext Preprocessor (PHP) is used to

develop the system prototype. And My Structured Query Language (MySQL) database

management system is used to design the prototype database.

All the system’s processes and its boundary were identified and described by using

use case diagram. Eight processes with their corresponding actors were identified for the

system. The flow of the process were presented using activity diagrams. The object model

were described by using class diagram. And finally, the system prototype was developed

for the user interface testing. The results of the user interface testing shows that User test

for the system prototype was done and it shows that 75% of the participants in the

evaluation and testing has shown positive attitude and response for the system usability.

7
2.4 Friends2Support.org Mobile Application

Figure 2.2 The application shown at Play Store

This application are developed to become a platform for recipient to find available

donor easily arround them until around the world. Person who become the donor are listed

in the system. Recepient can search any blood type and the choose the location of the donor.

The system will filter it and display the donor that has the same blood type.

The advantages of the system would be as follows:

1. This application have strong privacy control.

2. It contain a lot of facts about blood donation.

8
 3. People can do report if the donor phone number are not available anymore.

The disadvantage of the application is:

1. This application only available for 6 countries only in the world.

2. Not many donor registered in this application except people in India.

3. The interface is less attractive and not really friendly.

9
 CHAPTER 3

METHODOLOGY

3.1 Introduction

Figure 3.1 below show the V-process Model that are chosen in developing this final

year project. It is known as Verification and Validation model. This model are selected

because of every single phase in the development cycle, there is a directly associated testing

phase.

Figure 3.1 V-Shape Model System Development Life Cycled

10
3.1.1 Verification Phases

Verification focuses on development. There are several verification phase in this V-

process Model such as:

1) Requirement Analysis

 Requirement Analysis is the first phase on the cycle. At this phase, requirement are

collected by analyzing the needs of the users.

2) Functional Specification

 Developing the plan for the system design or blueprint, including requirements for

hardware, software and network for the system under development.

3) Architectural Design

 This is also referred to as High Level Design (HLD). HLD phase focuses on system

architecture and design. It provide overview of solution, platform, system, product

and service/process.

4) Detail Design

 Detail Design phase can also be referred to as low-level design. The designed

system is broken up into smaller units or modules and each of them is explained so

that the programmer can start coding directly. The low level design document or

program specifications will contain a detailed functional logic of the module.

11
3.1.2 Coding Phase

At this point, halfway through the stages along the process, the actual coding and

implementation occur. This period should allot for as much time as is necessary to convert

all previously generated design and specification docs into a coded, functional system. This

stage should be fully complete once the testing phases begin.

3.1.3 Validation Phases

Validation Phases ensures that all that development was carried out correctly. This

process is very dynamic and a great deal of testing takes place. These steps are also referred

to as the 'tester's life cycle.'

1) Unit Testing

 In the V-Model, Unit Test Plans (UTPs) are developed during module design phase.

These UTPs are executed to eliminate bugs at code level or unit level. A unit is the

smallest entity which can independently exist, e.g. a program module. Unit testing

verifies that the smallest entity can function correctly when isolated from the rest

of the codes/units.

2) Integration Testing

 Integration testing is associated with the architectural design phase. Integration tests

are performed to test the coexistence and communication of the internal modules

within the system.

12
 3) System Testing

 System testing is directly associated with the system design phase. System tests

check the entire system functionality and the communication of the system under

development.

4) Acceptance Testing

 Lastly, acceptance testing is the process of implementing all tests created during the

initial requirements phase and should ensure that the system is functional in a live

environment with actual data, ready for deployment.

3.2 Requirement

3.2.1 Software Requirement

SOFTWARE DESCRIPTION

MySQL (phpMyAdmin ) A software to run database of the system.

XAMPP Server A localhost to run phpMyAdmin

MySQL ( Workbench ) A software to create databases and tables

Microsoft Word 2013 A software to write the report.

UC Browser A browser to open the application.

Notepad++ Use to create PHP code program.

Visual Studio Code A software to create Ionic code (HTML, JS, and

SCSS)

Command Prompt Use to run the Ionic code and to deploy the

application into smart phone.

Table 3.1 Software Requirement

13
3.2.2 Hardware Requirement

HARDWARE DESCRIPTION

Laptop Laptop that used to build the system

Memory :4GB RAM RAM of the laptop.

USB cable Used to connect between the Smart phone and

laptop.

Smart Phone Smart phone will kept the application and test

the application.

Table 3.2 Hardware Requirement

14
3.3 System Design

3.3.1 Framework Design

Figure 3.2 System Framework for Blood Bank Management Application

Figure 3.2 shows about the framework of the system which consists of entities involves and
the flow of the system generally.

15
3.3.2 Architecture Design

3.3.2.1 Data Dictionary

a) User Table

Data Dictionary for Blood Bank Management Application consists of five entities such as

user, staff, donor, donation and bloodbank. Figure 3.3 shows the data dictionary for user.

There are two attributes consists in the table which are userID, userPassword. userID is the

primary key for this table.

Figure 3.3 user Table

16
 b) Donor Table

In Figure 3.4 below, there are fourteen attributes consists in the table which are donorID,

donorName, address, address2, postcode, city, state, bloodType, rhesus, phoneNo,

donorIC, gender, weight, donorQualification. donorID is the primary key for this table.

Figure 3.4 donor Table

17
 c) Staff Table

In Figure 3.5, there are ten attributes consists in the table which are staffID, staffName,

position, address, address2, postcode, city, state, phoneNo, gender and status. staffID is the

primary key for this table

Figure 3.5 staff Table

18
 d) Donation Table

In Figure 3.6, there are nine attributes consists in the table which are donorID, dateDonate,

bloodSeriesNo, bloodType, rhesus, donationType, amount, place and weight. donorID,

dateDonate and bloodSeriesNo is the composite primary key for this table.

Figure 3.6 donation Table

19
 e) Blood Bank Table

In Figure 3.7, there are six attributes consists in the table which are bloodSeriesNo, amount,

bloodType, rhesus, dateUpdate, dateExpire and status. bloodSeriesNo is the primary key

for this table.

Figure 3.7 bloodbank Table

20
3.3.3 Process Model

3.3.3.1 Contact Diagram

Figure 3.12 Contact Diagram (CD)

The Blood Bank Management Application consists of 3 actors as shown in Figure 3.12

which are Administrator, Staff, and Donor. All of these actors need to login into the

application before able to access their interface. Admin make registration of the staff into

the system. The Staff is able to manage profile, manage blood donation, manage donor and

view report. As for Donor need to register before use this application. Donor also can

manage profile view blood donation record and view information about blood bank.

21
3.3.4 Data Model

3.3.4.1 Data Flow Diagram (DFD) level 0

Figure 3.13 Data Flow Diagram (DFD) level 0

A Data Flow Diagram (DFD) level 0 is a diagram of a flow of data through an application.

In Figure 3.13, there are four processes involved. Processes in this system consist of

manage staff, manage donor, manage blood bank, and manage blood donation. There are

four data store involved in this application which are staff, donor, bloodbank and donation

data store.

22
3.3.4.2 Data Flow Diagram (DFD) level 1

Figure 3.14 DFD Level 1 (Process 1.0)

Figure 3.14 shows the detail process for admin to manage staff. In managing the staff,

administrator is able to Register Staff, Update Staff Record, Delete Staff, and View Staff.

The detail of blood bank staff is stored in STAFF data store.

23
 Figure 3.15 DFD Level 1 (Process 2.0)

Figure 3.15 shows the detail process manage donor. In managing donor, the donor is able

to view profile, register and update donor. The staff is able to vie donor, delete donor, and

update donor. The detail of the donor is then stored in DONOR data store.

24
 Figure 3.16 DFD Level 1 (Process 3.0)

Figure 3.16 shows the detail process for staff to manage blood donation. In managing the

blood donation staff is able to add blood donation and search for blood donation record.

The detail of the blood donation is stored in DONATION data store.

25
3.3.4.3 Entity Relationship Diagram (ERD)

Figure 3.17 below show the ERD of the system. It shows all the entities involve in

the database of the Blood Management Application. All the updated data in the data store

is self-updated by user.

Figure 3.17 ERD for Blood Bank Management Application

26
 CHAPTER 4

IMPLEMENTATION AND RESULT

4.1 Introduction

This chapter discusses about the implementation of the application developed. It is

include all the processes involved in getting the application to operate well with interfaces.

The interface is labeled and described in detail like a user manual.

4.2 Interface Design

The purposed of the interface design is to create a communication between application

and user. The interface design should make the application is easy to be learn and

memorable. The consistency of the interface such as location of the button, color and many

more can make the application friendlier to the user.

27
4.2.1 Welcome Page

Figure 4.1 below shows the first page that will be see by admin, staff and donor

before go further with this application.

Figure 4.1 Welcome Page for all users.

28
4.2.2 Login Page

Figure 4.2 below shows the login page of the application. Admin, blood bank staff and

donor will interact with this interface. Only authorized user can used this application.

Figure 4.3 show the error message will alert the user if they fail to enter correct username

or password.

Figure 4.2 Login Page Figure 4.3 Error alert if the login
failed

29
4.2.3 Homepage for users

After login into the application, all the user will redirect the profile page as shown

in Figure 4.4(a), Figure 4.4(b) and Figure 4.4(c) below. At this page, application once again

welcoming the user to use this application. It also show the important user details so that

they don’t need to go to other page to see the important details. The view detail button will

redirect user to user details page

Figure 4.4(a) Profile Figure 4.4(b) Profile Figure 4.4(c) Profile

Admin Staff Donor

30
4.2.4 Admin and Staff Detail page

Figure 4.5(a) and Figure 4.5(b) below show all the details of the admin and the staff.

There are slightly different between this figures. Detail profile staff has attribute status

either active or nor active.

Figure 4.5(a) Detail Figure 4.5(b) Detail

Profile Admin Profile Staff

31
4.2.5 Edit Profile

All user can update their profile if they want to change their information. But some

of the information are read only and cannot be edited. Figure 4.6 is the example if the admin

want to change his information. While Figure 4.7 show the profile are successfully updated.

Figure 4.6 Form for Figure 4.7 Profile

updating profile successfully updated

32
4.2.6 Admin Interface

4.2.6.1 Management Page

Figure 4.8 below show the management page for admin where admin can register

staff and view list of staff.

Figure 4.8 Management

page for admin

33
4.2.6.2 Register Staff

In figure 4.9, to register new staff admin need to insert the new Staff ID so that it

check if the staff ID already own by other staff. After “ok” button tapped, it will redirect

admin to register staff detail page as shown in figure 4.10, where admin need to fill the

form. The staff ID is carried from previous page to the register staff detail page and cannot

be edited.

Figure 4.9 Input for new Figure 4.10 Input for new
staff ID staff details

34
4.2.6.3 List Of Staff

Figure 4.11 below show the list of all staff that are using this application. Only

important information will be displayed here. There are two button at each staff which is

“view” for viewing staff details like in figure 4.12 and “Delete” button for deleting the staff

record from database like in the figure 4.13.

Figure 4.11 List of Staff Figure 4.12 Staff details Figure 4.13 Deleting
staff

35
4.2.6.4 Staff Report

Figure 4.14 show the front page of report staff. There are three category that admin can

see staff report. First, admin can view all staff report (Figure 4.15), view active staff report

(Figure 4.16) and view not active staff report (Figure 4.17).

Figure 4.14 Staff report Figure 4.15 All staff

page report

36
Figure 4.16 Active staff Figure 4.17 Not active
report staff report

37
4.2.7 Staff Interface

4.2.7.1 Management Page

Figure 4.18 show the management page for staff where staff can update donor detail

and add donation.

Figure 4.18 Management

page for staff

38
4.2.7.2 Update Donor

Figure 4.19 show the update donor page where all of the donor are listed with few

of their details. Each of donor listed have a “Update” button that will redirect staff to update

donor details form as shown in figure 4.20.

Figure 4.19 Update Figure 4.20 form for

donor page updating donor details

39
4.2.7.3 Add Donation

Figure 4.21 show add donation form. Using this form, staff can add donation for any

donor that already register in this application.

Figure 4.21 Add

donation form.

40
4.2.7.4 Report Main Page

Figure 4.22 show the main page for the report. There are three types of reports that

can be look by staffs. It is report about donor, donation report and blood bank report.

Figure 4.22 Main page

for the report

41
4.2.7.5 Report Donor

Figure 4.23 show report of all donor where details of all registered donor can be

seen by staff. Besides, as show in Figure 4.24, this staff can search which donor they want

to take a look by searching their donorID.

Figure 4.23 Donor Figure 4.24 Search donor

Report

42
4.2.7.6 Donation Report

Figure 4.25 show the input for donorID that require the staff to put in order to view

donor information as shown in figure 4.26. From that page, staff can view donation report

(Figure 4.27) for that particular donor.

Figure 4.25 Input Figure 4.26 Donor details Figure 4.27 Donation
donorID for any donor report of a donor

43
4.2.7.7 Blood Bank Report

Figure 4.28 show that staff can choose the report for which type of blood to be

shown. For example, staff choose blood type A. As show in figure 4.29, the color indicator

of the warning is green which mean the quantity of blood type A in the blood bank center

enough. If the color turn orange, the quantity almost critical. But when the color indicator

turn red, the quantity of that particular blood reach critical. As in figure 4.30, when the staff

tap on “Blood List” segment, this application will display all type A blood that are kept in

blood bank center.

Figure 4.28 Blood type Figure 4.29 Color Figure 4.30 List of blood
selection. indicator based on type A
quantity of blood

44
4.2.8 Donor Interface

4.2.8.1 Donation Record (Red Card)

Figure 4.31 show donation record (red card) for the donor that currently login into

the system. Donor can know how many times they donate their blood.

Figure 4.31 Donor

donation record

45
4.2.8.2 Blood Donation Information

Figure 4.32 show that the information related to blood donation for example

benefit of donating blood to the donor.

Figure 4.32 Information

about blood donation.

46
4.3 Testing

Testing is a process to determine and identify the correctness of the application and to

make sure the application meet the requirements and specification. The test had been

conducted alongside with its results. Black Box Testing, White Box Testing and Test Case

is used for the testing of the application.

4.4 Type of Testing

4.4.1 Black Box Testing

Black Box Testing is a software testing technique where the application is being

test without looking at the internal code structure and knowledge of internal path of the

software. It is entirely based on the software requirements and its specifications. It is also

focuses the input and the output of the application rather than the internal knowledge of the

software program.

4.4.2 White Box testing

White Box Testing is a testing that focuses on the flow of input and output of the

application, security strengthening the security, and improving design and usability. It can

be done at the system integration phase and unit levels of software development. It also

involved series of predefined inputs against expected output. One of the goals of white box

testing is to verify a working flow of an application.

47
4.4.3 Test Cases

Test case can be define as sequence of steps to test the correct behavior of a

functionality of an application. It is also set of conditions of variables which will be testing

by a tester whether a requirement upon an application fully or partially satisfies.

4.4.3.1 Test Case for Register

Table 4.1: Test Case Register

Step Procedure Expected Result Pass/Fail

1 Go to register page View form for username and Pass

password.

2 Fill the username and password - Pass

3 Tap on “Signup” button Alert message “Now enter Pass

your personal information”

and auto redirect to personal

information page

4 Fill up the form - Pass

5 Tap on “Signup” button Alert message “Successfully Pass

Signed up! Please log in”

and auto redirect to welcome

page

48
4.4.3.2 Test Case for Login

Table 4.2: Test Case for Login

Step Procedure Expected Result Pass/Fail

1 Go to login page Login page display Pass

2 Fill the username and password - Pass

Username: ST17001

Password: staff123

3 Tap on “Login” button Successful login will Pass

automatically redirect to

Profile page

4.4.3.3 Edit Profile

Table 4.3: Test Case for Edit Profile

Step Procedure Expected Result Pass/Fail

1 Tap “View Detail” → View form for Edit profile Pass

“Edit Profile”

2 Edit the field that can be edited - Pass

3 Tap on “Save” button Alert message “Successfully Pass

update your profile.” and

auto redirect to detail page

49
4.4.3.4 Admin

4.4.3.4.1 Register Staff

Table 4.4: Test Case for Register Staff

Step Procedure Expected Result Pass/Fail

1 Tap “Register Staff” Card View form for register staff Pass

ID

2 Enter new staff ID - Pass

3 Tap on “Ok” button Alert message “Ok Good, Pass

Now enter staff personal

information.” and auto

redirect to register staff

detail page.

4 Enter staff details in the input - Pass

form.

5 Tap on “Register” button Alert message “Successfully pass

register staff.” and auto

redirect to staff management

page.

50
4.4.3.4.2 List Of Staff

Table 4.5: Test Case for List of Staff

Step Procedure Expected Result Pass/Fail

1 Tap “List Of Staff” Card View List of staff with view Pass

and delete button at each of

staff information.

2 If tap on “view” button View staff details like Pass

StaffID, Staff Name, Staff

Position, Address, Phone

Number, Gender and Status.

3 If tap on “Delete” button Alert message “Confirm Pass

Delete, Do you want to

delete this staff from

database?”

4 Tap on “Ok” button Alert message “Success, Pass

Staff has been deleted!”

51
4.4.3.4.3 Report

Table 4.6: Test Case for Report

Step Procedure Expected Result Pass/Fail

1 If tap “All Staff Report” Card. View list of all staffs with Pass

their information

2 If tap “Active Staff Report” Card. View list of all active staffs Pass

with their information.

3 If tap “Not Staff Report” Card. View list of all not active Pass

staffs with their information.

4.4.3.5 Staff

4.4.3.5.1 Update Donor

Table 4.7: Test Case for

Step Procedure Expected Result Pass/Fail

1 Tap “Update Donor” Card View list of all donor with Pass

their information and

“update” button.

2 Tap on “Update” button View form for update donor Pass

details

3 Enter necessary donor details in the - Pass

input form.

52
 4 Tap on “Save” button Alert message “Successfully Pass

update donor detail.”

4.4.3.5.2 Add Donation

Table 4.8: Test Case for Add Donation

Step Procedure Expected Result Pass/Fail

1 Tap “Add Donation” Card View form for update donor Pass

details

2 Fill up the form - Pass

3 Tap on “Add Donation” button Alert message “Successfully Pass

add donation.” and auto

redirect to management

page.

4.4.3.5.3 Donor Report

Table 4.9: Test Case for Donor Report

Step Procedure Expected Result Pass/Fail

1 Tap “All Staff Report” Card. View list of all staffs with Pass

their information

53
4.4.3.5.4 Donation Report

Table 4.10: Test Case for Donation Report

Step Procedure Expected Result Pass/Fail

1 Tap “Donation Report” Card. View form Pass

2 Fill the input field for donorID - Pass

3 Tap “ok” button. View full information of that Pass

particular donor.

4 Tap “View Donation” button View all donation record of Pass

that particular donor.

4.4.3.5.5 Blood Bank Report

Table 4.11: Test Case for Blood Bank Report

Step Procedure Expected Result Pass/Fail

1 Tap “Blood Bank Report” Card. Radio popup appear on the Pass

screen

2 Tap which blood type that want to System will redirect to page Pass

be viewed and tap “ok” button chosen blood type and staff

can see warning color.

3 Tap “Blood List” segment. View list of that particular Pass

blood in the blood bank and

total quantity.

54
4.4.3.6 Donor

4.4.3.6.1 Donation record (Red Card) and Blood Donation Information

Table 4.12: Test Case for Donation record and Blood Donation Information

Step Procedure Expected Result Pass/Fail

1 Tap “Red Card” tab View list of all donation Pass

record of a donor

2 Tap on “info” tab View information about Pass

blood donation. Example:

Benefit of donating blood to

the donor

55
 CHAPTER 5

CONCLUSION

5.1 Introduction

This chapter discussing about contribution, limitation and recommendation and the

summary of the Blood Bank Management Application. This chapter also will touch about

future work of this application.

5.2 Project Contribution

Blood Bank Management Application is a developed system that help to ease the admin

to manage staff such as register staff, and viewing staff information and record. Besides, it

is also help the blood bank staff to manage donor, manage donation and manage blood

bank. Moreover, this BBMA ease the processes involving blood donation such as record

the donors’ blood donation in mobile phone which is replacing the manual system that

record the record in papers. This application also provide the report so that admin, staff and

donor can see the previous records.

56
5.3 Project Limitation

Throughout the development of Blood Bank Management Application, there are

several problems and limitations arise as shows below:

1. This application did not provide map to locate the nearest blood center.

2. Report can only be see inside phone and cannot be save in other format like pdf or

word.

3. This did not provide questionnaire before they want to donate blood. The

questionnaire need to answer manually.

5.4 Future work

For the improvement of the system, some suggestion

1. Implementing a geolocation plugin so that user can find the location or the nearest

blood donation campaign.

2. Donors supposed to receive the notification via push up notification or through

Short Message System (SMS) so that they can know if the quantity of blood in

blood bank reaching critical.

3. This application will add the questionnaire so that it can filter only qualified donor

can donate blood.

57
 REFERENCES

Journal

[1] Sara A. Hashim, Afnan M. Al-Madani, Shatha M. Al-Amri, Abeer M. Al-Ghamdi,

Bayan S. Bashamakh. Nahla Aljojo, PhD (2014). Online Blood Donation

Reservation And Managementsystem In Jeddah. Life Science Journal.

[2] K M Akkas Ali, Israt Jahan, Md. Ariful Islam, Md. Shafa-at Parvez (2015). Blood

Donation Management System. American Journal of Engineering Research

(AJER).

[3] Prathamesh Raut, Prachi Parab, Yogesh Suthar, Sumeet Narwani, Sanjay Pandey

(2016). Blood Bank Management System. International Journal of Advanced

Computational Engineering and Networking.

[4] Ashita Jain, Amit Nirmal, Nitish Sapre, Prof Shubhada Mone (2016). Online Blood

Bank Management System using Android. International Journal of Innovative

Studies in Sciences and Engineering Technology (IJISSET).

[5] Prof. Snigdha, Varsha Anabhavane, Pratiksha lokhande, Siddhi Kasar, Pranita More

(2015). Android Blood Bank. International Journal of Advanced Research in

Computer and Communication Engineering (IJAECCE).

58
Webpages

[6] Rule Based System, 2008. Suresh Sambandam, Founder of OrangeScape & CEO at

KiSSFLOW. https://www.slideshare.net/sureshsambandam/rule-based-system-

presentation. Access on 20 May 2018.

Thesis

[7] Fazlin Liyana Binti Mohammed Wadzir, 2017. Title of Degree, Universiti Sultan

Zainal Abidin. Blood Bank Management System Using Rule-Based Method.

59
 APPENDIX A (GANTT CHART)

FYP 1 Schedule

Duration February March April May

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Task

Topic Discussion and

Determination

Project Title Proposal

Proposal Writing – Introduction

Proposal Writing - Literature

Review

Proposal Progress Presentation

& Evaluation

Discussion & Correction Proposal

Proposed Solution Methodology

Proof of Concept

Drafting Report of the Proposal

Submit draft of report to

supervisor

Seminar Presentation

Report Correction

Final Report Submission

60
FYP 2 Schedule

Duration July August

1 2 3 4 5
Task

Development and Implementation of Project.

Pre Conference Evaluation of System

Development and Implementation of Project.

Development and Implementation of Project.

Development and Implementation of Project.

FIK Academic Conference

Submission and correction of thesis

61