Langsung ke konten utama

Postingan

Menampilkan postingan dengan label MySQL

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

Integrasi DataTables untuk Pencarian dan Sorting dalam CRUD AJAX PHP & MySQL

Integrasi DataTables untuk Pencarian dan Sorting dalam CRUD AJAX PHP & MySQL yo selamat datang kembali di Zhuzhu-sama blogger. Pada artikel sebelumnya, kita sudah menambahkan notifikasi dinamis menggunakan Bootstrap Toast . Sekarang, kita akan mengintegrasikan DataTables untuk mempermudah pencarian dan sorting data pada tabel CRUD kita. 1. Menambahkan DataTables ke Proyek Kita akan menambahkan DataTables ke dalam proyek untuk memberikan fitur pencarian, sorting, dan pagination yang interaktif. Menambahkan Link DataTables: <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script> 2. Menampilkan Data dalam Tabel DataTables Kita akan mengubah kode tabel di file read.php untuk menggunakan DataTables. Update r...

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 b...

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