我需要将员工印章的日期和时间插入到mysql数据库中[关闭]答案

【问题标题】：I need to insert the date and time of employee stamp in and out into mysql database [closed]我需要将员工印章的日期和时间插入到mysql数据库中[关闭]
【发布时间】：2015-11-24 04:22:21
【问题描述】：

我需要让员工打卡和打卡，所以我有一个名为 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";

【问题讨论】：

到目前为止你做了什么？发布您的代码
@MickeyUlasi - 编辑您的问题并将其包含在其中。它作为 cmets 是不可读的。
嗨 Suyog 和 Andrewsi，你能帮忙吗？谢谢
ajax代码是否应该在clockin.php中
不，应该在home.php中

标签： javascript php mysql ajax

【解决方案1】：

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 sn-p for Clock In 按钮应如下所示：

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

【讨论】：

你能在clockin.php页面上获取值吗？检查 console 是否有 JQuery 错误（如果有），并告诉我 POST 的值 inDate
@MickeyUlasi 检查console 是否有click button not working
@MickeyUlasi 查看更新后的代码.. 它对我有用
嗨 Suyog，我收到警报错误
表示它正在警告为“错误”。 ?