Ajax Crud Javascript

MUAZHAN

9 min read

·

Jun 22, 2024

20

Share

AJAX CRUD dengan JavaScript

AJAX (Asynchronous JavaScript and XML) merupakan teknik yang memungkinkan aplikasi web untuk memperbarui konten halaman web secara dinamis tanpa me-reload seluruh halaman. Teknik ini sangat berguna untuk membangun aplikasi web interaktif dengan pengalaman pengguna yang lebih baik. Dalam artikel ini, kita akan membahas bagaimana menggunakan AJAX untuk membangun aplikasi CRUD (Create, Read, Update, Delete) sederhana dengan JavaScript.

1. Persiapan

Sebelum memulai, pastikan kamu memiliki server web yang berjalan dan file HTML, CSS, dan JavaScript yang diperlukan. Dalam contoh ini, kita akan menggunakan server web lokal dengan PHP sebagai bahasa server-side.

2. HTML

Berikut adalah contoh HTML yang akan kita gunakan untuk menampilkan tabel data dan form untuk CRUD:

  
  
  
  


  
Data Produk

  

    

      

        
ID
        
Nama Produk
        
Harga
        
Aksi
      
    
    

      
  

  

    
Form Produk
    

      
      Nama Produk:
      



      Harga:
      



      Simpan
    
  

  Tambah Produk

  

3. JavaScript

Berikut adalah kode JavaScript yang akan menangani AJAX CRUD:

// Fungsi untuk menampilkan data produk
function displayProducts() {
  const tableBody = document.getElementById("productTable").getElementsByTagName("tbody")[0];
  tableBody.innerHTML = '';

  const xhr = new XMLHttpRequest();
  xhr.open("GET", "get_products.php");
  xhr.onload = function() {
    if (this.status === 200) {
      const products = JSON.parse(this.responseText);
      products.forEach(product => {
        const row = tableBody.insertRow();
        row.insertCell().textContent = product.id;
        row.insertCell().textContent = product.name;
        row.insertCell().textContent = product.price;
        const actionCell = row.insertCell();
        const editBtn = document.createElement("button");
        editBtn.textContent = "Edit";
        editBtn.addEventListener('click', () => {
          editProduct(product.id);
        });
        const deleteBtn = document.createElement("button");
        deleteBtn.textContent = "Hapus";
        deleteBtn.addEventListener('click', () => {
          deleteProduct(product.id);
        });
        actionCell.appendChild(editBtn);
        actionCell.appendChild(deleteBtn);
      });
    }
  };
  xhr.send();
}

// Fungsi untuk menambahkan produk baru
function addProduct() {
  const formContainer = document.getElementById("formContainer");
  formContainer.style.display = "block";

  const form = document.getElementById("productForm");
  form.addEventListener('submit', (event) => {
    event.preventDefault();
    const xhr = new XMLHttpRequest();
    xhr.open("POST", "add_product.php");
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onload = function() {
      if (this.status === 200) {
        formContainer.style.display = "none";
        displayProducts();
      }
    };
    const formData = new FormData(form);
    xhr.send(formData);
  });
}

// Fungsi untuk mengedit produk
function editProduct(id) {
  const formContainer = document.getElementById("formContainer");
  formContainer.style.display = "block";

  const xhr = new XMLHttpRequest();
  xhr.open("GET", "get_product.php?id=" + id);
  xhr.onload = function() {
    if (this.status === 200) {
      const product = JSON.parse(this.responseText);
      const form = document.getElementById("productForm");
      document.getElementById("productID").value = product.id;
      document.getElementById("productName").value = product.name;
      document.getElementById("productPrice").value = product.price;

      form.addEventListener('submit', (event) => {
        event.preventDefault();
        const xhr = new XMLHttpRequest();
        xhr.open("POST", "update_product.php");
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.onload = function() {
          if (this.status === 200) {
            formContainer.style.display = "none";
            displayProducts();
          }
        };
        const formData = new FormData(form);
        xhr.send(formData);
      });
    }
  };
  xhr.send();
}

// Fungsi untuk menghapus produk
function deleteProduct(id) {
  if (confirm("Apakah Anda yakin ingin menghapus produk ini?")) {
    const xhr = new XMLHttpRequest();
    xhr.open("POST", "delete_product.php");
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onload = function() {
      if (this.status === 200) {
        displayProducts();
      }
    };
    const formData = new FormData();
    formData.append("id", id);
    xhr.send(formData);
  }
}

// Menampilkan data produk saat halaman dimuat
displayProducts();

// Menambahkan event listener untuk tombol "Tambah Produk"
const addBtn = document.getElementById("addBtn");
addBtn.addEventListener('click', addProduct);

4. Server-side (PHP)

Berikut adalah contoh PHP script untuk menangani AJAX request dari JavaScript:

get_products.php:

add_product.php:

get_product.php:

update_product.php:

delete_product.php:

5. Pengujian

Setelah semua kode di atas selesai dibuat, jalankan server web lokal dan buka file HTML di browser. Kamu sekarang dapat menambahkan, mengedit, dan menghapus produk melalui tabel dan form yang ditampilkan di halaman web.

6. Kesimpulan

Dengan menggunakan AJAX, kamu dapat membangun aplikasi web CRUD yang interaktif dan dinamis. AJAX memungkinkanmu untuk memperbarui konten halaman web tanpa me-reload seluruh halaman, sehingga memberikan pengalaman pengguna yang lebih baik.

Catatan

• Pastikan untuk menyesuaikan kode server-side (PHP) dengan database dan tabel yang kamu gunakan.
• Pastikan untuk melakukan validasi input dan keamanan data pada server-side untuk mencegah serangan berbahaya.
• Gunakan library JavaScript seperti jQuery untuk mempermudah penggunaan AJAX.