Sinau Uki

07. Cara Kerja Laravel dan Blade ​

Pada materi-materi sebelumnya, kita telah mempelajari komponen-komponen utama Laravel secara terpisah: mulai dari struktur MVC, rute URL, controller, model Eloquent, hingga sintaks template engine Blade. Sekarang, kita akan merangkai seluruh potongan konsep tersebut untuk memahami gambaran utuh dari siklus hidup permintaan web: bagaimana Laravel dan Blade bekerja sama sejak pengguna menekan tombol Enter di browser hingga halaman HTML selesai ditampilkan.

A. Pengantar ​

Memahami fungsi masing-masing komponen seperti Routing atau Controller secara terisolasi sering kali belum cukup bagi seorang pengembang web. Pertanyaan paling esensial dalam arsitektur web adalah: Bagaimana alur perjalanan data dari saat browser mengirimkan sinyal hingga sebuah data buku perpustakaan terpampang rapi di layar monitor?

Materi ini akan mengupas tuntas siklus hidup permintaan (Request Lifecycle) pada Laravel 13.x Fullstack. Kita akan mengambil skenario nyata ketika seorang pengunjung mengakses alamat katalog buku: http://127.0.0.1:8000/buku

Melalui skenario ini, kita akan melacak perjalanan request mulai dari lapisan server, entry point aplikasi, pipeline middleware, pencocokan rute, pemrosesan controller, interaksi model database, hingga proses kompilasi dan rendering dokumen HTML oleh mesin Blade.

B. Memahami HTTP Request dan HTTP Response ​

Seluruh komunikasi di internet beroperasi berdasarkan protokol dasar yang disebut HTTP (Hypertext Transfer Protocol). Komunikasi ini selalu berbentuk pasangan dua arah: Permintaan (Request) dan Jawaban (Response).

1. HTTP Request (Permintaan dari Klien) ​

Ketika Anda membuka browser dan mengetik alamat web, browser Anda merangkai sebuah pesan teks terstruktur bernama HTTP Request.

Pesan request ini memiliki beberapa unsur utama:

  • HTTP Method (Kata Kerja Aksi): Menentukan maksud permintaan.
    • GET: Meminta atau membaca data (misalnya saat membuka halaman /buku).
    • POST: Mengirimkan data baru (misalnya saat mengirimkan formulir tambah buku atau login).
    • PUT / PATCH: Memperbarui data yang sudah ada.
    • DELETE: Menghapus data.
  • Request URL / URI: Alamat spesifik sumber daya yang dituju (contoh: /buku atau /anggota/1).
  • Headers: Informasi konteks mengenai klien, seperti tipe browser (User-Agent), format data yang diterima (Accept), dan informasi cookie sesi.
  • Request Body (Muatan Data): Data tambahan yang dikirimkan ke server (umumnya ada pada method POST, berisi input form seperti judul buku dan nama penulis).

2. HTTP Response (Jawaban dari Server) ​

Setelah memproses permintaan, server web mengirimkan kembali pesan terstruktur yang disebut HTTP Response.

Unsur utama pada pesan response meliputi:

  • HTTP Status Code: Kode angka standar yang menunjukkan hasil pemrosesan:
    • 200 OK: Permintaan berhasil diproses dan data halaman tersedia.
    • 302 Found: Permintaan diarahkan ke halaman lain (redirect), misalnya setelah sukses login.
    • 404 Not Found: Halaman atau rute yang diminta tidak ditemukan di server.
    • 500 Internal Server Error: Terjadi kesalahan atau bug pada kode program server.
  • Response Headers: Metadata respons, seperti tipe konten (Content-Type: text/html) dan pengaturan cookie.
  • Response Body: Isi konten utama yang diminta. Pada aplikasi Laravel Fullstack, isi body ini berupa dokumen teks HTML murni yang siap ditampilkan oleh browser.

C. Mengenal Entry Point Laravel ​

Ketika browser mengirimkan request ke server web (seperti Apache di XAMPP atau PHP built-in server via Artisan), seluruh lalu lintas permintaan web publik diarahkan ke satu berkas tunggal yang menjadi gerbang utama:

public/index.php

Berkas public/index.php bertindak sebagai Entry Point (pintu masuk) resmi bagi seluruh aplikasi Laravel.

1. Peran public/index.php ​

