Pagination di CodeIgniter: Panduan Lengkap
() translation by (you can also view the original English article)
Manfaat menggunakan framework aplikasi web full-stack adalah anda tidak perlu khawatir dengan tugas umum seperti input handling, form validation dan sejenisnya, karena framework sudah menyediakan wrapper untuk fitur tersebut. Dengan demikian, framework memungkinkan anda untuk berkonsentrasi pada logika kerja aplikasi tersebut daripada menemukan kembali kemudinya mengulang-ngulangnya.
Kali ini, kita akan menjelajahi library penting dalam framework CodeIgniter — yaitu pagination library.
Biarkan saya menyoroti beberapa topik yang akan kita bahas dalam artikel ini:
- Demonstrasi paging dasar
- Mengeksplor customization option
- Konfigurasi pagination
Demonstrasi Paging Dasar
Pada bagian ini, kita akan membahas sebuah contoh yang menunjukkan penggunaan pagination di CodeIgniter. Ini adalah cara terbaik untuk memahami bagaimana segala sesuatunya bekerja sama satu sama lain.
Dalam contoh kami, kami akan membuat list atau daftar user yang cukup sederhana dimana kami akan mengambil (fetch) record dari tabel MySQL users. Agar berhasil menjalankan contoh ini, pastikan anda memiliki field uid
dan uname
di tabel users anda.
Dengan set up ini, kita siap untuk memulai.
Lanjutkan dengan membuat file controller controllers/Paging.php
dengan mengikuti konten berikut.
1 |
<?php
|
2 |
defined('BASEPATH') OR exit('No direct script access allowed'); |
3 |
|
4 |
class Paging extends CI_Controller { |
5 |
public function __construct() |
6 |
{
|
7 |
parent::__construct(); |
8 |
|
9 |
// load Pagination library
|
10 |
$this->load->library('pagination'); |
11 |
|
12 |
// load URL helper
|
13 |
$this->load->helper('url'); |
14 |
}
|
15 |
|
16 |
public function index() |
17 |
{
|
18 |
// load db and model
|
19 |
$this->load->database(); |
20 |
$this->load->model('Users'); |
21 |
|
22 |
// init params
|
23 |
$params = array(); |
24 |
$limit_per_page = 1; |
25 |
$start_index = ($this->uri->segment(3)) ? $this->uri->segment(3) : 0; |
26 |
$total_records = $this->Users->get_total(); |
27 |
|
28 |
if ($total_records > 0) |
29 |
{
|
30 |
// get current page records
|
31 |
$params["results"] = $this->Users->get_current_page_records($limit_per_page, $start_index); |
32 |
|
33 |
$config['base_url'] = base_url() . 'paging/index'; |
34 |
$config['total_rows'] = $total_records; |
35 |
$config['per_page'] = $limit_per_page; |
36 |
$config["uri_segment"] = 3; |
37 |
|
38 |
$this->pagination->initialize($config); |
39 |
|
40 |
// build paging links
|
41 |
$params["links"] = $this->pagination->create_links(); |
42 |
}
|
43 |
|
44 |
$this->load->view('user_listing', $params); |
45 |
}
|
46 |
|
47 |
public function custom() |
48 |
{
|
49 |
// load db and model
|
50 |
$this->load->database(); |
51 |
$this->load->model('Users'); |
52 |
|
53 |
// init params
|
54 |
$params = array(); |
55 |
$limit_per_page = 2; |
56 |
$page = ($this->uri->segment(3)) ? ($this->uri->segment(3) - 1) : 0; |
57 |
$total_records = $this->Users->get_total(); |
58 |
|
59 |
if ($total_records > 0) |
60 |
{
|
61 |
// get current page records
|
62 |
$params["results"] = $this->Users->get_current_page_records($limit_per_page, $page*$limit_per_page); |
63 |
|
64 |
$config['base_url'] = base_url() . 'paging/custom'; |
65 |
$config['total_rows'] = $total_records; |
66 |
$config['per_page'] = $limit_per_page; |
67 |
$config["uri_segment"] = 3; |
68 |
|
69 |
// custom paging configuration
|
70 |
$config['num_links'] = 2; |
71 |
$config['use_page_numbers'] = TRUE; |
72 |
$config['reuse_query_string'] = TRUE; |
73 |
|
74 |
$config['full_tag_open'] = '<div class="pagination">'; |
75 |
$config['full_tag_close'] = '</div>'; |
76 |
|
77 |
$config['first_link'] = 'First Page'; |
78 |
$config['first_tag_open'] = '<span class="firstlink">'; |
79 |
$config['first_tag_close'] = '</span>'; |
80 |
|
81 |
$config['last_link'] = 'Last Page'; |
82 |
$config['last_tag_open'] = '<span class="lastlink">'; |
83 |
$config['last_tag_close'] = '</span>'; |
84 |
|
85 |
$config['next_link'] = 'Next Page'; |
86 |
$config['next_tag_open'] = '<span class="nextlink">'; |
87 |
$config['next_tag_close'] = '</span>'; |
88 |
|
89 |
$config['prev_link'] = 'Prev Page'; |
90 |
$config['prev_tag_open'] = '<span class="prevlink">'; |
91 |
$config['prev_tag_close'] = '</span>'; |
92 |
|
93 |
$config['cur_tag_open'] = '<span class="curlink">'; |
94 |
$config['cur_tag_close'] = '</span>'; |
95 |
|
96 |
$config['num_tag_open'] = '<span class="numlink">'; |
97 |
$config['num_tag_close'] = '</span>'; |
98 |
|
99 |
$this->pagination->initialize($config); |
100 |
|
101 |
// build paging links
|
102 |
$params["links"] = $this->pagination->create_links(); |
103 |
}
|
104 |
|
105 |
$this->load->view('user_listing', $params); |
106 |
}
|
107 |
}
|
Selanjutnya, kita memerlukan file model models/Users.php
yang mengambil record dari tabel users.
1 |
<?php
|
2 |
// models/Users.php
|
3 |
defined('BASEPATH') OR exit('No direct script access allowed'); |
4 |
|
5 |
class Users extends CI_Model |
6 |
{
|
7 |
function __construct() |
8 |
{
|
9 |
parent::__construct(); |
10 |
}
|
11 |
|
12 |
public function get_current_page_records($limit, $start) |
13 |
{
|
14 |
$this->db->limit($limit, $start); |
15 |
$query = $this->db->get("users"); |
16 |
|
17 |
if ($query->num_rows() > 0) |
18 |
{
|
19 |
foreach ($query->result() as $row) |
20 |
{
|
21 |
$data[] = $row; |
22 |
}
|
23 |
|
24 |
return $data; |
25 |
}
|
26 |
|
27 |
return false; |
28 |
}
|
29 |
|
30 |
public function get_total() |
31 |
{
|
32 |
return $this->db->count_all("users"); |
33 |
}
|
34 |
}
|
Pada akhirnya, mari kita membuat file view pada views/user_listing.php
yang menampilkan list user.
1 |
<!-- views/user_listing.php -->
|
2 |
<html>
|
3 |
<head>
|
4 |
<title>Paging Example-User Listing</title> |
5 |
</head>
|
6 |
|
7 |
<body>
|
8 |
<div class="container"> |
9 |
<h1 id='form_head'>User Listing</h1> |
10 |
|
11 |
<?php if (isset($results)) { ?> |
12 |
<table border="1" cellpadding="0" cellspacing="0"> |
13 |
<tr>
|
14 |
<th>ID</th> |
15 |
<th>NAME</th> |
16 |
</tr>
|
17 |
|
18 |
<?php foreach ($results as $data) { ?> |
19 |
<tr>
|
20 |
<td><?php echo $data->uid ?></td> |
21 |
<td><?php echo $data->uname ?></td> |
22 |
</tr>
|
23 |
<?php } ?> |
24 |
</table>
|
25 |
<?php } else { ?> |
26 |
<div>No user(s) found.</div> |
27 |
<?php } ?> |
28 |
|
29 |
<?php if (isset($links)) { ?> |
30 |
<?php echo $links ?> |
31 |
<?php } ?> |
32 |
</div>
|
33 |
</body>
|
34 |
</html>
|
Sekarang, lanjutkan dan akses custom page kita di http://your-code-igniter-site/paging/index dan anda seharusnya melihat list user beserta pagination-nya! Jadi, itu saja, kita sudah melakukannya! Jangan khawatir, saya tidak akan meninggalkan anda secepatnya, karena kita akan mulai membedah setiap bagian code tersebut sekarang.
Kita akan mulai dengan file model models/Users.php
karena itu sesuatu yang akan dipanggil dari controller method kita. Ada dua method penting, get_current_page_records
dan get_total
, yang diterapkan model kita untuk membuat pagination link.
Mari kita melalui method get_total
. Ini digunakan untuk menghitung (count) jumlah record di table users.
1 |
public function get_total() |
2 |
{
|
3 |
return $this->db->count_all("users"); |
4 |
}
|
Selanjutnya, ada method get_current_page_records
.
1 |
public function get_current_page_records($limit, $start) |
2 |
{
|
3 |
$this->db->limit($limit, $start); |
4 |
$query = $this->db->get("users"); |
5 |
|
6 |
if ($query->num_rows() > 0) |
7 |
{
|
8 |
foreach ($query->result() as $row) |
9 |
{
|
10 |
$data[] = $row; |
11 |
}
|
12 |
|
13 |
return $data; |
14 |
}
|
15 |
|
16 |
return false; |
17 |
}
|
Ada dua argumen penting yang harus anda catat dalam metode get_current_page_records
. Argumen pertama, $limit
, digunakan untuk menentukan jumlah record yang akan dikembalikan (return) selama query dijalankan. Dan argumen kedua, $start
, bertindak sebagai starting index dari record.
Jadi, seperti yang bisa anda lihat, pemberian value pada $start
dan $limit
kita bisa melakukan fetch record per halaman. Itulah inti dari paging, dan ngomgong-ngomong kita telah menerapkan method yang paling penting dari artikel ini!
Jadi, itu lah model kita — sederhana dan elegan!
Berlanjut, mari kita mengalihkan perhatian kita ke file controller. Menuju ke code dari method constructor.
1 |
public function __construct() |
2 |
{
|
3 |
parent::__construct(); |
4 |
|
5 |
// load Pagination library
|
6 |
$this->load->library('pagination'); |
7 |
|
8 |
// load URL helper
|
9 |
$this->load->helper('url'); |
10 |
}
|
Untuk menggunakan pagination di CodeIgniter, hal pertama yang perlu anda lakukan adalah memuat (load) pagination library. Dan kita bisa melakukannya dengan menggunakan $this->load->library('pagination')
.
Kita juga memasukkan helper URL sehingga kita dapat menggunakan function global helper yang disediakan oleh helper tersebut.
Sekarang, kita siap untuk melewati jantung controller kita — method index
.
1 |
public function index() |
2 |
{
|
3 |
// load db and model
|
4 |
$this->load->database(); |
5 |
$this->load->model('Users'); |
6 |
|
7 |
// init params
|
8 |
$params = array(); |
9 |
$limit_per_page = 1; |
10 |
$start_index = ($this->uri->segment(3)) ? $this->uri->segment(3) : 0; |
11 |
$total_records = $this->Users->get_total(); |
12 |
|
13 |
if ($total_records > 0) |
14 |
{
|
15 |
// get current page records
|
16 |
$params["results"] = $this->Users->get_current_page_records($limit_per_page, $start_index); |
17 |
|
18 |
$config['base_url'] = base_url() . 'paging/index'; |
19 |
$config['total_rows'] = $total_records; |
20 |
$config['per_page'] = $limit_per_page; |
21 |
$config["uri_segment"] = 3; |
22 |
|
23 |
$this->pagination->initialize($config); |
24 |
|
25 |
// build paging links
|
26 |
$params["links"] = $this->pagination->create_links(); |
27 |
}
|
28 |
|
29 |
$this->load->view('user_listing', $params); |
30 |
}
|
Untuk memulai, kita pastikan bahwa database di-load dengan benar. Setelah itu, kita load model User
sehingga kita bisa menggunakan method model.
1 |
$this->load->database(); |
2 |
$this->load->model('Users'); |
Selanjutnya, kita menginisialisasi (initialize) beberapa variable penting.
1 |
// init params
|
2 |
$params = array(); |
3 |
$limit_per_page = 1; |
4 |
$start_index = ($this->uri->segment(3)) ? $this->uri->segment(3) : 0; |
5 |
$total_records = $this->Users->get_total(); |
Variable $limit_per_page
mendefinisikan limit per halaman. Tentu saja, anda bisa mengaturnya sesuai keinginan; Pada saat ini variable ini di-set ke 1 sebagai contoh.
Variable $start_index
berperan sebagai starting index dari MySQL record. Saat CodeIgniter membuat link pagination, variable ini menambahkan starting index halaman sebagai segmen ketiga di URL secara default. Anda dapat mengubah perilaku default ini, tapi itu adalah sesuatu yang akan kami simpan pada bagian terakhir artikel ini, di mana kami akan membahas opsi customization.
Akhirnya, kami memanggil method get_total
dari Users model untuk mendapatkan total record dari tabel users, dan ini diberikan ke variable $total_records
.
Selanjutnya, kita mengambil (fetch) record dari current page menggunakan metode get_current_page_records
.
1 |
// get current page records
|
2 |
$params["results"] = $this->Users->get_current_page_records($limit_per_page, $start_index); |
Sebelum kita benar-benar bisa terus maju dan membangun link pagination, kita perlu menginisialisasi (initialize) minimal paging configuration menggunakan metode initialize
dari paging library.
1 |
$config['base_url'] = base_url() . 'paging/index'; |
2 |
$config['total_rows'] = $total_records; |
3 |
$config['per_page'] = $limit_per_page; |
4 |
$config["uri_segment"] = 3; |
5 |
|
6 |
$this->pagination->initialize($config); |
Dan itu adalah seperangkat parameter minimum untuk membangun (build) link pagination.
- base_url: URL yang akan digunakan saat membangun link pagination
- total_rows: Jumlah total record
- per_page: Jumlah record per page
Akhirnya, kami menggunakan metode create_links
untuk membuat link pagination
1 |
// build paging links
|
2 |
$params["links"] = $this->pagination->create_links(); |
Sisanya hanyalah formalitas untuk memanggil view kami user_listing
dan me-render hasilnya! Jalankan URL http://your-code-igniter-site/paging/index untuk melihat user listing beserta link pagination.
Jadi, itu adalah contoh pagination yang paling sederhana namun berguna yang anda butuhkan agar sesuai dengan kebutuhan anda.
Pada bagian selanjutnya, kita akan membahas bagaimana anda dapat menyesuaikan pagination default dalam hal tampilan dan fungsionalitas.
Menjelajahi Opsi Customization
Pada bagian ini, kami akan mengeksplorasi option yang tersedia yang dapat anda gunakan jika anda ingin meng-customize link pagination default.
URI Segment
Meskipun paging pada CodeIgniter secara otomatis mendeteksi parameter yang terkait paging dari URL, anda dapat menentukan custom value jika memiliki pola URL yang berbeda.
1 |
$config["uri_segment"] = 4; |
Jumlah Digit Link
Option num_links
memungkinkana anda menentukan jumlah digit link yang akan ditampilkan sebelum dan sesudah nomor page aktif di link pagination.
1 |
$config['num_links'] = 2; |
Page Number sebagai URI Segment
Saat anda mengakses paging URI segment, secara default ini adalah starting index. Misalnya, jika anda memiliki sepuluh record per page, paging URI segment adalah 20 untuk page ke ketiga. Sebagai gantinya, jika anda ingin menampilkan page number yang sebenarnya di link paging, anda dapat mengatur use_page_numbers
menjadi TRUE
.
1 |
$config['use_page_numbers'] = TRUE; |
Tentu saja, anda harus memastikan bahwa anda mengkalkulasi starting index yang tepat berdasarkan page number yang anda ambil dari URL.
Pertahankan Query String
Lebih sering daripada tidak, anda berakhir dalam situasi di mana anda ingin menyimpan parameter query string yang tidak terkait dengan pagination. Anda dapat menggunakan opsi reuse_query_string
untuk mengaktifkan fasilitas tersebut.
1 |
$config['reuse_query_string'] = TRUE; |
Ini semua adalah beberapa pilihan yang dapat anda gunakan untuk mengubah fungsi pagination default. Selanjutnya, kita akan melihat beberapa opsi lain yang memungkinkan anda mengubah pagination links yang ditampilkan.
Tag Wrapper
Jika anda ingin membungkus (wrap) code pagination dengan tag HTML lainnya, anda bisa melakukannya dengan menggunakan option full_tag_open
dan full_tag_close
.
1 |
$config['full_tag_open'] = '<div class="pagination">'; |
2 |
$config['full_tag_close'] = '</div>'; |
Ini bisa sangat berguna jika anda ingin menerapkan custom styling ke pagination links.
First, Last, Next, dan Previous
Jika anda ingin mengubah text yang akan ditampilkan untuk first, last, next and previous links, anda bisa melakukan hal tersebut juga.
1 |
$config['first_link'] = 'First Page'; |
2 |
$config['last_link'] = 'Last Page'; |
3 |
$config['next_link'] = 'Next Page'; |
4 |
$config['prev_link'] = 'Prev Page'; |
Juga, jika anda ingin me-wrap semua link individual tersebut dengan tag HTML apa pun, anda dapat melakukannya dengan cara yang sama seperti yang kami lakukan untuk me-wrap keseluruhan code paging.
1 |
$config['first_tag_open'] = '<span class="firstlink">'; |
2 |
$config['first_tag_close'] = '</span>'; |
3 |
|
4 |
$config['last_tag_open'] = '<span class="lastlink">'; |
5 |
$config['last_tag_close'] = '</span>'; |
6 |
|
7 |
$config['next_tag_open'] = '<span class="nextlink">'; |
8 |
$config['next_tag_close'] = '</span>'; |
9 |
|
10 |
$config['prev_tag_open'] = '<span class="prevlink">'; |
11 |
$config['prev_tag_close'] = '</span>'; |
Active Link dan Number Link
Terkadang, anda ingin memberikan style yang berbeda pada active link (link aktif). Anda bisa melakukannya dengan menerapkan tag wrapper seperti gambar di bawah ini.
1 |
$config['cur_tag_open'] = '<span class="curlink">'; |
2 |
$config['cur_tag_close'] = '</span>'; |
Dengan cara yang sama, jika anda ingin me-wrap digit link dengan sesuatu:
1 |
$config['num_tag_open'] = '<span class="numlink">'; |
2 |
$config['num_tag_close'] = '</span>'; |
Dan hal itu mengakhiri pembahasan customization. Sebenarnya, anda bisa terus maju dan melihat contoh penyesuaian di http://your-code-igniter-site/paging/custom yang sudah disertakan dalam file controller kami!
Paging Configuration
Sekarang anda mengetahui konfigurasi yang diperlukan untuk set up pagination yang layak dengan model list apa pun. Dan biasanya, anda ingin membuatnya tetap sama di keseluruhan situs. Apa yang akan anda lakukan untuk mencapainya? Anda mungkin tergoda untuk meng-copy configuration code dan mem-paste-nya ke setiap action yang memerlukan pagination configuration.
Sebenarnya, ada cara yang lebih baik untuk menangani skenario ini. Anda dapat membuat file paging configuration di application/config/pagination.php
dan menggunakan variabel $config
untuk menentukan setting anda.
1 |
<?php
|
2 |
$config['per_page'] = 10; |
3 |
$config["uri_segment"] = 3; |
4 |
|
5 |
$config['full_tag_open'] = '<div class="pagination">'; |
6 |
$config['full_tag_close'] = '</div>'; |
7 |
|
8 |
$config['first_link'] = 'First Page'; |
9 |
$config['first_tag_open'] = '<span class="firstlink">'; |
10 |
$config['first_tag_close'] = '</span>'; |
11 |
|
12 |
$config['last_link'] = 'Last Page'; |
13 |
$config['last_tag_open'] = '<span class="lastlink">'; |
14 |
$config['last_tag_close'] = '</span>'; |
15 |
|
16 |
$config['next_link'] = 'Next Page'; |
17 |
$config['next_tag_open'] = '<span class="nextlink">'; |
18 |
$config['next_tag_close'] = '</span>'; |
19 |
|
20 |
$config['prev_link'] = 'Prev Page'; |
21 |
$config['prev_tag_open'] = '<span class="prevlink">'; |
22 |
$config['prev_tag_close'] = '</span>'; |
23 |
|
24 |
$config['cur_tag_open'] = '<span class="curlink">'; |
25 |
$config['cur_tag_close'] = '</span>'; |
26 |
|
27 |
$config['num_tag_open'] = '<span class="numlink">'; |
28 |
$config['num_tag_close'] = '</span>'; |
Berdasarkan hal tersebut, revisi dari method action index
akan terlihat seperti ini:
1 |
public function index() |
2 |
{
|
3 |
// load db and model
|
4 |
$this->load->database(); |
5 |
$this->load->model('Users'); |
6 |
|
7 |
// init params
|
8 |
$params = array(); |
9 |
$start_index = ($this->uri->segment(3)) ? $this->uri->segment(3) : 0; |
10 |
$total_records = $this->Users->get_total(); |
11 |
|
12 |
// load config file
|
13 |
$this->config->load('pagination', TRUE); |
14 |
$settings = $this->config->item('pagination'); |
15 |
$settings['total_rows'] = $this->Users->get_total(); |
16 |
$settings['base_url'] = base_url() . 'paging/config'; |
17 |
|
18 |
if ($total_records > 0) |
19 |
{
|
20 |
// get current page records
|
21 |
$params["results"] = $this->Users->get_current_page_records($settings['per_page'], $start_index); |
22 |
|
23 |
// use the settings to initialize the library
|
24 |
$this->pagination->initialize($settings); |
25 |
|
26 |
// build paging links
|
27 |
$params["links"] = $this->pagination->create_links(); |
28 |
}
|
29 |
|
30 |
$this->load->view('user_listing', $params); |
31 |
}
|
Tentu saja, variable total_rows
dan base_url
berubah dari action to action, jadi anda perlu mengaturnya secara eksplisit dalam setiap action-nya.
Untuk mencapai hal tersebut, anda perlu memuat (load) konfigurasi pagination di tempat semula.
1 |
$this->config->load('pagination', TRUE); |
2 |
$settings = $this->config->item('pagination'); |
Selanjutnya, anda dapat mengganti setting ke action yang spesifik.
1 |
$settings['total_rows'] = $this->Users->get_total(); |
2 |
$settings['base_url'] = base_url() . 'paging/config'; |
Dan anda telah selesai melakukannya!
Jadi begitulah pembahasan konfigurasi pagination, dan itu juga menandai berakhirnya artikel ini!
Kesimpulan
Kali ini, kita membahas library pagination di CodeIgniter.
Pada bagian awal artikel ini, saya menunjukkan bagaimana anda dapat menggunakan library pagination dengan memberikan contoh yang sangat sederhana namun berguna.
Setelah itu, kita membahas opsi customization yang tersedia yang anda perlukan saat set up pagination.
Pada akhirnya, kita membahas konfigurasi pagination di bagian terakhir.
CodeIgniter adalah platform PHP yang powerful. Entah anda baru memulai atau memulai dengan versi berikutnya, jangan lupa juga untuk memeriksa apa saja yang telah kami sediakan untuk anda.
Saya akan menyukai feedback anda dalam bentuk query dan berkomentar menggunakan feed di bawah ini!