Langsung ke konten utama

Menambahkan Notifikasi Dinamis dengan Toast dalam CRUD AJAX PHP & MySQL

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:

Semoga artikel ini bermanfaat!

Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

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 =>

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 =>

Pagination AJAX untuk Data Besar dalam CRUD AJAX PHP & MySQL

Pagination AJAX untuk Data Besar dalam CRUD AJAX PHP & MySQL yo selamat datang kembali di Zhuzhu-sama blogger. Pada artikel sebelumnya, kita telah menambahkan DataTables untuk mempermudah pencarian, sorting, dan pagination. Sekarang, kita akan mengimplementasikan Pagination AJAX untuk menangani data besar dengan lebih efisien. 1. Menyiapkan Pagination di MySQL Untuk menangani data besar, kita akan menggunakan LIMIT dan OFFSET di MySQL untuk mengatur jumlah data yang ditampilkan di setiap halaman. Query Pagination: $limit = 10; // Jumlah data per halaman $offset = ($page - 1) * $limit; $query = "SELECT * FROM mahasiswa LIMIT $limit OFFSET $offset"; 2. Mengubah Query di read.php untuk Pagination Kita akan memperbarui file read.php untuk menampilkan data sesuai halaman yang diminta. Update read.php: <?php include 'config.php'; $page = isset($_POST['page']) ? $_POST['page'] : 1; // Halaman yang diminta $limit = 10; // Juml...
Posting Komentar
Read more =>