Cara Membuat Pagination dengan Laravel

Juli 2, 2025

Halo, Sobat Jagoan! Kamu ingin membagi konten berukuran besar menjadi beberapa halaman kecil supaya lebih mudah dikelola? Kamu bisa menggunakan teknik pagination, lho! Pagination membantu menampilkan data dalam jumlah yang banyak, seperti daftar produk, postingan blog, atau lainnya dengan cara terpisah dalam beberapa halaman. Simak, yuk caranya, Sob!

Artikel ini akan menggunakan data pada aplikasi yang sudah dibuat pada seri artikel Tutorial Menambah Data dan Menampilkan Data dari Database di Laravel. Jadi, pastikan kamu sudah menyiapkan aplikasi berbasis Laravel yang ingin diberi fitur pagination.

Step 1: Membuat Model

Karena di artikel sebelumnya sudah membuat tabel buku dan mengisinya dengan dummy data. Di sini hanya perlu membuat model tabel tersebut menggunakan perintah berikut:

				
					php artisan make:model Buku

Setelah menjalankan perintah membuat model buku hasilnya berupa file model Buku.php di dalam folder app/Models/.

Edit file model Buku.php dan sesuaikan kolomnya dengan yang ada di database.

				
					<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Buku extends Model
{
    use HasFactory;

    protected $table = 'buku';
    protected $fillable = [
        'id',
        'judul',
        'penulis',
        'tahun_terbit',
        'penerbit'
    ];
}

Step 2: Membuat Factory untuk Data Faker

Kalau tabel buku kamu masih belum terisi data, kamu bisa menggunakan teknik Seeder atau Faker untuk mengisi menggunakan data dummy. Silahkan ikuti cara membuat Seeder dan Faker pada artikel Database Seeder dan Faker pada Laravel.

Step 3: Membuat Pagination pada Controller

Untuk menangani proses mengambil data dan menampilkannya di browser menggunakan pagination, kamu perlu membuat controller terlebih dahulu.

				
					php artisan make:controller PaginateController

Kemudian buka file PaginateController.php di folder app/Http/Controllers/ dan tambahkan baris kode di bawah ini untuk mengambil 5 data di satu halaman.

				
					<?php

namespace App\Http\Controllers;

use App\Models\Buku;
use Illuminate\Http\Request;

class PaginateController extends Controller
{
    public function index()
    {
        // Ambil data buku dengan pagination
        $buku = Buku::paginate(5); // 5 item per halaman

        // Kirim data ke view
        return view('buku.index', compact('buku'));
    }
}

Step 4: Membuat Route untuk Menampilkan Data

Pada artikel ini ingin tetap mengakses data melalui route /buku. Jadi, perlu memodifikasi metode route /buku di routes/web.php yang menampilkan daftar buku menjadi:

				
					use App\Http\Controllers\PaginateController;

Route::get('/buku', [PaginateController::class, 'index']);

Kamu bisa menentukan route lain untuk mengakses data sesuai kebutuhan.

Step 5: Mengedit View Buku untuk Menampilkan Data

Buka file view buku yang menampilkan data buku pada resources/views/buku/index.blade.php dan modifikasi menjadi seperti berikut:

<!DOCTYPE html>

<head>

<style>

table {

border-collapse: collapse;

width: 80%;

margin: 20px auto;

}

th, td {

border: 1px solid #ddd;

padding: 8px;

}

th {

background: #007BFF;

color: white;

}

a {

text-decoration: none;

color: #007BFF;

}

h2 {

text-align: center;

margin-top: 20px;

}

</style>

</head>

<body>

<h2>Daftar Buku</h2>

<p style=”text-align:center;”><a href=”/buku/tambah”>+ Tambah Buku Baru</a></p>

<table>

<thead>

<tr>

<th>Judul</th>

<th>Penulis</th>

<th>Tahun Terbit</th>

<th>Penerbit</th>

<th>Action</th>

</tr>

</thead>

<tbody>

@foreach($buku as $index => $b)

<tr>

<td>{{ $loop->iteration + ($buku->currentPage() – 1) * $buku->perPage() }}</td>

<td>{{ $b->judul }}</td>

<td>{{ $b->penulis }}</td>

<td>{{ $b->tahun_terbit }}</td>

<td>{{ $b->penerbit }}</td>

<td>

<a href=”/buku/edit/{{ $b->id }}”>Edit</a> |

<a href=”/buku/hapus/{{ $b->id }}” onclick=”return confirm(‘Yakin ingin menghapus?’)”>Hapus</a>

</td>

</tr>

@endforeach

</tbody>

</table>

<!– Pagination –>

</div>

</body>

</html>

Step 6: Uji Coba di Browser

Kamu akses aplikasi Laravel kamu di browser melalui URL http://127.0.0.1:8000/buku dengan menjalankan perintah:

				
					php artisan serve

Tampilan daftar buku setelah menggunakan fitur pagination yang menampilkan 5 data pada satu halaman.

Dengan pagination, kamu bisa menavigasi konten dengan lebih mudah, tampilan tetap bersih, dan cepat tanpa harus memuat data sekaligus.

Kalau ada yang masih bikin bingung, jangan ragu hubungi Tim Support Jagoan Hosting via Live Chat atau Open Ticket, Sob!