JSF CRUD dengan Hibernate (Bag. 1)

Database kuliah.sql

Pertama-tama buat database dengan nama kuliah yang memiliki tabel dosen, mahasiswa dan mata kuliah. Silahkan isi data tabel tersebut.

CREATE TABLE `dosen` (
  `nidn` varchar(10) NOT NULL,
  `nama` varchar(50) NOT NULL,
  `jk` char(1) NOT NULL,
  `alamat` varchar(50) NOT NULL,
  PRIMARY KEY (`nidn`)
)

CREATE TABLE `mahasiswa` (
  `nim` varchar(10) NOT NULL,
  `nama` varchar(50) NOT NULL,
  `jk` char(1) NOT NULL,
  `alamat` varchar(50) NOT NULL,
  PRIMARY KEY (`nim`)
)

CREATE TABLE `matakuliah` (
  `kode` varchar(10) NOT NULL,
  `nama` varchar(50) NOT NULL,
  `sks` int(1) NOT NULL,
  PRIMARY KEY (`kode`)
)

New Project: KuliahCRUD

Versi yang digunakan dalam program ini adalah IDE NetBeans 7.1.2 dan server Apache Tomcat 7.

Buat New Project dengan memilih File > New Project. Pilih Web Application.1

Beri nama Project Name: KuliahCRUD dan simpan di default location.2

Pilih JavaServer Faces dan Hibernate karena kita akan menggunakan dua framework tersebut. Pilih Database Connection dengan nama kuliah yang sudah kita buat tadi.3

Konfigurasi Hibernate

Secara otomatis ketika kita membuat sebuah project yang menggunakan framework Hibernate, maka IDE akan membuat file hibernate.cfg.xml yang merupakan file konfigurasi. Beberapa pengaturan yang perlu dilakukan untuk debug logging pada pernyataan SQL dan mengaktifkan Hibernate’s session context management adalah dengan cara:

Pada tab Design di bagian Optional Properties > Configuration Properties, tambahkan property hibernate.show_sql yang bernilai true.4

Lalu, pada bagian Miscellaneous Properties, tambahkan property hibernate-current_session_context_class dengan nilai thread.5

Terakhir, masih pada bagian yang sama, tambahkan juga property hibernate.query.factory_class dengan nilai org.hibernate.hql.classic.ClassicQueryTranslatorFactory.6

Selesai dan simpan file tersebut.

Membuat HibernateUtil.java Helper File

Kita perlu membuat helper class yang dapat menangani startup dan akses ke Hibernate’s SessionFactory. Class akan memanggil configure() dan loads file hibernate.cfg.xml, kemudian membangun SessionFactory untuk menghasilkan Session object.

Pilih New File > Hibernate > HibernateUtil.Java. Jangan lupa untuk memilih project KuliahCRUD.

6a

Beri nama Class Name: HibernateUtil dan letakkan pada Package: lib. Lalu, klik Finish. 7

Generating Hibernate Mapping Files dan Java Classes

Kita akan menggunakan POJO (Plain Old Java Object) untuk merepresentasikan data dari tiap tabel dalam database yang digunakan. Java class akan merincikan fields untuk masing-masing kolom dalam tabel dan menggunakan setters dan getters untuk mengambil dan menulis data tersebut. Untuk menempatkan POJOs ke tabel, kita dapat menggunakan Hibernate Mapping Files.

Membuat File Hibernate Reverse Engineering

Jika kita mau menggunakan Hibernate Mapping Files dan POJOs dari Database wizard, kita membutuhkan file hibernate.cfg.xml dan harus membuat file reverse engineering: hibernate.reveng.xml.  File ini memungkinkan kita memiliki kontrol penuh terhadap strategi mapping pada database.

Caranya adalah: pilih Hibernate Reverse Engineering Wizard pada New File > Hibernate. Beri nama hibernate.reveng.8

Pilih tabel yang akan digunakan dengan cara memindahkan tabel-tabel pada Available Tables ke Selected Tables. Lalu, klik Finish.9

Membuat File Hibernate Mapping Files and POJOs

Kita dapat membuat POJOs dan mapping files dengan menggunakan wizard. Caranya adalah: create File Hibernate Mapping Files and POJOs from Database dengan memilihi New File > Hibernate.

10

Ini adalah files yang diperoleh dari hasil wizard:

11

Membuat File DosenHelper.java Helper Class

Helper class ini akan dibuat di controller package. Kita akan menggunakan Hibernate Query Language (HQL) editor untuk membangun dan menguji queries. Setelah melakukan pengujian pada queries, kita akan membuat method di helper class yang akan membangun dan menjalankan queries tersebut. Setelah itu baru akan melibatkan method dalam helper class dari JSF Manage Been.

Membuat Class

Kita akan membuat Hibernate  session dengan memanggil getSessionFactory pada HibernateUtil.java dan membuat beberapa helper methods untuk membuat queries untuk mengambil data dari database. Caranya adalah: New File > Java > Java Class. Beri nama DosenHelper.java dan masukkan dalam package controller.12

Penggunaan HQL Query

