การลงทะเบียน (Register) ไฟล์และสคริป CSS JavaScript (Client Script) ใน Web Application ด้วย Yii Framework 2

ในการพัฒนา Web Application นั้น คงหนีไม่พ้นการนำ CSS และ JavaScript หรือเรียกว่าเป็น Client Script หรือสคริปที่ทำงานฝั่งไคลเอนต์ มาใช้งาน ซึ่งแน่นอน Yii Framework 2 มี Bootstrap(CSS, JS) และ jQuery (JavaScript) มาพร้อม สำหรับการใช้งานนั้นในบทเรียนรู้นี้ เรามาเรียนรู้การนำ CSS และ JavaScript มาใช้ใน Web Application ว่าสามารถใช้แบบไหนและตอนไหนบ้าง

http://www.yiiframework.com/doc-2.0/yii-web-view.html

เรียกใช้ผ่าน AssetBundle

สำหรับวิธีการนี้นิยม Register Script ในส่วนการ กำหนดใน Theme Asset สามารถดูวิธีการสร้าง Theme ใน Yii Framework 2 เพิ่มเติมได้ ตัวอย่างเช่น ไฟล์ frontend/themes/hanuman/HanumanAsset.php

<?php
namespace frontend\themes\hanuman;
use yii\web\AssetBundle;

class HanumanAsset extends AssetBundle {

    public $sourcePath = '@frontend/themes/hanuman/assets/'; //กำหนดที่เก็บ Asset(css,js,image)
    
    public $css = [ //กำหนดลงทะเบียนไฟล์ css
    	'css/bootstrap.css',
    	'css/bootstrap-theme.css',
    	'css/style_new.css',
    ];
    
    public $js = [ //กำหนดลงทะเบียนไฟล์ javascript
        'js/jquery.cookie.js',
        'js/treeview.js',
        'js/ready.js',
    ];
    
    public $depends = [ //กำหนดให้ลงทะเบียนหลังจาก Asset เหล่านี้
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
        'yii\bootstrap\BootstrapPluginAsset',
    ];
}

ในหน้า Layout ของ Web Application เช่น frontend/themes/hanuman/views/layouts/main.php ให้เรียก method register() เพื่อลงทะเบียนไฟล์ที่ได้กำหนดใน Class ข้างต้น ดังนี้

<?php
use frontend\themes\hanuman\HanumanAsset;

HanumanAsset::register($this);

//...

เรียกใช้ผ่านการ Register Script

ในหน้า Layout ของ Web Application เช่น frontend/themes/hanuman/views/layouts/main.php ให้เรียกผ่าน method registerXx() ดังนี้

CSS

• $this->registerCss();
• $this->registerCssFile();

JavaScript

• $this->registerJs();
• $this->registerJsFile();

รูปแบบ registerCSS()

public void registerCss ( $css, $options = [], $key = null )

$css คือ สคริป css เช่น "body{margin:0px}" เป็นต้น
$options คือ attribute ของ <style>
$key เป็นตัวจำแนก css code block หากไม่กำหนดจะใช้ $css เป็น key และหากมีการ register code block ที่เหมือนกัน จะใช้ตัวล่าสุด

ตัวอย่าง

$this->registerCss(".test{margin:10px;}");

ผลลัพท์

<style>.test{margin:1px;}</style>

ตัวอย่าง

$this->registerCss(".test{margin:10px;}", ['media' => 'screen', 'type' => 'text/css']);

ผลลัพท์

<style type="text/css" media="screen">.test{margin:10px;}</style>

รูปแบบ registerCssFile()

public void registerCssFile ( $url, $options = [], $key = null )

$url คือที่อยู่ของไฟล์ css
$options คือ attribute สำหรับ tag link หรือ depends ที่จะกำหนดให้ไฟล์ css แสดงหลังอะไร เช่น หลัง bootstrap.css เป็นต้น
$key เป็นตัวจำแนกไฟล์ css  หากไม่กำหนดจะใช้ $url เป็น key และหากมีการ register file ที่เหมือนกัน จะใช้ตัวล่าสุด

