Menampilkan daftar dan detail catatan

Kita lanjutkan proyek dari bab 3. Saat ini halaman /catatan sudah menampilkan judul-judul dari database. Sekarang setiap judul kita jadikan tautan ke halaman detailnya.

Halaman daftar

Perbarui resources/views/notes/index.blade.php:

<x-layout title="Daftar catatan">
    <h1>Daftar catatan</h1>

    @if ($notes->isEmpty())
        <p>Belum ada catatan. Tulis yang pertama!</p>
    @else
        <ul>
            @foreach ($notes as $note)
                <li>
                    <a href="{{ route('catatan.show', $note) }}">{{ $note->title }}</a>
                    <small>{{ $note->created_at->diffForHumans() }}</small>
                </li>
            @endforeach
        </ul>
    @endif
</x-layout>

Dua hal baru. $notes->isEmpty() adalah cara bertanya "kosong?" pada hasil query. Dan route('catatan.show', $note): kita memberikan seluruh object catatan, dan Laravel cukup pintar mengambil id-nya untuk mengisi {id} di alamat. diffForHumans() menghasilkan teks seperti "2 jam yang lalu".

Halaman detail

Di controller, ganti method show. Perhatikan parameternya berubah dari $id menjadi Note $note:

public function show(Note $note)
{
    return view('notes.show', ['note' => $note]);
}

Ini namanya route model binding: karena parameter route bernama {id} tidak cocok dengan $note, ubah dulu route-nya menjadi /catatan/{note}. Begitu namanya cocok, Laravel mengambil sendiri catatan dengan id tersebut dari database. Kalau tidak ada, pengunjung langsung mendapat halaman 404 tanpa kamu menulis apa-apa.

Route::get('/catatan/{note}', [NoteController::class, 'show'])->name('catatan.show');

Lalu buat resources/views/notes/show.blade.php:

<x-layout :title="$note->title">
    <h1>{{ $note->title }}</h1>
    <p>{{ $note->body }}</p>
    <p><a href="{{ route('catatan.index') }}">Kembali</a></p>
</x-layout>

Titik dua di :title berarti nilainya ekspresi PHP, bukan teks biasa. Buka daftar, klik sebuah judul, dan halaman detailnya tampil. Coba juga buka /catatan/999 untuk melihat 404 bawaan Laravel.

Kalau muncul error Attempt to read property "title" on null atau sejenisnya, biasanya nama parameter di route dan di method tidak sama. Keduanya harus note.