Set Value dari Pilihan Dialog Pada YII Framework

Pernahkan anda menjumpai permasalahan saat menginputkan data pada suatu text dengan ketentuan data itu harus benar berasal dari tabel tertentu? Kemudian dengan cara apa anda menyikapi permasalahan seperti ini? Menggunakan dropdownlist atau autocomplete? Benar, itu merupakan salah satu jalan keluar yang baik tetapi pernahkan anda berfikir apabila data dalam tabel tersebut ada ribuan? Tentu saja akan memusingkan apabila harus memilih data yang ribuan tersebut dalam suatu inputan dropdownlist.

Beberapa tutorial dalam wiki Yii Framework membuat panduan berupa select data dari kotak dialog yang didalamnya itu nanti muncul data dari tabel lain dan terdapat suatu inputan pencarian. Pada contoh berikut ini saya akan membuat tutorial dengan studi kasus aplikasi jurnal dengan data tabel master Dosen sebagai pelaku yang mengisikan data pada aplikasi jurnal tersebut. Berikut ini langkah pembuatannya:

Buatlah form yang terdiri dari textfield NIDN, Nama dan Program Studi seperti pada gambar berikut:

Kemudian buatlah tombol "ubah" untuk memunculkan data tabel dosen dalam dialog seperti pada gambar diatas.

Apabila data Dosen berasal dari tabel yang lain yaitu tabel dosen maka renderlah model tersebut. Contoh disini saya akan merender model dosen dalam action create sebagai berikut:

<?php public function actionCreate()
 {
  $model=new Jurnal;
  $model2=new Dosen('search');
  $model2->unsetAttributes();
  if(isset($_GET['Dosen']))
   $model2->attributes=$_GET['Dosen'];
  if(isset($_POST['Jurnal']))
  {
   $model->attributes=$_POST['Jurnal'];
   $model->save();
  }

  $this->render('create',array(
   'model'=>$model,
   'model2'=>$model2,
  ));
 }
?>

Kemudian pada file protected/view/jurnal/_form.php buatlah form dialog yang berasal dari model dosen sebagai berikut:

<?php 
    $this->beginWidget('zii.widgets.jui.CJuiDialog',array(
 //Nama selector/id
    'id'=>'mydialog',
    // additional javascript options for the dialog plugin
    'options'=>array(
        'title'=>'Klik tanda <code>+</code> untuk memilih NIDN!',
        'autoOpen'=>false,
  //Fokus atau modal diaktifkan
  'modal' => true,
     'show'=>array(
       'effect'=>'blind',
       'duration'=>1000,
       ),
     'hide'=>array(
       'effect'=>'explode',
       'duration'=>500,
     ),
  'width' => 640, 
  'height' => 480
    ),
));?>
<?php $this->widget('bootstrap.widgets.TbGridView',array(
 'id'=>'dosen-grid',
 'dataProvider'=>$model2->search(),
 'type'=>'striped bordered condensed',
 'filter'=>$model2,
 'columns'=>array(
  array(
   'name'=>'nidn',
   'filter'=> CHtml::activeTextField($model2, 'nidn', array('placeholder'=>'Cari NIDN dosen')),
  ),
  array(
   'name'=>'nama',
   'filter'=> CHtml::activeTextField($model2, 'nama', array('placeholder'=>'Cari nama dosen')),
  ),
  array(
          'name'=>'program_studi',
          'type'=>'raw',
    'filter'=>CHtml::listData(Dosen::model()->findAll(array(
    'distinct' => true,
    'order' => 'program_studi ASC'
   )), 'program_studi', 'program_studi'),
        ),
  array(
    'header'=>'PILIH',
    'type'=>'raw',
    'value'=>'CHtml::Button(
          "+"
          , array(
    "class" => "btn submit"
          , "id" => "get_link"
          , "onClick" => "$(\"#mydialog\").dialog(\"close\");$(\"#Jurnal_nidn \").val(\"". $data->nidn."\");
    $(\"#Dosen_nama \").val(\"". $data->nama."\");
    $(\"#Dosen_program_studi \").val(\"". $data->program_studi."\");
    "))',
  ),
 ),
)); ?>
<?php $this->endWidget('zii.widgets.jui.CJuiDialog'); ?>

Pada source code diatas merupakan code untuk membuat pilihan dialog data dari dosen kemudian apabila user sudah memilih salah satu data maka otomatis langsung mengset textfield NIDN, Nama dan Program Studi seperti pada gambar berikut ini:

Setelah button [+] di pilih maka akan menset textfield sebagai berikut ini:

Pada textfield NIDN terdapat button "ubah" source codenya sebagai berikut:

<?php echo $form->textFieldRow($model, 'nidn', array('disabled'=>true, 'class'=>'span2', 'hint' => '<i class="text-info" id="nidn">Klik <a href="#" onclick=$("#mydialog").dialog("open"); return false;><code>ubah</code></a> untuk memilih NIDN.</i>')); ?>

Pada textfield NIDN dipasang action onclick bernama #mydialog untuk menampilkan dialog tersebut.

Apabila muncul pesan error "Undefined variable: model2" maka definisikan model2 dalam file create.php di folder protected/view/jurnal/create.php

Pada contoh ini menggunakan struktur tabel sebagai berikut:

Live Demo

Pastikan anda menggunakan extension bootstrap atau booster.