7/23/2019 Membuat Countdown Menuju Tanggal Dan Waktu Tertentu Dengan AJAX

1/4

Membuat Countdown Menuju Tanggal dan Waktu Tertentu Dengan

AJAX

Posted By rosihanari On June 21, 2010 @ 8:02 am In PHP |10 Comments

Pada artikel kali ini, saya akan memaparkan bagaimana cara membuat script PHP untuk

menampilkan countdown (hitungan mundur) menuju tanggal dan waktu tertentu denganmemanfaatkan AJAX.

Untuk memberikan gambaran hasil akhir scriptnya, silakanbukahttp://rosihanari.net/countdown.php[1]. Script countdown tersebut menampilkan hitunganmundur dalam satuan a hari, b jam, cmenit, dan ddetik menuju tahun baru 1 Januari 2011, pukul00:00 WIB waktu server.

Mungkin Anda berpikir, mengapa menggunakan AJAX? ya kelebihan AJAX adalah kita dapatmenjalankan suatu script yang ada di server tanpa melakukan refresh via browser. Namunkelemahan script AJAX adalah membutuhkan speed koneksi yang cukup lumayan cepat. Karenajika koneksinya lemot, akan terjadi delay.

OK pertama kita akan membuat script untuk menampilkan atau menghitung waktu selisih antarawaktu sekarang (current time) dengan waktu yang kita tentukan (dalam contoh ini adalah 1Januari 2011 pukul 00:00 WIB waktu server). Selisih waktu yang akan kita tampilkan atau dicariini dalam satuan a hari, b jam, cmenit, dan ddetik. Apabila kita melakukan refresh browsersecara manual setiap detik maka akan tampak seperti count down setiap detiknya. Namun dalam

hal ini nantinya kita tidak perlu melakukan refresh browser secara manual, melainkanmemanfaatkan 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 Januari1970 00:00:00 GMT dengan waktu yang ditentukan.

Berikut ini adalah cara penggunaan perintah mktime() untuk mendapatkan jumlah detik antara 1Januari 1970 00:00:00 GMT dengan tanggal x, bulan y, tahun zpada pukulm:n:o waktu server.

mktime(m, n, o, y, x, z);

Dengan demikian mendapatkan mktime() pada tanggal 1 Januari 2011 pukul 00:00:00 WIBadalah:

mktime(0, 0, 0, 1, 1, 2011);

sedangkan cara mencari mktime() untuk current time adalah:

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 dinyatakandalam a hari, b jam, cmenit, dan ddetik.

Berikut ini adalah script untuk mencari selisih waktu antara current time dengan 1 Januari 201100:00:00 dalam satuan a hari, b jam, cmenit, dan ddetik.

http://blog.rosihanari.net/membuat-countdown-menuju-tanggal-dan-waktu-tertentu-dengan-ajax/print/#comments_controlshttp://blog.rosihanari.net/membuat-countdown-menuju-tanggal-dan-waktu-tertentu-dengan-ajax/print/#comments_controlshttp://blog.rosihanari.net/membuat-countdown-menuju-tanggal-dan-waktu-tertentu-dengan-ajax/print/#comments_controlshttp://rosihanari.net/countdown.phphttp://rosihanari.net/countdown.phphttp://rosihanari.net/countdown.phphttp://rosihanari.net/countdown.phphttp://blog.rosihanari.net/membuat-countdown-menuju-tanggal-dan-waktu-tertentu-dengan-ajax/print/#comments_controls

7/23/2019 Membuat Countdown Menuju Tanggal Dan Waktu Tertentu Dengan AJAX

2/4

date.php

Pada script di atas, saya menggunakan timezone Asia/Jakarta. Adapun alasannya, silakan bacaartikel saya tentangpenggunaan timezone[2].

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 = 86400detik. 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 dalamsatuan jam. Demikian seterusnya

Contoh perhitungan, misal selisih detik current time dengan tanggal 1 Januari 2011 00:00:00adalah 123456. Maka untuk menyatakan 123456 detik ini ke dalam a hari, b jam,cmenit,dan ddetik, caranya:

a = floor(123456/86400) = 1 (hari)-----------------------------------------$sisa = 123456 % 86400 = 37056 (detik)b = floor(37056/3600) = 10 (jam)-----------------------------------------sisa = 37056 % 3600 = 1056 (detik)

c = floor(1056/60) = 17 (menit)-----------------------------------------

http://blog.rosihanari.net/keanehan-penggunaan-function-date-di-php-dan-solusinyahttp://blog.rosihanari.net/keanehan-penggunaan-function-date-di-php-dan-solusinyahttp://blog.rosihanari.net/keanehan-penggunaan-function-date-di-php-dan-solusinyahttp://blog.rosihanari.net/keanehan-penggunaan-function-date-di-php-dan-solusinya

7/23/2019 Membuat Countdown Menuju Tanggal Dan Waktu Tertentu Dengan AJAX

3/4

sisa = 1056 % 60 = 36 (detik)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 refreshotomatis setiap 1 detik secara asynchronous tanpa via browser.

Ini dia scriptnya:

countdown.php

function ajax(){

if (window.XMLHttpRequest){

// untuk IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();

}else{

// untuk IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}

xmlhttp.onreadystatechange=function(){

if (xmlhttp.readyState==4 && xmlhttp.status==200){

// hasil pembacaan script date.php akan ditampilkan di komponenid="hasil"

document.getElementById("hasil").innerHTML =xmlhttp.responseText;

}}

// menjalankan script date.php secara asynchronousxmlhttp.open("GET","date.php", true);xmlhttp.send();

// refresh time 1 detik (1000 ms)setTimeout("ajax()", 1000);

}

7/23/2019 Membuat Countdown Menuju Tanggal Dan Waktu Tertentu Dengan AJAX

4/4

Bagaimana cara membuatnya? mudah bukan? selamat mencoba dan bereksperimen sendiri ya