1 | P r a k t i k u m 0 1 : O R M , J P A , J S F , d a n J P Q L
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:
Pada project aplikasi Anda, buatlah sebuah package “entity” yang berisi class Kamar.java tersebut.
Gunakan annotation untuk memetakan class menjadi tabel relasional (ORM).
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
2 | P r a k t i k u m 0 1 : O R M , J P A , J S F , d a n J P Q L
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
ViewKamar.xhtml
Ketentuan:
- Report ditampilkan dalam bentuk data grid (gunakan JSF data table).
- Data harus diambil dari database dengan menggunakan JPQL Selamat Datang di Pusat Reservasi Hotel
Lihat data kamar
Berikut Data Kamar yang tersedia:
ID TIPE HARGA DESKRIPSI
R001 Deluxe 500.000 Garden view
R002 Suite 1.000.000 Pool View
3 | P r a k t i k u m 0 1 : O R M , J P A , J S F , d a n J P Q L 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<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");
EntityManager em = emf.createEntityManager();
4 | P r a k t i k u m 0 1 : O R M , J P A , J S F , d a n J P Q L
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>
5 | P r a k t i k u m 0 1 : O R M , J P A , J S F , d a n J P Q L
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:
Back
n
CARI
Berikut Data Pemesan yang sesuai kriteria pencarian Anda:
ID Tipe Harga Deskripsi
1 Deluxe Garden 100000 Medium
2 President 500000 Luas sekali
6 | P r a k t i k u m 0 1 : O R M , J P A , J S F , d a n J P Q L 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
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
Ini artinya setelah di-tekan, halaman akan kembali ke
“DataKamar.xhtml” (pastikan nama file sesuai dengan yg Anda gunakan!)
7 | P r a k t i k u m 0 1 : O R M , J P A , J S F , d a n J P Q L
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
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:
Input Data Kamar ID KAMAR TIPE KAMAR HARGA KAMAR DESKRIPSI KAMAR
Back
123
SAVE
Berikut Data Kamar saat ini:
ID Tipe Harga Deskripsi
123 Deluxe 500000 Garden View 50m2
223 President 500000 Luas sekali
DELUXE 500000
Garden View 50m2
8 | P r a k t i k u m 0 1 : O R M , J P A , J S F , d a n J P Q L 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();
}
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
“entity” adalah nama package-nya, sesuaikan dengan milik Anda ya
Input string ini harus diganti dengan variable atau getter method yang Anda miliki
Input Data Kamar ID KAMAR TIPE KAMAR HARGA KAMAR DESKRIPSI KAMAR
Back
123
UPDATE
Berikut Data Kamar saat ini:
ID Tipe Harga Deskripsi
123 DELUXE ROOM 500000 Garden View 50m2
223 President 500000 Luas sekali
DELUXE ROOM 500000
Garden View 50m2
9 | P r a k t i k u m 0 1 : O R M , J P A , J S F , d a n J P Q L 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 ***
