CodeIgniter Talk : Pagination

Bagi kebanyakan website dinamis (e.g., blog, search engines, news, etc) memerlukan navigasi halaman. Navigasi ini akan terbentuk secara dinamis (ketika suatu halaman di-load) bergantung pada jumlah data yang tersimpan dalam database atau jumlah data yang dibentuk untuk sebuah report.  

Tutorial Details

  • Program : Codeigniter v2.1.0
  • Topic : Pagination
  • Difficulty : Easy to Intermediate
  • Estimated Completion Time : About 30 minutes

Assumptions

  • Anda sudah memahami cara kerja framework CodeIgniter.
  • Anda sudah mengerti bagaimana URL terbentuk dalam framework CodeIgniter.
  • Anda mengerti tentang penggunaan mod_rewite dalam CodeIgniter merupakan suatu nilai tambah.
  • Anda sedang mengalami kesulitan dalam pembuatan navigasi halaman(page navigation).

Step 1. Configuring CodeIgniter

Unduh framework CodeIgniter versi 2.1.0 disini dan extract di folder xampp/htdocs/. Setelah itu rename folder CodeIgniter_2.1.0 menjadi tutorial-ci-pagination. Buka dengan web browser halaman http://localhost/tutorial-ci-pagination, anda akan melihat halaman default CodeIgniter yang belum dikonfigurasi.

Untuk mengkonfigurasi CodeIgniter anda harus mengubah beberapa script PHP yang ada pada folder /tutorial-ci-pagination/application/config/.

  • Configuring config.php file

cari script seperti berikut :

$config['base_url'] = '';

dan diubah menjadi,

$config['base_url'] = 'http://' . $_SERVER['HTTP_HOST'] . '/tutorial-ci-pagination';

base_url digunakan untuk menentukan alamat domain kita, dalam hal ini halaman awal kita berarti http://localhost/tutorial-ci-pagination. Script $_SERVER[‘HTTP_HOST’] berfungsi untuk mengambil alamat domain kita secara dinamis, dikarenakan kita menggunakan server local maka script tersebut akan menghasilkan localhost. Penambahan path /tutorial-ci-pagination itu sendiri berhubungan dengan folder website yang kita buat sebelumnya.

  • Configuring routes.php file

Dikarenakan CodeIginiter merupakan implementasi dari OOP, maka fungsi-fungsi CodeIgniter selalu diakses melalui Controller. Controller yang pertama kali diakses oleh browser yang merequest halaman domain kita dinamakan default_controller. default_controller ini dapat diubah-ubah sesuai dengan keinginan kita. Untuk kali ini, ubah script berikut ini :

$route['default_controller'] = "welcome";

dengan,

$route['default_controller'] = "home";

Script diatas akan mengubah default controller halaman web kita ke controller home yang kan kita buat nanti.

  • Configuring autoload.php file

Ketika suatu halaman CodeIginiter diakses, system CodeIgniter akan menge-load beberapa file yang diperlukan untuk eksekusi fungsi-fungsi yang ada di Controller. File-file tersebut dapat berupa libraries, packages, helper, config, language dan model. Untuk kali ini, kita akan memerintahkan system untuk secara default menge-load database. Karena database merupakan sebuah library, maka ubah script berikut :

$autoload['libraries'] = array();

menjadi,

$autoload['libraries'] = array('database');
  • Configuring database.php file

Ketika database di-load oleh system, maka system akan melakukan koneksi dengan database dengan parameter yang dikonfigurasi di file database.php. Oleh karena itu, ubah beberapa script didalamnya menjadi seperti ini.

$db['default']['hostname'] = 'localhost';
$db['default']['username'] = 'root';
$db['default']['password'] = '';
$db['default']['database'] = 'tutorialci';
$db['default']['dbdriver'] = 'mysql';
$db['default']['dbprefix'] = '';
$db['default']['pconnect'] = TRUE;
$db['default']['db_debug'] = TRUE;
$db['default']['cache_on'] = FALSE;
$db['default']['cachedir'] = '';
$db['default']['char_set'] = 'utf8';
$db['default']['dbcollat'] = 'utf8_general_ci';
$db['default']['swap_pre'] = '';
$db['default']['autoinit'] = TRUE;
$db['default']['stricton'] = FALSE;

Perlu dipastikan bahwa kita akan melakukan koneksi ke database server local dengan username dan password default dimana database yang akan kita gunakan adalah tutorialci.

Step 2. Initializing Database

Buatlah sebuah database dengan nama tutorialci pada MySQL , lalu eksekusi script DDL berikut ini.

CREATE TABLE IF NOT EXISTS `students` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `student_number` varchar(10) NOT NULL,
  `name` varchar(50) NOT NULL,
  `gpa` float NOT NULL,
  `course` varchar(50) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=20 ;

Lalu untuk menginisialisasi data, eksekusi query DML berikut.

INSERT INTO `students` (`id`, `student_number`, `name`, `gpa`, `course`) VALUES
(1, '080704851', 'Stefanus Diptya', 4, 'Civil Engineering '),
(2, '080704512', 'Park JiYeon', 4, 'Informatics Engineering '),
(3, '080705421', 'Jet Lie', 4, 'Mathematics'),
(4, '080705445', 'Boram', 4, 'Biology'),
(5, '08045124', 'Eun Jeong', 4, 'Physics'),
(6, '080504214', 'Bae Su Jie', 4, 'Accounting'),
(7, '090405124', 'Ji Eun', 4, 'Management'),
(8, '060504124', 'Han Shunhwa', 4, 'Law'),
(9, '050401521', 'Jang Nara', 4, 'Psychology'),
(10, '050402154', 'Eunji', 4, 'Communications'),
(11, '050107895', 'Song Hye Kyo', 4, 'Music'),
(12, '080405784', 'Soyoung', 4, 'Architecture'),
(13, '090805402', 'Hyorin', 4, 'Product Design'),
(14, '030502145', 'Ailee', 4, 'Interior Design'),
(15, '060504214', 'Sohyun', 4, 'Physics'),
(16, '090804211', 'Hyuna', 4, 'Visual Com. Design'),
(17, '050407842', 'Ye Eun', 4, 'English Language'),
(18, '080405421', 'Kang Sora', 4, 'Electrical Engineering '),
(19, '060501244', 'Shinhwa', 4, 'Industrial Engineering');

Step 3. Creating data model

Buatlah model dengan nama students_model.php pada folder application/models, lalu isikan dengan script berikut.

<?php

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

class students_model extends CI_Model {

    public function __construct() {
        parent::__construct();
    }

    function getAll() {
        $this->db->select('*')->from('students');
        return $this->db->get();
    }

    function getWithLimit($start, $limit) {
        $this->db->select('*')->from('students');
        $this->db->limit($limit, $start);
        return $this->db->get();
    }
}

?>

Pada data model ini kita membuat query untuk mengambil keseluruhan data yang ada pada table students(getAll) dan query untuk  mengambil data dengan batasan(getWithLimit). Query pengambilan keseluruhan data digunakan untuk mencari jumlah data yang ada pada database, sedangkan query dengan batasan(limit) berguna untuk mengambil data dalam page tertentu tergantung posisi awal data dan banyaknya data yang akan diambil.

Step 4. Creating view

Buatlah file home_view.php pada folder application/views, lalu isikan dengan script berikut.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Tutorial Pagination CI</title>

        <style type="text/css">
            th {
                font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica,sans-serif;
                color: #6D929B;
                border-right: 1px solid #C1DAD7;
                border-bottom: 1px solid #C1DAD7;
                border-top: 1px solid #C1DAD7;
                letter-spacing: 2px;
                text-transform: uppercase;
                text-align: left;
                padding: 6px 6px 6px 12px;
                background: #CAE8EA;
            }
            td {
                border-right: 1px solid #C1DAD7;
                border-bottom: 1px solid #C1DAD7;
                background: #fff;
                padding: 6px 6px 6px 12px;
                color: #6D929B;
            }
        </style>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>Student Number</th>
                    <th>Name</th>
                    <th>Grade Point Average(GPA)</th>
                    <th>Course</th>
                </tr>
            </thead>
            <tbody>
                <? foreach ($students as $student) { ?>
                    <tr>
                        <td><? echo $student->student_number ?></td>
                        <td><? echo $student->name ?></td>
                        <td><? echo $student->gpa ?></td>
                        <td><? echo $student->course ?></td>
                    </tr>
                <? } ?>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="4"><? echo $this->pagination->create_links(); ?></td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>

Pada file view ini kita membuat design tampilan untuk memetakan data students yang akan kita ambil dari database. Yang perlu diperhatikan adalah script yang ada diantara tag tbody. Disana terdapat PHP embedded script, yaitu script PHP yang digabungkan dengan script HTML. Didalam script tersebut kita melakukan perulangan dengan foreach terhadap variable $students yang kita dapat dari controller. Variable $students tersebut di-assign satu persatu kedalam variable $student dimana variable ini dalam bentuk object sehingga dalam pengaksesan datanya menggunakan tanda “->”.

Satu baris lagi yang tak kalah pentingnya dengan script foreach adalah script PHP yang ada pada tag <tfoot>, disana kita menggunakan fungsi yang sudah disediakan oleh library pagination untuk membuat link sebagai navigasi halaman. Tentunya pembuatan link ini tidak lepas dari konfigurasi yang kita akan buat pada controller.

Step 5. Creating controller

 Buatlah file home.php pada folder application/controllers. Lalu isikan dengan script berikut.

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

class Home extends CI_Controller {

    var $per_page;

    public function __construct() {
        parent::__construct();
        $this->load->helper("url");
        $this->load->library('pagination');
        $this->load->model('students_model');

        $this->per_page = 5;
        $count = $this->students_model->getAll()->num_rows();
        $config['base_url'] = site_url('home/page/');
        $config['total_rows'] = $count;
        $config['per_page'] = $this->per_page;
        $this->pagination->initialize($config);
    }

    public function index() {
        $data['students'] = $this->students_model->getWithLimit(0, $this->per_page)->result();
        $this->load->view('home_view', $data);
    }

    public function page($from = 0) {
        $data['students'] = $this->students_model->getWithLimit($from, $this->per_page)->result();
        $this->load->view('home_view', $data);
    }

}
?>

Class controller ini mempunya 1 variable yang digunakan untuk initial jumlah data yang akan ditampilkan tiap pagenya. Kita asumsikan per-page akan menampilkan 5 data saja. Lalu dibagian konstruktor class ini terdapat pemuatan beberapa file, yaitu helper url untuk kita dapat menggunakan fungsi-fungsi yang dapat memanipulasi url, library pagination untuk memanfaatkan fungsi pembuat navigasi halaman, dan yang terakhir adalah model students_model untuk dapat menggunakan fungsi-fungsi query yang sudah dibuat didalam model tersebut.

Selain itu pada konstruktor kelas ini, terdapat beberapa konfigurasi basic pagination, yaitu

  1. base_url adalah alamat yang digunakan untuk menampilkan page dengan masukan starting point(posisi awal) data yang akan ditampilkan. Oleh karena kita akan mengolah inputan tersebut dalam fungsi “page”, maka kita assign dengan site_url(“home/page”).
  2. total_rows digunakan untuk memberikan initial kepada pagination berapa banyak data yang ada dalam database jika semuanya ditampikan. Maka kita ambil value ini dari fungsi getAll() pada students_model dan dihitung berapa jumlah datanya.
  3. per_page digunakan untuk memberikan initial kepada pagination berapa banyak data yang akan ditampilkan dalam satu page.

Sebenarnya konfigurasi ini tidaklah mengatur berapa banyak data yang akan ditampilkan, melainkan untuk membuat navigation link. Maka untuk mengambil data yang sesuai dengan page yang sekarang dituju kita dapat menggunakan fungsi getWithLimit() pada students_model. Dimana pada fungsi index(fungsi yang diload secara default bila tidak ada fungsi terdefinisi dibagian url) ini kita selalu memulai dengan data ke 0 sampai batas banyaknya data per-page.

Pada fungsi page, terdapat 1 parameter $from. Jika parameter ini tidak didefinisikan dibagian url, maka parameter ini secara default akan diberi nilai 0. Parameter ini bertujuan untuk mengambil starting point(posisi awal) data yang akan diambil.

The Results

Gambar 1 : Page 1 on index(default function)

Gambar 2 : Page 2

Gambar 3 : Back to the page 1(But different url/function)

Summary

Pagination sangatlah penting bagi website yang mempunyai banyak data, baik itu yang sering diperbaharui maupun tidak. Karena dengan pagination, halaman suatu website tidak akan menjadi panjang yang akan sangat menguras tenaga user saat melakukan scrolling page kebagian bawah maupun sebaliknya.

Anda bisa mendukung saya untuk tetap melakukan update tutorial dengan cara mem-follow blog saya, atau mem-follow twitter saya disini, bisa juga dengan meninggalkan komentar dan atau me-request tutorial yang anda inginkan. Best regards, eSDhee

Advertisements

18 thoughts on “CodeIgniter Talk : Pagination

  1. terimakasih mas tutorialnya sangat bermanfaat 🙂

    mas mau request , tolong buatin caranya upload image / file 😀

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s