Chapter One: Introduction

1.0 Background to the study

Employee clocking system is an essential aspect of human resource management,
as it directly impacts productivity, scheduling, and payroll. The traditional paper-
based attendance system is time-consuming, prone to errors, and lacks adequate
security measures.

The advancement of technology has led to the development of various automated

clocking systems, including biometric-based and swipe card systems. However,
these systems can be costly to implement, complex to use, and raise concerns
over privacy and security.

This project proposes an employee clocking system using time-based one-time

passwords to address the limitations of existing clocking systems. The use of
time-based one-time passwords provides a secure and accessible method for
employees to clock their attendance, without the need for additional hardware or
complex software. The proposed system aims to improve accuracy, efficiency,
and security in attendance tracking, while being user-friendly and cost-effective.

In this project, efforts will be made to design and implement a web-based

application for employees to log in and clock their attendance using a time-based
one-time password.

The project will also include the implementation of a database system to store
and manage employee attendance records securely, and develop an administrator
dashboard to monitor employee attendance and generate reports.

This work is significant as it proposes a novel solution to the problems associated

with traditional paper-based attendance systems and existing automated clocking
systems. The use of time-based one-time passwords can improve the accuracy,

1
efficiency, and security of attendance tracking, while being accessible and user-
friendly.

1.1 Statement of the Problem

1. Traditional clocking systems such as manual or swipe card systems can be
prone to errors and fraud, leading to inaccurate attendance records and
potential losses for the company.
2. Biometric-based clocking systems have become more popular in recent
years, but they can be expensive to implement.
3. Some existing clocking systems may not be user-friendly or easily
accessible for all employees, leading to confusion and frustration.

1.2 Aim and Objectives of the Study

The aim of this project is to design and implement an employee clocking system
using time-based one-time passwords.

Objectives:

1. To develop a web-based application for employees to log in and clock their

attendance using a time-based one-time password.
2. To implement a database system to store and manage employee attendance
records securely.
3. To develop an administrator dashboard to monitor employee attendance.

1.3 Significance of the Problem

The implementation of an employee clocking system using time-based one-time
passwords can have significant benefits for both employees and employers. This
includes improved accuracy and efficiency in tracking employee attendance,
which can lead to better management of employee time and increased
productivity.

Additionally, it can reduce instances of time theft and fraud, leading to cost
savings for the company and a more trustworthy work environment. The use of
2
time-based one-time passwords can also enhance security and privacy of
employee data, as it can prevent unauthorized access to attendance records.

1.4 Scope of the Study

The scope of this project is to develop an employee clocking system using a time-
based one-time password (TOTP) for small to medium-sized software companies,
with a workforce ranging from 10 to 50 employees.

1.5 Limitations of the Study

The project duration might have limited the time available for integrating reports
and user feedback analysis. Technical aspects like system integration with
existing HR or payroll systems or compatibility with different operating systems
and devices were not explored. This limitation 3 affected the thoroughness of the
evaluation process and the identification of potential challenges or improvements.

3
 Chapter Two: Literature Review
2.0 Introduction
This chapter provides an overview of the literature related to employee attendance
tracking, automated clocking systems, and time-based one-time passwords. The
purpose of this literature review is to identify the existing approaches and
technologies that have been used in attendance tracking systems and evaluate
their effectiveness and limitations. By examining the relevant literature, this study
aims to contribute to the development of a more effective and efficient employee
clocking system using time-based one-time passwords.

2.1 Theoretical Background

2.1.0 An overview of employee attendance management systems

Attendance management is a crucial aspect of human resource systems in

organizations, aiming to ensure regular attendance and punctuality of employees.
Traditional methods, such as time clocks and timesheets, have been used for
attendance control, but they have limitations in terms of accuracy and real-time
visibility of attendance data [1].

Unsatisfactory attendance caused by unscheduled absences and tardiness can

disrupt work, affect productivity, and create additional workload for other
employees [2]. Therefore, organizations strive to adopt effective attendance
management systems that promote better attendance practices and minimize these
issues.

Employee clocking systems have undergone significant advancements, moving

from manual methods to more sophisticated and automated approaches.
Biometric attendance systems, which utilize physiological characteristics like
fingerprints, facial features, or iris scans, have gained popularity due to their
accuracy and ability to prevent time theft and buddy punching [3]. These systems

4
ensure secure access control and provide a reliable means of verifying employee
attendance.

One emerging technology in employee clocking systems is the use of time-based

one-time passwords (TOTP). A time-based one-time password (TOTP) system is
proposed as an innovative solution for employee clocking [4]. TOTP technology
generates unique, time-limited passwords that provide secure access to systems
or services. Implementing a TOTP system for employee clocking offers enhanced
security, reduces the risk of password theft or sharing, and ensures accurate
tracking of attendance.

Considering the limitations and challenges of traditional clocking systems, the

adoption of a time-based one-time password system presents several advantages.
It provides increased security and accuracy in recording employee attendance,
eliminates the potential for time manipulation, and offers convenience through
the generation of unique passwords for each login session.

2.1.1 Introduction to time-based one-time passwords Algorithm

Time-based one-time password (TOTP) is a computer algorithm widely used for

generating unique passwords that change dynamically based on the current time.
It is a secure authentication method that enhances the security of user IDs and
passwords in various applications. TOTP is an important topic in the field of
information security and has been standardized by the Internet Engineering Task
Force (IETF) in RFC 6238 [5].

The concept of using time-based one-time passwords as an additional layer of

authentication to bolster security has gained prominence in recent years. With
TOTP, even if a password is compromised, unauthorized access to an account or
system is still hindered because the attacker would need to overcome the
challenge of breaking the dynamically changing OTP. This type of authentication

5
is commonly known as two-factor authentication, which adds an extra level of
security to traditional password-based systems. The idea of one-time passwords
was initially proposed by Leslie Lamport [6] in the early 1980s.

One of the key advantages of using a TOTP system in employee clocking systems
is the dynamic nature of the passwords. With TOTPs, each password is generated
based on the current time and remains valid for a short period, typically 30
seconds to 1 minute. This ensures that each employee's authentication credentials
are unique and constantly changing, minimizing the risk of unauthorized access
or impersonation. By using time-based passwords, the system can effectively
mitigate security threats such as password theft, replay attacks, and unauthorized
access attempts.

Furthermore, the integration of TOTPs with employee clocking systems can

enhance the accuracy and reliability of attendance tracking. Since TOTPs are
time-limited and unique to each employee, the system can accurately identify and
authenticate individuals at the time of clocking in or out. This eliminates the
possibility of buddy punching or fraudulent timekeeping practices, ensuring that
only authorized employees can record their attendance.

Additionally, the implementation of a TOTP system offers a convenient and user-

friendly experience for employees. TOTPs can be generated and displayed on
mobile devices through dedicated applications, eliminating the need for physical
cards or tokens. Employees can easily access their unique passwords and
authenticate themselves using their smartphones, enhancing the overall user
experience and reducing the likelihood of errors or inconveniences associated
with traditional clocking systems.

TOTP credentials are also based on a shared secret known to both the client and
the server, creating multiple locations from which a secret can be stolen [8]. An
attacker with access to this shared secret could generate new, valid TOTP codes

6
at will. This can be a particular problem if the attacker breaches a large
authentication database [9].

By choosing a time-based one-time password system for employee clocking,

organizations can also benefit from cost savings. TOTP systems typically do not
require significant hardware investments as they can utilize existing devices such
as smartphones. This eliminates the need for additional physical tokens or
specialized clocking hardware, resulting in cost-effective implementation and
maintenance.

The adoption of a time-based one-time password system in employee clocking

systems provides enhanced security, accurate attendance tracking, convenience
for employees, and cost savings for organizations. By leveraging the dynamic and
unique nature of TOTPs, organizations can establish a secure and reliable
authentication mechanism that ensures only authorized individuals can record
their attendance, contributing to the overall efficiency and integrity of the
employee clocking process.

7
2.2 Review of Related Literature
Various problems pertaining to authentication and security of highly privileged
and private information have been analysed by many scholars. While studying
diverse schemes adopted in the present as well as the past, it was observed that
the usage of One-Time Password or commonly known as OTP seemed to assure
improved access management security in private as well as public networks [10].
Owing to the varied formats of OTP usage as well as the architecture developed
by the past protocol makers and researchers, diverse OTP schemes have also been
patented but standardization of the same is a challenge. Various OTP based
schemes are discussed in this section. The security of the systems based on OTP
relies on the non-invertible property of secure hash functions. This implies that
the function can be computed in the forward direction, but its inverse calculation
is computationally infeasible [11].

A. One Way Function Chain Approach to Generate OTP

It was Lamport who first recommended the idea of OTP in the initial years of
1980 [12]. Lamport proposed a popular OTP scheme based on a one-way hash
function that warded off replay attacks in every communication. The principle of
OTP ensures improved security by using an algorithm that generates a
pseudorandom output every time a user tried to log in. The password system in
this scheme begins with the initial seed s, and proceeds with the generation of
passwords via a one-way chain function, f(s), f(f(s)), f(f(f(s))),.and so on. If the
number of passwords required is unknown, a new value of seed may be selected
after exhausting the set for s. For authentication, the user device provides the
passwords in a reverse manner beginning from f(f(f(s))) to f(s).

B. S/keyTM One Time Password

The author in [13] a prototype software called the S/KEY™ OTP authentication
scheme that employs a computation for generating a definite series of one-use
passwords out of a solitary secret ‘seed’. The security of the system relies on the
8
seed that is known to the user only. This system is an extended version of
Lamport‟s scheme. The one-time passwords are so related that computation of
any password from the preceding sequence is computationally infeasible. Even
though the scheme is immune to eavesdropping and replay attacks, it has been
found to be susceptible to Server-spoofing attacks as well as offline dictionary
attacks.

C. Bicakci et al.’s Scheme

Authors in [14] proposed Infinite Length Hash Chains (ILHC) that employ a
public key cryptographic algorithm, say for producing an infinite and forward
one-way-function or OWF that forms the production core of OTPs. This system
has employed RSA [15] with as private key and as the public key. Increase in
cascaded exponentiations raises the computational complexity thus making its
implementation difficult in devices with restricted computation like mobile
phones.

D. RSA SecureID Authenticator

Hardware tokens are employed for storing secrets in dedicated modules carried
by users. The RSA token family [16] has long established as the market leader.
Here, a simple dedicated hardware version has been employed which has just a
display without any I/O ports or buttons. The device holds a secret referred to as
‘seed’ that is known at the backend and is synchronized with the main server’s
internal clock. A cryptographically strong algorithm will generate a fresh digit
code for 60 seconds utilizing the seed and current time stamp. The generated code
is displayed on the device screen. When enrolling, the user uses a web interface
to connect to the administrative backend where he/she chooses a PIN and the
username-token pairing is affirmed. After this, the user types his/her ‘username’
and ‘passcode’ (the concatenated form of a dynamic 6-digit code and a static PIN
of 4 digits) in place of username and password for authentication. A similar
process occurs at the server end parallelly. RSA provides a single sign-on facility
9
for granting access to various corporate resources using the same token. However,
it was found in March 2011 that attackers corrupted the backend seed database of
RSA [17] allowing them to guess the codes supplied by any token. Owing to the
typical nature of mobile devices, this type of synchronization cannot be assured.

E. Unidirectional OTP Scheme

In this scheme, the client as well as the server shall generally have the same
counter. The client produces an OTP from a secret key counter value and then
increments the counter value. The user submits this OTP to the server and server
also produces a password by making use of its counter value and the same secret
key that the user employed. In the case of a password-match case, the user gets
authenticated by the server and its counter value is incremented. The HOTP
scheme [18] is unidirectional that relies on a counter value and utilizes the
HMAC-SHA1 algorithm for OTP generation. This computation yields a 160-bit
output that is truncated by HOTP to a form that can be typed by the user easily.

F. OTP Generated by MID Let

A new, secure authentication mechanism has been given in [19] that relies on the
principle of one-time-passwords. This OTP solution brings together the secure
and simple OTP principal pervasiveness of a GSM mobile device. A Java MIDlet
transforms the mobile phone into a safe OTP token since it can be installed on
every Java enabled phone which can then be utilized for logging into any web
service. This solution relies on the plain challenge-response mechanism. For
making the OTP generation secure, a tough secret key is employed in
concatenation with a challenge. The secret key must be shared between the server
and the client. Whenever a user needs to be verified, Authentication Server (AS)
generates a Challenge with the User profile and the corresponding OTP; then, it
computes the MAC of OTP. The MAC, as well as the challenge, are transmitted
to MIDlet in an SMS whereas the OTP is retained at the AS. The MIDlet is
activated automatically at the arrival of the message and the user is prompted for
10
a password. The MIDlet produces the password hash and verifies it against the
value stored. If they match then it will be used to decrypt the shared secret key.
MIDlet will also generate OTP and its MAC is calculated and compared with the
received MAC. If it does not match, the authentication shall be cancelled, and the
process should be restarted. If they match, then the user will be successfully
authenticated. The MIDlet will then send OTP back to AS. The server checks if
the OTP is right and authenticates the user.

G. Symmetric Encryption Algorithm and One Way Hash Function to Generate OTP

Authors in [20] and others proposed another OTP scheme which uses a one-way
hashing function and symmetric encryption (AES-128) for OTP generation. The
one-time-password say is formed of two things, where C signifies cipher text and
D represents verification bits. A cipher text of bits can produce distinct OTPs. The
length of verification bits relies on the security requirements. The output obtained
from symmetric encryption carries the information of counter value to the server
thus avoiding counter desynchronization. However, employing only symmetric
encryption is insufficient for OTP generation. If a random password is submitted
by the intruder, it is decrypted by the server that attains the counter value. It is
highly likely that the value of the counter is greater than the present counter value
saved at the server and may lead to a successful assault. Hence, verification bits
are added to OTP which are formed from the counter value digest for ensuring its
validity

11
 Chapter Three: System Analysis and Design
3.0 Introduction
This chapter describes the design methodology which have been chosen in
building the software as well as the modelling tools used in developing of the
project which is the Object-Oriented Analysis Design Methodology (OOADM),
Case diagram, etc.

It also briefly describes systems which have been in existence and their
shortcomings before this one project was carried out. It is thus the shortcoming
this proposed project tries to rectify as well as give the user a better experience
while using it. In this chapter, careful analysis in details and explanation on how
the proposed project will operate showing the database design, system,
architecture, input design and output design was highly discussed.

System Analysis and Design refers to the process of examining a business

situation with the intent of improving it through better procedure and methods.
System analysis and design relates to shaping organizations, improving
performance and achieving objectives for profitability and growth, the emphasis
is on systems in actions, the relationships among subsystems and their
contribution to a meeting a common goal. System development can generally be
thought of as having two major components: System analysis and System design.

