Tutorial Blade Templates & Layouts di Laravel

Tutorial Belajar Blade Template & Layout

Apa Itu Laravel ?

Laravel adalah framework PHP populer yang dikenal dengan kemudahan penggunaannya dan banyak fitur yang membantu. Salah satu fitur yang sangat bermanfaat adalah Blade, sebuah mesin templating yang memungkinkan kamu untuk menulis HTML yang lebih ringkas dan dinamis.

Apa itu Blade Templates?

Blade templates adalah file HTML dengan ekstensi .blade.php yang menggunakan sintaks khusus untuk memudahkan kamu dalam menulis HTML. Sintaks ini memungkinkan kamu untuk melakukan berbagai hal, seperti:

Menampilkan data dari variabel PHP
Menambahkan kontrol logika seperti if statements dan loops
Menyertakan komponen HTML yang dapat digunakan kembali
Membuat layout yang konsisten untuk seluruh aplikasi

Apa itu Blade Layouts?

Blade layouts adalah file .blade.php yang berisi struktur HTML dasar untuk seluruh aplikasi kamu. Layout ini biasanya berisi elemen HTML yang sama di semua halaman, seperti header, footer, dan sidebar. Dengan menggunakan Blade layouts, kamu dapat menghindari duplikasi kode dan membuat kode kamu lebih terorganisir dan mudah dikelola.

Manfaat Menggunakan Blade Templates & Layouts

Ada banyak manfaat menggunakan Blade templates & layouts di Laravel, antara lain:

Kode yang Lebih Bersih dan Terorganisir: Blade templates & layouts membantu kamu membuat kode yang lebih bersih dan terorganisir dengan memisahkan presentasi HTML dari logika PHP.
Meningkatkan Kemampuan Reuse: Blade templates & layouts memungkinkan kamu untuk menggunakan kembali komponen HTML di seluruh aplikasi kamu, sehingga menghemat waktu dan tenaga.
Mempermudah Pemeliharaan Kode: Blade templates & layouts membuat kode kamu lebih mudah dipelihara karena kamu hanya perlu mengubah satu file untuk menerapkan perubahan ke seluruh aplikasi.
Meningkatkan Keamanan: Blade templates secara otomatis meng-encode data HTML, sehingga membantu mencegah serangan Cross-Site Scripting (XSS).

Memulai dengan Blade Templates & Layouts

Untuk memulai dengan Blade templates & layouts di Laravel, kamu perlu mengikuti langkah-langkah berikut:

Buat File Layout: Buat file .blade.php baru di folder resources/views/layouts. File ini akan berisi struktur HTML dasar untuk seluruh aplikasi kamu.
Tambahkan Sintaks Blade: Gunakan sintaks Blade khusus untuk menambahkan variabel PHP, kontrol logika, dan komponen HTML yang dapat digunakan kembali ke file layout kamu.
Tambahkan Content Section: Tambahkan section @content ke file layout kamu. Section ini akan diisi dengan konten dinamis dari halaman individual.
Buat File Template: Buat file .blade.php baru di folder resources/views untuk setiap halaman individual dalam aplikasi kamu.
Extend Layout: Gunakan directive @extends di file template kamu untuk menentukan layout mana yang ingin kamu gunakan untuk halaman tersebut.
Tambahkan Konten: Tambahkan konten dinamis ke file template kamu di dalam section @content.

Contoh Penggunaan Blade Templates & Layouts

Berikut adalah contoh sederhana penggunaan Blade templates & layouts di Laravel:

File Layout (resources/views/layouts/app.blade.php):


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

    @yield('content')

    <footer>
        &copy; {{ date('Y') }} My Laravel App
    </footer>
</body>
</html>

File Template (resources/views/home.blade.php):

@extends('layouts.app')

@section('title')
    Home
@endsection

@section('content')
    <p>Welcome to my Laravel app!</p>
@endsection

Dalam contoh ini, file layout app.blade.php berisi struktur HTML dasar untuk seluruh aplikasi, termasuk header, footer, dan section @content. File template home.blade.php extends layout app.blade.php dan menambahkan konten dinamisnya sendiri ke section @content.

Tips:

Dokumentasi resmi Laravel memiliki banyak informasi tentang Blade templates & layouts: https://laravel.com/docs/11.x/blade
Ada banyak tutorial online yang tersedia yang dapat membantu kamu mempelajari cara menggunakan Blade templates & layouts:

Contoh Penggunaan Blade Template dengan Bootstrap Layouting Sederhana

Berikut contoh penggunaan Blade template dengan Bootstrap layouting sederhana untuk membantu pemula:

