Ketika berbicara tentang pengembangan web, ada banyak fitur sederhana tapi krusial yang sering dibutuhkan oleh developer. Salah satunya adalah timer. Entah untuk menghitung mundur waktu promo, membatasi durasi ujian online, atau sekadar menampilkan jam berjalan di halaman web, timer memiliki peran penting. Di balik layar, PHP sebagai bahasa server-side mampu mengatur waktu dengan fleksibel. Mari kita kupas tuntas bagaimana cara membuat timer menggunakan PHP, lengkap dengan penjelasan, contoh kode, serta trik praktis yang bisa langsung kamu terapkan.
Mengenal Konsep Timer dalam Pemrograman Web
Sebelum menyentuh kode, ada baiknya memahami dulu konsep dasar timer. Dalam dunia web, timer biasanya berupa:
- Countdown Timer: Menghitung mundur dari waktu tertentu ke nol.
- Stopwatch/Timer Naik: Menghitung maju dari nol ke waktu yang berjalan.
- Real-time Clock: Menampilkan jam sesuai waktu server atau zona tertentu.
PHP, yang berjalan di sisi server, tidak bekerja seperti JavaScript yang bisa terus memperbarui tampilan di browser. Karena itu, cara membuat timer dengan PHP sedikit berbeda: PHP bertugas menyiapkan data waktu, lalu frontend (HTML, CSS, JavaScript) bisa memanfaatkannya untuk menampilkan hitungan real-time.
Fungsi Tanggal dan Waktu di PHP
Agar bisa membuat timer, kita perlu berkenalan dengan fungsi bawaan PHP yang berhubungan dengan waktu. Beberapa yang paling sering digunakan adalah:
time()→ Menghasilkan waktu saat ini dalam format Unix Timestamp.date()→ Menampilkan waktu dengan format tertentu, misalnyaY-m-d H:i:s.strtotime()→ Mengubah string menjadi timestamp.
Contoh sederhana:
<?php
echo "Sekarang: " . date("Y-m-d H:i:s");
?>
Output ini akan menampilkan waktu server secara real-time ketika halaman dimuat ulang. Namun, untuk timer, kita perlu menghitung selisih antara dua waktu.
Membuat Countdown Timer dengan PHP
Countdown timer sering digunakan pada website e-commerce, misalnya untuk flash sale. Prinsipnya sederhana: tentukan target waktu berakhir, lalu hitung selisihnya dengan waktu sekarang.
Contoh:
<?php
// Tentukan waktu berakhir
$endTime = strtotime("2025-09-30 23:59:59");
// Waktu sekarang
$now = time();
// Hitung selisih
$remaining = $endTime - $now;
// Konversi ke hari, jam, menit, detik
$days = floor($remaining / (60 * 60 * 24));
$hours = floor(($remaining % (60 * 60 * 24)) / (60 * 60));
$minutes = floor(($remaining % (60 * 60)) / 60);
$seconds = $remaining % 60;
echo "Sisa waktu: $days hari, $hours jam, $minutes menit, $seconds detik.";
?>
Kode ini akan menampilkan sisa waktu secara statis. Agar terlihat real-time, biasanya hasil PHP dikombinasikan dengan JavaScript untuk memperbarui angka setiap detik.
Menggabungkan PHP dengan JavaScript untuk Timer Dinamis
Karena PHP hanya berjalan saat halaman dimuat, kita perlu JavaScript untuk membuat timer yang hidup di browser. PHP bisa mengirimkan nilai awal, lalu JavaScript mengurus hitungan mundurnya.
Contoh integrasi:
<?php
$endTime = strtotime("2025-09-30 23:59:59");
$now = time();
$remaining = $endTime - $now;
?>
<div id="timer"></div>
<script>
var remaining = <?php echo $remaining; ?>;
function updateTimer() {
var days = Math.floor(remaining / (60 * 60 * 24));
var hours = Math.floor((remaining % (60 * 60 * 24)) / (60 * 60));
var minutes = Math.floor((remaining % (60 * 60)) / 60);
var seconds = remaining % 60;
document.getElementById("timer").innerHTML =
days + " hari " + hours + " jam " + minutes + " menit " + seconds + " detik";
if (remaining > 0) {
remaining--;
}
}
setInterval(updateTimer, 1000);
updateTimer();
</script>
Dengan pendekatan ini, nilai waktu awal dihitung dengan PHP, tetapi tampilannya selalu diperbarui secara real-time oleh JavaScript. Ini adalah teknik yang umum digunakan untuk timer di web modern.
Timer untuk Membatasi Akses Halaman
Selain countdown untuk tampilan, timer juga bisa digunakan untuk logika di server. Misalnya, kamu ingin membatasi pengguna agar hanya bisa mengakses halaman selama 5 menit sejak login.
<?php
session_start();
if (!isset($_SESSION['start_time'])) {
$_SESSION['start_time'] = time();
}
$duration = 300; // 5 menit
$elapsed = time() - $_SESSION['start_time'];
if ($elapsed > $duration) {
echo "Waktu akses sudah habis.";
session_destroy();
} else {
echo "Sisa waktu: " . ($duration - $elapsed) . " detik.";
}
?>
Dengan logika ini, PHP benar-benar mengatur durasi sesi tanpa bergantung pada JavaScript. Cocok untuk aplikasi ujian online atau form yang harus selesai dalam batas waktu tertentu.
Membuat Stopwatch Sederhana dengan PHP
Stopwatch berbeda dengan countdown karena menghitung naik. PHP bisa memanfaatkan session atau database untuk mencatat kapan stopwatch dimulai, lalu menghitung selisih waktu saat pengguna mengakses halaman.
<?php
session_start();
if (!isset($_SESSION['start_time'])) {
$_SESSION['start_time'] = time();
}
$elapsed = time() - $_SESSION['start_time'];
echo "Stopwatch: " . gmdate("H:i:s", $elapsed);
?>
Format gmdate("H:i:s", $elapsed) sangat membantu untuk menampilkan durasi dalam jam:menit:detik. Jika dikombinasikan dengan JavaScript, stopwatch bisa ditampilkan secara lebih interaktif.
Menampilkan Real-Time Clock dengan PHP
Kadang kita hanya ingin menampilkan jam berjalan sesuai server. Meski lebih efektif jika langsung dengan JavaScript, PHP tetap bisa memberi referensi awal waktu server agar sinkron.
<?php
echo "Server Time: " . date("H:i:s");
?>
Untuk tampilan yang berjalan otomatis, kita bisa mengirim waktu server ke JavaScript dan melanjutkan perhitungannya di sisi client.
Studi Kasus: Timer untuk Flash Sale
Bayangkan kamu sedang membuat fitur flash sale di toko online. Pengunjung harus tahu berapa lama lagi promo akan berakhir. Dengan PHP, kita atur waktu berakhir promo di database, lalu ambil nilainya untuk ditampilkan.
<?php
// Misalnya dari database
$promo_end = "2025-10-01 00:00:00";
$endTime = strtotime($promo_end);
$now = time();
$remaining = $endTime - $now;
?>
<div id="flashSaleTimer"></div>
<script>
var remaining = <?php echo $remaining; ?>;
function updateFlashSaleTimer() {
var hours = Math.floor((remaining % (60 * 60 * 24)) / (60 * 60));
var minutes = Math.floor((remaining % (60 * 60)) / 60);
var seconds = remaining % 60;
document.getElementById("flashSaleTimer").innerHTML =
hours + " jam " + minutes + " menit " + seconds + " detik";
if (remaining > 0) remaining--;
}
setInterval(updateFlashSaleTimer, 1000);
updateFlashSaleTimer();
</script>
Dengan pendekatan ini, promo countdown tampil hidup, dan PHP memastikan waktu yang dipakai sesuai server, bukan manipulasi jam di perangkat pengguna.
