Student Attendance System Using QR-Code

A PROJECT REPORT
ON

QR Code Attendance System

A PROJECT REPORT SUBMITTED IN FULLFILLMENT OF THE
EQUIREMENTFOR THE DEGREE OF THEBACHELOR OF COMPUTER
APPLICATION

RAJ SCHOOL OF MANAGEMENT & SCIENCES SISWAN

BABATPUR VARANASI

AFFILIATED TO MAHATMA GANDHI KASHI VIDYAPEETH

VARANASICODE-168

SUBMITTED BY GUIDE BY SUBMITED TO

HARSH KUMAR MR. PIYUSH SRIVASTAVA MR. NAVEEN SINGH
ROLL.NO.: 16822407022 HOD ( Department of BCA) ASST. PROFESSOR
 Student Attendance System Using QR-Code

CANDIDATE’S DECLARATION

The Final Thesis/Project/ Dissertation Viva-Voce examination of -

Harsh Kumar Roll.no-16822407022

Kishan Sharma Roll.no-16822407028

Vishal Yadav Roll.no-16822407073

Vikash Maurya Roll.no-16822407070

has been held on and

their work is recommended for the award of Bachelor of Technology.

Date: ……………… Signature of guide Signature of H.O.D

Place: Varanasi Mr.Piyush Srivastav Mr.Piyush Srivastav

……………………… ………………………….
 CERTIFICATE FROM GUIDE

This is to certify that Harsh Kumar has completed the Synopsis Report “QR Attendance

System” under my guidance and supervisor and submitted the report as laid down by the

M.G.K.V.P. The material that has been obtained from other sources is duly acknowledged in

the report. It is further certified that the work or its part has not been submitted to another

University for examination under my supervisor. I consider this work worthily for the award

of the degree of Bachelor in computer application.

Mr. Piyush Shrivastav (Assistance Professor)

(H.O.D.)

Signature (Guide) Signature (H.O.D)

BCA 6th SEM

Department of Computer Application Raj School
of Management Sciences Babatpur ,Varanasi-
221001(U.P.)

www.rajsms.org @Raj School of management & Sciences

 TABLE OF CONTENT
Contents
ABSTRACT ......................................................................................................................................................................................................... 424
I. INTRODUCTION .................................................................................................................................................................................... 425
Prototype Design : .......................................................................................................................................................................................... 427
MODULES: ..................................................................................................................................................................................................... 429
QR-Code Generation ............................................................................................................................................................................ 429
Student ...................................................................................................................................................................................................... 430
Staff ............................................................................................................................................................................................................. 430
SYSTEM REQUIREMENTS ...................................................................................................................................................................... 430
HARDWARE REQUIREMENTS ............................................................................................................................................................. 430
SOFTWARE REQUIREMENTS:.............................................................................................................................................................. 430
Features: ............................................................................................................................................................... 432
Technologies Used ............................................................................................................................................... 432
How to Use: ......................................................................................................................................................... 432
II. METHODOLOGY .............................................................................................................................................................................. 435
ALTERNATIVES TO THIS SYSTEM ..................................................................................................................................................... 435
PROPOSED APPROACH ........................................................................................................................................................................... 437
ALGORITHM ................................................................................................................................................................................................. 438
2 Teacher Module ...................................................................................................................................................................................... 440
3 Student Module ....................................................................................................................................................................................... 442
4 Working ...................................................................................................................................................................................................... 443
IV. CONCLUSION .................................................................................................................................................................................... 444
V. FUTURE SCOPE ............................................................................................................................................................................... 445
Bibliography...................................................................................................................................................................................................... 446

www.rajsms.org @Raj School of management & Sciences

 ABSTRACT
A QR-based attendance system is a modern way of tracking attendance in schools,

universities, and other organizations. It uses QR codes to identify students, teachers, and

other staff members, making it a fast and efficient way to keep track of attendance. The

system consists of two main components: the backend and the frontend. The backend is

responsible for managing the database of users, classes, and attendance records. The

frontend is the user interface that allows teachers and students to interact with the system.

Another advantage of the system is its accuracy. Because it relies on individual scanning of

unique QR codes, it eliminates the possibility of proxy attendance, where students mark each

other as present even if they are absent.

QR-based attendance systems are also highly customizable. Administrators can easily add

new users, classes, and attendance parameters as needed. The system can also be integrated

with other software tools, such as student information systems, to provide a seamless

experience for users. This system uses QR codes to mark attendance for students, employees,

or any group of individuals.

The attendance data is immediately available, making it easy for teachers, supervisors, or

administrators to monitor attendance in real-time. The QR code-based attendance system is

highly secure as each QR code is unique and can only be used once. The system ensures that

only authorized individuals can mark attendance, reducing the risk of fraud or misuse.

Moreover, the system is cost-effective and requires minimal infrastructure or maintenance.

Keywords: Attendance, QR Code, Student, Teacher, Admin.

