[Contoh] Cara Menampilkan Jam Server Secara Real Time

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

17 thoughts on “[Contoh] Cara Menampilkan Jam Server Secara Real Time

    1. 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..

    1. 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 🙂

    1. 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

    1. 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

  1. 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

Leave a Reply

Your email address will not be published. Required fields are marked *