ตัวอย่าง การอ้างอิงจาก CDN หรือ ไฟล์จาก URL ภายนอก

$this->registerCssFile('http://bootswatch.com/readable/bootstrap.css');

ผลลัพท์

<link href="http://bootswatch.com/readable/bootstrap.css" rel="stylesheet">

ตัวอย่าง เมื่อต้องการให้ลงทะเบียนอยู่ด้านล่าง bootstrap เพื่อ override

$this->registerCssFile('http://bootswatch.com/readable/bootstrap.css', ['depends' => 'yii\bootstrap\BootstrapAsset']);

ผลลัพท์

<link href="/assets/2f39f50c/css/bootstrap.css" rel="stylesheet">
<link href="http://bootswatch.com/readable/bootstrap.css" rel="stylesheet">

ตัวอย่าง เมื่อต้องการ register จากใน frontend/web/css/style.css

<?php $this->registerCssFile(Yii::getAlias('@web').'/css/style.css')?>

ผลลัพท์

<link href="/css/style.css" rel="stylesheet">

รูปแบบ registerJs()

public void registerJs ( $js, $position = self::POS_READY, $key = null )

$js คือคำสั่ง javascript เช่น alert('ok');
$position คือ ตำแหน่งที่อยู่โดยเริ่มต้นจะอยู่ที่ POS_READY

• POS_HEAD จะอยู่ใน tag head
• POS_BEGIN จะอยู่บน tag body ในส่วน tag เปิด
• POS_END จะอยู่ด้านล่าง tag body
• POS_LOAD จะอยู่ในส่วน jQuery(window).load() และ jQuery จะถูกโหลดอัตโนมัติ
• POS_READY จะอยู่ในส่วน jQuery(document).ready() ซึ่งเป็นค่าเริ่มต้น และ jQuery จะถูกโหลดอัตโนมัติ

$key เป็นตัวจำแนก javascript  หากไม่กำหนดจะใช้ $js เป็น key และหากมีการ register file ที่เหมือนกัน จะใช้ตัวล่าสุด

ตัวอย่าง

$this->registerJs("alert('ok');");

ผลลัพท์

<script type="text/javascript">jQuery(document).ready(function () {
alert('ok');

รูปแบบ registerJsFile()

public void registerJsFile ( $url, $options = [], $key = null )

$url คือที่อยู่ของไฟล์ javascript
$options คือคือ attribute สำหรับ tag script หรือ depends ที่จะกำหนดให้ไฟล์ javascript แสดงหลังอะไร เช่น หลัง jquery.js เป็นต้น

• POS_HEAD จะอยู่ในส่วน head
• POS_BEGIN จะอยู่ก่อน tag body
• POS_END จะอยู่หลังจาก tag body

$key เป็นตัวจำแนกไฟล์ javascript หากไม่กำหนดจะใช้ $url เป็น key และหากมีการ register file ที่เหมือนกัน จะใช้ตัวล่าสุด

ตัวอย่าง

$this->registerJsFile(Yii::getAlias('@web').'/feedbackjs/feedback.js');

ผลลัพท์

<script src="/feedbackjs/feedback.js"></script>

ตัวอย่าง ให้ลงทะเบียนหลัง jQuery ส่วนใหญ่ใช้กับ jQuery Plugin เพราะต้อง load jQuery ก่อน

$this->registerJsFile(Yii::getAlias('@web').'/feedbackjs/feedback.js', ['depends' => [\yii\web\JqueryAsset::className()]]);

ผลลัพท์

<script src="/assets/6c767e21/jquery.js"></script>
<script src="/feedbackjs/feedback.js"></script>

บทสรุป

ในการพัฒนา Web Application นั้นจะเห็นว่าเราได้ทำงานกับ Client Script นั่นก็คือ CSS ซึ่งเป็นการกำหนดรูปแบบของการแสดงผล และ JavaScript ซึ่งเป็น Script ที่ช่วยในการทำงานต่างๆ โดยเราสามารถลงทะเบียน Script ได้หลากหลายรูปแบบ และกำหนดตำแหน่งของการลงทะเบียนได้หลายที่เช่นกัน