Edit Data dengan AJAX dalam CRUD PHP & MySQL

halo semua, kembali lagi di Zhuzhu-sama blogger.

Pada artikel sebelumnya, kita telah membuat fitur tambah dan hapus data menggunakan AJAX. Sekarang, kita akan menambahkan fitur edit data tanpa perlu me-reload halaman.

1. Menampilkan Data dengan Tombol Edit

Kita akan menambahkan tombol edit di setiap baris data mahasiswa.

Update read.php:

<?php

include 'config.php';

$result = $koneksi->query("SELECT * FROM mahasiswa");

echo "<table border='1'><tr><th>Nama</th><th>Email</th><th>Jurusan</th><th>Aksi</th></tr>";

while ($row = $result->fetch_assoc()) {

    echo "<tr>

            <td>".$row['nama']."</td>

            <td>".$row['email']."</td>

            <td>".$row['jurusan']."</td>

            <td>

                <button onclick=\"editData(".$row['id'].")\">Edit</button>

                <button onclick=\"hapusData(".$row['id'].")\">Hapus</button>

            </td>

         </tr>";

}

echo "</table>";

?>

2. Membuat Form Edit

Form ini akan diisi secara otomatis dengan data yang akan diedit.

Kode form edit:

<h2>Edit Data Mahasiswa</h2>

<form id="formEdit">

    <input type="hidden" id="id">

    Nama: <input type="text" id="nama_edit"><br>

    Email: <input type="email" id="email_edit"><br>

    Jurusan: <input type="text" id="jurusan_edit"><br>

    <button type="button" onclick="updateData()">Update</button>

</form>

3. Mengambil Data untuk Diedit

Kita perlu mengambil data dari database berdasarkan ID yang dipilih.

Kode get_data.php:

<?php

include 'config.php';

$id = $_POST['id'];

$data = $koneksi->query("SELECT * FROM mahasiswa WHERE id=$id")->fetch_assoc();

echo json_encode($data);

?>

4. Mengupdate Data dengan AJAX

Kode update.php:

<?php

include 'config.php';

$id = $_POST['id'];

$nama = $_POST['nama'];

$email = $_POST['email'];

$jurusan = $_POST['jurusan'];

$sql = "UPDATE mahasiswa SET nama='$nama', email='$email', jurusan='$jurusan' WHERE id=$id";

if ($koneksi->query($sql)) {

    echo "Data berhasil diperbarui!";

} else {

    echo "Gagal memperbarui data!";

}

?>

5. JavaScript untuk Edit Data

Kode script AJAX:

<script>

function editData(id) {

    $.ajax({

        url: "get_data.php",

        type: "POST",

        data: {id: id},

        dataType: "json",

        success: function(data) {

            $("#id").val(data.id);

            $("#nama_edit").val(data.nama);

            $("#email_edit").val(data.email);

            $("#jurusan_edit").val(data.jurusan);

        }

    });

}

function updateData() {

    let id = $("#id").val();

    let nama = $("#nama_edit").val();

    let email = $("#email_edit").val();

    let jurusan = $("#jurusan_edit").val();

    $.ajax({

        url: "update.php",

        type: "POST",

        data: {id: id, nama: nama, email: email, jurusan: jurusan},

        success: function(response) {

            alert(response);

            tampilkanData();

        }

    });

}

</script>

Kesimpulan

Sekarang, fitur edit data sudah bisa dilakukan dengan AJAX tanpa reload halaman. 

Jangan lupa follow saya untuk update lebih lanjut:

• Instagram: @zhu.code
• GitHub: @zhubailee

Semoga artikel ini dapat bermanfaat!