Catatan singkat prak pbol

CATATAN SINGKAT PRAKTIKUM PBOL

oleh:

Edbert Wijaya Irawan

DEPARTEMEN TEKNIK INFORMATIKA

INSTITUT TEKNOLOGI HARAPAN BANGSA

BANDUNG

2013

i

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

ii

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

iii

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

1

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.

2

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.

3

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.

4

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".

http://localhost:8084/BelajarMvcJsp/sayhello.jsp

5

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.

6

Gambar 3 Nama Project Baru

5. Pilih Server. Pada tutorial ini, server yang digunakan ialah Apache Tomcat

7.0.34.0. Lalu klik Next.

7

Gambar 4 Pilih Server

6. Kasih centang Spring Web MVC pada bagian Frameworks.

Gambar 5 Pilih Framework MVC

8

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

Gambar 6 Dispatcher Mapping

8. Project baru akan di-generate oleh NetBeans.

9

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 />

10

<resources mapping="/resources/**" location="/resources/" />  <beans:bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <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;

11

@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

12

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.

http://localhost:8084/BelajarSpringMvc/home.jsp

http://localhost:8084/BelajarSpringMvc/home.jsp

13

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.

14

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.

15

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

16

4. Buka file index.jsp, tambahkan code berikut, setelah <%@page

contentType="text/html" pageEncoding="UTF-8"%>.

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.

17

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.

18

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).

Gambar 18 Template View JSP

Header

Footer

Content of

Home

HOME PAGE

Header

Footer

Content of

Blog Page

BLOG PAGE

Header

Footer

Dynamic

content

BASE TEMPLATE

19

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 />

20

<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

<%@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.

21

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.

22

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>

23

<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

<%@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.

24

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">

25

<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 {

26

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) {

27

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.

http://localhost:8084/BelajarSpringMvc/%20customer/register

28

Gambar 24 Hasil Tambah Pelanggan Sementara

29

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`) REFERENCES `Customers` (`CustomerID`) ON DELETE SET NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8;

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:

30

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</property> <property name="hibernate.connection.url">jdbc:mysql://localhost:3306/petshop</property> <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

31

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;

32

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 com.me.myapp.model.Customer; import com.me.myapp.model.dao.CustomerDao; import java.util.List; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import 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"%>

33

<%@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/

http://localhost:8084/BelajarSpringMvc/customer/

34

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 com.me.myapp.ds.HibernateUtil; import com.me.myapp.model.Customer; import java.util.List; import 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.

35

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

36

} }

2. Buka CustomerController, tambahkan method berikut.

package com.me.myapp.controller; import com.me.myapp.model.Customer; import com.me.myapp.model.dao.CustomerDao; import java.util.List; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.PathVariable; import org.springframework.web.bind.annotation.RequestMapping; import 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"%>

37

<%@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.

39

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;

40

/* 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>

41

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>

Catatan singkat prak pbol

Documents

Transcript of Catatan singkat prak pbol