Trong phần tiếp theo của loạt bài Blade template trong Laravel 8 này chúng ta sẽ tìm hiểu về cách xây dựng layout sử dụng kế thừa trong Blade đồng thời chúng ta cũng nghiên cứu luôn cả Form trong Blade nhé các bạn. Không lan man nữa chúng ta vào bài học thôi nào.
I. Xây dựng layout sử dụng kế thừa trong Blade.
Ở bài trước mình đã giới thiệu với mọi người về dựng layout với component trong Blade template rồi. Ngoài cách đó ra thì trong Blade template Laravel còn cho phép chúng ta dựng layout qua việc kế thừa các template nữa.
1. Định nghĩa layout
Để định nghĩa một layout trong blade chúng ta có thể khai báo như bình thường.
Để cho dễ hiểu mời các bạn theo dõi ví dụ sau đây của mình
Ví dụ
Trước hết chúng ta cần tạo thư mục layouts trong resources/views đã nhé các bạn
Tiếp theo là khai báo một layout trong resources/views/layouts/app.blade.php
<html>
<head>
<title>App Name - @yield('title')</title>
</head>
<body>
@section('sidebar')
This is the master sidebar.
@show
<div class="container">
@yield('content')
</div>
</body>
</html>Trong đó:
@yielddirective dùng để chỉ định section có name trong yield sẽ được hiển thị.@sectiondirective dùng để định nghĩa nội dung của một section.
2. Kế thừa layout
Sau khi đã tạo được layout rồi, để kế thừa một layout trong blade template chúng ta sử dụng cú pháp sau:
@extends('viewname')Trong đó: viewname là view mà bạn muốn kế thừa ( ví dụ muốn kế thừa view app ở trên thì khai báo @extends('layouts.app')
Như mình đã nói ở trên thì @section sẽ chỉ định nội dung được hiển thị @yield tương ứng trong layout.
Trong trường hợp nội dung truyền vào section là dữ liệu ngắn đơn giản thì bạn có thể sử dụng cú pháp:
@section('name')
'Data Body'
@endsectionTrong đó:
namelà tên của section bạn muốn truyền vào layout cha.Data Bodylà dữ liệu bạn muốn truyền vào trong section.
Ví Dụ:
Mình sẽ khai báo một view kế thừa layout ở ví dụ trên.
resources/views/home.blade.php
@extends('layouts.app')
@section('title', 'Page Title')
@section('sidebar')
@parent
<p>This is appended to the master sidebar.</p>
@endsection
@section('content')
<p>This is my body content.</p>
@endsectionKết quả: (dưới dạng view-source)
Như các bạn cũng đã thấy thì đối với @section('sidebar') mình có sử dụng directive @parent. Directive này sẽ lấy ra nội dung của @section('sidebar') trong layout cha. Nên dùng text "This is the master sidebar." sẽ vẫn được hiển thị ra. Nếu bạn không muốn hiển thị nội dung section trong layout cha thì có thể bỏ @parent directive đi.
Trong một vài trường hợp nếu muốn xác định giá trị mặc định sẽ hiển thị khi không có data truyền vào trong @yield thì bạn có thể sử dụng cú pháp sau:
@yield('name', 'Default content')Ví Dụ:
resources/views/layouts/app.blade.php
<html>
<head>
<title>App Name - @yield('title', 'Hoc.tv')</title>
</head>
<body>
@section('sidebar')
This is the master sidebar.
@show
<div class="container">
@yield('content')
</div>
</body>
</html>resources/views/home.blade.php
@extends('layouts.app')
@section('sidebar')
@parent
<p>This is appended to the master sidebar.</p>
@endsection
@section('content')
<p>This is my body content.</p>
@endsectionKết quả: Xem dưới dạng view-source
Như các bạn đã thấy thì @yield('title') đã hiển thị giá trị là "Hoc.tv" khi mình không khai báo section ở trong view home.blade.php
II. Form trong Blade template.
Trong Blade template, Laravel cũng đã cung cấp sẵn cho chúng ta một số directive hộ trợ cho việc tạo ra các method, csrf token.
Để thêm một input field hidden chứa csrf_token trong trong form các bạn có thể sử dụng directive @csrf.
Ví Dụ:
resources/views/home.blade.php
<form method="POST" action="/profile">
@csrf
</form>Kết quả: (dưới dạng view-source)
Ngoài ra bạn có thể sử dụng directive @method để thêm một input hidden chứa method của form. Vì HTML form không thể tạo được method PUT, PATCH, DELETE.
Ví Dụ:
resources/views/home.blade.php
<form action="/foo/bar" method="POST">
@method('PUT')
</form>Kết quả: (dưới dạng view-source)
III. Hiển thị validate error message trong Blade template.
Bạn có thể sử dụng @error directive để thực hiện việc hiển thị message lỗi của validation trả về
Ví Dụ:
<label for="title">Post Title</label>
<input id="title" type="text" class="@error('title') is-invalid @enderror">
@error('title')
<div class="alert alert-danger">{{ $message }}</div>
@enderrorTrong đó $message là biến sẽ được assign data khi có error name là title.
IV. Raw PHP.
Trong một số trường hợp bạn muốn sử dụng code PHP chứa logic code trong blade template bạn có thể sử dụng directive @php với cú pháp như sau:
@php(// code PHP here)
// hoặc
@php
// code PHP here.
@endphpVí Dụ:
resources/views/home.blade.php
@php
$message = "Hoc.tv";
@endphp
{{ $message }}Kết quả:
Lời kết:
Bài này chỉ nhằm mục đích hướng dẫn cú pháp chèn view, chèn form, kế thừa view trong blade template trong Laravel 8 mà thôi. Để tìm hiểu kỹ hơn các bạn nên tự thực hành nhiều trong project của mình. Chúc các bạn học tốt!
