Membuat Timer dengan PHP dan JQuery [tambahan SESSION]

Membuat Timer dengan PHP dan JQuery [tambahan SESSION]

Hosting Unlimited Indonesia

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).
    //membuat database
    CREATE DATABASE test_timer;
  • Buat tabel dengan nama timer dengan 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);
  • Langkah 1 : Setelah membuat database dan tabel selesai, selanjutnya buat file dengan nama timer.php
  • Langkah 2 : 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 	= " test_timer"; 	//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 3 : Membuat Session waktu mulai
    <?php
		//untuk memulai session
		session_start();
		
        //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;
		} 
	?>
  • Langkah 4 : Menampilkan waktu yang ada didatabase
    <?php
		$sql 	= mysql_query("select * from timer");	
		$data 	= mysql_fetch_array($sql);

		$temp_waktu = ($data['waktu']*60) - $telah_berlalu; //dijadikan detik dan dikurangi waktu yang berlalu
		$temp_menit	= (int)($temp_waktu/60); 				//dijadikan menit lagi
		$temp_detik	= $temp_waktu%60; 						//sisa bagi untuk detik
		
		if ($temp_menit < 60) { 
			/* Apabila $temp_menit yang kurang dari 60 meni */
			$jam 	= 0; 
			$menit 	= $temp_menit; 
			$detik 	= $temp_detik; 
		} else { 
			/* Apabila $temp_menit lebih dari 60 menit */			 
			$jam 	= (int)($temp_menit/60); 	//$temp_menit dijadikan jam dengan dibagi 60 dan dibulatkan menjadi integer 
			$menit 	= $temp_menit%60;			//$temp_menit diambil sisa bagi ($temp_menit%60) untuk menjadi menit
			$detik 	= $temp_detik;
		}	
	?>
  • Langkah 5 : Membuat script Timer diantara tag 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;
					* var menit;
					* var jam;
				*/
				var detik 	= <?= $detik; ?>;
				var menit 	= <?= $menit; ?>;
				var jam 	= <?= $jam; ?>;
					 
				/**
				   * 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(hitung); 
								/** Variable yang digunakan untuk submit secara otomatis di Form */ 
								var frmSoal = document.getElementById("frmSoal"); 
								alert('Waktu Anda telah habis, Jika ingin mencoba lagi silahkan dihapus dulu SESSION browser anda');
								frmSoal.submit(); 
							} 
						} 
					} 
				}           
				/** Menjalankan Function Hitung Waktu Mundur */ 
				hitung();
			});
		</script>
	</head>
  • Langkah 6 : Menjalankan Timer yang sudah dibuat, letakkan id=”timer” diantara tag div dan 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.

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
Hosting Unlimited Indonesia
Share