sfProtoculousPlugin merupakan plugin yang dibuat oleh pengembang symfony, untuk mempermudah penerapan Ajax pada framework symfony. Sebenarnya tutorial tentang penggunaan Plugin ini cukup lengkap, bisa dilihat di documentasi Ajax Integration. Dan jangan lupa juga untuk berkunjung ke web nya prototype dan scriptaculous, karena disana juga ada panduan lebih detil tentang penggunaan Ajax nya.

Cara Install?

Untuk cara instalasi nya cukup mudah, seperti yang telah dijelaskan pada web sfProtoculousPlugin. Jangan lupa untuk mengikuti setiap step nya. Jika Anda mengalami kesulitan karena error PEAR, saya sarankan untuk mendownload manual, dan install di command symfony. Misalnya, setelah download file plugin disimpan di C:, maka cara install nya seperti ini,

> symfony plugin:install C:sfProtoculousPlugin.tgz

Kalau ternyata cara ini juga tidak berhasil, maka coba untuk meng-extrak source plugin itu, kemudian copy ke dalam direktory plugins.

Untuk Apa Plugin Ajax ini?

Agak ribet juga menjelaskan kegunaan Ajax. Tapi inti nya adalah untuk membuat tampilan web menjadi lebih interakti. Misal, ketika kita meng-klik tombol, maka hanya element tertentu saja yang berubah, sehingga loading web nya bisa lebih cepat. atau ketika kita mengisi form, bisa langsung otomatis memunculkan suggestion, dsb. Maka nya dikenal istilah, autocomplete, drag n drop, auto suggestion, ajax link, remote link, event listener, edit in place, update element, dsb.

Ini dia beberapa function Ajax yang tersedia pada Plugin ini (dari namanya kita sudah bisa menebak seperti apa kegunaannya),

• link_to_remote
• form_remote_tag
• submit_to_remote
• submit_image_to_remote
• periodically_call_remote
• remote_function
• observe_field
• observe_form
• button_to_remote
• draggable_element
• drop_receiving_element
• input_auto_complete_tag
• input_in_place_editor_tag
• sortable_element
• visual_effect

Untuk penjelasan lebih lanjut, sebaiknya Anda melihat beberapa contoh penerapannya di web scriptaculous demos.

Bagaimana Menggunakannya?

(nanya mulu nih.. 🙂 )

Ada beberapa hal penting tentang penggunaan plugin ini. Diantaranya Anda harus mengetahui Javascript, kalau pun tidak yang penting punya referensi untuk bisa mengetahui penggunaan Javascript. Begitu juga referensi tentang prototype dan scriptaculous.

Kita harus menyertakan helper Javascript disetiap template action yang akan menggunakan script dari plugin ini. Letakkan definisi helper diposisi paling atas (wajib) file template action.

<?php use_helper('Javascript') ?>

Dan pada umumnya, Plugin yang berkaitan dengan Ajax (seperti prototype atau JQuery), hanya dipasang pada template action, sehingga tidak membutuhkan modifikasi di action.class nya.

Setelah Anda mendeklarasikan penggunaan Helper Javascript, maka silahkan dicoba beberapa contoh penggunaan fitur pada plugin ini. Bisa dilihat detilnya dan langsung copy-paste contoh script nya, disini.

Experiment #1

Saya akan ikuti salah satu contoh script yang ada, untuk membuat link remote (tombol) menampilkan halaman tertentu, tanpa harus me-refresh semua halaman web. Nanti nya halaman (url) yang kita ingin tampilkan, akan ditampilkan pada element (div) tertentu saja. Ini dia contoh sederhananya (lihat listing 11-25), misalkan kita isikan di template view (module tesplugin) tulisan bebas. Kemudian isi template index (module tesplugin) dengan script ini,

<div id="feedback"></div>
<div id="indicator" style="display: none">Loading...</div>
<?php echo link_to_remote('Show this post', array(
    'update'   => 'feedback',
    'url'      => 'tesplugin/view',
    'loading'  => visual_effect('appear', 'indicator'),
    'complete' => visual_effect('fade', 'indicator').
                  visual_effect('highlight', 'feedback'),
)) ?>

Silahkan perhatikan script diatas, sebenarnya tidak lah rumit. Ada element (div) feedback dan indicator. Ada function link_to_remote (ini ajax nya) yang nantinya akan menjadi tampilan tombol dengan tulisan “show this post”. Jika tombol itu ditekan, maka element (div) feedback akan menampilkan isi dari halaman “tesplugin/view”. Element itu ditampilkan secara otomatis tanpa me-reload halaman web, dan memunculkan effect appear, fade, dan highlight. Agak susah menjelaskan dengan kata-kata, silahkan Anda copy-paste dan rasakan sendiri “sensasinya”.

Experiment #2

Sekarang mari kita coba menggunakan plugin ini untuk menampilkan hasil pengolahan inputan form secara otomatis. Kita akan menggunakan function observe_field (lihat bagian listing 11-13 dan 11-14). Jadi kita akan membuat inputan text, jika user memasukkan inputan tertentu maka akan ada element (div) yang otomatis menampilkan hasil tertentu.

<form action="<?php echo url_for(tesplugin/tes);?>" method="POST">

<label for="item">Item:</label> 
<input type="text" id="item" />

<div id="item_suggestion"></div> 
<?php echo observe_field('item', array(
      'update'   => 'item_suggestion', 
      'url'      => 'tesplugin/view',  )) ?>  

</form>

Jadi, function observed_field akan melakukan “pemantauan” secara otomatis. Setiap ada perubahan pada element (input) “item”, maka function tersebut akan aktif melakukan update terhadap element (div) “item_suggestion”, yang akan diisi dengan tampilan dari template “tesplugin/view”. Kita dapat memodifikasi agar tampilan “tesplugin/view” menampilkan hasil query sesuai inputan yang dilakukan pada element (input) “item”.

Experiment #3

Ini juga cukup menarik, edit_in_place. Silahkan langsung coba script yang ada di listing 11-34.

<div id="edit_me">You can edit this text</div>
<?php echo input_in_place_editor_tag(
        'edit_me', 
        'mymodule/myaction', 
         array(
           'cols'  => 40,
           'rows'  => 10,))
 ?>

Silahkan langsung dicoba, dan kemudian coba di klik tulisan “you can edit this text” pada tampilan browser anda. Apa yang terjadi? 🙂

 

Butuh Kreatifitas dan Ketelitian dalam penggunaan Plugin yang berhubungan dengan Ajax. Sebenarnya sangat mudah dan menarik loh. 🙂

silahkan mencoba!