sfProtoculousPlugin : Plugin Prototype & Scriptaculous di
Symfony
Ajax : scriptaculous & prototype
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 nyaprototype 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!
