LSP Telematika Indonesia

LSP Telematika Indonesia
1
Daftar Isi
Daftar Isi ..................................................................................................1
Kata Pengantar..........................................................................................3
BAB I HTML ............................................................................................5
1.1 World Wide Web.............................................................................6
1.2 Pengenalan HTML ...........................................................................7
1.3 Tag ..............................................................................................7
1.4 Editor HTML................................................................................. 11
1.5 Format Teks ..................................................................................9
1.6 Gambar ...................................................................................... 23
1.7 Tabel .......................................................................................... 28
1.8 Frame......................................................................................... 29
1.9 Tag Logika .................................................................................. 33
1.10 Cascading Style Sheet ................................................................... 39
Soal Latihan........................................................................................ 43
Soal Praktek ....................................................................................... 43
BAB 2 BASIS DATA................................................................................. 45
2.1 Terminologi ................................................................................... 46
2.2 Memanipulasi Data dari Tabel........................................................... 46
2.3 Menggabungkan Tabel .................................................................... 52
2.4 Menghilangkan Record yang Sama.................................................... 54
2.5 Subquery ...................................................................................... 54
2.6 Data Definition Language (DDL) ....................................................... 55
2.7 View............................................................................................. 56
2.8 Stored Procedure dan Trigger........................................................... 57
2.9 Fungsi Aggregasi ............................................................................ 58
Soal Latihan ........................................................................................ 58
Soal Praktek ...............................................Error! Bookmark not defined.
BAB 3 PHP ............................................................................................. 60
3.1 Pengenalan PHP ............................................................................. 61
3.2. Penginstalasian PHP 5 ..................................................................... 62
3.3. Variabel, Tipe Data, dan Operator..................................................... 69
3.4 Pemrograman PHP.......................................................................... 77
3.5 Paket, Modul, Kelas, dan Objek ........................................................ 87
3.6 Form dan Kontrol ........................................................................... 90
3.7 Program Debugging ........................................................................ 95
3.8 Pemrograman Database .................................................................. 97
3.9 Membangun Aplikasi Database ....................................................... 104
Soal Latihan....................................................................................... 110
Soal Praktek ...................................................................................... 111
BAB 4 JAVA ......................................................................................... 114
4.1 Sekilas Mengenai Java ................................................................ 115
4.2 Program Java............................................................................. 115
4.3 Proses Kompilasi ........................................................................ 117
4.4 Tipe Data Dalam Java ................................................................. 118
4.5 Method, Variabel dan Kelas .......................................................... 125
4.7 Applet....................................................................................... 133
4.7 SWING ..................................................................................... 139
4.8 Pemrograman Jaringan ............................................................... 165
4.9 JDBC API................................................................................... 169
4.10 JavaServer Page (JSP)................................................................. 180
Soal Latihan....................................................................................... 199
Soal Praktek ...................................................................................... 199
BAB 5 ASP dan ASP .NET....................................................................... 201
5.1 Pengenalan .NET ........................................................................ 202
5.2 Pengenalan ASP and ASP .NET ..................................................... 202
5.3 Pemrograman ASP .NET Dan ASP.................................................. 213
5.4 Cookies and Session ................................................................... 229
5.5 Trace and Debugging .................................................................. 238
5.6 Keamanan Aplikasi Web .............................................................. 241
5.7 Membuat Aplikasi Web Yang Dinamis ............................................ 248
5.8 ASP Response Object .................................................................. 251
5.9 ASP Request Object .................................................................... 252
5.10 ASP Server Object ...................................................................... 253
5.11 ActiveX Data Object (ADO) .......................................................... 254
Soal Latihan....................................................................................... 266
Soal Praktek ......................................................................................................... 267
Bab 6 Javascript………………………………………….………………………….………………………...268
6.1 Pemrograman Javascript .............................................................. 268
6.2 Dates dan Math........................................................................... 276
6.3. Objek Window ............................................................................ 284
6.4. Objek Dokumen .......................................................................... 297
6.5. Bekerja dengan Frame ................................................................. 300
6.6. Validasi Data untuk Form ............................................................. 304
Soal Latihan....................................................................................... 313
Soal Praktek ...............................................Error! Bookmark not defined.
Jawaban Soal ........................................................................................ 315
Daftar Pustaka........................................................................................326
LSP Telematika Indonesia
2
Kata Pengantar
Perkembangan internet dewasa ini yang cukup pesat dalam menghadirkan
informasi, telah membuat bahasa pemrograman untuk membuat website menjadi
populer. Website-Website inilah yang dapat diakses di internet serta dapat
digunakan tidak hanya untuk menghadirkan informasi tetapi juga sebagai alat
promosi, transaksi penjualan dan pembelian dan banyak lainnya.
Buku ini membahas seluk beluk dari beberapa bahasa pemrograman untuk
membuat website yang statis maupun dinamis. Selain itu dilengkapi pula dengan
sintaks serta contoh kode yang dapat dicoba, dengan harapan akan membantu
siswa dalam memahami berbagai bahasa pemrograman yang dibahas di buku ini.
Dibagian awal tiap bab disertakan tujuan, tik serta gambaran dari materi yang
ada di tiap bab agar pembaca mengetahui hal-hal yang akan didapat jika
membaca bab tersebut.
Buku ini menyediakan materi-materi yang membahas cara-cara penyampaian
informasi
di
internet.
Adapun
materi-materi
dalam
buku
ini
memenuhi
standarisasi Teknologi Informasi Indonesia bidang keahlian Programmer antara
lain :
1. TIK.PR02.024.01 Membuat dokumen dengan HTML sesuai spesifikasi
2. TIK.PR02.027.01 Menerapkan dasar-dasar pembuatan web statik dasar
3. TIK.PR02.021.01 Menerapkan basis data
4. TIK.PR02.028.01 Menerapkan dasar-dasar pembuatan web statik lanjut
5. TIK.PR04.003.01 Membuat halaman web dinamis lanjut
6. TIK.PR04.006.01 Menerapkan dasar validasi unjuk kerja situs web
7. TIK.PR04.007.01 Mengintegrasikan sebuah basis data dengan sebuah
situs web
8. TIK.PR08.009.01
Membuat program aplikasi web berbasis PHP
9. TIK.PR02.005.01
Menulis program dasar
10. TIK.PR02.006.01
Menulis program lanjut
11. TIK.PR02.009.01
Mengoperasikan bahasa pemrograman berorientasi
obyek
12. TIK.PR02.010.01
Menggunakan library atau komponen-komponen preexiting
13. TIK.PR02.012.01
Mengkompilasi dan menjalankan sebuah aplikasi
LSP Telematika Indonesia
3
14. TIK.PR02.013.01 Menulis dan mengkompilasi kode program sesuai dengan
kebutuhan
15. TIK.PR08.011.01 Membuat program aplikasi web berbasis JSP
16. TIK.PR08.012.01 Membuat program aplikasi berbasis JAVA
17. TIK.PR02.014.01 Melakukan debugging program
18. TIK.PR08.010.01 Membuat program aplikasi web berbasis ASP
Sedangkan gambaran umum dari materi dalam buku ini ada pada gambar di
bawah ini :
Harapan penulis, buku ini dapat membantu mereka yang hendak berkembang
lebih maju terutama dalam bidang teknologi informasi serta persiapan ujian
sertifikasi Nasional. Untuk saran dan kritik yang membangun, dapat dikirimkan ke
email [email protected].
LSP Telematika Indonesia
4
BAB I
HTML
Tujuan Instruksional Umum :
1. Siswa dapat menjelaskan fungsi HTML
2. Siswa dapat menjelaskan berbagai tag HTML
Tujuan Instruksional Khusus :
1. Siswa dapat membuat File HTML yang sederhana
2. Siswa dapat memformat teks
3. Siswa dapat menyisipkan gambar dan link dalam file HTML
4. Siswa dapat membuat file HTML dengan frame
Pembahasan pada bab ini dibuat sesuai dengan :
1. TIK.PR02.024.01 Membuat dokumen dengan HTML sesuai spesifikasi
2. TIK.PR02.027.01 Menerapkan dasar-dasar pembuatan web statik dasar
Berikut ini adalah gambaran umum dari materi bab HTML :
LSP Telematika Indonesia
5
1.1 World Wide Web
World web atau web saja, adalah ruang tempat informasi disimpan dimana orang
dapat membaca atau menulis sesuatu di dalamnya melalui alat-alat yang
terhubung dengan internet. Web terdiri dari 4 (empat) hal yaitu :

Hypertext : kemampuan untuk berpindah dari sebuah dokumen ke
dokumen lainnya melalui koneksi yang ada di dokumen tersebut (
hyperlinks )

Resource identifier : kemampuan untuk menemukan
resource lain
(komputer, dokumen atau lainnya) dalam jaringan melaui nama yang
unik.

Client-server : arsitektur jaringan yang memisahkan client (umumnya
tampilan grafis antarmuka) dari server.

Markup language : karakter atau kode yang disisipkan di dokumen yang
menyatakan cara teks ditampilkan.
Ketika kita hendak mengakses halaman web atau resource lain di web, hal yang
pertama dilakukan adalah memasukkan URL ke web browser atau memilih
sebuah hyperlink dari halaman yang akan diakses. URL kemudian diterjemahkan
menjadi alamat IP. Langkah selanjutnya adalah mengirim HTTP request ke web
server yang ditunjukkan oleh alamat IP. HTTP (hyper text transfer protocol)
adalah
metode
untuk
pengiriman
informasi
di
web.
Web
server
akan
mengembalikan halaman web atau resource yang diminta web browser. Tugas
web browser selanjutnya adalah menampilkan halaman yang direpresentasikan
dengan HTML, CSS atau file yang lain. Halaman awal yang ditampilkan ke user
dinamakan Homepage, halaman ini merupakan titik awal aktifitas kita di web
tersebut. Protocol yang memungkinkan untuk server meneruskan request dari
web browser ke aplikasi eksternal adalah common gateway interface. contoh :
http://www.comp.leeds.ac.uk/cgi-bin/Perl/environment-example?two+words.
String
setelah
simbol
(?)
akan
diteruskan
ke
variabel
encironment
QUERY_STRING.
LSP Telematika Indonesia
6
1.2 Pengenalan HTML
HTML ( Hypertext Markup Language) adalah bahasa yang digunakan untuk
menampilkan informasi di web browser. Dibuat oleh Tim berners-Lee, yang
selanjutnya
internasional
dikembangkan
lebih
lanjut
hingga
mempunyai
standarisasi
( ISO / IEC 15445 : 20000 ). Pada saat ini spesifikasi dari HTML
diatur oleh world wide web consortium ( W3C ).
W3C mendefinisikan HTML
sebagai aplikasi dari Standard Generalized Markup Language (SGML). SGML
adalah bahasa untuk mendefinisikan bahasa lain dengan menentukan struktur file
dalam bentuk document type definition (DTD), yang merupakan sintaks dari
berbagai elemen dan berbagai bahasa yang salah satunya merupakan HTML.
1.3 Tag
Sebuah file HTML hanyalah file text yang mengandung informasi yang akan
diumumkan di Internet. Selain itu, di dalamnya terkandung instruksi yang disebut
tag dimana instruksi ini akan ”memberitahu” web browser struktur atau tampilan
dari file. Sebuah tag terdiri dari tag pembuka, contohnya : <b>, dan juga bisa
mempunyai tag penutup, contohnya : </b>. Tetapi ada juga tag yang tidak
mempunyai tag penutup, contohnya : <br>, yang berfungsi sebagai baris baru.
Informasi yang akan ditampilkan berada diantara tag-tag tersebut
Beberapa tag memiliki atribut yang membutuhkan nilai setelah tanda sama
dengan dan nilai ini ada di dalam tanda petik, sebagai contoh :
<img
src=”logo.gif”
alt=”LSP
telematika”
height=”100”
width=”100”>
tag diatas memiliki 4 (empat) atribut yaitu src, alt, height dan width, dimana
masing-masing atribut memiliki nilai. Berikut ini adalah struktur lengkap dari tag
HTML :
Gambar 1.3.1 Struktur tag HTML
LSP Telematika Indonesia
7
Untuk lebih jelasnya, berikut ini adalah contoh dari file HTML yang lengkap :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Judul file</title>
</head>
<body>
isi file
</body>
</html>
Contoh file diatas menggunakan tag-tag yang umumnya ada pada file HTML,
berikut ini adalah keterangan dari tag-tag tersebut :
•
<!DOCTYPE> menunjukkan versi dari HTML yang digunakan. Berikut ini
adalah deklarasi DOCTYPE HTML untuk berbagai versi :
tabel 1.3.1 : Doctype HTML dalam Berbagai Versi
Versi HTML
Deklarasi <!DOCTYPE>
2.0
<!DOCTYPE
HTML
PUBLIC
"-//IETF//DTD
HTML
//EN">
3.2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2
Final//EN">
4.0 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
4.0 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Frameset//EN">
4.0 Strict
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.0//EN">
4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Frameset//EN">
4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
//EN">
XHTML
1.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0
Transitional
Transitional//EN">
XHTML 1.0 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN">
XHTML
1.0
Frameset
LSP Telematika Indonesia
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0
Frameset//EN">
8
•
<html> dan <html> menjadi batas dari awal dan akhir file HTML. Tag ini
hanya mengandung tag <head>, tag <body> dan tag <frameset>.
•
<head>
dan
</head>
mengandung
informasi
information). Search engine menggunakan
dari
file
(meta-
meta-information untk
melakukan index dari file HTML. Informasi yang ada di tag ini diantaranya
script, style sheet, comment dan judul file. Pada versi HTML 4.01
transitional DTD, tag yang diperbolehkan dalam tag ini selain <head>
adalah <base>, <isindex>, <link>, <meta>, <object>, <script>
dan <style>.
•
<title> dan </title> merupakan tag untuk judul file yang akan muncul
pada title bar di web browser. Contoh : kode <title> Contoh dokumen
HTML <title> maka tampilan title bar di web browser adalah sebagai
berikut :
Gambar 1.3.2 Title Bar di Web Browser
Menambahkan tag lain di dalam tag ini tidak akan membawa perubahan.
•
<body> dan </body> menjadi batas dari isi file HTML. Dalam sebuah
file HTML hanya ada satu tag ini. Dalam tag ini terdapat bervariasi tab-tag
lain, seperti <h1> untuk heading, <b> untuk menebalkan tulisan,
<img> untuk memasukkan gambar dan banyak lainnya. Selain tag,
dalam <body> bisa disisipkan karakter khusus seperti simbol copyright
atau tanda lebih besar. Karakter khusus ini ditampilkan dalam file HTML
dalam bentuk &code, dimana code bisa terdiri dari kata atau numerik,
sebagai contoh : simbol < (lebih kecil) mempunyai kode &lt; atau &#60;
Dalam penulisan tag HTML, terdapat beberapa aturan. Tetapi aturan ini tidak
ketat dan hanya bersifat anjuran saja. Tetapi hal ini tidak berlaku pada XHTML.
Pada file XHTML jika ada penulisan kode yang melanggar aturan maka file
tersebut tidak akan ditampilkan. Berikut ini adalah beberapa aturan dari HTML :
1. HTML tidak case sensitive.
Contoh : <B> Bold <B> atau <b> Bold <b> atau <B> Bold <b> atau <b>
Bold <B> mempunyai arti sama dalam file HTML.
2. Sebuah spasi tidak diacuhkan HTML.
LSP Telematika Indonesia
9
Penulisan spasi lebih dari sekali akan dianggap sebagai penulisan dengan satu
spasi. Browser juga akan mengacuhkan tab dan enter. Perhatikan contoh
dibawah ini :
<b> T e s S p a s i </b>
<b> T e
s
S
p
a
s
i</b>
<b> T
es
Sp
si<b>
Akan menghasilkan :
TesSpasi
TesSpasi
TesSpasi
Tetapi dalam beberapa situasi spasi tidak diabaikan, contohnya pemakaian
spasi dalam tag <pre>.
3. Beberapa tag hanya berpengaruh jika berada di dalam tag tertentu
Aturan ini disebut juga content model. Tag <input> dan <option> adalah
contoh tag yang dipengaruhi aturan ini. <input> akan berguna jika berada
dalam tag <form>. <option> hanya ditemukan dalam <select>.
4. Dalam penggunaan tag dalam tag, pemasangan tag harus sesuai
<b><i>memiliki
pasangan
tag
yang
salah</b></i>
tetapi
<b><i>
memiliki pasangan tag yang benar</i></b>. Dalam XHTML aturan ini
merupakan keharusan.
5. Nilai atribut diawali dan diakhiri dengan tanda kutip
Penggunaan kutip dapat berupa ” atau ’. Kedua tanda ini akan menghasilkan
tampilan yang sama. Dalam XHTML aturan ini merupakan keharusan.
Seperti yang telah disebutkan sebelumnya, beberapa aturan diatas menjadi
keharusan dalam XHTML. Selain aturan-aturan diatas masih ada aturan lain yang
berlaku di XHTML, diantaranya :
1. Dalam file XHTML harus terdapat tag yang menunjukkan versi HTML yang
digunakan,
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
XHTML
1.0Transitional//EN">”http://www.w3.org/TR/xhtml1/DTD/xht
ml-transitional.dtd”>.
2. <html>, <head> dan <body> (atau <frameset) harus ada dalam file
XHTML.
3. <title> merupakan tag paling awal dari <head>
4. Setiap tag pembuka harus diakhiri dengan tag penutup
LSP Telematika Indonesia
10
5. Setiap tag mempunyai tag penutup, contoh : tag <hr> tidak memiliki tag
penutup untuk itu pasangan dari <hr> adalah <hr />.
6. Penulisan tag dengan huruf kecil.
1.4 Editor HTML
Editor untuk membuat file HTML banyak tersedia, diantaranya Notepad, Microsoft
Frontpage dan Macromedia Dreamweaver. Pada buku ini akan dijelaskan
penulisan kode HTML di editor notepad, Microsoft frontpage dan Dreamweaver.
1.4.1
Notepad
Notepad merupakan editor yang paling sederhana Pada editor ini, kode HTML
harus dituliskan satu demi satu kemudian hasilnya disimpan dengan ekstension
.html atau .htm.
Gambar 1.4.1.1 Kode HTML di Editor Notepa
LSP Telematika Indonesia
11
1.4.2
Microsoft Frontpage
Microsoft frontpage merupakan editor keluaran Microsoft untuk membuat
website. Editor ini akan mempermudah orang-orang yang akan membuat kodekode HTML karena editor ini telah menyediakan icon serta menu yang akan
menampilkan kode tag HTML, sehingga kode tidak perlu ditulis satu-demi satu
tapi tetap dapat diubah sesuai keinginan penulis kode.
Gambar 1.4.2.1 Gambar Kode HTML di Editor Microsoft Frontpage
Untuk melihat tampilan di web browser dari kode yang telah dibuat editor
microsoft frontpage menyediakan ”Preview”. Beberapa contoh web browser
untuk mengakses web adalah internet explorer keluaran microsoft, firefox,
netscape dan opera.
1.5 Format Teks
Dalam penulisan teks ada struktur tertentu, misalnya untuk penulisan judul
digunakan huruf yang tebal, tulisan dalam bentuk paragraf dan lain sebagainya.
HTML mendukung penformatan teks dengan menyediakan tag-tag untuk itu.
Beberapa diantaranya akan dijelaskan pada bab ini.
LSP Telematika Indonesia
9
1.5.1 Heading
Heading digunakan untuk membuat headline dalam file. Ada 6 (enam) level
heading yang didukung HTML yaitu <h1>, <h2>, <h3>, <h4>, <h5> dan
<h6>. Teks yang ada diantara tag tersebut akan ditampilkan dalam font yang
lebih tebal dan lebih besar jika dibandingkan dengan teks biasa. Berikut ini
adalah contoh kode dengan tag heading :
<html>
<head>
<title>Heading</title>
</head>
<body>
<h1>Heading
<h2>Heading
<h3>Heading
<h4>Heading
<h5>Heading
<h6>Heading
1<h1><br>
2<h2><br>
3<h3><br>
4<h4><br>
5<h5><br>
6<h6>
</body>
</html>
Sedangkan tampilan kode diatas oleh browser, adalah sebagai berikut :
Gambar 1.5.1.1 Tampilan Heading
LSP Telematika Indonesia
10
1.5.2 Paragraph
Untuk mengatur teks menjadi paragraf digunakan tag <p> dan </p>. Biasanya
browser manambahkan sebaris atau 2 (dua) baris kosong sebelum paragraf.
Teks dalam tag ini mempunyai format rata kiri. Atribut align memungkinkan anda
untuk menformat teks menjadi rata kiri, kanan atau tengah. Dalam versi HTML
4.01, anda bisa menformat teks dengan format justify. Berikut ini contoh kode
dengan tag paragraf beserta atribut align :
<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Paragraf Example</title>
</head>
<body>
<p> This is the first paragraph in the example about the p tag. There
really isn't much to say here. </p>
<p align="center"> This is the second paragraph. Again, more of the
same. This time the paragraph is aligned in the center. This might
not be such a good idea as it makes the text hard to read.</p>
<p align="right">Here the paragraph is aligned to the right. Right
aligned text is also troublesome to read. the rest of the text of
this paragraph is of little importance</p>
<p aligned="justify">Under HTML 4.0 Compliant browser, you are able
to justify text. As you ay notice, the way
browsers tend to justify text is sometimes imprecise. Furthermore,
not all browsers support this attribute value.</p>
</body>
<html>
Hasil keluaran dari kode diatas adalah :
LSP Telematika Indonesia
11
Gambar 1.5.2.1 Tampilan Paragraf
1.5.3
Kutipan
Dalam
penulisan
teks,
terkadang
kita
ingin
memasukkan
kutipan
dan
membedakan kutipan tersebut dengan teks yang lain. Hal ini dapat kita lakukan
dengan tag <blockquote> dan </blockquote>. Tag ini akan membuat teks
yang dikutip agak menjorok ke kanan. Tetapi jika kita hanya ingin memasukkan
kutipan pendek, misalnya kalimat percakapan, kita dapat menggunakan tag <q>
dan </q>. Tag ini akan menambahkan symbol (“) di awal dan di akhir kalimat.
Browser lama tidak mendukung <q> tapi tag ini merupakan bagian dari
spesifikasi
versi
HTML
4.1/4.01.
Berikut
ini
adalah
contoh
penggunaan
<blockquote> dan <q> :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Quotation Example</title>
</head>
<body>
<h1 align="center">MadeLeine Quotes</h1>
LSP Telematika Indonesia
12
<p>See the comments the press has about the new store accross 4
avenue.</p>
<q>The store sells variety of product, and all products seem to less
expensive than other stores</q>
<br>--Matthew Somolovich, Ordinary Citizen
<blockquote cite="http://www.MadeLine.com">
MadeLine's products are the best product with low price. You will not
find other stores like MadeLine.
MadeLine treats customer like a king. Serve customer so well that you
won't leave.
Unfortunelly, the location is far from main street, we have to walk a
little bit far to
get to Madeline
</blockquote>
--Clarissa M. Foley, Clothes Magazine
<p>With kudos like this, you need to make sure to buy your clothes on
MadeLine, today!</p>
</body>
</html>
Tampilan dari kode diatas adalah sebagai berikut :
Gambar 1.5.3.1 Contoh Penggunaan <blockquote> dan <q>
LSP Telematika Indonesia
13
1.5.4
Link
Link adalah pointer dari file tempat link berada ke tujuan tertentu. Dalam HTML,
cara untuk mendefinisikan link dengan menggunakan tag <a> dan </a> anchor.
Sedangkan untuk menghubungkan ke tujuan tertentu, <a> membutuhkan
atribut
href.
Atribut
href
merupakan
alamat
tujuan,
seperti
http://www.yahoo.com. Teks yang berada dalam tag ini berfungsi sebagai alat
untuk mengaktifkan hyperlink. Sebuah link bisa terdiri dari teks, gambar atau
kombinasi keduanya. Bentuk link yang umum adalah <a href=”url”>visit our
site</a>. URL Teks “visit our site” adalah link. URL (Uniform Recources Locator)
adalah alamat sebuah website. Berikut ini adalah contoh kode penggunaan <a> :
<html>
<head>
<title>Simple Link Example</title>
</head>
<body>
<h1 align="center">Lots of Links</h1>
<hr>
1.&nbsp;&nbsp;
Visit &nbsp;&nbsp;<a href="www.yahoo.com">Yahoo!
</a><br>
2.&nbsp;&nbsp;
<a href="www.amazon.com"><img src="C:/buy.gif"
width="16"
height="16" border=0 ></a><br>
3.&nbsp;&nbsp;
Search&nbsp;&nbsp<a href="www.google.com">Google <img src="C:/
b01.gif" width="16" height="16" border=0></a>
</body>
</html>
Tampilan HTML dari kode diatas seperti gambar dibawah ini :
Gambar 1.5.4.1 Tampilan HTML dari <a href=”url”> dan </a>
LSP Telematika Indonesia
14
Umumnya link ditandai dengan teks yang digarisbawahi dan memiliki warna
berbeda, seperti biru atau ungu, tergantung apakah link tersebut pernah dipilih
sebelumnya. Nilai atribut href tidak hanya alamat situs lain, tetapi bisa juga
alamat file bahkan alamat email. Berikut contoh beberapa link beserta penjelasan
singkat :
•
<a href=”http://www.google.com”>Visit Google</a>
URL dapat berupa alamat ke home page situs web site.
•
<a href=”http://www.MadeLine.com/about/”>About MadeLine</a>
URL dapat berupa alamat ke alamat file dalam direktori tertentu
•
<a href=”http://www.MadeLine.com/products/domes.htm”>Clothes</a>
URL dapat berupa alamat file.
•
<a href=”http://www.MadeLine.com/products/clothes.html#top>Bag</a>
URL dapat berupa alamat ke posisi tertentu dalam file.
•
<a href=”../../index.html”>Home</a>
URL dapat berupa alamat relatif.
•
<a href=”mailto:[email protected]”>More Information</a>
URL tidak harus berupa alamat HTTP. Terkadang penggunaan mailto tidak
berfungsi dikarenakan browser tidak dikonfigurasi untuk mengirim email
atau tidak mendukung bentuk URL ini.
Seperti yang telah dijelaskan sebelumnya, warna teks link adalah biru jika belum
dikunjungi dan ungu, jika pernah dikunjungi sebelumnya. Jika link berupa
gambar, warna border gambar juga biru atau ungu, kecuali jika atribut border
bernilai 0 (nol). Warna link dapat diubah dengan menggunakan atribut link, alink
dan vlink dalam tag body. Atribut link mengganti warna link yang belum
dikunjungi, sedangkan atribut vlink mengganti warna link yang telah dikunnjungi.
Atribut alink mengganti warna dari link yang aktif, yaitu warna link ketika dipilih.
Dengan menggunakan HTML style sheet, anda dapat mengubah dekorasi link
sehingga link tidak harus digarisbawahi, mengubah style link ketika dilewati
pointer mouse dan lain sebagainya. Berikut ini adalah contoh kode format link
yang berbeda dari biasanya :
<html>
<head>
<title>Link Style Changes</title>
<style type="text/css">

</style>
</head>
<body link="red" alink="blue" vlink="blue">
<a href="http://www.yahoo.com">Test link to Yahoo!</a>
</body>
</html>
Selain atribut href, dalam <a> masih terdapat berbagai atribut. Daftar atribut
dalam <a> terdapat pada tabel 1.5.4.1.
Table 1.5.4.1 : Daftar Atribut Dalam <a>
Nama Atribut
Nilai Atribut
Penjelasan
href
URL
Menentukan alamat link
name
Text
Menamai anchor sehingga dapat menjadi target
dari anchor yang lain
id
Text
Identifikasi anchor agar dapat menjadi target
dari anchor yang lain, diakses oleh style sheet,
dan untuk scripting
target
A frame name
title
Text
accesskey
A character
rel
Text
Menentukan
dihubungkan
rev
Text
Menentukan
hubungan
menghubungkan
Menentukan frame yang menjadi tujuan link
Menentukan teks tooltip untuk link
Menentukan bagian keyboard untuk mengakses
link
hubungan
dari
objek
objek
yang
yang
Seperti yang telah disebutkan sebelumnya, URL yang menjadi tujuan link tidak
harus alamat website, tetapi bisa juga lokasi dalam sebuah file HTML. <a> juga
digunakan
untuk
mendefinisikan
lokasi
(marker)
tersebut.
Jika
marker
ditempatkan dalam file html maka dapat menjadi tujuan dari link. Agar marker
dapat dijadikan tujuan maka marker tersebut didefinisikan terlebih dahulu,
contoh : < a name=”marker”>. Kemudian marker tersebut dapat diakses
dengan <a name=”#marker”>. Sebagai contoh : <a name=”#marker”>This
is a marker</a> mengarahkan teks ”this is a marker” ke tujuan yang ditetapkan
sebelumnya. <a> dapat berperan sebagai tujuan dan link dalam waktu yang
LSP Telematika Indonesia
16
bersamaan,
contoh
:
<a
name=”yahoolink”
href=”http://www.yahoo.com/”>Yahoo!</a>. Berikut ini adalah contoh
kode penggunaan marker
<html>
<head>
<title>Name Attribut Name</title>
</head>
<body>
<a name="top"></a>
Go to the <a href="#bottom">bottom</a> of this document.<br>
link right to a
<a href="../examples/testfile.htm#marker1">marker</a>
in another document.
<p>To make this work we need to stimulate the document being very
long by
using many breaks.</p>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<strong id="middle">the middle</strong>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<hr>
<a name="bottom" href="#top">return to top</a>
<a href="#middle">go to middle</a>
</body>
</html>
1.5.5 List
Modern HTML memiliki 3 (tiga) bentuk list : ordered list (<ol>), unordered list
(<ul>) dan definition list (<dl>). Dua bentuk point lainnya jarang digunakan,
yaitu <menu> dan <dir>. List bisa memiliki hirarki dan dapat mengandung
struktur lain seperti paragraf.
LSP Telematika Indonesia
17
1.5.5.1
Ordered List
Ordered list, <ol> dan </ol>, merupakan list yang berurutan. Urutan ini
direpresentasikan oleh angka, dengan menggunakan angka arab, huruf atau
angka romawi. Ordered list sangat baik untuk membuat semacam kerangka atau
instruksi langkah-per-langkah, karena list diberi nomor secara otomatis oleh
browser. List item yang berurutan dan list yang lain didefinisikan dengan
menggunakan <li> yang tidak memerlukan tag penutup. Untuk XHTML, tag
penutup </li> dianjurkan. Letak list item dibuat agak menjorok ke dalam oleh
browser. Penomoran list dimulai dari 1 (satu). Bentuk umum dari list seperti
dibawah ini :
<ol>
<li>Item 1</li>
<li>Item 1</li>
......
<li>Item 1</li>
</ol>
Ada beberapa atribut untuk <ol>, diantaranya atribut type. Atribut type
digunakan untuk menentukan jenis huruf penomoran. Nilai “a” berarti penomoran
dengan huruf kecil, “A” berarti penomoran dengan huruf besar, “I” berarti
penomoran dengan angka
romawi dan ”I” berarti penomoran dengan angka
romawi besar. Nilai default atribut type adalah ”1”, yaitu penomoran biasa.
<li> juga mempunyai atribut type yang bernilai sama dengan nilai atribut pada
<ol>. Jika atribut type pada <li> diberi nilai maka nilai tersebut akan digunakan
dikeseluruhan list, kecuali <li> yang lain memberi nilai baru pada atribut type.
Nilai atribut start pada <ol> harus berupa angka walaupun nilai atribut type
bukan angka. Atribut value pada <li> dapat digunakan untuk menggantikan
penomoran yang sedang digunakan. Nilai atribut value juga berupa angka.
Berikut ini adalah contoh kode untuk membuat ordered list :
<html>
<head>
<title>Ordered List Example</title>
</head>
<body>
<p>Ordered lists can be very simple.</p>
<ol>
<li>Item 1
<li>Item 2
<li>Item 3
LSP Telematika Indonesia
18
</ol>
<p>Ordered lists can have a variety of types</p>
<ol>
<li
<li
<li
<li
<li
type="a">Lowercase letters
type="A">Uppercase letters
type="i">Lowercase Roman numerals
type="I">Uppercase Roman numerals
type="1">Arabic numerals
</ol>
<p>Ordered lists can start at different values and with different
types.</p>
<ol start="10" type="a">
<li>This should be j
<li value="3">This should be c
<ol>
<li>List can nest
<ol>
<li>Nesting depth is unlimited
</ol>
</ol>
</ol>
</body>
</html>
Tampilan HTML untuk kode diatas adalah gambar dibawah ini :
LSP Telematika Indonesia
19
Gambar 1.5.5.1.1 Tampilan HTML Untuk Ordered List
1.5.5.2 Unordered List
Unordered list digunakan untuk mendaftarkan item dengan penomoran yang
tidak spesifik. Jenis list ini dapat digunakan untuk mendaftarkan fitur dan
keuntungan
sebuah
produk.
Browser
biasanya
menambahkan
bullet
atau
sejenisnya (lingkaran hitam, kotak, lingkaran putih) untuk tiap item dan posisinya
dibuat agak menjorok kedalam
Unordered list dapat memiliki hirarki. Untuk setiap level hirarki, posisi list
semakin menjorok ke dalam, dan jenis bullet juga berubah. Umumnya, lingkaran
hitam digunakan pada lever teratas dari list. Lingkaran yang kosong digunakan
pada level kedua, sedangkan level ketiga menggunakan kotak. Atribut type dapat
digunakan untuk menentukan jenis bullet dari list. Atribut type juga dapat muncul
dalam <ul> dan akan menentukan jenis bullet untuk keseluruhan list atau dapat
muncul di setiap <li>. Nilai atribut type pada <li> dapat mengubah nilai list
LSP Telematika Indonesia
20
keseluruhan kecuali jika diubah kembali oleh type yang lain. Nilai atribut type
dapat berupa ”disc”, ”circle” atau ”square”. Berikut ini adalah contoh kode
penggunaan unordered list :
<html>
<head>
<title>Unordered List Example</title>
</head>
<body>
<ul>
<li>Unordered lists
<ul>
<li>can be nested.
<ul>
<li>Bullet changes on nesting.
</ul>
</ul>
</ul>
<p>Bullets can be controlled with TYPE attribut.
Type can be set for the list as a whole or item by item.</p>
<ul type="square">
<li>First item bullet shape set by UL
<li type="disc">Disc item
<li type="circle">Circle item
<li type="square">Square item
</ul>
</body>
</html>
Tampilan HTML untuk kode diatas adalah gambar di bawah ini :
Gambar 1.5.5.2.1 Tampilan HTML Unordered List
LSP Telematika Indonesia
21
1.5.5.3
Definition List
Definition list adalah list yang berpasangan. List ini digunakan untuk menyusun
posisi kata dan definisi dari kata tersebut. Tag definition list adalah <dl> dan
</dl>. Setiap kata yang akan didefinisikan diawali dengan <dt>, singkatan dari
”definition term”. Sedangkan definisi dari kata tersebut diawali dengan <dd>.
Tag <dt> dan <dd> tidak harus menggunakan tag penutup. Berikut ini adalah
contoh kode penggunaan definition list:
<html>
<head>
<title>Definition List Example</title>
</head>
<body>
<h1 align="center">Definitions</h1>
<dl>
<dt>Gadget</dt>
<dd>A useless device used in many HTML examples.</dd>
<dt>Gizmo<dt>
<dd>Another useless device used in a few HTML examples.</dd>
<dl>
</body>
</html>
Tampilan untuk kode di atas adalah sebagai berikut :
LSP Telematika Indonesia
22
Gambar 1.5.5.3.1 Tampilan HTML Penggunaan Definition List
1.6 Gambar
File gambar dapat digunakan untuk memperindah dan memudahkan navigasi file
Tipe file gambar yang ada sekarang ini diantaranya adalah GIF (graphics
interchange format - .gif), JPEG/JPG (joint photographic experts - .jpeg), XBM (X
bitmaps - .xbm), XPM (X pixelmaps - .xpm), PNG (portable network graphics .png). File gif baik untuk digunakan dalam ilustrasi seperti logo, sementara file
jpeg baik untuk gambar yang kompleks seperti foto. File bertipe JPG berukuran
lebih kecil dibandingkan tipe yang lain karena kompresi yang digunakan
mengabaikan piksel-piksel yang dianggap membawa perubahan minor pada
gambar, kompresi ini dinamakan lossy. Faktor yang harus diperhatikan oleh web
designer mengenai gambar adalah ukuran file serta kualitasnya.
Untuk menyisipkan gambar dalam file HTML, gunakan tag <img> dan tentukan
nilai atribut src, yaitu URLdari file gambar berupa absolut URL atau relatif URL.
Untuk memasukkan gambar yang berada pada tempat yang sama dengan file
HTML, gunakan
<img src=”logo.gif”>
Sedangkan penggunaan alamat absolute URL, dengan cara
<img src=”http://www.MadeLine.com/images/logo.gif”>
Berikut ini adalah contoh kode penggunaan tag < img> :
<html>
LSP Telematika Indonesia
23
<head>
<title>Image Example</title>
</head>
<body>
<h2 align="center">Image Example</h2>
<img src="images/chobits.jpg" width="207" height="325" border=0>
</body>
</html>
Tampilan untuk kode di atas adalah sebagai berikut :
Gambar 1.6.1 Tampilan HTML untuk <img>
Dalam <img> terdapat beberapa atribut, diantaranya alt. Alt digunakan untuk
menyediakan teks pengganti apabila gambar tidak dapat ditampilkan. Nilai atribut
alt dapat ditampilkan di tempat gambar atau sebagai tool tip. Sekarang ini,
dengan adanya atribut title, alt digunakan untuk menampilkan teks apabila
gambar tidak dapat ditampilkan dan nilai dari atribut title sebagai tool tip.
LSP Telematika Indonesia
24
Gambar 1.6.2 Tampilan HTML dengan Alt
Gambar dapat diatur posisinya dalam file HTML dengan menggunakan atribut
align. Atribut align dapat bernilai top, bottom atau middle. Apabila gambar
disertakan dalam teks maka teks selanjutnya akan terletak di top, bottom atau
middle dari gambar tergantung nilai dari atribut align. Berikut ini adalah contoh
kode penggunaan <img> dan atribut align beserta hasil tampilannya:
<html>
<head>
<title>Basic Image Alignment</title>
</head>
<body>
<p><img src=”image/aligntest1.gif” align=”top” border=”1”>
This text should be aligned to the top of the image.</p>
<p><img src=”images/aligntest1.gif” align=”middle” border=”1”>
This text should be aligned to the middle of the image.</p>
<p><img src=”images/aligntest1.gif” align=”bottom” border=”1”>
This text should be aligned to the bottom of the image.</p>
</body>
</html>
Gambar 1.6.3 Tampilan HTML dengan Align
Dengan nilai align seperti diatas, teks tidak berada di sekeliling gambar sehingga
layout file terlihat aneh. Netscape memperkenalkan nilai left dan right untuk
atribut align. Dengan demikian maka jika gambar berada di sebelah kiri maka
LSP Telematika Indonesia
25
teks akan berada di sebelah kanan gambar, demikian juga sebaliknya. Berikut ini
adalah contoh kode penggunaan left dan right untuk atribut align beserta
tampilannya :
<html>
<head>
<title>Improved Text Flow</title>
</head>
<body>
<img src=" image/aligntest1.gif " align="left">
The top images has its align attribute set to "left" so the text
flows around it to the "right". The top image has its align attribute
set to "left" so the text flows around it to the "right".
<br clear="left"><br><br>
<p><img src=" image/aligntest1.gif " align="right">
The top images has its align attribute set to "right" so the text
flows around it to the "left". The top image has its align attribute
set to "right" so the text flows around it to the "left".
</body>
</html>
Gambar 1.6.4 Tampilan HTML dengan Align Right dan Left
Pada versi HTML 3.2 Netscape memperkenalkan atribut hspace dan vspace.
Atribut ini dapat digunakan untuk menyediakan rung kosong di sekitar gambar.
Atribut hspace digunakan untuk memasukkan ruang kosong di sebelah kiri dan
kanan gambar. Sedangkan atribut vspace digunakan untuk memasukkan ruang
kosong di atas dan di bawah gambar. Nilai kedua atribut ini harus positif dalam
LSP Telematika Indonesia
26
piksel. Berikut ini adalah contoh kode untuk <img> dan atribut hspace, vspace
beserta hasil tampilannya :
<html>
<head>
<title>HSPACE and VSPACE Example</title>
</head>
<body>
<p>The image below has its<tt><b>&lt;HSPACE&gt;</b></tt>and
<tt><b>&lt;VSPACE&gt;</b></tt> attributes set to 50 pixels, so the
text will flow around it at a distance of 50 pixels. The rest of this
text is dummy text. if it said anything interesting you would
certainly be the first to know.
<img src="images/aligntest2.gif" align="left" hspace="50"
vspace="50">
This is dummy text. If it said anything interesting you would
certainly be the first to know. There's really no point in reading
the rest of it. This is dummy text. If it said anything interesting
you would certainly be the first to know. There's really no point in
reading the rest of it. This is dummy text. If it said anything
interesting you would certainly
be the first to know. There's really no point in reading the rest of
it. This is dummy text. If it said anything interesting you would
certainly be the first to know. There's really no point in reading
the rest of it. This is dummy text. If it said anything interesting
you would certainly be the first to know. There's really no point in
reading the rest of it. This is dummy text. If it said anything
interesting you would certainly be the first to know. There's really
no point in reading the rest of it. This is dummy text. If it said
anything interesting you would certainly be the first to know.
There's really no point in reading the rest of it.
</p>
</body>
</html>
Gambar 1.6.5 Tampilan HTML dengan Atribut HSPACE dan VSPACE
LSP Telematika Indonesia
27
1.7 Tabel
Tabel didefinisikan dengan tag <table>. Sebuah tabel terbagi atas baris (tag <tr)
dan setiap baris terbagi menjadi kolom (tag <td). Dalam kolom dapat berisi teks,
gambar, list, paragraf, form, tabel dan lainnya. Berikut ini adalah contoh kode
tabel beserta hasil tampilannya di web :
<table border="1">
<tr>
<td>baris 1, kolom
<td>baris 1, kolom
</tr>
<tr>
<td>baris 2, kolom
<td>baris 2, kolom
</tr>
</table>
1</td>
2</td>
1</td>
2</td>
Hasil keluarannya :
row 1, cell 1
row 1, cell 2
row 2, cell 1
row 2, cell 2
1.7.1 Atribut Border
Jika kita tidak menentukan atribut border maka tabel akan ditampilkan tanpa
border. Terkadang hal ini berguna tetapi umumnya, kita menginginkan agar
border terlihat. Untuk menampilkan tabel dengan border, kita harus memberi
nilai pada atribut border :
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
1.7.2 Heading Pada Tabel
Heading pada tabel didefinisikan dengan tag <th>. Berikut ini adalah contoh kode
heading pada tabel :
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
LSP Telematika Indonesia
28
<td>row 1,
<td>row 1,
</tr>
<tr>
<td>row 2,
<td>row 2,
</tr>
</table>
cell 1</td>
cell 2</td>
cell 1</td>
cell 2</td>
Hasil keluarannya adalah sebagai berikut :
Heading
Another Heading
row 1, cell 1
row 1, cell 2
row 2, cell 1
row 2, cell 2
1.8
Frame
Frame adalah area dengan scroll yang berdiri sendiri, atau window dari web page.
Sebuah frame akan membagi file HTML menjadi beberapa area dengan luas yang
lebih kecil, dimana untuk setiap area diisi dengan file HTML yang lain. Isi dari
sebuah frame dapat dimanipulasi bahkan dihubungkan dengan isi frame yang
lain, sehingga akan menghasilkan file HTML yang menarik.
Pemisah antar frame berupa border sehingga file HTML yang menggunakan frame
akan menyerupai file HTML yang menggunakan tabel. Setiap frame diberi nama
sehingga dapat menjadi referensi melalui link atau scripting, dengan demikian isi
dari sebuah frame dapat dipengaruhi oleh isi dari frame yang lain. Perbedaan
utama antara frame dengan tabel adalah kemampuan referensi dari frame, selain
itu frame menyediakan fasilitas layout dan navigasi.
1.8.1 Contoh Sederhana Frame
Yang perlu diingat, frame terdiri dari beberapa file HTML. Sebuah file HTML
dengan 2 (dua) frame sebenarnya terdiri dari :
•
File
HTML
yang
mendefinisikan
hubungan
antara
frame
(framing
document)
•
File HTML untuk mengisi frame pertama
•
File HTML untuk mengisi frame kedua
LSP Telematika Indonesia
29
Framing document memiliki sedikit perbedaan dengan file HTML yang umum.
Perbedaan terletak pada tag <body>. Framing document tidak mengandung tag
<body>.
Tag
ini
digantikan
dengan
tag
<frameset>,
yang
berfungsi
mendefinisikan frame-frame yang digunakan.
Atribut utama dari dari <frameset> adalah row dan cols. Sebuah file dokumen
HTML dibagi menjadi 2 (dua) kolom yang masing-masing berukuran 20% dan
80% dikodekan dengan <frameset cols=”20%, 80%”>, sedangkan dokumen
HTML yang terbagi menjadi 3 (tiga) baris yang masing-masing berukuran 10%,
80% dan 10% dikodekan dengan <frameset cols=”10%, 80%, 10%”>.
Dalam <frameset> terdapat tag <frame> yang digunakan untuk menentukan
file HTML yang akan diisi dalam row atau cols, yang telah didefinisikan
sebelumnya
dalam
<frameset>.
Sintaks
dari
<frame>
adalah
<frame
src=”URL file” name=”nama unik dari frame”>. Berikut ini adalah kode
sederhana dari file HTML yang menggunakan frame :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<title>Belajar menggunakan frame</title>
</head>
<frameset cols="20%, 80%">
<frame src="links.html" name="links">
<frame src="display.html" name="display">
<noframes>
<body>
<p> File ini menggunakan frame. Ikuti link <a
href="noframes.html">tanpa frame</a> untuk menuju versi
dari file ini tanpa frame </p>
</body>
</noframes>
<frameset>
<html>
Dengan kode di atas maka file links.html akan berada pada frame yang
berukuran 20%, sedangkan file display.html akan berada pada frame yang
berukuran 80%. Kode dari file links.html dan display.html ada di bawah ini:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Links</title>
</head>
<body>
<h2>Links</h2>
<hr>
<a href="http://www.google.com" target="display">Yahoo!</a>
</body>
</html>
LSP Telematika Indonesia
30
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Display</title>
</head>
<h2>Display</h2>
<hr>
<p> Click file akan ditampilkan di sini </p>
</body>
</html>
Setelah semua file selesai dibuat, letakkan file-file tersebut pada direktori yang
sama, kemudian buka file frame utama. Tampilan pada web browser seperti
dibawah ini :
Gambar 1.8.1.1 Tampilan Di Web Browser File Framing.html.
<noframe> yang ada pada contoh sebelumnya mengandung file HTML serta
teks yang akan ditampilkan apabila browser tidak mendukung frame.
1.8.2 Target Frame
LSP Telematika Indonesia
31
Salah satu contoh penggunaan frame, sebuah file HTML terdiri dari beberapa
frame dimana salah satu frame berisi links sedangkan frame lainnya akan berisi
file HTML yang sesuai dengan link yang dipilih. Ketika link dipilih maka frame
lainnya akan menampilkan file HTML yang ditentukan oleh link.
Pada contoh
sebelumnya frame yang berisi daftar link dinamakan ”links” dan targetnya
dinamakan ”display”. Langkah-langkah untuk membuat target link adalah :
1. Nilai atribut name pada <frame> bersifat unik
2. Gunakan
<a
atribut
target
dalam
href=”http://www.yahoo.com”
<a>,
contohnya
target=”display”>
:
akan
menampilkan situs www.yahoo.com pada frame yang bernama “display”
jika ada. Jika frame yang menjadi target tidak ditemukan maka
www.yahoo.com akan ditampilkan di tempat link.
Selain frame lain, nilai target yang telah disediakan terdiri dari :
•
_blank
Load file HTML ke window baru, umumnya yang tidak
bernama
•
_self
Load file HTML di frame sendiri
•
_parent
Load link ke frame parent
•
_top
Load link ke semua frame
1.8.3 IFRAME
Contoh-contoh yang ditunjukkan sebelumnya berada pada posisi kanan, kiri, atas
atau bawah. Bentuk frame lain disebut floating frame (diperkenalkan oleh
Microsoft). Floating frame akan membuat frame area inline, yang bersifat seperti
objek-objek lain yang disisipkan. Tag dari inline frame adalah <iframe>, tag ini
dapat berada di manapun dalam <body>.
Atribut utama dari <iframe> adalah src, height dan width. Atribut src untuk
menentukan file yang akan ditampilkan, sedangkan atribut height dan width
untuk menentukan ukuran dari frame. Berbeda dengan <frame> yang tidak
memiliki tag penutup, <iframe> memiliki tag penutup </iframe>. Contoh kode
sederhana yang menggunakan <iframe> adalah :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Inline Frame</title>
</head>
LSP Telematika Indonesia
32
<body>
<h1 align="center">Contoh Inline Frame</h1>
<iframe name="iframe1" src="iframe.html" width="350" height="200"
align="left">
Disini akan terdapat inline frame jika browser anda compatible.
</iframe>
<p>Ini adalah contoh sederhana dari inline frame. Inline frame terlihat seperti
objek yang disisipkan </p>
</body>
<html>
Tampilan dari kode diatas terdapat pada gambar 4.3.1. Beberapa browser tidak
mendukung <iframe>, diantaranya Netscape 4.x. Sama halnya dengan frame,
inline
<a
frame
dapat
menjadi
href=”http://www.google.com”
target
link.
Contoh
kode:
target=”iframe1”>Tampilkan
di
iframe </a>.
Gambar 1.8.3.1 Tampilan Kode Inline Frame
1.9 Tag Logika
LSP Telematika Indonesia
33
Tag logika atau idiomatic element digunakan untuk menandai tipe informasi yang
berbeda. Perbedaan tipe informasi ditandai dengan menggunakan huruf miring,
tebal atau menggunakan huruf yang ukurannya sama (monospace). Tag ini tidak
tergantung pada browser.
This is emphasized text
This is cited text
This is strong text
Perhatikan contoh ini : seandainya kita hendak menampilkan teks dengan huruf
miring untuk membedakan teks tersebut dari teks lainnya. Dengan menggunakan
tag italic maka kita memberitahu browser untuk “tampilkan teks ini dengan huruf
miring”. Tetapi bagaimana dengan browser yang tidak mendukung tampilan
tersebut? Maka browser tidak akan menampilkan teks dengan huruf miring
karena tag tersebut akan diabaikan. Akan lebih baik apabila kita dapat
memberitahu browser untuk membedakan teks melalui tag khusus. Umumnya
dengan melakukan hal demikian maka browser akan mengubah teks dengan
huruf miring tetapi browser dapat juga menampilkan format yang lain yang dapat
membedakan teks tersebut dari teks yang lain. Hal sama terjadi juga untuk
membedakan teks dengan menggunakan penebalan huruf.
Berikut ini adalah penjelasan lebih lanjut mengenai tag-tag yang termasuk dalam
tag logika:
1. Heading
Tag ini digunakan untuk membuat teks menjadi seperti headline. Pada
umumnya browser akan menampilkan teks yang berada dalam tag ini
dengan huruf tebal dan ukuran yang berbeda dari teks lain. Penjelasan
lebih lanjut mengenai tag ini ada pada bab 1.5.1.
2. Emphasis <em>
Umumnya browser mengartikan tag ini sebagai menampilkan dengan
huruf miring. Tetapi jika browser tidak mendukung tampilan tersebut
maka browser akan menampilkan dengan cara yang lain.
3. Strongly Emphasis <strong>
Browser mengartikan tag ini dengan menebalkan huruf.
4. Address (<ADDRESS>...</ADDRESS>)
Tag ini digunakan untuk menulis alamat email.
5. Blockquote (<BLOCKQUOTE>...</ BLOCKQUOTE >)
Tag ini digunakan untuk memasukkan kutipan panjang dari dokumen lain.
Penjelasan lebih lanjut dari tag ini ada pada bab 1.5.3
LSP Telematika Indonesia
34
6. Citation (<CITE>...</CITE>)
Tag ini digunakan untuk memasukkan kutipan seperti nama majalah,
jurnal atau buku.
7. Definition (<DFN>...</DFN>)
Tag ini digunakan untuk mendefinisikan term.
8. Code (<CODE>...</CODE>)
Tag ini digunakan untuk penulisan kode program komputer.
9. Sample (<SAMP>...</SAMP>)
Tag ini digunakan untuk menuliskan contoh.
10. Variable (<VAR>...</VAR>)
Tag ini digunakan untuk penulisan variabel dari kode program komputer.
Untuk lebih memahami penggunaan tag-tag diatas, berikut ini adalah contoh
kode file HTML yang menggunakan tag logika :
Style Tags
File web yang hanya terdiri dari tulisan hitam putih kurang menarik untuk dilihat.
Dengan menggunakan tag style maka teks akan diberikan jenis, penekanan dan
warna yang berbeda dengan file web akan lebih menarik untuk dilihat.
Tag yang terpenting untuk mengubah teks adalah <font>..</font>. Tag ini dapat
digunakan untuk mengubah jenis, ukuran dan warna teks biasa.
<font face=”times new roman” size=”3 pt” color=”#FFFFFF”>Teks</font>
<font> memiliki 3 (tiga) atribut untuk mengubah teks :
1. Face
Jenis huruf default dari browser pada umumnya adalah “Times New
Roman”. Banyak browser memiliki keterbatasan dalam mengenali jenis
huruf. Kita dapat memasukkan lebih dari satu jenis huruf sebagai nilai
atribut ini. Browser akan mengubah teks menurut jenis huruf yang
pertama kali dikenali. Contoh : <font face=”arial, comic sans ms”>,
maka browser akan mengubah teks dengan jenis huruf “Arial”. Tetapi,
jika browser tidak mengenali huruf “Arial” maka browser akan
mengubah teks dengan jenis huruf “Comic Sans MS”. Jika browser
tetap tidak mengenali jenis huruf tersebut maka browser akan
menggunakan jenis huruf default yaitu “Times New Roman”. Beberapa
jenis huruf diantaranya adalah Arial, Brush Script, Impact, Letter
Gothic, Lucida handwriting, Lydian, Mistral, verdana dan lainnya.
2. Size
LSP Telematika Indonesia
35
Atribut ini mengatur ukuran huruf yang akan ditampilkan. Nilai atribut
ini bisa negative atau positif dengan kisaran nilai “-2” hingga “+4”
dengan nilai default “3” ( Contoh : “-2” adalah “1” dan “+4” adalah
“7”). Nilai “1” (atau “-2”) akan menghasilkan tampilan huruf ukuran 8.
Nilai “2” (atau “-1”) akan menghasilkan tampilan huruf ukuran 10. Nilai
“3” (atau “+0”) akan menghasilkan tampilan huruf ukuran 12. Nilai “4”
(atau “+1”) akan menghasilkan tampilan huruf ukuran 14. Nilai “5”
(atau “+2”) akan menghasilkan tampilan huruf ukuran 18. Nilai “6”
(atau “+3”) akan menghasilkan tampilan huruf ukuran 24. Nilai “7”
(atau “+4”) akan menghasilkan tampilan huruf ukuran 36.
3. Color
Nilai atribut ini berupa kode warna atau nama warna. Atribut ini
digunakan untuk mengubah warna teks. Warna hitam adalah warna
default dengan kode warna “#000000”.
Berikut ini adalah contoh file HTML yang menampilkan teks yang mengalami
perubahan style :
<font color="#700000" size="+2>The State Flag of New Mexico has on it
a modern interpretation of an ancient symbol of a sun design, as seen
on a late 19th century water jar from the Zia Pueblo.&nbsp; This
pueblo is thought to have been one of the Seven Golden Cities of
Cibola, which explorer Vasquez de Coronado sought.&nbsp; The <font
color="red">red</font> sun symbol was then called a &#147;Zia&#148;
and is shown on a field of <font color="#FFB000">gold</font>.&nbsp;
The
<font
color="#FF0000">red</font>
and
<font
color="#FFB000">gold</font> colors, which the Spanish Conquistadores
brought to the New World, were the colors of Queen Isabela of
Castile.&nbsp; Here is the official salute to the New Mexican
Flag:<blockquote><font face="arial" color="#FF8000" size="4"><b>I
salute the flag of the State of New Mexico and the Zia symbol of
perfect friendship among united cultures.</b></font></blockquote>
Hasil tampilan file HTML dari kode di atas adalah sebagai berikut :
LSP Telematika Indonesia
36
The State Flag of New Mexico has on it a modern interpretation of
an ancient symbol of a sun design, as seen on a late 19th century
water jar from the Zia Pueblo. This pueblo is thought to have been
one of the Seven Golden Cities of Cibola, which explorer Vasquez
de Coronado sought. The red sun symbol was then called a “Zia”
and is shown on a field of gold. The red and gold colors, which the
Spanish Conquistadores brought to the New World, were the
colors of Queen Isabela of Castile. Here is the official salute to the
New Mexican Flag:
I salute the flag of the State of New Mexico and the Zia symbol of perfect
friendship among united cultures.
Selain tag <font> masih banyak tag-tag lain yang termasuk dalam tag style.
Berikut ini adalah penjelasan dari beberapa style tag :
1. <style>....</style>
Tag ini digunakan untuk mengubah jenis huruf, warna dan ukuran dari
heading. Contoh :
<style>h2 {font-size: 21pt; color: #000080}; h3 {font-size: 17pt;
color: #008000}</style>
Kode diatas akan mengubah ukuran dan warna dari teks dalam heading 2
(dua) dan heading 3 (tiga).
2. <basefont>...</basefont>
Tag ini digunakan untuk mengubah jenis huruf, ukuran dan warna default
dari teks. Sama halnya dengan <font>...</font>, tag ini juga memiliki 3
(tiga) atribut yaitu face untuk mengubah jenis tulisan, size untuk
mengubah ukuran tulisan dan color untuk mengubah warna tulisan.
3. <i>...</i>
Tag ini digunakan untuk mengubah jenis huruf teks menjadi huruf miring.
4. <b>...</b>
Tag ini digunakan untuk menebalkan teks
5. <u>...</u>
Tag ini digunakan untuk menggaris-bawahi teks.
6. <s>...</s>
Tag ini digunakan untuk membuat garis horizontal pada teks.
Contoh kode di bawah ini menggunakan beberapa tag yang telah dijelaskan
sebelumnya :
LSP Telematika Indonesia
37
Hey
Kevin,<br><br>
That sure was a <b>bold</b> move on your part to tell off the boss
this afternoon! Man, it's something <i>everybody</i> has wanted to do
for a long time! I guess now you'll be <s>getting that raise you've
been wanting</s> looking for another job starting tomorrow, huh
buddy? <b><i><u>Just</u> <u>kidding</u>!</i> :-)</b> Anyway, on
behalf of the crew, <u>thanks</u>, and we're all behind ya!!<br><br>
John
Hasil tampilan dari kode di atas adalah :
Hey
Kevin,
That sure was a bold move on your part to tell off the boss this afternoon! Man,
it's something everybody has wanted to do for a long time! I guess now you'll be
getting that raise you've been wanting looking for another job starting
tomorrow, huh buddy? Just kidding! :-) Anyway, on behalf of the crew, thanks,
and
we're
all
behind
ya!!
John
7. <tt>...</tt>
Tag ini digunakan untuk membuat jenis huruf seperti huruf mesin ketik.
Berikut ini adalah contoh kode penggunaan tag ini :
<font size="4"><center><i><b><u>quick</u>
<u>cornbread</u></b></i><br><br>
Preparation Time: 20 minutes<br>
Cooking Time: 20-25 minutes<br><br>
<tt><u>DRY</u> <u>Ingredients</u><br>
2 c. white or yellow cornmeal<br>
2 c. flour<br>
4 tsp. baking <u>powder</u><br>
1 tsp. salt<br><br>
<u>WET</u> <u>Ingredients</u><br>
3 Tblsp. maple syrup<br>
½ c. olive oil<br>
2 c. milk<br>
2 eggs, beaten<br>
2 medium jalapeño peppers, minced, <i>or</i><br>
2 4-oz. cans green chiles, chopped (optional)</tt></center><br><br>
1. Mix well all the dry ingredients in one bowl and all the wet
ingredients in another bowl. Add the dry ingredients to the wet
LSP Telematika Indonesia
38
ingredients, and stir until <u>well-combined</u>.<br><br>
2. Pour the mixture into a well-greased 9"×2" round, or 8"×8"×2"
square, glass baking pan. Bake in a preheated 350° oven for 20-25
minutes or until a toothpick inserted into the middle comes out dry.
Set aside and cool. This recipe serves 8 to 10 people.</font>
Hasil tampilan dari kode di atas adalah :
QUICK CORNBREAD
Preparation Time: 20 minutes
Cooking Time: 20-25 minutes
DRY ingredients
2 c. white or yellow cornmeal
2 c. flour
4 tsp. baking powder
1 tsp. salt
WET ingredients
3 Tblsp. maple syrup
½ c. olive oil
2 c. milk
2 egg, beaten
Optional: 2 medium jalapeño peppers, minced, or
2 4-oz. cans green chiles, chopped
1. Mix well all the dry ingredients in one bowl and all the wet ingredients in another
bowl. Add the dry ingredients to the wet ingredients, and stir until well-combined.
2. Pour the mixture into a well-greased 9"×2" round, or 8"×8"×2" square, glass baking
pan. Bake in a preheated 350° oven for 20-25 minutes or until a toothpick inserted
into the middle comes out dry. Set aside and cool. This recipe serves 8 to 10 people.
1.10 Cascading Style Sheet
Style sheets mendefinisikan cara tag HTML ditampilkan, seprti halnya tag font
dan atribut color di HTML 3.2. Umumnya style disimpan di sebuh file tersendiri
dengan ekstensi .css. External style sheet memungkinkan kita untuk mengubah
penampilan dan tata letak dari halaman web hanya dengan mengubah file CSS.
LSP Telematika Indonesia
39
Selain disimpan di file tersendiri, style sheet juga bisa dituliskan di dalam file
HTML, diantara tag <head>. Style sheet ini dinamakan internal style sheet.
Selain itu style juga bisa dituliskan di dalam tag HTML, (inline style), style yang
demikian
memiliki
prioritas
paling
tinggi,
yang
artinya
style
ini
akan
menggantikan eksternal style sheet dan internal style sheet.
1.10.1 Menyisipkan External Style Sheet
External style sheet sangat baik untuk digunakan jika style ini akan diterapkan di
banyak halaman web. Dengan demikian kita dapat mengubah tampilan banyak
halaman hanya dengan mengubah sebuah file CSS. Tiap halaman yang akan
menggunakan style, menghubungkan file style dengan tag <link>. Berikut ini
contoh file external style sheet dan cara menyisipkannya :
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
Cara menyisipkan dalam file HTML
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css" />
</head>
1.10.2 Menyisipkan Internal Style Sheet
Internal style sheet baik untuk digunakan di sebuah dokumen yang memiliki style
tersendiri. Kita mendefinisikan internal style sheet dalam tag <style>. Berikut ini
cara membuat internal style sheet :
<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>
browser akan membaca definisi style lalu menampilkan file HTML berdasarkan
definisi tersebut.
LSP Telematika Indonesia
40
1.10.3 Menyisipkan Inline Style
Untuk menggunakan inline style, kita gunakan tag <style> pada tag yang
bersangkutan. Atribut style dapat mengandung property dari CSS. Berikut ini
contoh penggunaan inline style, untuk mengubah warna dan ukuran margin :
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
1.10.4 Menggunakan CSS
Setelah kita mempelajari cara membuat CSS. Selanjutnya kita akan membahas
cara menggunakan CSS di dalam file HTML. Penggunaan file CSS dalam tag HTML
dengan selector class. Nilai atribut class adalah style yang ingin kita gunakan
untuk. Berikut ini contoh penggunaan CSS :
h1,h2,h3,h4,h5,h6
{
color: green
}
File HTML :
<h1 class="h1">
Tulisan ini akan berwarna hijau
</h1>
<h2 class="h2">
Tulisan ini juga akan berwarna hijau
</h2>
1.11 Keamanan Website
Internet
dapat
diakses
oleh
semua
orang
di
dunia.
Untuk
itu
muncul
permasalahan dengan keamanan internet. Beberapa permasalahan tersebut
adalah :

Mengubah informasi yang ada di Internet sehingga mempermalukan
perusahaan pemilik web site / deface
LSP Telematika Indonesia
41

Informasi yang seharusnya hanya bisa diakses oleh orang tertentu,
disadap sehingga diakses oleh orang yang tidak berhak

Penyadapan informasi seperti nomor kartu kredit

Menyerang server dengan memberikan request secara terus menerus (
denial of service attack )

melemahkan atau menghilangkan fungsi firewall (tunneling)
Untuk mengatasi permasalahan tersebut, berikut ini adalah cara-cara yang dapat
dilakukan :
1. membatasi akses dengan kontrol akses
Dengan pembatasan akses maka tidak semua orang bisa mengakses
informasi. Pembatasan akses dapat dilakukan dengan cara :

membatasi domain atau nomor IP yang dapat mengakses

menggunakan userId dan password

mengenkripsi data sehingga hanya dapat didekripsi oleh pihak
yang berhak.
Mekanisme pembatasan hak akses bergantung pada program yang ada di
server.
Secure Socket Layer merupakan salah satu cara untuk mengamankan
internet dengan mengenkripsi komunikasi pada tingkat socket. Beberapa
server telah menyediakan fasilitas ini contohnya apache.
2. Mengetahui jenis web server
Informasi mengenai web server dapat digunakan untuk menyerang web
server melalui titik kelemahan web server tersebut.
Sedangkan untuk client, serangan yang muncul berupa pelanggaran privasi dan
penyisipan virus. Ketika kita mengunjungi web, kita dititipi oleh cookies yang
berguna untuk menandai aktivitas yang dilakukan, sehingga dapat dilakukan
tracking terhadap situs web yang pernah kita kunjungi.
Enkripsi Data
Enkripsi adalah proses menyembunyikan informasi, membuatnya menjadi tidak
terbaca tanpa pengetahuan khusus. Algoritma untuk melakukan enkripsi disebut
dekripsi (kebalikannya adalah dekripsi). Informasi semula dinamakan plainteks
sedagkan informasi yang telah dienkripsi dinamakan ciperteks.
Metode
enkripsi
terbagi
menjadi
algoritma
symmetric
key
(private-key
cryptography) dan asymmetric algorithms (public-key cryptography). Dalam
algoritma symmetric key (DES atau AES), pengirim dan penerima informasi
LSP Telematika Indonesia
42
memiliki key yang hanya diketahui bersama, sedangkan dalam asymmetric key
(RSA) ada 2 (dua) kunci, public key yang di umumkan luas dan private key yang
hanya diketahui penerima informasi. Metode yang dapat digunakan untuk
pertukaran kunci dalam algoritma assymetric key adalah diffie helman, metode
ini hanya membutuhkan private key.
Soal Latihan
1. Apa fungsi atribut Alt pada tag <img> :
a. Teks alternatif jika gambar tidak bisa ditampilkan
b. Cara cepat menyimpan gambar
c. Gambar alternatif yang disediakan
d. Memberi efek tertentu pada gambar
e. Mengubah gambar menjadi link
2. Apa fungsi atribut hspace dan vspace :
a. Tujuan sebuah URL
b. Menyediakan ruang kosong
c. Mengatur posisi gambar
d. Mengatur ukuran gambar
e. Menampilkan teks alternatif
3. <frame> menggantikan tag :
a. <head>
b. <html>
c. <body>
d. <base>
e. <meta>
Soal Praktek
4. Buatkan kode HTML yang akan menampilkan keluaran seperti di bawah ini :
LSP Telematika Indonesia
43
5. Buatlah kode HTML yang akan menampilkan keluaran seperti di bawah ini :
LSP Telematika Indonesia
44
BAB 2 BASIS DATA
Tujuan Instruksional Umum :
1. Mengenal konsep Basis data
2. Mengenal operasi dalam basis data
3. Mengenal perintah akses basis data
Tujuan Instruksional khusus :
1. Programmer memahami konsep dalam basis data
2. Programmer dapat mengakses, menambah, menghapus dan mengubah
data dalam basis data
Materi yang dibahas dalam bab ini memenuhi :
1. TIK.PR02.021.01 Menerapkan basis data
Berikut ini adalah gambaran umum dari materi yang akan dibahas pada bab ini :
LSP Telematika Indonesia
45
2.1 Terminologi
Berikut ini adalah terminologi yang umum digunakan dalam basis data :
•
Basis Data : Kumpulan data yang terorganisir
•
DBMS
(Database
Management
System)
:
Program
komputer
yang
menangani basis data
•
Query : Cara mengakses basis data
•
Table : Tempat penyimpanan data
contoh :
Tabel 2.1.1 : Data Mahasiswa
NIP
Nama
Jurusan
0912457
Budi Santoso
Akuntansi
0958745
Andi Wiryawan
Ekonomi
0987856
Susi Widyaningsih
Sastra
0996545
Karina Putri
Psikologi
•
Record / Tuple : data dalam table
•
Primary Key : himpunan data dalam table yang digunakan untuk
membedakan baris. Contoh : pada table diatas NIP dapat dijadikan
primary key karena nilainya unik sehingga data-data dalam satu baris
tidak ada yang persis sama.
•
Foreign Key : data di sebuah table dimana data tersebut manjadi primary
key di table lain.
•
Data
Manipulation
Language
:
bahasa
yang
digunakan
untuk
memasukkan, mengubah dan mengakses data dari/ke basis data. Bahasa
yang populer dari DML adalah SQL (Structured Quey Language).
•
Data Definition Language : bahasa yang digunakan untuk mendefinisikan
table, contoh perintah ddl adalah create, alter, drop, dan lainnya.
2.2
Memanipulasi Data dari Tabel
Pada subbab ini akan dibahas mengenai perintah SQL yang meliputi perintah
SELECT, INSERT, UPDATE dan DELETE.
LSP Telematika Indonesia
46
1. SELECT
Perintah ini digunakan untuk memperoleh nol atau lebih baris dari satu
atau lebih table di basis data. Umumnya keyword yang menyertai perintah
SELECT adalah :

FROM
Keyword untuk memberitahukan asal table yang datanya diakses
juga cara table di gabungkan.

WHERE
Keyword
ini
digunakan
untuk
menentukan
baris
yang
akan
ditampilkan berdasarkan kriteria yang tertera di klausa ini. Dalam
klausa WHERE dapat digunakan oprator logika. Berikut ini adalah
tabel dari operator logika SQL :
Tabel 2.2.1 : Operator Logika dalam SQL
=
<> or != (see
manual)

Equal
Not Equal
<
Less Than
>
Greater Than
<=
Less Than or Equal To
>=
Greater Than or Equal To
GROUP BY
Keyword ini digunakan untuk mengkombinasikan baris dengan
dengan nilai yang berkaitan.

HAVING
Keyword ini digunakan untuk mencari bagian dari kombinasi baris
(kombinasi baris dihasilkan ketika query menggunakan keyword
GROUP BY atau ketika dalam perintah SELECT mengandung
agregasi ) yang dihasilkan.

ORDER BY
Keyword ini digunakan untuk menentukan kolom yang digunakan
untuk mengurutkan data yang dihasilkan.
LSP Telematika Indonesia
47
Contoh penggunaan query SELECT :
Contoh 1 :
SELECT * FROM buku WHERE harga > 100.00 ORDER BY judul
Query ini akan menghasilkan semua baris dari table buku yang memiliki
harga
100.00
dollars.
Baris-baris
yang
dihasilkan
akan
diurutkan
berdasarkan judul buku. Simbol (*) berarti menampilkan semua kolom
dari table yang bersangkutan.
Contoh 2 :
SELECT bk.judul, count(*) AS Pengarang
FROM buku AS bk, pengarang_buku AS ba
WHERE bk.nomor_buku = ba.nomor_buku
GROUP BY bk.judul
Perintah ini menggunakan beberapa table yang digabungkan (join). Setiap
table menggunakan alias yaitu “bk” dan “ba” dengan tujuan menghindari
ambigu ketika melakukan penggabungan table. Selain itu, kolom yang
ditampilkan adalah judul buku dan jumlah pengarang yang diberi alias
Pengarang. Data dari kolom Pengarang diperoleh
dengan perintah
agregasi COUNT. Perintah ini akan menampilkan jumlah pengarang untuk
setiap buku. Berikut ini adalah contoh hasil keluarannya :
Judul
Pengarang
SQL Examples and Guide
3
The Joy of SQL
1
How to use Wikipedia
2
Pitfalls of SQL
1
How SQL Saved my Dog
1
Contoh 3 :
Perhatikan table di bawah ini :
TabelKaryawan
NoKaryawan
Gaji
Bonus
Jabatan
010
75000
15000
Manager
105
65000
15000
Manager
LSP Telematika Indonesia
48
152
60000
15000
Manager
215
60000
12500
Manager
244
50000
12000
Staff
300
45000
10000
Staff
335
40000
10000
Staff
400
32000
7500
Entry-Level
441
28000
7500
Entry-Level
SELECT NoKaryawan
FROM TabelKaryawan
WHERE Gaji >= 50000
Perintah di atas akan menampilkan EmployeeIDNo yang memiliki gaji
sama atau melebihi 50000.
NoKaryawan
-----------------------010
105
152
215
244
Klausa gaji >= 50000 dinamakan kondisi. Kondisi juga bisa diterapkan
kepada kolom dengan tipe data teks.
SELECT EmployeeIDNo
FROM EmployeeStatisicsTable
WHERE Jabatan = ‘Manager’
Query ini akan menampilkan semua nomor karyawan dari manager. Yang
perlu diperhatikan adalah penulisan string dalam klausa WHERE diawali
dan diakhiri dengan symbol (‘).
Contoh 4 :
LSP Telematika Indonesia
49
Operator AND digunakan untuk menggabungkan kondisi. Baris yang
memenuhi semua kondisi yang akan ditampilkan. Sebagai contoh, untuk
menampilkan nomor karyawan staf yang memiliki gaji melebihi 40000
dengan query :
SELECT NoKaryawan
FROM TabelKaryawan
WHERE Gaji > 40000 AND Jabatan = ‘Staf’
Operator OR digunakan untuk menggabungkan 2 (dua) atau lebih kondisi.
Baris yang memenuhi salah satu kondisi atau keduanya yang akan
ditampilkan. Sebagai contoh, untuk menampilkan nomor karyawan yang
memiliki gaji kurang dari 40000 dan bonus kurang dari 10000 dengan
query :
SELECT NoKaryawan
FROM TabelKaryawan
WHERE Gaji < 40000 OR Bonus < 10000
Operator AND dan OR dapat dikombinasikan, contoh :
SELECT NoKaryawan
FROM TabelKaryawan
WHERE Jabatan = ‘Staf’ AND Gaji > 60000 OR Bonus > 12000
Awalnya SQL mencari baris-baris yang memenuhi kondisi gaji > 60000
atau bonus > 12000. Kemudian, dari baris-baris yang dihasilkan dicari lagi
yang memenuhi kondisi jabatan = ‘Staf’. SQL akan mencari baris-baris
yang
memenuhi
kondisi
OR
terlebih
dahulu
kemudian
baris
yang
memenuhi kondisi AND. Agar kondisi AND dapat diproses terlebih dahulu,
gunakan symbol ( dan ) di awal dan di akhir kondisi, contoh :
SELECT NoKaryawan
FROM TabelKaryawan
WHERE Jabatan = ‘Staf’ OR (Gaji > 50000 AND Bonus > 10000)
LSP Telematika Indonesia
50
Query di atas akan menampilkan daftar manager atau siapapun yang
memiliki gaji > 50000 dan keuntungan > 10000.
Contoh 5 :
Operator IN, contoh :
SELECT NoKaryawan
FROM TabelKaryawan
WHERE Jabatan IN (‘Manager’, ‘Staf’)
Query di atas akan menampilkan data-data nomor karyawan dari manager
dan staf.
Operator BETWEEN dapat digunakan untuk menampilkan data-data yang
memenuhi kisaran nilai tertentu, contoh :
SELECT NoKaryawan
FROM TabelKaryawan
WHERE Gaji BETWEEN 30000 AND 50000
Query diatas akan menampilkan baris-baris yang memiliki gaji lebih besar
atau sama dengan 30000 tetapi lebih kecil atau sama dengan 50000.
Untuk memperoleh data-data yang tidak berada dalam kisaran nilai
tertentu, gunakan operator NOT. Contoh :
SELECT NoKaryawan
FROM TabelKaryawan
WHERE Gaji NOT BETWEEN 30000 AND 50000
Opeator NOT IN dapat digunakan untuk mendapatkan baris yang tidak
berada dalam daftar IN.
Contoh 6 :
Perhatikan TabelKaryawan, seandainya kita ingin mendapatkan daftar
orang-orang dengan nama belakang yang diawali dengan huruf L, maka
query yang bisa digunakan :
LSP Telematika Indonesia
51
SELECT NoKaryawan
FROM TabelKaryawan
WHERE NamaAkhir LIKE ‘L%’
Simbol (%) melambangkan kemungkinan karakter (angka, huruf dan
tanda baca) atau sekumpulan karakter yang muncul setelah huruf “L”.
Untuk menampilkan nama yang diakhiri dengan huruf “L”, gunakan ‘%L’
atau jika kita ingin huruf “L” berada ditengah nama, dapat digunakan
‘%L%’.
2. Perintah INSERT
Perintah ini digunakan untuk memasukkan nol atau lebih baris ke table
yang telah tersedia. Contoh :
INSERT INTO tabelSaya (kolomA, kolomB, kolomC) values (‘nilaiA’,
‘nilaiB’, ‘nilaiC’)
3. Perintah UPDATE
Perintah ini digunakan untuk mengubah nilai sekumpulan baris dari table
yang tersedia. Contoh :
UPDATE tabelSaya set kolomA = ‘updateA’, kolomB = ‘updateB’
WHERE kolomC = ‘C’
4. Perintah DELETE
Perintah ini digunakan untuk menghapus nol atau lebih baris yang ada dari
table. Contoh :
DELETE tabelSaya WHERE kolomA = ‘A’
2.3 Menggabungkan Tabel
Umumnya semua data yang ingin diperoleh tidak berada dalam 1 (satu) table,
untuk memperoleh data-data yang berada dalam table yang berbeda, kita dapat
melakukan penggabungan table (join) terlebih dahulu. Perhatikan table-tabel di
bawah ini :
PemilikBrgAntik
NoPem NmAkhirPem NmAwalPem
01
Jones
Bill
LSP Telematika Indonesia
52
02
Smith
Bob
15
Lawson
Patricia
21
Akins
Jane
50
Fowler
Sam
BarangAntik
Pesanan
NoPenj NoPemb Barang
NoPem Pes_Pem
01
50
Tempat Tidur
02
Meja
02
15
Meja
02
Meja Kecil
15
02
Kursi
21
Kursi
21
50
Cermin
15
Cermin
50
01
Meja Kecil
01
21
Lemari
02
21
Meja kopi
15
50
Kursi
01
15
Kotak Perhiasan
02
21
Keramik
21
02
Tempat Buku
50
01
Pot
Seandainya kita ingin mendapatkan nama-nama orang yang membeli kursi
dengan
cara
menghubungkan
orang-orang
yang
membeli
kursi
di
table
BarangAntiks dengan nama di table PemilikBrgAntik melalui kolom NoPem yang
menghubungkan kedua tabel. Contoh query:
SELECT NmAkhirPem, NmAwalPem
FROM PemilikBrgAntik, BarangAntiks
WHERE NoPenj = NoPem AND Barang= 'Kursi'
Klausa FROM berisi table-tabel yang akan digabungkan. Klausa Barang= 'Kursi'
untuk mendapatkan pembeli kursi, sedangkan klausa NoPenj= NoPem merupakan
LSP Telematika Indonesia
53
kriteria
penggabungan
yang
menyatakan
bahwa
baris-baris
yang
akan
digabungkan memiliki nilai NoPenj dan NoPem yang sama.
Untuk menghilangkan ambiguitas dari nama table- nama kolom dapat digunakan
symbol (.). Contoh query :
SELECT PemilikBrgAntik .NmAkhirPem, PemilikBrgAntik .NmAwalPem
FROM PemilikBrgAntik, BarangAntiks
WHERE BarangAntiks.NoPenj= PemilikBrgAntik.NoPem AND
BarangaAntiks.Barang= 'Kursi'
2.4 Menghilangkan Record yang Sama
Seandainya kita ingin mendaftarkan ID dan nama dari orang-orang yang telah
menjual barang antik. Tentunya kita menginginkan daftar dimana nama penjual
tidak muncul lebih dari sekali (kita tidak perlu tahu jumlah barang antik yang
dijualnya hanya fakta bahwa orang tersebut telah menjual barang). Dengan
demikian SQL harus menghilangkan baris-baris yang sama, dan hanya perlu
mendaftar
setiap
orang
hanya
sekali.
Untuk
melakukan
hal
ini
dengan
menggunakan keyword DISTINCT.
Pertama, kita perlu melakukan penggabungan dengan table PemilikBrgAntik
untuk
memperoleh
data
nama
awal
dan
nama
akhir,
kemudian
untuk
menghilangkan baris yang sama kita gunakan keyword DISTINCT. Contoh query :
SELECT DISTINCT NoPenj, NmAkhirPem, NmAwalPem
FROM BarangAntiks, PemilikBrgAntik
WHERE NoPenj = NoPem
ORDER BY NmAkhirPem, NmAwalPem, NoPem
Karena tiap penjual telah berhasil menjual sebuah barang maka kita akan
mendapatkan daftar semua pemilik yang terurut berdasarkan nama akhir.
2.5
Subquery
Perhatikan query di bawah ini yang akan menampilkan daftar pemilik yang telah
membuat pesanan serta pesanannya.
LSP Telematika Indonesia
54
SELECT Own.NmAkhirPem Nama Akhir, Ord.Pes_Pem Barang Pesanan
FROM Pesanan ord, PemilikBrgAntik own
WHERE Ord.NoPem= own.NoPem
AND Ord.Pes_pem in
(SELECT Barang FROM BarangAntik);
Hasil keluarannya adalah :
Nama Akhir
Barang Pesanan
---------
------------
Smith
Meja
Smith
Meja kecil
Akins
Kursi
Lawson
Cermin
Ada beberapa hal yang harus diperhatikan dari query di atas :

“Nama Akhir” dan “Barang Pesanan” akan menjadi judul kolom

OWN
dan
ORD
adalah
alias
dari table
di
klausa
FROM.
Dengan
menggunakan symbol (.) maka SQL diberitahukan bahwa kolom NoPem
tidak dari table yang sama.

Subquery dijalankan terlebih dahulu dan menghasilkan daftar Barang yang
ada di table BarangAntik kemudian table Pesanam dan PemilikBrgAntik
digabungkan dan dari table hasil penggabungan dicari nilai Pes_Pem
berupa daftar Barang dari table BarangAntik.
2.6
Data Definition Language (DDL)
DDL merupakan perintah untuk memanipulasi tabel. Perintah dari DDL terdiri
dari:
•
CREATE
: Membuat tabel dalam basis data
•
DROP
: Menghapus tabel dalam basis data
•
ALTER
: Memodifikasi tabel yang telah ada
Contoh perintah CREATE :
LSP Telematika Indonesia
55
CREATE TABLE tabelSaya (
kolom1
INT
UNSIGNED,
kolom2
VARCHAR (50),
PRIMARY KEY (kolom1, kolom2)
)
kolom1 dan kolom2 adalah nama kolom dari data yang akan disimpan. Int dan
Varchar adalah tipe data. Primary Key digunakan untuk menentukan kolom yang
menjadi primary key di tabel tersebut.
Sebelum membuat tabel, kita harus menentukan nama tabel, data-data (kolom)
apa saja yang akan disimpan dalam tabel tersebut beserta tipe data. Misalnya
kita hendak menyimpan data transaksi penjualan, maka data-data yang
diperlukan adalah nomor transaksi dengan tipe data int, tanggal transaksi dengan
tipe data date, besar transaksi dengan tipe data int dan lainnya. Kemudian datadata tersebut disimpan dalam tabel yang dinamakan transaksi.
2.7
View
Data-data hasil query dapat disimpan ke sebuah tabel virtual yaitu view, yang
selanjutnya dapat digunakan di query yang lain serta diberi nama sesuai dengan
nama view. Contoh :
CREATE VIEW ANTVIEW AS SELECT Pes_Pem FROM Pesanan;
Hasil query “Select Pes_Pem From Pesanan” disimpan ke sebuah view yang
bernama ANTVIEW. Perhatikan kode berikut ini :
SELECT NoPenj
FROM BarangAntik, ANTVIEW
WHERE Pes_Pem = Barang;
Query di atas akan menampilkan nomor pernjual dari tabel BarangAntik dimana
pada tabel ini ada barang yang sama seperti barang yang ada di ANTVIEW.
Ketika view diakses maka query dari
view tersebut akan dijalankan kembali.
View dapat digunakan untuk menyederhanakan query.
LSP Telematika Indonesia
56
2.8
Stored Procedure dan Trigger
Kadangkala ada query-query yang sering digunakan dan hanya mengganti nilai
yang ada di klausa WHERE. Contoh, untuk mendapatkan data tagihan akhir
bulan, query yang digunakan akan sama hanya berbeda di nilai bulan saja. Untuk
memenuhi keperluan tersebut maka DBMS menyediakan stored procedures yang
adalah sekumpulan query yang disimpan ke sebuah file yang kemudian dapat
dipanggil kembali dengan perintah tertentu. Contoh :
EXECUTE TopikSama @id_ta = '31005', @login = '1202000745'
Perintah diatas akan menjalankan stored procedure yang bernama “TopikSama”
dengan masukan nilai id_ta dan login yang telah ditentukan.
Jenis lain dari stored procedure adalah trigger. Trigger akan dijalankan oleh
DBMS jika kondisi yang ditentukan telah terpenuhi. Contohnya trigger dijalankan
ketika jumlah barang_tersedia lebih kecil dari barang_pesanan. Berikut ini contoh
trigger dalam basis data SQL Server 2000 :
Gambar 2.8.1 Trigger di SQL Server 2000
LSP Telematika Indonesia
57
2.9 Fungsi Aggregasi
Fungsi Aggregasi yang umum digunakan adalah :
•
SUM()
Fungsi untuk menjumlahkan nilai dari baris yang ditentukan
•
AVG()
Fungsi untuk mencari rata-rata dari kolom tertentu
•
MAX()
Fungsi untuk mencari nilai maksimum dari kolom yang ditentukan
•
MIN()
Fungsi untuk mencari nilai minimum dari kolom yang ditentukan
•
COUNT()
Menghitung jumlah baris yang memenuhi kondisi tertentu
Berikut ini adalah contoh-contoh query dengan fungsi agregasi :
1. Query untuk mencari jumlah dan rata-rata gaji seluruh karyawan
SELECT SUM(Gaji), AVG(Gaji)
FROM TabelKaryawan;
2. Query untuk mencari nilai bonus manajer yang paling kecil
SELECT MIN(Bonus)
FROM TabelKaryawan
WHERE Jabatan = 'Manager';
3. Query untuk menghitung jumlah staf
SELECT COUNT(*)
FROM TabelKaryawan
WHERE Jabatan = 'Staff';
Soal Latihan :
1. Keyword dalam klausa WHERE untuk mengurutkan adalah
a. Having
b. Order By
c. Subquery
d. Insert
2. Keyword untuk menghilangkan baris yang sama adalah
a. Group By
b. Select
LSP Telematika Indonesia
58
c. View
d. Distinct
Soal Praktek
Untuk soal nomor 3 hingga 5, perhatikan tabel dibawah ini :
Nama Tabel : DEPT
Nama Tabel : EMP
3. Buatlah query yang menampilkan nama, NIP dan gaji yang memiliki gaji
diantara 1200 hingga 1400 .
4. Buatlah query yang menampilkan daftar gaji tahunan dari manager
5. Buatlah query untuk menampilkan NIP yang memiliki gaji paling tinggi dan
paling rendah.
LSP Telematika Indonesia
59
BAB 3 PHP
Tujuan Instruksional Umum :
1. Siswa dapat menjelaskan pemrograman dengan PHP
2. Siswa dapat menjelaskan peranan web dinamis
Tujuan Instruksional khusus :
1. Siswa dapat membuat program dengan PHP
2. Siswa dapat membuat form
3. Siswa dapat melakukan debugging
4. Siswa dapat membuat web dinamis
Materi yang dibahas pada bab ini memenuhi :
1. TIK.PR02.021.01 Menerapkan basis data
2. TIK.PR02.028.01 Menerapkan dasar-dasar pembuatan web statik lanjut
3. TIK.PR04.003.01 Membuat halaman web dinamis lanjut
4. TIK.PR04.006.01 Menerapkan dasar validasi unjuk kerja situs web
5. TIK.PR04.007.01 Mengintegrasikan sebuah basis data dengan sebuah
situs web
6. TIK.PR08.009.01
Membuat program aplikasi web berbasis PHP
Berikut ini adalah gambaran umum dari materi pada bab ini :
LSP Telematika Indonesia
60
3.1 Pengenalan PHP
PHP merupakan bahasa berbentuk skrip yang ditempatkan dalam server dan
diproses di server pula. Hasilnyalah yang akan dikirim ke client, tempat
pengguna memakai web browser. Secara khusus, PHP dirancang untuk
membentuk web dinamis. Hal ini berarti PHP dapat membentuk suatu
tampilan berdasarkan permintaan terkini. Misalnya, Anda dapat menampilkan
isi database ke halaman web. Pada prinsipnya, PHP memiliki fungsi yang
sama dengan skrip-skrip seperti ASP, Cold Fusion, ataupun Perl.
Kelahiran PHP pada tahun 1994, bermula saat Rasmus Lerdorf membuat
sejumlah skrip Perl yang dapat mengamati siapa saja yang melihat-lihat
daftar riwayat hidupnya. Skrip-skrip ini selanjutnya dikemas menjadi tool
yang disebut “Personal Home Page”. Paket inilah yang menjadi cikal bakal
PHP. Pada tahun 1995, Rasmus menciptakan PHP/F1 Versi 2. Pada versi inilah
pemrograman dapat menempelkan kode terstruktur di dalam tag HTML. Hal
yang menarik adalah kode PHP juga dapat berkomunikasi dengan database
dan melakukan perhitungan-perhitungan yang kompleks.
Pada saat ini, PHP cukup populer sebagai piranti pemrograman web, terutama
di lingkungan Linux. Meskipun demikian, PHP sebenarnya juga dapat
berfungsi
pada
server-server
yang
berbasis
UNIX,
Windows
NT,
dan
Macintosh.
Pada awalnya, PHP dirancang untuk diintegrasikan dengan web server
Apache. Namun, belakangan PHP juga dapat bekerja dengan web server
seperti PWS (Personal Web Server), IIS (Internet Information Server), dan
Xitami. Untuk mencoba PHP, Anda tidak perlu menggunakan komputer
berkelas
server.
Dengan
menggunakan
komputer
biasa,
Anda
dapat
mempelajari dan mempraktekkan PHP. PHP bersifat bebas pakai sehingga
Anda tidak perlu membayar apapun untuk menggunakan perangkat lunak ini.
Anda dapat men-download-nya melalui situs www.php.net. Untuk versi
Windows, Anda dapat memperoleh kode binernya sedangkan untuk versi
Linux Anda dapat memperoleh kode sumbernya secara lengkap.
LSP Telematika Indonesia
61
3.2. Penginstalasian PHP 5
3.2.1. Meng-install PHP pada Windows
Pada Windows, Anda perlu memulai penginstalasian dengan cara mendownload
kode
biner
PHP
versi
5.
Pergunakan
installer
.msi
untuk
memudahkan Anda dan tentukan direktori penginstalasian pada c:\php5.
Dengan adanya instalasi PHP, Anda dapat menjalankan interpreter PHP dari
sebuah Windows DOS prompt:
C:\> php -v
PHP 5.0.4 (cli) (built: Mar 31 2005 02:45:00)
Copyright
© 1997-2004 The PHP Group
Zend Engine v2.0.4-dev, Copyright (c) 1998-2004 Zend Technologies
Jika executable PHP tidak ditemukan, Anda perlu menambahkan c:\php5\bin
pada path Anda. Pergunakan tab Advanced pada Control Panel dan klik pada
tombol Environment Variables. Dari sana, editlah Path Variable, tambahkan
c:\php5\bin pada path yang ada. Anda perlu menutup Command Prompt
Windows lalu membuka Command Prompt yang baru untuk memastikan
adanya hasil dari perubahan yang telah dibuat.
Anda harus memastikan pula bahwa PHP telah ter-install dan terintegrasikan
dengan web server anda. Pada Windows, Anda memiliki dua pilihan untuk
pengintegrasian tersebut, yaitu menggunakan web server Apache atau IIS
(Internet Information Service). Apapun pilihannya, Anda perlu meng-copy file
php.ini
pada
direktori
Windows,
c:\windows.
Editlah
file
c:\windows\php.ini dan ubahlah baris extension_dir agar terbaca sebagai
berikut :
extension_dir = "c:\php5\ext"
Selanjutnya, baris seperti berikut ini :
extension=php_mysql.dll
agar dapat mengakses database MySQL.
LSP Telematika Indonesia
62
Sekarang kembali pada site PHP www.php.net dan download-lah koleksi dari
modul-modul
PECL.
Simpanlah
semua
file
DDL
ke
dalam
direktori
c:\php5\ext. Semua ekstensi ini dibutuhkan jika Anda ingin mengakses
database SQL atau jika Anda ingin menggunakan fungsi-fungsi grafika.
3.2.1.1. Meng-install PHP dengan Web Server Apache
Kunjungilah web site Apache www.apache.org dan download-lah Apache versi
1.3 yang telah precompiled untuk Windows. Ia akan muncul sebagai sebuah
installer MSI. Setelah Apache ter-install maka langkah selanjutnya adalah
menetapkan file http.conf di dalam direktori Apache conf (c:\Program
Group\Apache\conf jika Anda meng-install Apache pada
Files\Apache
lokasi default).
Tambahkan baris berikut ini pada akhir dari file httpd.conf :
LoadModule php5_module "c:/php5/php5apache.dll"
AddModule mod_php5.c
AddType application/x-httpd-php .php
AddType application/x-httpd-php-source .phps
Berikutnya, mulailah server Apache dengan menjalankan apache.exe :
C:\Program Files\Apache Group\Apache> apache
Apache/1.3.33 (Win32) PHP/5.0.4 running…
Direktori
dari
(c:\Program
dokumen-dokumen
Files\Apache
pada
instalasi
ini
adalah
htdocs
Group\Apache\htdocs). Untuk mengetesnya,
buatlah sebuah file test.php pada direktori htdocs dan tulis kode berikut ini
di dalam file tersebut :
<?php
phpinfo();
?>
Pergunakanlah web browser Anda untuk melihat halaman, Anda akan
menemukan halaman yang tampilannya seperti Gambar 3.2.1.1.1 berikut ini :
LSP Telematika Indonesia
63
Gambar 3.2.1.1.1 Halaman Pengetesan PHP pada instalasi Apache/Windows
Didalam file PHP info terdapat keterangan versi PHP yang di-install. Untuk
melihat versi PHP, gunakan fungsi phpversion.
3.2.1.2. Meng-install PHP dengan Web Server IIS
PHP dapat di-install di versi PWS/IIS 3, PWS 4 atau yang terbaru dan IIS 4
atau yang terbaru. Setelah meng-install PHP pada direktori c:\php5, Anda
dapat mengintegrasikan PHP ke dalam IIS melalui php5isapi.dll. Mulailah
dengan membuka control panel IIS. Kemudian buatlah sebuah direktori
virtual seperti yang ditunjukkan oleh Gambar 3.2.1.2.1 berikut ini :
Gambar 3.2.1.2.1 Membuat sebuah direktori virtual
LSP Telematika Indonesia
64
Pastikanlah Anda telah menentukan execute permission secara benar, seperti
yang terlihat pada Gambar 3.2.1.2.2 berikut :
Gambar 3.2.1.2.3 Menentukan Execute Permission dari direktori virtual
Selanjutnya,
klik-kanan
pada
direktori
virtual
dan
pilihlah
Properties.
Kemudian pada Properties Dialog, klik pada tombol Configuration. Hal ini akan
memunculkan
Application
Mappings
Dialog,
dimana
Anda
dapat
mengasosiasikan ekstensi .php dengan php5isapi.dll. Tampilan dialog
tersebut ditunjukkan pada Gambar 3.2.1.2.4 berikut ini :
Gambar 3.2.1.2.4 Application Mapping Dialog
LSP Telematika Indonesia
65
Klik pada tombol Add untuk membuat sebuah mapping baru dan tetapkan
Executable pada c:\php5\php5isapi.dll.
Tentukan Extension menjadi .php, seperti yang terlihat pada Gambar
3.2.1.2.5 berikut ini :
Gambar 3.2.1.2.5 Mapping settings untuk PHP 5
Klik OK, kemudian lakukan navigasi ke direktori dokumen yang Anda
tentukan saat membuat direktori virtual. Buatlah sebuah file yang bernama
test.php dengan isi sebagai berikut :
<?php
phpinfo();
?>
3.2.2 Meng-install PHP pada Linux
Proses penginstalasian PHP pada Linux sesungguhnya dimulai dengan
menentukan apakah PHP telah ter-install sebelumnya. Pertama-tama Anda
sebaiknya memeriksa keberadaan web server Apache pada instalasi Anda.
Apakah mesin menampilkan halaman? Jika tidak, periksalah keberadaan
Apache httpd executable :
my-host$ find / -name httpd
LSP Telematika Indonesia
66
Jika Anda menemukan kode biner Apache, pastikanlah ia telah berjalan
sebagai bagian dari proses startup mesin Anda. Jika Apache tidak ter-install
maka meng-install web server merupakan langkah awal Anda dalam
penginstalasian PHP. Kunjungilah web site www.apache.org lalu download dan
install-lah server tersebut.
Sekali Apache ter-install, maka langkah selanjutnya adalah memeriksa
keberadaan instalasi PHP. Buatlah sebuah file bernama index.php dan
tempatkanlah di dalam direktori dokumen Apache. File tersebut harus
mengandung kode berikut ini :
<?php
phpinfo();
?>
Lihatlah halaman dari file index.php melalui web browser. Jika Anda
menemukan halaman seperti yang ditunjukkan oleh Gambar 1.6 maka berarti
instalasi PHP telah bekerja. Namun, jika Anda melihat hanya teks dari file
index.php maka PHP belum ter-install atau tidak aktif.
Periksalah file konfigurasi httpd.conf Apache Anda. Jika Anda melihat baris
seperti berikut ini:
# LoadModule php4_module libexec/httpd/libphp4.so
aktifkan baris kode tersebut dengan cara menghilangkan simbol hash (#)
yang terdapat pada awal baris tersebut. Jika file tidak mengandung baris yang
relevan dengan PHP maka berarti Anda harus meng-install PHP dari
sumbernya.
Meng-install PHP dari sumbernya berarti men-download file .tgz dari
www.php.net. Ikutilah instruksi penginstalasian yang terdapat pada situs
tersebut. Berikut ini contoh penginstalan pada PHP manual :
1. gunzip apache_1.3.x.tar.gz
2. tar xvf apache_1.3.x.tar
3. gunzip php-x.x.x.tar.gz
4. tar xvf php-x.x.x.tar
LSP Telematika Indonesia
67
5. cd apache_1.3.x
6. ./configure --prefix=/www
7. cd ../php-x.x.x
8. ./configure --with-mysql --with-apache=../apache_1.3.x --enable-trackvars
9. make
10. make install
11. cd ../apache_1.3.x
12. ./configure --activate-module=src/modules/php4/libphp4.a
13. make
14. make install
15. cd ../php-x.x.x
16. cp php.ini-dist /usr/local/lib/php.ini
17. Edit your httpd.conf or srm.conf file and add:
AddType application/x-httpd-php .php
18. restart Apache server.
Dengan PHP yang telah ter-install, maka seharusnya Anda dapat melakukan
navigasi terhadap halaman index.php yang telah Anda buat sebelumnya dan
memperoleh output seperti yang ditunjukkan oleh Gambar 3.2.2.1 berikut :
Gambar 3.2.2.1 Halaman pengetesan setelah meng-install PHP 5 pada Linux.
LSP Telematika Indonesia
68
3.3. Variabel, Tipe Data, dan Operator
3.3.1. Variabel
Anda dapat membuat variabel-variabel untuk merepresentasikan data.
Sebagai contoh, variabel berikut ini menyimpan sebuah nilai pajak penjualan :
$pajak = 0.0875;
Variabel berikut ini menyimpan sebuah perintah SQL :
$sql = "SELECT * FROM TableSaya";
Anda dapat menunjuk nilai dari variabel lain saat menentukan nilai dari
sebuah variabel baru seperti contoh berikut :
$total_pajak = $pajak_jual * $sub_total;
Berikut ini adalah beberapa aturan dalam penamaan variabel :
•
Nama variabel dimulai dengan sebuah tanda Dollar
•
Nama variabel tidak dapat dimulai dengan sebuah karakter numerik
•
Nama variabel dapat mengandung angka atau underscore
•
Nama varibel bersifat case-sensitive (huruf kecil dan huruf kapital
dibedakan)
PHP menyediakan beberapa variabel automatic global yang artinya variabel ini
dapat diakses dimanapun tanpa harus didefinisikan global. Variabel-variabel
ini adalah :
1. Variable Environment ($_ENV)
2. Variabel cookies ($_COOKIES)
3. Variabel HTTP GET ($_GET)
4. Variabel HTTP POST ($_POST)
5. Variabel HTTP upload variable ($_FILES)
6. Variabel Request ($_REQUEST)
7. Variable Session ($_SESSION)
LSP Telematika Indonesia
69
3.3.2. Tipe Data
Terdapat tiga tipe data umum pada PHP yang dapat digunakan untuk
menentukan suatu variabel, yaitu float, integer, dan string.
Float
Masing-masing dari variabel berikut ini adalah bertipe float atau disebut juga
floating-point number. Float dikenal sebagai nomor yang mengandung angka
desimal.
$a = 1.552;
$b = 0.964;
$pajak = 0.875;
Integer
Integer adalah semua bilangan bulat positif ataupun negatif dan nol. Masingmasing variabel berikut ini bertipe data integer :
$a = 15;
$b = -521;
String
Serangkaian karakter yang terkelompokkan di dalam tanda kutip ganda
termasuk ke dalam tipe data string. Masing-masing variabel berikut ini bertipe
data string :
$a - "Saya String.";
$b = "<P>Buku ini <strong>bagus</strong>!";
Anda juga dapat menunjuk variabel lain di dalam string Anda, yang akan
diganti nilainya saat skrip dijalankan. Sebagai contoh adalah sebagai berikut :
$num = 57; // sebuah integer
$my_string = "Saya membaca buku ini $num kali!"; // sebuah
string
LSP Telematika Indonesia
70
Saat skrip dijalankan maka $my_string akan menjadi "Saya membaca buku
ini 57 kali!"
Selanjutnya kita akan membahas beberapa fungsi untuk string, diantaranya
adalah :
1. Untuk
mengakses
karakter
dari
sebuah
string
dengan
cara
$string{indeks}. Contoh :
$str = “Hari ini indah”;
$ketiga = $str[3]
Keluaran dari variabel $ketiga adalah indeks ke 3 dari string str, yaitu
“i”. Indeks dimulai dari 0 (nol).
2. parse_str() untuk mengubah string menjadi variabel. Contoh :
<?php
$str = "satu=nilai&arr[]=foo+bar&arr[]=baz";
parse_str($str);
echo $nilai; // nilai
echo $arr[0]; // foo bar
echo $arr[1]; // baz
parse_str($str, $output);
echo $output['satu']; // nilai
echo $output['arr'][0]; // foo bar
echo $output['arr'][1]; // baz
?>
3. strcmp(str1, str2) digunakan untuk membandingkan 2 (dua) string.
Perbandingan fungsi ini membedakan antara huruf besar dan huruf
kecil.
4. strcasecmp(str1, str2) digunakan untuk membandingkan 2(dua) string
tanpa mempertimbangkan jenis huruf dari string yang dibandingkan.
5. explode(“pemisah”, $str) menghasilkan array string dimana nilai array
tersebut adalah substring dari $str yang dipisahkan dengan “pemisah”.
Contoh :
$pizza = "piece1 piece2 piece3 piece4 piece5 piece6";
$pieces = explode(" ", $pizza);
$pieces adalah array string yang nilainya adalah pieces1, pieces2,
pieces3, pieces4, pieces5, pieces6.
LSP Telematika Indonesia
71
6. str_repeat(str, jml_pengulangan) akan menghasilkan keluaran berupa
pengulangan str sebanyak jml_pengulangan. Contoh : $str = “la”.
Maka str_repeat($str, 5) akan menghasilkan “lalalalala”.
7. stripslashes(str) akan menghilangkan simbol (\) sekali.
8. chr(kode_ascii) akan menambahkan karakter yang direpresentasikan
dengan kode_ascii di akhir string.
9. addslashes(str)
akan
menghasilkan
keluaran
string
yang
telah
ditambahkan dengan satu simbol (\) didepannya.
10. substr(str, pos_awal, pjg)
akan mengembalikan bagian dari string
yang dimulai dari indeks pos_awal sepanjang pjg. Contoh :
$rest = substr("abcdef", 1);
// keluaran "bcdef"
11. substr_compare()
12. strrev(str) akan membalikkan susunan string
13. strstr(str,krk) akan menghasilkan keluaran berupa bagian dari str yang
dimulai dari karakter “krk” hingga akhir string. String mengandung
karakter “krk”. Contoh :
$email = '[email protected]';
$domain = strstr($email, '@');
print $domain; // keluaran @example.com
14. strlen(str) akan menghasilkan keluaran berupa panjang string atau
jumlah karakter dalam string.
15. ord(str) akan menghasilkan output berupa kode ascii dari string.
16. ltrim(str) akan menghilangkan karakter kosong yang berada di awal
string.
17. echo() untuk menghasilkan satu atau lebih string.
Array
Array merupakan sekumpulan variabel yang terkandung sebagai sebuah grup.
Pada contoh berikut ini $Warna adalah sebuah array yang mengandung stringstring yang merepresentasikan elemen array. Elemen array bisa berupa string
atau integer. Jumlah elemen array dapat dihitung dengan menggunakan
fungsi count(). Pada contoh ini array-nya berisi nama-nama warna dengan
elemen array berupa integer atau string :
$Warna[0] = "merah"; atau $Warna[“satu”] = “merah”;
LSP Telematika Indonesia
72
$Warna[1] = "biru"; atau $Warna[“dua”] = “biru”;
$Warna[2] = "hitam"; atau $Warna[“tiga”] = “hitam”;
$Warna[3] = "putih"; atau $Warna[“empat”] = “putih”;
kode echo $Warna[2] akan mengembalikan nilai dari array dengan elemen 2.
Demikian juga dengan kode $Warna[“dua”] akan mengembalikan nilai dari
array dengan elemen “dua”. Index array dimulai dengan 0 (nol) sebagai posisi
awal dari isi elemen pertama.
Selain kode di atas, cara lain untuk membuat array dengan menggunakan
fungsi array(), contoh :
$Warna = array('merah', 'biru', 'hitam', 'putih');
Kode ini sama dengan kode definisi array sebelumnya dengan elemen array
berupa integer. Fungsi ini juga dapat digunakan untuk membuat array 2
dimensi, perhatikan contoh di bawah ini :
$2Dim = array (
"buah" => array ("a"=>"jeruk", "b"=>"pisang", "c"=>"apel"),
"angka" => array (1, 2, 3, 4, 5, 6),
);
(Elemen array) => (nilai array).
Kode echo $2Dim[”buah”][”a”] akan menampilkan string “jeruk”.
Nilai
dalam
array
dapat
di
urutkan
dengan
menggunakan
fungsi
diantaranya sebagai berikut :
•
sort(array) : mengurutkan nilai array
•
krsort(array) : mengurutkan array secara terbalik berdasarkan
elemen array
•
ksort(array) : mengurutkan array berdasarkan elemen array
•
rsort(array) : mengurutkan nilai array secara terbalik
Selanjutnya kita akan mempelajari berbagai fungsi array yang disediakan:
•
array_change_key_case(array, CASE_LOWER/CASE_UPPER) untuk
mengubah jenis huruf dari elemen array menjadi huruf besar
semua atau huruf kecil semua.
•
array_chunk(array, jml) untuk membagi array menjadi beberapa
array lagi dengan jumlah elemen yang ditentukan.
LSP Telematika Indonesia
73
•
array_count_values(array) untuk menghitung jumlah tiap nilai
array.
•
array_diff(array1, array2) untuk menghasilkan array dengan nilai
array1 yang tidak berada di array2. Contoh :
$array1 = array ("a" => "hijau", "merah", "biru",
"merah");
$array2 = array ("b" => "hijau", "kuning", "merah");
$hsl = array_diff ($array1, $array2);
Nilai $hsl adalah “biru”.
•
array_merge(array1, array2) untuk menggabungkan array
•
array_shift(array1) untuk menghilangkan nilai dari elemen array
terkecil. Contoh :
$stack = array ("jeruk", "pisang", "apel",
"raspberry");
$buah = array_shift ($stack);
Isi array $buah adalah “pisang”, “apel” dan “raspberry”.
•
array_search(nilai, array) untuk mencari nilai dalam array dan
mengembalikan elemen array dari nilai tersebut.
•
array_rand(array) untuk mengambil nilai dalam array secara acak
•
array_fill(elemen_awal, jml, nilai) untuk mengisi array dari elemen
awal sebanyak jml dengan nilai tertentu. Contoh :
$a = array_fill(5, 6, 'pisang');
print_r($a);
Nilai $a :
Array
(
[5]
[6]
[7]
[8]
[9]
[10]
)
=>
=>
=>
=>
=>
=>
pisang
pisang
pisang
pisang
pisang
pisang
•
array_unique(array) akan menghasilkan array tanpa nilai duplikasi.
•
array_unshift(array, [nilai,..]) untuk memasukkan nilai di akhir
array. Contoh :
$queue = array ("orange", "banana");
LSP Telematika Indonesia
74
array_unshift ($queue, "apple", "raspberry");
Akan menghasilkan :
Array
(
[0]
[1]
[2]
[3]
)
=>
=>
=>
=>
apple
raspberry
orange
banana
•
in_array(nilai, array) untuk mencari nilai dalam array
•
array_push(array, $var) untuk meletakkan variable baru di akhir
array
3.3.3. Operator
Operator Penugasan
Salah satu operator penugasan yang sudah Anda kenal adalah operator =
yang digunakan untuk memberikan nilai ke suatu variabel. Berikut ini
merupakan beberapa operator penugasan lainnya yang tersedia dalam PHP :
Tabel 3.3.3.1 : Operator Penugasan
No.
Operator
Kegunaan
Contoh
1
+=
Menambahkan variabel di sisi kiri dengan
X += 2; identik
nilai di sisi kanan.
dengan X = X +
2;
2
-=
Mengurangi variabel di sisi kiri dengan
X -= 2; identik
nilai di sisi kanan.
dengan X = X –
2;
3
4
5
/=
%=
.=
Membagi variabel di sisi kiri dengan nilai
X /= 2; identik
di sisi kanan.
dengan X = X / 2;
Memperoleh sisa pembagian antara
X %= 2; identik
variabel di sisi kiri dengan nilai di sisi
dengan X = X %
kanan.
2;
Melakukan operasi konkatenasi terhadap
X .= “A”; identik
variabel di sisi kiri dengan nilai di sisi
dengan X = X .
kanan.
“A”;
LSP Telematika Indonesia
75
Operator Aritmatika
Operator aritmatika merupakan operator yang biasa digunakan dalam operasi
matematika. Tabel 3.3.3.2 memperlihatkan daftar operator aritmatika pada
PHP.
Tabel 3.3.3.2 : Operator Aritmatika
No.
Operator
Kegunaan
1
+
Penjumlahan
2
-
Pengurangan
3
*
Perkalian
4
/
Pembagian
5
%
Sisa pembagian (modulus)
Operator Pembandingan
Operator pembanding atau dikenal juga sebagai operator relasional adalah
operator yang digunakan untuk melakukan pembandingan dua buah operand
dan menghasilkan nilai benar atau salah.
Tabel 3.3.3.3 : Operator Pembandingan
No.
Operator
Kegunaan
1
==
Sama dengan
2
!= atau <>
Tidak sama dengan
3
>
Lebih dari
4
<
Kurang dari
5
>=
Lebih dari atau sama dengan
6
<=
Kurang dari atau sama
dengan
Operator Logika
Operator logika biasa digunakan untuk menggabungkan kondisi berganda dan
menghasilkan sebuah ekspresi yang bernilai benar (nilai 1) atau salah (nilai
0).
LSP Telematika Indonesia
76
Tabel 3.3.3.4 : Operator Logika
No.
Operator
Kegunaan
1
&&
AND
2
||
OR
3
^
XOR
4
!
NOT
3.4 Pemrograman PHP
3.4.1 Inisialisasi Variabel
Berbeda dengan bahasa seperti C atau Pascal, PHP tidak memerlukan
pendeklarasian variabel. Anda dapat memberikan nilai ke suatu variabel
kapan saja, bahkan bisa saja Anda mengubah tipe nilainya. Berikut ini adalah
contoh skrip yang menunjukkan pengubahan tipe nilai dari suatu variabel :
<HTML>
<HEAD>
<TITLE> Contoh Pengubahan Tipe Variabel </TITLE>
</HEAD>
<BODY>
<?php
$gaji = 2000000;
printf (“Gaji semula = %d <BR>\n”, $gaji); // tipe data Double
$gaji = “Tiga Juta Rupiah”;
printf (“Gaji semula = %s <BR>\n”, $gaji);// tipe data String
?>
</BODY>
</HTML>
Suatu variabel dapat berlaku secara lokal atau global, perbedaannya terletak
pada kemunculannya di dalam konteks suatu skrip yang kita buat. Secara
default, variabel-variabel PHP dapat digunakan hanya oleh skrip dimana
mereka berada. Suatu skrip tidak dapat mencapai bagian dalam suatu skrip
lainnya dan menggunakan variabel yang ada di dalamnya, kecuali jika Anda
secara khusus menyatakan bahwa variabel tersebut dapat digunakan pula
oleh skrip lain. Anda harus mendeklarasikan suatu variabel sebagai variabel
global jika menginginkan variabel tersebut juga dapat diakses oleh skrip-skrip
dan fungsi-fungsi lainnya yang membutuhkan. Yang harus diingat bahwa
LSP Telematika Indonesia
77
setiap akhir kode PHP diikuti dengan simbol (;) yang menandakan bahwa
kode selanjutnya adalah kode baru.
3.4.2. Menangani Input dan Output
Pada bagian ini akan dibahas sejumlah fungsi yang terkait dengan operasi
untuk menyimpan dan membaca data ke atau dari sebuah file.
3.4.1.1 Membuka dan Menutup File
Untuk sebagian besar fungsi-fungsi sistem file, file-file tersebut harus dibuka
terlebih dahulu. Fungsi fopen() yang dapat melakukan hal tersebut dan
mengembalikan sebuah file handle. File handle ini dapat digunakan untuk
fungsi-fungsi selanjutnya, seperti contohnya, membaca informasi dari sebuah
file atau menulis ke file tersebut. Berikut ini merupakan format membuka dan
menutup file :
($fp = @fopen('file.txt', 'at')//$fp menyimpan nilai file
handle
fclose($fp);
fopen() memiliki sedikitnya dua buah parameter yaitu nama file dan mode
penggunaan file saat file tersebut diakses. Berikut ini merupakan contoh dari
sebuah skrip yang dapat membuka dan menutup file.
<?php
if ($fp = @fopen('file.txt', 'at')) {
echo 'File opened.';
fclose($fp);
echo '<br />File closed.';
} else {
echo 'Error opening file.';
}
?>
Pada parameter mode file, terdapat sebuah string yang terdiri dari satu atau
lebih karakter. Karakter pertama adalah salah satu dari karakter a, r, w,
atau x, setelah itu satu atau lebih modifier khusus dapat digunakan. Tabel
3.4.1.1.1 ini menampilkan semua mode yang tersedia pada PHP.
Jadi modifier + selalu menambahkan akses baca dan tulis yang hilang pada
sebuah mode file. Jika Anda menambahkan b ke sebuah mode file, berarti
Anda memaksa PHP untuk membuka sebuah file sebagai file biner, sebagai
LSP Telematika Indonesia
78
contohnya, mode file rb membuka sebuah file untuk membaca dalam mode
biner.
Tabel 3.4.1.1.1 : Mode Pengaksesan File
Mode
Keterangan
A
Membuka file untuk menuliskan data, buat file tersebut jika belum ada.
a+
Sama seperti mode a, tetapi dengan tambahan membaca file tersebut.
r
Membuka file untuk membaca data.
r+
Sama seperti mode r, tetapi dengan tambahan menulis ke file
tersebut.
Membuka file untuk menuliskan data, menghapus isinya, membuat file
w
jika belum ada.
Sama seperti mode w, tetapi dengan tambahan membaca ke file
w+
tersebut.
Membuat file untuk menuliskan data, kirimkan
x
E_WARNING jika file
tersebut telah ada.
Sama seperti mode x, tetapi dengan tambahan membaca ke file.
x+
fopen()
mengembalikan
sebuah
file
handle
atau
FALSE
jika
operasi
membuka file tidak bekerja dengan baik. Anda sebaiknya mengurangi
kemungkinan-kemungkinan munculnya pesan error dengan karakter @, atau
pada PHP 5 menggunakan blok try-catch.
Segera setelah sebuah file tidak digunakan lagi, sebaiknya file tersebut
ditutup. PHP secara otomatis menutup semua file ketika skrip berakhir. Agar
sumber daya sistem terpakai seefisien mungkin, file sebaiknya ditutup dengan
segera untuk membebaskan memori dan mempercepat jalannya sistem.
Untuk itu, gunakanlah fclose() dan sediakanlah file handle sebagai sebuah
parameter.
Untuk mencegah kesalahan saat mencoba mengakses file yang tidak/belum
ada sebelumnya, Anda dapat menggunakan fungsi file_exists() dengan
format pemanggilan sebagai berikut:
if (file_exists('file.txt'), 'r') {
// ...
}
LSP Telematika Indonesia
79
Pada tabel berikut akan dijelaskan beberapa fungsi lainnya yang berkaitan
dengan pengaksesan file :
Tabel 3.4.1.1.2 : Mode Pengaksesan File
No.
Fungsi
Keterangan
Untuk merekam data ke file. Setelah
data
direkam,
pointer
file
akan
menunjuk ke posisi sesudah karakter
terakhir
1
fputs(file_handle, data)
yang
ditulis. Fungsi
mengembalikan
nilai
balik
akan
berupa
TRUE jika data berhasil direkam atau
FALSE
jika
Argumen
data
gagal
file_handle
direkam.
diperoleh
ketika memanggil fopen().
Untuk membaca data yang terdapat di
2
fgets(file_handle, panjang)
dalam
file.
menyatakan
Argumen
jumlah
panjang
karakter
yang
hendak dibaca.
Untuk membaca sebuah karakter dari
file. Nilai balik yang diberikan berupa
3
fgetc(file_handle)
sebuah karakter yang sedang ditunjuk
oleh pointer file. Pointer akan bergeser
ke posisi karakter berikutnya setelah
data dibaca.
Untuk memeriksa apakah pointer file
4
feof(file_handle)
sedang menunjuk ke bagian akhir file
atau tidak.
LSP Telematika Indonesia
80
3.4.1.2 Aliran Kontrol
Pada dasarnya, program merupakan serangkaian pernyataan-pernyataan.
Aliran kontrol, seperti yang tersirat dari namanya, mengontrol bagaimana
pernyataan-pernyataan tersebut dijalankan. Biasanya aliran kontrol dibuat
berdasarkan serangkaian kondisi yang ada.
3.4.1.2.1 Pernyataan if
Pernyataan if biasa digunakan untuk mengambil keputusan berdasarkan
suatu kondisi. PHP memiliki tiga macam bentuk if, yaitu if saja, if-else, dan
if-elseif. Pada contoh berikut, kondisi yang diujikan adalah “$a bernilai 10 ”.
if ($a == "10") {
// jalankan suatu kode
}
Setelah nilai $a dievaluasi, jika ternyata variabel tersebut bernilai 10 (berarti
kondisi terpenuhi/benar), maka kode yang terdapat di dalam kurung kurawal
akan dijalankan. Namun, jika ternyata variabel tersebut bernilai selain 10
(berarti kondisi tidak terpenuhi/salah), maka kode di dalam kurung kurawal
akan diabaikan dan eksekusi program akan berlanjut ke kode berikutnya.
Untuk memberikan serangkaian pernyataan alternatif dimana nilai $a tidak
harus memenuhi kondisi bernilai 10, tambahkan sebuah pernyataan else
pada aliran kontrol tersebut. Dengan demikian bagian dari pernyataan yang
lainnya akan dijalankan saat kondisi tidak terpenuhi.
if ($a == "10") {
echo "a bernilai 10";
} else {
echo "a tidak bernilai 10";
}
Pernyataan elseif dapat ditambahkan pada struktur untuk mengevaluasi
sebuah kondisi alternatif sebelum sampai pada pernyataan else yang
terakhir.
Sebagai
contohnya,
pada
struktur
berikut
ini
pertama-tama
mengevaluasi apakah $a bernilai 10. Jika kondisi if tersebut tidak terpenuhi
(salah), maka pernyataan elseif akan dievaluasi. Jika kondisi tersebut
terpenuhi (benar), maka kode yang terdapat di dalam kurung kurawal akan
LSP Telematika Indonesia
81
dijalankan. Jika ternyata pernyataan kondisi tersebut masih belum benar,
maka eksekusi program akan berlanjut hingga kepada pernyataan else yang
terakhir.
if ($a == "10")
echo "a
} elseif ($b ==
echo "b
} else {
echo "a
}
{
bernilai 10";
"8") {
bernilai 8";
tidak bernilai 10 and b tidak bernilai 8.";]
3.4.1.2.2 Pernyataan while
Tidak seperti struktur if, dimana setiap kondisi dievaluasi sekali dan sebuah
aksi dilakukan berdasarkan pada nilai benar atau salahnya, pernyataan while
akan me-loop hingga kondisinya salah. Dengan kata lain, while loop berlanjut
selama kondisinya terpenuhi/benar. Jika kondisi tidak terpenuhi maka
perintah dalam while sama sekali tidak di jalankan. Berbeda dengan While,
Do..While akan menjalankan perintah dalam while minimal 1 kali.
Sebagai contoh, while loop berikut ini, nilai variabel $a akan dicetak pada
layar dan ditambahkan satu selama nilai $a lebih kecil dari atau sama dengan
5.
$a = 0 // menentukan sebuah nilai permulaan
while ($a <= "5") {
echo "a sama dengan $a<br>";
$a++;
}
Berikut ini merupakan output dari while loop tersebut :
•
a sama dengan 0
•
a sama dengan 1
•
a sama dengan 2
•
a sama dengan 3
•
a sama dengan 4
•
a sama dengan 5
3.4.1.2.3 Pernyataan for
Seperti halnya while loop, for loop mengevaluasi serangkaian pernyataan
kondisi pada permulaan tiap-tiap loop. Berikut ini merupakan syntax dari for
loop :
LSP Telematika Indonesia
82
for (expr1; expr2; expr3) {
// kode untuk dieksekusi
}
Pada permulaan setiap loop, ekspresi pertama dievaluasi, diikuti dengan
ekspresi kedua. Jika ekspresi kedua terpenuhi, maka loop akan berlanjut
dengan pengeksekusian kode lalu mengevaluasi ekspresi ketiga. Namun, jika
ekspresi kedua tidak terpenuhi, maka loop tidak akan berlanjut dan ekspresi
ketiga tidak akan pernah dievaluasi.
Marilah kita ambil contoh yang telah digunakan pada while loop, lalu
menulisnya kembali dengan menggunakan sebuah for loop.
for ($a = 0; $a <= "5"; $a++) {
echo "a sama dengan $a<br>";
}
Output yang diperoleh akan sama saja dengan output yang dihasilkan pada
penggunaan while loop sebelumnya.
3.4.1.2.4 Pernyataan switch
Pernyataan switch merupakan sebuah cara sederhana untuk menampilkan
tugas-tugas yang dapat dilakukan dengan pernyataan dasar if. Tujuan dari
pernyataan
switch
adalah
memungkinkan
pihak
pengembang
untuk
menempatkan sebuah blok kode pada masing-masing kasus (case) yang
berbeda. Berikut ini merupakan bentuk umum dari pernyataan switch :
switch($variable) {
[case <constant>:]
/* kode akan dijalankan jika $variable = 1 */
[break;]
[case <constant>:]
/* kode akan dijalankan jika $variable = 2 */
[break;]
...kasus tambahan
[default:]
/* kode akan dijalankan jika tdk ada kasus yg cocok
*/
}
Konstanta case tidak terbatas pada nilai integer sebagaimana pada
bahasa lainnya seperti C. Pada PHP, nilai konstanta dapat pula
menggunakan
string
LSP Telematika Indonesia
dan
floating
point
number.
Di
dalam
83
penggunaannya,
pernyataan
switch
menyediakan
sebuah
variabel
tunggal yang nilainya akan dibandingkan dengan nilai variabel –
nilai variabel yang terdapat pada masing-masing pernyataan kasus
(case)
secara
individual.
Pada
kenyataannya,
pernyataan
switch
serupa dengan serangkaian pernyataan if.
3.4.1.3 Ekspresi Reguler
Ekspresi
reguler
menyediakan
mekanisme
untuk
memanipulasi
dan
mencocokkan string. Sebagai gambaran, Anda dapat memeriksa suatu string
yang mengandung karakter, suku kata, atau kata tertentu, atau bahkan
diawali dan diakhiri dengan string tertentu. Dengan menggunakan ekspresi
reguler, bagian dari suatu string dapat digantikan dengan suatu substring.
Pada aplikasi internet, salah satu penggunaan ekspresi reguler adalah untuk
memeriksa keabsahan penulisan alamat e-mail.
3.4.1.3.1 Mengenal fungsi ereg
Pada PHP, tersedia fungsi bernama ereg yang dapat digunakan untuk
menangani ekspresi reguler. Bentuk dasar pemanggilan fungsi ini adalah
sebagai berikut :
ereg (pola, sumber)
Fungsi ini menghasilkan nilai TRUE jika string pada pola cocok dengan string
yang terdapat pada sumber. Namun, fungsi akan menghasilkan nilai FALSE
jika pola tidak cocok dengan string sumber.
Berikut ini adalah contoh dari pemeriksaan suatu substring dalam suatu
string:
ereg (“BILA”, “APABILA”)
Fungsi di atas akan menghasilkan nilai TRUE karena string “BILA” terdapat
pada string “APABILA”.
Sedangkan contoh berikut ini berusaha mencocokkan suatu substring yang
terletak di awal suatu string dengan menggunakan tanda ^ :
ereg (“^hari”, “Pada suatu hari yang cerah”)
LSP Telematika Indonesia
84
Fungsi di atas akan menghasilkan nilai FALSE karena string sumber (argumen
kedua) tidak diawali dengan “hari”.
Jika Anda ingin menentukan apakah suatu substring terletak di akhir string,
maka Anda perlukan menambahkan tanda $ di bagian akhir substring
tersebut. Berikut ini merupakan contohnya :
ereg (“indah$”, “alangkah indah”)
Fungsi di atas akan menghasilkan nilai TRUE karena string “alangkah indah”
memang diakhiri dengan “indah”.
Jika Anda ingin memeriksa suatu string mengandung huruf vokal atau tidak,
maka Anda dapat menggunakan kelas karakter seperti contoh berikut ini :
ereg (“[aiueo]”, “vwxyz”)
Fungsi di atas akan menghasilkan nilai FALSE, sedangkan fungsi berikut :
ereg (“[aiueo]”, “ink”)
ereg (“[aiueo]”, “ton”)
ereg (“[aiueo]”, “fanta”)
akan menghasilkan nilai TRUE karena argumen kedua mengandung sedikitnya
satu huruf yang terdapat pada kurung siku argumen pertama.
3.4.1.3 Membuat Fungsi
Kita dapat membuat fungsi dalam PHP dengan sintaks :
function nama_func ($arg_1, $arg_2, ..., $arg_n)
{
echo "Contoh fungsi.\n";
return $retval;
}
keyword return berarti fungsi ini akan mengembalikan sebuah nilai. Beberapa
contoh fungsi dalam PHP adalah :
•
fungsi kompresi (BZip2)
•
fungsi penanggalan
Yang termasuk dalam fungsi ini adalah cal_days_in_month() untuk
mengembalikan jumlah hari dalam 1 bulan, easer_date() untuk mencari
tahu
tanggal-bulan-tahun
hari
paskah,
easter_days()
akan
mengembalikan tanggal hari paskah di tahun tertentu.
•
Fungsi Waktu
LSP Telematika Indonesia
85
Fungsi yang sering digunakan adalah date(format). Fungsi ini untuk
melakukan format waktu. Contoh :
date ("l dS of F Y h:i:s A");
akan menghasilkan keluaran Wednesday 15th of January 2003 05:51:38
AM. Berikut ini adalah format waktu dalam PHP :
Karakter Keterangan
a
Nilai
Huruf kecil Ante meridiem dan Post meridiem am atau pm
Huruf besar Ante meridiem dan Post
A
meridiem
AM atau PM
d
tanggal, 2 digits dengan awalan 0
01 hingga 31
D
Representasi teks dari hari
Mon hingga Sun
F
Nama Bulan
h
Jam, 2 digit dengan awal 0, format 12 jam
01 hingga 12
H
Format 24-jam
00 hingga 23
i
Menit dengan awal 0
00 hingga 59
j
Tanggal tanpa awal 0
1 hingga 31
January hingga
December
Representasi angka dari bulan dengan
m
awalan 0
M
Representasi 3 digit dari nama bulan
Representasi angka dari bulan tanpa awalan
n
0
01 hingga 12
Jan hingga Dec
1 hingga 12
t
Jumlah hari dalam bulan tertentu
28 hingga 31
Y
Representasi 4 digit dari tahun
Contoh: 1999 atau 2003
y
Representasi 2 digit dari tahun
Contoh: 99 atau 03
z
Hari dalam setahun
0 hingga 366
Untuk mengeset informasi tanggal dan waktu lokal dapat digunakan fungsi
setLocale() sedangkan untuk memperoleh informasi waktu lokal dengan
fungsi getDate().
•
Dokumen PDF
PHP
menyediakan
fungsi
untuk
membuat
dokumen
PDF
dengan
menggunakan library PDFlib.
LSP Telematika Indonesia
86
•
Fungsi perhitungan
PHP menyediakan berbagai fungsi untuk menyederhakan perhitungan
seperti fungsi untuk mencari nilai maksimal – max(), fungsi untuk
membulatkan float – round(), fungsi pembulatan keatas – ceil(), fungsi
pembulatan kebawah – floor(), fungsi untuk memangkatkan – pow(int,
exp), fungsi untuk mengubah desimal menjadi binari – decbin(decimal)
dan lainnya.
3.5 Paket, Modul, Kelas, dan Objek
Dikarenakan semakin bertambah kompleksnya skrip-skrip yang ada, kesulitan
dalam pemeliharaan skrip-skrip tersebut pun menjadi semakin meningkat
pula, khususnya ketika Anda melakukan pemrograman dalam sebuah gaya
prosedural.
Konsep
dari
Object-Oriented
Programming
(OOP)
adalah
menyediakan sebuah struktur organisasional yang nyata terhadap skrip-skrip
Anda melalui enkapsulasi. Meskipun PHP 4 telah memperkenalkan OOP ke
dalam PHP, ia tidak dianggap sebagai sebuah impelementasi OO sejati.
Dikarenakan beberapa keterbatasan penting dalam PHP 4, maka model objek
pada PHP 5 secara lengkap telah dirancang ulang agar secara lebih akurat
dapat mencerminkan definisi OOP sesungguhnya.
3.5.1. Membuat Kelas di dalam PHP 5
Kelas adalah kumpulan variabel dan fungsi yang berkerja dengan variable
tersebut. Pada PHP 5, mendefinisikan dan mengunakan kelas tidak terlalu
mengalami perubahan besar. Berikut ini merupakan sebuah contoh cara
membuat kelas pada PHP 5 :
<?php
class myPHP5Class {
public $my_variable;
public function my_method($param) {
echo "Hello, you called
my_method($param)!\n";
echo "The value of my variable is: ";
echo "{$this->my_variable}\n";
}
}
?>
Pada PHP 4 tidak ada konsep kontrol pengaksesan dalam objek. Sedangkan
pada PHP 5, model objek sekarang menyediakan tiga level pengaksesan bagi
anggota-anggota kelas, yang membatasi data apa saja yang dapat diakses
LSP Telematika Indonesia
87
dari tempat skrip Anda berada. Ada tiga buah tipe pengaksesan yaitu public,
private, dan protected yang dapat diterapkan baik pada method maupun
property dari sebuah kelas, seperti yang terlihat pada potongan kode di atas.
Semua anggota kelas yang dideklarasikan public dapat diakses dari
manapun dalam sebuah skrip. Mereka dapat dipanggil atau diubah secara
internal oleh objek atau dari luar objek. Hal tersebut tidak berlaku bagi semua
anggota kelas yang dideklarasikan dengan menggunakan private, yang
memungkinkan pengaksesan terhadap anggota kelas hanya dari dalam
sebuah instance kelas tersebut melalui variabel $this. Berikut ini merupakan
contoh penggunaan public dan private dalam sebuah kelas (dengan
melakukan perubahan sedikit pada kode sebelumnya) :
<?php
class myPHP5Class {
private $my_variable;
public function my_method($param) {
echo "Hello, you called my_method($param)!\n";
echo "The value of my variable is: ";
echo "{$this->my_variable}\n";
}
}
?>
Saat sebuah instance dari myPHP5Class dibuat, usaha untuk mengakses
properti $my_variable dari luar objek akan menyebabkan sebuah kesalahan
dalam PHP.
<?php
$myobject = new myPHP5Class();
/* This is allowed, as my_method is declared public */
$myobject->my_method("MyParam");
/* This will cause an error, $my_variable is private */
$myobject->my_variable = 10;
?>
Saat kode diatas dieksekusi, maka pesan kesalahan berikut ini akan muncul :
Fatal Error: Cannot access private property myPHP5Class::my_variable in..
Level pengaksesan protected serupa dengan private, karena ia mencegah
pengaksesan anggota kelas secara eksternal. Namun tidak seperti private,
yang
membatasi
pengaksesan
LSP Telematika Indonesia
hanya
pada
kelas
tertentu
dimana
ia
88
didefinisikan, protected memungkinkan pengaksesan baik dari kelas itu
sendiri maupun kelas-kelas anak/turunannya (child classes).
Terkadang kita membutuhkan kelas dengan variabel dan fungsi yang mirip
dengan kelas yang telah ada. Hal ini dapat dilakukan dengan extends.
Perhatikan kode di bawah ini :
class Gen_mbl extends Mobil
{
var $pemilik;
function set_pemilik ($nama)
{
$this->pemilik = $nama;
}
}
Kelas Gen_mbl akan memiliki semua variabel serta fungsi yang dimiliki kelas
mobil ditambah dengan fungsi dalam kelas itu sendiri.
3.5.2. Membuat dan Melewatkan Sebuah Objek
Perubahan terbesar yang juga dapat menimbulkan masalah dengan kode
lama yaitu melewatkan objek. Pada PHP 4, hal tersebut dapat dilakukan
dengan menggunakan nilai secara default. Sebuah objek di-copy dan hasilnya
tersebut akan dilewatkan ke sebuah method. Pada PHP 5, hal tersebut
mengalami perubahan secara mendasar. Sekarang objek secara default akan
dilewatkan melalui referensinya (passed by reference). Hal ini berarti
mengubah objek di dalam method yang dilewatinya akan mengubah pula
objek aslinya. Berikut ini merupakan sebuah contoh kode yang melewatkan
objek :
<?php
class Programmer {
var $name;
function Programmer($s) {
$this->name = $s;
}
}
function GeekMode($p) {
$p->name .= " aka Coogle";
}
$p = new Programmer("John Coggeshall");//membuat sebuah
objek
echo("<p>They call him " . $p->name . "</p>");
GeekMode($p);
echo("<p>They also call him " . $p->name . "</p>");
?>
LSP Telematika Indonesia
89
Pada PHP 4, "They call him John Coggeshall" akan dicetak sebanyak dua
kali. Sedangkan pada PHP 5, pada kali kedua sistem akan mencetak "They
call him John Coggeshall aka Coogle". Hal tersebut disebabkan objek
Programmer dilewatkan pada fungsi GeekMode() secara passed-by-reference,
sehingga perubahan pada objek tersebut juga tampak pada rutin utama.
Perintah $object2 = $object1 menciptakan sebuah rujukan (reference) ke
$object1 di dalam $object2. Jika Anda ingin membuat sebuah kopian yang
dapat Anda ubah-ubah secara independen, gunakanlah sebuah perintah baru
clone, seperti contoh berikut ini :
$object2 = clone $object1;
Pada
PHP
5,
membandingkan
objek
dengan
operator
==
akan
mengembalikan nilai true hanya jika referensinya merujuk ke objek yang
identik.
Pada contoh di atas, $this berarti objek dari kelas itu sendiri. Tanda Æ
digunakan untuk mengakses method ataupun property.
3.6 Form dan Kontrol
3.6.1. Pemrograman form
Pemrosesan kode PHP adalah pada sisi server. Dengan demikian, pihak client
tidak dapat melihat kode PHP yang sesungguhnya. Kode PHP berada di dalam
tag <BODY></BODY> pada form HTML seperti yang terlihat berikut ini :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Calculate Va1ues</TITLE>
</HEAD>
<BODY>
<?php
// tuliskan kode PHP di sini!
?>
</BODY>
</HTML>
LSP Telematika Indonesia
90
Mengambil nilai dari form
Form HTML selalu memiliki tiga buah elemen, yaitu method, aksi, dan tombol
submit. Saat Anda mengklik sebuah tombol submit pada form HTML, semua
variabel akan dikirim ke skrip yang ditentukan oleh ACTION (aksi) melalui
METHOD tertentu. Method tersebut dapat berupa POST atau GET. Variabel
dilewatkan melalui sebuah form menuju sebuah skrip PHP yang ditempatkan
di dalam array global asosiatif (superglobal) yang disebut $_POST atau $_GET,
tergantung pada method dari form tersebut. Sebagai contoh, potongan HTML
berikut ini memanggil sebuah skrip bernama perhitungan.php dengan
menggunakan method POST.
<FORM method="POST" action=" perhitungan.php">
<!— Beberapa elemen form berada di sini -->
<INPUT type="submit" value="Hitung">
</FORM>
Form berikut ini memiliki sebuah input text field dan oleh karenanya
melewatkan sebuah variabel ke sebuah skrip yang bernama formku.php :
<FORM method="POST" action="formku.php">
<P>Nama: <INPUT type="text" name="nama_anda"
size=10></P>
<INPUT type="submit" value="Submit">
</FORM>
Selama proses pengajuan/submisi, skrip formku.php menerima sebuah
variabel bernama $_POST[nama_anda], dengan sebuah nilai apapun yang
diketikkan oleh pengguna pada kolom form. Variabel diberi nama sesuai
dengan nama atribut pada kolom input.
3.6.2. Menggunakan fungsi form
Ketika Anda membuat sebuah form di dalam HTML, penulisan sebuah tag
HTML
yaitu
<FORM>
merupakan
hal
pertama
kali
dilakukan.
Tag
ini
menyatakan bagian dari dokumen HTML yang mengandung semua widget
yang mendefinisikan form. Beberapa widget tersebut antara lain berupa text
fields, check boxes, option buttons, dsb. Tag <FORM> itu sendiri memiliki
sejumlah atribut yang berhubungan dengannya yang dapat mendefinisikan
LSP Telematika Indonesia
91
perilakunya saat sebuah form di-submit. Pada bagian berikut ini akan
dijelaskan tag dari masing-masing widget.
3.6.2.1. Text and Password Field
Kegunaan text atau password field adalah untuk memasukkan sebarisan teks.
Berikut ini merupakan contoh tag dari sebuah text field.
<INPUT TYPE="TEXT"
NAME="mytextfield"
VALUE="My Default Value"
SIZE=30
MAXLENGTH=30>
Sedangkan di bawah ini merupakan contoh dari tag sebuah password field :
<INPUT TYPE="password"
NAME="mypassword"
VALUE="You cannot read this on the browser">
Berikut ini merupakan penjelasan dari masing-masing atribut yang terdapat di
dalam tag tersebut:
•
NAME menyatakan nama yang diberikan pada sebuah text field.
•
SIZE menyatakan ukuran karakter text field pada browser.
•
MAXLENGTH menyatakan jumlah maksimum karakter yang diterima dalam
sebuah text field.
•
VALUE menyatakan nilai default sebuah text field.
3.6.2.2. Option Button and Check Box
Sebuah method yang memungkinkan pengguna untuk memilih sebuah item
tunggal dari sebuah daftar pilihan adalah option button. Pada HTML, option
button dapat dibuat dengan menentukan atribut TYPE pada sebuah tag
<INPUT> menjadi RADIO. Sebuah option widget hanya memiliki tiga buah
atribut yaitu NAME, VALUE, and CHECKED. Berikut ini merupakan beberapa
hal yang perlu Anda perhatikan saat menggunakan option button :
•
Untuk sebuah grup option button agar dapat berfungsi secara benar dan
berlaku sebagai satu grup (berarti hanya satu pilihan saja yang dapat
dipilih), maka setiap option button dalam grup tersebut harus memiliki
nilai yang sama pada atribut NAME.
•
Atribut CHECKED tidak diberikan sebuah nilai dan hanya satu atribut
CHECKED yang dapat eksis untuk tiap-tiap grup option button.
LSP Telematika Indonesia
92
•
Atribut VALUE tidak akan ditampilkan pada browser, tetapi merupakan
nilai yang akan di-submit saat form tersebut di-submit.
Berikut ini merupakan contoh dari sebuah tag option button :
<INPUT TYPE="radio"
Football<BR>
<INPUT TYPE="radio"
<INPUT TYPE="radio"
<INPUT TYPE="radio"
NAME="myradio" CHECKED VALUE="1">
NAME="myradio" VALUE="2"> Soccer<BR>
NAME="myradio" VALUE="3"> Hockey<BR>
NAME="myradio" VALUE="4"> Baseball<BR>
Serupa dengan option button, sebuah check box memungkinkan pengguna
untuk memilih sejumlah pilihan yang tersedia. Sebuah check box dibuat
dengan menentukan atribut TYPE dari sebuah tag <INPUT> menjadi CHECKBOX.
Tidak seperti pada sebuah option button, Anda tidak perlu memberikan nama
yang sama untuk masing-masing check box. Selain itu, tidak ada batasan
mengenai jumlah atribut CHECKED yang dapat muncul. Berikut ini merupakan
sebuah contoh dari tag check box :
<INPUT TYPE="checkbox"
Football<BR>
<INPUT TYPE="checkbox"
Soccer<BR>
<INPUT TYPE="checkbox"
Hockey<BR>
<INPUT TYPE="checkbox"
Baseball<BR>
NAME="mycheckbox1" CHECKED VALUE="1">
NAME="mycheckbox2" VALUE="2">
NAME="mycheckbox3" CHECKED VALUE="3">
NAME="mycheckbox4" VALUE="4">
3.6.2.3 List and Drop-Down List
Ketika Anda membuat sebuah form, HTML menyediakan sejumlah cara untuk
memilih
item-item
dari
sebuah
daftar
(list).
Sebuah
list
dapat
direpresentasikan sebagai sebuah barisan tunggal dimana pengguna mengklik
sebuah tanda panah untuk dapat melihat semua pilihan yang ada (dropdown
list). Berikut ini merupakan sebuah contoh dari tag dropdown list :
<SELECT NAME="foods" SIZE=4 MULTIPLE>
<OPTION VALUE="Chinese">I like Chinese food</OPTION>
<OPTION VALUE="Mexican">I like Mexican food</OPTION>
<OPTION VALUE="American">I like American food</OPTION>
<OPTION VALUE="Italian">I like Italian food</OPTION>
<OPTION VALUE="none">I don't like any of these foods</OPTION>
</SELECT>
Dari tag di atas, terlihat bahwa terdapat beberapa atribut dengan penjelasan
sebagai berikut :
LSP Telematika Indonesia
93
•
NAME : Nama yang diberikan kepada sebuah list.
•
SIZE : Jumlah item yang akan ditampilkan sekali di dalam list.
•
MULTIPLE : Sebuah flag yang menandakan apakah dapat memilih banyak
item.
•
VALUE : Nilai yang akan di-submit jika item dipilih.
•
SELECTED : Sebuah flag yang menandakan jika item tersebut dipilih secara
default.
3.6.2.4. Text Area
Untuk memungkinkan pengguna dapat memasukkan banyak barisan teks,
HTML
menyediakan
<TEXTAREA>
widget
dengan
atribut-atribut
sebagai
berikut:
•
NAME : Nama yang diberikan kepada text area.
•
COLS : Jumlah lebar kolom (dalam karakter) dari text area tersebut
•
ROWS : Jumlah panjang baris (dalam karakter) dari text area tersebut
•
WRAP
: Menentukan bagaimana teks seharusnya di-submit berkaitan
dengan bagaimana teks tersebut diketik di dalam text area. Atribut ini
menerima salah satu nilai antara off, soft, atau hard.
Berikut ini merupakan sebuah contoh dari tag text area :
<TEXTAREA ROWS="5" COLS="30" WRAP="hard">This is my textarea</TEXTAREA>
3.6.2.5. Submission dan Button Widgets
Jenis widget ini direpresentasikan oleh tag <INPUT> dan menggunakan nilai
SUBMIT, IMAGE dan BUTTON untuk atribut TYPE-nya. Widget SUBMIT dan
IMAGE memiliki perilaku yang serupa. Berikut ini merupakan contoh dari tag
kedua widget tersebut :
<INPUT TYPE="submit"
VALUE="This is the Default Submit Button"
NAME="mysubmit">
<INPUT TYPE="image"
SRC="/images/mybutton.gif"
NAME="myimagesubmit">
Sedangkan berikut ini merupakan sebuah contoh dari tag button :
<INPUT TYPE="button" VALUE="Click me!"
onClick="alert('You clicked the button!');">
LSP Telematika Indonesia
94
Widget button terlihat dan berfungsi seperti default submission widget yang
telah disebutkan sebelumnya. Namun, tidak seperti pada widget sebelumnya,
widget button tidak memiliki aksi default yang berhubungan dengannya. Oleh
karena itu, ia perlu dipasangkan dengan sebuah bahasa skrip client-side,
seperti JavaScript untuk menampilkan suatu aksi.
3.7 Program Debugging
Bagian berikut ini memperkenalkan beberapa cara menangani kesalahan
seperti
mencegah
kesalahan,
dan
menyebabkan
kesalahan
juga
browser
mencari
yang
merambat,
kesalahan.
menampilkan
menghilangkan
Suatu
pesan
kesalahan
kesalahan
pesan
seringkali
yang
akan
membingungkan pengguna. Jadi alangkah baiknya jika kesalahan-kesalahan
yang dihasilkan oleh PHP tidak tertampilkan dan sebagai penggantinya Anda
dapat mengatur sendiri pesan yang hendak disampaikan kepada pengguna.
Secara prinsip kesalahan dapat dikelompokkan menjadi tiga macam, yaitu
kesalahan
kaidah
(syntax
error),
kesalahan
semantik,
dan
kesalahan
penalaran (logical error).
3.7.1. Kesalahan Kaidah/Sintaks
Kesalahan sintaks disebabkan oleh adanya kesalahan dalam menuliskan
kaidah perintah dalam PHP. Penyebab utama kesalahan ini biasanya berupa
salah satu dari beberapa hal berikut ini :
•
Salah ketik, misalnya print ditulis menjadi prin.
•
Konstruksi tidak lengkap, misalnya kurang pemberian tanda } (kurung
kurawal).
•
Kurang tanda ; (titik koma) di akhir suatu pernyataan.
•
Suatu literal string belum diakhiri dengan tanda “ (petik ganda).
3.7.2 Kesalahan Semantik
Kesalahan semantik biasanya juga disebut kesalahan sewaktu eksekusi
perintah (runtime error). Sebagai contoh, perhatikan skrip berikut ini :
<HTML>
<BODY>
<?php
LSP Telematika Indonesia
95
$fp = fopen(“takAda”, “r”);//padahal tidak ada berkas
tersebut
$data = fgets($fp, 255);
print($data);
?>
</BODY>
</HTML>
Secara kaidah, tidak ada kesalahan pada skrip tersebut. Namun jika Anda
panggil skrip tersebut maka akan terjadi kesalahan yang disebabkan karena
berkas takAda tidak ada pada direktori kerja.
3.7.3 Kesalahan Penalaran
Kesalahan penalaran merupakan jenis kesalahan yang kadangkala sulit untuk
mencari
penyebabnya.
Kesalahan
ini
tidak
akan
menimbulkan
pesan
kesalahan, tetapi akan memberikan hasil yang keliru. Untuk mencari
penyebab kesalahan seperti itu, biasanya dilakukan dengan menambahkan
pernyataan printf atau echo.
3.7.4 Pesan Kesalahan PHP
Jika Anda perhatikan , pesan kesalahan PHP memiliki pola seperti berikut :
Level kesalahan: pesan_kesalahan
nama_berkas
baris_kesalahan
Level kesalahan menyatakan tingkat kesalahan. Beberapa diantara level
pesan kesalahan berupa :
•
Parse error (level 4), menyatakan kesalahan karena kaidah.
•
Fatal error (level 1), menyatakan kesalahan semantik yang menyebabkan
PHP segera menghentikan eksekusi program.
•
Warning
(level
2),
akan
membuat
kesalahan
ditampilkan
tetapi
pengeksekusian akan tetap dilakukan.
•
Notice (level 8)
Pesan-pesan kesalahan sesungguhnya dapat diatur agar tidak tampil. Hal ini
dapat dikerjakan dengan menggunakan fungsi error_reporting
yang
memiliki format pemanggilan sebagai berikut :
error_reporting (level);
Bila level kesalahan tidak disebutkan, fungsi ini memberikan nilai balik berupa
bilangan bulat yang menyatakan level-level kesalahan yang akan ditampilkan
sekiranya kesalahan terjadi.
LSP Telematika Indonesia
96
3.8 Pemrograman Database
3.8.1. Perangkat Database di Dalam MySQL
MySQL merupakan salah satu jenis database server yang sangat terkenal.
Kepopulerannya disebabkan MySQL menggunakan SQL sebagai bahasa dasar
untuk mengakses database-nya, selain itu ia bersifat free. Perangkat lunak
MySQL
itu
sendiri
dapat
di-download
dari
http://www.mysql.org
atau
http://www.mysql.com. MySQL termasuk jenis RDBMS (Relational Database
Management System). Itulah sebabnya istilah seperti tabel, baris, dan kolom
digunakan pada MySQL. Sebelum mempraktekkan semua contoh berikut ini,
aktifkanlah prompt DOS terlebih dahulu.
3.8.1.1 Mengaktifkan direktori MySQL/Bin
Setelah Anda menjumpai prompt DOS, ketikkanlah perintah berikut :
cd c:\mysql\bin
Setelah itu, Anda akan menjumpai prompt seperti berikut :
C:\MYSQL\BIN>
Pada direktori inilah terdapat sejumlah program executable yang terkait
dengan MySQL.
3.8.1.2 Mengatur Password Root
Setelah Anda meng-install MySQL, langkah awal yang perlu dilakukan adalah
memberikan
merupakan
password
pemakai
terhadap
dengan
pemakai
level
root.
tertinggi
pada
Perlu
diketahui,
MySQL
yang
root
dapat
melakukan apa saja terhadap database MySQL. Pemberian password dapat
Anda lakukan dengan perintah berikut :
mysqladmin –uroot password rahasia
Setelah perintah Anda memberikan perintah di atas, untuk menjadi root maka
Anda perlu mengetikan password rahasia. Jika ingin mengubah password
root semula menjadi misalkan pinguin, maka ketikkanlah perintah berikut :
mysqladmin –uroot –p password pinguin
LSP Telematika Indonesia
97
3.8.1.3 Menjalankan Program Client MySQL
MySQL
menyediakan
program
bernama
mysql
yang
berfungsi
untuk
mengakses database MySQL dari sisi client. Untuk menjalankan program ini,
ketikkanlah perintah berikut : mysql
3.8.1.4 Melihat Daftar Database
Untuk mengetahui nama-nama database yang terdapat pada MySQL, Anda
dapat menggunakan perintah berikut pada prompt mysql :
mysql> SHOW DATABASES;
kemudian tekanlah tombol Enter.
3.8.1.5 Melakukan Koneksi ke Suatu Database
Untuk memanipulasi data yang ada di dalam database, Anda perlu melakukan
koneksi ke database terlebih dahulu. Hal tersebut dapat dilakukan dengan
mengetikkan perintah berikut lalu diakhiri dengan menekan tombol Enter :
mysql> USE mysql;
Anda akan memperoleh tanggapan berupa : Database changed
3.8.1.6 Mengetahui Nama-nama Tabel
Untuk mengetahui tabel-tabel yang terdapat pada suatu database, Anda
dapat menggunakan perintah berikut dan diakhiri dengan menekan tombol
Enter :
mysql> SHOW TABLES;
3.8.1.7 Mengetahui Struktur Tabel
Jika
Anda
bermaksud
mengetahui
struktur
suatu
tabel,
Anda
dapat
menggunakan perintah DESCRIBE atau DESC. Sebagai contoh, Anda dapat
memberikan perintah berikut untuk mengetahui struktur tabel bernama user:
mysql> DESCRIBE user;
LSP Telematika Indonesia
98
3.8.1.8 Keluar dari MySQL
Jika Anda bermaksud mengakhiri mysql, Anda dapat menggunakan salah satu
perintah yaitu EXIT, QUIT, atau \q.
3.8.2 Membuat Database dan Tabel di Dalam MySQL
Melalui program mysql dengan pemakai berupa root, lakukanlah perintah
berikut untuk membuat database, sebagai contohnya berupa bukualmt :
mysql> CREATE DATABASE bukualmt;
Untuk mengaktifkan database tersebut dapat dilakukan dengan mengetikkan
perintah berikut :
mysql> USE bukualmt;
Berikutnya kita akan membuat tabel bernama kota dengan perintah :
CREATE TABLE kota (
id_kota SMALLINT NOT NULL,
nama_kota VARCHAR(25));
Indeks biasa digunakan untuk mempercepat pengaksesan data. Berikut ini
merupakan perintah untuk mengindeks tabel kota menurut kolom id_kota
dengan nama index berupa idx_kota :
CREATE INDEX idx_kota ON kota (id_kota);
Untuk memasukkan data pada tabel kota, Anda harus menggunakan perintah
INSERT seperti contoh berikut ini :
INSERT INTO kota VALUES (21, ‘Jakarta’);
INSERT INTO kota VALUES (22, ‘Bandung’);
Setelah melakukan pemasukkan data di atas, cobalah untuk melakukan
perintah berikut ini untuk melihat data yang berhasil dimasukkan pada tabel
kota :
SELECT * FROM kota;
3.8.3 Menghubungkan Database dengan Menggunakan Fungsifungsi PHP
Pada bagian berikut ini, kita akan membahas cara mengakses database
dengan
menggunakan
ODBC
(Open
Database
Connectivity).
ODBC
merupakan suatu standar yang dikembangkan oleh Microsoft dengan tujuan
untuk memudahkan pengaksesan berbagai database melalui sekumpulan
LSP Telematika Indonesia
99
fungsi yang bersifat umum. Dengan menggunakan ODBC Anda dapat
mengakses berbagai macam sumber data seperti Oracle dan MS Access
dengan mudah. Kesemuanya diakses dengan menggunakan aturan SQL
(Structured Query Language). Pada sistem Windows, sumber data ODBC
dapat diakses pada program melalui DSN (Data Source Name). PHP
menyediakan sejumlah fungsi berawalan odbc_ yang bermanfaat untuk
mengakses database melalui ODBC. Pada tabel berikut ini akan ditampilkan
beberapa fungsi tersebut :
Tabel 3.8.3.1 : Fungsi PHP untuk mengakses database
No.
Fungsi
Keterangan
Untuk membuat sebuah koneksi ke
database dengan menggunakan
odbc_connect(nama_sumber_data,
1
nama_pemakai, password)
sebuah nama pemakai dan password
(bersifat pilihan). Fungsi ini
menghasilkan nilai balik bertipe
integer berupa pengenal hubungan ke
sumber data.
Untuk menutup koneksi yang telah
dibuat dengan sumber data ODBC.
2
odbc_close(pengenal_hubungan)
Argumen pengenal_hubungan
adalah nilai yang dihasilkan oleh
odbc_connect().
3
odbc_close_all()
Untuk menutup semua koneksi
dengan sumber data ODBC.
Untuk mengeksekusi
permintaan/perintah SQL yang
odbc_do(pengenal_hubungan,
4
terdapat pada string_query
string_query)
terhadap koneksi yang dinyatakan
dalam pengenal_hubungan.
odbc_exec(pengenal_hubungan,
5
string_query)
Merupakan nama alias dari
odbc_do().
Untuk memperoleh jumlah field yang
terdapat pada suatu hasil. Dalam hal
6
odbc_num_fields(pengenal_hasil)
ini, pengenal_hasil adalah nilai
yang diperoleh dari fungsi
odbc_do().
LSP Telematika Indonesia
100
Untuk memperoleh jumlah record
yang terdapat pada suatu hasil.
7
odbc_num_rows(pengenal_hasil)
Dalam hal ini, pengenal_hasil
adalah nilai yang diperoleh dari
fungsi odbc_do().
odbc_field_name(pengenal_hasil,
8
nomor_kolom)
odbc_field_len(pengenal_hasil,
9
nomor_kolom)
odbc_field_type(pengenal_hasil,
10
Untuk memperoleh nama suatu
kolom.
Untuk memperoleh panjang suatu
kolom.
Untuk memperoleh tipe kolom.
nomor_kolom)
odbc_fetch_row(pengenal_hasil,
11
nomor_baris)
odbc_fetch_into(pengenal_hasil,
12
Untuk memperoleh sebuah baris
dari suatu himpunan hasil.
Memiliki kegunaan seperti pada
tetapi
odbc_fetch_row()
nomor_baris, array_filed)
hasilnya dikirimkan ke array.
odbc_result(pengenal_hasil,
13
Untuk
memperoleh
nilai
dari
kolom)
sebuah kolom pada baris saat ini.
odbc_result_all(nama_sumber_data
Untuk menampilkan semua baris
14
, nama_pemakai, password)
dari suatu hasil ke browser.
3.8.4 Pemrograman Database Menggunakan MySQL
Sejumlah fungsi yang berawalan mysql_ digunakan untuk mengakses
database MySQL akan dijelaskan pada tabel berikut ini :
Tabel 3.8.4.1 : Fungsi MySQL untuk mengakses database
No
Nama Fungsi
mysql_connect(host_name,
1
nama_pemakai, password)
Keterangan
Untuk
membuat
koneksi
ke
database MySQL yang terdapat
pada suatu host. Fungsi ini
LSP Telematika Indonesia
101
menghasilkan nilai balik berupa
nilai
bertipe
integer
menyatakan
yang
pengenal
hubungan
dan
digunakan
sebagai
pengenal
berbagai
fungsi
pada
berawalan
mysql_.
Untuk
menutup
database
koneksi
MySQL.
ke
Argumen
pengenal_hubungan
2.
mysql_close(pengenal_hubungan)
menyatakan
diperoleh
pengenal
dari
yang
pemanggilan
fungsi mysql_connect().
Untuk memilih database seperti
mysql_select_db(database,
3
pengenal_hubungan)
jika
Anda
menggunakan
perintah USE pada program
client mysql.
Untuk
mysql_query(string_query,
4
pengenal_hubungan)
mengeksekusi
permintaan/
perintah
SQL
terhadap
sebuah/sejumlah
tabel.
mysql_db_query(database,
5
string_query, pengenal_hubungan)
Untuk
menjalankan
suatu
permintaan/perintah
SQL
terhadap suatu database.
Untuk
memperoleh
baris
dari
sejumlah
suatu
hasil
permintaan/perintah SQL yang
menggunakan
6
mysql_num_rows(pengenal_hasil)
SELECT.
perintah
Argumen
pengenal_hasil
menyatakan nilai yang diperoleh
dari pemanggilan fungsi seperti
mysql_db_query()
dan
mysql_query.
mysql_affected_rows
7
(pengenal_hubungan)
Untuk memperoleh jumlah baris
yang dikenai operasi INSERT,
DELETE, dan UPDATE.
8
mysql_num_fields(pengenal_hasil)
LSP Telematika Indonesia
Untuk
memperoleh
jumlah
102
kolom
pada
suatu
hasil
permintaan/perintah
Argumen
SQL.
pengenal_hasil
menyatakan nilai yang diperoleh
dari pemanggilan fungsi seperti
dan
mysql_db_query()
mysql_query.
Untuk menghasilkan suatu array
9
mysql_fetch_row(pengenal_hasil)
yang berisi seluruh kolom dari
sebuah
baris
pada
suatu
himpunan hasil.
Fungsi ini memiliki kegunaan
yang
serupa
dengan
mysql_fetch_row().
10
Hanya
mysql_fetch_array(pengenal_hasil)
saja
setiap
kolom
akan
disimpan dua kali pada array
hasil.
Untuk
memperoleh
mengenai
mysql_fetch_field(pengenal_hasil,
11
nomor_kolom)
informasi
suatu
Argumen
kolom.
nomor_kolom
(bersifat opsional) menyatakan
nomor kolom yang informasinya
ingin didapatkan.
Untuk
pada
12
memindahkan
suatu
mysql_data_seek(pengenal_hasil,
supaya
nomor_baris)
tertentu.
pointer
himpunan
menunjuk
ke
hasil
baris
Argumen
menyatakan
nomor_baris
nomor baris yang ingin dituju.
Untuk
pada
13
memindahkan
suatu
mysql_field_seek(pengenal_hasil,
supaya
nomor_kolom)
tertentu.
pointer
himpunan
menunjuk
ke
hasil
kolom
Argumen
nomor_kolom
menyatakan
nomor kolom yang ingin dituju.
mysql_create_db(database,
14
pengenal_hubungan)
Untuk
MySQL.
membuat
Argumen
merupakan
LSP Telematika Indonesia
nama
database
database
database
103
yang ingin dibuat.
mysql_drop_db(database,
15
16
pengenal_hubungan)
mysql_list_dbs(pengenal_hubungan)
menghapus
database
MySQL.
Untuk
menghasilkan
daftar
database MySQL.
mysql_list_tables(database,
17
pengenal_hubungan)
mysql_list_fields(database,
18
Untuk
nama_tabel, pengenal_hubungan)
Untuk memperoleh daftar nama
tabel dalam suatu database.
Untuk memperoleh daftar nama
kolom
dalam
suatu
tabel
database.
3.9
Membangun Aplikasi Database
Setelah Anda mengenal sejumlah fungsi yang berkaitan dengan MySQL pada
PHP, Anda akan mendapatkan gambaran mengenai penggunaan fungsi-fungsi
tersebut untuk mengimplementasikan sebuah aplikasi sederhana berikut ini.
3.9.1 Membuat Form Database
Andaikan kita telah memiliki sebuah tabel yang bernama MY_PRODUCTS
dengan atribut-atributnya antara lain PRODUCT_ID, TITLE, DESCRIPTION,
dan
PRICE.
Pada bagian ini akan dibahas mengenai langkah-langkah
pembuatan skrip sederhana untuk menambahkan data pada tabel tersebut.
Pertama-tama, bukalah teks editor Anda dan buatlah sebuah file dengan
nama show_addrecord.html.
Buatlah kerangka HTML sebagai isi file
tersebut, seperti yang terlihat berikut ini :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Menambah Data Baru</TITLE>
</HEAD>
<BODY>
<!—kode HTML diletakkan disini -->
</BODY>
</HTML>
Buatlah sebuah heading seperti contoh berikut ini :
<h1>Menambah data baru ke tabel produk</h1>
LSP Telematika Indonesia
104
Untuk membuat kode form, anggap langkah kedua tersebut merupakan
sebuah skrip PHP dengan nama do_addrecord.php dan form Anda akan
menggunakan method POST, seperti potongan skrip berikut ini :
<FORM method="POST" action="do_addrecord.php">
Selanjutnya, buatlah tiga buah text field dan sebuah text area untuk
menangkap
nilai
bagi
$_POST[item_id],
$_POST[item_title],
$_POST[item_desc], dan $_POST[item_price] – nama kolom-kolom dari
tabel MY_PRODUCTS. Potongan skrip form berikut ini menggunakan sebuah
tabel untuk menampilkan kolom-kolom form :
<FORM method="POST" action="do_addrecord.php">
<table cellspacing=5 cellpadding=5>
<tr>
<td valign=top><strong>ID Produk:</strong></td>
<td valign=top><INPUT type="text" name="item_id" size=5
maxlength=5></td>
</tr>
<tr>
<td valign=top><strong>Nama Produk:</strong></td>
<td valign=top><INPUT type="text" name="item_title" size=30
maxlength=50></td>
</tr>
<tr>
<td valign=top><strong>Deskripsi Produk:</strong></td>
<td valign=top><TEXTAREA name="item_desc" cols=30
rows=5></TEXTAREA></td>
</tr>
<tr>
<td valign=top><strong>Harga Produk:</strong></td>
<td valign=top>$ <INPUT type="text" name="item_price" size=10></td>
</tr>
Langkah
terakhir,
tambahkanlah
sebuah
tombol
“Add
Record”
untuk
menambahkan data, seperti yang terlihat berikut ini :
<tr>
<td align=center colspan=2><INPUT type="submit" value="Tambah"></td>
</tr>
Jangan lupa untuk menutup skrip dengan tag </FORM> dan </TABLE>. Secara
keseluruhan, kode skrip Anda akan terlihat sebagai berikut ini :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Menambah Data Baru</TITLE>
</HEAD>
<BODY>
<h1>Menambah Data baru Ke Tabel Produk</h1>
<FORM method="POST" action="do_addrecord.php">
LSP Telematika Indonesia
105
<table cellspacing=5 cellpadding=5>
<tr>
<td valign=top><strong>ID Produk:</strong></td>
<td valign=top><INPUT type="text" name="item_id"
size=5 maxlength=5></td>
</tr>
<tr>
<td valign=top><strong>Nama Produk:</strong></td>
<td valign=top><INPUT type="text" name="item_title"
size=30 maxlength=50></td>
</tr>
<tr>
<td valign=top><strong>Deskripsi Produk:</strong></td>
<td valign=top><TEXTAREA name="item_desc" cols=30
rows=5></TEXTAREA></td>
</tr>
<tr>
<td valign=top><strong>Harga Produk:</strong></td>
<td valign=top>$ <INPUT type="text" name="item_price"
size=10></td>
</tr>
<tr>
<td align=center colspan=2><INPUT type="submit" value="Add
Record"></td>
</tr>
</table>
</FORM>
</BODY>
</HTML>
Simpan file tersebut pada web server Anda kemudian akseslah melalui
browser dengan URL http://127.0.0.1/show_addrecord.html. Pada window
browser, Anda akan menjumpai tampilan seperti berikut :
Gambar 3.10.1.1 Form Penambahan Data
3.10.2 Menangani Data di Dalam form
Selanjutnya, Anda akan membuat skrip PHP yang akan mengambil input,
membuat pernyataan SQL yang sesuai, membuat record, dan menampilkan
LSP Telematika Indonesia
106
record tersebut sebagai sebuah konfirmasi. Karena ACTION dari form pada
file
show_addrecord.html adalah do_addrecord.php, bukalah teks editor
Anda dan buatlah sebuah file dengan nama do_addrecord.php. Sebelum
skrip Anda melakukan apapun, Anda harus memastikan bahwa semua nilai
telah
benar-benar
dimasukkan
ke
dalam
form.
Tetapkanlah
sebuah
pernyataan yang menampilkan semua nilai tersebut. Jika tidak ada, alihkan
pengguna ke form berikut ini :
<?php
if ((!$_POST[item_id]) || (!_POST[$item_title]) || (!$_POST[item_desc])
||
(!$_POST[item_price]))
{
header("Location: http://127.0.0.1/show_addrecord.html");
exit;
}
?>
Kemudian,
tambahkanlah
kerangka
HTML
seperti
berikut
ini
setelah
pernyataan if di atas :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Add a Record</TITLE>
</HEAD>
<BODY>
<!—Kode HTML di letakkan disini -->
</BODY>
</HTML>
Buatlah sebuah heading seperti contoh berikut ini :
<h1>Menambah Data Baru ke Tabel Produk</h1>
Pada kode PHP selanjutnya Anda akan membuat perintah SQL yang akan
dikirimkan ke MySQL. Misalkan saat Anda membuat tabel MY_PRODUCTS,
urutan kolom-kolomnya adalah ITEM_ID,
ITEM_TITLE,
ITEM_DESC, dan
ITEM_PRICE. Gunakanlah urutan yang sama untuk perintah INSERT data pada
tabel tersebut. Simpan perintah SQL pada sebuah variabel yang bernama
$sql dan buatlah daftar VALUES dengan mengunakan nama-nama varibel dari
form, seperti pada skrip berikut :
$sql = "INSERT INTO MY_PRODUCTS (ITEM_ID, ITEM_TITLE, ITEM_DESC,
ITEM_PRICE)
VALUES ('$_POST[item_id]', '$_POST[item_title]', '$_POST[item_desc]',
LSP Telematika Indonesia
107
'$_POST[item_price]')";
Setelah membuat perintah SQL, tambahkanlah koneksi dan kode query.
Selanjutnya tambahkan sebuah pernyataan if untuk mencetak seluruh teks
record yang berhasil ditambahkan.
if ($sql_result) {
echo "
<P>Data Berhasil Dimasukkan!</p>
<table cellspacing=5 cellpadding=5>
<tr>
<td valign=top><strong>ID Produk:</strong></td>
<td
valign=top>".stripslashes($_POST[item_id])."</td>
</tr>
<tr>
<td valign=top><strong>Nama Produk:</strong></td>
<td
valign=top>".stripslashes($_POST[item_title])."</td>
</tr>
<tr>
<td valign=top><strong>Deskripsi
Produk:</strong></td>
<td
valign=top>".stripslashes($_POST[item_desc]."</td>
</tr>
<tr>
<td valign=top><strong>Harga
Produk:</strong></td>
<td valign=top>\$
".stripslashes($_POST[item_price]."</td>
</tr>
</table>";
}
?>
Secara keseluruhan, skrip Anda akan terlihat seperti berikut ini :
<?php
if ((!$_POST[item_id]) || (!$_POST[item_title]) ||
(!$_POST[item_desc])
|| (!$_POST[item_price])) {
header("Location:
http://127.0.0.1/show_addrecord.html");
exit;
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Add a Record</TITLE>
</HEAD>
<BODY>
<h1>Adding a Record to MY_PRODUCTS</h1>
<?php
$sql = "INSERT INTO MY_PRODUCTS (ITEM_ID, ITEM_TITLE, ITEM_DESC,
ITEM_PRICE)
LSP Telematika Indonesia
108
VALUES ('$_POST[item_id]', '$_POST[item_title]', '$_POST[item_desc]',
'$_POST[item_price]')";
// create connection; substitute your own information
$conn = mysql_connect("localhost","joeuser","34Nhjp") or die
(mysql_error())";
// select database; substitute your own database name
$db = mysql_select_db("MyDB", $conn) or die(mysql_error());
// execute SQL query and get result
$sql_result = mysql_query($sql,$conn) or die (mysql_error());
if ($sql_result) {
echo "
<P>Record added!</p>
<table cellspacing=5 cellpadding=5>
<tr>
<td valign=top><strong>ID Produk:</strong></td>
<td valign=top>".stripslashes($_POST[item_id])."</td>
</tr>
<tr>
<td valign=top><strong>Nama Produk:</strong></td>
<td valign=top>".stripslashes($_POST[item_title])."</td>
</tr>
<tr>
<td valign=top><strong>Deskripsi Produk:</strong></td>
<td valign=top>".stripslashes($_POST[item_desc]."</td>
</tr>
<tr>
<td valign=top><strong>Harga Produk:</strong></td>
<td valign=top>\$
".stripslashes($_POST[item_price]."</td>
</tr>
</table>";
}
?>
</BODY>
</HTML>
Simpan file tersebut pada web server Anda dan akseslah melalui browser
dengan URL http://127.0.0.1/show_addrecord.html. Masukkanlah sebuah
contoh produk seperti pada gambar yang terlihat berikut ini :
Gambar 3.10.2.1 Menambahkan sebuah contoh produk
LSP Telematika Indonesia
109
Lanjutkanlah dengan menekan tombol “Add Record” untuk mengeksekusi
skrip pada do_addrecord.php. Jika query tersebut berhasil dijalankan, Anda
akan menjumpai sebuah halaman hasil seperti berikut ini :
Gambar 3.10.2.2 Keberhasilan menambahkan data
Gunakanlah form ini untuk menambahkan beberapa contoh
produk lainnya
ke dalam tabel MY_PRODUCTS .
Soal Latihan
1. Untuk mendorong satu elemen atau lebih pada akhir array, anda dapat
menggunakan:
a. array_merge()
b. array_push()
c. array_add()
d. array_plus()
LSP Telematika Indonesia
110
2. Gillian ingin mengetahui kapan hari Paskah, jadi dia harus menggunakan
fungsi … dalam PHP
a. easter_date()
b. cal_search_easter()
c. cal_days_easter()
d. easter_egg()
3. Apa fungsi untuk menghitung panjang string ?
a. strlen()
b. strlength()
c. strleng()
d. str.length()
Soal Praktek
4. Buatlah file PHP untuk melakukan operasi penjumlahan. Tampilan awal
adalah sebagai berikut :
Setelah dipilih tombol ”Hitung”, maka tampilannya menjadi seperti
berikut:
LSP Telematika Indonesia
111
5. Buatlah file PHP dengan koneksi basis data untuk menambahkan data
mahasiswa baru. Tabel yang sudah ada sebagai berikut :
NIM
12025031
12024832
Nama
Budi Santoso
Andrea Wilson
Jurusan
Akuntansi
Sastra Inggris
Setelah ditambahkan 2 (dua) data baru maka tabel akan menjadi seperti
berikut ini :
NIM
12025031
12024832
12023033
12044732
Nama
Budi Santoso
Andrea Wilson
Shanti Aliyah
Iwan Putra
Jurusan
Akuntansi
Sastra Inggris
Ekonomi Pembangunan
Teknik Mesin
Sedangkan tampilan awal dan akhirnya adalah :
Setelah data baru dimasukkan dalam basis data :
LSP Telematika Indonesia
112
LSP Telematika Indonesia
113
BAB 4
JAVA
Tujuan Instruksional Umum:
1
Siswa dapat menjelaskan dasar Pemrograman Java
2
Siswa dapat membuat Web berbasis java
3
Siswa dapat menjelaskan konsep Object Oriented Programming
Tujuan Instruksional Khusus :
1
Siswa dapat membuat program Java sederhana
2
Siswa dapat membuat aplikasi Java dengan Basis data
3
Siswa dapat membuat aplikasi JSP
Pembahasan pada bab ini untuk memenuhi :
1. TIK.PR02.005.01 Menulis program dasar
2. TIK.PR02.006.01 Menulis program lanjut
3. TIK.PR02.009.01 Mengoperasikan bahasa pemrograman berorientasi obyek
4. TIK.PR02.010.01 Menggunakan library atau komponen-komponen pre-exiting
5. TIK.PR02.012.01 Mengkompilasi dan menjalankan sebuah aplikasi
6. TIK.PR02.013.01 Menulis dan mengkompilasi kode program sesuai dengan
kebutuhan
7. TIK.PR08.011.01 Membuat program aplikasi web berbasis JSP
8. TIK.PR08.012.01 Membuat program aplikasi berbasis JAVA
Berikut ini adalah gambaran umum dari materi yang ada di bab ini :
LSP Telematika Indonesia
114
4.1
Sekilas Mengenai Java
Pada tahun 1991, sekumpulan orang yang dipimpin oleh James Gosling dan
Patrick Naughton dari Sun Microsystem membuat bahasa yang dinamakan
”Green” yang dapat berjalan di berbagai hardware. Teknologi seperti ini tidak ada
sebelumnya.
Kemudian pada tahun 1994, mereka berpikir untuk membuat browser yang realtime, reliable, aman dan tidak bergantung pada arsitektur komputer. Tahun
1995, browser yang berhasil dibuat –The HotJava Browser- menarik perhatian
banyak orang ketika eksibisi. Browser ini memiliki properti yang unik yang dapat
mendownload program dan menjalankannya, disebut applet. Applet ditulis dalam
bahasa yang sekarang dikenal sebagai bahasa java.
Sejak saat itu, Java menjadi sesuatu yang fenomenal. Programmer lebih memilih
menggunakan Java daripada pesaingnya C++ dikarenakan java lebih sederhana,
memiliki library yang kaya, dan juga portable - program java akan berjalan tanpa
perubahan di Windows, UNIX, Linux atau di Macintosh.
4.2
Program Java
Kita akan membuat program Java yang sederhana. Program pertama yang kita
buat akan menampilkan pesan ”Hello World” . Berikut ini adalah program
Hello.java :
Program : Hello.java
public class Hello {
public static void main(String[] args) {
System.out.println(“Hello, World!”);
}
}
LSP Telematika Indonesia
115
Buat file baru kemudian tulis kode diatas dan simpan dengan nama ”Hello.java”.
Untuk melakukan kompilasi, buka console (contohnya : command prompt) lalu
tulis perintah javac Hello.java kemudian eksekusi file tersebut dengan perintah
java Hello. Hasil keluaran dari program ini seperti pada gambar dibawah ini :
Gambar 4.2.1 Hasil Keluaran Program Hello.java
Berikut ini adalah langkah-langkah untuk melakukan kompilasi (compile) dan
eksekusi (run) program java :
1
javac –namafile.java
2
java –namafile
Java adalah bahasa pemrograman yang case sensitive, yang artinya penulisan
dengan huruf besar dan huruf kecil mempunyai arti yang berbeda. Tetapi, spasi
dan baris baru tidak penting dalam bahasa Java kecuali untuk memisahahkan
antar kata.
Baris pertama dari program Hello.java – public class Hello – menkitakan sebuah
kelas baru. Konsep kelas dalam java merupakan ”pabrik” dari objek. Objek dan
Kelas akan dijelaskan lebih lanjut pada bab 3 (tiga).
Baris kedua, public static void main(String[] args) mendefinisikan method main.
Method adalah kumpulan dari instruksi-instruksi untuk menjalankan suatu task.
Pada umumnya program java memiliki method main, tetapi ada juga program
LSP Telematika Indonesia
116
java yang tidak memiliki method main yaitu Applet. Applet akan dijelaskan lebih
lanjut pada bab 6 (enam).
Parameter String[] args merupakan parameter wajib pada method main.
Parameter ini mengandung argumen command line. Kata static menkitakan
bahwa method main tidak akan mengubah objek dari kelas Hello. Instruksi atau
statement dalam method main – statement yang berada diantara {} – dieksekusi
satu demi satu dan setiap statement diakhiri dengan simbol (;).
Teks
”Hello
World!”
dapat
ditampilkan
dilayar
karena
statement
System.out.println. System merupakan kelas yang berisi objek dan method untuk
mengakses sumber daya daris sistem. Tujuan tempat untuk menampilkan string
adalah terminal window. Representasi java dari terminal window adalah dengan
objek yang disebut out. Untuk menampilkan teks dalam satu baris digunakan
method println. Tetapi, jika kita ingin menampilkan teks tanpa berada di baris
baru sesudahnya, kita dapat menggunakan method print. Perhatikan kedua
statement dibawah ini :
System.out.println(”Hello”);
System.out.println(”World!”);
Akan menghasilkan :
Hello
World!
Sedangkan statemen :
System.out.print(”Hello”);
System.out.println(”World!”);
Akan menghasilkan :
Hello World!
Untuk memanggil method di java, ada 3 (tiga) hal yang harus ditentukan yaitu :
1
Objek yang ingin digunakan (contoh : System.out)
2
Nama method yang ingin digunakan (Contoh : println)
3
() yang didalamnya berisi informsi yang dibutuhkan method
4.3 Proses Kompilasi
Saat melakukan proses kompilasi pada program Java yang kita buat, compiler
menterjemahkan source code (statement-statement) menjadi bytecode yang
isinya adalah instruksi-instruksi mesin virtual dan informasi mengenai cara load
program ke memori sebelum program dieksekusi. Bytecode untuk program
LSP Telematika Indonesia
117
disimpan dalam file yang terpisah dengan file ekstension .class. Sebagai contoh :
program Hello.java menyimpan bytecodenya di file Hello.class.
Setelah itu, java interpreter me-load bytecode program yang kita tulis,
menjalankan program dan me-load library yang diperlukan. Berikut ini adalah
penggambaran langkah-langkah dari proses kompilasi hingga program berjalan:
Gambar 4.3.1 Langkah-langkah proses kompilasi
Aktivitas pemrograman dimulai dengan membuka editor dan menulis source
code. Kompilasi source code yang dibuat dan periksa apakah ada pesan error.
Jika ditemukan pesan error maka kita dapat menjalankan debugger untuk
memeriksa baris demi baris untuk menemukan kesalahan. Setelah kesalahan
ditemukan, perbaiki source code. Lakukan kembali proses kompilasi. Jika tidak
ada pesan error, eksekusi program.
4.4 Tipe Data Dalam Java
4.4.1 Angka
Dalam bahasa java terdapat berbagai tipe data, diantaranya tipe angka. Tipe ini
terdiri dari integer, double, float dan long. Perhatikan kode program dibawah ini :
Program : Coins1.java
Public class Coins1 {
Public static void main(String[] args) {
int pennies = 8;
int dimes = 4;
int quarters = 3;
// menghitung nilai total
double total = pennies*0.01 + dimes*0.10 + quarters*0.25;
// menampilkan hasil perhitungan
System.out.print(“Total Value = “);
System.out.println(total);
LSP Telematika Indonesia
118
}
}
Nilai (8, 4, 3) merupakan integer, bilangan tanpa angka decimal. Nilai (0.01,
0.10, 0.25) memiliki nilai desimal, angka yang demikian dinamakan floating point
karena computer merepresentasikannya dengan sebarisan digit-digit beserta
posisi dari titik desimal. Double merupakan double precision floating point. Ada
juga tipe single precision, yaitu float. Nilai dari tipe float menggunakan setengah
dari tempat penyimpanan untuk tipe double dan juga dalam perhitungan.
Perhitungan dengan float lebih cspat daripada perhitungan dengan double tetapi
presisi untuk float – 7 (tujuh) desimal – tidak mencukupi untuk kebanyakan
program.
Apabila tipe int dan double tidak cukup dalam perhitungan yang kita buat, kita
dapat
menggunakan
tipe
9,223,372,036,854,775,808
long.
hingga
Long
integer
berkisar
antara
9,223,372,036,854,775,807.
-
Untuk
menentukan nilai Long integer, kita perlu menambahkan huruf L setelah angka,
contoh :
Long price = 300000000000000L;
Selain itu ada juga tipe int yang memiliki kisaran nilai lebih kecil dari int, yaitu
short. Kisaran nilai short antara -32,768 hingga 32,767.
Yang terakhir adalah
tipe byte, dengan kisaran nilai antara -128 hingga 127.
Di Java, setiap variabel mempunyai tipe. Mendenklarasi variabel diawali dengan
menentukan tipe lalu nama variabel, seperti int pennies. Kita bisa juga
melakukan inisialisasi pada variable yang baru dideklarasi (optional) seperti, =8,
kemudian diakhiri dengan simbol (;).
Di Java, perkalian ditandai dengan (*) dan bukan (.) atau (x). Perkalian 5 dengan
10 ditulis dengan 5 * 10. Untuk menulis bilangan eksponensial di java, gunakan
simbol En, contoh : 5.0 x 10-3 akan menjadi 5.0E-3.
Untuk
membantu
pemahaman
pembaca
program,
programmer
dapat
menambahkan comment untuk menjelaskan statement-statement yang ditulis.
Comment ditandai dengan simbol ( // ) atau (/*
tidak panjang simbol yang digunakan adalah
ditulis panjang maka sebaiknya digunakan (/*
*/). Umumnya jika comment
// . Tetapi jika comment yang
*/), seperti contoh dibawah ini :
/*
Dalam program ini, kita akan menghitung nilai dari sekumpulan koin.
LSP Telematika Indonesia
119
User menentukan jumlah pennies, nickels, dimes dan quarters.
Program akan menampilkan nilai total koin-koin tersebut.
*/
Compiler akan mengabaikan apa saja yang tertulis diantara simbol ( // ) atau (
/* */). Berdasarkan comment-comment yang telah dibuat, Java Development Kit
keluaran
Sun
Microsystem
menyediakan
javadoc
untuk
menghasilkan
dokumentasi yang dapat dilihat di browser. Untuk itu, kita harus menggunakan
format yang ditentukan, seperti dibawah ini :
/**
purpose
@param name description
@param name description
@return description
*/
Tiap comment mengawali kelas atau method yang akan dideskripsikan. Dari
command shell, jalankan javadoc dengan perintah :
Javadoc MyProg.java
Perintah ini akan menghasilkan file HTML yang bernama MyProg.html. Selain itu,
javadoc juga menyediakan link ke kelas dan method yang lain. Berikut ini adalah
contoh kode untuk menghasilkan javadoc :
Program : Invoice,java
/**
*/
Describes a quantity of an article to purchase and its price
public class Item
{
/**
Computes the total cost of this item
@return the total price (unit price * quantity)
*/
public double getTotalPrice() {
}
/**
Prints the item name, quantity, unit price and total
*/
public void print() {
}
}
LSP Telematika Indonesia
120
Untuk kode diatas, file HTML yang dihasilkan dengan menggunakan javadoc
adalah sebagai berikut :
Gambar 4.4.1 Dokumentasi HTML Dengan Javadoc
4.4.2 Konstan
Perhatikan 2 (dua) contoh kode di bawah ini :
Program : Volume.java
public class Volume {
public static void main(String[]
args) {
int bottles = 4;
int cans = 10;
double total = bottles*2+
cans*0.35;
System.out.print(“Total
Volume : “);
System.out.print(total);
System.out.println(“ liters”);
}
}
A
public class Volume {
public static void main(String[] args)
{
final double BOT_VOL = 2;
final double CAN_VOL =
0.35;
int bottles = 4;
int cans = 10;
double total =
bottles*BOT_VOL +
cans*CAN_VOL;
System.out.print(“Total
Volume : “);
System.out.print(total);
System.out.println(“ liters”);
}
}
B
Nilai konstan pada program A tidak diberikan nama, sedangkan pada program B
nilai 2 dan 0.35 diberi nama BOT_VOL dan CAN_VOL. Variable BOT_VOL dan
CAN_VOL dideklarasi dengan memberikan tipe data final. Deklarasi dengan tipe
data final menyebabkan nilai variable tidak bisa berubah setelah diinisialisasi.
LSP Telematika Indonesia
121
Umumnya programmer menggunakan huruf besar untuk konstan yang memiliki
tipe final untuk membedakannya dengan
variable biasa.
Selain itu, deklarasi
variable final tidak harus langsung diinisialisasi. Variable seperti ini dinamakan
blank final :
final double BOT_VOL;
final double CAN_VOL;
BOT_VOL = 2.0;
CAN_VOL = 0.35;
Setelah blank final diinisialisasi maka nilainya tidak dapat diubal lagi sepanjang
program. Dengan memberikan nama pada konstan maka program yang kita buat
akan lebih mudah dibaca dan diubah. Seandainya program Volume.java yang A,
konstan 2 diubah menjadi 5 maka kita harus mengubah setiap nilai 2 yang ada di
program
4.4.3
String
String adalah sebarisan karakter yang diawali dan diakhiri oleh tanda kutip (”),
contohnya ”Hello”.
Variable dapat dideklarasikan dan diinisialisasi dengan tipe
string :
String name = ”John”;
Selain itu assigment string pada variable juga dapat dilakukan :
name = ”Carl”;
Panjang string adalah jumlah karakter string tersebut, Contoh : panjang string
”computer” adalah 8 (delapan). Kita dapat memperoleh panjang string dengan
menggunakan method length.
int n = name.length();
String yang panjangnya 0 (nol) dinamakan string kosong. Berbeda dengan angka,
string
merupakan
sebuah
objek
sehingga
string
dapat
digunakan
untuk
memanggil method.
Operasi-operasi yang dapat dilakukan dengan string diantaranya adalah substring
dan concatenation. Berikut ini adalah penjelasan untuk setiap operasi string:
a. Substrings
Sebuah string dapat diambil karakter-karakter didalamnya. Hal ini dapat
dilakukan dengan menggunakan substring :
s.substring(start, pastEnd)
Operasi tersebut akan mengembalikan karakter-karakter dalam string s,
dimulai dari posisi start hingga karakter sebelum posisi pastEnd. Contoh :
LSP Telematika Indonesia
122
String greeting = ”Hello, World”;
String sub = greeting.substring(0,4);
// sub = ”Hell”
Operasi substring pada greeting akan mengambil 4 (empat) huruf pada
greeting Posisi 0 (nol) berarti posisi awal string, posisi selanjutnya adalah
1 (satu) dan seterusnya :
H
0
e
1
l
2
l
3
0
4
,
5
6
W
7
o
8
r
9
l
10
d
11
!
12
Posisi karakter terakhir selalu 1 (satu) dikurangi panjang string.
b. Concatenation
Operasi string akan memisahkan string, tetapi operasi concatenation akan
menggabungkan
digabungkan
string.
menjadi
Contohnya
sebuah
string
:
”white”
yang
dan
panjang
”house”,
dengan
bisa
operasi
concatenation,
String fname = ”white”;
String lname = ”house”;
String name = fname + lname;
Operasi + merupakan operasi concatenation. Hasil string name adalah
“whitehouse”, jika ingin menambahkan spasi diantaranya dapat dilakukan
dengan cara :
String name = fname + “ “ +lname;
Hasil string name adalah “white hause”. Dalam ekspresi, jika bagian
sebelah kiri atau kanan operator + merupakan sebuah string maka posisi
lainnya akan dipaksa menjadi sebuah string, kemudian dilakukan operasi
concatenation. Contoh :
String a = ”Agent”;
int n = 7;
String bond = a + n;
Karena a adalah sebuah string maka n diubah dari integer 7 (tujuh)
menjadi string ”7”. Kemudian kedua string digabungkan menjadi string
”Agent7”.
LSP Telematika Indonesia
123
4.4.4 Tipe Data Primitif
Tipe data primitif akan menghasilkan nilai yang sama di berbagai platform
komputer yang mendukung Java. Berikut ini adalah tabel dari tipe data primitif
Java :
Tabel 4.4.4.1 : Tipe Data Primitif
Tipe
boolean
char
byte
short
int
Bit
1
16
8
10
32
Nilai
True atau false
’\u0000’ hingga ’\uFFFF’
-128 hingga +128
-32708 hingga +32707
-2147483648 hingga +2147483647
long
64
float
32
double
64
-9223372036854775808647
hingga
+9223372036854775807
Negatif : -340282347E+38 hingga 140120846E-45 Positif : 140129846E-45
hingga 340282347E-45
Negatif : -17976931348623157E+308
hingga
-49406564584124654E-324
Positif
49406564594124654E-324
hingga
Contoh
boolean a=true;
char a = ”a”;
byte a = 10;
short a = 10;
17976931348623157E+308
4.4.5 Array
Array adalah sekumpulan lokasi memori yang letaknya berurutan. Setiap lokasi
memori memiliki nama yang sama serta tipe data yang sama.
c adalah nama array Æ
angka yang ada didalam
simbol [] adalah indeks
c[0]
c[1]
c[2]
c[3]
c[4]
c[5]
c[6]
-45
6
0
72
1543
-89
0
Indeks menunjukkan posisi nilai dalam array. Indeks berupa integer atau ekspresi
integer, contoh :
a = 1; b=2;
c[a+b] = += 2;
c.length akan menghasilkan jumlah elemen dalam array.
Array adalah sebuah objek yang menempati memori secara berurutan. Perhatikan
kode di bawah ini :
a. int c[] = new int[ 12 ];
sama dengan : int c[];
LSP Telematika Indonesia
124
c = new int[ 12 ];
b. int c[] = { -45, 6, 0, 72, 1543, -89, 0 };
c. String a[][] = new String[1][2];
d. String a = {{”apa”, ”ini”}};
(a) adalah kode untuk deklarasi array satu dimensi. Ketika mendeklarasi array,
kita juga menentukan jumlah elemen dari array. (c) adalah koden untuk
mendeklarasi array 2 dimensi. simbol [] yang pertama menunjukkan baris,
sedangkan simbol [] yang kedua menunjukkan kolom. [1][2] berarti array terdiri
dari 1 kolom dan 2 baris. (c), (d) adalah deklarasi sekaligus inisialisasi array.
4.5 Method, Variabel dan Kelas
Untuk memahami konsep kelas dan method, kita akan gunakan bank sebagai
analogi. Operasi-operasi yang dapat dilakukan di bank diantaranya adalah
menarik uang, menyetor uang dan meminta informasi saldo. Dalam java, semua
operasi itu digambarkan dengan pemanggilan method. Misalnya, kita punya objek
myCheckingAccount dengan tipe BankAccount, kita dapat melakukan operasi :
myCheckingAccount.deposit(2000);
myCheckingAccount.withdraw(500);
System.out.println(”Balance: ” + myCheckingAccount.getBalance());
Method deposit, withdraw dan getBalance membentuk perilaku dari kelas.
Perilaku kelas adalah sekumpulan method-method yang dapat digunakan objek.
Selanjutnya, kita akan mempelajari cara untuk membuat objek. Variable objek
adalah sebuah reference ke objek. Seandainya, kita mendeklarasi variable objek :
BankAccount myAccount;
Variabel objek ini tidak menunjuk ke objek apapun. Untuk itu, kita perlu
melakukan inisialisasi terhadap variable itu. Untuk melakukan inisialisasi objek,
kita perlu membuat objek dari kelas BankAccount, dengan cara :
new BankAccount();
Agar dapat menggunakan objek maka perlu melakukan assign ke reference
objek:
BankAccount myCheckingAccount = new BankAccount();
LSP Telematika Indonesia
125
4.5.1 Mendefinisikan Method
Untuk mendeskripsikan perilaku dari objek maka kita perlu membuat kelas.
Contoh :
public class BankAccount
{
BankAccount methods
BankAccount data
}
Sebelumnya kita telah mendefinisikan 3 (tiga) method :
Public class BankAccount
{
public void deposit(double amount)
{
method implementation
}
public void withdraw(double amount)
{
method implementation
}
public void getBalance()
{
method implementation
}
BankAccount data
}
Kita akan mulai dari header method. Header method terdiri dari :
•
Access specifier (contoh : public)
•
Return type ( double atau void)
•
Nama method (contoh deposit)
•
Parameter
Access specifier akan mengontrol method-method yang dapat memanggil method
ini. Return type adalah tipe nilai yang dihitung method tersebut. Sedangkan
parameter
adalah
input
dari
method.
Apabila
sebuah
method
tidak
mengembalikan nilai maka gunakan tipe void. Method dengan nama yang sama
tetapi memiliki parameter yang sama dinamakan overloading, contoh :
print(int n) { };
print(String b) { };
Cara pemanggilan method ada 2 (dua) cara, tergantung siapa yang memanggil
method. Jika method dipanggil oleh kelas lain maka :
implicitParameter.namaMethod(explicitParameter);
implicit parameter adalah variable objek untuk kelas tempat method berada
sedangkan explicit parameter adalah nilai parameter dari method. Jika method
dipanggil oleh method lain dalam kelas yang sama :
namaMethod(explicitParameter);
LSP Telematika Indonesia
126
Method yang dapat mengakses objek dan mengembalikan informasi mengenai
objek itu, tanpa mengubah objek dinamakan accessor method. Sebaliknya
method yang dapat mengubah state dari objek dinamakan mutator method.
Contoh : pada kelas BankAccount, method deposit/withdraw mutator method
sedangkan
method
getBalance
adalah
accessor
method.
Beberapa
kelas
dirancang sedemikian hingga hanya memiliki accessor method. Kelas yang
demikian dinamakan immutable, contohnya kelas String.
Ada method yang tidak membutuhkan implicit parameter. Method yang demikian
dinamakan method static atau class method. Contoh method ini adalah method
sqrt dari kelas Math. Saat memanggil method sqrt – Math.sqrt(x) – kita tidak
memerlukan implicit parameter, Math adalah nama kelas. Method jenis ini dibuat
umumnya dengan tujuan untuk menyembunyikan perhitungan yang melibatkan
angka. Beberapa contoh method pada kelas Math adalah Math.floor() Æ
menghasilkan nilai pembulatan kebawah, mis : Math.floor(4,6) adalah 4.
Math.ceil() Æ menghasilkan nilai pembulatan keatas, mis : Math.ceil(4,6) adalah
5. Math.min(a,b) Æ menghasilkan nilai minimum dari 2 angka dan Math.round(a)
Æ menghasilkan nilai pembulatan kebawah dari a + 0.5
Java telah menyediakan kelas-kelas yang dapat digunakan untuk membantu kita
dalam
membuat
program.
Kelas-kelas
yang
telah
dibuat
dapat
dilihat
selengkapnya di API yaitu javadoc dari semua kelas buatan Java. Untuk
menggunakan kelas-kelas tersebut kita menggunakan keyword import yang
ditulis di awal program. Perhatikan contoh dibawah ini :
import java.io.*;
import java.awt.Color;
statement pertama mengatakan bahwa kita akan menggunakan kelas-kelas dari
paket java.io tetapi kita hanya mengetahui tempat kelas itu berada dan bukan
nama kelasnya, sedangkan pada statement yang kedua, kita telah mengetahui
nama kelas yang akan digunakan yaitu Color yang berada di paket java.awt.
4.5.2
Instance Variable
Setiap objek memiliki sekumpulan nilai-nilai yang mendeskripsikan objek tersebut
dan mempengaruhi reaksi objek ketika dipanggil (state). Tiap objek menyimpan
state pada satu atau lebih instance variable.
{
Public class BankAccount
……
Private double balance;
LSP Telematika Indonesia
127
}
Deklarasi instance variable terdiri dari :
•
Access Specifier ( contoh : private )
•
Tipe variable ( contoh : double )
•
Nama Variable (Contoh : balance )
Umumnya, instance variable dideklarasikan sebagai private, yang artinya bahwa
instance-instance tersebut hanya dapat diakses oleh method yang berada pada
kelas yang sama.
4.5.3
Constructor
Constructor mempunyai nama yang sama dengan nama kelas, dan umumnya
dideklarasi sebagai public sehingga memungkinkan kode apapun dalam program
untuk membuat objek dari kelas ini. Selain itu, constructor tidak memiliki return
type. Constructor digunakan untuk melakukan inisialisasi pada instance varianle.
public class BankAccount
{ public BankAccount()
{
balance = 0;
}
…..
}
Constructor yang baru kita buat dinamakan default constructor, constructor yang
tidak memiliki parameter. Constructor bukanlah method. Kita tidak dapat
memanggil constructor dengan objek :
myCheckingAccount.BankAccount();
// error
Perhatikan kode dibawah ini :
BankAccount myAccount = new BankAccount();
Kode
tersebut
akan
melakukan
inisialisasi
instance
variable
pada
kelas
BankAccount dengan nilai 0 (nol). Banyak kelas-kelas yang memiliki lebih dari 1
(satu) constructor. Contoh :
public class BankAccount
{ public BankAccount()
{
balance = 0;
}
…..
}
dan
public class BankAccount
{ public BankAccount(double initialBalance)
{
balance = initialBalance;
}
…..
}
LSP Telematika Indonesia
128
Constructor atau method yang demikian dinamakan overloaded. Compiler
mencari tahu method mana yang dipanggil dengan melihat parameter.
4.5.4
Kelas
Didalam
kelas
terdapat
sekumpulan
method
dan
variable.
Bagaimana
menemukan kelas? Contoh : Buat sebuah program yang meminta input user
untuk memasukkan koin dalam dompet kemudian mencari total uang dalam
dompet. Kandidat dari kelas yang dapat dibuat adalah kelas coins dan purse.
Sedangkan kandidat untuk method adalah tambahKoin dan hitungTotal.
Misalkan kita hendak membuat kelas baru yang dapat menggunakan method
serta variabel yang tidak private dari kelas yang sudah ada sebelumnya. Kita
dapat melakukan hal ini dengan meng-extend kelas yang sudah ada. Konsep ini
dinamakan inheritance. Kelas yang lebih umum, yang akan di-ekstend dinamakan
superclass sedangkan kelas yang meng-ekstend dinamakan subclass. Perhatikan
contoh di bawah ini :
public class RekeningTabungan extends RekeningBank {
public RekeningTabungan(double bunga) {
sukuBunga = bunga;
}
public void hitungBunga() {
double sb = getBalance() * sukuBunga/100;
tabung(bunga);
}
private double sukuBunga;
}
Method hitungBunga memanggil method getBalance serta tabung yang ada pada
superclass-nya. Pemanggilan method tersebut sebenarnya menggunakan objek
this yaitu objek yang menunjuk pada kelas yang memanggil.
public class RekeningTransaksi ekstend RekeningTabungan {
public void tabung(double uang) {
super.tabung(uang);
}
}
Method tabung pada kelas RekeningTransaksi memanggil method tabung pada
kelas RekeningTabungan yang menjadi superclass-nya, pemanggilan ini ditandai
dengan keyword super. Hal ini dikarenakan superclass dan subclass memiliki
nama method yang sama dan subclass memanggil method tersebut. Di Java
pemanggilan
method
ditentukan
oleh
objek
yang
sedang
memanggilnya.
Perhatikan kode di bawah ini :
public void transfer(RekeningBank rb, double uang) {
LSP Telematika Indonesia
129
tarikUang(uang);
rb.tabung(uang);
}
kemudian :
RekeningBank cf = ...;
RekeningTransaksi rekSaya = ...;
cf.transfer(rekSaya, 1000);
Perhatikan bahwa di kelas RekeningBank dan kelas RekeningTransaksi memiliki
method
tabung.
Ketika
statement
cf.transfer(rekSaya,
1000)
dieksekusi,
dilakukan pemanggilan method tabung. Method tabung dari kelas mana yang
dipanggil? pemanggilan method tabung dari method transfer dilakukan dengan
objek yang ada di parameter. rekSaya adalah objek kelas RekeningTransaksi
yang meng-ekstend kelas RekeningBank, maka kelas RekeningTransaksi bisa
dikatakan sebagai kelas RekeningBank, selain itu rekSaya yang ada di parameter
maka method yang dipanggil adalah method tabung di kelas RekeningTransaksi.
Konsep ini dinamakan polimorfisme.
Bagaimana seandainya kita hendak meng-ekstend lebih dari satu kelas. Kita
dapat menggunakan interface. Interface mirip dengan kelas biasa dengan
beberapa pengecualian :

interface tidak memiliki instance variable

semua method dalam interface bertipe abstract, yaitu method-method
tersebut
memiliki
nama,
parameter
dan
return
typr
tapi
tidak
diimplementasikan.

semua method di interface adalah public.
Sebagai contoh, paket java.lang mendefinisikan interface Comparable sebagai
berikut :
public interface Comparable {
int compareTo(Object other);
}
Penggunaan interface ini :
public class RekeningTabungan extend RekeningBank implement
Comparable {
...
// Deklarasi method sebagai public
public int compareTo(Object other) {
statement;
}
}
Interfase bukanlah sebuah kelas untuk itu kita tidak bisa membuat objek dari
interface.
Seandainya kita membuat method yang tidak diimplementasikan kelas,
ketika
kita hendak meng-ekstend kelas tersebut maka kita akan mewarisi method yang
LSP Telematika Indonesia
130
tidak melakukan apapun. Hal ini tentu tidak diinginkan, untuk itu Java membuat
abstract kelas. Kelas Abstract memiliki method yang tidak diimplementasikan,
contoh :
public abstract class RekeningBank {
public abstract void pajakTabungan();
...
}
Kita tidak bisa membuat objek dari kelas abstract. Jika kita membuat kelas
abstract maka kita harus membuat subclass yang akan mengimplementasikan
method abstract.
RekeningBank rekening;
rekening = new RekeningBank(); // Error – RekeningBank is abstract
rekening = new RekeningTabungan();
rekening = null;
4.5.5
Paket (Package)
Paket adalah kumpulan kelas yang berhubungan. Library Java terdiri dari paketpaket, beberapa diantaranya ada di tabel 4.5.5.1 di bawah ini :
Tabel 4.5.5.1 : Paket dalam Library Java
Paket
java.util
java.io
java.awt
java.net
javax.swing
omg.org.CORBA
Purpose
Utility
input dan output
Abstract Windowing Toolkit
Jaringan
Swing User Interface
objek terdistribusi
Contoh Kelas
Random
PrintStream
Color
Socket
Jbutton
ORB
Untuk meletakkan kelas dalam sebuah paket, kita harus menulis kode :
package nama_paket
sebagai statement paling awal di kelas. Contoh :
package com.horstmann.ccj;
import java.io.InputStream;
inport java.io.InputStreamReader;
public class NamaKelas { ... }
Untuk menggunakan kelas dari sebuah paket, kita harus menuliskan nama paket
dan nama kelasnya, contoh :
import java.awt.Color;
import com.horstman.ccj.NamaKelas;
Kita dapat mengimport semua kelas dalam paket dengan statement inport yang
diakhiri dengan (.*.), contoh :
import java.awt.*;
LSP Telematika Indonesia
131
Paket java.lang mengandung kelas-kelas java yang dasar seperti Math dan Object
dan selalu tersedia sehingga tidak perlu di-import.
4.6 Flow Control
Flow kontrol digunakan untuk melakukan pengulangan. pada subbab ini kita akan
mempelajari flow kontrol for, while, do...while serta switch...case.
4.6.1 for
Untuk menggunakan flow kontrol for, kita harus menentukan nilai awal, kondisi
pengulangan serta perubahan kondisi. Sintaks untuk for adalah :
for (ekspresi1; ekspresi2; ekspresi3)
statement;
cara penulisan yang lain :
ekspresi1;
while(ekspresi2) {
statement;
ekspresi3;
}
Contoh kode :
for(int counter=1; counter <= 10; conter++)
for(int i=100; I >= 1; i--)
for(int i=7; I <= 77; i += 7)
4.6.2 while dan do..while
Sintaks untuk while adalah :
while(kondisi) {
statement;
}
Statement akan dijalankan selama
kondisi
terpenuhi.
Sedangkan
sintaks
do...while adalah :
do {
statement;
} while (kondisi)
Flow Kontrol do...while akan menjalankan statement minimal sekali, jika kondisi
while terpenuhi maka statement akan terus dijalankan.
4.6.3 switch…case
Flow kontrol ini digunakan untuk melakukan pemilihan dari beberapa kondisi.
LSP Telematika Indonesia
132
Gambar 4.6.3.1 Struktur Switch...Case
Contoh kode penggunaan switch...case :
statement;
switch(var_a) :
case nilai_1:
System.out.println(“I”):
break;
case nilai_2 :
System.out.println(“2”):
break;
default : System.out.println(“0”):
break;
statement;
nila1_1, nilai_2 adalah kemungkinan nilai dari var_a. Keyword break digunakan
untuk keluar dari flow kontrol terdekat. Pada kode di atas, jika telah berada pada
sebuah case maka langkah selanjutnya adalah menjalankan aksi case lalu keluar
dari switch..case dan menjalankan statement diluar flow kontrol switch...case.
4.7 Applet
Applet adalah program java yang berjalan dalam web browser. Sebuah website
yang hendak mengandung kode applet, meletakkan kode applet di web server
dan men-download-nya untuk dapat menampilkannya. Dengan demikian, anda
tidak harus berada di komputer anda untuk dapat menampilkan applet. Untuk
menampilkan applet, kode applet harus di-download terlebih dahulu, apabila
koneksi
internet
lambat
maka
akan
menghabiskan
banyak
waktu
untuk
menampilkanya. Karena alasan itulah maka applet yang kompleks jarang ada di
web page.
LSP Telematika Indonesia
133
Web browser dapat berjalan di berbagai platform. Applet dapat berjalan dalam
web browser maka applet seharusnya juga dapat dieksekusi di berbagai platform.
Applet akan diterjemahkan menjadi java bytecode sehingga komputer atau
peralatan yang dapat menjalankan java bytecode akan dapat menjalankan
applet.
Yang membedakan applet dengan kelas java biasa adalah method main. Pada
applet tidak ada method main. Yang akan menjalankan java virtual manchine
adalah web browser. Pengganti method main adalah method paint, init dan stop,
yang langsung dipaggil oleh web browser ketika program applet dieksekusi.
Selain itu, method-method ini harus didefinisikan ulang pada kelas-kelas yang
meng-ekstend kelas Applet.
4.6.1
Membuat Applet Sederhana
Pada bagian ini akan dicontohkan pembuatan applet yang sederhana. Applet yang
dibuat akan menampilkan kotak. Untuk membuat applet ini dibutuhkan sebuah
file HTML dengan tag
APPLET.
Berikut ini adalah kode program java untuk
menggambar kotak.
Program : RectangleApplet.java
import
import
import
import
java.applet.Applet;
java.awt.Graphics;
java.awt.Graphics2D;
java.awt.Rectangle;
public kelas RectangleApplet extends Applet
{
public void paint(Graphics g)
{
Graphics2D g2 = (Graphics2D)g;
Rectangle kotak = new Rectangle(5, 10, 20, 30);
g2.draw(kotak);
kotak.translate(15, 25);
}
g2.draw(kotak);
}
Sebuah Applet dikodekan seperti program java yang biasa. Kelas applet
dideklarasikan
public
dan
meng-extends
Applet.
Hal
in
berarti
kelas
RectangleApplet mempunyai sifat seperti kelas Applet.
LSP Telematika Indonesia
134
Kelas RectangleApplet hanya memiliki 1 (satu) method yaitu method paint.
Window manager akan memanggil method ini kapan saja permukaan applet perlu
digambar. Pada saat permulaan applet tentunya permukaan applet perlu
digambar. Apabila user mengunjungi web page yang lain lalu kembali ke web
page yang mengandung applet maka permukaan applet akan digambar kembali.
Method paint menerima objek Graphics. Objek ini menyimpan state graphic :
warna, huruf dan lainnya yang digunakan untuk melakukan operasi menggambar.
Untuk menggambar, objek Graphics diubah menjadi objek dari kelas Graphics2D.
Alasan pengubahan objek tersebut dikarenakan pada awal versi java, kelas
Graphics
tidak
menggunakan
pendekatan
objek
oriented.
Beberapa
lama
kemudian, para programmer membutuhkan paket graphics yang lebih baik
karena itulah para pendesain Java membuat kelas Graphics2D. Karena tidak ingin
menganggu kelas-kelas yang menggunakan simple graphics maka method paint
tidak diubah tetapi membuat kelas graphics meng-ekstend graphics2D. Saat
window
manager
memanggil
method
paint,
sebenarnya
parameternya
dilemparkan ke kelas Graphics2D
Untuk menampilkan Applet, dibutuhkan program HTML selain program Java.
Berikut ini adalah file HTML dari kelas RectangleApplet.
Program : RectangleApplet.html
<applet code="RectangleApplet.kelas" width=300 height=300>
</applet>
Seperti file HTML pada umumnya, file HTML untuk applet dapat juga mengandung
tag-tag HTML.Penamaan HTML tidak harus sama dengan program java untuk
applet tersebut. Untuk memudahkan sebaiknya file HTML dan program java untuk
applet memiliki nama yang sama. Untuk menjalankan applet digunakan perintah
applet viewer. applet viewer adalah sebuah program dalam Java Development Kit
dari Sun Microsystem. Caranya dengan menulis nama file HTML applet setelah
perintah applet viewer.
appletviewer RectangleApplet.html
Appletviewer akan membuka window baru untuk tiap applet dalam file HTML.
Berikut ini adalah tampilan dari applet RectangleApplet :
LSP Telematika Indonesia
135
Gambar 4.6.1.1 RectangleApplet
4.6.2
Menggambar Bentuk Grafis Pada Applet
Pada subbab 5.2 kita belajar membuat applet yang menampilkan gambar kotak,
yang merupakan salah satu dari bentuk grafis. Pada bagian ini kita akan
menggambar bentuk grafis yang lain yaitu elips dan garis.
Untuk membuat elips, pertama kali kita membuat persegi panjang dengan
menentukan koordinat x dan y di posisi kiri atas, tinggi serta panjang dari persegi
panjang. Kelas yang disediakan java untuk membuat elips adalah Ellips2D.float
dan Ellips2D.double tergantung pada nilai
float atau double dari koordinat.
Dalam subbab ini, kita akan menggunakan kelas Ellipas2D.double. Berikut ini
adalah contoh pembuatan objek ellips
Ellips2D.Double elips = new Ellips2D.Double(5,10,15,20)
Penamaan kelas Ellips agak berbeda dengan kelas java pada umumnya karena
karakter titk (.), ini menandakan bahwa kelas Ellips2D.Double merupakan kelas
didalam kelas Ellips2D. Untuk menggunakan kelas ini maka kita harus import
kelas Ellips dengan kode
import java.awt.geom.Ellips;
Sama seperti menggambar Rectangle pada subbab sebelumnya, menggambar
ellips dengan menggunakan method draw;
g2.draw(elips);
Untuk menggambar lingkaran, hanya dengan mengeset nilai panjang dan lebar
dengan nilai yang sama;
Ellips2D.Double
lingkaran
=
new
Ellips2D.Double(5,10,diameter,
diameter);
g2.draw(lingkaran);
LSP Telematika Indonesia
136
Untuk objek lingkaran, koordinat (x,y) menunjuk pada titik tengah lingkaran.
Untuk menggambar kelas, java menyediakan kelas Line2D.Double. Garis dibuat
dengan menetukan titik awal dan titik akhir dari garis. Untuk menggambar garis
dapat dilakukan dengan 2 (dua) cara, yang pertama dengan cara memasukkan
titik awal dan akhir sebagai parameter, contoh kodenya adalah :
Line2D.Double garis = new Line2D.Double(x1, y1, x2, y2);
Cara yang kedua dengan cara membuat 2 (dua) objek kelas Point2D.Double
kemudian memasukkan kedua objek tersebut dalam parameter, contoh kodenya
adalah :
Point2D.Double awal = new Point 2D.Double(x1, y1);
Point 2D.Double akhir = new Point 2D.Double(x2, y2);
Line2D.Double garis = new Line2D.Double(awal, akhir);
Berikut ini adalah contoh kode untuk menggambar berbagai bentuk grafis pada
applet :
Program : Shapes.java
import
import
import
import
import
import
import
java.applet.Applet;
java.awt.Graphics;
java.awt.Graphics2D;
java.awt.Rectangle;
java.awt.geom.Ellipse2D;
java.awt.geom.Line2D;
java.awt.geom.Point2D;
public kelas Shapes extends Applet {
public void paint(Graphics g) {
Graphics2D g2 = (Graphics2D)g;
// Buat objek dari kelas Rectangle untuk membuat kotak
Rectangle body = new Rectangle(100, 110, 60, 10);
// Buat objek dari kelas Ellipse2D.Double
Ellipse2D.Double frontTire = new Ellipse2D.Double(110, 120, 10, 10);
Ellipse2D.Double backTire = new Ellipse2D.Double(140, 120, 10, 10);
// Buat objek dari kelas Point2D.Double
Point2D.Double r1 = new Point2D.Double(110, 110);
Point2D.Double r2 = new Point2D.Double(120, 100);
Point2D.Double r3 = new Point2D.Double(140, 100);
Point2D.Double r4 = new Point2D.Double(150, 110);
// Buat objek dari kelas Line2D
Line2D.Double g1 = new Line2D.Double(r1, r2);
Line2D.Double g2 = new Line2D.Double(r2, r3);
Line2D.Double g3 = new Line2D.Double(r3, r4);
// Gambar pada applet
LSP Telematika Indonesia
137
g2.draw(body);
g2.draw(frontTire);
g2.draw(backTire);
g2.draw(g1);
g2.draw(g2);
g2.draw(g3);
// Gambar tulisan di posisi yang ditentukan
g2.drawString("Applet Mobil", 100, 150);
}
}
File HTML yang digunakan untuk melengkapi program diatas adalah :
<applet code="Shapes.kelas" width=300 height=300>
</applet>
Cara menjalankan program :
1. Compile
dengan
cara
javac
Shapes.java.
Langkah
ini
akan
menghasilkan sebuah file Shapes.kelas yang akan digunakan di file
HTMl.
2. Jalankan applet dengan cara appletviewer Shapes.html
Setelah langkah-langkah dilakukan maka applet yang dihasilkan seperti gambar
2.6.2.1 di bawah ini.
Gambar 4.6.2.1 Applet Shapes
4.6.3
Warna
Semua penggambaran bentuk sebelumnya berwarna hitam. Kita dapat mengubah
warnanya dengan menggunakan objek Color. Java menggunakan model warna
RGB. Model ini menentukan warna baru berdasarkan kadar warna merah, hijau
dan biru dalam warna baru tersebut. Kadar warna berupa nilai float dan besarnya
dari 0.0F hingga 1.0F. Contoh penggunaan kelas Color :
LSP Telematika Indonesia
138
Color magenta = new Color(1.0F, 0.0F, 1.0F);
Kita dapat mengubah warna dengan menggunakan method setColor. Berikut ini
adalah contoh kode RectangleApplet dengan menggunakan warna :
import
import
import
import
java.applet.Applet;
java.awt.Graphics;
java.awt.Graphics2D;
java.awt.Rectangle;
public kelas RectangleApplet extends Applet {
public void paint(Graphics g) {
Graphics2D g2 = (Graphics2D)g;
Rectangle kotak = new Rectangle(5, 10, 20, 30);
g2.draw(kotak);
kotak.translate(15, 25);
g2.setColor(Color.red); // Set warna merah
g2.draw(kotak); // gambar kotak yang berwarna merah
}
}
Jika isi kotak ingin berwarna, maka gunakan method fill. Contoh :
g2.fill(kotak);
Method fill akan mengisi objek yang menjadi parameternya dengan warna yang
telah ditentukan sebelumnya. Berikut ini adalah tabel dari warna serta nilai RGB :
Tabel 4.6.3.1 : Tabel Warna
Warna
Color.black
Color.blue
Color.cyan
Color.gray
Color.darkGray
Color.lightGray
Color.green
Color.magenta
Color.orange
Color.pink
Color.red
Color.white
Color.yellow
4.7
Nilai RGB
0.0F, 0.0F, 0.0F (#000000)
0.0F, 0.0F, 1.0F
0.0F, 1.0F, 1.0F
0.5F, 0.5F, 0.5F
0.25F, 0.25F, 0.25F
0.75F, 0.75F, 0.75F
0.0F, 1.0F, 0.0F
1.0F, 0.0F, 1.0F
1.0F, 0.8F, 0.0F
1.0F, 0.7F, 0.7F
1.0F, 0.0F, 0.0F (#FF0000)
1.0F, 1.0F, 1.0F (#FFFFFF)
1.0F, 1.0F, 0.0F
SWING
Setiap aplikasi grafis ditampilkan di frame window, lihat gambar 4.7.1.
LSP Telematika Indonesia
139
Gambar 4.7.1 Frame Window
Sebuah
frame
menampilkan
window
frame,
terdiri
digunakan
dari
sebuah
kelas
border
JFrame
yang
dan
title
berada
bar.
Untuk
pada
paket
javax.swing. Sebelum menggunakan swing, java menggunakan komponen dalam
AWT (Abstract windowing Toolkit) untuk aplikasi grafis. Komponen AWT dan
Swing multiplatform, dapat berjalan di berbagai sistem operasi tanpa adanya
perubahan. AWT menggunakan komponen interface (tombol, textfield, menu, dll)
milik platform yang sedang digunakan. Cara ini tidak berjalan dengan baik karena
banyak timbul kesalahan. Cara yang digunakan swing berbeda dengan AWT,
swing
menggambar
setiap
komponen
sehingga
lambat
tetapi
konsisten.
Walaupun demikian, swing tetap menggunakan beberapa bagian dari AWT,
seperti bagian untuk menggambar dan menangani events. Kelas-kelas swing
berada dalam paket javax.swing.
Perhatikan kode dibawah ini :
Program : FrameTest.java
import javax.swing.JFrame;
public class FrameTest extends JFrame
{
public static void main(String[] args)
{
EmptyFrame f = new EmptyFrame(); // Buat objek frame
f.setTitle("Frame Test");
f.show();
}
}
class EmptyFrame
LSP Telematika Indonesia
140
{
public EmptyFrame()
{
final int WIDTH = 300; // ukuran frame
final int HEIGHT = 300;
setSize(WIDTH,HEIGHT);
}
}
Kode ini akan menghasilkan tampilan pada gambar 5.1.1. Berbeda dengan
applet, aplikasi ini memiliki method main. Method main pada kelas ini membuat
objek FramteTest lalu memanggil method show untuk menampilkan graphical
user interface (GUI) dan memulai thread baru sedangkan thread main selesai.
Akibatnya program terus berjalan karena thread interface masih berjalan,
walaupun icon close pada title bar telah dipilih. Untuk mematikan program ini
harus dilakukan secara manual. Dalam sistem operasi windows atau UNIX, cara
mematikan manual dengan menekan tombol Ctrl + C di console.
Jika kita ingin mematikan program saat ditekan tombol close pada title bar. Maka
kita harus meng-install event handler yang dipanggil ketika user memilih icon
close. Untuk mengetahui kapan user akan mematikan program digunakan window
event. Ada 7 (tujuh) window event pada java :
1. Window yang terbuka untuk pertama kali
2. Window yang tertutup karena method dispose
3. Window yang sedang aktif ( karena user menekan didalamnya)
4. Window yang tidak diaktifkan ( karena user menekan window yang lain)
5. Window dalam bentuk minimize ( karena user menekan icon minimize)
6. Window dalan bentuk semual ( karena user menekan icon minimize pada
window yang minimize);
7. Window yang ditutup oleh user ( karena user menekan icon close )
Agar event dari window dapat ditangkap, maka objek window listener harus
ditambahkan pada GUI. Objek window listener harus meng-implement interface
WindowListener, yang memiliki 7 (tujuh) method :
public interface WindowListener {
void windowOpened(WindowEvent e);
void windowClosed(WindowEvent e);
void windowActivated(WindowEvent e);
void windowDeactivated(WindowEvent e);
void windowIconified(WindowEvent e);
void windowDeiconified(WindowEvent e);
LSP Telematika Indonesia
141
void windowClosing(WindowEvent e);
}
Program sederhana yang hendak kita buat tidak perlu tahu event-event lainnya.
JFrame telah menangani event window yang lain. Agar program dapat mati ketika
user close window maka kita harus meng-install window listener pada GUI yang
didalamnya ada event untuk menutup window.
Interface WindowListener merupakan salah satu penangkap event yang memiliki
banyak method. Cara yang lebih sederhana dengan menggunakan kelas
WindowAdapter.
Kelas
ini
meng-implement
ketujuh
method
dalam
WindowListener dengan method kosong. Kita tinggal meng-ekstend kelas
WindowAdapter ke kelas yang kita namakan WindowCloser :
Class WindowCloser extends WindowAdapter {
Public void windowClosing(WindowEvent event) {
System.exit(0);
}
}
Langkah selanjutnya adalah menambahkan objek WindowCloser pada GUI dan
memanggil method addWindowListener .
Program : FrameTest2.java
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;
import javax.swing.JFrame;
public class FrameTest2
{
public static void main(String[] args)
{
EmptyFrame frame = new EmptyFrame();
frame.setTitle("Close me!");
frame.show();
}
}
class EmptyFrame extends JFrame
{
public EmptyFrame()
{
final int WIDTH = 300;
final int HEIGHT = 300;
setSize(WIDTH, HEIGHT);
WindowCloser listener = new WindowCloser();
addWindowListener(listener);
}
LSP Telematika Indonesia
142
private class WindowCloser extends WindowAdapter
{
public void windowClosing(WindowEvent event)
{
System.exit(0);
}
}
}
Dengan demikian maka program akan mati ketika icon close ditekan user.
4.7.1 Menambahkan Komponen Pada Frame
Untuk menambahkan komponen pada GUI maka komponen tersebut ditempatkan
di komponen lain lalu menambahkan komponen ini ke GUI. Swing menyediakan
komponen JPanel untuk keperluan itu. Menggambar pada applet sedikit berbeda
dengan menggambar pada panel. Pada applet, kita mendefinisikan kembali
method paint. Sedangkan menggambar pada panel, yang kita definisikan ulang
adalah
method
paintComponent.
Yang
harus
diperhatikan,
ketika
mengimplementasikan method paintComponent, kita harus memanggil method
paintComponent pada superclass untuk menghapus isi panel. Berikut ini contoh
penggunaan paintComponent :
Public class MyPanel extends JPanel {
public void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2 = (Graphics2D)g;
// Statement untuk menggambar
}
}
Untuk menambahkan panel pada GUI, kita perlu mengetahui struktur dari
permukaan GUI. Permukaan GUI ditutupi oleh 4 (empat) pane. Pane-pane
tersebut adalah root pane, layered pane, glass pane dan content pane. Root pane
untuk menangkan event dari mouse. Layered pane untuk menyatukan menu bar
dan content pane, sedangkan glass pane untuk menyatukan layered pane dan
glass pane. Yang menjadi perhatian programmer adalah content pane, yang
berfungsi untuk menyatukan komponen yang akan ditampilkan.
Untuk menambahkan komponen ke content pane pada GUI, kita harus mendapat
objek content pane dengan memangil method getContentPane. Method ini akan
mengembalikan objek dengan tipe Container. Sebuah container adalah objek
LSP Telematika Indonesia
143
window yang dapat mengandung komponen lain. Kemudian gunakan method add
dari kelas Container untuk menambahkan komponen.
Beberapa komponen dasar yang akan kita pelajari diantaranya :
Tabel 4.7.1.1 Komponen Beserta Deskripsi
Component
Jlabel
Description
Area dimana teks atau icon yang tidak bisa diubah akan
ditampilkan
JTextField
Tempat user memberikan input dari keyboard dan dapat juga
digunakan untuk menampilkan output
JButton
Area yang memberikan event ketika ditekan
JCheckBox
Komponen untuk memberikan check list
JComboBox
Drop down yang berisi daftar item
JPanel
Tempat untuk menaruh komponen
Berikut ini adalah penjelasan lebih rinci beserta contoh kode untuk tiap komponen
pada tabel :
•
Label
Menyediakan teks pada frame. Untuk membuat label digunakan kelas JLabel.
Label dapat digunakan untuk menampilkan read-only teks, gambar atau teks
dan gambar. Berikut ini adalah contoh kode penggunaan label beserta hasil
keluarannya :
import java.awt.*;
import java.awt.event.*;
// Java extension packages
import javax.swing.*;
public class LabelTest extends JFrame {
private JLabel label1, label2, label3;
// set up GUI
public LabelTest()
{
super( "Testing JLabel" );
// get content pane and set its layout
Container container = getContentPane();
container.setLayout( new FlowLayout() );
// JLabel constructor with a string argument
label1 = new JLabel( "Label with text" );
label1.setToolTipText( "This is label1" );
container.add( label1 );
// JLabel constructor with string, Icon and
LSP Telematika Indonesia
144
// alignment arguments
Icon bug = new ImageIcon( "bug1.gif" );
label2 = new JLabel( "Label with text and icon",
bug, SwingConstants.LEFT );
label2.setToolTipText( "This is label2" );
container.add( label2 );
// JLabel constructor no arguments
label3 = new JLabel();
label3.setText( "Label with icon and text at bottom" );
label3.setIcon( bug );
label3.setHorizontalTextPosition( SwingConstants.CENTER );
label3.setVerticalTextPosition( SwingConstants.BOTTOM );
label3.setToolTipText( "This is label3" );
container.add( label3 );
setSize( 275, 170 );
setVisible( true );
}
// execute application
public static void main( String args[] )
{
LabelTest application = new LabelTest();
application.setDefaultCloseOperation(
JFrame.EXIT_ON_CLOSE );
}
} // end class LabelTest
Komponen frame dapat digunakan untuk menghasilkan event ketika berinteraksi
dengan user, contohnya : menggerakkan mouse, memasukkan input keyboard
pada textfield. Kelas untuk menangkan event adalah java.awt.AWTEvent. Untuk
menangani event, ada 3 (tiga) hal yang harus diperhatikan yaitu :
1. Sumber event : Komponen frame yang menghasilkan event
2. Objek Event : Informasi mengenai event
LSP Telematika Indonesia
145
3. Event Listener : Menerima event objek kemudian memberikan
respon
Untuk programmer, yang harus dilakukan adalah :
1. Menambahkan
event
listener
ke
sumber
event,
dengan
cara
menambahkan method addActionListener.
2. Implementasi kode untuk menangani event (event handler)
Interface event listener pada paket java.awt.event ditunjukkan pada tabel
dibawah ini :
Tabel 4.7.1.2 : Interface Event Listener
Java.util.EventListener
ActionListener
AdjustmentListener
ComponentListener
ContainerListener
FocusListener
ItemListener
KeyListener
MouseListener
MouseMotionListener
TextListener
WindowListener
•
JTextField dan JPasswordField
JTextField adalah area tempat user memasukkan teks atau menampilkan teks.
Sedangkan dengan JPasswordfield, karakter yang ditulis akan disembunyikan.
Berikut ini contoh kode penggunaan JTextField dan JPasswordField yang telah
ditambahkan event listener untuk menangkap event ketika user menekan
enter pada JTextField beserta hasil keluarannya :
Program : TextFieldTest.java
import java.awt.*;
import java.awt.event.*;
// Java extension packages
import javax.swing.*;
LSP Telematika Indonesia
146
public class TextFieldTest extends JFrame {
private JTextField textField1, textField2, textField3;
private JPasswordField passwordField;
// set up GUI
public TextFieldTest()
{
super( "Testing JTextField and JPasswordField" );
Container container = getContentPane();
container.setLayout( new FlowLayout() );
// construct textfield with default sizing
textField1 = new JTextField( 10 );
container.add( textField1 );
// construct textfield with default text
textField2 = new JTextField( "Enter text here" );
container.add( textField2 );
// construct textfield with default text and
// 20 visible elements and no event handler
textField3 = new JTextField( "Uneditable text field", 20 );
textField3.setEditable( false );
container.add( textField3 );
// construct textfield with default text
passwordField = new JPasswordField( "Hidden text" );
container.add( passwordField );
// register event handlers
TextFieldHandler handler = new TextFieldHandler();
textField1.addActionListener( handler );
textField2.addActionListener( handler );
textField3.addActionListener( handler );
passwordField.addActionListener( handler );
setSize( 325, 100 );
setVisible( true );
}
// execute application
public static void main( String args[] )
{
TextFieldTest application = new TextFieldTest();
application.setDefaultCloseOperation(
JFrame.EXIT_ON_CLOSE );
}
// private inner class for event handling
private class TextFieldHandler implements ActionListener {
// process text field events
public void actionPerformed( ActionEvent event )
{
LSP Telematika Indonesia
147
String string = "";
// user pressed Enter in JTextField textField1
if ( event.getSource() == textField1
string = "textField1: " + event.getActionCommand();
// user pressed Enter in JTextField textField2
else if ( event.getSource() == textField2 )
string = "textField2: " + event.getActionCommand();
// user pressed Enter in JTextField textField3
else if ( event.getSource() == textField3 )
string = "textField3: " + event.getActionCommand();
// user pressed Enter in JTextField passwordField
else if ( event.getSource() == passwordField ) {
JPasswordField pwd =
( JPasswordField ) event.getSource();
string = "passwordField: " +
new String( passwordField.getPassword() );
}
}
JOptionPane.showMessageDialog( null, string );
} // end private inner class TextFieldHandler
} // end class TextFieldTest
•
Button
Komponen yang menghasilkan event ketika ditekan oleh user. Beberapa tipe
button adalah command button, checkbox, toggle button dan radio button.
Command
button
dibuat
dengan
kelas
JButton
yang
menghasilkan
ActionEvent ketika ditekan user. Berikut ini adalah contoh kode penggunaan
button beserta hasil keluarannya :
LSP Telematika Indonesia
148
Program : ButtonTest.java
import java.awt.*;
import java.awt.event.*;
// Java extension packages
import javax.swing.*;
public class ButtonTest extends JFrame {
private JButton plainButton, fancyButton;
// set up GUI
public ButtonTest()
{
super( "Testing Buttons" );
// get content pane and set its layout
Container container = getContentPane();
container.setLayout( new FlowLayout() );
// create buttons
plainButton = new JButton( "Plain Button" );
container.add( plainButton );
Icon bug1 = new ImageIcon( "bug1.gif" );
Icon bug2 = new ImageIcon( "bug2.gif" );
fancyButton = new JButton( "Fancy Button", bug1 );
fancyButton.setRolloverIcon( bug2 );
container.add( fancyButton );
// create an instance of inner class ButtonHandler
// to use for button event handling
ButtonHandler handler = new ButtonHandler();
fancyButton.addActionListener( handler );
plainButton.addActionListener( handler );
}
setSize( 275, 100 );
setVisible( true );
// execute application
public static void main( String args[] )
{
ButtonTest application = new ButtonTest();
}
application.setDefaultCloseOperation(
JFrame.EXIT_ON_CLOSE );
// inner class for button event handling
private class ButtonHandler implements ActionListener {
// handle button event
public void actionPerformed( ActionEvent event )
{
JOptionPane.showMessageDialog( null,
"You pressed: " + event.getActionCommand() );
LSP Telematika Indonesia
149
}
} // end private inner class ButtonHandler
} // end class ButtonTest
•
State Button
Nilai yang dihasilkan state button adalah benar/salah. Java menyediakan 3
(tiga) tipe button ini, yaitu : JToggleButton, JCheckBox dan JRadioButton.
Berikut ini adalah contoh kode penggunaan buton-button tersebut beserta
hasil keluarannya :
Program : CheckBox.java
import java.awt.*;
import java.awt.event.*;
// Java extension packages
import javax.swing.*;
public class CheckBoxTest extends JFrame {
private JTextField field;
private JCheckBox bold, italic;
// set up GUI
public CheckBoxTest()
{
super( "JCheckBox Test" );
// get content pane and set its layout
Container container = getContentPane();
container.setLayout( new FlowLayout() );
// set up JTextField and set its font
field = new JTextField( "Watch the font style change", 20 );
field.setFont( new Font( "Serif", Font.PLAIN, 14 ) );
container.add( field );
// create checkbox objects
bold = new JCheckBox( "Bold" );
container.add( bold );
italic = new JCheckBox( "Italic" );
container.add( italic );
// register listeners for JCheckBoxes
CheckBoxHandler handler = new CheckBoxHandler();
LSP Telematika Indonesia
150
bold.addItemListener( handler );
italic.addItemListener( handler );
}
setSize( 275, 100 );
setVisible( true );
// execute application
public static void main( String args[] )
{
CheckBoxTest application = new CheckBoxTest();
}
application.setDefaultCloseOperation(
JFrame.EXIT_ON_CLOSE );
// private inner class for ItemListener event handling
private class CheckBoxHandler implements ItemListener {
private int valBold = Font.PLAIN;
private int valItalic = Font.PLAIN;
// respond to checkbox events
public void itemStateChanged( ItemEvent event )
{
// process bold checkbox events
if ( event.getSource() == bold )
if ( event.getStateChange() == ItemEvent.SELECTED )
valBold = Font.BOLD;
else
valBold = Font.PLAIN;
// process italic checkbox events
if ( event.getSource() == italic )
if ( event.getStateChange() == ItemEvent.SELECTED )
valItalic = Font.ITALIC;
else
valItalic = Font.PLAIN;
// set text field font
field.setFont(
new Font( "Serif", valBold + valItalic, 14 ) );
}
} // end private inner class CheckBoxHandler
} // end class CheckBoxTest
LSP Telematika Indonesia
151
Program : RadioButtonTest.java
import java.awt.*;
import java.awt.event.*;
// Java extension packages
import javax.swing.*;
public class RadioButtonTest extends JFrame {
private JTextField field;
private Font plainFont, boldFont, italicFont, boldItalicFont;
private JRadioButton plainButton, boldButton, italicButton, boldItalicButton;
private ButtonGroup radioGroup;
// create GUI and fonts
public RadioButtonTest()
{
super( "RadioButton Test" );
// get content pane and set its layout
Container container = getContentPane();
container.setLayout( new FlowLayout() );
// set up JTextField
field = new JTextField( "Watch the font style change", 25 );
container.add( field );
// create radio buttons
plainButton = new JRadioButton( "Plain", true );
container.add( plainButton );
boldButton = new JRadioButton( "Bold", false);
container.add( boldButton );
italicButton = new JRadioButton( "Italic", false );
container.add( italicButton );
boldItalicButton = new JRadioButton( "Bold/Italic", false );
container.add( boldItalicButton );
// register events for JRadioButtons
RadioButtonHandler handler = new RadioButtonHandler();
plainButton.addItemListener( handler );
boldButton.addItemListener( handler );
italicButton.addItemListener( handler );
boldItalicButton.addItemListener( handler );
// create logical relationship between JRadioButtons
radioGroup = new ButtonGroup();
radioGroup.add( plainButton );
radioGroup.add( boldButton );
radioGroup.add( italicButton );
radioGroup.add( boldItalicButton );
// create font objects
plainFont = new Font( "Serif", Font.PLAIN, 14 );
boldFont = new Font( "Serif", Font.BOLD, 14 );
LSP Telematika Indonesia
152
italicFont = new Font( "Serif", Font.ITALIC, 14 );
boldItalicFont = new Font( "Serif", Font.BOLD + Font.ITALIC, 14 );
field.setFont( plainFont );
setSize( 300, 100 );
setVisible( true );
}
// execute application
public static void main( String args[] )
{
RadioButtonTest application = new RadioButtonTest();
application.setDefaultCloseOperation(
JFrame.EXIT_ON_CLOSE );
}
// private inner class to handle radio button events
private class RadioButtonHandler implements ItemListener {
// handle radio button events
public void itemStateChanged( ItemEvent event )
{
// user clicked plainButton
if ( event.getSource() == plainButton )
field.setFont( plainFont );
// user clicked boldButton
else if ( event.getSource() == boldButton )
field.setFont( boldFont );
// user clicked italicButton
else if ( event.getSource() == italicButton )
field.setFont( italicFont );
// user clicked boldItalicButton
else if ( event.getSource() == boldItalicButton )
field.setFont( boldItalicFont );
}
} // end private inner class RadioButtonHandler
} // end class RadioButtonTest
LSP Telematika Indonesia
153
•
ComboBox
Disebut juga drop-down list. User dapat memilih salah satu item yang ada
dalam list.
import java.awt.*;
import java.awt.event.*;
// Java extension packages
import javax.swing.*;
public class ComboBoxTest extends JFrame {
private JComboBox imagesComboBox;
private JLabel label;
private String names[] =
{ "bug1.gif", "bug2.gif", "travelbug.gif", "buganim.gif" };
private Icon icons[] = { new ImageIcon( names[ 0 ] ),
new ImageIcon( names[ 1 ] ), new ImageIcon( names[ 2 ] ),
new ImageIcon( names[ 3 ] ) };
// set up GUI
public ComboBoxTest()
{
super( "Testing JComboBox" );
// get content pane and set its layout
Container container = getContentPane();
container.setLayout( new FlowLayout() );
// set up JComboBox and register its event handler
imagesComboBox = new JComboBox( names );
imagesComboBox.setMaximumRowCount( 3 );
imagesComboBox.addItemListener(
// anonymous inner class to handle JComboBox events
new ItemListener() {
// handle JComboBox event
public void itemStateChanged( ItemEvent event )
{
// determine whether check box selected
if ( event.getStateChange() == ItemEvent.SELECTED )
label.setIcon( icons[
imagesComboBox.getSelectedIndex() ] );
LSP Telematika Indonesia
154
}
} // end anonymous inner class
); // end call to addItemListener
container.add( imagesComboBox );
// set up JLabel to display ImageIcons
label = new JLabel( icons[ 0 ] );
container.add( label );
}
setSize( 350, 100 );
setVisible( true );
// execute application
public static void main( String args[] )
{
ComboBoxTest application = new ComboBoxTest();
}
application.setDefaultCloseOperation(
JFrame.EXIT_ON_CLOSE );
} // end class ComboBoxTest
LSP Telematika Indonesia
155
4.7.2 Menangani Event dari Mouse
Interface
Event
Listener
untuk
mouse
terdiri
dari
MouseListener
dan
MouseMotionListener. Event yang ditangkap berupa MouseEvent. Method-method
yang ada pada interface MouseListener adalah :
1. mouseClicked : dipanggil ketika mouse menekan pada komponen
2. mouseEntered : dipanggil ketika mouse memasuki area komponen
3. mouseExited : dipanggil ketika mouse keluar dari area komponen
4. mousePressed : dipanggil ketika mouse sedang ditekan dalam komponen
5. mouseReleased : dipanggil ketika mouse telah setelah ditekan
Sedangkan method pada interface MouseMotionListener adalah :
1. mouseDragged : dipanggil ketika mouse ditekan sambil bergerak
2. mouseMoved : dipanggil ketika mouse bergerak dalam komponen.
Berikut ini adalah contoh kode untuk event mouse beserta hasil keluarannya :
Program : MouseTracker.java
import java.awt.*;
import java.awt.event.*;
// Java extension packages
import javax.swing.*;
public class MouseTracker extends JFrame
implements MouseListener, MouseMotionListener {
private JLabel statusBar;
// set up GUI and register mouse event handlers
public MouseTracker()
{
super( "Demonstrating Mouse Events" );
statusBar = new JLabel();
getContentPane().add( statusBar, BorderLayout.SOUTH );
// application listens to its own mouse events
addMouseListener( this );
addMouseMotionListener( this );
}
setSize( 275, 100 );
setVisible( true );
// MouseListener event handlers
// handle event when mouse released immediately after press
public void mouseClicked( MouseEvent event )
{
statusBar.setText( "Clicked at [" + event.getX() +
LSP Telematika Indonesia
156
}
", " + event.getY() + "]" );
// handle event when mouse pressed
public void mousePressed( MouseEvent event )
{
statusBar.setText( "Pressed at [" + event.getX() +
", " + event.getY() + "]" );
}
// handle event when mouse released after dragging
public void mouseReleased( MouseEvent event )
{
statusBar.setText( "Released at [" + event.getX() +
", " + event.getY() + "]" );
}
// handle event when mouse enters area
public void mouseEntered( MouseEvent event )
{
JOptionPane.showMessageDialog( null, "Mouse in window" );
}
// handle event when mouse exits area
public void mouseExited( MouseEvent event )
{
statusBar.setText( "Mouse outside window" );
}
// MouseMotionListener event handlers
// handle event when user drags mouse with button pressed
public void mouseDragged( MouseEvent event )
{
statusBar.setText( "Dragged at [" + event.getX() +
", " + event.getY() + "]" );
}
// handle event when user moves mouse
public void mouseMoved( MouseEvent event )
{
statusBar.setText( "Moved at [" + event.getX() +
", " + event.getY() + "]" );
}
// execute application
public static void main( String args[] )
{
MouseTracker application = new MouseTracker();
application.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE );
}
} // end class MouseTracker
LSP Telematika Indonesia
157
4.7.3 Menangani Event dari Keyboard
Event yang berasal dari keyboard ditangani oleh interface KeyListener. Event dari
keyboard terjadi ketika keyboard ditekan atau dilepaskan. Event yang ditangkap
tersimpan pada objek KeyEvent. Berikut ini adalah contoh kode penggunaan
event dari keyboard beserta hasil keluarannya :
Program : KeyDemo.java
import java.awt.*;
import java.awt.event.*;
// Java extension packages
import javax.swing.*;
public class KeyDemo extends JFrame implements KeyListener {
private String line1 = "", line2 = "";
private String line3 = "";
private JTextArea textArea;
// set up GUI
public KeyDemo()
{
super( "Demonstrating Keystroke Events" );
// set up JTextArea
textArea = new JTextArea( 10, 15 );
textArea.setText( "Press any key on the keyboard..." );
textArea.setEnabled( false );
getContentPane().add( textArea );
// allow frame to process Key events
addKeyListener( this );
setSize( 350, 100 );
setVisible( true );
}
// handle press of any key
public void keyPressed( KeyEvent event )
{
line1 = "Key pressed: " +
event.getKeyText( event.getKeyCode() );
setLines2and3( event );
LSP Telematika Indonesia
158
}
// handle release of any key
public void keyReleased( KeyEvent event )
{
line1 = "Key released: " +
event.getKeyText( event.getKeyCode() );
setLines2and3( event );
}
// handle press of an action key
public void keyTyped( KeyEvent event )
{
line1 = "Key typed: " + event.getKeyChar();
setLines2and3( event );
}
// set second and third lines of output
private void setLines2and3( KeyEvent event )
{
line2 = "This key is " +
( event.isActionKey() ? "" : "not " ) +
"an action key";
String temp =
event.getKeyModifiersText( event.getModifiers() );
line3 = "Modifier keys pressed: " +
( temp.equals( "" ) ? "none" : temp );
}
textArea.setText(
line1 + "\n" + line2 + "\n" + line3 + "\n" );
// execute application
public static void main( String args[] )
{
KeyDemo application = new KeyDemo();
application.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE );
}
} // end class KeyDemo
LSP Telematika Indonesia
159
4.7.4 Layout
Layout yang akan dibahas pada subbab ini adalah pengaturan posisi komponen
GUI. Berikut ini adalah jenis layout yang tersedia beserta deskripsinya :
Tabel 4.7.4.1 Penjelasan Layout
Layout
FlowLayout
BorderLayout
GridLayout
Deskripsi
Meletakkan komponen dari kiri ke kanan
Layout standard pada java. Meletakkan komponen
pada posisi utara, timur, barat, selatan dan tengah
Meletakkan komponen dalan 1 (satu) baris atau 1
(satu) kolom. Posisi awal di kiri atas lalu pengisian
dilakukan dari kiri ke kanan hingga baris penuh.
Berikut ini adalah contoh kode penggunaan tiap layout beserta hasil keluarannya:
Program : FlowLayoutDemo.java
import java.awt.*;
import java.awt.event.*;
// Java extension packages
import javax.swing.*;
public class FlowLayoutDemo extends JFrame {
private JButton leftButton, centerButton, rightButton;
private Container container;
private FlowLayout layout;
// set up GUI and register button listeners
public FlowLayoutDemo()
{
super( "FlowLayout Demo" );
layout = new FlowLayout();
// get content pane and set its layout
container = getContentPane();
container.setLayout( layout );
// set up leftButton and register listener
leftButton = new JButton( "Left" );
leftButton.addActionListener(
// anonymous inner class
new ActionListener() {
// process leftButton event
public void actionPerformed( ActionEvent event )
{
layout.setAlignment( FlowLayout.LEFT );
}
// re-align attached components
layout.layoutContainer( container );
LSP Telematika Indonesia
160
} // end anonymous inner class
); // end call to addActionListener
container.add( leftButton );
// set up centerButton and register listener
centerButton = new JButton( "Center" );
centerButton.addActionListener(
// anonymous inner class
new ActionListener() {
// process centerButton event
public void actionPerformed( ActionEvent event )
{
layout.setAlignment( FlowLayout.CENTER );
// re-align attached components
layout.layoutContainer( container );
}
}
);
container.add( centerButton );
// set up rightButton and register listener
rightButton = new JButton( "Right" );
rightButton.addActionListener(
// anonymous inner class
new ActionListener() {
// process rightButton event
public void actionPerformed( ActionEvent event )
{
layout.setAlignment( FlowLayout.RIGHT );
// re-align attached components
layout.layoutContainer( container );
}
}
);
container.add( rightButton );
}
setSize( 300, 75 );
setVisible( true );
// execute application
public static void main( String args[] )
{
FlowLayoutDemo application = new FlowLayoutDemo();
LSP Telematika Indonesia
161
}
application.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE );
} // end class FlowLayoutDemo
Program : BorderLayoutDemo.java
import java.awt.*;
import java.awt.event.*;
// Java extension packages
import javax.swing.*;
public class BorderLayoutDemo extends JFrame
implements ActionListener {
private JButton buttons[];
private String names[] = { "Hide North", "Hide South",
"Hide East", "Hide West", "Hide Center" };
private BorderLayout layout;
// set up GUI and event handling
public BorderLayoutDemo()
{
super( "BorderLayout Demo" );
layout = new BorderLayout( 5, 5 );
// get content pane and set its layout
Container container = getContentPane();
container.setLayout( layout );
// instantiate button objects
buttons = new JButton[ names.length ];
for ( int count = 0; count < names.length; count++ ) {
buttons[ count ] = new JButton( names[ count ] );
buttons[ count ].addActionListener( this );
}
// place buttons in BorderLayout; order not important
container.add( buttons[ 0 ], BorderLayout.NORTH );
container.add( buttons[ 1 ], BorderLayout.SOUTH );
LSP Telematika Indonesia
162
container.add( buttons[ 2 ], BorderLayout.EAST );
container.add( buttons[ 3 ], BorderLayout.WEST );
container.add( buttons[ 4 ], BorderLayout.CENTER );
setSize( 300, 200 );
setVisible( true );
}
// handle button events
public void actionPerformed( ActionEvent event )
{
for ( int count = 0; count < buttons.length; count++ )
if ( event.getSource() == buttons[ count ] )
buttons[ count ].setVisible( false );
else
buttons[ count ].setVisible( true );
// re-layout the content pane
layout.layoutContainer( getContentPane() );
}
// execute application
public static void main( String args[] )
{
BorderLayoutDemo application = new BorderLayoutDemo();
}
application.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE );
} // end class BorderLayoutDemo
LSP Telematika Indonesia
163
Program : GridLayoutDemo.java
import java.awt.*;
import java.awt.event.*;
// Java extension packages
import javax.swing.*;
public class GridLayoutDemo extends JFrame
implements ActionListener {
private JButton buttons[];
private String names[] =
{ "one", "two", "three", "four", "five", "six" };
private boolean toggle = true;
private Container container;
private GridLayout grid1, grid2;
// set up GUI
public GridLayoutDemo()
{
super( "GridLayout Demo" );
// set up layouts
grid1 = new GridLayout( 2, 3, 5, 5 );
grid2 = new GridLayout( 3, 2 );
// get content pane and set its layout
container = getContentPane();
container.setLayout( grid1 );
// create and add buttons
buttons = new JButton[ names.length ];
for ( int count = 0; count < names.length; count++ ) {
buttons[ count ] = new JButton( names[ count ] );
buttons[ count ].addActionListener( this );
container.add( buttons[ count ] );
}
setSize( 300, 150 );
setVisible( true );
}
// handle button events by toggling between layouts
public void actionPerformed( ActionEvent event )
{
if ( toggle )
container.setLayout( grid2 );
else
container.setLayout( grid1 );
toggle = !toggle; // set toggle to opposite value
container.validate();
}
// execute application
LSP Telematika Indonesia
164
public static void main( String args[] )
{
GridLayoutDemo application = new GridLayoutDemo();
}
application.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE );
} // end class GridLayoutDemo
4.8 Pemrograman Jaringan
4.8.1 Jaringan
Komunikasi antara computer dalam internet dengan menggunakan Transmission
Control Protocol (TCP) atau User Datagram Protocol (UDP), berikut ini adalah
gambarannya :
Gambar 4.8.1 Jaringan
Ketika kita menulis program dalam bahasa Java di jaringan, kita melakukannya
pada layer aplikasi. Kita tidak perlu memikirkan TCP atau UDP karena itu semua
telah
tercakup
dalam
paket
java.net.
Kelas-kelas
dalam
paket
tersebut
menyediakan cara berkomunikasi dalam jaringan. Kelas URL, URLConnection,
Socket dan ServerSocket menggunakan TCP untuk berkomunikasi sedangkan
kelas DatagramPacket, DatagramSocket dan MulticastSocket menggunakan UDP.
LSP Telematika Indonesia
165
4.8.2 Socket
URL dan URLConnection menyediakan mekanisme tingkat tinggi untuk mengakses
resource
di
internet.
Tetapi,
terkadang
program
yang
kita
tulis
hanya
membutuhkan komunikasi jaringan pada tingkat yang rendah, sebagai contoh
menulis aplikasi client-server. Komunikasi yang terjadi antara client dan server
harus dapat diandalkan, dimana data yang tiba di client mempunyai urutan yang
sama ketika dikirim oleh server. TCP menyediakan channel komunikasi yang
dapat diandalkan, point to point yang dapat digunakan aplikasi client server
untuk berkomunikasi. Untuk melakukan komunikasi dengan TCP maka program
client dan server membuat koneksi dan mengikat socket diakhir koneksi.
Sedangkan untuk melakukan komunikasi, baik client atau server membaca dari
dan menulis ke socket.
Definisi socket adalah endpoint dari link komunikasi 2 arah antara 2 program
yang berjalan di jaringan. Sebuah socket terikat pada sebuah nomor port dengan
tujuan agar layer TCP dapat mengenali aplikasi yang menjadi tujuan pengiriman
data.
Paket
java.net
pada
platform
Java
menyediakan
kelas
Socket
yang
mengimplementasikan salah satu sisi dari komunikasi 2 arah antara program java
yang kita tulis dan program lain di jaringan. Sebagai tambahan, java.net juga
menyediakan kelas ServerSocket yang mengimplementasikan sebuah socket
yang dapat digunakan server untuk mendengar dan menerima koneksi ke klien.
Selanjutnya, kita akan belajar untuk menulis dan membaca dari socket.
Perhatikan kode di bawah ini :
import java.io.*;
import java.net.*;
public class EchoClient {
public static void main(String[] args) throws IOException {
Socket echoSocket = null;
PrintWriter out = null;
BufferedReader in = null;
try {
echoSocket = new Socket("taranis", 7);
out = new PrintWriter(echoSocket.getOutputStream(), true);
in = new BufferedReader(new InputStreamReader(
echoSocket.getInputStream()));
} catch (UnknownHostException e) {
System.err.println("Don't know about host: taranis.");
System.exit(1);
} catch (IOException e) {
LSP Telematika Indonesia
166
}
System.err.println("Couldn't get I/O for "
+ "the connection to: taranis.");
System.exit(1);
BufferedReader stdIn = new BufferedReader(
new InputStreamReader(System.in));
String userInput;
while ((userInput = stdIn.readLine()) != null) {
out.println(userInput);
System.out.println("echo: " + in.readLine());
}
out.close();
in.close();
stdIn.close();
echoSocket.close();
}
}
Program di atas mengimplementasikan sebuah client, EchoClient yang akan
berkomunikasi dengan Echo server. Echo server hanya menerima data dari klien
dan mengirimkan kembali data tersebut. Echo server menggunakan port 7.
EchoClient membuat socket sehingga membuat koneksi dengan Echo server,
kemudian membaca input dari user lalu meneruskan teks tersebut ke Echo server
dengan menuliskannya di socket. Server mengembalikan input client dengan
mengirimkan
input
tersebut
lewat
socket.
Program
client
membaca
dan
menampilkan data yang diterima dari server. Berikut ini adalah kode untuk
membuat koneksi socket antara client dengan server serta membuat objek
PrintWriter dan BufferedReader sehingga program dapat menulis karakter
Unicode di socket.
echoSocket = new Socket("taranis", 7);
out = new PrintWriter(echoSocket.getOutputStream(), true);
in = new BufferedReader(new InputStreamReader(
echoSocket.getInputStream()));
Untuk mengirim data ke server, EchoClient cukup menuliskannya ke PrintWriter
sedangkan untuk memperoleh respon dari server, EchoClient hanya perlu
membaca dari BufferedReader.
Menulis Program Server
Program server dimulai dengan membuat objek ServerSocket untuk mendengan
dari port tertentu. Ketika menulis ke server, pilih port yang sedang tidak
digunakan. Program di atas menggunakan port 4444.
LSP Telematika Indonesia
167
try {
serverSocket = new ServerSocket(4444);
} catch (IOException e) {
System.out.println("Could not listen on port: 4444");
System.exit(-1);
}
Apabila port yang kita pilih telah digunakan oleh servis yang lain maka program
akan berakhir. Apabila server telah berhasil terhubung dengan port maka objek
ServerSocket telah terbentuk dan langkah selanjutnya adalah menerima koneksi
dari client (ditunjukkan oleh tulisan yang ditebalkan).
Socket clientSocket = null;
try {
clientSocket = serverSocket.accept();
} catch (IOException e) {
System.out.println("Accept failed: 4444");
System.exit(-1);
}
Method accept menunggu hingga client aktif dan meminta koneksi dengan host
dan port server. Ketika koneksi telah berhasil tercipta maka method accept akan
mengembalikan objek socket yang terikat pada nomor port. Server dapat
berkomunikasi dengan client dengan socket ini. Program ini tidak mendukung
multiple client. Komunikasi antara server dan client dengan menggunakan kode :
PrintWriter out = new PrintWriter(
clientSocket.getOutputStream(), true);
BufferedReader in = new BufferedReader(
new InputStreamReader(
clientSocket.getInputStream()));
String inputLine, outputLine;
// initiate conversation with client
KnockKnockProtocol kkp = new KnockKnockProtocol();
outputLine = kkp.processInput(null);
out.println(outputLine);
while ((inputLine = in.readLine()) != null) {
outputLine = kkp.processInput(inputLine);
out.println(outputLine);
if outputLine.equals("Bye."))
break;
}
Setelah komunikasi berakhir kode di bawah ini digunakan untuk menutup input
dan output stream, client socket dan server socket.
out.close();
LSP Telematika Indonesia
168
in.close();
clientSocket.close();
serverSocket.close();
4.9 JDBC API
JDBC API ( Java Connectivity Application Programming Interface ) berfungsi untuk
melakukan koneksi antara basis data dengan program yang ditulis dengan bahasa
pemrograman Java. Sehingga dengan demikian, kita dapat melakukan query
terhadap data dalam basis data yang kemudian data tersebut dapat ditampilkan
melalui console atau melalui Graphical User Interface (GUI). Isi JDBC berupa
kelas-kelas yang dapat digunakan untuk koneksi ke basis data tertentu,
memproses permintaan dari client dan mengirim respon dari server sesuai
dengan permintaan. Pada subbab berikutnya kita akan mempelajari penggunaan
JDBC dengan basis data SQL Server 2000 dan data akan ditampilkan dalam GUI.
4.9.1 Koneksi SQL Server 2000
Sebelum SQL Server 2000 mendukung koneksi dengan Java, ODBC (Open
Database Connectivity) dijadikan alternatif untuk melakukan koneksi. Namun
pada tanggal 16 Januari 2003, Microsoft merilis driver SQL Server 2000 bagi
JDBC sehingga untuk melakukan koneksi, kita tidak perlu lagi menggunakan
ODBC.
Driver
SQL
Server
2000
untuk
http://www.microsoft.com/sql/downloads.
JDBC
Langkah
dapat
awal
diperoleh
untuk
dari
url
melakukan
koneksi adalah mengimpor paket java.sql yang dituliskan dalam kode :
import java.sql.*;
Setelah itu, kita dapat memakai driver SQL server 2000 untuk JDBC bersama
dengan pernyataan Class.forName(). Berikut ini adalah contoh kodenya :
Class.forName(”com.microsoft.jdbc.sqlserver.SQLServerDriver”);
Kemudian kita membuat koneksi ke SQL Serever 2000 dengan menuliskan kode :
Connection con =
DriverManager.getConnection(“jdbc:microsoft:sqlserver://PENTIUM:1433;
DatabaseName=Northwind”, “sa”, “admin”);
Berdasarkan pernyataan diatas, ada beberapa hal yang harus disesuaikan dengan
keadaan komputer kita. PENTIUM dalam pernyataan diatas adalah nama
komputer tetapi bisa juga berisi alamat TCP/IP komputer server jika terkoneksi
pada jaringan dan kita berusaha melakukan koneksi ke SQL Server. Selanjutnya
merupakan port TCP/IP yang digunakan defaultnya 1433. DatabaseName
merupakan nama basis data yang akan kita akses. Selanjutnya, sa dan admin
LSP Telematika Indonesia
169
merupakan user name dan password dari SQL Server 2000 yang digunakan untuk
mengakses basis data. Berikut ini adalah contoh kode lengkap cara koneksi basis
data dengan JDBC :
Program : Koneksi.java
Import java.sql.*;
Class Koneksi
{
public static void main(String[] args)
{
try
{
Class.forName(”com.microsoft.jdbc.sqlserver.SQLServerDriver”);
Connection con =
DriverManager.getConnection(“jdbc:microsoft:sqlserver:
//PENTIUM:1433;DatabaseName=Northwind”, “sa”, “admin”);
con.close();
System.out.println(“Koneksi berhasil…!!!”)
System.exit(0);
}
catch(ClassNotFoundException aClass)
{
System.out.println(“Driver tidak ada”);
}
catch(SQLException aSql)
{
System.out.println(aSql.getMessage());
}
}
}
Dalam kode diatas kita menggunakan perintah try-catch yang berfungsi untuk
mengetahui
apabila
terjadi
kesalahan.
Catch
pertama
untuk
menangkap
kesalahan jika driver tidak ditemukan, sedangkan catch yang kedua befungsi
untuk menangkap kesalahan pada username dan password. Setelah kode di atas
dijalankan maka hasil tampilannya sebagai berikut :
LSP Telematika Indonesia
170
Gambar 4.9.1.1 Tampilan Program Koneksi.java
4.8.2
Operasi Basis Data Dengan JDBC
Dalam basis data beberapa operasi yang dapat dilakukan diantaranya adalah
memperoleh data, menambah data, mengubah data dan menghapus data.
Berikut ini adalah contoh kode untuk tiap operasi beserta penjelasannya :
1. Menampilkan data
Menampilkan data dari basis data dapat dilakukan apabila koneksi ke basis
data telah berhasil dilakukan. Perhatikan contoh kode dibawah ini :
Program : Lihat.java
import java.sql.*;
class Lihat
{
public static void main(String[] args)
{
try
{
Class.forName("com.microsoft.jdbc.sqlserver.SQLServerDriver");
Connection con=DriverManager.getConnection
("jdbc:microsoft:sqlserver://PENTIUM:1433;DatabaseName=Northwind",
"sa","admin");
Statement stat = con.createStatement();
ResultSet rs = stat.executeQuery("Select * from Customers");
while(rs.next())
{
System.out.println("Customer ID : "
+ rs.getString("CustomerID"));
System.out.println("Company Name : "
+ rs.getString("CompanyName"));
System.out.println("Constact Name : "
LSP Telematika Indonesia
171
+ rs.getString("ContactName"));
System.out.println("Contact Title : "
+ rs.getString("ContactTitle"));
System.out.println("Address : "
+ rs.getString("Address"));
System.out.println("City : "
+ rs.getString("City"));
System.out.println("Region : "
+ rs.getString("Region"));
System.out.println("Postal Code : "
+ rs.getString("PostalCode"));
System.out.println("Country : "
+ rs.getString("Country"));
System.out.println("Phone : "
+ rs.getString("Phone"));
System.out.println("Fax : "
+ rs.getString("Fax"));
System.out.println("\n");
}
con.close();
System.exit(0);
}
catch(ClassNotFoundException eclass)
{
System.out.println("Driver tidak ada");
}
catch(SQLException esql)
{
System.out.println(esql.getMessage());
}
}
}
Untuk melakukan query ke basis data. Kita perlu mendeklarasikan variable
dengan tipe statement. Variable tersebut akan menjalankan pernyataan
SQL. Selain itu, kita juga perlu mendeklarasikan variable dengan tipe
ResultSet yang berfungsi untuk menampung data hasil query. Setelah kita
mendapatkan data, kita perlu menampilkan data tersebut selama masih
ada. Untuk itu, kita menggunakan While dengan method next untuk
memindahkan kursor ke data berikutnya. Setelah data ditampilkan,
koneksi basis data ditutup dan program berakhir. Hasil tampilan untuk
kode diatas adalah sebagai berikut :
LSP Telematika Indonesia
172
Gambar 4.9.2.1 Tampilan Program Lihat.java
2. Menambah data
Setelah berhasil mengakses basis data, selanjutnya kita akan mencoba
menambah
data ke basis data. Berikut ini adalah contoh kode untuk menambah data
dalam basis data :
Program : InputConsole.java
import java.io.*;
import java.sql.*;
public class InputConsole
{
public static void main(String args[]) {
try
{
// untuk menerima input dari console
BufferedReader stdin = new
BufferedReader(new InputStreamReader(System.in));
String id, name, contact, title, address,
city, region, code, country, phone, fax ;
System.out.println("Data Baru : ");
System.out.print("Customer ID : ");
id = stdin.readLine();
System.out.print("Company Name : ");
name = stdin.readLine();
System.out.print("Contact Name : ");
contact = stdin.readLine();
System.out.print("Contact Title : ");
title = stdin.readLine();
System.out.print("Address : ");
address = stdin.readLine();
LSP Telematika Indonesia
173
System.out.print("City : ");
city = stdin.readLine();
System.out.print("Region : ");
region = stdin.readLine();
System.out.print("Postal Code : ");
code = stdin.readLine();
System.out.print("Country : ");
country = stdin.readLine();
System.out.print("Phone : ");
phone = stdin.readLine();
System.out.print("Fax : ");
fax = stdin.readLine();
Class.forName("com.microsoft.jdbc.sqlserver.SQLServerDriver");
Connection con = DriverManager.getConnection
("jdbc:microsoft:sqlserver://PENTIUM:1433;DatabaseName=Northwind",
"sa","admin");
Statement stat = con.createStatement();
String sql="insert into Customers values('" +
id + "','" +
name + "','" +
contact + "','" +
title + "','" +
address + "','" +
city + "','" +
region + "','" +
code + "','" +
country + "','" +
phone + "','" +
fax + "')";
stat.executeUpdate(sql);
stat.close();
con.close();
System.out.println("Input data berhasil");
}
catch (Exception e)
{
System.out.println("Error : " + e);
}
}
}
Seperti sebelumnya, kita perlu mendeklarasikan variable yang berfungsi
menjalankan pernyataan SQL. Kemudian deklarasikan variable dengan tipe
String yang berisi pernyataan SQL untuk menerima input. Setelah itu jalan
pernyataan SQL dengan method executeUpdate(string input). Setelah data
berhasil dimasukkan ke basis data, koneksi pada basis data dapat ditutup.
Hasil tampilan untuk kode diatas adalah sebagai berikut :
LSP Telematika Indonesia
174
Gambar 4.9.2.2 Tampilan Program InputConsole.java
3. Mengubah Data
Untuk melakukan pengubahan data, kita harus menemukan data yang
akan diubah lalu mengubah data tersebut. Berikut ini adalah contoh kode
untuk mengubah data:
Program : EditConsole.java
import java.io.*;
import java.sql.*;
public class EditConsole
{
public static void main(String args[])
{
try
{
BufferedReader stdin = new
BufferedReader(new InputStreamReader(System.in));
String id, name, contact, title, address,
city, region, code, country, phone, fax ;
System.out.println("Data yang akan diedit : ");
System.out.print("Customer ID : ");
id = stdin.readLine();
Class.forName("com.microsoft.jdbc.sqlserver.SQLServerDriver");
Connection con = DriverManager.getConnection
("jdbc:microsoft:sqlserver://PENTIUM:1433;DatabaseName=Northwind",
"sa","admin");
Statement stat = con.createStatement();
String sql="select * from Customers where CustomerID='"+id+"'";
LSP Telematika Indonesia
175
ResultSet rs = stat.executeQuery(sql);
if (rs.next())
{
System.out.println("Company Name : " +
rs.getString("CompanyName"));
System.out.println("Contact Name : " +
rs.getString("ContactName"));
System.out.println("Contact Title : " +
rs.getString("ContactTitle"));
System.out.println("Address : " +
rs.getString("Address"));
System.out.println("City : " +
rs.getString("City"));
System.out.println("Region : " +
rs.getString("Region"));
System.out.println("Postal Code : " +
rs.getString("PostalCode"));
System.out.println("Country : " +
rs.getString("Country"));
System.out.println("Phone : " +
rs.getString("Phone"));
System.out.println("Fax : " +
rs.getString("fax"));
System.out.println();
System.out.println("Diganti dengan Data : ");
System.out.print("Company Name : ");
name = stdin.readLine();
System.out.print("Contact Name : ");
contact = stdin.readLine();
System.out.print("Contact Title : ");
title = stdin.readLine();
System.out.print("Address : ");
address = stdin.readLine();
System.out.print("City : ");
city = stdin.readLine();
System.out.print("Region : ");
region = stdin.readLine();
System.out.print("Postal Code : ");
code = stdin.readLine();
System.out.print("Country : ");
country = stdin.readLine();
System.out.print("Phone : ");
phone = stdin.readLine();
System.out.print("Fax : ");
fax = stdin.readLine();
sql= "Update Customers set " +
"CompanyName='" + name + "'," +
"ContactName='" + contact + "'," +
"ContactTitle='" + title + "'," +
"Address='" + address + "'," +
"City='" + city + "'," +
"Region='" + region + "'," +
"PostalCode='" + code + "'," +
"Country='" + country + "'," +
LSP Telematika Indonesia
176
"Phone='" + phone + "'," +
"Fax='" + fax + "'"+
"where CustomerID='" + id + "'";
stat.executeUpdate(sql);
}
else
{
System.out.println("Tidak ditemukan data");
System.out.println("dengan CustomerID tersebut!");
}
stat.close();
con.close();
}
catch (Exception e)
{
System.out.println("Error : " + e);
}
}
}
Kode diatas menampilkan data lama yang akan diubah kemudian meminta
input data baru yang digunakan untuk menggantikan data lama. Hasil
tampilan untuk kode diatas adalah sebagai berikut :
Gambar 4.9.2.3 Tampilan Program EditConsole.java
LSP Telematika Indonesia
177
4. Menghapus data
Langkah-langkah untuk menghapus data, memiliki kemiripan dengan
mengubah data. Awalnya data yang akan dihapus dicari terlebih dahulu,
setelah ditemukan barulah data tersebut dihapus.
import java.io.*;
import java.sql.*;
public class HapusConsole
{
public static void main(String args[])
{
try
{
BufferedReader stdin = new
BufferedReader(new InputStreamReader(System.in));
String id, jawab;
System.out.println("Data yang akan dihapus : ");
System.out.print("Customer ID : ");
id = stdin.readLine();
Class.forName("com.microsoft.jdbc.sqlserver.SQLServerDriver");
Connection con = DriverManager.getConnection
("jdbc:microsoft:sqlserver://PENTIUM:1433;DatabaseName=Northwind",
"sa","admin");
Statement stat = con.createStatement();
String sql="select * from Customers where CustomerID='"+id+"'";
ResultSet rs = stat.executeQuery(sql);
if (rs.next())
{
System.out.println("Company Name : " +
rs.getString("CompanyName"));
System.out.println("Contact Name : " +
rs.getString("ContactName"));
System.out.println("Contact Title : " +
rs.getString("ContactTitle"));
System.out.println("Address : " +
rs.getString("Address"));
System.out.println("City : " +
rs.getString("City"));
System.out.println("Region : " +
rs.getString("Region"));
System.out.println("Postal Code : " +
rs.getString("PostalCode"));
System.out.println("Country : " +
rs.getString("Country"));
System.out.println("Phone : " +
rs.getString("Phone"));
System.out.println("Fax : " +
rs.getString("fax"));
System.out.print("Dihapus (Y/T) ? ");
jawab = stdin.readLine();
LSP Telematika Indonesia
178
if (jawab.equalsIgnoreCase("Y"))
{
sql="delete from Customers where " +
"CustomerID='" + id + "'" ;
stat.executeUpdate(sql);
System.out.println("Data telah dihapus!");
}
stat.executeUpdate(sql);
}
else
{
System.out.println("Tidak ditemukan data");
System.out.println("dengan Customer ID tersebut!");
}
stat.close();
con.close();
}
catch (Exception e)
{
System.out.println("Error : " + e);
}
}
}
Dengan kode di atas, sebelum dilakukan penghapusan data program akan
menampilkan kembali data yang akan dihapus serta melakukan konfirmasi
penghapusan data. Hasil tampilan untuk kode diatas adalah sebagai
berikut :
Gambar 4.9.2.4 Tampilan Program HapusConsole.java
LSP Telematika Indonesia
179
4.10
Untuk
JavaServer Page (JSP)
membuat
aplikasi
web yang
komplek,
penulis
menyarankan
anda
menginstal J2EE yang medukung aplikasi JSP, servlet dan Enterprise Java Bean.
JSP adalah sebuah template web page yang menggunakan kode java untuk
menghasilkan file HTML secara dinamis. JSP berjalan di komponen server yang
disebut JSP container yang menterjemahkannya ke Java Servlet. Keuntungan dari
penggunaan JSP adalah :
1. Memiliki kinerja dan skalabilitas yang lebih baik dibandingkan script CGI
2. Tidak membutuhkan cara menghidupkan klien secara khusus
3. Mendukung HTTP Session
4. Memiliki akses penuh ke teknologi Java
5. Melakukan kompilasi secara otomatis
6. Tidak membutuhkan URL khusus untuk mengakses
7. Memiliki kecocokan dengan alat pengembangan web.
Halaman JSP terdiri dari 3 (tiga) bentuk, yaitu :
1. Kode JSP
Dibuat oleh programmer. Terdiri dari file teks dengan ekstension .jsp serta
mengandung campuran dari kode HTML, statement Java dan perintahperintah JSP serta aksi yang mendefinisikan cara untuk menghasilkan web
page untuk melakukan task tertentu.
2. Kode Java
JSP container menterjemahkan kode JSP menjadi kode untuk java servlet.
3. Java class yang telah dikompilasi
Kode servlet yang dihasilkan telah dikompilasi menjadi kode byte dengan
ekstension .class.
Gambar 4.10.1 Halaman JSP
Ketika ada permintaan terhadap halaman JSP maka yang dilakukan container
pertama kali adalah menentukan nama kelas dari file JSP yang bersangkutan.
Apabila kelas tidak ditemukan atau kode JSP telah berubah ketika terakhir kali di
kompilasi maka java container akan membuat kode java untuk servlet yang
LSP Telematika Indonesia
180
bersesuaian dan melakukan kompilasi. Langkah terakhir adalah java melepaskan
thread untuk menangani permintaan HTTP di objek yang sedang digunakan.
Berikut ini adalah contoh kode sederhana beserta hasil keluarannya dari halaman
JSP untuk melakukan konversi dari kilometer per liter menjadi miles per gallon :
<%@
<%@
<%@
<%@
page
page
page
page
session="false" %>
import="java.io.*" %>
import="java.text.*" %>
import="java.util.*" %>
<%-- Prints a conversion table of miles per gallon to kilometers per liter --%>
<%!
%>
private static final DecimalFormat FMT
= new DecimalFormat("#0.00");
private static final double CONVERSION_FACTOR = 2.352145;
<html>
<head>
<title>Fuel Efficiency Conversion Chart</title>
</head>
<body>
<center>
<h1>Fuel Efficiency Conversion Chart</h1>
<table border="1" cellpadding="3" cellspacing="0">
<tr>
<th>Kilometers per liter</th>
<th>Miles per Gallon</th>
</tr>
<%
for(double kmp1=5; kmp1 <= 20; kmp1 += 1.0>) {
double mpg = kmp1*CONVERSION_FACTOR;
%>
<tr>
<td align="right"><%= FMT.format(kmp1) %></td>
<td align="right"><%= FMT.format(mpg) %></td>
</tr>
<%> } %>
</table>
</center>
</body>
</html>
Instalasi
Aplikasi JSP dapat berjalan dengan menggunakan server Apache tomcat. Berikut
ini adalah cara instalasi-nya. Versi Apache tomcat yang akan dijelaskan cara
instalasinya adalah versi 5.5.
1. Install JDK
Tomcat 5.5 dirancang untuk berjalan diatas J2SE 5.0 tetapi bisa juga
berjalan diatas JDK 1.4 dengan menggunakan paket compatability.
Aplikasi J2SE dapat ditemukan di http://java.sun.com/j2se/.
LSP Telematika Indonesia
181
2. Install Tomcat
Download file Tomcat di http://jakarta.apache.org. Instalasi di windows
sama seperti wizard installer. Setelah instalasi selesai aktifkan server
Tomcat, lalu buka browser dan masukkan http://localhost:8080. Apabila
instalasi berhasil maka akan ditampilkan halaman seperti di bawah ini :
Gambar 4.10.2 Test File Instalasi Tomcat
4.10.1 Komponen JSP
Pada bab ini akan dijelaskan mengenai komponen yang digunakan JSP,
menjelaskan cara penulisan (sintaks) serta artinya (semantic).
Komponen dari halaman JSP
File .jsp dapat terdiri dari tag JSP, template data atau kombinasi dari keduanya.
Tag jsp adalah instruksi untuk JSP container mengenai cara kode dihasilkan dan
cara menjalankannya. Tag-tag ini memiliki tag pembuka dan tag penutup yang
dapat dikenali oleh JSP container. Template data adalah bagian lain yang tidak
dikenali JSP container. Template data (umumnya HTML) diteruskan tanpa
mengalami modifikasi. Ada 3 (tiga) tipe dari tag JSP :

Perintah
Perintah adalah instruksi untuk JSP container mengenai kode yang akan
dihasilkan. Bentuk dari perintah adalah :
LSP Telematika Indonesia
182
<%@ nama_perintah [nama_atribut=”nilai_atribut” ...] %>
Spasi, tab dan baris baru dapat muncul setelah <%@ dan sebelum %>
dan juga dapat muncul setelah nama_perintah dan diantara pasangan
nama_atribut/nilai_atribut.
File
yang
mengandung
<%@
juga
mengandung %>. Spesifikasi JSP 1.2 mendefinisikan 3 (tiga) standar
perintah yang dapat digunakan dalam lingkungan JSP :
1. Page
Perintah page digunakan untuk menentukan atribut dari file JSP
secara keseluruhan. Sintaksnya adalah :
<%@ page [nama_atribut=”nilai_atribut”...] %>
Beberapa atribut dalam perintah ini diantaranya adalah language,
extends dan session. Atribut language menentukan bahasa yang
digunakan dalam scriptlets, ekspresi dan deklarasi. Pada spesifikasi
JSP 1.2 satu-satunya nilai dari atribut language adalah java. Atribut
extends menentukan nama superclass yang digunakan dalam file
JSP. Superclass adalah kelas yang mengimplementasi HttpJspPage
interface. Atribut session bernilai true atau false. Jika bernilai true
maka servlet yang dihasilkan akan mengandung kode untuk HTTP
session.
2. Include
Perintah include menggabungkan isi dari file lain ketika perubahan
menjadi input stream .jsp, seperti #include pada perintah bahasa
C. Sintaks perintah ini adalah :
<%@ include file=”filename” %>
filename
adalah
alamat
absolute
atau
relative
yang
akan
terjemahkan sesuai konteks dari servlet yang berlaku, contoh :
<%@ include file=”/header.html” %>
<%@ include file=”/doc/legal/disclaimer.html” %>
<%@ include file=”sortmethod” %>
3. taglib
Perintah taglib memungkinkan akse-aksi dapat dilakukan pada file
melalui penggunaan kumpulan tag. Sintaks perintah ini adalah :
<%@
taglib
url=”tagLibraryURL”
prefix=”tagPrefix”
%>
tagLibraryURL adalah URL dari kumpulan tag sedangkan prefix
adalah penamaan tag yang kita tentukan sendiri. Contoh :
<%@
tglib
url=”/tlds/FancyTableGenerator.tld”
prefix=”ft” %>
LSP Telematika Indonesia
183
jika FancyTableGenerator.tld mendefinisikan tag bernama table
maka halam JSP dalam mengandung tag dengan tipe :
<ft:table> ... </ft:table>.

Element scripting termasuk di dalamnya ekspresi, scriptlets dan deklarasi
JSP menyediakan cara mudah untuk mengakses nilai variabel Java atau
ekspresi lain dan menggabungkan nilainya dengan HTML di halaman yang
sama. Sintaksnya adalah :
<%=exp%>
exp adalah ekspresi dalam java. Ekspresi dapat memiliki tipe data yang
berbeda asalkan bisa dikonversi menjadi string. Konversi dilakukan hanya
dengan menghasilkan perintah out.print(). Contoh kode JSP :
the current time is <%= new java.util.Date() %>
akan menghasilkan kode servlet :
out.write(“The current time is “);
out.print( new java.util.Date() );
out.write(“\r\n”);
Scriptlet adalah sekumpulan statement-statement yang bertujuan untuk
memproses permintaan HTTP. Sintaks dari scriptlet adalah :
<% statement; [statement;...] %>
Kompilator JSP akan memasukkan isi scriptlet verbatim ke dalam method
_jspService() sesuai urutan penulisan kode. Sebuah scriptlet dapat
mengandung symbol ({} yang ditutup di scriplet lain. Perhatikan contoh
file JSP dibawah ini :
<%@ page import =”java.text.*” session=”false” >
<html>
<head>
<title>Scriptlet Example</title>
</head>
<body>
<table border=”0” cellpadding=”3”>
<tr>
<th> Fahrenheit</th>
<th>Celcius</th>
</tr>
<%
NumberFormat fmt = new DecimalFormat(“###.000”);
for (int f=32; f<=212; f +=20) {
double c = ((f-32) * 5) / 10.0;
String cs = fmt.format(c);
%>
<tr>
<td align=”RIGHT”><%= f %></td>
<td align=”RIGHT”><%= cs %></td>
</tr>
<%
}
LSP Telematika Indonesia
184
%>
</table>
</body>
</html>
Kode diatas terdiri dari 2 (dua) scriptlet, satu pada loop dan lainnya untuk
menutup ( { }. Diantara kedua scriptlet, terdapat kode HTML untuk
menghasilkan sebaris tabel, menggunakan ekspresi JSP untuk mengakses
nilainya. Kode servlet yang dihasilkan mengubah scriptlet dan kode yang
ada diantaranya menjadi seperti dibawah.
NumberFormat fmt = new DecimalFormat(“###.000”);
for (int f=32; f <= 212; f += 20) {
double c = ((f-32) * 5) / 9.0;
String cs = fmt.format(c);
out.write(“\r\n
<tr>\r\n
<td align=\”RIGHT\”>”);
out.print(f);
out.write(“</td>\r\n
<tr>\r\n
<td
align=\”RIGHT\”>”);
out.print(cs);
out.write(“</td>\r\n
<tr>\r\n”);
}
Hasil keluarannya seperti di bawah ini :
Fahrenheit
32
52
72
92
112
132
152
172
192
212
Celcius
.000
11.111
22.222
33.333
44.444
55.556
66.667
77.778
88.889
100.000
Deklarasi mengandung statement java tetapi berbeda dengan scriptlet,
deklarai berada di luar method _jspService(). Sintaks dari deklarasi
adalah :
<%! statement [statement...] %>
Deklarasi dapat digunakan untuk mendeklarasi kelas atau instance
variabel, method atai inner class. Berbeda dengan scriplet, deklarasi tidak
memiliki akses ke objek implicit. Objek implicit adalah variable yang bisa
berada dalam scriptlet dan ekspresi, bisa diakses seperti variable lainnya
tetapi tidak perlu dideklarasi terlebih dahulu.
LSP Telematika Indonesia
185
Spesifikasi JSP menyediakan 2 (dua) cara untuk memasukkan comments
dalam file JSP yaitu hidden comment yang hanya terlihat dalam file JSP itu
sendiri dan comment HTML atau XML yang dapat digunakan dalam file
JSP. Sintaks dari hidden comment adalah sebagai berikut :
<%-- This is a hidden JSP Comment --%>
sedangkan sintaks dari comment HTML atau XML :

Ketika kompilator JSP menemukan tag <%-- maka semua yang berada
diantara tag ini kanad diabaikan hingga kompilator menemukan tag --%>

Aksi
Aksi adalah tag JSP tingkat tinggi yang dapat digunakan untuk membuat,
memodifikasi atau menggunakan objek lain. Berbeda dengan tag perintah
atau scripting, aksi dikodekan menggunakan sintaks XML yang ketat :
<tagname [attr=”valew” attr=”value”...]>...</tag-name>
atau, jika aksi tidak memiliki statement diantaranya maka penulisan kode
dapat dipersingkat menjadi :
<tagname [attr=”value” attr=”value”...]/>
Aturan XML mengharuskan :
1. Setiap tag memiliki tag penutup
2. Nilai atribut diawali dan diakhiri dengan symbol kutip (“)
3. Pasangan tag harus sesuai
Beberapa contoh aksi diantaranya adalah :
•
jsp:include
Mengikutsertakan sebuah file ketika suatu halaman diakses
•
jsp:useBean
Mencari atau membuat objek baru dari JavaBean
•
jsp:setProperty
Mengeset properti dari JavaBean
•
jsp:getProperty
Memasukkan properti dari JavaBean ke output
•
jsp:forward
Meneruskan ke halaman baru
•
jsp:plugin
Menghasilkan kode dari browser tertentu yang membuat objek atau
tag yang disisipkan untuk Java plugin
Berikut ini adalah contoh kode JSP yang menggunakan semua tag yang telah
dijelaskan sebelumnya. Kode ini dinamakan Echo.jsp yang berfungsi untuk
LSP Telematika Indonesia
186
menampilkan tabel yang mengandung informasi mengenai permintaan HTTP yang
dikirim browser.
<%@ page import=”java.util.*” %>
<html
<head>
<title>Echo</title>
<style>
<jsp:include page=”style.css” flush=”true”/>
</style>
</head>
<body>
<h1>HTTP Request Headers Received</h1>
<table border=”1” cellpadding=”4” cellspacing=”0”>
<%
Enumeration eNames = request.getHeaderNames();
while (eNames.hasMoreElements()) {
String name = (String_ eNames.nextElement();
String value = normalize(request.getHeader(name));
%>
<tr><td><%= name %></td><td><%= value %></td></tr>
<%
}
%>
</table>
</body>
</html>
<%!
private String normalize(String value)
{
StringBuffer sb = new StringBuffer();
for(int i=0; I < value.length(); i++) {
char c = value.charAt(i);
sb.append(c);
if(c==’;’)
sb.append(“<br>”);
}
return sb.toString();
}
%>
Mari kita bahas kode JSP di atas bagian demi bagian.
Perintah
File JSP diawali dengan perintah yang menandakan
bahwa file
di
atas
menggunakan paket java.util :
<%@ page import=java.util. %>
Perintah ini akan muncul di kode servlet pada bagian awal dari daftar kelas yang
di-import :
...
import
import
import
import
import
java.util.*;
javax.servlet.*;
javax.servlet.http.*;
javax.servlet.jsp.*;
org.apache.jasper.runtime.*;
LSP Telematika Indonesia
187
<jsp:include>
File diatas menggunakan style sheet untuk mengatur tampilan dari output.
Penggunaan style sheet dengan menggunakan aksi <jsp:include> :
<jsp:include page=”style.css” flush=”true” />
Aksi <jsp:include> menyebabkan style sheet di bawah ini dibaca ketika waktu
permintan :
body {
font: Sans-Serif 12 px;
background-color : #FEFEF2;
};
h1 { font-size: 130%}
Scriptlet
Ada 2 (dua) scriptlet dalam file JSP di atas, dengan template HTML data terletak
sebelum, diantara dan setelah scriptlet. Data HTML
<html>
<head>
<title>Echo</title>
<style>
....
diteruskan tanpa mengalami perubahan dengan statement write :
out.write
{“\r\n<html>\r\n”
+ “
<head>\r\n”
+ ”
<title>Echo</title>\r\n
+ “
<style>\r\n
...
Kemudian scriptlet yang pertama hanya di salin ke servlet :
“);
Enumeration eNames = request.getHeaderNames();
while {eNames.hasMoreElements()) {
String name = (String)eNames.nextElement();
String value = normalize(request.getHeaderName());
Scriplet yang kedua hanya terdiri dari symbol ( } ).
Ekspresi JSP
Setiap iterasi dari loop, scriptlet menghasilkan nama header dan nilai header dari
objek permintaan. Daripada mengeprint setiap nilai dengan menggunakan
out.write(), pembuat kode kembali ke HTML dan menggunakan ekspresi tag.
<%
<tr><td><%= name %></td><td><%= value %></td></tr>
%>
yang menghasilkan kode servlet seperti di bawah ini :
out.write(“\r\n
<tr><td>”);
out.print(name);
out.write(“</td><td>”);
out.print(value);
out.write(“</td></tr>\r\n
“);
LSP Telematika Indonesia
188
Deklarasi
Nilai header bisa panjang dan menyebabkan lebar tabel tidak mencukupi. Untuk
mengatasi masalah ini, dengan cara menscan nilai header untuk mencari symbol
( ; ) dan memasukkan tag <br> ketika symbol tersebut ditemukan. Fungsi ini
dijalankan dengan method normalize(), yang ditemukan di bagian akhir file JSP :
<%!
private String normalize(String value)
{
StringBuffer sb = new StringBuffer();
for(int i=0; I < value.length(); i++) {
char c = value.charAt(i);
sb.append(c);
if (c == ‘;’)
sb.append(“<br>”);
}
return sb.toString();
}
%>
Seperti kasus kedua scriptlet, kode deklarasi di salin verbatim ke servlet yang
dihasilkan tetapi tidak berada dalam method _jspService(). Sebaliknya, ditulis
dalam block kelas tetapi di luar method lainnya, dekat dengan awal servlet :
private String normalize(String value)
{
StringBuffer sb = new StringBuffer();
for(int i=0; I < value.length(); i++) {
char c = value.charAt(i);
sb.append(c);
if (c == ‘;’)
sb.append(“<br>”);
}
return sb.toString();
}
Hasil tampilan dari kode diatas adalah sebagai berikut :
Gambar 4.10.1.1 Output Echo.jsp
LSP Telematika Indonesia
189
4.10.2 JSP Cookies
Cookie adalah data yang dikirim web server ke browser client. Cookies tersimpan
di client hard disk dalam bentuk file teks. Cookies dapat digunakan web server
untuk mengidentifikasi pengguna web, dengan cara inilah server dapat melacak
user.
Di JSP, cookie adalah objek dari kelas javax.servlet.http.Cookie. Kelas dini
digunakan untuk membuat cookie. Pada umumnya cookie digunakan untuk
management session karena cookie dapat mengidentifikasi client. Sebuah cookie
memiliki nama, nilai dan atribut seperti comment, path dan domain, umur dan
versi.
Method getCookies() akan mengembalikian array dari objek Cookie. Cookies
dibuat dengan kode sebagai berikut :
Cookie(java.lang.String nama, java.lang.String nilai)
Berikut ini adalah method-method untuk Cookie :
Tabel 4.10.2.1 : Method-method Cookie
Method
Keterangan
Mengembalikan comment yang menjelaskan tujuan dari
getComment()
cookie atau bernilai null jika comment tidak dibuat.
getMaxAge()
Mengembalikan umur cookie
getName()
Mengembalikan nama cookie
getPath()
Mengembalikan prefiks dari URL
getValue()
Mengembalikan nilai cookie
setComment(String) Mengeset comment untuk cookie
Mengeset umur dari cookie. Cookie akan berakhir setelah
setMaxAge(int)
umur terlewati.
Cookie akan muncul hanya jika ada permintaan yang
setPath(String)
diawali dengan URL ini
setValue(String)
Mengeset nilai cookie.
Berikut ini adalah contoh kode untuk mengeset dan menampilkan cookie :
1.
Membuat Form yang akan meminta user untuk memasukkan namanya
(cookieform.jsp)
<%@ page language="java" %>
<html>
<head>
<title>Cookie Input Form</title>
LSP Telematika Indonesia
190
</head>
<body>
<form method="post" action="setcookie.jsp">
<p><b>Enter Your Name: </b><input type="text"
name="username"><br>
<input type="submit" value="Submit">
</form>
</body>
2.
Input dari user
(setcookie.jsp)
akan
digunakan
untuk
mengeset
nilai
cookies
<%@ page language="java" import="java.util.*"%>
<%
String username=request.getParameter("username");
if(username==null) username="";
Date now = new Date();
String timestamp = now.toString();
Cookie cookie = new Cookie ("username",username);
cookie.setMaxAge(365 * 24 * 60 * 60);
response.addCookie(cookie);
%>
<html>
<head>
<title>Cookie Saved</title>
</head>
<body>
<p><a href="showcookievalue.jsp">Next Page to view the cookie
value</a><p>
</body>
3.
Kode di atas akan mengeset nilai cookie dan menampilkan link untuk
memperlihatkan halaman cookie (showcookievalue.jsp)
<%@ page language="java" %>
<%
String cookieName = "username";
Cookie cookies [] = request.getCookies ();
Cookie myCookie = null;
if (cookies != null)
{
for (int i = 0; i < cookies.length; i++)
{
if (cookies [i].getName().equals (cookieName))
{
myCookie = cookies[i];
break;
}
}
}
%>
LSP Telematika Indonesia
191
<html>
<head>
<title>Show Saved Cookie</title>
</head>
<body>
<%
%>
<%
if (myCookie == null) {
No Cookie found with the name <%=cookieName%>
} else {
%>
<p>Welcome: <%=myCookie.getValue()%>.
<%
}
%>
</body>
4.10.3
JSP Session
Dalam aplikasi web user berpindah dari satu halaman ke halaman lainnya, untuk
itu aplikasi perlu melacak data user dan objek selama berada dalam aplikasi. JSP
menyediakan sebuah objek implicit “session”, yang dapat digunakan untuk
menyimpan data tertentu. Selanjutnya, kita akan membuat sebuah aplikasi yang
mengambil
nama
user
dan
menyimpannya
ke
session
user.
Kita
akan
menampilkan data yang telah disimpan user pada halaman lainnya.
1. Kode JSP untuk meminta input user (savenameform.jsp)
<%@ page language="java" %>
<html>
<head>
<title>Name Input Form</title>
</head>
<body>
<form method="post" action="savenametosession.jsp">
<p><b>Enter Your Name: </b><input type="text"
name="username"><br>
<input type="submit" value="Submit">
</form>
</body>
2. Halaman di atas akan meminta nama user. Ketika user memilih tombol
submit, file savenametosession.jsp terpanggil. File ini akan mengambil
nama
user
dan
menyimpannya
LSP Telematika Indonesia
ke
session
user
dengan
fungsi
192
session.setAttribute(“username”, username); Berikut ini adalah kode
savenametosession.jsp :
<%@ page language="java" %>
<%
String username=request.getParameter("username");
if(username==null) username="";
session.setAttribute("username",username);
%>
<html>
<head>
<title>Name Saved</title>
</head>
<body>
<p><a href="showsessionvalue.jsp">Next Page to view the session
value</a><p>
</body>
3. File di atas menyimpan nama user ke objek session dan menampilkan link
ke halaman selanjutnya (showsessionvalue.jsp). Ketika user memilih link
“Next Page to view the session value”, halaman showsessionvalue.jsp
menampilkan nama user. Berikut ini adalah kode dari showsession.jsp :
<%@ page language="java" %>
<%
String username=(String) session.getAttribute("username");
if(username==null) username="";
%>
<html>
<head>
<title>Show Saved Name</title>
</head>
<body>
<p>Welcome: <%=username%><p>
</body>
Fungsi
session.getAttribute(“username”)
digunakan
untuk
mengambil
nama user yang tersimpan di session.
Membuat Aplikasi Web menggunakan Servlet
Pada contoh pembuatan servlet kali ini, penulis menggunakan editor NetBeans
4.0. Lngkah-langkahnya:
1. PIlih menu File | New dan pilih File Types HTML, lalu klik next dan beri nama file
SelamatBelajar.html(jangan ditulis .html -nya)
LSP Telematika Indonesia
193
Gambar 4.10.3.1 Membuat dokumen HTML
2. Edit kode sebagai berikut, aksi dari penekanan button
submit ialah pemanggilan servlet /SelamatBelajar. Dimana data
yang telah dimasukkan dapat diperoleh menggunakan method
getParameter(). Untuk memberikan warna latar belakang
digunakan fungsi bgcolor.
<html>
<head>
<title> Registrasi Training e-Technology Server</title>
</head>
<body bgcolor=silver>
<font color="green"><H1><marquee behavior=alternate> Daftar Training di eTechnology Center</marquee></H1></font>
<hr>
<form action="http://localhost:8084/WebJ2EE/SelamatBelajar"
method="POST">
<h4> Mohon masukkan data diri Anda </h4>
<p>Nama <input type="text" size="40" name="name"></p>
<p>Email <input type ="text" size="40" name="email"><br>
<p>Materi
<select name="materi">
<option value="Web Programming using J2EE"> Web Programming using J2EE
<option value ="Oracle 10g PL/SQL and Form Developer">Oracle 10g PL/SQL and
Form Developer
<option value="Database Programming using VB.NET and SQL Server 2000">
Database Programming using VB.NET and SQL Server 2000
<option value="IT Specialist">IT Specialist (Networking Win 2003 and .NET
Programming)
</select><br></p><p>
Hari Training :
<input type ="checkbox" name=cb value="Sabtu Pagi" > Sabtu Pagi
<input type="checkbox" name=cb value ="Sabtu Siang"> Sabtu Siang
<input type="checkbox" name=cb value ="Ahad pagi"> Ahad Pagi
<input type="Checkbox" name=cb value ="Ahad siang"> Ahad Siang</p>
<br>
Pesan :<br>
<textarea name="pesan" rows=5 cols=50> </textarea> <br>
<input type="submit" value ="Submit"></p>
LSP Telematika Indonesia
194
</form>
</body>
</html>
Program di atas akan menampilkan dokumen HTML dimana
meminta user memasukkan data diri menggunakan <input
type=”text”> dan memilih jenis training neggunakan Combobox
serta pilihan hari menggunakan checkbox dengan menampung
nilai yang dipilih menggunakan value..
<select name="materi">
<option value="Web Programming using J2EE"> Web Programming using J2EE
<option value ="Oracle 10g PL/SQL and Form Developer">Oracle 10g PL/SQL
and Form Developer
<option value="Database Programming using VB.NET and SQL Server 2000">
Database Programming using VB.NET and SQL Server 2000
<option value="IT Specialist">IT Specialist (Networking Win 2003 and .NET
Programming)
</select>
Kode diatas untuk menampilkan cekbox, sedangkan fungsi
berikut digunakan untuk menampilkan cekbox dengan nilai yang
disimpan menggunakan fungsi value.
Hari Training :
<input type ="checkbox" name=cb value="Sabtu Pagi" > Sabtu Pagi
<input type="checkbox" name=cb value ="Sabtu Siang"> Sabtu Siang
<input type="checkbox" name=cb value ="Ahad pagi"> Ahad Pagi
<input type="Checkbox" name=cb value ="Ahad siang"> Ahad Siang
Ketika user mengklik button submit, maka data akan dikirim /di
post ke alamat tertentu menggunakan fungsi action dan
method=”POST”.
Method
POST
ini
kelebihannya
dapat
mengirimkan data dalam berbagai format dan lebih secure
dibandingkan method GET. Karena server yang digunakan
bernama localhost dan port yang digunakan oleh Tomcat 8084
serta nama folder J2EE dan nama servlet
tujuan ialah
SelamatBelajar, maka penulisannya sebagai berikut :
<form action="http://localhost:8084/WebJ2EE/SelamatBelajar"
method="POST">
8. Buat file servlet dengan memilih menu new lalu pilih Servlet
dan beri nama SelamatBelajar.java, lalu akan tercipta
Deployment descriptor (web.xml) yang membuat URL
Mapping /SelamatBelajar
LSP Telematika Indonesia
195
Gambar 4.10.3.2 URL Maping untuk web.xml
9. Edit kode menjadi seperti berikut ini, anda harus menambahkan
import java.util.* karena akan menggunakan kelas GregorianCalendar
yang mempunyai berbagai method yang memudahkan kita di dalam
melakukan operasi yang berhubungan dengan tanggal. Servlet yang
kita buat harus turunan dari kelas HttpServlet.
import java.io.*;
import java.util.*; //paket untuk kelas GregorianCalendar
import java.net.*;
import javax.servlet.*; //paket wajib untuk servlet
import javax.servlet.http.*;//paket wajib untuk servlet
//Ciri servlet ialah biasanya turunan dari kelas HttpServlet
public class SelamatBelajar extends HttpServlet {
public void init(ServletConfig config) throws ServletException {
super.init(config);}
public void destroy() {}
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//Ambil nilai dari textbox menggunakan getParameter
String name=request.getParameter("name");
String email=request.getParameter ("email");
String materi =request.getParameter ("materi");
String hari=request.getParameter("cb");
String pesankhusus=request.getParameter("pesan");
String pesan=null;
GregorianCalendar calendar= new GregorianCalendar();
//jika user submit data pada pagi hari / AM.
if (calendar.get(Calendar.AM_PM )==Calendar.AM) {
pesan="Selamat pagi :)";
}
else {
pesan="selamat Sore";
}
response.setContentType("text/html");
//Objek out dari kelas PrintWriter untuk mencetak
PrintWriter out = response.getWriter();
LSP Telematika Indonesia
196
out.println("<html>");
out.println("<body >");
out.println("<head>");
out.println("<title>Selamat Bergabung dengan Kami menjadi orang Sukses!</title>");
out.println("</head>");
out.println("<body bgcolor=silver>");
out.println("<font color=green><h1>Selamat Datang :)</h1></font>");
out.println ("<p>" + pesan + ", "+ name+"</p>");
out.println ("<h4> Terima kasih telah mendaftarkan email Anda: " + email + " dengan
Kami</h4><br>");
out.println ("<h4> Materi training yang Anda akan ambil ialah: " + materi + "
</h4><br>");
out.println ("<h4> Hari yang Anda pilih ialah: " + hari + " </h4><br>");
out.println ("<h4> Pesan Anda ialah: " + pesankhusus +"</h4><br>" );
out.println ("<B><i> Team e-Technology Center Copyright 2005</i></b>");
out.println("</body>");
out.println("</html>");
out.close();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
public String getServletInfo() {
return "Short description";
}
}
Umumnya kelas di servlet merupakan turunan dari kelas HttpServlet.
Program diatas akan mengambil parameter /data yang dimasukkan ke
teksbox menggunakan method getParameter(). Hasil proses akan
ditampilkan dalam bentuk dokumen HTML dan dikirimkan ke browser
klien.
10. Perhatikan file web.xml yang ada di dalam folder WEB-INF
yang berfungsi agar apabila browser mengakses suatu situs,
dapat mengenal servlet tersebut berupa alias. Informasi yang
paling penting dari web.xml ialah <servlet-name> dan <urlpattern> karena mementukan alamat pemanggilan servlet
tersebut. Berikut kode yang degenerate oleh NetBeans:
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com
/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
<servlet-name>SelamatBelajar</servlet-name>
<servlet-class>SelamatBelajar</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>SelamatBelajar</servlet-name>
<url-pattern>/SelamatBelajar</url-pattern>
</servlet-mapping>
LSP Telematika Indonesia
197
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>
index.jsp
</welcome-file>
</welcome-file-list>
</web-app>
11. Jalankan program dengan mengklik Run atau klik kanan mouse
dan pilih Run File pada file SelamatBelajar.html. Pastikan servlet
SelamatBelajar.java telah anda kompile dengan klik kanan mouse
pada servlet tersebut agar menghasilkan file Selamatbelajar.class
yang akan tersimpan di folder classes.
Gambar 4.10.3.3 Hasil
LSP Telematika Indonesia
198
Gambar 4.10.3.4 hasil pemanggilan servlet
Untuk penguasaan materi lanjut, penulis mengharapkan Anda mempelajari
mengenai Design Framework
yaitu MVC, Struts Framework, Spring dan
Hibernate.
Soal Latihan
1.
2.
3.
Dokumentasi program java yang
dapat dilihat di web browser
Method yang tidak membutuhkan
implicit parameter
Perintah untuk menggunakan driver
SQL
a. Encupsulation
b. javac hello.java
c. static
d. Class.forName();
e. javadoc
Soal Praktek
4. Buatlah program java yang menghasilkan output seperti di bawah ini :
LSP Telematika Indonesia
199
5. Buatlah program java yang melakukan pengurutan angka. Contoh keluarannya
adalah sebagai berikut :
LSP Telematika Indonesia
200
BAB 5 ASP dan ASP .NET
Tujuan Instruksional Umum :
1. Siswa dapat menjelaskan cara Pemrograman Web ASP dan ASP .NET
2. Siswa dapat menggunakan basis data dengan ASP .NET
Tujuan Instruksional Khusus :
1. Siswa dapat membuat file ASP dan ASP .NET sederhana
2. Siswa dapat membuat session dan cookies
3. Siswa dapat membuat program dengan user control
4. Siswa dapat menerapkan keamanan web
5. Siswa dapat melakukan debugging
6. Siswa dapat membuat aplikasi web dinamis
Materi yang ada di bab ini memenuhi :
1. TIK.PR02.014.01
Melakukan debugging program
2. TIK.PR08.010.01
Membuat program aplikasi web berbasis ASP
Berikut ini adalah gambaran umum dari materi yang ada di bab ini :
LSP Telematika Indonesia
201
5.1 Pengenalan .NET
Active Server Pages (ASP) adalah teknologi yang dikembangkan oleh
Micrososft untuk membuat web sites dinamis dimana pengunjung dapat
memasukkan suatu value pada halaman web yang kemudian akan dikirimkan
ke web server. Teknologi ini membutuhkan pengalaman dan pengetahuan
bahasa pemrograman seperti VBScript atau JavaScript. ASP juga dapat
dengan mudah dimengerti oleh programmer Visual Basic karena keduanya
memiliki pendekatan yang sama dalam memecahkan sebuah problem. Untuk
meningkatkan kualitasnya, Microsoft mengembangkan ASP .NET. Dengan
pendekatan terbaru ini, Anda dapat mempergunakan .NET framework dan
fitur-fiturnya yang beragam untuk membuat aplikasi berbasis web.
Framework .NET adalah library yang digunakan untuk membuat aplikasi
computer-based maupun web-based. Keduanya dibuat dari bagian framework
yang berbeda. Bagian yang digunakan untuk membuat aplikasi computerbased adalah Windows Forms. Sedangkan, bagian yang digunakan untuk
membuat aplikasi berbasis web adalah ASP .NET. Meskipun framework .NET
terdiri dari beragam sub-library, Anda dapat menciptakan aplikasi apapun
dengan hanya menggunakan ASP .NET. Salah satu perbedaan antara ASP
.NET dan ASP adalah bahwa aplikasi ASP diinterpretasikan oleh browser
sedangkan aplikasi ASP. NET di-compile terlebih dahulu.
5.2 Pengenalan ASP and ASP .NET
5.2.1 ASP
Active
Server
Pages
atau
ASP
adalah
teknologi
yang
memungkinkan
developer untuk mengerjakan proses dalam server. ASP adalah teknologi
server side, yang berarti ASP bersifat browser independent. Ini berarti aplikasi
web Anda dapat dijalankan oleh browser apapun.
Halaman yang ditampilkan di browser hanya HTML saja atau beserta skrip
yang ingin Anda jalankan di client. Sedangkan kode ASP Anda tersembunyi
LSP Telematika Indonesia
202
rapi
dan
terbebas
dari
sentuhan
tangan-tangan
yang
kurang
bertanggungjawab.
Dengan ASP, developer akan mendapatkan kemudahan dalam membuat
aplikasi web. Pilihan bahasa skrip yang digunakan adalah VBScript sebagai
default dan Jscript. Namun developer juga dapat menggunakan bahasa skrip
lainnya dengan menambahkan add-in untuk ASP, baik yang disediakan
Microsoft atau pihak ketiga (third-party).
Bukan hanya sisi kemudahan saja yang membuat ASP saat ini dipakai oleh
banyak web developer di seluruh dunia. ASP merupakan bagian dari active
platform yang berbasiskan teknologi component object model (COM). Dengan
teknologi ini, ASP menjadi sangat efisien dalam segi konektivitas maupun
penanganan aplikasi untuk transaksi yang jumlahnya sangat banyak. Hal ini
dimungkinkan dengan pemakaian Microsoft Transaction Server (MTS).
Keuntungan ASP lainnya adalah dukungannya terhadap server component.
Dengan server component, developer dapat membuat aplikasi activeX dengan
menggunakan bahasa pemrograman seperti Visual Basic, Delphi, C++, Java,
atau lainnya dan kemudian menjalankan di ASP Anda.
5.2.2 ASP .NET
Untuk membuat aplikasi ASP .NET, Anda harus mempersiapkan komputer
Anda yang akan digunakan untuk mengembangkan aplikasi ASP .NET Anda.
Semua
hal
yang
Anda
pergunakan
disediakan
secara
gratis.
Untuk
memulainya, komputer Anda harus memiliki salah satu dari Operating
Systems dibawah ini:
•
Microsoft Windows XP Professional (no Home Edition)
•
Microsoft Windows 2000 Server
•
Microsoft Windows Server 2003 (any version)
Anda juga harus telah menginstall browser Internet Explorer atau browser
lainnya. Spesifikasi minimal yang harus Anda miliki adalah Internet Explorer
5.5, akan tetapi untuk beberapa alasan khusus, Anda harus menginstall versi
6.0.
LSP Telematika Indonesia
203
Jika Anda berniat untuk membuat aplikasi berbasis web yang memerlukan
database, maka Anda harus menginstall MDAC >= 2.7, yang dapat didownload secara gratis dari web site Microsoft.
Sehubungan dengan salah satu Operating System diatas, Anda harus
menginstall Microsoft Internet Information Services (IIS) 6.0. Biasanya,
selama proses penginstallan operating system, Anda akan memiliki prompt
khusus untuk menginstallnya. Atau Anda dapat menginstallnya dari Control
Panel -> Add/Remove Programs -> Add/Remove Windows Component ->
Internet Information Services (IIS) dan ikuti tahapan-tahapannya:
Gambar 5.2.2.1 Windows Components Wizard
Jika operating system dan komponen tersebut telah siap, Anda harus
menginstall framework .NET. Biasanya framework .NET telah terinstall secara
otomatis. Jika Anda ingin memeriksanya, Anda dapat membuka Add/Remove
Programs dari Control Panel dan Anda akan melihat entry untuk framework
Microsoft .NET.
LSP Telematika Indonesia
204
Gambar 5.2.2.2 Add/Remove Programs
5.2.3
Membuat Proyek Web
Jika Anda pernah membuat web sebelumnya, Anda tentunya telah familiar
dengan konsep dari sebuah web site, yaitu kumpulan file sebagai halaman
web dalam sebuah folder. ASP .NET menggunakan pendekatan yang sama
dengan hal tersebut, yakni proyek web ASP .NET adalah satu atau lebih file
yang akan dihadirkan sebagai aplikasi.
Seperti web site lainnya, aplikasi ASP .NET dapat terdiri dari tipe file yang
berbeda, file dengan extension yang berbeda untuk tujuan yang berbeda. Hal
ini berarti, untuk membuat aplikasi ASP .NET, Anda dapat memulai dengan
membuat file HTML yang ber-extension .htm atau .html. Anda juga dapat
menggunakan file Cascading Style Sheet (CSS) yang memudahkan Anda
untuk membuat format HTML yang lebih baik. Anda juga dapt menggunakan
file script-oriented yang ber-extension .js, .vbs, .pl untuk menyempurnakan
halaman lainnya.
LSP Telematika Indonesia
205
Untuk membuat aplikasi ASP .NET, Anda dapat memulainya dengan membuat
sebuah folder dengan nama pilihan Anda. Dibawah ini adalah contoh sebuah
folder baru dengan nama Grier Summer Camp:
Gambar 5.2.3.1 Folder Tempat Menaruh File Project
Setelah membuat folder untuk proyek ASP. NET, Anda harus membuat sebuah
virtual directory. Untuk melakukannya, Anda harus menampilkan window
Internet
Information
Services
(IIS)
atau
Internet
Services
Manager.
Kemudian, di frame sebelah kiri, expand nama dari server Anda (jika Anda
menggunakan server atau komputer lain tetapi tidak terdapat di list, klik
kanan Internet Information Services, klik Connect, ketik nama dari komputer
dan klik OK) dan expand node dari Web Site default (jika Anda menggunakan
Microsoft Windows XP Professional, Anda harus expand Web Site dibawah
nama komputer). Klik kanan Default Web Site -> New -> Virtual Directory.
Pada halaman pertama dari wizard yang muncul, Anda dapat mengklik Next.
Pada
halaman
kedua,
Anda
harus
mengetik
nama
yang
akan
Anda
pergunakan di browser untuk mengakses aplikasi yang Anda buat. Dibawah
ini adalah contohnya:
LSP Telematika Indonesia
206
Gambar 5.2.3.2 Virtual Directory Alias
Pada halaman ketiga, Anda dapat mengetikkan full path ke folder yang Anda
buat atau Anda dapat klik Browse untuk mencari dan memilih folde yang telah
Anda buat sebelumnya. Dalam dialog box Browse For Folder, cari folder yang
Anda buat.
Gambar 5.2.3.3 Web Site Content Directory
LSP Telematika Indonesia
207
Halaman keempat mengharuskan Anda untuk memspesifikasikan bagaimana
halaman-halaman web pada site akan diakses:
Gambar 5.2.3.4 Access Permission
Setelah mengklik Next pada halaman keempat, Anda dapat klik Finish pada
halaman kelima dan sebuah web site baru akan tercipta untuk aplikasi Anda.
Microsoft Visual Studio .NET
Kesederhanaan Notepad cukup pas jika Anda hanya menuliskan kode. Pada
beberapa
kasus,
jika
Anda
sedang
mengembangkan
aplikasi
yang
menampilkan grafik, Notepad memiliki beberapa keterbatasan karena semua
kode harus diketik secara manual. Untuk meningkatkan pengembangan
aplikasi ASP .NET, Microsoft menyediakan kesempurnaan tersebut pada
Microsoft Visual Studio .NET. Microsoft Visual Studio .NET menyediakan fiturfitur yang memudahkan Anda untuk membuat sebuah aplikasi dan dapat
melihat preview yang lebih baik dari pengaturan posisi item-item yang
terdapat pada halaman web Anda.
Pelajaran untuk membuat proyek web kali ini mengasumsikan bahwa Anda
telah menginstall Microsoft Visual Studio .NET 2003 pada komputer Anda.
Untuk memulai Microsoft Visual Studio .NET 2003, di Taskbar, Anda dapat klik
LSP Telematika Indonesia
208
Start (All) Programs -> Microsoft Visual Studio .NET 2003 -> Microsoft Visual
Studio .NET 2003
Gambar 5.2.3.5 Microsoft Visual Studio
Untuk membuat aplikasi ASP .NET di Visual Studio .NET, Anda dapat
menampilkan dialog box New Project. Pada dialog box, Anda dapat memilih
Visual Basic Projects, Visual C# Projects, atau Visual J# Projects. Pada bagian
Templates, Anda dapat klik ASP .NET Web Application. Pada text box Location,
di bagian kanan dari http://localhost/, Anda dapat menerima saran nama dari
proyek Anda atau Anda dapat mengetikkan nama proyek yang Anda inginkan:
LSP Telematika Indonesia
209
Gambar 5.2.3.6 New Project
5.2.4
Kompilasi Proyek Web
Kode-kode yang dibuat untuk proyek web ASP .NET ditulis dalam bentuk plain
text termasuk didalamnya tag HTML dan script section. Pada aplikasi ASP,
kode-kode tersebut diinterpretasikan oleh browser langsung. Dengan ASP
.NET, Anda harus meng-compile proyek tersebut dengan cara yang sama
seperti yang Anda lakukan untuk memproses aplikasi Window lainnya.
Untuk meng-compile dan execute proyek ASP .NET dalam satu tahapan, pada
menu utama, Anda dapat klik Debug -> Start Without Debugging. Meskipun
terdapat beberapa teknik atau cara lain dalam compiling (atau debugging)
dan execute sebuah proyek, untuk saat ini teknik yang akan digunakan adalah
teknik seperti ini.
5.2.5
Menjalankan Proyek Web
Setelah membuat web site, Anda dapat menambahkan file kedalamnya. Anda
dapat menciptakan text file dan menyimpannya dalam extension yang sesuai.
Ketika menyimpan sebuah file, pastikan Anda menyimpannya dalam folder
LSP Telematika Indonesia
210
yang telah Anda buat sebelumnya. Hal ini akan memungkinkan browser untuk
mencari lokasi file-file tersebut melalui virtual directory.
Halaman ASP .NET adalah file text-based dengan extension .aspx. Isi dari file
tersebut tergantung pada Anda dan tidak memiliki kode spesial selain tag
HTML biasa. Dibawah ini adalah contoh file dengan tag HTML biasa:
<html>
<head>
<title>Grier Summer Camp</title>
</head>
<body>
<center><h1>The Grier Summer Camp</h1></center>
<p>Located in the heart of Rockville, Maryland, the <b>Grier
Summer Camp</b> is an attractive setting aimed at entertaining
and supporting youth activities during their summer vacation.</p>
<h2>Program Presentation</h2>
<p>We feature a state of the art, regularly renovated mansions
with world class sport facilities.</p>
<p>Coolfront Island, our star house of the season, is a 2-story
like chateau featuring nicely finished brown bricks whose sight
is tremendously appealing. The estate introduces two large living
rooms with exquisite velour furniture. The colonial veranda
offers a patio spanning two walls with a lost view down the farreaching landscape. In this particular setting, besides their
usual activities, children will learn special human needs to make
their experience unforgettable.</p>
<p>Please consult our catalogue and see why the Washington
Tribune called us <i>the most attractive summer camp of the
area</i>.</p>
</body>
</html>
Setelah membuat file, Anda dapat menyimpannya dengan extension .aspx
dalam folder yang Anda pilih:
LSP Telematika Indonesia
211
Gambar 5.2.5.1 Menyimpan File Proyek
Setelah menyimpan file tersebut, untuk melihatnya dalam window Internet
Information Services, pertama cari virtual directory dari proyek Anda.
Kemudian, Anda klik kanan file tersebut dan klik Browse. Cara lainnya adalah
dengan membuka Browser dan mengaksesnya dari Address bar, ganti
alamatnya dengan http://localhost/ diikuti dengan nama virtual directory
yang telah Anda buat sebelumnya, dan dikuti dengan nama file beserta
extensionnya.
Dibawah
ini
merupakan
hasil
tampilan
setelah
Anda
menjalankan aplikasi Anda di browser.
LSP Telematika Indonesia
212
Gambar 5.2.3.2 Hasil Keluaran
5.3 Pemrograman ASP .NET Dan ASP
ASP .NET
5.3.1
Web
User Control
control adalah
objek
grafis
yang
memudahkan
pengguna
untuk
berinteraksi dengan halaman-halaman web. Karena banyaknya jenis control
untuk berbagai tujuan, pemasukan data dari pengguna ke aplikasi dan
konfigurasinya tergantung kepada programmer. Toolbox adalah aksesori yang
menyediakan jenis control yang digunakan dalam aplikasi. Control biasa yang
dikenal oleh HTML terdaftar dalam bagian yang berjudul HTML:
LSP Telematika Indonesia
213
Gambar 5.3.1.1 Toolbox
Jenis control yang digunakan dalam aplikasi ASP .NET terdaftar dalam bagian
yang berjudul Web Forms.
Sebagai default, Toolbox berada di bagian kiri dari IDE. Untuk mengubah
posisinya, Anda dapat drag and drop title bar tersebut ke posisi yang Anda
inginkan. Toolbox juga menggunakan lebar default untuk menampilkan itemitem yang terdapat didalamnya. Jika lebarnya terlalu kecil atau besar untuk
Anda, Anda dapat mengubahnya. Untuk melakukannya, arahkan mouse Anda
ke border pada bagian kanan dan drag kearah kiri atau kanan.
Saat Microsoft Visual Studio .NET di-install, Toolbox menambahkan button
secara acak. Awalnya, hal tersebut akan menyulitkan untuk menemukan jenis
control yang sesuai dengan yang Anda perlukan.Untuk membuatnya lebih
baik, Anda dapat mengatur daftar control tersebut sesuai pilihan Anda. Anda
memiliki dua pilihan utama. Untuk mengubah posisi dari suatu item pada
daftar, klik kanan item tersebut dan klik Move Up atau Move Down. Cara
LSP Telematika Indonesia
214
lainnya adalah Anda mengatur item-item tersebut dengan urutan alphabet.
Untuk melakukannya, klik kanan dimanapun pada bagian HTML atau Web
Forms dan klik Sort Item Alphabetically. Jika Anda telah mengaturnya secara
alphabetis, Toolbox akan mengabaikan pengaturan sebelumnya dan Anda
tidak dapat mengulanginya lagi. Cara lainnya adalah dengan klik kanan button
dari control tersebut dan klik Move Up atau Move Down.
Untuk menambahkan control pada aplikasi Anda, Anda dapat drag jenis
control yang Anda inginkan dari Toolbox dan drop di posisi yang Anda
inginkan pada form halaman web Anda. Control yang telah Anda pilih tersebut
akan berada tepat di posisi dimana mouse Anda berhenti. Dengan cara yang
sama, Anda dapat menambahkan jenis control lainnya pada halaman web
aplikasi Anda. Cara lainnya adalah dengan double click jenis control tersebut
dari Toolbox dan secara otomatis control tersebut akan muncul pada bagian
atas kiri form halaman web Anda.
Jika Anda menginginkan untuk menambahkan beberapa jenis control lebih
dari satu kali, sebelum memilihnya pada Toolbox, tekan dan tahan tombol
Ctrl. Kemudian klik pada jenis control yang Anda inginkan pada Toolbox. Hal
tersebut akan secara permanen memilih jenis control tersebut. Setiap kali
Anda membuat form, control tersebut akan ditambahkan secara otomatis.
Jika Anda telah menambahkan control tersebut sesuai jumlah yang Anda
inginkan, pada Toolbox, klik tombol Pointer untuk menghilangkan otomatisasi
penambahan control tersebut.
5.3.2
Pemrograman user control
Anda dapat membuat user control secara deklaratif dengan menggunakan
text atau HTML editor. Syntax deklaratif user control sama dengan syntax
yang digunakan untuk membuat halaman Web Forms. Perbedaan yang utama
adalah bahwa user control menggunakan @ Control directive di tempat @
Page directive, dan bahwa user control tidak termasuk dalam elemen
<html>, <body> dan <form> di sekitar content.
User control sama sederhananya dengan file text, atau dapat termasuk dalam
server control pada ASP .NET. Jika Anda menginginkan untuk berbagi
informasi antara user control dan halaman hosting, Anda dapat membuat
properti untuk user control yang Anda buat.
LSP Telematika Indonesia
215
Prosedur dibawah ini menggambarkan form logon yang dapat Anda masukkan
pada halaman yang berbeda di aplikasi Anda.
Untuk membuat user control
1. Buat file baru dan beri nama dengan extension .ascx.
Sebagai contoh, beri nama user control Anda dengan Logonform.ascx
2. Buat sebuah @ Control directive pada bagian atas halaman dan
spesifikasikan bahasa pemrograman yang akan Anda pergunakan untuk
control tersebut (jika ada). Contoh dibawah ini menunjukkan @ Control
directive pada halaman yang menggunakan Visual Basic .NET sebagai
bahasa pemrograman.
<%@ Control Language="VB" %>
Catatan: Jika Anda telah membuat aplikasi web dengan Visual Basic .NET,
maka semua halaman dan user control pada aplikasi harus menggunakan
bahasa pemrograman yang sama.
3. Buat elemen atau control elemen antarmuka yang Anda ingin agar user
control dapat menampilkannya.
4. Buat properti pada control tersebut jika Anda menginginkan user control
dan halaman hosting dapat berbagi informasi. Contoh dibawah ini
menunjukkan user control yang lengkap untuk menampilkan text box
dimana pengguna dapat mengetikkan nama dan label dimana nama
tersebut ditampilkan. User control juga membebaskan properti Name dari
proteksi aplikasi sehingga variabel nama bisa di-set pada halaman
hosting.
[Visual Basic]
<%@ Control Language="VB" %>
<script runat="server">
Public Property Name As String
Get
Return labelOutput.Text
End Get
Set
textName.Text = Server.HtmlEncode(value)
labelOutput.Text = Server.HtmlEncode(value)
End Set
End Property
LSP Telematika Indonesia
216
Public Sub buttonDisplayName_Click(sender As Object, e As
EventArgs)
labelOutput.Text = textName.Text
End Sub
</script>
<table>
<tbody>
<tr>
<td>
<b>Enter your name:</b></td>
</tr>
<tr>
<td>
<asp:TextBox id="textName"
runat="server">
</asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:button id="buttonDisplayName"
onclick="buttonDisplayName_Click"
runat="server" text="Submit">
</asp:button>
</td>
</tr>
<tr>
<td><b>Hello,
<asp:Label id="labelOutput"
runat="server">
</asp:Label>.</b>
</td>
</tr>
</tbody>
</table>
[C#]
<%@ Control Language="C#" %>
<script runat="server">
public String Name {
get
{
return labelOutput.Text;
}
set
{
textName.Text = Server.HtmlEncode(value);
labelOutput.Text = Server.HtmlEncode(value);
}
}
void buttonDisplayName_Click(object sender, EventArgs e) {
labelOutput.Text = textName.Text;
}
</script>
<table>
<tbody>
<tr>
<td>
LSP Telematika Indonesia
217
<b>Enter your name:</b></td>
</tr>
<tr>
<td>
<asp:TextBox id="textName"
runat="server">
</asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:button id="buttonDisplayName"
onclick="buttonDisplayName_Click"
runat="server" text="Submit">
</asp:button>
</td>
</tr>
<tr>
<td><b>Hello,
<asp:Label id="labelOutput"
runat="server">
</asp:Label>.</b>
</td>
</tr>
</tbody>
</table>
5.3.3
Handling events
Fungsionalitas event disediakan oleh elemen-elemen dibawah ini:
•
Sebuah
class
yang
menangani
data
event
(misalnya,
EvenArgs,
ImageClickEventArgs).
•
Event delegate (misalnya, EventHandler, ImageClickEventHandler).
Catatan: Dua class diatas secara umum didefinisikan diluar control yang Anda
buat. Dua hal dibawah ini didefinisikan pada control yang Anda buat.
•
Event member yang didefinisikan pada control Anda. Hal tersebut
diidentifikasikan dengan kata kunci event.
•
Method pada control Anda yang memanggil delegate (misalnya, OnClick,
OnTextChanged).
Contoh dibawah ini menggambarkan event Click pada jenis control MyButton.
[C#]
// If the event does not generate data, you do not have
// to define a class for the event data or define an event delegate.
// Use System.EventArgs for event data
LSP Telematika Indonesia
218
// and System.EventHandler as the event delegate.
// MyButton uses EventHandler and EventArgs.
using System;
using System.Web.UI;
namespace CustomControls
{
public class MyButton: Control, IPostBackEventHandler
{
// Defines the Click event.
public event EventHandler Click;
// OnClick dispatches the event to delegates that
// are registered with the Click event.
// Controls that derive from MyButton can handle the
// Click event by overriding OnClick
// instead of attaching a delegate. The event data
// is passed as an argument to this method.
protected virtual void OnClick(EventArgs e)
{
if (Click != null)
{
Click(this, e);
}
}
// Method of IPostBackEventHandler that raises change events.
public void RaisePostBackEvent(string eventArgument)
{
OnClick(EventArgs.Empty);
}
protected override void Render(HtmlTextWriter output)
{
output.Write("<INPUT TYPE = submit name = " + this.UniqueID
+
" Value = 'Click Me' />");
}
}
}
[Visual Basic]
' If the event does not generate data, you do not have
' to define a class for the event data or define an event delegate.
' Use System.EventArgs for event data
' and System.EventHandler as the event delegate.
' MyButton uses EventHandler and EventArgs.
Option Explicit
Option Strict
Imports System
Imports System.Web.UI
Namespace CustomControls
Public Class MyButton
Inherits Control
Implements IPostBackEventHandler
' Defines the Click event.
Public Event Click As EventHandler
LSP Telematika Indonesia
219
' OnClick dispatches the event to delegates that
' are registered with the Click event.
' Controls that derive from MyButton can handle the
' Click event by overriding OnClick
' instead of attaching a delegate. The event data
' is passed as an argument to this method.
Protected Overridable Sub OnClick(e As EventArgs)
RaiseEvent Click(Me, e)
End Sub
' Method of IPostBackEventHandler that raises change events.
Public Sub RaisePostBackEvent(eventArgument As String)
Implements IPostBackEventHandler.RaisePostBackEvent
OnClick(EventArgs.Empty)
End Sub 'RaisePostBackEvent
Protected Overrides Sub Render(output As HtmlTextWriter)
output.Write(("<INPUT TYPE = submit name = " & Me.UniqueID &
" Value = 'Click Me' />"))
End Sub
End Class
End Namespace
ASP
5.3.4 Sintaks ASP
File ASP biasanya mengandung tag-tag HTML, seperti halnya file HTML. Tetapi,
file ASP juga bisa mengadung server script yang berada diantara <% dan %>.
Server script dieksekusi di server dan dapat mengandung ekspresi, statement,
prosedur atau operator. Perhatikan kode di bawah ini :
<html>
<body>
<%
response.write("Hello World!")
%>
</body>
<html>
perintah response.write digunakan untuk menampilkan keluaran di browser. Kode
di atas akan menampilkan teks ”Hello World” ke browser.
Cara lain yang juga
menghasilkan hal yang sama yaitu :
<html>
<body>
<%="Hello World!"%>
</body>
<html>
LSP Telematika Indonesia
220
5.3.5
Procedure
Dalam kode ASP dapat mengandung prosedur dan fungsi:
<html>
<head>
<%
sub vbproc(num1,num2)
response.write(num1*num2)
end sub
%>
</head>
<body>
<p>Result: <%call vbproc(3,4)%></p>
</body>
</html>
Memasukkan baris <%@bahasa=”bahasa”%> diatas tag <htm> untuk menulis
fungsi atau prosedur dalam bahasa lain:
<%@ language="javascript" %>
<html>
<head>
<%
function jsproc(num1,num2)
{
Response.Write(num1*num2)
}
%>
</head>
<body>
<p>Result: <%jsproc(3,4)%></p>
</body>
</html>
5.3.6
VBScript
Beberapa bahasa pemrograman dapat digunakan dalam ASP. Tetapi, bahasa
default untuk scripting di ASP adalah VBScriipt, tetapi seandainya kita hendak
menggunakan Javascript maka kita harus memasukkan spesifikasi bahasa
tersebut di awal file:
<%@ language="javascript"%>
<html>
<body>
<%
Response.Write("Hello World!")
%>
</body>
</html>
Berbeda dengan VBScript, JavaScript bersifat case sensitif.
LSP Telematika Indonesia
221
5.3.7
Komponen ASP
Pada subab ini kita akan membahas komponen ASP. Komponen ASP yang dibahas
meliputi :
Komponen ASP Ad Rotator
Komponen ini membuat objek AdRotator yang menampilkan gambar yang
berbeda sewaktu user memasuki atau merefresh halaman. Sebuah file teks
mengandung informasi mengenai gambarnya. Sintaksnya adalah :
<%
set adrotator=server.createobject("MSWC.AdRotator")
adrotator.GetAdvertisement("textfile.txt")
%>
Contoh :
Misalkan kita memiliki file yang dinamai “banners.asp”, dengan kode seperti di
bawah ini :
<%
url=Request.QueryString("url")
If url<>"" then Response.Redirect(url)
%>
<html>
<body>
<%
set adrotator=Server.CreateObject("MSWC.AdRotator")
response.write(adrotator.GetAdvertisement("textfile.txt"))
%>
</body>
</html>
File “ads.txt” seperti di bawah ini:
REDIRECT banners.asp
*
MadeLine.gif
http://www.MadeLine.com/
Visit MadeLine
80
MadeLineMagic.gif
http://www. MadeLineMagic.com/
Visit MadeLineMagic
20
Baris dibawah symbol (*) pada file “ads.txt” menentukan gambar yang akan
ditampilkan, alamat-alamat hyperlink, teks alternatif, dan lainnya. Gambar
MadeLine akan ditampilkan untuk 80% hits dan gambar MadeLinemagic akan
ditampilkan
ketika
20%
LSP Telematika Indonesia
hits.
Halaman
banners.asp
akan
menerima
222
querystring dengan variabel yang dinamai URL yang mengandung URL untuk
redirect.
Berikut ini adalah daftar properti dan method dari komponen ini :
Tabel 5.3.7.1 : Properti Komponen AdRotator
Properti
Border
Deskripsi
Menentukan
ukuran
border
disekitar
iklan.
Menentukan
apakah ilkan
berupa
hyperlink.
Contoh
<%
set adrot=Server.CreateObject("MSWC.AdRotator")
adrot.Border="2"
Response.Write(adrot.GetAdvertisement("ads.txt"))
%>
Clickable
<%
set adrot=Server.CreateObject("MSWC.AdRotator")
adrot.Clickable=false
Response.Write(adrot.GetAdvertisement("ads.txt"))
%>
TargetFrame Nama frame <%
yang
set adrot=Server.CreateObject("MSWC.AdRotator")
menampilkan adrot.TargetFrame="target='_blank'"
iklan.
Response.Write(adrot.GetAdvertisement("ads.txt"))
%>
Tabel 5.3.7.2 : Methods Komponen AdRotator
Method
Deskripsi
GetAdvertiseme Mengembalika
nt
n HTML yang
menampilkan
iklan.
Returns HTML
that
Contoh
<%
set
adrot=Server.CreateObject("MSWC.AdRotator
")
Response.Write(adrot.GetAdvertisement("ads
.txt")) %>
Komponen ASP BrowserCap
Komponen
ini
membuat
objek
BrowserType
yang
menentukan
tipe,
kemampuan dan nomor versi dari setiap browser yang mengunjungi sebuah
situs. Ketika browser terhubung dengan server, HTTP User Agent Header juga
terkirim ke server. Header ini mengandung informasi mengenai browser
(seperti tipe browser dan versi). Selanjutnya, objek BrowserType akan
membandingkan informasi di header dengan informasi di file server yaitu
”Browscap.ini”. Jika ditemukan kesamaan antara tipe browser dan versi yang
dikirim header dengan informasi yang ada di file ”Browsercap.ini”. Kita dapat
menggunakan objek BrowserType untuk mendaftarkan properti dari browser
tersebut, tetapi jika tidak ditemukan kesamaan dari tipe browser dan versi di
file Browscap.ini maka semua properti akan bernilai ”UNKNOWN”. Sintaks
komponen ini seperti di bawah ini :
LSP Telematika Indonesia
223
<%
Set MyBrow=Server.CreateObject("MSWC.BrowserType")
%>
Berikut ini adalah contoh file ASP yang membuat objek BrowserType dan
menampilkan table yang menunjukkan kemampuan dari browser :
<html>
<body>
<%
Set MyBrow=Server.CreateObject("MSWC.BrowserType")
%>
<table border="1" width="100%">
<tr>
<th>Client OS</th>
<th><%=MyBrow.platform%></th>
</tr><tr>
<td >Web Browser</td>
<td ><%=MyBrow.browser%></td>
</tr><tr>
<td>Browser version</td>
<td><%=MyBrow.version%></td>
</tr><tr>
<td>Frame support?</td>
<td><%=MyBrow.frames%></td>
</tr><tr>
<td>Table support?</td>
<td><%=MyBrow.tables%></td>
</tr><tr>
<td>Sound support?</td>
<td><%=MyBrow.backgroundsounds%></td>
</tr><tr>
<td>Cookies support?</td>
<td><%=MyBrow.cookies%></td>
</tr><tr>
<td>VBScript support?</td>
<td><%=MyBrow.vbscript%></td>
</tr><tr>
<td>JavaScript support?</td>
<td><%=MyBrow.javascript%></td>
</tr>
</table>
</body>
</html>
Kode di atas akan menghasilkan keluaran seperti di bawah ini :
Client OS
WinNT
Web Browser
IE
Browser version
5.0
Frame support?
True
LSP Telematika Indonesia
224
Table support?
True
Sound support?
True
Cookies support?
True
VBScript support?
True
JavaScript support?
True
Komponen ASP ContentLinking
Komponen ASP content linking digunakan untuk membuat system navigasi
yang cepat dan mudah. Komponen ini mengembalikan objek Nextlink yang
digunakan untuk mendaftarkan web page untuk dinavigasi. Sintaks komponen
ini adalah :
<%
Set nl=Server.CreateObject( "MSWC.NextLink" )
%>
Pertama kita membuat file teks –“links.txt”. File ini mengandung halamanhalaman yang akan dinavigasi. Halaman-halaman tersebut harus didaftarkan
sesuai dengan urutan tampilan, selain itu file ini juga harus mengandung
deskripsi dari setiap nama file. Jika kita ingin menambah halaman atau
mengubah urutan halaman maka kita hanya perlu mengubah file teks ini.
”links.txy” :
MadeLine_home.asp MadeLine Intro
MadeLine_offfer.asp MadeLine’s list of Items
Madeline_clothes.asp MadeLine’s list of Clothes
MadeLine_bags.asp MadeLine’s list of Bags
Pada setiap halaman yang didaftarkan, letakkan kode : . Kode ini akan memasukkan kode di bawah ini di setiap
halaman yang terdaftar di file “links.txt” dan navigasi akan berjalan.
"nlcode.inc":
<%
'Use the Content Linking Component
'to navigate between the pages listed
'in links.txt
dim nl
Set nl=Server.CreateObject("MSWC.NextLink")
if (nl.GetListIndex("links.txt")>1) then
Response.Write("<a href='" & nl.GetPreviousURL("links.txt"))
Response.Write("'>Previous Page</a>")
end if
LSP Telematika Indonesia
225
Response.Write("<a href='" & nl.GetNextURL("links.txt"))
Response.Write("'>Next Page</a>")
%>
Berikut ini adalah daftar method untuk komponen ASP BrowserCap :
Tabel 5.3.7.3 : Daftar Method Komponen BrowserCap
Method
GetListCount
Deskripsi
Mengembalikan
jumlah item yang
terdaftar di file
Content Linking
List
Contoh
<%
dim nl,c
Set
nl=Server.CreateObject("MSWC.NextLink
")
c=nl.GetListCount("links.txt")
Response.Write("There are ")
Response.Write(c)
Response.Write(" items in the list")
%>
Output:
GetListIndex
Mengembalikan
jumlah index dari
item yang ada di
file Content
Linking List
There are 4 items in the list
<%
dim nl,c
Set
nl=Server.CreateObject("MSWC.NextLink
")
c=nl.GetListIndex("links.txt")
Response.Write("Item number ")
Response.Write(c)
%>
Output:
Item number 3
GetNextDescriptio Mengembalikan
<%
n
deskripsi dari item dim nl,c
selanjutnya yang Set
ada di file Content nl=Server.CreateObject("MSWC.NextLink
Linking List.
")
c=nl.GetNextDescription("links.txt")
Response.Write("Next ")
Response.Write("description is: ")
Response.Write(c)
%>
GetNextURL
Next description is: MadeLine’s list of
Clothes
Mengembalikan
<%
URL dari item
dim nl,c
selanjutnya yang Set
ada di file Content nl=Server.CreateObject("MSWC.NextLink
Linking List
")
c=nl.GetNextURL("links.txt")
LSP Telematika Indonesia
226
Response.Write("Next ")
Response.Write("URL is: ")
Response.Write(c)
%>
GetNthDescription Mengembalikan
deskripsi dari
halaman ke-N
yang terdaftar di
file Content
Linking List.
GetNthURL
Third description is: MadeLine’s list of
Clothes
Mengembalikan
<%
URL dari halaman dim nl,c
ke-N yang
Set
terdaftar di file
nl=Server.CreateObject("MSWC.NextLink
Content Linking
")
List
c=nl.GetNthURL("links.txt",3)
Response.Write("Third ")
Response.Write("URL is: ")
Response.Write(c)
%>
GetPreviousDescri Mengembalikan
ption
deskripsi teks dari
item sebelumnya
yang terdaftar di
file Content
Linking List.
GetPreviousURL
Next URL is: MadeLine_clothes.asp
<%
dim nl,c
Set
nl=Server.CreateObject("MSWC.NextLink
")
c=nl.GetNthDescription("links.txt",3)
Response.Write("Third ")
Response.Write("description is: ")
Response.Write(c)
%>
Third URL is: MadeLine_clothes.asp
<%
dim nl,c
Set
nl=Server.CreateObject("MSWC.NextLink
")
c=nl.GetPreviousDescription("links.txt")
Response.Write("Previous ")
Response.Write("description is: ")
Response.Write(c)
%>
Previous description is: MadeLine’s list of
Clothes
Mengembalikan
<%
URL dari item
dim nl,c
sebelumnya yang Set
terdaftar di file
nl=Server.CreateObject("MSWC.NextLink
Content Linking
")
List.
c=nl.GetPreviousURL("links.txt")
Response.Write("Previous ")
Response.Write("URL is: ")
Response.Write(c)
%>
LSP Telematika Indonesia
227
Previous URL is: MadeLine_clothes.asp
Komponen Content Rotator
Komponen
ASP Content
Rotator
membuat
objek
ContentRotator
yang
menampilkan HTML content string yang berbeda setiap kali user memasuki
atau merefresh halaman. Sebuah file teks, disebut file Content Schedule,
memiliki
informasi
mengenai
content
string.
Content
String
dapat
mengandung tag HTML, sehingga kita bisa menampilkan isi yang dapat
direpresentasikan HTML, seperti teks, gambar, warna atau hyperlinks. Sintaks
komponen ini adalah :
<%
Set cr=Server.CreateObject( "MSWC.ContentRotator" )
%>
Berikut ini adalah contoh file yang menampilkan isi yang berbeda setiap kali
user melihat web page. Buat file teks yang dinamai “textads.txt” di folder
default Web Site, dalam sebuah subfolder text.
“textads.txt” :
%% #1
This is a great day!!
%% #2
<h1>Smile</h1>
%% #3
<img src="smiley.gif">
%% #4
Here's a <a href="http://www.MadeLine.com">link.</a>
Perhatikan symbol #angka diawal content string. Angka ini adalah parameter
pilihan yang menandakan berat relatif dari HTML content string. Pada contoh
di atas, Content Rotator akan menampilkan content string pertama, 1-10
sewaktu, string kedua 2-10 sewaktu, string ketiga 3-10 sewaktu dan string
keempat 4-10 sewaktu.
Kemudian buat file ASP, dan masukkan kode di
bawah ini :
<html>
<body>
<%
set cr=server.createobject("MSWC.ContentRotator")
response.write(cr.ChooseContent("text/textads.txt"))
%>
LSP Telematika Indonesia
228
</body>
</html>
Method-method ada di komponen ini adalah :
Tabel 5.3.7.4 : Method Komponen Content Rotator
Method
Deskripsi
Contoh
ChooseContent Mendapatkan <%
dan
dim cr
menampilkan Set
content
cr=Server.CreateObject("MSWC.ContentRotator")
string
response.write(cr.ChooseContent("text/textads.txt"))
%>
Output:
GetAllContent Mengakses <%
dan
dim cr
menampilkan Set
semua
cr=Server.CreateObject("MSWC.ContentRotator")
content
response.write(cr.GetAllContent("text/textads.txt"))
string di file %>
teks
Output:
This is a great day!!
Smile
Here's a link.
5.4 Cookies and Session
5.4.1 Membuat Cookies
LSP Telematika Indonesia
229
Saat browser memanggil alamat web, server web dapat menuliskan informasi
tertentu di komputer tempat browser tersebut berada. Informasi ini disebut
dengan cookies. Namun browser dapat mematikan fasilitas cookies ini, agar
server
web
tidak
bisa
menuliskannya
ke
komputer
mereka.
Contoh
penggunaan cookies adalah untuk menyimpan informasi seperti kapan
terakhir kali user yang bersangkutan masuk (login), atau informasi mengenai
tata letak dari halaman web yang dia suka.
Cookies menyediakan fungsi untuk menyimpan informasi spesifik mengenai
pengguna dalam sebuah aplikasi web. Menurut definisinya, cookie adalah bit
text kecil yang mengiringi sebuah request dari suatu halaman web dalam
prosesnya antara web server dan browser. Cookie menyimpan informasi yang
dapat dibaca oleh aplikasi web saat seorang pengguna mengunjungi web site
tersebut.
Bayangkan saat seorang pengguna melakukan reques ke web site Anda,
www.contoso.com, aplikasi Anda tidak hanya mengirimkan halaman yang direquest melainkan juga cookie yang berisi data tanggal dan waktu kunjungan.
Ketika browser pengguna tersebut mendapatkan halaman yang di-request,
browser juga mendapatkan cookie, yang disimpan dalam sebuah folder pada
hard disk pengguna tersebut.
Pada waktu selanjutnya, pengguna tersebut melakukan request ke site Anda
lagi. Ketika pengguna masuk ke site www.contoso.com, browser mencari
cookie yang tersimpan dalam hard disk dan berkaitan dengan URL tersebut.
Jika cookie tersebut ada, browser kemudian akan mengirimkan cookie
tersebut ke web Anda bersamaan dengan request halaman dari pengguna.
Aplikasi
Anda
kemudian
akan
mendapatkan
data
tanggal
dan
waktu
kunjungan terakhir pengguna tersebut ke web site Anda. Anda dapat
memanfaatkan informasi tersebut untuk menampilkan suatu pesan kepada
pengguna tersebut, memeriksa tanggal expire, atau melakukan fungsi yang
lainnya.
LSP Telematika Indonesia
230
Cookie berkaitan dengan web site, tidak dengan halaman web yang spesifik,
sehingga
browser
dan
server
akan
mengganti
informasi
cookie
www.contoso.com dengan tidak memperhatikan halaman apa yang di-request
oleh pengguna. Jika pengguna tersebut mengunjungi site lain, maka setiap
site akan mengirimkan cookie ke browser pengguna, dan browser akan
menyimpan cookie untuk setiap site pada tempat yang berbeda.
5.4.2
Membuat Session
Session didefinisikan sebagai suatu periode waktu yang digunakan oleh
pengguna berinteraksi dengan sebuah aplikasi web. Pengembang ASP yang
berusaha untuk menyimpan data session untuk seorang pengguna dapat
menggunakan fitur intrinsic yang dikenal dengan session state.
Secara program, session state tidak lebih dari memori seukuran dengan
dictionary atau hash table, yang dapat diisi dengan durasi dari session
seorang pengguna.
ASP mengatur session state dengan menyediakan client sebuah kunci unique
yang diberikan kepada pengguna ketika session dimulai. Kunci tersebut
kemudian disimpan pada cookie HTTP yang dikirimkan oleh client kepada
server pada setiap request. Server kemudian akan membaca kunci tersebut
dari cookie dan melakukan re-inflate session state dari server.
Objek session bekerja pada level session web. Yang dimaksud level session
adalah saat client meminta layanan dari aplikasi web, web server akan
membuat satu session untuk user tersebut. Lingkungan session dapat dipakai
untuk berbagi informasi antara halaman web satu dengan lainnya sebatas
masih dalam satu user.
Collection, properti, method, dan event dari objek session dapat dilihat pada
tabel di bawah ini:
Deskripsi
Collection
contents
Berisi daftar item yang ditambahkan ke session melalui skrip
ASP.
LSP Telematika Indonesia
231
Staticobjects
Berisi daftar objek yang ditambahkan ke session melalui tag
<OBJECT>
Deskripsi
Method
Abandon
Membebaskan objek session dan seluruh resource yang dipakai
oleh session tersebut.
Properti
Deskripsi
codepage
Codepage yang dipakai untuk pemetaan simbol.
LCID
Mengatur pengenal lokal.
sessionID
Mengembalikan
pengenal
session
untuk
user
yang
bersangkutan.
timeout
Mengatur periode timeout untuk session yang bersangkutan
dalam satuan menit.
Deskripsi
Event
onstart
Kejadian saat aplikasi aktif untuk pertama kali, yaitu saat user
pertama masuk ke dalam aplikasi.
onend
5.4.3
Kejadian saat keluar dari aplikasi.
Menggunakan Cookies and Session
a. Menulis Cookies pada ASP .NET
Anda
menggunakan
cookie
dengan
properti
Response,
yang
akan
menghasilkan objek yang memudahkan Anda untuk menambahkan informasi
yang dibawa oleh browser pada halaman web Anda. Objek Response
mendukung collection bernama Cookies, dimana Anda dapat menambahkan
cookies yang Anda inginkan pada browser.
Ketika Anda membuat cookie, Anda harus menspesifikasikan beberapa nilai.
Untuk memulainya, spesifikasikan nama dari cookie dan nilai yang akan
disimpan didalamnya. Anda dapat membuat beberapa cookie dan setiap
cookie tersebut harus memiliki nama yang unique.
LSP Telematika Indonesia
232
Anda juga dapat menspesifikasikan tanggal dan waktu cookie tersebut tidak
dapat digunakan lagi. Cookie biasanya disimpan dalam disk pengguna,
dimana terdapat kemungkinan hang atau tidak bisa dipergunakan lagi.
Anda dapat menambahkan cookies dengan collection Response.Cookies
dalam beberapa cara. Contoh dibawah ini menunjukkan dua method untuk
menjalankan fungsi tersebut:
Response.Cookies("userName").Value = "mike"
Response.Cookies("userName").Expires = DateTime.Now.AddDays(1)
Dim aCookie As New HttpCookie("lastVisit")
aCookie.Value = DateTime.Now.ToString
aCookie.Expires = DateTime.Now.AddDays(1)
Response.Cookies.Add(aCookie)
b. Membaca Cookies pada ASP .NET
Ketika browser membuat request ke server, browser juga mengirimkan
cookies untuk server tersebut bersamaan dengan request. Pada aplikasi ASP
.NET Anda, Anda dapat membaca cookies dengan menggunakan objek
Request. Struktur dari objek Request sama dengan objek Request itu
sendiri, sehingga Anda dapat membaca cookies dengan cara yang sama
dengan cara Anda menuliskan cookies ke objek tersebut. Contoh dibawah ini
menunjukkan dua cara untuk mendapatkan nilai dari cookie yang bernama
“username” dan menampilkannya di control Label:
Sebelum Anda mencoba untuk mendapatkan nilai dari cookie, Anda harus
memastikan bahwa cookie tersebut exist. Jika tidak, Anda akan mendapatkan
exception System.NullReferenceException.
If Not Request.Cookies("userName") Is Nothing Then
Label1.Text =
Server.HtmlEncode(Request.Cookies("userName").Value)
End If
If Not Request.Cookies("userName") Is Nothing Then
Dim aCookie As HttpCookie = Request.Cookies("userName")
Label1.Text = Server.HtmlEncode(aCookie.Value)
End If
LSP Telematika Indonesia
233
Membaca
nilai
suatu
subkey
dalam
cookie
sama
seperti
cara
untuk
membuatnya. Dibawah ini adalah contoh untuk mendapatkan nilai dari
subkey:
If Not Request.Cookies("userInfo") Is Nothing Then
Label1.Text = _
Server.HtmlEncode(Request.Cookies("userInfo")("userName"))
Label2.text = _
Server.HtmlEncode(Request.Cookies("userInfo")("lastVisit"))
End If
Jika Anda ingin menggunakan nilai “lastVisit” sebagai data tanggal, Anda
harus melakukan convert.
Dim dt As DateTime
dt = CDate(Request.Cookies("userInfo")("lastVisit"))
Tipe subkey dari cookie adalah collection dari tipe NameValueCollection. Cara
lainnya untuk mendapatkan subkey individual adalah dengan mendapatkan
collection subkey dan kemudian melakukan extract dari nilainya berdasarkan
nama, seperti contoh dibawah ini:
If Not Request.Cookies("userInfo") Is Nothing Then
Dim UserInfoCookieCollection As _
System.Collections.Specialized.NameValueCollection
UserInfoCookieCollection = Request.Cookies("userInfo").Values
Label1.Text =
Server.HtmlEncode(UserInfoCookieCollection("userName"))
Label2.Text =
Server.HtmlEncode(UserInfoCookieCollection("lastVisit"))
End If
c. Menulis Cookies pada ASP
Perintah “Response.Cookies digunakan untuk membuat cookies. Perhatikan
bahwa perintah ini harus muncul sebelum tag <html>. Pada contoh di bawah
ini, kita akan membuat cookie yang dinamakan nama_awal dan memberi nilai
”Alex”.
<%
Response.Cookies("nama_awal")="Alex"
%>
LSP Telematika Indonesia
234
Selain itu kita juga bisa memberi properti pada cookie, seperti menentukan
waktu cookie berakhir :
<%
Response.Cookies("nama_awal")="Alex"
Response.Cookies("nama_awal").Expires=#May 10,2002#
%>
c. Membaca nilai Cookies pada ASP
Perintah “Request.Cookies” digunakan untuk mengakses nilai cookie. Pada
contoh di bawah ini, kita akan mengakses nilai cookie yang dinamai
“nama_awal” dan menampilkannya di layer :
<%
fname=Request.Cookies("firstname")
response.write("Firstname=" & fname)
%>
Output:
Firstname=Alex
Cookie dengan Kunci
Jika cookie mengandung beberapa nilai maka cookie tersebut dikatakan
memiliki kunci. Berikut ini adalah contoh pembuatan koleksi cookie yang
dinamai “user: dan cookie ini mengandung informasi mengenai user :
<%
Response.Cookies("user")("nama_awal")="John"
Response.Cookies("user")("nama_akhir")="Smith"
Response.Cookies("user")("negara")="Norway"
Response.Cookies("user")("umur")="25"
%>
Membaca semua Cookies
Perhatikan kode berikut ini :
<%
Response.Cookies("firstname")="Alex"
Response.Cookies("user")("firstname")="John"
Response.Cookies("user")("lastname")="Smith"
Response.Cookies("user")("country")="Norway"
Response.Cookies("user")("age")="25”
%>
Misalkan server telah mengirim semua cookie diatas ke user. Sekarang kita
hendak membaca semua cookie tersebut. Berikut ini adalah contoh kode-nya
LSP Telematika Indonesia
235
(kode di bawah memeriksa jika cookie memiliki kunci dengan property
HasKeys) :
<html>
<body>
<%
dim x,y
for each x in Request.Cookies
response.write("<p>")
if Request.Cookies(x).HasKeys then
for each y in Request.Cookies(x)
response.write(x & ":" & y & "=" & Request.Cookies(x)(y))
response.write("<br />")
next
else
Response.Write(x & "=" & Request.Cookies(x) & "<br />")
end if
response.write "</p>"
next
%>
</body>
</html>
Output:
nama_awal=Alex
user:nama_awal=John
user:nama_akhir=Smith
user:negara=Norway
user:umur=25
5.4.4 Menggunakan ASP .NET Session State
Setting session state pada ASP .NET dikonfigurasi melalui file konfigurasi XML
ASP .NET config.web. In Beta 1, mesin file config.web berada pada
directory
WinNT\Microsoft.NET\Framework\v1.0.2204,
sementara
file
konfigurasi lainnya berada pada directory aplikasi.
Dibawah ini adalah contoh untuk mengkonfigurasi session state untuk aplikasi
ASP .NET:
<configuration>
<sessionstate
mode="inproc"
cookieless="false"
timeout="20"
LSP Telematika Indonesia
236
sqlconnectionstring="data source=127.0.0.1;user id=<user
id>;password=<password>"
server="127.0.0.1"
port="42424"
/>
</configuration>
Contoh setting diatas digunakan untuk melakukan konfigurasi pada session
state ASP .NET. Berikut ini adalah penjelasan secara lebih detil dari masingmasing bagian:
•
Mode. Setting mode mendukung tiga pilihan: inproc, sqlserver, dan
stateserver. ASP .NET mendukung dua mode: in process dan out of process.
Untuk state management out of process terdapat dua pilihan: memory based
(stateserver) dan SQL Server based (sqlserver).
•
Cookieless. Pilihan cookieless untuk ASP .NET dikonfigurasi dengan setting
boolean.
•
Timeout. Pilihan ini mengontrol panjangnya waktu session masih valid.
•
Sqlconnectionstring. Sqlconnectionstring mengidentifikasikan string koneksi
database yang dapat digunakan untuk mode sqlserver.
•
Server. Pada mode stateserver out of process, diberikan nama pada server
yang sedang menjalankan service Windows NT yang diinginkan yaitu
ASPState.
•
Port. Setting untuk port yang bersamaan dengan setting untuk server,
mengidentifikasikan port number yang berhubungan dengan setting untuk
server pada mode stateserver.
Dibawah ini adalah contoh aplikasi session state.
<Script runat=server>
Sub Session_Add(sender As Object, e As EventArgs)
Session("MySession") = text1.Value
span1.InnerHtml = "Session data updated! <P>
Your session contains: <font color=red>" +
Session("MySession").ToString() +
"</font>"
End Sub
Sub CheckSession(sender As Object, e As EventArgs)
If (Session("MySession") = Isnull) Then
span1.InnerHtml = "NOTHING, SESSION DATA LOST!"
Else
span1.InnerHtml = "Your session contains:
<font color=red>" +
Session("MySession").ToString() +
"</font>"
End If
End Sub
</Script>
LSP Telematika Indonesia
237
<form runat=server>
<input id=text1 type=text runat=server>
<input type=submit runat=server
OnServerClick="Session_Add" Value="Add to Session
State">
<input type=submit runat=server
OnServerClick="CheckSession" Value="View Session
State">
</form>
<hr size=1>
<font size=6><span id=span1 runat=server/></font>
5.5 Trace and Debugging
5.5.1 Trace
ASP .NET memperkenalkan sebuah fungsi baru yang memudahkan Anda
untuk melihat informasi yang menyeluruh tentang request tunggal untuk
halaman ASP .NET dengan cara yang sederhana. Fungsi ini disebut tracing,
yang juga memudahkan Anda untuk menulis pernyataan debug secara
langsung pada kode Anda tanpa harus menghilangkannya dari aplikasi ketika
Anda harus melakukan deployment pada production server. Anda dapat
menulis variabel atau struktur pada sebuah halaman, menjalankannya jika
memenuhi sebuah kondisi tertentu, atau hanya melakukan trace sederhana
selama eksekusi halaman atau aplikasi sedang berlangsung.
Agar aplikasi Anda dapat mengumpulkan dan menampilkan pesan tracing
tersebut atau informasi tracing lainnya, Anda harus mengaktifkan fungsi
tracing pada halaman atau aplikasi Anda. Jika Anda mengaktifkan, dua hal
akan terjadi:
•
ASP .NET menambahkan sekumpulan tabel informasi tracing secara
langsung dan seketika mengikuti keluaran atau hasil dari halaman web.
Informasi tersebut akan langsung dikirimkan kepada aplikasi pengguna.
•
ASP .NET menampilkan pesan tracing pada tabel informasi tracing untuk
setiap terjadinya penambahan data.
Informasi dan pesan tracing yang telah Anda spesifikasi akan ditambahkan ke
keluaran atau hasil dari halaman yang dikirimkan kepada browser pengguna
yang melakukan request. Atau, Anda dapat melihat informasi tersebut dari
tampilan trace yang berbeda yang menampilkan informasi tracing untuk
setiap halaman pada aplikasi tersebut. Informasi ini akan membantu Anda
LSP Telematika Indonesia
238
untuk mengklarifikasi error atau hasil yang tidak diinginkan pada setiap
halaman request proses ASP .NET.
Pernyataan trace diproses dan ditampilkan hanya jika fungsi trace diaktifkan.
Anda dapat mengontrol apakah tracing akan ditampilkan pada halaman,
kepada pengguna atau keduanya.
5.5.2
Debugging
Untuk melakukan debug pada sebuah aplikasi dalam framework .NET,
compiler dan lingkungan aplikasi harus dikonfigurasi untuk mengaktifkan
debugger pada aplikasi dan untuk menghasilkan simbol dan line maps, jika
mungkin,
untuk
aplikasi
dan
Microsoft
Intermediate
Language
yang
berhubungan dengan aplikasi tersebut. Jika suatu aplikasi telah di-debug,
maka aplikasi tersebut dapat meningkatkan performanya melalui sebuah
profil. Profil tersebut akan mengevaluasi dan mendeskripsikan baris-baris
source code yang hasilnya adalah kode program yang paling banyak
dijalankan, dan berapa waktu yang diperlukan untuk menjalankan kode
tersebut.
Aplikasi pada framework .NET sangat mudah di-debug dengan menggunakan
Visual Studio .NET, yang dapat menangani banyak detil-detil konfigurasi. Jika
Anda belum menginstall Visual Studio .NET, Anda dapat memeriksan dan
meningkatkan performa aplikasi Anda dengan berbagai alternatif seperti
dibawah ini:
•
Class Systems.Diagnostic
•
Runtime Debugger (Cordbg.exe) yang merupakan debugger commandline.
•
Microsoft Common Language Runtime Debugger (DbgCLR.exe) yang
merupakan debugger dari Windows.
Namespace dari framework .NET System.Diagnostic termasuk didalamnya
adalah class Trace dan Debug untuk tracing aliran eksekusi aplikasi, dan
class Process, EventLog, dan PerformanceCounter untuk membuat profil
kode program. Debigger command-line Cordbg.exe dapat digunakan untuk
melakukan debug kode dari interpreter command-line. DbgCLR.exe adalah
debugger
yang
sering
LSP Telematika Indonesia
digunakan
dengan
antarmuka
Windows
untuk
239
melakukan debug pada kode program. Debugger tersebut berlokasi pada
folder Microsoft.NET/FrameworkSDK/GUIDebug.
5.5.3
Implementasi Trace pada Aplikasi Web
Anda dapat mengontrol apakah tracing diaktifkan atau tidak untuk halaman
aplikasi
Anda
pada
atribut
Trace
dari
directive
@
Page.
Jika
Anda
mengaktifkan tracing dan halaman tersebut di-request, maka ASP .NET akan
menambahkan sekumpulan tabel berisi informasi performa tentang halaman
yang di-request tersebut, dengan tidak memperdulikan apakah Anda telah
menulis pesan pada trace log atau tidak.
Default fungsi tracing adalah tidak diaktifkan. Jika Anda tidak menambahkan
atribut Trace pada halaman web Anda, informasi tracing tidak dikumpulkan,
dan pesan tracing yang Anda tulis tidak akan muncul pada halaman tersebut.
Untuk mengaktifkan tracing pada halaman
1. Tambahkan directive @ Page pada awal file .aspx Anda. Tambahkan juga
atribut Trace dan set nilainya menjadi true.
<%@ Page Trace="true" %>
2. Tambahkan atribtu TraceMode untuk menspesifikasikan urutan tampilan
pesan
tracing
yang
Anda
inginkan.
Set
atribut
tersebut
dengan
SortByTime untuk mengurutkan pesan dengan urutan waktu pesan
tersebut diproses terlebih dahulu. Set atribut dengan SortByCategory
untuk
mengurutkannya
berdasarkan
kategori
yang
telah
Anda
spesifikasikan pada method Trace.Warn dan Trace.Write pada halaman
atau kode server control Anda.
Contoh dibawah ini akan mengurutkan pesan tracing pada halaman dan
server control berdasarkan kategori jika Anda menambahkannya pada
awal kode program Anda.
LSP Telematika Indonesia
240
<%@ Page Language="VB" Trace="True" TraceMode="SortByCategory" %>
Screen
shot
dibawah
ini
menggambarkan
informasi
trace
yang
ditambahkan pada bagian akhir hasil keluaran dari halaman web Anda.
Gambar 5.5.3.1 Contoh File Yang Menggunakan Trace
5.6 Keamanan Aplikasi Web
5.6.1
Keamanan Pada ASP .NET
Pengamanan web sites sangatlah penting dan termasuk isu yang paling sering
dibahas
oleh
pengembang
Web.
Mengamankan
site
membutuhkan
perencanaan yang matang, administrator dan programmer harus memiliki
pengetahuan yang cukup untuk memilih teknik pengamanan web site mereka.
ASP .NET yang termasuk dalam Microsoft .NET framework dan Microsoft
Internet
Information
mengaplikasikan
Services
teknik
(IIS)
pengamanan
menyediakan
terhadap
web
fungsi-fungsi
site
Anda.
untuk
Untuk
mengamankan aplikasi ASP .NET, Anda harus menjalankan dua fungsi utama
yang terdapat pada tabel dibawah ini:
Tabel 5.6.1.1 Tabel Fungsi Keamanan
Fungsi
Deskripsi
Security
Authentication
Membantu untuk verifikasi bahwa pengguna yang
menggunakan aplikasi tersebut adalah pengguna yang
LSP Telematika Indonesia
241
seharusnya. Aplikasi membutuhkan variabel identifikasi,
seperti nama dan password dari pengguna dan memvalidasi
variabel tersebut untuk mendapatkan otoritas penggunaan.
Jika variabel tersebut valid, maka pengguna tersebut dapat
menggunakan aplikasi ASP .NET.
Authorization
Membatasi hak akses dengan cara mengijinkan atau
mencegah ijin tertentu untuk identitas yang telah
mendapatkan authentication.
Internet Information Services dapat pula mengijinkan atau mencegah akses
berbasiskan host name atau IP address pengguna. Otorisasi akses selanjutnya
akan dilakukan oleh otorisasi URL dari NTFS file access permission.
Anda akan sangat terbantu jika Anda mengerti bagaimana subsistem security
berfungsi. Sejak ASP .NET dibangun diatas framework Microsoft .NET,
pengembang aplikasi .NET juga memiliki akses terhadap fitur-fitur security
yang built-in dalam framework .NET, seperti code access security dan rolebased user-access security.
5.6.2
Setting security di ASP .NET
5.6.2.1 IIS Authentication
Pada contoh skenario setting security dibawah ini, Anda akan mengatur
pengamanan untuk aplikasi web site intranet untuk posting informasi
pegawai. Beberapa informasi hanya dapat dilihat oleh manager saja.
Informasi dari manager dapat dipost ke subdirectory informasi pegawai
sehingga jumlah aksesnya dapat dibatasi. Asumsi-asumsi lainnya adalah:
•
Anda menggunakan Microsoft Windows NT atau Microsoft Windows 2000
server.
•
Hard disk telah diformat untuk NTFS.
•
Web server adalah Microsoft Internet Information Services (IIS) 6.0
•
Pegawai yang mengakses menggunakan platform Windows.
Anda sebagai administrator:
1. Buat files dan directory yang diperlihatkan ilustrasi dibawah ini.
Files and directories
LSP Telematika Indonesia
242
2
Buat Windows group bernama Managers yang terdiri dari semua pengguna
yang berhak mengakses file ManagerInfo.aspx
3
Set up Windows authentication menggunakan tool IIS administration.
a.
Set atribut impersonate pada element <identity> di file konfigurasi
ASP .NET menjadi true.
b.
Set
NTFS
access
control
list
(ACL)
untuk
directory
ManagerInformation untuk memperbolehkan akses hanya untuk
identitas pengguna yang terdapat pada Windows group Manager.
Setting untuk directory ini memiliki langkah-langkah sebagai berikut:
a. Hilangkan akses dari group Everyone, jika terdapat group tersebut.
b. Cegah hak akses dari pengguna anonymous.
c. Tambahkan accounts yang memiliki hak akses.
d. Berikan hak akses terhadap accounts tersebut.
Langkah-langkah
pada
skenario
setting
security
diatas
memberikan
pengamanan yang sesuai tanpa keharusan menambahkan kode-kode apapun
pada script ASP .NET Anda.
5.6.2.2 Simple Forms Authentication
Contoh dibawah ini adalah implementasi sederhana teknik pengamanan ASP
.NET menggunakan ASP .NET forms authentication. Pada skenario ini, client
meminta data yang diproteksi, yaitu Default.aspx. Hanya terdapat satu
pengguna yang dapat mengakses data tersebut yaitu [email protected],
dengan passwordnya adalah password. User-name dan password di-hard code
pada file Logon.aspx. Terdapat tiga file yang terdapat pada skenario ini:
Web.config, Logon.aspx, dan Default.aspx. File-file tersebut berada dalam
directory root aplikasi.
•
Web.config
Anda harus set up konfigurasi file Web.config untuk mendapatkan entry
dibawah ini dan letakkan pada directory root aplikasi.
LSP Telematika Indonesia
243
<configuration>
<system.web>
Untuk set up file konfigurasi Web.config
1. Set authentication mode dengan Forms. Kemungkinan nilai lainnya
adalah Windows, Passport, dan None (string kosong). Untuk contoh
berikut ini, nilai tersebut adalah Forms.
<authentication mode="Forms">
2. Set atribut forms authentication
<forms
a. Set atribut loginUrl pada “logon.aspx”. Logon.aspx adalah URL
untuk digunakan jika ASP .NET tidak menemukan authentication
cookie
dengan
request.
loginUrl = "logon.aspx"
b. Set nama suffix cookie
name = ".ASPXFORMSAUTH"/>
3. Cegah pengguna yang tidak memiliki authentication untuk mengakses
directory ini.
</authentication>
<authorization>
<deny users="?"/>
</authorization>
</system.web>
</configuration>
•
Logon.aspx
Logon.aspx adalah file yang digunakan sebagai redirect file jika ASP .NET
tidak menemukan tiket authentication dengan request. Nama file ini telah
dispesifikasikan pada file konfigurasi Web.config. Form terdiri dari dua
text-box yaitu Nama E-Mail dan Password serta sebuah tombol Submit
yang ditampilkan kepada pengguna. Pengguna kemudian memasukkan
nama e-mail dan password yang dimiliki, dan klik tombol Submit. Nama email dan password tersebut kemudian dibandingkan dengan kode yang
telah di-hard code pada statement if. Jika perbandingan sama, maka
LSP Telematika Indonesia
244
pengguna tersebut akan terkoneksi ke file Default.aspx. Jika tidak sama,
maka akan muncul pesan error yang ditampilkan kepada pengguna.
Untuk mengimplementasikan Logon.aspx
1. Import namespace yang diperlukan
<%@ Import Namespace="System.Web.Security" %>
2. Set script language
<html>
[Visual Basic]
<script language=”VB” runat=server>
[C#]
<script language=”C#” runat=server>
3. Buat event handler Logon-Click untuk handle event Submit
4. A
u
[Visual Basic]
Sub Logon_Click(sender As Object, e As EventArgs)
[C#]
Sub Logon_Click(Object sender, EventArgs e)
{
t
henticate pengguna dengan membandingkan input nama e-mail dan
password dengan hard-code : [email protected] dan password. Jika
perbandingan sama maka redirect request tersebut ke data yang
diproteksi yaitu Default.aspx. Jika tidak sama, munculkan pesan error.
[Visual Basic]
If (UserEmail.Value = “[email protected]”) And _
(UserPass.Value = “password”)) Then
FormsAuthentication.RedirectFromLoginPage _
(UserEmail.Value, Persist.Checked)
Else
Msg.Text = “Invalid E-Mail Name or Password:
Please try again.”
End If
End Sub
</script>
[C#]
if
((UserEmail.Value == “[email protected]”) &&
(UserPass.Value == “password”)
{
FormsAuthentication.RedirectFromLoginPage
(UserEmail.Value, Persist.Checked);
}
LSP Telematika Indonesia
245
else
{
Msg.Text =
Please try again.”;
}
}
</script>
“Invalid
E-Mail
Name
or
Password:
5. Tampilkan form untuk mendapatkan informasi logon
<body>
<form runat=server>
<h3><font face=”Verdana”>Logon Page</font></h3>
<table>
<tr>
a. Buat text box User E-Mail Name. Tambahkan field validator
control dan validator control untuk regular expression yang
menguji validitas masukan nama e-mail.
<td>Email:</td>
<td><input id=”UserEmail” type=”text” runat=server/></td>
<td><ASP:RequiredFieldValidator
ControlToValidate=”UserEmail”
Display=”Static”
ErrorMessage=”Cannot be empty.”
runat=server/>
</td>
<td><asp:RegularExpressionValidator id=”RegexValidator”
ControlToValidate=”UserEmail”
ValidationExpression=”^([a-zA-Z0-9 \-\.]+)@((\[[09]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a- a-zA-Z0-9\]+\.+))([a- a-zA-Z]{2,4}|[0-9}{1,3})(\]?)$”
EnableClientScript=”false”
Display=”Static”
ErrorMessage=”Invalid format for e-mail address”
runat=”server”/>
</td>
</tr>
<tr>
b. Buat text box Password
<td>Password:</td>
<td>input id=”UserPass” type=password runat=server/></td>
<td>ASP:RequiredFieldValidator
ControlTo Validate=”UserPass”
Display=”Static”
ErrosMessage=”Cannot be empty.”
runat=server/>
</td>
</tr>
<tr>
LSP Telematika Indonesia
246
c. Buat check box Persistent Cookie. Jika box Persistent Cookie
dipilih maka cookie akan menjadi valid melalui browser session.
Jika tidak maka cookie tersebut akan dihilangkan ketika browser
ditutup.
<td>Persistent Cookie:</td>
<td><ASP:CheckBox id=Persist runat=”server”
autopostback=”true”/>
</td>
<td></td>
</tr>
</table>
d. Buat tombol Submit yang akan menjalankan event Logon_Click
jika telah di post back
<input type=”submit” OnServerClick=”Logon_Click”
Value=”Logon”
runat=”server”/>
<p><asp:Label id=”Msg” ForeColor=”red” FontName=”Verdana”
Font-Size="10" runat=server/></p>
</form>
</body>
</html>
•
Default.aspx
File Default.aspx adalah file yang diinginkan oleh pengguna yang
merupakan
data
yang
diproteksi.
Default.aspx
hanyalah
file
yang
sederhana yang menampilkan string Hello dan nama e-mail yang
disimpan serta tombol Signout.
[Visual Basic]
<%@ Page LANGUAGE="VB" %>
<html>
<head>
<title>Forms Authentication</title>
<script runat=server>
Sub Page_Load(Src As Object, e As EventArgs)
Welcome.InnerHtml = "Hello, " +
Context.User.Identity.Name
End Sub
Sub Signout_Click(sender As Object, e As EventArgs)
FormsAuthentication.SignOut()
Response.Redirect("logon.aspx")
End Sub
</script>
<body>
<h3><font face="Verdana">Using Forms Authentication</font></h3>
<span id="Welcome" runat=server/>
<form runat=server>
LSP Telematika Indonesia
247
<input type="submit" OnServerClick="Signout_Click"
Value="Signout"
runat="server"/><p>
</form>
</body>
</html>
[C#]
<%@ Page LANGUAGE="C#" %>
<html>
<head>
<title>Forms Authentication</title>
<script runat=server>
private void Page_Load(Object Src, EventArgs e )
{
Welcome.InnerHtml = "Hello, " +
Context.User.Identity.Name;
}
private void Signout_Click(Object sender, EventArgs e)
{
FormsAuthentication.SignOut();
Response.Redirect("logon.aspx");
}
</script>
<body>
<h3><font face="Verdana">Using Forms Authentication</font></h3>
<span id="Welcome" runat=server/>
<form runat=server>
<input type="submit" OnServerClick="Signout_Click"
Value="Signout"
runat="server"/><p>
</form>
</body>
</html>
5.7 Membuat Aplikasi Web Yang Dinamis
5.7.1
Menggunakan ASP dengan javascript
Pengembang web telah lama berkutat dalam keterbatasan dari browser
dengan menggunakan kombinasi dari server-side processing dan client-side
processing.
Working logic
dan
proses dalam
aplikasi pada
client-side
memudahkan browser yang berdasarkan aplikasi untuk kelihatan lebih
responsif dan lebih memiliki “snappiness”. Untuk pengembangan client-side,
kebanyakan pengembang memilih JavaScript pada program Active Server
Pages mereka dengan server-side berupa Microsoft Visual Basic atau Jscript.
Sekarang dengan Microsoft ASP .NET dan model terbaru yang disediakannya,
LSP Telematika Indonesia
248
pengembang web terkadang mereka-reka bagaimana menggabungkan fungsi
JavaScript dengan kode program ASP .NET mereka.
Menambahkan JavaScript ke Server Control
Menambahkan JavaScript ke serve control yang spesifik pada sebuah halaman
ASP .NET dapat dikatakan cukup mudah. Lihatlah contoh dibawah ini untuk
server control berupa button. Jika Anda melakukan drag and drop sebuah
server control HTML Button (class HtmlInputButton) ke sebuah halaman
web matrix Visual Studio .NET atau ASP .NET dan menjalankannya sebagai
server control, maka kode programnya adalah sebagai berikut:
Contoh diatas adalah button biasa yang bisa diubah kode programnya pada
script ASP .NET. Misalnya, untuk meng-assign text pada button ketika
halaman tersebut dijalankan, maka Anda mempergunakan properti value dari
button setelah elemen tersebut berubah menjadi server control HTML (
Visual Basic .NET
Private Sub Page_Load(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles MyBase.Load
Button1.Value = DateTime.Now.ToString()
End Sub
Visual C# .NET
void Page_Load(object sender, EventArgs e) {
Button1.Value = DateTime.Now.ToString();
}
Dibawah ini adalah gambar button yang dapat menampilkan tanggal dan
waktu sebagai text pada button tersebut.
Berikut ini adalah contoh kode program untuk menampilkan waktu computer
pada tombol Web server control.
Visual Basic .NET
<%@ Page Language="VB" %>
<script runat="server">
LSP Telematika Indonesia
249
Sub Button1_Click(sender As Object, e As EventArgs)
Response.Write("Postback!")
End Sub
</script>
<html>
<head>
</head>
<body
onload="javascript:document.forms[0]['Button1'].value=Date();">
<form runat="server">
<p>
<asp:Button id="Button1" onclick="Button1_Click"
runat="server" Font-Bold="True" Font-Names="Verdana"
Font-Size="Larger
"></asp:Button>
</p>
</form>
</body>
</html>
Visual C# .NET
<%@ Page Language="C#" %>
<script runat="server">
void Button1_Click(object sender, EventArgs e) {
Response.Write("Postback!");
}
</script>
<html>
<head>
</head>
<body
onload="javascript:document.forms[0]['Button1'].value=Date();">
<form runat="server">
<p>
<asp:Button id="Button1" onclick="Button1_Click"
runat="server" Font-Bold="True" Font-Names="Verdana"
Font-Size="Larger"></asp:Button>
</p>
</form>
</body>
</html>
5.7.2
Menghubungkan Basis Data dengan ADO .NET
Pada ADO .NET, Anda dapat menggunakan objek Connection untuk
melakukan koneksi pada data source yang spesifik. Untuk melakukan koneksi
ke
Microsoft
SQL
Server
versi
7.0
atau
lebih,
pergunakan
objek
SqlConnection dari Framework Data Provider .NET untuk SQL Server. Untuk
LSP Telematika Indonesia
250
melakukan koneksi ke data source OLE DB atau Microsoft SQL Server versi
6.x atau kurang dengan menggunakan Provider OLE DB untuk SQL Server
(SQLOLEDB), pergunakan objek OleDbConnection dari Framework Data
Provider .NET untuk OLE DB. Untuk melakukan koneksi ke data source ODBC,
pergunakan objek OdbcConnection dari Framework Data Provider .NET
untuk ODBC. Untuk melakukan koneksi ke data source Oracle, pergunakan
objek OracleConnection dari Framework Data Provider .NET untuk Oracle.
5.8
ASP Response Object
ASP Response Object digunakan untuk mengirimkan keluaran dari server ke user.
Berikut ini adalah daftar collection, properti dan methodnya :
Tabel 5.8.1 : Collections
Collection
Cookies
Deskripsi
Menentukan nilai cookies. Jika cookie tidak ada, maka akan
dibuat terlebih dahulu dan mengambil nilai dari cookie
tersebut.
Tabel 5.8.2 : Properties
Property
Buffer
CacheControl
Charset
ContentType
Expires
ExpiresAbsolute
IsClientConnected
Pics
Status
Description
Menentukan apakah hendak menamping keluaran atau tidak.
Menentukan apakah proxy server dapat menampung
keluaran dari ASP di cache.
Menambahkan nama dari character-set ke content-type
header pada response object.
Menentukan HTTP content type untuk response object.
Menentukan lamanya (dalam menit) sebuah halaman akan
ditampung di cache browser sebelum halaman tersebut
expired.
Menentukan tanggal dan waktu expires dari halaman yang
ditampung di cache.
Menandakan bahwa client tidak terkoneksi dengan server
Menambahkan nilai ke label PICS response header
Menentukan nilai dari statis line yang dikembalikan server.
Tabel 5.8.3 : Methods
Method
AddHeader
AppendToLog
BinaryWrite
Description
Menambah HTTP heade yang baru dan nilai untuk HTTP
response.
Menambahkan string diakhir log server.
Writes data directly to the output without any character
LSP Telematika Indonesia
251
Clear
End
Flush
Redirect
Write
5.9
conversion Menulis data
Membersihkan buffer keluaran HTML
Berhenti memproses script dan mengembalikan hasil proses
Mengirimkan keluaran HTML yang ditampung secepatnya
Mengalihkan user ke URL yang berbeda.
Menuliskan string tertentu sebagai keluaran
ASP Request Object
Ketika browser meminta halaman dari server, hal ini disebut request. ASP request
object digunakan untuk memperoleh informasi dari user. Berikut ini adalah
collection, properti dan method-nya :
Tabel 5.9.1 : Collections
Collection
ClientCertificate
Cookies
Form
QueryString
ServerVariables
Description
Mengandung semua nilai field yang disimpan dalam
sertifikasi client
Mengandung semua nilai cookie yang dikirim dengan HTTP
request
Mengandung semua nilai form yang menggunakan method
POST
Mengandung semua nilai variabel di HTTP query string
Mengandung semua nilai variable server
Tabel 5.9.2 : Properties
Property
TotalBytes
Description
Mengembalikan total byte yang dikirimkan client di dalam
request
Tabel 5.9.3 : Methods
Method
BinaryRead
Description
Memperoleh data yang dikirim ke server dari client sebagai
bagian dari request dan menyimpannya dalam array.
Request objek dapat digunakan untuk mengambil informasi dari user lewat form.
Contoh :
<form method="get" action="simpleform.asp">
First Name: <input type="text" name="fname" />
<br />
Last Name: <input type="text" name="lname" />
<br /><br />
<input type="submit" value="Submit" />
</form>
Input user dapat diperoleh dengan 2 cara yaitu dengan Request QueryString
atau
Request
Form.
Perintah
Request
QueryString
digunakan
untuk
mengumpulkan nilai dalam form dengan method=”get”. Informasi yang dikirim
LSP Telematika Indonesia
252
lewat method ini dapat dilihat pada address bar dan memiliki batasan jumlah
informasi. Seandainya user mengetik ”Budi” dan ”Santoso” pada form diatas,
maka
URL
yang
terkirim
ke
server
adalah
http://www.w3schools.com/simpleform.asp?fname=Bill&lname=Gates
Seandainya file asp FormSederhana.asp mengandung script sebagai berikut :
<body>
Selamat Datang
<%
response.write(request.querystring("fname"))
response.write(" " & request.querystring("lname"))
%>
</body>
Maka browser akan menampilkan Welcome Bill Gates di dokumen.
Perintah Request Form digunakan untuk mengumpulkan informasi dari form
dengan method=”post”. Informasi yang dikirim melalui method ini tidak terlihat
oleh orang lain dan tidak memiliki batasan jumlah. Seandainya user menulis
”Budi” dan ”Santoso” di form maka URL yang terkirim pada server adalah
http://www.w3schools.com/FormSederhana.asp
5.10
ASP Server Object
ASP server objek digunakan untuk mengakses properti dan methods dalam
server. Berikut ini adalah daftar properti dan method-nya :
Properti
Properti
Deskripsi
ScriptTimeout
Mengembalikan jumlah maksimum detik sebuah script dapat
berjalan.
Methods
Method
Deskripsi
CreateObject
Membuat instance objek
Execute
Mengeksekusi file ASP dari file ASP yang lain
GetLastError()
Mengembalikan objek ASPError yang mendeskripsikan
kondisi eror yang terjadi
HTMLEncode
Menerapkan HTML encoding pada string yang ditentukan
MapPath
Memetakan path yang telah ditentukan ke path fisik
Transfer
Mengirimkan semua informasi dari file ASP yang satu ke
yang lainnya.
URLEncode
Menerapkan aturan URL encoding ke string yang ditentukan
LSP Telematika Indonesia
253
5.11
ActiveX Data Object (ADO)
Membuat Koneksi Basis Data tanpa DSN
Cara termudah untuk terhubung dengan basis data dengan menggunakan
koneksi tanpa DSN. Koneksi jenis ini data digunakan pada basis data Microsoft
Access di web kita. Jika kita memiliki basis data yang dinamai “northwind.mdb”
yang terletak di direktori web “c:/web/”, kita dapat terhubung dengan basis data
ini dengan kode ASP di bawah ini :
<%
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open "c:/webdata/northwind.mdb"
%>
Membuat Koneksi Basis Data dengan ODBC
Apabila kita memiliki basis data ODBC yang dinamai “northwind”, kita dapat
terhubung dengan basis data ini dengan kode ASP di bawah ini :
<%
set conn=Server.CreateObject("ADODB.Connection")
conn.Open "northwind"
%>
Dengan koneksi ODBC maka kita dapat terhubung dengan basis data manapun
pada computer di jaringan selama koneksi ODBC masih aktif.
Objek Connection
ADO objek connection digunakan untuk membuat koneksi terbuka dengan
sumber data. Melalui koneksi ini, kita dapat mengakses dan memanipulasi basis
data. Kita juga bisa membuat koneksi basis data dengan melewatkan string
koneksi melalui sebuah objek command atau recordset. Tetapi, koneksi jenis ini
hanya baik digunakan untuk query tertentu saja.
ProgID
set objConnection=Server.CreateObject("ADODB.connection")
LSP Telematika Indonesia
254
Berikut ini adalah properti, method dan event dari objek Connection :
Tabel 5.10.1 : Properti Objek Connection
Properti
Attributes
CommandTimeout
ConnectionString
ConnectionTimeout
CursorLocation
DefaultDatabase
IsolationLevel
Mode
Provider
State
Version
Keterangan
Mengeset atau mengembalikan atribut dari objek Connection
Mengeset atau mengembalikan waktu (dalam detik)
menunggu sebuah perintah dieksekusi
Mengeset atau mengembalikan detail yang digunakan
membuat koneksi ke sumber data
Mengeset atau mengembalikan waktu (dalam detik)
menunggu koneksi terbuka
Mengeset atau mengembalikan lokasi dari servis
Mengeset atau mengembalikan nama basis data default
Mengeset atau mengembalikan level isolasi
Mengeset atau mengembalikan provider access permission
Mengeset atau mengembalikan nama provider
Mengembalikan nilai yang menandakan bahwa koneksi
terbuka atau tertutup
Mengembalikan angka versi ADO
untuk
untuk
untuk
telah
Tabel 5.10.2 : Method Objek Connection
Method
BeginTrans
Cancel
Close
CommitTrans
Execute
Open
OpenSchema
RollbackTrans
Keterangan
Memulai transaksi baru
Membatalkan eksekusi perintah
Menutup koneksi
Menyimpan segala perubahan dan mengakhiri transaksi yang
sedang berlangsung
Mengeksekusi sebuah query, statement, prosedur atau provider
teks tertentu
Membuka koneksi
Mengembalikan schema informasi dari provider mengenai sumber
data
Membatalkan segala perubahan dari transaksi yang sedang
berlangsung dan mengakhiri transaksi
Bahasa yang dapat menangani event hanya Visual Basic, Visual C++ dan Visual J++.
Tabel 5.10.3 : Event Objek Connection
Event
BeginTransComplete
CommitTransComplete
ConnectComplete
Disconnect
ExecuteComplete
InfoMessage
RollbackTransComplete
WillConnect
WillExecute
Keterangan
Terpicu setelah operasi BeginTrans
Terpicu setelah operasi CommitTrans
Terpicu setelah koneksi dimulai
Terpicu setelah koneksi berakhir
Terpicu setelah sebuah perintah selesai dieksekusi
Terpicu jika ada peringatan yang muncul selama
ConnectionEvent berlangsung
Terpicu setelah operasi RollbackTrans
Terpicu sebelum koneksi dimulai
Terpicu sebelum sebuah perintah dieksekusi
LSP Telematika Indonesia
operasi
255
Tabel 5.10.4 : Koleksi Objek Connection
Koleksi
Errors
Properties
Keterangan
Mengandung semua objek error dari objek Connection
Mengandung semua objek Property dari objek Connection
Objek Command
ADO objek command digunakan untuk mengeksekusi sebuah query basis data.
Query
dapat
melakukan
aksi
seperti
membuat,
menambah,
mengakses,
menghapus dan mengubah record. Jika query digunakan untuk mengakses data,
data akan dikembalikan sebagai objek RecordSet. Hal ini berarti data yang
diakses dapat dimanipulasi dengan properti, koleksi, method dan event dari objek
RecordSet.
Fitur
utama
dari
objek
Comman
adalah
kemampuan
untuk
menggunakan stored query dan prosedur dengan parameter.
ProgID
set objCommand=Server.CreateObject("ADODB.command")
Berikut ini adalah daftar properti, method dan koleksi dari objek Command :
Tabel 5.10.5 : Properti Objek Command
Properti
ActiveConnection
CommandText
CommandTimeout
CommandType
Name
Prepared
State
Keterangan
Mengeset atau mengembalikan definisi dari koneksi apabila
koneksi tertutup atau objek Connection yang berlangsung jika
koneksi terbuka
Mengeset atau mengembalikan provider command
Mengeset atau mengembalikan waktu (dalam detik) untuk
menunggu selama perintah dieksekusi
Mengeset atau mengembalikan tipe dari objek Command
Mengeset atau mengembalikan nama objek Command
Mengeset atau mengembalikan nilai Boolean dimana jika bernilai
true maka command harus menyimpan versi dari query yang
belum dieksekusi
Mengembalikan nilai yang menggambarkan objek Command yang
terbuka, tertutup, mengeksekusi atau mengakses data
Tabel 5.10.6 : Method Objek Command
Method
Cancel
CreateParameter
Execute
Keterangan
Membatalkan eksekusi dari sebuah method
Membuat sebuah objek Parameter
Mengeksekusi query, perintah SQL atau prosedur pada property
CommandText
Tabel 5.10.7 : Koleksi Objek Command
Koleksi
Keterangan
LSP Telematika Indonesia
256
Parameters
Properties
Mengandung semua objek Parameter dari objek Command
Mengandung semua objek Properti dari objek Command
Membuat ADO Tabel Recordset
Setelah koneksi basis data dengan ADO terjadi, maka kita dapat membuat ADO
Recordset. Seandainya kita memiliki basis data yang dinamai “Northwind”, kita
dapat mengakses table “Customer” dalam basis data dengan kode di bawah ini:
<%
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open "c:/webdata/northwind.mdb"
set rs=Server.CreateObject("ADODB.recordset")
rs.Open "Customers", conn
%>
Membuat ADO SQL Recordset
Kita dapat mengakses data dalam table “Customer” dengan menggunakan SQL :
<%
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open "c:/webdata/northwind.mdb"
set rs=Server.CreateObject("ADODB.recordset")
rs.Open "Select * from Customers", conn
%>
Memperoleh Data dari Recordset
Setelah recordset aktif, kita dapat memperoleh dari recordset. Seandainya kita
memiliki basis data “Northwind”, kita dapat mengakses tabel “Customer” pada
basis data ini dengan kode di bawah ini :
<%
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open "c:/webdata/northwind.mdb"
set rs=Server.CreateObject("ADODB.recordset")
rs.Open "Select * from Customers", conn
for each x in rs.fields
response.write(x.name)
response.write(" = ")
response.write(x.value)
next
%>
Kode ASP dengan Perintah SQL
LSP Telematika Indonesia
257
Berikut ini adalah contoh-contoh kode ASP dengan perintah SQL untuk
mengakses data, menambah data, menghapus data dan mengubah data.
1. Mengakses data
Kita akan menampilkan record-record yang memiliki nama perusahaan
(Companyname) diawali huruf ‘A’ dari table Customer :
<html>
<body>
<%
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open "c:/webdata/northwind.mdb"
set rs=Server.CreateObject("ADODB.recordset")
sql="SELECT Companyname, Contactname FROM Customers
WHERE CompanyName LIKE 'A%'"
rs.Open sql, conn
%>
<table border="1" width="100%">
<tr>
<%for each x in rs.Fields
response.write("<th>" & x.name & "</th>")
next%>
</tr>
<%do until rs.EOF%>
<tr>
<%for each x in rs.Fields%>
<td><%Response.Write(x.value)%></td>
<%next
rs.MoveNext%>
</tr>
<%loop
rs.close
conn.close%>
</table>
</body>
</html>
Sedangkan keluaran dari kode di atas adalah :
Companyname
Alfreds Futterkiste
Contactname
Maria Anders
2. Menambah data
Kita akan menambah record baru ke tabel Customer pada basis data
Northwind. Pertama kita membuat sebuah form yang mengandung fieldfield yang nilainya berupa data yang akan disimpan :
<html>
<body>
<form method="post" action="demo_add.asp">
<table>
<tr>
<td>CustomerID:</td>
<td><input name="custid"></td>
LSP Telematika Indonesia
258
</tr><tr>
<td>Company Name:</td>
<td><input name="compname"></td>
</tr><tr>
<td>Contact Name:</td>
<td><input name="contname"></td>
</tr><tr>
<td>Address:</td>
<td><input name="address"></td>
</tr><tr>
<td>City:</td>
<td><input name="city"></td>
</tr><tr>
<td>Postal Code:</td>
<td><input name="postcode"></td>
</tr><tr>
<td>Country:</td>
<td><input name="country"></td>
</tr>
</table>
<br /><br />
<input type="submit" value="Add New">
<input type="reset" value="Cancel">
</form>
</body>
</html>
Ketika user menekan tombol submit, maka form akan terkirim ke file yang
dinamai “demo_add.asp”. File ini mengandung kode untuk menambah
record baru ke tabel Customer :
<html>
<body>
<%
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open "c:/webdata/northwind.mdb"
sql="INSERT INTO customers (customerID,companyname,"
sql=sql & "contactname,address,city,postalcode,country)"
sql=sql & " VALUES "
sql=sql & "('" & Request.Form("custid") & "',"
sql=sql & "'" & Request.Form("compname") & "',"
sql=sql & "'" & Request.Form("contname") & "',"
sql=sql & "'" & Request.Form("address") & "',"
sql=sql & "'" & Request.Form("city") & "',"
sql=sql & "'" & Request.Form("postcode") & "',"
sql=sql & "'" & Request.Form("country") & "')"
on error resume next
conn.Execute sql,recaffected
if err<>0 then
Response.Write("No update permissions!")
else
Response.Write("<h3>" & recaffected & " record added</h3>")
end if
conn.close
%>
</body>
</html>
3. Menghapus data
LSP Telematika Indonesia
259
Kita hendak menghapus sebuah record dari tabel Customer di basis data
Northwind. Pertama, kita membuat tabel yang mendaftarkan semua
record pada tabel Customer :
<html>
<body>
<%
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open "c:/webdata/northwind.mdb"
set rs=Server.CreateObject("ADODB.Recordset")
rs.open "SELECT * FROM customers",conn
%>
<h2>List Database</h2>
<table border="1" width="100%">
<tr>
<%
for each x in rs.Fields
response.write("<th>" & ucase(x.name) & "</th>")
next
%>
</tr>
<% do until rs.EOF %>
<tr>
<form method="post" action="demo_delete.asp">
<%
for each x in rs.Fields
if x.name="customerID" then%>
<td>
<input type="submit" name="customerID" value="<%=x.value%>">
</td>
<%else%>
<td><%Response.Write(x.value)%></td>
<%end if
next
%>
</form>
<%rs.MoveNext%>
</tr>
<%
loop
conn.close
%>
</table>
</body>
</html>
Jika user menekan tombol di kolom “customerID”, maka user akan
terbawa ke file ”demo_delete.asp”. File ini mengandung kode mengenai
cara membuat input fields berdasarkan fields dari record di tabel. Selain
itu file ini juga mengandung tombol ”Delete record” yang akan menghapus
record :
<html>
<body>
<h2>Delete Record</h2>
<%
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
LSP Telematika Indonesia
260
conn.Open "c:/webdata/northwind.mdb"
cid=Request.Form("customerID")
if Request.form("companyname")="" then
set rs=Server.CreateObject("ADODB.Recordset")
rs.open "SELECT * FROM customers WHERE customerID='" & cid &
"'",conn
%>
<form method="post" action="demo_delete.asp">
<table>
<%for each x in rs.Fields%>
<tr>
<td><%=x.name%></td>
<td><input name="<%=x.name%>" value="<%=x.value%>"></td>
<%next%>
</tr>
</table>
<br /><br />
<input type="submit" value="Delete record">
</form>
<%
else
sql="DELETE FROM customers"
sql=sql & " WHERE customerID='" & cid & "'"
on error resume next
conn.Execute sql
if err<>0 then
response.write("No update permissions!")
else
response.write("Record " & cid & " was deleted!")
end if
end if
conn.close
%>
</body>
</html>
4. Mengubah data
Kita akan mengubah record di tabel Customer pada basis data Northwind.
Pertama, kita membuat tabel yang akan mendaftar semua record dari
tabel Customer :
<html>
<body>
<%
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open "c:/webdata/northwind.mdb"
set rs=Server.CreateObject("ADODB.Recordset")
rs.open "SELECT * FROM customers",conn
%>
<h2>List Database</h2>
<table border="1" width="100%">
<tr>
<%
for each x in rs.Fields
response.write("<th>" & ucase(x.name) & "</th>")
next
%>
</tr>
<% do until rs.EOF %>
<tr>
LSP Telematika Indonesia
261
<form method="post" action="demo_update.asp">
<%
for each x in rs.Fields
if lcase(x.name)="customerid" then%>
<td>
<input type="submit" name="customerID" value="<%=x.value%>">
</td>
<%else%>
<td><%Response.Write(x.value)%></td>
<%end if
next
%>
</form>
<%rs.MoveNext%>
</tr>
<%
loop
conn.close
%>
</table>
</body>
</html>
Jika user memilih tombol di kolom “customerID” maka user akan terbawa
ke file yang dinamai “demo_update.asp”. File ini mengandung kode
mengenai cara membuat input fields berdasarkan fields record di tabel
basis data. Selain itu, file ini juga mengandung tombol “Update record”
yang akan menyimpan semua perubahan :
<html>
<body>
<h2>Update Record</h2>
<%
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open "c:/webdata/northwind.mdb"
cid=Request.Form("customerID")
if Request.form("companyname")="" then
set rs=Server.CreateObject("ADODB.Recordset")
rs.open "SELECT * FROM customers WHERE customerID='" & cid &
"'",conn
%>
<form method="post" action="demo_update.asp">
<table>
<%for each x in rs.Fields%>
<tr>
<td><%=x.name%></td>
<td><input name="<%=x.name%>" value="<%=x.value%>"></td>
<%next%>
</tr>
</table>
<br /><br />
<input type="submit" value="Update record">
</form>
<%
else
sql="UPDATE customers SET "
sql=sql & "companyname='" & Request.Form("companyname") & "',"
sql=sql & "contactname='" & Request.Form("contactname") & "',"
sql=sql & "address='" & Request.Form("address") & "',"
LSP Telematika Indonesia
262
sql=sql & "city='" & Request.Form("city") & "',"
sql=sql & "postalcode='" & Request.Form("postalcode") & "',"
sql=sql & "country='" & Request.Form("country") & "'"
sql=sql & " WHERE customerID='" & cid & "'"
on error resume next
conn.Execute sql
if err<>0 then
response.write("No update permissions!")
else
response.write("Record " & cid & " was updated!")
end if
end if
conn.close
%>
</body>
</html>
5.11 Caching, Refresing dan Tunneling
Caching ASP .NET
Salah satu faktor penting untuk mengukur kinerja halaman web adalah
kecepatan. Kuncinya terletak pada pengaturan traffuc pada halaman web. Salah
satu cara untuk meningkatkan output dengan cara caching. Salah satu contoh
dari caching adalah connection pooling.
Caching pada halaman ASP .NET
Caching dapat dilakukan pada halaman ASP .Net dengan 2 cara :
1. Menggunakan perintah @OutputCache di awal halaman ASP .NET
2. Membuat program dengan kelas HttpCachePolicy. Kelas ini dapat diakses
dari properti HttpResponse.Cache
Ketika cara diatas diterapkan pada halaman ASP .NET, halaman response akan
tersimpan di cache ketika method GET yang pertama akan dibuat untuk halaman
tersebut.Sama halnya dengan permintaan GET, POST dan HEAD dari halaman
akan menunjuk ke cache hingga cache berakhir.
Berikut ini adalah konsep penting untuk caching halaman ASP .NET :
1. Menentukan kebijakan Berakhirnya cache
Menggunakan perintah @OutputCache.
Mengikutsertakan perintah ini di awal halaman aspx yang akan di cache.
<%@ OutputCache Duration="60" VaryByParam="None" %>
Durasi adalah waktu hidup cache dalam detik.
Menggunakan kelas Cache di kode halaman aspx.
LSP Telematika Indonesia
263
Response.Cache.SetExpires(DateTime.Now.AddSeconds(60));
Response.Cache.SetCacheability(HttpCacheability.Public);
2. Menentukan Lokasi Cache
Menggunakan perintah @OutputCache
•
Client Cache :
<%@ OutputCache Duration="60" Location="Client" %>
•
Proxy Server Cache :
<%@ OutputCache Duration="60" Location="Downstream" %>
•
Server Cache:
<%@ OutputCache Duration="60" Location="Server" %>
•
Tanpa Cache :
<%@ OutputCache Location="None" %>
Menggunakan kelas Cache :
•
Client Cache
Response.Cache.SetExpires(DateTime.Now.AddSeconds(60));
Response.Cache.SetCacheability(HttpCacheability.Private);
•
Proxy Server Cache
Response.Cache.SetExpires(DateTime.Now.AddSeconds(60));
Response.Cache.SetCacheability(HttpCacheability.Public);
Response.Cache.SetNoServerCaching();
•
Server Caching
Response.Cache.SetExpires(DateTime.Now.AddSeconds(60));
Response.Cache.SetCacheability(HttpCacheability.Server);
•
Tanpa Cache
Use HttpCacheability.NoCache
3. Caching beberapa versi dari halaman
1. Caching berdasarkan query string dan parameter form POST –
menentukan daftar atribut yang dipisahkan dengan simbol (;) di
perintah OutputCache ValueByParams.
<%@ OutputCache Duration="65" VaryByParam="DeptId;EmpId"
%>
Ketika halaman pertama kali diminta, response akan dihasilkan dan
ditambahkan ke cache. Jika halaman akan diminta dalam waktu 65
detik dengan nilai DeptId dan EmpId yang sama maka versi cache
yang akan digunakan.
LSP Telematika Indonesia
264
2. Caching berdasarkan HTTP header yang akan menentikan atribut
ValueByHeader
di
perintah
OutputCache.
<%@ OutputCache Duration="60" VaryByHeader="Referer" %>
Ketika halaman akan diminta untuk pertama kalinya, response
akan dihasilkan dan ditambahkan ke cache. Jika halaman tersebut
diminta dari link yang sama dalam waktu 60 detik maka tiruan
yang ada di cache yang digunakan
3. Caching
berdasarkan
VaryByCuston
fungsi.
dan
Mengikutsertakan
mendefinisikan
HttpApplication.GetVaryByCustomString
di
file
atribut
ulang
Global.asax.
Mengikutsertakan diawal halaman aspx
Mengikutsertakan diawal halaman aspx
<%@ OutputCache Duration="60" VaryByCustom="Frames" %>
Mengikutsertakan di halaman global.aspx :
public override string GetVaryByCustomString(HttpContext context,
string arg)
{
switch (arg)
{
case "Frames":
return "Frames=" + context.Request.Browser.Frames;
case "JavaScript":
return "JavaScript=" +
context.Request.Browser.JavaScript;
default:
return "";
}
}
Refresh ASP .NET
Definisi : memaksa sebuah halaman postback atau redirect dari browser client
tanpa input user yang eksplisit. Hal ini dilakukan dengan alasan :
•
Auto-redirecting ke URL baru setelah masa waktu tertentu
•
Merefresh informasi di halaman secara periodik
LSP Telematika Indonesia
265
•
Memelihara keadaan session yang valid secara terus menerus
•
Memaksa proses tertentu untuk berjalan di server ketika session client
telah berakhir
Method Response.AppendHeader
ASP .NET menyediakan method AppendHeader untuk objek Response. Umumnya,
waktu
untuk
merefresh
dapat
diatur
dengan
cara
seperti
dibawah
ini,
menggunakan (C#) :
this.Response.AppendHeader("Refresh",
Convert.ToString(Session.Timeout * 60 + 5));
halaman diset untuk merefresh 5 detik setelah session client berakhir.
Client Pull
Client pull adalah cara yang ideal untuk menangani situasi dimana user masih
online dengan browser menampilkan halaman terakhir, tetapi dengan alasan
tertentu halaman tersebut gagal merespon. Kita dapat menentukan tenggat
waktu berakhirnya sebauh halaman dengan menggunakan tag META.
Jika kita menuliskan di HTMl maka kita harus menyisipkan baris di bawah ini,
diantara tag <HEAD> dan </HEAD> :
<META HTTP-EQUIV="Refresh" CONTENT="300;URL=MainMenu.asp">
Tag META di atas berarti waktu halaman berakhir 300 detik dan setelah itu akan
ditampilkan MainMenu.asp. Selain itu, kita dapat menggunakan kode dibawah ini
untuk mengisi URL :
URL=Quit.asp&GoToPage=default.htm
Soal Latihan
1. Bahasa pemrograma apa yang harus diketahui dalam teknologi .NET :
a. PHP
b. HTML
LSP Telematika Indonesia
266
c. Java
d. VBScript
2. File ekstensi untuk memebuat user control :
a. aspx
b. ascx
c. apsx
d. acsx
3. Objek yang digunakan untuk melakukan koneksi dengan data source :
a. Connection
b. Cookies
c. Prompt
d. Form
Soal Praktek
4. Buatlah sebuah file ASP yang akan mengeluarkan output seperti dibawah ini
dengan response object :
5. Tulis kode program untuk menambahkan cookies pada aplikasi web Anda
dengan nama method myCookie.
LSP Telematika Indonesia
267
BAB 6 Javascript
Tujuan Instruksional Umum :
1. Siswa dapat menggunakan Javascript pada aplikasi web
2. Siswa dapat menggabungkan javascript dengan HTML
Tujuan Instruksional khusus :
1. Siswa dapat membuat kode javascript untuk validasi
2. Siswa dapat menyisipkan javascript dalam HTML untuk aplikasi web
Materi yang dibahas dalam bab ini memenuhi :
1. TIK.PR04.006.01 Menerapkan dasar validasi unjuk kerja situs web
Berikut ini adalah gambaran umum dari materi yang ada di bab ini :
6.1 Pemrograman Javascript
LSP Telematika Indonesia
268
Javascript menyediakan beberapa fungsi untuk memudahkan membuat web yang
dinamis, yaitu web yang dapat memberikan respon terhadap apa yang pengguna
lakukan. Sebelum mempelajari Javascript, diharapkan pembaca telah mengenal
HTML. Bab ini berisi pengajaran mengenai penggunaan dasar Javascript di dalam
suatu web.
6.1.1 Javascript dan HTML
Hypertext Markup Language (HTML) adalah bahasa dalam bentuk teks yang
banyak digunakan dalam world wide web. Ketika kita membuat dokumen dengan
program pengolahan word, seperti Microsoft Word, program itu mengunakan
markup language untuk menunjukkan struktur dan format dari dokumen
elekronis.
HTML
merupakan
markup
language
yang
digunakan
untuk
memberitahu web browser bagaimana membuat struktur dan menampilkan
halaman web. [POW01]
HTML mempunyai sintaks yang ditentukan, semua dokumen HTML harus
mengikuti struktur resmi. HTML berupa berkas teks berisi informasi yang ingin
ditampilkan dan juga kumpulan instruksi, yang disebut elemen, yang menyatakan
bagaimana web browser menampilkan informasi.
Javascript
adalah
bahasa
pemrograman
sederhana
yang
didesain
untuk
menambah interaksi dalam halaman HTML dengan berorientasi objek. Javascript
berupa beberapa baris computer code yang dapat dijalankan dan biasanya
ditambahkan langsung dalam HTML. Javascript merupakan
bahasa yang
berdasarkan pada Object Oriented Programming (OOP). Dengan menggunakan
bahasa OOP, kita dapat membuat objek-objek tersendiri dan tipe variabel sendiri.
Microsoft mengeluarkan Javascript dengan nama Jscript.
6.1.2
Disini
Variabel dan Tipe Data
akan
dikenalkan
dua
konsep
yang
paling
penting
dalam
bahasa
pemrograman, yaitu variabel dan tipe data. Variabel adalah tempat untuk
menyimpan informasi, dan biasanya dinyatakan dalam bentuk nama. Variabel
dapat membantu dalam menyimpan dan memanipulasi data di program.
Tipe data adalah tipe atau jenis data yang dapat dimanipulasi program. Numeric
(angka), string, boolean, fungsi, obyek, dan array merupakan contoh dari tipe
data yang dapat digunakan dalam Javascript.
LSP Telematika Indonesia
269
6.1.3
Penggunaan Variabel dan Literals
Literal (atau constant) dalam Javascript adalah nilai data yang ditampilkan
langsung dalam program dan tidak berubah. Beberapa contoh dari literal antara
lain angka, string, boolean true atau false, dan nilai spesial null [FLA97]. Berikut
merupakan beberapa contoh literal:
•
Boolean: true, false
•
Numeric: 5, 0xFF (hexadecimal), 2.543, 8e12, -4.1E-6
•
String: 'fred', "Fred and Ethel"
•
Primitive: Infinity, NaN, null, undefined
Literal digunakan sebagai inisialisasi objek. Format untuk menggunakan literal
adalah:
objectName={property:value}
Penamaan suatu variabel diperlukan untuk melihat nilai dari variabel atau
mengubah nilai dari variabel tersebut. Nama variabel case-sensitive dan harus
diawali dengan huruf, tanda garis bawah (underscore mark), atau tanda dollar.
Berikut ini contoh penggunaan variabel dalam Javascript, dengan nilai 2
dinyatakan dalam variabel i:
i = 2;
Dan berikut ini penambahan 3 dengan i dan hasilnya dinyatakan dalam variabel
baru bernama sum:
sum = i + 3;
Walaupun tidak terlalu penting digunakan, akan tetapi gaya pemrograman yang
baik mendeklarasikan variabel sebelum digunakan. Contoh pendeklarasian
variabel adalah sebagai berikut:
var i;
var sum;
atau
var i, sum;
LSP Telematika Indonesia
270
Pendeklarasian variabel dapat digabungkan dengan pendefinisian awal nilai,
contohnya:
var i = 2;
Pertama kali menggunakan variabel yang belum dideklarasikan, variabel tersebut
akan
dideklarasikan
secara
otomatis.
Pendeklarasian
variabel
dengan
menggunakan var biasanya dibutuhkan untuk mendeklarasikan variabel lokal di
dalam fungsi dan nama variabel itu juga digunakansebagai variabel global di luar
fungsi. Jika variabel tidak dideklarasikan di dalam fungsi, maka Javascript
menganggap variabel tersebut sebagai variabel global yang dideklarasikan di luar
fungsi dan tidak mendeklarasikan satu variabel lokal di dalam variabel secara
otomatis.
Perbedaan variabel dalam Javascript dan bahasa lain, seperti Java dan C, yaitu
variabel dalam Javascript untype (tidak bertipe). Artinya, variabel dalam
Javascript dapat menyimpan tipe data yang berbeda, tidak seperti variabel Java
dan C yang hanya dapat menyimpan satu tipe data [POW01]. Contohnya,
diperbolehkan
untuk
menyimpan
angka
ke
satu
variabel
dan
kemudian
menyimpan string ke variabel itu:
i = 10;
i = "ten";
6.1.4
Operators
Operators adalah aksi atau operasi yang memanipulasi, menggabungkan, atau
membandingkan variabel. Berikut merupakan beberapa kategori dari operator
[FLA97]:
a. Arithmetic Operators
Arithmetic operators mengambil nilai berupa angka (baik literal atau
variabel) sebagai operan dan mengembalikan hasil berupa angka.
Contoh arithmetic operators yang terdapat di Javascript dapat dilihat
pada tabel berikut:
Tabel 6.1.4.1 : Arithmetic Operators
Operator
+
Deskripsi
Penambahan (addition)
LSP Telematika Indonesia
Contoh
x=2
y=2
x+y
Hasil
4
271
-
Pengurangan (subtraction)
x=5
y=2
x-y
3
*
Perkalian (multiplication)
x=5
y=4
x*y
20
/
Pembagian (division)
15/5
5/2
3
2.5
%
Pembagian sisa/ Modulus
(division remainder)
5%2
10%8
10%2
1
2
0
++
Increment
x=5
x++
x=6
--
Decrement
x=5
x--
x=4
b. Assignment Operators
Assignment operators menentukan nilai dari operan kiri sesuai
dengan operan kanan. Assignment operators yang dasar adalah
persamaan (=), yaitu menentukan nilai dari operan kanan seperti
operan kiri. Jika x=y maka nilai y dinyatakan sama dengan x.
Assignment operators yang lain kurang lebih sama seperti operasi
biasa, ditunjukkan dalam tabel berikut:
Tabel 6.1.4.2 : Assignment Operators
Operator
Contoh
Sama Dengan
=
x=y
x=y
+=
x+=y
x=x+y
-=
x-=y
x=x-y
*=
x*=y
x=x*y
/=
x/=y
x=x/y
%=
x%=y
x=x%y
c. Comparison Operators
Comparison operators membandingkan operannya dan menghasilkan
nilai logika (berupa boolean) berdasarkan apakah perbandingan itu
benar atau tidak. Operannya bisa berupa angka atau string. String
dibandingkan berdasarkan pengurutan standar penyusunan kamus
(lexicography), menggunakan nilai Unicode.
Tabel 6.1.4.3 : Comparison Operators
Operator
Deskripsi
Contoh
==
is equal to
5==8 returns false
LSP Telematika Indonesia
272
===
is equal to (checks for both
value and type)
x=5
y="5"
x==y returns true
x===y returns false
!=
is not equal
5!=8 returns true
>
is greater than
5>8 returns false
<
is less than
5<8 returns true
>=
is greater than or equal to
5>=8 returns false
<=
is less than or equal to
5<=8 returns true
d. Logical Operators
Logical operators biasanya digunakan untuk nilai Boolean, seperti
ditampilkan dalam tabel berikut:
Tabel 6.1.4.4 : Logical Operators
Operator
Deskripsi
Contoh
&&
and
x=6
y=3
(x < 10 && y > 1) returns true
||
or
x=6
y=3
(x==5 || y==5) returns false
!
not
x=6
y=3
!(x==y) returns true
e. String Operators
Sebagai
digunakan
tambahan
untuk
untuk
nilai
comparison
string,
operators,
concatenation
yang
operator
dapat
(+)
menggabungkan dua string, menghasilkan string lain yang berasal
dari penggabungan dua operan string.
Tabel 6.1.4.5 : String Operators
Operator
+
f.
Deskripsi
Penambahan string
(menggabungkan dua strings)
Contoh
Hasil
a=”2”
b=”2”
a+b=“22”
Conditional Operator
Javascript menyediakan conditional operator yang menyatakan nilai
variable
berdasarkan
LSP Telematika Indonesia
kondisi
tertentu.
Conditional
operator
273
merupakan satu-satunya operator di Javascript yang memerlukan 3
operan. Operan ini biasanya digunakan sebagai shortcut untuk
pernyataan if.
Syntax : condition ? expr1 : expr2;
Dimana:
-
condition: ekspresi yang mengevaluasi true atau false
-
expr1, expr2 : ekspresi dengan nilai dari segala tipe
Operan pertama dari conditional operator berupa nilai boolean,
biasanya berupa hasil dari perbandingan. Operan kedua dan ketiga
dapat mempunyai nilai lain. Nilai dihasilkan dari conditional operator
tergantung pada nilai Boolean dari operan pertama. Jika operan
pertama true, maka nilai dari perhitungan conditional adalah nilai
yang didapat dari operan kedua. Jika operan kedua false, maka
hasilnya adalah nilai dari operan ketiga. Contoh untuk conditional
operator :
greeting = "hello " + ((name != null) ? name : "there");
Contoh diatas jika dinyatakan dalam pernyataan if, artinya sama
seperti berikut ini:
greeting = "hello ";
if (name != null)
greeting += name;
else
greeting += "there";
g. Bitwise Operator
Bitwise operator memperlakukan operannya sebagai 32 bits (zero dan
satu), daripada menggunakan desimal, heksadesimal, atau angka
oktal. Sebagai contoh, angka desimal 9 mempunyai representasi
binary sebagai 1001. Bitwise operator melakukan operasinya dengan
menggunakan representasi binary, tapi menghasilkan angka standar
untuk Javascript. Tabel berikut ini merangkum bitwise operator dalam
Javascript:
Tabel 6.1.4.6 : Bitwise Operators
Operator
Bitwise AND
LSP Telematika Indonesia
Penggunaan Deskripsi
a&b
Returns a one in each bit position for
274
which the corresponding bits of both
operands are ones.
Bitwise OR
a|b
Returns a one in each bit position for
which the corresponding bits of
either or both operands are ones.
Bitwise XOR
a^b
Returns a one in each bit position for
which the corresponding bits of
either but not both operands are
ones.
Bitwise NOT
~a
Inverts the bits of its operand.
Left shift
a << b
Shifts a in binary representation b
bits to left, shifting in zeros from the
right.
Signpropagating
right shift
a >> b
Shifts a in binary representation b
bits to right, discarding bits shifted
off.
Zero-fill right
shift
a >>> b
Shifts a in binary representation b
bits to the right, discarding bits
shifted off, and shifting in zeros from
the left.
Setelah mengetahui beberapa jenis operator yang terdapat di Javascript,
operator
tersebut
perlu
digunakan
dalam
suatu
HTML.
Contoh
penggunaan operator dengan variable di HTML dapat dilihat sebagai
berikut:
<script type="text/javascript">
<!-var two = 2
var ten = 10
var linebreak = "<br />"
document.write("two plus ten = ")
result = two + ten
document.write(result)
document.write(linebreak)
document.write("ten * ten = ")
result = ten * ten
document.write(result)
document.write(linebreak)
document.write("ten / two = ")
result = ten / two
document.write(result)
//-->
</script>
</body>
Hasil keluarannya:
LSP Telematika Indonesia
275
two plus ten = 12
ten * ten = 100
ten / two = 5
two plus ten = 12
ten * ten = 100
ten / two = 5
6.2
Dates dan Math
6.2.1. Objek Date
Javascript telah menyediakan class dari objek yang menyatakan tanggal
dan waktu, dan dapat digunakan untuk memanipulasi objek ini. Objek
disini merupakan tempat menyimpan sesuatu. Objek Date digunakan
untuk mengerjakan hal-hal yang berhubungan dengan tanggal dan waktu.
Objek date mendukung beberapa metode UTC (universal), seperti halnya
waktu lokal. UTC juga dikenal dengan waktu Greenwich Mean Time (GMT)
yang dipakai sebagai waktu standar dunia. Sedangkan, waktu lokal adalah
waktu yang tertera di komputer tempat javascript dijalankan.
Tanggal pada Javascript dihitung dengan menggunakan tamilliseconds
sejak 1 Januari 1970 tengah malam GMT. Tanggal 1 Januari 1970, sering
disebut juga dengan epoch, merupakan tanggal dari semua waktu Unix
dimulai. Satu hari sama dengan 86,400,000 milidetik. Objek date berkisar
antara -100,000,000 hari hingga 100,000,000 hari relatif terhadap 1
Januari 1970 GMT.
Untuk kesesuaian dengan perhitungan waktu millenium (melewati tahun
2000), maka sebaiknya tahun disebutkan secara spesifik, misalnya
gunakan 1998, bukan 98. Untuk membantu pengguna dalam menyatakan
tahun secara lengkap, Javascript menyediakan metode sendiri, seperti
getFullYear, setFullYear, getFullUTCYear, and setFullUTCYear.
Contoh berikut menghasilkan nilai waktu antara timeA dan timeB dalam
milidetik:
timeA = new Date();
// Pernyataan disini untuk melakukan suatu aksi
timeB = new Date();
timeDifference = timeB - timeA;
LSP Telematika Indonesia
276
Berikut ini ditampilkan daftar beberapa metode yang disediakan oleh
Javascript:
Tabel 6.2.1 : Daftar Metode Objek Date
Method
Deskripsi
Date()
Mengembalikan nilai tanggal dan waktu hari ini
getDate()
Mengembalikan nilai tanggal dalam satu bulan dari
objek date (dari 1-31)
getDay()
Mengembalikan nilai hari dalam satu minggu dari
objek date (dari 0-6)
getMonth()
Mengembalikan nilai bulan dari objek date (dari 0-11)
getFullYear()
Mengembalikan nilai tahun dari objek date, dalam
angka 4-digit
getYear()
Mengembalikan nilai tahun dari objek date, dalam
angka 4-digit atau 2-digit. Sebaiknya gunakan
getFullYear()
getHours()
Mengembalikan nilai jam dari objek date (dari 0-23)
getMinutes()
Mengembalikan nilai menit dari objek date (dari 059)
getSeconds()
Mengembalikan nilai detik dari objek date (dari 0-59)
getMilliseconds()
Mengembalikan nilai milidetik dari objek date (dari 0999)
getTime()
Mengembalikan jumlah milidetik sejak 1 Januari 1970
tengah malam
getTimezoneOffset()
Mengembalikan nilai berupa perbedaan waktu dalam
menit antara waktu lokal dengan waktu GMT
getUTCDate()
Mengembalikan tanggal dari objek date berdasarkan
waktu universal (dari 1-31)
getUTCDay()
Mengembalikan nilai hari dalam satu minggu dari
objek date menurut waktu universal (dari 0-6)
getUTCMonth()
Mengembalikan nilai bulan dari objek date dalam satu
minggu menurut waktu universal (dari 0-11)
getUTCFullYear()
Mengembalikan angka tahun dalam 4-digit dari objek
date menurut waktu universal
getUTCHours()
Mengembalikan nilai jam dari objek date berdasarkan
waktu universal (dari 0-23)
getUTCMinutes()
Mengembalikan nilai menit dari objek date
berdasarkan waktu universal (0-59)
getUTCSeconds()
Mengembalikan nilai detik dari objek date
berdasarkan waktu universal (dari 0-59)
getUTCMilliseconds() Mengembalikan nilai dalam miliseconds dari objek
date berdasarkan waktu universal (dari 0-999)
parse()
Mengambil tanggal dalam string dan mengembalikan
angka dalam milisecond dihitung sejak 1 Januari
1970 tengah malam
setDate()
Menetapkan tanggal dari bulan dalam objek date
(dari 1-31)
setMonth()
Menetapkan bulan dari objek date (dari 0-11)
setFullYear()
Menetapkan tahun pada objek date (4-digit)
setYear()
Menetapkan tahun pada objek date (2 atau 4 digit).
LSP Telematika Indonesia
277
Sebaiknya gunakan setFullYear() saja
setHours()
Menetapkan nilai jam pada objek date (dari 0-23)
setMinutes()
Menetapkan nilai menit pada objek date (dari 0-59)
setSeconds()
Menetapkan nilai detik pada objek date (dari 0-59)
setMilliseconds()
Menetapkan nilai milidetik pada objek date (dari 0999)
setTime()
Menghitung tanggal dan waktu dengan
menambahkan atau mengurangi banyak milidetik
tertentu pada/ dari 1 Januari 1970 tengah malam
setUTCDate()
Menetapkan bulan dari objek date berdasarkan waktu
universal (dari 1-31)
setUTCMonth()
Menetapkan bulan dari objek date berdasarkan waktu
universal (dari 0-11)
setUTCFullYear()
Menetapkan nilai tahun pada objek date berdasarkan
waktu universal (4-digit)
setUTCHours()
Menetapkan angka jam dari objek date berdasarkan
waktu universal (dari 0-23)
setUTCMinutes()
Menetapkan angka menit pada objek date berdasarka
waktu universal (dari 0-59)
setUTCSeconds()
Menetapkan angka detik dari objek date berdasarkan
waktu universal (dari 0-59)
setUTCMilliseconds() Menetapkan nilai milidetik dari objek date
berdasarkan waktu universal (dari 0-999)
toSource()
Menyatakan source code dari sebuah objek
toString()
Mengubah objek date menjadi string
toGMTString()
Mengubah objek date, berdasarkan waktu GMT,
menjadi string. Sebaiknya gunakan toUTCString()
saja
toUTCString()
Mengubah objek date, berdasarkan waktu universal,
menjadi string
toLocaleString()
Mengubah objek date, berdasarkan waktu lokal,
menjadi string
UTC()
Mengambil tanggal dan mengembalikan nilai milidetik
sejak 1 Januari 1970 tengah malam berdasarkan
waktu universal
valueOf()
Mengembalikan nilai primitif dari objek date
Selain metode, objek date juga mempunyai properti seperti berikut ini:
Tabel 6.2.2 : Properti Objek Date
Property
Deskripsi
Constructor
Referensi untuk fungsi yang menciptakan objek
Prototype
Memperbolehkan untuk menambah properti dan metode
ke dalam objek
LSP Telematika Indonesia
278
6.2.2 Penggunaan dan Manipulasi Dates
Pertama, objek Date didefinisikan dengan kata kunci baru. Contohnya
sebuah objek Date bernama myDate didefinisikan seperti berikut:
var myDate=new Date()
Lalu,
kita
dapat
memanipulasi
waktu
dengan
mudah
dengan
menggunakan metode-metode yang tersedia untuk objek date. Contoh
berikut menunjukkan objek date yang dinyatakan dalam tanggal tertentu
(14 Januari 2010):
var myDate=new Date()
myDate.setFullYear(2010,0,14)
Contoh berikut menunjukkan objek date yang dinyatakan untuk 5 hari ke
depan:
var myDate=new Date()
myDate.setDate(myDate.getDate()+5)
Catatan: Untuk penambahan 5 hari mengganti bulan atau tahun, maka
perubahan ditangani secara otomatis oleh objek date sendiri.
Objek date juga dapat untuk membandingkan dua tanggal. Contoh
berikut ini menunjukkan perbandingan tanggal hari ini dengan 14 Januari
2010:
var myDate=new Date()
myDate.setFullYear(2010,0,14)
var today = new Date()
if (myDate>today)
alert("Today is before 14th January 2010")
else
alert("Today is after 14th January 2010")
Jika tidak ada argumen, constructor membuat objek date untuk tanggal
dan waktu hari ini berdasarkan waktu local. Jika terdapat beberapa
argumen tapi terdapat argumen yang hilang, maka argumen yang hilang
akan dinyatakan 0. Argumen yang harus ada setidaknya tahun, bulan,
dan tanggal. Jam, menit, detik, dan milidetik dapat dihilangkan.
LSP Telematika Indonesia
279
Contoh penggunaan objek date dalam HTML
a.
Program berikut menampilkan bulan, tanggal, dan tahun pada hari
ini.
<h4>It is now <script type="text/javascript">
<!-var currentTime = new Date()
var month = currentTime.getMonth() + 1
var day = currentTime.getDate()
var year = currentTime.getFullYear()
document.write(month + "/" + day + "/" + year)
//-->
</script>
</h4>
Program diatas akan menampilkan tanggal waktu program
dieksekusi, seperti:
It is now 3/21/2006!
b.
Program
berikut
menampilkan
waktu
setiap
detik,
mengubah
informasi menjadi string yang dapat dibaca dan menampilkan string
pada textbox.
<HTML>
<HEAD>
<TITLE>JavaScript Clock</TITLE>
<script Language="JavaScript">
<!- Hide me from other browsers
// Netscapes Clock - Start
// this code was taken from Netscapes JavaScript documentation at
// www.netscape.com on Jan.25.96
var timerID = null;
var timerRunning = false;
function stopclock (){
if(timerRunning)
clearTimeout(timerID);
timerRunning = false;
}
function startclock () {
// Make sure the clock is stopped
stopclock();
showtime();
}
function showtime () {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds()
var timeValue = "" + ((hours >12) ? hours -12 :hours)
LSP Telematika Indonesia
280
timeValue += ((minutes < 10) ? ":0" : ":") + minutes
timeValue += ((seconds < 10) ? ":0" : ":") + seconds
timeValue += (hours >= 12) ? " P.M." : " A.M."
document.clock.face.value = timeValue;
// you could replace the above with this
// and have a clock on the status bar:
// window.status = timeValue;
timerID = setTimeout("showtime()",1000);
timerRunning = true;
}
// Netscapes Clock - Stop ->
</script>
</HEAD>
<BODY bgcolor="#ffffff" text="#000000" link="#0000ff"
alink="#008000" vlink="800080" onLoad="startclock()">
<form name="clock" onSubmit="0">
<div align=right>
<input type="text" name="face" size=12 value="">
</div>
</form>
</BODY>
</HTML>
Program tersebut menampilkan hasil sebagai berikut:
Gambar 6.1.5.1 Jam Dengan Javascript
Inti
dari
program
diatas
adalah
fungsi
showtime().
Fungsi
ini
menciptakan sebuah objek Date yang dipanggil dan mengambil nilai
(melalui getHours, getMinutes, dan getSeconds) jam, menit, dan detik.
Lalu fungsi ini menciptakan sebuah variabel bernama timeValue dan
menyatakan nilai jam dalam string. timeValue diinterpretasikan oleh
Javascript
sebagai
string
walaupun
jam
berupa
angka.
Hal
ini
dikarenakan nilai pertama yang dinyatakan dalam timeValue merupakan
tanda kutip kosong (“”). Perhatikan bahwa jika nilai jam lebih besar dari
12, nilai jam itu dikurangi dengan 12 menjadi notasi waktu 12-jam.
Perhatikan juga bahwa jika nilai pada detik atau menit kurang dari 10,
fungsi akan menambahkan nilai “0” di awal nilai tersebut untuk menjaga
digit angka tetap sama, dan menghindari kebingungan antara 03 dan
30. Script ini berjalan pada fungsi showtime() setiap 1000 milidetik (tiap
detik) untuk menampilkan waktu saat ini dalam format yang mudah
diinterpretasi oleh pengguna.
LSP Telematika Indonesia
281
6.2.3. Objek Math
Objek Math dapat dilihat sebagai pustaka fungsi yang diatur seperti objek
dan digunakan untuk menyimpan metode yang melakukan beberapa
fungsi matematis. Hampir semua metode Math berupa kelas dan
mengembalikan suatu nilai.
Objek Math dalam Javascript melakukan perhitungan tertentu dengan
menggunakan
fungsi
dari
objek
Math.
Selain
itu,
objek
Math
menyediakan beberapa konstanta, seperti pi.
Semua properti dan metode dari Math statik. Konstanta PI ditunjuk
sebagai
Math.PI
merupakan
dan
argumen
fungsi
dari
sinus
metode.
sebagai
Math.sin(x),
Konstanta
dimana
didefinisikan
x
dengan
ketepatan penuh (full precision) dari bilangan real pada Javascript.
6.2.4. Penggunaan Math dengan Javascript
Objek Math tidak perlu didefinisikan terlebih dahulu sebelum digunakan.
Salah satu cara termudah dalam mendapatkan suatu nilai adalah dengan
mendefinisikan sebuah variabel dan menempatkan nilainya sebagai
properti atau fungsi dari objek Math.
Pernyataan with terkadang digunakan ketika sebuah bagian dari code
menggunakan beberapa konstanta dan metode Math, sehingga tidak perlu
mengetik Math berulang kali. Contohnya:
with (Math) {
a = PI * r*r
y = r*sin(theta)
x = r*cos(theta)
}
Javascript juga menyediakan beberapa metode yang dapat digunakan
untuk penghitungan matematis. Berikut metode yang tersedia pada
Javascript untuk objek Math:
Tabel 6.2.4.1 : Metode Objek Math
Method
abs(x)
acos(x)
asin(x)
Deskripsi
Mengembalikan nilai absolut dari suatu bilangan
Mengembalikan arckosinus dari suatu bilangan
Mengembalikan arcsinus dari suatu bilangan
LSP Telematika Indonesia
282
atan(x)
atan2(y,x)
ceil(x)
cos(x)
exp(x)
floor(x)
log(x)
max(x,y)
min(x,y)
pow(x,y)
random()
round(x)
sin(x)
sqrt(x)
tan(x)
toSource()
valueOf()
Mengembalikan arctangen dari x sebagai nilai bilangan
antara -PI/2 dan PI/2 radian
Mengembalikan sudut theta dari titik (x, y) sebagai nilai
bilangan antara –PI dan PI radian
Mengembalikan nilai dari suatu bilangan yang
dibulatkan ke atas menuju nilai integer terdekat
Mengembalikan cosinus dari bilangan tertentu
Mengembalikan nilai dari Ex
Mengembalikan nilai dari suatu bilangan yang
dibulatkan ke bawah menuju nilai integer terdekat
Mengembalikan logaritma natural (basis E) sebagai
suatu bilangan
Mengembalikan suatu angka dengan mengambil nilai
terbesar antara x dan y
Mengembalikan suatu angka dengan mengambil nilai
terkecil antara x dan y
Mengembalikan nilai dari x pangkat y (xy)
Mengembalikan angka acak antara 0 dan 1
Returns a random number between 0 and 1
Membulatkan angka menuju integer terdekat
Rounds a number to the nearest integer
Mengembalikan sinus dari suatu bilangan
Returns the sine of a number
Mengembalikan akar dari suatu bilangan
Returns the square root of a number
Mengembalikan nilai tangen dari suatu sudut
Returns the tangent of an angle
Menyatakan sebagai source code dari suatu objek
Represents the source code of an object
Mengembalikan nilai primitif dari objek Math
Beberapa properti dari objek Math dapat dilihat dalam tabel berikut.
Tabel 6.2.4.2 : Properti Objek Math
Property
constructor
E
LN2
LN10
LOG2E
LOG10E
PI
prototype
SQRT1_2
SQRT2
Deskripsi
Referensi untuk fungsi yang menciptakan objek
Mengembalikan konstanta Euler (kurang lebih 2.718)
Mengembalikan logaritma natural dari 2 (kurang lebih
0.693)
Mengembalikan logaritma natural dari 10 (kurang lebih
2.302)
Mengembalikan logaritma basis 2 dari E (kurang lebih
1.442)
Mengembalikan logaritma basis 10 dari E (kurang lebih
0.434)
Mengembalikan PI (kurang lebih 3.14159)
Memperbolehkan untuk menambah properti dan
metode ke dalam objek
Mengembalikan akar dari 1/2 (kurang lebih 0.707)
Mengembalikan akar dari 2 (kurang lebih 1.414)
LSP Telematika Indonesia
283
Contoh penggunaan objek Math
a. Contoh berikut menggunakan metode round() dari objek Math untuk
membulatkan suatu bilangan menuju integer terdekat:
document.write(Math.round(4.7))
Code diatas akan menampilkan hasil seperti berikut:
5
b. Operator juga dapat digunakan sebagai parameter pada objek Math.
Contohnya dapat dilihat sebagai berikut:
var original;
// membulatkan variabel original menjadi dua desimal
var result=Math.round(original*100)/100 //menghasilkan 28.45
6.3. Objek Window
6.3.1 Pengenalan
Browser Object Model (BOM) menunjukkan deskripsi dari struktur untuk
objek-objek yang berbasis browser/ web.
LSP Telematika Indonesia
284
Gambar 6.3.1 : Browser Object Model (BOM)
Seperti yang telah dijelaskan sebelumnya, bahwa objek adalah tempat
untuk menyimpan, maka objek Window juga menyimpan objek lain. Pada
gambar terlihat bahwa objek Window terletak pada tingkat paling atas
dari BOM. Objek Window meliputi seluruh window browser, termasuk
dokumen yang ditampilkan dalam window. Anggaplah objek Window
sebagai kotak mainan dan objek-objek lain dalam hierarki BOM adalah
mainan. Objek Dokumen, selain berlaku sebagai mainan, juga berlaku
sebagai kotak mainan yang lebih kecil dari objek Window. Objek
Dokumen menampung objek lain yang juga masih ditampung dalam
objek Window.
Javascript memungkinkan untuk menulis code yang bekerja di antara
windows. Oleh karena windows tidak dapat dihubungkan dengan code
HTML (tidak terdapat HTML tag untuk membuka window lain), maka
dibutuhkan Javascript untuk menghubungkan antar windows. Cara
window
dapat
berhubungan
dengan
Javasript
adalah
dengan
menggunakan code Javascript dalam satu window untuk membuka
window lain. Window yang dibuka oleh window lain dapat digunakan
untuk membuat hierarki hubungan parent-child yang dapat menjalankan
code di window yang berbeda. [ACA03].
Objek Window juga mempunyai beberapa properti, metode, dan event
handler.
a. Properti
Properti merupakan suatu komponen atau bagian dari suatu objek.
Jika mobil dianggap sebagai objek, maka properti dari mobil itu
seperti radio atau ban. Properti seperti penampung data, hampir
sama seperti variabel. Selain menjadi bagian dari objek, properti juga
memberikan informasi mengenai objek. Perbedaan utama dengan
variabel antara lain bahwa properti memberi informasi mengenai
objek Window sedangkan variabel tidak memberi informasi mengenai
objek Window. Sebuah objek menyimpan properti yang dapat diakses
dari luar untuk digunakan dari keseluruhan script.
Beberapa properti dari objek Window yang biasa digunakan dapat
dilihat dalam tabel berikut:
LSP Telematika Indonesia
285
Tabel 6.3.1 : Properties dari objek Window
Properties
Deskripsi
closed
Memeriksa
apakah
window
yang
dibuka
sebelumnya telah ditutup.
Mempunyai nilai Boolean, akan mengembalikan
true jika window telah ditutup dan jika sebaliknya
mengembalikan nilai false
Menetapkan pesan untuk ditampilkan di status bar
ketika tidak ada yang ditampilkan, seperti pesan
selamat datang atau instruksi untuk pengunjung
Menyimpan array dari semua frame pada window
saat itu
Menyimpan informasi dari URL yang dikunjungi oleh
client dalam satu window
Menentukan dimensi secara vertikal dari area isi
window, dalam pixel
Menentukan dimensi secara horisontal dari area isi
window, dalam pixel
Banyak frame dalam satu window (dalam Integer)
Menampung informasi dari URL saat itu (dalam
Object)
Menyatakan location bar dari browser suatu window
Menyatakan menu bar dari browser suatu window
Menyimpan nama dari window
Digunakan dalam pop up window. Jika window
dibuka oleh pengguna, maka akan mengembalikan
nilai null (maksudnya window tidak dibuka oleh
suatu script)
Menentukan dimensi secara vertical dari batas luar
window, dalam pixel
Menentukan dimensi secara horisontal dari batas
luar window, dalam pixel
Digunakan dalam frame, menunjuk pada frameset
dari suatu window atau frame yang mengandung
frame saat ini.
Menyatakan personal bar (disebut juga directories
bar) dari browser suatu window
Menyatakan scroll bars dari browser suatu window
Objek window saat ini
Menyimpan nilai dari teks pada status bar dari
browser window
Menyatakan status bar dari browser suatu window
Menyatakan tool bar dari browser suatu window
Digunakan dengan frame. Menunjuk pada window
yang paling atas pada frameset
Objek window saat ini (sinonim dari properti self)
defaultStatus
frames[]
history
innerHeight
innerWidth
length
location
locationbar
menubar
name
opener
outerHeight
outerWidth
parent
personalbar
scrollbars
self
status
statusbar
toolbar
top
window
6.3.2 Metode
Metode adalah sebuah fungsi yang berhubungan dengan sebuah
objek. Metode memberikan perintah kepada objek, seperti dapat
LSP Telematika Indonesia
286
menyebabkan sebuah browser window membuka atau memilih teks.
Jika parameter diberikan pada metode, seperti fungsi, parameter
ditulis di dalam tanda kurung. Akan tetapi, tidak seperti fungsi,
metode berlakuk seperti objek Window.
Metode yang tersedia untuk objek Window dapat dilihat sebagai
berikut:
Tabel 6.3.2.1 : Methods dari objek Window
Methods
alert()
back()
blur()
captureEvents()
close()
confirm()
find()
focus()
forward()
handleEvent()
home()
moveBy()
moveTo()
open()
print()
prompt()
releaseEvents()
resizeBy()
LSP Telematika Indonesia
Deskripsi
Membuka popup window yang menampilkan
pesan kepada pengunjung
Mengulangi (undo) langkah terakhir pada frame
apapun dalam window tingkat atas
Memindahkan window ke background, di
belakang window utama
Menentukan window atau dokumen untuk
menangkap semua events pada tipe tertentu
Menutup windows
Memberikan perintah untuk membuka window
konfirmasi untuk pengunjung
Menemukan string teks tertentu pada isi dari
window tertentu
Memindahkan window ke foreground, ke tingkat
paling atas dari yang lain.
Menampilkan URL selanjutnya yang terdapat
pada daftar history
Memanggil handler untuk event tertentu
Mengembalikan browser ke URL tertentu yang
bertindak sebagai home page dari pengguna
Digunakan untuk memindahkan window ke lokasi
baru dari layar. Window ini dipindahkan sejauh
sejumlah pixel di dalam parameter pada method
Digunakan untuk memindahkan window ke lokasi
tertentu di dalam layar, berguna untuk
menempatkan window baru ke lokasi tertentu
pada layer
Membuka window baru
Mencetak isi dari window. Ketika dipanggil,
metode ini akan membuka dialog box untuk
mencetak
print the contents of the current window. When
it's called, it opens the browser's print dialog box
Membuka popup window yang menampilkan
prompt agar pengunjung memasukkan suatu
informasi
Menentukan window menjadi event yang
ditangkap dari tipe tertentu, mengirim event
pada objek pada hierarki event
Mengubah ukuran window yang ada berdasarkan
parameter yang ditetapkan
287
resizeTo()
routeEvent()
scroll()
scrollBy()
scrollTo()
setInterval()
clearInterval()
setTimeout()
clearTimeout()
stop()
Mengubah ukuran window tertentu menjadi
ukuran yang sesuai dengan parameter yang
diberikan
Melalui event yang diambil di sekitar hierarki
event biasa
Menggulung window ke koordinat tertentu
Menentukan jarak scroll dokumen pada window
(dalam pixel)
Menetapkan dokumen pada kedudukan tertentu,
dengan jumlah pixel yang ditentukan dalam
parameter suatu metode
Menjalankan suatu fungsi pada interval tertentu
secara berulang kali
Menghentikan ulangan (loop) waktu yang dimulai
dari metode setInterval() diatas
Menjalankan fungsi Javascript setelah beberapa
waktu tertentu yang telah ditentukan
Menghapus interval waktu dengan metode
setTimeout(). Berjalan bersama dengan
clearInterval
Menghentikan download saat itu
6.3.3 Event Handler
Selain properti dan metode, objek Window mempunyai event handler.
Event handler adalah sebuah kata kunci pada Javascript sehingga
script dapat melakukan beberapa fungsi tertentu berdasarkan events
pada halaman web. Setiap kali ada sesuatu yang terjadi, seperti
halaman yang sedang loading, sebuah link dipilih, mouse bergerak,
sebuah event terjadi. Ada saatnya event tersebut perlu untuk
dikendalikan. Hal ini dapat dilakukan dengan menggunakan event
handler, yang membuat script dapat berinteraksi dengan pengunjung.
Halaman web dapat bersifat lebih menarik ketika event dilakukan
berdasarkan aksi yang dilakukan oleh pengunjung. Interaksi dengan
pengunjung ini membuat halaman lebih menarik daripada dokumen
HTML yang statik.
Event handler biasanya ditempatkan dalam elemen form, pembukaan
dalam elemen body, atau elemen suatu link. Biasanya event handler
digunakan di dalam script sendiri. Beberapa event handler yang
sering digunakan dapat dilihat pada tabel berikut:
Tabel 6.3.3.1 : Event handler objek Window
LSP Telematika Indonesia
288
Events
Deskripsi
onBlur
Dijalankan ketika elemen form atau window kehilangan
fokus. Event handler ini berlawanan dengan onFocus
onError
Dijalankan ketika terjadi suatu error. Event handler ini
digunakan untuk menyediakan respon lainnya ketika
terjadi error.
onFocus
Dijalankan ketika window atau elemen form dipilih oleh
pengunjung dengan cara memilih satu item, dengan
menggunakan keyboard, atau manipulasi melalui script
onLoad
Digunakan untuk menjalankan script setelah halaman
web telah selesai ditampilkan, termasuk menampilkan
semua script, grafik, plugin, dan Java applet.
onResize
Dijalankan ketika window diubah ukurannya (resize)
onUnload
Digunakan untuk menjalankan script sebelum
meninggalkan halaman pada browser (ketika
pengunjung akan meninggalkan halaman tersebut)
Penulisan event handler dengan menggunakan huruf kapital tidak
diharuskan, kecuali jika menggunakan XHTML. Misalnya, onLoad
dapat saja ditulis onload.
Contoh penggunaan event handler adalah seperti berikut:
<body onLoad="window.defaultStatus='Welcome to my Web page!';">
6.3.4 Dialog Boxes
Terdapat tiga metode objek Window yang biasa digunakan, yaitu alert(),
confirm(), dan prompt(). Ketiga metode ini dapat digunakan untuk
membuka (pop up) dialog box sederhana. alert() digunakan untuk
menampilkan
pesan
ke
pengguna.
confirm()
digunakan
untuk
menanyakan pemilihan tombol OK atau Cancel kepada pengguna untuk
menegaskan atau membatalkan operasi. Dan prompt() digunakan untuk
meminta pengguna memasukkan suatu string. Contoh dialog box yang
ditampilkan dari ketiga metode itu dapat dilihat pada gambar.
LSP Telematika Indonesia
289
Gambar 6.3.4.1 alert(), confirm(), and prompt() dialog boxes [FLA97]
Sebagai catatan, teks yang ditampilkan pada dialog box merupakan teks
biasa, bukan teks dalam format HTML. Pengaturan format yang bisa
dilakukan adalah dengan space, baris baru, dan beberapa karakter tanda
baca. Javascript juga akan terus berjalan, ketika sebuah dialog alert()
dikirimkan,
akan
tetapi
metode
confirm()
dan
prompt()
akan
menghentikan program Javascript yang sedang dijalankan dan terus
menjalankan metode tersebut hingga pengguna menghentikan dialog box
yang ditampilkan. Artinya, jika terdapat satu pop up window yang
ditampilkan, code akan berhenti berjalan sampai pengguna memberikan
respon pada input yang diminta.
Contoh berikut memperlihatkan beberapa penggunaan dari metode
alert(), confirm(), dan prompt() [FLA97].
//
//
//
//
//
Berikut ini adalah fungsi yang menggunakan alert()
that their form submission will take some time, and that they should
be patient. It would be suitable for use in the onSubmit() event handler
of an HTML form.
Note that all formatting is done with spaces, newlines, and underscores.
function warn_on_submit()
{
alert("\n__________________________________________________\n\n" +
"
Your query is being submitted....\n" +
LSP Telematika Indonesia
290
"__________________________________________________\n\n"
"Please be aware that complex queries such as yours\n"
+
"
can require a minute or more of search time.\n\n" +
"
Please be patient.");
+
}
// Here is a use of the confirm() method to ask the user if they really
// want to visit a web page that takes a long time to download. Note that
// the return value of the method indicates the user response. Based
// on this response, we reroute the browser to an appropriate page.
var msg = "\nYou are about to experience the most\n\n" +
"
-=| AWESOME |=-\n\n" +
"Web page you have ever visited!!!!!!\n\n" +
"This page takes an average of 15 minutes to\n" +
"download over a 28.8K modem connection.\n\n" +
"Are you ready for a *good* time, Dude????";
if (confirm(msg))
location.replace("awesome_page.html");
else
location.replace("lame_page.html");
// Here's some very simple code that uses the prompt() method to get
// a user's name, and then uses that name in dynamically generated HTML.
n = prompt("What is your name?", "");
document.write("<hr><h1>Welcome to my home page, " + n + "</h1><hr>");
6.3.5. Status Bar Messages
Di bawah setiap browser window terdapat status bar. Di lokasi ini,
browser dapat menampilkan pesan untuk pengguna. Sebagai contoh
ketika mouse digerakkan di atas hypertext link, browser menampilkan
URL yang dituju oleh link. Dan ketika mouse digerakkan di atas tombol
browser
control,
browser
menampilkan
pesan
atau
teks
yang
menjelaskan tujuan dari tombol tersebut. Status bar dapat digunakan
oleh program sendiri, yaitu isinya dikendalikan oleh dua properti dari
objek Window: status dan defaultStatus.
Browser menampilkan URL dari hypertext link ketika mouse pointer
digerakkan di atas suatu link. Akan tetapi, terdapat beberapa web yang
menampilkan teks lain selain URL dari link. Hal ini dilakukan dengan
properti
status
dari
objek
Window,
dan
dengan
event
handler
onMouseOver() pada hypertext link.
Contoh berikut menampilkan tujuan link pada status bar:
<!—Berikut cara bagaimana menetapkan status bar pada hyperlink
-- event handler *harus* me-return true untuk tugas ini. -->
LSP Telematika Indonesia
291
<A HREF="sitemap.html" onMouseOver="status='Go to Site Map'; return
true;">
Site Map
</A>

<IMG SRC="images/imgmap1.gif" USEMAP="#map1">
<MAP NAME="map1">
<AREA COORDS="0,0,50,20" HREF="info.html"
onMouseover="status='Visit our Information Center'; return true;">
<AREA COORDS="0,20,50,40" HREF="order.html"
onMouseOver="status='Place an order'; return true;">
<AREA COORDS="0,40,50,60" HREF="help.html"
onMouseOver="status='Get help fast!'; return true;">
</MAP>
Pada contoh diatas, event handler onMouseOver() harus bernilai true. Hal
ini menjelaskan bahwa browser tidak harus melakukan aksi default dari
event, yaitu menampilkan URL dari link pada status bar. Jika event
handler tidak bernilai true, browser akan melakukan overwrite pada
pesan apapun yang ditampilkan handler pada status bar dalam URL
sendiri.
Ketika mouse pointer digerakkan di atas sebuah hyperlink, browser
menampilkan URL dari link, dan menghapusnya ketika mouse bergerak
keluar dari hyperlink. Hal ini sama ketika menggunakan event handler
onMouseOver() untuk menentukan properti status Window, yaitu pesan
akan ditampilkan ketika mouse berada di atas hyperlink, dan pesan
menghilang ketika bergerak menjauh dari link. Pada versi Windows untuk
Navigator,
status
bar
akan
dihapus
secara
otomatis
pada
saat
menetapkan properti status dari event handler onMouseOver(). Untuk
menghapus, dapat digunakan event handler onMouseOut(), seperti
berikut:
<A HREF="sitemap.html"
onMouseOver="status='Go to Site Map'; return true;"
onMouseOut="status='';">
Site Map
</A>
Properti status digunakan untuk untuk menampilkan pesan singkat
seperti contoh diatas. Untuk melakukan pesan yang tidak terlalu singkat
pada status bar, seperti menampilkan pesan selamat datang pada
pengunjung web page, dapat digunakan properti defaultStatus dari
Window. Properti ini menentukan default teks yang ditampilkan di status
LSP Telematika Indonesia
292
bar. Teks tersebut akan diubah sementara dengan URL, atau pesan
singkat lain ketika mouse pointer berada di atas hyperlink atau tombol
kendali browser, tetapi ketika mouse menjauh dari area tersebut default
teks akan kembali ditampilkan.
6.3.6. Manipulasi Window
a. Membuka Window baru
Window
dibuka
dengan
menggunakan
metode
window.open().
Metode ini mempunyai empat parameter, yaitu:
x
URL dari halaman yang akan dibuka (wajib ada, walaupun
hanya berupa string kosong)
x
Nama dari window yang akan menampilkan halaman
x
Properti dari window
x
Boolean untuk menentukan apakah dokumen lama akan
diganti dengan dokumen baru pada daftar history atau tidak
Berikut
merupakan
contoh
dari
penggunaan
metode
window.open()[ACA03]:
// membuka dokumen yang bernama ‘thisdoc.html’
// pada sebuah window bernama ‘win02’
window.open('thisdoc.html', 'win02');
// open 'win02' with nothing in it
window.open('', 'win02');
Jika menjelaskan nama sebuah window yang telah ada, maka
browser akan membuka dokumen baru pada window tertentu bukan
pada window baru. Parameter terakhir hanya dapat dijalankan ketika
meletakkan dokumen baru pada window yang sedang dibuka.
Perlu dicatat bahwa membuka sebuah window yang baru akan
membuka window yang terdapat pada bagian depan (foreground),
sedangkan membuka dokumen baru pada window yang telah ada
tidak akan membawa window ke bagian depan. Jika ingin melakukan
hal tersebut, harus disertakan pula fokus dari window itu. Cara yang
paling mudah antara lain menyediakan dokumen pada window baru
pada script yang berjalan pada saat loading dengan baris self.focus();
Parameter ketiga menetapkan properti tampilan dari window baru.
Parameter ketiga ini merupakan kumpulan dari nilai yang dipisahkan
LSP Telematika Indonesia
293
dengan koma. Jika nilai yang mungkin untuk properti
adalah “ya”
atau “tidak”, maka kita dapat menyediakan kata kunci jika nilai yang
diinginkan adalah “ya”. Tidak akan ada ruang kosong di dalam string.
Jika
properti
lain
ditentukan,
semua
properti
ya/
tidak
tidak
ditentukan secara default dan harus dideklarasikan secara eksplisit.
Properti yang tersedia untuk menampilkan window baru antara lain:
Tabel 6.3.6.1 : Properti Menampilkan Window Baru
Properti
height
Nilai
integer
width
integer
copyHistory
yes|no
directories
location
menubar
status
toolbar
resizeable
yes|no
yes|no
yes|no
yes|no
yes|no
yes|no
scrollable
yes|no
top
integer
left
integer
LSP Telematika Indonesia
Deskripsi
Tinggi eksternal dari sebuah window.
Mengambil integer untuk menyatakan
ukuran dari window dalam pixel. Untuk
menghindari code jelek pada hidden
window, sebuah window tidak dapat
dibuat lebih kecil dari tinggi title bar
ditambah window frame. Dan window
tidak dapat dibuat tanpa title bar
Panjang
eksternal
dari
window.
Mengambil integer yang menyatakan
ukuran window dalam pixel. Untuk
menghindari code jelek pada hidden
window, panjang sebuah window tidak
dapat ditentukan di bawah 100 pixel.
Menyalin sejarah objek dari window pada
window baru.
Menampilkan tombol directory.
Menampilkan location bar
Menampilkan menu bar.
Menampilkan status bar.
Menampilkan toolbar.
Apakah pengguna diperbolehkan untuk
mengubah
ukuran
window.
Untuk
beberapa browser, walaupun dipilih “no”,
pengguna masih dapat me-maximize
ukuran window, tetapi tidak dapat
mengubah ukuran dengan cara menyeret
mouse pada frame-nya
Apakah
window
dapat
digulung
(scrollable).
Menentukan lokasi diukur dari atas posisi
window, dalam pixel. Beberapa browser
tidak memperbolehkan mengambil posisi
yang keluar dari layar.
Menentukan seberapa jauh lokasi diukur
dari kiri layar dari posisi window, dalam
pixel.
Beberapa
browser
tidak
memperbolehkan mengambil posisi yang
keluar dari layar.
294
b. Scripting antara Window
Ketika menamakan sebuah window, nama itu dapat digunakan jika
ingin
menyatakan
window
tersebut,
apakah
ini
benar?
Tidak.
Terkadang Window dapat ditunjuk dari namanya, terkadang tidak
dapat. Contohnya code berikut tidak akan berjalan[ACA03]:
// -- bad code
window.open('', 'win02');
win02.document.write(somevar);
Code diatas tidak akan berjalan karena nama yang dinyatakan itu
merupakan properti dari window baru, bukan window yang sedang
dibuka.
Metode
window.open
membuka
window
baru
dan
mengembalikan nilai referensi pada objek window dari window baru
tersebut. Dengan menyatakan referensi tersebut pada variabel,
sebuah window dapat dinyatakan dari window yang membukanya.
Contoh code yang dapat berjalan adalah seperti berikut ini:
// -- good code
Win_02 = window.open('', 'win02');
Win_02.document.write(somevar);
Untuk arah lain, dari parent kembali ke child, lebih mudah. Objek
Window mempunyai properti opener yang merupakan referensi
kembali ke window yang dibuka oleh window saat ini. Windows yang
dibuka oleh pengguna mempunyai properti opener dengan nilai null.
// a reference to a property of the parent window
window.opener[get_val];
Dalam window, kita dapat menyatakan semua child window, dan seua
child window dari parent window.
c. Menutup Window
Window dapat ditutup dengan menggunakan window, seperti pada
code berikut:
// close the current window
window.close( );
LSP Telematika Indonesia
295
// close a child window
windowname.close( );
// close the parent window
window.opener.close( );
Javascript tidak digunakan untuk menutup window yang berisi
dokumen dari server yang berbeda, atau dibuka oleh dokumen lain
tanpa konfirmasi dari pengguna. Kecuali untuk parent window,
Javascript tidak dapat digunakan untuk menutup window yang dibuka
pengguna.
Jika ingin memastikan bahwa window sudah terbuka sebelum
berusaha untuk menutupnya, dapat dilakukan pengujian seperti
berikut:
// menguji apakah terdapat sebuah window
if (typeof(windowName) != "undefined") { }
// menguji apakah window masih terbuka
if (!(windowName.closed)) { }
Baris kedua dari pengujian diatas dilakukan untuk melihat apakah
terdapat suatu window. Sebuah window, atau variabel apapun, yang
tidak ada akan mempunyai tipe undefined. Pengujian kedua dilakukan
untuk melihat apakah properti dari window.closed telah ditetapkan
menjadi true. Jika telah bernilai true, maka berarti window telah
ditutup, objek hanya belum dibersihkan
d. Menggerakkan dan Mengubah Ukuran Window
Objek Window juga mempunyai metode untuk menggerakkan dan
mengubah ukuran dari window. Metode ini dapat berguna pada
beberapa pengaplikasian DHTML. Properti yang digunakan untuk
melakukan
hal
ini
adalah
window.resizeTo(w,h),
window.resizeBy(w,h), window.moveTo(w,h), window.moveBy(w,h);
dimana w merupakan lebar dan h merupakan tinggi dari window.
Contoh penggunaan metode tersebut dapat dilihat dalam script
berikut:
// mengubah ukuran window menjadi
// lebar 200 pixel dan tinggi 100
LSP Telematika Indonesia
296
window.resizeTo(200, 100);
// menambh 100 pixel ke lebar window
window.resizeBy(100,0);
// memidahkan window ke posisi
// - 100 pixels ke kanan dari bagian kiri layar
// - 50 pixels ke bawah dari bagian atas layar
window.moveTo(100, 50):
// memindahkan window sebanyak 25 pixel
window.moveBy(0, -25);
6.4. Objek Dokumen
6.4.1. Menulis ke dokumen
Objek Dokumen menyatakan isi dari suatu window atau frame. Objek ini
mempunyai properti yang menentukan informasi mengenai dokumen,
seperti URL, tanggal terakhir dimodifikasi, URL dari dokumen yang
dihubungkan, atau warna yang ditampilkan. Objek Dokumen juga
mempunyai metode yang membolehkan program Javascript untuk
menampilkan teks secara dinamis ke dalam dokumen dan membuat
dokumen baru dari awal. Akhirnya, objek Dokumen juga menyediakan
jumlah
properti
array
yang
menjelaskan
informasi
mengenai
isi
dokumen. Array ini menyimpan objek yang menyatakan link, anchor,
HTML form, applet, dan data yang tersimpan pada dokumen [FLA97].
Salah satu fitur yang paling penting dari objek Dokumen adalah metode
write(), yang men-generate isi halaman web secara dinamis dari program
Javascript. Terdapat beberapa cara untuk menggunakan metode ini. Cara
yang paling jelas untuk mengunakannya adalah menggunakannya pada
script untuk menampilkan HTML dalam dokumen yang telah diurai
(parsed).
Perhatikan
bahwa
HTML
hanya
dapat
ditampilkan
pada
dokumen ketika dokumen sedang diurai. Caranya adalah hanya dengan
memanggil metode document.write() dalam tag <SCRIPT>, karena script
ini dijalankan sebagai bagian dari proses penguraian dokumen. Jika
metode yang dipanggil adalah metode document.write() dari event
handler maka hasilnya akan membuat overwrite dokumen saat itu
(termasuk event handler), bukannya menambahkan teks pada dokumen.
LSP Telematika Indonesia
297
Walaupun tidak dapat menulis pada dokumen tertentu dari event
handler, kita dapat menulis dokumen pada window lain atau frame.
Teknik ini dapat berguna untuk web sites yang multiwindow atau
multiframe. Contoh berikut menunjukkan bahwa code Javascript dalam
satu frame pada multiframe site bisa menampilkan pesan di frame lain.
<SCRIPT>
parent.frames[0].document.open();
parent.frames[0].document.write("<HRE>Hello from your sibling
frame!<HR>");
parent.frames[0].document.close();
</SCRIPT>
Pertama, metode open() dari objek Dokumen dipanggil, lalu panggil
metode write() untuk menampilkan isi pada dokumen, dan terakhir
panggil metode close() dari objek Dokumen untuk menunjukkan telah
selesai. Langkah terakhir ini penting karena karena jika dokumen tidak
ditutup, browser tidak akan menghentikan animasi document loading
yang ditampilkan. Selain itu, browser akan membuat buffer HTML yang
telah ditulis, dan browser tidak dapat menampilkan HTML tersebut hingga
secara eksplisit dokumen telah ditutup dengan memanggil metode
close().
Metode close() perlu dicantumkan dalam program, sedangkan metode
open() tidak wajib digunakan (optional). Jika metode write() dipanggil
pada dokumen yang telah ditutup, maka Javascript secara implisit
membuka dokumen HTML baru, seperti saat memanggil metode open().
Hal ini menunjukkan apa yang terjadi ketika memanggil metode
document.write() dari event handler di dalam dokumen yang sama, yaitu
Javascript membuka dokumen baru. Akan tetapi, pada proses ini
dokumen yang sedang dibuka beserta isinya, termasuk script dan event
handler, disingkirkan. Pada Navigator 3.0, hal ini menyebabkan kesulitan
penjalanan program dan pesan error yang tidak terduga. Sedangkan
pada Navigator 2.0, hal ini dapat menyebabkan browser rusak (crash).
Aturan yang terbaik adalah dokumen tidak seharusnya memanggil
metode write() untuk dirinya sendiri dari event handler.
Terdapat beberapa catatan mengenai metode write(). Pertama, banyak
orang yang tidak menyadari bahwa metode write() dapat mempunyai
lebih dari satu argumen. Saat melalui beberapa argumen, argumen
tersebut akan digabungkan. Penulisan satu argumen seperti berikut:
LSP Telematika Indonesia
298
document.write('Hello, ' + name + " Welcome to my home page!");
sama saja dengan:
document.write('Hello, ', name, " Welcome to my home page!");
Catatan kedua mengenai metode write() adalah bahwa objek Dokumen
juga mendukung metode writeln(), yang identik sama seperti metode
write() kecuali bahwa metode writeln() menambahkan baris baru saat
menampilkan argumennya. Oleh karena HTML mengabaikan linebreak,
karakter baris baru ini biasanya tidak membuat perbedaan, tetapi
metode writeln() dapat nyaman digunakan saat bekerja pada dokumen
non- HTML.
6.4.2. Dynamic Documents
Dynamic
documents yang
dibuat
dengan
menggunakan Javascript
menyediakan semua fungsi dari dokumen statis yang ditulis dalam HTML.
Jika dibuat dalam bentuk HTML, kita dapat membuatnya langsung pada
script dokumen. Faktanya, seluruh dokumen dapat ditulis dalam sebuah
script.
6.4.3. Flow control
Setelah mengenal variabel dan operator, dapat menentukan variabel dan
memanipulasinya. Jalur umum dari program dapat diubah, hal ini disebut
sebagai
alur
program.
Alur
dari
program
dapat
diatur
dengan
menggunakan Flow Control.
Terdapat dua tipe dasar dari flow control, yaitu decision types dan loop
types.
Decision
types
mengubah
alur
berdasarkan
suatu
kondisi.
Sedangkan loop type akan melakukan aksi kontinu untuk melakukan
sesuatu.
Terdapat beberapa flow control yang dapat dilihat pada tabel berikut.
Tabel 6.4.3.1 : Flow Control
if
Makes a decision based on a condition
if/else
if/else As if, but with an alternative clause
switch
Multi-if statement
LSP Telematika Indonesia
299
for
An iterative loop
for/in
Iterates through the properties of an object
while
Performs code while a condition is true
do/while
Performs code, and then checks for the condition being
true
break
Stops execution of a loop
continue Skips an iterate of a loop
6.5. Bekerja dengan Frame
6.5.1. HTML Frames
Frame adalah bagian tersendiri, seperti window, pada halaman web.
Setiap halaman web dapat dibagi menjadi banyak frame satuan, yang
dapat digabungkan di dalam frame lain. Ukuran layar dapat membatasi
seberapa banyak frame dapat digunakan secara bersama. Dengan
menggunakan frame, browser window dapat dibagi menjadi kumpulan
panel. Masing-masing panel kemudian digunakan untuk menampilkan
dokumen yang berbeda.
Setiap
frame
mempunyai
scrollbar
atau
kontolnya
sendiri
untuk
memanipulasi ukuran dari frame. Setiap frame biasanya mempunyai
nama, sehingga dapat dihubungkan, yaitu isi dari satu frame dapat
berhubungan dengan isi dari frame lain. Kemampuan referensi inilah
yang menjadikan perbedaan utama antara frame dan tabel. Frame
menyediakan fasilitas layout dan navigasi.
Frame dibuat dalam dokumen HTML dan disebut dokumen frameset.
Dokumen frameset tidak mempunyai elemen body, tetapi mempunyai
elemen frameset, yang dibatasi dengan tags <frameset>. Dokumen
frameset biasanya terlihat seperti berikut [ACA03]:
<html>
<head>
<title>A simple frames document</title>
</head>
<frameset cols="200,*">
<frame name="frame1" src="document1.html" />
<frame name="frame2" src="document2.html" />
</frameset>
</html>
LSP Telematika Indonesia
300
Tags
<frameset>
ditampilkan
pada
menentukan
bagaimana
layar.
ini
Tags
frame
mempunyai
dirancang
dua
atribut
untuk
untuk
merancang hal tersebut, yaitu cols dan rows. Atribut cols menentukan
bagaimana
bagaiman
membagi
membagi
kolom
baris
ke
dalam
layar,
dalam
dan
layar.
rows
menentukan
Masing-masing
atribut
menentukan lebar dari setiap kolom atau tinggi dari setiap baris yang
diciptakan. Ukuran ini dapat ditentukan dalam angka, yang menyatakan
pixel, sebagai ukuran untuk layar, atau menggunakan wild card (tanda
asterisk - *) untuk menandai penggunaan ruang kosong yang tersisa.
Untuk dokumen diatas, terdapat tiga objek Window. Window tingkat atas
dimana dokumen frameset disimpan. Lalu ada dua frame lain, masingmasing dengan objek Window yang sendiri, yang merupakan anak dari
window tingkat atas. Dari tingkat atas, dua window lain dapat ditampung
dalam array frames[]. Dan dari tingkat atas, window tersebut dapat
dipanggil dari posisi index masing-masing, seperti window.frames[0] dan
window.frames[1], atau dipanggil dari nama atribut mereka, seperti
window.frame1 dan window.frame2.
Biasanya frame tidak dinyatakan dari window tingkat atas, tetapi dari
dalam frame itu sendiri, atau dalam dokumen yang menyimpan frame
tersebut.
Misalnya,
satu
frame
dapat
berisi
sebuah
menu
yang
melakukan aksi tertentu pada dokumen di window lain ketika terdapat
pilihan yang harus dipilih. Faktanya, setiap code dalam dokumen itu yang
berada dalam panel frame mengira bahwa objek Window untuk frame
tersebut adalah objek Window untuk panel itu, bukan objek Window
teratas untuk semua kumpulan frame. Jadi, objek Window adalah objek
global, sehingga setiap frame mempunyai objek Window masing-masing.
6.5.2. Script dengan Frame
Untuk Javascript, setiap frame diperlakukan seperti window yang
berbeda. Setiap frame mempunyai objek Window-nya sendiri. Javascript
mempunyai hubungan antara objek Window dari frame, menciptakan
sebuah hierarki dari objek Window. Maing-masing frame disimpan
sebagai elemen pada array frames[]
dari objek Window pada parent
window untuk frame itu. Isi dari setiap elemen dari array frames[]
merupakan objek Window untuk panel frame.
LSP Telematika Indonesia
301
a. Parent dan top
Objek Window mempunyai beberapa properti yang dirancang khusus
untuk menangani kondisi yang memerlukan pengaturan hierarki dari
window. Inilah yang disebut sebagai top dan parent.
window.parent menunjuk pada objek Window dari parent window.
Jadi untuk mengubah sesuatu pada frame2 dengan menggunakan
code pada frame1, digunakan code seperti berikut:
window.parent.frame2.someElement
window.top merupakan referensi untuk objek Window pada elemen
top window pada hierarki window. jika mempunyai beberapa tingkat
dari
nested
frame,
hierarki
dari
frameset
tingkat
atas
dapat
didapatkan. Jika tidak, perlu mengulangi pemanggilan properi parent
beberapa kali untuk keluar dari code yang berisi suatu frame, contoh
script-nya seperti berikut:
window.parent.parent.parent.otherframe.someElement
Jika ingin mencoba frame yang mempunyai beberapa tingkat pada
hierarki, perlu ditentukan nama atau posisi array frames[] dari setiap
objek Window, seperti contoh berikut:
window.parent.fLeft.fBottom.someElement
window.parent.frames[0].frames[2].someElement
Keuntungan untuk dapat mengakses antara frame yang satu dengan
frame lain merupakan kemampuan sederhana agar script dapat
berinteraksi frame lain. Hal ini memudahkan pembuatan struktur dari
code dengan melibatkan modul dari script. Contohnya, dengan
meletakkan script yang biasa digunakan oleh semua halaman di
dokumen frameset tingkat atas, yang perlu dilakukan hanyalah
mencantumkan (include) script tersebut sekali, di satu tempat, dan
semua halaman mengetahui tempat script tersebut. Oleh karena
elemen
objek
tree
dapat
memidahkan
variabel,
script
dapat
dikelompokkan, dengan memindahkan nama frame, code pun dapat
digunakan.
LSP Telematika Indonesia
302
function doSomething(frameName) {
frameName.status = 'Are you talking to me?';
}
[ ... ]
<input type="button" value="Click Me"
onclick="doSomething(window.parent.frame2);" />
b. Menghapus frame
Hal lainnya yang dapat dilakukan dengan Javascript adalah dengan
membuat penghenti frame. Code ini dapat diihat sebagai berikut:
if (window.location.href != window.top.location.href) {
window.top.location.replace(window.location.href);
}
Dengan kata lain, jika URL untuk dokumen saat ini tidak sama
dengan URL pada hierarki window tingkat atas, kemudian URL dari
objek Window tingkat atas diubah dengan URL dari dokumen
sekarang. Jika telah berada di tingkat atas, kemudian properti top
akan menunjuk pada objek Window saat ini dan dua nilai akan
bernilai sama.
Hal ini juga dapat dilakukan untuk arah lain jika ingin memastikan
bahwa dokumen selalu terjadi pada frame set.
if (window.location.href == window.top.location.href) {
window.top.location.replace('mainframe.html');
}
c. Inline Frame
Browser yang terbaru juga memperbolehkan tag <iframe> untuk
menentukan inline frame. Aturan yang sama untuk menyatakan
frame digunakan pada inline frame sama seperti frame yang biasa.
Perbedaannya hanya pada window tingkat atas berisi dokumen HTML
normal, bukan dokumen frameset.
LSP Telematika Indonesia
303
6.6. Validasi Data untuk Form
6.6.1. Objek Form
Objek Javascript Form menggambarkan form pada HTML. Form biasanya
digunakan sebagai elemen dari array forms[], yang merupakan properti
dari objek Dokumen. Form muncul dalam array dengan urutan seperti
pada dokumen. Jadi document.forms[0] menunjuk pada form pertama
pada dokumen, dan form terakhir di dokumen ditunjuk dengan:
document.forms[document.forms.length]
Properti yang paling menarik dari objek Form adalah elements[] sebagai
array, yang menampung objek Javascript yang menyatakan bermacammacam elemen input dari form. Jadi, document.forms[1].elements[2]
menunjuk pada elemen ketiga dari form kedua pada dokumen di window.
Properti lain dari objek Form digunakan untuk mengendalikan bagaimana
data pada form diserahkan ke web server, dan dimana hasilnya akan
ditampilkan, dan properti ini hanya berguna ketika form akan diserahkan
ke CGI script. Objek Form pada Javascript mempunyai dua metode, yaitu
submit() dan reset() untuk mengirim nilai pada form dan me-reset nilai
form. Untuk melengkapi kedua metode itu, disediakan pula event handler
berupa onSubmit dan onReset. Kedua metode ini memungkinkan
program
Javascript
melakukan
konfirmasi
pada
saat
reset
atau
pengiriman data pada form. Contoh script berikut memperlihatkan
konfirmasi yang dilakukan oleh event handler pada saat akan melakukan
reset (sesuai untuk Navigator 3.0) [CJR00]:
<FORM...
onReset="return confirm('Really erase ALL data and start over?')"
>
6.6.2. Pendekatan Umum
Objek Form mempunyai properti elements[], yang merupakan array dari
objek Javascript yang menyatakan elemen input yang tercantum pada
form. Terdapat beberapa elemen form pada HTML dan sesuai dengan
objek Javascript. Daftar elemen form pada HTML dapat dilihat pada tabel
berikut.
LSP Telematika Indonesia
304
Tabel 6.6.2.1 : Elemen Form pada HTML
Objek
HTML Tag
Properti
type
Deskripsi dan Events
Button
<INPUT
TYPE=button>
"button"
Sebuah push-button;
onClick().
Checkbox
<INPUT
"checkbox"
TYPE=checkbox>
<INPUT
FileUpload
TYPE=file>
Hidden
Option
<INPUT
TYPE=hidden>
<OPTION>
Sebuah toggle-button tanpa
perilaku radio-button;
onClick().
"file"
Sebuah field untuk input
untuk memasukkan nama
dari file untuk di-upload ke
web server; onChange().
"hidden"
Data dikirim bersama dengan
form tetapi tidak terlihat oleh
pengguna;
tidak ada event handler.
none
Sebuah item dalam objek
Select;
event handler dari objek
Select, bukan objek Option
sendiri.
Password
<INPUT
"password"
TYPE=password>
Sebuah input field untuk
memasukkan password, yaitu
karakter dengan
menggunakan tipe yang tidak
memperlihatkan nilai aslinya;
onChange().
Radio
<INPUT
TYPE=radio>
"radio"
Toggle-button dengan
perilaku radio, yaitu hanya
satu pilihan yang dapat
dipilih; onClick().
Reset
<INPUT
TYPE=reset>
"reset"
Sebuah push-button yang
me-reset suatu form;
onClick().
Select
<SELECT>
Daftar atau drop-down menu
dari salah satu pilihan yang
"select-one"
dapat dipilih;
onChange().
Select
<SELECT
MULTIPLE>
"selectmultiple"
Daftar dari banyak pilihan
yang dapat dipilih;
onChange().
Submit
<INPUT
TYPE=submit>
"submit"
Sebuah push-button untuk
mengirim form;
onClick().
Text
<INPUT
TYPE=text>
"text"
Sebuah text entry field
dengan satu baris;
onChange().
Textarea
<TEXTAREA>
"textarea"
Text entry field dengan
banyak baris;
onChange().
LSP Telematika Indonesia
305
Salah satu persamaan yang jelas adalah bahwa (hampir) semua elemen
objek Form menentukan event handler yang dipanggil ketika pengguna
berinteraksi dengan form tersebut. Event handler yang penting biasanya
onClick() atau onChange(), tergantung pada tipe objek.
Persamaan lain antara elemen objek form , pada Navigator 3.0, adalah
elemen tersebut mempunyai properti type untuk mengidentifikasikan tipe
elemen.
Kolom
properti
type
(kolom
ketiga)
pada
tabel
diatas
menjelaskan nilai dari properti ini untuk setiap objek. Oleh karena array
elements[] dari objek Form mengandung beberapa tipe dari elemen
objek Form, properti type memperbolehkan untuk melakukan loop
melalui array elements[] dan dijalankan di objek form. Catat bahwa
Internet Explorer 3.0 tidak mendukung properti type.
Semua elemen objek form juga mempunyai (di Navigator 3.0 dan
Navigator 2.0) properti form. Properti ini menyediakan cara yang
berguna untuk objek form untuk menunjuk ke objek form lain dari event
handler. Dalam event handler untuk elemen form, kata this menunjuk
pada elemen objek itu sendiri.Hal ini berarti this.form selalu menunjuk
pada form yang berisi. Oleh karena itu, event handler lain pada form
dapat menunjuk pada objek yang bersaudara di form yang sama dengan
ekspresi seperti berikut:
this.form.elements[4]
Dua properti yang digunakan oleh semua elemen objek form adalah
name dan value. Ketika form dikirim, input data dari pengguna
dikirimkan ke web server dengan pasangan name/value di form, dan
properti ini menentukan nama untuk setiap pengiriman data elemen dan
nilai yang dikirimkan ke elemen tersebut. Properti name merupakan
read-only string, dan nilainya diperjelas dengan atribut name dari HTML
tag yang menentukan elemen form. Atribut ini tidak wajib digunakan,
tetapi data dari sebuah elemen tidak dapat dikirim kecuali sudah
ditentukan.
Properti
value
hampir
sama
seperti
properti
name.
Properti
ini
merupakan string read/write untuk semua objek elemen form, dan berisi
data yang dikirimkan dalam jaringan ketika form disimpan. Nilai awal dari
LSP Telematika Indonesia
306
properti value biasanya ditentukan oleh atribut value dari HTML tag yang
menjelaskan elemen form.
Properti value berisi nilai string untuk semua elemen form. Oleh karena
data konversi secara otomatis dilakukan oleh Navigator, sebuah nilai atau
objek dapat dinyatakan dalam semua tipe properti type dan akan diubah
secara otomatis menjadi string. Sayangnya, batasan pada Internet
Explorer 3.0 tidak memperbolehkan objek untuk dinyatakan menjadi
properti value, sehingga secara eksplisit objek harus diubah menjadi
string dahulu. Contoh code berikut tidak dapat dijalankan pada IE 3.0:
today = new Date();
document.myform.date.value = today;
Cara termudah untuk mengubah objek today menjadi string adalah
dengan menambahkan string kosong. Code berikut dapat dijalankan pada
IE 3.0:
today = new Date();
document.myform.date.value = "" + today;
Tag <FORM> juga mempunyai atribut name yang dapat ditentukan.
Atribut ini tidak berhubungan dengan pengiriman form, dan ditemukan
untuk
kenyamanan
programmer
Javascript.
Jika
atribut
name
didefinisikan di tag <FORM>, ketika objek Form diciptakan untuk form
tersebut, atribut akan disimpan sebagai elemen dari array forms[] untuk
objek Dokumen, seperti biasa, dan juga akan disimpan sebagai properti
pribadi dari objek Dokumen. Nama dari properti yang baru didefinisikan
ini adalah nama dari atribut name. Jadi sebuah form dengan HTML dapat
didefinisikan seperti berikut:
<FORM NAME="questionnaire">
...
</FORM>
Kemudian form tersebut dapat diyatakan sebagai:
document.questionnaire
LSP Telematika Indonesia
307
Sering juga, pernyataan diatas digunakan dengan notasi array seperti
berikut:
document.forms[2]
Catat bahwa tag <IMG>, <APPLET>, dan <EMBED> juga mempunyai
atribut name yang mempunyai cara kerja yang sama dengan atribut
name dari <FORM>. Dengan form, cara penamaan ini dapat dilakukan
dengan lebih jauh, karena semua elemen yang disimpan dalam form
mempunyai atribut name. Ketika memberikan atribut name pada elemen
form, properti baru dari objek Form untuk menunjuk pada elemen form
dapat diciptakan. Nama dari properti ini merupakan nilai dari atribut.
Sehingga elemen bernama ”zipcode” pada form ”address” dapat ditunjuk
sebagai:
document.address.zipcode
Pada form HTML yang menggunakan elemen Checkbox dan Radio, biasa
digunakan kumpulan dari elemen yang berhubungan dengan nama yang
sama. Sebagai contoh, jika form berisi banyak Radio button yang
memperbolehkan pengguna mengindikasikan favourite web browser
pengguna, maka setiap tombol dapat diberi nama ”favourite”. Properti
value dari satu tombol dapat berupa ”nn”, dan nilai dari tombol lain
berupa
”ie”.
Ketika
form
dikirim,
string
akan
dikirim
untuk
mengindikasikan pilihan pengguna. Menggunakan nama yang sama
untuk beberapa elemen tidak merupakan masalah untuk kasus ini karena
hanya satu dari elemen tersebut yang dapat dipilih pada satu waktu, jadi
hanya satu nilai yang dapat dikirim dengan nama tersebut.
Ketika lebih dari satu elemen pada form mempunyai atribut name yang
sama, Javascript menempatkan elemen tersebut menjadi array dengan
menggunakan nama tertentu. Jadi, objek Radio pada contoh diatas
merupakan bagian dari form yang bernama “questionnaire”, dan dapat
ditunjuk dengan ekspresi seperti berikut:
document.questionnaire.favorite[0]
document.questionnaire.favorite[1]
LSP Telematika Indonesia
308
6.6.3.
Pengujian untuk Fields Tertentu
Field yang dibutuhkan (required field) pada suatu form merupaka field
yang HARUS mempunyai suatu isi sebelum form diproses. Jika form
merupakan form pemesanan, informasi yang sebagian-sebagian saja
tidak berguna. Code berikut menunjukkan contoh suatu required field,
yaitu field nama harus diisi:
<HTML>
<HEAD>
<TITLE>Required Fields</TITLE>
<SCRIPT>
function validate() {
mNv=mainform.Name.value;
if (mNv=='') {
alert('Your name is a required field. Please try again.');
event.returnValue=false;
}
if (!(mainform.Sex[0].checked || mainform.Sex[1].checked)) {
alert('Your sex is a required field. Please try again.');
event.returnValue=false;
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="mainform" ACTION="http://yourdomainhere/cgibin/post-query" METHOD="post" onsubmit="validate();">
<INPUT TYPE="TEXT" NAME="Name" >Please enter your name
(required)
<BR>
<INPUT TYPE="RADIO" NAME="Sex" VALUE="Male">Male
<INPUT TYPE="RADIO" NAME="Sex" VALUE="Female">Female
<BR>
<INPUT TYPE="SUBMIT">
</FORM>
</BODY>
</HTML>
Pada form terdapat event handler onsubmit yang memanggil fungsi
validate(). Event handler ini memastikan ketika mengirimkan form,
fungsi Javascript validate() akan dijalankan untuk memeriksa apakah
terdapat field yang kosong.
Fungsi validate() menyimpan pekerjaan
untuk memeriksa elemen form individual dan melakukan pemeriksaan
terhadap input yang illegal. Untuk form diatas, input yang illegal yang
dimaksud adalah tidak ada nama atau jenis kelamin pada form. “Illegal”
berarti jika terdapat form yang mempunyai nilai kosong dan tidak
memenuhi kelengkapan data yang penting. Pada kasus ini, fungsi
LSP Telematika Indonesia
309
validate() memeriksa field Name yang kosong dan pilihan radio button
Sex.
Sub bagian pertama dari fungsi validate() memeriksa field Name pada
form yang bernama mainform. Jika field kosong ketika form dikirim,
kemudian dideteksi dan menolak form.
mNv=mainform.Name.value;
if (mNv=='') {
alert('Your name is a required field. Please try again.');
event.returnValue=false;
}
Menetapkan properti dari returnValue untuk memberikan nilai false untuk
menolak form. Aksi ini dibatalkan pada event onsubmit, dan mencegah
event dari mencapai mekanisme yang sebenarnya yaitu mengirim form
melalui internet.
Sub bagian kedua memeriksa apakah radio box Sex telah dipilih. Jika
tidak ada radio box dari Sex yang dipilih maka viewer dilaporkan untuk
menolak form.
if (!(mainform.Sex[0].checked || mainform.Sex[1].checked)) {
alert('Your sex is a required field. Please try again.');
event.returnValue=false;
}
Kita dapat melihat apakah suatu radio box telah dipilih dengan melihat
properti checked. Metode mainform.Sex[0].checked bernilai true jika
radio box dari Sex dipilih. Logika untuk code berjalan jika Male atau
female
dipilih,
kemudian
(mainform.Sex[0].checked
||
mainform.Sex[1].checked) bernilai true. Jika tidak ada yang dipilih maka
ekpresi ini bernilai false. Situasi ini merupakan satu-satunya situasi
dimana ekpresi bernilai false, karena sifat dari pernyataan || (or).
6.6.4.
Validasi data Numerik
Banyak form yang menyangkut matematika sehingga input numerik
harus
dibuktikan
sebelum
dilanjutkan.
Fungsi
built-in
Javascript
Number() dan metode internal (seperti isNaN(), parseInt(), parseFloat(),
dan lain-lain) dapat digunakan untuk validasi angka desimal. Akan tetapi,
fungsi dan metode tersebut kurang lengkap untuk sistem radix dan
LSP Telematika Indonesia
310
kumpulan fungsi harus dikumpulkan sendiri untuk ditempelkan (paste)
pada proyek.
Salah satu solusi untuk validasi dengan brute force adalah dengan cara
menguji setiap karakter dari string entry untuk nilai yang diijinkan.
Integer dalam binary dibatasi pada angka 0 dan 1. Bilangan oktal dapat
mempunyai bilangan 0 hingga 7. Code heksadesimal dapat mengandung
0 hingga 9 digit angka dan huruf A hingga F (baik huruf kecil maupun
huruf besar).
Contoh berikut menunjukkan pemeriksa entry untuk heksadesimal.
Dengan perubahan karakter yang sesuai dan diperbolehkan dan juga
kontrol panjang (tetap atau maksimum) contoh berikut dapat digunakan
untuk banyak situasi validasi. Langkah-langkah yang dilakukan antara
lain:
1. Pastikan ada sesuatu yang diperiksa
2. Oleh karena huruf besar cukup sering digunakan, pastikan
untuk mengubah string menjadi huruf besar. Atau dapat juga
dimasukkan huruf besar dan huruf kecil pada pembacaan
karakter.
3. Terakhir lakukan pemeriksaan setiap karakter sederhana untuk
karakter yang valid.
Pada
pengujian
ini,
string
yang
tidak
valid
atau
kosong
akan
menyebabkan penampilan pesan error dan mengembalikan nilai false.
Jika semua string dapat melewati pengujian, maka pesan “ok!” akan
ditampilkan dan mengembalikan nilai true. Fungsi validasi ini sering
dituliskan tanpa menampilkan pesan, dan memberikan pada fungsi
panggil.
Satu
variasi
terakhir
menerima
parameter
kedua
untuk
menyatakan apakah pesan akan ditampilkan atau tidak.
function isHex(entry) {
validChar='0123456789ABCDEF'; // karakter dalam hex
strlen=entry.length;
// panjang string yang diuji
if (strlen < 1) {
alert('Enter Something!');
return false;} // tidak ada pengecekan!
entry=entry.toUpperCase(); // jika ada huruf kecil
// Scan untuk menemukan illegal karakter
for (i=0; i < strlen; i++ ) {
if (validChar.indexOf(entry.charAt(i)) < 0) {
alert("Entry must be in hexadecimal format!");
LSP Telematika Indonesia
311
return false;
}
} // akhir dari scanning loop
alert('ok!');
return true;
}
Setelah mengetahui bahwa variabel berbentuk angka, kemudian gunakan
metode objek Math parseInt() dan parseFloat() untuk mengubah variable
menjadi tipe tertentu jika diperlukan. Menggunakan parseInt() dan
parseFloat() dapat menyebabkan masalah yang tidak diperkirakan karena
dapat memotong nonnumeric string dan menghasilkan angka sebagai
jawaban. Fungsi isNaN() adalah fungsi untuk menguji bilangan, dibatasi
untuk nilai desimal saja.
6.6.5.
Validating String Data
a. Pengujian untuk Huruf saja
Fungsi berikut akan membuktikan apakah string hanya mengandung
huruf. Pada fungsi ini digunakan regular expression dengan negating
operator untuk menentukan apakah terdapat suatu karakter di string
tidak sesuai dengan pola yang telah ditentukan. Jika terdapat
karakter
dalam
variabel
yang
tidak
merupakan
huruf,
fungsi
isLetters() akan bernilai false.
<?PHP
function isLetters($element) {
return !preg_match ("/[^A-z]/", $element);
}
?>
b. Pengujian untuk Panjang dari suatu String
Fungsi berikut akan memeriksa panjang dari string dan menghasilkan
nilai false jika panjang tidak dalam rentang tertentu yang telah
ditentukan. Untuk tugas ini, akan digunakan fungsi strlen() untuk
menentukan panjang dari string dan kemudian membandingkannya
dengan panjang maksimum dan minimum.
<?PHP
function checkLength($string, $min, $max) {
$length = strlen ($string);
LSP Telematika Indonesia
312
if (($length < $min) || ($length > $max)) {
return FALSE;
} else {
return TRUE;
}
}
?>
Soal Latihan
1. Nama lain literal dalam javascript adalah :
a. boolean
b. array
c. constant
d. variabel
2. Operator apa yang menggunakan representasi binari :
a. bitwise
b. assignment
c. comparison
d. assignment
3. Kegunaan dari method confirm() dari objek window adalah :
a. Mengulangi (undo) langkah terakhir pada frame apapun dalam
window tingkat atas
b. Memberikan perintah untuk membuka window konfirmasi untuk
pengunjung
c. Membuka popup window yang menampilkan pesan kepada
pengunjung
d. Menemukan string teks tertentu pada isi dari window tertentu
Soal Praktek
4. Buatlah kode Javascript yang menampilkan pop-up window bertuliskan
“saya adalah pop up”. Berikut ini adalah tampilannya.
LSP Telematika Indonesia
313
Jika tombol pop_up dipilih maka akan muncul pop up seperti di bawah ini:
5. Buatlah kode Javascript yang menampilkan pertanyaan nama dan setelah
diisi maka akan ditampilkan jawaban dari isian tadi. Berikut ini adalah
tampilannya.
Jika tombol input button dipilih maka akan keluar tampilan :
LSP Telematika Indonesia
314
Setelah mengisi pertanyaan dan memilih tombol OK, maka akan keluar
tampilan :
Jawaban Soal
Bab 1:
1.
2.
3.
4.
a
b
c
Kode :
LSP Telematika Indonesia
315
<html>
<body>
<h4>Disc bullets list:</h4>
<ul type="disc">
<li>Apel</li>
<li>Pisang</li>
<li>Lemon</li>
<li>Jeruk</li>
</ul>
<h4>Circle bullets list:</h4>
<ul type="circle">
<li>Apel</li>
<li>Pisang</li>
<li>Lemon</li>
<li>Jeruk</li>
</ul>
<h4>Square bullets list:</h4>
<ul type="square">
<li>Apel</li>
<li>Pisang</li>
<li>Lemon</li>
<li>Jeruk</li>>
</ul>
</body>
</html>
5. Kode :
<html>
<head>
<title>Customization</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!-.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 10px;
color: #996633;
}
.style2 {font-family: Verdana, Arial, Helvetica, sans-serif}
.style4 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; }
.style5 {
font-size: 10px;
color: #663333;
font-weight: bold;
}
.style6 {color: #0000CC}
body {
background-color: #FFCCFF;
}
LSP Telematika Indonesia
316
.style7 {
font-size: 12px;
color: #FF0000;
font-weight: bold;
}
.style8 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FF0000;
font-weight: bold;
}
.style9 {color: #663333}
-->
</style>
</head>
<body>
<p>&nbsp;</p>
<p>
<h1 align="center">Madeline Customization Area</h1>
</p>
<br>
<br>
<table width="70%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3" scope="col"><div align="justify"></div></td>
</tr>
<tr>
<td width="36%"><div align="center"><img
src="../../../My%20Documents/Web/gambar/BearBear3.jpg" width="128"
height="128"></div></td>
<td colspan="2"><div align="justify" class="style1">Who doesn't adore a
lovely bear that holding a flower dearly. With a gentle color that will brings
happiness to those wo see the picture. You will get a T-shirt with this picture only
by paying $50.00. <a href="link.htm">Order now</a>. Limited version.
</div></td>
</tr>
<tr>
<td>&nbsp;</td>
<td width="7%">&nbsp;</td>
<td width="57%">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="3"><div align="justify" class="style9"><strong><span
class="style4">Everyone knows that a dog is a man-bestfriend. Dog is famous for
its loyalty to its owner. Moreever with a cute </span></strong></div></td>
</tr>
<tr>
<td><div align="center" class="style5">
<div align="center"><img
src="../../../My%20Documents/Web/gambar/3000270.gif" width="150"
height="104"></div>
LSP Telematika Indonesia
317
</div></td>
<td><div align="justify"></div></td>
<td valign="top"><div align="justify" class="style9"><strong><span
class="style4">white dog that waiting for a friend. Thid dog is special because it
makes friend to any animal. Why...makes friend just with human..its says? How
about making this dog very close to you by having it in your clothes. You can get
it only by paying $37.00. <a href="link.htm">Order now</a>. Limited Version.
</span></strong></div></td>
</tr>
<tr>
<td colspan="3">&nbsp;</td>
</tr>
<tr>
<td colspan="3"><h3>How to order : </h3></td>
</tr>
<tr>
<td colspan="3"><ol>
<li class="style7">Register to www.MadeLine.com</li>
<li class="style8">You must have credit card</li>
<li class="style8">Follow link order now</li>
<li class="style8">Answer all question</li>
<li class="style8">You will get notification through email if the payment is
suceed </li>
</ol></td>
</tr>
</table>
</body>
</html>
Bab 2:
1. b
2. d
3. Query :
select NIP, Nama, Gaji from EMP
where gaji between 1200 and 1400
4. Query :
select NIP, (gaji*12) as gaji_tahunan
from EMP
where Jabatan = 'MANAGER'
5. Query :
select max(gaji) as gaji_tertinggi, min(gaji) as gaji_terendah
from EMP
LSP Telematika Indonesia
318
Bab 3:
1. b
2. a
3. a
4. Kode :
<?
if(isset($_POST['Submit'])) {
$op1 = $_POST['op1'];
$op2 = $_POST['op2'];
$hsl = $op1 + $op2;
}
?>
<html>
<head>
<title>Menjumlahkan</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<h1>Penjumlahan 2 (Dua) Bilangan </h1>
<form method="post" action="Penjumlahan.php">
<table width="70%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td colspan="5">&nbsp;</td>
</tr>
<tr>
<td width="20%"><input type="text" name="op1" value=<? echo $op1;
?>></td>
<td width="20%"><div align="center">+</div></td>
<td width="20%"><div align="center">
<input type="text" name="op2" value=<? echo $op2; ?>>
</div></td>
<td width="20%"><div align="center">=</div></td>
<td width="20%"><input type="text" name="rs" value=<? echo $hsl;
?>></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><input type="submit" name="Submit" value="Hitung!"></td>
</tr>
</table>
</form>
</body>
</html>
5. Kode :
<?
if(isset($_POST['Submit'])) {
LSP Telematika Indonesia
319
$conn = mysql_connect("localhost", "", "") or die(mysql_error());
$db = mysql_select_db("DML", $conn) or die(mysql_error());
$nim = $_POST['NIM'];
$nama = $_POST['Nama'];
$jurusan = $_POST['Jurusan'];
$sql = "INSERT INTO tbl_mhs(nim, nama, jurusan) VALUES('$nim',
'$nama', '$jurusan')";
mysql_query($sql, $conn);
echo "<h3>Data Mahasiswa Baru Telah Sukses
Dimasukkan</h3>";
}
?>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<h1>Menambah Data Mahasiswa Baru</h1>
<form action="form.php" method="POST">
<table width="54%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="33%" scope="col"><div align="center">NIM
</th>
</div>
<td width="9%" scope="col">
<div align="center">: </div>
<td width="58%" scope="col"><div align="center">
<input type="text" name="NIM">
</div>
</tr>
<tr>
<td><div align="center">Nama</div></td>
<td><div align="center">:</div></td>
<td><div align="center">
<input type="text" name="Nama">
</div></td>
</tr>
<tr>
<td><div align="center">Jurusan</div></td>
<td><div align="center">:</div></td>
<td><div align="center">
<input type="text" name="Jurusan">
</div></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><input type="submit" name="Submit" value="Tambah"></td>
</tr>
</table>
LSP Telematika Indonesia
320
</form>
</body>
</html>
Bab 4:
1. e
2. c
3. d
4. Kode :
import
import
import
import
import
javax.swing.*;
javax.swing.border.*;
java.awt.event.*;
java.awt.*;
java.util.*;
public class Test1 extends JFrame
{
public static void main(String args[])
{
JFrame.setDefaultLookAndFeelDecorated(true);
JFrame frame = new Tugas_DAA();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.show();
}
public Test1()
{
super("Printing Neatly");
panelButton = new JPanel();
paneltext = new JPanel();
textInput = new JTextArea();
textOutput = new JTextArea();
scrollInput = new JScrollPane(textInput);
scrollOutput = new JScrollPane(textOutput);
scrollInput.setBorder( new TitledBorder(null, "input",
javax.swing.border.TitledBorder.DEFAULT_JUSTIFICATION,
javax.swing.border.TitledBorder.DEFAULT_POSITION, new Font("Arial Black", 0,
11)));
scrollOutput.setBorder( new TitledBorder(null, "print",
javax.swing.border.TitledBorder.DEFAULT_JUSTIFICATION,
javax.swing.border.TitledBorder.DEFAULT_POSITION, new Font("Arial Black", 0,
11)));
panelButton.setSize(this.getWidth(), 0);
tombolOpen = new JButton("Open");
tombolReset = new JButton("Reset");
tombolExit = new JButton("Exit");
tombolPrint = new JButton("Print");
LSP Telematika Indonesia
321
paneltext.setLayout( new GridLayout(2,1) );
paneltext.add(scrollInput);
paneltext.add(scrollOutput);
textOutput.setEditable(false);
panelButton.setLayout(new GridLayout(1,4));
panelButton.add(tombolOpen);
panelButton.add(tombolReset);
panelButton.add(tombolPrint);
panelButton.add(tombolExit);
addWindowListener(new WindowAdapter() {
public void windowClosing(WindowEvent evt) {
exitForm(evt);
}
});
tombolOpen.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent evt) {
}
});
tombolPrint.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent evt) {
}
});
tombolReset.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent evt) {
}
});
tombolExit.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent evt) {
}
});
Container container = getContentPane();
container.add(paneltext, "Center");
container.add(panelButton, "South");
setSize(300,300);
}
private void exitForm(WindowEvent evt) {
System.exit(1);
}
private JPanel panelButton, paneltext;
private JButton tombolOpen, tombolReset, tombolExit, tombolPrint;
private JTextArea textInput, textOutput;
LSP Telematika Indonesia
322
private JLabel labelInput, labelOutput;
private JScrollPane scrollInput, scrollOutput;
5. Kode :
class Sorting
{
public static void main(String[] args)
{
int awal[] = {4,6,1,2,9,7,0,8,3};
int temp = 0;
System.out.println("Kondisi awal : ");
for (int i=0; i<awal.length; i++) {
System.out.print(awal[i]+" ");
}
System.out.println();
for (int i=0; i<awal.length; i++)
{
for (int j=0; j<awal.length-1; j++)
{
if (awal[i] < awal[j])
{
temp = awal[i];
awal[i] = awal[j];
awal[j] = temp;
}
}
}
System.out.println("\nKondisi akhir : ");
for (int i=0; i<awal.length; i++) {
System.out.print(awal[i]+" ");
}
}
}
Bab 5:
1. D
2. B
3. A
4. Kode :
<%
Response.ContentType="text/html"
%>
<html>
<body>
<p>This is some text</p>
LSP Telematika Indonesia
323
</body>
</html>
5. Kode :
Response.Cookies("userName").Value = "mike"
Response.Cookies("userName").Expires = DateTime.Now.AddDays(1)
Dim myCookie As New HttpCookie("lastVisit")
myCookie.Value = DateTime.Now.ToString
myCookie.Expires = DateTime.Now.AddDays(1)
Response.Cookies.Add(myCookie)
Bab 6:
1. c
2. a.
3. b
TUGAS PRAKTEK :
4. Kode
<html>
<head>
<script type="text/javascript">
function disp_alert()
{
alert("Saya adalah pop up!!")
}
</script>
</head>
<body>
<form>
<input type="button" onclick="disp_alert()" value="pop_up">
</form>
</body>
</html>
5. Kode
<html>
<head>
<script type="text/javascript">
function disp_prompt()
{
var name=prompt("Masukkan Nama Anda","")
if (name!=null && name!="")
{
document.write("Hai " + name + "! Bagaimana kabar anda hari ini?")
}
}
</script>
LSP Telematika Indonesia
324
</head>
<body>
<form>
<input type="button" onclick="disp_prompt()" value="Input Button">
</form>
</body>
</html>
LSP Telematika Indonesia
325
Daftar Pustaka
1) www.htmlcodetutorial.com
2) www.w3schools.com/html
3) www.javascript.com
4) www.javascript.internet.com
5) www.java.sun.com
6) www.microsoft.com
7) www.php.org
8) www.widodo.com
9) Deithel, Java How To Program, 5th ed, 2005
10) Widodo Budiharto, Sistem Informasi Akademik berbasis VB .NET 2005, Andi 1
Offset Yogyakarta, 2006.
11) Widodo Budiharto, Panduan Lengkap Pemrograman J2EE, Andi Offset
Yogyakarta, 2005
12) Core JavaScript Reference 1.5. 2000
13) Flannagan, David. Java Script - The Definitive Guide, 2nd Edition. O'Reilly &
Associates. January 1997.
14) Powell, Thomas A. HTML: The Complete Reference, Third edition. California:
Osborne/ McGraw-Hill. 2001.
15) http://www.w3school.com
16) Kantor, Peter L. http://academ.hvcc.edu/~kantopet/ . 2003.
17) Horstmann, Cay S. Computing Concept with Java 2 Essentials, 2nd Edition.
John Wiley & Sons. Inc. 1998
18) Helmy & Ridwan Sanjaya. Pengolahan Database SQL Server 2000 dengan
Java2. PT Elex Media Komputindo. Jakarta 2003.
19) Hanna, Phil. JSP 2.0 The complete reference. New York:McGraw-Hill, 2001.
20) Slide Prentice Hall. 2002
21) http://www.htmltutorials.ca/lesson4.htm
22) http://www.infomotions.com/musings/tricks/manuscript/1015-logicaltags.html
23) Powell, Thomas A. HTML: The Complete Reference, Third edition. California:
24) Osborne/ McGraw-Hill. 2001.
25) Coggeshall, John. 2004. PHP 5 Unleashed. Sams Publishing.
26) Wenz, Christian. 2005. PHP PHRASEBOOK: ESSENTIAL CODE AND
COMMANDS. Sams Publishing.
27) Meloni, Julie C. 2003. PHP Essentials, Second Edition. Premier Press.
LSP Telematika Indonesia
326
28) Campbell, Marc. 2005. WEB DESIGN GARAGE. Prentice Hall PTR.
29) Herrington, Jack. 2005. PHP Hacks. O'Reilly.
30) msdn.microsoft.com
31) http://www.geocities.com/SiliconValley/Vista/2207/sql1.html
32) http://www.c-sharpcorner.com/asp/Articles/CachingInASPDPL.asp
33) http://www.webgecko.com/community/articles/ach_bestpract.htm
34) http://platinum.intersystems.com/wld/wd_timesessions.html
35) http://www.tips-tricks.com/automa.asp
36) www.ilmukomputer.com
LSP Telematika Indonesia
327

LSP Telematika Indonesia

Related documents

Products

Support

LSP Telematika Indonesia

Related documents

Add this document to collection(s)

Add this document to saved

Suggest us how to improve StudyLib