MODUL PERKULIAHAN Pemrogramam Web...

192
MODUL PERKULIAHAN Pemrogramam Web Enterprise Pengenalan Java Server Pages Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh Ilmu Komputer Sistem Informasi 01 87040 Tim Dosen Abstract Kompetensi Pengenalan pemrograman web enterprise dan pengenalan pemrograman java server pages Mahasiswa dapat mengerti yang dimaksud java server pages, web server dan pemrograman web

Transcript of MODUL PERKULIAHAN Pemrogramam Web...

Page 1: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

MODUL PERKULIAHAN

Pemrogramam Web Enterprise

Pengenalan Java Server Pages

Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh

Ilmu Komputer Sistem Informasi

01 87040 Tim Dosen

Abstract Kompetensi

Pengenalan pemrograman web enterprise dan pengenalan pemrograman java server pages

Mahasiswa dapat mengerti yang dimaksud java server pages, web server dan pemrograman web

Page 2: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 2

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Tim DosenI. http://www.mercubuana.ac.id

Pengenalan Java Server Pages

1.1 Dasar JSP

JSP adalah suatu teknologi web berbasis bahasa pemrograman Java dan berjalan di

Platform Java, serta merupakan bagian teknologi J2EE (Java 2 Enterprise Edition). JSP

sangat sesuai dan tangguh untuk menangani presentasi di web. Sedangkan J2EE merupakan

platform Java untuk pengembangan sistem aplikasi enterprise dengan dukungan API

(Application Programming Inteface) yang lengkap dan portabilitas serta memberikan sarana

untuk membuat suatu aplikasi yang memisahkan antara business logic (sistem), presentasi

dan data.

JSP merupakan bagian dari J2EE dan khususnya merupakan komponen web dari

aplikasi J2EE secara keseluruhan. JSP juga memerlukan JVM (Java Virtual Machine) supaya

dapat berjalan, yang berarti juga mengisyaratkan keharusan menginstal Java Virtual Machine

di server, dimana JSP akan dijalankan. Selain JVM, JSP juga memerlukan server yang

disebut dengan Web Container.

Teknologi JSP menyediakan cara yang lebih mudah dan cepat untuk membuat halaman-

halaman web yang menampilkan isi secara dinamik. Teknologi JSP didesain untuk membuat

lebih mudah dan cepat dalam membuat aplikasi berbasis web yang bekerja dengan berbagai

macam web server, application server, browser dan development tool.

Java Server Pages (JSP) adalah bahasa scripting untuk web programming yang bersifat

server side seperti halnya PHP dan ASP. JSP dapat berupa gabungan antara baris HTML dan

fungsi-fungsi dari JSP itu sendiri. Berbeda dengan Servlet yang harus dikompilasi oleh USER

menjadi class sebelum dijalankan, JSP tidak perlu dikompilasi oleh USER tapi SERVER

yang akan melakukan tugas tersebut. Makanya pada saat user membuat pertama kali atau

melakukan modifikasi halaman dan mengeksekusinya pada web browser akan memakan

sedikit waktu sebelum ditampilkan.

1.2 Daur Hidup JSP

Sebagai gambaran bagaimana JSP melalui masa hidupnya bisa dilihat pada gambar

berikut :

Gambar 1.1 Daur hidup JSP

Seperti tipe aplikasi java lainnya (Servlet, Applet, Midlet dll), JSP juga bertipe strong

Type artinya penggunaan variable pada halaman tersebut harus dideklarasikan terlebih

dahulu. Misalnya pada sintaks pengulangan berikut:

for (int i=1; i<13; i++)

{

// statement

}

Page 3: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 3

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Tim DosenI. http://www.mercubuana.ac.id

Seperti halnya skrip-skrip server side yang lain, JSP pun memerlukan Web server. Skrip

ASP memerlukan IIS sebagai web server, PHP memerlukan IIS atau Apache, sedangkan JSP

bisa menggunakan Apache Tomcat sebagai salah satu web server yang mendukungnya.

Agar bisa menjalankan file-file JSP yang berbasis Java, diperlukan web server yang

mampu memproses Java, atau minimal JSP engine yang dapat terintegrasi dengan web server.

1.3 Web Container

Menurut spesifikasi J2EE, dikenal EJB Container, Web Container dan Application

Server. Web Container adalah services yang dijalankan oleh suatu Java Application Server

hususnya untuk services yang compliance/kompatibel dengan Servlet dan JSP. Selain

menjadi services oleh Java Application Server, Web Container dapat berdiri sendiri. Contoh

Web Container adalah Tomcat, ServletExec, Resin, Jrun, Blazix. Web Container juga dapat

bekerja sama dengan web server, misalnya Tomcat dengan Apache, Jrun dengan IIS.

Web Server adalah software untyk server yang menangani request melalui protokol

HTTP yang digunakan oleh situs-situs web saat ini dalam menangani request file statik

HTML, sepeti Apache dan Microsoft IIS. Web server sekarang sering “dibungkus” oleh Java

Application Server sebagai HTTP Server.

Java Application Server adalah Server yang terdiri atas HTTP Server (Web Server),

EJB Container maupun Web Container. Contoh Java Application Server: Sun J2EE RI

1.2/1.3, Borland AppServer 4.5/Enterprise Server 5.0, Oracle9i Application Server dan

lainnya.

1.4 Jakarta Tomcat

Jakarta Tomcat adalah web application server, yang mempunyai kemampuan sebagai

Servlet container dan JSP container di mana Anda bisa mendeploy Servlet dan JSP. Di atas

Jakarta Tomcat, Servlet dan JSP akan bekerja melayani request dari client, yang lumrahnya

adalah berupa browser.

Untuk bisa menjalankan Jakarta Tomcat, Anda membutuhkan Java Development Kit

(JDK). Untuk instalasi Jakarta Tomcat, Anda bisa mendownload binary dari

http://jakarta.apache.org , dalam format .zip, .tar.gz. Yang Anda perlu lakukan hanyalah

mendecompress file tersebut.

Dalam bekerja dengan Jakarta Tomcat, Anda mempunyai sebuah directory yang dikenal

sebagai TOMCAT_HOME. TOMCAT_HOME adalah directory di mana Jakarta Tomcat

diinstall. Selanjutnya di bawah TOMCAT_HOME Anda akan menemukan beberapa

subdirectory, diantaranya bin/, conf/, logs/ dan webapp/. Di dalam subdirectory bin/ terdapat

file-file executable terutama untuk menjalankan dan menghentikan Jakarta Tomcat. Di dalam

subdirectory conf/ terdapat file-file untuk configuration. Di dalam subdirectory logs/ terdapat

file-file log. Dan subdirectory webapp/ adalah di mana Anda bisa meletakkan aplikasi Web

yang Anda bangun dengan Servlet dan JSP.Di bawah subdirectory webapp/ Anda bisa

mengcreate subdirectory. Sub directory ini akan dijadikan sebagai Context oleh Jakarta

Tomcat.

Anda menjalankan Jakarta Tomcat dengan mengexecute startup.sh di subdirectory

bin/. Sedangkan untuk menghentikan Tomcat Anda mengexecute shutdown.sh di sub

directory bin/ juga.Secara default Jakarta Tomcat siap melayani request dari client melalui

port 8080. Melalui Web browser, Anda bisa menghubungi http://localhost:8080

1.5 Context

Page 4: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 4

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Tim DosenI. http://www.mercubuana.ac.id

Sebuah Context adalah sebuah aplikasi Web yang terpisah, berdiri sendiri, independen.

Sebuah Context mempunyai configuration masing-masing. Library dari sebuah Context juga

tidak bisa dibaca oleh Context lain. Obyek di sebuah Context tidak bisa mengakses obyek di

Context lain.

Di atas sebuah web application server seperti Jakarta Tomcat bisa dideploy lebih dari

satu Context. Anda bisa membuat sebuah Context dengan mengcreate sebuah subdirectory di

bawah TOMCAT_HOME/webapps/. Dalam folder webapps/ inilah file JSP ditaruh.

Sebuah Context yang lengkap mempunyai subdirectory WEB-INF/ di mana terdapat

web.xml yang merupakan configuration file dari Context ini. Di dalam WEB-INF/ bisa

terdapat subdirectory classes/ dan lib/. Subdirectory classes/ adalah di mana file-file .class

diletakkan, sedangkan lib/ adalah di mana file-file .jar, yang merupakan kumpulan file-file

.class, diletakkan.

1.6 Java Virtual Machine

Sebelum menginstal Web Container sebagai prasyarat untuk menjalanka JSP, maka terlebih

dulu harus menginstal Java Virtual Machine. Java Virtual Machine adalah software yang

berfungsi untuk menerjemahkan program Java supaya dapat dimengerti oleh komputer.

Untuk memiliki Java Virtual Machine di komputer, maka perlu mendownload JDK (Java

Development Kit) yang tersedia di http://java.sun.com karena untuk development diperlukan

class-class API. Apabila tidak melakukan proses development dan hanya perlu menjalankan

program, maka yang diperlukan hanya JRE (Java Runtime Environment).

1.7 Percobaan

1. Instalasi Java Virtual Machine

a. Lakukan Java Virtual Machine sampai selesai.

b. Lakukan setting path dan classpath dengan cara sebagai berikut:

- Buka Control Panel – System

- Pilih tab : Advanced

- Pilih button: Environment Variables

- Di bagian system variables lakukan setting PATH dan

CLASSPATH sebagai berikut:

Pada variabel PATH tambahkan : c:\nama_folder_tempat_instal\bin

Pada variabel CLASSPATH tambahkan: .;c:\nama_folder_tempat_instal\lib\tools.jar

Bila variabel CLASSPATH belum ada maka buat variabel baru dengan menekan

tombol new.

c. Lakukan pengecekan hasil instalasi dengan cara buka command promt, Ketikkan

perintah javac, bila keluar instruksi cara penggunaan maka instalasi telah berhasil.

Page 5: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 5

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Tim DosenI. http://www.mercubuana.ac.id

Gambar 1.2 Contoh setting Environment Variables

Gambar 1.3 Tampilan bila instalasi j2sdk berhasil

2. Instalasi Web Server Tomcat

a. Instal Web Server Tomcat sampai selesai

b. Jalankan Web Server Tomcat dengan cara memilih menu Start

Tomcat dari pop up menu seperti pada gambar dan akan keluar

tampilan seperti pada Gambar 1.3 dan selanjutkan akan keluar

tampilan seperti pada Gambar 1.5. Untuk menghentikan Web

Server maka pilih menu Stop Tomcat.

Page 6: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 6

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Tim DosenI. http://www.mercubuana.ac.id

Gambar 1.4 Menu untuk menjalankan Web Server Tomcat

Gambar 1.5 Tampilan Start Tomcat

c. Jalankan browser dan akses alamat http://localhost:8080 . Bila

instalasi web server Tomcat berhasil maka akan keluar tampilan

seperti pada Gambar 1.6.

Gambar 1.6 Tampilan http://localhost :8080

3. Membuat context.

a. Buatlah sebuah folder (misal dengan nama „proses‟) didalam

TomcatHome/webapp/. Maka akan didapat hirarki sebagai berikut

TomcatHome/webapp/proses.

Page 7: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 7

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Tim DosenI. http://www.mercubuana.ac.id

b. Selanjutnya kopi folder WEB-INF dari

TomcatHome/webapp/ROOT ke TomcatHome/webapp/proses

sehingga didapat hirarki TomcatHome/webapp/proses/WEB-INF.

c. Dengan demikian maka didapat contex baru yang bernama

proses. Dalam contex baru inilah file-file jsp ditaruh.

d. Untuk mencoba web server yang dibuat jalan atau tidak maka

taruhlah file dalam contex proses yang baru dibuat misal file

Data.txt. Hasil seperti tampak pada Gambar 1.7.

Gambar 1.7 Hirarki folder pada webapps

e. Buka browser dan ketikkan alamat url

http://localhost:8080/proses . Bila context berhasil dibangun maka

akan didapat tampilan seperti pada Gambar 1.8.

Page 8: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 8

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Tim DosenI. http://www.mercubuana.ac.id

Gambar 1.8 Isi context proses

4. Membuat program sederhana untuk menampilkan halaman JSP

pada browser.

a. Buatlah file seperti pada Listing 1.1, simpan dengan nama Hello.jsp. Taruh file ini

dalam folder proses.

Listing 1.1 Hello.jsp

b. Akses Hello.jsp dengan cara menuliskan alamat

http://localhost:8080/proses/Hello.jsp dan akan didapatkan tampilan seperti pada

Gambar 1.9.

Gambar 1.9 Tampilan Hello.jsp

Page 9: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

Latihan

1. Apa yang dimaksud dengan bahasa scripting?

2. Apa yang dimaksud dengan web server?

3. Apa yang dimaksud dengan web container?

4. Apa yang dimaksud dengan contex?

5. Apa kegunaan web server?

6. Sebutkan macam tag HTML, jelaskan kegunaannya, dan berikan

contoh masing-masing tag tersebut!

7. Buat context baru yang bernama coba!

8. Membuat program seperti pada Listing 1.2. Simpan dengan

nama Pertama.jsp.

Listing 1.2 Pertama.jsp

9. Tampilkan Hai.jsp pada browser!

<html>

<body>

<% out.println("Hello World !"); %>

</body>

</html>

<HTML>

<HEAD>

<TITLE>Contoh JSP</TITLE>

</HEAD>

<BODY>

<H1> <%= "Program JSP Pertamaku!" %>

</H1>

</BODY>

</HTML>

Page 10: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 10

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

Daftar Pustaka

Hans Bergsten, . 2002. JavaServer Pages™, 2nd Edition. O'Reilly Yuliana, eepis-its.edu .

Page 11: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

MODUL PERKULIAHAN

Pemrogramam Web Enterprise

Scripting Element JSP

Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh

Ilmu Komputer Sistem Informasi

02 87040 Tim Dosen

Abstract Kompetensi

Pengenalan element script pada jsp

Mahasiswa mengerti dasar script pada jsp

Page 12: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 2

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

Scripting Element JSP

2.1 Mengenal Elemen Scripting

Kita bahas untuk elemen scipting. Elemen scripting terdiri atas 3 macam yaitu:

• Scriplet

• Deklarasi

• Ekspresi

2.1.1 Scriplet

Kita telah mengenal kode :

<%

out.print (“Selamat Belajar JSP di Politeknik Elektronika Negeri Surabaya”);

%>

Tanda <%%> menyatakan salah satu tag JSP yang dikenal dengan sebutan tag scriplet.

Tag tersebut mengisyaratkan bahwa kode yang ada didalamnya adalah kode JSP. Di

dalam tag tersebut sebenarnya anda bisa menuliskan pernyataan – pernyataan Java.

Dalam hal ini setiap pernyataan diakhiri dengan titik koma (;). Pernyataan adalah satu

instruksi lengkap yang akan diproses oleh Java. Kode berikut:

out.print (“Selamat Belajar JSP”);

Merupakan contoh sebuah pernyataan, yaitu untuk mengirimkan string yang menjadi

argumen print() ke halaman web.

Di dalam bahasa Java, pernyataan untuk menampilkan tulisan :

Selamat Belajar JSP di Politeknik Elektronika Negeri Surabaya

Berupa :

System.Out.print (“Selamat Belajar JSP”);

Namun pada penulisan kode JSP, kata system perlu dibuang. Dalam hal ini out

merupakan suatu objek yang telah terdefinisi (disediakan oleh JSP).

Selain menggunakan print(), kadangkala pemrogram JSP memakai println(). Perbedaan

kedua metode ini :

• Print() tidak menambah baris baru (newline) pada keluaran, sedangkan.

• Println() menambahkan baris baru.

Perbedaan kedua metode ini terletak pada kode HTML yang dibangkitkan dan bukan

pada tampilan browser.

Page 13: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 3

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

2.1.2 Mengenal Ekspresi JSP

Hasil suatu ekspresi JSP dapat dijadikan sebagai keluaran pada halaman web dengan

menggunakan bentuk tag yang bersifat khusus, yakni seperti berikut :

<%= ekspresi Java%>

Tanda <%= %> biasanya dinamakan tag ekspresi. Dalam hal ini semua ekspresi

dikonversikan ke string (deretan karakter) dan disisipkan ke halaman web. Sebagai

contoh :

Waktu Sekarang : <%= new java.util.Data() %>

Akan menambahkan string hasil :

new java.util.Date()

Di belakang string Waktu Sekarang. Perlu diketahui,

new java.util.Date()

merupaka ekspresi yang biasa digunakan pada pemrograman Java untuk mendapatkan

waktu sekarang.

2.1.3 Action

Action merupakan salah satu elemen JSP berupa tag-tag. JSP mengenal dua macam Action,

yaitu:

• Tag Action Standar

• Custom Tag

Tag Action Standar

Tag-tag action standar tersebut adalah :

• <jsp:usebean>

• <jsp:setproperty>

• <jsp:getproperty>

• <jsp:include>

• <jsp:param>

• <jsp:plugin>

• <jsp:forward>

Untuk tag action standar berikut ini <jsp:usebean>, <jsp:setproperty>, <jsp:getproperty>

dijelaskan pada bab 5. Penjelesan masing-masing tag action standar sebagai berikut:

<jsp:include>

Page 14: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 4

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

Tag ini digunakan untuk mengikutsertakan file lain dalam JSP saat request dilakukan. Contoh

penggunaan: <jsp:include page=‖satu.html‖ flush=‖true‖>

<jsp:plugin>

Tag ini digunakan untuk menghasilkan kode-kode yang sesuai target browser dalam

menyisipkan komponen Java bean atau Applet secara otomatis.

<jsp:param>

Tag ini digunakan untuk melengkapi tag <jsp:params>, <jsp:plugin>, maupun <jsp:forward>.

Translation error akan terjadi apabila digunakan di tempat lain.

<jsp:params>

Tag ini digunakan hanya dalam jsp:plugin saja. Penggunaan di tempat lain akan

mengakibatkan translation time error.

<jsp:forward> Tag ini digunakan untuk memforward ke file JSP, Servlet atau file statik lain. Contoh

penggunaan: <jsp:forward page=‖alamaturl.jsp‖>

2.2 Percobaan

1. Perintah print() Kode : println1.jsp

<html>

<head>

<title>Contoh Println</title>

</head>

<body>

<%

out.print("Selamat Belajar JSP ");

out.print("Semoga Sukses dan Menikmati JSP");

%>

</body>

</html>

Listing program 2.1

Hasil di browser :

Page 15: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 5

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

Gambar 2.1

Jika anda melihat kode HTML-nya dari sisi klien dengan viwsource, maka kodenya

adalah sebagai berikut :

<html>

<head>

<title>Contoh Println</title>

</head>

<body>

Selamat Belajar JSP

Semoga Sukses dan Menikmati JSP

</body>

</html>

Listing program 2.2

Jika semua println() pada kode diganti dengan print(). Maka akan diperoleh kode

HTML seperti berikut :

<html>

<head>

<title>Contoh Println</title>

</head>

<body>

Selamat Belajar JSP di Mercu Buana Semoga Sukses dan Menikmati JSP

</body>

</html>

Listing program 2.3

2. Perintah println()

Kode : println2.jsp

<html>

<head>

Page 16: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 6

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

<title>Contoh Println</title>

</head>

<body>

<%

out.println("Selamat Belajar JSP di Mercu Buana<br>");

out.println("Semoga Sukses dan Menikmati JSP");

%>

</body>

</html>

Listing program 2.4

Hasil kode HTML dari sisi klient :

<html>

<head>

<title>Contoh Println</title>

</head>

<body>

Selamat Belajar JSP di Mercu Buana<br>

Semoga Sukses dan Menikmati JSP

</body>

</html>

Listing program 2.5

3. Membuat ekspresi

Kode : ekspresi1.jsp

<html>

<head>

<title>Tag ekspresi</title>

</head>

<body>

Waktu Sekarang : <%= new java.util.Date()%>

</body>

</html>

Listing program 2.6

Hasil kode ekspresi2.jsp

Page 17: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 7

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

Gambar 2.3

Kode : ekspresi2.jsp

<html>

<head>

<title>Tag Ekspresi</title>

</head>

<body>

Waktu Sekarang : <% out.print(new java.util.Date());%>

</body>

</html>

Listing program 2.7

Hasil kode ekspresi2.jsp

Gambar 2.4

Jadi penulisan : <%= new java.util.Date()%>

Dapat digunakan untuk menyederhanakan penulisan :

<% out.print(new java.util.Date());%>

4. Penggunaan Action Include

Sebagai latihan, Anda akan menggunakan tag action include sehingga untuk

menghasilkan tampilan untuk navigation bar yang dapat memberitahukan dimana kita berada

dan memberi tampilan button yang berbeda.

Lakukan langkah-langkah berikut:

Page 18: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 8

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

1. Pertama-tama Anda membuat indextaginclude.html

2. Kemudian buat taginclude.jsp, fungsi file ini sebagai halaman JSP yang melakukan

include dan memberikan data parameter ke file yang diincludekan.

3. Buat navbar.jsp, sebagai file yang diicludekan yang menerima data parameter

untuk menampilkan navigation bar yang sesuai.

4. Jalankan dengan http://localhost:8080/.../ indextaginclude.html

Output program :

Tampilan utama seperti ditunjukkan gambar 2.5. Jika klik Home maka tampak seperti gambar

2.6, jika kita klik Tentang Kami maka akan tampak seperti gambar 2.7.

Gambar 2.5

Gambar 2.6

Page 19: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 9

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

Gambar 2.7

5. Melakukan forwarding request.

Anda mungkin telah mengenal penggunaan redirect dalam pemrograman web, yang

berfungsi untuk mengantarkan user ke halaman lain. Di dalam JSP terdapat tag action

forward yang memiliki fungsi yang mirip tetapi lebih baik lagi, karena kita dapat

mengalihkan objek request dari satu file JSP ke file JSP lain, Servlet atau file HTML biasa.

Informasi yang ada pada request juga ikut dikirimkan saat forwarding dilakukan sehingga

apabila kita mengirimkan request dengan data parameter-parameter, informasi ini juga akan

diterima oleh program JSP/Servlet yang menjadi tujuan forwarding.

Kode untuk melakukan forwarding adalah

<jsp:forward page=”namafile.jsp”/>

Tag <jsp:forward> juga dapat memiliki subelemen jsp:param yang dapat digunakan untuk

mengirimkan data pada request yang digunakan forwarding. Penggunaan tag jsp:param dalam

jsp:forward adalah sebagai berikut:

<jsp:forward page=‖<%=namafile%>‖>

<jsp:param name=‖nama1‖ value=‖nilai1‖/>

<jsp:param name=‖nama2‖ value=‖nilai2‖/>

</jsp:forward>

Penjelasan listing :

Awalforward.jsp berfungsi untuk memforward ke tujuanforward.jsp dengan mengirimkan

data melalui subelemen jsp:param. Pada saat forwarding oleh awalforward.jsp dilakukan,

sebenarnya seakan-akan request diambil alih oleh tujuanforward.jsp sehingga parameter yang

disisipkan dapat diterima oleh tujuanforward.jsp secara otomatis. Untuk mendapatkan data

dari subelemen jsp:param dapat dilakukan dengan cara:

String testdata = request.getParameter("data");

Output program :

Page 20: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 10

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

Gambar 2.8

6. Contoh scripting elements.

Gambar 2.9

7. Contoh penggunaan <jsp:forward> yang melibatkan <jsp:param>

Page 21: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 11

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

forward2.jsp

Output :

Page 22: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

Latihan

1. Apa yang dimaksud dengan scriplet?

2. Sebutkan cara pembuatan scriplet?

3. Apa yang dimaksud dengan ekspresi?

4. Sebutkan cara pembuatan ekspresi ?

5. Buat sebuah program registrasi online yang diproses oleh suatu file JSP dan

nilainya langsung dikembalikan. Data yang dimasukkan dalam registrasi online

meliputi : nama, tempat tanggal lahir, asal sekolah, jurusan.

<html>

<style type="text/css">

<!--

.style1 {

font-size: 18px;

font-weight: bold;

}

-->

</style>

<body>

<table width="439" border="0" bgcolor="#0000FF">

<tr>

<td width="91" bgcolor="#00FFFF"><div align="center" class="style1"><a

href="taginclude.jsp?link=home">Home</a></div></td>

<td width="83" bgcolor="#00FFFF"><div align="center" class="style1"><a

href="taginclude.jsp?link=produk">Produk</a></div></td>

<td width="101" bgcolor="#00FFFF"><div align="center" class="style1"><a

href="taginclude.jsp?link=kontak">Kontak</a></div></td>

<td width="136" bgcolor="#00FFFF"><div align="center" class="style1"><a

href="taginclude.jsp?link=tentang">Tentang Kami</a> </div></td>

</tr>

</table>

</body>

</html>

<%@ page contentType="text/html; charset=iso-8859-1" language="java"

import="java.sql.*" errorPage="" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

</head>

<body>

<%

String link=request.getParameter("link");

%>

<jsp:include page="navbar.jsp" flush="true">

<jsp:param name="link" value="<%=link%>"/>

</jsp:include>

<a href="indextaginclude.html"> KEMBALI KE MENU </a>

</body>

</html>

<%@ page contentType="text/html; charset=iso-8859-1" language="java"

import="java.sql.*" errorPage="" %>

Page 23: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 13

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

<style type="text/css">

<!--

.style1 {font-size: 18px}

.style2 {font-size: 18px; font-weight: bold; }

-->

</style>

</head>

<body>

<%

String kliklink = request.getParameter("link");

String latarhome = "#00FFFF" ;

String latarproduk = "#00FFFF" ;

String latarkontak = "#00FFFF" ;

String latartentang = "#00FFFF" ;

if (kliklink.equals("home"))

latarhome = "#999999" ;

if (kliklink.equals("produk"))

latarproduk = "#999999" ;

if (kliklink.equals("kontak"))

latarkontak = "#999999" ;

if (kliklink.equals("tentang"))

latartentang = "#999999" ;

%>

<table width="439" border="0" bgcolor="#0000FF">

<tr>

<td width="91" bgcolor="<%=latarhome%>" class="style1"><div align="center"

class="style1"><strong><a

href="taginclude.jsp?link=home">Home</a></strong></div></td>

<td width="83" bgcolor="<%=latarproduk%>" class="style1"><div align="center"

class="style2"><a href="taginclude.jsp?link=produk">Produk</a></div></td>

<td width="101" bgcolor="<%=latarkontak%>" class="style1"><div align="center"

class="style2"><a href="taginclude.jsp?link=kontak">Kontak</a></div></td>

<td width="136" bgcolor="<%=latartentang%>" class="style1"><div align="center"

class="style2"><a href="taginclude.jsp?link=tentang">Tentang Kami</a> </div></td>

</tr>

</table>

<%@ page contentType="text/html; charset=iso-8859-1" language="java"

import="java.sql.*" errorPage="" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

</head>

<body>

<jsp:forward page="tujuanforward.jsp">

<jsp:param name="data" value="Data"/>

</jsp:forward>

</body>

</html>

<%@ page contentType="text/html; charset=iso-8859-1" language="java"

import="java.sql.*" errorPage="" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Page 24: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 14

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

<style type="text/css">

<!--

.style1 {

font-size: 18px;

font-weight: bold;

}

.style3 {font-size: 18px}

-->

</style>

</head>

<body>

<%

String testdata = request.getParameter("data");%>

<span class="style1">MENAMPILKAN DATA</span><span class="style3"> 1</span><br>

<%=testdata%>

</body>

</html>

<%! //Contoh declarations

//Deklarasi variabel

int jumlahUser=3;

//Deklarasi method

public String sayHello(String nama) {

return "Hallo " + nama;

}

%>

<HTML>

<HEAD>

<TITLE>Contoh Scripting Elements pada JSP</TITLE>

</HEAD>

<BODY>

<H1>

<% for (int i=1; i<=jumlahUser; i++) {

//Contoh scriplets

%>

<i><%=sayHello("User "+ i + "!")%> </i> <br>

<%}%>

</H1>

</BODY>

</HTML>

<HTML>

<HEAD>

<TITLE>Contoh jsp:forward</TITLE>

</HEAD>

<BODY>

<jsp:forward page="hitung.jsp">

<jsp:param name="bila" value="10" />

<jsp:param name="bilb" value="20" />

</jsp:forward>

</BODY>

</HTML>

<HTML>

<HEAD>

<TITLE>Contoh Dokumen di-forward</TITLE>

</HEAD>

<BODY>

<%

Page 25: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 15

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

String StrBilA = request.getParameter("bila");

String StrBilB = request.getParameter("bilb");

int bilA = Integer.valueOf(StrBilA).intValue();

int bilB = Integer.valueOf(StrBilB).intValue();

out.println(bilA + " + " + bilB + " = " +

(bilA + bilB));

%>

</BODY>

</HTML>

Page 26: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 16

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

Daftar Pustaka

Hans Bergsten, . 2002. JavaServer Pages™, 2nd Edition. O'Reilly Yuliana, eepis-its.edu

Page 27: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

MODUL PERKULIAHAN

Pemrogramam Web Enterprise

Directive JSP

Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh

Ilmu Komputer Sistem Informasi

03 87040 Tim Dosen

Abstract Kompetensi

Mengenal Directive mengirim pesan pada JSP

Mahasiswa mengerti bagaimana cara mengirim pesan menggunakan directive

Page 28: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 2

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

Directive JSP

3.1 Mengenal Direktif JSP

Directive adalah media yang digunakan JSP untuk mengirimkan “pesan” ke JSP container.

Directive berguna untuk melakukan setting nilai global seperti deklarasi class atau method.

Setting yang dilakukan oleh directive berlaku pada seluruh halaman (hanya halaman itu saja).

Sintaks Directive

Secara umum sintaks directive adalah sebagai berikut :

<%@ nama_directive atribut1=”nilai1” atribut2=”nilai2” . . . . %>

3.2 Jenis Directive

Directive pada JSP terdiri atas tiga jenis tentu saja dengan fungsi yang berbeda-beda.

JSP memiliki tiga buah direktif :

• Page : digunakan untuk mendefinisikan atribut-atribut yang terdapat pada

halaman JSP

• Include : digunakan untuk menyisipkan suatu berkas atau mengimpor suatu

kelas.

• Taglib : digunakan untuk mendefinisikan tag-tag buatan pemrogram.

page directive

Directive ini berfungsi untuk mendefinisikan atribut-atribut yang akan berlaku pada halaman

tersebut. Sebagai contoh dengan menggunakan directive ini suatu halaman bisa diberikan

informasi mengenai apa, meng-import package-package yang akan digunakan, menyatakan

halaman tersebut terlibat dalam HTTP session, mendefinisikan URL yang akan ditampilkan

apabila terjadi error pada halaman JSP tersebut dan lain-lain. Pada sebuah halaman JSP dapat

berisi atas banyak page directive.

Tanda yang digunakan untuk directive ini adalah :

Page 29: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 3

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

<%@ page atribut1 atribut2 . . . %>

Atribut untuk tipe directive ini dapat dilihat pada contoh berikut :

Atribut language

Atribut ini mendefinisikan bahasa pemrograman apa yang digunakan pada halaman tersebut.

Atribut ini ada dikarenakan apabila dimasa yang akan datang JSP engine dapat men-support

bahasa pemrograman lain. Berikut adalah contoh penggunaannya :

<%@ page language=”java” %>

Atribut import

Berikut adalah contoh penggunaannya :

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

Atribut info

Atribut ini hanya mendefinisikan informasi dari halaman. Dengan menggunakan atribut ini

suatu aplikasi servlet dapat mengambil informasi tersebut dengan method

Servlet.getServletInfo(). Berikut adalah contohnya :

<%@ page info=”Ini adalah halaman JSP-nya Chocolove” %>

Atribut errorPage

Atribut ini mendefinisikan URL yang akan ditampilkan apabila terjadi error pada halaman

JSP tersebut.

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

Atribut contentType

Nilai default dari atribut ini adalah “text/html”.

Atribut session

Menyatakan halaman tersebut terlibat dalam HTTP session. Apabila halaman JSP

menggunakan directive page dengan atribut ini artinya halaman tersebut nantinya akan

digunakan untuk mengakses atau memberikan nilai pada variabel yang disimpan pada

session.

<%@ page session=”true” %>

Atribut lai yang dimiliki oleh directive ini adalah : extends, buffer, autoFlush, isErrorPage dan isThreadSafe.

Page 30: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 4

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

Untuk penggunaan atribut tentu saja tidak harus dituliskan satu-satu seperti contoh di atas, tapi dapat disatukan sekaligus, seperti contoh berikut :

<%@ page language=”java” import=”java.sql.*, java.io.*, java.util.*”

session=”true” buffer=”24kb” autoFlush=”true” info=”Contoh

penggunaan Directive” errorPage=”error.jsp” isErrorPage=”false”

isTreadSafe=”false” %>

include directive

Directive ini berfungsi untuk menyisipkan isi dari suatu file dengan tipe teks pada suatu

halaman JSP. Sintaks yang digunakan oleh directive ini adalah :

<%@ include file="/namafile_yang_akan_disisipkan" %>

Bisa dilihat pada directive ini mempunyai satu atribut yaitu file. URL dari file yang akan disisipkan harus diawali dengan tanda "/". Apabila yang akan disisipkan adalah file header.html maka penulisannya adalah :

<%@ include file="/header.html" %>

Sedangkan apabila file header.html berada dalam direktori "html-file" maka penulisannya menjadi sebagai berikut :

<%@ include file="/html-file/header.html" %>

taglib directive

Directive ini berfungsi untuk penggunaan tag-tag yang dibuat sendiri oleh user pada halaman

JSP. Tag-tag tersebut biasanya disimpan dalam “tag library” dalam bentuk file yang

dikompres (ZIP atau JAR). Dalam file yang dikompres tersebut terdapat class-class dalam

suatu paket. Dan untuk memanggil atau mengoperasikan method atau properti dalam class

tersebut digunakan directive ini.

Sintaks dari directive ini adalah :

<%@ taglib uri=”tag_library_URI” prefix=”tag_prefix” %>

Atribut uri (Uniform Resource Identifier) berfungsi sebagai “tag library descriptor”. Dan atribut prefix berfungsi sebagai ID yang akan mempermudah “JSP Compiler” menentukan tag-tag dari “external library”. Tag-tag yang telah dikenali oleh “JSP Compiler” adalah jsp, jspx, java, javax, servlet dan sunw. Berikut adalah contoh tag dari “external library” :

<%@ taglib uri="http://jakarta.apache.org/taglibs/application-1.0"

prefix="app" %>

<app:attribute name="test1"/>

<app:setAttribute name="test1">Isi Atribut</app:setAttribute>

Page 31: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 5

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

Pada contoh di atas, secara default tidak dapat dijalankan dan akan menampilkan pesan error. Karena “tag library” ini belum diinstall pada sistem.

Gambar 3.1

3.3 Mengenal Tag Deklaratif

Semua bahasa pemrograman menyediakan variable yang berfungsi untuk menyimpan

suati nilai dan nilai yang ada di dalamnya dapat diubah sewaktu-waktu. Begitu halnya

JSP, JSP menyediakan tag yang secara khususu ditujukan untuk melakukan

pendeklarasian variable yang berlevel halaman. Variabel seperti ini akan dikenali di

sepanjang halaman. Tag yang dimaksud dinamakan tag deklaratif. Tag ini berbentuk

sebagai berikut :

<%!.....%>

Contoh mendeklarasikan variabel bernama buku yang bertipe string, dan variabel

bernama harga bertipe int.

<%!

String buku;

Page 32: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 6

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

Int harga = 60000;

%>

3.4 Percobaan

1. Membuat tag direktif JSP

Kode : direktif.jsp

<html>

<head>

<title>Tag Direktif</title>

</head>

<body>

<%@ page import="java.util.Date"%>

Waktu Sekarang : <%= new Date()%>

</body>

</html>

Listing program 3.1

Hasil kode direktif.jsp

Gambar 3.2

Dengan adanya pengimporan java.util.Date secara eksplisit melalui :

<%@ page import="java.util.Date"%>

Maka penulisan :

<%= new java.util.Date() %>

Bisa digantikan dengan :

<%= new Date()%>

Page 33: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 7

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

2. Membuat deklarasi JSP

Kode : deklarasi.jsp

<html>

<head>

<title>Tag Deklarasi</title>

</head>

<body>

<%!

String buku;

int harga = 60000;

%>

Setelah Deklarasi : <br>

<%

buku = "Pemrograman JSP";

out.println("Judul Buku : " + buku + "<BR>");

out.println("Harga BUku : " + harga + "<BR>");

%>

</body>

</html>

Listing program 3.2

Hasil di browser :

Gambar 3.3

3. Deklarasi variabel dengan tag scriplet.

Pendeklarasian variabel juga dapat dilakukan secara langsung pada tag scriplet (<% %>)

Kode : deklarasi2.jsp

Page 34: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 8

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

<html>

<head>

<title>Tag Deklarasi</title>

</head>

<body>

<%

String buku;

int harga = 100000;

buku = "Pemrograman JSP";

out.println("Judul Buku : " + buku + "<BR>");

out.println("Harga : " + harga + "<br>");

%>

</body>

</html>

Listing program 3.3

Hasil di browser :

Gambar 3.4

Contoh Soal :

1. Terdapat dua pemain, masing-masing pemain mendapatkan nilai secara random, bilangan

random yang dibangkitkan antara 0 – 99. Jika pemain 1 lebih besar dari pemain 2 maka

pemain 1 yang menang, dan jika pemain 2 lebih besar dari pemain 1 maka pemain 2 yang

menang. Simpan dengan nama kondisi.jsp.

Hasil di browser

Page 35: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 9

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

:

Gambar 3.5

Gambar 3.6

2. Tentukan sejumlah n bilangan. Besar n tentukan secara random, maksimal 20 bilangan.

Setiap bilangan yang dibangkitkan antara 0 – 99. Dari semua bilangan tadi, tentukan nilai

maksimum dan minimumnya. Simpan dengan nama loop1.jsp.

Hasil di browser :

Page 36: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 10

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

Gambar 3.7

Gambar 3.8

3. Tentukan sejumlah n bilangan. Besar n tentukan secara random, maksimal 20 bilangan.

Simpan bilangan-bilangan tersebut dalam sebuah array. Setiap bilangan yang dibangkitkan

antara 0 – 99. Dari semua bilangan tadi, tentukan nilai maksimum dan minimumnya. Simpan

dengan nama loop2.jsp.

Hasil di browser :

Gambar 3.9

Page 37: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 11

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

Gambar 3.10

4. Terdapat array String yang berisi nama-nama. Nama-nama tersebut diurutkan

menggunakan Arrays.sor(). Simpan dalam file UrutString.jsp.

Hasil di browser :

Page 38: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 12

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

Gambar 3.11

5. Tentukan sebuah kalimat, misalkan kalimat tersebut adalah "abcabcabcabc", carilah huruf

a diindek berapa saja. Untuk mendapatkan huruf a diindeks berapa saja gunakan fungsi

indexOf(String str,int fromIndex). Fungsi ini akan mengembalikan nilai indeks pada String

yang pertama kali yang memenuhi substring yang ditentukan, pencarian dimulai dari

fromIndex. Simpan dengan nama indekstring.jsp. String kalimat = "abcabcabcabc" ;

int i = indexOf(‖a‖,2) ; // i = 3

Hasil di browser :

Gambar 3.12

6. Bangkitkan kalimat secara random, carilah huruf A diindek berapa saja. Untuk

mendapatkan huruf A diindeks berapa saja gunakan fungsi indexOf(String str,int fromIndex).

Fungsi ini akan mengembalikan nilai indeks pada String yang pertama kali yang memenuhi

substring yang ditentukan, pencarian dimulai dari fromIndex. Fungsi ini akan mengembalikan

nilai -1 apabila tidak menemukan posisi subString yang dicari sehingga apa bila nilai

mengembalikan -1 maka lakukan break. Simpan dengan nama indekstring2.jsp.

Hasil di browser :

Page 39: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 13

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

Gambar 3.13

Gambar 3.14

7. Penggunaan direktif include

Ketikkan program di bawah ini. Output ditunjukkan pada gambar 3.15

Gambar 3.15

8. Penggunaan atribut isErrorPage.

errorPage.jsp

pesan.jsp

Page 40: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 14

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

Jalankan program dengan cara sebagai berikut: Apa yang terjadi?

http://localhost:8080/errorPage.jsp

http://localhost:8080/errorPage.jsp?bila=23&bilb=2

http://localhost:8080/errorPage.jsp?bila=23&bilb=b

Output program :

Gambar 3.16

Page 41: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

Latihan

1. Apa yang dimaksud dengan directive?

2. Sebutkan jenis directive ?

3. Sebutkan cara pembuatan directive JSP?

4. Apa yang dimaksud dengan deklaratif?

5. Sebutkan cara pembuatan deklaratif ?

6. Buat sebuah program masukan user dengan memanfaatkan tag deklaratif dan

deklarasi. Data yang dimasukkan adalah nama user dan waktu saat ini.

<html>

<title> Kondisi </title>

<body>

<%

int pemain1 = (int) (Math.random()* 100);

int pemain2 = (int) (Math.random()* 100);

out.println("PEMAIN 1 = " + pemain1 );

out.println("<br>PEMAIN 2 = " + pemain2);

if (pemain1 > pemain2)

out.println("<br>PEMAIN 1 MENANG");

else

out.println("<br>PEMAIN 2 MENANG");

%>

</body>

</html>

<html>

<body>

<%

int max = 0 ;

int min = 1000 ;

int jumlah = (int) (Math.random() * 20) ;

out.println("Jumlah Bilangan Yang Dibangkitkan = " + jumlah+"<br>");

int i = 0 ;

while(i<jumlah){

int r = (int) (Math.random() * 100) ;

max = Math.max(max,r) ;

min = Math.min(min,r) ;

out.println(r+"<br>");

i++ ;

}

out.println("Maksimum = "+max);

out.println("<br>Minimum = "+min);

%>

</body>

</html>

<html>

Page 42: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 16

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

<body>

<%

int max = 0 ;

int min = 1000 ;

int jumlah = (int) (Math.random() * 20) ;

out.println("Jumlah Bilangan Yang Dibangkitkan = " + jumlah+"<br>");

int A[] = new int[jumlah] ;

int i = 0 ;

while(i<jumlah){

A[i] = (int) (Math.random() * 100) ;

out.println(A[i]+"<br>");

max = Math.max(max,A[i]) ;

min = Math.min(min,A[i]) ;

i++ ;

}

out.println("Maksimum = "+max);

out.println("<br>Minimum = "+min);

%>

</body>

</html>

<html>

<body>

<%@ page import="java.util.Arrays" %>

<%

String nama[] = {"Isak","Munir","Rita","Intan","Budi","Candra"} ;

out.println("<u><b>Nama-nama sebelum diurutkan</b></u><br>");

for(int i=0;i<nama.length;i++)

out.println(nama[i]+"<br>");

Arrays.sort(nama);

out.println("<hr><u><b><br>Nama-nama setelah diurutkan</b></u><br>");

for(int i=0;i<nama.length;i++)

out.println(nama[i]+"<br>");

%>

</body>

</html>

<html>

<body>

<%

String kalimat = "abcabcabcabc" ;

out.println("Kalimat = " + kalimat+"<br>");

int i=0 ;

out.println("jumlah kalimat = " + kalimat.length()+"<br>");

Page 43: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 17

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

while(i<kalimat.length()){

i = kalimat.indexOf("a",i) ;

if (i != -1) {

out.println("<br>indeks = " + i);

i++;

}

else

break ;

}

%>

</body>

</html>

<html>

<body>

<%

int jumKata = (int)(Math.random() * 50);

char kata2[] = new char[jumKata] ;

for(int k=0;k<jumKata;k++){

int h = ((int)(Math.random() * 26)) + 65 ;

kata2[k] = (char) h ;

}

String kalimat=null ;

kalimat = kalimat.copyValueOf(kata2) ;

out.println("<br>Kalimat= " + kalimat);

int i=0 ;

out.println("<br>jumlah huruf = " + kalimat.length());

while(i<kalimat.length()){

i = kalimat.indexOf("A",i) ;

if (i != -1) {

i++;

out.println("<br>indeks = " + i);

}

else

break ;

}

%>

</body>

</html>

<html >

<body>

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

<p>

<strong>Untuk mengetahui cara kerja direktif include</strong>

</p>

<%@include file="footer.html"%>

</body>

</html>

<html >

<body>

<div align="center" class="style1">HEADER</div>

</body>

</html>

<html>

<body>

Page 44: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 18

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

<div align="center" class="style1">FOOTER</div>

</body>

</html>

<HTML>

<HEAD>

<TITLE>Tes Atribut errorPage</TITLE>

</HEAD>

<BODY>

<%@ page errorPage="pesan.jsp" %>

<%

String strBilA = request.getParameter("bila");

String strBilB = request.getParameter("bilb");

float bilA = Float.valueOf(strBilA).floatValue();

float bilB = Float.valueOf(strBilB).floatValue();

out.println(bilA + "/" + bilB + " = " + bilA / bilB);

%>

</BODY>

</HTML>

<HTML>

<HEAD>

<TITLE>Halaman Pesan Kesalahan</TITLE>

</HEAD>

<BODY>

<%@ page isErrorPage="true" %>

Pesan kesalahan ini berasal dari<BR>

dokumen errorpage.jsp karena ada<BR>

kesalahan berikut:<BR>

<B><%= exception %></B><BR>

</BODY>

</HTML>

Daftar Pustaka

Hans Bergsten, . 2002. JavaServer Pages™, 2nd Edition. O'Reilly. Yuliana, eepis-its.edu

Page 45: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

MODUL PERKULIAHAN

Pemrogramam Web Enterprise

Standard Action

Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh

Ilmu Komputer Sistem Informasi

04 87040 Tim Dosen

Abstract Kompetensi

Mengenal Standard Action

Mahasiswa mengerti bagaimana menggunakan standard action

Page 46: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 2

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

Standard Action

4.1 Standard Action

Dengan JSP, anda bisa mengirimkan suatu nilai yang ditangani sebuah form kemudian nilai tersebut dikirim ke dokumen JSP. Standard Action adalah tag yang berfungsi untuk menjalankan suatu operasi yang spesifik, seperti :

• Memforward dari suatu halaman JSP ke halaman JSP yang lain. • Menyisipkan suatu halaman / operasi pada halaman JSP dari halaman JSP yang lain. • Penanganan Applet atau Java Bean pada suatu halaman JSP

Standar action cara penulisannya mirip dengan aturan penulisan pada XML. Sintak dari Standard Action ini adalah :

<jsp:nama_aksi atribut1 atribut2 .... />

Atau :

<jsp:nama_aksi atribut1 atribut2 .... /> /* pada bagian ini bisa diisi dengan JSP Action yang lain */ </jsp:nama_aksi>

Berikut adalah Standard Action yang terdapat dan dikenali oleh JSP:

• param action (jsp:param) • forward action (jsp:forward) • include action (jsp:include) • plugin action (jsp:plugin) • use bean action (jsp:useBean) • set property action (jsp:setProperty) • get property action (jsp:getProperty)

jsp:param

Standar Action ini berfungsi untuk mendefinisikan suatu variabel dan nilainya. Sintak yang digunakan adalah :

<jsp:param name="nama_parameter" value="nilai_parameter" />

Atau :

Page 47: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 3

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

<jsp:param name="nama_parameter" value="<%= nilai_parameter %>" />

jsp:forward

Fungsi dari Standar Action ini adalah untuk mengirimkan (mem-forward) suatu permintaan dari suatu halaman JSP ke halaman JSP yang lain, halaman HTML atau Servlet yang masih berada pada konteks aplikasi web tersebut. Misalnya pada server.xml dikonfigurasi suatu konteks aplikasi web sebagai berikut :

<context path="/jsp" docBase="C:\JSP\" debug="0" reloadable="true"/>

Maka halaman JSP pengirim dan HTML, JSP atau servlet penerima harus berada pada satu direktori yaitu C:\JSP. Sintaknya :

<jsp:forward page="url_tujuan" />

Atau :

<jsp:forward page="<%= url_tujuan %>" />

Atau :

<jsp:foward page="url_tujuan"> <jsp:param name="nama_parameter1" value="nilai_parameter" /> <jsp:param name="nama_parameter2" value="<%= nilai_parameter %>" /> </jsp:forward>

Atau :

<jsp:foward page="<%= url_tujuan %>"> <jsp:param name="nama_parameter1" value="nilai_parameter" /> <jsp:param name="nama_parameter2" value="<%= nilai_parameter %>" /> </jsp:forward>

4.2 Percobaan

1. membuat kode form input Kode : input.html <html> <head> <title></title> </head> <body> <FORM ACTION="hello.jsp" METHOD="get">

Page 48: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 4

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

Silakan masukkan nama anda : <BR> <INPUT TYPE="text" NAME="nama"> <BR> <INPUT TYPE="SUBMIT" VALUE="Kirim"> </FORM> </body> </html>

Listing Program 4.1 Hasil di browser :

Gambar 4.1 2. Membuat kode untuk menangkap parameter

Kode : hello.jsp <html> <head> <title>Menampilkan Parameter</title> </head> <body> <% String nama = request.getParameter("nama"); out.println("Pemakai : " + nama); %> </body> </html>

Listing Program 4.2 Hasil di browser :

Gambar 4.2

Page 49: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 5

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

Isikan nama dan klik tombol ”Kirim” :

Gambar 4.3 Contoh 1 : Buatlah aplikasi seperti gambar 4.4. Lakukan langkah berikut: • Ketik listing program 4.3 dan simpan sebagai Form.jsp • Jalankan pada browser • Isilah form ini dengan nilai

nama : yuliana alamat : keputih

• Setelah anda mengisi kemudian tekan tombol submit supaya form diproses.

Gambar 4.4

Page 50: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 6

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

Listing Program 4.3

Kode HTML untuk menampilkan form dengan dua input bertipe text yang diberi parameter “nama” dan “alamat” serta diproses oleh “Form.jsp” adalah sebagai berikut <form action="Form.jsp" method="post" name="form">

<table width="200" border="1">

<tr bordercolor="#0000CC">

<td width="64" bordercolor="#0000FF" bgcolor="#00FFFF">Nama</td>

<td width="120" bordercolor="#0000FF" bgcolor="#00FFFF"><input name="nama"

type="text" size="20" maxlength="20"></td>

</tr>

<tr>

<td bordercolor="#0000FF" bgcolor="#00FFFF">Alamat</td>

<td bordercolor="#0000FF" bgcolor="#00FFFF"><input name="alamat" type="text"

size="20" maxlength="20"></td>

</tr>

<tr>

<td colspan="2" bordercolor="#0000FF" bgcolor="#00FFFF"><input name="Submit"

type="submit" value="Submit"></td>

</tr>

</table>

</form>

Kode Form sederhana untuk elemen form textfield adalah seperti berikut: <input name="namaelemen" type="text">

Elemen form textfield merupakan elemen form untuk menerima data tunggal dan pada JSP kita menggunakan objek request dengan metode getParameter untuk mendapatkan data dari form. Pada listing 4.3 kita mendapati kode berikut:

String nama = request.getParameter("nama");

String alamat = request.getParameter("alamat");

Kode tersebut berguna untuk mendapatkan nilai dari input form textfield dengan nama elemen form “nama” dan “alamat” dan disimpan dalam objek nama dan alamat bertipe String. Kode berikut:

if (nama!=null && nama.length()>0)

{

out.println("Nama = " + nama + "<br>");

out.println("Alamat = " + alamat + "<br>");

}

Kode diatas berguna untuk memeriksa apakah nama memiliki nilai dan apakah panjang dari isi String nama memiliki panjang lebih dari 0. Jika bernilai benar, maka nama dan alamat akan ditampilkan pada browser, demikian sebaliknya. Selain textfield, elemen yang digunakan untuk menerima input tunggal adalah radiobutton dan Menu. Oleh sebab itu kita akan melihat contoh penggunaan radiobutton dan Menu.

Contoh 2 : Lakukan langkah-langkah berikut: • Ketikan listing program 4.4 sebagai formdua.jsp • Jalankan formdua.jsp pada browser • Isi form dengan Nama : Yuliana Alamat : Keputih

Page 51: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 7

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

Propinsi : Jawa Timur Pekerjaan : karyawan • Setelah anda mengisi data selanjutnya tekan tombol submit supaya from diproses, maka akan

mendapatkan tampilan seperti gambar 4.4 Listing Program 4.4

Gambar 4.4

Elemen form untuk data propinsi merupakan objek form menu yang terdiri atas kode berikut:

<select name="propinsi" >

Page 52: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 8

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

<option value="Jawa Timur">Jawa Timur</option>

<option value="Jawa Tengah">Jawa Tengah</option>

<option value="Jawa Barat" selected="selected">Jawa Barat</option>

</select>

Sedangkan data pekerjaan untuk objek form radio button memiliki kode sbb:

<input name="pekerjaan" type="radio" value="mahasiswa" checked="checked" />

Mahasiswa<br>

<input name="pekerjaan" type="radio" value="karyawan" /> Karyawan<br>

<input name="pekerjaan" type="radio" value="wiraswasta" />Wiraswasta<br>

Kode selebihnya merupakan kode untuk menerima data form dan memprosesnya, yang mempunyai prinsip yang sama dengan Listing Program 4.3 dimana untuk menerima data tunggal digunakan metode getParameter dari objek request. Contoh 3 :

Untuk mengaplikasikan contoh 3 diperlukan tiga file yaitu indextaginclude.html, taginclude.jsp, navbar.jsp. output ditunjukkan pada gambar 4.5 dan gambar 4.6

Gambar 4.5

Gambar 4.6

Page 53: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

Latihan

1. Apa fungsi dari standard actions? 2. Sebutkan tag – tag standard action yang dikenali JSP ? 3. Buat sebuah program pendaftaran mahasiswa dengan menggunakan standard action.

Data yang dimasukkan adalah nama mahasiswa, asala sekolah dan jurusan. 4. Buat program untuk menampilkan halaman JSP di dalam sebuah halaman JSP lain dengan

memanfaatkan tag <jsp:include page=”” />

<html> <head>

<title>Untitled Document</title>

</head>

<body>

<form action="Form.jsp" method="post" name="form">

<table width="200" border="1">

<tr bordercolor="#0000CC">

<td width="64" bordercolor="#0000FF" bgcolor="#00FFFF">Nama</td>

<td width="120" bordercolor="#0000FF" bgcolor="#00FFFF"><input name="nama"

type="text" size="20" maxlength="20"></td>

</tr>

<tr>

<td bordercolor="#0000FF" bgcolor="#00FFFF">Alamat</td>

<td bordercolor="#0000FF" bgcolor="#00FFFF"><input name="alamat" type="text"

size="20" maxlength="20"></td>

</tr>

<tr>

<td colspan="2" bordercolor="#0000FF" bgcolor="#00FFFF"><input name="Submit"

type="submit" value="Submit"></td>

</tr>

</table>

</form>

<% String nama = request.getParameter("nama");

String alamat = request.getParameter("alamat");

if (nama!=null && nama.length()>0)

{

out.println("Nama = " + nama + "<br>");

out.println("Alamat = " + alamat + "<br>");

}

%>

</body>

</html>

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

<form action="formdua.jsp" method="post" name="form1">

<table width="200" border="1">

<tr>

<td>Nama</td>

<td><input name="nama" type="text" /></td>

</tr>

<tr>

<td>Alamat</td>

<td><input name="alamat" type="text" /></td>

</tr>

<tr>

Page 54: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 10

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

<td>Propinsi</td>

<td><select name="propinsi" >

<option value="Jawa Timur">Jawa Timur</option>

<option value="Jawa Tengah">Jawa Tengah</option>

<option value="Jawa Barat" selected="selected">Jawa Barat</option>

</select></td>

</tr>

<tr>

<td>Pekerjaan</td>

<td><input name="pekerjaan" type="radio" value="mahasiswa" checked="checked" />

Mahasiswa<br>

<input name="pekerjaan" type="radio" value="karyawan" /> Karyawan<br>

<input name="pekerjaan" type="radio" value="wiraswasta" />Wiraswasta<br> </td>

</tr>

<tr>

<td>&nbsp; </td>

<td><input type="submit" name="Submit" value="Submit" /> </td>

</tr>

</table>

</form>

<%

String nama = request.getParameter("nama");

String alamat = request.getParameter("alamat");

String pekerjaan = request.getParameter("pekerjaan");

String propinsi = request.getParameter("propinsi");

if (nama !=null && nama.length()>0){

out.println("Nama = " + nama+"<br>");

out.println("Alamat = " + alamat+"<br>");

out.println("Propinsi = " + propinsi+"<br>");

out.println("Pekerjaan = " + pekerjaan+"<br>");

}

%>

</body>

</html>

<html>

<style type="text/css">

<!--

.style1 {

font-size: 18px;

font-weight: bold;

}

-->

</style>

<body>

<table width="439" border="0" bgcolor="#0000FF">

<tr>

<td width="91" bgcolor="#00FFFF"><div align="center" class="style1"><a

href="taginclude.jsp?link=home">Home</a></div></td>

<td width="83" bgcolor="#00FFFF"><div align="center" class="style1"><a

href="taginclude.jsp?link=produk">Produk</a></div></td>

<td width="101" bgcolor="#00FFFF"><div align="center" class="style1"><a

href="taginclude.jsp?link=kontak">Kontak</a></div></td>

<td width="136" bgcolor="#00FFFF"><div align="center" class="style1"><a

href="taginclude.jsp?link=tentang">Tentang Kami</a> </div></td>

</tr>

</table>

</body>

</html>

<%@ page contentType="text/html; charset=iso-8859-1" language="java"

import="java.sql.*" errorPage="" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Page 55: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 11

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

</head>

<body>

<%

String link=request.getParameter("link");

%>

<jsp:include page="navbar.jsp" flush="true">

<jsp:param name="link" value="<%=link%>"/>

</jsp:include>

<a href="indextaginclude.html"> KEMBALI KE MENU </a>

</body>

</html>

<%@ page contentType="text/html; charset=iso-8859-1" language="java"

import="java.sql.*" errorPage="" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

<style type="text/css">

<!--

.style1 {font-size: 18px}

.style2 {font-size: 18px; font-weight: bold; }

-->

</style>

</head>

<body>

<%

String kliklink = request.getParameter("link");

String latarhome = "#00FFFF" ;

String latarproduk = "#00FFFF" ;

String latarkontak = "#00FFFF" ;

String latartentang = "#00FFFF" ;

if (kliklink.equals("home"))

latarhome = "#999999" ;

if (kliklink.equals("produk"))

latarproduk = "#999999" ;

if (kliklink.equals("kontak"))

latarkontak = "#999999" ;

if (kliklink.equals("tentang"))

latartentang = "#999999" ;

%>

<table width="439" border="0" bgcolor="#0000FF">

<tr>

<td width="91" bgcolor="<%=latarhome%>" class="style1"><div align="center"

class="style1"><strong><a

href="taginclude.jsp?link=home">Home</a></strong></div></td>

<td width="83" bgcolor="<%=latarproduk%>" class="style1"><div align="center"

class="style2"><a href="taginclude.jsp?link=produk">Produk</a></div></td>

<td width="101" bgcolor="<%=latarkontak%>" class="style1"><div align="center"

class="style2"><a href="taginclude.jsp?link=kontak">Kontak</a></div></td>

<td width="136" bgcolor="<%=latartentang%>" class="style1"><div align="center"

class="style2"><a href="taginclude.jsp?link=tentang">Tentang Kami</a> </div></td>

</tr>

</table>

Page 56: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 12

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

Daftar Pustaka

Hans Bergsten, . 2002. JavaServer Pages™, 2nd Edition. O'Reilly Yuliana, eepis-its.edu .

Page 57: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

MODUL PERKULIAHAN

Pemrogramam Web Enterprise

Java Beans

Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh

Ilmu Komputer Sistem Informasi

05 87040 Tim Dosen

Abstract Kompetensi

Mengenal Java Bean

mahasiswa diharapkan mampu: 1. mengenal pengertian Java Bean 2. Mahasiswa mengenal sintak Java Bean 3. Mahasiswa mampu mengintegrasikan Java Bean dengan JSP

Page 58: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 2

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

Java Beans

5.1 Karakteristik Java Bean

API Java Bean merupakan standar format dari class java. Dengan adanya Java Bean,

komponen dapat digunakan sewaktu-waktu untuk membangun program. Penulisan kelas Java

Bean mempunyai aturan tertentu sebagai berikut:

a. Memiliki properti (variabel) dengan akses bukan public yang digunakan untuk

menyimpan data.

b. Memiliki method get dan set (memberi dan mendapatkan properti dari bean).

c. Memiliki konstruktor kosong.

Berikut ini adalah langkah-langkah membuat kelas Java Bean:

a. Mendefinisikan variabel dalam bean yang akan kita buat.

Variabel ini tidak boleh dideklarasikan public.

Misal : private String nrp;

b. Untuk masing-masing variabel dibuat metode get dan set.

Misal : getNrp() dan setNrp()

Untuk boolean, gunakan method setXxx() untuk mengeset nilai boolean

dan isXxx yang mengembalikan nilai boolean

Aturan membuat method:

public void set<namaVariabel>

public <tipe_variabel> get<namaVariabel>

public boolean is<namaVariabel>

c. Menambahkan konstruktor kosong.

Berfungsi untuk inisialisasi

5.2 Membuat Java Bean

Memanggil javabean dalam halaman jsp memakai sintax:

<jsp:usebean id=”name” class=”package.Class”/>

Yang berarti pembuatan object class yang telah ditentukan dan dimasukkan ke dalam

variable dengan nama yang ditentukan id.

Seumpama ada contoh sintax berikut :

<jsp:usebean id=”book1” class=”cwp.Book”/>

Secara normal hal sama dengan scriplet :

<% cwp.Book book1=new cwp.Book(); %>

Page 59: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 3

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

Meskipun javabean ekivalen dengan membangun sebuah object, tapi dia mempunyai

option tambahan yang membuatnya lebih powerfull. Kita dapat menentujan scope yang

mendefinisikan ruang batas dari obyek yang akan dibuat. Bisa saja scope bukan hanya pada

page ini saja, tapi bisa lebih jauh. Jika ini dapat dishare tentunya akan sangat berguna, jadi

kita akan membuat object baru jika dan hanya jika tidak memang benar benar tidak ada yang

id dan scopenya sama.

5.3 Mengambil Nilai Property Java Bean

Dalam beberapa kasus mungkin kita ingin variable lokal kita mempunyai tipe yang

sama sebagai object yang dibuat. Cara pengaksesan javabean adalah memakai sintax

jsp:getproperty. Contoh pengaksesan sbb :

<jsp:getProperty name=”book1” propery=”title” />

ekivalen dengan

<%= book1.getTitle() %>

5.4 Mengeset Nilai Property Java Bean

Untuk memodifikasi properti menggunakan sintax jsp:setProperty . Action ini

mempunyai beberapa bentuk yang berbeda, tapi untuk yang paling simple perlu tiga attribut

yaitu : name, property dan valuenya. Contoh sintax sederhananya adalah sbb :

<jsp:setProperty name=”book1” propery=”title” value=”Core Web Programming”/>

ekivalen dengan :

<%= book1.setTitle(“Core Web Programmming”) %>

Berikut ini adalah contoh sederhana Java Bean dengan JSP:

Page 60: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 4

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

package coreservlets;

/** Contoh Java Bean dengan satu properti bertipe String

* yang bernama message

*/

public class StringBean {

private String message = "No message specified";

public String getMessage() {

return(message);

}

public void setMessage(String message) {

this.message = message;

}

}

Listing 4.1 StringBean.java

Dan pengaksesannya memakai JSP adalah sbb :

Page 61: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 5

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>Using JavaBeans with JSP</TITLE>

</HEAD>

<BODY>

<TABLE BORDER=5 ALIGN="CENTER">

<TR><TH CLASS="TITLE"> Using JavaBeans with JSP

</TABLE>

<jsp:useBean id="stringBean"

class="coreservlets.StringBean"/>

<OL>

<LI>Initial value (getProperty):

<I><jsp:getProperty name="stringBean"

property="message" /></I>

<LI>Initial value (JSP expression):

<I><%= stringBean.getMessage() %></I>

<LI><jsp:setProperty name="stringBean"

property="message"

value="Best string bean: Fortex" />

Value after setting property with setProperty:

<I><jsp:getProperty name="stringBean"

property="message" /></I>

<LI><% stringBean.setMessage("My favorite:

Kentucky Wonder"); %>

Value after setting property with scriptlet:

<I><%= stringBean.getMessage() %></I>

</OL>

</BODY>

</HTML>

Listing 4.2 File JSP untuk StringBean

Berikut ini adalah contoh program pemakaian set dan get properti javabean: package coreservlets;

/** Bean sederhana untuk mengilustrasikan berbagai macam

* bentuk jsp:setProperty.

*/

public class SaleEntry {

private String itemID = "unknown";

private double discountCode = 1.0;

private int numItems = 0;

public String getItemID() {

return(itemID);

}

Page 62: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 6

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

public void setItemID(String itemID) {

if (itemID != null) {

this.itemID = itemID;

} else {

this.itemID = "unknown";

}

}

public double getDiscountCode() {

return(discountCode);

}

public void setDiscountCode(double discountCode) {

this.discountCode = discountCode;

}

public int getNumItems() {

return(numItems);

}

public void setNumItems(int numItems) {

this.numItems = numItems;

}

// Replace this with real database lookup.

public double getItemCost() {

double cost;

if (itemID.equals("a1234")) {

cost = 12.99*getDiscountCode();

} else {

cost = -9999;

}

return(roundToPennies(cost));

}

private double roundToPennies(double cost) {

return(Math.floor(cost*100)/100.0);

}

public double getTotalCost() {

return(getItemCost() * getNumItems());

}

}

Listing 4.3 SaleEntry.java

Dan pengaksesannya memakai JSP adalah sebagai berikut :

Page 63: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 7

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD><TITLE>Using jsp:setProperty</TITLE>

</HEAD>

<BODY>

<TABLE BORDER=5 ALIGN="CENTER">

<TR><TH CLASS="TITLE">

Using jsp:setProperty</TABLE>

<jsp:useBean id="entry"

class="coreservlets.SaleEntry" />

<jsp:setProperty name="entry"

property="itemID"

value='<%= request.getParameter("itemID") %>' />

<%

int numItemsOrdered = 1;

try {

numItemsOrdered =

Integer.parseInt(request.getParameter("numItems"));

} catch(NumberFormatException nfe) {}

%>

<jsp:setProperty name="entry"

property="numItems"

value="<%= numItemsOrdered %>" />

<%

double discountCode = 1.0;

try {

String discountString =

request.getParameter("discountCode");

// Double.parseDouble not available in JDK 1.1

discountCode =

Double.valueOf(discountString).doubleValue();

} catch(NumberFormatException nfe) {}

%>

<jsp:setProperty name="entry"

property="discountCode"

value="<%= discountCode %>" />

<BR>

<TABLE ALIGN="CENTER" BORDER=1>

<TR CLASS="COLORED">

<TH>Item ID<TH>Unit Price<TH>Number

Ordered<TH>Total Price

<TR ALIGN="RIGHT">

<TD><jsp:getProperty name="entry"

property="itemID" />

<TD>$<jsp:getProperty name="entry"

property="itemCost" />

<TD><jsp:getProperty name="entry"

property="numItems" />

<TD>$<jsp:getProperty name="entry"

property="totalCost" />

</TABLE>

</BODY>

</HTML>

Page 64: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 8

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

Listing 4.4 File JSP untuk SaleEntry

Untuk menjalankan program akses url dengan cara sebagai berikut:

http://localhost:8080/process/SaleEntry1.jsp?itemID=a1234&numItems=11&discountCode=

0.95

Perhatikan Listing 4.4 diatas digunakan ekspresi JSP untuk memberikan nilai pada atribut

value. Nilai yang diperoleh dari pengambilan parameter adalah bernilai String. Bagaimana

bila nilai hasil pengambilan parameter tersebut akan diberikan pada atribut yang bertipe

numerik? Diperlukan konversi tipe data seperti yang dicontohkan pada atribut discountCode

dan numItems diatas. Ingat method getParameter(String param) akan mengembalikan nilai

String.

5.4 Percobaan

1. Tuliskan kembali program di atas dan amati output yang dihasilkan.

2. Tulis Program di bawah ini amati output apa yang dihasilkan.

Listing 4.5 dan Listing 4.6 adalah alternatif dari praktikum Listing 4.4.

Perhatikan bahwa pada alternatif ini tidak diperlukan konversi tipe data.

Page 65: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 9

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>Menggunakan jsp:setProperty</TITLE>

</HEAD>

<BODY>

<TABLE BORDER=5 ALIGN="CENTER">

<TR><TH CLASS="TITLE">

Using jsp:setProperty</TABLE>

<jsp:useBean id="entry" class="cwp.SaleEntry" />

<jsp:setProperty

name="entry"

property="itemID"

param="itemID" />

<jsp:setProperty

name="entry"

property="numItems"

param="numItems" />

<%-- WARNING! JDK 1.0.1 dan Java Web Server

mempunyai bug yang menyebabkan kegagalan

konversi tipe data

--%>

<jsp:setProperty

name="entry"

property="discountCode"

param="discountCode" />

<BR>

<TABLE ALIGN="CENTER" BORDER=1>

<TR CLASS="COLORED">

<TH>Item ID<TH>Unit Price<TH>Number Ordered<TH>Total Price

<TR ALIGN="RIGHT">

<TD><jsp:getProperty name="entry" property="itemID" />

<TD>$<jsp:getProperty name="entry" property="itemCost" />

<TD><jsp:getProperty name="entry" property="numItems" />

<TD>$<jsp:getProperty name="entry" property="totalCost" />

</TABLE>

</BODY>

</HTML>

Listing 4.5 Alternatif pertama file JSP untuk SaleEntry

Page 66: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 10

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0

Transitional//EN">

<!--

Contoh penggunaan jsp:setProperty

-->

<HTML>

<HEAD>

<TITLE>Using jsp:setProperty</TITLE>

<LINK REL=STYLESHEET

HREF="JSP-Styles.css"

TYPE="text/css">

</HEAD>

<BODY>

<TABLE BORDER=5 ALIGN="CENTER">

<TR><TH CLASS="TITLE">

Using jsp:setProperty</TABLE>

<jsp:useBean id="entry" class="cwp.SaleEntry" />

<%-- WARNING! JDK 1.0.1 dan Java Web Server

mempunyai bug yang menyebabkan

kegagalan

konversi tipe data secara otomatis ke

tipe

data double

--%>

<jsp:setProperty name="entry" property="*" />

<BR>

<TABLE ALIGN="CENTER" BORDER=1>

<TR CLASS="COLORED">

<TH>Item ID<TH>Unit Price<TH>Number

Ordered<TH>Total Price

<TR ALIGN="RIGHT">

<TD><jsp:getProperty name="entry" property="itemID"

/>

<TD>$<jsp:getProperty name="entry"

property="itemCost" />

<TD><jsp:getProperty name="entry"

property="numItems" />

<TD>$<jsp:getProperty name="entry"

property="totalCost" />

</TABLE>

</BODY>

</HTML>

Listing 4.6 Alternatif kedua file JSP untuk SaleEntry

Page 67: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 11

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

3. Tulis Program di bawah ini dan amati hasil percobaan di bawah ini.

package coreservlets;

/** Simple bean to illustrate sharing beans through

* use of the scope attribute of jsp:useBean.

*/

public class AccessCountBean {

private String firstPage;

private int accessCount = 1;

public String getFirstPage() {

return(firstPage);

}

public void setFirstPage(String firstPage) {

this.firstPage = firstPage;

}

public int getAccessCount() {

return(accessCount++);

}

}

Listing 4.7 AccessCountBean.java

4. Dan pengaksesannya memakai JSP adalah sebagai berikut :

Page 68: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 12

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0

Transitional//EN">

<HTML>

<HEAD>

<TITLE>Shared Access Counts: Page 1</TITLE>

</HEAD>

<BODY>

<TABLE BORDER=5 ALIGN="CENTER">

<TR><TH CLASS="TITLE">

Shared Access Counts: Page 1</TABLE>

<P>

<jsp:useBean id="counter"

.AccessCountBean"

class="coreservlets

scope="application">

<jsp:setProperty name="counter"

property="firstPage"

value="SharedCounts1.jsp"

/>

</jsp:useBean>

Of SharedCounts1.jsp (this page), <A HREF=

"SharedCounts2.jsp">SharedCounts2.jsp</A>,

and <A HREF="SharedCounts3.jsp">

SharedCounts3.jsp</A>,

<jsp:getProperty name="counter"

property="firstPage" />

was the first page accessed.

<P>Collectively, the three pages have been

accessed

<jsp:getProperty name="counter"

property="accessCount" />

times.

</BODY>

</HTML>

Listing 4.8 File JSP untuk AccessCountBean

Page 69: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 13

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

5. Simpan Listing 4.9 di package com.chocolove.

/* paket dari class */

package com.chocolove;

public class CounterBean {

int count = 3; /* nilai awal properti */

/* method untuk mengambil nilai properti */

public int getCount() {

return count;

}

/* method untuk mengisi nilai properti */

public void setCount(int c) {

count = c;

}

/* method untuk menaikkan nilai properti */

public int increaseCount() {

count++;

return count;

}

}

Listing 4.9 CounterBean.java

Listing 4.10 File JSP untuk CounterBean

Page 70: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 14

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

<html>

<head><title>JSP</title></head>

<body> <jsp:useBean id="cacah"

class="com.chocolove.CounterBean"

scope="page">

Nilai awal, langsung dari Action getProperty tanpa set

lewat JSP :

<jsp:getProperty name="cacah"

property="count" /><br>

<jsp:setProperty name="cacah"

property="count" value="8" />

</jsp:useBean>

<%

out.print("Nilai setelah diset dengan setProperty

cacah.getCount

: "+()); cacah.setCount(5);

cacah.increaseCount();

out.println("<br>");

out.println("Nilai setelah dicacah :"+cacah.getCount());

%>

<br>Nilai dari Action getProperty :

<jsp:getProperty name="cacah" property="count" /><br>

</body>

</html>

Page 71: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 15

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

Latihan

1. Terangkan secara ringkas cara pengaksesan properti Java

Bean.

2. Terangkan secara ringkas cara seting properti Java Bean.

3. Amati program-program pada dasar teori di atas output apa yang akan dihasilkan jika

program diatas akan dijalankan

4. Buat Java Bean yang memiliki properti sebagai berikut:

a. noKTP : String

b. nama : String

c. menikah : boolean

d. umur : int

6. Buat file JSP yang digunakan untuk mengeset dan menampilkan semua properti Java

Bean yang telah dibuat pada percobaan 4.1.

7. Buatlah package cwp. Simpan Listing 4.11 di package cwp

Page 72: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 16

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

Daftar Pustaka

Hans Bergsten, . 2002. JavaServer Pages™, 2nd Edition. O'Reilly Yuliana, eepis-its.edu .

Page 73: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

MODUL PERKULIAHAN

Pemrogramam Web Enterprise

Object Implisit

Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh

Ilmu Komputer Sistem Informasi

06 87040 Tim Dosen

Abstract Kompetensi

Daftar Objek Implisit • Variabel Request • Variabel Response

mahasiswa diharapkan mampu: 1. Mahasiswa mengenal Daftar Objek Implisit 2. Mahasiswa mengenal Variabel Request 3. Mahasiswa mengenal Variabel Response

Page 74: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 2

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

Object Implisit

6.1 Daftar Objek Implisit

JSP menyediakan sejumlah objek yang dikenal dengan sebutan objek implicit (implicit

object) atau terkadang disebut variable terdefinisi (predefined variable).

Tabel 1 – Daftar Variabel Terdefinisi.

Objek Keterangan

Request Variabel ini berhubungan dengan objek permintaan

HTTP (HTTPServletRequest). Variabel ini

memungkinkan pengaksessan seperti parameter-

parameter permintaan, tipe permintaan (GET atau

POST), dan judul HTTP

Page 75: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 3

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

Response Variabel ini berhubungan dengan objek tanggapan

terhadap klien (HTTPServletResponse). Antara lain

dapat digunakan untuk menciptakan cookie.

Out Variabel ini digunakan untuk mengirim keluaran ke

klien. Bisa digunakan dalam bentuk out.println() atau

out.print()

Page 76: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 4

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

Session Variabel ini digunakan untuk menangani sesi

Application ServletContext

Config Merupakn variable yang merujuk ke objek

ServletConfig untuk halaman sekarang.

pageContext Menyimpan informasi tentang objek halaman

sekarang.

Page Merupakan sinonim dari this. Menyatakan halaman

JSP.

6.2 Variabel Request

Beberapa metode yang terdapat pada variabel request dapat dilihat pada tabel berikut :

Metode Keterangan

getParameter(String

nama)

Memperoleh nilai parameter nama dengan

hasil bertipe String. Kalau parameter nama

tidak tersedia, maka hasilnya berupa null.

getParameterNames() Menghasilkan suatu Enumeration yang

berisi nama-nama parameter yang terdapat

pada permintaan.

getProtocol() Menghasilkan suatu string yang

menyatakan nama dan versi protokol yang

digunakan untuk melakukan permintaan.

getRemoteAddr() Menghasilkan suatu string yang

menyatakan alamat IP klien yang

mengirimkan permintaan

getRemoteHost() Menghasilkan suatu string yang

menyatakan nama host milik klien yang

mengirimkan permintaan.

getScheme() Menghasilkan suatu string yang

menyatakan skema yang digunakan untuk

melakukan permintaan (misalnya

http,https,atau ftp)

Page 77: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 5

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

getServerName() Menghasilkan nama server yang

melakukan permintaan.

Page 78: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 6

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

getServerPort() Menghasilkan bilangan bertipe int yang

menyatakan nomor port yang menerima

permintaan.

6.3 Variabel Response

Fungsi metode variabel response sangat bervariasi, antara lain digunakan untuk cookie,

menambah judul tanggapan, mengubah judul tanggapan, mengirim suatu kode tanggapan

kesalahan atau mengalihkan ke suatu URL yang lain.

6.4 Percobaan

1. Membuat object implicit request

Kode : request.jsp

<html>

<head>

<title>Pemakaian Request</title>

</head>

<body>

<%@ page import="java.util.Enumeration" %>

IP Klien : <% request.getRemoteAddr()%> <BR>

Host Klient : <% request.getRemoteHost()%><BR>

Server : <% request.getServerName()%><BR>

Port : <% request.getServerPort()%><BR>

</body>

</html>

Listing Program 6.1

Page 79: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 7

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

Hasil di browser :

Gambar 6.1

2. Membuat object implisit untuk mendapatkan header.

<html>

<head>

<title>Request</title>

</head>

<body>

The request method is <%= request.getMethod() %> <BR>

The request URI is <%= request.getRequestURI() %><BR>

The request protocol is <%= request.getProtocol() %><BR>

The browser is <%= request.getHeader("user-agent") %><BR>

</body>

</html>

Listing Program 6.2

Hasil di browser :

Page 80: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 8

Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI. http://www.mercubuana.ac.id

Gambar 6.2

3. Membuat variabel response.

Kode : redirect.jsp

<html>

<head>

<title>Redirect</title>

</head>

<body>

<%

response.sendRedirect("request.jsp");

%>

</body>

</html>

Listing Program 6.3

Pada contoh diatas

response.sendRedirect("request.jsp");

akan membuat dokumen request.jsp dijalankan menggantikan redirect.jsp.

Page 81: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

Latihan

1. Apa yang dimaksud dengan object implisit?

2. Sebutkan cara pembuatan object implisit?

3. Apa yang dimaksud dengan variable request dan variable response ?

4. Buat sebuah program yang dapat mengenali browser yang dipakai oleh user

dengan objek implisit.

Daftar Pustaka

1. Hans Bergsten, . 2002. JavaServer Pages™, 2nd Edition. O'Reilly 2. Yuliana, eepis-its.edu

.

Page 82: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

MODUL PERKULIAHAN

Pemrogramam Web Enterprise

Penanganan Form

Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh

Ilmu Komputer Sistem Informasi

07 87040 Tim Dosen

Abstract Kompetensi

Tag Form

• Membaca Parameter dari

form HTML

mahasiswa diharapkan mampu: 1. Mahasiswa mengenal Form JSP 2. Mahasiswa dapat membaca parameter dari HTML form

Page 83: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 2

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

Penanganan Form

7.1 Form dan pembacaan parameter

Form

Form sangat penting untuk mendapatkan informasi penting dari user sebuah website.

Pada contoh berikut ini kita membuat form sederhana untuk survey warna kesukaan user

dan mengambalikan nilainya ke user.

Langkah pertama, buat entry form html . form html tersebut akan mengirimkan ke

form.jsp untuk diproses.

Membaca parameter dari HTML form.

Parameter dari HTML Form dapat dibaca melalui interaksi dengan obyek

HttpServletRequest, yaitu dengan menggunakan method getParameter(). Sebagai contoh :

String name = request.getParameter("NAME");

String sex = request.getParameter("SEX");

String email = request.getParameter("EMAIL");

7.2 Percobaan

1. Membuat form HTML:

Kode : form.html

<html>

<form action="form.jsp" method="get">

<table>

<tr><td><b>Name</b>

<td><input type="text" name="name">

<tr><td><b>Favorite color</b>

<td><input type="text" name="color">

</table>

<input type="submit" value="Send">

</form>

</html>

Listing Program 7.1

2. Membuat kode form JSP

Page 84: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 3

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

Kode : form.jsp

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>JSP Page</title>

</head>

<body>

Name: <%= request.getParameter("name") %> <br>

Color: <%= request.getParameter("color") %>

</body>

</html>

Listing Program 7.2

Hasil di browser :

Gambar 7.1

Gambar 7.2

Page 85: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 4

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

3. Membuat labform.html

Kode : labform.html <html>

<head>

<title>Form JSP</title>

</head>

<body bgcolor=white>

<form action=proseslatform.jsp method=post>

<table border=1>

<tr>

<td colspan=2>DATA</td>

</tr>

<tr>

<td>Name :</td>

<td><input type=text name=NAME></td>

</tr>

<tr>

<td>Sex :</td>

<td><input type=radio name=SEX value=M checked>Male <input

type=radio name=SEX value=F>Female </td>

</tr>

<tr>

<td>Email :</td>

<td><input type=text name=EMAIL></td>

</tr>

<tr>

<td>Competency :</td>

<td>

<select name=COMPETENCY>

<option value="Programming :: Java">Programming ::

J2EE</option>

<option value="Programming :: .NET">Programming ::

NET</option>

<option value="Programming :: PHP">Programming ::

PHP</option>

<option value="OS :: Linux">OS :: Linux</option>

<option value="OS :: Solaris">OS :: Solaris</option>

<option value="OS :: Windows">OS :: Windows</option>

<option value="DB :: mySQL">DB :: mySQL</option>

<option value="DB :: Oracle">DB :: Oracle</option>

<option value="DB :: PostgreSQL">DB ::

PostgreSQL</option>

</select>

</td>

</tr>

<tr>

<td>Interest :</td>

<td>

<input type=checkbox name=INTEREST0 value=Anthropology>

Anthropology

<input type=checkbox name=INTEREST1 value=Astronomy>

Astronomy

<input type=checkbox name=INTEREST2 value=Business> Business

<input type=checkbox name=INTEREST3 value=Politics> Politics

<input type=checkbox name=INTEREST4 value=Sport> Sport

</td>

Page 86: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 5

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

</tr>

<tr>

<td> </td>

<td><input type=submit value=Proceed></td>

</tr>

</table>

</form>

</body>

</html>

Listing Program 7.3

4. Membuat kode proseslabform.jsp untuk menangkap parameter

Kode : proseslabform.jsp

<%

String name = request.getParameter("NAME");

String sex = request.getParameter("SEX");

String email = request.getParameter("EMAIL");

String competency = request.getParameter("COMPETENCY");

String interest = "";

for(int i=0;i<5;i++)

{

String interestI = request.getParameter("INTEREST" + i);

if(interestI != null)

{

interest += " " + interestI;

}

}

%>

<html>

<head>

<title></title>

<meta content="">

<style></style>

</head>

<body bgcolor=white>

<table border=1>

<tr>

<td colspan=2>DATA</td>

</tr>

<tr>

<td>Name :</td>

<td><%=name%></td>

</tr>

<tr>

<td>Sex :</td>

<td><%=sex%></td>

</tr>

<tr>

<td>Email :</td>

<td><%=email%></td>

</tr>

<tr>

<td>Competency :</td>

<td>

<%=competency%>

</td>

</tr>

Page 87: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 6

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

<tr>

<td>Interest :</td>

<td>

<%=interest%>

</td>

</tr>

</table>

</form>

</body>

</html>

Listing Program 7.4

Hasil di browser :

Gambar 7.3

Page 88: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 7

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

Listing Program 7.4

Latihan

1. Sebutkan parameter dalam pembuatan form JSP ?

2. Sebutkan tag-tag dalam pembuatan form ?

3. Buat sebuah program aplikasi form guestbook

Daftar Pustaka

3. Hans Bergsten, . 2002. JavaServer Pages™, 2nd Edition. O'Reilly 4. Yuliana, eepis-its.edu

.

Page 89: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

MODUL PERKULIAHAN

Pemrogramam Web Enterprise

JSP dan Database

Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh

Ilmu Komputer Sistem Informasi

08 87040 Tim Dosen

Abstract Kompetensi

Tag Form

• jsp dan database mahasiswa diharapkan mampu: 1. menghubungkan JSP dengan database

Page 90: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 2

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

JSP dan database

Servlet

1. Konsep Dasar Servlet

Servlet merupakan kelas yang didefinisikan dalam java dan digunakan untuk

meningkatkan kemampuan server web dalam menangani request dan response dari

klien. Inisialisasi kode servlet hanya dijalankan sekali. Servlet juga mewarisi seluruh

fitur bahasa pemrograman Java, seperti semua kelas pada java standar (j2se),

servlet juga bebas platform dan dapat digunakan pada sistem operasi yang berbeda.

Servlet dapat menerima request dan menghasilkan response melalui protokol

komunikasi yang berbeda.

Selain mewarisi mewarisi semua fitur pada java, servlet juga memiliki fitur sebagai

berikut :

1. Security : Servlet mewarisi fitur keamanan yang disediakan oleh Web Container.

2. Session Management : Manajemen pengecekan status dari permintaan klien.

3. Instance Persistence : Servlet membantu meningkatkan kinerja sistem dengan

mencegah tingkat pengaksesan sumber daya secara berulang-ulang.

Servlet dapat digunakan dalam berbagai bentuk aplikasi web. Contohnya antara lain

sebagai berikut :

1. Digunakan dalam sebuah sistem penjualan online yang mengkonfirmasi

pemesanan penjualan kepada klien sesuai permintaan pemesanan.

2. Servlet dapat dipakai bersama-sama dengan applet yang dapat menyajikan

komponen GUI untuk menerima response dari pengguna. Request dari

pengguna yang diproses oleh applet dikirimkan ke Servlet untuk diproses lebih

lanjut, yang memungkinkan untuk menyajikan tampilan yang lebih menarik,

namun servlet tidak dapat menyajikan komponen GUI java (baik Swing maupun

AWT).

3. Servlet dapat digunakan untuk meneruskan request ke servlet lain atau ke JSP.

Servlet dapat dipakai dalam proses load-balancing dimana request akan

diteruskan secara berantai atau servlet dapat dipakai sebagai sebuah filter untuk

memilah-milah request yang ditujukan kepada salah satu dari multi target. Servlet

menerima seluruh jenis request dan meneruskannya ke target lainya, dapat

berupa servlet juga, jsp atau resource lainnya.

2. Memulai Servlet

Buat sebuah project baru dengan nama ContohServlet, pada project tersebut

tambahkan sebuah kelas servlet yang baru, beri nama “HalloServlet” seperti gambar

Page 91: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 3

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

8.1. kemudian klik Next dan tandai “Add Information to deployment

descriptor(web.xml)” agar servlet dapat dikenali dengan nama dan alamat URL nya

seperti gambar 8.2.

Gambar 8.1. HalloServlet

Gambar 8.2. Menambahkan servlet ke deployment descriptor

Pada halaman servlet yang muncul, hapus komentar di dalam metode

processRequest dan ganti dengan :

out.println("<H1>Hallo Servlet</H1>");

Jalankan aplikasi dengan klik kanan pada File HalloServlet dan pilih Run atau dapat

dengan menuliskan URL pada browser :

http://localhost:8084/ContohServlet/HalloServlet

Pastikan proyek telah dideploy jika anda ingin menuliskan URL diatas secara manual

pada browser.

Keterangan untuk URL diatas adalah sbb :

http: = protokol

localhost = alamat server

8084 = alamat port yang digunakan

Page 92: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 4

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

ContohServlet = nama Aplikasi / Project

HalloServlet = nama file servlet

JSP dapat digunakan untuk meneruskan proses ke halaman servlet menggunakan

metode sendRedirect pada kelas Response.

Pada halaman index.jsp tambahkan kode untuk meneruskan proses ke halaman

servlet sbb:

<%

response.sendRedirect("HalloServlet");

%>

3. Operasi Sederhana menggunakan Servlet

Contoh operasi sederhana berbasis bahasa Java Standar menggunakan servlet disini

misalkan mencetak angka dan menuliskan hasil pemangkatan angka 3 dari bilangan-

bilangan tersebut pada standar output browser.

Buatlah sebuah file kelas servlet baru, misalkan diberi nama pangkatTiga.java, lalu

tuliskan kode dibawah ini :

try {

out.println("<H1>Bilangan Pangkat Tiga 1 sampai dengan 10</H1>");

out.println("<TABLE BORDER=1 ALIGN='CENTER'>");

out.println("<TR><TD>Bilangan</TD><TD>Hasil Pangkat

3</TD></TR>");

for(int i=0;i<=10;i++)

{

out.println("<TR><TD>" + i + "</TD>");

out.print("<TD>"+ Math.pow(3, i) +"</TD></TR>");

}

out.println("</TABLE>");

} finally {

out.close();

}

Hasilnya akan tampak seperti gambar 8.3.

Page 93: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 5

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

Gambar 5.3. Bilangan Pangkat tiga

4. Request-Response

Kelas Request-Responsejuga dapat digunakan pada servlet selain pada JSP, pada kelas ini

terdapat metode yang sudah pernah dicontohkan sebelumnya pada halaman JSP, yakni

metode getParameter, untuk memahami implementasi request-response pada halaman

servlet buatlah sebuah file jsp dengan nama FormLogin.jsp, isikan kode dibawah ini:

<title>Halaman Login</title>

</head>

<body>

<h1>Silahkan Masukkan Username dan Password dengan benar</h1>

<form name="form1" action="../welcome">

<table>

<tr><td>

Username : </td><td><Input type="text"

name="username"></input>

</td>

</tr>

<tr><td>

Password :</td><td><input type="password"

name="pass"></input></td>

</tr>

<tr><td>

<input type="submit" value=" LOGIN "</td><td><input

type="reset" value=" BATAL " ></input></td>

</tr>

</table>

Page 94: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 6

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

</form>

Kemudian buat sebuah file servlet dengan nama “welcome.java” dan isikan kode dibawah ini

:

String data = request.getParameter("username");

out.println("Selamat Datang "+ data);

Uji coba halaman FormLogin.jsp, masukkan data, maka hasilnya akan tampak seperti gambar 8.4 dan

8.5.

Gambar 8.4. FormLogin.jsp

Gambar 8.5. Halaman Welcome

Semua metode yang dapat digunakan pada halaman servlet sama seperti JSP, hanya saja pada servlet

setiap metode yang akan dipanggil harus melalui objek yang harus terlebih dahulu dibuat dari kelas-

kelas dimana metode tersebut berada. Sebagai contoh untuk session dengan melakukan koneksi ke

database dan mencari username maupun password yang valid dapat digunakan kode dibawah ini pada

kelas welcome.java

HttpSession sesion = request.getSession();

String username = request.getParameter("username");

String password = request.getParameter("password");

try {

Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");

Connection con = DriverManager.getConnection("jdbc:odbc:SIA_DS");

String Query = "select * from login where

username='"+username+"' and password='"+password+"'";

Statement stmt = con.createStatement();

ResultSet rs = stmt.executeQuery(Query);

if(rs.next())

{

String nama = rs.getString(1);

// String pass = rs.getString(2);

sesion.setAttribute("nama", nama);

Page 95: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 7

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

out.println("Selamat Datang " + nama);

}

else

{

out.println("Maaf anda salah memasukkan username atau password") ;

}

}

catch(ClassNotFoundException e)

{

}

catch (SQLException ex) {

}

finally {

out.close();

}

5. Gambar dan Database

Suatu halaman web kurang menarik kalau tidak dilengkapi gambar, untuk melengkapi halaman web

dengan gambar yang disimpan dalam database dapat dilakukan dengan langkah-langkah sebagai

berikut :

1. Buatlah sebuah tabel yang dapat menyimpan gambar pada database, gunakan database

akademik yang pernah dibuat sebelumnya, kueri nya adalah sbb:

Use SIA

go

create table gmbr_mhsiswa

(

ids int identity(1,1),

judul_gambar char(25),

gambar varbinary(max),

primary key(ids)

)

2. Uji coba untuk memasukkan data gambar dengan kueri sbb:

insert gmbr_mhsiswa(judul_gambar,gambar)

select 'gambar1',* FROM OPENROWSET(BULK

N'C:\Users\Public\Pictures\Sample Pictures\Koala.jpg',

SINGLE_BLOB) rs

Page 96: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 8

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

3. Buatlah sebuah halaman Servlet dengan nama “GaleriMahasiswa” yang dapat digunakan

untuk menampilkan gambar, kode untuk menampilkan gambar pada halaman servlet adalah

sbb :

try

{

Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");

Connection con =

DriverManager.getConnection("jdbc:odbc:SIA_DS");

String Query = "select gambar from gmbr_mhsiswa";

Statement st1=con.createStatement();

ResultSet rs1 = st1.executeQuery(Query);

String imgLen="";

if(rs1.next())

{

imgLen = rs1.getString(1);

System.out.println(imgLen.length());

}

rs1 = st1.executeQuery(Query);

if(rs1.next())

{

int len = imgLen.length();

byte [] rb = new byte[len];

InputStream readImg = rs1.getBinaryStream(1);

int index=readImg.read(rb, 0, len);

System.out.println("index "+index);

st1.close();

response.reset();

response.setContentType("image/jpg");

response.getOutputStream().write(rb,0,len);

response.getOutputStream().flush();

}

}

catch (Exception e)

Page 97: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 9

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

{

e.printStackTrace();

}

finally

{

out.close();

}

JSP

Pada pembahasan kali ini saya akan membahas tentang Menampilkan Data Pada Database

MySQL Di JSP(Java Server Page). Sebelum itu anda harus mempunyai IDE Netbeans dan databasenya

tentunya MySQL dan Membuat Database serta tabel dan isi tabelnya.Jika saya mempunyai database school

& tabel.Jangan lupa untuk mengkoneksikan MySQL ke IDE Netbeans. Setelah itu buatlah project baru

dengan nama terserah anda inginkan. Klik New Project > Java Web > WebApplication

Lalu pada index.jsp sudah tersedia syntax mentahnya tinggal kita edit saja. Berikut ini adalah syntax

mentahnya :

Page 98: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 10

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

Sekarang tuliskanlah syntax seperti di bawah ini:

<%-Document : index Created on : Sep 11, 2012, 9:54:12 AM Author : Acchan

--%><%@ page import="java.sql.*" %>

<%@ page import="java.io.*" %><html><head>

<title>File</title> </head> <body> <% try {String Host = "jdbc:mysql://localhost:3306/school";Connection connection = null;Statement

statement = null;ResultSet rs = null;Class.forName("com.mysql.jdbc.Driver");connection = DriverManager.getConnection(Host, "root", "");statement = connection.createStatement();String Data = "select * from student";rs = statement.executeQuery(Data);

%> <TABLE border="1"> <trwidth="10"

bgcolor="#9979"><td>NIS</td><td>Nama</td><td>Alamat</td><td>Email</td><td>Pesan</t

d>

</tr><%while (rs.next()) {%><TR>

<TD><%=rs.getString("NIS")%></TD><TD><%=rs.getString("Nama")%></TD><TD><%=rs.

getString("Alamat")%></TD><TD><%=rs.getString("Email")%></TD><TD><%=rs.getString(

"Pesan")%></TD>

</TR><% } %></table><%rs.close();statement.close();connection.close();

} catch (Exception ex) { out.println("Can't connect to database."); } </body> </html> Syntax-syntax JSP di taruh diantara <%...%> Mungkin kelihatannya

syntax tersebut sangatlah banyak, tapi tenang saja saya akan menjelaskan syntax-syntax di atas. Pertama

<%-

Document : index //nama file Created on : Sep 11, 2012, 9:54:12 AM //Dibuat pada

Author : Acchan //nama author

--%> Sebuah komentar pada JSP diawali dengan <%--dan diakhiri dengan --%> Kedua <%@ page import="java.sql.*" %> <%@ page import="java.io.*" %> Ini adalah syntax yang digunakan untuk mengambil java IO dan SQL dan tanda * (bintang) pada java.sql.* atau java.io.* ini berarti mengambil semua syntax. Ketiga Try Syntax ini hampirsama dengan syntax percabangan, berikut ini adalah syntax mentahnya: Try{ }catch(Exception e){ } Keempat

Page 99: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 11

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

String Host = "jdbc:mysql://localhost:3306/school"; <%--URL yang digunakan untuk mengakses database pada MySQL--%> Connection connection = null; <%--ini adalah deklarasi variable connection yang bertipe Connection dan memiliki value null alias kosong--%> Statement statement = null; <%--deklarasi variable statement yang bertipe Statement dan memiliki nilai null alias kosong--%> ResultSet rs = null; <%--deklarasi variable rs yang bertipe ResultSet dan memiliki nilai null atau kosong--%> Class.forName("com.mysql.jdbc.Driver"); <%--ini adalah pengambilan mysql driver--%> connection = DriverManager.getConnection(Host, "root", ""); <%--pengambilan koneksi dari host, username, dan password yang ditampung oleh variable connection yang telah di deklarasikan di aktas --%> statement = connection.createStatement(); <%--Digunakan untuk pembuatan statement yang ditampung oleh variable statement--%> String Data = "select * from student"; <%--menampilkan semua data dari tabel student dan akan ditampung oleh variable Data --%> rs = statement.executeQuery(Data); <%--Digunakan untuk membuka Query yang akan di simpan pada variable rs --%> Terakhir

<TABLE border="1"> <tr width="10" bgcolor="blue"> <td>NIS</td> <td>Nama</td> <td>Alamat</td> <td>Email</td> <td>Pesan</td> </tr>

<%--Digunakan untuk membuat kolom NIS, Nama, Alamat, Email, Pesan--%> <% while (rs.next()) {

%>

<%--Digunakan untuk meresult atau menambahkan semua field yang ada pada database --%>

<TR><TD><%=rs.getString("NIS")%></TD>

<TD><%=rs.getString("Nama")%></TD><TD><%=rs.getString("Alamat")%></TD><TD><%

=rs.getString("Email")%></TD><TD><%=rs.getString("Pesan")%></TD>

</TR>

<%--Digunakan untuk membuat kolom dan baris sesuai banyaknya data yang ada pada database--%>

<% } %></table><%rs.close();statement.close();

connection.close();

<%--Digunakan untuk menutup semua koneksi--%>

} catch (Exception ex) { out.println("Can't connect to database."); }

<%--ini adalah pengecualian jadi jika semua statemen sebelum catch itu gagal maka statemen ini

akan ditampilkan--%>

Setelah semuanya selesai sekarang jalankan file index.jsp jika berhasil maka akan tampil

data yang

Page 100: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 12

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

Dan jika gagal maka akan tampil seperti ini: Sedikit-demi sedikit anda harus menjadi lebih baik dan

semoga menjadi lebih baik diantara yang paling baik. Sampai bertemu diartikel selanjutnya

Page 101: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

Latihan

1. Sebutkan parameter dalam pembuatan form JSP ?

2. Sebutkan tag-tag dalam pembuatan form ?

3. Buat sebuah program aplikasi form guestbook

Daftar Pustaka

5. Hans Bergsten, . 2002. JavaServer Pages™, 2nd Edition. O'Reilly

Page 102: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

MODUL PERKULIAHAN

Pemrogramam Web Enterprise

JSP dan Image

Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh

Ilmu Komputer Sistem Informasi

09 87040 Tim Dosen

Abstract Kompetensi

Tag Form

• jsp dan database mahasiswa diharapkan mampu: 1. menghubungkan JSP, image dengan database

Page 103: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 2

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

JSP dan database

1. Meng-update / mengganti data gambar pada tabel Database.

Meng-update atau mengganti gambar adalah fitur yang sangat penting pada sebuah halaman

web, terutama sekali jika web tersebut memiliki halaman-halaman gambar yang

membutuhkan proses pergantian dengan gambar yang baru, contohnya sebuah halaman profil

pengguna yang mengharuskan untuk selalu diupdate/diperbaiki oleh penggunanya. Untuk itu

dibutuhkan sebuah proses untuk melakukan penggantian data gambar pada tabel database.

Untuk menambahkan fitur peng-update-an/penggantian data gambar pada tabel database

dapat menggunakan proyek yang telah dibuat pada modul sebelumnya. Dalam modul ini

gambar akan diganti berdasarkan judul gambar dan gambar yang diuploadkan

sertadikirimkandari halaman ItemGaleri.jsp ke halaman UbahGaleri.jsp, pada halaman

UbahGaleri.jsp parameter di get untuk kemudian digunakan untuk diteruskan sebagai

parameter prosedur untuk mengganti gambar sesuai dengan dengan gambar baru yang

diinputkan pada sebuah halaman galeri yang telah dibuat sebelumnya. Untuk merealisasikan

hal ini maka terlebih dahulu kita harus mengambil nilai judul gambar yang telah dimasukkan

ke dalam tabel database.

Maka kode pada halaman ItemGaleri.jsp menjadi seperti dibawah ini :

...

<%

//for(int i=0;i<=10;i++)

// {

Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");

Connection con =

DriverManager.getConnection("jdbc:odbc:SIA_DS");

Statement stmt = con.createStatement();

String sql = "select * from gmbr_mhsiswa";

ResultSet rs = stmt.executeQuery(sql);

int idplus=0;

int id=0;

String judul="";

while(rs.next())

{

id=rs.getInt(1);

judul=rs.getString(2);

Page 104: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 3

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

String ids = Integer.toString(id);

idplus=id+1;

%>

<a href="../MenuGallery?id=<%=ids%>" >

<img src="../MenuGallery?id=<%=ids%>" width="80"

height="80"></a>

<a href="UbahGaleri.jsp?judul=<%=judul%>" >Ubah</a>

<%

}

%>

<form name="Form_TambahGambar" onSubmit="fungsi()"

action="../SaveGallery?coba=gambar<%=idplus%>"

enctype="multipart/form-data" method="post">

Tambah Gambar Galeri<br/></br>

Judul Gambar : <input type="text" Name="coba"

id="coba" ></input>

<br></br>

<input type="file" required="required" Name="AddImage"

value="">

<input type="Submit" value="Tambah" >

<input type="Reset" value="Reset">

</form>

...

Sehingga tampilannya seperti gambar.

Kemudian buatlah sebuah halaman JSP untuk penggantian gambar dengan nama

UbahGaleri.jsp dengan kode lengkap sbb:

<body>

<%

String judul=request.getParameter("judul");

%>

Page 105: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 4

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

<form name="Form_UbahGambar"

action="../UbahGallery?coba=<%=judul%>"

enctype="multipart/form-data" method="post">

Tambah Gambar Galeri<br/></br>

<input type="file" required="required" Name="UpdateImage"

value="">

<input type="Submit" value="Ganti" >

<input type="Reset" value="Reset">

</form>

</body>

Kemudian buatlah sebuah file Servlet bernama UbahGallery.java dengan kode

processRequest() sbb:

String judul = request.getParameter("coba");

out.print(judul);

try {

byte[] b = null;

DiskFileItemFactory factory = new DiskFileItemFactory();

ServletFileUpload sfu = new ServletFileUpload(factory);

List items = sfu.parseRequest(request);

Iterator iter = items.iterator();

while (iter.hasNext())

{

FileItem item = (FileItem) iter.next();

if (!item.isFormField())

b = item.get();

}

Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");

Connection con =

DriverManager.getConnection("jdbc:odbc:SIA_DS");

String Query = "Exec ProcUpdateGallery ?,?";

PreparedStatement stmt = con.prepareStatement(Query);

stmt.setString(1, judul);

stmt.setBytes(2, b);

int result = stmt.executeUpdate();

if(result > 0)

out.println("Uploaded successfully !");

Page 106: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 5

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

else

out.println("Uploaded Error !");

con.close();

response.sendRedirect("view/ItemGaleri.jsp");

} catch (SQLException ex) {

Logger.getLogger(UbahGallery.class.getName()).log(Level.SEVERE

, null, ex);

} catch (ClassNotFoundException ex) {

Logger.getLogger(SaveGallery.class.getName()).log(Level.SEVERE

, null, ex);

} catch (FileUploadException ex) {

Logger.getLogger(SaveGallery.class.getName()).log(Level.SEVERE

, null, ex);

}

Kemudian buatlah prosedur untuk update data gambar pada tabel database dengan kode sbb:

create procedure ProcUpdateGallery

@id_gambar char(25),

@gambar varbinary(max)

as

update gmbr_mhsiswa set gambar=@gambar

where ids=@id_gambar

Uji coba aplikasi diatas dengan mengklik tombol Ubah, kemudian pilih gambar pengganti dan

klik ganti, perhatikan hasilnya seperti urutan gambar dibawah ini, contoh kita akan mengganti

gambar Penguin pada urutan gambar pertama.

Gambar 10.1. Memilih Gambar

Page 107: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 6

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

Gambar 10.2. Gambar telah terpilih

Gambar 10.3. Gambar paling kiri telah diganti dengan gambar baru

2. Meng-hapus data gambar pada tabel Database

Setelah berhasil melakukan proses penggantian gambar,maka berikutnya akan ditambahkan link

untuk melakukan penghapusan gambar, perbedaan dengan sebelumnya adalah tidak adanya

halaman perantara untuk memilih gambar pengganti seperti pada proses penggantian gambar.

Untuk dapat melakukan proses penghapusan gambar, tambahkan link hapus pada masing-masing

gambar untuk halaman ItemGaleri.jsp dengan cara sbb:

...

<a href="../HapusGaleri?id=<%=ids%>" >Hapus</a>

...

Kemudian, buatlah file Servlet HapusGaleri.java dan tambahkan kode sbb:

String id = request.getParameter("id");

int ids = Integer.parseInt(id);

out.print(ids);

try {

Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");

Connection con = DriverManager.getConnection("jdbc:odbc:SIA_DS");

String Query = "Exec ProcHapusGallery ?";

PreparedStatement stmt = con.prepareStatement(Query);

stmt.setInt(1, ids);

int result = stmt.executeUpdate();

if(result > 0)

out.println("Uploaded successfully !");

else

out.println("Uploaded Error !");

con.close();

Page 108: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 7

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

response.sendRedirect("view/ItemGaleri.jsp");

} catch (SQLException ex) {

Logger.getLogger(HapusGaleri.class.getName()).log(Level.SEVERE,

null, ex);

} catch (ClassNotFoundException ex) {

Logger.getLogger(SaveGallery.class.getName()).log(Level.SEVERE,

null, ex);

} finally {

out.close();

}

Lalu tambahkan juga kode untuk proses penghapusan menggunakan prosedur dengan kode sbb :

create procedure ProcHapusGallery

@ids int

as

begin

delete from gmbr_mhsiswa

where ids=@ids

end

Kemudian jalan aplikasi, agar tampak seperti gambar dibawah ini, klil hyperlink Hapus, dan

perhatikan hasilnya. Contoh gambar dibawah ini akan dihapus gambar koala yang berjumlah lebih

dari satu.

Page 109: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 8

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

Latihan

1. Dari soal pada modul sebelumnya, tambahkan hyperlink untuk ubah dan hapus

gambar pada halaman profil dosen

2. Buatlah kelas untuk masing-masing proses

3. Pastikan pengguna tidak perlu repot melakukan input data kecuali upload gambar

saja

4. Buat prosedur untuk ubah maupun hapus gambar

5. Uji Coba aplikasi

Daftar Pustaka

6. Hans Bergsten, . 2002. JavaServer Pages™, 2nd Edition. O'Reilly

Page 110: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

MODUL PERKULIAHAN

Pemrogramam Web Enterprise

JSP dan Database

Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh

Ilmu Komputer Sistem Informasi

09 87040 Tim Dosen

Abstract Kompetensi

Tag Form

• jsp dan database mahasiswa diharapkan mampu: 1. menghubungkan JSP dengan database

Page 111: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 2

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

JSP dan database

Servlet

6. Konsep Dasar Servlet

Servlet merupakan kelas yang didefinisikan dalam java dan digunakan untuk

meningkatkan kemampuan server web dalam menangani request dan response dari

klien. Inisialisasi kode servlet hanya dijalankan sekali. Servlet juga mewarisi seluruh

fitur bahasa pemrograman Java, seperti semua kelas pada java standar (j2se),

servlet juga bebas platform dan dapat digunakan pada sistem operasi yang berbeda.

Servlet dapat menerima request dan menghasilkan response melalui protokol

komunikasi yang berbeda.

Selain mewarisi mewarisi semua fitur pada java, servlet juga memiliki fitur sebagai

berikut :

4. Security : Servlet mewarisi fitur keamanan yang disediakan oleh Web Container.

5. Session Management : Manajemen pengecekan status dari permintaan klien.

6. Instance Persistence : Servlet membantu meningkatkan kinerja sistem dengan

mencegah tingkat pengaksesan sumber daya secara berulang-ulang.

Servlet dapat digunakan dalam berbagai bentuk aplikasi web. Contohnya antara lain

sebagai berikut :

4. Digunakan dalam sebuah sistem penjualan online yang mengkonfirmasi

pemesanan penjualan kepada klien sesuai permintaan pemesanan.

5. Servlet dapat dipakai bersama-sama dengan applet yang dapat menyajikan

komponen GUI untuk menerima response dari pengguna. Request dari

pengguna yang diproses oleh applet dikirimkan ke Servlet untuk diproses lebih

lanjut, yang memungkinkan untuk menyajikan tampilan yang lebih menarik,

namun servlet tidak dapat menyajikan komponen GUI java (baik Swing maupun

AWT).

6. Servlet dapat digunakan untuk meneruskan request ke servlet lain atau ke JSP.

Servlet dapat dipakai dalam proses load-balancing dimana request akan

diteruskan secara berantai atau servlet dapat dipakai sebagai sebuah filter untuk

memilah-milah request yang ditujukan kepada salah satu dari multi target. Servlet

menerima seluruh jenis request dan meneruskannya ke target lainya, dapat

berupa servlet juga, jsp atau resource lainnya.

7. Memulai Servlet

Buat sebuah project baru dengan nama ContohServlet, pada project tersebut

tambahkan sebuah kelas servlet yang baru, beri nama “HalloServlet” seperti gambar

Page 112: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 3

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

8.1. kemudian klik Next dan tandai “Add Information to deployment

descriptor(web.xml)” agar servlet dapat dikenali dengan nama dan alamat URL nya

seperti gambar 8.2.

Gambar 8.1. HalloServlet

Gambar 8.2. Menambahkan servlet ke deployment descriptor

Pada halaman servlet yang muncul, hapus komentar di dalam metode

processRequest dan ganti dengan :

out.println("<H1>Hallo Servlet</H1>");

Jalankan aplikasi dengan klik kanan pada File HalloServlet dan pilih Run atau dapat

dengan menuliskan URL pada browser :

http://localhost:8084/ContohServlet/HalloServlet

Pastikan proyek telah dideploy jika anda ingin menuliskan URL diatas secara manual

pada browser.

Keterangan untuk URL diatas adalah sbb :

http: = protokol

localhost = alamat server

8084 = alamat port yang digunakan

Page 113: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 4

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

ContohServlet = nama Aplikasi / Project

HalloServlet = nama file servlet

JSP dapat digunakan untuk meneruskan proses ke halaman servlet menggunakan

metode sendRedirect pada kelas Response.

Pada halaman index.jsp tambahkan kode untuk meneruskan proses ke halaman

servlet sbb:

<%

response.sendRedirect("HalloServlet");

%>

8. Operasi Sederhana menggunakan Servlet

Contoh operasi sederhana berbasis bahasa Java Standar menggunakan servlet disini

misalkan mencetak angka dan menuliskan hasil pemangkatan angka 3 dari bilangan-

bilangan tersebut pada standar output browser.

Buatlah sebuah file kelas servlet baru, misalkan diberi nama pangkatTiga.java, lalu

tuliskan kode dibawah ini :

try {

out.println("<H1>Bilangan Pangkat Tiga 1 sampai dengan 10</H1>");

out.println("<TABLE BORDER=1 ALIGN='CENTER'>");

out.println("<TR><TD>Bilangan</TD><TD>Hasil Pangkat

3</TD></TR>");

for(int i=0;i<=10;i++)

{

out.println("<TR><TD>" + i + "</TD>");

out.print("<TD>"+ Math.pow(3, i) +"</TD></TR>");

}

out.println("</TABLE>");

} finally {

out.close();

}

Hasilnya akan tampak seperti gambar 8.3.

Page 114: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 5

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

Gambar 5.3. Bilangan Pangkat tiga

9. Request-Response

Kelas Request-Responsejuga dapat digunakan pada servlet selain pada JSP, pada kelas ini

terdapat metode yang sudah pernah dicontohkan sebelumnya pada halaman JSP, yakni

metode getParameter, untuk memahami implementasi request-response pada halaman

servlet buatlah sebuah file jsp dengan nama FormLogin.jsp, isikan kode dibawah ini:

<title>Halaman Login</title>

</head>

<body>

<h1>Silahkan Masukkan Username dan Password dengan benar</h1>

<form name="form1" action="../welcome">

<table>

<tr><td>

Username : </td><td><Input type="text"

name="username"></input>

</td>

</tr>

<tr><td>

Password :</td><td><input type="password"

name="pass"></input></td>

</tr>

<tr><td>

<input type="submit" value=" LOGIN "</td><td><input

type="reset" value=" BATAL " ></input></td>

</tr>

</table>

Page 115: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 6

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

</form>

Kemudian buat sebuah file servlet dengan nama “welcome.java” dan isikan kode dibawah ini

:

String data = request.getParameter("username");

out.println("Selamat Datang "+ data);

Uji coba halaman FormLogin.jsp, masukkan data, maka hasilnya akan tampak seperti gambar 8.4 dan

8.5.

Gambar 8.4. FormLogin.jsp

Gambar 8.5. Halaman Welcome

Semua metode yang dapat digunakan pada halaman servlet sama seperti JSP, hanya saja pada servlet

setiap metode yang akan dipanggil harus melalui objek yang harus terlebih dahulu dibuat dari kelas-

kelas dimana metode tersebut berada. Sebagai contoh untuk session dengan melakukan koneksi ke

database dan mencari username maupun password yang valid dapat digunakan kode dibawah ini pada

kelas welcome.java

HttpSession sesion = request.getSession();

String username = request.getParameter("username");

String password = request.getParameter("password");

try {

Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");

Connection con = DriverManager.getConnection("jdbc:odbc:SIA_DS");

String Query = "select * from login where

username='"+username+"' and password='"+password+"'";

Statement stmt = con.createStatement();

ResultSet rs = stmt.executeQuery(Query);

if(rs.next())

{

String nama = rs.getString(1);

// String pass = rs.getString(2);

sesion.setAttribute("nama", nama);

Page 116: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 7

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

out.println("Selamat Datang " + nama);

}

else

{

out.println("Maaf anda salah memasukkan username atau password") ;

}

}

catch(ClassNotFoundException e)

{

}

catch (SQLException ex) {

}

finally {

out.close();

}

10. Gambar dan Database

Suatu halaman web kurang menarik kalau tidak dilengkapi gambar, untuk melengkapi halaman web

dengan gambar yang disimpan dalam database dapat dilakukan dengan langkah-langkah sebagai

berikut :

4. Buatlah sebuah tabel yang dapat menyimpan gambar pada database, gunakan database

akademik yang pernah dibuat sebelumnya, kueri nya adalah sbb:

Use SIA

go

create table gmbr_mhsiswa

(

ids int identity(1,1),

judul_gambar char(25),

gambar varbinary(max),

primary key(ids)

)

5. Uji coba untuk memasukkan data gambar dengan kueri sbb:

insert gmbr_mhsiswa(judul_gambar,gambar)

select 'gambar1',* FROM OPENROWSET(BULK

N'C:\Users\Public\Pictures\Sample Pictures\Koala.jpg',

SINGLE_BLOB) rs

Page 117: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 8

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

6. Buatlah sebuah halaman Servlet dengan nama “GaleriMahasiswa” yang dapat digunakan

untuk menampilkan gambar, kode untuk menampilkan gambar pada halaman servlet adalah

sbb :

try

{

Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");

Connection con =

DriverManager.getConnection("jdbc:odbc:SIA_DS");

String Query = "select gambar from gmbr_mhsiswa";

Statement st1=con.createStatement();

ResultSet rs1 = st1.executeQuery(Query);

String imgLen="";

if(rs1.next())

{

imgLen = rs1.getString(1);

System.out.println(imgLen.length());

}

rs1 = st1.executeQuery(Query);

if(rs1.next())

{

int len = imgLen.length();

byte [] rb = new byte[len];

InputStream readImg = rs1.getBinaryStream(1);

int index=readImg.read(rb, 0, len);

System.out.println("index "+index);

st1.close();

response.reset();

response.setContentType("image/jpg");

response.getOutputStream().write(rb,0,len);

response.getOutputStream().flush();

}

}

catch (Exception e)

Page 118: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 9

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

{

e.printStackTrace();

}

finally

{

out.close();

}

JSP

Pada pembahasan kali ini saya akan membahas tentang Menampilkan Data Pada Database

MySQL Di JSP(Java Server Page). Sebelum itu anda harus mempunyai IDE Netbeans dan databasenya

tentunya MySQL dan Membuat Database serta tabel dan isi tabelnya.Jika saya mempunyai database school

& tabel.Jangan lupa untuk mengkoneksikan MySQL ke IDE Netbeans. Setelah itu buatlah project baru

dengan nama terserah anda inginkan. Klik New Project > Java Web > WebApplication

Lalu pada index.jsp sudah tersedia syntax mentahnya tinggal kita edit saja. Berikut ini adalah syntax

mentahnya :

Page 119: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 10

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

Sekarang tuliskanlah syntax seperti di bawah ini:

<%-Document : index Created on : Sep 11, 2012, 9:54:12 AM Author : Acchan

--%><%@ page import="java.sql.*" %>

<%@ page import="java.io.*" %><html><head>

<title>File</title> </head> <body> <% try {String Host = "jdbc:mysql://localhost:3306/school";Connection connection = null;Statement

statement = null;ResultSet rs = null;Class.forName("com.mysql.jdbc.Driver");connection = DriverManager.getConnection(Host, "root", "");statement = connection.createStatement();String Data = "select * from student";rs = statement.executeQuery(Data);

%> <TABLE border="1"> <trwidth="10"

bgcolor="#9979"><td>NIS</td><td>Nama</td><td>Alamat</td><td>Email</td><td>Pesan</t

d>

</tr><%while (rs.next()) {%><TR>

<TD><%=rs.getString("NIS")%></TD><TD><%=rs.getString("Nama")%></TD><TD><%=rs.

getString("Alamat")%></TD><TD><%=rs.getString("Email")%></TD><TD><%=rs.getString(

"Pesan")%></TD>

</TR><% } %></table><%rs.close();statement.close();connection.close();

} catch (Exception ex) { out.println("Can't connect to database."); } </body> </html> Syntax-syntax JSP di taruh diantara <%...%> Mungkin kelihatannya

syntax tersebut sangatlah banyak, tapi tenang saja saya akan menjelaskan syntax-syntax di atas. Pertama

<%-

Document : index //nama file Created on : Sep 11, 2012, 9:54:12 AM //Dibuat pada

Author : Acchan //nama author

--%> Sebuah komentar pada JSP diawali dengan <%--dan diakhiri dengan --%> Kedua <%@ page import="java.sql.*" %> <%@ page import="java.io.*" %> Ini adalah syntax yang digunakan untuk mengambil java IO dan SQL dan tanda * (bintang) pada java.sql.* atau java.io.* ini berarti mengambil semua syntax. Ketiga Try Syntax ini hampirsama dengan syntax percabangan, berikut ini adalah syntax mentahnya: Try{ }catch(Exception e){ } Keempat

Page 120: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 11

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

String Host = "jdbc:mysql://localhost:3306/school"; <%--URL yang digunakan untuk mengakses database pada MySQL--%> Connection connection = null; <%--ini adalah deklarasi variable connection yang bertipe Connection dan memiliki value null alias kosong--%> Statement statement = null; <%--deklarasi variable statement yang bertipe Statement dan memiliki nilai null alias kosong--%> ResultSet rs = null; <%--deklarasi variable rs yang bertipe ResultSet dan memiliki nilai null atau kosong--%> Class.forName("com.mysql.jdbc.Driver"); <%--ini adalah pengambilan mysql driver--%> connection = DriverManager.getConnection(Host, "root", ""); <%--pengambilan koneksi dari host, username, dan password yang ditampung oleh variable connection yang telah di deklarasikan di aktas --%> statement = connection.createStatement(); <%--Digunakan untuk pembuatan statement yang ditampung oleh variable statement--%> String Data = "select * from student"; <%--menampilkan semua data dari tabel student dan akan ditampung oleh variable Data --%> rs = statement.executeQuery(Data); <%--Digunakan untuk membuka Query yang akan di simpan pada variable rs --%> Terakhir

<TABLE border="1"> <tr width="10" bgcolor="blue"> <td>NIS</td> <td>Nama</td> <td>Alamat</td> <td>Email</td> <td>Pesan</td> </tr>

<%--Digunakan untuk membuat kolom NIS, Nama, Alamat, Email, Pesan--%> <% while (rs.next()) {

%>

<%--Digunakan untuk meresult atau menambahkan semua field yang ada pada database --%>

<TR><TD><%=rs.getString("NIS")%></TD>

<TD><%=rs.getString("Nama")%></TD><TD><%=rs.getString("Alamat")%></TD><TD><%

=rs.getString("Email")%></TD><TD><%=rs.getString("Pesan")%></TD>

</TR>

<%--Digunakan untuk membuat kolom dan baris sesuai banyaknya data yang ada pada database--%>

<% } %></table><%rs.close();statement.close();

connection.close();

<%--Digunakan untuk menutup semua koneksi--%>

} catch (Exception ex) { out.println("Can't connect to database."); }

<%--ini adalah pengecualian jadi jika semua statemen sebelum catch itu gagal maka statemen ini

akan ditampilkan--%>

Setelah semuanya selesai sekarang jalankan file index.jsp jika berhasil maka akan tampil

data yang

Page 121: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 12

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

Dan jika gagal maka akan tampil seperti ini: Sedikit-demi sedikit anda harus menjadi lebih baik dan

semoga menjadi lebih baik diantara yang paling baik. Sampai bertemu diartikel selanjutnya

Page 122: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

Latihan

1. Sebutkan parameter dalam pembuatan form JSP ?

2. Sebutkan tag-tag dalam pembuatan form ?

3. Buat sebuah program aplikasi form guestbook

Daftar Pustaka

7. Hans Bergsten, . 2002. JavaServer Pages™, 2nd Edition. O'Reilly

Page 123: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

MODUL PERKULIAHAN

Pemrogramam Web Enterprise

Cookie dan Session

Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh

Ilmu Komputer Sistem Informasi

11 87040 Tim Dosen

Abstract Kompetensi

• Mengenal Cookie

• Menciptakan Cookie

• Mengenal Session

1. Mahasiswa mengenal Cookie

2. Mahasiswa menciptakan Cookie

3. Mahasiswa mengakses Cookie

4. Mahasiswa mengatur usia Cookie

5. Mahasiswa menghapus Cookie

6. Mahasiswa mengenal Session

Page 124: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 15

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

Cookie dan Session

Mengenal Cookie

Cookie banyak digunakan oleh situs Web untuk menangani berbagai hal. Misalkan untuk

menyi pan nama pemakai, sehingga ketika pemakai mengunjungi situs web itu kembali,

pemakai bias segera diketahui.

Tabel 1 – Parameter cookie

Informasi Keterangan

Page 125: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 16

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

Path Digabungkan dengan domain, nilai path menentukan

direktori pada web server yang dapat menggunakan

cookie. Jika informasi path dan URL yang diminta tidak

cocok maka klient tidak akan mengirimkan cookie.

Nilai bawaaan path berupa ”/” yang berarti bahwa

coookie valid untuk semua direktori pada web server.

Page 126: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 17

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

Domain Menyatakan domain (alamat) server yang

mendefinisikan coookie. Klien tidak akan mengirimkan

coookie kalau tidak cocok dengan domain ini. Salah

satu pemanfaatannya adalah untuk berbagi coookie pada

beberapa server.

Expires Menyatakan batas waktu kadaluwarsa.Bawaannya,

cookie hanya berlaku sampai browser ditutup.

Secure Untuk menentukan pengiriman coookie hanya kalau

protokol HTTPS (HTTP yang aman) digunakan.

8.2 Menciptakan Coookie

Sebuah coookie dapat diciptakan dengan menggunakan kelas coookie (terdapat pada

paket javax.servlet.http). Bentuk konstruktor kelas ini :

Cookie(String nama_coookie, String nilai_coookie)

Nama_coookie berupa string yang menyatakan nama cookie dan nilai_coookie

menyatakan nilai yang akan disimpan pada nama cookie.

Nama cookie tidak boleh mengandung karakter-karakter berikut :

Spasi-putih [] () = , “ / ? @ : ;

Selanjutnya, objek cookie yang terbentuk perlu dikirimkan melalui objek implicit

response, dengan memangggil metode addCoookie(). Bentuk metode ini :

addCookie(Cookie objekCookie)

8.3 Mengakses Cookie

Page 127: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 18

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

Untuk membaca cookie yang terdapat pada klien, JSP menyediakan metode bernama

getCookies() yang dipanggil melalui variable bernama request. Metode ini memberikan

nilai balik berupa array berkelas Cookie. Anda bisa memperoleh semua cookie dengan

cara seperti berikut :

Cookie [] dafCookie = request.getCookies();

Pada contoh diatas, dafCookie adalah variable array yang berkelas Cookie. Selanjutnya

variable ini diisi dengan seluruh cookie yang dihasilkan oleh request.getCookies().

Untuk mendapatkan sebuah cookie dengan indeks I, anda bias menggunakan pernyataan

seperti berikut ini :

Cookie = dafcookie[i];

Variabel cookie perlu dideklarasikan terlebih dahulu :

Cookie cookie;

Dengan menggunakan metode getName() untuk memperoleh nama cookie dan

menggunakan metode getValue() untuk memperoleh isi cookie.

8.4 Mengatur usia Cookie

Untuk menentukan waktu kadaluwarsa atau usia cookie bias dilakukan dengan

menggunakan metode setMaxAge().

setMaxAge(int usia)

parameter usia dalam satuan detik menyatakan berapa lama cookie bersangkutan bertahan

sebelum masa kadaluwarsa.

Contoh mengatur waktu kadaluwarsa 1 jam dimulai sekarang dengan cara memberikan

perintah sebagai berikut :

VariabelCookie.setMaxAge(3600);

8.5 Menghapus Cookie

Cookie dapat dihapus dengan memanggil metode setMaxAge() dan dengan menyertakan

argument berupa angka nol.

8.6 Mengganti nilai cookie

Page 128: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 19

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

Untuk mengganti isi suati cookie, anda cukup membuat cookie dengan nama yang sama

tetapi dengan isi yang baru.

8.7 Session

Dalam sebuah aplikasi web, pengunjung berpindah dari satu halaman ke halaman yang

lain, sehingga penting untuk bisa tetap mengenali data pengunjung.JSP menyediakan

objek session yang dapat menyimpan data khusus dari pengunjung.

Fasilitas session merupakan fasilitas yang penting dalam pembuatan aplikasi web, dimana

pengunaan session yang umum adalah untuk menangani autentikasi atau sistem login.

Pengunjung yang telah login akan memiliki variabel yang tersimpan dalam session yang

dapat dikenali oleh program sehingga dapat mendeteksi apakah pengunjung telah login.

Contoh lain penggunaan session adalah pada shopping cart, dimana pengunjung yang ingin

membel dapat menyimpan informasi barang belanjaan yang akan di beli pada shopping cart

elektronik yang menggunakan fasilitas session. Semua barang belanjaan disimpan dengan

fasilitas session sehingga user dapat melihat sewaktu-waktu barang apa saja yang telah dibeli

setelah melihat katalog elektronik. Terdapat 3 metode utama yang dimiliki oleh objek session

yaitu:

public void setAttribute (String nama, Object value)

Throws IllegalStateException

public void getAttribute (String nama)

Throws IllegalStateException

public void removeAttribute (String nama, Object value)

Throws IllegalStateException

Sebagai contoh apabila kita ingin menyimpan data dalam session dapat dilakukan dengan

kode:

session.setAttribute(”namaku”,”Isak”);

Dan untuk mendapatkan data tersebut kembali dapat dilakukan dengan kode seperti berikut : String nm = (String) session.getAttribute(‖namaku‖);

Lalu apabila kita ingin menghapus data tersebut dapat dilakukan dengan kode berikut. session.removeAttribute(‖namaku‖);

8.8 Percobaan

1. Membuat cookie

Kode : buatcookie.jsp

<html>

<head>

<title>Cookie</title>

</head>

<body>

<%

Cookie cNama1 = new Cookie("nama1","Ahmad Izzudin" );

Page 129: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 20

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

Cookie cKampus1 = new Cookie("kampus1","Politeknik Elektronika Negeri Surabaya"

);

Cookie cNama2 = new Cookie("nama2","Siti Azizah" );

Cookie cKampus2 = new Cookie("kampus2","Institut Teknologi Sepuluh Nopember" );

Cookie cKota = new Cookie("kota","Surabaya" );

response.addCookie(cNama1);

response.addCookie(cKampus1);

response.addCookie(cNama2);

response.addCookie(cKampus2);

response.addCookie(cKota);

out.println("Lima buah Cookie telah dibuat");

%>

</body>

</html>

Listing Program 8.1

Hasil di browser :

Gambar 8.1

2. Membaca nilai cookie

Kode : bacacoookie.jsp

<html>

<head>

<title>Membaca Cookie</title>

</head>

<body>

<%

Cookie dafCookie[] = request.getCookies();

if (dafCookie != null) {

Cookie cookie;

out.println("<TABLE BORDER=\"1\">");

out.println("<TR><TH>Cookie</TH><TH>Isi </TH></TR>");

Page 130: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 21

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

for (int i=0; i < dafCookie.length; i++) {

cookie = dafCookie[i];

out.println("<TR><TD>" + cookie.getName() + "</TD><TD>" + cookie.getValue()

+ "</TD></TR>");

}

out.println("</TABLE>");

}

%>

</body>

</html>

Listing Program 8.2

Hasil di browser :

Gambar 8.2

3. Menentukan usia cookie

Kode : usiacookie.jsp

<html>

<head>

<title>Usia Cookie</title>

</head>

<body>

<%

Cookie cNama = new Cookie("nama","Ahmad Izzudin");

cNama.setMaxAge(3600);

Page 131: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 22

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

response.addCookie(cNama);

out.println("Coookie dengan usia 1 jam telah dibentuk");

%>

</body>

</html>

Listing Program 8.3

Hasil di browser :

Listing Program 8.3

4. Menghapus cookie.

Kode : hapuscookie.jsp

<%

Cookie cookie = new Cookie("nama1","");

cookie.setMaxAge(0);

response.addCookie(cookie);

%>

<html>

<head>

<title>Menghapus Cookie</title>

</head>

<body>

Cookie nama1 telah dihapus <BR>

melihat semua isi cookie <BR>

klik <A HREF="bacacookie.jsp">Disini</A>

</body>

</html>

Listing Program 8.4

Page 132: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 23

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

Hasil di browser :

Gambar 8.4

5. Merubah nilai cookie

Kode : ubahcookie.jsp

<%

Cookie cNama1 = new Cookie("namabaru", "Salman al farisi");

response.addCookie(cNama1);

out.println("Coookir namabaru telah diubah");

%>

<html>

<head>

<title>Ubah Coookie</title>

</head>

<body>

</body>

</html>

Listing Program 8.5

Page 133: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 24

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

Hasil di browser :

Gambar 8.5

Perubahan di bacacookie.jsp :

Gambar 8.6

6. Membuat session

Kode : savenameform.jsp

<%@ page language="java" %>

<html>

<head>

<title>Name Input Form</title>

</head>

<body>

<form method="post" action="savenametosession.jsp">

<p><b>Enter Your Name: </b><input type="text" name="username"><br>

<input type="submit" value="Submit">

Page 134: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 25

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

</form>

</body>

</html>

Listing Program 8.6

Ketika tombol submit diklik, file savenametosession,jsp dipanggil.

Savenametosession.jsp mengambil nilai nama user dan menyimpannya sebagai user

session dengan fungsi session.attribute(“username”,”username”);.

Kode : savenametosession.jsp

<%@ page language="java" %>

<%

String username=request.getParameter("username");

if(username==null) username="";

session.setAttribute("username",username);

%>

<html>

<head>

<title>Name Saved</title>

</head>

<body>

<p><a href="showsessionvalue.jsp">Next Page to view the session value</a><p>

</body>

</html>

Listing Program 8.7

Kode : showsessionvalue.jsp

<%@ page language="java" %>

<%

String username=(String) session.getAttribute("username");

if(username==null) username="";

%>

<html>

<head>

<title>Show Saved Name</title>

</head>

<body>

<p>Welcome: <%=username%><p>

</body>

</html>

Page 135: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 26

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

Listing Program 8.8

Contoh Soal :

Buatlah aplikasi seperti di bawah ini. Masukkan nama user dan password, jika nama user

sama dengan nama uservalid maka akan masuk ke form seperti gambar 8.9 (nama file

login.jsp). untuk mengecek session dari user klik link pada gambar 8.9 maka akan muncul

form seperti gambar 8.10. Jika telah logout maka session untuk user tidak ada lagi (lihat

gambar 8.11)

Gambar 8.7

Page 136: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 27

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

Gambar 8.8

Gambar 8.9

Page 137: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 28

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

Gambar 8.10

Gambar 8.11

Loginform.html

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

</head>

<body>

<form name="form1" method="post" action="login.jsp">

<table width="200" border="0">

<tr>

<td colspan="2"><p>LOGIN</p> </td>

</tr>

<tr>

<td width="82">User</td>

<td width="102"><input type="text" name="user"></td>

</tr>

<tr>

<td>Password</td>

<td><input type="password" name="pass"></td>

</tr>

<tr>

<td><input type="submit" name="Submit" value="Submit"></td>

<td>&nbsp;</td>

</tr>

</table>

Page 138: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 29

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

</form>

</body>

</html>

Login.jsp

<%

String uservalid = "yuliana" ;

String passvalid = "yuliana" ;

String user = request.getParameter("user");

if (user == null) user="";

String password = request.getParameter("pass");

if (password == null) password="";

if (user.equals(uservalid) && password.equals(passvalid)){

session.setAttribute("nama" ,"Yuliana");

session.setAttribute("profesi","Dosen");

%>

<jsp:forward page="loginsukses.jsp" />

<%

}

else

{

%>

<jsp:forward page="errorlogin.jsp" />

<%

}

%>

Loginsukses.jsp

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>LOGIN SUKSES</title>

</head>

<body>

<p> ANDA TELAH MELAKUKAN LOGIN, dan informasi Anda berikut ini tersimpan di

objek session</p>

<table width="200" border="1">

<tr>

<td width="77">Nama</td>

<td width="107"><%=session.getAttribute("nama")%></td>

</tr>

<tr>

<td>Profesi</td>

<td><%=session.getAttribute("profesi")%></td>

</tr>

</table>

<p><a href="logout.jsp">LOGOUT </a></p>

<p> APABILA ANDA TELAH LOGIN ANDA DAPAT MENGKLIK <a href="ceksession.jsp" > link

</a> INI UNTUK MELAKUKAN CEK SESSION. </p>

<p>

APABILA ANDA TELAH LOGOUT ANDA TIDAK DAPAT MELAKUKAN CEKSESSION

</p>

</body>

Page 139: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 30

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

</html>

Ceksession.jsp

<%

session = request.getSession(false);

String nm = (String) session.getAttribute("nama");

if (nm!= null){

out.println(nm);

} else{

%>

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

<p> <a href="logout.jsp"> LOGOUT </a></p>

</body>

</html>

<jsp:forward page="errorlogin.jsp" />

<%

}

%>

Errorlogin.jsp

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

</head>

<body>

ANDA MELIHAT HALAMAN ERROR INI KARENA ANDA TELAH MELAKUKAN LOGOUT

<a href="loginfront.html"> Klik disini untuk Login </a>

</body>

</html>

Logout.jsp

<%

session.invalidate() ;

%>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

</head>

<body>

<p>

INFORMASI ANDA PADA SESSION TELAH TIDAK ADA

Page 140: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 31

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

Sehingga ANda tidak dapat mengakses kembali <a href="ceksession.jsp"> link

ceksession.jsp </a>

</p>

</body>

</html>

Page 141: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

Latihan

1. Apa yang dimaksud dengan Cookie ?

2. Bagaimana cara menciptakan Cookie ?

3. Bagaimana cara mengakses Cookie ?

4. Bagaimana cara mengatur usia Cookie ?

5. Bagaimana cara mengahapus Cookie ?

6. Bagaimana cara mengenal Session?

7. Buatlah form yang dapat mengenali masukan data dengan Cookie Form ?

Daftar Pustaka

8. Hans Bergsten, . 2002. JavaServer Pages™, 2nd Edition. O'Reilly

Page 142: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

MODUL PERKULIAHAN

Pemrogramam Web Enterprise

JSP dan Applet

Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh

Ilmu Komputer Sistem Informasi

12 87040 Tim Dosen

Abstract Kompetensi

• Mengenal Applet dan JSP

1. Mahasiswa mengenal Applet

2. Mahasiswa mampu

memasukan applet dalam JSP

Applet dan JSP

Page 143: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 2

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

JSP dan Applet

Kekurangan JSP dan servlet adalah tidak memiliki kemampuan untuk

menampilkankomponen-komponen AWT dan Swing. Kelemahan ini dapat diatasi dengan

memakai applet atau Japplet dari Swing. Untuk memakai applet pada JSP, kita dapat

memakai tag HTML : <APPLET CODE=”MyApplet.class” WIDTH=400

HEIGHT=300></APPLET>

Cara lain adalah memakai elemen action <jsp:plugin>. Elemen ini dapat dipakai dengan cara

yang identik dengan tag <APPLET>. Hanya saja penulisan atribut harus dalam huruf kecil. <jsp:plugin type=”applet” code=”MyApplet.class”

width=”400”height=”300”>

</jsp:plugin>

Action <jsp:param> Untuk applet kita dapat menetapkan satu atau lebih parameter. Misalnya,

tag <APPLET> berikut ini memiliki beberapa parameter :

<APPLET CODE=”MyApplet.class” WIDTH=400 HEIGHT=300><PARAM NAME=”param1”

VALUE=”value1”><PARAM NAME=”param2” VALUE=”value2”>

</APPLET>

Atau dalam bentuk lain:

<APPLET CODE=”MyApplet.class” WIDTH=400 HEIGHT=300>

<jsp:params>

<jsp:param NAME=”param1” VALUE=”value1” />

<jsp:param NAME=”param2” VALUE=”value2” />

</jsp:params></A

PPLET>

Action <jsp:fallback>

Dalam definisi applet kita dapat menetapkan teks alternatif jika

browser gagal menjalankan applet.

<APPLET CODE=”MyApplet.class” WIDTH=400

HEIGHT=300>Error:Applet ini memerlukan Java supaya

dapat dijalankan</APPLET>

Dalam file JSP, teks alternatif dapat dituliskan di dalam action <jsp:plugin> dengan

memakai action <jsp:fallback> sehingga contoh diatas dapat dituliskan sebagai berikut

dalam format XML:

<jsp:plugin type=”applet”

code=”MyApplet.class” width=”400”

height=”300”> <jsp:fallback>

Error:Applet ini memerlukan Java supaya

dapat di jalankan </jsp:fallback>

</jsp:plugin>

Contoh 1 : Project TestApplet

Page 144: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 3

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

Buatlah project TestApplet, buatlah file applet sederhana masukkan dalam folder source

packages berilah nama dengan Applet1.java (dengan default package). Struktur file pada

project TestApplet adalah sebagai berikut:

Isi file Applet1.java

import java.applet.Applet ;import java.awt.*;

public class Applet1 extends Applet {/** Creates

a new instance of Applet1 */public Applet1()

{

this.setBackground(Color.BLACK) ;

}

public void paint(Graphics g){

g.setColor(Color.RED) ;

g.fillOval(50,50,50,50);

}}

Selanjutnya lakukan compile pada Applet1.java, selanjutnya clik Files, lihat struktur file di

bawah ini. Selanjutnya lakukan copy file Applet1.class masukkan pada Web Pages pada

Project TestApplet.

Page 145: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 4

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

Isi dari file index.jsp

<html> <head>

<meta http-

equiv="Content

-Type"

content="text/

html;

charset=UTF-

8"><title>JSP

Page</title></

head><body><js

p:plugin

type="applet"c

ode="Applet1.c

lass"width="37

0"

height="420">

</jsp:plug

in></body></ht

ml>

Selanjutnya lakukan compile dan build pada index.jsp. Hasilnya akan tampak sebagai

berikut:

Page 146: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 5

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

Bagaimana jika file applet berada pada package tertentu ?

Buatlah file Applet1.java dalam package com.testapplet. Cara membuatnya, pada source

packages klik kanan, pilih java class. Selanjutnya akan muncul form seperti berikut:

Page 147: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 6

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

Applet1.java

package com.testapplet;import java.applet.Applet ;import

java.awt.*;

public class Applet1 extends Applet {

public Applet1() {this.setBackground(Color.BLACK);}

public void paint(Graphics g){g.setColor(Color.RED)

;g.fillOval(50,50,50,50);

}

} Lakukan compile pada file Applet1. java pada package com.testapplet, selanjutnya copikan

Applet1.classnya pada WebPages. Ingat yang dikopikan sekaligus dengan folder com. Ubah

isi dari file index.jsp :

Page 148: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 7

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

<html> <head> <meta

http-equiv="Content-

Type"

content="text/html;c

harset=UTF-8">

<title>JSP Page</title>

</head>

<body>

<jsp:plugin type="applet"

code="com.testapplet.Applet1.class"

width="370" height="420">

</jsp:plugin>

</body></html>

Contoh 2:

Bagaimana jika kita ingin menampilkan JApplet Form? Buatlah dua project yaitu : Project untuk membuat form JApplet (CobaApplet) Project untuk Web Application (TestApplet). Bagian 1: Buatlah form JApplet (beri nama dengan FormApplet.java) pada project

CobaApplet, lakukan klik kanan pada project CobaApplet, jalankan Run Project maka hasil

akan tampak sebagai berikut:

Page 149: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 8

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

Selanjutnya lakukan build Project untuk file CobaApplet.jar yang berada pada folder dist.

Bagian 2 : Klik kanan project TestApplet, pilih categories : Build Packaging masukkan file

jar (tekan button add file/folder), selanjutnya klik ok

Ubah index.jsp <html> <head> <meta http-

equiv="Content-Type"

content="text/html;charset=UTF-

8">

<title>JSP Page</title>

</head>

<body>

Page 150: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 9

Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

<jsp:plugin type="applet"code="FormApplet.class"

archive="CobaApplet.jar"width="500" height="150">

</jsp:plugin>

</body>

</html>

Hasil sebagai berikut:

Page 151: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

Latihan

1. Buatlah applet menghitung luas dan keliling !!

2. Publish applet dalam JSP..!!!

Daftar Pustaka

9. Hans Bergsten, . 2002. JavaServer Pages™, 2nd Edition. O'Reilly

10. Sri Hartati Wijono, Pemrograman Java Servlet dan JSP dengan Netbeans, Penerbit

Andi. Agus Setyabudi dan Albert Samuel,

11. Aplikasi E-Commerce dengan Java Servlet dan JSP, Penerbit Elex Media

Komputindo

Page 152: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

MODUL PERKULIAHAN

Pemrogramam Web Enterprise

Buku Tamu dengan Java Bean

Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh

Ilmu Komputer Sistem Informasi

13 87040 Tim Dosen

Abstract Kompetensi

• Implementasi Java Bean

3. Mahasiswa mampu mengenal

Buku Tamu dengan Java Bean

JavaBeans adalah arsitektur standart untuk membuat komponen reusable dalam Java. Kita

Page 153: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 12

Mobile E-Commerce Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

dapat membuat sebuah komponen (applet atau Java class) baik visual maupun non visual,

mengubahnya dalam bentuk javabeans sehingga komponen tersebut dapat dipakai lagi

kapanpun diinginkan. Jendela Pallete di IDE Netbeans sangat berguna untuk menambahkan

elemen JSP, HTML, form atau database.

Contoh 1 :

Buatlah project baru dengan nama InfoBean Dalam jendela project klik kanan Source Packages dan kemudian jalankan menu New File Classes. Isilah seperti gambar di bawah ini.

Page 154: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 13

Mobile E-Commerce Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

File UserData.java

package com.infobean;

public class UserData {

// disebut sebagai properti

//untuk masing2 properti disediakan method get sebagai getter dan

set sebagai setter.

private String namaUser;

private String idUser;

private int umur ;

public UserData(){

}

public String getNamaUser(){

return namaUser;}

public void setNamaUser(String namaUser){

this.namaUser = namaUser;}

public String getIdUser(){

return idUser;}

public void setIdUser(String idUser){

this.idUser = idUser;}

public int getUmur(){

return umur;}

public void setUmur(int umur){

this.umur = umur;

}}

Buatlah File Include/Segmen

Buatlah file include/segmen di folder WEB-INF/jspf dengan nama header.jspf

<%@ page import ="java.util.*, java.text.*" %>

<% DateFormat df = DateFormat.getDateInstance(DateFormat.FULL) ;String sd =

df.format(new Date()) ;

%>

<h4>Today: <%=sd%></h4><hr>

File index.jsp

<%@ include file="/WEB-INF/jspf/header.jspf" %>

<html>

<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-

8"><title>JSP Page</title>

</head>

<body>

<form name="login"

action="sales.jsp"

method="post">

<table width="200"

border="1">

<tr>

<td width="56">Nama </td>

<td width="128"><input type="text" name="namaUser"></td>

</tr>

<tr>

<td>ID</td>

<td><input type="text" name="idUser"></td>

Page 155: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 14

Mobile E-Commerce Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

</tr>

<tr>

<td>Umur</td>

<td><input type="text" name="umur"></td>

</tr>

<tr> <td colspan="2"><input type="submit" name="Submit" value="Submit"></td></tr>

</table>

</form></body>

</html>

File sales.jsp

<%@ include file="/WEB-INF/jspf/header.jspf" %>

<jsp:useBean id="userData" scope="session" class="com.infobean.UserData"

/><jsp:setProperty name="userData" property="*" />

25 <html> <head>

<title>JSP Page</title>

</head>

<body>

<h2> Selamat Datang , <%=userData.getNamaUser()%> </h2>

ID ANDA = <jsp:getProperty name="userData" property="idUser" /> <br>

USIA ANDA = <jsp:getProperty name="userData" property="umur" /> <br>

<p> </p>

<a href="index.jsp" > LOGIN </a>

</body></html>

Page 156: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 15

Mobile E-Commerce Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

Contoh 2 :

Buatlah project baru dengan nama InfoBean2 Dalam jendela project klik kanan Source Packages dan kemudian jalankan menu New File Classes. Buatlah class RandomNumber dalam package com.infobean. RandomNumber.java package com.infobean;import java.util.Random;

public class RandomNumber {

private int rndNumber2 ;public RandomNumber(){rndNumber2 =

(int)(Math.random() * 100) ;}

public int getRandomNumber(){return (int)(Math.random()*100) ;}

public int getRndNumber2(){

return rndNumber2 ;

}

}

Buatlah file-file jsp dalam folder Web Pages. File header.jspf sama dengan contoh 1.

Page 157: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 16

Mobile E-Commerce Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

Random.jsp

<%@ include file="/WEB-INF/jspf/header.jspf" %>

<jsp:useBean id = "random" scope="request" class="com.infobean.RandomNumber" />

<html>

<head>

<title>JSP Page</title></head>

<body>

Angka Acak ini menunjukkan

tingkah laku Java Bean dengan scope

=request;<h3> <jsp:getProperty

name="random" property="rndNumber2"

/></h3>

Angka Acak berikut ini

menunjukkan method JavaBean

tanpa memakai property<h3>

<%=random.getRandomNumber()

%></h3>

Pilihan berikut ini akan membawa ke error page, jika Anda salah menebak.

<form action="index.jsp" method="POST">

<select name="language" size="4">

<option value="java">JAVA</option>

<option value="C" >C</option>

<option value="Pascal" >PASCAL</option>

<option value="Basic">BASIC</option>

</select>

<input type="submit" value="submit" />

</form>

</body></h

tml>

index.jsp

<%@ page errorPage="error.jsp" %><html>

<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-

8"><title>JSP Page</title>

</head>

<body>

<%

String lang = request.getParameter("language");

if (lang.equalsIgnoreCase("java")){

%>

<h3> Pilihan Anda Benar ! (<%=lang%>) </h3>

<% }

else

{ //Pilihan salah, lemparkan exceptionthrow new Exception("Pilihan Anda

Salah !");

}%>

</body></html>

error.jsp

<%@ page isErrorPage="true" %><html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>JSP Page</title></head>

<body>

<h1> Exception : </h1>

<h3> <%=exception.getMessage() %>

</body></html>

Page 158: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 17

Mobile E-Commerce Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

Output program:

Pertama kali akan muncul gambar 1, jika kita pilih java maka akan muncul ”Pilihan Anda

Benar”(gambar 2) jika selain java akan melempar Exception (gambar 3).

Gambar 1

Gambar 2

Gambar 3

MODUL PRAKTIKUM:

Page 159: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 18

Mobile E-Commerce Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

Buatlah aplikasi web permainan tebak angka. Komponen Java Bean akan merahasiakan

sebuah angka acak (1-100) dan user diminta untuk menebak angka tersebut. Jika tebakan

lebih kecil, maka akan diberikan pesan agar user memasukkan angka yang lebih besar.

Sebaliknya, jika tebakan lebih besar, user akan mendapatkan pesan agar memasukkan angka

yang lebih kecil. Jumlah tebakan yang dilakukan user dihitung sampai mendapatkan tebakan

yang benar. Gunakan javabean dengan menggunakan scope session. Java Bean dengan

jangkauan session memungkinkan aplikasi web untuk menyimpan data (atribut) yang dapat

diakses antar halaman web.

Praktikum 1 :

Pertama kali aplikasi web seperti gambar 1. User diminta untuk memasukkan angka

selanjutnya klik button tebak. Maka akan muncul peringatan lebih besar/ lebih kecil dari

angka yang sebenarnya (gambar 2 dan gambar 3). Jika tebakan benar, maka hasil akhir

ditunjukkan pada gambar 5.

Gambar 1 Gambar 2

Page 160: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 19

Mobile E-Commerce Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

Gambar 3 Gambar 4

Gambar 5

Komponen JavaBean

public class NumberGuessBean {private String guess ;private int

numGuesses ;

Page 161: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 20

Mobile E-Commerce Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

private String hint ;

private boolean match ;

private int answer ;

public NumberGuessBean(){

reset();

}

public void reset(){answer = (int) (Math.random() * 100) + 1; match = false ;

numGuesses = 0 ;

}

public String getGuess(){

return this.guess ;

}

public void setGuess(String guess){

if (guess !=null) numGuesses++;

int gs ;

try{

gs = Integer.parseInt(guess) ;

}

catch(NumberFormatException e){

gs=-1 ;

}

if (gs==-1)hint = "Error : Isikan

hanya angka digit" ;else if

(gs < answer)hint = "Lebih

besar .... Tebakan terlalu

kecil" ;else if (gs > answer)

hint = "Lebih kecil .... Tebakan terlalu besar" ;else if (gs ==

answer){

hint = "Selamat ! Tebakan

Anda Benar...." ;

match = true;

}

this.guess =

String.valueOf(gs) ;

}

public int getNumGuesses(){

return this.numGuesses ;

}

public String getHint(){

return this.hint ;

}

public boolean isMatch(){

return this.match ;

}

}

Page 162: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 21

Mobile E-Commerce Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

Terdapat 4 property

Guess: untuk menyimpan angka tebakan dari user. Tipe dipilih string, karena user dapat saja mengetikkan karakter non-digit. Hint : dipakai untuk menyimpan petunjuk yang akan ditampilkan ke user. Jika angka tebakan dari user lebih kecil dari jawaban maka akan ditampilkan hint=”Lebih besar...”. Mode di set readonly sebab nilainya tidak boleh di set dari luar. numGuess : dipakai untuk menyimpan jumlah tebakan yang telah dilakukan oleh user. Mode adalah readonly sebab jumlah tebakan akan dihitung otomatis dan tidak boleh diubah dari luar. Match : dipakai untuk menunjukkan apakah user telah menebak dengan benar atau tidak. Mode readonly karena nilainya diset benar oleh internal bean hanya setelah user menebak dengan benar. Dalam class JavaBean ditambahkan field ”answer” untuk menyimpan angka acak yang akan

ditebak kemudian ditambahkan method reset() untuk menentukan angka acak dan melakukan

inisialisasi. Angka acak diset antara 1-100. Dibawah ini adalah kerangka dari file index.jsp.

Selamat mencoba.

index.jsp

//lakukan import class NumberGuessBean yang terletak pada packagecom.jsp

<html> <head> <meta http-

equiv="Content-Type"

content="text/html;chars

et=UTF-8">

<title>JSP Page</title></head>

<body>

<%-- buatlah sebuah objek numGuess dengan scope session

denganmenggunakan javabean --%>

<%-- lakukan pengesetan untuk semua property dengan melakukan

property="*" --%>

<h1><u> Number Guess Game </u></h1>

<h3>

<%-- Jika mencoba pertama kali maka --%>

Silakan tebak sebuah bilangan antara 1 s/d 100.

<%--Buatlah sebuah form dengan method=‖GET‖ dan

action=‖index.jsp‖. Beri nama textfield dengan guess dan button submit.--%>

<%-- Jika tidak (bukan pertama kali) maka lakukan --%>

<%-- Jika tebakan sama dengan angka acak yang dibangkitkan maka

Tampilkan tebakan dari user

Tampilkan petunjuk untuk user (method getHint())

Tampilkan informasi user mencoba berapa kali.

Lakukan method reset(untuk melakukan inisialisasi

danmelakukan pembangkitan acak lagi)

--%>

<p> Silakan <a href="index.jsp"> COBA LAGI </a> </p>

<%--Jika tebakan tidak sama maka

Tampilkan tebakan dari user

Page 163: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 22

Mobile E-Commerce Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

Tampilkan petunjuk untuk user (method getHint())

Tampilkan informasi user mencoba berapa kali. --%><br>

Silakan tebak lagi bilangan 1 s/d 100

<%--Buatlah sebuah form dengan method=‖GET‖ dan

action=‖index.jsp‖. Beri nama textfield dengan guess. Dan buatlahbutton

submit--%>

</h3></body><

/html>

Praktikum 2: GuestBook

Buatlah aplikasi web GuestBook, dimana user memasukkan data nama, alamat, perusahaan

dan email. Data ini selanjutnya akan tersimpan pada database access (GuestBook). Terdapat

sebuah table GuestBook dengan field name, address, company dan email, semuanya bertipe

String. Aplikasi ini menggunakan JavaBean untuk melakukan koneksi ke database,

menyisipkan data dan untuk menampilkan data(GuestBookBean.java).

Terdapat 3 file yaitu index.jsp, GuestBook.jsp dan GuestBookView.jsp.

Nama File Keterangan

Index.jsp Halaman utama dari aplikasi. Pada halaman ini user dapat mengisi GuestBook dengan memasukkan nama, alamat, perusahaan bekerja dan email.

GuestBook.jsp Halaman yang memproses data user untuk diinsertkan ke database.

GuestBookView.jsp Halaman untuk menampilkan semua user yang tersimpan pada tabel GuestBook.

Aplikasi :

Pertama kali user memasukkan nama, alamat, perusahaan dan email (gambar1). Selanjutnya

klik button submit, jika berhasil akan muncul pesan ”Thank you Candra for

registering”(gambar 2). Selanjutnya pilih View Guest Book, maka akan menampilkan data

semua user (gambar 3).

Gambar 1

Page 164: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 23

Mobile E-Commerce Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

Gambar 2 Gambar 3

class GuestBookBean

package guestBook;

import java.sql.Connection;import java.sql.DriverManager;import

java.sql.ResultSet;import java.sql.Statement;import java.util.Vector;

public class GuestBookBean {

private Statement stmt=null ;

private Connection conn = null ;

private String sURL = "jdbc:odbc:GuestBook" ;

private ResultSet rs=null ;

Page 165: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 24

Mobile E-Commerce Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

public boolean insertIntoDB (String name, String address, String company,

String email){

sData = "name = + rs.getString(1) + "<br>address = +

String sql = "INSERT INTO

VALUES('"+name+"','"+address+"','"+company+"','"+email+"') "

;try{Class.forName("sun.jdbc.odbc.JdbcOdbcDriver") ;conn =

DriverManager.getConnection(sURL,"","")

;stmt=conn.createStatement()

;stmt.execute(sql);stmt.close();return true;}catch(Exception

e){e.printStackTrace();return false;}}

GuestBook

public Vector viewGuestBook(){Vector vGuest = new

Vector();String sData;String sql = "SELECT * FROM GuestBook"

;try{Class.forName("sun.jdbc.odbc.JdbcOdbcDriver") ;conn =

DriverManager.getConnection(sURL,"","")

;stmt=conn.createStatement() ;rs = stmt.executeQuery(sql) ;

while(rs.next()){ " "

rs.getString(2) + "<br>company = " + rs.getString(3) + "<br>email = " +

rs.getString(4);vGuest.add(sData);sData=""; }rs.close();stmt.close();

}catch(Exception e){

e.printStackTrace();}return vGuest;

}}

index.jsp

Page 166: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 25

Mobile E-Commerce Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

<html> <head> <meta http-

equiv="Content-Type"

content="text/html;chars

et=UTF-8">

<title>GuestBook</title></head>

<body>

<h1>Guest Book</h1>

<%-- Buatlah sebuah form yang menerima masukkan user nama,alamat,

perusahaan dan email. Beri nama textfield dengan nama name,address, company

dan email. Isi form ini dengan action="GuestBook.jsp"method="post". --%>

<h2><a href="GuestBookView.jsp" >

View Guest Book </a></h2></body></html>

GuestBook.jsp

<%-- definisikan sebuah objek JavaBean dengan name = guestbook dariclass

guestBook.GuestBookBean dengan scope=page --%>

<%

String message = "";

String name = request.getParameter("name") ;

String address = request.getParameter("address") ;

String company = request.getParameter("company") ;

String email = request.getParameter("email") ;

//jika name, address, company dan email tidak (―‖) maka

//lakukan insert data ke database

//jika berhasil message = "Thank you " + name + " for Registering " ;

//jika tidak set message = "Error" ;%>

<html> <head> <meta http-

equiv="Content-Type"

content="text/html;chars

et=UTF-8">

<title>GuestBook</title></head>

<body>

<h2><%=message%>

<br>

<a href="index.jsp"> GUEST BOOK </a>

<br>

<a href="GuestBookView.jsp"> VIEW GUEST BOOK </a>

</h2>

</body></h

tml>

GuestBookView.jsp

<%-- lakukan import class Vector.

definisikan sebuah objek JavaBean dengan name = guestbook dari class

guestBook.GuestBookBean dengan scope=page --%>

<%Dapatkan data semua user (simpan pada Vector vGuest) dengan

memanggilfungsi viewGuestBook(); %>

<html> <head> <meta http-

equiv="Content-Type"

content="text/html;chars

et=UTF-8">

<title>GuestBook</title></head>

<body><h1>Guest List </h1>

Page 167: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 26

Mobile E-Commerce Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

<h3>

<%

//lakukan iterasi pada vGuest dan tampilkan hasilnya

%>

</h3>

</body></h

tml>

Praktikum 3: Pengembangan dari GuestBook

Kembangkan dari praktikum 2, tambahkan proses edit dan delete. Aplikasi utama

ditunjukkan pada gambar 1. Klik View Guest Book, hasil seperti gambar 2. Terdapat 3 user

yang telah terdaftar yaitu Yuliana, Budi dan Intan. Masing-masing user terdapat fasilitas

untuk mengedit dan menghapus. Klik edit pada user Intan dengan alamat Kalijudan, lakukan

pengeditan data pada alamat ubah menjadi Kalijudan 57, selanjutnya lakukan submit (gambar

4). Pada gambar 4 klik View Guest Book maka hasil seperti gambar 5.

Pada user Intan lakukan delete, maka hasil tampak seperti gambar 6, selanjutnya klik View

Guest Book maka hasil seperti gambar 7.

Terdapat file-file pendukung yaitu:

Nama File Keterangan

Index.jsp Halaman utama dari aplikasi. Pada halaman ini user dapat mengisi GuestBook dengan memasukkan nama, alamat, perusahaan bekerja dan email.

GuestBook.jsp Halaman yang memproses data user untuk diinsertkan ke database.

GuestBookView.jsp Halaman untuk menampilkan semua user yang tersimpan pada tabel GuestBook.

GuestBookEdit.jsp Halaman ini menampilkan data user yang akan diedit.

Prosesedit.jsp Halaman yang memproses data user untuk diupdate di database

Delete.jsp Halaman yang memproses data user untuk dihapus di database

File index.jsp

Page 168: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 27

Mobile E-Commerce Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

File GuestBookView.jsp

Gambar 2

File GuestBookEdit.jsp

Page 169: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 28

Mobile E-Commerce Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

File prosesedit.jsp

Gambar 4

File GuestBookView.jsp

Page 170: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 29

Mobile E-Commerce Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

Gambar 5 File delete.jsp

File GuestBookView.jsp

Gambar 7

GuestBookView.jsp

<%----%>

<%-- import class Vector --%>

<%-- buatlah sebuah object javabean dari class GuestBookBean pada package

guestBook dengan scope page --%>

<%-- panggil method viewGuestBook simpan hasilnya dalam Vector dengan nama

vGuest --%>

<html>

<body>

<h1>Guest List </h1>

<h3>

<%-- Memasukkan user tamu dalam tabel--%>

<table>

Page 171: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 30

Mobile E-Commerce Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

<%-- Baris header table yaitu name, address, company, email, edit dandelete

--%>

<tr> <td> Name</td>

<td> Address</td>

<td> Company</td>

<td> Email</td>

<td> Edit</td>

<td> Delete</td>

</tr>

<%

for(i

nt

i=0;i

<vGue

st.si

ze();

i++){

/*ambil data pada Vector pada indek ke-1(data berupa vector (nama

temp)).

Ambil nama user (simpan dalam variabel nm dengan tipe String), address

(simpan dalam variabel adr dengan tipe String), company( simpan dalamvariabel comp

dengan tipe String) dan email(simpan dalam variabel email dengantipe String). */

%>

<tr> <td> <%=nm%></td>

<td> <%=adr%></td>

<td><%=comp%></td>

<td> <%=email%></td>

<td><a

href="GuestBookEdit.jsp?name=<%=nm%>&address=<%=adr%>

&company=<%=comp%>&email=<%=email%>">Edit</a></td><td

> <a href="delete.jsp?email=<%=email%>">Delete</a>

</td></tr>

<% }%>

</table

></h3><

/body><

/html>

Latihan

1. Buatlah implementasi javabean dengan kasus yang lain..!!! (Kelompok)

Daftar Pustaka

12. Hans Bergsten, . 2002. JavaServer Pages™, 2nd Edition. O'Reilly

13. Sri Hartati Wijono, Pemrograman Java Servlet dan JSP dengan Netbeans, Penerbit

Andi. Agus Setyabudi dan Albert Samuel,

14. Aplikasi E-Commerce dengan Java Servlet dan JSP, Penerbit Elex Media

Komputindo

Page 172: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

MODUL PERKULIAHAN

Pemrogramam Web Enterprise

E-Commerce dengan JSP

Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh

Ilmu Komputer Sistem Informasi

14 87040 Tim Dosen

Abstract Kompetensi

• Membuat E-Commerce

4. Mahasiswa mampu membuat

aplikasi dengan JSP

E-Commerce dengan JSP

Pada toko buku ini, pelanggan bisa melihat-lihat buku yang ada pada katalog, kemudian melakukan

pencarian buku berdasarkan keyword yang dapat dimasukkan melalui search box yang ada pada setiap

Page 173: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 2

Mobile E-Commerce Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

halaman katalog. Pada halaman depan pemilik toko buku bisa menampilkan buku-buku yang ingin

dipromosikan secara khusus. Setelah menemukan buku yang tepat, pelanggan dapat memasukkan

buku yang diinginkan ke keranjang belanjanya(shopping cart). Pelanggan bisa kembali melihat-lihat

katalog dan menambahkan buku lain ke keranjang belanjanya. Pelanggan juga dapat melakukan

update terhadap jumlah buku yang ingin dibeli dan bisa membatalkan pembelian dengan cara

mengeluarkan buku yang ada dari keranjang belanjanya.

Database

Terdapat 3 tabel yang digunakan :

Nama Tabel Keterangan

Books Tabel berisi data-data buku yang ada

Categories Tabel untuk menyimpan tipe kategoru dari buku-buku yang ada

Promotion Tabel yang menyimpan data buku yang ingin ditampilkan pada halaman depan/dipromosikan.

Penjelasan masing-masing tabel. Tabel Books

Nama field Tipe data

product_id text

title text

author text

description text

price int

category_id text

image text

Tabel Categories

Nama field Tipe data

category_id text

category_name text

category_description text

Tabel Promotion

Nama field Tipe data

promotion_id text

product_id text

Arsitektur Toko Buku Sederhana Bagian ini menjelaskan tentang arsitektur sistem yang akan digunakan.

Page 174: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 3

Mobile E-Commerce Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

Suatu web-store biasanya terdiri atas beberapa tier atau lebih sering disebut dengan n-tier

application. Suatu aplikasi n-tier biasanya terdiri atas beberapa layer/lapisan. Layer pertama

berisi logika presentasi yaitu suatu layer yang berisi logika untuk menampilkan data yang

diinginkan oleh client. Layer kedua berisi logika bisnis yang melakukan proses penerapan

dari aturan-aturan bisnis yang ada dan layer ketiga berupa database. Pada suatu aplikasi web

yang membutuhkan skalabilitas yang lebih tinggi, maka logika bisnis yang ada dapat

dipisahkan lagi pada tier lain dan logika bisnis dibuat sebagai komponen Entriprise Java

Bean.

Logika presentasi.

Pemisahan antara logika presentasi dan logika bisnis akan dilakukan dengan memisahkan

program Java, yang bisa ditempatkan pada halaman JSP ke dalam suatu class Java yang akan

dipergunakan oleh JSP sebagai bean. Pada logika presentasi ini, program java yang ada pada

halaman-halaman JSP secara khusus akan berfungsi untuk menampilkan data sesuai request

dari client.

Nama File Keterangan

header.html File html statis untuk menampilkan header yang berisi logo. File ini akan diikutkan pada seluruh halaman JSP yang lain.

index2.jsp Halaman utama yang berfungsi untuk menampilkan halaman yang berisi buku-buku yang dipromosikan.

index3.jsp Halaman yang menampilkan kategori buku

catalog.jsp Halaman yang berfungsi untuk menampilkan katalog yang berisi buku-buku tertentu sesuai keyword yang dimasukkan.

shopcart.jsp Halaman JSP yang menampilkan shopping cart dari seorang pelanggan. Pada halaman ini pelanggan dapat menghapus pesanan yang tidak diinginkan.

Logika Bisnis

Logika bisnis ini terdiri atas beberapa class java yang akan digunakan oleh halaman JSP

dengan action tag <jsp:useBean> untuk menampilkan data. Class java yang ada ini

mempunyai fungsi khusus yang berkaitan dengan logika bisnis dimana mereka berada.

Nama File Keterangan

CMbBooks.java Suatu class java yang merepresentasikan objek buku

CatalogBean.java Suatu class java yang berisi method-method yang berkaitan dengan katalog. Misal menampilkan buku berdasarkan

keyword yang diinginkan

shoppingCartBean.java

Suatu class java yang berisi method-method yang berkaitan dengan

shopping cart. Misal menambahkan barang ke dalam shopping cart,

mengubah jumlah barang dan menghapus barang dari shopping cart.

PEMBAHASAN PROGRAM

Page 175: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 4

Mobile E-Commerce Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

CmbBooks.java package com.jsp;

public class CMbBooks {private String product_id

;private String title ;private String

author;private String description ;private int

price ;private String image ;

public void setProduct_id(String product_id){this.product_id =

product_id ;

}

public String getProduct_id(){

return this.product_id ;

}

public void setTitle(String title){

this.title = title ;

}

public String getTitle(){

return this.title ;

}

public void setAuthor(String author){this.author = author ;

}

public String getAuthor(){

return this.author ;

}

public void setDescription(String description){this.description =

description ;

}

public String getDescription(){

return this.description ;

}

public void setPrice(int

price){

this.price = price ;

}

public int getPrice(){

return this.price ;

}

public void setImage(String

image){

this.image = image ;

}

Page 176: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 5

Mobile E-Commerce Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

public String getImage(){

return this.image ;

}

public String toString(){

return product_id+ " " +

title;

}

}

Penjelasan :

Objek yang dihasilkan dari class CmbBooks merupakan pemetaan dari suatu buku yang ada

pada satu baris di tabel Books pada database. Objek dari class CmbBooks ini akan digunakan

oleh objek-objek lain yang melakukan pemrosesan terhadap objek buku. Misalnya pada objek

catalog, objek catalog ini akan menginstance sejumlah objek books sesuai dengan kategori

tertentu dan meletakkan objek-objek ini pada vector untuk ditampilkan pada halaman JSP>

Katalog Komponen terpenting berikutnya bagi suatu aplikasi web-store adalah katalog, dimana dengan

menggunakan katalog pelanggan bisa melakukan pencarian terhadap produk yang ingin dibeli, serta

melihat-lihat keterangan mengenai product yang ada. Untuk membuat suatu katalog bagi web-store

yang bersifat dinamis, suatu aplikasi harus mengakses database dan menampilkan data-data produk

yang ada ke halaman katalog. Pada aplikasi ini, seluruh fungsi yang berkaitan dengan katalog

didefinisikan pada file CatalogBean.java

CatalogBean.java

package com.jsp;

import java.sql.Connection;import

java.sql.DriverManager;import

java.sql.ResultSet;import

java.sql.Statement;import

java.util.Vector;

public class CatalogBean {

private Statement stmt=null ;

private Connection conn = null ;

private String sURL = "jdbc:odbc:BookStore" ;

private ResultSet rs=null ;

public boolean connect(){

try{

Class.forName("sun.jdbc.odbc.JdbcOdbcDriver") ;

conn = DriverManager.getConnection(sURL,"","") ;

return true ;

}catch(Exception e){

e.printStackTrace();

return false;

}

}

Page 177: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 6

Mobile E-Commerce Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

public boolean disconnect(){

try{

stmt.close();

rs.close();

return true ;

}catch(Exception e){

e.printStackTrace();

return false;

}

}

//untuk mengambil data kategori buku (digunakan) public Vector getAllCatalog(){

Vector vCategory = new Vector();

Vector temp ;

String sql ;

try{

sql="SELECT * FROM Categories";

connect();

stmt = conn.createStatement();

rs = stmt.executeQuery(sql) ;

while (rs.next()) {

temp = new Vector();

temp.add(rs.getString(1));

temp.add(rs.getString(2));

vCategory.add(temp);

}

}catch(Exception e){

e.printStackTrace();

}

finally{

disconnect();

}

return vCategory ;

}

//mengambil judul katalog berdasarkan categoryID

public String getCatalogCategoryName(String category_ID){

String sql ;

String sCategoryName="" ;

try{

sql="SELECT category_name FROM Categories WHERE

category_id='"+category_ID+"' " ;

connect();

stmt = conn.createStatement();

rs = stmt.executeQuery(sql) ;

if (rs.next()) {

sCategoryName = rs.getString("category_name") ;

}

}catch(Exception e){

Page 178: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 7

Mobile E-Commerce Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

e.printStackTrace();

}

finally{

disconnect();

}

return sCategoryName ;

}

//mengambil data buku dari database berdasarkan kategori

public Vector getBooksCatalog(String category_ID){

String sql;

Vector vCatalog = new Vector();

try{

sql = "SELECT * from Books WHERE category_id='"+category_ID+"' ";

connect();

stmt = conn.createStatement();

rs = stmt.executeQuery(sql) ;

while(rs.next()){CMbBooks book = new

CMbBooks();book.setProduct_id(rs.getString("product_id"));book.setT

itle(rs.getString("title"));book.setAuthor(rs.getString("author"));

book.setDescription(rs.getString("description"));book.setPrice(rs.g

etInt("price"));book.setImage(rs.getString("image"));vCatalog.addEl

ement(book);

}

}catch(Exception

e){

e.printStackTrace(

);

}finally{

disconnect();

}

return vCatalog ;

}

//mengambil data buku dari database berdasarkan keyword tertentu (digunakan)

public Vector getBooksCatalogSearch(String title){

String sql;

Vector vCatalog = new Vector();

try{

sql = "SELECT * from Books WHERE title LIKE '%" + title + "%'" ;

connect();

stmt = conn.createStatement();

rs = stmt.executeQuery(sql) ;

while(rs.next()){CMbBooks book = new

CMbBooks();book.setProduct_id(rs.getString("product_id"));book.setT

itle(rs.getString("title"));book.setAuthor(rs.getString("author"));

book.setDescription(rs.getString("description"));book.setPrice(rs.g

etInt("price"));book.setImage(rs.getString("image"));vCatalog.addEl

ement(book);

}

}catch(Exception e){

e.printStackTrace()

;

Page 179: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 8

Mobile E-Commerce Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

}finally{

disconnect();

}

return vCatalog ;

}

//untuk mengambil data buku yang sedang di promosikan (digunakan)

public Vector getPromotionBooks(){

String sql;

Vector vCatalog = new Vector();

try{

sql = "SELECT * from Books WHERE product_id IN (SELECT product_idFROM

promotion)" ;

connect();

stmt = conn.createStatement();

rs = stmt.executeQuery(sql) ;

while(rs.next()){CMbBooks book = new

CMbBooks();book.setProduct_id(rs.getString("product_id"));book.setT

itle(rs.getString("title"));book.setAuthor(rs.getString("author"));

book.setDescription(rs.getString("description"));book.setPrice(rs.g

etInt("price"));book.setImage(rs.getString("image"));vCatalog.addEl

ement(book);

}

}catch(Exception

e){

e.printStackTrace(

);

}finally{

disconnect();

}

return vCatalog ;

}

//mengambil data buku dari database berdasarkan product_idnya

public CMbBooks getBook(String product_ID){

String sql;

CMbBooks book = new CMbBooks();

try{

sql = "SELECT * from Books WHERE product_id= '"+product_ID+"' " ;

connect();

stmt = conn.createStatement();

rs = stmt.executeQuery(sql) ;

while(rs.next()){

book.setProduct_id(rs.getString("product_id"));book.

setTitle(rs.getString("title"));book.setAuthor(rs.ge

tString("author"));book.setDescription(rs.getString(

"description"));book.setPrice(rs.getInt("price"));bo

ok.setImage(rs.getString("image"));

}

}catch(Exception e){e.printStackTrace();

}finally{

Page 180: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 9

Mobile E-Commerce Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

disconnect();

}

return book ;

}

}

Implementasi pada logika presentasi

index2.jsp

<%-- --%>

<%-- lakukan import class Vector, class CMbBook, class CatalogBean dan class-

class pada package java.sql --%>

<%-- buat objek oBooks dari class CmbBooks (javabean) pada package com.jspgunakan

scope=‖page‖--%><%--buat objek catalogBean dari class CatalogBean pada package

com.jsp (javabean) gunakan scope=‖page‖ --%><%-- panggil fungsi getPromotionBooks()

untuk mendapatkan data buku-buku yangsedang dipromosikan simpan dalam Vector

vCatalog --%>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

</head>

<body>

<h3> Selamat Datang di <b>BookStore.com </b>

<br>Kita menawarkan beragam buku yang menarik dengan harga special.<br>

<%

//lakukan iterasi

Iterator it = vCatalog.iterator();

while(it.hasNext()){

//ambil object dari vCatalog simpan pada objek oBooks (gunakan method

next)

%>

<br> <br>

<table>

<tr> <td rowspan="7"><img src="<%--menampilkan gb --%>"></td><td> <%--

menampilkan judul --%></b></td>

</tr>

<tr>

<td>&nbsp;</td>

</tr>

<tr>

<td>Author : <%-- menampilkan pengarang --%> </td></tr><tr>

<td>Description : <%-- menampilkan judul deskipsi dari buku --%> </td></tr><tr>

<td>Price : <%-- menampilkan harga --%> </td>

</tr>

<tr>

Page 181: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 10

Mobile E-Commerce Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

<td>&nbsp;</td>

</tr>

<tr>

<%-- user diminta untuk memasukkan jumlah buku yang akan dibeli kemudianterdapat

button Add to Cart. Buatlah sebuah form dengan method post

danaction="shopcart.jsp?action=add&id=<%=oBooks.getProduct_id()%>" --%>

<td>Quantity : <%-- buat text field dengan

name amount size=3 dan value1 dan button submit --%>

</td>

</form><

/tr></table>

<%

}

%>

</h3>

<%-- Buatlah sebuah form untuk pelanggan dimana pelanggan ingin mencaribuku-

buku berdasarkan kata kunci yang diinginkan.Definisi form : gunakan method post dan

action="catalog.jsp?action=search"—Terdapat sebuah textfield untuk memasukkan

keyword beri nama dengan keyword danbutton submit. %>

</body></h

tml>

Output dari indek2.jsp

Page 182: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 11

Mobile E-Commerce Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

Page 183: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 12

Mobile E-Commerce Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

catalog.jsp

<%-- lakukan import class Vector, class CMbBook, class CatalogBean dan class-

class pada package java.sql --%>

<%-- buat objek oBooks dari class CmbBooks (javabean) pada package com.jspgunakan

scope=‖page‖--%><%--buat objek catalogBean dari class CatalogBean pada package

com.jsp (javabean) gunakan scope=‖page‖ --%>

<%

Vector vCatalog ;

String sTitle ;

String category_ID = "C01" ;

//panggil method getBooksCatalog() dengan paramter category_ID

//ambil parameter action (dengan menggunakan request.getParameter(―action‖))

simpan dalam variabel String sAction

Page 184: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 13

Mobile E-Commerce Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

String sAction = request.getParameter("action") ;

// jika sAction null maka sAction = "view"

// jika sAction sama dengan ―search‖ maka

// ambil parameter ―keyword‖ simpan dalam variabel String sKeyword

//panggil method getBooksCatalogSearch masukkan sKeyword sebagai parameterdari

fungsi tsb. Simpan hasil pada Vector vCatalog.// jika sAction sama dengan ―view‖

maka

//ambil parameter id simpan dalam variabel String dengan nama

sProductID//panggil method getBooksCatalogSearch masukkan sKeyword sebagai

parameterdari fungsi tsb. Simpan hasil pada Vector vCatalog.

%> <html>

<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-

8"><title>JSP Page</title>

</head>

<body>

<h3> Selamat Datang di <b>BookStore.com </b>

<br>Kita menawarkan beragam buku yang menarik dengan harga special.<br>

<%

//lakukan iterasi

Iterator it = vCatalog.iterator();

while(it.hasNext()){

//ambil object dari vCatalog simpan pada objek oBooks (gunakan method

next)

%>

<br> <br>

<table>

<tr> <td rowspan="7"><img src="<%--menampilkan gb --%>"></td><td> <%--

menampilkan judul --%></b></td>

</tr>

<tr>

<td>&nbsp;</td>

</tr>

<tr>

<td>Author : <%-- menampilkan pengarang --%> </td></tr><tr>

<td>Description : <%-- menampilkan judul deskipsi dari buku --%> </td></tr><tr>

<td>Price : <%-- menampilkan harga --%> </td></tr><tr>

<td>&nbsp;</td>

</tr>

<tr>

<%-- user diminta untuk memasukkan jumlah buku yang akan dibeli kemudianterdapat

button Add to Cart. Buatlah sebuah form dengan method post

danaction="shopcart.jsp?action=add&id=<%=oBooks.getProduct_id()%>" --%>

<td>Quantity : <%-- buat text field dengan name amount size=3 dan value1 dan

button submit --%> </td>

</form><

/tr></table>

<%

}

%>

Page 185: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 14

Mobile E-Commerce Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

</h3>

<%-- Buatlah sebuah form untuk pelanggan dimana pelanggan ingin mencaribuku-

buku berdasarkan kata kunci yang diinginkan.Definisi form : gunakan method post dan

action="catalog.jsp?action=search"—Terdapat sebuah textfield untuk memasukkan

keyword beri nama dengan keyword danbutton submit. %>

</body></h

tml>

Output dari catalog.jsp

Jika user memasukkan keyword “mobile” dan selanjutnya tekan button submit maka akan

akan menampilkan semua buku yang mengandung keyword “mobile”

index3.jsp Untuk menampilkan semua kategori buku

<%-- lakukan import class Vector, class CMbBook, class CatalogBean dan class-

class pada package java.sql --%>

<%-- buat objek oBooks dari class CmbBooks (javabean) pada package com.jspgunakan

scope=‖page‖--%><%--buat objek catalogBean dari class CatalogBean pada package

com.jsp (javabean) gunakan scope=‖page‖ --%><%-- panggil fungsi getAllCatalog

simpan dalam variabel vector vCategory --%>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

</head>

Page 186: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 15

Mobile E-Commerce Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

<body><table

border="0">

<tr>

<td> Categories </td>

</tr>

<%

for(int i=0;i<vCategory.size();i++){

//ambil data pada indeks ke I simpan dalam

variabel temp dengan tipe Vector //ambil data pada

indeks ke 0 pada objek temp simpan dalam variabel

String dengan nama id//ambil data pada indeks ke 1

pada objek temp simpan dalam variabel String dengan

nama nm

%> <tr> <td><a

href="catalog.jsp?action=view&

id=<%--panggil var id--%>"><%-

-panggil var nm--

%></a></td></tr>

<%

}

%>

</table></b

ody></html>

Output indek3.jsp

Shopping Cart Komponen lain yang umumnya terdapat pada suatu toko online adalah keranjang belanja

(shopping cart), yang memungkinkan pelanggan untuk menyimpan sementara barang yang

akan dibeli pada saat memilih barang-barang lainnya. Selain itu pelanggan juga dapat

mengeluarkan suatu barang dari shopping cart. Pada aplikasi ini, komponen shopping cart

dibuat dalam dua bagian yaitu shoppingCartBean.java dan shopcart.java yang membentuk

logika bisnis dan logika presentasi. Shopping cart menggunakan scope session sehingga

shopping cart ini akan hilang jika pelanggan keluar dari session dengan cara menutup web-

browser yang digunakan.

Page 187: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 16

Mobile E-Commerce Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

Struktur data pada shopping cart.

Struktur data yang digunakan adalah:

1 VectorCart berisi VectorContent 2 VectorContent berisi:

• CmbBooks (data satu buku) • Integer amount (jumlah buku yang akan dibeli) Pada shopping cart, misal

pelanggan membeli buku A sebanyak 2, buku B sebanyak 1, buku C sebanyak 3. Buku buku

yang dibeli ini disimpan dalam VectorCart. VectorCart merupakan vector yang didalamnya

terdapat vector(VectorContent) pula. VectorContent ini pada indek ke 0 menyimpan objek

Buku dan pada indek ke 1 menyimpan jumlah buku yang akan dibeli.

shoppingCartBean.java

package com.jsp;

import java.util.Iterator;import

java.util.Vector;

public class shoppingCartBean {

//keranjang belanja

private Vector vCart = new Vector();

//untuk mengetahui total jumlah barang yang ada di shooping cart.

private int iCartContent ;

public Vector getCart(){

return vCart ;

}

public int getCartContentNumber(){

return iCartContent ;

}

//fungsi untuk menambahkan ke shopping cart

public boolean addToCart(String product_id, int num){

CatalogBean oBean = new CatalogBean();

CMbBooks book = oBean.getBook(product_id);

Vector vCartContent = new Vector();

Integer amount = new Integer(num);

vCartContent.addElement(book);

vCartContent.addElement(amount);

Page 188: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 17

Mobile E-Commerce Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

vCart.addElement(vCartContent);

//update total jumlah barang yang ada di shopping cart

iCartContent = iCartContent + amount.intValue();

return true;

}

//menghapus barang dari shopping cart berdasarkan product_id

public void removeFromCart(String product_id){

for(int i=0;i<vCart.size();i++){Vector temp = (Vector)vCart.get(i);CMbBooks

book= (CMbBooks) temp.get(0);Integer amount = (Integer)

temp.get(1);String book_productid = book.getProduct_id() ;

if (book_productid.equals(product_id)){vCart.removeElementAt(i);break;

}

}

}

// untuk mengecek apakah barang sudah terdapat di shopping cart, jika sudahada

maka return true jika belum ada maka return false

public boolean isExist(String cartID){

Iterator it = vCart.iterator() ;

while (it.hasNext()){

Vector vCartContent = (Vector) it.next() ;

CMbBooks oBook = (CMbBooks) vCartContent.elementAt(0);

String productID= oBook.getProduct_id();

if (productID.equals(cartID))

return

true ;

}

return false;

}

public void destroyCart(){

vCart = new Vector();

}

}

Shopcart.jsp

<%-- lakukan import class Vector, class CMbBook, class CatalogBean dan class-

class pada package java.sql --%>

<%-- buat objek oBooks dari class CmbBooks (javabean) pada package com.jspgunakan

scope=‖page‖--%><%--buat objek catalogBean dari class CatalogBean pada package

com.jsp (javabean) gunakan scope=‖page‖ --%>

<% Vector vShopCart = new Vector();String sAction;String sMessage = "Your Shopping

Cart is Empty" ;int iTotal = 0 ;

//ambil paramter action simpan dalam variabel Saction.

// jika sAction tidak sama dengan null (add,delete) maka

//jika sAction sama dengan ‖add‖// ambil parameter ‖id‖ simpan dalam variabel

Page 189: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 18

Mobile E-Commerce Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

String sProductID// ambil parameter ‖amount‖ simpan dalam variabel String

sAmount// ubah sAmount menjadi tipe int simpan dalam variabel num// jika

keranjang belanja belum ada buku dengan sProductID maka

// tambahkan ke shooping cart

// jika sAction sama dengan ‖delete‖// ambil parameter ‖productID‖ simpan dalam

variabel String sProductID// panggil method removeFromCart() dengan masukan

sProductID

// panggil method getCart() , simpan hasilnya dalam variabel vShopCart%>

<html>

<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-

8"><title>JSP Page</title>

</head>

<body>

<h3> Selamat Datang di <b>BookStore.com </b>

<br><br> Shopping Cart<br>

</h3>

<table border="1">

<tr>

<td>ID</td>

<td>Title</td

>

<td>Amount</t

d>

<td>Price</td

>

<td>SubTotal<

/td>

<td>Delete</t

d>

</tr>

<%

Iterator it =

vShopCart.iterato

r();

while(it.hasNext(

)){

//ambil data untuk setiap indek pada vector vShopCart (datadalam

bentuk vector simpan dengan nama vContent. vContent ini pada indeks ke 0berisi

objek buku dan indeks ke 1 berisi jumlah dari objek buku)

//ambil data pada indeks ke 0 simpan dalam variabel oBook

//ambil data pada indeks ke 0 simpan dalam variabel iAmount

dengan tipe Integer//dapatkan harga buku tsb simpan dalam variabel iPrice

(int)//hitung subtotal harga buku//hitung pula total harga buku

%>

<tr> <td><%-- menampilkan id Buku --%></td><td><%-- menampilkan judul Buku

--%></td><td><%-- menampilkan jumlah buku --%></td><td><%-- menampilkan

harga buku --%></td><td><%-- menampilkan subTotal (harga buku * jumlah

buku) --%></td><td><a

href="shopcart.jsp?action=delete&productID=<%=oBook.getProduct_id()%>">Delete</a><

/td>

</tr>

<%

}

%>

<tr> <td colspan="7"

><h3>Total : <%-- menampilkan total

dari semuabuku --%></h3></td>

</tr>

Page 190: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 19

Mobile E-Commerce Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

</table>

<br>

<br>

<a href="index2jsp"><h3>VIEW

CATALOG<h3></a></body></html>

Output dari shopcart.jsp

Tampilan utama dari aplikasi ini ditunjukkan pada gambar 1. User juga dapat melihat

katalog buku berdasarkan kategori buku. Misal user memilih kategori database maka

hasil seperti gambar 2.

Page 191: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 20

Mobile E-Commerce Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

Gambar 1 Gambar 2

Page 192: MODUL PERKULIAHAN Pemrogramam Web Enterprisefasilkom.mercubuana.ac.id/wp-content/uploads/2017/... · ‘13 2 Pemrograman Web Enterprise Pusat Bahan Ajar dan eLearning Tim DosenI.

‘13 21

Mobile E-Commerce Pusat Bahan Ajar dan eLearning

Bagus Priambodo ST MTI http://www.mercubuana.ac.id

Latihan

1. E-Commerce yang telah dibuat masukkan template html yang lebih baik kedalam

nya (Kelompok)

Daftar Pustaka

15. Hans Bergsten, . 2002. JavaServer Pages™, 2nd Edition. O'Reilly

16. Sri Hartati Wijono, Pemrograman Java Servlet dan JSP dengan Netbeans, Penerbit

Andi. Agus Setyabudi dan Albert Samuel,

17. Aplikasi E-Commerce dengan Java Servlet dan JSP, Penerbit Elex Media

Komputindo