Membuat Timer dengan PHP dan JQuery [tambahan SESSION]

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 />
    &lt;?php<br />
        $server 	= &quot;localhost&quot;; 		//sesuaikan dengan nama server<br />
        $username 	= &quot;root&quot;; 			//sesuaikan dengan username server, username default adalah root<br />
		$password 	= &quot;&quot;; 				//sesuaikan dengan password server, apabila tidak ada dikosongi saja<br />
		$database 	= &quot; test_timer&quot;; 	//sesuaikan dengan nama database yang sudah dibuat</p>
<p>		// Koneksi dan memilih database di server<br />
		mysql_connect($server,$username,$password) or die(&quot;Koneksi gagal&quot;);<br />
		mysql_select_db($database) or die(&quot;database tidak ada&quot;);<br />
	?&gt;<br />

  • Langkah 3 : Membuat Session waktu mulai

<br />
    &lt;?php<br />
		//untuk memulai session<br />
		session_start();</p>
<p>        //set session dulu dengan nama $_SESSION[&quot;mulai&quot;]<br />
		if (isset($_SESSION[&quot;mulai&quot;])) {<br />
			//jika session sudah ada<br />
			$telah_berlalu = time() - $_SESSION[&quot;mulai&quot;];<br />
		} else {<br />
			//jika session belum ada<br />
			$_SESSION[&quot;mulai&quot;] 	= time();<br />
			$telah_berlalu 		= 0;<br />
		}<br />
	?&gt;<br />

  • Langkah 4 : Menampilkan waktu yang ada didatabase

<br />
    &lt;?php<br />
		$sql 	= mysql_query(&quot;select * from timer&quot;);<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 &lt; 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 />
	?&gt;<br />

  • Langkah 5 : Membuat script Timer diantara tag head

<br />
	&lt;head&gt;<br />
		&lt;!-- Kita membutuhkan jquery, disini saya menggunakan langsung dari jquery.com, jquery ini bisa didownload dan ditaruh dilocal --&gt;<br />
		&lt;script src=&quot;http://code.jquery.com/jquery-1.10.2.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</p>
<p>		&lt;!-- Script Timer --&gt;<br />
		&lt;script type=&quot;text/javascript&quot;&gt;<br />
			$(document).ready(function() {<br />
				/** Membuat Waktu Mulai Hitung Mundur Dengan<br />
					* var detik;<br />
					* var menit;<br />
					* var jam;<br />
				*/<br />
				var detik 	= &lt;?= $detik; ?&gt;;<br />
				var menit 	= &lt;?= $menit; ?&gt;;<br />
				var jam 	= &lt;?= $jam; ?&gt;;</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 &lt; 10 &amp;&amp; jam == 0){<br />
						var peringatan = 'style=&quot;color:red&quot;';<br />
					};</p>
<p>					/** Menampilkan Waktu Timer pada Tag #Timer di HTML yang tersedia */<br />
					$('#timer').html(<br />
						'&lt;h1 align=&quot;center&quot;'+peringatan+'&gt;Sisa waktu anda &lt;br /&gt;' + jam + ' jam : ' + menit + ' menit : ' + detik + ' detik&lt;/h1&gt;&lt;hr&gt;'<br />
					);</p>
<p>					/** Melakukan Hitung Mundur dengan Mengurangi variabel detik - 1 */<br />
					detik --;</p>
<p>					/** Jika var detik &lt; 0<br />
						* var detik akan dikembalikan ke 59<br />
						* Menit akan Berkurang 1<br />
					*/<br />
					if(detik &lt; 0) {<br />
						detik = 59;<br />
						menit --;</p>
<p>					   /** Jika menit &lt; 0<br />
							* Maka menit akan dikembali ke 59<br />
							* Jam akan Berkurang 1<br />
						*/<br />
						if(menit &lt; 0) {<br />
							menit = 59;<br />
							jam --;</p>
<p>							/** Jika var jam &lt; 0<br />
								* clearInterval() Memberhentikan Interval dan submit secara otomatis<br />
							*/</p>
<p>							if(jam &lt; 0) {<br />
								clearInterval(hitung);<br />
								/** Variable yang digunakan untuk submit secara otomatis di Form */<br />
								var frmSoal = document.getElementById(&quot;frmSoal&quot;);<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 />
		&lt;/script&gt;<br />
	&lt;/head&gt;<br />

  • Langkah 6 : Menjalankan Timer yang sudah dibuat, letakkan id=”timer” diantara tag div dan id=”frmSoal” di tag form. Seperti berikut ini :

<br />
    &lt;body&gt;<br />
		&lt;div id='timer'&gt;&lt;/div&gt;<br />
		&lt;form action=&quot;index.php&quot; id=&quot;frmSoal&quot; method='POST' &gt;<br />
			&lt;!-- Taruh script disini, bisa soal atau sesuai kebutuhan --&gt;<br />
		&lt;/form&gt;<br />
    &lt;/body&gt;<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