TUTORIAL JavaServer Faces Bagian 1 -...
Transcript of TUTORIAL JavaServer Faces Bagian 1 -...
![Page 1: TUTORIAL JavaServer Faces Bagian 1 - si.itmaranatha.orgsi.itmaranatha.org/v2/attachments/article/300/Tutorial JSF Bagian 1.pdfTutorial JSF Bagian 1 P a g e | 3/7 Memodifikasi halaman](https://reader031.fdocuments.in/reader031/viewer/2022021811/5cd54f2b88c993eb0d8be97e/html5/thumbnails/1.jpg)
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:
![Page 2: TUTORIAL JavaServer Faces Bagian 1 - si.itmaranatha.orgsi.itmaranatha.org/v2/attachments/article/300/Tutorial JSF Bagian 1.pdfTutorial JSF Bagian 1 P a g e | 3/7 Memodifikasi halaman](https://reader031.fdocuments.in/reader031/viewer/2022021811/5cd54f2b88c993eb0d8be97e/html5/thumbnails/2.jpg)
Tutorial JSF Bagian 1 P a g e | 2/7
Frameworks: JavaServer Faces
Selanjutnya kita akan membuat aplikasi web HelloJSF ini!
![Page 3: TUTORIAL JavaServer Faces Bagian 1 - si.itmaranatha.orgsi.itmaranatha.org/v2/attachments/article/300/Tutorial JSF Bagian 1.pdfTutorial JSF Bagian 1 P a g e | 3/7 Memodifikasi halaman](https://reader031.fdocuments.in/reader031/viewer/2022021811/5cd54f2b88c993eb0d8be97e/html5/thumbnails/3.jpg)
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"
![Page 4: TUTORIAL JavaServer Faces Bagian 1 - si.itmaranatha.orgsi.itmaranatha.org/v2/attachments/article/300/Tutorial JSF Bagian 1.pdfTutorial JSF Bagian 1 P a g e | 3/7 Memodifikasi halaman](https://reader031.fdocuments.in/reader031/viewer/2022021811/5cd54f2b88c993eb0d8be97e/html5/thumbnails/4.jpg)
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
![Page 5: TUTORIAL JavaServer Faces Bagian 1 - si.itmaranatha.orgsi.itmaranatha.org/v2/attachments/article/300/Tutorial JSF Bagian 1.pdfTutorial JSF Bagian 1 P a g e | 3/7 Memodifikasi halaman](https://reader031.fdocuments.in/reader031/viewer/2022021811/5cd54f2b88c993eb0d8be97e/html5/thumbnails/5.jpg)
Tutorial JSF Bagian 1 P a g e | 5/7
Terlihat struktur package sbb:
![Page 6: TUTORIAL JavaServer Faces Bagian 1 - si.itmaranatha.orgsi.itmaranatha.org/v2/attachments/article/300/Tutorial JSF Bagian 1.pdfTutorial JSF Bagian 1 P a g e | 3/7 Memodifikasi halaman](https://reader031.fdocuments.in/reader031/viewer/2022021811/5cd54f2b88c993eb0d8be97e/html5/thumbnails/6.jpg)
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”
![Page 7: TUTORIAL JavaServer Faces Bagian 1 - si.itmaranatha.orgsi.itmaranatha.org/v2/attachments/article/300/Tutorial JSF Bagian 1.pdfTutorial JSF Bagian 1 P a g e | 3/7 Memodifikasi halaman](https://reader031.fdocuments.in/reader031/viewer/2022021811/5cd54f2b88c993eb0d8be97e/html5/thumbnails/7.jpg)
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”
![Page 8: TUTORIAL JavaServer Faces Bagian 1 - si.itmaranatha.orgsi.itmaranatha.org/v2/attachments/article/300/Tutorial JSF Bagian 1.pdfTutorial JSF Bagian 1 P a g e | 3/7 Memodifikasi halaman](https://reader031.fdocuments.in/reader031/viewer/2022021811/5cd54f2b88c993eb0d8be97e/html5/thumbnails/8.jpg)
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:
![Page 9: TUTORIAL JavaServer Faces Bagian 1 - si.itmaranatha.orgsi.itmaranatha.org/v2/attachments/article/300/Tutorial JSF Bagian 1.pdfTutorial JSF Bagian 1 P a g e | 3/7 Memodifikasi halaman](https://reader031.fdocuments.in/reader031/viewer/2022021811/5cd54f2b88c993eb0d8be97e/html5/thumbnails/9.jpg)
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:
![Page 10: TUTORIAL JavaServer Faces Bagian 1 - si.itmaranatha.orgsi.itmaranatha.org/v2/attachments/article/300/Tutorial JSF Bagian 1.pdfTutorial JSF Bagian 1 P a g e | 3/7 Memodifikasi halaman](https://reader031.fdocuments.in/reader031/viewer/2022021811/5cd54f2b88c993eb0d8be97e/html5/thumbnails/10.jpg)
Tutorial JSF Bagian 1 P a g e | 10/7
![Page 11: TUTORIAL JavaServer Faces Bagian 1 - si.itmaranatha.orgsi.itmaranatha.org/v2/attachments/article/300/Tutorial JSF Bagian 1.pdfTutorial JSF Bagian 1 P a g e | 3/7 Memodifikasi halaman](https://reader031.fdocuments.in/reader031/viewer/2022021811/5cd54f2b88c993eb0d8be97e/html5/thumbnails/11.jpg)
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
![Page 12: TUTORIAL JavaServer Faces Bagian 1 - si.itmaranatha.orgsi.itmaranatha.org/v2/attachments/article/300/Tutorial JSF Bagian 1.pdfTutorial JSF Bagian 1 P a g e | 3/7 Memodifikasi halaman](https://reader031.fdocuments.in/reader031/viewer/2022021811/5cd54f2b88c993eb0d8be97e/html5/thumbnails/12.jpg)
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 ::