สอน Laravel 5 : ทำเว็บไซต์ 2 ภาษาง่าย ๆ กับ Laravel
หลักการทำเว็บไซต์ 2 ภาษาหรือมากกว่า 2 ภาษา ใน Laravel 5 โดยโครงสร้างการทำงานแล้วไม่ได้ต่างจาก
Codeigniter Framework มากนัก กล่าวคือจะมีการใช้งานหลัก ๆ อยู่เหมือนกันคือ ไฟล์ array สำหรับเก็บแต่ละภาษา
ตัวแปรแบบ session เก็บภาษาหลักที่ใช้งานอยู่ CI เปลี่ยนภาษาด้วยคำสั่ง $this->lang->line() ส่วน Laravel
เปลี่ยนภาษาด้วยคำสั่ง {{ trans() }} และ CI อาศัย Hook ตรวจสอบภาษาก่อนเข้าทำงานใน Controller ส่วน Lavavel
ใช้ Middleware เป็นต้น
ภาษาเริ่มต้นของ Laravel 5 จะเป็นภาษาอังกฤษคือ en และจะถูกตั้งค่าไว้ที่ตัวแปร locale ในไฟล์ config/app.php
'locale' => 'en',
ในกรณีที่เว็บไซต์เรารองรับหลายภาษาและเหตุปัญหาใด ๆ ก็ตาม Laravel อนุญาติให้เราตั้งค่าภาษาที่จะมาแทนที่ภาษาที่ไม่
สามารถทำงานได้ในขณะนั้นโดยสามารถกำหนดได้ที่ตัวแปร fallback_locale ในบรรทัดถัดลงมาของไฟล์ config/app.php
'fallback_locale' => 'en',
Laravel ใช้การเก็บตัวแปรภาษาทั้งหมดในรูปแบบ Array ซึ่งจะถูกเก็บไว้ใน resources/lang/en ถ้าเราลองเข้าไปดู
จะเห็นว่ามีโฟลเด้อ en ซึ่งเป็นภาษาเริ่มต้นปรากฏอยู่ก่อนแล้ว และข้างในโฟลเด้อ ก็จะมีไฟล์ .php ไว้เก็บภาษาเพื่อเอาไว้
ใช้งานในโอกาสแตกต่างกันไป
วิธีเพิ่มภาษาใหม่
วิธีเพิ่มภาษา เริ่มต้นเลยให้ไปสร้างโฟลเด้อที่สื่อถึงภาษานั้น ๆ ในโฟลเด้อ resources/lang/ ในที่นี้ผมจะสร้างโฟลเด้อ
เพิ่มมา 3 โฟลเด้อ คือ th,jp,ch เพื่อให้เว็บไซต์ใช้งานภาษาไทย จีน ญีปุ่น ได้ ซึ่งเราจได้โครงสร้างดังนี้
resources/lang/en resources/lang/th resources/lang/jp resources/lang/ch
จากนั้นให้สร้างไฟล์เก็บภาษาทั้ง 4 ภาษาในชื่อเดียวกัน โดยให้ตั้งชื่อว่า message.php และวางไว้ในทั้ง 4 โฟลเด้อ
โดยในไฟล์ message.php ให้สร้างตัวแปร Array เก็บ Word ของแต่ละภาษาดังนี้
resources/lang/th/message.php
<?php return [ 'service' => 'บริการของเรา', 'portfolio' => 'ผลงาน', 'about' => 'เกี่ยวกับเรา', 'team' => 'ทีมงาน', 'welcome' => 'ยินดีต้อนรับ', 'body' => 'วิธีทำเว็บไซต์ 2 ภาษาหรือมากกว่า' ];
นั่นหมายความว่าในโฟลเด้อ resources/lang/jp/message.php เราจะต้องได้ตัวแปร Array แบบนี้
resources/lang/jp/message.php
<?php return [ 'service' => 'サービス', 'portfolio' => 'ポートフォリオ', 'about' => '約', 'team' => 'チーム', 'welcome' => '私たちのスタジオへようこそ!', 'body' => 'お会いできて非常にうれしいです。' ];
ทำแบบเดียวกันนี้กับอีกทั้ง 2 ภาษาคือ en กับ ch เมื่อเสร็จแล้วเราก็จะได้ไฟล์ภาษามาใช้งานในเว็บไซต์เราถึง 4 ภาษา
ที่เหลือก็จะเป็นการใช้งานตอนแสดงผลในส่วน view คือ html และทำฟังก์ชั่นการเปลี่ยนภาษา
วิธีแสดงภาษาใน View
การแสดงผลใน html ไฟล์ก็ไม่มีอะไรยุ่งยากครับให้ใช้คำสั่ง tran() และตามด้วยชื่อไฟล์ และชื่อตัวแปรนั้น ๆ ตัวอย่างเช่น
{{ trans('message.service') }}
ถ้า locale เท่ากับ th ผลลัพธ์ที่ได้จะเท่ากับ “บริการของเรา” แต่ถ้า locale เป็น jp ผลลัพธ์จะเท่ากับ “サービス”
สร้างฟังก์ชั่นเปลี่ยนภาษาใน Routes
ในบทความนี้จะเป็นการสร้างฟังก์ชั่นให้เปลี่ยนค่าภาษาใน routes โดยไม่ผ่าน Controller นะครับ สามาถเปลี่ยนได้
เริ่มจากไปกำหนด uri สำหรับเปลี่ยนภาษา เปิดไฟล์ app/Http/routes.php จากนั้นสร้าง uri เริ่มต้นและเปลี่ยนภาษาดังนี้
app/Http/routes.php
Route::get('/',function () { return view("home"); // เริ่มต้นเข้ามา ให้โหลด home.blade.php มาแสดง }); Route::get('change/{locale}', function ($locale) { Session::set('locale', $locale); // กำหนดค่าตัวแปรแบบ locale session ให้มีค่าเท่ากับตัวแปรที่ส่งเข้ามา return Redirect::back(); // สั่งให้โหลดหน้าเดิม });
สร้างตัวกรอง Request เพื่อเปลี่ยนภาษาด้วย Middleware
เมื่อมีการร้องขอหรือเกิดคำสั่งต่าง ๆ มาที่ routes เราจะสามารถตรวจคำสั่งหรือ request นั้น ๆ ได้ด้วยการเพิ่ม
คลาส Middleware เข้าไปก่อน Middleware เป็นอีกหนึ่งความสามารถที่มีใน Laravel 5 หลักการทำงานกับการ Filter
ใน Laravel เวอร์ชั่นก่อนหน้านี้ วิธีสร้าง Middleware คลาสให้เราสร้างไฟล์ .php ไว้ใน app/Http/Middleware
ในที่นี้ให้เราสร้างไฟล์ Language.php และเขียนโค๊ดในไฟล์ดังนี้
app/Http/Middleware/Language.php
namespace App\Http\Middleware; use Closure; use Illuminate\Http\Request; use Illuminate\Routing\Redirector; use Illuminate\Support\Facades\App; use Illuminate\Support\Facades\Config; use Illuminate\Support\Facades\Session; class Language { public function handle($request, Closure $next) // รับคำสั่งและลำดับการทำงาน { if(Session::has('locale')) // ตรวจดูว่ามีตัวแปร locale ใน session หรือไหม่ { $locale = Session::get('locale'); // ถ้ามีอยู่ก็ดึงค่าออกมาเก็บไว้ App::setLocale($locale); // ตั้งค่าที่ได้รับมาให้เป็นภาษาหลัก } return $next($request); // ทำตามคำสั่งในลำดับต่อไป } }
เปิดใช้งาน Middleware
หลังจากที่เราสร้าง Middleware เสร็จแล้วจำเป็นที่จะต้องเปิดใช้งานก่อน วิธีเปิดใช้งานให้เราไปเพิ่มคลาส
Language.php ที่ไฟล์ app/Http/Kernel.php ที่ตัวแปร $middlewareGroups ให้เราเพิ่มเข้าไปดังนี้
app/Http/Kernel.php
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, \App\Http\Middleware\Language::class, // คลาส Language.php ที่เราเพิ่มเข้ามา ], 'api' => [ 'throttle:60,1', ], ];
ทดสอบสร้าง View เปลี่ยนภาษา
จากการเขียนคำสั่งและตั้งค่าที่ผ่านมาเราได้เตรียมสภาพแวดล้อมเพื่อให้เว็บไซต์สามารถเปลี่ยนภาษาได้ทั้ง 4 ภาษาเรียบร้อย
แล้วครับ ต่อไปเราเพียงแค่สร้าง view หรือ html ไฟล์ให้ส่ง request ภาษาเข้ามาว่าจะให้เว็บแสดงผลในภาษาอะไร
ซึ่งเราสามารถเขียนได้ในลักษณะดังนี้ครับ
<a href="{{ URL::to('change/en') }}">ENGLISH</a> // เปลี่ยนเป็นภาษาอังกฤษ <a href="{{ URL::to('change/th') }}">THAILAND</a> // เปลี่ยนเป็นภาษาไทย <a href="{{ URL::to('change/jp') }}">JAPANESE</a> // เปลี่ยนเป็นภาษาญี่ปุ่น <a href="{{ URL::to('change/ch') }}">CHINESE</a> // เปลี่ยนเป็นภาษาจีน
ให้ท่านทดสอบโดยการสร้างไฟล์ home.blade.php และวางไว้ใน resources/views/home.blade.php
จากนั้นลองเขียน html ง่าย ๆ เพื่อแสดงภาษาต่าง ๆ ตาม request ที่ส่งเข้ามา โดยสามารถเขียนคร่าว ๆ ได้ดังนี้
resources/views/home.blade.php
<body> <div class="container"> <ul class="nav navbar-nav"> <li><a href="#">{{ trans('message.service') }}</a></li> <li><a href="#">{{ trans('message.portfolio') }}</a></li> <li><a href="#">{{ trans('message.about') }}</a> </li> <li><a href="#">{{ trans('message.team') }}</a></li> <li class="dropdown"> <a class="dropdown-toggle" id="dropdownLang" data-toggle="dropdown"> {{ Config::get('app.locale') }} <span class="caret"></span> </a> <ul class="dropdown-menu" aria-labelledby="dropdownLang"> <li><a href="{{ URL::to('change/en') }}">ENGLISH</a></li> <li><a href="{{ URL::to('change/th') }}">THAILAND</a></li> <li><a href="{{ URL::to('change/jp') }}">JAPANESE</a></li> <li><a href="{{ URL::to('change/ch') }}">CHINESE</a></li> </ul> </li> </ul> <div class="row"> <div class="intro-lead-in">{{ trans('message.welcome') }}</div> <div class="intro-heading">{{ trans('message.body') }}</div> </div> </div> </body>
เสร็จแล้วครับเว็บไซต์ 4 ภาษา โดยโครงสร้างที่ต้องเพิ่มและแก้ไขสำหรับทำให้เว็บไซต์แสดงผลได้ทั้ง 4 ภาษา
จะมีโครงสร้างไฟล์ ดังนี้ครับ
resources/lang/th/message.php // เพิ่ม - สำหรับเก็บภาษาแต่ละภาษา app/Http/routes.php // แก้ไข - สำหรับสร้าง uri เริ่มต้นและเปลี่ยนภาษา app/Http/Middleware/Language.php // เพิ่ม - สำหรับรับ request และตั้งค่าภาษาก่อนโหลดหน้าใหม่ app/Http/Kernel.php // แก้ไข - สำหรับเปิดใช้งาน Middleware ไฟล์ Language.php resources/views/home.blade.php // เพิ่ม - แสดงภาษาและส่ง request เปลี่ยนภาษา
ซึ่งท่านสามารถดาวน์โหลดทั้ง 5 ไฟล์เพื่อไปทดสอบการทำงานได้ที่ลิงค์ด้านล่างครับ