เรียนรู้การพัฒนาเว็บด้วย Yii2–5

หัวข้อนี้จะสอนการใช้งาน Gii ซึ่งเป็นเครื่องมือในการ Generate Code ให้แบบอัตโนมัติ ให้เข้า http://localhost/classic/web/gii จะได้หน้าจอดังรูป

เราจะใช้งานเมนู CRUD Generator ซึ่งจะเป็นตัวช่วยสร้างฟอร์มสำหรับ Create Read Update Delete แบบว่าเพียงแค่คลิกก็สามารถสร้างฟอร์มที่พร้อมใช้งานได้แล้ว ให้เรากำหนดค่าตามนี้เลย จากนั้นกดปุ่ม Preview และ Generate

จะเห็นว่าระบบได้ Generate ไฟล์ต่างๆให้เราดังนี้

generated controllers/EmployeesController.php
generated models/EmployeesSearch.php
generated views/employees/_form.php
generated views/employees/_search.php
generated views/employees/create.php
generated views/employees/index.php
generated views/employees/update.php
generated views/employees/view.php

ลองเรียกใช้งานได้จาก http://localhost/classic/web/employees

  1. ลองปรับแต่ง Gridview กันดู โดยจะเพิ่ม column city ซึ่งเป็นข้อมูลจากตาราง Offices และเพิ่ม Dropdownlist สำหรับ Search
@namespace app\controllers;
public function actionGridview(){
$searchModel=new EmployeesSearch();
$dataProvider=$searchModel->search(Yii::$app->request->queryParams);
return $this->render('gridview',[
'searchModel'=>$searchModel,
'dataProvider'=>$dataProvider
]);
}

@/employees/gridview.php

<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => [
['class' => 'yii\grid\SerialColumn'],

'employeeNumber',
'lastName',
'firstName',
'extension',
'email:email',
[
'attribute'=>'officeCode',
'label' => 'city',
'filter'=>ArrayHelper::map(Offices::find()->all(),'officeCode','city'),
'value'=>function($model){
return $model->office->city;
}
],
['class' => 'yii\grid\ActionColumn'],
],
]); ?>

จากนั้นให้แก้ไข Attributes ของ Employees model
@namespace app\models;

public function attributeLabels()
{
return [
'employeeNumber' => 'รหัสพนักงาน',
'lastName' => 'สกุล',
'firstName' => 'ชื่อ',
'extension' => 'Extension',
'email' => 'Email',
'officeCode' => 'บริษัท',
'reportsTo' => 'Reports To',
'jobTitle' => 'Job Title',
];
}

จะได้ผลลัพธ์ตามรูป

2.การปรับแต่ง action column ให้เหมือน buttonGroup ของ bootstrap จะเห็นว่า buttonGroup มี html ตามรูปแบบนี้

<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
  • ซึ่งเราจะปรับแต่ง action column ใน gridview ให้มีหน้าตาเหมือน button group ทำได้โดยการ wrap class="btn-group" role="group" เข้าไปใน template
  • หรือจะปรับแต่ link ใน action column ก็สามารถทำได้โดยการ overide url เข้าไป
<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => [
['class' => 'yii\grid\SerialColumn'],

'employeeNumber',
'lastName',
'firstName',
'extension',
'email',
[
'attribute'=>'officeCode',
'filter'=>ArrayHelper::map(Offices::find()->all(),'officeCode','city'),
'value'=>function($model){
return $model->office->city;
}
],
[
'class' => 'yii\grid\ActionColumn',
'buttonOptions'=>['class'=>'btn btn-warning'],
'template'=>'<div class="btn-group" role="group"> {view} {update} {delete} </div>',
'options'=> ['style'=>'width:150px;'],
],
[
'class' => 'yii\grid\ActionColumn',
'options'=> ['style'=>'width:120px;'],
'template'=>'{acview}',
'buttons'=>[
'acview' => function($url,$model,$key){
$url=Url::to(['employees/acview','employeeNumber'=>$model->employeeNumber]);
return Html::a('<i class="glyphicon glyphicon-eye-open"></i>',$url);
},
]
],
],
]); ?>
Like what you read? Give Suton Charoensiri a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.