การปรับแต่งฟอร์ม Yii2 RadioList

มาถึงการปรับแต่งฟอร์มซะที จบหัวข้อนี้ เราต้องขอไปแนะนำTips Yii2
นุ่นนี่นั่น เลยนะคะ เพราะเข้าใจว่า ทุกท่านคงรำคาญโพสต์พื้นฐานพอสมควร 55+
เริ่มจากเข้าตามพาทlocalhost/basic/web/index.php?r=employee

จะเห็นตามรูปที่ 1 คลิกที่ปุ่มเมนู create Employee จะlinkไปที่หน้าฟอร์มบันทึกข้อมูล
ตามรูปที่2 เราจะมาจัดการฟอร์มนี้ล่ะให้มันสวยงามน่าใช้ยิ่งขึ้น โดยค่าเริ่มต้นYii จะสร้างหน้าฟอร์ม
มาให้แบบในรูป2 คือเป็นคอลัมภ์เดียวเรียงจากบนลงล่าง
เราจะทำ3-4แบบเนาะ พอเป็นตัวอย่าง แบบแรกฟิลด์ sex จะทำเป็นradioList
ให้เลือกคลิกได้ ไปเปิดโปรจ็คตามรูปที่3 เลยค่ะ แล้วแก้ไขโค้ด

<?= $form->field($model, 'sex')->textInput() ?>

ให้เป็น

<?= $form->field($model, 'sex')->label('เพศ')
->radioList(array('1'=>'ชาย',2=>'หญิง')); ?>

ลองรันหน้าเวบดูเป็นยังไงมั้งค่ะ แจ่มมั๊ย อิอิ
ต่อไปฟิลด์ Birthday เราจะใส่ปฎิทิน ซึ่งอันนี้เราต้องติดตั้งextensionsเพิ่มชื่อ
Jui date picker การติดตั้งก็ไม่ยากค่ะ เปิดไฟล์ basic/composer.json
ขึ้นมา เพิ่ม โค้ด "yiisoft/yii2-jui": "*"
ตามรูปที่4 จากนั้น เปิด command cd เข้าไปหาโปรเจ็คแล้วรันคำสั่ง composer update
ตามรูปที่ 5 เรียบร้อยแล้วไปที่โค้ดโปรเจ็คกันต่อค่ะ แก้ไข โค้ด

<?= $form->field($model, 'birthday')->textInput() ?>

แก้ไขเป็น

<?= $form->field($model,'birthday')->label('วันเกิด')->widget(\yii\jui\DatePicker::classname(),[
'language' => 'th',
'dateFormat' => 'yyyy-MM-dd',
'clientOptions' => [
'changeMonth' => true,
'changeYear' => true,
],
'options'=>['class'=>'form-control'
],
]);
?>
จากนั้นรันหน้าเวบดูค่ะ คลิกที่ช่อง วันเกิด จะเห็นรูปปฎิทินให้เราคลิกเลือกอย่างสวยงาม จากการแก้ไข2ฟิลด์ข้างต้นท่านต้องได้ผลออกมาตามรูปที่6
ใครไม่ได้ลองทบทวนดูอีกทีนะคะ
ที่นี้เรามาจัดlayoutsกันใหม่ใหม่ดูสวยงามยิ่งขึ้น งานนี้เราต้องใช้แท็ก <div></div>
เข้ามาช่วยค่ะ ลองดูตามโค้ดนี้เลยนะคะ

<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4">
</div>
<div class="col-xs-4 col-sm-4 col-md-4">
</div>
<div class="col-xs-4 col-sm-4 col-md-4">
</div>
</div>

เราใช้แท็กนี้ล่ะปรับแต่งฟอร์มของเรา อยากได้กี่แถวกี่คอลัมภ์ก็ว่ากันไปตามสไตส์ใครเราเลย
ส่วนเราสไตส์นี้ ตัวอย่างโค้ดรูปที่ 7 และผลจะต้องออกมาตามรูปที่ 8
โอเค คงพอเข้าใจคอนเซ็ปกันบ้างแล้ว พื้นฐานค่ะ ไม่อยากเอามะพร้าวมาขายสวน
ต่อไปเราจะแนะนำเกี่ยวกับเทคนิคเล็กๆน้อยๆให้นำไปปรับแต่งโปรเจ็คให้เหมาะสมกับการใช้งาน
ตามคุณสมบัติแต่ละโปรเจ็คกัน เครรร ...รอตามตอนต่อไปค่ะ !!!!

+5