Memulai Ajax dengan CakePHP

Untuk memulai menggunakan Ajax di CakePHP, tidaklah sesulit yang kita bayangkan. Bahkan CakePHP menjamin kita tidak akan menuliskan script javascript untuk bisa membangun aplikasi Ajax.... masak siih ??

Pertama-tama, kita mulai dengan bismillah...

Kedua-dua, kita perlu mendapatkan tools atau library javascript yang telah tersohor namanya, yaitu prototype dan script.aculo.us, silahkan download semuanya.

Dan pastikan anda telah mengekstrak prototype.js (yanga ada di folder lib) dan semua file yang ada difolder src, letakkan didalam webroot/js anda.

Sekarang kita akan membuat file-file javascript tersebut dapat digunakan dihalaman manapun dari aplikasi CakePHP kita. Caranya, letakkan script ini di bagian head dari file app/views/layouts/default.ctp

if(isset($javascript)) {

echo $javascript->link('prototype.js');

echo $javascript->link('scriptaculous.js?load=effects.js');

echo $javascript->link('controls.js');

};

Artinya, kalau javascript anda telah diset ada, maka aplikasi akan bisa mengambil tools-tools ajax tersebut. Sebaliknya ini tidak akan berjalan bila browser anda mematikan javascript.

Sekarang tambahkan Helpers “Javascript” dan “Ajax” pada Controller anda.

Setelah itu, silalahkan anda baca API dan Manual dari CakePHP, untuk mempermudah menggunakan Helpers Ajax yang sudah disediakan. Sudah lengkap dan jelas kok, jadi jangan takut...

Saya kasih contoh satu hal untuk buat link yang ‘berbau’ ajax.

Gini caranya, silahkan perhatikan penjelasan yang ada di manual CakePHP :

link($title, $href, $options, $confirm, $escapeTitle);

options sendiri akan berisi :

$options[‘url’][‘update’][‘loading’]...bla...bla...

Nah, sebagai pemula kita pake 3 variable penting dulu aja ya....

Gini contohnya (lakukan ini di View anda) :

$ajax->link('klik saya', '/posts', array('update'=>'main',

'loading' =>"Element.show('load_page')", 'loaded'=>"Element.hide('load_page');

Effect.Appear('post')"));

Mudahkan? Begini penjelasannya..... untuk main, load_page, post...... merupakan nama id dari tag div, bagian yang akan kita update dengan menggunakan ajax, silahkan anda bikin sendiri sesuai kreatifitas. Nanti kalo anda sudah jago, ajarin saya juga ya...

OMG! it's a great article, Share Oh!