Quảng cáo

Blade template trong Laravel

Trong hướng dẫn này các bạn sẽ học cách hiển thị dữ liệu trong Blade template và triển khai code với Blade template trong Laravel 8

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ó.

Ở 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.

Giới thiệu về blade template.

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 (View Trong Laravel).

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:

Trong cặp dấu {{}} sẽ là code PHP của bạn.

VD:

- file routes/web.php

Ví dụ

/* routes/web.php */
use Illuminate\Support\Facades\Route;

Route::get('/', function () {
	return view('home', ['sitename' => "VZN.vn - tự học lập trình"]);
})->name('home');

- file resources/views/home.blade.php

Ví dụ

Xin chào bạn đến với {{ $sitename }}

Kết quả:

Blade template trong Laravel 8

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 sitename là một thẻ HTML.

Ví dụ

Route::get('/', function () {
	return view('home', ['sitename' => "<h1>VZN.vn - tự học lập trình</h1>"]);
})->name('home');

Kết quả:

Blade template trong laravel 8

Mặc địnhLaravel 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

Ví dụ

<?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

Ví dụ

/* routes/web.php */
use Illuminate\Support\Facades\Route;

Route::get('/', function () {
	return view('home', ['sitename' => "<h1 style='color:red'>VZN.vn - tự học lập trình</h1>"]);
})->name('home');

- file resources/views/home.blade.php

Ví dụ

Xin chào bạn đến với {!! $sitename !!}

Kết quả:

Blade template trong Laravel 8

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:

Ví dụ

@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.

Ví dụ

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

Đoạn blade trên sẽ tương đương với code PHP thuần như sau:

Ví dụ

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

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

Ví dụ

Xin chào bạn đến với @{{ $sitename }}

Kết quả:

Blade trong Laravel 8

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:

Ví dụ

@verbatim
    <div class="container">
        Xin chào bạn đến với {{ $sitename }}
    </div>
@endverbatim

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:

Ví dụ

{{--Day la comment --}}

Xin chào bạn đến với @{{ $sitename }}

Lúc này khi blade thực hiện compile thì nó sẽ bỏ qua đoạn code được comment đó.

Triển khai code với blade template.

if trong Blade template.

Trong blade template bạn có thể triển khai câu lệnh if trong PHP với các directive @if, @else, @elseif và @endif. Với ý nghĩa tương tự như đối với PHP thuần if, else, elseif, endif.

Ví dụ

@if (count($records) === 1)
    I have one record!
@elseif (count($records) > 1)
    I have multiple records!
@else
    I don't have any records!
@endif

Ngoài ra Blade còn cung cấp thêm một số các directive rút gọn khác như:

@unless

Nếu logic trong unless trả về false thì code bên trong directive sẽ được thực thi.

Ví dụ

@unless (Auth::check())
    You are not signed in.
@endunless

@isset

Kiểm tra một biến có tồn tại hay không. Logic tương tự if(isset()) trong PHP.

Ví dụ

@isset($records)
  // $records is defined and is not null...
@endisset

@empty

Kiểm tra xem một biến có tồn tại hoặc bằngnull hay không. Logic tương tự if (empty()) trong PHP.

Ví dụ

@empty($records)
    // $records is "empty"...
@endempty

@auth

Kiểm tra xem user đã logic hay chưa. Nếu user login rồi thì code bên trong cặp directive sẽ được thực thi.

Ví dụ

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

Nếu bạn cần xác thực theo guard khác thì bạn có thể truyền guard name và trong directive.

VD: check auth theo guard admin.

Ví dụ

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

@guest

Kiểm tra xem user đã logic hay chưa. Nếu user chưa login thì code bên trong cặp directive sẽ được thực thi.

Ví dụ

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

Nếu bạn cần xác thực theo guard khác thì bạn có thể truyền guard name và trong directive.

VD: check guest theo guard admin.

Ví dụ

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

@production

Kiểm tra xem môi trường có phải production hay không. Nếu môi trường là production thì code bên trong cặp directive sẽ được thực thi.

Ví dụ

@production
    // Production specific content...
@endproduction

@env

Ngoài ra bạn có thể check env theo tên môi trường truyền vào. Nếu đúng code bên trong cặp directive sẽ được thực thi.

Ví dụ

@env('staging')
    // The application is running in "staging"...
@endenv

@env(['staging', 'production'])
    // The application is running in "staging" or "production"...
@endenv

@hasSection

Kiểm tra xem trong template cha có tồn tại section nào đó hay không. Nếu có code bên trong cặp directive sẽ được thực thi.

Ví dụ

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

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

@sectionMissing

Đây là trường hợp ngược lại của @hasSection

Ví dụ

@sectionMissing('navigation')
    <div class="pull-right">
        @include('default-navigation')
    </div>
@endif

Switch trong Blade template.

Đối với câu lệnh switch các bạn có thể sử dụng các directive @switch, @case, @break, @default và @endswitch với ý nghĩa tương tự switch, case, break, default và endswitch trong PHP.

Ví dụ

@switch($i)
    @case(1)
        First case...
        @break

    @case(2)
        Second case...
        @break

    @default
        Default case...
@endswitch

Vòng lặp trong Blade template.

Để sử dụng các vòng lặp trong blade các bạn chỉ cần thêm @ vào trước các câu lệnh, riêng đối với câu lệnh do-while thì Blade không hỗ trợ.

VD: Các vòng lặp trong blade.

Ví dụ

@for ($i = 0; $i < 10; $i++)
    The current value is {{ $i }}
@endfor

@foreach ($users as $user)
    <p>This is user {{ $user->id }}</p>
@endforeach

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

@while (true)
    <p>I'm looping forever.</p>
@endwhile

Trong đó foresle sẽ kiểm tra nếu array cần lặp là một mảng trống thì logic trong cặp directive @empty và @endforelse sẽ được thực thi.

Trong vòng lặp trong Blade bạn cũng có thể sử dụng các directive @continue, @break tương ứng với continue, break trong PHP.

VD:

Ví dụ

@foreach ($users as $user)
    @if ($user->type == 1)
        @continue
    @endif

    <li>{{ $user->name }}</li>

    @if ($user->number == 5)
        @break
    @endif
@endforeach

Trong quá trình biên dịch vòng lặp trong blade template, Laravel có thực hiện thêm một biến $loop vào để các bạn có thể truy xuất các thông tin vòng lặp như lần lặp hiện tại, kiểm tra lần lặp cuối, lần lặp đầu tiên.

Ví dụ

@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

Đối với trường hợp có nhiều vòng lặp lồng nhau các bạn có thể trỏ đến parent để lấy thông thi vòng lặp bên ngoài.

Ví dụ

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

Danh sách các thuộc tính trong object$loop.

Property	Description
`$loop->index`	Lấy ra chỉ mục (index) của vòng lặp hiện tại, bắt đầu từ 0.
`$loop->iteration`	Lấy ra lần lặp thiện tại là lần lặp thứ mấy (bắt đầu từ 1).
`$loop->remaining`	Vòng lặp còn phải lặp thêm bao nhiêu lần nữa.
`$loop->count`	Lấy ra số lượng item của vòng lặp.
`$loop->first`	Kiểm tra xem lần lặp hiện tại có phải lần lặp đầu tiên không.
`$loop->last`	Kiểm tra xem lần lặp hiện tại có phải lần lặp cuối cùng không.
`$loop->even`	Kiểm tra xem lần lặp này có phải chẵn không
`$loop->odd`	Kiểm tra xem lần lặp này có phải lẻ không
`$loop->depth`	Mức độ lồng của vòng lặp hiện tại.
`$loop->parent`	Truy xuất đến thông tin của vòng lặp cha.

Bài viết này đã giúp ích cho bạn?

Trang trước Trang sau

Blade template trong Laravel

Giới thiệu về blade template.

Hiển thị dữ liệu trong Blade template.

Ví dụ

Ví dụ

Ví dụ

Ví dụ

Ví dụ

Ví dụ

Ví dụ

Ví dụ

Ví dụ

Blade & Javascript Framework.

Ví dụ

Ví dụ

Comment trong Blade.

Ví dụ

Triển khai code với blade template.

if trong Blade template.

Ví dụ

Ví dụ

Ví dụ

Ví dụ

Ví dụ

Ví dụ

Ví dụ

Ví dụ

Ví dụ

Ví dụ

Ví dụ

Ví dụ

Switch trong Blade template.

Ví dụ

Vòng lặp trong Blade template.

Ví dụ

Ví dụ

Ví dụ

Ví dụ

Bài viết này đã giúp ích cho bạn?

Về chúng tôi

Liên hệ

Các công cụ