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

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"> ...
Posting Komentar
Read more =>

Cara mengencrypt decrypt text dan file python dengan hex

Assalamu'alaikum Warahmatullahi Wabarakatuh Selamat datang kembali di blog ini! Pada kesempatan kali ini, saya akan membagikan tutorial tentang cara mengenkripsi dan mendekripsi file atau teks Python. Yuk, langsung kita mulai! Mengenkripsi Teks dengan Hex Untuk mengenkripsi teks dalam format hex, gunakan kode berikut: ("HELLO KITTY").encode("hex") Pada contoh ini, "HELLO KITTY" adalah teks asli yang akan dienkripsi. Fungsi encode("hex") akan mengubahnya menjadi kode hex seperti berikut: 48454c4c4f204b49545459 Mendekripsi Teks dari Hex Untuk mengembalikan teks dari format hex ke bentuk aslinya, gunakan kode berikut: ("48454c4c4f204b49545459").decode("hex") Hasilnya akan kembali menjadi teks asli, yaitu: HELLO KITTY Mengenkripsi File dengan Hex Jika ingin mengenkripsi file menggunakan hex, gunakan kode berikut: inp = raw_input("Masukkan nama file: ") bk ...
Posting Komentar
Read more =>