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

สอน Yii 2 : เริ่มต้นสร้าง View และ Controller

codebee
yii2-framework

yii2-framework

<h3>สอน Yii 2 &colon; เริ่มต้นสร้าง View และ Controller<&sol;h3>&NewLine;<p><&sol;br><br &sol;>&NewLine;Yii เป็น PHP Framework ที่ค่อนข้างซับซ้อนครับ การทำงานในส่วนของ View ยังเต็มไปด้วย Syntax ของ<br &sol;>&NewLine;ภาษาพีเอชพี ถึงแม้ว่าเราอาจจะเลือกที่จะไม่ใช้ก็ตาม แต่ถ้าจะใช้ Yii ให้ได้เต็มความสามารถ ก็จำเป็นต้องมี<br &sol;>&NewLine;พื้นฐานภาษาพีเอชพีที่ดีพอสมควร และถ้าได้ทดลองใช้จนเข้าใจหลักการทำงานของ Yii แล้ว จะเข้าใจว่าไม่ได้ยากเลย<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<&excl;--more--><&sol;p>&NewLine;<p>หลังจากในบทความที่แล้วเราได้ทำ<a href&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;สอน-yii-2-ดาวน์โหลด-ติดตั้งแล&sol;" target&equals;"&lowbar;blank">การติดตั้ง Yii 2 Framework<&sol;a> ไปเรียบร้อยแล้ว ทั้งแบบผ่าน composer และ<br &sol;>&NewLine;ติดตั้งโดยใช้วิธีโหลดไฟล์ zip มาใช้งาน รวมไปถึงการตั้งค่าต่าง ๆ จนได้หน้า Default Page ของเฟรมเวิร์ค<br &sol;>&NewLine;ในบทความนี้เราจะมาทดสอบสร้าง View และ Controller โดยเป็นการสร้างขึ้นมาใหม่ทั้งหมด<br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<h4>เข้าใจ View ใน Yii เบื้องต้น<&sol;h4>&NewLine;<p>การทำงานส่วน view ซึ่งเป็นส่วนที่จะ render พวกไฟล์ html&comma; css&comma; js จะถูกเว็บไว้ในโฟลเด้อ views<br &sol;>&NewLine;โดยในโฟลเด้อ views จะประกอบไปด้วยโฟลเด้อ layouts และโฟลเด้อที่ตั้งตามชื่อ Controller ซึ่งเป็นกฏของ Yii <&sol;p>&NewLine;<p><&sol;br><br &sol;>&NewLine;<strong>ตัวอย่างโครงสร้างของ View ใน Yii<&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;2016&sol;08&sol;สอน-Yii2-Framework-1&period;png" alt&equals;"สอน Yii Framework" &sol;><br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<ul>&NewLine;<li><strong>โฟลเด้อ Layout<&sol;strong><&sol;li>&NewLine;<p>คือส่วนที่ไว้เก็บไฟล์โครงสร้างรูปร่างหลัก ๆ ของเว็บไซต์ เราสามารถสร้าง Layout หลาย ๆ แบบไว้ทำงานในรูปแบบที่แตกต่างกันออกไปได้<&sol;p>&NewLine;<li><strong>โฟลเด้อ site0&comma;site1&comma;site2<&sol;strong><&sol;li>&NewLine;<p>ตั้งชื่อโฟลเด้อตามชื่อ Controller เป็นส่วนที่ไว้เก็บ content ที่จะนำไปแสดงใน Layouts หรือในกรณีที่เราไม่ต้องการใช้งาน Layout ก็สามารถเขียนไฟล์ &period;php ไว้ในโฟลเด้อนี้ได้เลย ซึ่งต่อไปจะกลายเป็น Action Method ใน Controller&NewLine;<&sol;ul>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>เริ่มสร้าง View และ Controller แบบไม่ใช้ Layout<&sol;h4>&NewLine;<p>ให้สร้างไฟล์ UserController และวางไว้ใน controller&sol;UserController&period;php และสร้างโฟลเด้อ user<br &sol;>&NewLine;ตามชื่อของ UserController ใน views&sol;user จากนั้นให้สร้างไฟล์ index&period;php วางไว้ในโฟลเด้อ user<&sol;p>&NewLine;<pre class&equals;"lang&colon;default highlight&colon;0 decode&colon;true " > &NewLine;controllers&sol;UserController&period;php &NewLine;views&sol;user&sol;index&period;php &NewLine;<&sol;pre>&NewLine;<p>ในไฟล์ <strong>controllers&sol;UserController&period;php<&sol;strong> ให้เขียนโค๊ดดังนี้<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >namespace app&bsol;controllers&semi; &NewLine; &NewLine;use Yii&semi; &NewLine;use yii&bsol;web&bsol;Controller&semi; &NewLine; &NewLine;class UserController extends Controller &NewLine;&lbrace; &NewLine; public function actionIndex&lpar;&rpar; &NewLine; &lbrace; &NewLine;&Tab;&Tab;&dollar;this-&gt&semi;layout &equals; false&semi; &NewLine; return &dollar;this-&gt&semi;render&lpar;'index'&rpar;&semi; &NewLine; &rcub; &NewLine;&rcub;<&sol;pre>&NewLine;<ul>&NewLine;<li><strong>actionIndex<&sol;strong><&sol;li>&NewLine;<p> ตั้งชื่อ Method ตามกฏของ Yii ขึ้นต้นด้วย action และตามด้วยชื่อไฟล์ใน view คือ index&period;php<&sol;p>&NewLine;<li><strong>&dollar;this->layout &equals; false<&sol;strong><&sol;li>&NewLine;<p> ยกเลิกการใช้งานระบบ layout ของ Yii คือไฟล์ views&sol;layouts&sol;main&period;php รวมไปถึง layouts อื่น ๆ ด้วย สรุปคือไม่ใช้ระบบ layouts ของ Yii เลย<&sol;p>&NewLine;<li><strong>return &dollar;this->render&lpar;&&num;8216&semi;index&&num;8217&semi;&rpar;&semi;<&sol;strong><&sol;li>&NewLine;<p> สั่ง render ไฟล์ index&period;php ที่อยู่ใน views&sol;user&sol;index&period;php คำสั่งเรนเดอร์ใน Yii เหมือนกับคำสั่ง view&lpar;&rpar; ใน Laravel และ CI&NewLine;<&sol;ul>&NewLine;<p>ใน <strong>views&sol;user&sol;index&period;php<&sol;strong> ให้เขียนโค๊ดดังนี้<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&lt&semi;div class&equals;"site-about"&gt&semi; &NewLine; &lt&semi;p&gt&semi; &NewLine; Hi&comma; I am beginner in Yii นาจาา &NewLine; &lt&semi;&sol;p&gt&semi; &NewLine;&lt&semi;&sol;div&gt&semi;<&sol;pre>&NewLine;<p>จากนั้นให้เข้าไปเปลี่ยนค่า <strong>defaultRoute<&sol;strong> ที่ไฟล์ <strong>vendor&sol;yiisoft&sol;yii2&sol;web&sol;Application&period;php<&sol;strong> ค่าเริ่มต้นของ Yii จะเป็น site ให้เปลี่ยนเป็น user ตามชื่อของ UserController ที่เราสร้างขึ้นมาใหม่<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >public &dollar;defaultRoute &equals; 'user'&semi;<&sol;pre>&NewLine;<p>เสร็จแล้วให้ลองเปิดโปรเจคของเราผ่านเบราซ์เซอร์<&sol;p>&NewLine;<pre class&equals;"lang&colon;default highlight&colon;0 decode&colon;true " >http&colon;&sol;&sol;localhost&sol;yii-application&sol;web&sol;<&sol;pre>&NewLine;<p>ผลลัพธ์ที่ได้ก็จะได้ดังภาพด้านล่างครับ<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;2016&sol;08&sol;สอน-Yii2-Framework-2&period;png" alt&equals;"สอน Yii Framework" &sol;><br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;หน้าตาออกมาดูไม่มีชีวิตชีวาเลยไช่ไหมครับ งั้นลองกลับไปใช้ main layouts ของ Yii ดูครับ วิธีใช้งานก็ไม่ยากครับ<br &sol;>&NewLine;ใช้โค๊ดชุดเดิม ให้ลบ &dollar;this->layout &equals; true&semi; ออกจากจาก UserController&period;php เขียนได้ดังนี้<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<strong>controllers&sol;UserController&period;php <&sol;strong><&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " title&equals;"controllers&sol;UserController&period;php" >namespace app&bsol;controllers&semi; &NewLine; &NewLine;use Yii&semi; &NewLine;use yii&bsol;web&bsol;Controller&semi; &NewLine; &NewLine;class UserController extends Controller &NewLine;&lbrace; &NewLine; public function actionIndex&lpar;&rpar; &NewLine; &lbrace; &NewLine; return &dollar;this-&gt&semi;render&lpar;'index'&rpar;&semi; &NewLine; &rcub; &NewLine;&rcub;<&sol;pre>&NewLine;<p><&sol;br><br &sol;>&NewLine;และเขียนโค๊ดใน views&sol;layouts&sol;main&period;php ได้ดังนี้<br &sol;>&NewLine;<strong>views&sol;layouts&sol;main&period;php<&sol;strong><&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " title&equals;"views&sol;layouts&sol;main&period;php" >use yii&bsol;helpers&bsol;Html&semi; &NewLine;use app&bsol;assets&bsol;AppAsset&semi; &NewLine; &NewLine;AppAsset&colon;&colon;register&lpar;&dollar;this&rpar;&semi; &NewLine;&quest;&gt&semi; &NewLine;&lt&semi;&quest;php &dollar;this-&gt&semi;beginPage&lpar;&rpar; &quest;&gt&semi; &NewLine;&lt&semi;&excl;DOCTYPE html&gt&semi; &NewLine;&lt&semi;html lang&equals;"&lt&semi;&quest;&equals; Yii&colon;&colon;&dollar;app-&gt&semi;language &quest;&gt&semi;"&gt&semi; &NewLine;&lt&semi;head&gt&semi; &NewLine; &lt&semi;meta charset&equals;"&lt&semi;&quest;&equals; Yii&colon;&colon;&dollar;app-&gt&semi;charset &quest;&gt&semi;"&gt&semi; &NewLine; &lt&semi;meta name&equals;"viewport" content&equals;"width&equals;device-width&comma; initial-scale&equals;1"&gt&semi; &NewLine; &lt&semi;&quest;&equals; Html&colon;&colon;csrfMetaTags&lpar;&rpar; &quest;&gt&semi; &NewLine; &lt&semi;title&gt&semi;&lt&semi;&quest;&equals; Html&colon;&colon;encode&lpar;&dollar;this-&gt&semi;title&rpar; &quest;&gt&semi;&lt&semi;&sol;title&gt&semi; &NewLine; &lt&semi;&quest;php &dollar;this-&gt&semi;head&lpar;&rpar; &quest;&gt&semi; &NewLine;&lt&semi;&sol;head&gt&semi; &NewLine;&lt&semi;body&gt&semi; &NewLine;&lt&semi;&quest;php &dollar;this-&gt&semi;beginBody&lpar;&rpar; &quest;&gt&semi; &NewLine;&lt&semi;div class&equals;"wrap"&gt&semi; &NewLine; &lt&semi;div class&equals;"container"&gt&semi; &NewLine; &Tab;&lt&semi;&quest;&equals; &dollar;content &quest;&gt&semi; &NewLine; &lt&semi;&sol;div&gt&semi; &NewLine;&lt&semi;&sol;div&gt&semi; &NewLine;&lt&semi;&quest;php &dollar;this-&gt&semi;endBody&lpar;&rpar; &quest;&gt&semi; &NewLine;&lt&semi;&sol;body&gt&semi; &NewLine;&lt&semi;&sol;html&gt&semi; &NewLine;&lt&semi;&quest;php &dollar;this-&gt&semi;endPage&lpar;&rpar; &quest;&gt&semi;<&sol;pre>&NewLine;<p>ผลลัพธ์ที่ได้ก็จะทำให้เราสามารถใช้งาน Bootstrap Layout ที่ติดมากับ Yii2 ได้ เหตุผลเพราะในไฟล์ layout<br &sol;>&NewLine;คือ main&period;php มีการ include ไฟล์ assets ต่าง ๆ พวก css&comma; js&comma; มาใช้งานเรียบร้อยแล้วนั่นเองครับ<br &sol;>&NewLine;คำถามคือแล้วหน้า views&sol;user&sol;index&period;php มาแสดงได้อย่างไร คำตอบคือมาแสดงตรงบรรทัดนี้ครับ <&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&lt&semi;&quest;&equals; &dollar;content &quest;&gt&semi;<&sol;pre>&NewLine;<p><&sol;br><br &sol;>&NewLine;ปล&period; เพิ่มเติมครับถ้าเราใช้งาน Layout ของ Yii จะเห็นว่าหน้าเว็บเราติด debug toolbar ของ Yii2 มา<br &sol;>&NewLine;วิธีเอาออกก็ให้เราไปเปลี่ยน YII&lowbar;ENV&lowbar;DEV ใน <strong>vendor&sol;yiisoft&sol;yii2&sol;BaseYii&period;php<&sol;strong> จาก dev เป็น prodแค่นี้ debug toolbar ก็จะหายไปแล้วครับ <&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >defined&lpar;'YII&lowbar;ENV&lowbar;DEV'&rpar; or define&lpar;'YII&lowbar;ENV&lowbar;DEV'&comma; YII&lowbar;ENV &equals;&equals;&equals; 'dev'&rpar;&semi;<&sol;pre>&NewLine;<p>จบไว้เท่านี้สำหรับการสร้าง view และ controller รวมไปถึงการตั้งค่าพื้นฐานสำหรับ Yii2 เจอกันในบทความต่อไปครับ<br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;

Exit mobile version