Codeigniter

Menggunakan Pagination di Codeigniter

Kali ini, saya akan membuat tutorial tentang Pagination di dalam framework Codeigniter. Pagination adalah library yang sepele namun sangat2 penting tentunya buat Anda yang suka membuat aplikasi web/website dengan data yang sangat banyak, karena pagination memungkinkan Anda untuk menyeleksi dan menampilkan data hanya sebagian data tertentu per halamannya.

Library Pagination secara default sudah ada di dalam framework Codeigniter, dan 100% Customize, bisa diubah tampilannya sesuai yang kita inginkan.

OK, silakan ikuti tutorialnya… :)

Kita buat contoh kasus terlebih dahulu, kasus yang tentunya memerlukan pagination. Yup, BUKU TAMU! Buku tamu adalah fitur untuk pengunjung yang akan meninggalkan pesan di website. Kalo pengunjungnya ada 1000 orang dan kita menampilkannya 1000 baris juga kan ga mungkin, maka dari itu kita harus memakai pagination… :)

Untuk mengikuti tutorial ini, Anda harus sudah meload library database terlebih dahulu di /system/application/config/autoload.php

Silakan copy SQL berikut untuk membuat table bukutamu dan memasukkan datanya:

CREATE TABLE IF NOT EXISTS `bukutamu` (
  `id` INT(11) NOT NULL AUTO_INCREMENT,
  `nama` VARCHAR(100) NOT NULL,
  `email` VARCHAR(100) NOT NULL,
  `pesan` text NOT NULL,
  `created` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=10 ;
 
--
-- Dumping data for table `bukutamu`
--
 
INSERT INTO `bukutamu` (`id`, `nama`, `email`, `pesan`, `created`) VALUES
(1, 'Albert Einstein', 'albert2007@yahoo.com', 'Konten yang sangat menarik dan membantu saya dalam pemrograman web.. ;)', '2010-10-23 09:06:12'),
(2, 'Sabrina', 'sabrina@yahoo.com', 'Like this, web yang sangat membantu saya.. :)', '2010-10-23 20:58:01'),
(3, 'zakky', 'zakky@yahoo.com', 'keren bos.. webnya sangat membantu.. ', '2010-10-23 21:22:37'),
(4, 'Bernand Simamora', 'bernand_cute@yahoo.com', 'Web Tutorial yang sangat bagus, nilai 100 dari saya.. Silakan kembangkan lebih jauh bakat Anda dalam pemrograman Web ;)', '2010-10-24 08:16:47'),
(5, 'Robert Dawn', 'robert@gmail.com', 'That''s good man!', '2010-10-24 08:16:47'),
(6, 'Rizal Juned', 'juned@yahoo.com', 'bisaan euy, ajarkeun lah.... keren2 wae blogna mah... :D', '2010-10-24 08:18:05'),
(7, 'Andi Maulana', 'andimaulana@gmail.com', 'Good luck!', '2010-10-24 08:18:05'),
(8, 'Pak Lurah', 'naonwae@yahoo.com', 'Tutorialnya tambahin lagi dunk gan... :)', '2010-10-24 08:20:59'),
(9, 'Luna Apridola', 'luna_cute@gmail.com', 'bagus bgt tutorialnya!!! thankzz', '2010-10-24 08:20:59');

Setelah table dan data terbentuk, maka sekarang tinggal dibuat modelnya di CI…

/system/application/models/bukutamu_model.php

<?php
 
/**
 * Description of bukutamu_model
 *
 * @author cheyuz
 */
class Bukutamu_Model extends Model
{
 
    function __construct()
    {
        parent::Model();
    }
 
    function get($limit = array())
    {
        if ($limit == NULL)
            return $this->db->get('bukutamu')->result();
        else
            return $this->db->limit($limit['perpage'], $limit['offset'])->get('bukutamu')->result();
    }
 
}
 
?>

Function get() yang ada dalam model tersebut adalah untuk mengambil semua data yang ada di table bukutamu, dengan parameter $limit yang nantinya akan kita pergunakan untuk pagination. Jika $limit tidak diisi, maka data akan ditampilkan semuanya.

OK, setelah model sudah dibuat, maka langkah selanjutnya adalah membuat Controller.

/system/application/controllers/bukutamu.php

<?php
 
/**
 * Description of bukutamu
 *
 * @author cheyuz
 */
class BukuTamu extends Controller
{
 
    function __construct()
    {
        parent::Controller();
        $this->load->helper('url'); //load helper URL untuk memanggil function base_url()
        $this->load->model('bukutamu_model');
    }
 
    function index($offset = 1)
    {
        //tentukan jumlah data per halaman
        $perpage = 3;
 
        //load library pagination
        $this->load->library('pagination');
 
        //untuk konfigurasi pagination
        $config = array(
            'base_url' => base_url() . 'bukutamu/index/',
            'total_rows' => count($this->bukutamu_model->get()),
            'per_page' => $perpage,
        );
 
        //inisialisasi pagination dn config di atas
        $this->pagination->initialize($config);
        $data['bukutamu'] = $this->bukutamu_model->get(array('perpage' => $perpage, 'offset' => $offset));
 
        //tampilkan data
        $this->load->view('bukutamu_view', $data);
    }
 
}
 
?>

Untuk memanggil function base_url(), Anda harus meload terlebih dahulu URL Helper (di atas sudah diload di constructor). Base_url() adalah function untuk mengambil string web root kita, misalnya http://localhost/webku.

OK, untuk konfigurasi Pagination akan saya jelaskan satu2:

  1. base_url: adalah url di mana action untuk memanggil bukutamu ini, karena di sini code terdapat di function index, maka base_url untuk pagination adalah: base_url().'bukutamu/index/'
  2. total_rows: adalah total data, yaitu semua data buku tamu yang diambil dari function get() di bukutamu_model
  3. per_page: adalah jumlah data perhalaman, kita set menjadi 3
  • Banyak sekali konfigurasi yang dapat kita atur di library pagination, dan konfigurasi itu sendiri bisa disimpan di folder /system/config/pagination.php, jadi Anda tidak usah mengeset konfigurasi lagi di setiap Controller.
  • Parameter $offset sangat diperlukan karena untuk menentukan limit dan offset untuk menampilkan isi data di setiap halaman

Sekarang kita buat view dengan nama bukutamu_view.php.

/system/application/views/bukutamu_views.php

<?php foreach ($bukutamu as $bt): ?>
    <div>
        <div><b><?php echo $bt->nama ?></b></div>
        <span><?php echo $bt->email ?></span>
        <p><?php echo $bt->pesan ?></p>
    </div>
    <hr />
<?php endforeach; ?>

Silakan jalankan aplikasi Anda di browser…
udah?
“lho, lho, data kok cuman tampil 3?”

Iya, emang seperti itu, hanya saja kita belum menampilkan link paginationnya. Untuk menampilkannya, tambahkan kode php berikut ini:

<?php echo $this->pagination->create_links(); ?>

jadi kode di view lengkapnya seperti ini:

<?php foreach ($bukutamu as $bt): ?>
    <div>
        <div><b><?php echo $bt->nama ?></b></div>
        <span><?php echo $bt->email ?></span>
        <p><?php echo $bt->pesan ?></p>
    </div>
    <hr />
<?php endforeach; ?>
 
<?php echo $this->pagination->create_links(); ?>

Silakan jalankan browser Anda… :)
Jika Anda mengikuti tutorial dengan benar, Anda akan melihat link Pagination di bawah daftar bukutamu..

