Yii Tutorial: Menggunakan Ajax di Yii dengan CHtml::ajaxLink()
June 14th, 2012, Written by: | Categories: Programming, Tutorial, Yii Framework

Sekarang ini, dengan adanya AJAX, membuat Web semakin menarik. Tanpa AJAX, biasanya kalau kita submit form atau mengklik link maka Web harus me-refresh seluruh halamannya. Dengan AJAX, maka kita cukup mengubah bagian yang ingin kita ubah saja. Yii menyediakan beberapa fungsi berkenaan dengan AJAX. Untuk tutorial kali ini penulis akan menjelaskan bagaimana mengimplementasi AJAX dengan salah satu fungsi dari Yii, yakni dari CHtml::ajaxLink(). Untuk memahami tutorial ini, minimal pembaca sudah harus memiliki pemahaman dasar mengenai AJAX.

Untuk tutorial kali ini, kita membuat sebuah aplikasi sederhana. Terdapat sebuah link yang jika diklik akan muncul nama buah. Setiap kali diklik, maka akan muncul nama buah yang berbeda.

Pergilah ke file SiteController yang terletak di webroot/protected/controllers/SiteController.php. Nah, pertama-tama kita harus membuat sebuah halaman untuk menampilkan link.

public function actionTestAjaxLink()
{
    //cukup tampilkan view saja
    $this->render('test-ajax');
}

Dan di bawah ini merupakan isi dari file view bersangkutan yang terletak di webroot/protected/views/site/test.ajax.php

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id lobortis urna. Morbi rhoncus mi eget magna tristique tristique. Praesent ut arcu a felis volutpat imperdiet id non odio. 
<div id="nama-buah">
</div>

<?php echo CHtml::ajaxLink('Berikutnya',
array('/site/buah'),
array('update'=>'#nama-buah')
);
?>

Seperti yang bisa Anda lihat, Pada koding view di atas, penulis hanya meletakkan sebuah tag div yang memiliki id bernama “nama-buah”. Tag div inilah yang nantinya akan diisi dengan nama buah-buahan.

 

Kemudian di bawahnya ditulis CHtml::ajaxLink(). Ada tiga parameter untuk ajaxLink(). Parameter pertama mengatur tulisan pada link.Jadi nantinya tulisan link itu adalah “Berikutnya”.

Parameter kedua adalah URL yang akan diakses ketika link itu diklik. Di situ tertulis array(‘/site/buah’) yang berarti mengakses index.php?r=site/buah. Itu artinya mengakses controller SiteController dengan action bernama actionBuah().

Dan parameter ketiga dari ajaxLink() adalah untuk konfigurasi AJAX-nya. Di sini, penulis menulis “update”=>’#nama-buah’, yang artinya, hasil request AJAX akan di masukkan ke dalam tag yang ber-id “nama-buah”.

AJAX link di atas masihlah belum berfungsi karena kita belum membuat actionBuah() di SiteController. Oleh karena itu, mari kita buatkan sekarang. Buka file SiteController lagi dan tambahkan koding berikut ini di paling bawah

public function actionBuah()
{
    //daftar buah-buahan.
    $list = array('apel', 'pisang', 'jeruk', 'durian', 'mangga');
    //ambil acak satu nama buah
    $text = $list[array_rand($list)];
    //tampilkan
    $this->renderPartial('_buah', array('text'=>$text));
}

Koding di atas bertujuan untuk mengambil secara acak salah satu nama buah. Perhatikan untuk me-render tampilan, kita menggunakan renderPartial(). Mengapa? Karena fungsi renderPartial() akan menampilkan view tanpa layout/template sama sekali. Dan inilah yang selalu kita gunakan jika ingin menampilkan AJAX. Kalau kita pakai render(), nanti yang muncul bukan hanya nama buah saja, tapi seluruh layout juga akan muncul (coba saja jika penasaran).

Setelah membuat actionBuah(), maka tahap berikutnya adalah membuat view. Buatlah sebuah file di webroot/protected/views/site/_buah.php. Dan isi dengan koding di bawah ini:

    <blockquote>
    <?php echo $text; ?>
    </blockquote>

Jika sudah selesai, silahkan dicoba hasilnya. Setiap kali Anda mengklik link “Berikutnya” maka nama buah akan berganti. Kurang lebih seperti demikianlah penerapan AJAX yang sederhana di Yii. Semoga dapat membantu.

More about: , , ,

4 Responses to “Yii Tutorial: Menggunakan Ajax di Yii dengan CHtml::ajaxLink()”

  1. PewDiePie's tuber simulator hack

    I think this is among the most vital info for me.
    And i’m glad reading your article. But should remark on some general things, The website
    style is wonderful, the articles is really nice : D. Good job, cheers

    Reply
  2. mystic messenger hack

    Great site you have got here.. It’s difficult to find high-quality writing like yours
    nowadays. I truly appreciate individuals like
    you! Take care!!

    Reply

Leave a Reply