Localisation en Laravel : Créer un site multilingue étape par étape avec des exemples - Letecode
Suivez nous
Laravel

Localisation en Laravel : Créer un site multilingue étape par étape avec des exemples

Dans ce tutoriel, vous apprendrez avec exemple comment effectuer une localisation Laravel et présenter votre application en plusieurs langues.

Jean Claude Mbiya
Jean Claude Mise à jour : 20 décembre 2022 2866
Si vous êtes à la recherche d'un bon tutoriel pour gérer plusieurs langues sur votre site web, les pluriels et autre, vous êtes au bon endroit.

Vous apprendrez à travailler avec des fichiers de traduction, à effectuer une pluralisation, à créer un sélecteur de langue, et plus encore avec la localisation laravel et des exemples multilingues.

C'est quoi la localisation ?

Non, je ne parle pas ici de la geolocalisation 😒,  La localisation est la deuxième phase du processus d'internationalisation de Laravel (i18n). Dans Laravel i18n, une application est conçue pour s'adapter à différentes langues et cultures. La localisation consiste à adapter lesdites applications internationalisées à une langue spécifique par le biais de la traduction.

Prérequis

  • Nous utiliserons Laravel version 9.x dans ce tutoriel.
  • Ce tutoriel a été créé en partant du principe que vous avez les connaissances nécessaires du langage de programmation PHP et du framework Laravel.
  • Votre domaine est localhost. Si ce n'est pas le cas, remplacez le localhost par votre nom de domaine ou votre adresse IP (selon votre installation).

Créer une application Laravel 

Maintenant créons notre projet en tapant la commande suivante en plaçant le terminal dans votre repertoire de travail (ex. www ou htdocs):
laravel new localisation

Via composer

Une autre alternative est de créer un projet en utilisant la commande composer.

composer create-project laravel/laravel localisation
Ceci créera un dossier blog/ dans votre repertoire www ou htdocs, contenant une application initiale de Laravel.

Travailler avec des fichiers de traduction

Ainsi, dans Laravel, comme dans de nombreux autres frameworks, vous stockerez les traductions pour différentes langues dans des fichiers séparés. Il existe deux manières d'organiser les fichiers de traduction Laravel :

  • Une ancienne approche qui consiste à stocker vos fichiers sous le chemin suivant : resources/lang/{en,fr,ru}/{myfile.php}. (8.x)
  • Une nouvelle approche d'avoir des fichiers /lang/{fr.json, en.json} et aussi /lang/{en,fr}/{myfile.php}. 
Pour les langues qui diffèrent selon le territoire, vous devez nommer les répertoires/fichiers de langue conformément à la norme ISO 15897. Par exemple, pour l'anglais britannique, vous utiliserez en_GB plutôt que en-gb. Dans cet article, nous nous concentrerons sur la deuxième approche, mais il en va de même pour la première (à l'exception de la manière dont les clés de traduction sont nommées et récupérées). De plus, nous utiliserons le fichier welcome.blade.php par défaut comme terrain de jeu.

Traductions simples

Passons maintenant au fichier resources/views/welcome.blade.php et remplaçons le contenu de la balise body par le nôtre, comme ceci :

<body class="antialiased">
        <div class="relative flex items-top justify-center min-h-screen bg-gray-100  sm:items-center py-4 sm:pt-0">
            <div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
                <div class="flex justify-center pt-8 sm:justify-start sm:pt-0">
                    <h1>Welcome to our website</h1>
                </div>
            </div>
        </div>
</body>

Nous allons commencer par préparer notre message de bienvenue pour la localisation, ce qui est vraiment facile à Laravel. Il suffit de remplacer le texte « Welcome to our website » par le code suivant : {{ __('Welcome to our website') }}. Cela demandera à Laravel d'afficher par défaut "Welcome to our website" et de rechercher les traductions de cette chaîne si une langue autre que l'anglais est définie (nous y reviendrons plus tard). L'anglais sera défini comme langue par défaut de notre application, donc par défaut, nous afficherons simplement le texte "Welcome to our website". Si les paramètres régionaux sont différents, nous essaierons de rechercher la traduction correspondante qui sera créée dans un instant.

Langues en Laravel

Mais comment Laravel sait-il quelle est la langue actuelle ou quelles langues sont disponibles dans l'application ? Pour ce faire, il examine la configuration des paramètres régionaux dans l'application config/app.php. Ouvrez ce fichier et recherchez ces deux clés de tableau :

    /*
    |--------------------------------------------------------------------------
    | Application Locale Configuration
    |--------------------------------------------------------------------------
    |
    | The application locale determines the default locale that will be used
    | by the translation service provider. You are free to set this value
    | to any of the locales which will be supported by the application.
    |
    */

    'locale' => 'en',

    /*
    |--------------------------------------------------------------------------
    | Application Fallback Locale
    |--------------------------------------------------------------------------
    |
    | The fallback locale determines the locale to use when the current one
    | is not available. You may change the value to correspond to any of
    | the language folders that are provided through your application.
    |
    */

    'fallback_locale' => 'en',

