2022 1st International Conference on Smart Technology, Applied Informatics, and Engineering (APICS)

Development of a Web-Based Clean and Healthy

Life Behavior Monitoring System
Berliana Kusuma Riasti Fiddin Yusfida A’la Ropitasari
Department of Informatics Engineering Department of Informatics Engineering Department of Midwifery
Vocational School Vocational School Vocational School
Universitas Sebelas Maret Universitas Sebelas Maret Universitas Sebelas Maret
Surakarta, Indonesia Surakarta, Indonesia Surakarta, Indonesia
berliana@staff.uns.ac.id fiddin@staff.uns.ac.id ropita.3179@staff.uns.ac.id

Muhammad Asri Safi'ie Jesyca Natalia

Department of Informatics Engineering Department of Informatics Engineering
Vocational School Universitas Sebelas Maret
Universitas Sebelas Maret Surakarta, Indonesia
Surakarta, Indonesia jesycasibarani23@student.uns.ac.id
safiie99@staff.uns.ac.id

Abstract— Clean and Healthy Life Behavior or “Perilaku surrounding conditions so that people can be more responsive
Hidup Bersih dan Sehat” (PHBS) is a health behavior carried and care about their surroundings' cleanliness and health
out on awareness. Family members can take care of themselves conditions.
and actively participate in public health. However, the
neighborhood residents have not been able to know the healthy Based on the background described, a problem
live status of their environment because there is no information formulation can be drawn on how to design and create a
about PHBS status around them. This study develops a clean system to monitor a family's Clean and Healthy Health
and healthy life behavior monitoring system. The software Behavior and the community environment. This research aims
development that we used is based on the AGILE schema. This to design and build a clean-living monitoring information
software has two roles, namely admin and users. The software system application that can be used as a reference for the
has been evaluated using the black box method, and the results percentage of health in a family and the environment.
show that the application's functionality has been successfully
tested. The application can be beneficial for unifying the state of II. RELATED WORKS
health of an environment. People in an area can know the There are some previous works about clean and healthy
conditions and monitor their health environment.
life behavior. The research entitled Development of an
Keywords— clean and healthy life behavior, phbs, information Environmental Health Information System with the Support
system, monitoring application of a Geographic Information System at the Ngadirojo Health
Center Wonogiri was developed. The main feature of this
I. INTRODUCTION paper is that data and information on environmental health
conditions are provided in environmental maps [5]. This
Clean and healthy living behavior in the household is an
visualization helps people to understand the data. Graphs
essential understanding so people can apply clean and healthy
inside data visualization are a popular tool for visually
behavior patterns in everyday life. Most Indonesian people
illuminating data relationships [6]. As a result of this paper,
still think that clean living is a personal matter that is not too
users know the data relationship visually—Geographic
important [1]. There are still people who do not have latrines
Information System Mapping Environmental Quality in West
at home and also open defecation. The Ministry of Health
Bandung Regency [7]. The results show that GIS helps people
(KEMENKES REPUBLIK INDONESIA) reports that most
to know the environmental quality map around West Bandung
people already have healthy latrines. However, there are still
Regency. Islamic Boarding School Health Survey Information
around 9.2% of families in Indonesia who do not fall into the
System. The main feature of this research is the environmental
category of healthy latrines [1].
monitoring form and health monitoring of Islamic boarding
Clean and Healthy Life Behavior is a health behavior school members [8]. Designing a Resident Data Management
based on awareness, which can be seen from knowledge [2]. Information System for Community Health Monitoring at the
In general, it is about how a person behaves in a clean and RW Level Using the SCRUM Method (Case Study:
healthy life in society [3]. Using family latrines to dispose of Wonokambang Hamlet) [9].
human feces is one of the healthy behaviors in “Perilaku
The authors of previous works found similarities regarding
Hidup Bersih dan Sehat” (PHBS). Using family latrines to
the Information System for Monitoring Clean and Healthy
dispose of human feces can protect families and communities
Life Behavior in the Household. That is, every community can
from the threat of infectious diseases in an environment [4].
know the health condition of their environment. The author's
In an environment, regularly monitoring the community system has a monitoring feature based on 10 PHBS indicators
for Clean and Healthy Behavior is necessary. This activity is [10]. Residents can conduct monthly questionnaires to
to ensure the PHBS of the community in the environment and determine whether the family has fulfilled the PHBS
ensure that the environment placed is healthy and suitable for requirements. In the author's system, there are suggestions and
habitation [2]. Monitoring Clean and Healthy Life Behavior input from the lowest average monthly monitoring so that
can also make it easier for the community to know the residents can better maintain their healthy lifestyles. This

978-1-6654-8985-0/22/$31.00 ©2022 IEEE

117
 2022 1st International Conference on Smart Technology, Applied Informatics, and Engineering (APICS)

system also has a monthly resident data recap to determine the Residents can fill in the questionnaire inside the system in this
level of healthy and unhealthy criteria for residents based on menu, such as the feature mentioned in Table I for the
existing monitoring. Residents' tab. The business process for residents is shown in
Fig. 2.
III. ACTORS AND BUSINESS PROCESS
Head of the neighborhood logs in to the system using their
A. Actors email address or username and password. After entering the
Table I presents system actors and their roles. Admin at login page, residents directly displayed monthly data. The
least has ten features, such as login into the admin account, head of the neighborhood is shown in Fig. 3.
entering the admin dashboard, do Create, Read, Update, and
Delete (CRUD) for a period, monitoring, questionnaire, IV. METHODOLOGY
suggestion, reading some aggregate data (monthly data, each A. Software Development Life Cycle
answer, all response), and read data visualization. In addition,
the resident's account has at least seven features. Those The software development schema that we used is based
features include login into the resident's account, entering the on the agile method [11]. This software development method
user dashboard, filling in the questionnaire, reading some data is a lightweight approach [12], enhances the product's quality,
(aggregate answer, type of monitoring, scoring data), and and speeds up development [13]. The illustration is shown in
reading data visualization related to their account. All roles Fig. 4.
have to login into the system using their username and
password. If an unauthorized account tries to enter the system,
the system will display an incorrect login notification.
B. Business Process
This section demonstrates about the business process of
this system. As we mentioned in previous section, the users of
this monitoring application are divided into three roles, such
as the admin, the head of neighborhood, and the residents. The
detail of every business process will be elaborated below.
Admin must correctly enter their email address or
username and password to log in. After entering the login
page, the administrator directly displayed the admin
dashboard. In this menu, the admin can manage master data
inside the system, such as the feature mentioned in Table I
(manage questionnaire questions, suggestions, and aggregate
data). These businesses' process is the fundamental aspect in Fig. 1. Admin's business process
order to develop the monitoring application.
After developing the monitoring application, the users can
be able to find out the behavior of their environmental health.
In addition, have an awareness of maintaining household
hygiene, and can be able to monitor the progress of their
hygiene based on ten indicators of PHBS. The illustration of
this business process is shown in Fig. 1.
Residents log in to the system using their email address,
username, and password. After entering the login page,
residents are directly displayed user dashboard.

TABLE I. ACTORS AND THEIR FEATURES

Admin Head of Residents
neighborhood
Login Login Login
Admin dashboard Dashboard User dashboard
CRUD period Read type of Fill in questionnaire
monitoring Fig. 2. Resident's business process
CRUD monitoring Read data Read the aggregate
visualization answered question
CRUD questionnaire Read type of
monitoring
CRUD suggestion Read scoring data
Read aggregate Read data visualization
monthly data.
Read aggregate data
based on each answer.
Read aggregate data
based on all responses. Fig. 3. Head of neighborhood business process
Read data visualization

118
 2022 1st International Conference on Smart Technology, Applied Informatics, and Engineering (APICS)

D. UI/UX Design
Before developing the application, two crucial aspects are
user experience and user interface [17]. The user interface also
increases engagement, which impacts the trust and buying
interest of a consumer [18]. In this case, the user interface can
increase the awareness of filling in the data regularly.
The user interface design of this application is shown in
this section. The landing page design contains information
about the PHBS and some sub-menus, such as the home and
sign-in menu. This page is shown in Fig 5.

TABLE II. ENTITY AND ITS ATTRIBUTES

Entity Attribute
Id
Bulans Bulan
Tahun
Id
Ppematanuan_id
User_id
Respon_users
Bulan_id
Total_skor
Skor_nol
Fig. 4. Software development methodology
skor
Sarans Kuisoner_id
At this stage, the developer and client plan about the needs Id
of the software to be made. After that, the team designed the skor
software based on the planning section. They are developing Jawaban
Isi_kuisoners
the software, the process where the programmer does the Kuisoner_id
coding of the software. After developing the software, a test is Id
carried out by the quality control department so that the bugs Id
Ppemantauan_id
found can be fixed immediately and the quality of the software Kuisoners
Pertanyaan
is maintained. Software testing is essential to creating and penjelasan
using software [14]. Besides, it gives measures for finding the namapemantauan
efficiency and accuracy of the software [15]. After the test, the Ppemantauans Id
system is feasible and meets the requirements. Then the Id
software is ready for deployment. The last step is User_id
maintenance. There is no software with 100% free of bugs. Jawaban_users Kuisoner_id
Therefore the software must be regularly maintained. Bulan_id
Isi_kuisoner_id
B. System Requirements Role
Jenis_kelamin
The hardware requirements used for making the Id
Information System for Monitoring Clean and Healthy Life No_kk
Behavior in the Household are (1) laptop with Processor Core Users
Nik
i7-7500U, (2) hard disk with at least 1GB of storage space, password
and (3) minimum of 4GB of RAM. In addition, the software Nama
used to create an Information System for Monitoring Clean username
and Healthy Life Behavior in the Household are (1) PHP as a
scripting language, (2) Laravel as a PHP framework, (3)
Apache as a web server, (4) MySQL as a DBMS (Database
Management System), (5) Visual Studio Code, as a text editor,
(6) Google Chrome, Microsoft Edge, as a web server or other
web browser, (7) GitHub as a backup file. Those are the detail
of the specific requirements.
C. Database Design
The relationship between tables describes the relationship
between one table and another table. The most vital and time-
consuming database design phase is creating the domain's
conceptual information model [16]. The database contains the
required data, such as master data and transactional data. The
system uses some entities, and their attributes. The sample of
the attributes such as “identity”, “bulan”, “tahun”, “total
skor”, “role”, “jenis kelamin”, “nama pemantauan”, “nomor
kk”. The detail of entities is shown in Table II.
Fig. 5. Landing page

119
 2022 1st International Conference on Smart Technology, Applied Informatics, and Engineering (APICS)

Furthermore, on the login page, there are at least two text In admin dashboard, the system displays the count of the
fields for the user to enter the username or email, and users registered, the count of questionnaire, and display the
password correctly. This page also contains a picture related general statistic of the master data. In addition, the admin can
to PHBS and brief explanation about the clean and life print the report of their users for certain period. These reports
monitoring application system. This page contains create can be filtered by weekly, monthly, and yearly. The purpose
menu link and forgot password link menu. The create account of this report is to know the progress of the residents related
link will lead to registration page (Fig. 7). The forgot to the clean and life behavior. The wireframe is shown in Fig.
password link aims to facilitate the users who forget their 9.
login account by sending the reset password to related email.
This wireframe is shown in Fig. 6. V. RESULT AND DISCUSSION
Users can register through the registration page if they do The previously created design is then implemented. The
not have an account. On the registration page, the user must result of this implementation is a web-based application for
enter data related to their identities, such as full name, monitoring clean and healthy living behavior. The primary
password, identity number, gender, and status. The purpose of making this application is to monitor the healthy
registration menu also contains validation form, such as behavior of residents. Residents will complete a questionnaire
checking the Indonesian identity number which has 16 digits based on ten indicators of clean and healthy living behavior.
of number and other field that required to be filled in. The The value of each question in the questionnaire will then be
design of the registration page is shown in Fig. 7. calculated. The result of the calculation is a health index.

The design of the admin dashboard is shown in Fig. 8. This The monitoring carried out by the product is based on 10
page contains some master menus, such as data visualization, PHBS indicators. Then, the data from the stored residents'
dashboard, monthly data, monitoring type, and summary of answers can be managed again and used as an average recap
the data. In this menu, an admin can manage everything about in the monitoring section to determine the level of PHBS in an
the management menu, such as creating new user, editing the environment every month. Residents will be notified of the
user, deleting the user, and viewing the detail of the user. An lowest monitoring average each month and will be given
admin can also create the questionnaires, edit the questions, advice and input to improve healthy lifestyles in the future.
add suggestion related to the question, and delete the question. Implementation of the admin dashboard is shown in Fig. 10.

