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
;beforesqlite3. - Start Apache from the XAMPP/WAMP control panel.
- Extract the downloaded source code file.
- Copy the extracted folder into:
htdocsif using XAMPPwwwif 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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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> <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> |
login PHP
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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> <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> |