CONTOH APLIKASI AJAX DENGAN PHPCONTOH APLIKASI AJAX DENGAN PHP
E. MEMBUAT KODE AJAX
E. MEMBUAT KODE AJAX
Selanjutnya pada tutorial kali ini , Anda akan
Selanjutnya pada tutorial kali ini , Anda akan membuat kode Ajax yaitumembuat kode Ajax yaitu
kode
kode JavaScript JavaScript untuk mengirimkan dan menerima data dari user ke untuk mengirimkan dan menerima data dari user ke
server tanpa me-load kembali seluruh halaman.
server tanpa me-load kembali seluruh halaman.
Adapun langkah-langkahnya adalah sebagai berikut.
Adapun langkah-langkahnya adalah sebagai berikut.
1.
1. Anda Anda buka buka kembali kembali aplikasi aplikasi Macromedia Macromedia Dreamweaver CS4 Dreamweaver CS4 . . KlikKlik
T
Tombol ombol Start Start pada pada Start Start menu. menu. Kemudian Kemudian Anda Anda pilih pilih menumenu
All Progra
All Programs ms > Macr> Macromedia Dromedia Dreamweacer CS4.eamweacer CS4.
2.
2. Setelah Setelah tampil tampil jendela jendela Start Start page page Anda Anda Klik Klik icon icon dengandengan
tulisan JavaScript
tulisan JavaScript
3.
3. Selanjutnya Selanjutnya akan akan tampil tampil halaman halaman filefile JavaScriptJavaScript yang baru.yang baru.
Perhatikan pada
Perhatikan pada Gambar 28Gambar 28..
4. Setelah itu Anda ketik kode
4. Setelah itu Anda ketik kode JavaScriptJavaScript di bawah ini.di bawah ini.
Gambar 28
function
function getXMLHttpRequegetXMLHttpRequest(){st(){
if(window.ActiveXObject){
if(window.ActiveXObject){
return
return new new ActiveXObject(ActiveXObject(“Microsoft.XMLH“Microsoft.XMLHTTP”);TTP”);
}else
}else if(window.XMLHtif(window.XMLHttpRequest){tpRequest){
return
return new new XMLHttpRequestXMLHttpRequest();();
}else { alert(“Status : can not create XMLHttpRequest
}else { alert(“Status : can not create XMLHttpRequest
Ob-ject”); }
ject”); }
}
}
var
var xmlhttp=getXMLHxmlhttp=getXMLHttpRequet();ttpRequet();
function
function sendRequest(pagsendRequest(pageUrl,elementID)eUrl,elementID){{
var
var obj=document.geobj=document.getElementById(eltElementById(elementID);ementID);
var obj.innerHTML=’Loading...
var obj.innerHTML=’Loading.... please . please wait.’;wait.’;
if(xmlhttp.rea
if(xmlhttp.readyState==4 dyState==4 || || xmlhttp.readyxmlhttp.readyState==0){State==0){
xmlhttp.open(“GET”,pageUrl,true);
xmlhttp.open(“GET”,pageUrl,true);
xmlhttp.onreadystatechange=function(){
xmlhttp.onreadystatechange=function(){
if(xmlhttp.re
if(xmlhttp.readyState==4 adyState==4 && && xmlhttp.status==xmlhttp.status==200){200){
obj.innerHTML=xmlhttp.responseText; obj.innerHTML=xmlhttp.responseText; } } } } xmlhttp.send(null); xmlhttp.send(null); } } } } 1 1 2 2 3 3 4 4 5 5 6 6 7 7 8 8 9 9 10 10 11 11 12 12 13 13 14 14 15 15 16 16 17 17 18 18 19 19 20 20 21 21 22 22 Baris 1 Baris 1 •
• Fungsi uFungsi untuk ntuk membentuk membentuk objex Xobjex XMLHttpRequest.MLHttpRequest.
Baris 2-3
Baris 2-3
•
• Jika User Menggunakan Browser Internet Explorer.Jika User Menggunakan Browser Internet Explorer.
Baris 4-5
Baris 4-5
•
• Jika User menggunakan Browser selain IE.Jika User menggunakan Browser selain IE.
Baris 6-8
Baris 6-8
•
• Pesan gagal dalam membentuk object XMLHttpRe-Pesan gagal dalam membentuk object
XMLHttpRe-quest.
quest.
Baris 9
Baris 9
•
• Kode ini membuat object XMLHttpRequest padaKode ini membuat object XMLHttpRequest pada
browser.
browser.
Baris 10
Baris 10
•
• Fungsi Fungsi untuk untuk mengambil mengambil parameter parameter HTML HTML elementelement
ID dan URL dari file yang ada di server.
ID dan URL dari file yang ada di server.
Baris 11
Baris 11
•
• Kode ini membuat object document.Kode ini membuat object document.
Baris 12
Baris 12
•
• Kode untuk menampilkan Text.Kode untuk menampilkan Text.
Baris13-14
Baris13-14
•
• Kode Kode untuk untuk menbuka menbuka koneksi koneksi dengan dengan server server jikajika
ReadyState = 4 atau ReadyState =
ReadyState = 4 atau ReadyState = 0.0.
Baris 15
Baris 15
•
• Kode Kode berfungsi berfungsi jika jika state state berubah berubah lakukan lakukan fungsifungsi
berikutnya.
berikutnya.
Keterangan Kode Keterangan Kode
6.
6. Kemudian Kemudian Anda Anda ke ke dalam dalam folder folder C:/Xampp/htdocs/xamppC:/Xampp/htdocs/xampp//
praktek1
praktek1, , lalu lalu beri beri nama nama FileFile Ajax.js Ajax.js . Lihat . Lihat Gambar 29Gambar 29..
7.
7. Setelah Setelah Anda membuat Anda membuat File untuk File untuk kodekode JavaScriptJavaScript Anda bukaAnda buka
kembali File
kembali File index.phpindex.php pada folder C:/Xampp/htdocs/xampp/ pada folder C:/Xampp/htdocs/xampp/
praktek1
praktek1. Seperti pada. Seperti pada Gambar 30.Gambar 30.
Baris 16-19
Baris 16-19
•
• Jika readyState=4 dan Status=100 tampilkanJika readyState=4 dan Status=100 tampilkan
Response.
Response.
Baris 20-22
Baris 20-22
•
• Kirim Request ke ServerKirim Request ke Server
Tempat Lokasi
Tempat Lokasi
Pemyimpan
Pemyimpan
Beri nama File
Beri nama File
Ajax.js Ajax.js Klik Klik Save Save Gambar 29
Gambar 29 Menyimpan File dengan nama ajax.js Menyimpan File dengan nama ajax.js
Buka Direktori Buka Direktori Berikut ini Berikut ini Klik Ganda Klik Ganda di sini di sini Gambar 30
8.
8. Selanjutnya Selanjutnya Anda Anda Pastikan Pastikan tab tab yang yang aktif aktif pada pada Code. Code. LihatLihat
Gambar 31.
Gambar 31.
9.
9. Ketikkan kode Ketikkan kode untuk memanuntuk memanggil ggil fungsifungsi JavascriptJavascript pada filepada file Ajax.jsAjax.js
di
di dalam tag dalam tag berikut ini berikut ini Perhatikan paPerhatikan padada Gambar 30.Gambar 30.
10.Kemudian T
10.Kemudian Tambahkan kode ambahkan kode untuk memanggil fungsi untuk memanggil fungsi filefile Ajax.jsAjax.js di di
dalam tag berikut ini. Lalu Anda
dalam tag berikut ini. Lalu Anda simpan kembali filesimpan kembali file index.php.index.php.
Gambar 31
Gambar 31 Mengaktifkan tab kode Mengaktifkan tab kode
Ketik
Ketik
Disni
Disni
Gambar 32
Gambar 32 Posisi kodePosisi kode
<script
<script type=”text/jatype=”text/javascript” vascript” src=”ajax.js”><src=”ajax.js”></script>/script>
1
1
Baris 1
Baris 1
•
• Fungsi Fungsi untuk untuk memanggil memanggil kode Jkode Javascript.avascript. Keterangan Kode
Sekarang Anda coba jalankan web yang telah Anda buat
Sekarang Anda coba jalankan web yang telah Anda buat
menggunakan browser
menggunakan browser, baik , baik itu Internet itu Internet Explorer atau browser Explorer atau browser lainnya.lainnya.
Pada tutorial kali ini menggunakan browser Mozila Firefox. Adapun
Pada tutorial kali ini menggunakan browser Mozila Firefox. Adapun
langkah-langkahnya sebagai berikut :
langkah-langkahnya sebagai berikut :
1.
1. Anda Anda buka buka Klik TKlik Tombol ombol Start Start pada pada Start Start menu. menu. KemudianKemudian
Anda
Anda pilih pilih menu menu All All Programs Programs > > Mozila Mozila Firefox Firefox . . Lihat Lihat PadaPada
Gambar 33
Gambar 33..
2.
2. Kemudian akan tampak jendela browsKemudian akan tampak jendela browsererMozila Firefox Mozila Firefox . terlihat pada. terlihat pada
Gambar 34
Gambar 34 di bawah ini. di bawah ini.