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

สอน Yii 2 : ใช้งาน assets ไฟล์ JS CSS และ fonts

codebee
yii2-framework

yii2-framework

<h3>สอน Yii 2 &colon; ใช้งาน assets ไฟล์ JS CSS และ fonts<&sol;h3>&NewLine;<p><&sol;br><br &sol;>&NewLine;หลาย ๆ บทความที่ผ่านมา เราได้ทำความเข้าใจการทำงานของ Yii2 โดยเน้นให้เข้าใจโครงสร้างการทำงานโดยรวม<br &sol;>&NewLine;ในรูปแบบ Model &lpar;M&rpar; View &lpar;V&rpar; และ Controller &lpar;C&rpar; ซึ่งก็น่าจะพอเข้าใจและเขียนกันได้บ้างแล้วไช่ไหมครับ<br &sol;>&NewLine;อีกบทบาทหนึ่งที่สำคัญในการพัฒนาเว็บไซต์คือ &&num;8220&semi;หน้าตา&&num;8221&semi; และ &&num;8220&semi;รูปร่าง&&num;8221&semi; ของเว็บไซต์นั้นก็คือส่วนของการจัดการกับ<br &sol;>&NewLine;assets file ทั้งหมด ทั้ง CSS&comma; JS และ Fonts<br &sol;>&NewLine;<&excl;--more--><&sol;p>&NewLine;<p><&sol;br><br &sol;>&NewLine;ให้ท่านผู้อ่านอิงโครงสร้างไฟล์จากบทความที่ผ่าน ๆ มานะครับ นั่นหมายความว่าเราจะมีไฟล์หลัก ๆ อยู่ 3 ไฟล์ดังนี้<&sol;p>&NewLine;<pre class&equals;"lang&colon;default highlight&colon;0 decode&colon;true " >models&sol;User&period;php &sol;&sol; ส่วน models class &NewLine;views&sol;user&sol;index&period;php &sol;&sol; ส่วน view html &NewLine;controllers&sol;UserController&period;php &sol;&sol; ส่วน controller class<&sol;pre>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>สร้างไฟล์ CSS และ js<&sol;h4>&NewLine;<p>ไฟล์ css และ js จะต้องถูกวางไว้ในโฟลเด้อ web โดยให้สร้าง sub folder ขึ้นมาดังนี้ครับ<&sol;p>&NewLine;<pre class&equals;"lang&colon;default highlight&colon;0 decode&colon;true " > &NewLine;web&sol;css&sol;main&period;css &NewLine;web&sol;js&sol;main&period;js &NewLine;<&sol;pre>&NewLine;<p>จากนั้นให้ทดสอบโดยการสร้างไฟล์ main&period;css และ main&period;js และวางไว้ตามโฟลเด้อ โดยให้เขียนโค๊ดดังนี้<br &sol;>&NewLine;<strong>web&sol;css&sol;main&period;css<&sol;strong><&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&period;main&lowbar;container&lbrace; &NewLine;&Tab;padding&colon;100px&semi; &NewLine;&Tab;background-color&colon;&num;FFF&semi;&Tab; &NewLine;&rcub;<&sol;pre>&NewLine;<p><strong>web&sol;js&sol;main&period;js<&sol;strong><&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >var css&lowbar;id &equals; setTimeout&lpar;changeBackground&comma;2000&rpar;&semi; &NewLine;function changeBackground&lpar;&rpar;&lbrace; &NewLine;&Tab;clearTimeout&lpar;css&lowbar;id&rpar;&semi; &NewLine;&Tab;&dollar;&lpar;"&period;main&lowbar;container"&rpar;&period;css&lpar;"background-color"&comma;"&num;CCC"&rpar;&semi;&Tab; &NewLine;&rcub;<&sol;pre>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>เพิ่ม Path js และ css<&sol;h4>&NewLine;<p>เมื่อเราได้ทั้งไฟล์ main&period;css และ main&period;js และทั้ง 2 ไฟล์ถูกวางไว้ภายใน web&sol; ลำดับต่อไปเราเพียงแค่<br &sol;>&NewLine;ไปเพิ่ม path และเปิดใช้งานหรือ register assets ที่ view นั้น ๆ ครับ เปิดไฟล์ <strong>assets&sol;AppAsset&period;php<&sol;strong> และเพิ่ม url เข้าไปดังนี้ครับ<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<strong>assets&sol;AppAsset&period;php<&sol;strong><&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >class AppAsset extends AssetBundle &NewLine;&lbrace; &NewLine; public &dollar;basePath &equals; '&commat;webroot'&semi; &NewLine; public &dollar;baseUrl &equals; '&commat;web'&semi; &NewLine; public &dollar;css &equals; &lbrack; &NewLine; 'css&sol;main&period;css'&comma; &NewLine; &rsqb;&semi; &NewLine; public &dollar;js &equals; &lbrack; &NewLine;&Tab;&Tab;'js&sol;main&period;js'&comma; &NewLine; &rsqb;&semi; &NewLine; public &dollar;depends &equals; &lbrack; &NewLine; 'yii&bsol;web&bsol;YiiAsset'&comma; &NewLine; 'yii&bsol;bootstrap&bsol;BootstrapAsset'&comma; &NewLine; &rsqb;&semi; &NewLine;&rcub;<&sol;pre>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>Register Assets ให้ใช้งานได้ที่ View นั้น ๆ <&sol;h4>&NewLine;<p>หลังจากที่เราได้สร้างไฟล์ และเพิ่มเข้าไปใน AppAsset เรียบร้อยแล้วขั้นตอนต่อไปให้เราทำการ Register assets<br &sol;>&NewLine;ให้สามารถใช้งานได้ที่ View นั้น ๆ โดยให้เปิดไปที่ไฟล์ views&sol;user&sol;index&period;php และเขียนคำสั่งบนสุดของไฟล์ดังนี้<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " > &NewLine;use app&bsol;assets&bsol;AppAsset&semi; &NewLine;AppAsset&colon;&colon;register&lpar;&dollar;this&rpar;&semi; &NewLine;<&sol;pre>&NewLine;<p>ในส่วนเนื้อหาของหน้า index&period;php ให้เราเรียกใช้งาน main&lowbar;container ที่เราได้ออกแบบหน้าตาไว้ใน main&period;css<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&lt&semi;div class&equals;"main&lowbar;container"&gt&semi; &NewLine; พื้นที่สำหรับใส่เนื้อหาหลักเว็บไซต์ &NewLine;&lt&semi;&sol;div&gt&semi;<&sol;pre>&NewLine;<p>ยังไม่จบครับ การที่ AppAsset&colon;&colon;register&lpar;&dollar;this&rpar; จะสามารถทำงานได้นั้น หน้า view ของเราจะต้องระบุ<br &sol;>&NewLine;ตำแหน่ง เริ่มต้น&sol;สิ้นสุด html แท็กหลัก ๆ คือ html&comma; body และ head ซึ่งจะสามารถเขียนโค๊ดได้ดังนี้ครับ<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<strong>view&sol;user&sol;index&period;php<&sol;strong><&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&lt&semi;&quest;php &NewLine;use app&bsol;assets&bsol;AppAsset&semi; &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&gt&semi; &NewLine;&lt&semi;head&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;"main&lowbar;container"&gt&semi; &NewLine; พื้นที่สำหรับใส่เนื้อหาหลักเว็บไซต์ &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><&sol;br><&sol;p>&NewLine;<h4>ใช้งาน Fonts <&sol;h4>&NewLine;<p>วิธีใช้งาน fonts ใน Yii ไม่มีอะไรพิเศษครับ เราสามารถเรียกใช้ในไฟล์ css ได้แบบไม่ต้องเพิ่ม path เลย<br &sol;>&NewLine;ให้ทดลองสร้างโฟลเด้อใน web&sol;fonts&sol; และวางฟอนต์ที่เราต้องการใช้งานไว้ในโฟลเด้อ จากนั้นแก้ main&period;css ดังนี้<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<strong>web&sol;css&sol;main&period;css<&sol;strong><&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " title&equals;"web&sol;css&sol;main&period;css" >&commat;font-face &lbrace; &NewLine; font-family&colon; 'thsarabunnew'&semi; &NewLine; src&colon; url&lpar;'&period;&period;&sol;fonts&sol;thsarabunnew-webfont&period;eot'&rpar;&semi; &NewLine; src&colon; url&lpar;'&period;&period;&sol;fonts&sol;thsarabunnew-webfont&period;eot&quest;&num;iefix'&rpar; format&lpar;'embedded-opentype'&rpar;&comma; &NewLine; url&lpar;'&period;&period;&sol;fonts&sol;thsarabunnew-webfont&period;woff'&rpar; format&lpar;'woff'&rpar;&comma; &NewLine; url&lpar;'&period;&period;&sol;fonts&sol;thsarabunnew-webfont&period;ttf'&rpar; format&lpar;'truetype'&rpar;&semi; &NewLine; font-weight&colon; normal&semi; &NewLine; font-style&colon; normal&semi; &NewLine; &NewLine;&rcub; &NewLine;&period;main&lowbar;container&lbrace; &NewLine;&Tab;font-family&colon;"thsarabunnew"&semi; &NewLine;&Tab;padding&colon;100px&semi; &NewLine;&Tab;background-color&colon;&num;FFF&semi;&Tab; &NewLine;&rcub;<&sol;pre>&NewLine;<p>เหมือนจะยุ่งยากไช่ไหม แต่ถ้าได้ลองทำจริง ๆ ใช้เวลาไม่นานครับ และเพียงเท่านี้เราก็จะสามารถปรับแต่งหน้าตา<br &sol;>&NewLine;ของเว็บไซต์เราได้อย่างเต็มประสิทภาพและตรงตามที่ทางฝั่งดีไซเนอร์และ front-end dev เขาได้ออกแบบมาแบบไม่ผิดเพี้ยน<br &sol;>&NewLine;จบไว้เท่านี้ครับสำหรับเรื่องการใช้งาน assets file ใน Yii2 Framework ไว้เจอกันในบทความต่อไปครับ<br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;

Exit mobile version