CHAPTER 1

INTRODUCTION

Background of the Study

One of the most important goals of the Cotabato Foundation College of Science

and Technology Pikit Extension Unit is to improve its facilities and equipment in

accomplishing the purpose for which it was established for more relevant and value-

oriented education and training. The institution expanded to include tertiary course. From

only a few students in its initial years of operation, the school steadily grew in enrolment

and gradually expanded its curricular offerings. At present, many additional courses are

offered by the institution. On-the-Job Training (OJT) is part of CFCST PEU’s

curriculum. It aims to educate students about the work and their future career. This

provides opportunities for students who have the motivation and academic ability to get

started on a career path while they are still in school. The training involves the

cooperation of three participants namely the Students, the Site Supervisors/Company and

the OJT Coordinator. The current procedure for the CFCST PEU in Placement Office, the

attendance of OJT Students is manually writing in a logbook and put it on a single

cabinet together with the logbook of other courses. And when the OJT students submit

their requirements to OJT Coordinator, their files are being kept it on the data cabinet

together with the other courses. By doing this, the OJT Coordinator takes more time,

effort and physical space to keep track of the OJT/Intern student’s documents to find

details secure. When mistakes are made, or changes or correction are needed, often a

manual transaction must completely redo rather than just updated.

 The proposed system will be developed from March, 2024 to November, 2024.

Statement of the Problem

In the past, attendance was manually recorded and kept in a book, making it

vulnerable to manipulation and human mistake. The manual timesheet tracking approach

is quite difficult to administer, and maintaining records necessitates physical storage.

Employers require a solution to quickly and effectively track the attendance of trainees

learning on the job. Ensuring that trainees fulfill their allotted work hours is made easier

by keeping an eye on their attendance. In the past, attendance was manually recorded and

kept in a book, making it vulnerable to manipulation and human mistake. The manual

timesheet tracking approach is quite difficult to administer, and maintaining records

necessitates physical storage. Employers require a solution to quickly and effectively

track the attendance of trainees learning on the job.

To address the aforementioned problems seen in the manual method, the

researcher of the study proposed an OJT Timesheet Monitoring System using QR code.

Objectives of the Study

The main goal of the project is to design and develop a system that will ease up

monitoring and generating timesheets of on-the-job trainees.

Specifically, the project aims the following objectives:

1. To develop a system that will be used for timesheet monitoring using QR

Code;
 2. To develop a system that will ease up recording, storing and monitoring of the

student’s record of rendered hours in their training; and

3. To develop a system that generates report.

Scope and Limitation of Study

The system will allow employers and trainees to automate processes in

entering, recording and storing their attendance during the training period. The system

will allow employers to track the student’s record of their rendered hours in the training

and students will conveniently do their attendance by using the QR code to access the

system. The system will be managed by the administrator responsible for adding students

who will undergo on-the-job training in the system and will generate unique QR code for

each student. The students or the trainees will use the QR code generated by the system

to log in and press the time in and out before and after their training every day. The

system will ease up the processes in doing the timesheet of the students or the trainees.

Significance of the Study

The success of the project is deemed beneficial to the following:

Companies/Organizations. To those companies or organizations that cater on-the-job

trainees will highly benefit from the project. The system will ease up their operation in

handling and tracking trainees record under their organization.

Employers. The system will help them ease up their job in recording, storing and

monitoring the record of the trainees under their supervision. The system will also

generate report about the status of their rendered hours in training.

Students/Trainees. The system will help easily do their attendance during the training

period. The system will also assure them that their record is accurate and reliable.

Researchers. The researchers of the study will gain more knowledge and skills in

developing helpful programs.

Future Researchers. The study will serve as their basis in doing their own version of the

study.

Conceptual Framework

INPUT PROCESS OUTPUT

 Student
Information -
(name, contact
number, address,
Course)
 Internship
Information –
(name of school,
 Total
required duration)
CFCST-PEU Rendered
 profile pictures of
the student INTERNSHIP Time
 Student Id TIMESHEET  Student
Number MONITORING Timesheet
 Time in SYSTEM USING QR Report
 Admin Username CODE  Generated
and password QR Code
 Admin/User
Information
(Name, Username,
Type(staff or
 admin))
 QR Code

Figure 1. Conceptual Framework

 Figure 1 shows the conceptual framework of the proposed system with QR Code

integration. The inputs of the system will be the student Information (name, contact

number, address, Course), Internship Information – (name of school, required duration),

profile pictures of the student, Student Id Number, Time in, Admin Username and

password, Admin/User Information (Name, Username, Type (staff or admin)) and QR

Code to be used for attendance purpose.

Definition of Terms

OJT or On-the Job Training means training in the public or private sector that is given to.

a paid employee while he or she is engaged in productive work and that provides.

knowledge and skills essential to the full and adequate performance on the job.

QR Code– which stands for “quick response” – code is basically a barcode on steroids.

While the barcode holds information horizontally, the QR code does so both horizontally

and vertically.

Timesheet- a piece of paper for recording the number of hours worked.

Internship- a professional learning experience that offers meaningful, practical work

related to a student's field of study or career interest.

CFCST-PEU- abbreviation for Cotabato Foundation College of Science and Technology

Pikit Extension Unit where the proposed study will be implemented.

 CHAPTER 2

REVIEW OF THE RELATED LITERATURE

Implementation of Laravel Framework on Online Presence App Design for

Internship Employees (Case Study: PT. XYZ)
 In the study of Asty Kusumadewi, Syarifudin†, Arief Agus Sukmandhani‡ and

Immanuela Puspasari Saputro (2021), numerous companies use presence as a component

of employee presence. PT. XYZ uses presence for all its employees. PT. XYZ has

permanent employees, contract employees, and internship employees. Currently,

presence data recording for internship employees at PT. XYZ still uses the manual

method so it takes a long time and is vulnerable to data manipulation. This study aims to

facilitate the management of the presence of internship employees so that they can

validate the work location of internship employees and facilitate internship employees in

making daily activity reports. This online presence system is designed using the PHP

programming language and MySQL as the database. In this study, the author uses the

Waterfall Software Development Life Cycle (SDLC) method. Then the system testing

was carried out using User Acceptance Testing (UAT) by distributing questionnaires to

respondents. Based on the results of the black box testing and user acceptance test (UAT)

that have been carried out, it was found that the system developed was in accordance with

its function and was very well accepted by internship employees and employees of PT.

XYZ.

Implementation of QR Codes at Indiana University’s Fine Arts Library

A project to incorporate QR codes into the program of the Fine Arts Library at

Indiana University-Bloomington (IUB) by Judy Dyki,, launched during the summer of

2021, had two goals designed to increase access to course-related research materials: to

embed traceable QR codes in course syllabi leading to custom course resource web pages

developed and hosted by the library, and to place QR codes on the library’s website and

in prominent locations throughout the facility. The author concludes that web pages
tailored to courses are a useful way to introduce research materials to tech-savvy students

in the classroom, and that implementation of a QR code and accompanying URL on a

course syllabus is an effective tool for the library and faculty in their work with students.

Online Attendance Monitoring System Using QR Code (OAMS)

The regular attendance system continued in the educational system where the

instructor announced the name of every single student and marked the attendance,

causing time wastage during address time. This turned out to be increasingly more time-

consuming particularly in the current situation where the number of students in a class is

exceptionally huge. Dealing with the attendance information of a huge gathering is

additionally troublesome. Another burden of the present system is the opportunity for the

student to stamp fake attendance. These days mobile phones can tackle the vast majority

of the issue rapidly and without any problem. It has made the existence of each individual

basic and simpler with the various social application, business applications, critical

thinking applications, applications for training and advertising, and so on. Followed by

the innovation, the paper proposed by Shubham Mishra et. al. (2021), a framework that

will deal with an issue for recording attendance. The proposed framework has three

segments, one for producing the QR Code by entering the student's subtleties and the

second application for taking the attendance, and the third for creating the attendance in

CSV or XLS design. The educator should check the QR code of the specific understudy

to affirm their attendance. The understudy QR code will be given to the teacher to mark

their attendance.

DEVELOPMENT OF THE ONLINE STUDENT ATTENDANCE MONITORING

SYSTEM (SAMSTM) BASED ON QR-CODES AND MOBILE DEVICES
 The conference paper by N. ZAINAL et.al (2020) outlines the development of an

online student attendance monitoring system (named SAMSTM) based on QR codes and

mobile devices. This design was chosen due to its simplicity and cost-effectiveness. The

only equipment required by the user (lecturers and students) is a mobile internet device

such as a tablet computer or a smartphone. This is deemed reasonable due to the wide

availability and high ownership of such devices today. The system is currently in an early

prototyping phase to show a working proof of its concept. This paper describes the

