Laravel Localization - Laravel menyediakan fitur yang mempermudah kita dalam membuat suatu web atau sistem dengan multi bahasa, fitur tersebut adalah Localization. localization, menyediakan cara mudah untuk mengambil string dalam berbagai bahasa.
Laravel menyediakan dua cara untuk mengelola translation string. Pertama, translation string dapat disimpan dalam file di direktori lang. Dalam direktori tersebut, mungkin terdapat subdirektori untuk setiap bahasa yang ingin ditampilkan di sistem atau aplikasi kita. Cara yang pertama ini merupakan pendekatan yang digunakan Laravel untuk mengelola translation string untuk fitur bawaan Laravel seperti validation error message:
/lang
/en
messages.php
/id
messages.php
Cara yang kedua, translation string dapat didefinisikan di dalam file JSON yang ditempatkan di dalam direktori lang. Jika menggunakan cara ini, setiap bahasa yang akan digunakan dalam sistem atau aplikasi akan memiliki file JSON yang sesuai di dalam direktori ini. Cara kedua ini direkomendasikan untuk aplikasi yang memiliki banyak string yang dapat diterjemahkan.
/lang
en.json
id.json
Di artikel ini saya akan membahas bagaimana cara membuat aplikasi multiple language menggunakan fitur Laravel Localization.
Laravel Localization
Step 1: Install Laravel
//via Laravel Installer
composer global require laravel/installer
laravel new laravel-localization
//via Composer
composer create-project laravel/laravel laravel-localization
Oke, kita awali mulai dari install laravel. Ada beberapa cara untuk menginstall laravel, diantaranya menggunakan laravel install dan composer. Silakan temen-temen menginstall laravel project seperti contoh di atas.
Step 2: Setup Route
Route::get('locale/{locale}', function ($locale) {
if (! in_array($locale, ['en', 'id'])) {
abort(400);
}
app()->setLocale($locale);
session()->put('locale', $locale);
return redirect()->back();
})->name('locale');
Selanjutnya, buat route baru yang mana pada route ini kita akan terapkan juga logic untuk mengubah bahasa pada aplikasi kita. Dari contoh route di atas, kita perlu menambahkan parameter locale pada route ubah bahasa dan hanya menerima value en atau id. Kita dapat mengubah default language untuk single HTTP request saat runtime menggunakan method setLocale. Kemudian, value $locale yang dikirimkan akan kita simpan ke dalam session locale.
Default language tersimpan dalam opsi locale di config/app.php configuration file. Kita bebas mengubah value pada opsi locale ini sesuai dengan kebutuhan.
'fallback_locale' => 'en',
Kita juga dapat mengonfigurasi "fallback language", yang akan digunakan saat bahasa aktif tidak berisi string terjemahan tertentu. Seperti bahasa default, bahasa fallback juga dikonfigurasi dalam file konfigurasi config/app.php seperti contoh di atas.
Step 3: Setup View
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Laravel Multiple Language Example
</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg bg-light">
<div class="container">
<a class="navbar-brand" href="#">
Divisidev
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">
{{ __('navbar.home') }}
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
{{ __('navbar.about') }}
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
{{ __('navbar.contact') }}
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
{{ App::currentLocale() }}
</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="{{ route('locale', 'en') }}">
English
</a>
<li>
<a class="dropdown-item" href="{{ route('locale', 'id') }}">
Indonesia
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>
Berikutnya masuk ke file welcome.blade.php dan ganti kode yang ada menjadi seperti di atas. Di sini kita menambahkan opsi bahasa yaitu English dan Bahasa dalam bentuk dropdown. Perhatikan juga, disini kita juga menambahkan {{App::currentLocale()}} yang berfungsi untuk menampilkan bahasa atau locale yang aktif saat ini.
Step 4: Create Middleware
php artisan make:middleware Localization
<?php
namespace App\Http\Middleware;
use Closure;
use Illuminate\Http\Request;
class Localization
{
public function handle(Request $request, Closure $next)
{
if (session()->has('locale')) {
app()->setLocale(session()->get('locale'));
}
return $next($request);
}
}
Sekarang kita perlu membuat middleware untuk mengelola bahasa dinamis yang dipilih melalu dropdown ubah bahasa. Silahkan jalankan perintah php artisan make:middleware Localization untuk membuat file middleware dengan nama file Localization. Buka file App/Http/Middleware/Localization.php, kemudian sesuaikan kode yang ada dengan kode seperti di atas.
\App\Http\Middleware\Localization::class,
Jangan lupa untuk mendaftarkan middleware yang baru saja dibuat ke kernel.php atau lebih tepatnya di dalam protected $middlewareGroups. Sehingga sekarang middlewareGroups akan nampak seperti kode di bawah ini.
protected $middlewareGroups = [
'web' => [
....
....
....
\App\Http\Middleware\Localization::class,
],
'api' => [
// \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
'throttle:api',
\Illuminate\Routing\Middleware\SubstituteBindings::class,
],
];
Step 5: Setup Translation
Oke, selanjutnya kita perlu membuat folder lang baru dengan nama id untuk menyimpan file-file terjemahan Bahasa. Kemudian, buat file navbar.php pada kedua folder lang tersebut ( en & id ) seperti contoh gambar di atas.
en/navbar.php
<?php
return [
'home' => 'Home',
'about' => 'About Us',
'contact' => 'Contact Us',
];
Setelah kita membuat file navbar.php pada kedua folder lang, sekarang silakan buka file yang terletak di lang/en/navbar.php dan tambahkan kode seperti di atas. Jadi, di file ini merupakan teks terjemahan menu-menu yang ada di navbar dalam bahasa inggris.
id/navbar.php
<?php
return [
'home' => 'Beranda',
'about' => 'Tentang Kami',
'contact' => 'Hubungi Kami',
];
Kemudian, kita buat versi Bahasa Indonesia dengan membuka file yang terletak di lang/id/navbar.php dan tambahkan kode seperti di atas.
Testing
Wokey, setelah melalui berbagai tahap mulai dari membuat route lang switcher sampai dengan membuat file-file terjemahannya, sekarang kita bisa mencoba fitur laravel multiple language yang kita buat dengan laravel localization ini. Silakan jalankan laravel project teman-teman, lalu akses project pada browser. Pada language switcher (di navbar) silakan ubah ke bahasa lain, maka teks pada navbar juga akan berubah mengikuti settingan bahasa yang aktif.
Cukup sekian artikel tentang implementasi atau membuat website atau aplikasi multi bahasa menggunakan laravel localization ini, semoga apa yang telah saya sampaikan dalam bentuk tulisan di artikel ini dapat dengan mudah dipahami dan bisa membantu teman-teman. Di artikel berikutnya, saya akan share tentang cara membuat aplikasi laravel multi bahasa yang string-stringnya akan kita simpan ke dalam database. See you 👋
Credit: People illustrations by Storyset
Top comments (0)