#9: Melihat Daftar Kategori (Read/Index) – Menampilkan Semua Kategori
Halo, Detektif Data!
Di tutorial sebelumnya, kita sudah membuat form untuk menambah kategori dan menyimpannya ke database. Sekarang kita akan fokus pada bagian Read atau Index, yaitu menampilkan semua data kategori yang sudah ada. Meskipun kita sudah memiliki halaman daftar kategori, kita akan memperbaikinya agar lebih rapi, informatif, dan siap untuk dikembangkan dengan fitur edit dan hapus nanti. Kita juga akan belajar tentang paginasi (pembagian halaman) agar jika nanti ada banyak kategori, tampilan tidak kepanjangan.
- Memahami cara kerja method
index()di controller. - Mengambil data dari database menggunakan model
Category. - Mengirim data ke view dan menampilkannya dengan perulangan
@foreachBlade. - Menambahkan fitur paginasi (pembagian halaman) agar tampilan rapi.
- Menambahkan informasi jumlah data dan pesan jika data kosong.
Langkah 1: Memperbaiki Method index() di CategoryController
Buka file app/Http/Controllers/CategoryController.php. Kita akan mengubah method index() agar menggunakan paginasi, sehingga data ditampilkan per halaman (misal 5 data per halaman).
use App\Models\Category;
use Illuminate\Http\Request;
public function index()
{
// Ambil semua data kategori dengan paginasi 5 per halaman
$categories = Category::paginate(5);
// Kirim ke view 'kategori'
return view('kategori', compact('categories'));
}Penjelasan: Category::paginate(5) akan mengambil data dari tabel categories dan membaginya menjadi beberapa halaman, masing-masing berisi 5 data. Laravel akan otomatis menambahkan parameter ?page=2 di URL.
Category::all(). Tapi paginasi lebih disarankan karena lebih ramah untuk tampilan dan performa.Langkah 2: Menyempurnakan View kategori.blade.php
Kita akan memperbaiki tampilan halaman daftar kategori agar lebih menarik dan informatif. Tambahkan juga link paginasi otomatis dari Laravel.
Buka file resources/views/kategori.blade.php dan ganti dengan kode berikut:
<!DOCTYPE html>
<html>
<head>
<title>Daftar Kategori Berita</title>
<style>
body {
font-family: 'Segoe UI', Arial, sans-serif;
margin: 20px;
background: #f0f2f5;
}
.container {
max-width: 800px;
margin: auto;
background: white;
padding: 20px;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h1 {
color: #e67e22;
}
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
th, td {
border: 1px solid #ddd;
padding: 10px;
text-align: left;
}
th {
background-color: #e67e22;
color: white;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
.btn {
display: inline-block;
background: #007bff;
color: white;
padding: 8px 16px;
text-decoration: none;
border-radius: 5px;
margin-bottom: 15px;
}
.btn:hover {
background: #0056b3;
}
.alert-success {
background: #d4edda;
color: #155724;
padding: 10px;
border-radius: 5px;
margin-bottom: 15px;
}
.pagination {
margin-top: 20px;
text-align: center;
}
.empty {
text-align: center;
color: #777;
padding: 20px;
}
.badge-count {
background: #e67e22;
color: white;
padding: 2px 8px;
border-radius: 20px;
font-size: 0.8rem;
margin-left: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>Daftar Kategori Berita
<span class="badge-count">{{ $categories->total() }} Kategori</span>
</h1>
@if (session('success'))
<div class="alert-success">
✅ {{ session('success') }}
</div>
@endif
<a href="{{ route('kategori.create') }}" class="btn">+ Tambah Kategori Baru</a>
@if($categories->count() > 0)
<table>
<thead>
<th>ID</th>
<th>Nama Kategori</th>
<th>Slug</th>
<th>Dibuat Pada</th>
<th>Aksi</th>
</thead>
<tbody>
@foreach ($categories as $category)
{{ $category->id }}
{{ $category->name }}
{{ $category->slug }}
{{ $category->created_at->format('d M Y') }}
<!-- Tombol Edit dan Hapus akan ditambahkan nanti -->
<span style="color: #999;">Belum ada aksi</span>
@endforeach
</tbody>
</table>
<!-- Tampilkan link paginasi -->
<div class="pagination">
{{ $categories->links() }}
</div>
@else
<div class="empty">
🧺 Belum ada kategori. Yuk tambah kategori pertama!
</div>
@endif
</div>
</body>
</html>Penjelasan tambahan:
$categories->total()→ menampilkan total jumlah data (misal: 12 kategori).$categories->links()→ menampilkan navigasi halaman (1, 2, 3, ...) secara otomatis.$category->created_at->format('d M Y')→ memformat tanggal menjadi lebih rapi.- Kolom "Aksi" kita siapkan untuk tombol edit/hapus nanti, sekarang masih placeholder.
- Pesan jika data kosong akan ditampilkan dengan emoji keranjang.
Langkah 3: Uji Coba Paginasi
Pastikan server berjalan. Buka http://localhost:8000/kategori. Jika kamu sudah memiliki lebih dari 5 kategori, kamu akan melihat navigasi halaman di bagian bawah. Coba klik halaman 2, URL akan berubah menjadi ?page=2. Laravel secara otomatis menangani pengambilan data yang sesuai.
Langkah 4: Menambahkan Fitur Pencarian Sederhana (Opsional)
Kita bisa menambahkan kotak pencarian agar admin bisa mencari kategori berdasarkan nama. Ini akan menjadi pengantar untuk fitur yang lebih kompleks nanti.
Ubah method index() di CategoryController menjadi:
public function index(Request $request)
{
$search = $request->get('search');
if ($search) {
$categories = Category::where('name', 'like', "%{$search}%")
->orWhere('slug', 'like', "%{$search}%")
->paginate(5);
} else {
$categories = Category::paginate(5);
}
return view('kategori', compact('categories', 'search'));
}Kemudian tambahkan form pencarian di view kategori.blade.php, tepat di bawah judul:
<form method="GET" action="{{ route('kategori.index') }}" style="margin-bottom: 20px;">
<input type="text" name="search" placeholder="Cari kategori..." value="{{ request('search') }}"
style="padding: 8px; width: 70%; border: 1px solid #ddd; border-radius: 5px;">
<button type="submit" style="padding: 8px 16px; background: #28a745; color: white; border: none; border-radius: 5px;">Cari</button>
@if(request('search'))
<a href="{{ route('kategori.index') }}" style="margin-left: 10px; color: #dc3545;">Reset</a>
@endif
</form>Sekarang pengguna bisa mencari kategori berdasarkan nama atau slug. Hasil pencarian juga akan tetap menggunakan paginasi.
Memahami Konsep Read/Index
- Read (Index) adalah operasi untuk menampilkan daftar data. Ini adalah halaman yang paling sering dikunjungi oleh admin untuk melihat apa saja yang sudah ada.
- Di Laravel, kita biasanya menampilkan data dalam bentuk tabel dengan header yang jelas, dan menyediakan tombol aksi (edit/hapus) untuk setiap baris.
- Paginasi sangat penting jika data sudah banyak (ratusan atau ribuan). Laravel menyediakan paginasi yang mudah dengan
paginate(). - Pencarian membantu admin menemukan data tertentu tanpa harus scroll panjang.
Ringkasan Hari Ini
- ✅ Kita mempelajari bahwa method
index()di controller bertugas mengambil data dan menampilkannya. - ✅ Kita menggunakan
paginate()untuk membagi data ke beberapa halaman. - ✅ Kita menyempurnakan tampilan tabel dengan informasi tambahan seperti jumlah total dan format tanggal.
- ✅ Kita menambahkan paginasi otomatis dengan
$categories->links(). - ✅ Kita juga menambahkan fitur pencarian sederhana untuk memudahkan mencari kategori.
Apa Selanjutnya?
Sekarang kita sudah memiliki halaman daftar kategori yang lengkap dengan paginasi dan pencarian. Selanjutnya kita akan melengkapi fitur CRUD kategori dengan Edit (Update) dan Hapus (Delete). Setelah itu, kita akan mulai mengerjakan fitur utama: mengelola berita (news). Terus semangat!
📝 Seri Tutorial Laravel 13 Pemula – Proyek Web Berita
✨ Selanjutnya: #10: Mengubah Data yang Salah (Edit & Update) – Belajar Mengedit Kategori