Setelah berhasil melakukan instalasi dan memahami struktur folder pada materi sebelumnya, kini saatnya kita masuk ke bagian yang paling menyenangkan: membuat halaman pertama Anda.
Dalam artikel kali ini, kita akan membedah dua pilar utama yang membuat Laravel begitu dicintai oleh pengembang web di seluruh dunia, yaitu Sistem Routing dan Blade Templating Engine.
Mengenal Sistem Routing di Laravel 10
Routing adalah mekanisme yang menentukan bagaimana aplikasi merespons permintaan (request) dari pengguna berdasarkan alamat URL yang diakses. Bayangkan rute sebagai resepsionis di sebuah gedung perkantoran; ketika tamu datang dan menyebutkan tujuannya, resepsionis akan mengarahkan tamu tersebut ke ruangan yang tepat.
Di Laravel 10, semua rute untuk antarmuka web didefinisikan di dalam file routes/web.php.
Cara Menulis Rute Dasar
Format penulisan rute di Laravel sangat manusiawi dan mudah dibaca. Berikut adalah contoh rute paling sederhana:
use Illuminate\Support\Facades\Route;
Route::get('/halo-laravel', function () {
return 'Halo! Selamat datang di pembelajaran Laravel 10.';
});
Ketika Anda mengakses localhost:8000/halo-laravel di browser, Laravel akan menjalankan fungsi tersebut dan menampilkan teksnya. Namun, dalam aplikasi nyata, kita tidak langsung mengembalikan teks, melainkan mengarahkan rute ke sebuah View atau Controller.
Rute dengan Parameter
Laravel juga memungkinkan kita menangkap data dari URL. Misalnya, jika Anda ingin menyapa pengguna berdasarkan nama mereka:
Route::get('/user/{nama}', function ($nama) {
return "Halo, " . $nama;
});
Blade Engine: Membuat Tampilan Menjadi Elegan
Setelah memahami cara kerja rute, pertanyaan selanjutnya adalah: Di mana kita menulis kode HTML? Jawabannya adalah di folder resources/views. Namun, Laravel tidak menggunakan file .html atau .php biasa, melainkan file bertipe .blade.php.
Blade adalah templating engine bawaan Laravel yang sangat kuat namun ringan. Blade memungkinkan Anda menulis logika PHP dengan sintaks yang sangat bersih tanpa harus membuka dan menutup tag PHP (<?php ?>) secara berulang-ulang.
Keunggulan Blade
Salah satu fitur terbaik Blade adalah Directive. Ini adalah instruksi singkat yang diawali dengan simbol @. Perbandingannya sangat mencolok:
-
PHP Native:
<?php if($stok > 0): ?> <p>Tersedia</p> <?php endif; ?> -
Laravel Blade:
@if($stok > 0) <p>Tersedia</p> @endif
Menampilkan Data (Echoing)
Untuk menampilkan variabel dari rute ke tampilan, Blade menggunakan kurung kurawal ganda: {{ $variabel }}. Sintaks ini secara otomatis menjalankan fungsi PHP htmlspecialchars untuk mencegah serangan siber jenis Cross-Site Scripting (XSS).
Implementasi: Menghubungkan Route dan Blade
Mari kita praktikkan. Pertama, buat rute di routes/web.php:
Route::get('/profil', function () {
$nama = "Budi Santoso";
return view('halaman_profil', ['nama_user' => $nama]);
});
Kedua, buat file baru di resources/views/halaman_profil.blade.php:
<!DOCTYPE html>
<html>
<head>
<title>Profil Pengguna</title>
</head>
<body>
<h1>Selamat Datang di Profil</h1>
<p>Nama Saya adalah: {{ $nama_user }}</p>
@if($nama_user == "Budi Santoso")
<p>Status: Administrator</p>
@else
<p>Status: Tamu</p>
@endif
</body>
</html>
Teknik Layouting: Header dan Footer Satu Kali Saja
Pernahkah Anda merasa lelah karena harus menyalin kode navigasi (navbar) dan footer ke setiap halaman HTML? Di Laravel 10, masalah itu selesai dengan Template Inheritance.
Anda bisa membuat satu file “induk” (misalnya layouts/main.blade.php) yang berisi kerangka dasar HTML, lalu menggunakan direktif @yield('konten') sebagai penanda tempat isi halaman akan diletakkan.
Halaman anak (seperti kontak.blade.php) cukup menggunakan direktif @extends('layouts.main') dan membungkus isinya dengan @section('konten'). Dengan cara ini, jika Anda ingin mengubah warna navbar, Anda cukup mengubahnya di satu file saja, dan seluruh halaman website Anda akan berubah secara otomatis.
Kesimpulan
Sistem Routing dan Blade Engine adalah pondasi utama yang membuat Laravel begitu efisien. Rute mengatur ke mana arah aplikasi, sementara Blade mengatur bagaimana aplikasi tersebut tampil di depan pengguna dengan cara yang sangat rapi.
Dengan menguasai dua konsep ini, Anda sudah bisa membangun website statis yang dinamis. Di materi selanjutnya, kita akan mulai masuk ke bagian yang lebih mendalam, yaitu berurusan dengan data menggunakan Eloquent ORM. Selamat bereksperimen dengan rute dan tampilan Blade Anda!