Membuat Timer dengan PHP dan jQuery Part 2

Membuat Timer dengan PHP dan jQuery Part 2

Hosting Unlimited Indonesia

K ali ini saya akan membagikan cara membuat timer menggunakan PHP dan JQuery, jika sebelumnya saya sudah membagikan membuat timer tanpa database kali ini saya akan membuat time menggunakan inputan.

Scriptnya tidak beda jauh dari postingan Membuat Timer dengan PHP dan jQuery Tanpa Batabase, hanya menambahi dan mengedit beberapa script. Berikut script yang perlu kita tambahi :

  • letakkan script dibawah ini di antara tag <body> dan </body>
<div id='timer'></div>
<form action="#"> 
       <label>Waktu (Menit)</label> 
       <select name="waktu" class="form-control" onchange="window.location='timer2.php?waktu='+this.value">
             <option value="0">- Pilih -</option>
             <?php for($i=1; $i<=120; $i++){ ?>
                   <option value="<?php echo $i; ?>"><?php echo $i; ?></option>
             <?php } ?> 
       </select>
</form>

  • Selanjutnya, letakkan script PHP dibawah ini diatas tag <html>
 
<?php 
     /* Apabila waktu belum dimasukkan, maka waktu awal di set 0 jam, 10 menit dan 0 detik */ 
     if(empty($_GET['waktu'])){ 
          $jam = 0; 
          $menit = 10; 
     }else{ 
        if($_GET['waktu'] < 60){ 
             /* Apabila waktu yang diiputkan kurang dari 60 menit, maka waktu dijadikan menit dan 0 jam */ 
             $menit = $_GET['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 = $_GET['waktu']%60;
             
             //awalnya seperti ini  
             //$jam = substr(($_GET['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)($_GET['waktu']/60); //dijadikan integer
        } 
    } 

    /*Jika menggunakan database cukup ganti script diatas dengan men-SELECT data dari database yang sudah ada*/
?> 
  • Langkan terakhir mengubah script JQuery Timer yang ada di tag <head>
      /** Membuat Waktu Mulai Hitung Mundur Dengan 
                * var detik = 0,
                * var menit = 1,
                * var jam = 1
      */
      var detik = 0;
      var menit = 1;
      var jam = 1;

/* MENJADI */

      /** 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; ?>;


 

Bagaimana ? mudahkan dan cukup sederhana untuk diterapkan. semoga bermanfaat dan berhasil mencobanya 😀

Demo Aplikasi
Hosting Unlimited Indonesia
Share