Praktikum 07. Penggunaan JSF dan JPA pada aplikasi Web

(1)

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)

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)

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)

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)

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)

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)

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:

123 Deluxe 500000 Garden View 50m2

DELUXE 500000

Garden View 50m2

(8)

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:

123 DELUXE ROOM 500000 Garden View 50m2

DELUXE ROOM 500000

Garden View 50m2

(9)

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