การ Register ไฟล์ JavaScript และ CSS

    เราสามารถ Register ไฟล์ JavaScript และ CSS ในหน้า Layout และหน้าเว็บของเราได้โดยใช้ Script ดังนี้
การ Register Core Script
    เป็นการโหลด Script พื้นฐานโดยตัว Script จะถูกบรรจุอยู่ที่ 

yii/framework/web/js/source 

หากต้องการดูว่าสามารถ Register Script ตัวไหนได้บ้างให้ไปดูได้ที่ไฟล์

framework/web/js/packages.php

วิธีการใช้งานให้ทำการเขียน Code บริเวณที่ต้องการ Register เช่นในส่วน Header ดังนี้ 

Yii::app()->clientScript->registerCoreScript('jquery');

เป็นการ Register ไฟล์ jQuery โดยจะแสดงผลดังนี้

<script type="text/javascript" src="/assets/3869f222/jquery.js"></script>

การ Register JavaScript ไฟล์

    JavaScript ก็เป็น Script อีกอย่างที่ได้ใช้กันค่อนข้างบ่อยมากในการทำ Application โดยมีตัวอย่างของการ Register Script ดังนี้

Yii::app()->clientScript->registerScriptFile(Yii::app()->theme->baseURL.’/assets/js/default.js’,CClientScript::POS_END);

จะได้ผลลัพท์ดังนี้

<script type="text/javascript" src="/themes/hanuman/assets/js/default.js"></script>

    จะเห็นว่ามีคำสั่ง CClientScript::POS_END โดยที่ POS มาจากคำว่า Position นั่นเองครับ นั่นก็แสดงว่าเราสามารถวางตำแหน่งของ Script ของเราได้หลายตำแหน่ง ไปดูกันเลยว่าวางได้ตำแหน่งไหนบ้างครับ

วางที่ Tag Head ของ Application

Yii::app()->clientScript->registerScriptFile(Yii::app()->theme->baseURL.’/assets/js/default.js’,CClientScript::POS_HEAD);

วางหลังจาก Tag Body ของ Application

Yii::app()->clientScript->registerScriptFile(Yii::app()->theme->baseURL.’/assets/js/default.js’,CClientScript::POS_BEGIN);

วางด้านล่างของเว็บก่อนปิด Tag Body

Yii::app()->clientScript->registerScriptFile(Yii::app()->theme->baseURL.’/assets/js/default.js’,CClientScript::POS_END);

การ Register ไฟล์ CSS

    ไฟล์ CSS หรือ Cascade Style Sheet เป็นไฟล์ที่กำหนดรูปแบบของเว็บไซต์ เช่น สีสัน การจัดตำแหน่ง ต่างๆ ใน Application เป็นต้นโดยมีการใช้งานดังนี้

Yii::app()->clientScript->registerCssFile(Yii::app()->theme->baseUrl.'/assets/css/style.css');

จะได้ผลลัพท์ดังนี้

<link rel="stylesheet" type="text/css" href="/themes/hanuman/assets/css/style.css" />

นอกจากนั้นเรายังสามารถเพิ่มรายละเอียดเข้าไปได้ เช่นเป็นการกำหนดว่า CSS นี้เป็นส่วนของ Screen หรือว่าส่วน Print ได้อีกด้วย

Yii::app()->clientScript->registerCssFile(Yii::app()->theme->baseUrl.'/assets/css/print.css', 'print');

จะได้ผลลัพท์ดังนี้

<link rel="stylesheet" type="text/css" href="/themes/ hanuman /assets/css/style.css" media="print" />