Advertisement
  1. Code
  2. PHP
  3. CodeIgniter

Pagination di CodeIgniter: Panduan Lengkap

Scroll to top
Read Time: 12 min

() 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!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.