Pagination Codeigniter 4 Dengan Bootstrap 4 Terbaru

Daftar Isi [Tampil]

Pagination Codeigniter 4 adalah pembagian halaman pada codeigniter 4 berdasarkan data perhalaman yang diatur oleh controller, library pager, dan view.

Jadi dengan pagination kamu dapat membagi data perhalaman yang tampil, contohnya paginate(10) maka data yang tampil adalah 10 data perhalaman.

Dan pada setiap halaman akan dilengkapi dengan tombol yang menunjukan halaman yang sedang dibuka, halaman sebelumnya, dan halaman selanjutnya.

Untuk membuat pagination codeigniter 4 kamu harus mengisntall terlebih dahulu codeigniter 4, dan menyiapkan databasenya.

Oleh sebab itu berikut inilah tahap persiapan membuat pagination codeigniter 4.

Persiapan Membuat Pagination Codeigniter 4

1. Install Framework Codeigniter 4

Untuk mengistall framework codeigniter 4 kamu dapat menggunakan perintah composer berikut composer create-project codeigniter4/appstarter namaproject.

Atau dengan download codeigniter 4 dari situs resminya kemudian ekstrak zip-nya dan rename folder tersebut sesuai keinginan kamu, lalu simpan di htdocs.

Dan perlu diketahui bahwa codeigniter 4 ini hanya support dengan php versi terbaru minimal versi 7.2 dan xampp terbaru yang sudah menggunakan php terbaru.

Buka xampp kamu dan aktifkan Apache dan MySQL nya saja karena fitur lainya tidak diperlukan.

Selanjutnya buka folder codeigniter 4 kamu di kode editor, Panduan Code pada tutorial ini menggunakan Visual Studio Code.

Setelah dibuka melalui kode editor visual studio code klik menu terminal dan klik new terminal, maka akan muncul layout terminal dibagian bawah kode editor.

Jika sudah muncul layout terminal tersebut tunggu beberapa saat sampai load layout terminal sempurna, kemudian ketik perintah php spark serve untuk menjalankan local development server codeigniter 4.

Lalu buka browser dan ketik localhost:8080 maka codeigniter 4 akan tampil pada browser.

2. Konfigurasi Database Pada Codeigniter 4

Sekarang kamu perlu membuat database baru untuk dihubungkan dengan codeigniter 4, contoh Panduan Code membuat database di phpmyadmin dengan nama codeigniter.

Jika database baru sudah siap kamu buka app\Config\Database.php dan cari public $default, jika sudah ketemu settingan-nya menjadi seperti dibawah ini.

  public $default = [
  'DSN'      => '',
  'hostname' => 'localhost',
  'username' => 'root',
  'password' => '',
  'database' => 'codeigniter',
  'DBDriver' => 'MySQLi',
  'DBPrefix' => '',
  'pConnect' => false,
  'DBDebug'  => (ENVIRONMENT !== 'production'),
  'cacheOn'  => false,
  'cacheDir' => '',
  'charset'  => 'utf8',
  'DBCollat' => 'utf8_general_ci',
  'swapPre'  => '',
  'encrypt'  => false,
  'compress' => false,
  'strictOn' => false,
  'failover' => [],
  'port'     => 3306,
 ];

jika sudah jangan lupa save dulu, lalu klik tombol tambah "+" pada layout terminal kamu untuk membuat tab terminal baru, kemudian ketik perintah php spark migrate:create users untuk membuat file migration database users pada codeigniter 4.

Setelah itu file migration database users akan muncul pada app\Config\Database lalu buka file tersebut, dan edit menjadi seperti dibawah ini.



<?php namespace App\Database\Migrations;



use CodeIgniter\Database\Migration;



class Users extends Migration

{

public function up()

{

    $this->forge->addField([

        'id'            => [

            'type'           => 'INT',

            'constraint'     => 11,

            'unsigned'       => TRUE,

            'auto_increment' => TRUE

        ],

        'first_name'    => [

            'type'           => 'VARCHAR',

            'constraint'     => '100',

        ],

        'last_name'     => [

            'type'           => 'VARCHAR',

            'constraint'     => '100',

        ],

        'age'           => [

            'type'           => 'INT',

            'constraint'     => 11,

        ],

        'address' => [

            'type'           => 'TEXT',

            'null'           => TRUE,

        ],

    ]);

    $this->forge->addKey('id', TRUE);

    $this->forge->createTable('users');

} 

//--------------------------------------------------------------------



public function down()

{

//

}

}

Jika sudah jangan lupa save dan ketik perintah php spark migrate pada terminal kamu untuk membuat tabel users pada database codeigniter tadi dengan otomatis.

Lalu cek tabel users pada database codeigniter diphpmyadmin kamu apakah sudah berhasil dibuat atau belum.

Jika sudah berhasil maka akan terlihat seperti gambar dibawah ini

3. Install Bootstrap 4 Dan Jquery

Pada tahap ini kamu harus install bootstrap 4 dan jquery karena akan digunakan untuk membuat tampilan halaman user dan pagination nya.

Download bootstrap 4 dari situs resminya, jika sudah didownload kemudian ekstrak zip bootstrap 4 tersebut, dan pindahkan (cut) folder css dan js nya kedalam project codeigniter kamu tepatnya ke folder public.

Untuk lebih jelasnya lihat gambar dibawah ini.

pindahkan folder js dan css bootstrap ke dalam folder public

Selanjutnya download Jquery 3.5.1 compressed, lalu kamu akan dialihkan kehalaman script jquery 3.5.1 tersebut.

Untuk mendownloadnya kamu copy semua script jquery 3.5.1 kemudian paste di notepad dan save dengan nama jquery.min.js

Atau bisa dengan klik kanan dibrowser kamu dan save as script jquery 3.5.1 tersebut dan rename menjadi jquery.min.js.

Lalu simpan file jquery tersebut kedalam folder public\js pada project codeigniter 4 kamu.

Membuat Pagination Codeigniter 4

1. Buat Controller Baru Pada app\Controller

Pertama kamu harus membuat file controller baru didalam app\Controller, buat file controller dengan nama User.php.

Kemudian copy script User.php dibawah ini dan paste kedalam file User.php kamu.

 <?php namespace App\Controllers;

use CodeIgniter\Controller;
use App\Models\UserModel;
class User extends Controller
{
    public function index()
    {
        $pager = \Config\Services::pager();
        $model = new UserModel();

        $data = [
            'users' => $model->paginate(5, 'custompaginate'),
            'pager' => $model->pager
        ];

        return view('users', $data);
    }
    public function save()
    {
        $model = new UserModel();
        $data = array(
            'first_name'        => $this->request->getPost('first_name'),
            'last_name'         => $this->request->getPost('last_name'),
            'age'               => $this->request->getPost('age'),
            'address'           => $this->request->getPost('address'),
        );
        $model->saveUsers($data);
        return redirect()->to('/user');
    }

}

Pada script controller User.php tersebut terdapat dua function penting yaitu function index yang berfungsi untuk menampilkan halaman user nantinya dan function save untuk menyimpan data yang diinputkan nanti pada halaman user.

Dan perhatikan code use App\Models\UserModel; nah code inilah yang menghubungkan file controller User.php dengan model UserModel.php.

2. Buat Model Baru Pada app\Model

Kedua buat sebuah model baru pada app\Model dengan nama UserModel.php, model inilah yang berfungsi untuk mengatur tabel yang akan digunakan oleh controller User.php tadi.

Berikut inilah script UserModel.php nya.

<?php namespace App\Models;

use CodeIgniter\Model;

class UserModel extends Model
{
    protected $table = 'users';
    
    public function saveUsers($data){
        $query = $this->db->table('users')->insert($data);
        return $query;
    }

}

Kode protected $table = 'users'; berfungsi untuk menggunakan tabel users, dan function saveUser berfungsi untuk menyimpan input data pada halaman view nya nanti.

3. Buat View Baru pada app\Views

Ketiga buat file view baru pada app\Views dengan nama users.php, file inilah yang berfungsi untuk membuat tampilan halaman user.

Dan berikut inilah script file view users.php tersebut.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Users</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    </head>
<body>
    <div class="container"><div class="text-center"><h5>Tutorial Pagination Codeigniter 4 www.panduancode.com</h5></div>
    <button type="button" class="btn btn-success mb-2" data-toggle="modal" data-target="#addModal">Add New</button>
               <table class="table table-bordered">
                <thead>
                    <th>No</th>
                    <th>Name</th>
                    <th>Age</th>
                    <th>Address</th>
                </thead>
                <tfoot>
                <th>No</th>
                    <th>Name</th>
                    <th>Age</th>
                    <th>Address</th>
                </tfoot>
                <tbody>
                    <?php 
                    foreach($users as $key => $row) { ?>
                    <tr>
                        <td><?php echo $key+1; ?></td>
                        <td><?php echo $row['first_name']." ".$row['last_name']; ?></td>
                        <td><?php echo $row['age']; ?></td>
                        <td><?php echo $row['address']; ?></td>
                    </tr>
                    <?php } ?>
                </tbody>
            </table>
            <?php echo $pager->links('custompaginate', 'panduancode'); ?>
        </div>
     
    <!-- Modal Add user-->
    <form action="/user/save" method="post">
        <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Add New User</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>Firs Name</label>
                    <input type="text" class="form-control" name="first_name" placeholder="Firs Name">
                </div>
                
                <div class="form-group">
                    <label>Last Name</label>
                    <input type="text" class="form-control" name="last_name" placeholder="Last Name">
                </div>

                <div class="form-group">
                    <label>Age</label>
                    <input type="number" class="form-control" name="age" placeholder="Age">
                </div>
                <div class="form-group">
                    <label>Address</label>
                    <input type="text" class="form-control" name="address" placeholder="Address">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Save</button>
            </div>
            </div>
        </div>
        </div>
    </form>
    <!-- End Modal Add user-->

<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.bundle.min.js"></script>
    </body>
</html>

Perhatikan code <link rel="stylesheet" href="/css/bootstrap.min.css"> nah code inilah yang berfungsi untuk mengundang file bootstrap 4 yang berapa pada public\css tadi.

Dan code <script src="/js/jquery.min.js"></script><script src="/js/bootstrap.bundle.min.js"></script> yang berfungsi untuk mengundang file jquery dan js bootsrap 4.

Code untuk pagination nya sendiri adalah code berikut ini <?php echo $pager->links('custompaginate', 'panduancode'); ?>, perhatikan dua variabel yang ada didalam kurung tersebut, variabel custompaginate sudah kita deklarasikan pada file controller User.php, dan variabel panduancode belum kita deklarasikan oleh sebab itu kita harus membuat file baru untuk mendeklarasikan variabel tersebut.

Dan variabel panduancode tersebut akan kita gunakan untuk mempercantik pagination codeigniter 4, kita akan membuat file pager.php dengan menggunakan bootstrap 4 agar tampilannya elegan.

4. Buat File pager.php pada app\Views

Keempat buat file pager.php pada folder app\Views untuk membuat custom pagination codeigniter 4 dengan bootstrap 4.

dan berikut inilah script pager.php tersebut.

<?php
/**
 * @var \CodeIgniter\Pager\PagerRenderer $pager
 */

$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>
        <?php endif ?>
    </ul>
</nav>

Setelah membuat file pager.php diatas kamu harus mendaftarkannya pada sistem Config\Pager.php agar file tersebut berfungsi.

5. Daftarkan File pager.php Pada app\Config\Pager.php

File pager.php yang tadi kita buat berapa pada app\Views sedangkan file Pager.php yang satunya lagi berada pada app\Config\Pager.php, jadi kedua file tersebut berbeda.

Cara mendaftarkan file pager.php tersebut mudah, caranya kamu buka app\Config\Pager.php kemudian edit file tersebut.

Kamu tambahkan code 'panduancode' => 'App\Views\Pager', pada public $template untuk mendaftarkan file pager.php yang berada di app\View dan mendeklarasikan variabel panduancode tadi.

Sehingga script tersebut akan terlihat seperti dibawah ini

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

Sekarang kamu coba akses http://localhost:8080/user untuk mencoba pagination codeigniter 4 tersebut dan jangan lupa tambahkan datanya.

Jika kamu mengikuti semua langkah-langkah pada tutorial pagination codeigniter 4 ini dengan baik maka akan terlihat seperti gambar dibawah ini.

Sampai disini kamu sudah berhasil mengikuti panduan dari tutorial pagination codeigniter 4, oleh sebab itu sampai disini dulu tutorial pagination nya dari Panduan Code.

Semoga apa yang disampaikan Panduan Code dapat bermanfaat untuk kita semua aamiin, dan jika kamu memiliki pertanyaan mengenai tutorial ini silahkan sampaikan pada kolom komentar dibawah.

Akhir kata dari Panduan Code jangan lupa titik koma. Coba cari lagi apa yang ada inginkan pada kolom berikut:

Donasi

Bantu Apresiasi Bantu berikan apresiasi jika artikelnya dirasa bermanfaat agar penulis lebih semangat lagi membuat artikel bermanfaat lainnya. Terima kasih.