Membuat Timer dengan PHP dan jQuery Part 4

Membuat Timer dengan PHP dan jQuery Part 4

Posted by On Juli 26, 2016 57 Comments

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
Share

TOPICS