Mungkin seringkali kita bertanya2, bagaimana caranya membuat timer yang realtime pada halaman web kita. Salah satu contoh yang mungkin kita tahu adalah game Mafia Wars dari Facebook. Karena Facebook diakses di seluruh dunia dimana menggunakan zona waktu yang berbeda, maka tidak mungkin kita menggunakan time yang ada di client. Dan timer ini akan tetap tersimpan dalam database server, seandainya terjadi koneksi terputus pada komputer client, padahal client belum sempat logout.
Dari beberapa fakta ini, saya bisa menyimpulkan:
1. Tidak mungkin menggunakan time yang ada di client untuk kebutuhan ini.
2. Database harus selalu terupdate, artinya setiap detik akan terjadi proses pengupdatean data di server. Seandainya terjadi kesalahan pada komputer client, data sudah tersimpan dengan aman di server.
Salah satu teknik yang bisa digunakan untuk kebutuhan tersebut adalah AJAX, karena AJAX memungkinkan terciptanya hubungan ke server tanpa harus reload seluruh halaman. Dan bahkan, user sendiri mungkin tidak akan merasa bahwa sudah terjadi proses update data ke server.
Berikut adalah contoh script timer dengan menggunakan AJAX
<html>
<head>
<title>Ajax Example</title>
<script language=”Javascript”>
function postRequest(strURL) {
var xmlHttp;
if (window.XMLHttpRequest) { // Mozilla, Safari, …
var xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
var xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);
}
xmlHttp.open(‘POST’, strURL, true);
xmlHttp.setRequestHeader(‘Content-Type’,
‘application/x-www-form-urlencoded’);
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
updatepage(xmlHttp.responseText);
}
}
xmlHttp.send(strURL);
}
function updatepage(str){
document.getElementById(“result”).innerHTML =
“<font color=’red’ size=’5′>” + str + “</font>”;;
}
function showCurrentTime(){
var rnd = Math.random();
var detik = document.getElementById(“detik”).value;
var menit = document.getElementById(“menit”).value;
var jam = document.getElementById(“jam”).value;
if (detik<=0) {
detik=59;
document.getElementById(“detik”).value=detik;
if (menit<=0) {
menit=59;
document.getElementById(“menit”).value=menit;
jam=jam-1;
document.getElementById(“jam”).value=jam;
} else {
menit=menit-1;
document.getElementById(“menit”).value=menit;
}
} else {
detik=detik-1;
document.getElementById(“detik”).value=detik;
}
var url=”timer.php?id=”+rnd+”&jam=”+jam+”&menit=”+menit+”&detik=”+detik;
postRequest(url);
timedRefresh(1000);
}
function timedRefresh(timeoutPeriod) {
setTimeout(“showCurrentTime();”,timeoutPeriod);
}
</script>
</head>
<body>
<?php
//remaining time in minutes
$remaining=500;
//convert in hour
$jam=intval($remaining/60);
//convert in minutes
$menit=intval($remaining % 60);
//initial second: 59
$detik=59;
echo “Jam Check In: “. date(“H:i:s”);
echo $jam;
?>
<form name=”f1″>
<p align=”center”>
<input value=”Start” type=”button” onclick=’JavaScript:showCurrentTime()’ name=”startcounter”>
<input value=”<?php echo $jam?>” type=”text” name=”jam” id=”jam” style=”display:none”>
<input value=”<?php echo $menit?>” type=”text” name=”menit” id=”menit” style=”display:none”>
<input value=”<?php echo $detik?>” type=”text” name=”detik” id=”detik” style=”display:none”>
</p>
</form>
<!– tempat AJAX mengupdate halaman web –>
<div id=result></div>
</body>
</html>
dan berikut adalah file PHP yang dipanggil AJAX
<?php
//print date(“H:i:s”);
echo “Waktu tersisa: “.$_GET[‘jam’].” jam “.$_GET[‘menit’].” menit “.$_GET[‘detik’].” detik”;
?>
Jika dijalankan, script diatas akan menghitung mundur dari variabel yang sudah dimasukkan, dalam contoh diatas adalah 500 menit. Kita dapat memodifikasi script ini dengan menambahkan fungsi update database pada file PHPnya, sehingga setiap saat akan terjadi update database. Semoga tulisan ini bisa membantu rekan2 semua.
By: Wahyu Kurniawan