Blade Templating di Laravel: Cara Membuat Tampilan Dinamis dengan Mudah

Blade adalah sistem templating bawaan Laravel yang memudahkan pembuatan tampilan dinamis dengan sintaks yang bersih dan mudah dipahami. Dengan Blade, Anda dapat menggunakan fitur seperti inheritance, komponen, dan directive yang mempercepat pengembangan antarmuka aplikasi. Artikel ini akan membahas cara menggunakan Blade di Laravel untuk membuat tampilan yang dinamis dan efisien.

1. Apa Itu Blade Laravel?

Blade adalah engine templating Laravel yang memungkinkan kita membuat tampilan yang lebih rapi dan modular. File Blade menggunakan ekstensi .blade.php dan terletak di dalam folder resources/views/.

2. Membuat Tampilan dengan Blade

Untuk membuat tampilan, buat file baru di dalam folder resources/views/, misalnya home.blade.php:

<!DOCTYPE html>
<html>
<head>
    <title>Halaman Utama</title>
</head>
<body>
    <h1>Selamat Datang di Laravel</h1>
    <p>Ini adalah halaman utama dengan Blade.</p>
</body>
</html>

Lalu, kembalikan tampilan ini di dalam route:

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

3. Blade Templating dengan Layout

Salah satu keunggulan Blade adalah kemampuannya untuk menggunakan layout agar lebih modular. Buat file layouts/app.blade.php:

<!DOCTYPE html>
<html>
<head>
    <title>@yield('title')</title>
</head>
<body>
    <header>
        <h1>Website Saya</h1>
    </header>
    <main>
        @yield('content')
    </main>
</body>
</html>

Kemudian gunakan layout ini di tampilan home.blade.php:

@extends('layouts.app')

@section('title', 'Halaman Utama')

@section('content')
    <h2>Selamat Datang!</h2>
    <p>Ini adalah halaman utama menggunakan layout Blade.</p>
@endsection

4. Menggunakan Variabel dalam Blade

Kita bisa mengirim variabel ke dalam tampilan dari controller atau route:

Route::get('/user/{name}', function ($name) {
    return view('user', ['name' => $name]);
});

Di dalam user.blade.php:

<p>Halo, {{ $name }}!</p>

5. Blade Directive

Blade memiliki beberapa directive yang berguna:

@if untuk kondisi:

@if($age >= 18)
    <p>Anda sudah dewasa.</p>
@else
    <p>Anda masih anak-anak.</p>
@endif

@foreach untuk looping:

@foreach($users as $user)
    <p>{{ $user->name }}</p>
@endforeach

Kesimpulan

Blade Laravel memudahkan pengembangan tampilan dinamis dengan fitur seperti layout, directive, dan integrasi variabel. Dengan memahami Blade, Anda dapat membuat antarmuka yang lebih rapi dan efisien dalam Laravel. Semoga artikel ini membantu! 🚀

🥋 Kungfu Laravel

Cari Blog Ini