Indonesia

Tutorial Laravel

Laravel - Blade Templates: A Beginner's Guide

Halo teman-teman pemula pengembang web! Hari ini, kita akan mendalamkan 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 mengambil langkah-langkah secara bertahap.

Laravel - Blade Templates

Apa Itu Blade?

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

Mengapa Menggunakan Blade?

  1. Itu sederhana dan mudah untuk dipelajari
  2. Itu membuat kode Anda lebih bersih dan mudah dibaca
  3. Itu membantu Anda menghindari pengulangan (ingat, pengembang adalah malas - dalam cara yang baik!)

Sekarang, mari kita lipatkan lengan dan mulai!

Langkah-langkah Membuat Layout Blade Template

1. Buat Layout Induk

Pertama, kita perlu membuat layout induk. 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="id">
<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>
<pIni adalah konten halaman home.</p>
@endsection

Ini adalah 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. Kita akan memperbarui home.blade.php:

@extends('layout')

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

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

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

Dalam contoh ini:

  • @if dan @else: Ini memungkinkan kita membuat keputusan dalam template.
  • @foreach: Ini membantu kita melooping melalui daftar buah kita.
  • {{ $fruit }}: K curly braces ganda memberitahu Blade untuk menampilkan nilai variabel.

4. Menggunakan Komponen Blade

Komponen Blade adalah seperti blok LEGO untuk website Anda. Itu adalah bagian yang dapat digunakan kembali yang Anda dapat gunakan di berbagai halaman. 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>
<pIni 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.

Catatan Cheat Direktif Blade

Berikut adalah tabel ringkasan dari beberapa direktif Blade 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 section dalam layout
@section Definisikan konten untuk layout
@extends Tentukan layout mana yang digunakan
@include Sertakan view lain
@auth Periksa jika pengguna terotentikasi
@guest Periksa jika pengguna adalah tamu

Ingat, latihan membuat sempurna! Jangan khawatir untuk mencoba direktif ini dan membuat template Anda sendiri. Sebelum Anda sadar, Anda akan menjadi petarung Blade, memotong HTML seperti pisau panas melalui mentega!

Dalam tahun-tahun mengajar saya, saya menemukan bahwa cara terbaik untuk belajar adalah dengan melakukan. Maka, mengapa tidak mencoba membuat layout blog sederhana menggunakan apa yang kita pelajari? Mulai dengan layout induk, buat halaman untuk home, tentang, dan posting blog, dan gunakan fitur kuat Blade untuk membuat kode Anda bersih dan DRY (Don't Repeat Yourself).

Selamat mengoding, dan may the Blade be with you! ?

Credits: Image by storyset

Tutorial Sebelumnya:
Laravel - Tampilan
Tutorial Selanjutnya:
Laravel - Redireksi