Download Code – Visitor Management System Source Code Using PHP and SQLite3
Visitor Management System
Overview
The Visitor Management System is a web-based application designed to automate the process of recording and managing daily visitor records for an establishment. Developed using PHP and SQLite3, the system provides an easy-to-use platform with a modern and responsive user interface built using the Bootstrap v5 framework.
How the Visitor Management System Works
This system simplifies the process of tracking visitors by storing their information, including entry and exit dates and times. It allows management to easily retrieve and manage these records, ensuring a streamlined workflow. Additionally, it offers a feature to generate a detailed, printable report of visitor records based on specific dates.
The system is accessible only to registered users and offers two user roles:
- Administrator: Full access to all features and functionalities.
- Staff: Limited access to certain functionalities.
Features and Functionalities
Administrator Features
- Login and Logout
- Dashboard (Home Page)
- Add New Visitor Records
- View and Manage Visitor Records
- Filter records by date
- Search records within the filtered list
- Mark visitors as exited
- Update visitor details
- Generate Date-wise Visitor Reports
- Manage User Accounts (Add, Edit, Delete, View)
- Change Account Password
Staff Features
- Login and Logout
- Dashboard (Home Page)
- Add New Visitor Records
- View and Manage Visitor Records
- Filter records by date
- Search records within the filtered list
- Mark visitors as exited
- Update visitor details
- Change Account Password
Technologies Used
The Visitor Management System is built using the following technologies:
- Web Server: XAMPP/WAMP
- Code Editor: VS Code
- Languages: PHP, HTML, CSS, JavaScript
- Database: SQLite3
- Frameworks and Libraries: Bootstrap, jQuery, Ajax
- Icons: Google Icons
How to Run
Requirements
- Install a local web server like XAMPP or WAMP.
- Download the source code files.
Setup Instructions
- Open the
php.inifile in your XAMPP/WAMP installation and enable the SQLite3 extension by uncommenting it. Save the file. - Start Apache from the XAMPP/WAMP control panel.
- Extract the downloaded source code zip file.
- Copy the extracted folder:
- If using XAMPP, paste it into the
htdocsdirectory. - If using WAMP, paste it into the
wwwdirectory.
- If using XAMPP, paste it into the
- Open a web browser and access the system using the following URL:
http://localhost/php-sqlite-vms/
Default Admin Credentials
- Username: admin
- Password: sourcecodester&123
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 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 |
<?php require_once('auth.php'); require_once('DBConnection.php'); $page = $_GET['page'] ?? 'home'; $title = ucwords(str_replace("_", " ", $page)); ?> <!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><?= ucwords($title) ?> | VMS</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" /> <link rel="stylesheet" href="./css/bootstrap.min.css"> <link rel="stylesheet" href="./css/custom.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> </head> <body> <main> <nav class="navbar navbar-expand-lg navbar-dark bg-primary bg-gradient fixed-top mb-5" id="topNavBar"> <div class="container"> <a class="navbar-brand" href="./"> VMS </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 == 'visitors')? 'active' : '' ?> d-flex align-items-start" aria-current="page" href="./?page=manage_visitor"><span class="material-symbols-outlined">add</span> Add Record</a> </li> <li class="nav-item"> <a class="nav-link <?php echo ($page == 'visitors')? 'active' : '' ?>" aria-current="page" href="./?page=visitors">Visitor List</a> </li> <?php if($_SESSION['type'] == 1): ?> <li class="nav-item"> <a class="nav-link <?php echo ($page == 'reports')? 'active' : '' ?>" aria-current="page" href="./?page=reports">Reports</a> </li> <li class="nav-item"> <a class="nav-link <?php echo ($page == 'users')? 'active' : '' ?>" aria-current="page" href="./?page=users">Users</a> </li> <?php endif; ?> </ul> </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=update_account">Change Password</a></li> <li><a class="dropdown-item" href="./LoginRegistration.php?a=logout">Logout</a></li> </ul> </div> </div> </nav> <div class="container-md pt-5 pb-3" id="page-container"> <div class="my-4"> <?php if(isset($_SESSION['message']['success'])): ?> <div class="alert alert-success py-3 rounded-0"> <?= $_SESSION['message']['success'] ?> </div> <?php unset($_SESSION['message']['success']) ?> <?php endif; ?> <?php if(isset($_SESSION['message']['error'])): ?> <div class="alert alert-danger py-3 rounded-0"> <?= $_SESSION['message']['error'] ?> </div> <?php unset($_SESSION['message']['error']) ?> <?php endif; ?> <?php include($page.".php"); ?> </div> </div> <footer class="position-fixed bottom-0 w-100 bg-gradient bg-light"> <div class="lh-1 container py-4"> <div class="text-center">All rights reserved © <?= date("Y") ?> - VMS(php)</div> <div class="text-center">Developed by:<a href="mailto:oretnom23@gmail.com" class='text-body-tertiary'>oretnom23</a></div> </div> </footer> <div class="modal fade" id="expenseModal" tabindex="-1"> <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable rounded-0"> <div class="modal-content"> <div class="modal-header rounded-0"> <h5 class="modal-title"></h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body rounded-0"> <div class="container-fluid"> <form action="" id="expense-form"> <input type="hidden" name="formToken" value="<?= $_SESSION['formToken']['expense-form'] ?>"> <input type="hidden" name="expense_id" value=""> <div class="mb-3"> <label for="name">Name</label> <input type="text" class="form-control rounded-0" id="name" name="name" required="required"> </div> <div class="mb-3"> <label for="amount">Amount</label> <input type="number" step="any" min="0" class="form-control rounded-0 text-end" id="amount" name="amount" required="required" value="0"> </div> </form> </div> </div> <div class="modal-footer"> <button type="submit" class="btn btn-primary rounded-0" form="expense-form">Save</button> <button type="button" class="btn btn-secondary rounded-0" data-bs-dismiss="modal">Close</button> </div> </div> </div> </div> <div class="modal fade" id="earningModal" tabindex="-1"> <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable rounded-0"> <div class="modal-content"> <div class="modal-header rounded-0"> <h5 class="modal-title"></h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body rounded-0"> <div class="container-fluid"> <form action="" id="earning-form"> <input type="hidden" name="formToken" value="<?= $_SESSION['formToken']['earning-form'] ?>"> <input type="hidden" name="earning_id" value=""> <div class="mb-3"> <label for="name">Name</label> <input type="text" class="form-control rounded-0" id="name" name="name" required="required"> </div> <div class="mb-3"> <label for="amount">Amount</label> <input type="number" step="any" min="0" class="form-control rounded-0 text-end" id="amount" name="amount" required="required" value="0"> </div> </form> </div> </div> <div class="modal-footer"> <button type="submit" class="btn btn-primary rounded-0" form="earning-form">Save</button> <button type="button" class="btn btn-secondary rounded-0" data-bs-dismiss="modal">Close</button> </div> </div> </div> </div> <script> $(function(){ $('#expense-form').submit(function(e){ e.preventDefault(); $('.pop_msg').remove() var _this = $(this) var _el = $('<div>') _el.addClass('pop_msg') start_loader() $.ajax({ url:'./Master.php?a=save_expense', 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') }, success:function(resp){ if(resp.status == 'success'){ _el.addClass('alert alert-success') location.reload(); }else{ _el.addClass('alert alert-danger') } _el.text(resp.msg) _el.hide() _this.prepend(_el) _el.show('slow') end_loader() } }) }) $('#earning-form').submit(function(e){ e.preventDefault(); $('.pop_msg').remove() var _this = $(this) var _el = $('<div>') _el.addClass('pop_msg') start_loader() $.ajax({ url:'./Master.php?a=save_earning', 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') }, success:function(resp){ if(resp.status == 'success'){ _el.addClass('alert alert-success') location.reload(); }else{ _el.addClass('alert alert-danger') } _el.text(resp.msg) _el.hide() _this.prepend(_el) _el.show('slow') end_loader() } }) }) }) </script> </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 |
<?php //require/load the authentication file script require_once('auth.php'); require_once('DBConnection.php'); $page = isset($_GET['page']) ? $_GET['page'] : 'home'; // Generate Login Form Token $_SESSION['formToken']['login'] = password_hash(uniqid(),PASSWORD_DEFAULT); ?> <!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 | VMS</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" /> <link rel="stylesheet" href="./css/bootstrap.min.css"> <link rel="stylesheet" href="./css/custom.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> </head> <body class="bg-dark bg-gradient"> <div class="h-100 d-flex jsutify-content-center align-items-center"> <div class='w-100'> <h3 class="py-5 text-center text-light">VMS</h3> <div class="card my-3 col-md-4 offset-md-4"> <div class="card-body"> <!-- Login Form Wrapper --> <form action="" id="login-form"> <input type="hidden" name="formToken" value="<?= $_SESSION['formToken']['login'] ?>"> <center><small>Please enter your credentials.</small></center> <div class="mb-3"> <label for="username" class="control-label">Username</label> <input type="text" id="username" autofocus name="username" class="form-control rounded-0" required> </div> <div class="mb-3"> <label for="password" class="control-label">Password</label> <input type="password" id="password" name="password" class="form-control rounded-0" required> </div> <div class="mb-3 d-flex w-100 justify-content-center align-items-end"> <!-- <a href="registration.php">Does not have an Account? Signup Here</a> --> <button class="btn btn-sm btn-primary rounded-0 my-1">Login</button> </div> </form> <!-- Login Form Wrapper --> </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:'./LoginRegistration.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> |