آموزش مقدماتی لاراول - چند زبانه کردن سایت

گاهی ممکن است لازم داشته باشیم وب سایت مان را چند زبانه کنیم برای این منظور لاراول ابزاری را تهیه کرده که این امکان را ساده‌تر می‌کنه. در این آموزش نحوه پیاده‌سازی یک سایت چند زبانه با کمک لاراول را توضیح خواهیم داد.


همانطور که در آموزش پیش مشاهده کردید ما توانستیم با کمک ابزار laravel/ui امکان احراز هویت کاربران در فریم‌ورک Bootstrap را به پروژه خودمان اضافه کنیم و همانطور که مشاهده کردید ما قالب اصلیمون رو به زبان فارسی و راستچین ویرایش کردیم که البته صفحات مربوط به ثبت‌نام باقی موند. از طرفی لاراول این امکان رو داره که هر زبانی رو که مایل بودید در قالب فایلهای ترجمه به پروژه‌تان اضافه کنید.

بیاید به صفحه home.blade نگاهی بیاندازیم:

Image for post
Image for post

همانطور که مشاهده می‌کنید یک تابع عجیب در اینجا وجود داره که بصورت زیر تعریف میشه :

__(‘nameOfFile.key’)

این تابع کمکی به یک فایل ترجمه در مسیر resources/lang اشاره داره. اجازه بدید یک فایل php رو برای تست در فولدر lang/en ایجاد و بصورت زیر مقداردهی کنیم:

<?php

return [
   'intro' => 'به دوره آموزش لاراول خوش آمدید'
];

حالا به صفحه home برمی‌گردیم و آنرا بصورت زیر تغییر میدهیم:

Image for post
Image for post

همانطور که مشاهده می کنید مقداری که برای کلید intro در نظر گرفتیم در صفحه اصلی نمایش داده شد. پس بنابراین همان طور که میشه حدس زد دلیل وجود این تابع کمکی در قالب ها و صفحاتی که هنگام افزودن ویژگی احراز هویت مشاهده می‌کنیم به دلیل همین قابلیت چند زبانه کردن در نظر گرفته شده. غالبا برای پروژهای مختلف حتی اگر سایت تک زبانه باشد از این امکان استفاده می‌کنند ولی اگر شما پروژه‌تان تنها برای فارسی زبان‌هاست دیگر نیازی به استفاده از این قابلیت نیست و می‌تونید مستقیما جملات و کلمات خود رو به زبان فارسی وارد کنید. بیاید پروژه خودمون رو بصورت چند زبانه پیاده کنیم. 

برای این منظور ابتدا یک فولدر در مسیر زبان‌ها به نام fa اضافه می‌کنیم و یک فایل مانند زیر ایجاد می‌کنم:

Image for post
Image for post

حالا وارد nav.blade میشم و موارد رو به همان شیوه‌ای که پیشتر گفته شد تغییر میدم. حالا اگر به صفحه اصلی برگردیم و مرورگرو رو مجدد بارگذاری کنیم میبینیم که تمام عنوان‌ها در صفحه اصلی به زبان انگلیسی تغییر کردند. این به دلیل اینکه بصورت پیش‌فرض زبان انگلیسی برای سایت تعریف شده. برای تغییر اون لازم تنظیمات مربوط به موقعیت و زبان در لاراول رو تغییر بدیم. این مورد رو می‌تونیم به دو صورت تغییر بدیم یکی برای هر درخواست و یا بصورت کلی برای تمام پروژه!

بیایید ابتدا بصورت کلی رو انجام بدیم برای این منظور به مسیر تنظیمات در لاراول میریم. فایل‌هایی که در اینجا می بینید بسیار مهم هستند و باید حواسمون باشه که به اشتباه اونارو تغییر ندیم. موقع کار کردن با این فایل‌ها باید نهایت دقت رو داشته باشید. خب فایل app.php رو باز می‌کنیم در این تنظیمات اساسی مربوط به لاراول هست مثه نام پروژه، موقعیت زمانی، زبان و سرویس‌های دیگر! برای تغییر زبان به کلمه کلیدی locale میریم و مقدار اون رو به fa تغییر میدیم و مجددا مرورگرو رو بارگذاری کنیم

مهم:‌ گاهی هنگام تغییرات داخل لاراول (عمدتا تغییرات کانفیگ‌ها و یا route ها)، تغییرات ما اعمال نمیشن دلیل اون کش کردن هست برای رفع این مشکل تنها کافیه دستور زیر رو وارد کنید: 

php artisan optimize 
php artisan optimize:clear
Image for post
Image for post

در صورتی که تغییرات بدرستی اعمال شده‌ باشند زبان پروژه لاراول ما بطور کلی به زبان فارسی تغییر و تابع کمکی که بالا استفاده کردیم بدنبال زبان فارسی کلید‌هایی که داره میگرده که در فایل ترجمه مربوطه تعریف شدند. حالا همانطور که انتظار میرفت navbar ما کاملا فارسی شد.

Image for post
Image for post

من در قسمت تگ html در قالب پروژه با کمک تابع getlocale کد زیر رو وارد کردم که باعث میشه با تغییر زبان، جهت صفحه و تعریف زبان هم تغییر می‌کنه:

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" 
  {{ app()->getLocale() === 'fa' ? 'dir=rtl' : '' }} ">

این امکان هم وجود دارد که تابع کمکی مترجم ما بصورت داینامیک عمل کنه برای نمونه:

'welcome' => ':user خوش آمدید'

در اینجا اگر یک پارامتر دومی رو بصورت آرایه کلید => مقدار به تابع کمکیمون بدیم، کلیدی که برای این منظور تعریف کردیم (در اینجا user:) میتونیم مقداردهی کنیم:

Image for post
Image for post

تابع دیگری بنام trans_choice هم وجود داره که می‌تونیم ترجمه رو بصورت گزینشی انجام بدیم. برای نمونه انتخاب بین کلمه جمع یا فرد با ورودی که تابع میگیره. برای نمونه در مثال زیر انتخاب بین کلمه book و books که بصورت زیر خواهد بود:

//  translate file
return [
	'model'  => 'book|books'
];

// in blade:
{{ trans_choice('default.model',  1 ) }}
>>> book 

{{ trans_choice('default.model',  2 ) }}
>>> books

خب تا الان در مورد فایل‌های ترجمه و ابزارهایی که لاراول برای ما در نظر گرفته و اینکه چطور زبان یک پروژه رو از طریق تنظیمات بصورت گلوبال و کلی تعریف کنیم، صحبت شد در ادامه می‌خوام با کمک یک تابع و session ها در لاراول انتخاب زبان رو بر اساس انتخاب کاربر پویا کنیم. 

بیایید فرض کنیم زبان سایت ما بصورت پیش فرض فارسی هست. پس در config زبان رو فارسی می‌کنیم و با استفاده از توابع کمکی کلید‌های مورد نیاز رو تعریف می‌کنیم. 

ابتدا یک کنترلر بنام LocaleController ایجاد می‌کنیم و تابع store در اون رو به صورت زیر مینویسم:

public function store(Request $request)
{
   $data = $request->validate([
       'locale' => 'required'
   ]);

   Session::put('locale', $data['locale']);

   return redirect($request->header("referer"));
}

این تابع زبانی را که کاربر مدنظر دارد را می گیرد و آن را در یک سشن گلوبال با کلید locale ذخیره می کند. پس از آن یک دسترسی به صورت زیر برای این تابع تعریف می کنیم:

Route::post('locale', [LocaleController::class, 'store'])
	->name('locale.switch');

در نهایت وارد فایل blade مربوط به nav میشویم و منوی را مانند زیر به آن اضافه کنید:

<div class="collapse navbar-collapse" id="locale">
   <ul class="navbar-nav">
       <li class="nav-item dropdown">
           <div class="nav-link dropdown-toggle" id="localelink" data-bs-toggle="dropdown" aria-expanded="false">
               {{ app()->getLocale() }}
           </div>
           <ul class="dropdown-menu" aria-labelledby="navbarLocaleDropdown">
               <li>
                   <form action="{{ route('locale.switch') }}?locale=fa" method="POST">
                       @csrf
                       <button type="submit" class="dropdown-item">فا</button>
                   </form>
               </li>
               <li>
                   <form action="{{ route('locale.switch') }}?locale=en" method="POST">
                       @csrf
                       <button type="submit" class="dropdown-item">en</button>
                   </form>
               </li>
           </ul>
       </li>
   </ul>
</div>

منوی فوق وظیفه ارسال درخواست به سرور جهت تعیین زبان مورد نظر کاربر را انجام میده. اما کار در اینجا به اتمام نرسیده و لازمه تا زبان انتخاب شده کاربر را در هر درخواست در سرور به دست بیاوریم اما این موضوع نیاز به یک middleware داره. در مورد middleware در مقاله بعدی آموزش خواهم داد. در اینجا برای ایجاد یک middleware از دستور زیر استفاده می‌کنیم:

php artisan make:middleware SwitchLocaleMiddleware

بعد از اجرای دستور فوق وارد app/Http/Middleware مسیر میشویم و middleware را به صورت زیر تعریف می‌کنیم:

public function handle(Request $request, Closure $next)
{
   if (Session::has('locale'))
      App::setLocale(Session::get('locale'));
      
   return $next($request);
}

حال تنها کافیست وارد فایل Kernel در مسیر app/Http بشویم و این middleware را مانند تصویر زیر به انتهای آرایه  ‍middlewareGroups$ اضافه می‌کنیم:

Image for post
Image for post

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

Image for post
Image for post

و صفحه ثبت نام:

Image for post
Image for post

امیدوارم از این آموزش لذت برده باشید می‌توانید کد کامل پروژه رو در گیت‌هاب پروژه دانلود کنید: