IETI COLLEGE OF SCIENCE AND TECHNOLOGY
Magsaysay, San Pedro, Laguna
CHAPTER 1
Both students and employees should problems such as providing incorrect
prioritize their attendance. For quite some information to the users. The purpose of the
time now the employees of IETI College of QR code based attendance system is to
Science and Technology has been using computerize the traditional way of recording
biometric system for their attendance. Its attendance and provide an easiest and smart
usage has been effective since. However, the way to track attendance in institutions. Quick
researchers would like to propose a new Response (QR) code is an emerging and
system and a new way of keeping tracks of widely used technology. Not only that QR
employee’s attendance. code has been successfully applied in mobile
payment services, digital content download,
Since the pandemic the world has been website quick links, and many other
implementing social distancing to avoid the applications.
spreading of the corona virus. Everyone is 1.2 Background of the study
also advised to stay at home at all cost to
avoid crowded places. Ordering online was IETI San Pedro’s Biometric Attendance
the world’s alternative way in buying foods System for Employees
and other necessities to avoid physical
contact with other individual. The The school of IETI San Pedro campus uses the
researchers would like to propose QR code as Biometrics System for recording the
a new attendance monitoring system. Using attendance of the current employees of the
this innovation allows employees without school. The way the system works is first they
engaging physical contact to other register the names of the employees and
employees. they take the Fingerprint of the employees
because their fingerprints is the one going to
1.1 Introduction be used for recording the “Time In” and the
“Time Out”. If a new employee is going to be
Attendance has grown in importance in in the system, they will open up the menu
today's world. Each employee is required to and register the name and the employee’s
report their attendance each day. The thumb.
attendance assists the business in
determining the employee's regularity and 1.3 Statement of the problem
the appropriate remuneration to be credited.
However, the widely used attendance system This study is intended to develop the
requires a separate device for updating the employee’s attendance monitoring system of
attendance, and employees must wait in a IETI College of Science and Technology, San
Pedro. The purpose of this study is to be able
long line to check in and out.
to improve the system and tend the following
Among the different types of attendance problems:
systems that have been developed, using
punch cards, log books, fingerprint systems, 1. Physical contact when taking the
barcodes and also RFID still cause lots of biometric attendance.
QR Code Attendance Monitoring System for the Employees of IETI College of Science and Technology
by: Maria Patricia M. Caranguian, Allysa Loraine Camacho, Joshua Peña
Page 1
IETI COLLEGE OF SCIENCE AND TECHNOLOGY
Magsaysay, San Pedro, Laguna
QR Code Scanner. An optical scanning device
1.4 Research objectives that's able to read QR codes
General objective: QR Attendance Control App. This app lets
you have control of the attendance to an
The main objective of this study is to
event using QR codes, so you can register the
improve and provide solution to the
hour of arrival and departure, and also tells
issues of the existing attendance
the amount of time each person was present
monitoring system.
in the event.
Specific objectives:
Computer. A digital electronic machine that
To provide a non-physical contact can be programmed to carry out sequences
way of recording employee’s of arithmetic or logical operations
attendance. (computation) automatically.
1.5 Scope and Limitation Operating System (OS). System software that
manages computer hardware, software
The system is in charge of getting only the resources, and provides common services for
attendance of IETI College of Science and computer programs.
Technology, San Pedro employees. It only
focuses in the accurate date and time in /
time out of the employee’s. The system is not
CHAPTER 2
responsible for identifying and recording
payroll.
2.1 Related Studies
Below are studies similar or related to this study as
1.6 Definition of terms
well.
Remuneration. The act or fact of paying an
equivalent to for a service, loss, or expense: Acceptability of an Attendance Monitoring
recompense, pay. System using QR code among College
Instructors and Students
Efficiency. The state or quality of being
efficient. Achieving maximum productivity David et.al (2020), express that acceptability
with minimum wasted effort or expense. of an Attendance Monitoring System Using
Attendance. The concept of people, QR Code among College Instructors and
individually or as a group, appearing at a Students, they stated that “a QR Code-based
location for a previously scheduled event attendance monitoring system that simplifies
the processes involved in its usage is
Smartphone. A portable computer device
proposed “.
that combines mobile telephone and
computing functions into one unit. Their research reveals that the majority of
QR Code Generator. Software or an respondents rated all categories as highly
application which stores data into a QR code. satisfactory or acceptable, including
QR Code Attendance Monitoring System for the Employees of IETI College of Science and Technology
by: Maria Patricia M. Caranguian, Allysa Loraine Camacho, Joshua Peña
Page 2
IETI COLLEGE OF SCIENCE AND TECHNOLOGY
Magsaysay, San Pedro, Laguna
functionality, reliability, usability, efficiency, their scanning will be their time in
and maintainability. Overall, the data and time out.
demonstrate that the instructors were more 4. To collect all the data of the scanned
QR code image, open up the “QR
acceptable than the pupils. According to the
Attendance Control” app and select
findings of this study, the system can be the “export” option. Rename the
adopted and used as a feasible method of data that will be saved as an excel
checking students' attendance on campus. file.
(https://so06.tci-thaijo.org/index.php/
edujournal_nu/article/view/221450) 3.2 Data Flow Diagram
(See page 5-8, Figure 2-5)
3.3 Physical Design
CHAPTER 3 (See page 9-13, Figure 6-10)
3.1 Description of the system
(See page 4, Figure 1) 3.4 System requirements
The existing attendance monitoring system of Hardware:
IETI College of Science and Technology been Computer with at least an OS of
effective since biometrics has been windows 10 or higher
implemented. However, the researchers Smartphone
would like to propose a new system and a Printer
new way of keeping tracks of employee’s
attendance.
Software:
QR code generator
In the researchers proposed system,
QR Code Scanner app
QR Attendance Control app
1. Collect the necessary information of
Microsoft Excel 2010 ( or above )
the employees and generate a QR
code image for them that will serve
as their identification card.
2. The employees will scan their QR
code images to the provided QR code
scanner which is an app called
“Barcode Scanner” and “QR
Attendance Control” installed in a
smartphone.
3. Once the QR code has been scanned
their information will automatically
be collected and the exact time of
QR Code Attendance Monitoring System for the Employees of IETI College of Science and Technology
by: Maria Patricia M. Caranguian, Allysa Loraine Camacho, Joshua Peña
Page 3
IETI COLLEGE OF SCIENCE AND TECHNOLOGY
Magsaysay, San Pedro, Laguna
FIGURE 1: DESCRIPTION OF THE SYSTEM
QR CODE IMAGE THAT
CONTAINS THE EMPLOYEES
INFORMATION
SCAN QR CODE IMAGE
EMPLOYEES ATTENDANCE
(TIME IN/ TIME OUT)
QR Code Attendance Monitoring System for the Employees of IETI College of Science and Technology
by: Maria Patricia M. Caranguian, Allysa Loraine Camacho, Joshua Peña
Page 4
IETI COLLEGE OF SCIENCE AND TECHNOLOGY
Magsaysay, San Pedro, Laguna
FIGURE 2: GENERATING QR CODE
COLLECT NECESSARY
INFORMATION OF
EMPLOYEES
INPUT COLLECTED
INFORMATION USING QR
CODE GENERATOR
GENERATE QR CODE
DISTRIBUTE GENERATED QR
CODE TO EMPLOYEES
QR Code Attendance Monitoring System for the Employees of IETI College of Science and Technology
by: Maria Patricia M. Caranguian, Allysa Loraine Camacho, Joshua Peña
Page 5
IETI COLLEGE OF SCIENCE AND TECHNOLOGY
Magsaysay, San Pedro, Laguna
FIGURE 3: SCANNING QR CODE AND COLLECTING DATA
EMPLOYEES
GENERATED QR CODE
SCAN QR CODE USING
“BARCODE SCANNER” APP
EMPLOYEES
TIME IN/ TIME OUT
IMPORT EMPLOYEES TIME
IN / TIME OUT TO EXCEL
USING “QR ATTENDANCE
CONTROL” APP
EMPLOYEES
ATTENDANCE
QR Code Attendance Monitoring System for the Employees of IETI College of Science and Technology
by: Maria Patricia M. Caranguian, Allysa Loraine Camacho, Joshua Peña
Page 6
IETI COLLEGE OF SCIENCE AND TECHNOLOGY
Magsaysay, San Pedro, Laguna
FIGURE 4: PROPOSED SYSTEM
EMPLOYEE
QR CODE
QR CODE
ATTENDANCE
MONITORING
SYSTEM
TIME IN/
TIME OUT
EMPLOYEE’S
ATTENDANCE
QR Code Attendance Monitoring System for the Employees of IETI College of Science and Technology
by: Maria Patricia M. Caranguian, Allysa Loraine Camacho, Joshua Peña
Page 7
IETI COLLEGE OF SCIENCE AND TECHNOLOGY
Magsaysay, San Pedro, Laguna
FIGURE 5: SYSTEM FLOWCHART
QR CODE ATTENDANCE MONITORING SYTEM
START
COLLECT EMPLOYEE
INFORMATION AND
GENERATE QR CODE
GENERATED QR
CODE IMAGE
SCAN QR CODE
IMAGE
NO
SCANNED?
YES
TIME IN /
TIME OUT
ANALYZE /
STORE DATA
END
QR Code Attendance Monitoring System for the Employees of IETI College of Science and Technology
by: Maria Patricia M. Caranguian, Allysa Loraine Camacho, Joshua Peña
Page 8
IETI COLLEGE OF SCIENCE AND TECHNOLOGY
Magsaysay, San Pedro, Laguna
FIGURE 6: QR CODE GENERATOR
Coded using HTML Programming Language
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/
bootstrap.min.css" />
QR Code Attendance Monitoring System for the Employees of IETI College of Science and Technology
by: Maria Patricia M. Caranguian, Allysa Loraine Camacho, Joshua Peña
Page 9
IETI COLLEGE OF SCIENCE AND TECHNOLOGY
Magsaysay, San Pedro, Laguna
<style>
.qr-code {
max-width: 200px;
margin: 10px;
border: 5px solid #cfcaa8;
}
body {
width: 100%;
height: 100vh;
background-color: #635e87;
display: flex;
align-items: center;
justify-content: center;
}
h1{
font-size: 23px;
font-weight: bold;
margin-bottom: 5px;
color: #cfcaa8;
}
.btn-default{
border: none;
margin-top: 10px;
background-color: #cfcaa8;
font-weight: bold;
font-size: 15px;
color: rgb(0, 0, 0);
cursor: pointer;
}
.form-control{
border: none;
font-weight: bold;
background-color: #e7e7e7;
font-size: 15px;
text-align: center;
color: #635e87;
cursor: pointer;
}
QR Code Attendance Monitoring System for the Employees of IETI College of Science and Technology
by: Maria Patricia M. Caranguian, Allysa Loraine Camacho, Joshua Peña
Page 10
IETI COLLEGE OF SCIENCE AND TECHNOLOGY
Magsaysay, San Pedro, Laguna
</style>
<title>QR Code Generator</title>
</head>
<body>
<div class="container-fluid">
<div class="text-center">
<h1>QR Code Generator</h1>
<img src= "https://chart.googleapis.com/chart?
cht=qr&chl=Hello+World&chs=160x160&chld=L|0"
class="qr-code img-thumbnail img-responsive" />
<input type="text" size="60"
maxlength="60" class="form-control"
id="content" placeholder="Enter Text or URL" />
<button type="button" class= "btn btn-default" id="generate">
Generate
</button>
</div>
</div>
<script src=
"https://code.jquery.com/jquery-3.5.1.js">
</script>
QR Code Attendance Monitoring System for the Employees of IETI College of Science and Technology
by: Maria Patricia M. Caranguian, Allysa Loraine Camacho, Joshua Peña
Page 11
IETI COLLEGE OF SCIENCE AND TECHNOLOGY
Magsaysay, San Pedro, Laguna
<script>
function htmlEncode(value) {
return $('<div/>').text(value)
.html();
}
$(function () {
$('#generate').click(function () {
</script>
</body>
</html>
FIGURE 7: GENERATED QR CODE IMAGE
QR Code Attendance Monitoring System for the Employees of IETI College of Science and Technology
by: Maria Patricia M. Caranguian, Allysa Loraine Camacho, Joshua Peña
Page 12
IETI COLLEGE OF SCIENCE AND TECHNOLOGY
Magsaysay, San Pedro, Laguna
FIGURE 7.1
FIGURE 7.2
FIGURE 8: BARCODE (QR CODE) SCANNER APP
QR Code Attendance Monitoring System for the Employees of IETI College of Science and Technology
by: Maria Patricia M. Caranguian, Allysa Loraine Camacho, Joshua Peña
Page 13
IETI COLLEGE OF SCIENCE AND TECHNOLOGY
Magsaysay, San Pedro, Laguna
FIGURE 8.1
FIGURE 9: QR ATTENDANCE CONTROL APP
QR Code Attendance Monitoring System for the Employees of IETI College of Science and Technology
by: Maria Patricia M. Caranguian, Allysa Loraine Camacho, Joshua Peña
Page 14
IETI COLLEGE OF SCIENCE AND TECHNOLOGY
Magsaysay, San Pedro, Laguna
FIGURE 9.1 FIGURE 9.2 FIGURE 9.3
FIGURE 10: MICROSOFT EXCEL
QR Code Attendance Monitoring System for the Employees of IETI College of Science and Technology
by: Maria Patricia M. Caranguian, Allysa Loraine Camacho, Joshua Peña
Page 15
