Blognya Oyon: Belajar Grails (bagian ketiga)

Pada bagian sebelumnya kita sudah membuat sebuah aplikasi sederhana menggunakan Grails. Sekarang mari kita bahas perintah-perintah yang di pergunakan pada pembahasan sebelumnya.

grails create-app nama_aplikasi
Perintah diatas akan membuat sebuah folder yang berisi folder/direktori dan file-file yang akan kita gunakan untuk membuat aplikasi. Folder/direktori yang di hasilkan juga mempunyai beberapa file konfigurasi untuk di gunakan dalam IDE NetBeans, terutama NetBeans versi 6.5 keatas yang sudah di tambah plugin Groovy.
grails run-app
Perintah diatas di gunakan untuk menjalankan aplikasi yang telah kita buat dengan Grails. Grails menggunakan web server Jetty sebagai web server bawaan untuk mencoba aplikasi kita. Aplikasi yang kita buat menggunakan Grails dapat di deploy pada web server lainnya seperti Apache Tomcat, JBoss, dll.
grails create-domain-class namaDomain
Perintah diatas di gunakan untuk membuat sebuah kelas domain (model) pada aplikasi kita. File yang di hasilkan adalah berupa sebuah template kosong yang harus kita kustomisasi lagi agar sesuai dengan aplikasi yang akan kita buat.
grails generate-all namaDomain
Perintah diatas digunakan akan menghasilkan file-file controller dan view dari domain yang kita tentukan.

Kustomisasi Tampilan

Coba anda buka file index.gsp yang terdapat pada folder/direktori grails-app/views. Isinya kurang lebih seperti di bawah ini:

<html>
  <head>
    <title>Welcome to Grails</title>
    <meta name="layout" content="main" />
  </head>
  <body>
    <h1 style="margin-left:20px;">Welcome to Grails</h1>
    <p style="margin-left:20px;width:80%">Congratulations, you have successfully started your first Grails application! At the moment
this is the default page, feel free to modify it to either redirect to a controller or display whatever content you may choose. Below is a list of controllers that are currently deployed in this application, click on each to execute its default action:</p>
    <div class="dialog" style="margin-left:20px;width:60%;">
      <ul>
        <g:each var="c" in="${grailsApplication.controllerClasses}">
          <li class="controller"><g:link controller="${c.logicalPropertyName}">${c.fullName}</g:link></li>
        </g:each>
      </ul>
    </div>
  </body>
</html>

Kode diatas adalah kode untuk menampilkan halaman pertama aplikasi kita. Sedangkan untuk untuk layout yang akan dipakai oleh seluruh form pada aplikasi kita, coba anda buka file main.gsp pada folder/direktori grails-app/views/layout. Isi dari file tersebut kira-kira seperti di bawah ini:

<html>
  <head>
    <title><g:layoutTitle default="Grails" /></title>
    <link rel="stylesheet" href="${resource(dir:'css',file:'main.css')}" />
    <link rel="shortcut icon" href="${resource(dir:'images',file:'favicon.ico')}" type="image/x-icon" />
    <g:layoutHead />
    <g:javascript library="application" />
  </head>
  <body>
    <div id="spinner" class="spinner" style="display:none;">
    <img src="${resource(dir:'images',file:'spinner.gif')}" alt="Spinner" />
    </div>
    <div class="logo"><img src="${resource(dir:'images',file:'grails_logo.jpg')}" alt="Grails"  /></div>
    <g:layoutBody />
  </body>
</html>

Mari kita bahas potongan kode diatas.

<g:layoutTitle default="Grails" />
Tag ini digunakan untuk menampilkan judul pada jendela browser.
${resource(dir:'css',file:'main.css')}
Kode diatas akan menghasilkan teks '/nama_aplikasi/css/main.css' yang mengacu pada file main.css di folder/direktori web-app/css.
${resource(dir:'images',file:'favicon.ico')}
Kode diatas akan menghasilkan teks '/nama_aplikasi/images/favicon.ico' yang mengacu pada file favicon.ico di folder/direktori web-app/images.
<g:layoutHead />
Tag ini digunakan untuk memastikan bahwa tag-tag yang kita letakkan diantara tag html '<head> ... </head>' pada setiap view yang dibuat akan dirender secara benar oleh Grails.
<g:javascript library="application" />
Tag diatas akan menghasilkan teks '<script type="text/javascript" src="/nama_aplikasi/js/application.js"></script>' .
<g:layoutBody />
Tag ini digunakan untuk menampilkan tag-tag dan kode-kode yang berada diantara tag html '<body> .. </body>' pada halaman view yang dibuat.

