วันจันทร์ที่ 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('รีเซต'); ?>

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

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

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

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

      ลบ
  2. สวัสดีค่ะ คืออยากขอสอบถามหน่อยยนะคะ ถ้าจะส่งค่าจาก form บันทึกขอมูล หลายๆ form พร้อมกับ ติ๊ก Check blocks นะคะ ไปแสดงอีกหน้าหนึ่ง ต้องใช้ หลักการอย่างไรคะ ของ yii2 นะคะ ต้องใช้หลักการอย่างไร

    ตอบลบ