Bab 2 Scripting Element

12
Bab 2
Scripting Element


POKOK BAHASAN:
Tag Scriplet J SP
Ekspresi J SP

TUJUAN BELAJAR:

Setelah mempelajari bab ini, mahasiswa diharapkan mampu:
1. Mahasiswa mengenal Tag Scriplet
2. Mahasiswa membuat Tag Scriplet J SP
3. Mahasiswa mengenal Ekspresi di J SP

Elemen-elemen JSP
J SP merupakan bahasa pemrograman yang bersifat embedded pada kode HTML
maupun WML, namun juga dapat berdiri sendiri dimana sintaks J SP dapat diatur
sesuai spesifikasi J SP yang dapat di download dari www.jcp.org. Sebagai teknologi
pemrograman web, J SP memiliki bermacam-macam elemen yang dapat digunakan
dalam suatu halaman J SP. Istilah halaman J SP mengacu pada file program yang
berisikan kode-kode J SP.
Dalam J SP terdapat tiga komponen utama yaitu
Elemen scripting
Direktif
Action

2.1 Mengenal Elemen Scripting
Kita bahas untuk elemen scipting. Elemen scripting terdiri atas 3 macam yaitu:
Scriplet
Deklarasi
Bab 2 Scripting Element

13
Ekspresi

2.1.1 Scriplet
Kita telah mengenal kode :
<%
Out.print (Selamat Belajar J SP di Politeknik Elektronika Negeri Surabaya);
%>

Tanda <%%>menyatakan salah satu tag J SP yang dikenal dengan sebutan tag
scriplet. Tag tersebut mengisyaratkan bahwa kode yang ada didalamnya adalah
kode J SP. Di dalam tag tersebut sebenarnya anda bisa menuliskan pernyataan
pernyataan J ava. Dalam hal ini setiap pernyataan diakhiri dengan titik koma (;).
Pernyataan adalah satu instruksi lengkap yang akan diproses oleh J ava. Kode
berikut:

Out.print (Selamat Belajar J SP di Politeknik Elektronika Negeri Surabaya);

Merupakan contoh sebuah pernyataan, yaitu untuk mengirimkan string yang
menjadi argumen print() ke halaman web.

Di dalam bahasa J ava, pernyataan untuk menampilkan tulisan :
Selamat Belajar J SP di Politeknik Elektronika Negeri Surabaya

Berupa :

System.Out.print (Selamat Belajar J SP di Politeknik Elektronika Negeri
Surabaya);

Namun pada penulisan kode J SP, kata system perlu dibuang. Dalam hal ini out
merupakan suatu objek yang telah terdefinisi (disediakan oleh J SP).

Selain menggunakan print(), kadangkala pemrogram J SP memakai println().
Perbedaan kedua metode ini :
Print() tidak menambah baris baru (newline) pada keluaran, sedangkan.
Println() menambahkan baris baru.


Perbedaan kedua metode ini terletak pada kode HTML yang dibangkitkan dan
bukan pada tampilan browser.

2.1.2 Mengenal Ekspresi JSP

Hasil suatu ekspresi J SP dapat dijadikan sebagai keluaran pada halaman web
dengan menggunakan bentuk tag yang bersifat khusus, yakni seperti berikut :
Bab 2 Scripting Element

14

<%=ekspresi J ava%>

Tanda <%= %>biasanya dinamakan tag ekspresi. Dalam hal ini semua
ekspresi dikonversikan ke string (deretan karakter) dan disisipkan ke halaman
web. Sebagai contoh :

Waktu Sekarang : <%=new java.util.Data() %>

Akan menambahkan string hasil :

new java.util.Date()

Di belakang string Waktu Sekarang. Perlu diketahui,

new java.util.Date()

merupaka ekspresi yang biasa digunakan pada pemrograman J ava untuk
mendapatkan waktu sekarang.


2.1.3 Action
Action merupakan salah satu elemen J SP berupa tag-tag. J SP mengenal dua macam
Action, yaitu:
Tag Action Standar
Custom Tag

Tag Action Standar
Tag-tag action standar tersebut adalah :
<jsp:usebean>
<jsp:setproperty>
<jsp:getproperty>
<jsp:include>
<jsp:param>
<jsp:plugin>
<jsp:forward>

