• +62 (081) 322 209080
  • Pilih bahasa anda::
  • en

Blog

Wawasan dan ide untuk IT startups. Kami memberikan saran dan wawasan bagi pengusaha.

Hello World Example using Spring Framework MVC 3.1

Spring Framework MVC 3.1 Dengan Contoh Aplikasi WEB Hello World

Aplikasi “Hello world program” adalah aplikasi komputer yang terkenal dimana aplikasi ini menampilkan “Hello world” di layar perangkat komputer. Aplikasi ini biasanya merupakan aplikasi yang paling sederhana dalam sebagian besar bahasa-bahasa pemrogaman. Secara turun temurun “aplikasi Hello world” digunakan untuk menpertunjukan sintaksis yang paling sederhana dari sebuah bahasa pemrogaman.

Spring Framework MVC 3.1 dengan contoh aplikasi WEB Hello World akan dijabarkan di dalam tutorial ini.

Persyaratan Untuk Menjalankan Contoh Aplikasi WEB Hello World Dengan Spring Framework MVC 3.1

Teknologi yang wajib dipakai adalah sebagai berikut:

  1. Mesin Virtual Java (JRE). Klik disini untuk mengunduh.
  2. Spring Tool Suite (STS). Klik disini untuk mengunduh.
  3. Spring Framework 3.1.0.M1. Klik disini to untuk mengunduh.

Kita berpendapat bila anda telah mengetahui bagaimana menginstalasi JRE dan Spring Tool Suite, maka kita dapat melewati bagian ini.

Sekarang, marilah mulai membangun contoh aplikasi WEB Hello World dan menjalankan program Spring Tool Suite.

Jalankanlah program Spring Tool Suite (STS)

Pilih direktori kerja tempat dimana anda akan menyimpan kumpulan kodenya:

Pilih direktori kerja

Buat project WEB dinamis (Java Dynamic Web Project)

Klik kanan di dalam kolom package explorer seperti tertera digambar dan pilihlah New -> Dynamic Web Project:

Masukan nama projek anda

Masukan pustaka JAR yang diwajibkan (JAR libraries)

Kedalam proyek WEB dinamis anda, masukan pustaka Spring Framework MVC 3.1 libraries dengan versi Spring Framework 3.1.0.M1. Pustaka JAR yang dibutuhkan adalah sebagai berikut:

  1. commons-logging-1.1.1.jar
  2. org.springframework.asm-3.1.0.M1.jar
  3. org.springframework.beans-3.1.0.M1.jar
  4. org.springframework.context-3.1.0.M1.jar
  5. org.springframework.core-3.1.0.M1.jar
  6. org.springframework.expression-3.1.0.M1.jar
  7. org.springframework.web-3.1.0.M1.jar
  8. org.springframework.web.servlet-3.1.0.M1.jar

Masukan pustaka JAR yang disebutkan diatas dengan menyalinkannya kedalam direktori /WEB-INF/lib.

  1. Catatan: Direktori /WEB-INF digunakan untuk menampung berkas arsip dan direktori WEB tersendiri (private). Direktori ini diciptakan secara otomatis setelah anda membuat proyek WEB dinamis (Dynamic Web Project), Klik disini untuk melihat tangkapan layar (screen shot) tersebut.
  2. Catatan: Semua pustaka JAR yang berada di direktori lib akan dimuat secara otomatis jika server dijalankan.

Buat Deployment Descriptor – web.xml

Deployment descriptor – web.xml adalah bagian dari servlet standar untuk aplikasi WEB Java. Deployment descriptor tersebut mengatur pemetaan URL, penanganan URL, keamanan akses URL and dan informasi lainnya.
Nama berkas web.xml harus ditulis seperti apa adanya dan disimpan di direktori /WEB-INF oleh sebab dari prinsip “ketentuan diatas pengaturan” (Convention over Configuration) dari server logik Java WEB.

Buat berkas XML file dengan nama web.xml di dalam direktori /WEB-INF dan masukan kode sebagai berikut:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:javaee="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd" id="WebApp_ID" version="2.4">
  <display-name>hello-world-example</display-name>
  <servlet>
    <servlet-name>hello-world-example</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>hello-world-example</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>
</web-app>

Penjelasan

  1. Tag <display-name> adalah opsional. Tag tersebut menetapkan nama pendek yang akan ditampilkan di perangkat antarmuka pengguna grafis (Graphic User Interface / GUI).
  2. Tag <servlet>:
    1. Tag <servlet-name> adalah wajib. Tag tersebut menetapkan nama kanon/standar dari sebuat servlet.
    2. Tag <servlet-class> adalah wajib. Tag tersebut menetapkan kelas yang mengatur URL dari servlet tersebut.
      DispatcherServlet mengatur URIs yang masuk dan menetapkan kombinasi yang tepat untuk menemukan kelas pengurus (umumnya metode-metode di dalam kelas kontrolir (Controller classes) dan tampilan (umumnya JSPs) yang akhirnya menggabungkan itu semua untuk membentuk sebuah halaman WEB atau sumber tampilan yang selayaknya ditemukan pada tempatnya.
  3. >Tag <servlet-mapping>:
    1. Tag <servlet-name> adalah nama dari servlet dimana pola URL dipetakan menurut servlet tersebut. Nama ini harus sama dengan nama yang anda telah berikan di dalam tag <servlet>.
    2. Tag <servlet-mapping> menjabarkan pola URL.

Untuk lebih detil, anda bisa mendapatkan informasi tentang “the descriptor elements” di alamat WEB Java WebLogic server.

Mendaftar Servlet

Buat servlet utama dengan nama hello-world-example-servlet.xml di dalam direktori /WEB-INF.
Nama berkas servlet hello-world-example-servlet.xml harus sama dengan nama servlet yang telah ditetapkan sebelumnya di dalam web.xml dengan digabungkan dengan “-servlet.xml” dan disimpan dalam direktori /WEB-INF dan tambahkan kode yang tertera dibawah ini:

<?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:context="http://www.springframework.org/schema/context"
	xmlns:p="http://www.springframework.org/schema/p"
	xmlns:mvc="http://www.springframework.org/schema/mvc"
	xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.1.xsd
		http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.1.xsd
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.1.xsd">
		
	<!-- Activates various annotations to be detected in bean classes -->
	<context:annotation-config />

	<!-- Scans the classpath for annotated components that will be auto-registered as Spring beans.
	 For example @Controller and @Service. Make sure to set the correct base-package -->
	<context:component-scan base-package="com.flacom" />

	<!-- Configures the annotation-driven Spring MVC Controller programming model.
	Note that, with Spring 3.0, this tag works in Servlet MVC only!  -->
	<mvc:annotation-driven /> 
	
	<!-- Declare a view resolver -->
	<bean id="jspViewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver" 
    		p:prefix="/WEB-INF/view/" p:suffix=".jsp" p:order="1"/>
    		
</beans>

Penjelasan

  1. Tag <context:annotation-config> adalah untuk mengatur pendeteksian berbagai anotasi di dalam kelas-kelas bean
  2. Tag <context:component-scan> adalah untuk mendeteksi classpath untuk komponen-komponen yang teranotasi untuk didaftarkan secara otomatis sebagai Spring beans.
  3. Element <base-package=”com.flacom”> adalah paket basis (base package) dimana terletak komponen-komponen yang teranotasi tersebut.
  4. Tag <mvc:annotation-driven> mengkonfigurasi model pemrogaman dari kontrolir Spring Framework MVC 3.1 yang beranotasi.
  5. Bean jspViewResolver dengan kelas resolver penyelesai (resolver class) InternalResourceViewResolver adalah untuk mengatur semua tampilan (halaman WEB Java seperti JSP, Velocity, dan sebagainya). Dalam contoh contoh aplikasi WEB Hello World proyek ini, kita menggunakan JSP untuk halaman-halaman WEB tersebut.

Untuk informasi lebih mendetil, anda bisa menelaah lebih lanjut di dalam Dokumentasi Spring Framework MVC 3.1.x.

Buat Kontrolir

Setelah menetapkan berkas-berkas konfigurasi Spring Framework MVC 3.1., kita beralih untuk membuat kontrolir untuk mengatur tampilan termasuk URI. Klik kanan direktori src di dalam proyek, New dan pilih create a package. Kita membuat sebuah pake dengan nama “com.flacom.web.controller” dan tekan tombol finish. Setelah itu, kita membuat berkas Java di dalamnya dengan nama HomeController.java“, dengan cara mengklik kanan paket yang terlah dibuat tadi, New dan pilih Class

Di dalam berkas kontrolir “HomeController.java“, masukan kode sebagai berikut:

package com.flacom.web.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

@Controller
@RequestMapping(value={""})
public class HomeController {

	@RequestMapping("/home")
	public ModelAndView home(){
		
		return new ModelAndView("home");
	}
}

Penjelasan

  1. Anotasi @Controller adalah untuk mendaftarkan bean “homeController” kepada server. Dengan menganotasikan itu, kelas HomeController akan diamati oleh konteks anotasi (annotation context).
  2. Anotasi @RequestMapping adalah untuk mendaftarkan kelas URL dan juga metodenya. The @RequestMapping tepat diatas kelas tersebut adalah untuk mendefinisikan URL utama untuk kelas tersebut, diikuti dengan @RequestMapping tepat diatas metode home(). Di dalam contoh aplikasi WEB Hello World ini, URI yang akan berlaku adalah “http://localhost:8080/hello-world-example/home“.
  3. Obyek ModelAndView menjabarkan halaman WEB Java mana yang dituju. Kita menentukan “home.jsp” yang akan dibuat setelah ini.

Buat Tampilan

Kita akan membuat berkas terakhir yang dibutuhkan yaitu halaman WEB Java “home.jsp“.
Pertama-tama, kita buat sebuah direktori “view” di dalam direktori /WEB-INF dengan cara mengklik kanan direktori /WEB-INF, pilih New, Folder dan masukan nama direktori “view” dan tekan tombol Finish. Setelah itu, kita akan membuat berkas home.jsp di dalam direktori yang telah dibuat barusan dan menambahkan kode dibawah ini:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!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>Hello World Example</title>
</head>
<body>
<h1>Hello world</h1>
</body>
</html>

Penjelasan

  1. Tag <html>, <head> dan <body> adalah persayaratan minumum untuk mendefinisikan JSP
  2. Tag <title> adalah untuk menyatakan judul dari halamann WEB
  3. Tag <h1> di dalam body adalah untuk menampilkan teks kita “Hello world” di dalam penjelajah WEB (web browser).

Struktur Proyek

Pada akhirnya, struktur proyek harus persis dengan yang terlihat dibawah ini:

Struktur proyek di dalam Project Explorer

Siapkan Server

Sekarang, marilah kita menjalankan contoh aplikasi WEB Hello World ini dan mejelajahnya di penjelah WEB (web broser).

Sebelum contoh aplikasi WEB Hello World ini dapat dijelajah di penjelajahan WEB, kita harus mendaftarkan terlebih dahulu contoh aplikasi WEB Hello World di dalam server Java dan menjalankannya.

Tambahkan Contoh Aplikasi WEB Hello World di Dalam Server

Daftarkan contoh aplikasi WEB Hello World tersebut di dalam Server Java dengan cara mengklik kanan VMware vFabric tc Server Developer di dalam tab Servers dan memilih Add and remove sebagai mana di tampilkan di dalam tangkapan layar dibawah ini:

contoh aplikasi WEB Hello World di dalam Server

dan pilih proyek hello-world-example, klik addFinish:

Pilih Proyek tersebut

Jalankan Server

Setelah project hello-world-example ditambahkan, kita bisa menjalankan server dengan cara mengklik tombol start seperti di gambar dibawan ini:

Jalankan Server

Paggil URL dan Dapatkan Teks Hello World yang Terkenal

Bila tidak ada kesalahan di konsol STS, maka kita akan melihat contoh aplikasi WEB Hello World di penjelajah WEB.
Bukalah penjelajah WEB anda dan ketik “http://localhost:8080/hello-worl-example/home” dibagian alamat URL dan tekan tombol Enter. Anda akan melihat gambar seperti dibawah ini:

Paggil URL dibagian alamat URL untuk melihat hasilnya

Selamat!

Anda baru saja membuat contoh aplikasi WEB Hello World yang terkenal menggunakan Spring Framework MVC 3.1. Ternyata untuk membuat aplikasi WEB menggunakan Spring Framework MVC 3.1 begitu mudah. Apakah anda juga berpendapat seperti itu? Beri kami komentar.

Kode sumber sepenuhnya (termasuk pustaka JAR) dapat didownload disini – hello-world-example.jar.

Bila anda mendapatkan kesulitan untuk menjalankan aplikasi ini, anda dapat menghubungi kami. Berilah kami opini atau kommentar anda.

Jemmy Halim…

Jemmy is a person into technical details of developing WEB applications and their highly advanced back end. He earns his daily bread as a computer scientist and works on building WEB and Mobile Applications, Content Management Systems, and Money-Generating Software Solutions.