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_ NCRE!ENT" `NA!A` #arc$ar(100) NOT NULL" `ALA!AT` #arc$ar(%&&) 'E(AULT NULL" `NO_TEL)` #arc$ar(%0) 'E(AULT NULL" )R !AR* +E* (`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 s !" ! atau S !"l t Contain !, kali ini kita akan menggunakan To#cat sebagai Servlet ontainer !eb "plikasi kita #. $uatlah sebuah folder dalam folder $ %apps yang berada pada folder instalasi to#cat kita. Kita beri nama M&Si#pl JSP saja. Folder ini juga nantinya akan menjadi folder path pada URL aplikasi kita. %. &i dalam folder M&Si#pl JSP tersebut kita buat lagi dua buah folder lagi bernama WEB'IN( dan li%s. '. Copy-lah file #&s)l'conn cto!'*a"a+,+-+.+*a! (saya menggunakan connector ).#.* disini+ dari library mys,l connector tadi, dan file ta/li%s'0%ta/s+*a! dari library -akarta .ablibs yang kita download tadi ke dalam folder li%s. /. Kemudian copy pula file ta/li%s'0%ta/s+tl0 dari library -akarta .aglibs yang sudah kita ekstrak tadi ke dalam folder WEB'IN(. ). $uatlah sebuah file yang bernama $ %+1#l dan kemudian simpanlah file tersebut juga di dalam folder WEB'IN(, sementara isi dari file $ %+1#l tersebut tulislah seperti dibawah ini:

6. ,-./0 #ersi1n231403 enc1din523UT(673-8 7. ,9eb6app ./0ns23$ttp:;;ja#a4sun4c1/;./0;ns;ja#aee3 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18.
,jsp6c1n?i58 ,ta50ib8 ,ta50ib6 uri8$ttp:;;ja@arta4apac$e41r5;ta50ibs;dbta5s,;ta50ib6uri8 ,ta50ib601cati1n8;AEB6 N(;ta50ibs6 dbta5s4t0d,;ta50ib601cati1n8 ,;ta50ib8 ,;jsp6c1n?i58 ./0ns:.si23$ttp:;;99949<41r5;%001;=!L>c$e/a6instance3 .si:sc$e/aL1cati1n23$ttp:;;ja#a4sun4c1/;./0;ns;ja#aee $ttp:;;ja#a4sun4c1/;./0;ns;ja#aee;9eb6app_%_&4.sd3 #ersi1n23%4&38

19. ,;9eb6app8

Sampai disini kita telah selesai melakukan persiapan-persiapan web-aplikasi untuk percobaan kita kali ini. &an langkah selanjutnya adalah tinggal membuat file-file jsp yang kita butuhkan untuk bisa mengakses database M&SQL yang telah kita buat tadi, semua file jsp yang nantinya akan kita buat akan kita letakkan dalam folder M&Si#pl JSP atau sejajar dengan folder WEB'IN( dan folder li%s. 0ari kita buat file jspnya. 1ile -S2 pertama yang akan kita buat adalah file / t2i0 ntit&+*sp, file ini adalah sebuah file jsp yang bertugas mengambil data-data yang ada dalam tabel i0 ntitas yang terletak pada database t st2*sp. 0ari perhatikan kode-kode file / t2i0 ntit&+*sp dibawah ini.
,BC pa5e c1ntentTDpe23te.t;$t/0;c$arset2UT(673 0an5ua5e23ja#a3 B8 ,BCta50ib uri23$ttp:;;ja@arta4apac$e41r5;ta50ibs;dbta5s3 pre?i.23sE03 B8 ,$t/08 ,$ead8,tit0e8!D >i/p0e F>) !*>GL )a5e,;tit0e8,;$ead8 ,b1dD8 ,B66 >tep 1) create a database c1nnecti1n 66B8 ,sE0:c1nnecti1n id23c1nnect38 ,sE0:ur08jdbc:/DsE0:;;01ca0$1st;test_jsp,;sE0:ur08 ,sE0:dri#er8c1/4/DsE04jdbc4'ri#er,;sE0:dri#er8 ,sE0:user d8r11t,;sE0:user d8 ,sE0:pass91rd8ad/inHH,;sE0:pass91rd8 ,;sE0:c1nnecti1n8

,B66End Creatin5 database C1nnecti1n66B8 ,B66 >tep %) Create a >GL EuerD 66B8 ,sE0:state/ent id23state/ent3 c1nn23c1nnect38 ,sE0:EuerD8 >ELECT I (RO! identitas ,;sE0:EuerD8 ,tab0e b1rder23138 ,tr8 ,t$8NO,;t$8 ,t$8NA!A,;t$8 ,t$8ALA!AT,;t$8 ,t$8NO TEL),;t$8 ,;tr8 ,B66>tep %41) L11p t$e ,sE0:resu0t>et id23data38 ,tr8 ,td8,sE0:5etC10u/n ,td8,sE0:5etC10u/n ,td8,sE0:5etC10u/n ,td8,sE0:5etC10u/n ,;tr8 ,;sE0:resu0t>et8 ,;tab0e8 ,;sE0:state/ent8

resu0t66B8 p1siti1n2313;8 p1siti1n23%3;8 p1siti1n23<3;8 p1siti1n23J3;8 ,;td8 ,;td8 ,;td8 ,;td8

,B66>tep <) C01se 'atabase C1nnecti1n66B8 ,sE0:c01seC1nnecti1n c1nn23c1nnect3;8 ,;b1dD8 ,;$t/08

0ari perhatikan masing-masing kode -S2 diatas:

,BC pa5e c1ntentTDpe23te.t;$t/0;c$arset2UT(673 0an5ua5e23ja#a3 B8 ,BCta50ib uri23$ttp:;;ja@arta4apac$e41r5;ta50ibs;dbta5s3 pre?i.23sE03 B8

2ada baris ke dua kita melakukan deklarasi ta/ yang nanti akan kita pakai dalam file jsp ini. U!i dalam baris tersebut haruslah sama dengan ta/li%'3!i yang kita deklarasikan di dalam file $ %+1#l sebelumnya, dimana pada proses running-nya nanti file $ %+1#l akan bertanggung jawab untuk mencari referensi tag-tag dengan prefi3 sql dalam file ta/li%s'0%ta/s+tl0.
,B66 >tep 1) create a database c1nnecti1n 66B8 ,sE0:c1nnecti1n id23c1nnect38 ,sE0:ur08jdbc:/DsE0:;;01ca0$1st;test_jsp,;sE0:ur08 ,sE0:dri#er8c1/4/DsE04jdbc4'ri#er,;sE0:dri#er8 ,sE0:user d8r11t,;sE0:user d8 ,sE0:pass91rd8ad/inHH,;sE0:pass91rd8 ,;sE0:c1nnecti1n8 ,B66End Creatin5 database C1nnecti1n66B8

Sementara pada blok kode diatas kita melakukan deklarasi tag-tag untuk melakukan

koneksi ke database #&s)l yang kita buat tadi. oba perhatikan tiap baris diatas, databasenya adalah t st2*sp kemudian Driver-nya adalah co#+#&s)l+*0%c+D!i" !, kemudian 3s !I0 untuk melakukan koneksi ke database mys,l adalah !oot, dan password untuk melakukan koneksi ke database mys,l tersebut adalah a0#in44. Us !na# database mys,l saya adalah !oot dan pass$o!0n&a adalah a0#in44, silahkan sesuaikan dengan setting database anda masing-masing. 4ang harus diperhatikan lagi dalam kode di atas adalah semua konfigurasi ini harus berada dalam blok tag s)l5conn ction.

,B66 >tep %) Create a >GL EuerD 66B8 ,sE0:state/ent id23state/ent3 c1nn23c1nnect38 ,sE0:EuerD8 >ELECT I (RO! identitas ,;sE0:EuerD8 ,tab0e b1rder23138 ,tr8 ,t$8NO,;t$8 ,t$8NA!A,;t$8 ,t$8ALA!AT,;t$8 ,t$8NO TEL),;t$8 ,;tr8 ,B66>tep %41) L11p t$e ,sE0:resu0t>et id23data38 ,tr8 ,td8,sE0:5etC10u/n ,td8,sE0:5etC10u/n ,td8,sE0:5etC10u/n ,td8,sE0:5etC10u/n ,;tr8 ,;sE0:resu0t>et8 ,;tab0e8 ,;sE0:state/ent8

resu0t66B8 p1siti1n2313;8 p1siti1n23%3;8 p1siti1n23<3;8 p1siti1n23J3;8 ,;td8 ,;td8 ,;td8 ,;td8

Kemudian perhatikan baris-baris kode selanjutnya, kita membuat sebuah blok yaitu tag s)l5stat # nt. &imana dalam blok ini kita menuliskan tag blok s)l5)3 !& dan tag s)l5! s3ltS t, dan di dalam blok s)l5! s3ltS t, kita mengekstrak data-data dari database untuk ditampilkan ke dalam halaman web tersebut dengan menggunakan tag s)l5/ tCol3#n. -ika kita coba pahami tag-tag tersebut mungkin seperti ini penjabarannya : tag s)l5)3 !& adalah suatu tag untuk menuliskan sql query yang nantinya akan di eksekusi oleh aplikasi. Kemudian tag s)l5! s3ltS t adalah tag dimana hasil pengambilan data dari database ditempatkan dalam bentuk array collection. &an terakhir adalah tag s)l5/ tCol3#n adalah cara untuk mengekstrak array collection tersebut dan kemudian diurutkan berdasarkan tampilan dasar halaman web aplikasi kita.

,B66>tep <) C01se 'atabase C1nnecti1n66B8 ,sE0:c01seC1nnecti1n c1nn23c1nnect3;8

&an akhirnya yang terakhir dalam kode ini adalah kita melakukan pemutusan koneksi terhadap database M&SQL kita. Kemudian setelah itu ujilah aplikasi M&Si#pl JSP ini dengan menjalankan To#cat kita dan kemudian memanggil file get5identity.jsp tersebut pada browser kesayangan anda dengan alamat: http://localhost:8000/MySimpleJSP/get_identity jsp (to#cat saya terkonfigurasi pada port 6777, silahkan ganti dengan port yang sesuai dengan konfigurasi to#cat anda+