Kategori Random

Membuat Paging dan Search Bootstrap CodeIgniter

Posted : 11 Oktober 2016 | 16:26:41 , Dibaca 5798 kali

Melanjutkan tutorial Membuat CRUD CodeIgniter dengan Tampilan Bootstrap II kali ini saya akan membagikan tutorial untuk membuat paging dan searching pada CRUD yang telah kita buat.

Oke saya anggap untuk proses awal nya sudah harus dilakukan dan ini merupakan tutorial lanjutan. Saya harapkan tahap demi tahap diperhatikan agar penyisipan skripnya berjalan dengan baik :

1. Controller

buka controller barang.php pada folder aplication/controllers dan pada bagian __contruct tambahkan untuk meload library paging bawaan codeigniter seperti berikut :

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

selanjutnya pada baris public function index() ubah skrip sebelumnya menjadi seperti dibawah ini :

public function index()
	{
	    $page=$this->input->get('per_page');
	    $batas=5; //jlh data yang ditampilkan per halaman
        if(!$page):     //jika page bernilai kosong maka batas akhirna akan di set 0
           $offset = 0;
        else:
           $offset = $page; // jika tidak kosong maka nilai batas akhir nya akan diset nilai page terakhir
        endif;

        $config['page_query_string'] = TRUE; //mengaktifkan pengambilan method get pada url default
        $config['base_url'] = base_url().'barang?';   //url yang muncul ketika tombol pada paging diklik
        $config['total_rows'] = $this->mbarang->count_barang(); // jlh total barang
        $config['per_page'] = $batas; //batas sesuai dengan variabel batas

        $config['uri_segment'] = $page; //merupakan posisi pagination dalam url pada kesempatan ini saya menggunakan method get untuk menentukan posisi pada url yaitu per_page

        $config['full_tag_open'] = '<ul class="pagination">';
        $config['full_tag_close'] = '</ul>';
        $config['first_link'] = '&laquo; First';
        $config['first_tag_open'] = '<li class="prev page">';
        $config['first_tag_close'] = '</li>';

        $config['last_link'] = 'Last &raquo;';
        $config['last_tag_open'] = '<li class="next page">';
        $config['last_tag_close'] = '</li>';

        $config['next_link'] = 'Next &rarr;';
        $config['next_tag_open'] = '<li class="next page">';
        $config['next_tag_close'] = '</li>';

        $config['prev_link'] = '&larr; Prev';
        $config['prev_tag_open'] = '<li class="prev page">';
        $config['prev_tag_close'] = '</li>';

        $config['cur_tag_open'] = '<li class="current"><a href="">';
        $config['cur_tag_close'] = '</a></li>';

        $config['num_tag_open'] = '<li class="page">';
        $config['num_tag_close'] = '</li>';
        $this->pagination->initialize($config);
        $data['paging']=$this->pagination->create_links();
        $data['jlhpage']=$page;

	    $data['title'] = 'CRUD CodeIgniter Studi Kasus Barang'; //judul title
	    $data['qbarang'] = $this->mbarang->get_allbarang($batas,$offset); //query model semua barang

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

}

Penjelasan

  1. pada config paging style boostrap untuk menangani paging sudah saya sisipkan pada skrip diatas agar tampilan tombol menjadi lebih cantik.
  2. pada baris $config['total_rows'] total diambil memalui query yang ditambahkan pada model
  3. pada baris $data['qbarang'] get_allbarang berisi variabel $batas dan $offset untuk membatasi jumlah per halaman yang ditangani melalui query di model

 

Masih pada controller barang.php selanjutnya tambahkan sebuah function cari() untuk menangani pencarian nantinya dan buat seperti dibawah ini :

public function cari()
	{
        $key= $this->input->get('key'); //method get key
        $page=$this->input->get('per_page');  //method get per_page

        $search=array(
            'nama_brg'=> $key,
            'barcode'=> $key
        ); //array pencarian yang akan dibawa ke model

        $batas=5; //jlh data yang ditampilkan per halaman
        if(!$page):     //jika page bernilai kosong maka batas akhirna akan di set 0
           $offset = 0;
        else:
           $offset = $page; // jika tidak kosong maka nilai batas akhir nya akan diset nilai page terakhir
        endif;

        $config['page_query_string'] = TRUE; //mengaktifkan pengambilan method get pada url default
        $config['base_url'] = base_url().'barang/?key='.$key;   //url yang muncul ketika tombol pada paging diklik
        $config['total_rows'] = $this->mbarang->count_barang_search($search); // jlh total barang
        $config['per_page'] = $batas; //batas sesuai dengan variabel batas

        $config['uri_segment'] = $page; //merupakan posisi pagination dalam url pada kesempatan ini saya menggunakan method get untuk menentukan posisi pada url yaitu per_page

        $config['full_tag_open'] = '<ul class="pagination">';
        $config['full_tag_close'] = '</ul>';
        $config['first_link'] = '&laquo; First';
        $config['first_tag_open'] = '<li class="prev page">';
        $config['first_tag_close'] = '</li>';

        $config['last_link'] = 'Last &raquo;';
        $config['last_tag_open'] = '<li class="next page">';
        $config['last_tag_close'] = '</li>';

        $config['next_link'] = 'Next &rarr;';
        $config['next_tag_open'] = '<li class="next page">';
        $config['next_tag_close'] = '</li>';

        $config['prev_link'] = '&larr; Prev';
        $config['prev_tag_open'] = '<li class="prev page">';
        $config['prev_tag_close'] = '</li>';

        $config['cur_tag_open'] = '<li class="current"><a href="">';
        $config['cur_tag_close'] = '</a></li>';

        $config['num_tag_open'] = '<li class="page">';
        $config['num_tag_close'] = '</li>';
        $this->pagination->initialize($config);
        $data['paging']=$this->pagination->create_links();
        $data['jlhpage']=$page;

	    $data['title'] = 'CRUD CodeIgniter Studi Pencarian Kasus Barang'; //judul title
	    $data['qbarang'] = $this->mbarang->get_allbarang($batas,$offset,$search); //query model semua barang

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

	}

 

2. Model

Buka model mbarang.php pada folder aplication/models dan pada function get_allbarang() ubah skrip seperti dibawah ini :

function get_allbarang($batas =null,$offset=null,$key=null) {
    $this->db->from($this->tabel);
    if($batas != null){
       $this->db->limit($batas,$offset);
    }
    if ($key != null) {
       $this->db->or_like($key);
    }
    $query = $this->db->get();

    //cek apakah ada barang
    if ($query->num_rows() > 0) {
        return $query->result();
    }
}

kemudian tambahkan sebuah function untuk menangani jumlah total field barang seperti dibawah ini :

function count_barang(){
    $query = $this->db->get($this->tabel)->num_rows();
    return $query;
}

selanjutnya sebuah function untuk menangani jumlah total pencarian

function  count_barang_search($orlike) {
    $this->db->or_like($orlike);
    $query = $this->db->get($this->tabel);

    return $query->num_rows();
}

3. Views

selanjutnya kita beralih ke tampilanya buka file vbarang.php pada folder application/views dan buat seperti dibawah ini :

<? $this->load->view('header');?>
    <div class="container">
      <!-- main container -->
      <div class="panel panel-default">
  <div class="panel-heading"><b>Daftar Barang</b></div>
  <div class="panel-body">
    <p><?=$this->session->flashdata('pesan')?> </p>
    <div class="col-md-12">
     <div class="col-md-5">
     <a href="<?=base_url()?>barang/form/add" class="btn btn-sm btn-primary"><i class="glyphicon glyphicon-plus"></i> Tambah</a>

     </div>
     <div class="col-md-5 pull-right">
     <form action="<?=base_url()?>barang/cari" method="get">
     <div class="input-group">

      <input type="text" name="key" class="form-control">
      <span class="input-group-btn">
        <button class="btn btn-default" type="submit">cari</button>
      </span>
    </div><!-- /input-group -->

      </form>
     </div>

</div>
       <table class="table table-striped">
        <thead>
         <tr>
         <th>No</th>
         <th>Barcode</th>
         <th>Nama</th>
         <th>Harga</th>
         <th>Jenis</th>
         <th>Satuan</th>
         <th>Stok</th>
         <th></th>
         </tr>
        </thead>
        <tbody>
        <? if(empty($qbarang)){ ?>
         <tr>
          <td colspan="6">Data tidak ditemukan</td>
         </tr>
        <? }else{

        if(!$jlhpage){         //ini untuk menangani penomoran agar otomatis menyesuaikan dengan paging
          $no=0;
          }else{$no=$jlhpage;}

          foreach($qbarang as $rowbarang){ $no++;?>
         <tr>
          <td><?=$no?></td>
          <td><?=$rowbarang->barcode?></td>
          <td><?=$rowbarang->nama_brg?></td>
          <td><?=$rowbarang->harga_brg?></td>
          <td><?=$rowbarang->jenis?></td>
          <td><?=$rowbarang->satuan?></td>
          <td><?=$rowbarang->stok_brg?></td>
          <td>
           <a href="<?=base_url()?>barang/form/edit/<?=$rowbarang->kode_brg?>" class="btn btn-info btn-sm"><i class="glyphicon glyphicon-pencil"></i></a>
           <a href="<?=base_url()?>barang/detail/<?=$rowbarang->kode_brg?>" class="btn btn-warning btn-sm"><i class="glyphicon glyphicon-search"></i></a>
           <a href="<?=base_url()?>barang/hapus/<?=$rowbarang->kode_brg?>" class="btn btn-danger btn-sm" onclick="return confirm('Anda Yakin menghapus data ini?')"><i class="glyphicon glyphicon-trash"></i></a>
          </td>
         </tr>
        <? }}?>
        </tbody>
       </table>
        </div> <!-- /panel-body-->
        <div class="panel-footer">
          <?=$paging?>
        </div>  <!-- /panel-footer-->
    </div>    <!-- /panel -->
    </div> <!-- /container -->
<? $this->load->view('footer');?>

pada skrip vbarang.php saya tambahkan sebuah form untuk pencarian dan pada bagian panel-footer saya tambahkan variabel untuk paging nya.

pada hasil akhirnya akan tampil seperti berikut

 

 

Paging halaman 2

 

Pencarian dengan key mouse

Demikian tutorial kali ini semoga bermanfaat.

 

Postingan Terkait
» Cetak Laporan Format Excel di Codeigniter ( 25 Jan 2017 | 06:39:12 , 176 hits )
» Membuat Laporan PDF dengan DomPDF di CodeIgniter ( 04 Nov 2016 | 07:42:55 , 223 hits )
» Edit dan Hapus Foto Upload Codeigniter ( 31 Okt 2016 | 08:25:06 , 2638 hits )
» Menambah Web File Menager pada CKEditor di CodeIgniter ( 15 Sep 2016 | 09:10:43 , 1676 hits )
» WYSIWYG editor menggunakan CKEditor di CodeIgniter ( 15 Sep 2016 | 03:07:03 , 1888 hits )