FRONTEND IMPLEMENTATION OF AN ONLINE QR CODE-BASED

ATTENDANCE SYSTEM

BY

IKOGWE ASSURANCE

PSC1808845

DEPARTMENT OF COMPUTER SCIENCE,

FACULTY OF PHYSICAL SCIENCES,

UNIVERSITY OF BENIN,

BENIN CITY,

EDO STATE, NIGERIA.

JUNE 2023
 FRONTEND IMPLEMENTATION OF AN ONLINE QR CODE-BASED
ATTENDANCE SYSTEM

BY

IKOGWE ASSURANCE

PSC1808845

A PROJECT REPORT SUBMITTED TO THE DEPARTMENT OF COMPUTER

SCIENCE, FACULTY OF PHYSICAL SCIENCES, UNIVERSITY OF BENIN, BENIN
CITY

IN PARTIAL FULFILMENT OF THE REQUIREMENT FOR THE AWARD OF A

BACHELOR OF SCIENCE (B.Sc.) DEGREE IN COMPUTER SCIENCE

JUNE 2023
 CERTIFICATION

This is to certify that this project work was carried out by IKOGWE ASSURANCE with
Matriculation Number PSC1808845 under my supervision. It is adequate and satisfactory,
both in scope and content, for the award of Bachelor of Science (B.sc) Degree in Computer
Science of the University of Benin

PROF. (MRS.) A.O. EGWALI DATE

Project Supervisor

i
 APPROVAL

This project work is hereby approved in partial fulfilment of the requirements for the award
of Bachelor of Science (B.Sc.) Degree in Computer Science from the University of Benin.

PROF. (MRS.) A.O. EGWALI DATE

Head of Department

ii
 DEDICATION

This project is dedicated to God Almighty for giving me the strength and wisdom to see it
through to completion, and even throughout my stay in the University of Benin (UNIBEN). It
is also dedicated to my parents; Mr and Mrs Ikogwe and my brother Master Benedict Ikogwe;
for their love, support and guidance throughout my academic journey.

iii
 ACKNOWLEDGEMENT

My utmost acknowledgement goes to God Almighty for giving me the strength, wisdom and
direction throughout my academic journey. I would like to express my gratitude to my project
supervisor who is also the Head of the Department Of Computer Science, Prof. (Mrs.) A.O.
Egwali for her consistent guidance towards ensuring the successful completion of this
project.

I would also like to specially thank my project coordinator Dr. (Mrs.) A.R. Usiobaifo, and
other lecturers in the Department of Computer Science who I have been opportune to cross
paths with, and have impacted me immensely these past few years: Prof. G.O. Ekuobase, Dr.
F.O. Oliha, Prof. K.C. Ukaoha, Prof. A.A. Imiavan, Prof. (Mrs.) F. Egbokhare, Prof. (Mrs.)
V.V.N. Akwukwuma, Prof. F.I. Amadin, Prof. (Mrs.) S. Konyeha, Prof. (Mrs.) V.I. Osubor,
Dr. (Mrs.) Aziken, Dr. F.O. Chete, Dr. (Mrs) R.O. Osaseri, Dr. J.C. Obi, Mr. P. E.B. Imiefoh,
Mr. I.E. Obasohan, Mr. S.O.P. Oliomogbe, Mr. K.O. Otokiti, Mr. I.E. obayagbonna, Mrs. R.I.
Izevbizua, Mr. E.C. Igodan, Miss L.O.Usiosefe, Mr J. Okhuoya, Prof. F.A.U. Imouokhome,
Mrs. J.I. Adun, Dr. E. Nweli and Mr. D.N. Idehen.

Finally, I also want to appreciate those who contributed to the success of this project: Abada
Emmanuel Obaro, Felix Frank-Felix Ikechukwu, Omoruyi Esther Iyobosa, Onyibe
Chukuwuazonim Justina, Oriakhi Cletus, and Osariemen Dainel Osazee. I would also like to
thank my family and friends for their support, words of encouragement, and consistent
guidance throughout this project.

iv
 TABLE OF CONTENTS
CERTIFICATION....................................................................................................................i
APPROVAL.............................................................................................................................ii
DEDICATION........................................................................................................................iii
ACKNOWLEDGEMENT......................................................................................................iv
TABLE OF CONTENTS.........................................................................................................v
LIST OF FIGURES...............................................................................................................vii
LIST OF TABLES................................................................................................................viii
ABSTRACT.............................................................................................................................ix
CHAPTER ONE.......................................................................................................................1
INTRODUCTION....................................................................................................................1
1.0 Background Study.......................................................................................................1
1.1 Motivation...................................................................................................................3
1.2 Problem Definition......................................................................................................3
1.3 Goal and Objectives....................................................................................................4
1.4 Scope of Research.......................................................................................................4
1.5 Research Methodology................................................................................................4
1.6 Research Significance.................................................................................................4
CHAPTER TWO.....................................................................................................................6
LITERATURE REVIEW........................................................................................................6
2.1 Examination Attendance System: An Overview.........................................................6
2.2 Examination Attendance System in Nigeria Federal Universities..............................9
2.3 Traditional / Manual Attendance System..................................................................10
2.3.1 Roaster Method..................................................................................................11
2.3.2 Sign-Up Sheet....................................................................................................11
2.3.3 Seating Plans......................................................................................................11
2.4 Disadvantages of Traditional Attendance System.....................................................12
2.5 Automated Attendance System.................................................................................13
2.5.1 Biometric: Face Recognition Attendance System..............................................13
2.5.2 Radio Frequency Identification Technologies...................................................14
2.5.3 Biometric: Fingerprint Attendance System........................................................15
2.5.4 Bar Code Attendance System.............................................................................16

v
 2.5.5 Qr Code Attendance System..............................................................................17
2.6 Benefits of Modern Attendance System....................................................................18
2.7 Qr Code Based Online Attendance System...............................................................20
2.8 Why Qr Code Based Online Attendance System......................................................23
2.9 Related Works...........................................................................................................24
CHAPTER THREE...............................................................................................................27
SYSTEM ANALYSIS AND DESIGN..................................................................................27
3.1 System Analysis........................................................................................................27
3.2 Analysis of Existing System......................................................................................27
3.3 Problem of Existing System......................................................................................29
3.4 Overview of Proposed System..................................................................................29
3.5 Proposed System Architecture and Interface............................................................30
3.6 System Design...........................................................................................................35
3.7 System Design Tools.................................................................................................35
3.8 System Design Tool: UML.......................................................................................36
3.9 UML – Use Case Diagram........................................................................................36
3.10 UML – State Machine Diagram................................................................................40
3.11 UML – Class Diagram...............................................................................................41
CHAPTER FOUR..................................................................................................................44
SYSTEM IMPLEMENTATION..........................................................................................44
4.1 Software Implementation Tools................................................................................44
4.2 User Documentation – System Testing.....................................................................45
4.3 Screenshots of the Running System..........................................................................47
4.4 System Usability Evaluation.....................................................................................52
CHAPTER FIVE....................................................................................................................56
SUMMARY AND CONCLUSION.......................................................................................56
5.1 Summary....................................................................................................................56
5.2 Conclusion.................................................................................................................57
REFERENCES.......................................................................................................................58
APPENDIX.............................................................................................................................61

vi
 LIST OF FIGURES

Figure 1 - Examination Pass for 2020/2021 Academic Session................................................8

Figure 2 - Examination Sign-up Sheet.......................................................................................9
Figure 3 - Facial Recognition Attendance System (Alena, 2020)...........................................13
Figure 4 - Radio Frequency Identification Attendance System (ETCS, 2023)........................14
Figure 5 – Biometric Fingerprint Attendance System (Vitasek, 2021)...................................15
Figure 6 - Bar Code Attendance System..................................................................................16
Figure 7 - QR Code Attendance System..................................................................................17
Figure 8 - Statictics of smartphone users. (Turner, 2023)........................................................19
Figure 3.1 Online QR Code Attendance System Architecture................................................27
Figure 3.2 Online QR Code Attendance System Interface......................................................28
Figure 3.3 Use case Diagram for Student Profile....................................................................32
Figure 3.4 Use case Diagram for Admin Dashboard...............................................................33
Figure 3.5 State Machine Diagram for Attendance Tracking Status.......................................35
Figure 3.14 Class Diagram for the Attendance System...........................................................36
Figure 4.1 Admin and Student's Login Page............................................................................39
Figure 4.2 NACOSS SMP Student’s Upload Page..................................................................40
Figure 4.3 NACOSS SMP Student’s Profile Page and QR Code Slip.....................................40
Figure 4.4 NACOSS SMP Admin’s Dashboard......................................................................41
Figure 4.5 Exam Attendance Page...........................................................................................42
Figure 4.6 Take Attendance Page and the QR Code Scanner..................................................43
Figure 4.7 Courses Page...........................................................................................................43
Figure 4.8 Manage Admins Page (View, Add, and Delete admins)........................................44

LIST OF TABLES

Table 2.1 Summary Table of Related Works...........................................................................20

Table 3.1 Use Case Notations and Descriptions......................................................................28
Table 3.2 State Machine Diagram Notations and Descriptions...............................................32
Table 3.3 Class Diagram Notations and Descriptions.............................................................33
Table 4.1 User’s Usability Scores Table..................................................................................45

vii
viii
 ABSTRACT

Attendance tracking during examinations is one of the most important activities in any
institution, as it directly influences the integrity of the examination process. So far the manual
methods adopted like use of seating plans, examination pass, roaster call, etc. have proven to
be inadequate, extremely time consuming and labor intensive amongst other disadvantages.

This project emphasis on the need to adopt more automated methods of attendance tracking
during examinations, these methods includes biometric attendance systems, bar code
attendance systems, radio frequency identification attendance systems, etc. Taking into
consideration the constraints and the scope of the project which is the University Of Benin,
Department Of Computer Science, the method proposed by this project is an Online QR
code-based Attendance System.

