LSP Telematika Indonesia - dinus.ac.iddinus.ac.id/repository/docs/ajar/webprogramming.pdf · 5.6...

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


2

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


3

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 pre-

exiting

13. TIK.PR02.012.01 Mengkompilasi dan menjalankan sebuah aplikasi


4

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


5

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 :


6

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.


7

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 dikembangkan lebih lanjut hingga mempunyai standarisasi

internasional ( 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


8

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

Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0

Transitional//EN">

XHTML 1.0 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0

Strict//EN">

XHTML 1.0

Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0

Frameset//EN">


9

• <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 dari file (meta-

information). Search engine menggunakan 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 < atau <

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.


10

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


11

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


9

1.4.2 Microsoft Frontpage Microsoft frontpage merupakan editor keluaran Microsoft untuk membuat

website. Editor ini akan mempermudah orang-orang yang akan membuat kode-

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


10

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 1<h1><br> <h2>Heading 2<h2><br> <h3>Heading 3<h3><br> <h4>Heading 4<h4><br> <h5>Heading 5<h5><br> <h6>Heading 6<h6> </body> </html>

Sedangkan tampilan kode diatas oleh browser, adalah sebagai berikut :

Gambar 1.5.1.1 Tampilan Heading


11

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 :


12

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>


13

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


14

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. Visit <a href="www.yahoo.com">Yahoo! </a><br> 2. <a href="www.amazon.com"><img src="C:/buy.gif"

width="16" height="16" border=0 ></a><br> 3. Search &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>

15

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"> <!--


16

A {text-decoration: none;} a:hover {color:red; text-decoration: underline;} --> </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 Menentukan frame yang menjadi tujuan link

title Text Menentukan teks tooltip untuk link

accesskey A character Menentukan bagian keyboard untuk mengakses link

rel Text Menentukan hubungan dari objek yang dihubungkan

rev Text Menentukan hubungan objek yang menghubungkan

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


17

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.


18

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


19

</ol> <p>Ordered lists can have a variety of types</p> <ol> <li type="a">Lowercase letters <li type="A">Uppercase letters <li type="i">Lowercase Roman numerals <li type="I">Uppercase Roman numerals <li 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 :


20

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


21

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


22

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 :


23

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>


24

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


25

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


26

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


27

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><HSPACE></b></tt>and <tt><b><VSPACE></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


28

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 1</td> <td>baris 1, kolom 2</td> </tr> <tr> <td>baris 2, kolom 1</td> <td>baris 2, kolom 2</td> </tr> </table>

Hasil keluarannya :

row 1, cell 1 row 1, 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>


29

<td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>

Hasil keluarannya adalah sebagai berikut :

Heading Another Heading



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


30

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>


31

<!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


32

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 atribut target dalam <a>, contohnya :

<a href=”http://www.yahoo.com” 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>


33

<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 frame dapat menjadi target link. Contoh kode:

<a href=”http://www.google.com” target=”iframe1”>Tampilkan di

iframe </a>.

Gambar 1.8.3.1 Tampilan Kode Inline Frame

1.9 Tag Logika


34

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


35

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


36

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 “+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. This pueblo is thought to have been one of the Seven Golden Cities of Cibola, which explorer Vasquez de Coronado sought. The <font color="red">red</font> sun symbol was then called a Ziaand is shown on a field of <font color="#FFB000">gold</font>. 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. 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 :


37

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 :


38

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


39

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.


40

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.


41

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


42

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


43

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 :


44

5. Buatlah kode HTML yang akan menampilkan keluaran seperti di bawah ini :


45

BAB 2 BASIS DATA


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 :


Berikut ini adalah gambaran umum dari materi yang akan dibahas pada bab ini :


46

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.


47

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

= Equal

<> or != (see

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


48

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


49

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 :


50

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)


51

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 :


52

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


53

02 Smith Bob

15 Lawson Patricia

21 Akins Jane

50 Fowler Sam

BarangAntik

NoPenj NoPemb Barang

01 50 Tempat Tidur

02 15 Meja

15 02 Kursi

21 50 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

Pesanan

NoPem Pes_Pem

02 Meja

02 Meja Kecil

21 Kursi

15 Cermin


54

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.


55

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 :


56

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 data-

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


57

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


58

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


59

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.


60

BAB 3 PHP


1. Siswa dapat menjelaskan pemrograman dengan PHP

2. Siswa dapat menjelaskan peranan web dinamis


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 :


2. TIK.PR02.028.01 Menerapkan dasar-dasar pembuatan web statik lanjut

3. TIK.PR04.003.01 Membuat halaman web dinamis lanjut


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 :


61

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.


62

3.2. Penginstalasian PHP 5

3.2.1. Meng-install PHP pada Windows

Pada Windows, Anda perlu memulai penginstalasian dengan cara men-

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


63

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

Files\Apache Group\Apache\conf jika Anda meng-install Apache pada

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 dokumen-dokumen pada instalasi ini adalah htdocs

(c:\Program Files\Apache 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 :


64

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


65

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


66

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


67

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


68

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-track-

vars

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.


69

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)


70

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

masing 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


71

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.


72

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 string-

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


73

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


74

• 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] => pisang [6] => pisang [7] => pisang [8] => pisang [9] => pisang [10] => 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");


75

array_unshift ($queue, "apple", "raspberry");

Akan menghasilkan :

Array ( [0] => apple [1] => raspberry [2] => orange [3] => 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

nilai di sisi kanan.

X += 2; identik

dengan X = X +

2;

2 -= Mengurangi variabel di sisi kiri dengan

nilai di sisi kanan.

X -= 2; identik

dengan X = X –

2;

3 /= Membagi variabel di sisi kiri dengan nilai

di sisi kanan.

X /= 2; identik

dengan X = X / 2;

4 %= Memperoleh sisa pembagian antara

variabel di sisi kiri dengan nilai di sisi

kanan.

X %= 2; identik

dengan X = X %

2;

5 .= Melakukan operasi konkatenasi terhadap

variabel di sisi kiri dengan nilai di sisi

kanan.

X .= “A”; identik

dengan X = X .

“A”;


76

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


77

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


78

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


79

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.

w Membuka file untuk menuliskan data, menghapus isinya, membuat file jika belum ada.

w+ Sama seperti mode w, tetapi dengan tambahan membaca ke file

tersebut.

x Membuat file untuk menuliskan data, kirimkan E_WARNING jika file

tersebut telah ada. x+ Sama seperti mode x, tetapi dengan tambahan membaca ke file.

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') {

// ...

}


