Pada artikel sebelumnya mengenai percobaan pembuatan aplikasi expedisi dengan Grails. Saya sudah menerangkan langkah2x dasar pembuatan proyek dan juga pembuatan domain2x dan pengenerasian tampilan berdasarkan domain2x tersebut. Jika anda mengikuti langkah2 yang saya berikan tersebut, maka dihadapan anda kini sudah terdapat aplikasi expedisi yang sederhana dimana masih banyak hal yang khususnya mengenai tampilan dan proses bisnis yang mungkin belum terlalu mudah dan bagus untuk bisa digunakan oleh operator yang awam mengenai teknologi ini.
Kali ini saya ingin mengajak anda untuk memodifikasi sedikit tampilan agar nantinya aplikasi ini mudah untuk digunakan bahkan oleh operator yang awam sekalipun.
Kali ini kita akan mengubah tampilan header, menu, dan juga halaman utama aplikasi ini.
Logo
Pada versi yang pertama, kita akan mendapati logo aplikasi ini yang masih menggunakan logo Grails. Supaya aplikasi ini makin terkesan personal kita harus mengubah logo tersebut agar sesuai dengan kebutuhan kita.
Yang ada harus lakukan hanyalah dengan cara meletakkan sebuah file gambar (*.png / *.gif / *.jpg) kedirektori
Menjadi seperti ini :
Menu
Jika persoalan logo sudah kita selesaikan, maka kini kita akan mengubah tampilan menu pada aplikasi ini. Awalnya, pada halaman utama aplikasi expedisi ini anda akan menemukan link2x yang mengarahkan anda kepada controller yang bisa anda gunakan untuk melihat, menambah, atau mengubah data2x domain anda. Cara ini tentunya akan menyulitkan operator yang akan menggunakan aplikasi ini nantinya. Oleh karena itu, kita harus mengubah link2x tersebut agar selalu tampil pada bagian atas aplikasi agar memudahkan operator untuk mengakses data2x yang ia inginkan.
Silahkan anda buka kembali file
Main Page
Untuk menyesuaikan tampilan awal aplikasi ini, kita harus menghapus / mengubah beberapa kode2x yang terdapat pada file
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Selamat datang di Sistem Manajement Operasional HBX</title>
<meta name="layout" content="main">
</head>
<body>
<div class="center_pane">
<h1>Executive Summary</h1>
</div>
</body>
</html>
Nah sekarang lihat kembali aplikasi anda pada alamat http://localhost:8080/expedisi.
*Happy hacking*
:)
Aplikasi Expedisi menggunakan Grails (part 2: Modifikasi Tampilan)
Setelah diartikel sebelumnya saya mencoba untuk membuat aplikasi CoPas menggunakan Grails. Kini saya mencoba lagi untuk belajar menggunakan Grails untuk aplikasi yang sedikit lebih rumit yaitu Sistem Informasi untuk Expedisi. Kebetulan juga ada temen yang minta bantuan untuk membuat aplikasi ini untuk proyek kecil2xan nya dia jadi deh saya pake kesempatan ini untuk lebih banyak lagi belajar menggunakan Grails.
Pertama-tama yang harus saya lakukan dalam membuat aplikasi expedisi ini adalah mendefinisikan domain 2x class yang akan digunakan. Syukurlah teman saya itu sudah dengan baik hati membantu saya membuat Class Diagram nya. Berikut ini adalah class diagram yang dia buat dengan menggunakan ArgoUML.
Setelah class diagram sudah dirasa tepat untuk digunakan, saya kemudian membuat project grails baru yang saya namakan "expedisi". Saya melakukannya dengan cara menjalan kan perintah
$ grails create-app expedisi
Tunggulah beberapa saat maka didalam direktori kerja anda yang sekarang akan terdapat direktori baru yang bernama "expedisi".
Berdasarkan class diagram diatas, saya kemudian membuat domain2x class nya dengan perintah
$ grails create-domain-class
Jadi misalnya saya ingin membuat domain class untuk Customer, maka yang saya lakukan adalah
$ grails create-domain-class Customer
Langkah ini akan membuat domain class Customer didalam directori grails-app/domain. Silahkan buka file grails-app/domain/Customer.groovy dengan editor kesayangan anda, dan anda akan melihat isi file seperti dibawah ini :
class Customer {
}
Kini, yang anda harus lakukan adalah memodifikasi domain class tersebut agar sesuai dengan struktur yang sudah kita definisikan di class diagram.
class Customer {
String customerNumber
String customerName
String customerCity
Integer customerZip
Boolean customerFlag
static constraints = {
customerNumber (nullable: false, blank: false, maxSize:10)
customerName (nullable: false, blank: false, size:1..50)
customerCity (nullable: false, blank: false, size:5..50)
customerZip (size:5)
customerFlag ()
}
String toString(){"${this.customerNumber} : ${this.customerName}"}
}
Jika anda lihat, struktur domain Customer ini mirip dengan POJO class di Java. Memang mirip sekali, kecuali beberapa hal yang membedakan yaitu :
Jika anda sudah selesai memodifikasi domain class Customer tersebut, yang kini anda lakukan adalah mengenerasikan controller class, view files (GSP), dan mungkin test-case. Untuk ini anda tidak perlu membuat class2x tersebut secara manual satu per satu. Anda cukup jalankan perintah
$ grails generate-all Customer
Tunggu beberapa saat, dan jika sudah selesai silahkan lihat file 2x yang dibuat oleh grails pada direktori2x grails-app/controller dan grails-app/view. Pada direktori tersebut seharusnya sudah terdapat satu class controller bernama CustomerController.groovy dan direktori customer/ yang merupakan direktori tempat menyimpan file2x *.gsp untuk domain Customer ini.
Yang kini anda bisa lakukan adalah menguji cobakan aplikasi yang sudah anda buat tadi dengan cara
Menjalankan aplikasi
$ grails run-app
dan kemudian mengarahkan browser anda pada alamat http://localhost:8080/expedisi.
Kini anda bisa melihat aplikasi baru anda ini. Untuk domain2x yang lain, anda bisa ikuti langkah2x seperti yang sudah dijelaskan diatas.
*Happy hacking*
:)
