Laravel Blade là template engine được tích hợp sẵn trong Laravel, giúp lập trình viên xây dựng giao diện bằng PHP theo cách ngắn gọn và dễ quản lý hơn. Blade hỗ trợ biến, điều kiện, vòng lặp, layout, component và nhiều directive tiện dụng, phù hợp với hầu hết ứng dụng Laravel sử dụng server-side rendering.
Laravel Blade là gì?
Laravel Blade là template engine mặc định của Laravel, được sử dụng để xây dựng phần giao diện của ứng dụng.
Blade cho phép viết HTML kết hợp với cú pháp PHP đơn giản thay vì phải sử dụng quá nhiều đoạn PHP thuần trong file giao diện.
File Blade thường có phần mở rộng:
.blade.php
Ví dụ:
<h1>Xin chào, {{ $name }}</h1>
Laravel sẽ xử lý template Blade và biên dịch thành PHP trước khi thực thi.
Một trong những ưu điểm lớn của Blade là cú pháp ngắn gọn nhưng vẫn giữ được sự linh hoạt của PHP.
Nếu đang học Laravel từ đầu, bạn có thể tham khảo Học Laravel để tìm hiểu thêm các kiến thức liên quan đến Routing, Controller, Model, Database và Blade.
Blade hoạt động như thế nào?
Khi Controller trả về một Blade View:
return view(‘home’);
Laravel sẽ tìm file tương ứng:
resources/views/home.blade.php
Sau đó Blade template được biên dịch thành PHP và Laravel sử dụng kết quả đó để tạo HTML trả về trình duyệt.
Quy trình cơ bản:
Request
↓
Route
↓
Controller
↓
Blade View
↓
HTML
↓
Trình duyệt
Blade không phải một ngôn ngữ lập trình hoàn toàn mới. Nó bổ sung cú pháp giúp PHP được sử dụng trong template theo cách dễ đọc và thuận tiện hơn.
Cú pháp hiển thị dữ liệu trong Blade
Cách sử dụng Blade phổ biến nhất là hiển thị dữ liệu từ Controller.
Controller:
public function index()
{
$name = ‘Nguyễn Văn A’;
return view(‘home’, compact(‘name’));
}
Trong Blade:
<h1>Xin chào {{ $name }}</h1>
Laravel sẽ hiển thị giá trị của $name trên giao diện.
Hiển thị HTML không escape
Blade mặc định escape dữ liệu khi sử dụng:
{{ $content }}
Nếu cần hiển thị HTML đã được tin cậy, có thể sử dụng:
{!! $content !!}
Tuy nhiên, không nên sử dụng cú pháp này với dữ liệu do người dùng nhập nếu chưa được kiểm soát, vì có thể dẫn đến lỗ hổng XSS.
Điều kiện trong Laravel Blade
Blade cung cấp các directive giúp viết điều kiện rõ ràng hơn.
Ví dụ:
@if($user->is_admin)
<p>Bạn là quản trị viên</p>
@else
<p>Bạn là người dùng</p>
@endif
Ngoài @if, Blade còn hỗ trợ những directive quen thuộc như:
@elseif
@else
@endif
Có thể sử dụng @unless cho trường hợp điều kiện ngược:
@unless($isActive)
<p>Tài khoản chưa được kích hoạt.</p>
@endunless
Vòng lặp trong Blade
Blade giúp xử lý danh sách dữ liệu trực tiếp trong View.
Ví dụ:
@foreach($posts as $post)
<h2>{{ $post->title }}</h2>
@endforeach
Có thể sử dụng @forelse khi muốn xử lý cả trường hợp danh sách rỗng:
@forelse($posts as $post)
<h2>{{ $post->title }}</h2>
@empty
<p>Chưa có bài viết nào.</p>
@endforelse
Cách này giúp template dễ đọc hơn so với việc viết PHP thuần bên trong HTML.
Blade Layout giúp tái sử dụng giao diện
Một ứng dụng thường có nhiều trang nhưng cùng sử dụng các thành phần như:
- Header
- Menu
- Footer
- Sidebar
- File CSS và JavaScript
Nếu viết lại toàn bộ HTML cho từng trang sẽ gây trùng lặp.
Blade giải quyết vấn đề này bằng template inheritance.
Tạo layout
Ví dụ file:
resources/views/layouts/app.blade.php
Nội dung:
<!DOCTYPE html>
<html>
<head>
<title>@yield(‘title’)</title>
</head>
<body>
<header>
Website Laravel
</header>
<main>
@yield(‘content’)
</main>
</body>
</html>
Trang con có thể kế thừa layout:
@extends(‘layouts.app’)
@section(‘title’, ‘Trang chủ’)
@section(‘content’)
<h1>Chào mừng bạn</h1>
@endsection
Nhờ đó, phần HTML chung chỉ cần xây dựng một lần.
Blade Include để tái sử dụng thành phần
Ngoài kế thừa layout, Blade còn cho phép đưa một View khác vào template bằng @include.
Ví dụ:
@include(‘partials.header’)
Nếu file nằm tại:
resources/views/partials/header.blade.php
Laravel sẽ chèn nội dung file đó vào View hiện tại.
Cách này phù hợp với các thành phần giao diện đơn giản như:
partials/
├── header.blade.php
├── footer.blade.php
├── sidebar.blade.php
└── navigation.blade.php
Blade Component là gì?
Blade Component giúp xây dựng những thành phần giao diện có khả năng tái sử dụng cao hơn.
Ví dụ một Button Component:
<x-button>
Lưu dữ liệu
</x-button>
Component có thể nhận thuộc tính:
<x-button type=”submit”>
Lưu
</x-button>
Cách tổ chức này đặc biệt hữu ích với ứng dụng có nhiều thành phần giao diện lặp lại.
Có thể sử dụng Component cho:
- Button
- Modal
- Form input
- Alert
- Card
- Navigation
- Table
So với @include, Component phù hợp hơn khi thành phần giao diện có cấu trúc và logic riêng.
Truyền dữ liệu từ Controller vào Blade
Thông thường Controller sẽ lấy dữ liệu rồi truyền sang View.
Ví dụ:
public function index()
{
$posts = Post::latest()->get();
return view(‘posts.index’, [
‘posts’ => $posts
]);
}
Trong Blade:
@foreach($posts as $post)
<article>
<h2>{{ $post->title }}</h2>
<p>{{ $post->excerpt }}</p>
</article>
@endforeach
Nên giữ vai trò của Blade tập trung vào hiển thị dữ liệu, thay vì đưa quá nhiều nghiệp vụ vào View.
Một số Blade Directive thường dùng
Blade có nhiều directive giúp xử lý các tình huống phổ biến.
| Directive | Công dụng |
| @if | Kiểm tra điều kiện |
| @foreach | Duyệt danh sách |
| @forelse | Duyệt danh sách và xử lý trường hợp rỗng |
| @include | Nhúng View khác |
| @extends | Kế thừa Layout |
| @section | Khai báo nội dung Section |
| @yield | Xác định vị trí nội dung |
| @auth | Kiểm tra người dùng đã đăng nhập |
| @guest | Kiểm tra người dùng chưa đăng nhập |
| @can | Kiểm tra quyền Authorization |
Ví dụ:
@auth
<p>Xin chào, {{ auth()->user()->name }}</p>
@endauth
Hoặc kiểm tra quyền:
@can(‘update’, $post)
<a href=”#”>Chỉnh sửa</a>
@endcan
Nếu muốn hệ thống hóa kiến thức về Blade cùng các thành phần nền tảng khác, bạn có thể xem thêm danh mục Laravel cơ bản để tiếp tục học theo từng chủ đề.
Blade có thay thế JavaScript không?
Không.
Blade và JavaScript phục vụ những vai trò khác nhau.
Blade chủ yếu được xử lý ở phía server để tạo HTML:
Laravel → Blade → HTML → Browser
JavaScript được thực thi chủ yếu ở phía trình duyệt để tạo tương tác động.
Ví dụ:
- Blade: hiển thị danh sách sản phẩm từ database.
- JavaScript: mở modal, cập nhật giao diện, gọi API mà không cần tải lại trang.
Trong ứng dụng Laravel hiện đại, Blade hoàn toàn có thể kết hợp với JavaScript hoặc các công cụ frontend khác.
Ưu điểm của Laravel Blade
Blade được sử dụng rộng rãi trong Laravel nhờ một số ưu điểm:
Cú pháp đơn giản
Cú pháp như:
@if
@foreach
@include
@extends
dễ đọc hơn nhiều đoạn PHP thuần trộn trực tiếp với HTML.
Hỗ trợ tái sử dụng giao diện
Layout, Include và Component giúp giảm code trùng lặp.
Có sẵn trong Laravel
Không cần cài thêm template engine bên ngoài để sử dụng Blade.
Hỗ trợ bảo mật
Cú pháp:
{{ $data }}
mặc định escape dữ liệu, giúp giảm nguy cơ XSS trong nhiều trường hợp.
Dễ kết hợp với Laravel
Blade hoạt động tốt với:
- Routing
- Controller
- Eloquent
- Authentication
- Authorization
- Validation
- Session
Những lưu ý khi sử dụng Blade
Không đưa quá nhiều nghiệp vụ vào View
Không nên biến Blade thành nơi xử lý các nghiệp vụ phức tạp. Thay vì đưa nhiều quy tắc vào View, nên xử lý logic ở Controller, Model, Policy hoặc lớp nghiệp vụ phù hợp.
Hạn chế View quá lớn
Một file Blade chứa hàng nghìn dòng HTML sẽ khó bảo trì.
Nên tách các phần giao diện thành Layout, Include hoặc Component.
Cẩn thận với dữ liệu HTML
Chỉ sử dụng:
{!! $content !!}
khi bạn kiểm soát và tin tưởng nội dung đó.
Với dữ liệu thông thường, ưu tiên:
{{ $content }}
Khi nào nên sử dụng Laravel Blade?
Blade phù hợp với nhiều loại ứng dụng Laravel, đặc biệt là:
- Website doanh nghiệp.
- Blog và website tin tức.
- Hệ thống quản trị.
- Website thương mại điện tử.
- Landing page.
- Ứng dụng CRUD.
- Các ứng dụng cần server-side rendering.
Với những dự án yêu cầu giao diện tương tác rất cao, Blade vẫn có thể đóng vai trò phần View kết hợp với JavaScript hoặc các công nghệ frontend khác.
Kết luận
Laravel Blade là template engine quan trọng trong hệ sinh thái Laravel, giúp xây dựng giao diện PHP theo cách rõ ràng, dễ bảo trì và có khả năng tái sử dụng cao. Các tính năng như hiển thị dữ liệu, điều kiện, vòng lặp, Layout, Include và Component giúp Blade đáp ứng tốt nhu cầu xây dựng giao diện cho ứng dụng Laravel. Để sử dụng Blade hiệu quả, nên giữ View tập trung vào việc trình bày dữ liệu, đồng thời đưa nghiệp vụ và logic phức tạp về đúng tầng xử lý. Đây là cách giúp ứng dụng Laravel có cấu trúc rõ ràng và dễ mở rộng hơn.
