Membuat Buku Tamu Sedehana Dengan JSP MYSQL

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


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 langkahlangkah 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"%> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> JSP Page SMK BAKTI NUSANTARA 666 Cileunyi | Rio Andrianto, S.Kom

8

PRAKTIKUM 4 JSP MYSQL DATABASE CONNECTION

Simple Guest Book

Lihat Komentar Pengguna
Menambah Komentar

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"%> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> Menambah Komentar << Halaman Awal << Lihat Buku Tamu
MENAMBAH KOMENTAR PENGGUNA

ISI FORM DIBAWAH INI

10

E-MAIL :

NAMA LENGKAP :

KOMENTAR :

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.*" %> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> Guest Book Halaman Awal Kembali <% 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(); %> <% } }

<%

%> view.jsp <%-Document : view Created on : Sep 15, 2014, 3:49:28 PM Author : Rio Andrianto --%> <%@page contentType="text/html" pageEncoding="UTF-8"%> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> Lihat Buku Tamu Halaman Awal Isi Buku Tamu
SIMPLE GUEST BOOK
<%@page import="java.sql.*" %> <% 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()) { %> <% } %>

E-Mail NAMA LENGKAP KOMENTAR OPERASI

<%= rs.getString("email")%> <%= rs.getString("nama_lengkap")%> <%= rs.getString("komentar")%> " >EDIT / " > HAPUS
<% } catch(Exception ex){ ex.printStackTrace(); %> Ada kesalahan: <% } finally{ if (rs != null) rs.close(); if (st != null) st.close(); if (conn != null) conn.close(); } %>

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.*"%> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> Edit Komentar Tamu SMK BAKTI NUSANTARA 666 Cileunyi | Rio Andrianto, S.Kom

13

<< Halaman Awal
EDIT KOMENTAR PENGGUNA

<% 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()){ %>
UBAH ISI FORM DIBAWAH INI
<% } %> <% } SMK BAKTI NUSANTARA 666 Cileunyi | Rio Andrianto, S.Kom

14

catch(Exception e){ e.printStackTrace(); } %>

E-MAIL : " readonly>

NAMA LENGKAP : ">

KOMENTAR : <%=rs.getString("komentar")%>

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


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


16

E-MAIL	:	" readonly>
NAMA LENGKAP	:	">
KOMENTAR	:	<%=rs.getString("komentar")%>

Membuat Buku Tamu Sedehana Dengan JSP MYSQL

Recommend Documents

PRAKTIKUM 4 JSP MYSQL DATABASE CONNECTION

Simple Guest Book

MENAMBAH KOMENTAR PENGGUNA

ISI FORM DIBAWAH INI

SIMPLE GUEST BOOK

EDIT KOMENTAR PENGGUNA

UBAH ISI FORM DIBAWAH INI