Blade adalah templating engine milik laravel yang simple dan powerful. Berdeda dengan templating engine poluler lainnya, blade tidak membatasi kalian dalam penggunaan PHP native didalam file view. Blade view menggunakan .blade.php file extension dan disimpan di direktori resources/views.
Membuat template
Sebelum kita mulai, perhatikan struktur direktori di view.
- views
-- layouts
---- templates
------ navbar.blade.php
---- default.blade.php
-- home.blade.php
Pertama kita buat sebuah file dengan nama navbar.blade.php, file ini bertujuan untuk menampilkan navigasi bar dengan memakai styling dari bootstrap di direktori resources/views/layouts/templates/navbar.blade.php.
<!-- resources/views/layouts/templates/navbar.blade.php -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Kemudian, didalam folder layout kita buat file baru dengan nama default.blade.php. File ini nantinya berisi dokumen html lengkap untuk memanggil aset-aset yang dibutuhkan dan lain-lainnya.
<!-- resources/views/layouts/default.blade.php -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Admin | Dashboard</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="{{ URL::asset('css/custom.css') }}">
<link rel="stylesheet" href="{{ URL::asset('adminlte/bootstrap/css/bootstrap.min.css ')}}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
@include('layout/templates/navbar.blade.php')
<div class="container">
@yield('content')
</div>
</body>
</html>
<!-- resources/views/home.blade.php -->
@extends('layout.default')
@section('content')
<h1>Hello World</h1>
@endsection
Oke, kita sudah selesai pengaturan direktori dan file di view, untuk konfigurasi di router kita bahas di sesi berikutnya. Terimakasih.
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Admin | Dashboard</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="{{ URL::asset('css/custom.css') }}">
<link rel="stylesheet" href="{{ URL::asset('adminlte/bootstrap/css/bootstrap.min.css ')}}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
@include('layout/templates/navbar.blade.php')
<div class="container">
@yield('content')
</div>
</body>
</html>
Naah, untuk file yang terakhir kita buat home.blade.php. Check it out !!!!
@extends('layout.default')
@section('content')
<h1>Hello World</h1>
@endsection
Oke, kita sudah selesai pengaturan direktori dan file di view, untuk konfigurasi di router kita bahas di sesi berikutnya. Terimakasih.