» » Membuat Jam Digital Dengan JQuery

Membuat Jam Digital Dengan JQuery

Oleh
Marbelweb – Assalamu’alaikum, Sahabat marbelweb kali ini saya akan sharing bagaimana cara membuat Jam Digital dengan JQuery. Banyak sekali mungkin tutorial yang sudah ada mengenai cara membuat Jam, tapi saya coba juga barang kali masih bisa bermanfaat buat Sobat semua yang membaca Blog ini.
Membuat Jam Digital Dengan JQuery

Membuat Jam Digital memang banyak caranya, kita bisa menggunakan Javascript, Ajax, PHP, JQuery dengan Plugin JqClocknya dan juga bisa dengan JQuery saja. Baiklah kali ini saya akan memberikan cara “Bagaimana membuat Jam Digital dengan JQuery” JQuery saja tentunya, untuk membuat jam dengan Plugin JqClock akan diberikan di waktu yang lain. Ok Bro...!!!
Begininih caranye :
1.    Kita diwajibkan membuat dulu  nih skrip PHP yang berfungsi untuk mengambil waktu dari server ( komputer system yang kita pakai )
2.    Yang kedua ini nih yang agak penting untuk bisa melanjutkan ke langkah berikutnya, apa itu? Tentunya Harus Tahu Bagaimana Menggunakan JQuery! Sobat sudah tahu semua kan? Sip ah, kita lanjut saja ok. Bagi yang belum tahu Gimana Gan!!! He..he.. Coba cari di mbah google aje ye!
Ini Skrip pertama yang kita butuhkan
jam.php
<?php
date_default_timezone_set("Asia/Jakarta");
$jam=date("H:i:s");
echo"$jam WIB";
?>


Sampai disini coba deh dijalankan di browser, apa yang akan tampil? Muncul tampilan jam saat ini dari kommputer anda kan ???? kalo tempat gue nih munculnya “Hantu...” e...e...e... keluarnya seperti ini :
Membuat Jam Digital Dengan JQuery

Pada tampilan diatas DETIK yang ditampilkan adalah terlihat STATIS, untuk bisa mendapatkan detik-detik berikutnya adalah dengan cara merefresh/reload pada browser.
Untuk mengatasi hal itu coba sobat membuat 1 (satu) skrip lagi dengan JQuery, skrip ini akan membuat jam yang kita buat nantinya menjadi dinamis, detik-detiknya bisa berjalan terus/berdetak secara terus menerus, tanpa kita reload/refresh.
Berikut nih skripnya
jam_jquery.php
<!doctype html>
<html>
<head>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function() {
    setInterval (function() {
                   $('#divjam').load('jam.php?acak='+Math.random());
          },1000); //akan mengerjakan refresh tiap 1 detik
});
</script>
<meta charset="utf-8">
<title>.:Membuat Jam dengan JQuery:.</title>
</head>
<body>
<div id="divjam"></div>
</body>
</html>

Membuat Jam Digital Dengan JQuery
Sepintas keliatan sama dengan diatas, Perbedaanya terlihat Jelas di Komputer Anda. He...he... udah tahu kan bedanya???? Kalo belum berarti belum berhasil, coba perhatikan dan amati skripnya barang kali ada yang keliru. Perbedaanya adalah terletak pada detik yang ditampilkan oleh skrip jam.php terlihat statis, sedangkan detik yang ditampilkan skrip jam_jquery.php adalah detiknya berjalan secara terus menerus.

Semoga Bermanfaat, Selamat Mencoba!!!


Lihat Totorial di www.academia.edu

Download Tutorial ( PDF )

0 Komentar untuk "Membuat Jam Digital Dengan JQuery"

Back To Top