However, this project focuses on only the front-end implementation of this automated
attendance system, where students can upload their course registration slips, download their
QR Code Slip and the attendance is recorded by scanning the QR code on this slip. This
project makes use of the Object oriented approach to system analysis and design; use case,
class and state machine diagrams were used to represent designs for the system architecture.
These designs served as the framework for the system, the system can handle the whole
process of attendance tracking, from student validation to providing an attendance record for
the various courses offered by the Department Of Computer Science.

ix
 CHAPTER ONE

INTRODUCTION

1.0 Background Study

In most universities, during examinations, there is a need for an attendance; to ensure
that students are present during their scheduled exams and to maintain the integrity of
the examination process. The methods of taking exam attendance vary between
universities and even between departments of the same universities.

It started by employing manual means like roaster or student id checks, where a

roaster or class list containing the picture and other details of the student is in the
possession of the invigilator. Every student signs or marks their presence on the roaster
or provides their identification number.

There’s also the use sign-in sheet where students sign in their names and provide their
identification number and exam booklet number. Lastly, another traditional method is
the use of seating plans, students sits according to their assigned serial number, and
their attendance is verified by matching their presence with the seating plan.

These manual methods have a lot of disadvantages; it is incredibly time-consuming and

labor-intensive as it needs the involvement of several staff members, and requires a lot
of resources to implement. And it is paper-driven; papers can be easily misplaced or
tampered with.

However, with the advancement in technology and the explosion of the internet and the
World Wide Web, methods such as online attendance systems; which involves the
students logging into a designated platform with their credentials and taking their
attendance digitally has been developed. This method is ineffective, as a student not
slated for the examination can partake in the process, compromising the integrity of the
examination process.

1
Another method is the bar-coded or scannable examination cards, issued to the
students by the university and swapped upon entry into the examination halls. The
student’s attendance is then automatically recorded. This method also has
disadvantages; it requires a barcode scanner, which emits light and collects reflected
light to decode the barcode. It is labor intensive (must be scanned individually) and
susceptible to environmental damage. If scratched or crumpled, barcodes may cause
problems in scanning (RF, 2012).

Lastly, we have biometric identification systems; these systems utilize fingerprint or

facial recognition technology to identify and record the presence of students. Students
register their biometric data beforehand, and the system matches it during the exam
attendance process.

This method is time-consuming (scanned individually) and expensive to implement.

However, after an in-depth analysis of the methods highlighted in the paragraphs above,
considering their challenges, we propose an Online QR Code-Based Attendance
System. It eliminates the limitations posed by the bar code, as it can hold more
information. A QR code can go up to 2500 characters, and 25 characters for a barcode.
(Rentman, 2011).

QR codes are easier to read than barcodes, as you have to aim the barcode scanner in
line with the bar code; a QR code can be scanned even with a mobile phone, also when
you have many items to capture, you won’t have to align the mobile phone precisely
every time. QR codes work even when damaged; they have a high error correction
margin. So even if around 30% of the code is unreadable (erased, damaged, dirty), the
code still works (Rentman, 2011).

This system is built specifically for the University of Benin, Department of Computer
Science, beforehand; the department makes use of examination pass to ensure that
students present have registered for their courses, as they submit their course
registration slips to obtain their examination pass and the sign in sheets to account for
the student’s booklet number for cases of missing scripts.

2
This project is concerned with creating an alternative to the examination pass; as it is
immensely stressful for the students, they have to queue up at the department before
getting their exam pass. It also stands the risk of falsehood, during the just concluded
examination, a student (Frank-Felix, 2023) testified concerning how another student
made a fake copy of the examination pass. The proposed system as stated above, is an
online QR code-based attendance system with two sides, the user side where the
students sign in to the online platform with their emails and matriculation number,
upload their course registration slip, from there we get to know the examinations the
student is slated for. The student is then given a pdf file containing the unique QR code
as well as his/her details, this QR code is then scanned, to take the student’s attendance
for that examination. At the end of the day, the lecturer can login in at the administrator
side of the platform to get the examination attendance for each course.

1.1 Motivation
Examinations are an integral part of any institution, an attendance system must be in
place to checkmate malpractice and ensure the overall integrity of the entire process. In
federal universities, where lecturers have to deal with a large population of students,
manual means of taking attendance will not stand the test of time. It therefore means
that there is a need to leverage on existing technologies so as to provide a stress-free,
fast, less labor-intensive method of accounting for the student’s attendance in
examinations.

1.2 Problem Definition

In Nigeria, Federal universities account for the university with the highest population of
students (Sasu, 2023), having this in mind; conducting examinations are usually very
stressful for both the academic and non-academic staffs. One of their major concerns is
how to maintain the integrity of the examination process, for this to be possible there
has to be an adequate examination attendance system. The manual approach adopted so
far cannot accurately and efficiently account for the attendance given the population of
the students. There is also the issue of impersonation, where a student not slated for an
examination writes the paper for another student; so far the measures erected to curb
this are still not sufficient enough. Even with an examination pass, the integrity of the

3
examination is still not catered for; as students can present fake ID’s which the said
invigilator may fail to identify. With the advancement of technology, the methods
invented are either time consuming, requires a lot of resources to implement or labor
intensive. There is a need for a system that will not break the pockets of the university,
less labor intensive and takes advantage of technology.

1.3 Goal and Objectives

The goal of this research project is to provide the University of Benin, Department of
Computer Science an alternative to the traditional means of validating student’s course
registration and taking exam attendance. The system aims achieve the following
objectives:

i. To create a system for validating course registration.

ii. To develop a computerized exam attendance system.
iii. To develop a system compatible with the current university system.
iv. To develop a system that promotes user accessibility and user experience.
v. To enable real-time attendance tracking.

1.4 Scope of Research

This project focuses of the front-end implementation of an online Qr code-based
attendance system, built to take examination attendance of students, using the
University of Benin, Department of Computer Science as a case study.

1.5 Research Methodology

This project made use of Object-Oriented Analysis and Design Methodology (OOAD),
which is the process of analysing and designing a system as a set of components and
objects. It made use of the observation approach for analysis of related and relevant
documents on the area of interest to establish the need and necessity of the proposed
system and after that ended with a conclusion and summary.

1.6 Research Significance

With the advancement in technology and the need to cater for the attendance needs of
the Department of Computer Science, UNIBEN, given its large population; this online
QR code-based attendance system will help to realise the following:

4
1. It would help the department ensure that every student registers their course,
thereby curbing the issues arising from late/no registration of courses by
students.
2. It would help the department account for the examination attendance of
students for every semester with ease; even providing a permanent record of
examination attendance that will not consume any physical space, as against
the use of papers.
3.

5
 CHAPTER TWO

LITERATURE REVIEW

This chapter gives an overview of examination attendance systems from a global

perspective. It went further to narrow it down to Nigeria and more specifically Federal
Universities with the University of Benin, Department of Computer Science as a case
study. It then discusses the traditional/manual attendance system, their disadvantages,
the modern attendance system and the benefits of using them.

2.1 Examination Attendance System: An Overview

The concept of examination was invented in the late 19th century by an American
Businessman and a philanthropist named Henry Fischel; China was the first country to
implement this concept nationwide and conducted the first-ever examination known as
the Imperial Examination (Aishwarya, 2023). The imperial examination was introduced
by the Sui Dynasty in 605 Ad to recruit candidates for specific government posts, the
system was considered to select people based on merit rather than birth (Aishwarya,
2023).

This concept has grown beyond China and its now adopted in most, if not all parts of
the world as a system for grading of not just candidates of a particular government post,
but also in job recruitment by companies and majorly in academics for grading students’
performance in all aspects, that is in sports, in academics, etc.

Examinations usually require the physical presence of the students, however due to the
COVID19 pandemic, a number of activities previously undertaken on campus are
becoming online activities; this includes exams, so we now have physical and online
exams (Frederiks, 2021). Regardless of whether it’s a physical or online exam, there are
majorly three (3) types of examinations namely:

1. Closed Examination: In these exams, the student is allowed to bring only

his/her writing and drawing instruments. In the case of mathematics and
statistics exams, formula sheets may or may not be provided (Frederiks, 2021).
2. Restricted Examination: Here, the students are only allowed to bring specific
things such as a single page of notes, or in the case of maths exams, a calculator

6
 or a formula sheet. You may also be required to hand in your notes or formula
sheet with your exam paper. (Frederiks, 2021)
3. Open Examination: These exams allow you to have access to any printed or
written material and a calculator (if required) during the exam. If you are
completing your exam online, you may also be able to access online resources.
The emphasis in open book exams is on conceptual understanding and
application of knowledge rather than just the ability to recall facts. (Frederiks,
2021)

With the concept of examination introduced, there arises the need for an appropriate
attendance system for the following reasons:

i. To curb academic impersonation during examination.

ii. To keep record of students present for the examination process.
iii. To keep track of student’s booklet number.
iv. To maintain the integrity of the examination process.

Examination attendance system spans from using the pen and paper approach to taking
leverage of technology using automated systems. So, therefore there are two main types
of attendance systems namely:

1. Traditional / Manual Systems: Here we have roaster and student id checks,

sign-up sheets, and seating plans, etc.
2. Automated Systems: The examples here are face recognition, RFID systems,
biometric systems, code scanning, etc.

Regardless of the type of attendance system used, an attendance system must consist of
two components namely:

i. Authentication: The attendance must include a means of verifying whether the

said student is a student of that faculty or department and if he or she is slated
for the current examination.
ii. Attendance Tracking: The attendance system must also have a means of
accounting for the record of students present for the examination.

7
2.2 Examination Attendance System in Nigeria Federal Universities

In Nigeria, most federal universities make use of the examination sign-up sheet in
conjunction with the student’s identification card (ID card) as their examination
attendance system. In the University Of Benin, the focus of this research paper; all her
faculties and departments alike adopts this attendance system for their examination
process.

