Tutorial membuat Pagination Sederhana Menggunakan Codeigniter 4

Tutorial membuat Pagination Sederhana Menggunakan Codeigniter 4

loading....

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.

 

Tutorial Pagination menggunakan Codeigniter 4 dan Bootstrap

Dalam tutorial pagination menggunakan codeigniter 4 dan bootstrap tabel ini akan saya bagi menjadi beberapa langkah yaitu:

  • Download Codeinginter 4 terbaru
  • Konfigurasi dasar Codeigniter 4
  • Membuat database dan tabel beserta isinya
  • Seting database pada codeigniter 4
  • Membuat Model
  • Membuat Controller
  • Membuat View
  • Tes koding

Langkah 1: Download Codeigniter 4

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.

Langkah 2: Konfigurasi dasar Codeigniter 4

Pada langkah ke dua ini kamu dapat melihat artikel saya sebelmnya

atau kamu dapat mengikuti langkah ini

  1. Buka direktori xampp\htdocs\pagination\public lalu copy semua file di direktori tersebut kemudian paste pada direktori xampp\htdocs\pagination.
  2. Buka File index.php lalu tambahkan baris kode di bawah pada baris ke dua seteleh tag <?php dan sebelum // Valid PHP Version?. Hal ini harus dilakukan pada masa codeing agar kita dapat mentrace cika terjadi kesalahan pada code.
    define('ENVIRONMENT', 'development');​

    lalu ubahlah

    $pathsPath = FCPATH . '../app/Config/Paths.php';

    menjadi

    $pathsPath = FCPATH . 'app/Config/Paths.php';
  3. Buka direktori xampp\htdocs\pagination\app\Config dan bukalah file App.php. kemudian ubah lah
    public $baseURL = 'http://localhost:8080/';
    public $indexPage = 'index.php';​

    menjadi

    public $baseURL = 'http://localhost/pagination/';
    public $indexPage = '';

Langkah 3: Membuat database mysql dan tabel beserta isinya

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;

Langkah 4: Seting database pada codeigniter 4

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

Langkah 5: Membuat Model

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'];
}

Langkah 6: Membuat Controller

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);
    }
}

Langkah 7: Membuat View

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>

Langkah 8: Tes kode

Untuk melihat hasil kodingan kita di atas kamu dapat mengkases alamat berikut

http://localhost/pagination/user

Tutorial ini dapat di download di sini.

Artikel Menarik Lainnya
codeigniter 4, pagination codeigniter 4, pagination php, pagination php mysql bootstrap, pagination codeigniter 4 bootstrap, codeigniter tutorial, codeigniter pagination

loading...