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

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
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">
<!-- DispatcherServlet Context: defines this servlet's requestprocessing infrastructure -->
<!-- Enables the Spring MVC @Controller programming model -->
<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/" />
<!-- Resolves views selected for rendering by @Controllers to .jsp
resources in the /WEB-INF/jsp directory -->
<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

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
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

<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

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

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
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>&copy; 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

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@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

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="t" tagdir="/WEB-INF/tags"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<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>&copy; 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

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="t" tagdir="/WEB-INF/tags"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<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

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib prefix="t" tagdir="/WEB-INF/tags"%>
<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

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib prefix="t" tagdir="/WEB-INF/tags"%>
<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

package com.me.myapp.controller;
import com.me.myapp.model.Customer;
/* Import yang lain */
@Controller
public class CustomerController {
/* 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.
package com.me.myapp.controller;
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
public class CustomerController {
@RequestMapping(value = "/customer", method = RequestMethod.GET)
public String index(Model model) {
List<Customer> customers = CustomerDao.getCustomers();
model.addAttribute("customers", customers);
return "customer/index";
}
/* Method yang lain */
}

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

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

32
<%@taglib prefix="t" tagdir="/WEB-INF/tags"%>
<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.

package com.me.myapp.model.dao;
import
import
import
import

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

public class CustomerDao {
/* Method yang lain */
public void add(Customer customer) {
Session session =
HibernateUtil.getSessionFactory().openSession();
session.beginTransaction();
session.save(customer);
session.getTransaction().commit();
session.close();
}
}

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

34
package com.me.myapp.controller;
/* Import yang dibutuhkan */
@Controller
public class CustomerController {
/* Method yang lain */
@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);
model.addAttribute("customer", customer);
return "customer/addResult";
}
}

Membuat Halaman Ubah Data Pelanggan
1. Buka CustomerDao, tambahkan method edit().
package com.me.myapp.model.dao;
/* Import */
public class CustomerDao {
/* Method yang lain */
public static Customer getCustomer(Integer id) {
Session session =
HibernateUtil.getSessionFactory().openSession();
Customer customer = (Customer) session
.createQuery("from Customer where id = :id")
.setParameter("id", id)
.uniqueResult();
return customer;
}
public static void edit(Customer customer) {
Session session =
HibernateUtil.getSessionFactory().openSession();
session.beginTransaction();
session.update(customer);
session.getTransaction().commit();
session.close();

35
}
}

2. Buka CustomerController, tambahkan method berikut.
package com.me.myapp.controller;
import
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.PathVariable;
org.springframework.web.bind.annotation.RequestMapping;
org.springframework.web.bind.annotation.RequestMethod;

