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

วิธีทำเว็บไซต์ 2 ภาษา โดยใช้ Dababase อย่างง่าย

codebee
php-codeigniter-framework

php-codeigniter-framework

<h2>วิธีทำเว็บไซต์ 2 ภาษา โดยใช้ Dababase อย่างง่าย<&sol;h2>&NewLine;<p><&sol;br><br &sol;>&NewLine;<strong>วิธีทำเว็บไซต์ 2 ภาษา โดยใช้ Dababase อย่างง่าย<&sol;strong><br &sol;>&NewLine;จากบทความนี้ <a href&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;วิธีทำเว็บ-2-ภาษา-หรือจะท&sol;" target&equals;"&lowbar;blank">https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;วิธีทำเว็บ-2-ภาษา-หรือจะท&sol;<&sol;a> เราได้เรียนรู้วิธีทำเว็บไซต์ 2 ภาษา โดยข้อมูลภาษาที่ได้ เป็นข้อมูลแบบ static คือเป็นข้อมูลแบบคงที่ ไม่ได้มีระบบการอัพเดทเปลี่ยนแปลงจากหลังบ้าน ทุก ๆ ข้อมูลที่แสดงผลจะถูกเก็บไว้ในไฟล์ภาษาของ codeigniter framework <&excl;--more--><&sol;p>&NewLine;<p><&sol;br><br &sol;>&NewLine;ในบทความนี้เราจะมาทดสอบการทำเว็บไซต์ 2 ภาษา แบบที่ดึงข้อมูลจากฐานข้อมูลที่เราออกแบบไว้ ซึ่งการทำเว็บไซต์แบบนี้จะทำให้เราสามารถปรับปรุงเปลี่ยนแปลงข้อมูลในแต่ละภาษาได้ จากการเปลี่ยนแปลงข้อมูลของแต่ละภาษาจากระบบหลังบ้าน การพัฒนาฟังก์ชั่นแบบนี้จะทำให้สะดวกสบายกับผู้ใช้งาน หรือ webmaster ผู้ดูแลเว็บไซต์ ในกรณีที่ต้องการเปลี่ยนข้อมูลการแสดงผลของแต่ละภาษาในเว็บไซต์<br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<h4>เพิ่ม suffix หรือคำลงท้ายให้กับ field ในฐานข้อมูล<&sol;h4>&NewLine;<p>หลักการในการทำเว็บไซต์ที่สามารถรองรับได้หลายภาษาในบทความนี้ ไม่ได้ซับซ้อนยุ่งยากอะไร เป็นหลักการง่าย ๆ เลยคือการเพิ่มคำลงท้ายให้กับฟิลด์ที่ใช้เก็บข้อมูลภาษาของแต่ละภาษา ตัวอย่างเช่น<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<strong>ออกแบบ Field ในตารางฐานข้อมูลให้มี Suffix &lpar; คำลงท้าย &rpar; เป็นตัวย่อของภาษา<&sol;strong><br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2017&sol;03&sol;ทำเว็บไซต์-2-ภาษา-ใช้-database-1&period;png" alt&equals;"ทำเว็บไซต์-2-ภาษา-ใช้-database" &sol;><br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;จากตัวอย่างรูปด้านบน ผมได้ทดลองสร้าง ตารางฐานข้อมูลชื่อว่า blog ในตารางมีด้วยกันทั้งหมด 4 Field คือ <&sol;p>&NewLine;<ul>&NewLine;<li><strong>blog&lowbar;id<&sol;strong> เป็น primary key และ auto increment<&sol;li>&NewLine;<li><strong>content&lowbar;en<&sol;strong> เป็น longtext สำหรับเก็บเนื้อหาภาษาอังกฤษ<&sol;li>&NewLine;<li><strong>content&lowbar;th<&sol;strong> เป็น longtext สำหรับเก็บเนื้อหาภาษาไทย<&sol;li>&NewLine;<li><strong>timestamp<&sol;strong> เป็น timestamp สำหรับเก็บวันเวลาที่สร้างเนื้อหา<&sol;li>&NewLine;<&sol;ul>&NewLine;<p>ในกรณีที่มีมากกว่า 2 ภาษาก็ให้เพิ่ม Field เข้าไปอีกเช่น content&lowbar;fr&comma; content&lowbar;ch&comma; content&lowbar;jp เป็นต้น<br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<h4>สร้าง libraries สำหรับตั้งค่าภาษาเริ่มต้นและเปลี่ยนภาษา<&sol;h4>&NewLine;<p>หลังจากที่เราได้ออกแบบตารางฐานข้อมูลที่มี Field แบบลงท้ายด้วย Suffix ตัวย่อของภาษาเรียบร้อยแล้ว ขั้นตอนต่อไปคือการเรียกมาแสดงผล ตามการเปลี่ยนภาษา เริ่มต้นให้เราสร้าง libraries ขึ้นมา 1 คลาสตั้งชื่อว่า Langlib&period;php ดังนี้<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<strong>applications&sol;libraries&sol;Langlib&period;php<&sol;strong><&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >class Langlib&lbrace; &NewLine;&Tab;&Tab; &NewLine;&Tab;&Tab;private &dollar;CI&semi; &NewLine;&Tab;&Tab;public function &lowbar;&lowbar;construct&lpar;&rpar; &NewLine;&Tab;&Tab;&lbrace; &NewLine;&Tab;&Tab;&Tab;&dollar;this-&gt&semi;CI &equals;&amp&semi; get&lowbar;instance&lpar;&rpar;&semi; &sol;&sol; ประกาศแปรแบบ Sigleton ทำให้เราสามารถเข้าถึงคลาสต่าง ๆ ได้ใน lib นี้ &NewLine;&Tab;&Tab;&rcub; &NewLine;&Tab;&Tab;public function init&lowbar;default&lowbar;language&lpar;&rpar; &sol;&sol; ฟังก์ชั่นสำหรับตรวจสอบภาษาปัจจุบันที่เลือก &NewLine;&Tab;&Tab;&lbrace; &NewLine;&Tab;&Tab;&Tab;if&lpar;&dollar;this-&gt&semi;CI-&gt&semi;session-&gt&semi;userdata&lpar;'lang'&rpar;&equals;&equals;NULL&rpar;&lbrace; &sol;&sol; ถ้าไม่มี session อยู่ให้ค่าเริ่มต้นเป็นภาษาไทย &NewLine;&Tab;&Tab;&Tab;&Tab;&dollar;lang &equals; 'thailand'&semi; &NewLine;&Tab;&Tab;&Tab;&Tab;&dollar;this-&gt&semi;CI-&gt&semi;session-&gt&semi;set&lowbar;userdata&lpar;'lang'&comma;&dollar;lang&rpar;&semi; &NewLine;&Tab;&Tab;&Tab;&rcub;else&lbrace; &NewLine;&Tab;&Tab;&Tab;&Tab;&dollar;lang &equals; &dollar;this-&gt&semi;CI-&gt&semi;session-&gt&semi;userdata&lpar;'lang'&rpar;&semi; &NewLine;&Tab;&Tab;&Tab;&rcub; &NewLine;&Tab;&Tab;&Tab;if&lpar;&dollar;lang &equals;&equals; "thailand"&rpar;&lbrace; &NewLine;&Tab;&Tab;&Tab;&Tab;&dollar;this-&gt&semi;CI-&gt&semi;PAGE&lbrack;'suffix'&rsqb; &equals; "th"&semi; &sol;&sol; ประกาศตัวแปร suffix มีค่าตามภาษานั้น ๆ &NewLine;&Tab;&Tab;&Tab;&rcub;else&lbrace; &NewLine;&Tab;&Tab;&Tab;&Tab;&dollar;this-&gt&semi;CI-&gt&semi;PAGE&lbrack;'suffix'&rsqb; &equals; "en"&semi; &NewLine;&Tab;&Tab;&Tab;&rcub; &NewLine;&Tab;&Tab;&Tab; &NewLine;&Tab;&Tab;&rcub; &NewLine;&Tab;&Tab;public function chooseLang&lpar;&dollar;lang&rpar; &sol;&sol; ใช้สำหรับเปลี่ยนภาษา เปลี่ยนค่าตัวแปร session และ refresh หน้า &NewLine;&Tab;&Tab;&lbrace; &NewLine;&Tab;&Tab;&Tab;&dollar;this-&gt&semi;CI-&gt&semi;session-&gt&semi;set&lowbar;userdata&lpar;'lang'&comma;&dollar;lang&rpar;&semi; &NewLine;&Tab;&Tab;&Tab;redirect&lpar;&dollar;this-&gt&semi;CI-&gt&semi;router-&gt&semi;class&comma;'refresh'&rpar;&semi; &NewLine;&Tab;&Tab;&rcub; &NewLine;&Tab;&rcub;<&sol;pre>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>สร้าง Controller และเรียกใช้งาน langlib<&sol;h4>&NewLine;<p><strong>applications&sol;controllers&sol;welcome&period;php<&sol;strong><&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >class Welcome extends CI&lowbar;Controller &lbrace; &NewLine; &NewLine;&Tab;public &dollar;PAGE&semi; &NewLine;&Tab;public function &lowbar;&lowbar;construct&lpar;&rpar; &lbrace; &NewLine; &Tab;&Tab;parent&colon;&colon;&lowbar;&lowbar;construct&lpar;&rpar;&semi; &NewLine; &Tab;&Tab;&dollar;this-&gt&semi;langlib-&gt&semi;init&lowbar;default&lowbar;language&lpar;&rpar;&semi; &sol;&sol; เรียกใช้งาน init&lowbar;default&lowbar;language ในทุก ๆ Controller &NewLine; &Tab;&rcub; &NewLine;&Tab;public function index&lpar;&rpar; &NewLine;&Tab;&lbrace; &NewLine;&Tab;&Tab;&dollar;query &equals; &dollar;this-&gt&semi;db-&gt&semi;query&lpar;'SELECT &ast; FROM blog'&rpar;&semi; &NewLine; &dollar;this-&gt&semi;PAGE&lbrack;'blog'&rsqb; &equals; &dollar;query-&gt&semi;result&lowbar;array&lpar;&rpar;&semi; &NewLine;&Tab;&Tab;&dollar;this-&gt&semi;load-&gt&semi;view&lpar;'welcome&lowbar;message'&comma;&dollar;this-&gt&semi;PAGE&rpar;&semi; &sol;&sol; ส่งตัวแปร suffix ไปในทุก ๆ view &NewLine;&Tab;&rcub; &NewLine;&Tab;public function change&lpar;&dollar;type&rpar; &NewLine;&Tab;&lbrace; &NewLine;&Tab;&Tab;&dollar;this-&gt&semi;langlib-&gt&semi;chooseLang&lpar;&dollar;type&rpar;&semi; &sol;&sol; ใช้สำหรับเปลี่ยนภาษาในทุก ๆ controller &NewLine;&Tab;&rcub; &NewLine;&rcub;<&sol;pre>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>การใช้งานในส่วนของ view<&sol;h4>&NewLine;<p><strong>applications&sol;views&sol;welcome&lowbar;message&period;php<&sol;strong><&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&lt&semi;&quest;php &dollar;CI &equals;&amp&semi; get&lowbar;instance&lpar;&rpar;&semi; &quest;&gt&semi; &NewLine;&Tab;&lt&semi;div id&equals;"body"&gt&semi; &NewLine;&Tab;&Tab;&lt&semi;p&gt&semi; &NewLine; &Tab;&lt&semi;a href&equals;"&lt&semi;&quest;php echo &dollar;CI-&gt&semi;router-&gt&semi;class&period;"&sol;change&sol;thailand"&semi; &quest;&gt&semi;"&gt&semi;TH&lt&semi;&sol;a&gt&semi; &vert; &NewLine; &Tab;&lt&semi;a href&equals;"&lt&semi;&quest;php echo &dollar;CI-&gt&semi;router-&gt&semi;class&period;"&sol;change&sol;english"&semi; &quest;&gt&semi;"&gt&semi;EN&lt&semi;&sol;a&gt&semi; &NewLine; &lt&semi;&sol;p&gt&semi; &NewLine;&Tab;&Tab;&lt&semi;&quest;php &NewLine;&Tab;&Tab;&Tab;foreach&lpar;&dollar;blog as &dollar;row&rpar;&lbrace; &NewLine;&Tab;&Tab;&Tab;&Tab;&dollar;content &equals; &dollar;row&lbrack;'content&lowbar;'&period;&dollar;suffix&rsqb;&semi; &sol;&sol; มี suffix ต่อท้ายฟิลด์เสมอ &NewLine;&Tab;&Tab;&Tab;&rcub; &NewLine;&Tab;&Tab;&quest;&gt&semi; &NewLine;&Tab;&Tab;&lt&semi;p&gt&semi;&lt&semi;&quest;&equals;&dollar;content&semi; &quest;&gt&semi;&lt&semi;&sol;p&gt&semi; &NewLine;&Tab;&lt&semi;&sol;div&gt&semi;<&sol;pre>&NewLine;<p><&sol;br><&sol;p>&NewLine;<p><strong>ตัวอย่างการทำงาน<&sol;strong><br &sol;>&NewLine;<iframe width&equals;"560" height&equals;"315" src&equals;"https&colon;&sol;&sol;www&period;youtube&period;com&sol;embed&sol;w3W&lowbar;tx0NFd4" frameborder&equals;"0" allowfullscreen><&sol;iframe><&sol;p>&NewLine;<blockquote><p><a href&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;examples&sol;multilang&lowbar;database&sol;multilang&lowbar;database&period;zip" target&equals;"&lowbar;blank"><strong>ดาวน์โหลดตัวอย่าง<&sol;strong><&sol;a><&sol;p><&sol;blockquote>&NewLine;<p><&sol;br><&sol;p>&NewLine;

Exit mobile version