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*
:)
Entah kenapa, beberapa waktu belakakangan ini saya menjadi terobsesi mempelajari Grails. Mungkin karena iri dengan RoR namun malas untuk belajar Ruby. Atau karena terpengaruh hasutan temen2x sesama programmer. Atau mungkin hanya iseng aja. Yang jelas, akhir2x ini saya banyak dibuat kagum dengan kemudahan yang ditawarkan Grails dalam membuat web app secara cepat dan mudah.
Oh ya, biasanya jika di artikel2x lain yang membahas mengenai tutorial, biasanya sipenulis akan mengawali dengan paragraf yang memperkenalkan secara singkat mengenai teknologi yang akan diterangkannya. Namun jujur saja, kali ini saya agak malas untuk menulis paragraf yang sebenarnya sudah banyak yang menuliskannya. So, jika anda blm mengetahui mengenai Grails silahkan merujuk ke website nya aja ya :-p .
Well, kalo gitu kita langsung aja membuat aplikasi sederhana yang saya sebut dengan coPas. Aplikasi coPas ini adalah aplikasi yang mirip dengan aplikasi codepaste yang dibuat oleh Bradley Gill dimana anda dapat meperlihatkan source code anda kepada orang lain dengan tampilan yang bagus dengan mudah.
Menyiapkan Lingkungan Kerja
Seperti biasa juga, sebelum kita mulai membuat suatu aplikasi, kita dituntut untuk selalu memastikan bahwa lingkungan kerja dikomputer kita sudah terdapat berbagai tool yang dibutuhkan. Dalam membangun aplikasi mengunakan Grails, berikut ini adalah daftar aplikasi / tool yang seharusnya sudah ada dilingkungan kerja komputer anda.
- Java SDK
- Grails
Sedangkan untuk langkah2x installasi setiap tool tersebut silahkan merujuk ke websitenya masing2x.
Membuat template aplikasi
Jika anda sudah berhasil menginstall semua tool yang dibutuhkan, kini anda dapat memulai membuat aplikasi. Silahkan buat template aplikasi dengan cara mengetikkan perintah dibawah ini pada console anda.
$grails create-app copas
Jika perintah tersebut berhasil maka kini akan ada direktori baru bernama copas. Silahkan masuk kedalam direktory tersebut dengan mengetikkan
$cd copas
Apabila anda melihat direktori itu, maka anda akan menemukan banyak direktori dan file2x yang nantinya akan kita butuhkan dalam mengkonfigurasi aplikasi copas tersebut. Namun, untuk sementara ini kita belum akan menyentuh direktori / file 2x tersebut.
Sekarang silahkan anda ketikkan perintah dibawah ini untuk membuat domain pertama anda. Yang dimaksud dengan domain disini adalah sebuah class yang mirip dengan POJO dan berisi representasi dari sebuah table dalam database anda. Untuk kali ini kita hanya kan membuat domain "Code" yang nantinya akan digunakan untuk menyimpan source code yang user masukkan keaplikasi kita ini.
$grails create-domain-class Code
Setelah perintah tersebut selesai dijalankan, silahkan buka file grails-app/domain/Code.groovy dengan editor kesayangan anda. Anda akan melihat bahwa didalam domain tersebut hanya beisi class kosong. Kini anda harus mengisikannya dengan beberapa attribute sehingga akan seperti gambar dibawah ini.
Setelah itu, dari lokasi root direktori proyek anda ini, silahkan ketikkan perintah dibawah ini
$grails generate-all
Dan kemudian jalan aplikasi dengan perintah berikut ini
$grails run-app
Silahkan tunggu beberapa saat hingga aplikasi anda berjalan dengan sukses, dan kemudian ketikkan pada kotak alamat dibrowser anda lokasi http://localhost:8080/copas.
Seharusnya kini akan muncul tampilan seperti pada gambar dibawah ini.
Agar tampilan source code yang telah anda simpan nanti dapat dimunculkan dengan rapi, maka anda harus menginstall plugin syntax-highlighter. Ketikkan perintah berikut ini pada console
$grails install-plugin syntax-highlighter
Kemudian modifikasi file grails-app/views/code/show.gsp sehingga akan menjadi seperti dibawah ini
Sekarang silahkan jalankan kembali aplikasi anda dengan perintah $grails run-app
Wah, ternyata gampang kan bikin aplikasi web :D
update :
Saya sudah membuat project di google code. Silahkan download source code nya disini untuk mempelajarinya.
