Membangun Aplikasi Web dengan
AJAX - Contoh
dibawah ini adalah script HTML yang merupakan interface dari web kita.
|
01: <html>
02: <head>
03: <script type='text/javascript'
src='ajax.js'></script>
04: <title>AJAX Kita</title>
05: </head>
06: <body>
07:
Pilih Merk dan type Handphone anda
08:
<form>
09:
<select name="merkhp" onchange="javascript:
doRequest('get','rpc.php?kode='+this.value,'text','typehp')";>
10:
<option value=''>- Pilih Merk HP -</option>
11:
<option value='1'>Nokia</option>
12:
<option value='2'>Siemens</option>
13:
<option value='3'>Sony-Ericsson</option>
14:
</select>
15:
<br><br>
16:
<div id="typehp">
17:
</div>
18: </form>
19: </body>
20: <html>
|
Pada
baris ke 03 contoh diatas terdapat deklarasi include javascript ajax.js.
Pemisahan javascript dan tag HTML sengaja dilakukan untuk mempermudah
maintenance aplikasi kita.
Pada
baris 09 terdapat pemanggilan event onchange pada combobox merk hp. Dimana
dalam event tersebut terdapat pemanggilan fungsi doRequest yang telah dibuat
pada class AJAX
diatas. Pada fungsi doRequest tersebut terdapat deklarasi parameter ‘rpc.php?kode=’+this.value.
parameter ini berfungsi sebagai link request browser ke web service.
Pada
baris 16 terdapat element HTML <div id=”typehp”>. Element div ini
berfungsi sebagai tempat untuk menampilkan hasil response yang berupa combobox
type handphone. Sebenarya hampir semua element bisa digunakan untuk menampilkan
hasil respon tidak hanya element div saja dengan catatan attribute id-nya
diisi. Contoh : <p id=”typehp”></p>
Sampai
disini kita sudah berhasil mendesain HTML-nya. Langkah terakhir kita tinggal membuat
script PHP-nya.
Script PHP
|
01:
<?php
02: $kode = $_GET['kode'];
03: switch ($kode) {
04: case
"1":
05: echo "<select>
06: <option>6280</option>
07: <option>9300</option>
08: <option>N90</option>
09: </select>";
10: break;
11: case "2":
12: echo "<select>
13: <option>CFX65</option>
14: <option>CX65</option>
15: <option>EF81</option>
16: </select>";
17: break;
18: case "3":
19: echo "<select>
20: <option>K700i</option>
21: <option>P910i</option>
22: <option>Z800i</option>
23: </select>";
24: break;
25: default:
26: echo "";
27: break;
28: }
29:
?>
|
Script PHP diatas masih sangat
sederhana, anda masih bisa dikembangkan misalnya dikoneksikan dengan database
MySql dan lain sebagainya.
Sampai
disini keseluruhan project kita telah selesai kita kerjakan. Untuk mencobanya
anda bisa mengaktifkan Apache anda, kemudian jalankan web tersebut pada browser
anda. Jika tidak ada kesalahan pada script anda, maka pada browser anda akan
muncul page autocomplete combobox tanpa load ulang isi page seperti gambar
disamping.
