Tag Archive ปรับแต่ง

Byphunsanit

แก้ validation error ใน YII 2

ฟอร์มของ yii จะมีการแจ้งเตือนถ้าหากพบว่าข้อมูล input ที่เรากรอกใน form ไม่ถูกต้อง โดยจะทำกรอบอินพุต ป้าย label เป็นสีแดงและมีข้อความแสดงใน help-block เพิ่มขึ้นมา บางครั้งก็ทำให้ฟอร์มที่จัดไว้แน่นๆ ไม่ใช่แบบบรรทัดละกล่องข้อความตามแบบเว็บสมัยใหม่ เวลาเจอความผิดพลาด มันก็จะถีบตัวอื่นออกไป หรือดูอัดแน่นเกินไปจนดูไม่สวย

ก็สามารถเอาออกได้โดยใช้ form template เหมือนเดิม โดยยังสามารถทำ validation ได้ตามปกติ

วิธีการคือ

  1. เปิดไฟล์ _form.php ใน view เป้าหมาย
  2. เปลี่ยน
    <?php $form = ActiveForm::begin(['id' => 'login-form']); ?>
    

    เป็น

    <?php $form = ActiveForm::begin([
        'fieldConfig' => [
            'template' => "{label}\n{input}\n{hint}"
        ],
        'id' => 'login-form'
    ]); ?>
    

อย่าลืมเปลี่ยน id นะครับ

ถ้าใช้

use yii\bootstrap\ActiveForm;

ให้เปลี่ยน template เป็น

'template' => "{label}\n{beginWrapper}\n{input}\n{hint}\n{endWrapper}"

Byphunsanit

ติดตั้ง yii 2 advance ผ่าน composer