Buat File Layout (resources/views/layouts/app.blade.php):


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title')</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
    <header class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="#">My Laravel App</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="{{ route('home') }}">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ route('about') }}">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ route('contact') }}">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </header>

    @yield('content')

    <footer class="mt-5">
        <div class="container text-center">
            &copy; {{ date('Y') }} My Laravel App
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>

Buat File Template (resources/views/home.blade.php):


@extends('layouts.app')

@section('title')
    Home
@endsection

@section('content')
    <div class="container">
        <div class="jumbotron mt-3">
            <h1>Welcome to My Laravel App!</h1>
            <p>This is the home page of my Laravel application.</p>
        </div>

        <div class="row">
            <div class="col-md-4">
                <div class="card">
                    <img src="https://picsum.photos/200" class="card-img-top" alt="..." />
                    <div class="card-body">
                        <h5 class="card-title">Card Title 1</h5>
                        <p class="card-text">Some quick example text to build on the card content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <img src="https://picsum.photos/200" class="card-img-top" alt="..." />
                    <div class="card-body">
                        <h5 class="card-title">Card Title 2</h5>
                        <p class="card-text">Some quick example text to build on the card content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <img src="https://picsum.photos/200" class="card-img-top" alt="..." />
                    <div class="card-body">
                        <h5 class="card-title">Card Title 3</h5>
                        <p class="card-text">Some quick example text to build on the card content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

Penjelasan :

File Layout (app.blade.php):
- Mendefinisikan struktur HTML dasar dengan header, navbar, content, dan footer.
- Menggunakan Bootstrap CSS untuk styling dasar.
- Menentukan section @content untuk konten dinamis.
File Template (home.blade.php):
- Mewarisi layout app.blade.php menggunakan @extends.
- Menentukan title halaman di section @title.
- Menambahkan konten dinamis halaman home di section @content.
- Menggunakan komponen Bootstrap seperti jumbotron, card, row, dan col untuk struktur layout dan styling.

Tips:

Kamu dapat menambahkan lebih banyak section dan komponen HTML ke layout dan file template sesuai kebutuhan.
Gunakan Bootstrap Grid System untuk mengatur tata letak konten dengan mudah.
Sesuaikan CSS Bootstrap dengan branding dan preferensi desain kamu.
Manfaatkan Blade directives untuk menampilkan data dinamis dan menambahkan logika ke template kamu.

Kesimpulan

Blade templates & layouts adalah alat yang ampuh yang dapat membantu kamu membuat kode Laravel yang lebih bersih, terorganisir, dan mudah dipelihara. Dengan mempelajari cara menggunakan Blade templates & layouts, kamu dapat meningkatkan kualitas dan efisiensi pengembangan Laravel kamu.

Contoh ini menunjukkan cara sederhana untuk menggunakan Blade templates & Bootstrap layouting untuk membangun halaman web dinamis di Laravel. Dengan mempelajari dasar-dasarnya dan mengikuti tips yang diberikan, kamu dapat dengan mudah membuat aplikasi web yang menarik dan responsif.

Sumber :

Dokumentasi Resmi Bootstrap: https://getbootstrap.com/docs/5.0/getting-started/introduction
Tutorial Bootstrap Grid System: https://getbootstrap.com/docs/5.0/layout/grid
Sumber Daya Bootstrap Lainnya: https://getbootstrap.com/docs/5.3/examples

Catatan :

Pastikan untuk menyesuaikan contoh kode dengan struktur project Laravel kamu.
Pelajari lebih lanjut tentang Blade templates dan Bootstrap untuk membangun aplikasi web yang lebih kompleks.
Jangan ragu untuk bereksperimen dan berkreasi dengan berbagai layout dan komponen.

Ingin berdiskusi lebih lanjut tentang topik ini? Bergabunglah dengan grup Telegram Komunitas #Programmer Full Stack, klik link dibawah ini, dan jangan lupa support blog ini dengan klik tombol Trakteer yang berwarna merah dibawah ya, terima kasih

Tutorial Blade Templates & Layouts di Laravel

Apa Itu Laravel ?

Apa itu Blade Templates?

Apa itu Blade Layouts?

Manfaat Menggunakan Blade Templates & Layouts

Memulai dengan Blade Templates & Layouts

Contoh Penggunaan Blade Templates & Layouts

Tips:

Contoh Penggunaan Blade Template dengan Bootstrap Layouting Sederhana

Penjelasan :

Tips:

Kesimpulan

Sumber :

Catatan :

Ingin berdiskusi lebih lanjut tentang topik ini? Bergabunglah dengan grup Telegram Komunitas #Programmer Full Stack, klik link dibawah ini, dan jangan lupa support blog ini dengan klik tombol Trakteer yang berwarna merah dibawah ya, terima kasih

Contact Form