Spring-boot, MVC, Freemarker, dan Twitter-Bootstrap (bag 3)

Pembaca yang budiman, dalam dunia teknologi komputer, kita sebagai pelaku, penggiat, atau sebagai penyuka dunia pemrograman harus tetap berusaha untuk terbuka terhadap perubahan teknologi terutama pemrograman komputer. Sebab setiap saat selalu aja ada teknologi baru yang muncul, teknologi tersebut bisa saja berupa temuan baru atau modifikasi teknologi lama menjadi lebih efektif dan efisien. Spring-boot juga merupakan teknologi baru yang dibuat atas dasar penyempurnaan teknologi sebelumnya dengan tujuan lebih efektif dan efisien dalam pemakaiannya.

Pada 3 tulisan sebelumnya, kita telah mencoba mempelajari sebuah framework yang sangat terkenal di dunia pemrograman komputer java pada khususnya yaitu Spring Framework yang di-bundle dalam framework spring-boot. Integrasi dengan apache freemarker sebagai sebuah framework template (templating framework) sangat memungkinkan untuk dilakukan. Pada tulisan terakhir, kita juga sudah mempelajari bahwa freemarker memiliki keunggulan sebagai sebuah framework templating yang mudah dan sederhana. Integrasinya dengan spring-boot yang begitu menyatu sangat memungkinkan untuk bisa dikembangkan lagi menjadi sebuah struktur development yang lebih baik lagi.

Kali ini kita akan mencoba mengeksplorasi apache freemarker lebih jauh, mencoba menggunakan fitur-fitur built-in yang disediakan olehnya, dan tentunya masih dalam koridor integrasi dengan spring-boot. Percobaan kita kali ini bertema penggunaan freemarker sebagai template layout apikasi web. Kita akan membuat sebuah layout yang  kemudian kita jadikan sebagai template  dari halaman-halaman aplikasi web, pada penerapan nantinya kita memanfaatkan tag freemarker template language (ftl) yaitu include sebagai komponen utama. 

Sejatinya dalam sebuah aplikasi web ada beberapa komponen dalam halaman aplikasi web yang bisa digunakan kembali (reusable) contohnya tombol Cancel dan tombol Save dalam aplikasi web yang pernah kita buat pada tutorial sebelumnya. Kalau kita perhatikan fungsi tombol Cancel yang pernah kita buat dalam form Author berfungsi menyembunyikan kembali form tersebut, sama halnya dengan fungsi tombol Cancel di dalam form Book, atau di dalam form Publisher. Demikian halnya dengan tombol Save, tombol ini dalam form-form hanya berfungsi untuk mem-post-kan data form ke url kemudian me-reload halaman aplikasi web nya, hanya saja untuk tombol Save, url yang dituju bisa berbeda, bisa save-nya author, save-nya publisher, atau save-nya book. Akan lebih efisien jika ke dua tombol tersebut kita jadikan sebagai template, dan kita pakai pada setiap form inputan halaman aplikasi web kita. Mari kita coba konsep tersebut.

Langkah pertama yang harus kita lakukan adalah membuat sebuah folder  di dalam “src/main/resources/templates”, kita namai folder ini dengan nama include, dan seterusnya semua komponen yang bisa digunakan kembali akan kita buat dalam folder ini.

Kemudian kita buat sebuah file dengan nama “_add_new_component.ftl” dan kita letakkan file tersebut dalam folder ini. Adapun isi dari file ini adalah sebagai berikut:

<a href="#" id="btnSave" class="btn btn-info btn-sm"><span class="glyphicon glyphicon-floppy-disk"></span> Save</a>
<a href="#" id="btnCancel" data-dismiss="modal" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-step-backward"></span> Cancel</a>

Dan kita modifikasi file “list.ftl” milik author yang menjadi seperti ini:

<div class="modal-header" style="background-color:rgba(173, 216, 230, 0.17)">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"
            style="margin:3px">&times;</button>
    <h4 class="text-center">Add New Author</h4>
</div>
<div class="modal-body">
    <form class="form-horizontal">
    <#include "_form.ftl">
    </form>
</div>
<div class="modal-footer">
    <#include "../include/_add_new_component.ftl">
