Tutorial Programming dan Informasi Teknologi

October 24, 2016

TUTORIAL SPRING MVC HIBERNATE MENGGUNAKAN SPRING TOOL SUITE PART II



Kebutuhan dasar :
[Dari part I] :
1. Spring Tools Suite V.3.6.4 Release.
2. MySql dan Heidi Sql.
3. Apache Tomcat V 7.0 
4. XAMPP 
5. Java 1.7 [Termasuk konfigurasi project facets]
6. JRE 1.7 [JRE System Lib]

[Part II]
[Penambahan Library Pom.xml]
1. JacksonLibrary 
2. slf4j Logger
3. Jstl [Javax Servlet]

Struktur Project 

Gambar 1.1. Struktur Project
Gambar 1.2 Struktur Package

Pada tutorial kali ini akan dibahas bagaimana caranya membuat proses create data ke database. penambahan yang dilakukan pada part ini adalah penambahan library pada pom.xml, pengaplikasian konsep MVC dengan membuat interface dao dan service beserta implementasinya. Kemudian pembuatan class model yang akan di mapping oleh hibernate ke basis data.

Pada part sebelumnya telah dibuat konfigurasi standard. dan library yang ada masih belum memadai jika ingin menambahkan fitur create. Untuk itu tahap pertama adalah menambahkan terlebih dahulu Librarynya di pom.xml. Library yang dibutuhkan diantaranya :

           <!-- JSON -->  
           <dependency>  
                <groupId>com.fasterxml.jackson.core</groupId>  
                <artifactId>jackson-databind</artifactId>  
                <version>2.3.1</version>  
           </dependency>  
           <dependency>  
                <groupId>com.fasterxml.jackson.core</groupId>  
                <artifactId>jackson-core</artifactId>  
                <version>2.3.1</version>  
           </dependency>  
           <dependency>  
                <groupId>com.fasterxml.jackson.core</groupId>  
                <artifactId>jackson-annotations</artifactId>  
                <version>2.3.1</version>  
           </dependency>  

Library Jackson berguna untuk merubah data yang diinput menjadi JSON format. ini bertujuan agar program kita mempunyai middle end selain front end dan back end. dan bertujuan agar aplikasi yang kita buat menjadi lebih ringan. Selain Jackson library yang ditambahkan adalah slf4j Logger dan Javax Servlet

           <!-- Logger -->  
           <dependency>  
                <groupId>org.slf4j</groupId>  
                <artifactId>slf4j-api</artifactId>  
                <version>1.7.6</version>  
           </dependency>  
           <!-- Javax Servlet -->  
           <dependency>  
                <groupId>javax.servlet</groupId>  
                <artifactId>jstl</artifactId>  
                <version>1.2</version>  
           </dependency>  

Library slf4j Logger berguna agar aplikasi yang kita buat dapat menghandle log error sedangkan javax servlet berguna agar jsp yang dibuat mendukung bahasa java. karena nanti jsp akan ditugaskan menghandle beberapa parameter yang dikirimkan dari controller dan middle end.

