D.A.P.A.T.

(Disaster Awareness, Preparedness,

Alertness, and Transfer)
Mobile Apps

Title Page

A Capstone Project Presented to the

Faculty of Palawan State University
Taytay Campus

In Partial Fulfilment of the

Requirements for the Degree
Bachelor of Science in Information Technology

By:

Olivera, Chrisman Joy B

March 2018
 Abstract

This study aspires to have an unconventional and alternative source of

Information. This was conducted to help the Taytayanos, MDRRMO Taytay, Palawan
and other users. The features of the website and mobile app are very easy to use. Website
provides information and news online and updated, while the mobile app provides
information about disaster awareness using only cellphone and even offline. This
research can greatly help essential in times of disaster even without internet. DAPAT
assures the community for resilience. The first basic need is android cellphone to try and
use this mobile application, and the second is internet to be updated with news about
disasters and preparation. The DAPAT mobile application and website can also be
improved by attending seminars, trainings of an admin holding the system, so that the
system can be more beautiful, friendly easy to use and more useful to the clients. User
interface and information contained can be changed by admin. Researchers in the future
can use different methods of upgrading this system to help them better improving stored
data for more effective and efficient disaster resiliency updates.

Keywords: mobile apps, disaster, system, internet, website.

 Approval Sheet

The Capstone Project entitled D.A.P.A.T. (Disaster Awareness, Preparedness,

Alertness and Transfer) Mobile Apps prepared and submitted by Olivera, Chrisman
Joy B. 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 ______.

ALFIE Z. HACHERO
Chairman

DOROTHY JOY S. SVETLANA SUSAN ALEXA A.

ELANGA TORRELIZA
Member Member

ACCEPTED and APPROVED in partial fulfillment of the requirements for the

degree Bachelor of Science in Information Technology.

SEVERO E. ARZAGA JR.

Campus Administrator
PSU Taytay Campus

Date of Defense: March 22, 2018

 Acknowledgment

First, this research will be impossible without the help of our Almighty God Jesus
Christ who provides everything I need for sending those people who helped me to make
this research. Thank you.

To the staff of MDRRMO most especially to Mrs. Eleanor N. Enopia for

accommodating me and giving her precious time for answering my questions. Thank you
for sharing me your expertise.

To my instructor and Advisers respectively yours.

I would like also to thank our friends for encouraging our group in times that we
almost losing hope, losing trust in our self to push through this research. Thank you,
Guys! Till next time.

I would like to acknowledge my parents Mr. Herman Olivera and Mrs. Joy
Baldosano, for your unconditional love, and untiring support emotionally and financially
all throughout my research, I am very thankful that God gave me parents like you.
 Dedication

The Proponent wholeheartedly dedicates this study entitled “D.A.P.A.T. (Disaster

Awareness, Preparedness, Alertness and Transfer) Mobile Apps” to his family and loved
ones, to all his instructors especially to Mr. Ace York C. Mangalino, to the Municipal
Disaster Risk Reduction Management Office - Taytay employees, to his friends and
above all, to his Almighty God.

They are his strength and never-ending source of inspiration.

The Proponent
 List of Figures and Tables

List of Figures

Figure 1: Environment.......................................................................................................28
Figure 2: Taytay MDRRMO Organizational Chart...........................................................29
Figure 3: Website Use Case...............................................................................................30
Figure 4: Mobile App Use Case........................................................................................31
Figure 5: DAPAT Website and Mobile Apps Fishbone Diagram.....................................32
Figure 6: Functional Decomposition of DAPAT website.................................................34
Figure 7: Functional Decomposition of DAPAT Mobile App..........................................34
Figure 8: DAPAT Website IPO.........................................................................................43
Figure 9: DAPAT Mobile App IPO...................................................................................44
Figure 10: DAPAT mobile app home interface.................................................................45
Figure 11: DAPAT mobile app menu................................................................................46
Figure 12: (L-R) Natural and Awareness screens..............................................................47
Figure 13: (L-R) Alertness and Taytay, Palawan screens.................................................48
Figure 14: DAPAT website home page.............................................................................49
Figure 15 DAPAT website online news articles................................................................49
Figure 16: DAPAT website online news videos................................................................50
Figure 17: DAPAT website showing the navigation menu...............................................50
Figure 18: DAPAT network model...................................................................................51
Figure 19: DAPAT network topology...............................................................................51
Figure 20: DAPAT deployment diagram..........................................................................55

List of Tables

Table 1: Development and operational cost......................................................................40

Table 2: Software specifications........................................................................................52
Table 3: Hardware specification........................................................................................52
Table 4: Security and backups checklist............................................................................57
 Table of Contents

Title Page.............................................................................................................................i
Abstract..............................................................................................................................ii
Approval Sheet.................................................................................................................iii
Acknowledgment..............................................................................................................iv
Dedication...........................................................................................................................v
List of Figures and Tables................................................................................................vi
Table of Contents.............................................................................................................vii
Chapter I – INTRODUCTION.........................................................................................9
1.1 Background of the Project..........................................................................................9
1.2 Statement of the Problem.........................................................................................10
1.3 Objectives of the Project..........................................................................................10
1.4 Significance of the Project.......................................................................................11
1.5 Scope and Delimitation of the Project.....................................................................12
1.6 Definition of Terms..................................................................................................13
Chapter II - REVIEW OF RELATED LITERATURE AND STUDIES...................14
2.1 Review of Related Literature...................................................................................14
2.2 Review of Related Studies.......................................................................................17
2.3 Research Design.......................................................................................................22
2.4 Research Instrument.................................................................................................23
Chapter III - TECHNICAL BACKGROUND..............................................................24
3.1 Technicality of the Project.......................................................................................24
3.2 Details of the Technologies to be Used....................................................................25
3.3 How the Project will Work?.....................................................................................26
Chapter IV – METHODOLOGY...................................................................................27
4.1 Environment.............................................................................................................27
4.1.1 Locale....................................................................................................................27
4.1.2 Population of the Study.........................................................................................27
4.1.3 Organizational Chart..............................................................................................27
4.2 Requirement Specifications.....................................................................................28
4.2.1 Functional Requirements Specification.................................................................29
4.2.2 Operational Feasibility...........................................................................................31
4.2.2.1 Fishbone Diagram...........................................................................................31
4.2.2.2 Functional Decomposition Diagram...............................................................33
4.2.3 Technical Feasibility..............................................................................................34
4.2.3.1 Compatibility Checking..................................................................................35
4.2.3.2 Relevance of the Technologies........................................................................36
4.2.4 Schedule Feasibility...............................................................................................39
4.2.4.1 Gantt Chart......................................................................................................39
4.2.5 Economic Feasibility.............................................................................................40
4.2.5.1 Cost and Benefit Analysis...............................................................................40
4.2.6 Requirements Modeling.........................................................................................42
4.2.6.1 Input/Process/Output.......................................................................................42
4.2.6.2 Performance.....................................................................................................43
4.2.6.3 Control.............................................................................................................43
4.2.7 Design....................................................................................................................44
4.2.7.1 Output and User-Interface Design...................................................................44
4.2.7.1.1 DAPAT Mobile App.......................................................................................44
4.2.7.1.2 DAPAT Website..............................................................................................48
4.2.7.2 Network Model................................................................................................50
4.2.7.3 Network Topology..........................................................................................50
4.2.7.4 Security............................................................................................................51
4.2.8 Development..........................................................................................................51
4.2.8.1 Software Specification....................................................................................51
4.2.8.2 Hardware Specification...................................................................................52
4.2.8.3 Program Specification.....................................................................................53
4.2.8.4 Programming Environment.............................................................................53
4.2.8.5 Deployment Diagram......................................................................................54
4.2.9 Testing...................................................................................................................54
4.2.9.1 Unit Testing.....................................................................................................54
4.2.9.2 Integration Testing..........................................................................................54
4.2.9.3 System Testing................................................................................................55
4.2.9.4 Performance Testing........................................................................................55
4.2.9.5 Compatibility Testing......................................................................................55
4.2.9.6 Acceptance Testing.........................................................................................55
Chapter V – IMPLEMENTATION PHASE.................................................................56
5.1 Program Testing.......................................................................................................56
5.2 Security and Backup Plans.......................................................................................56
5.3 Maintenance Plan.....................................................................................................57
5.4 User Testing.............................................................................................................57
SUMMARY......................................................................................................................58
CONCLUSIONS..............................................................................................................59
RECOMMENDATIONS................................................................................................60
Bibliography.....................................................................................................................62
Appendices........................................................................................................................63
A. Evaluation Tools......................................................................................................64
B. Other Relevant Documents......................................................................................66
C. Gantt Chart...............................................................................................................69
D. Relevant Source Code..............................................................................................71
E. User’s Guide.............................................................................................................73
F. Other Forms.............................................................................................................75
G. Grammarian’s Certificate.........................................................................................79
H. Curriculum Vitae......................................................................................................81
 Chapter I – INTRODUCTION

1.1 Background of the Project

The municipal Disaster Risk Reduction Management Office, MDRRMO Taytay,

is located at Sitio Nalbot, Barangay Poblacion, Taytay, Palawan. It was conceptualized

on January 1, 2010, but it was in early 2012 that the office officially operated. Mrs.

Eleanor N. Enopia headed the office, and it was under her leadership when the two

disasters landed in the municipality, the "Bagyong Yolanda and Quennie."

In the case of the computer and technology generation, most people are now

aware of using varied gadgets. Nowadays, communications are possible in all walks of

life, even in different parts of the world. The use of social media like Facebook,

Instagram, and others like browsing the internet by checking websites and even using

mobile apps to be updated on everything is now a very trending issue.

Most of us now are users of cellular phones, better known as communication

things. In the previous generation, it was like a promenade of a turtle to change the

version and the units of one mobile, but it is big different now; it is fast-changing like a

blink of an eye. Today, there are many choices for mobile phones. Others call it smart

phones, and from the word itself intelligent, yes, everything we need is just one click

away. Entertainments like music, games, and watching movies are a few examples that

everyone is appreciated on smartphones.

One phone's features and uses depending on the application installed on it.

Application is the one that makes everything easier. The use of cellular phones depends
on the application installed on them, how useful, and how good the phone relies upon the

response of the applications.

To sum up, everything has its advantages and disadvantages: we must exert effort

to learn things, but as we all notice nowadays, everything is just a click. Most of us are

now dependent on mobiles and applications. However, we must bear in mind, wiser and

more intelligent, to download and install the application for pleasure and applications that

can give us information, especially during disasters, calamities, and emergencies.

1.2 Statement of the Problem

The study is entitled, “D.A.P.A.T. (Disaster Awareness, Preparedness, Alertness

and Transfer) Mobile Apps.” This research is applicable for selected areas in the

Municipality of Taytay, Palawan which is not only aiming to make a mobile app that can

be an eye opener for those issues and concerns that are not given enough time and

attention but also to be helpful to answer the following important questions:

 How MDRRMO provides information about calamities to the public?

 In what ways information about incoming calamities be given to the public

completely, accurately, timely, and can be easily understood? and

 What mobile app can provide updates in times of calamities and disasters?

1.3 Objectives of the Project

The general objective of the study entitled, “D.A.P.A.T (Disaster Awareness,

Preparedness, Alertness and Transfer) Mobile Apps,” is to give awareness and readiness
to the people of the Municipality of Taytay, Palawan through the help of their Mobile

Apps in terms of Disasters and Calamities.

This research project aims:

 To make a Mobile App which can give fast and accurate information to

residents of different barangays of the municipality of Taytay, Palawan;

 To provide sufficient information for the high-risk place that can harm people

nearby and intensify alertness of each resident living in a peril place; and

 To create a mobile app that can able to give definite information to everyone

for their awareness, the current situation in every respective barangay mostly

to those affected areas during calamity.

1.4 Significance of the Project

This study is essential to provide a mobile application to all Taytayanos that they

may use in disasters and calamities. An application that will not require considerable

space and will not consume a big size of phone storage so that it will not affect the

performance of the other applications installed in their mobile phones.

The significance of this study for MDRRMO Taytay are using this application it

will make it easy for them to send information to everyone about the issues and important

information like giving warning signals and update about the calamity that might happen

in one place.

This mobile application can be a tool that can be employed for other offices of

MDRRMO, like in Puerto Princesa City, Metro Manila, and other places where

MDRRMO exists to reach out to the office of MDRRMO Taytay.

 Thus, this study is a material that is good to improve. The proponent would

suggest that the subsequent researchers improve the study's limitations, like interaction,

commenting, and posting to the application, so that communication would be accessible

and possible.

1.5 Scope and Delimitation of the Project

The scopes of the study are focus to issues related to disaster awareness,

preparedness, and alertness and transfer/rescuing.

This research focused on the mobile application which aims to give factual and

updated information from the office of MDRRMO Taytay to the resident if not all but

mostly barangays with stable signal for smart phones in Taytay. All users can access the

mobile application, this application will be made for everyone to easily learn about the

plans and schedules when disaster hits the community it may also include trainings and

seminars of the MDRRMO Taytay.

The DAPAT Mobile App does not cover the interaction between the user and the

administrator, the one who updates the application like commenting and posting to the

issues and information that posted in the applications. This application is also impossible

to update when the internet connection is not available, also for the users it is impossible

for them to get latest updates from the office of MDRRMO Taytay when they don’t have

internet connection.

This study will mainly cover all the information provided by the office of

MDRRMO and there will be no information that can be posted which is not related to the

said office.
1.6 Definition of Terms

The following terms were used in research study:

D.A.P.A.T. (Disaster, Awareness, Preparedness, Alertness, and Transfer) in selected

Barangay of the Municipality of Taytay.

Mobile Application. A mobile application or mobile app is a software application.

Basically, it is a computer-generated program designed and developed to run on

mobile devices.

MDRRMO. Municipal Disaster Risk Reduction Management Office

HTML. Hypertext Markup Language. It is a language that use for making website,

design and editing. It helps the users and developers to easily used and to show

information’s through browser.

Smartphone. A mobile phone that performs many of the functions of a computer,

typically having a touchscreen interface, Internet access, and an operating system

capable of running downloaded applications.

Java. A general-purpose computer-programming language that is concurrent, class-

based, object-oriented and specifically designed to have as few implementation

dependencies as possible.
 Chapter II - REVIEW OF RELATED LITERATURE AND STUDIES

2.1 Review of Related Literature

Local

Batingaw app for disaster risk reduction and management

QUEZON CITY, Sept. 12 (PIA) – Want to monitor news reports and Philippine

government agencies when disaster occurs? Want to turn your smartphone into your very

own utility dervice? Now you can with the “Batingaw” mobile app, an application for

disaster risk reduction and management, now available for free download at Google Play

and Apple App Store. The Batingaw app was developed by Smart Communications, Inc.

(Smart) in cooperation with the Office of Civil Defense and the National Disaster Risk

Reduction and Management Council.

“As a result of the increasing intensity and frequency of disasters happening

around the world, the need for tools that will not only strengthen public awareness on the

importance of disaster preparedness, but also facilitate a nationwide system for disaster

response and management, is underscored,” Smart said in a statement.

Batingaw, a Tagalog word for “siren”, is a pro-active, comprehensive and rational

disaster management mobile application adopted by the OCD and NDRRMC as a

communication tool to help reduce and mitigate the disastrous effects of natural and

human-made hazards to vulnerable communities with the help of mobile technologies.

“The mobile app can be used to give government agencies, organizations and individuals,

immediate access to disaster warnings, advisories, location data, and disaster mappings.
 It features step-by-step instructions that can guide users to safety during disasters.

The app also enables users to contribute information to emergency agencies more easily

and quickly,” Smart added.

“The OCD and the NDRRMC continue to explore ways to inform the public on

disaster risk reduction and management measures and systems to help save lives and

properties. With this mobile application, we have added another strategy to reach out to

people with helpful tools right at their fingertips,” Usec. Alexander P. Pama, Civil

Defense Administrator and NDRRMC Executive Director said.

For his part, Smart Head for Public Affairs Group Ramon R. Isberto said, “We

support initiatives that utilize the mobile phone as a tool for disaster preparedness. These

days, almost everyone has a mobile phone, and this can be a valuable lifeline during

emergencies.”

“With Batingaw, the mobile phone now becomes a handy electronic resource that

the public can use in times of emergencies. It provides basic information on how to

reduce one’s vulnerability during disasters. It may also be used as a learning tool for

preparedness for individuals, their families, and entire communities before, during, and

after disasters,” he added (RJB/JCP/PIA-NCR) (Paunan, 2014).

Foreign

Traditional situational awareness services in disaster management are mainly

focused on the institutional warning response and not fully exploit the active participation

of citizens involved. This paper presents an advanced system for emergency management

(ASyEM) which fuses the potentiality offered by mobile social data and bottom-up
communication with smart sensors. The proposed architecture model is organized into

four different layers: (1) sensor, (2) local transmission, (3) network and (4) management.

ASyEM is able to capture and aggregate two different kind of data: (a) user generated

content produced by citizens during or immediately after the disaster and shared online

through socio-mobile applications and (b) data acquired by smart sensors distributed on

the environment (i.e., intelligent cameras, microphones, acoustic arrays, etc.). Data are

selected, analysed, processed and integrated in order to increase the reliability and the

efficiency of whole situational awareness services, localize the critical areas and obtain in

this way some relevant information for emergency response and completion of search and

