[Yii Framework] Select Data From Dialog

Control apa yang anda gunakan untuk memasukkan data yang berasa dari master? yah, lebih tepat nya hubungannya 1 to many lah.. Kadang orang-orang menggunakan radio button, tetapi kebanyakan orang menggunakan dropdownlist.. Lalu bagaimana jika data nya sangat banyak sehingga orang pusing kalo pake dropdownlist?? Ada autocomplete kok,, jadi sekalinya kita ngetik, data master akan di filter dengan sendiri nya… hmmm.. pilihan tepat…  Tapi bagaimana jika dalam suatu tabel master memiliki banyak filter untuk memudahkan user?

Misal nih.. kita ingin select wilayah hingga level kelurahan. Untuk memudahkan user, kita ingin agar dapat memilih suatu kelurahan dengan filter berdasarkan provinsi, kabupaten/kota, kecamatan, hingga kelurahan… Tentunya auto complete menjadi kurang cocok dalam kasus ini.. Karena itu solusi yang digunakan biasa nya adalah menggunakan dialog yang menampilkan tabel master, dan dari dialog tersebut kita dapat melakukan filter langsung sesuai field-field yang kita inginkan.. Kemudian setelah menemukan datanya.. kita tinggal memilih data yang ada di dialog dan done… data pun masuk ke dalam field..

Yah, kalo dari penjelasan di atas masih membingungkan.. anda bisa lihat gambaran apa yang ingin saya paparkan dari gambar berikut :

pada form kita menyediaakn fitur untuk user memilih wilayah.. Setelah user memilih “Pilih Wilayah”, maka akan muncul dialog seperti berikut :

User dapat mem-filter data di atas dengan menggunakan filter yang tersedia dan juga dapat melihat dengan pagination.. Jika data nya sudah di temukan, maka user tinggal memilih data tersebut dengan klik link “Pilih” yang ada pada masing-masing row. Kemudian data yang dipilih pun akan masuk ke dalam field :

Okeh, sekarang bagaimana cara membuatnya?

Perttama-tama pada form anda tambahkanlah control seperti berikut :

 <div class="row">
   <?php echo $form->labelEx($model,'wilayah'); ?>
   <?php 
      echo $form->hiddenField($model,'wilayah'); 
      echo CHtml::textField('wilayah_text','',array('size'=>60)); 
      echo Chtml::ajaxLink('Pilih Wilayah',Yii::app()->createUrl('namaController/namaAction'),
         array('update'=>'#wilayahfield'),array("id"=>'wilayah'));
   ?>
   <div id="wilayahfield" style="visibility: hidden;"></div>
   <?php echo $form->error($model,'wilayah'); ?>
 </div>

Pada tampilan di atas, kita membuat membuat sebuah tipe inputan “hidden” untuk nilai “wilayah” dan satu buah textfield dengan nama “wilayah_text”. Kenapa hidden? ini sama seperti kasus auto increment. Kita sebenarnya menginput kode dari suatu tabel master ke dalam database kita, tetapi kita ingin menampilkan pada user bukan kode nya, tapi isi dari tabel tersebut. Untuk itu kita menyediakan sebuah textfield yang tidak akan disimpan guna menampilkan data dari tabel master, dan field wilayah kita buat tipe hidden yang menyimpan kode dari tabel master, dibuat hidden karena user tidak perlu tahu dan agar tak membingungkan user.

Selain itu kita juga menyediakan sebuah ajaxlink yang isinya akan memanggil sebuah action dan dimana ketika sukses hasil dari ajaxlink tersebut akan mengupdate tag html yang memiliki id = “wilayahfield”.

Kemudian setelah membuat itu pada form, kita kemudian membuat action pada suatu controller yang akan berjalan ketika di request setelah memilih tombol ajaxlink di atas.. Jadi pada controller anda masukkan code berikut :

public function actionNamaaction()
{
  $model=new Demography('search');
  $model->unsetAttributes(); // clear any default values
  if(isset($_GET['Demography']))
     $model->attributes=$_GET['Demography'];
   $this->renderPartial('getwilayah',array(
      'model'=>$model,
   ),false,true);

   Yii::app()->end();
 }

Kemudian pada view, buat sebuah file getwilayah.php lalu buat code berikut

<?php
 $this->beginWidget('zii.widgets.jui.CJuiDialog', array(
   'id' => 'bandsdialog3',
   'options' => array(
   'autoOpen' => true,
   'title' => 'Pilih Wilayah',
   'modal' => false,
   'width' => '600',
   ))
 );
 $this->widget('zii.widgets.grid.CGridView', array(
   'id'=>'user-grid',
   'dataProvider'=>$model->search(),
   'filter'=>$model,
   'columns'=>array(
       'propinsi',
       'kota',
       'kecamatan',
       'kelurahan',
       'kodepos',
        array(
           'header'=>'Pilih',
           'type'=>'raw',
           'value'=>'CHtml::link("Pilih","",array(
               "onClick"=>CHtml::ajax(array(
               "url"=>Yii::app()->createUrl("namaController/selectwilayah",array("id"=>$data->primaryKey)),
               "dataType"=>"json",
               "success"=>"function(data){
                     $(\"#Namamodel_wilayah\").val(data.satu);
                     $(\"#wilayah_text\").val(data.dua);
                     $(\"#bandsdialog3\").remove();
                }")
            ),"id"=>"child".$data->primaryKey,"style"=>"cursor:pointer;"))',
         ),
       ),
  ));
  $this->endWidget('zii.widgets.jui.CJuiDialog');
 ?>

Okeh, kode di atas akan menampilkan cgridview dimana dapat kita lakukan filter, pagination, juga dapat kita pilih nilainya.. Cara memilih nilainya sendiri juga menggunakan AJAX.. disana kita memanggil sebuah action dari sebuah controller dimana memiliki sebuah parameter dengan primary key data yang telah terpilih.. kemudian setelah sukses dijalankan, AJAX terssebut akan mengupdata field dengan id “Namamodel_wilayah”, “wilayah_text” dan menghapus “bandsdialog3”.

Nah, sekarang kita tinggal membuat action yang di request oleh ajax di atas… Untuk itu pada controller buatlah sebuah action seperti berikut :

public function actionSelectdemografi($id)
 {
   $satu='';
   $dua='';

    $model=Namamodel::model()->findByPk($id);
    $satu=$model->primaryKey;
    $dua=$model->propinsi.' - '.$model->kota.' - '.$model->kecamatan.' - '.$model->kelurahan;
    echo CJSON::encode(array
    (
       'satu'=>$satu,
       'dua'=>$dua,
    ));
    Yii::app()->end();
 }

Kode di atas akan mengembalikan 2 buah nilai, yang pertama nilai isi dari tabel wilayah dan yang kedua mengembalikan primary key…

 

Selesai…

Selamat mencoba… Semoga membantu…😀

40 Responses to [Yii Framework] Select Data From Dialog

  1. Fin says:

    mantaff gan.. thank udah bagi2 ilmunya..

  2. kiki says:

    ka, data yang mau kutampilin di dialog itu dari “view” bukan dari “tabel”? mungkin ga bikin kayak gt?
    soalnya klu di cgridview biasa itu bisa muncul, tapi tanpa filter..

  3. bisa mbak.. tinggal di akalin event klik nya pake javascript mbak..

  4. alfakr says:

    pas banget mas tutorialnya sama program yg lagi saya coba bikin,, hehe..
    thx mas,,

    oh iya mas sekalian mau tanya nih,, pernah bikin sms gateway di web Yii mas??
    saya sedang bikin program data penduduk ( CRUD data penduduk saja sih,, hehe),,
    nah, di data penduduk itu kan ada field no.telp,,
    nah sederhananya saya mau coba bikin operasi untuk bisa kirim sms ke setiap no.telp yg ada di database itu,,

    mohon penjelasannya mas,,
    makasih.

  5. pernah mas.. tapi udah lama banget..
    mas pernah buat sms gateway pake php biasa? atau minimal mas tau cara konfigurasi dan cara kerja nya sms gateway? kalo belum mas harus pahami itu dulu mas..
    saya dulu pake gammu buat sms gateway, di gammu itu mas tinggal insert suatu data ke dalam tabel berupa no telpon dan isi sms. Kemudian setelah udah tersimpan data tsb akan langsung dikirim ke sms ke nomor tsb dan isi sms nya juga begitu..
    jdi silahkan pahami dulu penggunaan gammu nya mas..

  6. Fin says:

    gan, gimana cara nampilin paging numbernya hanya beberapa ajah, contoh
    <>
    menjadi
    <>
    gimana tuh gan??

  7. Fin says:

    lah koq ga nongo ye, maksud ane clink pagernya 1 2 3 4 5 6 7 8 9 10 menjadi 1 2 3 4 5 aja, kagak nongol smua?

  8. itu ga nongol semua emang gan.. cuma 1 – 10 aja.. ntar kalo ada 11 dan seterusnya ga akan muncul kok..

    • Fin says:

      ups, maksud ane gan, misalkan datanya ada ratusan, klo di cgridview linkpagernya munculnya banyak tuh. 1 – 10 dst, nah.. ane pegennya number link pagernya 1 2 3 4 5 aja?

  9. wah, ga pernah coba juga itu kalo saya gan..

  10. ajobegs says:

    Salam sabit, saya mohon bantuan anda berkenaan masalah yg berkaitan tutorial diatas. Begini..saya sudah follow tutorial anda dari a – z, namun semuanya tiada masalah. namun pabila saya hendak submit form tersebut, data field yg diambil dari cgridview dialog itu menjadi blank dan valuenya jadi empty.

    Kenapa ya jadi empty, padahal asalnya ada tertulis datanya..tetapi selepas post submit, ia jadi empty..

  11. apakah yang dimaksud blank adalah data cgridview dialog nya? jika memang ia kemungkinan ada yang error, gunakan “firebug” agar dapat mengecek kejadian apa yang terjadi ketika kita memanggil dialog..

  12. ajobegs says:

    thanks sabit, sudah di check guna firebugs t
    ernyata ada error..and the error has been rectified.

  13. ian says:

    gan yg di script Pertama-tama pada form anda tambahkanlah control seperti berikut : ada “echo Chtml::ajaxLink(‘Pilih Wilayah’,Yii::app()->createUrl(‘namaController/namaAction’),”

    namaController/namaAction nya diisi apa ya?

    “public function actionNamaaction()” Namaactionnya bebas?

    “url”=>Yii::app()->createUrl(“namaController/selectwilayah”,array(“id”=>$data->primaryKey))”

    namaController/selectwilayah diisi apa?

    lagi mau coba-coba tapi kurang ngerti gan, masih newbie.

    & misalnya yg ada di field search (master_wali_kelas) : kelas, wali kelas, periode

    langsung masuk ke table yg sama (transaksi_ajar) -> kolom 1 = kelas, ke kolom 2 = wali kelas ,yg dipilih dari diaolog box tadi. gimana caranya ya gan? jd datanya ga di olah lagi, langsung masuk ke kolom1 & kolom2.

    Thx before🙂

    • ian says:

      Wilayah ambli dari table wilayah kan? beda model. misalnya buat di table transaksi_ajar. buat controller nya di wilayah atau di transaksi ajarnya? saya isi –> Chtml::ajaxLink(‘Pilih Wilayah’,Yii::app()->createUrl(‘transaksi_ajarController/dialogbox’),”

      muncul error :
      Call to undefined method Yii::ap() in C:\xampp\htdocs\yii\protected\views\transaksi_ajar\_form.php on line 75

      yg ini –> “url”=>Yii::app()->createUrl(“namaController/selectwilayah”,array(“id”=>$data->primaryKey)),

      namaController/selectwilayah juga ga ngerti gan di buatnya di controller mana?

      help gan…. Thanks

      • error pertama maksud nya file “_form.php” ga ada di dalam folder transaaksi_ajar. Untuk controller nya dimana, itu bebas aja ga dimana aja yang menurut agan mudah agan ingat struktur nya.

    • nama action nya bebas gan, yang penting di awali dengan kata “action”. Untuk pertanyaan selanjutnya saya belum ngeh mksd pertanyaannya mas?

      • ian says:

        jadi misalnya sy pakenya 2 tabel. wali_kelas, transaksi_ajar.

        wali_kelas : id_wali_kelas, nama, jeniskelamin, tgllahir
        transaksi_ajar : tgl, kelas, id_wali_kelas, nama

        masing2 udah di crud kan dgn gii. Pengennya pada transaksi_ajar di kolom nama memunculkan select data from dialog (data dari wali_kelas). Untuk kasus seperti itu, yg di ditambahkan di transaksi_ajarcontroller semua ya?

        misalnya dialognya muncul kolom : id_wali_kelas, nama, jeniskelamin, tgllahir

        seudah data dipilih, data id_wali_kelas ke kolom id_wali_kelas, nama ke kolom nama, yg ada di transaksi ajar.

        Klo pertanyaan yg ini “url”=>Yii::app()->createUrl(“namaController/selectwilayah” ko tiba2 ada selectwilayah? dapat dari mana selectwilayahnya? di contoh adanya Selectdemografi.

        Sebelumnya terima kasih banyak atas bantuannya gan🙂

      • kalo gitu agan mainin di javascript nya gan.. cuma jadi brubah ga kayak cara di atas lagi penerapan ajax nya. untuk controller tadi sory saya yg salah, harus nya selectdemografi gan..

  14. ian says:

    errornya sudah tidak muncul, tapi waktu di klik link pilih wilayah, ga muncul Dialognya. Salah di mananya ya?

  15. Benny Wijaya says:

    knp ni gan?
    nge-link ke =TbwpController/Namaaction&_=1391709279703
    Unable to resolve the request “TbwpController/Namaaction”.
    pdhl nama controller & action udh sama

  16. Anne Regina says:

    thank u mas sabit.. tutorialnya mantap banget…
    tapi ada satu masalah mas.. pas UPDATE koq datanya gak muncul di fieldnya yah? T.T

  17. Juang says:

    malam mas saya juga mau bikin sms gateway gammu dengan yii , saat saya sedang mencoba membuat model generator pada tabel outbox_multipart dan sentitems bisa mas tapi saat dilakukan CRUD generator selalu error kenapa ya mas ?

    “Table ‘sentitems’ has a composite primary key which is not supported by crud generator.” seperti ini errornya kenapa ?

    • tabel sentitems nya ga punya primary key, pada yii generator salah satu syarat biar bisa dieksekusi harus punya sebuah field yang jadi primary key, bukan banyak field.

  18. Mohon pencerahannya,

    saya mencoba belajar mengenai dependant dropdown list dari sini:

    http://www.yiiframework.com/wiki/24/creating-a-dependent-dropdown/

    Hanya saja kasus yang saya hadapi sedikit beda, yaitu:

    Terdapat dropdown list nama daerah/propinsi yang kemudian nanti akan otomatis mengisi textbox

    kabupaten, kecamatan desa, alamat, dan kode pos.

    mungkin ada contoh sederhana/petunjuk yang bisa saya pelajari.

    Terima kasih
    Salam

  19. Arief Wijaya says:

    Alhaillll mastah sabit…. Kamsia kamsia elmunya… Posisi masih di martapura atau sudah di jakarta mastah sabit???

  20. mashar01 says:

    mas kalo untuk proses updatenya sudah ada tutorialnya belum mas , misalanya mau edit kota.

  21. wais says:

    misal sudah ada dialog untuk memilih data, kemudian kita ingin export data yang filtered tersebut ke pdf bagaimana?

  22. yulinda says:

    gan, minta bantuannya🙂, saya ingin kirim SMS Gateway dengan Yii gmn caranya, boleh minta tutorialnya??? terima kasih sebelumnya

  23. Cepi Bian says:

    Mas sabit ko pas saya klik pilih gridviewnya ga nampil dan urlnya pun menjadi http://localhost/contoh/index.php?r=Sppb/Create#

  24. Cepi Bian says:

    Untuk id yang terdapat pada code $(\”#Namamodel_wilayah\”).val(data.satu); itu disimpan dimana ?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: