Gunakan tanda [] untuk mencari tag gan! contoh [flutter, javascript]

Belajar Laravel 8 - Blade Templating Engine

Belajar Laravel 8 - Blade Templating Engine

Artikel ini dibukukan pada buku Eksplorasi Laravel dengan Cermat
access_time 02 Jan 2022 remove_red_eye 878 Kali spellcheck 1190 Kata, 6938 Karakter
#laravel #blade #templating engine #laravel 8

Pada bab/artikel sebelumnya kita telah membahas bagaimana cara melempar data dari route ke view, tetapi kita menampilkan data pada view masih menggunakan <?php echo $variable ?>  yang dimana sebenarnya ada cara yang lebih mudah untuk menampilkan variabel pada view kita. Yaitu dengan blade templating engine yang sudah disediakan oleh laravel. Yuk kita gunakan cara yang lebih mudah dan lebih secure dalam menghadapi XSS (Cross Site Scripting). Skuy

source code artikel sebelumnya disini 


Menampilkan Variable dari Route Pada Blade

1. pada bab sebelumnya - lempar data dari route ke view kita telah membuat variable array yang kita lempar ke view. mari kita ulangi langkah tersebut agar kita lebih hafal pada tata letak dan syntax yang sudah disediakan.

2. Buka file routes/web.php buat route get /about seperti kode di bawah.


Route::get('/about', function () {
    return view('about', array(
        "webname" => "gepcode.com",
        "owner" => "Gilang Pratama",
        "usiaweb" => "7 Bulan"
    ));
});

route ini merujuk pada view about.blade.php

3. buka file resources/views/about.blade.php 

4. Setelah itu cara memanggil variable yang sudah dilempar adalah seperti ini 

{{ $variable }}

Jadi kita bisa membuat kode pada about.blade.php seperti kode di bawah

<!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>Document</title>
</head>
<body>
  <table>
    
    <tbody>
      <tr>
        <td>Nama Web </td>
        <td> : </td>
        <td>
         {{ $webname }}
        </td>   
      </tr>
      <tr>
        <td>Pemilik Web </td>
        <td> : </td>
        <td>
          {{ $owner }}
         </td>
      </tr>
      <tr>
        <td>Usia web </td>
        <td> : </td>
        <td>
          {{ $usiaweb }}
         </td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Lalu anda bisa menjalankannya dengan menggunakan php artisan serve dan buka http://127.0.0.1:8000/about

hasilnya akan menjadi seperti ini

Inheritance Blade

blade memang luar biasa, kita dapat menggunakan fungsi turunan pada HTML kita, yang tentunya akan sangat membantu kita dalam meringkas kode.

Let's go dengan kasus simple kita ya.


1. Yuk kita buat file views/layout/main.blade.php seperti gambar di bawah.


2. Selanjutnya mari kita buat kode HTML seperti di bawah.

<!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>Belajar Laravel 8</title>
</head>
<body>
  <div>
    <a href="/" style="margin-right: 1rem">Home</a>
    <a href="/about">About</a>
  </div>
  <div class="content">
    @yield('content')
  </div>
</body>
</html>


Dari kode di atas, kita melihat kode @yield('content')  , kode ini menjelaskan sebuah parent dari view lain.

2. Selanjutnya mari rubah nama view welcome.blade.php menjadi home.blade.php untuk mempermudah kita dalam pengertian ini. dan berikut adalah kode dari home.blade.php


@extends('layout.main')
@section('content')
    hello world
@endsection

Dari kode diatas. @extends('layout.main') menjelaskan bahwa home.blade.php merupakan child dari layout/main.blade.php .

Sedangkan @section('content')  menjelaskan bahwa kita berada pada section content yang nantinya akan diteruskan ke parent.

3. Selanjutnya mari kita rombak file routes/web.php kita seperti kode di bawah

<?php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('home');
});

Route::get('/about', function () {
    return view('about', array(
        "webname" => "gepcode.com",
        "owner" => "Gilang Pratama",
        "usiaweb" => "7 Bulan"
    ));
});

4. Dan file views/about.blade.php menjadi seperti ini.

@extends('layout.main')
@section('content')
  <table>
    
    <tbody>
      <tr>
        <td>Nama Web </td>
        <td> : </td>
        <td>
         {{ $webname }}
        </td>   
      </tr>
      <tr>
        <td>Pemilik Web </td>
        <td> : </td>
        <td>
          {{ $owner }}
         </td>
      </tr>
      <tr>
        <td>Usia web </td>
        <td> : </td>
        <td>
          {{ $usiaweb }}
         </td>
      </tr>
    </tbody>
  </table>
@endsection

Nah, sekarang kita bisa run lagi project kita.

untuk sesi ini anda bisa membuka sourcode-nya disini


Variabel Dump dan Die

Selanjutnya di sisi home, kita bisa mencoba membuat variable yang berbentuk array dan memiliki beberapa items.

buka routes.php dan rubah route / menjadi seperti di bawah.

Route::get('/', function () {
    $users = [
        array('id' => 1, 'name' => 'Sukidi', 'age' => 30),
        array('id' => 2, 'name' => 'Parjo', 'age' => 29),
    ];
    return view('home', array('users' => $users));
});

Kode tersebut menjelaskan bahwa kita melempar 2 data pada view.

Selanjutnya mari kita coba untuk @dd (Dump and Die) pada blade kita. Mari kita buka view home.blade.php dan tuliskan kode seperti di bawah.

@extends('layout.main')
@section('content')
    @dd($users) {{-- ini adalah cara kita melihat data $users --}}
    hello world
@endsection

hasilnya adalah seperti berikut.


Looping Foreach Blade

Looping merupakan salah satu syntax pokok dalam bahasa permrograman apapun yang dapat kita gunakan untuk menampilkan data yang berpola. Pada blade kita bisa menggunakan looping seperti berikut.

@extends('layout.main')
@section('content')
<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Nama</th>
            <th>Usia</th>
        </tr>
    </thead>
    <tbody>
        @foreach ($users as $item) {{-- contoh looping --}}
            <tr>
                <td>{{ $item['id'] }}</td>
                <td>{{ $item['name'] }}</td>
                <td>{{ $item['age'] }} Tahun</td>
            </tr>
        @endforeach
    </tbody>
</table>
@endsection

Maka hasilnya akan seperti di bawah

Terimakasih telah membaca sourcecode-nya sourcode-nya disini

Artikel ini dibukukan pada buku Eksplorasi Laravel dengan Cermat
Navigasi Konten