Sử dụng Blade Template trong Laravel để tận dụng những hỗ trợ đặc biệt của blade giúp tạo view và layout nhanh chóng đơn giản và uyển chuyển
Giới thiệu Blade
Blade là công cụ được tích hợp sẵn trong Laravel giúp bạn tạo view và layout. Sử dụng Blade trong Laravel rất dễ dàng, bạn sẽ tạo view và sử dụng layout rất đơn giản.
View trong Laravel có 2 loại là view thường và blade view. Các view dạng blade có tên file mở rộng là .blade.php còn view thường thì trong tên file không có chữ blade. Blade view vẫn lưu trong folder resources/views
Trong Laravel, Blade views được biên dịch và được cache cho đến khi có thay đổi, nghĩa là view blade sẽ chạy rất nhanh. Trong blade có những lệnh đặc biệt, như @parent , @section và @yield , @if, @foreach, @for … sẽ có hướng dẫn bên dưới.
Cũng như view thường, việc nạp blade view có thể thực hiện trong routes/web.php hoặc trong controller bằng hàm view() . Ví dụ:
Hiện dữ liệu trong blade
Trong view thường để hiển thị giá trị của biến thì dùng cú pháp <?php echo $name; ?> . Còn trong blade view, để hiện giá trị biến/biểu thức thì bạn dùng cú pháp gọn hơn nhiều đó là {{ … }} . Ví dụ:
<!-- resources/views/loikhuyen.blade.php-->
<span>Hôm nay ngày {{$homnay}} </span>
<h2>Lời khuyên cuộc sống</h2>
<p>Việc gấp hãy điềm tĩnh nói từ từ rõ ràng</p>
<p>Việc nhỏ nhặt hãy nói hài hước nhẹ nhàng</p>
<p>Việc tổn thương người khác đừng nên nói</p>Kết quả hiển thị giá trị biến trong view:
Các cú pháp hỗ trợ trong blade
Sử dụng Blade trong Laravel là sử dụng các cú pháp được hỗ trợ trong blade view như @if, @foreach, @for, …
Cú pháp @if trong blade view
Cú pháp @if dùng diễn tả điều kiện, diễn tả rất tự nhiên giúp bạn hiện thông tin theo điều kiện rất uyển chuyển.
Dùng cú pháp @foreach trong blade view
Cú pháp @foreach … @endforeach giúp lặp qua một mảng dữ liệu. Lệnh này rất thường hay dùng để hiển thị một mảng tin, sản phẩm, bình luận, user…
Sử dụng @for trong blade
Trong Blade cũng có cú pháp @for… @endfor dùng để lặp
Viết mã php trong blade
Khi có nhu cầu viết code php trong blade view , hãy bao quanh bởi khối @php … @endphp . Ví dụ:
Nhúng view con vào blade view
Trong blade view, muốn nhúng view con vào thì dùng lệnh @include. View con được chèn sẽ kế thừa tất cả dữ liệu từ view cha nhưng bạn cũng có thể truyền vào cho view con một mảng các dữ liệu bổ sung.
Tạo layout trong Laravel
Layout là trang khung, là mẫu dùng chung cho các trang chức năng trong website (như trang chủ, liên hệ, đăng ký, chi tiết sản phẩm…). Trong 1 project Laravel, bạn có thể tạo 1 hoặc nhiều layout khác nhau.
Trong layout, có thể định nghĩa sẵn nhiều vùng để view con đưa nội dung vào. Mỗi view con chỉ định layout và đưa nội dung của mình vào các vùng đã định nghĩa trong layout.
Ví dụ: lienhe có dùng layout, khi user xem, có thể thấy cả layout và nội dung lienhe được đưa nội dung vào layout.
Mỗi file layout được lưu trong folder resources/views. Có 2 cách tạo layout trong Laravel: Cách 1 là template Inheritance khá đơn giản và dễ triển khai, bạn tạo layout như view lớn và các view con sẽ nhúng nội dung vào layout. Cách thứ hai là tạo layout dùng component, cách này phức tạp hơn.
Bài học này sẽ hướng dẫn bạn dùng template inheritance để tạo layout
Tạo layout với template inheritance
Các lệnh đặc biệt dùng trong layout
Khi sử dụng Blade trong Laravel để làm trang layout, có 2 lệnh quan trọng thường sử dụng là @yield và @section… show.
Lệnh @yield(‘tên’, ‘Nội dung’): là lệnh dùng để đặt tên cho 1 vị trí trong layout. View con sẽ dựa theo tên yield để đưa nội dung vào layout. Còn lệnh @section … @show: tương tự @yield, cũng là lệnh để đặt tên (đánh dấu) cho vị trí trong layout mà các view con sẽ đưa nội dung vào. Ví dụ:
@yield('tieudetrang', 'Bán hang online')@section('spNoiBat')
<p> Sản phẩm nổi bật</p>
@showCác lệnh trong blade dùng ở view con
Đối với các view con, có các lệnh thường dùng là @extends, @section… @endsection, @parent.
Lệnh @extends dùng trong view con, để chỉ định layout mà view con sẽ kế thừa. Lệnh @section… @endsection là lệnh trong view con bao quanh 1 vùng nội dung mà view con sẽ nhúng vào layout. Còn lệnh @parent : Là lệnh trong view con, để lấy dữ liệu trong section của layout.
@section('spNoiBat')
<div class='sanpham’> SP1 </div>
<div class='sanpham’> SP2 </div>
<div class='sanpham’> SP3 </div>
<div class='sanpham’> SP4 </div>
@endsectionPhối hợp sử dụng các lệnh trong blade
Ví dụ sau demo các sử dụng phối hợp các lệnh @yield , @extends, @section trong layout và view con:
1. Tạo 1 file mới lưu trong views/app.blade.php và code tạo layout, trong đó có hai vị trí được đặt tên là noidung và sidebar
<!--views/app.blade.php-->
<head><title>Shopping</title></head>
<body>
<div class="container">
<header>HEADER</header>
<nav><p>MENU</p></nav>
<article>
@yield('noidung','Nội dung chính')
</article>
<aside>
@section('sidebar')
<b>Thông tin bổ sung</b>
@show
</aside>
<footer>FOOTER</footer>
</div> </body>2. Tạo file view con views/child1.blade.php có sử dụng 2 lệnh:
Lệnh @extends(‘app’) dùng để kế thừa layout app đã tạo. Và lệnh @section … @endsection để khai báo nội dung cho 2 vùng noidung bà sidebar trong layout.
<!--views/child1.blade.php-->
@extends('app')
@section('noidung')
<h4>Nội dung trang con</h4>
@endsection
@section('sidebar')
<ul>
<li>Link1</li>
<li>Link2</li>
</ul>
@endsection3. Routing vào view con, view con sẽ kéo layout vào và đưa nội dung vào các vùng đã định nghĩa.
//roures/web.php
Route::get('/', function(){
return view("child1");
})
Bạn dùng lệnh @parent trong view con để giữ lại nội dung section của layout. Xem ví dụ sau:
<!--views/child1.blade.php
@extends('app')
@section('noidung')
<h4>Nội dung trang con
@endsection
@section('sidebar')
@parent
<ul>
<li>Link1</li>
<li>Link2</li>
</ul>
@endsection
Sử dụng stack trong blade
Lệnh stack để render thông tin vào một vị trí nào đó trong layout. Định nghĩa stack bằng lệnh @stack(tênStack)
Stack giúp nhúng javascript/css trong view con vào trong head của layout.
Bạn có thể đưa thông tin (nhiều lần) vào stack bằng lệnh @push
Ví dụ:
– Sử dụng stack: Trong layout, định nghĩa 2 stack bằng lệnh @stack(tênStack)
– Đưa script, style từ view con vào stack:
– Kết quả:
Sử dụng form trong Laravel
Form là thành phần không thể thiếu khi thiết kế view cho website. Form giúp nhận thông tin từ người dùng. Trong form có 2 field quan trọng bạn cần biết:
CSRF Field: Là field ẩn (hidden) mà Laravel bắt buộc nhúng vào form cho mục đích bảo mật, giúp bảo vệ website. Sử dụng lệnh @csrf ở bất cứ chỗ nào trong form để nhúng field csrf vào form.
Method Field: là field ẩn mà bạn chèn thêm vào form khi có nhu cầu sử dụng
các method http như PUT, PATCH, DELETE…
Sử dụng Blade trong Laravel để tận dụng các cú pháp được hỗ trợ để hiển thị dữ liệu một cách linh động, dễ code, triển khai layout và đưa dữ liệu từ view con vào layout rất dễ dàng.. Bạn tham khảo thêm ở đây nhé https://laravel.com/docs/9.x/blade . Bài học cần tham khảo trước bài này là Làm quen với laravel framework, nếu bạn chưa đọc thì đọc nhé.
