Membuat Timer dengan PHP dan JQuery [tambahan SESSION]

-
Membuat Timer dengan PHP dan JQuery [tambahan SESSION]
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).
?
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 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
?
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.
Bagaimana ? mudahkan dan cukup sederhana untuk diterapkan. semoga bermanfaat dan berhasil mencobanya 😀
Demo Aplikasi

Komentar

Posting Komentar

Postingan populer dari blog ini

Login, Session, dan Logout

-
Gambar
Login, Session, dan Logout Login dan logout merupakan proses yang hampir tiap kali kita temui sewaktu browsing. Misalnya saja untuk cek e-mail atau masuk ke account di friendster, atau.. (saking banyaknya, saya sampai tidak bisa menyebutkan satu persatu). Sekarang saatnya kita mencoba membuat form login dan logout sendiri  secara sederhana . Menggunakan PHP & MySQL tentunya. Langkah-langkahnya: Jika anda mencoba dari komputer stand-alone, jalankan dulu webserver dan database server anda. Untuk gampangnya, gunakan saja  phptriad . 1. Database Setiap user yang login akan dicek username dan passwordnya dari tabel user yang terdapat pada database. Kita buat dulu databasenya: Perintah yang digunakan: create database coba; use coba; create table users ( id int auto_increment not null, username varchar(20) not null, password varchar(35) not null, primary key(id) ); jika sudah selesai, ketikkan perintah desc users; maka akan tampil seperti berikut ini:...
Baca selengkapnya
-
Gambar
Membuat Login dan Register Sederhana dengan PHP dan MySQL. fyan_bluffy Gudang Koding  - Kali ini Gudang Koding akan memberikan Tutorial tentang membuat Sebuah Form Login dan Register sederhana Menggunakan PHP dan MySQL, lagi lagi saya tekankan jika anda masih dalam tahap belajar dalam pemograman PHP silahkan Baca Tutorial saya sebelumnya, tentang dasar dasar pemograman PHP.  Spesifikasi Program dan Database :  Program dibuat menggunakan PHP Murni ( Native ) Database Program Menggunakan MySQL. Tabel yang digunakan hanya 1 ( satu ) CSS menggunakan Bootstrap Framework Implementasi Form dan Session pada PHP. File dari Tutorial bisa Anda Download. Buat sebuah Database dengan nama  simplelogin  lalu buat Table " user " dengan detail sebagai berikut :  - username : varchar : 50 : Primary Key  - password: varchar : 100 : -  - email: varchar : 50 : Unique  - nama: varchar : 35: -  Pastikan Urutannya Sama.  Lalu buat str...
Baca selengkapnya

Cara Membuat File Setup / Installer Aplikasi Sendiri dengan Inno Setup Compiler

-
Gambar
Pernahkah anda bertanya-tanya bagaimana caranya membuat file setup / installer / installan aplikasi sendiri dalam berbentuk .exe ? kemungkinan anda akan menemukan hal ini ketika akan menginstall sebuah aplikasi dan anda diharuskan untuk mengklik  next-next  dan  next  agar aplikasi tersebut terinstall. Namun, ketika anda membuat sebuah aplikasi menggunakan Visual Studio (misalnya) semua isi file tersebut akan berantakan dan pada waktu inilah anda perlu sebuah aplikasi untuk merapihkan file-file yang berantakan tersebut menjadi satu  package installer  sehingga pengguna yang akan menginstall aplikasi anda pun tidak akan kebingungan. Adapun nama aplikasinya adalah Inno Setup Compiler. Inno Setup  adalah sebuah perangkat lunak instalasi bebas berbasis skrip yang ditulis menggunakan Embarcadero Delphi oleh Jordan Russel. Versi pertama perangkat lunak ini dirilis tahun 1997. Aplikasi ini memudahkan para programmer untuk menyatukan beberapa file p...
Baca selengkapnya