Blade Laravel, sebagai sistem tampilan andalan, membawa pengalaman pengembangan web di Laravel ke tingkat yang lebih tinggi. Dalam artikel ini, kita akan merinci aspek-aspek kunci terkait Blade, mulai dari pengenalan view, pemanfaatan tampilan bawaan Laravel, hingga langkah-langkah praktis dalam membuat dan mengorganisasi struktur folder view. Tak hanya itu, kita akan membahas cara efektif menggunakan Blade untuk menampilkan data, mengimplementasikan kondisi, perulangan, serta memahami konsep include, extends layout, extends section, dan Laravel components. Mari kita eksplorasi yang ditawarkan oleh Blade di Laravel.
Pengenalan View
View merupakan langkah awal yang penting dalam memahami bagaimana Laravel memanage dan menampilkan tampilan dalam aplikasi web Anda. View dalam Laravel bertanggung jawab untuk menangani presentasi dan antarmuka pengguna. Dalam materi ini, kita akan membahas beberapa konsep dasar terkait View di Laravel.
Apa Itu View?
View dapat dianggap sebagai bagian dari aplikasi yang mengatur tampilan atau antarmuka pengguna. Dalam konteks Laravel, view sering kali dikaitkan dengan halaman web atau bagian-bagian spesifik dari halaman tersebut.
Mengapa View Penting
- Pemisahan Logika dan Presentasi:
Laravel menganjurkan konsep pemisahan tanggung jawab (Separation of Concerns). Dengan View, Anda dapat memisahkan logika pengolahan data (Controller) dari presentasi (View), meningkatkan kejelasan dan pemeliharaan kode. - Reusabilitas
View dapat digunakan kembali di berbagai bagian aplikasi, memungkinkan Anda untuk membangun dan memelihara komponen antarmuka yang konsisten. - Kemudahan Pemeliharaan:
Perubahan pada tampilan dapat dilakukan tanpa mempengaruhi logika bisnis di belakangnya, menyederhanakan pemeliharaan dan pengembangan aplikasi.
View Bawaan Laravel
Laravel memiliki satu tampilan default yang tampil saat membuka halaman beranda atau halaman utama, dan tampilan ini dipanggil melalui kode berikut:
Route::get('/', function () {
return view('welcome');
});Pada browser apabila kita memasukkan url http://127.0.0.1:8000 maka akan menampilkan halaman dibawah ini, ini merupakan view bawaan dari laravel
Dalam kerangka kerja Laravel, view merujuk pada file dengan nama tertentu yang mencerminkan kontennya. Oleh karena itu, wajib ada sebuah file dengan nama ‘welcome’ yang disimpan di dalam direktori instalasi Laravel. Dimana letak file tersebut?
Laravel menyimpan file view di dalam direktori resources/views. Jika Anda menjelajahi direktori tersebut, akan ditemukan sebuah file dengan nama welcome.blade.php. File inilah yang menjadi representasi dari view ‘welcome’ yang dimaksudkan.
Cara Membuat View
Untuk membuat view ada dan bisa ditampilkan pada browser ada beberapa langkah yang harus kita ikuti yaitu:
- Membuat route baru
- Membuat file view baru di dalam folder resource/views
Hanya 2 (dua) langkah yang harus kita lakukan dan ini sangat mudah untuk anda ikutin, oke mari kita mulai dengan langkah yang pertama terlebih dahulu.
Pertama, misalnya kita ingin membuat route untuk /shop, mari kita buka files routes/web.php dan kemudian menambahkan kode di bawah ini pada route anda
<?php
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "web" middleware group. Make something great!
|
*/
Route::get('/', function () {
return view('welcome');
});
Route::get('shop', function(){
return view('shop');
});Kedua, setelah kita membuat route selanjutnya adalah kita membuat sebuah file baru di dalam folder resources/views, di dalam folder ini kita akan membuat file shop.blade.php seperti pada kode di bawah ini. For your information untuk penamaan file view pada laravel anda harus mengikuti aturan penamaan nya yakni <nama_file>.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>Shop</title>
</head>
<body>
<h2>Ini merupakan halaman shop</h2>
<p>Anda dapat berbelanja di sini apapun yang anda inginkan</p>
</body>
</html>Setelah anda membuat file tersebut, sekarang kita coba untuk mengakses nya di browser, silahkan untuk memasukkan url berikut http://127.0.0.1:8000/shop. Jika anda berhasil maka tampilan nya seperti berikut
Parsing Data Ke View
Pada pembahasan sebelumnya kita hanya menampilkan sebuah view tidak ada data yang ditampilkan, kita bisa mengirimkan data secara dinamis melalui route ada berbagai cara yang bisa kita lakukan untuk mengirimkan data ke view yaitu dengan mengisi argument ke dua pada method view, menggunakan method with, atau menggunakan compact. Mari kita bahas satu persatu
Mengisi Argument Ke Dua Pada Method View
Cara yang pertama ini anda cukup menulis data yang ingin anda kirimkan ke view pada argument ke dua, contohnya sebagai berikut:
Route::get('shop', function(){
return view('shop', [
'products1' => [
'name' => 'Product 1',
'price' => 100,
'description' => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
],
'products2' => [
'name' => 'Product 2',
'price' => 200,
'description' => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
],
'products3' => [
'name' => 'Product 3',
'price' => 300,
'description' => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
],
]);
});Atau anda bisa membuat nya menjadi seperti ini:
Route::get('shop', function(){
$products = [
'products1' => [
'name' => 'Product 1',
'price' => 100,
'description' => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
],
'products2' => [
'name' => 'Product 2',
'price' => 200,
'description' => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
],
'products3' => [
'name' => 'Product 3',
'price' => 300,
'description' => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
],
];
return view('shop', [
'products' => $products
]);
});
Menggunakan Method With
Cara yang kedua anda cukup melakukan chaining method seperti berikut ini:
Route::get('shop', function(){
$products = [
'products1' => [
'name' => 'Product 1',
'price' => 100,
'description' => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
],
'products2' => [
'name' => 'Product 2',
'price' => 200,
'description' => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
],
'products3' => [
'name' => 'Product 3',
'price' => 300,
'description' => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
],
];
return view('shop')->with('products', $products);
});Menggunakan Compact
Cara yang terakhir ini hampir sama seperti cara yang pertama bedanya pada mengisi argument kedua method view kita langsung memasukkan method compact bukan di dalam array lagi, contohnya seperti berikut:
Route::get('shop', function(){
$products = [
'products1' => [
'name' => 'Product 1',
'price' => 100,
'description' => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
],
'products2' => [
'name' => 'Product 2',
'price' => 200,
'description' => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
],
'products3' => [
'name' => 'Product 3',
'price' => 300,
'description' => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
],
];
return view('shop', compact('products'));
});Dalam Laravel ada banyak sekali cara yang bisa anda gunakan anda bebas untuk menggunakan cara yang mana itu sama saja. Kemudian supaya data yang dikirimkan dapat diterima oleh view maka anda perlu memperbarui kode shop.blade.php menjadi seperti berikut:
<!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>Shop</title>
</head>
<body>
<h2>Ini merupakan halaman shop</h2>
<p>Anda dapat berbelanja di sini apapun yang anda inginkan</p>
<ul>
@foreach ($products as $product)
<li>
name: {{ $product['name'] }} <br>
price: {{ $product['price'] }} <br>
description: {{ $product['description'] }} <br>
</li>
@endforeach
</ul>
</body>
</html>
Pada kode tersebut kita melakukan perulangan menggunakan foreach untuk menampilkan semua data products yang kita kirim dari route
Pengenalan Blade Laravel
Blade adalah mesin template yang kuat dan ekspresif yang terintegrasi secara native dalam Laravel. Dengan Blade, pengembangan tampilan menjadi lebih mudah, lebih efisien, dan lebih ekspresif. Berikut adalah pengenalan Blade Laravel beserta penjelasannya.
Apa Itu Blade?
Blade adalah mesin template ringan yang dirancang khusus untuk Laravel. Mesin ini menyediakan sintaks yang bersih dan ekspresif untuk membuat tampilan dengan lebih mudah dan intuitif.
Keunggulan Blade
- Sintaks yang Bersih: Blade menyediakan sintaks yang bersih dan mudah dipahami, meminimalkan boilerplate code dan meningkatkan kejelasan.
- Ekspresi Dinamis: Memungkinkan penggunaan ekspresi PHP dalam tampilan, mempermudah manipulasi dan tampilan data dinamis.
- Pewarisan Layout: Blade mendukung pewarisan layout, memungkinkan pengembangan tampilan berbasis template untuk mengurangi duplikasi kode.
- Komponen Laravel: Terintegrasi erat dengan fitur-fitur Laravel seperti komponen dan direktif yang menyederhanakan pengembangan.
Menampilkan Data
Fungsi utama dari blade adalah untuk menampilkan data, pada pembahasan sebelumnya kita sudah belajar bagaimana caranya menampilkan data di dalam view. Pada saat ini kita coba perbarui kembali kode route shop kita menjadi seperti berikut:
Route::get('shop', function(){
$title = 'Ini merupakan halaman shop';
$description = 'Anda dapat berbelanja di sini apapun yang anda inginkan';
$products = [
'products1' => [
'name' => 'Product 1',
'price' => 100,
'description' => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
],
'products2' => [
'name' => 'Product 2',
'price' => 200,
'description' => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
],
'products3' => [
'name' => 'Product 3',
'price' => 300,
'description' => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
],
];
return view('shop', compact('products', 'title', 'description'));
});Pada kode tersebut saya menambahkan 2 variabel baru yaitu title dan description, kemudian mari kita coba tampilkan data nya di dalam view menjadi seperti ini
<!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>Shop</title>
</head>
<body>
<h2>{{ $title }}</h2>
<p>{{ $description }}</p>
<ul>
@foreach ($products as $product)
<li>
name: {{ $product['name'] }} <br>
price: {{ $product['price'] }} <br>
description: {{ $product['description'] }} <br>
</li>
@endforeach
</ul>
</body>
</html>
Apabila kita coba buka kembali browser maka tampilan nya menjadi seperti berikut
{{ $title }} & {{ $description }} ini sama saja kalau kita menggunakan php kode nya adalah<?php echo $title; ?>Kondisi
Selain untuk menampilkan data pada blade juga anda dapat melakukan kondisi seperti if, else, dan switch case. Mari kita bahas satu persatu
If
Pada contoh if kita akan membuat kondisi misalnya apabila produk tersebut harganya lebih dari 200 dan kurang dari sama dengan 300 maka kita tambahkan label mahal pada produk tersebut
<h2>{{ $title }}</h2>
<p>{{ $description }}</p>
<h2>Semua Produk</h2>
<ul>
@foreach ($products as $product)
<li>
name: {{ $product['name'] }} -
@if ($product['price'] > 200 && $product['price'] <= 300)
<span style="color:red">Mahal</span>
@endif
<br>
price: {{ $product['price'] }} <br>
description: {{ $product['description'] }} <br>
</li>
@endforeach
</ul>Elseif
Kemudian kita akan membuat kondisi kembali apabila produk tersebut harganya lebih dari 0 dan kurang dari sama dengan 100 maka kita tambahkan label sangat murah pada produk tersebut
<h2>{{ $title }}</h2>
<p>{{ $description }}</p>
<h2>Semua Produk</h2>
<ul>
@foreach ($products as $product)
<li>
name: {{ $product['name'] }} -
@if ($product['price'] > 200 && $product['price'] <= 300)
<span style="color:red">Mahal</span>
@elseif ($product['price'] > 0 && $product['price'] <= 100)
<span style="color:blue">Sangat Murah</span>
@endif
<br>
price: {{ $product['price'] }} <br>
description: {{ $product['description'] }} <br>
</li>
@endforeach
</ul>Else
Terakhir kita akan membuat kondisi apabila dua kondisi sebelumnya tidak terpenuhi maka kita tambahkan label murah pada produk tersebut
<h2>{{ $title }}</h2>
<p>{{ $description }}</p>
<h2>Semua Produk</h2>
<ul>
@foreach ($products as $product)
<li>
name: {{ $product['name'] }} -
@if ($product['price'] > 200 && $product['price'] <= 300)
<span style="color:red">Mahal</span>
@elseif ($product['price'] > 0 && $product['price'] <= 100)
<span style="color:blue">Sangat Murah</span>
@else
<span style="color:green">Murah</span>
@endif
<br>
price: {{ $product['price'] }} <br>
description: {{ $product['description'] }} <br>
</li>
@endforeach
</ul>Mari kita buka browser dan buka halaman /shop tersebut. Jika berhasil maka seharusnya tampilan nya adalah seperti berikut
Blade hanya mempersingkat penulisan kode program anda. Jika anda merasa “lebih pas” dan sudah terbiasa menggunakan struktur if else bawaan PHP, itu juga tidak masalah. Tapi seperti yang terlihat, kode program kita terlihat lebih rapi jika menggunakan blade.
Switch Case
Selanjutnya mari kita coba menggunakan switch case pada blade. Untuk menggunakan switch case ini kita coba perbarui kode shop.blade.php kita seperti berikut:
<h2>{{ $title }}</h2>
<p>{{ $description }}</p>
<h2>Semua Produk</h2>
<ul>
@foreach ($products as $product)
<li>
name: {{ $product['name'] }} -
@switch($product['price'])
@case('300')
<span style="color:red">Mahal</span>
@break
@case('200')
<span style="color:blue">Murah</span>
@break
@default
<span style="color:green">Sangat Murah</span>
@endswitch
<br>
price: {{ $product['price'] }} <br>
description: {{ $product['description'] }} <br>
</li>
@endforeach
</ul>Hasilnya sama saja seperti kita menggunakan condition if else, namun disini saya hanya memberikan contoh kepada anda bagaimana cara menggunakan switch case di dalam file blade
Perulangan
Pada blade terdapat 4 perulangan yang bisa digunakan yaitu for, while, foreach, dan forelse. Pada kode sebelumnya yang sudah kita pelajari kita sudah pernah menggunakan salah satu perulangan foreach. Mari kita bahas satu persatu perulangan yang ada pada blade
Perulangan For
Blade menyediakan cara penulisan singkat untuk perulangan for. Berikut cara menggunakan perulangan for di blade
@for ($i = 1; $i <= 10; $i++)
<p>Produk ke - {{ $i }}</p>
@endforPerulangan While
Blade menyediakan cara penulisan singkat untuk perulangan while. Berikut contoh penggunaannya:
@php
$i = 1;
@endphp
@while ($i <= 10)
<p>Produk ke - {{ $i }}</p>
@php
$i++;
@endphp
@endwhilePada file blade kita tetap bisa menggunakan php pada umumnya dengan cara memasukkan nya ke dalam directive @php lalu di dalam nya kita bisa membuat variabel, konstanta, kondisi dan lain nya
Perulangan Foreach
Perulangan foreach sudah pernah kita gunakan sebelumnya, perulangan ini salah satu perulangan yang sering dipakai karena data yang dikirimkan ke view lebih banyak dalam bentuk array. Berikut merupakan contoh penggunaan perulangan foreach:
@foreach ($products as $product)
<li>
name: {{ $product['name'] }} <br>
price: {{ $product['price'] }} <br>
description: {{ $product['description'] }} <br>
</li>
@endforeachPerulangan Forelse
Perulangan forelse merupakan perulangan khusus yang ada pada blade. Pada bagian forelse kita bisa sekalian memeriksa sebuah array apakah ada datanya atau tidak. Berikut merupakan contoh dari perulangan forelse
<ul>
@forelse ($products as $product)
<li>
name: {{ $product['name'] }} <br>
price: {{ $product['price'] }} <br>
description: {{ $product['description'] }} <br>
</li>
@empty
<li>Tidak ada produk</li>
@endforelse
</ul>Layouting
Di dalam blade kita dapat dengan mudah untuk membuat layouting template. Halaman web pada umumnya memiliki struktur navbar, konten, dan footer. Biasanya navbar dan footer digunakan pada semua halaman, daripada kita terus menerus mengulang kode yang sama pada setiap file yang kita buat lebih kita membuat nya ke dalam sebuah layout yang dimana hanya konten nya saja yang berubah-ubah. Oke mari ikuti pembahasan di bawah ini dengan teliti ya
Instalasi Tailwind CSS
Pada contoh sebelumnya kita tidak menggunakan css apapun, untuk saat ini kita coba untuk menggunakan framework css yakni Tailwind CSS dan cara instalasinya pada projek kita adalah sebagai berikut:
Pertama, buka terminal anda pada visual studio code atau terminal terpisah
Kedua, jalankan perintah berikut untuk install tailwind pada projek anda (pastikan anda sudah menginstall node.js pada laptop/pc yang anda gunakan)
npm install -D tailwindcss postcss autoprefixerKetiga, setelah berhasil selanjutnya anda membuat file konfigurasi tailwind dengan memasukkan perintah berikut
npx tailwindcss init -pSekarang perhatikan pada projek anda terdapat satu file baru yaitu tailwind.config.js yang memiliki kode seperti berikut
/** @type {import('tailwindcss').Config} */
export default {
content: [],
theme: {
extend: {},
},
plugins: [],
}Pada konfigurasi tailwind tersebut kita akan menambahkan konfigurasi pada content seperti berikut
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./resources/**/*.blade.php",
],
theme: {
extend: {},
},
plugins: [],
}Keempat, anda dapat membuka file app.css yang berada pada folder resources/css/app.css, kemudian dapat menambahkan kode di bawah ini
@tailwind base;
@tailwind components;
@tailwind utilities;Struktur Folder
Kita akan menyusun struktur folder kita menjadi seperti ini. Disini saya membuat 3 folder baru di dalam folder views yakni categories, layouts, dan shops.
Layout
Selanjutnya kita akan membuat sebuah layout baru atau base template yang nantinya layout tersebut akan kita gunakan di semua halaman yang kita buat, oke mari kita buat file dengan nama app.blade.php di dalam folder layouts
<!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>@yield('title' ?? 'Online Shop')</title>
@vite('resources/css/app.css')
</head>
<body>
@include('layouts.header')
<div class="container mx-auto px-4">
@yield('content')
</div>
@include('layouts.footer')
</body>
</html>Perhatikan kode tersebut pada baris ke 8 saya memasukkan perintah @vite('resources/css/app.css') yang berfungsi untuk memastikan CSS kompilasi disertakan dan kita bisa menggunakan tailwinds.
Kemudian pada baris ke 11 dan 17 terdapat blade directive @include yang berfungsi untuk memanggil header dan footer di file yang lain.
Dan terakhir terdapat blade directive @yield yang digunakan untuk menentukan suatu area di dalam layout yang dapat diisi atau diperluas oleh konten dari halaman tampilan yang menggunakan layout tersebut.
Header
Kemudian anda buat file header.blade.php di dalam folder layouts dan masukkan kode berikut
<nav class="p-5 bg-gray-800 text-white rounded-b-lg tracking-tighter leading-relaxed">
<div class="flex flex-col md:flex-row lg:flex-row gap--4 items-center justify-between mx-16">
<h1 class="text-2xl font-bold">
<a href="{{ route('home') }}">Online Shop</a>
</h1>
<ul class="flex gap-x-8 list-none justify-end">
<li>
<a href={{ route('home') }}>Home</a>
</li>
<li>
<a href={{ route('shops') }}>Shop</a>
</li>
<li>
<a href={{ route('categories') }}>Category</a>
</li>
</ul>
</div>
</nav>Footer
Terakhir anda buat file footer.blade.php di dalam folder layouts dan masukkan kode berikut
<footer class="bg-gray-800 text-white text-center fixed inset-x-0 bottom-0 p-4 rounded-t-lg tracking-tighter leading-relaxed">
2023 © Online Shop
</footer>
Route
Kemudian sekarang pada route ada beberapa kode yang harus diperbarui di dalam routes/web.php yaitu
<?php
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "web" middleware group. Make something great!
|
*/
Route::get('/', function () {
$title = 'Online Shops';
$description = 'Selamat datang di Online Shops';
return view('home',[
'title' => $title,
'description' => $description
]);
})->name('home');
Route::get('shops', function(){
$title = 'Shops';
$description = 'Silahkan pilih produk yang anda inginkan';
$products = [
'product_1' => [
'name' => 'Product 1',
'price' => 100,
'description' => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
'category' => 'Electronics',
'stock' => 10,
'image' => 'https://placehold.co/400/1F2937/FFFFFF/?text=No+Image+Available'
],
'product_2' => [
'name' => 'Product 2',
'price' => 300,
'description' => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
'category' => 'Furniture',
'stock' => 25,
'image' => 'https://placehold.co/400/1F2937/FFFFFF/?text=No+Image+Available'
],
'product_3' => [
'name' => 'Product 3',
'price' => 500,
'description' => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
'category' => 'Clothes',
'stock' => 5,
'image' => 'https://placehold.co/400/1F2937/FFFFFF/?text=No+Image+Available'
],
'product_4' => [
'name' => 'Product 4',
'price' => 700,
'description' => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
'category' => 'Electronics',
'stock' => 0,
'image' => 'https://placehold.co/400/1F2937/FFFFFF/?text=No+Image+Available'
],
'product_5' => [
'name' => 'Product 5',
'price' => 900,
'description' => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
'category' => 'Furniture',
'stock' => 15,
'image' => 'https://placehold.co/400/1F2937/FFFFFF/?text=No+Image+Available'
],
'product_6' => [
'name' => 'Product 6',
'price' => 1100,
'description' => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
'category' => 'Clothes',
'stock' => 30,
'image' => 'https://placehold.co/400/1F2937/FFFFFF/?text=No+Image+Available'
],
'product_7' => [
'name' => 'Product 7',
'price' => 1300,
'description' => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
'category' => 'Electronics',
'stock' => 20,
'image' => 'https://placehold.co/400/1F2937/FFFFFF/?text=No+Image+Available'
],
'product_8' => [
'name' => 'Product 8',
'price' => 1500,
'description' => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
'category' => 'Furniture',
'stock' => 10,
'image' => 'https://placehold.co/400/1F2937/FFFFFF/?text=No+Image+Available'
],
'product_9' => [
'name' => 'Product 9',
'price' => 1700,
'description' => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
'category' => 'Clothes',
'stock' => 0,
'image' => 'https://placehold.co/400/1F2937/FFFFFF/?text=No+Image+Available'
]
];
return view('shops.index',[
'title' => $title,
'description' => $description,
'products' => $products
]);
})->name('shops');
Route::get('categories', function(){
$title = 'Categories';
$description = 'Silahkan pilih kategori yang anda inginkan';
$categories = [
'Electronics',
'Furniture',
'Clothes'
];
return view('categories.index',[
'title' => $title,
'description' => $description,
'categories' => $categories
]);
})->name('categories');Pada routes tersebut saya menambahkan route baru yakni /categories, dan pada masing-masing route saya memberikan named route agar mudah apabila anda lupa tentang apa itu named route bisa membaca artikel ini
Home
Selanjutnya silahkan anda buat file baru dengan nama home.blade.php di dalam folder resources/views
@extends('layouts.app')
@section('title', $title)
@section('content')
<div class="mt-4 mb-32">
<h2 class="font-bold text-3xl leading-relaxed tracking-tighter">{{ $title }}</h2>
<p class="leading-relaxed font-normal border-1 pb-2 border-b border-dashed">{{ $description }}</p>
</div>
@endsectionShops
Selanjutnya silahkan anda buka folder shops pada folder resources/views/shops kemudian buat file baru dengan nama index.blade.php
@extends('layouts.app')
@section('title', $title)
@section('content')
<div class="mt-4 mb-32">
<h2 class="font-bold text-3xl leading-relaxed tracking-tighter">{{ $title }}</h2>
<p class="leading-relaxed font-normal border-1 pb-2 border-b border-dashed">{{ $description }}</p>
<h2 class="font-bold text-2xl leading-relaxed tracking-tighter my-8">Semua Produk</h2>
<div class="grid grid-cols-3 gap-8">
@forelse ($products as $product)
<div class="col-span-1">
<div class="bg-white rounded-lg p-4">
<div class="flex">
<img src="{{ $product['image'] }}" alt="{{ $product['name'] }}" class="w-full object-cover rounded-lg">
</div>
<div class="mt-4">
<div class="flex justify-between">
<h3 class="text-lg font-bold">{{ $product['name'] }}</h3>
<p class="text-sm text-gray-500">{{ $product['category'] }}</p>
</div>
<p class="text-sm text-gray-500 mb-2">{{ $product['description'] }}</p>
<div class="flex justify-between">
<p class="text-sm text-gray-500">$ {{ number_format($product['price'], 0, ',', '.') }}</p>
@if ($product['stock'])
<p class="text-sm text-green-500">Stok Tersedia</p>
@else
<p class="text-sm text-red-500">Stok Habis</p>
@endif
</div>
</div>
</div>
</div>
@empty
@endforelse
</div>
</div>
@endsectionPada kode tersebut saya menggunakan directive blade @extends yang mengarah ke layouts.app ini berfungsi kode ini menggunakan layout yang berada di dalam file app.blade.php pada kode tersebut mewarisi semua kode yang ada pada file app.blade.php
Untuk pembuatan layout yang lebih kompleks, blade juga menyediakan cara untuk mengextends section milik parent view. Pada kode tersebut kita sudah mengimplementasikannya pada section title dan section content, itu karena pada layout utama terdapat @yield(‘title’) dan @yield(‘content’)
Categories
Selanjutnya silahkan anda buka folder categories pada folder resources/views/categories kemudian buat file baru dengan nama index.blade.php
@extends('layouts.app')
@section('title', $title)
@section('content')
<div class="mt-4 mb-32">
<h2 class="font-bold text-3xl leading-relaxed tracking-tighter">{{ $title }}</h2>
<p class="leading-relaxed font-normal border-1 pb-2 border-b border-dashed">{{ $description }}</p>
<h2 class="font-bold text-2xl leading-relaxed tracking-tighter my-8">Semua Kategori</h2>
@foreach ($categories as $category)
<div class="bg-white border rounded-lg p-4 mr-4 my-4">
<h3 class="text-lg font-bold">{{ $category }}</h3>
</div>
@endforeach
</div>
@endsectionMari Kita Coba
Oke jika semuanya sudah anda buat dan apabila tidak ada masalah seharusnya sekarang kita memiliki 3 halaman berbeda yang dapat kita akses berikut merupakan tampilan dari home, shops, dan categories yang telah kita buat
Apabila tampilan yang anda buat sudah sama seperti itu artinya anda telah berhasil untuk menerapkan konsep layouting pada blade.
Dengan demikian, pembahasan dalam artikel “Membuat Tampilan Menggunakan Blade Laravel untuk Pemula #5” telah membawa kita melalui perjalanan mendalam dalam memahami Blade Laravel. Mulai dari pengenalan view, pemanfaatan tampilan bawaan Laravel, hingga pemahaman konsep-konsep kunci Blade seperti include, extends layout, extends section, dan Laravel components.
Blade tidak hanya menjadi mesin template yang ekspresif, tetapi juga alat yang memudahkan pengembangan tampilan web dalam Laravel. Pemisahan logika dan presentasi, reusabilitas, dan kemudahan pemeliharaan menjadi poin utama dalam memahami peran penting Blade dalam pengembangan aplikasi web.
Dengan kemampuannya menangani pengenalan, pemformatan, dan pengulangan data dengan cara yang bersih dan efisien, Blade membuka pintu bagi pengembang untuk merancang antarmuka pengguna yang dinamis dan menarik.
Mari terus menjelajahi dan mengimplementasikan pengetahuan yang diperoleh dalam artikel ini untuk meningkatkan keterampilan pengembangan web Anda menggunakan Blade di Laravel. Selamat mengembangkan aplikasi web Anda dengan keahlian baru yang telah Anda peroleh!
