Chapter1 4TO PRIT

Republic of the PhilippinesNORTHERN NEGROS STATE COLLEGE OF SCIENCE & TECHNOLOGY

INFORMATION TECHNOLOGY DEPARTMENTOld Sagay, Sagay City, Negros Island Region

(034) 722 4120 / www.nonescost.edu.ph

CHAPTER 1

INTRODUCTION

Science and Technology greatly improved the quality of

life. It raised the standard of living. It makes human life

easier and faster. With the new technology, unlimited data

can be stored in the system.

The current situation for the processing of Data, the

local unit will send data to the region. They have no system

intended for DSWD Sagay City only. DSWD 4P’s Sagay City

monitored the 4p’s beneficiaries through house to house.

They spend money and time to monitor in different barangay’s

of Sagay City.

The proposed Web based 4p’s Monitoring System with DSS

for DSWD Sagay City will help the DSWD 4p’s Personnel to

monitor the 4P’s beneficiaries. With the help of DSS the

system gives another functionality in monitoring the 4P’s

beneficiaries scholars in NONESCOST.




Web based 4P’s monitoring System with DSS for DSWD

Sagay City is proposed for the benefit of the DSWD Sagay

City personnel. This will serve as the monitoring tool. With

the help of DSS it will monitor the 4p’s scholars that are

beneficiaries of the program. Web based 4P’s Monitoring

System with DSS for DSWD Sagay City also interfaced with

database which stored information about the 4p’s scholars

and grantees. The system was made to access the internet for

site.

Objectives of the study

This study aimed to develop a web based 4P’s monitoring

system with DSS for DSWD Sagay City.

Specifically this project aims to:

1. Determine the quality of the developed software based

on:

a. correctness b. reliability




c. efficiency

d. integrity

e. maintainability

f. flexibility

g. testability

h. portability

i. reusability

j. interoperability

k. usability

2. To determine the level of the system acceptability based

on the required application functionality.

3. To determine their needs in terms of:

a. Ease the process of monitoring the 4p’s beneficiaries and

4p’s scholars

b. Completeness of information about the 4p’s beneficiaries

and scholars.




4. To create a website for DSWD 4P’s intended for City of

Sagay.

5. To produce usability of the system for the end user.

Scope and Limitation

This study is intended for the DSWD 4P’s personnel for

monitoring process. This will monitor the 4P’s Scholars of

NONESCOST and 4P’s grantees. This will display the Barangays

of Sagay City as well as the Puroks with the information of

grantees and will display the names of scholars with their

profile and information.

However, this system is for monitoring the 4p’s

grantees and 4p’s scholars of NONESCOST. This system is

limited within Sagay City.

Significance of the study




The study will benefit several areas of the DSWD Sagay

City system such as:

DSWD. First of all, the study will benefit the data or

information of DSWD who handles the system. In addition, the

DSWD can monitor easily the 4P’s Scholar of NONESCOST and

4P’s beneficiaries.

4P’s Scholar. This study will help the DSWD to easily inform

the 4P’s beneficiaries if there is an activity or meeting.

Barangay employee. This study will help assigned personnel

of each barangay to have easy access in monitoring the 4p’s

members and in updating the DSWD office.

Residence. This system is web based therefore easy to view

the whole content of the system.

Researcher. The study will help the researcher to minimize

the work of the DSWD to monitor the 4P’s Scholar and the

grantees of the said program.




ESGP-PA. This study is to help the ESGP-PA to monitor and

get information about the 4p’s scholar of NONESCOST.

Definition of Terms

For better understanding of the discussion of the

study. The following terms are operationally defined.

Web-based -with the use of web based it contains information

about the DSWD 4p’s Sagay City using the World Wide Web.

Using the html, CSS, PHP for the database.

Program- with the use of Program it helps to run the system,

using the JavaScript programming language it is executable

software that runs in a computer. it is similar to a script

but is often much larger in size and does not require a

scripting engine to run. Instead, a program consists of

compiled code that can run directly from the computer

DSS –It gives functionality to the system in terms of

monitoring. With the use of DSS it supports the monitoring




process of 4p’s scholars Grantees studied at NONESCOST. Web

application of monitoring in the 4P’s Grantees.

Website Monitoring – with the use of monitoring will easily

to monitor the 4P’s scholar, the 4P’s grantees and the

process of testing and verifying that end-users can interact

with a website or web application as expected ,to ensure

website uptime, performance, and functionality is as

expected. It can gather extensive data on website

performance.

CHAPTER II




REVIEW of RELATED LITERATURE

This chapter contains the related literature and

studies that may help the researchers in developing the

proposed system.

Monitoring web services quality of service

The study of MH Hasan, J Jaffar and MF Hassan –

Artificial Intelligence review (2014)-Springer. Monitoring

quality of service (QoS) compliant is an important procedure

in web service environment. It determines whether user’s

expectations are met and become the vital factor for them to

decide whether to continue paying the service or not. The

monitoring is performing by checking the actual services

performance against that QoS stated in Service Level

Agreement (SLA). In relation to that, the need for

monitoring vague QoS specifications in SLA has become more

apparent nowadays. These paper reviews the publish

literature on webs services QoS monitoring. A total of 60




selected articles were systematically analyzed. There were

23 of the articles selected through restrictive search

criteria while the other 37 were selected based on

unrestrictive search criteria. The review shows the title

evidence exist on monitoring on vague on QoS specifications

of web services. Providing ability for monitoring QoS that

is specified vaguely is SLA could give new insights and

implication on web services field. This paper concludes with

some recommended future works to construct the theory and

perform the empirical research.(http://link.springer.com)

Synthesis

With the help of these different related literature and

studies about web based monitoring the researchers can

create new ideas in developing the propose system. The study




aims to develop a web based monitoring system based on the

related studies, it serves as guidelines on how to

Develop the best, unique function that help mostly the DSWD

and 4p’s in Sagay City Office.

CHAPTER III

In this chapter we discuss the technicality of the

project which describes the type of project to be developed

and its functionality. It also represents the type of the

site developed of the project.

Technicality of the Project

The proponents have used the web because it supports

the features of the system like AJAX. The data fetched by an

Ajax request is typically formatted in JSON (JavaScript




Object Notation) format. Since this format is natively

understood by Java Script, it can easily transmit structured

data in the web site. When this data received by Ajax, the

JavaScript program, then uses the Document Object Model

(DOM).

Details of Technology to be used

WAMP

Stands for "Windows, Apache, MySQL, and PHP". WAMP is a

variation of LAMP for Windows system and is often installed

as a software bundle (Apache, MySQL, and PHP). It is often

used for web development and internal testing, but may also

be used to serve live websites.

The most important part of the WAMP package is Apache (or

"Apache HTTP Server") which is used to run the web

server within Windows. By running a local Apache web server

http://techterms.com/definition/web_server

http://techterms.com/definition/web_server

http://techterms.com/definition/apache

http://techterms.com/definition/web_development

http://techterms.com/definition/software

http://techterms.com/definition/lamp




on a Windows machine, a web developer can test webpages in

a web browser without publishing them live on the Internet.

WAMP also includes MySQL and PHP, which are two of the most

common technologies used for creating dynamic websites.

MySQL is a high-speed database, while PHP is a scripting

language that can be used to access data from the database.

By installing these two components locally, a developer can

build and test a dynamic website before publishing it to a

public web server.(techterms.com)

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.

http://techterms.com/definition/dynamicwebsite

http://techterms.com/definition/php

http://techterms.com/definition/mysql

http://techterms.com/definition/web_browser

http://techterms.com/definition/webpage




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

commonly 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.

Many database-driven websites that use MySQL also use a Web

scripting language like PHP to access information from the

database. MySQL commands can be incorporated into the PHP

code, allowing part or all of a Web page to be generated

from database information. Because both MySQL and PHP are

both open source (meaning they are free to download and

use), the PHP/MySQL combination has become a popular choice

for database-driven websites. (techterms.com)

HTML




Stands for "Hypertext Markup Language." HTML is the

language used to create webpages. "Hypertext" refers to

the hyperlinks that an HTML page may contain. "Markup

language" refers to the way tags are used to define the page

layout and elements within the page.

The web has gone through many changes over the past few

decades, but HTML has always been the fundamental language

used to develop webpages. Interestingly, while websites have

become more advanced and interactive, HTML has actually

gotten simpler. If you compare the source of an HTML5 page

with a similar page written in HTML 4.01 or XHTML 1.0, the

HTML5 page would probably contain less code. This is because

modern HTML relies on cascading style

sheets or JavaScript to format nearly all the elements

within a page. (techterms.com)

CSS




Stands for "Cascading Style Sheet". 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 could only be defined

in a page's HTML.

CSS helps Web developers create a uniform look across

several pages of a Web site. Instead of defining the style

of each table and each block of text within a page's HTML,

commonly used styles need to be defined only once in a CSS

document. Once the style is defined in cascading style

sheet, it can be used by any page that references the CSS

file. Plus, CSS makes it easy to change styles across

several pages at once. For example, a Web developer may want

to increase the default text size from 10pt to 12pt for

fifty pages of a Web site. If the pages all reference the

same style sheet, the text size only needs to be changed on

the style sheet and all the pages will show the larger text.




While CSS is great for creating text styles, it is

helpful for formatting other aspects of Web page layout as

well. For example, CSS can be used to define the cell

padding of table cells, the style, thickness, and color of a

table's border, and the padding around images or other

objects. CSS gives Web developers more exact control over

how Web pages will look than HTML does. This is why most Web

pages today incorporate cascading style sheets.

(techterms.com)

JavaScript

JavaScript is a programming language commonly used in

web development. It was originally developed by Netscape as

a means to add dynamic and interactive elements to websites.

While JavaScript is influenced by Java, the syntax is more




similar to C and is based on ECMAScript, a scripting

language developed by Sun Microsystems.

JavaScript is a client-side scripting language, which

means the source code is processed by the client's web

browser rather than on the web server. This means

JavaScript functions can run after a webpage has loaded

without communicating with the server. For example, a

JavaScript function may check a web form before it is

submitted to make sure all the required fields have been

filled out. The JavaScript code can produce an error message

before any information is actually transmitted to the

server. (techterms.com)

Ajax

Ajax is a combination of Web development technologies

used for creating dynamic websites. While the term "Ajax" is

not written in all caps like most tech acronyms, the letters

stand for "Asynchronous JavaScript and XML." Therefore,




websites that use Ajax combine JavaScript and XML to display

dynamic content.

The "asynchronous" part of Ajax refers to the way requests

are made to the Web server. When a script sends a request to

the Web server, it may receive data, which can then be

displayed on the Web page. Since these events happen at

slightly different times, they are considered to be

asynchronous. Most Ajax implementations use the XML Http

Request API, which includes a list of server requests that

can be called within JavaScript code. The data is usually

sent back to the browser in an XML format, since it is easy

to parse. However, it is possible for the server to send

data as unformatted plain text as well.

What makes Ajax so powerful is that scripts can run on

the client side, rather than on the server. This means a

JavaScript function can make a request to a server after

a webpage has already finished loading. The data received




from the server can then be displayed on the page without

reloading the other content. If a server-side scripting

language like PHP or ASP was used, the entire page would

need to be reloaded in order for the new content to be

displayed.

Ajax has helped make the Web more dynamic by enabling

webpages to retrieve and load new content without needing to

reload the rest of the page. By using Ajax, Web developers

can create interactive websites that use resources

efficiently and provide visitors with a responsive

interface. (techterms.com)

Notepad++

Notepad++ is a text editor and source code editor for

use with Microsoft Windows. Unlike notepad, the built-in

windows text editor, it supports tabbed editing which allow

working with multiple open file in single window. The

project’s name comes from the C increment operator.




Notepad++ is distributed as free software, at first the

project was noted on SourceForge.net. (wiki.com)

Hardware Development

The proposed system is intended only for the DSWD 4P’s

employee,

Residence and Barangay Employee. The developer wants to use

Desktop computer or Laptop for the development of this

project. It requires a high system capacity to handle the

standard system specification for monitoring system software.

How the Project will work?




This system can assess to monitor the records of the

4P’s Beneficiaries & 4P’s Scholar students of NONESCOST.

The system will disseminate the information of the 4P’s

Beneficiaries & 4P’s Scholar students of NONESCOST, the

system works in a user based system. It shows how the

project work and how the process done in all layers. From

the screen design layer, to web-based layer to persistence

layer or the database layer of the system, the system is

explained in further details.

The system used to view the List of Barangay, List of

Guarantees & information through web-based. It means that

the applications which are the application server of the

window based application and the web hosting server and

database. To disseminate information on the 4P’s

Beneficiaries & 4P’s Scholar students of NONESCOST, data and

information most gather beforehand to record or save in the




database of the system and ready to be viewed by the DSWD

and Barangay Employee.

In order to collect data, the DSWD records of the 4p’s

scholars every day for the attendance to the system after

able to check the attendance from their subject teacher.

One distinct feature of the system that is

automatically will give a noticed for the coming activities

of the DSWD. It also automatically updates the records of

the 4p’s scholar portal whenever there also updates made

from the system and it can see the members of the 4p’s web-

portal the activities.




CHAPTER IV

METHODOLOGY

This Chapter presents system development methodology

used for the development of the software.

Software development life cycle model

The researcher used Rapid Application Development (RAD) for

the system development which includes different stages such

as: Planning and analysis, Development, Design, Testing,

Integration and testing of all software components,

Implementation and Maintenance.

Rapid Application Development-is a software development

methodology that uses minimal planning in favor of rapid

prototyping. A prototype is a working model is functionally

equivalent to a component. (www.tutorialspoint.com)

Stages of Rapid Application Development:

Planning and Analysis

http://www.tutorialspoint.com/




In this phase, the researchers plans and analyze

the different activities to be included for the

development of the system. The researchers prepared the

tool for the study conduct interview, gathered data to

identify the needs of the study. The researchers

analyzed the different problems by the users and the

requirements of the users.

Development

After planning and analyzed, the researcher

identifies the requirements for the system development

such as hardware and software.

System Design

In this phase, the researchers create a screen

layout for the temporary set of the structure of the

system design.




Figure 1.0 RAD Model Approach used for the development of

Web based 4p’s monitoring system with DSS for DSWD Sagay

City.

Environment

DWSD 4P’s office located at Brgy. Poblacion at the back of

Sagay Gym, near at Sagay Plaza.

Figure 2.0 site of DWSD 4P’s office located at Brgy.

Poblacion at the back of Sagay Gym, near at Sagay Plaza




Population of the study

At present, the 4P’s has the population of 7,204 which are

the active member. However, the focus of this study is the

4P’s scholars who are enrolled in Northern Negros State

College of Science and Technology (NONESCOST). There are 234

4P’s scholars who are enrolled in NONESCOST.

Organizational Chart/Profile

Figure 3.0 represents the flow of organizational chart of the

DSWD 4p’s Sagay City




Requirements Specification

This part includes the operational feasibility, technical

feasibility and relevance of technology related to the system

study.

Operational Feasibility

The chart below represents the structure of the system

functionality according to the classification of its

operation.




Figure 4.0 Decomposition chart

Technical Feasibility

This includes hardware, software and other technologies

compatibility and relevance of the technologies for the web

application.

Hardware Compatibility

The following is the list of hardware requirements used for

the compatibility of the web application.

Device Hardware Specification such as: Desktop , Internet

Connection , 4 Gb RAM (higher much better)

Software Compatibility The following is the list of software art

requirements used for the compatibility of the application

such as: MySQL, PHP , JavaScript, HTML, Notepad++, WAM, CSS

Schedule Feasibility




This part represents the schedule of different activities

undertaken featuring system development includes Gantt

chart, Pert Diagram and Gantt table.

Figure 5.0 Gantt chart

Activities Predecessor Days ES EF LS LF SJ

A.Data Gathering NONE 6 0 6 0 6 0

B.Documentation of chapter I-IV

A 1 6 16 22 16 22 0

C.Design B 5 22 27 22 27 0

D.Program coding C 31 27 58 27 58 0




E.Initial testing D 5 58 63 58 63 0

F.Revision ofsystem

E 15 63 78 63 78 0

G.Final testing F 2 78 80 78 80 0

H. User acceptancetesting

G 2 80 82 80 82 0

I.Document ofchapter V

H 5 82 90 82 90 0

Table 1.0 Pert Table




Figure 6.0 Pert Chart

Economic Feasibility

The table 2.0 presented the total estimated cost of the

system take from the total cost of the software, hardware,




maintenance cost and implementation cost of the system. The

following are the cost breakdown.

Software

WBS 45,000.00

Language JavaScript

Database

PHP,MySQL

Hardware

U TP 2 meters 15*2 30.00

Router 1pc. 1*2780 2,780.00

Modem 1pc. 1*4000 4,000.00

RJ45 2pcs. 2*30 60.00

Maintenance Every 10 days 5,000.00

Total 56,870.00

Table 2.0 Development Cost




Benefit of the System

This system will serve as the monitoring tool that help

the DSWD to monitor the 4p’s grantees with its reliable

information with the help of DSS it will also monitor the

student of NONESCOST that is beneficiaries of 4p’s. System

benefits include:

ease to monitor the students

24/7 live supported

Improved reliability – providing that must keep your

client constantly informed about the status of 4p’s

grantees as well as the scholars.




Table 3.0 Cost and Benefits Analysis

Return of Investment (ROI)- it measures the gain or loss

generated on an investment relative to the amount of money

invested (www.investinganswer.com)

http://www.investinganswer.com/




To give the result of return of investment (ROI) the formula

below was used:

ROI = total of cumulative benefit – total of cumulative cost

total cumulative cost

ROI = 1023000 – 797870

797870

ROI = 225130

797870

ROI = 0.2821676 * 100%

ROI = 28.22%

(Note: ROI expressed in percent (%).)

Net Present Value (NPV) (definition)

Net Present Value (NPV) formula to get the result is the sum of

all present value.

NPV = 10011.30




Requirements Modeling

In this part it shows the Input, Process and output.

The Data and process modeling which includes: context

diagram and exploded data flow diagram

Figure 4.0 represents the input-process-output(IPO) model,

or input-process-output pattern, for describing the

structure of an information processing program or other

process.

Task Input Process Output

DSWD

1.Register

Type

fname ,mname ,

lname, age and

Status

System will

inputted to

the database.

Confirmation

of

fname ,mname

,lname, age

and Status.

2.Login Type username

and password.

System will

inputted to

Confirmation

username and




the database. password.

3.View List of

Barangay, List

of grantees and

Information.

System will

view the

Information

and record of

the 4P’s

scholars.

Information

has been saved

to the

database.

4.Update the

4P’s

Beneficiaries

and 4P’s

Scholars of

NONESCOST

Record of the

4P’s

Beneficiaries

and 4P’s

scholars.

System will

update the

record and

Information.

Status has

been saved and

updated.

5.Add new user Type username

and password,

choose category

and location.

System will

add and saved

the record to

the database.

Confirmed new

add user.

RESIDENCE

1.View

List of

information

This system

will view the

Information

has been saved




information to the

database.

BARANGAY

EMPLOYEE

1.Register

Type

fname ,mname ,

lname, age and

Status

System will

inputted to

the database.

Confirmation

of

fname ,mname

,lname, age

and Status.

2.Login Type username

and password.

System will

inputted to

the database.

Confirmation

username and

password.

3.View List of

Barangay, List

of Guarantees

and

Information.

System will

view the

Information

and record of

the 4P’s

attendance.

Information

has been saved

to the

database.

4.Update Record of the

4P’s

Beneficiaries

System will

update the

record and

Status has

been saved and

updated.




and 4P’s

scholars.

Information.

Table 4.0 Input, Output and Process

Context Diagram




Another name for a context diagram is a context level data

flow diagram or a level-0 data flow diagram. Since a context

diagram is a specialized version of data flow diagram. The

context diagram shows the system under consideration as a single

high- level process and then shows the relationship that the

system has with other external entities (system, organization

groups, external data stores, etc).

(www.itbusinessanalysis.blogspot.com)

Figure 7.0 (level 0) Context Diagram

http://www.itbusinessanalysis.blogspot.com/




A data flow diagram (DFD) illustrates how data is processed

by a system in terms of inputs and outputs. As its name

indicates its focus is on the flow of information, where

data comes from, where it goes and how it gets stored.

(http://www.smartdraw.com)




Figure 8.0 (level 1) Data Flow Diagram

DESIGN PHASE

These shows the temporary design on what are the flow of the

system from figure 7.0 to 11.0 shows the design of Web based

4p’s monitoring system with DSS for DSWD Sagay City.




Output and User-Interface Design

Figure 9.0 Login Page

Figure 10.0 Registration Page``




Figure 11.0 Home PageData Design (if applicable)




Figure 11.0 Entity Relationship Diagram

Data Dictionary

tbl_user

Field name Data type Length Descriptionemployee_id Integer 10 employee_id

number of the 4P’s employee

Fname Varchar 30 4P’s employee first name

Mname Varchar 30 4P’s employee middle name

Lname Varchar 30 4P’s employee last name

Address Varchar 30 4P’s employee address

tbl_register

Field name Data type Length DescriptionEmployee_id Integer 10 Employee_id for

the userusername Varchar 30 username for

the userpassword Varchar 30 Password for

the user

tbl_scholar

Field name Data type Length Descriptionstudent_id Integer 10 Student_id

numberFirst name Varchar 30 Scholar




username

Middle name Varchar 30 Scholar middle name

lastname Varchar 30 Scholar last name

Address Varchar 30 Scholar addresscourse_taken Varchar 30 Scholar courses

tbl_bar angay

Field name Data type Length Descriptionbrgy_id Integer 10 Brgy_id numberBrgy_name Varchar 30 List of

brgy.nameName_of_4P’s_member Varchar 30 List of 4P’s

memberName_of_purok Varchar 30 List of purok

tbl_member

Field name Data type

Length Description

num_id Integer 10 Member num_id

First name Varchar 30 Member first name

Middle name Varchar 30 Member mname

Last name Varchar 30 Member lname

Address Varchar30

30 Member address




Date_of_ birth Date 10 Member dateof birth

number_of _children_4P’s_beneficiaries

Varchar 10 Member of children 4P’s beneficiaries

Chapter1 4TO PRIT

Documents

Transcript of Chapter1 4TO PRIT