Membuat Kalender Sederhana dengan PHP, HTML dan CSS

Selamat datang di postingan kali ini! Kali ini kami akan belajar bagaimana membuat sebuah kalendar sederhana menggunakan PHP, HTML dan CSS. Kalender ini akan menampilkan tabel waktu dan tanggal untuk setiap bulan pada sebuah halaman web.

Perluapan Sebelum Memulai

Seperti semua projek web, kita harus mempersiapkan beberapa alat dan lingkungan sebelum memulai:

Text Editor: Pastikan Anda memiliki text editor favorit Anda, misalnya Visual Studio Code, Atom atau Sublime Text.
Web Server: Perlu installasi web server seperti XAMPP, WAMP atau MAMP agar kita bisa menjalankan PHP.
Database Management System (DBMS): Karena kalender ini akan menggunakan database untuk menyimpan data tanggal-tanggal, perlu instans DBMS seperti MySQL atau PostgreSQL.

Langkah-langkah Membuat Kalendar Sederhana

Langkah 1: Buat File HTML

Buat file baru dengan nama index.html dan isi file tersebut dengan berikut ini:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple Calendar</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="calendar"></div>
  <script src="script.js"></script>
</body>
</html>

Langkah 2: Buat File CSS (styles.css)

Buat file baru dengan nama styles.css dan isi file tersebut dengan berikut ini:

body {
  font-family: Arial, sans-serif;
}

#calendar {
  width: 350px;
  margin: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  text-align: center;
  padding: 8px;
  border: 1px solid #ccc;
}

th {
  background-color: #f2f2f2;
}

tr:hover {background-color: #ddd;}

Langkah 3: Buat File PHP (script.php)

Buat file baru dengan nama script.php dan isi file tersebut dengan berikut ini:

<?php
$month = date('m');
$year = date('Y');
$days_in_month = cal_days_in_month(CAL_GREGORIAN, $year, $month);
?>
<table id="calendar">
  <tr>
    <th colspan="7"><?php echo ucfirst($month) . ' ' . $year; ?></th>
  </tr>
  <tr>
    <th>Sun</th>
    <th>Mon</th>
    <th>Tue</th>
    <th>Wed</th>
    <th>Thu</th>
    <th>Fri</th>
    <th>Sat</th>
  </tr>
<?php for ($day = 1; $day <= $days_in_month; $day++): ?>
  <?php if (($day + date('w')) > cal_days_in_month(CAL_GREGORIAN, $year, $month)): break;?>
    <tr>
      <td><?php echo $day; ?></td>
<?php endfor;?>
<?php for ($i = count($week) - 1; $i >= 0; $i--): ?>
  <?php if (!isset($days[$i])): ?>
    <td></td>
  <?php else: ?>
    <td><?php echo $days[$i]; ?></td>
  <?php endif;?>
<?php endfor;?>
</table>

Langkah 4: Buat File JavaScript (script.js)

Buat file baru dengan nama script.js dan isi file tersebut dengan berikut ini:

document.addEventListener("DOMContentLoaded", function() {
  const calendar = document.getElementById('calendar');

  fetch('script.php')
    .then(response => response.text())
    .then(html => {
      calendar.innerHTML = html;
    })
});

Langkah 5: Jalankan Projek

Setelah semua file terbuat, jalankan web server Anda seperti XAMPP atau MAMP, lalu buka browser Anda dan kunjungi localhost pada port default (3000/8080). Jika semuanya berjalan lancar, Anda akan melihat kalender sederhana yang telah dibuat.

Penutup

Seperti apa yang sudah kami pelajari hari ini, membuat sebuah kalendar sederhana menggunakan PHP, HTML dan CSS tidak sulit. Sekian postingan ini, terima kasih telah mengikuti postingan kami! Jangan lupa untuk berbagi postingan ini kepada teman-teman Anda, semoga bermanfaat bagi mereka juga.

Sampai jumpa di postingan selanjutnya!

Published May, 2015