Menampilkan Tanggal dan Waktu Secara Realtime menggunakan PHP & Javascript – Hello teman-teman semua, bagaimana nih kabarnya? Pada artikel kali ini kita akan belajar cara menampilkan Tanggal dan Waktu saat ini secara Realtime menggunakan bahasa pemrograman PHP dan Javascript. Tutorial kali ini sering kita jumpai pada website – website tertentu untuk menampilkan waktu atau jam sesuai dengan waktu saat ini. Lebih tepatnya disini kita mencoba untuk membuat Jam sederhana menggunakan Website. Jam atau Waktu secara Realtime biasanya digunakan untuk membuat aplikasi kuis untuk menghitung sisa waktu yang tersedia pada saat mengerjakan kuis tersebut. Adapun contoh lain dari penggunaan waktu secara realtime ini yaitu untuk membuat aplikasi sederhana seperti Time Countdown ataupun alarm dimana jika waktu yang ditentukan habis maka sistem akan memunculkan pesan peringatan.
Tanggal dan Waktu Secara Realtime
Sebelum kita masuk ke dalam pembuatan Website sederhana ini, pertama-tama kita harus mengetahui apa itu “REALTIME”. Istilah realtime ini sering kita jumpai khususnya pada saat pembuatan website atau menampilkan data dari Website. Realtime merupakan Istilah dimana aksi suatu sistem melakukan respon atau tanggapan itu dilakukan secara langsung di saat itu juga. Maksudnya disini yaitu memberikan tanggapan suatu aksi pada kondisi yang terjadi saat ini ketika kita mengaksesnya. Contoh sederhananya kita dapat melihat langsung hasil terbaru dari grafik suatu data pada Website tanpa harus melakukan Refresh terhadap halaman Website tersebut.
Terdapat banyak cara yang bisa kita gunakan untuk menampilkan waktu dan Tanggal secara realtime pada website kita. Salah satunya yaitu menggunakan sintak bawaan dari Javascript yaitu setTimeOut(). Sintak ini digunakan digunakan untuk menjalankan suatu baris program berdasarkan interval waktu yang ditentukan. Adapun format dari penggunaan sintak ini seperti berikut.
let timerId = setTimeout(func|code, [delay])
Keterangan Parameter:
- Parameter func|code berfungsi untuk meletakkan Kode Program atau Function yang kita gunakan.
- Parameter delay digunakan untuk mengatur waktu yang kita gunakan untuk memanggil sintak program atau Function yang kita gunakan. Pada parameter ini format yang digunakan adalah millisecond/milidetik (1000 Milidetik = 1 Detik)
Pada artikel kali ini kita akan menggunakan bahasa pemrograman PHP untuk menampilkan website yang kita buat ke dalam Browser kita. Sedangkan Pemrograman Javascript kita gunakan untuk menyimpan Function atau kode program untuk menampilkan waktu dan tanggal secara realtime. Jadi pertama – tama kita buat dulu file PHP dengan nama LatihanWaktu.php untuk menyimpan tampilan halaman website kita.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Jam Realtime PHP/Javascript</title>
</head>
<body>
<div id="clock">
<h2>⭐ Jam Realtime PHP/Javascript ⭐</h2>
<div id="time">
<div>
<span id="hours">00</span>
</div>
<div>
<span id="minutes">00</span>
</div>
<div>
<span id="seconds">00</span>
</div>
<div>
<span id="amOrpm">AM</span>
</div>
</div>
<div id="cal">
<span id="fullyear">25 Januari 2021</span>
</div>
<h2>💻 Kecoak Sakti Official 💻</h2>
</div>
</body>
</html>
Selanjutnya tambahkan sintak CSS yang digunakan untuk membuat tampilan halaman website kita agar lebih menarik. Tampilan CSS ini kita letakkan di dalam sintak <head></head>. Sintak CSS ini kita letakkan pada Sintak <Style></Style>.
<style>
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #060a1f;
}
#clock {
background-color: #FFF;
padding: 10px;
border-radius: 10px;
text-align: center;
}
#time {
display: flex;
}
#time div {
position: relative;
margin: 0 5px;
background: #000;
}
#time div span {
width: 100px;
height: 80px;
background: #2196f3;
color: #fff;
font-weight: 300;
display: flex;
justify-content: center;
align-items: center;
font-size: 3em;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}
#cal {
position: relative;
margin: 0 5px;
background: #000;
}
#cal span {
background: #000;
color: #fff;
font-weight: 300;
display: flex;
justify-content: center;
align-items: center;
font-size: 3em;
}
</style>
Setelah proses pembuatan design selesai diataur. Tahapan selanjutnya kita akan membuat dan menyisipkan sintak Javascript pada halaman website PHP kita. Sintak javascript ini disimpan ke dalam Sintak <Script></Script>.
<script type="text/javascript">
function SettingCurrentTime() {
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();
var amOrPm = hours < 12 ? "AM" : "PM";
hours = hours === 0 ? 12 : hours > 12 ? hours - 12 : hours;
hours = addZero(hours);
minutes = addZero(minutes);
seconds = addZero(seconds);
var currentDate = currentTime.getDate();
var currentMonth = ConvertMonth(currentTime.getMonth());
var currentYear = currentTime.getFullYear();
var fullDateDisplay = `${currentDate} ${currentMonth} ${currentYear}`;
document.getElementById("hours").innerText = hours;
document.getElementById("minutes").innerText = minutes;
document.getElementById("seconds").innerText = seconds;
document.getElementById("amOrpm").innerText = amOrPm;
document.getElementById("fullyear").innerText = fullDateDisplay;
var timer = setTimeout(SettingCurrentTime, 1000);
}
function addZero(component) {
return component < 10 ? "0" + component : component;
}
function ConvertMonth(component) {
month_array = new Array('Januari', 'Febuari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember');
return month_array[component];
}
SettingCurrentTime();
</script>
Coba perhatikan sintak Javascript diatas, kita menggunakan 3 buah Method atau Function. Function SettingCurrentTime() digunakan untuk memanggil dan menampilkan Waktu dan Tanggal pada website kita. Pada Function ini kita memanggil sintak setTimeout() yang digunakan untuk menampilkan waktu dan tanggal ini secara Realtime. Function addZero() digunakan untuk melakukan menambahkan format angka Nol di depan pada data angka tunggal (Angka yang kecil dari 10). Sedangkan Function ConvertMonth() digunakan untuk melakukan konversi format bulan dari angka menjadi teks (Januari, Febuari, dst.)
Setelah proses pembuata website ini selesai, Selanjutnya Kita coba Jalankan Project Ini Pada Browser Kita Dengan Mengakses Halaman Localhost Dan Panggil Folder Project Kita.
Http://Localhost/LatihanPHP/Timer/LatihanWaktu.php
Disini Contohnya Nama Project Saya Yaitu LatihanWaktu.php. Jadi Kita Panggil Saja Nama Project Kita Pada Browser Kita. Setelah Itu Akan Muncul Hasil Seperti Berikut Ini.
Sekian Materi kita tentang tutorial Menampilkan Tanggal dan Waktu Secara Realtime menggunakan PHP & Javascript. Dari penjelasan diatas dapat kita simpulkan bahwa penerapan Waktu secara Realtime ini banyak sekali kita jumpai pada pembuatan suatu aplikasi atau sistem. Contoh sederhananya yaitu pada aplikai Time CountDown, Aplikasi Alarm dan Aplikasi Quis. Untuk Project Lengkapnya Dapat Didownload Pada Link ((GITHUB)) Kami Ini.
