ST.

XAVIER’S COLLEGE
MAITIGHAR, KATHMANDU, NEPAL

A Mini Project On
“Smart Attendance: A Web-Based Student Attendance
Management System”

Under the supervision of

“Mrs. Jamuna Maharjan”
Lecturer
Department of Computer Science

Submitted By:
“Rejina Bhattarai” (“023NEB841”)

Submitted To:

St. XAVIER’S CollEgE

Department of Computer Science
Maitighar, Kathmandu, Nepal
“27th February, 2025”
 Certificate of Declaration
It is to certify that Miss. Rejina Bhattarai has successfully carried out the project
entitled “Smart Attendance Tracker: A Web-Based Student Attendance
Management System” under my guidance and supervision.

I recommend this project for the +2 degree of NEB.

...............................
Supervisor
Jamuna Maharjan
Department of Computer Science
St. Xavier’s College
Maitighar, Kathmandu, Nepal

Date: 27th February, 2025

ii
 Acknowledgement

This project’s completion was made possible through the invaluable guidance,
supervision, and support of many individuals, for which I am sincerely grateful.

I extend my heartfelt thanks to St. Xavier’s College, Maitighar, and the administration for
providing this platform and opportunity. My gratitude also goes to the Department of
Computer for their essential instructions, which greatly contributed to the success of this
report. I am especially thankful to my supervisor and lecturer, Mrs. Jamuna Maharjan,
whose expertise, guidance, and constructive feedback have been instrumental in shaping
my understanding.

Lastly, I appreciate the unwavering support of my family and friends, whose

encouragement kept me motivated. This project stands as a testament to the collective
efforts and contributions of all involved, enriching both my learning and experience.

iii
 Abstract
The Student Attendance Management System is a web-based application designed to
provide students with a seamless and efficient way to track their attendance records. By
integrating front-end and back-end technologies, the system ensures a user-friendly and
secure experience.

The front-end is developed using HTML, CSS, and JavaScript, where HTML structures
the interface, CSS enhances design and responsiveness, and JavaScript enables
interactivity for smooth navigation.

On the back-end, PHP manages server-side logic, handling database interactions and
implementing CRUD (Create, Read, Update, Delete) operations. The system allows
students to securely log in, view their attendance records, and track their attendance
history in an organized manner.

This project aims to enhance accessibility and accuracy in attendance tracking, reducing
dependency on manual processes. It serves as a practical implementation of full-stack
development, focusing on usability, security, and efficient data management.

iv
 Table of Content

Contents
Certificate of Declaration...............................................................................ii
Acknowledgement ....................................................................................... iii
Abstract ......................................................................................................... iv
List of Figures ............................................................................................... vi
List of Abbreviations ...................................................................................vii
Introduction .................................................................................................... 1
Background .................................................................................................................... 1
Executive Summary ....................................................................................................... 2
Objectives and significance of the study ....................................................................... 2
Importance ..................................................................................................................... 3
Literature Review .......................................................................................... 4
Methodology .................................................................................................. 6
Data Collection Methods ............................................................................................... 6
Tools and Techniques for Analysis ............................................................................... 6
Detailed Description of the Research Design ................................................................ 7
Sampling Methods and Participant Demographics ....................................................... 8
Step-by-Step Data Collection and Analysis Process ..................................................... 8
Implementation .............................................................................................. 9
Design ............................................................................................................................ 9
Folder Structure ........................................................................................................... 15
15
System Requirements .................................................................................................. 16
Results .......................................................... Error! Bookmark not defined.
Conclusion ................................................... Error! Bookmark not defined.
References .................................................... Error! Bookmark not defined.
Appendices ................................................... Error! Bookmark not defined.
Gantt Chart .................................................................. Error! Bookmark not defined.

v
 List of Figures
Figure 1:Flow Chart ........................................................................................................... 12
Figure 2: ER Diagram ........................................................................................................ 13
Figure 3: Context Diagram ................................................................................................ 13
Figure 4: Decision Tree ..................................................................................................... 14
Figure 5. Register Page ...................................................... Error! Bookmark not defined.
Figure 6: Registered individuals in the database ............... Error! Bookmark not defined.
Figure 7: Login Page .......................................................... Error! Bookmark not defined.
Figure 8: Student Dashbaord ............................................. Error! Bookmark not defined.
Figure 9: Attendance Record Table ................................... Error! Bookmark not defined.
Figure 10: Calendar............................................................ Error! Bookmark not defined.
Figure 11: Notice Box ........................................................ Error! Bookmark not defined.
Figure 12: Notice Box ........................................................ Error! Bookmark not defined.
Figure 13: "Ask for leave" Section .................................... Error! Bookmark not defined.
Figure 14: Gantt Chart ....................................................... Error! Bookmark not defined.

vi
 List of Abbreviations

The following are the list of abbreviations:

• CSS: Cascading Style Sheets

• CRUD: Create, Read, Update and Delete

• HTML: Hypertext Markup Language

• JS: JavaScript

• PHP: Hypertext Preprocessor

vii
 Introduction
Background

In today’s digital era, web applications simplify everyday tasks, yet many institutions still
rely on inefficient manual attendance tracking. This project focuses on developing a
Student Attendance Management System, allowing students to securely access their
attendance records through a user-friendly web interface. By integrating HTML, CSS,
and JavaScript, the front-end ensures an intuitive and responsive design, while PHP
handles back-end operations like authentication, database management, and attendance
tracking.
Traditional attendance systems often lack transparency, making it difficult for students to
monitor their records accurately. This project addresses these challenges by providing a
centralized platform for students to log in and view their attendance history in real time,
ensuring better accessibility and accuracy.

Challenges in Traditional Attendance Systems and Solutions in This Project

1. Limited Access to Attendance Records

• Issue: Students lack direct access to attendance data, making it difficult to
track their academic presence.
• Solution: The system provides a dedicated student portal where users can log
in and view real-time attendance records.
2. Inefficient and Error Prone Data Management
• Issue: Manual record-keeping can lead to miscalculations, data loss, and
inefficiencies.
• Solution: The system automates attendance tracking using a structured
database, ensuring accuracy and easy retrieval of records.
3. Lack of Secure Authentication
• Issue: Many attendance systems do not have secure login mechanisms,
increasing the risk of unauthorized access.
• Solution: This project implements user authentication, ensuring only
authorized students can access their attendance data.
By addressing these issues, the Student Attendance Management System enhances
transparency, efficiency, and security, offering a modern solution for students to monitor
their attendance with ease.
1
Executive Summary

The Student Attendance Management System is a web-based application that provides

students with an efficient and accessible way to track their attendance. Developed using
HTML, CSS, and JavaScript, the system ensures an interactive and responsive front-end,
while PHP and MySQL handle secure authentication, attendance record management, and
CRUD operations. Key features include a student login portal, a structured database for
accurate tracking, and a real-time attendance dashboard. By integrating front-end and
back-end technologies, this project delivers a modern, scalable, and transparent solution
for attendance tracking, enhancing accessibility and accuracy for students.

Objectives and significance of the study

This project holds significant value as it integrates client-side and server-side

technologies to develop a practical web-based solution for student attendance
management. By focusing on secure authentication, attendance tracking, and database
management, it serves as a hands-on learning experience in full-stack development.
Additionally, it emphasizes the importance of digital accessibility, accuracy, and user-
friendly interfaces in academic management systems.

The objectives of this project are as follows:

i. To design a visually appealing and responsive front-end using HTML, CSS,
and JavaScript.
ii. To implement PHP CRUD operations for student registration, login,
attendance updates, and record retrieval.
iii. To develop a secure and structured database system for accurate attendance
tracking.
iv. To integrate front-end and back-end technologies for seamless and efficient
user experience.

2
Importance

1. Provides Easy Access to Attendance Records – Enables students to track their

attendance anytime through a centralized digital platform.

2. Improves Accuracy and Transparency – Eliminates manual errors and ensures

real-time attendance updates for better record-keeping.

3. Simplifies Attendance Management – Automates record tracking, reducing

dependency on manual systems and paperwork.

3
 Literature Review
Traditional attendance management in educational institutions has predominantly relied
on manual methods such as roll calls, paper registers, and sign-in sheets. These
conventional approaches, while widely used, present several significant challenges,
including inefficiency, susceptibility to errors, and difficulties in data retrieval and
analysis. Educators and administrators often find manual attendance tracking to be time-
consuming and unreliable, leading to issues such as missing records, unauthorized
proxies, and difficulties in maintaining long-term attendance histories. Moreover, as class
sizes increase, these challenges become more pronounced, making it even harder to
manage student attendance efficiently.

A study conducted by Additio App highlights that manual attendance tracking systems
often lead to inaccuracies due to human error, loss of records, and the cumbersome nature
of paper-based documentation. Additionally, traditional methods do not offer real-time
insights into attendance trends, making it difficult for educators to identify students at risk
of chronic absenteeism. These issues can negatively impact student engagement and
academic performance, as attendance is directly linked to classroom participation and
learning outcomes.

The advent of automated attendance management systems provides a solution to these

challenges. Digital attendance systems, whether web-based or biometric, enhance
accuracy, reduce administrative workload, and provide real-time data analysis. According
to Campus365, automated systems simplify attendance tracking by integrating digital
records, making retrieval and analysis more efficient. These systems can generate reports,
track absenteeism trends, and provide insights that help institutions take timely action to
improve student participation. Furthermore, institutions that have adopted digital
attendance systems report a noticeable improvement in overall student engagement and
discipline, as students are more accountable for their attendance records.

Research published in the International Journal of Advanced Research in Science,

Communication, and Technology highlights the direct correlation between regular
attendance and academic success. The study emphasizes that students who attend classes
consistently perform better in exams and assignments compared to those with irregular
attendance. Automated attendance management systems support this by ensuring that
student records are accurately maintained, making it easier for educators to intervene
4
when necessary. These systems also facilitate communication between students, teachers,
and parents by providing instant updates regarding attendance status and missed classes.

Beyond academic benefits, automated attendance systems improve institutional

efficiency. Traditional attendance tracking requires manual data entry, which consumes
valuable instructional time and increases the likelihood of errors. Digital systems, on the
other hand, streamline this process by allowing real-time tracking through web-based
applications or biometric scanners. As a result, institutions can allocate more time to
teaching rather than administrative tasks. Additionally, web-based attendance
management systems can integrate with other educational software, such as learning
management systems (LMS) and student information systems (SIS), to provide a holistic
view of student performance.

Security and data integrity are also critical aspects of attendance management. Paper-
based systems are susceptible to tampering, loss, or unauthorized alterations, leading to
unreliable records. Automated systems use encrypted databases and authentication
mechanisms to ensure that attendance data remains secure and accessible only to
authorized personnel. Some systems also incorporate biometric verification, such as
fingerprint or facial recognition, to eliminate issues related to proxy attendance and
fraudulent record-keeping.

The adoption of web attendance management systems is growing as institutions recognize

the advantages of digital solutions. Cloud-based platforms enable institutions to store and
access attendance records from anywhere, reducing dependency on physical storage and
minimizing data loss. These systems support multiple modes of attendance tracking, such
as QR code scanning, RFID-based tracking, and mobile applications, making them
adaptable to various learning environments, including online and hybrid classrooms.

In summary, transitioning from traditional manual attendance methods to automated

systems addresses several limitations, including accuracy, efficiency, and data
management. Implementing a web-based attendance management system can
significantly enhance administrative processes, improve student engagement, and
contribute to better academic outcomes. As technology continues to evolve, integrating
smart attendance tracking solutions will play a crucial role in modernizing educational
institutions and creating a more efficient, data-driven approach to student attendance
management.

5
 Methodology
Data Collection Methods

For the primary data collection method, discussions with peers were conducted to gather
insights on student attendance tracking issues and potential improvements. Common
challenges such as inconsistent record-keeping, lack of transparency, and difficulties in
accessing attendance history were identified. These insights contributed to refining the
project’s objectives to ensure a user-friendly solution.

For the secondary data collection method, extensive research was conducted on articles,
case studies, and existing online attendance management systems. Various digital
solutions were analyzed, focusing on their strengths, limitations, and technological
frameworks. This approach provided a comprehensive understanding of industry’s best
practices and innovative techniques, shaping the design and functionality of the proposed
system.

Tools and Techniques for Analysis

To ensure the successful development and implementation of the Student Attendance

Management System, various tools and techniques will be used. These can be categorized
as follows:

1. Development Tools
• Visual Studio Code (VS Code): The primary Integrated Development
Environment (IDE) for coding and debugging HTML, CSS, JavaScript, and
PHP.
• Web Browser (Brave, Chrome, Firefox, Edge, etc.): Used for testing and
refining the front-end user experience.

2. Hardware Requirements

• PC or Laptop: A system with sufficient processing power to support web

development and database management.

• Memory and Storage: At least 8GB RAM and adequate storage to handle
development tools efficiently.

6
 3. Software and Programming Languages

• HTML: Structures the web pages.

• CSS: Enhances design and responsiveness.

• JavaScript: Adds interactivity for real-time attendance updates.

• PHP: Manages back-end processes, including user authentication and

database interactions.

• MySQL Database: Stores attendance records and user data securely.

4. Internet and Hosting

• Internet Connection: Essential for research, testing, and deployment.

• Web Hosting: Required to make the system accessible to students and

administrators.

5. Analytical and Support Techniques

• Peer Feedback: Gathering input from friends and peers to improve

usability, functionality, and design.

• Testing and Debugging: Continuous testing on multiple browsers and

devices to ensure compatibility and error-free performance.

Detailed Description of the Research Design

The development of the Student Attendance Management System followed a structured

27-day timeline to ensure efficiency and accuracy. The process began with
comprehensive planning, identifying key functionalities such as user authentication,
attendance tracking, student portal, and an administrative dashboard. A Gantt chart was
used to outline the project phases, set milestones, and track progress. Secondary research,
online tutorials, and coding resources played a crucial role in refining the system’s design
and implementation.

The development process was divided into five distinct phases. The first phase (Days 1–
5) focused on front-end development, where HTML was used to structure essential pages,
including Login, Dashboard, Attendance Records, and Reports. CSS was applied
simultaneously to enhance the design and ensure responsiveness across multiple devices.

7
The second phase (Days 6–9) involved JavaScript integration, adding interactive features
such as real-time attendance updates and automated absence notifications.

Back-end development (Days 10–18) played a crucial role in ensuring secure data
management. PHP was used to handle authentication processes, manage attendance
records, and facilitate CRUD operations for student and teacher accounts. A MySQL
database was implemented to securely store attendance data, ensuring easy retrieval and
analysis. The testing and debugging phase (Days 19–24) focused on identifying and
resolving errors, optimizing performance, and ensuring compatibility across different
devices. Finally, the last phase (Days 25–27) involved system deployment, final
documentation, and usability testing to confirm the system’s functionality and user-
friendliness.

This structured approach ensured that each phase was completed within the designated
timeframe, resulting in an efficient, scalable, and user-friendly attendance management
system.

Sampling Methods and Participant Demographics

To ensure the system effectively met user needs, purposive sampling was used to gather
insights from individuals directly involved in student attendance tracking. The primary
participants included students and academic administrators, as they are the primary users
of the platform. Administrators provided input on challenges such as maintaining accurate
records, tracking absenteeism, and generating reports, while students shared their
expectations for features like easy login access, real-time attendance updates, and
transparency in records. This targeted approach ensured that the collected data was highly
relevant and directly contributed to shaping a user-friendly and efficient attendance
management system.

Step-by-Step Data Collection and Analysis Process

The data collection process combined primary and secondary research to develop a
system tailored to user needs. Primary data was gathered through discussions with
students and academic administrators, highlighting challenges such as tracking attendance
accurately, reducing manual errors, and ensuring easy access to records. Secondary
research involved analyzing existing attendance management systems, focusing on
8
features like automation, real-time updates, and report generation. Additionally, research
papers and articles on digital attendance tracking were reviewed to align the project with
industry best practices in the industry. By synthesizing these insights, key pain points
were identified, ensuring the final system effectively enhances attendance monitoring and
record-keeping efficiency.

Implementation
Design

Pseudo Code:
// Database Creation
BEGIN
IF Database 'user_auth' does not exist THEN
CREATE Database 'user_auth'
CREATE Table 'user' (username, password)
ENDIF

// Registration Process
DISPLAY 'Register Page'
PROMPT for Username, Password
VALIDATE inputs
IF Username does not exist in Database THEN
SAVE (Username, Password) into 'user' Table
DISPLAY 'Registration Successful'
ELSE
DISPLAY 'Username Already Exists'
ENDIF
// Login Process
DISPLAY 'Login Page'
PROMPT for Username, Password
IF credentials match Database THEN
START user session

9
 DISPLAY 'Login Successful'
REDIRECT to Dashboard
ELSE
DISPLAY 'Invalid Credentials'
RETURN to Login Page
ENDIF

// Dashboard Navigation
DISPLAY Navbar with College Name & Logo
DISPLAY Attendance Table
DISPLAY 'Notices' icon
DISPLAY 'Ask for Leave' section
DISPLAY 'Logout' button

// Notices (JavaScript-enabled dropdown)

IF user clicks 'Notices' icon THEN
TOGGLE visibility of notice list
ENDIF

// Leave Request
IF user submits Leave Request THEN
VALIDATE request details
DISPLAY 'Leave Request Submitted'
ENDIF

// Logout
IF user clicks 'Logout' THEN
END session
REDIRECT to Login Page
ENDIF

END
Algorithm

10
Start
Check Database:
IF the "user_auth" database does not exist, CREATE the database "user_auth".
CREATE the table "user" with columns: username and password.
Proceed with system initialization.
User Registration/Login:
Display the Login/Register page.
IF the user selects Register:
Prompt for Username and Password.
Validate inputs.
Save registration details in the user table.
Inform the user and redirect to the Login page.
ELSE IF the user selects Login:
Prompt for Username and Password.
Validate credentials against the user table.
IF valid, start a session and redirect to the Dashboard.
ELSE, display an error message and prompt a retry.
Dashboard Navigation:
Display the Dashboard with:
Navigation Bar (Includes College Name & Logo).
Attendance Table (Displays student attendance records).
Notices Section: Display an icon.
IF the user clicks on the icon, SHOW the respective notice using JavaScript.
Ask for Leave Section:
Allow students to submit a leave request.
Logout Button:
IF clicked, end session and redirect to the Login page.
End

11
Flowchart

Figure 1:Flow Chart

12
ER Diagram

Figure 2: ER Diagram

Context Diagram

Figure 3: Context Diagram

13
Decision Table
Condition/Rule Rule 1: Rule 2: Rule 3:
Registration Successful Login Incorrect login Details
1.Does the No Yes Yes
“user_auth” database
exist?
2. Is the user No Yes Yes
registered in the
system?
3.Are the entered Yes Yes No
details valid?
Outcome: Create database, Redirect to Display “Invalid Details”
register user, and homepage and start message
save details session

Decision Tree

Figure 4: Decision Tree

14
Folder Structure

Project-841
├── Html
│ ├── login.html
│ ├── register.html
├── Css
│ ├── css.css
│ ├── css2.css
│ ├── styles.css
├── Php
│ ├── connection.php
│ ├── database-creation.php
│ ├── table.php
│ ├── login.php
│ ├── register.php
│ ├── dashboard.php
│ ├── logout.php
├── Javascript
│ ├── script.js
├── Image
│ ├── logo.png

15
System Requirements

16