Level: BASIC
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:
- 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 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 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>'; ?>
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!!!
itu file css ditaroh dimana ya mas??
apa perlu di bikin file baru??
:Yb
Nice info bro.. keep on going..
@andi: terserah mas.. mau ditaro di root pun tak apa2… bisa kok..
@joshua: ok gan, thanks
bro, aku uda coba running skrip diatas, pas klik next, knp muncul error not found ya ?
mohon pencerahannya..
thx
@joshua :
coba kamu periksa di bagian base_url nya … mungkin punyamu salah… gw udah coba skrip diatas jalan kok
@steflo: thanks steflo
Oh ya bro, di URL nya saya kurang /index
Thanks utk koreksinya..
Thanks gan, nice tutorial.. lanjutkan yahh..
I believe in Angels, the ones that Heaven sends. Now you look on my blog .
@Joshua: sippp…
thanks pisan gan tutornya..
) )
udah ngebantu ane nyelesein tugas akhir..
dari yg gk tw apa2 sampe jadi kyk sekarang (sedikit ngerti…hahaha
btw…
req tutor validation dong…
udah muter2 gk ada yg jelas…
klo bisa ama hit counternya ya…
ditunggu boss…
keep posting…
@vandcurrent: oh ok gan,, nanti saya buat tutorial validation bawaan CI ya… sip..
cssnya ditaro di root maksudnya gimana mas yah?itu udah langsung copas trus di save as file .css kah?
@diaz: iya di root itu mksudnya di luar folder system… yup, tinggal disave .css…
aduh2. kq pusing kepalaku ngliat kode2 ini.
di bookmark dulu, mau minum paramex. ntar baru lanjut baca lagi
ngasih nama cssnya apa ya?
trus kita kan mau import css tsb, nah ngimportnya gimana mas?
@paijan: hehehe ok gan, minum paramex dulu gan …
kasih namanya terserah gan… misalnya style.css
Ngeload CSS:
simpen di dalam tag :
<link rel="stylesheet" type="text/css" href="css/style.css” media=”all” />
pake base_url, jadi nantinya bikin file style.css di dalam folder nama_situs/css….
Hello I remember i had seen this website before… This guy made a exact copy of your site. Or possible this is also your site? http://www.autotraffic-avalanche.org
mantaps bro….
aku berhasil…
tapi klo aku terapkan pada Pola HMVC
berhasil tpi kurang memuaskan
data berubah tapi tampilanya pagination tetap
adakah pencerahan buatku, thanx sebelumnya
gan ngomong2 cssnya knp yg bisa load cuman
localhost/root aja ya…
kalo udh manggil functionnya ilang cssnya kayak
localhost/root/home/about dia nggak ada css nya
kalo pake base_url() malah error.. knp ya?
@heri: berhasil? sip..
maksudnya pagination tetap gimana gan?
@ellidien: CSS buat pagination gan? coba pake templating: http://harian.cheyuz.com/_other/tutorial-codeigniter-dasar-part-iii-page-template
saya coba di wind 7 kok masih ada errornya ya
Deprecated: Assigning the return value of new by reference is deprecated in C:\xampp\htdocs\CodeIgniter2\system\codeigniter\Common.php on line 123.
thx newbie niyyy
gan mau nanya
return $this->db->limit($limit['perpage'], $limit['offset'])->get(‘bukutamu’)->result();
}
jalan. tapi ane pake join gan. kalau di punya ane
return $this->db->limit($limit['perpage'], $limit['offset'])->get(‘peminjaman’)->result();
nah kalau join table jadinya
return $this->db->limit($limit['perpage'], $limit['offset'])->query(‘SELECT * FROM peminjaman join ormawa on peminjaman.IDOrmawa = ormawa.IDOrmawa’)->result();
link pagenation nya muncul, tapi nampilin semua data. pada hal $perpage nya dah ane set kecil (misal 2), datanya 8, ya nampilin 8 data langsung.
harusnya 2, trus next page…
ane kudu join table buat tampilin info nya gan. ada solusi, kalau bisa fast reply gan
(lagi urgent)
@azmi: maaf br bls… sy baru buka blog lg stelah menghadapi koneksi yg menjengkelkan hehe.. oh itu pasti ga bisa, soalnya function limit() digabung sama query()… jadi klo mau tambahin aja limit di dalam querynya,,, jangan memakai function limit() bawaan active record pada jquery.. smoga membantu..
thanks kang Cheyuz
sangat membatu sekali,
namun sebelumnya saya sempet bingung, karena pake CI 2.0, ada beberapa yg error dari script di atas..
tapi Alhamdulillah sudah teratasi.
trus semangat utk blogingnya ya kang
@arif: sip, thanks ya..
@ica: coba pakai Codeigniter versi 1.7.2
Thanks bro ilmunya…
@ojan: eh c ojan euy… sama2 Jan.. gw udah lama ga update nih blog hehehe..
Salam Sob.
Makasih tutorialnya, sangat membantu saya belajar.
Sob. boleh request ya … hehe
Bisa ga “pagination with ajax”. Dulu saya pernah lihat, lupa punya siapa, ga sempet ngopy.
Update terus ya sob, Sukses selalu.
@andiliee: ok nanti saya buat tutorialnya
Thx mas…. lg praktek nih.. kalo error balik lg kesini nanti
ak.. tanya dong..
pada bagian model kan diambil dari buku tamunya
return $this->db->get(‘bukutamu’)->result();
selanjutnya ditampilin
‘total_rows’ => count($this->bukutamu_model->get())
bagaimana sih caranya agar result dari buku tamu tersebut tampil dengan sort ascending/descending? soalnya
hasil yang dari $this->db->get(‘bukutamu’)->result() tampilnya dari yang lama dulu baru yang baru, sedangkan yang ingin ditampilkan yang baru dulu baru yang lama.
terimakasih.
@ricky: pake order by yg ada di CI, caranya tambahin order_by(“date”, “desc”) sebelum get(), jadi caranya: $this->db->order_by(‘date’, ‘desc’)->get(‘bukutamu’)->result();
kok ga mau ya ak, pas di coba di urutin di mysqlnya bisa pake query sql, tapi kok tampilannya masih tetep aja ga bisa terurut baik desc atau asc melalui codeigniternya
@ricky: kok ga mau ya… harusnya bisa kok Rick… klo mau gini aja alternatifnya pake query manual… $this->db->query(“select * from bla bla bla”)->result();
kalo…diklik next posisinya selalu di no.1 kenapa ya?
ko ga muncul ya style css nya, udah di ulik beberapa puluhkali, tetep tampilannya standdard, malah jadi jelek ada Enternya, ga ada style yang keluar. heu heu HELP
Gan Ko Ga mundul ya css, paginationnya, defaul aja.
apanya gan yang kurang?
apakah ada yuang lain waktu pemanggilannya ?
ga ngaruuuh yang ini
makasih ..
Coba ganti tambahin ketika udah diload script ini:
$config['uri_segment'] = 3;
atau
$config['uri_segment'] = 4;
@Yusuf: mungkin di .htaccess-nya blm diallow extensi .css
@Yusuf: Pake .htaccess ga?
gan kok ane g tampil y?
mas, klw di ci 2.x.x gimana caranya mas..? saya coba cara di atas tapi gak jalan… thanks be 4