Cara membuat paging dengan Codeigniter Dan Bootstrap

Cara membuat paging dengan Codeigniter dan Bootstrap akan kami bahas pada tutorial kali ini. Sebelum kita melangkah lebih jauh kita simak terlebih dahulu, alasan kita membuat paging atau pagination di website. 

Tutorial cara membuat paging dengan Codeigniter dan Bootstrap bisa anda download disini.

Alasan membuat pagination atau paging

Ada beberapa alasan mengapa kita membuat paging didalam website kita, berikut ini beberapa alasan mengapa kita membuat page.

1. Menampilkan data yang banyak dibagi menjadi beberapa bagian.
   
2. Agar proses load suatu halaman website menjadi jauh lebih ringan pada saat diakses
   
3. Tidak men-scroll terlalu jauh.
   
4. Menghemat tampilan layar .
   
5. Tentu saja bisa membuat tampil website menjadi lebih menarik.
   

Disini saya tidak akan menjelaskan bagaimana cara instalasi Bootstrap di codeigniter dan tidak juga menjelaskan bagaimana cara membuat pagination Bootstrap. Karena sudah saya jelaskan di tutorial sebelumnya. Jika ingin lebih jelas,  

silahkan baca : Cara membuat pagination Bootstrap.

Cara membuat pagination di framework Codeigniter

Dalam membuat Pagination atau paging, ada 3 folder di framework Codeigniter yang akan kita pergunakan, yaitu :

1. Controllers
2. Models
3. Views

Simak apa saja yang akan kita lakukan di folder tersebut.

Membuat database

Terlebih dahulu kita buat database yang bernama tutorial.

-- phpMyAdmin SQL Dump
-- version 4.1.6
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: Feb 01, 2017 at 07:29 AM
-- Server version: 5.6.16
-- PHP Version: 5.5.9
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;
--
-- Database: `tutorial`
--
-- --------------------------------------------------------
--
-- Table structure for table `users`
--
CREATE TABLE IF NOT EXISTS `users` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(150) NOT NULL,
`password` varchar(256) NOT NULL,
`status` tinyint(1) NOT NULL COMMENT '0=super admin, 1=admin',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;
--
-- Dumping data for table `users`
--
INSERT INTO `users` (`id`, `username`, `password`, `status`) VALUES
(1, 'bastian', 'bastianabas', 0);
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Tambahkan beberapa data di tabel users.

Folder controllers

Di folder controllers kita membuat file yang extension php dan kita beri nama Page, berikut ini kode yang kita tulis.

function __construct(){
parent::__construct();
$this->load->library('session');
$this->load->database(); // load database
$this->load->library('table');
$this->load->library('pagination');
$this->load->helper('url');
$this->load->model('Curd');
}

function index()
{
$data['title'] = "Page View"; //title web
$query = $this->db->query("select * from users ;");
$config['base_url'] = site_url('page/data/');
$config['total_rows'] = $query->num_rows();
//pagination settings
$config['per_page'] = "1";
$config["uri_segment"] =3;
$choice = $config["total_rows"]/$config["per_page"];
$config["num_links"] = floor($choice);
// integrate bootstrap pagination
$config['full_tag_open'] = '<ul class="pagination pagination-sm no-margin pull-right">';
$config['full_tag_close'] = '</ul>';
$config['first_link'] = false;
$config['last_link'] = false;
$config['first_tag_open'] = '<li>';
$config['first_tag_close'] = '</li>';
$config['prev_link'] = '«';
$config['prev_tag_open'] = '<li class="prev">';
$config['prev_tag_close'] = '</li>';
$config['next_link'] = '»';
$config['next_tag_open'] = '<li>';
$config['next_tag_close'] = '</li>';
$config['last_tag_open'] = '<li>';
$config['last_tag_close'] = '</li>';
$config['cur_tag_open'] = '<li class="active"><a href="#">';
$config['cur_tag_close'] = '</a></li>';
$config['num_tag_open'] = '<li>';
$config['num_tag_close'] = '</li>';
$this->pagination->initialize($config);
$data['page'] = ($this->uri->segment(3)) ? $this->uri->segment(3) : 0;
// get stock list
$data['tampil'] = $this->Curd->dataUSer($config["per_page"], $data['page'], NULL);
$data['halaman'] = $this->pagination->create_links();
$this->load->view('vPage',$data);
}

function data()
{
$data['title'] = "Page View"; //title web
$query = $this->db->query("select * from users ;");
$config['base_url'] = site_url('page/data');
$config['total_rows'] = $query->num_rows();
//pagination settings
$config['per_page'] = "2"; //jumlah yang d tampilkan
$config["uri_segment"] =3;
$choice = $config["total_rows"]/$config["per_page"];
$config["num_links"] = floor($choice);
// integrate bootstrap pagination
$config['full_tag_open'] = '<ul class="pagination pagination-sm no-margin pull-right">';
$config['full_tag_close'] = '</ul>';
$config['first_link'] = false;
$config['last_link'] = false;
$config['first_tag_open'] = '<li>';
$config['first_tag_close'] = '</li>';
$config['prev_link'] = '«';
$config['prev_tag_open'] = '<li class="prev">';
$config['prev_tag_close'] = '</li>';
$config['next_link'] = '»';
$config['next_tag_open'] = '<li>';
$config['next_tag_close'] = '</li>';
$config['last_tag_open'] = '<li>';
$config['last_tag_close'] = '</li>';
$config['cur_tag_open'] = '<li class="active"><a href="#">';
$config['cur_tag_close'] = '</a></li>';
$config['num_tag_open'] = '<li>';
$config['num_tag_close'] = '</li>';
$this->pagination->initialize($config);
$data['page'] = ($this->uri->segment(3)) ? $this->uri->segment(3) : 0;
// get stock list
$data['tampil'] = $this->Curd->dataUSer($config["per_page"], $data['page'], NULL);
$data['halaman'] = $this->pagination->create_links();
$this->load->view('vPage',$data);
}
}

Folder views

Di folder views kita membuat file yang extension php dan kita beri nama Cpage, berikut ini kode yang kita tulis.

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

?>

<!DOCTYPE html>

<html>

<head>

<title><?php echo $title; ?></title>

<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

<link rel="stylesheet" href="<?php echo base_url(); ?>asset/bootstrap/css/bootstrap.min.css">

<link rel="stylesheet" href="<?php echo base_url(); ?>asset/font-awesome/css/font-awesome.min.css">

</head>

<body>

<br/>

<br/>

<br/>

<div class="container">

<div class="row">

<div class="col-sm12 col-md-12">

<div class="panel panel-primary">

<div class="panel-heading">

Cara membuat paging dengan Codeigniter Dan Bootstrap

</div>

<div class="panel-body">

<div class="table-responsive">

<?php

$pg = $this->uri->segment(3);

//mensetting caption tabel

$this->table->set_caption('<h1>Data User</h1>');

//mensetting header tabel

$this->table->set_heading(array('#','User Name','Password', 'Status'));

//mensetting tampilan tabel

$tmp=array(

'table_open'=>'<table class="table table-bordered">',

'heading_row_start'=>'<tr class="success">'

);

//menampilkan data

$i=1;

foreach($tampil as $tmpl)

{

$no = $i + $pg;

if($tmpl->status == "0")

{

$status = "Super Admin";

}

else if($tmpl->status == "1")

{

$status = "Member";

}

$this->table->add_row($no,$tmpl->username,$tmpl->password,$status);

$i++;

}

$this->table->function = 'htmlspecialchars';

$this->table->set_template($tmp);

//untuk meng-generate tabel

echo $this->table->generate();

?>

</div>

<div class="box-footer">

<?php echo $halaman;?>

</div>

</div>

</div>

</div>

</div>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="<?php echo base_url(); ?>asset/bootstrap/js/bootstrap.min.js"></script>

</body>

</html>

Folder Models

Di folder models kita membuat file yang extension php dan kita beri nama Curd, berikut ini kode yang kita tulis.

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

class Curd extends CI_Model {

function dataUSer($limit, $start, $st = NULL)

{

if ($st == "NIL") $st = "";

$sql = "select * from users order by id ASC limit " . $start . ", " . $limit;

$query = $this->db->query($sql);

return $query->result();

//echo $this->db->last_query($query);

}

}

Tutorial cara membuat paging dengan Codeigniter dan Bootstrap bisa anda download disini.