Membuat Dependent Dropdown di Yii2

Saad Abdurrazaq Fri, January 15, 2016 No Comments 1,542 views
Membuat-Dependent-Dropdown-di-Yii2

Hai sobat semuanya, tak bosan-bosannya saya menyampaikan materi tentang yii2, dan kini saatnya kita sampai pada materi atau pembahasan selanjutnya yaitu tentang cara membuat dependent dropdown di Yii2. Dependent yang jika diartikan dalam bahasa Indonesia bermakna tergantung, sedangkan dropdown bisa kita artikan sebagai bentuk menu yang menurun ke bawah yang memungkinkan user memilih salah satu opsi dari list yang tersedia. Jadi singkatnya dependent dropdown menu ialah menu yang saling bergantung dengan menu-menu yang lain. Jika salah satu menu dipilih, maka menu yang lainnya akan menampilkan datanya sesuai dengan menu yang dipilih tersebut.

Pada tutorial cara membuat dependent dropdown di Yii2 ini, saya mengadopsi tutorialnya dariĀ http://lab-informatika.com/script/26/yii-2-dependent-dropdown kemudian saya rubah kodenya dengan style kode yang saya anggap nyaman. Dalam hal ini, saya mengambil suatu kasus yang memang mengharuskan kita untuk membuat dependent dropdown yaitu tentang pemilihan wilayah. Di mana jika list data propinsi dipilih maka list data kota akan menampilkan data kota yang sesuai dengan data propinsi tersebut, dan seterusnya dan seterusnya. Kira-kira seperti itulah. Langsung saja, untuk membuat fitur tersebut kita tidak menggunakan php pure, kita memerlukan javascript dan ajax agar dapat berjalan.

Membuat Dependent Dropdown di Yii2

Step 1: Ada baiknya kita mengimport terlebih dahulu data wilayah se-Indonesia yang bisa sobat download di sini. Setelah kita import, maka saatnya kita buat viewnya terlebih dahulu yang kurang lebih seperti ini:

<?= $form->field($model, 'propinsi')->dropDownList(
ArrayHelper::map(Province::find()->all(), 'id', 'name'),
[
'prompt' => 'Select Propinsi',
'class' => 'dependent-input form-control',
'onchange' => '$.post("index.php?r=registrasi/propinsi&id='.'"+$(this).val(), function(data) {
$("select#registrasi-kota").html(data);
});'
]); ?>

<?= $form->field($model, 'kota')->dropDownList(
ArrayHelper::map(Regency::find()->all(), 'id', 'name'),
[
'prompt' => 'Select Kota',
'onchange' => '$.post("index.php?r=registrasi/regency&id='.'"+$(this).val(), function(data) {
$("select#registrasi-kecamatan").html(data);
});'
]); ?>

<?= $form->field($model, 'kecamatan')->dropDownList(
ArrayHelper::map(District::find()->all(), 'id', 'name'),
[
'prompt' => 'Select Kecamatan',
'onchange' => '$.post("index.php?r=registrasi/district&id='.'"+$(this).val(), function(data) {
$("select#registrasi-desa").html(data);
});'
]); ?>

<?= $form->field($model, 'desa')->dropDownList(
[
'prompt' => 'Select Desa',
]); ?>

Kita bisa lihat di situ bahwa setiap menu dropdown, actionnya selalu dioper ke controller, dan ketika sudah sampai di controller, maka di situlah data-data tersbut diproses agar data-data yang diminta bisa ditampilkan sesuai dengan data-data yang diminta. Sebagai contoh: Jika kita memilih DKI Jakarta sebagai propinsi yang kita pilih, maka dropdown menu kota akan menampilkan list atau data-data yang sesuai dengan propinsi DKI Jakarta, yaitu Jakarta pusat, jakarta utara, jakarta barat dan seterusnya. Untuk dropdown menu kecamatan, dan desa pun pada prinsipnya sama seperti yang di atas, saling memiliki keterkaitan satu sama lainnya.

<strong>Step 2:</strong> Jika view sudah dibuat, maka sekaang waktunya kita membuat controller. Di sini sobat bisa lihat dan bisa memahami dan mempelajari setiap kodenya.

public function actionCreate()
{

$model = new Registrasi();

if($model->load(Yii::$app->request->post()))
{
try{
if($model->save(false))
{
Yii::$app->getSession()->setFlash('success','Data saved!');
return $this->render('create', ['model' => $model,]);
}

}

catch(\Exception $e)
{
Yii::$app->getSession()->setFlash('error', 'Data gagal diinsert');
return $this->render('create', ['model' => $model,]);
}

}
else
{
return $this->render('create', ['model' => $model,]);
}
}

public function actionPropinsi($id)
{
$regencies = Regency::find()->where(['province_id' => $id])->all();

foreach ($regencies as $regency)
{
$tagOptions = ['prompt' => "=== Select ==="];
return Html::renderSelectOptions([], ArrayHelper::map($regencies, 'id', 'name'), $tagOptions);
}

}

public function actionRegency($id)
{
$districts = District::find()->where(['regency_id' => $id])->all();

foreach ($districts as $district)
{
$tagOptions = ['prompt' => "=== Select ==="];
return Html::renderSelectOptions([], ArrayHelper::map($districts, 'id', 'name'), $tagOptions);
echo "<option value='".$district->name."'>".$district->name."</option>";

}

}

public function actionDistrict($id)
{
$villages = Village::find()->where(['district_id' => $id])->all();

foreach ($villages as $village)
{
echo Html::tag('option', Html::encode($village->name), ['value' => $village->name]);
}

}

Dengan begitu, selesailah sudah tugas kita dalam membuat dependent dropdown di Yii2.

Sekian,
Semoga bermanfaat.

 

Is a web enthusiast from Indonesia. kafeinkode was created and written by Saad Abdurrazaq, it is built on WordPress. Love working with WordPress, programming, blogging, internet marketing, and all about computer soft skills.

0 comments

Leave a Reply

Your email address will not be published. Required fields are marked *