Belajar Blade Template Di Laravel 5

Blade adalah template engine bawaan dari framework laravel. Keuntungan menggunakan template engine ini adalah kemudahan dalam syntax yang dipakai. Sehingga menggunakan blade dalam mengatur layout web yang kita bangun akan menjadi lebih mudah. Penggunaan blade template harus menggunakan ekstensi .blade.php. Anda bisa membaca kembali snytax dasar blade pada artikel Berkenalan Dengan Blade Template.

Setelah mengetahui dasar-dasar syntax pada blade template, sekarang kita akan mencoba membuat layout sederhana dengan menggunakan css dan script jquery. Bagi pengguna yang baru beralih dari laravel 4 ke laravel 5, mungkin akan sedikit kebingungan pada pemanggilan file css-nya karena memang sedikit berbeda syntaxnya. Ada yang berbeda pada laravel 5 pada pemanggilan css dan script jquery menggunakan html.

Jika sebelumnya pada laravel 4 kita menggunakan syntax berikut.

{{ HTML::style('bootstrap/css/bootstrap.min.css') }}
{{ HTML::style('bootstrap/css/bootstrap-theme.min.css') }}

Maka pada lavarel 5 mengganti tag {{ … }} menjadi {!! … !!} seperti berikut.

{!! HTML::style('bootstrap/css/bootstrap.min.css') !!}
{!! HTML::style('bootstrap/css/bootstrap-theme.min.css') !!}

Untuk lebih memudahan kita Belajar Blade Template Di Laravel 5, langsung kita buat satu contohnya, ikuti langkah-langkah berikut.
Pertama download file berikut bootstrap, atau Anda bisa menggunakan file css yang lain. Kemudian taruh pada folder public.
Buat folder tampil di direktori resources/views untuk menampilkan konten utama kita.
Buat file baru index.blade.php di resources/views/tampil

index.blade.php
@extends('layouts.default')
@section('content')

<div class="panel panel-default"">
	 <div class="panel-body">
			<h2 align="center"> {{ "BELAJAR BLADE TEMPLATE ENGINE" }} </h2>
	 </div>
</div>	 		
@stop

Anda bisa menambahkan beberapa file yang ingin ditampilkan pada folder tampil untuk kemudian dipanggil melalui router.
Buat folder layouts di resources/views dan buat file baru default.blade.php

default.blade.php
<!DOCTYPE html>
<html>
<head>
	@include('includes.head')
</head>
	<body style="margin-top: 80px">
		<div class="container">
			<header class="row">
				@include('includes.header')
			</header>
			<div id="main" class="row" style="margin-left: 60px;margin-right: 60px">
				@yield('content')
			</div>
			
			<footer>
				@include('includes.footer')
			</footer>
		</div>
	</body>
</html>

Buat folder includes di resources/views
Buat file head.blade.php, perhatikan syntax untuk memanggil file css yang berbeda dengan laravel 4

head.blade.php
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="author" content="erwien">
<title>Larablade</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

{!! HTML::style('bootstrap/css/bootstrap.min.css') !!}
{!! HTML::style('bootstrap/css/bootstrap-theme.min.css') !!}

Buat file header.blade.php

header.blade.php
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>  
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><i class='fa fa-linux'></i> LARABLADE - (LARAVEL BLADE TEMPLATE)</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="{{URL::to('/')}}"></i> Home</a></li>
         <li><a href="{{URL::to('/about')}}"></i> About</a></li>
      </ul>
    </div>
  </div>
</nav>

Buat file footer.blade.php

footer.blade.php
<div align="center">Copyright &copy; <a href="http://firman.salatigadev.com" target="_blank">firman.salatigadev.com</a></div>
@include('includes.js')

Terakhir buat file js.blade.php pada folder yang sama

js.blade.php
{!! HTML::script('bootstrap/js/jquery-2.1.1.min.js') !!}
{!! HTML::script('bootstrap/js/bootstrap.min.js') !!}

Sekarang kita perlu menambahkan router untuk menghubungkan halaman. Untuk mengikuti konsep MVC biasanya sebuah url dipetakan ke sebuah controller, maka kita akan membuat halaman url di routers menggunakan controller.
Buat routenya pada direktori app/Http/routers.php

routers.php
<?php

Route::get('/', 'HomeController@index');

Route::get('about', 'HomeController@about');

Buat file HomeController.php di app/Http/Controllers

HomeController.php
<?php namespace App\Http\Controllers;

class HomeController extends Controller {

	public function index()
	{
		return view('tampil.index');
	}

	public function about()
	{
		return view('tampil.about');
	}
}

Anda dapat menambahkan lebih banyak file untuk sidebar misalnya atau memasukan elemen-elemen lainya kedalam layout. Jika masih tidak mau menampilkan layoutnya atau gagal, mungkin butuh konfigurasi pada html-nya karena laravel 5 tidak secara default include html. Anda bisa coba pada artikel berikut Konfigurasi Html Pada Laravel 5.

Sekian Tutotial Programming kali ini semoga bermanfaat.

You may also like...

4 Responses

  1. dj says:

    maf, mau nanya kl script html seperti ini:

    $(document).ready(function(){
    $(“.dTree”).dTree(); });

    ingin di masukan ke blade laravel, bagaimana y

  2. yadi says:

    FatalErrorException in 2359517f4629995fb89027b25f4f9a1bbfd98888.php line 5:
    Class ‘HTML’ not found

    Kenapa tuh gan?

  3. jamal says:

    Terima kasih… manfaat banget nih…

Leave a Reply

Your email address will not be published. Required fields are marked *