
Membuat Timer dengan PHP dan jQuery Part 4
Kali ini adalah artikel terakhir tentang Membuat Timer dengan PHP dan jQuery. Sebelumnya saya sudah bagikan mulai dari Part 1, Part 2, dan Part 3, dan Part 4 adalah yang terakhir.
Saya membuat artikel ini karena ada yang request menggunakan database. Tanpa basa-basi lagi dibawah ini lebih lengkapnya.
- Buat database di MySQL dengan nama theandys_test (bisa diganti dengan nama yang lain).
//membuat database CREATE DATABASE theandys_test;
- Buat tabel dengan nama timer (kolom id dan waktu) dan isi tabel yang sudah dibuat pada kolom waktu dengan value 90 (menit)
//membuat tabel timer CREATE TABLE timer( id int NOT NULL AUTO_INCREMENT, waktu int, PRIMARY KEY (id) ) //insert data di tabel waktu INSERT INTO timer(waktu) VALUES(90);
- Setelah membuat database dan tabel selesai, selanjutnya buat file dengan nama timer.php
- Langkah 1 : Membuat koneksi dari database yang sudah dibuat
<?php $server = "localhost"; //sesuaikan dengan nama server $username = "root"; //sesuaikan dengan username server, username default adalah root $password = ""; //sesuaikan dengan password server, apabila tidak ada dikosongi saja $database = "theandys_test"; //sesuaikan dengan nama database yang sudah dibuat // Koneksi dan memilih database di server mysql_connect($server,$username,$password) or die("Koneksi gagal"); mysql_select_db($database) or die("database tidak ada"); ?>
- Langkah 2 : Menampilkan waktu yang ada didatabase
<?php $sql = mysql_query("SELECT * FROM timer"); /* Apabila data di database kosong, maka waktu awal di set 0 jam, 10 menit dan 0 detik */ if(mysql_num_rows($sql) == 0){ $jam = 0; $menit = 10; }else{ $data = mysql_fetch_array($sql); if($data['waktu'] < 60){ /* Apabila waktu yang diiputkan kurang dari 60 menit, maka waktu dijadikan menit dan 0 jam */ $menit = $data['waktu']; $jam = 0; }else{ /* Apabila waktu yang diiputkan lebih dari 60 menit, maka waktu/60 dan sisa bagi dijadikan menit serta hasil bagi dijadikan jam */ $menit = $data['waktu']%60; //awalnya seperti ini //$jam = substr(($data['waktu']/60),0,1); //substr berfungsi untuk mengambil string, 0 dimulai dari string ke-0 dan 1 jumlah string yang akan diambil //saya ganti menjadi $jam = (int)($data['waktu']/60); //dijadikan integer } } ?>
- Langkah 3 : Membuat script Timer di HEAD
<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 = 0; var menit = <?php echo $menit; ?>; var jam = <?php echo $jam; ?>; var hari = 2; /** * 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(); /** Variable yang digunakan untuk submit secara otomatis di Form */ var frmSoal = document.getElementById("frmSoal"); alert('Waktu Anda telah habis, Terima kasih sudah berkunjung.'); frmSoal.submit(); } } } } /** Menjalankan Function Hitung Waktu Mundur */ hitung(); }); // ]]> </script> </head>
- Langkah 4 : Menjalankan Timer yang sudah dibuat, letakkan id=”frmSoal” di tag form. Seperti berikut ini :
<body> <div id='timer'></div> <form action="index.php" id="frmSoal" method='POST' > <!-- Taruh script disini, bisa soal atau sesuai kebutuhan --> </form> </body>
Disini method saya menggunakan methode=”POST” untuk mengambil data dan action saya arahkan ke file index.php seperti action=”index.php” ketika tersubmit otomatis.
Untuk method bisa menggunakan GET atau POST dan action bisa disesuai dengan kebutuhan akan diarahkan ke file apa.
Bagaimana ? mudahkan dan cukup sederhana untuk diterapkan. semoga bermanfaat dan berhasil mencobanya 😀
Demo Aplikasi
oya mas andi, kalau satu link tidak boleh terbuka di tab-tab yang lain dalam satu browser bagaimana mas?
satu lagi mas, dan halaman tersebut hanya boleh di buka dengan satu browser saja misalnya : google chroome aja mas
mohon solusinya mas 🙂
Untuk kasus yang ditanyakan saya belum pernah coba.
Saya simpan dulu pertanyaannya siapa tau nanti bisa ?
Mas kalau waktunya lebih dari 90 menit gimana mas. misalnya 1 bulan 2 hari
tolong di bantu makasi
bisa dilihat disini
https://andihartono.net/2017/01/03/membuat-timer-dari-detik-bulan-dengan-php-dan-jquery/
Mas kalau waktunya lebih dari 90 menit gimana ya mas misalnya kita buat parameter waktunya 1 bulan 2 hari lagi. tolong di bantu mas
terimakasih
bisa dilihat disini
https://andihartono.net/2017/01/03/membuat-timer-dari-detik-bulan-dengan-php-dan-jquery/
mas bisa bantu saya buat tamabahin timer di sistem yang sudah saya buat ga ?
saya sudah coba tapi ga bisa”. boleh minta no wa/line nya mas. terima kasih
bisa mbak, silahkan PM via email saja ya.
Gan. Ini jalaninnya di mn ya. Bngung saya
file php.nya bisa dibuat di file berbeda kemudian di include-kan. untuk jquerynya taruh di antara tag head dan pemanggilan jquerynya di dalam body dengan menggunakan div dan kasih id=”namaFungsiJQuery”
Trus dr langkah 1-4 it dlm satu file yaitu timer.php ya?
bisa ditaruh dalam 1 file, bisa juga file php.nya dipisah dan di include pada file yang di inginkan
utk nampilin waktu di Database saya namain load waktu, trs utk script timernya saya gabung dengan file ujiannya gan viewsoal.php kok ttep gak tampil ya waktunya?
utk nampilin waktu di Database saya namain load waktu, trs utk script timernya saya gabung dengan file ujiannya saya gan viewsoal.php kok ttep gak tampil ya waktunya?
coba kirim email gan script lengkapnya, sya coba cek.
email bisa dilihat di profil. terima kasih
Alhamdulillah sdah berhasil gan. Oh iya kalo utk bisa menyimpan waktu ujian jika telah selesai gan gimana ya, ada saran kah apa yg mesti ditamabhin dr script agan tsb?
Cth waktu ujian 30 menit, peserta bisa nyelesain 22 menit, nah yang tersimpan waktu sisa itu gan? Terima kasih, mohon pencerahannya
mainnya di aksi selesai ujiannya saja bukan di jquerynya.
ada 2 cara :
1. simpan waktu yang berjalan itu dalam session, ketika klik selesai ujian cek sessionnya
2. catat waktu mulai ujiannya, ketika klik selesai ujian catat waktu selesainya kemudian waktu selesai di kurangi waktu mulai.
Tersimpan di dlem tabel gitu gan waktu ujiannya
bro z mau nanya nih gmna carax biar pada saat di refresh halamanx wktu tidak mengulang dri awal
????
waktunya di taruh 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
Gan kira-kira bisa gak ya kalo misalkan detik countdownnya habis atau 0sec,langsung diberi perintah sql? jadi ngeupdate ke database gitu
bisa gan, tinggal dibuatkan aksinya.
seperti script diatas yang dibagian body diantara tag form, ganti action-nya mau di arahkan kemana.
om. kok timernya tereload ketika ngepost soal. pada saattersubmit value waktunya tereload
seperti apa lengkapnya gan?
bisa kirim email beserta gambar dab scriptnya , biar saya cek
gan, project web ane pake codeigniter, cara aplikasiin tutorial ini gimana ya ? ane rada bingung
Sebenarnya hampir sama, cuma dipisahkan di model dan controller.
Query timenya di model dan main di controllernya, untuk jquerynya bisa ditaruh di view yg diinginkan
mas cara agar kita set waktu misalkan jam 9:00 lalu menampilkan “data A” dan pada saat jam 10:00 otomatis data berganti secara otomatis dengan “data B” loginya bisa di bantu mas…
diset waktunya dulu gan per-data, kemudian bisa pakai jquery/ajax untuk pengecekan jam sekarang dan jam yg sudah diset perdata
gak nampil gan
pastikan jquery dan selectornya benar
Sudah sesuai tutorial tp masih gak muncul
sudah saya coba jalan dan muncul timernya.
pastikan data waktu di database ada dan koneksi internet karena jquery diakses secara online src=”http://code.jquery.com/jquery-1.10.2.min.js”
Udh work gan tapi klo habis waktu form tidak tersumbit
bisa di emailkan sourcenya biar saya cek
Klo waktu tidak mengulang saat di refresh itu gimana ya klo tanpa database
bisa dilihat disini https://andihartono.net/2017/04/26/membuat-timer-dengan-php-dan-jquery-tambahan-session/
kalau tanpa base tinggal di contans-kan saja nilai waktunya di php/jquerynya
Apa emailnya gan
Gan, bsa buat soal pengacakan dengan metode linear congruent method ? Atau hasil perhitungan metode tsb di select dari database atau php
Misal select * from soal where id_soal=’$hasil’; trus ditampilkan perpage kayak ada next page gtu , gimana ya gan , nyari di google blum ketemu
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
gan kasus saya buat evoting,
saya menggunakan mysqli
saya punya tabel waktu,berisi
kolom ‘mulai’ dan ‘selesai’,kedua kolom bertipe datetime,
pertanyaan saya
bagaimana membuat tampilan waktu mundur berdasarkan datetime(selesai) dari tabel yg yg saya punya,
terima kasih
kolom mulai dan selesai isi datanya sperti apa?
gan saya udah coba semua script yg diatas tapi kok form ny tidak ke submit ya? padahal id form ny udah sama
itu masalah ny dimana ya gan..
terimaksih
bisa lihat seperti apa codenya gan, mungkin ada yang keliru
bos, bagaimana cara nya supaya walaupun di refresh timer tidak mengulang kembali ke default 10 menit misalnya
bisa dilihat disini https://andihartono.net/2017/04/26/membuat-timer-dengan-php-dan-jquery-tambahan-session/
kalau tanpa database tinggal di contans-kan saja nilai waktunya di php/jquerynya
Mas, sy ada komen di halaman yg beda.
saya menggunakan sqlserver
Tabel saya berisi
kolom ‘mulai’ dan ‘selesai’,typedata nya datetime (2020-01-30 15:10:30).
pertanyaan saya
bagaimana membuat countdown berdasarkan datetime dr waktu mulai dan selesai berdasar selisih selesai dengan mulai nya tersebut yah? Dan jg sat jam sekarang sesuai jam mulai naru countdown nya mulai berjalan, dan jk jam sekarang sudah sesuai jam selesai maka countdownnya jg berhenti dan countdownnya menjd nol. Kemudian jika ada waktu mulai lg yg sesuai jam skrg maka countdownya berjlan lagi. Begitu seterusnya sesuai data yg ada di tabel. Mohon bantu
langkah-langkah:
1. konversi dulu selisih dari mulai dan selesai menjadi jam, misal mulai 2020-01-30 15:00:00 dan selesai 2020-01-30 16:00:00 itu kan sama dengan 1 jam
2. lakukan pengecekan menggunakan if , contoh jika mulai == date(‘Y-m-d H:i:s) maka lakukan eksekusi countdownnya
Baik, saya coba ya. Kalo masi bingung sy tny lg. Trims
bingung dibagian mana? mungkin bisa dilampirkan codenya
Ini supaya timernya gabalik lagi ke awal tiap refresh halamannya gimana ya ?
bisa pakai cookie atau session gan
kalau session bisa dilihat disini
https://andihartono.net/2017/04/26/membuat-timer-dengan-php-dan-jquery-tambahan-session/