post-image

Một vài điều thú vị trong Laravel Blade

Tổng quan
admin
26-03-2021
  • Blade trong Laravel là 1 templating engine – hay có thể hiểu đơn giản là bộ máy biên dịch template của Laravel. Laravel sẽ compiled file .blade.php thành code PHP thuần do đó chúng ta hoàn toàn có thể code PHP thuần trong file .blade.php.
  • Các file blade của Laravel có đuôi là .blade.php và được lưu ở thư mục resources/views. Hai lợi ích chính khi sử dụng blade đó là kế thừa (inheritance) các file blade lẫn nhau và phân chia 1 file giao diện lớn thành các file cấu thành nhỏ hơn (sections các file – phân chia 1 file thành các section). Sau đây ta quy ước gọi file .blade.php là 1 .blade cho gọn.
  • Một file .blade không khác gì 1 file giao diện .html thông thường ngoại trừ nó có thêm các directive – (có thể gọi là các chỉ dẫn). Một directive luôn bắt đầu bằng kí tự “@” ví dụ: @section, @yield, @show … Khi các file .blade được compiled, engine của Laravel sẽ dựa vào các directive này rồi biên dịch ra file giao diện .html ta mong muốn.

1. Một số directive trong Laravel:

  1. @extends, @section: Phần này chắc mình không cần đề cập vì quá cơ bản rồi.
  2. @yield: cho phép 1 giá trị default value như 1 tham số thứ 2, nếu section đang được gọi bị undefinded.
  3. @parent: nó sẽ tương đương với nội dung của 1 section trong layout mà @parent đang đề cập đến ví dụ:
@yield('content', View::make('view.name'))

Code language: PHP (php)

2. Components & Slots

Component và Slot được sử dụng khi ta có 1 thành phần muốn tái sử dụng ở rất nhiều nơi trong giao diện:

<!-- /resources/views/alert.blade.php -->

<div class="alert alert-danger">
    {{ $slot }}
</div>

Code language: HTML, XML (xml)

Biến $slot sẽ chứa nội dung chúng ta muốn inject vào component. Các component được xây dựng từ các directive @component

@component('alert')
    <strong>Whoops!</strong> Something went wrong!
@endcomponent

Code language: HTML, XML (xml)

Chúng ta có thể inject nội dụng vào 1 slot sử dụng directive @slot. Bất kì content nào không nằm trong 1 directive @slot sẽ được truyền vào component theo biến $slot

@component('alert')
    @slot('title')
        Forbidden
    @endslot

    You are not allowed to access this resource!
@endcomponent

Code language: JavaScript (javascript)

3. Hiển thị dữ liệu

3.1 Rendering JSON

Chúng ta có thể khởi tạo 1 biến Javascript và gán cho nó 1 chuỗi Json từ 1 biến mảng

<script>
    var app = <?php echo json_encode($array); ?>;
</script>

Code language: HTML, XML (xml)

Chúng ta có 1 cú pháp gọn hơn ở đây

<script>
    var app = @json($array);
</script>

Code language: HTML, XML (xml)

Directive @json cũng rất hữu dụng cho việc seeding các Component (khởi tạo giá trị ban đầu cho các thuộc tính) trong Vue hay các thuộc tính data-*

<example-component :some-prop='@json($array)'></example-component>

Code language: HTML, XML (xml)

3.2 Blade & JavaScript Framework

Bởi vì rất nhiều các JavaScript frameworks (1 trong số đó là Vuejs ) cũng sử dụng cú pháp “curly” braces – “{{ }}” để biểu diễn 1 biểu thức nào đó sẽ hiển thị lên browser. Để phân biệt Blade của Laravel và các Framework đó -> chúng ta sử dụng symbol “@” để thông báo cho Blade rendering engine sẽ được build theo kiểu file .blade của Laravel

<h1>Laravel</h1>

Hello, @{{ name }}.

Code language: HTML, XML (xml)

Ở ví dụ trên, kí tự @ sẽ bị blade engine loại bỏ khi biên dịch và chỉ giữ lại phần bên trong 2 dấu ngoặc nhọn. Nếu như chúng ta muốn hiển thị rất nhiều biến theo kiểu file .blade thì trước mỗi 1 cú pháp “curly” braces – “{{ }}” ta đều phải thêm directive @ để Laravel hiểu để biên dịch theo kiểu blade. Nếu số lượng biến lớn thì cách này có vẻ dài dòng thay vào đó ta có thể sử dụng directive @verbatim

@verbatim
    <div class="container">
        Hello, {{ name }}.
    </div>
@endverbatim

Code language: HTML, XML (xml)

3.3 Một số Control Structures

3.3.1 @auth và @guest

