วันจันทร์ที่ 10 กุมภาพันธ์ พ.ศ. 2557

การสร้าง Form ใน Yii Framework

     คราวนี้เราจะกลับไปในส่วนของ 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 ได้
จากนั้นเราจะใช้คำสั่ง
<?php $this->endWidget(); ?>
เพื่อสร้างแท็กปิดให้กับ form

2.การสร้าง textfield  คือช่องสำหรับกรอกข้อมูล เราจะสร้างภายใต้แท็ก form ซึ่งก็คือคลาส CAcitveForm ซึ่งจะถูก Extend จากคลาส CHtml อีกทีครับ เราจะใช้ตัวแปร $form จากข้อ 1 เพื่อเรียกใช้
เมธอด textField ด้วยคำสั่ง $form->textField(Model Valiable,Field Name,Attribute Name);
เช่น
<?php echo $form->textField($model, 'firstName',array('maxlength' => 200, 'style' => 'width:220px;')); ?>

3.การสร้าง textarea คือช่องกรอกข้อมูลที่รองรับข้อมูลจำนวนมากๆ เราจะใช้คำสั่ง $form->textArea(Model Valiable,Field Name,Attribute Name);
เช่น
<?php echo $form->textArea($model, 'note', array('style' => 'width:700px; height:80px;')); ?>

4.การสร้าง checkbox เป็นช่องสี่เหลี่ยมสำหรับติ๊กเลือกหรือไม่เลือกข้อมูล เราจะใช้คำสั่ง $form->checkBox(Model Valiable,Field Name,Attribute Name);
เช่น
<?php echo  $form->checkBox($model, 'is_active',array('value'=>1,'checked'=>'checked')); ?>
คือการกำหนด value ให้ checkbox ชื่อ is_active และติ๊กเลือกให้ก่อนเป็นค่าเริ่มต้น

5.การสร้าง DropDownList หรือ Select/List Menu เป็นลิสต์ข้อมูลสำหรับให้เราเลือกข้อมูลใดข้อมูลนึง เราจะใช้คำสั่ง
$form->dropDownList(Model Valiable,Field Name, Option, First Option); ตัวอย่างการใช้งาน เช่น
<?php echo $form->dropDownList($model,'power', array('On'=>'1','Off'=>'0'), array('empty' => 'เลือกการแสดงผล'));?>

6.การสร้าง File Field เราจะใช้สำหรับในกรณีที่เราต้องอัปโหลดไฟล์ไปเก็บไว้ใน Hosting หรือ Server เราใช้คำสั่ง
$form->fileField(Model Valiable,Field Name,Attribute Name); เช่น
<?php echo $form->fileField($model, 'product_image',array('style'=>'border:1 solid #ccc')); ?>

7.การสร้างปุ่ม Submit และปุ่ม Reset เราสามารถเรียกจากคลาส CHtml โดยตรงได้เลย เช่น
<?php echo CHtml::submitButton('บันทึก'); ?> 
สำหรับปุ่ม reset เราจะใช้คำสั่ง
<?php echo CHtml::resetButton('รีเซต'); ?>

บทความต่อไปผมจะสอนการสร้างฟอร์มสำหรับเพิ่มข้อมูลลงฐานข้อมูล โดยเราจะนำหลักการจากบทความนี้ไปใช้ครับ

2 ความคิดเห็น :

  1. 'enableClientValidation'=>true,
    แล้วมันใช้ยังไงครับ
    มันจะรู้ได้ยังไงว่ามันต้องไปเรียก fn js ชื่อว่าอะไร มีกำหนดไว้แล้วว่าต้องชื่อนี้เท่านั้น หรือให้เราระบุเพิ่มยังไงครับ

    ตอบลบ
    คำตอบ
    1. เป็นคำสั่งเปิด Function ตรวจสอบฟอร์มโดย Javascript ที่ Yii สร้างไว้ให้แล้วครับ
      ถ้าเราเปลี่ยน true เป็น false Javascript จะไม่ตรวจสอบให้ครับ แต่จะให้ PHP ตรวจสอบให้แทนครับ

      ลบ