Republic of the Philippines

Region II
Division of Tuguegarao City
CAGAYAN NATIONAL HIGH SCHOOL

SMART WAYSTE: A SMART WEBPAGE FOR PROPER WASTE MANANGEMENT

PRESENTED BY:

AIDAN BENEDICT MALAMUG

LEXI CARMELA BALAUAG
CARMELA AUBREY BERME
STEPHANIE ANGELA LOPEZ
KYLA FERNANDEZ
SOFIA BIANCA VERGARA
FRANCES NINA ACCAD
RENZ JAYDEE DONATO
KATE JIRAH BLAQUERA
TRISHA LOREEN CALIMAG
RHEY DUNDEE SY
REINGHWEL SHOVEL LASAM
PRINCESS MAE VIERNES
KARL ELMO ANDRES
ROSAMIL TELAN
(GRADE 9–JOSEPH GAY-LUSSAC)

PRESENTED TO:
THE SCHOOL-BASED SCIENCE CONGRESS

DATE: SEPTEMBER 24, 2018

1
 ABSTRACT

One of the main problems in the school campus of

Cagayan National High School is the plastic bottles scattered.

Students just ignore the plastic bottles that they see. They

cannot at least pick it up and segregate it properly.

Every break time, students are only absorbed on their

phones so the researchers thought of taking advantage on it so

that their time will not be spent on impractical things.

Instead, they will be helpfulas a student in taking care of the

environment.

The main purpose of the study of the researchers is to

lessen the number of plastic bottles dispersed around the

campus. This will also encourage students utilize their phones

in caring for the environment through our study. Through this

webpage, they can help their parents save money because the

points that they earned can be redeemed at the canteen.

2
 TABLE OF CONTENTS

Title Page ……………………………………………………………………………………….…….…………………… 1

Abstract …………………………………………………………………………………………….….……………………… 2

Table of Contents …………………………………………………….…………………….…………………… 3

CHAPTER I Introduction

1. Background of the Study ……………………………………………………………………… 4

2. Objectives of the Study ……………………………………………………………………… 5
3. Significance of the Study ………………………………………………………………… 5
4. Time and Locale …………………………………………………………………………………………… 6
5. Scope and Limitations …………………………………………………………………………… 6
CHAPTER II Review of Related Literature

1. Webpage ………………………………………………………………………………………………………………… 7
2. Scanner ………………………………………………………………………………………………………………… 7
3. QR Code …………………………………………………………………………………………………….………… 8
4. Programmer ………………………………………………………………………………………………………… 9
5. Segregation ……………………………………………………………………………………………………… 10
CHAPTER III Methodology

1. Materials……………………………………………………………………………………………………………… 11
2. Flow chart for the proposed system ………………………………………… 13
3. Data Collection …………………………………………………………………………………………… 20
4. Installation …………………………………………………………………………………………………… 22
CHAPTER IV Discussion of Findings

1. Table 1 ………………………………………………………………………………………………………………… 23
CHAPTER V

1. Summary ………………………………………………………………………………………………………………… 25
2. Conclusion ………………………………………………………………………………………………………… 25
3. Recommendation ……………………………………………………………………………………………… 26
Bibliography ………………………………………………………………………………………………………………… 27

Acknowledgement ………………………………………………………………………………………………………… 28

3
 CHAPTER I

INTRODUCTION

 BACKGROUND OF THE STUDY

Countless plastic bottles can be found inside our campus

which are collected by the garbage men and janitors. This has

been one of the problems we encounter in our school since then.

When you throw away your plastic drinking bottle, it can sit in

a landfill for hundreds of years, never decomposing. What’s even

worse is that this type of wastes are not segregated properly

and are found scattered everywhere. Segregation was taught by

many clubs and teachers to solve this common problem but only

few students apply this solution to lessen the number of plastic

bottles found inside the campus.

This prevalent problem inspired the researchers to create a

webpage that convinces the students of Cagayan National High

School to dispose plastic bottles properly and to control the

number of plastic bottles. The researchers, took advantage of

students always having their phones by their side and having

access to internet connection especially during their vacant

time. Instead of students playing with their mobile phones, in

simply picking up bottles they can contribute to our school’s

wellness. This webpage is also a great time killer because while

4
you are having your time using this webpage, you are already

helping our school specially our environment. In that manner, we

can lessen plastic bottles in our school. As a student, this

small action can make a great impact in our school and also to

our environment.

 OBJECTIVES OF THE STUDY

This study generally aims to develop a webpage that minimizes

the number of plastic bottles in the school.

Specifically, aims to:

1. Determine the usefulness of the webpage to the students of

Cagayan National High School and to others.

 SIGNIFICANCE OF THE STUDY

The study aims to create a webpage that helps minimizing

garbage specifically plastic bottles in the school. This study

is beneficiary to our school and also to our environment.

5
  TIME AND LOCALE

We started to plan and create a webpage which is to be

localized only inside the school. The study was conducted at the

SMART WAYSTE of the Province of Cagayan, located in Tuguegarao

City, Cagayan.

 SCOPE AND LIMITATIONS

The study mainly focused on the minimization of garbage,

specifically plastic bottles in the school through the use of

this webpage. The study wants to test whether the webpage is

effective for the minimization of the scattered plastic bottles

in the school by introducing it to the students of Cagayan

National High School.

6
 CHAPTER II

REVIEW OF RELATED LITERATURE AND STUDIES

 WEBPAGE

A web page is a document that is suitable for the World

Wide Web and web browsers. A web browser displays a web page on

a monitor or mobile device. The web page usually means what is

visible, but the term may also refer to a computer file, usually

written in HTML or a comparable markup language. Web browsers

coordinate various web resource elements for the written web

page, such as style sheets, scripts, and images, to present the

web page. Typical web pages provide hypertext that includes

a navigation bar or a sidebar menu linking to otherweb pages

via hyperlinks, often referred to as links.

 SCANNER

Scanner is an input device that scans documents such as

photographs and pages of text. When a document is scanned, it is

converted into a digital format. This creates an electronic

version of the document that can be viewed and edited on a

computer. Most scanners are flatbed devices, which means they

have flat scanning surface. Scanners work in conjunction with

computer software programs, which import data from the scanner.

7
Most scanners include basic scanning software that allows the

user to configure, initiate, and import scans. Scanning plug-ins

can also be installed for Adobe Photoshop, a user can create new

images in Photoshop directly from the connected scanner.

 QR CODE

QR code (short for “quick response” code) is a type of

barcode that contains a matrix of dots. It can be scanned using

a QR scanner or a smartphone with built-in camera. Once scanned,

software on the device converts the dots within the code into

numbers or a string of characters.

All QR codes have a square shape and include three squares

outlines in the bottom-left, top-left. And top-right corners.

These square outlines define the orientation of the code. The

dots within the QR code contain format and version information

as well as the content itself. QR code also include a certain

level of error connection, defined as L, M, Q, or H. A low

amount of error connection (H) makes the code easier to scan.

QR codes have two significant benefits over traditional

UPCs – the barcodes commonly used in retail packaging. First,

since QR code are two-dimensional, they can contain

significantly more data than a one-dimensional UPC.

8
  PROGRAMMER

A programmer, developer, dev, coder, or software engineer

is a person who creates computer software. The term computer

programmer can refer to a specialist in one area of computers or

to a generalist who writes code for many kinds of software. One

who practices or professes a formal approach to programming may

also be known as a programmer analyst.

A programmer is an individual that writes/creates computer

software or applications by giving the computer specific

programming instructions. Most programmers have a broad

computing and coding background across multiple programming

languages and platforms, including Structured Query Language

(SQL), Perl, Extensible Mark-up Language (XML), PHP, HTML,C,C++

and Java.

A programmer also may specialize in one or more computing

fields, like database, security or software/firmware/mobile/web

development. These individuals are instrumental to the

development of computer technology and the field of computing.

9
  SEGREGATION

Segregation is important because if the waste is not

separated properly, it all gets mixed up in landfills. The

dangers of this is that they all leak after a period of time,

resulting in leachate or toxic soup at the bottom, which can

contaminate ground water and release explosive methane gas.

Waste Segregation means dividing waste into dry and wet.

Wet waste, typically refers to organic waste usually generated

by eating establishments and are heavy in weight due to

dampness. Waste can also be segregated on basis of biodegradable

or non-biodegradable waste.

10
 CHAPTER III
RESEARCH AND DESIGN METHODOLOGY

This chapter describes the method used to analyze and to

design the website of SMART WAYSTE. It covers the different data

gathering instruments and the method in developing the system.

The researchers used interview method and document analysis

during the planning and data gathering phases of the project.

They also used methodologies in system development that are

appropriate for the type of system and the time requirement for

the project.

The project was actually an off-shoot during the on-the-job

training of the researchers when they were assigned at SMART

WAYSTE Cagayan in May. The Head of SMART WAYSTE requested the

researchers during their OJT to study the agency’s existing

system for report generation and submission and asked them to

give recommendations or proposals.

MATERIALS

11
BOOTSTRAP - Bootstrap is an open source toolkit for developing
with HTML, CSS, and JS. Quickly prototype your ideas or build
your entire app with our Sass variables and mixins, responsive
grid system, extensive prebuilt components, and powerful plugins
built on jQuery

MSLQ DATABASE- MySQL is a freely available open source

Relational Database Management System (RDBMS) that uses
Structured Query Language (SQL). SQL is the most popular
language for adding, accessing and managing content in a
database. It is most noted for its quick processing, proven
reliability, ease and flexibility of use

PHP - PHP is a general-purpose scripting language that is

especially suited to server-side web development, in which case
PHP generally runs on a web server. Any PHP code in a requested
file is executed by the PHP runtime, usually to create dynamic
web page content or dynamic images used on websites or
elsewhere.

XAMPP - a free and open source cross-platform web server

solution stack package developed by Apache Friends,[2]
consisting mainly of the Apache HTTP Server, MariaDB database,
and interpreters for scripts written in the PHP and Perl
programming languages. XAMPP stands for Cross-Platform (X),
Apache (A), MariaDB (M), PHP (P) and Perl (P). - It is a simple,
lightweight Apache distribution that makes it extremely easy for
developers to create a local web server for testing and
deployment purposes.Used to run the web application

BOOTSTRAP FRAMEWORK - is used for the front end of the wed

PHP.It is used for the back end of the system

MYSQL - is used for the data base of system XAMPP.Itis used to

run the web application

12
FLOWCHARTS
Existing System

START

encode/prepares
a communication
or
announcements
Document is sent
Printed Send
Y to recipients
Document Thru
through Courier
(Communication Courier?
or
N
announcements
Personnel send
the END
communication
to recipients

13
REPORT SUBMISSION OF USER

START

USER

Tallies report
A
USER

Encodes Report

Y
Printed Report
Submits the report Report is posted in
Document Verified?
to the ADMIN the Monitoring
(Communication
Board
or
announcements N
Sends back the
A Report to the END
Source for Checking

14
 START

A
Navigate Website
END

Y
N
Login? Click Login

Load User Login Form

Input
Username and
Password
Click Log
me in

User N
Account Display “Invalid
A
Verified? Account”
Password
Y

AMINN
Account Admin Process
Type

USER

User Process

Log-Out

15
FLOWCHART FOR THE PROPOSED SYSTEM
ADMIN PROCESS

START

Click
Dashboard

Load ADMIN
Dashboard

Choose
A
Operation/Action

Operation
END
?

Manage Manage Manage Manage

User Account Add View
Account List Data Data

A A A A

16
MANAGE GENERATE BARCODE
START

Click Generate

Load Barcode Page

Input generated barcode

Click generate N Display

Correct
Input? “Invalid
Entry”
Y
Password
Generate Barcode

END

17
CLIENT USER PROCESS

START

Click Dashboard

Load User
Dashboard

Choose
A
Operation/Action

Operation
END
?

Manage Client

18
Manage History

START

Click Reports

Click message
History

Load Message List

END

Tbl_history

19
 DATA COLLECTION

Data collection is the process of gathering and measuring

information on targeted variables in an established systematic

fashion, which then enables one to answer relevant questions and

evaluate outcomes.

PLANNING

Planning is vital in every Website development and

application development project. Appropriate methodologies and

frameworks are necessary to be planned well.

The plans were based on the analysis of the existing system

which include the policies and processes gathered during the

data gathering phase of the study.

The researchers came up with a work plan for the conduct of

the whole study. The project plan also included the database

design, website structure, system flowcharts and other

conceptual models for the application. These models are

presented in Appendix xxx.

The plans are regularly reviewed and are updated to keep

track of the milestones in the project to meet the schedules.

Iterative design and development was implemented for the

project.

20
 DEVELOPMENT

Prototyping was applied in the project development phase.

This is appropriate due to the limited time for the completion

of the project. The methodology involved development of a

prototype; then presenting or testing the prototype to the users

so that other requirements that were missed could be addressed

in the next prototype.

The researchers used the following in the development of

the Project (a) PHP programming language was used to write

server-side and client-side scripts for the application; (b)

HTML and CSS for the user interfaces or webpages. Bootstrap was

also used for the framework to allow the website to be mobile

responsive and also have a better look and design.

MySQL database management system is also used for the back-

end or database of the system. This is preferred since it is an

open-source DBMS.

21
STEPS ON HOW TO INSTALL THE WEBPAGE IN THE LAPTOP

1.Copy the FILE in C:\xampp\htdocs find the POINTOFSALE FOLDER

system.

2.Paste the file to NEW LAPTOP anywhere in the c:\drive

3.In the pointofsale folder OPEN the software ad install the

XAMPP Server Installer

4. Pen c:\xampp\htdocs

5. Copy the POINTOFSALE FOLDER and PASTE to c:\xampp\htdos

After copying then now let’s import the database in phpmyamin in

using xampp server

1.Open any BROWSER and then type LOCALHOST

2. Click phpmyadmin

3. Click NEW to create a DATABASE and the NAME of NEW DATABASSE

is posdb

4.Click posdb and then click the import so that we can import
the DATABASE that located n the pointofsale\db folder and click
GO to IMPORT

5. NOW IT’S ALL SET

6.OPEN any BROWSER and type LOCALHOST\POINTOFSALE

22
 CHAPTER IV

DISCUSSION OF FINDINGS

This chapter includes the presentation, analysis, and

interpretation of data that have been gathered from different

sections the researchers have surveyed.

CLASS/SECTION 1 2 3 4 5 MEAN SUM

A (15) 0 4 7 2 2 3.0 47
B (31) 0 6 9 12 4 6.2 107
C (26) 0 11 2 5 8 5.2 88
D (12) 0 3 1 1 7 2.4 48
E (35) 0 0 15 6 11 6.4 124

Table 1. The level of satisfactory of the students in the

science section of different grade levels of Cagayan National
High School.

Point Scale Verbal Interpretation

1 1.0 – 2.3 Somewhat

dissatisfied

2 2.4 – 4.3 Neither satisfied

nor dissatisfied

3 4.4 – 6.3 Somewhat satisfied

4 6.4 – 8.5 Satisfied

Very satisfied
5 8.6 – 10.0

23
Formula:
𝑥̅ = ∑𝑤𝑥̅
𝑁

𝑠𝑢𝑚 = 5

Where:
W= Points (5, 4, 3, 2, 1)

X= Number of respondents per weight

N= Number of respondents

24
 CHAPTER V

SUMMARY, CONCLUSION, AND RECOMMENDATION

This Chapter presents the summary, conclusion, and

recommendation on the results of the study.

Summary

Plastic bottles that are not thrown properly inside our

school sums up to one of the problems since then in our campus.

However, this year, our Principal, Noemi O. Obcena Ph.D

implemented the Zero Waste Management to decrease the number of

plastic bottles dispersed in Cagayan National High School.

Despite the fact that the school implanted a program like this,

the students seem to not know the value of these plastic bottles

they just throw away. So the Researchers thought of a way that

the students will find this plastic bottle valuable through

mobile phones.

Conclusion

Based on the data obtained from the study, the following

conclusions were drawn:

25
 The researchers have concluded that the usefulness of the

webpage to the students in CNHS is incredibly helpful in

reducing the plastic bottles dispersed around CNHS Campus. The

researchers found out too that it also help the students to

segregate their plastic bottles properly and it also help the

students to be more eco-friendly.

Recommendations

Based on the results of the study, the following are offered:

 The webpage should not only focus inside the campus of

CNHS.

 The webpage should be developed into an offline app so that

the students will have access even without internet

connection.

 This webpage should be full developed into an application

for easier access.

 Improve system for offline access.

 Widen scope of the trash that can be recognized by the

scanner.

26
 BIBLIOGRAPHY

● https://searchsoftwarequality.techtarget.com/definition/app

licationsearchsoftwarequality.techtarget.com

● https://techterms.com/definition/scannertechterms.com

● https://techterms.com/definition/qr_codetechterms.com

● https://en.m.wikipedia.org/wiki/Programmeren.wikipedia.org

● https://www.techopedia.com/definition/4813/programmer

27
 ACKNOWLEDGEMENT

The researchers would like to express their deepest

gratitude to the following people who helped them in finishing
their investigatory project, in one way or another.

To Almighty God, themain source of their strength,

knowledge, and perseverance throughout this project. The
researchers are so thankful that You have given to them that
help them a lot to achieve their goal in this project.

To their beloved parents, who serve as their

inspiration and giving them full support on finishing the entire
project from the serious planning to the victorious
accomplishments by sustaining their expenses needed for this
project.

To their teacher, Mr.Krisburt Delos Santos, for giving

them suggestions that help them a lot in the improvement of this
study.

To Mr. Michel Trinidad, for helping them in designing

and creating the webpage which is the main focus of their study.
The Researchers will not be able to complete their goal without
knowledge and skills of yours to produce this webpage.

And to each and everyone who showed concern,

consideration, and assistance while making and finishing their
project.

28