01 Dasar Dasar Ajax

(1)

(2)

Dasar-Dasar

Ajax

D e d i A l n a s

(3)

A. Sejarah T

entang Ajax

AJAX

AJAX diperkenalkan oleh diperkenalkan oleh Jesse James Garret Jesse James Garret dari dari AdaptiveAdaptive

Path tahun 2005 pada tulisannya yang berjudul

Path tahun 2005 pada tulisannya yang berjudul ”AJAX: A New”AJAX: A New

Approach to Web Application”

Approach to Web Application”.. AJAX AJAX bukan merupakan bahasa bukan merupakan bahasa

pemrograman baru,namun hanya suatu tehnik

pemrograman baru,namun hanya suatu tehnik pemanfaatanpemanfaatan javascript javascript

dalam

dalam mengontrol mengontrol class class objek objek XMLHttpRequest XMLHttpRequest untuk untuk me-Refreshme-Refresh

dan

dan mengupdate mengupdate content content dalam dalam halaman halaman web web tanpa tanpa melakukanmelakukan

reload

reload keseluruhan keseluruhan halaman halaman web web seperti seperti pada pada Metode Metode TTradisional,radisional,

AJAX

AJAX sendiri sendiri merupakan merupakan singkatan singkatan dari dari ““Asynchronous JavaScriptAsynchronous JavaScript

And XML”.

B. Teknologi dibalik AJAX

B.1

B.1 XHTML

XHTML

(

Extensible

Hypertext

Markup

Language)

adalah

adalah Bahasa Bahasa Markup Markup sebagaimana sebagaimana seperti seperti HTML, HTML, tetapi tetapi dengandengan

gaya

gaya bahasa bahasa yang yang lebih lebih baik. baik. XHTML XHTML digunakan digunakan membuat membuat halamanhalaman

web dan dokumen - dokumen lain yang dapat ditampilkan dalam

browser

browser. . XHTML XHTML merupakan merupakan standard standard internasional internasional dengan dengan spesi-

spesi-ﬁkasi yang ditetapkan oleh

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

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

(4)

B.3 JavaScript

adalah bahasa pemrograman berbasis Script.

adalah bahasa pemrograman berbasis Script. Javascript Javascript memiliki memiliki

kemampuan untuk menciptakan halaman web yang dinamis serta

didukung oleh banyak web server.

B.4

B.4 DOM

DOM

(

Document

Object

Model)

adalah

adalah merupakan merupakan sebuah sebuah API API ( App( Application lication Program Program Interface Interface ))

untuk

untuk dokumen Hdokumen HTML dan TML dan XML. DOXML. DOM menyedM menyediakan riakan representasiepresentasi

dokumen secara

dokumen secara terstrukturterstruktur, dimungkinkan , dimungkinkan merubah isi merubah isi dan presentasidan presentasi

visual. Pada dasarnya, DOM menghubungkan halaman web dengan

script atau bahasa pemrograman.

B.5

B.5 XML

XML

(

Extensible

Markup Language

)

adalah bahasa Markup untuk keperluan umum yang disarankan oleh

W3C

W3C untuk membuat dokumen Markup keperluan khusus. Keperluan untuk membuat dokumen Markup keperluan khusus. Keperluan

utama XML adalah untuk

utama XML adalah untuk pertukaran data dengan web pertukaran data dengan web serverserver..

B.6

B.6 Object

Object

XMLHttpRequest

Berfungsi untuk melakukan pertukaran data

Berfungsi untuk melakukan pertukaran data AsinkronusAsinkronus dengan web dengan web

server

server. Pada . Pada beberapa beberapa framework framework dan kasudan kasuss AJAX AJAX , objek , objek IFRAME IFRAME

lebih dipilih daripada

lebih dipilih daripada XMLHttpRequest XMLHttpRequest untuk untuk melakukan melakukan pertukaranpertukaran

data dengan web server.

Sebelum membuat halaman Web, terlebih dahulu Anda Harus

mempelajari tentang struktur kodenya atau biasa disebut dengan

istilah

istilah TTagag. Perintah-perintah yang umum dipakai dalam penulisan. Perintah-perintah yang umum dipakai dalam penulisan

kode HTML dapat Anda lihat pada

kode HTML dapat Anda lihat pada Tabel 1 Tabel 1 di bawah ini. di bawah ini.

1

(5)

Tabel 1

Tabel 1 Perintah dasar HTML Perintah dasar HTML

H

T

M

L

T

a

g

K

e

t

e

r

a

n

g

a

n

S

t

r

u

k

t

u

r

K

o

d

e

<TITLE>

Judul halamanJudul halaman

Web Web <TITLE>Judul</TITLE> <TITLE>Judul</TITLE>

<HEAD>

HeHeadader haer halalamamann <H<HEAEAD>D>”d”deseskrkripipsi Hasi Halalamaman”n”</</ HEAD> HEAD>

<BODY>

IIssi i hhaallaammaann <<BBOODDYY>>IIssi i HHaallaammaan n <<//BBOODDYY>>

<!-->

KKoommeennttaarr <<!!----KKoommeennttaarr---->>

<A

-<A -

LiLink /nk /HuHububungnganan <A H<A HREREF=F=”h”httttp:p:////wwwwww..

maxikom.co.id/”>Situs

Maxikom</A>

<B>

Huruf tebal /Huruf tebal /

Bold

<B>Maxikom</B>

<I>

Huruf Miring /Huruf Miring /

Italic

<I>Maxikom</I>

<U>

Garis bawah /Garis bawah /

Underline Underline <U>Maxikom</U> <U>Maxikom</U>

<P>

PPaarraaggrraaf f bbaarruu <<PP>>MMaaxxiikkoomm<<//PP>>

<BR>

BBaarriis s bbaarruu BBaarriiss__11<<BBRR>>BBaarriiss__22

<CEN-TER>

TER>

R Raatta a tteennggaahh <<CCEENNTTEERR>>MMaaxxiikkoomm<<//CCEENN- -TER> TER>

<FONT>

PenggunaanPenggunaan

huruf

<FONT FACE=”Arial” SIZE=”4”

COLOR=”RED”>Contoh</

FONT>

<IMG>

