Membuat Dependent Dropdown dengan select2 di Yii2 Framework


 

 

salam coding kawan

pada artikel sebelumnya kita telah mempelajari bagaimana membuat select2 pada framework Yii versi 2. kali ini kita akan membahas bagaimana membuat dependent dropdwon pada select2. Dependent dropdown sering digunakan untuk mencari data pada dropdown bertingkat, contoh saat kita ingin mencari data kelurahan kita harus memilih provinsinya, kabupatennnya lau kita bisa mendapatkan data kelurahan yang kita inginkan.berikut struktur database punya saya, bisa anda sesuaikan dengan kebutuhan anda.

tabel provinsi

1. tabel provinsi

CREATE TABLE `tbl_provinsi` (
  `id` int(11) UNSIGNED NOT NULL,
  `provinsi` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `p_bsni` char(5) COLLATE utf8mb4_unicode_ci DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
ALTER TABLE `tbl_provinsi` ADD PRIMARY KEY (`id`); 


2. tabel kabupaten

CREATE TABLE `tbl_kabkot` (
 `id` int(11) UNSIGNED NOT NULL,
 `provinsi_id` int(11) UNSIGNED NOT NULL,
 `kabupaten_kota` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
 `ibukota` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
 `k_bsni` char(3) COLLATE utf8mb4_unicode_ci DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

 ALTER TABLE `tbl_kabkot`
 MODIFY `id` int(11) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=502;
 

 ALTER TABLE `tbl_kabkot`
 ADD PRIMARY KEY (`id`),
 ADD KEY `kabkot` (`kabupaten_kota`) USING BTREE,
 ADD KEY `fk_provs_kabkots_idx` (`provinsi_id`),
 ADD KEY `kbsni` (`k_bsni`) USING BTREE;  


3. tabel kecamatan

CREATE TABLE `tbl_kecamatan` (
 `id` int(11) UNSIGNED NOT NULL,
 `kabkot_id` int(11) UNSIGNED NOT NULL,
 `kecamatan` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

ALTER TABLE `tbl_kecamatan`
 MODIFY `id` int(11) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6993;

ALTER TABLE `tbl_kecamatan`
 ADD PRIMARY KEY (`id`),
 ADD KEY `fk_kabkots_kecs_idx` (`kabkot_id`),
 ADD KEY `kecamatan` (`kecamatan`) USING BTREE;

 

setelah membuat databasenya,  langsung saya kita implementasikan pada koding. buka terminal atau CMD kawan-kawan lalu arahkan pada direktory project yii2 kalian. ketik atau copas coding dibawah ini

php composer.phar require kartik-v/yii2-widget-depdrop "@dev"

kemdian buka file _form pada folder view yang ingin anda buat select2, sisipkan kode berikut pada bagian atas.

use  backend\models\Kabkot;
use  backend\models\Provinsi;
use  backend\models\Kecamatan;
use kartik\depdrop\DepDrop;
use kartik\select2\Select2;
use yii\helpers\Url;

keterangan : baris pertama sampai  ketiga adalah mengambil data model pada provinsi, kabkot, dan kecamatan. kemudia diikuti Depdrop yang baru saja kita install via composer dan select2 yang sudah kita instal pada artikel sebelumnya.

kemudian rubah field provinsi anda seperti dibawah ini

<?=
        $form->field($model, 'provinsi')->widget(Select2::classname(), [
            'data' => ArrayHelper::map(Provinsi::find()->all(), 'id', 'provinsi'),
            'options'=>['placeholder'=>Yii::t('app','Select Company')],
            'pluginOptions' => [
                'allowClear' => true,
            ],
        ]);
    ?>

 

pada field kabkot ubah seperti koding dibawah ini

  <?=
          $form->field($model, 'destination')->widget(DepDrop::classname(), [
          'type'=>DepDrop::TYPE_SELECT2,
          'data'=>[],
          'options'=>['id'=>'retailland-destination', 'placeholder'=>'Select ...'],
          'select2Options'=>[],
          'pluginOptions'=>[
            'depends'=>['retailland-provinsi'],
            'url'=>Url::to(['/retail-land/get']),
            'placeholder'=>Yii::t('app','Cari Distination'),
          ]
      ]);


     ?>

dan field kecamatan menjadi seprti dibawah ini

	<?=
	          $form->field($model, 'kecamatan')->widget(DepDrop::classname(), [
	          'type'=>DepDrop::TYPE_SELECT2,
	          'data'=>[],
	          'options'=>['id'=>'retailland-kecamatan', 'placeholder'=>'Select ...'],
	          'select2Options'=>[],
	          'pluginOptions'=>[
	            'depends'=>['retailland-destination'],
	            'url'=>Url::to(['/retail-land/get-one']),
	            'placeholder'=>Yii::t('app','Cari Kecamatan'),
	          ]
	      ]);
	     ?>

baik bila itu koding yang kita ubah di bagian view, maka sekarang kita implementasikan pada controllernya.  perhatikan pada koding untuk kolom kabupaten ada url ‘url’=>Url::to([‘/retail-land/get’]), maka kita biat action get pada controller kita, buat seperti koding di bawah ini,

 

 public function actionGet()
    {
           $out = [];
               if (isset($_POST['depdrop_parents'])) {
                   $parents = $_POST['depdrop_parents'];
                   if ($parents != null) {
                         $cat_id = $parents[0];
                     $out = \backend\models\Kabkot::find()
                            ->where(['provinsi_id'=>$cat_id])
                            ->select(['id','kabupaten_kota AS name'])->asArray()->all();


                                return Json::encode(['output'=>$out, 'selected'=>'']);
                   }

               }
               return Json::encode(['output'=>'', 'selected'=>'']);
    }
public function actionGetOne()
    {
           $out = [];
               if (isset($_POST['depdrop_parents'])) {
                   $parents = $_POST['depdrop_parents'];
                   if ($parents != null) {
                         $cat_id = $parents[0];
                     $out = \backend\models\Kecamatan::find()
                            ->where(['kabkot_id'=>$cat_id])
                            ->select(['id','kecamatan AS name'])->asArray()->all();


                                return Json::encode(['output'=>$out, 'selected'=>'']);
                   }

               }
               return Json::encode(['output'=>'', 'selected'=>'']);
    }

baik demikian penjelasan dan implementasi untuk dependent dropdwon pada select2 yii framework. bila ada kebingungan dan pertanyaan anda bisa tulis di kolom komentar di bawah.

 

 

terima kasih

salam coding

 

Membuat Dropdown Select2 pada Framework Yii2


 

salam coding kawan!

MENAMBAH SELECT2 PADA TAG INPUT

pada kesempatan kali ini, saya ingin membagi pengalaman tentang mudahnya membuat dropdown select2 pada Yii2. saya asumsikan kawan-kawan sudah bisa menginstal Yii2, kawan-kawan bisa mencari di google bagaimana cara install Yii2 baik manual atau dengan composer. kawan-kawan bisa melihat refrensi lengkapnya di Yii2.

baik kita akan menggunakan Select2 Yii2 dengan memanfaatkan plugin dari kartik. langkah pertama buka terminal atau CMD anda bila anda menggunakan windows. kebutalan saya menggunakan linux ubuntu jadi pada demo kali ini fokus pada terminal linux.

"kartik-v/yii2-widget-select2": "@dev"

perintah diatas otomatis menambah plugin select2 pada folder vendor anda sekaligus pada composer.json. tunggu sampai proses download plugin selesai. Bila sudah selesai buka salah satu file view yang ingin anda tambahkan select2. pada contoh kali ini saya ingin membuat select2 pada data kabupaten milik saya. tambahkan baris perintah dibawah ini untuk memanggil plugin select2

use kartik\select2\Select2;

kemudian pada tag input anda rubah seperti perintah di bawah ini

  <?= $form->field($model, 'origin')->widget(Select2::classname(), [
           'data' => ArrayHelper::map(Kabkot::find()->all(), 'id', 'kabupaten_kota'),
          'options' => ['placeholder' => 'Cari Origin ...'],
          'pluginOptions' => [
              'allowClear' => true
          ],
          ]); ?>

maka otomatis tag input anda akan berubah seperti contoh dibawah ini

 

mudah kan?

MENAMBAH SELECT2 PADA FILTER CGRIDVIEW

ok kawan-kawan. bila kita tadi mengimplementasikan select2 pada tag input kita, kali ini kita akan implementasikan pada cgridview yii2 agar saat memfilter data kita bisa memanfaatkan select2, seperti pada gambar di bawah ini.

 

 

untuk membuat filter cgridview seperti di atas, buka file index.php pada folder view anda. ubah seperti koding dibawah ini.

<?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],
            [
                'attribute' => 'origin',
                'value' => function($data) {
                    return $data->kabkot->kabupaten_kota;
                },
                'filter' => \kartik\select2\Select2::widget([
                    'model' => $searchModel,
                    'attribute' => 'origin',
                    'data' => ArrayHelper::map(Kabkot::find()->all(), 'id', 'kabupaten_kota')
                ]),
            ],
            [
                'attribute' => 'destination',
                'value' => function($data) {
                    return $data->kabkot2->kabupaten_kota;
                },
                'filter' => \kartik\select2\Select2::widget([
                    'model' => $searchModel,
                    'attribute' => 'destination',
                    'data' => ArrayHelper::map(Kabkot::find()->all(), 'id', 'kabupaten_kota')
                ]),
            ],
            'rate',
            'min_weight',
            'lead_time',
            'status',
            ['class' => 'yii\grid\ActionColumn'],
        ],
    ]); ?>

perhatikan pada koding di bawah ini

[
'attribute' => 'origin',
'value' => function($data) {
return $data->kabkot->kabupaten_kota;
},
'filter' => \kartik\select2\Select2::widget([
'model' => $searchModel,
'attribute' => 'origin',
'data' => ArrayHelper::map(Kabkot::find()->all(), 'id', 'kabupaten_kota')
]),
],

nilai yang di ambil pada attribute origin berelasi dengan data kabupaten yang tercantum pada code return $data->kabkot->kabupaten_kota; untuk bisa mengambil data berelasi seperti ini pastikan anda sudah mengsetting pada Model anda. buka file Model anda, pada kesempatan kali ini saya menggunakan Model Retail yang berelasi dengan Model Kabupaten. tambahkan function seperti di bawah ini :

public function getTblKecamatans()
    {
        return $this->hasMany(TblKecamatan::className(), ['kabkot_id' => 'id']);
    }

mudah bukan?

baik terima kasih untuk kunjungannya, bila ada kesulitan anda bisa bertanya pada kolom komentar.

 

SALAM CODING!