80

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

1 fputs(file_handle, data)

Untuk merekam data ke file. Setelah data direkam, pointer file akan menunjuk ke posisi sesudah karakter terakhir yang ditulis. Fungsi akan mengembalikan nilai balik berupa TRUE jika data berhasil direkam atau FALSE jika data gagal direkam. Argumen file_handle diperoleh

ketika memanggil fopen().

2 fgets(file_handle, panjang)

Untuk membaca data yang terdapat di dalam file. Argumen panjang

menyatakan jumlah karakter yang hendak dibaca.

3 fgetc(file_handle)

Untuk membaca sebuah karakter dari file. Nilai balik yang diberikan berupa sebuah karakter yang sedang ditunjuk oleh pointer file. Pointer akan bergeser ke posisi karakter berikutnya setelah data dibaca.

4 feof(file_handle) Untuk memeriksa apakah pointer file

sedang menunjuk ke bagian akhir file atau tidak.


81

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


82

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 bernilai 10"; } elseif ($b == "8") { echo "b bernilai 8"; } else { echo "a 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 :


83

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 dan floating point number. Di dalam


84

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


85

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


86

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 Nilai

a Huruf kecil Ante meridiem dan Post meridiem am atau pm

A Huruf besar Ante meridiem dan Post

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 January hingga

December

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

m Representasi angka dari bulan dengan

awalan 0 01 hingga 12

M Representasi 3 digit dari nama bulan Jan hingga Dec

n Representasi angka dari bulan tanpa awalan

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


87

• 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


88

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 hanya pada kelas tertentu dimana ia


89

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>"); ?>


90

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>


91

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


92

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.


93

• 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" NAME="myradio" CHECKED VALUE="1"> Football<BR> <INPUT TYPE="radio" NAME="myradio" VALUE="2"> Soccer<BR> <INPUT TYPE="radio" NAME="myradio" VALUE="3"> Hockey<BR> <INPUT TYPE="radio" 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" NAME="mycheckbox1" CHECKED VALUE="1"> Football<BR> <INPUT TYPE="checkbox" NAME="mycheckbox2" VALUE="2"> Soccer<BR> <INPUT TYPE="checkbox" NAME="mycheckbox3" CHECKED VALUE="3"> Hockey<BR> <INPUT TYPE="checkbox" NAME="mycheckbox4" VALUE="4"> Baseball<BR>

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 :


94

• 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!');">


95

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 yang merambat, menghilangkan pesan

kesalahan, dan juga mencari kesalahan. Suatu kesalahan seringkali

menyebabkan browser menampilkan pesan kesalahan 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


96

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


97

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 password terhadap pemakai root. Perlu diketahui, root

merupakan pemakai dengan level tertinggi pada MySQL yang 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


98

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;


99

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 Fungsi-

fungsi 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


100

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

1 odbc_connect(nama_sumber_data,

nama_pemakai, password)

Untuk membuat sebuah koneksi ke

database dengan menggunakan

sebuah nama pemakai dan password

(bersifat pilihan). Fungsi ini

menghasilkan nilai balik bertipe

integer berupa pengenal hubungan ke

sumber data.

2 odbc_close(pengenal_hubungan)

Untuk menutup koneksi yang telah

dibuat dengan sumber data ODBC.

Argumen pengenal_hubungan

adalah nilai yang dihasilkan oleh odbc_connect().

3 odbc_close_all() Untuk menutup semua koneksi

dengan sumber data ODBC.

4 odbc_do(pengenal_hubungan,

string_query)

Untuk mengeksekusi

permintaan/perintah SQL yang

terdapat pada string_query

terhadap koneksi yang dinyatakan

dalam pengenal_hubungan.

5 odbc_exec(pengenal_hubungan,

string_query)

Merupakan nama alias dari odbc_do().

6 odbc_num_fields(pengenal_hasil)

Untuk memperoleh jumlah field yang

terdapat pada suatu hasil. Dalam hal

ini, pengenal_hasil adalah nilai

yang diperoleh dari fungsi odbc_do().


101

7 odbc_num_rows(pengenal_hasil)

Untuk memperoleh jumlah record yang terdapat pada suatu hasil. Dalam hal ini, pengenal_hasil

adalah nilai yang diperoleh dari fungsi odbc_do().

8 odbc_field_name(pengenal_hasil,

nomor_kolom)

Untuk memperoleh nama suatu kolom.

9 odbc_field_len(pengenal_hasil,

nomor_kolom)

Untuk memperoleh panjang suatu kolom.

10 odbc_field_type(pengenal_hasil,

nomor_kolom)

Untuk memperoleh tipe kolom.

11 odbc_fetch_row(pengenal_hasil,

nomor_baris)

Untuk memperoleh sebuah baris dari suatu himpunan hasil.

12 odbc_fetch_into(pengenal_hasil,

nomor_baris, array_filed)

Memiliki kegunaan seperti pada odbc_fetch_row() tetapi

hasilnya dikirimkan ke array.

13 odbc_result(pengenal_hasil,

kolom)

Untuk memperoleh nilai dari sebuah kolom pada baris saat ini.

14 odbc_result_all(nama_sumber_data

, nama_pemakai, password)

Untuk menampilkan semua baris 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 Keterangan

1 mysql_connect(host_name,

nama_pemakai, password)

Untuk membuat koneksi ke

database MySQL yang terdapat

pada suatu host. Fungsi ini


102

menghasilkan nilai balik berupa

nilai bertipe integer yang

menyatakan pengenal

hubungan dan digunakan

sebagai pengenal pada

berbagai fungsi berawalan mysql_.

2. mysql_close(pengenal_hubungan)

Untuk menutup koneksi ke

database MySQL. Argumen pengenal_hubungan

menyatakan pengenal yang

diperoleh dari pemanggilan

fungsi mysql_connect().

3 mysql_select_db(database,

pengenal_hubungan)

