Belajar Pemrograman Web Berbasis Java Menggunakan JSF

Belajar Pemrograman Web Berbasis Java Menggunakan JSF - Pemrograman web merupakan salah satu cara membangun web dengan mengimplementasikan kode-kode bahasa pemrograman yang dapat berjalan di server. Bahasa pemrograman yang mendukung pemrograman web ini diantara JSF, JSP, PHP, ASP dan lain-lain. Pada kesempatan kali ini saya ingin berbagi tutorial bagaimana cara membangun sebuah web aplikasi berbasis java menggunakan framework JSF atau Java Server Faces dan Primefaces.

Apa itu JSF?

Java Server Faces atau JSF merupakan salah satu teknologi dalam pengembangan aplikasi web berbasis java. Dan JSF merupakan bagian dari Java Platform, Java Enterprise Edition.

Berdasarkan penjelasan dari Sun, JSF terdiri atas :

• Kumpulan komponen UI
• Pengaturan Flow Navigasi
• Event Handling
• Halaman Web
• Server side objects

Baca Juga : Belajar Pemrograman Web - Pengenalan Primefaces

Dalam tutorial ini saya menggunakan Netbeans IDE.

Berikut tahapan untuk membuat sebuah aplikasi web berbasis java :

• Pilih menu file dan pilih New Project.
• Kemudian pada categories klik Java Web, pilih Web Application dan klik Next.

• Selanjutnya akan muncul dialog untuk mengatur nama dan lokasi project yang akan kalian buat.
• Project Name isi dengan nama project web yang akan kalian buat(tanpa ada spasi), 
• sebagai contoh saya buat dengan nama ContohPemrogramanWeb.
• Project Location merupakan lokasi dimana project disimpan.

• Jika sudah klik Next.
• Kemudian akan muncul dialog untuk mengatur server dan versi Java EE.
• Pilih server GlassFish kemudian klik Next.

Tunggu hingga muncul dialog berikut :

• Pada tahapan ini kalian dapat memilih framework yang akan kalian gunakan dalam membangunan aplikasi web berbasis java ini, seperti Spring Web MVC, Java Server Faces, Struts, Hibernate, dll. Untuk tutorial ini saya menggunakan framework Java Server Faces atau JSF.
• Pada tab Configuration masukkan *.jsf pada JSF Servlet URL Patterns.
• Kemudian klik Next.

Baca Juga : Belajar Java - Modul dan Arsitektur Spring Framework.

Jangan lupa tambahkan library Primefaces, bagi yang belum memiliki library Primefaces bisa download di situs resminya primefaces.org

Buatlah sebuah class Mahasiswa

CODE

package com.community.entity;

import java.io.Serializable;

public class Mahasiswa implements Serializable{
    private String nim, nama, jurusan;

    public Mahasiswa() {
    }

    public Mahasiswa(String nim, String nama, String jurusan) {
        this.nim = nim;
        this.nama = nama;
        this.jurusan = jurusan;
    }

    public String getNim() {
        return nim;
    }

    public void setNim(String nim) {
        this.nim = nim;
    }

    public String getNama() {
        return nama;
    }

    public void setNama(String nama) {
        this.nama = nama;
    }

    public String getJurusan() {
        return jurusan;
    }

    public void setJurusan(String jurusan) {
        this.jurusan = jurusan;
    }
    
}

Buatlah sebuah class untuk dijadikan managedBean

CODE

package com.community.mbaen;

import com.community.entity.Mahasiswa;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.context.FacesContext;

@ManagedBean(name = "mahasiswaMBean")
@ViewScoped
public class MahasiswaMBean implements Serializable{
    private String nim, nama, jurusan;
    private List<mahasiswa> listMhs;
    private Mahasiswa selectedMhs;
    
    @PostConstruct
    void init(){
        listMhs = new ArrayList<>();
        listMhs.add(new Mahasiswa("41101324", "Akira", "Teknik Informatika"));
        listMhs.add(new Mahasiswa("32101322", "Natsuki", "Management Informatika"));
        listMhs.add(new Mahasiswa("41101243", "Hikaru", "Teknik Informatika"));
    }
    
    public void onSelectedMhs(){
        if(selectedMhs!=null){
            nim = selectedMhs.getNim();
            nama = selectedMhs.getNama();
            jurusan = selectedMhs.getJurusan();
        }
    }
    
    public void simpanMhs(){
        listMhs.add(new Mahasiswa(nim, nama, jurusan));
        clear();
    }
    
