Progressive Web Application for Sta.

Monica Parish
Information Management System

A Capstone Project
Presented to the Faculty of
Palawan State University - Taytay Campus

In Partial Fulfilment of the Requirements

for the Degree of Bachelor of Science in Information Technology

By:

Dadizon, Angel Joy B.

Delos Santos, Marife S.
Peñafiel, Rosa B.

November 2021

1
0
 2

Abstract

This proposal study focuses on Progressive Web Application for Sta. Monica
Parish Information Management System of Poblacion, Taytay, Palawan. The researchers
found some problems encountered by the Parish Personnel struggling to find the
sacramental record, especially to those far away from the municipality, i.e., where the
location of sacramental records can be found. The researchers also found the lack of
providing easy access from Parish Personnel and clients. The researchers propose this
study to solve those problems: to provide easy access of Parish personnel to the clients, to
provide clients easy access to the parish where the user's sacramental record can be
found. This project will use JavaScript, HTML, and CSS. The significance of this
research to the user is that they will easily access their sacramental records to the Parish
of Sta. Monica. Also, for the Parish Personnel, this proposed project will help them to
make the transaction fast. With the help of the parish secretary, the researchers were
motivated to present this project. As presented in this project, the researchers expected
that it would have a fruitful result that gave both Parish Personnel and clients better
service.

Keywords: Progressive Web Application, JavaScript, HTML, CSS, Sacramental Record

1
0
 3

Approval Sheet

The Capstone Project Proposal entitled “Progressive Web Application for Sta. Monica
Parish Information Management System” prepared and submitted by Angel Joy B.
Dadizon, Marife S. Delos Santos, and Rosa B. Peñafiel has been examined and is
recommended for approval and acceptance.

RECOMMENDED:
ACE YORK C. MANGALINO
Adviser

PANEL OF EXAMINERS

APPROVED by the Panel of Examiners with a grade of ______.

RODERIC G. DERECHO, Ph.D.

Chairman

EDMAR C. DECLINES KHRISTIAN PAUL GENTOLEO

Member Member

ACCEPTED and APPROVED in partial fulfillment of the requirements for the degree
Bachelor of Science in Information Technology.

RODERIC G. DERECHO, Ph.D.

Campus Director
PSU Taytay Campus

Date of Defense: December 10, 2021

1
0
 4

Acknowledgment

“It is not possible to prepare a project without the assistance and encouragement of other
people. This one is certainly no exception. “-unknown

We have made efforts in this project. However, it would not have been possible
without the kind support and help of many individuals and PSU-Taytay Campus. We
want to extend our sincere thanks to all of them.
Foremost, we would like to thank the supreme power of Almighty God, who is the
one who has always guided us to work on, the one who has always guided us to work on
the right path of life. Without His grace, this project could not have become a reality.
Next, we would like to express our special gratitude to our Campus Director, Dr. Roderic
G. Derecho, for allowing us to do this project. Also, a big thanks to our adviser Mr. Ace
York C. Mangalino, for the continuous support to make this project work, for his
patience, motivation, enthusiasm, and immense knowledge. His guidance helped our
team in making this capstone project.
Last but not least, we convey our sincere thanks and gratitude to our family for
rendering constructive and valuable suggestions and comments that have helped a lot in
improving the quality and content of this project and helped us complete the project in a
limited time frame.

Thank You

A.B. Dadizon
M.S. Delos Santos
R.B. Peñafiel

1
0
 5

Table of Contents

Background of the Project 7

Objectives of the Project 8
Significance of the Project 8
Scope and Delimitation of the Project 8
Definition of Terms 9
Review of Existing Alternatives 14
Technicality of the Project 16
Details of the Technologies to be Used 17
How the Project will Work? 18
Gantt Chart 20
Summary 21
Conclusions 21
Recommendations 22
Program Specification 23
Program Testing 23
Security 23
Maintenance Plan 24
Users Training 24
APPENDIX B 36
Other Relevant Documents 36

1
0
 6

Chapter I

INTRODUCTION

Nowadays, websites have a significant impact on our society. A website is a

perfect place to house all the great content and to engage the target audience. It is also

called a regular web app designed to be accessible on all mobile devices, and it operates

via the web browser. However, it entirely depends on the browser the user is using. In

other words, it might be possible that users can access a native-device feature on Chrome

but not on Safari or Mozilla Firefox because browsers are incompatible with that feature.

PWA stands for Progressive Web Application, and this is an app built from web

technologies we all know, like HTML, CSS, and JavaScript. Many sites we found online

were using PWA like Facebook, Twitter for instance. We use those PWA efficiently by

installing them in the user's smartphone's home screen. PWA today is gaining popularity.

Many big sites are already PWA, Uber, Pinterest, Trivago, and others. PWA is just like an

app that is fast and handy. In line with this, the Researcher proposed a PWA for Sta.

Monica Parish Record Management Information System in Poblacion, Taytay, Palawan,

the Researchers used PWA because it is easy to manipulate both parish personnel and

clients. Also, this proposed project can provide easy access to the Sta. Monica Parish.

1
0
 7

Background of the Project

In the modern world, doing impossible things is now possible, like the generation

changed fast, technology innovation is also fast, mainly changing cell phones and

computers. Cellphones and computer benefits such as the way of using certain

applications for office work, for record-keeping purposes, for our daily lives, etc. The

discovery of technology was a significant function of modernity to make work easier.

With this help, people's lives become more convenient and doing things can be so fast.

Most people now are using technology for the fastest and easiest way of living. To relate

all of these to the researcher's project, the researchers want to help a Sta. Monica Parish

to have modern instruments that help the people to have easy access in the parish

regarding their sacramental records. Simply proposing a Progressive Web Application

will be more effective and better. This Progressive Web Application of Sta. Monica that

we are going to build, does not yet exist.

Record Management of Sta. Monica is a collection of sacramental records

(Baptismal Certificate, Marriage Certificate, Death Certificate, Confirmation Certificate)

of the individual with a parish record. Progressive Web Application of Sta. Monica Parish

is used in record-keeping and providing one's information.

1
0
 8

Objectives of the Project

This study aims to:

● To minimize the travel expenses of the user.

● To assist and support the Parish personnel to make their transaction fast and

lessens their workload.

● To develop the developers’ knowledge and skills.

Significance of the Project

The significance of the research study will provide easy access to the clients who

have a sacramental record on Sta. Monica Parish. Also, this study would be helpful to the

Parish Personnel who manages the information. For future researchers, this study can

provide baseline information on the current status of Sta. Monica Parish record.

Scope and Delimitation of the Project

The scope of this study was conducted in the Sta. Monica Parish in Poblacion,

Taytay, Palawan. This study started on April, 2021 until January, 2022. It focuses on the

Information Management System of the Parish. The client’s data, format, and other

aspects in implementation of the system was derived from the actual interview in the

Parish Personnel of the proponent.

The users of this system are for the Sta. Monica Parish Personnel who are in-

charge in collecting clients data.

1
0
 9

The proposed project generated reports such as the client's Baptismal Certificate,

Marriage Certificate, Confirmation Certificate, and Death Certificate.

The proposed project delimits the releasing of the client’s certificate online.

Definition of Terms

The following technical and operational terms are hereby defined in order to a better

understanding of the study.

● PWA – Progressive Web Application use modern web capabilities to deliver an

app-like user experience. They evolve from pages in browser tabs to immersive,

top-level apps, maintaining the web’s low friction at every moment.

● Sacramental Records- Are legal documents produced by the church. Generally

include, baptismal, marriage, death, and confirmation records.

● HTML – Hyper Text Markup Language is the standard markup language for

creating web pages, it tells the browser how to display the content.

● CSS – is the language used to style an HTML document and describe how HTML

elements should be displayed.

● JavaScript - is the programming language of the Web.

1
0
 Chapter II

REVIEW OF RELATED LITERATURE

This chapter includes the ideas, generalization or conclusion, methodologies, and

others. Those included in this chapter helps in familiarizing information that is relevant

and similar to the present project.

In 2015, the term Progressive Web Apps was created by Google. They are built

like Web apps and include features previously unique to Native apps. Progressive Web

Apps (PWAs) allow for web applications to be developed in an offline-first approach.

While Web apps traditionally did not properly function without an Internet connection,

PWAs enable them to be downloaded, installed, and used offline on various systems,

including mobile devices and personal computers, this is agreed upon[ CITATION

ndr18 \l 1033 ].

[ CITATION Jon19 \l 1033 ]. stated these facts: developing an app for Android and

iOS traditionally requires you to build two different versions. This is both costly and

time-consuming, which has led to the creation of many Cross-platform alternatives.

Progressive Web app (PWA) is an alternative one to use.

According to, “Over the years there has been a constant increase in the demand

for mobile software due to the constant increase in the number of smartphones”

[ CITATION Ade20 \l 1033 ] In addition, PWA has considered features, (1) Offline

capabilities, and the ability to work to a great extent even if the device is offline. (2) Add

to Home Screen, ability to install the web app to the user's device at will. (3) Background

1
0
 11

Synchronization, PWA has the ability to synchronize data in the background. (4) Storage

Estimation, has the ability to estimate the available storage that an application uses and

also to know the amount of storage left. (5) Cross-Browser Usage, it has the ability to

work on major browsers. Those are some features that PWA has. Based on the research

of [ CITATION Ade20 \l 1033 ], PWA has strengths and weaknesses, the strengths are:

PWA is easy to learn and develop using existing web technologies, installation of app on

user’s device before usage is not mandatory, the app can be accessed by users while

offline, it promotes user engagement, PWAs run only on the HTTPS protocol making it

highly secured, the single app is developed and can run on any platform using mobile

web browsers, and saves development and maintenance costs as there is no need for

development firm to hire developers for different architectures. And the weaknesses of

PWA are, PWAs do not have full access to all low-level features of mobile devices, users

cannot decide to update the app as the app automatically updates once it is visited, lastly,

as of today this technology does not have too much browser support. Finally, according to

Google Documentation, to qualify the criteria of PWA for a web application, it should

own a Web App Manifest, should be distributed over secure HTTP, should own a

legitimate and registered Service Worker, and should be visited at least twice within

greater than five (5) minutes, when the said criteria are satisfied, the browser will allow

the user to download the app on the home screen for devices,[CITATION Tam19 \l

1033 ].

PWA is a new concept and academic contribution to this field, and the

researcher’s capstone title does still not exist in any of their local places. There are a

1
0
 12

limited number of books and thesis works in this technology. Search results regarding

PWAs in Google Scholar returned a very limited number of results. Hence, this chapter

tries to review different sources concerning this technology.

Rapid technological changes are always affecting the way products and services

are designed. With the introduction of smartphones, the development practices for

applications have matured. The recent advancement in web technology has made mobile

web application development matured. Thus. arduous development using cross-platform

approaches was required. The Progressive Web Apps was coined as a novel approach that

can be implemented through a set of concepts of technologies on any website that meets

certain requirements, [ CITATION Pat20 \l 1033 ] stated these facts. PWA is the emerging

web technology nowadays that provides insight to fulfill the lapses in cross-platform

development. Despite that PWA has been evaluated in the industry domain, the study for

PWA as a new cross-platform development approach is limited. According to, “The

uniqueness of some features of PWA such as progressive, responsive, connectivity

independent, installable, safe, and app-like interactions addresses many gaps and

requirements for unified multi-platform development. We can say PWA is the novel way

for cross-platform development. Thus, PWA can contribute to a richer development

experience and an application service, [ CITATION Pat20 \l 1033 ].

In relation to the sacramental records. Sacramental records contain Baptism,

Confirmation, Marriages, and Deaths. And each parish is required to maintain those

records. Nowadays, all parishes have a computer to be used, sacramental records in

computer reproductions may be duplicated, but the complete records must be maintained

in the registers, and the registers themselves are never to be destroyed or discarded. In

1
0
 13

confidentiality of information, according to the [ CITATION Man05 \l 1033 ], care must

be taken to protect people’s privacy. Although sacramental registers contain public events

and other facts readily known to any interested party, they also contain information that is

very personal and confidential (p.32). In authorizing personnel, the parish priest is the

one responsible for the care and confidentiality of the sacramental registers as well as any

reproduction. He may be assigned other persons to make entries in the registers and to

prepare certificates. Another article came from [ CITATION Man05 \l 1033 ], concerning

certificates it is an official document certifying that a particular individual has received a

sacrament. It is a duplicated data entered in a sacramental register. Only the parish or

other location holding the Sacramental Record may issue a certificate. Only the actual

register, rather than a microfilm reproduction, should be used in preparing certificates. A

computer copy of the record may be used for a certificate, as long as there is assurance

that the computer copy corresponds identically to the original register (p.35). In line with

this, in the procedure of certificates, requests of certificates should be submitted in

writing, although online or telephone request for Request from a Catholic parish or

institution is acceptable. No information from sacramental registers should be provided

by telephone or other electronic means except to another Catholic. Even then care for the

privacy of persons is to be exercised.

1
0
 14

Nowadays, in the Philippines PWA is not popular enough, that’s why the

researcher’s resources are limited.

Travel Philippines is using PWA, it is launched by the Department of Tourism

(DOT) and the Tourism Promotions Board (TPB), this app provides users access to the

latest travel advisories and safety guidelines in various destinations that have so far

reopened to tourism activities. According to DOT Secretary Bernadette Romulo-Puyat

“As we continue to reopen the country’s tourism destinations, Travel Philippines timely

serves every tourist’s official guide to safe and fun travel.” This has evidence

(hmb.com.ph) the app will be regularly updated with the latest information on these six

locations (Palawan, Boracay, Bohol, Baguio, Ilocos Norte, and Metro Manila.) as well as

more travel destinations around the Philippines.

Another company that used PWA was Rappler. It is one of the new features

powered by Lighthouse. It is good news for Rappler readers because they can add the

Rappler to their mobile and desktop home screens. Rappler is an online news website

founded by Maria Ressa.

As you can see PWA in the Philippines is growing, we need to gradually adapt it

because PWA in the future is a big trend, especially for those famous companies.

Review of Existing Alternatives

The Sta. Monica Parish personnel used a manual method for managing their

client’s information. Sacramental records required by Canon Law to be kept according to

a formula that varies with each kind of record. Parishes must keep the following

1
0
 15

sacramental registers: Baptismal, Confirmation, Marriage, and Death. Listed below is

description of the information contained in the records of the sacraments, as well as in

several optional books.

Baptisms, records include the date, the baptismal name of the child at the time of

the baptism, the names of the parents (always including the maiden’s name of the

mother), the names of the sponsors, and the printed signature of officiating priest or

deacon. Entries are made in the records books as they occur time; initial access to these

records is therefore by date. Access to names is by the register index.

Marriages, records include the date, the names and dates of births of the parties

being married, the names of the two official witnesses, and the signature of the officiating

priest. Initial access is also by date by the surname of the husband.

Confirmations, is ordinarily administered to children as part of a class or group at

about the age of fifteen and is usually administered by a bishop or his delegate. The

records of the sacrament are kept in the parishes. Confirmation records include the date,

location, confirming bishop (or delegate), names of those confirmed and the total number

of males and females confirmed.

Deaths, records of deaths and burials are kept as part of the parish or mission

sacramental records. Burial records more frequently appear as part of cemetery records

and are required by Canon Law.

The client takes their personal Parish record through face-to-face transaction.

They used a typewriter to encode some of the sacramental certificates.

1
0
 16

Chapter III

TECHNICAL BACKGROUND

This chapter discusses the project's technicality by describing the type of project

to be developed and its functionality. It also represents the type of application

development of the project.

Technicality of the Project

Figure 1. Progressive Web App Architecture

Service workers act as a proxy between the browser and the network and are

responsible for caching of the website’s assets and interception of network requests,

which leads to the website’s offline availability and various other features including push

1
0
 17

notifications. Service workers also help tremendously in the background. Besides

offering offline capabilities, they’re also responsible for much of the heavy calculations,

which is the main reason why most PWA websites are so efficient and fast-loading.

Methodology

The proponents used Waterfall Model to show how the project will implemented.

Details of the Technologies to be Used

The scope of this section is the discussion on what technologies are being used

and how did the researcher use these technologies.

HTML- This is the language Web pages are written in. If an individual want to create a

really great web page, then they will need to learn this. As far as computer languages go

this is the easiest to learn. They can create a Web page without using a Web page editing

program but the program will still use HTML to create the page. Retrieved from

(https://liamcinteractivemedia.wordpress.com/2012/10/)

CSS- Cascading Style Sheets are used to format the layout of Web Pages. They can be

used to define text styles, table sizes, and other aspects of Web pages that previously

1
0
 18

could only be defined in a page’s HTML. CSS helps web developers create a uniform

look across several pages of a Web site. Retrieved from

(http://www.techterms.com/definition/css)

JavaScript- like Java, this is a programming language designed by Sun Microsystems, in

conjunction with Netscape that can be integrated into standard HTML pages. While

JavaScript is based on the Java syntax, it is a scripting language, and therefore cannot be

used to create stand-alone programs. Instead, it is used mainly to create dynamic

interactive Web pages. Retrieved from (http://phdessay.com/attendance-monitoring-

system/ )

MS Access- is a Database Management System (DBMS) from Microsoft that combines

the relational Microsoft Jet Database Engine with a graphical user interface and software

development tools. It is a member of the Microsoft Office suite of applications, included

in the professional and higher editions.

Retrieved from (https://www.tutorialspoint.com/ms_access/ms_access_overview.html)

How the Project will Work?

The system designated two workers, the Parish Personnel and the client. By entering the

URL in the browser, the PWA of Sta. Monica Parish will open. The user will log-in first

using the email account and password and input personal information and send, they will

choose what order type they want. While the Parish Personnel has all access in the system

including collecting, updating, editing, and deleting the information stored in a system. If

users want faster access from the Sta. Monica Parish Progressive Web app can add it to

the home screen or program list of their platform.

1
0
 19

Menu Sacramental Forms Inquiring form

1
0
 20

Gantt Chart

Schedule of the entire project in the format of a Gantt Chart

1
0
 21

SUMMARY, CONCLUSIONS, AND RECOMMENDATIONS

This chapter provides the summary that serves as the overview of the project,

conclusions based on the findings of the researchers, and recommendations that the

researchers believed would improve the project if added.

Summary

The Sta. Monica Parish in Poblacion, Taytay, Palawan is in great need of a better

and flexible information system for Parish Personnel to do their jobs efficiently. Their use

of the traditional manual method is causing delay and trouble when it comes to their

record-keeping, especially when finding the sacramental records—the Progressive Web

Application (PWA) for Sta. Monica Parish Information Management System is for those

who have a sacramental record that is kept by the parish; it helps them have easy access

and helps the parish personnel make the transaction fast and lessen their workload.

HTML, CSS, and JavaScript support this PWA.

Conclusions

After researching Sta. Monica Parish located in Taytay, Palawan, it was found that

their Parish Personnel is still using the traditional manual method in record-keeping and

documentation of their paperwork. The manual method took too much of their time,

especially during the current Covid-19 Pandemic era, and is highly at risk of causing

them problems in the future.

1
0
 22

Thus, the proponents concluded that the proposed title, “Progressive Web

Application,” be implemented in Sta. Monica Parish in Taytay, Palawan. It would be a

massive help to Sta. Monica Parish particularly to their Parish personnel to make their

transaction fast, lessening their workload because of the help of the proposed project.

Recommendations

As a result of this, the proponents recommended the adaptation of the proposed

project because it will improve the Sta. Monica of Taytay Palawan’s information process,

report generation, client’s information data storage. The proposed project will be

implemented at the Sta. Monica of Taytay, Palawan, because of its advantages. However,

faster submission of the request with the use of the internet was considered to improve

the said proposed project. Hence, the proposed project is recommended for

implementation because of its benefits and advantages. It is user-friendly, easy to access,

and enables the administrator to manipulate client records and security. Through email

account to provide information and to give data secured. Also, it has a quick search

function to facilitate searching operations when needed.

1
0
 IMPLEMENTATION PLAN

In this chapter, the researcher will discuss the activities that had been plan in order

to convert the design into a machine-executable form necessary to be run by the

computer. Assurance for accuracy and reliability of the proposed project design will also

be presented to prove effectiveness. It also contains the plans for maintaining the project

to keep pace with the past technology.

Program Specification

The proponents opted to develop the project using Bracket Version 1.14, HTML5

(HyperText Markup Language), CSS (Cascading Style Sheet), JS(JavaScript), and

MS Access 2019.

Program Testing

The proponents generate a prototype to visualize the layout of the project.

Security

The logging In was required before the system startup if the password didn’t

match then it can’t start. And the authorized person only can change the password. This

was made to avoid illegal or unauthorized use of the system.

1
0
 24

Maintenance Plan

In order to maintain the system, the parish secretary was the one who maintained

it. Only the parish secretary is the one who has a responsibility if a loss of data happens.

Users Training

The training must be done for the parish secretary and user in ordering him/her to

be taught on proper handling of the system. They will be taught how to manipulate and

operate the whole system. For the system to operate efficiently, the researcher proposes to

spend time on learning the required information needed.

1
0
 25

REFERENCES

Adetunji, O., Ajaegbu, C., Otuneme, N., & Omotosho, O. (2020, May 22).
View of Dawning of Progressive Web Applications (PWA): Edging Out the Pitfalls
of Traditional Mobile Development. American Academic Scientific Research
Journal for Engineering, Technology, and Sciences.
https://asrjetsjournal.org/index.php/American_Scientific_Journal/article/view/581
2/2144

Baltazar, C., & Ragojos, F. J. (2014, February 25). Attendance monitoring system.
Share and Discover Knowledge on SlideShare.
https://www.slideshare.net/jonabelledelarosa/manuscript-31614794

Biørn-Hansen, A., Majchrzak, T., & Grønli, T.-M. (2018, June).

Progressive Web Apps for the UnifiedDevelopment of Mobile Applications. Kvist,
J., & Mathiasson, P. (2019, May 24). Progressive Web Apps and other mobile
developing techniques: a comparison. Diva-Portal.Org. https://www.diva-
portal.org/smash/get/diva2:1480326/FULLTEXT01.pdf

Mole, P. (2020, September). Progressive Web Apps: A Novel Way for Cross-Platform
Development. Researchgate.
https://www.researchgate.net/publication/344170769_Progressive_Web_Apps_A_
Novel_Way_for_Cross-Platform_Development

Tamire, W. T. (2019, September 18). Evaluation of Progressive Web Application to

develop an Offline-First Task Management App. Aaltodoc.Aalto.Fi.
https://aaltodoc.aalto.fi/bitstream/handle/123456789/41619/master_Tamire_Work
neh_2019.pdf?sequence=1&isAllowed=y

Tandel, S. S., & Jamadar, A. (2018, September 9). Impact of Progressive Web Apps on
Web App Development . Researchgate.
https://www.researchgate.net/publication/330834334_Impact_of_Progressive_We
b_Apps_on_Web_App_Development

1
0
1
0
 27

APPENDICES

1
0
 28

APPENDIX A:

Prototype

1
0
 29

Figure 1. Signing up Figure 2. Accept Cookies

1
0
 30

Figure 3. Home Figure 4. Menu

1
0
 31

Figure 5. About Figure 6. Sacramental Forms

1
0
 32

1
0
 33

Figure 7. Contact Us Figure 8. Sacramental Record Inquiring Forms

Figure 9. Order Type Figure 10. Inquiring Baptismal Certificate

1
0
 34

Figure 11. Inquiring Confirmation Certificate Figure 12. Inquiring Marriage Certificate

1
0
 35

Figure 13. Inquiring Death Certificate0 Figure 14.1. Response from inquiring

1
0
 36

Figure 14.2. Response from inquiring Figure 15. Exit

1
0
 37

APPENDIX B

Other Relevant Documents

1
0
 38

1
0