Langsung ke konten utama

CRUD PHP & MySQL dengan AJAX

CRUD PHP & MySQL dengan AJAX (Tanpa Reload Halaman)



Halo semua, kembali lagi di Zhuzhu-sama blogger.

pada artikel sebelumnya kita sudah mempelajari cara validasi dengan javascript di CRUD PHP, sekarang kita lanjut mempelajari CRUD PHP dengan menggunakan AJAX. selamat membaca kawan :)

AJAX memungkinkan kita melakukan operasi CRUD (Create, Read, Update, Delete) tanpa harus me-reload halaman. Ini membuat pengalaman pengguna lebih cepat dan responsif.

1. Menyiapkan Database

Buat database dan tabel berikut di MySQL:

CREATE DATABASE db_mahasiswa;

USE db_mahasiswa;

CREATE TABLE mahasiswa (

    id INT AUTO_INCREMENT PRIMARY KEY,

    nama VARCHAR(100),

    email VARCHAR(100),

    jurusan VARCHAR(50)

);

2. Menampilkan Data dengan AJAX

Kita akan menggunakan JavaScript untuk mengambil data dari database dan menampilkannya tanpa reload.

Kode index.php:

<!DOCTYPE html>

<html lang="id">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>CRUD AJAX PHP</title>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

</head>

<body>

    <h2>Data Mahasiswa</h2>

    <button onclick="tampilkanData()">Tampilkan Data</button>

    <div id="data_mahasiswa"></div>

    <script>

    function tampilkanData() {

        $.ajax({

            url: "read.php",

            type: "GET",

            success: function(response) {

                $("#data_mahasiswa").html(response);

            }

        });

    }

    </script>

</body>

</html>

Kode 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></tr>";

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

    echo "<tr><td>".$row['nama']."</td><td>".$row['email']."</td><td>".$row['jurusan']."</td></tr>";

}

echo "</table>";

?>

3. Menambahkan Data dengan AJAX

Form input akan mengirim data ke server tanpa reload.

Kode form tambah data:

<h2>Tambah Data Mahasiswa</h2>

<form id="formTambah">

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

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

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

    <button type="button" onclick="tambahData()">Simpan</button>

</form>

<script>

function tambahData() {

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

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

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

    $.ajax({

        url: "create.php",

        type: "POST",

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

        success: function(response) {

            alert(response);

            tampilkanData();

        }

    });

}

</script>

Kode create.php:

<?php

include 'config.php';

$nama = $_POST['nama'];

$email = $_POST['email'];

$jurusan = $_POST['jurusan'];

$sql = "INSERT INTO mahasiswa (nama, email, jurusan) VALUES ('$nama', '$email', '$jurusan')";

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

    echo "Data berhasil ditambahkan!";

} else {

    echo "Gagal menambahkan data!";

}

?>

4. Menghapus Data dengan AJAX

Data bisa dihapus tanpa perlu reload halaman.

Kode delete.php:

<?php

include 'config.php';

$id = $_POST['id'];

$sql = "DELETE FROM mahasiswa WHERE id=$id";

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

    echo "Data berhasil dihapus!";

} else {

    echo "Gagal menghapus data!";

}

?>

Kode JavaScript untuk hapus data:

<script>

function hapusData(id) {

    $.ajax({

        url: "delete.php",

        type: "POST",

        data: {id: id},

        success: function(response) {

            alert(response);

            tampilkanData();

        }

    });

}

</script>

Kesimpulan

Dengan AJAX, kita bisa membuat CRUD lebih cepat dan interaktif.

Jangan lupa follow saya untuk update lebih lanjut:

Semoga artikel ini dapat bermanfaat!

Komentar

Posting Komentar