Kita dapat menggunakan HQL Editor untuk membangun dan menguji HQL Query. Pertama-tama bersihkan project dahulu dengan klik-kanan pada project node dan pilih Clean and Build. Lalu klik-kanan file hibernate.cfg.xml dan pilih Run HQL Query untuk membuka HQL Editor.

Pada HQL Editor, pilih session hibernate.cfg dari drop down list di toolbar. Test koneksi dapat dilakukan dengan mengetikkan query pada editor dan menjalankannya dengan cara klik Run HQL Query button ( Run HQL Query button ) pada toolbar.

Misalkan query yang kita ketikkan adalah: from Dosen, maka hasilnya adalah:

13

Contoh queries lainnya yang dapat kita tuliskan pada DosenHelper.java ini, adalah:

public List getDosen() {
    Session session = HibernateUtil.getSessionFactory().getCurrentSession();
    List<Dosen> dosenList = null;
        try {
            org.hibernate.Transaction tx = session.beginTransaction();
            Query q = session.createQuery("from Dosen ");
            dosenList = (List<Dosen>) q.list();
        } catch (Exception e) {
            e.printStackTrace();
    }
        return dosenList;

}

Kita menambahkan Hibernate Session di setiap methodnya dan jangan lupa untuk import java.util.List, model.Dosen, org.hibernate.Session dan lib.HibernateUtil.

Kita juga dapat menambahkan helper methods dengan membuat query berdasarkan variabel masukan. Sebelum menuliskan kodenya, kita juga dapat mencobakan pada HQL Query Editor. Tambahkan method di bawah ini untuk mengambil list data dosen berdasarkan nidn:

public Dosen getDosenByID(String nidn) {
    Dosen dosen = null;
    Session session = HibernateUtil.getSessionFactory().getCurrentSession();
    try {
        org.hibernate.Transaction tx = session.beginTransaction();
        Query q = session.createQuery("from Dosen as dosen where dosen.nidn = " + nidn);
        dosen = (Dosen) q.uniqueResult();
    } catch (Exception e) {
        .printStackTrace();
    }
    return dosen;
}

Membuat JSF Managed Bean

Methods di dalam Managed Bean digunakan untuk menampilkan data pada halaman JSF dan mengakses methods pada helper class untuk mengambil records. Cara membuat managed Bean:

  1. Klik kanan pada controller source package node dan pilih New > Other.
  2. Pilih JSF Managed Bean dari kategori JavaServer Faces. Klik Next.
  3. Tulis DosenController untuk Class Name.Kita akan menggunakan Managed Bean dengan nama dosenController sebagai nilai untuk inputText dan commandButton pada JSF page index.xhtml ketika memanggil methods di bean.
  4. Pilih controller untuk Package.
  5. Gunakan dosenController sebagai nama yang akan digunakan sebagai managed bean.
  6. Set Session pada Scope. Klik Finish.

14

Tambahkan kode di bawah ini untuk mendeklarasikan fields:


@ManagedBean
@SessionScoped
public class DosenController{
    DosenHelper helper;
    DataModel dataDosen;

    private Dosen current;
}

Tambahkan kode di bawah ini untuk membuat instance dari DosenController dan mengambil data Dosen.

    public DosenController() {
        helper = new DosenHelper();

    }

    public DataModel getDosen() {
        if (dataDosen == null) {
            dataDosen = new ListDataModel(helper.getDosen());

        }
        return dataDosen;
    }

    public void recreateModel() {
        dataDosen = null;
    }

    public Dosen getSelected() {
        if (current == null) {
            current = new Dosen();
        }
        return current;
    }

Sedangkan method di bawah ini digunakan untuk menampilkan tabel:

    public String prepareView() {
        current = (Dosen) getDosen().getRowData();
        return "/dosen/browse";
    }

    public String prepareList() {
        recreateModel();
        return "/index";
    }

Methods yang mengembalikan “index” atau “browse”  akan meminta JSF Navigation Handler untuk membuka halaman yang bernama index.xhtml atau browse.xhtml. Dalam aplikasi ini, kita tidak perlu lagi membuat navigation rules di faces-config.xml karena pemanggilan sudah ditangai oleh Navigation Handler.

Membuat Halaman Web

Kita akan membuat 2 halaman web untuk menampilkan data. Pertama, halaman index.xhtml yang telah disediakan secara otomatis dari IDE untuk menampilkan data dosen dari database. Kemudian halaman browse.xhtml untuk menampilkan rincian data dosen ketika kita mengklik “View” di tabel. Kita juga akan membuat JSF template yang akan digunakan oleh index.xhtml and browse.xhtml.

Membuat template.xhtml

Caranya adalah:

  1. Klik kanan project KuliahCRUD, pilih New > Other.
  2. Pilih Facelets Template pada  kategori JavaServer Faces. Klik Next.
  3. Beri nama file template dan simpan di folder template.
  4. Pilih CSS layout style.
  5. Klik Finish.

15

Ketika selesai, file template.xhtml akan terbuka di editor. Kita akan melakukan perubahan pada elemen <ui:insert> dengan mengubah namanya menjadi “body”.

<div id="content" class="left_content">
    <ui:insert name="body">Content</ui:insert>
