Cara Mudah Membuat Aplikasi Web dengan JSP dan Database MySQL

Pembaca yang budiman, kali ini saya ingin berbagi pengetahuan tentang bagaimana membuat sebuah aplikasi web dengan JSP dan MySQL. Kali ini kita akan membuatnya dengan cara yang mudah, dalam artian kita tidak akan membuat web aplikasi ini dengan melakukan coding Java untuk membuat class-class yang kita perlukan untuk mendukung web aplikasi kita kali ini. Kita cukup membuat JSP saja, JSP saja… dan beberapa konfigurasi yang mudah-mudahan juga tidak menjadi kesulitan bagi kita semua.

Sebelum kita memulai mari kita persiapkan dulu database dan table yang nantinya akan menjadi salah satu bahan percobaan kita. Untuk membuat databasenya kita beri nama databasenya “test_jsp” kemudian untuk tablenya silahkan kita buat sebuah table dalam database tersebut dengan struktur seperti ini:

 

Atau bisa juga kita copy paste sql query berikut ini:

create database test_jsp;
use test_jsp;
CREATE TABLE `identitas` (
  `NO` int(10) NOT NULL AUTO_INCREMENT,
  `NAMA` varchar(100) NOT NULL,
  `ALAMAT` varchar(255) DEFAULT NULL,
  `NO_TELP` varchar(20) DEFAULT NULL,
  PRIMARY KEY (`NO`));

Sql Query diatas adalah query-query untuk membuat database dengan nama test_jsp dan membuat sebuah table bernama identitas dengan field-field seperti pada gambar. Kemudian isilah table tersebut dengan data-data secukupnya (Kaya bikin resep masakan aja….:D), sehingga kira-kira hasilnya bisa dilihat seperti gambar dibawah ini:

 

Dengan demikian satu bahan percobaan kita telah selesai kita buat.
Untuk melakukan percobaan kita kali ini sebenarnya kita membutuhkan atau lebih tepatnya kita akan memakai sebuah library yang mampu mendukung pembuatan web aplikasi hanya dengan jsp saja. Library yang kita butuhkan adalah Jakarta Taglibs.
Jakarta Taglibs adalah salah satu project open source Jakarta Tag libraries yang mendukung pembuatan Web Aplikasi dengan JSP tanpa class-class java yang kita buat sendiri. Dengan konsep Taglibs berarti kita akan menggunakan API yang ada pada library tersebut hanya dengan cara memanggilnya dengan menggunakan tag-tag yang pada JSP. Oleh karena kita membutuhkan library yang bernama DBTags (database tags) maka silahkan diunduh terlebih dahulu library tersebut disini http://jakarta.apache.org/site/downloads/downloads_taglibs.html, selain itu kita juga akan membutuhkan library yang berfungsi sebagai Driver Database MySQL yaitu mysql-connector-java.jar, silahkan juga download library tersebut disini http://dev.mysql.com/downloads/connector/j/
Setelah kedua library tersebut selesai didownload, kemudian ekstraklah kedua file yang sudah kita download tersebut. Untuk langkah selanjutnya kita akan persiapkan sebuah web aplikasi pada Application server atau Servlet Container, kali ini kita akan menggunakan Tomcat sebagai Servlet Container Web Aplikasi kita (tomcat lagi…tomcat lagi…:D).

1. Buatlah sebuah folder dalam folder webapps yang berada pada folder instalasi tomcat kita. Kita beri nama MySimpleJSP saja. Folder ini juga nantinya akan menjadi folder path pada URL aplikasi kita.
2. Di dalam folder MySimpleJSP tersebut kita buat lagi dua buah folder lagi bernama WEB-INF dan libs.
3. Copy-lah file mysql-connector-java.5.1.6.jar (saya menggunakan connector 5.1.6 disini)  dari library mysql connector tadi, dan file taglibs-dbtags.jar dari library Jakarta Tablibs yang kita download tadi ke dalam folder libs.
4. Kemudian copy pula file taglibs-dbtags.tld dari library Jakarta Taglibs yang sudah kita ekstrak tadi ke dalam folder WEB-INF.
5. Buatlah sebuah file yang bernama web.xml dan kemudian simpanlah file tersebut juga di dalam folder WEB-INF, sementara isi dari file web.xml tersebut tulislah seperti dibawah ini:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
          http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
           version="2.5">

      <jsp-config>
           <taglib>
               <taglib-uri>http://jakarta.apache.org/taglibs/dbtags</taglib-uri>
               <taglib-location>/WEB-INF/taglibs-dbtags.tld</taglib-location>
           </taglib>
       </jsp-config>
</web-app>

Sampai disini kita telah selesai melakukan persiapan-persiapan web-aplikasi untuk percobaan kita kali ini. Dan langkah selanjutnya adalah tinggal membuat file-file jsp yang kita butuhkan untuk bisa mengakses database MySQL yang telah kita buat tadi, semua file jsp yang nantinya akan kita buat akan kita letakkan dalam folder MySimpleJSP atau sejajar dengan folder WEB-INF dan folder libs. Mari kita buat file jspnya.
File JSP pertama yang akan kita buat adalah file get_identity.jsp, file ini adalah sebuah file jsp yang bertugas mengambil data-data yang ada dalam tabel identitas yang terletak pada database test_jsp.  Mari perhatikan kode-kode file get_identity.jsp dibawah ini.

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://jakarta.apache.org/taglibs/dbtags" prefix="sql" %>
<html>
<head><title>My Simple JSP MYSQL Page</title></head>
<body>
<%-- Step 1) create a database connection --%>
<sql:connection id="connect">
    <sql:url>jdbc:mysql://localhost/test_jsp</sql:url>
    <sql:driver>com.mysql.jdbc.Driver</sql:driver>
    <sql:userId>root</sql:userId>
    <sql:password>admin99</sql:password>
</sql:connection>
<%--End Creating database Connection--%>

<%-- Step 2) Create a SQL query --%>
<sql:statement id="statement" conn="connect">
    <sql:query>
        SELECT * FROM identitas
    </sql:query>

    <table border="1">
        <tr>
            <th>NO</th>
            <th>NAMA</th>
            <th>ALAMAT</th>
            <th>NO TELP</th>
        </tr>
            <%--Step 2.1) Loop the result--%>
        <sql:resultSet id="data">
            <tr>
                <td><sql:getColumn position="1"/> </td>
                <td><sql:getColumn position="2"/> </td>
                <td><sql:getColumn position="3"/> </td>
                <td><sql:getColumn position="4"/> </td>
            </tr>
        </sql:resultSet>
    </table>
</sql:statement>

<%--Step 3) Close Database Connection--%>
<sql:closeConnection conn="connect"/>
</body>
</html>

Mari perhatikan masing-masing kode JSP diatas:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://jakarta.apache.org/taglibs/dbtags" prefix="sql" %>

Pada  baris ke dua kita melakukan deklarasi tag yang nanti akan kita pakai dalam file jsp ini. Uri dalam baris tersebut haruslah sama dengan taglib-uri yang kita deklarasikan di dalam file web.xml sebelumnya, dimana pada proses running-nya nanti file web.xml akan bertanggung jawab untuk mencari referensi tag-tag dengan prefix sql dalam file taglibs-dbtags.tld.

<%-- Step 1) create a database connection --%>
<sql:connection id="connect">
    <sql:url>jdbc:mysql://localhost/test_jsp</sql:url>
    <sql:driver>com.mysql.jdbc.Driver</sql:driver>
    <sql:userId>root</sql:userId>
    <sql:password>admin99</sql:password>
</sql:connection>
<%--End Creating database Connection--%>

Sementara pada blok kode diatas kita melakukan deklarasi tag-tag untuk melakukan koneksi ke database mysql yang kita buat tadi. Coba perhatikan tiap baris diatas, databasenya adalah test_jsp kemudian Driver-nya adalah com.mysql.jdbc.Driver, kemudian userId untuk melakukan koneksi ke database mysql adalah root, dan password untuk melakukan koneksi ke database mysql tersebut adalah admin99. Username database mysql saya adalah root dan passwordnya adalah admin99, silahkan sesuaikan dengan setting database anda masing-masing. Yang harus diperhatikan lagi dalam kode di atas adalah semua konfigurasi ini harus berada dalam blok tag sql:connection.

<%-- Step 2) Create a SQL query --%>
<sql:statement id="statement" conn="connect">
    <sql:query>
        SELECT * FROM identitas
    </sql:query>

    <table border="1">
        <tr>
            <th>NO</th>
            <th>NAMA</th>
            <th>ALAMAT</th>
            <th>NO TELP</th>
        </tr>
            <%--Step 2.1) Loop the result--%>
        <sql:resultSet id="data">
            <tr>
                <td><sql:getColumn position="1"/> </td>
                <td><sql:getColumn position="2"/> </td>
                <td><sql:getColumn position="3"/> </td>
                <td><sql:getColumn position="4"/> </td>
            </tr>
        </sql:resultSet>
    </table>
</sql:statement>

Kemudian perhatikan baris-baris kode selanjutnya, kita membuat sebuah blok yaitu tag sql:statement. Dimana dalam blok ini kita menuliskan tag blok sql:query dan tag sql:resultSet, dan di dalam blok sql:resultSet, kita mengekstrak data-data dari database untuk ditampilkan ke dalam halaman web tersebut dengan menggunakan tag sql:getColumn. Jika kita coba pahami tag-tag tersebut mungkin seperti ini penjabarannya : tag sql:query adalah suatu tag untuk menuliskan sql query yang nantinya akan di eksekusi oleh aplikasi. Kemudian tag sql:resultSet adalah tag dimana hasil pengambilan data dari database ditempatkan dalam bentuk array collection. Dan terakhir adalah tag sql:getColumn adalah cara untuk mengekstrak array collection tersebut dan kemudian diurutkan berdasarkan tampilan dasar halaman web aplikasi kita.

<%--Step 3) Close Database Connection--%>
<sql:closeConnection conn="connect"/>

Dan akhirnya yang terakhir dalam kode ini adalah kita melakukan pemutusan koneksi terhadap database MySQL kita.
Kemudian setelah itu ujilah aplikasi MySimpleJSP ini dengan menjalankan Tomcat kita dan kemudian memanggil file get_identity.jsp tersebut pada browser kesayangan anda dengan alamat: http://localhost:8000/MySimpleJSP/get_identity.jsp (tomcat saya terkonfigurasi pada port 8000, silahkan ganti dengan port yang sesuai dengan konfigurasi tomcat anda) . jika berhasil maka seharusnya tampilan halaman web tersebut adalah seperti ini:

 

Dengan tampilnya data tersebut ke dalam halaman web aplikasi JSP kita, maka berarti percobaan yang kita lakukan kali ini dapat kita katakan berhasil. Untuk selanjutnya silahkan anda kembangkan lagi untuk penggunaan yang lebih luas, misal file jsp untuk melakukan insert data ke table identitas tersebut, dan lain-lain.

Terima kasih dan Semoga Bermanfaat

Menteng, 2 February 2010

Josescalia