The next step is to make the back end actually write some data to a database using PHP and MySQL. This is the UpdateStartTime.php file. The startSliceAjax function that communicates with this PHP is shown below, just slightly modified from yesterday’s version.
The PHP simply inserts the sent information into the database. Each ToDoSlice item has an index indicating the unique ID of the To Do item with which it is associated but not a unique ID of its own. When writing the start time of a new slice this isn’t a problem because the slice item is being created anew and doesn’t have to match anything.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?php include('SQLFunctions.php'); if (!empty($_GET)) { $tdRecordToDoID = $_GET['ToDoIDx']; $tdNote = $_GET['Notex']; $tdStartTime = date('Y-m-d H:i:s', time()); $link = connectDB(); $sql = "insert into ToDoSlices (recordToDoID, startTime, Note) values (".$tdRecordToDoID.",'".$tdStartTime."','".$tdNote."');"; if (mysqli_query($link, $sql)) { echo $tdStartTime; } else { echo "Error: ".$sql."<br>".mysqli_error($link); } mysqli_close( $link ); } ?> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
echo " function startSliceAjax() {"; echo " var xmlhttp = new XMLHttpRequest();"; echo " var handle = document.getElementById('startButton');"; echo " var parentHandle = handle.parentNode;"; echo " xmlhttp.onreadystatechange = function() {"; echo " if (this.readyState == 4) {"; echo " if (this.status == 200) {"; echo " if (this.responseText.search('Error: ') < 0) {"; echo " parentHandle.innerHTML = this.responseText;"; echo " startSliceTime = new Date(this.responseText);"; echo " parentHandle.nextElementSibling.innerHTML = `<button type='button' id='endButton' onmouseup='endSliceAjax()'>End</button>`;"; echo " sliceIndex = parentHandle.previousElementSibling.innerHTML;"; echo " } else {"; echo " alert(this.responseText);"; echo " }"; echo " } else {"; echo " alert('AJAX error encountered');"; echo " }"; echo " }"; echo " };"; echo " var noteHandle = document.getElementById('nextSliceNoteID');"; echo " var noteValue = noteHandle.value;"; echo " xmlhttp.open('GET','UpdateStartTime.php?ToDoIDx='+$ToDoID+'&Notex='+noteValue, true);"; echo " xmlhttp.send();"; echo " }"; |
We’re receiving the echoed text from the PHP and displaying it based on what data it contains.