</div>

Perhatikan kode pada blok modal-footer, kita merubah kode tersebut dengan cara meng-include file “_add_new_component.ftl” dalam syntax freemarker template language (ftl). Jalankan kembali aplikasi web kita, dan cobalah tombol tersebut, maka tidak akan ada bedanya dengan sebelum kita melakukan metode ini bukan?. Silahkan lakukan hal yang sama tersebut dengan form Publisher dan Book.  Jika anda belum membuat form Book dan Publisher, tentu saja anda harus membuatnya terlebih dahulu.

Sekarang kita akan manfaatkan teknik ini untuk membuat sebuah layout halaman aplikasi web. Namun sebelumnya kita akan membahas dulu sebuah fitur dalam freemarker yaitu directives. Directives adalah suatu syntax dalam freemarker yang kita tuliskan untuk menerjemahkan variabel, object, fungsi, tipe data, dan lain-lain. Dalam freemarker template language (ftl) directives terbagi menjadi 2 macam, predefined directives dan user-defined directives. Predefined directives adalah directives yang secara built-in sudah didefinisikan oleh freemarker, contohnya sudah pernah kita pakai yaitu <#list>, <#include>, dan user-defined directives adalah directives yang tidak didefinisikan oleh freemarker, melainkan oleh user. Predefined-directives dituliskan dalam bentuk start-tag dan end-tag seperti contoh dibawah ini:

<#list authorList as author>
   …
</#list>

Namun apabila suatu directives tidak memiliki content di dalamnya maka tidak perlu dituliskan dalam bentuk start-tag dan end-tag tersebut, contohnya:

<#include “_form.ftl”>

User-defined directives  yang bisa digunakan di dalam freemarker tentunya harus mengikuti syarat-syarat yang ditetapkan oleh freemarker, ketika kita ingin membuat sendiri directives maka kita harus mendifinisikannya dengan menggunakan tag seperti dibawah ini 

<#macro “nama_variable”> … </#macro>

Tag macro adalah sebuah tag yang dikenali oleh freemarker sebagai sebuah variabel yang merupakan user-defined directives, ketika dalam sebuah template ditemukan tag seperti ini maka freemarker akan menyimpannya dalam thread aplikasi sebagai sebuah variabel. Untuk lebih jelasnya kita akan langsung mencoba user-defined directives ini.
Kita akan membuat sebuah kerangka layout aplikasi web kita dengan desain seperti gambar dibawah ini:

Pada desain layout aplikasi web di atas kita merencanakan nantinya setiap halaman web seperti list, edit nantinya akan ada pada bagian Content Aplikasi Web, sementara untuk header dan menu akan ada pada setiap halaman. Artinya kita akan membuat header dan menu menjadi komponen yang reusable, meski teknik tersebut bisa dipakai dengan menggunakan tag <#include ..> tapi kita akan menerapkan user-defined directives disini, agar kita mengerti perbedaan antara predefined directives dan user-defined directives.
Sekarang buatlah sebuah folder dalam “src/main/resources/templates” dengan nama layout. Kemudian dalam folder tersebut buatlah sebuah file dengan nama main_layout.ftl, dan isi dari file tersebut adalah seperti dibawah ini:

<#macro mainLayout>
<html>
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/style.css">
<head>
    <title>Simple Spring Boot Web Application</title>
</head>
<body>
    <div class="container" id="pageHeader">
        <h3>Simple Spring Web Applications</h3>
    </div>
    <div class="container" id="menuTop">
        <#include "../include/top_menu.html">
    </div>
    <div class="container" id="pageContent">
        <#nested/>
    </div>
    <script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
</body>
</html>
</#macro>

Perhatikan pada kode di atas, kita membuat sebuah directives dengan nama variabelnya adalah mainLayout. Pada tag body kita tiga buah div yaitu pageHeader, menuTop dan pageContent, ketiga div tersebut kita beri class “container” milik bootstrap. Dalam div menuTop kita meng-include sebuah file dengan nama top_menu.ftl yang terletak sejajar dengan file ini, file top_menu.ftl ini adalah file html yang bisa menampilkan tampilan menu seperti gambar dibawah ini:

Kita akan lewatkan dulu pembuatan tampilan menu yang bisa seperti ini, sebab ini murni kode-kode html dan css saja. Sebagai gantinya anda bisa saja menuliskan tag a untuk layout menu itu sendiri.
Kemudian dalam div pageContent kita melihat ada tag >#nested<, tag inilah nanti yang secara otomatis akan ditempatkan isi dari halaman aplikasi web kita. Sekarang kita akan mencoba menggunakan template layout tersebut. Buka file list.ftl yang ada dalam folder “src/main/resources/templates/author/” kemudian modifikasi file tersebut menjadi seperti dibawah ini:

<#import "../layout/main_layout.ftl" as layout>
<@layout.mainLayout>
<div class="container">
<a href="#modalForm" class="btn btn-info btn-sm" data-toggle="modal" data-placement="top" >Add New</a>
<table class="table table-bordered table-striped table-condensed">
    <thead>
    <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Address</th>
    </tr>
    </thead>
    <tbody>
    <#list authorList as author>
        <tr>
            <td style="text-align:center;"><a href="edit?id=${author.id}">${author.id}</a></td>
            <td>${author.authorName}</td>
            <td>${author.authorAddress}</td>
        </tr>
    </#list>
    </tbody>
</table>
<p><a href="/">Back to Index</a> </p>
</div>
<#--author form, hidden by default-->
<div class="modal fade" id="modalForm" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true"
     style="overflow-y:auto">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="background-color:rgba(173, 216, 230, 0.17)">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"
                        style="margin:3px">&times;</button>
                <h4 class="text-center">Add New Author</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                <#include "_form.ftl">
                </form>
            </div>
            <div class="modal-footer">
                <#include "../include/_add_new_component.ftl">
            </div>
        </div>
    </div>
</div>
</@layout.mainLayout>
<script type="text/javascript">
    $(function(){
        $("#btnSave").click(function(){
            $.post("/service/json/author/save", $("#modalForm").find("form").serialize(), function(jsonString){
                if(jsonString == "Save Succeed"){
                    alert(jsonString);
                    window.location.reload();
                }else{
                    alert(jsonString);
                }
            })
        })
    })
</script>

Yang kita lakukan dengan file list.ftl tersebut adalah kita menghilangkan tag-tag header dan footer html dan menggantinya dengan tag user-defined directives layout (<#import "../layout/main_layout.ftl" as layout>). Variabel layout yang kita definisikan disini adalah directives suka-suka kita, maksudnya kita bisa saja menamainya dengan nama lain selain layout. Ketika layout sudah kita definisikan sebagai user-defined directives ini, maka kita bisa menuliskan directives layout dengan tag <@layout.mainLayout>, inilah perbedaan predefined directives dengan user-defined directives secara penulisan syntax, jika predefined directives dituliskan dengan awalan tag <# maka user-defined directives dituliskan dengan awalan <@. Dan harap diingat bahwa directives yang sudah kita tuliskan dalam kode harus pula ditutup dengan tag </@, seperti yang terlihat pada kode di atas.
Sekarang jalankan aplikasi web tersebut dan buka url http://localhost:8080/author/list pada browser anda, maka tampilannya pun akan bisa kurang lebih seperti gambar dibawah ini.

Jika tidak sama persis, saya anggap wajar, sebab memang tampilan diatas sudah saya modifikasi dengan menambahkan sedikit css, tapi yang paling penting adalah header, menu, dan content pada desain aplikasi web yang kita buat sebelumnya dapat terakomodir pada gambar tersebut. Lakukanlah modifikasi file-file list yang lain sama dengan file author list seperti contoh yang kita buat barusan. Dengan menerapkan template layout maka kita sudah menerapkan konsep reusable component di dalam aplikasi web kita, tentunya ini akan sangat menghemat waktu development sebuah aplikasi web.
Sampai disini saya rasa kita sudah cukup memenuhi tema tutorial kita kali ini. Sampai jumpa di tulisan seri berikutnya dengan materi spring-boot berikutnya yaitu tentang modifikasi repository spring-boot atau modifikasi layer dao pada spring-boot.

Semoga bermanfaat
Depok, 16 Februari 2016.



Josescalia