Membuat Pagination Halaman dengan Bootstrap 4 di Codeigniter

Pada kesempatan kali ini, sy akan berbagi tutorial gimana sih caranya membuat pagination atau paginasi dengan bootstrap 4 di Framework Codeigniter dengan mudah. Monggo disimak sampai habis 😄😄

Sebelum memulai praktek, pastikan kalian sudah memiliki file" yg digunakan untuk praktek ini

  1. Codeigniter versi 3.1.11, disini
  2. Bootstrap 4, disini
  3. Jquery, disini 
  4. Database buku, disini
Untuk Jquery nya, pas kalian buka langsung aja kalian klik kanan seperti berikut ini untuk menyimpan file jquery.js nya


Jika sudah, silahkan kalian ekstrak dulu file codeigniter nya lalu ekstrak bootstrap dan jquery di folder asset atau lainnya yg penting di dalem folder codeigniter nya aja 😁

Seperti biasa, sy tidak akan menjelaskan dasar"nya, sy anggap kalian sudah bisa. Oke lanjut lagi ...

Jangan lupa pada file config/autoload.php, libraries kalian tambahkan pagination seperti berikut ini :

Setelah itu, kita atur dulu halaman Controller nya seperti berikut :

Lalu kita buat tampilan view nya seperti berikut ini, sederhana dulu yak nanti kalian custom sendiri 😁 

Silahkan kalian test dulu di browser,

Pada tag <form action="......."></form>, action menuju pada link welcome/cari, maka kita buat juga function cari pada controller/Welcome.php tepat dibawah function index()



Keterangan :
  1. Pada gambar 1 bagian awal kode function cari()
    • kita menangkap hasil kata kunci yg ditulis pada halaman pencarian tadi dengan $_POST['search']
    • Setelah itu, kita lakukan konfigurasi paginasi dalam hal ini kita menggunakan array asosiatif yg kata kunci atau index nya sudah ditentukan di dalam library pagination, untuk lebih jelasnya bisa kalian lihat sendiri pada folder system/libraries/pagination.php
    • Kita hitung dulu total baris record sesuai dgn kata kunci yg ditulis
    • Per halaman mau ditampilkan berapa record ? $config['per_page']
    • $config['num_links'] digunakan untuk menampilkan jumlah halaman data pagination seperti berikut ini 
  2. Pada gambar 2 kode function cari()
    • Silahkan kalian tulis sesuai dgn gambar, karena array asosiatif nya sudah tertera dgn jelas pada library pagination, klw nggak sesuai nanti desainnya malah berantakan 😂😂 
    • biar nggak bingung, silahkan kalian lihat value pada setiap $config tersebut di dokumentasi resmi bootstrap 4 disini
  3. Pada gambar 3 kode function cari()
    • Pada bagian ini, kita lakukan inisialisasi dari konfigurasi yg telah dibuat sebelumnya
    • Lalu kita lakukan load data atau record sesuai dengan kata kunci yg dicari dengan melakukan limit awal serta limit akhir, karena kita akan membuat paginasi halaman
Setelah itu, kalian buat file result.php lalu tulis kode berikut ini untuk menampilkan hasil paginasi nya 

Oke bisa kalian uji coba hasilnya, harusnya klw lancar tampil kayak gini


Selesai dah 😁😁, jika ada permasalahan bisa kalian tuliskan dibawah sini ya. jgn lupa share ke temen" lainnya yg belum tau biar pada bisa buat paginasi juga 😁😁

Terima kasih 😃😃


Next tutorial, backup & restore database dengan Mysqldump









Artikel Terkait

Saya seorang yg bercita-cita menjadi pebisnis aplikasi ternama di Indonesia


EmoticonEmoticon