A

PROJECT REPORT

ON

“ONLINE ATTENDANCE MANAGEMENT

SYSTEM”
Submitted
in partial fulfillment of requirement for theaward of the degree of

BACHELOR IN COMPUTER APPLICATION

TO

VIDYASAGAR UNIVERSITY
Midnapore
Academic Year: 2020-21

Guided by: Submitted by:

Subir Saha Alak Maity (Roll- 46118102 No-001)
State Aided College Teacher, Malay Chowdhury (Roll- 46118102 No-011)
Department of BCA & Computer Sc,
Susovon Sahoo (Roll- 46118102 No-025)
Belda College
BELDA COLLEGE
(Re-accredited and Graded ‘B’ by NAAC)
Belda :: Paschim Medinipur :: 721424 :: WB
Department of BCA & Computer Sc.

Certificate

Certified that the project work on “Online Attendance Management System”

is the bonafide work carried out by all members under our supervision and guidance.
The project work is submitted towards the partial fulfillment for the award of the degree
BCAduring the academic year 2020-2021.
To the best of my knowledge the project work reported herein does not part of any
other project report on the basis of which any degree or award was conferred to any other
candidate. His performance during the project was satisfactory.

Signature Signature
Dr. Chiranjit Changdar Mr. Subir Saha
Assistant Professor, SACT,
Dept. of Computer Sc. & BCA, Dept. of Computer Sc. & BCA,
Belda College Belda College
Head of the Department Project Guide
UNDERTAKING
We, the undersigned student(s) of Bachelor in Computer Applications
Semester-VI hereby declare that the project work titled “Online Attendance
Management System” presented in this report is my own work and has been
carried out under the guidance of Mr. Subir Saha, Department of BCA &
Computer Sc., Belda College, Belda, Paschim Medinipur.

We have not plagiarized or submitted the same work for the award of any
other degree. In case this undertaking is found incorrect. I accept that my degree may
be unconditionally withdrawn.

DATE: Signatures of Student

1. Alak Maity
2. Malay Chowdhury
3. Susovon Sahoo
ACKNOWLEDGEMENT
It is matter of great pleasure and great satisfaction to present this documentation
on “Online Attendance Management System”.
Success of our application would not have been possible without the help of many
people. We undertake this opportunity to acknowledgement the valued assistance
and guidance.
We are thankful to the Principal of Belda College, DR. MANABENDRA
MANDAL, who had provided all the required facilities to carry out the work.
We are cordially grateful to our project guide MR. SUBIR SAHA, SACT,
Department of Computer Sc. and BCA, Belda College for his proper guidance
emphasis and constructive suggestion.
We profoundly grateful to DR. CHIRANJIT CHANGDAR, Assistant Professor
& Head, DR. DEBASIS DHAL, Assistant Professor, MS. REEK ROY,
Assistant Professor, MR. TUHIN SUBHRA PANDA, SACT, MR. SANTANU
MAHALA, SACT & MS. SUMITA GUCHHAIT, SACT, Department of
Computer Sc. & BCA, Belda College for their valuable advice to prepare this
work.
We are thankful to MR. PARAMANANDA DOLAI, Laboratory staff, for the
cooperation and help.
Finally, we convey my thanks to all Friends for their continuous encouragement
to do this work.

Name of Student(s)

1. Alak Maity
2. Malay Chowdhury
3. Susovon Sahoo
ABSTRACT

The Online Attendance Management System is a project that will help faculty manage his/her
student's attendance records for each class and subject in a certain institute. The system stores the
related data or information that is needed to generate the class attendance and also those data that are
needed to organize the students. This system allows the faculties to store the attendance record of
his/her student each subject and by simply selecting the class per subject for checking the
attendance, the list of a student under the selected class per subject will be displayed automatically
along with the checkboxes for identifying if the student is present, late, or absent on the selected date
of the class. The system also generates a monthly report for the summary of the class student
attendance.
 The Attendance Management System was developed using HTML, PHP/MySQLi, CSS,
JavaScript (jQuery/Ajax), and Bootstrap libraries for the designs. The system has 3 types of
users which are the admin, faculty, and student. The admin user can manage all the data of
the system and use all system functions or features. The faculty user is the semi-admin user
which only managing users are restricted to this user. The faculty can only manage the
attendance of his/her students. The students will be able to see the percentage of his
attendance as well as his results.

Platform:

Front end: HTML, CSS, JavaScript

Back end: PHP, MySQL

The features of Attendance Management system are,

 The main feature of this Student Attendance system is that store student daily attendance
record, and make PDF report from attendance data.
 Admin hold the key for editing and updating information. The admin has absolute right to all
the users which are the Teachers and Student.
 User can be a Teacher or Instructor. This user has a right of making daily attendance,
updating, editing and generating reports to the students.
 Student has less privilege to the access of the system; the student can only view his own
record by providing his username and password. He will be able to see the percentage of his
attendance as well as his results.
TABLE OF CONTENTS

1. INTRODUCTION 1-2
1.1 PROJECT AIMS AND OBJECTIVES
1.2 BACKGROUND OF PROJECT
1.3 OPERATION ENVIRONMENT

2. SYSTEM ANALYSIS 3-5

2.1 EXISTING SYSTEM VS. PROPOSED SYSTEM
2.2 FEASIBILITY STUDY
2.3 SYSTEM REQUIREMENT SPECIFICATION
2.4 PROCESS DESCRIPTION

3. SYSTEM DESIGN 6-12

3.1 DATABASE DESIGN
3.2 E-R DIAGRAM
3.3 DATA FLOW DIAGRAM’S

4. SYSTEM IMPLEMENTATION 13-44

4.1 CODING
4.2 SCREEN SHOTS

5. SYSTEM TESTING 45-49

5.1 UNIT TESTING
5.2 INTEGRATION TESTING

6. CONCLUSION & FUTURE SCOPE 50

7. REFERENCES 51
LIST OF FIGURES

1. User Table 6

2. Attendance Record Table 6

3. Attendance List Table 6

4. Class Table 7

5. Class Subject Table 7

6. Courses Table 7

7. Faculty Table 7

8. Students Table 7

9. Subject Table 8

10. E-R Diagram 8

11. Zero Level DFD 9

12. First Level DFD 9

13. Second Level DFD- Faculty 9

14. Second Level DFD- Admin 10

15. Sequence Diagram 11

13. USE-CASE Diagram 12

Online Attendance Management System

INTRODUCTION
Attendance Management System is software developed for daily evaluation of students in their
continuous assessment record, and performance in accordance with the principle of the institution. It
is facilitated to access the performance and information of attendance of a particular Student in a
particular semester of study. The information is sorted by the teachers, instructors and advisors, as
provided by the student for a particular day throughout a complete semester. This system will also
enable the evaluation of student regular presence in various lectures which will determine the
eligibility of the student to sit for a semester examination. Attendance Management System basically
has three main modules for proper functioning
 First module is admin which hold the key for editing and updating information. The admin
has absolute right to all the users which are the Teachers and Student.
 Second module is handled by the user which can be a Teacher or Instructor. This user has a
right of making daily attendance, updating, editing and generating reports to the students.
 Third is handled by a user which is the Student, he has less privilege to the access of the
system; the student can only view his own record by providing his username and password.
He will be able to see the percentage of his attendance as well as his results. If any
comment or change of class schedule the student can see in his own profile only.

1.1 PROJECT AIMS AND OBJECTIVES

To develop a software application that supports specific to the project Online Attendance
Management System that can solve all tedious tasks related to taking student attendance online.
The project aims and objectives that will be achieved after completion of this project are as
follows:
 Create an online application to be used in place of old paper based attendance management
by teacher and administration.
 To provide a transparency in the system so that administration can view the attendance from
anywhere, anytime and also can generate report.
 Use the technologies and Server technology used in here to create strong and secured
database connectivity.
 Eliminate duplicate data entry and errors in time and attendance entries
 Eliminate paperwork and save time.
 Automatic calculation of attendance
 To Increase security.

Dept. of BCA, Belda College Page 1

Online Attendance Management System

1.2 BACKGROUND OF PROJECT

“Online Student Attendance Management System” is software developed for maintaining the
attendance of the student on the daily basis in an institution. Here the staffs, who are handling the
subjects, will be responsible to mark the attendance of the students. Each staff will be given with
a separate username and password based on the subject they handle. An accurate report based on
the student attendance is generated here. This system will also help in evaluating attendance
eligibility criteria of a student. Report of the student’s attendance on weekly and monthly basis is
generated.

The main purpose of the Online Student Attendance Management System is to provide a system
for handling the attendance regularly of the students and also provide attendance report each
subject basis. The online system to be developed is focused on the generation of entry ticket along
with parking ticket and tickets for other facilities.
The goal of this project was to design, assemble, and test a fully functioning prototype of a
attendance management system that, among other features, is able to uniquely identify a student
and his/her attendance in each subject.
This type of Ticket Collection system has huge potential & wide products development scope in
mass transit areas such as in the Schools, Colleges and other institutes.

1.3 OPERATION ENVIRONMENT

The table shown below is the minimum requirement for the Library Management System:
PROCESSOR INTEL CORE PROCESSOR OR
BETTER PERFORMANCE
OPERATING SYSTEM WINDOWS7, WINDOWS 10
SCREEN RESOLUTION MONITOR WITH SCREEN
RESOLUTION 1024X768
MEMORY 2 GB RAM OR MORE
HARD DISK SPACE MINIMUM 4 GB FOR DATABASE
USAGE FOR FUTURE
BROWSER ANY WEB BROWSER (e.g., GOOGLE
CHROME, IE, MOZILLA FIREFOX etc.)
SOFTWARE XAMPP OR WAMP FOR RUN IN
LOCAL SERVER.

Dept. of BCA, Belda College Page 2

Online Attendance Management System

SYSTEM ANALYSIS
In system analysis the discussion is all about the developing process of Online Student
Attendance Management System including software requirement specification (SRS) and
comparison between existing and proposed system. The functional and non-functional
requirements are included in SRS part to provide complete description and overview of system
requirement before the developing process is carried out. Besides that, existing vs. proposed
provides a view of how the proposed system will be more efficient than the existing one.

2.1 EXISTING SYSTEM VS. PROPOSED SYSTEM

The Existing system is a manual entry for the students. Here the attendance will be carried out in the
hand written registers. It will be a tedious job to maintain the record for the user. The human effort is
more here. The retrieval of the information is not as easy as the records are maintained in the hand
written registers.
This application requires correct feed on input into the respective field. Suppose the wrong inputs
are entered, the application resist to work. So, the user find it difficult to use.
Draw backs of existing system:
Here in the amusement park entry ticketing system, a detailed study of existing system is carried
along with all the steps in system analysis. An idea for creating a better project was carried and
the next steps were followed.
 Lack of security of data.
 Time consuming.
 Needs manual calculations.
 No direct role for the higher officials.
To avoid all these limitations and make the working more accurately the system needs to be
computerized.

To overcome the drawbacks of the existing system, the proposed system has been evolved. This
project aims to reduce the paper work and saving time to generate accurate results from the student’s
attendance. The system provides with the best user interface. The efficient reports can be generated
by using this proposed system.

Advantages of Proposed System

 It is trouble-free to use.
 It is a relatively fast approach to enter attendance
 Is highly reliable, approximate result from user

Dept. of BCA, Belda College Page 3

Online Attendance Management System

 Best user Interface

 Efficient reports

2.2 FEASIBILITY STUDY

A key part of the preliminary investigation that reviews anticipated costs and benefits and
recommends a course of action based on operational, technical, economic, and time factors. The
purpose of the study is to determine if the systems request should proceed further.

Technical Feasibility:
The system being developed is economic with respect to student attendance. It is cost effective in the
sense that it has eliminated the attendance work completely. The system is also time effective
because the calculations are automated which are made at the end of the month or as per the student
requirement. The result obtained contains fewer errors and are highly accurate as the data is
required.
Economic feasibility:
The technical requirement for the system is economic and it does not use any other additional
Hardware and software.
Behavioural Feasibility:
The system working is quite easy to use and learn due to its simple but attractive interface. User
requires no special training for operating the system.

2.3 SYSTEM REQUIREMENT SPECIFICATION

Software Requirement:

Language Used : PHP

Database : MySQL
User Interface Design : HTML, CSS, JAVASCRIPT
Web Browser : Mozilla Firefox, Google Chrome, IE8, OPERA
Software : XAMPP / WAMP Server

Hardware Requirement:
Processor: Pentium (R) or Dual Core and Above
RAM: 1 GB RAM
Monitor: 15” Color Monitor
Hard Disk: 40 GB

Dept. of BCA, Belda College Page 4

Online Attendance Management System

Keyboard
Mouse

2.3 PROCESS DESCRIPTION

In this project, there are two modules Admin and Teacher. Each module has some sections or sub
modules to complete tasks.
Admin
1. Manage User: In this section, admin can register new user by adding user id and
password and also can delete an existing user.
2. Manage Course, Subject, and Class: In this section admin able to add, edit and delete
new Course, Subject and Class.
3. Manage Faculty and Student: In this section admin able to add, edit and delete new
Faculty and students by entering their details.
4. Class per Subject: All the data of Class, subject and faculty will be merged in this
section to generate the attendance sheet for each subject and faculty.
5. Check Attendance: The merged data of class per subject section are displayed here to
take attendance.
6. Attendance Record and Report: Attendance record and report can be generated and
imported from these sections. Attendance record can be generated date wise and report
can be generated month wise for each subject.

Except the above the admin can also update his profile, change the password and recover the
password.

Faculty

1. Class per Subject: All the data of Class, subject and faculty will be merged in this
section to generate the attendance sheet for each subject and faculty.
2. Check Attendance: The merged data of class per subject section are displayed here to
take attendance.
3. Attendance Record and Report: Attendance record and report can be generated and
imported from these sections. Attendance record can be generated date wise and report
can be generated month wise for each subject.

Dept. of BCA, Belda College Page 5

Online Attendance Management System

SYSTEM DESIGN
Software design is more creative process rather than analysis coz it deals with the development of
the actual mechanics for a new workable system. While analyzing, it is possible to produce the
correct model of an existing system. However, there is, no such thing a correct design. Good design
is always system dependent and what is good design for one system may be bad for another.
Analysis phase tells us what a system does, and becomes input to the design process, which tells
us how a software system works. Designing software system means determining how requirements
are realized and result is a software design document. Thus, the purpose of the design phase is to
produce a solution to a problem given in analysis phase.
Software requirements, manifested by the data, functional and behavioral models feed the design
tasks. Using number of design methods the design tasks produce a data design, an architectural
design, an interface design and a component design.

3.1 TABLE DESIGN

Users Table

Attendance Record Table

Attendance List Table

Dept. of BCA, Belda College Page 6

Online Attendance Management System

Class Table

Class Subject Table

Courses Table

Faculty Table

Students Table

Dept. of BCA, Belda College Page 7

Online Attendance Management System

Subject Table

3.2 E-R Diagram

Dept. of BCA, Belda College Page 8

Online Attendance Management System

3.2 DATA FLOW DIAGRAM’S

Fig. Zero Level DFD

Fig. First Level DFD

Fig. Second Level DFD- Faculty

Dept. of BCA, Belda College Page 9

Online Attendance Management System

Fig. Second Level DFD- Admin

Dept. of BCA, Belda College Page 10

Online Attendance Management System

3.3 SEQUENCE DIAGRAM

Fig. Sequence Diagram- Admin

Dept. of BCA, Belda College Page 11

Online Attendance Management System

3.4 USE-CASE DIAGRAM

Dept. of BCA, Belda College Page 12

Online Attendance Management System

SYSTEM IMPLEMENTATION

4.1 SAMPLE CODING

Login:
<!DOCTYPE html>
<html lang="en">
<?php
session_start();
include('./db_connect.php');
ob_start();
if(!isset($_SESSION['system'])){
$system = $conn->query("SELECT * FROM system_settings limit 1")->fetch_array();
foreach($system as $k => $v){
$_SESSION['system'][$k] = $v;
}
}

//echo md5('12345');

ob_end_flush();
?>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">

<title><?php echo $_SESSION['system']['name'] ?></title>

<?php include('./header.php'); ?>

<?php
if(isset($_SESSION['login_id']))
header("location:index.php?page=home");

?>
</head>
<style>
body{
width: 100%;
height: calc(100%);
position: fixed;
top:0;
left: 0
/*background: #007bff;*/
}
main#main{
width:100%;
height: calc(100%);
display: flex;
}

</style>

<body class="bg-light">

<main id="main" >

<div class="align-self-center w-100">

