PHP and SQLite-based Student Attendance Management System for school intramurals

Projects Inventory

1 month ago

Download code – PHP and SQLite-based Student Attendance Management System for school intramurals

Intramural Student Attendance Management System

Overview

The Intramural Student Attendance Management System is a web-based application designed to track and manage student attendance during school or university intramural events. It is developed using PHP and SQLite and features a user-friendly interface built with Bootstrap v5. The system allows administrators to store, retrieve, and manage attendance records efficiently.

How It Works

The system has two main components:

Admin Panel – Used by the school management to manage student lists, courses, and attendance records.
Student Interface – Allows students to log their attendance by entering their Student ID Number and selecting In/Out status. The system prevents duplicate entries to maintain accurate records.

Key Features

Student Side

Attendance Logging Page
Prevents Duplicate Attendance Entries

Admin Side

User Login & Logout
Dashboard for Attendance Management
Manage School Years, Courses, and Year Levels
Student Registration & Management
Attendance Records with Filtering Options (by Course and Year Level)
Print Attendance Reports
Set Current School Year
User Account Management

Technologies Used

Frontend: HTML, CSS, JavaScript, Bootstrap v5
Backend: PHP, SQLite Database
Additional Tools: jQuery, Ajax, FontAwesome

How to Install and Run the System

Requirements

Install a local web server like XAMPP or WAMP
Download the source code ZIP file

Installation Steps

Open php.ini in XAMPP/WAMP and enable sqlite3

by removing the comment ; before sqlite3.
Start Apache from the XAMPP/WAMP control panel.
Extract the downloaded source code file.
Copy the extracted folder into:
- htdocs if using XAMPP
- www if using WAMP
Open your browser and visit http://localhost/intrams_sams/

Admin Login Credentials

Username: admin
Password: admin123

Conclusion

The Intramural Student Attendance Management System is a simple and effective tool for tracking student participation in intramural events. It is free to download and can be modified for educational purposes or future projects.

index PHP

<?php
session_start();
if(!isset($_SESSION['user_id'])){
    header("Location:./attendance.php");
    exit;
}
require_once('DBConnection.php');
$page = isset($_GET['page']) ? $_GET['page'] : 'home';

$sy_qry = $conn->query("SELECT * FROM `school_year` where `status` = 1 ");
$result = $sy_qry->fetchArray();
if(isset($result['sy_id'])){
    $_SESSION['sy_id'] = $result['sy_id'];
    $_SESSION['sy'] = $result['school_year'];
}else{
    $_SESSION['sy_id'] = 0;
    $_SESSION['sy'] = "";
}
?>
<?php  
$base_url = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] != 'off' ? 'https://' : 'http://') . $_SERVER['SERVER_NAME'] . '/intrams_sams/'; 
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo ucwords(str_replace('_','',$page)) ?> | Student Attendance Management System - Intramurals</title>
    <link rel="stylesheet" href="<?= $base_url ?>Font-Awesome-master/css/all.min.css">
    <link rel="stylesheet" href="<?= $base_url ?>css/bootstrap.min.css">
    <script src="<?= $base_url ?>js/jquery-3.6.0.min.js"></script>
    <script src="<?= $base_url ?>js/popper.min.js"></script>
    <script src="<?= $base_url ?>js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="<?= $base_url ?>DataTables/datatables.min.css">
    <script src="<?= $base_url ?>DataTables/datatables.min.js"></script>
    <script src="<?= $base_url ?>Font-Awesome-master/js/all.min.js"></script>
    <script src="<?= $base_url ?>js/script.js"></script>
    <style>
        html,body{
            height:100%;
            width:100%;
        }
        main{
            height:100%;
            display:flex;
            flex-flow:column;
        }
        #page-container{
            flex: 1 1 auto; 
            overflow:auto;
        }
        #topNavBar{
            flex: 0 1 auto; 
        }
        .truncate-1 {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
        }
        .truncate-3 {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }
        .modal-dialog.large {
            width: 80% !important;
            max-width: unset;
        }
        .modal-dialog.mid-large {
            width: 50% !important;
            max-width: unset;
        }
        @media (max-width:720px){
            
            .modal-dialog.large {
                width: 100% !important;
                max-width: unset;
            }
            .modal-dialog.mid-large {
                width: 100% !important;
                max-width: unset;
            }  
        
        }
        #topNavBar{
            background-color:#6E85B7 !important;
            background:#6E85B7!important;
        }
    </style>
</head>
<body>
    <main>
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark bg-gradient" id="topNavBar">
            <div class="container">
                <a class="navbar-brand" href="#">
                Intrams - SAMS
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link <?php echo ($page == 'home')? 'active' : '' ?>" aria-current="page" href="./">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link <?php echo ($page == 'students')? 'active' : '' ?>" aria-current="page" href="./?page=students">Students</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link <?php echo ($page == 'attendance_list')? 'active' : '' ?>" href="./?page=attendance_list">Attendance Records</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link " href="./attendance.php" target="_blank">Attendance</a>
                        </li>
                        <?php if($_SESSION['type'] == 1): ?>
                        <li class="nav-item">
                            <a class="nav-link <?php echo ($page == 'users')? 'active' : '' ?>" aria-current="page" href="./?page=users">Users</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="./?page=maintenance">Maintenance</a>
                        </li>
                        <?php endif; ?>
                        
                    </ul>
                </div>
                <div>
                <div class="dropdown">
                    <button class="btn btn-secondary dropdown-toggle bg-transparent  text-light border-0" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                        Hello <?php echo $_SESSION['fullname'] ?>
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                        <li><a class="dropdown-item" href="./?page=manage_account">Manage Account</a></li>
                        <li><a class="dropdown-item" href="Actions.php?a=logout">Logout</a></li>
                    </ul>
                </div>
                </div>
            </div>
        </nav>
        <div class="container">
            <div class="py-1 w-100 d-flex justify-content-end">
                <small class="text-muted">Active School Year: </small><span class="badge bg-success mx-2 rounded-pill"><?= $_SESSION['sy'] ?></span>
            </div>
        </div>
        <div class="container py-3" id="page-container">
            <?php 
                if(isset($_SESSION['flashdata'])):
            ?>
            <div class="dynamic_alert alert alert-<?php echo $_SESSION['flashdata']['type'] ?>">
            <div class="float-end"><a href="javascript:void(0)" class="text-dark text-decoration-none" onclick="$(this).closest('.dynamic_alert').hide('slow').remove()">x</a></div>
                <?php echo $_SESSION['flashdata']['msg'] ?>
            </div>
            <?php unset($_SESSION['flashdata']) ?>
            <?php endif; ?>
            <?php
                include $page.'.php';
            ?>
        </div>
    </main>
    <div class="modal fade" id="uni_modal" role='dialog' data-bs-backdrop="static" data-bs-keyboard="true">
        <div class="modal-dialog modal-md modal-dialog-centered" 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 py-1">
            <button type="button" class="btn btn-sm rounded-0 btn-primary" id='submit' onclick="$('#uni_modal form').submit()">Save</button>
            <button type="button" class="btn btn-sm rounded-0 btn-secondary" data-bs-dismiss="modal">Close</button>
        </div>
        </div>
        </div>
    </div>
    <div class="modal fade" id="confirm_modal" role='dialog'>
        <div class="modal-dialog modal-md modal-dialog-centered" role="document">
        <div class="modal-content rounded-0">
            <div class="modal-header py-2">
            <h5 class="modal-title">Confirmation</h5>
        </div>
        <div class="modal-body">
            <div id="delete_content"></div>
        </div>
        <div class="modal-footer py-1">
            <button type="button" class="btn btn-primary btn-sm rounded-0" id='confirm' onclick="">Continue</button>
            <button type="button" class="btn btn-secondary btn-sm rounded-0" data-bs-dismiss="modal">Close</button>
        </div>
        </div>
        </div>
    </div>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

<?php

session_start();

if(!isset($_SESSION['user_id'])){

header("Location:./attendance.php");

exit;

}

require_once('DBConnection.php');

$page = isset($_GET['page']) ? $_GET['page'] : 'home';

$sy_qry = $conn->query("SELECT * FROM `school_year` where `status` = 1 ");

$result = $sy_qry->fetchArray();

if(isset($result['sy_id'])){

$_SESSION['sy_id'] = $result['sy_id'];

$_SESSION['sy'] = $result['school_year'];

}else{

$_SESSION['sy_id'] = 0;

$_SESSION['sy'] = "";

}

<?php

$base_url = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] != 'off' ? 'https://' : 'http://') . $_SERVER['SERVER_NAME'] . '/intrams_sams/';

<!DOCTYPE html>

<head>

<title><?php echo ucwords(str_replace('_','',$page)) ?> | Student Attendance Management System - Intramurals</title>

<style>

html,body{

height:100%;

width:100%;

}

main{

height:100%;

display:flex;

flex-flow:column;

}

#page-container{

flex: 1 1 auto;

overflow:auto;

}

#topNavBar{

flex: 0 1 auto;

}

.truncate-1 {

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 1;

-webkit-box-orient: vertical;

}

.truncate-3 {

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 3;

-webkit-box-orient: vertical;

}

.modal-dialog.large {

width: 80% !important;

max-width: unset;

}

.modal-dialog.mid-large {

width: 50% !important;

max-width: unset;

}

@media (max-width:720px){

.modal-dialog.large {

width: 100% !important;

max-width: unset;

}

.modal-dialog.mid-large {

width: 100% !important;

max-width: unset;

}

#topNavBar{

background-color:#6E85B7 !important;

background:#6E85B7!important;

}

</style>

</head>

<body>

<main>

Intrams - SAMS

</a>

</button>

<a class="nav-link <?php echo ($page == 'home')? 'active' : '' ?>" aria-current="page" href="./">Home</a>

</li>

<a class="nav-link <?php echo ($page == 'students')? 'active' : '' ?>" aria-current="page" href="./?page=students">Students</a>

</li>

<a class="nav-link <?php echo ($page == 'attendance_list')? 'active' : '' ?>" href="./?page=attendance_list">Attendance Records</a>

</li>

<a class="nav-link " href="./attendance.php" target="_blank">Attendance</a>

</li>

<?php if($_SESSION['type'] == 1): ?>

<a class="nav-link <?php echo ($page == 'users')? 'active' : '' ?>" aria-current="page" href="./?page=users">Users</a>

</li>

<a class="nav-link" href="./?page=maintenance">Maintenance</a>

</li>

<?php endif; ?>

</ul>

</div>

<div>

Hello <?php echo $_SESSION['fullname'] ?>

</button>

<li><a class="dropdown-item" href="./?page=manage_account">Manage Account</a></li>

<li><a class="dropdown-item" href="Actions.php?a=logout">Logout</a></li>

</ul>

</div>

</nav>

<small class="text-muted">Active School Year: </small><span class="badge bg-success mx-2 rounded-pill"><?= $_SESSION['sy'] ?></span>

</div>

<?php

if(isset($_SESSION['flashdata'])):

<?php echo $_SESSION['flashdata']['msg'] ?>

</div>

<?php unset($_SESSION['flashdata']) ?>

<?php endif; ?>

<?php

include $page.'.php';

</div>

</main>

</div>

</div>

<button type="button" class="btn btn-sm rounded-0 btn-secondary" data-bs-dismiss="modal">Close</button>

</div>

<h5 class="modal-title">Confirmation</h5>

</div>

</div>

<button type="button" class="btn btn-primary btn-sm rounded-0" id='confirm' onclick="">Continue</button>

<button type="button" class="btn btn-secondary btn-sm rounded-0" data-bs-dismiss="modal">Close</button>

</div>

</body>

</html>

login PHP

<?php
session_start();
if(isset($_SESSION['user_id']) && $_SESSION['user_id'] > 0){
    header("Location:./");
    exit;
}
require_once('DBConnection.php');
$page = isset($_GET['page']) ? $_GET['page'] : 'home';
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LOGIN | Student Attendance Management System - Intramurals</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/script.js"></script>
    <style>
        html, body{
            height:100%;
        }
        body{
            background-color:#6E85B7;
            background:#6E85B7;
        }
    </style>
</head>
<body class="">
   <div class="h-100 d-flex jsutify-content-center align-items-center">
       <div class='w-100'>
            <h1 class="py-5 text-center text-light">Student Attendance Management System - Admin</h1>
        <div class="card my-3 col-md-4 offset-md-4">
            <div class="card-body">
                <form action="" id="login-form">
                    <center><small>Please enter your credentials.</small></center>
                    <div class="form-group">
                        <label for="username" class="control-label">Username</label>
                        <input type="text" id="username" autofocus name="username" class="form-control form-control-sm rounded-0" required>
                    </div>
                    <div class="form-group">
                        <label for="password" class="control-label">Password</label>
                        <input type="password" id="password" name="password" class="form-control form-control-sm rounded-0" required>
                    </div>
                    <div class="form-group d-flex w-100 justify-content-between">
                        <a href="./attendance.php">Go to Attendance Portal</a>
                        <button class="btn btn-sm btn-primary rounded-0 my-1">Login</button>
                    </div>
                </form>
            </div>
        </div>
       </div>
   </div>
</body>
<script>
    $(function(){
        $('#login-form').submit(function(e){
            e.preventDefault();
            $('.pop_msg').remove()
            var _this = $(this)
            var _el = $('<div>')
                _el.addClass('pop_msg')
            _this.find('button').attr('disabled',true)
            _this.find('button[type="submit"]').text('Loging in...')
            $.ajax({
                url:'Actions.php?a=login',
                method:'POST',
                data:$(this).serialize(),
                dataType:'JSON',
                error:err=>{
                    console.log(err)
                    _el.addClass('alert alert-danger')
                    _el.text("An error occurred.")
                    _this.prepend(_el)
                    _el.show('slow')
                    _this.find('button').attr('disabled',false)
                    _this.find('button[type="submit"]').text('Save')
                },
                success:function(resp){
                    if(resp.status == 'success'){
                        _el.addClass('alert alert-success')
                        setTimeout(() => {
                            location.replace('./');
                        }, 2000);
                    }else{
                        _el.addClass('alert alert-danger')
                    }
                    _el.text(resp.msg)

                    _el.hide()
                    _this.prepend(_el)
                    _el.show('slow')
                    _this.find('button').attr('disabled',false)
                    _this.find('button[type="submit"]').text('Save')
                }
            })
        })
    })
</script>
</html>

100

101

102

103

<?php

session_start();

if(isset($_SESSION['user_id']) && $_SESSION['user_id'] > 0){

header("Location:./");

exit;

}

require_once('DBConnection.php');

$page = isset($_GET['page']) ? $_GET['page'] : 'home';

<!DOCTYPE html>

<head>

<title>LOGIN | Student Attendance Management System - Intramurals</title>

<style>

html, body{

height:100%;

}

body{

background-color:#6E85B7;

background:#6E85B7;

}

</style>

</head>

<h1 class="py-5 text-center text-light">Student Attendance Management System - Admin</h1>

<center><small>Please enter your credentials.</small></center>

<label for="username" class="control-label">Username</label>

</div>

<label for="password" class="control-label">Password</label>

</div>

<a href="./attendance.php">Go to Attendance Portal</a>

<button class="btn btn-sm btn-primary rounded-0 my-1">Login</button>

</div>

</form>

</div>

</body>

$(function(){

$('#login-form').submit(function(e){

e.preventDefault();

$('.pop_msg').remove()

var _this = $(this)

var _el = $('<div>')

_el.addClass('pop_msg')

_this.find('button').attr('disabled',true)

_this.find('button[type="submit"]').text('Loging in...')

$.ajax({

url:'Actions.php?a=login',

method:'POST',

data:$(this).serialize(),

dataType:'JSON',

error:err=>{

console.log(err)

_el.addClass('alert alert-danger')

_el.text("An error occurred.")

_this.prepend(_el)

_el.show('slow')

_this.find('button').attr('disabled',false)

_this.find('button[type="submit"]').text('Save')

success:function(resp){

if(resp.status == 'success'){

_el.addClass('alert alert-success')

setTimeout(() => {

location.replace('./');

}, 2000);

}else{

_el.addClass('alert alert-danger')

}

_el.text(resp.msg)

_el.hide()

_this.prepend(_el)

_el.show('slow')

_this.find('button').attr('disabled',false)

_this.find('button[type="submit"]').text('Save')

}

})

</script>

</html>

Download code – PHP and SQLite-based Student Attendance Management System for school intramurals

Intramural Student Attendance Management System

Overview

How It Works

Key Features

Student Side

Admin Side

Technologies Used

How to Install and Run the System

Requirements

Installation Steps

Admin Login Credentials

Conclusion

index PHP

login PHP

Related Posts: