Do you know Online Attendance Management System is an advance tool, which help us to manage and maintain the records of student attendance. This type of tool mainly a one type of software that keep observe attendance details.
Here this is online system, that means this system has very useful technique, because this system we can access from anywhere from any device, because this system has been develop by responsive web technology.
This is very simple and user friendly attendance management system for teacher, who want to digitize their student attendance record online. Digitize means convert paper work process into digital form, and store all data online, So he can view all details in single click.
For make this student attendance system, we have use all opensource technology like PHP, Mysql, jQery, Ajax, Bootstrap 4, jQuery Datatable plugin, Bootstrap Datepicker plugin. If you are looiking for your College project, then you can use this system in your education project also.
So, are you ready for learn how to make simple Student Attendance system in PHP and Mysql. So you have come on right place with right time, because here we have make tutorial on attendance management system by using latest web technology.
Features of Attendance Management System
The main feature of this Student Attendance system is that store student daily attendance record, and make PDF report from attendance data. This is very simple system, there are main two user, one is admin and other one is teacher. Admin has all rights for view or access system data, while teacher has rights to view only his or her grade student data. In this system Admin and teacher password has been store in encrypted form.
User of this System
- Admin
- Teacher
Admin Activity
- Admin can Add Update Delete Grade Master Data
- Admin has rights to add new teacher account, edit teacher details, and remove teacher account
- Admin can assign grade to teacher, so teacher can view his or her student and take attendace of that student only.
- Admin can Add new student, edit existing student and delete student data. Student grade also assign by admin only.
- Admin can view all student attendance records of any grade.
- Admin can make pdf report of any student attendance record
- Admin can view all student overall attendance details in percentage form.
Teacher Activity
- Teacher can update his or her profile details like change password, change profile picture etc
- Teacher can view his or her grade student list.
- Teacher can take attendance of his or her grade student.
- Teacher can view his or her grade student attendance details
- Teacher can generate PDF report of Attendance records.
- Teacher can view overall attendance percentage of all student of his or her grade.
We have following Web Technology has been used for this attendance management system.
Database Structure
Directory Stucture
Below you can find directory structure of this attendance management system project in PHP.
admin/database_connection.php
<?php
//database_connection.php
$connect = new PDO("mysql:host=localhost;dbname=attendance","root","");
$base_url = "http://localhost/tutorial/student-attendance-system-in-php-using-ajax/";
?>
admin/login.php
<?php
//login.php
include('database_connection.php');
session_start();
if(isset($_SESSION["admin_id"]))
{
header('location:index.php');
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Student Attendance System in PHP using Ajax</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center" style="margin-bottom:0">
<h1>Student Attendance System</h1>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4" style="margin-top:20px;">
<div class="card">
<div class="card-header">Admin Login</div>
<div class="card-body">
<form method="post" id="admin_login_form">
<div class="form-group">
<label>Enter Username</label>
<input type="text" name="admin_user_name" id="admin_user_name" class="form-control" />
<span id="error_admin_user_name" class="text-danger"></span>
</div>
<div class="form-group">
<label>Enter Password</label>
<input type="password" name="admin_password" id="admin_password" class="form-control" />
<span id="error_admin_password" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" name="admin_login" id="admin_login" class="btn btn-info" value="Login" />
</div>
</form>
</div>
</div>
</div>
<div class="col-md-4">
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#admin_login_form').on('submit', function(event){
event.preventDefault();
$.ajax({
url:"check_admin_login.php",
method:"POST",
data:$(this).serialize(),
dataType:"json",
beforeSend:function(){
$('#admin_login').val('Validate...');
$('#admin_login').attr('disabled', 'disabled');
},
success:function(data)
{
if(data.success)
{
location.href = "<?php echo $base_url; ?>admin";
}
if(data.error)
{
$('#admin_login').val('Login');
$('#admin_login').attr('disabled', false);
if(data.error_admin_user_name != '')
{
$('#error_admin_user_name').text(data.error_admin_user_name);
}
else
{
$('#error_admin_user_name').text('');
}
if(data.error_admin_password != '')
{
$('#error_admin_password').text(data.error_admin_password);
}
else
{
$('#error_admin_password').text('');
}
}
}
});
});
});
</script>
admin/header.php
<?php
//header.php
include('database_connection.php');
session_start();
if(!isset($_SESSION["admin_id"]))
{
header('location:login.php');
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Student Attendance System in PHP using Ajax</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>!-->
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/dataTables.bootstrap4.min.css">
<script src="../js/jquery.min.js"></script>
<script src="../js/popper.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/jquery.dataTables.min.js"></script>
<script src="../js/dataTables.bootstrap4.min.js"></script>
</head>
<body>
<div class="jumbotron-small text-center" style="margin-bottom:0">
<h1>Student Attendance System</h1>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="index.php">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="grade.php">Grade</a>
</li>
<li class="nav-item">
<a class="nav-link" href="teacher.php">Teacher</a>
</li>
<li class="nav-item">
<a class="nav-link" href="student.php">Student</a>
</li>
<li class="nav-item">
<a class="nav-link" href="attendance.php">Attendance</a>
</li>
<li class="nav-item">
<a class="nav-link" href="logout.php">Logout</a>
</li>
</ul>
</div>
</nav>
admin/index.php
<?php
//index.php
include('header.php');
?>
<div class="container" style="margin-top:30px">
</div>
</body>
</html>
<script>
$(document).ready(function(){
});
</script>
admin/logout.php
<?php
//logout.php
session_start();
session_destroy();
header('location:login.php');
?>
grade.php
<?php
include('header.php');
?>
<div class="container" style="margin-top:30px">
<div class="card">
<div class="card-header">
<div class="row">
<div class="col-md-9">Grade List</div>
<div class="col-md-3" align="right">
<button type="button" id="add_button" class="btn btn-info btn-sm">Add</button>
</div>
</div>
</div>
<div class="card-body">
<div class="table-responsive">
<span id="message_operation"></span>
<table class="table table-striped table-bordered" id="grade_table">
<thead>
<tr>
<th>Grade Name</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
<div class="modal" id="formModal">
<div class="modal-dialog">
<form method="post" id="grade_form">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title" id="modal_title"></h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="form-group">
<div class="row">
<label class="col-md-4 text-right">Grade Name <span class="text-danger">*</span></label>
<div class="col-md-8">
<input type="text" name="grade_name" id="grade_name" class="form-control" />
<span id="error_grade_name" class="text-danger"></span>
</div>
</div>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<input type="hidden" name="grade_id" id="grade_id" />
<input type="hidden" name="action" id="action" value="Add" />
<input type="submit" name="button_action" id="button_action" class="btn btn-success btn-sm" value="Add" />
<button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Close</button>
</div>
</div>
</form>
</div>
</div>
<div class="modal" id="deleteModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Delete Confirmation</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<h3 align="center">Are you sure you want to remove this?</h3>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" name="ok_button" id="ok_button" class="btn btn-primary btn-sm">OK</button>
<button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
var dataTable = $('#grade_table').DataTable({
"processing":true,
"serverSide":true,
"order":[],
"ajax":{
url:"grade_action.php",
type:"POST",
data:{action:'fetch'}
},
"columnDefs":[
{
"targets":[0, 1, 2],
"orderable":false,
},
],
});
$('#add_button').click(function(){
$('#modal_title').text("Add Grade");
$('#button_action').val('Add');
$('#action').val('Add');
$('#formModal').modal('show');
clear_field();
});
function clear_field()
{
$('#grade_form')[0].reset();
$('#error_grade_name').text('');
}
$('#grade_form').on('submit', function(event){
event.preventDefault();
$.ajax({
url:"grade_action.php",
method:"POST",
data:$(this).serialize(),
dataType:"json",
beforeSend:function()
{
$('#button_action').attr('disabled', 'disabled');
$('#button_action').val('Validate...');
},
success:function(data){
$('#button_action').attr('disabled', false);
$('#button_action').val($('#action').val());
if(data.success)
{
$('#message_operation').html('<div class="alert alert-success">'+data.success+'</div>');
clear_field();
dataTable.ajax.reload();
$('#formModal').modal('hide');
}
if(data.error)
{
if(data.error_grade_name != '')
{
$('#error_grade_name').text(data.error_grade_name);
}
else
{
$('#error_grade_name').text('');
}
}
}
});
});
var grade_id = '';
$(document).on('click', '.edit_grade', function(){
grade_id = $(this).attr('id');
clear_field();
$.ajax({
url:"grade_action.php",
method:"POST",
data:{action:'edit_fetch', grade_id:grade_id},
dataType:"json",
success:function(data)
{
$('#grade_name').val(data.grade_name);
$('#grade_id').val(data.grade_id);
$('#modal_title').text("Edit Grade");
$('#button_action').val('Edit');
$('#action').val('Edit');
$('#formModal').modal('show');
}
});
});
$(document).on('click', '.delete_grade', function(){
grade_id = $(this).attr('id');
$('#deleteModal').modal('show');
});
$('#ok_button').click(function(){
$.ajax({
url:"grade_action.php",
method:"POST",
data:{grade_id:grade_id, action:'delete'},
success:function(data)
{
$('#message_operation').html('<div class="alert alert-success">'+data+'</div>');
$('#deleteModal').modal('hide');
dataTable.ajax.reload();
}
});
});
});
</script>
grade_action.php
<?php
//teacher_action.php
include('database_connection.php');
session_start();
$output = '';
if(isset($_POST["action"]))
{
if($_POST["action"] == 'fetch')
{
$query = "SELECT * FROM tbl_grade ";
if(isset($_POST["search"]["value"]))
{
$query .= 'WHERE grade_name LIKE "%'.$_POST["search"]["value"].'%" ';
}
if(isset($_POST["order"]))
{
$query .= 'ORDER BY '.$_POST['order']['0']['column'].' '.$_POST['order']['0']['dir'].' ';
}
else
{
$query .= 'ORDER BY grade_id DESC ';
}
if($_POST["length"] != -1)
{
$query .= 'LIMIT ' . $_POST['start'] . ', ' . $_POST['length'];
}
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
$data = array();
$filtered_rows = $statement->rowCount();
foreach($result as $row)
{
$sub_array = array();
$sub_array[] = $row["grade_name"];
$sub_array[] = '<button type="button" name="edit_grade" class="btn btn-primary btn-sm edit_grade" id="'.$row["grade_id"].'">Edit</button>';
$sub_array[] = '<button type="button" name="delete_grade" class="btn btn-danger btn-sm delete_grade" id="'.$row["grade_id"].'">Delete</button>';
$data[] = $sub_array;
}
$output = array(
"draw" => intval($_POST["draw"]),
"recordsTotal" => $filtered_rows,
"recordsFiltered" => get_total_records($connect, 'tbl_grade'),
"data" => $data
);
echo json_encode($output);
}
if($_POST["action"] == 'Add' || $_POST["action"] == "Edit")
{
$grade_name = '';
$error_grade_name = '';
$error = 0;
if(empty($_POST["grade_name"]))
{
$error_grade_name = 'Grade Name is required';
$error++;
}
else
{
$grade_name = $_POST["grade_name"];
}
if($error > 0)
{
$output = array(
'error' => true,
'error_grade_name' => $error_grade_name
);
}
else
{
if($_POST["action"] == "Add")
{
$data = array(
':grade_name' => $grade_name
);
$query = "
INSERT INTO tbl_grade
(grade_name)
SELECT * FROM (SELECT :grade_name) as temp
WHERE NOT EXISTS (
SELECT grade_name FROM tbl_grade WHERE grade_name = :grade_name
) LIMIT 1
";
$statement = $connect->prepare($query);
if($statement->execute($data))
{
if($statement->rowCount() > 0)
{
$output = array(
'success' => 'Data Added Successfully',
);
}
else
{
$output = array(
'error' => true,
'error_grade_name' => 'Grade Name Already Exists'
);
}
}
}
if($_POST["action"] == "Edit")
{
$data = array(
':grade_name' => $grade_name,
':grade_id' => $_POST["grade_id"]
);
$query = "
UPDATE tbl_grade
SET grade_name = :grade_name
WHERE grade_id = :grade_id
";
$statement = $connect->prepare($query);
if($statement->execute($data))
{
$output = array(
'success' => 'Data Updated Successfully',
);
}
}
}
echo json_encode($output);
}
if($_POST["action"] == "edit_fetch")
{
$query = "SELECT * FROM tbl_grade WHERE grade_id = '".$_POST["grade_id"]."'";
$statement = $connect->prepare($query);
if($statement->execute())
{
$result = $statement->fetchAll();
foreach($result as $row)
{
$output['grade_name'] = $row["grade_name"];
$output['grade_id'] = $row['grade_id'];
}
echo json_encode($output);
}
}
if($_POST["action"] == "delete")
{
$query = "DELETE FROM tbl_grade WHERE grade_id = '".$_POST["grade_id"]."'";
$statement = $connect->prepare($query);
if($statement->execute())
{
echo 'Data Delete Successfully';
}
}
}
?>