This research paper focuses on the Department of Computer Science; where students are
required to register their courses online, pay their respective dues and then collect their
examination pass from the department. A picture of the examination pass is shown
below

Figure 1 - Examination Pass for 2020/2021 Academic Session.

On the slated day for an examination, the examination pass serves as a means of
authenticating the student, as you can see in Figure 1 above, it contains the students
name, matriculation number, passport photograph and the list of courses the student
registered. A sign-up sheet is also used as to take the attendnace of the student, that is to
verify that a student was present in the exam hall for his/her exam.

This sign-up sheet contains the following fields: serial number, name, matriculation
number, faculty code (e.g PSC for Physical Science), department code (e.g CSC for
Computer Science), the examination booklet number and the student’s signature; a
structure is seen below

8
 Figure 2 - Examination Sign-up Sheet.

With the population of students’ federal universities, such as the University Of Benin
have to cater for; you guess right! This traditional method is very ineffective and
incredibly time wasting, as well as labor intensive. Before going forward, it is necessary
to reiterate that this research paper focuses on the University Of Benin, Department of
Computer Science, analysing her examination system and providing an alternative
solution to the current system.

2.3 Traditional / Manual Attendance System

A manual attendance system is a traditional system that requires students to fill in

attendance sheets manually, although it comes with some advantages like it is cheaper
to implement, it is simple to use, and does not involve the use of internet connection,
but it comes with a lot of disadvantages that cannot be ignored.

Manual examination attendance systems can vary between universities and even across
different departments within the same university, but some of the known methods are:

i. Roaster Method
ii. Sign-in Sheet
iii. Seating Plans

Each of these methods is briefly discussed in subsequent sub sections below. In manual
examination attendance system, student ID card is usually used for the authentication
process. Student ID checks entail confirming the identities of students by contrasting

9
their physical characteristics with the identification cards supplied by their universities.
Prior to entering the exam room or during the exam session, invigilators may ask
students to submit their ID cards for visual inspection.

This technique aids in preventing unauthorized people from utilizing false identities or
taking the exam on behalf of others. Student ID checks offer a manual method to verify
the legitimacy of students and guarantee that only those who have enrolled for the exam
take part.

2.3.1 Roaster Method

A printed list or roster containing the picture and other details of the student who have
enrolled for a specific exam is used for roaster checks. Exam overseers or invigilators
call out student names to confirm attendance or ask them to sign next to their names on
the roaster.
Invigilators can manually record student attendance using this technique. It makes it
easier to account for and accurately grade pupils who show up for the test. Checks for
roasters might be made at the entry to the exam room or when the test takers receive and
turn in their answer papers.

2.3.2 Sign-Up Sheet

Students personally offer their signatures or write their names on physical sheets or
forms on which sign-up papers are used to record their attendance during exams. These
sheets are often passed out to students before to or during the exam, and invigilators or
exam supervisors collect them. Sign-up sheets act as a manual record of attendance,
enabling vigilance personnel to confirm each student's attendance. Students affirm their
participation in the exam and recognize their attendance by signing or writing their
names.

2.3.3 Seating Plans

Here, individual students are given specific seats or positions within the exam room
according to seating plans. Typically, these strategies are developed beforehand and
shared with the students in advance of the test. Invigilators check for attendance during

10
the exam by comparing occupied seats to the designated seating arrangement. Seating
arrangements help with attendance tracking, order maintenance, and cheating
prevention, among other things.

Invigilators can quickly detect absentees or unauthorized individuals during the exam
by assigning each student to a specific seat. A disciplined and regulated method of
managing attendance during exams is provided by seating plans. They provide accurate
attendance tracking, make it easier to identify pupils who are present, and contribute to
the integrity and fairness of the testing environment.

2.4 Disadvantages of Traditional Attendance System

Although manual attendance systems have been in use for a while, they have a number
of shortcomings. In order to address these drawbacks and enhance attendance
monitoring procedures, many institutions are switching to digital solutions, such as the
online QR code-based attendance systems. These disadvantages include:

1. Incredibly Time-Consuming:
Particularly in large educational institutions, manual attendance methods can be
quite time-consuming. During each examination, manually recording attendance can
take up a significant amount of time, including calling out names, checking IDs, and
distributing sign-up sheets.

2. Labor-Intensive and Involvement of Several Staff Members:

Several staff members, such as invigilators, teachers, or administrative staff, are
frequently needed to implement manual attendance systems. To check attendance,
gather sign-up forms, or keep attendance records, these people must be present. It
can be time-consuming, especially while the examinations are going on at once
during busy times.

3. Requires a Lot of Resources to Implement:

Staff training, the printing of documents (such rosters or sign-up sheets), and
administrative work to monitor attendance data may all be required for manual
attendance systems. When compared to automated or digital attendance solutions,
the costs of manual systems can be significant.

11
 4. Paper-Driven and Prone to Misplacement or Tampering:
Physical paper-based records, like sign-up sheets or attendance registers, are the
foundation of many manual attendance systems. The system is subject to problems
like misplacing, losing, or purposeful tampering because of this reliance on paper.
Paper-based solutions run a higher risk of losing attendance data as a result of
handling errors or mishaps.

5. Inevitable Errors During Data Entry:

Human mistake is possible with manual data entering. Errors can happen while
entering attendance information into a spreadsheet, roster, or database. The accuracy
of attendance records might be impacted by frequent problems including typos,
omissions, or misreading handwriting.

2.5 Automated Attendance System

An automatic attendance system is an educational ERP system that records the students’
attendance in an institution, unlike the traditional attendance system; the automatic
attendance software enables the faculty to record, store, and monitor students’
attendance history (Ahmed, 2021).

There are several ways in which attendance can be automated; they include (Ahmed,
2021) :

i. Marking attendance via school mobile app

ii. Marking attendance via biometric identification
iii. Marking attendance via Radio Frequency Identification (RFID)
iv. Attendance marking powered by face recognition (real-time)

Each of these methods is briefly discussed in subsequent sub sections below.

2.5.1 Biometric: Face Recognition Attendance System

Due to the recent development of machine learning and neural networks, face
recognition applications still help greatly, accurately and efficiently. The attendance
monitoring system is a very important process in all institutions, several facial

12
recognition attendance systems has been developed, each with its strengths and
weaknesses, and used in different fields. This type of automated attendance system
generally consists of steps such as image acquisition, database development, pre-
processing, and face detection (Khaled, 2022).

This is an attendance management system using face recognition techniques by taking

pictures from cameras and comparing them to the student's photo database after training
the system on students' faces in advance (Khaled, 2022). Face recognition is a
significant research issue that crosses many areas and fields. A computer program that
can recognize, track, identify, or authenticate human faces from an image or video taken
with a digital camera is also available.

Figure 3 - Facial Recognition Attendance System (Alena, 2020)

2.5.2 Radio Frequency Identification Technologies

RFID is a technology that is used to collect information automatically by radio

frequency data communication between a mobile object and an RFID reader, to identify,
categorize and track them (Rajan, 2012). They are most commonly referred to as tag
and reader respectively. To retrieve the data stored on an RFID tag, need a reader. A
typical reader is a device that has one or more antennas that emit radio waves and

13
receive signals back from the tag. It is used to read or write information on a tag and
passing that information to a system for storage and processing (Rajan, 2012).

Figure 4 - Radio Frequency Identification Attendance System (ETCS, 2023)

2.5.3 Biometric: Fingerprint Attendance System

Biometric-based attendance system recognize a person identity based on the biological

characteristic such as fingerprint, hand geometry, voice, retina, iris and face
recognition which reliably distinguishes one person from another or used to recognized
the identity. They have five subsystems: data collection, signal process, matcher,
storage and transmission (Cheah, 2015). Gina (2020) proposes a system whose data
includes student, invigilator, examination and venue registration entered by the faculty /
examination administrator and then stored in a data storage subsystem. The system will
then use the data to populate an examination timetable as well as an attendance sheet for
each registered examination. The invigilator then accesses this attendance sheet after
verification and dispenses it to the students walking into the examination hall. The
system then marks the attendance of the authenticated students using a fingerprint
authentication system. The attendance sheet is then saved by the system and stored for
later retrieval

14
 Figure 5 – Biometric Fingerprint Attendance System (Vitasek, 2021)

2.5.4 Bar Code Attendance System

A barcode is a set of parallel lines and spaces with various widths that serves as a visual
representation of data. It is used to store and transmit data in a machine-readable format
about a good, thing, or object. Barcodes are frequently seen on retail items, books from
the library, shipping labels, and a variety of other objects.

A barcode's primary function is to encode data in a way that makes it simple for readers
or scanners to scan and decode it. These readers employ laser beams to recognize the
barcode's contrasting patterns of black bars and bright gaps. Depending on the type of
barcode symbology utilized, the information contained in the barcode can be expressed
as numbers, letters, or a combination of both.

Each student receives a special bar code that serves as a representation of their
identification in the bar code attendance system. Students provide their bar code on a
printed ID card or a mobile device during exams so that it can be read by a bar code
reader. The student's attendance is noted in a digital database when the scanner reads the
code. Figure 6 below shows the image of a bar code

15
 Figure 6 - Bar Code Attendance System

2.5.5 Qr Code Attendance System

QR or Quick Response Codes are matrix barcodes that can be easily read by
smartphones and dedicated QR reading devices. QR code was designed by Denso-Wave
for the automotive industry in Japan, 1994. The inventor has made open source and free
for human being, QR codes also store data in both directions and can be scanned
vertically or horizontally (Rehman, 2018).

