.jpeg)
Scaffolding (Aplikasi CRUD) merupakan item yang mendasar bagi set iap programmer yang
harus dipelajari dan diketahui. Scaffolding mengandung insert , lihat , update dan menghapus data
dari aplikasi ke dalam database. Jadi secara singkat , scaffolding akan memungkinkan pengguna
untuk memanipulasi basis data melalui aplikasi dengan mudah.
Dalam prakt ikum ini kita akan mempelajari contoh kasus membuat buku tamu sederhana
yang terintegrasi dengan Database M ySQL menggunakan JSP (Java Server Pages). Kebutuhan dalam
prakt ikum kali ini adalah :
1. Java Software Development Kit (JDK).
2. Web Server, di sini kita menggunakan Apache Tomcat.
3. IDE atau editor teks untuk menuliskan program. Tapi di sini saya sarankan untuk
menggunakan IDE NETBEANS 7.X.X atau terbaru
4. Database server, kita akan menggunakan M ySQL
5. M ySQL GUI, sepert i HeidySQL, Navicat atau lainnya.
6. Database Driver, kita akan menggunakan mysql jdbc driver
7. Web browser, IE, M ozilla Firefox, Google Chrome, Opera, Safari dll
Harap diperhat ikan sebelum Anda memulai membuat aplikasi past ikan Aplikasi Database Server
M ySQL anda sudah berjalan. Pada saat ini M ySQL Database server yang akan kita pergunakan sudah
terintegrasi dengan XAM PP maka untuk menjalankan service dari M ySQL buka XAM PP Control Panel
dan past ikan M ySQL dalam keadaan berjalan.
Buka IDE Netbeans dan buat lah project baru dengan nama Buku _Tamu
5
6
M enambahkan Library M ySQL pada Project Buku Tamu
Untuk dapat terhubung dengan M ySQL, kita membutuhkan library tambahan yaitu M ySQL JDBC
Driver yang berfungsi untuk menghubungkan M ySQL dengan Java. Berikut ini adalah langkah-
langkah untuk menambahkan M ySQL JDBC Driver
1. Klik kanan pada folder Libraries pada project anda, sepert i yang terlihat pada gambar
dibawah ini lalu pilih Add Library
7
Pada tampilan jendela diatas, cari dan pilih M yQL JDBC Driver lalu klik Add Library.
8
Database
-- --------------------------------------------------------
-- Host: 127.0.0.1
-- Server version: 5.5.27 - MySQL Community Server
(GPL)
-- Server OS: Win32
-- HeidiSQL Version: 8.3.0.4694
-- --------------------------------------------------------
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET NAMES utf8 */;
/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS,
FOREIGN_KEY_CHECKS=0 */;
/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE,
SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;
-- Dumping database structure for db_guestbook
DROP DATABASE IF EXISTS `db_guestbook`;
CREATE DATABASE IF NOT EXISTS `db_guestbook` /*!40100 DEFAULT
CHARACTER SET latin1 */;
USE `db_guestbook`;
-- Dumping structure for table db_guestbook.t_tamu
DROP TABLE IF EXISTS `t_tamu`;
CREATE TABLE IF NOT EXISTS `t_tamu` (
`email` varchar(50) NOT NULL,
`nama_lengkap` varchar(50) NOT NULL,
`komentar` varchar(255) NOT NULL,
PRIMARY KEY (`email`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
-- Data exporting was unselected.
/*!40101 SET SQL_MODE=IFNULL(@OLD_SQL_MODE, '') */;
/*!40014 SET FOREIGN_KEY_CHECKS=IF(@OLD_FOREIGN_KEY_CHECKS IS
NULL, 1, @OLD_FOREIGN_KEY_CHECKS) */;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
index.jsp
<%--
Document : index
Created on : Sep 15, 2014, 3:39:51 PM
Author : Rio Andrianto
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>JSP Page</title>
</head>
9
<body bgcolor="lightblue">
<center>
<h1>PRAKTIKUM 4 JSP MYSQL DATABASE CONNECTION</h1>
<h1>Simple Guest Book</h1>
<form name="AddUserComment">
<table bgcolor="lightgreen" border="2"
cellspacing="10" cellpadding="20">
<td><center><a href="view.jsp">Lihat Komentar
Pengguna</a><br><center></td>
<td><center><a href="add.jsp">Menambah
Komentar</a><br><center></td>
</table>
</form>
</center>
</html>
style.css
/*
To change this license header, choose License Headers in Project
Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : Sep 15, 2014, 3:39:18 PM
Author : Rio Andrianto
*/
root {
display: block;
}
body {
font-family: Century, Malgun Gothic, sans-serif;
font-size: smaller;
padding: 70px;
color: navy;
}
h1 {
text-align: center;
letter-spacing: 6px;
font-size: 1.8em;
color: darkred;
font-weight: normal;
width: 450px;
}
table {
width: 610px;
padding: 4px;
background-color: darkkhaki;
}
th {
text-align: center;
border-bottom: 2px solid;
10
}
td {
padding: 8px;
}
a:link {
color: #000000;
font-weight: normal;
text-decoration: none;
}
a:link:hover {
color: #be7429;
font-weight: normal;
text-decoration: underline;
}
add.jsp
<%--
Document : add
Created on : Sep 16, 2014, 12:46:21 AM
Author : Rio Andrianto
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<title>Menambah Komentar</title>
<link rel="stylesheet" type="text/css" href="style.css">
<a href="index.jsp"><< Halaman Awal</a>
<a href="view.jsp"><< Lihat Buku Tamu</a>
</head>
<body>
<center>
<h1>MENAMBAH KOMENTAR PENGGUNA</h1>
<form action="addinsert.jsp">
<h2>ISI FORM DIBAWAH INI</h2>
<table>
<tr>
<td>E-MAIL</td>
<td>:</td>
<td><input name="f_email" type="text"
size="40"></td>
</tr>
<tr>
<td>NAMA LENGKAP</td>
<td>:</td>
<td><input name="f_nama" type="text"
size="25"></td>
</tr>
<tr>
11
<td>KOMENTAR</td>
<td>:</td>
<td><textarea name="f_komentar" rows="6"
width="200"></textarea></td>
</tr>
<td><input type="submit"
value="Simpan"></input></td>
</table>
</form>
</center>
</body>
</html>
addinsert.jsp
<%--
Document : addinsert
Created on : Sep 16, 2014, 8:42:20 AM
Author : Rio Andrianto
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="java.sql.*" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<title>Guest Book</title>
<link rel="stylesheet" type="text/css" href="style.css">
<a href="index.jsp">Halaman Awal</a>
<a href="add.jsp">Kembali</a>
</head>
<body>
<%
if ((request.getParameter("f_email") != null )
&& (request.getParameter("f_nama") != null )
&& (request.getParameter("f_komentar") != null )
)
{
Connection conn = null;
Statement st = null;
try
{
Class.forName("org.gjt.mm.mysql.Driver").newInstance();
conn =
DriverManager.getConnection("jdbc:mysql://localhost:3306/db_guestb
ook", "root", "");
st = conn.createStatement();
st.executeUpdate("insert into t_tamu
(email, nama_lengkap, komentar) VALUES ('" +
request.getParameter("f_email") + "', '"
+ request.getParameter("f_nama") + "', '"
12
+ request.getParameter("f_komentar") +
"')");
%> Proses Simpan Berhasil. <%
}
catch (Exception e)
{
%> Ada Kesalahan. <%
e.printStackTrace();
%> <%
}
}
%>
</body>
</html>
view.jsp
<%--
Document : view
Created on : Sep 15, 2014, 3:49:28 PM
Author : Rio Andrianto
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<title>Lihat Buku Tamu</title>
<link rel="stylesheet" type="text/css" href="style.css">
<a href="index.jsp">Halaman Awal</a>
<a href="add.jsp">Isi Buku Tamu</a>
</head>
<body><center>
<h1>SIMPLE GUEST BOOK</h1>
<%@page import="java.sql.*" %>
<TABLE BORDER="1" width="75%">
<TR>
<TH>E-Mail</TH>
<TH>NAMA LENGKAP</TH>
<TH>KOMENTAR</TH>
<TH>OPERASI</TH>
</TR>
<%
Connection conn = null;
Statement st = null;
ResultSet rs = null;
try{
Class.forName("org.gjt.mm.mysql.Driver").newInstance();
13
conn =
DriverManager.getConnection("jdbc:mysql://localhost:3306/db_guestb
ook", "root", "");
st = conn.createStatement();
rs = st.executeQuery("select * from t_tamu");
while(rs.next()) {
%>
<TR>
<TD><%= rs.getString("email")%></TD>
<TD><%= rs.getString("nama_lengkap")%></TD>
<TD><%= rs.getString("komentar")%></TD>
<TD><a
href="edit.jsp?u=<%=rs.getString("email")%>" >EDIT</a> / <a
href="delete.jsp?d=<%=rs.getString("email")%>" > HAPUS</a></TD>
</TR>
<% } %>
</TABLE>
<% }
catch(Exception ex){
ex.printStackTrace();
%>
</TABLE>
Ada kesalahan:
<%
}
finally{
if (rs != null) rs.close();
if (st != null) st.close();
if (conn != null) conn.close();
}
%>
</center>
</body>
</html>
edit.jsp
<%--
Document : edit
Created on : Sep 16, 2014, 12:46:21 AM
Author : Rio Andrianto
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="java.sql.*"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<title>Edit Komentar Tamu</title>
14
<link rel="stylesheet" type="text/css" href="style.css">
<a href="index.jsp"><< Halaman Awal</a>
</head>
<body>
<center>
<h1>EDIT KOMENTAR PENGGUNA</h1>
<form action="update.jsp">
<%
Connection con = null;
String url = "jdbc:mysql://localhost:3306/";
String db = "db_guestbook";
String driver = "com.mysql.jdbc.Driver";
String pass = "";
int sumcount=0;
String email=request.getParameter("u");
Statement st;
try{
Class.forName(driver).newInstance();
con =
DriverManager.getConnection(url+db,"root",pass);
String query = "select * from t_tamu where
email='"+email+"'";
st = con.createStatement();
ResultSet rs = st.executeQuery(query);
%>
<%
while(rs.next()){
%>
<h2>UBAH ISI FORM DIBAWAH INI</h2>
<table>
<tr>
<td>E-MAIL</td>
<td>:</td>
<td><input name="f_email" type="text"
size="40" value="<%=rs.getString("email")%>" readonly></td>
</tr>
<tr>
<td>NAMA LENGKAP</td>
<td>:</td>
<td><input name="f_nama" type="text"
size="25" value="<%=rs.getString("nama_lengkap")%>"></td>
</tr>
<tr>
<td>KOMENTAR</td>
<td>:</td>
<td><textarea name="f_komentar" rows="6"
width="200"><%=rs.getString("komentar")%></textarea></td>
</tr>
<td><input type="submit"
value="Update"></input></td>
<%
}
%>
<%
}
15
catch(Exception e){
e.printStackTrace();
}
%>
</table>
</form>
</center>
</body>
</html>
update.jsp
<%--
Document : update
Created on : Sep 22, 2014, 12:13:35 AM
Author : Rio Andrianto
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="java.sql.*"%>
<%
Connection con = null;
String url = "jdbc:mysql://localhost:3306/";
String db = "db_guestbook";
String driver = "com.mysql.jdbc.Driver";
String s=null;
String pass = "";
try{
Class.forName(driver);
con = DriverManager.getConnection(url+db,"root",pass);
try{
Statement st = con.createStatement();
String email=request.getParameter("f_email");
String nama=request.getParameter("f_nama");
String komentar=request.getParameter("f_komentar");
int qedit = st.executeUpdate("update t_tamu set
nama_lengkap='"+nama+"',komentar='"+komentar+"' where
email='"+email+"'");
st = con.createStatement();
response.sendRedirect("view.jsp");
}
catch (SQLException ex){
System.out.println("SQL statement is not executed!");
}
}
catch(Exception e){
System.out.println(e);
}
%>
16
delete.jsp
<%--
Document : delete
Created on : Sep 20, 2014, 10:03:18 PM
Author : Rio Andrianto
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="java.sql.*"%>
<%
Connection con = null;
String url = "jdbc:mysql://localhost:3306/";;
String db = "db_guestbook";
String driver = "com.mysql.jdbc.Driver";
String s=null;
String pass = "";
try{
Class.forName(driver);
con = DriverManager.getConnection(url+db,"root",pass);
try{
Statement st = con.createStatement();
String email=request.getParameter("d");
int qhapus = st.executeUpdate("delete from t_tamu where
email='"+email+"'");
st = con.createStatement();
response.sendRedirect("view.jsp");
}
catch (SQLException ex){
System.out.println("SQL statement is not executed!");
}
}
catch(Exception e){
System.out.println(e);
}
%>
R
.jpeg&description=JavaScript mysql ){kind=link}