Blade adalah sebuah templating engine yang sudah terdapat di laravel dimana dalam blade ini kita bisa menggunakan sintaks php dengan tambahan sintaks blade itu sendiri. Cara menampilkan data di blade juga cukup mudah seperti yang sudah di bahas pada artikle sebelumnya Struktur Folder, Routes & View Laravel dimana pada route kita kirim data yang kemudian ditangkap oleh blade di view.
Misal pada route kita akan mengirimkan data dalam bentuk array dengan variabel/key name dengan value Samanta yang akan dikirim ke halaman welcome (file welcome.blade.php)
Route::get('/', function () {
return view('welcome', ['name' => 'Samantha']);
});
Lalu pada view welcome atau file welcome.blade.php kita tinggal menuliskan:
Hello, {{ $name }}
Maka ketika kita akses browser, akan muncul Hello, Samanta. Penjelasan tentang blade kamu bisa akses disitus laravel pada Blade Template.
Teknik Templating Blade
Untuk membuat templating blade, kali ini kita akan gunakan bootstrap. Silahkan copy starter template bootstrap, lalu paste di file home.blade.php. Kemudian tambahkan navbar bootstrap juga dengan meng-copy dari template navbar bootstrap. Sehingga file home.blade.php menjadi seperti berikut:
<!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.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<title>Hello, Kopikuka</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Kopikuka</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/blog">Blog</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h1>Hello, Home!</h1>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
-->
<script src="js/script.js"></script>
</body>
</html>
Sekarang file tersebut akan kita pecah-pecah menjadi sebuah template agar kita tidak perlu menulis kode ulang disetiap file. Jadi kita hanya akan memanggil file tersebut tanpa menulis ulang kodenya. Perhatikan gambar dibawah, buatlah struktur file dan folder seperti pada gambar:
Perhatikan gambar di atas. Layout utama kita adalah
main.blade.php. Dimana file main ini akan dipanggil atau extends oleh semua file
child view. Karena disetiap file child view kita butuh navbar, maka kita harus menuliskan kode navbar disetiap file tersebut. Namun berkat sistem blade templating, kita hanya menulis sekali kode navbar. Perhatikan kode pada
main.blade.php berikut ini:
<body>
{{-- memanggil navbar --}}
@include('partials.navbar');
{{-- memanggil file child view dengan section bernama isi --}}
<div class="container">
@yield('isi') --> isi adalah nama section yg ada di child view
</div>
</body>
Pada kode main.blade.php di atas menjadi sedikit dibanding sebelumnya karena sudah dipecah. Pada kode di atas, kita menginclude file navbar ke dalam file main, karena kode navbar dipisah pada file navbar.blade.php. Berikut isi file navbar:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="/">Kopikuka</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/blog">Blog</a>
</li>
</ul>
</div>
</div>
</nav>
Lalu file main juga akan memanggil semua isi dari file child view yang berada di dalam section. Pada kode di atas, semua section yang bernama 'isi' yang ada di semua file child view akan dipanggil atau di eksekusi di dalam @yield seperti berikut @yield('isi') Jadi yield ini fungsinya untuk memanggil @section() yang ada di file child view dengan syarat child view harus mengextends file main dan nama section harus sama saat dipanggil di yield. Seperti pada contoh, section bernama isi dipanggil oleh yield dengan nama section isi @yield('isi')
Pada setiap child view, kita harus menuliskan kode berikut:
@extends('layouts.main')
@section('isi') --> isi adalah nama section
ini area isi yang akan di eksekusi oleh @yield
@endsection
Contoh kode pada file home.blade.php
@extends('layouts.main')
@section('isi')
<h1>Ini halaman Home</h1>
@endsection
Contoh kode pada file about.blade.php
@extends('layouts.main')
@section('isi')
<h1>Halaman About</h1>
<ul>
<li>Nama : {{ $nama }}</li>
<li>Email : {{ $email }}</li>
<li>Tanggal Lahir : {{ $ttl }}</li>
<li>Foto : <img src="img/{{ $foto }}" alt="" width="80"></li>
</ul>
@endsection
Contoh kode pada file blog.blade.php
@extends('layouts.main')
@section('isi')
<h1>Ini halaman Blog</h1>
@endsection
Jadi kalau di jalankan, akan tampil seperti pada gambar di bawah. Kita tidak menulis berulang kode navbar pada setiap file karena sudah dibuat template. Kita hanya menulis sekali kode navbar pada file navbar yang kemudia dipanggil ke oleh main.blade.php dimana file main juga akan mengeksekusi file child view saat chile view dijalankan karena di child view memanggil file main. Jadi istilahnya kedua file parent view dan child view saling mengeksekusi.
Untuk title di browser, agar dinamis, kita tinggal merubah di route-nya saja misal file home, kita tinggal tambahkan array "title" => "Home" seperti berikut:
Route::get('/', function () {
return view('home', [
"title" => "Home"
]);
});
Route::get('/about', function () {
return view('about', [
"title" => "About",
"nama" => "Kopikuka",
"email" => "kopikuka@gmail.com",
"ttl" => 1990,
"foto" => "kopikuka.jpeg"
]);
});
Route::get('/blog', function () {
return view('blog', [
"title" => "Blog"
]);
});
Lalu kita tangkap variabel/key di file main seperti berikut <title>{{ $title }}</title>
Jadi nanti setiap klik halaman/menu, akan menampilkan title sesuai nama halamannya.
Tidak ada komentar:
Posting Komentar