Laravel Breeze

Laravel Breeze

01.08.2024
Author: ADMIN

# Laravel Breeze

Laravel Breeze là một hệ thống xác thực đơn giản và gọn nhẹ dành cho các ứng dụng Laravel. Nó cung cấp các tính năng cơ bản như đăng ký, đăng nhập, đặt lại mật khẩu và xác nhận email. Breeze được xây dựng để giúp các nhà phát triển khởi đầu nhanh chóng với các tính năng xác thực mà không phải cấu hình quá nhiều.

Cài Đặt Laravel Breeze

Để cài đặt Laravel Breeze, bạn cần làm theo các bước sau:

  1. Cài đặt Laravel

    Đầu tiên, bạn cần tạo một ứng dụng Laravel mới hoặc sử dụng một ứng dụng Laravel hiện có.

    composer create-project laravel/laravel my-app

  2. Cài đặt Laravel Breeze

    Sử dụng Composer để cài đặt gói Laravel Breeze.

    composer require laravel/breeze --dev

  3. Cài đặt Breeze

    Chạy lệnh cài đặt Breeze để thiết lập các file scaffolding cho hệ thống xác thực.

    php artisan breeze:install

  4. Chạy migration

    Chạy các lệnh migration để tạo các bảng cần thiết trong cơ sở dữ liệu.

    php artisan migrate

  5. Cài đặt các gói npm và build assets

    Breeze sử dụng các file frontend được xây dựng bằng Tailwind CSS và Laravel Mix. Chạy các lệnh dưới đây để cài đặt các gói npm và build assets.

    npm install && npm run dev

  6. Khởi động server

    Chạy server Laravel để kiểm tra hệ thống xác thực.

    php artisan serve

Các Tính Năng Chính

Sau khi cài đặt thành công, Breeze sẽ cung cấp các tính năng xác thực cơ bản sau:

  1. Đăng Ký Người Dùng

    Bạn có thể truy cập vào URL /register để hiển thị form đăng ký người dùng. Breeze sẽ tạo ra tất cả các controller và view cần thiết cho việc đăng ký người dùng.

    <!-- resources/views/auth/register.blade.php -->
<form method="POST" action="{{ route('register') }}">
    @csrf
    <!-- Các trường nhập thông tin -->
    <button type="submit">Register</button>
</form>

  2. Đăng Nhập

    Người dùng có thể đăng nhập vào ứng dụng qua URL /login.

    <!-- resources/views/auth/login.blade.php -->
<form method="POST" action="{{ route('login') }}">
    @csrf
    <!-- Các trường nhập thông tin -->
    <button type="submit">Login</button>
</form>

  3. Đặt Lại Mật Khẩu

    Breeze cung cấp các view và logic để đặt lại mật khẩu. Người dùng có thể truy cập URL /forgot-password để gửi yêu cầu đặt lại mật khẩu.

    <!-- resources/views/auth/forgot-password.blade.php -->
<form method="POST" action="{{ route('password.email') }}">
    @csrf
    <!-- Trường nhập email -->
    <button type="submit">Send Password Reset Link</button>
</form>

  4. Xác Nhận Email

    Breeze cũng hỗ trợ tính năng xác nhận email, cho phép bạn gửi email xác nhận đến người dùng sau khi họ đăng ký.

    <!-- resources/views/auth/verify-email.blade.php -->
<p>{{ __('Before proceeding, please check your email for a verification link.') }}</p>

Tùy Chỉnh Laravel Breeze

Nếu bạn muốn tùy chỉnh các view hoặc logic của Breeze, bạn có thể chỉnh sửa các file view trong thư mục resources/views/auth và các file controller trong thư mục app/Http/Controllers/Auth.

Tóm Tắt

Laravel Breeze là một giải pháp tuyệt vời cho việc khởi đầu nhanh chóng với các tính năng xác thực cơ bản trong Laravel. Nó cung cấp một bộ công cụ đầy đủ để quản lý đăng ký, đăng nhập, đặt lại mật khẩu và xác nhận email mà không cần cấu hình quá nhiều. Nếu bạn cần một hệ thống xác thực mạnh mẽ và tùy biến hơn, bạn có thể cân nhắc sử dụng Laravel Fortify hoặc Jetstream.

 

 

Chi tiết
Auth Basics

Auth Basics

01.08.2024
Author: ADMIN

# Auth Basics

Laravel cung cấp một hệ thống xác thực mạnh mẽ và dễ sử dụng. Dưới đây là những bước cơ bản để thiết lập và sử dụng hệ thống xác thực trong Laravel.

Bước 1: Cài Đặt Laravel UI

Laravel UI là một package cho phép bạn cài đặt các scaffolding (bộ khung) cho xác thực, bao gồm cả giao diện Bootstrap, Vue, và React.

Đầu tiên, cài đặt Laravel UI:

composer require laravel/ui

Sau đó, bạn có thể tạo scaffolding cho xác thực:

php artisan ui bootstrap --auth

Lệnh này sẽ tạo các route, controller, view cần thiết cho hệ thống xác thực và cài đặt Bootstrap. Nếu bạn muốn sử dụng Vue hoặc React, bạn có thể thay bootstrap bằng vue hoặc react.

Tiếp theo, chạy lệnh để cài đặt các package npm và biên dịch các asset:

npm install
npm run dev

Bước 2: Chạy Migrations

Laravel UI sẽ tạo sẵn các migration cho bảng users. Bạn chỉ cần chạy lệnh migrate để tạo bảng trong database:

php artisan migrate

Bước 3: Routes

Laravel UI sẽ tự động tạo các route cần thiết cho hệ thống xác thực trong file routes/web.php:

Auth::routes();

Bạn có thể kiểm tra file này để xem các route mà Laravel đã tạo cho bạn, bao gồm login, register, logout, và password reset.

Bước 4: Middleware

Laravel cung cấp middleware để bảo vệ các route của bạn. Middleware này sẽ đảm bảo rằng chỉ có người dùng đã xác thực mới có thể truy cập các route được bảo vệ.

Ví dụ, bạn có thể bảo vệ một route bằng middleware auth như sau:

Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home')->middleware('auth');

Bước 5: Views

Laravel UI sẽ tạo sẵn các view cho các trang login, register, và reset password trong thư mục resources/views/auth.

# Tips & Tricks about Laravel Auth

1. Login với $user

Khi bạn cần thiết lập một người dùng hiện tại làm người dùng đã xác thực, bạn có thể truyền instance của người dùng đó vào phương thức login của Facade Auth. Người dùng này phải là một implementation của interface Illuminate\Contracts\Auth\Authenticatable. Mô hình App\Models\User được bao gồm trong Laravel đã triển khai sẵn interface này. Phương pháp này hữu ích khi bạn đã có một instance người dùng hợp lệ, chẳng hạn như ngay sau khi người dùng đăng ký với ứng dụng của bạn.

use Illuminate\Support\Facades\Auth;

$user = User::find(1); // Giả sử bạn đã có instance của người dùng
Auth::login($user);

Ghi Nhớ Đăng Nhập Người Dùng

Auth::login($user, $remember = true);

Sử Dụng Guard

Nếu cần, bạn có thể chỉ định một guard xác thực trước khi gọi phương thức login:

Auth::guard('admin')->login($user);

Ngoài ra, bạn có thể tham khảo thêm về loginUsingId

2. Lấy id user đã đăng nhập

Auth::user()->id;
// or
Auth::id();

3. Extra Password Confirmation

Laravel cung cấp một tính năng gọi là "Extra Password Confirmation" (Xác nhận mật khẩu bổ sung), yêu cầu người dùng nhập lại mật khẩu của họ để xác nhận danh tính trước khi thực hiện các hành động nhạy cảm như thay đổi email, mật khẩu hoặc xóa tài khoản.

Thiết lập Extra Password Confirmation

Laravel đi kèm với các route và controller cần thiết để quản lý việc xác nhận mật khẩu bổ sung. Bạn có thể sử dụng PasswordConfirmationMiddleware để bảo vệ các route cần xác nhận mật khẩu bổ sung.

Sử Dụng Middleware

Đầu tiên, bạn cần bảo vệ các route nhạy cảm của mình bằng middleware password.confirm. Middleware này sẽ kiểm tra xem người dùng đã xác nhận mật khẩu của họ trong một khoảng thời gian nhất định (mặc định là 3 giờ).

Định Nghĩa Route

Trong file routes/web.php, bạn có thể thêm middleware password.confirm cho các route nhạy cảm của mình:

Route::get('/settings', [SettingsController::class, 'index'])->name('settings');

Route::get('/settings/security', [SettingsController::class, 'security'])->middleware(['auth', 'password.confirm'])->name('settings.security');

Trong ví dụ trên, route /settings/security sẽ yêu cầu người dùng xác nhận mật khẩu của họ trước khi truy cập.

Tạo Controller cho Xác Nhận Mật Khẩu

Laravel đã cung cấp sẵn controller và route cho việc xác nhận mật khẩu. Bạn có thể kiểm tra hoặc tùy chỉnh theo nhu cầu.

File: app/Http/Controllers/Auth/ConfirmPasswordController.php

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;

class ConfirmPasswordController extends Controller
{
    /**
     * Hiển thị form xác nhận mật khẩu.
     *
     * @return \Illuminate\View\View
     */
    public function showConfirmForm()
    {
        return view('auth.passwords.confirm');
    }

    /**
     * Xác nhận mật khẩu của người dùng.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\RedirectResponse
     */
    public function confirm(Request $request)
    {
        $request->validate([
            'password' => 'required|password',
        ]);

        $request->session()->put('auth.password_confirmed_at', time());

        return redirect()->intended();
    }
}

View cho Form Xác Nhận Mật Khẩu

Tạo một file view để hiển thị form xác nhận mật khẩu. Laravel có sẵn file confirm.blade.php cho form xác nhận mật khẩu trong thư mục resources/views/auth/passwords.

File: resources/views/auth/passwords/confirm.blade.php

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('Confirm Password') }}</div>

                <div class="card-body">
                    {{ __('Please confirm your password before continuing.') }}

                    <form method="POST" action="{{ route('password.confirm') }}">
                        @csrf

                        <div class="form-group row">
                            <label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>

                            <div class="col-md-6">
                                <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="current-password">

                                @error('password')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row mb-0">
                            <div class="col-md-8 offset-md-4">
                                <button type="submit" class="btn btn-primary">
                                    {{ __('Confirm Password') }}
                                </button>

                                @if (Route::has('password.request'))
                                    <a class="btn btn-link" href="{{ route('password.request') }}">
                                        {{ __('Forgot Your Password?') }}
                                    </a>
                                @endif
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Route Cho Xác Nhận Mật Khẩu

Laravel đã định nghĩa sẵn route cho xác nhận mật khẩu. Bạn có thể tìm thấy route này trong file routes/web.php:

Route::get('password/confirm', [ConfirmPasswordController::class, 'showConfirmForm'])->name('password.confirm');
Route::post('password/confirm', [ConfirmPasswordController::class, 'confirm']);

4. Fortify Password Rules

Laravel Fortify cung cấp một cách dễ dàng để tùy chỉnh quy tắc mật khẩu cho ứng dụng của bạn. Bạn có thể định nghĩa các quy tắc mật khẩu tùy chỉnh thông qua lớp Password.

Thiết Lập Các Quy Tắc Mật Khẩu

Laravel Fortify cung cấp lớp Password để bạn có thể định nghĩa các quy tắc mật khẩu một cách linh hoạt. Bạn có thể tùy chỉnh các quy tắc này trong phương thức boot của FortifyServiceProvider.

Cấu Hình Mặc Định

Trong FortifyServiceProvider, bạn có thể định nghĩa các quy tắc mật khẩu mặc định như sau:

File: app/Providers/FortifyServiceProvider.php

<?php

namespace App\Providers;

use App\Actions\Fortify\CreateNewUser;
use App\Actions\Fortify\ResetUserPassword;
use App\Actions\Fortify\UpdateUserPassword;
use App\Actions\Fortify\UpdateUserProfileInformation;
use Illuminate\Support\ServiceProvider;
use Laravel\Fortify\Fortify;
use Illuminate\Validation\Rules\Password;

class FortifyServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Fortify::createUsersUsing(CreateNewUser::class);
        Fortify::updateUserProfileInformationUsing(UpdateUserProfileInformation::class);
        Fortify::updateUserPasswordsUsing(UpdateUserPassword::class);
        Fortify::resetUserPasswordsUsing(ResetUserPassword::class);

        // Cấu hình các quy tắc mật khẩu
        Password::defaults(function () {
            return Password::min(8)
                            ->mixedCase()
                            ->letters()
                            ->numbers()
                            ->symbols()
                            ->uncompromised();
        });
    }
}

Trong đoạn mã trên, các quy tắc mật khẩu được thiết lập như sau:

  • min(8): Mật khẩu phải có ít nhất 8 ký tự.
  • mixedCase(): Mật khẩu phải có cả chữ hoa và chữ thường.
  • letters(): Mật khẩu phải có ít nhất một chữ cái.
  • numbers(): Mật khẩu phải có ít nhất một chữ số.
  • symbols(): Mật khẩu phải có ít nhất một ký tự đặc biệt.
  • uncompromised(): Mật khẩu không được nằm trong danh sách các mật khẩu đã bị lộ.

 

 

Chi tiết
Blade Components

Blade Components

01.08.2024
Author: ADMIN

# Blade Components

Laravel Blade Components cung cấp một cách tiện lợi để xây dựng các phần tử HTML tái sử dụng, giúp bạn tổ chức mã nguồn một cách rõ ràng và hiệu quả hơn. Blade Components cho phép bạn tách biệt logic và giao diện, giúp việc phát triển và bảo trì ứng dụng trở nên dễ dàng hơn.

1. Tạo Blade Components

Tạo Component Bằng Lệnh Artisan

Bạn có thể sử dụng lệnh Artisan để tạo một component:

php artisan make:component Alert

Lệnh này sẽ tạo hai file:

  • Một class component tại app/View/Components/Alert.php
  • Một view Blade tại resources/views/components/alert.blade.php

File Class Component

File: app/View/Components/Alert.php

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class Alert extends Component
{
    public $type;

    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct($type)
    {
        $this->type = $type;
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\Contracts\View\View|\Closure|string
     */
    public function render()
    {
        return view('components.alert');
    }
}

File View Component

File: resources/views/components/alert.blade.php

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

2. Sử Dụng Blade Components

Nhúng Component Trong View

Bạn có thể nhúng component trong view Blade bằng cú pháp <x-component-name>:

File: resources/views/welcome.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome</title>
</head>
<body>
    <x-alert type="success">
        This is a success alert.
    </x-alert>

    <x-alert type="danger">
        This is a danger alert.
    </x-alert>
</body>
</html>

3. Truyền Dữ Liệu Cho Component

Bạn có thể truyền dữ liệu cho component thông qua các thuộc tính:

File: app/View/Components/Alert.php

public $type;

public function __construct($type)
{
    $this->type = $type;
}

File: resources/views/components/alert.blade.php

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

File: resources/views/welcome.blade.php

<x-alert type="success">
    This is a success alert.
</x-alert>

<x-alert type="danger">
    This is a danger alert.
</x-alert>

4. Slots

Slots cho phép bạn xác định các phần nội dung động trong component. Mặc định, tất cả nội dung được truyền vào component sẽ nằm trong biến $slot.

Slots Mặc Định

File: resources/views/components/alert.blade.php

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

File: resources/views/welcome.blade.php

<x-alert type="success">
    This is a success alert.
</x-alert>

Named Slots

Bạn có thể tạo nhiều slots với tên khác nhau.

File: resources/views/components/alert.blade.php

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

File: resources/views/welcome.blade.php

<x-alert type="success">
    <x-slot name="title">
        Success
    </x-slot>
    This is a success alert.
</x-alert>

5. Inline Components

Nếu component của bạn đơn giản và không yêu cầu logic phức tạp, bạn có thể sử dụng Inline Components mà không cần tạo file class riêng.

File: resources/views/components/button.blade.php

<button {{ $attributes->merge(['class' => 'btn btn-primary']) }}>
    {{ $slot }}
</button>

File: resources/views/welcome.blade.php

<x-button>
    Click Me
</x-button>

Tóm Tắt

  • Tạo Component: Sử dụng lệnh Artisan để tạo component.
  • Nhúng Component: Sử dụng cú pháp <x-component-name> để nhúng component trong view.
  • Truyền Dữ Liệu: Truyền dữ liệu cho component thông qua các thuộc tính.
  • Slots: Sử dụng slots để xác định nội dung động trong component.
  • Inline Components: Sử dụng Inline Components cho các component đơn giản.

Blade Components giúp mã nguồn của bạn trở nên sạch sẽ, dễ đọc và dễ bảo trì hơn. Việc tách biệt giao diện và logic giúp bạn tập trung vào từng khía cạnh riêng biệt của ứng dụng, làm cho quá trình phát triển trở nên hiệu quả hơn.

Chi tiết
Layout: @include, @extends, @section, @yield

Layout: @include, @extends, @section, @yield

01.08.2024
Author: ADMIN

# @include, @extends, @section, và @yield

Laravel Blade cung cấp các từ khóa @include, @extends, @section, và @yield để giúp bạn tái sử dụng và tổ chức mã HTML một cách hiệu quả. Dưới đây là cách sử dụng từng từ khóa này với các ví dụ cụ thể.

@include

@include cho phép bạn nhúng một view Blade khác vào trong view hiện tại. Đây là cách tuyệt vời để tái sử dụng các phần tử HTML như header, footer, hoặc sidebar.

Ví Dụ

Giả sử bạn có một view header.blade.php:

<!-- resources/views/header.blade.php -->
<header>
    <h1>My Website Header</h1>
</header>

Bạn có thể nhúng view này vào view chính của bạn như sau:

<!-- resources/views/welcome.blade.php -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome</title>
</head>
<body>
    @include('header')
    <div class="content">
        <p>Welcome to the homepage!</p>
    </div>
</body>
</html>

@extends

@extends được sử dụng để chỉ định layout mà view hiện tại sẽ kế thừa. Layout này thường chứa các cấu trúc HTML cơ bản mà các view khác có thể sử dụng lại.

Ví Dụ

Giả sử bạn có một layout app.blade.php:

<!-- resources/views/layouts/app.blade.php -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>@yield('title')</title>
</head>
<body>
    @include('header')
    <div class="content">
        @yield('content')
    </div>
    @include('footer')
</body>
</html>

Trong view cụ thể của bạn, bạn có thể kế thừa layout này như sau:

<!-- resources/views/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 content.</p>
@endsection

@section và @yield

@section được sử dụng để xác định nội dung mà view con sẽ cung cấp cho các vùng nội dung được định nghĩa trong layout bằng @yield.

Ví Dụ

Trong layout app.blade.php, bạn có thể có các vùng nội dung:

<!-- resources/views/layouts/app.blade.php -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>@yield('title')</title>
</head>
<body>
    @include('header')
    <div class="content">
        @yield('content')
    </div>
    @include('footer')
</body>
</html>

Trong view con home.blade.php, bạn có thể định nghĩa các phần nội dung cho các vùng đó:

<!-- resources/views/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 content.</p>
@endsection

Tóm Tắt

  • @include: Nhúng một view Blade khác vào view hiện tại.
  • @extends: Kế thừa layout từ một view khác.
  • @section: Định nghĩa một phần nội dung trong view con.
  • @yield: Đánh dấu vị trí mà nội dung của view con sẽ được chèn vào trong layout.

Việc sử dụng @include, @extends, @section, và @yield giúp bạn tổ chức mã nguồn của mình một cách rõ ràng và tái sử dụng được các phần tử giao diện, làm cho việc phát triển và bảo trì ứng dụng trở nên dễ dàng hơn.

Chi tiết
Cấu Trúc Điều Kiện và Vòng Lặp Trong Blade

Cấu Trúc Điều Kiện và Vòng Lặp Trong Blade

01.08.2024
Author: ADMIN

# Cấu Trúc Điều Kiện và Vòng Lặp Trong Blade

Laravel Blade cung cấp các cú pháp đơn giản và rõ ràng để xử lý các cấu trúc điều kiện và vòng lặp. Dưới đây là các cú pháp cơ bản và ví dụ minh họa để bạn có thể hiểu rõ hơn về cách sử dụng chúng.

1. Cấu Trúc Điều Kiện

@if, @elseif, @else, và @endif

Cú pháp điều kiện trong Blade tương tự như trong PHP, nhưng được đơn giản hóa với các từ khóa của Blade.

Ví Dụ
@if ($user->isAdmin())
    <p>Welcome, Admin!</p>
@elseif ($user->isManager())
    <p>Welcome, Manager!</p>
@else
    <p>Welcome, User!</p>
@endif

@unless

Từ khóa @unless là cú pháp ngược của @if, nó sẽ thực thi khối mã nếu điều kiện là false.

Ví Dụ
@unless ($user->isGuest())
    <p>Welcome back, {{ $user->name }}!</p>
@endunless

@isset và @empty

Cú pháp này kiểm tra xem một biến có tồn tại hoặc rỗng hay không.

// Ví Dụ @isset
@isset($records)
    <p>Number of records: {{ count($records) }}</p>
@endisset

// Ví Dụ @empty
@empty($records)
    <p>No records found.</p>
@endempty

2. Cấu Trúc Vòng Lặp

@for, @foreach, @forelse, và @while

Blade hỗ trợ các cú pháp vòng lặp tương tự như PHP.

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

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

// Cú pháp @forelse kết hợp vòng lặp và kiểm tra rỗng, nó sẽ hiển thị một thông báo nếu mảng rỗng.
@forelse ($users as $user)
    <p>This is user {{ $user->name }}</p>
@empty
    <p>No users found.</p>
@endforelse

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

Break và Continue

Bạn có thể sử dụng @break và @continue để thoát khỏi vòng lặp hoặc bỏ qua một lần lặp nhất định.

@foreach ($numbers as $number)
    @if ($number > 5)
        @break
    @endif
    <p>The number is {{ $number }}</p>
@endforeach

// continue
@foreach ($numbers as $number)
    @if ($number % 2 == 0)
        @continue
    @endif
    <p>This is an odd number: {{ $number }}</p>
@endforeach

Tóm Tắt

  • Cấu Trúc Điều Kiện: Sử dụng @if, @elseif, @else, @endif, @unless, @isset, và @empty để kiểm tra các điều kiện khác nhau.
  • Cấu Trúc Vòng Lặp: Sử dụng @for, @foreach, @forelse, và @while để lặp qua các mảng hoặc thực hiện các vòng lặp cố định.
  • Break và Continue: Sử dụng @break và @continue để điều khiển luồng của vòng lặp.

Các cú pháp này giúp bạn dễ dàng quản lý và hiển thị dữ liệu trong view một cách rõ ràng và hiệu quả hơn trong Laravel Blade.

Chi tiết
Hiển thị giá trị trong Blade

Hiển thị giá trị trong Blade

01.08.2024
Author: ADMIN

# Hiển Thị Biến Trong Blade

Trong Laravel Blade, việc hiển thị biến rất đơn giản và trực quan. Blade cung cấp cú pháp dễ đọc và sử dụng để nhúng các biến PHP vào trong HTML.

Cú Pháp Cơ Bản

Sử Dụng Cặp Dấu Ngoặc Nhanh {{ }}

Để hiển thị giá trị của một biến trong Blade, bạn chỉ cần sử dụng cặp dấu ngoặc nhanh {{ }}.

Ví Dụ

Giả sử bạn có một biến $name được truyền từ controller đến view:

public function show()
{
    $name = 'John Doe';
    return view('greeting', compact('name'));
}

Trong file view greeting.blade.php, bạn có thể hiển thị giá trị của biến $name như sau:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Greeting Page</title>
</head>
<body>
    <h1>Hello, {{ $name }}!</h1>
</body>
</html>

Escape HTML Đầu Vào

Khi sử dụng cặp dấu ngoặc nhanh {{ }}, Blade sẽ tự động escape (chuyển đổi các ký tự đặc biệt thành các thực thể HTML) để bảo vệ chống lại các cuộc tấn công XSS.

Ví Dụ

<?php $name = '<script>alert("XSS")</script>'; ?>

<h1>Hello, {{ $name }}!</h1>

Kết quả hiển thị sẽ là:

<h1>Hello, &lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;!</h1>

Hiển Thị Biến Mà Không Escape HTML

Nếu bạn muốn hiển thị giá trị của biến mà không escape HTML, bạn có thể sử dụng cú pháp {!! !!}.

<?php $name = '<strong>John Doe</strong>'; ?>

<h1>Hello, {!! $name !!}!</h1>

Kết quả hiển thị sẽ là:

<h1>Hello, <strong>John Doe</strong>!</h1>

Hiển Thị Các Giá Trị Mặc Định

Bạn có thể hiển thị các giá trị mặc định khi biến không tồn tại hoặc rỗng bằng cách sử dụng toán tử null coalescing ??.

Ví Dụ

<h1>Hello, {{ $name ?? 'Guest' }}!</h1>

Nếu biến $name không tồn tại hoặc có giá trị là null, chuỗi 'Guest' sẽ được hiển thị.

Hiển Thị Mảng và Đối Tượng

Bạn có thể truy cập và hiển thị các phần tử của mảng hoặc thuộc tính của đối tượng một cách dễ dàng.

Ví Dụ Mảng

<?php $user = ['name' => 'John Doe', 'email' => 'john@example.com']; ?>

<h1>Name: {{ $user['name'] }}</h1>
<p>Email: {{ $user['email'] }}</p>

Ví Dụ Đối Tượng

<?php $user = (object) ['name' => 'John Doe', 'email' => 'john@example.com']; ?>

<h1>Name: {{ $user->name }}</h1>
<p>Email: {{ $user->email }}</p>

Tóm Tắt

  • Cú pháp cơ bản: Sử dụng {{ $variable }} để hiển thị giá trị của biến và tự động escape HTML.
  • Không escape HTML: Sử dụng {!! $variable !!} để hiển thị giá trị của biến mà không escape HTML.
  • Giá trị mặc định: Sử dụng {{ $variable ?? 'default' }} để hiển thị giá trị mặc định khi biến không tồn tại hoặc rỗng.
  • Mảng và đối tượng: Truy cập và hiển thị các phần tử của mảng hoặc thuộc tính của đối tượng bằng cú pháp {{ $array['key'] }} và {{ $object->property }}.

Việc sử dụng các cú pháp này giúp bạn dễ dàng và an toàn khi hiển thị dữ liệu trong các view Blade của Laravel.

Chi tiết
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