Panduan Templating Blade di Laravel 11 untuk Pemula

Buat kamu yang baru mulai belajar Laravel, salah satu hal yang wajib kamu pelajari adalah Blade. Blade adalah template engine bawaan Laravel yang bikin ngoding frontend jadi lebih gampang dan rapi. Dengan Blade, kamu bisa bikin layout yang reusable, gak perlu ngulang-ngulang HTML tiap kali bikin halaman baru. Yuk, simak panduan lengkap tentang templating Blade di Laravel 11 ini!

Apa Itu Blade di Laravel 11?

Blade itu template engine khusus dari Laravel yang dirancang biar kita bisa lebih gampang menulis HTML bercampur PHP. Jadi, gak perlu ribet nulis <?php ?> kayak zaman dulu. Blade juga ngasih fitur seperti inheritance (pewarisan template) dan components biar kamu bisa bikin template yang lebih modular.

Langkah-Langkah Membuat Templating dengan Blade

Kali ini kita akan integrasi template SASH jika kamu ingin mendapatkan bisa download disini.

1. Bikin Layout Dasar

Biasanya, di setiap proyek Laravel, kita bakal punya layout utama yang dipake di banyak halaman. Layout ini bisa dibilang template dasar yang isinya header, footer, atau apapun yang berulang di setiap halaman.

Buat dulu folder di resources/views/layouts, lalu bikin file app.blade.php. Isi file ini dengan struktur HTML standar.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'Home')</title>

    @yield('css')
</head>
<body>
    <header>
        <!-- Navbar atau Header Umum -->
    </header>

    <div class="container">
        @yield('content')
    </div>

    <footer>
        <!-- Footer Umum -->
    </footer>

    @yield('js')
</body>
</html>

Nah, bagian @yield('title') dan @yield('content') itu tempat kamu taruh konten dinamis dari tiap halaman.

Buat file master.blade.php di folder resources –> view –> layouts yang isinya akan seperti dibawah.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'Home Title')</title>

    <!-- BOOTSTRAP CSS -->
    <link id="style" href="{{ asset('') }}/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

    <!-- STYLE CSS -->
    <link href="{{ asset('') }}/assets/css/style.css" rel="stylesheet" />
    <link href="{{ asset('') }}/assets/css/dark-style.css" rel="stylesheet" />
    <link href="{{ asset('') }}/assets/css/transparent-style.css" rel="stylesheet">
    <link href="{{ asset('') }}/assets/css/skin-modes.css" rel="stylesheet" />

    <!--- FONT-ICONS CSS -->
    <link href="{{ asset('') }}/assets/css/icons.css" rel="stylesheet" />

    <!-- COLOR SKIN CSS -->
    <link id="theme" rel="stylesheet" type="text/css" media="all" href="{{ asset('') }}/assets/colors/color1.css" />

    <!-- INTERNAL Switcher css -->
    <link href="{{ asset('') }}/assets/switcher/css/switcher.css" rel="stylesheet" />
    <link href="{{ asset('') }}/assets/switcher/demo.css" rel="stylesheet" />

    @yield('css')
</head>
<body class="app sidebar-mini ltr light-mode">
    
    <!-- Switcher -->
        @include('switcher')
    <!-- End Switcher -->

    <!-- GLOBAL-LOADER -->
    <div id="global-loader">
        <img src="{{ asset('') }}/assets/images/loader.svg" class="loader-img" alt="Loader">
    </div>
    <!-- /GLOBAL-LOADER -->

    <!-- PAGE -->
    <div class="page">
        <div class="page-main">

            <!-- app-Header -->
                @include('topbar')
            <!-- /app-Header -->

            <!--APP-SIDEBAR-->
                @include('sidebar')

            <!--app-content open-->
            <div class="main-content app-content mt-0">
                <div class="side-app">

                    @yield('content')
                </div>
            </div>
            <!--app-content closed-->
        </div>

        @include('footer')
    </div>

    <!-- BACK-TO-TOP -->
    <a href="#top" id="back-to-top"><i class="fa fa-angle-up"></i></a>


    <!-- JQUERY JS -->
    <script src="{{ asset('') }}/assets/js/jquery.min.js"></script>

    <!-- BOOTSTRAP JS -->
    <script src="{{ asset('') }}/assets/plugins/bootstrap/js/popper.min.js"></script>
    <script src="{{ asset('') }}/assets/plugins/bootstrap/js/bootstrap.min.js"></script>

    <!-- SIDE-MENU JS -->
    <script src="{{ asset('') }}/assets/plugins/sidemenu/sidemenu.js"></script>

	<!-- TypeHead js -->
	<script src="{{ asset('') }}/assets/plugins/bootstrap5-typehead/autocomplete.js"></script>
    <script src="{{ asset('') }}/assets/js/typehead.js"></script>

    <!-- SIDEBAR JS -->
    <script src="{{ asset('') }}/assets/plugins/sidebar/sidebar.js"></script>

    <!-- Perfect SCROLLBAR JS-->
    <script src="{{ asset('') }}/assets/plugins/p-scroll/perfect-scrollbar.js"></script>
    <script src="{{ asset('') }}/assets/plugins/p-scroll/pscroll.js"></script>
    <script src="{{ asset('') }}/assets/plugins/p-scroll/pscroll-1.js"></script>

    <!-- Color Theme js -->
    <script src="{{ asset('') }}/assets/js/themeColors.js"></script>

    <!-- Sticky js -->
    <script src="{{ asset('') }}/assets/js/sticky.js"></script>

    <!-- CUSTOM JS -->
    <script src="{{ asset('') }}/assets/js/custom1.js"></script>

    <!-- Switcher js -->
    <script src="{{ asset('') }}/assets/switcher/js/switcher.js"></script>

    @yield('js')
</body>
</html>

2. Membuat Halaman yang Mewarisi Layout

Setelah punya layout, sekarang kita bikin halaman yang mewarisi template tadi. Misalnya, kita bikin halaman home.

Buat file home.blade.php di folder resources/views, lalu isi dengan kode berikut:

@extends('layouts.app')

@section('title', 'Home Page')

@section('content')
    <h1>Selamat datang di Home Page!</h1>
    <p>Ini adalah halaman utama dengan template Blade.</p>
@endsection

Mudah kan? Kamu tinggal pakai @extends untuk pakai layout utama tadi, dan @section untuk isi bagian kontennya.

3. Menggunakan Komponen di Blade

Di Laravel 11, kamu bisa bikin components yang reusable. Komponen ini bisa dipake buat hal-hal seperti alert, card, atau apapun yang sering diulang.

Misalnya, kita mau bikin komponen alert. Jalankan perintah:

php artisan make:component Alert

Nantinya akan ada dua file yang dibuat: satu di app/View/Components untuk logika, dan satu lagi di resources/views/components untuk tampilannya.

Isi file alert.blade.php dengan:

<div class="alert alert-{{ $type }}">
    {{ $message }}
</div>

Terus, panggil komponen ini di view kamu seperti ini:

<x-alert type="success" message="Berhasil!"/>

Gampang banget, kan? Kamu bisa pakai komponen ini di mana aja tanpa harus copy-paste kode berulang kali.

4. Directives di Blade

Blade juga punya directives bawaan yang bikin ngoding lebih efisien. Beberapa yang sering dipake:

@if, @else, @elseif, dan @endif buat logika kondisi.
@foreach buat looping data.
@csrf buat token CSRF di form.

Contohnya:

@if($user->isAdmin())
    <p>Halo, Admin!</p>
@else
    <p>Selamat datang, Pengguna!</p>
@endif

Atau buat looping data:

@foreach($posts as $post)
    <h2>{{ $post->title }}</h2>
@endforeach

Dengan directives ini, Blade bikin penulisan kode jadi lebih ringkas dan rapi.

Kenapa Pakai Blade di Laravel 11?

Mudah Dipahami: Syntax Blade itu gampang banget, bahkan buat yang baru belajar Laravel.
Reusable Layouts: Kamu bisa bikin layout yang dipakai berkali-kali di berbagai halaman.
Modular: Dengan komponen, kamu bisa bikin bagian kecil dari UI yang reusable di mana-mana.
Ringkas: Blade bikin kode lebih ringkas dan enak dibaca.

Kesimpulan

Belajar templating Blade di Laravel 11 itu gampang dan menyenangkan. Dengan layout, komponen, dan directives, kamu bisa bikin tampilan yang rapi, modular, dan efisien. Jadi, buat kamu yang baru mulai dengan Laravel, Blade adalah tool wajib yang harus kamu kuasai!

Sekarang kamu udah tau dasar-dasar Blade. Yuk, coba praktekkan di proyek Laravel kamu!

Panduan Templating Blade di Laravel 11 untuk Pemula