TI-STMIKNH.COM - Pagination merupakan sebuah fitur yang digunakan untuk membatasi tampilan data agar tidak terlalu panjang dan  lebih rapi. Seperti jika anda klik kategori berita pada ti-stmiknh.com saat ini. Penggunaan pagination sangat umum digunakan untuk menampilkan data dalam jumlah banyak, sehingga dapat dipisah / dipilih berapa data yang akan ditampilkan terlebih dahulu.

Bagi yang menggunakan codeigniter framework, tidak terlalu sulit untuk menerapkan library pagination yang ada pada Codeigniter,caranya pun sudah cukup jelas apa bila dilihat pada user guide yang sudah ada. 

Baiklah mari kita mulai berkreasi dengan pagination pada Framework Codeigniter. Pertama kali pada folder controller kita tambahkan code untuk mengakses library pagination, menambahkan model dan membuat fungsi controller. Berikut Syntaxnya:

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

class berita extends CI_Controller {

 public function __construct ()

{

parent::__construct();

$this->load->helper(array("html","form","url","text"));

$this->load->library('pagination');

$this->load->model("m_berita");

}

public function kategori ($id)

{

$query = $this->db->query("select count(*) as jml from berita where  id_kategori = '".$id."' and aktif = 'Y'");

foreach ($query->result() as $row)

{

$row = $row->jml;

}

$config['base_url'] = base_url().'/berita/kategori/'.$id.'/';

$config['total_rows'] = $row;

$config['per_page'] = 2;

$config['uri_segment'] = 4;

$this->pagination->initialize($config);

$data['pagination']=$this->pagination->create_links();

$data['artikel'] = $this->m_berita->getberitakat($id, $config['per_page'], $this->uri->segment(4));

$this->load->view("v_berita",$data);

}

}

?>

Simpan script diatas dengan nama berita.php pada folder controller.

Kemudian kita akan membuat model untuk controller di atas, simpan script dibawah ini dengan nama m_berita.php pada folder model

<?php

class m_berita extends CI_model

{

function __construct ()

{

parent::__construct();

$this->load->database();

}

function getberitakat($catid, $perPage, $uri) {

        $data = array();

        $this->db->select('*');

        $this->db->from('berita');

        $this->db->where("id_kategori", $catid);

        $this->db->order_by('id_berita', 'desc');

        $this->db->where('aktif', 'Y');

        $getData = $this->db->get('', $perPage, $uri);

        if ($getData->num_rows() > 0)

        return $getData->result_array();

        else

            return null;

    }

}

?>

Kemudian kita akan membuat file untuk menampilan hasil dari proses diatas kepada folder view. Copy folder dibawah ini dan beri nama v_berita.php

<div id="frames">
<div id="berita-lain">
<?php
if (count($artikel)) {
foreach($artikel as $key => $row){
$isi=strip_tags($row['isi_berita']);
$isi=substr($isi,0,170);
$judul=$row['judul'];
$d = array (',','-','/','\\',',','.','#',':',';','\'','"','[',']','{','}',')','(','|','`','~','!','@','%','$','^','&','*','=','?','+');
$judul = str_replace($d, '', $judul);
$judul=strtolower(str_replace(' ','-',$judul));
?>
<table id="main-center"><tbody><tr><td><span class="judullain"><a href="<?php echo base_url(); ?>berita/detail/<?php echo $row['id_berita']."/".$judul."/";?>"><?php echo $row['judul']; ?></a></span><br><span class="tanggalcenter">Senin, 03 Februari 2014 - 17:39:16 WIB | by: <um>Iwan ft. Radit</um></span><br><span class="image"><img src="<?php echo base_url(); ?>foto_berita/small_<?php echo $row['gambar']; ?>" width="155" height="90" border="0"></span><?php echo $isi; ?>...
<br></td></tr>
</tbody></table>
<?php 
} 
}
else {
?>
<h4 >Maaf, Data Belum Tersedia !</h4>
<?php
}
?>
</div>
<div class="pagination">
<?php echo $pagination; ?></div>
</div>

Untuk membuat tampilan ala bootsrap kita harus menambahkan satu file pada folder application/config. Copy script dibawah ini dan simpan dengan nama pagination.php simpan ke folder application/config.

<?php
/* This Application Must Be Used With BootStrap 3 *  */
$config['full_tag_open'] = "<ul >";
$config['full_tag_close'] ="</ul>";
$config['num_tag_open'] = '<li>';
$config['num_tag_close'] = '</li>';
$config['cur_tag_open'] = " <li class='active disabled'><a >";
$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>";

?>

Selanjutnya tambahkan file .CSS nya disini saya beri nama style.css, pada file view kita tambahkan link untuk menghubungkan file style.css tadi. 

.pagination {
margin-left:-35px;
}

.pagination ul {
display: inline-block;
margin-bottom: 0;
margin-left: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.05);
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.pagination ul>li {
display: inline;
}

.pagination ul>li:first-child>a, .pagination ul>li:first-child>span {
border-left-width: 1px;
-webkit-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
-webkit-border-top-left-radius: 4px;
border-top-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-topleft: 4px;
}
.pagination ul>li>a, .pagination ul>li>span {
float: left;
padding: 4px 12px;
line-height: 20px;
text-decoration: none;
background-color: #efefef;
border: 1px solid #ddd;
border-left-width: 0;
}
.pagination ul>li>a:hover {
background-color: #ccc;
}
.pagination ul>li>a:active {
background: #ff0000;
}
.disabled {
font-weight:bold;
background;#000;
}

Untuk mendownload file-file diatas silahkan menuju TKP berikut ini.

Terima Kasih.