Untuk tag action standar berikut ini <jsp:usebean>, <jsp:setproperty>,
<jsp:getproperty> dijelaskan pada bab 5. Penjelesan masing-masing tag action
standar sebagai berikut:

<jsp:include>
Tag ini digunakan untuk mengikutsertakan file lain dalam J SP saat request
dilakukan. Contoh penggunaan:
<j sp: i ncl ude page=sat u. ht ml f l ush=t r ue>
Bab 2 Scripting Element

15

<jsp:plugin>
Tag ini digunakan untuk menghasilkan kode-kode yang sesuai target browser dalam
menyisipkan komponen J ava bean atau Applet secara otomatis.

<jsp:param>
Tag ini digunakan untuk melengkapi tag <jsp:params>, <jsp:plugin>, maupun
<jsp:forward>. Translation error akan terjadi apabila digunakan di tempat lain.

<jsp:params>
Tag ini digunakan hanya dalam jsp:plugin saja. Penggunaan di tempat lain akan
mengakibatkan translation time error.

<jsp:forward>
Tag ini digunakan untuk memforward ke file J SP, Servlet atau file statik lain. Contoh
penggunaan:
<j sp: f or war d page=al amat ur l . j sp>


2.2 Percobaan
1. Perintah print()
Kode : println1.jsp

<html>
<head>
<title>Contoh Println</title>
</head>
<body>
<%
out.print("Selamat Belajar J SP di PENS");
out.print("Semoga Sukses dan Menikmati J SP");
%>
</body>
</html>
Listing program 2.1

Hasil di browser :

Bab 2 Scripting Element

16

Gambar 2.1

J ika anda melihat kode HTML-nya dari sisi klien dengan viwsource, maka
kodenya adalah sebagai berikut :


<html>
<head>
<title>Contoh Println</title>
</head>
<body>
Selamat Belajar J SP di PENS
Semoga Sukses dan Menikmati J SP
</body>
</html>

Listing program 2.2



J ika semua println() pada kode diganti dengan print(). Maka akan diperoleh
kode HTML seperti berikut :


<html>
<head>
<title>Contoh Println</title>
</head>
<body>
Selamat Belajar J SP di PENSSemoga Sukses dan Menikmati J SP
</body>
</html>
Listing program 2.3

2. Perintah println()
Kode : println2.jsp

Bab 2 Scripting Element

17

<html>
<head>
<title>Contoh Println</title>
</head>
<body>
<%
out.println("Selamat Belajar J SP di PENS<br>");
out.println("Semoga Sukses dan Menikmati J SP");
%>
</body>
</html>
Listing program 2.4


Pada kode diatas, <br>merupakan tambahan terhadap kode println1.jsp.
Hasilnya akan menjadi sebagai berikut :


Gambar 2.2

Hasil kode HTML dari sisi klient :

<html>
<head>
<title>Contoh Println</title>
</head>
<body>
Selamat Belajar J SP di PENS<br>
Semoga Sukses dan Menikmati J SP

</body>
</html>
Listing program 2.5


3. Membuat ekspresi

Kode : ekspresi1.jsp

Bab 2 Scripting Element

18
<html>
<head>
<title>Tag ekspresi</title>
</head>
<body>
Waktu Sekarang : <%=new java.util.Date()%>
</body>
</html>
Listing program 2.6


Hasil kode ekspresi2.jsp


Gambar 2.3


Kode : ekspresi2.jsp

<html>
<head>
<title>Tag Ekspresi</title>
</head>
<body>
Waktu Sekarang : <% out.print(new java.util.Date());%>
</body>
</html>

Listing program 2.7



Hasil kode ekspresi2.jsp

Bab 2 Scripting Element

19

Gambar 2.4


J adi penulisan : <%=new java.util.Date()%>
Dapat digunakan untuk menyederhanakan penulisan :
<% out.print(new java.util.Date());%>

4. 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 J SP 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. J alankan dengan http://localhost:8080/.../ indextaginclude.html

indextaginclude.html
















<ht ml >
<st yl e t ype=" t ext / css" >
<! - -
. st yl e1 {
f ont - si ze: 18px;
f ont - wei ght : bol d;
}
- - >
</ st yl e>
<body>
<t abl e wi dt h=" 439" bor der =" 0" bgcol or =" #0000FF" >
<t r >
<t d wi dt h=" 91" bgcol or =" #00FFFF" ><di v al i gn=" cent er " cl ass=" st yl e1" ><a
hr ef =" t agi ncl ude. j sp?l i nk=home" >Home</ a></ di v></ t d>
<t d wi dt h=" 83" bgcol or =" #00FFFF" ><di v al i gn=" cent er " cl ass=" st yl e1" ><a
hr ef =" t agi ncl ude. j sp?l i nk=pr oduk" >Pr oduk</ a></ di v></ t d>
<t d wi dt h=" 101" bgcol or =" #00FFFF" ><di v al i gn=" cent er " cl ass=" st yl e1" ><a
hr ef =" t agi ncl ude. j sp?l i nk=kont ak" >Kont ak</ a></ di v></ t d>
<t d wi dt h=" 136" bgcol or =" #00FFFF" ><di v al i gn=" cent er " cl ass=" st yl e1" ><a
hr ef =" t agi ncl ude. j sp?l i nk=t ent ang" >Tent ang Kami </ a> </ di v></ t d>
</ t r >
</ t abl e>
</ body>
</ ht ml >
Bab 2 Scripting Element

20
taginclude.jsp



















navbar.jsp


























<%@page cont ent Type=" t ext / ht ml ; char set =i so- 8859- 1" l anguage=" j ava"
i mpor t =" j ava. sql . *" er r or Page=" " %>
<! DOCTYPE ht ml PUBLI C " - / / W3C/ / DTD XHTML 1. 0 Tr ansi t i onal / / EN"
" ht t p: / / www. w3. or g/ TR/ xht ml 1/ DTD/ xht ml 1- t r ansi t i onal . dt d" >
<ht ml xml ns=" ht t p: / / www. w3. or g/ 1999/ xht ml " >
<head>
<met a ht t p- equi v=" Cont ent - Type" cont ent =" t ext / ht ml ; char set =i so- 8859- 1" / >
<t i t l e>Unt i t l ed Document </ t i t l e>
</ head>
<body>

<%
St r i ng l i nk=r equest . get Par amet er ( " l i nk" ) ;
%>

<j sp: i ncl ude page=" navbar . j sp" f l ush=" t r ue" >
<j sp: par amname=" l i nk" val ue=" <%=l i nk%>" / >
</ j sp: i ncl ude>

<a hr ef =" i ndext agi ncl ude. ht ml " > KEMBALI KE MENU </ a>
</ body>
</ ht ml >
<%@page cont ent Type=" t ext / ht ml ; char set =i so- 8859- 1" l anguage=" j ava"
i mpor t =" j ava. sql . *" er r or Page=" " %>
<! DOCTYPE ht ml PUBLI C " - / / W3C/ / DTD XHTML 1. 0 Tr ansi t i onal / / EN"
" ht t p: / / www. w3. or g/ TR/ xht ml 1/ DTD/ xht ml 1- t r ansi t i onal . dt d" >
<ht ml xml ns=" ht t p: / / www. w3. or g/ 1999/ xht ml " >
<head>
<met a ht t p- equi v=" Cont ent - Type" cont ent =" t ext / ht ml ; char set =i so- 8859- 1" / >
<t i t l e>Unt i t l ed Document </ t i t l e>
<st yl e t ype=" t ext / css" >
<! - -
. st yl e1 {f ont - si ze: 18px}
. st yl e2 {f ont - si ze: 18px; f ont - wei ght : bol d; }
- - >
</ st yl e>
</ head>

<body>
<%
St r i ng kl i kl i nk = r equest . get Par amet er ( " l i nk" ) ;
St r i ng l at ar home = " #00FFFF" ;
St r i ng l at ar pr oduk = " #00FFFF" ;
St r i ng l at ar kont ak = " #00FFFF" ;
St r i ng l at ar t ent ang = " #00FFFF" ;
i f ( kl i kl i nk. equal s( " home" ) )
l at ar home = " #999999" ;
i f ( kl i kl i nk. equal s( " pr oduk" ) )
l at ar pr oduk = " #999999" ;
i f ( kl i kl i nk. equal s( " kont ak" ) )
l at ar kont ak = " #999999" ;
i f ( kl i kl i nk. equal s( " t ent ang" ) )
l at ar t ent ang = " #999999" ;
%>
Bab 2 Scripting Element

21













Output program :

Tampilan utama seperti ditunjukkan gambar 2.5. J ika klik Home maka tampak
seperti gambar 2.6, jika kita klik Tentang Kami maka akan tampak seperti gambar
2.7.


Gambar 2.5


Gambar 2.6



<t abl e wi dt h=" 439" bor der =" 0" bgcol or =" #0000FF" >
<t r >
<t d wi dt h=" 91" bgcol or =" <%=l at ar home%>" cl ass=" st yl e1" ><di v
al i gn=" cent er " cl ass=" st yl e1" ><st r ong><a
hr ef =" t agi ncl ude. j sp?l i nk=home" >Home</ a></ st r ong></ di v></ t d>
<t d wi dt h=" 83" bgcol or =" <%=l at ar pr oduk%>" cl ass=" st yl e1" ><di v
al i gn=" cent er " cl ass=" st yl e2" ><a
hr ef =" t agi ncl ude. j sp?l i nk=pr oduk" >Pr oduk</ a></ di v></ t d>
<t d wi dt h=" 101" bgcol or =" <%=l at ar kont ak%>" cl ass=" st yl e1" ><di v
al i gn=" cent er " cl ass=" st yl e2" ><a
hr ef =" t agi ncl ude. j sp?l i nk=kont ak" >Kont ak</ a></ di v></ t d>
<t d wi dt h=" 136" bgcol or =" <%=l at ar t ent ang%>" cl ass=" st yl e1" ><di v
al i gn=" cent er " cl ass=" st yl e2" ><a
hr ef =" t agi ncl ude. j sp?l i nk=t ent ang" >Tent ang Kami </ a> </ di v></ t d>
</ t r >
</ t abl e>
Bab 2 Scripting Element

22

Gambar 2.7

5. Melakukan forwarding request.
Anda mungkin telah mengenal penggunaan redirect dalam pemrograman web, yang
berfungsi untuk mengantarkan user ke halaman lain. Di dalam J SP terdapat tag
action forward yang memiliki fungsi yang mirip tetapi lebih baik lagi, karena kita
dapat mengalihkan objek request dari satu file J SP ke file J SP lain, Servlet atau file
HTML biasa.
Informasi yang ada pada request juga ikut dikirimkan saat forwarding dilakukan
sehingga apabila kita mengirimkan request dengan data parameter-parameter,
informasi ini juga akan diterima oleh program J SP/Servlet yang menjadi tujuan
forwarding.
Kode untuk melakukan forwarding adalah
<jsp:forward page=namafile.jsp/>
Tag <jsp:forward>juga dapat memiliki subelemen jsp:param yang dapat digunakan
untuk mengirimkan data pada request yang digunakan forwarding. Penggunaan tag
jsp:param dalam jsp:forward adalah sebagai berikut:

<j sp: f or war d page=<%=namaf i l e%>>
<j sp: par amname=nama1 val ue=ni l ai 1/ >
<j sp: par amname=nama2 val ue=ni l ai 2/ >
</ j sp: f or war d>

Awalforward.jsp












<%@page cont ent Type=" t ext / ht ml ; char set =i so- 8859- 1" l anguage=" j ava"
i mpor t =" j ava. sql . *" er r or Page=" " %>
<! DOCTYPE ht ml PUBLI C " - / / W3C/ / DTD XHTML 1. 0 Tr ansi t i onal / / EN"
" ht t p: / / www. w3. or g/ TR/ xht ml 1/ DTD/ xht ml 1- t r ansi t i onal . dt d" >
<ht ml xml ns=" ht t p: / / www. w3. or g/ 1999/ xht ml " >
<head>
<met a ht t p- equi v=" Cont ent - Type" cont ent =" t ext / ht ml ; char set =i so- 8859- 1"
/ >
<t i t l e>Unt i t l ed Document </ t i t l e>
</ head>

<body>

<j sp: f or war d page=" t uj uanf or war d. j sp" >
<j sp: par amname=" dat a" val ue=" Dat a" / >
</ j sp: f or war d>

</ body>
</ ht ml >
Bab 2 Scripting Element

23
Tujuan forward.jsp
























Penjelasan listing :
Awalforward.jsp berfungsi untuk memforward ke tujuanforward.jsp dengan
mengirimkan data melalui subelemen jsp:param. Pada saat forwarding oleh
awalforward.jsp dilakukan, sebenarnya seakan-akan request diambil alih oleh
tujuanforward.jsp sehingga parameter yang disisipkan dapat diterima oleh
tujuanforward.jsp secara otomatis. Untuk mendapatkan data dari subelemen
jsp:param dapat dilakukan dengan cara:

St r i ng t est dat a = r equest . get Par amet er ( " dat a" ) ;

Output program :


<%@page cont ent Type=" t ext / ht ml ; char set =i so- 8859- 1" l anguage=" j ava"
i mpor t =" j ava. sql . *" er r or Page=" " %>
<! DOCTYPE ht ml PUBLI C " - / / W3C/ / DTD XHTML 1. 0 Tr ansi t i onal / / EN"
" ht t p: / / www. w3. or g/ TR/ xht ml 1/ DTD/ xht ml 1- t r ansi t i onal . dt d" >
<ht ml xml ns=" ht t p: / / www. w3. or g/ 1999/ xht ml " >
<head>
<met a ht t p- equi v=" Cont ent - Type" cont ent =" t ext / ht ml ; char set =i so- 8859- 1"
/ >
<t i t l e>Unt i t l ed Document </ t i t l e>
<st yl e t ype=" t ext / css" >
<! - -
. st yl e1 {
f ont - si ze: 18px;
f ont - wei ght : bol d;
}
. st yl e3 {f ont - si ze: 18px}
- - >
</ st yl e>
</ head>

<body>
<%
St r i ng t est dat a = r equest . get Par amet er ( " dat a" ) ; %>
<span cl ass=" st yl e1" >MENAMPI LKAN DATA</ span><span cl ass=" st yl e3" >
1</ span><br >
<%=t est dat a%>
</ body>
</ ht ml >
Bab 2 Scripting Element

24
Gambar 2.8

6. Contoh scripting elements.




















Gambar 2.9

7. Contoh penggunaan <jsp:forward>yang melibatkan <jsp:param>
forward2.jsp








<%! //Contoh declarations
//Deklarasi variabel
int jumlahUser=3;
//Deklarasi method
public String sayHello(String nama) {
return "Hallo " + nama;
}
%>
<HTML>
<HEAD>
<TI TLE>Cont oh Scr i pt i ng El ement s pada J SP</ TI TLE>
</ HEAD>
<BODY>
<H1>
<%f or ( i nt i =1; i <=j uml ahUser ; i ++) {
/ / Cont oh scr i pl et s
%>
<i ><%=sayHel l o( " User " + i + " ! " ) %> </ i > <br >
<%}%>
</ H1>
</ BODY>
</ HTML>
<HTML>
<HEAD>
<TITLE>Contoh jsp:forward</TITLE>
</HEAD>
<BODY>
<jsp:forward page="hitung.jsp">
<jsp:param name="bila" value="10" />
<jsp:param name="bilb" value="20" />
</jsp:forward>
</BODY>
</HTML>
Bab 2 Scripting Element

25
hitung.jsp


















Output :



Gambar 2.10


<HTML>
<HEAD>
<TITLE>Contoh Dokumen di-forward</TITLE>
</HEAD>
<BODY>

<%
String StrBilA =request.getParameter("bila");
String StrBilB =request.getParameter("bilb");

int bilA =Integer.valueOf(StrBilA).intValue();
int bilB =Integer.valueOf(StrBilB).intValue();

out.println(bilA +" +" +bilB +" =" +
(bilA +bilB));
%>

</BODY>
</HTML>
2.3 Latihan Soal
1. Apa yang dimaksud dengan scriplet?
2. Sebutkan cara pembuatan scriplet?
3. Apa yang dimaksud dengan ekspresi?
4. Sebutkan cara pembuatan ekspresi ?
5. Buat sebuah program registrasi online yang diproses oleh suatu file J SP dan
nilainya langsung dikembalikan. Data yang dimasukkan dalam registrasi
online meliputi : nama, tempat tanggal lahir, asal sekolah, jurusan.