Memakai Spring MVC di SpringSource Tool Suite


MVC adalah sebuah design pattern yang memisahkan logika aplikasi ke dalam tiga wilayah yang berbeda yaitu Model, View, dan Controller.  Hal ini berbeda dengan multi-tier (N-tier) dimana pada N-tier terdapat pemisahan tier pada mesin yang berbeda di komputer yang berbeda.  Salah satu alasan terbentuknya arsitektur N-tier adalah untuk menciptakan skalabilitas yang lebih baik.  Sebagai contoh, program database umumnya membutuhkan memori dalam jumlah besar sementara program logika membutuhkan prosesor yang kencang.  Dengan arsitektur N-tier, database berada di sebuah tier tersendiri yang diletakkan pada server dengan memori berjumlah besar dan prosesor sedang.  Sementara itu, business logic dapat berada di sebuah server dengan memori sedang tetapi memiliki prosesor berkecepatan tinggi.

Bila N-tier tercipta karena alasan skalabilitas, maka MVC terlahir untuk memisahkan program kita kedalam tiga elemen yang terpisah dan sebisa mungkin tidak saling terkait. Sebagai contoh, bagian View yang tadinya adalah HTML, dapat diganti menjadi PDF, Flash, ataupun WAP (mobile), tanpa harus memprogram ulang Controller dan Model.  Bila kita ingin meletakkan MVC ke dalam N-tier, maka MVC berada di Presentation Tier.

Pada artikel ini, saya akan membuat sebuah aplikasi MVC sederhana dengan memakai Spring MVC (bagian dari Spring Framework) dan IDE SpringSource Tool Suite (STS).  Spring Framework memang lebih terkenal dengan IoC container-nya, yang banyak ditiru di JEE 6.  Memakai framework ini menimbulkan sebuah perasaan nostalgia tersendiri, karena Spring Framework adalah framework Java yang pertama kali saya pakai setelah lulus kuliah dan bekerja sebagai programmer junior.

Pada STS, saya mulai dengan memilih menu File, New, dan Spring Template Project.  Pada kotak dialog New Template Project, saya memilih Spring MVC Project.  Pada dialog New Spring MVC Project yang muncul, saya mengisi Project Name dengan latihan-mvc, mengisi top-level package dengan co.id.jocki.latihan dan kemudian men-klik tombol Finish.  STS akan membuat struktur proyek seperti pada gambar berikut ini:

Struktur Proyek Spring MVC

Struktur Proyek Spring MVC

Template Spring MVC secara otomatis membuat sebuah controller bernama HomeController dan sebuah view dengan nama home.  Saya akan mengabaikan dua file ini.

Membuat Model

Pada langkah berikutnya, saya membuat sebuah model dengan nama Mahasiswa di package co.id.jocki.mahasiswa.  Saya mulai dengan men-klik kanan pada src/main/java kemudian memilih New, Class.  Lalu saya mengisi dialog New Java Class dengan seperti yang terlihat di gambar:

Membuat Model Baru

Membuat Model Baru

Class Mahasiswa sebagai model memiliki isi seperti berikut ini:

package co.id.jocki.mahasiswa;

public class Mahasiswa {

  private String nim;
  private String nama;
  private Date tanggalLahir;

  public String getNim() {
    return nim;
  }
  public void setNim(String nim) {
    this.nim = nim;
  }
  public String getNama() {
    return nama;
  }
  public void setNama(String nama) {
    this.nama = nama;
  }
  public Date getTanggalLahir() {
    return tanggalLahir;
  }
  public void setTanggalLahir(Date tanggalLahir) {
    this.tanggalLahir = tanggalLahir;
  }
}