www.rajsms.org @Raj School of management & Sciences

 I. INTRODUCTION
The process of attendance tracking has always been a crucial and time-consuming task for

educational institutions. Traditional methods of attendance tracking such as manual sign-in

sheets or card swiping systems have proven to be inefficient and unreliable, leading to errors

and inaccuracies in record-keeping. With the advent of technology, educational institutions

have started using digital methods of attendance tracking, such as biometric systems, RFID

systems, and QR code-based systems.

To overcome these challenges, various automated attendance tracking systems have been

developed, including biometric systems, RFID systems, and QR code-based systems. Among

these, QR code-based attendance systems have gained popularity due to their simplicity,

affordability, and ease of use. In a QR code-based attendance system, each student or

employee is assigned a unique QR code that they can scan using their mobile devices, and the

attendance is automatically recorded in a database.

www.rajsms.org @Raj School of management & Sciences

In a QR code-based attendance system, each student is assigned a unique QR code that

contains their personal information such as name, ID number, and other relevant data. The

teacher generates a QR code for each class session, which is displayed on a screen or printed

on a sheet of paper. The students then scan the QR code using their smartphones, which

automatically logs their attendance in the system.

Systems for tracking attendance that use QR codes provide a number of benefits over older

technologies. Since the data is automatically recorded in real-time, they are, first and

foremost, extremely accurate and reliable. By doing this, the chance of mistakes and

inaccuracies in record-keeping is eliminated. Additionally, as the full process of attendance

tracking may be finished in a matter of seconds, QR code-based systems are significantly

faster and more effective than conventional techniques. Both teachers and students benefit

from the time savings, which enables them to concentrate on more crucial duties.

Another advantage of QR code-based attendance systems is that they are highly cost-

effective. Traditional attendance tracking methods require the use of expensive equipment

such as biometric scanners or RFID readers, which can be a significant financial burden for

educational institutions. In contrast, QR code-based systems only require a smartphone or a

dedicated QR code scanner, which is much more affordable and widely available.

An in-depth investigation of a QR code-based attendance system is provided in this research

report. The system architecture, its elements, AND its operation are described in the paper.

The effectiveness, efficiency, and user-friendliness of the system are also evaluated in the

study. The study also addresses the benefits and drawbacks of the QR code-based attendance

system in comparison to existing techniques for keeping track of attendance.

www.rajsms.org @Raj School of management & Sciences

 Prototype Design : -

www.rajsms.org @Raj School of management & Sciences

Attendance Record – this form will allow the system administrator to

manage the records of the students who recorded their attendance.

The admin will manage the following information:

 QR code

 Log date

 Arrival time

 Status -(ex. enter or exit school)

 Departure Time

 Status – (ex. enter or exit school)

Shown below is the design of the attendance record form.

www.rajsms.org @Raj School of management & Sciences

MODULES:

 QR-Code Generation

 Student

 Staff

MODULES DESCRIPTION:
QR-Code Generation:

In this module, QR code is generated in backend using zxing-javase jar file and send to the

student Email. Student need to verify the QR Code using QR code extractor to validate the

authorized student.

www.rajsms.org @Raj School of management & Sciences

Student:

In this module, Student can register their details to the database. After getting approval from

staff then they receive QR-Code by register E-mail. After student passes the authentication

process using QR code, then the student attendance will be registered to the database.

Staff:

In this module, Staff can Approve/Reject Students after student registration and staff can

access student details and view student attendance and also can search students attendance

by date.

SYSTEM REQUIREMENTS :

HARDWARE REQUIREMENTS :

 System : Pentium i3 Processor

 Hard Disk : 500 GB.

 Monitor : 15’’ LED

 Input Devices : Keyboard, Mouse

 Ram : 4 GB

SOFTWARE REQUIREMENTS:

 Operating system : Windows 10.

 Coding Language :

 Tool : Netbeans 8.2

 Database : MYSQL

www.rajsms.org @Raj School of management & Sciences

Flow Diagram :-

www.rajsms.org @Raj School of management & Sciences

Features:

1. QR Code Scanning: Students can quickly mark their attendance by scanning a unique QR

code assigned to them.

2. Real-time Updates: Attendance records are instantly updated in the system, providing

administrators with real-time insights.

3. Student Management: Easily manage student information, including names, courses, and

sections.

4. Data Visualization: Generate comprehensive reports and analytics to track attendance

trends over time.

Technologies Used:

1. PHP: The backend scripting language used for server-side logic and database interactions.

2. MySQL: A powerful relational database management system employed for storing and

retrieving attendance data efficiently.

3. Bootstrap: Incorporates Bootstrap framework for responsive and visually appealing front-

end design.

4. jQuery: Enhances interactivity and functionality of the web application.

5. Instascan: Integrates Instascan library for QR code scanning functionality.

How to Use:

1. Scan QR Code: Students should launch the QR Code Attendance System and scan their

unique QR code displayed on their devices.

2. Record Attendance: Upon successful scanning, the system automatically records the

student's attendance.

www.rajsms.org @Raj School of management & Sciences

 3. View Attendance Records: Administrators can view and manage attendance records,

including student names, courses, sections, and time in.

4. Add and Manage Students: Easily add new students to the system or update existing

student information via the provided interface.

5. Generate QR Codes: Generate QR codes for new students and associate them with their

profiles for seamless attendance tracking.

Generate QR Code – this page will allow QR code generation to record the
attendance of the student’s arrival and departure in school.
The following information will be encoded and displayed on the page:

 Student ID #
 Student Name
 QR code

The image shown below is the page design of Generate QR Code.

www.rajsms.org @Raj School of management & Sciences

E-R Diagram : -

www.rajsms.org @Raj School of management & Sciences

 II. METHODOLOGY

The methodology for a QR code based attendance system involves the following steps:

1. Designing the system architecture and deciding on the required hardware and software

components.

2. Creating a database to store information about students, teachers, classes, and attendance

records.

3. Developing an admin module for managing the system, which includes adding and

removing students and teachers, creating new classes, and generating QR codes for each

class.

4. Developing a teacher module for generating QR codes for each class and taking attendance.

5. Developing a student module for scanning the QR code and marking attendance for each

class.

6. Testing and debugging the system to ensure that it works reliably and efficiently.

7. Deploying the system in a real-world setting and monitoring its performance over time.

8. Collecting feedback from users and making improvements to the system based on their

suggestions and needs.

ALTERNATIVES TO THIS SYSTEM

1. Biometric Attendance System: Biometric attendance systems employ a person's

physiological or behavioural traits, like their fingerprints, their face, or their voice, to track

their attendance. This technique is very secure and does not allow for buddy punching or

www.rajsms.org @Raj School of management & Sciences

proxy attendance. However, compared to QR code-based solutions, it can be more expensive

to deploy, and some people could have privacy concerns.

2. RFID Attendance System: RFID (Radio Frequency Identification) attendance systems

use small electronic tags or cards that can be scanned to record attendance. This system is

similar to QR code-based attendance systems but does not require a camera or scanner to

read the tag. RFID attendance systems are suitable for large-scale attendance tracking, but

can be costly to implement.

3. Beacon Attendance System: Beacon technology uses Bluetooth Low Energy (BLE) to

track attendance. It involves placing beacons at different locations around the building, and

when students or employees enter or exit the area, their mobile devices receive a signal from

the beacon, and their attendance is recorded. Beacon attendance systems are more suitable

for large spaces and can work well in areas with poor internet connectivity. However, it

requires the user's mobile device to have Bluetooth enabled and can be more complex to set

up compared to QR code-based attendance systems.

4. Manual Attendance System: Manual attendance systems involve taking attendance

through a sign-in sheet or attendance register. This system is the simplest and most cost-

effective approach, but it is prone to errors and can be time-consuming to manage, especially

for large groups.

5. GPS-based Attendance System: GPS-based attendance systems use geolocation to

record attendance. It requires the user's mobile device to have GPS enabled, and when the

user enters or exits the designated location, their attendance is recorded. This system is

suitable for outdoor events and fieldwork but may not be as accurate as other systems, and it

can raise privacy concerns.

www.rajsms.org @Raj School of management & Sciences

PROPOSED APPROACH

The proposed approach for QR code-based attendance system is a simple yet effective

solution for streamlining attendance management in various educational and corporate

institutions. The system utilizes QR codes, which can be easily generated and scanned using

smartphones or other mobile devices, to record and track attendance.

The proposed approach involves four main steps: QR code generation, QR code scanning,

attendance record keeping, and reporting.

Firstly, the system generates unique QR codes for each student or employee, which can be

printed on ID cards or distributed through email or messaging applications. These QR codes

contain relevant information such as the student/employee's name and ID number.

Secondly, when the student or employee arrives at the designated location for attendance,

the QR code is scanned using a smartphone or other mobile device with a QR code scanner

app. The app reads the information encoded in the QR code and sends it to the system's

database for attendance recording.

Thirdly, the system maintains a record of attendance for each student or employee, which

can be accessed and viewed by authorized personnel. The attendance data can be stored in a

cloud-based database for easy and secure access.

Finally, the system provides a reporting feature that allows authorized personnel to view

attendance records for individual students or employees, as well as generate reports for

entire classes or departments. This feature can be used to monitor attendance patterns and

identify students or employees who may need additional support.

www.rajsms.org @Raj School of management & Sciences

The suggested method has a number of benefits over conventional attendance control

methods. In the first place, it does away with the necessity for human data entry, which saves

time and lowers the possibility of mistakes. Second, it offers real-time attendance

monitoring, enabling fast intervention when required. Thirdly, administrative procedures

can be further streamlined by simply integrating it with other systems.

ALGORITHM

The Reed-Solomon algorithm is commonly used in the creation of QR codes, which are two-

dimensional barcodes that store various forms of data. This algorithm generates parity