Jika Anda membuka berkas public/index.php, kodenya sangat ringkas. Tugas utamanya adalah:

  1. Menghitung waktu mulai eksekusi aplikasi (benchmark).
  2. Memuat autoloader Composer (vendor/autoload.php) agar seluruh class dan pustaka PHP dapat dipanggil secara otomatis.
  3. Memuat konfigurasi dan instance aplikasi dari berkas bootstrap/app.php.
  4. Menangkap HTTP Request yang masuk melalui class Illuminate\Http\Request::capture().
  5. Meneruskan request tersebut ke dalam inti aplikasi Laravel untuk diproses, kemudian mengirimkan response kembali ke browser pengunjung.

2. Peran Modern bootstrap/app.php pada Laravel 13 ​

Pada versi terdahulu (Laravel 10 ke bawah), konfigurasi middleware dan penanganan exception tersebar di dalam berkas terpisah seperti app/Http/Kernel.php.

Pada arsitektur modern Laravel 13.x, seluruh konfigurasi dasar aplikasi telah disederhanakan dan dipusatkan di dalam berkas: bootstrap/app.php

php
<?php

use Illuminate\Foundation\Application;
use Illuminate\Foundation\Configuration\Exceptions;
use Illuminate\Foundation\Configuration\Middleware;

return Application::configure(basePath: dirname(__DIR__))
    ->withRouting(
        web: __DIR__.'/../routes/web.php',
        commands: __DIR__.'/../routes/console.php',
        health: '/up',
    )
    ->withMiddleware(function (Middleware $middleware): void {
        // Konfigurasi middleware global, grup web, dan alias rute
    })
    ->withExceptions(function (Exceptions $exceptions): void {
        // Konfigurasi penanganan error kustom
    })->create();

Berkas bootstrap/app.php ini mengonfigurasi jalur pemuatan rute (routes/web.php), lapisan keamanan middleware, serta membangun objek aplikasi (Application instance) sebelum mulai menerima permintaan pengguna.

D. Proses Bootstrap Laravel ​

Sebelum Laravel dapat menentukan rute mana yang harus dijalankan, framework harus melewati tahap inisialisasi internal yang disebut Proses Bootstrap.

Proses bootstrap adalah tahap persiapan lingkungan kerja aplikasi. Ibarat sebuah perpustakaan yang menyalakan lampu, membuka pintu gerbang, dan menyiapkan meja sirkulasi sebelum pengunjung pertama diizinkan masuk.

Hal-hal yang terjadi selama proses bootstrap:

  1. Inisialisasi Service Container: Mempersiapkan wadah terpusat (Dependency Injection Container) yang bertugas mencatat dan menghubungkan seluruh objek di dalam framework.
  2. Pemuatan Berkas Konfigurasi & Environment: Membaca pengaturan dari berkas .env (seperti koneksi database MySQL, nama aplikasi, dan URL dasar).
  3. Registrasi Service Providers: Menjalankan provider bawaan framework untuk mendaftarkan layanan penting, seperti koneksi basis data, manajemen sesi (session), autentikasi, enkripsi, dan mesin template Blade.
  4. Booting Layanan: Mengaktifkan seluruh komponen yang telah didaftarkan agar siap digunakan oleh controller dan model.

Setelah proses bootstrap selesai, aplikasi Laravel berada dalam kondisi siap tempur untuk menyaring dan memproses request yang masuk.

E. Routing: Menentukan Tujuan Request ​

Setelah aplikasi siap, request diserahkan kepada komponen Router.

Tugas utama Router adalah mencocokkan kombinasi HTTP Method dan Alamat URL dari request pengunjung dengan daftar rute yang telah didaftarkan pada berkas routes/web.php.

Contoh pendaftaran rute pada routes/web.php:

php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\BookController;

Route::get('/buku', [BookController::class, 'index']);

Cara Kerja Router: ​

  1. Pengunjung meminta URL /buku dengan method GET.
  2. Router menelusuri daftar rute di routes/web.php dari baris teratas ke bawah.
  3. Ketika ditemukan definisi Route::get('/buku', ...), Router menandai bahwa target eksekusinya adalah class BookController pada method index().
  4. Jika rute tidak ditemukan: Jika pengguna meminta URL yang belum terdaftar (misalnya /buku-kuno), Router langsung menghentikan proses dan mengembalikan HTTP Response dengan status code 404 Not Found.

F. Middleware: Memeriksa dan Menyaring Request ​

Sebelum request yang cocok benar-benar sampai ke dalam method Controller, request tersebut harus melewati satu atau beberapa pos pemeriksaan yang disebut Middleware.

Ibarat pos keamanan di depan pintu masuk gedung perpustakaan: pengunjung yang tidak memiliki kartu anggota atau tasnya membawa benda terlarang akan dihentikan sebelum sempat melangkah ke ruang koleksi buku.

