JSTL: Merapikan Halaman JSP


Tujuan utama JavaServer Pages Template Library (JSTL) adalah mempermudah kehidupan perancang halaman JSP. Bagi developer, JSTL membantu menciptakan halaman JSP yang rapi, tidak banyak berbaur antara kode HTML dan kode Java, sehingga halaman JSP lebih mudah dimengerti dan dikelola. Salah satu bagian JSTL (JSR-52), Expression Language (EL), telah menjadi bagian dari spesifikasi JSP 2.1 (JSR-152).

Tag dalam JSTL bisa dikategorikan menjadi empat bagian, yaitu core (http://java.sun.com/jsp/jstl/core, prefix c), XML processing (http://java.sun.com/jsp/jstl/xml, prefix x), I18N formatting (http://java.sun.com/jsp/jstl/fmt, prefix fmt), SQL (http://java.sun.com/jsp/jstl/sql, prefix sql) dan functions (http://java.sun.com/jsp/jstl/functions, prefix fn).

Instalasi Apache Tomcat 6 tidak menyertakan dukungan JSTL, sehingga aku harus mendownload implementasi JSTL secara terpisah, seperti dari Apache Jakarta. Lalu aku juga harus memiliki jar yang berisi API JSTL. Jika mendownload implementasi dari Apache Jakarta, aku dapat menemukan API JSTL di file jstl.jar dan implementasinya di file standard.jar.

Sebagai latihan, aku membuat sebuah halaman yang men-query data dari database dan menampilkannya beserta pilihan untuk menambah/mengedit/menghapus setiap baris data:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
<html>
<head>
<title>Data Individu</title>
</head>

<body>
<sql:query var="individu" dataSource="jdbc/databaseDevelopment">
  SELECT * FROM TBL_INDIVIDU
</sql:query> 
<h1>Daftar Individu</h1>
<c:choose>
  <c:when test="${individu.rowCount==0}">

    <p>Saat ini tidak ada data individu yang terdaftar.</p>
  </c:when>
  <c:otherwise>
    <p>Berikut ini adalah ${individu.rowCount} individu yang terdaftar:</p>
    <table cellspacing="5px">

      <thead>
      <c:forEach var="columnName" items="${individu.columnNames}">
        <th>${columnName}</th>
      </c:forEach>
      </thead>

      <tbody>
      
      <c:forEach var="record" items="${individu.rows}">
        <tr>
        <td>${record.id}</td>
        <td>${record.nama}</td>

        <td>${record.alamat}</td>
        <td>${record.telepon}</td>
        <c:url value="modify.jsp" var="urlUpdate">
          <c:param name="id" value="${record.id}" />
          <c:param name="nama" value="${record.nama}" />

          <c:param name="alamat" value="${record.alamat}" />
          <c:param name="telepon" value="${record.telepon}" />
        </c:url>
        <c:url value="modify.jsp" var="urlHapus">
          <c:param name="id" value="${record.id}" />
          <c:param name="action" value="hapus" />

        </c:url>
        <td><a href="${urlUpdate}">Update</a> <a href="${urlHapus}">Hapus</a></td>
        </tr>

      </c:forEach>
      </tbody>
    </table>
  </c:otherwise>
</c:choose>
<p><a href='modify.jsp'>Tambah Data Baru</a></p>

</body>
</html>
    

Pada halaman JSP di atas, aku tidak menggunakan kode Java sedikitpun, sehingga halaman JSP terlihat lebih mudah dimengerti. Untuk melakukan query, aku menggunakan <sql:query>dengan data source yang telah aku definisikan sebagai JNDI resource di Apache Tomcat. Aku juga menggunakan <c:url> untuk membentuk string URL beserta parameter-parameter-nya secara otomatis. Untuk mencetak setiap baris data sesuai hasil query, aku menggunakan <c:forEach>.

Untuk halaman modify.jsp yang berguna untuk tambah data, update data dan hapus, aku membuat halaman seperti berikut:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql" %>
<html>
<head>
<title>Modifikasi Data Individu</title>
</head>
<body>
<h1>Modifikasi Data Individu</h1>

<c:choose>
  <c:when test="${empty param.action}">
    <form method="post" action="modify.jsp">
    <pre>
 Nama   : <input name="nama" type="text" maxlength="20" value="${param.nama}" />
 Alamat : <input name="alamat" type="text" maxlength="20" value="${param.alamat}" />

 Telepon: <input name="telepon" type="text" maxlength="20" value="${param.telepon}" />
 
 <input type="submit" value="Simpan" />
 <input type="hidden" name="id" value="${param.id}" />
 <input type="hidden" name="action" value="${empty param.id?'tambah':'edit'}" />
    </pre>  
    </form>

  </c:when>
  <c:when test="${param.action=='tambah'}">
    <sql:update dataSource="jdbc/databaseDevelopment">
      INSERT INTO TBL_INDIVIDU VALUES (?, ?, ?, ?)
      <sql:param value="<%= java.util.UUID.randomUUID().toString() %>"/>
      <sql:param value="${param.nama}" />

      <sql:param value="${param.alamat}" />
      <sql:param value="${param.telepon}" />
    </sql:update>
    <p>Data berhasil ditambahkan ke database. <a href='latihan1.jsp'>Klik disini untuk kembali.</a></p>

  </c:when>
  <c:when test="${param.action=='edit'}">
    <sql:update dataSource="jdbc/databaseDevelopment">
      UPDATE TBL_INDIVIDU SET NAMA = ?, ALAMAT = ?, TELEPON = ?
      WHERE ID = ?
      <sql:param value="${param.nama}" />
      <sql:param value="${param.alamat}" />
      <sql:param value="${param.telepon}" />

      <sql:param value="${param.id}" />
    </sql:update>
    <p>Data berhasil diupdate. <a href='latihan1.jsp'>Klik disini untuk kembali.</a></p>
  </c:when>

  <c:when test="${param.action=='hapus'}">
    <sql:update dataSource="jdbc/databaseDevelopment">
      DELETE FROM TBL_INDIVIDU WHERE ID = ?
      <sql:param value="${param.id}" />
    </sql:update>
    <p>Data berhasil dihapus. <a href='latihan1.jsp'>Klik disini untuk kembali.</a></p>

  </c:when>
</c:choose>
</body>
</html>
    

Pada halaman ini, aku memakai tag <c:choose> dan<c:when> untuk membuat struktur logika kondisi, yang melakukan aksi tertentu berdasarkan nilai param.action. Object param adalah object implicit dalam EL yang hampir sama seperti session.getParameter(). Satu-satunya kode Java yang aku pakai disini adalah pemanggilan class UUID untuk menghasilkan nilai ID unik setiap kali penambahan data baru.

Perihal Solid Snake
I'm nothing...

2 Responses to JSTL: Merapikan Halaman JSP

  1. t33k4dzdy mengatakan:

    pak …. kalau pakai primefaces bagaimana????

Apa komentar Anda?

Please log in using one of these methods to post your comment:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: