Manuscript Brosas Capili Macaraig Orna-Chapter1-5-1

Republic of the Philippines
Laguna State Polytechnic University

Province of Laguna
COLLEGE OF COMPUTER STUDIES
E-BIPMS ELECTRONIC BARANGAY INTEGRATED PROFILING AND

MONITORING SYSTEM FOR BRGY. KANLURANG BUKAL
A Capstone Project
Presented to the Faculty of
College of Computer Studies
Laguna State Polytechnic University
San Pablo City Campus
San Pablo City
In Partial Fulfillment
of the Requirements for the Degree of
Bachelor of Science in Information Technology
By:
Brosas, Kendrix B.
Capili, Cristine B.
Macaraig, Ivan Justine B.
Orna, Jorina Erica A.
December 2023
2
APPROVAL SHEET
This thesis entitled “Electronic Barangay Integrated Profiling and

Monitoring System for Brgy. Kanlurang Bukal” developed and submitted by
Brosas Kendrix B., Capili Cristine B., Orna Jorina Erica A., Macaraig Ivan
Justine B. in partial fulfilment of the requirements for the degree of Bachelor of
Science in Information Technology Major in Web and Mobile Application
Development has been approved and accepted.
WINCHELL CEAZAR DESAMERO

Thesis Adviser
Approved and accepted by the committee on Oral Examination with a

grade of ________________.
JOANNA E. DE TORRES JOHN RYAN UAL

Member Member
RONNEL A. DELA CRUZ REYMAR V. MANALOTO

Member Member
MARCO JR. N. DEL ROSARIO

Chairman
Accepted in partial fulfilment of the requirements for the degree of

Bachelor of Science in Information Technology.
RONNEL A. DELA CRUZ

Associate Dean
Date: ________________
RONNEL A. DELA CRUZ

Associate Dean
3
DEDICATION
We would like to present this work to the following people who inspired us to
carry out this project study.
Almighty God
Our Family
Friends and Classmates
Finally, this thesis is dedicated to all those who believe in the richness of
learning.
4
ACKNOWLEDGEMENT
First of all, we would like to thank our Lord Jesus Christ for not only
making the lovely area, which the researchers could do the study, but also for
helping and enabling them to carry out the study.
We would like to take this opportunity to express our profound gratitude
and deep regards to Mr. Winchell Ceazar Desamero our thesis adviser, for his
exemplary guidance, monitoring, support, knowledge that we need to enhance
the content of our project and constat encouragement throughout the course of
this project study.
To our ever-supportive parents for their guidance and wide
understanding and to our Classmates and Friends for their constant
encouragement for without them this project study would not be possible.
To Barangay Chairperson Mr. Henry O. Duller, Barangay Secretary
Honeylette J. Villanueva, and Barangay Residents for their cordial support,
valuable information and guidance, which helped us in completing this task
through various stages and their willingness to give their time so generously.
To Mr. Sherwin D. Quizon the dean of Pamantasan ng Lungsod ng San
Pablo, Mr. Aeron Darelle Maligaya a Software Developer, Mr. John Robert
Ladanga a Full Stock Developer, Mr. Jamry P. Santos a Solutions Engineer,
and Mr. Medel E. Valencia a Junior Layout Artist/ IT Instructor for their
assistance and commendable suggestions.
Lastly, to the Dean of College of Computer Studies Mr. Ronnel A. Dela Cruz.
5
EXECUTIVE SUMMARY
This Capstone Project entitled, “Electronic Barangay Integrated
Profiling and Monitoring System (E-BIPMS) for Barangay Kanlurang Bukal” is
developed to have a manageable system to help the barangay constituents. This
will help in data managing, organizing and preventing loss of files and
documents. The Development of Electronic Barangay Integrated Profiling and
Monitoring System (E-BIPMS) for Barangay Kanlurang Bukal created for the
barangay constituents so that the barangay staff can get the files and documents
that they needed and for the residents to know the activities of the barangay. The
system main functions are (1) Resident Registration (2) Requesting Documents
(3) Payment Method (4) Demographic (5) Email Notification (6) SMS Notification.
The researchers used System Usability Scale (SUS) for Evaluation. SUS is
composed of ten (10) questions. The questionnaire was answered by thirty (30)
NON-IT respondents who are said to be resident of BARANGAY KANLURANG
BUKAL LILIW, LAGUNA. The researchers also used International Organization
for Standardization (ISO) for IT Experts Evaluation. SUS divided into eight (8)
aspects; Functionality Suitability, Performance Efficiency, Compatibility, Usability,
Reliability, Security, Maintainability, Portability. Five (5) IT Experts evaluated
Electronic Barangay Integrated Profiling and Monitoring System; the system met
their satisfaction.
6
TABLE OF CONTENTS
Title ….
Page………………………………………………………………….......... …...1
Table of Contents……………………………………………………………..... ….......
6
List of ……...
Figures…………………………………………………………………… 8
List of ……...
Tables…………………………………………………………………..... 9
PRELIMINARIES PAGE
NO.
Introduction................................................................................................. ….
….10
Project Context........................................................................................... ….....1
1
Project Purpose.......................................................................................... …….1
3
Project Objectives....................................................................................... ……..
14
Scope and Limitation.................................................................................. ……..
15
Conceptual Model of the Project……………………………………………… ……..
18
Operational Definition of Terms.................................................................. ….....1
9
CHAPTER I - THE PROJECT AND ITS BACKGROUND
CHAPTER II - REVIEW OF RELATED LITERATURE AND STUDIES
Related Literature………………………………………………………………. …….

22
Development …….
Tools……………………………………………………………... 24
7
Related Studies........................................................................................... …….

30
CHAPTER III - METHODOLOGY
Project ....38
Design………………………………………………………………………
Project Development………………………………………………………………. …
45
Project Testing and Evaluation…………………………………………………… …
47
CHAPTER IV- RESULT AND DISCUSSION
Project Requirements and …
Specification………………………………………… 53
Project …
Description…………………………………………………………………. 56
Project …
Features……………………………………………………………………. 57
Screen …
Hierarchy…………………………………………………………………… 57
Bibliography………………. …
………………………………………………………. 76
APPENDICES 78
Appendix A - Gantt Chart 80

Appendix B - Evaluation Instrument 82
Appendix C - Pictures Taken During Testing and Evaluation 92
Appendix D - IT Experts Profile 96
Appendix E - Evaluation Result Matrix 102
Appendix F - User’s Manual 105
Appendix G - Source Code 118
Appendix H - Curriculum Vitae 138
8
LIST OF FIGURES
Figure No. Title Page No.
1 Map of Brgy. Kanlurang Bukal 11

2 Conceptual Model of E-BIPMS 18
3-10 Development Tools 24
11 Project Design 38
12 System Framework 39
13 Flowchart Admin Side 40
14 Flowchart User Side 42
15 Flowchart LGU Side 43
16 Flowchart BHW Side 44
17 Scrum Model 45
18 Home Page 57
19 Login Page 57
20 Registration Page 58
21 User Page 58
22 User Request Document Page 59
9
23 User Forgot Password Page 59

24 Admin Page 60
25 Admin User Page 61
26 Admin List of Resident 61
27 Barangay Officials 62
28 Admin Document 62
29 Admin Edit Resident 63
30 Admin Add Resident 63
31 LGU Page 64
32 BHW Page 65
10
LIST OF TABLES
Table No. Title Page No.
1 Functionality Testing 47
2 Browser Testing 48
3 Liker Scale of SUS 49
4 Numerical Scale of the SUS 49
5 Likert Scale of ISO 51
6 Numerical Scale of the ISO/IEC 25010 52
11
CHAPTER 1
THE PROJECT AND ITS BACKGROUND
Introduction
According to Pancoast (2022), everyone is familiar with how a conventional
workplace appears and functions. Manila folders are piled high on desks, file cabinets
line the walls, and printers are lined up in a row next to the filing cabinets.
A paper-based system that relies on the maintenance of files, client receipts, and
purchase orders has a lot of hidden costs. Unexpectedly, there isn't a lot of information
available that details the costs of a paper-based system. Some people believe that since
the benefits of going digital are evident, it is not important to mention or explain them.
According to unofficial sources, 40% of all small firms in the US employ paper-based
systems. some people less. The fact is that a sizable portion of organizations utilize an
outdated system.
As stated by Jacobe (2021) the necessity to focus on the societal issues of every
barangay is a relevant aspect that needs awareness from the person in authority. These are
said to be the most essential responsibilities of every barangay official in the Philippines.
Managing, monitoring, and tracking of the most important information of each household
in the barangay can be realized with the use of technology. Majority of the barangays in
Tuguegarao City have their own computer units used for data processing and
spreadsheets. The records of each household are kept in a file cabinet. The barangay
personnel find it tedious to manage, monitor and track the records. Profiling information
of each household using a system could make the personnel more productive and can
12
give a better service to the community.
Transitioning manual processes in barangay operations to digital processes
improves accessibility and transparency within the barangay. Digital platforms provide
convenient access to information and services for both staff members and residents alike.
This accessibility empowers individuals to obtain the necessary information and engage
with services without unnecessary delays or complications, thereby enhancing overall
convenience and satisfaction.
Implementing digital profiling management in a Barangay brings numerous
advantages. It improves efficiency by streamlining and automating the profiling process,
saving time and reducing errors. E-BIPMS systems enable quick data retrieval, enhancing
response time and service delivery. Digital profiling allows remote access and
collaboration, facilitating real-time updates and coordination. Moreover, it promotes
environmental sustainability by reducing paper usage and waste.
Project Context
Figure 1. Map of Brgy. Kanlurang Bukal
Barangay Kanlurang Bukal is one of the largest barangays in the Municipality of

13
Liliw. It shares borders with the barangays of Brgy. Bagong Anyo, Brgy. Maslun, Brgy.
Ibabang San Roque, and Brgy. Novaliches. Barangay Kanlurang Bukal is a residential
area in Liliw, Laguna. It is composed of seven (7) puroks, a secondary public school, and
one of the main tourist spots in the municipality (Liliw Resort). Based on the Census
(2020) over 4,423 is the population in Barangay Kanlurang Bukal, it is considered to be
one of the most densely populated barangays in Liliw, Laguna.
Based on the survey conducted with 10 respondents in Brgy. Kanlurang Bukal,
relying on manual processes for their operations often leads to common problems, and
one of the major problems is time-consuming. This is because manual processes require a
lot of physical effort and time to complete tasks such as data encoding, and record-
keeping. Another issue is the inherent possibility of human errors in manual processes.
Illegible handwriting, incorrect data entry, and misplaced documents can result in
inaccuracies and inconsistencies in records and reports, compromising the overall
integrity of the Barangay's operations. Additionally, manual systems often make it
difficult to retrieve specific information or documents. Data security is another concern
with manual processes. Physical records are vulnerable to loss, theft, or damage due to
natural disasters, accidents, or mishandling.
The E-BIPMS aims to improve the traditional mode of delivering services and
manage the barangay records and data efficiently and effectively. The system aims to
address specific problems such as inefficient record-keeping, errors in manual processes,
illegible handwriting, incorrect data entry, and improve related programs and services.
Project Purpose
14
E-BIPMS (Electronic Barangay Integrated Profiling and Monitoring System)
is intended to enhance the quality of services provided to the residents of Brgy.
Kanlurang Bukal by introducing digital solutions. The project's purpose is to enhance
efficiency by reducing time-consuming manual processes, minimize errors in data
handling, improve information retrieval, enhance data security, and overall, enhance the
delivery of Barangay programs and services.
To the Residents
The residents can easily register and update their records. They will have an easy
way to request some documents that are needed from the barangay, such as barangay
clearance, cedula, business permits, etc. They will be updated to the upcoming event or
any services that the barangay can offer.
To the Barangay Health Worker and Barangay Secretary
The E-BIPMS collects and organizes essential information about the residents,
such as demographics, socio-economic status. This data can be used to make informed
decisions regarding public services and development projects. It helps the barangay
officials understand the needs and priorities of their constituents better.
To the LGU
The Electronics Barangay Integrated Profiling and Monitoring System can be a
huge help for Local Government Units in many ways. It helps LGUs understand their
community better by giving them detailed information about the people who live there.
15
This includes things like how many people are in different age groups, if there are
persons with disabilities or a lot of seniors. With this data, LGUs can plan and decide on
programs and services that fit the needs of the community.
To Future Researchers
This system provides future researchers with baseline information, identification
of research gaps, contextual understanding, collaboration opportunities, and evaluation
possibilities. These benefits enable researchers to conduct localized, evidence-based
research, contribute to knowledge generation, and inform policies and programs for the
betterment of the community.
Project Objectives
General Objective
The general objective is to develop and implement an ELECTRONIC
BARANGAY INTEGRATED PROFILING AND MONITORING SYSTEM that will
decrease the use of paper-based records and forms of Brgy. Kanlurang Bukal.
Specific Objectives
This study has the following objectives:

1. To reduce the time and effort required for processing barangay services.
2. To develop Electronic- Barangay Integrated Profiling and Monitoring System
with the following features:
a. Resident registration
b. Requesting Documents
16
c. Payment method
d. Demographic
e. Email Notification
f. SMS Notification
3. To encourage more residents and barangay staff to use the E-BIPMS.
4. To test and evaluate the effectiveness of the website; and.
5. To document the system for future researchers.
Scope and Limitation
Electronic Barangay Integrated Profiling and Monitoring System a(E-BIPMS)
development for Brgy. Kanlurang Bukal intends to automate the barangay resident
monitoring and profiling process. A web-based system that would help the barangay
secretary effectively manage and access resident profiles including their social class,
employment status and other information that is related to the residents. The resident of
barangay Kanlurang Bukal can create an account by filling out the information needed
together with their desire username and password. This user's account has a side bar that
includes the user's profile that can be edited, requesting documents, events, and reporting
concerns.
The system boasts a user-friendly interface, beginning with a secure login page
for authorized users. Once logged in, users have access to their profile, where they can
view and update their personal information such as name, address, birthday, employment
status, and etc. The user request documents page allows residents to request important
documents like certificates and clearances, in the payment method there’s a button where
residents can upload the receipt of their payment. Users can also provide feedback or
17
concerns through the user's feedback page, ensuring active community engagement. On
the administrative side, the system provides a dedicated admin page for the barangay
secretary to manage the resident list, to assess all the requested documents. It includes
features for managing the barangay officials including the barangay to track their tenure
and contributions. The system also allows for the management of barangay events,
including creating, editing, and deleting events. Additionally, a population dashboard is
included to provide a visual representation of demographic data for decision-making and
planning purposes. They can also add new residents to the database, ensuring
comprehensive coverage. Moreover, the system provided a BHW account to help those
non-techy residents. Barangay Health Workers can add and manage the residents list and
to view the demographic population. Lastly, the LGU in this account LGU can only view
the demographic and the suggested programs and services that can be conducted based on
the population level. This innovative solution empowers barangay officials in Brgy.
Kanlurang Bukal to enhance their services and promote transparency, ultimately
strengthening their ability to support and serve their community.
However, this project has its limitations. Firstly, only residents who have
registered and provided their information to the barangay Kanlurang Bukal can access the
system. Secondly, certain features or functionalities cannot be implemented due to data
privacy constraints. The system must adhere to privacy regulations and guidelines, which
might restrict the types of data collected and shared and how it can be used. Additionally,
the system may not be fully accessible to people with disabilities, such as those who are
blind, as it may lack necessary accessibility features, any crimes record are not included
to this system,there’s specific government agency can handle that, It's crucial to address
18
these limitations and work towards solutions that ensure inclusivity, data privacy
compliance, and accessibility for all community members.
Conceptual Model of the Project
Input Process Output
 Knowledge
Requirements
 Knowledge about
current process of
E-BIPMS
 Database
Management
 Web Development
 Project
Management
 Data Privacy and
Security
 UX Design
 Communication
Skill
 Data Gathering E-BIPMS-Electronic
 Software
Requirements  Requirements Analysis Barangay Integrated
 Operating System
19
Figure 2. Conceptual Model of E-BIPMS
The conceptual model of the project served as a guide for the developers to easily
identify the requirements needed for the development of the system. It was composed of
four elements: the input, process, output, and evaluation. On the input stage, it consists of
knowledge requirements, software requirements, and hardware requirements. Knowing
these requirements helped the developers to identify what they needed to develop the
system. As in knowledge requirements, developers should have knowledge about the
current process of E-BIPMS, database management, web development, project
management, data privacy and security, UX Design, and communication skills.
On the process stage, it deals with the overall process of the system development.
It consists of Program design to know the initial design of the system and what features
will be included in the system, system development is where the developers start to
develop the proposed system, testing and revision is where the system will run initial
tests and check for the errors encountered and check the system for some revisions
needed. The output stage is where the final project was the E-BIPMS - Electronic
Barangay Integrated Profiling and Monitoring System for Brgy. Kanlurang Bukal, was
ready to be deployed and used by the client. While in the evaluation stage, the system
was tested and assessed to identify if the functions and other capabilities were working.
Operational Definition of Terms
E-BIPMS - is an electronic system designed to collect, manage, and store information
about the residents of barangay. It is an integrated system that allows barangay officials
20
and staff to monitor and track important information such as personal information, health
status, and educational attainment.
Barangay Officials - The elected and appointed officials of barangay. They include the
Barangay Captain, Kagawads, Secretary, and Treasurer, among others.
Data Collection - The process of gathering information about the residents. This can
include personal information, health status, educational attainment, and other relevant
data.
Data Management – The process of organizing, storing, and maintaining the data
collected through E-BIPMS. This includes ensuring the accuracy and completeness of the
data, protecting it from unauthorized access, and ensuring its availability when needed.
System Security - The measures taken to protect the E-BIPMS system from cyber
threats and unauthorized access. This can include the use of firewalls, antivirus software,
and other security measures.
System evaluation - Refers to the process of assessing the effectiveness of the E-
BIPMS system. This can include collecting feedback from users, monitoring system
performance, and identifying areas for improvement.
CHAPTER 2
REVIEW OF RELATED LITERATURE AND STUDIES

21
This chapter presents the related literature and studies from different resources.
The obtained related literature and studies will help developers in familiarizing ideas and
information that are relevant and similar to the developed study. It will serve as a guide
for developers in developing the Electronic Barangay Integrated Profiling and Monitoring
System for Brgy. Kanlurang Bukal.
Barangay Kanlurang Bukal is one of the largest barangays in the Municipality of
Liliw. It shares borders with the barangays of Brgy. Bagong Anyo, Brgy. Maslun, Brgy.
Ibabang San Roque, and Brgy. Novaliches. Barangay Kanlurang Bukal is a residential
area in Liliw, Laguna. It is composed of seven (7) puroks, according to Census (2020)
over 4,423 the population in Barangay Kanlurang Bukal, it is considered to be one of the
most densely populated barangays in Liliw, Laguna. Barangay Kanlurang Bukal lacks a
comprehensive and up-to-date profiling system that can provide crucial information about
its residents. Without such a system, it becomes challenging for the barangay officials to
identify and address the needs of the community effectively.
The Electronic Barangay Integrated Profiling and Monitoring System streamlines
various services within a barangay. It enables resident profiling, household census, and
analysis of demographic data. It assists in managing socio-economic programs, integrates
health and social services, handles civil registry processes, facilitates the issuance of
barangay clearances, cedula, permits, etc. provides a feature for the announcement,
reporting, projects, and other operations in the barangay.
Related Literature
Development of an Information-Based Dashboard: Automation of Barangay

22
Information Profiling System (BIPS) for Decision Support Towards e-
Governance
According to Lacasandile et al. (2020), The necessity to solve societal challenges
in each community is a prominent feature that requires the attention of those in positions
of authority. In the Philippines, these are critical tasks for every barangay and its
officials. E-government, at its core, might accomplish good governance by profiling each
family in the community and utilizing information and communication technologies.
After profile data has been aggregated, critical information such as labor and job
statistics, family income and expenditures, demographics by population and age, water
and sanitation, housing type, and education might be provided. The study is intended to
assist barangay officials in budget allocation and decision-making in their respective
areas of management through the use of the barangay information profiling system
(BIPS). The creation of the information-driven dashboard was started in 2016 and
evaluated by an IT professional before launching the beta version to the target users. The
functional criterion received an average score of 4.47, which means that respondents
agreed that the system's sequence of operations was easy to understand and that their
query results were correct. Testing the system produced a good result with an average
score of 4.50, which means that the system has surpassed the standard for completion,
request processing, response time, and computing resource usage for the entire system
and its functions.
The Barangay Profiling Management System seems to have a broader scope,
integrating various services such as health and social services, civil registry processes,
and the issuance of barangay clearances, cedula, permits, etc. It also provides features for
23
announcements, reporting, and managing projects.
Assessment of Community-Based Systems Monitoring Household Welfare
According to Alba and Reyes (1994), The study takes off from the work of
Florentino and Pedro under MIMAP Florentino and Pedro evaluated current censuses,
surveys, and administrative reporting systems of various government agencies in their
article, concentrating on the indicators that may acquire from them. In addition, they
proposed a MIMAP Monitoring System. The purpose of this study is to supplement the
previous review by concentrating on community-based monitoring systems, including
those that are not part of the traditional statistics system. The various systems are
evaluated not just in terms of the data that they create, but also in terms of the system's
viability. The study also intends to conclude the design of a community-based monitoring
system based on Florentino and Pedro's system by altering some of the original elements
and providing specifics on the other components.
Community-Based Monitoring System: A Tool to Fight Poverty
According to Reyes et al. (n.d.), The Community Based Monitoring System is the
LGU-based poverty monitoring system that gathers information on all households within
a community. This means that local government agencies lead the collection and
processing of data, act as repositories for databases, and use the data to formulate annual
development plans and annual investment plans. Community members are also involved
in data collection and validation, processing, analysis, and plan design. What sets this
approach apart from others is that it trains local governments to use poverty data as input
into the development planning process and as a basis for implementing poverty reduction
24
initiatives and projects. In addition, it empowers communities by ensuring their
participation in diagnosing poverty and identifying related remedies.
Development Tools
XAMPP
Figure 3. XAMPP Logo
Source: https://commons.wikimedia.org/wiki/File:XAMPP_Logo.png
According to Apache Friends (n.d.), XAMPP is a free and open-source web
server solution for Windows, macOS, and Linux that provides an easy-to-install and
portable environment for running PHP and MySQL applications.
The developers used XAMPP for creating databases and tables. It was also used
as a localhost server for the Electronic Barangay Integrated Profiling and Monitoring
System for Brgy. Kanlurang Bukal.
Sublime Text
25
Figure 4. Sublime Text Logo
Source: https://www.flickr.com/photos/othree/37224612235
According to Sublime HQ Pty Ltd (n.d.), Sublime Text is a popular text editor
with many features for programmers and developers. Syntax highlighting, auto-
completion, and multiple cursors are among the features that assist in making coding
more efficient and productive.
The developers used Sublime Text to develop the Electronic Barangay Integrated
Profiling and Monitoring System for Brgy. Kanlurang Bukal. Sublime Text is simple and
easy to use. It is also available in Windows, Mac, and Linux allowing developers to
easily change the IDE or text editor between computers if they needed.
PHP
26
Figure 5. PHP Logo
Source: https://commons.wikimedia.org/wiki/File:PHP-logo.svg
According to GeeksforGeeks (2022), “PHP is a server-side scripting language,
which means that the code is executed on the server-side, and the output is generated in
the form of HTML, CSS, and JavaScript; it is primarily used for web development, but it
can also be used as a general-purpose programming language". It is a popular open-
source scripting language used for web development.
The developers used PHP because it was well suited to web development to create
dynamic web pages and database applications. It has also the ability to easily connect
with MySQL and other databases.
JavaScript
Figure 6. JavaScript Logo
Source: https://commons.wikimedia.org/wiki/File:JavaScript-logo.png
27
According to Mozilla (2023), "It is a client-side scripting language, which means
the code is performed on the client-side, generally within a web browser. JavaScript is a
lightweight, interpreted programming language that is used to produce interactive effects
within web browsers."
The developers used JavaScript to add dynamic and interactive elements to
websites to make the website more attractive and can be easily understood by the users.
MySQL
Figure 7. MySQL Logo
Source: https://commons.wikimedia.org/wiki/File:MySQL_textlogo.svg
According to MySQL (n.d.), “MySQL is a database administration system. A
database is a well-organized collection of data. It might be anything from a basic grocery
list to a photo gallery or the massive volumes of data in a business
network”. It is a popular open-source relational database management system (RDBMS)
for online applications.
The developers used MySQL because it allows users to access the data that is
stored in a relational database management system. Users can also create, delete
databases, and set permissions on database tables. It also allows users to manipulate the
28
data within a database.
CSS
Figure 8. CSS Logo
Source: https://commons.wikimedia.org/wiki/File:CSS3_logo.svg
According to W3Schools (n.d.), CSS or Cascading Style Sheets is a language
used to specify the appearance of an HTML document. CSS specifies how HTML
components should be rendered. It is a language used for describing the presentation of
web pages, including the layout, colors, and fonts.
The developers used Cascading Style Sheet to style and arrange the contents of
the website. CSS defines how the contents should appear on web pages.
HTML
Figure 9. HTML Logo