Les descriptions présentées au-dessus des clés devraient être explicites, mais en bref, la clé locale contient les paramètres régionaux par défaut de votre application (au moins, si aucun autre paramètre régional n'a été défini dans le code). C'est le fallback_locale qui est activé dans le cas où nous définissons une locale inexistante dans notre application.

Pendant que nous avons ce fichier ouvert, ajoutons une nouvelle clé ici pour notre commodité plus tard en listant tous les paramètres régionaux que notre application va prendre en charge. Nous l'utiliserons plus tard lors de l'ajout d'un sélecteur de paramètres régionaux. Cependant, il s'agit d'une tâche facultative car Laravel ne nous oblige pas à le faire.

/*
|--------------------------------------------------------------------------
| Available locales
|--------------------------------------------------------------------------
|
| List all locales that your application works with
|
*/

'available_locales' => [
  'English' => 'en',
  'French' => 'fr',
  'Lingala' => 'lg',
],

Super! Notre application prend désormais en charge trois langues : anglais, français et le lingala.

Fichiers de traduction

Maintenant que nous avons établi tous les paramètres régionaux avec lesquels nous allons travailler, nous pouvons continuer et passer à la traduction de notre message de bienvenue par défaut.

Commençons par ajouter de nouveaux fichiers de localisation dans le dossier lang. Commencez par créer un fichier lang/lg.json et ajoutez les traductions correspondantes, comme suit :

{
  "Welcome to our website": "Boyeyi malamu na site na biso"
}

Créez ensuite un fichier /lang/fr.json :
{
  "Welcome to our website": "Bienvenue sur notre site"
}


Comme vous pouvez le voir, nous faisons toujours référence au message par défaut que nous avons ajouté dans le fichier welcome.blade.php (qui était {{ __('Welcome to our website') }}). La raison pour laquelle nous n'avons pas besoin de créer un fichier en.json est que Laravel sait déjà que les messages que nous transmettons par défaut à la  fonction __() sont pour nos paramètres régionaux par défaut, qui sont en anglais (en) (comme expliqué dans la section ci-dessus).

Changer de Langue dans Laravel

À ce stade, Laravel ne sait pas comment changer de paramètres régionaux, alors effectuons les traductions directement à l'intérieur de la route pour l'instant. Modifiez la route d'accueil par défaut comme indiqué ci-dessous :

Route::get('/{lang?}', function ($lang = null) {

    if (isset($lang) && in_array($lang, config('app.available_locales'))) {
        app()->setLocale($lang);
    }

    return view('welcome');
});

Nous pouvons maintenant visiter notre site Web, en spécifiant l'une des langues disponibles comme premier segment d'itinéraire : par exemple, localhost:8000/fr ou localhost:8000/lg. Vous devriez voir le contenu localisé. Dans le cas où vous spécifiez des paramètres régionaux non pris en charge ou ne spécifiez aucun paramètre régional, Laravel utilisera en par défaut.

Middleware

Passer les paramètres régionaux pour chaque lien de site peut ne pas être ce que vous voulez et peut sembler moins propre esthétiquement. C'est pourquoi nous allons effectuer la configuration de la langue via un sélecteur de langue spécial et utiliser la session utilisateur pour afficher le contenu traduit. Par conséquent, créez un nouveau middleware dans le fichier app/Http/Middleware/Localization.php ou en exécutant php artisan make:middleware Localization.

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\App;

class Localization
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure(\Illuminate\Http\Request): (\Illuminate\Http\Response|\Illuminate\Http\RedirectResponse)  $next
     * @return \Illuminate\Http\Response|\Illuminate\Http\RedirectResponse
     */
    public function handle(Request $request, Closure $next)
    {
        if (session()->has('locale')) {
            App::setLocale(session('locale'));
        }

        return $next($request);
    }
}

Ce middleware demandera à Laravel d'utiliser les paramètres régionaux sélectionnés par l'utilisateur si cette sélection est présente dans la session.

Comme nous avons besoin que cette opération soit exécutée à chaque requête, nous devons également l'ajouter à la pile middleware par défaut app/http/Kernel.php pour le web group middleware :

