Pemrogramam Web Enterprise

Transkripsi

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

2 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 halamanhalaman 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 2 Pemrograman Web Enterprise Tim DosenI.

3 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 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 Melalui Web browser, Anda bisa menghubungi Context 3 Pemrograman Web Enterprise Tim DosenI.

4 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 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. 4 Pemrograman Web Enterprise Tim DosenI.

5 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. 5 Pemrograman Web Enterprise Tim DosenI.

6 Gambar 1.4 Menu untuk menjalankan Web Server Tomcat Gambar 1.5 Tampilan Start Tomcat c. Jalankan browser dan akses alamat Bila instalasi web server Tomcat berhasil maka akan keluar tampilan seperti pada Gambar 1.6. Gambar 1.6 Tampilan : Membuat context. a. Buatlah sebuah folder (misal dengan nama proses ) didalam TomcatHome/webapp/. Maka akan didapat hirarki sebagai berikut TomcatHome/webapp/proses. 6 Pemrograman Web Enterprise Tim DosenI.

7 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 Bila context berhasil dibangun maka akan didapat tampilan seperti pada Gambar Pemrograman Web Enterprise Tim DosenI.

8 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 dan akan didapatkan tampilan seperti pada Gambar 1.9. Gambar 1.9 Tampilan Hello.jsp 8 Pemrograman Web Enterprise Tim DosenI.

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

10 Daftar Pustaka Hans Bergsten, JavaServer Pages, 2nd Edition. O'Reilly Yuliana, eepis-its.edu. 10 Pemrograman Web Enterprise.

11 MODUL PERKULIAHAN Pemrogramam Web Enterprise Scripting Element JSP Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh Ilmu Komputer Sistem Informasi Tim Dosen Abstract Pengenalan element script pada jsp Kompetensi Mahasiswa mengerti dasar script pada jsp

12 Scripting Element JSP 2.1 Mengenal Elemen Scripting Kita bahas untuk elemen scipting. Elemen scripting terdiri atas 3 macam yaitu: Scriplet Deklarasi Ekspresi 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. 2 Pemrograman Web Enterprise.

13 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 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> 3 Pemrograman Web Enterprise.

14 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 : 4 Pemrograman Web Enterprise.

15 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 Perintah println() Kode : println2.jsp <html> <head> 5 Pemrograman Web Enterprise.

16 <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 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 6 Pemrograman Web Enterprise.

17 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: 7 Pemrograman Web Enterprise.

18 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 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 Pemrograman Web Enterprise.

19 Gambar 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 : 9 Pemrograman Web Enterprise.

20 Gambar Contoh scripting elements. Gambar Contoh penggunaan <jsp:forward> yang melibatkan <jsp:param> 10 Pemrograman Web Enterprise.

21 forward2.jsp Output : 11 Pemrograman Web Enterprise.

22 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 " language="java" import="java.sql.*" errorpage="" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <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 " language="java" import="java.sql.*" errorpage="" %>

23 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <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 " language="java" import="java.sql.*" errorpage="" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <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 " language="java" import="java.sql.*" errorpage="" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " 13 Pemrograman Web Enterprise.

24 <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <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> <% 14 Pemrograman Web Enterprise.

25 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> 15 Pemrograman Web Enterprise.

26 Daftar Pustaka Hans Bergsten, JavaServer Pages, 2nd Edition. O'Reilly Yuliana, eepis-its.edu 16 Pemrograman Web Enterprise.

27 MODUL PERKULIAHAN Pemrogramam Web Enterprise Directive JSP Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh Ilmu Komputer Sistem Informasi Tim Dosen Abstract Mengenal Directive mengirim pesan pada JSP Kompetensi Mahasiswa mengerti bagaimana cara mengirim pesan menggunakan directive

28 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 : 2 Pemrograman Web Enterprise.

29 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. 3 Pemrograman Web Enterprise.

30 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=" prefix="app" %> <app:attribute name="test1"/> <app:setattribute name="test1">isi Atribut</app:setAttribute> 4 Pemrograman Web Enterprise.

31 Pada contoh di atas, secara default tidak dapat dijalankan dan akan menampilkan pesan error. Karena tag library ini belum diinstall pada sistem. 3.3 Mengenal Tag Deklaratif Gambar 3.1 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; 5 Pemrograman Web Enterprise.

32 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> Hasil kode direktif.jsp Listing program 3.1 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()%> 6 Pemrograman Web Enterprise.

33 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> Hasil di browser : Listing program 3.2 Gambar Deklarasi variabel dengan tag scriplet. Pendeklarasian variabel juga dapat dilakukan secara langsung pada tag scriplet (<% %>) Kode : deklarasi2.jsp 7 Pemrograman Web Enterprise.

34 <html> <head> <title>tag Deklarasi</title> </head> <body> <% String buku; int harga = ; buku = "Pemrograman JSP"; out.println("judul Buku : " + buku + "<BR>"); out.println("harga : " + harga + "<br>"); %> </body> </html> Hasil di browser : Listing program 3.3 Gambar 3.4 Contoh Soal : 1. Terdapat dua pemain, masing-masing pemain mendapatkan nilai secara random, bilangan random yang dibangkitkan antara 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 8 Pemrograman Web Enterprise.

35 : Gambar 3.5 Gambar Tentukan sejumlah n bilangan. Besar n tentukan secara random, maksimal 20 bilangan. Setiap bilangan yang dibangkitkan antara Dari semua bilangan tadi, tentukan nilai maksimum dan minimumnya. Simpan dengan nama loop1.jsp. Hasil di browser : 9 Pemrograman Web Enterprise.

36 Gambar 3.7 Gambar Tentukan sejumlah n bilangan. Besar n tentukan secara random, maksimal 20 bilangan. Simpan bilangan-bilangan tersebut dalam sebuah array. Setiap bilangan yang dibangkitkan antara Dari semua bilangan tadi, tentukan nilai maksimum dan minimumnya. Simpan dengan nama loop2.jsp. Hasil di browser : Gambar Pemrograman Web Enterprise.

37 Gambar Terdapat array String yang berisi nama-nama. Nama-nama tersebut diurutkan menggunakan Arrays.sor(). Simpan dalam file UrutString.jsp. Hasil di browser : 11 Pemrograman Web Enterprise.

38 Gambar 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 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 : 12 Pemrograman Web Enterprise.

39 Gambar 3.13 Gambar Penggunaan direktif include Ketikkan program di bawah ini. Output ditunjukkan pada gambar Penggunaan atribut iserrorpage. errorpage.jsp Gambar 3.15 pesan.jsp 13 Pemrograman Web Enterprise.

40 Jalankan program dengan cara sebagai berikut: Apa yang terjadi? Output program : Gambar Pemrograman Web Enterprise.

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

42 <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>"); 16 Pemrograman Web Enterprise.

43 while(i<kalimat.length()){ i = kalimat.indexof("a",i) ; %> </body> </html> if (i!= -1) { out.println("<br>indeks = " + i); i++; else break ; <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> 17 Pemrograman Web Enterprise.

44 <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, JavaServer Pages, 2nd Edition. O'Reilly. Yuliana, eepis-its.edu 18 Pemrograman Web Enterprise.

45 MODUL PERKULIAHAN Pemrogramam Web Enterprise Standard Action Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh Ilmu Komputer Sistem Informasi Tim Dosen Abstract Mengenal Standard Action Kompetensi Mahasiswa mengerti bagaimana menggunakan standard action

46 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 : 2 Pemrograman Web Enterprise.

47 <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"> 3 Pemrograman Web Enterprise.

48 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 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 Pemrograman Web Enterprise.

49 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 Pemrograman Web Enterprise.

50 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 6 Pemrograman Web Enterprise.

51 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" > 7 Pemrograman Web Enterprise.

52 <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 Pemrograman Web Enterprise.

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

54 <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> </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 " language="java" import="java.sql.*" errorpage="" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " 10 Pemrograman Web Enterprise.

55 <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <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 " language="java" import="java.sql.*" errorpage="" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <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> 11 Pemrograman Web Enterprise.

56 Daftar Pustaka Hans Bergsten, JavaServer Pages, 2nd Edition. O'Reilly Yuliana, eepis-its.edu. 12 Pemrograman Web Enterprise.

57 MODUL PERKULIAHAN Pemrogramam Web Enterprise Java Beans Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh Ilmu Komputer Sistem Informasi Tim Dosen Abstract Mengenal Java Bean Kompetensi mahasiswa diharapkan mampu: 1. mengenal pengertian Java Bean 2. Mahasiswa mengenal sintak Java Bean 3. Mahasiswa mampu mengintegrasikan Java Bean dengan JSP

58 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(); %> 2 Pemrograman Web Enterprise.

59 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: 3 Pemrograman Web Enterprise.

60 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 : 4 Pemrograman Web Enterprise.

61 <!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); 5 Pemrograman Web Enterprise.

62 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 : 6 Pemrograman Web Enterprise.

63 <!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> 7 Pemrograman Web Enterprise.

64 Listing 4.4 File JSP untuk SaleEntry Untuk menjalankan program akses url dengan cara sebagai berikut: 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. 8 Pemrograman Web Enterprise.

65 <!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 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 9 Pemrograman Web Enterprise.

66 <!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 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 10 Pemrograman Web Enterprise.

67 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 : 11 Pemrograman Web Enterprise.

68 <!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 12 Pemrograman Web Enterprise.

69 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 13 Pemrograman Web Enterprise.

70 <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> 14 Pemrograman Web Enterprise.

71 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 Buatlah package cwp. Simpan Listing 4.11 di package cwp 15 Pemrograman Web Enterprise.

72 Daftar Pustaka Hans Bergsten, JavaServer Pages, 2nd Edition. O'Reilly Yuliana, eepis-its.edu. 16 Pemrograman Web Enterprise.

73 MODUL PERKULIAHAN Pemrogramam Web Enterprise Object Implisit Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh Ilmu Komputer Sistem Informasi Tim Dosen Abstract Daftar Objek Implisit Variabel Request Variabel Response Kompetensi mahasiswa diharapkan mampu: 1. Mahasiswa mengenal Daftar Objek Implisit 2. Mahasiswa mengenal Variabel Request 3. Mahasiswa mengenal Variabel Response

74 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 Request Keterangan Variabel ini berhubungan dengan objek permintaan HTTP (HTTPServletRequest). Variabel ini memungkinkan pengaksessan seperti parameterparameter permintaan, tipe permintaan (GET atau POST), dan judul HTTP 2 Pemrograman Web Enterprise.

75 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() 3 Pemrograman Web Enterprise.

76 Session Application Config Variabel ini digunakan untuk menangani sesi ServletContext 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 getparameter(string nama) getparameternames() getprotocol() getremoteaddr() getremotehost() getscheme() Keterangan Memperoleh nilai parameter nama dengan hasil bertipe String. Kalau parameter nama tidak tersedia, maka hasilnya berupa null. Menghasilkan suatu Enumeration yang berisi nama-nama parameter yang terdapat pada permintaan. Menghasilkan suatu string yang menyatakan nama dan versi protokol yang digunakan untuk melakukan permintaan. Menghasilkan suatu string yang menyatakan alamat IP klien yang mengirimkan permintaan Menghasilkan suatu string yang menyatakan nama host milik klien yang mengirimkan permintaan. Menghasilkan suatu string yang menyatakan skema yang digunakan untuk melakukan permintaan (misalnya http,https,atau ftp) 4 Pemrograman Web Enterprise.

77 getservername() Menghasilkan nama server yang melakukan permintaan. 5 Pemrograman Web Enterprise.

78 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 Pemrograman Web Enterprise.

79 Hasil di browser : Gambar 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 : 7 Pemrograman Web Enterprise.

80 Gambar 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. 8 Pemrograman Web Enterprise.

81 Latihan Daftar Pustaka 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.. 1. Hans Bergsten, JavaServer Pages, 2nd Edition. O'Reilly 2. Yuliana, eepis-its.edu

82 MODUL PERKULIAHAN Pemrogramam Web Enterprise Penanganan Form Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh Ilmu Komputer Sistem Informasi Tim Dosen Abstract Tag Form Membaca Parameter dari form HTML Kompetensi mahasiswa diharapkan mampu: 1. Mahasiswa mengenal Form JSP 2. Mahasiswa dapat membaca parameter dari HTML form

83 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 = request.getparameter(" "); 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 Membuat kode form JSP 2 Pemrogramn Web Enterprise

84 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 Pemrogramn Web Enterprise

85 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> </td> <td><input type=text name= ></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> 4 Pemrogramn Web Enterprise

86 </tr> <tr> <td> </td> <td><input type=submit value=proceed></td> </tr> </table> </form> </body> </html> Listing Program Membuat kode proseslabform.jsp untuk menangkap parameter Kode : proseslabform.jsp <% String name = request.getparameter("name"); String sex = request.getparameter("sex"); String = request.getparameter(" "); 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> </td> <td><%= %></td> </tr> <tr> <td>competency :</td> <td> <%=competency%> </td> </tr> 5 Pemrogramn Web Enterprise

87 <tr> <td>interest :</td> <td> <%=interest%> </td> </tr> </table> </form> </body> </html> Listing Program 7.4 Hasil di browser : Gambar Pemrogramn Web Enterprise

88 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, JavaServer Pages, 2nd Edition. O'Reilly 4. Yuliana, eepis-its.edu 7 Pemrogramn Web Enterprise

89 MODUL PERKULIAHAN Pemrogramam Web Enterprise JSP dan Database Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh Ilmu Komputer Sistem Informasi Tim Dosen Abstract Tag Form jsp dan database Kompetensi mahasiswa diharapkan mampu: 1. menghubungkan JSP dengan database

90 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 2 Pemrogramn Web Enterprise

91 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 : 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 3 Pemrogramn Web Enterprise

92 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 bilanganbilangan 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 Pemrogramn Web Enterprise

93 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> 5 Pemrogramn Web Enterprise

94 </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 kelaskelas 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); 6 Pemrogramn Web Enterprise

95 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 7 Pemrogramn Web Enterprise

96 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) 8 Pemrogramn Web Enterprise

97 { 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 : 9 Pemrogramn Web Enterprise

98 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> </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(" ")%></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 10 Pemrogramn Web Enterprise

99 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> </td> <td>pesan</td> </tr> <%--Digunakan untuk membuat kolom NIS, Nama, Alamat, , 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(" ")%></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.print ln("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 11 Pemrogramn Web Enterprise

100 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 12 Pemrogramn Web Enterprise

101 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, JavaServer Pages, 2nd Edition. O'Reilly

102 MODUL PERKULIAHAN Pemrogramam Web Enterprise JSP dan Image Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh Ilmu Komputer Sistem Informasi Tim Dosen Abstract Tag Form jsp dan database Kompetensi mahasiswa diharapkan mampu: 1. menghubungkan JSP, image dengan database

103 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); 2 Pemrogramn Web Enterprise

104 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"); %> 3 Pemrogramn Web Enterprise

105 <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!"); 4 Pemrogramn Web Enterprise

106 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 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 Memilih Gambar 5 Pemrogramn Web Enterprise

107 Gambar Gambar telah terpilih Gambar 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(); 6 Pemrogramn Web Enterprise

108 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 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. 7 Pemrogramn Web Enterprise

109 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, JavaServer Pages, 2nd Edition. O'Reilly 8 Pemrogramn Web Enterprise

110 MODUL PERKULIAHAN Pemrogramam Web Enterprise JSP dan Database Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh Ilmu Komputer Sistem Informasi Tim Dosen Abstract Tag Form jsp dan database Kompetensi mahasiswa diharapkan mampu: 1. menghubungkan JSP dengan database

111 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 2 Pemrogramn Web Enterprise

112 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 : 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 3 Pemrogramn Web Enterprise

113 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 bilanganbilangan 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 Pemrogramn Web Enterprise

114 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> 5 Pemrogramn Web Enterprise

115 </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 kelaskelas 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); 6 Pemrogramn Web Enterprise

116 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 7 Pemrogramn Web Enterprise

117 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) 8 Pemrogramn Web Enterprise

118 { 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 : 9 Pemrogramn Web Enterprise

119 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> </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(" ")%></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 10 Pemrogramn Web Enterprise

120 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> </td> <td>pesan</td> </tr> <%--Digunakan untuk membuat kolom NIS, Nama, Alamat, , 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(" ")%></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.print ln("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 11 Pemrogramn Web Enterprise

121 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 12 Pemrogramn Web Enterprise

122 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, JavaServer Pages, 2nd Edition. O'Reilly

123 MODUL PERKULIAHAN Pemrogramam Web Enterprise Cookie dan Session Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh Ilmu Komputer Sistem Informasi Tim Dosen Abstract Mengenal Cookie Menciptakan Cookie Mengenal Session Kompetensi 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

124 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 15 Pemrogramn Web Enterprise

125 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. 16 Pemrogramn Web Enterprise

126 Domain Expires Secure 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. Menyatakan batas waktu kadaluwarsa.bawaannya, cookie hanya berlaku sampai browser ditutup. 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 17 Pemrogramn Web Enterprise

127 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 18 Pemrogramn Web Enterprise

128 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" ); 19 Pemrogramn Web Enterprise

129 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 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>"); 20 Pemrogramn Web Enterprise

130 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> Hasil di browser : Listing Program 8.2 Gambar Menentukan usia cookie Kode : usiacookie.jsp <html> <head> <title>usia Cookie</title> </head> <body> <% Cookie cnama = new Cookie("nama","Ahmad Izzudin"); cnama.setmaxage(3600); 21 Pemrogramn Web Enterprise

131 response.addcookie(cnama); out.println("coookie dengan usia 1 jam telah dibentuk"); %> </body> </html> Listing Program 8.3 Hasil di browser : Listing Program 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 Pemrogramn Web Enterprise

132 Hasil di browser : Gambar 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 Pemrogramn Web Enterprise

133 Hasil di browser : Gambar 8.5 Perubahan di bacacookie.jsp : Gambar 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"> 24 Pemrogramn Web Enterprise

134 </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> 25 Pemrogramn Web Enterprise

135 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 Jika telah logout maka session untuk user tidak ada lagi (lihat gambar 8.11) Gambar Pemrogramn Web Enterprise

136 Gambar 8.8 Gambar Pemrogramn Web Enterprise

137 Gambar 8.10 Gambar 8.11 Loginform.html <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <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> </td> </tr> </table> 28 Pemrogramn Web Enterprise

138 </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 " /> <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> 29 Pemrogramn Web Enterprise

139 </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 " /> <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 " /> <title>untitled Document</title> </head> <body> <p> INFORMASI ANDA PADA SESSION TELAH TIDAK ADA 30 Pemrogramn Web Enterprise

140 Sehingga ANda tidak dapat mengakses kembali <a href="ceksession.jsp"> link ceksession.jsp </a> </p> </body> </html> 31 Pemrogramn Web Enterprise

141 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, JavaServer Pages, 2nd Edition. O'Reilly

142 MODUL PERKULIAHAN Pemrogramam Web Enterprise JSP dan Applet Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh Ilmu Komputer Sistem Informasi Tim Dosen Abstract Mengenal Applet dan JSP Kompetensi 1. Mahasiswa mengenal Applet 2. Mahasiswa mampu memasukan applet dalam JSP Applet dan JSP

143 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 2 Pemrogramn Web Enterprise

144 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. 3 Pemrogramn Web Enterprise

145 Isi dari file index.jsp <html> <head> <meta httpequiv="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: 4 Pemrogramn Web Enterprise

146 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: 5 Pemrogramn Web Enterprise

147 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 : 6 Pemrogramn Web Enterprise

148 <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: 7 Pemrogramn Web Enterprise

149 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 httpequiv="content-type" content="text/html;charset=utf- 8"> <title>jsp Page</title> </head> <body> 8 Pemrogramn Web Enterprise

150 <jsp:plugin type="applet"code="formapplet.class" archive="cobaapplet.jar"width="500" height="150"> </jsp:plugin> </body> </html> Hasil sebagai berikut: 9 Pemrogramn Web Enterprise

151 Latihan 1. Buatlah applet menghitung luas dan keliling!! 2. Publish applet dalam JSP..!!! Daftar Pustaka 9. Hans Bergsten, 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

152 MODUL PERKULIAHAN Pemrogramam Web Enterprise Buku Tamu dengan Java Bean Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh Ilmu Komputer Sistem Informasi Tim Dosen Abstract Implementasi Java Bean Kompetensi 3. Mahasiswa mampu mengenal Buku Tamu dengan Java Bean JavaBeans adalah arsitektur standart untuk membuat komponen reusable dalam Java. Kita

153 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. 12 Mobile E-Commerce

154 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> 13 Mobile E-Commerce

155 </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="*" /> <html> <head> <title>jsp Page</title> </head> <body> 25 <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> 14 Mobile E-Commerce

156 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 Mobile E-Commerce

157 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> 16 Mobile E-Commerce

158 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: 17 Mobile E-Commerce

159 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 18 Mobile E-Commerce

160 Gambar 3 Gambar 4 Komponen JavaBean Gambar 5 public class NumberGuessBean {private String guess ;private int numguesses ; 19 Mobile E-Commerce

161 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 ; 20 Mobile E-Commerce

162 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 Dibawah ini adalah kerangka dari file index.jsp. Selamat mencoba. index.jsp //lakukan import class NumberGuessBean yang terletak pada packagecom.jsp <html> <head> <meta httpequiv="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 21 Mobile E-Commerce

163 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 . Data ini selanjutnya akan tersimpan pada database access (GuestBook). Terdapat sebuah table GuestBook dengan field name, address, company dan , 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 Index.jsp GuestBook.jsp GuestBookView.jsp Keterangan Halaman utama dari aplikasi. Pada halaman ini user dapat mengisi GuestBook dengan memasukkan nama, alamat, perusahaan bekerja dan . Halaman yang memproses data user untuk diinsertkan ke database. Halaman untuk menampilkan semua user yang tersimpan pada tabel GuestBook. Aplikasi : Pertama kali user memasukkan nama, alamat, perusahaan dan (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 22 Mobile E-Commerce

164 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 ; 23 Mobile E-Commerce

165 public boolean insertintodb (String name, String address, String company, String ){ sdata = "name = + rs.getstring(1) + "<br>address = + String sql = "INSERT INTO VALUES('"+name+"','"+address+"','"+company+"','"+ +"') " ;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> = " + rs.getstring(4);vguest.add(sdata);sdata=""; rs.close();stmt.close(); catch(exception e){ e.printstacktrace();return vguest; index.jsp 24 Mobile E-Commerce

166 <html> <head> <meta httpequiv="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 . Beri nama textfield dengan nama name,address, company dan . 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 = request.getparameter(" ") ; //jika name, address, company dan tidak ( ) maka //lakukan insert data ke database //jika berhasil message = "Thank you " + name + " for Registering " ; //jika tidak set message = "Error" ;%> <html> <head> <meta httpequiv="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 httpequiv="content-type" content="text/html;chars et=utf-8"> <title>guestbook</title></head> <body><h1>guest List </h1> 25 Mobile E-Commerce

167 </body></h tml> <h3> <% //lakukan iterasi pada vguest dan tampilkan hasilnya %> </h3> 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 Index.jsp GuestBook.jsp GuestBookView.jsp GuestBookEdit.jsp Prosesedit.jsp Delete.jsp Keterangan Halaman utama dari aplikasi. Pada halaman ini user dapat mengisi GuestBook dengan memasukkan nama, alamat, perusahaan bekerja dan . Halaman yang memproses data user untuk diinsertkan ke database. Halaman untuk menampilkan semua user yang tersimpan pada tabel GuestBook. Halaman ini menampilkan data user yang akan diedit. Halaman yang memproses data user untuk diupdate di database Halaman yang memproses data user untuk dihapus di database File index.jsp 26 Mobile E-Commerce

168 File GuestBookView.jsp Gambar 2 File GuestBookEdit.jsp 27 Mobile E-Commerce

169 File prosesedit.jsp Gambar 4 File GuestBookView.jsp 28 Mobile E-Commerce

170 File delete.jsp Gambar 5 File GuestBookView.jsp GuestBookView.jsp Gambar 7 <%----%> <%-- 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> 29 Mobile E-Commerce

171 --%> <%-- Baris header table yaitu name, address, company, , edit dandelete <tr> <td> Name</td> <td> Address</td> <td> Company</td> <td> </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 (simpan dalam variabel dengantipe String). */ %> <tr> <td> <%=nm%></td> <td> <%=adr%></td> <td><%=comp%></td> <td> <%= %></td> <td><a href="guestbookedit.jsp?name=<%=nm%>&address=<%=adr%> &company=<%=comp%>& =<%= %>">edit</a></td><td > <a href="delete.jsp? =<%= %>">delete</a> </td></tr> <% %> </table ></h3>< /body>< /html> Latihan 1. Buatlah implementasi javabean dengan kasus yang lain..!!! (Kelompok) Daftar Pustaka 12. Hans Bergsten, 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 30 Mobile E-Commerce

172 MODUL PERKULIAHAN Pemrogramam Web Enterprise E-Commerce dengan JSP Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh Ilmu Komputer Sistem Informasi Tim Dosen Abstract Membuat E-Commerce Kompetensi 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

173 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 Books Categories Promotion Penjelasan masing-masing tabel. Tabel Books Nama field product_id title author description price category_id image Keterangan Tabel berisi data-data buku yang ada Tabel untuk menyimpan tipe kategoru dari buku-buku yang ada Tabel yang menyimpan data buku yang ingin ditampilkan pada halaman depan/dipromosikan. Tipe data text text text text int text text Nama field Tipe data category_id text category_name text category_description text Tabel Categories Nama field promotion_id product_id Tipe data text text Tabel Promotion Arsitektur Toko Buku Sederhana Bagian ini menjelaskan tentang arsitektur sistem yang akan digunakan. 2 Mobile E-Commerce

174 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 header.html index2.jsp index3.jsp catalog.jsp shopcart.jsp Keterangan File html statis untuk menampilkan header yang berisi logo. File ini akan diikutkan pada seluruh halaman JSP yang lain. Halaman utama yang berfungsi untuk menampilkan halaman yang berisi buku-buku yang dipromosikan. Halaman yang menampilkan kategori buku Halaman yang berfungsi untuk menampilkan katalog yang berisi buku-buku tertentu sesuai keyword yang dimasukkan. 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 CMbBooks.java CatalogBean.java shoppingcartbean.java Keterangan Suatu class java yang merepresentasikan objek buku Suatu class java yang berisi method-method yang berkaitan dengan katalog. Misal menampilkan buku berdasarkan keyword yang diinginkan 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 3 Mobile E-Commerce

175 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 ; 4 Mobile E-Commerce

176 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; 5 Mobile E-Commerce

177 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){ 6 Mobile E-Commerce

178 finally{ e.printstacktrace(); 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() ; 7 Mobile E-Commerce

179 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{ 8 Mobile E-Commerce

180 disconnect(); return book ; Implementasi pada logika presentasi index2.jsp <%-- --%> <%-- lakukan import class Vector, class CMbBook, class CatalogBean dan classclass 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=" <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <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> </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> 9 Mobile E-Commerce

181 <td> </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 mencaribukubuku 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 10 Mobile E-Commerce

182 11 Mobile E-Commerce

183 catalog.jsp <%-- lakukan import class Vector, class CMbBook, class CatalogBean dan classclass 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 12 Mobile E-Commerce

184 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> </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> </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> <% %> 13 Mobile E-Commerce

185 </h3> <%-- Buatlah sebuah form untuk pelanggan dimana pelanggan ingin mencaribukubuku 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 classclass 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=" <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>untitled Document</title> </head> 14 Mobile E-Commerce

186 <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 webbrowser yang digunakan. 15 Mobile E-Commerce

187 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); 16 Mobile E-Commerce

188 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 classclass 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 17 Mobile E-Commerce

189 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> 18 Mobile E-Commerce

190 </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 Mobile E-Commerce

191 Gambar 1 Gambar 2 20 Mobile E-Commerce

192 Latihan 1. E-Commerce yang telah dibuat masukkan template html yang lebih baik kedalam nya (Kelompok) Daftar Pustaka 15. Hans Bergsten, 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 21 Mobile E-Commerce