</div>

Mengubah index.xhtml

Ketika kita membuat web application, IDE secara otomatis akan membuat halaman index.xhtml. Kita akan mengubah halaman untuk menampilkan daftar dosen. JSF page memanggil methods di JSF Managed Been DosenController untuk mengambil daftar dosen dan menampilkannya dalam sebuah tabel.

Lakukan modifikasi pada <ui:composition> dan <ui:define> dan tambahkan <h:form> element. Tambahkan dataTable element untuk mengambil data dari tabel dan menampilkan itemnya.

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core">
    <ui:composition template="./template/template.xhtml">
        <ui:define name="body">
            <h:form styleClass="jsfcrud_list_form">
                <h:dataTable value="#{dosenController.dosen}" var="item" border="0" cellpadding="2" cellspacing="0" rowClasses="jsfcrud_odd_row, jsfcrud_even_row" rules="all" style="border:solid 1px">
                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="NIDN" />
                        </f:facet>
                        <h:outputText value="#{item.nidn}" />
                    </h:column>
                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="Nama" />
                        </f:facet>
                        <h:outputText value="#{item.nama}" />
                    </h:column>
                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="Jenis Kelamin" />
                        </f:facet>
                        <h:outputText value="#{item.jk}" />
                    </h:column>
                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="Alamat" />
                        </f:facet>
                        <h:outputText value="#{item.alamat}" />
                    </h:column>
                    <h:column>
                        <f:facet name="header">
                            <h:outputText value=" " />
                        </f:facet>
                        <h:commandLink action="#{dosenController.prepareView}" value="View" />
                    </h:column>
                </h:dataTable>
            </h:form>
        </ui:define>
    </ui:composition>
</html>

Jangan lupa untuk mendeklarasikan semua tag library nya.

  • User Interface menggunakan xmlns:ui="http://java.sun.com/jsf/facelets
  • <f:facet> menggunakan xmlns:f="http://java.sun.com/jsf/core

Dengan demikian, halaman index sudah selesai dibuat. Setiap baris terdapat “View” link yang akan memanggil method prepareView di managed been. Method prepareView akan mengembalikan nilai “browse” dan akan membuka halaman browse.xhtml.

Membuat browse.xhtml

Halaman ini digunakan untuk menampilkan rincian data dosen yang dipilih. Kita akan menggunakan Facelets Template Client wizard untuk membuat halaman yang berdasarkan pada JSF Facelets template template.xhtml yang telah dibuat. Caranya adalah:

  1. Klik kanan project KuliahCRUD dan pilih choose New > Other.
  2. Pilih Facelets Template Client pada kategori JavaServer Faces category. Klik Next.
  3. Beri nama browse pada File Name dan letakkan dalam folder dosen.
  4. Pilih <ui:composition> untuk Generated Root Tag
  5. Pilih lokasi template dan nama template yang digunakan.

16

Tambahkan kode di bawah ini untuk memanggil method pada managed bean DosenController untuk mengambil data dan jangan lupa untuk menambahkan tag library yang diperlukan.

<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="../template/template.xhtml"
                xmlns:h="http://java.sun.com/jsf/html">

    <ui:define name="top">
        Top
    </ui:define>

    <ui:define name="left">
        Left
    </ui:define>

    <ui:define name="body">
        <h:form>
            <h:panelGrid columns="2" >
                <h:outputText value="NIDN: " />
                <h:outputText value="#{dosenController.selected.nidn}" title="NIDN" />

                <h:outputText value="Nama: " />
                <h:outputText value="#{dosenController.selected.nama}" title="nama" />

                <h:outputText value="Jenis Kelamin: " />
                <h:outputText value="#{dosenController.selected.jk}" title="jk" />

                <h:outputText value="Alamat: " />
                <h:outputText value="#{dosenController.selected.alamat}" title="alamat" />
            </h:panelGrid>
            <br/>

            <br/>
            <h:commandLink action="#{dosenController.prepareList}" value="View All List" />
            <br/>
        </h:form>
    </ui:define>
</ui:composition>

Jalankan Project

Cara menjalankan Main Project adalah dengan klik kanan pada KuliahCRUD dan pilih Run. IDE akan membuka browser window secara otomatis ke URL http://localhost:8080/KuliahCRUD/ untuk menampilkan daftar dosen.

17

Link View akan menampilkan browse.xhtml:

19

Penutup

Program ini baru membuat method menampilkan data saja. Berikutnya, akan dibuat method create, delete, dan update. Untuk menampilkan data mahasiswa dan mata kuliah, langkah-langkah pembuatan helper dan managed bean serupa.

Referensi yang digunakan: Using Hibernate in a Web Application.

…….Bagian 2

6 thoughts on “JSF CRUD dengan Hibernate (Bag. 1)

  1. Pingback: JSF CRUD dengan Hibernate (Bag. 2, Selesai) | Woosah - Bernafas di Jogja

  2. saya masih belajar .dan mengikuti source code isi..tapi ps saat modified index. html
    setelah item kok gk ada field yang harus di ambil yah..
    terimakasih..mohon bantuan..

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s