Pada part sebelumnya, kita telah membuat layout website menggunakan fitur dari blade, Ternyata, blade memiliki banyak fitur lainnya. Salah satunya adalah layout extension. Layout extension adalah fitur yang memungkinkan kita untuk menggunakan menggunakan kode program lain pada kode program lainnya. Contohnya adalah kita dapat menuliskan kode program untuk footer sekali saja dan menggunakannya disemua tampilan.
Kerangka tampilan yang akan kita buat meliputi layout yang akan kita gunakan di semua tampilan website, yaitu terdapat header, content, dan footer.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
@include('layout.styling')
<title>@yield('title')</title>
</head>
<body>
@include('layout.header')
@yield('content')
@include('layout.footer')
@include('layout.scripts')
@yield('script')
<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>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>
@include adalah blade helper yang digunakan untuk mengikutikan kode program dari file lain. Helper ini akan menerima satu parameter, yaitu lokasi dari file yang akan dikutsertakan. Pada contoh diatas, paramter yang diberikan adalah layouts/header , artinya kita akan mengikutsertakan kode program dari file resources/views/layouts/header.blade.php@yield adalah blade helper yang digunakan untuk menyediakan suatu tempat yang nantinya akan diisi oleh kode program dari file lain.
Kode program untuk bagian header akan kita pisahkan menjadi file baru yaitu header.blade.php . Berikut adalah kode programnya
<header>
<h1>Halaman Header</h1>
</header>
Begitu pula untuk kode program pada bagian footer akan kita pisahkan menjadi file baru yaitu footer.blade.php . Berikut adalah kode programnya
<footer>
<h3>Halaman Footer</h3>
</footer>
Untuk bagian title dan content-nya sendiri akan kita gunakan pada tiap halaman page untuk membuat tampilan yang berbeda sesuai keinginan kita. Berikut adalah kode program untuk tampilan home.
@extends('layout.template')
@section('title', 'Halaman Home')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h6>Halaman Home</h6>
<ul>
<li>Data 1</li>
<li>Data 2</li>
<li>Data 3</li>
<li>Data 4</li>
<li>Data 5</li>
</ul>
</div>
</div>
</div>
</div>
</div>
@endsection
Sulfikardi
Web Design & Web Programming
Halo, saya seorang Web Developer yang terbiasa mengembangkan website
menggunakan HTML, CSS, Javascript, PHP, MYSQL, dan Laravel. Disini saya akan membagikan pengalaman saya dalam membangun dan mengembangan website yang responsif dan dinamis
01 Nov 2021
Sulfikardi
797
Web Design
