我需要让员工打卡和下班,所以我有一个名为emp_log的mysql表。员工单击a按钮,数据时间会自动插入emp_log表,还有user_id和clock_id。
这应该在不离开页面的情况下完成,并且员工不必键入任何内容。我在这里展示了我已经走了多远。该员工已登录,现在需要单击"登录"按钮,然后注销。
Home.php
session_start();
include_once 'dbconnect.php';
if(!isset($_SESSION['user']))
{
header("Location: index.php");
}
$res=mysql_query("SELECT users.*, employees.* FROM users NATURAL JOIN employees WHERE user_id=".$_SESSION['user']);
$userRow=mysql_fetch_array($res);
?>
<!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">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../favicon.ico">
<title>Welcome - <?php echo $userRow['username']; ?></title>
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="jumbotron-narrow.css" rel="stylesheet">
<!-- debug and js -->
<script src="../assets/js/ie-emulation-modes-warning.js"></script>
<!-- CSS FOR MY CALENDAR -->
<link href="../../dist/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="//arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.css" rel="stylesheet" />
<link href="http://arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.print.css" rel="stylesheet" />
<link href="kalenda.css" rel="stylesheet">
<!-- SCRIPTS FOR MY CALENDAR -->
<script class="cssdesk" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script class="cssdesk" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>
<script class="cssdesk" src="netd-bostpdn.js" type="text/javascript"></script>
<script class="cssdesk" src="//arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.min.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="header clearfix">
<nav>
<ul class="nav nav-pills pull-right">
<li role="presentation"><a href="logout.php?logout">Log Out</a></li>
</ul>
</nav>
<h2 class="text-muted">Hi, <?php echo $userRow['last_name'];?> | Employee No: <?php echo $userRow['emp_no'];?></h2>
</div>
<div class="jumbotron">
<h2>Please time stamp</h2>
<div class="container">
<div id='calendar'></div>
</div>
</div>
<br>
<tr>
<td>
<center>
<p>
<form>
<input type="button" class="btn btn-lg btn-success" value="Clock In" id="my-button">
</form>
</p>
</center>
</td>
</tr>
<!-- Javascript -->
<script>
$(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true
});
});
$('#my-button').click(function() {
var moment = $('#calendar').fullCalendar('getDate');
var dateObj = new Date(moment) /* Or empty, for today */
dateIntNTZ = dateObj.getTime() - dateObj.getTimezoneOffset() * 60 * 1000;
dateObjNTZ = new Date(dateIntNTZ);
var nd = dateObjNTZ.toISOString().slice(0, 19);
$.ajax({
url: 'clockin.php',
data: { inDate: nd.replace('T', ' ')},
type: 'post',
success: function(data) {
alert(data);
},
error: function(data) {
alert("Error.");
}
});
})
</script>
</div>
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
clockin.php
session_start();
/* connect to DB */
include_once 'dbconnect.php';
$indate = mysql_real_escape_string($_POST['inDate']);
$intime = date('H:i:s');
$clock_id = NULL;
$clock_in = $indate." ".$intime;
$timestamp_in = $indate." ".$intime;
$user_id = $_SESSION['user'];
$res2 = mysql_query("INSERT INTO `employees`.`emp_log` (`clock_id`, `clock_in`, `timestamp_in`, `user_id`) VALUES ($clock_id, '$clock_in', '$timestamp_in', '$user_id')");
if($res2)
echo "User in time entry successfully made.";
else
echo "Error inserting entry data";
为了不刷新页面,您需要使用AJAX。尝试以下代码
home.php应包含以下代码
<?php
session_start();
include_once 'dbconnect.php';
if(!isset($_SESSION['user']))
{
header("Location: index.php");
}
$res=mysql_query("SELECT users.*, employees.* FROM users NATURAL JOIN employees WHERE user_id=".$_SESSION['user']);
$userRow=mysql_fetch_array($res);
?>
<!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">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../favicon.ico">
<title>Welcome - <?php echo $userRow['username']; ?></title>
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="jumbotron-narrow.css" rel="stylesheet">
<!-- debug and js -->
<script src="../assets/js/ie-emulation-modes-warning.js"></script>
<!-- CSS FOR MY CALENDAR -->
<link href="../../dist/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="//arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.css" rel="stylesheet" />
<link href="http://arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.print.css" rel="stylesheet" />
<link href="kalenda.css" rel="stylesheet">
<!-- SCRIPTS FOR MY CALENDAR -->
<script class="cssdesk" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script class="cssdesk" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>
<script class="cssdesk" src="netd-bostpdn.js" type="text/javascript"></script>
<script class="cssdesk" src="//arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.min.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="header clearfix">
<nav>
<ul class="nav nav-pills pull-right">
<li role="presentation"><a href="logout.php?logout">Log Out</a></li>
</ul>
</nav>
<h2 class="text-muted">Hi, <?php echo $userRow['last_name'];?> | Employee No: <?php echo $userRow['emp_no'];?></h2>
</div>
<div class="jumbotron">
<h2>Please time stamp</h2>
<div class="container">
<div id='calendar'></div>
</div>
</div>
<br>
<tr>
<td>
<center>
<p>
<form>
<input type="button" class="btn btn-lg btn-success" value="Clock In" id="my-button">
</form>
</p>
</center>
</td>
</tr>
<!-- Javascript -->
<script>
$(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true
});
});
// add button click code here
$('#my-button').click(function() {
var moment = $('#calendar').fullCalendar('getDate');
var dateObj = new Date(moment) /* Or empty, for today */
dateIntNTZ = dateObj.getTime() - dateObj.getTimezoneOffset() * 60 * 1000;
dateObjNTZ = new Date(dateIntNTZ);
var nd = dateObjNTZ.toISOString().slice(0, 19);
$.ajax({
url: 'clockin.php',
data: { inDate: nd.replace('T', ' ')},
type: 'post',
success: function(data) {
alert(data);
},
error: function(data) {
alert("Error.");
}
});
});
</script>
</div>
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
clockin.php页面应包含以下代码
session_start();
/* connect to DB */
include_once 'dbconnect.php';
if(isset($_POST['inDate']))
{
$indate = mysql_real_escape_string($_POST['inDate']);
$clock_id = NULL;
$clock_in = $indate;
$timestamp_in = $indate;
$user_id = $_SESSION['user'];
$res2 = mysql_query("INSER INTO emp_log (`clock_id`, `clock_in`, `timestamp_in`, `user_id`)
VALUES($clock_id, '$clock-in', '$timestamp-in', '$user_id')");
if($res2)
echo "User in time entry successfully made.";
else
echo "Error inserting entry data: ".mysql_error();
}
else
echo "No date received.";
您的"打卡"按钮的HTML代码段应该如下所示:
<form>
<input type="button" class="btn btn-lg btn-success" value="Clock In" id="my-button">
</form>
IMP注意:mysql_*
函数已弃用。停止使用它们。请改用mysqli或PDO。
编辑:
从fullcalendar
,我们获得以下格式的选定日期(在var moment
中)
2015年11月24日星期二12:47:07 GMT+0530(印度标准时间)
因此,我们将把它转换成所需的格式如下:
var dateObj = new Date(moment) /* Or empty, for today */
dateIntNTZ = dateObj.getTime() - dateObj.getTimezoneOffset() * 60 * 1000;
dateObjNTZ = new Date(dateIntNTZ);
var nd = dateObjNTZ.toISOString().slice(0, 19);
现在,nd.replace('T', ' ')
将像一样给我们日期时间
2015-11-24 12:50:51
因此,在clockin.php中,您可以直接使用变量$_POST['inDate']
。
请参阅更新后的代码。
这就是它现在在hompe.php 中的样子
$('#my-button').click(function() {
var moment = $('#calendar').fullCalendar('getDate');
var dateObj = new Date(moment) /* Or empty, for today */
dateIntNTZ = dateObj.getTime() - dateObj.getTimezoneOffset() * 60 * 1000;
dateObjNTZ = new Date(dateIntNTZ);
var nd = dateObjNTZ.toISOString().slice(0, 19);
$.ajax({
url: 'clickin.php',
data: { inDate: nd.replace('T', ' ')},
type: 'post',
success: function(data) {
alert(data);
},
error: function(data) {
alert("Error.");
}
});
})
clockin.php现在看起来像这样
<?php
session_start();
/* connect to DB */
include_once 'dbconnect.php';
$indate = mysql_real_escape_string($_POST['inDate']);
$intime = date('H:i:s');
$clock_id = NULL;
$clock_in = $indate." ".$intime;
$timestamp_in = $indate." ".$intime;
$user_id = $_SESSION['user'];
$res2 = mysql_query("INSERT INTO emp_log (`clock_id`, `clock-in`, `timestamp-in`, `user_id`) VALUES ($clock_id, '$clock-in', '$timestamp-in', '$user_id')");
if($res2)
echo "User in time entry successfully made.";
else
echo "Error inserting entry data";
?>