Friday 27 October 2017
» » » Cara Membuat Pagination Di Codeigniter
0 komentar

Cara Membuat Pagination Di Codeigniter

00:34

Tujuan utama dalam membangun sebuah Website adalah menyajikan Informasi dan Mengolah data. agar dapat diakses oleh banyak pengguna/user. Sudah menjadi tugas penting bagi seorang developer untuk menyajikan data yang banyak kepada user dengan kinerja yang sangat ringan agar data bisa cepat dan mudah di load pada komputer pengguna. Oleh karena itu pagination menjadi solusi bagi developer websitte untuk menyajikan data yang banyak tanpa membebani kinerja komputer.

kali ini saya akan membuat tutorial bagaimana cara mudah membuat pagination di framework codeigniter dengan CSS Bootstrap. Dengan harapan agar pembaca yang baru saja belajar Codeigniiter bisa meimplementasikan nya pada project yang akan dibuat.

Codeigniter adalah framework PHP yang sangat terkenal karena Library yang besar dan mudah digunakan. Pagination Codeigniter memiliki salah satu library yang sangat membantu jika kita harus menunjukkan sejumlah data yang besar kepada pengguna. Library pagination Codeigniter memecah data menjadi kumpulan tautan bernomor yang memungkinkan kita menavigasi dari satu halaman ke halaman lainnya.

Setting Database

Disini kita menggunakan database sederhana untuk contoh, tujuannya sehingga kita bisa melihat bagaimana pagination bekerja. Salin query SQL di bawah ini dan jalankan untuk membuat database user sederhana.
1
CREATE TABLE `users` (  `user_id` int(11) NOT NULL AUTO_INCREMENT,  `user_name` varchar(256) NOT NULL,  `user_email` varchar(256) NOT NULL,  `create_date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,PRIMARY KEY (`user_id`)) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Kemudian mari kita masukkan beberapa data dummy ke dalam tabel ini. Jalankan query di bawah ini untuk memasukkan data ke dalam tabel ini.

1
INSERT INTO `users` (`user_id`, `user_name`, `user_email`, `create_date`) VALUES(1, 'John', 'john@gmail.com', '2017-07-20 16:22:27'),(2, 'Doe', 'doe@gmail.com', '2017-07-20 16:22:27'),(3, 'Sam', 'sam@gmail.com', '2017-07-20 16:25:35'),(4, 'Sara', 'sara@gmail.com', '2017-07-20 16:25:35'),(5, 'Sam', 'sam@gmail.com', '2017-07-20 16:25:35'),(6, 'Sara', 'sara@gmail.com', '2017-07-20 16:25:35'),(7, 'Adam', 'adam@gmail.com', '2017-07-20 16:25:35'),(8, 'Smith', 'smith@gmail.com', '2017-07-20 16:25:35'),(9, 'Ram', 'ram@gmail.com', '2017-07-20 16:25:35'),(10, 'Mohan', 'mohan@gmail.com', '2017-07-20 16:25:35'),(11, 'John', 'john@gmail.com', '2017-07-20 16:25:35'),(12, 'Ahmad', 'ahmad@gmail.com', '2017-07-20 16:25:35'),(13, 'Jorge', 'jorge@gmail.com', '2017-07-20 16:25:35'),(14, 'Ke', 'Ke@gmail.com', '2017-07-20 16:25:35'),(15, 'Xui', 'xui@gmail.com', '2017-07-20 16:25:35');

Frontend Untuk Mengintegrasikan Bootstrap dengan Pagination CodeIgniter

Buat file view di folder view CodeIgniter untuk mengintegrasikan bootstrap. Di sini kita menggunakan bootstrap untuk membuat link yang dihasilkan dari library pagination CodeIgniter.

1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="en">
    <head> 
        <title>Pagination Demo | CodesQuery</title> 
        <meta charset="utf-8"> 
        <meta http-equiv="X-UA-Compatible" content="IE=edge">    
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <!--bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-
        BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    </head>
    <body>
        <div class="wrapper"> 
            <div class="container" style="margin: 100px;"> 
                <div class="row"> 
                    <div class="pagination_demo text-center"> 
                        <h4>Pagination Demo | CodesQuery</h4> 
                        <hr> 
                        <table class="table table-bordered table-hover table-responsive paginated"> 
                            <thead> 
                                <tr> 
                                    <th class="text-center"> S.No. </th> 
                                    <th class="text-center"> Name  </th> 
                                    <th class="text-center"> Email </th> 
                                </tr> 
                            </thead> 
                            <tbody> 
                                <?php $sn= 1; foreach($users as $value) { ?> 
                                     <tr> 
                                         <td> <?php echo $sn;                  ?></td> 
                                         <td> <?php echo $value['user_name'];  ?></td> 
                                         <td> <?php echo $value['user_email']; ?></td> 
                                     </tr> 
                                 <?php $sn++; }  ?> 
                             </tbody> 
                         </table> 
                         <div class="pagination_links"> 
                             <?php echo $links; ?> </div> 
                         </div> 
                     </div> 
                 </div> 
             </div>
         </div>
         <!-- Latest compiled and minified JavaScript -->
         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-
         Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">
         </script>
      </body>
</html>



controller

Buat file controller dan load library pagination di constructor dan tuliskan sebuah method indeks dimana kita akan menulis semua kode kita untuk pagination CodeIgniter menggunakan framework bootstrap. Saya akan merekomendasikan agar tidak menyalin kode dan hanya menempelkannya ke controller. Cobalah untuk memahaminya terlebih dahulu dan kemudian menuliskannya sendiri.

1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<?phpdefined('BASEPATH') OR exit('No direct script access allowed');
class Pagination extends CI_Controller {
    function __Construct(){ 
        parent::__Construct(); 
        $this->load->database();
        //load helper 
        $this->load->helper('url');
        //load model 
        $this->load->model('user_model');
        //load library 
        $this->load->library('pagination');    
    }
    
    public function index(){
        $config['base_url'] = base_url().'pagination/index';        
        $config['total_rows'] = $this->user_model->count_all_users();        
        $config['per_page'] = 5;        
        $config['uri_segment'] = 3;        
        $config['full_tag_open'] = '<ul class="pagination">';        
        $config['full_tag_close'] = '</ul>';        
        $config['first_link'] = 'First';        
        $config['last_link'] = 'Last';        
        $config['first_tag_open'] = '<li>';        
        $config['first_tag_close'] = '</li>';        
        $config['prev_link'] = '&laquo';        
        $config['prev_tag_open'] = '<li class="prev">';        
        $config['prev_tag_close'] = '</li>';        
        $config['next_link'] = '&raquo';        
        $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>';
        
        $page = ($this->uri->segment(3)) ? $this->uri->segment(3) : 0;
        $this->pagination->initialize($config);        
        $data['links'] = $this->pagination->create_links();        
        $data['users'] = $this->user_model->get_users($config["per_page"], $page);        
        $this->load->view('pagination_demo',$data);    
    }
}

Disini kita menggunakan $config array untuk memberi tahu CodeIgniter tentang perilaku library pagination. Di sini kita menggunakan kelas pagination bootstrap untuk menunjukkan link dalam format pagination bootstrap dan kelas aktif untuk memberi tahu pengguna apa link yang sedang aktif. Selain itu, saya menggunakan model user_model untuk mengambil data dari database dan formulasi CodeIgniter pagination create_links untuk membuat link data. Berikut adalah arti beberapa istilah yang saya gunakan di atas:
  • per_page: Ini digunakan untuk memberi tahu CodeIgniter berapa jumlah entri yang akan ditampilkan pada setiap halaman.
  • base_url: Ini digunakan untuk memberi tahu basis URL paginasi ke pustaka pagination CodeIgniter.
  • total_rows: Jumlah total entri dalam database kami.

Model

Buat file model untuk mengambil data dari database. Jika Anda terbiasa dengan framework CodeIgniter, kode di bawah ini sangat mudah dimengerti.

1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<?phpdefined('BASEPATH') OR exit('No direct script access allowed');
class User_model extends CI_Model{ 
    
    private function _get_users_data(){ 
        $this->db->select('*'); 
        $this->db->from('users'); 
    }
    
    public function get_users($limit, $start){ 
        $this->_get_users_data(); 
        $this->db->limit($limit, $start); 
        $query = $this->db->get(); 
        return $query->result_array(); 
    }
    
    public function count_all_users(){ 
        $this->_get_users_data(); 
        $query = $this->db->count_all_results(); 
        return $query; 
    }
}

Kesimpulan

Sekarang Anda tahu bagaimana menggunakan konfigurasi pagination CodeIgniter menggunakan  bootstrap. Anda bisa mempelajari opsi konfigurasi lainnya dari dokumentasi resmi CodeIgniter. Selalu praktik yang baik untuk pertama-tama memeriksa dokumentasi resmi tentang apa pun yang akan Anda jalani.

Semoga Anda menyukai tutorial ini jika Anda memiliki pertanyaan, saran silahkan komentar di bawah ini.





    Share This To :

    0 komentar :

    Post a Comment

    Subscribe to: Post Comments ( Atom )
     
    Toggle Footer
    Top