Spring Web MVC – How to add picture and css (Episode 6)


OK. Kita akan mundur agak jauh pada episode kali ini. Kita akan menggunakan kembali Project yang telah kita buat pada episode 1 saja (NOTE: jika menggunakan episode yang selanjutnya juga tidak apa-apa, tinggal disesuaikan saja). Bagi yang blom mengerti tentang episode 1 itu apa, silahkan baca link https://andreastjong.wordpress.com/2010/12/17/spring-web-mvc-%E2%80%93-quick-start-with-eclipse-episode-1/ , akan sangat membantu sekali dalam pemahaman artikel ini.

Download beberapa jar yang dibutuhkan:

  1. standard-1.1.2.jar – silahkan di download di http://repo1.maven.org/maven2/taglibs/standard/1.1.2/standard-1.1.2.jar

Pada contoh ini saya coba membuat New Project dengan nama secondProgram. Dengan isi + structure yang sama dengan contoh pada episode 1. Target yang kita inginkan adalah membuat halaman Web seperti contoh di bawah:

Saya anggap kalian sudah mengikuti semua langkah2 yang ada pada Episode1. Untuk selanjutnya kita akan menambahkan file gambar dan css ke dalam halaman hello.jsp (Mohon maaf kalau gambar dan css yang saya gunakan kurang bagus, takut terbentur dengan masalah license nih. :p). Silahkan ikuti langkah2 berikut:

  1. Download library tambahan di atas, lalu masukkan ke dalam folder library project
  2. Buat folder images pada folder WebContent, lalu copy kan. Image anda ke dalam folder tersebut. (NOTE: tolong diperhatikan, nama file dan ext nya, sebaiknya dibuat menjadi huruf kecil semua, karena jstl case sensitive)
  3. Buat folder css pada folder WebContent, lalu create new file – “style.css “. Yang isinya sebagai berikut:
    * { font: 11px verdana, Verdana,DIN-Light sans-serif; }
    
    body {
    	margin:0;
    	padding:0;
    	background:#f9f9f9;
    }
    
  4. Edit hello.jsp (untuk nama file gambarnya, silahkan disesuaikan saja dengan nama file gambar anda)
    <!DOCTYPE html PUBLIC
    	"-//W3C//DTD XHTML 1.1 Transitional//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    
    <html>
    <head>
    	<title>Example :: First Spring MVC Application</title>
    	<link href="<c:url value="/css/style.css"/>" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    	<h1>Example - Insert an Image</h1>
     	<p>For my nakama.</p>
    
     	<img alt="My Bike" src="<c:url value="/images/bike.png"/>">
    </body>
    </html>
    
    
  5. Coba jalankan aplikasi anda pada server. http://localhost:8080/secondProgram/hello.asik
Advertisements

One thought on “Spring Web MVC – How to add picture and css (Episode 6)

  1. nice article bro…
    saya juga berencana membuat artikel2 tentang berbagai framework sih (termasuk spring), tapi belom ada waktu yang pas…hehe
    artikel2 bro bagus2, hampir semua saya baca… 😀
    salam kenal ya bro.. (sesama java web programmer) 😀

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s