Download: Visitor Management System Source Code Using PHP and SQLite3

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.ini file 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 htdocs directory.
- If using WAMP, paste it into the www directory.
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

<?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 &copy; <?= 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>

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>

<head>

</head>

<body>

<main>

VMS

</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 == '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>

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

</li>

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

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

</li>

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

</li>

<?php endif; ?>

</ul>

</div>

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

</button>

<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>

</nav>

<?php if(isset($_SESSION['message']['success'])): ?>

<?= $_SESSION['message']['success'] ?>

</div>

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

<?php endif; ?>

<?php if(isset($_SESSION['message']['error'])): ?>

<?= $_SESSION['message']['error'] ?>

</div>

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

<?php endif; ?>

<?php include($page.".php"); ?>

</div>

<div class="text-center">Developed by:<a href="mailto:oretnom23@gmail.com" class='text-body-tertiary'>oretnom23</a></div>

</div>

</footer>

</div>

</div>

<label for="amount">Amount</label>

</div>

</form>

</div>

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

</div>

</div>

</div>

<label for="amount">Amount</label>

</div>

</form>

</div>

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

</div>

$(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

<?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>

<?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>

<head>

<title>LOGIN | VMS</title>

</head>

<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>

<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:'./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>

Download: Visitor Management System Source Code Using PHP and SQLite3

Download Code – Visitor Management System Source Code Using PHP and SQLite3

Visitor Management System

How the Visitor Management System Works

Features and Functionalities

Administrator Features

Staff Features

Technologies Used

How to Run

Requirements

Setup Instructions

Default Admin Credentials

index PHP

login PHP

Related Posts:

Leave a Comment Cancel Reply