
Membuat Timer dengan PHP dan jQuery Part 1
Timer berfungsi ketika kita membuat sebuah aplikasi ujian online atau semacamnya yang membutuhkan waktu pengerjaan dan lama pengerjaan, serta akan ter-submit secara otomasti jika waktu ujian sudah habis.
Berikut cara membuat timer dengan menggunakan PHP dan jQuery :
<head> <!-- Kita membutuhkan jquery, disini saya menggunakan langsung dari jquery.com, jquery ini bisa didownload dan ditaruh dilocal --> <script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script> <!-- Script Timer --> <script type="text/javascript"> $(document).ready(function() { /** Membuat Waktu Mulai Hitung Mundur Dengan * var detik = 0, * var menit = 1, * var jam = 1 */ var detik = 30; var menit = 10; var jam = 0; /** * Membuat function hitung() sebagai Penghitungan Waktu */ function hitung() { /** setTimout(hitung, 1000) digunakan untuk * mengulang atau merefresh halaman selama 1000 (1 detik) */ setTimeout(hitung,1000); /** Jika waktu kurang dari 10 menit maka Timer akan berubah menjadi warna merah */ if(menit < 10 && jam == 0){ var peringatan = 'style="color:red"'; }; /** Menampilkan Waktu Timer pada Tag #Timer di HTML yang tersedia */ $('#timer').html( '<h1 align="center"'+peringatan+'>Sisa waktu anda <br />' + jam + ' jam : ' + menit + ' menit : ' + detik + ' detik</h1><hr>' ); /** Melakukan Hitung Mundur dengan Mengurangi variabel detik - 1 */ detik --; /** Jika var detik < 0 * var detik akan dikembalikan ke 59 * Menit akan Berkurang 1 */ if(detik < 0) { detik = 59; menit --; /** Jika menit < 0 * Maka menit akan dikembali ke 59 * Jam akan Berkurang 1 */ if(menit < 0) { menit = 59; jam --; /** Jika var jam < 0 * clearInterval() Memberhentikan Interval dan submit secara otomatis */ if(jam < 0) { clearInterval(); } } } } /** Menjalankan Function Hitung Waktu Mundur */ hitung(); }); // ]]> </script> </head>
Sudah selesai membuat Timer, sekarang bagaimana menggunakannya ? cukup kita letakkan id=”timer“. Seperti berikut ini :
<body> <div id='timer'></div> </body>
Bagaimana ? mudahkan dan cukup sederhana untuk diterapkan. semoga bermanfaat dan berhasil mencobanya 😀
Demo Aplikasi
mas kalo mau menghubungkannya dengan nilai ujian gimana ya?
bisa lebih rinci gan, maksudnya dihubungkan dengan nilai ujian seperti apa ?
Kak punya yang sudah terkoneksi dengan database? lagi butuh nih hehe 🙁
silahkan cek disini yang menggunakan database
https://andihartono.net/2016/07/26/membuat-timer-dengan-php-dan-jquery-part-4/
kak ada kontak ga? mau konsultasi aplikasi saya terkait timer 🙂
cek email.
mas bisa bantu saya,saya disini buat program TO online utk siswa di kota saya, tapi saya masih bingung terkait dengan script waktu hitung mundur dan ujian onlinenya mas.
jd masalahnya kan countdown timer sama ujian onlinenya itu sdh berhasil dan bisa berjalan tp pada saat halamannya direfresh dia ngulang lagi dari awal. gimana ya mas agar waktu sama jawabanya bisa tetap berjalan walaupun halamannya itu sdh direfresh??
untuk timernya bisa di simpan dalam session dan untuk jawabnnya soalnya ketika dipilih langsung di simpan dalam database.
contoh :
//set session dulu dengan nama $_SESSION[“mulai”]
if(isset($_SESSION[“mulai”])){ //jika session sudah ada
$telah_berlalu = time() – $_SESSION[“mulai”];
}else { //jika session belum ada
$_SESSION[“mulai”] = time();
$telah_berlalu = 0;
}
/*
$waktu_s variabel untuk menampung waktunya
$time[‘waktu’] -> diambil dari db dengan satuan menit
dikalikan 60 untuk dijadikan dalam detik
$waktu variabel untuk waktu yg akan digunakan
dibagi 60 dijadikan dalam menit lagi
*/
$waktu_s = ($time[‘waktu’]*60)-$telah_berlalu;
$waktu = number_format(($waktu_s/60),0);
if($waktu < 60){ $menit = $waktu; $jam = 0; }else{ $menit = $waktu%60; $jam = number_format(($waktu/60),0); } semoga membantu
Mas gimana ya agar countdown timernya itu bisa berjalan ketika direfresh??
untuk timernya bisa di simpan dalam session dan untuk jawabnnya soalnya ketika dipilih langsung di simpan dalam database.
contoh :
//set session dulu dengan nama $_SESSION[“mulai”]
if(isset($_SESSION[“mulai”])){ //jika session sudah ada
$telah_berlalu = time() – $_SESSION[“mulai”];
}else { //jika session belum ada
$_SESSION[“mulai”] = time();
$telah_berlalu = 0;
}
/*
$waktu_s variabel untuk menampung waktunya
$time[‘waktu’] -> diambil dari db dengan satuan menit
dikalikan 60 untuk dijadikan dalam detik
$waktu variabel untuk waktu yg akan digunakan
dibagi 60 dijadikan dalam menit lagi
*/
$waktu_s = ($time[‘waktu’]*60)-$telah_berlalu;
$waktu = number_format(($waktu_s/60),0);
if($waktu < 60){ $menit = $waktu; $jam = 0; }else{ $menit = $waktu%60; $jam = number_format(($waktu/60),0); } semoga membantu
Mas gimana ya agar countdown timernya itu bisa berjalan ketika direfresh??
untuk timernya bisa di simpan dalam session dan untuk jawabnnya soalnya ketika dipilih langsung di simpan dalam database.
contoh :
//set session dulu dengan nama $_SESSION[“mulai”]
if(isset($_SESSION[“mulai”])){ //jika session sudah ada
$telah_berlalu = time() – $_SESSION[“mulai”];
}else { //jika session belum ada
$_SESSION[“mulai”] = time();
$telah_berlalu = 0;
}
/*
$waktu_s variabel untuk menampung waktunya
$time[‘waktu’] -> diambil dari db dengan satuan menit
dikalikan 60 untuk dijadikan dalam detik
$waktu variabel untuk waktu yg akan digunakan
dibagi 60 dijadikan dalam menit lagi
*/
$waktu_s = ($time[‘waktu’]*60)-$telah_berlalu;
$waktu = number_format(($waktu_s/60),0);
if($waktu < 60){ $menit = $waktu; $jam = 0; }else{ $menit = $waktu%60; $jam = number_format(($waktu/60),0); } semoga membantu
mas bisa bantu saya buat tambah timer di sistem yang udah saya buat ga ?
bisa mbak, silahkan PM via email.
Kalau untuk menyimpan waktu sisa pengerjaan gimana ya gan?
sebaiknya waktunya di simpan dalam session, nanti sisa waktunya bisa di ambil dari session tersebut.
Mas klw halaman di refresh tp waktunya ttep.jalan gmana ya..
Jd klw halaman di refresh waktunya gk mulai dari awal lg
waktunya di set dalam session.
contoh :
//set session dulu dengan nama $_SESSION[“mulai”]
if(isset($_SESSION[“mulai”])){ //jika session sudah ada
$telah_berlalu = time() – $_SESSION[“mulai”];
}else { //jika session belum ada
$_SESSION[“mulai”] = time();
$telah_berlalu = 0;
}
/*
$waktu_s variabel untuk menampung waktunya
$time[‘waktu’] -> diambil dari db dengan satuan menit
dikalikan 60 untuk dijadikan dalam detik
$waktu variabel untuk waktu yg akan digunakan
dibagi 60 dijadikan dalam menit lagi
*/
$waktu_s = ($time[‘waktu’]*60)-$telah_berlalu;
$waktu = number_format(($waktu_s/60),0);
if($waktu < 60){ $menit = $waktu; $jam = 0; }else{ $menit = $waktu%60; $jam = number_format(($waktu/60),0); } semoga membantu
Kalok bikin yg timernya ttp lanjut walaupun d logout tw d close brwsernya gmn, mhon bantuannya
disimpan di database setiap perubahan timernya.
berarti pake setInterval dong mas buat ngesave setiap perubahan timernya???
kak….kalau mau nonaktifkan timer yg sudah diset caranya gimana?
jquerynya dinon-aktifkan atau bisa dbuatkan kondisi kapan aktif dan kapan mnon-aktif
maksudnya saya mau masuk website yang diset countdown oleh pemiliknya kak..
kalau dari website lain tidak bisa, apalagi kalau sang pemilik memakai plugin/library. jadi hanya pemiliknya
website yang saya maksud link https://www.tokoperhutani.com
Terimaksih Banyak Mas sangat membantu
sama-sama, senang bisa membantu dan bermaanfaat
gan mau tanya penting nih….jadi kan ada tabel waktu di database terus slah satu kolomnya ada yg namanya deadline….nah gw mau ngambil kolom deadline itu yg tipe datanya date nah mau dikirawangin waktu hari ini….tapi mau munculnya ada bulan, hari,jam, menit, detiknya
sebelumnya gw pke script yg ini gan:
timediff(CURRENT_TIMESTAMP ,deadline ) as deadline
nah klo pke yg itu jadi jamnya klo lbih dri 24 jam dy mlh jadi 25 jam dan seterusnya…nah gw maunya klo lbih dri 24 jam dy jadi 1 hari dan klo lbih dri 30 hari dy jadi 1 bulan…gmn gan?
harus buat fungsi biar lebih mudah
Kak, saya buat kok timernya ga jalan ya? Boleh dibantu kak?
gak jalannya seperti apa ? boleh silahkan email saja
maaf mas mau nanya kira2 scrip menyimpannya secara otomatis menggunakan timer diatas gimana ya, misalnya waktunya udah lewat maka data akan tersimpan secara otomatis, tpi pemanggilannya simpannya menggunakan form action.
kira-kira solusinya gimana ya mas???
bisa dibaca disini untuk yang lebih lengkap
https://andihartono.net/2017/04/26/membuat-timer-dengan-php-dan-jquery-tambahan-session
semoga membantu
Gan,kalau bikin timernya tidak bisa diakses jika waktunya blom habisgimana ya?
Contohnya buat website pengumuman kelulusan
buatkan kolom status (tidak harus nama tsb) di table yg dibutuhkan dengan isi aktif atau tidak, cek kondisi status tersebut kalau aktif maka bisa diakses kalau tidak maka sebaliknya. set aktif ketika waktu (timer) sudah habis/selesai