yii2-framework

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

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



หลาย ๆ บทความที่ผ่านมา เราได้ทำความเข้าใจการทำงานของ Yii2 โดยเน้นให้เข้าใจโครงสร้างการทำงานโดยรวม
ในรูปแบบ Model (M) View (V) และ Controller (C) ซึ่งก็น่าจะพอเข้าใจและเขียนกันได้บ้างแล้วไช่ไหมครับ
อีกบทบาทหนึ่งที่สำคัญในการพัฒนาเว็บไซต์คือ “หน้าตา” และ “รูปร่าง” ของเว็บไซต์นั้นก็คือส่วนของการจัดการกับ
assets file ทั้งหมด ทั้ง CSS, JS และ Fonts



ให้ท่านผู้อ่านอิงโครงสร้างไฟล์จากบทความที่ผ่าน ๆ มานะครับ นั่นหมายความว่าเราจะมีไฟล์หลัก ๆ อยู่ 3 ไฟล์ดังนี้


สร้างไฟล์ CSS และ js

ไฟล์ css และ js จะต้องถูกวางไว้ในโฟลเด้อ web โดยให้สร้าง sub folder ขึ้นมาดังนี้ครับ

จากนั้นให้ทดสอบโดยการสร้างไฟล์ main.css และ main.js และวางไว้ตามโฟลเด้อ โดยให้เขียนโค๊ดดังนี้
web/css/main.css

web/js/main.js


เพิ่ม Path js และ css

เมื่อเราได้ทั้งไฟล์ main.css และ main.js และทั้ง 2 ไฟล์ถูกวางไว้ภายใน web/ ลำดับต่อไปเราเพียงแค่
ไปเพิ่ม path และเปิดใช้งานหรือ register assets ที่ view นั้น ๆ ครับ เปิดไฟล์ assets/AppAsset.php และเพิ่ม url เข้าไปดังนี้ครับ


assets/AppAsset.php


Register Assets ให้ใช้งานได้ที่ View นั้น ๆ

หลังจากที่เราได้สร้างไฟล์ และเพิ่มเข้าไปใน AppAsset เรียบร้อยแล้วขั้นตอนต่อไปให้เราทำการ Register assets
ให้สามารถใช้งานได้ที่ View นั้น ๆ โดยให้เปิดไปที่ไฟล์ views/user/index.php และเขียนคำสั่งบนสุดของไฟล์ดังนี้

ในส่วนเนื้อหาของหน้า index.php ให้เราเรียกใช้งาน main_container ที่เราได้ออกแบบหน้าตาไว้ใน main.css

ยังไม่จบครับ การที่ AppAsset::register($this) จะสามารถทำงานได้นั้น หน้า view ของเราจะต้องระบุ
ตำแหน่ง เริ่มต้น/สิ้นสุด html แท็กหลัก ๆ คือ html, body และ head ซึ่งจะสามารถเขียนโค๊ดได้ดังนี้ครับ


view/user/index.php


ใช้งาน Fonts

วิธีใช้งาน fonts ใน Yii ไม่มีอะไรพิเศษครับ เราสามารถเรียกใช้ในไฟล์ css ได้แบบไม่ต้องเพิ่ม path เลย
ให้ทดลองสร้างโฟลเด้อใน web/fonts/ และวางฟอนต์ที่เราต้องการใช้งานไว้ในโฟลเด้อ จากนั้นแก้ main.css ดังนี้


web/css/main.css

เหมือนจะยุ่งยากไช่ไหม แต่ถ้าได้ลองทำจริง ๆ ใช้เวลาไม่นานครับ และเพียงเท่านี้เราก็จะสามารถปรับแต่งหน้าตา
ของเว็บไซต์เราได้อย่างเต็มประสิทภาพและตรงตามที่ทางฝั่งดีไซเนอร์และ front-end dev เขาได้ออกแบบมาแบบไม่ผิดเพี้ยน
จบไว้เท่านี้ครับสำหรับเรื่องการใช้งาน assets file ใน Yii2 Framework ไว้เจอกันในบทความต่อไปครับ

กระทู้ใกล้เคียง

สอน Yii 2 : ติดต่อฐานข้อมูล MySQL และ Insert ข้อมู... สอน Yii 2 : ติดต่อฐานข้อมูล MySQL และ Insert ข้อมูล การเชื่อมต่อฐานข้อมูลและการ Query ข้อมูลสำหรับ Yii Framework ค่อนข้างจะสะดวกสบายครับ เราสามารถส...
สอน Yii 2 : เริ่มต้นสร้าง View และ Controller... สอน Yii 2 : เริ่มต้นสร้าง View และ Controller Yii เป็น PHP Framework ที่ค่อนข้างซับซ้อนครับ การทำงานในส่วนของ View ยังเต็มไปด้วย Syntax ของ ภาษาพี...
สอน Yii 2 : ใช้งาน Model ร่วมกับ View และ Controll... สอน Yii 2 : ใช้งาน Model ร่วมกับ View และ Controller หน้าที่หลักของ models คือการจัดการกับชุดข้อมูลต่าง ๆ ภายในเว็บไซต์ จากนั้นก็รอรับคำสั่งให้จากส...
สอน Yii 2 : ดาวน์โหลด ติดตั้งและสร้างโปรเจค... สอน Yii 2 Framework : ดาวน์โหลด ติดตั้งและสร้างโปรเจค Yii 2 Framework ย่อมาจากคำว่า "Yes It Is" เป็นอีกหนึ่ง PHP MVC Framework ที่ได้รับความนิยม ไ...