modul 07 integrasi ajax

71

INTEGRASI AJAX

A. TUJUAN

� Memahami teknologi Ajax dan integrasinya dengan PHP. � Mampu menghasilkan aplikasi dengan pemrosesan silent. � Mampu memanfaatkan Ajax untuk menghasilkan aplikasi-aplikasi PHP

yang responsif.

B. ALOKASI WAKTU

C. PETUNJUK

D. DASAR TEORI

1. Sekilas Ajax

Meskipun bukan merupakan topik baru, namun Ajax masih sering diperbincangkan. Pada kenyataannya, Ajax memang mampu menyelesaikan sejumlah persoalan, terutama berkaitan dengan pemrosesan round-trip pada client-server.

Ajax (Asynchronous JavaScript and XML) merupakan suatu teknik pengembangan web yang digunakan untuk menghasilkan aplikasi web interaktif. Teknologi Ajax ini dimaksudkan untuk meningkatkan interaktifitas, kecepatan, fungsionalitas, dan kegunaan aplikasi web.

Secara garis besar, ada empat komponen pembentuk Ajax, yaitu:

� Presentasi berbasis browser

� Data (umumnya dalam format XML) yang diambil dari server.

� Pemrosesan data di balik layar dengan menggunakan objek XMLHttpRequest.

� JavaScript.

� Awali setiap aktivitas dengan do'a, semoga berkah dan mendapat kemudahan. � Pahami tujuan, dasar teori, dan latihan-latihan praktikum dengan baik dan benar. � Kerjakan tugas-tugas praktikum dengan baik, sabar, dan jujur. � Tanyakan kepada asisten/dosen apabila ada hal-hal yang kurang jelas.

MODUL VII

Modul Praktikum Pemrograman Web (PHP)

3 JS (3 x 50 menit)

Jurusan Teknik Elektro FT UM

72

E. LATIHAN

1. Dukungan Ajax

Pada dasarnya, komponen yang diperlukan untuk mengimplementasikan Ajax hanyalah browser dengan dukungan JavaScript. Terkait hal ini, meski kebanyakan browser sudah mendukung, namun perlu sekali dilakukan identifikasi.

Untuk melakukan identifikasi, buat file dukungan_ajax.html dan isikan kode berikut:

<! DOCTYPE HTML PUBLI C " - / / W3C/ / DTD HTML 4. 0 Tr ansi t i onal / / EN" > <ht ml xml ns=" ht t p: / / www. w3. or g/ 1999/ xht ml " xml : l ang=" en" l ang=" en" > <head> <t i t l e>Per i ksa Dukungan Aj ax</ t i t l e> </ head> <scr i pt l anguage=" JavaScr i pt " t ype=" t ext / j avascr i pt " > /** * Menciptakan objek XMLHttpRequest * @return true jika berhasil */ f unct i on cr eat eXml Ht t pRequest ( ) { // Untuk menyimpan reference ke objek XMLHttpRequest var xml Ht t p = f al se; i f ( wi ndow. Act i veXObj ect ) { // Jika menggunakan Internet Explorer xml Ht t p = new Act i veXObj ect ( " Mi cr osof t . XMLHTTP" ) ; } el se { // Untuk Mozilla dan browser lain xml Ht t p = new XMLHt t pRequest ( ) ; } i f ( ! xml Ht t p) { al er t ( " Gagal Menci pt akan Obj ek XMLHt t pRequest " ) ; } el se { r et ur n xml Ht t p; } } // Menciptakan objek XMLHttpRequest var xml Ht t p = cr eat eXml Ht t pRequest ( ) ; i f ( xml Ht t p) { al er t ( " OK, Suppor t Aj ax : - ) " ) ; } el se { al er t ( " Dukungan Aj ax t i dak di t emukan : - ( " ) ; } </ scr i pt > <body> </ body> </ ht ml >

73

Apabila muncul tampilan seperti Gambar 1, berarti dukungan Ajax tersedia dan sudah bekerja.

Gambar 1. Tampilan hasil pencarian data

2. Pemrosesan Data

Agar dapat lebih memahami implementasi Ajax, bagian ini akan menjelaskan pembuatan halaman penmrosesan dengan melibatkan dan tanpa Ajax.

� Pemrosesan Reguler

Buat kode program pemrosesan_reguler.php seperti di bawah, kemudian jalankan dan amati hasilnya setelah melakukan submisi.

<! DOCTYPE HTML PUBLI C " - / / W3C/ / DTD HTML 4. 0 Tr ansi t i onal / / EN" > <ht ml xml ns=" ht t p: / / www. w3. or g/ 1999/ xht ml " xml : l ang=" en" l ang=" en" > <head> <t i t l e>Pemr osesan Regul er ( Tanpa Aj ax) </ t i t l e> </ head> <body> <f or m act i on=" <?php $_SERVER[ ' PHP_SELF' ] ; ?>" met hod=" get " > Nama </ f or m> <?php i f ( i sset ( $_GET[ ' nama' ] ) ) { echo ' Hal l o, ' . $_GET[ ' nama' ] ; } ?> </ body> </ ht ml >

Pada saat pemrosesan dilakukan, apakah ada indikator yang menyatakan bahwa browser sedang bekerja?

74

� Pemrosesan AJAX

Untuk kasus yang sama, sekarang kita menyelesaikan dengan pendekatan Ajax. Buat kode HTML dan simpan dengan nama pemrosesan_ajax.html.

<! DOCTYPE HTML PUBLI C " - / / W3C/ / DTD HTML 4. 0 Tr ansi t i onal / / EN" > <ht ml xml ns=" ht t p: / / www. w3. or g/ 1999/ xht ml " xml : l ang=" en" l ang=" en" > <head> <t i t l e>Pemr osesan Menggunakan Aj ax</ t i t l e> </ head> <scr i pt l anguage=" JavaScr i pt " t ype=" t ext / j avascr i pt " > var xml Ht t p = f al se; f unct i on cr eat eXml Ht t pRequest ( ) { var xml Ht t p = f al se; i f ( wi ndow. Act i veXObj ect ) { / / J i ka menggunakan I nt er net Expl or er xml Ht t p = new Act i veXObj ect ( " Mi cr osof t . XMLHTTP" ) ; } el se { / / Unt uk Mozi l l a dan br owser l ai n xml Ht t p = new XMLHt t pRequest ( ) ; } i f ( ! xml Ht t p) { al er t ( " Gagal Menci pt akan Obj ek XMLHt t pRequest " ) ; } el se { r et ur n xml Ht t p; } } f unct i on pr osesDat a( ur l , par am) { xml Ht t p = cr eat eXml Ht t pRequest ( ) ; i f ( xml Ht t p. r eadySt at e == 4 | | xml Ht t p. r eadySt at e == 0) { / / Eksekusi sour ce dar i ser ver xml Ht t p. open( " GET" , ur l + par am, t r ue) ; xml Ht t p. onr eadyst at echange = handl eRespon; / / Membuat r equest xml Ht t p. send( nul l ) ; } el se { set Ti meout ( " pr osesDat a( ur l , par am) " , 1000) ; } } f unct i on handl eRespon( ) { i f ( xml Ht t p. r eadySt at e == 4) { i f ( xml Ht t p. st at us == 200) { document . get El ement ByI d( ' hasi l ' ) . i nner HTML = xml Ht t p. r esponseText ; } el se { al er t ( " Er r or : " + xml Ht t p. st at usText ) ; } } } </ scr i pt > </ head> <body> <f or m name=" my_f or m" >

75

Nama: </ f or m> Respon Ser ver : <! - - Pent i ng, i ni unt uk menampi l kan hasi l - - > <di v i d=" hasi l " ></ di v> </ body> </ ht ml >

Langkah selanjutnya, buat kode PHP untuk melakukan pemrosesan silent (di balik layar) dan simpan dengan nama pemrosesan_ajax.php (sesuaikan dengan penetapan di HTML).

<?php i f ( i sset ( $_GET[ ' nama' ] ) ) { echo ' Hal l o, ' . $_GET[ ' nama' ] ; } ?>

Pada saat pemrosesan dilakukan, apakah ada indikator yang menyatakan bahwa browser sedang bekerja? Jelaskan!

Sekilas, pendekatan Ajax terlihat cukup rumit dan memerlukan kode program lebih banyak. Namun dapam implementasinya, kita bisa menerapkan aspek guna ulang (reusability) sehingga lebih praktis.

3. Aplikasi Database Berbasis Ajax

Kemampuan Ajax yang paling menarik adalah akses data di database secara silent. Pendekatan ini secara nyata mampu mereduksi traffic dan meningkatkan performa aplikasi.

Sebagai contoh, di sini kita akan membuat halaman pertama berupa nim mahasiswa yang diletakkan di combobox (seleksi). Begitu dipilih, nantinya akan ditampilkan halaman detail data.

File: seleksi_ajax.php

<! DOCTYPE HTML PUBLI C " - / / W3C/ / DTD HTML 4. 0 Tr ansi t i onal / / EN" > <ht ml xml ns=" ht t p: / / www. w3. or g/ 1999/ xht ml " xml : l ang=" en" l ang=" en" > <head> <t i t l e>Apl i kasi Dat abase Aj ax</ t i t l e> </ head> <scr i pt l anguage=" JavaScr i pt " t ype=" t ext / j avascr i pt " > var xml Ht t p = f al se;

76

f unct i on cr eat eXml Ht t pRequest ( ) { var xml Ht t p = f al se; i f ( wi ndow. Act i veXObj ect ) { xml Ht t p = new Act i veXObj ect ( " Mi cr osof t . XMLHTTP" ) ; } el se { xml Ht t p = new XMLHt t pRequest ( ) ; } i f ( ! xml Ht t p) { al er t ( " Gagal menci pt akan Obj ek" ) ; } r et ur n xml Ht t p; } f unct i on showDat a( ur l , i d) { xml Ht t p = cr eat eXml Ht t pRequest ( ) ; i f ( xml Ht t p. r eadySt at e == 4 | | xml Ht t p. r eadySt at e == 0) { / / Membent uk ur l dan ar gumen var ur l = ur l + " ?i d=" + i d; xml Ht t p. onr eadyst at echange = handl eRespon; xml Ht t p. open( " GET" , ur l , t r ue) xml Ht t p. send( nul l ) } el se { / / J i ka gagal , coba set el ah 1 det i k set Ti meout ( ' showDat a( ur l , i d) ' , 1000) ; } } f unct i on handl eRespon( ) { i f ( xml Ht t p. r eadySt at e == 4) { i f ( xml Ht t p. st at us == 200) { document . get El ement ByI d( ' hasi l ' ) . i nner HTML = xml Ht t p. r esponseText ; } el se { al er t ( " Er r or : " + xml Ht t p. st at usText ) ; } } } </ scr i pt > </ head> <body> <?php r equi r e_once ' . / koneksi . php' ; $sql = ' SELECT ni m FROM mahasi swa' ; $r es = mysql _quer y( $sql ) ; i f ( $r es && mysql _num_r ows( $r es) ) { ?> <f or m> NI M: <sel ect name=" ni m" onchange=" showDat a( ' show_dat a. php' , t hi s. val ue) ; " > <?php whi l e ( $r ow = mysql _f et ch_r ow( $r es) ) { ?> <opt i on val ue=" <?php echo $r ow[ 0] ; ?>" ><?php echo $r ow[ 0] ; ?></ opt i on> <?php } ?> </ sel ect >

77

</ f or m> <?php } ?> <! - - Pent i ng, i ni unt uk menampi l kan hasi l - - > <di v i d=" hasi l " ></ di v> </ body </ ht ml >

Langkah selanjutnya, siapkan kode PHP untuk menampilkan detail data di file show_data.php.

<?php r equi r e_once ' . / koneksi . php' ; $i d = $_GET[ ' i d' ] ; $sql = " SELECT * FROM mahasi swa WHERE ni m = $i d" ; $r es = mysql _quer y( $sql ) ; i f ( $r es) { i f ( mysql _num_r ows( $r es) ) { ?> <t abl e bor der =1 cel l spaci ng=1 cel l paddi ng=5> <t r > <t h>#</ t h> <t h wi dt h=100>NI M</ t h> <t h wi dt h=150>Nama</ t h> <t h wi dt h=200>Al amat </ t h> </ t r > <?php $i = 1; whi l e ( $r ow = mysql _f et ch_r ow( $r es) ) { ?> <t r > <t d> <?php echo $i ; ?> </ t d> <t d> <?php echo $r ow[ 0] ; ?> </ t d> <t d> <?php echo $r ow[ 1] ; ?> </ t d> <t d> <?php echo $r ow[ 2] ; ?> </ t d> </ t r > <?php $i ++; } ?> </ t abl e> <?php } el se { echo ' Dat a Ti dak Di t emukan' ; } } ?>

78

4. Indikator Proses

Keberadaan indikator loading terkadang sangat diperlukan untuk mengindikasikan apakah permintaan mendapat tanggapan ataukah tidak. Bagaimanapun juga, sifat dasar aplikasi-aplikasi Ajax yang berjalan tanpa melibatkan indikator browser mengakibatkan kebutuhan akan indikator ini menjadi semakin penting.

Sebagai contoh, di sini kita akan menggunakan kode di pembahasan sebelumnya dan menambahkan indikator proses. Adapun langkahnya adalah menambahkan baris tebal berikut pada fungsi handleRespon().

File: seleksi_loading.php

<! DOCTYPE HTML PUBLI C " - / / W3C/ / DTD HTML 4. 0 Tr ansi t i onal / / EN" > <ht ml xml ns=" ht t p: / / www. w3. or g/ 1999/ xht ml " xml : l ang=" en" l ang=" en" > <head> <t i t l e>Apl i kasi Dat abase Aj ax</ t i t l e> </ head> <scr i pt l anguage=" JavaScr i pt " t ype=" t ext / j avascr i pt " > var xml Ht t p = f al se; f unct i on cr eat eXml Ht t pRequest ( ) { var xml Ht t p = f al se; i f ( wi ndow. Act i veXObj ect ) { xml Ht t p = new Act i veXObj ect ( " Mi cr osof t . XMLHTTP" ) ; } el se { xml Ht t p = new XMLHt t pRequest ( ) ; } i f ( ! xml Ht t p) { al er t ( " Gagal menci pt akan Obj ek" ) ; } r et ur n xml Ht t p; } f unct i on showDat a( ur l , i d) { xml Ht t p = cr eat eXml Ht t pRequest ( ) ; i f ( xml Ht t p. r eadySt at e == 4 | | xml Ht t p. r eadySt at e == 0) { / / Membent uk ur l dan ar gumen var ur l = ur l + " ?i d=" + i d; xml Ht t p. onr eadyst at echange = handl eRespon; xml Ht t p. open( " GET" , ur l , t r ue) xml Ht t p. send( nul l ) } el se { / / J i ka gagal , coba set el ah 1 det i k set Ti meout ( ' showDat a( ur l , i d) ' , 1000) ; } } f unct i on handl eRespon( ) { / / Pr oses j i ka obj ek kompl i t ( kode = 4) i f ( xml Ht t p. r eadySt at e == 4) { i f ( xml Ht t p. st at us == 200) { / / Set t eks document . get El ement ByI d( ' hasi l ' ) . i nner HTML = xml Ht t p. r esponseText ; } el se { al er t ( " Er r or : " + xml Ht t p. st at usText ) ;

79

} // Jika belum komplit // tampilkan animasi indikator } el se { document . get El ement ByI d( ' hasi l ' ) . i nner HTML = ' ' ; } } </ scr i pt > </ head> <body> <?php r equi r e_once ' . / koneksi . php' ; $sql = ' SELECT ni m FROM mahasi swa' ; $r es = mysql _quer y( $sql ) ; i f ( $r es && mysql _num_r ows( $r es) ) { ?> <f or m> NI M: <sel ect name=" ni m" onchange=" showDat a( ' show_dat a. php' , t hi s. val ue) ; " > <?php whi l e ( $r ow = mysql _f et ch_r ow( $r es) ) { ?> <opt i on val ue=" <?php echo $r ow[ 0] ; ?>" ><?php echo $r ow[ 0] ; ?></ opt i on> <?php } ?> </ sel ect > </ f or m> <?php } ?> <! - - Pent i ng, i ni unt uk menampi l kan hasi l - - > <di v i d=" hasi l " ></ di v> </ body </ ht ml >

Sebelum Anda menguji hasilnya, pastikan bahwa Anda sudah menyiapkan file animasi, misalnya dalam contoh ini adalah loading.gif.

Contoh tampilan indikator progres diperlihatkan seperti pada Gambar 2.

80

Gambar 2. Tampilan indikator proses Ajax



81

F. TUGAS PRAKTIKUM

1. Buat aplikasi pencarian data dengan mengimplementasikan Ajax. Contoh tampilan hasil diperlihatkan seperti Gambar 3.



Gambar 3. Pencarian dan penyaringan menggunakan Ajax

modul 07 integrasi ajax

Documents