Praktikum 05. Penggunaan JSF dan JPA pada aplikasi Web

Transkripsi

1 Praktikum 05 Penggunaan JSF dan JPA pada aplikasi Web Materi Review: Object Relational Mapping Java Persistence API (JPA) Java Persistence API JavaServer Faces Anda diminta untuk membuat sebuah Java Web Application baru dengan nama WebBookingApplication Bagian 1: ORM dan JPA Diberikan Class Diagram sebagai berikut: (relasi/asosiasi class sengaja dihilangkan untuk kemudahan latihan review ini) PEMESAN RESERVASI KAMAR Java Class dan Property sbb: Pemesan.java : ID, Nama, Alamat, Kota Reservasi.java : No Reservasi, TanggalReservasi, TanggalCheckin, TanggalCheckout, TotalBiaya Kamar.java : ID, TipeKamar, Harga, Deskripsi Pada project aplikasi Anda, buatlah sebuah package entity yang berisi ketiga class tersebut. Gunakan annotation untuk memetakan class menjadi tabel relasional (ORM). 1 P r a k t i k u m 0 5 : O R M, J P A, J S F, d a n J P Q L

2 Note: Sebelum Anda melakukan/run pemetaan (mapping), buatlah sebuah database MySQL dengan nama BookingDB. Database inilah yang nanti akan digunakan untuk menyimpan data ketiga class yang akan di-petakan tersebut. Bagian 2: JSF dan JPQL Isilah database reservasi hotel yang sudah dibuat pada bagian 1 dengan data dummy. Buatlah page JSF untuk menampilkan Data Pemesan dan Data Kamar. Ada 3 page yang diminta dengan user interface sbb: index.xhtml Selamat Datang di Pusat Reservasi Hotel Lihat data pemesan Lihat data kamar ViewPemesan.xhtml Berikut Data Pemesan yang merupakan member kami: ID NAMA ALAMAT KOTA 1 Juned Jl. Sukakarya Bandung 2 Ani Jl. Babakan Jeruk Bandung ViewKamar.xhtml Berikut Data Kamar yang tersedia: ID TIPE KAMAR HARGA DESKRIPSI R001 Deluxe Garden view R002 Suite Pool View Ketentuan: - Report ditampilkan dalam bentuk data grid (gunakan JSF data table). - Data harus diambil dari database dengan menggunakan JPQL 2 P r a k t i k u m 0 5 : O R M, J P A, J S F, d a n J P Q L

