1

Chapter 1

Introduction

1.1 Background of the study

This web-based clearance application system utilizes a large scale of
sensor networks for a more convenient and faster way of signing students’
clearances via the aid of a website/applet.
This study is a website and an application at the same time. And the
components of this device are the Sensor, which detects the characteristics of
the respondents, the Software, which analyze the information inputted by the
respondent in the website or app and perform an actual comparisons, the
Computer, which reads and store the information. This study is an
informational-type device that helps the respondents to see their data they’d
input in the site or app. This device is such a great advantage in our present
days because our world became more technologized and for the student also to
consume less time and manage to entertain things in distance like signing in
clearance, it only need the teacher or proctor or instructor’s fingerprint or any
biometrics to scan for them to say that the student is already cleared. It is more
applicable because, unlike signatures that can be forged by others, the website
has an anti-forgery alarm through a verification for those people who attempt
to forge their adviser’s or teacher’s biometric.
By using this kind of device, we can lessen the consumable time and
we can manage the schedules properly with no conflict. This device also helps
for the students to do efforts in looking for the teachers to sign their
clearances. We can also help the nature and many trees can grow bigger and
bigger and we can lessen the increasing production of carbon dioxide released
in the atmosphere.
 2

1.2 Statement of the problem

One of the problems that the researchers want to cover is the struggles
being experienced by the students in doing the clearances. The minor
problems are the time consumed and the too much effort that needs to be
exerted by students in looking for the teachers to sign the clearances and also
the paper problems, the papers might lost or misplaced, soak in the water or
being tear or ripped off.

One of the reasons of the lacking of protectors is because of the

massive production of papers that are just being junk aside and forgot. Some
of the examples of this papers are the clearances. Clearances are just set aside
when they are unused but when time passed, the papers will be forgotten or
lost then print out another one or make another paper. It goes vice versa and
resulting a continuous production of papers that are being junked.

1.3 Scope and limitations

This study aims to ease the students struggles in doing and using the
old-fashioned way of clearance system and helps them to lessen the time that
they need to consume and efforts to be exerted in signing the clearances.
This study aims to improve and modernized the way of signing
clearances in an easy way and applicable to everyone.

1.4 Goals and Objectives of the study

This study, the web-based clearance application system, will help the
students and teachers to lessen the time consume and to lessen the efforts on
looking for someone to sign the clearances. And will serve as a substitute for
paper clearances
 3

This study aims to improve the clearance system into easier and faster
way of signing and ease the problems of the students in paper works. It also
aims to help the Mother Nature by lessening the massive cutting of tree
papers. This study will be develop and design base on the following
objectives:
1) To create a student-friendly prototype.
a) Making easy-access software that can be commonly access
through computers and cellphones.

2) To make an applicable website or application.

a) Making website that has a presentable outputs that are good
for learnings and a less-consume data for the applications.
3) To evaluate the device.
a) By testing its capability and durability.

1.5 Significance of the study

This study aims to make the old-fashion way of clearance system into a
new and improvised clearance system with the help of technology. It aims to
make the clearance system to be more convenient and applicable to every
students and teachers who will be using it.
 4

1.6 Conceptual Framework

Fig 1.1 shows how the researchers resolve such problems for teachers,
students, employees, and workers by innovating the biometric scanners and sensors
with a help of computer software.

Through this innovation it will result into a convenient and faster way of
signing paper clearances and it is applicable to the society.

Theories/Problems
Benefactors
 .
Waste Effort
and time  Teachers
 Too much  Students
damage in the  Employees Applied Technology
ozone layer  workers
 Smartphones
due to massive  Computer
production of
 Sensor
carbon dioxide
 Massive
production of
useless papers
 Paper
Problems Web-Based Clearance
Application System

Convenient and faster

way of signing paperless
clearances

Fig 1.1 Conceptual Framework

 5

1.7 Definition of terms

Smartphones. A cellular telephone with an integrated computer and other

features not originally associated with telephones, such as an operating system,
Web browsing and the ability to run software applications. The first smartphone
was IBM's Simon, which was presented as a concept device (rather than a
consumer device) at the 1992 COMDEX computer industry trade show.

Applet. A very small application, especially a utility program performing one or a

few simple functions.

Anti-Forgery. Avoiding an action of forging or producing a copy of a document,

signature, banknote, or work of art.

Biometric. The measurement and analysis of unique physical or behavioral

characteristics (such as fingerprint or voice patterns) especially as a means
of verifying personal identity.

Authentication. A process in which the credentials provided are compared to

those on file in a database of authorized users’ information on a local operating
system or within an authentication server.
 6

Chapter 2

Review of Related Literature

This chapter presents data from cited books and articles, published or
unpublished, that are related to the present research.

2.1 Related Literature

This section states the related literatures that has a significant information and
a logical connection to the present study.

2.1.1 Webpage

A web page or webpage is an online documentation that are mostly written

through HTML and CSS languages that are applicable to in accessing with internet or
other network with the help of any internet browser. A webpage could be accessed by
entering the current URL address of the specific webpage and will contain text and
graphics or hyperlinks to the other webpage or files. The human’s commonly used
and accessed in the internet is also called webpage. The first web page was created at
CERN by Tim Berners-Lee on August 6, 1991. (N. Emberton et al., 2017)

2.1.1.1 PHP

PHP or the Hypertext Preprocessor is a finely-used open source generally for

scripting language purposes that are especially compatible in developing webpage and
that are embedded in the HTML. (M. Achour et. Al, 2017)

2.1.1.2 MySQL

MySQL is an open source relational database management system (RDBMS)

based on Structured Query Language (SQL). MySQL is programmed in any platforms
including the operating systems such as Linux, UNIX, and windows. Although it can
be used in a wide range of applications, MySQL is most often associated with web-
based applications and online publishing and is an important component of an open
source enterprise stack called LAMP. LAMP is a platform in developing webpages
 7

that are used in Linux as it’s operating system, Apache as the server of the web and
MySQL as the relational database in system management and PHP, Perl or Phython
for the object-oriented scripting language. MySQL is originally created by the
Swedish Company, the MySQL AB, and been adapted by the Sun Microsystems in
2008 and followed by the Oracle when it is being bought by the Sun in 2010.
Developers can still use MySQL under the GNU General Public License (GPL), but
enterprises must obtain a commercial license from Oracle. (M. Rouse, 2013)

2.1.1.3 HTML

HTML is also known as Hypertext Mark-up Language. “Hypertext” referred

to the hyperlinks that the browser contains and “Mark-up Language” referred to the
tags or codes being used to define the page layout and elements within the page. It is
the language used to create and construct web pages.HTML is a core technologies in
publishing online documents, retrieving online information, design forms for
conducting or making reservations along with the graphics and scripting.HTML is a
standardized language system that being used in formatting the text colors, font,
hyperlinks or graphics that could be found in the webpage. HTML language are also
used for image and text proper formatting and that will help the internet browser
displayed it intended on how it looks. (T. Berners-Lee et al., 2016)

2.1.1.4 CSS

CSS or the Cascading Style sheet. CSS is a language that are designed in
describing the webpage presentation including colors, layout, and fonts. CSS also
allows to adapt one presentation to another in a different kinds of devices such as
large screens, small screens, or printers. CSS is independent of HTML and can be
used with any XML-based mark-up language. The separation of HTML from CSS
makes it easier to maintain sites, share style sheets across pages, and tailor pages to
different environments. (T. Berners-Lee et al., 2016)
 8

2.1.2 Java

Java is a general purpose that are being developed by the Sun Microsystems
for high-level programming languages. Java is a general-purpose computer
programming language that is concurrent, class-based, and object-oriented. Java was
first and originally known as OAK, and was designed for handheld devices and set-
top boxes. Oak was unsuccessful, so in 1995 Sun changed the name to Java and
modified the language to take advantage of the burgeoning World Wide Web. (V.
Beal, 2017)

Java is an object-oriented language that are quite similar to C++, but, in Java, it
simplified to debug syntax that are causing common programming errors. Java source
code files (files with a .java extension) are compiled into a format called byte code
(files with a .class extension), which can then be executed by a Java interpreter. The
codes of Java that are being compiled can be run on any most computers because
interpreters of Java and it’s runtime environments called Java Virtual Machines
(VMs), exist for most operating systems, including UNIX, the Macintosh iOS, and
Windows. Byte code can also be converted directly into machine language
instructions by a just-in-time compiler (JIT). In 2007, most Java technologies were
released under the GNU General Public License. (V. Beal, 2017)

2.1.3 Java script

JavaScript is a dynamic computer programming language. It is lightweight

and most commonly used as a part of web pages, whose implementations allow
client-side script to interact with the user and make dynamic pages. Java script is a
programming language that are being interpreted with the capabilities of object-
oriented. JavaScript was first known as LiveScript, but Netscape changed its name to
JavaScript, possibly because of the excitement being generated by Java. JavaScript is
first featured in the Netscape 2.0 in the year 1995 and known as the LiveScript. The
general-purpose core of the language has been embedded in Netscape, Internet
Explorer, and other web browsers. (Tutorials Point 2017)
 9

2.1.3.1 Java Applet

Java applet is a internet-based small program that are performed with Java
languages, which can be downloaded by any computer. The applet is also able to run
in HTML. The applet is usually embedded in an HTML page on a Web site and can
be executed from within a browser. (Webopedia staff, 2017)

2.1.4 Smartphones

A smartphone is a cellular telephone with an integrated computer and other

features not originally associated with telephones, such as an operating system, Web
browsing and the ability to run software applications. The first smartphone was the
International Business Machines (IBM) Simon that was featured as the concept device
in 1992 at the COMDEX computer industry trade show. When Simon debuted, the
smartphone's features clearly differentiated it from other cell phones, which at that
time were just telephones that didn't need a landline connection. There is no standard
definition that clearly delineates a smartphone -- many devices marketed simply as
cell phones offer similar features to those marketed as smartphones. (M. Rouse, 2013)

2.1.4.1 IOS

iOS is Apple`s mobile operating system. Originally developed for the iPhone,
iOS now can also support other Apple`s devices such as itouch, iPad and Apple TV.
Although this OS is being change from Mac OS X, iOS still has the technologies that
are available and compatible only for itself, such as the Multi-Touch interface and
accelerometer support, and these devices make iPhone easier to use (A. Sheikj, P.
Ganai, N. Malik, K. Dar, 2013)

2.1.4.2 Android

An Android phone is a smartphone that are manage and runs on software that
are being developed by Google. Android is one of the top competitors on the market
for smartphones. Some could argue the best smartphones on the market use the
Android Operating System to function/operate. (J. Bond, 2013)
 10

2.1.5 Computer Languages

A Computer language defines different kinds of languages that are being used
in communicating Computer machine. Some of the languages like programming
language that is a set of codes or instructions used for communicating the machine.
This kind of code is also considered as the computer language that are commonly
used in programming. There are a lot of kinds and types of computer languages that
are being performed in communicating machine but it also had a lot of similarities in
doing types of works by communicating with the machine. All the languages that are
being categorized and separated into two basic types of languages, the Low-level
language and High level language. (InformationQ 2016)

2.1.5.1 C

C is a general purpose and a high-level programming language that is

hypothetically used in firmware development or in portable applications. C was
originally and used intently for writing some system software and it was developed at
Bell Labs by Dennis Ritchie for the Unix Operating System (OS) in the early 1970s.
C was designed intended compile codes using a common, straightforward compiler,
so that it will provide a low-level access to the memory to provide language
constructs that map efficiently to machine instructions, and to require minimal run-
time support (M. Dhruve, 2016)

2.1.5.2 C++

C++ is an object-oriented programming language. C++ was developed by

Bjarne Stroustrup and being labeled as the extension of C language. It is therefore
possible to code C++ in a “C style” or “object-oriented style.” In certain scenarios, it
can be coded in either way and is thus an effective example of a hybrid language.

C++ is a general-purpose object oriented programming language. C++ is also

considered as an intermediate level language, as it sum up both high and low level
language features. Initially, the language was called ‘C with classes’ as it had all
properties of C language with an additional concept of ‘classes’. However, it was
 11

renamed to C++ in 1983. (https://planguagesblog.wordpress.com/c/)

2.2 Related Study

This section stated the related studies that had a result and finding that are
related to the possible outcome of the present study.

2.2.1 MSU-IIT's Students Academic Information through Data Visualization

Figure 2.1 MSU-IIT's Students Academic Information through Data Visualization

Computer systems used by many organizations generate and store large

amounts of data from their day-to-day transactions. As management people are in
constant challenge to make decisions quickly with less time on data analysis, the need
for data visualization techniques continues to increase as well. Moreover, data
visualizations are used to represent data graphically. This aids people in analyzing and
interpreting the entire dataset at once, and allows data items to be freed from rows and
tables and presented in ways that are much more interesting and easier to understand.
Thus, it provides modes to visually display unexpected relationships and trends,
uncover complexities and capture hidden patterns of failure and success.

One such organization which makes use of computer applications to do its

business is the Iligan Institute of Technology of the Mindanao State University
(MSU-IIT). It has an estimated student population of 11,500 each year, 3,500 of
which are freshmen, enrolled in more than 115 academic programs. Every year, the
student academic data increases as new students are admitted in the Institute, plus
 12

those of old students’ enrolment data. Currently, the Institute uses an in-house
application, called the electronic School Management System or the e.SMS to manage
these data. Reports required by the management and other government agencies, such
as DOST and CHED, can be easily generated from the e.SMS. However, for data
analysis purposes, these reports are not enough, since they are not visually presented
out of the box (i.e, they still have to be exported to spreadsheet applications, like
Excel, to produce charts and graphs). In this study, the researchers propose a data
visualization framework for student academic data that will be incorporated into the
My.IIT Students, Faculty and Staff portal and will only be made available to
authorized users.
 13

Chapter 3

Methodology

In this chapter, the researchers shows the methods and activities being done in
developing the new web-based clearance system.

3.1 Study Design

Fig 3.1 shows a certain diagram that contains five stages to follow in creating
a certain prototype. Each certain phases is designed to perform their individual
functions as pertain in their organized flow without any restriction or limits. All five
phases are needed to be complied in creating the final prototype of the research study.

Figure 3.1 Waterfall model

 14

3.1.1 Methodology Flowchart

In the Fig 3.2, it illustrates the specific detail guide in processing the final
prototype. There are five major phases that are being followed and serve as a guide
for the researcher the Planning phase, Analysis phase, Designing phase, Development
phase, and Implementation phase.

Figure 3.2 Methodology Flowchart

 15

3.1.2 Planning Phase

This section states and discuss about the objective, problem and the
importance of the study.

1. Determining the objective, problem and significance of the study.

a) The situation of the students on how the way the clearance system works is a
bit struggling and having the old-fashioned way of clearance system makes the
students and teachers have way more responsibilities in school aside of paper
works and such.
b) Designing an improvise clearance system and turn it into a web-based will
indicate and help the students to have a way more convenient and fast in doing
the school clearances.
c) The proposed study will help the students and teachers in dealing the paper
problems, such as ripping it off, soak it into the water or misplace it, and in
lessening the time consumed and the efforts to be exerted.
2. Plan the study
a) Program the codes used in processing the information for students and storing
it into the database.
b) Design for a student-friendly website.

3.1.3 Analysis Phase

This section discuss the reviewed data and investigations to help the
researcher analyze the problem and collect the information for references.

1. Study and investigate the subject area

a) The researchers found out that the students in school that used the old
fashioned way of signing clearances are struggling and don’t have time in
doing the other paper works.
2. Functionality and operations of the study.
a) This study is a webpage-based study that will help the students to easily
manage and monitor the clearances even in their respective houses.
 16

3.1.4 Design Phase

In this section, the researchers discuss the specific components and interfaces
and the program codes and the languages to be use to comply the specific
requirements stated in the planning phase.

1. Specify the requirement

a) The researchers will only be using the HTML & CSS language for the website
and Java for databasing.
b) ATOM platform for executing the algorithms/syntax.
2. Designing
a) Design the desktop application
b) Design the website

3.1.5 Development Phase

In this section, codes will be created and emerged it all and will be tested one
by one.

Activities:

1. Program the codes

a) Program the codes of HTML & CSS for the webpage and the Java programs
for the databasing.
2. Test and repair
a) One by one will be running a trial-and-error to test the functionality and
irregularities of codes and such.

3.1.6 Implementation Phase

In this section, the researchers will be implement the codes, the final codes
will be combined for the final prototype of the study, and observe and debug the
errors in executing the program process.

Activities:

1. Integrate the Software

 17

a) The system will be observed for the possible problems and errors in
developing the prototype of the device.
b) And once the codes is already functional and final, it will be combined for the
prototype.
2. Compatibility test and repair
a) Trial-and-error to find bugs and to repair the problems found in program while
processing.

3.1.7 Deployment Phase

In this phase, it is the extension for the given waterfall model method in
discussing the process in making the prototype. It is considered as a final stage of the
study.

The final prototype will be deployed the corresponding target area and will
conduct an observation for the sufficiency of the performance and the efficiency of
the device.

1. Run the software

a) Run the programmed software to the respective target area.
2. Evaluate
a) Observe the target area.
b) Test the progress of the device