Ở phần trước mình đã giới thiệu với mọi người về View trong Laravel rồi. Phần này mình sẽ giới thiệu với mọi người về blade template trong Laravel 8.
1. Gới thiệu về blade template.
Blade template là một công cụ giúp chúng ta xử lí cú pháp trong view một cách ngắn ngọn, logic. Không giống như các template khác trong PHP thì blade cho phép chúng ta sử dụng cả PHP thuần trong nó.
Tất cả các blade template sẽ được biên dịch về mã PHP thuần và cache lại nên về cơ bản sử dụng blade template cũng không làm cho ứng dụng của bạn chậm đi.
Để sử dụng Blade template trong Laravel các bạn chỉ cần tạo view với đuôi file là .blade.php
.
Về cơ bản thì Blade Template cũng giống như các view thông thường nên chúng ta có thể sử dụng như view thông thường (xem phần trước).
2. Hiển thị dữ liệu trong Blade template.
Bạn có thể hiển thị dữ liệu trong Blade template với cú pháp:
{{ code }}
Trong cặp dấu {{}}
sẽ là code PHP của bạn.
VD:
- file routes/web.php
/* routes/web.php */
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
return view('home', ['name' => "Lò Thị Vi Sóng"]);
})->name('home');
- file resources/views/home.blade.php
Hello, {{ $name }}!
Kết quả:
Cặp dấu {{}}
tượng trưng cho câu lệnh echo trong PHP kết hợp với hàm htmlspecialchars để phòng chống lỗi XSS attack. Tức là bạn sẽ không thể in ra mã HTML sử dụng cặp dấu {{}}
này được.
VD: Mĩnh sẽ truyền name là một thẻ HTML.
Route::get('/', function () {
return view('home', ['name' => "Lò Thị Vi Sóng"]);
})->name('home');
Kết quả:
Mặc định Laravel sẽ bật chế độ double encoding trong hàm htmlspecialchars
nếu bạn muốn tắt nó bạn có thể sử dụng Blade::withoutDoubleEncoding
để tắt chúng đi. Và bạn nên đặt nó ở trong Provider để cho nó hoạt động tốt.
VD: Mình sẽ tắt double encoding trong Blade đi.
- file app/Providers/AppServiceProvider.php
<?php
namespace App\Providers;
use Illuminate\Support\Facades\Blade;
use Illuminate\Support\ServiceProvider;
class AppServiceProvider extends ServiceProvider
{
/**
* Bootstrap any application services.
*
* @return void
*/
public function boot()
{
Blade::withoutDoubleEncoding();
}
}
Trong trường hợp bạn muốn hiển thị ra dữ liệu nguyên bản của dữ liệu bạn có thể sử dụng cặp dấu {!!!!}
.
VD:
- file routes/web.php
/* routes/web.php */
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
return view('home', ['name' => "<span style='color: red'>Lò Thị Vi Sóng</span>"]);
})->name('home');
- file resources/views/home.blade.php
Hello, {!! $name !!}
Kết quả:
Chú ý: Vì các cặp {{}}
, {!!!!}
chỉ tương ứng với câu lệnh echo
trong PHP, nên nó chỉ nhận string truyền vào thôi.
Để hiển thị dữ liệu dạng json endcode trong Blade các bạn có thể sử dụng @json
với cú pháp sau:
@json($array, $flag)
Trong đó:
- $array
là mảng dữ liệu bạn muốn encode.
- $flag
là kiểu encode bạn muốn, trường này bạn có thể bỏ trống.
VD:
<script>
var app = @json($array);
</script>
Đoạn blade trên sẽ tương đương với code PHP thuần như sau:
<script>
var app = <?php echo json_encode($array); ?>;
</script>
2. Blade & Javascript Framework.
Vì hiện này khá nhiều các framework JS cũng sử dụng cáp cặp {{}}
để in ra dữ liệu. Nên nếu bạn không muốn Blade compile đoạn code nào đó thì bạn chỉ cần thêm ký tự @
vào trước là được.
VD: Mình sẽ thử thêm @
vào trước {{}}
trong ví dụ đầu tiên ở phần trên.
- file resources/views/home.blade.php
Hello, @{{ $name }}
Kết quả:
Trong trường hợp bạn không muốn Blade biên dịch nhiều dòng code thì bạn có thể sử dụng @verbatim
directive.
VD:
@verbatim
<div class="container">
Hello, {{ name }}.
</div>
@endverbatim
3. Comment trong Blade.
Để comment trong Blade template các bạn sử dụng cặp dấu {-- content --}
với content là nội dung bạn muốn comment
VD:
{{--Day la comment --}}
Hello, @{{ $name }}
Lúc này khi blade thực hiện compile thì nó sẽ bỏ qua đoạn code được comment đó.
4. Lời kết.
Phần này chúng ta tạm tìm hiểu đến đây thôi, phần sau mình sẽ giới thiệu với mọi người các directive của Blade template trong Laravel 8.
Đăng ký nhận tin.
Chúng tôi chỉ gửi tối đa 2 lần trên 1 tháng. Tuyên bố không spam mail!
Long Tran
4 năm trước
Duy Đôn
3 năm trước
Hiếu
3 năm trước
Nguyễn Văn Hiệp
3 năm trước
Nguyễn Văn Hiệp
3 năm trước
Vũ Nguyễn
3 năm trước
web
3 năm trước