<h4 class="text-black text-center"><b><?php echo $_SESSION['system']['name'] ?></b></h4>
Dept. of BCA, Belda College Page 13
Online Attendance Management System
<div id="login-center" class="bg-light row justify-content-center">
<div class="card col-md-4">
<p><font color="blue" size=4><b>LOGIN FORM</b></font></p>
<div class="card-body">
<form id="login-form" >
<div class="form-group">
<label for="username" class="control-label"><b>Username</label>
<input type="text" id="username" name="username" class="form-control">
</div>
<div class="form-group">
<label for="password" class="control-label">Password</label>
<input type="password" id="password" name="password" class="form-control">
</div>
<center><button class="btn-sm btn-block btn-wave col-md-4 btn-primary">Login</button></center>
</form>
</div>
</div>
</div>
</div>
</main>

<a href="#" class="back-to-top"><i class="icofont-simple-up"></i></a>

</body>
<script>
$('#login-form').submit(function(e){
e.preventDefault()
$('#login-form button[type="button"]').attr('disabled',true).html('Logging in...');
if($(this).find('.alert-danger').length > 0 )
$(this).find('.alert-danger').remove();
$.ajax({
url:'ajax.php?action=login',
method:'POST',
data:$(this).serialize(),
error:err=>{
console.log(err)
$('#login-form button[type="button"]').removeAttr('disabled').html('Login');

},
success:function(resp){
if(resp == 1){
location.href ='index.php?page=home';
}else{
$('#login-form').prepend('<div class="alert alert-danger">Username or
password is incorrect.</div>')
$('#login-form button[type="button"]').removeAttr('disabled').html('Login');
}
}
})
})
</script>
</html>

Index page:
<!DOCTYPE html>
<html lang="en">

<?php session_start(); ?>

<head>

Dept. of BCA, Belda College Page 14

Online Attendance Management System
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">

<title><?php echo isset($_SESSION['system']['name']) ? $_SESSION['system']['name'] : '' ?></title>

<?php
if(!isset($_SESSION['login_id']))
header('location:login.php');
include('./header.php');
// include('./auth.php');
?>

</head>
<style>
body{
background: #80808045;
}
.modal-dialog.large {
width: 80% !important;
max-width: unset;
}
.modal-dialog.mid-large {
width: 50% !important;
max-width: unset;
}
#viewer_modal .btn-close {
position: absolute;
z-index: 999999;
/*right: -4.5em;*/
background: unset;
color: white;
border: unset;
font-size: 27px;
top: 0;
}
#viewer_modal .modal-dialog {
width: 80%;
max-width: unset;
height: calc(90%);

Dept. of BCA, Belda College Page 15

Online Attendance Management System
max-height: unset;
}
#viewer_modal .modal-content {
background: black;
border: unset;
height: calc(100%);
display: flex;
align-items: center;
justify-content: center;
}
#viewer_modal img,#viewer_modal video{
max-height: calc(100%);
max-width: calc(100%);
}
</style>

<body>
<?php include 'topbar.php' ?>
<?php include 'navbar.php' ?>
<div class="toast" id="alert_toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body text-white">
</div>
</div>

<main id="view-panel" >

<?php $page = isset($_GET['page']) ? $_GET['page'] :'home'; ?>
<?php include $page.'.php' ?>

</main>

<div id="preloader"></div>
<a href="#" class="back-to-top"><i class="icofont-simple-up"></i></a>

<div class="modal fade" id="confirm_modal" role='dialog'>

<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Confirmation</h5>
</div>

Dept. of BCA, Belda College Page 16

Online Attendance Management System
<div class="modal-body">
<div id="delete_content"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id='confirm' onclick="">Continue</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="uni_modal" role='dialog'>
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id='submit' onclick="$('#uni_modal
form').submit()">Save</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="viewer_modal" role='dialog'>
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<button type="button" class="btn-close" data-dismiss="modal"><span class="fa fa-times"></span></button>
<img src="" alt="">
</div>
</div>
</div>
</body>
<script>
window.start_load = function(){
$('body').prepend('<di id="preloader2"></di>')
}
window.end_load = function(){

Dept. of BCA, Belda College Page 17

Online Attendance Management System
$('#preloader2').fadeOut('fast', function() {
$(this).remove();
})
}
window.viewer_modal = function($src = ''){
start_load()
var t = $src.split('.')
t = t[1]
if(t =='mp4'){
var view = $("<video src='"+$src+"' controls autoplay></video>")
}else{
var view = $("<img src='"+$src+"' />")
}
$('#viewer_modal .modal-content video,#viewer_modal .modal-content img').remove()
$('#viewer_modal .modal-content').append(view)
$('#viewer_modal').modal({
show:true,
backdrop:'static',
keyboard:false,
focus:true
})
end_load()

}
window.uni_modal = function($title = '' , $url='',$size=""){
start_load()
$.ajax({
url:$url,
error:err=>{
console.log()
alert("An error occured")
},
success:function(resp){
if(resp){
$('#uni_modal .modal-title').html($title)
$('#uni_modal .modal-body').html(resp)
if($size != ''){
$('#uni_modal .modal-dialog').addClass($size)
}else{
$('#uni_modal .modal-dialog').removeAttr("class").addClass("modal-dialog modal-md")

Dept. of BCA, Belda College Page 18

Online Attendance Management System
}
$('#uni_modal').modal({
show:true,
backdrop:'static',
keyboard:false,
focus:true
})
end_load()
}
}
})
}
window._conf = function($msg='',$func='',$params = []){
$('#confirm_modal #confirm').attr('onclick',$func+"("+$params.join(',')+")")
$('#confirm_modal .modal-body').html($msg)
$('#confirm_modal').modal('show')
}
window.alert_toast= function($msg = 'TEST',$bg = 'success'){
$('#alert_toast').removeClass('bg-success')
$('#alert_toast').removeClass('bg-danger')
$('#alert_toast').removeClass('bg-info')
$('#alert_toast').removeClass('bg-warning')

if($bg == 'success')
$('#alert_toast').addClass('bg-success')
if($bg == 'danger')
$('#alert_toast').addClass('bg-danger')
if($bg == 'info')
$('#alert_toast').addClass('bg-info')
if($bg == 'warning')
$('#alert_toast').addClass('bg-warning')
$('#alert_toast .toast-body').html($msg)
$('#alert_toast').toast({delay:3000}).toast('show');
}
$(document).ready(function(){
$('#preloader').fadeOut('fast', function() {
$(this).remove();
})
})
$('.datetimepicker').datetimepicker({

Dept. of BCA, Belda College Page 19

Online Attendance Management System
format:'Y/m/d H:i',
startDate: '+3d'
})
$('.select2').select2({
placeholder:"Please select here",
width: "100%"
})
</script>
</html>

Courses Page:
<?php include('db_connect.php');?>
<div class="container-fluid">
<div class="col-lg-12">
<div class="row">
<!-- FORM Panel -->
<div class="col-md-4">
<form action="" id="manage-course">
<div class="card">
<div class="card-header">
Course Form
</div>
<div class="card-body">
<input type="hidden" name="id">
<div id="msg"></div>
<div class="form-group">
<label class="control-label">Course</label>
<input type="text" class="form-control" name="course">
</div>
<div class="form-group">
<label class="control-label">Description</label>
<textarea name="description" id="" cols="30" rows="4" class="form-control"></textarea>
</div>
</div>
<div class="card-footer">
<div class="row">
<div class="col-md-12">
<button class="btn btn-sm btn-primary col-sm-3 offset-md-3"> Save</button>
<button class="btn btn-sm btn-default col-sm-3" type="reset"> Cancel</button>
</div>
</div>
</div>
</div>
</form>
</div>
<!-- FORM Panel -->
<!-- Table Panel -->
<div class="col-md-8">
<div class="card">
<div class="card-header">
<b>Course List</b>
</div>
<div class="card-body">
<table class="table table-bordered table-hover">
<thead>
<tr>
Dept. of BCA, Belda College Page 20
Online Attendance Management System
<th class="text-center" width="5%">#</th>
<th class="text-center">Course</th>
<th class="text-center" width="25%">Action</th>
</tr>
</thead>
<tbody>
<?php
$i = 1;
$course = $conn->query("SELECT * FROM courses order by id asc");
while($row=$course->fetch_assoc()):
?>
<tr>
<td class="text-center"><?php echo $i++ ?></td>
<td class="">
ucwords($row['course']) ?></b></p>
$row['description'] ?></i></small>
</td>
<td class="text-center">
<button class="btn btn-sm btn-primary edit_course" type="button" data-id="<?php echo $row['id'] ?>" data-
course="<?php echo $row['course'] ?>" data-description="<?php echo $row['description'] ?>" >Edit</button>
<button class="btn btn-sm btn-danger delete_course" type="button" data-id="<?php echo $row['id']
?>">Delete</button>
</td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
</div>
</div>
</div>
<!-- Table Panel -->
</div>
</div>
</div>
<style>

td{
vertical-align: middle !important;
}
td p {
margin: unset;
}
</style>
<script>
$('#manage-course').on('reset',function(){
$('#msg').html('')
$('input:hidden').val('')
})
$('#manage-course').submit(function(e){
e.preventDefault()
$('#msg').html('')
start_load()
$.ajax({
url:'ajax.php?action=save_course',
data: new FormData($(this)[0]),
cache: false,
contentType: false,
processData: false,
method: 'POST',
type: 'POST',
success:function(resp){

Dept. of BCA, Belda College Page 21

Online Attendance Management System
if(resp==1){
alert_toast("Data successfully saved",'success')
setTimeout(function(){
location.reload()
},1500)
}else if(resp == 2){
$('#msg').html('<div class="alert alert-danger mx-2">Course already exist.</div>')
end_load()
}
}
})
})
$('.edit_course').click(function(){
start_load()
var cat = $('#manage-course')
cat.get(0).reset()
cat.find("[name='id']").val($(this).attr('data-id'))
cat.find("[name='course']").val($(this).attr('data-course'))
cat.find("[name='description']").val($(this).attr('data-description'))
end_load()
})
$('.delete_course').click(function(){
_conf("Are you sure to delete this course?","delete_course",[$(this).attr('data-id')])
})
function delete_course($id){
start_load()
$.ajax({
url:'ajax.php?action=delete_course',
method:'POST',
data:{id:$id},
success:function(resp){
if(resp==1){
alert_toast("Data successfully deleted",'success')
setTimeout(function(){
location.reload()
},1500)

}
}
})
}
$('table').dataTable()
</script>

Subject Page:

<?php include('db_connect.php');?>

<div class="container-fluid">

<div class="col-lg-12">
<div class="row">
<!-- FORM Panel -->
<div class="col-md-4">
<form action="" id="manage-subject">
<div class="card">
<div class="card-header">
Subject Form
</div>
<div class="card-body">
Dept. of BCA, Belda College Page 22
Online Attendance Management System
<input type="hidden" name="id">
<div id="msg"></div>
<div class="form-group">
<label class="control-label">Subject</label>
<input type="text" class="form-control" name="subject">
</div>
<div class="form-group">
<label class="control-label">Description</label>
<textarea name="description" id="" cols="30" rows="4" class="form-control"></textarea>
</div>
</div>

<div class="card-footer">
<div class="row">
<div class="col-md-12">
<button class="btn btn-sm btn-primary col-sm-3 offset-md-3"> Save</button>
<button class="btn btn-sm btn-default col-sm-3" type="reset"> Cancel</button>
</div>
</div>
</div>
</div>
</form>
</div>
<!-- FORM Panel -->

<!-- Table Panel -->

<div class="col-md-8">
<div class="card">
<div class="card-header">
<b>Subject List</b>
</div>
<div class="card-body">
<table class="table table-bordered table-hover">

<thead>
<tr>
<th class="text-center" width="5%">#</th>
<th class="text-center">Subject</th>
<th class="text-center" width="25%">Action</th>
</tr>
</thead>
<tbody>
<?php
$i = 1;
$subject = $conn->query("SELECT * FROM subjects order by id asc");
while($row=$subject->fetch_assoc()):
?>
<tr>
<td class="text-center"><?php echo $i++ ?></td>
<td class="">
<p><b><?php echo ucwords($row['subject']) ?></b></p>
<small><i><?php echo $row['description'] ?></i></small>
</td>
<td class="text-center">
<button class="btn btn-sm btn-primary edit_subject" type="button" data-id="<?php echo $row['id'] ?>" data-
subject="<?php echo $row['subject'] ?>" data-description="<?php echo $row['description'] ?>" >Edit</button>
<button class="btn btn-sm btn-danger delete_subject" type="button" data-id="<?php echo $row['id']
?>">Delete</button>
</td>
</tr>
<?php endwhile; ?>

Dept. of BCA, Belda College Page 23

Online Attendance Management System
</tbody>
</table>
</div>
</div>
</div>
<!-- Table Panel -->
</div>
</div>

</div>
<style>

td{
vertical-align: middle !important;
}
td p {
margin: unset;
}
</style>
<script>

$('#manage-subject').on('reset',function(){
$('#msg').html('')
$('input:hidden').val('')
})
$('#manage-subject').submit(function(e){
e.preventDefault()
$('#msg').html('')
start_load()
$.ajax({
url:'ajax.php?action=save_subject',
data: new FormData($(this)[0]),
cache: false,
contentType: false,
processData: false,
method: 'POST',
type: 'POST',
success:function(resp){
if(resp==1){
alert_toast("Data successfully saved",'success')
setTimeout(function(){
location.reload()
},1500)

}else if(resp == 2){

$('#msg').html('<div class="alert alert-danger mx-2">Subject already exist.</div>')
end_load()
}
}
})
})
$('.edit_subject').click(function(){
start_load()
var cat = $('#manage-subject')
cat.get(0).reset()
cat.find("[name='id']").val($(this).attr('data-id'))
cat.find("[name='name']").val($(this).attr('data-name'))
cat.find("[name='description']").val($(this).attr('data-description'))
end_load()
})
$('.delete_subject').click(function()

Dept. of BCA, Belda College Page 24

Online Attendance Management System
{
_conf("Are you sure to delete this subject?","delete_subject",[$(this).attr('data-id')])
})
function delete_subject($id){
start_load()
$.ajax({
url:'ajax.php?action=delete_subject',
method:'POST',
data:{id:$id},
success:function(resp){
if(resp==1){
alert_toast("Data successfully deleted",'success')
setTimeout(function(){
location.reload()
},1500)

}
}
})
}
$('table').dataTable()
</script>

Class Page:

<?php include('db_connect.php');?>

<div class="container-fluid">

<div class="col-lg-12">
<div class="row">
<!-- FORM Panel -->
<div class="col-md-4">
<form action="" id="manage-class">
<div class="card">
<div class="card-header">
Class Form
</div>
<div class="card-body">
<input type="hidden" name="id">
<div id="msg"></div>
<select name="course_id" id="course_id" class="custom-
select select2">
<option value=""></option>
<?php
$course = $conn->query("SELECT * FROM
courses order by course asc");
while($row=$course->fetch_assoc()):
?>
<option value="<?php echo $row['id']
?>"><?php echo $row['course'] ?></option>
<?php endwhile; ?>
</select>
<div class="form-group">
<label class="control-label">Semester</label>
<input type="text" class="form-control"
name="level">
</div>
<div class="form-group">
<label class="control-label">Section</label>
Dept. of BCA, Belda College Page 25
Online Attendance Management System
<input type="text" class="form-control"
name="section">
</div>

</div>

<div class="card-footer">
<div class="row">
<div class="col-md-12">
<button class="btn btn-sm btn-primary col-sm-3
offset-md-3"> Save</button>
<button class="btn btn-sm btn-default col-sm-3"
type="reset"> Cancel</button>
</div>
</div>
</div>
</div>
</form>
</div>
<!-- FORM Panel -->

<!-- Table Panel -->

<div class="col-md-8">
<div class="card">
<div class="card-header">
<b>Class List</b>
</div>
<div class="card-body">
<table class="table table-bordered table-hover">

<thead>
<tr>
<th class="text-center"
width="5%">#</th>
<th class="text-center">Class</th>
<th class="text-center"
width="25%">Action</th>
</tr>
</thead>
<tbody>
<?php
$i = 1;
$class = $conn->query("SELECT
c.*,concat(co.course,' ',c.level,'-',c.section) as `class` FROM `class` c inner join courses co on co.id = c.course_id order
by concat(co.course,' ',c.level,'-',c.section) asc");
while($row=$class->fetch_assoc()):
?>
<tr>
<td class="text-center"><?php echo
$i++ ?></td>
<td class="">
<p><b><?php echo
$row['class'] ?></b></p>
</td>
<td class="text-center">
<button class="btn btn-sm btn-
primary edit_class" type="button" data-id="<?php echo $row['id'] ?>" data-course_id="<?php echo $row['course_id']
?>" data-level="<?php echo $row['level'] ?>" data-section="<?php echo $row['section'] ?>" >Edit</button>
<button class="btn btn-sm btn-
danger delete_class" type="button" data-id="<?php echo $row['id'] ?>">Delete</button>
Dept. of BCA, Belda College Page 26
Online Attendance Management System
</td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
</div>
</div>
</div>
<!-- Table Panel -->
</div>
</div>

</div>
<style>

td{
vertical-align: middle !important;
}
td p {
margin: unset;
}
</style>
<script>

$('#manage-class').on('reset',function(){
$('#msg').html('')
$('input:hidden').val('')
$('.select2').val('').trigger('change')
})
$('#manage-class').submit(function(e){
e.preventDefault()
$('#msg').html('')
start_load()
$.ajax({
url:'ajax.php?action=save_class',
data: new FormData($(this)[0]),
cache: false,
contentType: false,
processData: false,
method: 'POST',
type: 'POST',
success:function(resp){
if(resp==1){
alert_toast("Data successfully saved",'success')
setTimeout(function(){
location.reload()
},1500)

}else if(resp == 2){

$('#msg').html('<div class="alert alert-danger mx-2">Class already exist.</div>')
end_load()
}
}
})
})
$('.edit_class').click(function(){
start_load()
var cat = $('#manage-class')
cat.get(0).reset()

Dept. of BCA, Belda College Page 27

Online Attendance Management System
cat.find("[name='id']").val($(this).attr('data-id'))
cat.find("[name='course_id']").val($(this).attr('data-course_id')).trigger('change')
cat.find("[name='level']").val($(this).attr('data-level'))
cat.find("[name='section']").val($(this).attr('data-section'))
end_load()
})
$('.delete_class').click(function(){
_conf("Are you sure to delete this class?","delete_class",[$(this).attr('data-id')])
})
function delete_class($id){
start_load()
$.ajax({
url:'ajax.php?action=delete_class',
method:'POST',
data:{id:$id},
success:function(resp){
if(resp==1){
alert_toast("Data successfully deleted",'success')
setTimeout(function(){
location.reload()
},1500)

}
}
})
}
$('table').dataTable()
</script>

Faculty Page:

<?php include('db_connect.php');?>

<div class="container-fluid">

<div class="col-lg-12">
<div class="row mb-4 mt-4">
<div class="col-md-12">

</div>
</div>
<div class="row">
<!-- FORM Panel -->

<!-- Table Panel -->

<div class="col-md-12">
<div class="card">
<div class="card-header">
<b>List of Faculty</b>
<span class="float:right"><a class="btn btn-primary btn-block
btn-sm col-sm-2 float-right" href="javascript:void(0)" id="new_faculty">
<i class="fa fa-plus"></i> New Faculty
</a></span>
</div>
<div class="card-body">
<table class="table table-condensed table-bordered table-hover">
<thead>
<tr>
<th class="text-center">#</th>
Dept. of BCA, Belda College Page 28
Online Attendance Management System
<th class="">ID #</th>
<th class="">Name</th>
<th class="">Email</th>
<th class="">Contact</th>
<th class="">Address</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody>
<?php
$i = 1;
$faculty = $conn->query("SELECT * FROM
faculty order by name desc ");
while($row=$faculty->fetch_assoc()):
?>
<tr>
<td class="text-center"><?php echo
$i++ ?></td>
<td>
<p> <b><?php echo
$row['id_no'] ?></b></p>
</td>
<td>
<p> <b><?php echo
ucwords($row['name']) ?></b></p>
</td>
<td class="">
<p> <b><?php echo
$row['email'] ?></b></p>
</td>

<td class="">
<p> <b><?php echo
$row['contact'] ?></b></p>
</td>
<td class="">
<p><b><?php echo
$row['address'] ?></b></p>
</td>
<td class="text-center">
<button class="btn btn-sm btn-
outline-primary edit_faculty" type="button" data-id="<?php echo $row['id'] ?>" >Edit</button>
<button class="btn btn-sm btn-
outline-danger delete_faculty" type="button" data-id="<?php echo $row['id'] ?>">Delete</button>
</td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
</div>
</div>
</div>
<!-- Table Panel -->
</div>
</div>

</div>
<style>

Dept. of BCA, Belda College Page 29

Online Attendance Management System
td{
vertical-align: middle !important;
}
td p{
margin: unset
}
img{
max-width:100px;
max-height: :150px;
}
</style>
<script>
$(document).ready(function(){
$('table').dataTable()
})

$('#new_faculty').click(function(){
uni_modal("New faculty","manage_faculty.php","mid-large")

})

$('.view_payment').click(function(){
uni_modal("facultys Payments","view_payment.php?id="+$(this).attr('data-id'),"large")

})
$('.edit_faculty').click(function(){
uni_modal("Manage faculty Details","manage_faculty.php?id="+$(this).attr('data-id'),"mid-large")

})
$('.delete_faculty').click(function(){
_conf("Are you sure to delete this faculty?","delete_faculty",[$(this).attr('data-id')])
})

function delete_faculty($id){
start_load()
$.ajax({
url:'ajax.php?action=delete_faculty',
method:'POST',
data:{id:$id},
success:function(resp){
if(resp==1){
alert_toast("Data successfully deleted",'success')
setTimeout(function(){
location.reload()
},1500)

}
}
})
}
</script>

Student Page:

<?php include('db_connect.php');?>
<div class="container-fluid">
<div class="col-lg-12">
<div class="row mb-4 mt-4">
<div class="col-md-12">
Dept. of BCA, Belda College Page 30
Online Attendance Management System
</div>
</div>
<div class="row">
<!-- FORM Panel -->

<!-- Table Panel -->

<div class="col-md-12">
<div class="card">
<div class="card-header">
<b>List of Student</b>
<span class="float:right"><a class="btn btn-primary btn-block btn-sm col-sm-2 float-right" href="javascript:void(0)"
id="new_student">
<i class="fa fa-plus"></i> New Student
</a></span>
</div>
<div class="card-body">
<table class="table table-condensed table-bordered table-hover">
<thead>
<tr>
<th class="text-center">#</th>
<th class="">ID #</th>
<th class="">Name</th>
<th class="">Class</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody>
<?php
$i = 1;
$student = $conn->query("SELECT s.*,concat(co.course,' ',c.level,'-',c.section) as `class` FROM students s inner join
`class` c on c.id = s.class_id inner join courses co on co.id = c.course_id order by s.name desc ");
while($row=$student->fetch_assoc()):
?>
<tr>
<td class="text-center"><?php echo $i++ ?></td>
<td>
<p> <b><?php echo $row['id_no'] ?></b></p>
</td>
<td>
<p> <b><?php echo ucwords($row['name']) ?></b></p>
</td>
<td class="">
<p> <b><?php echo $row['class'] ?></b></p>
</td>
<td class="text-center">
<button class="btn btn-sm btn-outline-primary edit_student" type="button" data-id="<?php echo $row['id'] ?>"
>Edit</button>
<button class="btn btn-sm btn-outline-danger delete_student" type="button" data-id="<?php echo $row['id']
?>">Delete</button>
</td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
</div>
</div>
</div>
<!-- Table Panel -->
</div>

Dept. of BCA, Belda College Page 31

Online Attendance Management System
</div>

</div>
<style>

td{
vertical-align: middle !important;
}
td p{
margin: unset
}
img{
max-width:100px;
max-height: :150px;
}
</style>
<script>
$(document).ready(function(){
$('table').dataTable()
})
$('#new_student').click(function(){
uni_modal("New student","manage_student.php","")

})

$('.edit_student').click(function(){
uni_modal("Manage student Details","manage_student.php?id="+$(this).attr('data-id'),"mid-large")

})
$('.delete_student').click(function(){
_conf("Are you sure to delete this student?","delete_student",[$(this).attr('data-id')])
})

function delete_student($id){
start_load()
$.ajax({
url:'ajax.php?action=delete_student',
method:'POST',
data:{id:$id},
success:function(resp){
if(resp==1){
alert_toast("Data successfully deleted",'success')
setTimeout(function(){
location.reload()
},1500)

}
}
})
}
</script>

Check Attendance Page:

<?php include 'db_connect.php' ?>

<?php

if(isset($_GET['attendance_id'])){
Dept. of BCA, Belda College Page 32
Online Attendance Management System
// echo "SELECT * FROM attendance_list where id = {$_GET['attendance_id']}";
$qry = $conn->query("SELECT * FROM attendance_list where id = {$_GET['attendance_id']}");
foreach($qry->fetch_array() as $k => $v){
$$k = $v;
}
}

?>
<div class="container-fluid">
<div class="col-lg-12">
<div class="card">
<div class="card-header"><b>Check Attendance</b></div>
<div class="card-body">
<form id="manage-attendance">
<input type="hidden" name="id" value="<?php echo isset($id) ? $id : ''
?>">
<div class="row justify-content-center">
<label for="" class="mt-2">Class per Subjects</label>
<div class="col-sm-4">
<select name="class_subject_id" id="class_subject_id" class="custom-select select2 input-sm">
<option value=""></option>
<?php
$class = $conn->query("SELECT cs.*,concat(co.course,' ',c.level,'-',c.section) as `class`,s.subject,f.name as fname
FROM class_subject cs inner join `class` c on c.id = cs.class_id inner join courses co on co.id = c.course_id inner join
faculty f on f.id = cs.faculty_id inner join subjects s on s.id = cs.subject_id ".($_SESSION['login_faculty_id'] ? " where
f.id = {$_SESSION['login_faculty_id']} ":"")." order by concat(co.course,' ',c.level,'-',c.section) asc");
while($row=$class->fetch_assoc()):
?>
<option value="<?php echo $row['id'] ?>" data-cid="<?php echo $row['id'] ?>" <?php echo isset($class_subject_id) &&
$class_subject_id == $row['id'] ? 'selected' : (isset($class_subject_id) && $class_subject_id == $row['id'] ? 'selected' :'')
?>><?php echo $row['class'].' '.$row['subject']. ' [ '.$row['fname'].' ]' ?></option>
<?php endwhile; ?>
</select>
</div>
<div class="col-sm-3">
<input type="date" name="doc" value="<?php echo
isset($doc) ? date('Y-m-d',strtotime($doc)) :date('Y-m-d') ?>" class="form-control">
</div>
</div>
<hr>
<div class="row">
<div class="col-md-12" id='att-list'>
<center><b><h4><i>Please Select Class
First.</i></h4></b></center>
</div>
<div class="col-md-12" style="display: none" id="submit-btn-
field">
<center>
<button class="btn btn-primary btn-sm col-sm-
5">Save</button>
</center>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div id="table_clone" style="display: none">
<table class='table table-bordered table-hover'>
Dept. of BCA, Belda College Page 33
Online Attendance Management System
<thead>
<tr>
<th>#</th>
<th>Student</th>
<th>Attendance</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div id="chk_clone" style="display: none">
<div class="d-flex justify-content-center chk-opts">
<div class="form-check form-check-inline">
<input class="form-check-input present-inp" type="checkbox" value="1">
<label class="form-check-label present-lbl">Present</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input absent-inp" type="checkbox" value="0">
<label class="form-check-label absent-lbl">Absent</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input late-inp" type="checkbox" value="2">
<label class="form-check-label late-lbl">Late</label>
</div>
</div>
</div>
<style>
.present-inp,.absent-inp,.late-inp,.present-lbl,.absent-lbl,.late-lbl{
cursor: pointer;
}
</style>
<script>
$(document).ready(function(){
if('<?php echo isset($class_subject_id) ? 1 : 0 ?>' == 1){
start_load()
$.ajax({
url:'ajax.php?action=get_class_list',
method:'POST',
data:{class_subject_id:$('#class_subject_id').val(),doc:$('#doc').val(),att_id :'<?php echo
isset($id) ? $id : '' ?>' },
success:function(resp){
if(resp){
resp = JSON.parse(resp)
var _table = $('#table_clone table').clone()
$('#att-list').html('')
$('#att-list').append(_table)
var _type = ['Absent','Present','Late'];
var data = resp.data;
var record = resp.record;
var attendance_id = !!resp.attendance_id ? resp.attendance_id : '';
if(Object.keys(data).length > 0){
var i = 1;
Object.keys(data).map(function(k){
var name = data[k].name;
var id = data[k].id;
var tr = $('<tr></tr>')
var opts = $('#chk_clone').clone()
opts.find('.present-inp').attr({'name':'type['+id+']','id':'present_'+id})

Dept. of BCA, Belda College Page 34

Online Attendance Management System
opts.find('.absent-inp').attr({'name':'type['+id+']','id':'absent_'+id})
opts.find('.late-inp').attr({'name':'type['+id+']','id':'late_'+id})
opts.find('.present-lbl').attr({'for':'present_'+id})
opts.find('.absent-lbl').attr({'for':'absent_'+id})
opts.find('.late-lbl').attr({'for':'late_'+id})

tr.append('<td class="text-center">'+(i++)+'</td>')
tr.append('<td class="">'+(name)+'</td>')
var td = '<td>';
td += '<input type="hidden" name="student_id['+id+']" value="'+id+'">';
td += opts.html();
td += '</td>';
tr.append(td)

_table.find('tbody').append(tr)
})
$('#submit-btn-field').show()
$('#edit_att').attr('data-id',attendance_id)
}else{
var tr = $('<tr></tr>')
tr.append('<td class="text-center" colspan="3">No
data.</td>')
_table.find('tbody').append(tr)
$('#submit-btn-field').attr('data-id','').hide()
$('#edit_att').attr('data-id','')
}
$('#att-list').html('')
$('#att-list').append(_table)
if(Object.keys(record).length > 0){
Object.keys(record).map(k=>{
//
console.log('[name="type['+record[k].student_id+']"][value="'+record[k].type+'"]')
$('#att-list').find('[name="type['+record[k].student_id+']"][value="'+record[k].type+'"]').prop('checked',true)
})
}
}
},
complete:function(){
$("input:checkbox").on('keyup keypress change',function(){
var group = "input:checkbox[name='"+$(this).attr("name")+"']";
$(group).prop("checked",false);
$(this).prop("checked",true);
});
$('#edit_att').click(function(){
location.href = 'index.php?page=check_attendance&attendance_id='+$(this).attr('data-id')
})
end_load()
}
})
}

})
$('#class_subject_id').change(function(){
get_data($(this).val())
})
window.get_data = function(id){
start_load()
$.ajax({
url:'ajax.php?action=get_class_list',

Dept. of BCA, Belda College Page 35

Online Attendance Management System
method:'POST',
data:{class_subject_id:id},
success:function(resp){
if(resp){
resp = JSON.parse(resp)
var _table = $('#table_clone table').clone()
$('#att-list').html('')
$('#att-list').append(_table)
if(Object.keys(resp).length > 0){
var i = 1;
Object.keys(resp.data).map(function(k){
var name = resp.data[k].name;
var id = resp.data[k].id;
var tr = $('<tr></tr>')
var opts = $('#chk_clone').clone()
opts.find('.present-inp').attr({'name':'type['+id+']','id':'present_'+id})
opts.find('.absent-inp').attr({'name':'type['+id+']','id':'absent_'+id})
opts.find('.late-inp').attr({'name':'type['+id+']','id':'late_'+id})

opts.find('.present-lbl').attr({'for':'present_'+id})
opts.find('.absent-lbl').attr({'for':'absent_'+id})
opts.find('.late-lbl').attr({'for':'late_'+id})
tr.append('<td class="text-center">'+(i++)+'</td>')
tr.append('<td class="">'+(name)+'</td>')
var td = '<td>';
td += '<input type="hidden" name="student_id['+id+']" value="'+id+'">';
td += opts.html();
td += '</td>';
tr.append(td)

_table.find('tbody').append(tr)
})
$('#submit-btn-field').show()
}else{
var tr = $('<tr></tr>')
tr.append('<td class="text-center" colspan="3">No data.</td>')
_table.find('tbody').append(tr)
$('#submit-btn-field').hide()
}
$('#att-list').html('')
$('#att-list').append(_table)
}
},
complete:function(){
$("input:checkbox").on('keyup keypress change',function(){
// console.log(test)
var group = "input:checkbox[name='"+$(this).attr("name")+"']";
$(group).prop("checked",false);
$(this).prop("checked",true);
});
end_load()
}
})
}
$('#manage-attendance').submit(function(e){
e.preventDefault()
start_load()
$.ajax({
url:'ajax.php?action=save_attendance',

Dept. of BCA, Belda College Page 36

Online Attendance Management System
method:'POST',
data:$(this).serialize(),
success:function(resp){
if(resp==1){
alert_toast("Data successfully saved.",'success')
setTimeout(function(){
location.reload()
},1000)
}else if(resp ==2){
alert_toast("Class already has an attendance record with the slected subject and date.",'danger')
end_load();
}
}
})
})
</script>

Attendance Report Page:

<?php include 'db_connect.php' ?>

<div class="container-fluid">
<div class="col-lg-12">
<div class="card">
<div class="card-header"><b>Attendance Report</b></div>
<div class="card-body">
<form id="manage-attendance">
<input type="hidden" name="id" value="">
<div class="row justify-content-center">
<label for="" class="mt-2">Class per Subjects</label>
<div class="col-sm-4">
<select name="class_subject_id" id="class_subject_id" class="custom-select select2 input-sm">
<option value=""></option>
<?php
$class = $conn->query("SELECT cs.*,concat(co.course,' ',c.level,'-',c.section) as `class`,s.subject,f.name as fname
FROM class_subject cs inner join `class` c on c.id = cs.class_id inner join courses co on co.id = c.course_id inner join
faculty f on f.id = cs.faculty_id inner join subjects s on s.id = cs.subject_id ".($_SESSION['login_faculty_id'] ? " where
f.id = {$_SESSION['login_faculty_id']} ":"")." order by concat(co.course,' ',c.level,'-',c.section) asc");
while($row=$class->fetch_assoc()):
?>
<option value="<?php echo $row['id'] ?>" data-cid="<?php echo $row['id'] ?>" <?php echo isset($class_subject_id) &&
$class_subject_id == $row['id'] ? 'selected' : '' ?>><?php echo $row['class'].' '.$row['subject']. ' [ '.$row['fname'].' ]'
?></option>
<?php endwhile; ?>
</select>
</div>
<label for="" class="mt-2">Month of</label>
<div class="col-sm-3">
<input type="month" name="doc" id="doc" value="<?php echo date('Y-m') ?>" class="form-control">
</div>
<div class="col-sm-2">
<button class="btn btn-primary" type="button" id="filter">Filter</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-12" id='att-list'>
<center><b><h4><i>Please Select Class First.</i></h4></b></center>
</div>

Dept. of BCA, Belda College Page 37

Online Attendance Management System
<div class="col-md-12" style="display: none" id="submit-btn-field">
<center>
<button class="btn btn-success btn-sm col-sm-3" type="button" id="print_att"><i class="fa fa-print"></i>
Print</button>
</center>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div id="table_clone" style="display: none">
<table width="100%">
<tr>
<td width="50%">
<p>Course: <b class="course"></b></p>
<p>Subject: <b class="subject"></b></p>
<p>Total Days of Classes: <b class="noc"></b></p>
</td>
<td width="50%">
<p>Class: <b class="class"></b></p>
<p>Month of: <b class="doc"></b></p>
</td>
</tr>
</table>
<table class='table table-bordered table-hover att-list'>
<thead>
<tr>
<th class="text-center" width="5%">#</th>
<th width="20%">Student</th>
<th>Present</th>
<th>Late</th>
<th>Absent</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div id="chk_clone" style="display: none">
<div class="d-flex justify-content-center chk-opts">
<div class="form-check form-check-inline">
<input class="form-check-input present-inp" type="checkbox" value="1" readonly="">
<label class="form-check-label present-lbl">Present</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input absent-inp" type="checkbox" value="0" readonly="">
<label class="form-check-label absent-lbl">Absent</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input late-inp" type="checkbox" value="2" readonly="">
<label class="form-check-label late-lbl">Late</label>
</div>
</div>
</div>
<style>
.present-inp,.absent-inp,.late-inp,.present-lbl,.absent-lbl,.late-lbl{
cursor: pointer;

Dept. of BCA, Belda College Page 38

Online Attendance Management System
}
</style>
<noscript>
<style>
table.att-list{
width:100%;
border-collapse:collapse
}
table.att-list td,table.att-list th{
border:1px solid
}
.text-center{
text-align:center
}
</style>
</noscript>
<script>

$('#filter').click(function(){
start_load()
$.ajax({
url:'ajax.php?action=get_att_report',
method:'POST',
data:{class_subject_id:$('#class_subject_id').val(),doc:$('#doc').val()},
success:function(resp){
if(resp){
resp = JSON.parse(resp)
var _table = $('#table_clone').clone()
$('#att-list').html('')
$('#att-list').append(_table)
var _type = ['Absent','Present','Late'];
var data = !!resp.data ? resp.data : [] ;
var record = !!resp.record ? resp.record :[];
var attendance_id = !!resp.attendance_id ? resp.attendance_id : 0;
if(Object.keys(data).length > 0){
var i = 1;
Object.keys(data).map(function(k){
var name = data[k].name;
var id = data[k].id;
var tr = $('<tr></tr>')
// opts.find('.present-inp').attr({'name':'type['+id+']','id':'present_'+id})
// opts.find('.absent-inp').attr({'name':'type['+id+']','id':'absent_'+id})
// opts.find('.late-inp').attr({'name':'type['+id+']','id':'late_'+id})

// opts.find('.present-lbl').attr({'for':'present_'+id})
// opts.find('.absent-lbl').attr({'for':'absent_'+id})
// opts.find('.late-lbl').attr({'for':'late_'+id})
var present=0;
var late=0;
var absent=0;
console.log(Object.keys(record).length)
// record = JSON.parse(record)
if(Object.keys(record).length > 0){
if(record[id].length > 0){
Object.keys(record[id]).map(i=>{
if(record[id][i].type == 0)
absent =
parseInt(absent) + 1;
if(record[id][i].type == 1)

Dept. of BCA, Belda College Page 39

Online Attendance Management System
present = parseInt(present) + 1;
if(record[id][i].type == 2)
late = parseInt(late) + 1;
})
}
}

tr.append('<td class="text-center">'+(i++)+'</td>')
tr.append('<td class="">'+(name)+'</td>')
var td = '<td class="text-center">';
td += present;
td += '</td>';
td += '<td class="text-center">';
td += late;
td += '</td>';
td += '<td class="text-center">';
td += absent;
td += '</td>';
tr.append(td)

_table.find('table.att-list tbody').append(tr)
})
$('#submit-btn-field').show()
$('#edit_att').attr('data-id',attendance_id)
}else{
var tr = $('<tr></tr>')
tr.append('<td class="text-center" colspan="5">No
data.</td>')
_table.find('table.att-list tbody').append(tr)
$('#submit-btn-field').attr('data-id','').hide()
$('#edit_att').attr('data-id','')
}
$('#att-list').html('')
_table.find('.course').text(!!resp.details.course ? resp.details.course : '')
_table.find('.subject').text(!!resp.details.subject ? resp.details.subject : '')
_table.find('.class').text(!!resp.details.class ? resp.details.class : '')
_table.find('.doc').text(!!resp.details.doc ? resp.details.doc : '')
_table.find('.noc').text(!!resp.details.noc ? resp.details.noc : '')

_table.find('.noc').text(!!resp.details.noc ? resp.details.noc : '')

$('#att-list').append(_table.html())
if(Object.keys(record).length > 0){
Object.keys(record).map(k=>{
//
console.log('[name="type['+record[k].student_id+']"][value="'+record[k].type+'"]')
$('#att-list').find('[name="type['+record[k].student_id+']"][value="'+record[k].type+'"]').prop('checked',true)
})
}
}
},
complete:function(){
$("input[readonly]").on('keyup keypress change',function(e){
e.preventDefault()
return false;
});
$('#edit_att').click(function(){
location.href = 'index.php?page=check_attendance&attendance_id='+$(this).attr('data-id')
})
end_load()

Dept. of BCA, Belda College Page 40

Online Attendance Management System
}
})
})
$('#manage-attendance').submit(function(e){
e.preventDefault()
start_load()
$.ajax({
url:'ajax.php?action=save_attendance',
method:'POST',
data:$(this).serialize(),
success:function(resp){
if(resp==1){
alert_toast("Data successfully saved.",'success')
setTimeout(function(){
location.reload()
},1000)
}else if(resp ==2){
alert_toast("Class already has an attendance record with the slected subject and date.",'danger')
end_load();
}
}
})
})
$('#print_att').click(function(){
var _c = $('#att-list').html();
var ns = $('noscript').clone();
var nw = window.open('','_blank','width=900,height=600')
nw.document.write(_c)
nw.document.write(ns.html())
nw.document.close()
nw.print()
setTimeout(() => {
nw.close()
}, 500);
})
</script>

Dept. of BCA, Belda College Page 41

Online Attendance Management System

4.2 SCREEN SHOTS

ADMIN DASHBOARD

COURSE

Dept. of BCA, Belda College Page 42

Online Attendance Management System

SUBJECT

CLASS

Dept. of BCA, Belda College Page 43

Online Attendance Management System

FACULTY

ATTENDANCE RECORD

Dept. of BCA, Belda College Page 44

Online Attendance Management System

SYSTEM TESTING
The aim of the system testing process was to determine all defects in the project. The program was
subjected to a set of test inputs and various observations were made and based on these
observations it will be decided whether the program behaves as expected or not. Our Project went
through two levels of testing.

5.1 UNIT TESTING

Unit testing is undertaken when a module has been created and successfully reviewed. In order to
test a single module, we need to provide a complete environment i.e., besides the module we would
require
 The procedures belonging to other modules that the module under test calls.
 Non local data structures that module accesses.
 A procedure to call the functions of the module under test with appropriate parameters.

1. Test For the admin module

 Testing admin login page -This form is used for log in of administrator of the system. In this
we enter the username and password if both are correct then dashboard page will open
otherwise if any of data is wrong it will get redirected back to the login page and again ask
for username and password.
 Testing Course page - In this section the admin can add a course details and the data will be
added to the database. It contains Save, edit and delete buttons. If Admin click Save button
data will be added to the database and if he clicks edit or delete button the user data can be
edited or deleted respectively.
 Testing Subject page - In this section the admin can add a subject details and the data will be
added to the database. It contains Save, edit and delete buttons. If Admin click Save button
data will be added to the database and if he clicks edit or delete button the user data can be
edited or deleted respectively.
 Testing Class page - In this section the admin can add a class details and the data will be
added to the database. It contains Save, edit and delete buttons. If Admin click Save button
data will be added to the database and if he clicks edit or delete button the user data can be
edited or deleted respectively.
 Testing Faculty page - In this section the admin can add a faculty details and the datawill be
added to the database. It contains New Faculty button to enter details of the faculty and to save
those data. Edit and delete buttons are there to edit or delete the data respectively.
Dept. of BCA, Belda College Page 45
Online Attendance Management System

 Testing Student page - In this section the admin can add a student details and the datawill be
added to the database. It contains New Student button to enter details of the student’s and to save
those data. Edit and delete buttons are there to edit or delete the data respectively.
 Testing Class per subject page – Class per subject form is there to group up class, faculty,
subject and student as the respective faculty can take attendance of the students of that
subject. It contains New Entry button to enter details of the class and to save those data. Edit
and delete buttons are there to edit or delete the data respectively.
 Testing Check attendance page- Check attendance form contains check list for generated
students’ class wise with the options present, absent and late. After checking the
attendances for the students it has a save button to add the data in the database.
 Testing User management page: To change the id and password of the users and also add
new users the system has User Management page where save, edit and delete button is
there to update the database as per the requirement.

2. Test For the Faculty module

 Testing login page-This form is used for log in of a faculty of the system. In this we enter
the username and password if both are correct dashboard page will open otherwise ifany of
data is wrong it will get redirected back to the login page and again ask for username and
password.
 Testing Check attendance page- Check attendance form contains check list for generated
students’ class wise with the options present, absent and late. After checking the
attendances for the students it has a save button to add the data in the database.
 Testing Attendance record page- Check attendance form contains check list for generated
students’ class wise with the options present, absent and late. After checking the
attendances for the students it has a save button to add the data in the database.
 Testing Attendance report page- To change the id and password of the users and also add
new users the system has User Management page where save, edit and delete button is
there to update the database as per the requirement.

5.2 INTEGRATION TESTING

In this type of testing, we test various integration of the project module by providing the input.
The primary objective is to test the module interfaces in order to ensure that no errors are occurring

Dept. of BCA, Belda College Page 46

Online Attendance Management System

when one module invokes the other module.

Quality assurance is the review of the software product that checks for the correctness, reliability,
completeness and maintainability. The test cases below gives the idea of what result must be
obtained on performing a particular task.

Test Cases

Login:
Sl. No Test Case Expected Result Test Result
1 Enter valid ID and password Software should display Successful
and click on login button Dashboard.
2 Enter invalid ID and Software should not display Successful
password and click on login dashboard.
button

Course Management:
Sl. No Test Case Expected Result Test Result
1 On the click of Save User have to enter proper data, if Successful
button any error like enter text instead of
number is found then it gives error
message otherwise adds record to
the database.
2 On the click of Edit button Edit the details of course with Successful
course name and description.

3 On the click of Delete Admin can delete any course Successful

button upon click on the button.

Subject Management:
Sl. No Test Case Expected Result Test Result
1 On the click of Save User have to enter proper data, if Successful
button any error like enter text instead of
number is found then it gives error
message otherwise adds record to
the database.
2 On the click of Edit button Edit the details of subject with Successful
subject name and description.
3 On the click of Delete Admin can delete any course Successful
button upon click on the button.

Dept. of BCA, Belda College Page 47

Online Attendance Management System

Class Management:
Sl. No Test Case Expected Result Test Result
1 On the click of Save User have to enter proper data, if Successful
button any error like enter text instead of
number is found then it gives error
message otherwise adds record to
the database.
2 On the click of Edit button Edit the details of class with Successful
class name, semester and section.

3 On the click of Delete Admin can delete any class upon Successful
button click on the button.

Faculty Management:
Sl. No Test Case Expected Result Test Result
1 On the click of New User have to enter proper data, if Successful
Faculty button any error like enter text instead of
number is found then it gives error
message otherwise adds record to
the database.
2 On the click of Edit button Edit the details of faculty with Successful
id, name, email, contact and
address.

3 On the click of Delete Admin can delete any faculty Successful

button upon click on the button.

Student Management:
Sl. No Test Case Expected Result Test Result
1 On the click of New User have to enter proper data, if Successful
Student button any error like enter text instead of
number is found then it gives error
message otherwise adds record to
the database.
2 On the click of Edit button Edit the details of student with Successful
id, name, and class.
3 On the click of Delete Admin can delete any faculty Successful
button upon click on the button.

Dept. of BCA, Belda College Page 48

Online Attendance Management System

Class per Subject Management:

Sl. No Test Case Expected Result Test Result
1 On the click of New User have to enter proper data, if Successful
Entry button any error like enter text instead of
number is found then it gives error
message otherwise adds record to
the database.
2 On the click of Edit button Edit the details of allotted class Successful
with c la s s , subject and faculty.
3 On the click of Delete Admin can delete any allotted Successful
button class upon click on the button.

Check Attendance Management:

Sl. No Test Case Expected Result Test Result
1 On the click of Save User have to check the attendance Successful
button of students’ by selecting any one
checkbox among present, absent
or late. After clicking on save
button data will be added to
the database.

Dept. of BCA, Belda College Page 49

Online Attendance Management System

CONCLUSION & FUTURE SCOPE

Online Student Attendance Management System (OSAMS), a web based application, has been
developed and proved on helping any institute to manage student attendance. It can manage and
control the success of any organization by keeping track of students to maximize their performance.
The proposed system offers the process of monitoring attend students, it aims to help the teacher
in the classroom or laboratories to manage and record students' presence electronically and
directly without the need to list on paper so it will save time and effort. The system can analyse
the data and displays statistics about the student‘s absences, late coming, printing report about
absence percentages. The developed system easy to use and friendly that has an attractive and
simple GUI is design so that insertions, deletions, and changes of data can do easily

system is working exciting and is ready to use to manage students attend for any department
of the University, College or Institute. Since our system is modular and can extend effortlessly,
the future work ambitions are to make the system takes attendance by other methods such as face
recognition and using Biometrics (fingerprint) techniques, NFC mobile devices, or RFID
Systems. Furthermore, we would like to make the system to manage and record the attendance
for the staff of the university.

Dept. of BCA, Belda College Page 50

Online Attendance Management System

REFERENCES
1. PHP MySQL Website Programming: Problem - Design – Solution by Chris Lea,
Mike Buzzard, Dilip Thomas , Jessey White-Cinis
2. Beginning PHP5, Apache, and MySQL Web Development (Programmer to
Programmer) by Elizabeth Naramore
3. MySQL/PHP Database Applications, 2nd Edition by Brad Bulger
4. How to Do Everything with PHP and MySQL by Vikram Vaswani
5. https://w3school.com
6. Fundamentals of Software Engineering by Rajib Mall.
7. https://www.tutorialspoint.com/dbms/index.htm

Dept. of BCA, Belda College Page 51