Site icon บริษัท โค๊ดบี จำกัด

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

codebee
สอน-laravel-framework

สอน-laravel-framework

<h3>สอน Laravel 5 &colon; ทำเว็บไซต์ 2 ภาษาง่าย ๆ กับ Laravel<&sol;h3>&NewLine;<p><&sol;br><br &sol;>&NewLine;หลักการทำเว็บไซต์ 2 ภาษาหรือมากกว่า 2 ภาษา ใน Laravel 5 โดยโครงสร้างการทำงานแล้วไม่ได้ต่างจาก<br &sol;>&NewLine;Codeigniter Framework มากนัก กล่าวคือจะมีการใช้งานหลัก ๆ อยู่เหมือนกันคือ ไฟล์ array สำหรับเก็บแต่ละภาษา<br &sol;>&NewLine;ตัวแปรแบบ session เก็บภาษาหลักที่ใช้งานอยู่ CI เปลี่ยนภาษาด้วยคำสั่ง <strong>&dollar;this->lang->line&lpar;&rpar;<&sol;strong> ส่วน Laravel<&excl;--more--><br &sol;>&NewLine;เปลี่ยนภาษาด้วยคำสั่ง <strong>&lbrace;&lbrace; trans&lpar;&rpar; &rcub;&rcub;<&sol;strong> และ CI อาศัย Hook ตรวจสอบภาษาก่อนเข้าทำงานใน Controller ส่วน Lavavel<br &sol;>&NewLine;ใช้ Middleware เป็นต้น<&sol;p>&NewLine;<p><&sol;br><br &sol;>&NewLine;ภาษาเริ่มต้นของ Laravel 5 จะเป็นภาษาอังกฤษคือ en และจะถูกตั้งค่าไว้ที่ตัวแปร locale ในไฟล์ <strong>config&sol;app&period;php<&sol;strong><&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >'locale' &equals;&gt&semi; 'en'&comma;<&sol;pre>&NewLine;<p>ในกรณีที่เว็บไซต์เรารองรับหลายภาษาและเหตุปัญหาใด ๆ ก็ตาม Laravel อนุญาติให้เราตั้งค่าภาษาที่จะมาแทนที่ภาษาที่ไม่<br &sol;>&NewLine;สามารถทำงานได้ในขณะนั้นโดยสามารถกำหนดได้ที่ตัวแปร fallback&lowbar;locale ในบรรทัดถัดลงมาของไฟล์ <strong>config&sol;app&period;php<&sol;strong><&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >'fallback&lowbar;locale' &equals;&gt&semi; 'en'&comma;<&sol;pre>&NewLine;<p>Laravel ใช้การเก็บตัวแปรภาษาทั้งหมดในรูปแบบ Array ซึ่งจะถูกเก็บไว้ใน resources&sol;lang&sol;en ถ้าเราลองเข้าไปดู<br &sol;>&NewLine;จะเห็นว่ามีโฟลเด้อ en ซึ่งเป็นภาษาเริ่มต้นปรากฏอยู่ก่อนแล้ว และข้างในโฟลเด้อ ก็จะมีไฟล์ &period;php ไว้เก็บภาษาเพื่อเอาไว้<br &sol;>&NewLine;ใช้งานในโอกาสแตกต่างกันไป<br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<h4>วิธีเพิ่มภาษาใหม่<&sol;h4>&NewLine;<p>วิธีเพิ่มภาษา เริ่มต้นเลยให้ไปสร้างโฟลเด้อที่สื่อถึงภาษานั้น ๆ ในโฟลเด้อ resources&sol;lang&sol; ในที่นี้ผมจะสร้างโฟลเด้อ<br &sol;>&NewLine;เพิ่มมา 3 โฟลเด้อ คือ th&comma;jp&comma;ch เพื่อให้เว็บไซต์ใช้งานภาษาไทย จีน ญีปุ่น ได้ ซึ่งเราจได้โครงสร้างดังนี้<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >resources&sol;lang&sol;en &NewLine;resources&sol;lang&sol;th &NewLine;resources&sol;lang&sol;jp &NewLine;resources&sol;lang&sol;ch<&sol;pre>&NewLine;<p>จากนั้นให้สร้างไฟล์เก็บภาษาทั้ง 4 ภาษาในชื่อเดียวกัน โดยให้ตั้งชื่อว่า message&period;php และวางไว้ในทั้ง 4 โฟลเด้อ<br &sol;>&NewLine;โดยในไฟล์ message&period;php ให้สร้างตัวแปร Array เก็บ Word ของแต่ละภาษาดังนี้<br &sol;>&NewLine;<strong>resources&sol;lang&sol;th&sol;message&period;php<&sol;strong> <&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " title&equals;"resources&sol;lang&sol;jp&sol;message&period;php">&lt&semi;&quest;php &NewLine;return &lbrack; &NewLine; 'service' &equals;&gt&semi; 'บริการของเรา'&comma; &NewLine; 'portfolio' &equals;&gt&semi; 'ผลงาน'&comma; &NewLine; 'about' &equals;&gt&semi; 'เกี่ยวกับเรา'&comma; &NewLine; 'team' &equals;&gt&semi; 'ทีมงาน'&comma; &NewLine; 'welcome' &equals;&gt&semi; 'ยินดีต้อนรับ'&comma; &NewLine; 'body' &equals;&gt&semi; 'วิธีทำเว็บไซต์ 2 ภาษาหรือมากกว่า' &NewLine;&rsqb;&semi;<&sol;pre>&NewLine;<p>นั่นหมายความว่าในโฟลเด้อ resources&sol;lang&sol;jp&sol;message&period;php เราจะต้องได้ตัวแปร Array แบบนี้<br &sol;>&NewLine;<strong>resources&sol;lang&sol;jp&sol;message&period;php<&sol;strong> <&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " title&equals;"resources&sol;lang&sol;jp&sol;message&period;php">&lt&semi;&quest;php &NewLine;return &lbrack; &NewLine; 'service' &equals;&gt&semi; 'サービス'&comma; &NewLine; 'portfolio' &equals;&gt&semi; 'ポートフォリオ'&comma; &NewLine; 'about' &equals;&gt&semi; '約'&comma; &NewLine; 'team' &equals;&gt&semi; 'チーム'&comma; &NewLine; 'welcome' &equals;&gt&semi; '私たちのスタジオへようこそ！'&comma; &NewLine; 'body' &equals;&gt&semi; 'お会いできて非常にうれしいです。' &NewLine;&rsqb;&semi;<&sol;pre>&NewLine;<p>ทำแบบเดียวกันนี้กับอีกทั้ง 2 ภาษาคือ en กับ ch เมื่อเสร็จแล้วเราก็จะได้ไฟล์ภาษามาใช้งานในเว็บไซต์เราถึง 4 ภาษา<br &sol;>&NewLine;ที่เหลือก็จะเป็นการใช้งานตอนแสดงผลในส่วน view คือ html และทำฟังก์ชั่นการเปลี่ยนภาษา<br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<h4>วิธีแสดงภาษาใน View<&sol;h4>&NewLine;<p>การแสดงผลใน html ไฟล์ก็ไม่มีอะไรยุ่งยากครับให้ใช้คำสั่ง tran&lpar;&rpar; และตามด้วยชื่อไฟล์ และชื่อตัวแปรนั้น ๆ ตัวอย่างเช่น<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&lbrace;&lbrace; trans&lpar;'message&period;service'&rpar; &rcub;&rcub;<&sol;pre>&NewLine;<p>ถ้า locale เท่ากับ th ผลลัพธ์ที่ได้จะเท่ากับ &&num;8220&semi;บริการของเรา&&num;8221&semi; แต่ถ้า locale เป็น jp ผลลัพธ์จะเท่ากับ &&num;8220&semi;サービス&&num;8221&semi;<br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<h4>สร้างฟังก์ชั่นเปลี่ยนภาษาใน Routes<&sol;h4>&NewLine;<p>ในบทความนี้จะเป็นการสร้างฟังก์ชั่นให้เปลี่ยนค่าภาษาใน routes โดยไม่ผ่าน Controller นะครับ สามาถเปลี่ยนได้<br &sol;>&NewLine;เริ่มจากไปกำหนด uri สำหรับเปลี่ยนภาษา เปิดไฟล์ app&sol;Http&sol;routes&period;php จากนั้นสร้าง uri เริ่มต้นและเปลี่ยนภาษาดังนี้<br &sol;>&NewLine;<strong>app&sol;Http&sol;routes&period;php<&sol;strong> <&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >Route&colon;&colon;get&lpar;'&sol;'&comma;function &lpar;&rpar; &lbrace; &NewLine;&Tab;return view&lpar;"home"&rpar;&semi; &sol;&sol; เริ่มต้นเข้ามา ให้โหลด home&period;blade&period;php มาแสดง &NewLine;&rcub;&rpar;&semi; &NewLine;Route&colon;&colon;get&lpar;'change&sol;&lbrace;locale&rcub;'&comma; function &lpar;&dollar;locale&rpar; &lbrace; &NewLine;&Tab;Session&colon;&colon;set&lpar;'locale'&comma; &dollar;locale&rpar;&semi; &sol;&sol; กำหนดค่าตัวแปรแบบ locale session ให้มีค่าเท่ากับตัวแปรที่ส่งเข้ามา &NewLine;&Tab;return Redirect&colon;&colon;back&lpar;&rpar;&semi; &sol;&sol; สั่งให้โหลดหน้าเดิม &NewLine;&rcub;&rpar;&semi;<&sol;pre>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>สร้างตัวกรอง Request เพื่อเปลี่ยนภาษาด้วย Middleware <&sol;h4>&NewLine;<p>เมื่อมีการร้องขอหรือเกิดคำสั่งต่าง ๆ มาที่ routes เราจะสามารถตรวจคำสั่งหรือ request นั้น ๆ ได้ด้วยการเพิ่ม<br &sol;>&NewLine;คลาส Middleware เข้าไปก่อน Middleware เป็นอีกหนึ่งความสามารถที่มีใน Laravel 5 หลักการทำงานกับการ Filter<br &sol;>&NewLine;ใน Laravel เวอร์ชั่นก่อนหน้านี้ วิธีสร้าง Middleware คลาสให้เราสร้างไฟล์ &period;php ไว้ใน app&sol;Http&sol;Middleware<br &sol;>&NewLine;ในที่นี้ให้เราสร้างไฟล์ Language&period;php และเขียนโค๊ดในไฟล์ดังนี้<br &sol;>&NewLine;<strong>app&sol;Http&sol;Middleware&sol;Language&period;php<&sol;strong> <&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " > &NewLine;namespace App&bsol;Http&bsol;Middleware&semi; &NewLine; &NewLine;use Closure&semi; &NewLine;use Illuminate&bsol;Http&bsol;Request&semi; &NewLine;use Illuminate&bsol;Routing&bsol;Redirector&semi; &NewLine;use Illuminate&bsol;Support&bsol;Facades&bsol;App&semi; &NewLine;use Illuminate&bsol;Support&bsol;Facades&bsol;Config&semi; &NewLine;use Illuminate&bsol;Support&bsol;Facades&bsol;Session&semi; &NewLine; &NewLine;class Language &NewLine;&lbrace; &NewLine; public function handle&lpar;&dollar;request&comma; Closure &dollar;next&rpar; &sol;&sol; รับคำสั่งและลำดับการทำงาน &NewLine; &lbrace; &NewLine; if&lpar;Session&colon;&colon;has&lpar;'locale'&rpar;&rpar; &sol;&sol; ตรวจดูว่ามีตัวแปร locale ใน session หรือไหม่ &NewLine; &lbrace; &NewLine; &dollar;locale &equals; Session&colon;&colon;get&lpar;'locale'&rpar;&semi; &sol;&sol; ถ้ามีอยู่ก็ดึงค่าออกมาเก็บไว้ &NewLine; App&colon;&colon;setLocale&lpar;&dollar;locale&rpar;&semi; &sol;&sol; ตั้งค่าที่ได้รับมาให้เป็นภาษาหลัก &NewLine; &rcub; &NewLine; return &dollar;next&lpar;&dollar;request&rpar;&semi; &sol;&sol; ทำตามคำสั่งในลำดับต่อไป &NewLine; &rcub; &NewLine;&rcub;<&sol;pre>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>เปิดใช้งาน Middleware <&sol;h4>&NewLine;<p>หลังจากที่เราสร้าง Middleware เสร็จแล้วจำเป็นที่จะต้องเปิดใช้งานก่อน วิธีเปิดใช้งานให้เราไปเพิ่มคลาส<br &sol;>&NewLine;Language&period;php ที่ไฟล์ app&sol;Http&sol;Kernel&period;php ที่ตัวแปร &dollar;middlewareGroups ให้เราเพิ่มเข้าไปดังนี้<&sol;p>&NewLine;<p><strong>app&sol;Http&sol;Kernel&period;php<&sol;strong> <&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >protected &dollar;middlewareGroups &equals; &lbrack; &NewLine; 'web' &equals;&gt&semi; &lbrack; &NewLine; &bsol;App&bsol;Http&bsol;Middleware&bsol;EncryptCookies&colon;&colon;class&comma; &NewLine; &bsol;Illuminate&bsol;Cookie&bsol;Middleware&bsol;AddQueuedCookiesToResponse&colon;&colon;class&comma; &NewLine; &bsol;Illuminate&bsol;Session&bsol;Middleware&bsol;StartSession&colon;&colon;class&comma; &NewLine; &bsol;Illuminate&bsol;View&bsol;Middleware&bsol;ShareErrorsFromSession&colon;&colon;class&comma; &NewLine; &bsol;App&bsol;Http&bsol;Middleware&bsol;VerifyCsrfToken&colon;&colon;class&comma; &NewLine; &bsol;App&bsol;Http&bsol;Middleware&bsol;Language&colon;&colon;class&comma; &sol;&sol; คลาส Language&period;php ที่เราเพิ่มเข้ามา &NewLine; &rsqb;&comma; &NewLine; &NewLine; 'api' &equals;&gt&semi; &lbrack; &NewLine; 'throttle&colon;60&comma;1'&comma; &NewLine; &rsqb;&comma; &NewLine;&rsqb;&semi;<&sol;pre>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>ทดสอบสร้าง View เปลี่ยนภาษา<&sol;h4>&NewLine;<p>จากการเขียนคำสั่งและตั้งค่าที่ผ่านมาเราได้เตรียมสภาพแวดล้อมเพื่อให้เว็บไซต์สามารถเปลี่ยนภาษาได้ทั้ง 4 ภาษาเรียบร้อย<br &sol;>&NewLine;แล้วครับ ต่อไปเราเพียงแค่สร้าง view หรือ html ไฟล์ให้ส่ง request ภาษาเข้ามาว่าจะให้เว็บแสดงผลในภาษาอะไร<br &sol;>&NewLine;ซึ่งเราสามารถเขียนได้ในลักษณะดังนี้ครับ<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " > &NewLine;&lt&semi;a href&equals;"&lbrace;&lbrace; URL&colon;&colon;to&lpar;'change&sol;en'&rpar; &rcub;&rcub;"&gt&semi;ENGLISH&lt&semi;&sol;a&gt&semi; &sol;&sol; เปลี่ยนเป็นภาษาอังกฤษ &NewLine;&lt&semi;a href&equals;"&lbrace;&lbrace; URL&colon;&colon;to&lpar;'change&sol;th'&rpar; &rcub;&rcub;"&gt&semi;THAILAND&lt&semi;&sol;a&gt&semi; &sol;&sol; เปลี่ยนเป็นภาษาไทย &NewLine;&lt&semi;a href&equals;"&lbrace;&lbrace; URL&colon;&colon;to&lpar;'change&sol;jp'&rpar; &rcub;&rcub;"&gt&semi;JAPANESE&lt&semi;&sol;a&gt&semi; &sol;&sol; เปลี่ยนเป็นภาษาญี่ปุ่น &NewLine;&lt&semi;a href&equals;"&lbrace;&lbrace; URL&colon;&colon;to&lpar;'change&sol;ch'&rpar; &rcub;&rcub;"&gt&semi;CHINESE&lt&semi;&sol;a&gt&semi; &sol;&sol; เปลี่ยนเป็นภาษาจีน &NewLine;<&sol;pre>&NewLine;<p>ให้ท่านทดสอบโดยการสร้างไฟล์ home&period;blade&period;php และวางไว้ใน resources&sol;views&sol;home&period;blade&period;php<br &sol;>&NewLine;จากนั้นลองเขียน html ง่าย ๆ เพื่อแสดงภาษาต่าง ๆ ตาม request ที่ส่งเข้ามา โดยสามารถเขียนคร่าว ๆ ได้ดังนี้<&sol;p>&NewLine;<p><strong>resources&sol;views&sol;home&period;blade&period;php<&sol;strong><&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " > &NewLine;&lt&semi;body&gt&semi; &NewLine;&lt&semi;div class&equals;"container"&gt&semi; &NewLine; &lt&semi;ul class&equals;"nav navbar-nav"&gt&semi; &NewLine; &lt&semi;li&gt&semi;&lt&semi;a href&equals;"&num;"&gt&semi;&lbrace;&lbrace; trans&lpar;'message&period;service'&rpar; &rcub;&rcub;&lt&semi;&sol;a&gt&semi;&lt&semi;&sol;li&gt&semi; &NewLine; &lt&semi;li&gt&semi;&lt&semi;a href&equals;"&num;"&gt&semi;&lbrace;&lbrace; trans&lpar;'message&period;portfolio'&rpar; &rcub;&rcub;&lt&semi;&sol;a&gt&semi;&lt&semi;&sol;li&gt&semi; &NewLine; &lt&semi;li&gt&semi;&lt&semi;a href&equals;"&num;"&gt&semi;&lbrace;&lbrace; trans&lpar;'message&period;about'&rpar; &rcub;&rcub;&lt&semi;&sol;a&gt&semi; &lt&semi;&sol;li&gt&semi; &NewLine; &lt&semi;li&gt&semi;&lt&semi;a href&equals;"&num;"&gt&semi;&lbrace;&lbrace; trans&lpar;'message&period;team'&rpar; &rcub;&rcub;&lt&semi;&sol;a&gt&semi;&lt&semi;&sol;li&gt&semi; &NewLine; &lt&semi;li class&equals;"dropdown"&gt&semi; &NewLine; &lt&semi;a class&equals;"dropdown-toggle" id&equals;"dropdownLang" data-toggle&equals;"dropdown"&gt&semi; &NewLine; &lbrace;&lbrace; Config&colon;&colon;get&lpar;'app&period;locale'&rpar; &rcub;&rcub; &NewLine; &lt&semi;span class&equals;"caret"&gt&semi;&lt&semi;&sol;span&gt&semi; &NewLine; &lt&semi;&sol;a&gt&semi; &NewLine; &lt&semi;ul class&equals;"dropdown-menu" aria-labelledby&equals;"dropdownLang"&gt&semi; &NewLine; &lt&semi;li&gt&semi;&lt&semi;a href&equals;"&lbrace;&lbrace; URL&colon;&colon;to&lpar;'change&sol;en'&rpar; &rcub;&rcub;"&gt&semi;ENGLISH&lt&semi;&sol;a&gt&semi;&lt&semi;&sol;li&gt&semi; &NewLine; &lt&semi;li&gt&semi;&lt&semi;a href&equals;"&lbrace;&lbrace; URL&colon;&colon;to&lpar;'change&sol;th'&rpar; &rcub;&rcub;"&gt&semi;THAILAND&lt&semi;&sol;a&gt&semi;&lt&semi;&sol;li&gt&semi; &NewLine; &lt&semi;li&gt&semi;&lt&semi;a href&equals;"&lbrace;&lbrace; URL&colon;&colon;to&lpar;'change&sol;jp'&rpar; &rcub;&rcub;"&gt&semi;JAPANESE&lt&semi;&sol;a&gt&semi;&lt&semi;&sol;li&gt&semi; &NewLine; &lt&semi;li&gt&semi;&lt&semi;a href&equals;"&lbrace;&lbrace; URL&colon;&colon;to&lpar;'change&sol;ch'&rpar; &rcub;&rcub;"&gt&semi;CHINESE&lt&semi;&sol;a&gt&semi;&lt&semi;&sol;li&gt&semi; &NewLine; &lt&semi;&sol;ul&gt&semi; &NewLine; &lt&semi;&sol;li&gt&semi; &NewLine; &lt&semi;&sol;ul&gt&semi; &NewLine; &lt&semi;div class&equals;"row"&gt&semi; &NewLine; &lt&semi;div class&equals;"intro-lead-in"&gt&semi;&lbrace;&lbrace; trans&lpar;'message&period;welcome'&rpar; &rcub;&rcub;&lt&semi;&sol;div&gt&semi; &NewLine; &lt&semi;div class&equals;"intro-heading"&gt&semi;&lbrace;&lbrace; trans&lpar;'message&period;body'&rpar; &rcub;&rcub;&lt&semi;&sol;div&gt&semi; &NewLine; &lt&semi;&sol;div&gt&semi; &NewLine;&lt&semi;&sol;div&gt&semi; &NewLine;&lt&semi;&sol;body&gt&semi;<&sol;pre>&NewLine;<p>เสร็จแล้วครับเว็บไซต์ 4 ภาษา โดยโครงสร้างที่ต้องเพิ่มและแก้ไขสำหรับทำให้เว็บไซต์แสดงผลได้ทั้ง 4 ภาษา<br &sol;>&NewLine;จะมีโครงสร้างไฟล์ ดังนี้ครับ<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >resources&sol;lang&sol;th&sol;message&period;php &sol;&sol; เพิ่ม - สำหรับเก็บภาษาแต่ละภาษา &NewLine;app&sol;Http&sol;routes&period;php &sol;&sol; แก้ไข - สำหรับสร้าง uri เริ่มต้นและเปลี่ยนภาษา &NewLine;app&sol;Http&sol;Middleware&sol;Language&period;php &sol;&sol; เพิ่ม - สำหรับรับ request และตั้งค่าภาษาก่อนโหลดหน้าใหม่ &NewLine;app&sol;Http&sol;Kernel&period;php &sol;&sol; แก้ไข - สำหรับเปิดใช้งาน Middleware ไฟล์ Language&period;php &NewLine;resources&sol;views&sol;home&period;blade&period;php &sol;&sol; เพิ่ม - แสดงภาษาและส่ง request เปลี่ยนภาษา<&sol;pre>&NewLine;<p>ซึ่งท่านสามารถดาวน์โหลดทั้ง 5 ไฟล์เพื่อไปทดสอบการทำงานได้ที่ลิงค์ด้านล่างครับ<&sol;p>&NewLine;<blockquote><p><a href&equals;"http&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;examples&sol;laravel-multi-langauge&period;zip" target&equals;"&lowbar;blank">ดาวน์โหลดไฟล์ตัวอย่าง เปลี่ยนภาษาด้วย Laravel 5<&sol;a><&sol;p><&sol;blockquote>&NewLine;<p><&sol;br><&sol;p>&NewLine;

Exit mobile version