Mini Project: Aplikasi Buku Tamu Online dengan LocalStorage dan DOM Event

Membuat aplikasi web sederhana adalah salah satu cara terbaik untuk memahami konsep dasar JavaScript. Salah satu contohnya adalah Mini Project: Aplikasi Buku Tamu Online (Guest Book) dengan LocalStorage dan DOM Event, di mana kita akan membuat form interaktif untuk mencatat data tamu seperti nama dan pesan. Aplikasi ini dapat menyimpan data secara permanen di browser tanpa perlu menggunakan database server.

Dalam proyek ini, kamu akan belajar bagaimana memanfaatkan LocalStorage untuk menyimpan data secara lokal dan DOM Event untuk menangani interaksi pengguna seperti pengiriman form dan penghapusan data. Selain itu, proyek ini juga melatih pemahaman tentang manipulasi elemen HTML secara dinamis menggunakan JavaScript murni. Dengan teknik ini, kamu bisa membuat aplikasi kecil yang ringan namun tetap fungsional, bahkan dapat dijalankan secara offline.

Tujuan Proyek

Tujuan dari Mini Project: Aplikasi Buku Tamu Online (Guest Book) dengan LocalStorage dan DOM Event ini adalah:

Membuat form input nama dan pesan tamu.
Menampilkan daftar tamu secara real-time di halaman web.
Menyimpan data tamu di LocalStorage agar tetap ada setelah halaman direfresh.
Menggunakan DOM Event untuk menangani input, tombol kirim, dan hapus data.
Melatih kemampuan dasar JavaScript dalam membuat aplikasi berbasis data.

Struktur HTML Dasar

Buat file index.html untuk tampilan utama aplikasi Buku Tamu.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Buku Tamu Online</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>Buku Tamu Online</h1>
    <form id="guestForm">
      <input type="text" id="name" placeholder="Nama Anda" required>
      <textarea id="message" placeholder="Pesan Anda" required></textarea>
      <button type="submit">Kirim</button>
    </form>

    <h2>Daftar Tamu</h2>
    <div id="guestList"></div>
  </div>

  <script src="app.js"></script>
</body>
</html>

Styling dengan CSS

Tambahkan gaya sederhana di file style.css agar tampilan lebih menarik.

body {
  font-family: 'Poppins', sans-serif;
  background: #f2f2f2;
  margin: 0;
  padding: 20px;
}

.container {
  max-width: 700px;
  margin: auto;
  background: #fff;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

form input, form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

button {
  background: #007bff;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background: #0056b3;
}

.guest {
  background: #e9f7ff;
  border-left: 4px solid #007bff;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  position: relative;
}

.guest h3 {
  margin: 0;
  color: #333;
}

.guest button {
  position: absolute;
  top: 10px;
  right: 10px;
  background: crimson;
}

Logika JavaScript: LocalStorage dan Event DOM

Buat file app.js untuk menangani interaksi dan penyimpanan data tamu.

class GuestBook {
  constructor() {
    this.guests = JSON.parse(localStorage.getItem('guests')) || [];
    this.form = document.getElementById('guestForm');
    this.nameInput = document.getElementById('name');
    this.messageInput = document.getElementById('message');
    this.guestList = document.getElementById('guestList');

    this.form.addEventListener('submit', (e) => this.addGuest(e));
    this.renderGuests();
  }

  addGuest(e) {
    e.preventDefault();
    const name = this.nameInput.value.trim();
    const message = this.messageInput.value.trim();

    if (name && message) {
      const newGuest = {
        id: Date.now(),
        name,
        message
      };

      this.guests.push(newGuest);
      this.saveToLocalStorage();
      this.renderGuests();
      this.form.reset();
    }
  }

  deleteGuest(id) {
    this.guests = this.guests.filter(g => g.id !== id);
    this.saveToLocalStorage();
    this.renderGuests();
  }

  saveToLocalStorage() {
    localStorage.setItem('guests', JSON.stringify(this.guests));
  }

  renderGuests() {
    this.guestList.innerHTML = '';
    this.guests.forEach(guest => {
      const div = document.createElement('div');
      div.classList.add('guest');
      div.innerHTML = `
        <h3>${guest.name}</h3>
        <p>${guest.message}</p>
        <button onclick="app.deleteGuest(${guest.id})">Hapus</button>
      `;
      this.guestList.appendChild(div);
    });
  }
}

const app = new GuestBook();

Penjelasan Fitur

✅ LocalStorage digunakan untuk menyimpan data tamu agar tetap tersimpan meskipun halaman direfresh.
✅ DOM Event (addEventListener) menangani pengiriman form dan klik tombol hapus.
✅ Class GuestBook digunakan untuk mengorganisir fungsi aplikasi agar mudah dikembangkan.
✅ Data disimpan dalam bentuk JSON dan ditampilkan kembali secara dinamis ke halaman web.

Pengembangan Lebih Lanjut

Setelah memahami dasar Mini Project: Aplikasi Buku Tamu Online (Guest Book) dengan LocalStorage dan DOM Event, kamu bisa menambahkan beberapa fitur menarik seperti:

Menampilkan tanggal dan waktu komentar.
Menambahkan sistem pencarian tamu.
Fitur edit pesan tamu.
Sinkronisasi dengan backend PHP + MySQL agar data lebih permanen.

Kesimpulan

Mini Project: Aplikasi Buku Tamu Online (Guest Book) dengan LocalStorage dan DOM Event merupakan contoh nyata bagaimana JavaScript dapat digunakan untuk membangun aplikasi web sederhana namun fungsional. Dengan memanfaatkan LocalStorage, data dapat tersimpan secara lokal tanpa database, sementara DOM Event memberikan interaktivitas yang dinamis. Konsep ini menjadi pondasi penting sebelum melangkah ke pengembangan aplikasi berbasis server dan framework modern.