CodeIgniter: Cara Membuat Pagination


Pagination adalah teknik menampilkan data yang banyak menjadi beberapa bagian. Contohnya kita mempunyai ratusan data dan kita ingin menampilkannya, kalau kita tampilkan sekalian semuanya maka akan user akan capek scroll terus ke bawah, nah dengan adanya teknik pagination ini akan mempermudah navigasi user, misalkan kita atur yang tampil hanya 10 data saja, maka user tidak perlu melakukan scroll lagi.

Kurang lebih seperti itu pengertian pagination, maaf penjelasannya agak sedikit kaku, hehe. Langsung saja kita coba membuat pagination penggunakan framework CodeIgniter dan stylenya saya menggunakan materialize. Nah, kalau kalian menggunakan framework css lain silahkan sesuaikan stylenya sendiri. Untuk materialize bisa dilihat dokumentasinya disini

Pada tutorial ini, silahkan sobat buat project baru dan konfigurasi terlebih dahulu. Buatlah controller dengan nama pagination.php, model dengan nama magenda.php dan viewnya vpagination.php.

1. Kita akan bekerja terlebih dahulu pada bagian controllernya, saya sertakan dahulu sintaksnya nanti penjelasannya mengikuti yah sobat.

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

class Pagination extends CI_Controller {

public function __construct()
{
parent::__construct();
$this->load->model('magenda');
}

public function index($offset=0)
{
//tentukan jumlah tampil perpage
$perpage= 3;

//load library pagination
$this->load->library('pagination');
//konfigurasi tampilan paging

$config = array(
'base_url' => site_url('pagination/index'),
'total_rows'=>$this->magenda->select_all(),

'per_page' =>$perpage,
'full_tag_open' => "<ul class='pagination'>",
'full_tag_close'=> "</ul>",
'num_tag_open' => '<li>',
'num_tag_close' => '</li>',
'cur_tag_open' => '<li class="active"><a href="#">',
'cur_tag_close' => '</a></li>',
'next_tag_open' => "<li>",
  'next_tagl_close' => "</li>",
  'prev_tag_open' => "<li>",
  'prev_tagl_close' => "</li>",
  'first_tag_open' => "<li>",
  'first_tagl_close' => "</li>",
  'last_tag_open'=>"<li>",
  'last_tagl_close' => "</li>",
);

//inisialisasi pagination dan config
$this->pagination->initialize($config);
$limit['perpage'] = $perpage;
$limit['offset'] = $offset;
$data['no'] = $offset+1;
$data['daftar_agenda'] = $this->magenda->select_all_paging($limit)->result();
    $data['pagination'] = $this->pagination->create_links();
$this->load->view('vpagination', $data);
}

}

/* End of file pagination.php */
/* Location: ./application/controllers/pagination.php */

Penjelasan:

  • Dari yang paling atas kita load model dahulu nama modelnya magenda.
  • Setelah itu kita membuat function index yang di dalamnya berisi parameter offset yang berfungsi mengatur data keberapa yang akan kita tampilkan, offset secara default bernilai 0.
  • Selanjutnya ada variable perpage yang berfungsi mengatur jumlah data yang sobat ingin tampilkan dalam 1 page pagination. Pada tutorial ini saya menggunakan 3.
  • Selanjutnya kita load library pagination yang sudah disediakan oleh framework CodeIgniter.
  • Setelah itu, kita buat variable config yang berfungsi menyimpan konfigurasi pagination yang akan kita buat, di dalamnya berisi base_url yang berfungsi mengalihkan link pagination, kemudian total_rows yang menampung jumlah data kita, untuk mendapatkan jumlah data tersebut sobat harus membuat function select_all() pada model untuk mengambil jumlah data yang ada pada database. Kemudian untuk config yang lainnya menyesuaikan sesuai dengan css kalian. Konfigurasi yang work pada settingan saya menggunakan materialize seperti sintaks diatas. Bagi kalian yang menggunakan bootstrap atau yang lain-lain silahkan sesuaikan sendiri.
  • Selanjutnya adalah inisialisasi pagination dengan config yang kita buat.
  • Variabel limit berfungsi untuk menampung nilai yang kita butuhkan untuk diambil datanya di dalam database. Dan kita memerlukan function select_all_paging() didalam model magenda.php
2. Seperti penjelasan diatas kita memerlukan 2 function di dalam model untuk mengetahui jumlah data dan mengambil data sesuai limit yang telah diatur.
code untuk mengambil jumlah data pada database seperti di bawah ini
public function select_all(){
$this->db->select('*');
$this->db->from('agenda');
$query = $this->db->get();
return $query->num_rows();
}
code untuk menampilkan data sesuai limit pagination :
function select_all_paging($limit=array()){
$this->db->select('*'); $this->db->from('agenda');
$this->db->order_by('id_agenda', 'desc');
        if ($limit != NULL)
$this->db->limit($limit['perpage'], $limit['offset']);

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

3. Sekarang kita akan menampilkan pagination tersebut pada view, sintaksnya sama dengan menampilkan data pada umumnya cuma ada tambahan sedikit pada bagian bawah yaitu links paginationnya.
  <div class="row">
              <div class="col s10 offset-s1">
                  <table>
                        <thead>
                          <tr>
                              <th data-field="no">No</th>
                              <th data-field="id">Id</th>
                              <th data-field="Nama">Nama</th>
                              <th data-field="Ket">Keterangan</th>
                          </tr>
                        </thead>
                        <tbody>
                            <?php
                              foreach ($daftar_agenda as $agenda) {
                                echo "<tr>";
                                  echo "<td>$no</td>";
                                  echo "<td>$agenda->id_agenda</td>";
                                  echo "<td>$agenda->nama</td>";
                                  echo "<td>$agenda->keterangan</td>";?>
                               <?php echo "</tr>";
                                $no++;
                              }
                            ?>
                        </tbody>
                  </table>
<?php if(isset($pagination)){
                  echo $pagination;}?>
              </div>
            </div>
          </div>

Contoh pagination menggunkan materialize
Contoh Pagination

Pagination ini memang sedikit ribet namun jika mengerti basicnya maka polanya gitu-gitu saja, silahkan kalian sesuaikan sendiri yang pasti contoh diatas sudah saya coba sendiri. Jika ada yang kurang dimengerti disilahkan cantumkan di kolom komentar atau hubungi saya langsung lewat social media.
Artikel terkait :

Artikel Terkait

1 komentar so far

Bisa ditampilkan lewat perintah echo juga gk gan? Kalo db kan dipanggil pake itu


EmoticonEmoticon