Belajar Java Web - Membuat DataTable Menggunakan Primefaces

Pada tutorial ini, saya akan menjelaskan tentang DataTable, DataTable merupakan salah satu component primefaces yang digunakan untuk menampilkan data dengan bentuk tabel. Fitur - fitur yang DataTable yang terdapat pada primefaces sangat lengkap, antara lain : Paginator, Filter, SummaryRow, ContextMenu, RowGroup, Sort, SubTable, dll

Untuk contoh pembuatan aplikasi Java EE menggunakan Apache Maven, kalian dapat mengunjunginya Disini, karena tutorial membuat DataTable ini masih berkaitan dengan artikel tersebut.

Cara Membuat DataTable Basic di Primefaces

Dependencies

pom.xml

        <dependency>
            <groupId>org.primefaces</groupId>
            <artifactId>primefaces</artifactId>
            <version>11.0.0</version>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.22</version>
        </dependency>

Entity Class

CODE

package com.community.belajarjavaee.entities;

import lombok.*;

import java.io.Serializable;

@Data
@AllArgsConstructor
@NoArgsConstructor
@ToString
public class DaftarBarang implements Serializable {
    private long idBarang;
    private String kodebarang;
    private String namabarang;
    private String register;
    private int jumlah;
    private double hargabarang;
}

Service

Interface DaftarBarangService berisi method untuk mengambil data DaftarBarang.

CODE

package com.community.belajarjavaee.services;

import com.community.belajarjavaee.entities.DaftarBarang;

import java.util.List;

public interface DaftarBarangService {
    public List<DaftarBarang> getListDaftarBarang();
}

Class DaftarBarangServiceImpl merupakan implements dari DaftarBarangService, yang saya gunakan untuk mengambil data List<DaftarBarang>.

CODE

package com.community.belajarjavaee.services;

import com.community.belajarjavaee.entities.DaftarBarang;

import java.util.ArrayList;
import java.util.List;

public class DaftarBarangServiceImpl implements DaftarBarangService{
    @Override
    public List<DaftarBarang> getListDaftarBarang() {
        List<DaftarBarang> list = new ArrayList<>();
        list.add(new DaftarBarang(1, "1.3.2.02.02.01", "Laptop", "0001", 5, 7530000));
        list.add(new DaftarBarang(1, "1.3.2.02.02.02", "PC Komputer", "0006", 3, 4530000));
        list.add(new DaftarBarang(1, "1.3.2.02.02.03", "Notebook", "0010", 10, 3500000));
        list.add(new DaftarBarang(1, "1.3.5.02.03.01", "Buku (Belajar Java Bagi Pemula)", "0020", 20, 95000));
        return list;
    }
}

Controller

DaftarBarangMBean merupakan Class yang digunakan untuk melakukan pengambilan data ke Service dan mengirimkannya ke Halaman XHTML.

CODE

package com.community.belajarjavaee.controller;

import com.community.belajarjavaee.entities.DaftarBarang;
import com.community.belajarjavaee.services.DaftarBarangService;
import com.community.belajarjavaee.services.DaftarBarangServiceImpl;

import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import java.io.Serializable;
import java.util.List;

@ManagedBean
@ViewScoped
public class DaftarBarangMBean implements Serializable {

    private DaftarBarangService service;
    private List<DaftarBarang> listBarang;

    @PostConstruct
    void init() {
        service = new DaftarBarangServiceImpl();
        listBarang = service.getListDaftarBarang();
    }

    public List<DaftarBarang> getListBarang() {
        return listBarang;
    }

    public void setListBarang(List<DaftarBarang> listBarang) {
        this.listBarang = listBarang;
    }
}

Halaman Daftar Barang

Halaman Daftar Barang yang menampilkan data dalam bentuk tabel.

CODE

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui">

<h:head>
    <f:facet name="first">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
    </f:facet>
    <title>Belajar Java EE</title>
</h:head>

<h:body>
    <h2>Daftar Barang</h2>
    <p:dataTable var="barang" value="#{daftarBarangMBean.listBarang}">
        <p:column headerText="Kode Barang">
            <h:outputText value="#{barang.kodebarang}" />
        </p:column>

        <p:column headerText="Nama Barang">
            <h:outputText value="#{barang.namabarang}" />
        </p:column>

        <p:column headerText="No. Register">
            <h:outputText value="#{barang.register}" />
        </p:column>

        <p:column headerText="Jumlah">
            <h:outputText value="#{barang.jumlah}" />
        </p:column>

        <p:column headerText="Harga">
            <h:outputText value="#{barang.hargabarang}" />
        </p:column>
    </p:dataTable>
</h:body>

</html>

Sekian tutorial cara membuat DataTable menggunakan Primefaces, semoga bermanfaat.

Belajar Java Web - Membuat DataTable Menggunakan Primefaces

Cara Membuat DataTable Basic di Primefaces

Dependencies

Entity Class

Service

Controller

Halaman Daftar Barang

0 Response to "Belajar Java Web - Membuat DataTable Menggunakan Primefaces"

Posting Komentar