Articoli

Guida dettagliata della localizzazione di Laravel, tutorial con esempi

Come eseguire la localizzazione di un progetto Laravel, come sviluppare un progetto in Laravel e renderlo fruibile in più lingue. In questo articoli vediamo come lavorare con i file di traduzione, creare un selettore di lingua e altro ancora con esempi.

Laravel è un’applicazione progettata per essere locale, per adattarsi a varie lingue e culture. La localizzazione adatta le applicazioni internazionalizzate a una lingua specifica attraverso la traduzione.

Prerequisiti

  • In questo articolo faremo riferimento a Laravel versione 8.x;
  • Per seguire correttamente questo tutorial, è necessario che tu abbia la conoscenza necessaria del linguaggio di programmazione PHP e del framework Laravel.
  • Il tuo dominio è localhost. In caso contrario, sostituire localhost con il proprio nome di dominio o indirizzo IP (a seconda dell’installazione).

Lavorare con i file di traduzione

In Laravel, proprio come in molti altri framework, possiamo memorizzare le traduzioni per lingue diverse in file separati. Esistono due modi per organizzare i file di traduzione di Laravel:

  • Un vecchio approccio che prevede l’archiviazione dei file nel seguente percorso: resources/lang/{en,fr,ru}/{myfile.php};
  • Un nuovo approccio che prevede l’archiviazione dei file nel seguente percorso: resources/lang/{fr.json, ru.json};

Per le lingue che differiscono in base al territorio, dovresti denominare le directory/file della lingua in base a ISO 15897. Ad esempio, per l’inglese britannico dovresti usare en_GB invece di en-gb. In questo articolo, ci concentreremo sul secondo approccio, ma lo stesso vale per il primo (ad eccezione del modo in cui le chiavi di traduzione vengono denominate e recuperate). 

Semplici traduzioni

Ora, andiamo al resources/views/welcome.blade.phpfile e sostituiamo il contenuto del bodytag con il nostro, in questo modo:

<body class="antialiased">
    <div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 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">
                Welcome to our website
            </div>
        </div>
    </div>
</body>

Inizieremo preparando il nostro messaggio di benvenuto per la localizzazione, che è davvero facile in Laravel. Tutto quello che devi fare è sostituire il testo “Benvenuto nel nostro sito web” con il seguente codice: {{ __('Welcome to our website') }}. Questo istruirà Laravel a visualizzare “Benvenuto nel nostro sito Web” per impostazione predefinita e cercare le traduzioni di questa stringa se è impostata una lingua diversa dall’inglese (ci arriveremo più avanti). L’inglese sarà impostato come lingua predefinita della nostra app, quindi per impostazione predefinita visualizzeremo semplicemente il testo “Benvenuto nel nostro sito Web”. Se il locale è diverso, proveremo a cercare la traduzione corrispondente che verrà creata in un attimo.

Localizzazione Laravel

Ma come fa Laravel a sapere qual è la lingua corrente o quali lingue sono disponibili nell’applicazione? Lo fa osservando la configurazione locale nell’app config/app.php. Apri questo file e cerca queste due chiavi della matrice associativa:

/*
|--------------------------------------------------------------------------
| 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',

Le descrizioni mostrate sopra le chiavi dovrebbero essere autoesplicative, ma in breve, la chiave locale contiene il locale predefinito della tua applicazione (almeno, se nessun altro locale è stato impostato nel codice). E il fallback_locale viene attivato nel caso in cui impostiamo un locale inesistente nella nostra applicazione.

Mentre abbiamo questo file aperto, aggiungiamo una nuova chiave per nostra comodità elencando tutte le impostazioni locali che la nostra applicazione supporterà. Lo useremo in seguito quando aggiungeremo uno switcher locale. Tuttavia, questo è un compito facoltativo in quanto Laravel non ci richiede di farlo.

/*
|--------------------------------------------------------------------------
| Available locales
|--------------------------------------------------------------------------
|
| List all locales that your application works with
|
*/
'available_locales' => [
  'English' => 'en',
  'Italian' => 'it',
  'French' => 'fr',
],

Ora la nostra applicazione supporta tre lingue: inglese, italiano e francese.

File di traduzione

Ora che abbiamo stabilito tutte le impostazioni locali con cui lavoreremo, possiamo andare avanti e passare alla traduzione del nostro messaggio di benvenuto predefinito.

Iniziamo aggiungendo nuovi file di localizzazione nella cartella resources/lang. Innanzitutto, crea un file resources/lang/it.json e aggiungi le traduzioni corrispondenti, come segue:

{
  "Welcome to our website": "Benvenuto nel nostro sito web"
}

Quindi, crea un file resources/lang/fr.json:

{

“Welcome to our website”: “Bienvenue sur notre site”

}

Come puoi vedere, facciamo sempre riferimento al messaggio predefinito che abbiamo aggiunto nel file welcome.blade.php (che era {{ __('Welcome to our website') }}). Il motivo per cui non dobbiamo creare un file en.json è perché Laravel sa già che i messaggi che passiamo per impostazione predefinita alla funzione __() sono per il nostro locale predefinito en.

Cambio locale in Laravel

A questo punto, Laravel non sa come cambiare locale, quindi per ora eseguiamo le traduzioni direttamente all’interno del percorso. Modifica il percorso di benvenuto predefinito come mostrato di seguito:

Route::get('/{locale?}', function ($locale = null) {
    if (isset($locale) && in_array($locale, config('app.available_locales'))) {
        app()->setLocale($locale);
    }
    
    return view('welcome');
});

Ora possiamo visitare il nostro sito Web, specificando una qualsiasi delle lingue disponibili come primo segmento di percorso: ad esempio, localhost/rulocalhost/fr. Dovresti vedere il contenuto localizzato. Nel caso in cui specifichi una locale non supportata o non specifichi affatto una locale, Laravel utilizzerà enper impostazione predefinita.

Middleware

Passare le impostazioni locali per ogni collegamento al sito potrebbe non essere ciò che desideri e potrebbe non sembrare così pulito esteticamente. Ecco perché eseguiremo l’impostazione della lingua tramite uno speciale selettore di lingua e utilizzeremo la sessione utente per visualizzare il contenuto tradotto. Pertanto, crea un nuovo middleware all’interno del app/Http/Middleware/Localization.phpfile o eseguendo artisan make:middleware Localization.

<?php

namespace App\Http\Middleware;

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

class Localization
{
    /**
    * Handle an incoming request.
    *
    * @param  \Illuminate\Http\Request  $request
    * @param  \Closure  $next
    * @return mixed
    */
    public function handle(Request $request, Closure $next)
    {
        if (Session::has('locale')) {
            App::setLocale(Session::get('locale'));
        }
        return $next($request);
    }
}

Questo middleware istruirà Laravel a utilizzare la locale selezionata dall’utente se questa selezione è presente nella sessione.

Poiché abbiamo bisogno che questa operazione venga eseguita su ogni richiesta, dobbiamo anche aggiungerla allo stack middleware predefinito in app/http/Kernel.phpper il webgruppo middleware:

* The application's route middleware groups.
*
* @var array
*/
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\Localization::class, /* <--- add this */
  ],

Cambiare rotta

Successivamente, dobbiamo aggiungere un percorso per cambiare le impostazioni locali. Stiamo usando un percorso di chiusura, ma puoi usare esattamente lo stesso codice all’interno del tuo controller se lo desideri:

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

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

Inoltre, non dimenticare di rimuovere la commutazione delle impostazioni locali precedentemente aggiunta nel nostro percorso di benvenuto predefinito:

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

Fatto ciò, l’unico modo per l’utente di cambiare la lingua attualmente impostata è inserendo localhost/language/{locale}. La localeselezione verrà memorizzata all’interno della sessione e reindirizzerà gli utenti da dove provenivano (controlla il Localizationmiddleware). Per provarlo, vai su localhost/language/ru(purché il tuo cookie di sessione sia presente nel tuo browser) e vedrai il contenuto tradotto. Puoi muoverti liberamente nel sito web o provare ad aggiornare la pagina e vedere che la lingua selezionata viene preservata.

Il commutatore

Ora dobbiamo creare qualcosa su cui l’utente possa fare clic per cambiare la lingua invece di inserire manualmente i codici locali nell’URL. Per fare ciò, aggiungeremo un controllo della lingua molto semplice. Pertanto, crea un nuovo resources/views/partials/language_switcher.blade.phpfile con il seguente codice:

<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="language/{{ $available_locale }}">
                <span>{{ $locale_name }}</span>
            </a>
        @endif
    @endforeach
</div>

Includi lo switcher appena creato nella vista “benvenuto”:

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

Apri il app/Providers/AppServiceProvider.phpfile e aggiungi il codice da condividere quando il nostro selettore di lingua sarà composto. Nello specifico, condivideremo le impostazioni locali correnti a cui è possibile accedere come file {{ $current_locale }}.

Newsletter sull’Innovazione
Non perderti le notizie più importanti sull'Innovazione. Iscriviti per riceverle via e-mail.

Opzioni di traduzione avanzate in PHP Laravel

Lavoreremo principalmente con resources/views/welcome.blade.php, quindi tutto deve avvenire nella nostra vista di benvenuto se non diversamente specificato.

Parametri nelle stringhe di traduzione

Ad esempio, salutiamo il nostro utente immaginario (Amanda) invece di visualizzare semplicemente un messaggio generico:

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

Tieni presente che abbiamo utilizzato il nome con la prima lettera minuscola, ma il segnaposto con la prima lettera maiuscola. In questo modo, Laravel può aiutarti a capitalizzare automaticamente la parola effettiva. Ciò si verificherà se il segnaposto inizia con una lettera maiuscola, ad esempio, :Nameproduce “Caroline” o una parola completamente maiuscola,  :NAME, produce “CAROLINE”.

