Langsung ke konten utama

Integrasi Bootstrap Modal dalam CRUD AJAX PHP & MySQL

Integrasi Bootstrap Modal dalam CRUD AJAX PHP & MySQL



halo semua, selamat datang di Zhuzhu-sama blogger.

Pada artikel sebelumnya, kita telah membuat fitur CRUD dengan AJAX. Sekarang, kita akan menggunakan Bootstrap Modal agar tampilan lebih modern dan interaktif.

1. Menambahkan Bootstrap ke Proyek

Tambahkan link Bootstrap ke dalam <head>:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

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

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

2. Menampilkan Data dengan Tombol Edit & Hapus

Pada tabel data, kita tambahkan tombol Edit dan Hapus yang akan membuka modal.

Update read.php:

<?php

include 'config.php';

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

echo "<table class='table table-bordered'><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 class='btn btn-warning' onclick=\"editData(".$row['id'].")\" data-bs-toggle='modal' data-bs-target='#modalEdit'>Edit</button>

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

            </td>

         </tr>";

}

echo "</table>";

?>

3. Membuat Modal Bootstrap

Modal ini akan digunakan untuk form edit data.

Kode Modal Edit:

<div class="modal fade" id="modalEdit" tabindex="-1">

  <div class="modal-dialog">

    <div class="modal-content">

      <div class="modal-header">

        <h5 class="modal-title">Edit Data</h5>

        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>

      </div>

      <div class="modal-body">

        <form id="formEdit">

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

          Nama: <input type="text" id="nama_edit" class="form-control"><br>

          Email: <input type="email" id="email_edit" class="form-control"><br>

          Jurusan: <input type="text" id="jurusan_edit" class="form-control"><br>

        </form>

      </div>

      <div class="modal-footer">

        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>

        <button type="button" class="btn btn-primary" onclick="updateData()">Simpan Perubahan</button>

      </div>

    </div>

  </div>

</div>

4. Mengambil Data untuk Diedit

Saat tombol Edit ditekan, data akan dimasukkan ke dalam modal.

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);

?>

5. 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!";

}

?>

6. JavaScript untuk Mengedit 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);

            $("#modalEdit").modal('hide');

            tampilkanData();

        }

    });

}

</script>

Kesimpulan

Dengan Bootstrap Modal, kita bisa membuat tampilan CRUD lebih profesional dan interaktif.

Jangan lupa follow saya untuk update lebih lanjut:

Semoga artikel ini bermanfaat! 

Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Validasi input di CRUD PHP & MySQL

Validasi Input di CRUD PHP & MySQL halo selamat datang kembali di Zhuzhu-sama blogger. Pada artikel sebelumnya kita sudah mempelajari tutorial crud php mysql. sekarang kita akan melanjutkan belajar validasi input CRUD PHP mysql. selamat membaca:). Validasi input sangat penting untuk memastikan data yang dimasukkan oleh pengguna tidak kosong, sesuai format yang diinginkan, dan aman dari serangan seperti SQL Injection atau XSS. 1. Menambahkan Validasi di tambah.php Pada form tambah data, kita akan melakukan validasi: Pastikan semua input tidak kosong Validasi format email Menggunakan htmlspecialchars() untuk menghindari karakter berbahaya Kode tambah.php setelah ditambahkan validasi: <?php include 'config.php'; ?> <h2>Tambah Data Mahasiswa</h2> <form method="POST"> Nama: <input type="text" name="nama" required><br> Email: <input type="email" name="e...
1 komentar
Read more =>

Tutorial CRUD PHP & MySQL

Tutorial CRUD (Create, Read, Update, Delete) PHP & MySQL Halo semua. selamat datang kembali di Zhuzhu-sama blogger. Pada artikel sebelumnya kita sudah mempelajari dasar-dasar dari pemrograman PHP, sekarang kita akan melanjutkan ketahap selanjutnya yaitu belajar CRUD PHP dan mysql. selamat membaca. CRUD adalah operasi dasar dalam pengolahan data di database. Dalam tutorial ini, kita akan membuat sistem CRUD sederhana dengan PHP dan MySQL. 1. Membuat Database dan Tabel Buka phpMyAdmin dan jalankan SQL berikut: CREATE DATABASE crud_php; USE crud_php; CREATE TABLE mahasiswa ( id INT AUTO_INCREMENT PRIMARY KEY, nama VARCHAR(100), email VARCHAR(100), jurusan VARCHAR(50) ); 2. Membuat File Koneksi Database (config.php) File ini berfungsi untuk menghubungkan PHP dengan MySQL. <?php $host = "localhost"; $user = "root"; $pass = ""; $db = "crud_php"; $koneksi = new mysqli($host, $user, $pass, $db); if ($kon...
Posting Komentar
Read more =>