1 MODUL PEMROGRAMAN WEB AJAX Rajif Agung Yunmar, S.Kom STMIK AMIKOM Yogyakarta 20112 DAFTAR ISI AJAX XMLHttpRequest XMLHttpRequest Method Metode Open ...
2. XML ......................................................................................................................... 12 2.1 DOM .................................................................................................................. 12 3. Dynamic Data Operation ........................................................................................ 18 Daftar Pustaka ............................................................................................................. 28
AJAX AJAX merupakan singkatan dari Asynchronous JavaScript And XML. AJAX bukanlah bahasa pemrograman, melainkan suatu teknik yang digunakan untuk membuat aplikasi website menjadi lebih interaktif. Disebut asynchronous karena sebagian besar interaksi dan pertukaran data antara web browser dengan web server dilakukan dibelakang layar. Sehingga halaman web tidak harus selalu dimuat ulang secara keseluruhan setiap kali pengguna melakukan perubahan. Hal ini akan meningkatkan interaktifitas, kecepatan dan usability. Dalam pengembangan web, pemanfaatan teknik AJAX seringkali disebut dengan istilah WEB 2.0 (baca: web two point O). Dengan teknik ini, kita dapat membuat sebuah aplikasi web yang lebih kaya dan interaktif. Sehingga banyak yang menyebutnya dengan istilah RIA (Rich Internet Application). Untuk memahami konsep AJAX, pertama kali kita harus memahami bagaimana sebuah web browser melakukan request dan menerima respon dari web server. Browser berkomunikasi dengan web server menggunakan metode berbasiskan HTTP (HyperText Transfer Protocol). Metode request HTTP yang sering digunakan dengan cara ini adalah metode POST dan GET. Pada saat client mengirimkan request terhadap server, client akan menunggu sampai proses yang diminta selesai dikerjakan, kemudian server akan mengembalikan hasil proses tersebut kepada client. waktu
request
respon
web server
client web browser
client web browser menunggu
1
Hal ini berbeda dengan AJAX, dimana client dapat mengerjakan hal lain walaupun request yang dikirimkan terhadap server belum selesai dikerjakan. Bilamana request telah dikerjakan, AJAX hanya perlu mengupdate data pada halaman web yang telah ada tanpa relakukan reload terhadap halaman web. web server
client web browser AJAX merupakan kombinasi dari teknologi dan bahasa pemrograman yang telah ada. Diataranya sebagai berikut: •
XMLHttpRequest Object.
•
DOM (Document Object Model). Diakses dengan client side scripting language seperti JavaScript atau VBScript.
•
XML. Umumnya digunakan sebagai dokumen transfer, walaupun format lain juga memungkinkan, seperti HTML dan plain text. XML lebih dianjurkan karena kemudahan akses dan penanganannya menggunakan DOM.
•
JSON dapat menjadi pilihan alternatif sebagai dokumen transfer, mengingat JSON adalah bagian dari JavaScript, sehingga pengolahannya akan lebih mudah.
1. XMLHttpRequest XMLHttpRequest adalah sebuah object JavaScript yang digunakan untuk menangani request browser kepada web server tanpa perlu melakukan reload (background request) terhadap halaman web. Kecuali Internet Explorer, sebagian besar web browser mendefinisikan XMLHttpRequest sebagai JavaScript object. Internet Explorer mendefinisikan object ini sebagai ActiveX Control. Sehingga diperlukan sebuah mekanisme khusus dari programmer agar sebuah XMLHttpRequest dapat didefinisikan dengan benar. Berikut ini adalah pembuatan XMLHttpRequest dengan JavaScript pada browser:
2
Untuk membuat object XMLHttpRequest pada browser Firefox, Safari, Opera atau Mozilla based browser: xmlhttp = new XMLHttpRequest();
Untuk membuat object XMLHttpRequest pada browser IE 7 keatas: xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
Untuk membuat object XMLHttpRequest pada browser IE 6 kebawah: xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
Dari tiga kemungkinan diatas, kita dapat membuat sebuah fungsi untuk pembuatan object XMLHttpRequest dengan cara mendeteksi web browser yang digunakan oleh user. 09.latihan_01.js function createXMLHttpObject(){ var xmlhttp = false; try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (E) { xmlhttp = false; } } if (!xmlhttp && typeof XMLHttpRequest != 'undefined'){ xmlhttp = new XMLHttpRequest(); } if(!xmlhttp){ alert("Terjadi kesalahan saat pembuatan XMLHttpRequest object!"); } else { alert("XMLHttpRequest berhasil dibuat."); } }
return xmlhttp;
Program tersebut diatas berguna untuk membuat sebuah object XMLHttpRequest. Pertama kali program akan membuat object XMLHttpRequest untuk browser Internet Explorer versi 7 keatas melalui statement: try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }
3
Jika terjadi kegagalan atau error dalam pembuatan object, program akan melakukan antisipasi dengan cara membuat object XMLHttpRequest untuk browser Internet Explorer versi 6 kebawah melalui statement catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (E) { xmlhttp = false; } }
Jika pembuatan object XMLHttpRequest masih juga gagal, maka dapat disimpulkan bahwa browser yang digunakan bukanlah Internet Explorer. Selanjutnya akan dibuat object XMLHttpRequest untuk browser lain (Firefox, Safari, Opera atau Mozilla based) melalui statement: if (!xmlhttp && typeof XMLHttpRequest != 'undefined'){ xmlhttp = new XMLHttpRequest(); }
Bagian skrip program selanjutnya akan memeriksa kondisi dari object XMLHttpRequest. if(!xmlhttp){ alert("Terjadi kesalahan saat pembuatan XMLHttpRequest object!"); } else { alert("XMLHttpRequest berhasil dibuat."); }
Jika variabel xmlhttp yang merupakan perwujudan object XMLHttpRequest masih bernilai false, maka kemungkinan besar browser yang digunakan bukanlah 5 browser yang disebutkan diatas atau browser tersebut belum mendukung object XMLHttpRequest. Sekarang, marilah kita coba gabungkan antara skrip latihan sebelumnya dengan file HTML untuk membuat sebuah object XMLHttpRequest. 09.latihan_02.html Pembuatan Object XMLHttpRequest <script language="JavaScript" src="09.latihan_01.js"> Halaman ini memanggil fungsi createXMLHttpObject() yang berguna untuk membuat object XMLHttpRequest.
4
Contoh latihan tersebut diatas akan menyertakan JavaScript ke halaman web. Fungsi createXMLHttpObject() digunakan untuk membuat object XMLHttpRequest akan
dijalankan saat dokumen halaman web dimuat. Setelah object XMLHttpRequest berhasil dibuat, selanjutnya object ini dapat dimanfaatkan untuk berkomunikasi secara asynchronous dengan web server. Seperti object JavaScript lainnya, XMLHttpRequest juga memiliki method, event dan properti yang nantinya digunakan untuk berkomunikasi dengan web server.
1.1 XMLHttpRequest Method Dalam object XMLHttpRequest terdapat beberapa metode yang digunakan untuk melakukan request. Berikut ini diantaranya: Metode
Deskripsi
open()
Melakukan komunikasi dengan server
send()
Mengirimkan request
abort()
Membatalkan request
1.1.1 Metode Open Metode open() digunakan untuk membuat koneksi untuk komunikasi dan request kepada server. Berikut ini adalah format umum dari metode ini: <XMLHttpRequest object>.open("<request_type>","<request_url>",);
request_type
= HTTP request type (GET / POST)
request_url
= alamat URL yang hendak dikomunikasikan
async_status
= asynchronous status (true / false) 5
1.1.2 Metode Send Metode open() hanya digunakan untuk membuka koneksi komunikasi dengan web server. Sedangkan untuk mengirimkan request dan data-data lain yang diperlukan kepada web server digunakan metode lainnya, yaitu send(). Berikut ini adalah format umum dari metode ini: <XMLHttpRequest object>.send();
1.1.3 Metode Abort Terdapat suatu keadaan dimana request yang dikirimkan ke web server mengalami kendala. Kendala ini bisa disebabkan oleh banyak faktor, contohnya: koneksi yang lambat membuat request seakan tidak pernah selesai. Sehingga request perlu dibatalkan dan dikirimkan ulang. Metode abort() dapat digunakan untuk membatalkan request yang telah dikirimkan. Berikut ini adalah format umum dari metode ini: <XMLHttpRequest object>.abort();
1.2 XMLHttpRequest Property 1.2.1 Properti readyState Properti ini digunakan untuk mengetahui status perubahan dari request yang dikirimkan ke web server. Properti ini diubah melalui event onreadystatechange, cara kerja event onreadystatechange akan dijelaskan pada sub-bab selanjutnya. Berikut ini adalah status
yang ada didalam properti ini: Status
Deskripsi
0
Uninitialized. Belum diinisialisasi. Koneksi belum terbentuk.
1
Loading. Metode open() berhasil dijalankan.
2
Loaded. Koneksi terbentuk dan response header telah diterima.
3
Interactive. Respon dari server dalam bentuk data sedang didownload.
4
Completed. Data selesai didownload.
1.2.2 Properti Status Properti ini menyatakan respon kode status dari server dalam bentuk numerik. Berikut ini adalah beberapa tipe kode status respon: Kode
Deskripsi
200
OK. Dokumen atau file ditemukan dan dapat diakses. 6
304
Not Modified. Mengindikasikan bahwa salinan dokumen yang terdapat pada cache web browser sama persis (tidak ada yang berubah) dengan dokumen yang ada di web server.
401
Unauthorized. Dibutuhkan authorisasi khusus untuk mengakses dokumen.
403
Forbidden. User tidak memiliki hak untuk mengakses dokumen yang diminta.
404
Not Found. Dokumen atau file yang dimaksud tidak ditemukan.
500
Internal Service Error. Terdapat kesalah teknis didalam server.
503
Service Unavailable. Jenis layanan yang diinginkan tidak dikenali. Juga seringkali digunakan untuk memberitahu bahwa server dalam tahap maintenance atau overloaded service.
1.2.3 Properti statusText Sama halnya seperti properti status, properti statusText digunakan untuk menyatakan response status dari server. Hanya saja status yang diberikan dalam bentuk keterangan. Misalnya: respon 404 akan disampaikan dalam bentuk “Not Found”, 403 dalam bentuk “Forbidden” dan seterusnya. 1.2.4 Properti responseText Properti ini berisi data yang merupakan hasil komunikasi / respon request dari server dalam format plaint text (teks murni). 1.2.5 Properti responseXML Properti ini berisi data yang merupakan hasil komunikasi / respon request dari server dalam format XML.
1.3 XMLHttpRequest Event 1.3.1 Event onreadystatechange Event ini digunakan untuk mengetahui status dari request yang telah dikirimkan. Ketika terjadi perubahan pada status request, event ini akan dijalankan dan mengupdate nilai dari properti readyState yang terdapat pada object XMLHttpRequest. Cara kerja event ini dapat dijelaskan sebagai berikut: •
Ketika metode open() berhasil dijalankan, nilai dari properti readyState akan diubah menjadi 1.
•
Ketika metode send() berhasil dijalankan dan response header telah diterima, nilai dari properti readyState akan diubah menjadi 2
•
Ketika browser mendapat perintah dari server untuk memulai memuat data yang 7
diinginkan, event onreadystatechange akan mengubah nilai dari properti readyState menjadi 3.
•
Ketika data yang diinginkan telah berhasil didownload dengan lengkap, event onreadystatechange akan mengubah nilai dari properti readyState menjadi 4.
1.4 Object innerHTML Object innerHTML merupakan turunan dari object document. innerHTML berisi content (lihat lagi bab 1, bagian struktur element HTML) dari element HTML, yaitu nilai / value yang terletak diatara tag pembuka dan tag penutup. Contoh:
innerHTML disini
<span id="element_2">innerHTML disini
Untuk dapat mengambil atau mengubah data secara on the fly (tanpa melakukan reload) pada sebuah element HTML, diperlukan sebuah pengenal yang melekat pada element tersebut. Pengenal ini dapat didefinisikan melalui atribut ID. Hubungan penggunaan object innerHTML dan atribut ID didalam program dapat dilihat pada contoh berikut ini: 09.latihan_03.html Object innerHTML <script language="JavaScript"> function ubahInnerHTML(){ document.getElementById("divContent").innerHTML = "Sesuatu"; }
innerHTML adalah sebuah turunan dari object document.
Saat user menekan link, event onClick akan menjalankan fungsi ubahInnerHTML(). Fungsi ini mempunyai tugas untuk mengubah content element HTML yang mempunyai ID “divContent” . Seperti yang ditunjukkan pada baris perintah berikut ini: document.getElementById("divContent").innerHTML = "Sesuatu";
Sehingga hasilnya menjadi seperti screenshot berikut:
1.5 Implementasi XMLHttpRequest Untuk memperjelas uraian yang telah disampaikan mengenai object XMLHttpRequest beserta method, event dan properti yang menyertainya, sekarang buatlah program seperti contoh berikut: 09.latihan_04.html Contoh implementasi object XMLHttpRequest <script language="JavaScript"> function createXMLHttpObject(){ var xmlhttp = false; try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (E) { xmlhttp = false; } } if (!xmlhttp && typeof XMLHttpRequest != 'undefined'){ xmlhttp = new XMLHttpRequest(); } if(!xmlhttp){ alert("Terjadi kesalahan saat pembuatan XMLHttpRequest object!"); }
Tidak lupa, buatlah file lain yang nantinya akan digunakan sebagai file yang akan direquest oleh dari server dan datanya akan ditampilkan oleh program AJAX yang kita buat. 09.latihan_05.html atau simpan dengan nama dataLoad.html Untitled Document
File dataLoad.html
Apapun isi dari file ini akan ditampilkan pada element HTML yang dituju.
Data yang dimuat disini dapat berupa data statis maupun data yang sudah diolah terlebih dahulu oleh server.
10
Setelah program ditampilkan pada browser sebagaimana yang ditunjukkan oleh screenshot diatas, cobalah untuk menekan link yang tersedia pada halaman web tersebut. Pada
link
tersebut
terdapat
event
onClick
yang
memicu
berjalannya
fungsi
requestContent(). Fungsi ini digunakan untuk mengambil data dari server kemudian
menampilkannya pada element yang diinginkan. Pertama kali, program akan membuat sebuah object XMLHttpRequest melalui statement: reqObj = createXMLHttpObject();
Kemudian program akan memulai melakukan requst kepada server secara asynchronous menggunakan
metode
GET
dengan
alamat
server
yang
dituju
adalah
“http://localhost/web/dataLoad.html” seperti yang ditunjukkan oleh statement: reqObj.open("GET","http://localhost/web/dataLoad.html",true);
Kemudian program akan melakukan pemeriksaan status dari request yang disampaikan kepada server melalui event onreadystatechange. Event ini akan terus memeriksa status komunikasi, sampai data yang diinginkan diterima dengan seutuhnya. Jika data yang diminta telah selesai ditransfer (ditandai dengan properti readyState = 4 dan status = 200), maka data tersebut akan dituliskan ke element HTML yang dituju, yaitu “divContent”. Sedangkan jika data yang diminta belum terpenuhi, maka “divContent” akan ditulisi “loading..”. Seperti yang ditunjukkan oleh statement berikut: reqObj.onreadystatechange = function(){ if(reqObj.readyState == 4 && reqObj.status == 200){ document.getElementById("divContent").innerHTML = reqObj.responseText; } else { document.getElementById("divContent").innerHTML = "loading.."; } }
11
Request akan dikirimkan ke server melalui statement: reqObj.send(null);
2. XML XML merupakan singkatan dari eXtensible Markup Language. Seperti halnya HTML, XML tersusun dari element-element. Dimana element-element ini terdiri dari dari tag pembuka dan tag penutup serta mempunyai ID dan atribut. Perbedaannya ialah jika pada HTML, element penyusunnya sudah terstandarisasi. Berbeda dengan XML yang memungkinkan element-element XML dideklarasikan dengan lebih fleksibel. Dengan begitu, setiap orang dapat menentukan element yang akan dibuat sesuai keinginannya.
2.1 DOM Untuk membaca data dalam format XML, diperlukan sebuah mekanisme khusus yang disebut DOM. DOM adalah singkatan dari Data Object Model yang merupakan cara pandang JavaScript didalam melihat struktur data dari dokumen markup yang terdiri dari tag, ID dan atribut. Contoh: Dimiliki sebuah dokumen HTML yang berisi data sebagai berikut: Website title
Data didalam body
12
Maka DOM akan memresentasikan data dalam dokumen tersebut sebagaimana ditunjukkan oleh diagram berikut ini: html
head
body
title
div
Website title
Data didalam body
Sebuah data dalam format XML memiliki tag, atribut dan ID dapat dibaca oleh fasilitas DOM yang disediakan oleh JavaScript melalui fungsi dan object sebagai berikut: Fungsi
Keterangan
getElementsByTagName Membaca data berdasarkan nama element getElementById
Membaca data berdasarkan ID element
getAttribute
Membaca data berdasarkan atribut element
Object
Keterangan
firstChild
Membaca node array pertama dari data element yang dibaca
lastChild
Membaca node array terakhir dari data element yang dibaca
Property
Keterangan
data
Membaca content dari element yang dimaksud
innerHTML
Membaca atau menulis data dari element HTML yang dimaksud. Object ini berbeda dengan object data sebelumnya, karena properti innerHTML tidak hanya berupa content saja tapi juga berisi element-element XML lainnya
13
Berikut ini adalah contoh pembacaan data XML menggunakan JavaScript dengan request secara asynchronous. 09.latihan_06.xml atau simpan dengan nama contactList.xml <xml id="contactList"> RajivaJl. Taman Siswa Yogyakarta0852 9233 1xxx0274 212 4040274 313 501 <email>[email protected]
09.latihan_07.js function createXMLHttpObject(){ var xmlhttp = false; try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (E) { xmlhttp = false; } } if (!xmlhttp && typeof XMLHttpRequest != 'undefined'){ xmlhttp = new XMLHttpRequest(); } if(!xmlhttp){ alert("Terjadi kesalahan saat pembuatan XMLHttpRequest object!"); } }
Contoh latihan tersebut diatas digunakan untuk mengambil data dalam bentuk XML yang berupa detail kontak. Kemudian program mengolah data tersebut menjadi bagian-bagian yang diinginkan. Cara kerja dari program dapat dijelaskan sebagai berikut: Ketika
link
pada
program
ditekan,
event
onClick
akan
menjalankan
fungsi
requestContent(). Fungsi tersebut kemudian membuat sebuah object XMLHttpRequest
dan membuat koneksi secara asynchronous dengan metode GET seperti yang ditunjukkan oleh statement berikut: reqObj = createXMLHttpObject(); reqObj.open("GET","http://localhost/web/contactList.xml",true);
Setelah request selesai diproses oleh server dan hasil dalam bentuk XML telah diterima dengan lengkap, program kemudian mengolah data dalam bentuk XML tersebut menjadi bagian-bagian yang diinginkan. Proses pertama yang dilakukan adalah membaca data dari variabel dataXML berdasarkan tag contact seperti yang ditunjukkan oleh statement dibawah ini: dataXML = reqObj.responseXML; contact = dataXML.getElementsByTagName("contact")[0];
Pada statement diatas, dibelakang fungsi getElementsByTagName ditambahi string [0] pada bagian belakang statement. Ini karena JavaScript mengolah data hasil pengolahan fungsi getElementsByTagName sebagai sebuah array.
16
Dengan ditambahkannya string [0] pada akhir statement, maka data kontak yang diambil adalah data yang pertama (element pertama dari array dimulai dari index 0). Setelah statement tersebut dijalankan, variabel contact akan berisi semua data yang terletak diantara tag ... . Proses selanjutnya adalah mengolah data yang terkandung pada variabel contact menjadi bagian-bagian yang kita inginkan. Proses pembacaanya datanya masih menggunakan
fungsi
getElementsByTagName,
namun
menggunakan
object
firstChild.data untuk membaca data text (content) yang terkandung pada masing-
masing tag. Berikut ini adalah statement yang digunakan: nama alamat phone_1 phone_2 phone_3 email
Proses pengolahan data seperti yang ditunjukkan oleh potongan program diatas hampir sama untuk data satu item dengan yang lainnya. Yang menjadi perhatian disini adalah pengolahan data untuk tag phone. Oleh karena terdapat tiga tag phone didalam satu data kontak, maka hasil pengolahan data oleh fungsi getElementsByTagName juga akan menghasilkan tiga item yang ditampung dalam satu array. Oleh karena itu, masing-masing element pada array tersebut dapat dipanggil melalui index 0, 1 atau 2. Proses selanjutnya adalah menempatkan data-data hasil pengolahan tadi kedalam element HTML yang diinginkan melalui properti innerHTML. Perhatikan potongan program berikut ini: document.getElementById("txtName").innerHTML = nama; document.getElementById("txtAddress").innerHTML = alamat; document.getElementById("txtMobilePhone").innerHTML = phone_1; document.getElementById("txtHomePhone").innerHTML = phone_2; document.getElementById("txtOfficePhone").innerHTML = phone_3; document.getElementById("txtEmail").innerHTML = email;
17
3. Dynamic Data Operation Jika dalam banyak contoh sebelumnya kita banyak menggunakan metode GET dan data statis, kali ini kita akan mencoba menggunakan metode POST dan data dinamis dengan melibatkan basis data. Untuk itu, terlebih dahulu kita siapkan basis data dan struktur tabelnya. 09.latihan_09.sql CREATE TABLE komentar ( nama VARCHAR(35) NOT NULL, email VARCHAR(125) NOT NULL, komentar TEXT NOT NULL, waktu_input DATETIME NOT NULL );
Kemudian, buatlah halaman web yang menyediakan form input komentar beserta fungsi AJAX yang digunakan untuk mengirimkan data yang diinputkan ke server dengan menggunakan komunikasi secara asynchronous. 09.latihan_10.js function createXMLHttpObject(){ var xmlhttp = false; try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (E) { xmlhttp = false;
18
} } if (!xmlhttp && typeof XMLHttpRequest != 'undefined'){ xmlhttp = new XMLHttpRequest(); } if(!xmlhttp){ alert("Terjadi kesalahan saat pembuatan XMLHttpRequest object!"); } }
return xmlhttp;
function submitComment(){ reqObj = createXMLHttpObject(); reqObj.open("POST","http://localhost/web/09.latihan_12.php",true); reqObj.onreadystatechange = function(){ if(reqObj.readyState == 4 && reqObj.status == 200){ dataXML = reqObj.responseXML; comment = dataXML.getElementsByTagName("comment_data")[0]; nama email content time
09.latihan_12.php ".$sql."."); // ambil komentar terakhir dari basis data $sql = "SELECT * FROM komentar "; $sql.= "ORDER BY waktu_input DESC "; $sql.= "LIMIT 0,1"; $hasil = mysql_query($sql) or exit("Error query : ".$sql."."); if(mysql_num_rows($hasil)>0){ $data = mysql_fetch_assoc($hasil); // tampilkan data dalam format XML header("Content-type: application/xhtml+xml"); ?> <email>
21
Rangkaian program untuk input data komentar menggunakan AJAX dengan metode POST diatas terdiri dari 3 bagian penting. •
Pertama, halaman web yang menyediakan form input data komentar.
•
Kedua, program JavaScript yang digunakan untuk melakukan komunikasi dan mengirimkan data komentar ke server secara asynchronous kemudian mengolah hasil yang dikembalikan oleh server.
•
Ketiga, program PHP disisi server yang berguna untuk menyimpan data yang dikirimkan kedalam basis data. Kemudian menampilkan data tersebut dalam bentuk XML untuk diolah lebih lanjut oleh program JavaScript disisi client.
Program 09.latihan_11.html menyediakan form dengan empat element input, yaitu dua element input dengan tipe text, satu element textarea dan satu element dengan tipe submit. Ketika user telah menginputkan data kemudian menekan tombol submit, event onSubmit pada form akan menjalankan fungsi submitComment() yang telah didefinisikan pada program 09.latihan_10.js. Fungsi ini akan mengirimkan data komentar menggunakan metode POST ke server secara asynchronous. Sebelum dikirimkan, data-data yang diinputkan user akan ditampung pada variabel post_str terlebih dahulu. Seperti yang ditunjukkan oleh potongan program JavaScript berikut: 22
Untuk mengirimkan data dengan metode POST, diperlukan tambahan pada request header agar server dapat mengenali dan mengelola data yang dikirimkan dalam bentuk POST. Seperti yang ditunjukkan oleh potongan program JavaScript berikut: reqObj.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); reqObj.setRequestHeader('Content-length', post_str.length); reqObj.setRequestHeader('Connection', 'close');
Persiapan pengiriman data telah selesai dan data siap untuk dikirimkan. reqObj.send(post_str);
Server yang menerima request akan mengolah data yang dikirimkan. File yang dituju oleh request tersebut adalah program 09.latihan_12.php. Pertama kali, program ini akan menyertakan file koneksi.php bertugas untuk melakukan koneksi terhadap basis data dan memilih basis data yang hendak dioperasikan. include("koneksi.php");
Setelah itu, data yang dikirimkan oleh client akan diimplementasikan ke query yang ditampung dalam variabel $sql. $sql = "INSERT INTO komentar (nama,email,komentar,waktu_input) VALUES "; $sql.= "('".$_POST['txtName']."','".$_POST['txtEmail']."',"; $sql.= "'".$_POST['txtComment']."',now())";
Query tersebut kemudian dijalankan melalui PHP melalui statement berikut: mysql_query($sql) or exit("Error query : ".$sql.".");
Setelah itu program akan mengambil data komentar terakhir. Data ini diambil dari basis data menggunakan statement berikut: $sql = "SELECT * FROM komentar "; $sql.= "ORDER BY waktu_input DESC "; $sql.= "LIMIT 0,1"; $hasil = mysql_query($sql) or exit("Error query : ".$sql.".");
Hasil dari query ini akan dikembalikan dalam format XML. Seperti yang ditunjukkan oleh potongan program berikut:
23
header("Content-type: ?>
application/xhtml+xml");
<email>
Setelah data dari server diterima, data tersebut kemudian diolah oleh program JavaScript. dataXML = reqObj.responseXML; comment = dataXML.getElementsByTagName("comment_data")[0]; nama email content time
Setelah data hasil pengolahan ditampilkan pada halaman web, kemudian element-element input yang berisikan data yang diinputkan user dikosongkan melalui fungsi clearForm(). function clearForm(){ document.getElementById("txtName").value = ""; document.getElementById("txtEmail").value = ""; document.getElementById("txtComment").value = ""; }
24
Sebagai tambahan, program 09.latihan_11.html masih dalam bentuk program statis. Dengan artian pada saat pertama kali program 09.latihan_11.html dimuat, maka komentar yang sudah ada sebelumnya tidak akan ditampilkan. Ini dikarenakan program hanya digunakan untuk mengirimkan komentar dan menampilkan respon dari server saja. Jika anda ingin menampilkan komentar sebelumnya pada saat pertama kali halaman web 09.latihan_11.html dimuat, maka buatlah program tersebut menjadi lebih dinamis dengan mengubahnya kedalam bentuk PHP yang didalamnya terdapat fungsi untuk menampilkan komentar-komentar sebelumnya. Ubahlah program tersebut diatas menjadi seperti dibawah ini: 09.latihan_13.php XMLHttpRequest dengan metode POST <script language="JavaScript" src="09.latihan_10.js"> <style type="text/css"> table { border-collapse:collapse; } table tr td { padding:2px 2px 2px 4px; } input[type='text'],textarea { border:1px solid #ccc;width:325px; } input[type='text']:focus,textarea:focus { background:#ffff99; } input[type="submit"] { background:#46910b;color:#ffffff;border:none; font-weight:bold;padding:2px; } .even { background:#ffffff; } .odd { background:#eeeeee; } .comment_data {
" + content + "