Memulai Web Development dengan Laravel - Menggunakan Blade Template

Muhammad Arslan 17 April 2017

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 footer dan nav di setiap file view yang kita tulis.

##Menggunakan Layout

Sekarang kita akan menggunakannya kepada dua view yang akan meng-extend layout 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 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 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 folder resources/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 controller untuk 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:

http://localhost/laraweb/public/index.php/demo-blade/looping

Dengan demikian kamu dapat memilih apakah akan menggunakan for atau foreach saat menggunakan Blade. Tergantung kasus yang akan kamu temui nanti.

Tags
Tutorial
Share to
FacebookTwitterLinkedIn