Web Programming

72
Web Programming - regular course - Jl Kebon Jeruk Raya No 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

Transcript of Web Programming

Page 1: Web Programming

Web Programming

- regular course -

Jl Kebon Jeruk Raya No 78B

Palmerah Jakarta Barat 11480 Ph. +62 21 53671612

www.evopage.com

Page 2: Web Programming

Web Programming 1.0 - 7 August 2007 2 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

Pengantar Evo Training Center adalah sebuah lembaga pendidikan komputer di Jakarta. Evo Training Center berdiri sejak 5 Juli 2005. Evo bergerak di bidang pelatihan komputer yang mempunyai visi untuk menyiapkan sumber daya manusia yang siap pakai dalam masyarakat. Sampai tahun 2007 telah membuka dua buah cabang dan menyerap murid sebanyak kurang lebih 2000 orang dalam waktu dua tahun. Evo mempunyai misi mengembangkan modul-modul materi yang berkualitas di mana sesuai dengan perkembangan teknologi saat ini, melatih dan menyiapkan tenaga-tenaga pengajar yang handal, melakukan revisi dan pembaharuan materi yang ada, dan menyediakan fasilitas-fasilitas yang mendukung. Evo menyediakan berbagai macam training dari programming (C, C++, Visual Basic.NET, Java, SQL), web design dan programming (HTML, CSS, Javascript, PHP, JSP, ASP.NET), design (Macromedia Flash, Adobe Photoshop, 3D Studio Max). Pada tahun 2007, Evo dipercaya oleh Nokia sebagai Nokia Certified Training Center, bekerja sama dengan pihak inTouch untuk mengadakan Nokia Developer Training untuk training pengembangan aplikasi mobile/handphone.

Page 3: Web Programming

Web Programming 1.0 - 7 August 2007 3 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

Daftar Isi Pengenalan Evo Forum ........................................................................................5 BAB 1 Pengenalan JSP .........................................................................................7

1.1 Instalasi Java dan Apache Tomcat Server .....................................................7 1.1.1 Instalasi Java 2 SDK 5.0.......................................................................7 1.1.2 Instalasi Apache Tomcat 5.5 ............................................................... 11

1.2 Pengenalan HTML ............................................................................... 17 1.2.1 Struktur Dokumen ........................................................................... 17 1.2.2 Anchor Element .............................................................................. 18 1.2.3 Block Formatting............................................................................. 19 1.2.4 List Elements ................................................................................. 19 1.2.5 Information type and Character Formatting Elements ................................ 20 1.2.6 Image Elements .............................................................................. 20 1.2.7 Form Elements ............................................................................... 21 1.2.8 Table Elements............................................................................... 22 1.2.9 Character Data ............................................................................... 23 1.2.10 Dynamic HTML Documents .............................................................. 23 1.2.11 Frames ..................................................................................... 23 1.2.12 Object Embedding........................................................................ 24 1.2.13 Server Side Includes...................................................................... 24 1.2.14 StyleSheet ................................................................................. 25

1.3 Pengenalan JSP.................................................................................. 25 1.4 JSP Elements..................................................................................... 25

1.4.1 Scriptlet ....................................................................................... 25 1.4.2 JSP Comment................................................................................. 27 1.4.3 JSP Declaration .............................................................................. 27 1.4.4 JSP Expression................................................................................ 28 1.4.5 Page Directives............................................................................... 29

1.5 Implicit Objects ................................................................................. 32 Lab 1 ........................................................................................................... 32 BAB 2 Penggunaan FORM.................................................................................... 34

2.1 Merancang FORM ................................................................................ 34 2.2 POST Method..................................................................................... 35 2.3 GET Method ...................................................................................... 35

Lab 2 ........................................................................................................... 36 BAB 3 JSP Standard Action.................................................................................. 39

3.1 <jsp:include> .................................................................................... 39 3.2 <jsp:forward>.................................................................................... 39

Lab 3 ........................................................................................................... 42 BAB 4 Java Bean.............................................................................................. 44

4.1 Penggunaan Java Bean ......................................................................... 44 4.2 <jsp:setProperty> dan <jsp:getProperty> ................................................... 50

Lab 4 ........................................................................................................... 53 BAB 5 Java Database Connectivity (JDBC)(1) ............................................................ 54

5.1 Tentang Java Database Connectivity ........................................................ 54

Page 4: Web Programming

Web Programming 1.0 - 7 August 2007 4 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

5.2 Koneksi database melalui JDBC-ODBC Driver............................................... 54 5.3 Mengambil data dari database ................................................................ 54 5.4 Mengubah data di database ................................................................... 55

Lab 5 ........................................................................................................... 57 BAB 6 Java Database Connectivity (JDBC)(2) ............................................................ 58

6.1 Menggunakan PreparedStatement............................................................ 58 Lab 6 ........................................................................................................... 59 BAB 7 Session ................................................................................................. 60

7.1 Session scope .................................................................................... 60 Lab 7 ........................................................................................................... 61 BAB 8 Searching dan Paging ................................................................................ 63

8.1 Menambahkan fitur paging .................................................................... 63 8.2 Menambahkan fitur searching................................................................. 65

Lab 8 ........................................................................................................... 66 BAB 9 Study Case ............................................................................................. 67

9.1 Konsep web yang akan dibuat................................................................. 67 9.2 Perancangan Database ......................................................................... 67 9.3 Perancangan Halaman Web.................................................................... 67

Biografi Penulis ............................................................................................... 68 Informasi Training............................................................................................ 69

Page 5: Web Programming

Web Programming 1.0 - 7 August 2007 5 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

Pengenalan Evo Forum Evo Training Center sebagai lembaga pelatihan komputer menyediakan berbagai fasilitas untuk membantu peserta training dalam belajar. Untuk itu Evo menyediakan Forum Discussion Board di mana setiap peserta dapat register secara gratis.

Students Instructors

Cara untuk registrasi mudah dapat langsung ke halaman forum dan pilih register atau melalui URL berikut ini: http://www.evopage.com/forum/profile.php?mode=register

EVO FORUM http://forum.evopage.com

COMMUNICATE

Page 6: Web Programming

Web Programming 1.0 - 7 August 2007 6 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

Isi data registrasi kemudian Submit dan anda sudah dapat login.

Setelah itu login dan anda sudah dapat melakukan posting.

Page 7: Web Programming

Web Programming 1.0 - 7 August 2007 7 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

BAB 1 Pengenalan JSP 1.1 Instalasi Java dan Apache Tomcat Server Pada tahap ini instal telebih dahulu Java 2 SDK. Di sini kita menggunakan versi 5.0. Setelah baru instal web servernya (Apache Tomcat 5.5) File ini dapat didownload lewat web pada URL berikut ini: http://evopage.com/download

1.1.1 Instalasi Java 2 SDK 5.0

Berikut ini adalah cara instalasi Java 2 5.0 Development Kit.

Page 8: Web Programming

Web Programming 1.0 - 7 August 2007 8 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

Pilih Accept

Page 9: Web Programming

Web Programming 1.0 - 7 August 2007 9 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

Page 10: Web Programming

Web Programming 1.0 - 7 August 2007 10 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

Page 11: Web Programming

Web Programming 1.0 - 7 August 2007 11 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

1.1.2 Instalasi Apache Tomcat 5.5

Page 12: Web Programming

Web Programming 1.0 - 7 August 2007 12 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

Page 13: Web Programming

Web Programming 1.0 - 7 August 2007 13 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

Pilihlah Full.

Page 14: Web Programming

Web Programming 1.0 - 7 August 2007 14 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

Masukkan port yang unik, misalkan 8081 Pada satu komputer bisa terdapat beberapa web server di mana masing-masing memiliki web server yang unik. Untuk Apache Tomcat misalkan kita gunakan port 8081, Apache HTTP Server (PHP) kita gunakan port 8080, dan Internet Information Services (IIS) untuk ASP di port default 80.

Tentukan letak Java Runtime Environment, biarkan saja sesuai dengan default.

Page 15: Web Programming

Web Programming 1.0 - 7 August 2007 15 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

Page 16: Web Programming

Web Programming 1.0 - 7 August 2007 16 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

Setelah Tomcat berhasil diinstal. Buka halaman berikut ini. http://localhost:8081/

Page 17: Web Programming

Web Programming 1.0 - 7 August 2007 17 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

1.2 Pengenalan HTML HTML (Hypertext Markup Language) adalah scripting yang digunakan secara global dalam dunia web untuk representasikan data dalam browser. Browser-browser yang terkenal seperti Internet Explorer dan Mozilla Firefox sangat umum digunakan untuk menelusuri dunia internet.

1.2.1 Struktur Dokumen Struktur dokumen dari HTML adalah sebagai berikut Simpanlah file tersebut sebagai HtmlBasic.htm atau HtmlBasic.html kemudian buka file tersebut dengan menggunakan Browser, misalkan Internet Explorer atau Mozilla Firefox.

<HTML> <HEAD> <TITLE>Web Title</TITLE> </HEAD> <BODY> Body Content Here </BODY> </HTML>

Page 18: Web Programming

Web Programming 1.0 - 7 August 2007 18 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

1.2.2 Anchor Element Anchor element digunakan untuk sebagai link untuk berpindah ke resource lain dalam web. Secara umum digunakan untuk berpindah dari satu halaman web ke halaman lainnya.

Buatlah file Anchor.html dengan isi sebagai berikut

<HTML> <HEAD> <TITLE>Using Anchor</TITLE> </HEAD> <BODY> <a href="http://forum.evopage.com">Go To Evo Forum</a><BR><BR> <a href="http://forum.evopage.com" target="_blank">Go To Evo Forum In New Window</a><BR><BR> </BODY> </HTML>

Page 19: Web Programming

Web Programming 1.0 - 7 August 2007 19 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

1.2.3 Block Formatting

Block formatting elements digunakan untuk memformat tampilan sekumpulan teks di dalam dokumen HTML. 1.2.4 List Elements

HTML mendukung beberapa tipe dari list. Sebagai contoh buat file ListDemo.html Hasil pada browser adalah sebagai berikut :

Selain itu masih ada <DIR>, <DL>, <MENU>, <OL>, <UL>

<HTML> <HEAD> <TITLE>List Demo</TITLE> </HEAD> <BODY> <OL> <LI>Java 2 Standard Edition</LI> <LI>Java 2 Enterprise Edition</LI> <LI>Java 2 Micro Edition</LI> </OL> </BODY> </HTML>

Page 20: Web Programming

Web Programming 1.0 - 7 August 2007 20 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

1.2.5 Information type and Character Formatting Elements Untuk memformat berbagai bentuk seperti efek tebal, efek miring, underlined dan sebagainya. 1.2.6 Image Elements

Digunakan untuk menampilkan gambar. Dibuat dengan menggunakan tag <img>

<HTML> <HEAD> <TITLE>List Demo</TITLE> </HEAD> <BODY> <IMG SRC="evologo.jpg"> </BODY> </HTML>

Page 21: Web Programming

Web Programming 1.0 - 7 August 2007 21 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

1.2.7 Form Elements Digunakan untuk menampilkan form untuk meminta input dari user. Buatlah FormDemo.html dengan coding sebagai berikut.

<html> <head> <title>Form Demo</title> </head> <body> <form name="form1" action="" method="post"> Name <input type="text" name="txtName"><br> Gender <input type="radio" name="gender" value="m" checked>Male <input type="radio" name="gender" value="f">Female <br> Religion <select name="select"> <option value="1">Islam</option> <option value="2">Katolik</option> <option value="3">Kristen</option> <option value="4">Buddha</option> <option value="5">Hindu</option> </select> <br> <input type="submit" name="Submit" value="Submit"> </form> </body> </html>

Page 22: Web Programming

Web Programming 1.0 - 7 August 2007 22 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

1.2.8 Table Elements Digunakan untuk menampilkan table di mana terdiri dari baris dan kolom. Buatlah TableDemo.html dengan coding sebagai berikut.

<html> <head> <title>Table Demo</title> </head> <body> <table width="400" border="1" cellspacing="0" cellpadding="0"> <tr> <td width="101">Kode Produk </td> <td width="222">Nama Produk </td> <td width="69">Harga</td> </tr> <tr> <td>P0001</td> <td>Mouse</td> <td>40000</td> </tr> <tr> <td>P0002</td> <td>Keyboard</td> <td>56000</td> </tr> <tr> <td>P0003</td> <td>Hardisk 40 GB </td> <td>400000</td> </tr> </table> </body> </html>

Page 23: Web Programming

Web Programming 1.0 - 7 August 2007 23 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

1.2.9 Character Data

HTML mendefinisikan beberapa karakter khusus. &amp untuk menampilkan tanda (&) &quot untuk menampilkan tanda (“) &nbsp untuk menampilkan spasi kosong

1.2.10 Dynamic HTML Documents

Fitur untuk menampilkan dokumen HTML secara lebih dinamis. Menggabungkan

Javascript, CSS (Cascading Stylesheet), dan sebagainya.

1.2.11 Frames

Dalam halaman dokumen HTML bisa terdiri dari beberapa frame. Frame digunakan untuk memecah beberapa bagian di mana setiap bagian menampilkan halaman-halaman lain.

Page 24: Web Programming

Web Programming 1.0 - 7 August 2007 24 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

1.2.12 Object Embedding Digunakan untuk memasukkan object ke dalam halaman HTML, misalkan Flash movie maka pada halaman dapat menampilkan isi animasi file flash (.swf). Syaratnya sudah terinstall Flash Player. 1.2.13 Server Side Includes Menambahkan berbagai macam fitur seperti menyisipkan halaman lain ke dalam halaman HTML, dan sebagainya.

<html> <head> <title>Frame Demo</title> </head> <frameset rows="80,*" frameborder="YES" border="1" framespacing="1"> <frame src="HtmlBasic.html" name="topFrame" scrolling="NO" noresize> <frame src="ListDemo.html" name="mainFrame"> </frameset> <noframes> <body> </body> </noframes> </html>

Page 25: Web Programming

Web Programming 1.0 - 7 August 2007 25 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

1.2.14 StyleSheet Digunakan untuk setting tampilan HTML seperti warna, jenis tulisan, dan sebagainya sehingga menghasilkan tampilan yang lebih menarik.

1.3 Pengenalan JSP

Java Server Pages yang disingkat JSP merupakan teknologi pengembangan dari Servlet di mana digunakan untuk membuat web dinamis. Servlet merupakan teknologi yang dikembangkan oleh Sun Microsystems untuk solusi client-server architecture. Java Server Pages merupakan salah satu bagian dari J2EE sebagai solusi pengembangan dari Servlet. Java Server Pages dibuat untuk memudahkan pengembangan web dinamis. Java Server Pages merupakan salah satu server-side script. Selain itu masih ada ASP, PHP, Perl, dan sebagainya. Semua script dari JSP akan secara otomatis dikonversi ke dalam bentuk Servlet untuk memberikan respons terhadap request dari user.

Sebelum masuk ke pemrograman JSP diharapkan sudah pernah mempelajari J2SE terlebih

dahulu karena merupakan dasar-dasar yang harus dikuasai. Banyak class-class dari J2SE yang bis digunakan di dalam dunia JSP.

Penggunaan JSP diintegrasikan dengan HTML sebagai layout tampilan, CSS (Cascading Stylesheet) untuk mengatur tampilan web, Javascript sebagai client-side scriptnya. Pada bagian selanjutnya akan membahas lebih lanjut dasar-dasar pemrograman untuk Java Server Pages. 1.4 JSP Elements

1.4.1 Scriptlet

Scriptlet adalah elemen paling dasar dalam JSP. Scriptlet ini digunakan untuk menyisipkan coding Java dalam web. Scriptlet diawali dengan tanda <% dan diakhiri dengan tanda %>

<% .......... coding scriptlet %>

Java 2 Standard Edition

Java 2 Enterprise Edition

Java 2 Micro Edition

dasar pemrograman untuk dunia Java, Database Access, Networking, Thread, Swing GUI Package, Applet

pemrograman untuk client/server architecture, termasuk di dalamnya EJB, Servlet, JSP, dan sebagainya

pemrograman untuk mobile-device (handphone)

Page 26: Web Programming

Web Programming 1.0 - 7 August 2007 26 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

Semua coding yang ada di dalam tag <% %> akan disisipkan menjadi coding-coding Java

dalam Servlet yang digenerate. Sebagai contoh misalkan kita menambahkan coding loop untuk mencetak angka dari 1 sampai 10.

Buatlah sebuah file Simple.jsp dan letakkan pada folder berikut ini.

C:\Program Files\Apache Software Foundation\Tomcat 5.5\webapps

Pada folder tersebut buatlah folder jsp_day1, kemudian buat sebuah folder WEB-INF di

dalamnya. Kemudian simpan Simple.jsp tersebut di dalam folder jsp_day1

Simple.jsp

<html> <head> <title>Simple JSP</title> </head> <body> <% for(int i=0;i<10;i++){ out.println("Welcome<BR>"); } %> </body> </html>

Page 27: Web Programming

Web Programming 1.0 - 7 August 2007 27 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

Bagian yang ditandai dengan hijau adalah coding Scriptlet yang disisipkan di antara HTML.

Hasilnya pada browser akan menampilkan tulisan Welcome sebanyak sepuluh kali.

Pada client hanya menerima hasilnya dalam bentuk HTML. Coding Scriptlet tidak bisa

dibaca oleh client. 1.4.2 JSP Comment

JSP Comment digunakan untuk memberikan komentar pada dunia JSP. Komentar ini berbeda dengan komentar yang disediakan oleh HTML. Komentar pada HTML tidak ditampilkan oleh browser tapi dapat dilihat user pada saat user klik View Source. Sedangkan JSP Comment tidak akan muncul dan tidak dapat dilihat oleh user client.

HTML Comment : <!-- comment here -->

JSP Comment : <%-- jsp comment here --%> 1.4.3 JSP Declaration JSP Declaration digunakan untuk mendeklarasikan suatu variabel atau objek yang dapat digunakan dalam satu halaman. Letak JSP Declaration dapat diletakkan di mana pun, namun disarankan untuk meletakkannya di bagian atas agar tidak membingungkan. <%! ... JSP Declaration %> Sebagai contoh misalkan untuk mendeklarasikan variabel, fungsi, ataupun class (inner class). Pada contoh di bawah ini mencontohkan penggunaan JSP Declaration untuk mendeklarasikan fungsi.

Page 28: Web Programming

Web Programming 1.0 - 7 August 2007 28 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

1.4.4 JSP Expression

JSP Expression digunakan menampilkan isi suatu variabel. JSP Expression digunakan untuk mempersingkat penulisan coding. Dengan menggunakan JSP Expression maka coding dapat dibuat sebagai berikut

<html> <head> <title>Simple JSP</title> </head> <body> <%! //deklarasi fungsi public void someFunction()

{ ....... }

%> <%

//pemanggilan fungsi someFunction();

%> </body> </html>

<% java.util.Date date = new java.util.Date(); out.println(“Tanggal sekarang : “ + date); //cetak ke client %>

<% java.util.Date date = new java.util.Date(); %> Tanggal sekarang : <%= date %>

Page 29: Web Programming

Web Programming 1.0 - 7 August 2007 29 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

1.4.5 Page Directives Page Directives adalah bagian yang paling pertama dikerjakan. Letaknya boleh diletakkan di mana saja, namun biasanya diletakkan di bagian atas. Directvies sendiri dibagi menjadi tiga, yaitu :

1.4.5.1 Include Directives

Digunakan untuk memecah bagian dari halaman menjadi beberapa bagian. Dengan pemecahan tersebut akan memudahkan programmer untuk mendefinisikan solusi per pecahan tersebut.

Pada gambar di atas halaman main.jsp dibagi-bagi menjadi beberapa bagian.

Masing-masing bagian di break-down ke dalam pecahan yang lebih kecil dan mempunyai satu fungsionalitas tersendiri.

Cara melakukan include adalah sebagai berikut

Proses kerjanya adalah sebagai berikut. Pada saat eksekusi, include directive ini akan digantikan dengan dokumen.html yang dispesifikasikan, menjadi satu halaman JSP baru dikonversikan ke Servlet. Termasuk jika halaman yang diinclude adalah halaman JSP. Selain menggunakan include directive ini dapat juga menggunakan JSP Standard Action <jsp:include> di mana diincludekan pada saat runtime request. Cara ini akan dibahass pada bab berikutnya. 1.4.5.2 Page Directives

Atribut yang diset dengan page directive berlaku untuk semua halaman JSP dan halaman statik (HTML) yang diinclude baik melalui include directive ataupun <jsp:include>. Page directive digunakan untuk berbagai macam tujuan. Berikut ini adalah daftar atribut untuk page directive.

main.jsp

header.html

content.html

menu.html

<%@ include file=”header.html” %>

Page 30: Web Programming

Web Programming 1.0 - 7 August 2007 30 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

Atribut Nilai language Java extends Fully qualified class name

Nama lengkap suatu class beserta packagenya import package atau class yang diimport session true / false buffer none / size kb autoFlush true / false isThreadSafe true / false info information text errorPage URL untuk error page isErrorPage true / false contentType content type information

languange Language menjelaskan bahasa yang digunakan dalam halaman web. extends Digunakan untuk menentukan parent class dari halaman JSP tersebut. Developer bisa memspesifikasikan class yang akan diturunkan oleh halaman JSP-nya selain menggunakan class default. Ingat bahwa halaman JSP akan ditranslasikan menjadi code-code Servlet. import Digunakan untuk mengimpor suatu class untuk digunakan dalam JSP session Atribut session digunakan untuk menentukan apakah pada halaman tersebut dapat menggunakan session atau tidak. Pembahasan apa itu session akan dibahas lebih lanjut. buffer Jika buffer diberi nilai none maka servlet yang di-generate tidak ada buffering dan semua akan dioutput ke client dengan menggunakan objek out. Dengan menggunakan buffer bisa meningkatkan performance. Default nilai dari buffer adalahh 8 KB.

<%@ page import=”java.util.Date,java.sql.*” %>

<%@ page session=”true” %>

<%@ page language=”java” %>

<%@ page extends=”myPackage.MyHttpPage” %>

<%@ page buffer=”12kb” %>

Page 31: Web Programming

Web Programming 1.0 - 7 August 2007 31 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

autoFlush Atribut ini digunakan untuk menentukan pada saat buffering maka pada saat buffer terisi langsung di flush. isThreadSafe Jika nilainya true maka container dapat melakukan multiple request, jika false container hanya memproses satu request pada satu waktu. Defaultnya adalah true. info Atribut info digunakan untuk menyimpan informasi yang dapat diambil nilainya dengan menggunakan fungsi Servlet.getServletInfo() errorPage Digunakan untuk error-handling. Pada saat exception terjadi pada halaman JSP maka akan secara otomatis memforward ke URL yang ditentukan oleh errorPage. isErrorPage Atribut ini menentukan apakah halaman web ini digunakan untuk menangani exception dari halaman JSP lain. Defaultnya adalah false. contentType Menentukan jenis content yang ditampilkan. Defaultnya adalah text/html. Default character encoding yang digunakan adalah ISO-8859-1. 1.4.5.3 Taglib Directives Dengan menggunakan Taglib (Tag Library), developer dapat mendefinisikan tag-nya sendiri. Taglib directive digunakan untuk meregisterkan tag library yang ingin digunakan.

<%@ page buffer=”12kb” autoFlush=”true” %>

<%@ page info=”Author: Ali Irawan; version=1.0” %>

<%@ page isThreadSafe=”false” %>

<%@ page errorPage=”error.jsp” %>

<%@ page isErrorPage=”true” %>

<%@ page contentType=”text/html; ISO-8859-1” %>

Page 32: Web Programming

Web Programming 1.0 - 7 August 2007 32 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

1.5 Implicit Objects

Implicit Objects adalah sekumpulan objek yang dapat digunakan dalam halaman JSP tanpa harus dideklarasikan terlebih dahulu.

Nama Variabel Tipe Deskripsi JSP Scope

request javax.servlet.HttpServletRequest untuk mengambil parameter dari HTTP request

request

response javax.servlet.HttpServletResponse mengenkapsulasi HTTP response

page

pageContext javax.servlet.jsp.PageContext mendukung forward, include, mengambil implicit object

page

session javax.servlet.http.HttpSession mekanisme penyimpanan data client di berbeda halaman

session

application javax.servlet.ServletContext menyediakan akses informasi ke web server dan menulis log ke servlet log

application

out javax.servlet.jsp.JspWriter untuk menampilkan output ke client

page

config javax.servlet.ServletConfig untuk mengambil nilai-nilai inisiliasasi dan akses ke ServletContext

page

page javax.servlet.jsp.HttpJspPage sinonim dari “this” menunjuk pada halaman itu sendiri

page

exception java.lang.Throwable objek yang mengenkapsulasi error yang terjadi. bisa diakses pada error page

page

Lebih detail lihat bagian lampiran tentang implicit objects. Lab 1 Buatlah sebuah project di mana menggunakan include directive. Halaman-halaman terbagi-bagi sebagai berikut. lab1/index.jsp lab1/about.jsp lab1/contactus.jsp lab1/WEB-INF lab1/WEB-INF/header.html lab1/WEB-INF/footer.html lab1/WEB-INF/menu.html lab1/lab1.css Untuk header.html, footer.html dan menu.html diinclude ke dalam ketiga halaman index.jsp, about.jsp dan contactus.jsp

<%@ taglib uri=”URI to Tag Library” prefix=”tag prefix” %>

Page 33: Web Programming

Web Programming 1.0 - 7 August 2007 33 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

Page 34: Web Programming

Web Programming 1.0 - 7 August 2007 34 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

BAB 2 Penggunaan FORM 2.1 Merancang FORM Form digunakan untuk memberikan kesempatan user untuk input data dalam field-field yang disediakan di mana data inputan terebut akan dikirimkan ke halaman lain untuk diproses. Contoh Form adalah sebagai berikut:

Page 35: Web Programming

Web Programming 1.0 - 7 August 2007 35 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

2.2 POST Method Buatlah sebuah form, masukkan attribut method-nya menjadi post, pada bagian action diberi tujuan.jsp. Pada saat pengiriman data form dengan menggunakan POST method, pada bagian URL tidak ada QUERYSTRING. Sebagai contoh buat halaman web bernama form.jsp Kemudian pada halaman tujuan.jsp buat code berikut ini. 2.3 GET Method Untuk GET tinggal mengubah atribut form method=”get” maka pada saat pengiriman parameter-parameter akan muncul pada URL address. http://localhost:8081/jsp_day2/tujuan.jsp?user=somebody&pass=12345

<form action=”tujuan.jsp” method=”post” > <table> <tr> <td>Username</td> <td><input type=”text” name=”user”></td> </tr> <tr> <td>Password</td> <td><input type=”password” name=”pass”></td> </tr> <tr> <td colspan=”2”><input type=”submit” value=”Login”></td> </tr> </table> </form>

<%@ page import=”java.util.Enumeration” %><H3>Parameters</H3> <% Enumeration e = request.getParameterNames(); while(e.hasMoreElements()) { String name = (String) e.nextElement(); String value = request.getParameter(name); %> <BR>Parameter : <%= name %> <BR>Values : <%= value %> <% } %>

Page 36: Web Programming

Web Programming 1.0 - 7 August 2007 36 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

Lab 2 Buatlah sebuah project di mana user dapat menginput dua buah angka dan memilih operator yang diinginkan. Namai halaman tersebut dengan input.jsp. Form input tersebut akan dikirim ke halaman lain output.jsp lab2/input.jsp lab2/output.jsp lab2/error.jsp lab2/WEB-INF lab2/WEB-INF/web.xml Untuk web.xml isi dengan script berikut. Untuk mengambil nilai yang ada pada web.xml, <context-param> gunakan

application.getInitParameter(“pesan_error”)

<?xml version="1.0" encoding="iso-8859-1"?><web-app> <context-param> <param-name>pesan_error</param-name> <param-value> Angka 1 dan Angka 2 harus diisi dengan angka </param-value> </context-param> <welcome-file-list> <welcome-file>input.jsp</welcome-file> </welcome-file-list> </web-app>

Page 37: Web Programming

Web Programming 1.0 - 7 August 2007 37 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

Page 38: Web Programming

Web Programming 1.0 - 7 August 2007 38 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

Page 39: Web Programming

Web Programming 1.0 - 7 August 2007 39 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

BAB 3 JSP Standard Action 3.1 <jsp:include> <jsp:include> digunakan untuk menyertakan halaman JSP lain di mana disertakan pada saat runtime request. Hasil dari request terhadap halaman JSP yang disisipkan disertakan dengan tag tersebut. Proses ini berbeda dengan include directive. Pada include directive semua halaman yang diinclude direplace terlebih dahulu baru ditranslasi ke servlet. Tapi dengan <jsp:include> proses translasi langsung dilakukan, sedangkan proses include dilakukan pada saat runtime. Perbedaan menggunakan include directive dan <jsp:include> include directive include.jsp <jsp:include> include.jsp 3.2 <jsp:forward> Digunakan untuk meneruskan request ke halaman lain. Contoh penggunaannya adalah sebagai berikut. Buatlah sebuah file bernama first.jsp

… <%@ include file=”include.jsp” %> //disini a dikenal <%= a %>

<% int a = 10; out.println(“Nilai a: “); %>

… <jsp:include page=”include.jsp”/> //disini a tidak dikenal <%= a %> //akan menghasilkan error

<% int a = 10; out.println(“Nilai a: “); %>

Page 40: Web Programming

Web Programming 1.0 - 7 August 2007 40 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

Page 41: Web Programming

Web Programming 1.0 - 7 August 2007 41 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

Halaman second.jsp ini memforward ke third.jsp dengan menambahkan <jsp:param> di dalam tag <jsp:forwward> nya untuk menyisipkan suatu parameter. Walaupun diforward pada URL tetap tertulis second.jsp tetapi sebenarnya yang ditampilkan adalah third.jsp first.jsp second.jsp third.jsp

<html> <head> <title>Forwarding</title> </head> <body> <form action="second.jsp" method="post"> <table width="300" border="0" cellspacing="0" cellpadding="0"> <tr> <td>Username</td> <td><input name="user" type="text" id="user"></td> </tr> <tr> <td>Password</td> <td><input name="pass" type="password" id="pass"></td> </tr> <tr> <td>&nbsp;</td> <td><input type="submit" name="Submit" value="Submit"></td> </tr> </table> </form> </body> </html>

<jsp:forward page="third.jsp"> <jsp:param name="loggedtime" value="<%= new java.util.Date() %>"/> </jsp:forward>

<%@ page import="java.util.Enumeration" %><% Enumeration e = request.getParameterNames(); while(e.hasMoreElements()) { String param = (String) e.nextElement(); String value = request.getParameter(param); %> <%= param %> = <%= value %><BR> <% } %>

Page 42: Web Programming

Web Programming 1.0 - 7 August 2007 42 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

Lab 3 Membuat datepicker.jsp untuk digunakan dalam aplikasi. Buatlah sebuah datepicker.jsp agar bisa diinclude ke dalam aplikasi sebagai berikut. Parameters ddname – nama untuk <select> untuk tanggal mmname – nama untuk <select> untuk bulan yyname – nama untuk <select> untuk tahun ddvalue – nilai awal untuk <select> tanggal mmvalue – nilai awal untuk <select> bulan yyvalue – nilai awal untuk <select> tahun [Optional] monthtype – nilai untuk mengatur tipe tampilan bulan : shorttext, text atau number. Untuk shorttext akan menampilkan Jan, Feb, Mar dan seterusnya, text menampilkan January, February, March, sedangkan number untuk menampilkan dalam bentuk angka. lab3/WEB-INF lab3/datepicker.jsp lab3/test.jsp

<jsp:include page="datepicker.jsp"> <jsp:param name="ddname" value="tanggal"/> <jsp:param name="mmname" value="bulan"/> <jsp:param name="yyname" value="tahun"/> <jsp:param name="ddvalue" value="22"/> <jsp:param name="mmvalue" value="4"/> <jsp:param name="yyvalue" value="1984"/> <jsp:param name="monthtype" value="text"/> </jsp:include>

Page 43: Web Programming

Web Programming 1.0 - 7 August 2007 43 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

Page 44: Web Programming

Web Programming 1.0 - 7 August 2007 44 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

BAB 4 Java Bean 4.1 Penggunaan Java Bean Java Bean adalah tidak lain sebuah class yang memiliki data dan access identifier yang digunakan dalam dunia JSP sebagai model (penyimpanan data). Di gambar di atas dalah contoh struktur suatu Java Bean di mana terdapat data berupa String yaitu name dan kemudian data ini bisa diakses baik diubah melalui fungsi setName() dan mendapatkan isinya dengan menggunakan getName(). Untuk membuat class Java Bean ini disini kita menggunakan Eclipse sebagai toolnya. Extract file Eclipse ke drive C dan jalankan aplikasi Eclipse. Pastikan sebelumnya JDK sudah terinstall terlebih dahulu.

Java Bean

name

setName() getName()

Page 45: Web Programming

Web Programming 1.0 - 7 August 2007 45 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

Jika muncul dialog sebagai berikut, isi dengan nama folder tempat letak workspace letak file-file Java. Disini user bebas menentukan letaknya.

Klik File > New > Project

Page 46: Web Programming

Web Programming 1.0 - 7 August 2007 46 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

Kemudian masukkan nama projectnya.

Pada bagian sebelah kiri terdapat Package Explorer sebagai view dari project yang sedang akan dibuat. View ini bisa ditampilkan lewat menu Window > Show View > Package Explorer (Alt+Shift+Q, P).

Page 47: Web Programming

Web Programming 1.0 - 7 August 2007 47 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

Pada project klik kanan new package. Kemudian masukkan nama packagenya misalkan mybean (nama package harus kecil semua). Setelah itu klik Finish.

Page 48: Web Programming

Web Programming 1.0 - 7 August 2007 48 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

Setelah itu pada bagian package klik kanan new class. Masukkan nama class CustomerBean. Setelah itu klik Finish.

Kemudian buatlah code untuk data-data yang akan disimpan dalam CustomerBean.

package mybean; public class CustomerBean { private String id; private String name; private String phoneNumber; }

Page 49: Web Programming

Web Programming 1.0 - 7 August 2007 49 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

Setelah itu generate Setter dan Getternya. Di Eclipse dilakukan dengan klik kanan pada coding yang ada > pilih Source > Generate Getters and Setters. Klik Select All. Kemudian klik OK.

CustomerBean.java ini setiap disave akan dicompile oelh Eclipse menjadi CustomerBean.class di mana file .class inilah yang akan dipakai dalam aplikasi. Semua Java Bean (.class) diletakkan di dalam folder WEB-INF/classes dalam project, beserta dengan folder packagenya. Sebagai contoh class CustomerBean di atas ada dalam package mybean maka struktur penyimpanan di web containernya adalah sebagai berikut: WEB-INF/classes/mybean/CustomerBean.class Setelah itu Java Bean sudah siap digunakan dalam aplikasi JSP. Setiap ada perubahan pada WEB-INF restartlah Apache Tomcat Server-nya.

Page 50: Web Programming

Web Programming 1.0 - 7 August 2007 50 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

Pada halaman JSP untuk menggunakan JavaBean tersebut dapat menggunakan <jsp:useBean> seperti contoh berikut ini. useBean.jsp Outputnya akan tampil sebagai berikut.

Selain itu juga bisa menggunakan setProperty dan getProperty untuk akses data dari bean tersebut. 4.2 <jsp:setProperty> dan <jsp:getProperty> <jsp:setProperty> digunakan untuk set nilai yang ada pada bean tersebut. Sebagai contoh perhatikan script berikut ini.

<jsp:useBean id="obj" class="mybean.CustomerBean" scope="page" /> <% obj.setId("C0001"); obj.setName("Anton"); obj.setPhoneNumber("081806999999"); out.println(obj.getId()); out.println(obj.getName()); out.println(obj.getPhoneNumber()); %>

Page 51: Web Programming

Web Programming 1.0 - 7 August 2007 51 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

Selain itu bean memiliki kemampuan untuk menerima data yang dikirim dari form di mana field-field yang ada di dalam form akan dimasukkan ke dalam bean.

Untuk masing-masing textfield telah diberi nama txtid, txtname, dan txtphone. Pada saat disubmit ke formBeanOutput.jsp Java Bean dan menangkap semua data-data yang dikirim.

<jsp:useBean id="obj" class="mybean.CustomerBean" scope="page" /> <jsp:setProperty name="obj" property="id" value="C0001"/> <jsp:setProperty name="obj" property="name" value="Anton"/> <jsp:setProperty name="obj" property="phoneNumber" value="081806999999"/> <jsp:getProperty name="obj" property="id"/> <jsp:getProperty name="obj" property="name"/> <jsp:getProperty name="obj" property="phoneNumber"/>

<jsp:useBean id="obj" class="mybean.CustomerBean" scope="page" /> <jsp:setProperty name="obj" property="id" param="txtid"/> <jsp:setProperty name="obj" property="name" param="txtname"/> <jsp:setProperty name="obj" property="phoneNumber" param="txtphone"/> <jsp:getProperty name="obj" property="id"/> <jsp:getProperty name="obj" property="name"/> <jsp:getProperty name="obj" property="phoneNumber"/>

Page 52: Web Programming

Web Programming 1.0 - 7 August 2007 52 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

Atau untuk lebih singkat bisa dilakukan dalam satu baris yaitu Dengan syarat nama field-field yang ada di form sebelumnya harus sama yaitu id, name, phoneNumber.

<jsp:useBean id="obj" class="mybean.CustomerBean" scope="page" /> <jsp:setProperty name="obj" property="*" /> <jsp:getProperty name="obj" property="id"/> <jsp:getProperty name="obj" property="name"/> <jsp:getProperty name="obj" property="phoneNumber"/>

Page 53: Web Programming

Web Programming 1.0 - 7 August 2007 53 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

Lab 4 Buatlah sebuah JavaBean bernama ImageRotatorBean. Class ini memiliki data sebuah String merupakan daftar gambar yang akan dirotate. Sehingga waktu menampilkan akan ditampilkan secara random dengan tag <img> class yang dibuat: ImageRotatorBean.class halaman yand dibuat strukturnya sebagai berikut lab4/WEB-INF lab4/WEB-INF/logo1.jpg lab4/WEB-INF/logo2.jpg lab4/WEB-INF/classes/ImageRotatorBean.class lab4/usingRotator.jsp

Page 54: Web Programming

Web Programming 1.0 - 7 August 2007 54 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

BAB 5 Java Database Connectivity (JDBC)(1) 5.1 Tentang Java Database Connectivity Java Database Connectivity adalah class-class yang digunakan untuk akses ke database menggunakan coding Java. JDBC tidak hanya digunakan untuk desktop application (Swing Application) namun juga digunakan dalam lingkungan J2EE termasuk JSP sendiri. JDBC sendiri merupakan bagian dari J2SE. Hingga kini sudah berkembang sampai versi JDBC 3.0 API. Namun dalam modul ini hanya akan membahas basic untuk JDBC API 1.0 untuk memberikan gambaran bagaimana cara koneksi dari aplikasi ke database menggunakan JDBC ODBC Driver. 5.2 Koneksi database melalui JDBC-ODBC Driver 5.3 Mengambil data dari database Untuk mengambil data dari database dapat menggunakan class java.sql.Statement dan java.sql.ResultSet. Berikut ini adalah coding singkatnya.

<%@ page import="java.sql.*" %><% Class.forName("sun.jdbc.odbc.JdbcOdbcDriver"); String url = "jdbc:odbc:Driver={Microsoft Access Driver (*.mdb)};DBQ="+application.getRealPath("WEB-INF/database.mdb"); Connection con = DriverManager.getConnection(url); out.println("Database Connected<BR>"); //...do somecode here con.close(); out.println("Database Disconnected<BR>"); %>

//... Database must be Connected Statement stmt = con.createStatement(); ResultSet rs = stmt.executeQuery("select * from PhoneBook"); while(rs.next()) { String name = rs.getString(1); //using index String phone = rs.getString("ContactPhone"); //using name out.println(name + " - " + phone + "<BR>"); } stmt.close(); //... Disconnect database after use

Page 55: Web Programming

Web Programming 1.0 - 7 August 2007 55 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

Statement Statement digunakan untuk melakukan pengiriman perintah ke database. Statement dibuat dengan menggunakan method createStatement() dari class java.sql.Connection. Secara default akan sama seperti Untuk parameter pertama merupakan tipe cursor yang digunakan. Nilai-nilai yang diperbolehkan adalah ResultSet.TYPE_FORWARD_ONLY, ResultSet.TYPE_SCROLL_SENSITIVE, ResultSet.TYPE_SCROLL_INSENSITIVE Tipe Cursor Keterangan Nilai TYPE_FORWARD_ONLY Hanya bisa bergerak maju ~ next(), cursor tidak dapat

menggunakan fungsi previous(), first(), last(), dan sebagainya.

1003

TYPE_SCROLL_SENSITIVE Cursor bisa bergerak dua arah dan sensitif terhadap perubahan oleh client lain.

1005

TYPE_SCROLL_INSENSITIVE Cursor bisa bergerak dua arah dan tidak sensitif terhadap perubahan oleh client lain.

1004

Tipe Concurrency Keterangan Nilai TYPE_CONCUR_READ_ONLY Flag untuk set mode READONLY, tidak untuk diupdate 1007 TYPE_CONCUR_UPDATABLE Flag untuk mode UPDATABLE, digunakan untuk

mengubah data 1008

5.4 Mengubah data di database Untuk mengubah data di database gunakan sintaks berikut ini. Di dalam fungsi executeUpdate() dikirimkan sintaks yang mengubah data seperti insert, update, delete, drop table dan sebagainya.

Statement stmt = con.createStatement();

Statement stmt = con.createStatement( ResultSet.TYPE_FORWARD_ONLY, ResultSet.CONCUR_READ_ONLY);

Statement stmt = con.createStatement( ResultSet.TYPE_SCROLL_INSENSITIVE, ResultSet.CONCUR_UPDATABLE); stmt.executeUpdate(“INSERT INTO tab_login VALUES (‘admin’,’pass’)”); stmt.close();

Page 56: Web Programming

Web Programming 1.0 - 7 August 2007 56 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

ResultSet ResultSet digunakan untuk menampung hasil select yang dilakukan oleh Statement dengan method excuteQuery(). Untuk membaca ResultSet menggunakan fungsi-fungsi sebagai berikut: Nama Fungsi Keterangan boolean isBeforeFirst() untuk mengecek apakah cursor berada di beforeFirst yaitu

state sebelum data pertama boolean isAfterLast() untuk mengecek apakah cursor berada di afterFirst yaitu

state sesudah data terakhir boolean isFirst() untuk mengecek apakah sedang di data pertama boolean isLast() untuk mengecek apakah sedang di data terakhir boolean first() untuk memindahkan cursor ke data pertama boolean previous() untuk memindahkan cursor ke data sebelumnya boolean next() untuk memindahkan cursor ke data sesudahnya boolean last() untuk memindahkan cursor ke data terakhir boolean absolute(int row) untuk memindahkan cursor ke row boolean relative (int rows) untuk memindahkan cursor, nilai 2 akan bergerak maju

sebanyak 2, nilai -2 akan bergerak mundur sebanyak 2 Object getObject(int index) Object getObject (String columnName)

mengembalikan sebuah objek sesuai dengan indeks atau nama kolom

String getString(int index) String getString (String columnName)

mengembalikan sebuah String sesuai dengan indeks atau nama kolom

int getInt(int index) int getInt (String columnName)

mengembalikan sebuah int sesuai dengan indeks atau nama kolom

short getShort(int index) short getShort (String columnName)

mengembalikan sebuah short sesuai dengan indeks atau nama kolom

long getLong(int index) long getLong (String columnName)

mengembalikan sebuah long sesuai dengan indeks atau nama kolom

byte getByte(int index) byte getByte (String columnName)

mengembalikan sebuah byte sesuai dengan indeks atau nama kolom

Date getDate (int index) Date getDate (String columnName)

mengembalikan sebuah Date sesuai dengan indeks atau nama kolom

boolean getBoolean (int index) boolean getBoolean (String columnName)

mengembalikan sebuah boolean sesuai dengan indeks atau nama kolom

float getFloat (int index) float getFloat (String columnName)

mengembalikan sebuah float sesuai dengan indeks atau nama kolom

double getDouble (int index) double getDouble (String columnName)

mengembalikan sebuah double sesuai dengan indeks atau nama kolom

Page 57: Web Programming

Web Programming 1.0 - 7 August 2007 57 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

Lab 5 Buatlah sebuah project dengan struktur sebagai berikut: lab5/WEB-INF lab5/WEB-INF/connect.jsp lab5/WEB-INF/disconnect.jsp lab5/WEB-INF/database.mdb lab5/index.jsp (menampilkan semua data dari database) lab5/delete.jsp (memproses semua ID yang mau di-delete) lab5/script.js (fungsi buat checkAll dan uncheckAll) Data yang ditampilkan disajikan dalam bentuk table.

Page 58: Web Programming

Web Programming 1.0 - 7 August 2007 58 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

BAB 6 Java Database Connectivity (JDBC)(2) 6.1 Menggunakan PreparedStatement Untuk melakukan query ke database dapat menggunakan PreparedStatement

Berikut ini adalah contoh coding untuk update ke database

Untuk tipe data yang lain sudah disediakan berbagai macam fungsi seperti setInt() digunakan untuk tipe data numeric, setDouble() untuk bilangan numeric pecahan. Di bawah ini adalah contoh untuk tipe data tanggal.

PreparedStatement stmt = null; String sql = "INSERT INTO PhoneBook VALUES (?,?,?,?,?)"; stmt = con.prepareStatement(sql);

stmt.setString(1,name); stmt.setString(2,phone); stmt.setString(3,gender); stmt.setString(4,email); stmt.setString(5,address);

stmt.executeUpdate()

PreparedStatement stmt = null; String sql = "UPDATE PhoneBook SET ContactPhone=?, Gender=?, Email=?, Address=? WHERE ContactName=?"; stmt = con.prepareStatement(sql); stmt.setString(5,name); stmt.setString(1,phone); stmt.setString(2,gender); stmt.setString(3,email); stmt.setString(4,address); stmt.executeUpdate(); stmt.close();

int year = 1984; int month = 4; int date = 22; java.sql.Date date = new java.sql.Date(year-1900,month-1,date); stmt.setDate(1,date);

Page 59: Web Programming

Web Programming 1.0 - 7 August 2007 59 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