Setelah library yan dibutuhkan sudah lengkap, tahap selanjutnya adalah mendaftarkan folder dimana file java script dan css akan disimpan. caranya, buka file dispatcher-servlet.xml yang telah dibuat di part sebelumnya.

 <?xml version="1.0" encoding="UTF-8"?>  
 <beans xmlns="http://www.springframework.org/schema/beans"  
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc"  
      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 request-processing   
           infrastructure -->  
      <!-- Handles HTTP GET requests for /resources/** by efficiently serving   
           up static resources in the ${webappRoot}/resources directory -->  
      <mvc:resources mapping="/ASSETS/**" location="/ASSETS/" />  
      <mvc:annotation-driven />  
      <!-- Resolves views selected for rendering by @Controllers to .jsp resources   
           in the /WEB-INF/views directory -->  
      <bean  
           class="org.springframework.web.servlet.view.ContentNegotiatingViewResolver">  
           <property name="viewResolvers">  
                <list>  
                     <bean class="org.springframework.web.servlet.view.XmlViewResolver">  
                          <property name="order" value="1" />  
                          <property name="location" value="/WEB-INF/spreadsheet-views.xml" />  
                     </bean>  
                     <bean  
                          class="org.springframework.web.servlet.view.InternalResourceViewResolver">  
                          <property name="order" value="3" />  
                          <property name="viewClass"  
                               value="org.springframework.web.servlet.view.JstlView" />  
                          <property name="prefix" value="/WEB-INF/pages/" />  
                          <property name="suffix" value=".jsp" />  
                     </bean>  
                </list>  
           </property>  
      </bean>  
      <context:component-scan base-package="controller" />  
 </beans>  

Bisa dilihat perbedaanya hanya pada penambahan code resource mapping ke folder /ASSETS/

 <mvc:resources mapping="/ASSETS/**" location="/ASSETS/" />  

yang nantinya folder ini digunakan untuk penyimpanan file java script dan css atau file yang lainya.
Tahap Selanjutnya adalah membuat file jdbc.properties file ini berisikan parameter parameter koneksi ke database, seperti alamat port dan nama database, username dan password mysql dll. untuk membuatnya dengan cara klik kanan di folder /WEB-INF/ new - file - beri nama jdbc.properties. isikan kode berikut.

 jdbc.driverClassName=com.mysql.jdbc.Driver  
 jdbc.url=jdbc:mysql://localhost:3306/training1  
 hibernate.dialect=MySQLDialect  
 jdbc.username=otmis  
 jdbc.password=otmis  
 hibernate.current_session_context_class=thread  
 hibernate.hbm2ddl.auto=create  
 hibernate.show_sql=true  

Bisa kita lihat isi dari file jdbc.properties adalah properti-properti untuk keperluan koneksi ke database. Dengan begitu konfigurasi telah selesai dibuat. tahap selanjutnya adalah membuat struktur packagenya yang bisa dilihat pada gambar 1.2.

Untuk membuat struktur seperti dicontohkan pada gambar 1.2 silahkan atur terlebih dahulu pengaturan hirarki projectnya agar terlihat tebih terstruktur. Bisa terlihat pada project explorer ada ikon segitiga terbalik seperti pada gambar 2.

Gambar 2. Setting Hirarki Package (Top Level Elements)
Gambar 2.1 Folder Presentation
Gambar 2.2 Package Presentation
* Note : Pembuatan package sama seperti pembuatan group Id, formatnya com.yourcompany.packageName itu berarti packageName berada di package yourcompany. contoh : com.myProject.controller, jika ingin membuat package dao penamaanya menjadi com.myProject.dao. 

Jika Sudah disetting hirarkinya silahkan buat packagenya. pada part sebelumnya kita sudah membuat package controller. untuk itu buat lagi package lainya seperti gambar 1.2. jika sudah dibuat packagenya mari kita buat class model terlebih dahulu yang dibuat di package model. kita beri nama class model tersebut dengan nama Crud.

 /**  
  *   
  */  
 package com.webproject.model;  
 import java.io.Serializable;  
 import javax.persistence.Column;  
 import javax.persistence.Entity;  
 import javax.persistence.Id;  
 import javax.persistence.Table;  
 /**  
  * Created by Muhamad Huda Avianto   
  * Nov 26, 2016  
  */  
 @Entity  
 @Table (name = "TB_CRUD")  
 public class Crud implements Serializable{  
      /**  
       *   
       */  
      private static final long serialVersionUID = 1L;  
      String id;  
      String nama;  
      String alamat;  
      @Id  
      @Column(name="ID_CRUD")  
      public String getId() {  
           return id;  
      }  
      public void setId(String id) {  
           this.id = id;  
      }  
      @Column(name="NAMA_CRUD")  
      public String getNama() {  
           return nama;  
      }  
      public void setNama(String nama) {  
           this.nama = nama;  
      }  
      @Column(name="ALAMAT_CRUD")  
      public String getAlamat() {  
           return alamat;  
      }  
      public void setAlamat(String alamat) {  
           this.alamat = alamat;  
      }  
 }  

Pada class model terdapat anotasi @Entity dan @Table menandakan bahwa class ini berhubungan dengan object relational mapping ke database. @Column menandakan penamaan column. Setelah class model terbentuk kita buat class interface nya di package dao. caranya klik kanan di package dao - new - interface - berinama CrudDao.

 /**  
  *   
  */  
 package com.webproject.dao;  
 import java.util.Collection;  
 import com.webproject.model.Crud;  
 /**  
  * Created by Muhamad Huda Avianto   
  * Nov 26, 2016  
  */  
 public interface CrudDao {  
      public Collection <Crud> list() throws Exception;  
      public Crud get(String id) throws Exception;   
 }  

Dao adalah singkatan dari Data Access Object. Dao berisi iterface yaitu object yang belum mempunyai implementasi. bisa dilihat pada interface CrudDao hanya berisikan object-object tanpa implement nya. untuk itu harus dibuat implement dari interface tsb. Namun sebelum itu kita buat interface servicenya terlebih dahulu di dalam package service. agar semua interfacenya lengkap sehingga memudahkan pada saat membuat class implements nya. silahkan berinama CrudService

 package com.webproject.service;  
 import java.util.Collection;  
 import com.webproject.model.Crud;  
 /**  
  * Created by Muhamad Huda Avianto   
  * Nov 26, 2016  
  */  
 public interface CrudService {  
      public void save (Crud crud) throws Exception;  
      public void update (Crud crud) throws Exception;  
      public void delete (Crud crud) throws Exception;  
      public Collection <Crud> list() throws Exception;  
      public Crud get(String id) throws Exception;   
 }  

Didalam interface service hampir sama isinya dengan crudDao. bedanya ada penambahan object save, update, dan delete. namun object list() dan object get tetap disertakan karena object yang akan dipanggil dicontroller adalah interface service bukan interface dao. lalu service akan menghubungkan ke dao lalu ke model. kurang lebih begitu alur aplikasi yang saya buat.

Interface yang dibutuhkan sudah lengkap. untuk itu kita buat implementasi dari interface tsb. kita buat implement dari CrudDao. silahkan buat package baru didalam package dao. dengan nama daoImpl. contoh penamaan "com.webproject.dao.impl". maka akan terbentuk package baru didalam package dao yang bernama "impl". buat class didalamnya beri nama CrudDaoImpl.

 /**  
  *   
  */  
 package com.webproject.dao.impl;  
 import java.util.Collection;  
 import org.hibernate.Query;  
 import org.hibernate.Session;  
 import org.hibernate.SessionFactory;  
 import org.springframework.beans.factory.annotation.Autowired;  
 import org.springframework.stereotype.Repository;  
 import com.webproject.dao.CrudDao;  
 import com.webproject.model.Crud;  
 /**  
  * Created by Muhamad Huda Avianto   
  * Nov 26, 2016  
  */  
 @Repository  
 public class CrudDaoImpl implements CrudDao{  
      @Autowired private SessionFactory sessionFactory;  
       private Session getCurrentSession(){  
          return this.sessionFactory.getCurrentSession();  
        }  
      /* (non-Javadoc)  
       * @see com.webproject.dao.CrudDao#list()  
       */  
      @SuppressWarnings("unchecked")  
      @Override  
      public Collection<Crud> list() throws Exception {  
           // TODO Auto-generated method stub  
           String hql = "from Crud";  
           Query query = this.getCurrentSession().createQuery(hql);  
           Collection <Crud> crud = query.list();  
           return crud;  
      }  
      /* (non-Javadoc)  
       * @see com.webproject.dao.CrudDao#get(java.lang.String)  
       */  
      @Override  
      public Crud get(String id) throws Exception {  
           // TODO Auto-generated method stub  
            String hql = "From Crud c Where c.id =:id";  
          Query query = this.getCurrentSession().createQuery(hql);  
          query.setParameter("id", id);  
          Crud crud = (Crud) query.uniqueResult();  
          return crud;  
      }  
 }  

Di dalam class implement merupakan implementasi dari object interface yang telah kita buat.  sebagai contoh di dalam interface CrudDao terdapat object interface list() dan get. Di class implement kita implementasikan apa yang akan dilakukan object list(). dapat terlihat di dalam class CrudDaoImpl terdapat implement list() yaitu melakukan aksi tampil seluruh data yang ada dalam table Crud.

 String hql = "from Crud";   

Bedanya jika didalam database yang dipanggil adalah nama table (select * from namaTable), didalam hql (hibernate query languange) yang dipanggil adalah nama class model.  Kemudian pada object implement get (String id) akan melakukan get by Id. dimana parameter yang dikirimkan adalah String Id. contoh jika pada database dituliskan select * from NamaTable where NamaField = Parameter. maka di hql adalah sebagai berikut.

 String hql = "From Crud c Where c.id =:id";   

di dalam CrudDaoImpl saya gunakan hanya sebagai penampil data. sedangkan interface yang ada di service saya gunakan untuk melakukan transaksi. contohnya create update dan delete. Kode implementasi service adalah sebagai berikut.

 /**  
  *   
  */  
 package com.webproject.service.impl;  
 import java.util.Collection;  
 import org.hibernate.Session;  
 import org.hibernate.SessionFactory;  
 import org.springframework.beans.factory.annotation.Autowired;  
 import org.springframework.stereotype.Service;  
 import org.springframework.transaction.annotation.Transactional;  
 import com.webproject.model.Crud;  
 import com.webproject.service.CrudService;  
 import com.webproject.dao.*;  
 /**  
  * Created by Muhamad Huda Avianto   
  * Nov 26, 2016  
  */  
 @Service  
 @Transactional  
 public class CrudServiceImpl implements CrudService{  
      @Autowired  
      CrudDao crudDao;  
      @Autowired private SessionFactory sessionFactory;  
       private Session getCurrentSession(){  
          return this.sessionFactory.getCurrentSession();  
        }  
      /* (non-Javadoc)  
       * @see com.webproject.service.CrudService#save(com.webproject.model.Crud)  
       */  
      @Override  
      public void save(Crud crud) throws Exception {  
           // TODO Auto-generated method stub  
           this.getCurrentSession().save(crud);  
      }  
      /* (non-Javadoc)  
       * @see com.webproject.service.CrudService#update(com.webproject.model.Crud)  
       */  
      @Override  
      public void update(Crud crud) throws Exception {  
           // TODO Auto-generated method stub  
           this.getCurrentSession().update(crud);  
      }  
      /* (non-Javadoc)  
       * @see com.webproject.service.CrudService#delete(com.webproject.model.Crud)  
       */  
      @Override  
      public void delete(Crud crud) throws Exception {  
           // TODO Auto-generated method stub  
           this.getCurrentSession().delete(crud);  
      }  
      /* (non-Javadoc)  
       * @see com.webproject.service.CrudService#list()  
       */  
      @Override  
      public Collection<Crud> list() throws Exception {  
           // TODO Auto-generated method stub  
           return crudDao.list();  
      }  
      /* (non-Javadoc)  
       * @see com.webproject.service.CrudService#get(java.lang.String)  
       */  
      @Override  
      public Crud get(String id) throws Exception {  
           // TODO Auto-generated method stub  
           return crudDao.get(id);  
      }  
 }  

Pada service implements terdapat object save edit delete. karena kita menggunakan hibernate maka tidak usah dituliskan kode insert update atau delete cukup dengan kode sebagai berikut pada masing masing object interface.

 this.getCurrentSession().save(crud);  

 this.getCurrentSession().update(crud);  

 this.getCurrentSession().delete(crud);  

Tahap terahir adalah membuat class controller. dan membuat konfigurasi JSON. silahkan buat class di controller dengan nama ConvertToJSON. isikan dengan kode tsb.

 /**  
  *   
  */  
 package com.webproject.controller;  
 import java.io.IOException;  
 import java.io.PrintWriter;  
 import java.util.Map;  
 import javax.servlet.http.HttpServletResponse;  
 import com.fasterxml.jackson.databind.ObjectMapper;  
 /**  
  * Created by Muhamad Huda Avianto   
  * Nov 26, 2016  
  */  
 public class ConvertToJson {  
      protected void encodeToJSON(HttpServletResponse response, Map<String, Object> map){  
           ObjectMapper objectMapper = new ObjectMapper();  
           response.setContentType("application/json");  
           PrintWriter out;  
           try {  
                out = response.getWriter();  
                objectMapper.writeValue(out, map);  
           } catch (IOException e) {  
                e.printStackTrace();  
           }       
      }  
 }  

Jika sudah membuat konfigurasi JSON tahap selanjutnya adalah membuat controllernya. dimana controller ini akan meng handle request url dari user. berikut controller yang saya buat, beri nama sesuai keinginan saja. Kalau saya berinama dengan MainController.

 /**  
  *   
  */  
 package com.webproject.controller;  
 import java.util.HashMap;  
 import java.util.Map;  
 import javax.servlet.http.HttpServletRequest;  
 import javax.servlet.http.HttpServletResponse;  
 import javax.sql.DataSource;  
 import org.slf4j.Logger;  
 import org.slf4j.LoggerFactory;  
 import org.springframework.beans.factory.annotation.Autowired;  
 import org.springframework.stereotype.Controller;  
 import org.springframework.web.bind.annotation.ModelAttribute;  
 import org.springframework.web.bind.annotation.RequestMapping;  
 import org.springframework.web.bind.annotation.RequestMethod;  
 import org.springframework.web.bind.annotation.ResponseBody;  
 import com.webproject.model.Crud;  
 import com.webproject.service.CrudService;  
 /**  
  * Created by Muhamad Huda Avianto   
  * Nov 26, 2016  
  */  
 @Controller  
 public class MainController extends ConvertToJson{  
      private Logger log = LoggerFactory.getLogger(getClass()); //perlu penambahan dependecies slf4j.logger  
      @Autowired  
      private DataSource datasource;  
      @Autowired  
      private CrudService crudService;  
      @RequestMapping (value ={"/","/home"})  
      public String index (){  
           return "index";  
      }  
      @RequestMapping (value ={"crud"})  
      public String crud (){  
           return "crud";  
      }  
      @RequestMapping (value = {"/save"}, method = RequestMethod.POST)  
      @ResponseBody  
      public void saveOrUpdate(@ModelAttribute Crud crud, HttpServletRequest request, HttpServletResponse response){  
           Map<String, Object> map = new HashMap<String, Object>();  
           try{  
                Crud cr = this.crudService.get(crud.getId());  
                if(cr !=null){  
                     this.crudService.update(crud);  
                }else{  
                     this.crudService.save(crud);  
                }  
                map.put("message", "success");  
           }catch(Exception e){  
                e.printStackTrace();  
                log.error(e.getMessage(), e);  
                map.put("message", "failed");  
           }  
           this.encodeToJSON(response, map); // Perlu Penambahan dependecies Jackson JSON  
      }  
 }  

