JSF (Java Server Faces) saya anggap sebagai second generation web framework yang mengikuti model event listener. JSF merupakan komponen yang berbasis event driven UI web framework yang digawangi oleh Craig MacLanahan dan juga sebagai pencipta Struts.
Ok, dalam artikel ini saya akan mengenalkan JSF dalam pendekatan praktis. Kita akan membuat aplikasi kecil dengan menggunakan NetBeans 6.0.
Lets Start!
Buat project baru dengan nama Login. Klik menu File->New Project maka akan tampak tampilan window New Project. Pada Categories: pilih Web, pada Projects: pilih Web Application. Ketikan Login pada kolom Project Name dan pilih GlassFish V2 pada kolom Server sehingga tampilannya akan seperti berikut:
Klik Next dan pilih JavaServer Faces framework. Lihat tampilan dibawah:
Klik Finish dan IDE secara otomatis akan men-generate beberapa direktori dan file seperti welcomeJSF.jsp dan web.xml. Selanjutnya kita akan membuat file login.jsp, caranya klik kanan project Login pada Projects Window pilih New->JSP dan ketik login pada kolom JSP File Name dan klik Finish. Ganti tulisan JSP Page dari tag <title> dengan Login dan dari tag <h1> dengan Success!. Dengan cara yang sama buatlah file error.jsp gantilah tulisan JSP Page dari tag <title> dengan Error dan dari tag <h1> dengan Failure!. Berikut contoh file login.jsp.
<%@page contentType=”text/html”%>
<%@page pageEncoding=”UTF-8″%>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<title>Login</title>
</head>
<body>
<h1>Success!</h1>
</body>
</html>
Contoh file error.jsp:
<%@page contentType=”text/html”%>
<%@page pageEncoding=”UTF-8″%>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<title>Error</title>
</head>
<body>
<h1>Failure!</h1>
</body>
</html>
Selanjutnya kita kembali ke welcomeJSF.jsp, drag JSF Form dari Pallete dan akan terlihat tampilan seperti berikut:
Klik OK maka IDE akan menambahkan tag <h:form></h:form> diantara tag <f:view></f:view>. Sisipkan kode berikut diantara tag <h:form> dan </h:form> pada file welcomeJSF.jsp.
<h:panelGrid columns="2" border="0">
Username: <h:inputText id="username" value="#{user.username}" />
Password: <h:inputSecret id="password" value="#{user.password}" />
</h:panelGrid>
<h:commandButton id="submit" type="submit" value="Login" action="#{user.validateUser}" />
Dari kode tersebut terlihat bahwa value attribute dari komponen <h:inputText> mengikat pada property username pada backing bean user dan action attribute dari komponen <h:commandButton> mengikat pada method validateUser() pada backing bean user. Backing bean merupakan POJO yang berisi property dan method yang akan menampung data dari html form, dimana selanjutnya backing bean ini dikenal sebagai managed bean.
Langkah selanjutnya kita akan membuat Package dan JSF Manage Bean.
Klik kanan pada Source Package pilih New->Java Package. Ketik nug pada kolom Package Name dan klik Finish.
Klik kanan pada Source Package —–> nug pilih New->JSF Manage Bean. Ketik user pada Class Name dan klik Finish. Lihat tampilan dibawah:
Saat di klik Finish IDE akan menghasikan file user.java yang berisi potongan class. Sekarang tambahkan attribute private String username dan private String password kedalam class. Kemudian klik kanan pada source code editor pilih Refactor->Encapsulate Fields. Beri tanda check pada masing-masing field untuk membuat getter dan setter. Lihat tampilan berikut:
Klik Refactor, secara otomatis IDE akan men-generate setter dan getter bagi Encapsulate Fields. Selanjutnya kita akan membuat method validateUser() yang sederhana untuk melakukan pengecekan bahwa username harus diisi dan password diisi dengan admin. Tambahkan kode dibawah ini ke dalam class user.
public String validateUser(){
if (username.isEmpty()!=true) {
if (password.equalsIgnoreCase("admin")) {
return "success";
} else {
return "failure";
}
}else {
return null;
}
}
Buka file faces-config.xml, klik kanan pada source code editor lalu pilih JavaServer Faces->Add Navigation Case kemudian isi From Action dengan #{user.validateuser} dan From Outcome dengan success kemudian Browse To View lalu pilih login.jsp dan klik Add. Lihat tampilan dibawah:
Ulangi langkah diatas untuk From Outcome failure, isi From Action dengan #{user.validateUser}, To View isi dengan /error.jsp.
Langkah terakhir, Build project kemudian Run untuk menjalankan aplikasi.
Selamat mencoba!
5 responses so far ↓
well // May 12, 2008 at 7:48 pm
bos itu bisa buat di hp ga?
dsnugraha // May 13, 2008 at 4:31 pm
wah.. klo buat hp gw gak tau boss… blom pernah maen2 hp
mungkin pake J2ME?
Varun // August 3, 2008 at 4:55 pm
Hi,
My name is Varun Nischal and I’m the NetBeans Community Docs Contribution Coordinator. Your blog entry would make a fantastic tutorial for our Community Docs wiki (http://wiki.netbeans.org/CommunityDocs).
Would you be willing to contribute it? If you need any help or have any questions, please contact me at nvarun AT netbeans DOT org
I look forward to hearing from you.
Thanks,
Varun Nischal
http://nb-community-docs.blogspot.com/
–
“You must do the things you think you cannot do.”
dsnugraha // August 8, 2008 at 1:04 pm
Hi Varun, thank you for your invitation. I’ll join u soon.
binti Kasim // November 3, 2009 at 2:20 pm
Bos, knp pas wktu gua Run hasil yg muncul di browser adalah:
HTTP Status 503 -
type Status report
message
descriptionThe requested service () is not currently available.
Sun GlassFish Enterprise Server v2.1
kira-kira salahnya dimana yah bos..
mohon pencerahan.
thanks.