Sebelum beranjak meninggalkan model ini, saya ingin mencoba menggunakan fitur Bean Validation yang didukung oleh Spring Framework.  Dengan Bean Validation, saya tidak perlu report-repot melakukan validasi di sisi client maupun di sisi server, karena semuanya akan dilakukan otomatis oleh Spring Framework.  Untuk itu, saya perlu menambahkan dependency baru di Maven dengan melakukan langkah-langkah seperti berikut ini:

  1. Buka file pom.xml di STS.  Akan muncul sebuah halaman editor untuk Maven.
  2. Buka tab Dependencies (disebelah kanan tab Overview).
  3. Klik tombol Add…
  4. Pada bagian Enter groupId, artifactId or sha1 prefix or pattern, isi dengan validation-api.
  5. Klik pada javax.validationseperti yang terlihat di gambar berikut ini:

    Dependency Maven untuk validation-api

    Dependency Maven untuk validation-api

  6. Klik tombol OK.
  7. Kembali Klik tombol Add…
  8. Pada bagian Enter groupId, artifactId or sha1 prefix or pattern, isi dengan hibernate-validator.
  9. Klik pada org.hibernateseperti yang terlihat di gambar berikut ini:

    Dependency Maven untuk hibernate-validator

    Dependency Maven untuk hibernate-validator

  10. Klik tombol OK.
  11. Kembali klik tombol Add…
  12. Pada bagian Enter groupId, artifactId or sha1 prefix or pattern, isi dengan joda-time.
  13. Klik pada joda-timeseperti yang terlihat di gambar berikut ini:

    Dependency Maven untuk joda-time

    Dependency Maven untuk joda-time

  14. Klik tombol OK.
  15. Klik kanan pada nama proyek, pilih Maven, Update Dependencies… dan klik pada tombol OK. Beri tanda centang pada Force Update of Snapshots/Releases.  Jangan lupa menghubungkan komputer ke internet agar Maven dapat men-download JAR yang dibutuhkan.  Hibernate Validator dan Joda Time adalah dua framework terpisah yang bukan merupakan bagian dari Spring Framework.

Sekarang, kembali ke class Mahasiswa.java, saya akan mengubah isi file tersebut menjadi:

package co.id.jocki.mahasiswa;

import java.util.Date;

import javax.validation.constraints.Past;
import javax.validation.constraints.Size;

import org.hibernate.validator.constraints.NotEmpty;
import org.springframework.format.annotation.DateTimeFormat;

public class Mahasiswa {

    @Size(min=8, max=8, message="NIM harus 8 digit!")
    private String nim;

    @NotEmpty(message="Nama harus di-isi!")
    private String nama;

    @Past(message="Tanggal harus berada di masa lalu!")    
    @DateTimeFormat(pattern="dd/MM/YYYY")    
    private Date tanggalLahir;

    public String getNim() {
        return nim;
    }
    public void setNim(String nim) {
        this.nim = nim;
    }
    public String getNama() {
        return nama;
    }
    public void setNama(String nama) {
        this.nama = nama;
    }
    public Date getTanggalLahir() {
        return tanggalLahir;
    }
    public void setTanggalLahir(Date tanggalLahir) {
        this.tanggalLahir = tanggalLahir;
    }   
}

Pada kode program di atas, saya memberikan validasi @Size pada atribut nim dimana panjang nim harus 8 karakter.  Pesan yang ada di message akan ditampilkan di view bila nilai tidak memenuhi persyaratan.  Saya juga memberikan validasi @NotEmpty untuk atribute nama, sehingga nantinya nama wajib di-isi.  Saya memberikan validasi @Past di tanggalLahir untuk memastikan bahwa tanggalLahir yang dimasukkan oleh pengguna tidak melewati batas hari ini (karena tidak mungkin ada mahasiswa yang tanggal lahirnya tahun depan tetapi sudah duluan mendaftar).

Membuat View

Sekarang, saya akan membuat View.  Pada src/main/webapp/WEB-INF/views, saya men-klik kanan folder views dan memilih New, Others.  Pada dialog yang muncul, saya memilih Web, JSP File, kemudian men-klik tombol Next.  Pada File name, saya mengisi dengan nama tambahMahasiswa.jsp.  Setelah itu, saya men-klik tombol Finish.  Struktur proyek akan terlihat seperti pada gambar berikut ini:

Menambah view baru

Menambah view baru

Berikut ini adalah isi file tambahMahasiswa.jsp:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>    
<!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">
<style type="text/css">
    .error {color: red; }    
