I am creating a QR Code scanning web application which will run locally on a pc. It scans a qr code with unique id and marks the entry of the user using pc camera. I want to add a pop up in which before marking entry into the system, it asks whether to enter the person or not (security reasons at my company). If the user clicks yes, it marks the entry otherwise nothing happens. Here is my code:
index.php
<?php session_start();?>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>PBSO GATEPASS</title>
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="js/instascan.min.js"></script>
<!-- DataTables -->
<link rel="stylesheet" href="plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
#divvideo{
box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body style="background:#eee">
<nav class="navbar" style="background:#2c3e50">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"> <i class="glyphicon glyphicon-qrcode"></i> WELCOME TO IOCL-PBSO (Marketing Division)</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="glyphicon glyphicon-cog"></span> Maintenance <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> List of Trainees</a></li>
<li><a href="http://localhost:8089/qrcode" target="_blank" rel="noopener noreferrer"><span class="glyphicon glyphicon-plus-sign"></span> Add New Trainee</a></li>
<li><a href="attendance.php"><span class="glyphicon glyphicon-calendar"></span> Attendance</a></li>
</ul>
</li>
<li><a href="#"><span class="glyphicon glyphicon-align-justify"></span> Reports</a></li>
<li><a href="#"><span class="glyphicon glyphicon-time"></span> Check Attendance</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<!--<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>-->
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-4" style="padding:10px;background:#fff;border-radius: 5px;" id="divvideo">
<center><p class="login-box-msg"> <i class="glyphicon glyphicon-camera"></i> TAP HERE</p></center>
<video id="preview" width="100%" height="50%" style="border-radius:10px;"></video>
<br>
<br>
<?php
if(isset($_SESSION['error'])){
echo "
<div class='alert alert-danger alert-dismissible' style='background:red;color:#fff'>
<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×</button>
<h4><i class='icon fa fa-warning'></i> Error!</h4>
".$_SESSION['error']."
</div>
";
unset($_SESSION['error']);
}
if(isset($_SESSION['success'])){
echo "
<div class='alert alert-success alert-dismissible' style='background:green;color:#fff'>
<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×</button>
<h4><i class='icon fa fa-check'></i> Success!</h4>
".$_SESSION['success']."
</div>
";
unset($_SESSION['success']);
}
?>
</div>
<div class="col-md-8">
<form action="CheckInOut.php" method="post" class="form-horizontal" style="border-radius: 5px;padding:10px;background:#fff;" id="divvideo">
<i class="glyphicon glyphicon-qrcode"></i> <label>SCAN QR CODE</label> <p id="time"></p>
<input type="text" name="studentID" id="text" placeholder="scan qrcode" class="form-control" autofocus>
</form>
<div style="border-radius: 5px;padding:10px;background:#fff;" id="divvideo">
<table id="example1" class="table table-bordered">
<thead>
<tr>
<td>NAME</td>
<td>GATE ID</td>
<td>TIME IN</td>
<td>TIME OUT</td>
<td>LOGDATE</td>
</tr>
</thead>
<tbody>
<?php
$server = "localhost:3404";
$username="root";
$password="hunter2";
$dbname="qrcodedb";
$conn = new mysqli($server,$username,$password,$dbname);
$date = date('Y-m-d');
if($conn->connect_error){
die("Connection failed" .$conn->connect_error);
}
$sql ="SELECT * FROM attendance LEFT JOIN student ON attendance.STUDENTID=student.STUDENTID WHERE LOGDATE='$date'";
$query = $conn->query($sql);
while ($row = $query->fetch_assoc()){
?>
<tr>
<td><?php echo $row['LASTNAME'].', '.$row['FIRSTNAME'].' '.$row['MNAME'];?></td>
<td><?php echo $row['STUDENTID'];?></td>
<td><?php echo $row['TIMEIN'];?></td>
<td><?php echo $row['TIMEOUT'];?></td>
<td><?php echo $row['LOGDATE'];?></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</div>
</div>
<br>
<button type="submit" class="btn btn-success pull-right" onclick="Export()">
<i class="fa fa-file-excel-o fa-fw"></i> Export to excel
</button>
</div>
<script>
function Export()
{
var conf = confirm("Please confirm if you wish to proceed in exporting the attendance in to Excel File");
if(conf == true)
{
window.open("export.php",'_blank');
}
}
</script>
<script>
let scanner = new Instascan.Scanner({ video: document.getElementById('preview')});
Instascan.Camera.getCameras().then(function(cameras){
if(cameras.length > 0 ){
scanner.start(cameras[0]);
} else{
alert('No cameras found');
}
}).catch(function(e) {
console.error(e);
});
scanner.addListener('scan',function(c){
document.getElementById('text').value=c;
document.forms[0].submit();
});
</script>
<script type="text/javascript">
var timestamp = '<?=time();?>';
function updateTime(){
$('#time').html(Date(timestamp));
timestamp++;
}
$(function(){
setInterval(updateTime, 1000);
});
</script>
<script src="plugins/jquery/jquery.min.js"></script>
<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="plugins/datatables/jquery.dataTables.min.js"></script>
<script src="plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
<script src="plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
<script>
$(function () {
$("#example1").DataTable({
"responsive": true,
"autoWidth": false,
"order": [[ 2, "desc" ]],
});
$('#example2').DataTable({
"paging": true,
"lengthChange": false,
"searching": true,
"ordering": true,
"info": true,
"autoWidth": false,
"responsive": true,
});
});
</script>
</body>
</html>
here is CheckInOut.php
<?php
session_start();
$server = "localhost:3404";
$username="root";
$password="hunter2";
$dbname="qrcodedb";
$conn = new mysqli($server,$username,$password,$dbname);
if($conn->connect_error){
die("Connection failed" .$conn->connect_error);
}
if(isset($_POST['studentID'])){
echo "<link rel='stylesheet' href='plugins/css/bootstrap.min.css'>";
echo "<script>";
echo "$(document).ready(function(){";
echo "$('#myModal').modal('show')";
echo "});";
echo "</script>";
echo "<div id='myModal' class='modal fade'>";
echo "<div class='modal-dialog'>";
echo "<div class='modal-content'>";
echo "<div class='modal-header'>";
echo "<h5 class='modal-title'>Attention!!! </h5>";
echo "<button type='button' class='close' data-dismiss='modal'>×</button>";
echo "</div>";
echo "<div class='modal-body'>";
echo "<p>Authorize the user</p>";
echo "</div>";
echo "<div class='modal-footer'>";
echo "<button type='button' class='btn btn-primary'>Allow</button>";
echo "<button type='button' class='btn btn-secondary' data-dismiss='modal'>Deny</button>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "<script src='plugins/jquery/jquery.min.js'></script>";
echo "<script src='plugins/bootstrap/js/bootstrap.min.js'></script>";
$studentID =$_POST['studentID'];
$date = date('Y-m-d');
$time = date('H:i:s A');
$sql = "SELECT * FROM student WHERE STUDENTID = '$studentID'";
$query = $conn->query($sql);
if($query->num_rows < 1){
$_SESSION['error'] = 'Cannot find QRCode number '.$studentID;
}else{
$row = $query->fetch_assoc();
$id = $row['STUDENTID'];
$sql ="SELECT * FROM attendance WHERE STUDENTID='$id' AND LOGDATE='$date' AND STATUS='0'";
$query=$conn->query($sql);
if($query->num_rows>0){
$sql = "UPDATE attendance SET TIMEOUT='$time', STATUS='1' WHERE STUDENTID='$studentID' AND LOGDATE='$date'";
$query=$conn->query($sql);
$_SESSION['success'] = 'Successfuly Time Out: '.$row['FIRSTNAME'].' '.$row['LASTNAME'];
}else{
$sql = "INSERT INTO attendance(STUDENTID,TIMEIN,LOGDATE,STATUS) VALUES('$studentID','$time','$date','0')";
if($conn->query($sql) ===TRUE){
$_SESSION['success'] = 'Successfuly Time In: '.$row['FIRSTNAME'].' '.$row['LASTNAME'];
}else{
$_SESSION['error'] = $conn->error;
}
}
}
}else{
$_SESSION['error'] = 'Please scan your QR Code number';
}
header("location: index.php");
$conn->close();
?>
Please help me in creating the pop up. The pop up code does not work, but rest of the code works
