Laravel View dan Blade merupakan salah fitur dari Laravel yang memudahkan pengembang web untuk memisahkan tampilan dengan logic.
Views adalah representasi visual dari suatu halaman web yang pada umumnya bertugas untuk menampilkan data yang diterima oleh Controller dari Model. Dalam hal ini Views adalah bagian dari sistem Laravel di mana HTML dihasilkan dan kemudian ditampilkan di layar pengguna. Penggunaan Views sangat membantu pengembangan web khususnya untuk merawat dan memberikan tambahan fungsi, karena memisahkan logic atau program utama dengan bagian tampilan.
Blade adalah fitur yang disediakan Laravel untuk proses templating sederhana namun sangat bermanfaat dalam proses pengembangan tampilan halaman web. Tidak seperti fitur templating PHP populer lainnya, Blade tidak membatasi pemrogram untuk menggunakan kode PHP biasa dalam membuat kode untuk tampilan. Semua tampilan Blade dikompilasi ke dalam kode PHP biasa dan kemudian disimpan dalam cache hingga diubah, yang berarti Blade pada dasarnya tidak menambahkan beban atau overhead pada saat aplikasi dijalankan.
File tampilan blade menggunakan ekstensi file .blade.php dan biasanya disimpan di direktori resources/views. Dalam hal ini Blade pada Laravel menggunakan basis template inheritance dan sections.
Salah satu fungsi dari Laravel Blade templating adalah penggunaan layout, agar tampilan yang berulang misalnya header, footer, sidebar dan sebagainya tidak perlu dibuat berkali-kali sehingga rawan inkonsistensi. Pada umumnya layout ditempatkan dalam sebuah folder yang bernama layout dalam folder views, namun demikian programmer tidak dibatasi apabila ingin menggunakan nama lain.
Membuat Template Dinamis Dengan Template Blade Laravel
Di sini kita akan mencoba membuat 3 buah halaman website dinamis sederhana dan belum membuat pengolahan data dan penerapan logika yang rumit.
Tahap pertama kita buat dulu project laravelnya, pada contoh kali ini saya membuat project laravel dengan nama belajarblade. Untuk tahapan instalasinya kita buat dengan sintak :
composer create-project --prefer-dist laravel/laravel belajarblad
Untuk tahapan instalasinya dilahkan baca materi sebelumnya di https://agussuratna.net/2020/11/27/cara-install-laravel-8-di-windows/
Karena kita akan membuat 3 buah halaman sebagai contoh, maka sekarang buat 3 buah route pada belajarblade/routes/web.php.
belajarblad/routes/web.php
<?php
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
// route bawaan default laravel
Route::get('/', function () {
return view('welcome');
});
// route blog
Route::get('/blog', 'BlogController@home');
Route::get('/blog/tentang', 'BlogController@tentang');
Route::get('/blog/kontak', 'BlogController@kontak');
Perhatikan route di atas :
- Pada saat kita mengakses route /blog, maka yang akan dijalankan adalah method home yang ada di dalam controller BlogController.
- Pada saat kita mengakses route /blog/tentang, maka yang akan dijalankan adalah method tentang yang ada di dalam controller BlogController.
- Pada saat kita mengakses route /blog/kontak, maka yang akan dijalankan adalah method kontak yang ada di dalam controller BlogController.
Karena route nya akan kita jalankan pada controller BlogController, sekarang kita buat dulu controller BlogControllernya, karena kita belum punya controller dengan nama BlogController.php.
Di sini saya membuat controller dengan menggunakan perintah php artisan.
Masuk ke direktori project laravel kita, dan ketik :
php artisan make:controller BlogController
Seperti gambar berikut :
Setelah selesai membuat BlogController.php, sekarang kita buat method home, method tentang, method kontak lengkap dengan pemanggilan view nya masing-masing.
belajarblad/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 tentang(){
return view('tentang');
}
public function kontak(){
return view('kontak');
}
}
Perhatikan syntax di atas
- Method home memanggil view home
- Method tentang memanggil view tentang
- Method kontak memanggil view kontak
Sealnjutnya kita akan membuat template master nya terlebih dulu. Template master yang dimaksud di sini adalah template induk nya, dengan cara buat sebuah view baru dengan nama utama.blade.php.
belajarblad/resources/views/utama.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Tutorial Laravel 8 #6 : Template Blade Laravel</title>
</head>
<body>
<header>
<h2>Blog Pertamaku</h2>
<nav>
<a href="/blog">HOME</a>
|
<a href="/blog/tentang">TENTANG</a>
|
<a href="/blog/kontak">KONTAK</a>
</nav>
</header>
<hr/>
<br/>
<br/>
<!-- bagian judul halaman blog -->
<h3> @yield('judul_halaman') </h3>
<!-- bagian konten blog -->
@yield('konten')
<br/>
<br/>
<hr/>
<footer>
<p>© <a href="https://agussuratna.net">www.agussuratna.net</a>. 2020</p>
</footer>
</body>
</html>
utama.blade.php ini kita jadikan sebagai template induk dari template dinamis yang ingin kita buat, dimana pada utama.blade.php ini kita buat segala sesuatu yang tidak berubah-ubah seperti menu, footer dan nama blog nya.
Slanjutnya kita buat semua view-view yang akan dipanggil pada method yang akan kita hubungkan dengan template view uatama ini. Buat 3 buah view baru, yaitu view home, tentang dan kontak.
belajarblad/resources/views/home.blade.php
<!-- Menghubungkan dengan view template utama -->
@extends('utama')
<!-- isi bagian judul halaman -->
<!-- cara penulisan isi section yang pendek -->
@section('judul_halaman', 'Halaman Home')
<!-- isi bagian konten -->
<!-- cara penulisan isi section yang panjang -->
@section('konten')
<p>Ini Adalah Halaman Home</p>
<p>Selamat datang !</p>
@endsection
belajarblad/resources/views/tentang.blade.php
<!-- Menghubungkan dengan view template utama -->
@extends('utama')
<!-- isi bagian judul halaman -->
<!-- cara penulisan isi section yang pendek -->
@section('judul_halaman', 'Halaman Tentang')
<!-- isi bagian konten -->
<!-- cara penulisan isi section yang panjang -->
@section('konten')
<p>Ini Adalah Halaman Tentang</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. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
@endsection
belajarblad/resources/views/kontak.blade.php
<!-- Menghubungkan dengan view template utama -->
@extends('utama')
<!-- isi bagian judul halaman -->
<!-- cara penulisan isi section yang pendek -->
@section('judul_halaman', 'Halaman Kontak')
<!-- isi bagian konten -->
<!-- cara penulisan isi section yang panjang -->
@section('konten')
<p>Ini Adalah Halaman Kontak</p>
<table border="0">
<tr>
<td>Email</td>
<td>:</td>
<td>admin@agussuratna.net</td>
</tr>
<tr>
<td>Hp</td>
<td>:</td>
<td>08098988888</td>
</tr>
</table>
@endsection
Penjelasan tentang fungsi-fungsi yang ada pada view utama, home, tentang dan kontak di atas.
Pada view utama.blade.php. disana ada fungsi @yield() yang kita buat. Fungsi @yield() berguna untuk bagian-bagian tertentu pada template website dan nama bagiannya bisa kita tulis di dalam parameter fungsi @yield(). Seperti yang sudah dibuat, di sana ada bagian judul_halaman dan bagian konten.
Selanjutnya pada bagian view lainnya, akan kita hubungkan ke template utama.blade.php ini dan tiap-tiap bagian @yield nya kita isi konten nya dari file view-view yang lainnya. Selanjutnya kita buka file home.blade.php.
Dari gambar di atas bisa kita lihat dengan jelas. Pertama pada view home kita hubungkan dulu ke view utama dengan menggunakan fungsi @extends. kemudian semua isi yang ada diantara fungsi @section akan di tampilkan pada bagian fungsi @yield. Begitu juga dengan view kontak dan view tentang, intinya akan sama saja.
Selanjutnya kita coba akses project kita, jangan lupa mengaktifkannya dulu dengan project laravel kita dengan sintak :
php artisan serve
Kemudian kita akses localhost:8000/blog
Perhatikan pada gambar di atas, pada saat route ‘/blog’ di akses, maka akan dijalankan method home pada controller BlogController, seperti yang sudah kita set pada route laravel sebelumnya di atas tadi. Kemudian method home pada controller BlogController akan memanggil view ‘home.blade.php’ , begitu juga dengan halaman lainnya.
Selanjutnya kita coba klik pada menu kontak dan tentang :