Fig. 6. Login page Fig. 8. Dashboard admin

Fig. 7. Registration page

Fig. 9. Admin data visualization menu

120
 2022 1st International Conference on Smart Technology, Applied Informatics, and Engineering (APICS)

An admin can filter the residents’ data by using this

system. The user interface of the monthly report is shown in
Fig. 11. This page shows some information related to data that
the residents have reported. The admin can create new periods
counted by month and year in this menu.
Admin also has access to visualize the data. The data
visualization, the potential ease of use, and interpretability in
real-time decision-making and communication [19]. A sample
of data visualization is shown in Fig. 12. The monthly chart is
a graph of the percentage of healthy citizens who have not
entered the health indicator. To access this page, the admin
can press the detail button in the action column in the month Fig. 13. Question list management
table.
Admin can also manage questionnaires such as creating
new questions, editing the questions, and deleting the
questions. Some types of survey questions can be read in this
article [20]. These questions type will be displayed on the
resident's dashboard. The user interface of questionnaire
management is shown in Fig. 13.
Admin can edit the question. The edit menu is shown in
Fig. 14. Admin can also add a new type of monitoring. This
menu will display a table containing what types of monitoring
exist in that environment, for example, "Pemantauan Hidup
Fig. 14. Question edit menu
Bersih dan Sehat". This menu is shown in Fig. 15.

Fig. 10. Monitoring dashboard Fig. 15. Add a new type of monitoring

The software testing sample is shown in Table III.

TABLE III. TEST SCENARIO SAMPLE

Test scenario
Field Value
Identity M113840178
Name Akila
Gender Female
Place of birth Bandung
Date of birth 17/08/65
Address Dago 1000
Fig. 11. Monitoring results classified by month Postal code 40123
Phone 2500052
Expected Result
Data recorded to the related Other fields cannot be filled if identity
table has not been filled in.

The Save button can be clicked if the

name, gender, place, date of birth,
address, and city fields are already
filled.

In a grid database, new data is placed in

the last record.
Fig. 12. Monitoring result data visualization

121
 2022 1st International Conference on Smart Technology, Applied Informatics, and Engineering (APICS)

Products that are designed and implemented into usable Interactive Mobile Technologies, vol. 14, no. 11, pp. 246–270,
information systems certainly have benefits for users, namely 2020, doi: 10.3991/ijim.v14i11.13269.
[13] R. Shankarmani, R. Pawar, S. S. Mantha, and V. Babu, “Agile
(1) users can find out the behavior of health and hygiene in the Methodology Adoption: Benefits and Constraints,” International
family and their environment, (2) Users can be more vigilant Journal of Computer Applications, vol. 58, no. 15, pp. 31–37, Nov.
in maintaining household hygiene and health, and (3) users 2012, doi: 10.5120/9361-3698.
can see the results of household recapitulation and monitoring [14] S. Tjandra and C. Pickerling, “APPLICATION OF SOFTWARE
on an existing system, and of course, this will be more TESTING METHODS IN SOFTWARE CONFIGURATION,
COMPATIBILITY AND USABILITY”.
organized. [15] M. Divyani, S. Taley, and B. Pathak, “Comprehensive Study of
Software Testing Techniques and Strategies: A Review.” [Online].
VI. CONCLUSIONS Available: www.ijert.org
Based on the results and discussion, it can be concluded [16] I. L. Chudinov, V. v. Osipova, and Y. v. Bobrova, “The
that an environmental health information system has been methodology of database design in organization management
systems,” in Journal of Physics: Conference Series, 2017, vol.
developed with the support of a monitoring information 803, no. 1. doi: 10.1088/1742-6596/803/1/012030.
system. This information system can facilitate the [17] C. Adhitya, R. Andreswari, and P. F. Alam, “Analysis and Design
management of environmental health data, as well as produce of UI and UX Web-Based Application in Maiproyek Startup Using
output in the form of graphics and reports within a particular User Centered Design Method in Information System Program of
duration. In the future, the system can be improved by adding Telkom University,” IOP Conference Series: Materials Science
and Engineering, vol. 1077, no. 1, p. 012039, Feb. 2021, doi:
some features or recommendation based on database. 10.1088/1757-899x/1077/1/012039.
[18] A. Avindra, C. Metta Cahyani, and L. R. Ningsih, “UI/UX Design
ACKNOWLEDGMENT of Analytics Application on Wao.Sneakers Online Store Using
This research was supported by the scheme of Penelitian Figma. Application,” 2021.
[19] N. Mansur, S. Nuryadin, and E. Siswono, “HEALTHY AND
Unggulan Terapan Universitas Sebelas Maret (PUT-UNS),
CLEAN-LIVING BEHAVIOR REVIEWED FROM THE
Grant Number 254/UN27.22/PT.01.03/2022. NEUROTICISM PERSPECTIVE AND ENVIRONMENTAL
KNOWLEDGE,” JURNAL GREEN GROWTH DAN
REFERENCES MANAJEMEN LINGKUNGAN, vol. 5, no. 1, pp. 41–55, Jun. 2015,
[1] D. H. Jayani, “There are still 9.2% of families in Indonesia sharing doi: 10.21009/jgg.051.04.
latrines in 2020,” 2021. [20] S. Roopa and M. Rani, “Questionnaire Designing for a Survey,” J
https://databoks.katadata.co.id/datapublish/2021/10/13/masih- Indian Orthod Soc, vol. 46, pp. 273–277, Oct. 2012, doi:
ada-92-keluarga-di-indonesia-berbagi-jamban-pada-2020 10.5005/jp-journals-10021-1104.
(accessed Jul. 11, 2022).
[2] S. Sinurat, I. S. Saragih, and M. F. Larosa, “Correlation of Public
Self-Awareness with Behaviour in Suppressing the Spread of
COVID-19 at Parombunan Sub Disctric Zone VI Sibolga City in
2021,” JUKES, 2021.
[3] G. Vionalita and D. A. Kusumaningtiar, “Knowledge of Clean and
Healthy Behavior and Quality of Life among School-Children,”
2017.
[4] I. Trisnaini, I. G. Purba, and A. Rosyada, “Basic House Sanitation
in Swamp Banks in Pemulutan,” JURNAL KESEHATAN
LINGKUNGAN, vol. 13, no. 2, p. 64, Apr. 2021, doi:
10.20473/jkl.v13i2.2021.64-71.
[5] S. Darnoto, H. Kusnanto, and E. Sugiharto, “Development of an
Environmental Health Information System with the Support of a
Geographic Information System at the Ngadirojo Health Center
Wonogiri,” 2012.
[6] D. Slutsky, “The Effective Use of Graphs,” Journal of Wrist
Surgery, vol. 03, no. 02, pp. 067–068, May 2014, doi: 10.1055/s-
0034-1375704.
[7] I. Wahyuni, F. Renaldi, A. Id Hadiana, A. Yani Jl Terusan Jenderal
Sudirman, P. Box, and J. Barat, Geographic Information System
Mapping Environmental Quality in West Bandung Regency. 2018.
[8] D. Handayani, A. H. Z. Fasya, M. Ibad, W. Afridah, F. A. Zahro,
and I. A. Nugroho, “Socialization of the Sisestren Application,”
pp. 687–695, 2021.
[9] A. A. Putro, A. A. Rumanti, and A. F. Rizana, “Design Of
Community Data Management Information System For
Community Health Monitoring At Hamlet Level With Scrum
Method (Case Study: Dusun Wonokambang),” 2021.
[10] A. Dinkes, “10 Indicators of Clean and Healthy Living Behavior,”
Apr. 24, 2014.
https://dinkes.bulelengkab.go.id/informasi/detail/artikel/10-
indikator-perilaku-hidup-bersih-dan-sehat-76 (accessed Jul. 11,
2022).
[11] V. Hema, S. Thota, S. Naresh Kumar, C. Padmaja, C. B. Rama
Krishna, and K. Mahender, “Scrum: An Effective Software
Development Agile Tool,” in IOP Conference Series: Materials
Science and Engineering, 2020, vol. 981, no. 2. doi: 10.1088/1757-
899X/981/2/022060.
[12] S. Al-Saqqa, S. Sawalha, and H. Abdelnabi, “Agile software
development: Methodologies and trends,” International Journal of

122