Untuk memilih database seperti

jika Anda menggunakan

perintah USE pada program

client mysql.

4 mysql_query(string_query,

pengenal_hubungan)

Untuk mengeksekusi

permintaan/ perintah SQL

terhadap sebuah/sejumlah

tabel.

5 mysql_db_query(database,

string_query, pengenal_hubungan)

Untuk menjalankan suatu

permintaan/perintah SQL

terhadap suatu database.

6 mysql_num_rows(pengenal_hasil)

Untuk memperoleh sejumlah

baris dari suatu hasil

permintaan/perintah SQL yang

menggunakan perintah

SELECT. Argumen pengenal_hasil

menyatakan nilai yang diperoleh

dari pemanggilan fungsi seperti

mysql_db_query() dan

mysql_query.

7 mysql_affected_rows

(pengenal_hubungan)

Untuk memperoleh jumlah baris

yang dikenai operasi INSERT,

DELETE, dan UPDATE.

8 mysql_num_fields(pengenal_hasil) Untuk memperoleh jumlah


103

kolom pada suatu hasil

permintaan/perintah SQL.

Argumen pengenal_hasil

menyatakan nilai yang diperoleh

dari pemanggilan fungsi seperti

mysql_db_query() dan

mysql_query.

9 mysql_fetch_row(pengenal_hasil)

Untuk menghasilkan suatu array

yang berisi seluruh kolom dari

sebuah baris pada suatu

himpunan hasil.

10 mysql_fetch_array(pengenal_hasil)

Fungsi ini memiliki kegunaan

yang serupa dengan

mysql_fetch_row(). Hanya

saja setiap kolom akan

disimpan dua kali pada array

hasil.

11 mysql_fetch_field(pengenal_hasil,

nomor_kolom)

Untuk memperoleh informasi

mengenai suatu kolom.

Argumen nomor_kolom

(bersifat opsional) menyatakan

nomor kolom yang informasinya

ingin didapatkan.

12 mysql_data_seek(pengenal_hasil,

nomor_baris)

Untuk memindahkan pointer

pada suatu himpunan hasil

supaya menunjuk ke baris

tertentu. Argumen

nomor_baris menyatakan

nomor baris yang ingin dituju.

13 mysql_field_seek(pengenal_hasil,

nomor_kolom)

Untuk memindahkan pointer

pada suatu himpunan hasil

supaya menunjuk ke kolom

tertentu. Argumen

nomor_kolom menyatakan

nomor kolom yang ingin dituju.

14 mysql_create_db(database,

pengenal_hubungan)

Untuk membuat database

MySQL. Argumen database

merupakan nama database


104

yang ingin dibuat.

15 mysql_drop_db(database,

pengenal_hubungan)

Untuk menghapus database

MySQL.

16 mysql_list_dbs(pengenal_hubungan) Untuk menghasilkan daftar

database MySQL.

17 mysql_list_tables(database,

pengenal_hubungan)

Untuk memperoleh daftar nama

tabel dalam suatu database.

18 mysql_list_fields(database,

nama_tabel, pengenal_hubungan)

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>


105

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">


106

<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


107

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]',


108

'$_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)


109

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


110

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


111

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:


112

5. Buatlah file PHP dengan koneksi basis data untuk menambahkan data

mahasiswa baru. Tabel yang sudah ada sebagai berikut :

NIM Nama Jurusan 12025031 Budi Santoso Akuntansi 12024832 Andrea Wilson Sastra Inggris

Setelah ditambahkan 2 (dua) data baru maka tabel akan menjadi seperti

berikut ini :

NIM Nama Jurusan 12025031 Budi Santoso Akuntansi 12024832 Andrea Wilson Sastra Inggris 12023033 Shanti Aliyah Ekonomi Pembangunan 12044732 Iwan Putra Teknik Mesin

Sedangkan tampilan awal dan akhirnya adalah :

Setelah data baru dimasukkan dalam basis data :


113


114

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


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 :


115

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 real-

time, 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!”); } }


116

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


117

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


118

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


119

} }

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 long. Long integer berkisar antara -

9,223,372,036,854,775,808 hingga 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 (/* */). Umumnya jika comment

tidak panjang simbol yang digunakan adalah // . Tetapi jika comment yang

ditulis panjang maka sebaiknya digunakan (/* */), seperti contoh dibawah ini :

/*

Dalam program ini, kita akan menghitung nilai dari sekumpulan koin.


120

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


121

Untuk kode diatas, file HTML yang dihasilkan dengan menggunakan javadoc


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

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

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


122

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 :


123

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 e l l 0 , W o r l d ! 0 1 2 3 4 5 6 7 8 9 10 11 12

Posisi karakter terakhir selalu 1 (satu) dikurangi panjang string.

b. Concatenation

Operasi string akan memisahkan string, tetapi operasi concatenation akan

menggabungkan string. Contohnya : ”white” dan ”house”, bisa

digabungkan menjadi sebuah string yang panjang dengan 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”.


124

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 Bit Nilai Contoh boolean 1 True atau false boolean a=true; char 16 ’\u0000’ hingga ’\uFFFF’ char a = ”a”; byte 8 -128 hingga +128 byte a = 10; short 10 -32708 hingga +32707 short a = 10; int 32 -2147483648 hingga +2147483647

long 64 -9223372036854775808647 hingga +9223372036854775807

float 32 Negatif : -340282347E+38 hingga -140120846E-45 Positif : 140129846E-45 hingga 340282347E-45

double 64 Negatif : -17976931348623157E+308 hingga -49406564584124654E-324 Positif 49406564594124654E-324 hingga

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 c[0] -45 c[1] 6 c[2] 0 c[3] 72 c[4] 1543 angka yang ada didalam c[5] -89 simbol [] adalah indeks c[6] 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[];


125

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


126

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


127

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;


128

} 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; } ….. }


129

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.


public void transfer(RekeningBank rb, double uang) {


130

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


131

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 paket-

paket, beberapa diantaranya ada di tabel 4.5.5.1 di bawah ini :

Tabel 4.5.5.1 : Paket dalam Library Java

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.*;

Paket Purpose Contoh Kelas java.util Utility Random java.io input dan output PrintStream java.awt Abstract Windowing Toolkit Color java.net Jaringan Socket javax.swing Swing User Interface Jbutton omg.org.CORBA objek terdistribusi ORB


132

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.


133

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.


134

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 java.applet.Applet; import java.awt.Graphics; import java.awt.Graphics2D; import 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.


135

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 :


136

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


137

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 java.applet.Applet; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.Rectangle; import java.awt.geom.Ellipse2D; import java.awt.geom.Line2D; import 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


138

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 :


139

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 java.applet.Applet; import java.awt.Graphics; import java.awt.Graphics2D; import 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 Nilai RGB Color.black 0.0F, 0.0F, 0.0F (#000000) Color.blue 0.0F, 0.0F, 1.0F Color.cyan 0.0F, 1.0F, 1.0F Color.gray 0.5F, 0.5F, 0.5F Color.darkGray 0.25F, 0.25F, 0.25F Color.lightGray 0.75F, 0.75F, 0.75F Color.green 0.0F, 1.0F, 0.0F Color.magenta 1.0F, 0.0F, 1.0F Color.orange 1.0F, 0.8F, 0.0F Color.pink 1.0F, 0.7F, 0.7F Color.red 1.0F, 0.0F, 0.0F (#FF0000) Color.white 1.0F, 1.0F, 1.0F (#FFFFFF) Color.yellow 1.0F, 1.0F, 0.0F

4.7 SWING

Setiap aplikasi grafis ditampilkan di frame window, lihat gambar 4.7.1.


140

Gambar 4.7.1 Frame Window

Sebuah frame window terdiri dari sebuah border dan title bar. Untuk

menampilkan frame, digunakan kelas JFrame yang berada 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


141

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


142

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


143

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


144

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 Description

Jlabel 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


145

// 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


146

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

ActionListener

AdjustmentListener

ComponentListener

ContainerListener

FocusListener

ItemListener

KeyListener

MouseListener

MouseMotionListener

TextListener

Java.util.EventListener

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.*;


147

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


148

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 :


149

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


150

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


151

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


152

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


153

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


154

• 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() ] );


155

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


156

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() +


157

", " + 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


158

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


159

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


160

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 Deskripsi FlowLayout Meletakkan komponen dari kiri ke kanan BorderLayout Layout standard pada java. Meletakkan komponen

pada posisi utara, timur, barat, selatan dan tengah GridLayout 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 ); }


161

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


162

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


163

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


164

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


165

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.


166

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.


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


167

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.


168

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


169

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 JDBC dapat diperoleh dari url

http://www.microsoft.com/sql/downloads. Langkah awal untuk 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


170

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 :


171

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


172

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


173

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


174

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 :


175

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+"'";


176

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 + "'," +


177

"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


178

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


179

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


180

4.10 JavaServer Page (JSP) Untuk 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 perintah-

perintah 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


181

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 session="false" %> <%@ page import="java.io.*" %> <%@ page import="java.text.*" %> <%@ page 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/.


182

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 :


183

<%@ 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” %>


184

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


185

%> </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 Celcius 32 .000 52 11.111 72 22.222 92 33.333 112 44.444 132 55.556 152 66.667 172 77.778 192 88.889 212 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.

186

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


187

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 java.util.*; import javax.servlet.*; import javax.servlet.http.*; import javax.servlet.jsp.*; import org.apache.jasper.runtime.*;


188

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


189

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


190

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

getComment() Mengembalikan comment yang menjelaskan tujuan dari 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

setMaxAge(int) Mengeset umur dari cookie. Cookie akan berakhir setelah umur terlewati.

setPath(String) Cookie akan muncul hanya jika ada permintaan yang 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>


191

</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 akan digunakan untuk mengeset nilai cookies (setcookie.jsp)

<%@ 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; } } } %>


192

<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 ke session user dengan fungsi


193

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)


194

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 e-Technology 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>


195

</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


196

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


197

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 <url-pattern> 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>


198

<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


199

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. Dokumentasi program java yang dapat dilihat di web browser

a. Encupsulation

2. Method yang tidak membutuhkan implicit parameter

b. javac hello.java

3. Perintah untuk menggunakan driver SQL

c. static

d. Class.forName();

e. javadoc

Soal Praktek

4. Buatlah program java yang menghasilkan output seperti di bawah ini :


200

5. Buatlah program java yang melakukan pengurutan angka. Contoh keluarannya



201

BAB 5 ASP dan ASP .NET


1. Siswa dapat menjelaskan cara Pemrograman Web ASP dan ASP .NET 2. Siswa dapat menggunakan basis data dengan ASP .NET


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



202

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 computer-

based 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


203

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.


204

Jika Anda berniat untuk membuat aplikasi berbasis web yang memerlukan

database, maka Anda harus menginstall MDAC >= 2.7, yang dapat di-

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


205

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.


206

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:


207

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


208

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 fitur-

fitur 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


209

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:


210

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


211

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:

Setelah membuat file, Anda dapat menyimpannya dengan extension .aspx

dalam folder yang Anda pilih:

<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 far-reaching 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>


212

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.


213

Gambar 5.2.3.2 Hasil Keluaran

5.3 Pemrograman ASP .NET Dan ASP

ASP .NET

5.3.1 User Control

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


214

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 item-

item 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


215

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.


216

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.

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

<%@ Control Language="VB" %>


217

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>


218

<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


219

// 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


220

' 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>


221

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.


222

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% hits. Halaman banners.asp akan menerima


223

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 Deskripsi Contoh Border Menentukan

ukuran border disekitar iklan.

<% set adrot=Server.CreateObject("MSWC.AdRotator") adrot.Border="2" Response.Write(adrot.GetAdvertisement("ads.txt")) %>

Clickable Menentukan apakah ilkan berupa hyperlink.

<% set adrot=Server.CreateObject("MSWC.AdRotator") adrot.Clickable=false Response.Write(adrot.GetAdvertisement("ads.txt")) %>

TargetFrame Nama frame yang menampilkan iklan.

<% set adrot=Server.CreateObject("MSWC.AdRotator") adrot.TargetFrame="target='_blank'" Response.Write(adrot.GetAdvertisement("ads.txt")) %>

Tabel 5.3.7.2 : Methods Komponen AdRotator

Method Deskripsi Contoh GetAdvertisement

Mengembalikan HTML yang menampilkan iklan. Returns HTML that

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


224

<% 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

225

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 halaman-

halaman 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


226

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 Deskripsi Contoh GetListCount Mengembalikan

jumlah item yang terdaftar di file Content Linking List

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

There are 4 items in the list GetListIndex Mengembalikan

jumlah index dari item yang ada di file Content Linking 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 GetNextDescription

Mengembalikan deskripsi dari item selanjutnya yang ada di file Content Linking List.

<% dim nl,c Set nl=Server.CreateObject("MSWC.NextLink") c=nl.GetNextDescription("links.txt") Response.Write("Next ") Response.Write("description is: ") Response.Write(c) %>

Next description is: MadeLine’s list of Clothes

GetNextURL Mengembalikan URL dari item selanjutnya yang ada di file Content Linking List

<% dim nl,c Set nl=Server.CreateObject("MSWC.NextLink") c=nl.GetNextURL("links.txt")


227

Response.Write("Next ") Response.Write("URL is: ") Response.Write(c) %>

Next URL is: MadeLine_clothes.asp GetNthDescription Mengembalikan

deskripsi dari halaman ke-N yang terdaftar di file Content Linking List.

<% 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 description is: MadeLine’s list of Clothes

GetNthURL Mengembalikan URL dari halaman ke-N yang terdaftar di file Content Linking List

<% dim nl,c Set nl=Server.CreateObject("MSWC.NextLink") c=nl.GetNthURL("links.txt",3) Response.Write("Third ") Response.Write("URL is: ") Response.Write(c) %>

Third URL is: MadeLine_clothes.asp GetPreviousDescription

Mengembalikan deskripsi teks dari item sebelumnya yang terdaftar di file Content Linking List.

<% 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

GetPreviousURL Mengembalikan URL dari item sebelumnya yang terdaftar di file Content Linking List.

<% dim nl,c Set nl=Server.CreateObject("MSWC.NextLink") c=nl.GetPreviousURL("links.txt") Response.Write("Previous ") Response.Write("URL is: ") Response.Write(c) %>


228

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")) %>


229

</body> </html>

Method-method ada di komponen ini adalah :

Tabel 5.3.7.4 : Method Komponen Content Rotator

Method Deskripsi Contoh

ChooseContent Mendapatkan dan menampilkan content string

<% dim cr Set cr=Server.CreateObject("MSWC.ContentRotator") response.write(cr.ChooseContent("text/textads.txt")) %>

Output:

GetAllContent Mengakses

dan menampilkan semua content string di file teks

<% dim cr Set cr=Server.CreateObject("MSWC.ContentRotator") response.write(cr.GetAllContent("text/textads.txt")) %>

Output:

This is a great day!!

Smile

Here's a link.

5.4 Cookies and Session

5.4.1 Membuat Cookies


230

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 di-

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


231

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:

Collection Deskripsi

contents Berisi daftar item yang ditambahkan ke session melalui skrip

ASP.


232

Staticobjects Berisi daftar objek yang ditambahkan ke session melalui tag

<OBJECT>

Method Deskripsi

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.

Event Deskripsi

onstart Kejadian saat aplikasi aktif untuk pertama kali, yaitu saat user

pertama masuk ke dalam aplikasi.

onend Kejadian saat keluar dari aplikasi.

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


233

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:

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

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)


234

Membaca nilai suatu subkey dalam cookie sama seperti cara untuk

membuatnya. Dibawah ini adalah contoh untuk mendapatkan nilai dari

subkey:

Jika Anda ingin menggunakan nilai “lastVisit” sebagai data tanggal, Anda

harus melakukan convert.

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" %>

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

Dim dt As DateTime dt = CDate(Request.Cookies("userInfo")("lastVisit"))


235

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


236

(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"


237

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 masing-

masing 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>


238

<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


239

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 command-

line.

• 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 digunakan dengan antarmuka Windows untuk


240

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.

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.

<%@ Page Trace="true" %>


241

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 Services (IIS) menyediakan fungsi-fungsi untuk

mengaplikasikan teknik pengamanan terhadap web site Anda. 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

Security

Deskripsi

Authentication Membantu untuk verifikasi bahwa pengguna yang

menggunakan aplikasi tersebut adalah pengguna yang

<%@ Page Language="VB" Trace="True" TraceMode="SortByCategory" %>


242

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 role-

based 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


243

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.


244

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.

2. Set atribut forms authentication

a. Set atribut loginUrl pada “logon.aspx”. Logon.aspx adalah URL

untuk digunakan jika ASP .NET tidak menemukan authentication

cookie dengan

request.

b. Set nama suffix cookie

3. Cegah pengguna yang tidak memiliki authentication untuk mengakses

directory ini.

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

mail dan password tersebut kemudian dibandingkan dengan kode yang

telah di-hard code pada statement if. Jika perbandingan sama, maka

<configuration> <system.web>

<authentication mode="Forms">

<forms

loginUrl = "logon.aspx"

name = ".ASPXFORMSAUTH"/>

</authentication> <authorization> <deny users="?"/> </authorization>

</system.web> </configuration>


245

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

2. Set script language

3. Buat event handler Logon-Click untuk handle event Submit

4. A

u

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

<%@ Import Namespace="System.Web.Security" %>

<html> [Visual Basic] <script language=”VB” runat=server> [C#] <script language=”C#” runat=server>

[Visual Basic] Sub Logon_Click(sender As Object, e As EventArgs) [C#] Sub Logon_Click(Object sender, EventArgs e) {


246

else { Msg.Text = “Invalid E-Mail Name or Password: Please try again.”; } } </script>

5. Tampilkan form untuk mendapatkan informasi logon

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 \-\.]+)@((\[[0-9]{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

<body> <form runat=server>

<h3><font face=”Verdana”>Logon Page</font></h3> <table> <tr>

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


247

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.

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” Font-Name=”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>

<td>Persistent Cookie:</td> <td><ASP:CheckBox id=Persist runat=”server” autopostback=”true”/> </td> <td></td>

</tr> </table>


248

<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,


249

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">


250

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


251

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 Deskripsi Cookies Menentukan nilai cookies. Jika cookie tidak ada, maka akan

dibuat terlebih dahulu dan mengambil nilai dari cookie tersebut.

Tabel 5.8.2 : Properties

Property Description Buffer Menentukan apakah hendak menamping keluaran atau tidak. CacheControl Menentukan apakah proxy server dapat menampung

keluaran dari ASP di cache. Charset Menambahkan nama dari character-set ke content-type

header pada response object. ContentType Menentukan HTTP content type untuk response object. Expires Menentukan lamanya (dalam menit) sebuah halaman akan

ditampung di cache browser sebelum halaman tersebut expired.

ExpiresAbsolute Menentukan tanggal dan waktu expires dari halaman yang ditampung di cache.

IsClientConnected Menandakan bahwa client tidak terkoneksi dengan server Pics Menambahkan nilai ke label PICS response header Status Menentukan nilai dari statis line yang dikembalikan server.

Tabel 5.8.3 : Methods

Method Description AddHeader Menambah HTTP heade yang baru dan nilai untuk HTTP

response. AppendToLog Menambahkan string diakhir log server. BinaryWrite Writes data directly to the output without any character


252

conversion Menulis data Clear Membersihkan buffer keluaran HTML End Berhenti memproses script dan mengembalikan hasil proses Flush Mengirimkan keluaran HTML yang ditampung secepatnya Redirect Mengalihkan user ke URL yang berbeda. Write Menuliskan string tertentu sebagai keluaran

5.9 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 Description ClientCertificate Mengandung semua nilai field yang disimpan dalam

sertifikasi client Cookies Mengandung semua nilai cookie yang dikirim dengan HTTP

request Form Mengandung semua nilai form yang menggunakan method

POST QueryString Mengandung semua nilai variabel di HTTP query string ServerVariables Mengandung semua nilai variable server

Tabel 5.9.2 : Properties

Property Description TotalBytes Mengembalikan total byte yang dikirimkan client di dalam

request

Tabel 5.9.3 : Methods

Method Description BinaryRead 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


253

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


254

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


255

Berikut ini adalah properti, method dan event dari objek Connection :

Tabel 5.10.1 : Properti Objek Connection

Properti

Keterangan

Attributes Mengeset atau mengembalikan atribut dari objek Connection CommandTimeout Mengeset atau mengembalikan waktu (dalam detik) untuk

menunggu sebuah perintah dieksekusi ConnectionString Mengeset atau mengembalikan detail yang digunakan untuk

membuat koneksi ke sumber data ConnectionTimeout Mengeset atau mengembalikan waktu (dalam detik) untuk

menunggu koneksi terbuka CursorLocation Mengeset atau mengembalikan lokasi dari servis DefaultDatabase Mengeset atau mengembalikan nama basis data default IsolationLevel Mengeset atau mengembalikan level isolasi Mode Mengeset atau mengembalikan provider access permission Provider Mengeset atau mengembalikan nama provider State Mengembalikan nilai yang menandakan bahwa koneksi telah

terbuka atau tertutup Version Mengembalikan angka versi ADO

Tabel 5.10.2 : Method Objek Connection

Method Keterangan BeginTrans Memulai transaksi baru Cancel Membatalkan eksekusi perintah Close Menutup koneksi CommitTrans Menyimpan segala perubahan dan mengakhiri transaksi yang

sedang berlangsung Execute Mengeksekusi sebuah query, statement, prosedur atau provider

teks tertentu Open Membuka koneksi OpenSchema Mengembalikan schema informasi dari provider mengenai sumber

data RollbackTrans 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 Keterangan BeginTransComplete Terpicu setelah operasi BeginTrans CommitTransComplete Terpicu setelah operasi CommitTrans ConnectComplete Terpicu setelah koneksi dimulai Disconnect Terpicu setelah koneksi berakhir ExecuteComplete Terpicu setelah sebuah perintah selesai dieksekusi InfoMessage Terpicu jika ada peringatan yang muncul selama operasi

ConnectionEvent berlangsung RollbackTransComplete Terpicu setelah operasi RollbackTrans WillConnect Terpicu sebelum koneksi dimulai WillExecute Terpicu sebelum sebuah perintah dieksekusi


256

Tabel 5.10.4 : Koleksi Objek Connection

Koleksi Keterangan Errors Mengandung semua objek error dari objek Connection Properties 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 Keterangan ActiveConnection Mengeset atau mengembalikan definisi dari koneksi apabila

koneksi tertutup atau objek Connection yang berlangsung jika koneksi terbuka

CommandText Mengeset atau mengembalikan provider command CommandTimeout Mengeset atau mengembalikan waktu (dalam detik) untuk

menunggu selama perintah dieksekusi CommandType Mengeset atau mengembalikan tipe dari objek Command Name Mengeset atau mengembalikan nama objek Command Prepared Mengeset atau mengembalikan nilai Boolean dimana jika bernilai

true maka command harus menyimpan versi dari query yang belum dieksekusi

State Mengembalikan nilai yang menggambarkan objek Command yang terbuka, tertutup, mengeksekusi atau mengakses data

Tabel 5.10.6 : Method Objek Command

Method Keterangan Cancel Membatalkan eksekusi dari sebuah method CreateParameter Membuat sebuah objek Parameter Execute Mengeksekusi query, perintah SQL atau prosedur pada property

CommandText

Tabel 5.10.7 : Koleksi Objek Command

Koleksi Keterangan


257

Parameters Mengandung semua objek Parameter dari objek Command Properties 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


258

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 Contactname Alfreds Futterkiste Maria Anders

2. Menambah data

Kita akan menambah record baru ke tabel Customer pada basis data

Northwind. Pertama kita membuat sebuah form yang mengandung field-

field 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>


259

</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


260

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"


261

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>


262

<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") & "',"


263

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.


264

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.SetCacheability(HttpCacheability.Private);

• Proxy Server Cache


Response.Cache.SetCacheability(HttpCacheability.Public);

Response.Cache.SetNoServerCaching();

• Server Caching


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.


265

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 fungsi. Mengikutsertakan atribut

VaryByCuston dan mendefinisikan ulang

HttpApplication.GetVaryByCustomString di file 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


266

• 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


267

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.


268

BAB 6 Javascript


1. Siswa dapat menggunakan Javascript pada aplikasi web

2. Siswa dapat menggabungkan javascript dengan HTML


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 :



6.1 Pemrograman Javascript


269

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 Variabel dan Tipe Data

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


270

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;


271

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 Contoh Hasil + Penambahan (addition) x=2

y=2 x+y

4


272

- 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


273

=== 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 tambahan untuk comparison operators, yang dapat

digunakan untuk nilai string, concatenation operator (+)

menggabungkan dua string, menghasilkan string lain yang berasal

dari penggabungan dua operan string.

Tabel 6.1.4.5 : String Operators

Operator Deskripsi Contoh Hasil + Penambahan string

(menggabungkan dua strings) a=”2” b=”2”

a+b=“22”

f. Conditional Operator

Javascript menyediakan conditional operator yang menyatakan nilai

variable berdasarkan kondisi tertentu. Conditional operator


274

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 Penggunaan Deskripsi Bitwise AND a & b Returns a one in each bit position for

275

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.

Sign-propagating 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">  </script> </body>

Hasil keluarannya:


276

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;


277

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 0-59)

getSeconds() Mengembalikan nilai detik dari objek date (dari 0-59)

getMilliseconds() Mengembalikan nilai milidetik dari objek date (dari 0-999)

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


278

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 0-999)

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


279

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


myDate.setFullYear(2010,0,14)

Contoh berikut menunjukkan objek date yang dinyatakan untuk 5 hari ke

depan:


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.

280

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">  </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)


281

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.


282

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 dan fungsi sinus sebagai Math.sin(x), dimana x

merupakan argumen dari metode. Konstanta didefinisikan 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 Deskripsi abs(x) Mengembalikan nilai absolut dari suatu bilangan acos(x) Mengembalikan arckosinus dari suatu bilangan asin(x) Mengembalikan arcsinus dari suatu bilangan


283

atan(x) Mengembalikan arctangen dari x sebagai nilai bilangan antara -PI/2 dan PI/2 radian

atan2(y,x) Mengembalikan sudut theta dari titik (x, y) sebagai nilai bilangan antara –PI dan PI radian

ceil(x) Mengembalikan nilai dari suatu bilangan yang dibulatkan ke atas menuju nilai integer terdekat

cos(x) Mengembalikan cosinus dari bilangan tertentu exp(x) Mengembalikan nilai dari Ex floor(x) Mengembalikan nilai dari suatu bilangan yang

dibulatkan ke bawah menuju nilai integer terdekat log(x) Mengembalikan logaritma natural (basis E) sebagai

suatu bilangan max(x,y) Mengembalikan suatu angka dengan mengambil nilai

terbesar antara x dan y min(x,y) Mengembalikan suatu angka dengan mengambil nilai

terkecil antara x dan y pow(x,y) Mengembalikan nilai dari x pangkat y (xy

)

random() Mengembalikan angka acak antara 0 dan 1 Returns a random number between 0 and 1

round(x) Membulatkan angka menuju integer terdekat Rounds a number to the nearest integer

sin(x) Mengembalikan sinus dari suatu bilangan Returns the sine of a number

sqrt(x) Mengembalikan akar dari suatu bilangan Returns the square root of a number

tan(x) Mengembalikan nilai tangen dari suatu sudut Returns the tangent of an angle

toSource() Menyatakan sebagai source code dari suatu objek Represents the source code of an object

valueOf() 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 Deskripsi constructor Referensi untuk fungsi yang menciptakan objek E Mengembalikan konstanta Euler (kurang lebih 2.718) LN2 Mengembalikan logaritma natural dari 2 (kurang lebih

0.693) LN10 Mengembalikan logaritma natural dari 10 (kurang lebih

2.302) LOG2E Mengembalikan logaritma basis 2 dari E (kurang lebih

1.442) LOG10E Mengembalikan logaritma basis 10 dari E (kurang lebih

0.434) PI Mengembalikan PI (kurang lebih 3.14159) prototype Memperbolehkan untuk menambah properti dan

metode ke dalam objek SQRT1_2 Mengembalikan akar dari 1/2 (kurang lebih 0.707) SQRT2 Mengembalikan akar dari 2 (kurang lebih 1.414)


284

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.


285

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:


286

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

defaultStatus Menetapkan pesan untuk ditampilkan di status bar ketika tidak ada yang ditampilkan, seperti pesan selamat datang atau instruksi untuk pengunjung

frames[] Menyimpan array dari semua frame pada window saat itu

history Menyimpan informasi dari URL yang dikunjungi oleh client dalam satu window

innerHeight Menentukan dimensi secara vertikal dari area isi window, dalam pixel

innerWidth Menentukan dimensi secara horisontal dari area isi window, dalam pixel

length Banyak frame dalam satu window (dalam Integer) location Menampung informasi dari URL saat itu (dalam

Object) locationbar Menyatakan location bar dari browser suatu window menubar Menyatakan menu bar dari browser suatu window name Menyimpan nama dari window opener Digunakan dalam pop up window. Jika window

dibuka oleh pengguna, maka akan mengembalikan nilai null (maksudnya window tidak dibuka oleh suatu script)

outerHeight Menentukan dimensi secara vertical dari batas luar window, dalam pixel

outerWidth Menentukan dimensi secara horisontal dari batas luar window, dalam pixel

parent Digunakan dalam frame, menunjuk pada frameset dari suatu window atau frame yang mengandung frame saat ini.

personalbar Menyatakan personal bar (disebut juga directories bar) dari browser suatu window

scrollbars Menyatakan scroll bars dari browser suatu window self Objek window saat ini status Menyimpan nilai dari teks pada status bar dari

browser window statusbar Menyatakan status bar dari browser suatu window toolbar Menyatakan tool bar dari browser suatu window top Digunakan dengan frame. Menunjuk pada window

yang paling atas pada frameset window Objek window saat ini (sinonim dari properti self)

6.3.2 Metode Metode adalah sebuah fungsi yang berhubungan dengan sebuah

objek. Metode memberikan perintah kepada objek, seperti dapat


287

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 Deskripsi alert() Membuka popup window yang menampilkan

pesan kepada pengunjung back() Mengulangi (undo) langkah terakhir pada frame

apapun dalam window tingkat atas blur() Memindahkan window ke background, di

belakang window utama captureEvents() Menentukan window atau dokumen untuk

menangkap semua events pada tipe tertentu close() Menutup windows confirm() Memberikan perintah untuk membuka window

konfirmasi untuk pengunjung find() Menemukan string teks tertentu pada isi dari

window tertentu focus() Memindahkan window ke foreground, ke tingkat

paling atas dari yang lain. forward() Menampilkan URL selanjutnya yang terdapat

pada daftar history handleEvent() Memanggil handler untuk event tertentu home() Mengembalikan browser ke URL tertentu yang

bertindak sebagai home page dari pengguna moveBy() Digunakan untuk memindahkan window ke lokasi

baru dari layar. Window ini dipindahkan sejauh sejumlah pixel di dalam parameter pada method

moveTo() Digunakan untuk memindahkan window ke lokasi tertentu di dalam layar, berguna untuk menempatkan window baru ke lokasi tertentu pada layer

open() Membuka window baru print() 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

prompt() Membuka popup window yang menampilkan prompt agar pengunjung memasukkan suatu informasi

releaseEvents() Menentukan window menjadi event yang ditangkap dari tipe tertentu, mengirim event pada objek pada hierarki event

resizeBy() Mengubah ukuran window yang ada berdasarkan parameter yang ditetapkan


288

resizeTo() Mengubah ukuran window tertentu menjadi ukuran yang sesuai dengan parameter yang diberikan

routeEvent() Melalui event yang diambil di sekitar hierarki event biasa

scroll() Menggulung window ke koordinat tertentu scrollBy() Menentukan jarak scroll dokumen pada window

(dalam pixel) scrollTo() Menetapkan dokumen pada kedudukan tertentu,

dengan jumlah pixel yang ditentukan dalam parameter suatu metode

setInterval() Menjalankan suatu fungsi pada interval tertentu secara berulang kali

clearInterval() Menghentikan ulangan (loop) waktu yang dimulai dari metode setInterval() diatas

setTimeout() Menjalankan fungsi Javascript setelah beberapa waktu tertentu yang telah ditentukan

clearTimeout() Menghapus interval waktu dengan metode setTimeout(). Berjalan bersama dengan clearInterval

stop() 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


289

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.


290

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


291

"__________________________________________________\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. -->

292

<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


293

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:

URL dari halaman yang akan dibuka (wajib ada, walaupun

hanya berupa string kosong)

Nama dari window yang akan menampilkan halaman

Properti dari window

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


294

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 Nilai Deskripsi height integer 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

width integer 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.

copyHistory yes|no Menyalin sejarah objek dari window pada window baru.

directories yes|no Menampilkan tombol directory. location yes|no Menampilkan location bar menubar yes|no Menampilkan menu bar. status yes|no Menampilkan status bar. toolbar yes|no Menampilkan toolbar. resizeable yes|no 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

scrollable yes|no Apakah window dapat digulung (scrollable).

top integer Menentukan lokasi diukur dari atas posisi window, dalam pixel. Beberapa browser tidak memperbolehkan mengambil posisi yang keluar dari layar.

left integer Menentukan seberapa jauh lokasi diukur dari kiri layar dari posisi window, dalam pixel. Beberapa browser tidak memperbolehkan mengambil posisi yang keluar dari layar.


295

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


296

// 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


297

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.


298

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:


299

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


300

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>


301

Tags <frameset> menentukan bagaimana frame dirancang untuk

ditampilkan pada layar. Tags ini mempunyai dua atribut untuk

merancang hal tersebut, yaitu cols dan rows. Atribut cols menentukan

bagaimana membagi kolom dalam layar, dan rows menentukan

bagaiman membagi baris ke dalam layar. 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, masing-

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


302

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.


303

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.


304

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 bermacam-

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


305

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 TYPE=checkbox>

"checkbox" Sebuah toggle-button tanpa perilaku radio-button; onClick().

FileUpload <INPUT TYPE=file>

"file"

Sebuah field untuk input untuk memasukkan nama dari file untuk di-upload ke web server; onChange().

Hidden <INPUT TYPE=hidden>

"hidden"

Data dikirim bersama dengan form tetapi tidak terlihat oleh pengguna; tidak ada event handler.

Option <OPTION> none

Sebuah item dalam objek Select; event handler dari objek Select, bukan objek Option sendiri.

Password <INPUT TYPE=password>

"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> "select-one"

Daftar atau drop-down menu dari salah satu pilihan yang dapat dipilih; onChange().

Select <SELECT MULTIPLE>

"select-multiple"

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


306

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


307

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


308

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]


309

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/cgi-bin/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


310

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


311

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!");


312

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


313

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.


314

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 :


315

Setelah mengisi pertanyaan dan memilih tombol OK, maka akan keluar

tampilan :

Jawaban Soal Bab 1:

1. a 2. b 3. c 4. Kode :

316

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


317

.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> </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> </td> <td width="7%"> </td> <td width="57%"> </td> </tr> <tr> <td> </td> <td> </td> <td> </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>


318

</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"> </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


319

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"> </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> </td> <td> </td> <td> </td> <td> </td> <td><input type="submit" name="Submit" value="Hitung!"></td> </tr> </table> </form> </body> </html>

5. Kode :

<? if(isset($_POST['Submit'])) {


320

$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> </td> <td> </td> <td><input type="submit" name="Submit" value="Tambah"></td> </tr> </table>


321

</form> </body> </html>

Bab 4:

1. e

2. c

3. d

4. Kode :

import javax.swing.*; import javax.swing.border.*; import java.awt.event.*; import java.awt.*; import 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");


322

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;


323

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>


324

</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>


325

</head> <body> <form> <input type="button" onclick="disp_prompt()" value="Input Button"> </form> </body> </html>


326

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-logical-

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


327

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 - dinus.ac.iddinus.ac.id/repository/docs/ajar/webprogramming.pdf · 5.6...

Documents

Transcript of LSP Telematika Indonesia - dinus.ac.iddinus.ac.id/repository/docs/ajar/webprogramming.pdf · 5.6...