Sekarang kita akan membuat DropDown Search dengan menggunakan tools yang disediakan oleh vendor kartik-v yaitu Yii2 Select2 Widget.
1. Install Yii2 Widget Select2 dengan memberikan perintah ini pada directory advanced :
|
1 |
$ sudo php composer.phar require kartik-v/yii2-widget-select2 "@dev" |
2. Modifikasi file _form.php yang berada di folder \backend\views\branches dengan menambahkan
|
1 |
<span class="pl-s1"><span class="pl-k">use</span> <span class="pl-c1">kartik\select2\Select2</span>;</span> |
dan copy paste dari web kartik :
|
1 2 3 4 5 6 7 8 |
<span class="pl-s1"><span class="pl-c1">echo</span> <span class="pl-smi">$form</span><span class="pl-k">-></span>field(<span class="pl-smi">$model</span>, <span class="pl-s"><span class="pl-pds">'</span>state_1<span class="pl-pds">'</span></span>)<span class="pl-k">-></span>widget(<span class="pl-c1">Select2</span><span class="pl-k">::</span>classname(), [</span> <span class="pl-s1"> <span class="pl-s"><span class="pl-pds">'</span>data<span class="pl-pds">'</span></span> <span class="pl-k">=></span> <span class="pl-smi">$data</span>,</span> <span class="pl-s1"> <span class="pl-s"><span class="pl-pds">'</span>language<span class="pl-pds">'</span></span> <span class="pl-k">=></span> <span class="pl-s"><span class="pl-pds">'</span>de<span class="pl-pds">'</span></span>,</span> <span class="pl-s1"> <span class="pl-s"><span class="pl-pds">'</span>options<span class="pl-pds">'</span></span> <span class="pl-k">=></span> [<span class="pl-s"><span class="pl-pds">'</span>placeholder<span class="pl-pds">'</span></span> <span class="pl-k">=></span> <span class="pl-s"><span class="pl-pds">'</span>Select a state ...<span class="pl-pds">'</span></span>],</span> <span class="pl-s1"> <span class="pl-s"><span class="pl-pds">'</span>pluginOptions<span class="pl-pds">'</span></span> <span class="pl-k">=></span> [</span> <span class="pl-s1"> <span class="pl-s"><span class="pl-pds">'</span>allowClear<span class="pl-pds">'</span></span> <span class="pl-k">=></span> <span class="pl-c1">true</span></span> <span class="pl-s1"> ],</span> <span class="pl-s1">]);</span> |
Ganti $data sehingga filenya menjadi seperti ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<?php use yii\helpers\Html; use yii\widgets\ActiveForm; use yii\helpers\ArrayHelper; use backend\models\Companies; use kartik\select2\Select2; /* @var $this yii\web\View */ /* @var $model backend\models\Branches */ /* @var $form yii\widgets\ActiveForm */ ?> <div class="branches-form"> <?php $form = ActiveForm::begin(); ?> <?= $form->field($model, 'companies_company_id')->widget(Select2::classname(), [ 'data' => ArrayHelper::map(Companies::find()->all(),'company_id','company_name'), 'language' => 'en', 'options' => ['placeholder' => 'Pilih Company'], 'pluginOptions' => [ 'allowClear' => true ], ]); ?> <?= $form->field($model, 'branch_name')->textInput(['maxlength' => true]) ?> <?= $form->field($model, 'branch_address')->textInput(['maxlength' => true]) ?> <?= $form->field($model, 'branch_status')->dropDownList([ 'active' => 'Active', 'inactive' => 'Inactive', ], ['prompt' => 'Status']) ?> <div class="form-group"> <?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?> </div> <?php ActiveForm::end(); ?> </div> |
Maka tampilan akan berubah menjadi sebagai berikut :
Tutorial ini sebagai dokumentasi dan pembelajaran pribadi sekalian belajar terjemahin bahasa Inggris, dan siapa tahu bermanfaat buat orang lain. Sumber lengkapnya diambil dari Youtube DoingITEasy Channel.