Menampilkan Jam Secara Realtime dengan javascript dan php

Archives code

Halo juragan coding semua?? Sudah minum kopi belum?? Disini tidak disuguh kopi ya, bawa sendiri sendiri ya..wkwkwk

Serius gan, becanda saja,,hehehe, oke pada kesempatan kali ini kami dari team archives code akan menjelaskan cara menampilkan jam secara realtime dengan javascript dan php dengan mudah dan gampang punya

Fasilitas yang sering dilupakan oleh para pengembang web adalah fasilitas jam yang secara realtime sehingga pengunjung akan mengetaui jam berapa sekarang.

Cara menampilkan tanggal dengan php adalah dengan memanfaatkan function date yang telah disediakan oleh php

code :

<?php print date('d F Y'); // menghasilkan 04 September 2012 ?>

Begitu juga ketika kita ingin menmpilkan jam dengan php yaitu dengan menggunakan function date
code :

<?php print date('H:i:s'); //hasilnya misalnya : 08:30:45 ?>

Tapi karena PHP adalah server side script, programnya dijalankan di server, maka tampilan waktu yang muncul tidak akan pernah berubah selama tidak dilakukan request ulang ke server, padahal seharusnya tampilan detiknya haruslah berubah setiap detiknya. Oleh karena itulah maka dibutuhkan JavaScript yang merupakan client side script, untuk menampilkan jam ini.

maka solusi nya adalah dengan menggunakan javascript. Sebagai contoh kode nya

<!DOCTYPE html>

<head>

//set timezone

<?php date_default_timezone_set('Asia/Jakarta'); ?>

//buat object date berdasarkan waktu di server

var serverTime = new Date(<?php print date('Y, m, d, H, i, s, 0'); ?>);

//buat object date berdasarkan waktu di client

var clientTime = new Date();

//hitung selisih

var Diff = serverTime.getTime() - clientTime.getTime();

//fungsi displayTime yang dipanggil di bodyOnLoad dieksekusi tiap 1000ms = 1detik

function displayServerTime(){

//buat object date berdasarkan waktu di client

var clientTime = new Date();

//buat object date dengan menghitung selisih waktu client dan server

var time = new Date(clientTime.getTime() + Diff);

//ambil nilai jam

var sh = time.getHours().toString();

//ambil nilai menit

var sm = time.getMinutes().toString();

//ambil nilai detik

var ss = time.getSeconds().toString();

//tampilkan jam:menit:detik dengan menambahkan angka 0 jika angkanya cuma satu digit (0-9)

document.getElementById("clock").innerHTML = (sh.length==1?"0"+sh:sh) + ":" + (sm.length==1?"0"+sm:sm) + ":" + (ss.length==1?"0"+ss:ss);

}

</script>

</head>

Waktu Server (Timezone: Asia/Jakarta):<br/>

</body>

</html>

Coba jalankan script anda jika sudah benar harus nya sudah jalan

Sudah ngantuk juragan,, kopinya sudah habis 3 cangkir, maka artikel tentang cara menampilkan jam secara realtime dengan javascript dan php resmi ditutup..wkwkwk

Apabila ada yang perlu dibisikkan silahkan bisikin pada kolom komentar ya gan

Okay, selamat mencoba dan semoga sukses menyertai agan semua, jangan lupa mampir pada artikel seru lainnya ya gan