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".
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
Sekarang ikuti Langkah langkah untuk membuat Custom pagination
Buka file controller user dan perhatikan kode di bawah ini
'user' => $model->paginate(5),
ubahlah kode di atas menjadi
'user' => $model->paginate(5,'jq'),
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>
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',
];
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
Untuk memasukan jquery pada pagination kita perlu merubah beberapa file yang sudah kita buat sebelumnya dan membuat sebuah file View yang baru.
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>
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);
}
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>
Sekarang kamu dapat melihat perubahannya dengan mengakses url di bawah ini
http://localhost/pagination/user
Demikian lah tutorial kali ini kamu dapat mendownload tutorial ini dari sini.