rescue operations.

The Indian Ocean tsunami (2004) and Hurricane Katrina (2005) reveal the

coming of age of the on-line disaster response community. Due to the integration of key

geospatial technologies (remote sensing - RS, geographic information systems - GIS,

global positioning systems – GPS) and the Internet, on-line disaster response

communities have grown. They include the traditional aspects of disaster preparedness,

response, recovery, mitigation, and policy as facilitated by governmental agencies and

relief response organizations. However, the contribution from the public via the Internet

has changed significantly. The on-line disaster response community includes several key

characteristics: the ability to donate money quickly and efficiently due to improved

Internet security and reliable donation sites; a computer-savvy segment of the public that

creates blogs, uploads pictures, and disseminates information – oftentimes faster than

government agencies, and message boards to create interactive information exchange in

seeking family members and identifying shelters. A critical and novel occurrence is the
development of “people as sensors” - networks of government, NGOs, private

companies, and the public - to build rapid response databases of the disaster area for

various aspects of disaster relief and response using geospatial technologies. This paper

examines these networks, their products, and their future potential (Kodrich & Laituri,

2008).

2.2 Review of Related Studies

Local

The Philippines is considered one of the most disaster-prone countries. Every

year, storms, flash floods, landslides, earthquakes, and volcanic activities batter the

country. The Philippine Islands are prone to all kinds of natural hazards because of their

geographical location and physical environment. The country is strategically located in

the path of turbulent and destructive cyclones in the Pacific, and the “Ring of Fire”. This

situation has adverse effects, not only on the lives and properties of the Filipino people,

but also on the economy of the nation, as hazard impacts may result in widespread

environmental and property damages. Natural hazards may cause danger to people,

structures or economic assets, and may lead to a disaster if they are not mitigated against

and prepared for. Phenomena that are atmospheric, hydro meteorological or

oceanographic and geographical in nature may cause the loss of life or injury, property

damage, social and economic disruption and/or environmental degradation. Hydro

meteorological and geographical hazards can be single, sequential or a combination in

origin and effects. The common hazards associated with these are heavy rains, strong

winds, storm surge, floods and landslides/ mud slide /mud flow. Geological hazards are
normal and their processes occur as irregular events with direct interaction with the

environment. They are capable of causing significant negative impact on human well-

being. Their non-rhythmic occurrence makes their predictability difficult. An important

characteristic of many geological hazards is their prime land preference – the

characteristic of preferentially occupying areas targeted by man for his use.

Disaster risk reduction is the concept and practice of reducing disaster risks

through systematic efforts to analyze and reduce the causal factors of disasters. Reducing

exposure to hazards, lessening vulnerability of people and property, wise management of

land and the environment, and improving preparedness and early warning for adverse

events are all examples of disaster risk reduction.

Disaster risk reduction includes disciplines like disaster management, disaster

mitigation and disaster preparedness, but DRR is also part of sustainable development. In

order for development activities to be sustainable they must also reduce disaster risk. On

the other hand, unsound development policies will increase disaster risk - and disaster

losses. Thus, DRR involves every part of society, every part of government, and every

part of the professional and private sector (“Dw.com”, 2013).

Foreign

Disaster risk reduction (DRR) is a systematic approach to identifying, assessing

and reducing the risks of disaster. It aims to reduce socio-economic vulnerabilities to

disaster as well as dealing with the environmental and other hazards that trigger them.

Here it has been strongly influenced by the mass of research on vulnerability that has

appeared in print since the mid-1970s. It is the responsibility of development and relief
agencies alike. It should be an integral part of the way such organizations do their work,

not an add-on or one-off action. DRR is very wide-ranging: Its scope is much broader and

deeper than conventional emergency management. There is potential for DRR initiatives

in just about every sector of development and humanitarian work.

The most commonly cited definition of DRR is one used by UN agencies such as

UNISDR, also known as the UN Office for Disaster Risk Reduction, and UNDP: "The

conceptual framework of elements considered with the possibilities to minimize

vulnerabilities and disaster risks throughout a society, to avoid (prevention) or to limit

(mitigation and preparedness) the adverse impacts of hazards, within the broad context of

sustainable development.

Knowing the Risks and Taking Actions identifies, assesses and monitors disaster

risks and enhances early warning. This principle believes that early warning saves lives.

Early warning is to relay to individuals, groups or populations messages which provide

them with information about: the existence of danger; and what can be done to prevent,

avoid or minimize the danger.

In disaster risk management, a whole range of elements need attention depending

on the nature of the hazards in that location. These include: Risk Reduction. Vulnerability

and hazards are not dangerous if taken separately. They become risk and disaster factors

when they unite. Risks can be reduced or managed, and measures can be employed to

ensure that hazards will not result in disasters if people reduce the weaknesses and

vulnerabilities to existing hazards in the location. Risk management is needed for disaster

prevention to ensure sustainable development so that people can lead a good, healthy, and

happy life without creating damage to the environment. Risk management includes
identifying health and safety hazards, determining probability of their occurrences,

estimating their potential impacts to the schools and the communities at risk, enumerating

and implementing the following risk reduction measures: hazard mapping; vulnerability

analysis; potential losses estimation; and strategic disaster prevention / mitigation

development.

Disaster Risk Management The systematic process of using administrative

decisions, organization, operational skills and capacities to implement policies, strategies

and coping capacities of the society and communities to lessen the impacts of natural

hazards and related environmental and technological disasters. It comprises all forms of

activities, including structural and non-structural measures to avoid or to limit adverse

effects of hazards (John M. Legistone, 2004).

Despite considerable effort and expenditure on public hazard education, levels of

disaster preparedness remain low. By integrating and expanding on natural hazards and

health research on protective behavior, this paper proposes a social cognitive model of

disaster preparedness. The model describes a developmental process that commences

with factors that motivate people to prepare, progresses through the formation of

intentions, and culminates in decisions to prepare. Following their critical appraisal,

variables implicated at each stage are identified and their role in the preparedness process

described. The implications of the model for the conceptualization and assessment of

preparedness is discussed, as is its implications for risk reduction and communication

strategies. (Douglas Paton, 2003)

A disaster is a “serious disruption of the functioning of a community or a society

involving widespread human, material, economic or environmental losses and impacts,

which exceeds the ability of the affected community or society to cope using its own

resources.” Four stages of a ‘disaster cycle’ have been identified: Mitigation and

prevention, preparedness, response, and recovery. Communication between authorities

and the public about disasters occurs in all stages of the cycle, with different aims at each

stage. Communication is a potentially valuable way of avoiding and reducing harm

caused by disasters.

Risk communication aims to provide the public with information about the effects

of an event, and how actions may affect the outcome of the event.4 Crisis and Emergency

Risk Communication (CERC) is the use of risk communication in emergencies to inform

the public about an event or issue to empower members of a community to protect

themselves. In this review, we focus on CERC in the context of disasters, at all stages of

the disaster cycle. Risk communication in disasters has historically been a one-way

transfer of information from authorities to the public, rather than an interactive flow of

information. Disaster risk communication may take place through many different

channels, including some that have been recently developed or expanded. Potential

channels of communication include face-to face conversations, telephone calls, group

meetings, mass media such as television, tailored mass media such as reverse 911

services and interactive social media such as Twitter.

The effectiveness of risk communication interventions could be evaluated by

assessing many possible outcomes. We chose to focus on knowledge, behavior and

incidence of health outcomes (e.g. injuries, deaths), which are particularly likely to be

measured and reported, and also might be considered the most important outcomes.

As well as seeking to estimate the effects of different types of disaster risk

communication, we aim to identify gaps in knowledge or evidence that would benefit

from future research. Lastly, we aim to identify lessons from the literature that will help

inform the design of future research (Clarke M. Commentary, 2009).

2.3 Research Design

This project named as D.A.P.A.T. (Disaster Awareness, Preparedness, Alertness

and Transfer) Mobile application had been through different experimentation before it

came up to this point.

Upon doing this project, the developer made study and trials in different

languages, programs and application that suited for this project. The process of the

project became hard and complicated because the developer need to look a system that

will be applicable to both personal computers and cellular phones. This mobile

application requires to be connected to personal computers to work through internet

connection, but the users can only use their mobiles to access and used the application.

After the experiment, trials and study, the developer came up to the conclusion

that the best language for the mobile application was HTML5 and JAVA, for the website

the software that the developer used are Sublime Text for editing, Android Studio IDE

for the connection of mobiles and computers, FileZilla for updating the website and CSS

for the enhancement of Web application.

The researchers are open to welcome new idea from future developer to enhance

this project, to upgrade this application using latest develop system, software and

languages that can satisfy the demand of the situation.

2.4 Research Instrument

The proponent made an interview questionnaire addressing the office of

MDRRMO to gathered more information from their office, to be more aware to the

environment of their works and also to know the staff and officials behind this

department.

The interview was great, the proponent was well-accommodated during interview,

they answered the questions precisely and the proponent find it helpful.
 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.

3.1 Technicality of the Project

The proponent made a mobile application and website as well to help the

MDRRMO-Taytay to introduce their office and to promote easily the activities that their

office will be conducted. To be more convenient for the users to access the office through

the applications and websites that the researcher is proposing.

The application was named as “D.A.P.A.T. (Disaster Awareness, Preparedness,

Alertness, and Transfer) Mobile Apps.” The application will be used through mobile

phones while website will be used through personal computers or laptop. The site the site

can be accessed through www.taytaydapat.5gbfree.com. The mobile application and

website are made to be convenient both for MDRRMO- Taytay and the Taytayanos to be

more closely and updated to MDRRMO-Taytay for the current situation and possible

happenings in the municipality of Taytay, Palawan. This application is also for the

convenience of other MDRRMO-site offices to access the office of Municipal Disaster

Risk Reduction Management Office Taytay.

The proponent will use HTML5 and Java Language for mobile application. These

two languages will be used for the whole proposing project which are website and mobile

application. Also, the researcher will use software such as Sublime text software for

source code editing, Android Studio IDE for making mobile applications, and FileZilla
software for updating the website. Moreover, the researcher also uses CSS to enhance the

web application by adding styles to images, text, tables and other HTML tags.

3.2 Details of the Technologies to be Used

HTML5 is a markup language used for structuring and presenting content on the

World Wide Web. It is the fifth and current version of the HTML standard. Furthermore,

HTML5 is the latest version of Hypertext Markup Language, the code that describes web

pages. It's three kinds of code: HTML, which provides the structure; Cascading Style

Sheets (CSS), which take care of presentation and JavaScript, is most commonly used as

a client-side scripting language. When a user requests an HTML page with JavaScript in

it, the script is sent to the browser and it's up to the browser to do something with it. It is

a language that use for making website, design and edit. It helps the users and developers

to easily used and to show information’s through browser.

Web Browser

A web browser, or simply "browser," is an application used to access and view

websites. Common web browsers include Microsoft Internet Explorer, Google Chrome,

Mozilla Firefox, and Apple Safari. The primary function of a web browser is to render

HTML, the code used to design or "markup" webpages. Each time a browser loads a web

page, it processes the HTML, which may include text, links, and references to images and

other items, such as cascading style sheets and JavaScript functions. The browser

processes these items, then renders them in the browser window.

3.3 How the Project will Work?

The Project will work as mobile application and website. The D.A.P.A.T website

will be using the software application called web browser, such us Firefox, Google

Chrome, Internet Explorer, etc. The website has designated two operators, the web

developer and the user. The user can access the website, download the images, videos

and copy the information while the web developer is responsible for updating, editing and

deleting the information in the website.

The mobile application will use android cellular phone. The mobile application

works dependent to the update from the website. The updated information will show only

through online, without internet connection the only information provided are the

button’s such as TIP’s where the user can read about what to do during calamity.

CONTACT PERSON where the user can access the emergency hotline numbers.

MOBILE APPLICATION DEVELOPER the user can read about the basic information

of developer; and lastly the MDRRMO TAYTAY OFFICIALS where the user can see

the pictures and names each member of MDRRMO-Taytay.

 Chapter IV – METHODOLOGY

4.1 Environment

Website/ Mobile App Developer

www.taytaydapat.5gbfree.com- a calamity awareness

website of selected barangay in Taytay, Palawan

Website/Mobile App

Figure 1: Environment User

4.1.1 Locale

This research entitled “D.A.P.A.T (Disaster, Awareness, Preparedness, Alertness,

and Transfer) Mobile App” was conducted in Barangay Poblacion, in the Municipality of

Taytay, Palawan.

4.1.2 Population of the Study

The MDRRMO of the Local Government of Taytay, Palawan and its employees.

4.1.3 Organizational Chart

The Department of MDRRMO Taytay was in Sitio Nalbot, Barangay Poblacion,

Taytay, Palawan headed by the department Officer Hon. Eleanor N. Enopia.

 Figure 2: Taytay MDRRMO Organizational Chart

4.2 Requirement Specifications

There are two requirement specifications used in the studies, the functional and

non-functional requirement.

The functional requirement of the system is for the user. The User is unable to

manipulate the codes of the website, but the user allowed downloading the images and

videos, copy information, visit the other website using provided links in site, while the

non-functional requirements is for the developer. The web/mobile developer can update

and maintain the website and mobile application.

4.2.1 Functional Requirements Specification

This section outlines the use cases for each active user. The user can only view a

website while the Web developer can update the website.

Use Case for Website

Figure 3: Website Use Case

Brief Description

The User access the website. The user will input URL, the user can copy, read and

download information from the website in same time.

Initial Step-By-Step Description

1. Before this use case can be initiated, the User has already launched the website.

2. The User input the Domain name www.dapat_taytaypalawanph.com.

3. The User views the information, news, schedules of seminars that MDRRMO Taytay

are going to conduct.

4. The User allows copying data information and allows downloading video and images.

Use Case for Mobile Application

Figure 4: Mobile App Use Case

Brief Description

The User access the mobile application. The user will click the Icon. The user

allows reading information only, watching the videos and brows the images.

Initial Step-By-Step Description

1. Before this use case can be initiated, the User has already launched the mobile

application.

2. The User click the Icon.

3. The mobile application displays the main form.

4. The User allows choosing what information they want to know.

5. The User allows reading information; watch the video and brows images.

4.2.2 Operational Feasibility

4.2.2.1 Fishbone Diagram

Figure 5: DAPAT Website and Mobile Apps Fishbone Diagram

 The fishbone shown above is for the DAPAT website and mobile application.

They are composed of 5M’s which Method, Machinery, Materials, Manpower, and

Management are. Each of 5M’s illustrating different aspects and shows the resources of

developer in making and developing the website and mobile application. The Method

shows what can a developer do, or it shows the task of developer. The Machinery shows

the different machines which the developer can used to make and develop both the

website and mobile application. The Materials shows the different software that the

developer used in developing the website and mobile application. The Manpower in

fishbone shows not only the resource persons/officials that the developer can asks for

details on the website and mobile application but also, it shows in this portion the

developer itself. Lastly, the Management it shows here the things that must do in website

and mobile application which is maintenance of both, maintaining in terms of updating.

4.2.2.2 Functional Decomposition Diagram

Figure 6: Functional Decomposition of DAPAT website

4.2.3 Technical Feasibility

The technical feasibility is one of the first studies that must be conducted after a

project has been identified. This is also served as a guide for the future researchers and

developers to improve the project and to enhance through the modern technologies and

applications that might be develop or invented after the project has been done.

In this feasibility study it is important to put everything from the software,

hardware, materials, resources and application that the developer used while doing and

developing this website and mobile applications. It is also important to put the possible

errors that might be encounter while using the develop website and mobile applications.

The success of the whole project depends on the availability of resources. One of

the most important resources needed in this project is the talent of the developer in

debugging the codes and using very well the available application in developing the

website and the mobile applications. Internet connection is also important and has a big

part to the success of a project, without it the design, downloadable software’s, updating

the websites and mobile app will be impossible without the help of this connection. One

of the important things also to make this project successful is a good condition laptop or

personal computers that able to hold and to read software that are needed in a project.

The developer recommends for the future developer to enhance the mobile

applications and website through putting messenger, password and can be used and

update even in an offline mode.

4.2.3.1 Compatibility Checking

Compatibility checking is a type of software testing used to ensure compatibility

of the system/application/website built with various objects such as other web browsers.

Opera Mini

Opera Mini was derived from the Opera web browser for personal computers,

which has been publicly available since 1996. Opera Mini was originally intended for use

on mobile phones not capable of running a conventional Web browser. The functionality

of Opera Mini mode is somewhat different from that of a conventional Web browser,

with the amount of data which has to be transferred much reduced, but with some loss to

functionality. Opera Mini fetches all content through a proxy server and reformats web

pages into a format more suitable for small screens. Opera Mini opens one connection to

the proxy servers, which it keeps open and re-uses as required. This improves transfer

speed and enables the servers to quickly synchronize changes to bookmarks stored in

Opera Link (“1mobile.com”, 2010).

Mozilla Firefox

Firefox is a web browser, and is Mozilla's flagship software product. It is

available in both desktop and mobile versions. Firefox uses the Gecko layout engine to

render web pages, which implements current and anticipated web standards. Firefox

Mobile (codenamed Fennec) is the build of the Mozilla Firefox web browser for devices

such as smartphones and tablet computers.

 Firefox Mobile uses the same Gecko layout engine as Mozilla Firefox