Although it has more features like in terms of storage a barcode can represent up to 25
characters, a QR code can go up to 2500 (Rentman, 2011) and the fact that barcode
scanning requires special device called Barcode scanner which emits light and collects
reflected light to decode the Barcode (RF, 2012); the QR code attendance system
functions similarly to the bar code system. Smartphones or special QR code scanners
can read QR codes, which are more information-dense than regular bar codes. Figure 7
below shows the image of a QR code

16
 Figure 7 - QR Code Attendance System

2.6 Benefits of Modern Attendance System

Numerous advantages of automated attendance systems allow for more accurate,

simple, and effective attendance tracking for both students and educational institutions.
These benefits have encouraged numerous educational settings to embrace digital
methods for managing attendance. They include:

1. Less Time-Consuming:
The amount of time needed to take attendance is greatly decreased by automated
solutions. Students can rapidly check in or out using techniques like scanning QR
codes, swiping ID cards, or biometric recognition thanks to automated systems. By
streamlining the process, both students and teachers can benefit from time savings
that free up more time for practical teaching and learning activities.

2. Not Labor-Intensive:
Automated attendance solutions don't require staff members to manually record
attendance. Once configured, the system runs without the requirement for on-going
management or assistance from numerous staff members. This lessens the workload
on administrative staff and frees them up to concentrate on other crucial tasks.

3. Minimal or No Use of Papers:

A digitally operated automatic attendance system typically does not require paper-
based records. Utilizing less paper thanks to this eco-friendly strategy promotes
environmental sustainability. Additionally, it reduces the possibility of lost or
destroyed paper attendance records.

17
 4. Data Integrity and Tamper-Proof:
Data generated automatically by electronic methods in automated attendance
systems is less vulnerable to manipulation or tampering. Since digital records are
often saved safely in databases, it is challenging for unauthorized parties to change
attendance information. Thus, the reliability and correctness of attendance records
are guaranteed.

5. Eliminates Inevitable Errors in Data Entry:

Automated attendance systems lessen the likelihood of errors by doing away with
the need for human data entry. Automated methods collect attendance data reliably
and without human intervention, in contrast to manual data input, where errors may
arise owing to typos or incorrect handwriting interpretation.

6. Real-Time Data and Reporting:

Real-time information on student attendance is provided through automated
attendance systems. In order to monitor attendance trends, spot patterns, and
respond appropriately when necessary, instructors and administrators have fast
access to the most recent attendance data. Better decision-making and intervention
techniques are facilitated by real-time reporting.

7. Enhanced Data Analysis:

Integrated data analysis features are frequently included with automated attendance
systems. Institutions can learn more about student involvement, class participation,
and general attendance patterns by tracking attendance data over time. These
discoveries can help initiatives for student progress and inform instructional tactics.

2.7 Online Qr Code-Based Attendance System

Smartphone usage has revolutionized the world to many settings including that of the
education system with numerous potential and realized benefits. While the functions of
smartphones, such as text messaging, multimedia, and Internet connectivity, may seem
purely recreational, they can be used within the academic institution to manage
student’s attendance to speed up the process of taking attendance by academic

18
instructors, hence reduces time, human errors and redundant works as compared to the
manual attendance system (Rehman, 2018).

Figure 8 shows the statistics of smart phone users from 2017-2022, you’ll notice that the
number as grown exponentially over the years, almost every house hold, if not all have
access to a smart phone.

Figure 8 - Statictics of smartphone users. (Turner, 2023)

The Qr-code based online attendance system leverages on this smart phone technology
as a tool for recording the participation of students in an examination by storing the
student’s data on a QR code which is then scanned to account for that student’s
attendance.

Attendance systems using bar codes and QR codes provide effective, automated
attendance tracking during exams. The bar code system is easy to use and reasonably
priced, but the QR code system offers other advantages including greater data capacity,
smartphone compatibility, and contactless operation.

The institution's unique requirements, financial constraints, and desired level of

functionality will determine which of the two systems it chooses. So, taking the

19
University of Benin, Department of Computer Science, her operations, financial
constraints, etc. into consideration QR code presents itself as the only logical way to go
in terms of attendance tracking.

2.8 Why Online Qr Code-Based Attendance System

In the realm of automated attendance systems, online QR code-based attendance stands

out as the optimal choice due to its numerous advantages over other systems like face
recognition, fingerprint, barcode, and RFID attendance systems. The widespread usage
of smartphones and the simplicity of implementation allow QR code technology to
revolutionize attendance management by offering a quick, simple, and affordable fix. In
contrast to existing automated systems, the study examines the distinctive features of
the online QR code-based attendance system, highlighting its adaptability and
applicability for various educational settings. Below are some of the reasons for
choosing QR code based online attendance system:

1. Universal Accessibility and Convenience:

QR codes can be created and scanned using generally available cellphones, both
students and instructors can use the system. Instead than requiring specialist
hardware like facial recognition or fingerprint systems, QR codes make use of
already-existing technology, allowing for seamless integration with minimal
infrastructure investments. Reduce wait times and ensure efficient attendance
tracking by allowing students to easily mark their attendance with a quick scan.

2. Non-Intrusive and Contactless Operation:

QR code-based attendance operates in a non-intrusive and contactless manner, in
contrast to facial recognition or fingerprint systems that demand close physical
proximity. During public health emergencies, this non-intrusive strategy protects
students' privacy and reduces health worries. Additionally, individual and
simultaneous QR code scans can be made, easing the process of taking attendance at
large-scale events.

3. Cost-Effectiveness and Simple Implementation:

When compared to other automated systems, QR code-based attendance systems
provide a more affordable option. Due to the lack of sophisticated infrastructure

20
 needs or specialized technology, it is an affordable option for educational
institutions with tight budgets. Additionally, creating and dispersing QR codes is a
simple procedure that needs little staff or student training.

4. Real-Time Data Collection and Analytics:

Real-time data gathering and analytics are made possible by the online QR code-
based attendance system, allowing for quick attendance tracking and recordkeeping.
Instantaneous access to attendance data by institutions makes it easier to intervene
quickly and make informed decisions. Additionally, the system's analytics
capabilities provide insightful data on attendance trends, helping to improve
institutional performance evaluation and student engagement methods.

5. Cross-Platform Compatibility:
QR codes can be included into a variety of digital platforms, including online
portals, mobile apps, learning management systems (LMS), and mobile applications.
By ensuring smooth connection with current educational tools, this compatibility
promotes a strong digital ecosystem. In contrast, barcode or RFID systems can
experience compatibility issues, which would restrict their adaptability and
integration options.

As the most popular option for automatic attendance management, the online QR code-
based attendance system stands out for its accessibility to all users, non-intrusive
operation, affordability, and real-time data collection capabilities. QR codes have
unparalleled versatility and ease of use when compared to facial recognition,
fingerprint, barcode, and RFID systems, making them perfect for various educational
contexts. Adopting online QR code-based attendance solutions is a crucial step towards
streamlined attendance management and a digitally empowered learning environment as
educational institutions aim for better efficiency and effectiveness.

2.9 Related Works

The research paper of Hamadan (2021) suggests a QR code-based attendance system

that makes use of a mobile app to scan customized QR codes for each classroom.
Almasalha (2014) paper proposes a QR code-based attendance system that uses
smartphones to speed up the process of taking attendance by university instructors.

21
Talib (2018) research paper discusses the use of a QR code-based attendance system
during exams; the technology generates QR codes for each student and each exam,
which are scanned by a mobile application. With a focus on QR code-based solutions,
Abdalkarim (2022) paper reviews the research on smart attendance systems.

Abdullahi (2018) proposes an examination eligibility verification system using QR

code, the EEV system was validated using a smartphone to scan the QR code generated.

Sujyot (2023) paper proposes an attendance system that uses QR codes to identify
students, teachers, and other staff members, making it a fast and efficient way to keep
track of attendance. In the study by Ebenezer (2021), the attendance system makes use
of QR code for attendance taking developed for Ajayi Crowther University.

Table 2.1 Summary Table of Related Works

Author(s) Year Objectives Major Features

Mohd Syazwan Hamdan, 2021 To develop a QR code The system verifies three
Mohd Izuddin Mohd Yasin, system for taking types of information:
Wan Nazmi Wan Mohd attendance in classroom. geolocation, registered
Nor, Mohd Radzi Abdul mobile device, and subject
Rashid class hour.
Fadi Almasalha, Nael 2014 To develop a QR code The system generates a
Hirzallah system for taking QR code for each student,
attendance in classroom. which is displayed at the
beginning of each lecture.
Students scan the code to
confirm their attendance.
Aisha Talib, Bothainah 2018 To develop a QR code The technology generates
Ahmed, Khadija Abdullah system for taking QR codes for each student
AL-Saidi, Justin attendance in and each exam, which are
Rajasekaran examinations scanned by a mobile
application.
Bawar Ali Abdalkarim, 2022 To review smart This paper talks about
Dakgun Sakarya attendance systems with smart attendance systems

22
 a focus on QR based in general, highlighting the
solution. advantages of QR code
system over the rest.
Abdullahi, Muhammad 2018 To design and develop an Design: UML
Bashir, Nura, Zahra’u examination eligibility Front-end: JavaScript,
Musa, Jiya, Lawal Musa verification system CSS, HTML5
(EEV) using QR code. Back-end: PHP and
MySQL
Sujyot Raut, Prajwal Bhure, 2023 To develop a system that The system consists of two
Parag Bariye, Ashish uses QR codes to identify main components:
Nandeshwar, Prof. Jayant students, teachers, and Back-end: managing the
Adhikari other staff members, database of users, classes,
making it a fast and and attendance records.
efficient way to keep Front-end: user interface
track of attendance that allows teachers and
students to interact with
the system
Ebenezer Oyebode, Taiwo 2021 To develop an attendance Methodology: SDLC
Oyedepo system that uses QR code SDLC model: V-model
for Ajayi Crowther Implementation language:
University PHP

23
 CHAPTER THREE

SYSTEM ANALYSIS AND DESIGN

