Menambahkan Notifikasi Dinamis dengan Toast dalam CRUD AJAX PHP & MySQL

halo semua, selamat datang kembali di Zhuzhu-sama blogger.

Pada artikel sebelumnya, kita telah menggunakan Bootstrap Modal untuk fitur edit data. Sekarang, kita akan menambahkan notifikasi dinamis menggunakan Bootstrap Toast agar pengguna mendapatkan umpan balik saat melakukan aksi CRUD.

1. Menambahkan Bootstrap Toast ke Proyek

Kita akan menambahkan komponen Bootstrap Toast ke dalam halaman.

Kode Toast:

<div class="toast-container position-fixed top-0 end-0 p-3">

    <div id="liveToast" class="toast align-items-center text-white bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true">

        <div class="d-flex">

            <div class="toast-body">

                Aksi berhasil!

            </div>

            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>

        </div>

    </div>

</div>

2. Mengupdate JavaScript untuk Menampilkan Toast

Kode script AJAX:

<script>

function showToast(message, type) {

    let toast = $("#liveToast");

    toast.removeClass("bg-success bg-danger").addClass(type === "success" ? "bg-success" : "bg-danger");

    toast.find(".toast-body").text(message);

    let toastInstance = new bootstrap.Toast(toast[0]);

    toastInstance.show();

}

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

            showToast(response, "success");

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

            tampilkanData();

        },

        error: function() {

            showToast("Terjadi kesalahan!", "danger");

        }

    });

}

</script>

3. Menampilkan Toast Saat CRUD

Toast ini akan muncul setiap kali data diperbarui atau terjadi kesalahan.

Kesimpulan

Dengan Bootstrap Toast, pengguna akan mendapatkan notifikasi dinamis setelah melakukan aksi CRUD.

Jangan lupa follow saya untuk update lebih lanjut:

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

Semoga artikel ini bermanfaat!