28 May 2017

Membuat Timer Jquery Countdown dan Session PHP

Assalamualaikum, dihari ke 3 Bulan Ramdhan tahun ini, saya ingin membahas tentang bagaimana caranya membuat timer menggunakan bantuan Jquery Countdown dan Pemrograman PHP untuk menyimpan nilai waktunya kedalam Session.

Ceritanya beberapa waktu lalu, saya membantu seorang teman membuat sebuah aplikasi Ujian berbasis Web untuk diterapkan disekolahnya atau lebih tepatnya CBT (Computer Based Test). Ide awalnya adalah membuat sebuah sistem yang mirip dengan CBT versi Ujian Nasional yang baru saja selesai dilaksanakan di sekolah-sekolah.

Karena namanya ujian berbasis komputer (Computer Based Test) maka sudah tentu untuk penentuan waktunya pun harus dibuat menggunakan sistem secara otomatis. Cara kerjanya saat Tombol ujian diklik maka Timer akan mulai menghitung mundur (Countdown) sesuai dengan waktu yang ditentukan oleh Guru atau admin sistem. Waktu tersebut akan tersimpan kedalam Session menggunakan PHP agar walaupun halaman di refresh waktu akan terus tersimpan dan terus berjalan karena nilai waktunya sudah disimpan kedalam SESSION
Membuat Timer Jquery Countdown dan Session PHP

Atas dasar tersebutlah maka saya mencoba membuat beberapa model timer yang salah satunya adalah timer menggunakan Plugin Jquery Countdown ini.

Untuk mulai membuatnya silahkan Download Package Plugin melalui situs Resminya  yaitu Keith-Wood atau klik Link disamping ini (Download Jquery Countdown).


  • Setelah di Download, Extract file Zip tersebut. Didalamnya anda akan menemukan sebuah File index.html dan 3 buah Folder yaitu CSS, IMG dan Folder JS
    Membuat Timer Jquery Countdown dan Session PHP
  • Pindahkan semuanya Folder utama kedalam Folder webserver anda karena kita akan menggunakan PHP nantinya
  • Hapus File Index.html lalu buatlah file baru dan beri nama index.php lalu isikan Script dibawah ini kedalamnya

Simpan File tersebut lalu coba akses menggunakan browser untuk melihat hasilnya

Sekilas tentang Code

  1. Baris no 2 hingga nomor 8 adalah perintah PHP untuk membuat session 
  2. baris Nomor 10,11 dan 12 adalah perintah HTML untuk memanggil jquery countdown
  3. Pada baris 13-14 adalah baris perintah untuk menampilkan timernya
  4. Baris 17-21 adalah fungsi ketika waktu telah sampai pada detik ke 0. pada contoh kali ini saya membuat pesan dalam alert, setelah itu otomatis melakukan submit data pada form yang memiliki id frmSoal
  5. Baris ke 28 adalah Perintah untuk memasukan nilai detik kedalam Variabel waktu, dalam hal ini nilainya adalah 180 (3 Menit).

Sekian dulu pembahasan singkat tentang timer jquery Countdown menggunakan Session PHP kali ini. 
Wassalam



7 komentar

This comment has been removed by the author.

Mas kok punya saya gak bisa timernya gak jalan?

artikelnya mantap gan. ini yg ane cari2

Gan,kalau bikin timer website tidak bisa diakses sebelum waktunya bagaimana ya?

Buat diterapkan di website pengumuman kelulusan.

Klo itu sih simple aja gan
cukup bikin halaman baru berupa Notifikasi countdown, trus nilai dari countdown di ekseskusi pke php, bisa manual atau otomatis

frmsoal itu id gmna maksdnya kawan?


EmoticonEmoticon