MenampilkanMenampilkan

gambar

<IMG SRC=”Logo.gif” WIDTH=

”41” HEIGHT= ”41” BORDER=

”0” ALT=”klik di sini untuk

meli-hat gambar”>

hat gambar”>

<EMBED>

MelMeletaetakkakkan on objebjekk <EM<EMBED BED srsrc= c= “la“lagu.gu.midmid””

width=”100%” height= “60”

align= “center”>

(6)

A. MENGGUNAKAN W

A. MENGGUNAKAN WEB EDITOREB EDITOR

Salah satu bagian yang tak lepas dari pembuatan situs adalah web

editor. Web editor adalah program yang berfungsi penulisan kode

HTML.

HTML. Web Web editor editor yang yang digunakan digunakan adalah adalah aplikasiaplikasi Notepad Notepad ..

1.

1. Anda Anda klik klik tombol Start tombol Start pada pada start start menu menu . . Kemudian Kemudian Anda Anda pi-

pi-lih

lih All programsAll programs || AccessoriesAccessories | | Notepad Notepad . Lihat. Lihat Gambar 1Gambar 1 di bawah di bawah

ini.

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

Gambar 2.

3. Simpan dengan tekan tombol

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

.HTML. Perhatikan

.HTML. Perhatikan Gambar 3Gambar 3 . .

Gambar 1

Gambar 1 Membuka aplikasi Notepad Membuka aplikasi Notepad

Gambar 2

Gambar 2 Jendela Notepad Jendela Notepad Ketik Ketik Simpan dengan Simpan dengan penulisan penulisan nama ﬁle .HTML nama ﬁle .HTML Klik Klik Save Save Gambar 3

(7)

Contoh Penulisan kode HTML adalah:

Konsep

Konsep AJAX AJAX yang yang Anda pAnda perlu ketaherlu ketahui adalah ui adalah bagaimana bagaimana sebuahsebuah

halaman web dapat memproses sebuah request dan

halaman web dapat memproses sebuah request dan menerima sebuahmenerima sebuah

response dari web server. Standar web yang digunakan pada saat ini

adalah

adalah HTTP HTTP (Hypertext Transfer Protokol)(Hypertext Transfer Protokol).. HTTP HTTP akan akan menerimamenerima

Response dari web server , memberitahukan kapan request dikirim

lalu

lalu header header yang yang digunakan digunakan berfungsi berfungsi untuk untuk mengetahui mengetahui tugas tugas apaapa

yang harus dilakukan server dan

yang harus dilakukan server dan bagaimana menghandle request daribagaimana menghandle request dari

HTTP

HTTP ..

Jika sebuah request diterima, web server kemudian menentukan

response apa yang akan diberikan. Berikut ini beberapa jenis kode

respon

respon HTTP HTTP yang yang dapat Andapat Anda lihat da lihat padapada Tabel 2Tabel 2 di bawah ini: di bawah ini:

<html>

<head>

<title>percobaa

<title>percobaan n HTML</title>HTML</title>

</head>

<body>

<B><font face=”verdana” size=”4”>Halaman web

<B><font face=”verdana” size=”4”>Halaman web PertamakuPertamaku

!!!</font></B> !!!</font></B> </body> </body> </html> </html> 1 1 2 2 3 3 4 4 5 5 6 6 7 7 8 8 Baris 1 Baris 1 •

• Tag awal halaman HTML.Tag awal halaman HTML.

Baris 2

•

• Awal Header halaman.Awal Header halaman.

Baris 3

•

• Judul halaman.Judul halaman.

Baris 4

•

• Akhir Header halaman.Akhir Header halaman.

Baris 5

•

• Akhir isi halaman.Akhir isi halaman.

Baris 6

•

• MenampilMenampilkan kan TText ext Halaman web Halaman web PertamaPertamaku ku !!!!!!

menggunakan Font Verdana dengan tipe Bold.

Baris 7

•

• Akhir isi halaman.Akhir isi halaman.

Baris 8

•

• Tag akhir halaman HTML.Tag akhir halaman HTML.

Keterangan Kode Keterangan Kode

HTTP REQUEST DAN DASAR-DASAR RESPON

2

(8)

Tabel 2

Tabel 2 Jenis kode responJenis kode respon HTTP HTTP

K

o

d

e

K

e

t

e

r

a

n

g

a

n

2

2000 0 OOKK RReessppoon n yyaanng g ddiikkeemmbbaalliikkaan n aappaabbiillaa

dokumen atau ﬁle ditemukan ketika

direquest (sukses).

30

304 4 NoNot t MoModidiﬁeﬁedd ReRespspon yaon yang dng dikikemembabalilikakan n apapababililaa

browser mengindikasikan bahwa duplikat

dokumen yang ada pada local cache atau

server cache sama atau tidak mengalami

perubahan.

40

401 1 UnUnauauththororizizeded ReRespspon on yayang ng didikekembmbalalikikan an apapababililaa

request membutuhkan autorisasi untuk

mengakses dokumen.

40

403 3 FoForbrbididdedenn RResespopon n yayang ng didikkemembabalilikakan n apapaabibilala

pe-request tidak memiliki hak akses untuk

dokumen yang diinginkan.

40

404 4 NNot ot FoFouundnd RResespopon n yayang ng didikkemembbalalikikan an apapababililaa

Dokumen yang diakses tidak

Dokumen yang diakses tidak ditemukan.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.

layanan tidak dikenal oleh server.

AJAX

AJAX dapat dikatakan merupakan sebuah konsep yang menerangkan dapat dikatakan merupakan sebuah konsep yang menerangkan

interaksi client-side XMLHttpRequest Object dengan script

server-side. Untuk membuat request ke web server menggunakan AJAX

side. Untuk membuat request ke web server menggunakan AJAX

terlebih dahulu Anda harus membuat bentuk object

XMLHttpRe-quest. Untuk membentuk object XMLHttpRequest mempunyai

quest. Untuk membentuk object XMLHttpRequest mempunyai

per-bedaan pada setiap browsernya. Pada microsoft Internet explorer

bedaan pada setiap browsernya. Pada microsoft Internet explorer

object dibentuk sebagai ActiveX Control, sedangkan pada browser

seperti Firefox dan Safari menggunakan basic

(9)

A.

A. XMLHttpRequest Methods

XMLHttpRequest Methods

Setelah

Setelah XMLHttpRequest XMLHttpRequest terbentuk, terdapat beberapa method atau terbentuk, terdapat beberapa method atau

fungsi yang bisa digunakan. Method-method tersebut dapat Anda

lihat pada

lihat pada Tabel 3Tabel 3 dibawah ini: dibawah ini:

Tabel 3

Tabel 3 Metode-metode pada XMLHttpRequestMetode-metode pada XMLHttpRequest

M

e

t

o

d

e

K

e

t

e

r

a

n

g

a

n

Abort()

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

waktu koneksi.

getAllResponHeader()

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

kan oleh server.

getResponHeader(“headername”)

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

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

(10)

setRequestHeader(“label”,”value”)

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

send dipanggil.

send(“content”)

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

mengirim request ke server.

B.

B. XMLHttpRequest

XMLHttpRequest

Properties

XMLHttpRequest memiliki properti yang dapat digunakan dan

dimanipulasi, seperti dijelaskan di bawah. Property tersebut dapat

Anda lihat pada

Anda lihat pada Tabel 4Tabel 4 dibawah ini: dibawah ini:

Tabel 4

Tabel 4 Property pada Property pada XMLHttpRequest XMLHttpRequest

P

r

o

p

e

r

t

y

K

e

t

e

r

a

n

g

a

n

Onreadystatechange

Menangani 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).

ed, 3: interactive, 4: complete).

Properti ini bisa digunakan untuk

menangani kesalahan,

memang-gil blok kode atau function untuk

gil blok kode atau function untuk

setiap readyState.

(11)

ResponseText

Properti ini akan dihasilkan pada

saat request telah

berhasil/com-plete. Misalnya anda melakukan

plete. Misalnya anda melakukan

request terhadap sebuah

docu-ment di serve

ment di serverr, respon dari serve, respon dari serverr

akan disimpan pada properti ini.

ResponseXML

Properti ini sama dengan

responseT

responseText, tetapi respon yanext, tetapi respon yangg

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 :

function

function getXMLHttpReqgetXMLHttpRequest(){uest(){

if(window.ActiveXObject){

return

return new new ActiveXObject(“ActiveXObject(“Microsoft.XMLHTMicrosoft.XMLHTTP”);TP”);

}else

}else if(window.XMLHif(window.XMLHttpRequest){ttpRequest){

return

return new new XMLHttpRequest(XMLHttpRequest(););

}else { alert(“Status : can not create XMLHttpRequest

Ob-ject”); } ject”); } } } 1 1 2 2 3 3 4 4 5 5 6 6 7 7 8 8 Baris 1 Baris 1 •

• Fungsi uFungsi untuk ntuk membentuk membentuk objex objex XMLHttpRequest.XMLHttpRequest.

Baris 2-3

•

• Jika User Menggunakan Browser Internet Explorer.Jika User Menggunakan Browser Internet Explorer.

Baris 4-5

•

• Jika User menggunakan Browser selain IE.Jika User menggunakan Browser selain IE.

Baris6-8

•

• Pesan Pesan gagal gagal dalam dalam membentuk membentuk objectobject

XMLHttpRequest.

XMLHttpRequest. Keterangan Kode

(12)

Berikut contoh

Berikut contoh penulisan untuk penulisan untuk mengirim rmengirim request ke equest ke server denganserver dengan

menggunakan method GET sebagai berikut :

Sebelum menggunakan

Sebelum menggunakanJavascript Javascript , , terlebih terlebih dahulu dahulu Anda harus Anda harus mem-

mem-pelajari

pelajari tentang tentang struktur struktur penulisannya. penulisannya. Struktur Struktur penulisanpenulisan JavaScript JavaScript

adalah sebagai berikut:

• •

Baris 1 Baris 1

•

• Kode ini Kode ini membuat objmembuat object XMLHttpRequeect XMLHttpRequest padast pada

browser. browser. Baris 2

Baris 2

•

• Fungsi untuk Fungsi untuk mengambil paramengambil parameter HTML elemeter HTML element IDment ID

dan URL dari ﬁle yang ada di server. dan URL dari ﬁle yang ada di server. Baris 3

Baris 3

•

• Kode ini membuat object document.Kode ini membuat object document.

Baris 4 Baris 4

•

• Kode untuk menampilkan Text.Kode untuk menampilkan Text.

Baris 5-6 Baris 5-6

•

• Kode untuk menbKode untuk menbuka koneksi uka koneksi dengan server dengan server jikajika

readyState = 4 atau readyState = 0. readyState = 4 atau readyState = 0. Baris 7

Baris 7

•

• Kode berfungsi jika state berubah Kode berfungsi jika state berubah lakukan fungsilakukan fungsi

berikutnya. berikutnya. Baris 8-11

Baris 8-11

•

• Jika readyState=4 dan Status=100 Jika readyState=4 dan Status=100 tampilkan Response.tampilkan Response.

Baris 12-14 Baris 12-14

•

• Kirim Request ke Server.Kirim Request ke Server.

STRUKTUR PROGRAM JAVASCRIPT

3

1 1 2 2 3 3 <Script langu

//--> </Script>

</Script>

var

var xmlhttp=getXMLxmlhttp=getXMLHttpRequet();HttpRequet();

function

function sendRequest(pasendRequest(pageUrl,elementIDgeUrl,elementID){){

var

var obj=document.gobj=document.getElementById(eetElementById(elementID);lementID);

var obj.innerHTML=’Sedang Proses... Mohon tunggu’;

if(xmlhttp.read

if(xmlhttp.readyState==4 yState==4 || || xmlhttp.readyStxmlhttp.readyState==0){ate==0){

xmlhttp.open(“GET”,pageUrl,true);

xmlhttp.onreadystatechange=function(){

if(xmlhttp.read

if(xmlhttp.readyState==4 yState==4 && && xmlhttp.statusxmlhttp.status==200){==200){

obj.innerHTML=xmlhttp.responseText; obj.innerHTML=xmlhttp.responseText; } } } } xmlhttp.send(null); xmlhttp.send(null); } } } } 1 1 2 2 3 3 4 4 5 5 6 6 7 7 8 8 9 9 10 10 11 11 12 12 13 13 14 14

(13)

1.

1. Mengenal

Mengenal

Event

Event merupakan suatu kondisi ketika prosedur pemrograman merupakan suatu kondisi ketika prosedur pemrograman

dieksekusi dengan tujuan untuk memproses Input ataupun Output

dari suatu baris

dari suatu baris perintah pemrograman.perintah pemrograman.

Perintah pemrograman yang bertugas untuk menangani Event

disebut sebagai Event

disebut sebagai Event HandlerHandler. Event . Event Handler padaHandler pada Javascript Javascript sangat sangat

membantu Anda dalam membuat halaman

membantu Anda dalam membuat halaman Web dinamis.Web dinamis.

Berikut ini adalah contoh beberapa Event Handler yang umum dipakai

dalam

dalam JavaScript JavaScript . Dapat Anda lihat pada. Dapat Anda lihat pada Tabel 5Tabel 5 dibawah ini: dibawah ini:

Tabel 5

Tabel 5 Event HandlerEvent Handler

Event

Handler

O

b

j

e

k

F

u

n

g

s

i

onAbort onAbort GGaammbbaarr.. MMeennjjaallaannkkaan n kkoodde e JJaavvaaSSccrriipptt jika

jika terjadi terjadi pembatalanpembatalan Proses.

Proses.

onBlur

onBlur Button,CheckBox,Frame,Button,CheckBox,Frame, Password,RadioBu

Password,RadioButton, tton, Reset,Reset, Submit, SelectList, TextArea, Submit, SelectList, TextArea, TextField,Windows.

TextField,Windows.

Menjalankan kode Javascript Menjalankan kode Javascript jika

jika posisi posisi kursor kursor berpin- berpin-dah dari sustu object (Lost dah dari sustu object (Lost Focus). Focus). onFocus onFocus F r a m e , B u t t o n , S u b m i t ,F r a m e , B u t t o n , S u b m i t , Reset,RadioButton, Check-Reset,RadioButton, Check-BOx, SelectList,Pasword, BOx, SelectList,Pasword, TextField,TextArea,Windows. TextField,TextArea,Windows.

Menjalankan kode JavaScript Menjalankan kode JavaScript jika

jika posisi posisi kursor kursor beradaberada pada suatu objek.

pada suatu objek.

onChange

onChange SelSelectectLisList,Tt,TextextArArea,ea,TTextextFieField.ld. MenMenjaljalankankan kode Java Sriptan kode Java Sript jika

jika nilai nilai teks teks pada pada suatusuatu objek berubah.

objek berubah.

onSelect

onSelect TTeexxttFFiieelldd,,TTeexxttAArreeaa.. MMeennjjaallaannkkaan n kkoodde e JJaavvaaSSccrriipptt ketika teks di dalam area ketika teks di dalam area objek diseleksi.

objek diseleksi.

onClick

onClick Button, CheckBoxRadioButtoButton, CheckBoxRadioButto n,Submit,Reset,Link.

n,Submit,Reset,Link.

Menjalankan kode JavaScript Menjalankan kode JavaScript jika suatu onject di klik.

(14)

onError

onError GGaammbbaarr,,WWiinnddoowwss.. MMeennjjaallaannkkaan n kkoodde e JJaavvaaSSccrriipptt jika

jika terjadi terjadi error error padapada prosedur tertentu.

prosedur tertentu.

onLoad

onLoad GGaammbbaarr,,WWiinnddoowwss.. MMeennjjaallaannkkaan n kkoodde e JJaavvaaSSccrriipptt pada saat gambar atau pada saat gambar atau hala-man Web akan ditampilkan. man Web akan ditampilkan.

onMouse-Out Out L Liinnkk.. MMeennjjaallaannkkaan n kkoodde e JJaavvaaSSccrriipptt pada saat kursor mouse pada saat kursor mouse meninggalkan area objek. meninggalkan area objek.

onMou-seOver seOver L Liinnkk.. MMeennjjaallaannkkaan n kkoodde e JJaavvaaSSccrriipptt pada saat kursor berada di pada saat kursor berada di atas objek

atas objek

onReset

onReset FFoorrmm.. MeMennjjaallaannkkaan n kkoodde e JJaavvaaSSccrriipptt ketika fungsi Reset ketika fungsi Reset dijalankan.

dijalankan.

onSubmit

onSubmit FFoorrmm.. MeMennjjaallaannkkaan n kkoodde e JJaavvaaSSccrriipptt ketika proses Submit ketika proses Submit dijalankan.

dijalankan.

onUnload

onUnload WWiinnddoowwss.. MMeennjjaallaannkkaan n kkoodde e JJaavvaaSSccrriipptt pada saat halaman Web akan pada saat halaman Web akan ditutup.

ditutup.

2.

2. Tipe

Tipe

Data

JavaScript.

Tipe Data bisa dikatakan sebagai kelompok ukuran memori yang akan

kita gunakan

kita gunakan untuk menyimpan untuk menyimpan nilai dari nilai dari suatu variabel suatu variabel dalam dalam pem-

pem-rograman. Beberapa Tipe Data yang umum

rograman. Beberapa Tipe Data yang umum dipakai dalam pemrogra-dipakai dalam

pemrogra-man

man JavaScript JavaScript dapat Anda lihat pada dapat Anda lihat pada Tabel 6.Tabel 6.

Tabel 6

Tabel 6 Tipe Data Tipe Data JavaScripJavaScriptt

T

i

p

e

D

a

t

a

N

i

l

a

i

Integer

Integer -32768 s/d 32767-32768 s/d 32767

Float

Float -3.4E38(-3.4x10-3.4E38(-3.4x103838_{) s/d}_{) s/d}_{+3.4E38(+3.4x}_{+3.4E38(+3.4x}₁₀₁₀3838₎₎

boolean

boolean True dan FalseTrue dan False

String

(15)

Null

Null Null (Kosong)Null (Kosong)

3.

3. Deklara

Deklara

si

V

ariabe

l.

Variabel

Variabel bisa dikatakan sebagai pemberian nama secara simbolis bisa dikatakan sebagai pemberian nama secara simbolis

terhadap tipe data tertentu. Variabel dalam

terhadap tipe data tertentu. Variabel dalam JavaScriptJavaScript dapat berupadapat berupa

angka, huruf, dan kata.

Penggunaan spasi tidak diperbolehkan dalam deklarasi variabel.

Deklarasi Variabel pada

Deklarasi Variabel pada JavaScript JavaScript menggunakan perintah Var. menggunakan perintah Var.

Berikut adalah contoh deklarasi variabel pada

Berikut adalah contoh deklarasi variabel pada JavaScript JavaScript ..

4. Function.

Function

Function dalam dalam JavaScript JavaScript adalah blok perintah (prosedur) yang adalah blok perintah (prosedur) yang

bertugas untuk melakukan proses tertentu. Dasar perintah Function

<Script langu

<!--var

var Nilai_A=”MaxikNilai_A=”Maxikom”;om”; document.write(Nilai_A); document.write(Nilai_A); //--> //--> </Script> </Script> 1 1 2 2 3 3 4 4 5 5 6 6 Catatan : 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 da

Anda juga bisa menggunakan kombinasi angka dan huruf.n huruf.

<Script langu

//--> </Script> </Script> 1 1 2 2 3 3 4 4 5 5 6 6

(16)

5.

5. Jenis

Jenis

Operato

r

.

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

hitungan).

Berikut ini adalah beberapa jenis Operator

Berikut ini adalah beberapa jenis Operator JavaScript JavaScript ..

A.

A. Operator Pembanding

Operator Pembanding

Tabel 7

Tabel 7 Operator pembandingOperator pembanding

O

p

e

r

a

t

o

r

H

a

s

i

l

K

e

t

e

r

a

n

g

a

n

=

T

r

u

e

/

F

a

l

s

e

S

a

m

a

d

e

n

g

a

n

.

!

=

T

r

u

e

/

F

a

l

s

e

T

i

d

a

k

s

a

m

a

d

e

n

g

a

n

.

>

T

r

u

e

/

F

a

l

s

e

L

e

b

i

h

b

e

s

a

r

d

a

r

i

.

>

=

T

r

u

e

/

F

a

l

s

e

L

e

b

i

h

b

e

s

a

r

d

a

r

i

a

t

a

u

sama dengan..

<

T

r

u

e

/

F

a

l

s

e

L

e

b

i

h

k

e

c

i

l

d

a

r

i

.

<

=

T

r

u

e

/

F

a

l

s

e

L

e

b

i

h

k

e

c

i

l

d

a

r

i

a

t

a

u

sama dengan..

Catatan : Catatan :

Anda tidak bisa menjalankan Function tanpa mengeksekusi

nama Function tersebut terlebih dahulu. umumnya Function

dieksekusi melalui Event Handler.

(17)

B.

B. Operator

Operator

Logika

Tabel 8

Tabel 8 Operator LogikaOperator Logika

O

p

e

r

a

t

o

r

H

a

s

i

l

K

e

t

e

r

a

n

g

a

n

&&

(and)

T

r

u

e /

F

a

l

s

e

H

a

s

i

l

=

T

r

u

e

,

J

i

k

a

k

e

d

u

a

ekspresi bernilai True.

|

(or)

T

r

u

e

/

F

a

l

s

e

H

a

s

i

l =

T

r

u

e

, J

i

k

a s

a

l

a

h

satu ekspresi bernilai

True.

!

(not)

T

r

u

e

/

F

a

l

s

e

H

a

s

i

l

=

T

r

u

e

,

j

i

k

a

e

k

-

-spresi bernilai False.

spresi bernilai False.

C.

C. Operator

Operator

Aritmatik

Tabel 9

Tabel 9 Operator Aritmatik Operator Aritmatik

O

p

e

r

a

t

o

r

C

o

n

t

o

h

K

e

t

e

r

a

n

g

a

n

+

x

=

x

+

y

P

e

n

j

u

m

l

a

h

a

n

.

--

x

=

x

-

y

P

e

n

g

u

r

a

n

g

a

n

.

*

x

=

x

*

y

P

e

r

k

a

l

i

a

n

.

/

x

=

x

/

y

P

e

m

b

a

g

i

a

n

.

+

x

+

a

t

a

u

+

x

P

e

n

i

n

g

k

a

t

a

n

.

--

-

x

a

t

a

u

x

-

P

e

n

u

r

u

n

a

n

.

-(Minus)

(Minus)

x

=

-

x

N

i

l

a

i

n

e

g

a

t

i

f

.

%

(Modulus)

x

=

x

%

y

S

i

s

a

p

e

m

b

a

y

a

r

a

n

.

(18)

6.

6. Pernyataan

Pernyataan

If..Else

Pernyataan if...else bisa dikatakan struktur keputusan yang

Pernyataan if...else bisa dikatakan struktur keputusan yang digunakandigunakan

untuk mengendalikan perintah yang terdiri dari beberapa kondisi

da-lam pemrograman. Bentuk pernyataan IF Else adalah sebagai berikut

lam pemrograman. Bentuk pernyataan IF Else adalah sebagai berikut

:

Pernyataan if...else dapat digunakan untuk mengendalikan perintah

kondisi bertingkat, contohnya adalah sebagai

kondisi bertingkat, contohnya adalah sebagai berikut:berikut:

7.

7. Pernyataan

Pernyataan

Switch

Pernyataan

Pernyataan SwitchSwitch memiliki memiliki fungsi fungsi yang yang sama sama sepertiseperti

pernyataan If..else. Pernyataan Swirch umumnya dipakai untuk

mengendalikan kondisi yang bersifat pilihan. Bentuk pernyataan

Switch adalah sebagai berikut:

if if ([Ekspresi]) { ([Ekspresi]) { [Pernyataan_1]; [Pernyataan_1]; } }elseelse{{ [Pernyataan_2]; [Pernyataan_2]; } } 1 1 2 2 3 3 4 4 5 5 if if ([Ekspresi] ([Ekspresi])) { { if if (([Ekspresi][Ekspresi])){{ [Pernyataan_1]; [Pernyataan_1]; }else{ }else{ [Pernyataan_2]; [Pernyataan_2]; }else{ }else{ [Pernyataan]; [Pernyataan]; } } 1 1 2 2 3 3 4 4 5 5 6 6 7 7 8 8 switch

switch [Ekspresi] [Ekspresi] {

{

Case

Case [kondisi 1]:[kondisi 1]:

[Pernyataan];

break; break; Case

Case [kondisi 2]: [kondisi 2]:

[Pernyataan]; [Pernyataan]; break; break; default: default: [ [ Pernyataan];Pernyataan]; } } 1 1 2 2 3 3 4 4 5 5 6 6 7 7 8 8 9 9 10 10 11 11

(19)

8.

8. Perulangan

Perulangan

For

Perulangan

Perulangan For For digunakan untuk melakukan proses pengulangan digunakan untuk melakukan proses pengulangan

pada kondisi yang

pada kondisi yang bereksprberekspresi boolean atau esi boolean atau mengulang sekumpulanmengulang sekumpulan

(blok) perintah sampai kondisi tertentu terpenuhi. Contoh penulisan

bentuk perulangan

bentuk perulangan For For sebagai berikut: sebagai berikut:

9. Perulangan While

<!-- Perulang

an For --> <head>

<head>

<title>Perulan

<title>Perulangan gan For</title> For</title> </head>

</head> <body> <body>

<script type=

var i=0 for

for (i=0;i<=5;i++)(i=0;i<=5;i++) {

{ if

if (i==5){break}(i==5){break} document.write(

document.write(“Saya “Saya berjanji berjanji tidak tidak nakal nakal lagi lagi “ “ + + i)i) document.write( document.write(“<br “<br />”)/>”) } } document.write(“<p></p>”) document.write(“<p></p>”) </script> </script> </body> </body> </html> </html> 1 1 2 2 3 3 4 4 5 5 6 6 7 7 8 8 9 9 10 10 11 11 12 12 13 13 14 14 15 15 16 16 17 17 18 18 Baris 1-5 Baris 1-5 •

• Tag awal halaman HTML, Header dan judul halamanTag awal halaman HTML, Header dan judul halaman

serta akhiri tag Header. serta akhiri tag Header.

Baris 6

•

• Tag awal isi halaman atau body.Tag awal isi halaman atau body.

Baris 7

•

• Tag awal script.Tag awal script.

Baris 8

•

• Deklarasi VaDeklarasi Variabel i riabel i sama dengan nol.sama dengan nol.

Baris 9

•

• Kode untuk melakukan perulangan For yang dimulai dariKode untuk melakukan perulangan For yang dimulai dari

nol sampai dengan 5. nol sampai dengan 5.

Baris 10-11

•

• Kondisi jika variabel diinput sama dengan 5.Kondisi jika variabel diinput sama dengan 5.

Baris 12

•

• Menampilkan text dan diulangi sebanyak 5 kali Menampilkan text dan diulangi sebanyak 5 kali sesuaisesuai

dengan variabel yang diinput secara berurutan dengan variabel yang diinput secara berurutan

Baris 13-14

•

• Menambah baris baru.Menambah baris baru.

Baris 15

•

• Membuat Paragraf baru.Membuat Paragraf baru.

Baris 16-18

•

• Akhiri Tag JavaScript , Body dan HTML.Akhiri Tag JavaScript , Body dan HTML.

(20)

Fungsi perulangan

Fungsi perulangan WhileWhile sama seperti perulangan sama seperti perulangan For For , fungsi, fungsi

While

While juga juga dapat dapat digunakan digunakan apabila apabila Anda Anda belum belum tahu tahu pasti pasti berapaberapa

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

perulangan dengan menggunakan perulangan whilewhile..

Contoh penulisan bentuk perulangan

Contoh penulisan bentuk perulangan WhileWhile sebagai berikut : sebagai berikut :

<script type=

document.write(“Angkanya adalah “+ e(“Angkanya adalah “+ i)i) document.writ

document.write(“<br e(“<br />”)/>”) i=i+1 i=i+1 } } </script> </script> </body> </body> </html> </html> 1 1 2 2 3 3 4 4 5 5 6 6 7 7 8 8 9 9 10 10 11 11 12 12 13 13 Baris 1 Baris 1 •

• Tag awal halaman HTML.Tag awal halaman HTML.

Baris 2

•

• Tag awal isi halaman atau body.Tag awal isi halaman atau body.

Baris 3

•

• Tag awal script.Tag awal script.

Baris 4

•

• Deklarasi VaDeklarasi Variabel i riabel i sama dengan nol.sama dengan nol.

Baris 5-6

•

• Kode untuk melakukan perulangan While yang dimulai dariKode untuk melakukan perulangan While yang dimulai dari

nol sampai dengan 10 dan tidak melebihi batas 10. nol sampai dengan 10 dan tidak melebihi batas 10.

Baris 7

•

• Menampilkan text dan diulangi sebanyak 10 kali sesuaiMenampilkan text dan diulangi sebanyak 10 kali sesuai

dengan variabel yang diinput secara berurutan. dengan variabel yang diinput secara berurutan.

Baris 8

•

• Menambah baris baru.Menambah baris baru.

Baris 9-10

•

• Parameter perhitungan perulangan secara berurutan.Parameter perhitungan perulangan secara berurutan.

Baris 11-13

•

• Akhiri Tag JavaScript , Body dan HTML.Akhiri Tag JavaScript , Body dan HTML.

(21)

10. Array

Array

Array adalah sekumpulan data sejenis yang disimpan ke dalam adalah sekumpulan data sejenis yang disimpan ke dalam

variabel

variabel dengan dengan nama yang nama yang sama, densama, dengan membgan memberi indekeri indeks padas 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

Anda juga bisa mendeklarasikan sebuah Array yang Jumlah

elemennya sudah ditentukan terlebih dahulu. Perhatikan bentuk

perintah

perintah Array Array berikut : berikut :

// Syntax : // Syntax : Var

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

// Contoh : // Contoh :

Var

Var mobilmobil = new array( = new array(“Sedan”, “Truk”, “Jeep”,...“Sedan”, “Truk”, “Jeep”,...);); 1 1 2 2 // Syntax : // Syntax : Var

Var[nama Array][nama Array]_{= new Array(}_{= new Array(}[Jumlah][Jumlah]_);_);

[Nama Array]

[Nama Array][0][0]=[Elemen0];=[Elemen0];

[Nama

[Nama Array]Array][1][1]=[Elemen1];=[Elemen1];

[Nama

[Nama Array]Array][2][2]=[Elemen2];=[Elemen2];

// Contoh : // Contoh : Var

Var mobil = mobil = new array(new array(33));;

mobil

mobil[0][0]=“Sedan”;=“Sedan”;

mobil

mobil[1][1]=“Truk”;=“Truk”;

mobil

mobil_[2]_[2]=“Jeep”;=“Jeep”;

1 1 2 2 Catatan : Catatan :

• Nilai index umumnya dimulai dari angka 0. Sebagai contoh jika

panjang Array adalah (5), maka urutannya index adalah

panjang Array adalah (5), maka urutannya index adalah (0,1,2,3, 4).(0,1,2,3, 4).

• Gunakan tanda [ ]

(22)

11.

11. Array

Array

Multi

Dimensi

Array multi-dimensi dalam

Array multi-dimensi dalam JavaScriptJavaScript adalah suatu Array yang elemenadalah 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 de

JavaScript dengan ngan menggunakan Amenggunakan Array multi rray multi dimensi sebagdimensi sebagai beri-ai

beri-kut kut <html xmlns=”http://www.w3.org/1999/xhtml”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <head>

charset=iso-8859-1” /> charset=iso-8859-1” /> <title>Array_Multi</title> <title>Array_Multi</title> <script language=”JavaScript”> <script language=”JavaScript”> <!--function

function tampil(nilai) tampil(nilai) {{

document.write(“<b>DATA

document.write(“<b>DATA MAHASISWA</b><BR><BR>”);MAHASISWA</b><BR><BR>”);

document.write(“<TABLE

document.write(“<TABLE BORDER=3>”);BORDER=3>”);

document.write(“<TH>NPM</TH><TH>Nama</TH><TH>ALamat</

TH><TH>Jurusan</TH>”);

for(a=1;

for(a=1; a<=3; a<=3; a++) a++) {{

document.write(“<TR><TD>000”,a,”</TD>”); document.write(“<TR><TD>000”,a,”</TD>”); for(b=0; for(b=0; b<=2; b<=2; b++){b++){ document.write(“<TD>”,nilai[a][b],”</TD>”); document.write(“<TD>”,nilai[a][b],”</TD>”); } } document.write(“</TR>”); document.write(“</TR>”); } } document.write(“</TABLE>”); document.write(“</TABLE>”); } } data1

data1 = = new new Array(“Dedi”,”Jakarta”,”KA”);Array(“Dedi”,”Jakarta”,”KA”);

data2

data2 = = new new Array(“Dedek”,”Linggau”,”SI”);Array(“Dedek”,”Linggau”,”SI”);

data3

data3 = = new new Array(“Alde”,”Bandung”,”TI”);Array(“Alde”,”Bandung”,”TI”);

database

database = = new new Array(“”,data1,data2,data3);Array(“”,data1,data2,data3);

tampil(database); tampil(database); --> --> </script> </script> </head> </head> <body> <body> 1 1 2 2 3 3 4 4 5 5 6 6 7 7 8 8 9 9 10 10 11 11 12 12 13 13 14 14 15 15 16 16 17 17 18 18 19 19 20 20 21 21 22 22 23 23 24 24 25 25 26 26 27 27 28 28 29 29 30 30

(23)

12.

12. Error

Error

Handler

Error Handler

Error Handler adalah suatu perintah yang berfungsi untuk menangani adalah suatu perintah yang berfungsi untuk menangani

kesalahan dalam validasi JavaScript.

Penerapan

Penerapan Error Handler Error Handler pada baris perintah JavaScript tidak selalu pada baris perintah JavaScript tidak selalu

sama, tergantung kondisi dan logika

sama, tergantung kondisi dan logika pemrograman.pemrograman.

cara penerapan

cara penerapan Error Handler Error Handler yang efektif adalah dengan yang efektif adalah dengan

kombinasi perintah try{} catch(e){} dan throw. ini adalah contoh bentuk

Error Handler

Error Handler di bawah ini : di bawah ini : Baris 1-3

Baris 1-3

•

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

Baris 4-5

•

• Tag awal JavaScript.Tag awal JavaScript.

Baris 6

•

• Function dengan nama tampil.Function dengan nama tampil.

Baris 7-10

•

• Menampilkan tabel dengan judul kolom.Menampilkan tabel dengan judul kolom.

Baris 11-18

•

• Menampilkan variabel a dan b secara berurutan kedalamMenampilkan variabel a dan b secara berurutan kedalam

baris dan

baris dan kolom tabel menggunakan perulangan For.kolom tabel menggunakan perulangan For.

Baris 19-20

•

• Akhiri Tag Table dan Function.Akhiri Tag Table dan Function.

Baris 21-23

•

• Deklarasi tiga buah Array dengan nama data1, data2 danDeklarasi tiga buah Array dengan nama data1, data2 dan

data3. data3.

Baris 24

•

• Deklarasi Array bernama database dengan elemen berupaDeklarasi Array bernama database dengan elemen berupa

Array data1, data2 dan data3. Array data1, data2 dan data3.

Baris 25

•

• Mengeksekusi function tampil untuk menampilkan elemenMengeksekusi function tampil untuk menampilkan elemen

elemen Array database pada baris dan

elemen Array database pada baris dan kolom tabel.kolom tabel.

Baris 26-27

•

• Akhiri Tag JavaScript.Akhiri Tag JavaScript.

Baris 28-30

•

• Akhiri Tag Head, Body dan HTML.Akhiri Tag Head, Body dan HTML.

Keterangan Kode Keterangan Kode // Syntax : // Syntax : Try Try {{ [kondisi] [kondisi] throw

throw exceptionexception }catch

}catch (exception) (exception) {{

[Pernyataan] [Pernyataan] } } 1 1

(24)

Berikut adalah contoh penulisan bentuk

Berikut adalah contoh penulisan bentuk error handler error handler sebagai berikut sebagai berikut

: : <html> <html> <head> <head> <script type=”text/javascript”> <script type=”text/javascript”> var txt=”” var txt=”” function message() function message() { { try try { { adddlert(“Welcome...!”) adddlert(“Welcome...!”) } } catch(err) catch(err) { { txt=”Terjadi

txt=”Terjadi error error pada pada halaman halaman web web ini.\n\n”ini.\n\n”

txt+=”Error

txt+=”Error description: description: “ “ + + err.description err.description ++

“\n\n”

txt+=”Klik

txt+=”Klik OK OK untuk untuk berikutnya.\n\n”berikutnya.\n\n”

alert(txt) alert(txt) } } } } </script> </script> </head> </head> <body> <body>

<input type=”button” value=”Pesan” onclick=”message()”

/> /> </body> </body> </html> </html> 1 1 2 2 3 3 4 4 5 5 6 6 7 7 8 8 9 9 10 10 11 11 12 12 13 13 14 14 15 15 16 16 17 17 18 18 19 19 20 20 21 21 22 22 23 23 24 24 25 25 26 26 Catatan : Catatan :

penuli

san

kode

try

..catch

diharuskan

dengan

huruf

kecil

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

JavaScript

(25)

PHP

PHP ( Hypertext ( Hypertext PreprocPreprocessor)essor) dikembangkan pertama kali tahun 1995 dikembangkan pertama kali tahun 1995

oleh Rasm

oleh Rasmus Lerus Lerdorf dorf yang merupyang merupakan salah akan salah satu anggsatu anggotaota ApacheApache..

PHP

PHP pertama pertama kali dirancang kali dirancang sebagai alat sebagai alat tracking pentracking pengunjung gunjung webweb

site Lerdorf. Kemudian, fungsinya diperlebar dan dihubungkan

den-gan

gan ApacheApache..

PHP

PHP dapat digunakan untuk mengakses database dan diintegrasikan dapat digunakan untuk mengakses database dan diintegrasikan

dengan

dengan HTMLHTML.. PHP PHP lebih populer dalam jumlah pemakai dibanding lebih populer dalam jumlah pemakai dibanding

dengan modul

dengan modul perl perl ,, CGICGI dan dan ASP ASP ..

PHP

PHP merupakan merupakan software software open open source, source, dapat dapat digunakan digunakan dengandengan

gratis dan dapat

gratis dan dapat dijadikan alternatif dijadikan alternatif selain side-prselain side-programming lain.ogramming lain.

a. Kelebihan-kelebihan PHP

Adapun kelebihan dari bahsa pemrograman PHP antara lain :

PHP lebih mudah dibuat dan mudah juga

PHP lebih mudah dibuat dan mudah juga menjalankannya.menjalankannya.

•

Baris 1-3

•

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

Baris 4-5

•

• Mendeklarasikan Variabel txt.Mendeklarasikan Variabel txt.

Baris 6

•

• Mendeklarasikan Function.Mendeklarasikan Function.

Baris 7-10

•

• Kode ini adalah untuk menaKode ini adalah untuk menangani kesalahan jika tidak ngani kesalahan jika tidak terjaditerjadi

error maka akan menampilkan pesan welcome. error maka akan menampilkan pesan welcome.

Baris 11-19

•

• Mengeksekusi apabila terjadi kesalahan tampilkan untukMengeksekusi apabila terjadi kesalahan tampilkan untuk

menangani kesalahan atau deskripsi

menangani kesalahan atau deskripsi errornya.errornya.

Baris 20 -21

•

• Akhiri Tag JavaScript dan Head.Akhiri Tag JavaScript dan Head.

Baris 22

•

• Tag awal body atau isi halaman.Tag awal body atau isi halaman.

Baris 23-24

•

• Menampilkan Menampilkan Button dengan Button dengan nama tonama tombol yang mbol yang nantinyanantinya

akan

akan mengeksekusi mengeksekusi pesan.pesan.

Baris 25

•

• Akhiri Tag Body.Akhiri Tag Body.

Baris 26

•

• Akhiri Tag HTML.Akhiri Tag HTML.

STRUKTUR KODE PROGRAM PHP

4

(26)

PHP

PHP dapat berjalan pdapat berjalan pada web server ada web server dengan sistem opdengan sistem operasi yangerasi yang

•

berbeda-beda.

PHP bisa kita dapatkan secara free atau gratis.

•

PHP dapat

PHP dapat berjalan pada berjalan pada web server web server yang berbeda-beyang berbeda-beda juga.da juga.

•

PHP dapat diletakkan atau disisipkan dalam kode HTML

•

Kode program PHP menyatu dengan tag-tag HTML dalam satu ﬁle.

Penulisan kode PHP diawali dengan tag <?php atau <? dan ditutup

dengan tag ?>.sesuai dengan tag

dengan tag ?>.sesuai dengan tag pembukanya. File PHP terdapat tagpembukanya. File PHP terdapat tag

HTML dan kode PHP dan diberi format dengan ekstensi .php.

Ber-dasarkan ekstensi ini, pada saat ﬁle diakses, server akan tahu bahwa

dasarkan ekstensi ini, pada saat ﬁle diakses, server akan tahu bahwa

ﬁle mengandung kode PHP. Server akan menerjemahkan kode ini dan

menghasilkan output dalam bentuk tag HTML yang akan dikirimkan

ke browser client yang mengakses ﬁle tersebut.

Berikut ini adalah contoh penulisan kode pemrograman PHP

Berikut ini adalah contoh penulisan kode pemrograman PHP ::

<title>Bela

<title>Belajar jar PHP</title>PHP</title> </head>

</head> <body> <body> <table

<?php

<?php print(“Halo print(“Halo dengan dengan <i>print</i<i>print</i> > !”);!”); ?>

?>

<br <br />/> <?php

<?php echo echo ‘Halo ‘Halo dengan dengan <i>echo</i> <i>echo</i> !’; !’; ?>?> </td> </td> </tr> </tr> </table> </table> </body> </body> </html> </html> 1 1 2 2 3 3 4 4 5 5 6 6 7 7 8 8 9 9 10 10 11 11 12 12 13 13 14 14 15 15 16 16 17 17