/**
     * The application's route middleware groups.
     *
     * @var array<string, array<int, class-string|string>>
     */
    protected $middlewareGroups = [
        'web' => [
            \App\Http\Middleware\EncryptCookies::class,
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
            \Illuminate\Session\Middleware\StartSession::class,
            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
            \App\Http\Middleware\VerifyCsrfToken::class,
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
            \App\Http\Middleware\Localization :: class , /* <--- Ajouter ceci */
        ],

Modification des routes

Ensuite, nous devons ajouter une route pour changer de paramètres régionaux. Nous utilisons une route closure, mais vous pouvez utiliser exactement le même code dans votre contrôleur si vous le souhaitez :

Route::get('langue/{lang}', function ($lang) {
    app()->setLocale($lang);
    session()->put('locale', $lang);

    return redirect()->back();
});

N'oubliez pas non plus de supprimer le changement de paramètres régionaux précédemment ajouté dans notre route d'accueil par défaut :

Route::get('/', function () {
    return view('welcome');
});

Ceci étant fait, le seul moyen pour l'utilisateur de changer la langue actuellement définie est d'entrer localhost/langue/{lang}. La locale sélection sera stockée dans la session et redirigera les utilisateurs vers leur lieu d'origine (vérifiez le middleware Localization). Pour le tester, rendez-vous sur localhost/langue/lg (tant que votre cookie de session est présent dans votre navigateur), et vous verrez le contenu traduit. Vous pouvez vous déplacer librement sur le site Web ou essayer de rafraîchir la page et voir que la langue sélectionnée est préservée.

Créer un switch

Nous devons maintenant créer quelque chose sur lequel l'utilisateur peut cliquer pour changer la langue au lieu d'entrer manuellement les codes régionaux dans l'URL. Pour ce faire, nous allons ajouter un contrôle de langue très simple. Par conséquent, créez un nouveau fichier resources/views/components/language_switcher.blade.php  avec le code suivant :

<div class="flex justify-center pt-8 sm:justify-start sm:pt-0">
    @foreach($available_locales as $locale_name => $available_locale)
        @if($available_locale === $current_locale)
            <span class="ml-2 mr-2 text-gray-700">{{ $locale_name }}</span>
        @else
            <a class="ml-1 underline ml-2 mr-2" href="langue/{{ $available_locale }}">
                <span>{{ $locale_name }}</span>
            </a>
        @endif
    @endforeach
</div>

Incluez le sélecteur nouvellement créé dans la vue « welcome » :

<body class="antialiased">
        <div class="relative flex items-top justify-center min-h-screen bg-gray-100  sm:items-center py-4 sm:pt-0">
            <div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
                @include('components.language_switcher')
                <div class="flex justify-center pt-8 sm:justify-start sm:pt-0">
                    <h1>{{ __('Welcome to our website') }}</h1>
                </div>
            </div>
        </div>
</body>

Ouvrez le fichier app/Providers/AppServiceProvider.php et ajoutez le code à partager lors de la composition de notre sélecteur de langue. Plus précisément, nous partagerons les paramètres régionaux actuels accessibles en tant que {{ $current_locale }}.

/**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        view()->composer('components.language_switcher', function ($view) {
            $view->with('current_locale', app()->getLocale());
            $view->with('available_locales', config('app.available_locales'));
        });
    }

Options de traduction avancées en PHP Laravel

Nous travaillerons principalement avec resources/views/welcome.blade.php, donc tout doit se passer dans notre vue de bienvenue, sauf indication contraire.

Paramètres dans les chaînes de traduction

Par exemple, saluons notre utilisateur imaginaire (Amanda) au lieu d'afficher simplement un message générique :

{{ __('Welcome to our website, :Name', ['name' => 'meda']) }}

Veuillez noter que nous avons utilisé le nom avec une première lettre en minuscule, mais l'espace réservé avec une première lettre en majuscule. De cette façon, Laravel peut vous aider à mettre automatiquement en majuscule le mot réel. Cela se produira si l'espace réservé commence par une lettre majuscule, c'est-à-dire :Name produit « Meda » ou un mot entièrement en majuscule  :NAME, produit « MEDA ».

De plus, mettons à jour nos fichiers de traduction /lang/fr.json et resources/lang/lg.json , car pour le moment, nous ne verrons que la version anglaise partout car les clés de traduction ne correspondent pas aux traductions.

Français:
{
    "Welcome to our website": "Bienvenue sur notre site",
    "Welcome to our website, :Name": "Bienvenue sur notre site, :Name"
}


Lingala:

{
    "Welcome to our website": "Boyeyi malamu na site na biso",
    "Welcome to our website, :Name": "Boyeyi malamu na site na biso, :Name"
}

Bon travail!

Pluralisation

Pour voir la pluralisation en action, ajoutons un nouveau paragraphe de texte. Pour effectuer la pluralisation, vous devez utiliser la fonction trans_choice au lieu de __(), par exemple :

<h1>{{ __('Welcome to our website, :Name', ['name' => 'meda']) }}</h1>
<p>{{ trans_choice('There is one apple|There are many apples', 2) }}</p>

Comme vous pouvez le voir, les formes plurielles sont séparées par un |.

Maintenant, et si nous avions besoin de plus de formes plurielles ? C'est possible aussi :

{{ trans_choice('{0} There :form no apples|{1} There :form just :count apple|[2,19] There :form :count apples', 24) }}

Dans ce cas, nous autorisons les nombres 0, 1, de 2 à 19, et enfin à partir de 20. Bien entendu, vous pouvez ajouter autant de règles que nécessaire.

Ensuite, que se passe-t-il si nous voulons des espaces réservés dans nos formes plurielles ? Pas de problème avec ça non plus :

{{ trans_choice('{0} There :form no apples|{1} There :form just :count apple|[2,19] There :form :count apples', 24, ['form' => 'is']) }}

Nous pouvons également utiliser le nombre passé dans `trans_choice`, si nécessaire, en utilisant un placeholder spécial :count  :
{{ trans_choice('{0} There :form no apples|{1} There :form just :count apple|[2,19] There :form :count apples', 1, ['form' => 'is']) }}

Enfin, n'oubliez pas de mettre à jour vos fichiers de traduction avec toutes les modifications que nous avons apportées à la traduction de base.

Lingala:
{
    "Welcome to our website": "Boyeyi malamu na site na biso",
    "Welcome to our website, :Name": "Boyeyi malamu na site na biso, :Name",
    "{0} There :form no apples|{1} There :form just :count apple|[2,19] There :form :count apples": "{0} Mbuma ezali te|{1} Tozali na :form :count mbumba|[2,19] Toza na :form :count mbuma"
 }

Français:
{
    "Welcome to our website": "Bienvenue sur notre site",
    "Welcome to our website, :Name": "Bienvenue sur notre site, :Name",
    "{0} There :form no apples|{1} There :form just :count apple|[2,19] There :form :count apples": "{0} Il n'y a pas de pommes|{1} Il n'y :form :count pomme|[2,19] Il y :form :count pommes"
}

Travailler avec des dates localisées dans Laravel

Pour localiser les dates, nous tirerons parti de la puissance de Carbon, qui est livré avec Laravel par défaut. Jetez un œil à la documentation Carbone ; vous pouvez faire beaucoup de choses sympas avec. Par exemple, nous pourrions inventer nos propres paramètres régionaux avec des règles de localisation de la date et de l'heure .

Pour notre exemple simple, nous afficherons la date actuelle localisée pour la langue sélectionnée. Dans notre routes/web.php, mettons à jour la route de la page d'accueil et transmettons le message de la date localisé à notre vue d'accueil :

Route::get('/', function () {
    $today = \Carbon\Carbon::now()
        ->settings(
            [
                'locale' => app()->getLocale(),
            ]
        );

    // LL is macro placeholder for MMMM D, YYYY (you could write same as dddd, MMMM D, YYYY)
    $dateMessage = $today->isoFormat('dddd, LL');

    return view('welcome', [
        'date_message' => $dateMessage
    ]);
});

Mettons à jour resources/views/welcome.blade.php et ajoutons notre message de date, comme ceci :

 <h1>{{ __('Welcome to our website, :Name', ['name' => 'meda']) }}</h1>
<p>{{ trans_choice('{0} There :form no apples|{1} There :form just :count apple|[2,19] There :form :count apples', 1, ['form' => 'is']) }}</p>
<p>{{ $date_message }}</p>

Essayez de changer de langue sur la localhostpage d'accueil. Vous verrez que les dates sont désormais localisées, par exemple :

Laravel localisation

Conclusion

Dans cet article, nous avons vu comment démarrer avec la localisation de Laravel. Nous avons discuté de la manière d'effectuer des traductions, d'utiliser des espaces réservés, de tirer parti de la pluralisation et d'ajouter un sélecteur de langue. J'espère que vous avez trouvé cet article intéressant, utile et partageable ⭐️. Merci d'être passé aujourd'hui et à la prochaine !
 

vote
Laisser un commentaire
Jean Claude Mbiya
Jean Claude Mbiya

Développeur Web full stack, Développeur Android (Certifié Google AAD) Formateur dans les domaines du numérique, Créateur letecode.com 👨‍💻. Je suis un grand passionné des nouvelles technologies et j'adore partager ce que j'apprend.

Voir plus

L'intelligence artificielle pour les débutants en 2023

Intelligence Artificielle

Un guide en 5 étapes pour configurer Google Analytics

Web

0 commentaire(s)

Laissez votre commentaire à @johnmbiya

ou pour laisser un commentaire
Suivez nous
Posts similaires

Tutoriel Laravel 8 et Jetstream

26 mai 2021 Laravel
Community
Catégories
Laravel Les Trucs et Astuces Microsoft Web Tutoriels Android JavaScript PHP Apple Android Security HTML CSS Google Git & GitHub Database NodeJS Jetpack Compose