Pada kesempatan kali ini saya akan membahas tentang bagaimana cara membuat bootstrap pagination di codeigniter, bootstrap version yang digunakan pada tutorial ini adalah Boostrap 3 dan untuk codeigniternya menggunakan Codeigniter versi 2 terbaru.
Pertama kita persiapkan dulu apa saja yang akan kita gunakan pada tutorial kali ini, apa bila kalian belum memilikin file boostrapnya maka bisa kalian download di getbootstrap.com dan untuk codeigniternya bisa di download di codeigniter.com.
Ok jika sudah kalian siapkan maka kita sekarang akan membuat databasenya terlebih dahulu buka phpmyadmin kalian lalu buatlah database dengan nama : pagination
Lalu setelah itu buatlah table dengan nama : table_siswa
Maka struktur database dan table yang kita gunakan kurang lebih seperti pada gambar dibawah.
Setelah table selesai dibuat, selanjutnya coba kalian insert 5 data kedalam table tersebut, atau bisa mengcopy script sql dibawah ini.
INSERT INTO `pagination`.`table_siswa` (`nis`, `nama`, `kelas`) VALUES (NULL, ‘Udin’, ‘3’), (NULL, ‘Ucok’, ‘2’), (NULL, ‘Andi’, ‘1’), (NULL, ‘Deni’, ‘2’), (NULL, ‘Ica’, ‘2’);
Selanjutnya kita siapkan struktur codeigniter dan boostrap yang akan digunakan, buat project baru lalu berinama : pagination dan simpan di folder htdocs kalian.
Struktur Project
Gambar diatas adalah struktur project yang kita gunakan pada tutorial kali ini, selanjutnya kita konfigurasi codeigniternya.
Konfigurasi Database : Buka file di application->config->database lalu ubah seperti pada gambar dibawah.
Konfigurasi Default Controller : Buka file di application->config->routes lalu ubah seperti gambar dibawah.
Konfigurasi Library & Helper : Buka file di application->config->autoload lalu ubah seperti gambar dibawah.
Selanjutnya kita buat file modelnya, berinama model : model_pagination
Lalu simpan di folder application->models dan masukan script dibawah ini.
Model : model_pagination.php
<?php
class Model_pagination extends CI_Model {
function view($num, $offset) {
/*variable num dan offset digunakan untuk mengatur jumlah
data yang akan dipaging, yang kita panggil di controller*/
$query = $this->db->get("table_siswa",$num, $offset);
return $query->result();
}
}
?>
Selanjutnya kita buat file controller, berinama controller : paging
Lalu simpan di folder application->controller dan masukan script dibawah ini.
Controller : paging.php
<?php if(!defined('BASEPATH')) exit ('No direct script access allowed');
class Paging extends CI_Controller {
public function __Construct(){
parent ::__construct();
$this->load->model('model_pagination');
/* memanggil atau mengkoneksikan model pagination
dengan controller pagination */
}
public function index() {
$this->view();
}
public function view($offset=0) {
$jml = $this->db->get('table_siswa');
$config['base_url'] = base_url().'index.php/paging/view';
$config['total_rows'] = $jml->num_rows();
$config['per_page'] = 3; /*Jumlah data yang dipanggil perhalaman*/
$config['uri_segment'] = 3; /*data selanjutnya di parse diurisegmen 3*/
/*Class bootstrap pagination yang digunakan*/
$config['full_tag_open'] = "<ul class='pagination pagination-sm' style='position:relative; top:-25px;'>";
$config['full_tag_close'] ="</ul>";
$config['num_tag_open'] = '<li>';
$config['num_tag_close'] = '</li>';
$config['cur_tag_open'] = "<li class='disabled'><li class='active'><a href='#'>";
$config['cur_tag_close'] = "<span class='sr-only'></span></a></li>";
$config['next_tag_open'] = "<li>";
$config['next_tagl_close'] = "</li>";
$config['prev_tag_open'] = "<li>";
$config['prev_tagl_close'] = "</li>";
$config['first_tag_open'] = "<li>";
$config['first_tagl_close'] = "</li>";
$config['last_tag_open'] = "<li>";
$config['last_tagl_close'] = "</li>";
$this->pagination->initialize($config);
$data['halaman'] = $this->pagination->create_links();
/*membuat variable halaman untuk dipanggil di view nantinya*/
$data['offset'] = $offset;
$data['data'] = $this->model_pagination->view($config['per_page'], $offset);
$this->load->view('view_paging',$data);
/*memanggil view pagination*/
}
}
?>
Dan terakhir kita buat viewnya, berinama view : view_paging
Lalu simpan di folder application->views dan masukan script dibawah.
Views : view_paging.php
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bootstrap Pagination di Codeigniter</title>
<!--CSS CORE Bootstrap-->
<link href="<?php echo base_url(); ?>assets/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="row-fluid" style="margin-top:10px;">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">Data Siswa</div>
<div class="panel-body">
<div class="table-responsive">
<table width="200" border="0" class="table">
<tr>
<td>Nis</td>
<td>Nama</td>
<td>Kelas</td>
</tr>
<!--Script view yang dipakai -->
<?php
$no = $offset;
foreach($data as $row ) {
?>
<tr>
<td><?php echo ++$no;?></td>
<td><?php echo $row->nama; ?></td>
<td><?php echo $row->kelas; ?></td>
</tr>
<?php } ?>
</table>
</div>
</div>
<div class="panel-footer" style="height:40px;">
<?php echo $halaman ?> <!--Memanggil variable pagination-->
</div>
</div>
</div>
</div>
</body>
<!--BOOTSTRAP CORE JQUERY-->
<!-- jQuery Version 1.11.0 -->
<script src="<?php echo base_url()?>assets/js/jquery.min"></script>
<!-- Bootstrap Core JavaScript -->
<script src="<?php echo base_url()?>assets/js/bootstrap.min.js"></script>
</html>
Sekarang coba kalian buka dibrowser localhost/paginationmaka tampilan project yang kita buat akan seperti gambar dibawah.
Dan selesai sudahlah tutorial cara membuat bootstrap paging di codeigniter pada kali ini, semoga tutorial ini bisa membantu dan bermanfaat bagi kalian yang ingin belajar dan membutuhkannya. Terimakasih telah berkunjung bila ada yang kurang paham bisa bertanya di kolom komentar.
Source code dan database dari project dibawah ini juga bisa kalian download pada link dibawah ini, apabila teman-teman ingin dipahami lebih lanjut dan mencoba mengkreasikannya.
bagus sekali tutornya , terima kasih ya
sama-sama mas, semoga membantu 🙂
paging nya gak jalan kenapa ya?
404 Page Not Found
disettingan base urlnya sudah belum benar mas ? pas bagian script yg ini " $config['base_url'] = base_url().'index.php/paging/view'; "
kalo biar ada last dan firstnya gmana ya gan ?
mencoba membantu
tambahkan $config['first_link'] = "awal";
$config['last_link'] = "akhir";
This comment has been removed by the author.
Malah muncul gini:
Message: Undefined variable: halaman
Filename: views/meeting.php
Kenapa ya?
terima kasih banyak gan untuk tutorialnya, sangat membantu sekali 🙂
Thanks buat tutornya..
http://www.smartkiosku.com
sama sama 🙂
$config['base_url'] = base_url().'index.php/paging/view';
mas kalo code yang itu ngambilnya darimana kita harus buat dlu apa udah ada dari sananya?
itu tergantung kamu nge redirect link paginationnya kemana pas di klik, index.php itu hanya base url dan bisa dihilangkan di settingan cinya pada file config, sedangkan paging itu nama controller dan view itu nama function, jadi maksud script diatas ketika kamu klik link page 2 misalkan pada pagination maka jadinya akan otomatis : http:/url/paging/view/2
thanks broo ..
success full ..