Anda di halaman 1dari 4

CARA MUDAH MEMBUAT APLIKASI WEB DENGAN JSP DAN DATABASE

MYSQL
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 :
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.
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
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:

6. <?xml version="1.0" encoding="UTF-8"?>


7. <web-app xmlns="http://java.sun.com/xml/ns/javaee"
8.
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
9.
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
10.
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
11.
version="2.5">
12.

13.
14.

<jsp-config>
<taglib>

15.
16.
17.
18.
19.

<tagliburi>http://jakarta.apache.org/taglibs/dbtags</taglib-uri>
<taglib-location>/WEB-INF/taglibsdbtags.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
<sql:resultSet id="data">
<tr>
<td><sql:getColumn
<td><sql:getColumn
<td><sql:getColumn
<td><sql:getColumn
</tr>

result--%>
position="1"/>
position="2"/>
position="3"/>
position="4"/>

</td>
</td>
</td>
</td>

</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
<sql:resultSet id="data">
<tr>
<td><sql:getColumn
<td><sql:getColumn
<td><sql:getColumn
<td><sql:getColumn
</tr>
</sql:resultSet>
</table>
</sql:statement>

result--%>
position="1"/>
position="2"/>
position="3"/>
position="4"/>

</td>
</td>
</td>
</td>

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)

Anda mungkin juga menyukai