3 TIPS PETUNJUK BAGIAN 01 Pada Persistence Unit: Include secara manual semua entity class-nya. Setelah Anda selesai membuat semua Entity Class, buatlah kelas-kelas baru yang berperan sebagai ManagedBean. Jadi ingat: Anda akan memiliki Entity Class dan Managed Bean Class (tidak boleh digabung jadi satu) Misal: Entity Class: Kamar.java JSF: ViewKamar.xhtml Managed Bean Class: KamarBean.java Di dalam managed bean class ini, tambahkan satu buah method yang dibutuhkan untuk melakukan koneksi ke Persistence Unit dan query object, = public class KamarBean { private List<Kamar> datakamar =new ArrayList<Kamar>(); public KamarBean() { // Konstruktor saat ini masih kosong, nanti akan dimodifikasi di praktikum berikutnya public List<Kamar> getdatakamar() { return datakamar; public void setdatakamar(list<kamar> datakamar) { this.datakamar = datakamar; public void selectall() { EntityManagerFactory emf = Persistence.createEntityManagerFactory("NamaPersistenceUnit"); 3 P r a k t i k u m 0 5 : O R M, J P A, J S F, d a n J P Q L

4 EntityManager em = emf.createentitymanager(); Query q = em.createquery("select k from Kamar k"); datakamar = q.getresultlist(); em.close(); emf.close(); Pada halaman JSF, silahkan Anda panggil #{KamarBean.selectAll(), kemudian siapkan tag datatable dengan source: #{KamarBean.dataKamar, sbb: <h1> Data Kamar </h1> #{KamarBean.selectAll() <h:datatable dst.. (lihat cara penggunaannya di materi JSF) <h:column dst.. <h:outputlink value= index.xhtml >Kembali ke index</h:outputlink> 4 P r a k t i k u m 0 5 : O R M, J P A, J S F, d a n J P Q L

5 Bagian 3: Java Persitence Query Language (JPQL) Pada bagian 3 ini, Anda diminta untuk membuat FORM Searching yang berfungsi untuk mencari data sesuai dengan kriteria tertentu. Ada 3 buah form yang perlu dibuat sbb: 1. Form Cari Kamar Kriteria pencarian (menggunakan kondiri like ) untuk mencari nama tipe kamar. Form Cari dan Hasil Pencarian Kamar: CariKamar.xhtml Pencarian Data Pemesan Masukkan Tipe Kamar: n CARI Back Berikut Data Pemesan yang sesuai kriteria pencarian Anda: ID Tipe Harga Deskripsi 1 Deluxe Garden Medium 2 President Luas sekali 5 P r a k t i k u m 0 5 : O R M, J P A, J S F, d a n J P Q L

6 Tips: Dari file index.xhtml buatkan link ke ViewKamar.xhtml dan CariKamar.xhtml Modifikasilah Kamar Managed Bean yang sudah Anda buat sebelumnya sbb: 1. Tambahkan sebuah variabel String private String searchvalue; 2. Tambahkan variabel entity manager sebagai variabel global private EntityManager em; EntityManagerFactory emf; *) Penting: modifikasi juga method SelectAll() yang sudah Anda buat sebelumnya, sehingga menggunakan variabel global baru ini (bukan variable local yang ada di method SelectAll) 3. Modifikasilah Constructor sbb: public KamarBean() { emf = Persistence.createEntityManagerFactory("WebApplication1PU"); em = emf.createentitymanager(); 4. Buatlah method baru untuk pencarian sbb: public String Cari(){ Query q = em.createquery("select u from Kamar u Where u.tipe_kamar like '%" + searchvalue + "%'"); datakamar = q.getresultlist(); return "DataKamar"; 5. Buatlah file JSF CariKamar.xhtml dan modifikasilah file Ini artinya setelah di-tekan, halaman akan kembali ke DataKamar.xhtml (pastikan nama file sesuai dengan yg Anda gunakan!) tsb dengan menambahkan komponen form, inputtext, commandbutton, dan datatable sbb: <h:form> Tipe Kamar: <h:inputtext value="#{kamarbean.searchvalue"/> <h:commandbutton value="go" action="#{kamarbean.cari"/> <h:datatable dst 6 P r a k t i k u m 0 5 : O R M, J P A, J S F, d a n J P Q L

7 Bagian 4: Entity Manager Persist (Insert) Pada bagian 4 ini, Anda diminta untuk membuat FORM INSERT/INPUT yang berfungsi untuk memasukkan data sesuai dengan yang diinginkan user. Ada 3 buah form yang perlu dibuat sbb: 2. Form Input Kamar InsertKamar.xhtml Input Data Kamar ID KAMAR TIPE KAMAR HARGA KAMAR DESKRIPSI KAMAR 123 DELUXE Garden View 50m2 SAVE Back Berikut Data Kamar saat ini: ID Tipe Harga Deskripsi 123 Deluxe Garden View 50m2 223 President Luas sekali Buatlah file JSF InsertKamar.xhtml seperti form yang diminta dan modifikasilah file tsb dengan menambahkan komponen form, inputtext, commandbutton, dan datatable yang berfungsi untuk menginput dan menampilkan hasil input. Tips: Dari halaman View Kamar buatkan link ke InputKamar.xhtml Modifikasilah Kamar Managed Bean yang sudah Anda buat sebelumnya sbb: 7 P r a k t i k u m 0 5 : O R M, J P A, J S F, d a n J P Q L

8 Buatlah method baru untuk INPUT. Contoh sbb: public void InsertKamar() { entity.kamar k = new Kamar(); k.setid_kamar("r001"); k.settipe_kamar("deluxe"); k.setharga(500000); k.setdeskripsi("garden View"); EntityTransaction tx = em.gettransaction(); em.begin(); em.persist(k); em.commit(); entity adalah nama package-nya, sesuaikan dengan milik Anda ya Input string ini harus diganti dengan variable atau getter method yang Anda miliki 8 P r a k t i k u m 0 5 : O R M, J P A, J S F, d a n J P Q L

9 Bagian 5: Entity Manager Update dan Delete Pada bagian 5 ini, Anda diminta untuk membuat fungsi Update dan Delete. Contoh Halaman Update sbb: UpdateKamar.xhtml Input Data Kamar ID KAMAR TIPE KAMAR HARGA KAMAR DESKRIPSI KAMAR 123 DELUXE ROOM Garden View 50m2 UPDATE Back Berikut Data Kamar saat ini: ID Tipe Harga Deskripsi 123 DELUXE ROOM Garden View 50m2 223 President Luas sekali 9 P r a k t i k u m 0 5 : O R M, J P A, J S F, d a n J P Q L

10 Keterangan: Tips: Untuk halaman Update, Anda harus mengisi field-field dengan data yang sudah ada di database (tidak boleh field kosong). Untuk ID tidak bisa di-update, jadi field-nya tidak bisa di-edit Pelajari penggunaan Command Link Dari halaman View Kamar bisa buatkan Command Link ke UpdateKamar.xhtml?id=xxxx Lakukan pencarian data (query) sesuai dengan id yang diinginkan Data yang dihasilkan dimasukkan sebagai value dari inputtext pada formulir update Pada ManagedBean, buatlah fungsi untuk proses update, gunakan method setter untuk setiap property dari entity class. *** SELAMAT MENGERJAKAN *** 10 P r a k t i k u m 0 5 : O R M, J P A, J S F, d a n J P Q L