BAB 28: Menampilkan Semua Data

Membuat halaman listing yang menampilkan semua data dari database menggunakan Eloquent dan Blade.

Tabel catatan sudah terbukti ada di database. Sekarang kita mulai membangun antarmuka yang bisa diakses lewat browser — dimulai dari fitur paling mendasar: halaman yang menampilkan semua catatan.

Tiga komponen harus bekerja bersama untuk membuat halaman ini berfungsi: route yang menangkap URL, controller yang mengambil data dari database, dan view yang merender hasilnya menjadi HTML.

Membuat Controller

Buat controller dengan Artisan:

php artisan make:controller CatatanController

File baru muncul di app/Http/Controllers/CatatanController.php. Isinya hanya class kosong. Tambahkan method index untuk menangani halaman listing:

// app/Http/Controllers/CatatanController.php
<?php

namespace App\Http\Controllers;

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

class CatatanController extends Controller
{
    public function index()
    {
        $catatans = Catatan::latest()->get();

        return view('catatan.index', compact('catatans'));
    }
}

Catatan::latest()->get() memanggil model Catatan yang sudah kita buat di BAB 26, mengambil semua baris dari tabel catatan dan mengurutkannya berdasarkan created_at terbaru di atas. Hasilnya adalah sebuah Collection yang dikirim ke view dengan nama variabel $catatans.

Mendaftarkan Route

Buka routes/web.php dan tambahkan route untuk halaman index:

// routes/web.php
<?php

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

Route::get('/', function () {
    return view('welcome');
});

Route::get('/catatan', [CatatanController::class, 'index'])->name('catatan.index');

URL /catatan sekarang terhubung ke method index di CatatanController. Parameter ->name('catatan.index') memberi nama pada route ini sehingga kita bisa merujuknya dari view menggunakan route('catatan.index') tanpa harus hardcode URL-nya.

Membuat Layout Utama

Sebelum membuat view catatan, kita perlu satu layout utama yang bisa dipakai oleh semua halaman aplikasi. Ini menghindari duplikasi HTML boilerplate di setiap view.

Buat folder resources/views/layouts/, lalu buat file app.blade.php di dalamnya:

{{-- resources/views/layouts/app.blade.php --}}
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'Manajemen Catatan')</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="bg-gray-50 min-h-screen">
    <nav class="bg-white border-b border-gray-200 px-6 py-4">
        <div class="max-w-4xl mx-auto flex justify-between items-center">
            <a href="{{ route('catatan.index') }}" class="font-semibold text-gray-800">
                Manajemen Catatan
            </a>
        </div>
    </nav>

    <main class="max-w-4xl mx-auto px-6 py-8">
        @if (session('success'))
            <div class="mb-4 p-4 bg-green-50 border border-green-200 text-green-700 rounded">
                {{ session('success') }}
            </div>
        @endif

        @yield('content')
    </main>
</body>
</html>

@yield('title', 'Manajemen Catatan') adalah slot untuk judul halaman — jika view yang menggunakan layout ini tidak mendefinisikan section title, nilai default 'Manajemen Catatan' dipakai. @yield('content') adalah slot utama tempat konten setiap halaman disisipkan.

Blok session('success') menampilkan pesan sukses dari session flash — ini akan berguna saat kita menambahkan fitur create dan update di bab-bab berikutnya.

Membuat View Index

Buat folder resources/views/catatan/, lalu buat file index.blade.php:

{{-- resources/views/catatan/index.blade.php --}}
@extends('layouts.app')

@section('title', 'Daftar Catatan')

@section('content')
    <h1 class="text-2xl font-bold text-gray-900 mb-6">Catatan Saya</h1>

    @if ($catatans->isEmpty())
        <p class="text-gray-500">Belum ada catatan. Mulai buat catatan pertamamu.</p>
    @else
        <div class="space-y-3">
            @foreach ($catatans as $catatan)
                <div class="bg-white p-4 rounded border border-gray-200">
                    <h2 class="font-medium text-gray-900">{{ $catatan->judul }}</h2>
                    <span class="text-xs text-gray-500 capitalize">
                        Prioritas: {{ $catatan->prioritas }}
                    </span>
                </div>
            @endforeach
        </div>
    @endif
@endsection

View ini menggunakan @extends('layouts.app') untuk mewarisi layout yang baru dibuat, lalu mengisi dua section: title untuk judul tab browser, dan content untuk konten utama halaman. Untuk saat ini view hanya menampilkan judul dan prioritas setiap catatan — tombol aksi dan link navigasi akan ditambahkan seiring fitur-fitur berikutnya dibangun.

Menguji di Browser

Pastikan development server berjalan, lalu buka http://localhost:8000/catatan. Karena tabel masih kosong, tampilan yang muncul adalah pesan “Belum ada catatan. Mulai buat catatan pertamamu.” — itu pertanda halaman bekerja dengan benar.

Halaman listing catatan di browser menampilkan pesan tabel kosong

Gambar 1: Halaman /catatan saat tabel masih kosong

Halaman listing sudah berfungsi, tapi masih kosong. Untuk bisa melihat data sungguhan, kita perlu fitur untuk menambahkan catatan baru — yang akan dibangun di bab berikutnya.