我正在创建一个 QR 码扫描 Web 应用程序，它将在 PC 上本地运行。它扫描具有唯一 ID 的二维码，并使用 pc 摄像头标记用户的条目。我想添加一个弹出窗口，在标记进入系统之前，它会询问是否输入此人（我公司的安全原因）。如果用户单击“是”，它会标记该条目，否则不会发生任何事情。这是我的代码：
索引.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>
这是 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();
?>
请帮助我创建弹出窗口。弹出代码不起作用，但其余代码有效