Membuat Timer dengan PHP dan JQuery

membuat timer dalam proses php dan Jquery di database implementasi seperti berikut ini dalam pembuatan program sederhana ini :

Berikut dibawah ini lebih lengkapnya.

Buat database di MySQL dengan nama test_timer (bisa diganti dengan nama yang lain).

?
1
2
//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).

?
1
2
3
4
5
6
7
8
9
//membuat tabel timer
CREATE TABLE timer(
    id int NOT NULL AUTO_INCREMENT,
    waktu int,
    PRIMARY KEY (id)
)
 
//insert data di tabel waktu
INSERT INTO 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

?
1
2
3
4
5
6
7
8
9
10
<?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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<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 :

?
1
2
3
4
5
6
<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.


Komentar

Posting Komentar