symbols that are added to the data symbols to create a code word with redundancy, allowing

the QR code to be scanned even if some symbols are damaged or missing. To achieve this, the

algorithm divides the data into blocks of symbols and generates parity symbols for each

block using polynomial division. The number of parity symbols generated is determined by

the degree of the polynomial, with higher degrees providing better error correction at the

cost of a longer code word that may affect readability. The Reed-Solomon algorithm can

correct up to 30% of damaged or missing data symbols, making QR codes reliable in the

presence of noise or interference. Overall, the Reed-Solomon algorithm is a crucial part of QR

code generation as it ensures data redundancy, making them robust and capable of handling

errors.

www.rajsms.org @Raj School of management & Sciences

 Fig 1. System Formulation

www.rajsms.org @Raj School of management & Sciences

 Fig 2. Admin Module

2 Teacher Module

A web-based program called the Teacher's Module for QR Code-Based Attendance enables

teachers to create QR codes for each of their classrooms to simplify the process of taking

attendance. The module may be accessed from any device with an internet connection and is

made to be simple to use.

The teacher's module of the QR code-based attendance system is designed to simplify the

attendance taking process. Teachers can easily generate QR codes for each of their classes,

which students can scan using their mobile devices to mark their attendance. This module

aims to save time and effort that would otherwise be spent on traditional attendance

methods such as taking roll calls.

www.rajsms.org @Raj School of management & Sciences

Teachers can easily create QR codes for each class using the user-friendly interface of the

teacher's module. Once logged in, the teacher can choose which class to take attendance for

and create a specific QR code just for that class. For students to scan, this QR code can be

shown on the teacher's tablet or projected onto a screen.

Once the QR code is generated, the teacher can instruct students to scan the code using their

mobile devices. Students can use any QR code scanner app to scan the code, which will

redirect them to a web page where they can mark their attendance. The attendance data is

then automatically uploaded to the system's database for the teacher to view and analyse.

The teacher's module of the QR code-based attendance system is a simple and effective

solution to the traditional attendance taking process.

ADD STUDENTS:-

www.rajsms.org @Raj School of management & Sciences

 Fig 3. Teachers Module

3 Student Module

The student module for QR code based attendance system provides an efficient and reliable

way for students to mark their attendance in class. This module is designed to work

seamlessly with the teacher's module, which generates unique QR codes for each class.

Students can simply scan the QR code with their smartphones to mark their attendance in

the system.

When a student scans the QR code, the system records the student's attendance, along with

the time and date of the class. This data is then automatically saved and can be accessed by

the teacher and the admin for monitoring and analysis.

To use the student module, students must first register with the system using their student

ID or other unique identifier. Once registered, students can access their class schedule and

www.rajsms.org @Raj School of management & Sciences

the corresponding QR codes for each class. They can also view their attendance records and

check their attendance status for each class.

The student module for QR code based attendance system provides a user-friendly and

efficient way for students to mark their attendance in class. By using this system, students

can avoid the hassle of traditional attendance-taking methods and ensure that their

attendance records are accurate and up-to-date.

Fig 4. Student Module

4 Working

The admin module, teacher module, and student module are the standard components of a

QR code-based attendance system.

The administrator configures the system and assigns teachers to specific classes in the admin

module. The administrator can check attendance reports for each class as well as access

attendance data. Usually, a web interface is used to access the admin module.

www.rajsms.org @Raj School of management & Sciences

In the teacher module, each teacher can generate a QR code that is displayed on the mobile

app, and students can scan the QR code to mark their attendance. The teacher can also view

attendance reports for each student and generate reports for the entire class.

In the student module, students can view their attendance records and mark their

attendance by scanning the QR code generated by the teacher. The student module is

typically accessed through a mobile application.

The working of the system involves the teacher generating a unique QR code for each class

session. The QR code contains information about the class, such as the class code and the

date and time of the class. The students scan the QR code using their mobile devices, and the

attendance is marked automatically.

IV. CONCLUSION

The QR code-based attendance system is a reliable, efficient, and convenient method of

taking attendance. The system provides a simple way to track attendance, reducing the time

and effort required to complete attendance tasks manually. It also minimizes the potential

for errors and inaccuracies that can occur when taking attendance manually.

The implementation of a QR code-based attendance system also has a positive impact on

educational institutions, particularly in terms of cost savings. It eliminates the need for costly

attendance tracking equipment and software, as it can be easily implemented using mobile

devices and open-source software.

The system provides an opportunity for students to take responsibility for their own

attendance, as they are required to scan their QR code to confirm their attendance. This helps

instil a sense of accountability among students and promotes a culture of punctuality and

attendance.

www.rajsms.org @Raj School of management & Sciences

In comparison to more traditional methods of recording attendance, the QR code-based

approach has many benefits, including improved efficiency, accuracy, and affordability.

While the system might have certain problems, especially with internet connectivity and

security, they can be avoided by taking the right steps. Overall, the QR code-based attendance

