我需要将员工进出的日期和时间插入mysql数据库


I need to insert the date and time of employee stamp in and out into mysql database

我需要让员工打卡和下班,所以我有一个名为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'];?>&nbsp; | 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";
JQuery fullCalendar附带了一个函数getDate(),该函数返回日历当前日期的Moment。

为了不刷新页面,您需要使用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'];?>&nbsp; | 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";
?>