Mini Project: Aplikasi Daftar Belanja dengan LocalStorage dan DOM Event

Dalam dunia pengembangan web modern, membuat Aplikasi Daftar Belanja dengan LocalStorage dan DOM Event adalah latihan sempurna untuk memahami cara kerja JavaScript DOM dan penyimpanan data lokal tanpa menggunakan database. Aplikasi Daftar Belanja (Shopping List) ini berfungsi layaknya daftar belanja nyata, kita dapat menambah, menghapus, atau menandai barang yang sudah dibeli, dan semua datanya akan tersimpan permanen di browser.

Melalui project sederhana namun praktis ini, kamu akan belajar menggabungkan berbagai fitur JavaScript penting seperti manipulasi DOM, event handling, penyimpanan data dengan LocalStorage, serta logika CRUD (Create, Read, Update, Delete). Bahkan, di tahap lanjutan kamu akan menambahkan fitur pencarian, filter, dan edit item agar aplikasi semakin canggih dan user-friendly.

Struktur Dasar Aplikasi

Mulailah dengan membuat struktur HTML sederhana seperti berikut:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Aplikasi Daftar Belanja</title>
  <style>
    body { font-family: Arial; margin: 40px; }
    ul { list-style: none; padding: 0; }
    li { padding: 8px; margin: 4px 0; background: #f1f1f1; display: flex; justify-content: space-between; align-items: center; border-radius: 5px; }
    li.done { text-decoration: line-through; color: gray; background: #d3ffd3; }
    button { margin-left: 8px; }
    .controls { margin-top: 20px; }
  </style>
</head>
<body>
  <h1> Daftar Belanja</h1>

  <form id="formBelanja">
    <input type="text" id="itemInput" placeholder="Tambah item..." required>
    <button type="submit">Tambah</button>
  </form>

  <div class="controls">
    <input type="text" id="searchInput" placeholder="Cari barang...">
    <select id="filterSelect">
      <option value="all">Semua</option>
      <option value="done">Sudah Dibeli</option>
      <option value="undone">Belum Dibeli</option>
    </select>
  </div>

  <ul id="listBelanja"></ul>

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

Logika JavaScript Dasar

Buat file app.js dan mulai menulis logika dasarnya untuk menambah, menampilkan, dan menghapus item.

const form = document.getElementById('formBelanja');
const input = document.getElementById('itemInput');
const list = document.getElementById('listBelanja');
const search = document.getElementById('searchInput');
const filter = document.getElementById('filterSelect');

let daftarBelanja = JSON.parse(localStorage.getItem('belanja')) || [];

function simpanData() {
  localStorage.setItem('belanja', JSON.stringify(daftarBelanja));
}

function renderList() {
  list.innerHTML = '';
  daftarBelanja.forEach((item, index) => {
    const li = document.createElement('li');
    li.textContent = item.nama;
    if (item.selesai) li.classList.add('done');

    // Tombol aksi
    const actions = document.createElement('div');

    const btnDone = document.createElement('button');
    btnDone.textContent = item.selesai ? 'Undo' : 'Done';
    btnDone.onclick = () => toggleDone(index);

    const btnEdit = document.createElement('button');
    btnEdit.textContent = 'Edit';
    btnEdit.onclick = () => editItem(index);

    const btnHapus = document.createElement('button');
    btnHapus.textContent = 'Hapus';
    btnHapus.onclick = () => hapusItem(index);

    actions.append(btnDone, btnEdit, btnHapus);
    li.appendChild(actions);
    list.appendChild(li);
  });
}

function tambahItem(nama) {
  daftarBelanja.push({ nama, selesai: false, waktu: new Date().toISOString() });
  simpanData();
  renderList();
}

function hapusItem(index) {
  daftarBelanja.splice(index, 1);
  simpanData();
  renderList();
}

function toggleDone(index) {
  daftarBelanja[index].selesai = !daftarBelanja[index].selesai;
  simpanData();
  renderList();
}

function editItem(index) {
  const namaBaru = prompt('Edit nama barang:', daftarBelanja[index].nama);
  if (namaBaru) {
    daftarBelanja[index].nama = namaBaru.trim();
    simpanData();
    renderList();
  }
}

// Event submit form
form.addEventListener('submit', e => {
  e.preventDefault();
  const namaItem = input.value.trim();
  if (namaItem !== '') {
    tambahItem(namaItem);
    input.value = '';
  }
});

// Render awal
renderList();

Fitur Pencarian dan Filter

Tambahkan logika untuk fitur pencarian dan filter agar pengguna lebih mudah menemukan barang.

function renderList() {
  list.innerHTML = '';

  let hasilFilter = daftarBelanja.filter(item => 
    item.nama.toLowerCase().includes(search.value.toLowerCase())
  );

  if (filter.value === 'done') {
    hasilFilter = hasilFilter.filter(item => item.selesai);
  } else if (filter.value === 'undone') {
    hasilFilter = hasilFilter.filter(item => !item.selesai);
  }

  hasilFilter.forEach((item, index) => {
    const li = document.createElement('li');
    li.textContent = item.nama;
    if (item.selesai) li.classList.add('done');

    const actions = document.createElement('div');
    const btnDone = document.createElement('button');
    btnDone.textContent = item.selesai ? 'Undo' : 'Done';
    btnDone.onclick = () => toggleDone(index);

    const btnEdit = document.createElement('button');
    btnEdit.textContent = 'Edit';
    btnEdit.onclick = () => editItem(index);

    const btnHapus = document.createElement('button');
    btnHapus.textContent = 'Hapus';
    btnHapus.onclick = () => hapusItem(index);

    actions.append(btnDone, btnEdit, btnHapus);
    li.appendChild(actions);
    list.appendChild(li);
  });
}

search.addEventListener('input', renderList);
filter.addEventListener('change', renderList);

Dengan tambahan kode di atas, pengguna bisa mengetik kata kunci untuk mencari barang atau memilih tampilan antara semua barang, sudah dibeli, atau belum dibeli.

Pengembangan Lebih Lanjut

Untuk membuat Aplikasi Daftar Belanja dengan LocalStorage lebih menarik dan fungsional, kamu bisa menambahkan beberapa pengembangan berikut:

1. Penyimpanan Tanggal dan Waktu

Tampilkan waktu kapan item ditambahkan agar daftar lebih informatif.
Misalnya:

li.innerHTML = `${item.nama} <small>${new Date(item.waktu).toLocaleString()}</small>`;

2. Ekspor dan Impor Data

Tambahkan tombol untuk ekspor data ke file JSON dan impor kembali agar daftar bisa dibagikan ke perangkat lain.

3. Tema Gelap (Dark Mode)

Tambahkan tombol untuk mengganti tema menggunakan class toggle seperti:

document.body.classList.toggle('dark-mode');

4. Responsif dan Mobile Friendly

Gunakan CSS Flexbox atau framework seperti Bootstrap 5 agar tampilan lebih rapi di berbagai perangkat.

5. Sinkronisasi dengan Backend

Langkah lanjutan: kirim data belanja ke server PHP + MySQL agar bisa diakses dari mana pun.

Manfaat Belajar dari Project Ini

Dengan menyelesaikan mini project ini, kamu akan memahami:

Manipulasi DOM dan Event Listener di JavaScript.
Penggunaan LocalStorage untuk data permanen tanpa database.
Logika dasar CRUD (Create, Read, Update, Delete).
Implementasi fitur pencarian dan filter data.
Konsep pengembangan aplikasi sederhana berbasis browser.

Kesimpulan

Membangun Aplikasi Daftar Belanja dengan LocalStorage dan DOM Event adalah langkah awal yang kuat untuk memahami cara kerja aplikasi web interaktif. Dengan menambahkan fitur lanjutan seperti pencarian, filter, dan edit data, kamu sudah belajar bagaimana membuat aplikasi yang tidak hanya fungsional tetapi juga efisien dan menarik.

Mulailah dari versi dasar, kemudian kembangkan langkah demi langkah. Dari sini, kamu sudah punya fondasi yang sama dengan aplikasi produktivitas modern seperti to-do list atau task manager — semua dimulai dari daftar belanja sederhana.