System design is the process of planning a new business system or one to replace
or complement an existing system. But before this planning can be done, we must
thoroughly understand the old system and determine how computers can best be
used to make its operation more effective.

System Analysis then is the process of gathering and interpreting facts,

diagnosing problems, and using the information to recommend improvements to
the system and this is done by the system analyst [21].

12
Design Methodology refers to the development of a system or method for a
unique situation. The key to design methodology is finding the best solution for
each design situation, whether it be in industrial design, architecture or
technology. Design methodology stresses the use of brainstorming to encourage
innovative ideas and collaborative thinking to work through each proposed idea
and arrive at the best solution. Meeting the needs and wants of the end user is the
most critical concern. Design methodology also employs basic research methods,
such as analysis and testing. While design methodology is employed in many
industries, it is commonly applied in technology fields, including those using the
internet, software and information systems development. Several design
methodology approaches have developed in the technology industry. Each was a
reaction to a different type of problem. Some common technology design
methodology includes: Top-down Design or Stepwise Refinement, Bottom-up
Design, structured Design, Structured Analysis and Design Technique, Data
Structured System development, Object Oriented Design. The design
methodology chosen for this project is Object Oriented analysis and design
methodology [22].

The design methodology used in this project is OOADM (Object Oriented

Analysis Design Methodology). Object Oriented Analysis (OOA) can be defined
as the investigation of objects and the design involves the collaboration of
identified objects; the most important purpose of OO analysis is to identify
objects of a system to be designed. This analysis is also done for an existing
system, now an efficient analysis is only possible when we are able to start
thinking in a way where objects can be identified, after identifying the objects
their relationships are identified and finally the design is produced.

The purpose of Object-Oriented analysis and design can be described as:

• Identifying the objects of a system.

• Identifying their relationships.

13
 • Make a design which can be converted to executables using object-oriented
languages [23].

3.1 Description of the Existing System

The existing employee clocking system relies on a paper-based process where

employees manually record their clock-in and clock-out times on paper logs.

However, this system presents several limitations.

• Fraudulent practices like buddy punching are possible, leading to

inaccurate time records.
• Manual data entry is time-consuming and prone to errors.
• The physical nature of paper logs restricts data accessibility and poses risks
of theft or loss.

These limitations necessitate the development of a more efficient and secure

system using time-based one-time passwords.

3.2 Analysis of the Proposed System

In this section, we analyse the proposed employee clocking system that utilizes
time-based one-time passwords (TOTPs) as a more secure and efficient
alternative to the existing paper-based process. The analysis aims to evaluate the
feasibility and potential benefits of the proposed system.

3.2.1 Design Methodology

This section presents the design methodology for the proposed employee
clocking system. It ensures a well-structured approach to developing a reliable
system that fulfils the identified requirements and objectives. The following UML
tools will be used to analyse the system with the aim of identifying what the
system will do:

• UML use Case

• Activity Diagram
14
3.2.1.1 Use Case Diagrams

Use case diagrams are used during requirements elicitation and analysis as a
graphical means of representing the functional requirements of the system [24].

A use case is a sequence of transactions performed by a system that yields an

outwardly visible, measurable result of value for a particular actor. A use case
typically represents a major piece of functionality that is complete from
beginning.

Scan QRcode

Log IN

Clock In /
Clock Out

Dashboard

Attendance
Records

Log out
Staff
Admin

Fig 3.1: Use Case Diagram of the System

15
3.2.1.2 Activity Diagram

Activity Diagram is another important diagram in UML to describe dynamic

aspects of the system. Activity diagram is basically a flow chart to represent the
flow from one activity to another activity. The activity can be described as an
operation of the system. The control flow is drawn from one operation to another.
This flow can be sequential, branched or concurrent. Activity diagram deals with
all type of flow control by using different elements like flow chart etc. It captures
the dynamic behaviour of the system but they are also used to construct the
executable system [26].
Start

Input staff
ID
Is No
Valid?
Yes
Generate QRcode

Scan QRcode

No Is Yes
Login
Valid?

Is No
Valid?
Yes

Clock In /
Stop Clock Out

Fig 3.2: Activity Diagram of the System

16
3.3 Design of the Proposed System

In this section, it encompasses how the system to develop will operate. This will
include the following:

• Class Diagram
• Database Design
• Input Design
• Output design
• System Architecture

3.3.1. Class Diagram

A class Diagram is a type of static structure UML diagram that describes the
structure of a system's classes, their attributes, and their relationships between the
classes. Classes are represented with boxes which contain three parts: the name
of the class, the attributes of the classes and the methods of operation the class
can take [25].

Employee Attendance

staff_Id: int attendaceId: int

first_name: string staff_Id: int
last_name: string * clockInTime: DateTime
phone_no: string clockOutTime: DateTime
device_token: string * date: Date
registeration_date:timestamp *

Administrator

adminId: int
username: string
password: string
requestAttendance()
ViewEmployees()

Fig 3.3: Class Diagram of the System

17
3.3.2 Database Design

The Database Management applied in this project is the My Structured Query

Language, popularly known as MySQL. MySQL is an open-source relational
database management system based on Structured Query Language.

Database Design is the process of producing a detailed data model of database.

This data model contains all the needed logical and physical design choices and
physical storage parameters needed to generate a design in a data definition
language, which can then be used to create a database. A fully attributed data
model contains detailed attributes for each entity [27].

The term database design can be used to describe many different parts of the
design of an overall databases system. Principally, and most correctly, it can be
thought of as the logical design of the base data structures used to store the data.
In the relational model these are tables and views. In an object database the
entities and relationships map directly to object classes and named relationships.
However, the term database design could be used to apply to the overall process
of designing, not just the base data structures, but also the forms and queries used
as part of the overall database application within the database management
system (DBMS).

The process of doing database design generally consists of a number of steps

which will be carried out by the database designer. Usually, the designer must:

• Determine the data to be stored in the database.

• Determine the relationships between the different data elements.
• Superimpose a logical structure upon the data on the basis of these
relationships.

There are three tables for this application, namely Admin, Users, Attendance
Records Table

18
 Fig 3.1: Staff Table
Field Data Type Size Null Description Action
staff_id INT NO User identifier Primary
key
first_name VARCHAR 20 NO Staff firstname
last_name VARCHAR 20 NO Staff lastnmae
Email VARCHAR 50 NO Staff Email
phone_no VARCHAR 15 NO Staff phone
number
device_token VARCHAR 255 NO Token for device
registeration_date timestamp NO date

The "staff" table above serves as the core repository of information for staff
members within the application. The design ensures individual staff
identification, supports communication details, and records registration history.

Fig 3.2: Admin Table

Field Data Type Size Null Description Action

Admin_id INT NO Unique admin PRIMARY
identifier KEY
Username VARCHAR 50 NO Admin’s
username
Password VARCHAR 100 NO Hashed
password
Email VARCHAR 50 YES Admin’s email

The "admin" table above is dedicated to managing administrative user accounts

within the system. This table is essential for maintaining system security and

19
granting authorized access to administrative functions. It ensures each admin has
a distinct identity and controlled access to the system's backend.

Fig 3.3: Attendance table

Field Data Type Size Null Description Action

Record_id INT NO Unique record PRIMARY
ID KEY
Staff_id INT NO Staff ID FOREIGN
(staff_id) KEY
Clock_in_time DATETIME NO Clock-in
timestamp
Clock_out_time DATETIME YES Clock-out
timestamp
Date DATE NO Date of
attendance

The "attendance" table above is designed to meticulously record staff members'

clock-in and clock-out times, along with associated information. It plays a pivotal
role in monitoring staff attendance and punctuality.

3.3.3. Input Design

This design represents how data is captured and fed into the system for
processing. Input design includes specifying the means by which system
operators directs the system in performing actions.

20
Staff ID

Generate QRcode

Fig 3.4: Homepage

Password

Login

Fig 3.5: Login

Select Action

Clock IN

Clock OUT

Fig 3.6: Attendance page

21
3.3.4 Output Design

Home Admin Staff Registration

Staff ID

Generate QR Code

Fig 3.7: Home page

Home Admin Staff Registration

Invalid QR code or expired

Go back Home

Fig 3.8: Error Page

22
3.3.4. System Architecture

It is the conceptual model that defines the structure of behaviour and more views
of a system. Architecture description is a formal description and representation of
a system, organized in a way that supports reasoning about the structures and
behaviours of the system.

The proposed system is to be designed using a 3-tier architecture. These tiers are
the presentation tier, the middle tier and the data tier. The presentation tier is the
part of the system known as the user interface and this interface is designed using
HTML and CSS. The next layer is the middle tier which is also known as the
business logic. The middle tier is designed using NodeJS and it runs on the server.
Now the last layer is the Data tier and it is part of the system that is responsible
for storing the data. This data part is the Database itself. The database
management system used in the development of this system is the MySQL
database.

NodeJS

23
 Chapter Four: System Implementation
4.0 Introduction
In this chapter, the proposed system would be designed so as to bring the design
to reality by making it fully functional to the user.

It briefly discusses the choice of development environment used in building this

project which contains the system platform, the Integrated Development
Environment (IDE). It briefly describes the choice of programming language used
to build the project. The implementation architecture is diagrammatically shown
and finally the software testing which shows few various screenshots of the
software which has been developed.

In this chapter, the proposed system already designed will be implemented so that
it can be made fully functional to the users.

System Implementation is the construction of the new system and the delivery of
that system into production. The construction phase does two things: builds and
tests a functional system that fulfils business or organization design requirements
and implements the interface between the new system and the existing system.

4.1 Choice of Development Environment

Let’s now look at the environment used in the development of the proposed
system.

4.1.1 System Platform

The proposed system was developed with windows10 Operating system. This
Operating System supports all the necessary and important features and software
required for web development.

4.1.2 Integrate Development Environment (IDE)

The IDE used in this project implementation is Visual Studio Code. This IDE
supports a variety of programming languages including Java, C++, HTML, CSS,

24
JavaScript, PHP, NodeJS and so on. The IDE makes the process of programming,
debugging and maintenance more convenient.

Xamp Server (Extended Apache MYSQL PHP) was used to create the database
and to run NodeJS Script.

4.1.3 Choice of Programming Language

The major technologies used in this project are Web technologies (HTML, CSS,
NodeJS) and relational database technology. The Web application developed is a
collection of web documents i.e., files written in HTML. The web document is
presented (or rendered visible) to user by an application program known as a
browser (e.g., Internet explorer, Firefox, Opera, Chrome).

The technologies are briefly explained below:

• HTML: Known as Hypertext Markup Language. It comprises of a

sequence of elements: number of tags; single and double tags i.e., opening
and closing tags and text. Here is given an example of an HTML element
present in the homepage;
<h1>Employee Clocking System</h1>
In this example, it is comprised of double tags:<h1> is the start tag. </h1>
is the closing tag and "Employee Clocking System" is the text enclosed in
the tags.
• CSS: Stands for Cascading Style Sheet. It is a style sheet language used in
describing the representation of the HTML document. It is designed
primarily to enable the separation of document content from representation
including aspects like layout, fonts and colour. A sample CSS code used in
the project:
body{
background: #003333;
margin: 0px;

25
 padding: 0px;
}
• NodeJS: It is a server-side scripting language used alongside HTML. It is
used to create dynamic content on websites. The NodeJS code is processed
on a web server which is serving a web page which contain NodeJS. The
code is executed on the server before the web application is shown to the
end user. This is why the end user is unable to see NodeJS code.
• MySQL: It is an open-source Relational Database Management System
(RDBMS). It is used in conjunction with NodeJS for storing databases.
MySQL stands for My Structured Query Language. The Database
Management System is the interface between the actual database files and
the application storing, using and deleting the data. The MySQL database
can hold binary files, text and numeric data. As MySQL is relational
database, it means the stored data may have relationships within.

4.2 Implementation Architecture

USER INTERFACE

USER
DATABASE
Respons Request

WEB SERVER

Fig 4.1: Implementation Architecture

26
4.3 Software Testing

The testing of this application was done at various stages of the development.
This stage-by-stage testing is in order to be able to detect errors and remove them
immediately. The screenshots below show some of the important views of the
application:

Fig 4.2: Screenshot showing Homepage

27
Fig 4.5: Screenshot showing Clocking page

Fig 4.6: Screenshot of Attendance page

Fig 4.7: Screenshot of dashboard showing staffs

28
4.4 Documentation

4.4.1 User Manual

• Click on the windows button and locate the Web Browser Icon.
• Open the browser and enter the URL http://localhost:3000 (note that this a
temporary URL, based on a local machine server), press enter
• On the homepage, type in your registered staff_id to generate a dynamic
qrcode for logging in
• When logged in as a staff, you will be taken to the attendance page where
you clock in or clock out
• Click on specific tabs, links or button to carryout actions written therein.

4.4.2 Source Code Listing

The source code listing for this project work can be found in Appendix A (Code
Listing).

29
 Chapter Five: Summary and Conclusion
5.0 Summary
The attendance clocking system developed in this project aims to provide
an efficient and secure solution for recording staff members' working hours using
the Time-based One-Time Password (TOTP) mechanism. By combining TOTP
technology with a user-friendly interface, the system ensures accurate and reliable
attendance tracking. The system's foundation rests on a well-structured database
that stores staff information and attendance records. It utilizes TOTP codes for
secure clock-in and clock-out actions, enhancing data integrity and thwarting
unauthorized access. The interface offers an intuitive experience for both staff
and administrators, contributing to the system's usability.

5.1 Conclusion
The successful implementation of the attendance clocking system
underscores the significance of integrating Node.js, MySQL, HTML, and CSS.
The utilization of the TOTP authentication mechanism further enhances the
system's security and reliability. The cohesive collaboration between these
technologies results in a powerful tool that optimizes staff management and
attendance tracking processes. The system's robust backend powered by Node.js,
the structured data management offered by MySQL, and the engaging user
experience facilitated by HTML and CSS make it a valuable asset for
organizations seeking efficient attendance management solutions.

5.2 Recommendation
While the attendance clocking system has been successfully developed and
demonstrates its intended functionality, there are opportunities for enhancement
and expansion:

30
 • Real-time Notifications: Implement real-time notifications for
administrators to be alerted when significant attendance events occur, such
as late clock-ins or early clock-outs.
• Integration with Payroll: Explore the possibility of integrating the
attendance system with the payroll management system to automate salary
calculation based on accurate attendance data.
• Analytics and Reporting: Incorporate data analytics and reporting features
to provide insights into staff attendance trends, helping management make
informed decisions.

By considering these recommendations and continuously iterating on the system,

we can further enhance its functionality and usability, ensuring that it continues
to meet the evolving needs of staff attendance management.

31
REFERENCES

[1] Bevan S and Hayday S. (1998): Attendance Management: A Review of

Good Practice" Report 353, Institute for Employment Studies.
[2] McKeehan D.A. (2002): Attendance Management Program, The City of
Pleasanton, Human Resources.
[3] Cappelli, R., Lumini, A., Maio, D. and Maltoni, D. (2007). Fingerprint
Image Reconstruction from Standard Templates, IEEE Transactions, vol.
29, pp.1489-1503.

[4] Yuihotakaishi (2011). Attendance Monitoring System Using Biometrics for

Security Staff, study mode Inspiring.

[5] "RFC 6238 – TOTP: Time-Based One-Time Password Algorithm".

Archived from the original on July 11, 2011. Retrieved July 13, 2011.

[6] L. Lamport Password Authentication with Insecure Communication, In:

Comm. ACM, vol. 24, No 11, 1981, pp. 770-772
[7] Umawing, Jovi (21 January 2019). "Has two-factor authentication been
defeated? A spotlight on 2FA's latest challenge". Malwarebytes Labs.
Archived from the original on 25 September 2020. Retrieved 9
August 2020.
[8] "Time-Based One-Time Passwords (TOTP)". www.transmitsecurity.com.
25 June 2020. Retrieved 2 May 2022.

[9] Zetter, Kim. "RSA Agrees to Replace Security Tokens After Admitting
Compromise". WIRED. Archived from the original on 12 November 2020.
Retrieved 17 February 2017.
[10] K. Aravindhan and R.R. Karthiga, “One-time Password: A Survey”,
International Journal of Emerging Trends in Engineering and
Development, vol. 1, no. 3, pp. 613-623, 2013.

32
[11] N. Haller, C. Metz, P. Nesser and M. Straw, A one-time password system.
RFC 1938, 1996

[12] L. Lamport, “Password authentication with insecure communication”,

Communications of the ACM, vol. 24, no. 11, pp. 770-772, 1981.

[13] N. Haller, “The S/KEY one-time password system”, RFC 1760, 1995.

[14] K. Bicakci and N. Baykal, “Infinite length hash chains and their
applications”, in Enabling Technologies: Infrastructure for Collaborative
Enterprises, WET ICE 2002, Eleventh IEEE International Workshops on,
IEEE, 2002, pp. 57-61

[15] R.L. Rivest, A. Shamir and L. Adleman, “A method for obtaining digital
signatures and public-key cryptosystems”, Communications of the ACM,
vol. 21, no. 2, pp. 120-126, 1978.

[16] SecureID, R. S. A. June 2003.

[17] T. Bradley, “RSA SecurID Hack Shows Danger of APTs”, PCWorld, 2011.
[Online].
Available:https://www.pcworld.com/article/222555/rsa_securid_hack_sho
ws_danger_of_apts.html. [Accessed: 01- Oct- 2018].

[18] D. M‟Raihi, M. Bellare, F. Hoornaert, D. Naccache and O. Ranen, “Hotp:

A hmac-based one-time password algorithm”, RFC4226, 2005

[19] S. Hallsteinsen and I. Jorstad, “Using the mobile phone as a security token
for unified authentication”, in Systems and Networks Communications,
ICSNC 2007, Second International Conference on, IEEE, 2007, pp. 68-68.

[20] S. Liao, Q. Zhang, C. Chen and Y. Dai, “A unidirectional one-time password

authentication scheme without counter desynchronization”, in Computing,
Communication, CCCM 2009, ISECS International Colloquium on, vol. 4,
IEEE, 2009, pp. 361-364

33
[21] "Overview of System Analysis & Design", Available at:
http://www.ddegjust.ac.in/studymaterial/pgdca/ms-04.pdf

[22] Dzeugang placide, "Information System & System analysis and design
(ICT & Comp. Sc.)" blog, 07 Feb. 2015; Available at: http://dzplacide.over-
blog.com/2015/02/information-system-system-analysis-ict-comp-sc.html

[23] "What is Design Methodology?", Available

at: https://learn.org/articles/What_is_Design_Methodology.htmlhttps://le
arn.org/articles/W hat_is_Design_Methodology.html

[24] "Object Oriented Analysis", Available at:

https://en.wikipedia.org/wiki/Object- oriented_analysis_and_design,htm

34
 APPENDICES

Header File

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Staff Clocking System</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min
.css" rel="stylesheet" integrity="sha384-
4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHD
EXuppvnDJzQIu9" crossorigin="anonymous">
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<header class="p-3 text-bg-dark">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center
justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-
decoration-none">
<img src="/images/rocodeify_fav.PNG" width="40px" height="40px"
alt="">
</a>
<ul class="nav col-12 ms-auto col-lg-auto me-lg-auto mb-2 d-flex justify-
content-end mb-md-0">
<li><a href="/" class="nav-link px-2 text-secondary">Home</a></li>
<li><a href="/login" class="nav-link px-2 text-white">Log In</a></li>
<li><a href="/register" class="nav-link px-2 text-
white">Register</a></li>

35
 </ul>
</div>
</div>
</header>

Index Page
<%- include('partials/header') -%>
<div class="container col-xl-10 col-xxl-8 px-4 py-5">
<div class="row align-items-center g-lg-5 py-5">
<div class="col-md-10 mx-auto col-lg-5">
<form action="/auth/generate_qr_code" method="post" class="p-4 p-md-
5 border rounded-3 bg-light">
<div class="form-floating mb-3">
<input type="text" class="form-control" id="staffId"
placeholder="Staff ID" name="staff_id" required>
<label for="staffId">Staff ID</label>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">Generate
QR Code</button>
<hr class="my-4">
<small class="text-muted">By clicking Generate, you agree to the terms
of use.</small>
<% if (typeof message == 'undefined'){ %>
<% } else if (message){ %>
<p class="alert alert-danger mt-3 p-2"><%= message %></p>
<% } %>
</form>
</div>
<div class="col-lg-7 text-center text-lg-start">
<div>

36
 <% if (typeof qrCodeImage == 'undefined'){ %>
<p>Use Valid <b>Staff ID</b> to Generate QR Code for your
Attendance</p>
<% } else if (qrCodeImage) { %>
<h2>Scan the QR Code to Log In</h2>
<img src="<%= qrCodeImage %>" alt="QR Code for Staff Login">
<% } %>
</div>
</div>
</div>
</div>
<%- include('partials/footer') -%>
Login Page
<%- include('partials/header') -%>
<div class="admin-bg-image">
<div class="wrapper">
<main class="form-signin w-100 m-auto">
<div class="login-container">
<form action="/auth/login" method="post" class="login-form">
<h2>Log In</h2>
<hr>
<div class="input-container mt-2">
<input type="text" id="user_name" name="staff_id"
<% if (typeof staff_id === 'undefined'){ %>
<% } else if (staff_id){ %>
value="<%= staff_id %>"
<% } %>
hidden/>
</div>

37
 <div class="input-container">
<label for="password" class="pb-2">Password</label>
<input type="password" id="phone_no" name="phone_no" required />
</div>
<button type="submit">Login</button>
<% if (message){ %>
<p class="alert alert-danger mt-3 p-2"><%= message %></p>
<% } %>
</form>
</div>
</main>
</div>
</div>
<script>
// Remove query parameters from URL after page load
window.onload = function() {
history.replaceState({}, document.title, window.location.pathname);
};
</script>
<%- include('partials/footer') -%>
Register Page
<%- include('partials/header') -%>
<div class="container-fluid">
<div class="row">
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<div
class="d-flex justify-content-between flex-wrap flex-md-nowrap
align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">Register Staff</h1>

38
</div>
<div class="create_staff_wrapper w-75 m-auto mt-5">
<form action="/auth/register" method="post" class="row g-3">
<div class="col-md-6">
<label for="firstname" class="form-label">First Name</label>
<input type="text" class="form-control" id="firstname"
name="first_name" required>
</div>
<div class="col-md-6">
<label for="lastname" class="form-label">Last Name</label>
<input type="text" class="form-control" id="lastname"
name="last_name" required>
</div>
<div class="col-12">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email"
name="email" required>
</div>
<div class="col-md-6">
<label for="firstname" class="form-label">Phone No.</label>
<input type="tell" class="form-control" id="phone"
name="phone_no" required>
</div>
<div class="col-12">
<button type="submit" class="btn btn-
primary">Register</button>
</div>
<% if (message){ %>
<p class="alert alert-danger mt-3 p-2"><%= message %></p>
<% } %>

39
 </form>
</div>
</main>
</div>
</div>
<script>
// Get device information

const deviceInfo = navigator.userAgent;

document.getElementById('device_info').value = deviceInfo;
</script>
<%- include('partials/footer') -%>
Attendance Page
<%- include("partials/header_atten") -%>
<div class="container mt-5 w-25 m-auto">
<h2>Clock In or Out</h2>
<div class="row mt-3">
<div class="col">
<form action="/auth/attendance" method="post">
<div class="mb-3">
<label class="form-label">Select Action:</label>
<div class="input-container mt-4">
<label for="staff_id">Staff ID: </label>
<input type="text" id="staff_id" name="staff_id" required
hidden />
</div>
<input type="hidden" id="timestamp" name="timestamp"
value="" />
<input type="hidden" id="action_type" name="action_type"
value="" />

40
 <div class="form-check">
<input class="form-check-input" type="radio" name="action"
id="clockIn" value="Clock In" />
<label class="form-check-label" for="clockIn">Clock
In</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="action"
id="clockOut" value="Clock Out" />
<label class="form-check-label" for="clockOut">Clock
Out</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<script>
document.getElementById("clockIn").addEventListener("click",
function () {
document.getElementById("action_type").value = "Clock In";
document.getElementById("timestamp").value = new
Date().toISOString();
});
document.getElementById("clockOut").addEventListener("click",
function () {
document.getElementById("action_type").value = "Clock Out";
document.getElementById("timestamp").value = new
Date().toISOString();
});
</script>
</div>
<%- include("partials/footer") -%>

41