PEMULA : View | Memahami Blade dan membuat Layout

Baringin
By -
0


 
Penduluan

    Blade merupakan salah satu fitur dari Laravel yang sangat bermanfaat dalam proses pengembangan halaman web untuk memudahkan membuat tampilan pada halaman web. Dengan menggunakan Blade kita dapat meringkat koding program dengan cara membuat code satu kali untuk membuat sebuah tampilan yang berulang seperti header, navbar, dan footer. 

Sebenarnya untuk menggunakan fitur Blade Templating ini kita tidak perlu menginstall sesuatu untuk menggunakannya karena fitur Blade Templating sudah otomatis aktif apabila kita telah menginstall framework Laravel. Untuk dapat menggunakan blade kita perlu menambahkan nama blade di akhir file php pada folder views. Jika kita tidak menggunakan blade pada akhrif file maka fitur Blade Templating akan tidak bisa digunakan dan file berubah menjadi file PHP biasa.

    Membuat blade di Laravel menggunakan tanda {{ dan }}. Tanda ini sama dengan <?php echo"...." ?>. Sedangkan untuk menulis sintak PHP dapat di awali dengan tand @, seperti @if, @foreach dan lain sebagainya.

    Contoh. Kira mengirim data ke halaman view dengan bentuk data seperti berikut:

        $arr=[

               [ 'data1' =>  'Ini Data Satu']

        ];

    Kemudian data tersebut kit tangkap di view. Kita dapat menulisnya seperti berikut:

        {{ $data }}

   

 Penamaan file di dalam view harus di sertakan dengan .blade, seperti beranda.blade.php agar sintak blade dapat dibaca. 


Mengatur Routing

    Nah, Sebelum kita masuk ke blade terlebih dahulu kita akan setting Routing. Silahkan buka file web.php pada folder Routes ( Anda dapat mempelajari modul tentang route di halam ini halam ini. ) dan buatlah script berikut:

<?php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    $data = [
        'title' => 'Beranda',
        'subTit' => 'Beranda/Beranda'
    ];
    return view('v_beranda', $data);
});


Kita memiliki data berupa array dengan field terdiri dari title dan subTitle. Data ini akan kita kirim ke view. 


Membuat Field Blade

    Field Blade dibuat di dalam field User Interface, disini kita buat di dalam folder view. Untuk membuat halaman baru pada Laravel kita perlu untuk mengakses file views yang ada pada struktur folder Laravel kita. Kemudian buat file baru yang akan digunakan untuk membuat blade templating, untuk kali ini kita buat halaman beranda.

    Silahkan masuk ke struktrut Resource => View dan tambahkan satu file dengan nama "v_beranda.blade.php". Perhatikan struktur berikut ini:

📁Resource

        📂Views

                🮹v_beranda.blade.php


    Sekarang pada file yang telah kita buat tadi tambahkan script berikut:

@extends('layout.template')

@section('content')
<div class="container">
    <h1>Ini adalah halaman Beranda</h1>
    <h5><a href="https://barintek.blogspot.com" target="_blank">www.barintek.blogspot.com</a></h5>
</div>
@endsection


    Perhatikan pada script diatas terdapat "@extends()" berfungsi untuk mengambil file dan menyisipkannya ke file yang diinginkan. Dalam arti kata perintah ini bertugas untuk menggabungkan beberapa file.  Di dalam ‘@extends()’ berisikan path dari file template yang akan digunakan pada kasus ini kita menggunakan file template.blade.php yang ada pada folder layout sehingga menjadi ‘@extends(’layouts.template’)’. Kemudian segala sesuatu yang ada di dalam ‘@section()’ akan dimunculkan oleh ‘@yield()’ yang ada file template yang akan kita buat nantinya. di dalam ‘@section()’ terdapat nama dari ‘@section()’ itu sendiri, Pada kasus ini kita beri nama ‘@section(’content’)’. Penamaan ini sebenarnya bebas. kita dapat memberikan nama sesuai dengan nama yang kita inginkan.


Membuat Template

    Nah sekarang masih di folder views silahkan buat folder baru dan beri nama "layout". Buat file baru di dalam folder tersebut dengan nama "template.blade.php". Disini kita akan menggunakan Boostrap sebagai frameword untuk halaman web. Bagi anda yang ingin menggunakan frameword lain silahkan menyesuaikan. 

<!doctype html>
<html lang="en">

<head>
    <title>Belajar Laravel | Barintek</title>
   
</head>

<body>
    @yield('content')

</body>

</html>


    Coba perhatikan, kita menambahkan perintah ‘@yield(’content’)’ di dalam body. Perintah ‘@yield()’ sendiri merupakah fitur dari Blade yang digunakan untuk menampilkan isi dari ‘@section()’ yang ada, di dalam ‘@yield()’. Disini kita beri ‘@yield(’content’)’ untuk menyesuaikan section yang ada di file v_beranda.blade.php tadi. Maka dari itu kita harus membuat section menggunakan ‘@section()’ yang di dalamnya berisi konten dari setiap halaman web. 

    Sekarang silahkan akses Halaman web anda.


Menangkap Variabel dengan Blade

    Sekarang kita kembali ke halaman Beranda.blade.php. Kita ingat bahwa di controller kita memiliki 2 field yaitu title dan subTitle. Mari kita tangkap data tersebut menggunakan blade.


@extends('layout.template')

@section('content')
<div class="container">
    <h1>{{ $title }}</h1>
    <h4>{{ $subTitle }}</h4>
    <h5><a href="https://barintek.blogspot.com" target="_blank">www.barintek.blogspot.com</a></h5>
</div>
@endsection


    Perhatikan script yang ada di dalam h1 dan h4. Script tersebut merupakan script blade untuk menangkap nilai yang dikirim dari controller. Nah sekarang soba anda bandingkan jika kita menulis dengan php standar. 

    Sekarang mari kita tambahkan penulisan dasar blade untuk perintah if. Perhatikan perintah berikut:

@extends('layout.template')

@section('content')
<div class="container">
    <h1>{{ $title }}</h1>
    <h4>{{ $subTitle }}</h4>
    @if($title =='beranda')
        <label>Selamat Datang</label>
    @endif
    <h5><a href="https://barintek.blogspot.com" target="_blank">www.barintek.blogspot.com</a></h5>
</div>
@endsection


    Dari contoh yang telah di uraikan diatas diharapkan anda dapat mengembangkannya lebih baik lagi. Selamat mencoba.

Post a Comment

0Comments

Post a Comment (0)