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

yii2-framework
yii2-framework

สอน 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 ไว้เจอกันในบทความต่อไปครับ