Second and final part of my Ajax tutorial. This part mostly covered the scripting stuff. This article first published in eKelas @ May 5^th, 2005. And yes, I’ll translate this into English asap

Implementasi

Untuk percobaan, kita akan membuat sebuah aplikasi voting/rating booth sederhana. Secara umum, kita akan menyiapkan 2 buah file, yaitu sebuah file HTML (atau PHP) untuk presentasi ke layar dan sebuah file script PHP untuk melakukan proses backend (retrieve & save data).

File pertama, vote.htm

[html]< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

[/html]

File kedua, sendVote.php

[php]< ?php

echo $_GET['value'];

?>[/php]

Sebelum dibahas, coba jalankan dulu dng cara memanggil file vote.htm. Perhatkan, pada saat Anda memilih nilai rating dan menekan tombol Vote, beberapa saat kemudian nilai tersebut akan muncul pada textbox di bawahnya.

Live Demo: http://www.funponsel.com/dev/ajax_vote/vote.php

Pada contoh pertama ini, proses berlangsung sangat sederhana. Pada saat tombol Vote ditekan, maka akan dilakukan pemanggilan function JS updateVote(). Dalam fungsi ini dilakukan pemanggilan thd file sendVote.php dng parameter id dan value yg diambil dari form. Proses pemanggilan dilakukan melalui obyek XMLHttpRequest.

Function handleHttpResponse bertujuan untuk menangani perubahan status request. Apabila status adalah 4, berarti proses telah selesai. Selanjutnya data akan diambil dari atribut ResponseText dan ditampilkan dlm textbox.

Script sendVote.php saat ini masih belum melakukan interaksi dng database. Prosesnya hanyalah menerima parameter value dan mengembalikannya sbg output. Itu sebabnya yg muncul pada textbox adalah nilai yg kita pilih.

Bagaimana dng function getHTTPObject()? Tidak perlu dipikir Intinya hampir sama dng fungsi yg ada pada bagian sebelumnya, hanya sedikit lebih detil (mbulet )

Perhatikan bahwa dlm contoh ini kita hanya menggunakan XHTML, DOM, dan XMLHttpRequest. Sesuai dng yg saya sebutkan sebelumnya DOM yg digunakan pun sangat sederhana, sekedar method getElementById saja.

Pada halaman selanjutnya, kita akan melakukan sedikit modifikasi untuk berkoneksi dng database.

Pages: 1 2 3