Memulai Web Development dengan Laravel - Menggunakan Blade Template
Template engine adalah salah satu fitur yang sangat diharapkan oleh web developer. Bila suatu web framework sudah memiliki built-in template engine, maka web framework tersebut akan semakin nyaman digunakan, misalnya Laravel. Web framework yang satu ini sudah memiliki template engine dengan nama Blade.
Memang di PHP ada beberapa template engine yang sudah memiliki seperti Twig. Sekarang mari kita coba gunakan Blade yang bisa mempermudah kamu dalam membuat aplikasi web dengan Laravel.
Menyiapkan Controller
Sekarang mari kita buat controller untuk demo Blade. Silahkan buat file dengan nama DemoBladeController.php di dalam app\Http\Controllers kemudian buat kode berikut di dalam file tersebut:
<?php
namespace App\Http\Controllers;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Redis;
class DemoBladeController extends Controller {
public function index() {
return view("blade_sample.index");
}
public function detail() {
return view("blade_sample.detail");
}
public function conditional() {
$nilai = 90;
return view("blade_sample.if", ['nilai' => $nilai]);
}
public function looping() {
$siswa = [
"Jajang",
"Sukmana",
"Debby",
"Ratu",
"Clara",
"Juminah",
"Inem",
"Supono"
];
return view("blade_sample.loop", ['siswa' => $siswa]);
}
}
Sekarang silahkan tambahkan route untuk controller ini di dalam routes/web.php:
// contoh blade
Route::group(["prefix"=>"demo-blade"], function () {
Route::get("/", "DemoBladeController@index");
Route::get("/detail", "DemoBladeController@detail");
Route::get("/conditional", "DemoBladeController@conditional");
Route::get("/looping", "DemoBladeController@looping");
});
Nah, dari sini ayo kita lanjut ke membuat view dan layout menggunakan Blade terlebih dahulu.
Membuat Layout Sederhana
Di dalam folder resources/views silahkan buat folder dengan nama blade_sample. Kemudian buatlah sebuah file di dalamnya dengan layout.blade.php.
Lalu buatlah kode berikut di dalam file tersebut:
<html>
<head>
<title>Laravel - @yield('title')</title>
</head>
<body>
<div class="nav">
Ini adalah nav
<hr/>
</div>
<div class="content">
@yield('content')
</div>
<div class="footer">
<hr/>
Ini adalah footer
</div>
</body>
</html>
Nantinya kode diatas akan menjadi wadah bagi kode lain yang menggunakan layout tersebut. Jadi hanya dengan sekali tulis untuk bagian yang sering muncul, maka kita akan menghemat waktu dan tenaga untuk tidak menulis ulang footerdan nav di setiap file view yang kita tulis.
Menggunakan Layout
Sekarang kita akan menggunakannya kepada dua view yang akan meng-extendlayout tadi. Silahkan buat terlebih dahulu file dengan nama index.blade.php di dalam folder blade_sample kemudian buat kode berikut di dalam file tersebut:
@extends('blade_sample.layout')
@section('title', 'Index Page')
@section('content')
<p>Ini adalah isi utama dari halaman index</p>
@endsection
Kemudian silahkan buat lagi file dengan nama detail.blade.php di dalam folderblade_sample kemudian buat kode berikut di dalam file tersebut:
@extends('blade_sample.layout')
@section('title', 'Index Page')
@section('content')
<p>Ini adalah isi utama dari halaman detail</p>
@endsection
Dan setelah selesai, silahkan lihat perbedaannya melalui URL berikut:
http://localhost/laraweb/public/index.php/demo-blade
http://localhost/laraweb/public/index.php/demo-blade/detail
Intinya, bagian section akan menjadi placeholder yang dapat diisin apapun dari child template. Dengan demikian kita tidak perlu menulis ulang bagian yang sama dari layout di setiap halaman.
Menggunakan If
Sekarang kita akan mencoba view yang menggunakan kondisional di Blade. Silahkan buat terlebih dahulu file dengan nama if.blade.php di folderresources/views/blade_sample. Kemudian buat source code berikut di dalamnya:
@extends('blade_sample.layout')
@section('title', 'Index Page')
@section('content')
@if ($nilai >= 90)
<p>Kamu mendapatkan nilai A!</p>
@elseif ($nilai >= 60 && $nilai < 90)
<p>Kamu mendapatkan nilai B!</p>
@elseif ($nilai >= 40 && $nilai < 60)
<p>Kamu mendapatkan nilai C!</p>
@elseif ($nilai >= 0 && $nilai < 40)
<p>Kamu mendapatkan nilai D!</p>
@endif
@endsection
Sekarang coba lihat hasilnya melalui URL ini:
http://localhost/laraweb/public/index.php/demo-blade/conditional
Kamu juga dapat mencoba mengubah isi variabel nilai yang ada di controlleruntuk melihat perubahan lainnya.
Menggunakan Loop
Dan yang terakhir kita akan menggunakan loop yang dimiliki oleh Blade. Silahkan buat file dengan nama loop.blade.php dan taruh file tersebut di dalam folder resources/views/blade_sample. Kemudian buat kode berikut di dalam file tersebut:
@extends('blade_sample.layout')
@section('title', 'Index Page')
@section('content')
<ul>
@foreach ($siswa as $item)
<li>{{ $item }}</li>
@endforeach
</ul>
<br/>
<ul>
@for ($i = 0; $i < 10; $i++)
<li>{{ $i }}</li>
@endfor
</ul>
@endsection
Untuk melihat hasilnya, kamu hanya perlu mengakses URL ini:
