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

PEMROGRAMAN WEB LANJUT

TUTORIAL JavaServer Faces Bagian 1

Waktu: 30 menit

Tools: NetBeans

Framework: JSF versi 2

Buatlah project aplikasi Web baru dengan informasi sbb:

Categories: Java Web

Projects: Web Application

Project Name: Tutorial-JSF-01

Setting Server:

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

Frameworks: JavaServer Faces

Selanjutnya kita akan membuat aplikasi web HelloJSF ini!

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

Memodifikasi halaman JSF default

1. Lihat ”index.xhtml” sbb:

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

menjalankannya pada browser.

Modifikasi index.html: membuat form sbb

Klik tanda “lampu”, pilih “Add f=...” sehingga netbeans otomatis menambahkan deklarasi:

xmlns:f="http://xmlns.jcp.org/jsf/core"

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

Kode lengkap index.xhtml

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:

Nama package bebas, misal: niko.com.jsfhelloworld

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

Terlihat struktur package sbb:

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

4. Buatlah sebuah Java class baru di dalam package yang telah dibuat tadi. (tips: pilih New Other…)

Pilih “JSF Managed Bean”

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

Beri nama: HelloBean

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

buat property “name” bertipe String, sbb:

6. 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 | 8/7

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

- Berikut ini kode lengkap dari Java Bean yang dihasilkan:

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

7. Buatlah satu property lagi yaitu “password”. Sediakan juga getter/setter methods-nya.

8. Berikut kode lengkap dari HelloBean.java:

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

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

Membuat halaman output.xhtml

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

Beri nama: output

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

Berikut isi dari output.xhtml:

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

:: Selamat Mengerjakan ::