Timesheet

MySQL database
#1

I am trying to add a clock in/clock out function to my database project. I currently have a main form that the employee is directed to upon login. What I would like to accomplish is the ability to insert int the database when the employee clicks the “Clock In” button. (I will need AJAX for this as well, as I don’t want to refresh the page.)

Here is the clock in/clock out area that I am working on:

<table>
<tr><td><name="Date"><script> document.write(new Date().toDateString()); </script></td>
<td width="120"></td><td><input type='button' value='Clock In' onclick='STime()'></td>
<td><input type='hidden' id='ST'><input type='text' name='ArrivalTime' id='Start' style='background: black; color: white; border:0;'></td></tr>
<tr><td colspan="2"></td><td><input type='button' value='Clock Out' onclick='TotalTime()'></td>
<td><input type='hidden' id='ED'><input type='text' name='EndTime' id='End' style='background: black; color: white; border: 0;'></td></tr>
<tr><td colspan="2"></td><td>Daily Time:</td><td><input type='hidden' id='JT'><input type='text' name='ElapsedTime' id= 'JTime' style='background: black; color: white; border:0;'></td></tr>
</table>

I am using a javascript time calculation to calculate the total time that I am also using on a separate page. I am wondering if there is a way to include the insert into inside the javascript function.

<script type='text/javascript'>
function STime() {
  var d = new Date();
  var n = d.getTime();
  var v = d.toLocaleTimeString();
  document.getElementById("ST").value = n;
  document.getElementById("Start").value = v;
}

function ETime() {
  var d = new Date();
  var n = d.getTime();
  var v = d.toLocaleTimeString();
  document.getElementById("ED").value = n;
  document.getElementById("End").value = v; 
}

function JobTime() {
 var StartTime = document.getElementById("ST").value;
 var EndTime = document.getElementById("ED").value;
 var difference = EndTime-StartTime;
 var milliseconds = parseInt((difference % 1000) / 100);
 var seconds = Math.floor((difference / 1000) % 60);
 var minutes = Math.floor((difference / (1000 * 60)) % 60);
 var hours = Math.floor((difference / (1000 * 60 * 60)) % 24);

  hours = (hours < 10) ? "0" + hours : hours;
  minutes = (minutes < 10) ? "0" + minutes : minutes;
  seconds = (seconds < 10) ? "0" + seconds : seconds;

  var Total =  hours + ":" + minutes;
 
  document.getElementById("JTime").value = Total;
}

function TotalTime() {
 ETime();
 JobTime();
}

</script>
#2

Not very clear what you mean by “insert into”…

If a page is loaded and uses PHP and MySQL for the data storage, you can insert data from them into the JS on the page. That is easy to do. If you want to insert into the MySQL database data from a page, you either need to post the page and use PHP (which you stated you did not want to do) OR call AJAX from the JS and have it call a PHP script to insert the data you can pass to it from the page.

One thing to keep in mind is that any data passed to a PHP file from JS can be easily faked or hacked to send commands to erase your database. You need to encode it and validate it before you process or store the data.

Also, remember that your server time is NOT the browser’s time. A local machine can be in a different time zone. You need to adjust for that, too.

Not sure if this helps, but, perhaps you can elaborate on what you want…

#3

Yes, I am looking for an AJAX call to insert the time start into the database. Basically, when the user clicks the “Clock In” button, it displays the time to the right, but in addition to displaying the time, I would like the time to be inserted into a database upon click.

How do I adjust for time zone difference? I though the toLocaleTime function did that? Or does that just call the server time? I have noticed that the server time isn’t the same as my actual time here… there is a three hour difference.

I hope this helps to clarify what I am looking for.

#4

Well, there are several things to understand for this “simple” process. First, the time zone.
In PHP, you can set the server’s default to your area using something like this:
date_default_timezone_set('America/Los_Angeles');
Of course, you need to use your area’s text name for the time zone. Here is a link to a list of them…
https://www.php.net/manual/en/timezones.php

Next, for the Ajax call, you can do this in JS in many different ways. You can post to a PHP page or use
GET. You can actually use CURL or other code. I looked around for a simple example. I found a nice one
that might fit very well for your uses. Basically, it uses Jquery and Ajax and tie them to one button. When
the button is pressed, it sends the data to a PHP file and that file stores the data into the database. This
link will show you how to do it instead of repeating it all here. Once you get some test code, you can
show us if you need further help. Insert data using Ajax If you do not understand that, I can write a test
page for you.

#5

OK, I tried the example that you provided. Now when I click the Clock In button, it does nothing at all.

<table>
<tr><td><form name="ClockIn" id="InTime" method="Post"><name="Date" id="Date"><script>document.write(new Date().toDateString()); </script></td>
<td width="120"></td><td><input type='button' value='Clock In' name="In" class="btn btn-primary" id="In"></td>
<td><input type='hidden' id='ST'><input type='text' name='ArrivalTime' id='Start' style='background: black; color: white; border:0;'></td></tr><tr><td colspan="2"></form></td>
<td><input type='button' value='Clock Out' onclick='TotalTime()'></td>
<td><input type='hidden' id='ED'><input type='text' name='EndTime' id='End' style='background: black; color: white; border: 0;'></td></tr>
<tr><td colspan="2"></td><td>Daily Time:</td><td><input type='hidden' id='JT'><input type='text' name='ElapsedTime' id= 'JTime' style='background: black; color: white; border:0;'></td></tr>
</table>
<script>
$(document).ready(function() {
	$('#In').on('click', function() {
		$("#In").attr("disabled", "disabled");
		var EmpID = $user;
		var Date = $('#Date').val();
		var  TimeIn= $('#Start').val();
		if(EmpID!="" && Date!="" && TimeIn!=""){
			$.ajax({
				url: "ClockIn.php",
				type: "POST",
				data: {
					EmpID: EmpID,
					Date: Date,
					TimeIn: TimeIn,
				},
				cache: false,
				success: function(dataResult){
					var dataResult = JSON.parse(dataResult);
					if(dataResult.statusCode==200){
						$("#In").removeAttr("disabled");
						$('#InTime').find('input:text').val('');
						$("#success").show();
						$('#success').html('Data added successfully !'); 						
					}
					else if(dataResult.statusCode==201){
					   alert("Error occured !");
					}
					
				}
			});
		}
		else{
			alert('Please fill all the field !');
		}
	});
});
</script>

And here is the database PhP file:

<?php
	include 'connect.php';
	$EmpID=$_POST['EmpID'];
	$Date=$_POST['Date'];
	$TimeIn=$_POST['TimeIn'];
	$sql = "INSERT INTO `Time Card`( `EmpID`, `Date`, `TimeIn`) 
	VALUES ('$EmpID','$Date','$TimeIn')";
	if (mysqli_query($conn, $sql)) {
		echo json_encode(array("statusCode"=>200));
	} 
	else {
		echo json_encode(array("statusCode"=>201));
	}
	mysqli_close($conn);
?>

What did I do wrong?

#6

Well, without seeing the rest, it is hard to help you. First, did you put in the Jquery and Ajax links???
( The call to Jquery either to your version saved on the server or to the global one. )
Without them, the libraries will not work at all. Also, how have you debugged it so far? To test the button,
you can insert an “alert” into the code to see if you are getting to your routine. Have the alert show the values
you are passing to it to make sure the data is getting to that point.

Try degugging it and let us know how it goes.

Sponsor our Newsletter | Privacy Policy | Terms of Service