3. Tambahakn framework JavaServer Faces dan gunakan default library JSF 2.0

PWL – Praktikum 3 DATA TABLE PRAKTIKUM 3 – DATA TABLE (TUTORIAL) FORMAT PENGUMPULAN HARI INI: NRP-NAMA-Praktikum-3-DataTable.rar 1. Buatlah sebuah project JSF baru “Tutorial-DataTable-01’

2. Karena kita akan menggunakan JSF2, maka untuk Java EE Version, kita pilih ‘Java EE 7 Web’

3. Tambahakn framework “JavaServer Faces’ dan gunakan ‘default library JSF 2.0’

P a g e | 1/9

PWL – Praktikum 3 DATA TABLE 4. Buatlah sebuah Java Class baru yaitu ‘Dosen.java’ yang terdiri dari:  2 buah property ‘namaDepan’ dan ‘namaBelakang’  Constructor Dosen()  Setter/Getter methods

5. Buatlah sebuah JSF Managed Bean ‘DataDosen.java’ yang berisi sebuah array berisi beberapa object Dosen. Sediakan juga method getter-nya. NetBeans secara otomatis akan membuatkan Managed Bean yang masih kosong sbb:

P a g e | 2/9

PWL – Praktikum 3 DATA TABLE

6. Tambahkan satu buah array dosenFIT yang berisi object nama-nama dosen pada managed bean tersebut, sbb:

7. Tambahkan komponen pada file index.xhtml sbb:

8. Run project 9. Hasil:

10. Sekarang kita akan menambahkan judul tabel dan nama kolom pada data tersebut. Untuk melakukan hal tsb, kita dapat menggunakan XXX di sini dapat berupa caption, header, dan footer

P a g e | 3/9

PWL – Praktikum 3 DATA TABLE Tulisan yang ada di dalam tag tidak akan ditulis berulang kali, tidak terpengaruh oleh baris-baris yang ada pada data tabel. Editlah file index.xhtml menjadi sbb:

11. Run project. Hasil:

12. Sekarang kita akan menambahkan stylesheet pada tabel tersebut. Namun sebelumnya, tambahkan terlebih dahulu data-data pada Dosen. a) Tambahkan property dan getter/setter ‘mataKuliah’ dan ‘waliAngkatan’ pada Dosen.java b) Ubah argument dan inisialisasi dari constructor, sehingga menjadi sbb:

P a g e | 4/9

PWL – Praktikum 3 DATA TABLE

13. Update pula array dosenFIT sbb:

14. Edit pula file index.xhtml, sehingga menghasilkan tampilan sbb:

P a g e | 5/9

PWL – Praktikum 3 DATA TABLE 15. Berikutnya kita akan tambahkan CSS pada table tersebut. Buatlah sebuah file ‘style.css’ di dalam folder ‘Web Pages’

Isi “style.css” tersebut sbb: .mainTable { margin-left: auto; margin-right: auto; } .caption1 { font-family: sans-serif; font-weight: bold; font-size: 24px; color: blue; } .caption2 { font-family: sans-serif; font-weight: bold; font-size: 24px; color: red; } .heading { font-family: sans-serif; font-weight: bold; font-size: 20px; color: black; background-color: silver; text-align: center; } .even { font-family: "Times New Roman", serif; font-size: 18px; color: black; background-color: white; text-indent: 20px; } .odd { font-family: "Times New Roman", serif; font-size: 18px; color: white; background-color: black; text-indent: 20px; }

P a g e | 6/9

PWL – Praktikum 3 DATA TABLE 16. Tambahkan tag ke file “style.css” yang telah kita buat tersebut:

17. Tambahkan atribut css tersebut pada

18. Run Project. Hasil:

BAGIAN 2: penambahan css 19. Sekarang, tambahkan sekali lagi di bagian bawah, dan ubahlah atribut css-nya sedemikian rupa sehingga menghasilkan hasil sbb:

P a g e | 7/9

PWL – Praktikum 3 DATA TABLE

Bagian 3: Tambahkan Cell Editable dan Ajax 20. Sekarang kita akan menambahkan mekanisme edit field dengan menggunakan fasilitas AJAX yang telah tersedia pada JSF2. Bukalah Java Bean Dosen.java, tambahkan property dan method baru. Serta modifikasi method setMataKuliah, sbb:

21. Tambahkan sebelum tag dan sesudah tag sbb:

22. Pada bagian kolom “Mata Kuliah”, modifikasilah menjadi sbb:

1

2

P a g e | 8/9

PWL – Praktikum 3 DATA TABLE Note 1: inputText dan CommandButton akan muncul apabila checkbox di-checked Note 2: outputText akan muncul apabila checkbox tidak di-checked 23. Sekarang, bukalah Managed Bean DataDosen dan ubahlah scope data menjadi “ApplicationScope”

Note: apabila menggunakan default RequestScope, maka data array akan di-reload lagi dari awal setiap kali kita submit form, sehingga perubahan tidak terlihat. Hasil:

© SELAMAT MANGERJAKAN Niko Ibrahim, MIT

P a g e | 9/9