Pada artikel kali ini, saya akan memaparkan bagaimana cara membuat script PHP untuk menampilkan countdown (hitungan mundur) menuju tanggal dan waktu tertentu dengan memanfaatkan AJAX.
Untuk memberikan gambaran hasil akhir scriptnya, silakan buka
http://rosihanari.net/countdown.php. Script countdown tersebut menampilkan hitungan mundur dalam satuan
a hari,
b jam,
c menit, dan
d detik menuju tahun baru 1 Januari 2011, pukul 00:00 WIB waktu server.
Mungkin Anda berpikir, mengapa menggunakan AJAX? ya… kelebihan AJAX adalah kita dapat menjalankan suatu script yang ada di server tanpa melakukan refresh via browser. Namun… kelemahan script AJAX adalah membutuhkan speed koneksi yang cukup lumayan cepat. Karena jika koneksinya lemot, akan terjadi delay.
OK… pertama kita akan membuat script untuk menampilkan atau menghitung waktu selisih antara waktu sekarang (current time) dengan waktu yang kita tentukan (dalam contoh ini adalah 1 Januari 2011 pukul 00:00 WIB waktu server). Selisih waktu yang akan kita tampilkan atau dicari ini dalam satuan
a hari,
b jam,
c menit, dan
d detik. Apabila kita melakukan refresh browser secara manual setiap detik maka akan tampak seperti count down setiap detiknya. Namun… dalam hal ini nantinya kita tidak perlu melakukan refresh browser secara manual, melainkan memanfaatkan script AJAX yang diatur refresh time nya setiap 1000 milisecond (1 detik).
Ide untuk mencari selisih antara current time dengan 1 Januari 2011 pukul 00:00 WIB adalah menggunakan function
mktime(). Dengan
mktime() ini, kita bisa dapatkan selisih waktu keduanya dalam satuan detik. Function
mktime() adalah function yang menghasilkan suatu bilangan integer yang merupakan banyaknya selisih waktu dalam satuan detik antara 1 Januari 1970 00:00:00 GMT dengan waktu yang ditentukan.
Berikut ini adalah cara penggunaan perintah mktime() untuk mendapatkan jumlah detik antara 1 Januari 1970 00:00:00 GMT dengan tanggal
x, bulan
y, tahun
z pada pukul
m:
n:
o waktu server.
1.mktime(m, n, o, y, x, z);
Dengan demikian mendapatkan
mktime() pada tanggal 1 Januari 2011 pukul 00:00:00 WIB adalah:
1.mktime(0, 0, 0, 1, 1, 2011);
sedangkan cara mencari
mktime() untuk current time adalah:
1.mktime(date("H"), date("i"), date("s"), date("m"), date("d"), date("Y"));
dimana
date("H") untuk mendapatkan jam saat ini,
date("i") untuk mendapatkan menit saat ini,
date("s") untuk mendapatkan detik saat ini, serta
date("m"),
date("d"), dan
date("Y") berturut-turut untuk mendapatkan bulan, tanggal dan tahun saat ini.
Selanjutnya untuk mendapatkan selisih jumlah detik antara current time dengan 1 Januari 2011 00:00:00 cukup mengurangi saja hasil
mktime() keduanya. Setelah didapatkan jumlah detik selisih antara kedua waktu tersebut, barulah kita proses untuk dinyatakan dalam
a hari,
b jam,
c menit, dan
d detik.
Berikut ini adalah script untuk mencari selisih waktu antara current time dengan 1 Januari 2011 00:00:00 dalam satuan
a hari,
b jam,
c menit, dan
d detik.
date.php
01.<?php
02.
03.
04.date_default_timezone_set("Asia/Jakarta");
05.
06.
07.$selisih1 = mktime(0, 0, 0, 1, 1, 2011);
08.
09.
10.$selisih2 = mktime(date("H"), date("i"), date("s"), date("m"), date("d"), date("Y"));
11.
12.
13.$delta = $selisih1 - $selisih2;
14.
15.
16.$a = floor($delta / 86400);
17.
18.
19.$sisa = $delta % 86400;
20.$b = floor($sisa / 3600);
21.
22.
23.$sisa = $sisa % 3600;
24.$c = floor($sisa / 60);
25.
26.
27.$sisa = $sisa % 60;
28.$d = floor($sisa / 1);
29.
30.echo "Waktu saat ini: ".date("d-m-Y H:i:s")."<br>";
31.echo "Masih: ".$a." hari ".$b." jam ".$c." menit ".$d." detik lagi, menuju tahun baru 1 Januari 2011";
32.
33.?>
Pada script di atas, saya menggunakan timezone Asia/Jakarta. Adapun alasannya, silakan baca artikel saya tentang
penggunaan timezone.
Barangkali ada yang masih bingung untuk proses menyatakan jumlah detik ke dalam berapa hari? Dalam 1 jam terdapat 60 menit = 3600 detik. Sehingga dalam 1 hari ada 24 x 3600 = 86400 detik. Sehingga untuk menyatakan jumlah detik ke dalam hari, jumlah detik dibagi dengan 86400. Function
floor() digunakan untuk pembulatan ke bawah, sehingga hasil pembagiannya diperoleh hasil bulat. Sisa pembagiannya (modulo atau %) digunakan untuk perhitungan dalam satuan jam. Demikian seterusnya…
Contoh perhitungan, misal selisih detik current time dengan tanggal 1 Januari 2011 00:00:00 adalah 123456. Maka untuk menyatakan 123456 detik ini ke dalam
a hari,
b jam,
c menit, dan
d detik, caranya:
01.a = floor(123456/86400) = 1 (hari)
02.-----------------------------------------
03.$sisa = 123456 % 86400 = 37056 (detik)
04.b = floor(37056/3600) = 10 (jam)
05.-----------------------------------------
06.sisa = 37056 % 3600 = 1056 (detik)
07.c = floor(1056/60) = 17 (menit)
08.-----------------------------------------
09.sisa = 1056 % 60 = 36 (detik)
10.d = floor(1056/1) = 36 (detik)
yang akan menghasilkan 1 hari, 10 jam, 17 menit, dan 36 detik.
OK… saya harap penjelasan di atas cukup jelas ya… Jika belum jelas, coba pahami dan resapi logikanya
Jika Anda refresh script di atas via browser, maka akan tampak perubahan selisih waktunya.
Selanjutnya kita jalankan script di atas menggunakan AJAX supaya dapat melakukan refresh otomatis setiap 1 detik secara asynchronous tanpa via browser.
Ini dia scriptnya:
countdown.php
01.<html>
02.<head>
03.<script type="text/javascript">
04.
05.function ajax()
06.{
07.if (window.XMLHttpRequest)
08.{
09.
10.xmlhttp=new XMLHttpRequest();
11.}
12.else
13.{
14.
15.xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
16.}
17.
18.xmlhttp.onreadystatechange=function()
19.{
20.if (xmlhttp.readyState==4 && xmlhttp.status==200)
21.{
22.
23.document.getElementById("hasil").innerHTML = xmlhttp.responseText;
24.}
25.}
26.
27.
28.xmlhttp.open("GET","date.php", true);
29.xmlhttp.send();
30.
31.
32.setTimeout("ajax()", 1000);
33.}
34.</script>
35.</head>
36.
37.<body onload="ajax()">
38.
39.<div id="hasil">
40.</div>
41.
42.</body>
43.</html>
Bagaimana cara membuatnya? mudah bukan? selamat mencoba dan bereksperimen sendiri ya…
