Tìm hiểu về Blade template engine trong Laravel 5x

https://viblo.asia/p/tim-hieu-ve-blade-template-engine-trong-laravel-5x-AyQMpJzev0Ek

Tìm hiểu về Blade template engine trong Laravel 5x

PHP LiveTemplate frontend Laravel

Giới thiệu về blade template engine

Teamplete engine là gì

Template đó chính là 1 mẫu bố cục chung cho tất cả các trang có sử dụng lại những thành phần giống nhau mà không phải viết lại toàn bộ, từ đó trên mỗi trang, chỉ cần thay đổi ở một số nơi được chỉ định trên trang từ template.
Template engine có tác dụng giúp sạch đi những đoạn code PHP nằm trong View nên tách biệt hoàn toàn giữa người cắt CSS và người code PHP.
Hiện nay có khá nhiều template engine như Smarty, XiTemplate, TinyButStrong, Blade...

Blade templete là gì?

Blade rất đơn giản, nhưng lại là một templating engine đầy mạnh mẽ! Không giống những PHP templating engine phổ biến khác, Blade không giới hạn chúng ta sử dụng code PHP trong views. Tất cả các file Blade sẽ được dịch thành file code PHP và cache cho đến khi file Blade bị thay đổi, điều đó cũng có nghĩa là Blade tự làm tất cả những việc cần thiết để có thể chạy views cho ứng dụng của bạn
Các file view dùng cho Blade có phần tên đuôi file là .blade.php và được lưu trong thư mục mặc định resources/views(với laravel 5.x) và app/views(laravel 4.x).

Sử dụng blade templete engine trong laravel 5.x

Khởi tạo

Tên file luôn phải đặt dưới dạng xxx.blade.php
Nếu muốn thay đổi đường dẫn thư mục view của laravel 5 bạn chỉ cần sửa đường dẫn tại file config/view.php

    'paths' => [
        realpath(base_path('resources/views')),
    ],

Tạo file template đơn giản

tạo file resources/views/example.blade.php

<!-- resources/views/example.blade.php -->
<div class="article">
  <p><?php echo 'hello world' ?></p>
</div>

Tạo một route để test app/Http/routes.php

Route::get('/example', function ()    {
    return view('example');
});

Như vậy là ta đã tạo được file blade. Giờ bạn đã có thể vào app và kiểm tra trong đường dẫn: http:/localhost:8000/example

Truyền biến từ touter(controller) xuống view

Giờ ta chỉnh sửa một chút router và file view như sau

<!-- app/Http/routes.php -->
Route::get('/example', function ()    {
    return view('example', ['name' => 'test']);
});

<!-- resources/views/example.blade.php -->
<div class="article">
  <p><?php echo $name; ?></p>
</div>

Như vậy là ta đã có thể dễ dàng truyền giữ liệu từ controller xuống view một cách dễ dàng.

Các cú pháp trong blade templete engine

Để hiển thị giữ liệu trên view ta dùng dấu {{ $x }}

{{ $name }}

- Khi đó file blade sẽ tự build ra temple dạng theo dạng

<?php echo $name?>

Hiển thị giữ liệu tồn tại {{ {{ isset($name) ? $name : 'Hello world!' }} }}
cú pháp rút gọn : {{ $name or 'Default' }}
chú ý: blate không chấp nhận các lệnh comment thông thường của php như

// {{ $nam }}

- khi này mặc dù dòng code đã được comment nhưng khi được build ra view thì giữ liệu vẫn được sử lý và hiển thị bình thường.

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

lệnh if

@if (true)
    {{ 'is true!' }}
@else
{{ 'is false!' }}
@endif

- Có thể thấy code đã đơn giản hơn rất nhiều so với việc ta sử dụng lệnh if với cú pháp php thông thường
Vòng lặp

@for ($i = 0; $i < 10; $i++)
    Giá trị hiện tại là {{ $i }}
@endfor

@foreach ($users as $user)
    <p>Đây là user có mã {{ $user->id }}</p>
@endforeach

@while (true)
    <p>Tôi đang lặp mãi mãi :(</p>
@endwhile

Kế thừa

Đây là phần quan trọng nhất và cũng là mục tiêu của việc tạo ra các templete trong một ngôn ngữ lập trình
Một templete tốt không chỉ dễ sử dụng mà còn phải có tác dụng kế thừa để có thể sử dụng lại, tránh tối đa việc lặp code
Không thể nào tạo ra một file templete mà lại chỉ dùng cho một chức năng nhất định. ta phải làm cho chúng có thể sử dụng lại ở các màn hình khác có cùng chức năng.
cú pháp : @include('_example', ['name1' = $name])

<!-- resources/views/_example.blade.php -->
  <p><?php echo $name1; ?></p>

giờ ta include file _examplte vào màn hình example

<!-- resources/views/example.blade.php -->
<div class="article">
  @include('_example', ['name1' = $name])
</div>

kết quả thu được cũng tương hệt như kết quả lúc đầu. tuy nhiên từ nay ta có thể sử include templete _example.blade.php vào bất kỳ đoạn nào cần sử dụng đến hiển thị $name

Layout

Thiết kế layout cũng là một thành phần vô cùng quan trọng để có thể tận dụng tối đa sức mạnh của blade
Một trang web bất kỳ thường có một số thành phần không đổi như header, footer, title... Chính vì thế nếu mỗi lần tạo ra một view ta lại copy lại nhưng thành phần như vậy thì sẽ gây lặp code và việc maintain cũng mất thời gian hơn do phải làm đi làm lại một việc trên nhiều màn hình. việc này có thể gậy thiếu xót.

Cú pháp với việc tạo layout

<!-- Stored in resources/views/layouts/master.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>

<!-- Stored in resources/views/child.blade.php -->
@extends('layouts.master')

@section('title', 'Page Title')

@section('sidebar')
    <p>This is appended to the master sidebar.</p>
@endsection

@section('content')
    <p>This is my body content.</p>
@endsection

Trên đây là một ví dụ về việc tạo ra một layout cho một ứng dụng
Mỗi session sẽ là một khu vực hiển thị giữ liệu trong ứng dụng. ta chỉ cần viết một lần và nó sẽ được gọi ra ở bất kỳ một màn hình con nào được extend
một session được bắt đầu bởi @session('name') và kết thúc bởi @endsession
để include một layout ta sử dụng @exends('name_layout')

Kết luận

Trên đây là toàn bộ những kiến thức cơ bản để có thể sử dụng thành thạo blade templete.Việc sử dụng blade templete là một việc hết sức đơn giản và thuận tiện chính vì vậy nó đã làm tăng thêm rất nhiều sức mạnh cho larravel
Tài liệu tham khảo:
- https://laravel.com/docs/master/blade

PreviousQuản lý file với Laravel Mix (Ok)NextQUERY BUILDER TRONG LARAVEL FULL CRUD (OK)

Last updated 4 years ago