آموزش ایجاد وب سایت چند زبانه با لاراول (Laravel Localization)

دراین آموزش به شما نحوه ایجاد سایت چند زبانه را با کمک  Laravel Localization و با استفاده از فریم وورک لاراول نسخه 5.8 خواهیم آموخت.

قابلیت Localization در لاراول به ما این اجازه را خواهد داد که بتوانیم با سرعت بیشتری پشتیبانی از چند زبان را در وبسایت خود افزایش دهیم. 

فایلها و رشته های هر زبان در دایرکتوری موجود در مسیر resources/lang ذخیره خواهند شد و شما به راحتی می توانید آنها را فراخوانی و برای زبان های مختلف استفاده نمایید.

در این آموزش ما یک middleware خواهیم ساخت که وظیفه بررسی زبان را برعهده خواهد داست.

1- نصب لاراول: 

شما می توانید با استفاده از یکی از دو کامند زیر یک نسخه جدید از لاراول را نصب کنید:

laravel new localization

or

composer create-project laravel/laravel localization

در این پروژه ما نیازی به اتصال لاراول به پایگاه داده نخواهیم داشت زیر ما با بخش های ظاهری وب سایت کار خواهیم داشت پس نیازی به اتصال لاراول ایجاد شده به پایگاه داده نخواهید داشت.

بصورت پیشفرض زبان سیستم انگلیسی یا En می باشد

شما می توانید زبان پیش فرض سیستم را در فایل app.php در دایرکتوری config مشاهده نمایید:

// app.php 

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

'locale' => 'en' اشاره به زبان محلی سیستم شما دارد، شما می توانید زبان پیشفرض سیستم خود را فارسی، عربی و یا هر زبان دیگری که نیاز دارید قرار دهید.

حالا اگر شما به دایرکتوری lang  در پوشه ی  resources مراجعه نمایید پوشه ای با نام en مشاهده خواهید کرد، این پوشه حاوی فایلهای ترجمه مربوط به زبان انگلیسی سیستم می باشد که بصورت پیشفرض لاراول زحمت ایجاد آن را برای ما کشیده است! در این پوشه فایل هایی مانند auth.php، pagination.php، passwords.php، validation.php وجود دارد.

فایل auth.php را در این دایرکتوری باز کنید:

//auth.php in En
return [

    /*
    |--------------------------------------------------------------------------
    | Authentication Language Lines
    |--------------------------------------------------------------------------
    |
    | The following language lines are used during authentication for various
    | messages that we need to display to the user. You are free to modify
    | these language lines according to your application's requirements.
    |
    */

    'failed' => 'These credentials do not match our records.',
    'throttle' => 'Too many login attempts. Please try again in :seconds seconds.',

];

همانطور که می بینید این فایل حاوی یک آرایه می باشد که شامل کلید و مقادیر خاصی می باشد. بنابراین شما می توانید هر مقداری که میخواهید برای زبان خود معرفی کنید و زبان های متعدد را با کلید های یکسان اما مقادیر متفاوت ایجاد نمایید. 

برای نمونه برای ایجاد فایل auth.php برای زبان فارسی شما باید یک دایرکتوری با نام fa در پوشه ی lang ایجاد و مقادیر آن را مطابق دلخواه خود و بر حسب کلید های آن تنظیم کنید. برای نمونه یک فایل auth.php برای ترجمه زبان فارسی بصورت زیر خواهد شد:

<?php
//auth.php in Fa
return [

    /*
    |--------------------------------------------------------------------------
    | Authentication Language Lines
    |--------------------------------------------------------------------------
    |
    | The following language lines are used during authentication for various
    | messages that we need to display to the user. You are free to modify
    | these language lines according to your application's requirements.
    |
    */

    'failed' => 'هیچ داده ای مطابق درخواست شما یافت نشد!',
    'throttle' => 'تعداد تلاش شما برای ورود بیش از حد مجاز بوده است. لطفا seconds ثانیه دیگر تلاش کنید ',

];

توجه داشته باشید که شما باید کلید های یکسان برای زبان های مختلف ایجاد  و مقادیر آن را برای هر زبان تغییر دهید.تا زمانی که کاربر زبان خود را تغییر می دهدبا استفاده از کلید های یکسان بتوان متن های دلخواه در زبان انتخاب شده را برای کاربر نمایش داد.

حال قصد داریم برای سیستم خود زبان های متفاوتی تعریف نماییم.