    public void editMhs(){
        if(selectedMhs!=null){
            listMhs.add(new Mahasiswa(nim, nama, jurusan));
            listMhs.remove(selectedMhs);
            clear();
        } else {
            FacesContext.getCurrentInstance().addMessage(null, 
                    new FacesMessage(FacesMessage.SEVERITY_WARN, 
                            "Perhatian", "Silahkan Pilih Mahasiswa Yang Akan Di Edit"));
        }
    }
    
    public void hapusMhs(){
        if(selectedMhs!=null){
            listMhs.remove(selectedMhs);
            clear();
        } else {
            FacesContext.getCurrentInstance().addMessage(null, 
                    new FacesMessage(FacesMessage.SEVERITY_WARN, 
                            "Perhatian", "Silahkan Pilih Mahasiswa"));
        }
    }

    private void clear(){
        nim = "";
        nama = "";
        jurusan = "";
    }
    
    public String getNim() {
        return nim;
    }

    public void setNim(String nim) {
        this.nim = nim;
    }

    public String getNama() {
        return nama;
    }

    public void setNama(String nama) {
        this.nama = nama;
    }

    public String getJurusan() {
        return jurusan;
    }

    public void setJurusan(String jurusan) {
        this.jurusan = jurusan;
    }

    public Mahasiswa getSelectedMhs() {
        return selectedMhs;
    }

    public void setSelectedMhs(Mahasiswa selectedMhs) {
        this.selectedMhs = selectedMhs;
    }

    public List<mahasiswa> getListMhs() {
        return listMhs;
    }

    public void setListMhs(List<mahasiswa> listMhs) {
        this.listMhs = listMhs;
    }
    
}

Untuk halaman web-nya, ubahlah kode index.xhtml dengan kode dibawah ini :

CODE

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>Contoh Pemrograman Web</title>
    </h:head>
    <h:body>
        <h:form id="appform">
            <p:growl id="growl" sticky="true" showDetail="true" />
            <p:outputPanel id="opmain">
                <p:panelGrid>
                    <p:row>
                        <p:column>NIM</p:column>
                        <p:column>:</p:column>
                        <p:column><p:inputText value="#{mahasiswaMBean.nim}" /></p:column>
                    </p:row>
                    <p:row>
                        <p:column>Nama</p:column>
                        <p:column>:</p:column>
                        <p:column><p:inputText value="#{mahasiswaMBean.nama}" /></p:column>
                    </p:row>
                    <p:row>
                        <p:column>Jurusan</p:column>
                        <p:column>:</p:column>
                        <p:column>
                            <p:selectOneMenu value="#{mahasiswaMBean.jurusan}">
                                <f:selectItem itemLabel="Pilih Jurusan" itemValue=""/>
                                <f:selectItem itemLabel="Teknik Informatika" itemValue="Teknik Informatika"/>
                                <f:selectItem itemLabel="Management Informatika" itemValue="Management Informatika"/>
                                <f:selectItem itemLabel="Komputerisasi Akuntansi" itemValue="Komputerisasi Akuntansi"/>
                            </p:selectOneMenu>
                        </p:column>
                    </p:row>
                </p:panelGrid>
                <br/>
                <p:commandButton value="Simpan"
                                 update="growl, opmain"
                                 actionListener="#{mahasiswaMBean.simpanMhs()}" />&nbsp;&nbsp;
                <p:commandButton value="Edit"
                                 update="growl, opmain"
                                 actionListener="#{mahasiswaMBean.editMhs()}" />&nbsp;&nbsp;
                <p:commandButton value="Hapus"
                                 update="growl, opmain"
                                 actionListener="#{mahasiswaMBean.hapusMhs()}" />
                <br/><br/>
                <p:dataTable var="mhs" selectionMode="single" rowKey="#{mhs}"
                             selection="#{mahasiswaMBean.selectedMhs}"
                             value="#{mahasiswaMBean.listMhs}">
                    <p:ajax event="rowSelect" update=":appform:opmain" 
                            listener="#{mahasiswaMBean.onSelectedMhs()}" />
                    <p:column headerText="NIM">
                        <h:outputText value="#{mhs.nim}" />
                    </p:column>

                    <p:column headerText="Nama">
                        <h:outputText value="#{mhs.nama}" />
                    </p:column>

                    <p:column headerText="Jurusan">
                        <h:outputText value="#{mhs.jurusan}" />
                    </p:column>
                </p:dataTable>
            </p:outputPanel>
        </h:form>
    </h:body>
</html>

Hasil output dari contoh program di atas :

Sekian Tutorial pemrograman web berbasis java menggunakan framework JSF dan Primefaces. Semoga bermanfaat.

Subscribe to receive free email updates: