สอนทำระบบสมัครสมาชิกด้วย Yii Framework ตอนที่ 1 การ Validation Form

     หลังจากที่ได้สอนพื้นฐานการสร้างฟอร์มคร่าวๆไปแล้ว ในบทความก่อนหน้านี้ ว่าด้วยเรื่องของ การสร้าง Form ใน Yii Framework
     คราวนี้จะสอนการตรวจสอบข้อมูลจากฟอร์มหรือ Form Validation กันบ้างครับ และจะทำให้เราเห็นการทำงานของ MVC ของ Yii Framework ได้ชัดเจนยิ้งขึ้น เพราะจะต้องใช้ทั้งสามส่วนเพื่อทำงานร่วมกันครับ สำหรับการ Validation ข้อมูล จะเป็นหน้าที่ Model ครับ โดย Controller จะทำหน้าที่รับข้อมูลจากฟอร์ม    ที่ได้จากส่วนของ Views แล้วส่งไปให้ Class Validation ของ model ตรวจสอบอีกที
      Validate ของ Yii Framework จะมีการตรวจสอบที่ค่อนข้างจะยืนหยุ่นเป็นอย่างมาก รองรับการตรวจสอบแบบ Pattern โดยใช้ Regular Expression เข้ามาช่วยก็ได้ การตรวจสอบไฟล์หรือรูปภาพที่อัพโหลดเข้ามา เช่น ตรวจสอบนามสกุลไฟล์ , ขนาดของไฟล์ , ชื่อไฟล์ซ้ำ ฯลฯ โดยที่เราไม่ต้องเขียนโค๊ดเองเลย ทำให้สะดวกเป็นอย่างมาก และที่ผมชอบที่สุด คือ การกำหนดอ็อพชั่นที่ชื่อว่า on เช่น array('product_image','required',on=>'forInsert');  จะหมายถึงให้ตรวจสอบรูปสินค้าตอนเพิ่มสินค้าเท่านั้น  ว่ามีรูปสินค้าหรือป่าว เหมือนบังคับว่าต้องเลือกรูปสินค้าด้วยนะ ส่วนตอนอัพเดทสินค้าก็ไม่จำเป็นต้องตรวจสอบรูปสินค้า เพราะลูกค้าอาจไม่ต้องการเปลี่ยนรูปสินค้า แต่เราจะตรวจสอบอย่างอื่นเกี่ยวกับรูปภาพแทน เช่น ตรวจนามสกุล ในกรณีที่ลูกค้าต้องการอัพเดทรูป

1.อันดับแรก เราจะสร้างฐานข้อมูลกันก่อนครับ ผมจะสร้างเทเบิลชื่อ users และฐานข้อมูลชื่อ db_yii ดังรูป

2.เมื่อเราสร้างฐานข้อมูลและเทเบิล users เสร็จแล้ว เราจะเข้าไปในส่วนของ Yii Code Generator โดยพิมพ์ต่อท้าย URL ว่า index.php?r=gii แล้วใส่รหัสผ่านให้เรียบร้อย ศึกษาเพิ่มเติมจาก -> Yii Framework กับการเชื่อมต่อกับฐานข้อมูล MySQL และการใช้งาน Gii Generator
เราจะสร้างส่วนของ model ให้กับ yii ก่อนครับ โดยไปที่เมนู  Model Generator กำหนดค่าดังรูป

Table Name หมายถึงให้เรากรอกชื่อเทเบิลในฐานข้อมูลของเราเข้า ซึ่งเทเบิลที่ผมสร้างชื่อ users นั่นเอง


3.หลังจากที่เราสร้าง model ให้กับ yii framework เรียบร้อยแล้ว ต่อมาเราจะสร้าง controller กันครับ ผมจะสร้างชื่อ Controller ว่า Users เราจะกำหนดดังรูป

เราจะได้ไฟล์ชื่อว่า UsersController.php ซึ่งจะอยู่ในโฟลเดอร์ controllers นั่นเอง

3.จากนั้นเราจะสร้างส่วนของ views ซึ่งก็คือส่วนของการแสดงผลของเว็บไซต์ครับ ในที่นี้เราจะให้แสดง Form สำหรับกรอกข้อมูลสมัครสมาชิก ให้เลือกเมนู Form Generator ดังรูป

ให้กรอกชื่อ Model Class ที่มีอยู่ในโปรเจ็คของเรา ของผมคือ Users ซึ่งก็คือ model ของเทเบิลชื่อ users นั่นเองครับ
สำหรับ View Name  ให้เราระบุพาธที่จะให้เก็บไฟล์ในส่วนของ views ครับ จากตัวอย่างผมระบุ users/register หมายถึง
มันจะสร้างโฟลเดอร์ชื่อ users ในโฟลเดอร์ views และไฟล์ register.php ครับ
ส่วน Scenario หมายถึง เราจะเรียกใช้ เมธอด rules  ของ model  ในส่วนไหนได้บ้าง โดยเราจะกำหนด on=register ท่านจะเห็นภาพการใช้งาน Scenario อีกที ในเนื้อหาด้านล่างนี้ครับ

จากนั้นให้กด Generate เราจะได้โค๊ดในส่วนของ controller มาให้ดังรูป

ให้เรา Copy โค๊ดตรงนี้ไปไว้ใน usersController.php ทั้งหมด ดังรูป

เมื่อเราได้ทั้งสามส่วนแล้ว ซึ่งก็คือ MVC นั่นเอง ต่อมาเราจะมาแก้ไขโค๊ดในส่วนของ views กันก่อนครับ

1.ให้เปิดไฟล์ register.php เราจะแก้ไขโค๊ดให้เป็นดังนี้

<div class="form">

<?php  $form = $this->beginWidget('CActiveForm', array(
'id' => 'users-register-form',
'enableAjaxValidation' => false,
'enableClientValidation' => true,
'clientOptions' => array('validateOnSubmit' => true),
'htmlOptions' => array(
'enctype' => 'multipart/form-data',
)
));  ?>

 <p class="note">Fields with <span class="required">*</span> are required.</p>

 <?php echo $form->errorSummary($model); ?>

 <div class="row">
  <?php echo $form->labelEx($model,'username'); ?>
  <?php echo $form->textField($model,'username'); ?>
  <?php echo $form->error($model,'username'); ?>
 </div>

 <div class="row">
  <?php echo $form->labelEx($model,'password'); ?>
  <?php echo $form->textField($model,'password'); ?>
  <?php echo $form->error($model,'password'); ?>
 </div>

 <div class="row">
  <?php echo $form->labelEx($model,'repassword'); ?>
  <?php echo $form->textField($model,'repassword'); ?>
  <?php echo $form->error($model,'repassword'); ?>
 </div>

 <div class="row">
  <?php echo $form->labelEx($model,'user_tel'); ?>
  <?php echo $form->textField($model,'user_tel'); ?>
  <?php echo $form->error($model,'user_tel'); ?>
 </div>

 
 <div class="row">
  <?php echo $form->labelEx($model,'user_email'); ?>
  <?php echo $form->textField($model,'user_email'); ?>
  <?php echo $form->error($model,'user_email'); ?>
 </div>

 <div class="row">
  <?php echo $form->labelEx($model,'fullname'); ?>
  <?php echo $form->textField($model,'fullname'); ?>
  <?php echo $form->error($model,'fullname'); ?>
 </div>

 <div class="row">
  <?php echo $form->labelEx($model,'user_sex'); ?>
       <?php  echo $form->dropDownList($model,'user_sex',array('1'=>'ชาย','2'=>'หญิง'),array('empty' => 'เลือกเพศ'));?>
  <?php echo $form->error($model,'user_sex'); ?>
 </div>

 <div class="row">
  <?php echo $form->labelEx($model,'user_address'); ?>
  <?php echo $form->textArea($model,'user_address'); ?>
  <?php echo $form->error($model,'user_address'); ?>
 </div>
    <div class="row">
  <?php echo $form->labelEx($model,'user_pic'); ?>
  <?php echo $form->fileField($model,'user_pic'); ?>
  <?php echo $form->error($model,'user_pic'); ?>
 </div>



 <div class="row buttons">
  <?php echo CHtml::submitButton('Submit'); ?>
 </div>

<?php $this->endWidget(); ?>

</div>

2.จากนั้นผมจะแก้ไขในส่วนของ model โดยเปิดไฟล์ชื่อ Users.php ขึ้นมา และแก้ไขคำสั่งในเมธอด rules ดังนี้

    public function rules() {
        return array(
            array('username,password,repassword,user_tel,user_email,fullname,user_sex,user_address', 'required', 'on' => 'register'),
            //ตรวจสอบ username, password  ตาม pattern รองรับแค่ a-z พิมพ์เล็กหรือพิมพ์ใหญ่และตัวเลขเท่านั้น
            array('username, password', 'match', 'pattern' => '/^[A-Za-z0-9_]+$/u', 'message' => 'ข้อมูลต้องเป็นตัวอักษรหรือตัวเลขเท่านั้น','on' => 'register'),
            //ตรวจสอบว่ากรอก password ตรงกันทั้งสองช่องหรือป่าว
            array('repassword', 'compare', 'compareAttribute' => 'password','on' => 'register'),
            //ตรวจสอบการซ้ำของ Username กับ Email
            array('username,user_email', 'unique', 'className' => 'User', 'message' => '{attribute} "{value}" มีอยู่ในระบบแล้ว','on' => 'register'),
            //กรอกเบอร์โทรเป็นตัวเลขเท่านั้น เช่น 08123456
            array('user_tel', 'numerical'),
            //ตรวจสอบรูปประจำตัวรองรับไฟล์ jpg gif png และขนาดไฟล์ไม่เกิน 1MB (1024*1024) และจะใส่หรือไม่ใส่รูปประจำตัวก็ได้ (allowEmpty=>true)
            array('user_pic', 'file', 'types' => 'jpg, gif, png', 'maxSize' => 1024 * 1024, 'tooLarge' => 'ขนาดไฟล์เกิน1MB', 'allowEmpty' => true),
        );
    }

จากนั้นให้ RUN ดูผลลัพธ์ โดยพิมพ์ต่อท้าย URL ว่า index.php?r=users/register จะได้ผลลัพธ์ดังรูป

เมื่อเรากดปุ่ม Submit แล้วกรอกข้อมูลไม่ถูกต้องจะได้ผลลัพธ์ดังรูป