(“https://support.mozilla.org”, 2012).

Google Chrome

Google Chrome is a freeware web browser developed by Google. Google

Chrome is also the main component of Chrome OS, where it serves as a platform for

running web apps. Chrome allows users to synchronize their bookmarks, history, and

settings across all devices with the browser installed by sending and receiving data

through a chosen Google Account, which in turn updates all signed-in instances of

Chrome. This can be authenticated either through Google credentials, or a sync

passphrase. A multi-process architecture is implemented in Chrome where, by default, a

separate process is allocated to each site instance and plugin. Chrome includes a process

management utility called Task Manager which lets users see what sites and plugins are

using the most memory, downloading the most bytes and overusing the CPU and

provides the ability to terminate them

(“google.com/chrome/browser/privacy/index.html”, 2014).

4.2.3.2 Relevance of the Technologies

Front-End

Front-end web development, also known as client-side development is the

practice of producing HTML, CSS and JavaScript for a website or Web Application so

that a user can see and interact with them directly. The challenge associated with front

end development is that the tools and techniques used to create the front end of a website
change constantly and so the developer needs to constantly be aware of how the field is

developing. Performance goals are chiefly concerned with render time, manipulating the

HTML, CSS, and JavaScript to ensure that the site opens up quickly.

Browsers

The primary purpose of a web browser is to bring information resources to the

user ("retrieval" or "fetching"), allowing them to view the information ("display",

"rendering"), and then access other information ("navigation", "following links"). This

process begins when the user inputs a Uniform Resource Locator (URL), into the

browser. The prefix of the URL, the Uniform Resource Identifier or URI, determines how

the URL will be interpreted. The most commonly used kind of URI starts with http: and

identifies a resource to be retrieved over the Hypertext Transfer Protocol (HTTP). Many

browsers also support a variety of other prefixes, such as https: for HTTPS, ftp: for the

File Transfer Protocol, and file: for local files. Prefixes that the web browser cannot

directly handle are often handed off to another application entirely.

In the case of http, https, file, and others, once the resource has been retrieved the

web browser will display it. HTML and associated content (image files, formatting

information such as CSS, etc.) is passed to the browser's layout engine to be transformed

from markup to an interactive document, a process known as "rendering". Aside from

HTML, web browsers can generally display any kind of content that can be part of a web

page. Most browsers can display images, audio, video, and XML files, and often have

plug-ins to support Flash applications and Java applets. Upon encountering a file of an
unsupported type or a file that is set up to be downloaded rather than displayed, the

browser prompts the user to save the file to disk.

Information resources may contain hyperlinks to other information resources.

Each link contains the URI of a resource to go to. When a link is clicked, the browser

navigates to the resource indicated by the link's target URI, and the process of bringing

content to the user begins again (“icommunicationsandmarketing.com”, 2015).

HTML

Hypertext Markup Language (HTML) is the standard markup language for

creating web pages and web applications. With Cascading Style Sheets (CSS) and

JavaScript it forms a triad of cornerstone technologies for the World Wide Web. Web

browsers receive HTML documents from a webserver or from local storage and render

them into multimedia web pages. HTML describes the structure of a web page

semantically and originally included cues for the appearance of the document (“w3.org”,

2012).

CSS

CSS lets authors move much of that information to another file, the style sheet,

resulting in considerably simpler HTML. CSS is designed primarily to enable the

separation of document content from document presentation, including aspects such as

the layout, colors, and fonts. This separation can improve content accessibility, provide

more flexibility and control in the specification of presentation characteristics, enable

multiple HTML pages to share formatting by specifying the relevant CSS in a

separate .css file, and reduce complexity and repetition in the structural content

(“scribd.com”, 2009).

Back-End

The Back end is comprised of your server and database. It’s the place where

functions, methods, and data manipulation happen that you don’t want the clients to see.

MySQL

MySQL, pronounced either "My S-Q-L" or "My Sequel," is an open-source

relational database management system. It is based on the structure query language

(SQL), which is used for adding, removing, and modifying information in the database.

Standard SQL commands, such as ADD, DROP, INSERT, and UPDATE can be used

with MySQL.

Moreover, MySQL can be used for a variety of applications but is most found on

Web servers. A website that uses MySQL may include Web pages that access

information from a database. These pages are often referred to as "dynamic," meaning the

content of each page is generated from a database as the page loads. Websites that use

dynamic Web pages are often referred to as database-driven websites (“techterms.com”,

2013).
4.2.4 Schedule Feasibility

4.2.4.1 Gantt Chart

See Appendix B.

4.2.5 Economic Feasibility

4.2.5.1 Cost and Benefit Analysis

Cost/Benefit Analysis provides adequate cost and benefit information. This

technique was conducted to evaluate the estimate of the possible costs for the

development of the website. There are two tables representing Development and

Operational as shown below:

Total Cost
D Proponent ₱ 15,000.00
E incentives
V
E Equipment
L Laptop (Dell) ₱ 35,000.00
O Cellular
P Phone (SamsungA10S) ₱ 8 ,000.00
M
C E Internet connection
O N (PLDT Fiber) ₱ 3,000.00
S T TOTAL ₱ 61,000.00
T O Equipment
P Laptop (Dell) ₱ 35,000.00
B E Cellular
E R Phone (Samsung A10S) ₱ 8,000.00
N A
E T Internet connection
F I (PLDT Fiber) ₱ 3,000.00
 I O TOTAL ₱ 46,000.00
T N ₱ 107,000.00
A
L
Provide information
Disaster, Awareness, Preparedness, Alertness, Transfer/Rescue
One way of easily transmitting and receiving information.
Table 1: Development and operational cost.

DEVELOPMENT COST- The development costs are those spent during the development

of the system and application.

OPERATIONAL COST- The operational costs are that possible cost that will spend after

the implementation of the system and application.

Intangible Benefit

This website can provide useful information about the Municipal Disaster Risk

Reduction and Management Office of Taytay, Palawan. It can specifically share

information about calamities like floods and landslide that might happen in Taytay.

Also, this website also has a mobile app that can use offline for disaster awareness

and preparedness but during offline mode the information will remain where the signal

was available. The application is downloadable and can be accessed by everyone.

In connection with the benefits of this Website and mobile application for the

company or groups that want to avail or to use this settings is good in profit, by

coordinating to the market for example Play store and other market store that offering

different mobile application. For every download there is a certain amount that the

market will paid the owner of this application the amount will be depend to the

agreement between the two companies (the seller/owner and the buyer/producer). Aside
from the profit from the download the buyer of this website/application can also have

profit by selling this website/application. This application was made for MDRRMO-

TAYTAY, PALAWAN but the setting of this website and mobile application is

applicable also for other website that want to have mobile application too, the only

changes will be the name, menu and other categories that needed for the project, but the

settings will remain.

Tangible Benefit

Since the mobile app can be installed to any android devices, you can use the

service anywhere you want as long you have your gadget and internet connection for

website.

4.2.6 Requirements Modeling

The Requirements Modelling describes the input, process, output, performance

and control of the website.

4.2.6.1 Input/Process/Output

Figure 8: DAPAT Website IPO

Figure 9: DAPAT Mobile App IPO

4.2.6.2 Performance

The website and mobile application are design to operate anytime the users wants

to access the system. The developer made a design for everyone that can be easily use or

a friendly user. The system will depend on each performance to the speed of the internet

connection.

4.2.6.3 Control

The domain name must be type correctly of the user to access the website. The

mobile app must be downloaded and making sure that the icon will show in user’s

cellular phone. The developer has the only right to update, edit and upload every

information that will show to the user.

4.2.7 Design

4.2.7.1 Output and User-Interface Design

4.2.7.1.1 DAPAT Mobile App

Figure 10: DAPAT mobile app home interface

The figure above shows the home interface, in these page shows the application

on its off-line mode. The user can explore the application even without internet access,

but the information is limited.

 Figure 11: DAPAT mobile app menu

The figure above shows the menu (Navigation Drawer) for the users to choose.

When the user clicks, any button shows to the menu the user will navigate to the specific

chosen menu.
Figure 12: (L-R) Natural and Awareness screens

The figure above shows the Natural Disaster and the Awareness. In these pages

we will see other disasters. And we can know animals that can predict disasters.
Figure 13: (L-R) Alertness and Taytay, Palawan screens

The figure above shows the Alertness and Taytay, Palawan. In these pages, it

shows what should be done during disasters. In Taytay, Palawan we can see where the

location and places is.

4.2.7.1.2 DAPAT Website

Figure 14: DAPAT website home page

Figure 15 DAPAT website online news articles

 Figure 16: DAPAT website online news videos

The figures above show the DAPAT website, where the online news can also be

found in home interface.

Figure 17: DAPAT website showing the navigation menu

The image above shows the DAPAT Website, on its right side the user can access

its navigation drawer whereas the user can choose different menu.
4.2.7.2 Network Model

A network model is a website model that is designed as a flexible approach to

representing objects and their relationships.

Figure 18: DAPAT network model

4.2.7.3 Network Topology

Figure 19: DAPAT network topology

 A network topology is the layout pattern interconnections of the various elements

(links, nodes, and etc.) of a computer. This figure illustrates the relationships among

computer with internet connection accessing the website.

4.2.7.4 Security

Security is very important in a system especially when it is web-based. Computer

security is critical in almost any technology-driven industry which operates on website

and computer system also android cellular phone. The objective of computer security

includes protection of information and property from Plagiarism, copyright issues and

hacking, while allowing the information and property to remain accessible and productive

to its intended users.

4.2.8 Development

4.2.8.1 Software Specification

The following list of software will be use for the development of the application:

Software Description and Use

App Inventor App Inventor lets you develop applications for Android
phones using a web browser and either a connected phone
or emulator. The App Inventor servers store your work and
help you keep track of your projects.
(http://appinventor.mit.edu)
Sublime text Version 4.0 Sublime Text is a proprietary cross-platform source code
editor with a Python application programming
interface (API).
(https://en.wikipedia.org/wiki/Sublime_Text)
Dreamweaver CC 2018 Adobe Dreamweaver CC is a web design and
development application that combines a visual design
surface known as Live View and a code editor with
standard features such as syntax highlighting, code
completion, and code collapsing as well as more
sophisticated features such as real-time syntax checking
 and code.
(https://en.wikipedia.org/wiki/Adobe_Dreamweaver)
HTML5 HTML5 is the latest version of Hypertext Markup
Language, the code that describes web pages. It's actually
three kinds of code: HTML, which provides the structure;
Cascading Style Sheets (CSS), which take care of
presentation; and JavaScript, which makes things happen.
(http://www.techradar.com/)

A web browser, or simply "browser," is

Web Browsers an application used to access and view websites. Common
web browsers include Microsoft Internet Explorer, Google
Chrome, Mozilla Firefox, and Apple Safari.
(https://techterms.com/)
.

4.2.8.2 Hardware Specification

The hardware specification needed in the design and development of

www.dapat_taytaypalawanph.com: A Disaster Reduction Website of Taytay, Palawan,

Philippines.

Description
Computer/Laptop
Smartphones
Table 2: Tablets
Software specifications

Table 3: Hardware specification

4.2.8.3 Program Specification

The proponent develops the website and mobile app using Hypertext Mark-up

Language (HTML5) run by the computers or laptops even smart phones to access

websites support by internet connection and browser applications.

4.2.8.4 Programming Environment

Front-End

The Web Browser is the Front-End on developing website. The purpose of this

Web Browser is to display the interface or the web page of the website to the user.

Back-End

The back-end of the website consists of programming language that will handle

the database, i.e. MySQL. With this, it will also where the managing and maintaining of

the data takes place.

4.2.8.5 Deployment Diagram

Figure 20: DAPAT deployment diagram

4.2.9 Testing

4.2.9.1 Unit Testing

Unit testing was conducted to the user it can be identify the feedback on the

propose website for better revision and what are the users expected output versus the

developer’s expected output.

4.2.9.2 Integration Testing

Integration testing was conducted to ensure that the functionality of the website

for the Municipal Disaster Risk Reduction Management Office Taytay Palawan
supported by internet connection will achieve if it is working properly and accessing it

correctly according to specification and expected output.

4.2.9.3 System Testing

System testing was used to evaluate the system’s positivity with its listed

requirements and to test if the website collected with the necessary quality.

4.2.9.4 Performance Testing

Performance testing is type of testing perform to determine the performance of

system to major the measure, validate or verify quality attributes of the system like

responsiveness, speed, scalability, stability under variety of load conditions. The system

is tested under a mixture of load conditions and check the time required responding by

the system under varying workloads. Software performance testing involves the testing of

application under test to ensure that application is working as expected under variety of

load conditions. The goal of performance testing is not only find the bugs in the system

but also eliminate the performance bottlenecks from the system.

4.2.9.5 Compatibility Testing

Compatibility testing was used to ensure compatibility of the application, website

built with various other objects such as other web browser, hardware platforms, and

operating system. This type of testing help finds out how will a system performs in an

environment that includes network, operating system and other software

4.2.9.6 Acceptance Testing

Acceptance testing was used to ensure that the system meets the requirements. It

will also guarantee if the system is completed and performed well.

 Chapter V – IMPLEMENTATION PHASE

The proponent will discuss in this chapter the maintenance of the mobile

application and the website, also the proponent will tackle the implementation of a

website and mobile application.

In this chapter the proponent will prove that the objectives and goals of the project

are successfully met.

5.1 Program Testing

After a long period of making the mobile application and website, the proponent I

successfully of made an informative website and a helpful mobile application. The

prototype of a project was successfully uploaded to online as free and the mobile

application to the website.

Based on initial survey, the proponent concluded that the website and mobile

application was found informative and helpful.

5.2 Security and Backup Plans

Anticipating for a failure is not bad to be ready with the solution in the future. A

good set of backups is a good reserve as alternatives for anticipating the failure. If anyone

or a strong virus tries to destroy the website and mobile application, it is not a big

problem at all because of an anticipating this problem already, the website and mobile

application can be restored easily by getting the files from backups.

 Implementation Specification Require (R)
Database Back up R
Web and Website and Mobile Application Files Back up R
Mobile Malware Monitoring and cleaning (as needed) R
Application Hacker Prevention Maintenance R
Developer Virus scanning R
Table 4: Security and backups checklist

5.3 Maintenance Plan

The DAPAT application will have a weekly and monthly schedule of maintaining

the efficiency of the services that the application provides to the users. Generally, the

application will update regularly especially when it comes to forecasting weather.

5.4 User Testing

The DAPAT application provide a help section that help user navigate and learn

to use the application easily. In addition, it will be tested to be use by different type of

user especially by the MDRRMO that will manage the updating of content.
 SUMMARY

The office of Municipal Disaster Risk Reduction Management Office

(MDRRMO) located in Culanga, Poblacion, Taytay, Palawan, deserves to have a reliable

and functional website to easily provide information to every Taytayanos who are the

recipient of this study to be sensitive enough to their environment. People deserve to have

a reliable and functional website because it is an important tool for communication and

access to information in today's digital age. A website serves as a platform for individuals

and organizations to share information, sell products and services, and connect with

others.

Having a website that is easy to use, accessible, and provides accurate information

is critical for both personal and business purposes. It enables people to effectively

communicate their message and reach their target audience, as well as access the

information they need in a convenient and efficient manner. Additionally, having a

functional and reliable website is a sign of credibility and professionalism, and can help

build trust with customers and clients.

During times of disasters and calamities, the DAPAT application plays a crucial

and vital role in various way. It can provide real-time information on the ongoing

situation, offer communication tools for affected individuals, assist on coordinating

rescue efforts, assistance, and provide emergency alerts. This application can enhance

preparedness, response, and recovery efforts by enabling quick dissemination of

information and facilitating efficient coordination among authorities and individuals.

 Therefore, it is important for individuals and organizations to invest in creating

and maintaining a reliable and functional website to ensure they can effectively reach and

engage with their audience.

 CONCLUSIONS

The proponents concluded that the project entitled “D.A.P.A.T. (Disaster

Awareness, Preparedness, Alertness, And Transfer) Mobile Apps” will be a great help

and an eye opener to possibilities that disasters and calamities are part of our lives as one

of the growing communities in this 21st century world. In conclusion, a mobile app for a

calamity detector can be a valuable tool for individuals and communities. The app can

provide real-time information about natural disasters and other emergencies, allowing

people to stay informed and take appropriate action to protect themselves and their

families. By providing up-to-date information about the location and severity of disasters,

the app can also help reduce panic and confusion during a crisis.

Moreover, a mobile app for a calamity detector can also serve as an important

source of information for first responders, allowing them to quickly assess the situation

and allocate resources effectively. Additionally, the app can provide alerts and

notifications to users in affected areas, helping them stay informed and take necessary

precautions. However, it's important to note that the accuracy and reliability of the

information provided by the app will be critical to its success. The app should be built

and maintained by reputable organizations with experience in disaster management and

should use reliable sources of information to ensure that the information provided is up-

to-date and accurate.

In summary, a mobile app for a calamity detector has the potential to be a

valuable tool for disaster preparedness and response, but it is important to ensure that it is
built and maintained to the highest standards to provide reliable and accurate information

during a crisis.
 RECOMMENDATIONS

The proponent is strongly recommended to the office of MDRRMO Taytay to

adapt this website and mobile application. Thus, the website and mobile apps were

designed and patterned to their work; therefore, it will be easy to Taytayanos to access for

them to get information. Here are some recommendations for future researchers who

want to improve the mobile app or website for detecting calamities:

1. Utilize advanced technologies: Future researchers can consider incorporating

new technologies such as machine learning, artificial intelligence, and data

analytics to improve the accuracy and reliability of the information provided

by the app.

2. Incorporate multiple sources of information: To provide a more

comprehensive view of a disaster situation, future researchers can consider

incorporating multiple sources of information, such as satellite imagery, news

reports, social media, and other data sources.

3. User-centered design: Future researchers should focus on user-centered design

principles to ensure the app is intuitive, easy to use, and accessible to a wide

range of users, including those with disabilities.

4. Collaborate with disaster management organizations: Future researchers can

benefit from collaborating with disaster management organizations to ensure

the app is designed to meet the needs of first responders and other

stakeholders in the disaster response community.

5. Integration with other systems: Future researchers can consider integrating the

app with other systems, such as early warning systems, to provide a more
 comprehensive picture of a disaster situation and to help reduce response

times.

6. Robust testing and evaluation: It is important for future researchers to conduct

robust testing and evaluation of the app to ensure it is reliable and effective in

real-world scenarios.

7. Continuous improvement: Finally, future researchers should strive for

continuous improvement of the app, incorporating user feedback and the latest

advancements in disaster management technology.

In conclusion, there are many areas in which future researchers can work to

improve the mobile app or website for detecting calamities. By focusing on advanced

technologies, user-centered design, and collaboration with disaster management

organizations, researchers can help create a more effective and reliable tool for disaster

response and preparedness.

 Bibliography

Published References

[1] Miriam Palma Defensor Santiago, Harvard University. (June 15, 1945 – September
29, 2016). "Miriam Webster." Retrieved from
https://en.wikipedia.org/wiki/Miriam_Defensor_Santiago

[2] Father Leo James English, C.Ss.R. (August 1907 – 1997). "English–Tagalog
Dictionary." Retrieved from https://en.wikipedia.org/wiki/Leo_James_English

[3] Mike Huck, Red7System, CEO. (December 2013). Retrieved from

https://www.red7systems.com/about-us/

Unpublished References:

[4] Dw.com. (September 2013). "Philippines: A Country Prone to Natural Disasters."

Retrieved from www.dw.com/en/Philippines-a-country-prone-to-natural-disasters/

[5] UNISDR. (October 2000). "What is DRR?" Retrieved from

https://www.unisdr.org/who-we-are/what-is-drr

[6] MDRRMO – Taytay, Palawan. (January 1, 2010). Retrieved from

https://www.facebook.com/MDRRMO-Taytay-Palawan-662923673815714/

[7] Department of Education (DepEd) Philippines. "Disaster Risk Reduction Resource."

Retrieved from http://www.deped.gov.ph/sites/default/files/Disaster%20Risk%20Reduction
%20Resource
Appendices
 Appendix

A. Evaluation Tools
Disaster, Awareness, Preparedness, Alertness, and Transfer in selected Barangay of
the Municipality of Taytay.

Questionnaire:

 When this office started here in taytay?

 It started in January 1, 2010 but it was early 2012 when the office
officially operated.

 Is this office nationwide?

 Yes. It is nationwide, but have different names, depend on the name of a
place.

 Who headed this office?

 It was headed by Mrs. Eleanor N. Enopia

 What this department do to our municipality?

 The office is responsible for giving warnings, information and advice
regarding the disaster, monitoring the situation of affected place, and
giving seminars to different barangay of taytay Palawan regarding of first
aid and drill preparing for the possible calamities.

 What is the biggest disaster encountered of this office?

 Super typhoon Yolanda and Queenie.

 What will this office do during disaster?

 Monitoring the situation and rescuing to those affected.

 How do we connect to your office?

 We have fliers, and we have contact numbers there.

 Are you open to accept ideas, to have this office a kind of application that might
help taytayanos to connect to your office?
We appreciate it so much, and it helps a lot taytayanos to be more aware to their
environments.
 Appendix

B. Other Relevant Documents

 Appendix

C. Gantt Chart
 Appendix

D. Relevant Source Code

 Index.html
<! DOCTYPE HTML>
<!--
Hello by TEMPLATED
templated.co @templatedco
Released for free under the Creative Commons Attribution 3.0 license
(templated.co/license)
-->
<html>
<head>
<title>DAPAT Website</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body>

<!-- Header -->

<header id="header" class="alt">
<div class="logo"><a href="index.html">D.A.P.A.T
Online News</a></div>
<a href="#menu">Menu</a>
</header>

<!-- Nav -->

<nav id="menu">
<ul class="links">
<li><a href="index.html">Home</a></li>
<li><a href="pages/radar.html">Radar</a></li>
<li><a href="about.html">About</a></li>
<li><a href="hotlines.html">Emergency
Hotlines</a></li>
<li><a href="organization.html">MDRRMO
Organization</a></li>
<li><a href="developer.html">DAPAT
Developer</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="pages/dapat.html">Dapat</a></li>
</ul>
</nav>

<!-- Banner -->

<section class="banner full">
<article>
<img src="images/1.png" alt="" />
<div class="inner">
 <header> </header>
</div>
</article>
<article>
<img src="images/22.png" alt="" />
<div class="inner">
<header> </header>
</div>
</article>
<article>
<img src="images/3.png" alt="" />
<div class="inner">
<header> </header>
</div>
</article>
<article>
<img src="images/4.png" alt="" />
<div class="inner">
<header> </header>
</div>
</article>
<article>
<img src="images/5.png" alt="" />
<div class="inner">
<header> </header>
</div>
</article>
</section>

<!-- One -->

<section id="one" class="wrapper style2">
<div class="inner">
<div class="grid-style">

<div>
<div class="box">
<div class="image fit">
<img
src="images/news/Untitled-2.jpg" alt="" />
</div>
<div class="content">
<header class="align-
center">
<h2>‘Yolanda’
survivors in Palo get new temporary houses</h2>
</header>
 <p> THESE Tzu Chi
houses are better and more comfortable than the bunkhouses where they stayed for more
than a year, say Supertyphoon...</p>
<footer class="align-
center"><a href="Iframe_news_pages/yolanda.html" class="button alt">red
More</a></footer>
</div>
</div>
</div>

<div>
<div class="box">
<div class="image fit">
<img
src="images/news/22.jpg" alt="" />
</div>
<div class="content">
<header class="align-
center">
<h2>Bohol plans for
disaster-resilient houses</h2>
</header>
<p> A
FOOTBRIDGE makes it possible for people to cross Abatan Bridge in Maribojoc town,
Bohol province, after a 7.2-magnitude earthquake hit the province. LITO
TECSON/CEBU DAILY NEWSTAGBILARAN CITY—Two nongovernment
organizations </p>
<footer class="align-
center"><a href="Iframe_news_pages/bohol.html" class="button alt">read
More</a></footer>
</div>
</div>
</div>

<div>
<div class="box">
<div class="image fit">
<img
src="images/news/d.jpg" alt="" />
</div>
<div class="content">
<header class="align-
center">
<h2>2,000 families
flee as floods, landslides hit S. Mindanao</h2>
</header>
<p> TAGUM CITY –
One person was hurt and more than 2,000 families have fled to safer grounds due to
landslides and flooding spawned by a low pressure area in several areas in southern
Mindanao, authorities on Sunday said.</p>
<footer class="align-
center"><a href="Iframe_news_pages/mindanao.html" class="button alt">Read
More</a></footer>
</div>
</div>
</div>

<div>
<div class="box">
<div class="image fit">
<img
src="images/news/benguet.jpg" alt="" />
</div>
<div class="content">
<header class="align-
center">
<h2>2 more bodies
retrieved from Benguet landslide</h2>
</header>
<p> LA TRINIDAD,
Benguet—The remains of two miners were recovered by a team of volunteers digging
through mud and rocks in a landslide-hit area in Mankayan, Benguet province, on
Monday, police said. The bodies of Rocky Mangrubang, 19, a native of Aurora
province...</p>
<footer class="align-
center"><a href="Iframe_news_pages/benguet.html" class="button alt">read
More</a></footer>
</div>

</div>
</div>

</div>
</div>
</section>

<!-- Two -->

<section id="two" class="wrapper style3">
 <div class="inner">
<header class="align-center">
<p> Disaster, awareness, preparedness,
alertness ,transfer </p>
<h2>D.A.P.A.T</h2>
</header>
</div>
</section>

<!-- Three -->

<section id="three" class="wrapper style2">
<div class="inner">
<header class="align-center">
<h2><strong>VIDEOS</strong></h2>
</header>
<div class="gallery">
<div>
<div class="video fit">
<h5>Bagyong "ODEP"
Update</h5>
<p><em> LA TRINIDAD, Benguet
—The remains of two miners were recovered by a team of volunteers digging through
mud and rocks in a landslide-hit area in Mankayan, Benguet province, on Monday, police
said. The bodies of Rocky Mangrubang, 19, a native of Aurora province...</em></p>
<video autoplay controls muted
height="300" width="600" class="fit box" >
<source src="videos/BT Weather update as of 1141 a.m. (Oct. 12
2017).mp4" type="video/mp4">
<source src="videos/BT Weather update as of 1141 a.m. (Oct. 12
2017).mp4" type="video/mp4">
</video>

</div>
</div>
<div>
<div class="video fit">
<h5>Bagyong "ODEP" ngayung
omaga</h5>
<p><em> LA TRINIDAD, Benguet
—The remains of two miners were recovered by a team of volunteers digging through
mud and rocks in a landslide-hit area in Mankayan, Benguet province, on Monday, police
said. The bodies of Rocky Mangrubang, 19, a native of Aurora province...</em></p>
<video autoplay controls muted
height="300" width="600" class="box fit" >
<source src="videos/BT Weather update as of 1149 a.m. (Oct. 13
2017).mp4" type="video/mp4">
 <source src="videos/BT Weather update as of 1149 a.m. (Oct. 13
2017).mp4" type="video/mp4">
</video>

</div>
</div>
<div>
<div class="video fit">
<h5>Bagyong "ODEP"
bumagal</h5>
<p><em> LA TRINIDAD, Benguet
—The remains of two miners were recovered by a team of volunteers digging through
mud and rocks in a landslide-hit area in Mankayan, Benguet province, on Monday, police
said. The bodies of Rocky Mangrubang, 19, a native of Aurora province...</em></p>
<video autoplay controls muted
height="300" width="600" class="fit box" >
<source src="videos/BT Weather update as of 1205 p.m. (October 14
2017).mp4" type="video/mp4">
<source src="videos/BT Weather update as of 1205 p.m. (October 14
2017).mp4" type="video/mp4">
</video>

</div>
</div>
<div>
<div class="video fit">
<h5>Dalawang bagyo "MARING"
at "LANY"</h5>
<p><em> LA TRINIDAD, Benguet
—The remains of two miners were recovered by a team of volunteers digging through
mud and rocks in a landslide-hit area in Mankayan, Benguet province, on Monday, police
said. The bodies of Rocky Mangrubang, 19, a native of Aurora province...</em></p>
<video autoplay controls muted
height="300" width="600" class="fit box" >
<source src="videos/QRT Weather update as of 559 p.m. (September
11 2017).mp4" type="video/mp4">
<source src="videos/QRT Weather update as of 559 p.m. (September
11 2017).mp4" type="video/mp4">
</video>

</div>
</div>
</div>
</div>
</section>
 <!-- Footer -->
<footer id="footer">
<div class="container">
<ul class="icons">
<li><a href="#" class="icon fa-
twitter"><span class="label">Twitter</span></a></li>
<li><a href="#" class="icon fa-
facebook"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon fa-
instagram"><span class="label">Instagram</span></a></li>
<li><a href="#" class="icon fa-envelope-
o"><span class="label">Email</span></a></li>
</ul>
</div>
<div class="copyright">&copy; 2017 DAPAT Website. All
rights reserved Designed ny DAPATDeveloper</div>
</footer>

<!-- Scripts -->

<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>

</body>
</html>

About.html

<!DOCTYPE HTML>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>DAPAT Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="assets/css/main.css" rel="stylesheet" />
</head>
<body class="subpage"><!-- Header -->
<header id="header">
<div class="logo"><a href="index.html">DAPAT Online News</a></div>
<a href="#menu">Menu</a></header>
<!-- Nav -->

<nav id="menu">
<ul class="links">
 <li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="hotlines.html">Emergency Hotlines</a></li>
<li><a href="organization.html">MDRRMO Organization</a></li>
<li><a href="developer.html">DAPAT Developer</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="pages/dapat.html">Dapat</a></li>
</ul>
</nav>
<!-- One -->

<section class="wrapper style3" id="One">

<div class="inner">
<header class="align-center">
<p>Disaster, awareness, preparedness, alertness, transfer</p>

<h2>About Us</h2>
</header>
</div>
</section>
<!-- Two -->

<section class="wrapper style2" id="two">

<div class="inner">
<div class="box">
<div class="content">
<header class="align-center">
<p>The&nbsp;<b>National Disaster Risk Reduction &amp; Management
Council</b>&nbsp;(<b>NDRRMC</b>), formerly known as the&nbsp;<b>National
Disaster Coordinating Council</b>&nbsp;(NDCC), is a working group of various
government, non-government, civil sector and private sector organizations of the
Government of the Republic of the Philippines established by Republic Act 10121 of
2010.&nbsp;It is administered by the Office of Civil Defense under the&nbsp;<a
href="https://en.wikipedia.org/wiki/Department_of_National_Defense_(Philippines)"
title="Department of National Defense (Philippines)">Department of National
Defense</a>. The Council is responsible for ensuring the protection and welfare of the
people during&nbsp;<a href="https://en.wikipedia.org/wiki/Disaster"
title="Disaster">disasters</a>&nbsp;or&nbsp;<a
href="https://en.wikipedia.org/wiki/Emergency" title="Emergency">emergencies</a>.
The&nbsp;<b>National Disaster Risk Reduction and Management
Council</b>&nbsp;plans and leads the guiding activities in the field of communication,
warning signals, emergency, transportation, evacuation, rescue, engineering, health and
rehabilitation, public education and auxiliary services such as fire fighting and the police
in the country. The Council utilizes the UN Cluster Approach in disaster
management.&nbsp;It is the country&#39;s focal for the ASEAN Agreement on Disaster
Management and Emergency Response (AADMER) and many other related international
commitments.</p>
</header>
</div>
</div>
</div>
</section>
<!-- Footer -->

<footer id="footer">
<div class="container">
<ul class="icons">
<li><a class="icon fa-twitter" href="#"><span
class="label">Twitter</span></a></li>
<li><a class="icon fa-facebook" href="#"><span
class="label">Facebook</span></a></li>
<li><a class="icon fa-instagram" href="#"><span
class="label">Instagram</span></a></li>
<li><a class="icon fa-envelope-o" href="#"><span
class="label">Email</span></a></li>
</ul>
</div>

<div class="copyright">&copy; 2017 DAPAT Mobile App. All Rights Reserved | Design
by DAPAT Taytay Palawan</div>
</footer>
<!-- Scripts --><script src="assets/js/jquery.min.js"></script><script
src="assets/js/jquery.scrollex.min.js"></script><script
src="assets/js/skel.min.js"></script><script src="assets/js/util.js"></script><script
src="assets/js/main.js"></script></body>
</html>

Contact.html

<!DOCTYPE HTML>
<!--
Hielo by TEMPLATED
templated.co @templatedco
Released for free under the Creative Commons Attribution 3.0 license
(templated.co/license)
-->
<html>
<head>
<title>DAPAT Website</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
 <link rel="stylesheet" href="assets/css/main.css" />
</head>
<body class="subpage">

<!-- Header -->

<header id="header">
<div class="logo"><a href="index.html">DAPAT Online
News</span></a></div>
<a href="#menu">Menu</a>
 Appendix

E. User’s Guide
 Appendix

F. Other Forms
 Appendix

G. Grammarian’s Certificate
 March 29, 2018

G R A M M A R I A N’ S C E R T I F I C A T E

This is to certify that the undersigned has reviewed and went through all the pages

of the Capstone Project (ITP 11/L – technopreneurship) entitled “D.A.P.A.T. (Disaster

Awareness, Preparedness, Alertness and Transfer) Mobile App” as against the set of

structural rules that govern the composition of sentences, phases, and words in the

English language.

Signed:

JOEL M. GOMEZ
Municipal Information Officer
English Grammarian

Conformed:

CHRISMAN JOY B. OLIVERA

Group Leader
 Appendix

H. Curriculum Vitae
PERSONAL INFORMATION

Date of Birth : December 23, 1997

Place of Birth : Paglaum, Taytay, Palawan
Age : 20
Gender : Male
Civil Status : Single
Citizenship : Filipino
Religion : United Pentecostal Church
Dialect : Hiligaynon, Tagalog and English
Father’s Name : Mr. Herman Flores Olivera
Mother’s Name : Mrs. Joy Jayme Baldosano

EDUCATIONAL BACKGROUND
Tertiary Bachelor of Science in Information Technology
Palawan State University – Taytay Campus
Poblacion, Taytay, Palawan
S.Y. 2014 – 2018

Secondary Northern Palawan Christian Institute

Winigit, Paglaum, Taytay, Palawan
S.Y. 2010 – 2014

Elementary Sangley Elementary School

Sangley Point, Cavite City
S.Y. 2004 – 2010