tutorial jsf bagian 1
0 likes715 views
1. Tutorial ini menjelaskan cara membuat aplikasi web sederhana menggunakan JavaServer Faces (JSF) di NetBeans, termasuk membuat managed bean, konfigurasi backing bean, dan mendefinisikan alur antar halaman.
tutorial jsf bagian 1
- 1. 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 | 1/8
- 2. Frameworks: JavaServer Faces Selanjutnya kita akan membuat aplikasi web HelloJSF ini! Tutorial JSF Bagian 1 P a g e | 2/8
- 3. 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 | 3/8
- 4. 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 | 4/8
- 5. - 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 | 5/8
- 6. 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 | 6/8
- 7. 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 | 7/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 :: Tutorial JSF Bagian 1 P a g e | 8/8