Ajax Crud Php

MUAZHAN

9 min read

·

Jun 23, 2024

13

Share

AJAX CRUD dengan PHP

AJAX (Asynchronous JavaScript and XML) adalah teknik yang memungkinkan halaman web untuk berkomunikasi dengan server secara asinkron, tanpa perlu me-reload halaman web. CRUD (Create, Read, Update, Delete) merupakan operasi dasar yang sering dilakukan dalam aplikasi web untuk mengelola data. Menggabungkan AJAX dan PHP untuk CRUD memungkinkan Anda membangun aplikasi web yang lebih responsif, efisien, dan interaktif.

Keuntungan Menggunakan AJAX CRUD dengan PHP

• Pengalaman pengguna yang lebih baik: Pengguna tidak perlu menunggu halaman web dimuat ulang setiap kali mereka ingin melakukan operasi CRUD.
• Performa yang lebih baik: Data hanya dimuat saat dibutuhkan, sehingga mengurangi jumlah data yang ditransfer.
• Antarmuka yang lebih dinamis: Anda dapat memperbarui bagian-bagian tertentu dari halaman web tanpa memuat ulang seluruh halaman.

Langkah-Langkah Membuat AJAX CRUD dengan PHP

Berikut adalah langkah-langkah umum untuk membuat AJAX CRUD dengan PHP:

1. Siapkan Database dan Tabel:
   • Buat database dan tabel yang akan Anda gunakan untuk menyimpan data.
2. Buat File PHP untuk Mengelola Data:
   • Buat file PHP (misalnya, data.php) yang akan menangani permintaan AJAX dan mengelola data di database. File ini akan berisi fungsi untuk operasi CRUD:
     • create(): Menambahkan data baru ke database.
     • read(): Mengambil data dari database.
     • update(): Memperbarui data yang sudah ada di database.
     • delete(): Menghapus data dari database.
3. Buat File HTML untuk Menampilkan Data:
   • Buat file HTML (misalnya, index.html) yang akan menampilkan data dan berisi formulir untuk melakukan operasi CRUD.
4. Tambahkan JavaScript untuk Mengirim Permintaan AJAX:
   • Gunakan JavaScript untuk mengirim permintaan AJAX ke file PHP saat tombol "Tambah", "Ubah", atau "Hapus" diklik.
   • Gunakan fungsi XMLHttpRequest atau fetch di JavaScript.
   • Tampilkan respons dari server di halaman web.
5. Proses Data di File PHP:
   • Saat file PHP menerima permintaan AJAX, proses data yang dikirimkan.
   • Gunakan koneksi database untuk melakukan operasi CRUD yang diperlukan.
   • Kembalikan respons ke JavaScript dalam format yang dapat diproses.

Contoh Kode:

Berikut adalah contoh sederhana kode untuk membuat AJAX CRUD dengan PHP:

File data.php:

query($sql) === TRUE) {
    return "Data berhasil ditambahkan";
  } else {
    return "Error: " . $conn->error;
  }
}

// Fungsi untuk mengambil semua data
function read() {
  global $conn;
  $sql = "SELECT * FROM users";
  $result = $conn->query($sql);

  $data = [];
  if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
      $data[] = $row;
    }
  }

  return json_encode($data);
}

// Fungsi untuk memperbarui data yang sudah ada
function update($id, $name, $email) {
  global $conn;
  $sql = "UPDATE users SET name='$name', email='$email' WHERE id=$id";
  if ($conn->query($sql) === TRUE) {
    return "Data berhasil diperbarui";
  } else {
    return "Error: " . $conn->error;
  }
}

// Fungsi untuk menghapus data
function delete($id) {
  global $conn;
  $sql = "DELETE FROM users WHERE id=$id";
  if ($conn->query($sql) === TRUE) {
    return "Data berhasil dihapus";
  } else {
    return "Error: " . $conn->error;
  }
}

// Mendapatkan data dari permintaan AJAX
$action = $_POST["action"];
$name = $_POST["name"];
$email = $_POST["email"];
$id = $_POST["id"];

// Memanggil fungsi yang sesuai berdasarkan action
if ($action === "create") {
  echo create($name, $email);
} elseif ($action === "read") {
  echo read();
} elseif ($action === "update") {
  echo update($id, $name, $email);
} elseif ($action === "delete") {
  echo delete($id);
}

?>

File index.html:

  
  
  



  
Data Users

  Add User

  

    

      

        
Name
        
Email
        
Actions
      
    
    

      
    
  

  
  

    

      ×
      
User Form
      

        
        Name:
        

        Email:
        

        Save
      
    
  

  

Catatan:

• Kode ini hanyalah contoh sederhana. Anda perlu menyesuaikannya sesuai dengan kebutuhan aplikasi Anda.
• Anda dapat menggunakan library JavaScript seperti jQuery untuk mempermudah proses AJAX.
• Gunakan teknik validasi data di sisi server dan klien untuk memastikan data yang dimasukkan valid.
• Gunakan perlindungan keamanan untuk mencegah serangan SQL Injection dan Cross-Site Scripting (XSS).

Dengan mengikuti langkah-langkah dan menggunakan contoh kode yang diberikan, Anda dapat dengan mudah membuat AJAX CRUD dengan PHP untuk membangun aplikasi web yang lebih interaktif dan dinamis.