LARAVEL TUTORIAL #5 BLADE (TEMPLATE ENGINE)


MENGENAL BLADE

Sebelumnya kita telah membuat view sebagai respon untuk menampilkan data VIEW (Menampilkan Data). Sekarang saatnya kita membuat sebuah blade. Blade adalah template engine Laravel. Pada dasarnya Blade adalah view, namun dengan blade kita memiliki sintak-sintak tambahan yang dapat membantu kita untuk menampilkan data. Dan hal ini yang paling menarik dari Blade adalah fitur Template Inheritance.

MENGUBAH VIEW HOMEPAGE DAN ABOUT MENJADI BLADE

Pada Laravel #4 kita telah membuat dua buah file view yang bernama homepage.php dan about.php, dan untuk mengubahnya menjadi file Blade cukup menambahkan ekstensi file view menjadi .blade.php. 

Langkah 1

Pada folder LaravelBlog/resources/views/pages, rename file about.php menjadi about.blade.php

Langkah 2

Pada folder LaravelBlog/resources/views/pages, rename file homepage.php menjadi homepage.blade.php

Langkah 3

Klik kanan pada direktori LaravelBlog ketikkan perintah "php artisan serve" seperti dibawah ini:


Dan klik tautan http://127.0.0.1:8000, pada browser akan menampilkan halaman homepage dan about seperti sebelumnya, bedanya sekarang adalah kedua file tersebut adalah file Blade.

MEMBUAT MASTER TEMPLATE

Pada aplikasi yang sesungguhnya, biasanya ada sebuah file view yang berfungsi sebagai master template. Jadi, file view ini berfungsi untuk mengatur layout dari aplikasi yang kita buat. Di file template tersebut , kita bisa memanggil sebuah resource yang diperlukan, misalnya file style css, skrip javascript, bahkan bisa juga memanggil UX Framework seperti Bootstrap. 

Untuk membuat master template, lakukan langkah-langkah berikut:

Langkah 1

Buatlah sebuah file bernama template.blade.php, kemudian simpan di LaravelBlog/resource/views. berikut ini isi dari file template.blade.php:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Laravel Blog</title>
</head>
<body>
    @yield('main')

    @yield('footer')
</body>
</html>


Penjelasan:


Perintah @yield() adalah perintah Blade. Fungsinya adalah untuk menandai pada bagian itu akan ditempati potongan kode yang biasa disebut section. Nama dari section tersebut disertakan dalam tanda kurung dibelakang perintah @yield(). Dalam hal ini, nama section untuk bagian tersebut adalah main dan footer. Nanti kita akan membuat section main  dan section footer pada sub-sub berikutnya.


MEMBUAT CHILD PAGE

Kita telah membuat master template. Sekarang saatnya kita membuat Child Template atau template anak untuk masing-masing file view. Gunanya agar master template yang telah kita buat sebelumnya bisa berfungsi. Untuk membuat child template ikuti langkah-langkah berikut :

Langkah 1

Pada file LaravelBlog/resources/views/pages/homepage.blade.php, ubah isinya menjadi :

@extends('template')

@section('main')
    <div id='homepage'>
    <h2>homepage</h2>
    <p>SELAMAT DATANG DI BLOG PASIR GANTING</p>
    </div>
@stop

@section('footer')
    <div id='footer'>
    <p>&copy; 2019 Laravel Blog</p>
    </div>
@stop






Penjelasan :

File homepage.blade.php berfungsi sebagai child page yang meng extends file template.blade.php, Jadi nanti file ini akan memanfaatkan file template.blade.php sebagai parent page. Pada script diatas juga terdapat kode @yield('main') dan @yield('footer'), bagian ini akan diisi section bernama main dan footer.

Langkah 2

Pada file LaravelBlog/resources/views/pages/about.blade.php, ubah isinya menjadi :

@extends('template')

@section('main')
<div id="about">
    <h2>About</h2>
    <p>Aplikasi LaravelBlog dibuat sebagai latihan untuk mempelajari Laravel</p>
</div>
@stop

Sampai disini kita telah mempelajari apa itu Blade, untuk selanjutnya kita akan mempelajari cara menggunakan Bootstrap di Laravel. Jadi follow up terus ya,,

Posting Komentar

0 Komentar