CRUD JavaScript Tanpa API dengan Form dan Table Dinamis

Pada tutorial sebelumnya sudah dibahas tentang LocalStorage dan CRUD Fetch API di JavaScript, sekarang akan kita bahas CRUD JavaScript Tanpa API dengan Form dan Table Dinamis. Dan yang perlu diketahui bahwa aplikasi CRUD (Create, Read, Update, Delete) tidak selalu membutuhkan server database. Kamu bisa membuat versi sederhana langsung di browser, menggunakan:

Array JavaScript untuk menampung data sementara
LocalStorage untuk menyimpan data secara permanen

Hasilnya, aplikasi tetap bisa dijalankan offline, cocok untuk latihan dasar atau prototipe.

Struktur HTML Dasar

Buat file index.html dengan form input dan tabel data:

<h2>Manajemen Produk</h2>

<form id="productForm">
  <input type="text" id="name" placeholder="Nama Produk" required>
  <input type="number" id="price" placeholder="Harga" required>
  <button type="submit">Tambah</button>
</form>

<table border="1" cellpadding="8">
  <thead>
    <tr>
      <th>No</th>
      <th>Nama Produk</th>
      <th>Harga</th>
      <th>Aksi</th>
    </tr>
  </thead>
  <tbody id="tableBody"></tbody>
</table>

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

Penjelasan:

Form digunakan untuk menambah data baru.
Tabel menampilkan data yang sudah tersimpan.
Semua logika CRUD akan dikerjakan di file app.js.

JavaScript CRUD Dasar

Buat file app.js dan tulis kode berikut:

let products = JSON.parse(localStorage.getItem("products")) || [];
const form = document.getElementById("productForm");
const tableBody = document.getElementById("tableBody");

function renderTable() {
  tableBody.innerHTML = "";
  products.forEach((product, index) => {
    const row = document.createElement("tr");
    row.innerHTML = `
      <td>${index + 1}</td>
      <td>${product.name}</td>
      <td>Rp ${product.price}</td>
      <td>
        <button onclick="editProduct(${index})">Edit</button>
        <button onclick="deleteProduct(${index})">Hapus</button>
      </td>
    `;
    tableBody.appendChild(row);
  });
}

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const name = document.getElementById("name").value.trim();
  const price = document.getElementById("price").value.trim();

  if (name && price) {
    products.push({ name, price });
    saveData();
    renderTable();
    form.reset();
  }
});

function saveData() {
  localStorage.setItem("products", JSON.stringify(products));
}

function deleteProduct(index) {
  if (confirm("Yakin ingin menghapus produk ini?")) {
    products.splice(index, 1);
    saveData();
    renderTable();
  }
}

function editProduct(index) {
  const newName = prompt("Nama baru:", products[index].name);
  const newPrice = prompt("Harga baru:", products[index].price);
  if (newName && newPrice) {
    products[index].name = newName;
    products[index].price = newPrice;
    saveData();
    renderTable();
  }
}

renderTable();

Penjelasan Logika CRUD

Operasi	Fungsi	Penjelasan
Create	`form.addEventListener()`	Menambahkan data baru ke array
Read	`renderTable()`	Menampilkan semua data di tabel
Update	`editProduct()`	Mengedit data dengan prompt
Delete	`deleteProduct()`	Menghapus data dari array
Save	`saveData()`	Menyimpan data ke LocalStorage

Menyimpan Data ke LocalStorage

Fungsi saveData() bertugas menyimpan semua data ke browser:

localStorage.setItem("products", JSON.stringify(products));

Saat halaman dimuat, data akan otomatis diambil:

let products = JSON.parse(localStorage.getItem("products")) || [];

Dengan begitu, data tidak akan hilang meskipun halaman di-refresh.

Bonus: Styling Sederhana

Tambahkan sedikit CSS agar tampilan lebih rapi:

<style>
body {
  font-family: Arial, sans-serif;
  max-width: 600px;
  margin: 40px auto;
}

form {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

input {
  flex: 1;
  padding: 8px;
}

button {
  padding: 8px 12px;
  cursor: pointer;
}

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

th {
  background: #f4f4f4;
}
</style>

Studi Kasus: Manajemen Produk, Kontak, atau Tugas

Struktur CRUD ini bisa kamu kembangkan untuk berbagai kebutuhan:

Manajemen Produk → nama, harga, stok
Manajemen Kontak → nama, nomor HP
To-Do List → nama tugas, status selesai/belum

Hanya dengan mengganti nama field dan kolom, kamu sudah bisa membuat berbagai aplikasi mini.

Kesimpulan

Dengan JavaScript dan LocalStorage, kamu bisa membangun CRUD lengkap tanpa API atau server.
Langkah-langkahnya sederhana:

Gunakan array untuk menampung data.
Simpan data ke LocalStorage agar tidak hilang.
Render data ke tabel HTML.
Tambahkan fitur edit dan hapus data.

Konsep ini menjadi pondasi untuk membuat aplikasi frontend dinamis, seperti dashboard admin atau manajemen data offline.