Jam sepertinya hal yang sederhana, tapi ternyata jam bisa membuat masalah tertentu. Perbedaan antara client dan server dalam beberapa aplikasi web dapat menjadi masalah tersendiri. Dalam sebuah halaman web, dapat saja kita menampilkan jam di web dengan javascript biasa, namun hasilnya hanyalah jam Client, artinya jam yang diambilkan waktunya dari waktu masing-masing pengakses internet. Bayangkan saja apabila sebuah input data dilakukan berdasar jam Client, maka bisa terjadi banyak masalah, terutama manipulasi waktu dan kesalahan time stamp.
Salah satu syarat menampilkan jam server ke browser adalah dengan menggunakan perintah command PHP :
Y = Year
m = month (angka)
d = day (angka)
H = Jam
i = menit
s = detik
Hanya saja, tentu kita harus melakukan refresh seluruh halaman setiap saat untuk meload jam tersebut. Ada satu cara klasik meload gambar dengan menggunakan perintah HTML , dimana meta tersebut akan diletakkan di head dari sebuah halaman:
Dengan demikian tiap dua detik, halaman tersebut akan direfresh. Hanya saja, cara ini sungguh akan mengganggu karena halaman browser akan selalu terrefresh seluruhnya, tentu apapun input yang sedang kita masukkan, akan hilang kembali. Untuk itu, yang akan kita lakukan adalah melakukan REFRESH DIV, dimana DIV itu akan diisi dengan jam.
Cara paling asyik adalah dengan memanfaatkan fungsi $get() dari JQuery. Kita juga bisa menggunakan ajax. Namun untuk saya, lebih suka dengan JQuery. Untuk contoh, saya menggunakan tiga buah file, yaitu index.html, date-real.php dan sebuah source jquery terbaru dalam format compressed. JQuery lama juga masih dapat digunakan untuk membuat jam sederhana ini.
[bimo@server jam]# ls -a
. .. date-real.php index.html jquery-1.9.1.min.js
[bimo@server jam]#
File date-real akan berisi perintah simple:
File index.html akan saya buat seperti demikian, terdiri dari tiga buah bagian :
PENJELASAN
Bagian terutama adalah bagian tempat jam. Elemen utama saya beri nama “tempat jam”. Elemen itu akan dikontrol oleh script control, dimana saya memilih menggunakan fungsi DOM Javascript HTML. Masih ingat fungsi DOM kan?
.
.
var x = document.getElementById('tempat_jam'); //mencari apa yang dinamakan tempat_jam
x.innerHTML = xJam; //mengisi tempat_jam dengan variabel xJam
.
.
Lantas, dari manakah variabel xJam? Variabel tersebut didapat dari hasil GET date_real.php, dimana file date-real.php tersebut memanggil jam server.
.
.
$.get("date-real.php", function(Jam){
var xJam = Jam;
.
.
Selanjutnya fungsi seluruhnya tersebut dikemas dalam sebuah Interval waktu fungsi versi JQuery. JQuery memiliki cara melakukan pemanggilan fungsi yang berbasis waktu dengan cara :
setInterval(
function(){
//isi fungsi
},1000);
Sehingga penggabungannya adalah seperti demikian : Setiap 1000 milidetik akan dipanggil suatu fungsi yang memanggil data JAM SERVER, dan meletakkannya di DIV tempat_jam.
Untuk memperindah tampilan, dapat diformat properti dari div tempat_jam, sesuai dengan keinginan hati kita masing-masing. Semoga bermanfaat
Demonya ada di SINI : https://blogit.bimosaurus.com/demo/jam
Kira-kira ini bisa nggak dimanfaatin buat jadi cron-job-wannabe om? Hehe 😀
Cron Job dimana Nin? Kalau di sisi client, bisa saja kok, yang penting kan value time server sudah terambil kan? barulah nanti membuat script lagi di sisi client untuk membuat penjadwalannya..
Okeh sip 😀
Kalo dari sisi server mungkin nggak om??
Kalau server mah, sudah jelas bisa nin hehehe.. Kan semua user memiliki hak untuk membuat Cron
seperti yang ada di wordpress yaa?? 😮
iya, hampir segala aplikasi terkenal akan menggunakan jam server 🙂 hanya saja jarang yang menampilkan hingga detik. Oh ya untuk lebih bagus lagi mungkin kita kelak bisa memparsing jam real dari server-server waktu seperti NTP nya LIPI 🙂
tempat saya kok jamnya macet gak spt di demo panjenengan mas..
minta revisi scriptnya donk..
nuwun
Kira-kira begini mas
Buat satu file sejajar dengan index.php berisi seperti ini:
Dengan nama date-real.php
Backup terlebih dulu index.php utama mas, untuk menjaaga jika terjadi error pada file index.php yang akan kita edit. Editlah index.php pada bagian
menjadi
Kemudian bagian bawah index.php, sebelum tanda </body> tambahkan script berikut:
Artikel ini muncul juga karena eksperimen akan kebutuhan web itu
sudah saya ubah mas..
waktunya dah jalan seperti contoh..
tapi format bulan dan tanggalnya jadi kacau..
mohon pencerahan..
nuwun
sorry..
udah okey..
nuwun
mohon pencerahan lagi mas..
untuk time yg di member modifnya seperti apa?
tak utak utik krn terbatas kemampuan gak bisa..
nuwun
Intinya sama mas. Pada bagian index.php berilah script control tepat sebelum berakhir </body>
Tapi karena file date-real.php ini sudah ada, maka tinggal manggil saja yang letaknya ada di direktori sebelumnya, perhatikan tanda ../date-real.php pada script tersebut.
Script ini bertugas memanggil date-real.php secara berkala. date-real.php ini bertugas melakukan fungsi-fungsi server, sedangkan script control tersebut berfungsi memanggil setiap saat di sisi client.
Untuk meletakkan jam tersebut, seperti yang tertera pada baris ke 6 yaitu : ‘tempat_jam’. Buatlah element div atau span dengan nama ID ‘tempat_jam’
Seperti berikut:
Tempatkan dimana saja div itu pada tempat yang dikehendaki. Jadi mas Adi tinggal membuat 2 hal: nambakan script-kontrol, dan menambahkan div. Sedangkan nanti divnya propertinya bisa diset melalui CSS member, contoh:
#tempat_jam{ font-size:11px; color:#fff; font-family:Trebuchet }Mangga mas.. semoga berguna
Om, tertarik sekali dengan artikel ini, mohon penjelasan bila data date_real.php diganti dari data base,,, thanks
Bisa mas, yaitu dengan mengganti
menjadi
Jika ingin tetap realtime ya
mau tanya gan ,,, bagaimana cara nya agar jam, menit dan detik jalan tanpa harus di refresh (berjalan sendiri),,
saya memakai dreamweaver mx 2004???
tolong penjelasan nya gan ,,,masih bingung atas penjelasan2 di atas ,, ma’lum newbie mas ,, hehehe
Seperti yang dalam posting itu Gan, kita memanfaatkan ajax / JQuery. Jadi Ajax dan JQuery itu akan merefreshkan DIV yang kita tuju :).