Laravel - Blade Templates: A Beginner's Guide

Hai there, para pengembang web yang sedang belajar! Hari ini, kita akan masuk ke dunia yang menakjubkan mesin template Blade Laravel. Jangan khawatir jika Anda belum pernah mengoding sebelumnya - saya akan menjadi panduan ramah bagi Anda dalam perjalanan ini, dan kita akan bergerak langkah demi langkah.

Laravel - Blade Templates

Apa Itu Blade?

Blade adalah mesin template yang kuat dari Laravel. Bayangkan itu seperti sebuah alat ajaib yang membantu kita membuat template HTML yang dinamis dan dapat digunakan kembali. Itu seperti memiliki seorang asisten super cerdas yang dapat mengisi ruang kosong di halaman web Anda dengan data nyata.

Mengapa Menggunakan Blade?

Itu sederhana dan mudah untuk dipelajari
Itu membuat kode Anda lebih bersih dan mudah dibaca
Itu membantu Anda menghindari pengulangan (ingat, para pengembang gemar malas - dalam arti baik!)

Sekarang, mari kita lipatkan lengan dan mulai!

Langkah-langkah Membuat Layout Blade

1. Buat Layout Master

Pertama-tama, kita perlu membuat layout master. Ini seperti kerangka website Anda - itu mengandung bagian yang tetap sama di setiap halaman.

Buat file baru bernama layout.blade.php di direktori resources/views:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@yield('title')</title>
</head>
<body>
<header>
<h1>Situs Web Saya yang Menakjubkan</h1>
</header>

<main>
@yield('content')
</main>

<footer>
<p>&copy; 2023 Situs Web Saya yang Menakjubkan</p>
</footer>
</body>
</html>

mari kitauraikan ini:

@yield('title'): Ini memberitahu Blade, "Hey, kita akan mengisi judul ini nanti untuk setiap halaman."
@yield('content'): Ini adalah tempat konten utama setiap halaman akan ditempatkan.

2. Buat Template Anak

Sekarang, mari kita buat template anak yang menggunakan layout kita. Buat file baru bernama home.blade.php:

@extends('layout')

@section('title', 'Halaman Home')

@section('content')
<h2>Selamat Datang di Situs Web Saya yang Menakjubkan!</h2>
<p>Ini adalah konten halaman home.</p>
@endsection

mari kita lihat apa yang terjadi:

@extends('layout'): Ini memberitahu Blade untuk menggunakan file layout.blade.php sebagai dasar.
@section('title', 'Halaman Home'): Ini mengisi judul yang kosong yang kita tinggalkan sebelumnya.
@section('content'): Ini adalah tempat kita menempatkan konten unik untuk halaman ini.

3. Menampilkan Data

Blade benar-benar menonjol saat menampilkan data. Mari kita katakan kita ingin menampilkan daftar buah-buahan. Kita akan memperbarui home.blade.php:

@extends('layout')

@section('title', 'Halaman Home')

@section('content')
<h2>Selamat Datang di Situs Web Saya yang Menakjubkan!</h2>
<p>Ini adalah konten halaman home.</p>

<h3>Pilihan Buah-Buahan Kami:</h3>
@if(count($fruits) > 0)
<ul>
@foreach($fruits as $fruit)
<li>{{ $fruit }}</li>
@endforeach
</ul>
@else
<p>Maaf, kami habis buah-buahan!</p>
@endif
@endsection

Dalam contoh ini:

@if dan @else: Ini memungkinkan kita membuat keputusan dalam template.
@foreach: Ini membantu kita melooping melalui daftar buah-buahan.
{{ $fruit }}: Kedua kurung kurawal ganda memberitahu Blade untuk menampilkan nilai variabel.

4. Menggunakan Komponen Blade

Komponen Blade seperti LEGO blok untuk website Anda. Itu adalah pieces yang dapat digunakan kembali di halaman yang berbeda. Mari kita buat komponen sederhana untuk tombol.

Buat file baru resources/views/components/button.blade.php:

<button class="btn btn-{{ $type ?? 'primary' }}">
{{ $slot }}
</button>

Sekarang kita dapat menggunakan tombol ini di home.blade.php:

@extends('layout')

@section('title', 'Halaman Home')

@section('content')
<h2>Selamat Datang di Situs Web Saya yang Menakjubkan!</h2>
<p>Ini adalah konten halaman home.</p>

@component('components.button', ['type' => 'success'])
Klik saya!
@endcomponent
@endsection

Ini akan membuat tombol dengan teks "Klik saya!" dan gaya sukses.

Cheat Sheet Direktif Blade

Berikut adalah tabel direktif Blade yang umum:

Direktif	Tujuan
@if	Statement kondisional
@else	Alternatif untuk @if
@elseif	Kondisi alternatif
@foreach	Loop melalui array
@for	Loop for
@while	Loop while
@switch	Statement switch
@yield	Definisikan sebuah seksi di layout
@section	Definisikan konten untuk layout
@extends	Tentukan layout mana yang akan digunakan
@include	Sertakan view lain
@auth	Periksa jika pengguna terotentikasi
@guest	Periksa jika pengguna adalah tamu

Ingat, latihan membuat sempurna! Jangan takut untuk mencoba direktif ini dan membuat template Anda sendiri. Sebelum Anda tahu, Anda akan menjadi seorang ninja Blade, memotong HTML seperti pisau panas melalui mentega!

Dalam tahun-tahun mengajar saya, saya menemukan bahwa cara terbaik untuk belajar adalah dengan melakukan. Jadi, mengapa tidak mencoba membuat layout blog sederhana menggunakan apa yang kita pelajari? Mulai dengan layout master, buat halaman untuk home, tentang, dan posting blog, dan gunakan fitur kuat Blade untuk membuat kode Anda bersih dan DRY (Jangan Repetasi Sendiri).

Selamat mengoding, dan biarkan Blade menjadi teman Anda! ?

Credits: Image by storyset