Membuat Timer dengan PHP dan jQuery Part 4

Membuat Timer dengan PHP dan jQuery Part 4

Hosting Unlimited Indonesia

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