Modul Latihan: Pembangunan Applikasi Pangkalan Data dan JSP Bahagian 1 Kursus ini dikendalikan oleh: Dr Fatimah Sidi Jabatan Sains Komputer Fakulti Sains Komputer dan Teknologi Maklumat
Kandungan Modul 1.0 Pengenalan... 2 2.0 Objektif... 2 3.0 Asas JSP... 2 4.0 Menghubung JSP dengan Pangkalan Data... 5 5.0 Operasi Tambah Rekod... 9 6.0 Operasi Papar Rekod... 11 Jabatan Sains Komputer, FSKTM Mukasurat 1
1.0 Pengenalan Kod aturcara HTML akan menjadi lebih baik sekiranya di masukkan elemen JSP. Sintak penulisan kod aturcara JSP adalah seperti contoh di bawah :-... Disebabkan JSP merupakan perluasan daripada Java Servlet, pengaturcara boleh menggunakan class dan package Java yang telah sedia di kompil di dalam aturcara JSP mereka. Pengaturcara perlu menulis seperti di bawah :- @page import="java.sql.*" di dalam dokumen JSP. 2.0 Objektif Di akhir modul ini, pengguna boleh membangunkan aplikasi web JSP yang mengandungi fungsi login pengguna, menghubung jsp dan pangkalan data serta operasi tambah dan papar rekod. 3.0 Asas JSP Kod aturcara HTML akan menjadi lebih baik sekiranya di masukkan elemen JSP. Latihan 3.1 1) Buka fail baru: File New Folder General, Category: Basic page, Basic page: HTML Create. Simpan fail sebagai menu.jsp dan simpan di dalam direktilori D:\orion\default-webapp\kursusJSP. 2) Tambah baris kod aturcara JSP = new java.util.date() di dalam kod aturcara dokumen menu.jsp. Masa sekarang: = new java.util.date() <html> <head> <title>cubaan Pertama </title> </head> <body> Ini laman web pertama saya</br> Masa sekarang: = new java.util.date() </body> </html> 3) Lihat output dengan menaip http://localhost/menu.jsp Jabatan Sains Komputer, FSKTM Mukasurat 2
Scriptlet Scriptlet mengandungi kod Java yang akan di laksanakan setiap kali dokumen JSP dipanggil. Latihan 3.2 1) Buka fail menu.jsp. 2) Ubahsuai kod aturcara seperti di bawah :- <html> <head> <title>cubaan Pertama </title> </head> <body> System.out.println( "Hari ini hari apa" ); java.util.date date = new java.util.date(); System.out.println( "Hari ini hari apa ==> " + date); Ini laman web pertama saya</br> Masa sekarang: = date </body> </html> Catatan: Di dalam scriptlet, kod aturcara tidak boleh disertakan bersama kod HTML. Semua kod perlu diletakkan di dalam kod Java. 3) Lihat output dengan menaip http://localhost/menu.jsp 4) Output dari "System.out.println" tidak akan dipaparkan di laman HTML, tetapi di server log. 5) Cara yang perlu dilakukan untuk memaparkan tulisan di laman HTML adalah seperti berikut :- out.println(date); 6) Ubahsuai kod aturcara seperti di bawah :- <html> <head> <title>cubaan Pertama </title> </head> <body> System.out.println( "Hari ini hari apa" ); java.util.date date = new java.util.date(); System.out.println( "Hari ini hari apa ==> " + date); Ini laman web pertama saya</br> Masa sekarang : out.println(date); </body> </html> Jabatan Sains Komputer, FSKTM Mukasurat 3
Passing Parameter Parameter bermaksud nilai dari elemen HTML seperi Text Field, Password Field dan sebagainya yang ingin diproses untuk di simpan, kemaskini atau hapus di pangkalan data atau untuk di paparkan di laman HTML. Sintaks penulisan untuk menghantar parameter adalah seperti contoh di bawah :- Elemen Text Field: User ID: <input type="text" name="userid"> Parameter yang telah di input oleh pengguna akan dihantar ke satu dokumen jsp yang lain untuk diproses. Pada dokumen tersebut, kod aturcara di bawah perlu diletakkan untuk menerima parameter tersebut. String userid=request.getparameter("userid"); Catatan: Parameter yang dihantar adalah nama elemen HTML di dokumen tersebut. Latihan 3.3 1) Save As.. dokumen login.html kepada login.jsp dan simpan di dalam direktori D:\orion\defaultweb-app\kursusJSP. 2) Buka satu fail baru dan simpan sebagai pengesahan.jsp. 3) Hapus tag HTML pada dokumen pengesahan.jsp dan taip kod aturcara di bawah untuk menerima parameter yang di hantar dari dokumen login.jsp. String userid=request.getparameter("userid"); String katalaluan=request.getparameter("katalaluan"); System.out.println(userid); System.out.println(katalaluan); 4) Pada dokumen login.jsp, pergi ke baris kod <form method="post" action=""> 5) Edit kod tersebut seperti di bawah :- <form method="post" action="pengesahan.jsp"> 6) Lihat output dengan menaip http://localhost/login.jsp. Isikan nilai pada Text Field dan Password Field dan klik butang Submit. Output akan dipaparkan di server log. 7) Edit kod aturcara dokumen pengesahan.jsp seperti di bawah :- String userid=request.getparameter("userid"); String katalaluan=request.getparameter("katalaluan"); out.println(userid); out.println(katalaluan); 8) Lihat output dengan mengulangai langkah 6. Jabatan Sains Komputer, FSKTM Mukasurat 4
4.0 Menghubung JSP dengan Pangkalan Data Dokumen aturcara JSP perlu dihubungkan dengan pangkalan data sebelum operasi pada pangkalan data boleh dilakukan. Baris kod di bawah perlu dimasukkan di dalam dokumen JSP untuk tujuan itu. @ include file = "connection.jsp" 1) Copy classes12.jar dari D:\jsp_software ke dalam D:\orion\lib. 2) Ikuti langkah di bawah untuk membina connection antara pangkalan data dan JSP. a. Buka fail baru dan simpan sebagai connection.jsp. Simpan fail di direktori D:\orion\default-web-app\kursusJSP b. Delete semua tag html di dalam dokumen c. Taipkan kod aturcara di bawah :- @ page import="java.sql.*"! Driver driver = null; String driverused = "oracle.jdbc.driver.oracledriver"; String serveraddress = "jdbc:oracle:thin:@172.16.61.31:1521:orafsktm"; String user="user1"; String pass="user1"; public Connection getconnected() throws Exception Connection conn = null; try if (driver==null) driver = (Driver)Class.forName(driverUsed).newInstance(); conn = DriverManager.getConnection(serverAddress, user, pass); return conn; catch (Exception e) throw new Exception("Database Gagal Dihubungkan"); d. Buka fail baru dan simpan sebagai test_connection.jsp e. Taipkan kod aturcara di bawah :- @ include file="connection.jsp" Connection conn=null; try conn=getconnected(); out.println ("Database berjaya dihubungkan"); catch (Exception e) out.println ("Database tidak berjaya dihubungkan"); f. Buka browser dan uji aturcara dengan menaip :- g. http://localhost/kursusjsp/test_connection.jsp h. Lihat output yang dipaparkan Jabatan Sains Komputer, FSKTM Mukasurat 5
Latihan 3.4 Soalan: Paparkan no staf, nama, alamat, jantina, taraf perkahwinan, bangsa dan alamat ahli dari pangkalan untuk rekod seorang ahli 1) Taip baris aturcara di atas di dalam dokumen pengesahan.jsp. @ include file = "connection.jsp" 2) Cipta objek untuk Class Connection seperti di bawah :- Connection conn=null; 3) Cipta objek untuk Class PreparedStatement seperti di bawah :- PreparedStatement pstmt=null; 4) Cipta objek untuk Class ResultSet seperti di bawah :- ResultSet rs = null; 5) Ketiga-tiga kelas di atas perlu untuk operasi pangkalan data. 6) Komen/padamkan baris aturcara berikut :- //out.println(userid); //out.println(katalaluan); 7) Hubungkan scriptlet dengan pangkalan data menggunakan kod aturcara di bawah :- conn=getconnected(); 8) Taip kod aturcara di bawah untuk melakukan pengesahan pada userid dan katalaluan yang diterima dari input pengguna. String sql = "select userid, katalaluan from users where userid=? and katalaluan =?"; pstmt=conn.preparestatement(sql); pstmt.clearparameters(); pstmt.setstring(1,userid); pstmt.setstring(2,katalaluan); rs = pstmt.executequery(); 9) Isytihar variable di bawah di bahagian atas aturcara. Variable ini adalah terpulang kepada pengaturcara yang menulis aturcara. String user_id = ""; String user_katalaluan = ""; boolean ada = false; 10) Variable user_id dan user_katalaluan yang berjenis String adalah untuk menerima nilai dari pangkalan data. Variable ada yang berjenis boolean adalah untuk menjadi flag, iaitu, jika rekod wujud,variable ada akan bernilai true, dan jika tiada, akan bernilai false. Jabatan Sains Komputer, FSKTM Mukasurat 6
11) Taip kod aturcara di bawah untuk menerima data dari pangkalan data sekiranya data tersebut wujud. while( rs.next() ) user_id = rs.getstring("userid"); user_katalaluan = rs.getstring("katalaluan"); ada = true; 12) Sekiranya, data tersebut wujud, sistem perlu memberitahu pengguna samada mereka adalah pengguna yang sah atau tidak. Kod aturcara di bawah adalah perlu untuk tujuan tersebut. if( ada == true ) out.println ("Anda pengguna yang sah"); else out.println ("Anda pengguna tidak sah"); 13) Lihat output dengan menaip http://localhost/login.jsp. Isikan nilai pada Text Field dan Password Field dan klik butang Submit. Lihat output yang dipaparkan. Catatan: Untuk pengaturcaraan web, pengaturcara perlu mahir menggunakan pernyataan IF/ELSE, WHILE, FOR dan sebagainya. Close Connection Setelah selesai menulis aturcara, pengaturcara perlu menulis baris aturcara di bawah untuk memutuskan semua connection dengan pangkalan data. rs.close(); pstmt.close(); conn.close(); Jabatan Sains Komputer, FSKTM Mukasurat 7
Redirect Page Redirect page merupakan cara untuk memaparkan dokumen secara automatik selepas suatu tindakan. Sintak penulisan kod aturcara bagi redirect page adalah seperti berikut:- response.sendredirect("ahli.jsp"); Latihan 3.5 1) Save As.. dokumen daftarahli.html kepada daftarahli.jsp dan simpan di dalam direktori D:\orion\default-web-app\kursusJSP. 2) Buka fail baru dan simpan sebagai error.jsp. 3) Gantikan baris aturcara out.println ("Anda pengguna yang sah"); kepada response.sendredirect("daftarahli.jsp"); 4) Gantikan baris aturcara out.println ( Anda pengguna tidak sah ); kepada response.sendredirect("error.jsp"); 5) Lihat output dengan menaip http://localhost/login.jsp. Isikan nilai pada Text Fields dan Password Fields dan klik butang Submit. Lihat output yang dipaparkan. Jabatan Sains Komputer, FSKTM Mukasurat 8
HTTP Session HTTP Session membolehkan satu nilai disimpan di dalam session dimana nilai tersebut akan digunakan berulang kali di dalam sesebuah sistem aplikasi. Sintak penulisan untuk mengumpukkan value kepada session adalah seperti di bawah:- session.putvalue("nostaf",no_staf); Baris kod di atas bermaksud nilai yang dipegang oleh parameter no_staf diumpukkan kepada session yang di isythiharkan sebagai nostaf. Sintak penulisan untuk menerima nilai daripada session adalah seperti berikut :- no_staf=(string)session.getvalue("nostaf"); 5.0 Operasi Tambah Rekod Operasi tambah rekod baru adalah satu kemestian di dalam sesebuah sistem aplikasi, tidak mengira samada sistem aplikasi itu berkonsepkan web atau client-server. Latihan 3.6 1) Buka satu fail baru dan simpan sebagai simpanahli.jsp. 2) Hapus tag HTML pada dokumen simpanahli.jsp dan taip kod aturcara di bawah untuk menerima parameter yang di hantar dari dokumen daftarahli.jsp. String nostaf=request.getparameter("nostaf"); String nama=request.getparameter("nama"); String jantina=request.getparameter("jantina"); String taraf_perkahwinan =request.getparameter("taraf_perkahwinan"); String bangsa=request.getparameter("bangsa"); String alamat=request.getparameter("alamat"); out.println(nostaf); out.println(nama); out.println(jantina); out.println(taraf_perkahwinan); out.println(bangsa); out.println(alamat); 3) Pada dokumen daftarahli.jsp, tambah butang Hantar, pergi ke baris kod <form action="" method="post" name="form1"> Jabatan Sains Komputer, FSKTM Mukasurat 9
4) Edit kod tersebut seperti di bawah :- <form id="form1" name="form1" method="post" action="simpanahli.jsp"> 5) Lihat output pada browser. 6) Komen/padamkan baris aturcara berikut :- /* out.println(nostaf); out.println(nama); out.println(jantina); out.println(taraf_perkahwinan); out.println(bangsa); out.println(alamat); */ 7) Taip baris aturcara include file jsp yang menghubung pangkalan data di dalam dokumen daftarahli.jsp @ include file = "connection.jsp" 8) Hubungkan scriptlet dengan pangkalan data menggunakan kod aturcara di bawah :- // for connection Connection conn=null; PreparedStatement pstmt=null; ResultSet rs=null; conn = getconnected(); 9) Taip kod aturcara di bawah untuk melihat samada data baru yang ingin dimasukkan telah wujud di dalam pangkalan data atau belum. String sql="select count(*) from ahli where no_staf=?"; pstmt=conn.preparestatement(sql); pstmt.clearparameters(); pstmt.setstring(1,nostaf); rs = pstmt.executequery(); rs.next(); int count = rs.getint(1); rs.close(); pstmt.close(); 10) Gunakan pernyataan IF/ELSE untuk membolehkan data baru disimpan sekiranya data tersebut belum wujud di dalam pangkalan data. if (count==0) String sql_insert = "INSERT INTO ahli "+ "(no_staf,nama,jantina,taraf_perkahwinan,"+ "bangsa,alamat)values "+ "(?,?,?,?,?,?)"; Jabatan Sains Komputer, FSKTM Mukasurat 10
pstmt=conn.preparestatement(sql_insert); pstmt.clearparameters(); pstmt.setstring(1,nostaf); pstmt.setstring(2,nama); pstmt.setstring(3,jantina); pstmt.setstring(4,taraf_perkahwinan); pstmt.setstring(5,bangsa); pstmt.setstring(6,alamat); else int insert=pstmt.executeupdate(); pstmt.close(); //data telah ada 11) Buka dua fail baru dan simpan sebagai sah_simpan.jsp dan error_simpan.jsp. 12) Redirect page simpanahli.jsp kepada sah_simpan.jsp sekiranya data baru berjaya di simpan dan kepada error_simpan.jsp sekiranya data telah wujud. 13) Pada dokumen sah_simpan.jsp, create satu hyperlink kepada page daftarahli.jsp untuk memudahkan pengguna menambah rekod baru. 14) Close connection. 6.0 Operasi Papar Rekod Data yang telah dimasukkan ke dalam pangkalan data perlu dipaparkan semula untuk tujuan kemaskini dan laporan. Kebiasaannya, format paparan data adalah dalam bentuk single record atau multiple record. a) Paparan single record Paparan single record memerlukan input dari pengguna. Biasanya, input tersebut merupakan primary key atau data yang unik untuk suatu objek di dalam pangkalan data. Contoh data tersebut adalah seperti berikut :- No Matrik / No Kad Pengenalan bagi Pelajar No Staf / No Kad Pengenalan bagi Staf No Siri bagi Buku atau Jurnal Latihan 3.7 Soalan : Bina satu modul yang memaparkan maklumat berikut :- i) No Staf ii) Nama iii) Jantina iv) Taraf Perkahwinan v) Bangsa vi) Alamat Jabatan Sains Komputer, FSKTM Mukasurat 11
1) Buka fail baru dan simpan sebagai cariahli.jsp 2) Bina HTML Form yang memaparkan output seperti di bawah :- 3) Buka fail baru dan simpan sebagai paparahli.jsp dan bina HTML Form seperti di bawah :- Jabatan Sains Komputer, FSKTM Mukasurat 12
4) Taip kod aturcara di bawah untuk menerima parameter yang di hantar dari dokumen cariahli.jsp. String nostaf=request.getparameter("nostaf"); 5) Umpukkan parameter nostaf kepada session no_staf dengan menulis kod di bawah :- session.putvalue("no_staf",nostaf); 6) Pada dokumen cariahli.jsp, pergi ke baris kod <form method="post" action=""> 7) Edit kod tersebut seperti di bawah :- <form method="post" action="paparahli.jsp"> 8) Lihat output pada browser. 9) Taip baris aturcara include file jsp yang menghubung pangkalan data di dalam dokumen paparahli.jsp @ include file = "connection.jsp" 10) Hubungkan scriptlet dengan pangkalan data. // for connection Connection conn=null; PreparedStatement pstmt=null; ResultSet rs=null; 11) Taip kod aturcara di bawah untuk melihat samada data dari input pengguna wujud dalam pangkalan data atau tidak. conn = getconnected(); String sql = "select * from ahli where no_staf=?"; pstmt=conn.preparestatement(sql); pstmt.clearparameters(); pstmt.setstring(1,nostaf); rs = pstmt.executequery(); 12) Isytihar variable di bawah di bahagian atas aturcara. String no_staf = ""; String nama = ""; String alamat = ""; String jantina = ""; String bangsa = ""; String taraf_perkahwinan= ""; 13) Taip kod aturcara di bawah untuk menerima data dari pangkalan data sekiranya data tersebut wujud. Jabatan Sains Komputer, FSKTM Mukasurat 13
while( rs.next() ) no_staf = rs.getstring("no_staf"); nama = rs.getstring("nama"); alamat = rs.getstring("alamat"); jantina = rs.getstring("jantina"); bangsa = rs.getstring("bangsa"); taraf_perkahwinan = rs.getstring("taraf_perkahwinan"); 14) Pengaturcara perlu menulis kod di bawah untuk memaparkan data dari pangkalan data ke dalam tables. Contoh :- =no_staf untuk memaparkan no_staf. 15) Ulangi langkah 14 untuk memaparkan semua variable. 16) Close Connection pstmt.close(); conn.close(); 17) Laksanakan aturcara pada browser. 18) Perhatikan ouput untuk Jantina, Bangsa dan Taraf Perkahwinan. 19) Taip kod aturcara di bawah bagi membolehkan nilai Jantina di paparkan sebagai Lelaki atau Perempuan. if(jantina.equals("l")) jantina="lelaki"; if(jantina.equals("p")) jantina="perempuan"; 20) Taip kod aturcara di bawah bagi membolehkan nilai Taraf Perkahwinan di paparkan sebagai Bujang, Berkahwin atau Lain-lain. if (taraf_perkahwinan.equals("1")) taraf_perkahwinan="bujang"; if (taraf_perkahwinan.equals("2")) taraf_perkahwinan="berkahwin"; if (taraf_perkahwinan.equals("3")) taraf_perkahwinan="lain-lain"; Jabatan Sains Komputer, FSKTM Mukasurat 14
21) Taip kod aturcara di bawah bagi membolehkan nilai Bangsa di paparkan sebagai Melayu, Cina, India atau Lain-lain. if (bangsa.equals("m")) bangsa="melayu"; if (bangsa.equals("c")) bangsa="cina"; if (bangsa.equals("i")) bangsa="india"; if (bangsa.equals("l")) bangsa="lain-lain"; 22) Laksanakan aturcara pada browser. b) Paparan multiple record Paparan multiple record memerlukan input dari pengguna. Biasanya, input tersebut merupakan data yang berulang untuk suatu objek di dalam pangkalan data. Contoh data tersebut adalah seperti berikut :- Jantina Bangsa Taraf Perkahwinan Output yang akan diperolehi akan diumpukkan ke dalam tatasusunan (array). Latihan 3.8 Soalan : Bina satu modul yang memaparkan maklumat berikut :- i) No Staf ii) Nama iii) Jantina iv) Bangsa v) Taraf Perkahwinan 1) Buka fail baru dan simpan sebagai laporanjantina.jsp 2) Bina HTML Form yang memaparkan output seperti di bawah :- Jabatan Sains Komputer, FSKTM Mukasurat 15
3) Buka fail baru dan simpan sebagai laporan.jsp dan bina HTML Form seperti di bawah :- 4) Set Table width kepada 100 percent. Ini membolehkan laporan dicetak dalam satu halaman bagi menghasilkan laporan yang kemas. 5) Taip kod aturcara di bawah untuk menerima parameter yang di hantar dari dokumen laporanjantina.jsp. String jantina=request.getparameter("jantina"); 6) Pada dokumen laporanjantina.jsp, pergi ke baris kod <form method="post" action=""> 7) Edit kod tersebut seperti di bawah :- <form method="post" action="laporan.jsp"> 8) Lihat output pada browser. 9) Taip baris aturcara include file jsp yang menghubung pangkalan data di dalam dokumen @ include file = "connection.jsp" Jabatan Sains Komputer, FSKTM Mukasurat 16
10) Hubungkan scriptlet dengan pangkalan data. Connection conn=null; PreparedStatement pstmt=null; ResultSet rs=null; conn=getconnected(); 11) Cipta objek Vector bagi mengumpukkan array output seperti di bawah :- Vector v=new Vector(); 12) Untuk menggunakan kelas Vector, package java.util perlu diimport di dalam aturcara seperti di bawah :- @ page import="java.util.*" 13) Taip kod aturcara di bawah untuk melihat samada data dari input pengguna wujud dalam pangkalan data atau tidak. String sql="select * from ahli where jantina=?"; pstmt=conn.preparestatement(sql); pstmt.clearparameters(); pstmt.setstring(1,jantina); rs=pstmt.executequery(); 14) Taip kod aturcara di bawah untuk menerima data dari pangkalan data sekiranya data tersebut wujud. while (rs.next()) String[] s=new String[5]; s[0]=rs.getstring("no_staf"); s[1]=rs.getstring("nama"); s[2]=rs.getstring("jantina"); s[3]=rs.getstring("bangsa"); s[4]=rs.getstring("taraf_perkahwinan"); v.addelement(s); 15) Pada row table kedua, kod aturcara ditulis seperti di bawah :- int bil=1; for(int j=0;j<v.size();j++) String[] arr=(string[])v.elementat(j); Jabatan Sains Komputer, FSKTM Mukasurat 17
<tr> </tr> bil++; <td width="111"> =bil</td> <td> =arr[0]</td> <td> =arr[1]</td> <td> =arr[2]</td> <td> =arr[3]</td> 16) Close Connection 17) Laksanakan aturcara pada browser. Sambungan Latihan Bahagian 2 Modul Latihan: Pembangunan Applikasi Pangkalan Data dan JSP Bahagian 2 Jabatan Sains Komputer, FSKTM Mukasurat 18