Web Programming

Web Programming
- regular course -
Jl Kebon Jeruk Raya No 78B

Palmerah Jakarta Barat 11480
Ph. +62 21 53671612
www.evopage.com
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.
Web Programming 1.0 - 7 August 2007 2 / 72

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

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

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.
EVO FORUM
http://forum.evopage.com
Students Instructors
COMMUNICATE
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

Isi data registrasi kemudian Submit dan anda sudah dapat login.
Setelah itu login dan anda sudah dapat melakukan posting.

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.

Pilih Accept



1.1.2 Instalasi Apache Tomcat 5.5


Pilihlah Full.

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.


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

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
<HTML>
<HEAD>
<TITLE>Web Title</TITLE>
</HEAD>
<BODY>
Body Content Here
</BODY>
</HTML>
Simpanlah file tersebut sebagai HtmlBasic.htm atau HtmlBasic.html kemudian buka file
tersebut dengan menggunakan Browser, misalkan Internet Explorer atau Mozilla Firefox.

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>

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
<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>
Hasil pada browser adalah sebagai berikut :
Selain itu masih ada <DIR>, <DL>, <MENU>, <OL>, <UL>

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>

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>

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>

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.

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

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 2 Standard dasar pemrograman untuk dunia Java,

Database Access, Networking, Thread, Swing
Edition GUI Package, Applet
Java 2 Enterprise pemrograman untuk client/server

architecture, termasuk di dalamnya EJB,
Edition Servlet, JSP, dan sebagainya
Java 2 Micro pemrograman untuk mobile-device

(handphone)
Edition
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
%>

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>

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 : 

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.

<html>
<head>
<title>Simple JSP</title>
</head>
<body>
<%!
//deklarasi fungsi
public void someFunction()
{
.......
}
%>
<%
//pemanggilan fungsi
someFunction();
%>
</body>
</html>
1.4.4 JSP Expression
JSP Expression digunakan menampilkan isi suatu variabel. JSP Expression digunakan untuk
mempersingkat penulisan coding.
<%
java.util.Date date = new java.util.Date();
out.println(“Tanggal sekarang : “ + date); //cetak ke client

%>
Dengan menggunakan JSP Expression maka coding dapat dibuat sebagai berikut
<%
java.util.Date date = new java.util.Date();
%>
Tanggal sekarang : <%= date %>

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.
header.html
menu.html
content.html
main.jsp
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
<%@ include file=”header.html” %>

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.

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.
<%@ page language=”java” %>
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.
<%@ page extends=”myPackage.MyHttpPage” %>
import
Digunakan untuk mengimpor suatu class untuk digunakan dalam JSP

<%@ page import=”java.util.Date,java.sql.*” %>
session
Atribut session digunakan untuk menentukan apakah pada halaman tersebut dapat
menggunakan session atau tidak. Pembahasan apa itu session akan dibahas lebih
lanjut.
<%@ page session=”true” %>
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 buffer=”12kb” %>

autoFlush
Atribut ini digunakan untuk menentukan pada saat buffering maka pada saat buffer
terisi langsung di flush.
<%@ page buffer=”12kb” autoFlush=”true” %>
isThreadSafe
Jika nilainya true maka container dapat melakukan multiple request, jika false
container hanya memproses satu request pada satu waktu. Defaultnya adalah true.
<%@ page isThreadSafe=”false” %>
info
Atribut info digunakan untuk menyimpan informasi yang dapat diambil nilainya
dengan menggunakan fungsi Servlet.getServletInfo()
<%@ page info=”Author: Ali Irawan; version=1.0” %>
errorPage
Digunakan untuk error-handling. Pada saat exception terjadi pada halaman JSP maka
akan secara otomatis memforward ke URL yang ditentukan oleh errorPage.
<%@ page errorPage=”error.jsp” %>
isErrorPage
Atribut ini menentukan apakah halaman web ini digunakan untuk menangani
exception dari halaman JSP lain. Defaultnya adalah false.
<%@ page isErrorPage=”true” %>
contentType
Menentukan jenis content yang ditampilkan. Defaultnya adalah text/html. Default

character encoding yang digunakan adalah ISO-8859-1.
<%@ page contentType=”text/html; 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.

<%@ taglib uri=”URI to Tag Library” prefix=”tag prefix” %>
1.5 Implicit Objects
Implicit Objects adalah sekumpulan objek yang dapat digunakan dalam halaman JSP tanpa
harus dideklarasikan terlebih dahulu.
Nama
Tipe Deskripsi JSP Scope
Variabel
request javax.servlet.HttpServletRequest untuk mengambil parameter request
dari HTTP request
response javax.servlet.HttpServletResponse mengenkapsulasi HTTP page
response
pageContext javax.servlet.jsp.PageContext mendukung forward, include, page
mengambil implicit object
session javax.servlet.http.HttpSession mekanisme penyimpanan data session
client di berbeda halaman
application javax.servlet.ServletContext menyediakan akses informasi application
ke web server dan menulis log
ke servlet log
out javax.servlet.jsp.JspWriter untuk menampilkan output ke page
client
config javax.servlet.ServletConfig untuk mengambil nilai-nilai page
inisiliasasi dan akses ke
ServletContext
page javax.servlet.jsp.HttpJspPage sinonim dari “this” menunjuk page
pada halaman itu sendiri
exception java.lang.Throwable objek yang mengenkapsulasi page
error yang terjadi. bisa
diakses pada error 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


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:

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
<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>
Kemudian pada halaman tujuan.jsp buat code berikut ini.
<%@ 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 %>
<%
}
%>
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

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.
<?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>
Untuk mengambil nilai yang ada pada web.xml, <context-param> gunakan
application.getInitParameter(“pesan_error”)



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
…
<%@ include <%

file=”include.jsp” %> int a = 10;
out.println(“Nilai a: “);
%>
//disini a dikenal
<%= a %>
<jsp:include>
… include.jsp
<jsp:include <%
page=”include.jsp”/> int a = 10;
out.println(“Nilai a: “);
%>
//disini a tidak dikenal
<%= a %>
//akan menghasilkan error
3.2 <jsp:forward>
Digunakan untuk meneruskan request ke halaman lain. Contoh penggunaannya adalah sebagai
berikut.
Buatlah sebuah file bernama first.jsp


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
<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> </td>
<td><input type="submit" name="Submit" value="Submit"></td>
</tr>
</table>
</form>
</body>
</html>
second.jsp
<jsp:forward page="third.jsp">
<jsp:param
name="loggedtime" value="<%= new java.util.Date() %>"/>
</jsp:forward>
third.jsp
<%@ 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>
<%
}
%>

Lab 3
Membuat datepicker.jsp untuk digunakan dalam aplikasi.
Buatlah sebuah datepicker.jsp agar bisa diinclude ke dalam aplikasi sebagai berikut.
<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>
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


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).
Java Bean
name
setName()
getName()
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.

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

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

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

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

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.

Pada halaman JSP untuk menggunakan JavaBean tersebut dapat menggunakan <jsp:useBean>
seperti contoh berikut ini.
useBean.jsp
<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());
%>
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: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"/>
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:setProperty name="obj" property="id" param="txtid"/>

<jsp:setProperty name="obj" property="name" param="txtname"/>
<jsp:setProperty name="obj" property="phoneNumber"
param="txtphone"/>


Atau untuk lebih singkat bisa dilakukan dalam satu baris yaitu
<jsp:setProperty name="obj" property="*" />

Dengan syarat nama field-field yang ada di form sebelumnya harus sama yaitu id, name,
phoneNumber.

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

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
<%@ 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>");
%>
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.
//... 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