Untuk memanipulasi tampilan pagination, silakan ikuti cara saya berikut:
Buatlah file pagination.php di dalam direktori /system/application/config, kemudian tambahkan baris konfigurasi berikut:

<?php
$config['full_tag_open'] = '<div>';
$config['full_tag_close'] = '</div>';
$config['next_link'] = 'Lanjut &raquo;';
$config['prev_link'] = '&laquo; Kembali';
$config['num_tag_open'] = '<div>';
$config['num_tag_close'] = '</div>';
$config['cur_tag_open'] = '<div>';
$config['cur_tag_close'] = '</div>';
$config['num_links'] = 1;
$config['last_link'] = '<b>Terakhir &rsaquo;</b>';
$config['first_link'] = '<b>&lsaquo; Pertama</b>';
?>

Kemudian tambahkan CSS berikut:

/**
@author Cheyuz
**/
.pagination{background: #eee; margin: 5px; padding: 10px;}
.pagination .digit{padding: 0 10px 0 10px; display: inline;}
.pagination .digit:hover, .pagination .current{padding: 2px 10px 2px 10px; background: #fff; font-weight: 900; -moz-border-radius:5px}

maka tampilannya akan berubah menjadi seperti berikut:

Selamat mencoba!
Go Web Developer Indonesia!!!

 

sumber : http://harian.cheyuz.com/tutorial/menggunakan-pagination-di-codeigniter-2

About Suendri

Owner dan Founder Go Software Media sebelumnya bernama PHPBeGO Foundation

Discussion

No comments yet.

Tinggalkan Komentar

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

Follow Go Software Media Blog on WordPress.com

Enter your email address to follow this blog and receive notifications of new posts by email.

Join 63 other followers

Archives

%d bloggers like this: