TUTORIAL CODEIGNITER Langkah Tepat menjadi Web Developer Handal, menguasai CodeIgniter, jalan membuat aplikasi berbasis website lebih mudah www.ilmuwebsite.com

Bagian 7. Membuat Data Pagination Menggunakan CodeIgniter

1

Bagian 7. Membuat Data Pagination Menggunakan CodeIgniter Baiklah dibagian ini kita akan mempelajari tutorial igniter tentang pagination di codeigniter 2.1.3. Pagination membuat tampilan kita lebih simpel dan atraktif. Ok langsung saja.

1. Membuat Database Database ini akan kita tampilkan dalam view kita nanti. Nama databasenya ciseries dan nama tabelnya adalah data. Yang belum tahu cara buatnya silakan kopikan kode ini di sql phpmyadmin. create database ci_series; use ci_series; create table data( id int(11) primary key auto_increment not null, title varchar(50) not null, content text not null ); Kemudian lakukan insert data di phpmyadmin, sampai 20 kali atau lebih.

2. Konfigurasi Codeigniter Seperti biasa, selanjutnya adalah melakukan konfirgurasi codeigniter,

2

buka file codeigniterlabz7\application\config\autoload.php dan load otomatis library database, helper form dan url , serta model membership_model dengan merubah.

$autoload['libraries'] = array('database'); $autoload['helper'] = array('url');

Kemudian silahkan buka codeigniterlabz7\application\config\config.php , silahkan rubah menjadi

$config['base_url'] = 'http://localhost/codeigniterlabz7/';

Dan silahkan buka file codeigniterlabz7\application\config\database.php dan rubah pengaturan database : $db['default']['hostname'] = 'localhost'; $db['default']['username'] = 'root'; $db['default']['password'] = 'root'; $db['default']['database'] = 'ciseries'; $db['default']['dbdriver'] = 'mysql';

Terakhir adalah merubah routes dari default_controller, tadinya adalah welcome kemudian kita rubah menjadi site, silahkan buka codeigniterlabz7\application\config\routes.php , silahkan rubah menjadi $route['default_controller'] = "site";

3

3. Membuat Controller Kita akan membuat controller yang didalamnya terdapat settingan pagination, mulai dari berapa banyak yang akan tampil, berapa banyak link pagingnya, dan lainlain sebagainya, letakkan kodenya di codeigniterlabz7\application\controller\site.php load->library('pagination'); $this->load->library('table'); //$this->table->set_heading('Id', 'The Title', 'The Content'); $config['base_url'] = site_url('site/index'); $config['total_rows'] = $this->db->get('data')->num_rows(); $config['per_page'] = 7; $config['num_links'] = 2; $config['uri_segment'] = 3; //3 merupakan posisi pagination dalam url $config['full_tag_open'] = ''; $this->pagination->initialize($config); $data['records'] >segment(3));

=

$this->db->get('data',

$config['per_page'],

$this->uri-

$this->load->view('site_view', $data); } }

Note : Sedikit penjelasan dari controller site.php diatas :

4



$config['base_url'] adalah url dasar tempat baris kita berada.



$config['total_rows'] adalah jumlah baris yang akan ditampilkan, diatas di isi dengan jumlah baris yang ada di tabel data.



$config['per_page'] adalah jumlah baris yang di tampilkan dalam satu halaman.



$config['uri_segment'] adalah posisi pagination dalam url.



$config['num_links'] adalah jumlah samping kanan dan kiri link paginasi Anda.



$config['full_tag-open'] adalah tag pembuka dari paginasi Anda.

4. Membuat View Kita akan membuat view yang bisa menampilkan paging, letakkan kodenya di codeigniterlabz7\application\view\site_view.php <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css" media="screen"> #container { width: 600px; margin: auto; font-family: helvetica, arial; } table { width: 600px; margin-bottom: 10px; } td { border-right: 1px solid #aaaaaa; padding: 1em; } td:last-child { border-right: none;

5

} th { text-align: left; padding-left: 1em; background: #cac9c9; border-bottom: 1px solid white; border-right: 1px solid #aaaaaa; } #pagination a, #pagination strong { background: #e3e3e3; padding: 4px 7px; text-decoration: none; border: 1px solid #cac9c9; color: #292929; font-size: 13px; } #pagination strong, #pagination a:hover { font-weight: normal; background: #cac9c9; } <script src="/js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8"> $('tr:odd').css('background', '#e3e3e3'); Silahkan langsung buka di alamat http://localhost/codeigniterlabz7/index.php/site

6