</style>
<title>Tambah Mahasiswa Baru</title>
</head>
<body>
    <h1>Tambah Mahasiswa Baru</h1>    
    <form:form modelAttribute="mahasiswa" method="post">
        <fieldset>    
        <p>
            <form:label path="nim" for="nim" cssErrorClass="error">NIM:</form:label>
            <form:input path="nim" />
            <form:errors path="nim" cssClass="error"/>
        </p>

        <p>
            <form:label path="nama" for="nama" cssErrorClass="error">Nama:</form:label>
            <form:input path="nama" />
            <form:errors path="nama" cssClass="error"/>
        </p>

        <p>
            <form:label path="tanggalLahir" for="tanggalLahir" cssErrorClass="error">Tanggal Lahir:</form:label>
            <form:input path="tanggalLahir"/>
            <form:errors path="tanggalLahir" cssClass="error"/>
        </p>
        <p>
            <input type="submit"/>
        </p>        
        </fieldset>
    </form:form>
</body>
</html>

Pada halaman JSP tersebut, saya memakai tag library yang disediakan oleh Spring Framework dengan memakai directive taglib.  Spring MVC menyediakan tag seperti <form:form>, <form:label>, <form:input> dan <form:errors> untuk mempermudah data-binding dengan model.  Pada JSP tersebut, saya melakukan binding dengan model Mahasiswa.  Nilai path di <form:label>, <form:input> dan <form:errors> harus sesuai dengan nama atribut/variabel di model. Pada <form:label> saya menambahkan cssErrorClass sehingga bila terjadi kesalahan validasi, maka class tersebut akan dipakai (pada contoh ini, mengubah warna tulisan menjadi merah).

Kemudian, dengan mengikuti langkah yang sama dengan yang diatas, saya membuat sebuah view baru dengan nama lihatMahasiswa.jsp.  Isi dari file lihatMahasiswa.jsp adalah:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>   
<!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">
<style type="text/css">
    table {margin-bottom: 20px; border: solid 1px black;}
    th {text-align: left; padding-right: 20px; border-bottom: solid 2px black;}
    td {padding-right: 20px;}    
</style>
<title>Lihat Daftar Mahasiswa</title>
</head>
<body>
<h1>Daftar Mahasiswa</h1>
<table>
<thead>
    <tr><th>NIM</th><th>Nama</th><th>Tanggal Lahir</th></tr>
</thead>
<c:forEach items="${lstMahasiswa}" var="mahasiswa">
    <tr>
    <td>${mahasiswa.nim}</td>
    <td>${mahasiswa.nama}</td>
    <td><fmt:formatDate value="${mahasiswa.tanggalLahir}" pattern="dd/MM/yyyy"/></td>
    </tr>
</c:forEach>
</table>
<a href="mahasiswa">Tambah Mahasiswa Baru</a>
</body>
</html>

Pada halaman JSP ini, saya mengharapkan controller untuk mengirimkan sebuah List dengan nama lstMahasiswa.  List tersebut harus merupakan kumpulan dari class Mahasiswa (model yang saya pakai).  Lalu dengan menggunakan JSTL <c:forEach>, saya melakukan perulangan untuk menampilkan setiap class Mahasiswa sebagai baris di dalam tabel.  Saya juga menggunakan JSTL <fmt:formatDate> untuk men-format atribut tanggalLahir yang bertipe java.util.Date.

Membuat Controller

Berikutnya, saya membuat sebuah controller dengan nama MahasiswaController.java di package yang sama.  Caranya adalah dengan men-klik kanan di nama package co.id.jocki.mahasiswa, kemudian memilih menu New, Class.  Pada dialog New Java Class yang muncul, isi nama dengan MahasiswaController, kemudian klik tombol Finish.  Kemudian, saya membuat kode program seperti berikut ini untuk MahasiswaController.java:

package co.id.jocki.mahasiswa;

import java.util.ArrayList;
import java.util.List;

import javax.validation.Valid;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
@RequestMapping(value="/mahasiswa")
public class MahasiswaController {

    private List<Mahasiswa> lstMahasiswa = new ArrayList<Mahasiswa>();

    @RequestMapping(method=RequestMethod.GET)
    public String getFormTambah(Model model) {
        model.addAttribute(new Mahasiswa());
        return "tambahMahasiswa";
    }    

    @RequestMapping(method=RequestMethod.POST)
    public String tambahMahasiswa(@Valid Mahasiswa mahasiswa, BindingResult result, Model model) {
        if (result.hasErrors()) {
            return "tambahMahasiswa";
        }
        lstMahasiswa.add(mahasiswa);
        model.addAttribute("lstMahasiswa", lstMahasiswa);
        return "lihatMahasiswa";
    }
}

Untuk menjalankan proyek ini, klik pada icon Run As… dan pilih Run As, Run on Server.  Secara default, STS akan memakai server VMware vFabric tc Server Developer Edition v2.7 seperti yang terlihat digambar berikut ini:

Menjalankan Proyek

Menjalankan Proyek

Pada dasarnya tc Server adalah sebuah server Apache Tomcat yang dilengkapi fitur tambahan (dan dukungan komersial).  Pada kotak dialog yang muncul, beri centang pada Always use this server when running this project.  Klik tombol Next.  Pastikan bahwa latihan-mvc berada di daftar configured, bukan di available.  Setelah itu klik tombol Finish.

STS akan berusaha menjalankan tc Server sembari menampilkan informasi di window Console.  Bila tc Server sudah selesai dijalankan, akan terdapat baris dengan tulisan seperti:

INFO: Server startup in 2789 ms

Saya akan mulai dengan membuka browser dan memasukkan URL http://localhost:8080/latihan-mvc/mahasiswa.  Hal ini akan menyebabkan salah satu dari method di MahasiswaController dikerjakan, karena nilai value di @RequestMapping untuk MahasiswaController adalah /mahasiswa.

Karena saya memasukkan URL secara biasa dengan mengetik di browser, maka request method yang saya pakai adalah request method GET.  Dengan demikian, getFormTambah() di MahasiswaController akan dikerjakan.  getFormTambah() hanya membuat sebuah objek Mahasiswa baru, kemudian mengembalikan sebuah String tambahMahasiswa.  Hal ini akan menyebabkan view tambahMahasiswa.jsp ditampilkan di browser, seperti yang terlihat di gambar berikut ini:

View tambahMahasiswa

View tambahMahasiswa

Pada saat saya menekan tombol Submit Query, maka URL /mahasiswa akan kembali dipanggil, tapi kali ini dengan request method POST.  Hal ini menyebabkan method tambahMahasiswa() di MahasiswaController dikerjakan.  Saya menambahkan annotation @Valid pada model Mahasiswa sehingga Spring MVC akan melakukan validasi model yang dikirim oleh view secara otomatis seperti yang terlihat pada gambar berikut ini:

Validasi secara otomatis

Validasi secara otomatis

Bila tidak ada kesalahan, maka model yang dikirim oleh view akan disimpan ke dalam sebuah List.  Tentu saja, pada proyek nyata, model tidak disimpan ke dalam list melainkan kedalam sebuah database.  Setelah menyimpan model ke dalam List, tambahMahasiswa() akan memanggil view lihatMahasiswa.jsp sembari mengirimkan List berisi model Mahasiswa dengan nama atribut lstMahasiswa, sehingga tampilan yang diperoleh adalah seperti berikut ini:

Tampilan view lihatMahasiswa

Tampilan view lihatMahasiswa

Untuk melihat gambaran umum MVC di proyek secara garis besar, saya dapat membuka window Spring Explorer yang terlihat seperti pada gambar berikut ini:

Tampilan Spring Explorer

Tampilan Spring Explorer

Perihal Solid Snake
I'm nothing...

2 Responses to Memakai Spring MVC di SpringSource Tool Suite

  1. Galih PS mengatakan:

    cara memasukan file css yang terpisah di file *.jsp gimana caranya ?

    • Solid Snake mengatakan:

      Untuk merefer ke file CSS terpisah, buat file CSS dan simpan di bawah folder webapp. Jika kamu berasal dari latar belakang PHP, maka folder webapp ini setara dengan folder htdocs, tempat dimana kamu meletakkan file yang bisa diakses publik. Setelah itu, tambahkan <link rel="stylesheet" href="foldercss/namafile.css” /> di JSP kamu. Ga ada bedanya dengan HTML dan PHP, karena JSP juga diterjemahkan menjadi HTML.

Apa komentar Anda?

Please log in using one of these methods to post your comment:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: