Tutorial Belajar Grails Part 6: Groovy Server Pages

Grails menggunakan Groovy Server Pages(GSP) sebagai view yang digunakan pada aplikasi web kita. GSP sangat mirip dengan Java Server pages(JSP), jadi untuk yang pernah menggunakan JSP pasti tidak akan kesulitan menggunakan GSP. Seperti teknologi view pada aplikasi web biasanya, GSP menggunakan HTML yang dipadukan dengan GSP Tags. Kembali ke aplikasi Event Organizer, sekarang kita akan membuat view untuk controller yang telah kita buat. Untuk permulaan dapat kita lihat pada bagian grails-app -> conf -> UrlMappings.groovy. File tersebut berisi konfigurasi url mapping dari aplikasi grails kita. Modifikasi akan kita lakukan sedikit pada file tersebut, jadinya sebagai berikut

class UrlMappings {
	static mappings = {
		"/$controller/$action?/$id?"{
			constraints {
			}
		}
		"/"(controller: 'EOUser', action: 'index')
		"500"(view:'/error')
	}
 }

Dapat kita lihat untuk home url, aplikasi grails kita akan memanggil controller EOUser dan method index, parameter yang digunakan berupa map dimana key “controller” dan value “EOUser” begitu pula dengan key “action” dan value “index”. Terdapat pula error code 500, maka akan memanggil view “error.gsp”. Kita dapat melakukan konfigurasi yang berhubungan dengan url mapping didalam file ini. Jika kita lihat pada bagian grails-app -> views , maka kita akan melihat file gsp yang sudah di generate oleh grails dari fitur dynamic scaffolding. Grails sendiri menggunakan framework Sitemesh sebagai template layout untuk tampilan dari aplikasi kita. Dapat kita lihat folder grails-app -> views -> layouts , pada folder tersebut terdapat file main.gsp yang menjadi template layout default pada aplikasi grails kita. Untuk memahami template layout ini, sekarang akan kita buat sendiri tampilan dari aplikasi kita. Pertama buka file main.gsp pada folder layouts, lalu kosongkan file tersebut dan kita ganti menjadi

<!DOCTYPE html>
    <head>
        <title>
            <g:layoutTitle default="Event Organizer"></g:layoutTitle>
        </title>
	<g:layoutHead/>
    </head>
    <body>
<div id="header" style="background-color:greenyellow">
<h1 align="center">Header</h1>
</div>
<div id="body">
	    <g:layoutBody/></div>
<div id="footer" style="background-color:peru">
<h2 align="center">Footer</h2>
</div>
</body>
</html>

Nahh layout tersebut berisi header dan footer, jadi kita tidak perlu mendeklarasikan template layout header dan footer untuk tiap page, tinggal panggil saja template layoutnya. Disini terdapat 3 GSP tag yang kita gunakan

    • g:layoutTitle

tag ini berfungsi untuk menampilkan title dari target page kita

    • g:layoutHead

tag ini berfungsi untuk menambahkan isi head dari target page kita

    • g:layoutBody

tag ini berfungsi untuk menambahkan isi body dari target page kita

Setelah template layout kita sudah selesai buat maka sekarang saatnya membuat content dari tampilan yang akan kita buat. Pertama kita akan membuat content untuk fitur create dan read all, dalam hal ini kita akan membuat form untuk submit data user dan tabel untuk menampilkan list dari user yang ada. Kita akan membuatnya pada file index.gsp, karena sekarang kita baru menggunakan satu controller dan jika kita lihat konfigurasi UrlMappings yang telah kita lakukan maka kita perlu memindahkan file index.gsp ke folder views -> EOUser . Berikut isi index.gsp

<!DOCTYPE html>
    <head>
        <meta name="layout" content="main" />
    </head>
    <body>
<h3>CREATE USER</h3>
<g:form controller="EOUser" action="save">
	    <label>Full name:</label>
	    <g:textField name="fullName"></g:textField>
	    <label>User name:</label>
	    <g:textField name="userName"></g:textField>
	    <label>Password:</label>
	    <g:textField name="password"></g:textField>
	    <label>Email:</label>
	    <g:textField name="email"></g:textField>
	    <label>Website:</label>
	    <g:textField name="website"></g:textField>
	    <label>Bio:</label>
	    <g:textArea name="bio"></g:textArea>
	    <g:actionSubmit value="Save" action="save"></g:actionSubmit>
	</g:form>
<h3>LIST USER</h3>
<table border="2">
<thead>
<tr>
<td>Full Name</td>
<td>User Name</td>
<td>Passoword</td>
<td>Email</td>
<td>Website</td>
<td>Bio</td>
<td>Delete</td>
</tr>
</thead>
<tbody>
	       <g:each in="${listUser}" var="user">
<tr>
<td>${user.fullName}</td>
<td>${user.userName}</td>
<td>${user.password}</td>
<td>${user.email}</td>
<td>${user.website}</td>
<td>${user.bio}</td>
<td>
		           <g:form>
			       <g:hiddenField name="id" value="${user.id}"></g:hiddenField>
			       <g:actionSubmit value="delete" action="delete"></g:actionSubmit>
			       <g:actionSubmit value="edit" action="edit"></g:actionSubmit>
			   </g:form></td>
</tr>
</g:each></tbody>
</table>
</body>
</html>

Cukup banyak GSP tags yang kita gunakan kali ini, kita akan pelajari satu per satu. Mulai dari

<meta name="layout" content="main" />

Tag tersebut berfungsi untuk memanggil layout yang akan kita gunakan,dalam hal ini kita memanggil layout main.gsp. Untuk membuat form, kita menggunakan gsp tags juga seperti berikut

<g:form controller="EOUser" action="save">
<label>Full name:</label>
	<g:textField name="fullName"></g:textField>
	<g:actionSubmit value="Save"></g:actionSubmit>
</g:form>

Tags tersebut akan dirender oleh server dan menghasilkan tag html seperti berikut saat tampil di browser client

<form action="/EventOrganizer/EOUser/save" method="post">
	<label>Full name:</label>
	<input name="fullName" value="" id="fullName" type="text">
	<input name="_action_save" value="Save" type="submit">
</form>

Dapat kita lihat grails akan mendefinisikan attribute action dan method pada form tag. Bisa dibilang dengan GSP tags, code yang kita tulis menjadi lebih ringkas. Dengan GSP tags kita juga bisa menyisipkan logical dan iterasi kedalam view yang kita buat, seperti contohnya yang telah kita buat

<g:each in="${listUser}" var="user">
<tr>
<td>${user.fullName}</td>
<td>
            <g:form>
	        <g:hiddenField name="id" value="${user.id}"></g:hiddenField>
		<g:actionSubmit value="delete" action="delete"></g:actionSubmit>
		<g:actionSubmit value="edit" action="edit"></g:actionSubmit>
	    </g:form></td>
</tr>
</g:each>

Dalam block code diatas, kita menggunakan iterasi g:each, dimana tags tersebut akan melakukan itersi sebanyak isi dari List(${listUser}) yang diterima dari controller. Lalu kita bisa memanggil property(contoh:fullName) dari setiap object EOUser yang kita peroleh dengan tag ${user.fullName} pada contoh kasus diatas. Ada pula tag g:hiddenField dimana field ini berfungsi sebagai parameter saat melakukan edit dan delete. Untuk fitur edit, kita akan membuat lagi satu halaman khusus untuk mengedit data yang sudah ada lalu mengupdate pada database. Kita beri nama file halaman tersebut edit.gsp, berikut merupakan isinya

<!DOCTYPE html>
    <head>
        <meta name="layout" content="main">
    </head>
    <body>
<h3>EDIT USER FORM</h3>
<g:form controller="EOUser" action="update">
	    <label>Full name:</label>
	    <g:textField value="${eouser.fullName}" name="fullName"></g:textField>
	    <label>User name:</label>
	    <g:textField value="${eouser.userName}" name="userName"></g:textField>
	    <label>Password:</label>
	    <g:textField value="${eouser.password}" name="password"></g:textField>
	    <label>Email:</label>
	    <g:textField value="${eouser.email}" name="email"></g:textField>
	    <label>Website:</label>
	    <g:textField value="${eouser.website}" name="website"></g:textField>
	    <label>Bio:</label>
	    <g:textArea value="${eouser.bio}" name="bio"></g:textArea>
	    <g:hiddenField value="${eouser.id}" name="id"></g:hiddenField>
	    <g:actionSubmit value="Update"></g:actionSubmit>
        </g:form>
    </body>
</html>

Mirip sekali dengan form yang sudah kita buat sebelumnya pada index.gsp, hanya saja kita sudah mendefinisikan valuenya terlebih dahulu seperti ini

<g:textField value="${eouser.email}" name="email"></g:textField>

Setelah selesai kalau kita jalankan grails app kita maka tampilannya akan seperti berikut,

grails6
Index.gsp
grails7
Edit.gsp

Bisa kita coba fitur-fitur yang sudah kita tambahkan apakah bekerja dengan baik. Jangan lupa untuk memasukkan input sesuai dengan constraint yang kita definisikan di domain class karena kita belum tambahkan fitur validasi.

Advertisements

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