Yii 2 - Dependent Dropdown

alfa6661
- December 23, 2015
5 (1 votes)
Rate :
Cara membuat dependent dropdown menggunakan Yii2 Framework

Kode ini merupakan contoh kode untuk membuat Dependent Dropdown. Dependent Dropdown atau dropdown yang saling terkait memungkinkan kita untuk membuat dropdown yang saling berelasi antara satu dengan yang lainnya, Sebagai contoh, ada 4 dropdown yang harus berhubungan antara lain provinsi, kabupaten, kecamatan dan kelurahan. Ketika dropdown provinsi dipilih, data kabupaten yang akan ditampilkan harus kabupaten dari provinsi yang dipilih, dst.

Pada kode kali ini, kita akan membahas bagaimana membuat dependent dropdown menggunakan Yii Framework. Saya asumsikan kita sudah menyiapkan semua model yang di perlukan.

Langkah pertama, siapkan input dropdown. Pada contoh kali ini kita akan menggunakan 4 dropdown antara lain untuk provinsi, kabuaten, kecamatan dan kelurahan.

<?= $form->field($model, 'province_id')->dropDownList([], [
	'prompt' => Yii::t('app', 'Select Province'),
	'id' => 'province_id',
	'class' => 'dependent-input form-control',
	'data-next' => 'regency_id'
]) ?>

pada kode diatas bisa kita lihat,saya menambahkan beberapa options untuk dropdown provinsi. kita perlu mengatur id, class dan custom html attribute dengan nama data-next.

id id akan digunakan sebagai penanda dropdown mana yang sedang dipilih.
class Ini akan digunakan sebagai selector untuk menangani event change pada dropdown
data-next Ini akan digunakan sebagai target id / dropdown yang mana yang akan diupdate setelah event change.

Ajax Request

Selanjutnya kita perlu mendeskripsikan sebuah event on change pada dropdown yang akan melakukan ajax request untuk mendapatkan data yang sesuai.

$(".dependent-input").on("change", function() {
	var value = $(this).val(),
		obj = $(this).attr("id"),
		next = $(this).attr("data-next");
	$.ajax({
		url: url,
		data: {value: value, obj: obj},
		type: "POST",
		success: function(data) {
			$("#" + next).html(data);
		}
	});
});

Kode diatas akan melakukan ajax request ketika nilai dropdown berubah. Data yang akan dikirimkan ke controller adalah nilai / id dari dropdown terpilih dan id dari dropdown yang diterima controller sebagai obj. obj ini nantinya akan digunakan sebagai pembanding model mana yang akan kita gunakan. Contoh, jika nilai obj adalah province_id, dropdown selanjutnya akan menampilkan data dari hasil query model Regency. jika nilai obj adalah regency_id, dropdown selanjutnya akan menampilkan data dari hasil query model District, dst.

Kode lengkap untuk form

Khusus untuk provinsi, kita akan langsung mengisi nilainya. Untuk dropdown lainnya akan diisi menggunakan response dari ajax.

<?php
use yii\bootstrap\ActiveForm;
use yii\helpers\ArrayHelper;
$js = '$(".dependent-input").on("change", function() {
	var value = $(this).val(),
		obj = $(this).attr("id"),
		next = $(this).attr("data-next");
	$.ajax({
		url: "' . Yii::$app->urlManager->createUrl('dependent-dropdown/get') . '",
		data: {value: value, obj: obj},
		type: "POST",
		success: function(data) {
			$("#" + next).html(data);
		}
	});
});';
$this->registerJs($js);
?>
<div class="form">
	<?php $form = ActiveForm::begin(); ?>
		<?= $form->field($model, 'province_id')->dropDownList(ArrayHelper::map($provinces, 'id', 'name'), [
			'prompt' => Yii::t('app', 'Select Province'),
			'id' => 'province_id',
			'class' => 'dependent-input form-control',
			'data-next' => 'regency_id'
		]) ?>
		<?= $form->field($model, 'regency_id')->dropDownList([], [
			'prompt' => Yii::t('app', 'Select Regency'),
			'id' => 'regency_id',
			'class' => 'dependent-input form-control',
			'data-next' => 'district_id'
		]) ?>
		<?= $form->field($model, 'district_id')->dropDownList([], [
			'prompt' => Yii::t('app', 'Select District'),
			'id' => 'district_id',
			'class' => 'dependent-input form-control',
			'data-next' => 'village_id'
		]) ?>
		<?= $form->field($model, 'village_id')->dropDownList([], [
			'prompt' => Yii::t('app', 'Select Village'),
			'id' => 'village_id'
		]) ?>
	<?php ActiveForm::end(); ?>
</div><!-- form -->

Controller

Di controller, kita perlu mengolah data hasil kiriman dari form yang diterima pada action get.

public function actionGet()
{
	$request = Yii::$app->request;
	$obj = $request->post('obj');
	$value = $request->post('value');
	switch ($obj) {
		case 'province_id':
			$data = Regency::find()->where([$obj => $value])->all();
			break;
		case 'regency_id':
			$data = District::find()->where([$obj => $value])->all();
			break;
		case 'district_id':
			$data = Village::find()->where([$obj => $value])->all();
			break;
	}
	$tagOptions = ['prompt' => "=== Select ==="];
	return Html::renderSelectOptions([], ArrayHelper::map($data, 'id', 'name'), $tagOptions);
}

Install

  1. Setelah source code di download, extract hasil download di direktori web server
  2. Konfigurasi database
  3. masuk ke command line, kemudian jalankan perintah composer update.
  4. masih di command line, Jalankan perintah yii/migrate
  5. Saya menyertakan dump sql pada file download. Untuk menggunakannya gunakan perintah yii data/dump

Computer science education cannot make anybody an expert programmer any more than studying brushes and pigment can make somebody an expert painter

– Eric S. Raymond

Have a better explanation?

If you have comments about this post. Please write your comments below

  • hendrikus_richardo - posted 1 year ago
    public function actionCreate()
        {


             $model = new Pmi();


            if ($model->load(Yii::$app->request->post()) && $model->save()) {
                return $this->redirect(['view', 'id' => $model->id]);
            } else {
                return $this->render('create', [
                    'model' => $model,
                ]);
            }
        }




        public function actionGet()
        {
            $request = Yii::$app->request;
            $obj = $request->post('obj');
            $value = $request->post('value');
            switch ($obj) {
                case 'id_kode_administratif_regional':
                    $data = Regency::find()->where([$obj => $value])->all();
                    break;
                case 'id_kode_administratif_provinsi':
                    $data = District::find()->where([$obj => $value])->all();
                    break;
                case 'id_kode_administratif_kabupaten':
                    $data = Village::find()->where([$obj => $value])->all();
                    break;
            }
            $tagOptions = ['prompt' => "=== Select ==="];
            return Html::renderSelectOptions([], ArrayHelper::map($data, 'id', 'name'), $tagOptions);
        }



    select dropdownnny belum jalan bang, bagaimana ya solusinya.

    • alfa6661 - posted 1 year ago
      Banyak kemungkinan sih, salah satunya, Perhatikan kode ini:


      case 'id_kode_administratif_regional':
           $data = Regency::find()->where([$obj => $value])->all();

      pada kasus diatas nilai $obj adalah id_kode_administratif_regional.

      kalo dalam bentuk SQL.

      SELECT * FROM regency WHERE id_kode_adminstratif_regional = $value.

      di model Regency ada attribute itu / di table regency ada kolom itu? coba di sesuaikan aja.

      atau cek juga melalui inspect element browser. ada error apa ngga pas request ke controllernya.


  • adhipml - posted 1 year ago

    Selamat siang bang alfa.

    Terimakasih tutorialnya saya coba running well. Ada pertanyaan sedikit bang, 3 sql berhasil download satu lagi selalu gagal yaitu SQL untuk "village" errornya seperti di bawah ini, mohon pencerahannya. Terimakasih

    =================


    Truncate table
    Success
    Loading "provinces.sql"
    Success
    Loading "recencies.sql"
    Success
    Loading "districts.sql"
    Success
    Loading "villages.sql"
    Exception 'PDOExceptoin' with message 'SQLSTATE[HY000]: General error:2006 MySQL server gone away'

    • alfa6661 - posted 1 year ago

      Siang.

      itu error dari konfigurasi mysql. itu village.sql itu lumayan gede datanya.

      Setting max_allowed_packet di konfigurasi mysqlnya.

      untuk referensi : http://stackoverflow.com/a/12425526/1637424

  • budi_yunior - posted 1 year ago

    Hai... artikel bagus, sudah dicoba dan berhasil, saya sedang belajar Yii2, sangat membantu, terimakasih.

    • alfa6661 - posted 1 year ago

      Senang bisa membantu.

      Selamat belajar. good luck :)