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:
Code:
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');
/system/application/models/bukutamu_model.php
PHP Code:
<?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();
}
}
?>
OK, setelah model sudah dibuat, maka langkah selanjutnya adalah membuat Controller.
/system/application/controllers/bukutamu.php
PHP Code:
<?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);
}
}
?>
OK, untuk konfigurasi Pagination akan saya jelaskan satu2:
- 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/'
- total_rows: adalah total data, yaitu semua data buku tamu yang diambil dari function get() di bukutamu_model
- 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 Code:
<?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; ?>
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 Code:
<?php echo $this->pagination->create_links(); ?>
PHP Code:
<?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(); ?>
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 Code:
<?php
$config['full_tag_open'] = '<div class="pagination">';
$config['full_tag_close'] = '</div>';
$config['next_link'] = 'Lanjut »';
$config['prev_link'] = '« Kembali';
$config['num_tag_open'] = '<div class="digit">';
$config['num_tag_close'] = '</div>';
$config['cur_tag_open'] = '<div class="digit current">';
$config['cur_tag_close'] = '</div>';
$config['num_links'] = 1;
$config['last_link'] = '<b>Terakhir ›</b>';
$config['first_link'] = '<b>‹ Pertama</b>';
?>
Code:
/**
@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}
Selamat mencoba!
