Tutorial JSF Bagian 1 P a g e | 1/8

PEMROGRAMAN WEB LANJUT

TUTORIAL JavaServer Faces Bagian 1

Waktu: 30 menit

Tools: NetBeans

Framework: JSF versi 1.2

Buatlah project aplikasi Web baru dengan informasi sbb:

Categories: Java Web

Projects: Web Application

Setting Server:

Note: Gunakan JAVA EE 5 (bukan 6)

Project Name: JSFHelloWorld

Tutorial JSF Bagian 1 P a g e | 2/8

Frameworks: JavaServer Faces

Selanjutnya kita akan membuat aplikasi web HelloJSF ini!

Tutorial JSF Bagian 1 P a g e | 3/8

Memodifikasi halaman JSF default

1. Edit sebagian dari “welcomeJSF.jsp” menjadi sbb:

2. Run project untuk men-deploy aplikasi ini ke dalam server “GlassFish v3 Prelude” dan

menjalankannya pada browser.

Membuat Java Bean / Managed Bean

Selanjutnya kita akan membuat managed bean yang berfungsi sebagai ‘back-end’ dari halaman Web yang

sudah dibuat tadi.

3. Buatlah Java Package baru di dalam project tersebut:

Klik Finish

4. Buatlah sebuah Java class baru di dalam package yang telah dibuat tadi.

Tutorial JSF Bagian 1 P a g e | 4/8

Beri nama: HelloBean

Karena pada aplikasi ini kita hanya membutuhkan satu buah input yaitu “name”, maka tambahkan satu buat

property “name” bertipe String, sbb:

Setelah kita membuat property “name” tsb, selanjutnya kita tinggal menambahkan constructor, dan

getter/setter methods. Kita dapat mengetikannya secara manual atau menggunakan cara otomatis yang

disediakan oleh NetBeans, sbb:

- Letakkan cursor di bawah property “name”, lalu klik kanan mouse, pilih “insert code”

Tutorial JSF Bagian 1 P a g e | 5/8

- Pilih “Getter and Setter”, checklist property “name”, klik “Generate”

- Berikut ini kode lengkap dari Java Bean yang dihasilkan:

Membuat Konfigurasi Managed Bean (backing bean)

Pada JSF v 1.2, kita perlu menggunakan file konfigurasi XML agar Java Bean yang dibuat dapat dikenali oleh

halaman Web. Untungnya, pada saat kita membuat managed bean tsb, NetBeans telah secara otomatis

membuatkan konfigurasi pada file faces-config.xml.

5. Bukalah file setting “faces-config.xml” tsb:

Klik tab “XML” untuk melihat source code dari file tsb, untuk melihat informasi mengenai keberadaan

Managed Bean tsb agar dapat diakses oleh halaman Web.

Tutorial JSF Bagian 1 P a g e | 6/8

Tips: Nanti, pada JSF v 2.0, kita dapat melakukannya dengan cara yang lebih sederhana yaitu dengan

menggunakan fasilitas Annotation sbb: @ManagedBean(name="namaBean")

6. Sekarang buka kembali file Java Bean tadi dan tambahkan sebuah method baru sayHello sbb:

Berikut kode lengkap dari HelloBean.java:

Modifikasi front-end welcomeJSF.jsp

7. Setelah selesai membuat managed bean tersebut, sekarang kita lakukan modifikasi lagi halaman Web,

sbb:

Tutorial JSF Bagian 1 P a g e | 7/8

8. Run kembali project untuk me-redeploy dan menjalankan aplikasi Web yang telah di-update tsb.

Modifikasi faces-config.xml untuk mendefinisikan page-flow antar halaman JSP

9. Bukalah file faces-config.xml dan tambahkan tag navigation rule sbb:

Tag <from-outcome>hi</from-outcome>: kata “hi” ini akan diakses pada saat user mengakses method

sayHello yang me-return nilai “hi” (lihat pada managed bean).

Membuat halaman hello.jsp

10. Pada folder Web Pages, buatlah sebuah halaman JSF baru, sbb:

Beri nama: hello

Tutorial JSF Bagian 1 P a g e | 8/8

Berikut isi dari hello.jsp:

11. Run kembali project untuk me-redeploy dan menjalankan aplikasi Web yang telah di-update tsb.

:: Selamat Mengerjakan ::