TIPS #3 Tutorial CRUD Laravel dan AJAX (2 Part) - Part 2

Part 2: Implementasi AJAX di Frontend

Bagian ini fokus pada interaksi AJAX agar CRUD berjalan tanpa reload halaman.

1. Tampilan Blade

<form id="formAdd">
  <input type="text" name="title" class="form-control mb-2" placeholder="Judul">
  <textarea name="content" class="form-control mb-2" placeholder="Konten"></textarea>
  <button class="btn btn-primary">Tambah</button>
</form>

<table class="table table-bordered mt-3">
  <thead><tr><th>Judul</th><th>Konten</th><th>Aksi</th></tr></thead>
  <tbody id="postTable"></tbody>
</table>

2. Script AJAX (jQuery)

$.ajaxSetup({
  headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
});

// Load Data
function loadPosts() {
  $.get("/posts/fetch", function(posts){
    let rows = '';
    posts.forEach(post => {
      rows += `<tr data-id="${post.id}">
        <td>${post.title}</td>
        <td>${post.content}</td>
        <td>
          <button class="btn btn-warning btnEdit">Edit</button>
          <button class="btn btn-danger btnDelete">Delete</button>
        </td>
      </tr>`;
    });
    $("#postTable").html(rows);
  });
}
loadPosts();

// Tambah
$("#formAdd").submit(function(e){
  e.preventDefault();
  $.post("/posts/store", $(this).serialize(), function(){
    $("#formAdd")[0].reset();
    loadPosts();
  });
});

// Hapus
$(document).on("click", ".btnDelete", function(){
  let id = $(this).closest("tr").data("id");
  $.ajax({ url: `/posts/delete/${id}`, type: "DELETE", success: loadPosts });
});

// Edit
$(document).on("click", ".btnEdit", function(){
  let tr = $(this).closest("tr");
  let id = tr.data("id");
  let title = prompt("Edit Judul", tr.find("td:eq(0)").text());
  let content = prompt("Edit Konten", tr.find("td:eq(1)").text());
  if(title && content){
    $.ajax({
      url: `/posts/update/${id}`,
      type: "PUT",
      data: {title, content},
      success: loadPosts
    });
  }
});

3. Hasil Akhir

• Tambah data lewat form, otomatis tampil tanpa reload.
• Edit data dengan prompt, langsung update tabel.
• Delete data terhapus dari database & tampilan.