Anda di halaman 1dari 17

2014

Membuat Buku Tamu


Sedehana Dengan JSP
MYSQL
Modul Pertemuan 4 - Java Server Pages

Rio Andrianto, S.Kom


SMK BAKTI NUSANTARA 666 Cileunyi
1/1/2014
Scaffolding (Aplikasi CRUD) merupakan item yang mendasar bagi setiap 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 praktikum ini kita akan mempelajari contoh kasus membuat buku tamu sederhana
yang terintegrasi dengan Database MySQL menggunakan JSP (Java Server Pages). Kebutuhan dalam
praktikum 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 MySQL
5. MySQL GUI, seperti HeidySQL, Navicat atau lainnya.
6. Database Driver, kita akan menggunakan mysql jdbc driver
7. Web browser, IE, Mozilla Firefox, Google Chrome, Opera, Safari dll

SMK BAKTI NUSANTARA 666 Cileunyi | Rio Andrianto, S.Kom 1


Hasil akhir praktikum ini adalah sebagai berikut :
Halaman Index

Halaman Lihat Komentar Pengguna

SMK BAKTI NUSANTARA 666 Cileunyi | Rio Andrianto, S.Kom 2


Halaman Menambah Komentar

Halaman Edit Komentar Pengguna

SMK BAKTI NUSANTARA 666 Cileunyi | Rio Andrianto, S.Kom 3


Harap diperhatikan sebelum Anda memulai membuat aplikasi pastikan Aplikasi Database Server
MySQL anda sudah berjalan. Pada saat ini MySQL Database server yang akan kita pergunakan sudah
terintegrasi dengan XAMPP maka untuk menjalankan service dari MySQL buka XAMPP Control Panel
dan pastikan MySQL dalam keadaan berjalan.

Buka IDE Netbeans dan buatlah project baru dengan nama Buku _Tamu

SMK BAKTI NUSANTARA 666 Cileunyi | Rio Andrianto, S.Kom 4


SMK BAKTI NUSANTARA 666 Cileunyi | Rio Andrianto, S.Kom 5
Menambahkan Library MySQL pada Project Buku Tamu
Untuk dapat terhubung dengan MySQL, kita membutuhkan library tambahan yaitu MySQL JDBC
Driver yang berfungsi untuk menghubungkan MySQL dengan Java. Berikut ini adalah langkah-
langkah untuk menambahkan MySQL JDBC Driver

1. Klik kanan pada folder Libraries pada project anda, seperti yang terlihat pada gambar
dibawah ini lalu pilih Add Library

SMK BAKTI NUSANTARA 666 Cileunyi | Rio Andrianto, S.Kom 6


Pada tampilan jendela diatas, cari dan pilih MyQL JDBC Driver lalu klik Add Library.

SMK BAKTI NUSANTARA 666 Cileunyi | Rio Andrianto, S.Kom 7


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>

SMK BAKTI NUSANTARA 666 Cileunyi | Rio Andrianto, S.Kom 8


<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;
SMK BAKTI NUSANTARA 666 Cileunyi | Rio Andrianto, S.Kom 9
}

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>

SMK BAKTI NUSANTARA 666 Cileunyi | Rio Andrianto, S.Kom 10


<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") + "', '"

SMK BAKTI NUSANTARA 666 Cileunyi | Rio Andrianto, S.Kom 11


+ 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();

SMK BAKTI NUSANTARA 666 Cileunyi | Rio Andrianto, S.Kom 12


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>

SMK BAKTI NUSANTARA 666 Cileunyi | Rio Andrianto, S.Kom 13


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

SMK BAKTI NUSANTARA 666 Cileunyi | Rio Andrianto, S.Kom 14


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);
}
%>

SMK BAKTI NUSANTARA 666 Cileunyi | Rio Andrianto, S.Kom 15


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);
}
%>

SMK BAKTI NUSANTARA 666 Cileunyi | Rio Andrianto, S.Kom 16

Anda mungkin juga menyukai