29
Source: https://commons.wikimedia.org/wiki/File:HTML5_Badge.svg
According to Mozilla (2023), "HTML or HyperText Markup Language is the
standard markup language for building web pages and online applications, and it forms a
triangle of cornerstone technologies for the World Wide Web with Cascading Style
Sheets (CSS) and JavaScript".
The developers used HyperText Markup Language for constructing web pages.
HTML defines the content of the web pages. It was needed for the structure and
information to be displayed on the Electronic Barangay Integrated Profiling and
Monitoring System for Brgy. Kanlurang Bukal.
Bootstrap
Figure 10. Bootstrap Logo
Source: https://commons.wikimedia.org/wiki/File:Bootstrap_logo.svg
According to Bootstrap (n.d.), " Bootstrap is a popular front-end framework for
creating mobile-first and responsive websites and online apps. It includes
library of pre-designed HTML, CSS, and JavaScript components and templates that
developers may use to create aesthetically appealing user interfaces”.
The developers used Bootstrap to help speed up the development process and
30
assure uniformity in the UI design across all devices and screen sizes. The developers
may save time and work by leveraging pre-designed Bootstrap components instead of
building new UI elements from scratch. Moreover, Bootstrap has adaptable design
elements that allow the application to adjust to multiple screen sizes and resolutions.
Related Studies
Barangay Information Management System (BIMS)
Barangay Information Management System (BIMS) is a computerized barangay
management system of Barangay 172 Caloocan City that automates record-keeping
activities, resulting in efficient and accurate reporting as well as adequate automated file
management. Furthermore, the system will be able to safeguard residents' sensitive
information, simply update residents' profiles, handle file processing, and provide
certificates, permits, and clearance. All of their previous conventional systems will be
transformed into a very precise and competent Barangay Management System.
This system has a feature that automates record-keeping activities, handles file
processing, and provides certificates, permits, and clearance to the Electronic Barangay
Integrated Profiling and Monitoring System for Brgy. Kanlurang Bukal have.
Barangay Profiling System with Analytics
According to Jacobe et al. (2021), The purpose of this study was to create a
31
Barangay Profiling System with Analytics for Barangay Pallua Sur in Tuguegarao City. It
aims to create a systematic profiling system that allows authorized users to simply
maintain resident profiles, generate statistical reports, and update data. According to the
researchers, the devised system automates the profile of all residents in the barangay. It
keeps data electronically, making records more orderly, and it also gives the barangay
access to the information it requires. Reports requiring statistical analysis can be quickly
prepared.
This system has a feature that generates statistical reports and updates data, which
is the Electronic Barangay Integrated Profiling and Monitoring System for Brgy.
Kanlurang Bukal have.
Electronic Barangay Management System
According to Carpio (2020), The Electronic Barangay Management System, often
known as e-barangay, is a web-based ReaRea that aims to transform barangay
administration from a traditional and centralized unit into a more inclusive and citizen-
oriented scheme. Its primary goal is to simplify existing
administrative operations such as document requests, complaint filing, and the generation
of appropriate and accurate local data. In the creation of the system, the researcher used
the prototype process. It focuses on developing and testing system features, graphical
user interfaces, and iteration scheduling. This iteration establishes the groundwork for
development, including functionality and usability testing to confirm the system's
efficacy, efficiency, and dependability.

32
This system has a feature that generates appropriate and accurate local data in the
Electronic Barangay Integrated Profiling and Monitoring System for Brgy. Kanlurang
Bukal have.
Profiling and monitoring system for the National Nutrition Council Region
VI
According to Ambasa et al. (2013), The system can recognize OPT results at the
provincial and municipal levels. The findings of this study will help the National
Nutrition Council (NNC) ensure effective data collection, processing, identification,
monitoring, and forecasting based on past information. While profiling supports the NNC
in monitoring nutrition workers at all levels. The Regional Committee can use data
mining to evaluate data from many various dimensions or viewpoints, categorize it, and
summarize the links discovered. It enables the regional committee to evaluate links
between "internal" elements such as children's nutrition status and "external" factors such
as parents' education and work position.
This system has a feature where it generates data of the residents like,
employment status and health status of the residents in the Electronic Barangay
Hybrid Barangay Information Management System
According to Intud and Intud (2021), the Hybrid Barangay Information

33
Management System was developed to quickly gather, encode, store, and maintain data
from the Barangay, resulting in a systematized method of accumulating and retrieving
relevant information that is critical in making informed decisions on various potential
local governance issues. As noticed, there were a number of issues connected with the
present tedious manual procedures used on a daily basis, such as obtaining vast numbers
of file folders containing their constituents' data, which caused delays in service delivery
and some mistakes in work completion, and so on. Today, the introduction of
contemporary technology, opens up new potential for barangays to better serve their
citizens by computerizing papers such as barangay clearance, certificates of indulgence,
letters of recommendation, reports, and other documents.
The Electronic Barangay Integrated Profiling and Monitoring System for Brgy.
Kanlurang Bukal has also a feature similar to the developer’s system where all of the
papers such as barangay clearance, certificate of indulgence, letters of recommendation,
produce reports, and others are now computerized and automated.
Community-Based Monitoring System (CBMS)
According to Philippine Statistics Authority (n.d.), The Community-Based
Monitoring System (CBMS) is an organized technology-based system for gathering,
processing, and validating essential disaggregated data that may be utilized for local
planning, program implementation, and impact monitoring, all while enabling
communities to take part in the process. It entails gathering local data that is used to
target families for government initiatives aimed at reducing poverty and fostering
economic growth.
34
Using accelerated poverty profiling methods in the data, the CBMS comprises a
census of homes conducted by the local government units (LGUs) with community
engagement. The CBMS will produce data on localized facts, statistics, and maps
pertaining to the various aspects of poverty, including health, nutrition, water, sanitation,
housing, education, income, employment, security, and participation.
Like developers’ developed systems, it can also produce data on localized facts,
statistics, and maps pertaining to the various aspects of poverty such as health status,
employment status, etc.
Mobile-based Household Profiling System for a Barangay in Quezon,
Philippines
According to Alinea et al. (2022), the implementation of the Barangay Profiling
System has revolutionized the process of searching for resident profiles.
The Mobile-Based Household Profiling System, specifically designed for
Barangay Guinhawa, Quezon, Quezon, provides a comprehensive profile of every
household in the locality. The local government unit of the barangay will greatly benefit
from this system as it allows for easy access, storage, and updating of information.
Compared to traditional manual processes, this advanced system proves to be more
efficient and effective, significantly enhancing the barangay's governance.
The Electronic Barangay Integrated Profiling and Monitoring System for Brgy.
Kanlurang Bukal has also a feature similar to the developer’s system where it provides a
comprehensive profile and allows updated information about residents.

35
Computer-Based Census Management System
Ugwu (2013) claims that, in order to solve the time-consuming, monotonous, and
repetitive manual census activities, the researcher conducted a thorough examination of
the existing system. The Structured System Analysis and Design are included in the
report itself. The SSADM Design Methodology was used and explained. The system's
high-level model was also designed and displayed in an easy-to-understand format. The
system's high-level model was designed architecturally and detailed through its separate
components. Finally, the parallel changeover methodology was used so that the
commission could compare the results of the two systems (old and new) prior to
implementation.
This system has a feature where the collection of data was automated in the
Electronic Barangay Integrated Profiling and Monitoring System for Brgy. Kanlurang
Bukal have.
Design and Implementation of Computerized Population Analysis System
According to Okwong (2008), This system consists of methods for measuring the
dimensions and dynamics of populations. These methods were originally developed to
study human populations, but they have since been applied to a variety of fields where
researchers want to understand how populations of social actors change over time due to
processes such as birth, death, and migration. Demographic analysis in the context of
36
human biological populations employs administrative records to generate an independent
estimate of the population. Estimates from computerized-based spec analysis systems are
frequently regarded as a reliable standard for judging the accuracy of census data
gathered at any time. Demographic analysis is used in labor force demographics to
estimate the sizes and flows of worker populations; population ecology focuses on the
birth, death, and movement of firms and institutional forms.
This system has a feature where it has a demographic analysis of the population in
which the Electronic Barangay Integrated Profiling and Monitoring System for Brgy.
Kanlurang Bukal have.
Senior Citizen Web-Based Profiling System
According to Geverola and Ugsang (2018), The study was conducted in order to
figure out the deficiency of transactions at the office of Senior Citizen in Malita, Davao
Occidental. The Senior Citizen Web-Based Profiling System was created and installed for
a variety of purposes, including easy and quick information retrieval at the office. This
research looks at the transition from manual to automated systems and how the user can
control the new system. The goal of this research is to construct a computerized profiling
system that will enhance and create an automated registration procedure, identification
card, and demographic profile for each barangay.
The Waterfall Methodology model was employed in the study, which followed a
web-based structure beginning with preliminary investigation, requirement analysis,
design phase, implementation, and maintenance. Each phase guided the researchers
through the study's growth and assisted them in organizing the workflow of each activity.
37
This system has a feature where the registration of a person is automated and
shows the demographic profile of the entire barangay in which the Electronic Barangay
CHAPTER 3
METHODOLOGY
This chapter presents the project design, project development, testing, and
evaluation procedures that the developers used in developing the system.
Project Design
The functions below diagram show how the development of its software program
works.
DBMS: MySQL SERVER
E-BIPMS ELECTRONIC BARANGAY

INTEGRATED PROFILING AND MONITORING
SYSTEM FOR BRGY. KANLURANG BUKAL
DATABASE
INTERNET BROWSER
38
RESIDENTS ADMINISTRATOR WEB USER
Figure 11. Project Design
Figure 11 shows the project design of E-BIPMS: The Barangay Kanlurang Bukal,
Liliw, Laguna integrated profiling and monitoring system composed of the three (3) main
users which are the administrators, residents, and web visitors. The E-BIPMS can be
accessed with the use of an internet browser. The residents' records and other related
information of the system is stored in the database that serves as the permanent data
storage of the entire system.
System Framework
A system framework is a structured approach or methodology that researchers
follow to conduct their research studies. It outlines the key components, processes, and
guidelines to ensure a systematic and rigorous research process.

39
Figure 12. System Framework
The Electronic Barangay Integrated Profiling and Monitoring System benefits
administrators, users, and residents alike. It organizes administrative processes, enhances
data accuracy and accessibility, and improves resident services and engagement. By
embracing this system, we can create a more efficient, transparent, and connected
barangay community in Barangay Kanlurang Bukal.
Flowchart Admin Side

40
Figure 13. Flowchart Admin Side
The flowchart begins with a start symbol, indicating the initiation of the profiling
and monitoring system. For new users who are not yet registered, this stage allows them
to create a new account by providing their necessary information. It includes a
registration form where users can input their details such as name, address, contact
information, and desired login credentials. For users who are already registered, this stage
checks if they are existing members of the system. If the user is already a member, they
can proceed to the login stage. Here, the user provides their username and password to
authenticate their access to the system. After successful login, the user is directed to their
profile page. This stage allows users to view and manage their personal information and
update any necessary details. Within the profile page or from the home screen, the user
can initiate a document request. This stage represents the process of submitting and
processing requests for documents such as clearances, certifications, or permits. It may
include selecting the type of document, providing necessary details, and submitting the
request. The feedback allows users to provide feedback or suggestions to the system
administrators or relevant personnel. It may include a feedback form or a contact
mechanism for users to share their thoughts or report issues. Users have the option to
change their passwords for security reasons or if they have forgotten their current
password. This stage allows users to update their password by following a password
change process. When the user is ready to end their session, they can choose to log out
from the system. This stage ensures a secure exit from the application. The flowchart
concludes with an end symbol, indicating the completion of the profiling and monitoring
41
system.
Flowchart User Side
Figure 14. Flowchart User Side
At the edit profile, a decision point is introduced with the condition "If false, edit
your profile?" If the user wishes to edit their profile, they can select this option, and the
flowchart loops back to the profile stage where they can make the necessary changes. If
they choose not to edit their profile, the flowchart continues to the next step. After
42
reviewing their profile, the user is presented with the option to request a document. If
they choose to request a document, the flowchart leads
to the "Document Request" stage where they can initiate and submit them document
requests. If they choose not to request a document, the flowchart continues to the next
step. Following the document request decision, the user is presented with the option to
provide feedback. If they choose to add feedback, the flowchart leads to the "Feedback"
stage where they can share their thoughts or report issues.
If they choose not to provide feedback, the flowchart continues to the next step.
After the feedback stage, the user is presented with the option to change their password.
If they choose to change their password, the flowchart leads to the "Change Password"
stage where they can update their password. If they choose not to change their password,
the flowchart continues to the next step.
Flowchart LGU Side

43
Figure 15. Flowchart LGU Side
Flowchart BHW Side
Figure 16. Flowchart BHW Side

44
Project Development
Data Gathering
Requirements
Implementation Analysis
Testing and Design and Coding

Evaluation
Figure 17. Scrum Model
The researchers used the Scrum Model in the development of the Capstone
Projects. This model is commonly used in agile project management and is primarily
designed for software development.
Phase 1. Data Gathering
The researchers gathered data through interviews with the respective clients for
them to have a copy of all the files and documents that are needed
45
Phase 2. Requirements and Analysis
In the Requirement Analysis phase, the researchers planned what the development
was all about. It is a crucial phase in software development and other project
management domains. It involves gathering, documenting, and understanding the needs
and expectations of stakeholders to define the system's requirements accurately.
Phase 3. Design and Coding
In this phase the researchers design the entire system. The researchers plan and
study what applicable software to use in the development of the system.
Phase 4. Testing and Evaluation
In the Testing and Evaluation phase, the system will undergo the testing and
developing method. The researchers will test if the system has an error to debug or
software defects.
Phase 5. Implementation
In the phase of Implementation, the researcher refers to the process of putting the
proposed solution or project into action. It involves executing the plan, strategies, and
activities outlined in the project proposal to achieve the desired outcomes.
Project Testing and Evaluation

46
The system will undergo several tests which are functionality testing browser
testing and System Usability Scale (SUS). It will also be evaluated using ISO/IEC 25010
in terms of product quality.
Functionality Testing
The developers will perform the testing to ensure that the system meets its
objectives. It will also evaluate the interface and if all of its functions are properly
working. This will help the developers to know if the system can be easily understood
and used by the administrator, and user. Testing the system also helped the developers to
know what the system needed to improve.
Table 1. Functionality Testing
Test Sequence Navigatio Expected Action Actual Status

n Path Result Result
Button Navigation Expected Result Click Actual result Passed or

Path Failed
Table 1 shows the Functionality Testing table that will be used by the developers.
The first column of the table shows what button is clicked. The Navigation Path shows
what page will be shown after clicking that specific button. The Expected Result
determines if it will proceed to the navigation path. The action would be a click. The
Actual Result shows the result when you click the specific button. The last column is the
status or the Passed or Failed. If passed, the expected Result is shown in the Actual
Result and if not, it is failed.
Browser Testing
47
The developers will use this instrument for browser testing to check the system if
it can be viewed properly and if all the functions of the system are functioning on
different browsers. It will also be used to check if the designs are not changing when it is
viewed on a chosen browser. The browsers are Google Chrome, Microsoft Edge, Firefox,
and Safari.
Table 2. Browser Testing
Web Browsers Status/Result Actual Result Recommended
Browser Passed or Failed Result Yes or No
Table 2 shows the Browser Testing table that will be used by the developers. The
first column of the table shows what browser will be used in testing. The Status/Result
column determines if the browser used is Passed or Failed. If Passed, the browser met the
expected result or the Actual Result and if not, the Status/Result is Failed. The last
column would be the recommendation, if it met the expected result, the developers would
recommend that specific browser. If not, the developers would not recommend that
specific browser.
System Usability Scale (SUS)
Satisfaction has been part of our classic definition of usability for a very long
time. System Usability Scale (SUS) has been developed to provide a standardized
measurement of user satisfaction. It can be used for comparison and evaluation of
applications or products to set and track targets regarding satisfaction of the non-IT
respondents.
48
Table 3. Liker Scale of SUS

Scale Interpretation
5 Strongly Agree
4 Agree
3 Fair
2 Disagree
1 Strongly Disagree
Table 3 shows the numerical scale used in the (SUS) to interpret the testing results
with its equivalent interpretation.
Table 4. Numerical Scale of the SUS

80.3 – 100 Excellent
68 - 80.3 Good
68 Okay
51 – 68 Poor
1.00 – 51 Awful
Project Evaluation Procedure
To determine the acceptability of the system, the developers will conduct the
49
evaluation process using ISO/IEC 25010 for evaluating the system. ISO/IEC 25010 is
composed of functionality suitability, performance efficiency, compatibility, usability,
reliability, security, maintainability, and lastly, portability.
The system was evaluated by fifteen (30) Residents who are currently living in
Brgy. Kanlurang Bukal and five (5) I.T Experts.
These are the basis of evaluating the system:
● Functionality – used by the developers to test if all the buttons are working properly.
● Performance – used by the developers to test if the speed and response of the system
is fairly acceptable.
● Compatibility – used by the developers to test if the system can work successfully
and can perform its required functions efficiently.
● Usability – used by the developers to have the assurance that the system is easy to
use.
● Reliability – used by the developers to ensure the absence of failure and the
efficiency of the users to access the system.
● Security – used by the developers to test if the system ensures the information and
accessible only by the authorized users to access.
● Maintainability – used by the developers to test if the system can be effectively and
efficiently modified without introducing defects.
● Portability – used by the developers to ensure that the system is easy to install with
other hardware devices.

50
International Organization for Standardization (ISO)
Our survey methodology was structured in accordance with ISO
(International Organization for Standardization) guidelines, integrating the ISO method to
ensure consistency and reliability. This involved employing an interpretation scale
spanning from 'Strongly Agree' to 'Strongly Disagree' to capture nuanced respondent
perspectives accurately. This approach facilitated a standardized and comprehensive
analysis, aligning with internationally recognized standards for survey administration.
Table 4. Liker Scale of ISO

5 Strongly Agree
4 Agree
3 Fair
2 Disagree
1 Strongly Disagree
Statistical Treatment of Data
To test the reliability of the data that will be gathered, the developers will present
a numerical table that contains the scale that is used to evaluate the system.
Table 4. Numerical Scale of the ISO/IEC 25010

51
4.51 – 5.00 Excellent
3.51 – 4.50 Good
2.51 – 3.50 Okay
1.51 – 2.50 Poor
1.00 – 1.50 Awful
Table 4 presents the numerical scales that will be used in evaluating the system.
1.00 – 1.50 is interpreted as “Awful”, 1.51 – 2.50 is “Poor”, 2.51 – 3.50 is interpreted as
“Okay”, 3.51 – 4.50 is interpreted as “Good”, and 4.51 – 5.00 is interpreted as
“Excellent”
CHAPTER IV
RESULTS AND DISCUSSION
This chapter presents the project requirements and specification, project
description and its capabilities and limitations. It also includes the testing and evaluation
52
results of the project.
Project Requirements and Specification
This section includes the hardware requirements, software requirements and
human resource requirements that are needed to be able to develop and implement the
Electronic-Barangay Integrated Profiling and Monitoring System for Barangay
Kanlurang Bukal.
Hardware Requirements
The following are the requirements for the development and implementation of
the developed project.
For the Development and Implementation
Computer or Laptop with the following minimum specifications of:
● 32-Bit or 64-Bit OS (Windows 7 up to Windows 11)
● Intel® Celeron® CPU or higher
● 4.00GB RAM or higher
Software Requirements
The different software requirements below are used by the developers to obtain
the desired output and objectives of the development of Electronic-Barangay Integrated
Profiling and Monitoring System for Barangay Kanlurang Bukal.

53
For the Development
This includes the software requirements that are used to develop the Electronic-
Barangay Integrated Profiling and Monitoring System for Barangay Kanlurang Bukal.
The following requirements are:
 Operating System
 JavaScript
 PHP
 MySQL
 XAMPP
 Sublime Text Editor
 Bootstrap
 Security Software
 Analytics and Reporting Too
For Implementation
This includes the software requirements that are needed to implement the
development of Electronic-Barangay Integrated Profiling and Monitoring System for
Barangay Kanlurang Bukal.
The following requirements are:

54
● 32 or 64 bit Operating System
● WampServer (32 or 64 bit)
● Web Browser
Human Resource Requirements
This section discusses the human resource requirements that are needed in the
implementation of the project.
Administrator – Secretary often handle documentation, record-keeping, scheduling, and
communication within an organization. Within the system, they might be responsible for
maintaining resident records, handling various documents and scheduling meetings or
events.
User – The user is the one who can also access the website aside from the administrator
but not the database. They can register to record their residency and to easily request
specific documents in barangay.
Knowledge Requirements
 Knowledge about current process of E-BIPMS
 Database Management
 Web Development
 Project Management
 Data Privacy and Security

55
 UX Design
 Communication Skill
Project Description
The project entitled “The Development of Electronic Barangay Integrated
Profiling and Monitoring System for Barangay Kanlurang Bukal Liliw, Laguna” was
developed for the Barangay Hall of Kanlurang Bukal for them to lessen the paper
Electronic Barangay Integrated Profiling and Monitoring System is a web and
mobile based profiling and monitoring system that streamlines resident registration and
updates, simplifying the process for obtaining necessary barangay documents like
clearances, cedulas, and business permits. Residents receive timely updates on upcoming
events and available barangay services.
Barangay secretaries and health workers efficiently gather and organize resident
information, including demographics and socio-economic status. This valuable data aids
in informed decision-making for public services and development projects, providing
barangay officials with deeper insights into constituents' needs and priorities.
By leveraging this comprehensive data, local government units (LGUs) can
strategize and tailor programs and services to precisely match the community's needs,
ensuring a more responsive and effective approach to addressing the community's
requirements.
56
Project Features
This section discusses the capabilities and limitations of theElectronic Barangay
Integrated Profiling and Monitoring System for Barangay Kanlurang Bukal Liliw,
Laguna. It also includes the screenshots of the developed project.
Screen Hierarchy
Figure 18. Home Page
The Home page in a system provides users with a central point of entry, offers
navigation options, displays relevant information, and facilitates interaction with the
system's features and functionalities.
Figure 19. Login Page

57
The Login Page allows users to authenticate themselves by entering their
username and password. This ensures that only authorized individuals can access the
system's functionalities and data.
Figure 20. Registration Page
The Registration page provides a means for new users to create their own
accounts in the system. Users typically need to provide information such as their name,
email address, mobile number, username, and password. Registering in the system
establishes a unique user identity that distinguishes one user from another.
58
Figure 21. User Page
The figure User Page is to provide a dedicated space or interface for individual
users to manage their profile, settings, preferences, and activities within the system. The
user page serves as a personalized dashboard or control panel that allows users to interact
with and customize their experience within the system.
Figure 22. User Request Document Page
The User Request Documents feature is to allow users to request specific
documents or files from the system administrators or other authorized entities. This
feature facilitates the process of document retrieval and enables users to obtain
59
information such as name, document type, and purpose.
Figure 23. User Forgot Password Page
The purpose of the User Pass Change feature is to provide users with the ability to
update or modify their current password. This feature enables users to enhance the
security of their accounts, comply with password expiration policies, and maintain
control over their login credentials.
Figure 24. Admin Page
The admin page provides authorized administrators with a centralized interface to
manage and control various aspects of the system. It serves as a control panel or
dashboard that allows administrators to perform administrative tasks, configure settings,
monitor system activities, and ensure the smooth operation of the system.
60
Figure 25. Admin User Page
The Admin User serves as the system administrator who's responsible for
maintaining user accounts, and controlling access privileges. This includes creating new
user accounts, updating user profiles, resetting passwords, or deactivating user access
when necessary.
Figure 26. Admin List of Resident
This figure shows the Admin List of Resident, it enables administrators to manage
and maintain accurate information about residents within the system. This includes
creating new resident profiles, updating existing profiles, and ensuring the completeness
and correctness of resident data.

61
Figure 27. Barangay Officials
The barangay officials' profiles are a centralized location for managing and
accessing information about the officials who hold positions within the Barangay. This
includes details such as their names, positions, contact information, responsibilities, terms
of office, and any relevant qualifications or experience.
Figure 28. Admin Document
The document request feature provides users with a convenient way to access specific
documents or files that may be stored within the system. It allows users to request
documents that they need for various purposes, such as obtaining official records,
accessing personal information, or retrieving important files
Figure 29. Admin Edit Resident

62
Admin Edit Resident feature provides the administrator with the ability to modify or
update the information and details associated with a resident's profile. This feature allows
administrators to make necessary changes to resident records, ensuring that the
information remains accurate, up-to-date, and reflective of the resident's current status.
Figure 30. Admin Add Resident
The
Admin Add
Resident figure shows the administrator to create and add new resident profiles to the
system. This feature enables administrators to enter and manage information about new
residents joining the community, ensuring that their details are accurately captured and
included in the system's records.

63
Figure 31. LGU Page
In this figure it shows the dashboard, resident profile, events, and job services. In job
services LGU can add jobs and services that can help the unemployed resident.
Figure 32. BHW
This figure represents the Bhw dashboard where bhw user can help those non-techy
residents to register their residency.

64
Project Capabilities and Limitations
The Electronic Barangay Integrated Profiling and Monitoring System (E-BIPMS)
is a system that aims to provide a comprehensive and systematic profiling of the residents
of a barangay, as well as to monitor and track their activities and performance. The
system also allows the barangay officials and personnel to generate reports and analytics
based on the data collected.
Some of the capabilities of the E-BIPMS are:
● It can store and organize the records of each household in the barangay, such as
name, address, contact number, family members, liabilities, employment, etc.
● It can generate statistical reports on various indicators of the barangay population,
such as gender distribution, social group distribution, unemployment rate, etc.
● It can provide an access to the information needed by the barangay officials and
personnel for planning and decision-making purposes.
● It can issue barangay clearance and other documents to the residents who request.
● It has demographic information that shows the different levels of special groups.
Some of the limitations of the EBI-PMS are:
● It requires a reliable internet connection and a computer unit or a mobile device to
operate.
● It may face technical issues or malfunctions that may affect its functionality or
65
security.
● It can’t trace crimes
● It may not be able to capture all aspects of the residents’ lives or situations that may
be relevant for their well-being or development.
Project Testing and Evaluation
Project Testing
Functionality Testing
Test Sequence Navigation Expected Action Actual Status

Path Result Result
Register Button Registration Proceed to Click Shows Passed

Form Registration Registration
Form Form
Log-in Button Account Profile Proceed to Click Shows Account Passed
Account Profile Profile
Add New Resident Registration Proceed to Click Shows Passed

Form Registration Registration
Form Form
Print Button Print Preview Proceed to Print Click Shows Print Passed
Preview Preview
Table 1 shows the functionality testing results in Electronic Barangay
Integrated Profiling and Monitoring System. Each button has a designated page to be
shown when they are being clicked. When all of the buttons were clicked throughout the
testing, they led to the actual result and were properly functioning according to their
functions, hence the status was all passed. The status is passed when features within the
project are performing as expected and to confirm that the project satisfies the objectives.
Compatibility Testing Result

66
Web Browsers Status/Result Actual Result Recommende

d
Chrome The size of the images, The size of the images, Yes
buttons and design are buttons and design are
fitted to screen. The fitted to screen. The
browser responds faster. browser responds faster.
Edge The size of the images, The size of the images, Yes
Firefox The size of the images, The size of the images, Yes
Table 2 shows the browser testing results. Chrome, Edge, and Firefox are the
browser used to test the E-BIPMS. The browsers were thoroughly tested to confirm that
the system functions correctly and consistently across all platforms.
The developers used SUS to measure the usability of the develop project,
the questionnaire is composed of ten (10) questions. The questionnaire was
answered by thirty (30) non-IT respondents who are said to be residents of
Barangay Kanlurang Bukal Liliw, Lagua. The questionnaire is answerable by
Strongly Agree, Agree, Fair, Disagree, and Strongly Disagree.

67
Project Evaluation
Table #: SUS score results of the NON-IT respondents
Type of Number of SUS Score Interpretation

respondents Participants
Officials
10 88.5 Excellent
Residents
20 77.625 Good
Overall:
30 81.25 Excellent
Table # presents the numerical scales that will be used in evaluating the system.
1.00 – 51 is interpreted as “Awful”, 51 – 68 is “Poor”, 68 is interpreted as “Okay”, 68 –
80.3 is interpreted as “Good”, and 80.3 – 100 is interpreted as “Excellent
Table #: ISO 25010 Evaluation Results of the IT Respondents

68
Characteristic Rating Interpretation

Functional Suitability
4.65 Excellent
Performance Efficiency
4.466667 Good
Compatibility
4.333333 Good
Usability
4.6 Excellent
Reliability
4.52 Excellent
Security
4.416667 Good
Maintainability
4.333333 Good
Portability
4.55 Excellent
Overall Mean
4.48375 Good
Table # presents the numerical scales that will be used in evaluating the system.
1.00 – 1.50 is interpreted as “Awful”, 1.51 – 2.50 is “Poor”, 2.51 – 3.50 is interpreted as
“Okay”, 3.51 – 4.50 is interpreted as “Good”, and 4.51 – 5.00 is interpreted as
“Excellent”.
Table 9 shows the final results of the evaluation of the IT experts. In terms
of Functional Suitability, the developed project attained a rating of 4.65 from
the IT Experts. This means that the IT Experts agreed that the developed project
covers all tasks and objectives, the functions provide correct results, and
facilitate the accomplishment of tasks and objectives.

69
In terms of Performance Efficiency, the developed project attained a
rating of 4.466667 from the IT Experts. This means that the IT Experts agreed that
the developed project processing time and project parameter as the amounts and
types of resources it uses fulfill requirements when performing its functions.
With regards to Compatibility, the developed project obtained a rating of
4.333333 from the IT Experts. This means that the IT Experts generally agree that
the developed project can perform its required functions efficiently and
components can exchange and used the information.
In terms of Usability, the developed project attained a rating of 4.6 from
is appropriate for the user’s needs, and enables the user to learn how to use it
with effectiveness and efficiency in emergencies.
In terms of Reliability, the developed project attained a rating of 4.52 from
meets the requirements for reliability in normal operation, as well as being
operational and accessible when needed.
With regards to Security, the developed project obtained a rating of
the developed project prevents unauthorized access to or modification of
computer programs or data.
With regards to Maintainability, the developed project obtained a rating of
the developed project is reusable, analyzable, and can be effectively adjusted
without adding errors or diminishing the present product or quality.

70
Lastly, Portability the developed project obtained a rating of 4.55 from the
IT Experts. This means that the IT Experts generally agree that the developed
project is well-equipped to seamlessly transition and operate across various
platforms, systems, or settings without encountering significant hurdles.
Overall, the developed project obtained a rating of 4.48375 from the IT
Experts and was interpreted as “Good”. This means that IT Experts generally
agree that the developed project is functional, efficient, compatible, useful,
dependable, secure, and maintainable.

71
CHAPTER V
SUMMARY OF FINDINGS, CONCLUSIONS AND RECOMMENDATIONS
This chapter discusses the summary of findings, and conclusions based on the
results gathered from the non-IT and IT experts. It also includes recommendations for
further improvement of the project.
Summary of Findings
E-BIPMS (E-BIPMS ELECTRONIC BARANGAY INTEGRATED PROFILING
AND MONITORING SYSTEM) is intended to enhance the quality of services provided
to the residents of Brgy. Kanlurang Bukal by introducing digital solutions. The project's
purpose is to enhance efficiency by reducing time-consuming manual processes,
minimize errors in data handling, improve information retrieval, enhance data security,
and overall, enhance the delivery of Barangay programs and services.
The project undergoes several testings. Functionality Testing confirmed that the
elements and buttons operate effectively in accordance with their intended functions. On
the other hand, the developed web and mobile based system passed the compatibility
testing on Android and PC. Furthermore, it ran seamlessly at full resolution on various
browsers like Google Chrome, Microsoft Edge and Firefox,
The developers also conducted an evaluation procedure using the System
Usability Scale for non-IT expert and ISO 25010 for IT Experts. The non-IT experts rated
the developed system with a total of 81.25, while the IT Experts evaluated it with a rating
of 4.48375. It indicates that they generally agreed that the developed system meets the
SUS and ISO 25010 quality characteristics.

72
Conclusions
1. The developers were able to developed and designed an Electronic Barangay
Integrated Profiling and Monitoring System. It has the following features:
a. Resident registration
b. Requesting Documents
c. Payment method
d. Demographic
e. Email Notification
f. SMS Notification
The developed project was evaluated by using SUS for non-IT respondents and
ISO 25010 for IT experts. Non-IT respondents rated the developed system with 81.25,
corresponding to an interpretation of “Excellent”. On the other hand, the IT experts rated
the system with 4.48375, with an interpretation of “Good”. It indicates that they generally
agreed that the developed system aligns with the SUS and ISO 25010 quality
characteristics.
The developers were able to document the project.
Recommendations
The following recommendations are suggested for further enhancing the
developed project.
73
1. Automatically prevent or prohibit individuals with pending legal cases in their place
of origin from registering in the system.
2. Add push notification for user side.
3. Add automatic recommendation of barangay project for people.
Bibliography
Jacobe, B. (2021). Barangay profiling system with analytics. International Journal of

Advanced Trends in Computer Science and Engineering.
https://www.warse.org/IJATCSE/static/pdf/file/ijatcse071042021.pdf
Alba, I. Z., & Reyes, C. M. (1994). Assessment of Community-Based Systems

Monitoring Household Welfare. RePEc: Research Papers in Economics.
https://www.econstor.eu/bitstream/10419/187257/1/pidsdps9407.pdf
Alinea, J. M., Escolano, C. C., & Magallon, R. a. O. (2022, December 31). Mobile- based
Household Profiling System for a Barangay in Quezon, Philippines. ResearchGate.
https://www.researchgate.net/publication/369412943_Mobile-
based_Household_Profiling_System_for_a_Barangay_in_Quezon_Philippines
Ambasa, K. S., Balandra, T. J., Baltazar, T., Mandia, A. R., Sucero, J. J., & Susbilla, N.
(2013, July). Profiling and Monitoring System for the National Nutrition Council
Region VI. Central Philippine University. Retrieved March 28, 2023, from
74
https://repository.cpu.edu.ph/bitstream/handle/20.500.12852/1785/BSIT_Ambasa
KS_2013_Ab.pdf?sequence=1&isAllowed=y
Apache Friends. (n.d.). About the XAMPP project. XAMPP.

https://www.apachefriends.org/about.html
Barangay Information Management System. (n.d.). StuDocu. Retrieved March 28,

2023, from https://www.studocu.com/ph/document/university-of-caloocan- city/bachelor-
of-science-in-accounting-information-system/chap1-bims-barangay- information-
management-system/46792531
Bootstrap. (n.d.). What is Bootstrap? https://getbootstrap.com/docs/5.1/getting-

started/introduction/
Carpio, C. O. (2020). Electronic Barangay Management System. International Journal

of Multidisciplinary Research and Publications (IJMRAP), 3(2), 26–32.
http://ijmrap.com/wp-content/uploads/2020/07/IJMRAP-V3N1P78Y20.pdf
GeeksforGeeks(2022,June17).PHPIntroduction. https://www.geeksforgeeks.org/php-
introduction/
Geverola, D. L., Jr., & Ugsang, J. B. (2018). Senior Citizen Web-based Profiling System.
ResearchGate. https://doi.org/10.13140/RG.2.2.31532.56966
Imam, W. (2021, December 3). Paper-based versus cloud-based document

management system. LinkedIn. https://www.linkedin.com/pulse/paper-based- versus-
cloud-based-document-management-system-imam/
Intud, J. R. B., & Intud, J. R. B. (2021). Design and Implementation of a Hybrid

Barangay Information Management System. International Journal of Computer
Science and Mobile Computing. https://doi.org/10.47760/ijcsmc.2021.v10i05.004
Jacobe, B., Pascua, M. L., Tumbali, B. J., Aquino, M. C., & Gumabay, M. V. (2021).
Barangay Profiling System with Analytics. International Journal of Advanced Trends
in Computer Science and Engineering, 10(4), 2697–2700.
75
https://doi.org/10.30534/ijatcse/2021/071042021
Lacasandile, A. D., Abisado, M. B., Labanan, R. M., & Abad, L. P. (2020). Development
of an Information-Based Dashboard: Automation of Barangay Information Profiling
System (BIPS) for Decision Support towards e-Governance. 2020 the 4th International
Conference on E-Society, E-Education and E- Technology.
https://doi.org/10.1145/3421682.3421691
Mozilla.(2023a, February 20). JavaScript. https://developer.mozilla.org/en-

US/docs/Web/JavaScript
Mozilla. (2023b, March 13). HTML: HyperText Markup Language.

https://developer.mozilla.org/en-US/docs/Web/HTML
MySQL. (n.d.). What is MySQL? https://dev.mysql.com/doc/refman/8.0/en/what-is-

mysql.html
Okwong, S.-W. U. (2008). Design and Implementation of Computerized Population

Analysis System. Afe Babalola University. Retrieved April 9, 2023, from
https://pub.abuad.edu.ng/Open_Access_Research_Projects_of_Universities_-
_Batch_1/Computer%20Science/DESIGN%20AND%20IMPLEMENTATION%20
OF%20COMPUTERIZED%20%20%20%20%20%20%20%20%20%20%20%20
%20%20%20%20%20%20%20%20POPULATION%20%20ANALYSIS%20SYST
EM.pdf
Pancoast, A. (2022, May 26). Automation versus paper-based systems.

Smartwerks.https://smartwerksusa.com/articles/automated-systems-versus- paper-based/
Philippine Statistics Authority. (n.d.). About CBMS. Retrieved March 28, 2023, from
https://psa.gov.ph/cbms/about
Rajasooriyar, R. (n.d.). Moving from paper based processes to a digital workflow. Digital
Document Management - Software Solutions | DocTech.
https://www.doctech.co.uk/blog/moving-from-paper-based-processes-to-a-digital-
76
workflow
Reyes, C., Mandap, A. B., Ilarde, K., Garnace, L., Asirot, J., & Bancolita, J. (n.d.).
Community Based Monitoring System: A Tool to Fight Poverty. PEP. Retrieved March
27,2023,fromhttps://www.pep-net.org/sites/pep-net.org/files/typo3doc/pdf/CBMS-
GRB/METHODOLOGY_WORKSHOPS/Tool_fight.pdf
Sublime HQ Pty Ltd. (n.d.). Sublime Text. Sublime Text. https://www.sublimetext.com/
Ugwu, V. (2013, August). Computer Based Census Management System. Afe Babalola
University. Retrieved April 9, 2023, from
https://pub.abuad.edu.ng/Open_Access_Research_Projects_of_Universities_-
_Batch_2/COMPUTER%20ENGINEERING/COMPUTER_BASED_CENSUS_MA
NAGEMENT_SYSTEM.pdf
W3Schools. (n.d.). CSS Tutorial. https://www.w3schools.com/css/default.asp
https://www.usability.gov/how-to-and-tools/methods/system-usability-scale.html
77
APPENDIX A
(Gantt Chart)
78
79
80
APPENDIX B
(Evaluation Instrument)
81
82

83
84
85
ISO
86
87
88
89
90
91
92
93
94
95
96
APPENDIX C
(Pictures Taken During
Testing and Evaluation)
97
98
Figure No.
This figure displays the documentation capturing the testing and evaluation
procedures carried out within the system, involving the IT- Expert
99
Figure No.
This figure displays the documentation capturing the testing and evaluation
procedures carried out within the system, involving residents from Barangay Kanlurang
Bukal.
100
APPENDIX D
(IT Experts Profile)
101
102
103
104
105
106
APPENDIX E
(Evaluation Result Matrix)
107
SUS EVALUATION RESULT OF NON-IT EXPERTS
QUESTIONS 5 4 3 2 1 TALLY
Q1. I think that I would like
to use this website frequently. 27 3 0 0 0 30
Q2. I found the website
unnecessarily complex. 0 3 2 17 8 30
Q3. I thought the website was
easy to use. 18 9 3 0 0 30
Q4. I think that I would need
the support of a technical 1 2 6 12 9 30
person to be able to use this
website.
Q5. I found the various
functions in this website were 19 9 1 1 0 30
well integrated.
Q6. I thought there was too
much inconsistency in this 3 1 5 9 12 30
website.
Q7. I would imagine that
most people would learn to 19 9 1 1 0 30
use this website very quickly.
Q8. I found the website very
cumbersome to use. 1 2 5 15 7 30
Q9. I felt very confident
using the website. 21 7 0 2 0 30
Q10. I needed to learn a lot of
things before I could get 1 1 3 20 5 30
going with this system.
ISO 25010 EVALUATION RESULT OF IT EXPERTS
5 4 3 2 1 TALL TOTAL MEAN

CHARACTERISTIS SUB- Y
CHARACTERISTICS
108
Completeness 4 1 0 0 0 5
Functionality Correctness 4.65
3 1 1 0 0 5
suitability Appropriateness 4 1 0 0 0 5
Time behavior 3 2 0 0 0 5
Performance Resource utilization 3 1 1 0 0 5 4.466667
capacity 2 3 0 0 0 5
Compatibility Co-existence 2 3 0 0 0 5 4.333333
Interoperability 2 3 0 0 0 5
Learnability 3 2 0 0 0 5
Usability Operability 4.6
3 1 1 0 0 5
User interface aesthetics 4 1 0 0 0 5
Maturity 3 2 0 0 0 5
Availability 3 2 0 0 0 5 4.52
Reliability
Fault tolerance 4 0 1 0 0 5
Recoverability 3 2 0 0 0 5
Integrity 3 2 0 0 0 5 4.416667
Security Confidentiality 3 1 1 0 0 5
Accountability 3 1 1 0 0 5
Analyzability 3 0 2 0 0 5
Maintainability Modularity 4.333333
3 2 0 0 0 5
Modifiability 2 2 1 0 0 5
Adaptability 4 1 0 0 0 5
Portability Installability 3 1 1 0 0 5 4.55
Replaceability 3 2 0 0 0 5
109
APPENDIX F
(User’s Manual)
A – User Login Button

110
B – User Register Button

C – User Home Button
D – Barangay Announcement Button
E – Barangay Officials Button
F – Emergency Contacts Button
G – User Login – Admin, BHW, LGU Button
A – Username and Password

B - Account Login Button
C – User Register
A – User Information
111
B – User Register Button
A – User Document Request

B – User Edit Profile Button
A – User Edit Profile

112
B – Save profile button
A – Request Barangay Clearance

B – Request clearance button
A – User Information and Purpose for Barangay Clearance

113
B – Request barangay clearance button
A – User Account Settings

B – User Edit Profile
C – User Change Password
A – New username
B – Change username button
114
A – User new password

B – Change password button
A – User email address

115
B – Forgot password button
A – User report incident

B – Report incident button
116
A – Admin username and password

B – Admin login button
A – Admin dashboard
A – Residents profile button

B – Add new residents button
C – View residents profile
D – Edit residents profile
117
A – Add new resident button

118
A – BWH username and password

B – BHW login button
A – BHW dashboard
A – Residents Profile bottun

B – Add new resident button
C – View resident profile
119
D – Edit resident profile
A – LGU username and password

B – Login button
120
A – LGU dashboard
A – Apply button
B – Read button
A – Job and services button

B – Job and services button
C – View job details
121
D – Edit job details
A – Details for job offer

B – Job link
C – Add job button
122
APPENDIX G
(Source Code)
index.php <title>Home |
EBIPMS</title>

<!DOCTYPE html>
<link rel="stylesheet"
<html lang="en"> href="https://use.fontawesome.com/r
eleases/v6.4.0/css/all.css" />
<head> 
<meta charset="UTF-8" /> <link rel="stylesheet"

href="css/mdb.min.css" />
<meta name="viewport"
content="width=device-width, initial- 
scale=1, shrink-to-fit=no" /> <link rel="stylesheet"
<meta http-equiv="x-ua- href="css/style.css" />
compatible" content="ie=edge" /> 
<link rel="icon" <script
href="kanlurangbukal.png" src='https://cdn.jsdelivr.net/npm/full
type="image/x-icon" />
123
calendar@6.1.8/index.global.min.js
'></script>
.carousel-item:nth-child(1)
<script {
src='https://cdn.jsdelivr.net/npm/@ful
lcalendar/core@6.1.8/index.global.mi background-image:
n.js'></script> url("https://live.staticflickr.com/2235/2
046800661_c0c9a9608a_b.jpg");
<script
src='https://cdn.jsdelivr.net/npm/@ful background-repeat: no-
lcalendar/daygrid@6.1.8/index.global repeat;
.min.js'></script> background-size: cover;
<script background-position:
src='https://cdn.jsdelivr.net/npm/@ful center center;
lcalendar/interaction@6.1.8/
index.global.min.js'></script> }
<script
src='https://cdn.jsdelivr.net/npm/@ful .carousel-item:nth-child(2)
lcalendar/list@6.1.8/index.global.min {
.js'></script>
background-image:
<script url("https://upload.wikimedia.org/wiki
src='https://cdn.jsdelivr.net/npm/@ful pedia/commons/b/bc/Kanlurang_Buk
lcalendar/timegrid@6.1.8/index.glob al%2C_Liliw%2C_Laguna.jpg");
al.min.js'></script>
background-repeat: no-
</head> repeat;
background-size: cover;
<body> background-position:
 center center;
<header> }
<style>
/* Carousel styling */ /* Height for devices larger
than 576px */
#introCarousel,
@media (min-width:
.carousel-inner, 992px) {
.carousel-item, #introCarousel {
.carousel-item.active { margin-top: -58.59px;
height: 100vh; }
} }
124
controls="navbarExample01" aria-
expanded="false" aria-label="Toggle
.text-justify { navigation">
text-align: justify; <i class="fas fa-
} bars"></i>
</button>
.navbar .nav-link { <div class="collapse

navbar-collapse"
color: #fff !important; id="navbarExample01">
} <ul class="navbar-nav
ms-auto mb-2 mb-lg-0">
.dropdown-menu { <li class="nav-item

active">
display: ;
<a class="nav-link
} font-weight-bold"
href="index">Home</a>
</style>
</li>
<li class="nav-item

active">
<nav class="navbar
<a class="nav-link
navbar-expand-lg navbar-dark sticky
font-weight-bold"
bg-dark" style="z-index: 2000">
href="#announce">Announcement</
<div class="container- a>
fluid">
</li>

<li class="nav-item
<a class="navbar-brand active">
nav-link" href="index.php">
<a class="nav-link
<img font-weight-bold"
src="kanlurangbukal.png" width="30" href="jobs.php">Jobs</a>
/>
</li>
<b>E-BIPMS</b>
<li class="nav-item
</a> active">
<button class="navbar- <a class="nav-link
toggler" type="button" data-mdb- font-weight-bold"
toggle="collapse" data-mdb- href="officials.php">Officials</a>
target="#navbarExample01"
</li>
aria-
<li class="nav-item
125
active"> </nav>
<a class="nav-link 
font-weight-bold"
href="contact">Contact</a>
</li> 
<li class="nav-item <div id="introCarousel"

dropdown"> class="carousel slide carousel-fade
shadow-2-strong" data-mdb-
<a class="nav-link ride="carousel">
dropdown-toggle" href="#"
id="navbarDropdown" role="button" 
data-mdb-toggle="dropdown" <ol class="carousel-
aria- indicators">
expanded="false"> <li data-mdb-
Login target="#introCarousel" data-mdb-
slide-to="0" class="active"></li>
</a>
<li data-mdb-
<ul class="dropdown- target="#introCarousel" data-mdb-
menu" aria- slide-to="1"></li>
labelledby="navbarDropdown">
</ol>
<li><a
class="dropdown-item" 
href="adminlogin"><i class="fa fa- <div class="carousel-
user"></i> Login as Admin</a></li> inner">
<li><a 
class="dropdown-item"
href="lgulogin"><i class="fa fa- <div class="carousel-
user"></i> Login as LGU</a></li> item active">
<li><a <div class="mask"

class="dropdown-item" style="background-color: rgba(0, 0,
href="bhwlogin"><i class="fa fa- 0, 0.6)">
user"></i> Login as BHW</a></li> <div class="d-flex
</ul> justify-content-center align-items-
center h-100">
</li>
<div class="text-
</ul> white text-center">
</div> <h1 class="mb-2
</div> display-1">E-BIPMS KANLURANG
BUKAL</h1>
126
<h5 class="mb-4"> <a class="btn btn-

outline-light btn-lg m-2" href="#"
Electronic role="button">About</a>
Barangay Integrated Profiling and
Monitoring </div>
System </div>
</h5> </div>
<a class="btn btn- </div>
outline-light btn-lg m-2"
href="userlogin.php">Login</a> </div>
<a class="btn btn- 

outline-light btn-lg m-2"
href="userregister.php">Register</a
> 
</div> <a class="carousel-

control-prev" href="#introCarousel"
</div> role="button" data-mdb-slide="prev">
</div> <span class="carousel-
</div> control-prev-icon" aria-
hidden="true"></span>
<span class="sr-
 only">Previous</span>
<div class="carousel- </a>
item">
<a class="carousel-
<div class="mask" control-next" href="#introCarousel"
role="button" data-mdb-slide="next">
style="background:
linear-gradient(45deg, rgba(29, 236, <span class="carousel-
197, 0.7),rgba(91, 14, 214, 0.7) control-next-icon" aria-
100%);"> hidden="true"></span>
<div class="d-flex <span class="sr-
justify-content-center align-items- only">Next</span>
center h-100">
</a>
<div class="text-
white text-center"> </div>
<h1>GET TO 

KNOW MORE ABOUT OUR </header>
BARANGAY</h2>
<main class="mt-5">
<div class="container">
127

<section class="text- <div class="col-lg-4 col-
center mb-5"> md-6 mb-4">
<div class="row justify- <div class="card">
content-center">
<div class="bg-image
<div class="col-lg-4 col- hover-overlay ripple pt-5 pb-2" data-
md-6 mb-4"> mdb-ripple-color="light">
<div class="card"> <i class="fa-sharp
fa-regular fa-eye fa-5x" style="color:
<div class="bg-image #e4a11b;"></i>
hover-overlay ripple pt-5 pb-2" data-
mdb-ripple-color="light"> <div class="mask"
style="background-color: rgba(251,
<i class="fa-sharp 251, 251, 0.15);"></div>
fa-solid fa-rocket fa-5x" style="color:
#e4a11b;"></i> </div>
<div class="mask" <div class="card-
style="background-color: rgba(251, body">
251, 251, 0.15);"></div>
<h3 class="card-
</div> title">VISION</h3>
<div class="card- <p class="card-
body"> text">
<h3 class="card- "EBIPMS
title">MISSION</h3> envisions a digitally connected Brgy.
Kanlurang Bukal, fostering
<p class="card- transparency, citizen
text">
well-being, and
"Empower Brgy. sustainable development through
Kanlurang Bukal with EBIPMS: advanced profiling and monitoring
Seamless integration, efficient systems."
profiling, real-time
</p>
monitoring,
fostering community engagement, </div>
and ensuring data security for
sustainable development." </div>
</p> </div>
</div> <div class="col-lg-4 col-

md-6 mb-4">
</div>
<div class="card">
</div>
<div class="bg-image
128
hover-overlay ripple pt-5 pb-2" data- content-center mb-4">

mdb-ripple-color="light">
<?php
<i class="fa-sharp
fa-regular fa-gem fa-5x" style="color: include 'conn.php';
#e4a11b;"></i> $query = "SELECT *
<div class="mask" FROM jobs WHERE isFeatured = 1";
style="background-color: rgba(251, $query_run =
251, 251, 0.15);"></div> mysqli_query($conn, $query);
</div> if
<div class="card- (mysqli_num_rows($query_run) > 0)
body"> {
<h3 class="card- while ($items =

title">GOALS</h3> mysqli_fetch_array($query_run)) {
<p class="card- echo '<div class="col-

text"> lg-4 col-md-6 mb-4">'; // Responsive
grid column
"Achieve seamless
integration, enhance governance, echo '<a href="#"
promote community engagement, style="text-decoration: none; color:
ensure data security, inherit;">'; // Start of <a> tag
and propel echo '<div

sustainable development for Brgy. class="card text-dark">';
Kanlurang Bukal." echo '<div class="bg-
</p> image hover-overlay ripple" data-
mdb-ripple-color="light">';
</div>
echo '<img
</div> src="https://mdbootstrap.com/img/ne
w/standard/nature/184.jpg"
</div> class="img-fluid" />';
</div> echo '<div
</section> class="mask" style="background-
color: rgba(251, 251, 251,
<hr class="my-5" /> 0.15);"></div>';
<h1 class="mb-5 text- echo '</div>';
warning text-center"
id="announce"><strong>BARANGA echo '<div
Y UPDATES</strong></h1> class="card-body">';
<section class="text- echo '<h4

center"> class="card-title mb-4" style="text-
transform: uppercase;">' .
<div class="row justify- $items['jobtitle'] . '</h4>';
129
echo '<a href="#!" <iframe

class="btn btn-warning">Read
More</a>'; src="https://www.googl
e.com/maps/embed?pb=!1m18!
echo '</div>'; 1m12!1m3!1d13078.742123652546!
2d121.42939898272549!
echo '</div>'; 3d14.12363560630453!2m3!1f0!2f0!
echo '</a>'; // End of 3f0!3m2!1i1024!2i768!4f13.1!3m3!
<a> tag 1m2!
1s0x33bd50a9a2e7edb9%3A0x320f
echo '</div>'; 60fa0f0f6293!2sKanlurang%20Bukal
} %2C%20Liliw%2C%20Laguna!5e1!
3m2!1sen!2sph!4v1687621070135!
} 5m2!1sen!2sph"
?> width="600"
height="450" style="border:0;"
</div>
allowfullscreen="" loading="lazy"
<a href="#!" class="btn
referrerpolicy="no-
btn-warning">See More
referrer-when-downgrade"></iframe>
Updates</a>
</div>
</section>
</section>
<hr class="my-5" />
</div>
<h1 class="mb-5 text-
warning text-center" </main>
id="announce"><strong>BARANGA
Y 
ANNOUNCEMENTS</strong></h1>
<div class="mb-5" 
id='calendar'></div>
<footer class="text-center
<hr class="my-5" /> text-lg-start bg-dark text-light pt-1">
<section class="mb-5"> 
<h1 class="mb-5 text- <section class="">
center text-warning"><strong>MAP
OF KANLURANG <div class="container text-
BUKAL</strong></h1> center text-md-start mt-5">

<div class="row d-flex <div class="row mt-3">

justify-content-center">
130
 <p>

<div class="col-md-3 <a href="#announce"
col-lg-4 col-xl-3 mx-auto mb-4"> class="text-reset">Announcement</a
>

</p>
<h4 class="text-
uppercase fw-bold mb-4"> <p>
E-BIPMS <a href="jobs.php"
KANLURANG BUKAL class="text-reset">Jobs</a>
</h4> </p>
<p class="text-justify"> <p>
A system that aims to <a
provide a convenient way for the href="officials.php" class="text-
barangay officials to monitor the reset">Officials</a>
residents of the
</p>
barangay and to
provide a convenient way for the <p>
residents to request barangay <a href="contact"
services. class="text-reset">Contact</a>
</p> </p>
</div> </div>
 
 

<div class="col-md-3 <div class="col-md-4
col-lg-2 col-xl-2 mx-auto mb-4"> col-lg-3 col-xl-3 mx-auto mb-md-0
 mb-4">
<h6 class="text- 

uppercase fw-bold mb-4"> <h6 class="text-
Useful links uppercase fw-bold mb-
4">Contact</h6>
</h6>
<p class="text-
<p> break"><i class="fas fa-home me-
3"></i> Brgy. Kanlurang
<a href="index" Bukal<br>Liliw, Laguna</p>
class="text-reset">Home</a>
<p class="text-break">
</p>
131
<i class="fas fa- include 'conn.php';

envelope me-3"></i>
$query = "SELECT
ebipmskanlurangbuk eventName as title,
al@gmail.com CONCAT(eventDateStart, ' ',
eventTimeStart) as start,
</p> CONCAT(eventDateEnd, ' ',
<p><i class="fas fa- eventTimeEnd) as end, eventColor
phone me-3"></i> + 01 234 567 as color FROM events";
88</p> $query_run =
</div> mysqli_query($conn, $query);
 $events = array();
</div> while ($row =

mysqli_fetch_assoc($query_run)) {

$events[] = $row;
</div>
}
</section>
?>

<script>
document.addEventListene
 r('DOMContentLoaded', function () {
<div class="text-center p-4" var calendarEl =
style="background-color: rgba(0, 0, document.getElementById('calendar'
0, 0.05);"> );
© 2023 Copyright var calendar = new
</div> FullCalendar.Calendar(calendarEl, {
 initialView:

'dayGridMonth',
</footer>
events: <?php echo
 json_encode($events); ?>,
 selectable: true,
<script type="text/javascript" editable: false,
src="js/mdb.min.js"></script>
nowIndicator: true,

buttonText: {
<script type="text/javascript"
src="js/script.js"></script> today: 'Today',
<?php month: 'Month',

week: 'Week',
132
day: 'Day', </script>

list: 'List', <script type="text/javascript"
src="https://cdnjs.cloudflare.com/aja
prev: 'Prev', x/libs/mdb-ui-kit/3.6.0/mdb.min.js"></
next: 'Next' script>
}, <script>
headerToolbar: { document.addEventListene
r('DOMContentLoaded', function () {
start: 'dayGridMonth', //
will normally be on the left. if RTL, var dropdownElementList
will be on the right =
[].slice.call(document.querySelectorA
center: 'title', ll('.dropdown-toggle'))
end: 'today prev,next' // var dropdownList =
will normally be on the right. if RTL, dropdownElementList.map(function
will be on the left (dropdownToggleEl) {
}, return new
}); mdb.Dropdown(dropdownToggleEl)
calendar.setOption('height })
', 600); })
calendar.setOption('aspec </script>
tRatio', 1.8);
</body>
calendar.render();
});
</html>
userlogin.php $_SESSION['user_type'] == 'user') {

header("Location:
userhome.php");
<?php
exit();
session_start();
} else {
include_once 'conn.php';
if
if (isset($_SESSION['id']) && (isset($_POST['username']) &&
isset($_SESSION['user']) && isset($_POST['password'])) {
isset($_SESSION['user_type']) &&
133
function validate($data) $_SESSION['user'] =

$row['username'];
{
$_SESSION['name'] =
$data = trim($data); $row['firstname'];
$data = $_SESSION['user_type']
stripcslashes($data); = 'user';
$data = $_SESSION["login_time
htmlspecialchars($data); _stamp"] = time();
return $data; header("Location:userho
} me.php");
$username = exit();
validate($_POST['username']); }
$password = } else {
validate($_POST['password']);
$_SESSION['loginstatus']
$password = = "The Username/Password you
md5($password); entered is incorrect. Please try
$sql = "SELECT * FROM again.";
users WHERE }
username='$username' AND
password ='$password'"; }
$result = $conn- }
>query($sql);
?>
if ($result->num_rows > 0) {
<!DOCTYPE html>
// output data of each row
<html lang="en">
$row = $result-
>fetch_assoc();
if ($row['status'] == 0) { <head>
$_SESSION['loginstatus'] <meta charset="UTF-8" />

= "Your account is not yet approved <meta name="viewport"
by the admin. Please wait for the content="width=device-width, initial-
admin to approve your account."; scale=1, shrink-to-fit=no" />
} else { <meta http-equiv="x-ua-
$_SESSION['id'] = compatible" content="ie=edge" />
$row['id']; <title>User Login</title>
$_SESSION['uid'] =
$row['userID'];
134
<link rel="icon" margin-bottom: 10px;

href="kanlurangbukal.png"
type="image/x-icon"> }


<link rel="stylesheet" .form-control
href="https://use.fontawesome.com/r input[type="password"] {
eleases/v5.11.2/css/all.css" /> margin-bottom: 10px;
 }
href="https://fonts.googleapis.com/cs
s2? .checkbox {
family=Roboto:wght@300;400;500;7 width: 17px;
00&display=swap" />
height: 17px;
href="https://cdn.jsdelivr.net/npm/bo margin-left: -20px;
otstrap-icons@1.7.2/font/bootstrap-
}
icons.css">

.checkbox:checked {
href="css/mdb.min.css" /> accent-color: orange;
 !important;
<link rel="stylesheet" }
href="css/style.css" />
</head>
.checkbox-label {
font-size: 17px;
<body>
}

</style>
<header>
<style>

.navbar .nav-link {
<nav class="navbar
color: #fff !important; navbar-expand-lg navbar-dark bg-
dark" style="z-index: 2000">
}
<div class="container-
fluid">
.form-control

input[type="text"] {
135
<a href="index.php" <li class="nav-item

class="navbar-brand nav-link"> active">
<img <a class="nav-link
src="kanlurangbukal.png" width="30" font-weight-bold"
/> href="jobs.php">Jobs</a>
<b>E-BIPMS</b> </li>
</a> <li class="nav-item
active">
<button class="navbar-
toggler" type="button" data-mdb- <a class="nav-link
toggle="collapse" data-mdb- font-weight-bold"
target="#navbarExample01" href="officials.php">Officials</a>
aria- </li>
controls="navbarExample01" aria-
expanded="false" aria-label="Toggle <li class="nav-item
navigation"> active">
<i class="fas fa- <a class="nav-link

bars"></i> font-weight-bold"
href="contact">Contact</a>
</button>
</li>
<div class="collapse
navbar-collapse" <li class="nav-item
id="navbarExample01"> dropdown">
<ul class="navbar-nav <a class="nav-link

ms-auto mb-2 mb-lg-0"> dropdown-toggle" href="#"
id="navbarDropdown" role="button"
<li class="nav-item data-mdb-toggle="dropdown"
active">
aria-
<a class="nav-link expanded="false">
font-weight-bold"
href="index">Home</a> Login
</li> </a>
<li class="nav-item <ul class="dropdown-

active"> menu" aria-
labelledby="navbarDropdown">
<a class="nav-link
font-weight-bold" <li><a
href="index#announce">Announcem class="dropdown-item"
ent</a> href="adminlogin"><i class="fa fa-
user"></i> Login as Admin</a></li>
</li>
<li><a
136
href="lgulogin"><i class="fa fa- height="24"></i>

user"></i> Login as LGU</a></li>
<?=
<li><a $_SESSION['loginstatus']; ?>
href="bhwlogin"><i class="fa fa- </div>
user"></i> Login as BHW</a></li> <?php
</ul> unset($_SESSION['lo
</li> ginstatus']);
</ul> }
</div> ?>
</div> <?php
</nav> if
(isset($_SESSION['registerverified']))
 {
<div class="container"> ?>
<div class="row justify- <div class="alert
content-center"> alert-success text-center"
role="alert">
<div class="col-xl-5 col-
md-7 mt-5 mb-5"> <i class="bi bi-
check-circle-fill" width="24"
<form class="forms height="24"></i>
needs-validation bg-white rounded
shadow-5-strong p-4 mt-2 text- <?=
center" $_SESSION['registerverified']; ?>
action="userlogin.php" </div>
method="POST" novalidate="">
<?php
<h3 class="mb-3 fw-
normal display-5">LOGIN</h3> unset($_SESSION['r
egisterverified']);
<?php
}
if
(isset($_SESSION['loginstatus'])) { ?>
?> <?php
<div class="alert if
alert-danger text-center" (isset($_SESSION['forgotstatussucc
role="alert"> ess'])) {
<i class="bi bi- ?>

exclamation-triangle-fill" width="24" <div class="alert
137
alert-success text-center"
role="alert">
 class="invalid-feedback">
<div class="row g-1 Password is

mb-2"> required!
<div class="col-12 </div>

mb-2"> </div>
<div class="form- </div>
outline">
</div>
<input type="text"
class="form-control form-control-lg"
name="username" id="username"
required /> 
<label
class="form-label" <div class="row mb-
for="username">Username</label> 3">
<div <div class="col d-flex

class="invalid-feedback"> justify-content-center">
Username is 

required! <div class="col d-
</div> flex justify-content-start">
</div> <div class="form-

check d-flex align-items-center">
</div>
<input
138
class="checkbox" type="checkbox" </header>

onclick="myFunction()" />

<label
class="checkbox-label" style="font- <footer class="text-center
size: 10pt; margin-left:5px;"> text-lg-start bg-dark text-light pt-1">
Show Password
</label> 
</div> <section class="">
</div> <div class="container text-

center text-md-start mt-5">
</div>

<div class="row mt-3">
<div class="col">


<div class="col-md-3
<a class="text- col-lg-4 col-xl-3 mx-auto mb-4">
warning float-end" style="font-size:
10pt" href="forgotpassword">Forgot 
password?</a> <h4 class="text-
</div> uppercase fw-bold mb-4">
</div> E-BIPMS
KANLURANG BUKAL

</h4>
<button type="submit"
class="btn btn-warning btn- <p class="text-justify">
block">LOG IN</button> A system that aims to
<div class="col mt-3"> provide a convenient way for the
barangay officials to monitor the
Not yet registered? residents of the
<a class="text-warning"
href="userregister"><b>Register</b> barangay and to
</a> provide a convenient way for the
residents to request barangay
</div> services.
</div> </p>
</form> </div>
</div> 
</div>
</div> 
139
<div class="col-md-3 <div class="col-md-4

col-lg-2 col-xl-2 mx-auto mb-4"> col-lg-3 col-xl-3 mx-auto mb-md-0
mb-4">


<h6 class="text-
uppercase fw-bold mb-4"> <h6 class="text-
uppercase fw-bold mb-
Useful links 4">Contact</h6>
</h6> <p class="text-
<p> break"><i class="fas fa-home me-
3"></i> Brgy. Kanlurang
<a href="index" Bukal<br>Liliw, Laguna</p>
class="text-reset">Home</a>
<p class="text-break">
</p>
<i class="fas fa-
<p> envelope me-3"></i>
<a href="#announce" ebipmskanlurangbuk
class="text-reset">Announcement</a al@gmail.com
>
</p>
</p>
<p><i class="fas fa-
<p> phone me-3"></i> + 01 234 567
<a href="jobs.php" 88</p>
class="text-reset">Jobs</a> </div>
</p> 
<p> </div>
<a 
href="officials.php" class="text-
reset">Officials</a> </div>
</p> </section>
<p> 
<a href="contact"
class="text-reset">Contact</a> 
</p> <div class="text-center p-4"
</div> style="background-color: rgba(0, 0,
0, 0.05);">
© 2023 Copyright
</div>
140
 const forms =

document.querySelectorAll('.needs-
</footer> validation')
 Array.from(forms).forEach
 (form => {
<script type="text/javascript" form.addEventListener('s

src="js/mdb.min.js"></script> ubmit', event => {
<script> if (!form.checkValidity())
{
function myFunction() {
event.preventDefault()
var x =
document.getElementById("passwor event.stopPropagation
d"); ()
if (x.type === "password") }

{
x.type = "text"; form.classList.add('was-
} else { validated')
x.type = "password"; }, false)
} })
} })()
</script> </script>
<script> </body>
(() => {
'use strict' </html>
Github Link:
https://github.com/kndrxxe/EBIPMS
141
142
APPENDIX H
(Curriculum Vitae)
143
144
145
146

Manuscript Brosas Capili Macaraig Orna-Chapter1-5-1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Manuscript Brosas Capili Macaraig Orna-Chapter1-5-1

Uploaded by

Copyright:

Available Formats

Republic of the Philippines

Laguna State Polytechnic University

COLLEGE OF COMPUTER STUDIES

E-BIPMS ELECTRONIC BARANGAY INTEGRATED PROFILING AND

This thesis entitled “Electronic Barangay Integrated Profiling and

WINCHELL CEAZAR DESAMERO

Approved and accepted by the committee on Oral Examination with a

JOANNA E. DE TORRES JOHN RYAN UAL

RONNEL A. DELA CRUZ REYMAR V. MANALOTO

MARCO JR. N. DEL ROSARIO

Accepted in partial fulfilment of the requirements for the degree of

RONNEL A. DELA CRUZ

RONNEL A. DELA CRUZ

carry out this project study.

Friends and Classmates

helping and enabling them to carry out the study.

We would like to take this opportunity to express our profound gratitude

exemplary guidance, monitoring, support, knowledge that we need to enhance

this project study.

To our ever-supportive parents for their guidance and wide

understanding and to our Classmates and Friends for their constant

To Barangay Chairperson Mr. Henry O. Duller, Barangay Secretary

Honeylette J. Villanueva, and Barangay Residents for their cordial support,

valuable information and guidance, which helped us in completing this task

To Mr. Sherwin D. Quizon the dean of Pamantasan ng Lungsod ng San

Ladanga a Full Stock Developer, Mr. Jamry P. Santos a Solutions Engineer,

assistance and commendable suggestions.

This Capstone Project entitled, “Electronic Barangay Integrated

Profiling and Monitoring System (E-BIPMS) for Barangay Kanlurang Bukal” is

developed to have a manageable system to help the barangay constituents. This

documents. The Development of Electronic Barangay Integrated Profiling and

NON-IT respondents who are said to be resident of BARANGAY KANLURANG

BUKAL LILIW, LAGUNA. The researchers also used International Organization

aspects; Functionality Suitability, Performance Efficiency, Compatibility, Usability,

Reliability, Security, Maintainability, Portability. Five (5) IT Experts evaluated

CHAPTER II - REVIEW OF RELATED LITERATURE AND STUDIES

Related Literature………………………………………………………………. …….

Related Studies........................................................................................... …….

CHAPTER III - METHODOLOGY

Appendix A - Gantt Chart 80

Figure No. Title Page No.

1 Map of Brgy. Kanlurang Bukal 11

23 User Forgot Password Page 59

Table No. Title Page No.

THE PROJECT AND ITS BACKGROUND

According to Pancoast (2022), everyone is familiar with how a conventional

give a better service to the community.

Transitioning manual processes in barangay operations to digital processes

with services without unnecessary delays or complications, thereby enhancing overall

convenience and satisfaction.

Implementing digital profiling management in a Barangay brings numerous

advantages. It improves efficiency by streamlining and automating the profiling process,

collaboration, facilitating real-time updates and coordination. Moreover, it promotes

environmental sustainability by reducing paper usage and waste.

Figure 1. Map of Brgy. Kanlurang Bukal

Barangay Kanlurang Bukal is one of the largest barangays in the Municipality of

(2020) over 4,423 is the population in Barangay Kanlurang Bukal, it is considered to be

one of the most densely populated barangays in Liliw, Laguna.

Based on the survey conducted with 10 respondents in Brgy. Kanlurang Bukal,

inaccuracies and inconsistencies in records and reports, compromising the overall

integrity of the Barangay's operations. Additionally, manual systems often make it

difficult to retrieve specific information or documents. Data security is another concern

natural disasters, accidents, or mishandling.