In this tutorial we will go over on how we can implement a multi-language website in Laravel using Laravel Localization and also create a simple language switcher to change the default language.
1. Create New Laravel Application
For this demonstration I am creating a new Laravel Application, you can ignore this step if you already have the Laravel application installed in your system.
Run the following command to create a new Laravel application.
composer create-project laravel/laravel laravel-localization-demoOnce you have the project ready, you can move on to the next step.
2. Configuring the Locale for All Http Requests
The default language for your Laravel’s application is stored in the config/app.php configuration file’s locale configuration option.
'locale' => 'en',
Laravel’s gives you the option to change the locale for a single Http Request by executing the setLocale method on App Facade App::setLocale($locale);, But what if once the language is changed you don’t want to worry about setting the Locale and this should be taken care by an automatic code logic.
Let’s create middleware which will pick the language set in the session and will set the locale for each and every http request.
php artisan make:middleware LanguageHere is the Language Middleware code
<?php
namespace App\Http\Middleware;
use Closure;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\App;
class Language
{
/**
* Handle an incoming request.
*
* @param \Illuminate\Http\Request $request
* @param \Closure $next
* @return mixed
*/ public function handle($request, Closure $next)
{
if (Session()->has('applocale') AND array_key_exists(Session()->get('applocale'), config('languages'))) {
App::setLocale(Session()->get('applocale'));
}
else { // This is optional as Laravel will automatically set the fallback language if there is none specified
App::setLocale(config('app.fallback_locale'));
}
return $next($request);
}
}
In this middleware we are checking if the session has applocale variable set and if the language belongs to the languages specified in the languages file. If yes we use the setLocale method to change the application language.
Next up, Add the middleware entry into the Kernel.php file
protected $middlewareGroups = [
'web' => [
\App\Http\Middleware\EncryptCookies::class,
\Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
\Illuminate\Session\Middleware\StartSession::class,
// \Illuminate\Session\Middleware\AuthenticateSession::class,
\Illuminate\View\Middleware\ShareErrorsFromSession::class,
\App\Http\Middleware\VerifyCsrfToken::class,
\Illuminate\Routing\Middleware\SubstituteBindings::class,
\App\Http\Middleware\Language::class,
],
As you can guess, our next step should be to create a languages config file where we can specify the list of languages supported by the application.
Create a new file named languages.php inside the config directory
<?php
return [
'en' => 'English',
'fr' => 'Français',
'es' => 'Spanish'
];
For this demonstration I have specified three languages in the configuration file.
3. Language Switcher Backend Code
In the previous step we created a Middleware which will change the application’s language depending upon the value set in the session. In this step we will work on the backend code which will set the language value in the application’s session.
Let’s create a simple controller method which accepts the language user wants to change and simply sets the language in the session.
Create new controller
php artisan make:controller LanguageController
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Config;
use Illuminate\Support\Facades\Session;
use Illuminate\Support\Facades\Redirect;
class LanguageController extends Controller
{
public function switchLang($lang)
{
if (array_key_exists($lang, Config::get('languages'))) {
Session::put('applocale', $lang);
}
return Redirect::back();
}
}
Let’s also add the corresponding route entry in the web.php file to hit the controller method
Route::get('lang/{lang}', ['as' => 'lang.switch', 'uses' => 'App\Http\Controllers\LanguageController@switchLang']);
Alright, since we have the backend code ready we can move on to the front end part wherein we will create the ability on frontend to switch languages.
4. Creating Language Switcher Front End
In this step we’ll be creating a simple language switcher, On the front end I will be using Bootstrap Framework.
Here are the steps to install the Bootstrap Framework with Auth scaffolding
//Add composer dependency for Laravel Pacakge
composer require laravel/ui
//Install Bootstrap with Auth scaffolding
php artisan ui bootstrap --auth
//npm commands
npm install
npm run dev
Once the Bootstrap is installed we can utilize the app layout file to create the language switcher.
Open the app.blade.php file located under resources > views > layouts and add the following snippted just after the login and register links in the navbar.
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{ Config::get('languages')[App::getLocale()] }}
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
@foreach (Config::get('languages') as $lang => $language)
@if ($lang != App::getLocale())
<a class="dropdown-item" href="{{ route('lang.switch', $lang) }}"> {{$language}}</a>
@endif
@endforeach
</div>
</li>
This will create a dropdown with the list of languages which the user can choose from and will also show the default language on the top.
5. Adding Flags to the Language Options
How about we add the visual cue in the form of a flag just next to the language in the dropdown. Here is what needs to be done in order to achieve that.
We will make use of the library flag-icon-css to display the country / language flag just next to the language.
Install flag-icon-css
npm install flag-icon-css
Once the package is installed, you can import the scss file by including the following lines in the app.scss file located in resources > scss folder
// Flag Icon CSS
@import '~flag-icon-css/sass/flag-icon';
Run npm run dev command again to compile the scss into css.
Now we can update the languages.php file located in the config directory to include the flag-icon code associated with each language.
<?php
return [
'en' => [
'display' => 'English',
'flag-icon' => 'us'
],
'fr' => [
'display' => 'Français',
'flag-icon' => 'fr'
],
'es' => [
'display' => 'Spanish',
'flag-icon' => 'es'
],
];
Let’s modify the code located in app.blade.php file to include the flag-icon as well.
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="flag-icon flag-icon-{{Config::get('languages')[App::getLocale()]['flag-icon']}}"></span> {{ Config::get('languages')[App::getLocale()]['display'] }}
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
@foreach (Config::get('languages') as $lang => $language)
@if ($lang != App::getLocale())
<a class="dropdown-item" href="{{ route('lang.switch', $lang) }}"><span class="flag-icon flag-icon-{{$language['flag-icon']}}"></span> {{$language['display']}}</a>
@endif
@endforeach
</div>
</li>
6. Test Localization
Let’s create a sample localization language files as well as a sample page to test if all the pieces of our code works well and if we are able to achieve switching the language.
Add a new following controller method to HomeController
public function languageDemo(){
return view('languageDemo');
}Add the corresponding route file
Route::get('/languageDemo', 'App\Http\Controllers\HomeController@languageDemo');Create a new blade file named languageDemo.blade.php inside app > resources > views directory with following content
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<h3>{{__('messages.welcome')}}</h3>
</div>
</div>
@endsection
We are almost there, notice the echo statement in the above blade file. Let’s create language translations file for each of the specified language.
Go to resources > lang directory and create messages.php file for each of the languages in their directory
messages.php inside en directory
<?php
return [
'welcome' => 'Welcome to our application!',
];
messages.php file inside es directory
<?php
return [
'welcome' => '¡Bienvenido a nuestra aplicación!',
];
messages.php file inside fr directory
<?php
return [
'welcome' => 'Bienvenue sur notre application!',
];
There you go open /languageDemo page and you should be able to see the translations switching as you change the language from the top navbar.