Thứ Sáu, 10 tháng 7, 2026

🚀 Laravel 12 (2026) — Bài 05 — Blade Template Engine: Xây dựng giao diện

Ở bài trước, chúng ta đã học cách sử dụng Controller để xử lý logic của ứng dụng.

Tuy nhiên, nếu Controller vừa xử lý dữ liệu vừa chứa toàn bộ mã HTML thì mã nguồn sẽ rất khó đọc và khó bảo trì.

Laravel giải quyết vấn đề này bằng Blade Template Engine – hệ thống template mạnh mẽ, đơn giản và được tích hợp sẵn.

Blade là gì?

Blade là Template Engine của Laravel, giúp tách riêng phần giao diện (View) khỏi phần xử lý nghiệp vụ (Controller).

Mô hình hoạt động:

Request
    ↓
Route
    ↓
Controller
    ↓
Model (nếu có)
    ↓
Blade View
    ↓
HTML

Nhờ Blade, chúng ta có thể:

Viết giao diện sạch sẽ.
Tái sử dụng các thành phần giao diện.
Tránh lặp lại mã HTML.
Hiển thị dữ liệu một cách an toàn.

Tạo View đầu tiên

Trong Laravel, tất cả giao diện được lưu trong thư mục:

resources/
└── views/

Tạo file:

resources/views/home.blade.php

Nội dung:

<h1>Xin chào Laravel 12</h1>

Trong Controller:

public function index()
{
    return view('home');
}

Laravel sẽ tự động tìm file:

resources/views/home.blade.php

Truyền dữ liệu sang Blade

Controller:

public function index()
{
    $title = "Học Laravel 12";

    return view('home', compact('title'));
}

Blade:

<h1>{{ $title }}</h1>

Ký hiệu:

{{ }}

được dùng để hiển thị dữ liệu và tự động chống XSS bằng cách escape HTML.

Viết PHP trong Blade

Blade hỗ trợ cú pháp ngắn gọn hơn PHP thuần.

Điều kiện:

@if($age >= 18)
    Người lớn
@else
    Trẻ em
@endif

Vòng lặp:

@foreach($posts as $post)
    <p>{{ $post->title }}</p>
@endforeach

Lặp theo số lần:

@for($i = 1; $i <= 5; $i++)
    {{ $i }}
@endfor

Layout

Một website thường có:

Header
Menu
Footer
Nội dung

Nếu mỗi trang đều viết lại những phần này sẽ rất mất thời gian.

Blade cho phép tạo Layout dùng chung.

Ví dụ:

resources/views/layouts/app.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 12</title>
</head>
<body>

<header>
    Header
</header>

@yield('content')

<footer>
    Footer
</footer>

</body>
</html>

@extends

Trang Home:

@extends('layouts.app')

@section('content')

<h1>Trang chủ</h1>

@endsection

Laravel sẽ tự động chèn nội dung của @section vào vị trí @yield.

Đây là cách tổ chức giao diện phổ biến trong hầu hết các dự án Laravel.

@section và @yield

Layout:

@yield('content')

View:

@section('content')

<h2>Xin chào</h2>

@endsection

Có thể tạo nhiều vùng nội dung như:

title

content

sidebar

scripts

Mỗi vùng sẽ được quản lý độc lập.

@include

Những phần giao diện dùng nhiều lần nên tách thành các file riêng.

Ví dụ:

views/
├── partials/
│   ├── header.blade.php
│   ├── footer.blade.php
│   └── menu.blade.php

Trong Layout:

@include('partials.header')

@include('partials.menu')

@yield('content')

@include('partials.footer')

Việc chia nhỏ giao diện giúp dự án dễ bảo trì hơn rất nhiều.

Blade Component

Đối với những thành phần giao diện có thể tái sử dụng như:

Button
Card
Alert
Modal
Navbar

Laravel khuyến khích sử dụng Component.

Tạo Component:

php artisan make:component Alert

Laravel sẽ tạo:

app/View/Components/

resources/views/components/

Sử dụng:

<x-alert>
    Lưu dữ liệu thành công.
</x-alert>

Component giúp giao diện hiện đại, dễ mở rộng và giảm đáng kể lượng mã bị lặp.

Comment trong Blade

Comment chỉ hiển thị trong mã nguồn:

{{-- Đây là comment Blade --}}

Khác với:

<!-- HTML Comment -->

Comment Blade sẽ không xuất hiện khi trình duyệt nhận HTML.

Escape HTML

Blade mặc định bảo vệ khỏi XSS:

{{ $content }}

Nếu muốn hiển thị HTML:

{!! $content !!}

Chỉ nên sử dụng khi dữ liệu đã được kiểm soát để tránh lỗ hổng bảo mật.

Cấu trúc thư mục gợi ý

resources/
└── views/
    ├── layouts/
    │   └── app.blade.php
    ├── partials/
    │   ├── header.blade.php
    │   ├── footer.blade.php
    │   └── menu.blade.php
    ├── components/
    ├── home.blade.php
    └── about.blade.php

Đây là cách tổ chức được sử dụng phổ biến trong các dự án Laravel.

Tổng kết

Sau bài học này, bạn đã biết:

Blade Template Engine là gì.
Tạo View trong Laravel.
Truyền dữ liệu từ Controller sang View.
Hiển thị dữ liệu với {{ }}.
Sử dụng @if, @foreach, @for.
Tạo Layout với @extends, @section và @yield.
Tái sử dụng giao diện bằng @include.
Xây dựng Component để tạo các thành phần giao diện chuyên nghiệp.
Hiểu cách Blade hỗ trợ bảo mật thông qua cơ chế escape HTML.

Ở bài tiếp theo, chúng ta sẽ bắt đầu làm việc với cơ sở dữ liệu bằng cách cấu hình Database, kết nối MySQL và thực hiện Migration đầu tiên trong Laravel 12.

quay về MỤC LỤC

NTM Solutions

Lớp học Vi Tính

Bài đăng nổi bật

🚀 Laravel 12 (2026) — Từ PHP Core đến Full Stack📘