Browse > Home / Archive: August 2008

Aplikasi Expedisi menggunakan Grails (part 2: Modifikasi Tampilan)

August 30, 2008

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 /web-app/images dan kemudian mengubah sedikit kode pada file /grails-app/view/layout/main.gsp seperti dibawah ini :
<div class='logo'>
<img height="100" src="${createLinkTo(dir:'images',file:'grails_logo.jpg')}" alt="Grails Logo" />
</div>

Menjadi seperti ini :
<div class="logo">
<img height="100" src="${createLinkTo(dir:'images',file:'hbs.gif')}" alt="HBS Express" />
</div>

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 /grails-app/view/layout/main.gsp dan cari baris kode <div class="nav"> . Masukkan kode2x dibawah ini diantara kode tadi hingga kode <div> penutupnya.
<span class="menuButton"><a class="home" href="${createLinkTo(dir:'')}">Home</a></span>
<span class="menuButton"><a class="list" href="${createLinkTo(dir:'customer',file:'list.gsp')}">Penerima</a></span>
<span class="menuButton"><a class="list" href="${createLinkTo(dir:'vehicle',file:'list.gsp')}">Kendaraan</a></span>
<span class="menuButton"><a class="list" href="${createLinkTo(dir:'receive',file:'list.gsp')}">Terima Barang</a></span>
<span class="menuButton"><a class="list" href="${createLinkTo(dir:'delivery',file:'list.gsp')}">Kirim Barang</a></span>
<span class="menuButton"><a class="list" href="${createLinkTo(dir:'repassHeader',file:'list.gsp')}">Repass Panjang</a></span>
<span class="menuButton"><a class="list" href="${createLinkTo(dir:'cost',file:'list.gsp')}">Biaya</a></span>
<span class="menuButton"><a class="list" href="${createLinkTo(dir:'invoice',file:'list.gsp')}">Tagihan ke pelanggan</a></span>
<span class="menuButton"><a class="list" href="${createLinkTo(dir:'accountReceive',file:'list.gsp')}">Penerimaan</a></span>

Main Page
Untuk menyesuaikan tampilan awal aplikasi ini, kita harus menghapus / mengubah beberapa kode2x yang terdapat pada file /web-app/index.gsp sehingga menjadi seperti dibawah ini :
<!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*
:)

If you like articles from this blog, don't forget with other sites http://blog.indrio.name http://indrio.wordpress.com

Written by Indrio Eko Purnomo · Filed Under rss anggota kbbc 

Laporan Donor Darah Tangerang

August 25, 2008

Donda berlangsung sukses walaupun yg hadir cuma segelintir. Kali ini bertempat di PMI Kabupaten Tangerang. Yang hadir kemarin:

edy www.caplang.net
payjo http://payjo.info http://payjo.wordpress.com
ade http://die4pleasure.com http://die4pleasure.wordpress.com
kombor + istri + anak http://kombor.com http://moharifwidarto.com
didit http://nindityo.com/
anggota yg baru (terjebak) novi http://novimunarianto.com/
ranto http://ranto86.dagdigdug.com/

Selain donda, ngobrol n dapet kaos baru yang keren, juga udah ngumpulin sekardus buku. Ada juga sumbangan tunai dari Mbak Triyani. Untuk sementara ditampung di rumah saya di Puri Beta, Cileduk. Masih bisa kalo ada yg minat nyumbang buku juga http://1000buku.dagdigdug.com/faq/

Rencananya bulan September mo ngadain buka bersama, tanggal 21 september 2008 di rumah Om Anggara. Sekalian ngumpulin sumbangan buat yg mau menyumbang. Boleh tambahan buku atau uang tunai untuk disalurkan ke panti asuhan.

Terima kasih atas kehadirannya (dan traktiran Ade) kemarin. Walau yang hadir sedikit tapi ga bikin patah semangat untuk terus berkumpul. Semoga bulan depan bisa kumpul lebih banyak lagi dan bikin agenda yg lain lagi. Sekalian menyusun rencana menyambut Pesta Blogger (25 oktober) 2008.

Salam,
Edy


Mas Didit tergeletak pasrah :lol:

Written by caplang · Filed Under tangerang 

Aplikasi Expedisi menggunakan Grails (part 1)

August 15, 2008

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 :
  • Tidak ada titik-koma (;)
  • constraints : yaitu tempat dimana anda mengatur validasi setiap field
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*
:)
If you like articles from this blog, don't forget with other sites http://blog.indrio.name http://indrio.wordpress.com

Written by Indrio Eko Purnomo · Filed Under rss anggota kbbc 

Donor Darah Kedua KBBC

August 11, 2008

Komunitas Bloger Benteng Cisadane (KBBC) kembali akan menggelar donor darah bagi anggota-anggotanya dan siapa saja yang tertarik menyumbangkan sedikit darahnya. Mau banyak juga tak apa.

Hari/tanggal: Minggu/ 24 Agustus 2008
Jam: 10.00-selesai
Lokasi: PMI Kab. Tangerang, Jl. Mayjen Sutoyo No. 1, Tangerang (dekat stadion olahraga Ahmad Yani)
Agenda: kopdar bulanan, donor darah dan pengumpulan buku

Kontak:
Kang Kombor 021-70314445
Payjo 08998837064
Edy 0818987339

Peta lokasi (klik untuk memperbesar)

Written by caplang · Filed Under kopdar, tangerang