I understood what exactly you wanted as I have also been through such challenges in the early stage of my learning career. Thus I have prepared a complete page just for you. Here it is. Feel free to ask for any further help.
<?php
$students = array("Student1", "Student2", "Student3", "Student4");
if ($_POST) {
$response = array();
$response["success"] = FALSE;
$name = (isset($_POST["name"])) ? $_POST["name"] : '--';
$present = (isset($_POST["present"])) ? $_POST["present"] : false;
$marked = ($present=="true") ? "Present" : "Absent";
$content = $name . ": " . $marked . "
";
try {
$file_name = "Records.txt";
file_put_contents($file_name, $content,FILE_APPEND);
$response["success"] = TRUE;
} catch (Exception $exc) {
$response["success"] = FALSE;
$response["message"] = $exc->getMessage();
}
echo json_encode($response);
exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Students Records</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Student Attendance Records</h2>
<p>Maintain students attendance record using this application. Created using Core PHP, HTML, CSS, JavaScript and bootstrap libraries.</p>
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Date</th>
<th>Present/Absent</th>
</tr>
</thead>
<tbody>
<?php foreach ($students as $student) { ?>
<tr>
<td><?php echo $student; ?></td>
<td><?php echo date('d/m/Y'); ?></td>
<td><button type="button" class="btn btn-success" onclick="attendance(this)">Present</button> <button type="button" class="btn btn-danger" onclick="attendance(this)">Absent</button></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</body>
</html>
<script type="text/javascript">
function attendance(obj) {
var name = jQuery(obj).parent().siblings(':first').html();
var present = false;
if (jQuery(obj).hasClass("btn-success")) {
present = true;
}
var marked = (present) ? "Present" : "Absent";
jQuery.ajax({
url: "http://localhost/attendance/index.php",
method: "POST",
type: "JSON",
data: {name: name, present: present},
success: function(data) {
if (data) {
alert(name + " has been marked " + marked);
} else {
alert("There was an error please check Console for more details.")
console.log(data);
}
}
});
}
</script>