system is a promising innovation that could completely change how educational institutions

track student attendance.

V. FUTURE SCOPE

The QR code-based attendance system has a bright future scope due to the following reasons:

Improved accuracy: The QR code-based attendance system eliminates the manual recording

of attendance and reduces the possibility of errors. It ensures that the attendance data is

accurate, which is crucial for academic institutions, government organizations, and private

firms.

Time-saving: The QR code-based attendance system is significantly faster than traditional

attendance methods, such as paper-based or biometric systems. It reduces the time required

to record attendance, which can be used for other productive activities.

Cost-effective: The QR code-based attendance system is cost-effective in the long run as it

eliminates the need for paper-based systems and reduces the maintenance costs of biometric

systems.

Integration with other systems: The QR code-based attendance system can be integrated

with other systems such as student management systems, payroll systems, and human

resource management systems. This integration provides a comprehensive view of the

attendance data and allows for easy tracking of the attendance of employees or students.

www.rajsms.org @Raj School of management & Sciences

Security: The QR code-based attendance system is more secure than paper-based systems as

it reduces the possibility of fake attendance. The system can also be configured to generate a

unique QR code for each class or session, which ensures that the attendance data is accurate.

Customization: The QR code-based attendance system can be customized to meet the specific

needs of the organization. The system can be configured to generate reports, send

notifications, and track the attendance of individual students or employees.

Bibliography

Referential Site:

 https://www.w3schools.com/

 https://www.tutorialspoint.com/

 https://www.javatpoint.com/software-engineering/

 https://www.geeksforgeeks.org

www.rajsms.org @Raj School of management & Sciences

 Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QR Code Attendance System</title>

<!-- Bootstrap CSS -->

<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<style>
@import
url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');

*{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}

body {
background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15)
100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%)
#989898;
background-blend-mode: multiply,multiply;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}

.main {
display: flex;
justify-content: center;
align-items: center;
height: 91.5vh;
}

.attendance-container {
height: 90%;
width: 90%;
border-radius: 20px;
padding: 40px;

www.rajsms.org @Raj School of management & Sciences

 background-color: rgba(255, 255, 255, 0.8);
}

.attendance-container > div {

box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

border-radius: 10px;
padding: 30px;
}

.attendance-container > div:last-child {

width: 64%;
margin-left: auto;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand ml-4" href="#">QR Code Attendance System</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">

<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="./index.php">Home <span class="sr-
only">(current)</span></a>
</li>
<li class="nav-item ">
<a class="nav-link" href="./masterlist.php">List of Students</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item mr-3">
<a class="nav-link" href="#">Logout</a>
</li>
</ul>
</div>
</nav>

<div class="main">

<div class="attendance-container row">

<div class="qr-container col-4">
<div class="scanner-con">
<h5 class="text-center">Scan you QR Code here for your attedance</h5>
<video id="interactive" class="viewport" width="100%">

www.rajsms.org @Raj School of management & Sciences

 </div>

<div class="qr-detected-container" style="display: none;">

<form action="./endpoint/add-attendance.php" method="POST">
<h4 class="text-center">Student QR Detected!</h4>
<input type="hidden" id="detected-qr-code" name="qr_code">
<button type="submit" class="btn btn-dark form-control">Submit
Attendance</button>
</form>
</div>
</div>

<div class="attendance-list">
<h4>List of Present Students</h4>
<div class="table-container table-responsive">
<table class="table text-center table-sm" id="attendanceTable">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Course & Section</th>
<th scope="col">Time In</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>

<?php
include ('./conn/conn.php');

$stmt = $conn->prepare("SELECT * FROM tbl_attendance LEFT JOIN

tbl_student ON tbl_student.tbl_student_id = tbl_attendance.tbl_student_id");
$stmt->execute();

$result = $stmt->fetchAll();

foreach ($result as $row) {

$attendanceID = $row["tbl_attendance_id"];
$studentName = $row["student_name"];
$studentCourse = $row["course_section"];
$timeIn = $row["time_in"];
?>

<tr>
<th scope="row"><?= $attendanceID ?></th>
<td><?= $studentName ?></td>
<td><?= $studentCourse ?></td>
<td><?= $timeIn ?></td>
<td>
<div class="action-button">
<button class="btn btn-danger delete-button"
onclick="deleteAttendance(<?= $attendanceID ?>)">X</button>
</div>
</td>

www.rajsms.org @Raj School of management & Sciences

 </tr>

<?php
}
?>
</tbody>
</table>
</div>
</div>

</div>

</div>

<!-- Bootstrap JS -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

<!-- instascan Js -->

<script src="https://rawgit.com/schmich/instascan-
builds/master/instascan.min.js"></script>

<script>

let scanner;

function startScanner() {
scanner = new Instascan.Scanner({ video: document.getElementById('interactive') });

scanner.addListener('scan', function (content) {

$("#detected-qr-code").val(content);
console.log(content);
scanner.stop();
document.querySelector(".qr-detected-container").style.display = '';
document.querySelector(".scanner-con").style.display = 'none';
});

Instascan.Camera.getCameras()
.then(function (cameras) {
if (cameras.length > 0) {
scanner.start(cameras[0]);
} else {
console.error('No cameras found.');
alert('No cameras found.');
}
})
.catch(function (err) {
console.error('Camera access error:', err);
alert('Camera access error: ' + err);

www.rajsms.org @Raj School of management & Sciences

 });
}

document.addEventListener('DOMContentLoaded', startScanner);

function deleteAttendance(id) {
if (confirm("Do you want to remove this attendance?")) {
window.location = "./endpoint/delete-attendance.php?attendance=" + id;
}
}
</script>
</body>
</html>

www.rajsms.org @Raj School of management & Sciences

 qr_attendance_db.sql

-- phpMyAdmin SQL Dump

-- version 5.2.1
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Mar 13, 2024 at 09:06 AM
-- Server version: 10.4.32-MariaDB
-- PHP Version: 8.2.12

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";

START TRANSACTION;
SET time_zone = "+00:00";

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;

/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `qr_attendance_db`
--

-- --------------------------------------------------------

--
-- Table structure for table `tbl_attendance`
--

CREATE TABLE `tbl_attendance` (

`tbl_attendance_id` int(11) NOT NULL,
`tbl_student_id` int(11) NOT NULL,
`time_in` timestamp NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=latin1 COLLATE=latin1_swedish_ci;

--
-- Dumping data for table `tbl_attendance`
--

INSERT INTO `tbl_attendance` (`tbl_attendance_id`, `tbl_student_id`, `time_in`) VALUES

(2, 1, '2024-03-13 00:45:37');

-- --------------------------------------------------------

www.rajsms.org @Raj School of management & Sciences

--
-- Table structure for table `tbl_student`
--

CREATE TABLE `tbl_student` (

`tbl_student_id` int(11) NOT NULL,
`student_name` varchar(255) NOT NULL,
`course_section` varchar(255) NOT NULL,
`generated_code` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1 COLLATE=latin1_swedish_ci;

--
-- Dumping data for table `tbl_student`
--

INSERT INTO `tbl_student` (`tbl_student_id`, `student_name`, `course_section`, `generated_code`) VALUES

(1, 'Samantha', 'BSIS 4B', 'KIYkAk6ZRV');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `tbl_attendance`
--
ALTER TABLE `tbl_attendance`
ADD PRIMARY KEY (`tbl_attendance_id`);

--
-- Indexes for table `tbl_student`
--
ALTER TABLE `tbl_student`
ADD PRIMARY KEY (`tbl_student_id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `tbl_attendance`
--
ALTER TABLE `tbl_attendance`
MODIFY `tbl_attendance_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;

--
-- AUTO_INCREMENT for table `tbl_student`
--
ALTER TABLE `tbl_student`
MODIFY `tbl_student_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;

/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

www.rajsms.org @Raj School of management & Sciences

 Masterlist.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QR Code Attendance System</title>

<!-- Bootstrap CSS -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<!-- Data Table -->

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.css" />

<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');

*{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}

body {
background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-
gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
background-blend-mode: multiply,multiply;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}

.main {
display: flex;
justify-content: center;
align-items: center;
height: 91.5vh;
}

.student-container {
height: 90%;
width: 90%;
border-radius: 20px;
padding: 40px;

www.rajsms.org @Raj School of management & Sciences

 background-color: rgba(255, 255, 255, 0.8);
}

.student-container > div {

box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
border-radius: 10px;
padding: 30px;
height: 100%;
}

.title {
display: flex;
justify-content: space-between;
align-items: center;
}

table.dataTable thead > tr > th.sorting, table.dataTable thead > tr > th.sorting_asc, table.dataTable thead >
tr > th.sorting_desc, table.dataTable thead > tr > th.sorting_asc_disabled, table.dataTable thead > tr >
th.sorting_desc_disabled, table.dataTable thead > tr > td.sorting, table.dataTable thead > tr > td.sorting_asc,
table.dataTable thead > tr > td.sorting_desc, table.dataTable thead > tr > td.sorting_asc_disabled,
table.dataTable thead > tr > td.sorting_desc_disabled {
text-align: center;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand ml-4" href="#">QR Code Attendance System</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">

<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="./index.php">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="./masterlist.php">List of Students</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item mr-3">
<a class="nav-link" href="#">Logout</a>
</li>
</ul>
</div>
</nav>

<div class="main">

<div class="student-container">

www.rajsms.org @Raj School of management & Sciences

 <div class="student-list">
<div class="title">
<h4>List of Students</h4>
<button class="btn btn-dark" data-toggle="modal" data-target="#addStudentModal">Add
Student</button>
</div>
<hr>
<div class="table-container table-responsive">
<table class="table text-center table-sm" id="studentTable">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Course & Section</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>

<?php
include ('./conn/conn.php');

$stmt = $conn->prepare("SELECT * FROM tbl_student");

$stmt->execute();

$result = $stmt->fetchAll();

foreach ($result as $row) {

$studentID = $row["tbl_student_id"];
$studentName = $row["student_name"];
$studentCourse = $row["course_section"];
$qrCode = $row["generated_code"];
?>

<tr>
<th scope="row" id="studentID-<?= $studentID ?>"><?= $studentID ?></th>
<td id="studentName-<?= $studentID ?>"><?= $studentName ?></td>
<td id="studentCourse-<?= $studentID ?>"><?= $studentCourse ?></td>
<td>
<div class="action-button">
<button class="btn btn-success btn-sm" data-toggle="modal" data-
target="#qrCodeModal<?= $studentID ?>"><img src="https://cdn-icons-
png.flaticon.com/512/1341/1341632.png" alt="" width="16"></button>

<!-- QR Modal -->

<div class="modal fade" id="qrCodeModal<?= $studentID ?>" tabindex="-1" aria-
hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><?= $studentName ?>'s QR Code</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>

www.rajsms.org @Raj School of management & Sciences

 </div>
<div class="modal-body text-center">
<img src="https://api.qrserver.com/v1/create-qr-
code/?size=150x150&data=<?= $qrCode ?>" alt="" width="300">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

<button class="btn btn-secondary btn-sm" onclick="updateStudent(<?= $studentID

?>)">&#128393;</button>
<button class="btn btn-danger btn-sm" onclick="deleteStudent(<?= $studentID
?>)">&#10006;</button>
</div>
</td>
</tr>

<?php
}
?>
</tbody>
</table>
</div>
</div>
</div>

</div>

<!-- Add Modal -->

<div class="modal fade" id="addStudentModal" data-backdrop="static" data-keyboard="false" tabindex="-
1" aria-labelledby="addStudent" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addStudent">Add Student</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form action="./endpoint/add-student.php" method="POST">
<div class="form-group">
<label for="studentName">Full Name:</label>
<input type="text" class="form-control" id="studentName" name="student_name">
</div>
<div class="form-group">
<label for="studentCourse">Course and Section:</label>
<input type="text" class="form-control" id="studentCourse" name="course_section">
</div>
<button type="button" class="btn btn-secondary form-control qr-generator"

www.rajsms.org @Raj School of management & Sciences

onclick="generateQrCode()">Generate QR Code</button>

<div class="qr-con text-center" style="display: none;">

<input type="hidden" class="form-control" id="generatedCode" name="generated_code">
<p>Take a pic with your qr code.</p>
<img class="mb-4" src="" id="qrImg" alt="">
</div>
<div class="modal-footer modal-close" style="display: none;">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-dark">Add List</button>
</div>
</form>
</div>
</div>
</div>
</div>

<!-- Update Modal -->

<div class="modal fade" id="updateStudentModal" data-backdrop="static" data-keyboard="false"
tabindex="-1" aria-labelledby="updateStudent" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="updateStudent">Update Student</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form action="./endpoint/update-student.php" method="POST">
<input type="hidden" class="form-control" id="updateStudentId" name="tbl_student_id">
<div class="form-group">
<label for="updateStudentName">Full Name:</label>
<input type="text" class="form-control" id="updateStudentName" name="student_name">
</div>
<div class="form-group">
<label for="updateStudentCourse">Course and Section:</label>
<input type="text" class="form-control" id="updateStudentCourse" name="course_section">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-dark">Add</button>
</div>
</form>
</div>
</div>
</div>
</div>

<!-- Bootstrap JS -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

www.rajsms.org @Raj School of management & Sciences

 <!-- Data Table -->
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.js"></script>

<script>
$(document).ready( function () {
$('#studentTable').DataTable();
});

function updateStudent(id) {
$("#updateStudentModal").modal("show");

let updateStudentId = $("#studentID-" + id).text();

let updateStudentName = $("#studentName-" + id).text();
let updateStudentCourse = $("#studentCourse-" + id).text();

$("#updateStudentId").val(updateStudentId);
$("#updateStudentName").val(updateStudentName);
$("#updateStudentCourse").val(updateStudentCourse);
}

function deleteStudent(id) {
if (confirm("Do you want to delete this student?")) {
window.location = "./endpoint/delete-student.php?student=" + id;
}
}

function generateRandomCode(length) {
const characters = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
let randomString = '';

for (let i = 0; i < length; i++) {

const randomIndex = Math.floor(Math.random() * characters.length);
randomString += characters.charAt(randomIndex);
}

return randomString;
}

function generateQrCode() {
const qrImg = document.getElementById('qrImg');

let text = generateRandomCode(10);

$("#generatedCode").val(text);

if (text === "") {

alert("Please enter text to generate a QR code.");
return;
} else {
const apiUrl = `https://api.qrserver.com/v1/create-qr-
code/?size=150x150&data=${encodeURIComponent(text)}`;

qrImg.src = apiUrl;
document.getElementById('studentName').style.pointerEvents = 'none';

www.rajsms.org @Raj School of management & Sciences

 document.getElementById('studentCourse').style.pointerEvents = 'none';
document.querySelector('.modal-close').style.display = '';
document.querySelector('.qr-con').style.display = '';
document.querySelector('.qr-generator').style.display = 'none';
}
}
</script>

</body>
</html>

conn/conn.php

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "qr_attendance_db";

try {
$conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e) {
echo "Connection failed: " . $e->getMessage();
}
?>

www.rajsms.org @Raj School of management & Sciences

 endpoint/add-attendance.php

<?php
include("../conn/conn.php");

if ($_SERVER['REQUEST_METHOD'] === 'POST') {

if (isset($_POST['qr_code'])) {
$qrCode = $_POST['qr_code'];

$selectStmt = $conn->prepare("SELECT tbl_student_id FROM tbl_student WHERE generated_code =

:generated_code");
$selectStmt->bindParam(":generated_code", $qrCode, PDO::PARAM_STR);

if ($selectStmt->execute()) {
$result = $selectStmt->fetch();
if ($result !== false) {
$studentID = $result["tbl_student_id"];
$timeIn = date("Y-m-d H:i:s");
} else {
echo "No student found in QR Code";
}
} else {
echo "Failed to execute the statement.";
}

try {
$stmt = $conn->prepare("INSERT INTO tbl_attendance (tbl_student_id, time_in) VALUES
(:tbl_student_id, :time_in)");

$stmt->bindParam(":tbl_student_id", $studentID, PDO::PARAM_STR);

$stmt->bindParam(":time_in", $timeIn, PDO::PARAM_STR);

$stmt->execute();

header("Location: http://localhost/qr-code-attendance-system/index.php");

exit();
} catch (PDOException $e) {
echo "Error:" . $e->getMessage();
}

} else {
echo "
<script>
alert('Please fill in all fields!');
window.location.href = 'http://localhost/qr-code-attendance-system/index.php';
</script>
";
}
}
?>

www.rajsms.org @Raj School of management & Sciences

 endpoint/delete-attendance.php

<?php
include ('../conn/conn.php');

if (isset($_GET['attendance'])) {
$attendance = $_GET['attendance'];

try {

$query = "DELETE FROM tbl_attendance WHERE tbl_attendance_id = '$attendance'";

$stmt = $conn->prepare($query);

$query_execute = $stmt->execute();

if ($query_execute) {
echo "
<script>
alert('Attendance deleted successfully!');
window.location.href = 'http://localhost/qr-code-attendance-system/index.php';
</script>
";
} else {
echo "
<script>
alert('Failed to delete attendance!');
window.location.href = 'http://localhost/qr-code-attendance-system/index.php';
</script>
";
}

} catch (PDOException $e) {

echo "Error: " . $e->getMessage();
}
}

?>

www.rajsms.org @Raj School of management & Sciences

 endpoint/delete-student.php

<?php
include ('../conn/conn.php');

if (isset($_GET['student'])) {
$student = $_GET['student'];

try {

$query = "DELETE FROM tbl_student WHERE tbl_student_id = '$student'";

$stmt = $conn->prepare($query);

$query_execute = $stmt->execute();

if ($query_execute) {
echo "
<script>
alert('Student deleted successfully!');
window.location.href = 'http://localhost/qr-code-attendance-system/masterlist.php';
</script>
";
} else {
echo "
<script>
alert('Failed to delete student!');
window.location.href = 'http://localhost/qr-code-attendance-system/masterlist.php';
</script>
";
}

} catch (PDOException $e) {

echo "Error: " . $e->getMessage();
}
}

?>

www.rajsms.org @Raj School of management & Sciences

 endpoint/update-student.php

<?php
include("../conn/conn.php");

if ($_SERVER['REQUEST_METHOD'] === 'POST') {

if (isset($_POST['student_name'], $_POST['course_section'])) {
$studentId = $_POST['tbl_student_id'];
$studentName = $_POST['student_name'];
$studentCourse = $_POST['course_section'];

try {
$stmt = $conn->prepare("UPDATE tbl_student SET student_name = :student_name, course_section =
:course_section WHERE tbl_student_id = :tbl_student_id");

$stmt->bindParam(":tbl_student_id", $studentId, PDO::PARAM_STR);

$stmt->bindParam(":student_name", $studentName, PDO::PARAM_STR);
$stmt->bindParam(":course_section", $studentCourse, PDO::PARAM_STR);

$stmt->execute();

header("Location: http://localhost/qr-code-attendance-system/masterlist.php");

exit();
} catch (PDOException $e) {
echo "Error:" . $e->getMessage();
}

} else {
echo "
<script>
alert('Please fill in all fields!');
window.location.href = 'http://localhost/qr-code-attendance-system/masterlist.php';
</script>
";
}
}
?>

www.rajsms.org @Raj School of management & Sciences