Tutorial Membuat Pagination di Laravel 12 dengan Bootstrap 5
WhatsApp Icon

Tutorial Membuat Pagination di Laravel 12 dengan Bootstrap 5

Foto profil Edhik P
Oleh Edhik PFull-Stack Developer & Pro Digital AdsPerkiraan waktu baca: 3 menit

Pagination adalah fitur penting yang digunakan hampir di semua aplikasi web. Di Laravel 12, penggunaan pagination sangat mudah, namun jika teman-teman ingin mengganti desain defaultnya (Tailwind CSS) dengan desain lain, seperti Bootstrap 5, teman-teman perlu melakukan beberapa penyesuaian.

Melalui tutorial ini, teman-teman akan belajar bagaimana:

  • Mengatur dan mengonfigurasi aplikasi Laravel 12.

  • Membuat dan menampilkan data dengan pagination.

  • Mengubah desain default Tailwind CSS menjadi Bootstrap 5.

 

Langkah-langkah Membuat Pagination di Laravel 12 dengan Bootstrap 5

Berikut adalah langkah-langkah lengkap untuk membuat pagination di Laravel 12 menggunakan Bootstrap 5.

Langkah 1: Install Laravel 12

Jika teman-teman belum memiliki aplikasi Laravel, teman-teman dapat membuatnya dengan perintah berikut:

composer create-project laravel/laravel example-app

 

Langkah 2: Konfigurasi Database MySQL

Secara default, Laravel 12 menggunakan SQLite. Namun, jika teman-teman ingin menggunakan MySQL, teman-teman perlu mengonfigurasi database di file .env dengan menambahkan detail database teman-teman:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=nama_database_anda  # Misalnya: blog
DB_USERNAME=username_database_anda  # Misalnya: root
DB_PASSWORD=kata_sandi_database_anda  # Misalnya: root

 

Langkah 3: Membuat Pengguna Palsu

Untuk menampilkan data dalam pagination, kita perlu membuat tabel dan menambahkan beberapa data pengguna palsu. Ikuti langkah-langkah berikut:

Jalankan perintah migrasi untuk membuat tabel users:

php artisan migrate

Gunakan Tinker untuk membuat 100 data dummy untuk user:

php artisan tinker
User::factory()->count(100)->create();

 

Langkah 4: Membuat Controller (UserController)

Untuk membuat controller yang menangani permintaan untuk menampilkan data pengguna dengan pagination, teman-teman bisa menggunakan artisan command. Jalankan perintah berikut untuk membuat UserController:

php artisan make:controller UserController

 

Langkah 5: Menambahkan Route

Sekarang, kita akan menambahkan route yang akan menangani permintaan untuk menampilkan pengguna dengan pagination. Tambahkan kode berikut di file routes/web.php:

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserController;

Route::get('users', [UserController::class, 'index']);

 

Langkah 6: Membuat Controller

Buatlah controller yang akan menangani logic untuk menampilkan data pengguna. Pada controller UserController, tambahkan metode index() untuk mengembalikan data pengguna dengan pagination:

Buka file app/Http/Controllers/UserController.php dan tambahkan kode berikut:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\User;
use Illuminate\View\View;

class UserController extends Controller
{
    /**
     * Menampilkan daftar pengguna dengan pagination.
     *
     * @return \Illuminate\Http\Response
     */
    public function index(Request $request): View
    {
        $users = User::paginate(5);  // Mengambil 5 pengguna per halaman

        return view('users', compact('users'));
    }
}

 

Langkah 7: Membuat File Blade

Sekarang, kita akan membuat tampilan yang menampilkan daftar pengguna dengan pagination. Buat file Blade baru di resources/views/users.blade.php dan tambahkan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laravel 12 Contoh Pagination</title>
    <!-- Menambahkan Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container mt-5">
    <h1>Daftar Pengguna</h1>
    <table class="table">
        <thead>
            <tr>
                <th>ID</th>
                <th>Nama</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            @forelse($users as $user)
                <tr>
                    <td>{{ $user->id }}</td>
                    <td>{{ $user->name }}</td>
                    <td>{{ $user->email }}</td>
                </tr>
            @empty
                <tr>
                    <td colspan="3">Tidak ada pengguna.</td>
                </tr>
            @endforelse
        </tbody>
    </table>

    <!-- Menampilkan pagination dengan Bootstrap 5 -->
    {!! $users->withQueryString()->links('pagination::bootstrap-5') !!}
</div>

<!-- Menambahkan Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>

 

Langkah 8: Menjalankan Aplikasi Laravel

Sekarang, teman-teman siap menjalankan aplikasi Laravel. Jalankan server Laravel menggunakan perintah:

php artisan serve

Setelah itu, buka browser teman-teman dan akses URL berikut untuk melihat hasilnya:

http://localhost:8000/users

 

Studi Kasus

Untuk studi kasus lebih lanjut dan penerapan Laravel dalam pengembangan aplikasi web, teman-teman bisa mengunjungi ebook ini, yang membahas secara mendalam bagaimana membangun website e-commerce dengan Laravel yang terintegrasi dengan Midtrans dan Raja Ongkir.

laravelbootstrapphphtml

Artikel terkait

Load more