Membuat Pagination Codeigniter Dengan Bootstrap

Pada tutorial kali ini kita akan membahas bagaimana cara membuat pagination codeigniter dengan bootstrap, saya akan berusaha menjelaskan secara detail pembuatan pagination codeigniter ini. Didalam tutorial membuat pagination codeigniter dengan bootstrap ini saya menggunakan bootstrap versi 3 dan versi 4 dimana kita mengambil css dari CDN tanpa perlu mendownload file dari bootstrap.

Saya kan coba menjelaskan sedikit fungsi pagination, pagination berfungsi untuk mengelola data yang sangat banyak agar lebih ringan dan lebih mudah secara visual, dimana pagination akan mengelompokan beberapa baris data sesuai dengan urutan yang telah ditetapkan didalam kode program. Misalnya kita memiliki data 100 maka tentu apabila kita tampilkan semuanya akan terasa berat di sisi client sehingga kita perlu mengelompokannya menjadi per-10 misalnya (sesuai keinginan) sehingga kita akan miliki 10 link untuk menampilkan data berikutnya.

Gambar diatas adalah contoh pagination yang tadi saya jelaskan, kurang lebih yang akan kita buat seperti gambar diatas tersebut. Sebelum tutorial pagination codeigniter ini dimulai saya anggap pembaca telah menginstall dan mengerti dasar-dasar codeigniter sehingga lebih mudah dipahami.

Membuat Database

Pertama buatlah database terlebih dahulu, jalankan perintah dibawah ini.

CREATE DATABASE tutorial_pagination_codeigniter

Jika sudah, kita akan membuat tabel pengguna didalam database yang tadi kita buat, jalankan query dibawah ini:

CREATE TABLE pengguna(
     id INT(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
     nama VARCHAR(50) NOT NULL,
     umur INT(3) NOT NULL,
     tanggal_lahir DATETIME,
     jenis_kelamin VARCHAR(10)
);

Lalu kita akan memasukan beberapa data dummy sebagai bahan latihan kita, jalankan query dibawah ini.

INSERT INTO pengguna(nama, umur, tanggal_lahir, jenis_kelamin) VALUES
('Aris Munandar', 26, '1993-06-03 00:00:00', 'Lelaki'),
('Aditya', 26, '1993-06-03 00:00:00', 'Lelaki'),
('Budi Santoso', 26, '1993-06-03 00:00:00', 'Lelaki'),
('Ramdhoni', 26, '1993-06-03 00:00:00', 'Lelaki'),
('Ahmad', 26, '1993-06-03 00:00:00', 'Lelaki'),
('Iqbal Iskandar', 26, '1993-06-03 00:00:00', 'Lelaki'),
('Sofia', 26, '1993-06-03 00:00:00', 'Perempuan'),
('Azzahra', 26, '1993-06-03 00:00:00', 'Perempuan'),
('Tony Stark', 26, '1993-06-03 00:00:00', 'Lelaki'),
('Peter Parker', 26, '1993-06-03 00:00:00', 'Lelaki'),
('Jimmy Neutron', 26, '1993-06-03 00:00:00', 'Lelaki'),
('Rudy Tabootie', 26, '1993-06-03 00:00:00', 'Lelaki'),
('Hey Arnold', 26, '1993-06-03 00:00:00', 'Lelaki'),
('Gerald', 26, '1993-06-03 00:00:00', 'Lelaki'),
('Spongebob', 26, '1993-06-03 00:00:00', 'Lelaki');

Jika sudah, maka silakan cek didalam tabel tersebut ada 15 data pengguna dimana kita akan membaginya menjadi 3 kelompok sehingga data yang akan ditampilkan masing-masing adalah 5 baris data, seperti tujuan tutorial membuat pagination codeigniter dengan bootstrap ini.

Setelah langkah-langkah pembuatan database selesai maka selanjutnya melakukan beberapa konfigurasi database dan codeigniter.

Buka file /application/config/config.php

Lalu ubah bagian berikut:

$config['base_url'] = '';
$config['encryption_key'] = '';
$config['sess_save_path'] = NULL;Code language: PHP (php)

Menjadi

$config['base_url'] = 'url_aplikasi_anda';
$config['encryption_key'] = 'key123';
$config['sess_save_path'] = sys_get_temp_dir();
Code language: PHP (php)

Pada bagian url_aplikasi_anda silahkan ubah sesuai dengan URL yang anda gunakan, sebagai contoh http://localhost/codeigniter

Selanjutnya menyiapkan autoload, buka file /application/config/autload.php, lalu ubahlah kode dibawah ini:

$autoload['libraries'] = array();
$autoload['helper'] = array();Code language: PHP (php)

Menjadi

$autoload['libraries'] = array('database', 'session', 'pagination');
$autoload['helper'] = array('url');Code language: PHP (php)

Setelah itu kita perlu mengatur koneksi database dengan framework php codeigniter, caranya buka lah file /application/config/database.php

Lalu ubah parameter berikut sesuai dengan akun database local anda:

'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'tutorial_pagination_codeigniter',Code language: PHP (php)

Jika sudah maka seharusnya database dengan framework codeigniter sudah terkoneksi dengan benar.

Memulai Pembuatan Pagination Codeigniter

Setelah langkah-langkah konfigurasi diatas sudah dilakukan dan tidak ada masalah maka selanjutnya kita akan memulai pembuatan pagination codeigniter.

Pertama buatlah sebuah model dengan nama Pagination_model.php lalu simpan di folder /application/models setelah itu masukan kode dibawah ini.

<?php defined('BASEPATH') OR exit ('No direct script access allowed');

class Pagination_model extends CI_Model {

     public function getAll()
     {
          $this->db->select('*');
          $this->db->from('pengguna');
          $this->db->order_by('id', 'ASC');

          return $this->db->get();
     }

}Code language: HTML, XML (xml)

Jika sudah maka selanjutnya buatlah sebuah controller dengan nama Pagination.php lalu simpan di folder /application/controllers setelah itu masukan kode dibawah ini.

<?php defined('BASEPATH') OR exit ('No direct script access allowed');

class Pagination extends CI_Controller {

     public function __construct()
     {
          parent::__construct();
          $this->load->model('pagination_model');
     }
     public function index()
     {
          $data['semua_pengguna'] = $this->pagination_model->getAll()->result();

          $this->load->view('pagination', $data);
     }

}Code language: HTML, XML (xml)

Selanjutnya membuat bagian tampilannya, buatlah sebuah file bernama pagination.php lalu simpan di /application/views setelah itu masukan kode dibawah ini.

<!DOCTYPE html>
<html>
<head>
     <title>Tutorial Pagination Codeigniter</title>
</head>
<body>
     <table border="1" cellspacing="0" cellpadding="5">
          <thead>
               <tr>
                    <th>Nama</th>
                    <th>Jenis Kelamin</th>
                    <th>Tanggal Lahir</th>
                    <th>Umur</th>
               </tr>
          </thead>
          <tbody>
               <?php foreach($semua_pengguna as $pengguna): ?>
                    <tr>
                         <td><?php echo $pengguna->nama; ?></td>
                         <td><?php echo $pengguna->jenis_kelamin; ?></td>
                         <td><?php echo date('j F Y', strtotime($pengguna->tanggal_lahir)); ?></td>
                         <td><?php echo $pengguna->umur; ?></td>
                    </tr>
               <?php endforeach; ?>
          </tbody>
     </table>
</body>
</html>Code language: HTML, XML (xml)

Jika semua sudah tersimpan selanjutnya kita perlu mengatur halaman utama codeigniter, yaitu merubah tampilan welcome menjadi tampilan tabel data yang kita ambil dari tabel pengguna yang tadi kita telah buat, caranya sebagai berikut.

Buka file routes.php yang berada di dalam folder /application/config, lalu ubahlah kode dibawah ini.

$route['default_controller'] = 'welcome';Code language: PHP (php)

Menjadi

$route['default_controller'] = 'pagination';Code language: PHP (php)

Setelah itu simpan, dan refresh halaman utama codeigniter anda, kalau sudah betul maka seharusnya akan menampilkan halaman seperti gambar dibawah ini.

Seperti yang terlihat bahwa halaman tersebut belum ada pagination codeigniter, nah secara skenarionya kita akan membagi 5 blok dari 15 data yang tersedia, berikut ini caranya.

Buka kembali file Pagination_model.php yang ada di folder /application/models lalu tambahkan kode dibawah ini tepat dibawah method getAll().

public function getDataPagination($limit, $offset)
{
     $this->db->select('*');
     $this->db->from('pengguna');
     $this->db->order_by('id', 'ASC');
     $this->db->limit($limit, $offset);

     return $this->db->get();
}Code language: PHP (php)

Jika sudah disimpan selanjutnya buka kita ubah bagian controller, buka kembali file Pagination.php yang ada di folder /application/controllers lalu ubahlah bagian index() menjadi kode dibawah ini.

public function index($num = '')
{
     $perpage = 5;
     $offset = $this->uri->segment(1);
     $data['semua_pengguna'] = $this->pagination_model->getDataPagination($perpage, $offset)->result();

     $config['base_url'] = site_url();
     $config['total_rows'] = $this->pagination_model->getAll()->num_rows();
     $config['per_page'] = $perpage;
     $this->pagination->initialize($config);

     $this->load->view('pagination', $data);
}Code language: PHP (php)

Pada bagian tampilan, kita akan sedikit merubah, yaitu untuk menampilkan baris nomor blok data, caranya buka file pagination.php yang ada di folder /application/views lalu tambahkan kode dibawah ini tepat dibawah tag </table>.

<?php echo $this->pagination->create_links(); ?>Code language: HTML, XML (xml)

Dan yang terakhir kita sedikit tambahkan kode dibagian route, buka kembali file routes.php yang ada di folder /application/config lalu tambahkan kode dibawah ini tepat berada dibawah default_controller.

$route['(:any)'] = 'pagination/index/$1';Code language: PHP (php)

Jika sudah selesai silakan refresh kembali halaman codeigniter di browser, jika tidak ada masalah seharusnya akan tampil pagination codeigniter yang kita buat tadi.

Dari gambar diatas terlihat dibagian bawah tabel ada barisan angka, barisan angka tersebut adalah pagination blok data, silakan anda test, jika berhasil maka seharusnya didalam tabel tersebut akan tampil data-data berikutnya sesuai dengan urutan yang aktif.

Implementasi Pagination Codeigniter Dengan Bootstrap

Selanjutnya pada bagian ini kita akan mengimplementasikan pagination codeigniter dengan bootstrap, bootstrap yang saya gunakan adalah bootstrap versi 3.4.1 dengan menggunakan CDN sehingga kita tidak perlu mengunduh file bootstrap.

Yang pertama yang harus kita perhatikan adalah penggunaan tag HTML antara tag pagination standar codeigniter dengan tag pagination bootstrap, dimana kita akan meng-custom kode standar codeigniter menjadi pagination bootstrap, berikut ini perbedaan antara kode html pagination codeigniter dengan pagination bootstrap.

Terlihat bahwa yang standar tentu biasa saja ketimbang style yang di gunakan oleh bootstrap, terlihat lebih kompleks dan dari segi tampilan tentunya lebih bagus.

Mari kita mulai, bukalah file pagination.php yang berada di folder /application/views lalu ubah seluruh kode yang ada didalam file tersebut menjadi kode dibawah ini.

<!DOCTYPE html>
<html>
<head>
     <title>Tutorial Pagination Codeigniter</title>
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
     <style type="text/css">
          body {
               margin-top: 20px;
          }
     </style>
</head>
<body>
     <div class="row">
          <div class="col-md-offset-2 col-md-8">
               <table class="table table-bordered" border="1" cellspacing="0" cellpadding="5">
                    <thead>
                         <tr>
                              <th>Nama</th>
                              <th>Jenis Kelamin</th>
                              <th>Tanggal Lahir</th>
                              <th>Umur</th>
                         </tr>
                    </thead>
                    <tbody>
                         <?php foreach($semua_pengguna as $pengguna): ?>
                              <tr>
                                   <td><?php echo $pengguna->nama; ?></td>
                                   <td><?php echo $pengguna->jenis_kelamin; ?></td>
                                   <td><?php echo date('j F Y', strtotime($pengguna->tanggal_lahir)); ?></td>
                                   <td><?php echo $pengguna->umur; ?></td>
                              </tr>
                         <?php endforeach; ?>
                    </tbody>
               </table>
               <nav aria-label="Page navigation">
                    <?php echo $this->pagination->create_links(); ?>
               </nav>
          </div>
     </div>
</body>
</html>Code language: HTML, XML (xml)

Dari kode diatas jika dilihat kita akan menggunakan style CSS dari bootstrap dengan menggunakan layanan CDN yang telah disediakan oleh bootstrap, jika di refresh maka bentuk tabel akan berubah, dimana penulis telah menambahkan class bootstrap untuk bagian tabel.

Selanjutnya buka file Pagination.php yang berada di folder /application/controllers, nah pada bagian inilah nantinya codeigniter akan generate html sesuai dengan format kode html yang ada di pagination bootstrap.

Perhatikan baris kode $config['per_page'] di dalam method index() yang berada di file Pagination.php tersebut, tambahkan kode dibawah ini tepat dibagian bawah baris kode $config['per_page'] tersebut.

$config['next_link'] = 'Selanjutnya';
$config['prev_link'] = 'Sebelumnya';
$config['first_link'] = 'Awal';
$config['last_link'] = 'Akhir';
$config['full_tag_open'] = '<ul class="pagination">';
$config['full_tag_close'] = '</ul>';
$config['num_tag_open'] = '<li>';
$config['num_tag_close'] = '</li>';
$config['cur_tag_open'] = '<li class="active"><a href="#">';
$config['cur_tag_close'] = '</a></li>';
$config['prev_tag_open'] = '<li>';
$config['prev_tag_close'] = '</li>';
$config['next_tag_open'] = '<li>';
$config['next_tag_close'] = '</li>';
$config['last_tag_open'] = '<li>';
$config['last_tag_close'] = '</li>';
$config['first_tag_open'] = '<li>';
$config['first_tag_close'] = '</li>';Code language: PHP (php)

Jika sudah maka simpan file tersebut, sebelum melakukan testing saya akan menjelaskan sedikit fungsi kode diatas, kode-kode diatas berguna untuk mengubah tag pembuka dan tag penutup kode html pagination codeigniter standar sesuai dengan yang kita inginkan termasuk teks pada bagian Selanjutnya dan Sebelumnya, kita dapat meng-custom sesuai dengan keinginan.

Silakan refresh halaman pagination codeigniter di browser anda, seharusnya akan tampil seperti gambar dibawah ini.

Sampai disini tutorial kita telah selesai, untuk implementasi pagination codeigniter dengan bootstrap 4 penulis menyarankan pembaca untuk mengimplementasinya sendiri sesuai dengan tutorial yang telah dibuat ini, sehingga pembaca dapat mengasah kemampuan codeigniter sendiri. Jika ada pertanyaan silakan tulis komentar dibawah ini.