PODAYA MUTIARA DESA LOKOTOY: CARA MUDAH MEMBUAT APLIKASI WEB DENGAN JSP DAN DATABASE MYSQL

Dalam Tutorial kali ini, saya ingin berbagi bagai mana Cara Membuat Aplikasi Web dengan JSP dan DATABASE MYSQL, langsung aja yach.. 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. <jsp-config>

14. <taglib>

15. <taglib-uri>http://jakarta.apache.org/taglibs/dbtags</taglib-uri>

16. <taglib-location>/WEB-INF/taglibs-dbtags.tld</taglib-location>

17. </taglib>

18. </jsp-config>

19.</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>

<tr>

<th>ALAMAT</th>

</tr>

<%--Step 2.1) Loop the result--%>

<sql:resultSet id="data">

<tr>

</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>

<tr>

<th>ALAMAT</th>

</tr>

<%--Step 2.1) Loop the result--%>

<sql:resultSet id="data">

<tr>

</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)

Demikian tutorial kali ini yang dapat saya bagikan...HAPPY BLOGGING....

PODAYA MUTIARA DESA LOKOTOY

Thursday, July 19, 2012

CARA MUDAH MEMBUAT APLIKASI WEB DENGAN JSP DAN DATABASE MYSQL

No comments:

Post a Comment