Your SlideShare is downloading. ×
Catatan singkat prak pbol
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Catatan singkat prak pbol

341

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
341
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
26
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. CATATAN SINGKAT PRAKTIKUM PBOL oleh: Edbert Wijaya 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 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
  • 4. 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
  • 5. 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
  • 6. 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
  • 7. 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
  • 8. 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
  • 9. 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
  • 10. 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
  • 11. Gambar 4 Pilih Server 6. Kasih centang Spring Web MVC pada bagian Frameworks. Gambar 5 Pilih Framework MVC 7
  • 12. 7. Buka tab Configuration. Pada Dispatcher Mapping, ganti dengan ‘/’. Gambar 6 Dispatcher Mapping 8. Project baru akan di-generate oleh NetBeans. 8
  • 13. 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
  • 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 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
  • 17. 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
  • 18. 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
  • 19. 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
  • 20. 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
  • 21. 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
  • 22. 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
  • 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 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
  • 25. 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
  • 26. 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
  • 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 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
  • 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; 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
  • 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 Hasil Tambah Pelanggan Sementara 28
  • 33. 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
  • 34. 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
  • 35. 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
  • 36. 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
  • 37. <%@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
  • 38. 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
  • 39. 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
  • 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"%> <%@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
  • 42. 38
  • 43. 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
  • 44. /* 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
  • 45. 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

×