Memulai Grails (Bagian - 4)

Para pembaca yang budiman, bagaimana sejauh ini pemahaman anda terhadap Grails Framework setelah kita membahas Grails Framework pada blog ini hingga tulisan ke-3 ?, mudah-mudahan learning curve yang kita lakukan dalam mengenal Grails Framework sebagai media kerja dalam pembuatan aplikasi web dengan java merupakan cara yang efektif dan efisien. Dan tentunya saya berharap para pembaca bisa memiliki inisiatif dan kreatifitas yang lebih baik lagi berkreasi dalam pembangunan sebuah aplikasi web pada umumnya.

Pada tulisan sebelumnya kita membahas sedikit lebih dalam tentang bagaimana adaptasi Grails Framework dalam menghadapi persoalan yang biasanya hadir dalam dinamika pembuatan aplikasi web, seperti integrasi dengan database lain selain database bawaan distribusi Grails, pagination, dan lain-lain. Dan kali ini kita akan meneruskan pembahasan kita yang tertunda tentang Grails Framework yang sudah kita susun pada tulisan bagian pertama yaitu integrasi Grails Framework dengan Twitter Bootstrap Css Framework. Sebelum kita memulai pembahasan ini, adapun alasan kenapa integrasi Grails Framework dengan css framework masuk dalam susunan pembahasan pengenalan terhadap Grails Framework ini adalah tampilan halaman-halaman yang di-generate oleh Grails Framework merupakan tampilan standar sementara layer views merupakan layer front-end dimana biasanya end user terkadang memiliki taste tersendiri terhadap sebuah tampilan meski halaman-halaman tersebut hanyalah sekedar  mekanisme CRUD. Dan mari kita mulai pembahasan kita tentang Integrasi Grails Framework dengan Twitter Bootstrap Css Framework (custom grails controller).

Twitter Bootstrap adalah sebuah framework css yang tengah populer pada saat ini, kemudahan penggunaan bootstrap banyak digandrungi oleh para developer dan designer aplikasi web atau bahkan developer website. Dengan menggunakan bootstrap para developer bisa memakai style masing-masing elemen html seperti table, button, form element dan lain-lain untuk diintegrasikan dengan halaman html yang dimilikinya.

Dalam Grails Framework, kita bisa melakukan integrasi dengan bootstrap ini dalam dua cara, pertama menggunakan Grails Plugin, dan kedua melakukannya dengan cara manual. Dalam tulisan ini kita akan melakukan integrasi bootstrap framework css ke dalam aplikasi web yang sudah kita buat sebelumnya dengan cara manual. Sebelum kita memulai mempraktekannya silahkan download terlebih dahulu bootstrap css framework dari sini, dalam pembahasan ini saya menggunakan bootstrap css framework versi 3.0, saya menyarankan anda juga menggunakan versi yang sama dengan yang saya gunakan, agar mendapatkan hasil akhir yang sama dari kegiatan ini.

Setelah berhasil men-download bootstrap tersebut, extract file tersebut dan letakkan masing-masing  file seperti cara-cara berikut ini:

1. Buat sebuah folder dengan nama bootstrap dalam folder "grails-app/web-app/css", dan buka folder css dari hasil extract tadi, dan copy seluruh file css ke dalam folder "grails-app/web-app/css/bootstrap" yang sudah kita buat tadi.
2. Buat sebuah folder dengan nama bootstrap dalam folder grails-app/web-app/js, dan buka folder css dari hasil extract tadi, dan copy seluruh file css ke dalam folder "grails-app/web-app/js/bootstrap" yang sudah kita buat tadi.
3. Copy folder fonts dari hasil extract file yang kita download tadi dan letakkan hasil copy-an ke dalam folder "grails-app/web-app/css/" sejajar dengan folder bootstrap pada project grails-book-catalog yang sudah kita buat sebelumnya.

Dengan cara demikian bootstrap telah terintegrasi dalam project "grails-book-catalog" yang sudah kita buat sebelumnya. Langkah selanjutnya adalah kita akan membuat sebuah layout baru untuk aplikasi web "grails-book-catalog", layout baru ini sengaja kita khususkan agar layout yang kita buat terpisah dari layout default milik Grails Framework, hal ini bisa terjadi karena Grails Framework menggunakan sitemesh dalam manajemen layout layer views pada distribusinya, lebih detil mengenai sitemesh  dapat anda pahami sendiri pada website sitemesh itu sendiri. Untuk layout yang akan kita buat, hasil yang kita harapkan nantinya seperti gambar dibawah ini:

Ya, design layout tersebut merupakan design standar yang disarankan bootstrap, meski demikian banyak sekali website yang tetap memakai design standar tersebut, sebab memang tetap terlihat bagus dan simple walau hanya memakai layout standar bootstrap. Rancangan layout diatas pada project kita dapat dideskripsikan seperti ini, navigation bar terletak pada bagian atas halaman dan sifatnya tetap. Pada navigation bar tersebut kita letakkan nama aplikasi dengan font sedikit besar dan daftar menu pada sebelah kiri navigation bar yang semuanya diletakkan secara horizontal. Sementara content dari layout tersebut berada ditengah atau tepat dibawah navigation bar tadi.

Sekarang mari kita mulai membuat layout tersebut, buatlah sebuah file dengan nama custom-layout.gsp dan letakkan dalam folder "grails-app/views/layout". Adapun isi dari file tersebut adalah seperti ini:

<!DOCTYPE html>
<html lang="en">
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"><!--<![endif]-->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title><g:layoutTitle default="Grails Book Catalog"/></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="${resource(dir: 'images', file: 'favicon.ico')}" type="image/x-icon">
    <link rel="stylesheet" href="${resource(dir: 'css/bootstrap/', file: 'bootstrap.min.css')}" type="text/css">
    %{--<link rel="stylesheet" href="${resource(dir: 'css/bootstrap', file: 'bootstrap-theme.min.css')}" type="text/css">--}%
    <link rel="stylesheet" href="${resource(dir: 'css', file: 'custom-layout.css')}" type="text/css">
    <g:layoutHead/>
    <r:layoutResources/>
</head>

<body>
    %{--menu bootstrap style--}%
    <div id="menu" class="nav navbar navbar-fixed-top navbar-inverse">
        <a href="#" class="navbar-brand">Grails Book Catalog</a>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="${request.contextPath}/author/list"><span class="glyphicon glyphicon-user"></span> Author</a> </li>
            <li><a href="${request.contextPath}/book/list"><span class="glyphicon glyphicon-book"></span> Book</a> </li>
        </ul>
    </div>
    %{--end of bootstrap menu--}%

    %{--layout body here--}%
    <div class=”container”>
         <g:layoutBody/>
    <div>
    <g:javascript library="application"/>
    <script type="text/javascript" src="${resource(plugin:'jquery',  dir: 'js/jquery',file: 'jquery-1.8.3.min.js' )}"></script>
    <script type="text/javascript" src="${resource(dir: 'js/bootstrap',file: 'bootstrap.min.js' )}"></script>
    <r:layoutResources />
</body>
</html>

Dari kode-kode diatas mari kita bahas satu persatu guna lebih dalam memahami isi sebenarnya file tersebut. Perhatikan blok “head”, dalam blok tersebut kita mendeklarasikan beberapa file yang menjadi referensi css style, dan disana ada baris code yang memasukkan bootstrap css framework sebagai salah satu referensi css style. Selain itu kita juga punya sebuah file css "custom-layout.css",  file css ini hanya sebagai tambahan saja dengan tujuan menyesuaikan style halaman sesuai dengan keinginan kita, untuk sementara isi file custom-layout.css itu seperti dibawah ini:

body{
    padding-top:50px;
    padding-left:15px;
}

Kemudian perhatikan 8 baris setelah tag “body”, di sana kita menuliskan sebuah blok kode “div” yang berfungsi membuat navigation bar yang terdiri atas 2 buah menu. Perhatikan baris kodenya:

<li><a href="${request.contextPath}/author/list"><span class="glyphicon glyphicon-user"></span> Author</a> </li>
<li><a href="${request.contextPath}/book/list"><span class="glyphicon glyphicon-book"></span> Book</a> </li>

Baris di atas adalah baris dimana kita mendeklarasikan menu “Author” dan “Book”, dalam masing-masing baris itu ada scriptlet spesifik Grails “${request.contextPath}”, begitulah cara Grails membaca context path secara dinamis terhadap url yang menjadi context path dalam aplikasi web. Kemudian perhatikan baris “<g:layoutBody>”, baris ini merupakan elemen penting dalam pembuatan layout pada aplikasi web dengan menggunakan Grails Framework. Tag inilah yang nantinya berfungsi sebagai container seluruh view yang dipanggil lewat URL, semua layer view yang kita panggil akan ditempatkan di dalam tag “<g:layoutBody>” ini. Setelah itu baris-baris selanjutnya adalah kita memasukkan scipt-script javascript yaitu jquery dan bootstrap sebagai kelengkapan kita menggunakan twitter-bootstrap css framework. Dengan cara seperti ini kita sudah selesai mengintegrasikan twitter-bootstrap css framework ke dalam aplikasi web kita. 
Langkah selanjutnya adalah kita akan mencoba memakai layout tersebut, skenarionya kita akan membuat sebuah controller dan view yang baru dengan tujuan agar apa yang sudah kita buat kemarin yang merupakan hasil generate grails-command tetap ada dan bisa menjadi bahan referensi kita untuk mempelajari secara detil bagaimana syntax-syntax Grails. Langkah ini merupakan inti dari pembahasan kita yaitu membuat custom-controller dalam Grails Framework.
Kita akan membuat sebuah controller baru dengan nama "CustomAuthorController", jalankan perintah berikut ini dalam console “grails create-controller org.learn.grails.CustomAuthor”, perintah tersebut meminta Grails membuat sebuah controller dengan nama CustomAuthorController dan berada pada package “org.learn.grails” seperti gambar berikut ini:

Sekarang mari kita buat sebuah “action” pada controller tersebut, action ini kita beri nama “list” adapun kode-kode action tersebut seperti dibawah ini:

def list(Integer max) {
  params.max = Math.min(max ?: 10, 100)
  [authorList: Author.list(params), totalData: Author.count()]
}

Kode di atas hampir sama dengan kode pada action “list” yang kita buat dengan cara meng-generate sebelumnya, hanya variable pada kurung sikunya saja yang dirubah, silahkan bandingkan sendiri. Kemudian mari kita buat sebuah view untuk action tersebut, buatlah sebuah file dengan nama “list.gsp” dan letakkan dalam folder “grails-app/views/customAuthor”, adapun isi file list.gsp adalah seperti berikut ini:

<%@ page contentType="text/html;charset=UTF-8" %>
<html lang="en">
<head>
    <meta name="layout" content="custom-layout">
    <title></title>
</head>
<body>
  <h3>Author List</h3>
  <table class="table table-bordered table-hovered">
      <thead>
        <tr>
            <td>Id</td>
            <td>Author Name</td>
            <td>Age</td>
            <td>Address</td>
        </tr>
      </thead>
      <tbody>
        <g:each in="${authorList}" var="author">
            <tr>
                <td>${author.id}</td>
                <td>${author.authorName}</td>
                <td>${author.age}</td>
                <td>${author.address}</td>
            </tr>
        </g:each>
      </tbody>
  </table>
  <div class="pagination">
      <g:paginate total="${totalData}"/>
  </div>
</body>
</html>

Yang harus kita perhatikan pada kode-kode diatas adalah baris “<meta name='layout' content='custom-layout' >”, baris ini adalah baris dimana kita memakai custom-layout yang sudah kita buat tadi dan didalamnya meng-include twitter-bootstrap css framework, kode berikutnya yang harus kita perhatikan adalah blok table, pada element table tersebut kita menambahkan class “table”, “table-bordered” dan “table-hovered”, class-class tersebut adalah milik bootstrap css framework, dengan tujuan agar tampilan table kita bisa menggunakan style yang dimiliki oleh twitter-bootstrap. Kemudian ada baris berikut ini:

<g:each in="${authorList}" var="author">
   <tr>
      <td>${author.id}</td>
      <td>${author.authorName}</td>
      <td>${author.age}</td>
      <td>${author.address}</td>
   </tr>
</g:each>

Baris tersebut terletak dalam table-body, beginilah cara Grails me-loop data yang dilempar dari controller-nya, “authorList” adalah variable yang dilempar dari controller “customAuthor” kemudian di-loop dengan menggunakan blok tag “<g:each” dan setiap properti yang dimiliki oleh class-domain author diletakkan dalam masing-masing kolom pada table tersebut.
Baris kode selanjutnya yang harus kita perhatikan adalah baris “pagination”, pada baris tersebut sentuhan twitter-bootstrap diberikan pada blok “div” dan kemudian di dalam blok div tersebut kita menggunakan tag-lib “<g:paginate” dengan parameter total yang kita isi dengan variabel totalData yang dilempar dari controller. “g:paginate” merupakan tag-lib pagination yang dimiliki oleh Grails Framework secara default, paramater tag-lib ini adalah “total” yang harus diisi dengan banyaknya jumlah data yang ingin ditampilkan. Lebih dalam mengenai tag-lib paginate ini silahkan dibuka link berikut ini http://grails.org/doc/2.3.6/ref/Tags/paginate.html.
Baiklah, sekarang mari kita coba jalankan grails-book-catalog kita tadi seperti biasa dengan cara mengetikkan perintah “grails run-app” pada console, dan kemudian bukalah URL http://localhost:8080/grails-book-catalog/customAuthor/list pada browser anda, dan seharusnya tampilan yang muncul pada browser sepert gambar di bawah ini:

Bagaimana pembaca?, sekarang tampilannya sudah berbeda dengan tampilan yang kita buat sebelumnya dengan cara meng-generate?, tapi kok paging-nya tidak ada? Ya, sebenarnya sama dengan tulisan sebelumnya tambahkan saja data author pada bootstrap.groovy atau rubah isi data per-halaman pada I customAuthor ini, mudah bukan ?. Silahkan dilengkapi dengan tombol manipulasi data seperti tombol “Add New” dan tombol “Edit” serta tombol “Delete” pada halaman tersebut, saya membebaskan anda berkreasi soal penambahan tombol-tombol ini,  sebagai bahan pertimbangan saya akan menambahkan tombol-tombol tersebut seperti gambar dibawah ini:

Oh ya untuk membuat supaya aplikasi ini selaras dengan yang kita rencanakan dan kita buat, kita perlu membuat agar menu author yang ada pada navigation bar tertuju pada halaman ini ketika diklik, silahkan anda rubah sendiri file custom-layout.gsp agar link author tersebut bisa tertuju kepada halaman ini.

Pembaca yang budiman, demikianlah untuk sementara pembahasan kita mengenai custom controller pada aplikasi web grails-book-catalog yang menggunakan Grails Framework ini. Saya akan menghentikan dulu untuk sementara pembahasan ini, karena saya rasa sudah cukup banyak isi dari tulisan yang sekarang ini, dan saya khawatir anda jadi lelah membaca dan melakukan percobaan sendiri sebab pembahasan kita yang terlalu banyak. Pada tulisan selanjutnya kita akan teruskan pembahasan ini dengan melengkapi fungsi CRUD (create, read, update, delete) pada masing-masing controller yang ada pada project grails-book-catalog tersebut. Cukup sekian dulu kiranya, dan sampai jumpa kembali pada tulisan lanjutan Memulai Grails selanjutnya.
Semoga bermanfaat dan salam,


Menteng, 20 Februari 2014

Josescalia