Cách tạo website đa ngôn ngữ trong laravel 10
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.
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.