สอน Laravel 5 : ทำเว็บไซต์ 2 ภาษาง่าย ๆ กับ Laravel

สอน 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 ไฟล์เพื่อไปทดสอบการทำงานได้ที่ลิงค์ด้านล่างครับ

ดาวน์โหลดไฟล์ตัวอย่าง เปลี่ยนภาษาด้วย Laravel 5