01 dasar dasar ajax

E-trik Ajax

Dasar-Dasar Ajax

Dedi Alnas

2

Sekilas Tentang Ajax

A. Sejarah Tentang Ajax

AJAX diperkenalkan oleh Jesse James Garret dari Adaptive Path tahun 2005 pada tulisannya yang berjudul ”AJAX: A New Approach to Web Application”. AJAX bukan merupakan bahasa pemrograman baru,namun hanya suatu tehnik pemanfaatan javascript dalam mengontrol class objek XMLHttpRequest untuk me-Refresh dan mengupdate content dalam halaman web tanpa melakukan reload keseluruhan halaman web seperti pada Metode Tradisional, AJAX sendiri merupakan singkatan dari “Asynchronous JavaScript And XML”.

B. Teknologi dibalik AJAX

B.1 XHTML ( Extensible Hypertext Markup Language)

adalah Bahasa Markup sebagaimana seperti HTML, tetapi dengan gaya bahasa yang lebih baik. XHTML digunakan membuat halaman web dan dokumen - dokumen lain yang dapat ditampilkan dalam browser. XHTML merupakan standard internasional dengan spesi-fikasi yang ditetapkan oleh W3C ( World Wide Web Consortium).

B.2 CSS ( Cascading Style Sheets)

adalah sebuah mekanisme sederhana untuk memberikan style ( sep-erti font, warna, jarak spasi, dll) kepada dokumen web yang ditulis dalam HTML atau XML ( termasuk beberapa variasi bahasa XML sep-erti XHTML dan SVG).

3

B.3 JavaScript

adalah bahasa pemrograman berbasis Script. Javascript memiliki kemampuan untuk menciptakan halaman web yang dinamis serta didukung oleh banyak web server.

B.4 DOM ( Document Object Model)

adalah merupakan sebuah API ( Application Program Interface ) untuk dokumen HTML dan XML. DOM menyediakan representasi dokumen secara terstruktur, dimungkinkan merubah isi dan presentasi visual. Pada dasarnya, DOM menghubungkan halaman web dengan script atau bahasa pemrograman.

B.5 XML ( Extensible Markup Language )

adalah bahasa Markup untuk keperluan umum yang disarankan oleh W3C untuk membuat dokumen Markup keperluan khusus. Keperluan utama XML adalah untuk pertukaran data dengan web server.

B.6 Object XMLHttpRequest

Berfungsi untuk melakukan pertukaran data Asinkronus dengan web server. Pada beberapa framework dan kasus AJAX , objek IFRAME lebih dipilih daripada XMLHttpRequest untuk melakukan pertukaran data dengan web server.

Sebelum membuat halaman Web, terlebih dahulu Anda Harus mempelajari tentang struktur kodenya atau biasa disebut dengan istilah Tag. Perintah-perintah yang umum dipakai dalam penulisan kode HTML dapat Anda lihat pada Tabel 1 di bawah ini.

Dasar-Dasar Ajax

1 STRUKTUR KODE PROGRAM HTML

4

Dasar-Dasar Ajax

Tabel 1 Perintah dasar HTML

HTML Tag Keterangan Struktur Kode<TITLE> Judul halaman

Web<TITLE>Judul</TITLE>

<HEAD> Header halaman <HEAD>”deskripsi Halaman”</HEAD>

<BODY> Isi halaman <BODY>Isi Halaman </BODY>



<A - Link /Hubungan <A HREF=”http://www.maxikom.co.id/”>Situs Maxikom</A>

<B> Huruf tebal / Bold

<B>Maxikom</B>

<I> Huruf Miring / Italic

<I>Maxikom</I>

<U> Garis bawah / Underline

<U>Maxikom</U>

<P> Paragraf baru <P>Maxikom</P>

<BR> Baris baru Baris_1<BR>Baris_2

<CEN-TER>

Rata tengah <CENTER>Maxikom</CEN-TER>

<FONT> Penggunaan huruf

<FONT FACE=”Arial” SIZE=”4” COLOR=”RED”>Contoh</FONT>

<IMG> Menampilkan gambar

<IMG SRC=”Logo.gif” WIDTH= ”41” HEIGHT= ”41” BORDER= ”0” ALT=”klik di sini untuk meli-hat gambar”>

<EMBED> Meletakkan objek <EMBED src= “lagu.mid” width=”100%” height= “60” align= “center”>

5

Dasar-Dasar Ajax

A. MENGGUNAKAN WEB EDITOR

Salah satu bagian yang tak lepas dari pembuatan situs adalah web editor. Web editor adalah program yang berfungsi penulisan kode HTML. Web editor yang digunakan adalah aplikasi Notepad.

1. Anda klik tombol Start pada start menu . Kemudian Anda pi-lih All programs | Accessories | Notepad. Lihat Gambar 1 di bawah ini.

2. Kemudian Anda ketik kode HTML pada jendela Notepad. Lihat Gambar 2.

3. Simpan dengan tekan tombol Ctrl + S dan extensi dibelakangnya .HTML. Perhatikan Gambar 3 .

Gambar 1 Membuka aplikasi Notepad

Gambar 2 Jendela Notepad

Ketik

Simpan dengan penulisan nama file .HTML

KlikSave

Gambar 3 Menyimpan file dengan berextensi .HTML

6

Dasar-Dasar Ajax

Contoh Penulisan kode HTML adalah:

Konsep AJAX yang Anda perlu ketahui adalah bagaimana sebuah halaman web dapat memproses sebuah request dan menerima sebuah response dari web server. Standar web yang digunakan pada saat ini adalah HTTP (Hypertext Transfer Protokol). HTTP akan menerima Response dari web server , memberitahukan kapan request dikirim lalu header yang digunakan berfungsi untuk mengetahui tugas apa yang harus dilakukan server dan bagaimana menghandle request dari HTTP.

Jika sebuah request diterima, web server kemudian menentukan response apa yang akan diberikan. Berikut ini beberapa jenis kode respon HTTP yang dapat Anda lihat pada Tabel 2 di bawah ini:

<html><head><title>percobaan HTML</title></head><body><B><font face=”verdana” size=”4”>Halaman web Pertamaku!!!</font></B></body></html>

1 2 3 4 5 6

7 8

Baris 1 • Tag awal halaman HTML.

Baris 2• Awal Header halaman.

Baris 3 • Judul halaman.

Baris 4• Akhir Header halaman.

Baris 5 • Akhir isi halaman.

Baris 6 • Menampilkan Text Halaman web Pertamaku !!! menggunakan Font Verdana dengan tipe Bold.

Baris 7 • Akhir isi halaman.

Baris 8 • Tag akhir halaman HTML.

Keterangan Kode

HTTP REQUEST DAN DASAR-DASAR RESPON2

7

Dasar-Dasar Ajax

Tabel 2 Jenis kode respon HTTP

Kode Keterangan200 OK Respon yang dikembalikan apabila

dokumen atau file ditemukan ketika direquest (sukses).

304 Not Modified Respon yang dikembalikan apabila browser mengindikasikan bahwa duplikat dokumen yang ada pada local cache atau server cache sama atau tidak mengalami perubahan.

401 Unauthorized Respon yang dikembalikan apabila request membutuhkan autorisasi untuk mengakses dokumen.

403 Forbidden Respon yang dikembalikan apabila pe-request tidak memiliki hak akses untuk dokumen yang diinginkan.

404 Not Found Respon yang dikembalikan apabila Dokumen yang diakses tidak ditemukan.

500 Internal Server Error

Kode respon ini dikembalikan apabila terjadi kesalahan teknis dalam server.

503 Service Unavailable

Respon yang dikembalikan apabila jenis-layanan tidak dikenal oleh server.

AJAX dapat dikatakan merupakan sebuah konsep yang menerangkan interaksi client-side XMLHttpRequest Object dengan script server-side. Untuk membuat request ke web server menggunakan AJAX terlebih dahulu Anda harus membuat bentuk object XMLHttpRe-quest. Untuk membentuk object XMLHttpRequest mempunyai per-bedaan pada setiap browsernya. Pada microsoft Internet explorer object dibentuk sebagai ActiveX Control, sedangkan pada browser seperti Firefox dan Safari menggunakan basic JavaScript object.

8

Dasar-Dasar Ajax

A. XMLHttpRequest Methods

Setelah XMLHttpRequest terbentuk, terdapat beberapa method atau fungsi yang bisa digunakan. Method-method tersebut dapat Anda lihat pada Tabel 3 dibawah ini:

Tabel 3 Metode-metode pada XMLHttpRequest

Metode Keterangan

Abort()

digunakan untuk menghentikan request yang sedang berjalan. Method ini sangat berguna jika Anda memperhitungkan lama waktu koneksi.

getAllResponHeader()

Anda dapat menggunakan method ini untuk memperoleh semua informasi dari semua header HTTP yang sedang diberi-kan oleh server.

getResponHeader(“headername”)