Peran dan Contoh Middleware: ​

  1. Memeriksa Status Autentikasi: Memastikan apakah pengguna sudah login sebelum boleh membuka menu peminjaman. Jika belum login, middleware langsung memotong alur dan mengarahkan (redirect 302) ke halaman /login.
  2. Memverifikasi Hak Akses (Role): Memastikan hanya petugas atau admin yang dapat mengakses rute tambah koleksi buku.
  3. Membaca dan Menulis Sesi: Membaca cookie sesi pengguna dari browser agar status login dan keranjang buku tetap tersimpan.
  4. Proteksi Keamanan CSRF: Memastikan permintaan pengubahan data (POST) menyertakan token keamanan yang sah.

Grup Middleware web ​

Secara default, seluruh rute yang didefinisikan di dalam routes/web.php otomatis dibungkus oleh grup middleware bernama web. Grup ini secara otomatis mengaktifkan fitur pembacaan cookie, enkripsi sesi, proteksi CSRF, serta penanganan pesan kilat (flash messages).

Setelah lolos dari seluruh lapisan middleware, request akhirnya tiba di tujuan utamanya: Controller.

G. Controller: Memproses Logika Aplikasi ​

Controller adalah pusat pengendali (traffic controller) dari sebuah aplikasi web. Controller bertugas menerima request, memanggil model database jika memerlukan data, menjalankan aturan logika bisnis, dan memutuskan tampilan view mana yang harus disajikan kepada pengguna.

Mari kita lihat contoh berkas controller perpustakaan: app/Http/Controllers/BookController.php

php
<?php

namespace App\Http\Controllers;

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

class BookController extends Controller
{
    /**
     * Menampilkan daftar seluruh koleksi buku.
     */
    public function index()
    {
        // 1. Ambil seluruh data buku melalui Model Eloquent
        $books = Book::all();

        // 2. Kirim data ke berkas tampilan Blade dan kembalikan respon
        return view('buku.index', compact('books'));
    }
}

Penjelasan Baris demi Baris: ​

  • class BookController extends Controller: Mendefinisikan class controller yang mewarisi fitur dasar controller Laravel.
  • public function index(): Method aksi yang ditunjuk oleh rute /buku.
  • $books = Book::all(): Menginstruksikan model Book untuk mengambil semua baris data buku dari tabel database.
  • compact('books'): Helper bawaan PHP untuk membuat array asosiatif ['books' => $books].
  • return view('buku.index', ...): Memanggil template Blade yang terletak di folder resources/views/buku/index.blade.php dan menyuntikkan data buku ke dalamnya.

H. Model dan Eloquent: Mengakses Database ​

Ketika controller membutuhkan data koleksi buku, controller tidak menulis kueri SQL mentah secara manual di dalam kodenya. Laravel menyediakan lapisan Object-Relational Mapping (ORM) yang sangat elegan bernama Eloquent.

Eloquent menjembatani tabel di basis data MySQL menjadi sebuah objek class PHP yang disebut Model.

Cara Kerja Book::all(): ​

  1. Controller memanggil method statis Book::all().
  2. Model Book secara otomatis mengenali bahwa dirinya terhubung dengan tabel bernama books pada database MySQL.
  3. Eloquent menyusun kueri SQL di balik layar: SELECT * FROM books; dan mengeksekusinya melalui koneksi PDO database.
  4. MySQL mengembalikan baris-baris data mentah.
  5. Eloquent membungkus baris data tersebut menjadi sebuah objek koleksi (Eloquent Collection) di mana setiap buku menjadi objek tersendiri dengan properti seperti $book->judul dan $book->penulis.
  6. Objek koleksi ini dikembalikan ke Controller untuk siap disalurkan ke tampilan Blade.

Catatan Penting

Interaksi dengan Model bersifat opsional. Tidak semua request membutuhkan database. Untuk halaman statis (seperti halaman tentang perpustakaan atau halaman syarat keanggotaan), Controller atau rute dapat langsung mengembalikan tampilan return view('tentang'); tanpa melibatkan Model sama sekali.

I. Blade View: Menghasilkan Tampilan ​

Setelah Controller memperoleh data dari Model, data tersebut diteruskan ke berkas template Blade: resources/views/buku/index.blade.php

blade
@extends('layouts.app')

@section('title', 'Katalog Buku')

@section('content')
    <h1>Daftar Koleksi Perpustakaan</h1>

    <div class="katalog-list">
        @forelse ($books as $book)
            <div class="card-buku">
                <h3>{{ $book->judul }}</h3>
                <p>Penulis: {{ $book->penulis }}</p>
            </div>
        @empty
            <p>Saat ini belum ada koleksi buku yang tersedia.</p>
        @endforelse
    </div>
@endsection

Peran Blade dalam Siklus Ini: ​

  • Menerima variabel $books yang dikirim dari controller melalui fungsi compact('books').
  • Menyediakan struktur tampilan HTML yang konsisten melalui pewarisan tata letak @extends('layouts.app').
  • Menjalankan logika visual perulangan @forelse untuk mencetak setiap kartu buku, atau menampilkan pesan alternatif jika data buku kosong.
  • Membersihkan data teks secara otomatis melalui sintaks kurung kurawal ganda {{ $book->judul }} guna menjamin keamanan antarmuka dari serangan XSS.

J. Proses Rendering dan Kompilasi Blade ​

Salah satu kesalahpahaman umum bagi pemula adalah mengira bahwa browser memahami kode Blade atau bahwa server mengompilasi ulang berkas template pada setiap kali halaman dimuat.

Mari kita luruskan perbedaan penting antara Kompilasi Template dan Rendering Tampilan:

1. Kompilasi Template (Compile Time) ​

  • Terjadi ketika berkas .blade.php baru pertama kali dibuka, atau ketika ada perubahan pada isi berkas tersebut.
  • Compiler Blade membaca directive seperti @forelse, @if, dan sintaks {{ }}, lalu menerjemahkannya menjadi kode PHP murni yang sangat efisien (misalnya mengubah @forelse menjadi perulangan foreach PHP murni dengan pengecekan empty()).
  • Hasil terjemahan ini disimpan sebagai berkas PHP biasa di direktori cache: storage/framework/views/
  • Berkat sistem cache ini, server tidak membuang waktu untuk mengompilasi ulang template pada request-request berikutnya.

2. Rendering Tampilan (Render Time) ​

  • Terjadi pada setiap request yang masuk.
  • Server PHP mengeksekusi berkas cache PHP tersebut dan memasukkan data variabel aktual milik pengguna yang sedang meminta halaman.
  • Hasil akhir dari proses rendering ini adalah string teks dokumen HTML murni.

3. Pemrosesan di Browser Klien (Client Time) ​

  • Browser pengunjung menerima string dokumen HTML tersebut dari web server.
  • Browser tidak pernah melihat simbol @foreach atau {{ $book->judul }}. Yang dilihat dan diproses oleh browser hanyalah tag HTML standar seperti <div>, <h1>, dan <p>.
  • Browser lalu meminta aset pendukung (berkas CSS dan JavaScript) untuk menghias tata letak dan memberikan interaktivitas.

K. Response Kembali ke Klien Browser ​

Setelah Blade selesai merender dokumen HTML, siklus aliran data bergerak kembali ke arah luar:

  1. Pembentukan Objek Response: Laravel membungkus string HTML hasil render ke dalam objek Illuminate\Http\Response dengan status code 200 OK dan header Content-Type: text/html; charset=UTF-8.
  2. Melewati Middleware Keluar: Respons melewati kembali lapisan middleware secara terbalik (misalnya untuk menyematkan header keamanan HTTP tambahan atau memperbarui token cookie sesi di browser).
  3. Pengiriman oleh Web Server: Web server (Apache/Artisan) mengirimkan paket data HTTP Response tersebut melalui jaringan internet atau jaringan lokal ke komputer pengunjung.
  4. Penyajian oleh Browser: Browser menerima paket data, mem-parsing elemen HTML dari atas ke bawah, menerapkan gaya CSS, dan menampilkan halaman katalog buku yang indah kepada pengguna.

L. Diagram Lengkap Request Lifecycle ​

Berikut adalah peta jalan visual lengkap yang merangkum seluruh siklus hidup sebuah permintaan web pada aplikasi Laravel 13 Fullstack:

Diagram di atas memperlihatkan dengan jelas bahwa:

  • Model dan Database hanya disentuh jika controller memang membutuhkan data dinamis.
  • Kompilasi Blade hanya dijalankan ketika berkas tampilan belum memiliki cache atau baru saja diperbarui.
  • Seluruh alur dirancang berurutan, aman, dan memisahkan tanggung jawab kode secara sangat terstruktur.

M. Praktik: Menelusuri Request Halaman Katalog Buku ​

Mari kita simulasikan penelusuran (trace) nyata ketika seorang anggota perpustakaan membuka URL: http://127.0.0.1:8000/buku

1. Titik Temu di Rute (routes/web.php) ​

Ketika URL /buku dipanggil, Laravel mencocokkannya dengan rute:

php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\BookController;

Route::get('/buku', [BookController::class, 'index']);

Tindakan Router: Memvalidasi method GET dan mengarahkan aliran eksekusi ke BookController@index.

2. Pemrosesan Logika di Controller (app/Http/Controllers/BookController.php) ​

Controller bertugas mengoordinasikan kebutuhan data:

php
namespace App\Http\Controllers;

use App\Models\Book;

class BookController extends Controller
{
    public function index()
    {
        // Meminta seluruh koleksi buku ke Model
        $books = Book::all();

        // Meneruskan data koleksi ke view buku/index.blade.php
        return view('buku.index', compact('books'));
    }
}

Tindakan Controller: Memanggil Book::all(), menerima objek koleksi buku, lalu memanggil fungsi view().

3. Pengambilan Data di Model (app/Models/Book.php) ​

Model berkomunikasi dengan tabel basis data:

php
namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Book extends Model
{
    // Terhubung secara otomatis dengan tabel 'books'
}

Tindakan Model: Eloquent mengeksekusi SELECT * FROM books; di MySQL dan mengembalikan kumpulan data buku ke controller.

(Catatan: Model dan migrasi tabel database ini akan kita bangun secara detail pada Modul 02).

4. Penggabungan Tampilan di Blade (resources/views/buku/index.blade.php) ​

Blade menerima array objek buku dan menggabungkannya ke dalam template:

blade
@extends('layouts.app')

@section('content')
    <h1>Katalog Buku Perpustakaan</h1>

    <ul>
        @forelse ($books as $book)
            <li>
                <strong>{{ $book->judul }}</strong> - Penulis: {{ $book->penulis }}
            </li>
        @empty
            <li>Belum ada data koleksi buku.</li>
        @endforelse
    </ul>
@endsection

Tindakan Blade: Mengulang setiap item $book, melakukan sanitasi karakter khusus pada judul dan penulis, lalu menghasilkan dokumen HTML murni.

5. Hasil Akhir yang Diterima Browser Klien ​

Browser pengunjung menerima respons berformat HTML murni seperti berikut:

html
<!DOCTYPE html>
<html lang="id">
<head>
    <title>Sistem Perpustakaan</title>
</head>
<body>
    <main class="container">
        <h1>Katalog Buku Perpustakaan</h1>
        <ul>
            <li><strong>Dasar Pemrograman Web</strong> - Penulis: Budi Raharjo</li>
            <li><strong>Belajar Laravel 13</strong> - Penulis: Siti Aminah</li>
        </ul>
    </main>
</body>
</html>

Pengguna melihat halaman web yang rapi, cepat, dan interaktif tanpa perlu mengetahui kerumitan kueri database maupun proses kompilasi kode di belakang layar.

N. Kesimpulan ​

Berikut ringkasan keterhubungan antar komponen dalam siklus hidup permintaan Laravel dan Blade:

KomponenPeran dan Tanggung Jawab UtamaLokasi Berkas Standar
HTTP RequestPesan permintaan dari browser klien ke server webDikirim melalui protokol jaringan
Entry PointPintu gerbang utama penerima seluruh lalu lintas webpublic/index.php
BootstrapInisialisasi konfigurasi, routing, dan pustaka frameworkbootstrap/app.php
RoutingMemetakan URL dan HTTP method ke Controller yang sesuairoutes/web.php
MiddlewareMenyaring dan memeriksa request sebelum mencapai controllerDikonfigurasi di bootstrap/app.php
ControllerPengatur alur logika bisnis dan penghubung model dengan viewapp/Http/Controllers/
Model (Eloquent)Representasi tabel database dan eksekutor kueri dataapp/Models/
Blade ViewTemplate antarmuka yang merender data menjadi HTMLresources/views/
View CachePenyimpanan berkas PHP hasil kompilasi template Bladestorage/framework/views/
HTTP ResponsePaket data HTML murni dan status code yang dikirim ke browserDiterima dan dirender oleh browser klien

O. Materi Selanjutnya ​

Sekarang Anda telah memahami secara mendalam bagaimana seluruh roda gigi di dalam Laravel dan Blade berputar serasi untuk menyajikan sebuah halaman web.

Pada materi penutup Modul 00 berikutnya, kita akan meninjau rancangan lengkap aplikasi perpustakaan yang akan kita bangun: 👉 08. Gambaran Project Aplikasi Perpustakaan: Membedah fitur-fitur utama sistem informasi perpustakaan, batasan ruang lingkup aplikasi, rancangan hak akses pengguna (petugas dan anggota), serta alur kerja pengembangan praktikum dari awal hingga siap diuji.

Referensi Dokumentasi ​