สอน Yii 2 : ใช้งาน assets ไฟล์ JS CSS และ fonts
หลาย ๆ บทความที่ผ่านมา เราได้ทำความเข้าใจการทำงานของ Yii2 โดยเน้นให้เข้าใจโครงสร้างการทำงานโดยรวม
ในรูปแบบ Model (M) View (V) และ Controller (C) ซึ่งก็น่าจะพอเข้าใจและเขียนกันได้บ้างแล้วไช่ไหมครับ
อีกบทบาทหนึ่งที่สำคัญในการพัฒนาเว็บไซต์คือ “หน้าตา” และ “รูปร่าง” ของเว็บไซต์นั้นก็คือส่วนของการจัดการกับ
assets file ทั้งหมด ทั้ง CSS, JS และ Fonts
ให้ท่านผู้อ่านอิงโครงสร้างไฟล์จากบทความที่ผ่าน ๆ มานะครับ นั่นหมายความว่าเราจะมีไฟล์หลัก ๆ อยู่ 3 ไฟล์ดังนี้
models/User.php // ส่วน models class views/user/index.php // ส่วน view html controllers/UserController.php // ส่วน controller class
สร้างไฟล์ CSS และ js
ไฟล์ css และ js จะต้องถูกวางไว้ในโฟลเด้อ web โดยให้สร้าง sub folder ขึ้นมาดังนี้ครับ
web/css/main.css web/js/main.js
จากนั้นให้ทดสอบโดยการสร้างไฟล์ main.css และ main.js และวางไว้ตามโฟลเด้อ โดยให้เขียนโค๊ดดังนี้
web/css/main.css
.main_container{ padding:100px; background-color:#FFF; }
web/js/main.js
var css_id = setTimeout(changeBackground,2000); function changeBackground(){ clearTimeout(css_id); $(".main_container").css("background-color","#CCC"); }
เพิ่ม Path js และ css
เมื่อเราได้ทั้งไฟล์ main.css และ main.js และทั้ง 2 ไฟล์ถูกวางไว้ภายใน web/ ลำดับต่อไปเราเพียงแค่
ไปเพิ่ม path และเปิดใช้งานหรือ register assets ที่ view นั้น ๆ ครับ เปิดไฟล์ assets/AppAsset.php และเพิ่ม url เข้าไปดังนี้ครับ
assets/AppAsset.php
class AppAsset extends AssetBundle { public $basePath = '@webroot'; public $baseUrl = '@web'; public $css = [ 'css/main.css', ]; public $js = [ 'js/main.js', ]; public $depends = [ 'yii\web\YiiAsset', 'yii\bootstrap\BootstrapAsset', ]; }
Register Assets ให้ใช้งานได้ที่ View นั้น ๆ
หลังจากที่เราได้สร้างไฟล์ และเพิ่มเข้าไปใน AppAsset เรียบร้อยแล้วขั้นตอนต่อไปให้เราทำการ Register assets
ให้สามารถใช้งานได้ที่ View นั้น ๆ โดยให้เปิดไปที่ไฟล์ views/user/index.php และเขียนคำสั่งบนสุดของไฟล์ดังนี้
use app\assets\AppAsset; AppAsset::register($this);
ในส่วนเนื้อหาของหน้า index.php ให้เราเรียกใช้งาน main_container ที่เราได้ออกแบบหน้าตาไว้ใน main.css
<div class="main_container"> พื้นที่สำหรับใส่เนื้อหาหลักเว็บไซต์ </div>
ยังไม่จบครับ การที่ AppAsset::register($this) จะสามารถทำงานได้นั้น หน้า view ของเราจะต้องระบุ
ตำแหน่ง เริ่มต้น/สิ้นสุด html แท็กหลัก ๆ คือ html, body และ head ซึ่งจะสามารถเขียนโค๊ดได้ดังนี้ครับ
view/user/index.php
<?php use app\assets\AppAsset; AppAsset::register($this); ?> <?php $this->beginPage() ?> <!DOCTYPE html> <html> <head> <?php $this->head() ?> </head> <body> <?php $this->beginBody() ?> <div class="main_container"> พื้นที่สำหรับใส่เนื้อหาหลักเว็บไซต์ </div> <?php $this->endBody() ?> </body> </html> <?php $this->endPage() ?>
ใช้งาน Fonts
วิธีใช้งาน fonts ใน Yii ไม่มีอะไรพิเศษครับ เราสามารถเรียกใช้ในไฟล์ css ได้แบบไม่ต้องเพิ่ม path เลย
ให้ทดลองสร้างโฟลเด้อใน web/fonts/ และวางฟอนต์ที่เราต้องการใช้งานไว้ในโฟลเด้อ จากนั้นแก้ main.css ดังนี้
web/css/main.css
@font-face { font-family: 'thsarabunnew'; src: url('../fonts/thsarabunnew-webfont.eot'); src: url('../fonts/thsarabunnew-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/thsarabunnew-webfont.woff') format('woff'), url('../fonts/thsarabunnew-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } .main_container{ font-family:"thsarabunnew"; padding:100px; background-color:#FFF; }
เหมือนจะยุ่งยากไช่ไหม แต่ถ้าได้ลองทำจริง ๆ ใช้เวลาไม่นานครับ และเพียงเท่านี้เราก็จะสามารถปรับแต่งหน้าตา
ของเว็บไซต์เราได้อย่างเต็มประสิทภาพและตรงตามที่ทางฝั่งดีไซเนอร์และ front-end dev เขาได้ออกแบบมาแบบไม่ผิดเพี้ยน
จบไว้เท่านี้ครับสำหรับเรื่องการใช้งาน assets file ใน Yii2 Framework ไว้เจอกันในบทความต่อไปครับ