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 its administration for
providing this platform and opportunity. My gratitude also goes to the Department of
Computer Science for their essential instructions, which greatly contributed to the success
of this report. I am especially grateful to my supervisor and lecturer, Mrs. Jamuna
Maharjan, as well as Mrigendra Sir, Sudan Sir, and Jaya Sundar Sir, 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 ........................................................................................................... 14
System Requirements .................................................................................................. 15
Results .......................................................................................................... 16
Conclusion ................................................................................................... 21
References .................................................................................................... 22
Appendices ................................................................................................... 23
Gantt Chart .................................................................................................................. 23
v
List of Figures
Figure 1: Flowchart ............................................................................................................ 12
Figure 2: ER Diagram ........................................................................................................ 13
Figure 3: Context Diagram ................................................................................................ 13
Figure 4. Register Page ...................................................................................................... 16
Figure 5: Registered individuals in the database ............................................................... 16
Figure 6: Login Page .......................................................................................................... 17
Figure 7: Student Dashbaord ............................................................................................. 18
Figure 8: Attendance Record Table ................................................................................... 18
Figure 9: Calendar.............................................................................................................. 19
Figure 10: Notice Box ........................................................................................................ 19
Figure 11: Notice Box ........................................................................................................ 19
Figure 12: "Ask for leave" Section .................................................................................... 20
Figure 13: Gantt Chart ....................................................................................................... 23
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
10
Algorithm
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: Flowchart
12
ER Diagram
Figure 2: ER Diagram
Context Diagram
Figure 3: Context Diagram
13
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
14
System Requirements
Software Requirements
• Operating System: Windows 10/11, macOS, or Linux
• Development Environment: Visual Studio Code (VS Code)
• Database Management System: MySQL
• Programming Languages: HTML, CSS, JavaScript, PHP
• Browser Compatibility: Google Chrome, Microsoft Edge, Safari
• Web Hosting: Localhost using XAMPP for testing; online hosting for deployment
Hardware Requirements
• Processor: Intel Core i3 or higher
• RAM: Minimum 8GB
• Storage: At least 256GB SSD
• Internet Connection: Required for online deployment, research, and testing
• Display: Minimum resolution of 1280x720
15
Results
Figure 4. Register Page
The image displays the registration page, which allows users to sign up for the website.
The entered name is stored in the database and later retrieved during the login process.
Upon clicking the "Register" button, A page appears either confirming successful
registration or displaying an error message based on the input.
Figure 5: Registered individuals in the database
16
Figure 6: Login Page
The following images depict the login page where the registered information is used to
log into the website’s home page. If the information provided is wrong, a page appears to
inform the user that the information provided is wrong. If the entered information is
correct, the dashboard page shows up.
17
Figure 7: Student Dashbaord
The above picture shows the complete dashboard of the website. It has many features
which are discussed below.
Figure 8: Attendance Record Table
18
The attendance table is the major idea of this website. It proposes a idea to maintain the
attendance record virtually keeping a strong database connection as a backend. For now
the attendance is manually adjusted to individual students considering the complexity of
the code. However, It proposes the main idea that this project is working on.
Figure 9: Calendar
Next is the calendar. Alongside the attendance record, full functional digital calendar
seemed to hold significance for the idea that this project proposes. It highlights the
current date, and it is fully functional.
Figure 11: Notice Box
Figure 10: Notice Box
19
Notices are given to students individually on the basis of what they are currently involved
in. This approach presents an idea to have a good way of flowing the information to the
students technically.
Figure 12: "Ask for leave" Section
“Ask for leave” section is made fully functional using HTML, CSS and JavaScript.
However, Additional backend can be added in this section so as to record the response,
for now, just the javascript has been used to make it functional. Another idea proposed by
this project is highly significant in turning the traditional system into modern keeping it
virtual.
20
Conclusion
The Student Attendance Management System developed in this project provides a basic
yet functional approach to digitizing attendance tracking in educational institutions. By
implementing CRUD (Create, Read, Update, Delete) operations with basic JavaScript, the
system allows teachers to mark attendance, students to view records, and administrators
to manage users efficiently. While this prototype enhances accuracy and accessibility
compared to traditional manual methods, it currently operates with limited backend
functionality.
Looking ahead, this system holds great potential for future enhancements. By integrating
a robust backend with advanced technologies such as AI-driven facial recognition,
biometric authentication, and real-time data analytics, the system can become fully
functional and automated. Additionally, expanding features like automated notifications,
performance tracking, and mobile app integration would further improve the overall
experience. With future developments, this project can evolve into a comprehensive and
intelligent attendance management solution, streamlining operations for educational
institutions.
21
References
[1] Wikipedia. Student Attendance Management System. [Online]. Available:
https://en.wikipedia.org/wiki/Attendance_management_system
[2] ResearchGate. Digital Attendance Systems: Enhancing Accuracy in Educational
Institutions.
[Online]. Available: www.researchgate.net/example
[3] IEEE Xplore. Automated Attendance Tracking Using Web-Based Solutions. [Online].
Available: www.ieeexplore.com/example
[4] W3Schools. PHP and MySQL Integration for Web Applications. [Online]. Available:
www.w3schools.com/php
[5] TechJournal. The Role of Web Technologies in Educational Management Systems.
[Online].
Available: www.techjournal.com/web-dev
[6] Academic Reports. Comparative Analysis of Manual vs. Digital Attendance Tracking.
[Online]. Available: www.academicreports.org/attendance
22
Appendices
Gantt Chart
Figure 13: Gantt Chart
23
