Monday, 14 July 2014

Set Value dari Pilihan Dialog Pada YII Framework

Standard
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.

44 comments:

  1. saya sudah coba scriptnya, tapi yang terisi hanya NIDN nya saja. kira - kira salah dimana ya . terimakasih sebelumnya :)

    ReplyDelete
    Replies
    1. Bagaimana struktur database anda?

      Delete
    2. sudah bisa , ternyata $(\"#Dosen_nama \").val(\"". $data->nama."\");
      $(\"#Dosen_program_studi \").val(\"". $data->program_studi."\");
      datanya ga masuk.

      saya ubah jadi $(\"#Jurnal_nama \").val(\"". $data->nama."\");
      $(\"#Jurnal_program_studi \").val(\"". $data->program_studi."\");
      baru bisa.


      saya mau bertanya, textfield nya saya disabled sesuai tutorial nya om.
      tapi pas mau di create/save , nidn cannot be blank. ga bisa di save.
      kenapa ya om?

      Delete
    3. Tambah method beforesave atau tambah form hidden nidn di viewnya: hiddenField($model, 'nidn'); ?>

      Delete
    4. kalau boleh tau , method before save nya seperti apa ? maaf newbie om :D

      Delete
  2. mas nur rochim, tanya dunk struktur databesenya gmna ya.. apadi tabel jurnal ada field nama dan program_studi juga buat ? jadi seperti ini :

    Tabel Dosen {nidn,nama,program_studi}
    Tabel Jurnal{id_jurnal,staus,publikasi (nidn,nama,program_studi),anggota}

    Terimkasih atas respon dan petunjuknya.

    ReplyDelete
    Replies
    1. Pada tabel jurnal cukup nidn saja sebagai fk di relasikan dengan field nidn tabel dosen.

      Delete
    2. Maksudnya untuk Autofill nya mas Nur. jadi setelah Pilih dari Tabel Dosen maka Autofill ke textfield nama dan program studi. apakah harus di buat nama dan program studinya di tabel jurnal. trims

      Delete
    3. Tergantung struktur databasenya mas. Untuk contoh ini program studi saya buat tabel berbeda yaitu tabel lppm_dosen yang saya relasikan ke tabel jurnal. Agar autofill terbaca pada 'view jurnal' maka bisa di panggil relasi pada model jurnal tsb.

      Delete
  3. Ok mas nur rochim, Tks ya ilmunya. sudah solved

    ReplyDelete
  4. mas nur tanya dunk, pas proses update , bagaimana ya biar nama , dan program studinya muncul, krn pas aku coba2 cuma nidn aja.
    Baru kalo saya pilih ubah muncul (proses tdk otomatis).
    Mohon solusinya ya mas. Tks

    ReplyDelete
    Replies
    1. Untuk create dan update di buat file yang berbeda, tentunya dengan form yang berbeda pula...

      Delete
  5. This comment has been removed by the author.

    ReplyDelete
  6. mas nur, mohon bantuannya untuk yg action update biar datanya bisa ketarik bagaimna ya? help

    ReplyDelete
  7. mas nur kalau cjuidialog nya dipindah ke admin bisa nggak?

    jd action nya dipindah ke ke action update gimana kang?

    ReplyDelete
    Replies
    1. Source bisa dipindah sesuai function yang di inginkan.

      Delete
  8. Tombol Buka kok gak muncul ya mas?? mohon pencerahan. :D

    ReplyDelete
    Replies
    1. sudah bisa tapi pas di tekan tombol + kok textfieldnya tetap kosong ya??

      Delete
    2. Silahkan cek name form textfieldnya apakah sudah sesuai atau belum.

      Delete
  9. This comment has been removed by the author.

    ReplyDelete
  10. kang bagi yang udah jadi dung klo boleh, yang sederhana ajah, newbie ni kang

    ReplyDelete
  11. Mas Ocim mau tanya, caranya menghapus otomatis pemesanan ketika pemesan tidak melakukan konfirmasi selama 24 jam setelah dia melakukan pemesanan bagaimana ya mas?
    Mohon pencerahannya :)
    Get well soon..:)

    ReplyDelete
  12. Code definisi model 2 nya bagaimana ya?
    tolong pencerahannya master

    ReplyDelete
    Replies
    1. Baik, silahkan pada file create.php anda ubah seperti baris kode berikut: echo $this->renderPartial('_form', array('model'=>$model, 'model2'=>$model2));

      Delete
  13. Mas rochim,
    dialognya udah jalan,
    cuma pas di klik tanda tambah kok gak ke set ke textfieldnya ya mas?

    terus di CActiveForm gak mengenal TextFieldRow katanya mas

    ReplyDelete
    Replies
    1. Silahkan cek name textfieldnya apakah sudah sesuai. TextFieldRow merupakan textfield dari yii-bootstrap, cukup menggunakan textfield saja apabila tidak menggunakan ext.yii-bootstrap.

      Delete
  14. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. solved, pas ganti thame,

      tapi pas di klik + datanya ga masuk ke textfield yang di disable itu, knp ya mas ?

      Delete
    2. Cek name textfieldnya apakah sudah sesuai dengan action onclick di btn submit (+)

      Delete
  15. Kok tombol "ubah" nya gak muncul ya? Pokoknya teks sederet tombol ubah jg gk muncul. Cuma form nidnnya aja yg bisa disable. Mohon solusinya master :)

    ReplyDelete
    Replies
    1. Kode program sudah sesuai diatas atau ada yang mbak Elsa rubah?

      Delete
    2. Cuma yg nidn nya za ubah jd nip mas.. Soalnya mau ngambil nilai nip dr tabel dosen yg udh diisi mas

      Delete
    3. trus ada jg pesan error (alias "bootsrap.widgets.TbGridView" is invalid) itu knp ya mas?

      Delete
    4. 1. Perhatikan nama selector id nya apakah sudah sesuai atau tidak.
      2. Silahkan menggunakan ext bootstrap/ booster.
      Apabila ada masalah lagi silahkan private chat melalui email di menu Kontak.

      Delete
  16. This comment has been removed by the author.

    ReplyDelete
  17. Kok tombol "ubah" nya gak muncul ya?
    tolong dong solusinya master

    ReplyDelete
    Replies
    1. Cek CSS apakah ada yang bentrok atau tidak

      Delete
  18. Bang, kok pas search nidn nya error ya, jadi gak mau search

    ReplyDelete
    Replies
    1. Deklarasikan terlebih dahulu modelnya.

      Delete
    2. Boleh dicontohin gak bang buat referensi. Soalnya saya baru nyoba yii ?

      mohon bantuannya master

      Delete
    3. Baik untuk referensi bisa saudara buka di tautan http://yii.aimagu.com/kinerja/jurnal-create.html

      Delete
  19. master, kan data yg inputan ini udah di save nah, pas mau di update kok malah error . itu kenapa ya ?

    tulisannya gini "
    Fatal error: Call to a member function search() on a non-object in D:\xampp\htdocs\perpus\protected\views\pengembalian\_form.php on line 46"

    ReplyDelete
    Replies
    1. udah deh bang. udah berhasil sekarang mah hehe..
      paling yang search di dialognya. kalau boleh minta kodingnya sama tempat ngeletakin kodingnya dimana ?

      makasih master

      Delete


Copyright © AIMAGU. Jasa Pembuatan Website. All Rights Reserved
Design by Automattic | Blogger Theme by NewBloggerThemes | Official: www.aimagu.com