View dengan Blade

View adalah file di resources/views yang menghasilkan HTML. Laravel memakai Blade: HTML biasa ditambah beberapa tanda khusus untuk menampilkan data dan mengulang. File-nya berakhiran .blade.php.

View pertama

Buat file resources/views/notes/index.blade.php (buat folder notes dulu):

<h1>Daftar catatan</h1>
<p>Ada {{ $jumlah }} catatan.</p>

Dua kurung kurawal berarti "tampilkan nilai ini". Blade otomatis mengamankan isinya, jadi kalau ada pengguna iseng memasukkan tag HTML, tag itu ditampilkan sebagai teks, bukan dijalankan. Sekarang ubah method index di controller supaya mengirim view ini beserta datanya:

public function index()
{
    return view('notes.index', ['jumlah' => 3]);
}

Perhatikan: nama view memakai titik untuk folder, jadi notes.index berarti notes/index.blade.php. Data dikirim sebagai array, dan setiap kuncinya menjadi variabel di view. Buka /catatan, dan kalimat "Ada 3 catatan." muncul.

Mengulang dan bercabang

Kirim array dari controller:

return view('notes.index', [
    'notes' => ['Belanja mingguan', 'Ide tulisan', 'Nomor tukang AC'],
]);

Lalu di view:

<h1>Daftar catatan</h1>

@if (count($notes) === 0)
    <p>Belum ada catatan.</p>
@else
    <ul>
        @foreach ($notes as $note)
            <li>{{ $note }}</li>
        @endforeach
    </ul>
@endif

@if, @else, @foreach: semuanya diawali @, dan di dalamnya kamu menulis PHP seperti biasa. Coba kosongkan array-nya untuk melihat cabang "Belum ada catatan" bekerja.

Layout: kerangka yang dipakai semua halaman

Setiap halaman butuh <html>, <head>, judul, dan menu yang sama. Daripada menyalinnya ke tiap file, buat satu komponen layout. Buat file resources/views/components/layout.blade.php:

<!doctype html>
<html lang="id">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ $title ?? 'Catatan' }}</title>
</head>
<body>
    <nav>
        <a href="{{ route('catatan.index') }}">Semua catatan</a>
    </nav>
    <main>
        {{ $slot }}
    </main>
</body>
</html>

{{ $slot }} adalah tempat isi halaman akan diselipkan. Sekarang bungkus view notes/index.blade.php dengan komponen itu:

<x-layout title="Daftar catatan">
    <h1>Daftar catatan</h1>
    ... isi yang tadi ...
</x-layout>

Tag <x-layout> merujuk ke file components/layout.blade.php; atribut title menjadi variabel $title di dalamnya. Muat ulang halaman dan lihat kode sumbernya di browser: sekarang ia HTML lengkap dengan judul dan menu.

Tiga dari empat huruf MVC sudah kamu pegang. Tinggal model: cara mengambil data sungguhan dari database.