overall architecture as well as the flow of its implementation in the class room. The

method of surveying the effectiveness and user feedback of the system is also discussed.

The main advantage of the system is a more accurate and quicker method of recording

and monitoring student attendance. With this system, it will be quantitatively easier to

discern the students based on their diligence in attending classes, and thus also predict

their performance due to the correlation between attendance and academic performance.

We found positive feedback for the system in the design phase with some parties

interested in commercialization. This encouragement motivates the deployment of the

system in a number of trials which will be useful for further development and wider

application.

QR Code Based Smart Attendance System

In this era of technology smartphones play a significant role in our day to day life.

Nowadays smartphones can solve most of the problem very quickly and easily. It has

made life of every person simple and easier with different social app, commercial app,

problem solving app, app for education and marketing etc. Followed by the technology

the paper
purposed a system that will handle a problem for recording the attendance. The proposed

system by Xiong Wei (2019) is a couple of two applications, one for generating the QR

Code by entering the student details and second application for taking the attendance and

generating the attendance in CSV or XLS format. The teacher will need to scan the QR

code of the particular student in order to confirm their attendance. The paper discusses

how the system verifies student identity to eliminate false registrations. The system deals

with the management and evaluation of attendance of all students. The student QR code

will be provided to professor for taking their attendance. The professor handling the

subjects is responsible to mark the attendance for all students of the group or class. The

attendance will be marked as 0 and 1, 0 for absent and 1 for present in the database of the

particular student row in the table. The student attendance reports will be generated in

CSV and XLS sheet for further use.

CHAPTER III

METHODOLOGY
 In the proposed system, the researcher will use Agile SDLC Methodology as

shown in figure 3 because it emphasizes developer-client communication and a shortened

development process that is constantly adapting and improving. Figure 2 shows the work

breakdown structure based on the methodology to be used by the researcher.

Work Breakdown Structure

Figure 2. Work Breakdown Structure

PLANNING

SYSTEM TESTING AND

SYSTEM DESIGN
INSTALLATION
 DEVELOPMENT PHASE

Figure 3. Agile Methodology

Planning

In this phase, the researcher defined the scope and objectives of the study by OJT

Coordinator of CFCST-PEU, planned the time and effort needed to build the project,

analyze the requirements needed to complete the project as well as create the

requirements documents based.

System Design

When the researcher specified the requirements needed, analyzed and design the

architecture and even the flow of the system to be developed. The researcher will use

PHP Scripting language, Bootstrap, Javascript and CSS to design the Graphical User

Interface of the proposed system.

Development Phase

The work will start as soon as the researcher specified the specifications. The

researcher got to work on it. The developer's goal was to release the functional product in

the allotted period. The product will have a basic, rudimentary functionality and will go

through several rounds of refinement. After being assembled for the final product, the

documents will be sent to the research adviser for additional review. This covers both the
software and the documentation. At this point, there will be lessons or user orientation

sessions on how to utilize the system.

System Testing and Installation

Once the primary functionalities of the system have been completed, the

researcher will incorporate the QR Code, test the system to identify any bugs, and

immediately debug it. After the system has been successfully implemented, the

researcher will conduct user testing, deploy it, instruct people on how to operate and

utilize it, and evaluate it.

Research Design

The descriptive qualitative approach will be used in the research design; this

method will be created for the researcher to obtain information about current existing

situations. The researcher chose to utilize the descriptive qualitative approach to collect

data that would assist them know what is needed so that they could design a system that

would help the OJT Coordinator and reduce the staffs' work.
Flowchart (Intern-Side)

yes

Figure 3. Flowchart (Intern-Side)

 Figure 3 illustrates how users must scan their QR code to gain access to the

system. In order to allow users to log in to the system, the scanning page will employ a

camera to scan their QR Code. The dashboard on the student side will show up once the

QR Code has been successfully verified. After logging into the system, it functions as the

trainees' or students' homepage. The student's name, the current day and time they use the

system, the total number of hours they spend using it on a given day, and a summary of

the days and hours they spent using the training will all be displayed on the dashboard.

Logging out is the final step.

Flowchart (Admin-Side)

START

Log in

YES Username and NO

Password
correct?

Admin
Dashboard

Attendance Students Profile Picture QR Code Report Users

View/Search Manage student Upload Student Print Manage

Input student
Student Rendered information Profile Picture name and id
Student User List
number (Add/Edit/View/
List (add/edit/search/ Record Delete user info.)
delete student
info.)
Generated QR
Code

