Tiếng Việt

Hướng dẫn Laravel

Laravel - Blade Templates: A Beginner's Guide

Xin chào các bạn đang học lập trình web! Hôm nay, chúng ta sẽ cùng khám phá thế giới kỳ diệu của engine templating Blade của Laravel. Đừng lo lắng nếu bạn chưa bao giờ viết mã trước đây - tôi sẽ là người bạn thân thiện dẫn đường cho bạn trong hành trình này, và chúng ta sẽ cùng bước từng bước.

Laravel - Blade Templates

什么是 Blade?

Blade là engine templating mạnh mẽ của Laravel. Hãy tưởng tượng nó như một công cụ kỳ diệu giúp chúng ta tạo ra các mẫu HTML động và có thể tái sử dụng. Nó giống như có một trợ lý siêu thông minh có thể điền vào các khoảng trống trên trang web của bạn với dữ liệu thực tế.

Tại sao nên sử dụng Blade?

  1. Nó đơn giản và dễ học
  2. Nó làm cho mã của bạn sạch sẽ và dễ đọc hơn
  3. Nó giúp bạn tránh lặp lại (nhớ rằng, các nhà phát triển thường lười - nhưng theo cách tốt!)

Bây giờ, hãy c rolled up our sleeves và bắt đầu nhé!

Bước để Tạo một Mẫu Blade Layout

1. Tạo một Layout Chính

Trước tiên, chúng ta cần tạo một layout chính. Đây giống như khung xương của website của bạn - nó chứa các phần không thay đổi trên mỗi trang.

Tạo một file mới có tên layout.blade.php trong thư mục 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>My Awesome Website</h1>
</header>

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

<footer>
<p>&copy; 2023 My Awesome Website</p>
</footer>
</body>
</html>

Hãy phân tích này:

  • @yield('title'): Điều này nói với Blade, "Hey, chúng ta sẽ điền tiêu đề sau cho mỗi trang."
  • @yield('content'): Đây là nơi nội dung chính của mỗi trang sẽ được đặt.

2. Tạo các Mẫu Con

Bây giờ, hãy tạo một mẫu con sử dụng layout của chúng ta. Tạo một file mới có tên home.blade.php:

@extends('layout')

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

@section('content')
<h2>Welcome to My Awesome Website!</h2>
<p>This is the home page content.</p>
@endsection

Đây là những gì đang xảy ra:

  • @extends('layout'): Điều này nói với Blade sử dụng file layout.blade.php làm cơ sở.
  • @section('title', 'Home Page'): Điều này điền vào tiêu đề chúng ta để trống trước đó.
  • @section('content'): Đây là nơi chúng ta đặt nội dung duy nhất cho trang này.

3. Hiển thị Dữ liệu

Blade thực sự tỏa sáng khi nói đến việc hiển thị dữ liệu. Hãy giả sử chúng ta muốn hiển thị một danh sách các loại quả. Chúng ta sẽ cập nhật file home.blade.php:

@extends('layout')

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

@section('content')
<h2>Welcome to My Awesome Website!</h2>
<p>This is the home page content.</p>

<h3>Our Fruit Selection:</h3>
@if(count($fruits) > 0)
<ul>
@foreach($fruits as $fruit)
<li>{{ $fruit }}</li>
@endforeach
</ul>
@else
<p>Sorry, we're all out of fruit!</p>
@endif
@endsection

Trong ví dụ này:

  • @if và @else: Chúng cho phép chúng ta đưa ra quyết định trong mẫu.
  • @foreach: Điều này giúp chúng ta vòng qua danh sách các loại quả.
  • {{ $fruit }}: Cặp ngoặc kép doubles cho biết Blade hiển thị giá trị của biến.

4. Sử dụng các Component Blade

Các component Blade giống như những mảnh LEGO cho website của bạn. Chúng là những mảnh có thể tái sử dụng mà bạn có thể sử dụng trên các trang khác nhau. Hãy tạo một component đơn giản cho một nút.

Tạo một file mới resources/views/components/button.blade.php:

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

Bây giờ chúng ta có thể sử dụng nút này trong home.blade.php:

@extends('layout')

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

@section('content')
<h2>Welcome to My Awesome Website!</h2>
<p>This is the home page content.</p>

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

Điều này sẽ tạo một nút với văn bản "Click me!" và phong cách thành công.

Bảng Phím Lệnh Blade

Dưới đây là bảng nhỏ của một số lệnh Blade phổ biến:

Lệnh Mục đích
@if Điều kiện
@else Lựa chọn cho @if
@elseif Điều kiện thay thế
@foreach Vòng lặp qua mảng
@for Vòng lặp
@while Vòng lặp while
@switch Câu lệnh switch
@yield Định nghĩa một phần trong layout
@section Định nghĩa nội dung cho layout
@extends Xác định layout nào để sử dụng
@include Bao gồm một view khác
@auth Kiểm tra nếu người dùng đã xác thực
@guest Kiểm tra nếu người dùng là khách

Nhớ rằng, thực hành là cách tốt nhất để học! Đừng ngại thử nghiệm với các lệnh này và tạo ra các mẫu của riêng bạn. Trước khi bạn biết, bạn sẽ trở thành một ninja Blade, cắt qua HTML như một lưỡi dao nóng qua bơ!

Trong những năm dạy học của tôi, tôi đã phát hiện ra rằng cách tốt nhất để học là làm. Vậy tại sao không thử tạo một mẫu blog đơn giản bằng những gì chúng ta đã học? Bắt đầu với một layout chính, tạo các trang cho trang chủ, về chúng tôi và bài viết blog, và sử dụng các tính năng mạnh mẽ của Blade để làm cho mã của bạn sạch sẽ và không lặp lại (Don't Repeat Yourself).

Chúc các bạn lập trình vui vẻ, và may Blade luôn đồng hành với bạn! ?

Credits: Image by storyset

Hướng Dẫn Trước:
Laravel - Góc nhìn
Hướng Dẫn Tiếp Theo:
Laravel - Redirections