Template blade merupakan salah satu fitur keren dari Laravel yang dapat memudahkan kita dalam membuat aplikasi/website khususnya saat kita membuat template yang dinamis.
Di tutorial sebelumnya, kita juga pernah berkenalan sedikit dengan template blade Laravel.
Baca juga: Belajar Route & View pada Laravel 8.
Membuat Template Dinamis Dengan Sistem Template Blade Laravel
Sebuah website yang bagus, pasti menggunakan template yang dinamis. Karena kita pasti tidak ingin melakukan perubahan di dalam semua file jika ada perubahan kecil, itu akan memakan banyak waktu. Namun dengan template yang dinamis, sekali kita melakukan perubahan, efeknya akan berpengaruh ke semua file. Jadi, kita tidak perlu capek-capek mengubah satu per satu file tersebut.
Untuk memantapkan pemahaman, kita akan langsung mencoba studi kasus, yaitu membuat layout blog dengan 3 buah halaman dinamis.
Karena kita akan membuat 3 buah halaman dinamis sebagai contoh, sekarang kita akan membuat routenya terlebih dahulu di web.php.
routes/web.php
use App\Http\Controllers\BlogController;
Route::get('/blog', [BlogController::class, 'home']);
Route::get('/blog/about', [BlogController::class, 'about']);
Route::get('/blog/contact', [BlogController::class, 'contact']);
Perhatikan route di atas:
- Pada saat kita mengakses /blog, maka controller akan menjalankan method home yang ada dalam BlogController.
- Pada saat kita mengakses /blog/about, maka controller akan menjalankan method about yang ada dalam BlogController.
- Pada saat kita mengakses /blog/contact, maka controller akan menjalankan method contact yang ada dalam BlogController.
Karena route nya akan kita jalankan pada BlogController, kita akan membuat controller tersebut. Silakan baca cara membuat controller di laravel.
Masuk ke direktori project laravel, dan ketik command berikut.
php artisan make:controller BlogController
Seperti gambar berikut.
Setelah selesai membuat controller, kita akan membuat method home, about dan contact dengan memanggil file blade view masing-masing.
App\Http\Controllers\BlogController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class BlogController extends Controller
{
public function home()
{
return view('home');
}
public function about()
{
return view('about');
}
public function contact()
{
return view('contact');
}
}
Perhatikan syntax code di atas.
- Method home() memanggil view home.
- Method about() memanggil view about.
- Method contact() memanggil view contact.
Kita akan membuat ketiga file blade mulai dari home, about dan contact. Namun sebelum itu kita akan membuat template masternya terlebih dahulu. Template master di sini adalah template induknya yang akan menampung halaman-halaman seperti home, about dan contact. Silakan buat view baru dengan nama master.blade.php.
resources/views/master.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Sistem Template Blade Laravel</title>
</head>
<body>
<header>
<h1>Belajar Blade di Laravel</h1>
<nav>
<a href="/blog">BLOG</a>
|
<a href="/blog/about">ABOUT</a>
|
<a href="/blog/contact">CONTACT</a>
</nav>
</header>
<hr />
<br />
<br />
<!-- bagian judul halaman blog -->
<h2>@yield('page_title')</h2>
<!-- bagian konten blog -->
@yield('content')
<br />
<br />
<footer><p>© Belajar Blade di Laravel</p></footer>
</body>
</html>
View master.blade.php ini kita jadikan sebagai template induk karena isinya tidak berubah seperti nama blog, menu, dan footer blognya.
Sekarang kita akan membuat 3 file blade yaitu untuk home, about, dan contact yang akan kita hubungkan dengan template induk.
resources/views/home.blade.php
<!-- menghubungkan dengan view template master -->
@extends('master')
<!-- bagian judul halaman -->
<!-- cara penulisan section yang pendek -->
@section('page_title', 'Halaman Home')
<!-- cara penulisan section yang panjang -->
@section('content')
<p>Ini adalah halaman home</p>
<p>Selamat datang!</p>
@endsection
resources/views/about.blade.php
<!-- menghubungkan dengan view template master -->
@extends('master')
<!-- bagian judul halaman -->
<!-- cara penulisan section yang pendek -->
@section('page_title', 'Halaman About')
<!-- cara penulisan section yang panjang -->
@section('content')
<p>Ini adalah halaman about</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
@endsection
resources/views/contact.blade.php
<!-- menghubungkan dengan view template master -->
@extends('master')
<!-- bagian judul halaman -->
<!-- cara penulisan section yang pendek -->
@section('page_title', 'Halaman Contact')
<!-- cara penulisan section yang panjang -->
@section('content')
<p>Ini adalah halaman contact</p>
<table>
<tr>
<td>Email</td>
<td>:</td>
<td>contact@aantamim.id</td>
</tr>
<tr>
<td>No. HP</td>
<td>:</td>
<td>085335002433</td>
</tr>
</table>
@endsection
Jika kamu perhatikan pada keempat file blade terdapat fungsi-fungsi blade seperti @extends, @section, @yield.
Berikut ini penjelasan sistem templating blade pada gambar di atas.
- Fungsi @extends(‘master’) adalah penanda bahwa kita menggunakan master.blade.php sebagai layout utama website.
- Fungsi @yield(‘page_title’) akan menampilkan string “Home” yang berada dalam @section(‘page_title’).
- Fungsi @yield(‘content’) akan menampilkan tag html yang berada dalam @section(‘content’).
Begitu juga dengan view contact dan about, intinya sama saja.
Sekarang kita akan mencoba akses ketiga view tadi pada url berikut.
127.0.0.1:8000/blog
127.0.0.1:8000/blog/about
127.0.0.1:8000/blog/contact
Selesai sudah kita mempelajari sistem templating blade pada Laravel, kamu dapat melihat lebih lengkap fungsi-fungsi blade yang ada di https://laravel.com/docs/blade.
