Free Ebook Tutorial from Rosihan Ari's Blog

Tutorial Javascript | Tutorial PHP | Tutorial AJAX | Tutorial CSS | Tutorial FPDF | Tutorial Wordpress | Tutorial Java SE


Ebook yang direkomendasikan untuk Anda
Ebook Panduan Praktis OOP di PHP


Membuat Countdown Menuju Tanggal dan Waktu Tertentu Dengan AJAX


June 21st, 2010 | by rosihanari | Cetak Artikel Cetak Artikel


GampSMS SMS Gateway

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.

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

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

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 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

<?php

// mengatur time zone untuk WIB.
date_default_timezone_set("Asia/Jakarta");

// mencari mktime untuk tanggal 1 Januari 2011 00:00:00 WIB
$selisih1 =  mktime(0, 0, 0, 1, 1, 2011);

// mencari mktime untuk current time
$selisih2 = mktime(date("H"), date("i"), date("s"), date("m"), date("d"), date("Y"));

// mencari selisih detik antara kedua waktu
$delta = $selisih1 - $selisih2;

// proses mencari jumlah hari
$a = floor($delta / 86400);

// proses mencari jumlah jam
$sisa = $delta % 86400;
$b  = floor($sisa / 3600);

// proses mencari jumlah menit
$sisa = $sisa % 3600;
$c = floor($sisa / 60);

// proses mencari jumlah detik
$sisa = $sisa % 60;
$d = floor($sisa / 1);

echo "Waktu saat ini: ".date("d-m-Y H:i:s")."<br>";
echo "Masih: ".$a." hari ".$b." jam ".$c." menit ".$d." detik lagi, menuju tahun baru 1 Januari 2011";

?>

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:

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)
-----------------------------------------
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 refresh otomatis setiap 1 detik secara asynchronous tanpa via browser.

Ini dia scriptnya:

countdown.php

<html>
<head>
  <script type="text/javascript">

  function ajax()
  {
     if (window.XMLHttpRequest)
     {
       // untuk IE7+, Firefox, Chrome, Opera, Safari
       xmlhttp=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 komponen id="hasil"
          document.getElementById("hasil").innerHTML = xmlhttp.responseText;
        }
     }

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

     // refresh time 1 detik (1000 ms)
     setTimeout("ajax()", 1000);
  }
  </script>
</head>

<body onload="ajax()">

<div id="hasil">
</div>

</body>
</html>

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




Share ke Facebook Share ke Twitter
Baca Juga Artikel Terkait
Mengetahui Nama Hari pada Tanggal Tertentu dengan PHP
Mencari Selisih Waktu dan Tanggal dengan SQL
Script PHP untuk Mencari Selisih Waktu dan Tanggal
Menentukan Tanggal n Hari Berikutnya dan n Hari Sebelumnya Dari Tanggal Hari Ini
Menentukan Nama Hari Pasaran Jawa Dari Tanggal Tertentu dengan PHP

Kata kunci: ajax php - ajax script - function date - php script - script countdown - timezone php -


Ada 16 komentar dalam artikel ini.



  1. mashardi says:

    saya biasanya pake php aja tuk nampilkan coutdown, pake ajax kayaknya asyik juga

    mo nanya, klo misalnya jam server berbeda dengan jam sebenarnya.. misalnya beda 20 menit dengan jam wib, gimana cara nyetingnya pak?

  2. andi says:

    mauw nanya pak, pada halaman jquery/ajax, ketika di refresh biar gag kembali k halamn index,itu bisa atau tdak pak….?

  3. Wahyu says:

    pak mau tanya kalau count down yang buat ujian online gmana ya pak…??
    saya belum bisa…

    tolong dibantu ya pak

  4. andi says:

    kenapa anda memanggil file date.php tiap 1 detik ke server hanya utk mengupdate waktu?

    anda ingin membunuh server dan bandwidth anda?

    bukan lebih baik cukup memanggil sekali file date.php kemudian untuk countnya di proses dengan Javascript?

    saya rasa itu lebih manusiawi

    just my 3 cent :)

    • rosihanari says:

      @andi: itu memang ngambil waktu berdasarkan waktu servernya mas, konsep yang sama terjadi pada situs lelang yang didalamnya ada countdown berdasarkan waktu server. kalo berdasarkan waktu client jelas berbeda2.

  5. ilham says:

    mau tanya, kalau membuat script yang bisa menjalankan page secara otomatis gimana y?
    contoh: pada jam 01.00 web page jalan maksudnya script didalamnya dijalankan, bagaimana y?

  6. Edi Imanto says:

    terima kasih banyak mas, ilmunya.
    sangat membantu hehe..

  7. Abdillah says:

    terima kasih banyak atas infonya,mas ari memang programmer the best :)
    oia mas,sebelumnya saya mau tanya,kalo buat countdown timmer untuk iklan bisa nggak mas,misalnya kita pasang iklan di web kita dan dalam waktu 30hari iklan tersebut akan hilang dengan sendirinya bila tidak diperpanjang oleh advertisernya,tu gimana ya mas??

  8. budi says:

    Pak, untuk cara buat artikel terkait pake jquery seperti yang ada di bola.net dan di website bapak ini cara nya gimana ya pak?
    mohon pencerahan ilmu nya pak.
    terima kasih pak Ari.

    • rosihanari says:

      @budi: ada kok mas paparan idenya yang pernah saya tulis di blog ini. Disearch saja: artikel terkait.

  9. muhammad luthfi Anshori says:

    pak itu kalo tanggalnya lewat kenapa hasilnya minus ya kok ndak jadi 0 gt aja ya? terus bisa ndak kalo time nya habis ada effect misal muncul tulisan maaf waktu habis atau button submitnya hidden gt?

  10. Medibatam says:

    Saya lagi nyari koding ajax buat timer untuk ujian online gan. Tutorial agan ini bermanfaat juga buat saya untuk saya kembangkan menjadi kode timer. Tapi kalau agan punya koding siap pakai saya tunggu postingan agan. Nanti saya mampir lagi ke sini…salam

  11. Wawan says:

    Mas saya coba script nya di localhost pake xampp berjalan dengan baik. tapi pas saya coba upload ke hosting web yang pake cpanel ko ga jalan ya. apa ada yg harus di seting. tolong bantuanya. thx

  12. Rudy Hermawan says:

    Makasih Banyak Gan Membantu ane sekali …

    Good Tutorial deh :D



 

Komentar/pertanyaan Anda!

Mohon maaf, komentar/pertanyaan yang menggunakan email palsu atau komentar bernada negatif, cemooh, umpatan, cacian atau sejenisnya secara otomatis akan terhapus karena dianggap spam dan tidak akan tampil

Dimohon jangan pula memasukkan code program dalam bentuk apapun ke dalam komentar karena akan dianggap spam.

Mohon maaf jika seandainya ada beberapa pertanyaan Anda yang tidak direspon atau ditanggapi mengingat banyaknya komentar yang masuk dan keterbatasan kemampuan/ilmu saya dalam menjawab pertanyaan satu persatu. Saya harap Anda bisa memahami dan memakluminya.

Semua komentar atau pertanyaan yg masuk tidak akan langsung tampil di halaman ini, karena akan dimoderasi dahulu.


*