Chương 12-Bài 1. Đa ngôn ngữ trong Laravel

Trong Laravel, ngôn ngữ được setup trong thư mục resources/lang Mỗi từ trong ngôn ngữ sẽ được lưu vào mảng ARRAY dạng KEY => VALUE.

Tạo một ngôn ngữ mới

Step 1: tạo folder tương ứng với ngôn ngữ trong thư mục resources/lang

├───lang
│   ├───en
│   │       auth.php
│   │       pagination.php
│   │       passwords.php
│   │       validation.php
│   │       sunshine.php -> Các từ trong sunshine sử dung ngôn ngữ ENGLISH
│   │
│   └───vi
│           auth.php
│           pagination.php
│           passwords.php
│           validation.php
│           sunshine.php -> Các từ trong sunshine sử dung ngôn ngữ VIỆT

Nội dung file resources/lang/en/sunshine.php

<?php

return [

    'welcome' => "Welcome everybody to SUNSHINE's SHOP!",

];

Nội dung file resources/lang/vi/sunshine.php

<?php

return [

    'welcome' => "Chào mừng các bạn đến với cửa hàng SUNSHINE!",

];

Step 2: setting ngôn ngữ mặc định được sử dụng trong Laravel

Hiệu chỉnh file config/app.php

/*
|--------------------------------------------------------------------------
| Application Locale Configuration
|--------------------------------------------------------------------------
|
| The application locale determines the default locale that will be used
| by the translation service provider. You are free to set this value
| to any of the locales which will be supported by the application.
|
*/

'locale' => 'vi',

// Bổ sung thêm danh sách các ngôn ngữ
'locales' => ['vi', 'en'],

/*
|--------------------------------------------------------------------------
| Application Fallback Locale
|--------------------------------------------------------------------------
|
| The fallback locale determines the locale to use when the current one
| is not available. You may change the value to correspond to any of
| the language folders that are provided through your application.
|
*/

'fallback_locale' => 'en',

Sau khi hiệu chỉnh config, cần chạy câu lệnh sau để clear CONFIG CACHE của Laravel

php artisan config:cache

Step 3: thay thế các từ bằng hàm magic function của Laravel __('TenFileArray.Key')

Ví dụ: bổ sung thêm dòng chào mừng, áp dụng Đa ngôn ngữ trên trang Index của Frontend Hiệu chỉnh file resources/views/frontend/index.blade.php

{{-- View này sẽ kế thừa giao diện từ `frontend.layouts.master` --}}
@extends('frontend.layouts.master')

{{-- Thay thế nội dung vào Placeholder `title` của view `frontend.layouts.master` --}}
@section('title')
Shop Hoa tươi - Sunshine
@endsection

{{-- Thay thế nội dung vào Placeholder `custom-css` của view `frontend.layouts.master` --}}
@section('custom-css')
@endsection

{{-- Thay thế nội dung vào Placeholder `main-content` của view `frontend.layouts.master` --}}
@section('main-content')
<div class="container text-center">
    <h1>{{ __('sunshine.welcome') }}</h1>
</div>

<!-- Slider -->
@include('frontend.widgets.homepage-slider')
<!-- Banner -->
@include('frontend.widgets.homepage-banner', [$data = $ds_top3_newest_loaisanpham])
<!-- Product -->
@include('frontend.widgets.product-list', [$data = $danhsachsanpham])
@endsection

{{-- Thay thế nội dung vào Placeholder `custom-scripts` của view `frontend.layouts.master` --}}
@section('custom-scripts')
@endsection

Step 4: Tạo middleware quản lý việc thay đổi ngôn ngữ

• Chạy câu lệnh

php artisan make:middleware Locale

• Nội dung file app/Http/Middleware/Locale.php

<?php

namespace App\Http\Middleware;

use Closure;
use App;
use Config;
use Session;

class Locale
{
    /**
     * Handle an incoming request.
     *
     * @param  IlluminateHttpRequest  $request
     * @param  Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        $raw_locale = Session::get('locale');
        if (in_array($raw_locale, Config::get('app.locales'))) {
            $locale = $raw_locale;
        } else $locale = Config::get('app.locale');
        App::setLocale($locale);
        return $next($request);
    }
}

• Khai báo sử dụng Middleware Localecho toàn chương trình
• Hiệu chỉnh file app/Http/Kernel.php

<?php

namespace App\Http;

use Illuminate\Foundation\Http\Kernel as HttpKernel;

class Kernel extends HttpKernel
{
    ...

    /**
     * The application's route middleware groups.
     *
     * @var array
     */
    protected $middlewareGroups = [
        'web' => [
            \App\Http\Middleware\EncryptCookies::class,
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
            \Illuminate\Session\Middleware\StartSession::class,
            // \Illuminate\Session\Middleware\AuthenticateSession::class,
            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
            \App\Http\Middleware\VerifyCsrfToken::class,
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
            \App\Http\Middleware\Locale::class,
        ],

        'api' => [
            'throttle:60,1',
            'bindings',
        ],
    ];

    ...
}

Step 5: Tạo route cho phép chuyển đổi ngôn ngữ

• Hiệu chỉnh file routes/web.php

Route::get('setLocale/{locale}', function ($locale) {
    if (in_array($locale, Config::get('app.locales'))) {
      Session::put('locale', $locale);
    }
    return redirect()->back();
})->name('app.setLocale');

Step 6: Hiệu chỉnh giao diện cho phép Người dùng tự chuyển đổi ngôn ngữ

• Hiệu chỉnh file resources\views\frontend\layouts\partials\header.blade.php

<header class="header-v4">
    <!-- Header desktop -->
    <div class="container-menu-desktop">
        <!-- Topbar -->
        <div class="top-bar">
            <div class="content-topbar flex-sb-m h-full container">
                <div class="left-top-bar">
                    Free shipping for standard order over $100
                </div>

                <div class="right-top-bar flex-w h-full">
                    <a href="#" class="flex-c-m trans-04 p-lr-25">
                        Help & FAQs
                    </a>

                    <a href="#" class="flex-c-m trans-04 p-lr-25">
                        My Account
                    </a>

                    <a href="{{ route('app.setLocale', ['locale' => 'en']) }}" class="flex-c-m trans-04 p-lr-25">
                        EN
                    </a>

                    <a href="{{ route('app.setLocale', ['locale' => 'vi']) }}" class="flex-c-m trans-04 p-lr-25">
                        VI
                    </a>

                    <a href="#" class="flex-c-m trans-04 p-lr-25">
                        USD
                    </a>
                </div>
            </div>
        </div>

        ...
</header>

Step 7: Kiểm tra

Chạy URL để kiểm tra: http://sunshine.local/