Membuat CRUD menggunakan Ajax PHP – Input Data

Membuat CRUD menggunakan Ajax PHP – Input Data adalah langkah awal penting ketika kalian ingin membangun aplikasi web dinamis yang bisa menambah data tanpa perlu reload halaman.

Halo teman-teman, di era web modern sekarang ini, pengalaman pengguna yang cepat dan responsif adalah kunci. Dengan menggabungkan Ajax dan PHP, kalian bisa membuat proses input data terasa lebih mulus, karena form yang dikirim tidak akan memuat ulang seluruh halaman. Pada artikel ini kodelyly.com akan membahas cara membuat fitur input (Create) pada CRUD menggunakan Ajax dan PHP secara sederhana.

Membuat CRUD Menggunakan Ajax PHP – Input Data

Pada bagian ini, fokus utama kita adalah proses “Create” atau input data baru ke dalam database. Biasanya, CRUD terdiri dari Create, Read, Update, dan Delete, tetapi untuk tahap awal, cukup kuasai dulu cara memasukkan data dengan aman dan rapi. Setelah paham alur input data, bagian Read, Update, dan Delete akan jauh lebih mudah untuk diikuti.

Secara garis besar, alur kerja input data dengan Ajax dan PHP adalah sebagai berikut:

1. Pengguna mengisi form HTML lalu menekan tombol simpan.
2. JavaScript (Ajax) menangkap data form dan mengirimkannya ke file PHP tanpa reload halaman.
3. File PHP memproses data, menyimpannya ke database, lalu mengembalikan respon (berhasil/gagal).
4. JavaScript menampilkan pesan hasil ke pengguna.

Persiapan Database Dan Struktur File

Sebelum menulis kode Ajax, kalian perlu menyiapkan database dan struktur file dasar. Misalnya, buat database bernama crud_ajax dan tabel users dengan kolom sederhana seperti id, nama, dan email. Setelah itu, atur struktur folder, misalnya:

1. index.php untuk tampilan form dan script Ajax.
2. proses_input.php untuk memproses data dan menyimpan ke database.
3. koneksi.php untuk koneksi ke MySQL.

Dengan pemisahan file seperti ini, kode lebih rapi dan mudah dikembangkan saat kalian menambah fitur CRUD lainnya.

Contoh Form Input Dan Ajax

Berikut gambaran sederhana form input dan script Ajax yang akan mengirimkan data ke PHP:

<form id="formInput">
  <input type="text" name="nama" placeholder="Nama" required>
  <input type="email" name="email" placeholder="Email" required>
  <button type="submit">Simpan</button>
</form>

<div id="hasil"></div>

<script>
  const form = document.getElementById('formInput');
  form.addEventListener('submit', function (e) {
    e.preventDefault();
    const formData = new FormData(form);

    fetch('proses_input.php', {
      method: 'POST',
      body: formData
    })
      .then(response => response.text())
      .then(data => {
        document.getElementById('hasil').innerHTML = data;
        form.reset();
      });
  });
</script>

Di sisi server, proses_input.php akan menerima data dan menyimpannya ke database menggunakan mysqli atau PDO. Jangan lupa tambahkan validasi sederhana seperti pengecekan input kosong dan format email, agar fitur input data tidak hanya berjalan, tetapi juga aman dan rapi.

Kesimpulan

Membuat CRUD menggunakan Ajax PHP – Input Data adalah pondasi penting untuk membangun aplikasi web interaktif yang responsif. Dengan memanfaatkan form HTML, Ajax untuk mengirim data tanpa reload halaman, dan PHP sebagai pemroses di server, kalian dapat membuat fitur tambah data yang cepat dan nyaman digunakan. Setelah memahami alur input data ini, kalian bisa melanjutkan ke tahap berikutnya, yaitu menampilkan (Read), mengubah (Update), dan menghapus (Delete) data.

Sekian artikel dari kodelyly.com, semoga pembahasan tentang cara membuat CRUD menggunakan Ajax PHP khusus bagian input data ini bermanfaat dan bisa menjadi dasar untuk projek web kalian selanjutnya.