WEB-BASED INFORMATION SYSTEM FOR BLOOD DONATION WITH

GEOGRAPHICAL ANALYSIS AND DISTRIBUTION

IN THE MUNICIPALITY OF LOS BANOS

A Capstone Project Proposal presented to the Faculty of College of Computer

Studies Laguna State Polytechnic University
Los Baños Campus
Los Baños, Laguna

In Partial Fulfillment of the Requirements for the Degree 

Bachelor of Science in Information Technology

JERRY MAE B. BARCELONA

MICAH JOSHUA D. MATEO
MARILOU B. RESPONSO

APRIL 2021
 ii

APPROVAL SHEET

The capstone project entitled WEB-BASED INFORMATION SYSTEM

FOR BLOOD DONATION WITH GEOGRAPHICAL ANALYSIS AND
DISTRIBUTION IN THE MUNICIPALITY OF LOS BANOS, prepared and
submitted by MARILOU B. RESPONSO, MICAH JOSHUA D. MATEO, and
JERRY MAE B. BARCELONA, in partial fulfilment of the requirements for the
degree BACHELOR OF SCIENCE IN INFORMATION TECHNOLOGY, is
hereby recommended for approval and acceptance.

JEFFERSON L. LERIOS, DIT

Adviser

Approved by the Committee on Oral Examination with a grade of

_______.

JOCELYN O. PADALLAN, MAEd JOHN FREDERICK B. TESORO

Member Member

z GENE MARCK B. CATEDRILLA, MIT

CAROLINA R. JOVAL, MAEd
Member Member

JONARDO R. ASOR. MIT

Research Coordinator

Accepted and approved in partial fulfillment of the requirements for the

degree of BACHELOR OF SCIENCE IN INFORMATION TECHNOLOGY.

JEFFERSON L. LERIOS, DIT

Dean, College of Computer Studies

OFELIA B. MANINGAS, MAEd

__________
Chairperson, Research and Development Services Date
Signed

RESEARCH CONTRIBUTION NO.

 iii

ACKNOWLEDGMENT

This project would not have been completed if it were not for the help

of the following people who have unselfishly shared their knowledge. Hence

these words of sincerest gratitude of the researchers:

First and foremost, praises and thanks to God, for giving the

researchers strength and knowledge to complete this research work.

Jefferson L. Lerios, DIT, Dean, College of Computer Studies, for his

time and technical guidance throughout the study;

Prof. Wilson B. Suyat, Prof. Loyd S. Echalar and Sherwin B. Sapin,

Ed. D, for their valuable comments and suggestions;

Mr. Dindo Balagtas, an Information Technology specialist, for his

cooperation and information sharing that added value to the success of this

project;

Mr. Ray Marrion F. Manatac, Dr. Alvin A. Isidoro,and Aiza Q.

Toledo, BSN, RN, for their valuable time and support from the beginning to

the completion of the project; and

Prof. Jonardo R. Asor, MIT, Research Coordinator, Prof. Jocelyn O.

Padallan, MAEd, Technical Editor, Prof. Carolina R. Joval, MAEd,

Statistician and also Prof. Gene Marck B. Catedrilla, MIT, Subject Specialist,

for their kindness and for offering valuable time to help in all the aspects of the

manuscript.

The Researchers
 iv

DEDICATION

This study is wholeheartedly dedicated to our beloved parents, who

have been our source of inspiration and who have given us strength when we

thought of giving up, who continuously provide their moral, spiritual, and

financial support. To our beloved brothers, sisters, relatives, mentor, friends,

and classmates who shared their words of advice and encouragement to

finish this study. And lastly, we dedicate this manuscript to Almighty God, for

guidance, strength, power of mind, protection and skills for giving us a healthy

life. All of these are offered to you.

To our loving and supportive parents

Mr. Ricardo P. Bautista and Mrs. Rosa T. Bautista

Mr. Manolito L. Mateo and Mrs. Antonieta D. Mateo

Mr. Larry B. Barcelona and Mrs. Rose C. Barcelona

This is also dedicated to our friends, loved ones and professors who

helped us to finish this capstone project.

M.B.R.
M.J.D.M.
J.M.B.B.
 v

ABSTRACT

Blood transfusions are required at any time in both urban and rural locations,
and a shortage of blood has resulted in many fatalities and ill-health patients.
Through this issue the researchers design a web-based system in order to
help the community in providing online information to view where to find
specific blood in stock, in particular blood banks. For the GIS function of the
developed system, the researchers employed Mapbox software. To meet the
purpose of visualizing and animating geographic data, the researchers need
to get the latitude and longitude of a place on google and double check it on
google map to make sure that the given coordinates are correct. The
configuration of the clusters changes when the map view changes (panning,
zooming, and moving). The researchers had a series of interviews with the
staff of the municipal health office of Los Baños to learn about the current
situation and process of conducting blood drive activities and blood
dispensing in the rural health unit. Researchers conclude that by providing
online information will help the people searching for specific blood type in
emergency cases that leads to increasing the possibility of saving lives.
Moreover, by providing a data visualization of successful blood donation and
distribution reports using geographic information systems, this also will be a
big help for planning purposes of health infrastructures for the Department of
Health and/or Government agencies. To make this study more efficient
developers conducted a google form survey based on the ISO 25010
questionnaires and used the method of percentage to achieve reliable survey
results. Overall the respondents agreed that the system is acceptable. For the
future researchers, it is recommended to add the next donation period Alert
notification and/or send SMS using Arduino.
Keywords: blood donation, data visualization, geographic information system,
web-based system.
 vi

TABLE OF CONTENTS

PRELIMINARIES
TITLE i
APPROVAL SHEET ii
ACKNOWLEDGMENT iii
DEDICATION iv
ABSTRACT v
TABLE OF CONTENTS vi
PRELIMINARIES vi
LIST OF TABLES vii
LIST OF FIGURES viii
DEFINITION OF TERMS ix

CHAPTER
I INTRODUCTION 1
Project Context 5
Research Objectives 6
Conceptual Framework 7
Project Purpose 8
Scope and Limitation of the Study 10

II REVIEW OF RELATED LITERATURE AND STUDIES 17

Related Literature and Studies 23
Synthesis of the Study 30

III METHODOLOGY 31
Systematic Approach 33
Project Management 33
Data Collection. 34
System Analysis 34
Population of the Study 35
Sampling Design 36
Data Collection Instrument 37
Statistical Treatment of Data 37
Requirement Specification 38
Data Analytics 42
System Development Design 45
Project Design 49
Testing and Evaluation Procedure 54

IV RESULTS AND DISCUSSIONS 59

Results of Software Evaluation 68
Result of Unit Testing 70

V SUMMARY, CONCLUSIONS AND RECOMMENDATIONS 78

Summary of Findings 78
Conclusions 80
Recommendation 82
REFERENCES 84
 vii

LIST OF TABLES

No. Title Page

1 Likert Scale 35
2 Desktop Minimum 42
Specification
3 Product Backlog 43
4 Sprint Backlog 44
5 Result of Survey Based on 65
Likert Scale
6 Overall Result of Software 66
Evaluation
7 Unit Testing 67
8 Test Case (Integration 69
Testing)
9 Test Case (Compatibility) 70
10 Test Case (Backward 70
Testing)
11 Test Case (Forward 71
Testing)
12 Test Case (Stress Testing) 71
13 Test Case (Load Testing) 72
14 Test Case (System Testing) 73
 viii

LIST OF FIGURES

No. Title Page

1 Conceptual Framework 7
2 Methodology 28
3 Web-based Information 30
System Approach
4 Purposive Sampling 32
5 GIS Data Layers 36
6 Cluster Sampling with 37
Mapbox and HTML
markers
7 Cluster Sampling on 38
building the clusters using
SVGs
8 Agile Scrum 42
9 System Architecture 46
10 Use-Case Diagram 48
11 Flowchart 49
12 Scrum Test Plan Model 50
13 ISO 25010 Model 51
14 Unit Testing 52
15 Integration Testing 53
16 System Testing 54
17 Acceptance Testing 55
 ix

18 Sign-up Form 55
19 Sign-in Form 56
20 Create Campaign Form 57
21 Physical Exam form for a 58
Potential Blood Donor
22 Blood Stock Available by 60
Blood Bank
23 Summary Report of 61
finished blood drive event
24 Total Number of Blood 62
Donation Transactions
25 Sample Analytics by 63
Gender Report Disease

DEFINITION OF TERMS

The following terms used are defined for the purpose of the study.

Blood. Blood brings oxygen and nutrients to all parts of the body so they can

keep working.

Blood Bank. A blood bank is a facility that stores and preserves blood

collected as a result of blood donation for subsequent use in blood

transfusions.
 x

Blood Donation. A blood donation occurs when a person voluntarily has

blood drawn and used for transfusions and/or made into bio pharmaceutical

medications by a process called fractionation (separation of whole blood

components).

Blood Drive (plural blood drives).An activity, usually charitable, in which

persons are requested to donate blood, either to maintain a general supply or

in response to a specific shortage or emergency.

Blood Product. A blood product is any therapeutic substance derived from

human blood, including whole blood and other blood components for

transfusion, and plasma-derived medicinal products. Medicinal (medical

therapeutic) products derived from human donations of blood and plasma play

a critical role in health care.

Blood Type. A blood type is a classification of blood, based on the presence

and absence of antibodies and inherited antigenic substances on the surface

of red blood cells. These antigens may be proteins, carbohydrates,

glycoproteins, or glycolipids, depending on the blood group system.

Community. A group of people living in the same place or having particular

characteristics in common.

Data Visualization. An interdisciplinary field that deals with the graphic

representation of data.

Donor. A donor is an individual, organization, or government that makes a

voluntary donation.
 xi

Geographic Information system. A geographic information system (GIS) is

a framework for gathering, managing, and analyzing data. Rooted in the

science of geography, GIS integrates many types of data. It analyzes spatial

location and organizes layers of information into visualizations using maps

and 3D scenes. It is a computer system that captures, stores, verifies, and

displays data about locations on the Earth's surface. Any information with a

location can be used by GIS. The location can be specified in a variety of

ways, including latitude and longitude, address, or ZIP codes.

Hemoglobin. Is a protein in your red blood cells that carries oxygen to your

body’s organs and tissues and transports carbon dioxide from your organs

and tissues back to your lungs, if a hemoglobin test reveals that your

hemoglobin level is lower than normal, it means you have a low red blood cell

count (anemia).

Information System. Information Systems is an academic study of systems

with a specific reference to information and the complementary networks of

hardware and software that people and organizations use to collect, filter,

process, create and also distribute data.

Phlebotomy. It is when someone uses a needle to take blood from a vein,

usually in your arm.

Recipient. In medicine, someone is given something, such as a blood

transfusion or an organ transplant that is derived from another person (the

donor).

Requestor. The definition of a requestor is someone who asks for something.

"Requestor" is a formal, almost legalistic, term for someone who asks for
 xii

something. (The person to whom such request was made would be the

"requestee.") An analogy would be mortgagor/mortgagee. "Requester" is a

more casual term for someone who happens to ask for something.

Rural Health Unit. The rural health unit provides the basic health services for

the population it serves, i.e.: A. Maternal and child health work. B.

Communicable disease control work.

Vital Sign. The heart rate, respiratory rate, body temperature, and sometimes

blood pressure of a person are all vital signs, according to the medical

definition.

Web-based system. A web-based system is an application that is accessed

via HTTP. The term web-based is usually used to describe applications that

run in a web browser. It can, though, also be used to describe applications

that have a very small component of the solution loaded on the client PC.
 CHAPTER I

INTRODUCTION

Donating blood is important and the demand for safe blood is

persistent. By donating blood it can support families who have been in

accidents or undergone injuries, mothers with labor problems, cardiac surgery

patients, and children undergoing chemotherapy treatments, premature

babies struggling to breathe with tiny lungs, or patients with extreme anemia.

In both urban and rural areas, the need for blood transfusion can occur at any

time and the unavailability of blood has led to deaths and many ill-health

patients (World Health Organization, 2020).

In the Philippines, blood is usually collected from unpaid individuals

who donate blood voluntarily, through blood drive activities. There are

standard procedures of blood donation for potential donors implemented by

the Department of Health. First the donor will be asked to fill up a Donor's

Form (registration form) upon arrival at the blood collection site. Second, a

healthcare staff will ask regarding his/her health history. Third, a pre-donation

educational counseling will be given by a trained professional staff (this is

usually done for first time donors). Then the donor will undergo physical

screening of vital signs which includes the following: weight, blood pressure,

pulse rate and body temperature that need to be checked to determine

whether he/she will pass the qualifications of donating blood, or not. After

that he/she will also be examined by a physician. Lastly, a small sample of

blood will be taken to check your blood type and hemoglobin level (Republic

of the Philippines Department of Health, 2020).

 2

National Blood Services is the Philippine Red Cross’ arm that delivers

adequate, safe and quality blood supply to the most vulnerable. Through its

88 blood facilities nationwide, the PRC has been the leading provider of blood

and blood products in the country. They continuously promote voluntary non-

remunerated blood donation to attain adequacy. Also, there are national blood

centers/blood banks that are connected to the hospitals and Rural Health Unit

(Red Cross Philippines, 2019).

There are guidelines on how to avail blood from the Philippine Red

Cross. Thus, ask the doctor or the nurse for a blood request form from the

hospital where the patient is admitted. The details needed are: full name of

the patient, age, sex, and status, blood type and RH group, blood component,

number of units needed, diagnosis/indication for transfusion, printed name

with signature of the attending physician (Red Cross Philippines, 2019).

Another way to find available types of blood is through the rural health unit like

the Los Baños Municipal Health Office that is accepting requests for blood. 

The requestor will receive a reservation form from the rural health unit-1. Then

the said office will endorse it to their nearest blood bank partner and they will

send a copy of the blood request form to their blood center partner e.g. San

Pablo Colleges Medical Center. The requestor is required to bring a cooler or

styrofoam box with ice, to preserve the shelf life of blood to be picked up.

They will be giving 1 bag of blood for free entitled for those who have and will

present 5 certificates of voluntary donors. Without those certificates he/she

needs to bring the amount needed to pay for the blood service fee. Blood

service fees charged are mandated by the Department of Health. This service
 3

fee charged is the significant costs associated with recruitment, collection,

testing, processing, storage and handling of blood. 

There are many contact gaps in our country between patients

(accepting blood), donors (who donate blood), blood banks and hospitals.

Medical services are not equally accessible in every part of the nation. If

anyone is in need of blood, she/he looks for it inside his/her family members

and then closest hospitals and blood banks. If they are unable to handle blood

in these ways, it is very difficult for them to contact other people in a short

amount of time to obtain blood (K M Akkas Ali, Israt Jahan, MD. Ariful Islam,

MD. Shafa-at Parvez, 2015).

The concept of centralization or regionalization of blood services

started to be introduced in the United Kingdom, France, the United States,

Australia, Japan and other countries over 30 years ago. It was the World

Health Organization that conceptualized the model of the blood center and

proposed the scheme to developing nations such as the Philippines. This

model has been suggested by a number of consultants from Israel, the UK,

Australia and the World Health Organization for the Philippines since 1992.

Moreover, the Philippine healthcare system's aim of achieving improvements

has moved our government to push regulations in all major fields. The

transfusion system in the Philippines is now focused on ensuring access to

safe, reliable and accessible blood products, improved facilities and services

(C.M.M Nalupta MD, 2011).

According to (Aghajani, 2017), GIS (Geographic Information System)

technology should be considered as an important tool that is actively engaged

 4

in public health. It provides accurate information, makes robust visualization,

and monitors public health-related problems. It records and displays the

available resources and material in any given geographical region. Overall,

GIS technology has become an essential tool that upgrades our knowledge

and understanding on public health problems. Today, because of health

quality awareness, the need to rapidly diagnose and evaluate public health

problems has become an urgent issue. In this regard, GIS with strong

analytical performance would play a decisive role in health data collection and

analysis. By collecting information, GIS manages the epidemiological data,

describing the severity of disease, and assessing the prevalence in different

geographical regions.

The proposed system aims to create a website that has the potential of

helping the community in terms of tying all the blood bank centers of Laguna

in a centralized database. The researchers will use the data from the rural

health unit of the municipality of Los Baños to evaluate the system with its

specific requirements. It will include successful donor basic information, and

blood distribution records. Using the internet and accessing this Web-based

GIS, people can access all the information they need, such as precise

location of blood type available in the registered blood banks.

 5

Project Context

The Department of Health (DOH) intensifies its advocacy on voluntary

blood donation to provide and allocate safe blood supply, sustaining its

adequacy and ensuring accessibility. Saving the lives of millions of Filipinos in

need of blood transfusion, the State through the Republic Act 7719, also

known as the National Blood Services Act of 1994 promotes voluntary blood

donation. This is parallel with upgraded blood service facilities and

organization into a National Blood Transfusion Service Network for rational

provision of adequate and safe blood supply in the country. Based on the

national data, only 23% of women are donating blood from the total blood

units collected. The goal is to collect 1 million blood units annually for enough

blood and blood products to patients in need of blood transfusion. In 2016,

the partial total blood units collected was 930,000 and a gap of about 70,000

blood units. 82% blood units came from voluntary blood donation, 17% from

replacement donation and 1% from paid donation. They aim to get the 1

million blood units collected by 2017 and meet the global target of 100%

Voluntary Non-remunerated Blood Donation by 2020 (Department of Health,

2017).

Furthermore, the timely availability of safe blood is essential in all

health facilities in which transfusion is performed, but in many developing and

transitional countries there is a widespread shortfall between blood

requirements and blood supplies (World Health Organization, 2010). Through

this issue researchers build an idea on how to make it convenient for people

searching or in need of blood that will not require them anymore to go to the
 6

blood banks just to inquire about the available blood type but instead will do

this thing through online inquiry. In this study, the researchers aim to develop

a “Web-based Information System for Blood Donation with Geographical

Analysis and Distribution in the Municipality of Los Baños” that will help

the community in providing online information to the families of the patients

who are in need of immediate blood transfusion to make it easy for them to

search for blood (availability of blood donated stored in particular blood bank).

The system will have a bloodletting campaign module for the community to be

more aware of the health benefits of donating blood and can view the user’s

schedule of future blood drive events. With the help of adequate knowledge, it

can encourage the people to donate blood regularly and that would be a great

help to the community.

Research Objectives

The main objective of this study is to develop a web application in

order to help the community in providing online information to view where to

find specific blood in stock, in particular blood banks registered to the

system. By using the developed system it will make it easier for people who

are searching for blood to find the availability of specific blood types they

need in times of emergency situations. Specifically, this project has the

following three primary objectives:

1. To conduct a study and create a web-based system for gathering

and storing information about blood donation and distribution.

2. To design a web portal which provides details to the community to

view available blood in stock in each blood bank that is registered to

 7

the system.

3. To develop a data visualization of blood donated and blood

distribution using GIS (Geographic Information System) technology,

and evaluate the acceptability of the developed system with software

evaluation which is based on ISO 25010 (International Organization

for Standardization).

Conceptual Framework

Conceptual framework is a project plan or outline. It helps to guide the

researchers in developing the project.

Figure 1. Conceptual framework

Figure 1 illustrates the representation of the basic component of the

web portal. The researchers define the data collected in the Rural Health Unit
 8

of Los Baños to use as the sample data of the project and the connection of

modules. User management module has a capability in managing the user

such as managing accounts, setting appointments to donate blood, requesting

for blood units. Upon request the user can view available blood types in stock

by certain blood banks. All the data or information that is input in the user

management is stored in the database, in particular the blood bank that is

already registered to the system. Registered users can view announcements

about the upcoming blood drive activities and their schedule screening (if

there's any). While any institution/organization can have their respective

"admin-2" account and be able to tap into the system to request future blood

drives. To be able to have a partnership account, they have to communicate

with a particular blood bank to create a partnership account (to be created by

the admin-1). The registered users can easily view the availability of such

blood types upon request, while all the successful blood

distribution/dispensing has been recorded to the blood transaction module.

Project Purpose

The main purpose of this study is to create a web-based system that

will provide a data visualization of the successful blood donation and

distribution report. This helps the residents searching for specific types of

blood in emergency cases and accepting different institutions/organizations to

host future blood drive activities. Blood donation is extremely important as

well as blood donation distributions. Similarly, it is to fulfill a better system that

acts as a more efficient tool that has a lot of potential in helping the

community.
 9

The target beneficiaries of this project are:

Recipient of blood or a blood requestor

This research would help them and their families minimize the time

they need to search for blood, which increases the possibility of saving lives.

Blood Donors
This research would allow them to gain more knowledge of the benefits

of blood donation. The study will help them in terms of data collection that is

automated, and easy access to their records.

Community
This study was beneficial to the community. It helps the people to

reduce time in the long process to know the availability of blood type in stocks

in the registered blood banks.

Rural Health Unit/Blood Bank

This study will help them improve the management of data collection to

a more accurate, easier and user-friendly system.

Institution/Organization
The platform can be accessed by various institutions / organizations.

The system would be used to develop an effective channel for communicating

with the general public about blood donation services and their relevance to

society.

Future Researchers
For researchers with similar studies, this study can serve as a guide. In

performing new research, the concepts raised could be replicated as

reference data.
 10

Scope and Limitation of the Study

The study entitled “Web-based Information System for Blood Donation

with Geographical Analysis and Distribution in the Municipality of Los Baños”

is a system that gives a data visualization of blood donated and blood

distributions. It is also designed in providing online information about the

blood stock available in each registered blood bank. The web-based

information system supports four categories of actors: Admin-1(these are the

authorized person in each registered blood bank), Users (these are the

residents who can request blood or be a potential blood donors), Partnership

admin-2 (intended for institution/organization that will host a future blood drive

event) and Partnership volunteers (these are blood donors volunteers from an

organization). Each user's activities will run independently without affecting

the operation of one another. The web system is capable of detecting

duplicate names of users. The system will also allow registered users to

request for blood online and/or request for appointment for donating blood.

This project will help the blood bank/rural health unit improve the

management of data collection to a more accurate, easier and user-friendly

system.

The proposed system is designed with an insight into the necessary

modification that may be required in the future purposes. The development of

a web-based system can produce successful blood donors and blood request

records. The information that will be generated from the system can provide

data visualization of the blood donors and distribution report. This data will

derive from each finished blood drive event from any organizations,

institutions, or hospitals (e.g. Laguna State Polytechnic University, ST. Jude

 11

Family Hospital. Los Baños Municipal Health Office) by tapping the system to

request for blood drive activities/events to their respective blood bank

partners. The limitation of the system is that it cannot be available to use in

personal computers and mobile browsers without internet connection. Only

the admin-1 can view the geographic information system or the data

visualization. The requestor doesn’t have access to the donor’s basic

information, in compliance with the data privacy act.

The following have been taken into serious consideration, however due

to the nearness of the deadline there may not be enough time to make

changes to the system. Here are some suggestions and all the possible

improvements the proponents have received upon consultation from an

Information Technology specialist that were not fully implemented at this

point. The system should disallow snooping into the database of donors (their

blood type) etc. That means, there are certain levels of security that need to

be assigned for each actor. Top most security level 1 is Admin-a (he can look

into a person’s blood type). The admin work function as level 1 has the

access to manipulate all the modules for future innovation. Access level-2

(like Level 1 but can’t look into a person’s blood type) He can run metrics but

is not able to manipulate all the modules. Thus, the job function of level 2 (e.g.

nurse/facilitator of blood drive) is just to check on the metrics of voluntary

blood donors. He can create a Level 3 delegate. Access level-3, person-c can

schedule like above levels, but he cannot see the blood type of the person

etcetera and he cannot create a new delegate. In other words, depending on

the security level of the person, the data view may be displayed or hidden

(like blood displayed for level-1 only, not for level-2, level-3). That’s how the
 12

security level has to work and would have been implemented for system

enhancement. Therefore, in user sign-up, the user type (admin, user comes

as a selection). When a person tries to register as a user (whether a donor

and/or requestor). The admin page must be very secure and not all people

can get into that page. Additionally, username and password must be

managed by the admin where the central database would be stored for every

input data. If the registered person forgot his/her sign-in information, there

must be a 2-step authentication or other means for the person to reset the

password. Besides that, the schedule form (admin duty to assign a date) for

clarity, after the admin fills a date (mm/dd/yyyy), the system is not capable of

automatically displaying the day of the week (i.e. Wednesday). The admin can

set the time and date for a voluntary blood donor. While in Partnership, the

registered organization/institution can set an appointment for time and date

that is subject for approval by the admin.

The software consists of the following modules:

User Profile
The users will log-in to the system by signing-in the correct username

and password. If a new user, the system will require to fill-up a sign-up form.

Thus, click the create an account button and select the user type “user”, then

he/she will have to provide the following: full name, age, gender, complete

address, date of birth, contact number, guardian name, guardian contact

number. Upon filling up the form the system will allow the user to create a

username and password, and hit the submit button. This demographic

information is required for using GIS technology. In other words, it will

construct a graph representing geographic information from data gathered.

 13

Finally, the user can login using his/her new account by signing in correctly

his/her username and password to be able to have access to the system.

The system provides a separate registration function for the blood bank

partner. The admin-2 must register by the authorized blood bank admin-1 as

their “blood bank partner” to be able to have a username and password that

can access the system to request a blood drive event in particular blood bank.

This user registration is intended for blood drive hosts like institutions and

other organizations such as Rural Health Unit, Laguna State Polytechnic

University and St. Jude Hospital etc. The system allows the partnership

admin-2 to log in and can create “partnership volunteer” accounts. Admin-2

can only view new requests from their partnership volunteers or potential

donors, but the blood request function is not included.

The system allows the admin-1(blood bank admin) to view new

requests from users whether to donate or request for blood, that is subject for

approval from the admin before they can view the "accept" button to fill up

either the donate blood or request blood form and can proceed to their

respective request. The system also allows both admin (from blood bank and

blood bank partner) to manage campaigns posting and/or set a schedule for

voluntary blood donation recruitment.

Data Management Module

For the first time actor, the system will require the user to register first

by filling up the sign up form to have an account. After that go to the login

page of the system, select the user type “user” then he/she will need to log in

successfully with the correct username and password, then it will redirect the

user to the landing page which consists of schedule of screening, schedule for
 14

blood dispensing and campaign. Click the donate navigator to view the

donation form, then choose which blood bank to request a schedule for blood

donation and input their blood type (assuming that the actor is a first timer to

use the system but not a first timer to donate blood). The blood donation form

includes the following data: blood bank address, blood type, and it has a

“submit” or “cancel” button. This request is subject to approval by the admin.

The admin will provide a schedule to the donor when to go to the blood drive

site to donate blood (i.e., nonetheless in case of emergency that the admin

can set a schedule for individual donors to go to a blank bank or hospital and

also for the purpose of setting to avoid crowds to prevent illness spread).

Otherwise, if the user wants to request blood, the registered user will have to

click the request navigator. Then select which blood bank, then choose what

blood type needed or whether it is available in blood stock, then enter the

donee/recipient’s name (person who will benefit from the blood unit). The

request form consists of data i.e., blood bank, blood type and patient name,

and it also has a submit or cancel button (can add more data to this form such

as patient age, address, contact number, hospital where the patient was

admitted, number of blood units needed, name of attending physician, and

diagnosis). This pending request is subjected for the admin approval and set

schedule for blood dispensing.

The system also provides an add account function for another admin

and will show a create account form for the user type “admin” to fill-in. Another

admin from another blood bank will be registered and can have level-1 admin

access, given the unique code specified by the proponents.

 15

User Manage Account

The user manage-account settings consist of three sub-modules.

These are Manage accounts, Donate, and Blood Request. In the manage

account module, users can update his/her password. While in the Blood

Request, it can view available bloodstock upon selecting specific blood

centers that are already registered to the system. Furthermore, the system

allows the users to view the upcoming blood drive event, the health benefits of

donating blood and it has a log out button that is recommended for security

purposes.

Information Management Module

In this module, the blood donation and blood request are subject to

approval by the administrator. This module is designated to manage and

monitor. The module restricts only to the administrator from the blood bank to

be able to view the data visualization reports. Each administrator can view all

the blood transaction types in their particular blood bank which includes the

successful blood donation and blood distribution records.

Blood Bank Module

This module has one sub module which is the blood transaction

module. This sub module is used to build transactions for entry (blood

requests) and successful release (blood dispensing). In this module, users

can become a donor or requestor for a blood unit only if they are already

registered and successfully log in with their accounts.

Data Analytics
The system will display a GIS mapping that will show the location

information of municipalities. The system shows successful blood donation

 16

reports in graphs such as age report, gender report, and available blood stock

per area.

The module provides a simple interface. Data analytics is a form of

displaying data by using the graph. Each report is gathered and organized

through the system using a Map box, but it only gives the total number of

blood donated/distribution and not the total of users of the system.

 CHAPTER II

REVIEW OF RELATED LITERATURE AND STUDIES

This chapter contains various literature, studies and systems from

various e-books, journals, and websites that explain the importance and

feasibility of the proposed research.

Blood
Methods for optimizing a variety of health-care themes have been

created, ranging from hospital resource management to the delivery of care

services across a jurisdiction. Optimization strategies, on the other hand, will

benefit other health-care systems that have only been mentioned in passing.

The Blood Donation Information Management (BDIM) plan is one of them,

and it helps to ensure that Transfusion Centers (TCs) and hospitals have

enough blood (Seda et al, 2016). Furthermore, depending on the Rhesus

factor (Rh+ or Rh-), blood is categorized into four classes (A, B, O, and AB),

and each donor must be properly matched to the patient who will receive his

or her blood. Because blood might spread infections, it must be screened

before use. Whole-blood donation, in which the whole blood is immediately

collected in a plastic bag, and apheresis, in which the required blood parts are

separated using a mechanical collection equipment, are the two main types of

donation. Blood requires unique handling and storage procedures, and its

shelf life is restricted from donor to usage, necessitating regular machine

feeding (Greening et al, 2010).

 18

Blood Donation
A blood donation occurs when a person gives their blood willingly to be

extracted and utilized for transfusions or to be turned into bio-pharmaceutical

medications through a method called fractionation (separate of whole-blood

components). Donation might come in the form of whole blood or specific

components (the latter called apheresis). Blood banks are also involved in the

selection process as well as the processes that follow it. Many blood donors in

impoverished nations currently donate blood voluntarily for the benefit of the

community. Existing resources are limited in some areas, so donors usually

donate blood when a transfusion (directed donation) is required by relatives or

friends. Many contributors give as a matter of charity, however in countries

that accept paid donations, some people get reimbursed. Other benefits, such

as paid work time off, may be available in some instances. People may even

have blood extracted for their own use (autologous donation).

According to the Department of Health website, the basic requirement

of a potential blood donor are the following: 1) Weight at least 110 lbs. (50

kg), 2) Blood volume collected will depend mainly on the donor's body weight,

