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
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
6. Tambahkan satu buah array dosenfit yang berisi object nama-nama dosen pada managed bean tersebut, sbb: 7. Tambahkan komponen <h:datatable> 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 <f:facet name= XXX > XXX di sini dapat berupa caption, header, dan footer P a g e 3/9
Tulisan yang ada di dalam tag <f:facet> 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
13. Update pula array dosenfit sbb: 14. Edit pula file index.xhtml, sehingga menghasilkan tampilan sbb: P a g e 5/9
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
16. Tambahkan tag <link> ke file style.css yang telah kita buat tersebut: 17. Tambahkan atribut css tersebut pada <h:datatable> 18. Run Project. Hasil: BAGIAN 2: penambahan css 19. Sekarang, tambahkan sekali lagi <h:datatable> di bagian bawah, dan ubahlah atribut css-nya sedemikian rupa sehingga menghasilkan hasil sbb: P a g e 7/9
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 <h:form> sebelum tag <h:datatable> dan sesudah tag </h:datatable> sbb: 22. Pada bagian kolom Mata Kuliah, modifikasilah menjadi sbb: 1 2 P a g e 8/9
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