JSP dan Image - Pemrogramam Web Enterprise

Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh Ilmu Komputer Sistem Informasi

09

⁸⁷⁰⁴⁰ ^{Tim Dosen}

Abstract Kompetensi

Tag Form

• jsp dan database mahasiswa diharapkan mampu:

1. menghubungkan JSP, image dengan database

‘13 2 Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

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

JSP dan database

1. Meng-update / mengganti data gambar pada tabel Database.

Meng-update atau mengganti gambar adalah fitur yang sangat penting pada sebuah halaman web, terutama sekali jika web tersebut memiliki halaman-halaman gambar yang membutuhkan proses pergantian dengan gambar yang baru, contohnya sebuah halaman profil pengguna yang mengharuskan untuk selalu diupdate/diperbaiki oleh penggunanya. Untuk itu dibutuhkan sebuah proses untuk melakukan penggantian data gambar pada tabel database.

Untuk menambahkan fitur peng-update-an/penggantian data gambar pada tabel database dapat menggunakan proyek yang telah dibuat pada modul sebelumnya. Dalam modul ini gambar akan diganti berdasarkan judul gambar dan gambar yang diuploadkan sertadikirimkandari halaman ItemGaleri.jsp ke halaman UbahGaleri.jsp, pada halaman UbahGaleri.jsp parameter di get untuk kemudian digunakan untuk diteruskan sebagai parameter prosedur untuk mengganti gambar sesuai dengan dengan gambar baru yang diinputkan pada sebuah halaman galeri yang telah dibuat sebelumnya. Untuk merealisasikan hal ini maka terlebih dahulu kita harus mengambil nilai judul gambar yang telah dimasukkan ke dalam tabel database.

Maka kode pada halaman ItemGaleri.jsp menjadi seperti dibawah ini : ...

//for(int i=0;i<=10;i++) // {

Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");

Connection con =

String ids = Integer.toString(id);

idplus=id+1;

<img src="../MenuGallery?id=<%=ids%>" width="80"

height="80"></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>

<input type="file" required="required" Name="AddImage"

value="">

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

‘13 4 Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

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

<form name="Form_UbahGambar"

action="../UbahGallery?coba=<%=judul%>"

enctype="multipart/form-data" method="post">

Tambah Gambar Galeri<br/></br>

<input type="file" required="required" Name="UpdateImage"

value="">

</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);

PreparedStatement stmt = con.prepareStatement(Query);

stmt.setString(1, judul);

stmt.setBytes(2, b);

int result = stmt.executeUpdate();

if(result > 0)

out.println("Uploaded successfully !");

else

out.println("Uploaded Error !");

con.close();

response.sendRedirect("view/ItemGaleri.jsp");

} catch (SQLException ex) {

Logger.getLogger(UbahGallery.class.getName()).log(Level.SEVERE , null, ex);

} catch (ClassNotFoundException ex) {

Logger.getLogger(SaveGallery.class.getName()).log(Level.SEVERE , null, ex);

} catch (FileUploadException ex) {

Logger.getLogger(SaveGallery.class.getName()).log(Level.SEVERE , null, ex);

}

Kemudian buatlah prosedur untuk update data gambar pada tabel database dengan kode sbb:

create procedure ProcUpdateGallery

@id_gambar char(25),

@gambar varbinary(max) as

update gmbr_mhsiswa set gambar=@gambar where ids=@id_gambar

Uji coba aplikasi diatas dengan mengklik tombol Ubah, kemudian pilih gambar pengganti dan klik ganti, perhatikan hasilnya seperti urutan gambar dibawah ini, contoh kita akan mengganti gambar Penguin pada urutan gambar pertama.

Gambar 10.1. Memilih Gambar

‘13 6 Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

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

Gambar 10.2. Gambar telah terpilih

Gambar 10.3. Gambar paling kiri telah diganti dengan gambar baru

2. Meng-hapus data gambar pada tabel Database

Setelah berhasil melakukan proses penggantian gambar,maka berikutnya akan ditambahkan link untuk melakukan penghapusan gambar, perbedaan dengan sebelumnya adalah tidak adanya halaman perantara untuk memilih gambar pengganti seperti pada proses penggantian gambar.

Untuk dapat melakukan proses penghapusan gambar, tambahkan link hapus pada masing-masing gambar untuk halaman ItemGaleri.jsp dengan cara sbb:

...

<a href="../HapusGaleri?id=<%=ids%>" >Hapus</a>

...

Kemudian, buatlah file Servlet HapusGaleri.java dan tambahkan kode sbb:

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

int ids = Integer.parseInt(id);

out.print(ids);

try {

Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");

Connection con = DriverManager.getConnection("jdbc:odbc:SIA_DS");

String Query = "Exec ProcHapusGallery ?";

PreparedStatement stmt = con.prepareStatement(Query);

stmt.setInt(1, ids);

int result = stmt.executeUpdate();

if(result > 0)

out.println("Uploaded successfully !");

else

out.println("Uploaded Error !");

con.close();

response.sendRedirect("view/ItemGaleri.jsp");

} catch (SQLException ex) {

Logger.getLogger(HapusGaleri.class.getName()).log(Level.SEVERE, null, ex);

} catch (ClassNotFoundException ex) {

Logger.getLogger(SaveGallery.class.getName()).log(Level.SEVERE, null, ex);

} finally { out.close();

}

Lalu tambahkan juga kode untuk proses penghapusan menggunakan prosedur dengan kode sbb : create procedure ProcHapusGallery

@ids int as

begin

delete from gmbr_mhsiswa where ids=@ids

end

Kemudian jalan aplikasi, agar tampak seperti gambar dibawah ini, klil hyperlink Hapus, dan perhatikan hasilnya. Contoh gambar dibawah ini akan dihapus gambar koala yang berjumlah lebih dari satu.

‘13 8 Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

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

Latihan

1. Dari soal pada modul sebelumnya, tambahkan hyperlink untuk ubah dan hapus gambar pada halaman profil dosen

2. Buatlah kelas untuk masing-masing proses

3. Pastikan pengguna tidak perlu repot melakukan input data kecuali upload gambar saja

4. Buat prosedur untuk ubah maupun hapus gambar 5. Uji Coba aplikasi

Daftar Pustaka

6. Hans Bergsten, . 2002. JavaServer Pages™, 2nd Edition. O'Reilly

MODUL PERKULIAHAN

Pemrogramam Web Enterprise

JSP dan Database

Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh Ilmu Komputer Sistem Informasi

09

⁸⁷⁰⁴⁰ ^{Tim Dosen}

Abstract Kompetensi

Tag Form

• jsp dan database mahasiswa diharapkan mampu:

1. menghubungkan JSP dengan database

‘13 2 Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

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

JSP dan database

Servlet

6. Konsep Dasar Servlet

Servlet merupakan kelas yang didefinisikan dalam java dan digunakan untuk meningkatkan kemampuan server web dalam menangani request dan response dari klien. Inisialisasi kode servlet hanya dijalankan sekali. Servlet juga mewarisi seluruh fitur bahasa pemrograman Java, seperti semua kelas pada java standar (j2se), servlet juga bebas platform dan dapat digunakan pada sistem operasi yang berbeda.

Servlet dapat menerima request dan menghasilkan response melalui protokol komunikasi yang berbeda.

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

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

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

6. Instance Persistence : Servlet membantu meningkatkan kinerja sistem dengan mencegah tingkat pengaksesan sumber daya secara berulang-ulang.

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

4. Digunakan dalam sebuah sistem penjualan online yang mengkonfirmasi pemesanan penjualan kepada klien sesuai permintaan pemesanan.

5. Servlet dapat dipakai bersama-sama dengan applet yang dapat menyajikan komponen GUI untuk menerima response dari pengguna. Request dari pengguna yang diproses oleh applet dikirimkan ke Servlet untuk diproses lebih lanjut, yang memungkinkan untuk menyajikan tampilan yang lebih menarik, namun servlet tidak dapat menyajikan komponen GUI java (baik Swing maupun AWT).

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

Servlet dapat dipakai dalam proses load-balancing dimana request akan diteruskan secara berantai atau servlet dapat dipakai sebagai sebuah filter untuk memilah-milah request yang ditujukan kepada salah satu dari multi target. Servlet menerima seluruh jenis request dan meneruskannya ke target lainya, dapat berupa servlet juga, jsp atau resource lainnya.

7. Memulai Servlet

Buat sebuah project baru dengan nama ContohServlet, pada project tersebut tambahkan sebuah kelas servlet yang baru, beri nama “HalloServlet” seperti gambar

8.1. kemudian klik Next dan tandai “Add Information to deployment descriptor(web.xml)” agar servlet dapat dikenali dengan nama dan alamat URL nya seperti gambar 8.2.

Gambar 8.1. HalloServlet

Gambar 8.2. Menambahkan servlet ke deployment descriptor

Pada halaman servlet yang muncul, hapus komentar di dalam metode processRequest dan ganti dengan :

out.println("<H1>Hallo Servlet</H1>");

Jalankan aplikasi dengan klik kanan pada File HalloServlet dan pilih Run atau dapat dengan menuliskan URL pada browser :

http://localhost:8084/ContohServlet/HalloServlet

Pastikan proyek telah dideploy jika anda ingin menuliskan URL diatas secara manual pada browser.

Keterangan untuk URL diatas adalah sbb :

 http: = protokol

 localhost = alamat server

 8084 = alamat port yang digunakan

‘13 4 Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

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

 ContohServlet = nama Aplikasi / Project

 HalloServlet = nama file servlet

JSP dapat digunakan untuk meneruskan proses ke halaman servlet menggunakan metode sendRedirect pada kelas Response.

Pada halaman index.jsp tambahkan kode untuk meneruskan proses ke halaman servlet sbb:

response.sendRedirect("HalloServlet");

8. Operasi Sederhana menggunakan Servlet

Contoh operasi sederhana berbasis bahasa Java Standar menggunakan servlet disini misalkan mencetak angka dan menuliskan hasil pemangkatan angka 3 dari bilangan-bilangan tersebut pada standar output browser.

Buatlah sebuah file kelas servlet baru, misalkan diberi nama pangkatTiga.java, lalu tuliskan kode dibawah ini :

try {

out.println("<H1>Bilangan Pangkat Tiga 1 sampai dengan 10</H1>");

out.println("<TABLE BORDER=1 ALIGN='CENTER'>");

out.println("<TR><TD>Bilangan</TD><TD>Hasil Pangkat 3</TD></TR>");

for(int i=0;i<=10;i++) {

out.println("<TR><TD>" + i + "</TD>");

out.print("<TD>"+ Math.pow(3, i) +"</TD></TR>");

}

out.println("</TABLE>");

} finally { out.close();

}

Hasilnya akan tampak seperti gambar 8.3.

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>

<table>

Username : </td><td><Input type="text"

name="username"></input>

</td>

</tr>

Password :</td><td><input type="password"

name="pass"></input></td>

</tr>

</tr>

</table>

‘13 6 Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

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

</form>

Kemudian buat sebuah file servlet dengan nama “welcome.java” dan isikan kode dibawah ini :

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

out.println("Selamat Datang "+ data);

Uji coba halaman FormLogin.jsp, masukkan data, maka hasilnya akan tampak seperti gambar 8.4 dan 8.5.

Gambar 8.4. FormLogin.jsp

Gambar 8.5. Halaman Welcome

Semua metode yang dapat digunakan pada halaman servlet sama seperti JSP, hanya saja pada servlet setiap metode yang akan dipanggil harus melalui objek yang harus terlebih dahulu dibuat dari kelas-kelas dimana metode tersebut berada. Sebagai contoh untuk session dengan melakukan koneksi ke database dan mencari username maupun password yang valid dapat digunakan kode dibawah ini pada kelas welcome.java

HttpSession sesion = request.getSession();

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

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

try {

Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");

Connection con = DriverManager.getConnection("jdbc:odbc:SIA_DS");

String Query = "select * from login where username='"+username+"' and password='"+password+"'";

Statement stmt = con.createStatement();

ResultSet rs = stmt.executeQuery(Query);

if(rs.next()) {

String nama = rs.getString(1);

// String pass = rs.getString(2);

sesion.setAttribute("nama", nama);

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

‘13 8 Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

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

6. Buatlah sebuah halaman Servlet dengan nama “GaleriMahasiswa” yang dapat digunakan untuk menampilkan gambar, kode untuk menampilkan gambar pada halaman servlet adalah sbb :

try {

Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");

Connection con =

DriverManager.getConnection("jdbc:odbc:SIA_DS");

String Query = "select gambar from gmbr_mhsiswa";

Statement st1=con.createStatement();

ResultSet rs1 = st1.executeQuery(Query);

String imgLen="";

if(rs1.next()) {

imgLen = rs1.getString(1);

System.out.println(imgLen.length());

}

rs1 = st1.executeQuery(Query);

if(rs1.next()) {

int len = imgLen.length();

byte [] rb = new byte[len];

InputStream readImg = rs1.getBinaryStream(1);

int index=readImg.read(rb, 0, len);

System.out.println("index "+index);

st1.close();

response.reset();

response.setContentType("image/jpg");

response.getOutputStream().write(rb,0,len);

response.getOutputStream().flush();

} }

catch (Exception e)

{

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 :

‘13 10 Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

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

Sekarang tuliskanlah syntax seperti di bawah ini:

<%-Document : index Created on : Sep 11, 2012, 9:54:12 AM Author : Acchan --%><%@ page import="java.sql.*" %>

<%@ page import="java.io.*" %><html><head>

<title>File</title> </head> <body> <%

try {String Host = "jdbc:mysql://localhost:3306/school";Connection connection = null;Statement statement = null;ResultSet rs = null;Class.forName("com.mysql.jdbc.Driver");connection = DriverManager.getConnection(Host, "root", "");statement =

connection.createStatement();String Data = "select * from student";rs = statement.executeQuery(Data);

%> <TABLE border="1">

<trwidth="10"

bgcolor="#9979"><td>NIS</td><td>Nama</td><td>Alamat</td><td>Email</td><td>Pesan</t d>

</tr><%while (rs.next()) {%><TR>

<TD><%=rs.getString("NIS")%></TD><TD><%=rs.getString("Nama")%></TD><TD><%=rs.

getString("Alamat")%></TD><TD><%=rs.getString("Email")%></TD><TD><%=rs.getString(

"Pesan")%></TD>

</TR><% } %></table><%rs.close();statement.close();connection.close();

} catch (Exception ex) { out.println("Can't connect to database.");

} </body> </html> Syntax-syntax JSP di taruh diantara <%...%> Mungkin kelihatannya syntax tersebut sangatlah banyak, tapi tenang saja saya akan menjelaskan syntax-syntax di atas. Pertama

<%-

Document : index //nama file Created on : Sep 11, 2012, 9:54:12 AM //Dibuat pada Author : Acchan //nama author

--%>

Sebuah komentar pada JSP diawali dengan <%--dan diakhiri dengan --%>

Kedua

<%@ page import="java.sql.*" %>

<%@ page import="java.io.*" %>

Ini adalah syntax yang digunakan untuk mengambil java IO dan SQL dan tanda * (bintang) pada java.sql.* atau java.io.* ini berarti mengambil semua syntax.

Ketiga Try

Syntax ini hampirsama dengan syntax percabangan, berikut ini adalah syntax mentahnya:

Try{

}catch(Exception e){

}

Keempat

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

<%--Digunakan untuk membuat kolom NIS, Nama, Alamat, Email, Pesan--%> <% while (rs.next()) {

<%--Digunakan untuk meresult atau menambahkan semua field yang ada pada database --%>

<TD><%=rs.getString("Nama")%></TD><TD><%=rs.getString("Alamat")%></TD><TD><%

=rs.getString("Email")%></TD><TD><%=rs.getString("Pesan")%></TD>

</TR>

<%--Digunakan untuk membuat kolom dan baris sesuai banyaknya data yang ada pada database--%>

<% } %></table><%rs.close();statement.close();

connection.close();

<%--Digunakan untuk menutup semua koneksi--%>

} catch (Exception ex) {

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

‘13 12 Pemrogramn Web Enterprise Pusat Bahan Ajar dan eLearning

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

Dan jika gagal maka akan tampil seperti ini: Sedikit-demi sedikit anda harus menjadi lebih baik dan semoga menjadi lebih baik diantara yang paling baik. Sampai bertemu diartikel selanjutnya

Latihan

1. Sebutkan parameter dalam pembuatan form JSP ? 2. Sebutkan tag-tag dalam pembuatan form ?

3. Buat sebuah program aplikasi form guestbook

Daftar Pustaka

7. Hans Bergsten, . 2002. JavaServer Pages™, 2nd Edition. O'Reilly

MODUL PERKULIAHAN

Pemrogramam

Web Enterprise

Dalam dokumen Pemrogramam Web Enterprise (Halaman 102-123)