[Yii Framework] Refresh Data Pada UI Tanpa Refresh Halaman (seperti Facebook and Twitter)

Jika kita lihat facebook dan twitter, maka kita sering melihat data status teman-teman kita yang akan terupdate secara otomatis sesuai data terbaru tanpa kita perlu me-refresh/reload halaman pada browser kita.. Saya akan coba memaparkan cara pembuatan seperti ini dengan menggunakan Yii Framework.. tidak tahu apakah metode yang digunakan sama dengan yang ada di FB/Twitter tapi tidak ada salahnya jika kita membuat hal yang serupa dengan pemikiran kita sendiri..

Jadi sebenarnya yang kita lakukan adalah me-refresh data dengan menggunakan AJAX seperti pada postingan sebelumnya dengan menggunakan interval waktu.. Hanya saja kita modifikasi perintahnya untuk merefresh data terbaru yang ada pada database.. Saya akan gunakan contoh kita me-refresh halaman admin agar CGridView yang ada senantiasa menampilkan data terupdate.  Saya asumsikan pada halaman admin terdapat CGridview seperti berikut :

<?php $this->widget('zii.widgets.grid.CGridView', array(
   'id'=>'category-grid',
   'dataProvider'=>$model->search(),
   'filter'=>$model,
   'columns'=>array(
      'data1',
      'data2',
       array(
          'class'=>'CButtonColumn',
       ),
   ),
)); ?>

Kemudian agar data bisa otomatis terupdate baik di refresh atau tidak, tambahkan script berikut pada bagian atas code view tersebut :

<script type="text/javascript">
  setInterval(   // fungsi untuk menjalankan suatu fungsi berdasarkan waktu
    function(){
        $.fn.yiiGridView.update('category-grid', {   // fungsi untuk me-update data pada Cgridview yang memiliki id=category_grid
        data: $(this).serialize()
    });
     return false;
 }, 
 10000  // fungsi di eksekusi setiap 10 detik sekali
);
</script>

Penjelasan : anda dapat melihat penjelasannya pada baris-baris tersebut..

Okeh, selesai…. Selamat mencoba..

Semoga membantu…

17 Responses to [Yii Framework] Refresh Data Pada UI Tanpa Refresh Halaman (seperti Facebook and Twitter)

  1. henrick says:

    mantap gan!!.. tutorialnya sangat membantu…
    ane mo nanya gan?Cara membuat iframe dalam yiii gmana ya???
    ane nyoba seperti ini tapi kok gak jalan..

    <iframe src="createUrl(‘controller/action’);?>”>

    mohon pencerahannya….. thanks..

  2. wah, saya juga ga pernah pake iframe gan… ga tau juga..

  3. henrick says:

    udeh bisa gan…

    <iframe src=createUrl(controler/action); ?>>

    tanpa tanda kutip…

    oz, buat ilangin loading indikator di atas saat refresh halaman gmana gan??..

  4. itu sendiri fitur bawaan dari CGridView gan.. saya sendiri juga ga pernah otak-atik dsana gan..

  5. henrick says:

    oke gan… thanks

  6. sinyo2104 says:

    gan itu refresh gridviewnya berdasarkan dataquery di $model->search ya? Kalo misal ada form input terus bawahnya cgridview, ketika formnya disave maka akan ngerefresh grid otomatis dgn tambahan data yg diinput td caranya gmn gan? thnks sebelumnya

  7. yang jelas agan pastikan aja field2 yang ada pada form tersimpan di action nya.. nanti dia otomatis nangkep gan dari fungsi yii yang :
    $.fn.yiiGridView.update(‘category-grid’, { // fungsi untuk me-update data pada Cgridview yang memiliki id=category_grid
    data: $(this).serialize()

  8. Afri Suryadi says:

    bro klo mau buat login dg facebook conncet di yii gmn ya? thx

  9. coba cari aja di wiki nya yii framework mas.. itu udah ada kok..

  10. alifdalya says:

    gimana pula jika mau keluar sound alert setiap kali ada data baru?

  11. saya ga pernah coba kalo yang gitu gan..

  12. Barok says:

    Makasih mas,,,sangat berguna sekali

  13. bang, kalau untuk memberikan tanda jika ada coment baru diforum tanpa hrs refresh(kyk notif facebook lh).
    itu gmana y bang?

  14. contoh penggunaanya ada gk di Yii. maaf bang baru belejar . .

  15. Ajir says:

    gan mau tanya, kalo mau tampilin form tanpa di input pas di search gmna yaa? jadi saya punya tabel contract yg terdiri dari 4 fied, yaitu no_contact, tenor, op, dan interest. no_contact sbg PK, nah pas di search no_contact, form tenor, op, dan interest nya langsung tampil. Mohon bantuanya masih newbie soalnya. Terima kasih

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: