String kueri = "Select * from data_produk"
advertisement
MODUL KULIAH
KELAS KARYAWAN – STTI NIIT I-TECH
Mata Kuliah
Pemrograman Berorientasi Object Lanjut
Semester
Genap 2012/2013
Kelas
Karyawan
Dosen
Muhammad Bagir MTI
Pertemuan : 12(Dua Belas)
Waktu : Minggu, 19 Mei 2013
Modul
12(Dua Belas)
Topik
J2EE(JSP)
Sub Topik
Operasi Gambar dan Database
Menampilkan
Berkas
Gambar
dari
Folder
dan
Database
1. Mahasiswa dapat melakukan Menampilkan Gambar
dari Folder dan Database
@copyright 2013, Muhammad Bagir, MTI. Modul Perkuliahan Pemrograman Berorientasi Object
Lanjut, STTI I-Tech Semester Genap 2012-2013
1. Menampilkan Gambar
Pada modul sebelumnya telah dibahas cara mengupload berkas gambar
dan data ke dalam folder dan database, pada modul kali ini akan dibahas
teknik menampilkan gambar yang sudah diuploadkan tersebut dalam
bentuk galery yang dapat dipilih oleh pengguna. Berkas gambar akan
dapat dilihat oleh pengguna yang memilih menu order pada sebelah kiri
browser.
Untuk menampilkan gambar yang sudah diuploadkan pada browser
lakukan hal-hal sebagai berikut :
-
Buat halaman baru dengan nama order.jsp pada folder isi
-
Kemudian tambahkan kode dibawah ini :
<%-Document
: order
Created on : May 18, 2013, 6:40:57 AM
Author
: bagir
--%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Statement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html; charset=UTF-8">
<title>Menu Pembelian</title>
</head>
<body>
<h1>Silahkan
pilih
menu
yang
anda
inginkan</h1>
<br/>
<table>
<%
Class.forName("com.mysql.jdbc.Driver");
@copyright 2013, Muhammad Bagir, MTI. Modul Perkuliahan Pemrograman Berorientasi Object
Lanjut, STTI I-Tech Semester Genap 2012-2013
String
url
=
"jdbc:mysql://localhost:3306/simtransaksi";
Connection
koneksi
=
DriverManager.getConnection(url,"root","");
//tambahan melakukan proses input
Statement stmt = koneksi.createStatement();
String kueri = "Select * from data_produk";
ResultSet hasil = stmt.executeQuery(kueri);
while (hasil.next())
{
int id=hasil.getInt(1);
String nm_prdk=hasil.getString(2);
String jns_prdk=hasil.getString(3);
String harga=hasil.getString(4);
String nm_gmbr=hasil.getString(6);
%>
<tr>
<td><img
src='../gambar/<%=nm_gmbr%>'
width="120" height="120"/></td>
<td>
<%=nm_prdk%><br/>
<%=jns_prdk%><br/>
<%=harga%><br/></td>
</tr>
<%
}
%>
</table>
</body>
</html>
@copyright 2013, Muhammad Bagir, MTI. Modul Perkuliahan Pemrograman Berorientasi Object
Lanjut, STTI I-Tech Semester Genap 2012-2013
2. Menambahkan link pada gambar
Pada bagian sub bab ini akan dilakukan penambahan link pada gambar,
agar data dapat dilihat lebih teliti, untuk itu lakukan langkah sebagai
berikut :
1. Tambahkan link pada kode diatas dengan rincian sebagai berikut :
....
<td><a
href="detailProduk.jsp?id=<%=id%>"><img
src='../gambar/<%=nm_gmbr%>'
width="120"
height="120"/></a></td>
...
2. Buat
dokumen
jsp
baru
pada
folder
isi
dengan
nama
detailProduk.jsp
3. Kemudian tambahkan kode dibawah ini :
<%-Document
: detailProduk
Created on : May 18, 2013, 7:12:38 AM
Author
: bagir
--%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Statement"%>
<%@page import="java.sql.Connection"%>
<%@page import="java.sql.DriverManager"%>
<%@page
contentType="text/html"
pageEncoding="UTF-
8"%>
<!DOCTYPE html>
<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html; charset=UTF-8">
<title>Data Produk </title>
</head>
<body>
<table>
<%
String ids = request.getParameter("id");
@copyright 2013, Muhammad Bagir, MTI. Modul Perkuliahan Pemrograman Berorientasi Object
Lanjut, STTI I-Tech Semester Genap 2012-2013
int id=Integer.parseInt(ids);
Class.forName("com.mysql.jdbc.Driver");
String
url
=
"jdbc:mysql://localhost:3306/simtransaksi";
Connection
koneksi
=
DriverManager.getConnection(url,"root","");
//tambahan melakukan proses input
Statement stmt = koneksi.createStatement();
String kueri = "Select * from data_produk
where id_produk="+id;
ResultSet hasil = stmt.executeQuery(kueri);
if (hasil.next())
{
String nm_prdk=hasil.getString(2);
String jns_prdk=hasil.getString(3);
String harga=hasil.getString(4);
String nm_gmbr=hasil.getString(6);
%>
<tr>
<td><img
src='../gambar/<%=nm_gmbr%>'
width="400" height="300"/></a></td>
<td>
<%=nm_prdk%><br/>
<%=jns_prdk%><br/>
<%=harga%><br/></td>
</tr>
<%
}
%>
</table>
</body>
</html>
Uji Aplikasi dan perhatikan hasilnya.
@copyright 2013, Muhammad Bagir, MTI. Modul Perkuliahan Pemrograman Berorientasi Object
Lanjut, STTI I-Tech Semester Genap 2012-2013
3. Menambahkan komponen Propinsi pada Halaman Registrasi
Sebuah halaman registrasi kurang lengkap jika tidak ditambahkan
komponen yang memudahkan proses penginputan lokasi alamat dimulai
dari propinsi, kota, kabupaten maupun kelurahan. Untuk itu lakukan
langkah-langkah sbb:
1. Buka halaman register.jsp pada folder isi.
2. Setelah Alamat tambahkan kode HTML seperti dibawah ini :
<tr><td>Propinsi </td><td>:
<select
id="propinsi"
name="propinsi"
onchange="rubah(this.value)">
<option value="-1">–Please Choose One–
</option>
<%
Class.forName("com.mysql.jdbc.Driver");
String
url
=
"jdbc:mysql://localhost:3306/simtransaksi";
Connection
koneksi
=
DriverManager.getConnection(url,"root","");
//tambahan melakukan proses input
Statement stmt = koneksi.createStatement();
String
kueri
=
"Select
*
from
t_daerah_indonesia where idparent='0'";
ResultSet hasil = stmt.executeQuery(kueri);
while(hasil.next())
{
String prop = hasil.getString(3);
idnamakota = hasil.getString(2);
%>
<option
value="<%=idnamakota%>"><%=prop%></option>
<%
}
koneksi.close();
%>
@copyright 2013, Muhammad Bagir, MTI. Modul Perkuliahan Pemrograman Berorientasi Object
Lanjut, STTI I-Tech Semester Genap 2012-2013
</select></td></tr>
<tr><td>Kabupaten/Kota </td>
<td><div id="namaKota">
</div>
</td></tr>
<tr><td>Kecamatan </td><td>
<div id="namaKec">
</div>
</td></tr>
<tr><td>Kelurahan </td><td>
<div id="namaKel">
</div>
</td></tr>
3. Tambahkan sebuah tabel baru dengan nama ‘t_daerah_indonesia’
dengan kolom-kolom sbb : id,idnama,nama,idparent. Lalu masukkan
data dari data yang telah diperoleh dari e-campus.
4. Ujicoba aplikasi diatas untuk menampilkan data propinsi terlebih
dahulu.
5. Untuk menampilkan data kota, kecamatan dan kelurahan, lakukan
langkah-langkah sbb:
a. Pada halaman registrasi.jsp, tambahkan kode javascript
dibawah ini :
<script type="text/javascript">
function createRequestObject() {
var ro;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
ro = new ActiveXObject("Microsoft.XMLHTTP");
}else{
ro = new XMLHttpRequest();
}
return ro;
}
var xmlhttp = createRequestObject();
@copyright 2013, Muhammad Bagir, MTI. Modul Perkuliahan Pemrograman Berorientasi Object
Lanjut, STTI I-Tech Semester Genap 2012-2013
function rubah(str)
{
var url = "getData.jsp";
url = url +"?id="+str;
xmlhttp.open("GET",url, true);
xmlhttp.onreadystatechange = function() {
if
((xmlhttp.readyState
==
4)
&&
(xmlhttp.status == 200))
document.getElementById("namaKota").innerHTML
= xmlhttp.responseText;
return false;
}
xmlhttp.send(null);
}
function rubah2(str)
{
var url = "getData2.jsp";
url = url +"?ids="+str;
xmlhttp.open("GET",url, true);
xmlhttp.onreadystatechange = function() {
if
((xmlhttp.readyState
==
4)
&&
(xmlhttp.status == 200))
document.getElementById("namaKec").innerHTML =
xmlhttp.responseText;
return false;
}
xmlhttp.send(null);
}
function rubah3(str)
{
var url = "getData3.jsp";
url = url +"?ids="+str;
xmlhttp.open("GET",url, true);
xmlhttp.onreadystatechange = function() {
@copyright 2013, Muhammad Bagir, MTI. Modul Perkuliahan Pemrograman Berorientasi Object
Lanjut, STTI I-Tech Semester Genap 2012-2013
if
((xmlhttp.readyState
==
4)
&&
(xmlhttp.status == 200))
document.getElementById("namaKel").innerHTML =
xmlhttp.responseText;
return false;
}
xmlhttp.send(null);
}
</script>
b. Tambahkan dokumen jsp baru untuk menampilkan data kota,
kecamatan dan kelurahan dengan rincian sbb:
getData.jsp
<%@page
contentType="text/html"
pageEncoding="UTF-8"%>
<%@page
language="java"
import
="java.sql.*"
%>
<html>
<head>
</head>
</html>
<%
String idAP=request.getParameter("id");
response.setContentType("text/html");
response.setHeader("Cache-Control","nocache");
try {
String
buffer=":
<select
name='namaKota'
onchange='rubah2(this.value)'><option value='1'>"
+ "–Please Choose One–</option>";
try {
Class.forName("com.mysql.jdbc.Driver").newInst
ance();
}
catch(ClassNotFoundException e){
}
@copyright 2013, Muhammad Bagir, MTI. Modul Perkuliahan Pemrograman Berorientasi Object
Lanjut, STTI I-Tech Semester Genap 2012-2013
String
dbURL
=
"jdbc:mysql://localhost:3306/simtransaksi";
java.sql.Connection dbCon;
dbCon
=
DriverManager.getConnection(dbURL,"root","");
Statement stmt = dbCon.createStatement();
String
query
=
"Select
*
from
t_daerah_indonesia"
+ " where idparent='"+ idAP +"'";
System.out.println(query);
ResultSet rs = stmt.executeQuery(query);
while(rs.next()){
buffer=buffer+"<option
value='"+rs.getString(2)+"'>"+rs.getString(3)+
"</option>";
}
buffer=buffer+"</select>";
response.getWriter().println(buffer);
}
catch(Exception e){
response.getWriter().println(e);
}
%>
getData2.jsp
<%@page
contentType="text/html"
pageEncoding="UTF-8"%>
<%@page
language="java"
import
="java.sql.*"
%>
<%
String idAP=request.getParameter("ids");
response.setContentType("text/html");
response.setHeader("Cache-Control","nocache");
try {
@copyright 2013, Muhammad Bagir, MTI. Modul Perkuliahan Pemrograman Berorientasi Object
Lanjut, STTI I-Tech Semester Genap 2012-2013
String
buffer=":
<select
name='namaKec'
onchange='rubah3(this.value)'
><option
value='-1'>"
+ "–Please Choose One–</option>";
try {
Class.forName("com.mysql.jdbc.Driver").newInst
ance();
}
catch(ClassNotFoundException e){
}
String
dbURL
=
"jdbc:mysql://localhost:3306/simtransaksi";
java.sql.Connection dbCon;
dbCon
=
DriverManager.getConnection(dbURL,"root","");
Statement stmt = dbCon.createStatement();
String
query
=
"Select
*
from
t_daerah_indonesia"
+ " where idparent='"+ idAP +"'";
System.out.println(query);
ResultSet rs = stmt.executeQuery(query);
while(rs.next()){
buffer=buffer+"<option
value='"+rs.getString(2)+"'>"+rs.getString(3)+
"</option>";
}
buffer=buffer+"</select>";
response.getWriter().println(buffer);
}
catch(Exception e){
response.getWriter().println(e);
}
%>
getData3.jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page language="java" import ="java.sql.*" %>
@copyright 2013, Muhammad Bagir, MTI. Modul Perkuliahan Pemrograman Berorientasi Object
Lanjut, STTI I-Tech Semester Genap 2012-2013
<%
String idAP=request.getParameter("ids");
response.setContentType("text/html");
response.setHeader("Cache-Control","no-cache");
try {
String
buffer=":
<select
name='namaKel'
><option
value='-1'>"
+ "–Please Choose One–</option>";
try {
Class.forName("com.mysql.jdbc.Driver").newInstance();
}
catch(ClassNotFoundException e){
}
String
dbURL
=
"jdbc:mysql://localhost:3306/simtransaksi";
java.sql.Connection dbCon;
dbCon = DriverManager.getConnection(dbURL,"root","");
Statement stmt = dbCon.createStatement();
String query = "Select * from t_daerah_indonesia"
+ " where idparent='"+ idAP +"'";
System.out.println(query);
ResultSet rs = stmt.executeQuery(query);
while(rs.next()){
buffer=buffer+"<option
value='"+rs.getString(2)+"'>"+rs.getString(3)+"</optio
n>";
}
buffer=buffer+"</select>";
response.getWriter().println(buffer);
}
catch(Exception e){
response.getWriter().println(e);
}
%>
@copyright 2013, Muhammad Bagir, MTI. Modul Perkuliahan Pemrograman Berorientasi Object
Lanjut, STTI I-Tech Semester Genap 2012-2013
Jalankan Aplikasi, pastikan tampilannya seperti dibawah ini:
@copyright 2013, Muhammad Bagir, MTI. Modul Perkuliahan Pemrograman Berorientasi Object
Lanjut, STTI I-Tech Semester Genap 2012-2013
@copyright 2013, Muhammad Bagir, MTI. Modul Perkuliahan Pemrograman Berorientasi Object
Lanjut, STTI I-Tech Semester Genap 2012-2013