E-trik Ajax. Dasar-Dasar Ajax. Dedi Alnas

E-trik Ajax

Dasar-Dasar Ajax

Dedi Alnas

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 spesifikasi yang ditetapkan oleh W3C ( World Wide Web Consortium).

B.2 CSS ( Cascading Style Sheets) adalah sebuah mekanisme sederhana untuk memberikan style ( seperti font, warna, jarak spasi, dll) kepada dokumen web yang ditulis dalam HTML atau XML ( termasuk beberapa variasi bahasa XML seperti XHTML dan SVG).

2

Dasar-Dasar Ajax

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.

1

STRUKTUR KODE PROGRAM HTML

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.

3

Dasar-Dasar Ajax Tabel 1 Perintah dasar HTML

HTML Tag <TITLE>

Keterangan

Struktur Kode



Header halaman

”deskripsi Halaman”


Isi halaman

Isi Halaman

Komentar



Judul halaman Web

<TITLE>Judul

Link /Hubungan

Situs Maxikom



Huruf tebal / Bold



Huruf Miring / Italic

Maxikom



Garis bawah / Underline

Maxikom

Paragraf baru

Maxikom

Maxikom

Baris baru

Baris_1
Baris_2

Rata tengah

Maxikom

Penggunaan huruf

Contoh

Menampilkan gambar



<EMBED> Meletakkan objek <EMBED src= “lagu.mid”

width=”100%” height= “60” align= “center”>

4

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 pilih All programs | Accessories | Notepad. Lihat Gambar 1 di bawah ini.

Gambar 1 Membuka aplikasi Notepad

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

Ketik

Gambar 2 Jendela Notepad

3. Simpan dengan tekan tombol Ctrl + S dan extensi dibelakangnya .HTML. Perhatikan Gambar 3 . Klik Save Simpan dengan penulisan nama file .HTML

Gambar 3 Menyimpan file dengan berextensi .HTML

5

Dasar-Dasar Ajax 1 2 3 4 5 Contoh Penulisan kode HTML adalah: 6 Halaman web Pertamaku !!! 7 8

Keterangan Kode

• • • • • •

Baris 1 Baris 2 Baris 3 Baris 4 Baris 5 Baris 6 Baris 7 Baris 8

• •

2

Tag awal halaman HTML. Awal Header halaman. Judul halaman. Akhir Header halaman. Akhir isi halaman. Menampilkan Text Halaman web Pertamaku !!! menggunakan Font Verdana dengan tipe Bold. Akhir isi halaman. Tag akhir halaman HTML.

HTTP REQUEST DAN DASAR-DASAR RESPON

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:

6

Dasar-Dasar Ajax Tabel 2 Jenis kode respon HTTP

Kode

Keterangan

200 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 503 Service Unavailable

Kode respon ini dikembalikan apabila terjadi kesalahan teknis dalam server. Respon yang dikembalikan apabila jenislayanan tidak dikenal oleh server.

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

7

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 diberikan oleh server.

getResponHeader(“headername”)

open(“method”,”URL”,async”userna me”,”pswd”)

8

Method ini dapat digunakan untuk memperoleh isi dari begian sebuah header, sebagai contoh untuk memperoleh ukuran dari document yang sedang direquest, Anda dapat menggunakan getResponseHeader(“ContentLength”). 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”).

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. method ini digunakan untuk mengirim request ke server.

send(“content”)

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

Onreadystatechange

Menangani event yang bekerja setiap kali status berubah. berisi informasi state dari object XMLHttpRequest pada saat properti ini digunakan (0: uninitialized, 1: loading, 2: loaded, 3: interactive, 4: complete). Properti ini bisa digunakan untuk menangani kesalahan, memanggil blok kode atau function untuk setiap readyState.

Readystate

9

Dasar-Dasar Ajax

ResponseText

Properti ini akan dihasilkan pada saat request telah berhasil/complete. Misalnya anda melakukan request terhadap sebuah document di server, respon dari server akan disimpan pada properti ini.

ResponseXML

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

Status

Properti 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 : 1 2 3 4 5 6 7 8

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

Keterangan Kode

• • • •

Baris 1 Baris 2-3 Baris 4-5 Baris6-8

Fungsi untuk membentuk objex XMLHttpRequest. Jika User Menggunakan Browser Internet Explorer. Jika User menggunakan Browser selain IE. Pesan gagal dalam membentuk object XMLHttpRequest.

10

Dasar-Dasar Ajax Berikut contoh penulisan untuk mengirim request ke server dengan menggunakan method GET sebagai berikut : 1 2 3 4 5 6 7 8 9 10 11 12 13 14

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); } }

• Keterangan Kode •

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.

3





STRUKTUR PROGRAM JAVASCRIPT

Sebelum menggunakan Javascript, terlebih dahulu Anda harus mempelajari tentang struktur penulisannya. Struktur penulisan JavaScript adalah sebagai berikut: 1 <Script language=”Javascript”> 2 3

11

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

Event Handler onAbort

onBlur

onFocus

onChange

onSelect

onClick

Objek

Fungsi

Gambar.

Menjalankan kode JavaScript jika terjadi pembatalan Proses.

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

Menjalankan kode Javascript jika posisi kursor berpindah dari sustu object (Lost Focus).

F r a m e , B u t t o n , S u b m i t , Menjalankan kode JavaScript Reset,RadioButton, Check- jika posisi kursor berada BOx, SelectList,Pasword, pada suatu objek. TextField,TextArea,Windows. SelectList,TextArea,TextField.

Menjalankan kode Java Sript jika nilai teks pada suatu objek berubah.

TextField,TextArea.

Menjalankan kode JavaScript ketika teks di dalam area objek diseleksi.

Button, CheckBoxRadioButto Menjalankan kode JavaScript n,Submit,Reset,Link. jika suatu onject di klik.

12

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 halaman Web akan ditampilkan.

onMouseOut

Link.

Menjalankan kode JavaScript pada saat kursor mouse meninggalkan area objek.

onMouseOver

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 pemrograman. Beberapa Tipe Data yang umum dipakai dalam pemrograman JavaScript dapat Anda lihat pada Tabel 6. Tabel 6 Tipe Data JavaScript

Tipe Data Integer Float boolean String

Nilai -32768 s/d 32767 -3.4E38(-3.4x1038) s/d +3.4E38(+3.4x1038) True dan False Unicode 0(“A-Z”,”0-9”)

13

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. 1 2 3 4 5 6

<Script language=”Javascript”>

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.

4. Function. Function dalam JavaScript adalah blok perintah (prosedur) yang bertugas untuk melakukan proses tertentu. Dasar perintah Function adalah sebagai berikut: 1 2 3 4 5 6

<Script language=”Javascript”>

14

Dasar-Dasar Ajax

Catatan :



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

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 (perhitungan). Berikut ini adalah beberapa jenis Operator JavaScript.

A. Operator Pembanding Tabel 7 Operator pembanding

Operator == != > >=

Hasil True / False True / False True / False True / False

< <=

True / False True / False

15

Keterangan Sama dengan.. Tidak sama dengan.. Lebih besar dari.. Lebih besar dari atau sama dengan.. Lebih kecil dari.. Lebih kecil dari atau sama dengan..

Dasar-Dasar Ajax

B. Operator Logika Tabel 8 Operator Logika

Operator && (and) | (or)

Hasil True / False

! (not)

True / False

True / False

Keterangan Hasil = True, Jika kedua ekspresi bernilai True. Hasil = True, Jika salah satu ekspresi bernilai True. Hasil = True, jika ekspresi bernilai False.

C. Operator Aritmatik Tabel 9 Operator Aritmatik

Operator + * / ++ -(Minus) % (Modulus)

Contoh x=x+y x=x-y x=x*y x=x/y x++ atau ++x --x atau x-x = -x

Keterangan Penjumlahan. Pengurangan. Perkalian. Pembagian. Peningkatan. Penurunan. Nilai negatif.

x=x%y

Sisa pembayaran.

16

Dasar-Dasar Ajax

6. Pernyataan If..Else Pernyataan if...else bisa dikatakan struktur keputusan yang digunakan untuk mengendalikan perintah yang terdiri dari beberapa kondisi dalam pemrograman. Bentuk pernyataan IF Else adalah sebagai berikut : 1 2 3 4 5

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

Pernyataan if...else dapat digunakan untuk mengendalikan perintah kondisi bertingkat, contohnya adalah sebagai berikut: 1 2 3 4 5 6 7 8

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

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: 1 2 3 4 5 6 7 8 9 10 11

switch { }

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

17

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: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<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(“
”) } document.write(“

”)

Keterangan Kode •

Baris 1-5

•

Baris 6

Tag awal isi halaman atau body.

•

Baris 7

Tag awal script.

•

Baris 8

Deklarasi Variabel i sama dengan nol.

•

Baris 9

•

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

•

Baris 12

•

Baris 13-14 Menambah baris baru.

•

Baris 15

•

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



Tag awal halaman HTML, Header dan judul halaman serta akhiri tag Header.

Kode untuk melakukan perulangan For yang dimulai dari nol sampai dengan 5. Menampilkan text dan diulangi sebanyak 5 kali sesuai dengan variabel yang diinput secara berurutan Membuat Paragraf baru.

9. Perulangan While

18

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 : 1 2 3 4 5 6 7 8 9 10 11 12 13

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

Keterangan Kode •

Baris 1

•

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.

Tag awal halaman HTML.

19



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: 1

// Syntax :

2

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

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

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

// Syntax :

2

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”;

Catatan : • Nilai index umumnya dimulai dari angka 0. Sebagai contoh jika panjang Array adalah (5), maka urutannya index adalah (0,1,2,3, 4). • Gunakan tanda [ ] saat menggunakan Index.

20

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 berikut 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1” /> <script language=”JavaScript”> DATA MAHASISWA

”); document.write(“”); document.write(“”); for(a=1; a<=3; a++) { document.write(“”); for(b=0; b<=2; b++){ document.write(“”); } document.write(“”); } document.write(“

NPM	Nama	ALamat	Jurusan
000”,a,”	”,nilai[a][b],”

”); } data1 = new Array(“Dedi”,”Jakarta”,”KA”); data2 = new Array(“Dedek”,”Linggau”,”SI”); data3 = new Array(“Alde”,”Bandung”,”TI”); database = new Array(“”,data1,data2,data3); tampil(database); -->

21

Dasar-Dasar Ajax Keterangan Kode •

Baris 1-3

•

Baris 4-5

•

Baris 6

•

Baris 7-10

•

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.

Tag awal halaman HTML, Head dan judul halaman. Tag awal JavaScript.

Function dengan nama tampil. Menampilkan tabel dengan judul kolom.

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 : 1

// Syntax : Try { }catch }

[kondisi] throw exception (exception) { [Pernyataan]

22

Dasar-Dasar Ajax Berikut adalah contoh penulisan bentuk error handler sebagai berikut : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<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) } }

Catatan :

penulisan kode try..catch diharuskan dengan huruf kecil

(lowercase). Jika dalam (Uppercase) maka akan error pada

JavaScript

23

Dasar-Dasar Ajax Keterangan Kode •

Baris 1-3

•

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

•

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

•

Baris 25

Akhiri Tag Body.

•

Baris 26

Akhiri Tag HTML.

4

Tag awal halaman HTML, Head dan JavaScript.



Tag awal body atau isi halaman.

STRUKTUR KODE PROGRAM PHP

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 dengan 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.

24

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 .sesuai dengan tag pembukanya. File PHP terdapat tag HTML dan kode PHP dan diberi format dengan ekstensi .php. Berdasarkan 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 : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

print !”); ?> echo !’; ?>

25

Dasar-Dasar Ajax Keterangan Kode •

Baris 1-3

•

Baris 4

•

Baris 5

•

Baris 6-8 tengah.

•

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

•

Baris 11

Menambah baris baru.

•

Baris 12 Echo.

Awal Kode PHP untuk menampilkan text dengan perintah

•

Baris 13-15 Akhiri Tag Kolom dan Tabel.

•

Baris 16

Tag awal halaman HTML, Head dan JavaScript.



Akhiri Head.



Awal Tag Body atau isi halaman. Membuat tabel dengan border = 1 dan posisi rata

Akhiri Tag Body.

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 Integer

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

26

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

String

Arrays

Object

Sebuah data dengan tipe string dinyatakan dengan mengapitnya menggunakan tanda petik tunggal (‘ ‘) maupun ganda (“ “). Perbedaannya adalah , jika kita menggunakan tanda petik tunggal, maka pada string itu tidak dapat kita masukkan variabel dan escape sequence handling. 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 berbeda-beda. 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.

27

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. • Untuk tipe data array, akan bernilai false jika elemennya kosong, dan sebaliknya adalah true. • Untuk tipe data object, bernilai false jika tidak ada variabel atau fungsi/method yang terdefinisi didalamnya, dan sebaliknya bernilai true. • Untuk variabel 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 digunakan, tidak ditentukan secara eksplisit sebuah variabel $var dideklarasikan bertipe integer dan dapat berubah secara otomatis menjadi bertipe floating point jika diberi nilai pecahan. Berikut ini adalah contoh penulisan kode PHP dapat Anda lihat sebagai berikut: 1

// Contoh ”); echo “\$var = “.$var.” dan bertipe ”.gettype($var) ; ?>

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

28

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. 1 //Contoh

Catatan : Penulisan kode untuk Mendeklarasikan Variabel diharuskan memperhatikan huruf kecil (lowercase) dan huruf besar (Uppercase) karena penamaan variabel bersifat Case-Sensitif.

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 :

29

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+3

4

-

Pengurangan

x=1 4-x

3

*

Perkalian

x=5 x*4

20

/

pembagian

15/5 10/2

3 5

%

sisa pembagian

7%2 18 % 4

1 2

++

peningkatan

x=9 x++

x= 10

__

penurunan

x=10 x--

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:

30

Dasar-Dasar Ajax Tabel 12 Operator Penugasan Operator

Penggunaan

+=

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

-=

$a -= $b

*=

$a *= $b

/=

$a /= $b

%=

$a %= $b

.=

$a .= $b

++

$a++ (peningkatan) $a- (penurunan)

--

Disamakan dengan

contoh

­­­ $a= $a + $b­­­­­­­ $a= $a - $b

hasil

$a= 8 $b = 2 $a= 8 $b = 2 $a= $a * $b $a= 8 $b = 2 $a= $a / $b $a= 8 $b = 2 $a= $a % $b $a= 8 $b = 2 $a= $a . $b $a= 8 $b = 2 $a= $a + 1 $a= 8

$a=10

$a= $a - 1

$a= 7

$a= 8

$a= 6 $a= 16 $a=4 $a=0 $a= 8 2 $a= 9

3. Operator Pembanding Operator ini digunakan untuk pembanding atau membandingkan kedua hal dan berfungsi untuk menyusun ekspresi kondisional. Ekspresi yang menggunakan operator perbandingan selalu menghasilkan nilai TRUE atau FALSE. Tabel operator ini dapat Anda lihat pada Tabel 13 di bawah ini:

31

Dasar-Dasar Ajax Tabel 13 Operator Pembanding

Operator == != > >=

Hasil True / False True / False True / False True / False

< <=

True / False True / False

Keterangan Sama dengan. Tidak sama dengan. Lebih besar dari. Lebih besar dari atau sama dengan. Lebih kecil dari. 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 && (and) || (or)

Hasil True / False

! (not)

True / False

True / False

32

Keterangan Hasil = True, Jika kedua ekspresi bernilai True. Hasil = True, Jika salah satu ekspresi bernilai True. Hasil = True, jika ekspresi bernilai False.

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 : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

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

Keterangan Kode

• • • •

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.

33

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 : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

Keterangan Kode

• • • • • • •

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.

34

Dasar-Dasar Ajax

i. Perulangan While While memberikan perintah untuk menjalankan statement dibawahnya secara berulang-ulang, selama perintahnya terpenuhi. Berikut ini adalah contoh kode penulisan perintah While. 1 2 3 4 5 6 7 8



Keterangan Kode

• 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.

35

Dasar-Dasar Ajax

j. Perulangan For Perulangan For berfungsi untuk melakukan proses pengulangan pada kondisi yang berekspresi boolean. Contoh kode penulisan kode perulangan for pada pemrograman PHP adalah sebagai berikut : 1 2 3 4 5 6

”; } ?> Keterangan Kode

• 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.

5

MENGENAL WEB SERVER

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 terkenal diantaranya adalah Apache dan Microsoft Internet Information Service (IIS). Setelah Anda memahami apa itu web server beserta fungsinya. Tahap selanjutnya Anda akan belajar bagaimana cara membangun web server lokal pada komputer Anda sendiri.

36

Dasar-Dasar Ajax Untuk mempermudah dalam proses belajar, Anda dapat menggunakan program XAMPP, XAMPP adalah Software yang berisi Apache, MySQL, dan phpmyadmin, Anda dapat mendownload software tersebut pada alamat http://sourceforge.net/projects/xampp. Pada tutorial 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-installer yang ada pada komputer. Setelah itu Anda klik ganda file xamppwin32-1.7.1-installer.exe pada tutorial kali ini file tersebut terdapat pada folder D:\ yang ada pada komputer.

Klik Ganda di sini

Gambar 4 File xampp-win32-1.7.1-installer.exe

2. Selanjutnya Anda klik tombol Next yang ada Pada jendela xamppwin32-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.

37

Dasar-Dasar Ajax

Gambar 5 Jendela xampp-win32-1.7.1-installer.exe

Biarkan pada Direktori C:/Xampp

Klik Next

Gambar 6 Menentukan Direktori atau Lokasi Penginstalan

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.

38

Dasar-Dasar Ajax

Beri Tanda Cek Di Sini

Gambar 7 Mengaktifkan semua komponen

Klik Tombol Install

Gambar 8 Proses Instalasi Sedang berjalan

Gambar 9 Proses Instalasi Selesai

39

Klik Tombol Finish

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

Klik Tombol Yes Gambar 10 Informasi instalasi berhasil

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

Apache dan MySQL telah aktif berjalan

Gambar 11 Informasi XAMPP Control Panel

9. Selanjutnya untuk memastikan apakah web server telah berhasil 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.

40

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 | XAMPP Control Panel. selanjutnya Anda klik tombol start pada Apache dan MySQL maka akan tampak pada Gambar 12. 2. Setelah itu untuk mengecek apakah apache sudah Aktif. Coba Anda lakukan lagi cara yang sama seperti langkah 9 di atas.

41

Dasar-Dasar Ajax

6

CONTOH APLIKASI AJAX DENGAN PHP

Salah satu yang tak lepas dari pembuatan situs adalah web editor. Web editor adalah program yang berfungsi untuk merancang tampilan 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 baru seperti Gambar 15.

maka akan tampil jendela dokumen

Gambar 13 Membuka Program aplikasi Dreamweaver CS4

42

Dasar-Dasar Ajax

Klik di sini

Gambar 14 Memilih PHP

Gambar 15 Tampilan jendela dokumen baru

43

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

Gambar 16 Memberi nama Title halaman

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

Gambar 17 Mengaktifkan tab Kode

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

Gambar 18 Gambar posisi kode

44

Dasar-Dasar Ajax 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

<marquee behavior=”alternate”> Selamat Datang di Maxi Multimedia Online
Menu Utama
<strong>Home
<strong>Tentang Kami
45 Dasar-Dasar Ajax 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 <strong>Kontak
<span style=”font-size: 9pt”>Berita Online
<marquee direction=up scrollamount=”3” height=”187” width=”170”>Aplikasi Ajax dengan PHP 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...
Copyright © 2009 maximultimedia.com 46 Dasar-Dasar Ajax 97 98 99 100 101 Jl. jenderal sudirman.. No. 007 Palembang

Keterangan Kode •

Baris 1

•

Baris 2-3 Tag untuk membuat atau menyisipkan tabel dengan border 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 .

•

Baris17-27 Tag awal untuk membuat kolom dan baris dengan memberikan 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