DEV Community

Hilmi Hidayat
Hilmi Hidayat

Posted on • Originally published at divisidev.com on

Membuat Website Multi Bahasa atau Multi Language dengan Laravel Localization

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

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',
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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);
    }
}
Enter fullscreen mode Exit fullscreen mode

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,
Enter fullscreen mode Exit fullscreen mode

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,
    ],
];
Enter fullscreen mode Exit fullscreen mode

Step 5: Setup Translation

laravel lang

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',
];
Enter fullscreen mode Exit fullscreen mode

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',
];
Enter fullscreen mode Exit fullscreen mode

Kemudian, kita buat versi Bahasa Indonesia dengan membuka file yang terletak di lang/id/navbar.php dan tambahkan kode seperti di atas.

Testing

laravel multiple language

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)