YII เพิ่งออกเวอร์ชั่น 2 มาวันที่ 12 ตุลาคม พ ศ 2557 เลยเอามาลองของซักหน่อย ก่อนอื่นให้ลง composer สำหรับติดตั้งตามยุคสมัย (จริงๆ โหลด zip มาแตกเองง่ายกว่าด้วยซ้ำไป ถ้าไม่ต้องการใช้ composer ให้โหลด zip มาแล้วข้ามขั้นตอนที่ 1 ไปเลยครับ)

  1. ก่อนอื่น update เจ้า composer ซะก่อนตามธรรมเนียม รีสตาร์ต เพื่อป้องกันปัญหาเปิด command ออกมาพิมพ์
    composer self-update
    

    ลง composer asset plugin ทำครั้งเดียวไม่ต้องทำอีก

    composer global require "fxp/composer-asset-plugin:1.0.0"
    

    โดยปกติ จะสร้าง yii project ได้โดยคำสั่ง

    composer create-project --prefer-dist yiisoft/yii2-app-basic basic
    

    composer จะ copy ไปไว้ใน folder ชื่อ basic งานที่จะทำเหมาะกับ yii Advanced Application Template มากกกว่า ที่ต่างกันคือ

    • แยก Front- and และ back-end apps ระบบใหญ่ๆ ควรแยกไว้เพื่อความสะดวกที่สำคัญ yii สามารถใช้ configuration และ model ร่วมกันได้ ทั้ง 2 ฝั่ง
    • User model มีระบบ login, User signup and password restore เบื้องต้นติดมาด้วย

    และต้องการให้เก็บใน D:\xampp\htdocs\YiiAdvanced ให้เปลี่ยนคำสั่งเป็น

    composer create-project --prefer-dist yiisoft/yii2-app-advanced D:\xampp\htdocs\YiiAdvanced
    
  2. ปรับสภาพแวดล้อมให้ช่วยเขียน code ได้ง่ายขึ้น
    • ไปที่เราติดตั้ง php ไว้ก่อน พิมพ์
      cd c:\xampp\php
      
    • พิมพ์
      php D:\xampp\htdocs\YiiAdvanced\init
      
    • เลือก Development พิมพ์ 0 enter ขึ้นจริง 1 enter
  3. สร้าง database
    • สร้าง database เปล่าๆ ไว้ก่อน ของผมชื่อ YiiAdvanceDB
    • ไปที่ common/config/main-local.php ใน folder ที่เราสร้างไว้ เพิ่ม database connection ใน components ตามตัวอย่าง
          'components' => [
              'db' => [
                  'class' => 'yii\db\Connection',
                  'dsn' => 'mysql:host=localhost;dbname=YiiAdvanceDB',
                  'username' => 'root',
                  'password' => '',
                  'charset' => 'utf8',
              ],
      
    • Command กลับไปที่เราเก็บ project file
      d:
      cd D:\xampp\htdocs\YiiAdvanced
      
    • พิมพ์
      yii migrate

      ตอบ yes ดูในฐานข้อมูล จะมีตาราง user กับ migrate เพิ่มขึ้นมา

การเตรียมโปรเจ็คด้วยยี่สำเร็จแล้ว! หวังว่าคงเข้าใจมากกว่าในคู่มือเว็บ yii นะครับ

Byphunsanit

YII 2 : Horizontal / inline form

ตามปกติ form ของ yii ที่ใช้ GII generate ออกมาจะเป็นรูปแบบ label บรรทัดหนึ่ง input อีกบรรทัดหนึ่ง อ่านง่าย สวยงามพอสมควร แต่อาจจะไม่ถูกใจบรรดาหัวหน้าอนุรักษ์นิยมทั้งหลาย

yii มีอีกทางเลือกให้ใช้ทำฟอร์ม คือ มี Horizontal form ให้เลือกใช้ yii bootstrap activeform (Horizontal form) อีกตัว

วิธีการคือ

  1. เปิดไฟล์ _form.php ใน view เป้าหมาย
  2. เปลี่ยน use yii\widgets\ActiveForm; เป็น use yii\bootstrap\ActiveForm; ถ้าไม่เปลี่ยนจะเจอ error Setting unknown property: yii\widgets\ActiveForm::layout
  3. เปลี่ยน
    $form = ActiveForm::begin();

    เป็น

    $form = ActiveForm::begin([
        'fieldConfig' => [
            'horizontalCssClasses' => [
                'label' => 'col-sm-2',
                'offset' => 'col-sm-offset-2',
                'wrapper' => 'col-sm-10'
            ]
        ],
        'layout' => 'horizontal'
    ]);
  4. สำเร็จแล้ว ฟอร์มจะเปลี่ยนเป็นรูปแบบเหมือนกับ Bootstrap Horizontal form โดย

    • layout คือ จะวางฟอร์มเป็นแบบไหน มีให้เลือก คือ default, horizontal และ inline
    • label คือ ค่า grid ของ label
    • wrapper คือ ความกว้างของช่อง input
    • offset คือ การเว้นระยะของพวก checkbox ตั้งไว้เท่ากับ label จะได้ตรงกันพอดี

    เสร็จแล้ว หรือจะใช้การจัด code แบบของผมก็ได้ครับ ไม่อยากสลับ php เข้าออก ไปๆ มาๆ

    <?php
    
    use yii\helpers\Html;
    use yii\bootstrap\ActiveForm;
    
    ?>
    
    <div class="user-form">
    <?php
    $form = ActiveForm::begin([
        'fieldConfig' => [
            'horizontalCssClasses' => [
                'label' => 'col-sm-2',
                'offset' => 'col-sm-offset-2',
                'wrapper' => 'col-sm-10'
            ]
        ],
        'layout' => 'horizontal'
    ]);
    
    echo $form->field($model, 'username')->textInput(),
    $form->field($model, 'email')->textInput(),
    $form->field($model, 'status')->checkbox(array('label'=>'enable')),
    '<div class="form-group">',Html::submitButton($model->isNewRecord ? Yii::t('app', 'Create') : Yii::t('app', 'Update'), ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']);
    ActiveForm::end();
    echo'</div>';