Inoltre, aggiorniamo i nostri file di traduzione resources/lang/fr.jsonresources/lang/it.json , poiché al momento vedremo solo la versione inglese ovunque poiché le chiavi di traduzione non corrispondono alle traduzioni.

Francese:

{

   "Welcome to our website, :Name": "Bienvenue sur notre site, :Name"

}

Italiano:

{

   "Welcome to our website, :Name": "Benvenuto sul nostro sito web, :Name"

}

Pluralizzazione

Per vedere la pluralizzazione in azione, aggiungiamo un nuovo paragrafo di testo. 

Per eseguire la pluralizzazione, devi usare la funzione trans_choice invece di __(), ad esempio:

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

Come puoi vedere, le forme plurali sono separate da un |.

Ora, cosa succede se abbiamo bisogno di più forme plurali ? 

Anche questo è possibile:

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

In questo caso, consentiamo i numeri 01, e da 219, e infine da 20 in poi. Naturalmente, puoi aggiungere tutte le regole di cui hai bisogno.

Quindi, cosa succede se vogliamo i segnaposto nelle nostre forme plurali ? 

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

Possiamo anche utilizzare il conteggio passato in `trans_choice`, se necessario, utilizzando un segnaposto :count speciale:

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

Infine, non dimenticare di aggiornare i tuoi file di traduzione con tutte le modifiche apportate alla traduzione di base.

Italiano:

{
  "Welcome to our website, :Name": "Benvenuto nel nostro sito, :Name",
  "{0} There :form no apples|{1} There :form just :count apple|[2,19] There :form :count apples": "{0} Nessuna mela|{1} C'è:count mela|[2,19] Ci sono :count mele"
}

Francese:

{    
  "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"
}

Lavorare con date localizzate in Laravel

Per localizzare le date, sfrutteremo la potenza di Carbon , che viene fornito con Laravel per impostazione predefinita. Dai un’occhiata alla documentazione di Carbon ; puoi fare un sacco di cose interessanti. Ad esempio, possiamo impostare la nostra localizzazione con regole per la data e ora .

Per il nostro semplice esempio, mostreremo la data corrente localizzata per la lingua selezionata. Nel nostro routes/web.php, aggiorniamo il percorso della pagina di benvenuto e trasmettiamo il messaggio di data localizzata alla nostra view di benvenuto:

<?php
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
    ]);
});

Aggiorniamo resources/views/welcome.blade.php aggiungendo la visualizzazione della data, in questo modo:

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

Provando a cambiare lingua sulla home page di localhost, vedremo che le date sono ora localizzate, ad esempio:

Formattazione di numeri e valute con NumberFormatter

In diversi paesi, le persone usano formati diversi per rappresentare i numeri, ad esempio:

  • Stati Uniti → 123.123,12
  • Francia → 123 123,12

Pertanto, per riflettere queste differenze nella tua app Laravel, puoi utilizzare NumberFormatter nel modo seguente:

<?php
$num = NumberFormatter::create('en_US', NumberFormatter::DECIMAL);

$num2 = NumberFormatter::create('fr', NumberFormatter::DECIMAL);

Puoi anche scrivere il numero in una lingua particolare e visualizzare qualcosa come “centoventitremilacentoventitre virgola uno due”:

<?php
$num = NumberFormatter::create('en_US', NumberFormatter::SPELLOUT);
$num2 = NumberFormatter::create('fr', NumberFormatter::SPELLOUT);

Inoltre, NumberFormatter ti consente di localizzare facilmente le valute, ad esempio:

<?php
$currency1 = NumberFormatter::create('fr', NumberFormatter::CURRENCY);
$currency2 = NumberFormatter::create('en_US', NumberFormatter::CURRENCY);

Quindi, per fr vedrai Euro, mentre per en_US la valuta sarà in dollari USA.

Ercole Palmeri

Newsletter sull’Innovazione
Non perderti le notizie più importanti sull'Innovazione. Iscriviti per riceverle via e-mail.

Articoli recenti

L’autorità antitrust del Regno Unito lancia l’allarme BigTech su GenAI

La CMA del Regno Unito ha lanciato un avvertimento circa il comportamento delle Big Tech sul mercato dell’intelligenza artificiale. La…

18 Aprile 2024

Casa Green: rivoluzione energetica per un futuro sostenibile in Italia

Il Decreto "Case Green", formulato dall'Unione Europea per potenziare l'efficienza energetica degli edifici, ha concluso il suo iter legislativo con…

18 Aprile 2024

Ecommerce in Italia a +27% secondo il nuovo Report di Casaleggio Associati

Presentato il report annuale di Casaleggio Associati sull’Ecommerce in Italia. Report dal nome “AI-Commerce: le frontiere dell'Ecommerce con l'Intelligenza Artificiale”.…

17 Aprile 2024

Idea Brillante: Bandalux presenta Airpure®, la tenda che purifica l’aria

Risultato della costante innovazione tecnologica e all'impegno nei confronti dell'ambiente e del benessere delle persone. Bandalux presenta Airpure®, una tenda…

12 Aprile 2024