Catatan singkat prak pbol

CATATAN SINGKAT
PRAKTIKUM PBOL

oleh:
Edbert Wijaya Irawan

DEPARTEMEN TEKNIK INFORMATIKA
INSTITUT TEKNOLOGI HARAPAN BANGSA
BANDUNG
2013

DAFTAR ISI

DAFTAR ISI........................................................................................................................... i
DAFTAR GAMBAR ............................................................................................................... ii
DAFTAR LISTING ................................................................................................................ iii
BAB 1 PENDAHULUAN ........................................................................................................1
Latar Belakang ................................................................................................................1
Tujuan Penulisan ............................................................................................................1
BAB 2 PENERAPAN MVC DI JSP DAN SERVLET ....................................................................2
BAB 3 SPRING MVC DI NETBEANS ......................................................................................5
Pemberian Style pada Halaman Web ...........................................................................14
Template Views ............................................................................................................17
Membuat Template View dengan Satu atau Lebih View yang Berbeda .......................22
Form di Spring MVC .....................................................................................................24
BAB 4 CRUD DI SPRING MVC DENGAN HIBERNATE..........................................................29
Membuat Halaman Daftar Pelanggan ..........................................................................29
Membuat Halaman Pendaftaran Pelanggan Baru ........................................................34
Membuat Halaman Ubah Data Pelanggan ...................................................................35
Membuat Halaman Hapus Data Pelanggan ..................................................................39

i

DAFTAR GAMBAR

Gambar 1 Add library JSTL .................................................................................................4
Gambar 2 New Project .......................................................................................................5
Gambar 3 Nama Project Baru ............................................................................................6
Gambar 4 Pilih Server.........................................................................................................7
Gambar 5 Pilih Framework MVC ........................................................................................7
Gambar 6 Dispatcher Mapping ..........................................................................................8
Gambar 7 Isi pada Project Sementara ................................................................................9
Gambar 8 Tambah Kelas HomeController ........................................................................10
Gambar 9 Run Project dengan Klik Kanan File JSP ...........................................................12
Gambar 10 Hasil Run Project yang Salah..........................................................................12
Gambar 11 Hasil Memaksa ..............................................................................................13
Gambar 12 Run Project yang Baik dan Benar ...................................................................13
Gambar 13 Hasil Run Project yang Baik dan Benar ..........................................................14
Gambar 14 Sintaks xml Tempat Meletakkan Semua File Resource ..................................15
Gambar 15 Letak File Resource ........................................................................................15
Gambar 16 Hasil Tampilan pada Browser ........................................................................17
Gambar 17 Halaman Beranda dan Halaman Blog ............................................................18
Gambar 18 Template View JSP .........................................................................................18
Gambar 19 Folder tags dan File base.tag .........................................................................19
Gambar 20 Hasil Template View ......................................................................................20
Gambar 21 Tampilan Blog dengan Template ...................................................................22
Gambar 22 Tampilan Halaman Blog dengan Penambahan Style .....................................24
Gambar 23 Form Tambah Pelanggan Sementara .............................................................27
Gambar 24 Hasil Tambah Pelanggan Sementara .............................................................28
Gambar 25 Tambah Library MySQL JDBC Driver ..............................................................30

ii

DAFTAR LISTING

Listing 1 Halaman Index dengan Inputan Nama .................................................................2
Listing 2 Perubahan Isi Method processRequest() .............................................................3
Listing 3 View Hasil Say Hello .............................................................................................3
Listing 4 dispatcher-servlet.xml .........................................................................................9
Listing 5 Membuat Method Handler untuk Halaman Beranda ........................................10
Listing 6 View Halaman Beranda ......................................................................................11
Listing 7 Elemen welcome-file-list ....................................................................................11
Listing 8 Mengubah Style Pada Halaman Beranda ...........................................................15
Listing 9 Penambahan taglib pada index.jsp ....................................................................16
Listing 10 CSS Eksternal dengan <c:url> ...........................................................................16
Listing 11 CSS Eksternal dengan pageContext ..................................................................16
Listing 12 Hasil Akhir index.jsp dengan Penambahan CSS Eksternal ................................16
Listing 13 base.tag............................................................................................................19
Listing 14 Memanfaatkan base.tag pada View index.jsp ..................................................20
Listing 15 Source Tampilan Blog .......................................................................................21
Listing 16 Controller Blog .................................................................................................21
Listing 17 Penambahan Style Dinamis ..............................................................................22
Listing 18 Style pada Halaman Blog..................................................................................23
Listing 19 Form Registrasi Pelanggan ...............................................................................24
Listing 20 Controller Registrasi .........................................................................................25
Listing 21 Kelas Customer ................................................................................................25
Listing 22 Tampilan Hasil Registrasi Pelanggan ................................................................26
Listing 23 Method Handler Tambah Pelanggan Sementara .............................................26
Listing 24 Query Membuat Tabel .....................................................................................29
Listing 25 Konfigurasi Hibernate ......................................................................................30

iii

BAB 1
PENDAHULUAN

Latar Belakang
Catatan singkat ini dibuat bukan sebagai buku pegangan, yang setelah diunduh kemudian
dicetak, lalu hanya dipegang, tetapi justru catatan ini dibuat sebagai bahan bacaan dan
panduan dari Praktikum Pemrograman Berorientasi Objek Lanjut.

Tujuan Penulisan
Seperti yang telah dijelaskan pada subbab sebelumnya, catatan singkat ini dugunakan
sebagai bahan bacaan dan panduan dari Praktikum Pemrograman Berorientasi Objek
Lanjut. Adapun pada catatan singkat ini terdapat panduan mengenai penggunaan JSP dan
Servlet, penerapan MVC (Model Views Controller) pada JSP dan Servlet, penggunaan
framework Spring MVC, di IDE NetBeans, dan penggunaan Hibernate dan Spring MVC.

1

BAB 2
PENERAPAN MVC DI JSP DAN SERVLET

Agar project web kita terlihat rapi susunan file-nya, maka ada baiknya bila kita
menggunakan MVC di dalam project kita. Tujuan MVC adalah untuk memisahkan bagian
model, controller dan view. Pada bagian view, desainer (biasanya desainer tidak
berurusan dengan koding Java) tidak akan dipusingkan oleh sintaks-sintaks Java, misalnya
untuk menerima data dari basis data, karena semua yang berurusan dengan basis data
ada di bagian model, dan lain sebagainya.
1. Buka NetBeans.
2. Klik New Project.
3. Pada bagian Categories, pilih Java Web. Pada bagian Projects, pilih Web
Application, lalu klik Next.
4. Pada bagian Project name, isi dengan BelajarMvcJsp, lalu klik Next.
5. Pilih Server. Pada tutorial ini, server yang digunakan ialah Apache Tomcat
7.0.34.0. Lalu klik Finish.
6. Buka file index.jsp, modifikasi seperti berikut.

Listing 1 Halaman Index dengan Inputan Nama

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<form action="SayHello" method="post">
Your name: <input type="text" name="name">
<button>OK</button>
</form>
</body>
</html>

7. Buat satu file servlet baru sebagai controller, sebut saja servlet SayHello. Caranya,
klik kanan project, pilih New, pilih Servlet.
8. Isi pada bagian Class name dengan SayHello.
9. Isi pada bagian Package com.me.myapp, lalu klik OK.
10. Ganti method processRequest() menjadi seperti berikut.

2

Listing 2 Perubahan Isi Method processRequest()

protected void processRequest(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
try {
String name = request.getParameter("name");
request.setAttribute("name", name);
RequestDispatcher view =
request.getRequestDispatcher("sayhello.jsp");
view.forward(request, response);
} finally {
out.close();
}
}

11. Buat file JSP sebagai view-nya. Caranya, klik kanan folder Web Pages, lalu pilih
New, pilih JSP.
12. Isi pada bagian nama dengan sayhello, lalu klik OK.
13. Isikan dengan source berikut.

Listing 3 View Hasil Say Hello

<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<h1>Hello, ${name}</h1>
</body>
</html>

14. Pada bagian ini kita menggunakan JSTL, maka kita harus menambahkan library
JSTL ke dalam project kita. Klik kanan folder Libraries, pilih Add Library…, pilih JSTL,
klik Add Library.

3

Gambar 1 Add library JSTL

15. Run Project.
16. Selesai? Belum. Masih ada satu masalah yang sangat mengganggu, coba kita buka
link berikut: http://localhost:8084/BelajarMvcJsp/sayhello.jsp. Link tersebut
dapat dibuka, dan tidak ada nama yang diinput muncul di sana. Ini disebabkan
karena tidak ada nama yang diinput pada page sebelumnya dan dianggap null
oleh JSTL. Untuk mengatasi masalah ini, kita pindahkan file sayhello.jsp tadi ke
dalam folder WEB-INF, lalu ganti input String pada method
getRequestDispatcher() menjadi "/WEB-INF/sayhello.jsp".

4

BAB 3
SPRING MVC DI NETBEANS

Pada tutorial ini akan diuraikan cara membuat project dengan Spring MVC di NetBeans.
Adapun NetBeans yang penulis pakai untuk percobaan tersebut adalah NetBeans 7.3.
Mari kita mulai dengan membuat proyek web dengan Spring MVC pertama kita.
1. Buka NetBeans.
2. Klik New Project.
3. Pada bagian Categories, pilih Java Web. Pada bagian Projects, pilih Web
Application, lalu klik Next.

Gambar 2 New Project

4. Pada bagian Project Name, isi dengan BelajarSpringMvc, lalu klik Next.

5

Gambar 3 Nama Project Baru

5. Pilih Server. Pada tutorial ini, server yang digunakan ialah Apache Tomcat
7.0.34.0. Lalu klik Next.

6

Gambar 4 Pilih Server

6. Kasih centang Spring Web MVC pada bagian Frameworks.

Gambar 5 Pilih Framework MVC

7

7. Buka tab Configuration. Pada Dispatcher Mapping, ganti dengan ‘/’.

Gambar 6 Dispatcher Mapping

8. Project baru akan di-generate oleh NetBeans.

8

Gambar 7 Isi pada Project Sementara

9. Buka file web.xml, cari <url-pattern>*.htm</url-pattern>, ganti menjadi
<url-pattern>/</url-pattern>

10. Buka file dispatcher-servlet.xml, ganti isinya dengan apa yang ada tertulis di
listing ini.
Listing 4 dispatcher-servlet.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans:beans xmlns="http://www.springframework.org/schema/mvc"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:beans="http://www.springframework.org/schema/beans"
xmlns:context="http://www.springframework.org/schema/context"
xsi:schemaLocation="http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc.xsd
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd">


