Membuat Countdown dengan PHP dan Bootstrap 5
Countdown atau hitung mundur merupakan hal yang umum digunakan seperti misal dalam sistem pendaftaran untuk membuat formulir pendaftaran dapat diakses dalam rentang waktu yang sudah ditentukan sebelumnya pada sebuah website atau sistem berbasis web, selain untuk memberikan informasi terkait waktu pelaksanaan pendaftaran juga memberikan kesan yang lebih profesional dari sistem yang kita miliki. Dalam kesempatan kali ini saya ingin saya akan memberikan contoh sederhana bagaimana membuat countdown dengan php dan bootstrap 5.
Jadi dalam contoh kasus kali ini Saya akan memberikan contoh bagaimana melakukan countdown yang bertujuan agar user/pendaftar hanya bisa mengakses formulir pendaftaran dalam rentang waktu yang sudah ditentukan, dimana nantinya akan ada interface waktu secara realtime untuk menampilkan hitungan mundurnya
#1 Persiapan Database
Disini kamu perlu menyiapkan sebuah database atau tabel yang berisi informasi tanggal buka ataupun tanggal tutup.
CREATE TABLE `pengaturan_pendaftaran` (
`pendaftaran_id` tinyint UNSIGNED NOT NULL,
`pendaftaran_pesan` tinytext,
`pendaftaran_buka` datetime NOT NULL,
`pendaftaran_tutup` datetime NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
--
-- Dumping data for table `pengaturan_pendaftaran`
--
INSERT INTO `pengaturan_pendaftaran` (`pendaftaran_id`, `pendaftaran_pesan`, `pendaftaran_buka`, `pendaftaran_tutup`) VALUES
(1, 'Saat ini halaman pendaftaran belum dibuka, silahkan datang kembali saat pendaftaran sudah dibuka', '2025-03-17 09:30:00', '2025-04-05 23:00:00');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `pengaturan_pendaftaran`
--
ALTER TABLE `pengaturan_pendaftaran`
ADD PRIMARY KEY (`pendaftaran_id`);
COMMIT;#2 Logika waktu untuk menampilkan count down
Saya asumsikan misalnya kode php yang kamu tulis menggunakan konsep mvc native php, kemudian dalam controller kamu cukup membuat logika waktu misalnya :
Jika hari ini >= tanggl buka pendafatran && jika hari ini <= tanggal tutup pendaftaran = tampilkan formulir.
Sehingga kurang lebih logika secara keseluruhan bisa dilihat seperti berikut :
class Register extends Apps
{
private $settings;
public $today;
public function __construct(){
parent::__construct();
$this->settings = $this->joinSettings();
$this->today = date('Y-m-d H:i:s');
//$this->today = '2026-06-06 23:00:00';
}
//query sesuai gaya atau builder wuery masing - masing, intinya query ke tabel pengaturan daftarnya
public function joinSettings() {
$data =
$this->leftJoin('pengaturan_smtp','inf_sekolah.sekolah_id=pengaturan_smtp.smtp_id')
->leftJoin('pengaturan_pendaftaran','inf_sekolah.sekolah_id=pengaturan_pendaftaran.pendaftaran_id')
->where('inf_sekolah.sekolah_id=1')
->get('inf_sekolah');
$data->execute();
$result = $data->fetchAll(\PDO::FETCH_ASSOC);
return $result?$result[0]:'';
}
public function registerpage(View $view, Helper $app, Frontpage $template)
{
$pendaftaran_buka = $this->settings['pendaftaran_buka'];
$pendaftaran_tutup = $this->settings['pendaftaran_tutup'];
$phraseBuilder = new PhraseBuilder(5, '0123456789');
$captcha = new CaptchaBuilder(null, $phraseBuilder);
$captcha->build();
$faker = Factory::create('id_ID');
if ($this->today >= $this->settings['pendaftaran_buka'] && $this->today <= $this->settings['pendaftaran_tutup']):
return $view->make('register.register', [
'title' => 'Pendaftaran',
'template' => $template,
'app' => $app,
'cap' => $captcha,
'faker' => $faker,
'pendaftaran_buka' => $pendaftaran_buka,
'pendaftaran_tutup' => $pendaftaran_tutup
]);
else:
return $view->make('register.register_close', [
'title' => 'Pendaftaran Belum Dibuka',
'template' => $template,
'app' => $app,
'today'=>$this->today,
'pesan' => $this->settings['pendaftaran_pesan'],
'pendaftaran_buka' => $pendaftaran_buka,
'pendaftaran_tutup' => $pendaftaran_tutup
]);
endif;
}#3 Menampilkan Countdown Pembukaan Pendaftaran
Jika nilai – nilai pada variabel sudah dikirim dari controller ke view maka selanjutnya kita buat interface untuk menampilkan countdownnya seperti contoh berikut :
<?php
$template->head(['aos','bootstrap','icon','box_icon','glightbox','remix','swiper','datatables','toastr','style','colors'], $title);
$template->header('header-transparent2');
?>
<section id="contact" class="contact" style="margin-top: 120px;">
<div class="container">
<div class="section-title" data-aos="fade-up">
<h2><?=$title?></h2>
<p>Halaman Pendaftaran</p>
</div>
<div class="row">
<div class="col-lg-12 mt-5 mt-lg-0" data-aos="fade-left" data-aos-delay="200">
<?php if ($pendaftaran_buka > $today): ?>
<?=$app->alert2('alert alert-danger', $pesan)?>
<div class="card">
<div class="card-header bg-primary text-white">
<h4 class="mb-0 text-center">Waktu pendaftaran akan dibuka dalam waktu:</h4>
</div>
<div class="card-body">
<div class="row text-center">
<div class="col-3">
<h3 id="days" class="display-4">00</h3>
<p>Days</p>
</div>
<div class="col-3">
<h3 id="hours" class="display-4">00</h3>
<p>Hours</p>
</div>
<div class="col-3">
<h3 id="minutes" class="display-4">00</h3>
<p>Minutes</p>
</div>
<div class="col-3">
<h3 id="seconds" class="display-4">00</h3>
<p>Seconds</p>
</div>
</div>
</div>
</div>
<?php else: ?>
<?=$app->alert2('alert alert-danger', $pesan)?>
<div class="my-3">
<span class="inline-block pr-5">Sudah punya akun?</span>
<a class="inline-block txt-danger" href="/auth/login">Login</a>
</div>
<?php endif; ?>
</div>
</div>
</div>
</section>
<?php
$template->footer(['jquery','vanillajs','aos','bootstrap','glightbox','swiper','toastr','main']);
$app->set_toastr();
?>
<script>
// Ambil waktu buka dari PHP
var pendaftaranBuka = new Date("<?=$pendaftaran_buka?>").getTime();
// Elemen countdown
var countdownElement = document.getElementById('countdown');
var interval = setInterval(function() {
var now = new Date().getTime();
// Hitung waktu yang tersisa sampai pendaftaran buka
var timeRemaining = pendaftaranBuka - now;
if (timeRemaining <= 0) {
clearInterval(interval);
// Jika waktu sudah habis, menampilkan pesan
document.getElementById('days').innerHTML = '00';
document.getElementById('hours').innerHTML = '00';
document.getElementById('minutes').innerHTML = '00';
document.getElementById('seconds').innerHTML = '00';
} else {
// Menghitung hari, jam, menit, detik yang tersisa
var days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
var hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);
// Menampilkan waktu countdown pada elemen yang sesuai
document.getElementById('days').innerHTML = days < 10 ? '0' + days : days;
document.getElementById('hours').innerHTML = hours < 10 ? '0' + hours : hours;
document.getElementById('minutes').innerHTML = minutes < 10 ? '0' + minutes : minutes;
document.getElementById('seconds').innerHTML = seconds < 10 ? '0' + seconds : seconds;
}
}, 1000);
</script>
#4 Countdown penutupan pendaftaran
Selanjutnya jika misalnya kita ingin melakukan perhitungan mundur untuk waktu ditutupnya pendaftaran maka kita tinggal modifikasi javascriptnya menjadi seperti berikut :
<script>
// Ambil waktu tutup pendaftaran dari PHP
var pendaftaranTutup = new Date("<?=$pendaftaran_tutup?>").getTime();
// Elemen countdown tutup
var countdownElementTutup = document.getElementById('countdown_tutup');
var intervalTutup = setInterval(function() {
var now = new Date().getTime();
// Hitung waktu yang tersisa sampai pendaftaran tutup
var timeRemainingTutup = pendaftaranTutup - now;
if (timeRemainingTutup <= 0) {
clearInterval(intervalTutup);
// Jika waktu sudah habis, menampilkan pesan
document.getElementById('days_tutup').innerHTML = '00';
document.getElementById('hours_tutup').innerHTML = '00';
document.getElementById('minutes_tutup').innerHTML = '00';
document.getElementById('seconds_tutup').innerHTML = '00';
} else {
// Menghitung hari, jam, menit, detik yang tersisa
var daysTutup = Math.floor(timeRemainingTutup / (1000 * 60 * 60 * 24));
var hoursTutup = Math.floor((timeRemainingTutup % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutesTutup = Math.floor((timeRemainingTutup % (1000 * 60 * 60)) / (1000 * 60));
var secondsTutup = Math.floor((timeRemainingTutup % (1000 * 60)) / 1000);
// Menampilkan waktu countdown pada elemen yang sesuai
document.getElementById('days_tutup').innerHTML = daysTutup < 10 ? '0' + daysTutup : daysTutup;
document.getElementById('hours_tutup').innerHTML = hoursTutup < 10 ? '0' + hoursTutup : hoursTutup;
document.getElementById('minutes_tutup').innerHTML = minutesTutup < 10 ? '0' + minutesTutup : minutesTutup;
document.getElementById('seconds_tutup').innerHTML = secondsTutup < 10 ? '0' + secondsTutup : secondsTutup;
}
}, 1000);
</script>tampilkan bagian countdown penutupan pendaftaran pada halaman lain atau ketika formulir sudah bisa diakses
Jadi kurang lebih seperti itu bagaimana membuat countdown pendaftaran dengan php dan bootstrap, semoga bermanfaat !
Refrensi : https://bootstrapexamples.com/@moana-silva/countdown-timer