Web Programming

LSP Telematika Indonesia
Daftar Isi
Daftar Isi ..................................................................................................1 Kata Pengantar..........................................................................................3 BAB I HTML ............................................................................................5 1.1 World Wide Web.............................................................................6 1.2 Pengenalan HTML ...........................................................................7 1.3 Tag ..............................................................................................7 1.4 Editor HTML................................................................................. 11 1.5 Format Teks ..................................................................................9 1.6 Gambar ...................................................................................... 23 1.7 Tabel .......................................................................................... 28 1.8 Frame......................................................................................... 29 1.9 Tag Logika .................................................................................. 33 1.10 Cascading Style Sheet ................................................................... 39 Soal Latihan........................................................................................ 43 Soal Praktek ....................................................................................... 43 BAB 2 BASIS DATA................................................................................. 45 2.1 Terminologi ................................................................................... 46 2.2 Memanipulasi Data dari Tabel........................................................... 46 2.3 Menggabungkan Tabel .................................................................... 52 2.4 Menghilangkan Record yang Sama.................................................... 54 2.5 Subquery ...................................................................................... 54 2.6 Data Definition Language (DDL) ....................................................... 55 2.7 View............................................................................................. 56 2.8 Stored Procedure dan Trigger........................................................... 57 2.9 Fungsi Aggregasi ............................................................................ 58 Soal Latihan ........................................................................................ 58 Soal Praktek ............................................... Error! Bookmark not defined. BAB 3 PHP ............................................................................................. 60 3.1 Pengenalan PHP ............................................................................. 61 3.2. Penginstalasian PHP 5 ..................................................................... 62 3.3. Variabel, Tipe Data, dan Operator..................................................... 69 3.4 Pemrograman PHP.......................................................................... 77 3.5 Paket, Modul, Kelas, dan Objek ........................................................ 87 3.6 Form dan Kontrol ........................................................................... 90 3.7 Program Debugging ........................................................................ 95 3.8 Pemrograman Database .................................................................. 97 3.9 Membangun Aplikasi Database ....................................................... 104 Soal Latihan....................................................................................... 110 Soal Praktek ...................................................................................... 111 BAB 4 JAVA ......................................................................................... 114 4.1 Sekilas Mengenai Java ................................................................ 115 4.2 Program Java............................................................................. 115 4.3 Proses Kompilasi ........................................................................ 117 4.4 Tipe Data Dalam Java ................................................................. 118 4.5 Method, Variabel dan Kelas .......................................................... 125 4.7 Applet....................................................................................... 133 4.7 SWING ..................................................................................... 139 4.8 Pemrograman Jaringan ............................................................... 165 4.9 JDBC API................................................................................... 169 4.10 JavaServer Page (JSP)................................................................. 180
Soal Latihan....................................................................................... 199 Soal Praktek ...................................................................................... 199 BAB 5 ASP dan ASP .NET....................................................................... 201 5.1 Pengenalan .NET ........................................................................ 202 5.2 Pengenalan ASP and ASP .NET ..................................................... 202 5.3 Pemrograman ASP .NET Dan ASP.................................................. 213 5.4 Cookies and Session ................................................................... 229 5.5 Trace and Debugging .................................................................. 238 5.6 Keamanan Aplikasi Web .............................................................. 241 5.7 Membuat Aplikasi Web Yang Dinamis ............................................ 248 5.8 ASP Response Object .................................................................. 251 5.9 ASP Request Object .................................................................... 252 5.10 ASP Server Object ...................................................................... 253 5.11 ActiveX Data Object (ADO) .......................................................... 254 Soal Latihan....................................................................................... 266 Soal Praktek ......................................................................................................... 267 Bab 6 Javascript.....268 6.1 Pemrograman Javascript .............................................................. 268 6.2 Dates dan Math........................................................................... 276 6.3. Objek Window ............................................................................ 284 6.4. Objek Dokumen .......................................................................... 297 6.5. Bekerja dengan Frame ................................................................. 300 6.6. Validasi Data untuk Form ............................................................. 304 Soal Latihan....................................................................................... 313 Soal Praktek ............................................... Error! Bookmark not defined. Jawaban Soal ........................................................................................ 315 Daftar Pustaka........................................................................................326
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 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 9. TIK.PR02.005.01 10. TIK.PR02.006.01 11. TIK.PR02.009.01 12. TIK.PR02.010.01 13. TIK.PR02.012.01 Membuat program aplikasi web berbasis PHP Menulis program dasar Menulis program lanjut Mengoperasikan bahasa pemrograman berorientasi obyek Menggunakan library atau komponen-komponen preexiting Mengkompilasi dan menjalankan sebuah aplikasi di internet. Adapun materi-materi dalam buku ini memenuhi standarisasi Teknologi Informasi Indonesia bidang keahlian Programmer antara
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 widodo@lsp-telematika.or.id.
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 :
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 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. resource lain (komputer, dokumen atau lainnya) dalam jaringan melaui nama yang
1.2 Pengenalan HTML

HTML ( Hypertext Markup Language) adalah bahasa yang digunakan untuk menampilkan informasi di web browser. Dibuat oleh Tim berners-Lee, yang selanjutnya internasional dikembangkan lebih lanjut hingga mempunyai standarisasi ( ISO / IEC 15445 : 20000 ). Pada saat ini spesifikasi dari HTML W3C mendefinisikan HTML
diatur oleh world wide web consortium ( W3C ).
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 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 : src=logo.gif alt=LSP telematika height=100
Gambar 1.3.1 Struktur tag HTML
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 2.0 3.2 4.0 Transitional 4.0 Frameset 4.0 Strict 4.01 Transitional 4.01 Frameset 4.01 Strict XHTML Transitional XHTML 1.0 Strict XHTML Frameset 1.0 1.0 <!DOCTYPE //EN">
Deklarasi <!DOCTYPE> HTML PUBLIC "-//IETF//DTD HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> <!DOCTYPE 4.0//EN"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"> HTML PUBLIC "-//W3C//DTD HTML
<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 (metainformation). 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.
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 <b> T es Sp 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 si<b> s S p a s i</b>
10
5. Setiap tag mempunyai tag penutup, contoh : tag <hr> tidak memiliki tag penutup untuk itu pasangan dari <hr> adalah <hr />. 6. Penulisan tag dengan huruf kecil.
1.4 Editor HTML

Editor untuk membuat file HTML banyak tersedia, diantaranya Notepad, Microsoft Frontpage dan Macromedia Dreamweaver. Pada buku ini akan dijelaskan penulisan kode HTML di editor notepad, Microsoft frontpage dan Dreamweaver.
1.4.1
Notepad
Notepad merupakan editor yang paling sederhana Pada editor ini, kode HTML harus dituliskan satu demi satu kemudian hasilnya disimpan dengan ekstension .html atau .htm.
Gambar 1.4.1.1 Kode HTML di Editor Notepa
11
1.4.2
Microsoft Frontpage
Microsoft frontpage merupakan editor keluaran Microsoft untuk membuat website. Editor ini akan mempermudah orang-orang yang akan membuat kodekode HTML karena editor ini telah menyediakan icon serta menu yang akan menampilkan kode tag HTML, sehingga kode tidak perlu ditulis satu-demi satu tapi tetap dapat diubah sesuai keinginan penulis kode.
Gambar 1.4.2.1 Gambar Kode HTML di Editor Microsoft Frontpage
Untuk melihat tampilan di web browser dari kode yang telah dibuat editor microsoft frontpage menyediakan Preview. Beberapa contoh web browser untuk mengakses web adalah internet explorer keluaran microsoft, firefox, netscape dan opera.
1.5 Format Teks

Dalam penulisan teks ada struktur tertentu, misalnya untuk penulisan judul digunakan huruf yang tebal, tulisan dalam bentuk paragraf dan lain sebagainya. HTML mendukung penformatan teks dengan menyediakan tag-tag untuk itu. Beberapa diantaranya akan dijelaskan pada bab ini.
1.5.1 Heading
Heading digunakan untuk membuat headline dalam file. Ada 6 (enam) level heading yang didukung HTML yaitu <h1>, <h2>, <h3>, <h4>, <h5> dan <h6>. Teks yang ada diantara tag tersebut akan ditampilkan dalam font yang lebih tebal dan lebih besar jika dibandingkan dengan teks biasa. Berikut ini adalah contoh kode dengan tag heading :
<html> <head> <title>Heading</title> </head> <body> <h1>Heading <h2>Heading <h3>Heading <h4>Heading <h5>Heading <h6>Heading </body> </html> 1<h1><br> 2<h2><br> 3<h3><br> 4<h4><br> 5<h5><br> 6<h6>
Sedangkan tampilan kode diatas oleh browser, adalah sebagai berikut :
Gambar 1.5.1.1 Tampilan Heading
10
1.5.2 Paragraph
Untuk mengatur teks menjadi paragraf digunakan tag <p> dan </p>. Biasanya browser manambahkan sebaris atau 2 (dua) baris kosong sebelum paragraf. Teks dalam tag ini mempunyai format rata kiri. Atribut align memungkinkan anda untuk menformat teks menjadi rata kiri, kanan atau tengah. Dalam versi HTML 4.01, anda bisa menformat teks dengan format justify. Berikut ini contoh kode dengan tag paragraf beserta atribut align :
<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Paragraf Example</title> </head> <body>
<p> This is the first paragraph in the example about the p tag. There really isn't much to say here. </p> <p align="center"> This is the second paragraph. Again, more of the same. This time the paragraph is aligned in the center. This might not be such a good idea as it makes the text hard to read.</p> <p align="right">Here the paragraph is aligned to the right. Right aligned text is also troublesome to read. the rest of the text of this paragraph is of little importance</p> <p aligned="justify">Under HTML 4.0 Compliant browser, you are able to justify text. As you ay notice, the way browsers tend to justify text is sometimes imprecise. Furthermore, not all browsers support this attribute value.</p> </body> <html> Hasil keluaran dari kode diatas adalah :
11
Gambar 1.5.2.1 Tampilan Paragraf
1.5.3
Dalam
Kutipan
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>
12
<p>See the comments the press has about the new store accross 4 avenue.</p> <q>The store sells variety of product, and all products seem to less expensive than other stores</q> <br>--Matthew Somolovich, Ordinary Citizen <blockquote cite="http://www.MadeLine.com"> MadeLine's products are the best product with low price. You will not find other stores like MadeLine. MadeLine treats customer like a king. Serve customer so well that you won't leave. Unfortunelly, the location is far from main street, we have to walk a little bit far to get to Madeline </blockquote> --Clarissa M. Foley, Clothes Magazine <p>With kudos like this, you need to make sure to buy your clothes on MadeLine, today!</p> </body> </html> Tampilan dari kode diatas adalah sebagai berikut :
Gambar 1.5.3.1 Contoh Penggunaan <blockquote> dan <q>
13
1.5.4
Link
Link adalah pointer dari file tempat link berada ke tujuan tertentu. Dalam HTML, cara untuk mendefinisikan link dengan menggunakan tag <a> dan </a> anchor. Sedangkan untuk menghubungkan ke tujuan tertentu, <a> membutuhkan atribut href. Atribut href merupakan alamat tujuan, seperti http://www.yahoo.com. Teks yang berada dalam tag ini berfungsi sebagai alat untuk mengaktifkan hyperlink. Sebuah link bisa terdiri dari teks, gambar atau kombinasi keduanya. Bentuk link yang umum adalah <a href=url>visit our site</a>. URL Teks visit our site adalah link. URL (Uniform Recources Locator) adalah alamat sebuah website. Berikut ini adalah contoh kode penggunaan <a> :
<html> <head> <title>Simple Link Example</title> </head> <body> <h1 align="center">Lots of Links</h1> <hr> 1. 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>
14
Umumnya link ditandai dengan teks yang digarisbawahi dan memiliki warna berbeda, seperti biru atau ungu, tergantung apakah link tersebut pernah dipilih sebelumnya. Nilai atribut href tidak hanya alamat situs lain, tetapi bisa juga alamat file bahkan alamat email. Berikut contoh beberapa link beserta penjelasan singkat : <a href=http://www.google.com>Visit Google</a> URL dapat berupa alamat ke home page situs web site. <a href=http://www.MadeLine.com/about/>About MadeLine</a> URL dapat berupa alamat ke alamat file dalam direktori tertentu <a href=http://www.MadeLine.com/products/domes.htm>Clothes</a> URL dapat berupa alamat file. <a href=http://www.MadeLine.com/products/clothes.html#top>Bag</a> URL dapat berupa alamat ke posisi tertentu dalam file. <a href=../../index.html>Home</a> URL dapat berupa alamat relatif. <a href=mailto:info@MadeLine.com>More Information</a> URL tidak harus berupa alamat HTTP. Terkadang penggunaan mailto tidak berfungsi dikarenakan browser tidak dikonfigurasi untuk mengirim email atau tidak mendukung bentuk URL ini. Seperti yang telah dijelaskan sebelumnya, warna teks link adalah biru jika belum dikunjungi dan ungu, jika pernah dikunjungi sebelumnya. Jika link berupa gambar, warna border gambar juga biru atau ungu, kecuali jika atribut border bernilai 0 (nol). Warna link dapat diubah dengan menggunakan atribut link, alink dan vlink dalam tag body. Atribut link mengganti warna link yang belum dikunjungi, sedangkan atribut vlink mengganti warna link yang telah dikunnjungi. Atribut alink mengganti warna dari link yang aktif, yaitu warna link ketika dipilih. Dengan menggunakan HTML style sheet, anda dapat mengubah dekorasi link sehingga link tidak harus digarisbawahi, mengubah style link ketika dilewati pointer mouse dan lain sebagainya. Berikut ini adalah contoh kode format link yang berbeda dari biasanya :
<html> <head> <title>Link Style Changes</title> <style type="text/css">  </style> </head> <body link="red" alink="blue" vlink="blue"> <a href="http://www.yahoo.com">Test link to Yahoo!</a> </body> </html> Selain atribut href, dalam <a> masih terdapat berbagai atribut. Daftar atribut dalam <a> terdapat pada tabel 1.5.4.1.
Table 1.5.4.1 : Daftar Atribut Dalam <a>
Nama Atribut href name
Nilai Atribut URL Text
Penjelasan Menentukan alamat link Menamai anchor sehingga dapat menjadi target dari anchor yang lain Identifikasi anchor agar dapat menjadi target dari anchor yang lain, diakses oleh style sheet, dan untuk scripting Menentukan frame yang menjadi tujuan link Menentukan teks tooltip untuk link Menentukan bagian keyboard untuk mengakses link Menentukan dihubungkan hubungan dari objek yang
id
Text
target title accesskey
A frame name Text A character
rel
Text
rev
Text
Menentukan hubungan menghubungkan
objek
yang
Seperti yang telah disebutkan sebelumnya, URL yang menjadi tujuan link tidak harus alamat website, tetapi bisa juga lokasi dalam sebuah file HTML. <a> juga digunakan untuk mendefinisikan lokasi (marker) tersebut. Jika marker ditempatkan dalam file html maka dapat menjadi tujuan dari link. Agar marker dapat dijadikan tujuan maka marker tersebut didefinisikan terlebih dahulu, contoh : < a name=marker>. Kemudian marker tersebut dapat diakses dengan <a name=#marker>. Sebagai contoh : <a name=#marker>This is a marker</a> mengarahkan teks this is a marker ke tujuan yang ditetapkan sebelumnya. <a> dapat berperan sebagai tujuan dan link dalam waktu yang
16
bersamaan,
contoh
<a
name=yahoolink
href=http://www.yahoo.com/>Yahoo!</a>. Berikut ini adalah contoh kode penggunaan marker <html> <head> <title>Name Attribut Name</title> </head> <body> <a name="top"></a> Go to the <a href="#bottom">bottom</a> of this document.<br> link right to a <a href="../examples/testfile.htm#marker1">marker</a> in another document. <p>To make this work we need to stimulate the document being very long by using many breaks.</p> <br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br> <strong id="middle">the middle</strong> <br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br> <hr> <a name="bottom" href="#top">return to top</a> <a href="#middle">go to middle</a> </body> </html>
1.5.5 List
Modern HTML memiliki 3 (tiga) bentuk list : ordered list (<ol>), unordered list (<ul>) dan definition list (<dl>). Dua bentuk point lainnya jarang digunakan, yaitu <menu> dan <dir>. List bisa memiliki hirarki dan dapat mengandung struktur lain seperti paragraf.
17
1.5.5.1
Ordered List
Ordered list, <ol> dan </ol>, merupakan list yang berurutan. Urutan ini direpresentasikan oleh angka, dengan menggunakan angka arab, huruf atau angka romawi. Ordered list sangat baik untuk membuat semacam kerangka atau instruksi langkah-per-langkah, karena list diberi nomor secara otomatis oleh browser. List item yang berurutan dan list yang lain didefinisikan dengan menggunakan <li> yang tidak memerlukan tag penutup. Untuk XHTML, tag penutup </li> dianjurkan. Letak list item dibuat agak menjorok ke dalam oleh browser. Penomoran list dimulai dari 1 (satu). Bentuk umum dari list seperti dibawah ini :
<ol> <li>Item 1</li> <li>Item 1</li> ...... <li>Item 1</li> </ol> Ada beberapa atribut untuk <ol>, diantaranya atribut type. Atribut type digunakan untuk menentukan jenis huruf penomoran. Nilai a berarti penomoran dengan huruf kecil, A berarti penomoran dengan huruf besar, I berarti penomoran dengan angka romawi dan I berarti penomoran dengan angka romawi besar. Nilai default atribut type adalah 1, yaitu penomoran biasa. <li> juga mempunyai atribut type yang bernilai sama dengan nilai atribut pada <ol>. Jika atribut type pada <li> diberi nilai maka nilai tersebut akan digunakan dikeseluruhan list, kecuali <li> yang lain memberi nilai baru pada atribut type. Nilai atribut start pada <ol> harus berupa angka walaupun nilai atribut type bukan angka. Atribut value pada <li> dapat digunakan untuk menggantikan penomoran yang sedang digunakan. Nilai atribut value juga berupa angka. Berikut ini adalah contoh kode untuk membuat ordered list : <html> <head> <title>Ordered List Example</title> </head> <body> <p>Ordered lists can be very simple.</p> <ol> <li>Item 1 <li>Item 2 <li>Item 3
18
</ol> <p>Ordered lists can have a variety of types</p> <ol> <li <li <li <li <li </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 : type="a">Lowercase letters type="A">Uppercase letters type="i">Lowercase Roman numerals type="I">Uppercase Roman numerals type="1">Arabic numerals
19
Gambar 1.5.5.1.1 Tampilan HTML Untuk Ordered List
1.5.5.2 Unordered List

Unordered list digunakan untuk mendaftarkan item dengan penomoran yang tidak spesifik. Jenis list ini dapat digunakan untuk mendaftarkan fitur dan keuntungan sebuah produk. Browser biasanya menambahkan bullet atau sejenisnya (lingkaran hitam, kotak, lingkaran putih) untuk tiap item dan posisinya dibuat agak menjorok kedalam Unordered list dapat memiliki hirarki. Untuk setiap level hirarki, posisi list semakin menjorok ke dalam, dan jenis bullet juga berubah. Umumnya, lingkaran hitam digunakan pada lever teratas dari list. Lingkaran yang kosong digunakan pada level kedua, sedangkan level ketiga menggunakan kotak. Atribut type dapat digunakan untuk menentukan jenis bullet dari list. Atribut type juga dapat muncul dalam <ul> dan akan menentukan jenis bullet untuk keseluruhan list atau dapat muncul di setiap <li>. Nilai atribut type pada <li> dapat mengubah nilai list
20
keseluruhan kecuali jika diubah kembali oleh type yang lain. Nilai atribut type dapat berupa disc, circle atau square. Berikut ini adalah contoh kode penggunaan unordered list :
<html> <head> <title>Unordered List Example</title> </head> <body> <ul> <li>Unordered lists <ul> <li>can be nested. <ul> <li>Bullet changes on nesting. </ul> </ul> </ul> <p>Bullets can be controlled with TYPE attribut. Type can be set for the list as a whole or item by item.</p> <ul type="square"> <li>First item bullet shape set by UL <li type="disc">Disc item <li type="circle">Circle item <li type="square">Square item </ul> </body> </html>
Tampilan HTML untuk kode diatas adalah gambar di bawah ini :
Gambar 1.5.5.2.1 Tampilan HTML Unordered List
21
1.5.5.3
Definition List
Definition list adalah list yang berpasangan. List ini digunakan untuk menyusun posisi kata dan definisi dari kata tersebut. Tag definition list adalah <dl> dan </dl>. Setiap kata yang akan didefinisikan diawali dengan <dt>, singkatan dari definition term. Sedangkan definisi dari kata tersebut diawali dengan <dd>. Tag <dt> dan <dd> tidak harus menggunakan tag penutup. Berikut ini adalah contoh kode penggunaan definition list:
<html> <head> <title>Definition List Example</title> </head> <body> <h1 align="center">Definitions</h1> <dl> <dt>Gadget</dt> <dd>A useless device used in many HTML examples.</dd> <dt>Gizmo<dt> <dd>Another useless device used in a few HTML examples.</dd> <dl> </body> </html>
Tampilan untuk kode di atas adalah sebagai berikut :
22
Gambar 1.5.5.3.1 Tampilan HTML Penggunaan Definition List
1.6 Gambar
File gambar dapat digunakan untuk memperindah dan memudahkan navigasi file Tipe file gambar yang ada sekarang ini diantaranya adalah GIF (graphics interchange format - .gif), JPEG/JPG (joint photographic experts - .jpeg), XBM (X bitmaps - .xbm), XPM (X pixelmaps - .xpm), PNG (portable network graphics .png). File gif baik untuk digunakan dalam ilustrasi seperti logo, sementara file jpeg baik untuk gambar yang kompleks seperti foto. File bertipe JPG berukuran lebih kecil dibandingkan tipe yang lain karena kompresi yang digunakan mengabaikan piksel-piksel yang dianggap membawa perubahan minor pada gambar, kompresi ini dinamakan lossy. Faktor yang harus diperhatikan oleh web designer mengenai gambar adalah ukuran file serta kualitasnya. Untuk menyisipkan gambar dalam file HTML, gunakan tag <img> dan tentukan nilai atribut src, yaitu URLdari file gambar berupa absolut URL atau relatif URL. Untuk memasukkan gambar yang berada pada tempat yang sama dengan file HTML, gunakan <img src=logo.gif> Sedangkan penggunaan alamat absolute URL, dengan cara <img src=http://www.MadeLine.com/images/logo.gif> Berikut ini adalah contoh kode penggunaan tag < img> : <html>
23
<head> <title>Image Example</title> </head> <body> <h2 align="center">Image Example</h2> <img src="images/chobits.jpg" width="207" height="325" border=0> </body> </html> Tampilan untuk kode di atas adalah sebagai berikut :
Gambar 1.6.1 Tampilan HTML untuk <img>
Dalam <img> terdapat beberapa atribut, diantaranya alt. Alt digunakan untuk menyediakan teks pengganti apabila gambar tidak dapat ditampilkan. Nilai atribut alt dapat ditampilkan di tempat gambar atau sebagai tool tip. Sekarang ini, dengan adanya atribut title, alt digunakan untuk menampilkan teks apabila gambar tidak dapat ditampilkan dan nilai dari atribut title sebagai tool tip.
24
Gambar 1.6.2 Tampilan HTML dengan Alt
Gambar dapat diatur posisinya dalam file HTML dengan menggunakan atribut align. Atribut align dapat bernilai top, bottom atau middle. Apabila gambar disertakan dalam teks maka teks selanjutnya akan terletak di top, bottom atau middle dari gambar tergantung nilai dari atribut align. Berikut ini adalah contoh kode penggunaan <img> dan atribut align beserta hasil tampilannya: <html> <head> <title>Basic Image Alignment</title> </head> <body> <p><img src=image/aligntest1.gif align=top border=1> This text should be aligned to the top of the image.</p> <p><img src=images/aligntest1.gif align=middle border=1> This text should be aligned to the middle of the image.</p> <p><img src=images/aligntest1.gif align=bottom border=1> This text should be aligned to the bottom of the image.</p> </body> </html>
Gambar 1.6.3 Tampilan HTML dengan Align
Dengan nilai align seperti diatas, teks tidak berada di sekeliling gambar sehingga layout file terlihat aneh. Netscape memperkenalkan nilai left dan right untuk atribut align. Dengan demikian maka jika gambar berada di sebelah kiri maka
25
teks akan berada di sebelah kanan gambar, demikian juga sebaliknya. Berikut ini adalah contoh kode penggunaan left dan right untuk atribut align beserta tampilannya : <html> <head> <title>Improved Text Flow</title> </head> <body> <img src=" image/aligntest1.gif " align="left"> The top images has its align attribute set to "left" so the text flows around it to the "right". The top image has its align attribute set to "left" so the text flows around it to the "right". <br clear="left"><br><br> <p><img src=" image/aligntest1.gif " align="right"> The top images has its align attribute set to "right" so the text flows around it to the "left". The top image has its align attribute set to "right" so the text flows around it to the "left". </body> </html>
Gambar 1.6.4 Tampilan HTML dengan Align Right dan Left
Pada versi HTML 3.2 Netscape memperkenalkan atribut hspace dan vspace. Atribut ini dapat digunakan untuk menyediakan rung kosong di sekitar gambar. Atribut hspace digunakan untuk memasukkan ruang kosong di sebelah kiri dan kanan gambar. Sedangkan atribut vspace digunakan untuk memasukkan ruang kosong di atas dan di bawah gambar. Nilai kedua atribut ini harus positif dalam
26
piksel. Berikut ini adalah contoh kode untuk <img> dan atribut hspace, vspace beserta hasil tampilannya : <html> <head> <title>HSPACE and VSPACE Example</title> </head> <body> <p>The image below has its<tt><b><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
27
1.7 Tabel
Tabel didefinisikan dengan tag <table>. Sebuah tabel terbagi atas baris (tag <tr) dan setiap baris terbagi menjadi kolom (tag <td). Dalam kolom dapat berisi teks, gambar, list, paragraf, form, tabel dan lainnya. Berikut ini adalah contoh kode tabel beserta hasil tampilannya di web :
<table border="1"> <tr> <td>baris 1, kolom <td>baris 1, kolom </tr> <tr> <td>baris 2, kolom <td>baris 2, kolom </tr> </table>
Hasil keluarannya :
row 1, cell 1 row 2, cell 1
1</td> 2</td>
1</td> 2</td>
row 1, cell 2 row 2, cell 2
1.7.1 Atribut Border

Jika kita tidak menentukan atribut border maka tabel akan ditampilkan tanpa border. Terkadang hal ini berguna tetapi umumnya, kita menginginkan agar border terlihat. Untuk menampilkan tabel dengan border, kita harus memberi nilai pada atribut border : <table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table>
1.7.2 Heading Pada Tabel

Heading pada tabel didefinisikan dengan tag <th>. Berikut ini adalah contoh kode heading pada tabel :
<table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr>
28
<td>row 1, <td>row 1, </tr> <tr> <td>row 2, <td>row 2, </tr> </table>
cell 1</td> cell 2</td>
cell 1</td> cell 2</td>
Hasil keluarannya adalah sebagai berikut :

Heading row 1, cell 1 row 2, cell 1 Another Heading row 1, cell 2 row 2, cell 2
1.8
Frame
Frame adalah area dengan scroll yang berdiri sendiri, atau window dari web page. Sebuah frame akan membagi file HTML menjadi beberapa area dengan luas yang lebih kecil, dimana untuk setiap area diisi dengan file HTML yang lain. Isi dari sebuah frame dapat dimanipulasi bahkan dihubungkan dengan isi frame yang lain, sehingga akan menghasilkan file HTML yang menarik. Pemisah antar frame berupa border sehingga file HTML yang menggunakan frame akan menyerupai file HTML yang menggunakan tabel. Setiap frame diberi nama sehingga dapat menjadi referensi melalui link atau scripting, dengan demikian isi dari sebuah frame dapat dipengaruhi oleh isi dari frame yang lain. Perbedaan utama antara frame dengan tabel adalah kemampuan referensi dari frame, selain itu frame menyediakan fasilitas layout dan navigasi.
1.8.1 Contoh Sederhana Frame

Yang perlu diingat, frame terdiri dari beberapa file HTML. Sebuah file HTML dengan 2 (dua) frame sebenarnya terdiri dari : File HTML yang mendefinisikan hubungan antara frame (framing document) File HTML untuk mengisi frame pertama File HTML untuk mengisi frame kedua
29
Framing document memiliki sedikit perbedaan dengan file HTML yang umum. Perbedaan terletak pada tag <body>. Framing document tidak mengandung tag <body>. Tag ini digantikan dengan tag <frameset>, yang berfungsi mendefinisikan frame-frame yang digunakan. Atribut utama dari dari <frameset> adalah row dan cols. Sebuah file dokumen HTML dibagi menjadi 2 (dua) kolom yang masing-masing berukuran 20% dan 80% dikodekan dengan <frameset cols=20%, 80%>, sedangkan dokumen HTML yang terbagi menjadi 3 (tiga) baris yang masing-masing berukuran 10%, 80% dan 10% dikodekan dengan <frameset cols=10%, 80%, 10%>. Dalam <frameset> terdapat tag <frame> yang digunakan untuk menentukan file HTML yang akan diisi dalam row atau cols, yang telah didefinisikan sebelumnya dalam <frameset>. Sintaks dari <frame> adalah <frame src=URL file name=nama unik dari frame>. Berikut ini adalah kode sederhana dari file HTML yang menggunakan frame : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> <html> <head> <title>Belajar menggunakan frame</title> </head> <frameset cols="20%, 80%"> <frame src="links.html" name="links"> <frame src="display.html" name="display"> <noframes> <body> <p> File ini menggunakan frame. Ikuti link <a href="noframes.html">tanpa frame</a> untuk menuju versi dari file ini tanpa frame </p> </body> </noframes> <frameset> <html> Dengan kode di atas maka file links.html akan berada pada frame yang berukuran 20%, sedangkan file display.html akan berada pada frame yang berukuran 80%. Kode dari file links.html dan display.html ada di bawah ini: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Links</title> </head> <body> <h2>Links</h2> <hr> <a href="http://www.google.com" target="display">Yahoo!</a> </body> </html>
30
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Display</title> </head> <h2>Display</h2> <hr> <p> Click file akan ditampilkan di sini </p> </body> </html> Setelah semua file selesai dibuat, letakkan file-file tersebut pada direktori yang sama, kemudian buka file frame utama. Tampilan pada web browser seperti dibawah ini :
Gambar 1.8.1.1 Tampilan Di Web Browser File Framing.html. <noframe> yang ada pada contoh sebelumnya mengandung file HTML serta teks yang akan ditampilkan apabila browser tidak mendukung frame.
1.8.2 Target Frame
31
Salah satu contoh penggunaan frame, sebuah file HTML terdiri dari beberapa frame dimana salah satu frame berisi links sedangkan frame lainnya akan berisi file HTML yang sesuai dengan link yang dipilih. Ketika link dipilih maka frame lainnya akan menampilkan file HTML yang ditentukan oleh link. Pada contoh sebelumnya frame yang berisi daftar link dinamakan links dan targetnya dinamakan display. Langkah-langkah untuk membuat target link adalah : 1. Nilai atribut name pada <frame> bersifat unik 2. Gunakan <a atribut target dalam <a>, contohnya : akan href=http://www.yahoo.com target=display>
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 bernama _self _parent _top Load file HTML di frame sendiri Load link ke frame parent Load link ke semua frame Load file HTML ke window baru, umumnya yang tidak
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>
32
<body> <h1 align="center">Contoh Inline Frame</h1> <iframe name="iframe1" src="iframe.html" width="350" height="200" align="left"> Disini akan terdapat inline frame jika browser anda compatible. </iframe> <p>Ini adalah contoh sederhana dari inline frame. Inline frame terlihat seperti objek yang disisipkan </p> </body> <html> Tampilan dari kode diatas terdapat pada gambar 4.3.1. Beberapa browser tidak mendukung <iframe>, diantaranya Netscape 4.x. Sama halnya dengan frame, inline <a frame dapat menjadi target link. Contoh kode: di href=http://www.google.com target=iframe1>Tampilkan
iframe </a>.
Gambar 1.8.3.1 Tampilan Kode Inline Frame
1.9 Tag Logika
33
Tag logika atau idiomatic element digunakan untuk menandai tipe informasi yang berbeda. Perbedaan tipe informasi ditandai dengan menggunakan huruf miring, tebal atau menggunakan huruf yang ukurannya sama (monospace). Tag ini tidak tergantung pada browser.
This is emphasized text

This is cited text This is strong text Perhatikan contoh ini : seandainya kita hendak menampilkan teks dengan huruf miring untuk membedakan teks tersebut dari teks lainnya. Dengan menggunakan tag italic maka kita memberitahu browser untuk tampilkan teks ini dengan huruf miring. Tetapi bagaimana dengan browser yang tidak mendukung tampilan tersebut? Maka browser tidak akan menampilkan teks dengan huruf miring karena tag tersebut akan diabaikan. Akan lebih baik apabila kita dapat memberitahu browser untuk membedakan teks melalui tag khusus. Umumnya dengan melakukan hal demikian maka browser akan mengubah teks dengan huruf miring tetapi browser dapat juga menampilkan format yang lain yang dapat membedakan teks tersebut dari teks yang lain. Hal sama terjadi juga untuk membedakan teks dengan menggunakan penebalan huruf.
Berikut ini adalah penjelasan lebih lanjut mengenai tag-tag yang termasuk dalam tag logika: 1. Heading Tag ini digunakan untuk membuat teks menjadi seperti headline. Pada umumnya browser akan menampilkan teks yang berada dalam tag ini dengan huruf tebal dan ukuran yang berbeda dari teks lain. Penjelasan lebih lanjut mengenai tag ini ada pada bab 1.5.1. 2. Emphasis <em> Umumnya browser mengartikan tag ini sebagai menampilkan dengan huruf miring. Tetapi jika browser tidak mendukung tampilan tersebut maka browser akan menampilkan dengan cara yang lain. 3. Strongly Emphasis <strong> Browser mengartikan tag ini dengan menebalkan huruf. 4. Address (<ADDRESS>...</ADDRESS>) Tag ini digunakan untuk menulis alamat email. 5. Blockquote (<BLOCKQUOTE>...</ BLOCKQUOTE >) Tag ini digunakan untuk memasukkan kutipan panjang dari dokumen lain. Penjelasan lebih lanjut dari tag ini ada pada bab 1.5.3
34
6. Citation (<CITE>...</CITE>) Tag ini digunakan untuk memasukkan kutipan seperti nama majalah, jurnal atau buku. 7. Definition (<DFN>...</DFN>) Tag ini digunakan untuk mendefinisikan term. 8. Code (<CODE>...</CODE>) Tag ini digunakan untuk penulisan kode program komputer. 9. Sample (<SAMP>...</SAMP>) Tag ini digunakan untuk menuliskan contoh. 10. Variable (<VAR>...</VAR>) Tag ini digunakan untuk penulisan variabel dari kode program komputer. Untuk lebih memahami penggunaan tag-tag diatas, berikut ini adalah contoh kode file HTML yang menggunakan tag logika :
Style Tags
File web yang hanya terdiri dari tulisan hitam putih kurang menarik untuk dilihat. Dengan menggunakan tag style maka teks akan diberikan jenis, penekanan dan warna yang berbeda dengan file web akan lebih menarik untuk dilihat. Tag yang terpenting untuk mengubah teks adalah <font>..</font>. Tag ini dapat digunakan untuk mengubah jenis, ukuran dan warna teks biasa. <font face=times new roman size=3 pt color=#FFFFFF>Teks</font> <font> memiliki 3 (tiga) atribut untuk mengubah teks : 1. Face Jenis huruf default dari browser pada umumnya adalah Times New Roman. Banyak browser memiliki keterbatasan dalam mengenali jenis huruf. Kita dapat memasukkan lebih dari satu jenis huruf sebagai nilai atribut ini. Browser akan mengubah teks menurut jenis huruf yang pertama kali dikenali. Contoh : <font face=arial, comic sans ms>, maka browser akan mengubah teks dengan jenis huruf Arial. Tetapi, jika browser tidak mengenali huruf Arial maka browser akan mengubah teks dengan jenis huruf Comic Sans MS. Jika browser tetap tidak mengenali jenis huruf tersebut maka browser akan menggunakan jenis huruf default yaitu Times New Roman. Beberapa jenis huruf diantaranya adalah Arial, Brush Script, Impact, Letter Gothic, Lucida handwriting, Lydian, Mistral, verdana dan lainnya. 2. Size
35
Atribut ini mengatur ukuran huruf yang akan ditampilkan. Nilai atribut ini bisa negative atau positif dengan kisaran nilai -2 hingga +4 dengan nilai default 3 ( Contoh : -2 adalah 1 dan +4 adalah 7). Nilai 1 (atau -2) akan menghasilkan tampilan huruf ukuran 8. Nilai 2 (atau -1) akan menghasilkan tampilan huruf ukuran 10. Nilai 3 (atau +0) akan menghasilkan tampilan huruf ukuran 12. Nilai 4 (atau +1) akan menghasilkan tampilan huruf ukuran 14. Nilai 5 (atau +2) akan menghasilkan tampilan huruf ukuran 18. Nilai 6 (atau +3) akan menghasilkan tampilan huruf ukuran 24. Nilai 7 (atau +4) akan menghasilkan tampilan huruf ukuran 36. 3. Color Nilai atribut ini berupa kode warna atau nama warna. Atribut ini digunakan untuk mengubah warna teks. Warna hitam adalah warna default dengan kode warna #000000. Berikut ini adalah contoh file HTML yang menampilkan teks yang mengalami perubahan style :
<font color="#700000" size="+2>The State Flag of New Mexico has on it a modern interpretation of an ancient symbol of a sun design, as seen on a late 19th century water jar from the Zia Pueblo. 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 Zia and 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 :
36
The State Flag of New Mexico has on it a modern interpretation of an ancient symbol of a sun design, as seen on a late 19th century water jar from the Zia Pueblo. This pueblo is thought to have been one of the Seven Golden Cities of Cibola, which explorer Vasquez de Coronado sought. The red sun symbol was then called a Zia and is shown on a field of gold. The red and gold colors, which the Spanish Conquistadores brought to the New World, were the colors of Queen Isabela of Castile. Here is the official salute to the New Mexican Flag: I salute the flag of the State of New Mexico and the Zia symbol of perfect friendship among united cultures.
Selain tag <font> masih banyak tag-tag lain yang termasuk dalam tag style. Berikut ini adalah penjelasan dari beberapa style tag : 1. <style>....</style> Tag ini digunakan untuk mengubah jenis huruf, warna dan ukuran dari heading. Contoh : <style>h2 {font-size: 21pt; color: #000080}; h3 {font-size: 17pt; color: #008000}</style> Kode diatas akan mengubah ukuran dan warna dari teks dalam heading 2 (dua) dan heading 3 (tiga). 2. <basefont>...</basefont> Tag ini digunakan untuk mengubah jenis huruf, ukuran dan warna default dari teks. Sama halnya dengan <font>...</font>, tag ini juga memiliki 3 (tiga) atribut yaitu face untuk mengubah jenis tulisan, size untuk mengubah ukuran tulisan dan color untuk mengubah warna tulisan. 3. <i>...</i> Tag ini digunakan untuk mengubah jenis huruf teks menjadi huruf miring. 4. <b>...</b> Tag ini digunakan untuk menebalkan teks 5. <u>...</u> Tag ini digunakan untuk menggaris-bawahi teks. 6. <s>...</s> Tag ini digunakan untuk membuat garis horizontal pada teks. Contoh kode di bawah ini menggunakan beberapa tag yang telah dijelaskan sebelumnya :
37
Hey
Kevin,<br><br>
That sure was a <b>bold</b> move on your part to tell off the boss this afternoon! Man, it's something <i>everybody</i> has wanted to do for a long time! I guess now you'll be <s>getting that raise you've been wanting</s> looking for another job starting tomorrow, huh buddy? <b><i><u>Just</u> <u>kidding</u>!</i> :-)</b> Anyway, on behalf of the crew, <u>thanks</u>, and we're all behind ya!!<br><br> John
Hasil tampilan dari kode di atas adalah :
Hey
Kevin,
That sure was a bold move on your part to tell off the boss this afternoon! Man, it's something everybody has wanted to do for a long time! I guess now you'll be getting that raise you've been wanting looking for another job starting tomorrow, huh buddy? Just kidding! :-) Anyway, on behalf of the crew, thanks, and we're all behind ya!! John
7. <tt>...</tt> Tag ini digunakan untuk membuat jenis huruf seperti huruf mesin ketik. Berikut ini adalah contoh kode penggunaan tag ini :
<font size="4"><center><i><b><u>quick</u> <u>cornbread</u></b></i><br><br> Preparation Time: 20 minutes<br> Cooking Time: 20-25 minutes<br><br> <tt><u>DRY</u> <u>Ingredients</u><br> 2 c. white or yellow cornmeal<br> 2 c. flour<br> 4 tsp. baking <u>powder</u><br> 1 tsp. salt<br><br> <u>WET</u> <u>Ingredients</u><br> 3 Tblsp. maple syrup<br> c. olive oil<br> 2 c. milk<br> 2 eggs, beaten<br> 2 medium jalapeo 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
38
ingredients, and stir until <u>well-combined</u>.<br><br> 2. Pour the mixture into a well-greased 9"2" round, or 8"8"2" square, glass baking pan. Bake in a preheated 350 oven for 20-25 minutes or until a toothpick inserted into the middle comes out dry. Set aside and cool. This recipe serves 8 to 10 people.</font>
Hasil tampilan dari kode di atas adalah :
QUICK CORNBREAD Preparation Time: 20 minutes Cooking Time: 20-25 minutes

DRY ingredients 2 c. white or yellow cornmeal 2 c. flour 4 tsp. baking powder 1 tsp. salt WET ingredients 3 Tblsp. maple syrup c. olive oil 2 c. milk 2 egg, beaten Optional: 2 medium jalapeo 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.
39
Selain disimpan di file tersendiri, style sheet juga bisa dituliskan di dalam file HTML, diantara tag <head>. Style sheet ini dinamakan internal style sheet. Selain itu style juga bisa dituliskan di dalam tag HTML, (inline style), style yang demikian memiliki prioritas paling tinggi, yang artinya style ini akan menggantikan eksternal style sheet dan internal style sheet.
1.10.1 Menyisipkan External Style Sheet

External style sheet sangat baik untuk digunakan jika style ini akan diterapkan di banyak halaman web. Dengan demikian kita dapat mengubah tampilan banyak halaman hanya dengan mengubah sebuah file CSS. Tiap halaman yang akan menggunakan style, menghubungkan file style dengan tag <link>. Berikut ini contoh file external style sheet dan cara menyisipkannya :
hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")}
Cara menyisipkan dalam file HTML
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
1.10.2 Menyisipkan Internal Style Sheet

Internal style sheet baik untuk digunakan di sebuah dokumen yang memiliki style tersendiri. Kita mendefinisikan internal style sheet dalam tag <style>. Berikut ini cara membuat internal style sheet :
<head> <style type="text/css"> hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} </style> </head>
browser akan membaca definisi style lalu menampilkan file HTML berdasarkan definisi tersebut.
40
1.10.3 Menyisipkan Inline Style

Untuk menggunakan inline style, kita gunakan tag <style> pada tag yang bersangkutan. Atribut style dapat mengandung property dari CSS. Berikut ini contoh penggunaan inline style, untuk mengubah warna dan ukuran margin :
<p style="color: sienna; margin-left: 20px"> This is a paragraph </p>
1.10.4 Menggunakan CSS

Setelah kita mempelajari cara membuat CSS. Selanjutnya kita akan membahas cara menggunakan CSS di dalam file HTML. Penggunaan file CSS dalam tag HTML dengan selector class. Nilai atribut class adalah style yang ingin kita gunakan untuk. Berikut ini contoh penggunaan CSS :
h1,h2,h3,h4,h5,h6 { color: green }

File HTML :
<h1 class="h1"> Tulisan ini akan berwarna hijau </h1> <h2 class="h2"> Tulisan ini juga akan berwarna hijau </h2>
1.11 Keamanan Website

Internet adalah : Mengubah informasi yang ada di Internet sehingga mempermalukan perusahaan pemilik web site / deface dapat diakses oleh semua orang di dunia. Untuk itu muncul
permasalahan dengan keamanan internet. Beberapa permasalahan tersebut
41
Informasi yang seharusnya hanya bisa diakses oleh orang tertentu, disadap sehingga diakses oleh orang yang tidak berhak Penyadapan informasi seperti nomor kartu kredit Menyerang server dengan memberikan request secara terus menerus ( denial of service attack ) melemahkan atau menghilangkan fungsi firewall (tunneling)
Untuk mengatasi permasalahan tersebut, berikut ini adalah cara-cara yang dapat dilakukan : 1. membatasi akses dengan kontrol akses Dengan pembatasan akses maka tidak semua orang bisa mengakses informasi. Pembatasan akses dapat dilakukan dengan cara : membatasi domain atau nomor IP yang dapat mengakses menggunakan userId dan password mengenkripsi data sehingga hanya dapat didekripsi oleh pihak yang berhak. Mekanisme pembatasan hak akses bergantung pada program yang ada di server. Secure Socket Layer merupakan salah satu cara untuk mengamankan internet dengan mengenkripsi komunikasi pada tingkat socket. Beberapa server telah menyediakan fasilitas ini contohnya apache. 2. Mengetahui jenis web server Informasi mengenai web server dapat digunakan untuk menyerang web server melalui titik kelemahan web server tersebut. Sedangkan untuk client, serangan yang muncul berupa pelanggaran privasi dan penyisipan virus. Ketika kita mengunjungi web, kita dititipi oleh cookies yang berguna untuk menandai aktivitas yang dilakukan, sehingga dapat dilakukan tracking terhadap situs web yang pernah kita kunjungi. Enkripsi Data Enkripsi adalah proses menyembunyikan informasi, membuatnya menjadi tidak terbaca tanpa pengetahuan khusus. Algoritma untuk melakukan enkripsi disebut dekripsi (kebalikannya adalah dekripsi). Informasi semula dinamakan plainteks sedagkan informasi yang telah dienkripsi dinamakan ciperteks. Metode enkripsi terbagi menjadi algoritma symmetric key (private-key
cryptography) dan asymmetric algorithms (public-key cryptography). Dalam algoritma symmetric key (DES atau AES), pengirim dan penerima informasi
42
memiliki key yang hanya diketahui bersama, sedangkan dalam asymmetric key (RSA) ada 2 (dua) kunci, public key yang di umumkan luas dan private key yang hanya diketahui penerima informasi. Metode yang dapat digunakan untuk pertukaran kunci dalam algoritma assymetric key adalah diffie helman, metode ini hanya membutuhkan private key.
Soal Latihan
1. Apa fungsi atribut Alt pada tag <img> : a. Teks alternatif jika gambar tidak bisa ditampilkan b. Cara cepat menyimpan gambar c. Gambar alternatif yang disediakan d. Memberi efek tertentu pada gambar e. Mengubah gambar menjadi link 2. Apa fungsi atribut hspace dan vspace : a. Tujuan sebuah URL b. Menyediakan ruang kosong c. Mengatur posisi gambar d. Mengatur ukuran gambar e. Menampilkan teks alternatif 3. <frame> menggantikan tag : a. <head> b. <html> c. <body> d. <base> e. <meta>
Soal Praktek
4. Buatkan kode HTML yang akan menampilkan keluaran seperti di bawah ini :
43
5. Buatlah kode HTML yang akan menampilkan keluaran seperti di bawah ini :
44
BAB 2 BASIS DATA
Tujuan Instruksional Umum : 1. Mengenal konsep Basis data 2. Mengenal operasi dalam basis data 3. Mengenal perintah akses basis data Tujuan Instruksional khusus : 1. Programmer memahami konsep dalam basis data 2. Programmer dapat mengakses, menambah, menghapus dan mengubah data dalam basis data Materi yang dibahas dalam bab ini memenuhi : 1. TIK.PR02.021.01 Menerapkan basis data Berikut ini adalah gambaran umum dari materi yang akan dibahas pada bab ini :
45
2.1 Terminologi
Berikut ini adalah terminologi yang umum digunakan dalam basis data : Basis Data : Kumpulan data yang terorganisir DBMS (Database Management System) : Program komputer yang menangani basis data Query : Cara mengakses basis data Table : Tempat penyimpanan data contoh :
Tabel 2.1.1 : Data Mahasiswa
NIP 0912457 0958745 0987856 0996545
Nama Budi Santoso Andi Wiryawan Susi Widyaningsih Karina Putri
Jurusan Akuntansi Ekonomi Sastra 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.
46
1. SELECT Perintah ini digunakan untuk memperoleh nol atau lebih baris dari satu atau lebih table di basis data. Umumnya keyword yang menyertai perintah SELECT adalah : FROM Keyword untuk memberitahukan asal table yang datanya diakses juga cara table di gabungkan. WHERE Keyword ini digunakan untuk menentukan baris yang akan ditampilkan berdasarkan kriteria yang tertera di klausa ini. Dalam klausa WHERE dapat digunakan oprator logika. Berikut ini adalah tabel dari operator logika SQL :
Tabel 2.2.1 : Operator Logika dalam SQL
= <> or != (see manual) < > <= >=
Equal Not Equal Less Than Greater Than Less Than or Equal To Greater Than or Equal To
GROUP BY Keyword ini digunakan untuk mengkombinasikan baris dengan dengan nilai yang berkaitan. HAVING Keyword ini digunakan untuk mencari bagian dari kombinasi baris (kombinasi baris dihasilkan ketika query menggunakan keyword GROUP BY atau ketika dalam perintah SELECT mengandung agregasi ) yang dihasilkan. ORDER BY Keyword ini digunakan untuk menentukan kolom yang digunakan untuk mengurutkan data yang dihasilkan.
47
Contoh penggunaan query SELECT : Contoh 1 : SELECT * FROM buku WHERE harga > 100.00 ORDER BY judul Query ini akan menghasilkan semua baris dari table buku yang memiliki harga 100.00 dollars. Baris-baris yang dihasilkan akan diurutkan berdasarkan judul buku. Simbol (*) berarti menampilkan semua kolom dari table yang bersangkutan.
Contoh 2 : SELECT bk.judul, count(*) AS Pengarang FROM buku AS bk, pengarang_buku AS ba WHERE bk.nomor_buku = ba.nomor_buku GROUP BY bk.judul Perintah ini menggunakan beberapa table yang digabungkan (join). Setiap table menggunakan alias yaitu bk dan ba dengan tujuan menghindari ambigu ketika melakukan penggabungan table. Selain itu, kolom yang ditampilkan adalah judul buku dan jumlah pengarang yang diberi alias Pengarang. Data dari kolom Pengarang diperoleh dengan perintah agregasi COUNT. Perintah ini akan menampilkan jumlah pengarang untuk setiap buku. Berikut ini adalah contoh hasil keluarannya : Judul SQL Examples and Guide The Joy of SQL How to use Wikipedia Pitfalls of SQL How SQL Saved my Dog Contoh 3 : Perhatikan table di bawah ini : TabelKaryawan NoKaryawan 010 105 Gaji 75000 65000 Bonus 15000 15000 Jabatan Manager Manager Pengarang 3 1 2 1 1
48
152 215 244 300 335 400 441
60000 60000 50000 45000 40000 32000 28000
15000 12500 12000 10000 10000 7500 7500
Manager Manager Staff Staff Staff Entry-Level 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 :
49
Operator AND digunakan untuk menggabungkan kondisi. Baris yang memenuhi semua kondisi yang akan ditampilkan. Sebagai contoh, untuk menampilkan nomor karyawan staf yang memiliki gaji melebihi 40000 dengan query : SELECT NoKaryawan FROM TabelKaryawan WHERE Gaji > 40000 AND Jabatan = Staf Operator OR digunakan untuk menggabungkan 2 (dua) atau lebih kondisi. Baris yang memenuhi salah satu kondisi atau keduanya yang akan ditampilkan. Sebagai contoh, untuk menampilkan nomor karyawan yang memiliki gaji kurang dari 40000 dan bonus kurang dari 10000 dengan query : SELECT NoKaryawan FROM TabelKaryawan WHERE Gaji < 40000 OR Bonus < 10000 Operator AND dan OR dapat dikombinasikan, contoh : SELECT NoKaryawan FROM TabelKaryawan WHERE Jabatan = Staf AND Gaji > 60000 OR Bonus > 12000 Awalnya SQL mencari baris-baris yang memenuhi kondisi gaji > 60000 atau bonus > 12000. Kemudian, dari baris-baris yang dihasilkan dicari lagi yang memenuhi kondisi jabatan = Staf. SQL akan mencari baris-baris yang memenuhi kondisi OR terlebih dahulu kemudian baris yang memenuhi kondisi AND. Agar kondisi AND dapat diproses terlebih dahulu, gunakan symbol ( dan ) di awal dan di akhir kondisi, contoh : SELECT NoKaryawan FROM TabelKaryawan WHERE Jabatan = Staf OR (Gaji > 50000 AND Bonus > 10000)
50
Query di atas akan menampilkan daftar manager atau siapapun yang memiliki gaji > 50000 dan keuntungan > 10000. Contoh 5 : Operator IN, contoh : SELECT NoKaryawan FROM TabelKaryawan WHERE Jabatan IN (Manager, Staf) Query di atas akan menampilkan data-data nomor karyawan dari manager dan staf. Operator BETWEEN dapat digunakan untuk menampilkan data-data yang memenuhi kisaran nilai tertentu, contoh : SELECT NoKaryawan FROM TabelKaryawan WHERE Gaji BETWEEN 30000 AND 50000 Query diatas akan menampilkan baris-baris yang memiliki gaji lebih besar atau sama dengan 30000 tetapi lebih kecil atau sama dengan 50000. Untuk memperoleh data-data yang tidak berada dalam kisaran nilai tertentu, gunakan operator NOT. Contoh : SELECT NoKaryawan FROM TabelKaryawan WHERE Gaji NOT BETWEEN 30000 AND 50000 Opeator NOT IN dapat digunakan untuk mendapatkan baris yang tidak berada dalam daftar IN. Contoh 6 : Perhatikan TabelKaryawan, seandainya kita ingin mendapatkan daftar orang-orang dengan nama belakang yang diawali dengan huruf L, maka query yang bisa digunakan :
51
SELECT NoKaryawan FROM TabelKaryawan WHERE NamaAkhir LIKE L% Simbol (%) melambangkan kemungkinan karakter (angka, huruf dan tanda baca) atau sekumpulan karakter yang muncul setelah huruf L. Untuk menampilkan nama yang diakhiri dengan huruf L, gunakan %L atau jika kita ingin huruf L berada ditengah nama, dapat digunakan %L%. 2. Perintah INSERT Perintah ini digunakan untuk memasukkan nol atau lebih baris ke table yang telah tersedia. Contoh : INSERT INTO tabelSaya (kolomA, kolomB, kolomC) values (nilaiA, nilaiB, nilaiC) 3. Perintah UPDATE Perintah ini digunakan untuk mengubah nilai sekumpulan baris dari table yang tersedia. Contoh : UPDATE tabelSaya set kolomA = updateA, kolomB = updateB WHERE kolomC = C 4. Perintah DELETE Perintah ini digunakan untuk menghapus nol atau lebih baris yang ada dari table. Contoh : DELETE tabelSaya WHERE kolomA = A
2.3 Menggabungkan Tabel

Umumnya semua data yang ingin diperoleh tidak berada dalam 1 (satu) table, untuk memperoleh data-data yang berada dalam table yang berbeda, kita dapat melakukan penggabungan table (join) terlebih dahulu. Perhatikan table-tabel di bawah ini :
PemilikBrgAntik NoPem NmAkhirPem NmAwalPem 01 Jones Bill
52
02 15 21 50
Smith Lawson Akins Fowler
Bob Patricia Jane Sam
BarangAntik NoPenj NoPemb Barang 01 02 15 21 50 01 02 15 01 02 21 50 50 15 02 50 01 21 21 50 15 21 02 01 Tempat Tidur Meja Kursi Cermin Meja Kecil Lemari Meja kopi Kursi Kotak Perhiasan Keramik Tempat Buku Pot
Pesanan NoPem Pes_Pem 02 02 21 15 Meja Meja Kecil Kursi Cermin
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
53
kriteria
penggabungan
yang
menyatakan
bahwa
baris-baris
yang
akan
digabungkan memiliki nilai NoPenj dan NoPem yang sama. Untuk menghilangkan ambiguitas dari nama table- nama kolom dapat digunakan symbol (.). Contoh query : SELECT PemilikBrgAntik .NmAkhirPem, PemilikBrgAntik .NmAwalPem FROM PemilikBrgAntik, BarangAntiks WHERE BarangAntiks.NoPenj= PemilikBrgAntik.NoPem AND BarangaAntiks.Barang= 'Kursi'
2.4 Menghilangkan Record yang Sama

Seandainya kita ingin mendaftarkan ID dan nama dari orang-orang yang telah menjual barang antik. Tentunya kita menginginkan daftar dimana nama penjual tidak muncul lebih dari sekali (kita tidak perlu tahu jumlah barang antik yang dijualnya hanya fakta bahwa orang tersebut telah menjual barang). Dengan demikian SQL harus menghilangkan baris-baris yang sama, dan hanya perlu mendaftar setiap orang hanya sekali. Untuk melakukan hal ini dengan menggunakan keyword DISTINCT. Pertama, kita perlu melakukan penggabungan dengan table PemilikBrgAntik untuk memperoleh data nama awal dan nama akhir, kemudian untuk menghilangkan baris yang sama kita gunakan keyword DISTINCT. Contoh query : SELECT DISTINCT NoPenj, NmAkhirPem, NmAwalPem FROM BarangAntiks, PemilikBrgAntik WHERE NoPenj = NoPem ORDER BY NmAkhirPem, NmAwalPem, NoPem Karena tiap penjual telah berhasil menjual sebuah barang maka kita akan mendapatkan daftar semua pemilik yang terurut berdasarkan nama akhir.
2.5
Subquery
Perhatikan query di bawah ini yang akan menampilkan daftar pemilik yang telah membuat pesanan serta pesanannya.
54
SELECT Own.NmAkhirPem Nama Akhir, Ord.Pes_Pem Barang Pesanan FROM Pesanan ord, PemilikBrgAntik own WHERE Ord.NoPem= own.NoPem AND Ord.Pes_pem in (SELECT Barang FROM BarangAntik); Hasil keluarannya adalah : Nama Akhir --------Smith Smith Akins Lawson Barang Pesanan -----------Meja Meja kecil Kursi 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 DROP ALTER : Membuat tabel dalam basis data : Menghapus tabel dalam basis data : Memodifikasi tabel yang telah ada
Contoh perintah CREATE :
55
CREATE TABLE tabelSaya ( kolom1 INT UNSIGNED, kolom2 VARCHAR (50), PRIMARY KEY (kolom1, kolom2) ) kolom1 dan kolom2 adalah nama kolom dari data yang akan disimpan. Int dan Varchar adalah tipe data. Primary Key digunakan untuk menentukan kolom yang menjadi primary key di tabel tersebut. Sebelum membuat tabel, kita harus menentukan nama tabel, data-data (kolom) apa saja yang akan disimpan dalam tabel tersebut beserta tipe data. Misalnya kita hendak menyimpan data transaksi penjualan, maka data-data yang diperlukan adalah nomor transaksi dengan tipe data int, tanggal transaksi dengan tipe data date, besar transaksi dengan tipe data int dan lainnya. Kemudian datadata tersebut disimpan dalam tabel yang dinamakan transaksi.
2.7
View
Data-data hasil query dapat disimpan ke sebuah tabel virtual yaitu view, yang selanjutnya dapat digunakan di query yang lain serta diberi nama sesuai dengan nama view. Contoh : CREATE VIEW ANTVIEW AS SELECT Pes_Pem FROM Pesanan; Hasil query Select Pes_Pem From Pesanan disimpan ke sebuah view yang bernama ANTVIEW. Perhatikan kode berikut ini : SELECT NoPenj FROM BarangAntik, ANTVIEW WHERE Pes_Pem = Barang; Query di atas akan menampilkan nomor pernjual dari tabel BarangAntik dimana pada tabel ini ada barang yang sama seperti barang yang ada di ANTVIEW. Ketika view diakses maka query dari view tersebut akan dijalankan kembali. View dapat digunakan untuk menyederhanakan query.
56
2.8
Stored Procedure dan Trigger
Kadangkala ada query-query yang sering digunakan dan hanya mengganti nilai yang ada di klausa WHERE. Contoh, untuk mendapatkan data tagihan akhir bulan, query yang digunakan akan sama hanya berbeda di nilai bulan saja. Untuk memenuhi keperluan tersebut maka DBMS menyediakan stored procedures yang adalah sekumpulan query yang disimpan ke sebuah file yang kemudian dapat dipanggil kembali dengan perintah tertentu. Contoh : EXECUTE TopikSama @id_ta = '31005', @login = '1202000745' Perintah diatas akan menjalankan stored procedure yang bernama TopikSama dengan masukan nilai id_ta dan login yang telah ditentukan. Jenis lain dari stored procedure adalah trigger. Trigger akan dijalankan oleh DBMS jika kondisi yang ditentukan telah terpenuhi. Contohnya trigger dijalankan ketika jumlah barang_tersedia lebih kecil dari barang_pesanan. Berikut ini contoh trigger dalam basis data SQL Server 2000 :
Gambar 2.8.1 Trigger di SQL Server 2000
57
2.9 Fungsi Aggregasi

Fungsi Aggregasi yang umum digunakan adalah : SUM() Fungsi untuk menjumlahkan nilai dari baris yang ditentukan AVG() Fungsi untuk mencari rata-rata dari kolom tertentu MAX() Fungsi untuk mencari nilai maksimum dari kolom yang ditentukan MIN() Fungsi untuk mencari nilai minimum dari kolom yang ditentukan COUNT() Menghitung jumlah baris yang memenuhi kondisi tertentu Berikut ini adalah contoh-contoh query dengan fungsi agregasi : 1. Query untuk mencari jumlah dan rata-rata gaji seluruh karyawan SELECT SUM(Gaji), AVG(Gaji) FROM TabelKaryawan; 2. Query untuk mencari nilai bonus manajer yang paling kecil SELECT MIN(Bonus) FROM TabelKaryawan WHERE Jabatan = 'Manager'; 3. Query untuk menghitung jumlah staf SELECT COUNT(*) FROM TabelKaryawan WHERE Jabatan = 'Staff';
Soal Latihan :
1. Keyword dalam klausa WHERE untuk mengurutkan adalah a. Having b. Order By c. Subquery d. Insert 2. Keyword untuk menghilangkan baris yang sama adalah a. Group By b. Select
58
c. View d. Distinct
Soal Praktek
Untuk soal nomor 3 hingga 5, perhatikan tabel dibawah ini : Nama Tabel : DEPT
Nama Tabel : EMP
3. Buatlah query yang menampilkan nama, NIP dan gaji yang memiliki gaji diantara 1200 hingga 1400 . 4. Buatlah query yang menampilkan daftar gaji tahunan dari manager 5. Buatlah query untuk menampilkan NIP yang memiliki gaji paling tinggi dan paling rendah.
59
BAB 3 PHP
Tujuan Instruksional Umum : 1. Siswa dapat menjelaskan pemrograman dengan PHP 2. Siswa dapat menjelaskan peranan web dinamis Tujuan Instruksional khusus : 1. Siswa dapat membuat program dengan PHP 2. Siswa dapat membuat form 3. Siswa dapat melakukan debugging 4. Siswa dapat membuat web dinamis Materi yang dibahas pada bab ini memenuhi : 1. TIK.PR02.021.01 Menerapkan basis data 2. TIK.PR02.028.01 Menerapkan dasar-dasar pembuatan web statik lanjut 3. TIK.PR04.003.01 Membuat halaman web dinamis lanjut 4. TIK.PR04.006.01 Menerapkan dasar validasi unjuk kerja situs web 5. TIK.PR04.007.01 Mengintegrasikan sebuah basis data dengan sebuah situs web 6. TIK.PR08.009.01 Membuat program aplikasi web berbasis PHP
Berikut ini adalah gambaran umum dari materi pada bab ini :
60
3.1 Pengenalan PHP

PHP merupakan bahasa berbentuk skrip yang ditempatkan dalam server dan diproses di server pula. Hasilnyalah yang akan dikirim ke client, tempat pengguna memakai web browser. Secara khusus, PHP dirancang untuk membentuk web dinamis. Hal ini berarti PHP dapat membentuk suatu tampilan berdasarkan permintaan terkini. Misalnya, Anda dapat menampilkan isi database ke halaman web. Pada prinsipnya, PHP memiliki fungsi yang sama dengan skrip-skrip seperti ASP, Cold Fusion, ataupun Perl. Kelahiran PHP pada tahun 1994, bermula saat Rasmus Lerdorf membuat sejumlah skrip Perl yang dapat mengamati siapa saja yang melihat-lihat daftar riwayat hidupnya. Skrip-skrip ini selanjutnya dikemas menjadi tool yang disebut Personal Home Page. Paket inilah yang menjadi cikal bakal PHP. Pada tahun 1995, Rasmus menciptakan PHP/F1 Versi 2. Pada versi inilah pemrograman dapat menempelkan kode terstruktur di dalam tag HTML. Hal yang menarik adalah kode PHP juga dapat berkomunikasi dengan database dan melakukan perhitungan-perhitungan yang kompleks. Pada saat ini, PHP cukup populer sebagai piranti pemrograman web, terutama di lingkungan Linux. Meskipun demikian, PHP sebenarnya juga dapat berfungsi 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. pada server-server yang berbasis UNIX, Windows NT, dan
61
3.2. Penginstalasian PHP 5

3.2.1. Meng-install PHP pada Windows
Pada Windows, Anda perlu memulai penginstalasian dengan cara mendownload kode biner PHP versi 5. Pergunakan installer .msi untuk
memudahkan Anda dan tentukan direktori penginstalasian pada c:\php5. Dengan adanya instalasi PHP, Anda dapat menjalankan interpreter PHP dari sebuah Windows DOS prompt:
C:\> php -v PHP 5.0.4 (cli) (built: Mar 31 2005 02:45:00) Copyright
1997-2004 The PHP Group Zend Engine v2.0.4-dev, Copyright (c) 1998-2004 Zend Technologies
Jika executable PHP tidak ditemukan, Anda perlu menambahkan c:\php5\bin pada path Anda. Pergunakan tab Advanced pada Control Panel dan klik pada tombol Environment Variables. Dari sana, editlah Path Variable, tambahkan c:\php5\bin pada path yang ada. Anda perlu menutup Command Prompt Windows lalu membuka Command Prompt yang baru untuk memastikan adanya hasil dari perubahan yang telah dibuat.
Anda harus memastikan pula bahwa PHP telah ter-install dan terintegrasikan dengan web server anda. Pada Windows, Anda memiliki dua pilihan untuk pengintegrasian tersebut, yaitu menggunakan web server Apache atau IIS (Internet Information Service). Apapun pilihannya, Anda perlu meng-copy file php.ini pada direktori Windows, c:\windows. Editlah file
c:\windows\php.ini dan ubahlah baris extension_dir agar terbaca sebagai berikut :
extension_dir = "c:\php5\ext" Selanjutnya, baris seperti berikut ini : extension=php_mysql.dll agar dapat mengakses database MySQL.
62
Sekarang kembali pada site PHP www.php.net dan download-lah koleksi dari modul-modul PECL. Simpanlah semua file DDL ke dalam direktori
c:\php5\ext. Semua ekstensi ini dibutuhkan jika Anda ingin mengakses database SQL atau jika Anda ingin menggunakan fungsi-fungsi grafika.
3.2.1.1. Meng-install PHP dengan Web Server Apache

Kunjungilah web site Apache www.apache.org dan download-lah Apache versi 1.3 yang telah precompiled untuk Windows. Ia akan muncul sebagai sebuah installer MSI. Setelah Apache ter-install maka langkah selanjutnya adalah menetapkan file http.conf di dalam direktori Apache conf (c:\Program Files\Apache lokasi default). Tambahkan baris berikut ini pada akhir dari file httpd.conf : LoadModule php5_module "c:/php5/php5apache.dll" AddModule mod_php5.c AddType application/x-httpd-php .php AddType application/x-httpd-php-source .phps Group\Apache\conf jika Anda meng-install Apache pada
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 :
63
Gambar 3.2.1.1.1 Halaman Pengetesan PHP pada instalasi Apache/Windows
Didalam file PHP info terdapat keterangan versi PHP yang di-install. Untuk melihat versi PHP, gunakan fungsi phpversion.
3.2.1.2. Meng-install PHP dengan Web Server IIS

PHP dapat di-install di versi PWS/IIS 3, PWS 4 atau yang terbaru dan IIS 4 atau yang terbaru. Setelah meng-install PHP pada direktori c:\php5, Anda dapat mengintegrasikan PHP ke dalam IIS melalui php5isapi.dll. Mulailah dengan membuka control panel IIS. Kemudian buatlah sebuah direktori virtual seperti yang ditunjukkan oleh Gambar 3.2.1.2.1 berikut ini :
Gambar 3.2.1.2.1 Membuat sebuah direktori virtual
64
Pastikanlah Anda telah menentukan execute permission secara benar, seperti yang terlihat pada Gambar 3.2.1.2.2 berikut :
Gambar 3.2.1.2.3 Menentukan Execute Permission dari direktori virtual
Selanjutnya, memunculkan
klik-kanan
pada
direktori
virtual Dialog,
dan
pilihlah
Properties. dapat
Kemudian pada Properties Dialog, klik pada tombol Configuration. Hal ini akan Application Mappings dimana Anda 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
65
Klik pada tombol Add untuk membuat sebuah mapping baru dan tetapkan Executable pada c:\php5\php5isapi.dll. Tentukan Extension menjadi .php, seperti yang terlihat pada Gambar 3.2.1.2.5 berikut ini :
Gambar 3.2.1.2.5 Mapping settings untuk PHP 5
Klik OK, kemudian lakukan navigasi ke direktori dokumen yang Anda tentukan saat membuat direktori virtual. Buatlah sebuah file yang bernama test.php dengan isi sebagai berikut : <?php phpinfo(); ?>
3.2.2 Meng-install PHP pada Linux

Proses penginstalasian PHP pada Linux sesungguhnya dimulai dengan menentukan apakah PHP telah ter-install sebelumnya. Pertama-tama Anda sebaiknya memeriksa keberadaan web server Apache pada instalasi Anda. Apakah mesin menampilkan halaman? Jika tidak, periksalah keberadaan Apache httpd executable : my-host$ find / -name httpd
66
Jika Anda menemukan kode biner Apache, pastikanlah ia telah berjalan sebagai bagian dari proses startup mesin Anda. Jika Apache tidak ter-install maka meng-install web server merupakan langkah awal Anda dalam penginstalasian PHP. Kunjungilah web site www.apache.org lalu download dan install-lah server tersebut.
Sekali Apache ter-install, maka langkah selanjutnya adalah memeriksa keberadaan instalasi PHP. Buatlah sebuah file bernama index.php dan tempatkanlah di dalam direktori dokumen Apache. File tersebut harus mengandung kode berikut ini :
<?php phpinfo(); ?> Lihatlah halaman dari file index.php melalui web browser. Jika Anda menemukan halaman seperti yang ditunjukkan oleh Gambar 1.6 maka berarti instalasi PHP telah bekerja. Namun, jika Anda melihat hanya teks dari file index.php maka PHP belum ter-install atau tidak aktif. Periksalah file konfigurasi httpd.conf Apache Anda. Jika Anda melihat baris seperti berikut ini: # LoadModule php4_module libexec/httpd/libphp4.so aktifkan baris kode tersebut dengan cara menghilangkan simbol hash (#) yang terdapat pada awal baris tersebut. Jika file tidak mengandung baris yang relevan dengan PHP maka berarti Anda harus meng-install PHP dari sumbernya. Meng-install PHP dari sumbernya berarti men-download file .tgz dari www.php.net. Ikutilah instruksi penginstalasian yang terdapat pada situs tersebut. Berikut ini contoh penginstalan pada PHP manual : 1. gunzip apache_1.3.x.tar.gz 2. tar xvf apache_1.3.x.tar 3. gunzip php-x.x.x.tar.gz 4. tar xvf php-x.x.x.tar
67
5. cd apache_1.3.x 6. ./configure --prefix=/www 7. cd ../php-x.x.x 8. ./configure --with-mysql --with-apache=../apache_1.3.x --enable-trackvars 9. make 10. make install 11. cd ../apache_1.3.x 12. ./configure --activate-module=src/modules/php4/libphp4.a 13. make 14. make install 15. cd ../php-x.x.x 16. cp php.ini-dist /usr/local/lib/php.ini 17. Edit your httpd.conf or srm.conf file and add: AddType application/x-httpd-php .php 18. restart Apache server.
Dengan PHP yang telah ter-install, maka seharusnya Anda dapat melakukan navigasi terhadap halaman index.php yang telah Anda buat sebelumnya dan memperoleh output seperti yang ditunjukkan oleh Gambar 3.2.2.1 berikut :
Gambar 3.2.2.1 Halaman pengetesan setelah meng-install PHP 5 pada Linux.
68
3.3. Variabel, Tipe Data, dan Operator

3.3.1. Variabel
Anda dapat membuat variabel-variabel untuk merepresentasikan data. Sebagai contoh, variabel berikut ini menyimpan sebuah nilai pajak penjualan : $pajak = 0.0875; Variabel berikut ini menyimpan sebuah perintah SQL :
$sql = "SELECT * FROM TableSaya"; Anda dapat menunjuk nilai dari variabel lain saat menentukan nilai dari sebuah variabel baru seperti contoh berikut : $total_pajak = $pajak_jual * $sub_total; Berikut ini adalah beberapa aturan dalam penamaan variabel : Nama variabel dimulai dengan sebuah tanda Dollar Nama variabel tidak dapat dimulai dengan sebuah karakter numerik Nama variabel dapat mengandung angka atau underscore Nama varibel bersifat case-sensitive (huruf kecil dan huruf kapital dibedakan) PHP menyediakan beberapa variabel automatic global yang artinya variabel ini dapat diakses dimanapun tanpa harus didefinisikan global. Variabel-variabel ini adalah : 1. Variable Environment ($_ENV) 2. Variabel cookies ($_COOKIES) 3. Variabel HTTP GET ($_GET) 4. Variabel HTTP POST ($_POST) 5. Variabel HTTP upload variable ($_FILES) 6. Variabel Request ($_REQUEST) 7. Variable Session ($_SESSION)
69
3.3.2. Tipe Data

Terdapat tiga tipe data umum pada PHP yang dapat digunakan untuk menentukan suatu variabel, yaitu float, integer, dan string.
Float
Masing-masing dari variabel berikut ini adalah bertipe float atau disebut juga floating-point number. Float dikenal sebagai nomor yang mengandung angka desimal. $a = 1.552; $b = 0.964; $pajak = 0.875;
Integer
Integer adalah semua bilangan bulat positif ataupun negatif dan nol. Masingmasing variabel berikut ini bertipe data integer : $a = 15; $b = -521;
String
Serangkaian karakter yang terkelompokkan di dalam tanda kutip ganda termasuk ke dalam tipe data string. Masing-masing variabel berikut ini bertipe data string : $a - "Saya String."; $b = "<P>Buku ini <strong>bagus</strong>!"; Anda juga dapat menunjuk variabel lain di dalam string Anda, yang akan diganti nilainya saat skrip dijalankan. Sebagai contoh adalah sebagai berikut : $num = 57; // sebuah integer $my_string = "Saya membaca buku ini $num kali!"; // sebuah string
70
Saat skrip dijalankan maka $my_string akan menjadi "Saya membaca buku ini 57 kali!" Selanjutnya kita akan membahas beberapa fungsi untuk string, diantaranya adalah : 1. Untuk mengakses karakter dari sebuah string dengan cara
$string{indeks}. Contoh : $str = Hari ini indah; $ketiga = $str[3] Keluaran dari variabel $ketiga adalah indeks ke 3 dari string str, yaitu i. Indeks dimulai dari 0 (nol). 2. parse_str() untuk mengubah string menjadi variabel. Contoh : <?php $str = "satu=nilai&arr[]=foo+bar&arr[]=baz"; parse_str($str); echo $nilai; // nilai echo $arr[0]; // foo bar echo $arr[1]; // baz parse_str($str, $output); echo $output['satu']; // nilai echo $output['arr'][0]; // foo bar echo $output['arr'][1]; // baz
?>
3. strcmp(str1, str2) digunakan untuk membandingkan 2 (dua) string. Perbandingan fungsi ini membedakan antara huruf besar dan huruf kecil. 4. strcasecmp(str1, str2) digunakan untuk membandingkan 2(dua) string tanpa mempertimbangkan jenis huruf dari string yang dibandingkan. 5. explode(pemisah, $str) menghasilkan array string dimana nilai array tersebut adalah substring dari $str yang dipisahkan dengan pemisah. Contoh : $pizza = "piece1 piece2 piece3 piece4 piece5 piece6"; $pieces = explode(" ", $pizza); $pieces adalah array string yang nilainya adalah pieces1, pieces2, pieces3, pieces4, pieces5, pieces6.
71
6. str_repeat(str, jml_pengulangan) akan menghasilkan keluaran berupa pengulangan str sebanyak jml_pengulangan. Contoh : $str = la. Maka str_repeat($str, 5) akan menghasilkan lalalalala. 7. stripslashes(str) akan menghilangkan simbol (\) sekali. 8. chr(kode_ascii) akan menambahkan karakter yang direpresentasikan dengan kode_ascii di akhir string. 9. addslashes(str) akan menghasilkan keluaran string yang telah ditambahkan dengan satu simbol (\) didepannya. 10. substr(str, pos_awal, pjg) akan mengembalikan bagian dari string yang dimulai dari indeks pos_awal sepanjang pjg. Contoh : $rest = substr("abcdef", 1); 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 = 'user@example.com'; $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. // keluaran "bcdef"
Array
Array merupakan sekumpulan variabel yang terkandung sebagai sebuah grup. Pada contoh berikut ini $Warna adalah sebuah array yang mengandung stringstring yang merepresentasikan elemen array. Elemen array bisa berupa string atau integer. Jumlah elemen array dapat dihitung dengan menggunakan fungsi count(). Pada contoh ini array-nya berisi nama-nama warna dengan elemen array berupa integer atau string : $Warna[0] = "merah"; atau $Warna[satu] = merah;
72
$Warna[1] = "biru"; atau $Warna[dua] = biru; $Warna[2] = "hitam"; atau $Warna[tiga] = hitam; $Warna[3] = "putih"; atau $Warna[empat] = putih; kode echo $Warna[2] akan mengembalikan nilai dari array dengan elemen 2. Demikian juga dengan kode $Warna[dua] akan mengembalikan nilai dari array dengan elemen dua. Index array dimulai dengan 0 (nol) sebagai posisi awal dari isi elemen pertama. Selain kode di atas, cara lain untuk membuat array dengan menggunakan fungsi array(), contoh : $Warna = array('merah', 'biru', 'hitam', 'putih'); Kode ini sama dengan kode definisi array sebelumnya dengan elemen array berupa integer. Fungsi ini juga dapat digunakan untuk membuat array 2 dimensi, perhatikan contoh di bawah ini :
$2Dim = array ( "buah" => array ("a"=>"jeruk", "b"=>"pisang", "c"=>"apel"), "angka" => array (1, 2, 3, 4, 5, 6), ); (Elemen array) => (nilai array). Kode echo $2Dim[buah][a] akan menampilkan string jeruk. Nilai dalam array dapat di urutkan dengan menggunakan fungsi
diantaranya sebagai berikut : sort(array) : mengurutkan nilai array krsort(array) : mengurutkan array secara terbalik berdasarkan elemen array ksort(array) : mengurutkan array berdasarkan elemen array rsort(array) : mengurutkan nilai array secara terbalik
Selanjutnya kita akan mempelajari berbagai fungsi array yang disediakan: array_change_key_case(array, CASE_LOWER/CASE_UPPER) untuk mengubah jenis huruf dari elemen array menjadi huruf besar semua atau huruf kecil semua. array_chunk(array, jml) untuk membagi array menjadi beberapa array lagi dengan jumlah elemen yang ditentukan.
73
array_count_values(array) untuk menghitung jumlah tiap nilai array. array_diff(array1, array2) untuk menghasilkan array dengan nilai array1 yang tidak berada di array2. Contoh : $array1 = array ("a" => "hijau", "merah", "biru", "merah"); $array2 = array ("b" => "hijau", "kuning", "merah"); $hsl = array_diff ($array1, $array2); Nilai $hsl adalah biru.
array_merge(array1, array2) untuk menggabungkan array array_shift(array1) untuk menghilangkan nilai dari elemen array terkecil. Contoh : $stack = array ("jeruk", "pisang", "apel", "raspberry"); $buah = array_shift ($stack); Isi array $buah adalah pisang, apel dan raspberry.
array_search(nilai, array) untuk mencari nilai dalam array dan mengembalikan elemen array dari nilai tersebut. array_rand(array) untuk mengambil nilai dalam array secara acak array_fill(elemen_awal, jml, nilai) untuk mengisi array dari elemen awal sebanyak jml dengan nilai tertentu. Contoh :
$a = array_fill(5, 6, 'pisang'); print_r($a);
Nilai $a :
Array ( [5] [6] [7] [8] [9] [10] )
=> => => => => =>
pisang pisang pisang pisang pisang pisang
array_unique(array) akan menghasilkan array tanpa nilai duplikasi. array_unshift(array, [nilai,..]) untuk memasukkan nilai di akhir array. Contoh :
$queue = array ("orange", "banana");
74
array_unshift ($queue, "apple", "raspberry"); Akan menghasilkan :
Array ( [0] [1] [2] [3] )
=> => => =>
apple raspberry orange banana
in_array(nilai, array) untuk mencari nilai dalam array array_push(array, $var) untuk meletakkan variable baru di akhir array
3.3.3. Operator Operator Penugasan

Salah satu operator penugasan yang sudah Anda kenal adalah operator = yang digunakan untuk memberikan nilai ke suatu variabel. Berikut ini merupakan beberapa operator penugasan lainnya yang tersedia dalam PHP :
Tabel 3.3.3.1 : Operator Penugasan
No. 1
Operator +=
Kegunaan Menambahkan variabel di sisi kiri dengan nilai di sisi kanan.
Contoh X += 2; identik dengan X = X + 2; X -= 2; identik dengan X = X 2; X /= 2; identik dengan X = X / 2; X %= 2; identik dengan X = X % 2; X .= A; identik dengan X = X . A;
-=
Mengurangi variabel di sisi kiri dengan nilai di sisi kanan.
3 4
/= %=
Membagi variabel di sisi kiri dengan nilai di sisi kanan. Memperoleh sisa pembagian antara variabel di sisi kiri dengan nilai di sisi kanan.
.=
Melakukan operasi konkatenasi terhadap variabel di sisi kiri dengan nilai di sisi kanan.
75
Operator Aritmatika
Operator aritmatika merupakan operator yang biasa digunakan dalam operasi matematika. Tabel 3.3.3.2 memperlihatkan daftar operator aritmatika pada PHP.
Tabel 3.3.3.2 : Operator Aritmatika
No.
1 2 3 4 5
Operator
Kegunaan
Penjumlahan Pengurangan Perkalian Pembagian 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.
1 2 3 4 5 6
Operator
Kegunaan
Sama dengan Tidak sama dengan Lebih dari Kurang dari Lebih dari atau sama dengan Kurang dari atau sama dengan
== != atau <> > < >= <=
Operator Logika
Operator logika biasa digunakan untuk menggabungkan kondisi berganda dan menghasilkan sebuah ekspresi yang bernilai benar (nilai 1) atau salah (nilai 0).
76
Tabel 3.3.3.4 : Operator Logika
No.
1 2 3 4
Operator
&&
Kegunaan
AND OR XOR 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
77
setiap akhir kode PHP diikuti dengan simbol (;) yang menandakan bahwa kode selanjutnya adalah kode baru.
3.4.2. Menangani Input dan Output

Pada bagian ini akan dibahas sejumlah fungsi yang terkait dengan operasi untuk menyimpan dan membaca data ke atau dari sebuah file.
3.4.1.1 Membuka dan Menutup File

Untuk sebagian besar fungsi-fungsi sistem file, file-file tersebut harus dibuka terlebih dahulu. Fungsi fopen() yang dapat melakukan hal tersebut dan mengembalikan sebuah file handle. File handle ini dapat digunakan untuk fungsi-fungsi selanjutnya, seperti contohnya, membaca informasi dari sebuah file atau menulis ke file tersebut. Berikut ini merupakan format membuka dan menutup file : ($fp = @fopen('file.txt', 'at')//$fp menyimpan nilai file handle fclose($fp);
fopen() memiliki sedikitnya dua buah parameter yaitu nama file dan mode penggunaan file saat file tersebut diakses. Berikut ini merupakan contoh dari sebuah skrip yang dapat membuka dan menutup file. <?php if ($fp = @fopen('file.txt', 'at')) { echo 'File opened.'; fclose($fp); echo '<br />File closed.'; } else { echo 'Error opening file.'; } ?> Pada parameter mode file, terdapat sebuah string yang terdiri dari satu atau lebih karakter. Karakter pertama adalah salah satu dari karakter a, r, w, atau x, setelah itu satu atau lebih modifier khusus dapat digunakan. Tabel 3.4.1.1.1 ini menampilkan semua mode yang tersedia pada PHP. Jadi modifier + selalu menambahkan akses baca dan tulis yang hilang pada sebuah mode file. Jika Anda menambahkan b ke sebuah mode file, berarti Anda memaksa PHP untuk membuka sebuah file sebagai file biner, sebagai
78
contohnya, mode file rb membuka sebuah file untuk membaca dalam mode biner.
Tabel 3.4.1.1.1 : Mode Pengaksesan File
Mode
A a+ r r+
Keterangan
Membuka file untuk menuliskan data, buat file tersebut jika belum ada. Sama seperti mode a, tetapi dengan tambahan membaca file tersebut. Membuka file untuk membaca data. Sama seperti mode r, tetapi dengan tambahan menulis ke file tersebut.
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 x+
Membuat file untuk menuliskan data, kirimkan tersebut telah ada.
E_WARNING jika file
Sama seperti mode x, tetapi dengan tambahan membaca ke file. mengembalikan sebuah file handle atau FALSE jika operasi
fopen()
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') { // ... }
79
Pada tabel berikut akan dijelaskan beberapa fungsi lainnya yang berkaitan dengan pengaksesan file :
Tabel 3.4.1.1.2 : Mode Pengaksesan File
No.
Fungsi
Keterangan
Untuk merekam data ke file. Setelah data direkam, pointer file akan
menunjuk ke posisi sesudah karakter terakhir 1 fputs(file_handle, data) yang ditulis. Fungsi nilai balik akan
mengembalikan
berupa
TRUE jika data berhasil direkam atau FALSE Argumen jika data gagal direkam. diperoleh
file_handle
ketika memanggil fopen(). Untuk membaca data yang terdapat di 2 fgets(file_handle, panjang) dalam file. Argumen jumlah panjang yang
menyatakan
karakter
hendak dibaca. Untuk membaca sebuah karakter dari file. Nilai balik yang diberikan berupa 3 fgetc(file_handle) sebuah karakter yang sedang ditunjuk oleh pointer file. Pointer akan bergeser ke posisi karakter berikutnya setelah data dibaca. Untuk memeriksa apakah pointer file 4 feof(file_handle) sedang menunjuk ke bagian akhir file atau tidak.
80
3.4.1.2 Aliran Kontrol

Pada dasarnya, program merupakan serangkaian pernyataan-pernyataan. Aliran kontrol, seperti yang tersirat dari namanya, mengontrol bagaimana pernyataan-pernyataan tersebut dijalankan. Biasanya aliran kontrol dibuat berdasarkan serangkaian kondisi yang ada.
3.4.1.2.1 Pernyataan if
Pernyataan if biasa digunakan untuk mengambil keputusan berdasarkan suatu kondisi. PHP memiliki tiga macam bentuk if, yaitu if saja, if-else, dan if-elseif. Pada contoh berikut, kondisi yang diujikan adalah $a bernilai 10 .
if ($a == "10") { // jalankan suatu kode } Setelah nilai $a dievaluasi, jika ternyata variabel tersebut bernilai 10 (berarti kondisi terpenuhi/benar), maka kode yang terdapat di dalam kurung kurawal akan dijalankan. Namun, jika ternyata variabel tersebut bernilai selain 10 (berarti kondisi tidak terpenuhi/salah), maka kode di dalam kurung kurawal akan diabaikan dan eksekusi program akan berlanjut ke kode berikutnya. Untuk memberikan serangkaian pernyataan alternatif dimana nilai $a tidak harus memenuhi kondisi bernilai 10, tambahkan sebuah pernyataan else pada aliran kontrol tersebut. Dengan demikian bagian dari pernyataan yang lainnya akan dijalankan saat kondisi tidak terpenuhi.
if ($a == "10") { echo "a bernilai 10"; } else { echo "a tidak bernilai 10"; } Pernyataan elseif dapat ditambahkan pada struktur untuk mengevaluasi sebuah kondisi alternatif sebelum sampai pada pernyataan else yang terakhir. Sebagai contohnya, pada struktur berikut ini pertama-tama mengevaluasi apakah $a bernilai 10. Jika kondisi if tersebut tidak terpenuhi (salah), maka pernyataan elseif akan dievaluasi. Jika kondisi tersebut terpenuhi (benar), maka kode yang terdapat di dalam kurung kurawal akan
81
dijalankan. Jika ternyata pernyataan kondisi tersebut masih belum benar, maka eksekusi program akan berlanjut hingga kepada pernyataan else yang terakhir. if ($a == "10") echo "a } elseif ($b == echo "b } else { echo "a } { bernilai 10"; "8") { bernilai 8"; tidak bernilai 10 and b tidak bernilai 8.";]
3.4.1.2.2 Pernyataan while

Tidak seperti struktur if, dimana setiap kondisi dievaluasi sekali dan sebuah aksi dilakukan berdasarkan pada nilai benar atau salahnya, pernyataan while akan me-loop hingga kondisinya salah. Dengan kata lain, while loop berlanjut selama kondisinya terpenuhi/benar. Jika kondisi tidak terpenuhi maka perintah dalam while sama sekali tidak di jalankan. Berbeda dengan While, Do..While akan menjalankan perintah dalam while minimal 1 kali. Sebagai contoh, while loop berikut ini, nilai variabel $a akan dicetak pada layar dan ditambahkan satu selama nilai $a lebih kecil dari atau sama dengan 5. $a = 0 // menentukan sebuah nilai permulaan while ($a <= "5") { echo "a sama dengan $a<br>"; $a++; } Berikut ini merupakan output dari while loop tersebut : a sama dengan 0 a sama dengan 1 a sama dengan 2 a sama dengan 3 a sama dengan 4 a sama dengan 5
3.4.1.2.3 Pernyataan for

Seperti halnya while loop, for loop mengevaluasi serangkaian pernyataan kondisi pada permulaan tiap-tiap loop. Berikut ini merupakan syntax dari for loop :
82
for (expr1; expr2; expr3) { // kode untuk dieksekusi } Pada permulaan setiap loop, ekspresi pertama dievaluasi, diikuti dengan ekspresi kedua. Jika ekspresi kedua terpenuhi, maka loop akan berlanjut dengan pengeksekusian kode lalu mengevaluasi ekspresi ketiga. Namun, jika ekspresi kedua tidak terpenuhi, maka loop tidak akan berlanjut dan ekspresi ketiga tidak akan pernah dievaluasi. Marilah kita ambil contoh yang telah digunakan pada while loop, lalu menulisnya kembali dengan menggunakan sebuah for loop. for ($a = 0; $a <= "5"; $a++) { echo "a sama dengan $a<br>"; }
Output yang diperoleh akan sama saja dengan output yang dihasilkan pada penggunaan while loop sebelumnya.
3.4.1.2.4 Pernyataan switch

Pernyataan switch merupakan sebuah cara sederhana untuk menampilkan tugas-tugas yang dapat dilakukan dengan pernyataan dasar if. Tujuan dari pernyataan switch adalah memungkinkan pihak pengembang untuk
menempatkan sebuah blok kode pada masing-masing kasus (case) yang berbeda. Berikut ini merupakan bentuk umum dari pernyataan switch : switch($variable) { [case <constant>:] /* kode akan dijalankan jika $variable = 1 */ [break;] [case <constant>:] /* kode akan dijalankan jika $variable = 2 */ [break;] ...kasus tambahan [default:] /* kode akan dijalankan jika tdk ada kasus yg cocok */ } Konstanta case tidak terbatas pada nilai integer sebagaimana pada bahasa lainnya seperti C. Pada PHP, nilai konstanta dapat pula menggunakan string dan floating point number. Di dalam
83
penggunaannya,
pernyataan
switch
menyediakan
sebuah
variabel
tunggal yang nilainya akan dibandingkan dengan nilai variabel nilai variabel yang terdapat pada masing-masing pernyataan kasus (case) secara individual. Pada kenyataannya, pernyataan switch serupa dengan serangkaian pernyataan if.
3.4.1.3 Ekspresi Reguler

Ekspresi reguler menyediakan mekanisme untuk memanipulasi dan mencocokkan string. Sebagai gambaran, Anda dapat memeriksa suatu string yang mengandung karakter, suku kata, atau kata tertentu, atau bahkan diawali dan diakhiri dengan string tertentu. Dengan menggunakan ekspresi reguler, bagian dari suatu string dapat digantikan dengan suatu substring. Pada aplikasi internet, salah satu penggunaan ekspresi reguler adalah untuk memeriksa keabsahan penulisan alamat e-mail.
3.4.1.3.1 Mengenal fungsi ereg

Pada PHP, tersedia fungsi bernama ereg yang dapat digunakan untuk menangani ekspresi reguler. Bentuk dasar pemanggilan fungsi ini adalah sebagai berikut : ereg (pola, sumber) Fungsi ini menghasilkan nilai TRUE jika string pada pola cocok dengan string yang terdapat pada sumber. Namun, fungsi akan menghasilkan nilai FALSE jika pola tidak cocok dengan string sumber. Berikut ini adalah contoh dari pemeriksaan suatu substring dalam suatu string: ereg (BILA, APABILA) Fungsi di atas akan menghasilkan nilai TRUE karena string BILA terdapat pada string APABILA. Sedangkan contoh berikut ini berusaha mencocokkan suatu substring yang terletak di awal suatu string dengan menggunakan tanda ^ : ereg (^hari, Pada suatu hari yang cerah)
84
Fungsi di atas akan menghasilkan nilai FALSE karena string sumber (argumen kedua) tidak diawali dengan hari. Jika Anda ingin menentukan apakah suatu substring terletak di akhir string, maka Anda perlukan menambahkan tanda $ di bagian akhir substring tersebut. Berikut ini merupakan contohnya : ereg (indah$, alangkah indah) Fungsi di atas akan menghasilkan nilai TRUE karena string alangkah indah memang diakhiri dengan indah. Jika Anda ingin memeriksa suatu string mengandung huruf vokal atau tidak, maka Anda dapat menggunakan kelas karakter seperti contoh berikut ini : ereg ([aiueo], vwxyz) Fungsi di atas akan menghasilkan nilai FALSE, sedangkan fungsi berikut : ereg ([aiueo], ink) ereg ([aiueo], ton) ereg ([aiueo], fanta) akan menghasilkan nilai TRUE karena argumen kedua mengandung sedikitnya satu huruf yang terdapat pada kurung siku argumen pertama.
3.4.1.3 Membuat Fungsi

Kita dapat membuat fungsi dalam PHP dengan sintaks : function nama_func ($arg_1, $arg_2, ..., $arg_n) { echo "Contoh fungsi.\n"; return $retval; } keyword return berarti fungsi ini akan mengembalikan sebuah nilai. Beberapa contoh fungsi dalam PHP adalah :
fungsi kompresi (BZip2) fungsi penanggalan Yang termasuk dalam fungsi ini adalah cal_days_in_month() untuk mengembalikan jumlah hari dalam 1 bulan, easer_date() untuk mencari tahu tanggal-bulan-tahun hari paskah, easter_days() akan mengembalikan tanggal hari paskah di tahun tertentu.
Fungsi Waktu
85
Fungsi yang sering digunakan adalah date(format). Fungsi ini untuk melakukan format waktu. Contoh : date ("l dS of F Y h:i:s A"); akan menghasilkan keluaran Wednesday 15th of January 2003 05:51:38 AM. Berikut ini adalah format waktu dalam PHP : Karakter Keterangan a A d D F h H i j m M n t Y y z Nilai
Huruf kecil Ante meridiem dan Post meridiem am atau pm Huruf besar Ante meridiem dan Post meridiem tanggal, 2 digits dengan awalan 0 Representasi teks dari hari Nama Bulan Jam, 2 digit dengan awal 0, format 12 jam Format 24-jam Menit dengan awal 0 Tanggal tanpa awal 0 Representasi angka dari bulan dengan awalan 0 Representasi 3 digit dari nama bulan Representasi angka dari bulan tanpa awalan 0 Jumlah hari dalam bulan tertentu Representasi 4 digit dari tahun Representasi 2 digit dari tahun Hari dalam setahun AM atau PM 01 hingga 31 Mon hingga Sun January hingga December 01 hingga 12 00 hingga 23 00 hingga 59 1 hingga 31 01 hingga 12 Jan hingga Dec 1 hingga 12 28 hingga 31 Contoh: 1999 atau 2003 Contoh: 99 atau 03 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.
86
Fungsi perhitungan PHP menyediakan berbagai fungsi untuk menyederhakan perhitungan seperti fungsi untuk mencari nilai maksimal max(), fungsi untuk membulatkan float round(), fungsi pembulatan keatas ceil(), fungsi pembulatan kebawah floor(), fungsi untuk memangkatkan pow(int, exp), fungsi untuk mengubah desimal menjadi binari decbin(decimal) dan lainnya.
3.5 Paket, Modul, Kelas, dan Objek

Dikarenakan semakin bertambah kompleksnya skrip-skrip yang ada, kesulitan dalam pemeliharaan skrip-skrip tersebut pun menjadi semakin meningkat pula, khususnya ketika Anda melakukan pemrograman dalam sebuah gaya prosedural. Konsep dari Object-Oriented Programming (OOP) adalah menyediakan sebuah struktur organisasional yang nyata terhadap skrip-skrip Anda melalui enkapsulasi. Meskipun PHP 4 telah memperkenalkan OOP ke dalam PHP, ia tidak dianggap sebagai sebuah impelementasi OO sejati. Dikarenakan beberapa keterbatasan penting dalam PHP 4, maka model objek pada PHP 5 secara lengkap telah dirancang ulang agar secara lebih akurat dapat mencerminkan definisi OOP sesungguhnya.
3.5.1. Membuat Kelas di dalam PHP 5

Kelas adalah kumpulan variabel dan fungsi yang berkerja dengan variable tersebut. Pada PHP 5, mendefinisikan dan mengunakan kelas tidak terlalu mengalami perubahan besar. Berikut ini merupakan sebuah contoh cara membuat kelas pada PHP 5 :
<?php class myPHP5Class { public $my_variable; public function my_method($param) { echo "Hello, you called my_method($param)!\n"; echo "The value of my variable is: "; echo "{$this->my_variable}\n"; } } ?> Pada PHP 4 tidak ada konsep kontrol pengaksesan dalam objek. Sedangkan pada PHP 5, model objek sekarang menyediakan tiga level pengaksesan bagi anggota-anggota kelas, yang membatasi data apa saja yang dapat diakses
87
dari tempat skrip Anda berada. Ada tiga buah tipe pengaksesan yaitu public, private, dan protected yang dapat diterapkan baik pada method maupun property dari sebuah kelas, seperti yang terlihat pada potongan kode di atas. Semua anggota kelas yang dideklarasikan public dapat diakses dari manapun dalam sebuah skrip. Mereka dapat dipanggil atau diubah secara internal oleh objek atau dari luar objek. Hal tersebut tidak berlaku bagi semua anggota kelas yang dideklarasikan dengan menggunakan private, yang memungkinkan pengaksesan terhadap anggota kelas hanya dari dalam sebuah instance kelas tersebut melalui variabel $this. Berikut ini merupakan contoh penggunaan public dan private dalam sebuah kelas (dengan melakukan perubahan sedikit pada kode sebelumnya) :
<?php class myPHP5Class { private $my_variable; public function my_method($param) { echo "Hello, you called my_method($param)!\n"; echo "The value of my variable is: "; echo "{$this->my_variable}\n"; } } ?> Saat sebuah instance dari myPHP5Class dibuat, usaha untuk mengakses properti $my_variable dari luar objek akan menyebabkan sebuah kesalahan dalam PHP. <?php $myobject = new myPHP5Class(); /* This is allowed, as my_method is declared public */ $myobject->my_method("MyParam"); /* This will cause an error, $my_variable is private */ $myobject->my_variable = 10; ?> Saat kode diatas dieksekusi, maka pesan kesalahan berikut ini akan muncul :
Fatal Error: Cannot access private property myPHP5Class::my_variable in..
Level pengaksesan protected serupa dengan private, karena ia mencegah pengaksesan anggota kelas secara eksternal. Namun tidak seperti private, yang membatasi pengaksesan hanya pada kelas tertentu dimana ia
88
didefinisikan, protected memungkinkan pengaksesan baik dari kelas itu sendiri maupun kelas-kelas anak/turunannya (child classes). Terkadang kita membutuhkan kelas dengan variabel dan fungsi yang mirip dengan kelas yang telah ada. Hal ini dapat dilakukan dengan extends. Perhatikan kode di bawah ini : class Gen_mbl extends Mobil { var $pemilik; function set_pemilik ($nama) { $this->pemilik = $nama; } } Kelas Gen_mbl akan memiliki semua variabel serta fungsi yang dimiliki kelas mobil ditambah dengan fungsi dalam kelas itu sendiri.
3.5.2. Membuat dan Melewatkan Sebuah Objek

Perubahan terbesar yang juga dapat menimbulkan masalah dengan kode lama yaitu melewatkan objek. Pada PHP 4, hal tersebut dapat dilakukan dengan menggunakan nilai secara default. Sebuah objek di-copy dan hasilnya tersebut akan dilewatkan ke sebuah method. Pada PHP 5, hal tersebut mengalami perubahan secara mendasar. Sekarang objek secara default akan dilewatkan melalui referensinya (passed by reference). Hal ini berarti mengubah objek di dalam method yang dilewatinya akan mengubah pula objek aslinya. Berikut ini merupakan sebuah contoh kode yang melewatkan objek : <?php class Programmer { var $name; function Programmer($s) { $this->name = $s; } } function GeekMode($p) { $p->name .= " aka Coogle"; } $p = new Programmer("John Coggeshall");//membuat sebuah objek echo("<p>They call him " . $p->name . "</p>"); GeekMode($p); echo("<p>They also call him " . $p->name . "</p>"); ?>
89
Pada PHP 4, "They call him John Coggeshall" akan dicetak sebanyak dua kali. Sedangkan pada PHP 5, pada kali kedua sistem akan mencetak "They call him John Coggeshall aka Coogle". Hal tersebut disebabkan objek Programmer dilewatkan pada fungsi GeekMode() secara passed-by-reference, sehingga perubahan pada objek tersebut juga tampak pada rutin utama. Perintah $object2 = $object1 menciptakan sebuah rujukan (reference) ke $object1 di dalam $object2. Jika Anda ingin membuat sebuah kopian yang dapat Anda ubah-ubah secara independen, gunakanlah sebuah perintah baru clone, seperti contoh berikut ini : $object2 = clone $object1; Pada PHP 5, membandingkan objek dengan operator == akan
mengembalikan nilai true hanya jika referensinya merujuk ke objek yang identik. Pada contoh di atas, $this berarti objek dari kelas itu sendiri. Tanda digunakan untuk mengakses method ataupun property.
3.6 Form dan Kontrol
3.6.1. Pemrograman form

Pemrosesan kode PHP adalah pada sisi server. Dengan demikian, pihak client tidak dapat melihat kode PHP yang sesungguhnya. Kode PHP berada di dalam tag <BODY></BODY> pada form HTML seperti yang terlihat berikut ini :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Calculate Va1ues</TITLE> </HEAD> <BODY> <?php // tuliskan kode PHP di sini! ?> </BODY> </HTML>
90
Mengambil nilai dari form

Form HTML selalu memiliki tiga buah elemen, yaitu method, aksi, dan tombol submit. Saat Anda mengklik sebuah tombol submit pada form HTML, semua variabel akan dikirim ke skrip yang ditentukan oleh ACTION (aksi) melalui METHOD tertentu. Method tersebut dapat berupa POST atau GET. Variabel dilewatkan melalui sebuah form menuju sebuah skrip PHP yang ditempatkan di dalam array global asosiatif (superglobal) yang disebut $_POST atau $_GET, tergantung pada method dari form tersebut. Sebagai contoh, potongan HTML berikut ini memanggil sebuah skrip bernama perhitungan.php dengan menggunakan method POST. <FORM method="POST" action=" perhitungan.php"> <! Beberapa elemen form berada di sini --> <INPUT type="submit" value="Hitung"> </FORM> Form berikut ini memiliki sebuah input text field dan oleh karenanya melewatkan sebuah variabel ke sebuah skrip yang bernama formku.php : <FORM method="POST" action="formku.php"> <P>Nama: <INPUT type="text" name="nama_anda" size=10></P> <INPUT type="submit" value="Submit"> </FORM> Selama proses pengajuan/submisi, skrip formku.php menerima sebuah variabel bernama $_POST[nama_anda], dengan sebuah nilai apapun yang diketikkan oleh pengguna pada kolom form. Variabel diberi nama sesuai dengan nama atribut pada kolom input.
3.6.2. Menggunakan fungsi form

Ketika Anda membuat sebuah form di dalam HTML, penulisan sebuah tag HTML yaitu <FORM> merupakan hal pertama kali dilakukan. Tag ini
menyatakan bagian dari dokumen HTML yang mengandung semua widget yang mendefinisikan form. Beberapa widget tersebut antara lain berupa text fields, check boxes, option buttons, dsb. Tag <FORM> itu sendiri memiliki sejumlah atribut yang berhubungan dengannya yang dapat mendefinisikan
91
perilakunya saat sebuah form di-submit. Pada bagian berikut ini akan dijelaskan tag dari masing-masing widget.
3.6.2.1. Text and Password Field

Kegunaan text atau password field adalah untuk memasukkan sebarisan teks. Berikut ini merupakan contoh tag dari sebuah text field. <INPUT TYPE="TEXT" NAME="mytextfield" VALUE="My Default Value" SIZE=30 MAXLENGTH=30> Sedangkan di bawah ini merupakan contoh dari tag sebuah password field : <INPUT TYPE="password" NAME="mypassword" VALUE="You cannot read this on the browser"> Berikut ini merupakan penjelasan dari masing-masing atribut yang terdapat di dalam tag tersebut: NAME menyatakan nama yang diberikan pada sebuah text field. SIZE menyatakan ukuran karakter text field pada browser. MAXLENGTH menyatakan jumlah maksimum karakter yang diterima dalam sebuah text field. VALUE menyatakan nilai default sebuah text field.
3.6.2.2. Option Button and Check Box

Sebuah method yang memungkinkan pengguna untuk memilih sebuah item tunggal dari sebuah daftar pilihan adalah option button. Pada HTML, option button dapat dibuat dengan menentukan atribut TYPE pada sebuah tag <INPUT> menjadi RADIO. Sebuah option widget hanya memiliki tiga buah atribut yaitu NAME, VALUE, and CHECKED. Berikut ini merupakan beberapa hal yang perlu Anda perhatikan saat menggunakan option button : Untuk sebuah grup option button agar dapat berfungsi secara benar dan berlaku sebagai satu grup (berarti hanya satu pilihan saja yang dapat dipilih), maka setiap option button dalam grup tersebut harus memiliki nilai yang sama pada atribut NAME. Atribut CHECKED tidak diberikan sebuah nilai dan hanya satu atribut CHECKED yang dapat eksis untuk tiap-tiap grup option button.
92
Atribut VALUE tidak akan ditampilkan pada browser, tetapi merupakan nilai yang akan di-submit saat form tersebut di-submit.
Berikut ini merupakan contoh dari sebuah tag option button : <INPUT TYPE="radio" Football<BR> <INPUT TYPE="radio" <INPUT TYPE="radio" <INPUT TYPE="radio" NAME="myradio" CHECKED VALUE="1"> NAME="myradio" VALUE="2"> Soccer<BR> NAME="myradio" VALUE="3"> Hockey<BR> NAME="myradio" VALUE="4"> Baseball<BR>
Serupa dengan option button, sebuah check box memungkinkan pengguna untuk memilih sejumlah pilihan yang tersedia. Sebuah check box dibuat dengan menentukan atribut TYPE dari sebuah tag <INPUT> menjadi CHECKBOX. Tidak seperti pada sebuah option button, Anda tidak perlu memberikan nama yang sama untuk masing-masing check box. Selain itu, tidak ada batasan mengenai jumlah atribut CHECKED yang dapat muncul. Berikut ini merupakan sebuah contoh dari tag check box : <INPUT TYPE="checkbox" Football<BR> <INPUT TYPE="checkbox" Soccer<BR> <INPUT TYPE="checkbox" Hockey<BR> <INPUT TYPE="checkbox" Baseball<BR> NAME="mycheckbox1" CHECKED VALUE="1"> NAME="mycheckbox2" VALUE="2"> NAME="mycheckbox3" CHECKED VALUE="3"> NAME="mycheckbox4" VALUE="4">
3.6.2.3 List and Drop-Down List

Ketika Anda membuat sebuah form, HTML menyediakan sejumlah cara untuk memilih item-item dari sebuah daftar (list). Sebuah list dapat direpresentasikan sebagai sebuah barisan tunggal dimana pengguna mengklik sebuah tanda panah untuk dapat melihat semua pilihan yang ada (dropdown list). Berikut ini merupakan sebuah contoh dari tag dropdown list : <SELECT NAME="foods" SIZE=4 MULTIPLE> <OPTION VALUE="Chinese">I like Chinese food</OPTION> <OPTION VALUE="Mexican">I like Mexican food</OPTION> <OPTION VALUE="American">I like American food</OPTION> <OPTION VALUE="Italian">I like Italian food</OPTION> <OPTION VALUE="none">I don't like any of these foods</OPTION> </SELECT> Dari tag di atas, terlihat bahwa terdapat beberapa atribut dengan penjelasan sebagai berikut :
93
NAME : Nama yang diberikan kepada sebuah list. SIZE : Jumlah item yang akan ditampilkan sekali di dalam list. MULTIPLE : Sebuah flag yang menandakan apakah dapat memilih banyak item.
VALUE : Nilai yang akan di-submit jika item dipilih. SELECTED : Sebuah flag yang menandakan jika item tersebut dipilih secara default.
3.6.2.4. Text Area

Untuk memungkinkan pengguna dapat memasukkan banyak barisan teks, HTML menyediakan <TEXTAREA> widget dengan atribut-atribut sebagai
berikut:
NAME : Nama yang diberikan kepada text area. COLS : Jumlah lebar kolom (dalam karakter) dari text area tersebut ROWS : Jumlah panjang baris (dalam karakter) dari text area tersebut WRAP : Menentukan bagaimana teks seharusnya di-submit berkaitan
dengan bagaimana teks tersebut diketik di dalam text area. Atribut ini menerima salah satu nilai antara off, soft, atau hard. Berikut ini merupakan sebuah contoh dari tag text area :
<TEXTAREA ROWS="5" COLS="30" WRAP="hard">This is my textarea</TEXTAREA>
3.6.2.5. Submission dan Button Widgets

Jenis widget ini direpresentasikan oleh tag <INPUT> dan menggunakan nilai SUBMIT, IMAGE dan BUTTON untuk atribut TYPE-nya. Widget SUBMIT dan IMAGE memiliki perilaku yang serupa. Berikut ini merupakan contoh dari tag kedua widget tersebut : <INPUT TYPE="submit" VALUE="This is the Default Submit Button" NAME="mysubmit"> <INPUT TYPE="image" SRC="/images/mybutton.gif" NAME="myimagesubmit"> Sedangkan berikut ini merupakan sebuah contoh dari tag button : <INPUT TYPE="button" VALUE="Click me!" onClick="alert('You clicked the button!');">
94
Widget button terlihat dan berfungsi seperti default submission widget yang telah disebutkan sebelumnya. Namun, tidak seperti pada widget sebelumnya, widget button tidak memiliki aksi default yang berhubungan dengannya. Oleh karena itu, ia perlu dipasangkan dengan sebuah bahasa skrip client-side, seperti JavaScript untuk menampilkan suatu aksi.
3.7 Program Debugging

Bagian berikut ini memperkenalkan beberapa cara menangani kesalahan seperti mencegah dan kesalahan mencari yang merambat, Suatu pesan menghilangkan kesalahan kesalahan yang pesan akan kesalahan, juga browser kesalahan. seringkali
menyebabkan
menampilkan
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
95
$fp = fopen(takAda, r);//padahal tidak ada berkas tersebut $data = fgets($fp, 255); print($data); ?> </BODY> </HTML> Secara kaidah, tidak ada kesalahan pada skrip tersebut. Namun jika Anda panggil skrip tersebut maka akan terjadi kesalahan yang disebabkan karena berkas takAda tidak ada pada direktori kerja.
3.7.3 Kesalahan Penalaran

Kesalahan penalaran merupakan jenis kesalahan yang kadangkala sulit untuk mencari penyebabnya. Kesalahan ini tidak akan menimbulkan pesan kesalahan, tetapi akan memberikan hasil yang keliru. Untuk mencari penyebab kesalahan seperti itu, biasanya dilakukan dengan menambahkan pernyataan printf atau echo.
3.7.4 Pesan Kesalahan PHP

Jika Anda perhatikan , pesan kesalahan PHP memiliki pola seperti berikut : Level kesalahan: pesan_kesalahan nama_berkas baris_kesalahan
Level kesalahan menyatakan tingkat kesalahan. Beberapa diantara level pesan kesalahan berupa : Parse error (level 4), menyatakan kesalahan karena kaidah. Fatal error (level 1), menyatakan kesalahan semantik yang menyebabkan PHP segera menghentikan eksekusi program. Warning (level 2), akan membuat kesalahan ditampilkan tetapi pengeksekusian akan tetap dilakukan. Notice (level 8) yang Pesan-pesan kesalahan sesungguhnya dapat diatur agar tidak tampil. Hal ini dapat dikerjakan dengan menggunakan fungsi error_reporting 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.
96
3.8 Pemrograman Database
3.8.1. Perangkat Database di Dalam MySQL

MySQL merupakan salah satu jenis database server yang sangat terkenal. Kepopulerannya disebabkan MySQL menggunakan SQL sebagai bahasa dasar untuk mengakses database-nya, selain itu ia bersifat free. Perangkat lunak MySQL itu sendiri dapat di-download dari http://www.mysql.org atau http://www.mysql.com. MySQL termasuk jenis RDBMS (Relational Database Management System). Itulah sebabnya istilah seperti tabel, baris, dan kolom digunakan pada MySQL. Sebelum mempraktekkan semua contoh berikut ini, aktifkanlah prompt DOS terlebih dahulu.
3.8.1.1 Mengaktifkan direktori MySQL/Bin

Setelah Anda menjumpai prompt DOS, ketikkanlah perintah berikut : cd c:\mysql\bin Setelah itu, Anda akan menjumpai prompt seperti berikut : C:\MYSQL\BIN> Pada direktori inilah terdapat sejumlah program executable yang terkait dengan MySQL.
3.8.1.2 Mengatur Password Root

Setelah Anda meng-install MySQL, langkah awal yang perlu dilakukan adalah memberikan merupakan password pemakai terhadap pemakai root. pada Perlu diketahui, yang root dapat dengan level tertinggi MySQL
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
97
3.8.1.3 Menjalankan Program Client MySQL

MySQL menyediakan program bernama mysql yang berfungsi untuk
mengakses database MySQL dari sisi client. Untuk menjalankan program ini, ketikkanlah perintah berikut : mysql
3.8.1.4 Melihat Daftar Database

Untuk mengetahui nama-nama database yang terdapat pada MySQL, Anda dapat menggunakan perintah berikut pada prompt mysql : mysql> SHOW DATABASES; kemudian tekanlah tombol Enter.
3.8.1.5 Melakukan Koneksi ke Suatu Database

Untuk memanipulasi data yang ada di dalam database, Anda perlu melakukan koneksi ke database terlebih dahulu. Hal tersebut dapat dilakukan dengan mengetikkan perintah berikut lalu diakhiri dengan menekan tombol Enter : mysql> USE mysql; Anda akan memperoleh tanggapan berupa : Database changed
3.8.1.6 Mengetahui Nama-nama Tabel

Untuk mengetahui tabel-tabel yang terdapat pada suatu database, Anda dapat menggunakan perintah berikut dan diakhiri dengan menekan tombol Enter : mysql> SHOW TABLES;
3.8.1.7 Mengetahui Struktur Tabel

Jika Anda bermaksud mengetahui struktur suatu tabel, Anda dapat menggunakan perintah DESCRIBE atau DESC. Sebagai contoh, Anda dapat memberikan perintah berikut untuk mengetahui struktur tabel bernama user: mysql> DESCRIBE user;
98
3.8.1.8 Keluar dari MySQL

Jika Anda bermaksud mengakhiri mysql, Anda dapat menggunakan salah satu perintah yaitu EXIT, QUIT, atau \q.
3.8.2 Membuat Database dan Tabel di Dalam MySQL

Melalui program mysql dengan pemakai berupa root, lakukanlah perintah berikut untuk membuat database, sebagai contohnya berupa bukualmt : mysql> CREATE DATABASE bukualmt; Untuk mengaktifkan database tersebut dapat dilakukan dengan mengetikkan perintah berikut : mysql> USE bukualmt; Berikutnya kita akan membuat tabel bernama kota dengan perintah : CREATE TABLE kota ( id_kota SMALLINT NOT NULL, nama_kota VARCHAR(25)); Indeks biasa digunakan untuk mempercepat pengaksesan data. Berikut ini merupakan perintah untuk mengindeks tabel kota menurut kolom id_kota dengan nama index berupa idx_kota : CREATE INDEX idx_kota ON kota (id_kota); Untuk memasukkan data pada tabel kota, Anda harus menggunakan perintah INSERT seperti contoh berikut ini : INSERT INTO kota VALUES (21, Jakarta); INSERT INTO kota VALUES (22, Bandung); Setelah melakukan pemasukkan data di atas, cobalah untuk melakukan perintah berikut ini untuk melihat data yang berhasil dimasukkan pada tabel kota : SELECT * FROM kota;
3.8.3 Menghubungkan Database dengan Menggunakan Fungsifungsi PHP

Pada bagian berikut ini, kita akan membahas cara mengakses database dengan menggunakan ODBC (Open Database Connectivity). ODBC merupakan suatu standar yang dikembangkan oleh Microsoft dengan tujuan untuk memudahkan pengaksesan berbagai database melalui sekumpulan
99
fungsi yang bersifat umum. Dengan menggunakan ODBC Anda dapat mengakses berbagai macam sumber data seperti Oracle dan MS Access dengan mudah. Kesemuanya diakses dengan menggunakan aturan SQL (Structured Query Language). Pada sistem Windows, sumber data ODBC dapat diakses pada program melalui DSN (Data Source Name). PHP menyediakan sejumlah fungsi berawalan odbc_ yang bermanfaat untuk mengakses database melalui ODBC. Pada tabel berikut ini akan ditampilkan beberapa fungsi tersebut :
Tabel 3.8.3.1 : Fungsi PHP untuk mengakses database
No.
Fungsi
Keterangan
Untuk membuat sebuah koneksi ke database dengan menggunakan
odbc_connect(nama_sumber_data, 1 nama_pemakai, password)
sebuah nama pemakai dan password (bersifat pilihan). Fungsi ini menghasilkan nilai balik bertipe integer berupa pengenal hubungan ke sumber data. Untuk menutup koneksi yang telah dibuat dengan sumber data ODBC.
odbc_close(pengenal_hubungan)
Argumen pengenal_hubungan adalah nilai yang dihasilkan oleh odbc_connect(). Untuk menutup semua koneksi dengan sumber data ODBC. Untuk mengeksekusi permintaan/perintah SQL yang
odbc_close_all()
odbc_do(pengenal_hubungan, 4 string_query)
terdapat pada string_query terhadap koneksi yang dinyatakan dalam pengenal_hubungan.
odbc_exec(pengenal_hubungan, 5 string_query)
Merupakan nama alias dari odbc_do(). Untuk memperoleh jumlah field yang terdapat pada suatu hasil. Dalam hal
odbc_num_fields(pengenal_hasil)
ini, pengenal_hasil adalah nilai yang diperoleh dari fungsi odbc_do().
100
Untuk memperoleh jumlah record yang terdapat pada suatu hasil. 7 odbc_num_rows(pengenal_hasil) Dalam hal ini, pengenal_hasil adalah nilai yang diperoleh dari fungsi odbc_do(). odbc_field_name(pengenal_hasil, 8 nomor_kolom) odbc_field_len(pengenal_hasil, 9 nomor_kolom) odbc_field_type(pengenal_hasil, 10 nomor_kolom) odbc_fetch_row(pengenal_hasil, 11 nomor_baris) Untuk memperoleh sebuah baris dari suatu himpunan hasil. Memiliki kegunaan seperti pada odbc_fetch_row() nomor_baris, array_filed) tetapi Untuk memperoleh nama suatu kolom. Untuk memperoleh panjang suatu kolom. Untuk memperoleh tipe kolom.
odbc_fetch_into(pengenal_hasil, 12
hasilnya dikirimkan ke array. odbc_result(pengenal_hasil, 13 kolom) odbc_result_all(nama_sumber_data 14 , nama_pemakai, password) Untuk memperoleh nilai dari
sebuah kolom pada baris saat ini. 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 mysql_connect(host_name, Untuk
Keterangan membuat koneksi ke
nama_pemakai, password)
database MySQL yang terdapat pada suatu host. Fungsi ini
101
menghasilkan nilai balik berupa nilai bertipe integer yang
menyatakan hubungan sebagai berbagai mysql_. Untuk menutup dan
pengenal digunakan pada
pengenal fungsi
berawalan
koneksi
ke
database 2. mysql_close(pengenal_hubungan)
MySQL.
Argumen yang
pengenal_hubungan menyatakan diperoleh pengenal dari
pemanggilan
fungsi mysql_connect(). Untuk memilih database seperti mysql_select_db(database, 3 pengenal_hubungan) jika Anda menggunakan
perintah USE pada program client mysql. Untuk mengeksekusi perintah SQL
mysql_query(string_query, 4 pengenal_hubungan)
permintaan/ terhadap tabel.
sebuah/sejumlah
mysql_db_query(database, 5 string_query, pengenal_hubungan)
Untuk
menjalankan
suatu SQL
permintaan/perintah terhadap suatu database. Untuk baris memperoleh dari suatu
sejumlah hasil
permintaan/perintah SQL yang menggunakan 6 mysql_num_rows(pengenal_hasil) SELECT. pengenal_hasil menyatakan nilai yang diperoleh dari pemanggilan fungsi seperti mysql_db_query() mysql_query. mysql_affected_rows 7 (pengenal_hubungan) mysql_num_fields(pengenal_hasil) Untuk memperoleh jumlah baris yang dikenai operasi INSERT, DELETE, dan UPDATE. 8 Untuk memperoleh jumlah dan perintah Argumen
102
kolom
pada
suatu
hasil SQL.
permintaan/perintah Argumen
pengenal_hasil
menyatakan nilai yang diperoleh dari pemanggilan fungsi seperti mysql_db_query() mysql_query. Untuk menghasilkan suatu array 9 mysql_fetch_row(pengenal_hasil) yang berisi seluruh kolom dari sebuah baris pada suatu dan
himpunan hasil. Fungsi ini memiliki kegunaan yang 10 mysql_fetch_array(pengenal_hasil) saja setiap kolom akan disimpan dua kali pada array hasil. Untuk memperoleh suatu informasi kolom. serupa dengan Hanya
mysql_fetch_row().
mengenai mysql_fetch_field(pengenal_hasil, 11 nomor_kolom) Argumen
nomor_kolom
(bersifat opsional) menyatakan nomor kolom yang informasinya ingin didapatkan. Untuk pada memindahkan suatu himpunan ke pointer hasil baris
mysql_data_seek(pengenal_hasil, 12 nomor_baris)
supaya tertentu.
menunjuk
Argumen menyatakan
nomor_baris
nomor baris yang ingin dituju. Untuk pada mysql_field_seek(pengenal_hasil, 13 nomor_kolom) supaya tertentu. nomor_kolom memindahkan suatu himpunan ke pointer hasil kolom
menunjuk
Argumen menyatakan
nomor kolom yang ingin dituju. mysql_create_db(database, 14 pengenal_hubungan) Untuk MySQL. membuat Argumen nama database database database
merupakan
103
yang ingin dibuat. mysql_drop_db(database, 15 pengenal_hubungan) mysql_list_dbs(pengenal_hubungan) mysql_list_tables(database, 17 pengenal_hubungan) mysql_list_fields(database, 18 nama_tabel, pengenal_hubungan) Untuk MySQL. Untuk menghasilkan daftar menghapus database
16
database MySQL. Untuk memperoleh daftar nama tabel dalam suatu database. Untuk memperoleh daftar nama kolom dalam suatu tabel
database.
3.9
Membangun Aplikasi Database
Setelah Anda mengenal sejumlah fungsi yang berkaitan dengan MySQL pada PHP, Anda akan mendapatkan gambaran mengenai penggunaan fungsi-fungsi tersebut untuk mengimplementasikan sebuah aplikasi sederhana berikut ini.
3.9.1 Membuat Form Database

Andaikan kita telah memiliki sebuah tabel yang bernama MY_PRODUCTS dengan atribut-atributnya antara lain PRODUCT_ID, TITLE, DESCRIPTION, dan PRICE. Pada bagian ini akan dibahas mengenai langkah-langkah
pembuatan skrip sederhana untuk menambahkan data pada tabel tersebut. Pertama-tama, bukalah teks editor Anda dan buatlah sebuah file dengan nama show_addrecord.html. Buatlah kerangka HTML sebagai isi file
tersebut, seperti yang terlihat berikut ini : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Menambah Data Baru</TITLE> </HEAD> <BODY> <!kode HTML diletakkan disini --> </BODY> </HTML> Buatlah sebuah heading seperti contoh berikut ini : <h1>Menambah data baru ke tabel produk</h1>
104
Untuk membuat kode form, anggap langkah kedua tersebut merupakan sebuah skrip PHP dengan nama do_addrecord.php dan form Anda akan menggunakan method POST, seperti potongan skrip berikut ini : <FORM method="POST" action="do_addrecord.php"> Selanjutnya, buatlah tiga buah text field dan sebuah text area untuk menangkap nilai bagi $_POST[item_id], $_POST[item_title],
$_POST[item_desc], dan $_POST[item_price] nama kolom-kolom dari tabel MY_PRODUCTS. Potongan skrip form berikut ini menggunakan sebuah tabel untuk menampilkan kolom-kolom form :
<FORM method="POST" action="do_addrecord.php"> <table cellspacing=5 cellpadding=5> <tr> <td valign=top><strong>ID Produk:</strong></td> <td valign=top><INPUT type="text" name="item_id" size=5 maxlength=5></td> </tr> <tr> <td valign=top><strong>Nama Produk:</strong></td> <td valign=top><INPUT type="text" name="item_title" size=30 maxlength=50></td> </tr> <tr> <td valign=top><strong>Deskripsi Produk:</strong></td> <td valign=top><TEXTAREA name="item_desc" cols=30 rows=5></TEXTAREA></td> </tr> <tr> <td valign=top><strong>Harga Produk:</strong></td> <td valign=top>$ <INPUT type="text" name="item_price" size=10></td> </tr>
Langkah
terakhir,
tambahkanlah
sebuah
tombol
Add
Record
untuk
menambahkan data, seperti yang terlihat berikut ini :

<tr> <td align=center colspan=2><INPUT type="submit" value="Tambah"></td> </tr>
Jangan lupa untuk menutup skrip dengan tag </FORM> dan </TABLE>. Secara keseluruhan, kode skrip Anda akan terlihat sebagai berikut ini :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Menambah Data Baru</TITLE> </HEAD> <BODY> <h1>Menambah Data baru Ke Tabel Produk</h1> <FORM method="POST" action="do_addrecord.php">
105
<table cellspacing=5 cellpadding=5> <tr> <td valign=top><strong>ID Produk:</strong></td> <td valign=top><INPUT type="text" name="item_id" size=5 maxlength=5></td> </tr> <tr> <td valign=top><strong>Nama Produk:</strong></td> <td valign=top><INPUT type="text" name="item_title" size=30 maxlength=50></td> </tr> <tr> <td valign=top><strong>Deskripsi Produk:</strong></td> <td valign=top><TEXTAREA name="item_desc" cols=30 rows=5></TEXTAREA></td> </tr> <tr> <td valign=top><strong>Harga Produk:</strong></td> <td valign=top>$ <INPUT type="text" name="item_price" size=10></td> </tr> <tr> <td align=center colspan=2><INPUT type="submit" value="Add Record"></td> </tr> </table> </FORM> </BODY> </HTML>
Simpan file tersebut pada web server Anda kemudian akseslah melalui browser dengan URL http://127.0.0.1/show_addrecord.html. Pada window browser, Anda akan menjumpai tampilan seperti berikut :
Gambar 3.10.1.1 Form Penambahan Data
3.10.2 Menangani Data di Dalam form

Selanjutnya, Anda akan membuat skrip PHP yang akan mengambil input, membuat pernyataan SQL yang sesuai, membuat record, dan menampilkan
106
record tersebut sebagai sebuah konfirmasi. Karena ACTION dari form pada file show_addrecord.html adalah do_addrecord.php, bukalah teks editor
Anda dan buatlah sebuah file dengan nama do_addrecord.php. Sebelum skrip Anda melakukan apapun, Anda harus memastikan bahwa semua nilai telah benar-benar dimasukkan ke dalam form. Tetapkanlah sebuah pernyataan yang menampilkan semua nilai tersebut. Jika tidak ada, alihkan pengguna ke form berikut ini :
<?php if ((!$_POST[item_id]) || (!_POST[$item_title]) || (!$_POST[item_desc]) || (!$_POST[item_price])) { header("Location: http://127.0.0.1/show_addrecord.html"); exit; } ?>
Kemudian,
tambahkanlah
kerangka
HTML
seperti
berikut
ini
setelah
pernyataan if di atas : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Add a Record</TITLE> </HEAD> <BODY> <!Kode HTML di letakkan disini --> </BODY> </HTML> Buatlah sebuah heading seperti contoh berikut ini : <h1>Menambah Data Baru ke Tabel Produk</h1> Pada kode PHP selanjutnya Anda akan membuat perintah SQL yang akan dikirimkan ke MySQL. Misalkan saat Anda membuat tabel MY_PRODUCTS, urutan kolom-kolomnya adalah ITEM_ID, ITEM_TITLE, ITEM_DESC, dan
ITEM_PRICE. Gunakanlah urutan yang sama untuk perintah INSERT data pada tabel tersebut. Simpan perintah SQL pada sebuah variabel yang bernama $sql dan buatlah daftar VALUES dengan mengunakan nama-nama varibel dari form, seperti pada skrip berikut :
$sql = "INSERT INTO MY_PRODUCTS (ITEM_ID, ITEM_TITLE, ITEM_DESC, ITEM_PRICE) VALUES ('$_POST[item_id]', '$_POST[item_title]', '$_POST[item_desc]',
107
'$_POST[item_price]')";
Setelah membuat perintah SQL, tambahkanlah koneksi dan kode query. Selanjutnya tambahkan sebuah pernyataan if untuk mencetak seluruh teks record yang berhasil ditambahkan. if ($sql_result) { echo " <P>Data Berhasil Dimasukkan!</p> <table cellspacing=5 cellpadding=5> <tr> <td valign=top><strong>ID Produk:</strong></td> <td valign=top>".stripslashes($_POST[item_id])."</td> </tr> <tr> <td valign=top><strong>Nama Produk:</strong></td> <td valign=top>".stripslashes($_POST[item_title])."</td> </tr> <tr> <td valign=top><strong>Deskripsi Produk:</strong></td> <td valign=top>".stripslashes($_POST[item_desc]."</td> </tr> <tr> <td valign=top><strong>Harga Produk:</strong></td> <td valign=top>\$ ".stripslashes($_POST[item_price]."</td> </tr> </table>"; } ?> Secara keseluruhan, skrip Anda akan terlihat seperti berikut ini :
<?php if ((!$_POST[item_id]) || (!$_POST[item_title]) || (!$_POST[item_desc]) || (!$_POST[item_price])) { header("Location: http://127.0.0.1/show_addrecord.html"); exit; } ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Add a Record</TITLE> </HEAD> <BODY> <h1>Adding a Record to MY_PRODUCTS</h1> <?php $sql = "INSERT INTO MY_PRODUCTS (ITEM_ID, ITEM_TITLE, ITEM_DESC, ITEM_PRICE)
108
VALUES ('$_POST[item_id]', '$_POST[item_title]', '$_POST[item_desc]', '$_POST[item_price]')"; // create connection; substitute your own information $conn = mysql_connect("localhost","joeuser","34Nhjp") or die (mysql_error())"; // select database; substitute your own database name $db = mysql_select_db("MyDB", $conn) or die(mysql_error()); // execute SQL query and get result $sql_result = mysql_query($sql,$conn) or die (mysql_error()); if ($sql_result) { echo " <P>Record added!</p> <table cellspacing=5 cellpadding=5> <tr> <td valign=top><strong>ID Produk:</strong></td> <td valign=top>".stripslashes($_POST[item_id])."</td> </tr> <tr> <td valign=top><strong>Nama Produk:</strong></td> <td valign=top>".stripslashes($_POST[item_title])."</td> </tr> <tr> <td valign=top><strong>Deskripsi Produk:</strong></td> <td valign=top>".stripslashes($_POST[item_desc]."</td> </tr> <tr> <td valign=top><strong>Harga Produk:</strong></td> <td valign=top>\$ ".stripslashes($_POST[item_price]."</td> </tr> </table>"; } ?> </BODY> </HTML>
Simpan file tersebut pada web server Anda dan akseslah melalui browser dengan URL http://127.0.0.1/show_addrecord.html. Masukkanlah sebuah contoh produk seperti pada gambar yang terlihat berikut ini :
Gambar 3.10.2.1 Menambahkan sebuah contoh produk
109
Lanjutkanlah dengan menekan tombol Add Record untuk mengeksekusi skrip pada do_addrecord.php. Jika query tersebut berhasil dijalankan, Anda akan menjumpai sebuah halaman hasil seperti berikut ini :
Gambar 3.10.2.2 Keberhasilan menambahkan data
Gunakanlah form ini untuk menambahkan beberapa contoh ke dalam tabel MY_PRODUCTS .
produk lainnya
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()
110
2. Gillian ingin mengetahui kapan hari Paskah, jadi dia harus menggunakan fungsi dalam PHP a. easter_date() b. cal_search_easter() c. cal_days_easter() d. easter_egg() 3. Apa fungsi untuk menghitung panjang string ? a. strlen() b. strlength() c. strleng() d. str.length()
Soal Praktek
4. Buatlah file PHP untuk melakukan operasi penjumlahan. Tampilan awal adalah sebagai berikut :
Setelah dipilih tombol Hitung, maka tampilannya menjadi seperti berikut:
111
5. Buatlah file PHP dengan koneksi basis data untuk menambahkan data mahasiswa baru. Tabel yang sudah ada sebagai berikut : NIM 12025031 12024832 Nama Budi Santoso Andrea Wilson Jurusan Akuntansi Sastra Inggris
Setelah ditambahkan 2 (dua) data baru maka tabel akan menjadi seperti berikut ini :
NIM 12025031 12024832 12023033 12044732
Nama Budi Santoso Andrea Wilson Shanti Aliyah Iwan Putra
Jurusan Akuntansi Sastra Inggris Ekonomi Pembangunan Teknik Mesin
Sedangkan tampilan awal dan akhirnya adalah :
Setelah data baru dimasukkan dalam basis data :
112
113
BAB 4
Tujuan Instruksional Umum: 1 2 3 1 2 3
JAVA
Siswa dapat menjelaskan dasar Pemrograman Java Siswa dapat membuat Web berbasis java Siswa dapat menjelaskan konsep Object Oriented Programming Siswa dapat membuat program Java sederhana Siswa dapat membuat aplikasi Java dengan Basis data Siswa dapat membuat aplikasi JSP
Tujuan Instruksional Khusus :
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 :
114
4.1
Sekilas Mengenai Java
Pada tahun 1991, sekumpulan orang yang dipimpin oleh James Gosling dan Patrick Naughton dari Sun Microsystem membuat bahasa yang dinamakan Green yang dapat berjalan di berbagai hardware. Teknologi seperti ini tidak ada sebelumnya. Kemudian pada tahun 1994, mereka berpikir untuk membuat browser yang realtime, reliable, aman dan tidak bergantung pada arsitektur komputer. Tahun 1995, browser yang berhasil dibuat The HotJava Browser- menarik perhatian banyak orang ketika eksibisi. Browser ini memiliki properti yang unik yang dapat mendownload program dan menjalankannya, disebut applet. Applet ditulis dalam bahasa yang sekarang dikenal sebagai bahasa java. Sejak saat itu, Java menjadi sesuatu yang fenomenal. Programmer lebih memilih menggunakan Java daripada pesaingnya C++ dikarenakan java lebih sederhana, memiliki library yang kaya, dan juga portable - program java akan berjalan tanpa perubahan di Windows, UNIX, Linux atau di Macintosh.
4.2
Program Java
Kita akan membuat program Java yang sederhana. Program pertama yang kita buat akan menampilkan pesan Hello World . Berikut ini adalah program Hello.java : Program : Hello.java public class Hello { public static void main(String[] args) { System.out.println(Hello, World!); } }
115
Buat file baru kemudian tulis kode diatas dan simpan dengan nama Hello.java. Untuk melakukan kompilasi, buka console (contohnya : command prompt) lalu tulis perintah javac Hello.java kemudian eksekusi file tersebut dengan perintah java Hello. Hasil keluaran dari program ini seperti pada gambar dibawah ini :
Gambar 4.2.1 Hasil Keluaran Program Hello.java Berikut ini adalah langkah-langkah untuk melakukan kompilasi (compile) dan eksekusi (run) program java : 1 2 javac namafile.java 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
116
java yang tidak memiliki method main yaitu Applet. Applet akan dijelaskan lebih lanjut pada bab 6 (enam). Parameter String[] args merupakan parameter wajib pada method main. Parameter ini mengandung argumen command line. Kata static menkitakan bahwa method main tidak akan mengubah objek dari kelas Hello. Instruksi atau statement dalam method main statement yang berada diantara {} dieksekusi satu demi satu dan setiap statement diakhiri dengan simbol (;). Teks Hello World! dapat ditampilkan dilayar karena statement
System.out.println. System merupakan kelas yang berisi objek dan method untuk mengakses sumber daya daris sistem. Tujuan tempat untuk menampilkan string adalah terminal window. Representasi java dari terminal window adalah dengan objek yang disebut out. Untuk menampilkan teks dalam satu baris digunakan method println. Tetapi, jika kita ingin menampilkan teks tanpa berada di baris baru sesudahnya, kita dapat menggunakan method print. Perhatikan kedua statement dibawah ini : System.out.println(Hello); System.out.println(World!); Akan menghasilkan : Hello World! Sedangkan statemen : System.out.print(Hello); System.out.println(World!); Akan menghasilkan : Hello World! Untuk memanggil method di java, ada 3 (tiga) hal yang harus ditentukan yaitu : 1 2 3 Objek yang ingin digunakan (contoh : System.out) Nama method yang ingin digunakan (Contoh : println) () yang didalamnya berisi informsi yang dibutuhkan method
4.3 Proses Kompilasi

Saat melakukan proses kompilasi pada program Java yang kita buat, compiler menterjemahkan source code (statement-statement) menjadi bytecode yang isinya adalah instruksi-instruksi mesin virtual dan informasi mengenai cara load program ke memori sebelum program dieksekusi. Bytecode untuk program LSP Telematika Indonesia
117
disimpan dalam file yang terpisah dengan file ekstension .class. Sebagai contoh : program Hello.java menyimpan bytecodenya di file Hello.class. Setelah itu, java interpreter me-load bytecode program yang kita tulis, menjalankan program dan me-load library yang diperlukan. Berikut ini adalah penggambaran langkah-langkah dari proses kompilasi hingga program berjalan:
Gambar 4.3.1 Langkah-langkah proses kompilasi Aktivitas pemrograman dimulai dengan membuka editor dan menulis source code. Kompilasi source code yang dibuat dan periksa apakah ada pesan error. Jika ditemukan pesan error maka kita dapat menjalankan debugger untuk memeriksa baris demi baris untuk menemukan kesalahan. Setelah kesalahan ditemukan, perbaiki source code. Lakukan kembali proses kompilasi. Jika tidak ada pesan error, eksekusi program.
4.4 Tipe Data Dalam Java

4.4.1 Angka
Dalam bahasa java terdapat berbagai tipe data, diantaranya tipe angka. Tipe ini terdiri dari integer, double, float dan long. Perhatikan kode program dibawah ini : Program : Coins1.java Public class Coins1 { Public static void main(String[] args) { int pennies = 8; int dimes = 4; int quarters = 3; // menghitung nilai total double total = pennies*0.01 + dimes*0.10 + quarters*0.25; // menampilkan hasil perhitungan System.out.print(Total Value = ); System.out.println(total); LSP Telematika Indonesia
118
} } Nilai (8, 4, 3) merupakan integer, bilangan tanpa angka decimal. Nilai (0.01, 0.10, 0.25) memiliki nilai desimal, angka yang demikian dinamakan floating point karena computer merepresentasikannya dengan sebarisan digit-digit beserta posisi dari titik desimal. Double merupakan double precision floating point. Ada juga tipe single precision, yaitu float. Nilai dari tipe float menggunakan setengah dari tempat penyimpanan untuk tipe double dan juga dalam perhitungan. Perhitungan dengan float lebih cspat daripada perhitungan dengan double tetapi presisi untuk float 7 (tujuh) desimal tidak mencukupi untuk kebanyakan program. Apabila tipe int dan double tidak cukup dalam perhitungan yang kita buat, kita dapat menggunakan tipe long. hingga Long integer berkisar antara 9,223,372,036,854,775,808 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. 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 Yang terakhir adalah 9,223,372,036,854,775,807. Untuk
menentukan nilai Long integer, kita perlu menambahkan huruf L setelah angka,
menambahkan comment untuk menjelaskan statement-statement yang ditulis. Comment ditandai dengan simbol ( // ) atau (/* tidak panjang simbol yang digunakan adalah ditulis panjang maka sebaiknya digunakan (/* /* Dalam program ini, kita akan menghitung nilai dari sekumpulan koin. LSP Telematika Indonesia */). Umumnya jika comment // . Tetapi jika comment yang */), seperti contoh dibawah ini :
119
User menentukan jumlah pennies, nickels, dimes dan quarters. Program akan menampilkan nilai total koin-koin tersebut. */ Compiler akan mengabaikan apa saja yang tertulis diantara simbol ( // ) atau ( /* */). Berdasarkan comment-comment yang telah dibuat, Java Development Kit keluaran Sun Microsystem menyediakan javadoc untuk menghasilkan dokumentasi yang dapat dilihat di browser. Untuk itu, kita harus menggunakan format yang ditentukan, seperti dibawah ini : /** purpose @param name description @param name description @return description */ Tiap comment mengawali kelas atau method yang akan dideskripsikan. Dari command shell, jalankan javadoc dengan perintah : Javadoc MyProg.java Perintah ini akan menghasilkan file HTML yang bernama MyProg.html. Selain itu, javadoc juga menyediakan link ke kelas dan method yang lain. Berikut ini adalah contoh kode untuk menghasilkan javadoc : Program : Invoice,java /** */ Describes a quantity of an article to purchase and its price
public class Item { /** Computes the total cost of this item @return the total price (unit price * quantity) */ public double getTotalPrice() { } /** Prints the item name, quantity, unit price and total */ public void print() { } }
120
Untuk kode diatas, file HTML yang dihasilkan dengan menggunakan javadoc adalah sebagai berikut :
Gambar 4.4.1 Dokumentasi HTML Dengan Javadoc
4.4.2 Konstan
Perhatikan 2 (dua) contoh kode di bawah ini : Program : Volume.java public class Volume { public static void main(String[] args) { int bottles = 4; int cans = 10; double total = bottles*2+ cans*0.35; System.out.print(Total Volume : ); System.out.print(total); System.out.println( liters); } } public class Volume { public static void main(String[] args) { final double BOT_VOL = 2; final double CAN_VOL = 0.35; int bottles = 4; int cans = 10; double total = bottles*BOT_VOL + cans*CAN_VOL; System.out.print(Total Volume : ); System.out.print(total); System.out.println( liters); } } B
Nilai konstan pada program A tidak diberikan nama, sedangkan pada program B nilai 2 dan 0.35 diberi nama BOT_VOL dan CAN_VOL. Variable BOT_VOL dan CAN_VOL dideklarasi dengan memberikan tipe data final. Deklarasi dengan tipe data final menyebabkan nilai variable tidak bisa berubah setelah diinisialisasi. LSP Telematika Indonesia
121
Umumnya programmer menggunakan huruf besar untuk konstan yang memiliki tipe final untuk membedakannya dengan 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 variable biasa. Selain itu, deklarasi variable final tidak harus langsung diinisialisasi. Variable seperti ini dinamakan
4.4.3
String
String adalah sebarisan karakter yang diawali dan diakhiri oleh tanda kutip (), contohnya Hello. string : String name = John; Selain itu assigment string pada variable juga dapat dilakukan : name = Carl; Panjang string adalah jumlah karakter string tersebut, Contoh : panjang string computer adalah 8 (delapan). Kita dapat memperoleh panjang string dengan menggunakan method length. int n = name.length(); String yang panjangnya 0 (nol) dinamakan string kosong. Berbeda dengan angka, string merupakan sebuah objek sehingga string dapat digunakan untuk memanggil method. Operasi-operasi yang dapat dilakukan dengan string diantaranya adalah substring dan concatenation. Berikut ini adalah penjelasan untuk setiap operasi string: a. Substrings Sebuah string dapat diambil karakter-karakter didalamnya. Hal ini dapat dilakukan dengan menggunakan substring : s.substring(start, pastEnd) Operasi tersebut akan mengembalikan karakter-karakter dalam string s, dimulai dari posisi start hingga karakter sebelum posisi pastEnd. Contoh : LSP Telematika Indonesia Variable dapat dideklarasikan dan diinisialisasi dengan tipe
122
String greeting = Hello, World; String sub = greeting.substring(0,4); // sub = Hell Operasi substring pada greeting akan mengambil 4 (empat) huruf pada greeting Posisi 0 (nol) berarti posisi awal string, posisi selanjutnya adalah 1 (satu) dan seterusnya : H 0 e 1 l 2 l 3 0 4 , 5 6 W 7 o 8 r 9 l 10 d 11 ! 12
Posisi karakter terakhir selalu 1 (satu) dikurangi panjang string. b. Concatenation Operasi string akan memisahkan string, tetapi operasi concatenation akan menggabungkan digabungkan 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. string. Contohnya string : white dan house, dengan bisa menjadi sebuah yang panjang operasi
123
4.4.4 Tipe Data Primitif

Tipe data primitif akan menghasilkan nilai yang sama di berbagai platform komputer yang mendukung Java. Berikut ini adalah tabel dari tipe data primitif Java :
Tabel 4.4.4.1 : Tipe Data Primitif
Tipe boolean char byte short int
Bit 1 16 8 10 32
Nilai True atau false \u0000 hingga \uFFFF -128 hingga +128 -32708 hingga +32707 -2147483648 hingga +2147483647
Contoh boolean a=true; char a = a; byte a = 10; short a = 10;
long float double
64 32 64
-9223372036854775808647 hingga +9223372036854775807 Negatif : -340282347E+38 hingga 140120846E-45 Positif : 140129846E-45 hingga 340282347E-45 Negatif : -17976931348623157E+308 hingga -49406564584124654E-324 Positif 49406564594124654E-324 hingga 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] c[1] c[2] c[3] c[4] c[5] c[6] -45 6 0 72 1543 -89 0
angka yang ada didalam simbol [] adalah indeks
Indeks menunjukkan posisi nilai dalam array. Indeks berupa integer atau ekspresi integer, contoh : a = 1; b=2; c[a+b] = += 2; c.length akan menghasilkan jumlah elemen dalam array. Array adalah sebuah objek yang menempati memori secara berurutan. Perhatikan kode di bawah ini : a. int c[] = new int[ 12 ]; sama dengan : int c[]; LSP Telematika Indonesia
124
c = new int[ 12 ]; b. int c[] = { -45, 6, 0, 72, 1543, -89, 0 }; c. String a[][] = new String[1][2]; d. String a = {{apa, ini}}; (a) adalah kode untuk deklarasi array satu dimensi. Ketika mendeklarasi array, kita juga menentukan jumlah elemen dari array. (c) adalah koden untuk mendeklarasi array 2 dimensi. simbol [] yang pertama menunjukkan baris, sedangkan simbol [] yang kedua menunjukkan kolom. [1][2] berarti array terdiri dari 1 kolom dan 2 baris. (c), (d) adalah deklarasi sekaligus inisialisasi array.
4.5 Method, Variabel dan Kelas

Untuk memahami konsep kelas dan method, kita akan gunakan bank sebagai analogi. Operasi-operasi yang dapat dilakukan di bank diantaranya adalah menarik uang, menyetor uang dan meminta informasi saldo. Dalam java, semua operasi itu digambarkan dengan pemanggilan method. Misalnya, kita punya objek myCheckingAccount dengan tipe BankAccount, kita dapat melakukan operasi : myCheckingAccount.deposit(2000); myCheckingAccount.withdraw(500); System.out.println(Balance: + myCheckingAccount.getBalance()); Method deposit, withdraw dan getBalance membentuk perilaku dari kelas. Perilaku kelas adalah sekumpulan method-method yang dapat digunakan objek. Selanjutnya, kita akan mempelajari cara untuk membuat objek. Variable objek adalah sebuah reference ke objek. Seandainya, kita mendeklarasi variable objek : BankAccount myAccount; Variabel objek ini tidak menunjuk ke objek apapun. Untuk itu, kita perlu melakukan inisialisasi terhadap variable itu. Untuk melakukan inisialisasi objek, kita perlu membuat objek dari kelas BankAccount, dengan cara : new BankAccount(); Agar dapat menggunakan objek maka perlu melakukan assign ke reference objek: BankAccount myCheckingAccount = new BankAccount();
125
4.5.1 Mendefinisikan Method

Untuk mendeskripsikan perilaku dari objek maka kita perlu membuat kelas. Contoh : public class BankAccount { BankAccount methods BankAccount data } Sebelumnya kita telah mendefinisikan 3 (tiga) method : Public class BankAccount { public void deposit(double amount) { method implementation } public void withdraw(double amount) { method implementation } public void getBalance() { method implementation } BankAccount data } Kita akan mulai dari header method. Header method terdiri dari : Access specifier (contoh : public) Return type ( double atau void) Nama method (contoh deposit) Parameter
Access specifier akan mengontrol method-method yang dapat memanggil method ini. Return type adalah tipe nilai yang dihitung method tersebut. Sedangkan parameter adalah input dari method. Apabila sebuah method tidak mengembalikan nilai maka gunakan tipe void. Method dengan nama yang sama tetapi memiliki parameter yang sama dinamakan overloading, contoh : print(int n) { }; print(String b) { }; Cara pemanggilan method ada 2 (dua) cara, tergantung siapa yang memanggil method. Jika method dipanggil oleh kelas lain maka : implicitParameter.namaMethod(explicitParameter); implicit parameter adalah variable objek untuk kelas tempat method berada sedangkan explicit parameter adalah nilai parameter dari method. Jika method dipanggil oleh method lain dalam kelas yang sama : namaMethod(explicitParameter); LSP Telematika Indonesia
126
Method yang dapat mengakses objek dan mengembalikan informasi mengenai objek itu, tanpa mengubah objek dinamakan accessor method. Sebaliknya method yang dapat mengubah state dari objek dinamakan mutator method. Contoh : pada kelas BankAccount, method deposit/withdraw mutator method sedangkan method getBalance adalah accessor method. Beberapa kelas dirancang sedemikian hingga hanya memiliki accessor method. Kelas yang demikian dinamakan immutable, contohnya kelas String. Ada method yang tidak membutuhkan implicit parameter. Method yang demikian dinamakan method static atau class method. Contoh method ini adalah method sqrt dari kelas Math. Saat memanggil method sqrt Math.sqrt(x) kita tidak memerlukan implicit parameter, Math adalah nama kelas. Method jenis ini dibuat umumnya dengan tujuan untuk menyembunyikan perhitungan yang melibatkan angka. Beberapa contoh method pada kelas Math adalah Math.floor() menghasilkan nilai pembulatan kebawah, mis : Math.floor(4,6) adalah 4. Math.ceil() menghasilkan nilai pembulatan keatas, mis : Math.ceil(4,6) adalah 5. Math.min(a,b) menghasilkan nilai minimum dari 2 angka dan Math.round(a) menghasilkan nilai pembulatan kebawah dari a + 0.5 Java telah menyediakan kelas-kelas yang dapat digunakan untuk membantu kita dalam membuat program. Kelas-kelas yang telah dibuat dapat dilihat selengkapnya di API yaitu javadoc dari semua kelas buatan Java. Untuk menggunakan kelas-kelas tersebut kita menggunakan keyword import yang ditulis di awal program. Perhatikan contoh dibawah ini : import java.io.*; import java.awt.Color; statement pertama mengatakan bahwa kita akan menggunakan kelas-kelas dari paket java.io tetapi kita hanya mengetahui tempat kelas itu berada dan bukan nama kelasnya, sedangkan pada statement yang kedua, kita telah mengetahui nama kelas yang akan digunakan yaitu Color yang berada di paket java.awt.
4.5.2
Instance Variable
Setiap objek memiliki sekumpulan nilai-nilai yang mendeskripsikan objek tersebut dan mempengaruhi reaksi objek ketika dipanggil (state). Tiap objek menyimpan state pada satu atau lebih instance variable. { Public class BankAccount Private double balance;
127
} Deklarasi instance variable terdiri dari : Access Specifier ( contoh : private ) Tipe variable ( contoh : double ) Nama Variable (Contoh : balance )
Umumnya, instance variable dideklarasikan sebagai private, yang artinya bahwa instance-instance tersebut hanya dapat diakses oleh method yang berada pada kelas yang sama.
4.5.3
Constructor
Constructor mempunyai nama yang sama dengan nama kelas, dan umumnya dideklarasi sebagai public sehingga memungkinkan kode apapun dalam program untuk membuat objek dari kelas ini. Selain itu, constructor tidak memiliki return type. Constructor digunakan untuk melakukan inisialisasi pada instance varianle. public class BankAccount { public BankAccount() { balance = 0; } .. } Constructor yang baru kita buat dinamakan default constructor, constructor yang tidak memiliki parameter. Constructor bukanlah method. Kita tidak dapat memanggil constructor dengan objek : myCheckingAccount.BankAccount(); 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; } .. } // error
128
Constructor atau method yang demikian dinamakan overloaded. Compiler mencari tahu method mana yang dipanggil dengan melihat parameter.
4.5.4
Didalam
Kelas
kelas terdapat sekumpulan method dan variable. Bagaimana
menemukan kelas? Contoh : Buat sebuah program yang meminta input user untuk memasukkan koin dalam dompet kemudian mencari total uang dalam dompet. Kandidat dari kelas yang dapat dibuat adalah kelas coins dan purse. Sedangkan kandidat untuk method adalah tambahKoin dan hitungTotal. Misalkan kita hendak membuat kelas baru yang dapat menggunakan method serta variabel yang tidak private dari kelas yang sudah ada sebelumnya. Kita dapat melakukan hal ini dengan meng-extend kelas yang sudah ada. Konsep ini dinamakan inheritance. Kelas yang lebih umum, yang akan di-ekstend dinamakan superclass sedangkan kelas yang meng-ekstend dinamakan subclass. Perhatikan contoh di bawah ini : public class RekeningTabungan extends RekeningBank { public RekeningTabungan(double bunga) { sukuBunga = bunga; } public void hitungBunga() { double sb = getBalance() * sukuBunga/100; tabung(bunga); } private double sukuBunga; } Method hitungBunga memanggil method getBalance serta tabung yang ada pada superclass-nya. Pemanggilan method tersebut sebenarnya menggunakan objek this yaitu objek yang menunjuk pada kelas yang memanggil. public class RekeningTransaksi ekstend RekeningTabungan { public void tabung(double uang) { super.tabung(uang); } } Method tabung pada kelas RekeningTransaksi memanggil method tabung pada kelas RekeningTabungan yang menjadi superclass-nya, pemanggilan ini ditandai dengan keyword super. Hal ini dikarenakan superclass dan subclass memiliki nama method yang sama dan subclass memanggil method tersebut. Di Java pemanggilan method ditentukan oleh objek yang sedang memanggilnya. Perhatikan kode di bawah ini : public void transfer(RekeningBank rb, double uang) { LSP Telematika Indonesia
129
tarikUang(uang); rb.tabung(uang); } kemudian : RekeningBank cf = ...; RekeningTransaksi rekSaya = ...; cf.transfer(rekSaya, 1000); Perhatikan bahwa di kelas RekeningBank dan kelas RekeningTransaksi memiliki method tabung. Ketika statement cf.transfer(rekSaya, 1000) dieksekusi, dilakukan pemanggilan method tabung. Method tabung dari kelas mana yang dipanggil? pemanggilan method tabung dari method transfer dilakukan dengan objek yang ada di parameter. rekSaya adalah objek kelas RekeningTransaksi yang meng-ekstend kelas RekeningBank, maka kelas RekeningTransaksi bisa dikatakan sebagai kelas RekeningBank, selain itu rekSaya yang ada di parameter maka method yang dipanggil adalah method tabung di kelas RekeningTransaksi. Konsep ini dinamakan polimorfisme. Bagaimana seandainya kita hendak meng-ekstend lebih dari satu kelas. Kita dapat menggunakan interface. Interface mirip dengan kelas biasa dengan beberapa pengecualian : interface tidak memiliki instance variable semua method dalam interface bertipe abstract, yaitu method-method tersebut memiliki nama, parameter dan return typr tapi tidak diimplementasikan. semua method di interface adalah public. Sebagai contoh, paket java.lang mendefinisikan interface Comparable sebagai berikut : public interface Comparable { int compareTo(Object other); } Penggunaan interface ini : public class RekeningTabungan extend RekeningBank implement Comparable { ... // Deklarasi method sebagai public public int compareTo(Object other) { statement; } } Interfase bukanlah sebuah kelas untuk itu kita tidak bisa membuat objek dari interface. Seandainya kita membuat method yang tidak diimplementasikan kelas, ketika
kita hendak meng-ekstend kelas tersebut maka kita akan mewarisi method yang LSP Telematika Indonesia
130
tidak melakukan apapun. Hal ini tentu tidak diinginkan, untuk itu Java membuat abstract kelas. Kelas Abstract memiliki method yang tidak diimplementasikan, contoh : public abstract class RekeningBank { public abstract void pajakTabungan(); ... } Kita tidak bisa membuat objek dari kelas abstract. Jika kita membuat kelas abstract maka kita harus membuat subclass yang akan mengimplementasikan method abstract. RekeningBank rekening; rekening = new RekeningBank(); // Error RekeningBank is abstract rekening = new RekeningTabungan(); rekening = null;
4.5.5
Paket (Package)
Paket adalah kumpulan kelas yang berhubungan. Library Java terdiri dari paketpaket, beberapa diantaranya ada di tabel 4.5.5.1 di bawah ini :
Tabel 4.5.5.1 : Paket dalam Library Java
Paket java.util java.io java.awt java.net javax.swing omg.org.CORBA
Purpose Utility input dan output Abstract Windowing Toolkit Jaringan Swing User Interface objek terdistribusi
Contoh Kelas Random PrintStream Color Socket Jbutton ORB
Untuk meletakkan kelas dalam sebuah paket, kita harus menulis kode : package nama_paket sebagai statement paling awal di kelas. Contoh : package com.horstmann.ccj; import java.io.InputStream; inport java.io.InputStreamReader; public class NamaKelas { ... } Untuk menggunakan kelas dari sebuah paket, kita harus menuliskan nama paket dan nama kelasnya, contoh : import java.awt.Color; import com.horstman.ccj.NamaKelas; Kita dapat mengimport semua kelas dalam paket dengan statement inport yang diakhiri dengan (.*.), contoh : import java.awt.*; LSP Telematika Indonesia
131
Paket java.lang mengandung kelas-kelas java yang dasar seperti Math dan Object dan selalu tersedia sehingga tidak perlu di-import.
4.6 Flow Control

Flow kontrol digunakan untuk melakukan pengulangan. pada subbab ini kita akan mempelajari flow kontrol for, while, do...while serta switch...case.
4.6.1 for
Untuk menggunakan flow kontrol for, kita harus menentukan nilai awal, kondisi pengulangan serta perubahan kondisi. Sintaks untuk for adalah : for (ekspresi1; ekspresi2; ekspresi3) statement; cara penulisan yang lain : ekspresi1; while(ekspresi2) { statement; ekspresi3; } Contoh kode : for(int counter=1; counter <= 10; conter++) for(int i=100; I >= 1; i--) for(int i=7; I <= 77; i += 7)
4.6.2 while dan do..while

Sintaks untuk while adalah : while(kondisi) { statement; } Statement akan dijalankan selama 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.
kondisi
terpenuhi.
Sedangkan
sintaks
4.6.3 switchcase
Flow kontrol ini digunakan untuk melakukan pemilihan dari beberapa kondisi.
132
Gambar 4.6.3.1 Struktur Switch...Case
Contoh kode penggunaan switch...case : statement; switch(var_a) : case nilai_1: System.out.println(I): break; case nilai_2 : System.out.println(2): break; default : System.out.println(0): break; statement; nila1_1, nilai_2 adalah kemungkinan nilai dari var_a. Keyword break digunakan untuk keluar dari flow kontrol terdekat. Pada kode di atas, jika telah berada pada sebuah case maka langkah selanjutnya adalah menjalankan aksi case lalu keluar dari switch..case dan menjalankan statement diluar flow kontrol switch...case.
4.7 Applet
Applet adalah program java yang berjalan dalam web browser. Sebuah website yang hendak mengandung kode applet, meletakkan kode applet di web server dan men-download-nya untuk dapat menampilkannya. Dengan demikian, anda tidak harus berada di komputer anda untuk dapat menampilkan applet. Untuk menampilkan applet, kode applet harus di-download terlebih dahulu, apabila koneksi internet lambat maka akan menghabiskan banyak waktu untuk menampilkanya. Karena alasan itulah maka applet yang kompleks jarang ada di web page.
133
Web browser dapat berjalan di berbagai platform. Applet dapat berjalan dalam web browser maka applet seharusnya juga dapat dieksekusi di berbagai platform. Applet akan diterjemahkan menjadi java bytecode sehingga komputer atau peralatan yang dapat menjalankan java bytecode akan dapat menjalankan applet. Yang membedakan applet dengan kelas java biasa adalah method main. Pada applet tidak ada method main. Yang akan menjalankan java virtual manchine adalah web browser. Pengganti method main adalah method paint, init dan stop, yang langsung dipaggil oleh web browser ketika program applet dieksekusi. Selain itu, method-method ini harus didefinisikan ulang pada kelas-kelas yang meng-ekstend kelas Applet.
4.6.1
Membuat Applet Sederhana
Pada bagian ini akan dicontohkan pembuatan applet yang sederhana. Applet yang dibuat akan menampilkan kotak. Untuk membuat applet ini dibutuhkan sebuah file HTML dengan tag menggambar kotak. Program : RectangleApplet.java import import import import java.applet.Applet; java.awt.Graphics; java.awt.Graphics2D; java.awt.Rectangle; APPLET. Berikut ini adalah kode program java untuk
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); } } 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. g2.draw(kotak);
134
Kelas RectangleApplet hanya memiliki 1 (satu) method yaitu method paint. Window manager akan memanggil method ini kapan saja permukaan applet perlu digambar. Pada saat permulaan applet tentunya permukaan applet perlu digambar. Apabila user mengunjungi web page yang lain lalu kembali ke web page yang mengandung applet maka permukaan applet akan digambar kembali. Method paint menerima objek Graphics. Objek ini menyimpan state graphic : warna, huruf dan lainnya yang digunakan untuk melakukan operasi menggambar. Untuk menggambar, objek Graphics diubah menjadi objek dari kelas Graphics2D. Alasan pengubahan objek tersebut dikarenakan pada awal versi java, kelas Graphics tidak menggunakan pendekatan objek oriented. Beberapa lama kemudian, para programmer membutuhkan paket graphics yang lebih baik karena itulah para pendesain Java membuat kelas Graphics2D. Karena tidak ingin menganggu kelas-kelas yang menggunakan simple graphics maka method paint tidak diubah tetapi membuat kelas graphics meng-ekstend graphics2D. Saat window manager memanggil method paint, sebenarnya parameternya dilemparkan ke kelas Graphics2D Untuk menampilkan Applet, dibutuhkan program HTML selain program Java. Berikut ini adalah file HTML dari kelas RectangleApplet. Program : RectangleApplet.html <applet code="RectangleApplet.kelas" width=300 height=300> </applet> Seperti file HTML pada umumnya, file HTML untuk applet dapat juga mengandung tag-tag HTML.Penamaan HTML tidak harus sama dengan program java untuk applet tersebut. Untuk memudahkan sebaiknya file HTML dan program java untuk applet memiliki nama yang sama. Untuk menjalankan applet digunakan perintah applet viewer. applet viewer adalah sebuah program dalam Java Development Kit dari Sun Microsystem. Caranya dengan menulis nama file HTML applet setelah perintah applet viewer. appletviewer RectangleApplet.html Appletviewer akan membuka window baru untuk tiap applet dalam file HTML. Berikut ini adalah tampilan dari applet RectangleApplet :
135
Gambar 4.6.1.1 RectangleApplet
4.6.2
Menggambar Bentuk Grafis Pada Applet
Pada subbab 5.2 kita belajar membuat applet yang menampilkan gambar kotak, yang merupakan salah satu dari bentuk grafis. Pada bagian ini kita akan menggambar bentuk grafis yang lain yaitu elips dan garis. Untuk membuat elips, pertama kali kita membuat persegi panjang dengan menentukan koordinat x dan y di posisi kiri atas, tinggi serta panjang dari persegi panjang. Kelas yang disediakan java untuk membuat elips adalah Ellips2D.float dan Ellips2D.double tergantung pada nilai 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 diameter); g2.draw(lingkaran); LSP Telematika Indonesia lingkaran = new Ellips2D.Double(5,10,diameter, float atau double dari koordinat. Dalam subbab ini, kita akan menggunakan kelas Ellipas2D.double. Berikut ini
136
Untuk objek lingkaran, koordinat (x,y) menunjuk pada titik tengah lingkaran. Untuk menggambar kelas, java menyediakan kelas Line2D.Double. Garis dibuat dengan menetukan titik awal dan titik akhir dari garis. Untuk menggambar garis dapat dilakukan dengan 2 (dua) cara, yang pertama dengan cara memasukkan titik awal dan akhir sebagai parameter, contoh kodenya adalah : Line2D.Double garis = new Line2D.Double(x1, y1, x2, y2); Cara yang kedua dengan cara membuat 2 (dua) objek kelas Point2D.Double kemudian memasukkan kedua objek tersebut dalam parameter, contoh kodenya adalah : Point2D.Double awal = new Point 2D.Double(x1, y1); Point 2D.Double akhir = new Point 2D.Double(x2, y2); Line2D.Double garis = new Line2D.Double(awal, akhir); Berikut ini adalah contoh kode untuk menggambar berbagai bentuk grafis pada applet : Program : Shapes.java import import import import import import import java.applet.Applet; java.awt.Graphics; java.awt.Graphics2D; java.awt.Rectangle; java.awt.geom.Ellipse2D; java.awt.geom.Line2D; java.awt.geom.Point2D;
public kelas Shapes extends Applet { public void paint(Graphics g) { Graphics2D g2 = (Graphics2D)g; // Buat objek dari kelas Rectangle untuk membuat kotak Rectangle body = new Rectangle(100, 110, 60, 10); // Buat objek dari kelas Ellipse2D.Double Ellipse2D.Double frontTire = new Ellipse2D.Double(110, 120, 10, 10); Ellipse2D.Double backTire = new Ellipse2D.Double(140, 120, 10, 10); // Buat objek dari kelas Point2D.Double Point2D.Double r1 = new Point2D.Double(110, 110); Point2D.Double r2 = new Point2D.Double(120, 100); Point2D.Double r3 = new Point2D.Double(140, 100); Point2D.Double r4 = new Point2D.Double(150, 110); // Buat objek dari kelas Line2D Line2D.Double g1 = new Line2D.Double(r1, r2); Line2D.Double g2 = new Line2D.Double(r2, r3); Line2D.Double g3 = new Line2D.Double(r3, r4); // Gambar pada applet LSP Telematika Indonesia
137
g2.draw(body); g2.draw(frontTire); g2.draw(backTire); g2.draw(g1); g2.draw(g2); g2.draw(g3); // Gambar tulisan di posisi yang ditentukan g2.drawString("Applet Mobil", 100, 150); } } File HTML yang digunakan untuk melengkapi program diatas adalah : <applet code="Shapes.kelas" width=300 height=300> </applet> Cara menjalankan program : 1. Compile 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. dengan cara javac Shapes.java. Langkah ini akan menghasilkan sebuah file Shapes.kelas yang akan digunakan di file
Gambar 4.6.2.1 Applet Shapes
4.6.3
Warna
Semua penggambaran bentuk sebelumnya berwarna hitam. Kita dapat mengubah warnanya dengan menggunakan objek Color. Java menggunakan model warna RGB. Model ini menentukan warna baru berdasarkan kadar warna merah, hijau dan biru dalam warna baru tersebut. Kadar warna berupa nilai float dan besarnya dari 0.0F hingga 1.0F. Contoh penggunaan kelas Color : LSP Telematika Indonesia
138
Color magenta = new Color(1.0F, 0.0F, 1.0F); Kita dapat mengubah warna dengan menggunakan method setColor. Berikut ini adalah contoh kode RectangleApplet dengan menggunakan warna : import import import import java.applet.Applet; java.awt.Graphics; java.awt.Graphics2D; java.awt.Rectangle;
public kelas RectangleApplet extends Applet { public void paint(Graphics g) { Graphics2D g2 = (Graphics2D)g; Rectangle kotak = new Rectangle(5, 10, 20, 30); g2.draw(kotak); kotak.translate(15, 25); g2.setColor(Color.red); // Set warna merah g2.draw(kotak); // gambar kotak yang berwarna merah } } Jika isi kotak ingin berwarna, maka gunakan method fill. Contoh : g2.fill(kotak); Method fill akan mengisi objek yang menjadi parameternya dengan warna yang telah ditentukan sebelumnya. Berikut ini adalah tabel dari warna serta nilai RGB :
Tabel 4.6.3.1 : Tabel Warna
Warna Color.black Color.blue Color.cyan Color.gray Color.darkGray Color.lightGray Color.green Color.magenta Color.orange Color.pink Color.red Color.white Color.yellow
Nilai RGB 0.0F, 0.0F, 0.0F (#000000) 0.0F, 0.0F, 1.0F 0.0F, 1.0F, 1.0F 0.5F, 0.5F, 0.5F 0.25F, 0.25F, 0.25F 0.75F, 0.75F, 0.75F 0.0F, 1.0F, 0.0F 1.0F, 0.0F, 1.0F 1.0F, 0.8F, 0.0F 1.0F, 0.7F, 0.7F 1.0F, 0.0F, 0.0F (#FF0000) 1.0F, 1.0F, 1.0F (#FFFFFF) 1.0F, 1.0F, 0.0F
4.7
SWING
Setiap aplikasi grafis ditampilkan di frame window, lihat gambar 4.7.1.
139
Gambar 4.7.1 Frame Window
Sebuah
frame
window frame,
terdiri
dari
sebuah
border yang
dan
title
bar. pada
Untuk paket
menampilkan
digunakan
kelas
JFrame
berada
javax.swing. Sebelum menggunakan swing, java menggunakan komponen dalam AWT (Abstract windowing Toolkit) untuk aplikasi grafis. Komponen AWT dan Swing multiplatform, dapat berjalan di berbagai sistem operasi tanpa adanya perubahan. AWT menggunakan komponen interface (tombol, textfield, menu, dll) milik platform yang sedang digunakan. Cara ini tidak berjalan dengan baik karena banyak timbul kesalahan. Cara yang digunakan swing berbeda dengan AWT, swing menggambar setiap komponen sehingga lambat tetapi konsisten. Walaupun demikian, swing tetap menggunakan beberapa bagian dari AWT, seperti bagian untuk menggambar dan menangani events. Kelas-kelas swing berada dalam paket javax.swing. Perhatikan kode dibawah ini : Program : FrameTest.java import javax.swing.JFrame; public class FrameTest extends JFrame { public static void main(String[] args) { EmptyFrame f = new EmptyFrame(); // Buat objek frame f.setTitle("Frame Test"); f.show(); } } class EmptyFrame LSP Telematika Indonesia
140
public EmptyFrame() { final int WIDTH = 300; // ukuran frame final int HEIGHT = 300; setSize(WIDTH,HEIGHT); }
} Kode ini akan menghasilkan tampilan pada gambar 5.1.1. Berbeda dengan applet, aplikasi ini memiliki method main. Method main pada kelas ini membuat objek FramteTest lalu memanggil method show untuk menampilkan graphical user interface (GUI) dan memulai thread baru sedangkan thread main selesai. Akibatnya program terus berjalan karena thread interface masih berjalan, walaupun icon close pada title bar telah dipilih. Untuk mematikan program ini harus dilakukan secara manual. Dalam sistem operasi windows atau UNIX, cara mematikan manual dengan menekan tombol Ctrl + C di console. Jika kita ingin mematikan program saat ditekan tombol close pada title bar. Maka kita harus meng-install event handler yang dipanggil ketika user memilih icon close. Untuk mengetahui kapan user akan mematikan program digunakan window event. Ada 7 (tujuh) window event pada java : 1. Window yang terbuka untuk pertama kali 2. Window yang tertutup karena method dispose 3. Window yang sedang aktif ( karena user menekan didalamnya) 4. Window yang tidak diaktifkan ( karena user menekan window yang lain) 5. Window dalam bentuk minimize ( karena user menekan icon minimize) 6. Window dalan bentuk semual ( karena user menekan icon minimize pada window yang minimize); 7. Window yang ditutup oleh user ( karena user menekan icon close ) Agar event dari window dapat ditangkap, maka objek window listener harus ditambahkan pada GUI. Objek window listener harus meng-implement interface WindowListener, yang memiliki 7 (tujuh) method : public interface WindowListener { void windowOpened(WindowEvent e); void windowClosed(WindowEvent e); void windowActivated(WindowEvent e); void windowDeactivated(WindowEvent e); void windowIconified(WindowEvent e); void windowDeiconified(WindowEvent e); LSP Telematika Indonesia
141
void windowClosing(WindowEvent e); } Program sederhana yang hendak kita buat tidak perlu tahu event-event lainnya. JFrame telah menangani event window yang lain. Agar program dapat mati ketika user close window maka kita harus meng-install window listener pada GUI yang didalamnya ada event untuk menutup window. Interface WindowListener merupakan salah satu penangkap event yang memiliki banyak method. Cara yang lebih sederhana dengan menggunakan kelas WindowAdapter. Kelas ini meng-implement ketujuh method dalam WindowListener dengan method kosong. Kita tinggal meng-ekstend kelas WindowAdapter ke kelas yang kita namakan WindowCloser : Class WindowCloser extends WindowAdapter { Public void windowClosing(WindowEvent event) { System.exit(0); } } Langkah selanjutnya adalah menambahkan objek WindowCloser pada GUI dan memanggil method addWindowListener .
Program : FrameTest2.java import java.awt.event.WindowAdapter; import java.awt.event.WindowEvent; import javax.swing.JFrame; public class FrameTest2 { public static void main(String[] args) { EmptyFrame frame = new EmptyFrame(); frame.setTitle("Close me!"); frame.show(); } } class EmptyFrame extends JFrame { public EmptyFrame() { final int WIDTH = 300; final int HEIGHT = 300; setSize(WIDTH, HEIGHT); WindowCloser listener = new WindowCloser(); addWindowListener(listener); } LSP Telematika Indonesia
142
private class WindowCloser extends WindowAdapter { public void windowClosing(WindowEvent event) { System.exit(0); } } } Dengan demikian maka program akan mati ketika icon close ditekan user.
4.7.1 Menambahkan Komponen Pada Frame

Untuk menambahkan komponen pada GUI maka komponen tersebut ditempatkan di komponen lain lalu menambahkan komponen ini ke GUI. Swing menyediakan komponen JPanel untuk keperluan itu. Menggambar pada applet sedikit berbeda dengan menggambar pada panel. Pada applet, kita mendefinisikan kembali method paint. Sedangkan menggambar pada panel, yang kita definisikan ulang adalah method paintComponent. Yang harus diperhatikan, ketika mengimplementasikan method paintComponent, kita harus memanggil method paintComponent pada superclass untuk menghapus isi panel. Berikut ini contoh penggunaan paintComponent : Public class MyPanel extends JPanel { public void paintComponent(Graphics g) { super.paintComponent(g); Graphics2D g2 = (Graphics2D)g; // Statement untuk menggambar } } Untuk menambahkan panel pada GUI, kita perlu mengetahui struktur dari permukaan GUI. Permukaan GUI ditutupi oleh 4 (empat) pane. Pane-pane tersebut adalah root pane, layered pane, glass pane dan content pane. Root pane untuk menangkan event dari mouse. Layered pane untuk menyatukan menu bar dan content pane, sedangkan glass pane untuk menyatukan layered pane dan glass pane. Yang menjadi perhatian programmer adalah content pane, yang berfungsi untuk menyatukan komponen yang akan ditampilkan. Untuk menambahkan komponen ke content pane pada GUI, kita harus mendapat objek content pane dengan memangil method getContentPane. Method ini akan mengembalikan objek dengan tipe Container. Sebuah container adalah objek LSP Telematika Indonesia
143
window yang dapat mengandung komponen lain. Kemudian gunakan method add dari kelas Container untuk menambahkan komponen. Beberapa komponen dasar yang akan kita pelajari diantaranya : Tabel 4.7.1.1 Komponen Beserta Deskripsi Component Jlabel JTextField JButton JCheckBox JComboBox JPanel ditampilkan Tempat user memberikan input dari keyboard dan dapat juga digunakan untuk menampilkan output Area yang memberikan event ketika ditekan Komponen untuk memberikan check list Drop down yang berisi daftar item Tempat untuk menaruh komponen Description Area dimana teks atau icon yang tidak bisa diubah akan
Berikut ini adalah penjelasan lebih rinci beserta contoh kode untuk tiap komponen pada tabel : Label Menyediakan teks pada frame. Untuk membuat label digunakan kelas JLabel. Label dapat digunakan untuk menampilkan read-only teks, gambar atau teks dan gambar. Berikut ini adalah contoh kode penggunaan label beserta hasil keluarannya : import java.awt.*; import java.awt.event.*; // Java extension packages import javax.swing.*; public class LabelTest extends JFrame { private JLabel label1, label2, label3; // set up GUI public LabelTest() { super( "Testing JLabel" ); // get content pane and set its layout Container container = getContentPane(); container.setLayout( new FlowLayout() ); // JLabel constructor with a string argument label1 = new JLabel( "Label with text" ); label1.setToolTipText( "This is label1" ); container.add( label1 ); // JLabel constructor with string, Icon and LSP Telematika Indonesia
144
// alignment arguments Icon bug = new ImageIcon( "bug1.gif" ); label2 = new JLabel( "Label with text and icon", bug, SwingConstants.LEFT ); label2.setToolTipText( "This is label2" ); container.add( label2 ); // JLabel constructor no arguments label3 = new JLabel(); label3.setText( "Label with icon and text at bottom" ); label3.setIcon( bug ); label3.setHorizontalTextPosition( SwingConstants.CENTER ); label3.setVerticalTextPosition( SwingConstants.BOTTOM ); label3.setToolTipText( "This is label3" ); container.add( label3 ); setSize( 275, 170 ); setVisible( true ); } // execute application public static void main( String args[] ) { LabelTest application = new LabelTest(); application.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE ); } } // end class LabelTest
Komponen frame dapat digunakan untuk menghasilkan event ketika berinteraksi dengan user, contohnya : menggerakkan mouse, memasukkan input keyboard pada textfield. Kelas untuk menangkan event adalah java.awt.AWTEvent. Untuk menangani event, ada 3 (tiga) hal yang harus diperhatikan yaitu : 1. Sumber event : Komponen frame yang menghasilkan event 2. Objek Event : Informasi mengenai event
145
3. Event Listener : Menerima event objek kemudian memberikan respon Untuk programmer, yang harus dilakukan adalah : 1. Menambahkan event listener ke sumber event, dengan cara menambahkan method addActionListener. 2. Implementasi kode untuk menangani event (event handler) Interface event listener pada paket java.awt.event ditunjukkan pada tabel dibawah ini : Tabel 4.7.1.2 : Interface Event Listener Java.util.EventListener ActionListener AdjustmentListener ComponentListener ContainerListener FocusListener ItemListener KeyListener MouseListener MouseMotionListener TextListener WindowListener JTextField dan JPasswordField JTextField adalah area tempat user memasukkan teks atau menampilkan teks. Sedangkan dengan JPasswordfield, karakter yang ditulis akan disembunyikan. Berikut ini contoh kode penggunaan JTextField dan JPasswordField yang telah ditambahkan event listener untuk menangkap event ketika user menekan enter pada JTextField beserta hasil keluarannya : Program : TextFieldTest.java import java.awt.*; import java.awt.event.*; // Java extension packages import javax.swing.*; LSP Telematika Indonesia
146
public class TextFieldTest extends JFrame { private JTextField textField1, textField2, textField3; private JPasswordField passwordField; // set up GUI public TextFieldTest() { super( "Testing JTextField and JPasswordField" ); Container container = getContentPane(); container.setLayout( new FlowLayout() ); // construct textfield with default sizing textField1 = new JTextField( 10 ); container.add( textField1 ); // construct textfield with default text textField2 = new JTextField( "Enter text here" ); container.add( textField2 ); // construct textfield with default text and // 20 visible elements and no event handler textField3 = new JTextField( "Uneditable text field", 20 ); textField3.setEditable( false ); container.add( textField3 ); // construct textfield with default text passwordField = new JPasswordField( "Hidden text" ); container.add( passwordField ); // register event handlers TextFieldHandler handler = new TextFieldHandler(); textField1.addActionListener( handler ); textField2.addActionListener( handler ); textField3.addActionListener( handler ); passwordField.addActionListener( handler ); setSize( 325, 100 ); setVisible( true ); } // execute application public static void main( String args[] ) { TextFieldTest application = new TextFieldTest(); application.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE ); } // private inner class for event handling private class TextFieldHandler implements ActionListener { // process text field events public void actionPerformed( ActionEvent event ) { LSP Telematika Indonesia
147
String string = ""; // user pressed Enter in JTextField textField1 if ( event.getSource() == textField1 string = "textField1: " + event.getActionCommand(); // user pressed Enter in JTextField textField2 else if ( event.getSource() == textField2 ) string = "textField2: " + event.getActionCommand(); // user pressed Enter in JTextField textField3 else if ( event.getSource() == textField3 ) string = "textField3: " + event.getActionCommand(); // user pressed Enter in JTextField passwordField else if ( event.getSource() == passwordField ) { JPasswordField pwd = ( JPasswordField ) event.getSource(); string = "passwordField: " + new String( passwordField.getPassword() ); } } JOptionPane.showMessageDialog( null, string );
} // end private inner class TextFieldHandler } // end class TextFieldTest
Button Komponen yang menghasilkan event ketika ditekan oleh user. Beberapa tipe button adalah command button, checkbox, toggle button dan radio button. Command button dibuat dengan kelas JButton yang menghasilkan ActionEvent ketika ditekan user. Berikut ini adalah contoh kode penggunaan button beserta hasil keluarannya :
148
Program : ButtonTest.java import java.awt.*; import java.awt.event.*; // Java extension packages import javax.swing.*; public class ButtonTest extends JFrame { private JButton plainButton, fancyButton; // set up GUI public ButtonTest() { super( "Testing Buttons" ); // get content pane and set its layout Container container = getContentPane(); container.setLayout( new FlowLayout() ); // create buttons plainButton = new JButton( "Plain Button" ); container.add( plainButton ); Icon bug1 = new ImageIcon( "bug1.gif" ); Icon bug2 = new ImageIcon( "bug2.gif" ); fancyButton = new JButton( "Fancy Button", bug1 ); fancyButton.setRolloverIcon( bug2 ); container.add( fancyButton ); // create an instance of inner class ButtonHandler // to use for button event handling ButtonHandler handler = new ButtonHandler(); fancyButton.addActionListener( handler ); plainButton.addActionListener( handler ); setSize( 275, 100 ); setVisible( true );
// execute application public static void main( String args[] ) { ButtonTest application = new ButtonTest(); application.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
// inner class for button event handling private class ButtonHandler implements ActionListener { // handle button event public void actionPerformed( ActionEvent event ) { JOptionPane.showMessageDialog( null, "You pressed: " + event.getActionCommand() ); LSP Telematika Indonesia
149
} } // end private inner class ButtonHandler } // end class ButtonTest
State Button Nilai yang dihasilkan state button adalah benar/salah. Java menyediakan 3 (tiga) tipe button ini, yaitu : JToggleButton, JCheckBox dan JRadioButton. Berikut ini adalah contoh kode penggunaan buton-button tersebut beserta hasil keluarannya : Program : CheckBox.java import java.awt.*; import java.awt.event.*; // Java extension packages import javax.swing.*; public class CheckBoxTest extends JFrame { private JTextField field; private JCheckBox bold, italic; // set up GUI public CheckBoxTest() { super( "JCheckBox Test" ); // get content pane and set its layout Container container = getContentPane(); container.setLayout( new FlowLayout() ); // set up JTextField and set its font field = new JTextField( "Watch the font style change", 20 ); field.setFont( new Font( "Serif", Font.PLAIN, 14 ) ); container.add( field ); // create checkbox objects bold = new JCheckBox( "Bold" ); container.add( bold ); italic = new JCheckBox( "Italic" ); container.add( italic ); // register listeners for JCheckBoxes CheckBoxHandler handler = new CheckBoxHandler();
150
bold.addItemListener( handler ); italic.addItemListener( handler ); setSize( 275, 100 ); setVisible( true );
// execute application public static void main( String args[] ) { CheckBoxTest application = new CheckBoxTest(); application.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
// private inner class for ItemListener event handling private class CheckBoxHandler implements ItemListener { private int valBold = Font.PLAIN; private int valItalic = Font.PLAIN; // respond to checkbox events public void itemStateChanged( ItemEvent event ) { // process bold checkbox events if ( event.getSource() == bold ) if ( event.getStateChange() == ItemEvent.SELECTED ) valBold = Font.BOLD; else valBold = Font.PLAIN; // process italic checkbox events if ( event.getSource() == italic ) if ( event.getStateChange() == ItemEvent.SELECTED ) valItalic = Font.ITALIC; else valItalic = Font.PLAIN; // set text field font field.setFont( new Font( "Serif", valBold + valItalic, 14 ) ); } } // end private inner class CheckBoxHandler } // end class CheckBoxTest
151
Program : RadioButtonTest.java import java.awt.*; import java.awt.event.*; // Java extension packages import javax.swing.*; public class RadioButtonTest extends JFrame { private JTextField field; private Font plainFont, boldFont, italicFont, boldItalicFont; private JRadioButton plainButton, boldButton, italicButton, boldItalicButton; private ButtonGroup radioGroup; // create GUI and fonts public RadioButtonTest() { super( "RadioButton Test" ); // get content pane and set its layout Container container = getContentPane(); container.setLayout( new FlowLayout() ); // set up JTextField field = new JTextField( "Watch the font style change", 25 ); container.add( field ); // create radio buttons plainButton = new JRadioButton( "Plain", true ); container.add( plainButton ); boldButton = new JRadioButton( "Bold", false); container.add( boldButton ); italicButton = new JRadioButton( "Italic", false ); container.add( italicButton ); boldItalicButton = new JRadioButton( "Bold/Italic", false ); container.add( boldItalicButton ); // register events for JRadioButtons RadioButtonHandler handler = new RadioButtonHandler(); plainButton.addItemListener( handler ); boldButton.addItemListener( handler ); italicButton.addItemListener( handler ); boldItalicButton.addItemListener( handler ); // create logical relationship between JRadioButtons radioGroup = new ButtonGroup(); radioGroup.add( plainButton ); radioGroup.add( boldButton ); radioGroup.add( italicButton ); radioGroup.add( boldItalicButton ); // create font objects plainFont = new Font( "Serif", Font.PLAIN, 14 ); boldFont = new Font( "Serif", Font.BOLD, 14 ); LSP Telematika Indonesia
152
italicFont = new Font( "Serif", Font.ITALIC, 14 ); boldItalicFont = new Font( "Serif", Font.BOLD + Font.ITALIC, 14 ); field.setFont( plainFont ); setSize( 300, 100 ); setVisible( true ); } // execute application public static void main( String args[] ) { RadioButtonTest application = new RadioButtonTest(); application.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE ); } // private inner class to handle radio button events private class RadioButtonHandler implements ItemListener { // handle radio button events public void itemStateChanged( ItemEvent event ) { // user clicked plainButton if ( event.getSource() == plainButton ) field.setFont( plainFont ); // user clicked boldButton else if ( event.getSource() == boldButton ) field.setFont( boldFont ); // user clicked italicButton else if ( event.getSource() == italicButton ) field.setFont( italicFont ); // user clicked boldItalicButton else if ( event.getSource() == boldItalicButton ) field.setFont( boldItalicFont ); } } // end private inner class RadioButtonHandler } // end class RadioButtonTest
153
ComboBox Disebut juga drop-down list. User dapat memilih salah satu item yang ada dalam list. import java.awt.*; import java.awt.event.*; // Java extension packages import javax.swing.*; public class ComboBoxTest extends JFrame { private JComboBox imagesComboBox; private JLabel label; private String names[] = { "bug1.gif", "bug2.gif", "travelbug.gif", "buganim.gif" }; private Icon icons[] = { new ImageIcon( names[ 0 ] ), new ImageIcon( names[ 1 ] ), new ImageIcon( names[ 2 ] ), new ImageIcon( names[ 3 ] ) }; // set up GUI public ComboBoxTest() { super( "Testing JComboBox" ); // get content pane and set its layout Container container = getContentPane(); container.setLayout( new FlowLayout() ); // set up JComboBox and register its event handler imagesComboBox = new JComboBox( names ); imagesComboBox.setMaximumRowCount( 3 ); imagesComboBox.addItemListener( // anonymous inner class to handle JComboBox events new ItemListener() { // handle JComboBox event public void itemStateChanged( ItemEvent event ) { // determine whether check box selected if ( event.getStateChange() == ItemEvent.SELECTED ) label.setIcon( icons[ imagesComboBox.getSelectedIndex() ] );
154
} } // end anonymous inner class ); // end call to addItemListener container.add( imagesComboBox ); // set up JLabel to display ImageIcons label = new JLabel( icons[ 0 ] ); container.add( label ); setSize( 350, 100 ); setVisible( true );
// execute application public static void main( String args[] ) { ComboBoxTest application = new ComboBoxTest(); application.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
} // end class ComboBoxTest
155
4.7.2 Menangani Event dari Mouse

Interface Event Listener untuk mouse terdiri dari MouseListener dan
MouseMotionListener. Event yang ditangkap berupa MouseEvent. Method-method yang ada pada interface MouseListener adalah : 1. mouseClicked : dipanggil ketika mouse menekan pada komponen 2. mouseEntered : dipanggil ketika mouse memasuki area komponen 3. mouseExited : dipanggil ketika mouse keluar dari area komponen 4. mousePressed : dipanggil ketika mouse sedang ditekan dalam komponen 5. mouseReleased : dipanggil ketika mouse telah setelah ditekan Sedangkan method pada interface MouseMotionListener adalah : 1. mouseDragged : dipanggil ketika mouse ditekan sambil bergerak 2. mouseMoved : dipanggil ketika mouse bergerak dalam komponen. Berikut ini adalah contoh kode untuk event mouse beserta hasil keluarannya : Program : MouseTracker.java import java.awt.*; import java.awt.event.*; // Java extension packages import javax.swing.*; public class MouseTracker extends JFrame implements MouseListener, MouseMotionListener { private JLabel statusBar; // set up GUI and register mouse event handlers public MouseTracker() { super( "Demonstrating Mouse Events" ); statusBar = new JLabel(); getContentPane().add( statusBar, BorderLayout.SOUTH ); // application listens to its own mouse events addMouseListener( this ); addMouseMotionListener( this ); setSize( 275, 100 ); setVisible( true );
// MouseListener event handlers // handle event when mouse released immediately after press public void mouseClicked( MouseEvent event ) { statusBar.setText( "Clicked at [" + event.getX() + LSP Telematika Indonesia
156
", " + event.getY() + "]" );
// handle event when mouse pressed public void mousePressed( MouseEvent event ) { statusBar.setText( "Pressed at [" + event.getX() + ", " + event.getY() + "]" ); } // handle event when mouse released after dragging public void mouseReleased( MouseEvent event ) { statusBar.setText( "Released at [" + event.getX() + ", " + event.getY() + "]" ); } // handle event when mouse enters area public void mouseEntered( MouseEvent event ) { JOptionPane.showMessageDialog( null, "Mouse in window" ); } // handle event when mouse exits area public void mouseExited( MouseEvent event ) { statusBar.setText( "Mouse outside window" ); } // MouseMotionListener event handlers // handle event when user drags mouse with button pressed public void mouseDragged( MouseEvent event ) { statusBar.setText( "Dragged at [" + event.getX() + ", " + event.getY() + "]" ); } // handle event when user moves mouse public void mouseMoved( MouseEvent event ) { statusBar.setText( "Moved at [" + event.getX() + ", " + event.getY() + "]" ); } // execute application public static void main( String args[] ) { MouseTracker application = new MouseTracker(); application.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE ); } } // end class MouseTracker
157
4.7.3 Menangani Event dari Keyboard

Event yang berasal dari keyboard ditangani oleh interface KeyListener. Event dari keyboard terjadi ketika keyboard ditekan atau dilepaskan. Event yang ditangkap tersimpan pada objek KeyEvent. Berikut ini adalah contoh kode penggunaan event dari keyboard beserta hasil keluarannya : Program : KeyDemo.java import java.awt.*; import java.awt.event.*; // Java extension packages import javax.swing.*; public class KeyDemo extends JFrame implements KeyListener { private String line1 = "", line2 = ""; private String line3 = ""; private JTextArea textArea; // set up GUI public KeyDemo() { super( "Demonstrating Keystroke Events" ); // set up JTextArea textArea = new JTextArea( 10, 15 ); textArea.setText( "Press any key on the keyboard..." ); textArea.setEnabled( false ); getContentPane().add( textArea ); // allow frame to process Key events addKeyListener( this ); setSize( 350, 100 ); setVisible( true ); } // handle press of any key public void keyPressed( KeyEvent event ) { line1 = "Key pressed: " + event.getKeyText( event.getKeyCode() ); setLines2and3( event ); LSP Telematika Indonesia
158
} // handle release of any key public void keyReleased( KeyEvent event ) { line1 = "Key released: " + event.getKeyText( event.getKeyCode() ); setLines2and3( event ); } // handle press of an action key public void keyTyped( KeyEvent event ) { line1 = "Key typed: " + event.getKeyChar(); setLines2and3( event ); } // set second and third lines of output private void setLines2and3( KeyEvent event ) { line2 = "This key is " + ( event.isActionKey() ? "" : "not " ) + "an action key"; String temp = event.getKeyModifiersText( event.getModifiers() ); line3 = "Modifier keys pressed: " + ( temp.equals( "" ) ? "none" : temp ); textArea.setText( line1 + "\n" + line2 + "\n" + line3 + "\n" );
// execute application public static void main( String args[] ) { KeyDemo application = new KeyDemo(); application.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE ); } } // end class KeyDemo
159
4.7.4 Layout
Layout yang akan dibahas pada subbab ini adalah pengaturan posisi komponen GUI. Berikut ini adalah jenis layout yang tersedia beserta deskripsinya : Tabel 4.7.4.1 Penjelasan Layout Layout FlowLayout BorderLayout GridLayout Deskripsi Meletakkan komponen dari kiri ke kanan Layout standard pada java. Meletakkan komponen pada posisi utara, timur, barat, selatan dan tengah Meletakkan komponen dalan 1 (satu) baris atau 1 (satu) kolom. Posisi awal di kiri atas lalu pengisian dilakukan dari kiri ke kanan hingga baris penuh.
Berikut ini adalah contoh kode penggunaan tiap layout beserta hasil keluarannya: Program : FlowLayoutDemo.java import java.awt.*; import java.awt.event.*; // Java extension packages import javax.swing.*; public class FlowLayoutDemo extends JFrame { private JButton leftButton, centerButton, rightButton; private Container container; private FlowLayout layout; // set up GUI and register button listeners public FlowLayoutDemo() { super( "FlowLayout Demo" ); layout = new FlowLayout(); // get content pane and set its layout container = getContentPane(); container.setLayout( layout ); // set up leftButton and register listener leftButton = new JButton( "Left" ); leftButton.addActionListener( // anonymous inner class new ActionListener() { // process leftButton event public void actionPerformed( ActionEvent event ) { layout.setAlignment( FlowLayout.LEFT ); // re-align attached components layout.layoutContainer( container );
160
} // end anonymous inner class ); // end call to addActionListener container.add( leftButton ); // set up centerButton and register listener centerButton = new JButton( "Center" ); centerButton.addActionListener( // anonymous inner class new ActionListener() { // process centerButton event public void actionPerformed( ActionEvent event ) { layout.setAlignment( FlowLayout.CENTER ); // re-align attached components layout.layoutContainer( container ); } ); container.add( centerButton ); // set up rightButton and register listener rightButton = new JButton( "Right" ); rightButton.addActionListener( // anonymous inner class new ActionListener() { // process rightButton event public void actionPerformed( ActionEvent event ) { layout.setAlignment( FlowLayout.RIGHT ); // re-align attached components layout.layoutContainer( container ); } } ); container.add( rightButton ); setSize( 300, 75 ); setVisible( true ); }
// execute application public static void main( String args[] ) { FlowLayoutDemo application = new FlowLayoutDemo();
161
application.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE );
} // end class FlowLayoutDemo
Program : BorderLayoutDemo.java import java.awt.*; import java.awt.event.*; // Java extension packages import javax.swing.*; public class BorderLayoutDemo extends JFrame implements ActionListener { private JButton buttons[]; private String names[] = { "Hide North", "Hide South", "Hide East", "Hide West", "Hide Center" }; private BorderLayout layout; // set up GUI and event handling public BorderLayoutDemo() { super( "BorderLayout Demo" ); layout = new BorderLayout( 5, 5 ); // get content pane and set its layout Container container = getContentPane(); container.setLayout( layout ); // instantiate button objects buttons = new JButton[ names.length ]; for ( int count = 0; count < names.length; count++ ) { buttons[ count ] = new JButton( names[ count ] ); buttons[ count ].addActionListener( this ); } // place buttons in BorderLayout; order not important container.add( buttons[ 0 ], BorderLayout.NORTH ); container.add( buttons[ 1 ], BorderLayout.SOUTH ); LSP Telematika Indonesia
162
container.add( buttons[ 2 ], BorderLayout.EAST ); container.add( buttons[ 3 ], BorderLayout.WEST ); container.add( buttons[ 4 ], BorderLayout.CENTER ); setSize( 300, 200 ); setVisible( true ); } // handle button events public void actionPerformed( ActionEvent event ) { for ( int count = 0; count < buttons.length; count++ ) if ( event.getSource() == buttons[ count ] ) buttons[ count ].setVisible( false ); else buttons[ count ].setVisible( true ); // re-layout the content pane layout.layoutContainer( getContentPane() ); } // execute application public static void main( String args[] ) { BorderLayoutDemo application = new BorderLayoutDemo(); } application.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE );
} // end class BorderLayoutDemo
163
Program : GridLayoutDemo.java import java.awt.*; import java.awt.event.*; // Java extension packages import javax.swing.*; public class GridLayoutDemo extends JFrame implements ActionListener { private JButton buttons[]; private String names[] = { "one", "two", "three", "four", "five", "six" }; private boolean toggle = true; private Container container; private GridLayout grid1, grid2; // set up GUI public GridLayoutDemo() { super( "GridLayout Demo" ); // set up layouts grid1 = new GridLayout( 2, 3, 5, 5 ); grid2 = new GridLayout( 3, 2 ); // get content pane and set its layout container = getContentPane(); container.setLayout( grid1 ); // create and add buttons buttons = new JButton[ names.length ]; for ( int count = 0; count < names.length; count++ ) { buttons[ count ] = new JButton( names[ count ] ); buttons[ count ].addActionListener( this ); container.add( buttons[ count ] ); } setSize( 300, 150 ); setVisible( true ); } // handle button events by toggling between layouts public void actionPerformed( ActionEvent event ) { if ( toggle ) container.setLayout( grid2 ); else container.setLayout( grid1 ); toggle = !toggle; // set toggle to opposite value container.validate(); } // execute application LSP Telematika Indonesia
164
public static void main( String args[] ) { GridLayoutDemo application = new GridLayoutDemo(); } application.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE );
} // end class GridLayoutDemo
4.8 Pemrograman Jaringan 4.8.1 Jaringan

Komunikasi antara computer dalam internet dengan menggunakan Transmission Control Protocol (TCP) atau User Datagram Protocol (UDP), berikut ini adalah gambarannya :
Gambar 4.8.1 Jaringan
Ketika kita menulis program dalam bahasa Java di jaringan, kita melakukannya pada layer aplikasi. Kita tidak perlu memikirkan TCP atau UDP karena itu semua telah tercakup dalam paket java.net. Kelas-kelas dalam paket tersebut menyediakan cara berkomunikasi dalam jaringan. Kelas URL, URLConnection, Socket dan ServerSocket menggunakan TCP untuk berkomunikasi sedangkan kelas DatagramPacket, DatagramSocket dan MulticastSocket menggunakan UDP.
165
4.8.2 Socket
URL dan URLConnection menyediakan mekanisme tingkat tinggi untuk mengakses resource di internet. Tetapi, terkadang program yang kita tulis hanya membutuhkan komunikasi jaringan pada tingkat yang rendah, sebagai contoh menulis aplikasi client-server. Komunikasi yang terjadi antara client dan server harus dapat diandalkan, dimana data yang tiba di client mempunyai urutan yang sama ketika dikirim oleh server. TCP menyediakan channel komunikasi yang dapat diandalkan, point to point yang dapat digunakan aplikasi client server untuk berkomunikasi. Untuk melakukan komunikasi dengan TCP maka program client dan server membuat koneksi dan mengikat socket diakhir koneksi. Sedangkan untuk melakukan komunikasi, baik client atau server membaca dari dan menulis ke socket. Definisi socket adalah endpoint dari link komunikasi 2 arah antara 2 program yang berjalan di jaringan. Sebuah socket terikat pada sebuah nomor port dengan tujuan agar layer TCP dapat mengenali aplikasi yang menjadi tujuan pengiriman data. Paket java.net pada platform Java menyediakan kelas Socket yang mengimplementasikan salah satu sisi dari komunikasi 2 arah antara program java yang kita tulis dan program lain di jaringan. Sebagai tambahan, java.net juga menyediakan kelas ServerSocket yang mengimplementasikan sebuah socket yang dapat digunakan server untuk mendengar dan menerima koneksi ke klien. Selanjutnya, kita akan belajar untuk menulis dan membaca dari socket. Perhatikan kode di bawah ini : import java.io.*; import java.net.*; public class EchoClient { public static void main(String[] args) throws IOException { Socket echoSocket = null; PrintWriter out = null; BufferedReader in = null; try { echoSocket = new Socket("taranis", 7); out = new PrintWriter(echoSocket.getOutputStream(), true); in = new BufferedReader(new InputStreamReader( echoSocket.getInputStream())); } catch (UnknownHostException e) { System.err.println("Don't know about host: taranis."); System.exit(1); } catch (IOException e) { LSP Telematika Indonesia
166
System.err.println("Couldn't get I/O for " + "the connection to: taranis."); System.exit(1); BufferedReader stdIn = new BufferedReader( new InputStreamReader(System.in)); String userInput; while ((userInput = stdIn.readLine()) != null) { out.println(userInput); System.out.println("echo: " + in.readLine()); } out.close(); in.close(); stdIn.close(); echoSocket.close();
} } Program di atas mengimplementasikan sebuah client, EchoClient yang akan berkomunikasi dengan Echo server. Echo server hanya menerima data dari klien dan mengirimkan kembali data tersebut. Echo server menggunakan port 7. EchoClient membuat socket sehingga membuat koneksi dengan Echo server, kemudian membaca input dari user lalu meneruskan teks tersebut ke Echo server dengan menuliskannya di socket. Server mengembalikan input client dengan mengirimkan input tersebut lewat socket. Program client membaca dan menampilkan data yang diterima dari server. Berikut ini adalah kode untuk membuat koneksi socket antara client dengan server serta membuat objek PrintWriter dan BufferedReader sehingga program dapat menulis karakter Unicode di socket.
echoSocket = new Socket("taranis", 7); out = new PrintWriter(echoSocket.getOutputStream(), true); in = new BufferedReader(new InputStreamReader( echoSocket.getInputStream())); Untuk mengirim data ke server, EchoClient cukup menuliskannya ke PrintWriter sedangkan untuk memperoleh respon dari server, EchoClient hanya perlu membaca dari BufferedReader. Menulis Program Server Program server dimulai dengan membuat objek ServerSocket untuk mendengan dari port tertentu. Ketika menulis ke server, pilih port yang sedang tidak digunakan. Program di atas menggunakan port 4444. LSP Telematika Indonesia
167
try { serverSocket = new ServerSocket(4444); } catch (IOException e) { System.out.println("Could not listen on port: 4444"); System.exit(-1); } Apabila port yang kita pilih telah digunakan oleh servis yang lain maka program akan berakhir. Apabila server telah berhasil terhubung dengan port maka objek ServerSocket telah terbentuk dan langkah selanjutnya adalah menerima koneksi dari client (ditunjukkan oleh tulisan yang ditebalkan). Socket clientSocket = null; try { clientSocket = serverSocket.accept(); } catch (IOException e) { System.out.println("Accept failed: 4444"); System.exit(-1); } Method accept menunggu hingga client aktif dan meminta koneksi dengan host dan port server. Ketika koneksi telah berhasil tercipta maka method accept akan mengembalikan objek socket yang terikat pada nomor port. Server dapat berkomunikasi dengan client dengan socket ini. Program ini tidak mendukung multiple client. Komunikasi antara server dan client dengan menggunakan kode : PrintWriter out = new PrintWriter( clientSocket.getOutputStream(), true); BufferedReader in = new BufferedReader( new InputStreamReader( clientSocket.getInputStream())); String inputLine, outputLine; // initiate conversation with client KnockKnockProtocol kkp = new KnockKnockProtocol(); outputLine = kkp.processInput(null); out.println(outputLine); while ((inputLine = in.readLine()) != null) { outputLine = kkp.processInput(inputLine); out.println(outputLine); if outputLine.equals("Bye.")) break; } Setelah komunikasi berakhir kode di bawah ini digunakan untuk menutup input dan output stream, client socket dan server socket. out.close(); LSP Telematika Indonesia
168
in.close(); clientSocket.close(); serverSocket.close();
4.9 JDBC API

JDBC API ( Java Connectivity Application Programming Interface ) berfungsi untuk melakukan koneksi antara basis data dengan program yang ditulis dengan bahasa pemrograman Java. Sehingga dengan demikian, kita dapat melakukan query terhadap data dalam basis data yang kemudian data tersebut dapat ditampilkan melalui console atau melalui Graphical User Interface (GUI). Isi JDBC berupa kelas-kelas yang dapat digunakan untuk koneksi ke basis data tertentu, memproses permintaan dari client dan mengirim respon dari server sesuai dengan permintaan. Pada subbab berikutnya kita akan mempelajari penggunaan JDBC dengan basis data SQL Server 2000 dan data akan ditampilkan dalam GUI.
4.9.1 Koneksi SQL Server 2000

Sebelum SQL Server 2000 mendukung koneksi dengan Java, ODBC (Open Database Connectivity) dijadikan alternatif untuk melakukan koneksi. Namun pada tanggal 16 Januari 2003, Microsoft merilis driver SQL Server 2000 bagi JDBC sehingga untuk melakukan koneksi, kita tidak perlu lagi menggunakan ODBC. Driver SQL Server 2000 untuk JDBC dapat awal diperoleh untuk dari url http://www.microsoft.com/sql/downloads. import java.sql.*; Setelah itu, kita dapat memakai driver SQL server 2000 untuk JDBC bersama dengan pernyataan Class.forName(). Berikut ini adalah contoh kodenya : Class.forName(com.microsoft.jdbc.sqlserver.SQLServerDriver); Kemudian kita membuat koneksi ke SQL Serever 2000 dengan menuliskan kode : Connection con = DriverManager.getConnection(jdbc:microsoft:sqlserver://PENTIUM:1433; DatabaseName=Northwind, sa, admin); Berdasarkan pernyataan diatas, ada beberapa hal yang harus disesuaikan dengan keadaan komputer kita. PENTIUM dalam pernyataan diatas adalah nama komputer tetapi bisa juga berisi alamat TCP/IP komputer server jika terkoneksi pada jaringan dan kita berusaha melakukan koneksi ke SQL Server. Selanjutnya merupakan port TCP/IP yang digunakan defaultnya 1433. DatabaseName merupakan nama basis data yang akan kita akses. Selanjutnya, sa dan admin LSP Telematika Indonesia Langkah melakukan
koneksi adalah mengimpor paket java.sql yang dituliskan dalam kode :
169
merupakan user name dan password dari SQL Server 2000 yang digunakan untuk mengakses basis data. Berikut ini adalah contoh kode lengkap cara koneksi basis data dengan JDBC : Program : Koneksi.java Import java.sql.*; Class Koneksi { public static void main(String[] args) { try { Class.forName(com.microsoft.jdbc.sqlserver.SQLServerDriver); Connection con = DriverManager.getConnection(jdbc:microsoft:sqlserver: //PENTIUM:1433;DatabaseName=Northwind, sa, admin); con.close(); System.out.println(Koneksi berhasil!!!) System.exit(0); } catch(ClassNotFoundException aClass) { System.out.println(Driver tidak ada); } catch(SQLException aSql) { System.out.println(aSql.getMessage()); } } } Dalam kode diatas kita menggunakan perintah try-catch yang berfungsi untuk mengetahui apabila terjadi kesalahan. Catch pertama untuk menangkap kesalahan jika driver tidak ditemukan, sedangkan catch yang kedua befungsi untuk menangkap kesalahan pada username dan password. Setelah kode di atas dijalankan maka hasil tampilannya sebagai berikut :
170
Gambar 4.9.1.1 Tampilan Program Koneksi.java
4.8.2
Operasi Basis Data Dengan JDBC
Dalam basis data beberapa operasi yang dapat dilakukan diantaranya adalah memperoleh data, menambah data, mengubah data dan menghapus data. Berikut ini adalah contoh kode untuk tiap operasi beserta penjelasannya : 1. Menampilkan data Menampilkan data dari basis data dapat dilakukan apabila koneksi ke basis data telah berhasil dilakukan. Perhatikan contoh kode dibawah ini : Program : Lihat.java import java.sql.*; class Lihat { public static void main(String[] args) { try { Class.forName("com.microsoft.jdbc.sqlserver.SQLServerDriver"); Connection con=DriverManager.getConnection ("jdbc:microsoft:sqlserver://PENTIUM:1433;DatabaseName=Northwind", "sa","admin"); Statement stat = con.createStatement(); ResultSet rs = stat.executeQuery("Select * from Customers"); while(rs.next()) { System.out.println("Customer ID : " + rs.getString("CustomerID")); System.out.println("Company Name : " + rs.getString("CompanyName")); System.out.println("Constact Name : " LSP Telematika Indonesia
171
+ rs.getString("ContactName")); System.out.println("Contact Title : " + rs.getString("ContactTitle")); System.out.println("Address : " + rs.getString("Address")); System.out.println("City : " + rs.getString("City")); System.out.println("Region : " + rs.getString("Region")); System.out.println("Postal Code : " + rs.getString("PostalCode")); System.out.println("Country : " + rs.getString("Country")); System.out.println("Phone : " + rs.getString("Phone")); System.out.println("Fax : " + rs.getString("Fax")); System.out.println("\n"); } con.close(); System.exit(0); } catch(ClassNotFoundException eclass) { System.out.println("Driver tidak ada"); } catch(SQLException esql) { System.out.println(esql.getMessage()); } } } Untuk melakukan query ke basis data. Kita perlu mendeklarasikan variable dengan tipe statement. Variable tersebut akan menjalankan pernyataan SQL. Selain itu, kita juga perlu mendeklarasikan variable dengan tipe ResultSet yang berfungsi untuk menampung data hasil query. Setelah kita mendapatkan data, kita perlu menampilkan data tersebut selama masih ada. Untuk itu, kita menggunakan While dengan method next untuk memindahkan kursor ke data berikutnya. Setelah data ditampilkan, koneksi basis data ditutup dan program berakhir. Hasil tampilan untuk kode diatas adalah sebagai berikut :
172
Gambar 4.9.2.1 Tampilan Program Lihat.java
2. Menambah data Setelah berhasil mengakses basis data, selanjutnya kita akan mencoba menambah data ke basis data. Berikut ini adalah contoh kode untuk menambah data dalam basis data : Program : InputConsole.java import java.io.*; import java.sql.*; public class InputConsole { public static void main(String args[]) { try { // untuk menerima input dari console BufferedReader stdin = new BufferedReader(new InputStreamReader(System.in)); String id, name, contact, title, address, city, region, code, country, phone, fax ; System.out.println("Data Baru : "); System.out.print("Customer ID : "); id = stdin.readLine(); System.out.print("Company Name : "); name = stdin.readLine(); System.out.print("Contact Name : "); contact = stdin.readLine(); System.out.print("Contact Title : "); title = stdin.readLine(); System.out.print("Address : "); address = stdin.readLine(); LSP Telematika Indonesia
173
System.out.print("City : "); city = stdin.readLine(); System.out.print("Region : "); region = stdin.readLine(); System.out.print("Postal Code : "); code = stdin.readLine(); System.out.print("Country : "); country = stdin.readLine(); System.out.print("Phone : "); phone = stdin.readLine(); System.out.print("Fax : "); fax = stdin.readLine(); Class.forName("com.microsoft.jdbc.sqlserver.SQLServerDriver"); Connection con = DriverManager.getConnection ("jdbc:microsoft:sqlserver://PENTIUM:1433;DatabaseName=Northwind", "sa","admin"); Statement stat = con.createStatement(); String sql="insert into Customers values('" + id + "','" + name + "','" + contact + "','" + title + "','" + address + "','" + city + "','" + region + "','" + code + "','" + country + "','" + phone + "','" + fax + "')"; stat.executeUpdate(sql); stat.close(); con.close(); System.out.println("Input data berhasil"); } catch (Exception e) { System.out.println("Error : " + e); } } }
Seperti sebelumnya, kita perlu mendeklarasikan variable yang berfungsi menjalankan pernyataan SQL. Kemudian deklarasikan variable dengan tipe String yang berisi pernyataan SQL untuk menerima input. Setelah itu jalan pernyataan SQL dengan method executeUpdate(string input). Setelah data berhasil dimasukkan ke basis data, koneksi pada basis data dapat ditutup. Hasil tampilan untuk kode diatas adalah sebagai berikut :
174
Gambar 4.9.2.2 Tampilan Program InputConsole.java
3. Mengubah Data Untuk melakukan pengubahan data, kita harus menemukan data yang akan diubah lalu mengubah data tersebut. Berikut ini adalah contoh kode untuk mengubah data: Program : EditConsole.java import java.io.*; import java.sql.*; public class EditConsole { public static void main(String args[]) { try { BufferedReader stdin = new BufferedReader(new InputStreamReader(System.in)); String id, name, contact, title, address, city, region, code, country, phone, fax ; System.out.println("Data yang akan diedit : "); System.out.print("Customer ID : "); id = stdin.readLine(); Class.forName("com.microsoft.jdbc.sqlserver.SQLServerDriver"); Connection con = DriverManager.getConnection ("jdbc:microsoft:sqlserver://PENTIUM:1433;DatabaseName=Northwind", "sa","admin"); Statement stat = con.createStatement(); String sql="select * from Customers where CustomerID='"+id+"'"; LSP Telematika Indonesia
175
ResultSet rs = stat.executeQuery(sql); if (rs.next()) { System.out.println("Company Name : " + rs.getString("CompanyName")); System.out.println("Contact Name : " + rs.getString("ContactName")); System.out.println("Contact Title : " + rs.getString("ContactTitle")); System.out.println("Address : " + rs.getString("Address")); System.out.println("City : " + rs.getString("City")); System.out.println("Region : " + rs.getString("Region")); System.out.println("Postal Code : " + rs.getString("PostalCode")); System.out.println("Country : " + rs.getString("Country")); System.out.println("Phone : " + rs.getString("Phone")); System.out.println("Fax : " + rs.getString("fax")); System.out.println(); System.out.println("Diganti dengan Data : "); System.out.print("Company Name : "); name = stdin.readLine(); System.out.print("Contact Name : "); contact = stdin.readLine(); System.out.print("Contact Title : "); title = stdin.readLine(); System.out.print("Address : "); address = stdin.readLine(); System.out.print("City : "); city = stdin.readLine(); System.out.print("Region : "); region = stdin.readLine(); System.out.print("Postal Code : "); code = stdin.readLine(); System.out.print("Country : "); country = stdin.readLine(); System.out.print("Phone : "); phone = stdin.readLine(); System.out.print("Fax : "); fax = stdin.readLine(); sql= "Update Customers set " + "CompanyName='" + name + "'," + "ContactName='" + contact + "'," + "ContactTitle='" + title + "'," + "Address='" + address + "'," + "City='" + city + "'," + "Region='" + region + "'," + "PostalCode='" + code + "'," + "Country='" + country + "'," + LSP Telematika Indonesia
176
"Phone='" + phone + "'," + "Fax='" + fax + "'"+ "where CustomerID='" + id + "'"; stat.executeUpdate(sql); } else { System.out.println("Tidak ditemukan data"); System.out.println("dengan CustomerID tersebut!"); } stat.close(); con.close(); } catch (Exception e) { System.out.println("Error : " + e); } } }
Kode diatas menampilkan data lama yang akan diubah kemudian meminta input data baru yang digunakan untuk menggantikan data lama. Hasil tampilan untuk kode diatas adalah sebagai berikut :
Gambar 4.9.2.3 Tampilan Program EditConsole.java
177
4. Menghapus data Langkah-langkah untuk menghapus data, memiliki kemiripan dengan mengubah data. Awalnya data yang akan dihapus dicari terlebih dahulu, setelah ditemukan barulah data tersebut dihapus. import java.io.*; import java.sql.*; public class HapusConsole { public static void main(String args[]) { try { BufferedReader stdin = new BufferedReader(new InputStreamReader(System.in)); String id, jawab; System.out.println("Data yang akan dihapus : "); System.out.print("Customer ID : "); id = stdin.readLine(); Class.forName("com.microsoft.jdbc.sqlserver.SQLServerDriver"); Connection con = DriverManager.getConnection ("jdbc:microsoft:sqlserver://PENTIUM:1433;DatabaseName=Northwind", "sa","admin"); Statement stat = con.createStatement(); String sql="select * from Customers where CustomerID='"+id+"'"; ResultSet rs = stat.executeQuery(sql); if (rs.next()) { System.out.println("Company Name : " + rs.getString("CompanyName")); System.out.println("Contact Name : " + rs.getString("ContactName")); System.out.println("Contact Title : " + rs.getString("ContactTitle")); System.out.println("Address : " + rs.getString("Address")); System.out.println("City : " + rs.getString("City")); System.out.println("Region : " + rs.getString("Region")); System.out.println("Postal Code : " + rs.getString("PostalCode")); System.out.println("Country : " + rs.getString("Country")); System.out.println("Phone : " + rs.getString("Phone")); System.out.println("Fax : " + rs.getString("fax")); System.out.print("Dihapus (Y/T) ? "); jawab = stdin.readLine(); LSP Telematika Indonesia
178
if (jawab.equalsIgnoreCase("Y")) { sql="delete from Customers where " + "CustomerID='" + id + "'" ; stat.executeUpdate(sql); System.out.println("Data telah dihapus!"); } stat.executeUpdate(sql); } else { System.out.println("Tidak ditemukan data"); System.out.println("dengan Customer ID tersebut!"); } stat.close(); con.close(); } catch (Exception e) { System.out.println("Error : " + e); } } }
Dengan kode di atas, sebelum dilakukan penghapusan data program akan menampilkan kembali data yang akan dihapus serta melakukan konfirmasi penghapusan data. Hasil tampilan untuk kode diatas adalah sebagai berikut :
Gambar 4.9.2.4 Tampilan Program HapusConsole.java
179
4.10
Untuk
JavaServer Page (JSP)

membuat aplikasi web yang komplek, penulis menyarankan anda
menginstal J2EE yang medukung aplikasi JSP, servlet dan Enterprise Java Bean. JSP adalah sebuah template web page yang menggunakan kode java untuk menghasilkan file HTML secara dinamis. JSP berjalan di komponen server yang disebut JSP container yang menterjemahkannya ke Java Servlet. Keuntungan dari penggunaan JSP adalah : 1. Memiliki kinerja dan skalabilitas yang lebih baik dibandingkan script CGI 2. Tidak membutuhkan cara menghidupkan klien secara khusus 3. Mendukung HTTP Session 4. Memiliki akses penuh ke teknologi Java 5. Melakukan kompilasi secara otomatis 6. Tidak membutuhkan URL khusus untuk mengakses 7. Memiliki kecocokan dengan alat pengembangan web. Halaman JSP terdiri dari 3 (tiga) bentuk, yaitu : 1. Kode JSP Dibuat oleh programmer. Terdiri dari file teks dengan ekstension .jsp serta mengandung campuran dari kode HTML, statement Java dan perintahperintah JSP serta aksi yang mendefinisikan cara untuk menghasilkan web page untuk melakukan task tertentu. 2. Kode Java JSP container menterjemahkan kode JSP menjadi kode untuk java servlet. 3. Java class yang telah dikompilasi Kode servlet yang dihasilkan telah dikompilasi menjadi kode byte dengan ekstension .class.
Gambar 4.10.1 Halaman JSP
Ketika ada permintaan terhadap halaman JSP maka yang dilakukan container pertama kali adalah menentukan nama kelas dari file JSP yang bersangkutan. Apabila kelas tidak ditemukan atau kode JSP telah berubah ketika terakhir kali di kompilasi maka java container akan membuat kode java untuk servlet yang LSP Telematika Indonesia
180
bersesuaian dan melakukan kompilasi. Langkah terakhir adalah java melepaskan thread untuk menangani permintaan HTTP di objek yang sedang digunakan. Berikut ini adalah contoh kode sederhana beserta hasil keluarannya dari halaman JSP untuk melakukan konversi dari kilometer per liter menjadi miles per gallon : <%@ <%@ <%@ <%@ page page page page session="false" %> import="java.io.*" %> import="java.text.*" %> import="java.util.*" %>
<%-- Prints a conversion table of miles per gallon to kilometers per liter --%> <%! private static final DecimalFormat FMT = new DecimalFormat("#0.00"); private static final double CONVERSION_FACTOR = 2.352145;
%>
<html> <head> <title>Fuel Efficiency Conversion Chart</title> </head> <body> <center> <h1>Fuel Efficiency Conversion Chart</h1> <table border="1" cellpadding="3" cellspacing="0"> <tr> <th>Kilometers per liter</th> <th>Miles per Gallon</th> </tr> <% for(double kmp1=5; kmp1 <= 20; kmp1 += 1.0>) { double mpg = kmp1*CONVERSION_FACTOR; %> <tr> <td align="right"><%= FMT.format(kmp1) %></td> <td align="right"><%= FMT.format(mpg) %></td> </tr> <%> } %> </table> </center> </body> </html> Instalasi Aplikasi JSP dapat berjalan dengan menggunakan server Apache tomcat. Berikut ini adalah cara instalasi-nya. Versi Apache tomcat yang akan dijelaskan cara instalasinya adalah versi 5.5. 1. Install JDK Tomcat 5.5 dirancang untuk berjalan diatas J2SE 5.0 tetapi bisa juga berjalan diatas JDK 1.4 dengan menggunakan paket compatability. Aplikasi J2SE dapat ditemukan di http://java.sun.com/j2se/. LSP Telematika Indonesia
181
2. Install Tomcat Download file Tomcat di http://jakarta.apache.org. Instalasi di windows sama seperti wizard installer. Setelah instalasi selesai aktifkan server Tomcat, lalu buka browser dan masukkan http://localhost:8080. Apabila instalasi berhasil maka akan ditampilkan halaman seperti di bawah ini :
Gambar 4.10.2 Test File Instalasi Tomcat
4.10.1 Komponen JSP

Pada bab ini akan dijelaskan mengenai komponen yang digunakan JSP, menjelaskan cara penulisan (sintaks) serta artinya (semantic).
Komponen dari halaman JSP File .jsp dapat terdiri dari tag JSP, template data atau kombinasi dari keduanya. Tag jsp adalah instruksi untuk JSP container mengenai cara kode dihasilkan dan cara menjalankannya. Tag-tag ini memiliki tag pembuka dan tag penutup yang dapat dikenali oleh JSP container. Template data adalah bagian lain yang tidak dikenali JSP container. Template data (umumnya HTML) diteruskan tanpa mengalami modifikasi. Ada 3 (tiga) tipe dari tag JSP : Perintah Perintah adalah instruksi untuk JSP container mengenai kode yang akan dihasilkan. Bentuk dari perintah adalah : LSP Telematika Indonesia
182
<%@ nama_perintah [nama_atribut=nilai_atribut ...] %> Spasi, tab dan baris baru dapat muncul setelah <%@ dan sebelum %> dan juga dapat muncul setelah nama_perintah dan diantara pasangan nama_atribut/nilai_atribut. File yang mengandung <%@ juga mengandung %>. Spesifikasi JSP 1.2 mendefinisikan 3 (tiga) standar perintah yang dapat digunakan dalam lingkungan JSP : 1. Page Perintah page digunakan untuk menentukan atribut dari file JSP secara keseluruhan. Sintaksnya adalah : <%@ page [nama_atribut=nilai_atribut...] %> Beberapa atribut dalam perintah ini diantaranya adalah language, extends dan session. Atribut language menentukan bahasa yang digunakan dalam scriptlets, ekspresi dan deklarasi. Pada spesifikasi JSP 1.2 satu-satunya nilai dari atribut language adalah java. Atribut extends menentukan nama superclass yang digunakan dalam file JSP. Superclass adalah kelas yang mengimplementasi HttpJspPage interface. Atribut session bernilai true atau false. Jika bernilai true maka servlet yang dihasilkan akan mengandung kode untuk HTTP session. 2. Include Perintah include menggabungkan isi dari file lain ketika perubahan menjadi input stream .jsp, seperti #include pada perintah bahasa C. Sintaks perintah ini adalah : <%@ include file=filename %> filename adalah alamat absolute atau relative yang akan terjemahkan sesuai konteks dari servlet yang berlaku, contoh : <%@ include file=/header.html %> <%@ include file=/doc/legal/disclaimer.html %> <%@ include file=sortmethod %> 3. taglib Perintah taglib memungkinkan akse-aksi dapat dilakukan pada file melalui penggunaan kumpulan tag. Sintaks perintah ini adalah : <%@ %> tagLibraryURL adalah URL dari kumpulan tag sedangkan prefix adalah penamaan tag yang kita tentukan sendiri. Contoh : taglib url=tagLibraryURL prefix=tagPrefix
<%@
tglib
url=/tlds/FancyTableGenerator.tld
prefix=ft %>
183
jika FancyTableGenerator.tld mendefinisikan tag bernama table maka halam JSP dalam mengandung tag dengan tipe : <ft:table> ... </ft:table>. Element scripting termasuk di dalamnya ekspresi, scriptlets dan deklarasi JSP menyediakan cara mudah untuk mengakses nilai variabel Java atau ekspresi lain dan menggabungkan nilainya dengan HTML di halaman yang sama. Sintaksnya adalah : <%=exp%> exp adalah ekspresi dalam java. Ekspresi dapat memiliki tipe data yang berbeda asalkan bisa dikonversi menjadi string. Konversi dilakukan hanya dengan menghasilkan perintah out.print(). Contoh kode JSP : the current time is <%= new java.util.Date() %> akan menghasilkan kode servlet : out.write(The current time is ); out.print( new java.util.Date() ); out.write(\r\n);
Scriptlet adalah sekumpulan statement-statement yang bertujuan untuk memproses permintaan HTTP. Sintaks dari scriptlet adalah : <% statement; [statement;...] %> Kompilator JSP akan memasukkan isi scriptlet verbatim ke dalam method _jspService() sesuai urutan penulisan kode. Sebuah scriptlet dapat mengandung symbol ({} yang ditutup di scriplet lain. Perhatikan contoh file JSP dibawah ini : <%@ page import =java.text.* session=false > <html> <head> <title>Scriptlet Example</title> </head> <body> <table border=0 cellpadding=3> <tr> <th> Fahrenheit</th> <th>Celcius</th> </tr> <% NumberFormat fmt = new DecimalFormat(###.000); for (int f=32; f<=212; f +=20) { double c = ((f-32) * 5) / 10.0; String cs = fmt.format(c); %> <tr> <td align=RIGHT><%= f %></td> <td align=RIGHT><%= cs %></td> </tr> <% } LSP Telematika Indonesia
184
%> </table> </body> </html> Kode diatas terdiri dari 2 (dua) scriptlet, satu pada loop dan lainnya untuk menutup ( { }. Diantara kedua scriptlet, terdapat kode HTML untuk menghasilkan sebaris tabel, menggunakan ekspresi JSP untuk mengakses nilainya. Kode servlet yang dihasilkan mengubah scriptlet dan kode yang ada diantaranya menjadi seperti dibawah. NumberFormat fmt = new DecimalFormat(###.000); for (int f=32; f <= 212; f += 20) { double c = ((f-32) * 5) / 9.0; String cs = fmt.format(c); out.write(\r\n <tr>\r\n <td align=\RIGHT\>); out.print(f); out.write(</td>\r\n <tr>\r\n <td align=\RIGHT\>); out.print(cs); out.write(</td>\r\n <tr>\r\n); } Hasil keluarannya seperti di bawah ini : Fahrenheit 32 52 72 92 112 132 152 172 192 212 Celcius .000 11.111 22.222 33.333 44.444 55.556 66.667 77.778 88.889 100.000
Deklarasi mengandung statement java tetapi berbeda dengan scriptlet, deklarai berada di luar method _jspService(). Sintaks dari deklarasi adalah : <%! statement [statement...] %>
Deklarasi dapat digunakan untuk mendeklarasi kelas atau instance variabel, method atai inner class. Berbeda dengan scriplet, deklarasi tidak memiliki akses ke objek implicit. Objek implicit adalah variable yang bisa berada dalam scriptlet dan ekspresi, bisa diakses seperti variable lainnya tetapi tidak perlu dideklarasi terlebih dahulu.
185
Spesifikasi JSP menyediakan 2 (dua) cara untuk memasukkan comments dalam file JSP yaitu hidden comment yang hanya terlihat dalam file JSP itu sendiri dan comment HTML atau XML yang dapat digunakan dalam file JSP. Sintaks dari hidden comment adalah sebagai berikut : <%-- This is a hidden JSP Comment --%> sedangkan sintaks dari comment HTML atau XML :  Ketika kompilator JSP menemukan tag <%-- maka semua yang berada diantara tag ini kanad diabaikan hingga kompilator menemukan tag --%>
Aksi Aksi adalah tag JSP tingkat tinggi yang dapat digunakan untuk membuat, memodifikasi atau menggunakan objek lain. Berbeda dengan tag perintah atau scripting, aksi dikodekan menggunakan sintaks XML yang ketat : <tagname [attr=valew attr=value...]>...</tag-name> atau, jika aksi tidak memiliki statement diantaranya maka penulisan kode dapat dipersingkat menjadi : <tagname [attr=value attr=value...]/> Aturan XML mengharuskan : 1. Setiap tag memiliki tag penutup 2. Nilai atribut diawali dan diakhiri dengan symbol kutip () 3. Pasangan tag harus sesuai Beberapa contoh aksi diantaranya adalah : jsp:include Mengikutsertakan sebuah file ketika suatu halaman diakses jsp:useBean Mencari atau membuat objek baru dari JavaBean jsp:setProperty Mengeset properti dari JavaBean jsp:getProperty Memasukkan properti dari JavaBean ke output jsp:forward Meneruskan ke halaman baru jsp:plugin Menghasilkan kode dari browser tertentu yang membuat objek atau tag yang disisipkan untuk Java plugin
Berikut ini adalah contoh kode JSP yang menggunakan semua tag yang telah dijelaskan sebelumnya. Kode ini dinamakan Echo.jsp yang berfungsi untuk LSP Telematika Indonesia
186
menampilkan tabel yang mengandung informasi mengenai permintaan HTTP yang dikirim browser. <%@ page import=java.util.* %> <html <head> <title>Echo</title> <style> <jsp:include page=style.css flush=true/> </style> </head> <body> <h1>HTTP Request Headers Received</h1> <table border=1 cellpadding=4 cellspacing=0> <% Enumeration eNames = request.getHeaderNames(); while (eNames.hasMoreElements()) { String name = (String_ eNames.nextElement(); String value = normalize(request.getHeader(name)); %> <tr><td><%= name %></td><td><%= value %></td></tr> <% } %> </table> </body> </html> <%! private String normalize(String value) { StringBuffer sb = new StringBuffer(); for(int i=0; I < value.length(); i++) { char c = value.charAt(i); sb.append(c); if(c==;) sb.append(<br>); } return sb.toString(); } %> Mari kita bahas kode JSP di atas bagian demi bagian. Perintah File JSP diawali dengan perintah yang menandakan menggunakan paket java.util : <%@ page import=java.util. %> Perintah ini akan muncul di kode servlet pada bagian awal dari daftar kelas yang di-import : ... import import import import import java.util.*; javax.servlet.*; javax.servlet.http.*; javax.servlet.jsp.*; org.apache.jasper.runtime.*; bahwa file di atas
187
<jsp:include> File diatas menggunakan style sheet untuk mengatur tampilan dari output. Penggunaan style sheet dengan menggunakan aksi <jsp:include> : <jsp:include page=style.css flush=true /> Aksi <jsp:include> menyebabkan style sheet di bawah ini dibaca ketika waktu permintan : body { font: Sans-Serif 12 px; background-color : #FEFEF2; }; h1 { font-size: 130%} Scriptlet Ada 2 (dua) scriptlet dalam file JSP di atas, dengan template HTML data terletak sebelum, diantara dan setelah scriptlet. Data HTML <html> <head> <title>Echo</title> <style> .... diteruskan tanpa mengalami perubahan dengan statement write : out.write {\r\n<html>\r\n + <head>\r\n + <title>Echo</title>\r\n + <style>\r\n ... Kemudian scriptlet yang pertama hanya di salin ke servlet :
);
Enumeration eNames = request.getHeaderNames(); while {eNames.hasMoreElements()) { String name = (String)eNames.nextElement(); String value = normalize(request.getHeaderName()); Scriplet yang kedua hanya terdiri dari symbol ( } ).
Ekspresi JSP Setiap iterasi dari loop, scriptlet menghasilkan nama header dan nilai header dari objek permintaan. Daripada mengeprint setiap nilai dengan menggunakan out.write(), pembuat kode kembali ke HTML dan menggunakan ekspresi tag. <% <tr><td><%= name %></td><td><%= value %></td></tr> %> yang menghasilkan kode servlet seperti di bawah ini : out.write(\r\n <tr><td>); out.print(name); out.write(</td><td>); out.print(value); out.write(</td></tr>\r\n );
188
Deklarasi Nilai header bisa panjang dan menyebabkan lebar tabel tidak mencukupi. Untuk mengatasi masalah ini, dengan cara menscan nilai header untuk mencari symbol ( ; ) dan memasukkan tag <br> ketika symbol tersebut ditemukan. Fungsi ini dijalankan dengan method normalize(), yang ditemukan di bagian akhir file JSP : <%! private String normalize(String value) { StringBuffer sb = new StringBuffer(); for(int i=0; I < value.length(); i++) { char c = value.charAt(i); sb.append(c); if (c == ;) sb.append(<br>); } return sb.toString(); } %> Seperti kasus kedua scriptlet, kode deklarasi di salin verbatim ke servlet yang dihasilkan tetapi tidak berada dalam method _jspService(). Sebaliknya, ditulis dalam block kelas tetapi di luar method lainnya, dekat dengan awal servlet : private String normalize(String value) { StringBuffer sb = new StringBuffer(); for(int i=0; I < value.length(); i++) { char c = value.charAt(i); sb.append(c); if (c == ;) sb.append(<br>); } return sb.toString(); } Hasil tampilan dari kode diatas adalah sebagai berikut :
Gambar 4.10.1.1 Output Echo.jsp
189
4.10.2 JSP Cookies

Cookie adalah data yang dikirim web server ke browser client. Cookies tersimpan di client hard disk dalam bentuk file teks. Cookies dapat digunakan web server untuk mengidentifikasi pengguna web, dengan cara inilah server dapat melacak user. Di JSP, cookie adalah objek dari kelas javax.servlet.http.Cookie. Kelas dini digunakan untuk membuat cookie. Pada umumnya cookie digunakan untuk management session karena cookie dapat mengidentifikasi client. Sebuah cookie memiliki nama, nilai dan atribut seperti comment, path dan domain, umur dan versi. Method getCookies() akan mengembalikian array dari objek Cookie. Cookies dibuat dengan kode sebagai berikut : Cookie(java.lang.String nama, java.lang.String nilai) Berikut ini adalah method-method untuk Cookie :
Tabel 4.10.2.1 : Method-method Cookie
Keterangan Mengembalikan comment yang menjelaskan tujuan dari getComment() cookie atau bernilai null jika comment tidak dibuat. getMaxAge() Mengembalikan umur cookie getName() Mengembalikan nama cookie getPath() Mengembalikan prefiks dari URL getValue() Mengembalikan nilai cookie setComment(String) Mengeset comment untuk cookie Mengeset umur dari cookie. Cookie akan berakhir setelah setMaxAge(int) umur terlewati. Cookie akan muncul hanya jika ada permintaan yang setPath(String) diawali dengan URL ini setValue(String) Mengeset nilai cookie. Berikut ini adalah contoh kode untuk mengeset dan menampilkan cookie : 1. Membuat Form yang akan meminta user untuk memasukkan namanya (cookieform.jsp) <%@ page language="java" %> <html> <head> <title>Cookie Input Form</title> LSP Telematika Indonesia
Method
190
</head> <body> <form method="post" action="setcookie.jsp"> <p><b>Enter Your Name: </b><input type="text" name="username"><br> <input type="submit" value="Submit"> </form> </body> 2. Input dari user (setcookie.jsp) akan digunakan untuk mengeset nilai cookies
<%@ page language="java" import="java.util.*"%> <% String username=request.getParameter("username"); if(username==null) username=""; Date now = new Date(); String timestamp = now.toString(); Cookie cookie = new Cookie ("username",username); cookie.setMaxAge(365 * 24 * 60 * 60); response.addCookie(cookie); %> <html> <head> <title>Cookie Saved</title> </head> <body> <p><a href="showcookievalue.jsp">Next Page to view the cookie value</a><p> </body> 3. Kode di atas akan mengeset nilai cookie dan menampilkan link untuk memperlihatkan halaman cookie (showcookievalue.jsp) <%@ page language="java" %> <% String cookieName = "username"; Cookie cookies [] = request.getCookies (); Cookie myCookie = null; if (cookies != null) { for (int i = 0; i < cookies.length; i++) { if (cookies [i].getName().equals (cookieName)) { myCookie = cookies[i]; break; } } } %> LSP Telematika Indonesia
191
<html> <head> <title>Show Saved Cookie</title> </head> <body> <% %> <% if (myCookie == null) { No Cookie found with the name <%=cookieName%>
} else { %> <p>Welcome: <%=myCookie.getValue()%>. <% } %> </body>
4.10.3
JSP Session
Dalam aplikasi web user berpindah dari satu halaman ke halaman lainnya, untuk itu aplikasi perlu melacak data user dan objek selama berada dalam aplikasi. JSP menyediakan sebuah objek implicit session, yang dapat digunakan untuk menyimpan data tertentu. Selanjutnya, kita akan membuat sebuah aplikasi yang mengambil nama user dan menyimpannya ke session user. Kita akan menampilkan data yang telah disimpan user pada halaman lainnya. 1. Kode JSP untuk meminta input user (savenameform.jsp) <%@ page language="java" %> <html> <head> <title>Name Input Form</title> </head> <body> <form method="post" action="savenametosession.jsp"> <p><b>Enter Your Name: </b><input type="text" name="username"><br> <input type="submit" value="Submit"> </form> </body> 2. Halaman di atas akan meminta nama user. Ketika user memilih tombol submit, file savenametosession.jsp terpanggil. File ini akan mengambil nama user dan menyimpannya ke session user dengan fungsi
192
session.setAttribute(username, username); Berikut ini adalah kode savenametosession.jsp : <%@ page language="java" %> <% String username=request.getParameter("username"); if(username==null) username=""; session.setAttribute("username",username); %> <html> <head> <title>Name Saved</title> </head> <body> <p><a href="showsessionvalue.jsp">Next Page to view the session value</a><p> </body> 3. File di atas menyimpan nama user ke objek session dan menampilkan link ke halaman selanjutnya (showsessionvalue.jsp). Ketika user memilih link Next Page to view the session value, halaman showsessionvalue.jsp menampilkan nama user. Berikut ini adalah kode dari showsession.jsp : <%@ page language="java" %> <% String username=(String) session.getAttribute("username"); if(username==null) username=""; %> <html> <head> <title>Show Saved Name</title> </head> <body> <p>Welcome: <%=username%><p> </body> Fungsi session.getAttribute(username) digunakan untuk mengambil
nama user yang tersimpan di session.
Membuat Aplikasi Web menggunakan Servlet

Pada contoh pembuatan servlet kali ini, penulis menggunakan editor NetBeans 4.0. Lngkah-langkahnya:
1. PIlih menu File | New dan pilih File Types HTML, lalu klik next dan beri nama file SelamatBelajar.html(jangan ditulis .html -nya)
193
Gambar 4.10.3.1 Membuat dokumen HTML
2. Edit kode sebagai berikut, aksi dari penekanan button submit ialah pemanggilan servlet /SelamatBelajar. Dimana data yang telah dimasukkan dapat diperoleh menggunakan method getParameter(). Untuk memberikan warna latar belakang digunakan fungsi bgcolor. <html> <head> <title> Registrasi Training e-Technology Server</title> </head> <body bgcolor=silver> <font color="green"><H1><marquee behavior=alternate> Daftar Training di eTechnology Center</marquee></H1></font> <hr> <form action="http://localhost:8084/WebJ2EE/SelamatBelajar" method="POST"> <h4> Mohon masukkan data diri Anda </h4> <p>Nama <input type="text" size="40" name="name"></p> <p>Email <input type ="text" size="40" name="email"><br> <p>Materi <select name="materi"> <option value="Web Programming using J2EE"> Web Programming using J2EE <option value ="Oracle 10g PL/SQL and Form Developer">Oracle 10g PL/SQL and Form Developer <option value="Database Programming using VB.NET and SQL Server 2000"> Database Programming using VB.NET and SQL Server 2000 <option value="IT Specialist">IT Specialist (Networking Win 2003 and .NET Programming) </select><br></p><p> Hari Training : <input type ="checkbox" name=cb value="Sabtu Pagi" > Sabtu Pagi <input type="checkbox" name=cb value ="Sabtu Siang"> Sabtu Siang <input type="checkbox" name=cb value ="Ahad pagi"> Ahad Pagi <input type="Checkbox" name=cb value ="Ahad siang"> Ahad Siang</p> <br> Pesan :<br> <textarea name="pesan" rows=5 cols=50> </textarea> <br> <input type="submit" value ="Submit"></p> LSP Telematika Indonesia
194
</form> </body> </html> Program di atas akan menampilkan dokumen HTML dimana meminta user memasukkan data diri menggunakan <input type=text> dan memilih jenis training neggunakan Combobox serta pilihan hari menggunakan checkbox dengan menampung nilai yang dipilih menggunakan value.. <select name="materi"> <option value="Web Programming using J2EE"> Web Programming using J2EE <option value ="Oracle 10g PL/SQL and Form Developer">Oracle 10g PL/SQL and Form Developer <option value="Database Programming using VB.NET and SQL Server 2000"> Database Programming using VB.NET and SQL Server 2000 <option value="IT Specialist">IT Specialist (Networking Win 2003 and .NET Programming) </select> Kode diatas untuk menampilkan cekbox, sedangkan fungsi berikut digunakan untuk menampilkan cekbox dengan nilai yang disimpan menggunakan fungsi value. Hari Training : <input type ="checkbox" name=cb value="Sabtu Pagi" > Sabtu Pagi <input type="checkbox" name=cb value ="Sabtu Siang"> Sabtu Siang <input type="checkbox" name=cb value ="Ahad pagi"> Ahad Pagi <input type="Checkbox" name=cb value ="Ahad siang"> Ahad Siang Ketika user mengklik button submit, maka data akan dikirim /di post ke alamat tertentu menggunakan fungsi action dan method=POST. Method POST ini kelebihannya dapat mengirimkan data dalam berbagai format dan lebih secure dibandingkan method GET. Karena server yang digunakan bernama localhost dan port yang digunakan oleh Tomcat 8084 serta nama folder J2EE dan nama servlet tujuan ialah SelamatBelajar, maka penulisannya sebagai berikut : <form action="http://localhost:8084/WebJ2EE/SelamatBelajar" method="POST"> 8. Buat file servlet dengan memilih menu new lalu pilih Servlet dan beri nama SelamatBelajar.java, lalu akan tercipta Deployment descriptor (web.xml) yang membuat URL Mapping /SelamatBelajar
195
Gambar 4.10.3.2 URL Maping untuk web.xml
9. Edit kode menjadi seperti berikut ini, anda harus menambahkan import java.util.* karena akan menggunakan kelas GregorianCalendar yang mempunyai berbagai method yang memudahkan kita di dalam melakukan operasi yang berhubungan dengan tanggal. Servlet yang kita buat harus turunan dari kelas HttpServlet.
import java.io.*; import java.util.*; //paket untuk kelas GregorianCalendar import java.net.*; import javax.servlet.*; //paket wajib untuk servlet import javax.servlet.http.*;//paket wajib untuk servlet //Ciri servlet ialah biasanya turunan dari kelas HttpServlet public class SelamatBelajar extends HttpServlet { public void init(ServletConfig config) throws ServletException { super.init(config);} public void destroy() {} protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //Ambil nilai dari textbox menggunakan getParameter String name=request.getParameter("name"); String email=request.getParameter ("email"); String materi =request.getParameter ("materi"); String hari=request.getParameter("cb"); String pesankhusus=request.getParameter("pesan"); String pesan=null; GregorianCalendar calendar= new GregorianCalendar(); //jika user submit data pada pagi hari / AM. if (calendar.get(Calendar.AM_PM )==Calendar.AM) { pesan="Selamat pagi :)"; } else { pesan="selamat Sore"; } response.setContentType("text/html"); //Objek out dari kelas PrintWriter untuk mencetak PrintWriter out = response.getWriter(); LSP Telematika Indonesia
196
out.println("<html>"); out.println("<body >"); out.println("<head>"); out.println("<title>Selamat Bergabung dengan Kami menjadi orang Sukses!</title>"); out.println("</head>"); out.println("<body bgcolor=silver>"); out.println("<font color=green><h1>Selamat Datang :)</h1></font>"); out.println ("<p>" + pesan + ", "+ name+"</p>"); out.println ("<h4> Terima kasih telah mendaftarkan email Anda: " + email + " dengan Kami</h4><br>"); out.println ("<h4> Materi training yang Anda akan ambil ialah: " + materi + " </h4><br>"); out.println ("<h4> Hari yang Anda pilih ialah: " + hari + " </h4><br>"); out.println ("<h4> Pesan Anda ialah: " + pesankhusus +"</h4><br>" ); out.println ("<B><i> Team e-Technology Center Copyright 2005</i></b>"); out.println("</body>"); out.println("</html>"); out.close(); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } public String getServletInfo() { return "Short description"; } } Umumnya kelas di servlet merupakan turunan dari kelas HttpServlet. Program diatas akan mengambil parameter /data yang dimasukkan ke teksbox menggunakan method getParameter(). Hasil proses akan ditampilkan dalam bentuk dokumen HTML dan dikirimkan ke browser klien. 10. Perhatikan file web.xml yang ada di dalam folder WEB-INF yang berfungsi agar apabila browser mengakses suatu situs, dapat mengenal servlet tersebut berupa alias. Informasi yang paling penting dari web.xml ialah <servlet-name> dan <urlpattern> karena mementukan alamat pemanggilan servlet tersebut. Berikut kode yang degenerate oleh NetBeans: <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com /xml/ns/j2ee/web-app_2_4.xsd"> <servlet> <servlet-name>SelamatBelajar</servlet-name> <servlet-class>SelamatBelajar</servlet-class> </servlet> <servlet-mapping> <servlet-name>SelamatBelajar</servlet-name> <url-pattern>/SelamatBelajar</url-pattern> </servlet-mapping> LSP Telematika Indonesia
197
<session-config> <session-timeout> 30 </session-timeout> </session-config> <welcome-file-list> <welcome-file> index.jsp </welcome-file> </welcome-file-list> </web-app> 11. Jalankan program dengan mengklik Run atau klik kanan mouse dan pilih Run File pada file SelamatBelajar.html. Pastikan servlet SelamatBelajar.java telah anda kompile dengan klik kanan mouse pada servlet tersebut agar menghasilkan file Selamatbelajar.class yang akan tersimpan di folder classes.
Gambar 4.10.3.3 Hasil
198
Gambar 4.10.3.4 hasil pemanggilan servlet
Untuk penguasaan materi lanjut, penulis mengharapkan Anda mempelajari mengenai Design Framework Hibernate. yaitu MVC, Struts Framework, Spring dan
Soal Latihan
1. 2. 3. Dokumentasi program java yang dapat dilihat di web browser Method yang tidak membutuhkan implicit parameter Perintah untuk menggunakan driver SQL a. Encupsulation b. javac hello.java c. static d. Class.forName(); e. javadoc
Soal Praktek
4. Buatlah program java yang menghasilkan output seperti di bawah ini :
199
5. Buatlah program java yang melakukan pengurutan angka. Contoh keluarannya adalah sebagai berikut :
200
BAB 5 ASP dan ASP .NET

Tujuan Instruksional Umum :
1. Siswa dapat menjelaskan cara Pemrograman Web ASP dan ASP .NET 2. Siswa dapat menggunakan basis data dengan ASP .NET
Tujuan Instruksional Khusus : 1. Siswa dapat membuat file ASP dan ASP .NET sederhana 2. Siswa dapat membuat session dan cookies 3. Siswa dapat membuat program dengan user control 4. Siswa dapat menerapkan keamanan web 5. Siswa dapat melakukan debugging 6. Siswa dapat membuat aplikasi web dinamis Materi yang ada di bab ini memenuhi : 1. TIK.PR02.014.01 2. TIK.PR08.010.01 Melakukan debugging program Membuat program aplikasi web berbasis ASP
Berikut ini adalah gambaran umum dari materi yang ada di bab ini :
201
5.1 Pengenalan .NET

Active Server Pages (ASP) adalah teknologi yang dikembangkan oleh Micrososft untuk membuat web sites dinamis dimana pengunjung dapat memasukkan suatu value pada halaman web yang kemudian akan dikirimkan ke web server. Teknologi ini membutuhkan pengalaman dan pengetahuan bahasa pemrograman seperti VBScript atau JavaScript. ASP juga dapat dengan mudah dimengerti oleh programmer Visual Basic karena keduanya memiliki pendekatan yang sama dalam memecahkan sebuah problem. Untuk meningkatkan kualitasnya, Microsoft mengembangkan ASP .NET. Dengan pendekatan terbaru ini, Anda dapat mempergunakan .NET framework dan fitur-fiturnya yang beragam untuk membuat aplikasi berbasis web. Framework .NET adalah library yang digunakan untuk membuat aplikasi computer-based maupun web-based. Keduanya dibuat dari bagian framework yang berbeda. Bagian yang digunakan untuk membuat aplikasi computerbased adalah Windows Forms. Sedangkan, bagian yang digunakan untuk membuat aplikasi berbasis web adalah ASP .NET. Meskipun framework .NET terdiri dari beragam sub-library, Anda dapat menciptakan aplikasi apapun dengan hanya menggunakan ASP .NET. Salah satu perbedaan antara ASP .NET dan ASP adalah bahwa aplikasi ASP diinterpretasikan oleh browser sedangkan aplikasi ASP. NET di-compile terlebih dahulu.
5.2 Pengenalan ASP and ASP .NET
5.2.1 ASP
Active Server Pages atau ASP adalah teknologi yang memungkinkan developer untuk mengerjakan proses dalam server. ASP adalah teknologi server side, yang berarti ASP bersifat browser independent. Ini berarti aplikasi web Anda dapat dijalankan oleh browser apapun.
Halaman yang ditampilkan di browser hanya HTML saja atau beserta skrip yang ingin Anda jalankan di client. Sedangkan kode ASP Anda tersembunyi
202
rapi
dan
terbebas
dari
sentuhan
tangan-tangan
yang
kurang
bertanggungjawab. Dengan ASP, developer akan mendapatkan kemudahan dalam membuat aplikasi web. Pilihan bahasa skrip yang digunakan adalah VBScript sebagai default dan Jscript. Namun developer juga dapat menggunakan bahasa skrip lainnya dengan menambahkan add-in untuk ASP, baik yang disediakan Microsoft atau pihak ketiga (third-party). Bukan hanya sisi kemudahan saja yang membuat ASP saat ini dipakai oleh banyak web developer di seluruh dunia. ASP merupakan bagian dari active platform yang berbasiskan teknologi component object model (COM). Dengan teknologi ini, ASP menjadi sangat efisien dalam segi konektivitas maupun penanganan aplikasi untuk transaksi yang jumlahnya sangat banyak. Hal ini dimungkinkan dengan pemakaian Microsoft Transaction Server (MTS). Keuntungan ASP lainnya adalah dukungannya terhadap server component. Dengan server component, developer dapat membuat aplikasi activeX dengan menggunakan bahasa pemrograman seperti Visual Basic, Delphi, C++, Java, atau lainnya dan kemudian menjalankan di ASP Anda.
5.2.2 ASP .NET

Untuk membuat aplikasi ASP .NET, Anda harus mempersiapkan komputer Anda yang akan digunakan untuk mengembangkan aplikasi ASP .NET Anda. Semua hal yang Anda pergunakan disediakan secara gratis. Untuk memulainya, komputer Anda harus memiliki salah satu dari Operating Systems dibawah ini: Microsoft Windows XP Professional (no Home Edition) Microsoft Windows 2000 Server Microsoft Windows Server 2003 (any version) Anda juga harus telah menginstall browser Internet Explorer atau browser lainnya. Spesifikasi minimal yang harus Anda miliki adalah Internet Explorer 5.5, akan tetapi untuk beberapa alasan khusus, Anda harus menginstall versi 6.0.
203
Jika Anda berniat untuk membuat aplikasi berbasis web yang memerlukan database, maka Anda harus menginstall MDAC >= 2.7, yang dapat didownload secara gratis dari web site Microsoft. Sehubungan dengan salah satu Operating System diatas, Anda harus menginstall Microsoft Internet Information Services (IIS) 6.0. Biasanya, selama proses penginstallan operating system, Anda akan memiliki prompt khusus untuk menginstallnya. Atau Anda dapat menginstallnya dari Control Panel -> Add/Remove Programs -> Add/Remove Windows Component -> Internet Information Services (IIS) dan ikuti tahapan-tahapannya:
Gambar 5.2.2.1 Windows Components Wizard
Jika operating system dan komponen tersebut telah siap, Anda harus menginstall framework .NET. Biasanya framework .NET telah terinstall secara otomatis. Jika Anda ingin memeriksanya, Anda dapat membuka Add/Remove Programs dari Control Panel dan Anda akan melihat entry untuk framework Microsoft .NET.
204
Gambar 5.2.2.2 Add/Remove Programs
5.2.3
Membuat Proyek Web
Jika Anda pernah membuat web sebelumnya, Anda tentunya telah familiar dengan konsep dari sebuah web site, yaitu kumpulan file sebagai halaman web dalam sebuah folder. ASP .NET menggunakan pendekatan yang sama dengan hal tersebut, yakni proyek web ASP .NET adalah satu atau lebih file yang akan dihadirkan sebagai aplikasi. Seperti web site lainnya, aplikasi ASP .NET dapat terdiri dari tipe file yang berbeda, file dengan extension yang berbeda untuk tujuan yang berbeda. Hal ini berarti, untuk membuat aplikasi ASP .NET, Anda dapat memulai dengan membuat file HTML yang ber-extension .htm atau .html. Anda juga dapat menggunakan file Cascading Style Sheet (CSS) yang memudahkan Anda untuk membuat format HTML yang lebih baik. Anda juga dapt menggunakan file script-oriented yang ber-extension .js, .vbs, .pl untuk menyempurnakan halaman lainnya.
205
Untuk membuat aplikasi ASP .NET, Anda dapat memulainya dengan membuat sebuah folder dengan nama pilihan Anda. Dibawah ini adalah contoh sebuah folder baru dengan nama Grier Summer Camp:
Gambar 5.2.3.1 Folder Tempat Menaruh File Project
Setelah membuat folder untuk proyek ASP. NET, Anda harus membuat sebuah virtual directory. Untuk melakukannya, Anda harus menampilkan window Internet Information Services (IIS) atau Internet Services Manager. Kemudian, di frame sebelah kiri, expand nama dari server Anda (jika Anda menggunakan server atau komputer lain tetapi tidak terdapat di list, klik kanan Internet Information Services, klik Connect, ketik nama dari komputer dan klik OK) dan expand node dari Web Site default (jika Anda menggunakan Microsoft Windows XP Professional, Anda harus expand Web Site dibawah nama komputer). Klik kanan Default Web Site -> New -> Virtual Directory. Pada halaman pertama dari wizard yang muncul, Anda dapat mengklik Next. Pada halaman kedua, Anda harus mengetik nama yang akan Anda pergunakan di browser untuk mengakses aplikasi yang Anda buat. Dibawah ini adalah contohnya:
206
Gambar 5.2.3.2 Virtual Directory Alias
Pada halaman ketiga, Anda dapat mengetikkan full path ke folder yang Anda buat atau Anda dapat klik Browse untuk mencari dan memilih folde yang telah Anda buat sebelumnya. Dalam dialog box Browse For Folder, cari folder yang Anda buat.
Gambar 5.2.3.3 Web Site Content Directory
207
Halaman keempat mengharuskan Anda untuk memspesifikasikan bagaimana halaman-halaman web pada site akan diakses:
Gambar 5.2.3.4 Access Permission
Setelah mengklik Next pada halaman keempat, Anda dapat klik Finish pada halaman kelima dan sebuah web site baru akan tercipta untuk aplikasi Anda. Microsoft Visual Studio .NET Kesederhanaan Notepad cukup pas jika Anda hanya menuliskan kode. Pada beberapa kasus, jika Anda sedang mengembangkan aplikasi yang menampilkan grafik, Notepad memiliki beberapa keterbatasan karena semua kode harus diketik secara manual. Untuk meningkatkan pengembangan aplikasi ASP .NET, Microsoft menyediakan kesempurnaan tersebut pada Microsoft Visual Studio .NET. Microsoft Visual Studio .NET menyediakan fiturfitur yang memudahkan Anda untuk membuat sebuah aplikasi dan dapat melihat preview yang lebih baik dari pengaturan posisi item-item yang terdapat pada halaman web Anda. Pelajaran untuk membuat proyek web kali ini mengasumsikan bahwa Anda telah menginstall Microsoft Visual Studio .NET 2003 pada komputer Anda. Untuk memulai Microsoft Visual Studio .NET 2003, di Taskbar, Anda dapat klik
208
Start (All) Programs -> Microsoft Visual Studio .NET 2003 -> Microsoft Visual Studio .NET 2003
Gambar 5.2.3.5 Microsoft Visual Studio
Untuk membuat aplikasi ASP .NET di Visual Studio .NET, Anda dapat menampilkan dialog box New Project. Pada dialog box, Anda dapat memilih Visual Basic Projects, Visual C# Projects, atau Visual J# Projects. Pada bagian Templates, Anda dapat klik ASP .NET Web Application. Pada text box Location, di bagian kanan dari http://localhost/, Anda dapat menerima saran nama dari proyek Anda atau Anda dapat mengetikkan nama proyek yang Anda inginkan:
209
Gambar 5.2.3.6 New Project
5.2.4
Kompilasi Proyek Web
Kode-kode yang dibuat untuk proyek web ASP .NET ditulis dalam bentuk plain text termasuk didalamnya tag HTML dan script section. Pada aplikasi ASP, kode-kode tersebut diinterpretasikan oleh browser langsung. Dengan ASP .NET, Anda harus meng-compile proyek tersebut dengan cara yang sama seperti yang Anda lakukan untuk memproses aplikasi Window lainnya. Untuk meng-compile dan execute proyek ASP .NET dalam satu tahapan, pada menu utama, Anda dapat klik Debug -> Start Without Debugging. Meskipun terdapat beberapa teknik atau cara lain dalam compiling (atau debugging) dan execute sebuah proyek, untuk saat ini teknik yang akan digunakan adalah teknik seperti ini.
5.2.5
Menjalankan Proyek Web
Setelah membuat web site, Anda dapat menambahkan file kedalamnya. Anda dapat menciptakan text file dan menyimpannya dalam extension yang sesuai. Ketika menyimpan sebuah file, pastikan Anda menyimpannya dalam folder
210
yang telah Anda buat sebelumnya. Hal ini akan memungkinkan browser untuk mencari lokasi file-file tersebut melalui virtual directory. Halaman ASP .NET adalah file text-based dengan extension .aspx. Isi dari file tersebut tergantung pada Anda dan tidak memiliki kode spesial selain tag HTML biasa. Dibawah ini adalah contoh file dengan tag HTML biasa:
<html> <head> <title>Grier Summer Camp</title> </head> <body> <center><h1>The Grier Summer Camp</h1></center> <p>Located in the heart of Rockville, Maryland, the <b>Grier Summer Camp</b> is an attractive setting aimed at entertaining and supporting youth activities during their summer vacation.</p> <h2>Program Presentation</h2> <p>We feature a state of the art, regularly renovated mansions with world class sport facilities.</p> <p>Coolfront Island, our star house of the season, is a 2-story like chateau featuring nicely finished brown bricks whose sight is tremendously appealing. The estate introduces two large living rooms with exquisite velour furniture. The colonial veranda offers a patio spanning two walls with a lost view down the farreaching landscape. In this particular setting, besides their usual activities, children will learn special human needs to make their experience unforgettable.</p> <p>Please consult our catalogue and see why the Washington Tribune called us <i>the most attractive summer camp of the area</i>.</p> </body> </html>
Setelah membuat file, Anda dapat menyimpannya dengan extension .aspx dalam folder yang Anda pilih:
211
Gambar 5.2.5.1 Menyimpan File Proyek
Setelah menyimpan file tersebut, untuk melihatnya dalam window Internet Information Services, pertama cari virtual directory dari proyek Anda. Kemudian, Anda klik kanan file tersebut dan klik Browse. Cara lainnya adalah dengan membuka Browser dan mengaksesnya dari Address bar, ganti alamatnya dengan http://localhost/ diikuti dengan nama virtual directory yang telah Anda buat sebelumnya, dan dikuti dengan nama file beserta extensionnya. Dibawah ini merupakan hasil tampilan setelah Anda menjalankan aplikasi Anda di browser.
212
Gambar 5.2.3.2 Hasil Keluaran
5.3 Pemrograman ASP .NET Dan ASP

ASP .NET 5.3.1
Web
User Control
control adalah objek grafis yang memudahkan pengguna untuk
berinteraksi dengan halaman-halaman web. Karena banyaknya jenis control untuk berbagai tujuan, pemasukan data dari pengguna ke aplikasi dan konfigurasinya tergantung kepada programmer. Toolbox adalah aksesori yang menyediakan jenis control yang digunakan dalam aplikasi. Control biasa yang dikenal oleh HTML terdaftar dalam bagian yang berjudul HTML:
213
Gambar 5.3.1.1 Toolbox
Jenis control yang digunakan dalam aplikasi ASP .NET terdaftar dalam bagian yang berjudul Web Forms. Sebagai default, Toolbox berada di bagian kiri dari IDE. Untuk mengubah posisinya, Anda dapat drag and drop title bar tersebut ke posisi yang Anda inginkan. Toolbox juga menggunakan lebar default untuk menampilkan itemitem yang terdapat didalamnya. Jika lebarnya terlalu kecil atau besar untuk Anda, Anda dapat mengubahnya. Untuk melakukannya, arahkan mouse Anda ke border pada bagian kanan dan drag kearah kiri atau kanan. Saat Microsoft Visual Studio .NET di-install, Toolbox menambahkan button secara acak. Awalnya, hal tersebut akan menyulitkan untuk menemukan jenis control yang sesuai dengan yang Anda perlukan.Untuk membuatnya lebih baik, Anda dapat mengatur daftar control tersebut sesuai pilihan Anda. Anda memiliki dua pilihan utama. Untuk mengubah posisi dari suatu item pada daftar, klik kanan item tersebut dan klik Move Up atau Move Down. Cara LSP Telematika Indonesia
214
lainnya adalah Anda mengatur item-item tersebut dengan urutan alphabet. Untuk melakukannya, klik kanan dimanapun pada bagian HTML atau Web Forms dan klik Sort Item Alphabetically. Jika Anda telah mengaturnya secara alphabetis, Toolbox akan mengabaikan pengaturan sebelumnya dan Anda tidak dapat mengulanginya lagi. Cara lainnya adalah dengan klik kanan button dari control tersebut dan klik Move Up atau Move Down. Untuk menambahkan control pada aplikasi Anda, Anda dapat drag jenis control yang Anda inginkan dari Toolbox dan drop di posisi yang Anda inginkan pada form halaman web Anda. Control yang telah Anda pilih tersebut akan berada tepat di posisi dimana mouse Anda berhenti. Dengan cara yang sama, Anda dapat menambahkan jenis control lainnya pada halaman web aplikasi Anda. Cara lainnya adalah dengan double click jenis control tersebut dari Toolbox dan secara otomatis control tersebut akan muncul pada bagian atas kiri form halaman web Anda. Jika Anda menginginkan untuk menambahkan beberapa jenis control lebih dari satu kali, sebelum memilihnya pada Toolbox, tekan dan tahan tombol Ctrl. Kemudian klik pada jenis control yang Anda inginkan pada Toolbox. Hal tersebut akan secara permanen memilih jenis control tersebut. Setiap kali Anda membuat form, control tersebut akan ditambahkan secara otomatis. Jika Anda telah menambahkan control tersebut sesuai jumlah yang Anda inginkan, pada Toolbox, klik tombol Pointer untuk menghilangkan otomatisasi penambahan control tersebut.
5.3.2
Pemrograman user control
Anda dapat membuat user control secara deklaratif dengan menggunakan text atau HTML editor. Syntax deklaratif user control sama dengan syntax yang digunakan untuk membuat halaman Web Forms. Perbedaan yang utama adalah bahwa user control menggunakan @ Control directive di tempat @ Page directive, dan bahwa user control tidak termasuk dalam elemen <html>, <body> dan <form> di sekitar content. User control sama sederhananya dengan file text, atau dapat termasuk dalam server control pada ASP .NET. Jika Anda menginginkan untuk berbagi informasi antara user control dan halaman hosting, Anda dapat membuat properti untuk user control yang Anda buat. LSP Telematika Indonesia
215
Prosedur dibawah ini menggambarkan form logon yang dapat Anda masukkan pada halaman yang berbeda di aplikasi Anda.
Untuk membuat user control

1. Buat file baru dan beri nama dengan extension .ascx. Sebagai contoh, beri nama user control Anda dengan Logonform.ascx 2. Buat sebuah @ Control directive pada bagian atas halaman dan spesifikasikan bahasa pemrograman yang akan Anda pergunakan untuk control tersebut (jika ada). Contoh dibawah ini menunjukkan @ Control directive pada halaman yang menggunakan Visual Basic .NET sebagai bahasa pemrograman.
<%@ Control Language="VB" %>
Catatan: Jika Anda telah membuat aplikasi web dengan Visual Basic .NET, maka semua halaman dan user control pada aplikasi harus menggunakan bahasa pemrograman yang sama. 3. Buat elemen atau control elemen antarmuka yang Anda ingin agar user control dapat menampilkannya. 4. Buat properti pada control tersebut jika Anda menginginkan user control dan halaman hosting dapat berbagi informasi. Contoh dibawah ini menunjukkan user control yang lengkap untuk menampilkan text box dimana pengguna dapat mengetikkan nama dan label dimana nama tersebut ditampilkan. User control juga membebaskan properti Name dari proteksi aplikasi sehingga variabel nama bisa di-set pada halaman hosting.
[Visual Basic]
<%@ Control Language="VB" %> <script runat="server"> Public Property Name As String Get Return labelOutput.Text End Get Set textName.Text = Server.HtmlEncode(value) labelOutput.Text = Server.HtmlEncode(value) End Set End Property
216
Public Sub buttonDisplayName_Click(sender As Object, e As EventArgs) labelOutput.Text = textName.Text End Sub </script> <table> <tbody> <tr> <td> <b>Enter your name:</b></td> </tr> <tr> <td> <asp:TextBox id="textName" runat="server"> </asp:TextBox> </td> </tr> <tr> <td> <asp:button id="buttonDisplayName" onclick="buttonDisplayName_Click" runat="server" text="Submit"> </asp:button> </td> </tr> <tr> <td><b>Hello, <asp:Label id="labelOutput" runat="server"> </asp:Label>.</b> </td> </tr> </tbody> </table>
[C#]
<%@ Control Language="C#" %> <script runat="server"> public String Name { get { return labelOutput.Text; } set { textName.Text = Server.HtmlEncode(value); labelOutput.Text = Server.HtmlEncode(value); } } void buttonDisplayName_Click(object sender, EventArgs e) { labelOutput.Text = textName.Text; } </script> <table> <tbody> <tr> <td> LSP Telematika Indonesia
217
<b>Enter your name:</b></td> </tr> <tr> <td> <asp:TextBox id="textName" runat="server"> </asp:TextBox> </td> </tr> <tr> <td> <asp:button id="buttonDisplayName" onclick="buttonDisplayName_Click" runat="server" text="Submit"> </asp:button> </td> </tr> <tr> <td><b>Hello, <asp:Label id="labelOutput" runat="server"> </asp:Label>.</b> </td> </tr> </tbody> </table>
5.3.3
Handling events
Fungsionalitas event disediakan oleh elemen-elemen dibawah ini: Sebuah class yang menangani data event (misalnya, EvenArgs, ImageClickEventArgs). Event delegate (misalnya, EventHandler, ImageClickEventHandler).
Catatan: Dua class diatas secara umum didefinisikan diluar control yang Anda buat. Dua hal dibawah ini didefinisikan pada control yang Anda buat. Event member yang didefinisikan pada control Anda. Hal tersebut diidentifikasikan dengan kata kunci event. Method pada control Anda yang memanggil delegate (misalnya, OnClick, OnTextChanged). Contoh dibawah ini menggambarkan event Click pada jenis control MyButton.
[C#]
// If the event does not generate data, you do not have // to define a class for the event data or define an event delegate. // Use System.EventArgs for event data LSP Telematika Indonesia
218
// and System.EventHandler as the event delegate. // MyButton uses EventHandler and EventArgs. using System; using System.Web.UI; namespace CustomControls { public class MyButton: Control, IPostBackEventHandler { // Defines the Click event. public event EventHandler Click; // OnClick dispatches the event to delegates that // are registered with the Click event. // Controls that derive from MyButton can handle the // Click event by overriding OnClick // instead of attaching a delegate. The event data // is passed as an argument to this method. protected virtual void OnClick(EventArgs e) { if (Click != null) { Click(this, e); } } // Method of IPostBackEventHandler that raises change events. public void RaisePostBackEvent(string eventArgument) { OnClick(EventArgs.Empty); } protected override void Render(HtmlTextWriter output) { output.Write("<INPUT TYPE = submit name = " + this.UniqueID + " Value = 'Click Me' />"); } } }
[Visual Basic]
' If the event does not generate data, you do not have ' to define a class for the event data or define an event delegate. ' Use System.EventArgs for event data ' and System.EventHandler as the event delegate. ' MyButton uses EventHandler and EventArgs. Option Explicit Option Strict Imports System Imports System.Web.UI Namespace CustomControls Public Class MyButton Inherits Control Implements IPostBackEventHandler ' Defines the Click event. Public Event Click As EventHandler LSP Telematika Indonesia
219
' OnClick dispatches the event to delegates that ' are registered with the Click event. ' Controls that derive from MyButton can handle the ' Click event by overriding OnClick ' instead of attaching a delegate. The event data ' is passed as an argument to this method. Protected Overridable Sub OnClick(e As EventArgs) RaiseEvent Click(Me, e) End Sub ' Method of IPostBackEventHandler that raises change events. Public Sub RaisePostBackEvent(eventArgument As String) Implements IPostBackEventHandler.RaisePostBackEvent OnClick(EventArgs.Empty) End Sub 'RaisePostBackEvent Protected Overrides Sub Render(output As HtmlTextWriter) output.Write(("<INPUT TYPE = submit name = " & Me.UniqueID & " Value = 'Click Me' />")) End Sub End Class End Namespace
ASP 5.3.4 Sintaks ASP

File ASP biasanya mengandung tag-tag HTML, seperti halnya file HTML. Tetapi, file ASP juga bisa mengadung server script yang berada diantara <% dan %>. Server script dieksekusi di server dan dapat mengandung ekspresi, statement, prosedur atau operator. Perhatikan kode di bawah ini : <html> <body> <% response.write("Hello World!") %> </body> <html> perintah response.write digunakan untuk menampilkan keluaran di browser. Kode di atas akan menampilkan teks Hello World ke browser. menghasilkan hal yang sama yaitu : <html> <body> <%="Hello World!"%> </body> <html> Cara lain yang juga
220
5.3.5
Procedure
Dalam kode ASP dapat mengandung prosedur dan fungsi: <html> <head> <% sub vbproc(num1,num2) response.write(num1*num2) end sub %> </head> <body> <p>Result: <%call vbproc(3,4)%></p> </body> </html> Memasukkan baris <%@bahasa=bahasa%> diatas tag <htm> untuk menulis fungsi atau prosedur dalam bahasa lain: <%@ language="javascript" %> <html> <head> <% function jsproc(num1,num2) { Response.Write(num1*num2) } %> </head> <body> <p>Result: <%jsproc(3,4)%></p> </body> </html>
5.3.6
VBScript
Beberapa bahasa pemrograman dapat digunakan dalam ASP. Tetapi, bahasa default untuk scripting di ASP adalah VBScriipt, tetapi seandainya kita hendak menggunakan Javascript maka kita harus memasukkan spesifikasi bahasa tersebut di awal file: <%@ language="javascript"%> <html> <body> <% Response.Write("Hello World!") %> </body> </html> Berbeda dengan VBScript, JavaScript bersifat case sensitif.
221
5.3.7
meliputi :
Komponen ASP
Pada subab ini kita akan membahas komponen ASP. Komponen ASP yang dibahas 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
222
querystring dengan variabel yang dinamai URL yang mengandung URL untuk redirect. Berikut ini adalah daftar properti dan method dari komponen ini :
Tabel 5.3.7.1 : Properti Komponen AdRotator
Properti Border
Contoh <% set adrot=Server.CreateObject("MSWC.AdRotator") adrot.Border="2" Response.Write(adrot.GetAdvertisement("ads.txt")) %> Clickable <% set adrot=Server.CreateObject("MSWC.AdRotator") adrot.Clickable=false Response.Write(adrot.GetAdvertisement("ads.txt")) %> TargetFrame Nama frame <% yang set adrot=Server.CreateObject("MSWC.AdRotator") menampilkan adrot.TargetFrame="target='_blank'" iklan. Response.Write(adrot.GetAdvertisement("ads.txt")) %>
Deskripsi Menentukan ukuran border disekitar iklan. Menentukan apakah ilkan berupa hyperlink.
Tabel 5.3.7.2 : Methods Komponen AdRotator
Method Deskripsi GetAdvertiseme Mengembalika nt n HTML yang menampilkan iklan. Returns HTML that Komponen ASP BrowserCap Komponen ini membuat
Contoh <% set adrot=Server.CreateObject("MSWC.AdRotator ") Response.Write(adrot.GetAdvertisement("ads .txt")) %>
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 :
223
<% Set MyBrow=Server.CreateObject("MSWC.BrowserType") %> Berikut ini adalah contoh file ASP yang membuat objek BrowserType dan menampilkan table yang menunjukkan kemampuan dari browser :
<html> <body> <% Set MyBrow=Server.CreateObject("MSWC.BrowserType") %> <table border="1" width="100%"> <tr> <th>Client OS</th> <th><%=MyBrow.platform%></th> </tr><tr> <td >Web Browser</td> <td ><%=MyBrow.browser%></td> </tr><tr> <td>Browser version</td> <td><%=MyBrow.version%></td> </tr><tr> <td>Frame support?</td> <td><%=MyBrow.frames%></td> </tr><tr> <td>Table support?</td> <td><%=MyBrow.tables%></td> </tr><tr> <td>Sound support?</td> <td><%=MyBrow.backgroundsounds%></td> </tr><tr> <td>Cookies support?</td> <td><%=MyBrow.cookies%></td> </tr><tr> <td>VBScript support?</td> <td><%=MyBrow.vbscript%></td> </tr><tr> <td>JavaScript support?</td> <td><%=MyBrow.javascript%></td> </tr> </table> </body> </html> Kode di atas akan menghasilkan keluaran seperti di bawah ini : Client OS Web Browser Browser version Frame support? WinNT IE 5.0 True
224
Table support? Sound support? Cookies support? VBScript support? JavaScript support?
True True True True True
Komponen ASP ContentLinking Komponen ASP content linking digunakan untuk membuat system navigasi yang cepat dan mudah. Komponen ini mengembalikan objek Nextlink yang digunakan untuk mendaftarkan web page untuk dinavigasi. Sintaks komponen ini adalah : <% Set nl=Server.CreateObject( "MSWC.NextLink" ) %> Pertama kita membuat file teks links.txt. File ini mengandung halamanhalaman yang akan dinavigasi. Halaman-halaman tersebut harus didaftarkan sesuai dengan urutan tampilan, selain itu file ini juga harus mengandung deskripsi dari setiap nama file. Jika kita ingin menambah halaman atau mengubah urutan halaman maka kita hanya perlu mengubah file teks ini. links.txy : MadeLine_home.asp MadeLine Intro MadeLine_offfer.asp MadeLines list of Items Madeline_clothes.asp MadeLines list of Clothes MadeLine_bags.asp MadeLines list of Bags
Pada setiap halaman yang didaftarkan, letakkan kode : . Kode ini akan memasukkan kode di bawah ini di setiap halaman yang terdaftar di file links.txt dan navigasi akan berjalan. "nlcode.inc":
<% 'Use the Content Linking Component 'to navigate between the pages listed 'in links.txt dim nl Set nl=Server.CreateObject("MSWC.NextLink") if (nl.GetListIndex("links.txt")>1) then Response.Write("<a href='" & nl.GetPreviousURL("links.txt")) Response.Write("'>Previous Page</a>") end if LSP Telematika Indonesia
225
Response.Write("<a href='" & nl.GetNextURL("links.txt")) Response.Write("'>Next Page</a>") %> Berikut ini adalah daftar method untuk komponen ASP BrowserCap :
Tabel 5.3.7.3 : Daftar Method Komponen BrowserCap
Method GetListCount
Deskripsi Mengembalikan jumlah item yang terdaftar di file Content Linking List
Contoh <% dim nl,c Set nl=Server.CreateObject("MSWC.NextLink ") c=nl.GetListCount("links.txt") Response.Write("There are ") Response.Write(c) Response.Write(" items in the list") %> Output: There are 4 items in the list <% dim nl,c Set nl=Server.CreateObject("MSWC.NextLink ") c=nl.GetListIndex("links.txt") Response.Write("Item number ") Response.Write(c) %> Output:
GetListIndex
Mengembalikan jumlah index dari item yang ada di file Content Linking List
Item number 3 GetNextDescriptio Mengembalikan <% n deskripsi dari item dim nl,c selanjutnya yang Set ada di file Content nl=Server.CreateObject("MSWC.NextLink Linking List. ") c=nl.GetNextDescription("links.txt") Response.Write("Next ") Response.Write("description is: ") Response.Write(c) %> Next description is: MadeLines list of Clothes Mengembalikan <% URL dari item dim nl,c selanjutnya yang Set ada di file Content nl=Server.CreateObject("MSWC.NextLink Linking List ") c=nl.GetNextURL("links.txt")
GetNextURL
226
Response.Write("Next ") Response.Write("URL is: ") Response.Write(c) %> Next URL is: MadeLine_clothes.asp <% dim nl,c Set nl=Server.CreateObject("MSWC.NextLink ") c=nl.GetNthDescription("links.txt",3) Response.Write("Third ") Response.Write("description is: ") Response.Write(c) %>
GetNthDescription Mengembalikan deskripsi dari halaman ke-N yang terdaftar di file Content Linking List.
GetNthURL
Third description is: MadeLines list of Clothes Mengembalikan <% URL dari halaman dim nl,c ke-N yang Set terdaftar di file nl=Server.CreateObject("MSWC.NextLink Content Linking ") List c=nl.GetNthURL("links.txt",3) Response.Write("Third ") Response.Write("URL is: ") Response.Write(c) %> Third URL is: MadeLine_clothes.asp <% dim nl,c Set nl=Server.CreateObject("MSWC.NextLink ") c=nl.GetPreviousDescription("links.txt") Response.Write("Previous ") Response.Write("description is: ") Response.Write(c) %>
GetPreviousDescri Mengembalikan ption deskripsi teks dari item sebelumnya yang terdaftar di file Content Linking List.
GetPreviousURL
Previous description is: MadeLines list of Clothes Mengembalikan <% URL dari item dim nl,c sebelumnya yang Set terdaftar di file nl=Server.CreateObject("MSWC.NextLink Content Linking ") List. c=nl.GetPreviousURL("links.txt") Response.Write("Previous ") Response.Write("URL is: ") Response.Write(c) %>
227
Previous URL is: MadeLine_clothes.asp
Komponen Content Rotator

Komponen ASP Content Rotator membuat objek ContentRotator yang menampilkan HTML content string yang berbeda setiap kali user memasuki atau merefresh halaman. Sebuah file teks, disebut file Content Schedule, memiliki informasi mengenai content string. Content String dapat mengandung tag HTML, sehingga kita bisa menampilkan isi yang dapat direpresentasikan HTML, seperti teks, gambar, warna atau hyperlinks. Sintaks komponen ini adalah : <% Set cr=Server.CreateObject( "MSWC.ContentRotator" ) %> Berikut ini adalah contoh file yang menampilkan isi yang berbeda setiap kali user melihat web page. Buat file teks yang dinamai textads.txt di folder default Web Site, dalam sebuah subfolder text. textads.txt : %% #1 This is a great day!! %% #2 <h1>Smile</h1> %% #3 <img src="smiley.gif"> %% #4 Here's a <a href="http://www.MadeLine.com">link.</a> Perhatikan symbol #angka diawal content string. Angka ini adalah parameter pilihan yang menandakan berat relatif dari HTML content string. Pada contoh di atas, Content Rotator akan menampilkan content string pertama, 1-10 sewaktu, string kedua 2-10 sewaktu, string ketiga 3-10 sewaktu dan string keempat 4-10 sewaktu. bawah ini : <html> <body> <% set cr=server.createobject("MSWC.ContentRotator") response.write(cr.ChooseContent("text/textads.txt")) %> Kemudian buat file ASP, dan masukkan kode di
228
</body> </html> Method-method ada di komponen ini adalah :

Tabel 5.3.7.4 : Method Komponen Content Rotator
Method
Deskripsi
Contoh
ChooseContent Mendapatkan <% dan dim cr menampilkan Set content cr=Server.CreateObject("MSWC.ContentRotator") string response.write(cr.ChooseContent("text/textads.txt")) %> Output:
GetAllContent Mengakses <% dan dim cr menampilkan Set semua cr=Server.CreateObject("MSWC.ContentRotator") content response.write(cr.GetAllContent("text/textads.txt")) string di file %> teks Output:
This is a great day!!
Smile
Here's a link.
5.4 Cookies and Session

5.4.1 Membuat Cookies
229
Saat browser memanggil alamat web, server web dapat menuliskan informasi tertentu di komputer tempat browser tersebut berada. Informasi ini disebut dengan cookies. Namun browser dapat mematikan fasilitas cookies ini, agar server web tidak bisa menuliskannya ke komputer mereka. Contoh penggunaan cookies adalah untuk menyimpan informasi seperti kapan terakhir kali user yang bersangkutan masuk (login), atau informasi mengenai tata letak dari halaman web yang dia suka.
Cookies menyediakan fungsi untuk menyimpan informasi spesifik mengenai pengguna dalam sebuah aplikasi web. Menurut definisinya, cookie adalah bit text kecil yang mengiringi sebuah request dari suatu halaman web dalam prosesnya antara web server dan browser. Cookie menyimpan informasi yang dapat dibaca oleh aplikasi web saat seorang pengguna mengunjungi web site tersebut.
Bayangkan saat seorang pengguna melakukan reques ke web site Anda, www.contoso.com, aplikasi Anda tidak hanya mengirimkan halaman yang direquest melainkan juga cookie yang berisi data tanggal dan waktu kunjungan. Ketika browser pengguna tersebut mendapatkan halaman yang di-request, browser juga mendapatkan cookie, yang disimpan dalam sebuah folder pada hard disk pengguna tersebut.
Pada waktu selanjutnya, pengguna tersebut melakukan request ke site Anda lagi. Ketika pengguna masuk ke site www.contoso.com, browser mencari cookie yang tersimpan dalam hard disk dan berkaitan dengan URL tersebut. Jika cookie tersebut ada, browser kemudian akan mengirimkan cookie tersebut ke web Anda bersamaan dengan request halaman dari pengguna. Aplikasi Anda kemudian akan mendapatkan data tanggal dan waktu kunjungan terakhir pengguna tersebut ke web site Anda. Anda dapat memanfaatkan informasi tersebut untuk menampilkan suatu pesan kepada pengguna tersebut, memeriksa tanggal expire, atau melakukan fungsi yang lainnya.
230
Cookie berkaitan dengan web site, tidak dengan halaman web yang spesifik, sehingga browser dan server akan mengganti informasi cookie www.contoso.com dengan tidak memperhatikan halaman apa yang di-request oleh pengguna. Jika pengguna tersebut mengunjungi site lain, maka setiap site akan mengirimkan cookie ke browser pengguna, dan browser akan menyimpan cookie untuk setiap site pada tempat yang berbeda.
5.4.2
Membuat Session
Session didefinisikan sebagai suatu periode waktu yang digunakan oleh pengguna berinteraksi dengan sebuah aplikasi web. Pengembang ASP yang berusaha untuk menyimpan data session untuk seorang pengguna dapat menggunakan fitur intrinsic yang dikenal dengan session state. Secara program, session state tidak lebih dari memori seukuran dengan dictionary atau hash table, yang dapat diisi dengan durasi dari session seorang pengguna. ASP mengatur session state dengan menyediakan client sebuah kunci unique yang diberikan kepada pengguna ketika session dimulai. Kunci tersebut kemudian disimpan pada cookie HTTP yang dikirimkan oleh client kepada server pada setiap request. Server kemudian akan membaca kunci tersebut dari cookie dan melakukan re-inflate session state dari server. Objek session bekerja pada level session web. Yang dimaksud level session adalah saat client meminta layanan dari aplikasi web, web server akan membuat satu session untuk user tersebut. Lingkungan session dapat dipakai untuk berbagi informasi antara halaman web satu dengan lainnya sebatas masih dalam satu user.
Collection, properti, method, dan event dari objek session dapat dilihat pada tabel di bawah ini: Deskripsi Berisi daftar item yang ditambahkan ke session melalui skrip ASP.
Collection contents
231
Staticobjects
Berisi daftar objek yang ditambahkan ke session melalui tag <OBJECT>
Method Abandon oleh session tersebut.
Deskripsi Membebaskan objek session dan seluruh resource yang dipakai
Properti codepage LCID sessionID timeout
Deskripsi Codepage yang dipakai untuk pemetaan simbol. Mengatur pengenal lokal. Mengembalikan bersangkutan. Mengatur periode timeout untuk session yang bersangkutan dalam satuan menit. pengenal session untuk user yang
Event onstart onend
Deskripsi Kejadian saat aplikasi aktif untuk pertama kali, yaitu saat user pertama masuk ke dalam aplikasi. 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.
232
Anda juga dapat menspesifikasikan tanggal dan waktu cookie tersebut tidak dapat digunakan lagi. Cookie biasanya disimpan dalam disk pengguna, dimana terdapat kemungkinan hang atau tidak bisa dipergunakan lagi. Anda dapat menambahkan cookies dengan collection Response.Cookies dalam beberapa cara. Contoh dibawah ini menunjukkan dua method untuk menjalankan fungsi tersebut:
Response.Cookies("userName").Value = "mike" Response.Cookies("userName").Expires = DateTime.Now.AddDays(1) Dim aCookie As New HttpCookie("lastVisit") aCookie.Value = DateTime.Now.ToString aCookie.Expires = DateTime.Now.AddDays(1) Response.Cookies.Add(aCookie)
b. Membaca Cookies pada ASP .NET Ketika browser membuat request ke server, browser juga mengirimkan cookies untuk server tersebut bersamaan dengan request. Pada aplikasi ASP .NET Anda, Anda dapat membaca cookies dengan menggunakan objek Request. Struktur dari objek Request sama dengan objek Request itu sendiri, sehingga Anda dapat membaca cookies dengan cara yang sama dengan cara Anda menuliskan cookies ke objek tersebut. Contoh dibawah ini menunjukkan dua cara untuk mendapatkan nilai dari cookie yang bernama username dan menampilkannya di control Label:
Sebelum Anda mencoba untuk mendapatkan nilai dari cookie, Anda harus memastikan bahwa cookie tersebut exist. Jika tidak, Anda akan mendapatkan exception System.NullReferenceException.
If Not Request.Cookies("userName") Is Nothing Then Label1.Text = Server.HtmlEncode(Request.Cookies("userName").Value) End If If Not Request.Cookies("userName") Is Nothing Then Dim aCookie As HttpCookie = Request.Cookies("userName") Label1.Text = Server.HtmlEncode(aCookie.Value) End If
233
Membaca subkey:
nilai
suatu
subkey
dalam
cookie
sama
seperti
cara
untuk
membuatnya. Dibawah ini adalah contoh untuk mendapatkan nilai dari
If Not Request.Cookies("userInfo") Is Nothing Then Label1.Text = _ Server.HtmlEncode(Request.Cookies("userInfo")("userName")) Label2.text = _ Server.HtmlEncode(Request.Cookies("userInfo")("lastVisit")) End If
Jika Anda ingin menggunakan nilai lastVisit sebagai data tanggal, Anda harus melakukan convert. Dim dt As DateTime dt = CDate(Request.Cookies("userInfo")("lastVisit"))
Tipe subkey dari cookie adalah collection dari tipe NameValueCollection. Cara lainnya untuk mendapatkan subkey individual adalah dengan mendapatkan collection subkey dan kemudian melakukan extract dari nilainya berdasarkan nama, seperti contoh dibawah ini: If Not Request.Cookies("userInfo") Is Nothing Then Dim UserInfoCookieCollection As _ System.Collections.Specialized.NameValueCollection UserInfoCookieCollection = Request.Cookies("userInfo").Values Label1.Text = Server.HtmlEncode(UserInfoCookieCollection("userName")) Label2.Text = Server.HtmlEncode(UserInfoCookieCollection("lastVisit")) End If
c. Menulis Cookies pada ASP Perintah Response.Cookies digunakan untuk membuat cookies. Perhatikan bahwa perintah ini harus muncul sebelum tag <html>. Pada contoh di bawah ini, kita akan membuat cookie yang dinamakan nama_awal dan memberi nilai Alex. <% Response.Cookies("nama_awal")="Alex"
%>
234
Selain itu kita juga bisa memberi properti pada cookie, seperti menentukan waktu cookie berakhir : <% Response.Cookies("nama_awal")="Alex" Response.Cookies("nama_awal").Expires=#May 10,2002#
%>
c. Membaca nilai Cookies pada ASP Perintah Request.Cookies digunakan untuk mengakses nilai cookie. Pada contoh di bawah ini, kita akan mengakses nilai cookie yang dinamai nama_awal dan menampilkannya di layer : <% fname=Request.Cookies("firstname") response.write("Firstname=" & fname) %>
Output: Firstname=Alex Cookie dengan Kunci Jika cookie mengandung beberapa nilai maka cookie tersebut dikatakan memiliki kunci. Berikut ini adalah contoh pembuatan koleksi cookie yang dinamai user: dan cookie ini mengandung informasi mengenai user : <% Response.Cookies("user")("nama_awal")="John" Response.Cookies("user")("nama_akhir")="Smith" Response.Cookies("user")("negara")="Norway" Response.Cookies("user")("umur")="25" %>
Membaca semua Cookies Perhatikan kode berikut ini : <% Response.Cookies("firstname")="Alex" Response.Cookies("user")("firstname")="John" Response.Cookies("user")("lastname")="Smith" Response.Cookies("user")("country")="Norway" Response.Cookies("user")("age")="25 %> Misalkan server telah mengirim semua cookie diatas ke user. Sekarang kita hendak membaca semua cookie tersebut. Berikut ini adalah contoh kode-nya
235
(kode di bawah memeriksa jika cookie memiliki kunci dengan property HasKeys) : <html> <body> <% dim x,y for each x in Request.Cookies response.write("<p>") if Request.Cookies(x).HasKeys then for each y in Request.Cookies(x) response.write(x & ":" & y & "=" & Request.Cookies(x)(y)) response.write("<br />") next else Response.Write(x & "=" & Request.Cookies(x) & "<br />") end if response.write "</p>" next %> </body> </html> Output: nama_awal=Alex user:nama_awal=John user:nama_akhir=Smith user:negara=Norway user:umur=25
5.4.4 Menggunakan ASP .NET Session State

Setting session state pada ASP .NET dikonfigurasi melalui file konfigurasi XML ASP .NET config.web. In Beta 1, mesin file config.web berada pada directory WinNT\Microsoft.NET\Framework\v1.0.2204, sementara file konfigurasi lainnya berada pada directory aplikasi. Dibawah ini adalah contoh untuk mengkonfigurasi session state untuk aplikasi ASP .NET:
<configuration> <sessionstate mode="inproc" cookieless="false" timeout="20" LSP Telematika Indonesia
236
sqlconnectionstring="data source=127.0.0.1;user id=<user id>;password=<password>" server="127.0.0.1" port="42424" /> </configuration> Contoh setting diatas digunakan untuk melakukan konfigurasi pada session state ASP .NET. Berikut ini adalah penjelasan secara lebih detil dari masingmasing bagian: Mode. Setting mode mendukung tiga pilihan: inproc, sqlserver, dan stateserver. ASP .NET mendukung dua mode: in process dan out of process. Untuk state management out of process terdapat dua pilihan: memory based (stateserver) dan SQL Server based (sqlserver). Cookieless. Pilihan cookieless untuk ASP .NET dikonfigurasi dengan setting boolean. Timeout. Pilihan ini mengontrol panjangnya waktu session masih valid. Sqlconnectionstring. Sqlconnectionstring mengidentifikasikan string koneksi database yang dapat digunakan untuk mode sqlserver. Server. Pada mode stateserver out of process, diberikan nama pada server yang sedang menjalankan service Windows NT yang diinginkan yaitu ASPState. Port. Setting untuk port yang bersamaan dengan setting untuk server, mengidentifikasikan port number yang berhubungan dengan setting untuk server pada mode stateserver. Dibawah ini adalah contoh aplikasi session state. <Script runat=server> Sub Session_Add(sender As Object, e As EventArgs) Session("MySession") = text1.Value span1.InnerHtml = "Session data updated! <P> Your session contains: <font color=red>" + Session("MySession").ToString() + "</font>" End Sub Sub CheckSession(sender As Object, e As EventArgs) If (Session("MySession") = Isnull) Then span1.InnerHtml = "NOTHING, SESSION DATA LOST!" Else span1.InnerHtml = "Your session contains: <font color=red>" + Session("MySession").ToString() + "</font>" End If End Sub </Script>
237
<form runat=server> <input id=text1 type=text runat=server> <input type=submit runat=server OnServerClick="Session_Add" Value="Add to Session State"> <input type=submit runat=server OnServerClick="CheckSession" Value="View Session State"> </form> <hr size=1> <font size=6><span id=span1 runat=server/></font>
5.5 Trace and Debugging

5.5.1 Trace
ASP .NET memperkenalkan sebuah fungsi baru yang memudahkan Anda untuk melihat informasi yang menyeluruh tentang request tunggal untuk halaman ASP .NET dengan cara yang sederhana. Fungsi ini disebut tracing, yang juga memudahkan Anda untuk menulis pernyataan debug secara langsung pada kode Anda tanpa harus menghilangkannya dari aplikasi ketika Anda harus melakukan deployment pada production server. Anda dapat menulis variabel atau struktur pada sebuah halaman, menjalankannya jika memenuhi sebuah kondisi tertentu, atau hanya melakukan trace sederhana selama eksekusi halaman atau aplikasi sedang berlangsung. Agar aplikasi Anda dapat mengumpulkan dan menampilkan pesan tracing tersebut atau informasi tracing lainnya, Anda harus mengaktifkan fungsi tracing pada halaman atau aplikasi Anda. Jika Anda mengaktifkan, dua hal akan terjadi: ASP .NET menambahkan sekumpulan tabel informasi tracing secara langsung dan seketika mengikuti keluaran atau hasil dari halaman web. Informasi tersebut akan langsung dikirimkan kepada aplikasi pengguna. ASP .NET menampilkan pesan tracing pada tabel informasi tracing untuk setiap terjadinya penambahan data. Informasi dan pesan tracing yang telah Anda spesifikasi akan ditambahkan ke keluaran atau hasil dari halaman yang dikirimkan kepada browser pengguna yang melakukan request. Atau, Anda dapat melihat informasi tersebut dari tampilan trace yang berbeda yang menampilkan informasi tracing untuk setiap halaman pada aplikasi tersebut. Informasi ini akan membantu Anda LSP Telematika Indonesia
238
untuk mengklarifikasi error atau hasil yang tidak diinginkan pada setiap halaman request proses ASP .NET. Pernyataan trace diproses dan ditampilkan hanya jika fungsi trace diaktifkan. Anda dapat mengontrol apakah tracing akan ditampilkan pada halaman, kepada pengguna atau keduanya.
5.5.2
Debugging
Untuk melakukan debug pada sebuah aplikasi dalam framework .NET, compiler dan lingkungan aplikasi harus dikonfigurasi untuk mengaktifkan debugger pada aplikasi dan untuk menghasilkan simbol dan line maps, jika mungkin, untuk aplikasi dan Microsoft Intermediate Language yang berhubungan dengan aplikasi tersebut. Jika suatu aplikasi telah di-debug, maka aplikasi tersebut dapat meningkatkan performanya melalui sebuah profil. Profil tersebut akan mengevaluasi dan mendeskripsikan baris-baris source code yang hasilnya adalah kode program yang paling banyak dijalankan, dan berapa waktu yang diperlukan untuk menjalankan kode tersebut. Aplikasi pada framework .NET sangat mudah di-debug dengan menggunakan Visual Studio .NET, yang dapat menangani banyak detil-detil konfigurasi. Jika Anda belum menginstall Visual Studio .NET, Anda dapat memeriksan dan meningkatkan performa aplikasi Anda dengan berbagai alternatif seperti dibawah ini: Class Systems.Diagnostic Runtime Debugger (Cordbg.exe) yang merupakan debugger commandline. Microsoft Common Language Runtime Debugger (DbgCLR.exe) yang merupakan debugger dari Windows. Namespace dari framework .NET System.Diagnostic termasuk didalamnya adalah class Trace dan Debug untuk tracing aliran eksekusi aplikasi, dan class Process, EventLog, dan PerformanceCounter untuk membuat profil kode program. Debigger command-line Cordbg.exe dapat digunakan untuk melakukan debug kode dari interpreter command-line. DbgCLR.exe adalah debugger yang sering digunakan dengan antarmuka Windows untuk
239
melakukan debug pada kode program. Debugger tersebut berlokasi pada folder Microsoft.NET/FrameworkSDK/GUIDebug.
5.5.3
Implementasi Trace pada Aplikasi Web
Anda dapat mengontrol apakah tracing diaktifkan atau tidak untuk halaman aplikasi Anda pada atribut Trace dari directive @ Page. Jika Anda mengaktifkan tracing dan halaman tersebut di-request, maka ASP .NET akan menambahkan sekumpulan tabel berisi informasi performa tentang halaman yang di-request tersebut, dengan tidak memperdulikan apakah Anda telah menulis pesan pada trace log atau tidak. Default fungsi tracing adalah tidak diaktifkan. Jika Anda tidak menambahkan atribut Trace pada halaman web Anda, informasi tracing tidak dikumpulkan, dan pesan tracing yang Anda tulis tidak akan muncul pada halaman tersebut.
Untuk mengaktifkan tracing pada halaman

1. Tambahkan directive @ Page pada awal file .aspx Anda. Tambahkan juga atribut Trace dan set nilainya menjadi true. <%@ Page Trace="true" %>
2. Tambahkan atribtu TraceMode untuk menspesifikasikan urutan tampilan pesan tracing yang Anda inginkan. Set atribut tersebut dengan SortByTime untuk mengurutkan pesan dengan urutan waktu pesan tersebut diproses terlebih dahulu. Set atribut dengan SortByCategory untuk mengurutkannya berdasarkan kategori yang telah Anda spesifikasikan pada method Trace.Warn dan Trace.Write pada halaman atau kode server control Anda. Contoh dibawah ini akan mengurutkan pesan tracing pada halaman dan server control berdasarkan kategori jika Anda menambahkannya pada awal kode program Anda.
240
<%@ Page Language="VB" Trace="True" TraceMode="SortByCategory" %>
Screen
shot
dibawah
ini
menggambarkan
informasi
trace
yang
ditambahkan pada bagian akhir hasil keluaran dari halaman web Anda.
Gambar 5.5.3.1 Contoh File Yang Menggunakan Trace
5.6 Keamanan Aplikasi Web

5.6.1 Keamanan Pada ASP .NET
Pengamanan web sites sangatlah penting dan termasuk isu yang paling sering dibahas oleh pengembang Web. Mengamankan site membutuhkan perencanaan yang matang, administrator dan programmer harus memiliki pengetahuan yang cukup untuk memilih teknik pengamanan web site mereka. ASP .NET yang termasuk dalam Microsoft .NET framework dan Microsoft Internet Information Services (IIS) menyediakan terhadap web fungsi-fungsi site Anda. untuk Untuk mengaplikasikan teknik pengamanan
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 Authentication Membantu untuk verifikasi bahwa pengguna yang menggunakan aplikasi tersebut adalah pengguna yang Deskripsi
241
seharusnya. Aplikasi membutuhkan variabel identifikasi, seperti nama dan password dari pengguna dan memvalidasi variabel tersebut untuk mendapatkan otoritas penggunaan. Jika variabel tersebut valid, maka pengguna tersebut dapat menggunakan aplikasi ASP .NET. Authorization Membatasi hak akses dengan cara mengijinkan atau mencegah ijin tertentu untuk identitas yang telah mendapatkan authentication. Internet Information Services dapat pula mengijinkan atau mencegah akses berbasiskan host name atau IP address pengguna. Otorisasi akses selanjutnya akan dilakukan oleh otorisasi URL dari NTFS file access permission. Anda akan sangat terbantu jika Anda mengerti bagaimana subsistem security berfungsi. Sejak ASP .NET dibangun diatas framework Microsoft .NET, pengembang aplikasi .NET juga memiliki akses terhadap fitur-fitur security yang built-in dalam framework .NET, seperti code access security dan rolebased user-access security.
5.6.2
Setting security di ASP .NET
5.6.2.1 IIS Authentication Pada contoh skenario setting security dibawah ini, Anda akan mengatur pengamanan untuk aplikasi web site intranet untuk posting informasi pegawai. Beberapa informasi hanya dapat dilihat oleh manager saja. Informasi dari manager dapat dipost ke subdirectory informasi pegawai sehingga jumlah aksesnya dapat dibatasi. Asumsi-asumsi lainnya adalah: Anda menggunakan Microsoft Windows NT atau Microsoft Windows 2000 server. Hard disk telah diformat untuk NTFS. Web server adalah Microsoft Internet Information Services (IIS) 6.0 Pegawai yang mengakses menggunakan platform Windows. Anda sebagai administrator: 1. Buat files dan directory yang diperlihatkan ilustrasi dibawah ini. Files and directories
242
Buat Windows group bernama Managers yang terdiri dari semua pengguna yang berhak mengakses file ManagerInfo.aspx
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 jchen@contoso.com, 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.
243
<configuration> <system.web>
Untuk set up file konfigurasi Web.config 1. Set authentication mode dengan Forms. Kemungkinan nilai lainnya adalah Windows, Passport, dan None (string kosong). Untuk contoh berikut ini, nilai tersebut adalah Forms. <authentication mode="Forms">
2. Set atribut forms authentication <forms
a. Set atribut loginUrl pada logon.aspx. Logon.aspx adalah URL untuk digunakan jika ASP .NET tidak menemukan authentication cookie loginUrl = "logon.aspx" request. dengan
b. Set nama suffix cookie name = ".ASPXFORMSAUTH"/> 3. Cegah pengguna yang tidak memiliki authentication untuk mengakses directory ini. </authentication> <authorization> <deny users="?"/> </authorization> </system.web> </configuration> Logon.aspx Logon.aspx adalah file yang digunakan sebagai redirect file jika ASP .NET tidak menemukan tiket authentication dengan request. Nama file ini telah dispesifikasikan pada file konfigurasi Web.config. Form terdiri dari dua text-box yaitu Nama E-Mail dan Password serta sebuah tombol Submit yang ditampilkan kepada pengguna. Pengguna kemudian memasukkan nama e-mail dan password yang dimiliki, dan klik tombol Submit. Nama email dan password tersebut kemudian dibandingkan dengan kode yang telah di-hard code pada statement if. Jika perbandingan sama, maka LSP Telematika Indonesia
244
pengguna tersebut akan terkoneksi ke file Default.aspx. Jika tidak sama, maka akan muncul pesan error yang ditampilkan kepada pengguna. Untuk mengimplementasikan Logon.aspx 1. Import namespace yang diperlukan <%@ Import Namespace="System.Web.Security" %> 2. Set script language <html> [Visual Basic] <script language=VB runat=server> [C#] <script language=C# runat=server>
3. Buat event handler Logon-Click untuk handle event Submit [Visual Basic] Sub Logon_Click(sender As Object, e As EventArgs) [C#] Sub Logon_Click(Object sender, EventArgs e) {
4. A u t
henticate pengguna dengan membandingkan input nama e-mail dan password dengan hard-code : jchen@contoso.com 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 = jchen@contoso.com) 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 { FormsAuthentication.RedirectFromLoginPage (UserEmail.Value, Persist.Checked); } LSP Telematika Indonesia ((UserEmail.Value == jchen@contoso.com) && (UserPass.Value == password)
245
else { Msg.Text = Please try again.; } } </script>
Invalid
E-Mail
Name
or
Password:
5. Tampilkan form untuk mendapatkan informasi logon <body> <form runat=server> <h3><font face=Verdana>Logon Page</font></h3> <table> <tr> a. Buat text box User E-Mail Name. Tambahkan field validator control dan validator control untuk regular expression yang menguji validitas masukan nama e-mail. <td>Email:</td> <td><input id=UserEmail type=text runat=server/></td> <td><ASP:RequiredFieldValidator ControlToValidate=UserEmail Display=Static ErrorMessage=Cannot be empty. runat=server/> </td> <td><asp:RegularExpressionValidator id=RegexValidator ControlToValidate=UserEmail ValidationExpression=^([a-zA-Z0-9 \-\.]+)@((\[[09]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a- a-zA-Z0-9\]+\.+))([a- a-zA-Z]{2,4}|[0-9}{1,3})(\]?)$ EnableClientScript=false Display=Static ErrorMessage=Invalid format for e-mail address runat=server/> </td> </tr> <tr> b. Buat text box Password <td>Password:</td> <td>input id=UserPass type=password runat=server/></td> <td>ASP:RequiredFieldValidator ControlTo Validate=UserPass Display=Static ErrosMessage=Cannot be empty. runat=server/> </td> </tr> <tr>
246
c. Buat check box Persistent Cookie. Jika box Persistent Cookie dipilih maka cookie akan menjadi valid melalui browser session. Jika tidak maka cookie tersebut akan dihilangkan ketika browser ditutup. <td>Persistent Cookie:</td> <td><ASP:CheckBox id=Persist runat=server autopostback=true/> </td> <td></td> </tr> </table>
d. Buat tombol Submit yang akan menjalankan event Logon_Click jika telah di post back <input type=submit OnServerClick=Logon_Click Value=Logon runat=server/> <p><asp:Label id=Msg ForeColor=red FontName=Verdana Font-Size="10" runat=server/></p> </form> </body> </html> Default.aspx File Default.aspx adalah file yang diinginkan oleh pengguna yang merupakan data yang diproteksi. Default.aspx hanyalah file yang sederhana yang menampilkan string Hello dan nama e-mail yang disimpan serta tombol Signout.
[Visual Basic]
<%@ Page LANGUAGE="VB" %> <html> <head> <title>Forms Authentication</title> <script runat=server> Sub Page_Load(Src As Object, e As EventArgs) Welcome.InnerHtml = "Hello, " + Context.User.Identity.Name End Sub Sub Signout_Click(sender As Object, e As EventArgs) FormsAuthentication.SignOut() Response.Redirect("logon.aspx") End Sub </script> <body> <h3><font face="Verdana">Using Forms Authentication</font></h3> <span id="Welcome" runat=server/> <form runat=server> LSP Telematika Indonesia
247
<input type="submit" OnServerClick="Signout_Click" Value="Signout" runat="server"/><p> </form> </body> </html>

[C#]
<%@ Page LANGUAGE="C#" %> <html> <head> <title>Forms Authentication</title> <script runat=server> private void Page_Load(Object Src, EventArgs e ) { Welcome.InnerHtml = "Hello, " + Context.User.Identity.Name; } private void Signout_Click(Object sender, EventArgs e) { FormsAuthentication.SignOut(); Response.Redirect("logon.aspx"); } </script> <body> <h3><font face="Verdana">Using Forms Authentication</font></h3> <span id="Welcome" runat=server/> <form runat=server> <input type="submit" OnServerClick="Signout_Click" Value="Signout" runat="server"/><p> </form> </body> </html>
5.7 Membuat Aplikasi Web Yang Dinamis

5.7.1 Menggunakan ASP dengan javascript
Pengembang web telah lama berkutat dalam keterbatasan dari browser dengan menggunakan kombinasi dari server-side processing dan client-side processing. Working logic dan proses dalam aplikasi pada client-side memudahkan browser yang berdasarkan aplikasi untuk kelihatan lebih responsif dan lebih memiliki snappiness. Untuk pengembangan client-side, kebanyakan pengembang memilih JavaScript pada program Active Server Pages mereka dengan server-side berupa Microsoft Visual Basic atau Jscript. Sekarang dengan Microsoft ASP .NET dan model terbaru yang disediakannya,
248
pengembang web terkadang mereka-reka bagaimana menggabungkan fungsi JavaScript dengan kode program ASP .NET mereka.
Menambahkan JavaScript ke Server Control

Menambahkan JavaScript ke serve control yang spesifik pada sebuah halaman ASP .NET dapat dikatakan cukup mudah. Lihatlah contoh dibawah ini untuk server control berupa button. Jika Anda melakukan drag and drop sebuah server control HTML Button (class HtmlInputButton) ke sebuah halaman web matrix Visual Studio .NET atau ASP .NET dan menjalankannya sebagai server control, maka kode programnya adalah sebagai berikut: Contoh diatas adalah button biasa yang bisa diubah kode programnya pada script ASP .NET. Misalnya, untuk meng-assign text pada button ketika halaman tersebut dijalankan, maka Anda mempergunakan properti value dari button setelah elemen tersebut berubah menjadi server control HTML ( Visual Basic .NET Private Sub Page_Load(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles MyBase.Load Button1.Value = DateTime.Now.ToString() End Sub Visual C# .NET void Page_Load(object sender, EventArgs e) { Button1.Value = DateTime.Now.ToString(); }
Dibawah ini adalah gambar button yang dapat menampilkan tanggal dan waktu sebagai text pada button tersebut.
Berikut ini adalah contoh kode program untuk menampilkan waktu computer pada tombol Web server control. Visual Basic .NET <%@ Page Language="VB" %> <script runat="server"> LSP Telematika Indonesia
249
Sub Button1_Click(sender As Object, e As EventArgs) Response.Write("Postback!") End Sub </script> <html> <head> </head> <body onload="javascript:document.forms[0]['Button1'].value=Date();"> <form runat="server"> <p> <asp:Button id="Button1" onclick="Button1_Click" runat="server" Font-Bold="True" Font-Names="Verdana" Font-Size="Larger "></asp:Button> </p> </form> </body> </html>
Visual C# .NET
<%@ Page Language="C#" %> <script runat="server"> void Button1_Click(object sender, EventArgs e) { Response.Write("Postback!"); } </script> <html> <head> </head> <body onload="javascript:document.forms[0]['Button1'].value=Date();"> <form runat="server"> <p> <asp:Button id="Button1" onclick="Button1_Click" runat="server" Font-Bold="True" Font-Names="Verdana" Font-Size="Larger"></asp:Button> </p> </form> </body> </html>
5.7.2
Menghubungkan Basis Data dengan ADO .NET
Pada ADO .NET, Anda dapat menggunakan objek Connection untuk melakukan koneksi pada data source yang spesifik. Untuk melakukan koneksi ke Microsoft SQL Server versi 7.0 atau lebih, pergunakan objek SqlConnection dari Framework Data Provider .NET untuk SQL Server. Untuk LSP Telematika Indonesia
250
melakukan koneksi ke data source OLE DB atau Microsoft SQL Server versi 6.x atau kurang dengan menggunakan Provider OLE DB untuk SQL Server (SQLOLEDB), pergunakan objek OleDbConnection dari Framework Data Provider .NET untuk OLE DB. Untuk melakukan koneksi ke data source ODBC, pergunakan objek OdbcConnection dari Framework Data Provider .NET untuk ODBC. Untuk melakukan koneksi ke data source Oracle, pergunakan objek OracleConnection dari Framework Data Provider .NET untuk Oracle.
5.8
ASP Response Object
ASP Response Object digunakan untuk mengirimkan keluaran dari server ke user. Berikut ini adalah daftar collection, properti dan methodnya :
Tabel 5.8.1 : Collections
Collection Cookies
Deskripsi Menentukan nilai cookies. Jika cookie tidak ada, maka akan dibuat terlebih dahulu dan mengambil nilai dari cookie tersebut.
Tabel 5.8.2 : Properties
Property Buffer CacheControl Charset ContentType Expires
ExpiresAbsolute IsClientConnected Pics Status
Description Menentukan apakah hendak menamping keluaran atau tidak. Menentukan apakah proxy server dapat menampung keluaran dari ASP di cache. Menambahkan nama dari character-set ke content-type header pada response object. Menentukan HTTP content type untuk response object. Menentukan lamanya (dalam menit) sebuah halaman akan ditampung di cache browser sebelum halaman tersebut expired. Menentukan tanggal dan waktu expires dari halaman yang ditampung di cache. Menandakan bahwa client tidak terkoneksi dengan server Menambahkan nilai ke label PICS response header Menentukan nilai dari statis line yang dikembalikan server.
Tabel 5.8.3 : Methods
Method AddHeader AppendToLog BinaryWrite
Description Menambah HTTP heade yang baru dan nilai untuk HTTP response. Menambahkan string diakhir log server. Writes data directly to the output without any character
251
Clear End Flush Redirect Write
conversion Menulis data Membersihkan buffer keluaran HTML Berhenti memproses script dan mengembalikan hasil proses Mengirimkan keluaran HTML yang ditampung secepatnya Mengalihkan user ke URL yang berbeda. Menuliskan string tertentu sebagai keluaran
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 ClientCertificate Cookies Form QueryString ServerVariables
Description Mengandung semua nilai field yang disimpan dalam sertifikasi client Mengandung semua nilai cookie yang dikirim dengan HTTP request Mengandung semua nilai form yang menggunakan method POST Mengandung semua nilai variabel di HTTP query string Mengandung semua nilai variable server
Tabel 5.9.2 : Properties
Property TotalBytes
Description Mengembalikan total byte yang dikirimkan client di dalam request

Tabel 5.9.3 : Methods
Method BinaryRead
Description Memperoleh data yang dikirim ke server dari client sebagai bagian dari request dan menyimpannya dalam array.
Request objek dapat digunakan untuk mengambil informasi dari user lewat form. Contoh : <form method="get" action="simpleform.asp"> First Name: <input type="text" name="fname" /> <br /> Last Name: <input type="text" name="lname" /> <br /><br /> <input type="submit" value="Submit" /> </form> Input user dapat diperoleh dengan 2 cara yaitu dengan Request QueryString atau Request Form. Perintah Request QueryString digunakan untuk mengumpulkan nilai dalam form dengan method=get. Informasi yang dikirim LSP Telematika Indonesia
252
lewat method ini dapat dilihat pada address bar dan memiliki batasan jumlah informasi. Seandainya user mengetik Budi dan Santoso pada form diatas, maka URL yang terkirim ke server adalah
http://www.w3schools.com/simpleform.asp?fname=Bill&lname=Gates Seandainya file asp FormSederhana.asp mengandung script sebagai berikut : <body> Selamat Datang <% response.write(request.querystring("fname")) response.write(" " & request.querystring("lname")) %> </body> Maka browser akan menampilkan Welcome Bill Gates di dokumen. Perintah Request Form digunakan untuk mengumpulkan informasi dari form dengan method=post. Informasi yang dikirim melalui method ini tidak terlihat oleh orang lain dan tidak memiliki batasan jumlah. Seandainya user menulis Budi dan Santoso di form maka URL yang terkirim pada server adalah http://www.w3schools.com/FormSederhana.asp
5.10
ASP Server Object
ASP server objek digunakan untuk mengakses properti dan methods dalam server. Berikut ini adalah daftar properti dan method-nya : Properti Properti ScriptTimeout Deskripsi Mengembalikan jumlah maksimum detik sebuah script dapat berjalan.
Methods Method CreateObject Execute GetLastError() HTMLEncode MapPath Transfer URLEncode Deskripsi Membuat instance objek Mengeksekusi file ASP dari file ASP yang lain Mengembalikan objek ASPError yang mendeskripsikan kondisi eror yang terjadi Menerapkan HTML encoding pada string yang ditentukan Memetakan path yang telah ditentukan ke path fisik Mengirimkan semua informasi dari file ASP yang satu ke yang lainnya. Menerapkan aturan URL encoding ke string yang ditentukan
253
5.11
ActiveX Data Object (ADO)
Membuat Koneksi Basis Data tanpa DSN

Cara termudah untuk terhubung dengan basis data dengan menggunakan koneksi tanpa DSN. Koneksi jenis ini data digunakan pada basis data Microsoft Access di web kita. Jika kita memiliki basis data yang dinamai northwind.mdb yang terletak di direktori web c:/web/, kita dapat terhubung dengan basis data ini dengan kode ASP di bawah ini :
<% set conn=Server.CreateObject("ADODB.Connection") conn.Provider="Microsoft.Jet.OLEDB.4.0" conn.Open "c:/webdata/northwind.mdb" %>
Membuat Koneksi Basis Data dengan ODBC

Apabila kita memiliki basis data ODBC yang dinamai northwind, kita dapat terhubung dengan basis data ini dengan kode ASP di bawah ini :
<% set conn=Server.CreateObject("ADODB.Connection") conn.Open "northwind" %>
Dengan koneksi ODBC maka kita dapat terhubung dengan basis data manapun pada computer di jaringan selama koneksi ODBC masih aktif.
Objek Connection ADO objek connection digunakan untuk membuat koneksi terbuka dengan sumber data. Melalui koneksi ini, kita dapat mengakses dan memanipulasi basis data. Kita juga bisa membuat koneksi basis data dengan melewatkan string koneksi melalui sebuah objek command atau recordset. Tetapi, koneksi jenis ini hanya baik digunakan untuk query tertentu saja.
ProgID
set objConnection=Server.CreateObject("ADODB.connection")
254
Berikut ini adalah properti, method dan event dari objek Connection :
Tabel 5.10.1 : Properti Objek Connection Properti Attributes CommandTimeout ConnectionString ConnectionTimeout CursorLocation DefaultDatabase IsolationLevel Mode Provider State Version Keterangan Mengeset atau mengembalikan atribut dari objek Connection Mengeset atau mengembalikan waktu (dalam detik) menunggu sebuah perintah dieksekusi Mengeset atau mengembalikan detail yang digunakan membuat koneksi ke sumber data Mengeset atau mengembalikan waktu (dalam detik) menunggu koneksi terbuka Mengeset atau mengembalikan lokasi dari servis Mengeset atau mengembalikan nama basis data default Mengeset atau mengembalikan level isolasi Mengeset atau mengembalikan provider access permission Mengeset atau mengembalikan nama provider Mengembalikan nilai yang menandakan bahwa koneksi terbuka atau tertutup Mengembalikan angka versi ADO
untuk untuk untuk
telah
Tabel 5.10.2 : Method Objek Connection Method BeginTrans Cancel Close CommitTrans Execute Open OpenSchema RollbackTrans Keterangan Memulai transaksi baru Membatalkan eksekusi perintah Menutup koneksi Menyimpan segala perubahan dan mengakhiri transaksi yang sedang berlangsung Mengeksekusi sebuah query, statement, prosedur atau provider teks tertentu Membuka koneksi Mengembalikan schema informasi dari provider mengenai sumber data Membatalkan segala perubahan dari transaksi yang sedang berlangsung dan mengakhiri transaksi
Bahasa yang dapat menangani event hanya Visual Basic, Visual C++ dan Visual J++. Tabel 5.10.3 : Event Objek Connection Event BeginTransComplete CommitTransComplete ConnectComplete Disconnect ExecuteComplete InfoMessage RollbackTransComplete WillConnect WillExecute Keterangan Terpicu setelah operasi BeginTrans Terpicu setelah operasi CommitTrans Terpicu setelah koneksi dimulai Terpicu setelah koneksi berakhir Terpicu setelah sebuah perintah selesai dieksekusi Terpicu jika ada peringatan yang muncul selama ConnectionEvent berlangsung Terpicu setelah operasi RollbackTrans Terpicu sebelum koneksi dimulai Terpicu sebelum sebuah perintah dieksekusi
operasi
255
Tabel 5.10.4 : Koleksi Objek Connection
Koleksi Errors Properties
Keterangan Mengandung semua objek error dari objek Connection Mengandung semua objek Property dari objek Connection
Objek Command
ADO objek command digunakan untuk mengeksekusi sebuah query basis data. Query dapat melakukan aksi seperti membuat, menambah, mengakses, menghapus dan mengubah record. Jika query digunakan untuk mengakses data, data akan dikembalikan sebagai objek RecordSet. Hal ini berarti data yang diakses dapat dimanipulasi dengan properti, koleksi, method dan event dari objek RecordSet. Fitur utama dari objek Comman adalah kemampuan untuk menggunakan stored query dan prosedur dengan parameter.
ProgID set objCommand=Server.CreateObject("ADODB.command")
Berikut ini adalah daftar properti, method dan koleksi dari objek Command :
Tabel 5.10.5 : Properti Objek Command Properti ActiveConnection Keterangan Mengeset atau mengembalikan definisi dari koneksi apabila koneksi tertutup atau objek Connection yang berlangsung jika koneksi terbuka Mengeset atau mengembalikan provider command Mengeset atau mengembalikan waktu (dalam detik) untuk menunggu selama perintah dieksekusi Mengeset atau mengembalikan tipe dari objek Command Mengeset atau mengembalikan nama objek Command Mengeset atau mengembalikan nilai Boolean dimana jika bernilai true maka command harus menyimpan versi dari query yang belum dieksekusi Mengembalikan nilai yang menggambarkan objek Command yang terbuka, tertutup, mengeksekusi atau mengakses data
CommandText CommandTimeout CommandType Name Prepared
State
Tabel 5.10.6 : Method Objek Command Method Cancel CreateParameter Execute Keterangan Membatalkan eksekusi dari sebuah method Membuat sebuah objek Parameter Mengeksekusi query, perintah SQL atau prosedur pada property CommandText
Tabel 5.10.7 : Koleksi Objek Command Koleksi Keterangan
256
Parameters Properties
Mengandung semua objek Parameter dari objek Command Mengandung semua objek Properti dari objek Command
Membuat ADO Tabel Recordset Setelah koneksi basis data dengan ADO terjadi, maka kita dapat membuat ADO Recordset. Seandainya kita memiliki basis data yang dinamai Northwind, kita dapat mengakses table Customer dalam basis data dengan kode di bawah ini:
<% set conn=Server.CreateObject("ADODB.Connection") conn.Provider="Microsoft.Jet.OLEDB.4.0" conn.Open "c:/webdata/northwind.mdb" set rs=Server.CreateObject("ADODB.recordset") rs.Open "Customers", conn
%>
Membuat ADO SQL Recordset Kita dapat mengakses data dalam table Customer dengan menggunakan SQL :
<% set conn=Server.CreateObject("ADODB.Connection") conn.Provider="Microsoft.Jet.OLEDB.4.0" conn.Open "c:/webdata/northwind.mdb" set rs=Server.CreateObject("ADODB.recordset") rs.Open "Select * from Customers", conn
%>
Memperoleh Data dari Recordset Setelah recordset aktif, kita dapat memperoleh dari recordset. Seandainya kita memiliki basis data Northwind, kita dapat mengakses tabel Customer pada basis data ini dengan kode di bawah ini :
<% set conn=Server.CreateObject("ADODB.Connection") conn.Provider="Microsoft.Jet.OLEDB.4.0" conn.Open "c:/webdata/northwind.mdb" set rs=Server.CreateObject("ADODB.recordset") rs.Open "Select * from Customers", conn for each x in rs.fields response.write(x.name) response.write(" = ") response.write(x.value) next %>
Kode ASP dengan Perintah SQL
257
Berikut ini adalah contoh-contoh kode ASP dengan perintah SQL untuk mengakses data, menambah data, menghapus data dan mengubah data. 1. Mengakses data Kita akan menampilkan record-record yang memiliki nama perusahaan (Companyname) diawali huruf A dari table Customer :
<html> <body> <% set conn=Server.CreateObject("ADODB.Connection") conn.Provider="Microsoft.Jet.OLEDB.4.0" conn.Open "c:/webdata/northwind.mdb" set rs=Server.CreateObject("ADODB.recordset") sql="SELECT Companyname, Contactname FROM Customers WHERE CompanyName LIKE 'A%'" rs.Open sql, conn %> <table border="1" width="100%"> <tr> <%for each x in rs.Fields response.write("<th>" & x.name & "</th>") next%> </tr> <%do until rs.EOF%> <tr> <%for each x in rs.Fields%> <td><%Response.Write(x.value)%></td> <%next rs.MoveNext%> </tr> <%loop rs.close conn.close%> </table> </body>
</html>
Sedangkan keluaran dari kode di atas adalah :

Companyname Alfreds Futterkiste Contactname Maria Anders
2. Menambah data Kita akan menambah record baru ke tabel Customer pada basis data Northwind. Pertama kita membuat sebuah form yang mengandung fieldfield yang nilainya berupa data yang akan disimpan :
<html> <body> <form method="post" action="demo_add.asp"> <table> <tr> <td>CustomerID:</td> <td><input name="custid"></td>
258
</tr><tr> <td>Company Name:</td> <td><input name="compname"></td> </tr><tr> <td>Contact Name:</td> <td><input name="contname"></td> </tr><tr> <td>Address:</td> <td><input name="address"></td> </tr><tr> <td>City:</td> <td><input name="city"></td> </tr><tr> <td>Postal Code:</td> <td><input name="postcode"></td> </tr><tr> <td>Country:</td> <td><input name="country"></td> </tr> </table> <br /><br /> <input type="submit" value="Add New"> <input type="reset" value="Cancel"> </form> </body>
</html>
Ketika user menekan tombol submit, maka form akan terkirim ke file yang dinamai demo_add.asp. File ini mengandung kode untuk menambah record baru ke tabel Customer :
<html> <body> <% set conn=Server.CreateObject("ADODB.Connection") conn.Provider="Microsoft.Jet.OLEDB.4.0" conn.Open "c:/webdata/northwind.mdb" sql="INSERT INTO customers (customerID,companyname," sql=sql & "contactname,address,city,postalcode,country)" sql=sql & " VALUES " sql=sql & "('" & Request.Form("custid") & "'," sql=sql & "'" & Request.Form("compname") & "'," sql=sql & "'" & Request.Form("contname") & "'," sql=sql & "'" & Request.Form("address") & "'," sql=sql & "'" & Request.Form("city") & "'," sql=sql & "'" & Request.Form("postcode") & "'," sql=sql & "'" & Request.Form("country") & "')" on error resume next conn.Execute sql,recaffected if err<>0 then Response.Write("No update permissions!") else Response.Write("<h3>" & recaffected & " record added</h3>") end if conn.close %>
</body> </html>
3. Menghapus data LSP Telematika Indonesia
259
Kita hendak menghapus sebuah record dari tabel Customer di basis data Northwind. Pertama, kita membuat tabel yang mendaftarkan semua record pada tabel Customer :
<html> <body> <% set conn=Server.CreateObject("ADODB.Connection") conn.Provider="Microsoft.Jet.OLEDB.4.0" conn.Open "c:/webdata/northwind.mdb" set rs=Server.CreateObject("ADODB.Recordset") rs.open "SELECT * FROM customers",conn %> <h2>List Database</h2> <table border="1" width="100%"> <tr> <% for each x in rs.Fields response.write("<th>" & ucase(x.name) & "</th>") next %> </tr> <% do until rs.EOF %> <tr> <form method="post" action="demo_delete.asp"> <% for each x in rs.Fields if x.name="customerID" then%> <td> <input type="submit" name="customerID" value="<%=x.value%>"> </td> <%else%> <td><%Response.Write(x.value)%></td> <%end if next %> </form> <%rs.MoveNext%> </tr> <% loop conn.close %>
</table> </body> </html>
Jika user menekan tombol di kolom customerID, maka user akan terbawa ke file demo_delete.asp. File ini mengandung kode mengenai cara membuat input fields berdasarkan fields dari record di tabel. Selain itu file ini juga mengandung tombol Delete record yang akan menghapus record :
<html> <body> <h2>Delete Record</h2> <% set conn=Server.CreateObject("ADODB.Connection") conn.Provider="Microsoft.Jet.OLEDB.4.0"
260
conn.Open "c:/webdata/northwind.mdb" cid=Request.Form("customerID") if Request.form("companyname")="" then set rs=Server.CreateObject("ADODB.Recordset") rs.open "SELECT * FROM customers WHERE customerID='" & cid & "'",conn %> <form method="post" action="demo_delete.asp"> <table> <%for each x in rs.Fields%> <tr> <td><%=x.name%></td> <td><input name="<%=x.name%>" value="<%=x.value%>"></td> <%next%> </tr> </table> <br /><br /> <input type="submit" value="Delete record"> </form> <% else sql="DELETE FROM customers" sql=sql & " WHERE customerID='" & cid & "'" on error resume next conn.Execute sql if err<>0 then response.write("No update permissions!") else response.write("Record " & cid & " was deleted!") end if end if conn.close %>
</body> </html>
4. Mengubah data Kita akan mengubah record di tabel Customer pada basis data Northwind. Pertama, kita membuat tabel yang akan mendaftar semua record dari tabel Customer :
<html> <body> <% set conn=Server.CreateObject("ADODB.Connection") conn.Provider="Microsoft.Jet.OLEDB.4.0" conn.Open "c:/webdata/northwind.mdb" set rs=Server.CreateObject("ADODB.Recordset") rs.open "SELECT * FROM customers",conn %> <h2>List Database</h2> <table border="1" width="100%"> <tr> <% for each x in rs.Fields response.write("<th>" & ucase(x.name) & "</th>") next %> </tr> <% do until rs.EOF %> <tr>
261
<form method="post" action="demo_update.asp"> <% for each x in rs.Fields if lcase(x.name)="customerid" then%> <td> <input type="submit" name="customerID" value="<%=x.value%>"> </td> <%else%> <td><%Response.Write(x.value)%></td> <%end if next %> </form> <%rs.MoveNext%> </tr> <% loop conn.close %> </table>
</body> </html>
Jika user memilih tombol di kolom customerID maka user akan terbawa ke file yang dinamai demo_update.asp. File ini mengandung kode mengenai cara membuat input fields berdasarkan fields record di tabel basis data. Selain itu, file ini juga mengandung tombol Update record yang akan menyimpan semua perubahan :
<html> <body> <h2>Update Record</h2> <% set conn=Server.CreateObject("ADODB.Connection") conn.Provider="Microsoft.Jet.OLEDB.4.0" conn.Open "c:/webdata/northwind.mdb" cid=Request.Form("customerID") if Request.form("companyname")="" then set rs=Server.CreateObject("ADODB.Recordset") rs.open "SELECT * FROM customers WHERE customerID='" & cid & "'",conn %> <form method="post" action="demo_update.asp"> <table> <%for each x in rs.Fields%> <tr> <td><%=x.name%></td> <td><input name="<%=x.name%>" value="<%=x.value%>"></td> <%next%> </tr> </table> <br /><br /> <input type="submit" value="Update record"> </form> <% else sql="UPDATE customers SET " sql=sql & "companyname='" & Request.Form("companyname") & "'," sql=sql & "contactname='" & Request.Form("contactname") & "'," sql=sql & "address='" & Request.Form("address") & "',"
262
sql=sql & "city='" & Request.Form("city") & "'," sql=sql & "postalcode='" & Request.Form("postalcode") & "'," sql=sql & "country='" & Request.Form("country") & "'" sql=sql & " WHERE customerID='" & cid & "'" on error resume next conn.Execute sql if err<>0 then response.write("No update permissions!") else response.write("Record " & cid & " was updated!") end if end if conn.close %>
</body> </html>
5.11 Caching, Refresing dan Tunneling

Caching ASP .NET
Salah satu faktor penting untuk mengukur kinerja halaman web adalah kecepatan. Kuncinya terletak pada pengaturan traffuc pada halaman web. Salah satu cara untuk meningkatkan output dengan cara caching. Salah satu contoh dari caching adalah connection pooling. Caching pada halaman ASP .NET Caching dapat dilakukan pada halaman ASP .Net dengan 2 cara : 1. Menggunakan perintah @OutputCache di awal halaman ASP .NET 2. Membuat program dengan kelas HttpCachePolicy. Kelas ini dapat diakses dari properti HttpResponse.Cache Ketika cara diatas diterapkan pada halaman ASP .NET, halaman response akan tersimpan di cache ketika method GET yang pertama akan dibuat untuk halaman tersebut.Sama halnya dengan permintaan GET, POST dan HEAD dari halaman akan menunjuk ke cache hingga cache berakhir. Berikut ini adalah konsep penting untuk caching halaman ASP .NET : 1. Menentukan kebijakan Berakhirnya cache Menggunakan perintah @OutputCache. Mengikutsertakan perintah ini di awal halaman aspx yang akan di cache. <%@ OutputCache Duration="60" VaryByParam="None" %> Durasi adalah waktu hidup cache dalam detik. Menggunakan kelas Cache di kode halaman aspx.
263
Response.Cache.SetExpires(DateTime.Now.AddSeconds(60)); Response.Cache.SetCacheability(HttpCacheability.Public); 2. Menentukan Lokasi Cache Menggunakan perintah @OutputCache Client Cache : <%@ OutputCache Duration="60" Location="Client" %> Proxy Server Cache : <%@ OutputCache Duration="60" Location="Downstream" %> Server Cache: <%@ OutputCache Duration="60" Location="Server" %> Tanpa Cache : <%@ OutputCache Location="None" %> Menggunakan kelas Cache : Client Cache Response.Cache.SetExpires(DateTime.Now.AddSeconds(60)); Response.Cache.SetCacheability(HttpCacheability.Private); Proxy Server Cache Response.Cache.SetExpires(DateTime.Now.AddSeconds(60)); Response.Cache.SetCacheability(HttpCacheability.Public); Response.Cache.SetNoServerCaching(); Server Caching Response.Cache.SetExpires(DateTime.Now.AddSeconds(60)); Response.Cache.SetCacheability(HttpCacheability.Server); Tanpa Cache Use HttpCacheability.NoCache 3. Caching beberapa versi dari halaman 1. Caching berdasarkan query string dan parameter form POST menentukan daftar atribut yang dipisahkan dengan simbol (;) di perintah OutputCache ValueByParams. <%@ OutputCache Duration="65" VaryByParam="DeptId;EmpId" %> Ketika halaman pertama kali diminta, response akan dihasilkan dan ditambahkan ke cache. Jika halaman akan diminta dalam waktu 65 detik dengan nilai DeptId dan EmpId yang sama maka versi cache yang akan digunakan. LSP Telematika Indonesia
264
2. Caching berdasarkan HTTP header yang akan menentikan atribut ValueByHeader di perintah OutputCache. <%@ OutputCache Duration="60" VaryByHeader="Referer" %> Ketika halaman akan diminta untuk pertama kalinya, response akan dihasilkan dan ditambahkan ke cache. Jika halaman tersebut diminta dari link yang sama dalam waktu 60 detik maka tiruan yang ada di cache yang digunakan 3. Caching berdasarkan dan fungsi. Mengikutsertakan mendefinisikan di file atribut ulang Global.asax.
VaryByCuston
HttpApplication.GetVaryByCustomString 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
265
Memelihara keadaan session yang valid secara terus menerus Memaksa proses tertentu untuk berjalan di server ketika session client telah berakhir
Method Response.AppendHeader ASP .NET menyediakan method AppendHeader untuk objek Response. Umumnya, waktu untuk merefresh dapat diatur dengan cara seperti dibawah ini, menggunakan (C#) : this.Response.AppendHeader("Refresh", Convert.ToString(Session.Timeout * 60 + 5)); halaman diset untuk merefresh 5 detik setelah session client berakhir.
Client Pull
Client pull adalah cara yang ideal untuk menangani situasi dimana user masih online dengan browser menampilkan halaman terakhir, tetapi dengan alasan tertentu halaman tersebut gagal merespon. Kita dapat menentukan tenggat waktu berakhirnya sebauh halaman dengan menggunakan tag META. Jika kita menuliskan di HTMl maka kita harus menyisipkan baris di bawah ini, diantara tag <HEAD> dan </HEAD> : <META HTTP-EQUIV="Refresh" CONTENT="300;URL=MainMenu.asp"> Tag META di atas berarti waktu halaman berakhir 300 detik dan setelah itu akan ditampilkan MainMenu.asp. Selain itu, kita dapat menggunakan kode dibawah ini untuk mengisi URL : URL=Quit.asp&GoToPage=default.htm
Soal Latihan
1. Bahasa pemrograma apa yang harus diketahui dalam teknologi .NET : a. PHP b. HTML LSP Telematika Indonesia
266
c. Java d. VBScript 2. File ekstensi untuk memebuat user control : a. aspx b. ascx c. apsx d. acsx 3. Objek yang digunakan untuk melakukan koneksi dengan data source : a. Connection b. Cookies c. Prompt d. Form
Soal Praktek
4. Buatlah sebuah file ASP yang akan mengeluarkan output seperti dibawah ini dengan response object :
5. Tulis kode program untuk menambahkan cookies pada aplikasi web Anda dengan nama method myCookie.
267
BAB 6 Javascript
Tujuan Instruksional Umum : 1. Siswa dapat menggunakan Javascript pada aplikasi web 2. Siswa dapat menggabungkan javascript dengan HTML Tujuan Instruksional khusus : 1. Siswa dapat membuat kode javascript untuk validasi 2. Siswa dapat menyisipkan javascript dalam HTML untuk aplikasi web Materi yang dibahas dalam bab ini memenuhi : 1. TIK.PR04.006.01 Menerapkan dasar validasi unjuk kerja situs web
Berikut ini adalah gambaran umum dari materi yang ada di bab ini :
6.1 Pemrograman Javascript
268
Javascript menyediakan beberapa fungsi untuk memudahkan membuat web yang dinamis, yaitu web yang dapat memberikan respon terhadap apa yang pengguna lakukan. Sebelum mempelajari Javascript, diharapkan pembaca telah mengenal HTML. Bab ini berisi pengajaran mengenai penggunaan dasar Javascript di dalam suatu web.
6.1.1 Javascript dan HTML

Hypertext Markup Language (HTML) adalah bahasa dalam bentuk teks yang banyak digunakan dalam world wide web. Ketika kita membuat dokumen dengan program pengolahan word, seperti Microsoft Word, program itu mengunakan markup language untuk menunjukkan struktur dan format dari dokumen elekronis. HTML merupakan markup language yang digunakan untuk memberitahu web browser bagaimana membuat struktur dan menampilkan halaman web. [POW01]
HTML mempunyai sintaks yang ditentukan, semua dokumen HTML harus mengikuti struktur resmi. HTML berupa berkas teks berisi informasi yang ingin ditampilkan dan juga kumpulan instruksi, yang disebut elemen, yang menyatakan bagaimana web browser menampilkan informasi. Javascript adalah bahasa pemrograman sederhana yang didesain untuk
menambah interaksi dalam halaman HTML dengan berorientasi objek. Javascript berupa beberapa baris computer code yang dapat dijalankan dan biasanya ditambahkan langsung dalam HTML. Javascript merupakan bahasa yang berdasarkan pada Object Oriented Programming (OOP). Dengan menggunakan bahasa OOP, kita dapat membuat objek-objek tersendiri dan tipe variabel sendiri. Microsoft mengeluarkan Javascript dengan nama Jscript.
6.1.2
Disini
Variabel dan Tipe Data

akan dikenalkan dua konsep yang paling penting dalam bahasa
pemrograman, yaitu variabel dan tipe data. Variabel adalah tempat untuk menyimpan informasi, dan biasanya dinyatakan dalam bentuk nama. Variabel dapat membantu dalam menyimpan dan memanipulasi data di program. Tipe data adalah tipe atau jenis data yang dapat dimanipulasi program. Numeric (angka), string, boolean, fungsi, obyek, dan array merupakan contoh dari tipe data yang dapat digunakan dalam Javascript.
269
6.1.3
Penggunaan Variabel dan Literals
Literal (atau constant) dalam Javascript adalah nilai data yang ditampilkan langsung dalam program dan tidak berubah. Beberapa contoh dari literal antara lain angka, string, boolean true atau false, dan nilai spesial null [FLA97]. Berikut merupakan beberapa contoh literal: 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: 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
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;
270
Pendeklarasian variabel dapat digabungkan dengan pendefinisian awal nilai, contohnya:
var i = 2;
Pertama kali menggunakan variabel yang belum dideklarasikan, variabel tersebut akan dideklarasikan secara otomatis. Pendeklarasian variabel dengan menggunakan var biasanya dibutuhkan untuk mendeklarasikan variabel lokal di dalam fungsi dan nama variabel itu juga digunakansebagai variabel global di luar fungsi. Jika variabel tidak dideklarasikan di dalam fungsi, maka Javascript menganggap variabel tersebut sebagai variabel global yang dideklarasikan di luar fungsi dan tidak mendeklarasikan satu variabel lokal di dalam variabel secara otomatis.
Perbedaan variabel dalam Javascript dan bahasa lain, seperti Java dan C, yaitu variabel dalam Javascript untype (tidak bertipe). Artinya, variabel dalam Javascript dapat menyimpan tipe data yang berbeda, tidak seperti variabel Java dan C yang hanya dapat menyimpan satu tipe data [POW01]. Contohnya, diperbolehkan untuk menyimpan angka ke satu variabel dan kemudian menyimpan string ke variabel itu:
i = 10; i = "ten";
6.1.4
Operators
Operators adalah aksi atau operasi yang memanipulasi, menggabungkan, atau membandingkan variabel. Berikut merupakan beberapa kategori dari operator [FLA97]: a. Arithmetic Operators Arithmetic operators mengambil nilai berupa angka (baik literal atau variabel) sebagai operan dan mengembalikan hasil berupa angka. Contoh arithmetic operators yang terdapat di Javascript dapat dilihat pada tabel berikut:
Tabel 6.1.4.1 : Arithmetic Operators
Operator +
Deskripsi Penambahan (addition)
Contoh x=2 y=2 x+y 4
Hasil
271
Pengurangan (subtraction)
x=5 y=2 x-y x=5 y=4 x*y 15/5 5/2 5%2 10%8 10%2 x=5 x++ x=5 x--
Perkalian (multiplication)
20
/ %
Pembagian (division) Pembagian sisa/ Modulus (division remainder) Increment Decrement
3 2.5 1 2 0 x=6 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 x=y x+=y x-=y x*=y x/=y x%=y
Sama Dengan x=y x=x+y x=x-y x=x*y x=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 is equal to
Contoh 5==8 returns false
272
===
is equal to (checks for both value and type)
x=5 y="5" x==y returns true x===y returns false
!= > < >= <=
is not equal is greater than is less than is greater than or equal to is less than or equal to
5!=8 returns true 5>8 returns false 5<8 returns true 5>=8 returns false 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 and
Contoh x=6 y=3 (x < 10 && y > 1) returns true
||
or
x=6 y=3 (x==5 || y==5) returns false
not
x=6 y=3 !(x==y) returns true
e. String Operators Sebagai digunakan tambahan untuk untuk nilai comparison string, operators, yang operator dapat (+) concatenation
menggabungkan dua string, menghasilkan string lain yang berasal dari penggabungan dua operan string.
Tabel 6.1.4.5 : String Operators
Operator +
Deskripsi Penambahan string (menggabungkan dua strings)
Contoh a=2 b=2
Hasil a+b=22
f.
Conditional Operator Javascript menyediakan conditional operator yang menyatakan nilai variable berdasarkan kondisi tertentu. Conditional operator
273
merupakan satu-satunya operator di Javascript yang memerlukan 3 operan. Operan ini biasanya digunakan sebagai shortcut untuk pernyataan if. Syntax : condition ? expr1 : expr2; Dimana: condition: ekspresi yang mengevaluasi true atau false expr1, expr2 : ekspresi dengan nilai dari segala tipe
Operan pertama dari conditional operator berupa nilai boolean, biasanya berupa hasil dari perbandingan. Operan kedua dan ketiga dapat mempunyai nilai lain. Nilai dihasilkan dari conditional operator tergantung pada nilai Boolean dari operan pertama. Jika operan pertama true, maka nilai dari perhitungan conditional adalah nilai yang didapat dari operan kedua. Jika operan kedua false, maka hasilnya adalah nilai dari operan ketiga. Contoh untuk conditional operator :
greeting = "hello " + ((name != null) ? name : "there");
Contoh diatas jika dinyatakan dalam pernyataan if, artinya sama seperti berikut ini:
greeting = "hello "; if (name != null) greeting += name; else greeting += "there"; g. Bitwise Operator Bitwise operator memperlakukan operannya sebagai 32 bits (zero dan satu), daripada menggunakan desimal, heksadesimal, atau angka oktal. Sebagai contoh, angka desimal 9 mempunyai representasi binary sebagai 1001. Bitwise operator melakukan operasinya dengan menggunakan representasi binary, tapi menghasilkan angka standar untuk Javascript. Tabel berikut ini merangkum bitwise operator dalam Javascript:
Tabel 6.1.4.6 : Bitwise Operators

Operator Bitwise AND LSP Telematika Indonesia Penggunaan Deskripsi a&b Returns a one in each bit position for
274
which the corresponding bits of both operands are ones. Bitwise OR a|b Returns a one in each bit position for which the corresponding bits of either or both operands are ones. Returns a one in each bit position for which the corresponding bits of either but not both operands are ones. Inverts the bits of its operand. Shifts a in binary representation b bits to left, shifting in zeros from the right. Shifts a in binary representation b bits to right, discarding bits shifted off. Shifts a in binary representation b bits to the right, discarding bits shifted off, and shifting in zeros from the left.
Bitwise XOR
a^b
Bitwise NOT Left shift
~a a << b
Signpropagating right shift Zero-fill right shift
a >> b
a >>> b
Setelah mengetahui beberapa jenis operator yang terdapat di Javascript, operator berikut: tersebut perlu digunakan dalam suatu HTML. Contoh penggunaan operator dengan variable di HTML dapat dilihat sebagai
<script type="text/javascript"> <!-var two = 2 var ten = 10 var linebreak = "<br />" document.write("two plus ten = ") result = two + ten document.write(result) document.write(linebreak) document.write("ten * ten = ") result = ten * ten document.write(result) document.write(linebreak) document.write("ten / two = ") result = ten / two document.write(result) //--> </script> </body> Hasil keluarannya: LSP Telematika Indonesia
275
two plus ten = 12 ten * ten = 100 ten / two = 5 two plus ten = 12 ten * ten = 100 ten / two = 5
6.2
Dates dan Math

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;
6.2.1. Objek Date
276
Berikut ini ditampilkan daftar beberapa metode yang disediakan oleh Javascript:
Tabel 6.2.1 : Daftar Metode Objek Date
Method Date() getDate() getDay() getMonth() getFullYear() getYear()
Deskripsi Mengembalikan nilai tanggal dan waktu hari ini Mengembalikan nilai tanggal dalam satu bulan dari objek date (dari 1-31) Mengembalikan nilai hari dalam satu minggu dari objek date (dari 0-6) Mengembalikan nilai bulan dari objek date (dari 0-11) Mengembalikan nilai tahun dari objek date, dalam angka 4-digit Mengembalikan nilai tahun dari objek date, dalam angka 4-digit atau 2-digit. Sebaiknya gunakan getFullYear() Mengembalikan nilai jam dari objek date (dari 0-23) Mengembalikan nilai menit dari objek date (dari 059) Mengembalikan nilai detik dari objek date (dari 0-59) Mengembalikan nilai milidetik dari objek date (dari 0999) Mengembalikan jumlah milidetik sejak 1 Januari 1970 tengah malam Mengembalikan nilai berupa perbedaan waktu dalam menit antara waktu lokal dengan waktu GMT Mengembalikan tanggal dari objek date berdasarkan waktu universal (dari 1-31) Mengembalikan nilai hari dalam satu minggu dari objek date menurut waktu universal (dari 0-6) Mengembalikan nilai bulan dari objek date dalam satu minggu menurut waktu universal (dari 0-11) Mengembalikan angka tahun dalam 4-digit dari objek date menurut waktu universal Mengembalikan nilai jam dari objek date berdasarkan waktu universal (dari 0-23) Mengembalikan nilai menit dari objek date berdasarkan waktu universal (0-59) Mengembalikan nilai detik dari objek date berdasarkan waktu universal (dari 0-59)
getHours() getMinutes() getSeconds() getMilliseconds() getTime() getTimezoneOffset() getUTCDate() getUTCDay() getUTCMonth() getUTCFullYear() getUTCHours() getUTCMinutes() getUTCSeconds()
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 Menetapkan tanggal dari bulan dalam objek date (dari 1-31) Menetapkan bulan dari objek date (dari 0-11) Menetapkan tahun pada objek date (4-digit) Menetapkan tahun pada objek date (2 atau 4 digit).
setDate() setMonth() setFullYear() setYear() LSP Telematika Indonesia
277
Sebaiknya gunakan setFullYear() saja setHours() setMinutes() setSeconds() setMilliseconds() setTime() Menetapkan nilai jam pada objek date (dari 0-23) Menetapkan nilai menit pada objek date (dari 0-59) Menetapkan nilai detik pada objek date (dari 0-59) Menetapkan nilai milidetik pada objek date (dari 0999) Menghitung tanggal dan waktu dengan menambahkan atau mengurangi banyak milidetik tertentu pada/ dari 1 Januari 1970 tengah malam Menetapkan bulan dari objek date berdasarkan waktu universal (dari 1-31) Menetapkan bulan dari objek date berdasarkan waktu universal (dari 0-11) Menetapkan nilai tahun pada objek date berdasarkan waktu universal (4-digit) Menetapkan angka jam dari objek date berdasarkan waktu universal (dari 0-23) Menetapkan angka menit pada objek date berdasarka waktu universal (dari 0-59) Menetapkan angka detik dari objek date berdasarkan waktu universal (dari 0-59)
setUTCDate() setUTCMonth() setUTCFullYear() setUTCHours() setUTCMinutes() setUTCSeconds()
setUTCMilliseconds() Menetapkan nilai milidetik dari objek date berdasarkan waktu universal (dari 0-999) toSource() toString() toGMTString() Menyatakan source code dari sebuah objek Mengubah objek date menjadi string Mengubah objek date, berdasarkan waktu GMT, menjadi string. Sebaiknya gunakan toUTCString() saja Mengubah objek date, berdasarkan waktu universal, menjadi string Mengubah objek date, berdasarkan waktu lokal, menjadi string Mengambil tanggal dan mengembalikan nilai milidetik sejak 1 Januari 1970 tengah malam berdasarkan waktu universal Mengembalikan nilai primitif dari objek date
toUTCString() toLocaleString() UTC()
valueOf()
Selain metode, objek date juga mempunyai properti seperti berikut ini:
Tabel 6.2.2 : Properti Objek Date
Property Constructor Prototype
Deskripsi Referensi untuk fungsi yang menciptakan objek Memperbolehkan untuk menambah properti dan metode ke dalam objek
278
6.2.2 Penggunaan dan Manipulasi Dates

Pertama, objek Date didefinisikan dengan kata kunci baru. Contohnya sebuah objek Date bernama myDate didefinisikan seperti berikut:
var myDate=new Date() Lalu, kita dapat memanipulasi waktu dengan mudah dengan
menggunakan metode-metode yang tersedia untuk objek date. Contoh berikut menunjukkan objek date yang dinyatakan dalam tanggal tertentu (14 Januari 2010):
var myDate=new Date() myDate.setFullYear(2010,0,14) Contoh berikut menunjukkan objek date yang dinyatakan untuk 5 hari ke depan: var myDate=new Date() myDate.setDate(myDate.getDate()+5) Catatan: Untuk penambahan 5 hari mengganti bulan atau tahun, maka perubahan ditangani secara otomatis oleh objek date sendiri. Objek date juga dapat untuk membandingkan dua tanggal. Contoh berikut ini menunjukkan perbandingan tanggal hari ini dengan 14 Januari 2010:
var myDate=new Date() myDate.setFullYear(2010,0,14) var today = new Date() if (myDate>today) alert("Today is before 14th January 2010") else alert("Today is after 14th January 2010") Jika tidak ada argumen, constructor membuat objek date untuk tanggal dan waktu hari ini berdasarkan waktu local. Jika terdapat beberapa argumen tapi terdapat argumen yang hilang, maka argumen yang hilang akan dinyatakan 0. Argumen yang harus ada setidaknya tahun, bulan, dan tanggal. Jam, menit, detik, dan milidetik dapat dihilangkan.
279
Contoh penggunaan objek date dalam HTML a. Program berikut menampilkan bulan, tanggal, dan tahun pada hari ini.
<h4>It is now <script type="text/javascript"> <!-var currentTime = new Date() var month = currentTime.getMonth() + 1 var day = currentTime.getDate() var year = currentTime.getFullYear() document.write(month + "/" + day + "/" + year) //--> </script> </h4> Program diatas akan menampilkan tanggal waktu program dieksekusi, seperti:
It is now 3/21/2006!
b. Program berikut menampilkan waktu setiap detik, mengubah
informasi menjadi string yang dapat dibaca dan menampilkan string pada textbox.
<HTML> <HEAD> <TITLE>JavaScript Clock</TITLE> <script Language="JavaScript"> <!- Hide me from other browsers // Netscapes Clock - Start // this code was taken from Netscapes JavaScript documentation at // www.netscape.com on Jan.25.96 var timerID = null; var timerRunning = false; function stopclock (){ if(timerRunning) clearTimeout(timerID); timerRunning = false; } function startclock () { // Make sure the clock is stopped stopclock(); showtime(); } function showtime () { var now = new Date(); var hours = now.getHours(); var minutes = now.getMinutes(); var seconds = now.getSeconds() var timeValue = "" + ((hours >12) ? hours -12 :hours) LSP Telematika Indonesia
280
timeValue += ((minutes < 10) ? ":0" : ":") + minutes timeValue += ((seconds < 10) ? ":0" : ":") + seconds timeValue += (hours >= 12) ? " P.M." : " A.M." document.clock.face.value = timeValue; // you could replace the above with this // and have a clock on the status bar: // window.status = timeValue; timerID = setTimeout("showtime()",1000); timerRunning = true; } // Netscapes Clock - Stop -> </script> </HEAD> <BODY bgcolor="#ffffff" text="#000000" link="#0000ff" alink="#008000" vlink="800080" onLoad="startclock()"> <form name="clock" onSubmit="0"> <div align=right> <input type="text" name="face" size=12 value=""> </div> </form> </BODY> </HTML> Program tersebut menampilkan hasil sebagai berikut:
Gambar 6.1.5.1 Jam Dengan Javascript
Inti
dari
program
diatas
adalah
fungsi
showtime().
Fungsi
ini
menciptakan sebuah objek Date yang dipanggil dan mengambil nilai (melalui getHours, getMinutes, dan getSeconds) jam, menit, dan detik. Lalu fungsi ini menciptakan sebuah variabel bernama timeValue dan menyatakan nilai jam dalam string. timeValue diinterpretasikan oleh Javascript sebagai string walaupun jam berupa angka. Hal ini dikarenakan nilai pertama yang dinyatakan dalam timeValue merupakan tanda kutip kosong (). Perhatikan bahwa jika nilai jam lebih besar dari 12, nilai jam itu dikurangi dengan 12 menjadi notasi waktu 12-jam. Perhatikan juga bahwa jika nilai pada detik atau menit kurang dari 10, fungsi akan menambahkan nilai 0 di awal nilai tersebut untuk menjaga digit angka tetap sama, dan menghindari kebingungan antara 03 dan 30. Script ini berjalan pada fungsi showtime() setiap 1000 milidetik (tiap detik) untuk menampilkan waktu saat ini dalam format yang mudah diinterpretasi oleh pengguna. LSP Telematika Indonesia
281
6.2.3. Objek Math

Objek Math dapat dilihat sebagai pustaka fungsi yang diatur seperti objek dan digunakan untuk menyimpan metode yang melakukan beberapa fungsi matematis. Hampir semua metode Math berupa kelas dan mengembalikan suatu nilai.
Objek Math dalam Javascript melakukan perhitungan tertentu dengan menggunakan fungsi dari objek Math. Selain itu, objek Math menyediakan beberapa konstanta, seperti pi. Semua properti dan metode dari Math statik. Konstanta PI ditunjuk sebagai Math.PI dan fungsi dari sinus sebagai Math.sin(x), dimana x merupakan argumen 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 abs(x) acos(x) asin(x) Deskripsi Mengembalikan nilai absolut dari suatu bilangan Mengembalikan arckosinus dari suatu bilangan Mengembalikan arcsinus dari suatu bilangan
282
atan(x) atan2(y,x) ceil(x) cos(x) exp(x) floor(x) log(x) max(x,y) min(x,y) pow(x,y) random() round(x) sin(x) sqrt(x) tan(x) toSource() valueOf()
Mengembalikan arctangen dari x sebagai nilai bilangan antara -PI/2 dan PI/2 radian Mengembalikan sudut theta dari titik (x, y) sebagai nilai bilangan antara PI dan PI radian Mengembalikan nilai dari suatu bilangan yang dibulatkan ke atas menuju nilai integer terdekat Mengembalikan cosinus dari bilangan tertentu Mengembalikan nilai dari Ex Mengembalikan nilai dari suatu bilangan yang dibulatkan ke bawah menuju nilai integer terdekat Mengembalikan logaritma natural (basis E) sebagai suatu bilangan Mengembalikan suatu angka dengan mengambil nilai terbesar antara x dan y Mengembalikan suatu angka dengan mengambil nilai terkecil antara x dan y Mengembalikan nilai dari x pangkat y (xy) Mengembalikan angka acak antara 0 dan 1 Returns a random number between 0 and 1 Membulatkan angka menuju integer terdekat Rounds a number to the nearest integer Mengembalikan sinus dari suatu bilangan Returns the sine of a number Mengembalikan akar dari suatu bilangan Returns the square root of a number Mengembalikan nilai tangen dari suatu sudut Returns the tangent of an angle Menyatakan sebagai source code dari suatu objek Represents the source code of an object Mengembalikan nilai primitif dari objek Math
Beberapa properti dari objek Math dapat dilihat dalam tabel berikut. Tabel 6.2.4.2 : Properti Objek Math Property constructor E LN2 LN10 LOG2E LOG10E PI prototype SQRT1_2 SQRT2 Deskripsi Referensi untuk fungsi yang menciptakan objek Mengembalikan konstanta Euler (kurang lebih 2.718) Mengembalikan logaritma natural dari 2 (kurang lebih 0.693) Mengembalikan logaritma natural dari 10 (kurang lebih 2.302) Mengembalikan logaritma basis 2 dari E (kurang lebih 1.442) Mengembalikan logaritma basis 10 dari E (kurang lebih 0.434) Mengembalikan PI (kurang lebih 3.14159) Memperbolehkan untuk menambah properti dan metode ke dalam objek Mengembalikan akar dari 1/2 (kurang lebih 0.707) Mengembalikan akar dari 2 (kurang lebih 1.414)
283
Contoh penggunaan objek Math

a. Contoh berikut menggunakan metode round() dari objek Math untuk membulatkan suatu bilangan menuju integer terdekat:
document.write(Math.round(4.7))
Code diatas akan menampilkan hasil seperti berikut:
5 b. Operator juga dapat digunakan sebagai parameter pada objek Math. Contohnya dapat dilihat sebagai berikut:
var original; // membulatkan variabel original menjadi dua desimal var result=Math.round(original*100)/100 //menghasilkan 28.45
6.3. Objek Window

6.3.1 Pengenalan
Browser Object Model (BOM) menunjukkan deskripsi dari struktur untuk objek-objek yang berbasis browser/ web.
284
Gambar 6.3.1 : Browser Object Model (BOM) Seperti yang telah dijelaskan sebelumnya, bahwa objek adalah tempat untuk menyimpan, maka objek Window juga menyimpan objek lain. Pada gambar terlihat bahwa objek Window terletak pada tingkat paling atas dari BOM. Objek Window meliputi seluruh window browser, termasuk dokumen yang ditampilkan dalam window. Anggaplah objek Window sebagai kotak mainan dan objek-objek lain dalam hierarki BOM adalah mainan. Objek Dokumen, selain berlaku sebagai mainan, juga berlaku sebagai kotak mainan yang lebih kecil dari objek Window. Objek Dokumen menampung objek lain yang juga masih ditampung dalam objek Window. Javascript memungkinkan untuk menulis code yang bekerja di antara windows. Oleh karena windows tidak dapat dihubungkan dengan code HTML (tidak terdapat HTML tag untuk membuka window lain), maka dibutuhkan Javascript untuk menghubungkan antar windows. Cara window dapat berhubungan dengan Javasript adalah dengan menggunakan code Javascript dalam satu window untuk membuka window lain. Window yang dibuka oleh window lain dapat digunakan untuk membuat hierarki hubungan parent-child yang dapat menjalankan code di window yang berbeda. [ACA03].
Objek Window juga mempunyai beberapa properti, metode, dan event handler. a. Properti Properti merupakan suatu komponen atau bagian dari suatu objek. Jika mobil dianggap sebagai objek, maka properti dari mobil itu seperti radio atau ban. Properti seperti penampung data, hampir sama seperti variabel. Selain menjadi bagian dari objek, properti juga memberikan informasi mengenai objek. Perbedaan utama dengan variabel antara lain bahwa properti memberi informasi mengenai objek Window sedangkan variabel tidak memberi informasi mengenai objek Window. Sebuah objek menyimpan properti yang dapat diakses dari luar untuk digunakan dari keseluruhan script. Beberapa properti dari objek Window yang biasa digunakan dapat dilihat dalam tabel berikut:
285
Tabel 6.3.1 : Properties dari objek Window Properties closed Deskripsi Memeriksa apakah window yang dibuka sebelumnya telah ditutup. Mempunyai nilai Boolean, akan mengembalikan true jika window telah ditutup dan jika sebaliknya mengembalikan nilai false Menetapkan pesan untuk ditampilkan di status bar ketika tidak ada yang ditampilkan, seperti pesan selamat datang atau instruksi untuk pengunjung Menyimpan array dari semua frame pada window saat itu Menyimpan informasi dari URL yang dikunjungi oleh client dalam satu window Menentukan dimensi secara vertikal dari area isi window, dalam pixel Menentukan dimensi secara horisontal dari area isi window, dalam pixel Banyak frame dalam satu window (dalam Integer) Menampung informasi dari URL saat itu (dalam Object) Menyatakan location bar dari browser suatu window Menyatakan menu bar dari browser suatu window Menyimpan nama dari window Digunakan dalam pop up window. Jika window dibuka oleh pengguna, maka akan mengembalikan nilai null (maksudnya window tidak dibuka oleh suatu script) Menentukan dimensi secara vertical dari batas luar window, dalam pixel Menentukan dimensi secara horisontal dari batas luar window, dalam pixel Digunakan dalam frame, menunjuk pada frameset dari suatu window atau frame yang mengandung frame saat ini. Menyatakan personal bar (disebut juga directories bar) dari browser suatu window Menyatakan scroll bars dari browser suatu window Objek window saat ini Menyimpan nilai dari teks pada status bar dari browser window Menyatakan status bar dari browser suatu window Menyatakan tool bar dari browser suatu window Digunakan dengan frame. Menunjuk pada window yang paling atas pada frameset Objek window saat ini (sinonim dari properti self)
defaultStatus
frames[] history innerHeight innerWidth length location locationbar menubar name opener
outerHeight outerWidth parent
personalbar scrollbars self status statusbar toolbar top window
6.3.2 Metode
Metode adalah sebuah fungsi yang berhubungan dengan sebuah objek. Metode memberikan perintah kepada objek, seperti dapat LSP Telematika Indonesia
286
menyebabkan sebuah browser window membuka atau memilih teks. Jika parameter diberikan pada metode, seperti fungsi, parameter ditulis di dalam tanda kurung. Akan tetapi, tidak seperti fungsi, metode berlakuk seperti objek Window. Metode yang tersedia untuk objek Window dapat dilihat sebagai berikut: Tabel 6.3.2.1 : Methods dari objek Window Methods alert() back() blur() captureEvents() close() confirm() find() focus() forward() handleEvent() home() moveBy() Deskripsi Membuka popup window yang menampilkan pesan kepada pengunjung Mengulangi (undo) langkah terakhir pada frame apapun dalam window tingkat atas Memindahkan window ke background, di belakang window utama Menentukan window atau dokumen untuk menangkap semua events pada tipe tertentu Menutup windows Memberikan perintah untuk membuka window konfirmasi untuk pengunjung Menemukan string teks tertentu pada isi dari window tertentu Memindahkan window ke foreground, ke tingkat paling atas dari yang lain. Menampilkan URL selanjutnya yang terdapat pada daftar history Memanggil handler untuk event tertentu Mengembalikan browser ke URL tertentu yang bertindak sebagai home page dari pengguna Digunakan untuk memindahkan window ke lokasi baru dari layar. Window ini dipindahkan sejauh sejumlah pixel di dalam parameter pada method Digunakan untuk memindahkan window ke lokasi tertentu di dalam layar, berguna untuk menempatkan window baru ke lokasi tertentu pada layer Membuka window baru Mencetak isi dari window. Ketika dipanggil, metode ini akan membuka dialog box untuk mencetak print the contents of the current window. When it's called, it opens the browser's print dialog box Membuka popup window yang menampilkan prompt agar pengunjung memasukkan suatu informasi Menentukan window menjadi event yang ditangkap dari tipe tertentu, mengirim event pada objek pada hierarki event Mengubah ukuran window yang ada berdasarkan parameter yang ditetapkan
moveTo()
open() print()
prompt()
releaseEvents()
resizeBy()
287
resizeTo()
routeEvent() scroll() scrollBy() scrollTo()
setInterval() clearInterval() setTimeout() clearTimeout()
Mengubah ukuran window tertentu menjadi ukuran yang sesuai dengan parameter yang diberikan Melalui event yang diambil di sekitar hierarki event biasa Menggulung window ke koordinat tertentu Menentukan jarak scroll dokumen pada window (dalam pixel) Menetapkan dokumen pada kedudukan tertentu, dengan jumlah pixel yang ditentukan dalam parameter suatu metode Menjalankan suatu fungsi pada interval tertentu secara berulang kali Menghentikan ulangan (loop) waktu yang dimulai dari metode setInterval() diatas Menjalankan fungsi Javascript setelah beberapa waktu tertentu yang telah ditentukan Menghapus interval waktu dengan metode setTimeout(). Berjalan bersama dengan clearInterval Menghentikan download saat itu
stop()
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
288
Events onBlur onError
Deskripsi Dijalankan ketika elemen form atau window kehilangan fokus. Event handler ini berlawanan dengan onFocus Dijalankan ketika terjadi suatu error. Event handler ini digunakan untuk menyediakan respon lainnya ketika terjadi error. Dijalankan ketika window atau elemen form dipilih oleh pengunjung dengan cara memilih satu item, dengan menggunakan keyboard, atau manipulasi melalui script Digunakan untuk menjalankan script setelah halaman web telah selesai ditampilkan, termasuk menampilkan semua script, grafik, plugin, dan Java applet. Dijalankan ketika window diubah ukurannya (resize) Digunakan untuk menjalankan script sebelum meninggalkan halaman pada browser (ketika pengunjung akan meninggalkan halaman tersebut)
onFocus
onLoad
onResize onUnload
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.
289
Gambar 6.3.4.1 alert(), confirm(), and prompt() dialog boxes [FLA97]
Sebagai catatan, teks yang ditampilkan pada dialog box merupakan teks biasa, bukan teks dalam format HTML. Pengaturan format yang bisa dilakukan adalah dengan space, baris baru, dan beberapa karakter tanda baca. Javascript juga akan terus berjalan, ketika sebuah dialog alert() dikirimkan, akan tetapi metode confirm() dan prompt() akan menghentikan program Javascript yang sedang dijalankan dan terus menjalankan metode tersebut hingga pengguna menghentikan dialog box yang ditampilkan. Artinya, jika terdapat satu pop up window yang ditampilkan, code akan berhenti berjalan sampai pengguna memberikan respon pada input yang diminta.
Contoh berikut memperlihatkan beberapa penggunaan dari metode alert(), confirm(), dan prompt() [FLA97].
// // // // //
Berikut ini adalah fungsi yang menggunakan alert() that their form submission will take some time, and that they should be patient. It would be suitable for use in the onSubmit() event handler of an HTML form. Note that all formatting is done with spaces, newlines, and underscores.
function warn_on_submit() { alert("\n__________________________________________________\n\n" + " Your query is being submitted....\n" + LSP Telematika Indonesia
290
} // 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>");
"__________________________________________________\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.");
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. -->
291
<A HREF="sitemap.html" onMouseOver="status='Go to Site Map'; return true;"> Site Map </A>  <IMG SRC="images/imgmap1.gif" USEMAP="#map1"> <MAP NAME="map1"> <AREA COORDS="0,0,50,20" HREF="info.html" onMouseover="status='Visit our Information Center'; return true;"> <AREA COORDS="0,20,50,40" HREF="order.html" onMouseOver="status='Place an order'; return true;"> <AREA COORDS="0,40,50,60" HREF="help.html" onMouseOver="status='Get help fast!'; return true;"> </MAP> Pada contoh diatas, event handler onMouseOver() harus bernilai true. Hal ini menjelaskan bahwa browser tidak harus melakukan aksi default dari event, yaitu menampilkan URL dari link pada status bar. Jika event handler tidak bernilai true, browser akan melakukan overwrite pada pesan apapun yang ditampilkan handler pada status bar dalam URL sendiri. Ketika mouse pointer digerakkan di atas sebuah hyperlink, browser menampilkan URL dari link, dan menghapusnya ketika mouse bergerak keluar dari hyperlink. Hal ini sama ketika menggunakan event handler onMouseOver() untuk menentukan properti status Window, yaitu pesan akan ditampilkan ketika mouse berada di atas hyperlink, dan pesan menghilang ketika bergerak menjauh dari link. Pada versi Windows untuk Navigator, status bar akan dihapus secara otomatis pada saat menetapkan properti status dari event handler onMouseOver(). Untuk menghapus, dapat digunakan event handler onMouseOut(), seperti berikut:
<A HREF="sitemap.html" onMouseOver="status='Go to Site Map'; return true;" onMouseOut="status='';"> Site Map </A> Properti status digunakan untuk untuk menampilkan pesan singkat seperti contoh diatas. Untuk melakukan pesan yang tidak terlalu singkat pada status bar, seperti menampilkan pesan selamat datang pada pengunjung web page, dapat digunakan properti defaultStatus dari Window. Properti ini menentukan default teks yang ditampilkan di status LSP Telematika Indonesia
292
bar. Teks tersebut akan diubah sementara dengan URL, atau pesan singkat lain ketika mouse pointer berada di atas hyperlink atau tombol kendali browser, tetapi ketika mouse menjauh dari area tersebut default teks akan kembali ditampilkan.
6.3.6. Manipulasi Window

a. Membuka Window baru Window dibuka dengan menggunakan metode window.open(). Metode ini mempunyai empat parameter, yaitu: x URL dari halaman yang akan dibuka (wajib ada, walaupun hanya berupa string kosong) x x x 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 LSP Telematika Indonesia
293
dengan koma. Jika nilai yang mungkin untuk properti
adalah ya
atau tidak, maka kita dapat menyediakan kata kunci jika nilai yang diinginkan adalah ya. Tidak akan ada ruang kosong di dalam string. Jika properti lain ditentukan, semua properti ya/ tidak tidak ditentukan secara default dan harus dideklarasikan secara eksplisit.
Properti yang tersedia untuk menampilkan window baru antara lain: Tabel 6.3.6.1 : Properti Menampilkan Window Baru Properti height Nilai integer Deskripsi Tinggi eksternal dari sebuah window. Mengambil integer untuk menyatakan ukuran dari window dalam pixel. Untuk menghindari code jelek pada hidden window, sebuah window tidak dapat dibuat lebih kecil dari tinggi title bar ditambah window frame. Dan window tidak dapat dibuat tanpa title bar Panjang eksternal dari window. Mengambil integer yang menyatakan ukuran window dalam pixel. Untuk menghindari code jelek pada hidden window, panjang sebuah window tidak dapat ditentukan di bawah 100 pixel. Menyalin sejarah objek dari window pada window baru. Menampilkan tombol directory. Menampilkan location bar Menampilkan menu bar. Menampilkan status bar. Menampilkan toolbar. Apakah pengguna diperbolehkan untuk mengubah ukuran window. Untuk beberapa browser, walaupun dipilih no, pengguna masih dapat me-maximize ukuran window, tetapi tidak dapat mengubah ukuran dengan cara menyeret mouse pada frame-nya Apakah window dapat digulung (scrollable). Menentukan lokasi diukur dari atas posisi window, dalam pixel. Beberapa browser tidak memperbolehkan mengambil posisi yang keluar dari layar. Menentukan seberapa jauh lokasi diukur dari kiri layar dari posisi window, dalam pixel. Beberapa browser tidak memperbolehkan mengambil posisi yang keluar dari layar.
width
integer
copyHistory directories location menubar status toolbar resizeable
yes|no yes|no yes|no yes|no yes|no yes|no yes|no
scrollable top
yes|no integer
left
integer
294
b. Scripting antara Window Ketika menamakan sebuah window, nama itu dapat digunakan jika ingin menyatakan window tersebut, apakah ini benar? Tidak. Terkadang Window dapat ditunjuk dari namanya, terkadang tidak dapat. Contohnya code berikut tidak akan berjalan[ACA03]:
// -- bad code window.open('', 'win02'); win02.document.write(somevar);
Code diatas tidak akan berjalan karena nama yang dinyatakan itu merupakan properti dari window baru, bukan window yang sedang dibuka. Metode window.open membuka window baru dan mengembalikan nilai referensi pada objek window dari window baru tersebut. Dengan menyatakan referensi tersebut pada variabel, sebuah window dapat dinyatakan dari window yang membukanya. Contoh code yang dapat berjalan adalah seperti berikut ini:
// -- good code Win_02 = window.open('', 'win02'); Win_02.document.write(somevar);
Untuk arah lain, dari parent kembali ke child, lebih mudah. Objek Window mempunyai properti opener yang merupakan referensi kembali ke window yang dibuka oleh window saat ini. Windows yang dibuka oleh pengguna mempunyai properti opener dengan nilai null.
// a reference to a property of the parent window window.opener[get_val];

Dalam window, kita dapat menyatakan semua child window, dan seua child window dari parent window.
c. Menutup Window Window dapat ditutup dengan menggunakan window, seperti pada code berikut:
// close the current window window.close( ); LSP Telematika Indonesia
295
// close a child window windowname.close( ); // close the parent window window.opener.close( ); Javascript tidak digunakan untuk menutup window yang berisi dokumen dari server yang berbeda, atau dibuka oleh dokumen lain tanpa konfirmasi dari pengguna. Kecuali untuk parent window, Javascript tidak dapat digunakan untuk menutup window yang dibuka pengguna. Jika ingin memastikan bahwa window sudah terbuka sebelum berusaha untuk menutupnya, dapat dilakukan pengujian seperti berikut:
// menguji apakah terdapat sebuah window if (typeof(windowName) != "undefined") { } // menguji apakah window masih terbuka if (!(windowName.closed)) { } Baris kedua dari pengujian diatas dilakukan untuk melihat apakah terdapat suatu window. Sebuah window, atau variabel apapun, yang tidak ada akan mempunyai tipe undefined. Pengujian kedua dilakukan untuk melihat apakah properti dari window.closed telah ditetapkan menjadi true. Jika telah bernilai true, maka berarti window telah ditutup, objek hanya belum dibersihkan
d. Menggerakkan dan Mengubah Ukuran Window Objek Window juga mempunyai metode untuk menggerakkan dan mengubah ukuran dari window. Metode ini dapat berguna pada beberapa pengaplikasian DHTML. Properti yang digunakan untuk melakukan hal ini adalah window.resizeTo(w,h), window.resizeBy(w,h), window.moveTo(w,h), window.moveBy(w,h); dimana w merupakan lebar dan h merupakan tinggi dari window. Contoh penggunaan metode tersebut dapat dilihat dalam script berikut:
// mengubah ukuran window menjadi // lebar 200 pixel dan tinggi 100 LSP Telematika Indonesia
296
window.resizeTo(200, 100); // menambh 100 pixel ke lebar window window.resizeBy(100,0); // memidahkan window ke posisi // - 100 pixels ke kanan dari bagian kiri layar // - 50 pixels ke bawah dari bagian atas layar window.moveTo(100, 50): // memindahkan window sebanyak 25 pixel window.moveBy(0, -25);
6.4. Objek Dokumen

6.4.1. Menulis ke dokumen
Objek Dokumen menyatakan isi dari suatu window atau frame. Objek ini mempunyai properti yang menentukan informasi mengenai dokumen, seperti URL, tanggal terakhir dimodifikasi, URL dari dokumen yang dihubungkan, atau warna yang ditampilkan. Objek Dokumen juga mempunyai metode yang membolehkan program Javascript untuk menampilkan teks secara dinamis ke dalam dokumen dan membuat dokumen baru dari awal. Akhirnya, objek Dokumen juga menyediakan jumlah properti array yang menjelaskan informasi mengenai isi dokumen. Array ini menyimpan objek yang menyatakan link, anchor, HTML form, applet, dan data yang tersimpan pada dokumen [FLA97]. Salah satu fitur yang paling penting dari objek Dokumen adalah metode write(), yang men-generate isi halaman web secara dinamis dari program Javascript. Terdapat beberapa cara untuk menggunakan metode ini. Cara yang paling jelas untuk mengunakannya adalah menggunakannya pada script untuk menampilkan HTML dalam dokumen yang telah diurai (parsed). Perhatikan bahwa HTML hanya dapat ditampilkan pada dokumen ketika dokumen sedang diurai. Caranya adalah hanya dengan memanggil metode document.write() dalam tag <SCRIPT>, karena script ini dijalankan sebagai bagian dari proses penguraian dokumen. Jika metode yang dipanggil adalah metode document.write() dari event handler maka hasilnya akan membuat overwrite dokumen saat itu (termasuk event handler), bukannya menambahkan teks pada dokumen.
297
Walaupun tidak dapat menulis pada dokumen tertentu dari event handler, kita dapat menulis dokumen pada window lain atau frame. Teknik ini dapat berguna untuk web sites yang multiwindow atau multiframe. Contoh berikut menunjukkan bahwa code Javascript dalam satu frame pada multiframe site bisa menampilkan pesan di frame lain.
<SCRIPT> parent.frames[0].document.open(); parent.frames[0].document.write("<HRE>Hello from your sibling frame!<HR>"); parent.frames[0].document.close(); </SCRIPT> Pertama, metode open() dari objek Dokumen dipanggil, lalu panggil metode write() untuk menampilkan isi pada dokumen, dan terakhir panggil metode close() dari objek Dokumen untuk menunjukkan telah selesai. Langkah terakhir ini penting karena karena jika dokumen tidak ditutup, browser tidak akan menghentikan animasi document loading yang ditampilkan. Selain itu, browser akan membuat buffer HTML yang telah ditulis, dan browser tidak dapat menampilkan HTML tersebut hingga secara eksplisit dokumen telah ditutup dengan memanggil metode close(). Metode close() perlu dicantumkan dalam program, sedangkan metode open() tidak wajib digunakan (optional). Jika metode write() dipanggil pada dokumen yang telah ditutup, maka Javascript secara implisit membuka dokumen HTML baru, seperti saat memanggil metode open(). Hal ini menunjukkan apa yang terjadi ketika memanggil metode document.write() dari event handler di dalam dokumen yang sama, yaitu Javascript membuka dokumen baru. Akan tetapi, pada proses ini dokumen yang sedang dibuka beserta isinya, termasuk script dan event handler, disingkirkan. Pada Navigator 3.0, hal ini menyebabkan kesulitan penjalanan program dan pesan error yang tidak terduga. Sedangkan pada Navigator 2.0, hal ini dapat menyebabkan browser rusak (crash). Aturan yang terbaik adalah dokumen tidak seharusnya memanggil metode write() untuk dirinya sendiri dari event handler. Terdapat beberapa catatan mengenai metode write(). Pertama, banyak orang yang tidak menyadari bahwa metode write() dapat mempunyai lebih dari satu argumen. Saat melalui beberapa argumen, argumen tersebut akan digabungkan. Penulisan satu argumen seperti berikut: LSP Telematika Indonesia
298
document.write('Hello, ' + name + " Welcome to my home page!"); sama saja dengan:
document.write('Hello, ', name, " Welcome to my home page!"); Catatan kedua mengenai metode write() adalah bahwa objek Dokumen juga mendukung metode writeln(), yang identik sama seperti metode write() kecuali bahwa metode writeln() menambahkan baris baru saat menampilkan argumennya. Oleh karena HTML mengabaikan linebreak, karakter baris baru ini biasanya tidak membuat perbedaan, tetapi metode writeln() dapat nyaman digunakan saat bekerja pada dokumen non- HTML.
6.4.2. Dynamic Documents

Dynamic documents yang dibuat dengan menggunakan Javascript menyediakan semua fungsi dari dokumen statis yang ditulis dalam HTML. Jika dibuat dalam bentuk HTML, kita dapat membuatnya langsung pada script dokumen. Faktanya, seluruh dokumen dapat ditulis dalam sebuah script.
6.4.3. Flow control

Setelah mengenal variabel dan operator, dapat menentukan variabel dan memanipulasinya. Jalur umum dari program dapat diubah, hal ini disebut sebagai alur program. Alur dari program dapat diatur dengan menggunakan Flow Control. Terdapat dua tipe dasar dari flow control, yaitu decision types dan loop types. Decision types mengubah alur berdasarkan suatu kondisi. Sedangkan loop type akan melakukan aksi kontinu untuk melakukan sesuatu. Terdapat beberapa flow control yang dapat dilihat pada tabel berikut. Tabel 6.4.3.1 : Flow Control if if/else switch Makes a decision based on a condition if/else As if, but with an alternative clause Multi-if statement
299
for for/in while do/while break
An iterative loop Iterates through the properties of an object Performs code while a condition is true Performs code, and then checks for the condition being true 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>
300
Tags
<frameset> pada
menentukan layar. Tags
bagaimana ini
frame
dirancang atribut
untuk untuk
ditampilkan bagaimana bagaiman
mempunyai layar, layar. dan
dua rows
merancang hal tersebut, yaitu cols dan rows. Atribut cols menentukan membagi membagi kolom baris ke dalam dalam menentukan atribut Masing-masing
menentukan lebar dari setiap kolom atau tinggi dari setiap baris yang diciptakan. Ukuran ini dapat ditentukan dalam angka, yang menyatakan pixel, sebagai ukuran untuk layar, atau menggunakan wild card (tanda asterisk - *) untuk menandai penggunaan ruang kosong yang tersisa. Untuk dokumen diatas, terdapat tiga objek Window. Window tingkat atas dimana dokumen frameset disimpan. Lalu ada dua frame lain, masingmasing dengan objek Window yang sendiri, yang merupakan anak dari window tingkat atas. Dari tingkat atas, dua window lain dapat ditampung dalam array frames[]. Dan dari tingkat atas, window tersebut dapat dipanggil dari posisi index masing-masing, seperti window.frames[0] dan window.frames[1], atau dipanggil dari nama atribut mereka, seperti window.frame1 dan window.frame2. Biasanya frame tidak dinyatakan dari window tingkat atas, tetapi dari dalam frame itu sendiri, atau dalam dokumen yang menyimpan frame tersebut. Misalnya, satu frame dapat berisi sebuah menu yang melakukan aksi tertentu pada dokumen di window lain ketika terdapat pilihan yang harus dipilih. Faktanya, setiap code dalam dokumen itu yang berada dalam panel frame mengira bahwa objek Window untuk frame tersebut adalah objek Window untuk panel itu, bukan objek Window teratas untuk semua kumpulan frame. Jadi, objek Window adalah objek global, sehingga setiap frame mempunyai objek Window masing-masing.
6.5.2. Script dengan Frame

Untuk Javascript, setiap frame diperlakukan seperti window yang berbeda. Setiap frame mempunyai objek Window-nya sendiri. Javascript mempunyai hubungan antara objek Window dari frame, menciptakan sebuah hierarki dari objek Window. Maing-masing frame disimpan sebagai elemen pada array frames[] dari objek Window pada parent window untuk frame itu. Isi dari setiap elemen dari array frames[] merupakan objek Window untuk panel frame.
301
a. Parent dan top Objek Window mempunyai beberapa properti yang dirancang khusus untuk menangani kondisi yang memerlukan pengaturan hierarki dari window. Inilah yang disebut sebagai top dan parent. window.parent menunjuk pada objek Window dari parent window. Jadi untuk mengubah sesuatu pada frame2 dengan menggunakan code pada frame1, digunakan code seperti berikut: window.parent.frame2.someElement window.top merupakan referensi untuk objek Window pada elemen top window pada hierarki window. jika mempunyai beberapa tingkat dari nested frame, hierarki dari frameset tingkat atas dapat didapatkan. Jika tidak, perlu mengulangi pemanggilan properi parent beberapa kali untuk keluar dari code yang berisi suatu frame, contoh script-nya seperti berikut: window.parent.parent.parent.otherframe.someElement Jika ingin mencoba frame yang mempunyai beberapa tingkat pada hierarki, perlu ditentukan nama atau posisi array frames[] dari setiap objek Window, seperti contoh berikut: window.parent.fLeft.fBottom.someElement window.parent.frames[0].frames[2].someElement
Keuntungan untuk dapat mengakses antara frame yang satu dengan frame lain merupakan kemampuan sederhana agar script dapat berinteraksi frame lain. Hal ini memudahkan pembuatan struktur dari code dengan melibatkan modul dari script. Contohnya, dengan meletakkan script yang biasa digunakan oleh semua halaman di dokumen frameset tingkat atas, yang perlu dilakukan hanyalah mencantumkan (include) script tersebut sekali, di satu tempat, dan semua halaman mengetahui tempat script tersebut. Oleh karena elemen objek tree dapat memidahkan variabel, script dapat dikelompokkan, dengan memindahkan nama frame, code pun dapat digunakan.
302
function doSomething(frameName) { frameName.status = 'Are you talking to me?'; } [ ... ] <input type="button" value="Click Me" onclick="doSomething(window.parent.frame2);" />
b. Menghapus frame Hal lainnya yang dapat dilakukan dengan Javascript adalah dengan membuat penghenti frame. Code ini dapat diihat sebagai berikut:
if (window.location.href != window.top.location.href) { window.top.location.replace(window.location.href); }
Dengan kata lain, jika URL untuk dokumen saat ini tidak sama dengan URL pada hierarki window tingkat atas, kemudian URL dari objek Window tingkat atas diubah dengan URL dari dokumen sekarang. Jika telah berada di tingkat atas, kemudian properti top akan menunjuk pada objek Window saat ini dan dua nilai akan bernilai sama. Hal ini juga dapat dilakukan untuk arah lain jika ingin memastikan bahwa dokumen selalu terjadi pada frame set.
if (window.location.href == window.top.location.href) { window.top.location.replace('mainframe.html'); }
c. Inline Frame Browser yang terbaru juga memperbolehkan tag <iframe> untuk menentukan inline frame. Aturan yang sama untuk menyatakan frame digunakan pada inline frame sama seperti frame yang biasa. Perbedaannya hanya pada window tingkat atas berisi dokumen HTML normal, bukan dokumen frameset.
303
6.6. Validasi Data untuk Form

6.6.1. Objek Form
Objek Javascript Form menggambarkan form pada HTML. Form biasanya digunakan sebagai elemen dari array forms[], yang merupakan properti dari objek Dokumen. Form muncul dalam array dengan urutan seperti pada dokumen. Jadi document.forms[0] menunjuk pada form pertama pada dokumen, dan form terakhir di dokumen ditunjuk dengan: document.forms[document.forms.length] Properti yang paling menarik dari objek Form adalah elements[] sebagai array, yang menampung objek Javascript yang menyatakan bermacammacam elemen input dari form. Jadi, document.forms[1].elements[2] menunjuk pada elemen ketiga dari form kedua pada dokumen di window. Properti lain dari objek Form digunakan untuk mengendalikan bagaimana data pada form diserahkan ke web server, dan dimana hasilnya akan ditampilkan, dan properti ini hanya berguna ketika form akan diserahkan ke CGI script. Objek Form pada Javascript mempunyai dua metode, yaitu submit() dan reset() untuk mengirim nilai pada form dan me-reset nilai form. Untuk melengkapi kedua metode itu, disediakan pula event handler berupa onSubmit dan onReset. Kedua metode ini memungkinkan program Javascript melakukan konfirmasi pada saat reset atau pengiriman data pada form. Contoh script berikut memperlihatkan konfirmasi yang dilakukan oleh event handler pada saat akan melakukan reset (sesuai untuk Navigator 3.0) [CJR00]:
<FORM... onReset="return confirm('Really erase ALL data and start over?')" >
6.6.2. Pendekatan Umum

Objek Form mempunyai properti elements[], yang merupakan array dari objek Javascript yang menyatakan elemen input yang tercantum pada form. Terdapat beberapa elemen form pada HTML dan sesuai dengan objek Javascript. Daftar elemen form pada HTML dapat dilihat pada tabel berikut. LSP Telematika Indonesia
304
Tabel 6.6.2.1 : Elemen Form pada HTML Objek Button Checkbox HTML Tag <INPUT TYPE=button> Properti type "button" Deskripsi dan Events Sebuah push-button; onClick(). Sebuah toggle-button tanpa perilaku radio-button; onClick(). Sebuah field untuk input untuk memasukkan nama dari file untuk di-upload ke web server; onChange(). Data dikirim bersama dengan form tetapi tidak terlihat oleh pengguna; tidak ada event handler. Sebuah item dalam objek Select; event handler dari objek Select, bukan objek Option sendiri. Sebuah input field untuk memasukkan password, yaitu karakter dengan menggunakan tipe yang tidak memperlihatkan nilai aslinya; onChange(). Toggle-button dengan perilaku radio, yaitu hanya satu pilihan yang dapat dipilih; onClick(). Sebuah push-button yang me-reset suatu form; onClick().
<INPUT "checkbox" TYPE=checkbox>
<INPUT FileUpload TYPE=file>
"file"
Hidden
<INPUT TYPE=hidden>
"hidden"
Option
<OPTION>
none
Password
<INPUT "password" TYPE=password>
Radio
<INPUT TYPE=radio> <INPUT TYPE=reset>
"radio"
Reset
"reset"
Select
<SELECT>
Daftar atau drop-down menu dari salah satu pilihan yang "select-one" dapat dipilih; onChange(). "selectmultiple" "submit" Daftar dari banyak pilihan yang dapat dipilih; onChange(). Sebuah push-button untuk mengirim form; onClick(). Sebuah text entry field dengan satu baris; onChange(). Text entry field dengan banyak baris; onChange().
Select
<SELECT MULTIPLE> <INPUT TYPE=submit> <INPUT TYPE=text> <TEXTAREA>
Submit
Text
"text"
Textarea
"textarea"
305
Salah satu persamaan yang jelas adalah bahwa (hampir) semua elemen objek Form menentukan event handler yang dipanggil ketika pengguna berinteraksi dengan form tersebut. Event handler yang penting biasanya onClick() atau onChange(), tergantung pada tipe objek. Persamaan lain antara elemen objek form , pada Navigator 3.0, adalah elemen tersebut mempunyai properti type untuk mengidentifikasikan tipe elemen. Kolom properti type (kolom ketiga) pada tabel diatas menjelaskan nilai dari properti ini untuk setiap objek. Oleh karena array elements[] dari objek Form mengandung beberapa tipe dari elemen objek Form, properti type memperbolehkan untuk melakukan loop melalui array elements[] dan dijalankan di objek form. Catat bahwa Internet Explorer 3.0 tidak mendukung properti type. Semua elemen objek form juga mempunyai (di Navigator 3.0 dan Navigator 2.0) properti form. Properti ini menyediakan cara yang berguna untuk objek form untuk menunjuk ke objek form lain dari event handler. Dalam event handler untuk elemen form, kata this menunjuk pada elemen objek itu sendiri.Hal ini berarti this.form selalu menunjuk pada form yang berisi. Oleh karena itu, event handler lain pada form dapat menunjuk pada objek yang bersaudara di form yang sama dengan ekspresi seperti berikut:
this.form.elements[4] Dua properti yang digunakan oleh semua elemen objek form adalah name dan value. Ketika form dikirim, input data dari pengguna dikirimkan ke web server dengan pasangan name/value di form, dan properti ini menentukan nama untuk setiap pengiriman data elemen dan nilai yang dikirimkan ke elemen tersebut. Properti name merupakan read-only string, dan nilainya diperjelas dengan atribut name dari HTML tag yang menentukan elemen form. Atribut ini tidak wajib digunakan, tetapi data dari sebuah elemen tidak dapat dikirim kecuali sudah ditentukan. Properti value hampir sama seperti properti name. Properti ini
merupakan string read/write untuk semua objek elemen form, dan berisi data yang dikirimkan dalam jaringan ketika form disimpan. Nilai awal dari LSP Telematika Indonesia
306
properti value biasanya ditentukan oleh atribut value dari HTML tag yang menjelaskan elemen form. Properti value berisi nilai string untuk semua elemen form. Oleh karena data konversi secara otomatis dilakukan oleh Navigator, sebuah nilai atau objek dapat dinyatakan dalam semua tipe properti type dan akan diubah secara otomatis menjadi string. Sayangnya, batasan pada Internet Explorer 3.0 tidak memperbolehkan objek untuk dinyatakan menjadi properti value, sehingga secara eksplisit objek harus diubah menjadi string dahulu. Contoh code berikut tidak dapat dijalankan pada IE 3.0:
today = new Date(); document.myform.date.value = today; Cara termudah untuk mengubah objek today menjadi string adalah dengan menambahkan string kosong. Code berikut dapat dijalankan pada IE 3.0:
today = new Date(); document.myform.date.value = "" + today; Tag <FORM> juga mempunyai atribut name yang dapat ditentukan. Atribut ini tidak berhubungan dengan pengiriman form, dan ditemukan untuk kenyamanan programmer Javascript. Jika atribut name didefinisikan di tag <FORM>, ketika objek Form diciptakan untuk form tersebut, atribut akan disimpan sebagai elemen dari array forms[] untuk objek Dokumen, seperti biasa, dan juga akan disimpan sebagai properti pribadi dari objek Dokumen. Nama dari properti yang baru didefinisikan ini adalah nama dari atribut name. Jadi sebuah form dengan HTML dapat didefinisikan seperti berikut:
<FORM NAME="questionnaire"> ... </FORM> Kemudian form tersebut dapat diyatakan sebagai:
document.questionnaire
307
Sering juga, pernyataan diatas digunakan dengan notasi array seperti berikut:
document.forms[2] Catat bahwa tag <IMG>, <APPLET>, dan <EMBED> juga mempunyai atribut name yang mempunyai cara kerja yang sama dengan atribut name dari <FORM>. Dengan form, cara penamaan ini dapat dilakukan dengan lebih jauh, karena semua elemen yang disimpan dalam form mempunyai atribut name. Ketika memberikan atribut name pada elemen form, properti baru dari objek Form untuk menunjuk pada elemen form dapat diciptakan. Nama dari properti ini merupakan nilai dari atribut. Sehingga elemen bernama zipcode pada form address dapat ditunjuk sebagai: document.address.zipcode Pada form HTML yang menggunakan elemen Checkbox dan Radio, biasa digunakan kumpulan dari elemen yang berhubungan dengan nama yang sama. Sebagai contoh, jika form berisi banyak Radio button yang memperbolehkan pengguna mengindikasikan favourite web browser pengguna, maka setiap tombol dapat diberi nama favourite. Properti value dari satu tombol dapat berupa nn, dan nilai dari tombol lain berupa ie. Ketika form dikirim, string akan dikirim untuk mengindikasikan pilihan pengguna. Menggunakan nama yang sama untuk beberapa elemen tidak merupakan masalah untuk kasus ini karena hanya satu dari elemen tersebut yang dapat dipilih pada satu waktu, jadi hanya satu nilai yang dapat dikirim dengan nama tersebut.
Ketika lebih dari satu elemen pada form mempunyai atribut name yang sama, Javascript menempatkan elemen tersebut menjadi array dengan menggunakan nama tertentu. Jadi, objek Radio pada contoh diatas merupakan bagian dari form yang bernama questionnaire, dan dapat ditunjuk dengan ekspresi seperti berikut:
document.questionnaire.favorite[0] document.questionnaire.favorite[1]
308
6.6.3.
Pengujian untuk Fields Tertentu

Field yang dibutuhkan (required field) pada suatu form merupaka field yang HARUS mempunyai suatu isi sebelum form diproses. Jika form merupakan form pemesanan, informasi yang sebagian-sebagian saja tidak berguna. Code berikut menunjukkan contoh suatu required field, yaitu field nama harus diisi:
<HTML> <HEAD> <TITLE>Required Fields</TITLE> <SCRIPT> function validate() { mNv=mainform.Name.value; if (mNv=='') { alert('Your name is a required field. Please try again.'); event.returnValue=false; } if (!(mainform.Sex[0].checked || mainform.Sex[1].checked)) { alert('Your sex is a required field. Please try again.'); event.returnValue=false; } } </SCRIPT> </HEAD> <BODY> <FORM NAME="mainform" ACTION="http://yourdomainhere/cgibin/post-query" METHOD="post" onsubmit="validate();"> <INPUT TYPE="TEXT" NAME="Name" >Please enter your name (required) <BR> <INPUT TYPE="RADIO" NAME="Sex" VALUE="Male">Male <INPUT TYPE="RADIO" NAME="Sex" VALUE="Female">Female <BR> <INPUT TYPE="SUBMIT"> </FORM> </BODY> </HTML> Pada form terdapat event handler onsubmit yang memanggil fungsi validate(). Event handler ini memastikan ketika mengirimkan form, fungsi Javascript validate() akan dijalankan untuk memeriksa apakah terdapat field yang kosong. Fungsi validate() menyimpan pekerjaan untuk memeriksa elemen form individual dan melakukan pemeriksaan terhadap input yang illegal. Untuk form diatas, input yang illegal yang dimaksud adalah tidak ada nama atau jenis kelamin pada form. Illegal berarti jika terdapat form yang mempunyai nilai kosong dan tidak memenuhi kelengkapan data yang penting. Pada kasus ini, fungsi
309
validate() memeriksa field Name yang kosong dan pilihan radio button Sex.
Sub bagian pertama dari fungsi validate() memeriksa field Name pada form yang bernama mainform. Jika field kosong ketika form dikirim, kemudian dideteksi dan menolak form. mNv=mainform.Name.value; if (mNv=='') { alert('Your name is a required field. Please try again.'); event.returnValue=false; } Menetapkan properti dari returnValue untuk memberikan nilai false untuk menolak form. Aksi ini dibatalkan pada event onsubmit, dan mencegah event dari mencapai mekanisme yang sebenarnya yaitu mengirim form melalui internet. Sub bagian kedua memeriksa apakah radio box Sex telah dipilih. Jika tidak ada radio box dari Sex yang dipilih maka viewer dilaporkan untuk menolak form. if (!(mainform.Sex[0].checked || mainform.Sex[1].checked)) { alert('Your sex is a required field. Please try again.'); event.returnValue=false; } Kita dapat melihat apakah suatu radio box telah dipilih dengan melihat properti checked. Metode mainform.Sex[0].checked bernilai true jika radio box dari Sex dipilih. Logika untuk code berjalan jika Male atau female dipilih, kemudian (mainform.Sex[0].checked || mainform.Sex[1].checked) bernilai true. Jika tidak ada yang dipilih maka ekpresi ini bernilai false. Situasi ini merupakan satu-satunya situasi dimana ekpresi bernilai false, karena sifat dari pernyataan || (or).
6.6.4.
Validasi data Numerik

Banyak form yang menyangkut matematika sehingga input numerik harus dibuktikan sebelum dilanjutkan. Fungsi built-in Javascript Number() dan metode internal (seperti isNaN(), parseInt(), parseFloat(), dan lain-lain) dapat digunakan untuk validasi angka desimal. Akan tetapi, fungsi dan metode tersebut kurang lengkap untuk sistem radix dan
310
kumpulan fungsi harus dikumpulkan sendiri untuk ditempelkan (paste) pada proyek. Salah satu solusi untuk validasi dengan brute force adalah dengan cara menguji setiap karakter dari string entry untuk nilai yang diijinkan. Integer dalam binary dibatasi pada angka 0 dan 1. Bilangan oktal dapat mempunyai bilangan 0 hingga 7. Code heksadesimal dapat mengandung 0 hingga 9 digit angka dan huruf A hingga F (baik huruf kecil maupun huruf besar). Contoh berikut menunjukkan pemeriksa entry untuk heksadesimal. Dengan perubahan karakter yang sesuai dan diperbolehkan dan juga kontrol panjang (tetap atau maksimum) contoh berikut dapat digunakan untuk banyak situasi validasi. Langkah-langkah yang dilakukan antara lain: 1. Pastikan ada sesuatu yang diperiksa 2. Oleh karena huruf besar cukup sering digunakan, pastikan untuk mengubah string menjadi huruf besar. Atau dapat juga dimasukkan huruf besar dan huruf kecil pada pembacaan karakter. 3. Terakhir lakukan pemeriksaan setiap karakter sederhana untuk karakter yang valid. Pada pengujian ini, string yang tidak valid atau kosong akan menyebabkan penampilan pesan error dan mengembalikan nilai false. Jika semua string dapat melewati pengujian, maka pesan ok! akan ditampilkan dan mengembalikan nilai true. Fungsi validasi ini sering dituliskan tanpa menampilkan pesan, dan memberikan pada fungsi panggil. Satu variasi terakhir menerima parameter kedua untuk menyatakan apakah pesan akan ditampilkan atau tidak.
function isHex(entry) { validChar='0123456789ABCDEF'; // karakter dalam hex strlen=entry.length; // panjang string yang diuji if (strlen < 1) { alert('Enter Something!'); return false;} // tidak ada pengecekan! entry=entry.toUpperCase(); // jika ada huruf kecil // Scan untuk menemukan illegal karakter for (i=0; i < strlen; i++ ) { if (validChar.indexOf(entry.charAt(i)) < 0) { alert("Entry must be in hexadecimal format!"); LSP Telematika Indonesia
311
return false; } } // akhir dari scanning loop alert('ok!'); return true; }
Setelah mengetahui bahwa variabel berbentuk angka, kemudian gunakan metode objek Math parseInt() dan parseFloat() untuk mengubah variable menjadi tipe tertentu jika diperlukan. Menggunakan parseInt() dan parseFloat() dapat menyebabkan masalah yang tidak diperkirakan karena dapat memotong nonnumeric string dan menghasilkan angka sebagai jawaban. Fungsi isNaN() adalah fungsi untuk menguji bilangan, dibatasi untuk nilai desimal saja.
6.6.5.
Validating String Data

a. Pengujian untuk Huruf saja Fungsi berikut akan membuktikan apakah string hanya mengandung huruf. Pada fungsi ini digunakan regular expression dengan negating operator untuk menentukan apakah terdapat suatu karakter di string tidak sesuai dengan pola yang telah ditentukan. Jika terdapat karakter dalam variabel yang tidak merupakan huruf, fungsi isLetters() akan bernilai false.
<?PHP function isLetters($element) { return !preg_match ("/[^A-z]/", $element); } ?> b. Pengujian untuk Panjang dari suatu String Fungsi berikut akan memeriksa panjang dari string dan menghasilkan nilai false jika panjang tidak dalam rentang tertentu yang telah ditentukan. Untuk tugas ini, akan digunakan fungsi strlen() untuk menentukan panjang dari string dan kemudian membandingkannya dengan panjang maksimum dan minimum.
<?PHP function checkLength($string, $min, $max) { $length = strlen ($string); LSP Telematika Indonesia
312
if (($length < $min) || ($length > $max)) { return FALSE; } else { return TRUE; } } ?>
Soal Latihan
1. Nama lain literal dalam javascript adalah : a. boolean b. array c. constant d. variabel 2. Operator apa yang menggunakan representasi binari : a. bitwise b. assignment c. comparison d. assignment 3. Kegunaan dari method confirm() dari objek window adalah : a. Mengulangi (undo) langkah terakhir pada frame apapun dalam window tingkat atas b. Memberikan perintah untuk membuka window konfirmasi untuk pengunjung c. Membuka popup window yang menampilkan pesan kepada pengunjung d. Menemukan string teks tertentu pada isi dari window tertentu
Soal Praktek
4. Buatlah kode Javascript yang menampilkan pop-up window bertuliskan saya adalah pop up. Berikut ini adalah tampilannya.
313
Jika tombol pop_up dipilih maka akan muncul pop up seperti di bawah ini:
5. Buatlah kode Javascript yang menampilkan pertanyaan nama dan setelah diisi maka akan ditampilkan jawaban dari isian tadi. Berikut ini adalah tampilannya.
Jika tombol input button dipilih maka akan keluar tampilan :
314
Setelah mengisi pertanyaan dan memilih tombol OK, maka akan keluar tampilan :
Jawaban Soal
Bab 1:
1. 2. 3. 4. a b c Kode :
315
<html> <body> <h4>Disc bullets list:</h4> <ul type="disc"> <li>Apel</li> <li>Pisang</li> <li>Lemon</li> <li>Jeruk</li> </ul> <h4>Circle bullets list:</h4> <ul type="circle"> <li>Apel</li> <li>Pisang</li> <li>Lemon</li> <li>Jeruk</li> </ul> <h4>Square bullets list:</h4> <ul type="square"> <li>Apel</li> <li>Pisang</li> <li>Lemon</li> <li>Jeruk</li>> </ul> </body> </html>
5. Kode : <html> <head> <title>Customization</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-.style1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; font-size: 10px; color: #996633; } .style2 {font-family: Verdana, Arial, Helvetica, sans-serif} .style4 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; } .style5 { font-size: 10px; color: #663333; font-weight: bold; } .style6 {color: #0000CC} body { background-color: #FFCCFF; } LSP Telematika Indonesia
316
.style7 { font-size: 12px; color: #FF0000; font-weight: bold; } .style8 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #FF0000; font-weight: bold; } .style9 {color: #663333} --> </style> </head> <body> <p> </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> LSP Telematika Indonesia
317
</div></td> <td><div align="justify"></div></td> <td valign="top"><div align="justify" class="style9"><strong><span class="style4">white dog that waiting for a friend. Thid dog is special because it makes friend to any animal. Why...makes friend just with human..its says? How about making this dog very close to you by having it in your clothes. You can get it only by paying $37.00. <a href="link.htm">Order now</a>. Limited Version. </span></strong></div></td> </tr> <tr> <td colspan="3"> </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
318
Bab 3:
1. b 2. a 3. a 4. Kode : <? if(isset($_POST['Submit'])) { $op1 = $_POST['op1']; $op2 = $_POST['op2']; $hsl = $op1 + $op2; ?> <html> <head> <title>Menjumlahkan</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <h1>Penjumlahan 2 (Dua) Bilangan </h1> <form method="post" action="Penjumlahan.php"> <table width="70%" border="1" cellspacing="0" cellpadding="0"> <tr> <td colspan="5"> </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'])) { LSP Telematika Indonesia }
319
$conn = mysql_connect("localhost", "", "") or die(mysql_error()); $db = mysql_select_db("DML", $conn) or die(mysql_error()); $nim = $_POST['NIM']; $nama = $_POST['Nama']; $jurusan = $_POST['Jurusan']; $sql = "INSERT INTO tbl_mhs(nim, nama, jurusan) VALUES('$nim', '$nama', '$jurusan')"; mysql_query($sql, $conn); echo "<h3>Data Mahasiswa Baru Telah Sukses Dimasukkan</h3>"; } ?> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <h1>Menambah Data Mahasiswa Baru</h1> <form action="form.php" method="POST"> <table width="54%" border="0" cellspacing="0" cellpadding="5"> <tr> <td width="33%" scope="col"><div align="center">NIM </th> </div> <td width="9%" scope="col"> <div align="center">: </div> <td width="58%" scope="col"><div align="center"> <input type="text" name="NIM"> </div> </tr> <tr> <td><div align="center">Nama</div></td> <td><div align="center">:</div></td> <td><div align="center"> <input type="text" name="Nama"> </div></td> </tr> <tr> <td><div align="center">Jurusan</div></td> <td><div align="center">:</div></td> <td><div align="center"> <input type="text" name="Jurusan"> </div></td> </tr> <tr> <td> </td> <td> </td> <td><input type="submit" name="Submit" value="Tambah"></td> </tr> </table> LSP Telematika Indonesia
320
</form> </body> </html>
Bab 4: 1. e 2. c 3. d 4. Kode : import import import import import javax.swing.*; javax.swing.border.*; java.awt.event.*; java.awt.*; java.util.*;
public class Test1 extends JFrame { public static void main(String args[]) { JFrame.setDefaultLookAndFeelDecorated(true); JFrame frame = new Tugas_DAA(); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.show(); } public Test1() { super("Printing Neatly"); panelButton = new JPanel(); paneltext = new JPanel(); textInput = new JTextArea(); textOutput = new JTextArea(); scrollInput = new JScrollPane(textInput); scrollOutput = new JScrollPane(textOutput); scrollInput.setBorder( new TitledBorder(null, "input", javax.swing.border.TitledBorder.DEFAULT_JUSTIFICATION, javax.swing.border.TitledBorder.DEFAULT_POSITION, new Font("Arial Black", 0, 11))); scrollOutput.setBorder( new TitledBorder(null, "print", javax.swing.border.TitledBorder.DEFAULT_JUSTIFICATION, javax.swing.border.TitledBorder.DEFAULT_POSITION, new Font("Arial Black", 0, 11))); panelButton.setSize(this.getWidth(), 0); tombolOpen = new JButton("Open"); tombolReset = new JButton("Reset"); tombolExit = new JButton("Exit"); tombolPrint = new JButton("Print");
321
paneltext.setLayout( new GridLayout(2,1) ); paneltext.add(scrollInput); paneltext.add(scrollOutput); textOutput.setEditable(false); panelButton.setLayout(new GridLayout(1,4)); panelButton.add(tombolOpen); panelButton.add(tombolReset); panelButton.add(tombolPrint); panelButton.add(tombolExit); addWindowListener(new WindowAdapter() { public void windowClosing(WindowEvent evt) { exitForm(evt); } }); tombolOpen.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent evt) { } }); tombolPrint.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent evt) { } }); tombolReset.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent evt) { } }); tombolExit.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent evt) { } }); Container container = getContentPane(); container.add(paneltext, "Center"); container.add(panelButton, "South"); setSize(300,300); } private void exitForm(WindowEvent evt) { System.exit(1); } private JPanel panelButton, paneltext; private JButton tombolOpen, tombolReset, tombolExit, tombolPrint; private JTextArea textInput, textOutput; LSP Telematika Indonesia
322
private JLabel labelInput, labelOutput; private JScrollPane scrollInput, scrollOutput; 5. Kode : class Sorting { public static void main(String[] args) { int awal[] = {4,6,1,2,9,7,0,8,3}; int temp = 0; System.out.println("Kondisi awal : "); for (int i=0; i<awal.length; i++) { System.out.print(awal[i]+" "); } System.out.println(); for (int i=0; i<awal.length; i++) { for (int j=0; j<awal.length-1; j++) { if (awal[i] < awal[j]) { temp = awal[i]; awal[i] = awal[j]; awal[j] = temp; } } } System.out.println("\nKondisi akhir : "); for (int i=0; i<awal.length; i++) { System.out.print(awal[i]+" "); } } }
Bab 5: 1. D 2. B 3. A 4. Kode : <% Response.ContentType="text/html" %> <html> <body> <p>This is some text</p> LSP Telematika Indonesia
323
</body> </html> 5. Kode : Response.Cookies("userName").Value = "mike" Response.Cookies("userName").Expires = DateTime.Now.AddDays(1) Dim myCookie As New HttpCookie("lastVisit") myCookie.Value = DateTime.Now.ToString myCookie.Expires = DateTime.Now.AddDays(1) Response.Cookies.Add(myCookie) Bab 6: 1. c 2. a. 3. b TUGAS PRAKTEK : 4. Kode <html> <head> <script type="text/javascript"> function disp_alert() { alert("Saya adalah pop up!!") } </script> </head> <body> <form> <input type="button" onclick="disp_alert()" value="pop_up"> </form> </body> </html>
5. Kode <html> <head> <script type="text/javascript"> function disp_prompt() { var name=prompt("Masukkan Nama Anda","") if (name!=null && name!="") { document.write("Hai " + name + "! Bagaimana kabar anda hari ini?") } } </script> LSP Telematika Indonesia
324
</head> <body> <form> <input type="button" onclick="disp_prompt()" value="Input Button"> </form> </body> </html>
325
Daftar Pustaka
1) www.htmlcodetutorial.com 2) www.w3schools.com/html 3) www.javascript.com 4) www.javascript.internet.com 5) www.java.sun.com 6) www.microsoft.com 7) www.php.org 8) www.widodo.com 9) Deithel, Java How To Program, 5th ed, 2005 10) Widodo Budiharto, Sistem Informasi Akademik berbasis VB .NET 2005, Andi 1 Offset Yogyakarta, 2006. 11) Widodo Budiharto, Panduan Lengkap Pemrograman J2EE, Andi Offset Yogyakarta, 2005 12) Core JavaScript Reference 1.5. 2000 13) Flannagan, David. Java Script - The Definitive Guide, 2nd Edition. O'Reilly & Associates. January 1997. 14) Powell, Thomas A. HTML: The Complete Reference, Third edition. California: Osborne/ McGraw-Hill. 2001. 15) http://www.w3school.com 16) Kantor, Peter L. http://academ.hvcc.edu/~kantopet/ . 2003. 17) Horstmann, Cay S. Computing Concept with Java 2 Essentials, 2nd Edition. John Wiley & Sons. Inc. 1998 18) Helmy & Ridwan Sanjaya. Pengolahan Database SQL Server 2000 dengan Java2. PT Elex Media Komputindo. Jakarta 2003. 19) Hanna, Phil. JSP 2.0 The complete reference. New York:McGraw-Hill, 2001. 20) Slide Prentice Hall. 2002 21) http://www.htmltutorials.ca/lesson4.htm 22) http://www.infomotions.com/musings/tricks/manuscript/1015-logicaltags.html 23) Powell, Thomas A. HTML: The Complete Reference, Third edition. California: 24) Osborne/ McGraw-Hill. 2001. 25) Coggeshall, John. 2004. PHP 5 Unleashed. Sams Publishing. 26) Wenz, Christian. 2005. PHP PHRASEBOOK: ESSENTIAL CODE AND COMMANDS. Sams Publishing. 27) Meloni, Julie C. 2003. PHP Essentials, Second Edition. Premier Press. LSP Telematika Indonesia
326
28) Campbell, Marc. 2005. WEB DESIGN GARAGE. Prentice Hall PTR. 29) Herrington, Jack. 2005. PHP Hacks. O'Reilly. 30) msdn.microsoft.com 31) http://www.geocities.com/SiliconValley/Vista/2207/sql1.html 32) http://www.c-sharpcorner.com/asp/Articles/CachingInASPDPL.asp 33) http://www.webgecko.com/community/articles/ach_bestpract.htm 34) http://platinum.intersystems.com/wld/wd_timesessions.html 35) http://www.tips-tricks.com/automa.asp 36) www.ilmukomputer.com
327

Web Programming

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Web Programming

Cargado por

Copyright:

Formatos disponibles

LSP Telematika Indonesia

LSP Telematika Indonesia

LSP Telematika Indonesia

LSP Telematika Indonesia

LSP Telematika Indonesia

1.1 World Wide Web

LSP Telematika Indonesia

1.2 Pengenalan HTML

diatur oleh world wide web consortium ( W3C ).

Gambar 1.3.1 Struktur tag HTML

LSP Telematika Indonesia

Deklarasi <!DOCTYPE> HTML PUBLIC "-//IETF//DTD HTML

LSP Telematika Indonesia

Gambar 1.3.2 Title Bar di Web Browser

LSP Telematika Indonesia

LSP Telematika Indonesia

1.4 Editor HTML

Gambar 1.4.1.1 Kode HTML di Editor Notepa

LSP Telematika Indonesia

Gambar 1.4.2.1 Gambar Kode HTML di Editor Microsoft Frontpage

1.5 Format Teks

LSP Telematika Indonesia

Sedangkan tampilan kode diatas oleh browser, adalah sebagai berikut :

Gambar 1.5.1.1 Tampilan Heading

LSP Telematika Indonesia

LSP Telematika Indonesia

Gambar 1.5.2.1 Tampilan Paragraf

LSP Telematika Indonesia

Gambar 1.5.3.1 Contoh Penggunaan <blockquote> dan <q>

LSP Telematika Indonesia

Gambar 1.5.4.1 Tampilan HTML dari <a href=url> dan </a>

LSP Telematika Indonesia

<html> <head> <title>Link Style Changes</title> <style type="text/css"> <!--

LSP Telematika Indonesia

Nama Atribut href name

Nilai Atribut URL Text

target title accesskey

A frame name Text A character

Menentukan hubungan menghubungkan

LSP Telematika Indonesia

LSP Telematika Indonesia

LSP Telematika Indonesia

LSP Telematika Indonesia

Gambar 1.5.5.1.1 Tampilan HTML Untuk Ordered List

1.5.5.2 Unordered List

LSP Telematika Indonesia

Tampilan HTML untuk kode diatas adalah gambar di bawah ini :

Gambar 1.5.5.2.1 Tampilan HTML Unordered List

LSP Telematika Indonesia

Tampilan untuk kode di atas adalah sebagai berikut :

LSP Telematika Indonesia

Gambar 1.5.5.3.1 Tampilan HTML Penggunaan Definition List

LSP Telematika Indonesia

Gambar 1.6.1 Tampilan HTML untuk <img>

LSP Telematika Indonesia

Gambar 1.6.2 Tampilan HTML dengan Alt

Gambar 1.6.3 Tampilan HTML dengan Align

LSP Telematika Indonesia

Gambar 1.6.4 Tampilan HTML dengan Align Right dan Left

LSP Telematika Indonesia

Gambar 1.6.5 Tampilan HTML dengan Atribut HSPACE dan VSPACE

LSP Telematika Indonesia

row 1, cell 2 row 2, cell 2

1.7.1 Atribut Border