Project Aplikasi JSP Buku Tamu

2014
Membuat Buku Tamu

Sedehana Dengan JSP
MYSQL
Modul Pertemuan 4 - Java Server Pages
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
1
Hasil akhir praktikum ini adalah sebagai berikut :
Halaman Index
Halaman Lihat Komentar Pengguna
2
Halaman Menambah Komentar
Halaman Edit Komentar Pengguna
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
4
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
6
Pada tampilan jendela diatas, cari dan pilih MyQL JDBC Driver lalu klik Add Library.
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>
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
*/
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;
9
}
td {
padding: 8px;
}
a:link {
color: #000000;
text-decoration: none;
}
a:link:hover {
color: #be7429;
text-decoration: underline;
}
add.jsp
<%--
Document : add
Created on : Sep 16, 2014, 12:46:21 AM
--%>

<!DOCTYPE html>
<html>
<head>
charset=UTF-8">
<title>Menambah Komentar</title>
<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>
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
--%>

<%@page import="java.sql.*" %>
<!DOCTYPE html>
<html>
<head>
charset=UTF-8">
<title>Guest Book</title>
<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") + "', '"
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
--%>

<!DOCTYPE html>
<html>
<head>
charset=UTF-8">
<title>Lihat Buku Tamu</title>
<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();
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
--%>

<%@page import="java.sql.*"%>
<!DOCTYPE html>
<html>
<head>
charset=UTF-8">
<title>Edit Komentar Tamu</title>
13
<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>
<%
}
%>
<%
}
14
catch(Exception e){
e.printStackTrace();
}
%>
</table>
</form>
</center>
</body>
</html>
update.jsp
<%--
Document : update
Created on : Sep 22, 2014, 12:13:35 AM
--%>

<%
String url = "jdbc:mysql://localhost:3306/";
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+"'");
response.sendRedirect("view.jsp");
}
catch (SQLException ex){
System.out.println("SQL statement is not executed!");
}
}
catch(Exception e){
System.out.println(e);
}
%>
15
delete.jsp
<%--
Document : delete
Created on : Sep 20, 2014, 10:03:18 PM
--%>

<%
String url = "jdbc:mysql://localhost:3306/";;
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+"'");
response.sendRedirect("view.jsp");
}
catch (SQLException ex){
System.out.println("SQL statement is not executed!");
}
}
catch(Exception e){
System.out.println(e);
}
%>
16

Project Aplikasi JSP Buku Tamu

Diunggah oleh

Informasi Dokumen

Deskripsi:

Hak Cipta

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Deskripsi:

Hak Cipta:

Project Aplikasi JSP Buku Tamu

Diunggah oleh

Deskripsi:

Hak Cipta:

2014

Membuat Buku Tamu

Halaman Lihat Komentar Pengguna

Halaman Edit Komentar Pengguna

/!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT /;

-- Dumping database structure for db_guestbook

-- Dumping structure for table db_guestbook.t_tamu

-- Data exporting was unselected.

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>

Connection conn = null;

%> Proses Simpan Berhasil. <%

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>

Anda mungkin juga menyukai