CRUD Fetch API di JavaScript (Create, Read, Update, Delete)

Dalam tutorial sebelumnya sudah dijelaskan tentang fetch API di JavaScript, dan pada tutorial kali ini akan dijelaskan tentang CRUD Fetch API di JavaScript. CRUD adalah singkatan dari:

• Create → Menambah data baru

• Read → Menampilkan data dari server

• Update → Mengubah data yang sudah ada

• Delete → Menghapus data

Empat operasi ini adalah dasar dari hampir semua aplikasi web, mulai dari sistem manajemen produk, blog, hingga aplikasi to-do list. Dengan Fetch API, semua proses CRUD bisa dilakukan langsung dari JavaScript tanpa perlu library tambahan.

Setup Awal

Untuk latihan, kita akan menggunakan API publik gratis dari JSONPlaceholder

<h2>Daftar Post</h2>
<ul id="post-list"></ul>

<h3>Tambah Post Baru</h3>
<input type="text" id="title" placeholder="Judul"><br>
<textarea id="body" placeholder="Isi post"></textarea><br>
<button id="add">Tambah</button>

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

1️⃣ READ – Menampilkan Data dari Server

Ambil data dari API dan tampilkan di halaman:

const list = document.getElementById('post-list');

function getPosts() {
  fetch('https://jsonplaceholder.typicode.com/posts?_limit=5')
    .then(res => res.json())
    .then(posts => {
      list.innerHTML = '';
      posts.forEach(post => {
        const li = document.createElement('li');
        li.innerHTML = `
          <strong>${post.title}</strong><br>${post.body}
          <button onclick="editPost(${post.id})">Edit</button>
          <button onclick="deletePost(${post.id})">Hapus</button>
        `;
        list.appendChild(li);
      });
    })
    .catch(err => console.error('Gagal mengambil data:', err));
}

getPosts();

Hasil: daftar post akan muncul, lengkap dengan tombol Edit dan Hapus.

2️⃣ CREATE – Menambah Data Baru

Tambahkan fungsi untuk tombol “Tambah”.

document.getElementById('add').addEventListener('click', () => {
  const title = document.getElementById('title').value;
  const body = document.getElementById('body').value;

  if (!title || !body) {
    alert('Judul dan isi wajib diisi!');
    return;
  }

  fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ title, body, userId: 1 })
  })
    .then(res => res.json())
    .then(data => {
      alert('Post baru berhasil ditambahkan!');
      console.log('Data:', data);
      getPosts();
    })
    .catch(err => console.error('Gagal menambah data:', err));
});

Penjelasan:

• method: 'POST' digunakan untuk menambah data.

• body berisi data dalam format JSON.

• Setelah berhasil, kita panggil getPosts() agar tampilan diperbarui.

3️⃣ UPDATE – Mengedit Data

Tambahkan fungsi editPost() yang dipanggil dari tombol Edit:

function editPost(id) {
  const newTitle = prompt('Masukkan judul baru:');
  const newBody = prompt('Masukkan isi baru:');

  if (!newTitle || !newBody) return;

  fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {
    method: 'PUT',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ title: newTitle, body: newBody, userId: 1 })
  })
    .then(res => res.json())
    .then(data => {
      alert('Post berhasil diperbarui!');
      console.log('Data update:', data);
      getPosts();
    })
    .catch(err => console.error('Gagal update data:', err));
}

Catatan:

• Gunakan PUT untuk mengganti seluruh data, atau PATCH jika hanya ingin mengubah sebagian.

• Di aplikasi nyata, biasanya kamu akan menampilkan form edit, bukan prompt().

4️⃣ DELETE – Menghapus Data

Tambahkan fungsi hapus sederhana:

function deletePost(id) {
  if (!confirm('Yakin ingin menghapus post ini?')) return;

  fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {
    method: 'DELETE'
  })
    .then(() => {
      alert('Post berhasil dihapus!');
      getPosts();
    })
    .catch(err => console.error('Gagal menghapus data:', err));
}

Tips:
Gunakan confirm() agar pengguna tidak menghapus data tanpa sengaja.

Bonus: Menangani Loading dan Error

Untuk tampilan lebih interaktif, tambahkan teks loading dan error handler:

function getPosts() {
  list.innerHTML = '<li>⏳ Sedang memuat...</li>';
  fetch('https://jsonplaceholder.typicode.com/posts?_limit=5')
    .then(res => res.json())
    .then(posts => {
      list.innerHTML = '';
      posts.forEach(post => {
        const li = document.createElement('li');
        li.innerHTML = `<strong>${post.title}</strong><br>${post.body}`;
        list.appendChild(li);
      });
    })
    .catch(() => {
      list.innerHTML = '<li>❌ Gagal memuat data</li>';
    });
}

Ringkasan Fungsi CRUD dengan Fetch API

Operasi	HTTP Method	Fungsi JavaScript
Create	POST	fetch(url, { method: 'POST' })
Read	GET	fetch(url)
Update	PUT/PATCH	fetch(url, { method: 'PUT' })
Delete	DELETE	fetch(url, { method: 'DELETE' })

Kesimpulan

Dengan Fetch API, kamu bisa membuat aplikasi CRUD sederhana langsung dari browser tanpa library tambahan.
Langkah-langkah utamanya:

1. Read – Ambil dan tampilkan data.

2. Create – Tambah data baru.

3. Update – Ubah data tertentu.

4. Delete – Hapus data dari server.

Konsep ini adalah pondasi penting untuk membangun aplikasi web dinamis seperti dashboard admin, blog, hingga sistem e-commerce.