Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

Sistem Informasi Penjualan dengan Codeigniter 4 Part #5 – Filtering dan Custom Pagination

7 min read

sistem informasi penjualan codeigniter 4 - pagination dan filtering

Ini merupakan part ke 5 dari tutorial cara membuat aplikasi Sistem Informasi Penjualan dengan Codeigniter 4 – Filtering dan Custom Pagination.

Pada part ini Anda akan belajar manajement filtering dan custom pagination.

Sebelumnya Ilmu Coding sudah membahas menajement CRUD product, form helper dan upload data di part ke 4. Jika Anda belum membacanya, alangkah baiknya untuk membaca part ke 4 terlebih dahulu.

Sebelum memulai membuat sistem informasi penjualan dengan Codeigniter 4 membahas filtering dan custom pagination part ke 5 ini, jangan lupa segelas kopi dan cemilan untuk menemanimu ngoding.

Let’s go!

Sekilas Tentang Pagination

Ada banyak pilihan soal pagination.

Salah satunya adalah datatables.

Datatables bisa ditingkatkan menjadi datatable server side.

Namun saya tidak menggunakan itu. Alasannya untuk menghemat query.

Meskipun di datatable bisa dipecah / paginate menjadi beberapa bagian, tetap saja pada umumnya ia menampilkan semua data. Query merender all data. Si datatable cuma berfungsi untuk membagi tampilan.

Hal ini kurang baik jika data sudah mencapai jutaan. Query akan loading terlalu lama. Server akan terganggu.

Saya akui, programmer pasti punya trik untuk mengatasi hal itu. Banyak pilihan dan trik untuk mengatasinya. Bahkan, pendapat saya boleh jadi salah.

Namun saya lebih memilih menggunakan pagination saja agar data yang ditampilkan tidak terlalu banyak dan bisa dibatasi. Kalau punya trik lain, silahkan menyesuaikan saja.

Anda juga bisa membaca dokumentasinya di sini.

Terus untuk filternya gimana?

Tenang, di part ke 5 ini saya akan membahas filtering pada manajement product.

Let’s go!

Menggunakan Custom Pagination

Alhamdulillah, menajement product sudah terbuat.

Sekarang saatnyalah untuk menambahkan pagination di halaman index product.

Silahkan ikuti steb by step berikut ini:

Step #1 – Modifikasi Function Index di Controller Product

Silahkan modifikasi function index() pada controller Product.

Berikut kodenya:

public function index()
{
    // paginate
    $paginate = 5;
    $data['products']   = $this->product_model->join('categories', 'categories.category_id = products.category_id')->paginate($paginate, 'product');
    $data['pager']      = $this->product_model->pager;

    echo view('product/index', $data);
}

Penjelasan:

Pada variable $paginate, Anda bebas menentukan berapa jumlah per halaman.

Kemudian pada kode paginate($paginate, 'product'); terdapat kata “product”.

Apa maksudnya?

Maksudnya adalah untuk membuat pagination group yang berguna saat menampilkannya di halaman view.

Sedangkan by default, Anda sudah bisa menggunakan pagination walau hanya menerapkan kode ini:

 paginate(10)

Sedangkan menggunakan group akan lebih mudah untuk mengatur tampilannya. Apalagi menggunakan bootstrap.

Step #2 – Buat Template Bootstrap Pagination

Pada dasarnya Anda bisa membuat custom pagination di codeigniter 4.

Di dokumentasi template pagination codeigniter 4, ada template pagination yang disediakan. Hanya saja menurut saya itu terlalu standart.

Pada akhirnya saya memodifikasi sendiri menggunakan tampilan bootstrap.

Adapun langkah-langkahnya sebagai berikut:

Silahkan buat folder baru di app/Views/Pager.

Kemudian buat file baru bernama bootstrap_pagination.php.

Lalu ketik kode berikut:

<?php
$pager->setSurroundCount(2);
?>
<nav aria-label="<?= lang('Pager.pageNavigation') ?>">
	<ul class="pagination">
		<?php if ($pager->hasPrevious()) : ?>
			<li class="page-item">
				<a href="<?= $pager->getPrevious() ?>" class="page-link" aria-label="<?= lang('Pager.previous') ?>">
					<span>«</span>
				</a>
			</li>
		<?php endif ?>

		<?php foreach ($pager->links() as $link) : ?>
			<li <?= $link['active'] ? 'class="active page-item"' : 'class="page-item"' ?>>
				<a href="<?= $link['uri'] ?>" class="page-link">
					<?= $link['title'] ?>
				</a>
			</li>
		<?php endforeach ?>

		<?php if ($pager->hasNext()) : ?>
			<li class="page-item">
				<a href="<?= $pager->getNext() ?>" aria-label="<?= lang('Pager.next') ?>" class="page-link">
					<span aria-hidden="true">»</span>
				</a>
			</li>
			<li class="page-item">
				<a href="<?= $pager->getLast() ?>" aria-label="<?= lang('Pager.last') ?>" class="page-link">
					<span aria-hidden="true">Last</span>
				</a>
			</li>
		<?php endif ?>
	</ul>
</nav>

Simpan.

Step #3 – Daftarkan / Register Template Pagination

Silahkan buka file app/Config/Pager.php.

Modifikasi filenya dengan menambahkan baris kode yang saya cetak tebal.

Berikut kodenya:

 public $templates = [
    'default_full'   => 'CodeIgniter\Pager\Views\default_full',
    'default_simple' => 'CodeIgniter\Pager\Views\default_simple',
    'default_head'   => 'CodeIgniter\Pager\Views\default_head',
    'bootstrap_pagination'   => 'App\Views\Pager\bootstrap_pagination',
]; 

Simpan.

Step #4 – Tampilkan Pagination di Halaman View Index Product

Langkah berikutnya adalah menampilkan pagination di halaman view index.php.

Silahkan buka file app/Views/product/index.php.

Tambahkan kode berikut:

<div class="row mt-3 float-right">
    <div class="col-md-12">
        <?php echo $pager->links('product', 'bootstrap_pagination') ?> 
    </div>
</div>

Biar Anda nggak bingung letak kodenya di mana, perhatikan gambar di bawah ini:

sistem informasi penjualan codeigniter 4 filtering pagination - 3

Kira-kira setelah tag penutup </table>, terus tutup </div>, baru deh kodenya letakan di bawahnya.

Step #5 – Testing Pagination

Jika berjalan dengan baik, berikut tampilannya:

sistem informasi penjualan codeigniter 4 filtering pagination - 2

Membuat Custom Filtering

Untuk membuat fitur custom filtering, saya menggunakan 5 langkah.

Step #1 – Modifikasi Function Index di Product Controller

Saya menambahkan script di bawah ini pada function index() untuk menampung data yang dibawa dari URL dengan tipe GET:

Perhatikan kode berikut:

$category           = $this->request->getGet('category');
$keyword            = $this->request->getGet('keyword');

Di codeigniter 4, kita sudah tidak menggukan $this->input->get(). Sekarang sudah digantikan oleh $this->request->getGet().

Saya juga menambahkan script di bawah ini dengan tujuan membawa data ke halaman index. Jadi, data yang sudah diketik pada saat melakukan filter tidak akan hilang. Secara otomatis data akan tetap tinggal di dalam kolom filter.

$data['category']   = $category;
$data['keyword']    = $keyword;

Kemudian script di bawah ini merupakan script yang sudah kita gunakan di part ke 4 saat melakukan create dan edit.

Tujuannya jelas-jelas untuk mengelompokan hanya field name dan id pada table category. Sehingga akan mempermudah saat membuat dropdown menggunakan form helper.

Berikut kodenya:

$categories         = $this->category_model->where('category_status', 'Active')->findAll();
$data['categories'] = ['' => 'Pilih Category'] +
array_column($categories, 'category_name', 'category_id');

Lalu script di bawah ini digunakan untuk melakukan filtering.

Pada awal script saya sengaja membiarkan variable $where, $like dan $or_like bernilai array kosong.

$where      = [];
$like       = [];
$or_like    = [];

Tujuannya jika tidak terjadi filter, maka variable tersebut bernilai kosong dan query akan membaca dengan parameter yang kosong. Akibatnya, semua data akan tampil. Namun jika terjadi filtering (not empty) maka script di bawah inilah yang beraksi.

Berikut scriptnya:

if(!empty($category)){
    $where = ['products.category_id' => $category];
}

if(!empty($keyword)){
    $like   = ['products.product_name' => $keyword];
    $or_like   = ['products.product_sku' => $keyword, 'products.product_description' => $keyword];
}

Pada dokumentasi, method like dan orLike dapat menerima array. Jadi kita sangat beruntung karena bisa memanfaatkan ini untuk filtering.

Langkah terakhir adalah update script paginatenya.

Script lengkap sebelumnya:

public function index()
{
    // paginate
    $paginate = 5;
    $data['products']   = $this->product_model->join('categories', 'categories.category_id = products.category_id')->paginate($paginate, 'product');
    $data['pager']      = $this->product_model->pager;

    echo view('product/index', $data);
}

Script lengkap setelahnya:

public function index()
{
    $category           = $this->request->getGet('category');
    $keyword            = $this->request->getGet('keyword');

    $data['category']   = $category;
    $data['keyword']    = $keyword;

    $categories         = $this->category_model->where('category_status', 'Active')->findAll();
    $data['categories'] = ['' => 'Pilih Category'] + array_column($categories, 'category_name', 'category_id');

    // filter
    $where      = [];
    $like       = [];
    $or_like    = [];

    if(!empty($category)){
        $where = ['products.category_id' => $category];
    }

    if(!empty($keyword)){
        $like   = ['products.product_name' => $keyword];
        $or_like   = ['products.product_sku' => $keyword, 'products.product_description' => $keyword];
    }
    // end filter

    // paginate
    $paginate = 5;
    $data['products']   = $this->product_model->join('categories', 'categories.category_id = products.category_id')->where($where)->like($like)->orLike($or_like)->paginate($paginate, 'product');
    $data['pager']      = $this->product_model->pager;

    echo view('product/index', $data);
}

Step #2 – Modifikasi Index View Product

Silahkan buka file app/Views/product/index.php kemudian tambahkan kode pada baris ke 50 – 75 dan baris 118 – 122.

Berikut kodenya:

<?php echo view('_partials/header'); ?>
<?php echo view('_partials/sidebar'); ?>

<div class="content-wrapper">
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0 text-dark">Products</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item active">Products</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            List Product
                            <a href="<?php echo base_url('product/create'); ?>" class="btn btn-primary float-right">Tambah</a>
                        </div>
                        <div class="card-body">
                        
                            <?php
                            if(!empty(session()->getFlashdata('success'))){ ?>
                            <div class="alert alert-success">
                                <?php echo session()->getFlashdata('success');?>
                            </div>     
                            <?php } ?>

                            <?php if(!empty(session()->getFlashdata('info'))){ ?>
                            <div class="alert alert-info">
                                <?php echo session()->getFlashdata('info');?>
                            </div>
                            <?php } ?>

                            <?php if(!empty(session()->getFlashdata('warning'))){ ?>
                            <div class="alert alert-warning">
                                <?php echo session()->getFlashdata('warning');?>
                            </div>
                            <?php } ?>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                    <?php 
                                        echo form_label('Category');
                                        echo form_dropdown('category', $categories, $category, ['class' => 'form-control', 'id' => 'category']); 
                                    ?>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                    <?php 
                                        echo form_label('Search');
                                        $form_keyword = [
                                            'type'  => 'text',
                                            'name'  => 'keyword',
                                            'id'    => 'keyword',
                                            'value' => $keyword,
                                            'class' => 'form-control',
                                            'placeholder' => 'Enter keyword ...'
                                        ];
                                        echo form_input($form_keyword);
                                    ?>
                                    </div>
                                </div>
                            </div>
                            <div class="table-responsive">
                                <table class="table table-bordered table-hovered">
                                    <thead>
                                        <tr>
                                            <th width="10px" class="text-center">No</th>
                                            <th>Thumbnail</th>
                                            <th>SKU</th>
                                            <th>Name</th>
                                            <th>Category</th>
                                            <th>Price</th>
                                            <th>Status</th>
                                            <th class="text-center">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <?php foreach($products as $key => $row){ ?>
                                        <tr>
                                            <td class="text-center"><?php echo $key + 1; ?></td>
                                            <td><img src="<?php echo base_url('uploads/'.$row['product_image']) ?>" class="rounded-circle" width="50" height="50"></td>
                                            <td><?php echo $row['product_sku']; ?></td>
                                            <td><?php echo $row['product_name']; ?></td>
                                            <td><?php echo $row['category_name']; ?></td>
                                            <td><?php echo "Rp. ".number_format($row['product_price']); ?></td>
                                            <td><?php echo $row['product_status']; ?></td>
                                            <td class="text-center">
                                                <div class="btn-group">
                                                    <a href="<?php echo base_url('product/show/'.$row['product_id']); ?>" class="btn btn-sm btn-info">
                                                        <i class="fa fa-eye"></i>
                                                    </a>
                                                    <a href="<?php echo base_url('product/edit/'.$row['product_id']); ?>" class="btn btn-sm btn-success">
                                                        <i class="fa fa-edit"></i>
                                                    </a>
                                                    <a href="<?php echo base_url('product/delete/'.$row['product_id']); ?>" class="btn btn-sm btn-danger" onclick="return confirm('Apakah Anda yakin ingin menghapus kategori ini?');">
                                                        <i class="fa fa-trash-alt"></i>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                        <?php } ?>
                                    </tbody>
                                </table>
                            </div>
                            <div class="row mt-3 float-right">
                                <div class="col-md-12">
                                    <?php echo $pager->links('product', 'bootstrap_pagination') ?> 
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<?php echo view('_partials/footer'); ?>

Kemudian simpan.

Step #3 – Buat File Jquery Filter

Silahkan buat file bernama filter.js kemudian simpan di dalam direktori folder_project/public/themes/dist/js/filter.js

Kemudian ketik kode berikut:

$(document).ready(function(){
    $("#category").change(function(){
        filter();
    });
    $("#keyword").keypress(function(event){
        if(event.keyCode == 13){ // 13 adalah kode enter
            filter();
        }
    });
    var filter = function(){
        var category = $("#category").val();
        var keyword = $("#keyword").val();
        window.location.replace("/product?category="+category+"&amp;keyword="+keyword);
    }
});

Simpan.

Step #4 – Panggil Filter.js di Footer

Tambahkan script pada baris ke 18 dan simpan app/Views/_partials/footer.php

Berikut kodenya:

<aside class="control-sidebar control-sidebar-dark">
    <div class="p-3">
        <h5>Title</h5>
        <p>Sidebar content</p>
    </div>
</aside>

<footer class="main-footer">
    <div class="float-right d-none d-sm-inline">
        Sistem Informasi Penjualan
    </div>
    <strong>Copyright © 2014-2019 <a href="<?php echo base_url('/'); ?>">SIP Online</a>.</strong> All rights reserved.
</footer>
</div>
<script src="<?php echo base_url('themes/plugins'); ?>/jquery/jquery.min.js"></script>
<script src="<?php echo base_url('themes/plugins'); ?>/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="<?php echo base_url('themes/dist'); ?>/js/adminlte.min.js"></script>
<script src="<?php echo base_url('themes/dist'); ?>/js/filter.js"></script>
</body>
</html>

Simpan.

Step #5 – Testing Custom Filtering

Jika berjalan lancar maka hasilnya seperti ini:

sistem informasi penjualan codeigniter 4 filtering pagination - 1

Download Full Source Code

Silahkan download update part ke 5 melalui link di bawah ini:

Download Source Code

***

Alhamdulillah sudah berakhir part ke 5 dari tutorial membuat sistem informasi penjualan dengan Codegniter 4 – filtering dan custom pagination ini.

Tapi tunggu dulu, insya Allah masih ada part selanjutnya yang akan saya bahas.

Pengantar Sistem Informasi Penjualan dengan Codeigniter 4

Di part selanjutnya saya akan membahas tentang Manajement Transaction Import dan Export.

Jika dalam mempraktikkan kode di atas ada error, silahkan bertanya melalui kolom komentar.

Selamat belajar …

Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

8 Replies to “Sistem Informasi Penjualan dengan Codeigniter 4 Part #5 –…”

  1. ok om mantab sekali.. ditunggu kelanjutannya
    semoga diberi kesehatan dan rezeki yg lancar om…

  2. Om, klo untuk perintah num_rows() > 0 di CI4 pake query result apa ya om?

    1. Sama-sama, terima kasih sudah berkunjung. Kalau cenggang, baca tutorial lainnya ya.

  3. mantab gan tutornya,
    btw mo naanya nih gan kalo pakek paginate cara dapetin total data nya gimana ya gan ?..
    di documentasi cinya gk ada, nyobain pakek getFieldCount() gkbisa juga… xD wwww

Leave a Reply

Your email address will not be published. Required fields are marked *

Jika terbantu dengan artikel ini, silahkan share, beri komentar dan "klik" 1 kali pada iklan ya.