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');
?>
Source Code of Student Attendance Management System using PHP will be available very soon.
