Layout dan Section

Laravel adalah salah satu framework PHP yang sangat populer dan menawarkan banyak kemudahan dalam pengembangan aplikasi web. Salah satu fitur utama Laravel adalah sistem templating yang menggunakan Blade. Dalam tutorial ini, kita akan membahas tentang Layout dan Section dalam Blade secara detail.

1. Apa itu Layout dan Section?

  • Layout adalah template dasar yang digunakan untuk menjaga konsistensi tampilan aplikasi web kita. Layout umumnya berisi elemen-elemen statis seperti header, footer, dan navigasi.
  • Section adalah bagian di dalam layout yang dapat diisi dengan konten spesifik untuk setiap halaman. Dengan menggunakan section, kita dapat mengubah isi tanpa mengubah struktur layout secara keseluruhan.

2. Membuat Layout di Laravel

Mari kita mulai dengan membuat layout dasar:

a. Buat File Layout

Buatlah file baru bernama app.blade.php di dalam direktori resources/views/layouts.

<!-- 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 rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
    <header>
        <h1>My Laravel App</h1>
        <nav>
            <!-- Navigasi di sini -->
        </nav>
    </header>

    <main>
        @yield('content')
    </main>

    <footer>
        <p>&copy; 2023 My Laravel App</p>
    </footer>
</body>
</html>

b. Penjelasan Kode

  • @yield('title'): Menandakan area yang bisa diisi oleh setiap halaman dengan judul yang berbeda.
  • @yield('content'): Menandakan area yang bisa diisi dengan konten spesifik halaman.

3. Menggunakan Layout dalam Halaman

Setelah layout dibuat, kita dapat membuat halaman yang menggunakannya.

a. Buat File Halaman

Buat file baru bernama home.blade.php di dalam direktori resources/views.

<!-- resources/views/home.blade.php -->
@extends('layouts.app')

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

@section('content')
    <h2>Welcome to the Home Page</h2>
    <p>This is the content of the home page.</p>
@endsection

b. Penjelasan Kode

  • @extends('layouts.app'): Menunjukkan bahwa halaman ini menggunakan layout app.blade.php.
  • @section('title', 'Home Page'): Mengatur title untuk halaman ini.
  • @section('content'): Menyediakan konten spesifik yang akan dimasukkan ke dalam area @yield('content') di layout.

4. Menampilkan Halaman

Untuk menampilkan halaman yang telah kita buat, kita perlu menambahkan route di file routes/web.php.

// routes/web.php
Route::get('/home', function () {
    return view('home');
});

Sekarang, ketika kita mengunjungi http://yourapp.test/home, kita akan melihat halaman yang menggunakan layout yang telah kita buat.

Kesimpulan

Dalam tutorial ini, kita telah belajar:

  • Apa itu Layout dan Section dalam Laravel.
  • Cara membuat layout dasar menggunakan Blade.
  • Cara menggunakan layout di halaman dengan mengatur konten spesifik.

Dengan menggunakan Layout dan Section, pengembangan aplikasi menjadi lebih mudah dan terstruktur. Selamat mencoba!

PREVIOUS
NEXT