<html> <head> <title>index Tag Include</title> <style type="text/css">.style1 { font-size:18px; font-weight:bold; } </style> </head>

Ukuran: px

Mulai penontonan dengan halaman:

Download "<html> <head> <title>index Tag Include</title> <style type="text/css">.style1 { font-size:18px; font-weight:bold; } </style> </head>"

Handoko Kartawijaya
6 tahun lalu
Tontonan:

1 Penggunaan Action Include Sebagai latihan, Anda akan menggunakan tag action include sehingga untuk menghasilkan tampilan untuk navigation bar yang dapat memberitahukan dimana kita berada dan memberi tampilan button yang berbeda. Lakukan langkah-langkah berikut: 1. Pertama-tama Anda membuat indextaginclude.html 2. Kemudian buat taginclude.jsp, fungsi file ini sebagai halaman JSP yang melakukan include dan memberikan data parameter ke file yang diincludekan. 3. Buat navbar.jsp, sebagai file yang diicludekan yang menerima data parameter untuk menampilkan navigation bar yang sesuai. 4. Jalankan dengan indextaginclude.html indextaginclude.html <html> <head> <title>index Tag Include</title> <style type="text/css">.style1 { font-size:18px; font-weight:bold; } </style> </head> <body> <table width="439" border="0" bgcolor="#000ff"> <td width="91" bgcolor="#00ffff"><div align="center" class="style1"><a href="taginclude.jsp?link=home">home</a></div></td> <td width="83" bgcolor="#00ffff"><div align="center" class="style1"><a href="taginclude.jsp?link=produk"> Produk </a></div></td> <td width="101" bgcolor="#00ffff"><div align="center" class="style1"><a href="taginclude.jsp?link=kontak">kontak </a></div></td> <td width="136" bgcolor="#00ffff"><div align="center" class="style1"><a href="taginclude.jsp?link=tentang">tentang Kami </a></div></td> </table> </body> </html>

2 taginclude.jsp <html> <head> <title>tag Include</title> </head> <body> <% String link=request.getparameter("link"); %> <jsp:include page="navbar.jsp" flush="true"> <jsp:param name="link" value="<%=link%>"/> </jsp:include> <a href="indextaginclude.html">kembali Ke Menu</a> </body> </html> navbar.jsp page contenttype="text/html; charset=iso " language="java" import="java.sql.*" errorpage="" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <title>navbar</title> <style type="text/css">.style1 {font-size:18px;}.style2 {font-size:18px; font-weight: bold;} </style> </head> <body> <% String kliklink =request.getparameter("link"); String latarhome = "#00ffff"; String latarproduk = "#00ffff"; String latarkontak = "#00ffff"; String latartentang = "#00ffff"; if (kliklink.equals("home")) latarhome = "#999999"; if (kliklink.equals("produk")) latarproduk = "#999999"; if (kliklink.equals("kontak")) latarkontak = "#999999"; if (kliklink.equals("tentang")) latartentang = "#999999"; %>

link=produk">produk</a></div></td> <td width="101" bgcolor="<%=latarkontak%>" class="style1"><div align="center" class="style2"> <a href="taginclude.jsp?

3 <table width="439" border="0" bgcolor="#0000ff"> <td width="91" bgcolor="<%=latarhome%>" class="style1"><div align="center" class="style1"><strong> <a href="taginclude.jsp?link=home">home</a></strong></div></td> <td width="83" bgcolor="<%=latarproduk%>" class="style1"><div align="center" class="style2"> <a href="taginclude.jsp?link=produk">produk</a></div></td> <td width="101" bgcolor="<%=latarkontak%>" class="style1"><div align="center" class="style2"> <a href="taginclude.jsp?link=kontak">kontak</a></div></td> <td width="136" bgcolor="<%=latartentang%>" class="style1"><div align="center" class="style2"> <a href="taginclude.jsp?link=tentang">tentang Kami</a></div></td> </table> </body> </html> Output program : Tampilan utama seperti ditunjukkan gambar 1.1. Jika klik Home maka tampak seperti gambar 1.2, jika kita klik Tentang Kami maka akan tampak seperti gambar 1.3. Gambar 1.1 Gambar 1.2

4 Gambar 1.3

5 Penggunaan Parameter 1. membuat kode form input Kode : input.html Listing Program 2.1 Hasil di browser : Gambar 2.1

6 2. Membuat kode untuk menangkap parameter Kode : hello.jsp Hasil di browser : Listing Program 2.2 Isikan nama dan klik tombol Kirim : Gambar 2.2 Gambar 2.3

7 Contoh 1 : Buatlah aplikasi seperti gambar 3.1. Lakukan langkah berikut: Ketik listing program 3.1 dan simpan sebagai Form.jsp Jalankan pada browser Isilah form ini dengan nilai nama : Mas java alamat : Rejoso Setelah anda mengisi kemudian tekan tombol submit supaya form diproses. Gambar 3.1

8 <html> <head> <title>formulir JSP</title> </head> <body> <form action="form.jsp" method="post" name="form"> <table width="50%" border="1" > <tr bordercolor="0000cc" bgcolor="#00ffff"> <td width="32%">nama</td> <td width="68%"><input name="nama" type="text" id="nama" size="20" maxlength="20"></td> <tr bgcolor="#00ffff"> <td>alamat</td> <td><input name="alamat" type="text" id="alamat" size="20" maxlength="20"></td> <tr bgcolor="#00ffff"> <td colspan="2"><input type="submit" name="submit" value="submit"></td> </table> </form> <% String nama = request.getparameter("nama"); String alamat = request.getparameter("alamat"); if (nama!=null && nama.length()>0) { out.println("nama = " +nama + "<br>"); out.println("alamat = " + alamat + "<br>"); } %> </body> </html> Listing Program 3.1

9 Contoh 2 : Lakukan langkah-langkah berikut: Ketikan listing program 3.2 sebagai formdua.jsp Jalankan formdua.jsp pada browser Isi form dengan Nama : Mas Java Alamat : Rejoso Propinsi : Jawa Timur Pekerjaan : karyawan Setelah anda mengisi data selanjutnya tekan tombol submit supaya from diproses, maka akan mendapatkan tampilan seperti gambar 3.2

10 <html> <head> <title>formulir kedua jsp</title> </head> <body> <form action="formdua.jsp" method="post" name="form1"> <table width="50%" border="1"> <td width="29%">nama</td> <td width="71%"><input name="nama" type="text" id="nama"></td> <td>alamat</td> <td><input name="alamat" type="text" id="alamat"></td> <td>propinsi</td> <td><select name="propinsi" id="propinsi"> <option value="jawa Timur">Jawa Timur</option> <option value="jawa Tengah">Jawa Tengah</option> <option value="jawa Barat" selected>jawa Barat</option> </select></td> <td>pekerjaan</td> <td><p> <input name="pekerjaan" type="radio" value="mahasiswa" checked> Mahasiswa<br> <input name="pekerjaan" type="radio" value="karyawan"> Karyawan<br> <input name="pekerjaan" type="radio" value="wiraswasta"> Wiraswasta </p> </td> <td> </td> <td><input type="submit" name="submit" value="submit"></td> </table> </form> <% String nama = request.getparameter("nama"); String alamat = request.getparameter("alamat"); String pekerjaan = request.getparameter("pekerjaan"); String propinsi = request.getparameter("propinsi"); if (nama!=null && nama.length()>0) { out.println("nama = " +nama + "<br>"); out.println("alamat = " + alamat + "<br>"); out.println("propinsi = " + propinsi + "<br>"); out.println("pekerjaan = " + pekerjaan + "<br>"); } %> </body> </html> Listing Program 3.2

12 Gambar 3.2

dokumen-dokumen yang mirip

Bab 4 Standard Action

Bab 4 Standard Action 28 Bab 4 Standard Action POKOK BAHASAN: Standard Action jsp:param jsp:forward TUJUAN BELAJAR: Setelah mempelajari bab ini, mahasiswa diharapkan mampu: 1. Mahasiswa mengenal standard