ما علاوه بر زبان انگلیسی قصد داریم زبان های فارسی، عربی و ژاپنی را نیز داشته باشیم. 

پس در دایرکتوری lang پوشه های مربوط به هر زبان را بصورت زیر ایجاد کنید:

1- fa

2- ar

3- jp

در نهایت محتوای پوشه ی lang شما باید بصورت زیر باشد:

حال در تمام پوشه های مربوط به زبان فایلی با نام sentence.php ایجاد نمایید.

ما قصد داریم یک پیغام پیش فرض خوش آمد برای زبان های مختلف وب سایتمان ایجاد نمایم.

در زبان عربی فایل ar/sentence.php باز و کد زیر را قرار دهید:

<?php
	
	// sentence.php
	
	return [
		'welcome' => 'ترحيب'
	];

برای زبان فارسی به فایل ar/sentence.php رفته و کد زیر را قرار دهید:

<?php
	
	// sentence.php
	
	return [
		'welcome' => 'خوش آمدید'
	];

برای زبان ژاپنی با فایل jp/sentence.php رفته و کد زیر را قرار دهید:

<?php
	
	// sentence.php
	
	return [
		'welcome' => 'ようこそ友達'
	];

و برای زبان انگلیسی نیز به فایل en/sentence.php رفته و کد های زیر را قرار دهید:

<?php

// sentence.php

return [
  'welcome' => 'Welcome Friend'
];

شما می توانید متن های متفاوتی را قرار دهید، ما برای آموزش تنها از یک متن استفاده خواهیم کرد.

حال ما تمام ترجمه های مربوط به زبان های مورد نظر را در محل خود قرار داده ایم. حالا به مرحله ایجاد view ها رسیده ایم!

ابتدا به دایرکتوری resources>> views رفته و در این دایرکتوری یک فایل بنام app.blade.php ایجاد و کدهای زیر را در آن قرار دهید:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
    <div id="app">
        <nav class="navbar navbar-expand-md navbar-light navbar-laravel">
            <div class="container">
                <a class="navbar-brand" href="{{ url('/') }}">
                    {{ config('app.name', 'Laravel') }}
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-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">
                    <!-- Left Side Of Navbar -->
                    <ul class="navbar-nav mr-auto">

                    </ul>

                    <!-- Right Side Of Navbar -->
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item dropdown">
                            <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                                Language <span class="caret"></span>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="lang/en"><img src="{{asset('img/us.png')}}" width="30px" height="20x"> English</a>
                                <a class="dropdown-item" href="lang/fr"><img src="{{asset('img/fr.png')}}" width="30px" height="20x"> French</a>
                                <a class="dropdown-item" href="lang/es"><img src="{{asset('img/es.png')}}" width="30px" height="20x"> Spanish</a>
                                <a class="dropdown-item" href="lang/jp"><img src="{{asset('img/jp.png')}}" width="30px" height="20x"> Japanese</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <main class="py-4">
            @yield('content')
        </main>
    </div>
</body>
</html>

حالا فایل welcome.blade.php را که بصورت پیشفرض در دایرکتوری views قرار دارد باز و کدهای زیر را در آن قرار دهید:

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-body">
                    hello
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

ایجاد route, controller, and middleware

کد زیر را در فایل routes >> web.php لاراول خود قرار دهید:

Route::get('lang/{locale}', 'HomeController@lang');

برای ایجاد کنترلر HomeController کد زیر را در کامندلاین سیستم خود اجرا نمایید:

php artisan make:controller HomeController

حال یک متد با نام lang در این کنترلر ایجاد و آن را مطابق زیر تغییر دهید:

<?php

// HomeController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App;

class HomeController extends Controller
{
    public function lang($locale)
    {
        App::setLocale($locale);
        session()->put('locale', $locale);
        return redirect()->back();
    }
}

تابع lang کار پیدا کردن زبان محلی را انجام و آن را در یک session قرار خواهد داد.

حال برای ایجاد یک middleware کد زیر را ترمینال خود اجرا نمایید:

php artisan make:middleware Localization

پس از اجرای کامند بالا یک فایل در آدرس  Http >> Middleware ایجاد خواهد شد.

حال فایل Localization.php  را باز و آن را بصورت تغییر دهید:

namespace App\Http\Middleware;

use Closure;
use App;

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

ثبت و Register  میدلویر Localization 

برای ثبت و Register کردن middleware به فایل App\Http\Kerne.php رفته و مقدار زیر را به آرایه  $middlewareGroups  اضاف نمایید:

  \App\Http\Middleware\Localization::class,

در نهایت آرایه $middlewareGroups شما باید بصورت زیر باشد:

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,
        ],

        'api' => [
            'throttle:60,1',
            'bindings',
        ],
    ];

حال باید برای نمایش زبان های در فایل app.blade.php تغییراتی ایجاد نمایید. پس این فایل را باز کرده و مقادیر آن را بصورت زیر تغییر دهید:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
    <nav class="navbar navbar-expand-md navbar-light navbar-laravel">
        <div class="container">
            <a class="navbar-brand" href="{{ url('/') }}">
                {{ config('app.name', 'Laravel') }}
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-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">
                <!-- Left Side Of Navbar -->
                <ul class="navbar-nav mr-auto">

                </ul>

                <!-- Right Side Of Navbar -->
                <ul class="navbar-nav ml-auto">
                    @php $locale = session()->get('locale'); @endphp
                    <li class="nav-item dropdown">
                        <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                            Language <span class="caret"></span>
                        </a>
                        @switch($locale)
                            @case('fr')
                            <img src="{{asset('img/en.png')}}" width="30px" height="20x"> English
                            @break
                            @case('es')
                            <img src="{{asset('img/fa.png')}}" width="30px" height="20x"> Persian
                            @break
                            @case('jp')
                            <img src="{{asset('img/ar.png')}}" width="30px" height="20x"> Arabic
                            @break
                            @default
                            <img src="{{asset('img/jp.png')}}" width="30px" height="20x"> Japanese
                        @endswitch
                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="lang/en"><img src="{{asset('img/en.png')}}" width="30px" height="20x"> English</a>
                            <a class="dropdown-item" href="lang/fr"><img src="{{asset('img/fa.png')}}" width="30px" height="20x"> Persian</a>
                            <a class="dropdown-item" href="lang/es"><img src="{{asset('img/ar.png')}}" width="30px" height="20x"> Arabic</a>
                            <a class="dropdown-item" href="lang/jp"><img src="{{asset('img/jp.png')}}" width="30px" height="20x"> Japanese</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <main class="py-4">
        @yield('content')
    </main>
</div>
</body>
</html>

 در کد بالا ما با استفاده از یک dropdown زبان های سیستم را نمایش داده ایم که اگر کاربر بر روی هر کدام از آن های کلیک کند به آدرس lang/selectedLang ارسال خواهد شد. همچنین ما در کنار هر زبان پرچم کشور مربوط را نیز قرار داده ایم.

حال باید در فایل نیز برای نمایش متن مطابق زبان های مختلف فایل resources >> views >> welcome.blade.php را بصورت زیر تغییر دهیم:

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-body">
                <p>{{ trans('sentence.welcome')}}</p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

در اینجا ما از تابع trans() برای نمایش و تبدیل زبان ها و مقادیر آن ها استفاده کرده ایم.

این تابع یک آرگومان به شکل filename.array_key_name میگرد که filename برابر فایلی می باشد که رشته ترجمه در آن قرار دارد و array_key_name نیز برابر کلیدی می باشد که می خواهید در زبان های مختلف نمایش داده شود 

برای نمونه ما در کد بالا مقدار ورود تابع trans() را برابر sentence.welcome قرار داده ایم که آن اشاره با فایل sentence.php و مقدار welcome نیز اشاره به کلیدی می باشد که تعریف کرده ایم.

حال اگر شما بخواهید عنوان سایت خود را در زبان های مختلف با استفاده از این روش ایجاد نمایید میتوانید برای نمونه در هرکدام از این زبان های یک فایل جدید ایجاد نموده یا به آرایه ی موجود در فایل sentence.php مقداری اضاف کنید با نام title و سپس آن را با استفاده از تابع trans() در تگ title وب سایت خود فراخوانی نمایید.

شما می توانید با این روش و به راحتی بخش های ثابت وب سایت خود را بصورت چند زبانه ایجاد نمایید.

انشاالله در مطالب بعد در مورد ایجاد پست و مطالب و نمایش در زبان های متفاوت نیز صحبت خواهیم کرد.

در صورتی که از این آموزش خوشتون اومد یا سوالی دارید خوشحال می شم از بخش نظرات نظر خودتون رو ارسال کنید :) منتظرم:)