Aplikasi Expedisi menggunakan Grails (part 2: Modifikasi Tampilan)

Filed under: , , by:

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*
:)

0 komentar:

Post a Comment

Subscribe to: Post Comments (Atom)