Print QR
Code
 Log Out

STOP

Figure 4. Flowchart (Admin-Side)

Figure 4 displays the flowchart for the admin side. The administrator's home

screen, the admin system dashboard, will show up following a successful verification of

the password and username entered. The dashboard lists the students undergoing

instruction on a particular day in a particular month together with the number of hours

they completed. The administrator must encode the following student data in order for the

student management module to function. The admin must attach the student's profile

photo to this form in order for it to be easily identified. The student's profile photo must

be entered into the form by the administrator. The administrator can create a QR code for

a particular student using the QR Code creator form. Before creating a QR code, the

administrator must provide the student's name and ID number. The administrator can

create a QR code for a particular student using the QR Code creator form. The produced

QR Code can also be printed by the system to gain access. The details of the hours that

students have contributed to their training are shown in the student rendered list form.
Use Case Diagram

Log in

Scan QR Code

Generate and Print QR

Code

Manage Trainee
Information
ADMIN TRAINEE
Generate Report

Manage User List

Log out

Figure 5. Use Case Diagram

The student trainee and the system administrator are the actors in the above

figure. The student trainee has the ability to sign in, verify their identification through the

system by scanning their QR Code, and exit the system. On the other side, the

administrator has additional login options, including the ability to create and print a QR

Code created by the system, manage student trainee information, create and print

attendance reports, manage user lists, and log out of the system

Architectural Diagram
 CFCST-PEU
INTERNSHIP
TIMESHEET
MONITORING
SYSTEM USING
QR CODE

Figure 6. Architectural Diagram of the Developed System

Figure 6 shows the Architectural Diagram of the system that presents the flow of

the system in which the information of the user/student as well as the admin’s

information will directly save in the database of the system and then the admin can

generate and print reports.

Respondents of the Study

 The respondents of the study will be the OJT Coordinator, Student trainee and the

Supervisor of CFCST-PEU.

Location of the Study

The study will be conducted at CFCST-PEU, Brgy. Batulawan, Pikit BARMM

SGA.

System Requirements

 Hardware Specification

Table 1 presents the hardware specification which was important in developing

the system. The researcher will utilize these specifications to ensure that the system

functions well and would not be compromised by its peripheral as well as to prevent

processing operations from being delayed.

Table 1. Hardware Requirements Specification

HARDWARE SPECIFICATION
Processor Intel r Pentium r CPU N3710
Memory 2.00 GB RAM
Hard Disk Storage 1 TB

 Software Specification

Table 2 presents the software specification to be used in developing the system.

These software requirements must be followed so that the system would be able to

function well.

Table 2. Software Requirements Specification

SOFTWARE SPECIFICATION
Operating System Window 10
 System Type 64-bit
Database MySQL
Programming Language PHP , CSS , JAVASCRIPT, BOOTSTRAP

REFERENCES
D. P. M. Putri and H. Supriyono, Rancang Bangun Sistem Presensi Berbasis QR Code
Menggunakan Framework Codeigniter (Studi Kasus Kehadiran Asisten Praktikum), J.
insypro, 4, 1, pp. 1–9 (2019)

Dyki Judy “Implementation of QR Codes at Indiana University’s Fine Arts Library”

Journal of the Art Libraries Society of North America Vol. 31, No. 2 (September 2021),
pp. 276-284 (9 pages)

J. Simatupang and S. Sianturi, Perancangan Sistem Informasi Pemesanan Tiket Bus Pada
Po. Handoyo Berbasis Online, J. Intra Tech,3, 2, pp. 11–25 (2019).

M. Laaziri, K. Benmoussa, S. Khoulji, and M. L. Kerkeb, A comparative study of PHP

frameworks performance, Procedia Manuf., 32, pp. 864–871 (2019)

S. Mishra, C. Kumar, A. Ali and J. Bala, "Online Attendance Monitoring System Using
QR Code (OAMS)," 2021 2nd International Conference on Intelligent Engineering and
Management (ICIEM), London, United Kingdom, 2021, pp. 379-384, doi:
10.1109/ICIEM51511.2021.9445304.

S. Suendri, Implementasi Diagram UML (Unified Modelling Language) Pada

Perancangan Sistem Informasi Remunerasi Dosen Dengan Database Oracle (Studi Kasus:
UIN Sumatera Utara Medan), Algoritm. J. Ilmu Komput. Dan Inform., 2, 2, pp. 1 (2019)