Cobalah anda utak-atik layout dari aplikasi yang anda buat. Lihat hasilnya. Jika anda sudah mahir, cobalah menambahkan css template ke dalam aplikasi anda.

Contoh mengubah layout menggunakan css template

Misalnya anda telah memiliki sebuah css template (buatan sendiri maupun buatan orang lain) dan anda ingin menggunakannya untuk aplikasi yang anda buat dengan Grails. Langkah-langkah yang harus di lakukan:

Salin file css ke folder/direktori web-app/css. Contoh isi file css seperti di bawah ini,

body { 
margin: 0; 
padding : 0; 
background: #ccc url(images/bg.jpg) center repeat; 
color: #555; 
} 
/*WRAP*/ 
#container { 
width: 760px; 
margin-left: auto; 
margin-right: auto; 
padding: 0; 
font: 76% "Trebuchet MS","lucida sans", tahoma, sans-serif; 
line-height: 1.8em; 
background: transparent; 
color: #666; 
} 
/*TOP BANNER*/ 
#banner { 
padding: 0; 
margin-bottom: 0; 
height: 150px; 
border-bottom:3px solid #fff; 
background: #82B64D url(images/wine.jpg); 
color: #000; 
} 
/*TOP NAVIGATION*/ 
#navbar ul { 
float:left; 
width:100%; 
padding:0; 
margin:0; 
list-style-type:none; 
font-size: 130%; 
text-align: center; 
border-bottom:3px solid #fff; 
background: #868749; 
color: #000; 
} 
#navbar a { 
float:left; 
width:6em; 
height:30px; 
text-decoration:none; 
color:#fff; 
background:#868749; 
padding:0.5em 0.6em; 
border-right:1px solid #fff; 
} 
#navbar a:hover { 
background:#5b662d; 
color: #fff; 
} 
#navbar li { 
display:inline; 
} 
/*MAIN CONTENT*/ 
#content { 
padding: 1em; 
margin-left: 200px; 
} 
/*SIDEBAR*/ 
#sidebar { 
float: left; 
width: 160px; 
margin: 0; 
padding: 0 1em 0 1em; 
} 
/*SIDE MENU*/ 
#sidebar ul { 
list-style: none; 
margin: 0 0 20px 0; 
padding: 0; 
} 
#sidebar ul li { 
display: inline; 
padding: 0; 
margin: 0; 
} 
#sidebar ul li a { 
display: block; 
color: #385900; 
background: inherit; 
text-decoration: none; 
margin: 0; 
padding: 5px 0 5px 0; 
border-bottom: 1px solid #C0C0C0; 
} 
#sidebar ul li a:hover { 
text-decoration: none; 
background: #E6E7E9; 
color: #DA7910; 
} 
/*FOOTER*/ 
#footer { 
clear: both; 
width:750px; 
padding: 5px; 
margin: 0; 
font-size: 0.8em; 
border-top: 3px solid #fff; 
border-bottom: 3px solid #fff; 
background: #868749; 
color: #fff; 
text-align:center; 
} 
#footer a:link, #footer a:visited { 
text-decoration : none; 
background : inherit; 
color : #000; 
} 
#footer a:hover { 
text-decoration : underline; 
background : inherit; 
color :  #fff; 
} 
/*LINKS*/ 
a:link, a:visited { 
text-decoration : none; 
background : inherit; 
color : #868749; 
} 
a:hover { 
text-decoration : underline; 
background : inherit; 
color :  #385900; 
} 
/*TYPOGRAPHY*/ 
h1 { 
margin: 0; 
padding: 30px 0 0 20px; 
font-size: 175%; 
letter-spacing: 3px; 
color:#FFFFFF; 
} 
h2 { 
margin-top: 10px; 
padding: 10px 0 10px 0; 
font-size: 160%; 
letter-spacing: 3px; 
background : transparent; 
color :   #385900; 
} 
h3 { 
margin: 0; 
padding: 10px 0 10px 0; 
font-size: 160%; 
letter-spacing: 3px; 
background : inherit; 
color :  #385900; 
} 
blockquote { 
font-weight : bold; 
font-style : italic; 
color : #b29b35; 
} 
/*CLASS*/ 
.clear { 
clear: both; 
overflow: hidden; 
width: 0; 
height: 0; 
} 
.slogan { 
margin: 0 0 0 50px; 
letter-spacing: 3px; 
}
.post{ 
background: #E6E7E9; 
padding: 3px; 
margin: 20px 10px 10px 5px; 
font-size: 80%; 
} 
.post .date { 
background: url(images/clock.gif) no-repeat left center; 
padding-left: 15px; 
margin: 0 15px 0 5px; 
} 
.post .comments { 
background: url(images/comment.gif) no-repeat left center; 
padding-left: 15px; 
margin: 0 15px 0 5px; 
} 
.post .readmore { 
background: url(images/document.gif) no-repeat left center; 
padding-left: 15px; 
margin: 0 15px 0 5px; 
}

Jika template css anda menggunakan image, maka salin file-file image ke folder web-app/images.

Edit file css agar sesuai dengan struktur aplikasi yang kita buat.

body { 
margin: 0; 
padding : 0; 
background: #ccc url(../images/bg.jpg) center repeat; 
color: #555; 
} 
/*WRAP*/ 
#container { 
width: 760px; 
margin-left: auto; 
margin-right: auto; 
padding: 0; 
font: 76% "Trebuchet MS","lucida sans", tahoma, sans-serif; 
line-height: 1.8em; 
background: transparent; 
color: #666; 
} 
/*TOP BANNER*/ 
#banner { 
padding: 0; 
margin-bottom: 0; 
height: 150px; 
border-bottom:3px solid #fff; 
background: #82B64D url(../images/wine.jpg); 
color: #000; 
} 
/*TOP NAVIGATION*/ 
#navbar ul { 
float:left; 
width:100%; 
padding:0; 
margin:0; 
list-style-type:none; 
font-size: 130%; 
text-align: center; 
border-bottom:3px solid #fff; 
background: #868749; 
color: #000; 
} 
#navbar a { 
float:left; 
width:6em; 
height:30px; 
text-decoration:none; 
color:#fff; 
background:#868749; 
padding:0.5em 0.6em; 
border-right:1px solid #fff; 
} 
#navbar a:hover { 
background:#5b662d; 
color: #fff; 
} 
#navbar li { 
display:inline; 
} 
/*MAIN CONTENT*/ 
#content { 
padding: 1em; 
margin-left: 200px; 
} 
/*SIDEBAR*/ 
#sidebar { 
float: left; 
width: 160px; 
margin: 0; 
padding: 0 1em 0 1em; 
} 
/*SIDE MENU*/ 
#sidebar ul { 
list-style: none; 
margin: 0 0 20px 0; 
padding: 0; 
} 
#sidebar ul li {  
display: inline; 
padding: 0; 
margin: 0; 
} 
#sidebar ul li a { 
display: block; 
color: #385900; 
background: inherit; 
text-decoration: none; 
margin: 0; 
padding: 5px 0 5px 0; 
border-bottom: 1px solid #C0C0C0; 
} 
#sidebar ul li a:hover { 
text-decoration: none; 
background: #E6E7E9; 
color: #DA7910; 
} 
/*FOOTER*/ 
#footer { 
clear: both; 
width:750px; 
padding: 5px; 
margin: 0; 
font-size: 0.8em; 
border-top: 3px solid #fff; 
border-bottom: 3px solid #fff; 
background: #868749; 
color: #fff; 
text-align:center; 
} 
#footer a:link, #footer a:visited { 
text-decoration : none; 
background : inherit; 
color : #000;  
} 
#footer a:hover { 
text-decoration : underline; 
background : inherit; 
color :  #fff; 
} 
/*LINKS*/ 
a:link, a:visited { 
text-decoration : none; 
background : inherit; 
color : #868749; 
} 
a:hover { 
text-decoration : underline; 
background : inherit; 
color :  #385900;  
} 
/*TYPOGRAPHY*/ 
h1 { 
margin: 0; 
padding: 30px 0 0 20px; 
font-size: 175%; 
letter-spacing: 3px; 
color:#FFFFFF; 
} 
h2 { 
margin-top: 10px; 
padding: 10px 0 10px 0; 
font-size: 160%; 
letter-spacing: 3px; 
background : transparent; 
color :   #385900; 
} 
h3 { 
margin: 0; 
padding: 10px 0 10px 0; 
font-size: 160%; 
letter-spacing: 3px; 
background : inherit; 
color :  #385900; 
} 
blockquote { 
font-weight : bold; 
font-style : italic; 
color : #b29b35; 
} 
/*CLASS*/ 
.clear { 
clear: both; 
overflow: hidden; 
width: 0; 
height: 0; 
} 
.slogan { 
margin: 0 0 0 50px; 
letter-spacing: 3px; 
}
.post{ 
background: #E6E7E9; 
padding: 3px; 
margin: 20px 10px 10px 5px; 
font-size: 80%; 
} 
.post .date { 
background: url(../images/clock.gif) no-repeat left center; 
padding-left: 15px; 
margin: 0 15px 0 5px; 
} 
.post .comments { 
background: url(../images/comment.gif) no-repeat left center; 
padding-left: 15px; 
margin: 0 15px 0 5px; 
} 
.post .readmore { 
background: url(../images/document.gif) no-repeat left center; 
padding-left: 15px; 
margin: 0 15px 0 5px;
}

Buka file main.gsp di folder/direktori grails-app/views/layouts. Yang kodenya seperti di bawah ini,

<html>
  <head>
    <title><g:layoutTitle default="Grails" /></title>
    <link rel="stylesheet" href="${resource(dir:'css',file:'main.css')}" />
    <link rel="shortcut icon" href="${resource(dir:'images',file:'favicon.ico')}" type="image/x-icon" />
    <g:layoutHead />
    <g:javascript library="application" />
  </head>
  <body>
    <div id="spinner" class="spinner" style="display:none;">
    <img src="${resource(dir:'images',file:'spinner.gif')}" alt="Spinner" />
    </div>
    <div class="logo"><img src="${resource(dir:'images',file:'grails_logo.jpg')}" alt="Grails" ></div>
    <g:layoutBody />
  </body>
</html>

Ubahlah sehingga menjadi seperti kode dibawah ini,

<html>
  <head>
    <title><g:layoutTitle default="Grails" /></title>
    <link rel="stylesheet" href="${resource(dir:'css',file:'style.css')}" />
    <link rel="shortcut icon" href="${resource(dir:'images',file:'favicon.ico')}" type="image/x-icon" />
    <g:layoutHead />
    <g:javascript library="application" />
  </head>
  <body>
    <div id="container">
    <div id="banner">
      <h1>Your Site Name</h1>
    </div>
    <div id="navbar">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Templates</a></li>
        <li><a href="#">Product</a></li>
        <li><a href="#">About us</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
    <div class="clear">&nbsp;</div>
    <div id="sidebar">
      <h2>Menu</h2>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#" class="selected">Portfolio</a></li>
        <li><a href="#">Templates</a></li>
        <li><a href="#">About us</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <h2>Archives</h2>
      <ul>
        <li><a href="#">April 2007</a></li>
        <li><a href="#">March 2007</a></li>
        <li><a href="#">Feb 2007</a></li>
        <li><a href="#">Jan 2007</a></li>
        <li><a href="#">Dec 2006</a></li>
        <li><a href="#">Nov 2006</a></li>
      </ul>
      <h2>Partners</h2>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
      </ul>
    </div>
    <div id="content">
      <g:layoutBody />
    </div>
    <div class="clear">&nbsp;</div>
    <div id="footer">Site designed by <a href="http://www.freecsstemplate.net">Free</a> Css Templates</a> <a
href="http://validator.w3.org/check/referer" title="This page
validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup
Language">XHTML</abbr></a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This
page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a></div>
    </div>
  </body>
</html>

Jalankan aplikasi anda. Jika tidak ada kesalahan maka halaman anda akan muncul seperti berikut,

Nah, sekarang anda sudah mulai mengerti bagaimana mengubah tampilan Grails bukan?

Ubahlah template css dan layout sesuai dengan keinginan anda. Selamat mencoba. Happy hacking!

Blognya Oyon

Jumat, 30 Oktober 2009

Belajar Grails (bagian ketiga)

Kustomisasi Tampilan

Contoh mengubah layout menggunakan css template

Tidak ada komentar:

Posting Komentar

About Me

Total Tayangan Halaman