Dialog dengan search dan paging di Yii

Pada tutorial kali ini kita akan membuat dialog yang memungkinkan kita melakukan searching data, paging data dan mengambil data untuk dimasukkan ke dalam form kita. Widget Yii yang akan kita pakai adalah CJuiDialog dan CListView.  Tampilannya adalah seperti gambar berikut ini:

Untuk mewujudkan form di atas kita membagi menjadi 2 buah route controller/action yaitu
1. Form untuk memanggil
2. Listview sebagai sumber pengambilan data.
Kita akan membahas kedua hal ini sebagai berikut

1. Form untuk memanggil
   Pada form untuk memanggil ini kita membuat coding:
   a. Form untuk memanggil dialog
           <span id=”customer_name”></span>
       
           <?php
           echo $form->hiddenField($model,’customer_id’);
            echo CHtml::Button(‘Choose Customer’,array(‘onClick’=>”buka()”));
            ?>

   b. Dialog
   $this->beginWidget(‘zii.widgets.jui.CJuiDialog’,array(
       ‘id’=>’dialog’,
       // additional javascript options for the dialog plugin
       ‘options’=>array(
           ‘title’=>’Choose Customer’,
           ‘autoOpen’=>false,
           ‘height’=> 450,
           ‘width’=> 500,
           ‘modal’=> true,
       ),
   ));
       echo ‘&nbsp;’;
   $this->endWidget(‘zii.widgets.jui.CJuiDialog’);    

   c. Function membuka dialog
   function buka()
   {
       $(“#dialog”).load(“/index.php?r=pfChoose/customer”);
       $(“#dialog”).dialog(“open”);
   }
   Pada fungsi di atas isi dialog akan direfresh dari /index.php?r=pfChoose/customer

   d. Function untuk melakukan searching dan memilih paging, dan merefresh data
   function cari(p)
   {
       var word=$(“#word”).val();
       $(“#dialog”).load(“/index.php?r=pfChoose/customer&word=”+word+”&TblCustomer_page=”+p);
   }
   Pada fungsi di atas isi dialog akan direfresh dari /index.php?r=pfChoose/customer dengan data searching dan paging

   e. Function untuk mengambil data dari dialog
   function pilih(customer_id,customer_code, customer_name)
   {
       $(“#SalesOrder_customer_id”).val(customer_id);
       $(“#customer_name”).html(customer_code + ” – ” + customer_name);
       $(“#dialog”).dialog(“close”);
   }

2. Action untuk menampilkan listview /index.php?r=pfChoose/customer
   Pada tahap ini ada 3 file:
   a. Controller action yang berisi coding untuk membentuk dataset
       public function actionCustomer()
       {
           $word=addslashes(trim($_GET[‘word’]));
           $order_by=addslashes(trim($_GET[‘order_by’]));
           $order=addslashes(trim($_GET[‘order’]));
           

           $criteria=new CDbCriteria;
           $criteria->select = “customer_id,customer_code, customer_name”;
           $tbheader = array(‘Code’,’Customer Name’);
           $criteria->condition =”customer_id>1″;
           if ($word)
           {
               $criteria->condition .=” AND (customer_code like ‘%$word%’ OR customer_name like ‘%$word%’)”;
           }

           if (!$order_by)
           {
               $order_by=”customer_name”;
           }
           $criteria->order=”$order_by $order”;

           $dataProvider=new CActiveDataProvider(‘TblCustomer’,
               array(‘criteria’=>$criteria,
                   ‘pagination’=>array(
                       ‘pageSize’=>10,
                   ),
               )
           );

           $this->renderPartial(“_index”,array(
                           ‘dataProvider’=>$dataProvider,
                           ‘word’=>$word,
                           ‘tbheader’=>$tbheader,
                           ‘itemView’=>’_customer’
                                               )
                                   );
       }

   b. Tampilan parsial _index.php
   <div class=”pfchoose”>
   <?php
   //echo “<br>word: $word $itemView”;
   ob_start();

   $this->widget(‘zii.widgets.CListView’, array(
       ‘dataProvider’=>$dataProvider,
       ‘itemView’=>$itemView,
       ‘enablePagination’=>false,
       ‘summaryText’=>”,
   ));
   $mycontent=ob_get_contents();
   ob_end_clean();

   $pages=$dataProvider->getPagination();
   $current_page=$pages->currentPage;
   $page_count=$pages->pageCount;

   echo CHtml::textField(“word”,$word,array(“style”=>”font-family:Arial;font-size:12px”)) . CHtml::button(“Search”,array(“style”=>”font-family:Arial;font-size:12px”,”OnClick”=>”cari(0)”));

   //echo “current_page=$current_page, page_count:$page_count”;
   echo “<br/>Page: “;
   for ($p=1;$p<$page_count+1;$p++)
   {
       if ($p==$current_page+1)
       {
           echo ” $p “;
       }
       else
       {
           echo CHtml::link($p,”#”,array(“style”=>”font-family:Arial;font-size:12px”,”OnClick”=>”cari($p)”)) .” “;
       }
   }

   echo “
   <table>
   <tr>
   <td></td>
   “;

   foreach ($tbheader as $myheader)
   {
       echo “<td style=\”font-family:Arial;font-size:12px\”><strong>$myheader</strong></td>”;
   }

   echo “</tr>”;
   echo $mycontent;

   echo “</tr>
   </table>”;

   ?>
   </div>

   c. Tampilan parsial _customer.php
   <?php
   if ($index%2)
   {
       $myclass=”style=\”background-color:#caeef0;\””;
   }
   else
   {
       $myclass=”style=\”background-color:#f5ef9e;\””;
       
   }
   echo “\n<tr $myclass>\n”;
   echo “<td>”. CHtml::Button(“Choose”,array(“style”=>”font-family:Arial;font-size:12px;”,”onClick”=>”pilih($data->customer_id,’$data->customer_code’,’$data->customer_name’)”)).”</td>”;
   echo “<td style=\”font-family:Arial;font-size:12px;\”>”.$data->customer_code.”</td>”;
   echo “<td style=\”font-family:Arial;font-size:12px\”>”.$data->customer_name.”</td>”;
   echo “</tr>”;
   ?>

Kunjungi www.proweb.co.id untuk menambah wawasan anda.