Mengubah Data Tanpa Reload Halaman Menggunakan PHP, jQuery, dan AJAX

Menggunakan AJAX untuk mengubah data tanpa reload halaman adalah cara efektif untuk meningkatkan interaktivitas dan responsivitas aplikasi web. Dalam tutorial ini, kita akan belajar membuat fitur sederhana untuk memperbarui data pengguna secara asinkron tanpa menyegarkan halaman.

Prasyarat

Pastikan Anda sudah menguasai dasar-dasar:

• PHP dan pengelolaan database
• jQuery
• HTML dan CSS

Langkah 1: Membuat Database dan Tabel

Pertama, buat database dan tabel sederhana untuk menyimpan data pengguna. Misalnya, tabel bernama users:

CREATE TABLE users (
  id INT PRIMARY KEY AUTO_INCREMENT,
  name VARCHAR(100),
  email VARCHAR(100)
);

Langkah 2: Membuat Tampilan HTML

Buat form HTML untuk menampilkan dan memperbarui data pengguna:

<div id="user-form">
  <input type="text" id="name" placeholder="Nama">
  <input type="email" id="email" placeholder="Email">
  <button id="update-btn">Update</button>
</div>

<div id="response-message"></div>

Form ini berfungsi untuk menerima input dari pengguna yang kemudian akan diperbarui menggunakan AJAX.

Langkah 3: Membuat Skrip PHP untuk Memproses Pembaruan

Buat file update_user.php untuk menangani pembaruan data di server:

<?php
include 'database.php';

$name = $_POST['name'];
$email = $_POST['email'];

$query = "UPDATE users SET name = '$name', email = '$email' WHERE id = 1"; // ID bisa disesuaikan
if (mysqli_query($conn, $query)) {
    echo "Data berhasil diperbarui";
} else {
    echo "Terjadi kesalahan: " . mysqli_error($conn);
}
?>

Langkah 4: Menambahkan AJAX dengan jQuery

Tambahkan kode jQuery untuk mengirim data form ke server tanpa reload halaman:

$(document).ready(function() {
  $('#update-btn').click(function(e) {
    e.preventDefault();
    
    const name = $('#name').val();
    const email = $('#email').val();
    
    $.ajax({
      url: 'update_user.php',
      method: 'POST',
      data: { name: name, email: email },
      success: function(response) {
        $('#response-message').text(response);
      }
    });
  });
});

Kode ini memungkinkan form mengirim data pengguna ke update_user.php saat tombol "Update" diklik, tanpa memuat ulang halaman.

Langkah 5: Menambahkan Pesan Feedback

Tambahkan CSS untuk mempercantik tampilan form dan pesan:

#user-form {
  margin: 20px;
}

#response-message {
  color: green;
  font-weight: bold;
  margin-top: 10px;
}

Kesimpulan

Dengan AJAX, kita bisa memperbarui data secara asinkron, sehingga pengguna mendapatkan pengalaman yang lebih cepat dan interaktif tanpa perlu menyegarkan halaman setiap kali ada perubahan.