31/03/2020
Rumah Code

Custom Pagination Codeigniter 4 dengan menggunakan Bootstrap dan Jquery

Pada tutorial kali ini rumah code akan membahas tentang bagaimana membuat Custom pagination dengan codeigniter 4 yang menggunakan boostrap dan Jquery. Tutorial ini merupakan kelanjutan dari tutorial sebelum nya yang berjudul "Tutorial membuat Pagination Sederhana Menggunakan Codeigniter 4".

Custom Pagination Codeigniter 4 dengan menggunakan Bootstrap dan Jquery

Seperti sudah saya jelaskan sebelumnya bahwa tutorial ini merupakan kelanjutan dari tutorial seblumnya jadi biar gak bingung sebaik nya kamu membaca terlebih dahulu dan mendownload sourcode nya.

Jika kamu sudah membaca dan mendownload source code pada artikel sebelum nya kiata akan memulai melanjutkan tutorial ini.

Tutorial ini akan saya bagi menjadi 2 bagian

Membuat Custom Pagination
Memasukan jquery pada pagination

Membuat Custom Pagination

Sekarang ikuti Langkah langkah untuk membuat Custom pagination

Langkah ke 1

Buka file controller user dan perhatikan kode di bawah ini

'user' => $model->paginate(5),

ubahlah kode di atas menjadi

'user' => $model->paginate(5,'jq'),

Langkah ke 2

Pada langkah ke 2 ini kita akan membuat file baru yang bernama bs_page.php pada direktori App/View/Pager dan mengisi nya dengan baris kode berikut ini

<?php
$pager->setSurroundCount(2);
?>
<nav aria-label="<?= lang('Pager.pageNavigation') ?>">
    <ul class="pagination">
        <?php foreach ($pager->links() as $hal) : ?>
            <li <?= $hal['active'] ? 'class="active page-item"' : 'class="page-item"' ?>>
                <a href="<?= $hal['uri'] ?>" class="page-link">
                    <?= $hal['title'] ?>
                </a>
            </li>
        <?php endforeach ?>        
    </ul>
</nav>

Langkah Ke 3

Pada langkah ke 3 ini kita akan mendefinisikan file bs_page.php yang sudah di buat tadi sebagai custom pagination. Sekarang bukalah file App/Config/Pager.php dan perhatikan baris perintah berikut ini.

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

ubahlah baris perintah di atas menjadi seperti ini

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

Langkah ke 4

Pada langkah ke 4 ini kita akan merubah bagian view tepatnya pada file user.php. Coba perhatikan baris perintah di bawah ini

              <?php if ($hal) :?>
              <?php $pp='pagination/user'; ?>
              <?php $hal->setPath($pp); ?>
              <?= $hal->links() ?>
              <?php endif ?>

sekarang ubahlah kode di atas dengan menggunakan kode di bawah ini

              <?php if ($hal) :?>
              <?php echo $hal->links('jq', 'bs_page') ?> 
              <?php endif ?>

dan silahkan lihat perubahan yang terjadi setelah kita ubah kode nya dengan membuka url berikut ini

http://localhost/pagination/user

Selesai sudah tutorial bagian pertama ini (Membuat Custom Pagination) kita akan lanjutkan ke bagian berikut nya

Memasukan jquery pada pagination

Untuk memasukan jquery pada pagination kita perlu merubah beberapa file yang sudah kita buat sebelumnya dan membuat sebuah file View yang baru.

Langkah pertama : Mengubah File View/user.php dan membuat file View/user2.php

Sekarang ubahlah file View/user.php menjadi seperti ini.

<!doctype html>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Tutorial membuat Pagination Sederhana Menggunakan Codeigniter 4@RumahCode.Org</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
function getfpage(){	
	$("#isi").html('<div class="spinner-border text-primary" role="status"><span class="sr-only">Loading...</span></div>');
    $.get("user/hal", function(data, status){
      $("#isi").html(data);
    });
}
function goto(hal){	
	$("#isi").html('<div class="spinner-border text-primary" role="status"><span class="sr-only">Loading...</span></div>');
    $.get(hal, function(data, status){
      $("#isi").html(data);
    });
}
</script>  
</head>
<body onload="getfpage();">
<div class="container" id="isi">

</div> 
</body>
</html>

buatlah View/user2.php dan isikan kode berikut ini

    <div class="row p-2">
		<div class="col-md-12">
				<table class="table table-bordered">
				 <thead>
					<tr>
					   <th>User ID</th>
					   <th>Email</th>
					   <th>Alias</th>
					</tr>
				 </thead>
				 <tbody>
					<?php if($user): ?>
					<?php foreach($user as $users): ?>
					<tr>
					   <td><?php echo $users['user_id']; ?></td>
					   <td><?php echo $users['user_email']; ?></td>
					   <td><?php echo $users['user_alias']; ?></td>
					</tr>
				   <?php endforeach; ?>
				   <?php endif; ?>
				 </tbody>
			   </table>
		</div>
    </div>
    <div class="row p-2">
		<div class="col-md-12">
			
              <?php if ($hal) :?>
              <?php echo $hal->links('jq', 'bs_page') ?> 
              <?php endif ?>
		</div>
    </div>

Langkah kedua : Merubah Controller User

Kita akan memodifikasi sedikit saja file Controller/User.php dengan merubah source nya dari

    public function index()
    {    
        $model = new M_user();

        $data = [
            'user' => $model->paginate(5),
            'hal' => $model->pager
        ];
       
        return view('user', $data);
    }

menjadi seperti ini

    public function index()
    {    
        return view('user');
    }
	public function hal()
	{
        $model = new M_user();

        $data = [
            'user' => $model->paginate(5,'jq'),
            'hal' => $model->pager
        ];
		return view('user2', $data);
	}

Perhatikan Perubahan kode semula dengan kode yang telah di ubah. Perubahan yang saya lakukan adalah dengan membuat function index(); memanggil view user yang di mana tidak membutuhkan data apapun dari controller oleh karena itu tidak di sertakan variabel $data pada pemanggilan View\user.php.

return view('user');

Sedangkan pada pemanggilan View/user2.php saya menggunakan variabel $data karena data yang dari database akan di tampilkan di sini. Pemanggilan user2.php ini saya lakukan pada public function hal(); karena fungsi inilah yang akan mengambil data dari database dan menampilkan nya.

	public function hal()
	{
        $model = new M_user();

        $data = [
            'user' => $model->paginate(5,'jq'),
            'hal' => $model->pager
        ];
		return view('user2', $data);
	}

Langkah Ke 3: merubah file bs_page.php

Padd file bs_page.php ini kita akan merubah link yang akan di akses mengunakan jquery dengan event OnClick. dengan merubah isinya menjadi seperti ini

<?php
$pager->setSurroundCount(2);
?>
<nav aria-label="<?= lang('Pager.pageNavigation') ?>">
    <ul class="pagination">
        <?php foreach ($pager->links() as $hal) : ?>
            <li <?= $hal['active'] ? 'class="active page-item"' : 'class="page-item"' ?>>
                <a href="#" class="page-link" OnClick="goto('<?= $hal['uri'] ?>');">
                    <?= $hal['title'] ?>
                </a>
            </li>
        <?php endforeach ?>        
    </ul>
</nav>