Lab 6 Melanjutkan Lab 5. Copy semua di lab 5 ke lab 6 lab6/WEB-INF lab6/WEB-INF/connect.jsp lab6/WEB-INF/disconnect.jsp lab6/WEB-INF/database.mdb lab6/index.jsp (menampilkan semua data dari database) lab6/delete.jsp (memproses semua ID yang mau di-delete) lab6/script.js (fungsi buat checkAll dan uncheckAll) ditambahkan pada lab6 lab6/insert.jsp lab6/process_insert.jsp lab6/update.jsp lab6/process_update.jsp

Page 60: Web Programming

Web Programming 1.0 - 7 August 2007 60 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

BAB 7 Session 7.1 Session scope Session adalah sebuah tempat menampung suatu objek di mana setiap objek disimpan dengan key tertentu. Session dapat diakses dari berbagai halaman dengan syarat pada halaman tersebut ditambahkan page directive session Cara menyimpan objek ke dalam Session menggunakan fungsi Untuk mengambil objek dari Session menggunakan fungsi Untuk membuang objek dari Session Untuk membuang semua objek dari Session

<%@ page session=”true” %>

session.setAttribute(“pesan”,”ERROR”);

String temp = (String) session.getAttribute(“pesan”);

session.removeAttribute(“pesan”);

session.invalidate();

Page 61: Web Programming

Web Programming 1.0 - 7 August 2007 61 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

Lab 7 Buatlah sebuah project untuk simulasi otentifikasi dalam web. Di mana untuk masuk ke sistem user harus login terlebih dahulu. Username dan password akan divalidasi dan dicek apakah sesuai dengan data yang ada di database. Jika valid maka baru bisa masuk ke dalam halaman sistem. lab7/WEB-INF lab7/WEB-INF/database.mdb lab7/WEB-INF/connect.jsp lab7/WEB-INF/disconnect.jsp lab7/login.jsp lab7/process_login.jsp lab7/logout.jsp lab7/home.jsp (hanya bisa diakses jika sudah login) Struktur tabel yang digunakan Nama Field Tipe Data Username Text Password Text login.jsp Halaman ini digunakan untuk meminta input username dan password dari user.

Page 62: Web Programming

Web Programming 1.0 - 7 August 2007 62 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

home.jsp Halaman ini hanya bisa diakses jika sudah login. Jika belum login maka akan di-redirect ke halaman login.

Page 63: Web Programming

Web Programming 1.0 - 7 August 2007 63 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

BAB 8 Searching dan Paging 8.1 Menambahkan fitur paging Paging digunakan untuk mengatur jumlah data yang tampil per halaman. Ini digunakan untuk mengatur tampilan data yang banyak tidak ditampilkan semua, tapi dibagi-bagi menjadi beberapa page.

Page 64: Web Programming

Web Programming 1.0 - 7 August 2007 64 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

Pada bagian atas sebelum menampilkan data gunakan coding berikut: Kemudian pada saat menampilkan baris-baris dalam table Untuk menampilkan navigasi kita dapat memisahkan implementasinya pada page terpisah dan kemudian dapat diinclude. Buatlah sebuah halaman navigation.jsp dalam folder WEB-INF

Statement stmt = con.createStatement(1005,1008);ResultSet rs = null; String sql = "select count(*) from login"; rs = stmt.executeQuery(sql); rs.next(); int rowCount = rs.getInt(1); int pageSize = 6; int pageCount = (int) Math.ceil((double) rowCount / pageSize); sql = "select * from login"; rs = stmt.executeQuery(sql); int pageIndex=0; String p = request.getParameter("p"); if(p==null) pageIndex=0; else pageIndex = Integer.parseInt(p)-1; if(pageIndex!=0) rs.absolute(pageIndex*pageSize);

<table width="400" border="1"> <tr> <td>USERNAME</td> <td>PASSWORD</td> </tr> <% int count=0; while(rs.next()){ String username = rs.getString(1); String password = rs.getString(2); %> <tr> <td><%= username %></td> <td><%= password %></td> </tr> <% count++; if(count==pageSize) break; } stmt.close(); %> </table>

Page 65: Web Programming

Web Programming 1.0 - 7 August 2007 65 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

WEB-INF/navigation.jsp Kemudian pada halaman index.jsp bisa diinclude dengan menggunakan <jsp:include> 8.2 Menambahkan fitur searching Fitur searching digunakan untuk memberikan fasilitas kepada user untuk melakukan pencarian misalkan pencarian berdasarkan username. Tambahkan form pada bagian atas halaman web index.jsp. Kemudian pada saat form disubmit data akan dikirim ke index.jsp dan akan ditambahkan coding sebagai berikut.

<% String pageCount = request.getParameter("pageCount"); int n = Integer.parseInt(pageCount); for(int i=1;i<=n;i++) { %> <a href="index.jsp?p=<%= i %>"><%= i %></a> <% } %>

<jsp:include page="WEB-INF/navigation.jsp"> <jsp:param name="pageCount" value="<%= pageCount %>"/> </jsp:include>

<form name="form1" method="get" action="index.jsp"> Search <input name="keyword" type="text" id="keyword"> <input type="submit" value="Submit"> </form>

<% String keyword = request.getParameter("keyword"); if(keyword==null) keyword=""; ... String sql = "select count(*) from login WHERE username LIKE '"+keyword+"%'"; ... sql = "select * from login WHERE username LIKE '"+keyword+"%'"; ... %>

Page 66: Web Programming

Web Programming 1.0 - 7 August 2007 66 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

Untuk pada paging harus kita lakukan sedikit modifikasi sebagai berikut Pada halaman WEB-INF/navigation.jsp ditambahkan menjadi sebagai berikut:

Lab 8 lab8/WEB-INF lab8/WEB-INF/database.mdb lab8/WEB-INF/connect.jsp lab8/WEB-INF/disconnect.jsp lab8/WEB-INF/navigation.jsp lab8/index.jsp

<jsp:include page="WEB-INF/navigation.jsp"> <jsp:param name="pageCount" value="<%= pageCount %>"/> <jsp:param name="keyword" value="<%= keyword %>"/> </jsp:include>

<% String pageCount = request.getParameter("pageCount"); String keyword = request.getParameter("keyword"); int n = Integer.parseInt(pageCount); for(int i=1;i<=n;i++) { %> <a href="index.jsp?p=<%= i %>&keyword=<%= keyword %>"><%= i %></a> <% } %>

Page 67: Web Programming

Web Programming 1.0 - 7 August 2007 67 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

BAB 9 Study Case 9.1 Konsep web yang akan dibuat Buatlah sebuah web untuk pendataan data customer. Di menggunakan web based application berbasiskan Java Server Pages. Database yang digunakan menggunakan Microsoft Access 2003. 9.2 Perancangan Database Customer Nama Field Tipe Data CustomerID Text CustomerName Text Gender Text Birthdate Date/Time Email Text Address Text Login Nama Field Tipe Data Username Text Password Text 9.3 Perancangan Halaman Web project/WEB-INF project/WEB-INF/project.mdb project/WEB-INF/connect.jsp project/WEB-INF/disconnect.jsp project/login.jsp project/process_login.jsp project/logout.jsp project/index.jsp [hanya jika sudah login]

- menampilkan semua data dalam bentuk tabel (data Customer) - tambahkan link buat ke add.jsp, edit.jsp - user bisa mendelete customer

project/add.jsp [hanya jika sudah login] project/process_add.jsp [hanya jika sudah login] project/edit.jsp [hanya jika sudah login] project/process_edit.jsp [hanya jika sudah login] project/delete.jsp [hanya jika sudah login]

1. Membuat halaman index.jsp untuk menampilkan data dalam bentuk tabel 2. Menambahkan fungsi search dan paging pada halaman index.jsp 3. Menambahkan fasilitas untuk delete 4. Menambahkan fitur untuk autentifikasi login 5. Menambahkan fasilitas add 6. Menambahkan fasilitas edit

