Routing dan Blade: Mengatur Alur Aplikasi dan Tampilan Cantik di Laravel (Batch 2)

Apa yang kamu butuhkan

Selamat datang kembali, PahamITian! Di Batch 2 ini, kita akan menyelami dua konsep fundamental Laravel yang akan menjadi "otak" dan "wajah" aplikasi kita: Routing untuk mengatur alur permintaan dan Blade Template Engine untuk merancang tampilan yang dinamis dan cantik. Siap membuat aplikasi Laravelmu lebih interaktif?

Seri Panduan

Belajar Laravel Dasar dari Nol

Halo, PahamITian! Selamat datang kembali di petualangan Laravel kita! Setelah di Batch 1 kita berhasil menginstal Laravel dan membuat halaman sederhana, sekarang saatnya kita melangkah lebih jauh. Di Batch 2 ini, kita akan berkenalan dengan dua "otak" dan "wajah" utama aplikasi Laravel: Routing dan Blade Template Engine. Ibarat membangun rumah, kalau kemarin kita sudah punya pondasi, sekarang kita akan belajar membuat denah (routing) dan merancang interiornya (Blade).

Mari kita mulai!

Batch 2: Routing dan Blade

1. Routing: Jalan Raya Aplikasi Laravelmu

Bayangkan aplikasi web kita sebagai sebuah kota. Setiap kali kamu mengetik alamat di browser (misalnya pahamit.com/artikel atau pahamit.com/kontak), itu seperti kamu sedang meminta untuk pergi ke suatu tempat di kota tersebut. Nah, Routing adalah sistem yang mengatur "jalan raya" di kota kita. Dia yang akan menentukan, "Oh, kalau ada permintaan ke /artikel, saya harus mengarahkan ke mana ya?" atau "Kalau ke /kontak, saya harus menampilkan halaman apa?"

Di Laravel, semua definisi rute (route) ini biasanya ada di file routes/web.php (untuk rute web) dan routes/api.php (untuk rute API). Untuk tutorial ini, kita akan fokus di routes/web.php.

Mari kita lihat strukturnya:

PHP

// routes/web.php
use Illuminate
\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

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

Baris use Illuminate\Support\Facades\Route; itu penting ya, PahamITian. Ini seperti kita "mengimport" atau "menggunakan" kelas Route dari Laravel agar kita bisa memanggil fungsi-fungsinya dengan mudah, seperti Route::get().

##### Route GET dan POST

Ada dua jenis permintaan HTTP yang paling sering kita gunakan: GET dan POST.

GET: Digunakan untuk mengambil (request) data dari server. Contoh: membuka halaman blog, melihat daftar produk. Data dikirim melalui URL.
POST: Digunakan untuk mengirim (submit) data ke server. Contoh: mengisi form registrasi, mengirim komentar. Data dikirim di "badan" permintaan, tidak terlihat di URL.

Contoh Route GET:

PHP

// routes/web.php

// Route untuk halaman 'tentang kami'
Route::get('/tentang', function () {
    return '<h1>Ini Halaman Tentang Kami</h1>';
});

// Route untuk halaman 'kontak'
Route::get('/kontak', function () {
    return '<h1>Hubungi Kami</h1><p>Email: info@pahamit.com</p>';
});

Coba akses http://127.0.0.1:8000/tentang dan http://127.0.0.1:8000/kontak di browser kamu.

Contoh Route POST:

Untuk mencoba route POST, kita perlu mengirim data. Biasanya ini dilakukan lewat form HTML. Untuk sementara, kita bisa pakai tool seperti Postman atau membuat form sederhana.

PHP

// routes/web.php

Route::post('/submit-form', function () {
    return 'Data berhasil dikirim!';
});

Cara Mencoba Route POST dengan Form Sederhana:

Buat file resources/views/form-test.blade.php:

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Form Test</title>
</head>
<body>
    <h1>Coba Kirim Data</h1>
    <form action="/submit-form" method="POST">
        @csrf <!-- Ini penting untuk keamanan Laravel -->
        <input type="text" name="nama" placeholder="Nama Anda">
        <button type="submit">Kirim</button>
    </form>
</body>
</html>

Lalu, tambahkan route untuk menampilkan form ini di routes/web.php:

PHP

// routes/web.php

Route::get('/form', function () {
    return view('form-test');
});

Sekarang, akses http://127.0.0.1:8000/form, isi nama, lalu klik "Kirim". Kamu akan melihat "Data berhasil dikirim!".

##### Named Route

Bayangkan kamu punya banyak rute. Kalau suatu saat URL-nya berubah, kamu harus mengubah semua link di aplikasi kamu. Repot, kan? Nah, Named Route solusinya! Kita bisa memberi nama pada rute, sehingga jika URL berubah, kita hanya perlu mengubah di satu tempat saja.

PHP

// routes/web.php

Route::get('/halaman-utama', function () {
    return 'Selamat datang di Beranda!';
})->name('home'); // Memberi nama 'home' pada rute ini

Route::get('/artikel-blog', function () {
    return 'Daftar Artikel';
})->name('articles.index'); // Nama rute bisa pakai titik untuk grouping

Untuk memanggilnya di kode PHP (misalnya di Blade nanti), kita bisa pakai fungsi route():

PHP

// Contoh penggunaan di Blade (akan kita pelajari nanti)
// <a href="{{ route('home') }}">Beranda</a>
// <a href="{{ route('articles.index') }}">Artikel</a>

##### Parameter Route

Seringkali kita ingin menampilkan detail suatu item berdasarkan ID-nya. Misalnya, pahamit.com/artikel/1 untuk artikel dengan ID 1. Di sinilah Parameter Route berperan.

PHP

// routes/web.php

// Parameter wajib
Route::get('/artikel/{id}', function ($id) {
    return 'Menampilkan artikel dengan ID: ' . $id;
});

// Parameter opsional (tambahkan tanda tanya ? setelah nama parameter)
Route::get('/user/{nama?}', function ($nama = 'Tamu') {
    return 'Selamat datang, ' . $nama . '!';
});

Coba akses:
* http://127.0.0.1:8000/artikel/10
* http://127.0.0.1:8000/artikel/pahamit-laravel
* http://127.0.0.1:8000/user/Budi
* http://127.0.0.1:8000/user (untuk parameter opsional)

2. Blade Template Engine: Merancang Tampilan Cantik

Setelah kita tahu bagaimana mengatur "jalan raya" dengan Routing, sekarang kita akan belajar bagaimana "merancang interior" aplikasi kita agar terlihat cantik dan dinamis. Di Laravel, kita punya Blade Template Engine.

Blade adalah template engine yang sederhana namun powerful. Dia memungkinkan kita untuk menulis kode PHP biasa di dalam view HTML kita, tapi dengan sintaks yang lebih bersih dan fitur-fitur canggih seperti template inheritance dan section.

File view di Laravel biasanya disimpan di folder resources/views dan memiliki ekstensi .blade.php (misalnya welcome.blade.php).

##### Keunggulan Blade

Sintaks Bersih: Lebih mudah dibaca dan ditulis dibandingkan PHP murni di HTML.
Template Inheritance: Memungkinkan kita mendefinisikan layout master dan kemudian "mewariskannya" ke view lain, sehingga kita tidak perlu menulis ulang kode HTML yang sama berulang kali (misalnya header, footer, sidebar).
Directive: Blade punya banyak "perintah" khusus (disebut directive) yang diawali dengan @ untuk melakukan hal-hal umum seperti kondisi (@if, @else), perulangan (@foreach, @for), menyertakan file lain (@include), atau mendefinisikan bagian layout (@extends, @section, @yield).
Keamanan: Secara otomatis melakukan escaping terhadap output data untuk mencegah serangan XSS (Cross-Site Scripting).

##### Blade Layout (Template Inheritance)

Ini adalah fitur favorit banyak developer Laravel. Kita bisa membuat satu file layout utama, lalu view lain tinggal "memperpanjang" layout itu dan mengisi bagian-bagian yang kosong.

Langkah 1: Buat Layout Utama

Buat file resources/views/layouts/app.blade.php:

HTML

<!DOCTYPE html>
<html>
<head>
    <title>PahamIT.com - @yield('title', 'Belajar Laravel')</title>
    <link rel="stylesheet" href="/css/app.css"> <!-- Contoh CSS -->
</head>
<body>
    <header>
        <nav>
            <a href="/">Beranda</a>
            <a href="/artikel">Artikel</a>
            <a href="/tentang">Tentang</a>
        </nav>
    </header>

    <div class="container">
        @yield('content') <!-- Ini adalah "slot" untuk konten utama -->
    </div>

    <footer>
        <p>&copy; {{ date('Y') }} PahamIT.com. Bukan Sekadar Belajar.</p>
    </footer>

    <script src="/js/app.js"></script> <!-- Contoh JS -->
</body>
</html>

@yield('title', 'Belajar Laravel'): Ini akan menampilkan judul halaman. Jika view anak tidak mendefinisikan title, maka akan pakai 'Belajar Laravel'.
@yield('content'): Ini adalah tempat di mana konten unik dari setiap halaman anak akan disuntikkan.

Langkah 2: Buat View Anak yang Menggunakan Layout

Buat file resources/views/beranda.blade.php:

HTML

@extends('layouts.app')

@section('title', 'Beranda')

@section('content')
    <h1>Selamat Datang di PahamIT!</h1>
    <p>Ini adalah halaman beranda aplikasi Laravel kita.</p>
@endsection

@extends('layouts.app'): Memberitahu Blade bahwa view ini akan menggunakan layout layouts/app.blade.php.
@section('title', 'Beranda'): Mengisi bagian title di layout dengan teks 'Beranda'.
@section('content') ... @endsection: Mengisi bagian content di layout dengan HTML di dalamnya.

Langkah 3: Atur Route untuk Menampilkan View Anak

Edit routes/web.php:

PHP

// routes/web.php

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

Sekarang, akses http://127.0.0.1:8000/. Kamu akan melihat halaman beranda dengan header dan footer dari app.blade.php.

##### Include Partial

Selain layout, kita juga bisa memecah bagian-bagian kecil dari HTML menjadi file terpisah yang bisa di-include di mana saja. Ini berguna untuk komponen yang sering dipakai, seperti alert, form error, atau navigasi kecil.

Langkah 1: Buat Partial

Buat file resources/views/partials/alert.blade.php:

HTML

<div style="background-color: yellow; padding: 10px; border: 1px solid orange;">
    <strong>Peringatan!</strong> Ini adalah pesan alert.
</div>

Langkah 2: Gunakan Partial di View

Edit resources/views/beranda.blade.php:

HTML

@extends('layouts.app')

@section('title', 'Beranda')

@section('content')
    @include('partials.alert') <!-- Menyertakan partial alert -->

    <h1>Selamat Datang di PahamIT!</h1>
    <p>Ini adalah halaman beranda aplikasi Laravel kita.</p>
@endsection

Refresh http://127.0.0.1:8000/. Kamu akan melihat pesan alert muncul di halaman beranda.

##### Passing Data ke View

Tentu saja, aplikasi kita tidak akan statis. Kita perlu mengirim data dari route atau controller ke view agar tampilannya dinamis. Ada beberapa cara untuk melakukan ini:

Cara 1: Menggunakan array asosiatif (paling umum)

PHP

// routes/web.php

Route::get('/profil', function () {
    $nama = 'Budi Santoso';
    $umur = 25;
    $pekerjaan = 'Developer Laravel';

    return view('profil', [
        'namaLengkap' => $nama,
        'usia' => $umur,
        'profesi' => $pekerjaan
    ]);
});

Buat file resources/views/profil.blade.php:

HTML

@extends('layouts.app')

@section('title', 'Profil Pengguna')

@section('content')
    <h1>Profil Pengguna</h1>
    <p>Nama: {{ $namaLengkap }}</p>
    <p>Usia: {{ $usia }} tahun</p>
    <p>Pekerjaan: {{ $profesi }}</p>
@endsection

Cara 2: Menggunakan fungsi with()

PHP

// routes/web.php

Route::get('/produk', function () {
    $produk = 'Laptop Gaming';
    $harga = 15000000;

    return view('produk')
                ->with('namaProduk', $produk)
                ->with('hargaProduk', $harga);
});

Buat file resources/views/produk.blade.php:

HTML

@extends('layouts.app')

@section('title', 'Detail Produk')

@section('content')
    <h1>Detail Produk</h1>
    <p>Nama Produk: {{ $namaProduk }}</p>
    <p>Harga: Rp {{ number_format($hargaProduk, 0, ',', '.') }}</p>
@endsection

Coba akses http://127.0.0.1:8000/profil dan http://127.0.0.1:8000/produk.

Perhatikan penggunaan {{ $variabel }} di Blade. Ini adalah cara untuk menampilkan data. Blade secara otomatis akan melakukan escaping pada data ini untuk mencegah XSS, jadi kamu tidak perlu khawatir tentang keamanan dasar.

Jika kamu ingin menampilkan data tanpa escaping (misalnya jika datanya berisi HTML murni yang memang sengaja ingin ditampilkan), gunakan !!! $variabel !!! (tapi hati-hati ya, PahamITian, ini bisa jadi celah keamanan jika datanya dari input pengguna!).

Ringkasan Singkat Batch 2

Di Batch 2 ini, kita sudah belajar:
* Routing adalah sistem navigasi aplikasi kita, mengatur bagaimana permintaan URL diarahkan.
* Route GET untuk mengambil data, Route POST untuk mengirim data.
* Named Route untuk memberi nama pada rute, memudahkan pengelolaan link.
* Parameter Route untuk mengambil nilai dari URL, baik yang wajib maupun opsional.
* Blade Template Engine adalah alat canggih Laravel untuk membuat tampilan web yang dinamis dan terstruktur.
* Template Inheritance dengan @extends, @section, dan @yield untuk membuat layout master.
* Include Partial dengan @include untuk menyertakan komponen HTML kecil yang bisa dipakai ulang.
* Passing Data ke View menggunakan array asosiatif atau with() untuk membuat tampilan lebih interaktif.

Latihan Praktik Batch 2: Membuat Halaman Daftar Artikel Statis

Yuk, kita terapkan apa yang sudah dipelajari dengan membuat halaman daftar artikel sederhana!

Tujuan: Membuat halaman /artikel yang menampilkan daftar beberapa judul artikel statis, menggunakan layout dan passing data.

Langkah-langkah:

Buat Layout Utama: Pastikan kamu sudah punya resources/views/layouts/app.blade.php seperti contoh di atas.
Buat View artikel.blade.php:
Definisikan Data Artikel: Di routes/web.php, buat sebuah array PHP yang berisi beberapa data artikel (misalnya, ['id' => 1, 'judul' => 'Belajar Laravel Dasar', 'slug' => 'belajar-laravel-dasar']). Buat minimal 3 artikel.
Buat Route /artikel:
Tampilkan Data di View: Di artikel.blade.php, gunakan @foreach Blade directive untuk mengulang dan menampilkan judul setiap artikel. Buat setiap judul artikel menjadi link ke halaman detail artikel (meskipun halaman detailnya belum ada, linknya bisa ke /artikel/{slug} atau /artikel/{id}).
Tambahkan Link Navigasi: Di layouts/app.blade.php, tambahkan link ke halaman artikel menggunakan route('articles.index').

Contoh Struktur Kode (Jangan langsung copy-paste, coba buat sendiri dulu ya!):

routes/web.php:

PHP

// ... (pastikan ada use Illuminate\Support\Facades\Route;)

Route::get('/artikel', function () {
    $articles = [
        ['id' => 1, 'judul' => 'Pengenalan Laravel', 'slug' => 'pengenalan-laravel'],
        ['id' => 2, 'judul' => 'Memulai Proyek Laravel', 'slug' => 'memulai-proyek-laravel'],
        ['id' => 3, 'judul' => 'Routing dan Blade di Laravel', 'slug' => 'routing-dan-blade-di-laravel']
    ];
    return view('artikel', compact('articles')); // compact() adalah shortcut untuk ['articles' => $articles]
})->name('articles.index');

// Tambahkan route untuk detail artikel (sementara saja)
Route::get('/artikel/{slug}', function ($slug) {
    return 'Detail artikel: ' . $slug;
})->name('articles.show');

resources/views/artikel.blade.php:

HTML

@extends('layouts.app')

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

@section('content')
    <h1>Daftar Artikel PahamIT</h1>

    @if (count($articles) > 0)
        <ul>
            @foreach ($articles as $article)
                <li>
                    <a href="{{ route('articles.show', ['slug' => $article['slug']]) }}">
                        {{ $article['judul'] }}
                    </a>
                </li>
            @endforeach
        </ul>
    @else
        <p>Belum ada artikel yang tersedia.</p>
    @endif
@endsection

Pertanyaan Cek Pemahaman Batch 2

Jawab pertanyaan-pertanyaan ini untuk memastikan kamu sudah paham:

Apa perbedaan utama antara Route GET dan POST?
Mengapa Named Route penting dalam pengembangan aplikasi Laravel?
Bagaimana cara membuat parameter route menjadi opsional?
Jelaskan fungsi @extends, @section, dan @yield dalam Blade Template Engine.
Bagaimana cara mengirim data dari route ke view di Laravel?
Apa itu Blade directive @csrf dan mengapa itu penting untuk form POST?

Kesalahan Umum Pemula di Batch 2

Lupa use Illuminate\Support\Facades\Route;: Jika kamu menghapus baris ini, Route::get() atau Route::post() tidak akan dikenali.
Salah Path View: Pastikan nama view yang dipanggil di return view('nama-view') sesuai dengan path file .blade.php di resources/views. Contoh: view('layouts.app') akan mencari resources/views/layouts/app.blade.php.
Lupa @csrf di Form POST: Ini adalah proteksi penting Laravel terhadap serangan Cross-Site Request Forgery (CSRF). Tanpa ini, form POST kamu tidak akan bisa disubmit dan akan muncul error 419 | PAGE EXPIRED.
Variabel tidak terdefinisi di View: Pastikan variabel yang kamu gunakan di Blade (misalnya {{ $namaLengkap }}) sudah dikirim dari route atau controller. Jika tidak, akan muncul error Undefined variable.
Sintaks Blade Salah: Perhatikan penggunaan @ untuk directive dan {{ }} untuk menampilkan data. Kesalahan kecil bisa menyebabkan error parsing Blade.
Tidak menjalankan php artisan serve: Pastikan server lokal Laravelmu berjalan saat mencoba mengakses rute di browser.

Persiapan untuk Batch Berikutnya (Batch 3)

Di Batch 3, kita akan mulai masuk ke dunia Controller dan Form yang lebih interaktif. Kita akan belajar:
* Membuat Controller untuk mengorganisir logic aplikasi.
* Memindahkan logic yang tadinya ada di route ke Controller.
* Membuat form yang lebih kompleks dengan Blade.
* Mengelola input dari form.
* Redirect dan Flash Message untuk pengalaman pengguna yang lebih baik.

Pastikan kamu sudah memahami konsep Routing dan Blade ini dengan baik ya, PahamITian! Jika ada pertanyaan, jangan ragu untuk bertanya di kolom komentar atau forum PahamIT.com. Sampai jumpa di Batch 3!

Laravel Tutorial pahamIT

Apakah panduan ini membantu?

Terima kasih atas masukan Anda!