คราวนี้เราจะกลับไปในส่วนของ views ของ
Yii Framework (
PHP Framework) อีกครั้งครับ ซึ่งเป็นส่วนแสดงผลและส่วน GUI ของ Web Application ของเราครับ
ดังนั้นเราจะต้องสร้างส่วนโต้ตอบกับผู้ใช้งาน เราจะต้องสร้างช่องกรอกข้อมุล textfield,texarea , ปุ่มบันทึกข้อมูล ,เช็กบ๊อก,ลิสต์เมนู (Select/List Menu) ฯลฯ ได้จากตรงส่วนนี้ครับ
บทความนี้ผมจึงอยากจะ
สอนการสร้างแท็กคอนโทรลต่างๆ โดยจะเรียกใช้ widget CActiveForm ซึ่งถูก Extend จากคลาส CHtml อีกที
1.การสร้าง form จากคลาส
CActiveForm โดยเราจะเรียกผ่าน
beginWidget ด้วยคำสั่งเช่น
<?php $form = $this->beginWidget('CActiveForm', array(
'id'=>'user-form',
'enableAjaxValidation'=>true,
'enableClientValidation'=>true,
'focus'=>array($model,'firstName'),
'clientOptions' => array('validateOnSubmit' => true),
'htmlOptions' => array(
'enctype' => 'multipart/form-data',
)
)); ?>
user-form คือแอททิบิว id ของ แท็ก form เราสามารถกำหนดชื่อได้จากตรงนี้
enableAjaxValidation คือการตรวจสอบข้อมูลแบบ AJAX ซึ่งจะมีประโยชน์ตอนที่เราต้องการตรวจสอบข้อมูลบางอย่างที่ต้องพึ่่งการประมวลจาก Server โดยไม่ต้องการให้หน้า
เว็บไซต์รีเฟรช เช่น การตรวจสอบรหัส Captcha,Username หรือ Email เพื่อป้องกันการซ้ำกันของข้อมูล เป็นต้น เราจะใช้ true หรือ false เพื่อเปิดหรือปิดการ
ทำงาน
enableClientValidation คือการตรวจสอบข้อมูลจากฝั่ง Client หรือพูดง่ายๆคือใช้ Javascript ตรวจสอบนั้นเอง สำหรับตรวจสอบข้อมูลแบบง่ายๆ โดยที่ไม่จำเป็นต้องส่งไปให้ Server หรือ Host ตรวจสอบ เช่น เช็คช่องว่างของ textfield,ตรวจสอบจำนวนข้อมูลว่ากรอกสั้นหรือยาวเกินไปหรือป่าว เป็นต้นเราจะใช้ true หรือ false เพื่อเปิดหรือปิดการ
ทำงานเช่นกัน
focus คือจุดที่เคอร์เซอร์ (Cursor) แสดงจุดแรกในขณะ
เว็บถูกโหลดเสร็จ เราจะเรียกว่า จุดโฟกัส นั่นเองครับ จากตัวอย่าง เราจะส่งตัวแปร $model ซึ่งจะถูก render จาก controller และ firstName คือชื่อของ textfield ที่เราจะโฟกัส
clientOptions คือการกำหนดการ
ทำงานบางอย่างในส่วนของ Client เช่น validateOnSubmit' => true หมายถึงให้ตรวจสอบข้อมูลในขณะที่กดปุ่ม submit
htmlOptions คือการกำหนดการทำงานของแท็ก form ว่าให้สามารถส่งค่าอะไรได้บ้าง เช่น 'enctype' => 'multipart/form-data' หมายถึงสามารถส่งข้อมูลจำพวกไฟล์ต่างๆ เพื่อสามารถอัปโหลดไปไว้บน server ได้
