Pada bab/artikel sebelumnya kita telah membahas bagaimana cara melempar data dari route ke view, tetapi kita menampilkan data pada view masih menggunakan 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.
3. 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
@endsectionDari 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.
4. 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"
));
});5. 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>
@endsectionNah, 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
@endsectionhasilnya 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>
@endsectionMaka hasilnya akan seperti di bawah
Terimakasih telah membaca sourcecode-nya sourcode-nya disini