Let’s say you have a MySQL table with the columns “id” “name” and “present”, where “id” is a unique identifier, “name” is the student’s name and “present” is 1 or 0.
You output this data with a simple PHP loop when the page is first loaded, and every 30 seconds:
$res = mysqli_query($link, 'SELECT * FROM register');
echo "<ul>\
";
while ($row = mysqli_fetch_array($res)) {
echo '<li id="student_' . $row['id'] . '"';
if ($row['present'] === 1) echo ' class="present"';
echo '>' . $row['name'] . "</li>\
";
}
In the CSS you can style the list items red by default, and style .present green.
Now, let’s suppose someone clicks one of your list items. You catch the click and submit your XMLHttpRequest by POST, passing the id. It doesn’t matter whether the page currently shows the student as present or not, you’re just toggling between present and absent, and the database is what controls this. Your PHP script processes it:
$id = array_pop(explode('_', $_POST['id']));
if (is_numeric($id)) { // check it's a number
$res = mysqli_query($link, "UPDATE register SET present= IF(present=1, 0, 1) WHERE id=$id");
echo (int)(mysqli_affected_rows($link) > 0); // success with query
}
The echo will give either 0 (that means for some reason the table was not updated) or 1 (the table was updated) in which case you change the colour of the LI in question.
30 seconds later, of course, the entire page will be refreshed with the contents of the database.
Now you just need to write the javascript for it. It should be very easy with jQuery if you want to go via that route, or it’s simple enough without it too.
In my example I used is_numeric to sanitise the POSTed data, but depending on what you have, you might want to do something else. But you must check you’re getting the expected input.