Cara Mudah Membuat Layout Dinamis di Laravel

Thumbnail Cara Mudah Membuat Layout Dinamis di Laravel

Dalam pengembangan aplikasi web, penggunaan layout yang statis dapat menyulitkan pengelolaan tampilan. Setiap halaman harus memiliki kode HTML yang sama berulang kali, yang dapat menyebabkan duplikasi kode, sulitnya pemeliharaan, dan inkonsistensi desain ketika ada perubahan global. Selain itu, jika ada perubahan pada elemen utama seperti header atau footer, setiap halaman harus diperbarui secara manual, yang bisa sangat tidak efisien. Oleh karena itu, solusi terbaik adalah menggunakan layout yang dinamis agar lebih terstruktur dan mudah dikelola.

Laravel menyediakan fitur Blade Template Engine yang memungkinkan kita membuat layout dinamis dengan mudah. Dengan menggunakan Blade, kita dapat menghindari duplikasi kode, meningkatkan efisiensi pengembangan, serta mempermudah pemeliharaan tampilan website. Blade menyediakan berbagai fitur seperti template inheritance dan komponen yang dapat digunakan ulang, menjadikannya pilihan yang ideal untuk mengelola tampilan aplikasi Laravel.

Selain itu, jika kamu ingin mengelola data dalam jumlah besar dengan efisien, kamu bisa menggunakan DataTable server-side di Laravel. Dengan pendekatan ini, pemrosesan data dilakukan di sisi server, sehingga halaman tetap ringan dan responsif. Untuk panduan lengkapnya, silakan baca artikel kami tentang Cara Mudah Membuat DataTable Server Side di Laravel.

Contoh Membuat Layout Dinamis di Laravel

Pada tutorial ini, kita akan mempelajari cara membuat layout dinamis di Laravel menggunakan template engine Blade dan framework CSS Bootstrap. Kita akan memanfaatkan fitur Blade seperti @yield, @include, @extends, dan @section untuk membuat struktur halaman yang modular dan mudah dikelola.

  1. Persiapan Proyek Laravel

Pastikan telah menginstal Laravel di sistem milikmu. Jika belum, kamu bisa menginstalnya dengan perintah berikut:

composer create-project --prefer-dist laravel/laravel latihan.layout-dinamis

Setelah instalasi selesai, masuk ke direktori proyek:

cd latihan.layout-dinamis

Jalankan server bawaan Laravel:

php artisan serve
  1. Membuat Layout Utama dengan Blade dan Bootstrap

Laravel menggunakan Blade sebagai templating engine. Kita akan membuat layout utama yang dapat digunakan ulang untuk berbagai halaman dengan tambahan Bootstrap untuk tampilan yang lebih menarik.

Buat file resources/views/layouts/app.blade.php. Ini akan menjadi template utama.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'Laravel Dynamic Layout')</title>
    <!-- Include Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <!-- Header Partial -->
    @include('partials.header')

    <div class="container mt-4">
        <!-- Konten Utama -->
        @yield('content')
    </div>

    <!-- Sidebar (Opsional) -->
    @hasSection('sidebar')
        <div class="sidebar">
            @yield('sidebar')
        </div>
    @endif

    <!-- Footer Partial -->
    @include('partials.footer')

    <!-- Script Bootstrap -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Penjelasan Blade Syntax:

  • @yield('title', 'Default Title'): Menampilkan konten dari section title. Jika tidak ada, gunakan nilai default.
  • @include('partials.header'): Memasukkan file Blade lain (partial) ke dalam layout.
  • @hasSection('sidebar'): Mengecek apakah ada section sidebar di child view.
  • @yield('content'): Area utama untuk konten halaman.

Baca juga: Tutorial Laravel: Membuat Slug Otomatis dan Unik.

  1. Membuat Partials View

Partial digunakan untuk komponen yang dipakai ulang (contoh: header, footer).

Contoh Partial Header (resources/views/partials/header.blade.php):

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" href="/">My App</a>
        <div class="navbar-nav">
            <a class="nav-link" href="/">Home</a>
            <a class="nav-link" href="/about">About</a>
        </div>
    </div>
</nav>

Contoh Partial Footer (resources/views/partials/footer.blade.php):

<footer class="bg-dark text-white mt-5">
    <div class="container py-4">
        <div class="row">
            <div class="col-md-6">
                <h5>My App</h5>
                <p>© 2025 My App. All rights reserved.</p>
            </div>
            <div class="col-md-6 text-end">
                <ul class="list-unstyled">
                    <li><a href="/about" class="text-white text-decoration-none">About Us</a></li>
                    <li><a href="/contact" class="text-white text-decoration-none">Contact</a></li>
                </ul>
            </div>
        </div>
    </div>
</footer>
  1. Membuat Child View

Buat halaman yang meng-extend master layout, contoh resources/views/home.blade.php:

@extends('layouts.app')

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

@section('content')
    <div class="row">
        <div class="col-md-8">
            <h1>Selamat Datang!</h1>
            <p>Ini adalah contoh konten halaman utama.</p>
        </div>
        <div class="col-md-4">
            <!-- Sidebar Section -->
            @section('sidebar')
                <div class="card">
                    <div class="card-body">
                        <h5>Menu Tambahan</h5>
                        <ul>
                            <li>Link 1</li>
                            <li>Link 2</li>
                        </ul>
                    </div>
                </div>
            @endsection
        </div>
    </div>
@endsection

Contoh untuk halaman About, resources/views/about.blade.php:

@extends('layouts.app')

@section('title', 'About Us')

@section('content')
    <div class="row">
        <div class="col-md-12">
            <h1>About Us</h1>
            <p>Ini adalah halaman tentang kami.</p>
        </div>
    </div>
@endsection

Penjelasan Blade Syntax:

  • @extends('layouts.app')Menentukan bahwa halaman ini menggunakan template app.blade.php.
  • @section('title'):: Mengisi section title di master layout.
  • @section('content'): Mengisi area konten utama.
  • @endsection: Menutup section
  1. Mengatur Routing

Buka file routes/web.php dan tambahkan route untuk halaman home dan about:

<?php

use Illuminate\Support\Facades\Route;

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

// Route untuk halaman About
Route::get('/about', function () {
    return view('about');
});

Cara Kerja Layout Dinamis

Dengan cara di atas kita mempelajari bagaimana fitur-fitur Blade di Laravel bekerja bersama untuk membuat layout yang dinamis dan modular. Pertama, @extends digunakan untuk menghubungkan sebuah halaman (child view) ke master layout. Dengan kata lain, halaman tersebut akan mewarisi struktur dan desain dari master layout yang telah didefinisikan. Ini memungkinkan kita untuk menjaga konsistensi tampilan di seluruh aplikasi tanpa perlu menulis ulang kode yang sama.

Selanjutnya, @section dan @endsection digunakan untuk mendefinisikan blok konten yang akan diisi ke dalam area tertentu di master layout. Misalnya, kita dapat membuat section untuk judul halaman (@section('title')) atau konten utama (@section('content')). Section-section ini kemudian akan ditempatkan di dalam master layout menggunakan @yield, yang berfungsi untuk menampilkan konten dari section yang didefinisikan di child view. Dengan cara ini, kita dapat mengisi area-area tertentu di master layout dengan konten yang berbeda-beda untuk setiap halaman.

Selain itu, @include digunakan untuk menyisipkan file partial, seperti header atau footer, ke dalam master layout atau halaman lainnya. Partial adalah komponen UI yang dapat digunakan kembali, sehingga kita tidak perlu menulis ulang kode yang sama di setiap halaman. Ini membantu mengurangi duplikasi kode dan memudahkan proses maintenance.

Terakhir, @yield adalah tempat di mana konten dari section yang didefinisikan di child view akan ditampilkan. Misalnya, jika kita memiliki section content di child view, maka @yield('content') di master layout akan menampilkan konten tersebut. Dengan kombinasi fitur-fitur ini, kita dapat membuat layout yang dinamis, modular, dan mudah dikelola, sehingga pengembangan aplikasi menjadi lebih efisien dan terstruktur.

Dengan menggunakan Blade Template dan layout yang dinamis, kita bisa mengelola tampilan website Laravel secara lebih efisien dan rapi. Layout dinamis memungkinkan kita untuk memisahkan struktur utama dengan konten halaman sehingga lebih mudah dalam pemeliharaan dan pengembangan. Selain itu, penggunaan @yield(), @section(), @extends(), dan @include() memungkinkan kita membangun halaman yang lebih modular dan fleksibel. Dengan tambahan Bootstrap, tampilan website menjadi lebih menarik dan responsif. Oleh karena itu, jika belum, maka sangat disarankan untuk selalu menggunakan pendekatan ini dalam proyek Laravel milikmu agar pengelolaan tampilan menjadi lebih fleksibel dan profesional.

Jika kamu ingin meningkatkan keamanan formulir di Laravel, kamui bisa menambahkan reCAPTCHA untuk melindungi dari bot dan spam. Panduan lengkapnya dapat kamui temukan di artikel kami tentang Cara Menambahkan Verifikasi "I'm Not a Robot" di Laravel: Tingkatkan Keamanan Formulir dengan reCAPTCHA.