Method ini dapat digunakan untuk memperoleh isi dari begian sebuah header, sebagai contoh untuk memperoleh ukuran dari document yang sedang dire-quest, Anda dapat menggunakan getResponseHeader(“Content-Length”).

open(“method”,”URL”,async”username”,”pswd”)

Method ini merupakan method yang paling penting dan berguna pada XMLHttpRequest. Method ini digunakan untuk membuka koneksi dengan document yang ada di server. Dengan method ini Anda memberitahukan kepada web server method apa yang digunakan untuk membuka file (“GET” atau “POST”).

9

Dasar-Dasar Ajax

setRequestHeader(“label”,”value”)

Method ini dapat digunakan untuk menentukan header pada saat melakukan request. Sebagai catatan, method ini hanya bisa dipanggil setelah method open digunakan dan sebelum method send dipanggil.

send(“content”) method ini digunakan untuk mengirim request ke server.

B. XMLHttpRequest Properties

XMLHttpRequest memiliki properti yang dapat digunakan dan dimanipulasi, seperti dijelaskan di bawah. Property tersebut dapat Anda lihat pada Tabel 4 dibawah ini:

Tabel 4 Property pada XMLHttpRequest

Property Keterangan

OnreadystatechangeMenangani event yang bekerja setiap kali status berubah.

Readystate

berisi informasi state dari object XMLHttpRequest pada saat properti ini digunakan (0: uninitialized, 1: loading, 2: load-ed, 3: interactive, 4: complete). Properti ini bisa digunakan untuk menangani kesalahan, memang-gil blok kode atau function untuk setiap readyState.

10

Dasar-Dasar Ajax

ResponseText

Properti ini akan dihasilkan pada saat request telah berhasil/com-plete. Misalnya anda melakukan request terhadap sebuah docu-ment di server, respon dari server akan disimpan pada properti ini.

ResponseXMLProperti ini sama dengan responseText, tetapi respon yang dihasilkan dalam format XML.

StatusProperti ini memberitahukan response code yang dihasilkan dari request yang dilakukan.

StatusText

Properti ini merupakan textual dari properti status, misal status sama dengan 404 maka statusText akan sama dengan Not Found.

Contoh Penulisan kode untuk membentuk sebuah object XMLHttpRequest Anda dapat menggunakan kode berikut ini :

function getXMLHttpRequest(){if(window.ActiveXObject){ return new ActiveXObject(“Microsoft.XMLHTTP”); }else if(window.XMLHttpRequest){ return new XMLHttpRequest();}else { alert(“Status : can not create XMLHttpRequest Ob-ject”); } }

1 2 3 4 5 6 7 8

Baris 1 • Fungsi untuk membentuk objex XMLHttpRequest.

Baris 2-3 • Jika User Menggunakan Browser Internet Explorer.

Baris 4-5 • Jika User menggunakan Browser selain IE.

Baris6-8• Pesan gagal dalam membentuk object XMLHttpRequest.

Keterangan Kode

11

Dasar-Dasar Ajax

Berikut contoh penulisan untuk mengirim request ke server dengan menggunakan method GET sebagai berikut :

Sebelum menggunakan Javascript, terlebih dahulu Anda harus mem-pelajari tentang struktur penulisannya. Struktur penulisan JavaScript adalah sebagai berikut:

•

Baris 1• Kode ini membuat object XMLHttpRequest pada browser.

Baris 2 • Fungsi untuk mengambil parameter HTML element ID dan URL dari file yang ada di server.

Baris 3 • Kode ini membuat object document.

Baris 4• Kode untuk menampilkan Text.

Baris 5-6 • Kode untuk menbuka koneksi dengan server jika readyState = 4 atau readyState = 0.

Baris 7• Kode berfungsi jika state berubah lakukan fungsi berikutnya.

Baris 8-11 • Jika readyState=4 dan Status=100 tampilkan Response.

Baris 12-14• Kirim Request ke Server.

Keterangan Kode

STRUKTUR PROGRAM JAVASCRIPT3

1 2 3

<Script language=”Javascript”></Script>

var xmlhttp=getXMLHttpRequet(); function sendRequest(pageUrl,elementID){var obj=document.getElementById(elementID);var obj.innerHTML=’Sedang Proses... Mohon tunggu’; if(xmlhttp.readyState==4 || xmlhttp.readyState==0){ xmlhttp.open(“GET”,pageUrl,true); xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4 && xmlhttp.status==200){ obj.innerHTML=xmlhttp.responseText; } }xmlhttp.send(null); } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14

12

Dasar-Dasar Ajax

1. Mengenal Event

Event merupakan suatu kondisi ketika prosedur pemrograman dieksekusi dengan tujuan untuk memproses Input ataupun Output dari suatu baris perintah pemrograman.

Perintah pemrograman yang bertugas untuk menangani Event disebut sebagai Event Handler. Event Handler pada Javascript sangat membantu Anda dalam membuat halaman Web dinamis.

Berikut ini adalah contoh beberapa Event Handler yang umum dipakai dalam JavaScript. Dapat Anda lihat pada Tabel 5 dibawah ini:

Tabel 5 Event Handler

EventHandler

Objek Fungsi

onAbort Gambar. Menjalankan kode JavaScript jika terjadi pembatalan Proses.

onBlur Button,CheckBox,Frame, Password,RadioButton, Reset, Submit, SelectList, TextArea, TextField,Windows.

Menjalankan kode Javascript jika posisi kursor berpin-dah dari sustu object (Lost Focus).

onFocus F r a m e , B u t t o n , S u b m i t , Reset,RadioButton, Check-BOx, SelectList,Pasword, TextField,TextArea,Windows.

Menjalankan kode JavaScript jika posisi kursor berada pada suatu objek.

onChange SelectList,TextArea,TextField. Menjalankan kode Java Sript jika nilai teks pada suatu objek berubah.

onSelect TextField,TextArea. Menjalankan kode JavaScript ketika teks di dalam area objek diseleksi.

onClick Button, CheckBoxRadioButton,Submit,Reset,Link.

Menjalankan kode JavaScript jika suatu onject di klik.

13

Deasar-Dasar Ajax

onError Gambar,Windows. Menjalankan kode JavaScript jika terjadi error pada prosedur tertentu.

onLoad Gambar,Windows. Menjalankan kode JavaScript pada saat gambar atau hala-man Web akan ditampilkan.

onMouse-Out

Link. Menjalankan kode JavaScript pada saat kursor mouse meninggalkan area objek.

onMou-seOver

Link. Menjalankan kode JavaScript pada saat kursor berada di atas objek

onReset Form. Menjalankan kode JavaScript ketika fungsi Reset dijalankan.

onSubmit Form. Menjalankan kode JavaScript ketika proses Submit dijalankan.

onUnload Windows. Menjalankan kode JavaScript pada saat halaman Web akan ditutup.

2. Tipe Data JavaScript.

Tipe Data bisa dikatakan sebagai kelompok ukuran memori yang akan kita gunakan untuk menyimpan nilai dari suatu variabel dalam pem-rograman. Beberapa Tipe Data yang umum dipakai dalam pemrogra-man JavaScript dapat Anda lihat pada Tabel 6.

Tabel 6 Tipe Data JavaScript

Tipe Data NilaiInteger -32768 s/d 32767

Float -3.4E38(-3.4x1038) s/d +3.4E38(+3.4x1038)

boolean True dan False

String Unicode 0(“A-Z”,”0-9”)

14

Dasar-Dasar Ajax

Null Null (Kosong)

3. Deklarasi Variabel.

Variabel bisa dikatakan sebagai pemberian nama secara simbolis terhadap tipe data tertentu. Variabel dalam JavaScript dapat berupa angka, huruf, dan kata.

Penggunaan spasi tidak diperbolehkan dalam deklarasi variabel. Deklarasi Variabel pada JavaScript menggunakan perintah Var. Berikut adalah contoh deklarasi variabel pada JavaScript.

4. Function.

Function dalam JavaScript adalah blok perintah (prosedur) yang bertugas untuk melakukan proses tertentu. Dasar perintah Function adalah sebagai berikut:

<Script language=”Javascript”></Script>

1 2 3 4 5 6

Catatan :

Penggunaan angka sebagai nama variabel harus menambahkan karakter $ diawal variabel agar tidak dianggap sebagai nilai angka oleh JavaScript. Anda juga bisa menggunakan kombinasi angka dan huruf.

<Script language=”Javascript”></Script>

1 2 3 4 5 6

15

Dasar-Dasar Ajax

5. Jenis Operator.

Operator bisa dikatakan sebagai suatu fungsi yang menggerakkan atau merubah suatu fungsi yang lain.

Jenis Operator dalam JavaScript ada beberapa macam, antara lain Operator pembanding, Operator logika dan Operator aritmatik (per-hitungan).

Berikut ini adalah beberapa jenis Operator JavaScript.

A. Operator Pembanding

Tabel 7 Operator pembanding

Operator Hasil Keterangan== True / False Sama dengan..!= True / False Tidak sama dengan..> True / False Lebih besar dari..

>= True / False Lebih besar dari atau sama dengan..

< True / False Lebih kecil dari..<= True / False Lebih kecil dari atau

sama dengan..

Catatan :

Anda tidak bisa menjalankan Function tanpa mengeksekusi nama Function tersebut terlebih dahulu. umumnya Function dieksekusi melalui Event Handler.

16

Dasar-Dasar Ajax

B. Operator Logika

Tabel 8 Operator Logika

Operator Hasil Keterangan&&

(and)True / False Hasil = True, Jika kedua

ekspresi bernilai True.|

(or)True / False Hasil = True, Jika salah

satu ekspresi bernilai True.

!(not)

True / False Hasil = True, jika ek-spresi bernilai False.

C. Operator Aritmatik

Tabel 9 Operator Aritmatik

Operator Contoh Keterangan+ x = x + y Penjumlahan.- x = x - y Pengurangan.* x = x * y Perkalian./ x = x / y Pembagian.

++ x++ atau ++x Peningkatan.-- --x atau x-- Penurunan.-

(Minus)x = -x Nilai negatif.

%(Modulus)

x = x % y Sisa pembayaran.

17

Dasar-Dasar Ajax

6. Pernyataan If..Else

Pernyataan if...else bisa dikatakan struktur keputusan yang digunakan untuk mengendalikan perintah yang terdiri dari beberapa kondisi da-lam pemrograman. Bentuk pernyataan IF Else adalah sebagai berikut :

Pernyataan if...else dapat digunakan untuk mengendalikan perintah kondisi bertingkat, contohnya adalah sebagai berikut:

7. Pernyataan Switch

Pernyataan Switch memiliki fungsi yang sama seperti pernyataan If..else. Pernyataan Swirch umumnya dipakai untuk mengendalikan kondisi yang bersifat pilihan. Bentuk pernyataan Switch adalah sebagai berikut:

if ([Ekspresi]) { [Pernyataan_1];}else{ [Pernyataan_2];}

1 2 3 4 5

if ([Ekspresi]) { if ([Ekspresi]){ [Pernyataan_1]; }else{ [Pernyataan_2];}else{ [Pernyataan];}

1 2 3 4 5 6 7 8

switch [Ekspresi]{ Case [kondisi 1]: [Pernyataan]; break; Case [kondisi 2]: [Pernyataan]; break; default: [ Pernyataan]; }

1 2 3 4 5 6 7 8 91011

18

Dasar-Dasar Ajax

8. Perulangan For

Perulangan For digunakan untuk melakukan proses pengulangan pada kondisi yang berekspresi boolean atau mengulang sekumpulan (blok) perintah sampai kondisi tertentu terpenuhi. Contoh penulisan bentuk perulangan For sebagai berikut:

9. Perulangan While

<html><head> <title>Perulangan For</title></head><body><script type=”text/javascript”> var i=0 for (i=0;i<=5;i++) { if (i==5){break} document.write(“Saya berjanji tidak nakal lagi “ + i) document.write(“<br />”) } document.write(“<p></p>”)</script></body></html>

1 2 3 4 5 6 7 8 9101112 131415161718

Baris 1-5• Tag awal halaman HTML, Header dan judul halaman serta akhiri tag Header.

Baris 6 • Tag awal isi halaman atau body.

Baris 7• Tag awal script.

Baris 8 • Deklarasi Variabel i sama dengan nol.

Baris 9 • Kode untuk melakukan perulangan For yang dimulai dari nol sampai dengan 5.

Baris 10-11• Kondisi jika variabel diinput sama dengan 5.

Baris 12• Menampilkan text dan diulangi sebanyak 5 kali sesuai dengan variabel yang diinput secara berurutan

Baris 13-14• Menambah baris baru.

Baris 15• Membuat Paragraf baru.

Baris 16-18• Akhiri Tag JavaScript , Body dan HTML.

Keterangan Kode

19

Dasar-Dasar Ajax

Fungsi perulangan While sama seperti perulangan For, fungsi While juga dapat digunakan apabila Anda belum tahu pasti berapa banyak pengulangan akan dilakukan. Perulangan akan diakhiri oleh suatu kondisi. Bila kondisi sudah tidak terpenuhi maka pengulangan akan dihentikan. Di bawah ini merupakan contoh bentuk penulisan perulangan dengan menggunakan perulangan while.

Contoh penulisan bentuk perulangan While sebagai berikut :

<html><body><script type=”text/javascript”>var i=0while (i<=10){document.write(“Angkanya adalah “+ i)document.write(“<br />”)i=i+1}</script></body></html>

1 2 3 4 5 6 7 8 9101112 13

Baris 1 • Tag awal halaman HTML.

Baris 2 • Tag awal isi halaman atau body.

Baris 3 • Tag awal script.

Baris 4 • Deklarasi Variabel i sama dengan nol.

Baris 5-6 • Kode untuk melakukan perulangan While yang dimulai dari nol sampai dengan 10 dan tidak melebihi batas 10.

Baris 7 • Menampilkan text dan diulangi sebanyak 10 kali sesuai dengan variabel yang diinput secara berurutan.

Baris 8• Menambah baris baru.

Baris 9-10• Parameter perhitungan perulangan secara berurutan.

Baris 11-13• Akhiri Tag JavaScript , Body dan HTML.

Keterangan Kode

20

Dasar-Dasar Ajax

10. Array

Array adalah sekumpulan data sejenis yang disimpan ke dalam variabel dengan nama yang sama, dengan memberi indeks pada variabel untuk membedakan antara yang satu dengan yang lain. Array bisa dikatakan sebagai kelompok data yang terstruktur dan memiliki tipe data yang sama. Contoh perintah deklarasi Array pada JavaScript adalah sebagai berikut:

Anda juga bisa mendeklarasikan sebuah Array yang Jumlah elemennya sudah ditentukan terlebih dahulu. Perhatikan bentuk perintah Array berikut :

// Syntax : Var[nama Array] = new Array([Elemen0, Elemen1,...]);

// Contoh : Var mobil = new array(“Sedan”, “Truk”, “Jeep”,...);

1

2

// Syntax : Var[nama Array] = new Array([Jumlah]); [Nama Array][0]=[Elemen0]; [Nama Array][1]=[Elemen1]; [Nama Array][2]=[Elemen2];

// Contoh : Var mobil = new array(3); mobil[0]=“Sedan”; mobil[1]=“Truk”; mobil[2]=“Jeep”;

1

2

Catatan :

• Nilai index umumnya dimulai dari angka 0. Sebagai contoh jikapanjangArrayadalah(5),makaurutannyaindexadalah(0,1,2,3,4).

•Gunakantanda[]saatmenggunakanIndex.

21

Dasar-Dasar Ajax

11. Array Multi Dimensi

Array multi-dimensi dalam JavaScript adalah suatu Array yang elemen -elemennya merupakan beberapa Array yang lain.

Array multi dimensi bisa dikatakan sebagai Array dan beberapa Array yang terdiri dari dua atau lebih dimensi, biasa digunakan untuk menangani tabel data.berikut contoh kode program JavaScript dengan menggunakan Array multi dimensi sebagai beri-kut

<html xmlns=”http://www.w3.org/1999/xhtml”><head><meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1” /><title>Array_Multi</title><script language=”JavaScript”></script></head><body>

1 2 3 4 5 6 7 8 9101112131415161718192021222324252627282930

22

Dasar-Dasar Ajax

12. Error Handler

Error Handler adalah suatu perintah yang berfungsi untuk menangani kesalahan dalam validasi JavaScript.

Penerapan Error Handler pada baris perintah JavaScript tidak selalu sama, tergantung kondisi dan logika pemrograman.

cara penerapan Error Handler yang efektif adalah dengan kombinasi perintah try{} catch(e){} dan throw. ini adalah contoh bentuk Error Handler di bawah ini :

Baris 1-3• Tag awal halaman HTML, Head dan judul halaman.

Baris 4-5 • Tag awal JavaScript.

Baris 6 • Function dengan nama tampil.

Baris 7-10 • Menampilkan tabel dengan judul kolom.

Baris 11-18 • Menampilkan variabel a dan b secara berurutan kedalam baris dan kolom tabel menggunakan perulangan For.

Baris 19-20• Akhiri Tag Table dan Function.

Baris 21-23• Deklarasi tiga buah Array dengan nama data1, data2 dan data3.

Baris 24• Deklarasi Array bernama database dengan elemen berupa Array data1, data2 dan data3.

Baris 25• Mengeksekusi function tampil untuk menampilkan elemen elemen Array database pada baris dan kolom tabel.

Baris 26-27• Akhiri Tag JavaScript.

Baris 28-30• Akhiri Tag Head, Body dan HTML.

Keterangan Kode

// Syntax : Try { [kondisi] throw exception }catch (exception) { [Pernyataan] }

1

23

Dasar-Dasar Ajax

Berikut adalah contoh penulisan bentuk error handler sebagai berikut :

<html><head><script type=”text/javascript”>var txt=””function message(){try { adddlert(“Welcome...!”) }catch(err) { txt=”Terjadi error pada halaman web ini.\n\n” txt+=”Error description: “ + err.description + “\n\n” txt+=”Klik OK untuk berikutnya.\n\n” alert(txt) }}</script></head><body><input type=”button” value=”Pesan” onclick=”message()” /></body></html>

1 2 3 4 5 6 7 8 91011121314151617181920212223242526

Catatan :

penulisan kode try..catch diharuskan dengan huruf kecil (lowercase). Jika dalam (Uppercase) maka akan error pada JavaScript

24

Dasar-Dasar Ajax

PHP ( Hypertext Preprocessor) dikembangkan pertama kali tahun 1995 oleh Rasmus Lerdorf yang merupakan salah satu anggota Apache. PHP pertama kali dirancang sebagai alat tracking pengunjung web site Lerdorf. Kemudian, fungsinya diperlebar dan dihubungkan den-gan Apache.

PHP dapat digunakan untuk mengakses database dan diintegrasikan dengan HTML. PHP lebih populer dalam jumlah pemakai dibanding dengan modul perl, CGI dan ASP.

PHP merupakan software open source, dapat digunakan dengan gratis dan dapat dijadikan alternatif selain side-programming lain.

a. Kelebihan-kelebihan PHP

Adapun kelebihan dari bahsa pemrograman PHP antara lain :

PHP lebih mudah dibuat dan mudah juga menjalankannya. •

Baris 1-3 • Tag awal halaman HTML, Head dan JavaScript.

Baris 4-5 • Mendeklarasikan Variabel txt.

Baris 6 • Mendeklarasikan Function.

Baris 7-10 • Kode ini adalah untuk menangani kesalahan jika tidak terjadi error maka akan menampilkan pesan welcome.

Baris 11-19 • Mengeksekusi apabila terjadi kesalahan tampilkan untuk menangani kesalahan atau deskripsi errornya.

Baris 20 -21• Akhiri Tag JavaScript dan Head.

Baris 22 • Tag awal body atau isi halaman.

Baris 23-24 • Menampilkan Button dengan nama tombol yang nantinya akan mengeksekusi pesan.

Baris 25 • Akhiri Tag Body.

Baris 26• Akhiri Tag HTML.

Keterangan Kode

STRUKTUR KODE PROGRAM PHP4

25

Dasar-Dasar Ajax

PHP dapat berjalan pada web server dengan sistem operasi yang •berbeda-beda. PHP bisa kita dapatkan secara free atau gratis.•PHP dapat berjalan pada web server yang berbeda-beda juga.•PHP dapat diletakkan atau disisipkan dalam kode HTML•

Kode program PHP menyatu dengan tag-tag HTML dalam satu file. Penulisan kode PHP diawali dengan tag <?php atau <? dan ditutup dengan tag ?>.sesuai dengan tag pembukanya. File PHP terdapat tag HTML dan kode PHP dan diberi format dengan ekstensi .php. Ber-dasarkan ekstensi ini, pada saat file diakses, server akan tahu bahwa file mengandung kode PHP. Server akan menerjemahkan kode ini dan menghasilkan output dalam bentuk tag HTML yang akan dikirimkan ke browser client yang mengakses file tersebut.

Berikut ini adalah contoh penulisan kode pemrograman PHP :

<html><head><title>Belajar PHP</title></head><body> <table border=1 align=”center”> <tr> <td> <?php print(“Halo dengan <i>print</i> !”); ?> <br /> <?php echo ‘Halo dengan <i>echo</i> !’; ?> </td> </tr> </table></body></html>

1 2 3 4 5 6 7 8 91011121314151617

26

Dasar-Dasar Ajax

b. Tipe Data PHP

Tipe data dari sebuah variabel akan ditentukan otomatis oleh PHP bergantung pada operasi yang sedang dilakukan menggunakan variable tersebut. Tipe data dapat dikatakan Variabel digunakan untuk menyimpan data atau informasi. PHP mengenal 5 tipe data yaitu dapat anda lihat pada Tabel 9 dibawah ini :

Tabel 9 Tipe Data PHP

Tipe Data Deskripsi

Integer

Tipe data integer meliputi semua bilangan bulat, besarnya range integer pada PHP adalah antara –147483648 sam-pai +2147483647 pada platform 32-bit. PHP akan secara otomatis mengkonversi data integer menjadi floating point jika berada di-luar range diatas.

Baris 1-3• Tag awal halaman HTML, Head dan JavaScript.

Baris 4 • Akhiri Head.

Baris 5 • Awal Tag Body atau isi halaman.

Baris 6-8 • Membuat tabel dengan border = 1 dan posisi rata tengah.

Baris 9-10 • Awal Kode PHP mencetak text dengan perintah Print.

Baris 11 • Menambah baris baru.

Baris 12• Awal Kode PHP untuk menampilkan text dengan perintah Echo.

Baris 13-15• Akhiri Tag Kolom dan Tabel.

Baris 16• Akhiri Tag Body.

Keterangan Kode

27

Dasar-Dasar Ajax

Floating Point

Floating point merepresentasikan bilangan peca-han atau bilangan desimal. Range tipe ini antara 1.7308 sampai 1.7E+308. Floating point dapat dinyatakan dalam bentuk desimal dan dalam bentuk pangkat diatas.

String

Sebuah data dengan tipe string dinyatakan dengan mengapitnya menggunakan tanda petik tunggal (‘ ‘) maupun ganda (“ “). Per-bedaannya adalah , jika kita menggunakan tanda petik tunggal, maka pada string itu tidak dapat kita masukkan variabel dan escape sequence handling.

Arrays

Array adalah sebuah data yang mengandung satu atau lebih data, dan dapat diindeks berdasarkan numeric, maupun string (associative array). Data yang dikandung oleh sebuah data array dapat dari tipe data lainnya bahkan juga dapat bertipe array (multiple array). PHP membolehkan elemen dari array terdiri atas data dengan tipe yang ber-beda-beda.

Object

Object adalah sebuah tipe data yang dapat berupa sebuah bilangan, variabel atau bahkan sebuah fungsi. Object dibuat dengan tujuan untuk membantu programmernya yang terbiasa dengan Object Oriented Programming. Meski fasilitas OOP yang disediakan PHP masih sangat kurang.

c. Nilai Boolean

Setiap tipe data PHP memiliki nilai Boolean yang spesifik menyertainya, nilai Boolean ini biasanya digunakan pada struktur kontrol program seperti IF atau IF-ELSE.

28

Dasar-Dasar Ajax

Untuk Integer dan Floating Point, nilai booleannya adalah false jika nilainya 0, selainnya adalah true.

• Untuk string, nilai booleannya adalah false jika string kosong (“”), selainnya adalah true.

• Untuktipe data array, akan bernilai false jika elemennya kosong, dan sebaliknya adalah true.

•Untuktipe data object, bernilai false jika tidak ada variabel atau fungsi/method yang terdefinisi didalamnya, dan sebaliknya bernilai true.

• Untukvariabel yang belum dibuat atau didefinisikan nilainya false.

PHP memiliki 2 keyword true dan false, true merepresentasikan nilai integer 1 dan false merepresentasikan string kosong, Keyword true dan false tidak case sensitive.

d. Konversi Tipe Data PHP

Tipe data ditentukan sesuai konteksnya pada saat tipe data diguna-kan, tidak ditentukan secara eksplisit sebuah variabel $var dideklarasi-kan bertipe integer dan dapat berubah secara otomatis menjadi ber-tipe floating point jika diberi nilai pecahan. Berikut ini adalah contoh penulisan kode PHP dapat Anda lihat sebagai berikut:

Dari contoh kode di atas, pertama adalah mendefinisikan Variabel bertipe Integer dan untuk Variabel kedua bertipe Double.

// Contoh

<?php$var = 1 ;echo “\$var = “.$var.” dan bertipe ”.gettype($var) ;$var=1 +1.0;echo(“<br>”);echo “\$var = “.$var.” dan bertipe ”.gettype($var) ;?>

1

29

Dasar-Dasar Ajax

e. Variabel PHP

Variabel PHP hampir mirip dengan JavaScript. Variable dinyatakan dengan tanda $ dibelakang nama variabel. Nama variabel dapat terdiri atas angka dan huruf , Penulisan kode PHP pada penamaan variabel bersifat casesensitive artinya penggunaan huruf kecil dan huruf besar dibedakan. Deklarasi sebuah variabel selalu diikuti dengan pemberian nilai dari variabel tersebut, sehingga jika sebuah variabel belum memiliki nilai, tidak perlu dideklarasikan terlebih dahulu. Berikut adalah contoh penulisan kode PHP untuk mendeklarasikan Variabel sebagai berikut.

f. Operator

Operator digunakan untuk melakukan sebuah operasi pada satu atau lebih nilai. sama seperti javascript. PHP memiliki operator yang berbeda-beda dan tipe operator memiliki fungsi masing-masing. Jenis operator yang terdapat dalam PHP ada beberapa macam antara lain Operator Aritmatik (perhitungan) , Operator Pembanding , Operator logika dan Operator Penugasan.

Berikut ini adalah beberapa jenis Operator pada pemrograman PHP :

//Contoh

<?php$txt = “Selamat datang...!!”;$number = 25;?>

1

Catatan :

Penulisan kode untuk Mendeklarasikan Variabel diharuskan memperha-tikan huruf kecil (lowercase) dan huruf besar (Uppercase) karena pena-maan variabel bersifat Case-Sensitif.

30

Dasar-Dasar Ajax

1. Operator Aritmatik (perhitungan)

Operator Aritmatik digunakan untuk operand operasi matematika atau perhitungan. tabel operator aritmatik dapat Anda lihat pada Tabel 11 dibawah ini :

Tabel 11 Operator aritmatik

Operator Keterangan contoh Hasil+ Penjumlahan x=1

x+34

- Pengurangan x=14-x

3

* Perkalian x=5x*4

20

/ pembagian 15/510/2

35

% sisa pembagian 7 % 218 % 4

12

++ peningkatan x=9x++

x= 10

_ _ penurunan x=10x--

x= 9

2. Operator Penugasan

Operator ini digunakan untuk memberikan atau pendefinisian nilai (penugasan). Tabel operator ini dapat Anda lihat pada Tabel 12 di bawah ini:

31

Dasar-Dasar Ajax

Tabel 12 Operator Penugasan

Opera-tor

Penggunaan Disamakan dengan

contoh hasil

+= $a += $b $a= $a + $b

$a= 8 $b = 2

$a=10

- = $a -= $b $a= $a - $b $a= 8 $b = 2

$a= 6

*= $a *= $b $a= $a * $b $a= 8 $b = 2

$a= 16

/= $a /= $b $a= $a / $b $a= 8 $b = 2

$a=4

%= $a %= $b $a= $a % $b $a= 8 $b = 2

$a=0

.= $a .= $b $a= $a . $b $a= 8 $b = 2

$a= 8 2

++ $a++(peningka-tan)

$a= $a + 1 $a= 8 $a= 9

- - $a- -(penurunan)

$a= $a - 1 $a= 8 $a= 7

3. Operator Pembanding

Operator ini digunakan untuk pembanding atau membandingkan kedua hal dan berfungsi untuk menyusun ekspresi kondisional. Ek-spresi yang menggunakan operator perbandingan selalu menghasil-kan nilai TRUE atau FALSE. Tabel operator ini dapat Anda lihat pada Tabel 13 di bawah ini:

32

Dasar-Dasar Ajax

Tabel 13 Operator Pembanding

Operator Hasil Keterangan== True / False Sama dengan.!= True / False Tidak sama dengan.> True / False Lebih besar dari.

>= True / False Lebih besar dari atau sama dengan.

< True / False Lebih kecil dari.<= True / False Lebih kecil dari atau

sama dengan.

4. Operator Logika

Operator logika dipakai untuk menggabungkan beberapa kondisi, sehingga dapat dievaluasi sebagai sebuah ekspresi. Tabel operator ini dapat Anda lihat pada Tabel 14 di bawah ini:

Tabel 14 Operator Logika

Operator Hasil Keterangan&&

(and)True / False Hasil = True, Jika kedua

ekspresi bernilai True.||

(or)True / False Hasil = True, Jika salah

satu ekspresi bernilai True.

!(not)

True / False Hasil = True, jika ek-spresi bernilai False.

33

Dasar-Dasar Ajax

g. Perintah If...Else

Operator ini digunakan untuk mengeksekusi suatu statement pada saat kondisi adalah true dan kondisi lain tidak true atau secara bersyarat. Contoh Penulisan kode PHP menggunakan If..else sebagai berikut :

<?php$a=3;$b=6;if ($a>$b){echo(”a lebih besar dari pada b”);}elseif ($a<$b){echo(”a lebih kecil b”);}else{echo(”a sama dengan b”);}?>

1 2 3 4 5 6 7 8 910111213141516

Baris 1• Membuka Tag awal kode PHP. Baris 2 • Mendeklarasikan Variabel a dengan angka 3.Baris 3 • Mendeklarasikan Variabel b dengan angka 9.Baris 4-7 • Kondisi jika a lebih besar dari b lalu tampilkan text “a lebih besar dari pada b”.Baris 8-11• Kondisi Jika a lebih kecil dari b, tampilkan text “ a lebih kecil b”.Baris 12-15 • Selain itu adalah pernyataan a sama dengan b, tampilkan text “a sama dengan b”. Baris 16• Akhiri dan tutup Tag kode PHP.

Keterangan Kode

34

Dasar-Dasar Ajax

h. Perintah Switch

Switch digunakan untuk membandingkan suatu variable dengan beberapa nilai serta menjalankan statement tertentu jika nilai variable sama dengan nilai yang dibandingkan. Perintah Switch biasanya digunakan untuk menghindari perintah if..else yang terlalu panjang. Contoh penulisan struktur Switch adalah sebagai berikut :

<?php$a=2;switch($a){case 1:echo(”Nilai variable a adalah satu”);break;case 2:echo(”Nilai variable a adalah dua”);break;case 3:echo(”Nilai variable a adalah tiga”);break;}?>

1 2 3 4 5 6 7 8 9101112131415

Baris 1 • Membuka Tag awal kode PHP.

Baris 2 • Mendeklarasikan Variabel a dengan angka 2.

Baris 3-4• Mendekarasikan switch untuk variabel a untuk mengeksekusinya berdasarkan kondisi yang berbeda

Baris 5-7 • Pilihan Kondisi pertama tampilkan text “ Nilai variable a adalah satu”.

Baris 8-10• Pilihan Kondisi kedua tampilkan text “ Nilai variable a adalah dua”.

Baris 11-14 • Pilihan Kondisi ketiga tampilkan text “ Nilai variable a adalah tiga”.

Baris 15 • Akhiri dan tutup Tag kode PHP.

Keterangan Kode

35

Dasar-Dasar Ajax

i. Perulangan While

While memberikan perintah untuk menjalankan statement dibawah-nya secara berulang-ulang, selama perintahnya terpenuhi. Berikut ini adalah contoh kode penulisan perintah While.

<?php$a=1;while ($a<10){echo($a);$a++;}?>

1 2 3 4 5 6 7 8

Baris 1• Membuka Tag awal kode PHP. Baris 2 • Mendeklarasikan Variabel a dengan angka 1.Baris 3-4 • Perulangan While yang mendeklarasikan variabel a untuk melakukan perulangan kurang dari 10 secara berurutan.Baris 5 • Menampilkan text perulangan dari variabel a.Baris 6-7• Penambahan variabel a secara berurutan sampai perintah perulangan terpenuhi. Baris 8• Akhiri dan tutup Tag kode PHP.

Keterangan Kode

36

Dasar-Dasar Ajax

j. Perulangan For

Perulangan For berfungsi untuk melakukan proses pengulangan pada kondisi yang berekspresi boolean. Contoh kode penulisan kode peru-langan for pada pemrograman PHP adalah sebagai berikut :

Sebelum Anda memulai membuat aplikasi Ajax dengan PHP, terlebih dahulu Anda harus mengerti apa itu web server. Web server adalah sebuah perangkat lunak server yang berfungsi menerima permintaan HTTP atau HTTPS dari klien yang dikenal dengan web browser dan mengirimkan kembali hasilnya dalam bentuk halaman-halaman web yang umumnya berbentuk dokumen HTML. Web server yang terke-nal diantaranya adalah Apache dan Microsoft Internet Information Service (IIS).

Setelah Anda memahami apa itu web server beserta fungsinya. Ta-hap selanjutnya Anda akan belajar bagaimana cara membangun web server lokal pada komputer Anda sendiri.

<?phpfor ($a=0;$a<10;$a++){echo”Perulangan Ke-$a <br>”;}?>

1 2 3 4 5 6

Baris 1• Membuka Tag awal kode PHP. Baris 2-3• Menggunakan perulangan for dari angka nol sampai ke 10 secara berurutan.Baris 4-5 • Menampilkan text perulangan ke secara berurutan lalu menambah ke baris baru untuk tiap perulangan. Baris 6• Akhiri dan tutup Tag kode PHP.

Keterangan Kode

MENGENAL WEB SERVER5

37

Dasar-Dasar Ajax

Untuk mempermudah dalam proses belajar, Anda dapat mengguna-kan program XAMPP, XAMPP adalah Software yang berisi Apache, MySQL, dan phpmyadmin, Anda dapat mendownload software terse-but pada alamat http://sourceforge.net/projects/xampp. Pada tuto-rial kali ini menggunakan XAMPP versi terbaru yaitu xampp-win32-1.7.1-installer.

A. INSTALASI WEB SERVER

Adapun langkah-langkah dalam menginstal xampp-win32-1.7.1 pada komputer anda adalah sebagai berikut :

1. Apabila Anda sudah mendownload file xampp-win32-1.7.1-installeryang ada pada komputer. Setelah itu Anda klik ganda file xampp-win32-1.7.1-installer.exe pada tutorial kali ini file tersebut terdapat pada folder D:\ yang ada pada komputer.

2. Selanjutnya Anda klik tombol Next yang ada Pada jendela xampp-win32-1.7.1-installer.exe. Lihat Gambar 5.

3. Setelah itu Anda tentukan tempat direktori penginstalan program. Untuk tahap ini biarkan dalam keadaan standar pada direktori C:/Xampp,lalu klik tombol Next. Lihat Gambar 6.

Klik Ganda di sini

Gambar 4 Filexampp-win32-1.7.1-installer.exe

38

Dasar-Dasar Ajax

4. Selanjutnya Anda pastikan semua komponen telah diberi tanda cek hal ini dilakukan untuk menginstal semua komponen yang akan digunakan pada pembuatan situs, kemudian klik tombol Install. Lihat Gambar 7.

5. Tunggu sampai proses instalasi selesai. Lihat Gambar 8.

6. Setelah itu Anda Klik tombol Finish proses instalasi telah selesai. Lihat Gambar 9.

Gambar 5 Jendelaxampp-win32-1.7.1-installer.exe

Biarkan pada Direktori C:/Xampp

Klik Next

Gambar 6 Menentukan Direktori atau Lokasi Penginstalan

39

Dasar-Dasar Ajax

Beri Tanda Cek Di Sini

Klik Tombol InstallGambar 7 Mengaktifkan semua komponen

Gambar 8 Proses Instalasi Sedang berjalan

Gambar 9 Proses Instalasi Selesai

Klik Tombol Finish

40

Dasar-Dasar Ajax

7. Kemudian akan muncul Jendelal Informasi Setelah itu Anda Klik tombol Finish proses instalasi telah selesai. Lihat Gambar 10.

8. Setelah Proses instalasi telah berhasil akan muncul jendela XAMPP Control Panel. Lihat Gambar 11.

9. Selanjutnya untuk memastikan apakah web server telah berha-sil terinstal dan aktif pada komputer. Caranya Anda buka web browser seperti Internet Explorer, Mozila Firefox, atau Opera yang ada pada komputer, Kemudian pada kotak address ketik localhost. Lihat Gambar 12.

Klik TombolYes

Gambar 10 Informasi instalasi berhasil

Gambar 11 Informasi XAMPP Control Panel

Apache dan MySQL

telah aktif berjalan

41

Dasar-Dasar Ajax

Ketik Localhost

di sini

Gambar 12 Web server telah aktif pada komputer

Catatan :

Jika setelah Anda mengetik localhost pada browser. Namun halaman yang tampil bukan seperti yang ditunjukkan pada Gambar 9 di atas. Ada kemungkinan Apache yang ada pada komputer Anda belum aktif. Adapun cara mengaktifkannya secara manual sebagai berikut :

1.Anda Klik Start | All Programs | Apache Friends | XAMPP | XAMPPControl Panel. selanjutnya Anda klik tombol start pada Apache dan MySQL makaakantampakpadaGambar12.

2.Setelah itu untuk mengecek apakah apache sudah Aktif. Coba Anda

lakukan lagi cara yang sama seperti langkah 9 di atas.

42

Dasar-Dasar Ajax

Salah satu yang tak lepas dari pembuatan situs adalah web editor. Web editor adalah program yang berfungsi untuk merancang tampi-lan atau layout dari situs yang akan dibuat. Pada tutorial pembuatan aplikasi Ajax kali ini menggunakan Adobe Dreamweaver CS4.

A. MERANCANG SITUS DENGAN DREAMWEAVER CS4

Sebelum memulai membuat layout, pastikan program Dreamweaver CS4 telah terinstal pada komputer Anda.

1. Anda buka aplikasi Macromedia Dreamweaver CS4 . Klik Tombol Start pada Start menu. Kemudian Anda pilih menu All Programs > Macromedia Dreamweacer CS4 Perhatikan Gambar 13.

2. Setelah tampil jendela Start page Anda Klik icon dengan tulisan PHP , Perhatikan Gambar 14.

3. Setelah diklik icon maka akan tampil jendela dokumen baru seperti Gambar 15.

CONTOH APLIKASI AJAX DENGAN PHP6

Gambar 13 MembukaProgramaplikasiDreamweaverCS4

43

Dasar-Dasar Ajax

Klik di sini

Gambar 14 Memilih PHP

Gambar 15 Tampilan jendela dokumen baru

44

Dasar-Dasar Ajax

Gambar 16 Memberi nama Title halaman

Gambar 17MengaktifkantabKode

Gambar 18 Gambar posisi kode

4. Pada Bagian Title: Anda Ketikkan Contoh Ajax1, setelah itu tekan tombol Enter pada keyboard. Lihat Gambar 16.

5. Selanjutnya Anda Pastikan tab yang aktif pada Code. Lihat Gambar 17.

6. Kemudian Anda Pastikan tab kode telah aktif. Lalu Anda ketik kode HTML berikut ini dibawah Tag Body. Lihat Pada Gambar 18.

Ketik di sini

45

Dasar-Dasar Ajax

<div align=”center”><table cellpadding=”0” cellspacing=”0” width=”752” height=”645”><tr><td valign=”top” colspan=”4” height=”149”><img border=”0” src=”../header5.jpg” width=”750” height=”142”></td></tr><tr><td bgcolor=”#C8DEDB” colspan=”4” height=”19” align=”left”><font face=”Arial” style=”font-size: 8pt”><marquee behavior=”alternate”>Selamat Datang di Maxi Multimedia Online</marquee></font></td></tr><tr><td width=”174” height=”24” align=”center” bgcolor=”#096C5C”><b><font face=”Verdana” color=”#FFFFFF” style=”font-size: 9pt”>Menu Utama </font></b></td><td width=”10”></td><td width=”544”></td><div style=”clear:both”></div><td width=”14”></td></tr><tr><td height=”35” valign=”top” bgcolor=”#00CC00”><div align=”center”><p><strong><a href=”javascript:sendRequest(‘home.php’,’content’);”>Home</a></strong></p></div></td><td><div align=”center”></div></td><td valign=”top” rowspan=”7”><div id=”content”></div> <p align=”left”></td><td><div align=”center”></div></td></tr><tr><td height=”30” valign=”top” bgcolor=”#00CC00”><div align=”center”><strong><a href=”javascript:sendRequest(‘about.php’,’content’);”>Tentang Kami</a></strong></div></td><td><div align=”center”></div></td><td><div align=”center”></div></td></tr><tr><td height=”38” valign=”top” bgcolor=”#00CC00”><div align=”center”>

1 2 3 4 5 6 7 8 9101112131415161718192021222324252627282930313233343536373839404142434445464748

46

Dasar-Dasar Ajax

<p><strong><a href=”javascript:sendRequest(‘contact.php’,’content’);”>Kontak</a></strong></p></div></div><p align=”center”><br> </p></td><td><div align=”center”></div></td><td><div align=”center”></div></td></tr><tr><td height=”20” align=”center” bgcolor=”#096C5C”><font face=”Verdana” color=”#FFFFFF”><b><span style=”font-size: 9pt”>Berita Online</span></b></font></td><td></td><td></td></tr><tr><td valign=”top” bgcolor=”#00CC00” rowspan=”2”><p align=”center”><font face=”Arial” style=”font-size: 9pt”><marquee direction=up scrollamount=”3” height=”187” width=”170”><b>Aplikasi Ajax dengan PHP</b><br><br>Ajax diperkenalkan oleh Jesse James Garret. Aplikasi web yang bekerja dengan Ajax bekerja secara Asynchronously, yang berarti mengirim dan menerima data dari seluruh user ke server tanpa perlu me-load kembali seluruh halaman...</marquee></font></td><td height=”173”> </td><td> </td></tr><tr><td height=”21”></td><td></td><td></td></tr><tr><td bgcolor=”#096C5C” colspan=”4” height=”26” align=”center”> </td></tr><tr><td height=”45” colspan=”4” align=”center” bgcolor=”#00CC00”><p align=”center”><font face=”Arial” size=”1”>Copyright © 2009 - maximultimedia.com<br>

495051525354555657585960616263 646566676869707172737475767778798081828384858687888990919293949596

47

Dasar-Dasar Ajax

Jl. jenderal sudirman.. No. 007 Palembang</font></td></tr></table></div>

979899100101

Baris 1• Kode untuk mengatur posisi ke tengah.

Baris 2-3 • Tag untuk membuat atau menyisipkan tabel dengan bor-der sama dengan 0.

Baris 4-8 • Tag awal untuk membuat kolom dan baris lalu disisipkan dengan nama Header.jpg lalu diakhiri dengan Tag penutup kolom dan baris.

Baris 9-16• Tag awal untuk membuat kolom dan baris dengan memberikan warna dengan kode ”#C8DEDB” lalu menyisipkan text “Selamat datang di Maxi Multimedia online ” dengan tipe marquee atau teks berjalan ke kanan dan ke kiri lalu diakhiri dengan tag penutup kolom , baris dan </marquee>.

Baris17-27• Tag awal untuk membuat kolom dan baris dengan mem-berikan warna hitam pada kolom dan menyisipkan text “ Menu Utama” dengan tipe huruf verdana dan berwarna putih lalu akhiri tag penutup kolom dan baris.

Baris 28-38• Tag awal untuk membuat kolom dan baris dengan memberikan warna hijau pada kolom lalu disisipkan text “ Home” , pada text akan disisipkan kode javascript untuk merequest me manggil halaman “home.php” berdasarkan tag div yang dibuat dengan nama class “content”. Kemudian menutup kembali Tag </div> beserta tag kolom dan baris.

Baris 39-45• Tag awal untuk membuat kolom dan baris dengan me-berikan warna hijau pada kolom lalu disisipkan text “ Tentang kami” , pada text akan disisipkan kode javascript untuk merequest me - manggil halaman “about.php”. Kemudian menutup kembali Tag kolom dan baris.

Baris 46-58• Tag awal untuk membuat kolom dan baris dengan memberikan warna hijau pada kolom lalu disisipkan text “ Kontak” , pada text akan disisipkan kode javascript untuk merequest me manggil halaman “contact.php” berdasarkan tag div yang dibuat dengan nama class “content”. Kemudian menutup kembali Tag kolom dan baris.

Keterangan Kode

48

Dasar-Dasar Ajax

7. Simpan ke dalam folder C:/XAMPP/htdocs/Xampp, lalu buat folder baru dengan nama Praktek1 dan simpan nama file dengan nama index.php , Lihat Gambar 16.

Baris 59-66 • Tag awal untuk membuat kolom dan baris dengan mem-berikan warna hitam pada kolom dan menyisipkan text “ Berita Online” dengan tipe huruf verdana dan berwarna putih lalu akhiri tag penutup kolom dan baris.

Baris 67-81 • Tag awal untuk membuat kolom dan baris dengan mem-berikan warna hijau pada kolom lalu disisipkan text dengan tipe marquee atau teks berjalan ke bawah dan ke atas lalu diakhiri dengan tag penutup kolom , baris dan </marquee>.

Baris 82-90• Tag awal untuk membuat kolom dan baris dengan mengatur posisi ke tengah dengan keadaan kolom dan baris yang kosong, lalu akhiri Tag awal baris dan kolom.

Baris 91-99• Tag awal untuk membuat kolom dan baris dengan mem-berikan warna hijau pada kolom lalu disisipkan text copyright serta alamat dan pengaturan posisi text berada di tengah. lalu akhiri Tag awal baris dan kolom.

Baris 100-101• Akhiri tag </table> dan </div>.

Klik Save

Beri nama File index.php

Tempat Lokasi Pemyimpan

Gambar 16 Menyimpan dengan nama file index.php

49

Dasar-Dasar Ajax

B. MEMBUAT HALAMAN HOME

Halaman Home merupakan halaman utama dari suatu situs atau website. Pada halaman home kali ini kita akan membuat halaman layout yang tidak harus sama seperti halaman index.php , karena pada teknologi kali ini sangat berbeda dengan aplikasi PHP karena kita menggunakan teknologi Asynchronous Ajax jadi kita tidak perlu untuk membuat layout baru.

Adapun langkah-langkahnya adalah sebagai berikut.

1. Anda buka kembali aplikasi Macromedia Dreamweaver CS4 . Klik Tombol Start pada Start menu. Kemudian Anda pilih menu All Programs > Macromedia Dreamweacer CS4.

2. Setelah tampil jendela Start page Anda Klik icon dengan tulisan PHP

3. Pada Bagian Title: Anda Ketikkan home, setelah itu tekan tombol Enter pada keyboard. Lihat Gambar 19.


Gambar 19 Memberi nama title halaman


50

Dasar-Dasar Ajax

5. Kemudian Anda hapus semua kode yang ada pada tab kode lalu Anda Ketik kode berikut ini :

6. Kemudian Anda ke dalam folder C:/Xampp/htdocs/xampp/ praktek1, lalu beri nama File home.php . Lihat Gambar 21.

<h2>Selamat Datang di website kami</h2><p>Pada halaman ini berisi content dari halaman home. Text ini merupakan isi dari halaman home. Text ini merupakan isi dari halaman home.Text ini merupakan isi dari halaman home.Text ini merupakan isi dari halaman home.Text ini merupakan isi dari halaman home.Text ini merupakan isi dari hala-man home.Text ini merupakan isi dari halaman home.Text ini merupakan isi dari halaman home.Text ini merupakan isi dari halaman home.Text ini merupakan isi dari halaman home.Text ini merupakan isi dari halaman home.Text ini merupakan isi dari halaman home.Text ini merupakan isi dari halaman home. </p>

1 2

3


Beri nama file home.php

Klik Save

Gambar 21 Menyimpan dengan nama home.php

Baris 1• Awal tag <h2>untuk menampilan text dengan huruf berukuran besar “Selamat Datang di website kami” lalu akhiri Tag </h2>.

Baris 2• Awal Tag Paragraf untuk menampilkan isi text berdasarkan pengaturan paragraf.

Baris 3 • Akhiri Tag Paragraf.

Keterangan Kode

51

Dasar-Dasar Ajax

C. MEMBUAT HALAMAN PROFILE

Halaman Profile merupakan halaman yang berisi informasi tentang perusahaan yang memiliki situs tersebut. Dengan adanya halaman profile maka pengunjung akan mendapatkan informasi atau gamba-ran dari perusahaan tersebut.

Adapun langkah-langkahnya adalah sebagai berikut.



3. Pada Bagian Title: Anda Ketikkan profile, setelah itu tekan tombol Enter pada keyboard. Lihat Gambar 22.




52

Dasar-Dasar Ajax

5. Kemudian Anda hapus semua kode yang ada pada tab kode lalu Anda Ketik kode berikut ini :

6. Kemudian Anda ke dalam folder C:/Xampp/htdocs/xampp/ praktek1, lalu beri nama File about.php. Lihat Gambar 24.

<h2>PROFILE PERUSAHAAN </h2><p>Berisi conten dari halaman PROFILE PERUSAHAAN. Berisi uraintentangprofildaripemilikwebsite.Berisiurainten-tangprofildaripemilikwebsite.Berisiuraintentangprofildaripemilikwebsite.Berisiuraintentangprofildaripemi-likwebsite.Berisiuraintentangprofildaripemilikweb-site.Berisiuraintentangprofildaripemilikwebsite.Berisiuraintentangprofildaripemilikwebsite.Berisiurainten-tangprofildaripemilikwebsite.Berisiuraintentangprofildaripemilikwebsite.Berisiuraintentangprofildaripemi-likwebsite.Berisiuraintentangprofildaripemilikweb-site.Berisiuraintentangprofildaripemilikwebsite.Berisiuraintentangprofildaripemilikwebsite.Berisiurainten-tangprofildaripemilikwebsite.Berisiuraintentangprofildari pemilik website.</p>

1 2

3

Baris 1• Awal tag <h2>untuk menampilan text dengan huruf berukuran besar “ PROFILE PERUSAHAAN” lalu akhiri Tag </h2>.

Baris 2• Awal Tag Paragraf untuk menampilkan isi text berdasarkan pengaturan paragraf.s

Baris 3• Akhiri Tag Paragraf.

Keterangan Kode


Beri nama file about.php

Klik Save

Gambar 24 Menyimpan dengan nama about.php

53

Dasar-Dasar Ajax

D. MEMBUAT HALAMAN CONTACT

Pada tutorial berikut ini , Anda akan membuat halaman hubungi kami atau contact us. yaitu halaman yang berisi untuk menghubungi si pemilik situs. Adapun langkah-langkahnya adalah sebagai berikut.

1. Anda buka kembali aplikasi Macromedia Dreamweaver CS4 .Klik Tombol Start pada Start menu. Kemudian Anda pilih Menu All Programs > Macromedia Dreamweacer CS4.


3. Pada Bagian Title: Anda Ketikkan contact, setelah itu tekan tombol Enter pada keyboard. Lihat Gambar 25.




54

Dasar-Dasar Ajax

5. Kemudian Anda hapus semua kode yang ada pada tab kode lalu Anda Ketik kode berikut ini : <formname=”form1”method=”post”action=””><fieldset><h2><legend>Contact Us</legend></h2><p>Anda Bisa menghubungi kami menggunakan fasilitas ini. Halaman untuk menghubungi pemilik situs.</p><div style=”width:300px;” align=”right”;> <p> <label><strong>Nama Depan:</strong> <inputtype=”text”name=”textfield”> </label> </p> <p> <label><strong>Nama Belakang :</strong><inputtype=”text”name=”textfield2”> </label> </p> <p> <label><strong>Email :</strong><inputtype=”text”name=”textfield3”> </label> <br> <label><br> <strong>Pesan Anda :</strong> <textarea name=”textarea”></textarea> </label> </p> <p> <label> <input type=”submit” name=”Submit” value=”Submit”> </label> </p></div></fieldset></form>

1 2 3 4 5 6 7 8 91011121314151617181920212223242526272829303132333435

Baris 1• Membuat Form dengan nama Form1 dan membuat kode Tag <Fieldset> .

Baris 2-4• Membuat Text “Contact Us”dengan huruf berukuran besar dan membuat tag legend lalu akhiri tag legend.

Keterangan Kode

55

Dasar-Dasar Ajax

6. Kemudian Anda ke dalam folder C:/Xampp/htdocs/xampp/ praktek1, lalu beri nama File contact.php. Lihat Gambar 27.

Baris 5-6 • Membuat awal tag Paragraf dan menampilkan text lalu akhiri tag paragraf.

Baris 7-12• Membuat Tag awal Div untuk pengaturan lebar 300 pixel dan posisi ke kanan , lalu membuat tag awal paragraf untukmenampilkan text, buat label dengan tipe huruf tebal kemudian tag awal untuk textbox dengan nama textfield setelah itu akhiri tag paragraf,label dan textbox.

Baris13-17 • Membuat Tag awal paragraf untuk menampilkan text, buat label dengan tipe huruf tebal kemudian tag awal untuk textbox dengan nama textfield2, setelah itu akhiri tag paragraf, label dan textbox.

Baris18-27• Membuat Tag awal paragraf untuk menampilkan text, buat label dengan tipe huruf tebal kemudian tag awal untuk textbox dengan nama textfield3 dan menambah baris baru untuk membuat textarea setelah itu akhiri tag paragraf, label ,textbox dan text area.

Baris28-32• Membuat Tag awal paragraf lalu Tag awal untuk Tombol dengan text Submit lalu akhiri Tag.

Baris 33-35 • Akhiri dan tutup Tag Div Fieldset dan Form.


Beri nama Filecontact.php

KlikSave

Gambar 27 Menyimpan File dengan nama contact.php

56

Dasar-Dasar Ajax

E. MEMBUAT KODE AJAX

Selanjutnya pada tutorial kali ini , Anda akan membuat kode Ajax yaitu kode JavaScript untuk mengirimkan dan menerima data dari user ke server tanpa me-load kembali seluruh halaman. Adapun langkah-langkahnya adalah sebagai berikut.


2. Setelah tampil jendela Start page Anda Klik icon dengan tulisan JavaScript

3. Selanjutnya akan tampil halaman file JavaScript yang baru. Perhatikan pada Gambar 28.

4. Setelah itu Anda ketik kode JavaScript di bawah ini.

Gambar 28 halaman File JavaScript yang baru

57

Dasar-Dasar Ajax

function getXMLHttpRequest(){if(window.ActiveXObject){ return new ActiveXObject(“Microsoft.XMLHTTP”); }else if(window.XMLHttpRequest){ return new XMLHttpRequest();}else { alert(“Status : can not create XMLHttpRequest Ob-ject”); } }var xmlhttp=getXMLHttpRequet();

function sendRequest(pageUrl,elementID){var obj=document.getElementById(elementID);var obj.innerHTML=’Loading.... please wait.’; if(xmlhttp.readyState==4 || xmlhttp.readyState==0){ xmlhttp.open(“GET”,pageUrl,true); xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4 && xmlhttp.status==200){ obj.innerHTML=xmlhttp.responseText; } }xmlhttp.send(null); } }

1 2 3 4 5 6 7 8 9

10111213141516171819202122

Baris 1• Fungsi untuk membentuk objex XMLHttpRequest.

Baris 2-3 • Jika User Menggunakan Browser Internet Explorer.

Baris 4-5 • Jika User menggunakan Browser selain IE.

Baris 6-8 • Pesan gagal dalam membentuk object XMLHttpRe-quest.

Baris 9 • Kode ini membuat object XMLHttpRequest pada browser.

Baris 10 • Fungsi untuk mengambil parameter HTML element ID dan URL dari file yang ada di server.

Baris 11• Kode ini membuat object document.

Baris 12 • Kode untuk menampilkan Text.

Baris13-14 • Kode untuk menbuka koneksi dengan server jika ReadyState = 4 atau ReadyState = 0.

Baris 15 • Kode berfungsi jika state berubah lakukan fungsi berikutnya.

Keterangan Kode

58

Dasar-Dasar Ajax

6. Kemudian Anda ke dalam folder C:/Xampp/htdocs/xampp/ praktek1, lalu beri nama File Ajax.js . Lihat Gambar 29.

7. Setelah Anda membuat File untuk kode JavaScript Anda buka kembali File index.php pada folder C:/Xampp/htdocs/xampp/ praktek1. Seperti pada Gambar 30.

Baris 16-19 • Jika readyState=4 dan Status=100 tampilkan Response.

Baris 20-22• Kirim Request ke Server


Beri nama FileAjax.js

KlikSave

Gambar 29 Menyimpan File dengan nama ajax.js

Buka Direktori Berikut ini

Klik Ganda di sini

Gambar 30 Jendela Windows Explorer

59

Dasar-Dasar Ajax


9. Ketikkan kode untuk memanggil fungsi Javascript pada file Ajax.js di dalam tag berikut ini Perhatikan pada Gambar 30.

10.Kemudian Tambahkan kode untuk memanggil fungsi file Ajax.js di dalam tag berikut ini. Lalu Anda simpan kembali file index.php.

Gambar 31 Mengaktifkan tab kode

KetikDisni

Gambar 32 Posisi kode

<script type=”text/javascript” src=”ajax.js”></script> 1

Baris 1 • Fungsi untuk memanggil kode Javascript.

Keterangan Kode

60

Dasar-Dasar Ajax

Sekarang Anda coba jalankan web yang telah Anda buat menggunakan browser, baik itu Internet Explorer atau browser lainnya.Pada tutorial kali ini menggunakan browser Mozila Firefox. Adapun langkah-langkahnya sebagai berikut :

1. Anda buka Klik Tombol Start pada Start menu. Kemudian Anda pilih menu All Programs > Mozila Firefox . Lihat Pada Gambar 33.

2. Kemudian akan tampak jendela browser Mozila Firefox. terlihat pada Gambar 34 di bawah ini.

MENJALANKAN PROGRAM7

Gambar 33 Membuka Progam Mozila Firefox

61

Dasar-Dasar Ajax

3. Setelah itu Anda Ketik dialamat address pada browser Mozila Firefox yaitu http:/Localhost/xampp/praktek1 , maka akan tampil halaman yang telah Anda buat. Perhatikan Gambar 35.

Gambar 34 Jendela Mozila Firefox

Gambar 35 Tampilan Halaman index

Ketik alamat URL disini

62

Dasar-Dasar Ajax

4. Setelah itu Anda Klik alamat Home di sebelah kiri Anda , maka akan tampil halaman home yang telah Anda buat. Perhatikan Gambar 36.

5. Kemudian Anda Klik alamat TentangKami di sebelah kiri Anda , maka akan tampil halaman about yang telah Anda buat. Perhatikan Gambar 37 di bawah ini.

Catatan :

Untuk Gambar Header Anda Simpan atau Anda letakkan dimana Lokasi folder halaman yang telah Anda buat Lokasinya seperti ini C:/Xampp/ htdocs/xampp /praktek1 Pada tutorial ini lokasi foldernya adalah C:/xampp/ htdocs/xampp/praktek1 / header5.jpg. Header5.jpg merupa-kan nama file gambar untuk header web.

Perhatikan URL ini

Gambar 36 Tampilan Halaman home

63

Dasar-Dasar Ajax

4. Kemudian Anda Klik alamat Kontak di sebelah kiri Anda , maka akan tampil halaman Contact yang telah Anda buat. Perhatikan Gambar 38 di bawah ini.

Gambar 37 Tampilan Halaman About

Perhatikan URL ini

Perhatikan URL ini

Gambar 38 Tampilan Halaman Contact

64

Dasar-Dasar Ajax

5. Kesimpulannya URL ini tidak berubah setiap kali kita memilih link yang ada. Karena content secara asynchronous, sehingga tidak perlu merefresh halaman web.

01 dasar dasar ajax

Documents