Pada kode diatas terlihat anotasi @RequestMapping. yang berguna untuk menangkap url dari user. kemudian url tersebut akan ditangkap oleh object saveOrUpdate. di dalam object tsb akan dijalankan proses update dan insert ke database yang diarahkan pada crudService yang telah kita buat sebelumnya.

  Crud cr = this.crudService.get(crud.getId());   
         if(cr !=null){   
            this.crudService.update(crud);   
         }else{   
            this.crudService.save(crud);   
         }   

Bisa dilihat pada kode berikut, ada kondisi if(cr != null), dimana cr adalah interface dari crudService yang mengambil object get(), jadi jika hasil get tidak sama dengan null / hasil dari object get ada isinya. maka lakukan update. jika null maka lakukan insert.

Baik dengan selesainya pembuatan controller maka kode back end telah rampung. mari kita buat js dan jsp nya. saya contohkan yang paling sederhana ya. simpan js nya di /ASSETS/js/simpan js nya disini. dan jsp nya silahkan simpan di /WEB-INF/views/simpan jsp disini.

 <%@ page language="java" contentType="text/html; charset=ISO-8859-1"  
      pageEncoding="ISO-8859-1"%>  
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>  
 <c:set var="contextPath" value="${pageContext.request.contextPath }" />  
 <!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=ISO-8859-1">  
 <title>Insert title here</title>  
 </head>  
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  
 <body>  
 <form>  
 Nama : <input type="text" id="nama" name="nama"><br /><br />  
 Alamat : <input type="text" id="alamat" name="alamat"><br /><br />  
 <button type="button" id="save">Submit</button><h6 id="result"></h6>  
 </form>  
 </body>  
      <script type="text/javascript" src="ASSETS/js/crud.js"></script>  
 </html>  

 $('#save').click(function() {  
      $.ajax({  
           async: false,  
           url: "save.json",  
           dataType: "json",  
           type: "post",  
           data:{  
                id: "3",  
                nama: $('#nama').val(),  
                alamat: $('#alamat').val()  
           },  
           success: function(data) {  
                 if(data.message == "success"){  
                          $('#result').html('SUCCESS');  
                          }else{  
                               $('#result').html('FAILED');  
                     }  
           }  
      });  
 });  

Silahkan analisa untuk js dan jsp nya ya, pada file js nya terdapat ajax yang mengarahkan pada url save.json. yang artinya url ini akan ditangkap oleh controller yang sudah kita buat tadi.

 @RequestMapping (value = {"/save"}, method = RequestMethod.POST)   

kenapa url nya menjadi save.json? karena kita menggunakan middle end yaitu jackson yang librarynya sudah kita download di awal tutorial. silahkan jalankan programnya. lalu masuk ke http://localhost:8080/myMvcProject/crud (lihat request mapping di controller). jika berhasil maka akan tampil seperti berikut. jangan lupa jalankan xampp nya terlebih dahulu ya agar connection database nya terbuka.

Gambar 3 Hasil
Oiya id yang saya insert masih manual. saya isikan di js, silahkan cek js nya ya. jika ingin otomatis silahkan rumah pengaturanya menjadi auto increment. silahkan rubah di class model ya. silahkan explore :)

saya akan bagikan link untuk download source code nya. jadi kalau masi ada yang pusing silahkan lihat source codenya langsung. bisa juga tanyakan langsung di kolom komentar. terimakasih :)

DOWNLOAD SOURCE CODE 

3 comments:

Contact Form

Name

Email *

Message *