3) Pulse rate must between 60 and 100 beats/minute with regular rhythm, 4)

Blood pressure between 90 and 160 systolic and 60 and 100 diastolic, 5)

Hemoglobin that is at least 125 g/L. Potential donors are tested for something

that may make it dangerous to use their blood. The screening requires

checking for diseases, including HIV and viral hepatitis, that can be spread

through a blood transfusion. The donor must also answer medical history

questions and take a brief physical test to make sure that the donation is not

dangerous to his or her health. Moreover, the amount of blood that is drawn
 19

and the procedures differ. The collection can be performed manually or with

automated devices that only take particular blood components. Most of the

blood components used for transfusions had a limited shelf life, and it is a

persistent issue to maintain a consistent supply. This has led to some

increased interest in auto-transfusion, whereby the blood of a patient is saved

for continuous reinfusion during surgery or, alternatively, is "self-donated"

before it is needed (Wikipedia, Blood Donation, 2007).

Web-based Information System

Data from the web demonstrates the benefits of multimedia technology.

With today's fast broadband connections, complex material can be streamed

to any device in the world. For some people, this is a plus because the data

can be accessed and viewed anywhere and whenever it is convenient for

them, which is important for a busy executive. The internet is being used to

distribute a large volume of interactive multimedia information. A web-based

information system is one that employs Internet-based web technology to

deliver information and services to users, as well as other information systems

or applications. It's a software framework whose major goal is to use

hypertext-based concepts to publish and retain data (Wikipedia, 2018).

Geographic Analysis
Geographic research requires different processes of thought. The

processes involved in arranging geographic information are often difficult to

distinguish from the methods used in evaluating it. In many cases, the two

processes go on simultaneously. But in other cases, the manipulation of raw

data into an easily understood and functional form is accompanied by analysis

(Geographic, 2015).
 20

GIS
A geographic information system (GIS) is a conceived structure for

collecting and analyzing geographical and geographic data. GIS applications

are computer-based tools that enable users to generate interactive queries

(user-created searches), store and change geographical and non-spatial data,

analyze spatial information performance, and visually display the outcomes of

these activities by presenting them as maps. Geographic information systems

are used in a variety of tools, techniques, strategies, and approaches. It is

associated with engineering, planning, administration, transportation, logistics,

insurance, telecommunications, and industry, among other activities and

applications. GIS and location intelligence technologies also serve as the

foundation for location-enabled services that focus on geographic analysis

and visualization. GIS allows you to connect previously unconnected data by

utilizing location as the "primary index variable." The date and time of

occurrence, indicating longitude (x), latitude (y), and elevation (z), can be

used to record the places and extent of the Earth's space time, as well as the

x, y, and z coordinates (z). All references to Earth-based, spatial-temporal

position and scope should be linked together, eventually leading to a "real"

physical location or scope. This main feature of GIS has begun to open up

new avenues for scientific inquiry and study (Wikipedia, Geographic

Information System, 2015).

 21

Advantages
Web-Based

1. Customization for different devices

For use on different platforms, such as mobile devices, content within

web-based applications can be easily customized. This makes the program

user-friendly and fun to use, as it is possible to change the presentation of

information accordingly. In reality, customizing web-based applications is

often simpler than it is for regular desktop applications (Tomas, 2015).

2. Integration with other systems

Web-based applications provide a much greater opportunity than

desktop applications to integrate with other systems. Compared to web-based

applications that are considerably more interoperable, localized software is

isolated. This is because web frameworks can be more seamlessly connected

together than two entirely distinct structures (Tomas, 2015).

3. Increased flexibility and scalability

Just as updates are easy to introduce, this means it is also easy to

increase the application's ability to develop with your business. Your web-

based applications will promote it, as you need more processes to happen

simultaneously. Where problems exist, servers can be completely replaced

without disrupting the entire operating system. This therefore decreases any

downtime that you may otherwise experience (Tomas, 2015).

4. Protecting your data

 22

A good way to safely access centralized data is provided through web-

based applications. Only the person or team overseeing them will be directly

accessed by servers. Servers can be completely redundant and reused by the

use of cloud storage to reduce downtime as a result of a catastrophe. This

eliminates the need for the protection of any computer on which the

application is used to be maintained. Overall, the risk of unauthorized access

is reduced and putting security measures in place is simpler, since it is done

centrally (Tomas, 2015).

GIS

The reliability of using GIS software has been shown in studies. For

instance, the geographical distribution of women's health services provided by

urban, community-based free clinics was studied by McLafferty and Grady.

GIS data showed large differences between different racial/ethnic groups in

health-care coverage. When the data is shared, to serve more of the local

population, neighborhood clinics reallocate their services (Sara R. Graham,

MPH, Christine Carlton, MPH, Donn Gaede, DrPH, Brad Jamison, PhD, MPH,

2011).

GIS was used by Choi et al. in a Baltimore group to classify

environmental health threats. At a nonprofit community clinic, the researchers

then surveyed patients. Community stakeholders have found connections

between geographical location and environmental exposure by linking the

survey information to GIS data. They concluded that GIS mapping makes

health information more available and easier for community members to

interpret. The graphic representation of data is useful because public health

 23

programming relies on information, since it ties health information to its

geographical location. As a result, people are seeking new ways to fix issues

in public health (Graham, Carlton, Gaede, and Jamison, 2011).

Disadvantages
Web-based

Browser technologies are too limiting.

JavaScript has developed into a decent general-purpose language, but

all things for all people can hardly be expected. User interface code written for

the Web paradigm in languages such as C++, Objective C, or Python can also

be both more effective and more maintainable than code (McAllister, 2009).

When it comes to rich interactivity, HTML and CSS are obviously

deficient. Witness the explosion of plug-ins like Flash, QuickTime, and

Silverlight for multimedia. The complexity and maintenance cost of your

applications is increased by depending on these outside dependencies

(McAllister, 2009).

Related Literature and Studies

In many countries, the lack of this life-saving fluid has become a chronic

issue in providing medical care. In every emergency situation, patient relatives

run around to get particular types of blood when unavailable at the medical

institution, without sufficient details on the nearest source available. While

blood bank management systems exist that help identify accessible blood

bank centers with the appropriate type of blood, they do not provide details

about the nearest center and donor. This study has therefore established a

web-based framework that offers data for the discovery of the highest
 24

proximity to blood bank centers and human donors during emergencies.

Technologies for web development were used and the Google Map API was

used to monitor, measure and can view each blood bank and donor's position.

Instead of traveling from one hospital to another in search of a particular blood

type, the device therefore lets users receive blood more rapidly in order to

minimize the number of deaths caused by lack of blood during emergencies

(Babajide AyeniOlaperi Yeside SowunmiSanjay Misra Rytis

MaskeliūnasRobertas DamaševičiusRavin Ahuja, 2020).

Maintaining a Safe and Adequate Blood Supply during the Pandemic

Outbreak of Coronavirus Disease (COVID-19)
The World Health Organization's interim guidance on the management

of the blood supply in response to the pandemic stated that blood services

should continually assess their blood stocks carefully in anticipation of

uncertainty in the scale of collection activities in order to manage the demand

for blood. However, blood transfusions will be required in emergency

scenarios such as trauma, postpartum hemorrhage, severe baby anemia,

blood dyscrasias, and urgent procedures that require blood. COVID-19

patients with severe sepsis or who require extracorporeal membrane

oxygenation assistance may also require more supplies. Demand for blood

and components may drop during widespread transmission as the health-care

system turns to treating an increasing number of COVID-19 patients and

elective operations and non-urgent therapeutic procedures are postponed.

But blood transfusions will still be required in emergency scenarios such as

trauma, postpartum hemorrhage, severe baby anemia, blood dyscrasias, and

urgent procedures that require blood. COVID-19 patients with severe sepsis
 25

or who require extracorporeal membrane oxygenation assistance may also

require more supplies (World Health Organization, 2020).

Web-based Information System for Blood Donation

This study provided a number of services, including keeping track of

data, analyzing various parameters for research purposes, and delivering

online information. Users can utilize the system to look for, collect, and donate

blood to patients who are running out of blood and are in danger of dying. The

established system is highly secure, and it may be expanded to additional

welfare societies, health organizations, and hospitals via WAN (Khan and

Qureshi, 2019).

A Web-based Blood Donor Management Information System for the Red

Cross Society, Uganda (WBBDMI)
The study was developed to help in the management of blood donor

information and to make/control blood distribution in various parts of the

country based on hospital needs. The system has features that allow users to

quickly access donor details collected across the country. It allows for the

monitoring of the results and performance of the blood donation activity in

order to ensure that the organization's relevant and quantifiable objectives are

met. It manages medical reports in a timely, confidential, and secure manner,

allowing for better planning and decision-making and hence enhanced

medical care delivery (Kanobe Fredrick).

Development of an Online Blood Management System

The study's major goal is to create a cross-platform web interface that

will allow anyone to get full contact information for possible donors in the area.

There are several automated blood management systems available, such as

Facebook blood donation, but none of them provide an effective algorithm that
 26

takes into account aspects such as blood donation frequency, last date of

donation, gender and age factor. They looked at all factors at the same time

to discover the right donors. This search engine will be useful in discovering

possible donors from huge databases for automated blood donation

businesses and other blood banks (Kabir and Bappy,2019).

Online Blood Bank Management System using Android

The project's primary objective is to save people's lives by providing

blood. It is designed to allow users to see information about surrounding

hospitals and blood banks. The developed program aids in the selection of a

local hospital via the internet by tracing its location using GPS. It also has a

severe accident alarm system, which means that an ambulance will be

dispatched to your location without wasting time. It cuts down on the time

spent searching for needed blood at blood banks and hospitals to a larger

extent. As a result, the program gives needed information in less time,

allowing for faster decision-making (Jain, Nirmal, Sapre, and Mone, 2016).

Blood Donation System for Online Users

The system provides how to obtain blood at critical times in order to

live a longer life. The matcher method uses rules based on blood donation in

Myanmar's blood banks. The system has saved information about donors and

patients so that it is ready to provide blood right away (Tint and Mai, 2015).

Bharat Blood Bank in India

After understanding the basic prerequisites for donating blood, donors

in India can register at the Bharat Blood Bank. Bharat Blood Bank requires the

donor's name, password, and ID in order for him to have access to his

account, which includes information such as his date of birth, blood type,
 27

gender status, and weight, as well as his email address, cell phone number,

city, address, state, country and weight, as well as email address, mobile

number, city, address, state, and information about kidney, cancer, and heart

disease, as well as the date of his most recent blood donation.People in need

of blood will then look for a list of blood donors on the internet.

BhartBloodBank.com allows recipients to search for more donors in their area

by location. The donor's phone number is listed on the website for recipients

to call. BharatBloodBank.com also provides blood donation information,

including advice, scientific data, and other resources.It suggests that blood be

donated at other blood banks. BharatBloodBank.com provides these services

free of charge. Furthermore, the information gathered is not used for any

commercial purposes by the site (Bharat Matrimony Group, 2015).

The Optimization of Blood Donor Information and Management System

The Optimization of Blood Donor Information and Management System

by Technopedia offered a web-based platform and an Android application to

make it easier to find blood donors. The android app makes use of GIS to

locate potential donors in the area.The goal of this website is to keep up to

current useful information about donors who have already donated blood in

various hospitals so that when it is needed for others, they can use this

website to find new donors. A system database is included in the online

application, which stores information about present and new donors and

acceptors. The biggest problem is a lack of understanding about the

contributors in the region. The android app makes advantage of Geocoding, a

GIS function that generates a point on a map to determine the donor's closest

position. On Screen digitizing is a GIS feature that allows a patient or acceptor

 28

who requires blood from a donor to enter data on the screen of a mobile

device (Shabana et al, 2014).

Web-based Blood Donation System

It is mostly used in a web-based blood donation system to keep track

of blood stock. The study is most useful for determining whether a specific

type of blood is available in a stack and, if so, where it is available (Aware

Sachin, Arshad Rashid, Ansari aadil, Bomnake, 2014).

Online Blood Donation Reservation and Management System in Jeddah

This research is a website with a management system that allows

people who want to donate blood to help others in need to do so. It also

provides a consolidated blood bank database and allows hospitals to record

and keep data for those who want to contact with them.The website's main

goals are to educate donors and receivers, encourage voluntary blood

donations, and provide easy access to any information regarding blood types

and blood distribution in various Jeddah hospitals based on hospital needs

(Hashim, Al-Madani, Al-Amri, Al-Ghamdi, Bashamakh, and Aljojo, 2014).

Using Open Source to Create a Geographical Information System for

Blood Donations
According to the conference paper/publication, transfusion medicine is

an ideal field of health where a GIS can be used to map the geographic

distribution of blood donors. They created a portal that shows information on

blood donations.The research focused on investigating the present state of

the art, data manipulation and processing of the donor's database, and

modeling and designing a computer that could display a variety of database

queries. They analyzed the data using a statistical method as well as software

implementation.As a result, the distribution of blood donors could be

 29

calculated and cross-referenced with the location of collection. For the

purposes of interpretation, the donor distribution by group or area was made

evident. They came to the conclusion that the feasibility of such a system has

been demonstrated, and that modifications in blood donation management

can constitute a significant improvement in patient care (Gaspar, Azevedo,

Leal, and Hedayioglu, 2010).

Donor Tracker: An Innovative Real-Time Tracking System for Blood

Donors in Mauritius
In this study, they look into the prospect of employing location-aware

computing to track blood donors in Mauritius and find the closest donors in the

event of an emergency or whenever fresh blood is needed. There are several

blood donor management systems available, but none of them track the

location of blood donors in real time. Donor Tracker makes it simple and quick

to locate a blood donor, saving both time and lives (N Khodabacchas & A

Meetoo Appavoo ,2010).

Agile Scrum
The Agile scrum approach is a project management framework based

on incremental development. Each iteration consists of two to four week

sprints, with the goal of each sprint being to develop the most critical features

first and deliver a product that can be delivered. More features are introduced

into the product in succeeding sprints, and the product is updated depending

on stakeholder and consumer feedback in between sprints (Editor,

2020).While other project management approaches emphasize the

development of an entire product from beginning to end in a single iteration,

agile scrum methodology focuses on producing multiple iterations of a product

 30

in order to provide the most market value to stakeholders in the shortest

amount of time (Editor, 2020).

The agile scrum technique has a few advantages. It enables items to be

produced more quickly because each set of targets must be met within the

time frame of each sprint. It also necessitates regular planning and goal-

setting, allowing the scrum team to focus on the sprint's objectives and

increase efficiency (Editor, 2020).

Synthesis of the Study

The related literature and foreign studies acted as a guide and backed

up the proponents’ ideas for the proposed systems’ implementation and

enhancement. The researchers developed and improved new approaches,

strategies, and methods that could be used to create the developed

framework. The proposed system was supported by the ideas generated by

the researchers after reading the related literature and studies.

 CHAPTER III

METHODOLOGY

A methodology is the organized analysis of the methods applied to a

field of study. In developing the project, there are different methods that

researchers used as a guide in doing in the development of the project. And in

this chapter will discuss the different steps and requirements to develop the

project.

Figure 2. Methodology

Figure 2 shows the procedures for how the project was developed. In

this study, the first step they do is conduct a series of interviews from the red-

cross staff (the potential clients of the proponents prior covid-19 pandemic)

since it gives them knowledge or better idea of the project development and to

know the current situation. The researchers interviewed Red Cross staff in

Sta.Cruz, Laguna and asked permission if they would allow them to make a
 32

collaboration project but the proposal was rejected due to confidentiality

reasons. The researchers gather more information by conducting a series of

interviews and follow up questions from the rural health unit of Los Baños, for

better understanding of the current problems encountered and adaptation of

the new normal-situation. They chose the said municipality health center as

the base of their proposed project because these are the only parts of Laguna

that are within the reach of the researchers. The second step is software

development sampling data is used to input into the system to test the

effectiveness and efficiency of created software. On the third step, they

conducted the product backlog to the task of the developers in the project and

the priority of each, and the researchers also showed the estimated time of

every module.
 33

Systematic Approach

A research design is an organized plan to study a scientific problem. It

is the appropriate method to approach the problem.

Figure 3. Web-based Information System Approach

Figure 3 shows the step-by-step process followed by the researchers

to develop the project.

Project Management
In Project Management, the researchers carefully assess what possible

project needed to study and conduct planning that will help the users. After

planning the project, the researchers organized the needed requirements for

the development of the project.

 34

Data Collection.
The researchers gather data through an interview and survey

questionnaires that will help them to assess the need to conduct the study.

They went to the Municipal Health office of Los Baños and talked to the

chairperson and staff nurse. They gather information about the process on

how they accept voluntary blood donations and blood dispensing.

System Analysis
After managing the project and gathering the data, the researchers

analyze the process of the system to achieve an efficient way of developing a

system. They analyze what should be the main function of the system,

including the hardware and software requirements specifications.

Design
The researchers designed and layout the system using the CCS

Framework, Bootstrap version 4.0.

Build
In building the system, the researchers used sublime text. They also

use PHP architecture, and Ajax (php). Moreover, Php v7.2.5 and MySQL are

used in storing data in databases.

Test and Evaluation

The researchers seek advice from Information Technology people to

test and evaluate the system through google form survey questionnaires

provided by researchers. In addition, they also consulted an IT specialist for

more valuable comments and suggestions.

 35

Deployment
Once the testing and evaluation of the system has been done and the

result is passed. The researchers presented the system to a staff nurse of Los

Baños Municipal Health Office, and discussed that it was a generic system

and how it is used.

Maintenance
The researchers continue to maintain the system to keep the good

circumstances and security of the system.

Population of the Study

The population for this project has a total of thirty-five (35)

respondents, which are the four (4) RHU staff/health care sector, one (1)

institution/organization representative, twenty-eight residents (28), and consist

of two (2) Information Technology people to check the system and to make

sure that it has an authentication for the security of data gathered. They will

test and evaluate the system to know if the research objectives are fulfilled.

The accessible population is the selected people who reside in Los Baños

Laguna and individuals who are more likely to have a good knowledge

towards blood donation.

 36

Image Source: https://www.vectorstock.com

Figure 4. Purposive Sampling

The researchers used purposive sampling due to the limited number of

accessible populations that can serve as primary data source, and since

purposive sampling is a non-probability sampling where the proponents can

rely on their own judgement for choosing the members of the population to

participate in their study.

Sampling Design  

In the sampling design phase, the researchers used purposive

sampling. It consists of four (4) RHU staff/health care sectors, one (1)

institution/organization representatives, twenty-eight residents (28), and two

(2) Information Technology people, who are knowledgeable when it comes to

web-based information systems and technology. It helps the researchers to

prove and evaluate the possibility and accuracy of the system as well as the

downside of the system that needs improvement. This study is a big help to
 37

the residents that they can search for the availability of blood stock available

in every registered blood bank, and can request blood units using this website

without needing to visit blood banks one by one.

Data Collection Instrument

The data used in the project development will be collected from the

Municipal Health officer representatives of Los Baños. People who requested

blood from them are listed in their blood distribution records and their blood

donation records from their blood bank partner (located in Laguna) from 2017

to 2019. The researchers conducted a series of interviews and tested the

feasibility of the study by using a pre-survey form.

Statistical Treatment of Data

The researcher used the method of percentage to achieve reliable

survey results. This is important for the respondent's evaluation of the

questionnaires

%=f/n x 100

Where:

f= Frequency

n= Total Number of Respondents

The researcher used the Likert Scale Method to evaluate and interpret

the data.

X= (SA*4) + (A*3) + (D*2) + (SD*1)

TNR
 38

Where:

X= Mean

TNR= Total Number of Respondents

SA = Strongly Agree

A = Agree

D = Disagree

SD = Strongly Disagree

Table 1. Likert Scale

Rating Range Interpretation

4 3.51-4.00 Strongly Agree
3 2.51-3.50 Agree
2 1.51-2.50 Disagree
1 0.51-1.50 Strongly
Disagree
4-Strongly Agree 3-Agree 2-Disagree 1-Strongly Disagree

Requirement Specification
Requirement specification explains the needed requirement to be met

to be able to properly operate the system.

Software Requirements
The following is a list of the software that was utilized during the

creation, testing, and implementation of a web application.

GIS mapping Software

A Geographic Information System (GIS Software) is used to store,

retrieve, manage, display, and analyze various forms of geographic and

spatial data. GIS software allows you to create maps and other visual

representations of geographic data for analysis and presentation. Mapbox is a

 39

location data platform that powers several popular apps' maps and location

services. It is the largest provider of custom-designed maps for websites and

mobile apps. Well-known delivery and transportation firms such as DHL,

DPDgroup, Grubhub, and Instacart use this service. The majority of data used

by Mapbox is openly available, and it supports a community of volunteer

mappers. The core functions of Mapbox. js is adding a map to your HTML

website. Using this, the system can add a map to the homepage with a

basemap that pans and zooms, set to a specified position and zoom level,

with only one line of JavaScript.

Data Capture
Data in table or spreadsheet format, such as population demographics,

can be included in GIS. Age, income, and ethnicity are only a few examples of

demographics, as are recent purchases and internet browsing preferences.

Image Source: https://www.nationalgeographic.org

Figure 5. GIS data layers

 40

Figure 5 shows the GIS data layers that allow multiple layers of

information to be displayed on a single map. This allows people to identify,

evaluate, and comprehend patterns and correlations more quickly. GIS can

help individuals and organizations better understand geographical patterns

and relationships by connecting seemingly unconnected data.

Clustering properties with Mapbox and HTML markers

Beyond numerical clustering, the new cluster Properties feature

conveys extra data dimensions at a high level. The researchers study the

following sample to learn more about the new cluster Properties functionality.

Image Source: https://blog.mapbox.com

Figure 6.Cluster Sample with Mapbox and HTML markers

In figure 6, the dataset in this example is made up of rows, with each

row representing a single point with latitude and longitude as well as other

features to visualize. In any data visualization process it is important to

determine first whether the data being visualized is worth it. It is also worth

noting that clustering only works if the data source is GeoJSON formatted.
 41

HTML markers
You may use markers to make HTML clusters with built-in

visualizations, such as donut charts. The markers aren't the same as circular

layers. The addLayer() function is used to create circle layers, with the type

set to circle. Markers are inserted using the new mapboxgl.Marker()

component, where you can optionally input an HTML element like this:

new mapboxgl.Marker({element:
SomeHTMLElement}).setLngLat(coordinates);

Using HTML markers for clustering necessitates a lot more human

synchronization. The configuration of the clusters changes when the map

view changes (panning, zooming, and moving). This means that the number

of points per cluster changes depending on the zoom level and other factors.

Image Source: https://blog.mapbox.com

Figure 7.Cluster Sample on building the clusters using SVGs

Figure 7 shows the example of what the cluster looks like started on

building the clusters using SVGs. Create a function that accepts the clustered
 42

characteristics as well as an array of point counts as parameters. This code

creates an HTML donut chart with three primary components: an arc, an inner

circle, and text. To make an SVG with D3.js, you need to define a few

important values: the data (in array form), the SVG size, a scale based on a

domain and range, and a radius. For this particular map, they utilized the

ColorBrewer 2.0 color scheme for qualitative data.

Data Analytics

For the GIS function of the developed system, the researchers will

employ Mapbox software. To meet the purpose of visualizing and animating

geographic data, the researchers need to get the latitude and longitude of a

place on google and double check it on google map to make sure that the

given coordinates are correct.

Hypertext Preprocessor (PHP)

Means "Hypertext Preprocessor": (It is a recursive abbreviation, on the

off chance that you can comprehend what that implies). The PHP

programming language is a Web scripting language installed using HTML.

This means that PHP code can be inserted in a Web page's HTML. The PHP

code is scanned or 'parsed' by the server on which the page resides at the

stage where a PHP page is reached. Typically, the output from the PHP

capabilities on the page is returned as HTML code that can be interpreted by

the program. Since the PHP code is changed to HTML before the page is

stacked, the page does not allow clients to see the PHP code. This makes it

safe enough for PHP pages to get to databases and other secure data.
 43

JavaScript
In web creation, JavaScript is a commonly used programming

language. JavaScript is a client-side scripting language, meaning that the

source code is interpreted by the customer's internet browser rather than the

web server. This means that JavaScript capabilities can be run after a website

page has been stacked up without communicating with the server.

Query
JQuery is a JavaScript library that enables additional users to be

introduced to their pages by web designers. It is open-source and supported

under the MIT permit for free. JQuery has been the most common JavaScript

library used in web development as of late. A web designer simply needs to

reference the jQuery JavaScript document within the HTML of a website page

to update jQuery. A few sites have their own nearby jQuery duplicate, while

others basically refer to the Google or the jQuery server facilitated library.

Hypertext Mark-up Language

HTML is everywhere and is an advancement that can never be ignored

or viewed as a mere HTML4 augmentation ever. HTML 5, for basic java,

markup, system APIs, and types, is a big umbrella term for modern Front-End

Engineering. It would be possible to create almost everything you see in App

Stores with unadulterated HTML-5.Despite the fact that we will probably cover

HTML 5's most energizing highlights, for e.g., geolocation, web attachments,

nearby capability, Real-Time Communications (Web Staff, Web Socket),

Native Drag and Drop File/Hardware Access, File System APIs, Geolocation,

Computer Orientation, and Speech Input, Semantics and Markup, Multimedia,

SVG and Canvas Graphics (2D and 3D Effects).

 44

Cascading Style Sheets (CSS)

It is a style sheet language utilized for depicting the introduction of a

record written in a markup language like HTML. CSS is a foundation

innovation of the World Wide Web, close to HTML and JavaScript. In order to

empower the partition of introduction and content, including architecture, hues

and fonts, CSS is intended. This division will enhance the availability of

content, in deciding the introduction qualities, provide greater adaptability and

control and enable different pages to share organizing by indicating the

relevant CSS in a different one.

Sublime Text 3
With a Python programming interface, it is an exclusive cross-stage

source code supervisor (API). Many programming languages and markup

languages are supported locally, and functions can be used by clients with

modules, often built and maintained under free programming licenses.

Hardware Requirements
The hardware used during the development, testing, and

implementation of web-application is described below.

Desktop Specification
To be able to execute the program, it must have a good hardware unit

specification that the applications used, such as Hypertext Preprocessor and

other software, will work. In the development of said program, only one

computer is used.
 45

Table 2. Desktop Minimum Specification

PROCESSOR AMD A4-6300 APU with Radeon(tm) HD

Graphics. 3.70 GHz

HARD DISK DRIVE 500 Gigabytes

RAM 8.00 Gigabytes (3.93 usable)

OPERATING SYSTEM Windows 7 ultimate

System Development Design

Figure 8. Agile Scrum

The Agile scrum describes the process of what the researchers do

during the development of the project. Product Backlog is used during the

listing of the tasks that helps to analyze the function of the project and it

estimates time on how long a task took. Next is the sprint planning, the

researchers discussed the different functionalities of the system that needed

to be created. Then after that is the Sprint Backlog, the researchers divide the
 46

estimated time coding, designing and testing. The researchers test the quality,

usability and the function of the system before they deploy it.

Table 3. Product Backlog

PRIORITY STORY EST. HR/DAY

USER
1 As a User I want to login to the system. 10 secs.
17 As a User I want to logout to the system. 10 secs.
2 As a User I want to register to the system. 3 mins.
3 As a User I want to update accounts. 3 mins.
16 As a User I want to view the screening schedule. 30 secs.
8 As a User I want to make appointments for blood 2 mins
donation.
10 As a User I want to request blood units. 3 mins.
BLOOD CENTER ADMIN

9 As an Authorized Blood Center Admin, I want to set 30 secs.

a schedule for donors.
11 As an Authorized Blood Center Admin, I want to 30 secs.
handle blood requests.
7 As an Authorized Blood Center Admin, I want to set 2 mins.
a campaign schedule.
14 As an Authorized Blood Center Admin, I want to view 2 mins.
the data analytics by blood bank.
13 As an Authorized Blood Center Admin, I want to view 30 secs.
the data analytics by blood transaction.

4 As an Authorized Blood Center Admin, I want to add 2 mins.

a partnership account for org/institutions.
12 As an Authorized Blood Center Admin, I want to 30 secs.
remove the staff account.
6 As an Authorized Blood Center Admin, I want to 30 secs.
display the graph report by age.
 47

5 As an Authorized Blood Center Admin, I want to 2 mins.

display the graph report by gender.
PARTNERSHIP USER

15 As a Blood Center Partner, I want to Request Blood 3 mins.

Drive
TOTAL HOURS: 26 mins.

Product backlog is a list of priorities that are done within the project.

The researchers put the things that they want to see in the system. Mainly it

includes the procedure of the administrator and/or the user to perform in the

system. And also, the researcher estimates the hour/per day for every task.

For the beginning of the project naturally the product backlog is the first

phase’s method that is required. It gathered all the needed information and list

of procedures on developing the system. The researchers do some

brainstorming for the various specifications on developing the system after

completing the product backlog for the project. The details of the required

minimum requirements were discussed.

Sprint Planning
In the sprint planning, the researchers defined what is to be delivered

in each sprint and how it will be achieved. They collaborated with each other,

and set up the schedule for each task in the sprint. They tried to create a well-

organized plan in order to obtain a successful outcome.

Table 4. Sprint Backlog

PRIORITY TASK EST. HR/DAY

USER
1. As a User I want to login to the Code for Login 2
 48

system. Design for Login 2

Test for Login 2
2. As a User I want to logout to the Code for Logout 2
system.
Design for Logout 2
Test for Logout 2
3. As a User I want to register to the Code for Register 3
system.
Design for Register 2
Test for Register 2
4. As a User I want to update Code for Update 3
accounts.
Design for Update 2
Test for Update 2
5. As a User I want to view Code for View 3
campaigns.
Design for View 2
Test for View 2
6. As a User I want to make Code for Appointment 4
appointments for blood donation.
Design for Appointment 3
Test for Appointment 2
7. As a User I want to request blood Code for Request 3
units.
Design for Request 2
Test for Request 2

BLOOD CENTER ADMIN

8. As an Authorized Blood Center Code for Schedule 4
Admin I want to set a schedule for
Design for Schedule 3
donors.
Test for Schedule 2
9. As an Authorized Blood Center Code for Request 3
Admin I want to handle blood
Design for Request 2
requests.
Test for Request 2
 49

10. As an Authorized Blood Center Code for Campaign 4

Admin I want to set a campaign
Design for Campaign 2
schedule.
Test for Campaign 2
11. As an Authorized Blood Center Code for Create 3
Admin I want to set a schedule for
Design for Create 2
blood dispensing.
Test for Create 2
12. As an Authorized Blood Center Code for Update 3
Admin I want to view analytics by
Design for Update 2
blood transactions.
Test for Update 2
13. As an Authorized Blood Center Code for Add 3
Admin I want to add a partnership
Design for Add 2
account.
Test for Add 2
14. As an Authorized Blood Center Code for Remove 2
Admin I want to view analytics by
Design for Remove 2
blood banks.
Test for Remove 2
15. As an Authorized Blood Center Code for Display 6
Admin I want to display the graph
Design for Display 4
report by age.
Test for Display 2
16. As an Authorized Blood Center Code for Transaction 5
Admin I want to display graph
Design for Transaction 3
reports by gender.
Test for Transaction 2
PARTNERSHIP USER

17. As a Blood Center Partner I want Code for Request 4

to Request Blood Drive
Design for Request 2
Test for Request 2

Table 4 shows the task of the developer in the project and the priority

of each, also the table shows the estimated time of every module.
 50

Project Design

Project design is the overall design and performance of the study. It is

planning the structure, feature, and appearance of the project. The framework

shows the construction of the system.

Figure 9. System Architecture

Figure 9 shows the architecture of the system, it illustrates the

summary of the user activities in the system. This starts with logging into the

system. The administrator, primary user and secondary user, have different
 51

privileges to the web-based system. Each user needs to input the correct

username and password in order to access the system. The administrator

interacts with a system such as when he/she logs in successfully. The system

displays the particular administrator’s work dashboard in order to set

campaigns, accept blood drive requests from blood bank partners, navigation

bar clients (for accepting voluntary donors and blood requests), and analytics

navigation for data visualization. For the blood bank partner’s, they will need

to request from the blood bank admin to create an account. Then the system

will require filling up a form for them, which includes basic information such

as: name of organization, complete address, username and password. Once

successfully logged-in, the blood bank partner admin is able to view the

secondary user's dashboard. The system allows him/her to request a

schedule from the blood bank for voluntary blood donations, this has to be

approved by the blood bank admin. It also has a “create a new account”

navigation bar which has the function for the partnership volunteers to fill up a

sign-up form to have a partnership account (volunteer donors). The process is

just the same, for the partnership volunteers to set an appointment for blood

donation the only difference is that it has no blood request and is only

intended for voluntary blood donation. As a further matter, this is the following

process to have a blood bank partnership account. First request an account

from the authorized blood center admin, to fill up the partnership form then

just wait for the default username and password to be provided. After that go

to the login page, input the required username and password to be able to

have access to the system.

 52

Figure 10. Use-case diagram

Figure 10 shows the Web-Based Information System for Blood

Donation with Geographic Analysis and Distribution use case diagram. The

use case diagram shows the whole system and use cases which are;

Registration, Login, Create Campaign, View Campaign, Donate Blood, Set

Blood Donor Schedule, Manage Screening, Blood Request, Manage Blood

Request, Request Blood Drive, Manage Blood Drive Request, Display Graph

Report, View Available Blood stock, Manage Account, Add Partnership, and

Blood Bank Transaction. These use cases represent the actions that are

performed by the actors. There are four actors which are the Admin, User,

Blood bank Partnership, and Partnership volunteers. The admin actions are

Login, Create campaign, set blood donor schedule, manage screening,

manage blood request, manage blood drive request, display graph report,

manage account, add partnership, and blood bank transaction. The blood
 53

bank partnership actions are Login, View Campaign, Request Blood Drive,

and Manage account. The user’s actions, which are connected by associated

lines, Registration, Log-in, View campaign, donate blood, blood request, and

Manage account.

Figure 11. Flowchart

Figure 11 illustrates the flow of the developed system of the user

experience on the part of log in to the system and the decision of the user

whether he or she will donate or request for a blood unit, else manage an

account. Only the authorized admin from each blood bank can view the data

analytics such as age report, gender report, GIS by transaction, GIS by blood

bank and can manage the blood bank transactions.

 54

Test Plan
Test Plan is a part of Sprint Planning. It is detailing the objectives,

resources and procedures for testing of software or hardware products.

Figure 12. Scrum Test Plan Model

Figure 12 shows the phases of the test plan of the project which

consist of phases such as test coverage, test method and test responsibility.

Test Coverage
Test coverage, here, the researchers listed all the items they gathered.

They arranged it on a table that is called Product Backlog. After that, is the

Sprint Backlog, it is distributing tasks which are designing, coding and testing.

Those backlogs are studied for the good development of the project.

Test Method
In the test method, the researchers list all the item requests of each

user. Also, they list the tasks needed in developing the system. These are

codes for interface, design middle tier and test middle tier. Test methods help

researchers to identify the errors or problems while developing the system.

 55

Test Responsibility
The researchers are responsible for testing the system. They have

analyzed the code, design of the interface and functionality. This is to make

sure that before running the beta test, the device has no problems or any

bugs.

Testing and Evaluation Procedure

Figure 13. ISO 25010 Model

For the evaluation of performance and quality of the develop project

Web-Based Information System for Blood Donation with Geographical

Analysis and Distribution in the Municipality of Los Baños. The researchers

gave a beta test with a total of thirty-five (35) respondents which is four (4)

RHU staff/health care sector, one (1) institution/organization representative,

twenty-eight (28) residents, and two (2) Information Technology people. The

researchers used the ISO 25010 model as standard for Likert Scale.

Functional Sustainability, Performance Efficiency, Compatibility, Usability,

Reliability, Security, Maintainability, and Portability are the basics of testing.

 56

Likert Scale is answerable by four responses which are 4=Strongly,

Acceptable, 3=Acceptable, 2=Not Acceptable and 1=Strongly Not Acceptable.

Unit Testing

Figure 14. Unit Testing

Unit testing is a software evaluation that will test the whole system. In

unit testing the components and major functions of the system should be

checked to see if the researchers are doing right and also to find errors or

bugs to strengthen the codes used in the development of the system.

 57

Figure15. Integration Testing

In this testing phase, the researchers will make sure that the module

stated in the system architecture is functioning. Integration testing will happen

to pass all the component testing as this will serve as a test regarding the

whole functionality of the system while staging it as one with multiple functions

from its integrated modules.

Compatibility Testing
Compatibility testing is a test to distinguish the compatibility of the

project. It is to determine if the system is compatible with different hardware

and operating systems.

Performance Testing
It is a test to determine the capability of the system in terms of its

function. Also, to check if the researchers meet the expected requirements

needed for the project.

 58

Stress Testing
It is a test to evaluate the behavior of the system at beyond limit and

the range of maximum load the system can hold.

Load Testing
Load testing is a test to check the correct response of the system. This

is also a test to evaluate the behavior of the system at increasing workload.

System Testing

Figure 16. System Testing

System testing is a test to check if the researchers have followed the

system specifications stated. It also checks whether the researchers are

taking the right step to do the project or the method.

 59

Acceptance Testing

Figure 17. Acceptance Testing

Acceptance testing will be done after integration testing. The created

web-system will be tested as a whole to identify if the project meets the

specified requirements and if it fulfills the research objectives. This testing will

show the performance of the project and its reliability.

 CHAPTER IV

RESULTS AND DISCUSSIONS

The outcomes of the study are provided and analyzed in this chapter

with reference to the project's goal, which was to display the results by

objectives and beta test results.

Results by objective of the study

1. To conduct a study and create a web-based system for gathering and

storing information about blood donation and distribution.

Figure 18. Sign-up form

Figure 18 shows the fill up form for potential donors or blood requestor,

who wants to register in the system. The user type is selected upon signing-
 60

up. The system disallows snooping into databases of donors for any other

user account. To do so the researchers used the following codes.

$sql = "INSERT INTO `users` (`no`, `user_name`, `pass_word`, `user_type`)

VALUES ('$id', 'admin-$username', '$password', '0');";
$query = mysqli_query($cnn,$sql);
if($query){
$sql = "INSERT INTO `account_address` (`no`, `barangay`, `city`, `province`)
VALUES ('$id', '$barangay', '$city', '$province');";
$query = mysqli_query($cnn,$sql);
if($query){
$sql = "INSERT INTO `accounts` (`no`, `full_name`, `age`, `gender`,
`date_of_birth`, `contact_number`, `guardian_name`,
`guardian_contact_number`) VALUES ('$id', '$full_name', '', '', '', '', '', '');";
$query = mysqli_query($cnn,$sql);

Figure 19. Sign-in form

After creating an account, the user or resident automatically added to the

system. Here are the sample codes on how it was made.

$username = $frm['username'];
$password = $frm['password'];
$res[0] = 0;
$sql = "SELECT * FROM `users` WHERE user_name = '$username' AND
pass_word = '$password';";
$query = mysqli_query($cnn,$sql);$rows = mysqli_fetch_array($query);
 61

Blood bank module for partnership account

On blood bank partnership modules, any organization/institution can

organize a future blood drive event. All data gathered will be saved to their

chosen blood bank partner. However, they must communicate first to that

blood bank to be able to have a partnership account. Only the authorized

person or admin on the blood center of their choice can add a partnership

account in the system.

Figure20. Campaign form

Figure 20 shows the interface on how the admin creates or post

campaigns for incoming blood drive activities. The researchers used the

following codes.

$sql = "SELECT * FROM `campaign` WHERE date_of_campaign =

'$date_of_campaign' AND time_of_campaign = '$time_of_campaign' AND
location = '$location' AND organizer = '$organizer' AND description =
'$description' AND user_id = '$uid';";
$query = mysqli_query($cnn,$sql);
if (!mysqli_num_rows($query) > 0) {
 62

$sql = "INSERT INTO `campaign` (`no`, `date_of_campaign`,

`time_of_campaign`, `location`, `organizer`, `description`,`user_id`) VALUES
('$id', '$date_of_campaign', '$time_of_campaign', '$location', '$organizer',
'$description','$uid');";

Also, in the module, aside from posting, the blood bank module has the

capability to assess whether the potential donor is eligible for donating blood

on the day of the scheduled event, by filling up first the voluntary blood donor

history questionnaire, the result of this will be check by the admin (authorized

person) subjected whether to accept, reject or cancel.

Figure 21. Physical Exam form for a potential blood donor

Figure 21 shows the interface on how the authorized regulators

(admin) can know if the potential donor meets the requirements prior to

donating blood. With this, the researchers used the following codes.

var r = confirm("Do you want to submit physical examination?");

if(r==true){
var er = $("#exam-result").text();
if(er == 'Failed!'){
alert('Client failed on physical examination!');
}else{
 63

alert("Client has been passed on physical examination!");

const res = window.location.search;
var result_id = res.replace('?id=','');
window.location.href="accepted-donor.php?id="+result_id;
}

Those codes are used by the researchers to help them assess and

proceed to an acceptance process to make sure the donor is in good health

and feeling well prior to donating blood.

2. To design a web portal which provides details to the community to view

available blood in stock in each blood bank that is registered to the system.

Web system data analytics using Mapbox

Mapbox is a location data platform that drives many common apps'

maps and location services. This is capable of viewing the blood distribution

report in graph form in each particular blood bank admin account, based on

the inputted data or information by the registered user in every completed

blood request. While all the data input from successful blood donation of

voluntary donors is capable of viewing the available blood type in stock of a

particular blood center.

 64

Figure 22. Blood stock available by blood bank

Figure 22 shows the bloodstock available in particular blood banks that

are already registered to the system. With this, the researchers used the

following codes.

$sql = "SELECT l.lat,l.lng,GROUP_CONCAT(bt.description SEPARATOR ',')

'bloodtype',GROUP_CONCAT(s.stock SEPARATOR ',') 'stocks', aa.city
FROM stocks s INNER JOIN users u ON u.no = s.admin_id INNER JOIN
blood_type bt ON bt.no = s.blood_id INNER JOIN account_address aa ON
aa.no = u.no INNER JOIN locations l ON l.city = aa.city;";
$query = mysqli_query($cnn,$sql);
if (mysqli_num_rows($query) > 0) {
while($row = mysqli_fetch_array($query)){
$datas[] = array(
"type"=>"Feature",
"geometry"=>
array(
"type"=>"Point",
"coordinates"=>[$row[1], $row[0]]
)
,
"properties"=>
array(
"title"=>$row[4] . ", Laguna",
"description"=>"Blood Type(s): $row[2] <br>Stock(s): $row[3]"
 65

)
);
}
}

echo json_encode($datas);

3. To develop a data visualization of blood donated and blood distribution

using GIS (Geographic Information System) technology, and evaluate the

acceptability of the developed system with software evaluation which is based

on ISO 25010 (International Organization for Standardization).

Analytics
Data visualization is a form of displaying data using graphs. It is used

in visualizing and giving results. It helps users to easily analyze and

understand the data.

Figure 23. Summary report of finished blood drive event

 66

The figure 23 summary report shows the total number of registered

volunteers and successfully donated blood in every particular blood drive

event. With this, the researchers used the following codes.

$uid = $_GET["id"];
$query = mysqli_query($cnn,"SELECT
a.no,a.full_name,a.gender,CONCAT(aa.barangay,' ',aa.city,' ',aa.province)
complete_address,u.user_name,u.pass_word FROM `partnership-clients` pc
INNER JOIN accounts a ON a.no = pc.client_id INNER JOIN
account_address aa ON aa.no = a.no INNER JOIN users u ON u.no = aa.no
WHERE pc.blood_bank = '$uid';");
$i = 0;
if(mysqli_num_rows($query)>0){
while($row = mysqli_fetch_array($query)){
$i++;

Figure 24. Total Number of blood donation transactions

Figure 24 shows the total number of blood transactions completed for

every blood drive activity, which helps to analyze the availability of bloodstock

in each blood bank.

 67

Figure 25. Sample Analytics by Gender Report

Figure 25 shows the total number of males and females that are

registered to the system. The pie graph by gender increased once the blood

donor finished the transaction. The researchers used the following codes.

$uid = $_SESSION["uid"];
$res = array('male'=>'','female'=>'');

if(isset($_POST["genderTotal"])){
$sql = "SELECT COUNT(*) 'counter_gender',gender FROM (SELECT
a.gender FROM transactions_history th INNER JOIN accounts a ON a.no =
th.user_id INNER JOIN account_address aa ON aa.no = a.no INNER JOIN
blood_type bt ON bt.no = th.blood_type WHERE th.bloodbank = '$uid'
GROUP BY a.full_name) tbl WHERE gender = 'Female' GROUP BY gender;";
$query = mysqli_query($cnn,$sql);
$row = mysqli_fetch_array($query);
$res[1] = $row[0];
$sql = "SELECT COUNT(*) 'counter_gender',gender FROM (SELECT
a.gender FROM transactions_history th INNER JOIN accounts a ON a.no =
th.user_id INNER JOIN account_address aa ON aa.no = a.no INNER JOIN
blood_type bt ON bt.no = th.blood_type WHERE th.bloodbank = '$uid'
GROUP BY a.full_name) tbl WHERE gender = 'Male' GROUP BY gender;";
$query = mysqli_query($cnn,$sql);
$row = mysqli_fetch_array($query);
$res[0] = $row[0];
 68

echo json_encode($res);
}

Those codes are used to develop a web portal that offers a convenient

way for those having difficulties looking for a specific blood type they need. It

supports the end-users to communicate, visualize and analyze information.

Results of Software Evaluation

In this section, it shows the result of the evaluation based on the

questionnaire prescribed by the International Organization for Standardization

(ISO), to evaluate the project. It has a total of thirty-five respondents which is

the (4) health care sector, (1) head/representative of the organization, (2) IT

people, and (28) residents. The researchers used a google survey form and

evaluated the acceptability of the developed system with software evaluation

which is based on ISO 25010. This is to identify if the system shows a good

performance. The researchers presented the developed system to the Los

Baños Rural Health Unit staff, however they've yet to provide their evaluation

feedback due to the covid-19 restrictions in place. In order to make it more

acceptable, the researchers had another option, this is to propose the system

to the healthcare sector or individuals who are knowledgeable about blood

donation.
 69

Table 5. Result of Survey Based on Likert Scale.

Item Median Interpretation

Result of System Functionality 3.50 Agree

3.41 Agree
Result in Performance Efficiency

3.48 Agree
Result in Compatibility
3.44 Agree

Result in Usability 3.35 Agree

Result in Reliability 3.48 Agree

3.42 Agree
Result in Security
3.42 Agree

Results in Maintainability

Result in Portability

To test and evaluate the Functional Suitability, Performance Efficiency,

Compatibility, Usability, Reliability, Security, Maintainability, and Portability of

the system based on ISO 25010 software standards. In functionality, the

respondents agreed with the rating of 3.50. For performance efficiency, the

respondents agreed with 3.41 while 3.48 in compatibility which was

interpreted as agreed. In usability, the respondents agreed with the rating of

 70

3.44. For reliability, the respondents agreed with a 3.35 rating. The security

was agreed with 3.48 rating while maintainability agreed with the rating of

3.42. In portability, the respondents also agreed with a 3.42 rating.

Table 6. Overall Result of Software Evaluation.

Criteria Median Interpretation

Functional Completeness 3.49 Agree

Functional Correctness 3.51 Strongly Agree
Functional Appropriateness 3.49 Agree
Time Behavior 3.37 Agree
Resource Utilization 3.43 Agree
Capacity 3.43 Agree
Co-existence 3.51 Strongly Agree
Interoperability 3.45 Agree
Appropriateness 3.37 Agree
Learnability 3.49 Agree
Operability 3.43 Agree
User Error Protection 3.43 Agree
User Interface Aesthetics 3.49 Agree
Accessibility 3.43 Agree
Maturity 3.26 Agree
Availability 3.49 Agree
Fault Tolerance 3.23 Agree
Recoverability 3.43 Agree
Confidential 3.4 Agree
Integrity 3.63 Strongly Agree
 71

Non-Repudiation 3.4 Agree

Accountability 3.51 Strongly Agree
Authenticity 3.46 Agree
Modularity 3.37 Agree
Reusability 3.37 Agree
Analyzability 3.46 Agree
Modifiability 3.43 Agree
Testability 3.46 Agree

Table 6 shows the results of evaluation of the developed system. The

overall results of the project that was evaluated by 35 respondents. Overall,

the respondents agreed that the system is acceptable.

Result of Unit Testing

Unit testing is a process to test if the system was developed and

followed all the requirements needed according to the researchers planned.

Table 7. Unit Testing

Activities No. of Workin Percentag Not Percent

g e working
Test
Campaign
Create Campaign 10 10 100% 0 0%
List of Campaign 10 10 100% 0 0%
List of Transaction 10 10 100% 0 0%
Update 10 10 100% 0 0%
Remove 10 10 100% 0 0%
 72

Blood Drive
Create Partnership 10 10 100% 0 0%
List of Partnership 10 10 100% 0 0%
Update 10 10 100% 0 0%
Remove 10 10 100% 0 0%
Blood Drive 10 10 100% 0 0%
Request
10 10 100% 0 0%
Blood Drive
10 10 100% 0 0%
Transaction
10 10 100% 0 0%
Blood Drive
Summary
Print Report

Donor/Recipient
Donor 10 10 100% 0 0%
Request 10 10 100% 0 0%
Screening 10 10 100% 0 0%
List of Transaction 10 10 100% 0 0%
Check Result 10 10 100% 0 0%
Reject 10 10 100% 0 0%
Print Report 10 10 100% 0 0%
Search 10 10 100% 0 0%

Analytics
By Gender 10 10 100% 0 0%
By Age 10 10 100% 0 0%
GIS by Transaction 10 10 100% 0 0%
GIS by Blood Bank 10 10 100% 0 0%

Settings
 73

Blood Stocks 10 10 100% 0 0%

Manage Account 10 10 100% 0 0%
Update 10 10 100% 0 0%
Logout 10 10 100% 0 0%

Functions Percenta Passed Percentag Not

ge e Passed

Logout 100% Passe 0% 0

d
Search 100% Passe 0% 0
d
Update 100% Passe 0% 0
d
Remove 100% Passe 0% 0
d
Reject 100% Passe 0% 0
d
Print Report 100% Passe 0% 0
d
List of Transaction 100% Passe 0% 0
d
Check Result 100% Passe 0% 0
Button d

Table 7 shows the function of the system that was manually tested by

the researchers. It shows the succeeding activities are working and passed to

the unit testing. Generally, all the tested functions of the system were all

remarkable successes.

Integration Testing Results

 74

Integration result is a test where the step-by-step modules of the

system are analyzed. The table below showed the result of the testing through

conducting a manual test by the researchers.

Table 8. Test Case (Integration Testing)

Module Process Expected Actual Result Remarks

Result of the of the
Interaction Interaction
Information Manage Report Report Report Successful
Managed Managed
Management
User Add User User Added User Added Successful
Management
Delete User Delete Added Delete Added Successful
Edit User User Updated User Updated Successful
Data View graph View total age View total age Successful
Visualization and gender and gender
View total by View total by
Successful
blood blood
transaction transaction
View total View total
available blood available blood
stock in stock in Successful
particular blood particular blood
bank bank

Table 8 shows the step-by-step module that was tested by the

researchers. Each module gathers a successful remark proving that the

features of the project were developed and work well enough.

Compatibility Testing Result

Compatibility testing is tested by the researchers to distinguish the

compatibility of web portals in different browser and windows versions.

 75

Table 9. Test Case (Compatibility)

Browser Process Expected Actual Remarks

Result Result
Google Chrome Run the system System running System running Successful
in google accurately accurately
chrome
Internet Run the system System running System running Successful
Explorer in Internet accurately accurately
Explorer
Firefox Run the system System running System running Successful
in Firefox accurately accurately

Table 9 shows the compatibility of the system in different browsers.

The researchers identified the system running accurately in Google Chrome,

Internet Explorer, and Firefox.

Backward Testing Result

Backward testing is a test to identify the responsiveness of a system in

lower versions of windows.

Table 10. Test Case (Backward Testing)

Windows Process Expected Actual Remarks

Result
Result
Windows 7 Run Responsive Unresponsive Unsuccessful
Home Premium
Windows 7 Run Responsive Responsive Successful
Ultimate
 76

Table 10 shows that the researchers used Windows 7 Home Premium,

and Windows 7 Ultimate. The web portal ran responsively in Windows 7

Ultimate but unresponsive in Windows 7 Home Premium.

Forward Testing Result

Forward testing is a test to identify the responsiveness of a system in

higher versions of windows.

Table 11. Test case (Forward Testing)

Windows Process Expected Actual Remarks

Result
Result
Windows 8 Run Responsive Responsive Successful
Windows 10 Run Responsive Unresponsive Unsuccessful
Home
Windows 10 Run Responsive Responsive Successful
Pro

Table 11 shows that the researchers used a higher version of Windows

which is Windows 8, Windows 10 Home, and Windows 10 Pro. The web-

portal ran unresponsively in Windows 10 Home.

Stress Testing Result

The Stress testing is conducted by the researchers to identify the

account security of the system. This identifies the security of the system in

terms of user management.

Table 12. Test Case (Stress Testing)

 77

User Process Expected Actual Remarks

Result
Result
Admin Manage Account Account Successful
Partnership Created Created
Account
Partnership Manage Account Account Successful
Account Partnership Activated Activated
Client Account
Log In User Account Log-In Account Log-In Account Successful

Table 12 shows the manual test case that is being conducted by the

researchers. It shows the security of an account by managing different users.

Partnership created the account by admin. Additionally, login shows the

remark as successful since the user's account inputted the correct username

and password. The remark of this test was all successful since the users

accounts were all secured through user management.

Loading Testing Result

Load testing is a test to identify the function of the system when it

comes to managing the user's account.

 78

Table 13. Test case (Load Testing)

No. of Users Process Expected Actual Result Remarks

Result
Admin Edit or Remove Account Account Successful
successfully successfully
Partnership
edit or removed edit or removed
Account

Partnership Edit or Remove Account Account Successful

successfully successfully
Partnership
edit or removed edit or removed
Client Account

Table 13 shows the function of the user's account. Through a manual

test case by the researchers, the remark shows that the test was successful

since the user's account can be edited or removed by the coordinators of the

system.

System Testing Result

 79

System testing is a test to identify if the researchers followed given

requirements of the system.

Table 14. Test Case (System Testing)

Requirements Process Expected Actual Result Remarks

Result of of
Requirements Requirements
User (Sign up) Account added Account added Successful
Management in campaign or in campaign or
Submit
blood bank blood bank
Information
Blood bank Post Blood Campaign Campaign Successful
Module Drive posted posted
Campaign successfully successfully
Performance View Graph View total age View total age Successful
and impact and gender and gender
analytics
View total by View total by
Successful
blood blood
transaction transaction
View total View total
available blood available blood
stock in stock in Successful
particular blood particular blood
bank bank

Table 14 shows the remarks were all successful since all requirements

needed for the project worked well.

 CHAPTER V

SUMMARY, CONCLUSIONS AND RECOMMENDATIONS

Summary of Findings

The website has so much potential of being implemented to help the

community. Blood donation is extremely important as well as blood donation

distributions. Making this a “pilot” program for the Municipality of Los Baños

only will be very good. With improvement in user interface, it could potentially

be taken into a provincial level. The system enhancements would have been

implemented to improve usability for the first-time actor / user experience, to

learn the system as fast as possible. For instance, email addresses can also

be added as another contact medium, other than cell phone number. All form

e.g. campaign form, all required data fields, mark with * (red color) as

mandatory. While about the admin, on the central server where a “list of staff”

has Admin capability. If the admin cannot create a new campaign, it should be

grayed out or not displayed as a valid action to select. Moreover, in

Edit/Remove, if the action is removed it is better to have a text why it is

removed (reason, who removed, date/time), because the person who created

it will surely ask why it was removed. An audit trail is required. Another one in

after the admin scheduled for screening, the client/donor should have

received a notification (text or email) so he/she can get to the website to hit

the Accept button. In addition, in the client screen (blood history form) the

user form has been filled with his/her sex to begin with. The #4 and #5 must

grayed-out (means skipped automatically) when it interrogates gender from

 79

the user account. In the admin checking the donor’s blood history privacy,

only authorized users can view a person’s blood history. Any registered user

cannot snoop into the database to find out the name of a donor or blood

recipient. Furthermore, in the Accept, Reject and Cancel button the red color

must be reserved for rejection, green for accept while cancel should be blue

or yellow as it is more of a cancel entry (or don’t save entry). Likewise in the

Physical Exam form, when the blood donor arrives on the blood donation site,

it is the administrator/nurse (not the admin from the Central office) filling up

the P.E form and checking for the results. If passed, the green box with text

“pass”, red box color with the text inside as “fail”.

This project aims to develop “Web-based Information System for Blood

Donation with Geographical Analysis and Distribution in the Municipality of

Los Baños” that gives a data visualization of number of bloods donated,

distribution of blood per area in the cities of Laguna and providing online

information about the blood stock available in registered blood banks. The

web-based information system supports four categories of actors: Admin-

1(these are the authorized person in each registered blood bank), Users

(these are the residents who can request blood units or potential blood

donors), Partnership or admin-2 (intended for institution/organization that will

host a future blood drive event) and Partnership volunteers (these are blood

donors volunteers from an organization). Each user's activities will run

independently without affecting the operation of one another. The system will

also allow registered users to request for a blood unit through online and/or

set a schedule for donating blood. This project will help the blood banks or the
 80

rural health unit for improving the management of data collection to a more

accurate, easier and user-friendly system.

Conclusions

Based on the findings of the study, the following conclusions were

given.

To conduct a study and create a web-based system for gathering and

storing information about blood donation and distribution.

The researchers developed the web portal for gathering and storing

information about blood donation and distribution. The system can display

the blood stock available in each blood bank account. The system also

displays a summary of blood donated every finished blood drive event.

Lastly, it records blood dispensing and holds accurate data for every blood

transaction

In the interest of enhancing the donation form, there must be a drop

down list of specific sites on where to go to donate. If the user doesn’t know or

forgot his/her blood type and still wants to donate blood for the first time.

Maybe blood type “unsure” is selectable, which means additional process

required at donation time, and the user sends a reminder to update after the

screening date is confirmed. Additionally, if birthday is a required entry but the

system is not able to calculate for the reason that the system must disallow a

person under 17 (whatever legal blood donor age is). The blood donor page

can explicitly say “must be at least 17 years old to be a donor”.

 81

To design a web portal which provides details to the community to

view available blood in stock in each blood bank that is registered to

the system.

The researchers developed a web portal which provides details to

the community to view available blood in stock, in particular blood banks that

are registered to the system.

For enhancement purposes, partnership form needs additional primary

contact and second contact, and email should be another media contact in

addition to cell phone numbers. Mandatory fields designated by * (asterisk).

Consequently in the user form, there should be additional checkbox for

questions like:

➔ Notify me of blood drives only at my location

➔ Notify me of blood drives at locations at next town only

➔ Notify me of any blood drive

➔ Text notification

➔ Email notification

➔ Both text/email notification

➔ Share by information

➔ Do not share my information

To develop a data visualization of blood donated and blood distribution

using GIS (Geographic Information System) technology, and evaluate

the acceptability of the developed system with software evaluation

which is based on ISO 25010 (International Organization for

Standardization).
 82

Using data visualization, the system can analyze the data. The system has a

map indicator for donated locations with boxed explanations of location i.e

Pila, Laguna, with blood groups. Therefore, the admin has the capability of

seeing Metrics/Analytics, thus users (who donate blood) cannot see others

users (donor or recipient). The Metrics (like how many donated/received

blood in her/his location or anywhere in Los Baños) is reserved for

Department of Health/Government agencies or regulators, for planning

purposes of health infrastructures, not for every citizen. But maybe for

transparency purposes, for health activities, every registered donor/requester

can see the metrics. All others unregistered should not have visibility of

metrics. Consequently, the time period; by default, a month metric, but

should have the ability (by clicking the option) to do weekly or daily or for

calendar year. But that leads to another topic, how long is information stored

(retention/ purge rules). Normally, that is explained as a footnote in the

metrics, like data limited for the past 5 years only.

Recommendation

Based on the conclusions drawn, the following recommendations are

suggested:

1. It is suggested that this study will not only be implemented in the Rural

Health Unit of Los Baños but it should be nationwide to test the

effectiveness and reliability of the system.

2. The web portal should be used to post reminders/notification to the

admin for every new request to disseminate information easily.

 83

3. The researchers recommend adding the next donation period Alert

notification and/or send SMS using Arduino, for registered donors after

3 months from the last date of donations.

4. This study can be used as the basis in creating a system when it

comes to data visualization.

 84

REFERENCES

Ali, K. M. A., Jahan, I., Islam, A., & Parvet, S.-at. (2015). Blood Donation
Management System , 4(6), 123–135.
https://doi.org/http://www.ajer.org/papers/v4(06)/O04601230136.pdf

BLOOD DONOR INFORMATION MANAGEMENT SYSTEM. NAITES.

(2018).http://www.academia.edu/39914633/BLOOD_DONOR_INFOR
MATION_MANAGEMENT_SYSTEM.

Bénichou, L. (2019, June 13). Clustering Properties with Mapbox and HTML
markers. Medium. https://blog.mapbox.com/clustering-properties-with-
mapbox-and-html-markers-bb353c8662ba.

DOH PROMOTES A CULTURE OF VOLUNTARY BLOOD DONATION AS

VITAL MEASURE ON EMERGENCY PREPAREDNESS
NATIONWIDE: Department of Health website. DOH PROMOTES A
CULTURE OF VOLUNTARY BLOOD DONATION AS VITAL
MEASUREON EMERGENCY PREPAREDNESS NATIONWIDE |
Department of Health website. (2021, March 17).
https://doh.gov.ph/node/10538.

Farnia, P., Aghajani, J., & Velayati, A. A. (2017). Impact of geographical

information systems on public health sciences. Biomedical and
Biotechnology Research Journal (BBRJ), 1(2), 94.
https://doi.org/10.4103/bbrj.bbrj_34_17

Geeks: Bespoke Software Development Experts. Blog Details. (2020).

https://www.geeks.ltd.uk/about-us/blog/details/eQU5Ip/the-benefits-of-
using-web-based-applications.

Graham, S. R., Carlton, C., Gaede, D., & Jamison, B. (2011). The benefits of
using geographic information systems as a community assessment
tool. Public health reports (Washington, D.C. : 1974).
https://www.ncbi.nlm.nih.gov/pmc/articles/PMC3056049/.

Graham, S., Carlton, C., Gaede, D., & Jamison, B. (2011). THE BENEFITS
OF USING GEOGRAPHIC INFORMATION SYSTEMS AS A
COMMUNITY ASSESSMENT TOOL. Public Health Reports
(1974-), 126(2), 298-303. Retrieved June 15, 2021, from
http://www.jstor.org/stable/41639361
 85

Humanitarian Organization in the Philippines. Philippine Red Cross. (2021).

https://redcross.org.ph/national-blood-service/.

McAllister, N. (2016, August 9). Five weaknesses of Web-based applications.

IT Business. https://www.itbusiness.ca/news/five-weaknesses-of-web-
based-applications/13058.

Nalupta, C. M. M. (2011, October 20). Developing blood services in the

Philippines. Wiley Online Library. https://onlinelibrary.wiley.com/doi/
abs/10.1111/j.1751-2824.2011.01530.x.

National Geographic Society. (2012, October 9). GIS (Geographic

Information System). National Geographic Society.
https://www.nationalgeographic.org/encyclopedia/geographic-
information-system-gis/?
fbclid=IwAR1FHiMrza6Xmy0iXNz0O8fISKqd3C1Emw_4ZB9wuTYZcd
wt0d1gg1HwG3o.

National Geographic Society. (2021). Geographic Skill 4. National

Geographic Society. https://www.nationalgeographic.org/geographic-
skills/4/#:~:text=Analyzing%20geographic%20information%20involves
%20seeking,their%20observations%20into%20coherent
%20explanations.&text=Geographic%20analysis%20involves
%20various%20thinking%20processes.

PMC, E. (2011, March 1). Europe PMC. http://europepmc.org/articles/

PMC3056049.

U.S. National Library of Medicine. (1970, January 1). Voluntary blood

donation: foundation of a safe and sufficient blood supply. Towards
100% Voluntary Blood Donation: A Global Framework for Action.
https://www.ncbi.nlm.nih.gov/books/NBK305666/.

World Health Organization. (2021, June 7). Blood transfusion. World Health
Organization.https://www.who.int/news-room/facts-in-pictures/detail/
blood-transfusion.

Wikimedia Foundation. (2021, June 3). Robinson projection. Wikipedia.

https://en.wikipedia.org/wiki/Robinson_projection.

Wikimedia Foundation. (2021, June 12). Ptolemy. Wikipedia.

https://en.wikipedia.org/wiki/Ptolemy.

Wikimedia Foundation. (2018, September 15). Web information system.

Wikipedia.
https://en.wikipedia.org/wiki/Web_information_system#:~:text=Web
 86

%20information%20system%2C%20or%20web,by%20using
%20hypertext%2Dbased%20principles.

Wikimedia Foundation. (2021, May 22). Blood donation. Wikipedia.

https://en.wikipedia.org/wiki/Blood_donation.

Wikimedia Foundation. (2021, June 13). Geographic information system.

Wikipedia.
https://en.wikipedia.org/wiki/Geographic_information_system.
 APPENDIX A
Planning & Requirements Analysis Phase
88
89
 90

Post-Evaluation Questionnaire

SOFTWARE EVALUATION QUESTIONNAIRE (ISO 25010)

TITLE: Web-based Information System for Blood Donation with

Geographical Analysis and Distribution in the Municipality of Los Baños
The researchers are humbly asking permission for the conduct of this
survey question which will be used in the completion of their research project
in compliance to the degree of Bachelor of Science in Information
Technology. Your feedback and time answering this survey questionnaire is
very much appreciated.
This survey questionnaire is for the purpose of software evaluation
which is based on ISO 25010 standards in order to measure the acceptability
of the developed web-based system. We value your responses to these
evaluation questions. Please provide your response to the questions listed
below by clicking your choice from the options provided.
Legend:
4 - Strongly Acceptable 3 - Acceptable
2 - Not Acceptable 1 - Strongly Not Acceptable
91
92
93
 94

Story Board

Login Page. It shows the username and password in the login page, at the
bottom is create an account for users to sign up and the user can login to the
system.

Sign Up Form(Admin).This will appear when the user clicks the create an
account button. The user will select the admin type for the admin account. It
will ask for a code to approve the admin account.
 95

Submit Sign-Up Form (Admin).It will show the message box that the admin
account is created when the admin clicks the submit button.

Sign-Up Form(Donor/Recipient). It shows the sign up form. it will appear

when the user clicks the create an account button. The user will select the

user type for the Donor/Recipient account.

 96

Submit Sign Up Form(Donor/Recipient).It will show the message box that

the Donor/Recipient account is created when the user clicks the submit

button.

Sign-In(Admin). It show the username and password in login, any admin

account that sign up can now Sign In
 97

Login Success (Admin). It will show the message box that the admin

account logged successfully when the user clicks the submit button.

About Us (Admin). It shows the “about us” of the system after the admin

login.
 98

Campaign Form(Admin. It shows the campaign form after the admin clicks

the campaign navigation bar.

Submit Campaign Form(Admin). It shows the alert message box if the

admin is sure about the campaign or the blood drive event.

 99

Saved Campaign(Admin).It shows the "Campaign has been saved!"

message box after the admin clicks the OK button in the alert box.

List of Campaign(Admin).It shows the list of campaigns or the blood drive

event set by admin.

 100

Edit Campaign(Admin). It shows the alert message box after the admin

clicks the edit button and if the admin wants to edit the campaign or the blood

drive event.

Update Campaign Form(Admin). The admin can update the campaign or

the blood drive event.

 101

Submit Update Campaign Form(Admin). It shows the alert box if the admin

clicks the submit button to update the campaign or the blood drive event.

List of Transaction(Admin). It shows the list of campaigns or the blood drive

event.
 102

Create Partnership Form(Admin). It shows the created partnership form.

Only the admin can create a partner or the organization account.

Submit Create Partnership Form(Admin). It shows the alert message box

after the admin clicks the submit button.

 103

Submit Create Partnership Form(Admin). It shows the "Partnership has

been created!" message box after the admin clicks the OK button in the alert
box.

List of Partnership(Admin). In the list of partnership admin can edit or

remove the organization's information.

 104

Update Partnership Form(Admin). It shows the update form after the admin

clicks the edit button in the list of partnership.

Submit Update Partnership Form(Admin). It shows the alert box if the

admin is sure to submit the information.

 105

Sign In(Partnership). It shows the username and password in the login page.
all partnership/organization accounts created by blood bank admin can login
to the system.

Login Success(Partnership). It will show the message box that the

partnership account logged successfully when the user clicks the submit

button
 106

About Us(Partnership). It shows the “about us” of the system after the blood

bank partner admin login.

Create Transaction (Partnership). It shows the request transaction. When a

partner/organization wants to set up a blood drive event, just request a date

and time from the blood bank.

 107

Submit Request Transaction(Partnership). It shows the alert box if the

partnership blood bank admin is sure to submit the request.

Saved Transaction(Partnership). It shows the "Transaction has been saved"

message box. The partnership blood bank admin must click the "Ok" button to

send the request.

 108

List of Transaction(Partnership). In the transaction list, the partnership

blood bank admin can see the date and time and also the status of the
request to the blood bank.

Create Client(Partnership). It shows the create-account for partnership

donors. The partnership blood bank admin is responsible for creating the

account of the prospective donors in their organization.

 109

Submit Partnership Donor Account(Partnership). It will show the message

box that the partnership donor account is created when the partnership blood
bank admin clicks the submit button.

List of Partnership Donor(Partnership). In the list of partnership donors,

partnership blood bank admin can edit or remove the information.

 110

Update Partnership Donor(Partnership). The partnership admin can update

the partnership donor information.

Submit Update Partnership Donor(Partnership). It shows the "Account has

been updated!" message box after the admin clicks the submit button.
 111

Sign In (Partnership Donor). It shows the username and password in the

login page. All partnership donor accounts created by partnership blood bank
admin can login to the system.

Login Success (Partnership Donor). It will show the message box that the

partnership donor account logged successfully when the user clicks the

submit button.
 112

About Us(Partnership Donor). It shows the “about us” of the system after

the partnership donor login.

Blood Drive Request (Admin). In the blood drive request list, the date and

time requested by the blood bank partner/organization is subjected for

approval by the admin.

 113

Accept Blood Drive Request (Admin). It shows the alert box if the blood

bank admin is sure to accept the request.

Accept Blood Drive Request (Admin). It shows the message box when the

blood bank admin has finished accepting the request.

 114

List of Partnership (Partnership). In the transaction list, the partnership

blood bank admin can see the ongoing status when the blood bank admin has
accepted the request.

List of Volunteer (Partnership). It shows the list of partnership donors.

 115

Partnership Donor Screen Now (Partnership). It shows the alert box after

the partnership blood bank admin clicks the screen now button.

Partnership Donor Pending Screening (Partnership). It shows the

message box that the partnership donor is already pending for screening.
 116

List of Transaction (Partnership). It shows the list of partnership donors.

Accept to Screen Partnership Donor (Partnership). It shows the alert box if

the partnership blood bank admin is sure to accept the partnership donor for

screening.
 117

Partnership Donor On Screening (Partnership). It shows the message box

that the partnership blood bank admin needs to click the ok button to send the

blood history form to the partnership donor account that needs to be filled out.

Take Blood History (Partnership Donor). In the screening schedule there is

an accept button to take blood history.

 118

Accept Take Blood History (Partnership Donor). It shows the alert

message box, must click “ok” button to be able to view and can fill-up the

blood history form.

Blood History Form (Partnership Donor). It shows the blood history form

that the partnership donor must fill out.

 119

Submit Blood History Form (Partnership Donor). It shows the alert box
when the partnership donor has finished answering and clicked the submit
button.

Submit Blood History Form (Partnership Donor). It shows the message

box that the blood history form has been submitted.

 120

Check Result (Partnership). It shows the alert message box after the blood
bank partnership admin clicks the check result button..

Accept Partnership Donor (Partnership). It shows the alert box for the

partnership blood bank admin to accept if the partnership donor has passed

the blood history.

 121

Reject Partnership Donor (Partnership). It shows the alert box for the
partnership blood bank admin to reject if the partnership donor has failed in
blood history.

Cancel Partnership Donor (Partnership). It shows the alert box for the

partnership blood bank admin to cancel the check result of the partnership

donor's blood history.

 122

Submit Physical Examination (Partnership). It shows the physical

examination form when the partnership blood bank admin clicks the accept
button and if the partnership donor has passed his blood history.

Reject Physical Examination (Partnership). It shows the alert box for the
partnership blood bank admin to reject if the partnership donor has failed in
physical examination.
 123

Donor Form (Partnership). It shows the donor form that will enter the blood
type of the partnership donor before submitting.

Submit Donor Form (Partnership). It shows the alert box if the partnership

blood bank admin is sure to submit the information.

 124

Submit Donor Form (Partnership). It shows the message box when the

information has been submitted successfully.

Blood Drive Summary (Admin). The system is capable to show a summary

of every finish blood drive activities.

 125

Show Summary (Admin). The admin can click the show summary button to

view the partnership summary.

Partnership Summary (Admin). It shows the list of donors in the partnership.

 126

Export Partnership Summary (Admin). Admin can click the export button to

have a partnership summary print report.

Partnership Summary Report (Admin). After the admin clicks the export

button, the partnership summary report will appear which can be downloaded

as a pdf file.
 127

Return Partnership Summary (Admin). Admin can click the return button to

go to the blood drive summary or the list of organizations.

Sign In (Donor/Recipient). It shows the username and password in login,

any Donor/Recipient account that sign up can now login to the system.
 128

Login Success (Donor/Recipient). It will show the message box that the

donor/recipient account logged successfully when the user clicks the submit

button.

About Us (Donor/Recipient). It shows the “about us” of the system after the
Donor/Recipient login.
 129

Donate Form (Donor). It shows the donation form that the donor will enter his

blood type and choose particular blood bank where the blood donation site

takes place.

Submit Donate Form (Donor). It shows the alert box if the donors are sure to
submit the information.
 130

Blood Donate Request (Donor). It shows the message box when the blood

donation request has been submitted successfully.

Donor/Recipient (Admin). It shows the list of donors and the pending

schedule status of the donors.

 131

Schedule Donor (Admin). It shows the alert message if the admin wants to

give the donor a schedule to donate blood.

Schedule Form (Admin). It shows the schedule form, when the admin clicks
the schedule button. Admin will just enter the date and time when the donor
will donate blood.
 132

Submit Schedule Form (Admin). It will show the alert box if the admin wants

to send the schedule for blood donation.

Submit Schedule Form (Admin). It shows the message box that the donor

has been given a schedule.

 133

Schedule of Screening (Donor). The donor’s screening schedule can be

seen in his or her account.

Accept Donor (Admin). Here is the list of scheduled donors, when the donor

arrived on the day of blood donation and assuming that he/she already at the

site the admin just needs to accept the donor in the system.
 134

Donor Screen Now (Admin). It shows the alert message box if the admin is

sure of donor screening.

Donor Screen Now (Admin). It shows the alert message box that the blood
bank admin needs to click the ok button to send the blood history form to the
donor account that needs to be filled out.
 135

Take Exam for Blood History (Donor). In the take exam for blood history

there is an accept button to be able to view and fill up the form for blood

history.

Submit Blood History Form (Donor). It shows the alert box when the donor

has finished answering and clicked the submit button.

 136

Submit Blood History Form (Donor). It shows the message box that the

blood history form has been submitted.

Check Result (Admin). It shows the list of blood donors and the check result

button for the donor's blood history.

 137

Accept Donor (Admin). It shows the alert box for the blood bank admin to
accept if the donor has passed the blood history.

Reject Donor (Admin). It shows the alert box for the blood bank admin to
reject if the donor has failed in blood history.
 138

Cancel Donor (Admin). It shows the alert box for the blood bank admin to
cancel the check result of the donor's blood history.

Submit Physical Examination (Admin). It shows the physical examination

form when the blood bank admin clicks the accept button and if the donor has

passed his blood history.

 139

Reject Physical Examination (Admin). It shows the alert box for the blood
bank admin to reject if the donor has failed in physical examination.

Cancel Physical Examination (Admin). It shows the alert box for the blood

bank admin to cancel the donor's physical examination.

 140

Submit Physical Examination (Admin). It shows the message box if the

donor has passed his physical examination.

Donor Form (Admin). It shows the donor form that will enter the blood type

of the donor before submitting.

 141

Submit Donor Form (Admin). It shows the message box when the

information has been submitted successfully.

List of Transaction (Admin). Admin can click the export button to have a list

of transaction print reports.

 142

List of Transaction Report (Admin). After the admin clicks the export
button, the list of transaction reports will appear which can be downloaded as
a pdf file.

Blood Stocks (Admin). Here admin can see the added blood after the donor

donation process to the blood bank.

 143

Request Form (Recipient). It shows the request form that the requestor

needs to fill out to request what blood type the recipient needs.

Submit Request Form (Recipient). It shows the alert box if the requestor is
sure to submit the request.
 144

Submit Request Form (Recipient). It shows the message box when the

request has been submitted successfully.

Submit Request Form (Recipient). It shows the message box that will

remind what the requestor should bring.

 145

Schedule Requestor (Admin). It shows the alert message if the admin wants

to give a schedule when the requestor can take the requested blood.

Schedule Requestor (Admin). It will show the alert box if the admin is sure
to send the given schedule to the requestor.
 146

Schedule Requestor (Admin). It shows the message box that the requestor

has been given a schedule.

Schedule for Blood Request (Recipient). The requestor schedule for blood

requests can be seen in his or her account.

 147

Accept Blood Dispensing (Admin). Shows here the lists of schedule for

blood dispensing. When the requestor is in the blood bank, the admin just

needs to accept the request in the system.

Accept Blood Dispensing (Admin). It shows the message box that the
admin has accepted the request and the blood type requested has been given
to the requestor.
 148

List of Transaction (Admin). Admin can click the export button to have a list

of transaction print reports.

List of Transaction Report (Admin). After the admin clicks the export

button, the list of transaction reports will appear which can be downloaded as

a pdf file.
 149

Blood Stocks (Admin). Here admin can see that the number of types of
blood has decreased after the requestor successfully done the whole blood
dispensing process to the blood bank.

Analytics by Gender (Admin). Here in analytics by gender you can see in

the pie graph how many women and men donate blood.
 150

Analytic by Age (Admin). Here in analytics by age the line graph shows the
youngest and oldest age donating blood.

Geographical Information System by Transaction (Admin). It shows the

map of Laguna. Here you can see the total data of donor, requestor and

volunteer per blood bank.

 151

Geographical Information System by Blood Bank (Admin). It shows the

map of Laguna. Here you can see the data of blood type and blood stocks per
blood bank.

Update Account (Admin). It shows the update form that admin can edit the
username and password of his account in the system.
 152

Submit Update Account (Admin). It shows the alert box if the admin is sure

to update his account.

Submit Update Account (Admin). It shows the message box that the admin

has updated his account.

 153

Sign Out (Admin). It shows the sign-out button, admin needs to click the sign

out button if admin wants to sign out his account.

 154

Proposed Process Flow

Information Management Module

FLOWCHART WORK INSTRUCTION

1. The user input username and

password to Log-in.

2. Only the blood bank admin can

have access to this after log-in

successfully and choose among

the options on the module.

3. The admin can view the line

graph of age report.

4. The admin can view the pie

graph of the gender report.

5. Each blood bank admin can

view the data of donor and

requestor.

6. The admin can view GIS by

blood bank or the data of blood

type available per blood bank.

7. The admin can view the blood

stock report in each particular

 155

blood bank.

User Management Module

FLOWCHART WORK INSTRUCTION

1. The user input username and

password to Log-in.

2. Users choose among the

options on the module.

3. Users can request to donate

blood by filling a form and

waiting for the approval for

appointments.

4. If the user is requesting for

blood, it is possible to view if the

needed blood is available upon

filling up the form.

5. The user can update the

account and view campaigns of

upcoming blood drive activities

and/or appointments.
 156

Blood Bank Module

FLOWCHART WORK INSTRUCTION

1. The user input username

and password to Log-in.

2. Users can create

campaigns schedules by

filling up forms and sending

announcements.

3. Users can check and

send approval for every

request for blood donation

or blood dispensing.
 157

Proposed Use Case Diagram

Use Case Diagram (Web-Based Information System for Blood Donation with

Geographic Analysis and Distribution)

 158

The use case diagram above shows the interaction between the actors.

It shows what actors can do in the system, on how they use the system. It

shows the whole system and use cases which are; Registration, Login, Create

Campaign, View Campaign, Donate Blood, Set Blood Donor Schedule,

Manage Screening, Blood Request, Manage Blood Request, Request Blood

Drive, Manage Blood Drive Request, Display Graph Report, View Available

Blood stock, Manage Account, Add Partnership, and Blood Bank Transaction.

These use cases represent the actions that are performed by the actors.

There are four actors which are the Admin, User, Blood bank Partnership, and

Partnership volunteers. The admin actions are Login, create campaign, set

blood donor schedule, manage screening, manage blood request, manage

blood drive request, Display graph report, manage account, Add partnership,

and Blood bank transaction. The blood bank partnership actions are Login,

View Campaign, Request Blood Drive, and Manage account. The user’s

actions, which are connected by associated lines, Registration, Log-in, View

campaign, donate blood, blood request, and Manage account.

 159

Use Case Diagram (Blood bank Admin)

It presents the module of the blood bank admin. The admin can sign-up

in the system, create campaigns, manage blood requests, and view GIS

reports. They set schedules for blood donors and manage screening. They

can view the summary report of every finished blood drive event and manage

blood bank transactions. They can also create an account for their partnership

for different schools/organizations that want to conduct blood drive activities.

Users can register to have access to the system. Every registered user can

log-in to their accounts, manage accounts, view campaigns, donate blood,

request for blood dispensing, and can view the blood type available to each

blood bank upon filling up the blood request form.

 160

Use Case Diagram (Partnership Admin)

It shows the module of the partnership admin. The admin can sign-up

in the system, view campaigns, manage accounts and can request schedules

for blood drives and send their request to a particular blood bank admin.

While the volunteer donor can update their account, view schedules to donate

blood, and view campaigns.

System Architecture / Module Specification

 161

System Architecture

It shows the architecture of the system, it illustrates the summary of the

end-user activities in the system. This starts with logging into the system. The

administrator, primary user and secondary user, have different privileges to

the web-based system. Each user needs to input the correct username and

password in order to access the system. The administrator interacts with a

 162

system such as when he/she logs in successfully. The system displays the

particular administrator’s work dashboard in order to set campaigns, accept

blood drive requests from blood bank partners, navigation bar clients (for

accepting voluntary donors and blood requests), and analytics navigation for

data visualization. For the blood bank partner’s, they will need to request from

the blood bank admin to create an account. Then the system will require filling

up a form for them, which includes basic information such as: name of

organization, complete address, username, and password. Once successfully

logged-in, the blood bank partner admin is able to view the secondary user's

dashboard. The system allows him/her to request a schedule from the blood

bank for a voluntary blood donations, this has to be approved by the blood

bank admin. It also has a “create a new account” navigation bar which has the

function for the partnership volunteers to fill up the sign-up form to have a

partnership account (volunteer donors). The process is just the same, for the

partnership volunteers to set an appointment for blood donation the only

difference is that it has no blood request and is only intended for voluntary

blood donation. As a further matter, this is the following process to have a

blood bank partnership account. First request an account from the authorized

blood center admin, to fill up the partnership form then just wait for the default

username and password to be provided. After that go to the login page, input

the required username and password to be able to have access to the

system.

System Context Diagram

 163

System Context Diagram

The context diagram showed the major process of a web-based

information system for blood donation and distribution, wherein there is

receive and approve request by the admin, view blood stock and also check

summary reports. While the blood bank partnership account can request for

blood drive schedules and conduct a blood drive after the approval from the

blood bank admin. User accounts from the blood bank partners (e.g. school,

organization, hospital etc.) are able to fill up a form and receive a schedule for

their appointment.

Data Flow Diagram

 164

Data Flow Diagram

Data flow diagram shows the flow of the system. It shows every step

you can do in the system. Admin, user, partnership can log in to the system.

Users can fill up a form and then the system validates the user, it shows you

“log in success” or log in failed if there's a problem with the username or

password. When the admin logs in successfully, they can view bloodstock,

GIS reports, send approval, and can see metrics added to the database of file
 165

management. Admin can also view summary reports of every finished blood

drive. The user can fill up the form then the system verifies that the user

wants to donate or request blood on the database of files which is the user

management. Moreover, the partnership account can host a blood drive and

every data of successful blood donation is saved to the database of that

particular blood bank and automatically added to the blood stock quantity.

Project Schedule
 166

Gantt chart
TASK NAME 2020 2021 PERSON IN
CHARGE

O N D B M
C O E
T V C JAN FEB MAR APR

ANALYSIS

Requirements Lou, MJ, Jerry,

Specification

Project Identification & Lou, MJ, Jerry,

Scheduling

Review of Related Lou, Jerry,

Literature

Requirements Lou, MJ,

Gathering

Writing of Chapter 1 Lou

to 3

DESIGN

Design & Structure Lou, MJ, Jerry,

DEVELOPMENT

System Development MJ,

TESTING

Compiling & Testing MJ,

Unit Testing MJ, Jerry,

PROJECT
COMPLETION

Video Presentation Jerry,

Approved Lou, MJ, Jerry,

Presentation with
Thesis Adviser

Input Data MJ, Jerry,

System Endorsement Lou,

& Conduct Survey

Revision of Chapter 1 Lou, MJ,

to 3

Documentation of Lou,
Chapter 4 to 5

Update System MJ,

Interface

Documentation and Lou, MJ, Jerry,

Code Review

Finalize Team Lou, MJ, Jerry,

Presentation
 167

The Gantt chart shown above is the detailed work done or production

completed in a certain period. The researchers got all the required information

needed for the project. It shows the project schedule, the list of the tasks that

need to be performed has its duration to show how the activities are being

worked for by the researchers. From just a concept unto data gatherings,

modelling and testing the web-based system was built.

 168

User’s Manual

The system is a web application that you open by typing the web portal

URL in the address bar of the browser window. To perform a task, you must

be assigned to a role that includes the task.

The admin who is assigned to a role that has full permissions has

access to the complete set of application menus and pages available for

managing an admin dashboard. The user is assigned to a role that has

permissions to an appointment for blood donation and/or blood dispensing

and sees only the menus and pages that support those activities.

Software Requirements to Access Web-based Information System for

Blood Donation

To access the Web-based Information System the admin/user must

have installed XAMPP and any web browser.

Directory Folder of the News Portal

1. Copy the folder “W-BBDWGAAD” from the developer.

2. Look for the installation drive of XAMPP.

3. Go to htdocs folder and paste the “W-BBDWGAAD” folder.

 169

Import Database

1. Run XAMPP.

2. Start MySQL and Apache.

 170

3. Go to browser and redirect URL to “localhost/phpMyAdmin”. Click

“New” on left side panel and put the database name “wbbdwgaaddb”

and hit create.

4. Click “Import” and browse the database of the system or “.sql” file that

the developer handed and click “Go” at the bottom part of the browser.

Note: The .sql file must be located xampp/htdocs/wbbdwgaaddb

 171

5. Double check the tables inside the database once the .sql file was

uploaded.

6. Once the database is uploaded, go to the browser and type “localhost/

W-BBDWGAAD” on the URL then hit enter and it will direct to the

landing page.
 172

7. Sign in to the “Username and “Password” that set by the developer so

you can access the system functions. If successfully log in, it will

redirect automatically neither to the admin dashboard or user’s landing

page.
 173

Relevant Source Code

GIS function by Blood Bank

var lng = 121.4692;

var lat = 14.1407;
mapboxgl.accessToken =
'pk.eyJ1Ijoic3dlZXRoIiwiYSI6ImNrbHF2MnBpYTE5Y3gybnB1djI5Yms3ZzAifQ
.4bF0YJbADfcoy2s_eGL_YQ';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/sweeth/cklsbcbla021v17qa37ovbm0w',
center: [lng,lat],
zoom: 9
});

$.ajax({
method:"post",
url:"getResultBloodBank.php",
dataType:"json",
success:function(data){
console.log(data);
var geojson = {
type: 'FeatureCollection',
features: data

};
// add markers to map
geojson.features.forEach(function(marker) {
 174

// create a HTML element for each feature

var el = document.createElement('div');
el.className = 'marker';

// make a marker for each feature and add to the map

new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.setPopup(new mapboxgl.Popup({ offset: 25 }) // add popups
.setHTML('<h3>' + marker.properties.title + '</h3><p>' +
marker.properties.description + '</p>'))
.addTo(map);
});
}
});

GIS function by Transaction

var lng = 121.4692;

var lat = 14.1407;
mapboxgl.accessToken =
'pk.eyJ1Ijoic3dlZXRoIiwiYSI6ImNrbHF2MnBpYTE5Y3gybnB1djI5Yms3ZzAifQ
.4bF0YJbADfcoy2s_eGL_YQ';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/sweeth/cklsbcbla021v17qa37ovbm0w',
center: [lng,lat],
zoom: 9
});
$.ajax({
method:"post",
url:"getResultByTransaction.php",
dataType:"json",
 175

success:function(data){
console.log(data);
var geojson = {
type: 'FeatureCollection',
features: data
};
// add markers to map
geojson.features.forEach(function(marker) {
// create a HTML element for each feature
var el = document.createElement('div');
el.className = 'marker';

// make a marker for each feature and add to the map

new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.setPopup(new mapboxgl.Popup({ offset: 25 }) // add popups
.setHTML('<h3>' + marker.properties.title + '</h3><p>' +
marker.properties.description + '</p>'))
.addTo(map);
});
}
});
 APPENDIX B
B. Communication Letters & Forms
176
177
APPENDIX C
Curriculum Vitae
179
180
181
 APPENDIX D
D. Publishable Paper (IEEE Format)
183
184
185
APPENDIX E
E. Similarity Report
187
188
189
190