Halo, Sobat Jagoan! Blade adalah template engine bawaan Laravel yang memudahkan kamu membuat tampilan (view) web secara dinamis dan efisien. Ciri sebuah view menerapkan Blade yaitu menggunakan ekstensi file .blade.php yang disimpan di dalam resources/views.
Artikel kali ini akan membantu kamu untuk memahami salah satu fitur Laravel ini, simak kuy, Sob!
Apa itu Blade Templating?
Template engine Blade adalah sistem templating bawaan Laravel yang digunakan untuk membuat tampilan dalam aplikasi Laravel dengan cara yang efisien, bersih, sehingga mudah dalam memelihara web. Blade memungkinkan kamu menulis HTML yang terintegrasi dengan PHP menggunakan sintaks yang sederhana dan elegan.
Dengan Blade, kamu bisa membuat template dasar yang bisa diwarisi oleh halaman lain, ini sangat bermanfaat untuk menyusun footer, header, atau navbar. Blade juga menyediakan fitur sederhana untuk menggabungkan logika PHP dengan HTML, sehingga ketika ingin menampilkan data dari database atau memeriksa kondisi tertentu membuat sintaks menjadi mudah dibaca.
Fitur Utama Blade Templating
- Blade menyederhanakan sintaks PHP di view. Kamu bisa menampilkan data dengan {{ $data }} alih-alih menggunakan <?php echo $data; ?>.
- Blade memisahkan tampilan dari logika program. Kamu cukup menaruh logika presentasi seperti @if, @foreach, atau @switch di dalam file view tanpa menulis logika bisnis.
- Blade memungkinkan kamu membuat layout yang bisa diwarisi. Kamu bisa membuat satu layout dasar, lalu mewarisinya di banyak halaman dengan @extends dan @section, sehingga kamu tidak perlu menulis ulang struktur HTML yang sama.
- Blade mempermudah menyusun tampilan menjadi komponen kecil. Kamu bisa menyertekan file lain dengan @include atau membuat komponen Blade khusus <x-alert> supaya tampilan jadi lebih modular dan bisa digunakan ulang.
- Blade menjaga keamanan tampilan secara otomatis. Saat kamu mencetak data dengan {{ $data }}, Blade akan meng-escape-nya otomatis supaya tidak menjalankan kode berbahaya dari input pengguna.
- Blade mempercepat kinerja karena meng-compile view jadi PHP biasa. Laravel akan mengubah file Blade menjadi file PHP dan menyimpannya di cache, jadi aplikasi bisa merender tampilan dengan cepat.
- Blade memberikan kamu bisa mengatur tampilan sesuai kondisi. Kamu bisa menampilkan bagian tertentu di halaman menggunakan perintah seperti @if, @else, @for, @foreach, dan @while. Ini berguna saat kamu ingin menampilkan data hanya jika syarat tertentu terpenuhi atau mengulang data dari database.
@if($user)
<p>Halo, {{ $user->name }}</p>
@else
<p>Silakan login dulu.</p>
@endif
Bagian Blade Templating
Terdapat beberapa unsur utama untuk menyusun dan mengatur tampilan halaman web secara efisien.
- {{ $data }} untuk menampilkan data dan otomatis menghindari serangan XSS dan {{!! $html !!}} untuk menampilkna HTML mentah tanpa di-escape jadi perlu hati-hati menggunakannya.
- @if, @foreach, @switch dan lainnya, untuk mengatur logika tampilan, seperti kondisi dan perulangan.
- @extends, @sections, @yield, @include disebut sebagai Blade directative yang dapat digunakan ulang di banyak halaman.
- @extends: untuk mewariskan layout
- @section: untuk mendefinisikan bagian konten
- @yield: untuk menampilkan konten tertentu dari section
- @include: untuk menyertakan file blade lain
- Untuk menulis komentar pada Blade menggunakan {{– Ini komentar di Blade –}}
- Direktif lainnya:
- @csrf: menyisipkan token keamanan di form
- @auth atau @guest: mengecek apakah pengguna sedang login atau tidak
Dokumentasi resmi Laravel menyediakan penjelasan lengkap mengenai Blade Template Laravel pada halaman Blade Templates
Membuat Website dengan Blade Template
Artikel ini akan mengembangkan halaman View yang sudah dibuat pada artikel Memahami Konsep View dan Route pada Laravel. Jadi, sebelum mengikuti langkah-langkah di bawah ini, pastikan kamu sudah memahami artikel tersebut.
Step 1: Membuat template master yang akan menjadi induk dari tampilan web. File ini berisi tampilan utama dari halaman blog yang terdiri dari partisi-partisi yang mengarah ke halaman lain.
Buat file bernama master.blade.php di dalam /resources/views dan salin baris kode berikut di dalamnya.
<!DOCTYPE html>
<html lang=”id”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>@yield(‘title’) – Blog Laravel</title>
<style>
/* Global styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background: #f4f4f4;
color: #333;
}
/* Header menu */
nav {
background: #007bff;
color: white;
padding: 1rem 2rem;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 1rem;
}
nav ul li {
display: inline;
}
nav ul li a {
color: white;
text-decoration: none;
font-weight: bold;
}
nav ul li a:hover {
text-decoration: underline;
}
/* Content area */
.content {
padding: 2rem;
background: white;
margin: 2rem auto;
max-width: 800px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
border-radius: 8px;
}
/* Footer */
footer {
background: #333;
color: white;
text-align: center;
padding: 1rem;
margin-top: 2rem;
}
</style>
</head>
<body>
@include(‘header’)
<div class=”content”>
@yield(‘content’)
</div>
@include(‘footer’)
</body>
</html>
Jika kamu ingin mengubah tampilan seluruh halaman, cukup edit file master.blade.php. Perubahan ini akan otomatis diterapkan ke semua halaman, tanpa perlu mengedit setiap halaman satu per satu.
Step 2: Selanjutnya, buat header website dengan nama header.blade.php
<nav>
<ul>
<li><a href=”{{ url(‘/’) }}”>Home</a></li>
<li><a href=”{{ url(‘/about’) }}”>About</a></li>
<li><a href=”{{ url(‘/contact’) }}”>Contact</a></li>
</ul>
</nav>
Step 3: Berikutnya, membuat footer website dengan nama footer.blade.php
<footer>
<p>© {{ date(‘Y’) }} Blog Laravel Sederhana – All rights reserved.</p>
</footer>
Step 4: Modifikasi file about.blade.php dan contact.blade.php menjadi seperti di bawah ini.
((-- about.blade.php --}}
@extends('master')
@section('title', 'Tentang Kami')
@section('content')
<h2>Tentang Aplikasi</h2>
<p>Ini adalah halaman tentang aplikasi Laravel kamu.</p>
@endsection
((-- contact.blade.php --}}
@extends('master')
@section('title', 'Kontak')
@section('content')
<h2>Hubungi Kami</h2>
<p>Silakan hubungi Jagoan Hosting melalui (0341) 565353</p>
@endsection
Step 5: Buat halaman index.blade.php, masih pada resources/views dan isi dengan kode:
@extends('master')
@section('title', 'Home')
@section('content')
<h2>Selamat datang di Blog Laravel</h2>
<p>Ini adalah halaman utama yang menampilkan konten blog secara statis.</p>
@endsection
Step 6: Membuat Controller dengan nama BlogController, caranya sebagaimana pada artikel Konsep Model-View-Controller (MVC) pada Laravel menggunakan perintah artisan.
php artisan make:controller BlogController
Step 7: Selanjutnya edit file BlogController yang berada di app/Http/Controllers/BlogController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class BlogController extends Controller
{
public function index() {
return view('index');
}
public function about() {
return view('pages.about');
}
public function contact() {
return view('contact');
}
}
Step 8: Terakhir, atur routing view pada browser pada routes/web.php
use App\Http\Controllers\BlogController;
Route::get('/', [BlogController::class, 'index']);
Route::get('/about', [BlogController::class, 'about']);
Route::get('/contact', [BlogController::class, 'contact']);
Step 9: Uji coba web dengan membuka satu per satu halaman.
Gimana? Gampang, kan? Dengan Blade, kamu bisa bikin tampilan website Laravel jadi lebih praktis dan hemat waktu. Yuk, coba terapkan di proyek kamu sendiri!
Kalau ada yang masih bingung, jangan ragu hubungi Tim Support Jagoan Hosting via Live Chat atau Open Ticket, Sob!
Simak terus tips-tips seputar domain dan hosting dari Jagoan Hosting di laman Pusat Tutorial Hosting & Domain. Kalau ada artikel yang belum tersedia, silahkan menyampaikan kepada Tim Support juga, Sob!