Cách tạo website đa ngôn ngữ trong laravel 10

website đa ngôn ngữ với laravel 10
Đánh giá bài viết

Khi thế giới ngày càng xích lại gần nhau thì việc thiết kết website hay ứng dụng đa ngôn ngữ là điều chắc chặn bạn sẽ gặp phải.

Nghe từ đa ngôn ngữ có vẻ đao to búa lớn là vậy nhưng thực sự nó vô cùng đơn giản. Và để chứng minh cho điều đó hanhtinhcongnghe.com sẽ hướng dẫn cách tạo đa ngôn ngữ trong laravel một cách nhanh chóng và dễ dàng mà ai cũng có thể làm được.

Cách tạo website đa ngôn ngữ bằng laravel 10
Cách tạo website đa ngôn ngữ bằng laravel 10

Tạo thư mục chứa file đa ngôn ngữ

Chúng ta sẽ lưu trứ các gói ngôn ngữ ở dạng file json và thông qua các file json này chúng ta có thể dễ dàng biên dịch cho từng ngôn ngữ riêng mà không làm ảnh hưởng đến các ngôn ngữ còn lại.

Trong thư mục resources chúng ta tạo thư mục mới và đặt tên cho nó là lang với cấu trúc như dưới đây.

/resources
    /lang
        en.json
        vi.json
        tw.json

Như bạn thấy thì tôi tạo tất cả 3 files json trong đó mỗi file tương ứng với từng ngôn ngữ lần lượt là Tiếng Anh, Tiếng Việt và Tiếng Trung (Đài Loan).

Và trong các file json bạn sẽ bỏ nội dung tương tự như dưới đây

File json cho tiếng Anh

{
    "english": "English",
    "vietnamese": "Vietnamese",
    "taiwanese": "Taiwanese",
    "Sign in": "Sign in",
    "Sign out": "Sign out",
    "Email address": "Email address",
    "Password": "Password"
}

File json cho tiếng Việt

{
    "english": "Tiếng Anh",
    "vietnamese": "Tiếng Việt",
    "taiwanese": "Tiếng Trung",
    "Sign in": "Đăng nhập",
    "Sign out": "Đăng xuât",
    "Email address": "Địa chỉ email",
    "Password": "Mật khẩu"
}

Bạn làm tương tự với các file còn lại với phần bên trái là biến còn bên phải là ngôn ngữ sẽ hiển thị ra web của bạn.

Thiết lập ngôn ngữ mặc định cho đa ngôn ngữ trong laravel

Mặc định trong laravel người ta đã xây dựng ngôn ngữ mặc định là tiếng Anh, tuy nhiên bạn có thể cấu hình lại ngôn ngữ mặc định khi làm website đa ngôn ngữ bằng cách truy cập vào config/app và thay đổi nó.

    'locale' => 'en', //ngôn ngữ mặc định
    'fallback_locale' => 'en', // được sử dụng khi không tìm thấy config locale.

Bạn thay đổi thông tin ở hai hàng tương ứng trên cho phù hợp với yêu cầu thực tiễn của mình.

Lưu lựa chọn ngôn ngữ mỗi khi truy cập

Làm thế nào để ngôn ngữ mà bạn lựa chọn có thể luôn bật và hiển thị khi bạn truy cập vào bất cứ vị trí nào trên trang web thì chúng ta lại phải nhờ đến sự trợ giúp của session. Chúng ta sẽ lưu lựa chọn đó vào trong section thông qua controller trong laravel.

Bạn tạo một controller và đạt tên nó là LanguageController bằng cú pháp sau

php artisan make:controller LanguageController

Trong file LanguageController chúng ta sẽ thêm vào đó đọan code như bên dưới để lưu trữ lựa chọn của mình vào session

public function changeLanguage($language)
{
    \Session::put('website_language', $language);
    return redirect()->back();
}

Xử lý thay đổi ngôn ngữ cho website

Để thay đổi ngôn ngữ thì middleware là một phần quan trọng trong việc xử lý đa ngôn ngữ trong Laravel bởi vì nó cho phép bạn xác định và quản lý ngôn ngữ trong toàn bộ ứng dụng một cách hiệu quả, đồng thời cung cấp kiểm soát quyền truy cập và phản hồi ngôn ngữ chính xác cho người dùng.

Vì vậy bạn cần tạo một file trong middleware và đặt tên nó là Locale.

php artisan make:middleware Locale

Trong nội dung middleware Locale mà bạn vừa tạo bạn thêm vào đoạn code sau

public function handle(Request $request, Closure $next): Response
{
    $language = \Session::get('website_language', config('app.locale'));
    // Lấy dữ liệu lưu trong Session, không có thì trả về default lấy trong config
    config(['app.locale' => $language]);
    // Chuyển ứng dụng sang ngôn ngữ được chọn
    return $next($request);
}

Tiếp tục bạn vào app/Http/Kernel.php để khai báo

protected $middlewareAliases = [
        //.....
        'locale' => \App\Http\Middleware\Locale::class,
];

Và cuối cùng để xử lý thay đổi ngôn ngữ thông qua middleware này bạn tạo route như dưới đây

Route::group(['middleware' => 'locale'], function() {
    Route::get('language-change/{language}', [LanguageController::class, 'changeLanguage'])->name('changeLanguage');
});

Hiển thị menu đa ngôn ngữ và lựa chọn ngôn ngữ trên website

Sau khi đã hoàn tất tất cả các bước trên thì lúc này bạn có thể tạo menu lựa chọn ngôn ngữ để thay đổi ngôn ngữ cho website đa ngôn ngữ của mình.

<div class="dropdown  nav-item countries">
    <a href="{!! route('changeLanguage', ['en']) !!}" class="d-flex  nav-item nav-link country-flag1" data-bs-toggle="dropdown" aria-expanded="false">
        <span class="avatar country-Flag me-0 align-self-center bg-transparent">
            @if(app()->getLocale() === 'en')  
            <img src="{{ asset('assets/img/flag-imgs/us_flag.png') }}" alt="img"  style="width:20px; height:20px">
            @elseif(app()->getLocale() === 'tw')  
            <img src="{{ asset('assets/img/flag-imgs/taiwan_flag.png') }}" alt="img"  style="width:20px; height:20px">
            @elseif(app()->getLocale() === 'vi')  
            <img src="{{ asset('assets/img/flag-imgs/vietnam_flag.png') }}" alt="img"  style="width:20px; height:20px">
            @endif
        </span>
    </a>
    <div class="dropdown-menu dropdown-menu-start  dropdown-menu-arrow">
        @if(app()->getLocale() !== 'en')  
            <a href="{!! route('changeLanguage', ['en']) !!}" class="dropdown-item d-flex">
                <span class="avatar me-1 align-self-center bg-transparent">
                    <img src="{{ asset('assets/img/flag-imgs/us_flag.png') }}" alt="img">
                </span>
                <div class="d-flex">
                    <span class="mt-2">{{ __('english') }}</span>
                </div>
            </a>
        @endif
        @if(app()->getLocale() !== 'tw')  
        <a href="{!! route('changeLanguage', ['tw']) !!}" class="dropdown-item d-flex">
            <span class="avatar me-1 align-self-center bg-transparent">
                <img src="{{ asset('assets/img/flag-imgs/taiwan_flag.png') }}" alt="img">
            </span>
            <div class="d-flex">
                <span class="mt-2">{{ __('taiwanese') }}</span>
            </div>
        </a>
        @endif
        @if(app()->getLocale() !== 'vi')  
        <a href="{!! route('changeLanguage', ['vi']) !!}" class="dropdown-item d-flex">
            <span class="avatar me-1 align-self-center bg-transparent">
                <img src="{{ asset('assets/img/flag-imgs/vietnam_flag.png') }}" alt="img">
            </span>
            <div class="d-flex">
                <span class="mt-2">{{ __('vietnamese') }}</span>
            </div>
        </a>
        @endif
    </div>
</div>

Với đoạn code trên thì mỗi lần bạn thay đổi ngôn ngữ nó sẽ hiển thị lá cờ tương ứng với ngôn ngữ đã lựa chọn ra và ẩn đi lựa chọn ngôn ngữ mà bạn đang sử dụng.

Kết luận

Chỉ với từng đó bước đơn giản thôi đã giúp bạn dễ dàng tạo ra một website đa ngôn ngữ bằng laravel 10 một cách chuyên nghiệp và có thể tiếp cận đến nhiều đối tượng ngôn ngữ khác nhau.

Để lại bình luận

Email của bạn sẽ được bảo mật.