ปรับแต่ง – PlusMagi's Blog By Pitt Phunsanit

ActiveForm, adjust, bootstrap, custom, error, form, input, label, notification, Template, validation, YII2, การแจ้งเตือน, ปรับแต่ง, ป้าย, แม่แบบ

แก้ validation error ใน YII 2

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

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

วิธีการคือ

เปิดไฟล์ _form.php ใน view เป้าหมาย

เปลี่ยน

<?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

advanced, back-end, composer, configuration, environment, front-end, initialize, installation, yii, YII2, ขั้นสูง, คอมโพสเซอร์, ติดตั้ง, ปรับแต่ง, ยี, สภาพแวดล้อม, หน้าบ้าน, หลังบ้าน, เริ่มต้น

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

YII เพิ่งออกเวอร์ชั่น 2 มาวันที่ 12 ตุลาคม พ ศ 2557 เลยเอามาลองของซักหน่อย ก่อนอื่นให้ลง composer สำหรับติดตั้งตามยุคสมัย (จริงๆ โหลด zip มาแตกเองง่ายกว่าด้วยซ้ำไป ถ้าไม่ต้องการใช้ composer ให้โหลด zip มาแล้วข้ามขั้นตอนที่ 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
```
ปรับสภาพแวดล้อมให้ช่วยเขียน code ได้ง่ายขึ้น
- ไปที่เราติดตั้ง php ไว้ก่อน พิมพ์
```
cd c:\xampp\php
```
- พิมพ์
```
php D:\xampp\htdocs\YiiAdvanced\init
```
- เลือก Development พิมพ์ 0 enter ขึ้นจริง 1 enter
สร้าง 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

ActiveForm, adjust, bootstrap, custom, default, form, horizontal, inline, input, label, Template, YII2, ปรับแต่ง, ป้าย, แม่แบบ

YII 2 : Horizontal / inline form

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

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

วิธีการคือ

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

เปลี่ยน

$form = ActiveForm::begin();

เป็น

$form = ActiveForm::begin([
    'fieldConfig' => [
        'horizontalCssClasses' => [
            'label' => 'col-sm-2',
            'offset' => 'col-sm-offset-2',
            'wrapper' => 'col-sm-10'
        ]
    ],
    'layout' => 'horizontal'
]);

สำเร็จแล้ว ฟอร์มจะเปลี่ยนเป็นรูปแบบเหมือนกับ 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>';

Tag Archive ปรับแต่ง

แก้ validation error ใน YII 2

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

YII 2 : Horizontal / inline form