Pada kali ini saya akan memberikan contoh bagaimana membuat sebuah pagination sederhana menggunakan framework codeigniter 4 dan bootstrap 4. Pada tutorial ini kita akan menampilkan data dari database ke dalam bootstrap tabel. dan pada artikel kali ini saya akan menyediakan source code untuk di download.
Dalam tutorial pagination menggunakan codeigniter 4 dan bootstrap tabel ini akan saya bagi menjadi beberapa langkah yaitu:
Pada langkah yang pertama ini kamu harus mendownload versi terbaru dari codeigniter 4 pada website resmi codeigniter 4 yaitu https://codeigniter.com/download . Setelah selesai mendownload nya kamu masuk ke direktori dimana xampp kamu di install lalu masuk kedalam direktori htdocs dan buatlah sebuah direktori dengan nama pagination. Lalu kamu ekstrak codeinginter 4 yang sudah kamu download ke dalam direktori pagination.
Pada langkah ke dua ini kamu dapat melihat artikel saya sebelmnya
atau kamu dapat mengikuti langkah ini
define('ENVIRONMENT', 'development');lalu ubahlah
$pathsPath = FCPATH . '../app/Config/Paths.php';menjadi
$pathsPath = FCPATH . 'app/Config/Paths.php';public $baseURL = 'http://localhost:8080/';
public $indexPage = 'index.php';menjadi
public $baseURL = 'http://localhost/pagination/';
public $indexPage = '';Bukalah phpmyadmin lalu masukan baris kode sql ini pada tab SQL
-- phpMyAdmin SQL Dump
-- version 4.9.1
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Mar 29, 2020 at 11:42 PM
-- Server version: 10.4.8-MariaDB
-- PHP Version: 7.3.11
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";
--
-- Database: `pagination`
--
CREATE DATABASE IF NOT EXISTS `pagination` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;
USE `pagination`;
-- --------------------------------------------------------
--
-- Table structure for table `user`
--
CREATE TABLE `user` (
`user_id` varchar(20) NOT NULL,
`user_password` tinytext DEFAULT NULL,
`user_email` varchar(50) DEFAULT NULL,
`user_alias` varchar(50) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
--
-- Dumping data for table `user`
--
INSERT INTO `user` (`user_id`, `user_password`, `user_email`, `user_alias`) VALUES
('admin', '21232f297a57a5a743894a0e4a801fc3', 'admin@host.com', 'Admin'),
('adrian', '8c4205ec33d8f6caeaaaa0c10a14138c', 'adrian@gmail.com', 'Adriana'),
('andri', '6bd3108684ccc9dfd40b126877f850b0', 'andri@yahoo.com', 'Andriana'),
('ardi', '0264391c340e4d3cbba430cee7836eaf', 'ardi@gmail.com', 'Ardianan'),
('bagas', 'ee776a18253721efe8a62e4abd29dc47', 'bagas@rc.org', 'Bagas Adi'),
('bima', '7fcba392d4dcca33791a44cd892b2112', 'bima@google.com', 'Bima Satria'),
('herdi', '70ef423c063dfa178e58114b90052a9b', 'herdi@aol.com', 'Herdianan'),
('heri', '6812af90c6a1bbec134e323d7e70587b', 'heri@google.com', 'Heriana'),
('lili', '777bbb7869ae8193249f8ff7d3e59afe', 'lili@bing.com', 'Lilianan'),
('novi', '832f72b7a13b2cedcfb108603a10e2a6', 'novi@gmail.com', 'Noviana'),
('rudi', '1755e8df56655122206c7c1d16b1c7e3', 'rudi@yahoo.com', 'Rudiana'),
('yuli', '4a01a05a350e1c7710c989f1211245a8', 'yuli@gmail.com', 'Yulianan');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `user`
--
ALTER TABLE `user`
ADD PRIMARY KEY (`user_id`);
COMMIT;
Masuklah direktori xampp\htdocs\pagination\app\Config kemudian bukalah file Database.php kemudian ubah lah baris berikut
public $default = [
'DSN' => '',
'hostname' => 'localhost',
'username' => '',
'password' => '',
'database' => '',
'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,
];menjadi
public $default = [
'DSN' => '',
'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'pagination',
'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,
];atau kamu dapat sesuaikan dengan setingan database kamu
Bukalah direktori xampp\htdocs\pagination\app\Models dan buatlah file dengan nama M_user.php lalu isikan baris perintah berikut ini
<?php namespace App\Models;
use CodeIgniter\Database\ConnectionInterface;
use CodeIgniter\Model;
class M_user extends Model
{
protected $table = 'user';
protected $allowedFields = ['user_id', 'user_email'];
}Bukalah direktori xampp\htdocs\pagination\app\Controllers dan buatlah file dengan nama User.php lalu isikan baris perintah berikut ini
<?php namespace App\Controllers;
use CodeIgniter\Controller;
use App\Models\M_user;
class User extends Controller
{
public function index()
{
$model = new M_user();
$data = [
'user' => $model->paginate(5),
'hal' => $model->pager
];
return view('user', $data);
}
}Bukalah direktori xampp\htdocs\pagination\app\View dan buatlah file dengan nama user.php lalu isikan baris perintah berikut 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">
</head>
<body>
<div class="container">
<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 $pp='pagination/user'; ?>
<?php $hal->setPath($pp); ?>
<?= $hal->links() ?>
<?php endif ?>
</div>
</div>
</div>
</body>
</html>Untuk melihat hasil kodingan kita di atas kamu dapat mengkases alamat berikut
http://localhost/pagination/userTutorial ini dapat di download di sini.
