Blade: template chạy trên server
View nằm trong resources/views, đuôi .blade.php. Controller trả view kèm dữ liệu:
return view('products.index', ['products' => $products]); // resources/views/products/index.blade.php
Cú pháp chính:
<h1>{{ $title }}</h1> {{-- tự escape, an toàn trước XSS --}}
{!! $trustedHtml !!} {{-- không escape: chỉ dùng với nội dung bạn tin tưởng --}}
@if ($products->isEmpty())
<p>Chưa có sản phẩm.</p>
@endif
@forelse ($products as $product)
<li>{{ $product->name }}: {{ number_format($product->price) }}đ</li>
@empty
<li>Trống</li>
@endforelse
Component và layout
Tạo file resources/views/components/layout.blade.php:
<!DOCTYPE html>
<html lang="vi">
<head>
<title>{{ $title ?? 'Học Laravel' }}</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
<main>{{ $slot }}</main>
</body>
</html>
Dùng ở trang khác:
<x-layout title="Sản phẩm">
<h1>Danh sách sản phẩm</h1>
</x-layout>
Giống component React: $slot giống children, thuộc tính truyền vào giống props. Component cũng có thể nhận dữ liệu qua @props.
Vite
@vite nạp CSS/JS do Vite build. Khi chạy composer run dev (hoặc npm run dev), sửa CSS là trình duyệt cập nhật ngay. Khi deploy thì chạy npm run build.
Starter kit: khi nào dùng React, Vue?
Khi tạo dự án, nếu chọn starter kit bạn có sẵn đăng nhập, đăng ký, xác thực 2 lớp:
- React, Vue hoặc Svelte (qua Inertia 3, TypeScript, shadcn/ui): controller vẫn ở Laravel, nhưng trả về một trang React thay vì view Blade. Với dev Next.js, đây là lựa chọn quen tay nhất: trang nằm trong
resources/js/pages, dữ liệu truyền từ controller vào props. - Livewire 4 (kèm Flux UI): giao diện tương tác viết bằng PHP và Blade, gần như không cần viết JavaScript.
Gặp dự án cũ dùng Breeze hay Jetstream? Đó là starter kit thế hệ trước (Laravel 11 trở về trước), giờ đã được thay bằng bộ mới ở trên. Đọc hiểu được, nhưng dự án mới không nên dùng.
Bài tập
- Tạo component layout như trên.
- Trong hàm index của ProductController, truyền một mảng 3 sản phẩm giả vào view
products.index. - Hiển thị danh sách bằng
@forelse, giá định dạng 150.000đ. - Thử in một chuỗi có thẻ script bằng hai dấu ngoặc nhọn và xem Blade escape nó thế nào.
Xem thêm
- 3-in-1: Laravel Project with ALL THREE Starter Kits (kênh Laravel Daily, tiếng Anh, 22 phút: cùng một dự án làm bằng Livewire, React và Vue)