Language Switching in Laravel: A Step-by-Step Guide to Multilingual Websites

RachidMA — Sun, 18 Jun 2023 16:08:56 +0000

Hi, developers. 🙋‍♂️

Today we will learn how to Easily Implement Language Switching and Translation in Your Laravel Project. Let's get started!

Why is it important to implement language switching and translation in a Laravel project?🕵️‍♂️

Creating a website that supports multiple languages is crucial for connecting with a diverse audience. In this guide, we will walk through the process of implementing switching and translation in a Laravel project. By following these step-by-step instructions, you'll be able to create a user-friendly language switcher and easily translate your website's content.

Step 1: Set Up Your Laravel Project.

To begin, create a new Laravel project using the Laravel Composer. This will serve as the foundation for implementing the language switching and translation functionality.

composer create-project laravel/laravel LaravelLingo

Note: Make sure you run your php install

Step 2: Add Language Switch Form
Create a language switch form component that allows users to select their preferred language. This component can be included in your views using Blade templating. The form should include options for each language you want to support.

Under resources/views directory, create a folder components
create a file name it language-switch.blade.php under components directory.
Create a switcher form, the form should look like this:

language-switch.blade.php

The form's value will contain the language picked by the user and will be submitted to language.switch route

Note: Today we will use onchange="this.form.submit()" inside the form just for demonstration, you are free to use other methods to submit the form with the picked language

Laravel provides built-in localization features that allow you to easily manage language files and translations. Make sure localization is enabled in your Laravel application by checking the config/app.php file. The locale option should be set to the default language (English in your case) and the fallback_locale option should also be set, as showing bellow.

Step 3: Include your language switcher in your welcome.blade.
Inside your welcome.blade, include the component language-switcher or depends on where you want to implement it.

welcome.blade.php

Now, lets display a simple message when user switch the language. for example

'Welcome to the home page!'

-Add html tags to display the message above or under the switch container, for example

in the welcome page above will have two messages, a message will show the language picked using the switch and the translation of the message to different languages, Today we will use French and Arabic.

So to be able to fetch the translation of the message displayed we will have to follow some more steps:

HOW IT WORKS?

Step 4: Create Language Route

Step 5: Create language Controller

run php artisan make:controller LanguageController

LanguageController.php

The code above will store the language in the session and return a variable language_switched which will be used later in the welcome.blade

Step 5: Create A Middleware
The middleware will fetch to new picked language from session and set the local to the new language

php artisan make:middleware LanguageMiddleware

LanguageMiddleware.php

as mentioned above, the middleware will setLocale to the new language fetched from the session.

Note:If you want to check if local language is correctly set, use laravel log by adding a line code.



Log::info("Locale set to: " . $language . " (Selected language: " . $language . ")");

Go to storage/logs/laravel.log file to check, you should see results below every time we switch language.

Step 6: Register Middleware.

Now we need to register the middleware, go to Http/Kernel.php and place your middleware as below:

Step 5: Translate The Text
The fun part, let's translate the welcome message, do you remember it?
'Welcome to the home page!'

Create two subdirectories under resources/lang folder one for French language(fr) and one for Arabic(ar)
Your directory should look like this:

Inside each directory, create a file called messages.php

-French:
resources/lang/fr/messages.php

-Arabic:

Each messages file should contain the translation of the message you need to translate and give a name so we can call it later from welcome.blade.php file

Step 7: Lets test it.
To access the translation of each text you want to display based on the language picked, laravel has a helper(__)double underscore followed by the name of the text, here we are using what so called 'welcome'.



<div class="text-message">
     <p>{{__('messages.welcome')}}</p>
</div>

Since laravel local is set to en for English by default, the message will be

Output:

Switch to French:

Switch to Arabic:

Conclusion:

Congratulations!👏🏻👏🏻👍🏻

You have successfully implemented language switching and translation in your Laravel project. By following these steps, you can provide a localized experience to your users.

Forem: RachidMA

Language Switching in Laravel: A Step-by-Step Guide to Multilingual Websites

Hi, developers. 🙋‍♂️