<annotation-driven />
<!-- Handles HTTP GET requests for /resources/** by efficiently
serving up static resources in the ${webappRoot}/resources directory ->

9

<resources mapping="/resources/**" location="/resources/" />

<beans:bean
class="org.springframework.web.servlet.view.InternalResourceViewResolv
er">
<beans:property name="prefix" value="/WEB-INF/jsp/" />
<beans:property name="suffix" value=".jsp" />
</beans:bean>
<context:component-scan base-package="com.me.myapp.controller" />
</beans:beans>

11. Buat package baru untuk controller, dengan nama com.me.myapp.controller,
lalu buat kelas controller baru dengan nama HomeController di dalam package
tersebut.

Gambar 8 Tambah Kelas HomeController

12. Buka kelas HomeController, lalu ketikkan seperti berikut.
Listing 5 Membuat Method Handler untuk Halaman Beranda

package com.me.myapp;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

10

@Controller
public class HomeController {
@RequestMapping(value = "/", method = RequestMethod.GET)
public String home() {
return "index";
}
}

13. Buka index.jsp, lalu ganti menjadi seperti berikut.

Listing 6 View Halaman Beranda

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
charset=UTF-8">
<title>Welcome to Spring Web MVC project</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>

14. Buka web.xml, cari elemen xml <web-file-list>, lalu hapus elemen tersebut.
Listing 7 Elemen welcome-file-list

<welcome-file-list>
<welcome-file>redirect.jsp</welcome-file>
</welcome-file-list>

15. Hapus file redirect.jsp di folder WEB-INF.
16. Klik kanan index.jsp, lalu klik Run File

11

Gambar 9 Run Project dengan Klik Kanan File JSP

Gambar 10 Hasil Run Project yang Salah

17. Tidak bisa seperti itu. Sekarang ketikkan di browser http://localhost:8084/
BelajarSpringMvc/home.jsp, lalu tekan Enter.

12

Gambar 11 Hasil Memaksa

18. Jangan memaksa. Mari kita lihat cara yang benar. Klik kanan project
BelajarSpringMvc, lalu klik Run. Perhatikan cara ini beda dengan cara pada
langkah 15.

Gambar 12 Run Project yang Baik dan Benar

19. Hasilnya akan tampak seperti gambar berikut.

13

Gambar 13 Hasil Run Project yang Baik dan Benar

20. Selamat, kita telah berhasil membuat program Hello World dengan menggunakan
Spring MVC di NetBeans!

Pemberian Style pada Halaman Web
Agak sulit untuk menambahkan style ke dalam view yang telah kita buat. Oleh karena itu
perlu kita pelajari. Berikut langkah-langkahnya.
1. Berdasarkan project BelajarSpringMvc tadi, buka file dispatcher-servlet.xml.
2. Perhatikan bagian yang ditunjukkan pada Gambar berikut.

14

Gambar 14 Sintaks xml Tempat Meletakkan Semua File Resource

Di situ ada tertulis mapping="/resources/**", di direktori inilah kita meletakkan
semua style yang akan digunakan di semua file views kita.
3. Buat satu file styles.css di direktori resources tadi. Kemudian tambahkan
source berikut.

Listing 8 Mengubah Style Pada Halaman Beranda

body {
font-family: sans-serif;
color: green;
}

Gambar 15 Letak File Resource

15

4. Buka

file

index.jsp, tambahkan code berikut,
contentType="text/html" pageEncoding="UTF-8"%>.

setelah

<%@page

Listing 9 Penambahan taglib pada index.jsp


5. Tambahkan salah satu dari kedua source berikut pada bagian <head></head>.
Listing 10 CSS Eksternal dengan <c:url>

<link type="text/css" href="<c:url value="/resources/styles.css" />"
rel="stylesheet" />

Listing 11 CSS Eksternal dengan pageContext

<link type="text/css"
href="${pageContext.request.contextPath}/resources/styles.css"
rel="stylesheet" />

6. Misalnya kita menggunakan Listing 10, pastikan hasilnya menjadi seperti berikut.

Listing 12 Hasil Akhir index.jsp dengan Penambahan CSS Eksternal

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
charset=UTF-8">
<title>Welcome to Spring Web MVC project</title>
<link type="text/css" href="<c:url
value="/resources/styles.css" />" rel="stylesheet" />
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>

7. Run project.

16

Gambar 16 Hasil Tampilan pada Browser

Dengan cara yang sama, kita bisa menyisipkan source JavaScript pada view yang telah kita
buat.

Template Views
Sebelum melangkah lebih jauh, adalah baik untuk mempelajari template views di JSP.
Sebenarnya fitur ini bukan fitur bawaan dari framework Spring MVC, melainkan bagian
dari fitur JSP itu sendiri (not hidden but unknown). Untuk memahami apa itu template
views (walau sebenarnya ada namanya, tapi penulis tidak mengetahuinya), adalah baik
untuk memperhatikan dengan saksama dan dalam tempo yang sesingkat-singkatnya
penjelasan berikut.

Saat kita membuat web, biasanya memiliki bagian-bagian yang mirip, bahkan sama,
seperti header dan footer. Misalnya web kita terdiri lebih dari 1 halaman, katakanlah
halaman Beranda dan halaman Blog. Dari kedua halaman itu memiliki bagian yang sama
di source header dan footer-nya. Pada Gambar 17 menunjukkan bahwa terdapat 2
halaman, halaman beranda dan halaman blog, di mana baik halaman beranda dan
halaman blog memiliki bagian header dan footer yang sama, tetapi kontennya berbeda.

17

HOME PAGE

BLOG PAGE

Header

Header

Content of
Home

Content of
Blog Page

Footer

Footer

Gambar 17 Halaman Beranda dan Halaman Blog

Untuk mengurangi waktu kerja yang terbuang percuma hanya untuk menulis sintaks html
header dan footer yang berulang-ulang untuk halaman-halaman web yang lain, maka kita
memerlukan suatu template untuk dipakai berkali-kali, tetapi ada bagian yang bisa dibuat
berbeda. Misalnya template tersebut kita katakan sebagai base (lihat Gambar).
BASE TEMPLATE

Header

Dynamic
content

Footer

Gambar 18 Template View JSP

18

Dengan template ini, kita bisa mempersingkat waktu penulisan header dan footer yang
selalu sama untuk setiap halaman web yang kita buat. Sedangkan untuk kontennya bisa
dibuat berbeda-beda sesuai dengan halaman yang ingin kita buat (diberi label dynamic
content). Selain itu, jika ada perubahan tema tampilan web, misalnya dengan mengganti
css eksternal yang digunakan, bisa langsung mempengaruhi semua halaman web kita
tanpa mengubah satu per satu file jsp yang telah kita buat.
Untuk lebih jelasnya, marilah kita langsung praktik.
1. Dari project Spring MVC yang telah kita buat sebelumnya (BelajarSpringMvc),
buat folder baru dengan nama tags di folder WEB-INF. Bingung? Lihat Gambar.
2. Buat file dengan nama base.tag di folder tags yang telah dibuat tadi.

Gambar 19 Folder tags dan File base.tag

3. Tambahkan potongan source berikut di file base.tag.
Listing 13 base.tag

<%@tag description="Simple Wrapper Tag" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
</head>
<body>
<header>
<h1>My App</h1>
</header>
<jsp:doBody />

19

<footer>
<p>© 2013 My App. All rights reserved.</p>
</footer>
</body>
</html>

4. Buka file index.jsp, ganti dengan source berikut.
Listing 14 Memanfaatkan base.tag pada View index.jsp

<%@taglib prefix="t" tagdir="/WEB-INF/tags"%>
<t:base>
<jsp:body>
<section>
<h2>Ini Beranda</h2>
<p>Hello, World!</p>
</section>
</jsp:body>
</t:base>

5. Run project.

Gambar 20 Hasil Template View

6. Ga percaya dengan apa yang telah dilihat? Percayalah! Lihat page source di
browser yang dipakai.
7. Masih belum percaya? Buat satu file JSP lagi di folder WEB-INF/jsp dengan nama
blog.jsp.

20

8. Tambahkan source seperti berikut.
Listing 15 Source Tampilan Blog

<t:base>
<jsp:body>
<section>
<h2>Ini Blog</h2>
<p>${blogContent}</p>
</section>
</jsp:body>
</t:base>

9. Buka file HomeController.java, tambahkan potongan source berikut.
Listing 16 Controller Blog

package com.me.myapp;
/* Import-import */
@Controller
public class HomeController {
/* Method request handler yang lain */
@RequestMapping(value = "/blog", method = RequestMethod.GET)
public String blog(Model model) {
model.addAttribute("blogContent", "Isi dari blog ini");
return "blog";
}
}

10. Run kembali project-nya.

21

Gambar 21 Tampilan Blog dengan Template

11. Lihat dan pelajari.

Lalu, bagaimana jika kita memiliki satu halaman dengan style yang berbeda, misalnya
dengan tambahan CSS di dalamnya. Jangan khawatir, itu sangatlah mudah. Lanjut ke
subbab berikutnya.

Membuat Template View dengan Satu atau Lebih View yang Berbeda
Seperti permasalahan yang telah diuraikan sebelumnya, sekarang kita akan mencoba
untuk membuat template view dengan satu file view yang memiliki style yang berbeda
dari style di view yang lain.
1. Berdasarkan project yang tadi, buka file base.tag.
2. Tambahkan source menjadi seperti ini.
Listing 17 Penambahan Style Dinamis

<%@tag description="Simple Wrapper Tag" pageEncoding="UTF-8"%>
<%@attribute name="stylesheets" fragment="true"%>
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
<jsp:invoke fragment="stylesheets" />
</head>
<body>
<header>

22

<h1>My App</h1>
</header>
<jsp:doBody />
<footer>
<p>© 2013 My App. All rights reserved.</p>
</footer>
</body>
</html>

3. Buka file blog.jsp, ganti menjadi seperti berikut.
Listing 18 Style pada Halaman Blog

<t:base>
<jsp:attribute name="stylesheets">
<style type="text/css">
.my-blog {
color: blue;
}
</style>
</jsp:attribute>
<jsp:body>
<section>
<h2>Ini Blog</h2>
<p class="my-blog">${blogContent}</p>
</section>
</jsp:body>
</t:base>

4. Run project.

23

Gambar 22 Tampilan Halaman Blog dengan Penambahan Style

Sekarang terdapat perbedaan antara tampilan blog dengan tampilan beranda.

Sekian intermezzo dari penggunaan template view di JSP yang bisa penulis berikan. Perlu
diingat kembali bahwa cara ini bisa digunakan di project JSP biasa tanpa menggunakan
framework Spring MVC, sebab ini memang fitur bawaan dari JSP itu sendiri. Not hidden
but unknown. Semoga bermanfaat.

Form di Spring MVC
Belajar Spring MVC belum lengkap kalau hanya membuat Hello World. Kali ini kita akan
mencoba membuat suatu form registrasi member baru dengan menggunakan framework
Spring MVC. Perlu diperhatikan bahwa semua source yang ditunjukkan pada subbab ini
menggunakan template view seperti yang dijelaskan pada subbab sebelumnya.
1. Buat folder baru di direktori WEB-INF/jsp dengan nama customer.
2. Buat file JSP baru dengan nama register.jsp. Ketikkan source berikut.

Listing 19 Form Registrasi Pelanggan

<t:base>
<jsp:body>
<section>
<form action="<c:url value="/customer/add" />"
method="post">

24

<fieldset>
<legend>Registrasi Pelanggan</legend>
<label>Nama</label><br>
<input type="text" name="name"><br>
<label>Alamat</label><br>
<input type="text" name="address"><br>
<label>Telepon</label><br>
<input type="text" name="phone"><br>
<button>Submit</button>
</fieldset>
</form>
</section>
</jsp:body>
</t:base>

Perhatikan pada elemen form atribut action, terdapat sintaks tidak biasa, yaitu
<c:url />. Sintaks tersebut merupakan sintaks JSTL untuk meng-generate URL
yang ada pada project web kita.
3. Buat kelas CustomerController di package com.me.myapp.controller, lalu
ketikkan source code berikut.
Listing 20 Controller Registrasi

package com.me.myapp.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
@Controller
public class CustomerController {
@RequestMapping(value = "/customer/register", method =
RequestMethod.GET)
public String register() {
return "customer/register";
}
}

4. Belum selesai, kita memerlukan sebuah objek Customer. Buat class Customer
di package com.me.myapp.model, tambahkan atribut-atributnya seperti berikut
(getter dan setter tidak dicantumkan).
Listing 21 Kelas Customer

package com.me.myapp.model;
public class Customer {

25

private String name;
private String address;
private String phone;
/* Getter and setter */
}

5. Buat file addResult.jsp di direktori WEB-INF/customer/, lalu ketikkan source
berikut.
Listing 22 Tampilan Hasil Registrasi Pelanggan

<t:base>
<jsp:body>
<section>
<h2>Pelanggan baru telah ditambahkan</h2>
<p>
Nama: ${customer.name}<br>
Alamat: ${customer.address}<br>
No. Telp: ${customer.phone}<br>
</p>
</section>
</jsp:body>
</t:base>

6. Buka kembali kelas CustomerController, lalu tambahkan method berikut.
Listing 23 Method Handler Tambah Pelanggan Sementara

import com.me.myapp.model.Customer;
/* Import yang lain */
@Controller
/* Method yang lain */
@RequestMapping(value = "/customer/add", method =
RequestMethod.POST)
public String add(
String name, String address, String phone,
Model model) {

26

Customer customer = new Customer();
customer.setName(name);
customer.setAddress(address);
customer.setPhone(phone);
model.addAttribute("customer", customer);
return "customer/addResult";
}
}

7. Run Project, buka http://localhost:8084/BelajarSpringMvc/customer/register.

Gambar 23 Form Tambah Pelanggan Sementara

8.

Isi setiap field-nya, lalu klik Submit.

27

Gambar 24 Hasil Tambah Pelanggan Sementara

28

BAB 4
CRUD DI SPRING MVC DENGAN HIBERNATE

Pada bab sebelumnya kita telah membuat project web sederhana dengan menggunakan
framework Spring MVC, dan telah ditunjukkan pula cara membuat form registrasi
sederhana. Kali ini kita akan mencoba untuk membuat aplikasi web sederhana yang
terdapat CRUD (create, retrieve, update dan delete) di dalamnya dengan menggunakan
framework Hibernate.

Membuat Halaman Daftar Pelanggan
Sebelum melangkah lebih jauh, adalah baik untuk mencoba tutorial sebelumnya, karena
pada praktik kali ini, kita hanya akan melanjutkan dari project sebelumnya.
1. Buat database dengan nama ‘petshop’.
2. Buat tabel-tabelnya:
Listing 24 Query Membuat Tabel

CREATE TABLE `Customers` (
`CustomerID` int(11) NOT NULL AUTO_INCREMENT,
`Name` varchar(50) DEFAULT NULL,
`Address` varchar(100) DEFAULT NULL,
`Phone` varchar(50) DEFAULT NULL,
PRIMARY KEY (`CustomerID`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
CREATE TABLE `Pets` (
`PetID` int(11) NOT NULL AUTO_INCREMENT,
`Name` varchar(50) DEFAULT NULL,
`CustomerID` int(11) DEFAULT NULL,
PRIMARY KEY (`PetID`),
KEY `FK_pets` (`CustomerID`),
CONSTRAINT
`FK_pets`
FOREIGN
KEY
(`CustomerID`)
`Customers` (`CustomerID`) ON DELETE SET NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

REFERENCES

3. Buka project BelajarSpringMvc, lalu buat file hibernate.cfg.xml. Caranya, klik
kanan project, pilih Other…,
4. Pada bagian Categories, pilih Hibernate. Pada bagian File Types, pilih Hibernate
Configuration Wizard. Klik Next. Klik Finish. (Kali ini kita akan mencoba
mengubah secara manual file hibernate.cfg.xml tersebut).
5. Buka file hibernate.cfg.xml, lalu pilih Source (klik tombol Source), lalu ganti
isinya dengan source berikut:

29

Listing 25 Konfigurasi Hibernate

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE hibernate-configuration PUBLIC "-//Hibernate/Hibernate
Configuration DTD 3.0//EN"
"http://hibernate.sourceforge.net/hibernate-configuration-3.0.dtd">
<hibernate-configuration>
<session-factory>
<property
name="hibernate.dialect">org.hibernate.dialect.MySQLDialect</property>
<property
name="hibernate.connection.driver_class">com.mysql.jdbc.Driver</proper
ty>
<property
name="hibernate.connection.url">jdbc:mysql://localhost:3306/petshop</p
roperty>
<property name="hibernate.connection.username">root</property>
<property name="hibernate.connection.password"/>
</session-factory>
</hibernate-configuration>

6. Lalu klik kanan project, pilih New, pilih Other…, pada Categories, pilih Hibernate,
lalu pada File Types, pilih HibernateUtil.java, kemudian klik Next. Ganti nama file
menjadi HibernateUtil, lalu Finish.
7. Jangan lupa untuk menambahkan MySQL JDBC Driver ke project kita.

Gambar 25 Tambah Library MySQL JDBC Driver

30

8. Buka kelas Customer, lalu ubah atribut-atributnya menjadi seperti berikut.

package com.me.myapp.model;
import javax.persistence.*;
@Entity
@Table(name = "Customers")
public class Customer {
@Id
@GeneratedValue(strategy = GenerationType.AUTO)
@Column(name = "CustomerID")
private Integer id;
@Column(name = "Name")
private String name;
@Column(name = "Address")
private String address;
@Column(name = "Phone")
private String phone;
/* Getter and setter */
}

9. Buka hibernate.cfg.xml, lalu tambahkan
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE hibernate-configuration PUBLIC
"-//Hibernate/Hibernate Configuration DTD 3.0//EN"
"http://www.hibernate.org/dtd/hibernate-configuration-3.0.dtd">
<hibernate-configuration>
<session-factory>

<mapping class="com.me.myapp.model.Customer"></mapping>
</session-factory>
</hibernate-configuration>

10. Buat class CustomerDao di package com.me.myapp.model.dao, lalu buat
method getCustomers().
package com.me.myapp.model.dao;
import com.me.myapp.ds.HibernateUtil;
import com.me.myapp.model.Customer;

31

import java.util.List;
import org.hibernate.Session;
public class CustomerDao {
public List<Customer> getCustomers() {
Session session =
HibernateUtil.getSessionFactory().openSession();
List<Customer> customers = session
.createQuery("from Customer")
.list();
session.close();
return customers;
}
}

11. Buka kelas CustomerDao di package com.me.myapp.model.dao, lalu ketik seperti
berikut.
import
import
import
import
import
import
import

com.me.myapp.model.Customer;
com.me.myapp.model.dao.CustomerDao;
java.util.List;
org.springframework.stereotype.Controller;
org.springframework.ui.Model;
org.springframework.web.bind.annotation.RequestMapping;
org.springframework.web.bind.annotation.RequestMethod;

@Controller
@RequestMapping(value = "/customer", method = RequestMethod.GET)
public String index(Model model) {
List<Customer> customers = CustomerDao.getCustomers();
model.addAttribute("customers", customers);
return "customer/index";
}
}

12. Buat file index.jsp di direktori WEB-INF/jsp/customer/. Ketikkan source
berikut.


32

<t:base>
<jsp:body>
<section>
<a href="<c:url value="/customer/register" />">New
Customer</a>
<table border="1">
<tr>
<th>No.</th>
<th>Nama</th>
<th>Alamat</th>
<th>Telepon</th>
<th></th>
</tr>
<c:forEach items="${customers}" var="customer"
varStatus="loopStatus">
<tr>
<td>${loopStatus.count}</td>
<td>${customer.name}</td>
<td>${customer.address}</td>
<td>${customer.phone}</td>
<td>
<a href="<c:url value="/customer/edit
/${customer.id}" />">Edit</a>
<a href="<c:url value="/customer/remove
/${customer.id}" />">Remove</a>
</td>
</tr>
</c:forEach>
</table>
</section>
</jsp:body>
</t:base>

Pada kode di atas, kita mendapati adanya sintaks tidak wajar lagi, yaitu
<c:forEach></c:forEach>. Ini adalah suatu ekspresi forEach pada JSTL, di
mana items merupakan elemen yang akan diiterasi, dan var adalah variabel
penampungan sementara dari elemen yang diiterasi untuk setiap iterasi.
13. Run project, buka http://localhost:8084/BelajarSpringMvc/customer/

33

Membuat Halaman Pendaftaran Pelanggan Baru
Atau disebut juga sebagai membuat pelanggan baru.
1. Buka kelas CustomerDao, lalu ketik seperti berikut.

import
import
import
import

com.me.myapp.ds.HibernateUtil;
java.util.List;
org.hibernate.Session;

public void add(Customer customer) {
Session session =
session.beginTransaction();
session.save(customer);
session.getTransaction().commit();
session.close();
}
}

2. Buka file CustomerController, pada method add(), ganti menjadi seperti
berikut.

34

/* Import yang dibutuhkan */
@Controller
@RequestMapping(value = "/customer/add", method =
RequestMethod.POST)
public String add(
String name, String address, String phone,
Model model) {
Customer customer = new Customer();
customer.setName(name);
customer.setAddress(address);
customer.setPhone(phone);
CustomerDao.add(customer);
return "customer/addResult";
}
}

Membuat Halaman Ubah Data Pelanggan
1. Buka CustomerDao, tambahkan method edit().
/* Import */
public static Customer getCustomer(Integer id) {
Session session =
Customer customer = (Customer) session
.createQuery("from Customer where id = :id")
.setParameter("id", id)
.uniqueResult();
return customer;
}
public static void edit(Customer customer) {
Session session =
session.update(customer);
session.close();

35

}
}

2. Buka CustomerController, tambahkan method berikut.
import
import
import
import
import
import
import
import

com.me.myapp.model.dao.CustomerDao;
java.util.List;
org.springframework.stereotype.Controller;
org.springframework.ui.Model;
org.springframework.web.bind.annotation.PathVariable;
org.springframework.web.bind.annotation.RequestMapping;
org.springframework.web.bind.annotation.RequestMethod;

@Controller
@RequestMapping(value = "/customer/edit/{id}", method =
RequestMethod.GET)
public String editForm(
@PathVariable Integer id, Model model) {
Customer customer = CustomerDao.getCustomer(id);
return "customer/edit";
}
@RequestMapping(value = "/customer/edit", method =
RequestMethod.POST)
public String edit(
Customer customer, Model model) {
CustomerDao.edit(customer);
return "customer/editResult";
}
}

Kali ini kita mengirimkan variabel melalui path/url ( PathVariable), sehingga kita
menggunakan annotation @PathVariable. Variabel tersebut akan ditempatkan
pada bagian {id} di urlnya, dan akan ditangkap oleh parameter dengan annotation
@PathVariable.
3. Buat file edit.jsp.

36

<t:base>
<jsp:body>
<section>
<form action="<c:url value="/customer/edit" />"
method="post">
<fieldset>
<legend>Registrasi Pelanggan</legend>
<label>Nama</label><br>
<input type="text" name="name"
value="${customer.name}"><br>
<label>Alamat</label><br>
<input type="text" name="address"
value="${customer.address}"><br>
<label>Telepon</label><br>
<input type="text" name="phone"
value="${customer.phone}"><br>
<input type="hidden" name="id" value="${customer.id}">
<button>Submit</button>
</fieldset>
</form>
</section>
</jsp:body>
</t:base>

4. Buat file editResult.jsp.
<t:base>
<jsp:body>
<section>
<h2>Pelanggan baru telah diubah</h2>
<p>
</p>
</section>
</jsp:body>
</t:base>

5. Run project.

37

Membuat Halaman Hapus Data Pelanggan
Hapus data pelanggan.
1. Buka CustomerDao, tambahkan method remove().

/* Import */
public static void (Customer customer) {
Session session =
session.delete(customer);
session.close();
}
}

2. Buka CustomerController, tambahkan method berikut.


39

/* Import yang dibutuhkan */
@Controller
@RequestMapping(value = "/customer/remove/{id}", method =
RequestMethod.GET)
public String removeConfirmation(
@PathVariable Integer id, Model model) {
Customer customer = CustomerDao.getCustomer(id);
return "customer/remove";
}
@RequestMapping(value = "/customer/remove", method =
RequestMethod.POST)
public String remove(Customer customer, Model model) {
CustomerDao.remove(customer);
return "customer/removeResult";
}
}

3. Buat file remove.jsp.

<t:base>
<jsp:body>
<section>
<h2>Hapus pelanggan?</h2>
<p>
</p>
<form action="<c:url value="/customer/remove" />"
method="post">
<input type="hidden" value="${customer.id}" name="id">
<button>OK</button>
</form>
</section>
</jsp:body>
</t:base>

40

4. Buat file removeResult.jsp.

<t:base>
<jsp:body>
<section>
<h2>Pelanggan telah dihapus.</h2>
</section>
</jsp:body>
</t:base>

41

Catatan singkat prak pbol

More Related Content

What's hot

Similar to Catatan singkat prak pbol

More from Tri Atsumori

Catatan singkat prak pbol