![Membuat Timer dengan PHP dan JQuery [tambahan SESSION]](https://i1.wp.com/andihartono.net/wp-content/uploads/2015/12/timer-1.png?fit=766%2C417&ssl=1)
Membuat Timer dengan PHP dan JQuery [tambahan SESSION]
Artikel kali ini saya buat merupakan kelanjutan dari artikel tentang “Membuat Timer dengan PHP dan jQuery Part 1, Part 2, dan Part 3, Part 4 dan timer dari Detik – Bulan”, untuk menjawab pertanyaan dikolom komentar tentang “pada saat di refresh halaman waktu tidak mengulang dari awal”.
Maka dari itu saya akan membuatkan contohnya. Langsung kita siapkan notepad++ dan secangkir kopi untuk menemani ngoding.
Berikut dibawah ini lebih lengkapnya.
- Buat database di MySQL dengan nama test_timer (bisa diganti dengan nama yang lain).
<br />
//membuat database<br />
CREATE DATABASE test_timer;<br />
- Buat tabel dengan nama timer dengan kolom id dan waktu, dan isi tabel yang sudah dibuat pada kolom waktu dengan value 90 (menit).
<br />
//membuat tabel timer<br />
CREATE TABLE timer(<br />
id int NOT NULL AUTO_INCREMENT,<br />
waktu int,<br />
PRIMARY KEY (id)<br />
)</p>
<p> //insert data di tabel waktu<br />
INSERT INTO timer(waktu) VALUES(90);<br />
- Langkah 1 : Setelah membuat database dan tabel selesai, selanjutnya buat file dengan nama timer.php
- Langkah 2 : Membuat koneksi dari database yang sudah dibuat
<br />
<?php<br />
$server = "localhost"; //sesuaikan dengan nama server<br />
$username = "root"; //sesuaikan dengan username server, username default adalah root<br />
$password = ""; //sesuaikan dengan password server, apabila tidak ada dikosongi saja<br />
$database = " test_timer"; //sesuaikan dengan nama database yang sudah dibuat</p>
<p> // Koneksi dan memilih database di server<br />
mysql_connect($server,$username,$password) or die("Koneksi gagal");<br />
mysql_select_db($database) or die("database tidak ada");<br />
?><br />
- Langkah 3 : Membuat Session waktu mulai
<br />
<?php<br />
//untuk memulai session<br />
session_start();</p>
<p> //set session dulu dengan nama $_SESSION["mulai"]<br />
if (isset($_SESSION["mulai"])) {<br />
//jika session sudah ada<br />
$telah_berlalu = time() - $_SESSION["mulai"];<br />
} else {<br />
//jika session belum ada<br />
$_SESSION["mulai"] = time();<br />
$telah_berlalu = 0;<br />
}<br />
?><br />
- Langkah 4 : Menampilkan waktu yang ada didatabase
<br />
<?php<br />
$sql = mysql_query("select * from timer");<br />
$data = mysql_fetch_array($sql);</p>
<p> $temp_waktu = ($data['waktu']*60) - $telah_berlalu; //dijadikan detik dan dikurangi waktu yang berlalu<br />
$temp_menit = (int)($temp_waktu/60); //dijadikan menit lagi<br />
$temp_detik = $temp_waktu%60; //sisa bagi untuk detik</p>
<p> if ($temp_menit < 60) {<br />
/* Apabila $temp_menit yang kurang dari 60 meni */<br />
$jam = 0;<br />
$menit = $temp_menit;<br />
$detik = $temp_detik;<br />
} else {<br />
/* Apabila $temp_menit lebih dari 60 menit */<br />
$jam = (int)($temp_menit/60); //$temp_menit dijadikan jam dengan dibagi 60 dan dibulatkan menjadi integer<br />
$menit = $temp_menit%60; //$temp_menit diambil sisa bagi ($temp_menit%60) untuk menjadi menit<br />
$detik = $temp_detik;<br />
}<br />
?><br />
- Langkah 5 : Membuat script Timer diantara tag head
<br />
<head><br />
<!-- Kita membutuhkan jquery, disini saya menggunakan langsung dari jquery.com, jquery ini bisa didownload dan ditaruh dilocal --><br />
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script></p>
<p> <!-- Script Timer --><br />
<script type="text/javascript"><br />
$(document).ready(function() {<br />
/** Membuat Waktu Mulai Hitung Mundur Dengan<br />
* var detik;<br />
* var menit;<br />
* var jam;<br />
*/<br />
var detik = <?= $detik; ?>;<br />
var menit = <?= $menit; ?>;<br />
var jam = <?= $jam; ?>;</p>
<p> /**<br />
* Membuat function hitung() sebagai Penghitungan Waktu<br />
*/<br />
function hitung() {<br />
/** setTimout(hitung, 1000) digunakan untuk<br />
* mengulang atau merefresh halaman selama 1000 (1 detik)<br />
*/<br />
setTimeout(hitung,1000);</p>
<p> /** Jika waktu kurang dari 10 menit maka Timer akan berubah menjadi warna merah */<br />
if(menit < 10 && jam == 0){<br />
var peringatan = 'style="color:red"';<br />
};</p>
<p> /** Menampilkan Waktu Timer pada Tag #Timer di HTML yang tersedia */<br />
$('#timer').html(<br />
'<h1 align="center"'+peringatan+'>Sisa waktu anda <br />' + jam + ' jam : ' + menit + ' menit : ' + detik + ' detik</h1><hr>'<br />
);</p>
<p> /** Melakukan Hitung Mundur dengan Mengurangi variabel detik - 1 */<br />
detik --;</p>
<p> /** Jika var detik < 0<br />
* var detik akan dikembalikan ke 59<br />
* Menit akan Berkurang 1<br />
*/<br />
if(detik < 0) {<br />
detik = 59;<br />
menit --;</p>
<p> /** Jika menit < 0<br />
* Maka menit akan dikembali ke 59<br />
* Jam akan Berkurang 1<br />
*/<br />
if(menit < 0) {<br />
menit = 59;<br />
jam --;</p>
<p> /** Jika var jam < 0<br />
* clearInterval() Memberhentikan Interval dan submit secara otomatis<br />
*/</p>
<p> if(jam < 0) {<br />
clearInterval(hitung);<br />
/** Variable yang digunakan untuk submit secara otomatis di Form */<br />
var frmSoal = document.getElementById("frmSoal");<br />
alert('Waktu Anda telah habis, Jika ingin mencoba lagi silahkan dihapus dulu SESSION browser anda');<br />
frmSoal.submit();<br />
}<br />
}<br />
}<br />
}<br />
/** Menjalankan Function Hitung Waktu Mundur */<br />
hitung();<br />
});<br />
</script><br />
</head><br />
- Langkah 6 : Menjalankan Timer yang sudah dibuat, letakkan id=”timer” diantara tag div dan id=”frmSoal” di tag form. Seperti berikut ini :
<br />
<body><br />
<div id='timer'></div><br />
<form action="index.php" id="frmSoal" method='POST' ><br />
<!-- Taruh script disini, bisa soal atau sesuai kebutuhan --><br />
</form><br />
</body><br />
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.
NB : semua script diatas diletakkan di file timer.php yang sudah dibuat sebelumnnya.
Bagaimana ? mudahkan dan cukup sederhana untuk diterapkan. semoga bermanfaat dan berhasil mencobanya 😀
Demo Aplikasi
Share
Thanks. Sangat membantu.
sama-sama gan
terima kasih sudah berkunjung
Setelah waktu habis kan kesubmit mas, tapi kok waktunya terus jalan? Terus saya coba masuk ke sistem pake username yang lain, itu waktunya gak mulai dari awal. Ngikutin waktu username yang pertama.
setelah di submit jangan lupa clear/hapus session timernya, jadi ketika mulai awal session timernya mulai dari awal lagi
Mas pas waktu habis kok gak kesubmit ya formnya? Kira” salahnya dimana? Timernya juga terus jalan
pastikan actionnya terarah dengan benar, dan setelah tersubmit clear sessionnya.
atau bisa lampirkan script via email
mas, script.nya sudah saya ikutin, tapi pada saat di refresh waktunya tetap mengulang .
terimakasih
sessionnya belum jalan jangan session_start(); untuk memulai session, kalau udah disubmit clear sessionnya
Mas, mau nanya ini. Saya ada database,didalamnya ada tabel berisi waktu berformat date(y-m-d). Yang mau saya tanya: bagaimana membuat hitung mundur tanggal yg di database dengan tanggal sekarang? Contoh: tanggal di database= 2018-02-10.Mohon bantuannya ya mas, trims
dikonversi dulu ke dalam string (waktu). di php bisa menggunakan fungsi new DateTime() atau strtotime
Kenapa ya waktunya berjalan normal di localhost tp pada saat hosting waktu langsunh ke submit karna kehabisan waktu, tiap mulai start langaung habis waktu itu masalahnya di mana ya
diperiksa lagi codenya gan, dihosting saya normal dan bisa jalan
gan gimana kalo yg ujian logout?, otomatis session ke destroy dan kalo masuk ujian lagi waktu mulai dari awal lagi?
session timenya jgn di distroy gan kalau mau lanjut timernya walau udah logout, kalau ke destroy timernya mulai dari awal lagi.
mas gimana caranya waktunya berhenti kalau sudah habis
setelah waktu habis arahkan ke halaman lain,seperti :
form action=”index.php” id=”frmSoal” method=’POST’
contoh itu saya arahkan ke index di action=”index.php”
gan setelah waktu ny habis ga ke submit ya pdahal id form nya sudah sama dan udh disesuikan action form ny.
bisa lihat sperti apa codenya gan, mungkin ada yang keliru
gan kok tak ganti menit nya pindah ke timer2.php yah? filenya yang mana gan?
di alamat ini gan https://aplikasiku.andihartono.net/timer6.php