Pagination adalah fitur penting dalam aplikasi web yang menampilkan daftar data yang banyak. Laravel membuat proses ini sangat mudah dan otomatis. Tutorial ini akan memandu Anda dalam mengimplementasikan pagination di aplikasi Laravel Anda.
Apa Itu Pagination?
Pagination adalah proses membagi konten (misalnya, daftar produk, artikel, atau pengguna) ke dalam beberapa halaman. Ini sangat penting untuk menjaga performa aplikasi karena Anda tidak perlu memuat semua data sekaligus, yang bisa menjadi beban besar untuk server dan browser.
Langkah 1: Menyiapkan Controller
Pertama, kita akan menggunakan metode Eloquent untuk mengambil data dengan batasan halaman. Buka app/Http/Controllers/ dan tambahkan atau ubah metode yang ada untuk menggunakan paginate().
Pada contoh ini, kita akan membuat controller baru dan model baru untuk menampilkan daftar produk.
Buat model dan controller baru jika belum ada:
php artisan make:model Product -m
php artisan make:controller ProductController
Isi app/Models/Product.php dengan kode standar (seperti pada tutorial CRUD sebelumnya).
Isi app/Http/Controllers/ProductController.php dengan kode berikut:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Product; // Pastikan Anda mengimpor model Product
class ProductController extends Controller
{
public function index()
{
// Mengambil 10 produk per halaman
$products = Product::paginate(10);
return view('products.index', compact('products'));
}
}
Penjelasan Kode
use App\Models\Product;: Kita mengimpor modelProduct.$products = Product::paginate(10);: Ini adalah inti dari pagination. Metodepaginate(10)akan secara otomatis:- Mengambil hanya 10 baris data dari tabel
products. - Menambahkan informasi yang dibutuhkan untuk pagination (seperti jumlah total item, halaman saat ini, dan URL).
- Mengatur offset dan limit SQL secara otomatis.
- Mengambil hanya 10 baris data dari tabel
Langkah 2: Menyiapkan View
Sekarang, kita akan membuat view untuk menampilkan data dan link pagination. Buat file resources/views/products/index.blade.php.
Kode di view akan terlihat sangat mirip dengan view yang digunakan untuk menampilkan semua data, dengan tambahan kode untuk menampilkan link pagination.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daftar Produk (Pagination)</title>
<style>
.pagination {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Daftar Produk</h1>
<table>
<thead>
<tr>
<th>ID</th>
<th>Nama</th>
<th>Deskripsi</th>
</tr>
</thead>
<tbody>
@foreach ($products as $product)
<tr>
<td>{{ $product->id }}</td>
<td>{{ $product->name }}</td>
<td>{{ $product->description }}</td>
</tr>
@endforeach
</tbody>
</table>
<div class="pagination">
{{ $products->links() }}
</div>
</body>
</html>
Penjelasan Kode
@foreach ($products as $product): Kita melakukan perulangan pada objek$productsseperti biasa. Meskipun$productsadalah objek yang di-paginate, Anda masih bisa mengulanginya seperti array atau collection biasa.{{ $products->links() }}: Ini adalah fitur ajaib Laravel. Metodelinks()akan menghasilkan seluruh HTML untuk link pagination, seperti “Previous”, “Next”, dan nomor halaman. Ini akan secara otomatis menyesuaikan URL sesuai dengan halaman saat ini.
Langkah 3: Menambahkan Route
Terakhir, kita perlu membuat route yang akan mengarahkan permintaan ke metode index pada ProductController.
Buka file routes/web.php dan tambahkan route berikut:
use App\Http\Controllers\ProductController;
use Illuminate\Support\Facades\Route;
Route::get('/products', [ProductController::class, 'index']);
Selesai!
Sekarang, jalankan server Laravel Anda:
php artisan serve
Kemudian, akses http://localhost:8000/products di browser Anda. Anda akan melihat 10 produk pertama dari tabel products (asumsi ada lebih dari 10 data). Di bagian bawah halaman, Anda akan melihat link pagination yang dapat Anda klik untuk berpindah halaman.
Laravel juga menyediakan fitur untuk menyesuaikan tampilan pagination. Anda bisa menggunakan Blade untuk membuat template pagination kustom atau menggunakan tema Bootstrap yang sudah tersedia.
Dengan pagination, aplikasi Anda akan menjadi lebih efisien dan ramah pengguna, terutama saat berhadapan dengan data dalam jumlah besar.