This chapter provides a model of the development process while offering an overview
of the system design and system analysis.

3.1 System Analysis

System analysis is a crucial stage in the life cycle of software development that entails a
thorough analysis of an existing system or the specifications for a new system. In order
to create efficient solutions, a system's features, components, processes, and interactions
must be understood, documented, and defined.

There are several methods of system analysis and design, the two major methods
include:

1. The Object-Oriented Analysis and Design (OOAD) Method

2. Structured System Analysis and Design (SSAD) Method

The Object-Oriented Analysis and Design (OOAD) Method (OOAD) was used for this
project because the main goal of OOAD is to provide an effective and well-organized
software solution that solves practical issues. Understanding the issue domain, creating
modular, reusable components, and making sure the resultant system is scalable,
maintainable, and adaptive to changing requirements are all key components of the
OOAD methodology.

3.2 Analysis of Existing System

As stated in chapter two, the existing system is a traditional attendance system which
includes the use of an examination pass shown in Figure 2.1 above; this pass serves as a
means of authentication. It is prepared from the student’s course registration slip; it
contains the student’s passport photograph, name, matriculation number, and the
registered courses.

For the actual attendance tracking a signup sheet is used, the students enter their serial
numbers, names, matriculation number, faculty and department codes, booklet number

24
and signature. This is used to record the attendance for each course, any student whose
details do not appear on the sheet is assumed to be absent for that examination.

A lot of time and resources is spent preparing and printing this examination card for
each student, considering the huge population the department has to cater for. There is
also the risk of forgery of this examination pass, which will tamper with the integrity of
the entire examination process as a result of impersonation.

The signup sheet is a paper driven approach, it can be tampered with as a student can
write for another student who wasn’t present for the examination, there’s also the issue
of misplaced signup sheet, with this there will be no attendance record for that
examination process. With all these put into consideration, tilting to more modern
approaches of examination attendance tracking is the best way to go.

3.3 Problem of Existing System

As stated in chapter two, the following are the problems of the traditional attendance
system adopted by universities:

1. Due to activities like name calling, ID checks, and sign-up sheet distribution,
manual attendance methods, particularly in larger institutions, take up a
significant amount of time during sessions or events.
2. Relying on physical paper records, like sign-up sheets, makes manual systems
susceptible to issues such as loss, misplacement, or intentional tampering,
risking data integrity.
3. Manual systems demand resources for document printing, and administrative
efforts to manage attendance data, leading to higher costs compared to
automated solutions.
4. Manual data entry is prone to human errors like typos or omissions when
transferring attendance information to spreadsheet, rosters, or databases,
potentially affecting record accuracy.

25
3.4 Overview of Proposed System

The proposed system is named NACOSS SMP, it leverages on technology to provide a

more automated method for attendance tracking in examinations. It is an online based
QR code attendance system where attendance is tracked by scanning a student’s QR
code. For this system to completely achieve its goals, it must be able to perform the
following functions:

1. It will enable students to upload their course registration slip in pdf format only.
2. It will provide a QR code slip for the students that contain their details and
unique QR code obtained from their uploaded course registration slip.
3. It will enable admins to view and download student’s data which consists of the
student’s name, matriculation number, the number of courses registered, and the
data registered.
4. It will enable admins to view the exam attendance summary which consist of the
courses code, courses title, number of student’s registered and present for each
course
5. It will provide admins with a QR code scanner for taking the attendance of each
student for a particular course.
6. The system will enable the admin to view and download the attendance record
of each course.
7. The system will make provision for only one admin i.e. the super admin who
will be able to add and remove other admins

3.5 Proposed System Architecture and Interface

The attendance system is a full web application; it is made up of several interconnected

components as shown in Figure 3.1. It would contain a page for students to upload their
course registration slip which is then stored on a server, the student’s profile and QR
code is generated from the data; this slip can be downloaded from the profile. On the
day of the slated examination, the student’s QR code is scanned to record his/her
attendance for that particular course; this attendance record is stored on the server.

26
 Student’s details is
Student’s course generated
registration slip is stored

Student’s smart phone Student’s smart phone

Server

Student downloads
Student’s Attendance slip from profile
is recorded and stored

Student’s QR code is scanned

Lecturer’s smart phone Student’s downloaded slip

Figure 3.9 Online QR Code Attendance System Architecture

As stated earlier, Figure 3.1 above shows the system architecture that is the different
components that makes up the system, Figure 3.2 below shows the system interface
which shows how these different components interact with each other. It starts with a
login as an admin (lecturer) or a user (student). From the student side, the students can
either view their profile or download their QR code slip just after uploading their course
registration slips.

At the admin end, the lecturer can take attendance or download the attendance data for a
particular course, but first has to select the course at the Exam Attendance Page or
Courses Page respectively, then he/she can scan the students QR code or download the
attendance record.

27
 Admin Select
(Lecturer) user Student

Login Login

Upload course
registration slip
Take Download Course
Attendance Attendance

Select Course Download

View Profile QR Code

Scan Student’s Download Attendance

QR Code File (CSV File)

Figure 3.10 Online QR Code Attendance System Interface

28
3.6 System Design

The process of defining the architecture, interfaces, and data for a system that complies
with particular requirements is known as system design. It is a multidisciplinary field
that entails trade-off analysis, weighing competing requirements, and making choices
regarding design decisions that will have an impact on the entire system. A methodical
approach to developing and engineering systems is necessary for system design.

3.7 System Design Tools

The creation of precise plans, diagrams, and specifications for software systems is aided
by the use of system design tools. System architectures, components, interactions, and
other design elements can be represented visually with the help of these tools. Common
types of system design tools include:

1. Unified Modelling Language (UML): UML is a disregarded language that is

used to specify how software systems should be visualised, built, and
documented. It is an essential tool for creating object-oriented software and the
software development process, and it is independent of any specific
programming language or method.

2. Data Flow Diagram (DFD): A data flow diagram is a tool used to explain the
movement of data through a system and the operations or processing that it
carries out. It displays how data enters the system from external sources, how it
travels from one process to another, and how it is logically stored. Making a
context diagram is a good idea. Every symbol used in the context diagram is also
acceptable in the DFD.

3. System Flowchart: The system flow chart is a diagrammatic representation

that shows how a system operates; this is easier to understand than reading a
long text. One of the main tools a system analyst uses to display a high-level
picture of the operations in an entire system is a system flow chart. It has more
advantages than programme flow charts that merely show the direction of data
flow, displaying the alphabetical order of operation symbols.

29
 4. Entity- Relation Diagram: This displays the entities and connections that the
data describes. It can refer to a group of people, places, things, occasions, or
even concepts. These relationships include:

a. One to one – a driver – drive a car

b. One to many- a teacher teaches many students at a time
c. Many to many – many readers read many books.
d. Many to one – many students reading a school.

3.8 System Design Tool: UML

Unified Modelling Language, also known as UML, is a standardised modelling

language that consists of a collection of integrated diagrams. It was created to assist
system and software developers in defining, visualising, building, and documenting the
artefacts of software systems as well as business modelling and other non-software
systems. Creating object-oriented software and the software development process both
heavily rely on the UML. The UML primarily employs graphical notations to convey
software project design.

3.9 UML – Use Case Diagram

A use case diagram is a dynamic or behaviour diagram in UML that models the
functionality of a system using actors and use cases. The actors are people or entities
operating under defined roles within the system. The use cases are a set of actions,
services, and functions that the system needs to perform. In this context, a "system" is
something being developed or operated, such as a website.

Table 3.2 Use Case Notations and Descriptions

Objects Symbols Description

30
Actors These are the people who
Use case interact with the system. An
actor is a person, a group, or an
external system that interacts
with the application or system.
They must be external data
producers or consumers.
Use case A use case is a collection of
tasks, services, and operations
System name that the system must carry out.
It aids in capturing the system's
features and how users interact
with it without delving into the
system's implementation's
internals.
System The term "system" refers to the
complete software application
or software system in question.
It depicts the system being
analysed, created, or simulated,
which is the subject of the use
cases.
Relationship This represents the association
or connection between different
<<include>>
elements within the diagram.
There are three main types of
<<extend>>
relationships namely:
1. Association: It represents a
simple relationship between
two elements. It shows that one
element is associated with or
related to another element in

31
 some way.
2. Include: This is used to
show that one use case includes
or incorporates the
functionality of another use
case. It represents a behaviour
that is common to multiple use
cases and is included as a step
within each of them
3. Extend: It indicates that one
use case can be enhanced by
another use case. It represents
alternative behaviour that may
be added under specific
conditions.

Student Profile

Sign Up

Upload Course
Registration
Student slip

Download slip
containing
unique QR code
32
 Figure 3.11 Use case Diagram for Student Profile

Admin Dashboard

Sign Up Select
Student

<<include>>

New
View <<include>> Student
Students

Select
Course
<<include>>

View
Lecturer (admin) Attendance
<<include>>

Download
Attendance
list
Take
Attendance

<<include>> <<include>>

Scan QR
code
Select
Course

Figure 3.12 Use case Diagram for Admin Dashboard

33
3.10 UML – State Machine Diagram

A state machine is any device that stores the status of an object at a given time and can
change status or cause other actions based on the input it receives. State diagrams
mainly depict states and transitions. States are represented with rectangles with rounded
corners that are labelled with the name of the state. It illustrates the states and transitions
of an object or system. In the context of the online QR code-based attendance system,
the state machine for a student's attendance status can be marked, not marked, scan QR
code etc.

Table 3.3 State Machine Diagram Notations and Descriptions

Objects Symbols Description

First State A marker for the first state
in the process, shown by a
dark circle

Terminator A circle with a dot in it that

indicates that a process is
terminated.

State A rectangle with rounded

State
corners that indicates the
current nature of an object.

Transition Arrow An arrow running from one

state to another that
indicates a changing state.
Choice Pseudostate A diamond symbol that
indicates a dynamic
condition with branched
potential results.
Exit Point The point at which an
object escapes the

34
 composite state or state
machine, denoted by a
circle with an X through it.

Admin Student’s course Scan QR

logged in reg.slip has been code
uploaded
Student’s course
reg.slip not uploaded
Update Attendance
Record

Display Error
message

Figure 3.13 State Machine Diagram for Attendance Tracking Status

3.11 UML – Class Diagram

35
 One of the more popular types in UML is the class diagram, popular among software
engineers to document software architecture, class diagrams are a type of structure
diagram because they describe what must be present in the system being modelled.

A Class Diagram provides a visual representation of the system's classes, their

attributes, and relationships. In the front-end implementation of the online QR code-
based attendance system, the following classes can be identified: Student, QR code,
Lecturer, AttendanceRecord, AttendanceSystem, etc.

Table 3.4 Class Diagram Notations and Descriptions

Objects Symbols Description

Aggregation A diamond-shaped line
with a solid line connecting
two classes, indicating a
whole-part relationship.
Dependency A dashed line with an
arrowhead indicating a
relationship between two
classes where changes in
one class might affect the
other class.

QRCODE

+image: jpg

USER (STUDENT)
+storeStudentDetails()

+name: string 36
+matriculation number: string
+email: string ADMIN (LECTURER)
 Figure 3.14 Class Diagram for the Attendance System
CHAPTER FOUR

SYSTEM IMPLEMENTATION

4.1 Software Implementation Tools

This project focuses on only the front end implementation of an online QR based
attendance system; the following software tools were used:

1. Implementation Languages: The following are the various programming

languages used for the project’s implementation:
a. Hyper Text Markup Language (HTML): This is the markup language
used in creating the content, building structure and defining the semantic
of the web page.
b. Cascading Style Sheet (CSS): This language was used to define the
visual representation and styling of the HTML elements in the web page.
It was used to control the layout, colors, fonts, spacing, and overall
design of a webpage.
c. JavaScript: This is a scripting language that is primarily used for adding
interactivity and dynamic behavior to websites and web applications. It

37
 was to create interactive user interfaces, handle user input, manipulate
data, and perform various actions on a web page without requiring a page
reload.
2. Implementation Framework: Frameworks are pre-built groups of code and
tools that serve as the basis for creating applications in software development.
By providing reusable elements, patterns, and conventions, they give an
organized approach to development. The frameworks used during this project
are:
a. ReactJs: This is a JavaScript front-end framework focused on building
dynamic and interactive user interfaces for web applications. It excelled
in creating component-based architectures, managing UI state, handling
user interactions, and efficiently updating the DOM.
b. Tailwind CSS: This is a CSS framework focused on simplifying the
process of styling web applications by providing a collection of utility
classes that cover a wide range of design aspects. It was particularly
useful for rapidly creating responsive designs and maintaining consistent
styling across an application.
3. Implementation Platforms: Visual Studio Code (VS Code) is a widely popular,
free, and open-source code Integrated Development Environment developed by
Microsoft. It is an excellent choice for building web applications, regardless of
the operating system you are using and integration to Version Control System
like Git and Github which was the remote Version Control System.
4. Deployment Platforms: For making the web application available to all users, it
was deployed using vercel. Vercel is a cloud platform designed to facilitate the
deployment and hosting of web applications and websites. It specializes in
providing a seamless experience for developers to deploy projects, particularly
those built using modern frameworks like ReactJs.
5. Operating System: This project is a full web application that was built using the
Windows operating system, a very user friendly and developer-friendly system.

4.2 User Documentation – System Testing

38
System testing is a vital stage in the software development life cycle that entails
thorough testing of a software application or system as a whole. System testing tries to
make sure that all parts and modules of the program function properly as an integrated
system and adhere to the requirements. The following was tested:

1. The login and logout functionality for the student.

2. The login and logout functionality for the admin (lecturers)
3. Are students able to upload their course registration slip in pdf format only?
4. Are the students able to view their profile?
5. Are students able to get their QR code slip after upload?
6. Is the super admin able to add and remove other admins?
7. Are the admins able to see the details of students that have uploaded their course
registration slip for each level?
8. Are the admins able to scan the student’s QR slip during the day of the slated
examination?
9. Are the admins able to view the exam attendance details for each course?
10. Are the admins able to download the attendance list for the different courses?

4.3 Screenshots of the Running System

39
 Figure 4.15 Admin and Student's Login Page

Figure 4.1 shows the login page of NACOSS SMP for the admins and students; the
admins login with their “email address” and “password” while the students login with
their “email address” (preferably their university email) and their “matriculation
numbers”.

40
 Figure 4.16 NACOSS SMP Student’s Upload Page

Figure 4.2 shows the upload page, where the students have to upload their course
registration slip in .pdf format as downloaded from their student’s kofa page.

Figure 4.17 NACOSS SMP Student’s Profile Page and QR Code Slip

41
As soon as the student uploads his or her course registration slip, a slip contain his or
her unique QR code is sent via the email he or she provided while logging in, Figure 4.3
above shows this and the student’s profile page which includes all the student details i.e.
Student’s Name, Student’s Matriculation Number, Student’s Current Level and the
Student’s Registered Courses as drawn from the uploaded course registration slip.

Figure 4.18 NACOSS SMP Admin’s Dashboard

In Figure 4.4 above, the snapshot on the left shows the details of students that have
uploaded their course registration slip and this data can be downloaded for each level;
the details are gotten from the slip, it includes student’s name, matriculation number,
number of courses, date of course registration. Clicking on a student leads the admin to
another page, the snapshot on the right of Figure 4.4; this shows the student’s name and
matriculation number on one card, the student’s QR code on the other card, and the
courses registered cards on the right side of the page.

42
 Figure 4.19 Exam Attendance Page

Figure 4.5 shows each course to be done per semester, including the number of students
registered for the course, as well as the number of students present for the examination
which is derived from the number of students QR slip scanned during the day of the
slated examination. Clicking on a course takes the admin to the take attendance page
shown in Figure 4.6 below.

43
 Figure 4.20 Take Attendance Page and the QR Code Scanner

The admins can take attendance for a particular course on the take attendance page
which is shown on the snapshot on the left in Figure 4.6. The snapshot on the right
shows the QR code scanner which scans the QR code on a student’s QR code slip and
then records the attendance of the student for that particular course.

Figure 4.21 Courses Page

The attendance data is a csv file, to download it the admin has to navigate to the courses
page on the admin dashboard which is shown in the left snapshot in Figure 4.7, it
contains the course code, title, credit and a button to view attendance for a particular

44
course. On click of the “View Attendance” button, the user is directed to another page
that contains the attendance data for that course which includes the names and
matriculation number of every student present for the examination whose QR code slip
was scanned. The page also contains an “Export CSV” button that downloads the
attendance data for each course.

Figure 4.22 Manage Admins Page (View, Add, and Delete admins)

NACOSS SMP makes room for only one admin which is known as the super admin,
which is the Head of Department (HOD); this super admin can in turn add other lecturer
(course advisers for each level) as admins, Figure 4.8 provides the pages for adding and
removing admins.

4.4 System Usability Evaluation

The System Usability Scale (SUS) is a widely used questionnaire-based tool for
assessing the usability and user-friendliness of software, websites, and digital systems.
John Brooke invented it in the 1980s, and it has since become a popular tool for
analysing user experiences. The SUS consists of a series of questions that users must
answer to offer a quantitative measure of usability that may be used to compare
different systems or track development over time.

The SUS is especially useful for gaining insights about users' perceptions of a system's
general usability. It covers both subjective and objective aspects of usability, providing

45
vital feedback to designers and developers on how well a system corresponds with user
expectations and needs.

The SUS questionnaire comprises ten statements, and participants respond to each
statement using a 5-point Likert scale, ranging from "Strongly Disagree" to "Strongly
Agree." The scale includes options:

1. Strongly Disagree.
2. Disagree.
3. Neutral.
4. Agree.
5. Strongly Agree.

The SUS is scored by converting the replies into numerical values and then applying a
formula to calculate the final usability score. The possible values range from 0 to 100,
with higher scores suggesting improved usefulness. A SUS score of 70 or more is
considered above average, while a score of 85 or higher indicates great usability.

The SUS score can provide vital insight into how well an Online Attendance and
Student Management System project is meeting user needs and expectations. The SUS
questionnaire can be used to collect feedback on the system's usability, user-
friendliness, and overall experience from peers who are trying the system. This
feedback can assist to uncover strengths and weaknesses in the system's design and
functionality, allowing for changes to the user experience and the creation of a platform
that is more closely aligned with the needs of its users.

46
 Source: https://uiuxtrend.com/measuring-system-usability-scale-sus/

The usability test questionnaire was created using the following clear and concise
questions. The system was then tested with ten users and feedback was gathered using
this questionnaire.

1. I found the system to be easy to use.

2. I needed to learn a lot of things before I could get going with the system.
3. The various functions in the system are well integrated.
4. I would imagine that most people would learn to use this system very quickly.
5. I found the system very intuitive to use.
6. I needed to rely heavily on technical support to use the system.
7. The system has too many inconsistencies.
8. I felt very confident using the system.
9. I needed to learn a lot of things before I could accomplish tasks.
10. Overall, I am satisfied with the system's usability.

47
 Table 4.5 User’s Usability Scores Table

User SUS Score

User 1 52.5

User 2 90.0

User 3 77.0

User 4 47.5

User 5 65.0

User 6 92.5

User 7 85.0

User 8 72.5

User 9 50.5

User 10 82.5

Total 715

Based on the table above, the total usability score is 715. The average score which is
gotten by dividing the total score by the number of users (10 users) is 71.5. According
to the SUS Grade and Rating Table in Fig 4.10 above, the average usability score of the
system falls at the 68 - 80.3 mark, therefore the system can be classified as good to use.

48
 CHAPTER FIVE

SUMMARY AND CONCLUSION

5.1 Summary

With the advancement in technology, the traditional methods of taking examination

attendance like use of seating plans, signup sheets, roaster calls, etc. are no longer
sufficient as they are labor intensive, incredibly time consuming, requires a lot of
resources to implement, and most especially very error prone. We must then seek
modern approaches that will eliminate all these shortcomings by providing automated
systems that are less labor intensive, not error prone as data entry is automatic, etc.

A platform such as NACOSS SMP, which leverages on technology to provide a more

modern approach to tracking examination attendance in the Department of Computer
Science, University Of Benin. The goal of this project is to provide the University of
Benin, Department of Computer Science an alternative to the traditional means of
validating student’s course registration and taking exam attendance. This web
application uses the Object-Oriented Analysis and Design (OOAD) approach for the
analysis and design of its system. This full web application leverages on the course
registration slip provided to the students by the university management.

The students login with their emails and matriculation number and are then directed to a
page where they are to upload their course registration slip, the information on this slip
is used to create a profile for them and a QR code slip is sent to their mails, this slip
contains their unique QR code which holds the information on their course registration
slip. The Students Page of the admin dashboard automatically updates after each student
completes their upload, this data can be downloaded for each level. To take attendance
the admin navigates to the Exam Attendance Page and selects the particular course, a
QR code scanner is then use to record the attendance of the students.

To view the attendance data, the admin navigates to the Courses Page where he/she
selects a course and gets redirected to a page where the course attendance can be
downloaded as a csv file. The web application only provides room for one admin which

49
is known as the super admin; this super admin can in turn add and remove admins by
navigating to the Mange admin Page.

5.2 Conclusion

This project covers the attendance system used by different universities during their
examinations; it narrowed it down to federal universities in Nigeria and then finally
taking the Department of Computer Science, University Of Benin. It analysed the
traditional method of examination attendance tracking used namely examination pass,
sign-up sheets, etc. It also highlights the disadvantages of traditional attendance tracking
and emphasizes on the need of a manual attendance system. The solution introduced is
NACOS SMP; an Online QR code-based Attendance System which leverages on
technology (internet, smart phones and QR codes) to provide a less labor intensive,
faster, and efficient way of attendance tracking during examinations.

50
 REFERENCES

Abdullahi, M. B. (2018). Examination Eligibility Verification and Attendance System

Using Quick Response Code. i-manager's Journal on Digital Signal Processing
(JDSP), 1-9.

Ahmed, M. (2021, January 5). Automatic Attendance System - Advantages Of

Automated Attendance System. Retrieved July 19, 2023, from MasterSoft:
https://www.iitms.co.in/blog/automated-student-attendance-management-
system-for-schools-and-colleges.html

Aisha Talib, B. A.-S. (2018, October). Effect of implementing 'QR Code Attendance
System' during Examination in SHCT-Limits and Possibilities. Retrieved July
18, 2023, from Research Gate:
https://www.researchgate.net/publication/328306138_Effect_of_implementing_'
QR_Code_Attendance_System'_during_Examination_in_SHCT-
Limits_and_Possibilities

Aishwarya, R. (2023, January 25). Who Invented Exams? - Origin of Exams, History.
Retrieved July 10, 2023, from Get My Uni:
https://www.getmyuni.com/articles/who-invented-exams

Alena, D. (2020, March 27). Top 5 Face Recognition Attendance Software – Free &
Premium. Retrieved July 19, 2023, from gigasource.io: https://gigasource.b-
cdn.net/wp-content/uploads/2020/01/attendance-img2.png

Bawar Ali Abdalkarim, D. S. (2022, July). A Literature Review on Smart Attendance

Systems. Retrieved July 18, 2023, from Research Gate:
https://www.researchgate.net/publication/362405196_A_Literature_Review_on
_Smart_Attendance_Systems

Cheah, M. M.-S. (2015). Sensors-enabled Smart Attendance Systems Using NFC and
RFID Technologies. International Journal of New Computer Architectures and
their Applications, 5(1) 19 -28.

Ebenezer Oyebode, T. O. (2021). QR–code attendance system for Ajayi Crowther

University. Computer Science Series (19), 23-25.

51
ETCS. (2023). Employee Time Clocks – Compare Cloud Based Time Tracking
Software. Retrieved July 19, 2023, from Employee Time Clock Systems:
https://employeetimeclocksystem.com/wp-content/uploads/2016/12/rfid-based-
attendance-system.jpg

Fadi Almasalha, N. H. (2014, January). A Students Attendance System Using QR Code.

Retrieved July 18, 2023, from Research Gate:
https://www.researchgate.net/publication/275605455_A_Students_Attendance_
System_Using_QR_Code

Frank-Felix, F. (2023, June 19). Falsification of Examination Pass. (I. Assurance,

Interviewer)

Frederiks, e. (2021). Academic Success. Retrieved July 18, 2023, from Types of Exams:
https://usq.pressbooks.pub/academicsuccess/chapter/types-of-exams/

Gina, B. A. (2020, February). Biometric Examination Attendance Taking System

(BEATS). Retrieved July 22, 2023, from Research Gate:
https://www.researchgate.net/publication/339401785_Biometric_Examination_
Attendance_Taking_System_BEATS

Khaled, A. J. (2022). An attendance system for exams using face recognition Based on
MTCNN and OpenCV algorithms. International Science and Technology
Journal, 1 - 12.

Mohd Syazwan Hamdan, M. I. (2021, September 24 - 27). QR Code-Based Student

Attendance System. Retrieved July 18, 2023, from IEEE Xplore:
https://ieeexplore.ieee.org/document/9681472/

Rajan, N. P. (2012). Online Students‘ Attendance Monitoring System in Classroom

Using Radio Frequency Identification Technology: A Proposed System
Framework. International Journal of Emerging Technology and Advanced
Engineering, 2( 2) 62 - 64.

Rehman, V. C. (2018). Mobile Barcode Based Examination Attendance System.

International Journal of Engineering & Technology, 7 (3.22) 49-54.

Rentman, B. (2011). QR codes vs barcodes: Which should you use for equipment?
Retrieved June 24, 2023, from Rentman Blog: https://rentman.io/blog/qr-vs-

52
 barcodes-what-should-you-use-for-your-av-equipment

RF, W. W. (2012). Advantages of Barcode | disadvantages of Barcode. Retrieved June

24, 2023, from Home of RF and Wireless Vendors and Resources:
https://www.rfwireless-world.com/Terminology/Advantages-and-
Disadvantages-of-Barcode.html

Sasu, D. D. (2023, Feburary 6). Universities in Nigeia - statistics and facts. Retrieved
June 25, 2023, from Statista: https://www.statista.com/topics/8520/university-in-
nigeria/#topicOverview

Sujyot Raut, P. B. (2023). QR CODE BASED ATTENDANCE SYSTEM.

International Research Journal of Modernization in Engineering Technology
and Science , 421-427.

Turner, A. (2023). HOW MANY SMARTPHONES ARE IN THE WORLD. Retrieved

July 19, 2023, from bankmycell: https://www.bankmycell.com/blog/wp-
content/uploads/2018/07/number_of_smartphone_users_worldwide-2022.png

Vitasek, e. (2021, March 23). Here’s How To Choose The Best Biometric Attendance
System According To Your Organization Size. Retrieved July 19, 2023, from
The World Financial Review:
https://worldfinancialreview.com/wp-content/uploads/2021/03/Biometric-
copy.png

53
 APPENDIX

SOURCE CODE

USER PAGES

Login Page

import React from "react";

import { Header, Form } from "../../Components/UserComponents";