Statement
Statement digunakan untuk melakukan pengiriman perintah ke database. Statement dibuat
dengan menggunakan method createStatement() dari class java.sql.Connection.
Statement stmt = con.createStatement();
Secara default akan sama seperti
Statement stmt = con.createStatement(

ResultSet.TYPE_FORWARD_ONLY, ResultSet.CONCUR_READ_ONLY);
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 1003
menggunakan fungsi previous(), first(), last(), dan
sebagainya.
TYPE_SCROLL_SENSITIVE Cursor bisa bergerak dua arah dan sensitif terhadap 1005
perubahan oleh client lain.
TYPE_SCROLL_INSENSITIVE Cursor bisa bergerak dua arah dan tidak sensitif 1004
terhadap perubahan oleh client lain.
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 1008
mengubah data
5.4 Mengubah data di database
Untuk mengubah data di database gunakan sintaks berikut ini.
Statement stmt = con.createStatement(

ResultSet.TYPE_SCROLL_INSENSITIVE, ResultSet.CONCUR_UPDATABLE);
stmt.executeUpdate(“INSERT INTO tab_login VALUES

(‘admin’,’pass’)”);
stmt.close();
Di dalam fungsi executeUpdate() dikirimkan sintaks yang mengubah data seperti insert, update,
delete, drop table dan sebagainya.

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) mengembalikan sebuah objek sesuai dengan indeks atau
Object getObject nama kolom
(String columnName)
String getString(int index) mengembalikan sebuah String sesuai dengan indeks atau
String getString nama kolom
(String columnName)
int getInt(int index) mengembalikan sebuah int sesuai dengan indeks atau nama
int getInt kolom
(String columnName)
short getShort(int index) mengembalikan sebuah short sesuai dengan indeks atau
short getShort nama kolom
(String columnName)
long getLong(int index) mengembalikan sebuah long sesuai dengan indeks atau
long getLong nama kolom
(String columnName)
byte getByte(int index) mengembalikan sebuah byte sesuai dengan indeks atau
byte getByte nama kolom
(String columnName)
Date getDate (int index) mengembalikan sebuah Date sesuai dengan indeks atau
Date getDate nama kolom
(String columnName)
boolean getBoolean (int index) mengembalikan sebuah boolean sesuai dengan indeks atau
boolean getBoolean nama kolom
(String columnName)
float getFloat (int index) mengembalikan sebuah float sesuai dengan indeks atau
float getFloat nama kolom
(String columnName)
double getDouble (int index) mengembalikan sebuah double sesuai dengan indeks atau
double getDouble nama kolom
(String columnName)

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.

BAB 6
Java Database Connectivity (JDBC)(2)
6.1 Menggunakan PreparedStatement
Untuk melakukan query ke database dapat menggunakan PreparedStatement
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()
Berikut ini adalah contoh coding untuk update ke database
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();
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.
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);

Lab 6
Melanjutkan Lab 5. Copy semua di lab 5 ke lab 6
lab6/WEB-INF
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

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
<%@ page session=”true” %>
Cara menyimpan objek ke dalam Session menggunakan fungsi
session.setAttribute(“pesan”,”ERROR”);
Untuk mengambil objek dari Session menggunakan fungsi
String temp = (String) session.getAttribute(“pesan”);
Untuk membuang objek dari Session
session.removeAttribute(“pesan”);
Untuk membuang semua objek dari Session
session.invalidate();

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

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

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.

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

WEB-INF/navigation.jsp
<%
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>
<%
}
%>
Kemudian pada halaman index.jsp bisa diinclude dengan menggunakan <jsp:include>
<jsp:include page="WEB-INF/navigation.jsp">
<jsp:param name="pageCount"
value="<%= pageCount %>"/>
</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.
<form name="form1" method="get" action="index.jsp">

Search
<input name="keyword" type="text" id="keyword">
<input type="submit" value="Submit">
</form>
Kemudian pada saat form disubmit data akan dikirim ke index.jsp dan akan ditambahkan
coding sebagai berikut.
<%
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+"%'";
...
%>

Untuk pada paging harus kita lakukan sedikit modifikasi sebagai berikut
<jsp:include page="WEB-INF/navigation.jsp">
<jsp:param name="pageCount"
value="<%= pageCount %>"/>
<jsp:param name="keyword"
value="<%= keyword %>"/>
</jsp:include>
Pada halaman WEB-INF/navigation.jsp ditambahkan menjadi sebagai berikut:
<%
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>
<%
}
%>
Lab 8
lab8/WEB-INF
lab8/WEB-INF/navigation.jsp
lab8/index.jsp

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

CustomerID Text
CustomerName Text
Gender Text
Birthdate Date/Time
Email Text
Address Text
Login

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

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:
ali@evopage.com
boylevantz@gmail.com
ali@evosoft.co.id
YM: boylevantz

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 J2ME Track
#4300 Symbian Basics Overview #5500 Java MIDP Introduction

#5300 Series 60 C++ Intro
#6300 S60 3rd Edition Update
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 nctc@evopage.com
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

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.

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

Copyright © 2007

Web Programming

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Programming

Uploaded by

Copyright:

Available Formats

Web Programming

Jl Kebon Jeruk Raya No 78B

Web Programming 1.0 - 7 August 2007 2 / 72

Pengenalan Evo Forum ........................................................................................5

Web Programming 1.0 - 7 August 2007 3 / 72

5.2 Koneksi database melalui JDBC-ODBC Driver ............................................... 54

Web Programming 1.0 - 7 August 2007 4 / 72

Pengenalan Evo Forum

Web Programming 1.0 - 7 August 2007 5 / 72

Setelah itu login dan anda sudah dapat melakukan posting.

Web Programming 1.0 - 7 August 2007 6 / 72

1.1.1 Instalasi Java 2 SDK 5.0

Berikut ini adalah cara instalasi Java 2 5.0 Development Kit.

Web Programming 1.0 - 7 August 2007 7 / 72

Web Programming 1.0 - 7 August 2007 8 / 72

Web Programming 1.0 - 7 August 2007 9 / 72

Web Programming 1.0 - 7 August 2007 10 / 72

1.1.2 Instalasi Apache Tomcat 5.5

Web Programming 1.0 - 7 August 2007 11 / 72

Web Programming 1.0 - 7 August 2007 12 / 72

Web Programming 1.0 - 7 August 2007 13 / 72

Masukkan port yang unik, misalkan 8081

Web Programming 1.0 - 7 August 2007 14 / 72

Web Programming 1.0 - 7 August 2007 15 / 72

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

Web Programming 1.0 - 7 August 2007 16 / 72

1.2 Pengenalan HTML

1.2.1 Struktur Dokumen

Struktur dokumen dari HTML adalah sebagai berikut

Web Programming 1.0 - 7 August 2007 17 / 72

1.2.2 Anchor Element

Buatlah file Anchor.html dengan isi sebagai berikut

<a href="http://forum.evopage.com">Go To Evo Forum</a><BR><BR>

Web Programming 1.0 - 7 August 2007 18 / 72

1.2.3 Block Formatting

Block formatting elements digunakan untuk memformat tampilan sekumpulan teks di

1.2.4 List Elements

Hasil pada browser adalah sebagai berikut :

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

Web Programming 1.0 - 7 August 2007 19 / 72

1.2.5 Information type and Character Formatting Elements

1.2.6 Image Elements

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

Web Programming 1.0 - 7 August 2007 20 / 72

1.2.7 Form Elements

Digunakan untuk menampilkan form untuk meminta input dari user.

Web Programming 1.0 - 7 August 2007 21 / 72

1.2.8 Table Elements

Web Programming 1.0 - 7 August 2007 22 / 72

1.2.9 Character Data

HTML mendefinisikan beberapa karakter khusus.

&amp untuk menampilkan tanda (&)

1.2.10 Dynamic HTML Documents

Fitur untuk menampilkan dokumen HTML secara lebih dinamis. Menggabungkan

Web Programming 1.0 - 7 August 2007 23 / 72

<frameset rows="80,*" frameborder="YES" border="1" framespacing="1">

1.2.12 Object Embedding

1.2.13 Server Side Includes

Web Programming 1.0 - 7 August 2007 24 / 72

1.3 Pengenalan JSP

Java 2 Standard dasar pemrograman untuk dunia Java,

Java 2 Enterprise pemrograman untuk client/server

Java 2 Micro pemrograman untuk mobile-device

1.4 JSP Elements