@Controller
public class CustomerController {
/* Method yang lain */
@RequestMapping(value = "/customer/edit/{id}", method =
RequestMethod.GET)
public String editForm(
@PathVariable Integer id, Model model) {
Customer customer = CustomerDao.getCustomer(id);
model.addAttribute("customer", customer);
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.
<%@page contentType="text/html" pageEncoding="UTF-8"%>

36
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib prefix="t" tagdir="/WEB-INF/tags"%>
<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.
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib prefix="t" tagdir="/WEB-INF/tags"%>
<t:base>
<jsp:body>
<section>
<h2>Pelanggan baru telah diubah</h2>
<p>
Nama: ${customer.name}<br>
Alamat: ${customer.address}<br>
No. Telp: ${customer.phone}<br>
</p>
</section>
</jsp:body>
</t:base>

5. Run project.

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

package com.me.myapp.model.dao;
/* Import */
public class CustomerDao {
/* Method yang lain */
public static void (Customer customer) {
Session session =
HibernateUtil.getSessionFactory().openSession();
session.beginTransaction();
session.delete(customer);
session.getTransaction().commit();
session.close();
}
}

2. Buka CustomerController, tambahkan method berikut.

package com.me.myapp.controller;

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

3. Buat file remove.jsp.

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib prefix="t" tagdir="/WEB-INF/tags"%>
<t:base>
<jsp:body>
<section>
<h2>Hapus pelanggan?</h2>
<p>
Nama: ${customer.name}<br>
Alamat: ${customer.address}<br>
No. Telp: ${customer.phone}<br>
</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.

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib prefix="t" tagdir="/WEB-INF/tags"%>
<t:base>
<jsp:body>
<section>
<h2>Pelanggan telah dihapus.</h2>
</section>
</jsp:body>
</t:base>

41

Catatan singkat prak pbol

  • 1.
    CATATAN SINGKAT PRAKTIKUM PBOL oleh: EdbertWijaya Irawan DEPARTEMEN TEKNIK INFORMATIKA INSTITUT TEKNOLOGI HARAPAN BANGSA BANDUNG 2013
  • 2.
    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
  • 3.
    DAFTAR GAMBAR Gambar 1Add 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
  • 4.
    DAFTAR LISTING Listing 1Halaman 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
  • 5.
    BAB 1 PENDAHULUAN Latar Belakang Catatansingkat 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
  • 6.
    BAB 2 PENERAPAN MVCDI 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
  • 7.
    Listing 2 PerubahanIsi 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 <%@page contentType="text/html" pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; 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
  • 8.
    Gambar 1 Addlibrary 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
  • 9.
    BAB 3 SPRING MVCDI 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
  • 10.
    Gambar 3 NamaProject Baru 5. Pilih Server. Pada tutorial ini, server yang digunakan ialah Apache Tomcat 7.0.34.0. Lalu klik Next. 6
  • 11.
    Gambar 4 PilihServer 6. Kasih centang Spring Web MVC pada bagian Frameworks. Gambar 5 Pilih Framework MVC 7
  • 12.
    7. Buka tabConfiguration. Pada Dispatcher Mapping, ganti dengan ‘/’. Gambar 6 Dispatcher Mapping 8. Project baru akan di-generate oleh NetBeans. 8
  • 13.
    Gambar 7 Isipada 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"> <!-- DispatcherServlet Context: defines this servlet's requestprocessing infrastructure --> <!-- Enables the Spring MVC @Controller programming model --> <annotation-driven /> <!-- Handles HTTP GET requests for /resources/** by efficiently serving up static resources in the ${webappRoot}/resources directory -> 9
  • 14.
    <resources mapping="/resources/**" location="/resources/"/> <!-- Resolves views selected for rendering by @Controllers to .jsp resources in the /WEB-INF/jsp directory --> <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
  • 15.
    @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 <%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; 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
  • 16.
    Gambar 9 RunProject 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
  • 17.
    Gambar 11 HasilMemaksa 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
  • 18.
    Gambar 13 HasilRun 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
  • 19.
    Gambar 14 Sintaksxml 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
  • 20.
    4. Buka file index.jsp, tambahkancode berikut, contentType="text/html" pageEncoding="UTF-8"%>. setelah <%@page Listing 9 Penambahan taglib pada index.jsp <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 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 <%@page contentType="text/html" pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; 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
  • 21.
    Gambar 16 HasilTampilan 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
  • 22.
    HOME PAGE BLOG PAGE Header Header Contentof 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
  • 23.
    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
  • 24.
    <footer> <p>&copy; 2013 MyApp. 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 <%@page contentType="text/html" pageEncoding="UTF-8"%> <%@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
  • 25.
    8. Tambahkan sourceseperti berikut. Listing 15 Source Tampilan Blog <%@page contentType="text/html" pageEncoding="UTF-8"%> <%@taglib prefix="t" tagdir="/WEB-INF/tags"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <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
  • 26.
    Gambar 21 TampilanBlog 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
  • 27.
    <h1>My App</h1> </header> <jsp:doBody /> <footer> <p>&copy;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 <%@page contentType="text/html" pageEncoding="UTF-8"%> <%@taglib prefix="t" tagdir="/WEB-INF/tags"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <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
  • 28.
    Gambar 22 TampilanHalaman 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 <%@page contentType="text/html" pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@taglib prefix="t" tagdir="/WEB-INF/tags"%> <t:base> <jsp:body> <section> <form action="<c:url value="/customer/add" />" method="post"> 24
  • 29.
    <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
  • 30.
    private String name; privateString 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 <%@page contentType="text/html" pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@taglib prefix="t" tagdir="/WEB-INF/tags"%> <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 package com.me.myapp.controller; import com.me.myapp.model.Customer; /* Import yang lain */ @Controller public class CustomerController { /* Method yang lain */ @RequestMapping(value = "/customer/add", method = RequestMethod.POST) public String add( String name, String address, String phone, Model model) { 26
  • 31.
    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
  • 32.
    Gambar 24 HasilTambah Pelanggan Sementara 28
  • 33.
    BAB 4 CRUD DISPRING 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
  • 34.
    Listing 25 KonfigurasiHibernate <?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
  • 35.
    8. Buka kelasCustomer, 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
  • 36.
    import java.util.List; import org.hibernate.Session; publicclass 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. package com.me.myapp.controller; 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 public class CustomerController { @RequestMapping(value = "/customer", method = RequestMethod.GET) public String index(Model model) { List<Customer> customers = CustomerDao.getCustomers(); model.addAttribute("customers", customers); return "customer/index"; } /* Method yang lain */ } 12. Buat file index.jsp di direktori WEB-INF/jsp/customer/. Ketikkan source berikut. <%@page contentType="text/html" pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 32
  • 37.
    <%@taglib prefix="t" tagdir="/WEB-INF/tags"%> <t:base> <jsp:body> <section> <ahref="<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
  • 38.
    Membuat Halaman PendaftaranPelanggan Baru Atau disebut juga sebagai membuat pelanggan baru. 1. Buka kelas CustomerDao, lalu ketik seperti berikut. package com.me.myapp.model.dao; import import import import com.me.myapp.ds.HibernateUtil; com.me.myapp.model.Customer; java.util.List; org.hibernate.Session; public class CustomerDao { /* Method yang lain */ public void add(Customer customer) { Session session = HibernateUtil.getSessionFactory().openSession(); session.beginTransaction(); session.save(customer); session.getTransaction().commit(); session.close(); } } 2. Buka file CustomerController, pada method add(), ganti menjadi seperti berikut. 34
  • 39.
    package com.me.myapp.controller; /* Importyang dibutuhkan */ @Controller public class CustomerController { /* Method yang lain */ @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); model.addAttribute("customer", customer); return "customer/addResult"; } } Membuat Halaman Ubah Data Pelanggan 1. Buka CustomerDao, tambahkan method edit(). package com.me.myapp.model.dao; /* Import */ public class CustomerDao { /* Method yang lain */ public static Customer getCustomer(Integer id) { Session session = HibernateUtil.getSessionFactory().openSession(); Customer customer = (Customer) session .createQuery("from Customer where id = :id") .setParameter("id", id) .uniqueResult(); return customer; } public static void edit(Customer customer) { Session session = HibernateUtil.getSessionFactory().openSession(); session.beginTransaction(); session.update(customer); session.getTransaction().commit(); session.close(); 35
  • 40.
    } } 2. Buka CustomerController,tambahkan method berikut. package com.me.myapp.controller; import 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.PathVariable; org.springframework.web.bind.annotation.RequestMapping; org.springframework.web.bind.annotation.RequestMethod; @Controller public class CustomerController { /* Method yang lain */ @RequestMapping(value = "/customer/edit/{id}", method = RequestMethod.GET) public String editForm( @PathVariable Integer id, Model model) { Customer customer = CustomerDao.getCustomer(id); model.addAttribute("customer", customer); 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. <%@page contentType="text/html" pageEncoding="UTF-8"%> 36
  • 41.
    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@taglibprefix="t" tagdir="/WEB-INF/tags"%> <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. <%@page contentType="text/html" pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@taglib prefix="t" tagdir="/WEB-INF/tags"%> <t:base> <jsp:body> <section> <h2>Pelanggan baru telah diubah</h2> <p> Nama: ${customer.name}<br> Alamat: ${customer.address}<br> No. Telp: ${customer.phone}<br> </p> </section> </jsp:body> </t:base> 5. Run project. 37
  • 42.
  • 43.
    Membuat Halaman HapusData Pelanggan Hapus data pelanggan. 1. Buka CustomerDao, tambahkan method remove(). package com.me.myapp.model.dao; /* Import */ public class CustomerDao { /* Method yang lain */ public static void (Customer customer) { Session session = HibernateUtil.getSessionFactory().openSession(); session.beginTransaction(); session.delete(customer); session.getTransaction().commit(); session.close(); } } 2. Buka CustomerController, tambahkan method berikut. package com.me.myapp.controller; 39
  • 44.
    /* Import yangdibutuhkan */ @Controller public class CustomerController { /* Method yang lain */ @RequestMapping(value = "/customer/remove/{id}", method = RequestMethod.GET) public String removeConfirmation( @PathVariable Integer id, Model model) { Customer customer = CustomerDao.getCustomer(id); model.addAttribute("customer", customer); return "customer/remove"; } @RequestMapping(value = "/customer/remove", method = RequestMethod.POST) public String remove(Customer customer, Model model) { CustomerDao.remove(customer); model.addAttribute("customer", customer); return "customer/removeResult"; } } 3. Buat file remove.jsp. <%@page contentType="text/html" pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@taglib prefix="t" tagdir="/WEB-INF/tags"%> <t:base> <jsp:body> <section> <h2>Hapus pelanggan?</h2> <p> Nama: ${customer.name}<br> Alamat: ${customer.address}<br> No. Telp: ${customer.phone}<br> </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
  • 45.
    4. Buat fileremoveResult.jsp. <%@page contentType="text/html" pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@taglib prefix="t" tagdir="/WEB-INF/tags"%> <t:base> <jsp:body> <section> <h2>Pelanggan telah dihapus.</h2> </section> </jsp:body> </t:base> 41