Page 68: Web Programming

Web Programming 1.0 - 7 August 2007 68 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

Biografi Penulis Nama Lengkap : Ali Irawan, S.Kom Latar belakang pendidikan : 1990-1996, SD Tunas Keluarga Mulia Marsudirini Tg. Priok 1996-1999, SLTP Marsudirini Tg. Priok 1999-2002, SLTA Fons Vitae 2 Marsudirini Tg. Priok 2002-2006, Universitas Bina Nusantara Bidang yang dikuasai : C/C++, Visual Basic 6, Visual Basic .NET, ADO.NET, ASP.NET,

C#, Java, J2EE, J2ME, Symbian, Macromedia Flash, HTML, Javascript, PHP, MySQL, SQL Server

Pengalaman Kerja : Instruktur Programming Binus Center Instruktur dan Team Leader Programming Titans Instruktur Evo Traning Center Managing Director Evo Training Center Research and Development Manager PT Evosoft Indonesia Contact : Email: [email protected] [email protected] [email protected] YM: boylevantz

Page 69: Web Programming

Web Programming 1.0 - 7 August 2007 69 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

Informasi Training Professional Course Evo sebagai training center yang inovatif selalu menghadirkan training yang berbobot dan berguna untuk diterapkan di lapangan. Pada tahun 2007 Evo bekerja sama dengan inTouch, sebagai pemegang lisensi Nokia Developer Training di Indonesia, menghadirkan training-training resmi dari Nokia Developer Training. Training yang tersedia adalah Symbian/C++ Track (#4300,#5300,#6300) dan J2ME Track (#5500) di mana masing-masing akan mempelajari cara membuat aplikasi untuk micro device (mobile/handphone). Symbian Track merupakan gabungan dari beberapa modul terpisah dari Nokia Developer Training. Untuk info lebih detail syllabus materi, harga, dan benefit hubungi representatif kami melalui [email protected] Special Course Evo menghadirkan berbagai macam training untuk programming, web, dan design disesuaikan dengan minat pasar saat ini. Materi-materi yang tersedia adalah sebagai berikut:

Visual Basic 6.0 Materi ini mencakup dasar-dasar pemrograman dengan Visual Basic 6.0, sangat cocok bagi pemula yang belum pernah mengenal bahasa pemrograman Visual Basic, diperkaya dengan integrasi dengan database untuk membuat aplikasi database berbasiskan desktop, dan membuat laporan dengan menggunakan Crystal Report.

Visual Basic .NET Materi ini mencakup dasar pemrograman dengan menggunakan Visual Basic.NET, fokus pada penggunaan control-control untuk membuat aplikasi desktop. Sebagai langkah awal untuk masuk ke dunia pemrograman berbasiskan .NET

ADO.NET Materi ini mencakup pemrograman untuk membuat aplikasi database berbasikan ADO.NET. Fitur lebih dari ADO.NET dibahas di sini dan penggunaan Crystal Report untuk membuat laporan.

ASP.NET Materi ini mencakup training untuk membuat web dinamis dengan menggunakan ASP.NET 2.0, dan menggunakan database SQL Server 2000. Banyak web dikembangkan

Symbian Track

#4300 Symbian Basics Overview #5300 Series 60 C++ Intro

#6300 S60 3rd Edition Update

J2ME Track

#5500 Java MIDP Introduction

Page 70: Web Programming

Web Programming 1.0 - 7 August 2007 70 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

menggunakan ASP.NET, diperkaya dengan berbagai macam fitur yang memudahkan developer untuk membuat web dengan cepat, rapi, dan mudah di-maintain.

Java Fundamentals Materi ini adalah sangat cocok bagi yang mau berkenalan dengan dunia Java. Dalam training menghadirkan topik-topik esensial dalam pemrograman Java, dari dasar-dasar pemrograman, penggunaan class-class librarynya, Swing, Thread, Input/Output, hingga JDBC(Java Database Connectivity). Training ini sebagai langkah awal sebelum masuk ke training J2EE atau J2ME.

Java Server Pages

Materi ini dirancang untuk developer yang membutuhkan mendevelop aplikasi web dinamis dengan menggunakan Java Server Pages (JSP). Sebagai dasar awal untuk masuk ke dunia J2EE.

PHP Web Development Materi ini sangat populer, di mana membahas cara membangun web dinamis dengan menggunakan PHP (Hypertext Preprocessor), dengan didukung dengan database MySQL Server. PHP sendiri sangat luas digunakan di dunia web untuk pengembangan situs web. Training ini membahas dasar-dasar pemrograman dengan PHP, koneksi ke MySQL, Upload Files, dan menggunakan PHP Extensions. Sebaiknya peserta kelas ini sudah cukup familiar dengan pemrograman C dan dasar HTML.

Adobe Photoshop Materi ini membahas dasar pengenalan Adobe Photoshop sebagai tool untuk digital grafis desain. Topik-topiknya mencakup pengenalan tool, penggunaan layer, filter, masking, channel, dan sebagainya.

Macromedia Flash Materi ini membahas dasar pembuatan animasi dengan menggunakan Macromedia Flash. Membahas bagaimana cara pembuatan motion, button, movie clip, teknik masking, penggunaan Scene, penggunaan Component, dan ActionScript.

3D Studio Max

Materi ini membahas teknik untuk membuat objek 3D (3 dimensi). Menggunakan materials untuk memberikan tekstur pada objek yang sudah dibuat, lighting untuk menambahkan pencahayaan, dan camera untuk mengatur sudut pandang yang diambil.

Web Basic Course

Materi ini membahas dasar tentang membuat web statis dengan menggunakan HTML (Hypertext Markup Language), penggunaan CSS (Cascading Stylesheet), dan Javascript.

Selain itu Evo Training Center juga menyediakan Customize Training di mana training akan dirancang sesuai kebutuhan dari peserta.

Regular Course Regular Course adalah training yang disesuaikan dengan mata kuliah untuk mahasiswa.

Algoritma dan Pemrograman Materi ini mencakup dasar pemrograman dengan menggunakan bahasa C. Input/Output,Control Flow, penggunaan fungsi, array, string, file, teknik sorting dan searching.

Page 71: Web Programming

Web Programming 1.0 - 7 August 2007 71 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

Struktur Data Materi ini merupakan lanjutan dari Algoritma dan Pemrograman, mempelajari konsep-konsep struktur data seperti linked list, stack, queue, dan tree dengan menggunakan bahasa pemrograman C.

Pemrograman Beorientasi Objek

Materi ini mengajarkan konsep pemrograman berbasiskan objek atau yang sering dikenal dengan Object Oriented Programming. Training ini menggunakan bahasa pemrograman C++.

Algoritma dan MOOP Materi ini mengajarkan dasar pemrograman dengan menggunakan C++. Input/Output, Control Flow, fungsi, array, string, dan penggunaan class dalam program.

Programming 1 (Visual Basic 6.0) Materi ini membahas dasar pemrograman dengan Visual Basic 6.0 hingga integrasinya dengan database Microsoft Access.

Programming 2 (Java)

Materi ini membahas dasar pemrograman Java, menggunakan tool Eclipse memudahkan peserta dalam membuat aplikasi Java. Mempelajari fundamental, input/output, file, dan Swing untuk pembuatan aplikasu GUI (Graphical User Interface).

Sistem Basis Data Materi ini mengajarkan dasar pemrograman SQL (Structured Query Language) sebagai bahasa komunikasi ke database yang konvensional. Menggunakan SQL Server 2000 sebagai salah satu database yang sangat banyak digunakan.

Web Programming

Mater ini mengajarkan cara membuat web dinamis dengan menggunakan Java Server Pages. Database yang digunakan adalah Microsoft Access.

Page 72: Web Programming

Web Programming 1.0 - 7 August 2007 72 / 72

Jl Kebon Jeruk Raya No. 78B Palmerah Jakarta Barat 11480 Ph. +62 21 53671612 www.evopage.com

Copyright © 2007