Cara Menampilkan Jam Berjalan di PHP

Postingan AneIqbal kali ini akan membahas bagaimana cara menampilkan jam berjalan di PHP. Namun, kita butuh tambahan Javascript juga di sini untuk membuat efek animasinya. Silakan simak pembahasan selengkapnya berikut ini.

Langkah-langkah menampilkan jam berjalan di PHP

Coding PHP dulu untuk menampilkan jamnya

Kita bisa menampilkan jam server dengan PHP. Caranya, ketik:

<?php echo date("H:i:s");?>

(baca juga: fungsi date PHP) kemudian save file dengan ekstensi .php. Lalu buka dengan browser, misal dengan mengetik di address bar: localhost/aneiqbal/jamserver/index.php.

Pastikan laptop atau komputer Anda sudah terinstall aplikasi XAMPP. Sebagai informasi, aplikasi tersebut akan menjadikan laptop kita sebagai sebuah server dan umumnya dikenal dengan server lokal atau localhost.

Cara install XAMPP cukup mudah, tinggal klik tombol next saja sampai selesai. Anda bisa mendownload aplikasinya di sini: https://www.apachefriends.org/download.html.

Ada alternatif lain seperti WAMP, tutorial installnya bisa Anda lihat di: Tutorial Menginstall WampServer di Windows 7. Oke, back to topic.

Ketika Anda sudah menjalankan file php tadi di browser, Anda akan melihat jam serta dengan menit dan detiknya.

Namun hanya statis, tidak bergerak. Detik, menit atau jamnya hanya akan berubah bila kita rajin mereload atau merefresh halamannya.

Kalau Anda perhatikan gambar di atas, ada perbedaan antara jam yang tampil di browser dan jam yang ada pada pojok kanan atas (jam laptop).

Mengapa berbeda? karena server lokal kami masih menggunakan timezone Europe/Berlin. Ini untuk memastikan saja bahwa jam yang kita tampilkan benar dari servernya.

Baca juga: Membuat Koneksi PHP dengan Database MySQL

Javascript dan jQuery untuk animasinya

Agar kita dapat menganimasikan jam server yang sudah ditampilkan tadi, kita perlu menambahkan atribut id sebagai target jQuery nantinya. Sehingga, scriptnya menjadi seperti ini.

<span id="jamServer"><?php echo date("H:i:s");?></span>

Setelah itu, kita tambahkan script berikut.

var serverClock = jQuery("#jamServer");
if (serverClock.length > 0) {
    showServerTime(serverClock, serverClock.text());
}
 
function showServerTime(obj, time) {
    var parts   = time.split(":"),
        newTime = new Date();

    newTime.setHours(parseInt(parts[0], 10));
    newTime.setMinutes(parseInt(parts[1], 10));
    newTime.setSeconds(parseInt(parts[2], 10));

    var timeDifference  = new Date().getTime() - newTime.getTime();

    var methods = { 
        displayTime: function () {
            var now = new Date(new Date().getTime() - timeDifference);
            obj.text([
                methods.leadZeros(now.getHours(), 2),
                methods.leadZeros(now.getMinutes(), 2),
                methods.leadZeros(now.getSeconds(), 2)
            ].join(":"));
            setTimeout(methods.displayTime, 500);
        },
 
        leadZeros: function (time, width) {
            while (String(time).length < width) {
                time = "0" + time;
            }
            return time;
        }
    }
    methods.displayTime();
}

Kita bisa menambahkan langsung script di atas di dalam file index.php. Namun, kami menyarankan disimpan saja dalam bentuk file javascript, dengan nama jamServer.js. File ini nantinya akan kita panggil dan supaya lebih terstruktur juga rapi.

Full script dan demo

Berikut full script untuk menampilkan jam realtime PHP.

Berikut untuk demo hasil dari coding di atas.

Baca juga: Cara Membuat Database di phpMyAdmin

Sampai sini selesai pembahasannya. Sekian pembahasan kali ini mengenai cara menampilkan jam berjalan di PHP dan semoga bisa membantu Anda.