@auth và @guest được dùng để xác định nhanh xem 1 user đã được xác thực hay chỉ là 1 guest

@auth
    // The user is authenticated...
@endauth

@guest
    // The user is not authenticated...
@endguest

Code language: PHP (php)

Ngoài ra chúng ta có thể chỉ ra Authentication Guard sẽ đưuọc check khi sử dụng @auth và @guest

@auth('admin')
    // The user is authenticated...
@endauth

@guest('admin')
    // The user is not authenticated...
@endguest

Code language: PHP (php)

3.3.2 @hasSection

Chúng ta cũng có thể check xem 1 section có nội dung hay không

@hasSection('navigation')
    <div class="pull-right">
        @yield('navigation')
    </div>

    <div class="clearfix"></div>
@endif

Code language: HTML, XML (xml)

3.3.3 @forelse

Cấu trúc điều khiển forelse:

@forelse ($users as $user)
    <li>{{ $user->name }}</li>
@empty
    <p>No users</p>
@endforelse

Code language: PHP (php)

3.3.4 Loop Variable

Blade còn cung cấp cho chúng ta 1 tính năng khi làm việc với các cấu trúc vòng lặp đó là biến $loop. Biến này cung cấp cho chúng ta 1 số thông tin hữu ích như current loop index hay đây có phải phần tử first hay las trong vòng lặp

@foreach ($users as $user)
    @if ($loop->first)
        This is the first iteration.
    @endif

    @if ($loop->last)
        This is the last iteration.
    @endif

    <p>This is user {{ $user->id }}</p>
@endforeach

Code language: PHP (php)

Ngoài ra, nếu vòng loop của chúng ta đang được lồng trong 1 vòng loop khác, ta có thể truy cập đến biến $loop của vòng lặp cha thông qua thuộc tính parent.

@foreach ($users as $user)
    @foreach ($user->posts as $post)
        @if ($loop->parent->first)
            This is first iteration of the parent loop.
        @endif
    @endforeach
@endforeach

Code language: PHP (php)

Ngoài ra biến $loop còn có rất nhiều thuộc tính hữu dụng khác;

PropertyDescription
$loop->indexThe index of the current loop iteration (starts at 0).
$loop->iterationThe current loop iteration (starts at 1).
$loop->remainingThe iterations remaining in the loop.
$loop->countThe total number of items in the array being iterated.
$loop->firstWhether this is the first iteration through the loop.
$loop->lastWhether this is the last iteration through the loop.
$loop->evenWhether this is an even iteration through the loop.
$loop->oddWhether this is an odd iteration through the loop.
$loop->depthThe nesting level of the current loop.
$loop->parentWhen in a nested loop, the parent’s loop variable.

3.3.5 Comment

Comments cú pháp comment trong Blade

{{-- This comment will not be present in the rendered HTML --}}

3.3.6 @php

Trong 1 số trường hợp, nếu muốn nhúng các mã PHP thuần vào views. Chúng ta có thể sử dụng directive @php để thực thi đoạn mã PHP thuần trong Blade:

@php
    //
@endphp

Code language: JavaScript (javascript)

3.4 Rendering Views For Collections sử dụng @each

Chúng ta có thể kết hợp loops và includes vào trong cùng 1 câu lệnh sử dụng @each:

@each('view.name', $jobs, 'job')

Code language: PHP (php)

Nếu mảng truyền vào rỗng thì chúng ta có thể truyền vào tham số thứ 4 như là view mặc định.

@each('view.name', $jobs, 'job', 'view.empty')

Code language: PHP (php)

4. Stacks

Blade cho phép ta push các stacked javascript mà có thể được render ở đâu đó trong các view và layout khác. Đặc biệt rất hữu ích khi cần chỉ ra các thư viện Javascript được yêu cầu bởi View con:

@push('scripts')
    <script src="/example.js"></script>
@endpush

Code language: HTML, XML (xml)

Chúng ta có thể push Stacked nhiều lần nếu cần:

<head>
    <!-- Head Contents -->

    @stack('scripts')
</head>

Code language: HTML, XML (xml)

Nếu muốn prepend nội dung vào trước 1 stack, ta có thể sử dụng @prepend:

@push('scripts')
    This will be second...
@endpush

// Later...

@prepend('scripts')
    This will be first...
@endprepend

Code language: JavaScript (javascript)

Tài liệu tham khảo: https://laravel.com/docs/5.8/blade

Các bạn có thể tham khảo các bài viết hay về Laravel tại đây.

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

Tham khảo: https://viblo.asia/p/mot-vai-dieu-thu-vi-trong-laravel-blade-Az45bGqOKxY

Leave a Reply

Your email address will not be published.