Laravel Translation Loader - Halo Dev 👋, pada kesempatan kali ini, saya akan membagikan artikel seputar tutorial membuat website multiple language atau multi bahasa di Laravel. Sebelumnya, saya juga sudah membagikan artikel dengan topik serupa, namun kali ini saya akan membagikannya dengan cara yang sedikit berbeda yaitu dengan menyimpan teks terjemahannya di database.
Baca Juga: Membuat Website Multi Bahasa atau Multi Language dengan Laravel Localization
Let's Start
Oke. sebelum lanjut ke koding, saya hanya ingin memberi tahu bahwa di artikel ini saya akan mencoba menggunakan laravel 10 dengan PHP versi 8.2.4. Selain itu, di artikel ini saya juga akan menggunakan laravel translation loader package dari Spatie untuk menyimpan dan menampilkan text terjemahannya.
Step 1: Install Laravel
Baiklah, kita mulai tutorial ini dengan menginstall fresh laravel project terlebih dahulu dengan menjalankan perintah seperti ini bawah ini untuk menginstall laravel menggunakan laravel installer.
laravel new laravel-translation-loader
Step 2: Setup View
Selanjutnya, mari kita buat viewnya. Disini saya sengaja mengganti semua kode yang ada di file welcome.blade.php yang secara default menggunakan tailwind, saya ganti dengan component bootstrap seperti di bawah ini.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Laravel Translation Loader
</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container">
<a class="navbar-brand" href="#">
{{ config('app.name') }}
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tentang Kami</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Layanan</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Agenda</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Hubungi Kami</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
ID
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">English</a></li>
<li><a class="dropdown-item" href="#">Bahasa</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="text-center mt-5">
Welcome to Divisidev
</h1>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
Disini saya sudah siapkan navigasi dan welcome message yang nantinya text-text yang ada di file ini akan dinamis atau mengikuti bahasa yang aktif.
Step 3: Install Laravel Translation Loader Package
Next, kita lanjutkan dengan menginstall laravel translation loader package dari Spatie via composer.
composer require spatie/laravel-translation-loader
Kemudian kita tambahkan Translation Service Provider ke file config/app.php.
Spatie\TranslationLoader\TranslationServiceProvider::class,
Selanjutnya kita mempublish dan menjalankan migration untuk membuat table language_lines. Silakan jalankan perintah-perintah di bawah ini secara berurutan.
php artisan vendor:publish --provider="Spatie\TranslationLoader\TranslationServiceProvider" --tag="migrations"
php artisan migrate
Kemudian, untuk step berikut ini siftanya opsional saja.. Kita bisa mempublish file config menggunakan perintah vendor:publish seperti di bawah ini.
php artisan vendor:publish --provider="Spatie\TranslationLoader\TranslationServiceProvider" --tag="config"
Step 4: Seed
Seperti yang saya sebutkan diawal bait artikel ini, bahwa kita akan menyimpan teks-teks terjemahan di dalam database. Nah, untuk menambahkan teks terjemahan ke database, kita bisa menggunakan kode seperti di bawah ini. Pada contoh ini, saya akan menambahkan teks terjemahan ke model LanguageLine menggunakan seeder.
<?php
namespace Database\Seeders;
use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;
use Spatie\TranslationLoader\LanguageLine;
class LanguageLineSeeder extends Seeder
{
public function run(): void
{
LanguageLine::create([
'group' => 'messages',
'key' => 'welcome',
'text' => [
'en' => 'Welcome to our application',
'id' => 'Selamat datang di aplikasi kami',
],
]);
}
}
Kalian bisa menggunakan kode create data seperti di atas pada function translation management kalian. Karena pada artikel ini saya mencoba menambahkan teks terjemahannya menggunakan seeder, maka selanjutnya saya perlu menjalankan seeder tersebut dengan perintah db:seed seperti di bawah ini.
php artisan db:seed --class="LanguageLineSeeder"
Step 5: Language Switcher
Selanjutnya, buat route baru yang mana pada route ini kita akan terapkan juga logic untuk mengubah bahasa pada aplikasi kita. Dari contoh route di bawah ini, 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.
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');
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.
php artisan make:middleware Localization
Buka file App/Http/Middleware/Localization.php, kemudian sesuaikan kode yang ada dengan kode seperti di bawah ini.
<?php
namespace App\Http\Middleware;
use Closure;
use Illuminate\Http\Request;
use Symfony\Component\HttpFoundation\Response;
class Localization
{
/**
* Handle an incoming request.
*
* @param \Closure(\Illuminate\Http\Request): (\Symfony\Component\HttpFoundation\Response) $next
*/
public function handle(Request $request, Closure $next): Response
{
if (session()->has('locale')) {
app()->setLocale(session()->get('locale'));
}
return $next($request);
}
}
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 6: Update View
Okey, berikutnya kita perlu mengubah kode untuk language switcher menjadi seperti di bawah ini bahasa yang aktif bisa dinamis dan language switchernya bisa berjalan.
<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>
Kemudian ubah semua teks yang ingin diterjemahkan menjadi seperti di bawah ini atau dengan menggunakan function trans('group'.'key').
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="text-center mt-5">
{{ trans('messages.welcome') }}
</h1>
</div>
</div>
</div>
Testing
Oke, setelah melalui langkah-langkah di atas, sekarang kita bisa masuk ke tahap testing. Kita akan mencoba, apakah fitur switch bahasa sudah bisa berjalan dan teks-teks terjemahannya diambil dari database.
Silakan jalankan laravel project temen-temen, kemudian coba buka laravel project temen-temen pada browser, maka kurang lebih tampilannya akan seperti gambar di atas. Jika kita klik dropdown pilih bahasa dan mengubah bahasanya maka teks yang ditampilkan akan menyesuaikan sesuai dengan bahasa yang aktif saat ini.
Sekian artikel kali ini, sampai disini kita sudah belajar sedikit mengenai cara membuat website multiple bahasa dengan menyimpan teks-teks terjemahannya di database dengan menggunakan Laravel Translation Loader package dari Spatie. Selamat mencoba dan see you on the next articles guys 👋 👨💻
Credit: Online illustrations by Storyset
Top comments (0)