Cara Menampilkan Animasi Jam Server dengan PHP dan Javascript - AneIqbal

Post Top Ad

Cara Menampilkan Animasi Jam Server dengan PHP dan Javascript

Share This
Halo Sobat AI! Tulisan kali ini, kita akan bahas cara menampilkan jam server dengan PHP. Tidak sekadar ditampilkan saja, tapi detiknya bergerak seperti jam digital. Penasaran?

cara menampilkan animasi jam server php javascript

Pertama, PHP dulu untuk menampilkan jamnya

Kita bisa menampilkan jam server dengan PHP. Caranya, ketik <?php echo date("H:i:s");?> (baca juga: Tutorial Fungsi PHP: PHP date() Function) 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 seperti gambar di atas. 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 saya masih menggunakan timezone Europe/Berlin. Ini untuk memastikan saja bahwa jam yang kita tampilkan benar dari servernya.

cara menampilkan animasi jamserver php javascrip


Kedua, 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, saya menyarankan disimpan saja dalam bentuk file javascript, dengan nama jamServer.js. File ini nantinya akan kita panggil dan supaya lebih terstruktur juga rapi.



Jangan lewatkan:
Mempercantik Presentasi PowerPoint Dengan Font Awesome
Tutorial HTML untuk Pemula
Cara Mudah Mengatasi Hardisk Eksternal yang Tidak Terbaca (Corrupted/Unreadble)




Full script dan demo

Berikut full script pembahasan kita kali ini.
<!DOCTYPE html> <html> <head> <title>Menampilkan Animasi Jam Server dengan PHP & Javascript</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script> </head> <body> <span id="jamServer"><?php echo date('H:i:s');?></span> <script type="text/javascript" src="jamServer.js"></script> </body> </html>

Demo.

cara menampilkan animasi jam server dengan php dan javascript

Struktur file.

cara menampilkan animasi jam server dengan php dan javascript

Tidak ada komentar:

Posting Komentar

Silakan berkomentar dengan kalimat yang bijak.

Post Bottom Ad