export default function Login() {

return (

<section className="user">

<Header />

<Form

user={"student"}

firstInputPlaceHolder={"Email"}

secondInputPlaceHolder={"Matric. No"}

firstInputId={"name"}

secondInputId={"mat-no"}

firstInputType={"name"}

secondInputType={"text"}

for={true}

/>

</section>

54
 );

Upload Page

import React from "react";

import { Header2, FileUpload } from "../../Components/UserComponents";

import { useLocation } from "react-router-dom";

export default function Upload() {

const location = useLocation();

const { state } = location;

return (

<section className="user flex flex-col space-y-24">

<Header2 />

<FileUpload email={state} />

</section>

);

Success Page

import React from 'react'

import {Header3, Successful} from '../../Components/UserComponents/index'

export default function Success() {

55
 return (

<section className='user flex flex-col space-y-8'>

<Header3 />

<Successful />

</section>

Profile Page

import React from "react";

import { Header2, FileUpload } from "../../Components/UserComponents";

import { useLocation } from "react-router-dom";

export default function Upload() {

const location = useLocation();

const { state } = location;

return (

<section className="user flex flex-col space-y-24">

<Header2 />

<FileUpload email={state} />

</section>

);

56
ADMIN PAGES

Login Page

import React from "react";

import { Form, Header } from "../../Components/UserComponents";

export default function AdminLogin() {

return (

<section className="user">

<Header />

<Form

user={"admin"}

firstInputPlaceHolder={"Email"}

secondInputPlaceHolder={"Password"}

firstInputId={"email"}

secondInputId={"password"}

firstInputType={"email"}

secondInputType={"password"}

for={false}

/>

</section>

);

57
Students Page

import React, { useState } from "react";

import { Oval } from 'react-loader-spinner';

import {

AdminNav,

AdminHeader,

AdminControls,

StudentsData,

} from "../../Components/AdminComponents";

import { useEffect } from "react";

import axios from "axios";

import { Cookies, useCookies } from "react-cookie";

import { useNavigate, useParams } from "react-router-dom";

import { useQuery } from "react-query";

export default function StudentPage() {

document.body.style.opacity = "1";

const navigate = useNavigate();

const [cookies, setCookie] = useCookies(["user"]);

const [search, setSearch] = useState("");

58
const [filteredData, setFilteredData] = useState([]);

const { page } = useParams();

useEffect(() => {

if (!cookies.adminToken) {

navigate("/admin/login");

}, []);

// console.log("param", page);

const { isLoading, data, isError, error } = useQuery("student-data", () => {

return axios.get(`${import.meta.env.VITE_DB_URL}/smp/admin/all/${page}`, {

headers: {

Authorization: `Bearer ${cookies.adminToken}`,

},

});

});

// console.log("data", data?.data);

// console.log("isError", isError);

59
if (isError) {

const cookies = new Cookies();

cookies.remove("adminData");

cookies.remove("adminToken");

navigate("/admin/login");

function formatDate(dateString) {

const date = new Date(dateString);

const options = { year: "numeric", month: "long", day: "numeric" };

return date.toLocaleDateString("en-US", options);

function formatData(dataArray) {

return dataArray?.map((dataItem) => {

return {

id: dataItem._id,

img: "",

name: dataItem.fullName,

matricNo: dataItem.matriculationNo,

noOfCourses: dataItem.courses.length,

60
 dateRegistered: formatDate(dataItem.created_at),

};

});

useEffect(() => {

if (!cookies.adminToken) {

navigate("/admin/login");

}, []);

return (

<section className="admin flex flex-row min-h-screen">

<AdminNav students={true} />

<div className="flex flex-col w-full h-full lg:ml-72 ">

<AdminHeader title={"Students"} studentData={data?.data.data} />

<AdminControls

firstButton={true}

secondButtonText={"New Student"}

secondButton={true}

setSearch={setSearch}

studentData={data?.data.data}

setFilteredData={setFilteredData}

61
 />

{isLoading && <section className="flex flex-col justify-center content-center

self-center space-y-5 mt-20">

<Oval color="#42e695" height={80} width={80} />

</section>}

{!isLoading && !search && (

<StudentsData

studentData={data?.data.data}

totalPages={data?.data.totalCount}

/>

)}

{search && (

<StudentsData

studentData={filteredData}

totalPages={data?.data.totalCount}

/>

)}

</div>

</section>

);

62
Student Details Page

import React from "react";

import {

AdminNav,

AdminHeader,

StudentDetails,

} from "../../Components/AdminComponents";

import { useQuery } from "react-query";

import { useNavigate, useParams } from "react-router-dom";

import { Cookies, useCookies } from "react-cookie";

import axios from "axios";

import { useEffect } from "react";

export default function AdminStudentDetails() {

const navigate = useNavigate();

const { id } = useParams();

const [cookies, setCookie] = useCookies(["user"]);

useEffect(() => {

if (!cookies.adminToken) {

navigate("/admin/login");

63
 }

}, []);

const { isLoading, data, isError, error } = useQuery("student-detail", () => {

return axios.get(`${import.meta.env.VITE_DB_URL}/smp/admin/student/${id}`, {

headers: {

Authorization: `Bearer ${cookies.adminToken}`,

},

});

});

// console.log("data", data?.data);

// console.log("isError", isError);

// if (isError) {

// const cookies = new Cookies();

// cookies.remove("adminData");

// cookies.remove("adminToken");

// navigate("/admin/login");

// }

return (

64
 <section className="admin flex flex-row h-screen">

<AdminNav students={true} />

<div className="flex flex-col w-full h-full lg:relative lg:ml-72">

<AdminHeader title={"Student Details"} />

<StudentDetails data={data?.data} />

</div>

</section>

);

Courses Page

import React from "react";

import {

AdminNav,

AdminHeader,

AdminControls,

CoursesData,

} from "../../Components/AdminComponents";

import { useNavigate } from "react-router-dom";

import { useCookies } from "react-cookie";

import { useEffect } from "react";

export default function CoursesPage() {

65
 const navigate = useNavigate();

const [cookies, setCookie] = useCookies(["user"]);

useEffect(() => {

if (!cookies.adminToken) {

navigate("/admin/login");

}, []);

return (

<section className="admin w-screen h-screen flex flex-row lg:h-auto lg:w-auto">

<AdminNav courses={true} />

<div className="flex flex-col w-full h-full lg:relative lg:ml-72">

<AdminHeader title={"Courses"} />

<AdminControls firstButton={false} secondButton={false} />

<CoursesData />

</div>

</section>

);

Course Attendance Page

import React from "react";

import {

66
 AdminNav,

AdminHeader,

AdminControls,

CourseAttendanceData,

} from "../../Components/AdminComponents";

import { useLocation, useNavigate, useParams } from "react-router-dom";

import { useCookies } from "react-cookie";

import { useEffect } from "react";

import { useQuery } from "react-query";

import axios from "axios";

export default function CourseAttendancePage() {

const location = useLocation();

const title = location.state && location.state.title;

const navigate = useNavigate();

const { id: courseCode } = useParams();

console.log("course code", courseCode);

const [cookies, setCookie] = useCookies(["user"]);

67
useEffect(() => {

if (!cookies.adminToken) {

navigate("/admin/login");

}, []);

const { isLoading, data, isError, error } = useQuery(

"course-attendance",

() => {

return axios.post(

`${import.meta.env.VITE_DB_URL}/smp/admin/getAttendanceByCode`,

courseCode,

},

headers: {

Authorization: `Bearer ${cookies.adminToken}`,

},

);

);

68
 console.log("data", data?.data);

console.log("isError", isError);

return (

<section className="admin w-screen h-screen flex flex-row lg:h-auto lg:w-auto">

<AdminNav courses={true} />

<div className="flex flex-col w-full h-full lg:relative lg:ml-72">

<AdminHeader title={title} />

<AdminControls

firstButton={false}

secondButton={true}

secondButtonText={"Export CSV"}

/>

<CourseAttendanceData data={data?.data} />

</div>

</section>

);

Exam Attendance Page

import React from "react";

import {

69
 AdminNav,

AdminHeader,

ExamAttendanceData,

AdminControls,

} from "../../Components/AdminComponents";

import { useNavigate } from "react-router-dom";

import { useCookies } from "react-cookie";

import { useEffect } from "react";

export default function ExamAttendancePage() {

const navigate = useNavigate();

const [cookies, setCookie] = useCookies(["user"]);

useEffect(() => {

if (!cookies.adminToken) {

navigate("/admin/login");

}, []);

return (

<section className="admin w-screen h-screen flex flex-row xl:h-auto xl:w-auto">

<AdminNav examAttendance={true} />

<div className="flex flex-col w-full h-full lg:relative lg:ml-72">

70
 <AdminHeader title={"Exam Attendance"} />

<AdminControls

firstButton={false}

secondButtonText={"Take Attendance"}

secondButton={true}

/>

<ExamAttendanceData />

</div>

</section>

);

Take Attendance Page

import React from "react";

import {

AdminNav,

AdminHeader,

TakeAttendance,

} from "../../Components/AdminComponents";

import { useNavigate, useParams } from "react-router-dom";

import { useCookies } from "react-cookie";

import { useEffect } from "react";

71
export default function AdminTakeAttendance() {

const navigate = useNavigate();

const { course } = useParams();

console.log("course", course);

const [cookies, setCookie] = useCookies(["user"]);

useEffect(() => {

if (!cookies.adminToken) {

navigate("/admin/login");

}, []);

return (

<section className="admin flex flex-row xl:h-screen">

<AdminNav examAttendance={true} />

<div className="flex flex-col w-full h-screen lg:relative lg:ml-72">

<AdminHeader title={"Start New Attendance"} />

<TakeAttendance course={course} />

</div>

</section>

72
 );

Manage Admins Page

import React from "react";

import {

AdminNav,

AdminHeader,

AdminsListData,

AdminsAdd,

} from "../../Components/AdminComponents";

import { useQuery } from "react-query";

import axios from "axios";

import { useCookies } from "react-cookie";

export default function ManageAdminsPage() {

const [openModal, setOpenModal] = React.useState(false);

const [applyModalStyle, setapplyModalStyle] = React.useState(true);

const [cookies, setCookie] = useCookies(["user"]);

const modalBoxStyle = "-z-10";

const actualStyle = "z-0";

73
const showModal = () => {

setOpenModal(true);

setapplyModalStyle(false);

};

const closeModal = () => {

setOpenModal(false);

setapplyModalStyle(true);

};

const { isLoading, data, isError, error } = useQuery("admin-all", () => {

return axios.post(`${import.meta.env.VITE_DB_URL}/smp/admin/allAdmin`, {

headers: {

Authorization: `Bearer ${cookies.adminToken}`,

},

});

});

console.log("data", data?.data);

console.log("isError", isError);

return (

74
 <div className="admin w-screen h-screen">

<section

className={`admin w-screen h-screen flex flex-row xl:h-auto xl:w-auto ${

applyModalStyle ? actualStyle : modalBoxStyle

}`}

>

<AdminNav manageAdmins={true} />

<div className="flex flex-col w-full h-full lg:relative lg:ml-72">

<AdminHeader title={"Manage Admins"} />

<button

className="rounded-full flex flex-row-reverse text-[#ffffff] py-3

self-end px-20 mr-6 bg-[#4d44b5]"

onClick={showModal}

>

Add Admin

</button>

{data && <AdminsListData data={data?.data} />}

</div>

</section>

<AdminsAdd open={openModal} onClose={closeModal} />

</div>

);

75
}

Qr Code Scanner Page

import React from "react";

import { QrCodeScanner } from "../../Components/AdminComponents";

import { useParams } from "react-router-dom";

export default function QrCodeScannerPage() {

const { course } = useParams();

return (

<div className="admin flex flex-col space-y-8 pt-10 h-screen">

<h2 className="text-[#4d44b5] whitespace-nowrap self-center text-3xl">

Qr Code Scanner

</h2>

<QrCodeScanner courseCode={course} />

</div>

);

76