Praktikum 07 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: Kamar idKamar: int tipeKamar: String hargaKamar: double deskripsi: String + getIdKamar(int): int + setIdKamar(): id + getTipeKamar(String): String + setTipeKamar(): String + getHargaKamar(double): double + setHargaKamar():double + getDeskripsi(String): String + setDeskripsi(): String Pada project aplikasi Anda, buatlah sebuah package “entity” yang berisi class Kamar.java tersebut. Gunakan annotation untuk memetakan class menjadi tabel relasional (ORM).

1|Praktikum 01: ORM, JPA, JSF, dan JPQL

Note: Sebelum Anda melakukan/run pemetaan (mapping), buatlah sebuah database MySQL dengan nama “BookingDB”. Database inilah yang nanti akan digunakan untuk menyimpan data 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 2 page yang diminta dengan user interface sbb: index.xhtml Selamat Datang di Pusat Reservasi Hotel Lihat data kamar

ViewKamar.xhtml Berikut Data Kamar yang tersedia: ID R001 R002

TIPE Deluxe Suite

HARGA 500.000 1.000.000

DESKRIPSI Garden view Pool View

Ketentuan: -

Report ditampilkan dalam bentuk data grid (gunakan JSF data table). Data harus diambil dari database dengan menggunakan JPQL

2|Praktikum 01: ORM, JPA, JSF, dan JPQL

TIPS PETUNJUK BAGIAN 1 & 2 Setelah Anda selesai membuat semua Entity Class, buatlah class 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, sbb:

@Named(value = "KamarBean") @RequestScoped public class KamarBean { private List dataKamar =new ArrayList(); public KamarBean() { // Konstruktor saat ini masih kosong, nanti akan dimodifikasi di praktikum berikutnya } public List getDataKamar() { return dataKamar; } public void setDataKamar(List dataKamar) { this.dataKamar = dataKamar; } public void selectAll() { EntityManagerFactory emf = Persistence.createEntityManagerFactory("NamaPersistenceUnit"); EntityManager em = emf.createEntityManager();

3|Praktikum 01: ORM, JPA, JSF, dan JPQL

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:

Data Kamar

#{KamarBean.selectAll()} Kembali ke index

4|Praktikum 01: ORM, JPA, JSF, dan JPQL

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 1 2

Tipe Deluxe Garden President

Harga 100000 500000

5|Praktikum 01: ORM, JPA, JSF, dan JPQL

Deskripsi Medium Luas sekali

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(){

5.

Query q = em.createQuery("Select u from Kamar u Where u.tipe_kamar like '%" + searchValue + "%'"); dataKamar = q.getResultList(); Ini artinya setelah di-tekan, halaman akan kembali ke return "DataKamar"; “DataKamar.xhtml” (pastikan nama file sesuai dengan } yg Anda gunakan!) Buatlah file JSF CariKamar.xhtml dan modifikasilah file

tsb dengan menambahkan komponen form, inputText, commandButton, dan dataTable sbb: Tipe Kamar:
6|Praktikum 01: ORM, JPA, JSF, dan JPQL

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

123

TIPE KAMAR

DELUXE

HARGA KAMAR

500000

DESKRIPSI KAMAR

Garden View 50m2 SAVE

Back Berikut Data Kamar saat ini: ID 123 223

Tipe Deluxe President

Harga 500000 500000

Deskripsi Garden View 50m2 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|Praktikum 01: ORM, JPA, JSF, dan JPQL

Buatlah method baru untuk INPUT. Contoh sbb: “entity” adalah nama package-nya, sesuaikan dengan milik Anda ya

public void InsertKamar() { entity.Kamar k = new Kamar(); k.setId_kamar("R001"); k.setTipe_kamar("Deluxe"); k.setHarga(500000); k.setDeskripsi("Garden View");

Input string ini harus diganti dengan variable atau getter method yang Anda miliki

EntityTransaction tx = em.getTransaction(); em.begin(); em.persist(k); em.commit(); }

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

123

TIPE KAMAR

DELUXE ROOM

HARGA KAMAR

500000

DESKRIPSI KAMAR

Garden View 50m2 UPDATE

Back Berikut Data Kamar saat ini: ID 123 223

Tipe DELUXE ROOM President

Harga 500000 500000

8|Praktikum 01: ORM, JPA, JSF, dan JPQL

Deskripsi Garden View 50m2 Luas sekali

Keterangan:  

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

Tips:     

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 ***

9|Praktikum 01: ORM, JPA, JSF, dan JPQL