9 Tips about Blade

9 Tips about Blade

01.08.2024
Author: ADMIN

# 9 Tips about Blade

1. Sử dụng forelse thay vì foreach

Trong Laravel Blade, forelse là một cấu trúc vòng lặp hữu ích khi bạn muốn xử lý trường hợp một mảng là rỗng. Nó giúp bạn  lặp qua một mảng và cung cấp một cấu trúc điều kiện để hiển thị nội dung khi mảng rỗng.

ví dụ:

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

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

@if ($users->isEmpty())
    <p>No users found.</p>
@endif

// Replace

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

@forelse ($users as $user)
    <p>This is user {{ $user->name }}</p>
@empty
    <p>No users found.</p>
@endforelse

Giải Thích

  • @forelse ($users as $user): Nếu mảng $users không rỗng, vòng lặp này sẽ lặp qua từng phần tử trong mảng.
  • @empty: Nếu mảng $users rỗng, đoạn mã trong khối @empty sẽ được thực thi.
  • @endforelse: Kết thúc vòng lặp forelse.

2. Sử dụng @auth và @guest

Laravel cung cấp các directive @auth và @guest trong Blade để giúp bạn kiểm tra trạng thái xác thực của người dùng một cách dễ dàng. Đây là hai directive rất hữu ích khi bạn cần hiển thị nội dung khác nhau dựa trên việc người dùng đã đăng nhập hay chưa.

2.1. Directive @auth

Directive @auth được sử dụng để kiểm tra xem người dùng hiện tại có được xác thực hay không. Nếu người dùng đã đăng nhập, nội dung bên trong directive này sẽ được hiển thị.

Cú Pháp

@auth
    <!-- Nội dung dành cho người dùng đã đăng nhập -->
@endauth

Ví Dụ

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome Page</title>
</head>
<body>
    <h1>Welcome to My Laravel Application</h1>
    
    @auth
        <p>Welcome back, {{ Auth::user()->name }}!</p>
        <a href="{{ route('logout') }}">Logout</a>
    @endauth
</body>
</html>

2.2. Directive @guest

Directive @guest được sử dụng để kiểm tra xem người dùng hiện tại có chưa được xác thực hay không. Nếu người dùng chưa đăng nhập, nội dung bên trong directive này sẽ được hiển thị.

Cú Pháp

@guest
    <!-- Nội dung dành cho người dùng chưa đăng nhập -->
@endguest

Ví Dụ

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome Page</title>
</head>
<body>
    <h1>Welcome to My Laravel Application</h1>
    
    @guest
        <p>Please <a href="{{ route('login') }}">login</a> to access more features.</p>
        <a href="{{ route('register') }}">Register</a>
    @endguest
</body>
</html>

3. Sử dụng auth()->user()

Trong các file Blade, bạn có thể sử dụng auth()->user() để hiển thị thông tin người dùng hiện tại.

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Profile Page</title>
</head>
<body>
    <h1>Profile</h1>
    
    @if(auth()->check())
        <p>Name: {{ auth()->user()->name }}</p>
        <p>Email: {{ auth()->user()->email }}</p>
    @else
        <p>Please <a href="{{ route('login') }}">login</a> to view your profile.</p>
    @endif
</body>
</html>

Các Phương Thức Hữu Ích Khác

  • auth()->check(): Kiểm tra xem có người dùng nào đã đăng nhập hay không.
  • auth()->id(): Lấy ID của người dùng đã đăng nhập.

4. Format Carbon Dates

Carbon cung cấp nhiều phương thức để định dạng ngày và giờ, bao gồm toFormattedDateString, diffForHumans, và nhiều hơn nữa.

<p>Created at: {{ $post->created_at->toFormattedDateString() }}</p>
<p>Created at: {{ $post->created_at->diffForHumans() }}</p>
<p>Created at: {{ $post->created_at->format('l, d F Y H:i') }}</p>

Bạn có thể tạo một custom Blade directive để định dạng ngày và giờ một cách nhất quán.

Tạo Custom Blade Directive

Trong AppServiceProvider, bạn có thể đăng ký một custom Blade directive.

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Blade;
use Carbon\Carbon;

class AppServiceProvider extends ServiceProvider
{
    public function boot()
    {
        Blade::directive('datetime', function ($expression) {
            return "<?php echo ($expression)->format('d/m/Y H:i'); ?>";
        });
    }

    public function register()
    {
        //
    }
}

Sử Dụng Custom Blade Directive

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Show Date</title>
</head>
<body>
    <h1>Show Date</h1>
    
    <p>Created at: @datetime($post->created_at)</p>
</body>
</html>

5. Route::view()

Trong Laravel, phương thức Route::view cung cấp một cách tiện lợi để định nghĩa các tuyến đường (route) mà không cần một controller. Nó rất hữu ích cho các trang tĩnh hoặc các trang có ít logic.

Cú Pháp Route::view

Cú pháp cơ bản của Route::view như sau:

Route::view($uri, $view, $data = []);
  • $uri: URL của tuyến đường.
  • $view: Tên của view sẽ được trả về.
  • $data: (Tùy chọn) Mảng dữ liệu sẽ được truyền tới view.

Ví Dụ

Dưới đây là một số ví dụ về cách sử dụng Route::view trong tệp routes/web.php.

1. Định Nghĩa Một Tuyến Đường Đơn Giản

Giả sử bạn có một view tĩnh tên là welcome.blade.php trong thư mục resources/views.

Route::view('/welcome', 'welcome');

Khi người dùng truy cập vào URL /welcome, họ sẽ thấy nội dung của view welcome.blade.php.

2. Truyền Dữ Liệu Tới View

Bạn cũng có thể truyền dữ liệu tới view bằng cách sử dụng tham số thứ ba của Route::view.

Route::view('/about', 'about', ['name' => 'Laravel']);

Trong view about.blade.php, bạn có thể truy cập dữ liệu này như sau:

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>About</title>
</head>
<body>
    <h1>About</h1>
    <p>This application is built with {{ $name }}.</p>
</body>
</html>

6. Blade Error Pages

Laravel cung cấp các trang lỗi mặc định cho các mã lỗi HTTP khác nhau, chẳng hạn như 404 (Not Found), 500 (Internal Server Error), v.v. Tuy nhiên, bạn có thể tùy chỉnh các trang lỗi này để phù hợp với giao diện và trải nghiệm người dùng của ứng dụng của mình.

Để tùy chỉnh các trang lỗi, Laravel cung cấp một cách dễ dàng để xuất bản các file view lỗi mặc định vào thư mục views của bạn bằng lệnh php artisan vendor:publish.

Bước 1: Xuất Bản Các Trang Lỗi

Bạn có thể sử dụng lệnh php artisan vendor:publish --tag=laravel-errors để xuất bản các trang lỗi mặc định vào thư mục resources/views/errors của dự án của bạn.

Lệnh

php artisan vendor:publish --tag=laravel-errors

Lệnh này sẽ tạo các file view lỗi trong thư mục resources/views/errors của dự án của bạn.

Bước 2: Tùy Chỉnh Các Trang Lỗi

Sau khi các file view lỗi đã được xuất bản, bạn có thể tùy chỉnh chúng theo ý muốn của mình. Mỗi file đại diện cho một mã lỗi HTTP cụ thể. Ví dụ, bạn sẽ có các file như 404.blade.php, 500.blade.php, v.v.

Ví Dụ Tùy Chỉnh Trang 404

<!-- resources/views/errors/404.blade.php -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page Not Found</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 50px;
        }
        h1 {
            font-size: 50px;
        }
        p {
            font-size: 20px;
        }
        a {
            color: #3490dc;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <h1>404</h1>
    <p>Sorry, the page you are looking for could not be found.</p>
    <p><a href="{{ url('/') }}">Go to Homepage</a></p>
</body>
</html>

Bước 3: Kiểm Tra Các Trang Lỗi

Sau khi tùy chỉnh các trang lỗi, bạn có thể kiểm tra chúng bằng cách truy cập vào các URL không tồn tại hoặc gây ra các lỗi khác nhau trong ứng dụng của bạn. Ví dụ, truy cập một URL không tồn tại để kiểm tra trang 404.

Tóm Tắt

  • Xuất bản các trang lỗi: Sử dụng lệnh php artisan vendor:publish --tag=laravel-errors để xuất bản các file view lỗi mặc định.
  • Tùy chỉnh các trang lỗi: Chỉnh sửa các file trong resources/views/errors để phù hợp với giao diện của ứng dụng của bạn.
  • Kiểm tra các trang lỗi: Truy cập các URL không tồn tại hoặc gây ra các lỗi khác để xem các trang lỗi tùy chỉnh của bạn.

Việc tùy chỉnh các trang lỗi giúp bạn tạo ra một trải nghiệm người dùng nhất quán và chuyên nghiệp hơn, ngay cả khi có lỗi xảy ra trong ứng dụng của bạn.

7. Artisan view:clear

Trong Laravel, lệnh Artisan view:clear được sử dụng để xóa bộ nhớ cache của các file view đã được biên dịch. Đây là một lệnh hữu ích khi bạn thực hiện các thay đổi trong view và muốn chắc chắn rằng ứng dụng của bạn sẽ sử dụng các file view mới nhất mà không bị ảnh hưởng bởi các phiên bản đã được cache.

Cách Sử Dụng view:clear

Lệnh

Bạn có thể chạy lệnh này từ terminal bằng cách sử dụng:

php artisan view:clear

Kết Quả

Lệnh này sẽ xóa tất cả các file view đã được biên dịch và lưu trữ trong thư mục storage/framework/views. Sau khi lệnh được thực thi, Laravel sẽ biên dịch lại các file view khi chúng được yêu cầu lần tiếp theo.

Khi Nào Nên Sử Dụng view:clear

  • Khi Phát Triển: Nếu bạn thấy rằng các thay đổi bạn thực hiện trong view không được áp dụng, bạn có thể chạy lệnh này để xóa bộ nhớ cache và đảm bảo rằng các thay đổi sẽ được nhìn thấy.
  • Khi Triển Khai: Sau khi triển khai ứng dụng lên môi trường production, bạn có thể chạy lệnh này để xóa bộ nhớ cache cũ và buộc Laravel biên dịch lại các view với các thay đổi mới nhất.

8. Asset() helper

Trong Laravel, helper asset() được sử dụng để tạo URL tuyệt đối tới các tài nguyên công cộng (public assets) như hình ảnh, CSS, JavaScript, v.v. Helper này rất hữu ích để đảm bảo rằng các đường dẫn tới tài nguyên của bạn luôn chính xác, bất kể ứng dụng của bạn đang chạy trên môi trường nào.

asset($path, $secure = null)
  • $path: Đường dẫn tới tài nguyên tính từ thư mục public.
  • $secure: Tham số tùy chọn, nếu đặt là true, URL sẽ được tạo với HTTPS. Nếu không, HTTP sẽ được sử dụng.

9. Meta Title

Meta title là một phần quan trọng trong SEO và trải nghiệm người dùng, hiển thị tiêu đề của trang web trên trình duyệt và trong kết quả tìm kiếm. Trong Laravel Blade, bạn có thể dễ dàng thiết lập và tùy chỉnh meta title cho các trang web của mình.

Cách Thiết Lập Meta Title

Để thiết lập meta title trong Laravel Blade, bạn có thể sử dụng thẻ <title> trong phần <head> của HTML.

Sử Dụng @section và @yield

Nếu bạn sử dụng layout trong Laravel Blade, bạn có thể thiết lập meta title bằng cách sử dụng @section và @yield.

Layout (layouts/app.blade.php)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>@yield('title')</title>
</head>
<body>
    <header>
        <h1>My Website</h1>
    </header>

    <div class="content">
        @yield('content')
    </div>
</body>
</html>

View (home.blade.php)

@extends('layouts.app')

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

@section('content')
    <h2>Welcome to the Home Page</h2>
    <p>This is the home page of the website.</p>
@endsection

Sử Dụng @push và @stack

Một cách khác để thiết lập meta title là sử dụng @push và @stack.

Layout (layouts/app.blade.php)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>@stack('title')</title>
</head>
<body>
    <header>
        <h1>My Website</h1>
    </header>

    <div class="content">
        @yield('content')
    </div>
</body>
</html>

View (home.blade.php)

@extends('layouts.app')

@push('title')
    Home Page
@endpush

@section('content')
    <h2>Welcome to the Home Page</h2>
    <p>This is the home page of the website.</p>
@endsection
Chi tiết
Blade Basics

Blade Basics

01.08.2024
Author: ADMIN

# Blade Basics

Blade là một công cụ tạo template (template engine) mạnh mẽ được tích hợp sẵn trong Laravel. Nó cho phép bạn sử dụng các cấu trúc điều khiển như if, for, while,... ngay trong các file template của bạn. Dưới đây là một số khái niệm cơ bản và ví dụ minh họa để bạn có thể bắt đầu sử dụng Blade.

1. Tạo Và Sử Dụng File Blade

Các file Blade có đuôi mở rộng là .blade.php. Ví dụ, bạn có thể tạo một file Blade cho trang chủ của ứng dụng như sau:

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Home Page</title>
</head>
<body>
    <h1>Welcome to My Laravel Application</h1>
</body>
</html>

Để trả về view này từ một route, bạn có thể sử dụng phương thức view của Laravel:

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

2. Các Cấu Trúc Điều Khiển

If Statements

Blade hỗ trợ các cấu trúc điều khiển như if, elseif, else, và endif:

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

@if ($name == 'John')
    <p>Hello, John!</p>
@elseif ($name == 'Jane')
    <p>Hello, Jane!</p>
@else
    <p>Hello, Stranger!</p>
@endif

Loops

Blade cũng hỗ trợ các cấu trúc lặp như for, foreach, forelse, và while:

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

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

3. Echoing Data

Blade cung cấp cú pháp đơn giản để hiển thị dữ liệu từ các biến PHP:

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

<p>{{ $name }}</p>
<p>{{ $age }}</p>

Bạn cũng có thể sử dụng hàm @php để nhúng mã PHP trực tiếp vào file Blade:

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

@php
    $name = 'John';
@endphp

<p>{{ $name }}</p>

4. Escape HTML

Blade sẽ tự động escape các biến để bảo vệ ứng dụng của bạn khỏi các lỗ hổng XSS. Nếu bạn muốn hiển thị dữ liệu mà không escape, bạn có thể sử dụng cú pháp sau:

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

{!! $unescapedData !!}

5. Kế Thừa Layouts

Blade cung cấp cơ chế kế thừa layout giúp bạn tạo ra các template có cấu trúc lặp lại một cách dễ dàng.

Tạo Layout

<!-- resources/views/layouts/app.blade.php -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>@yield('title')</title>
</head>
<body>
    <div class="container">
        @yield('content')
    </div>
</body>
</html>

Sử Dụng Layout

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

@extends('layouts.app')

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

@section('content')
    <h1>Welcome to My Laravel Application</h1>
@endsection

6. Bao Gồm Các View Con (Including Sub-Views)

Bạn có thể chia nhỏ view thành các phần nhỏ hơn và bao gồm chúng vào view chính:

<!-- resources/views/includes/header.blade.php -->

<header>
    <h1>Header Content</h1>
</header>

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

@include('includes.header')
Chi tiết