Cara menampilkan List data dari database dengan ZK Framework

Tutorial kali ini adalah menampilkan isi database ke dalam halaman web dalam bentuk grid dengan menggunakan Listbox pada ZK Framework.

Skenario

1. Kita memiliki sebuah tabel data yang akan ditampilkan dalam bentuk grid. Dalam contoh ini, kita akan menampilkan isi tbl_pet yang susunan tabelnya adalah sebagai berikut :
2. Hasil query dari database adalah dalam bentuk List of object dari tabel. List ini bisa didapatkan dengan banyak cara misalkan dengan jdbc atau hibernate atau yang lainnya. Nama object dari tabel tersebut adalah TblPet.java
3. List tersebut akan kita tampilkan menggunakan ZK. Kita akan menggunakan Listbox sebagai tampilan untuk gridnya.

Step by step

1. Buat class untuk merepresentasikan tbl_pet. Bisa dengan cara apapun (jdbc/hibernate/eclipejpa) yang penting kurang lebih seperti ini : TblPet.java
   

   /**
    * Representasi class from table tbl_pet
    * @author ahsanfile
    */
   public class TblPet {
       private int idPet;
       private String name;
       private int age;
       private String sex;
       private String note;
   
       public TblPet() {
       }
   
       public int getAge() {
           return age;
       }
   
       public void setAge(int age) {
           this.age = age;
       }
   
       public int getIdPet() {
           return idPet;
       }
   
       public void setIdPet(int idPet) {
           this.idPet = idPet;
       }
   
       public String getName() {
           return name;
       }
   
       public void setName(String name) {
           this.name = name;
       }
   
       public String getNote() {
           return note;
       }
   
       public void setNote(String note) {
           this.note = note;
       }
   
       public String getSex() {
           return sex;
       }
   
       public void setSex(String sex) {
           this.sex = sex;
       }
   }

2. Buat List<TblPet> yang isinya dari query ke tbl_pet. Ini juga bisa dengan cara apapun (jdbc/hibernate). Dalam tutorial ini aku menggunakan jdbc agar mudah untuk semua orang.Pet.java
   

   /**
    * Class bisnis for manipulate tbl_pet
    * @author ahsanfile
    */
   public class Pet {
   
       private String sql;
       private Connection connection;
   
       public Pet(Connection con) {
           this.connection = con;
       }
   
       public List getTblPets() throws Exception {
           PreparedStatement ps = null;
           List ltp = new ArrayList();
           try {
               sql = "select * from tbl_pet";
               ps = connection.prepareStatement(sql);
               ResultSet rs = ps.executeQuery();
               while(rs.next()) {
                   TblPet tp = new TblPet();
                   tp.setIdPet(rs.getInt("id_pet"));
                   tp.setAge(rs.getInt("age"));
                   tp.setName(rs.getString("name"));
                   tp.setNote(rs.getString("note"));
                   tp.setSex(rs.getString("sex"));
                   ltp.add(tp);
               }
               return ltp;
           } catch (SQLException e) {
               throw new Exception(e.getMessage());
           } finally {
               if(ps!=null) {
                   ps.close();
               }
           }
       }
   }

3. Sekarang kita tinggal membuat User Interfacenya menggunakan ZK. Buatlah sebuah file zul bernama pet.zul seperti berikut ini :
   

   <?xml version="1.0" encoding="UTF-8"?>
   <zk xmlns="http://www.zkoss.org/2005/zul">
    <window title="Pet List" width="500px"  height="450px" border=""
    apply="net.ahsanfile.pet.controller.PetController">
    <listbox id="listPet" height="200px" width="100%">
    <listhead>
    <listheader label="ID" width="5%" />
    <listheader label="NAME" width="25%"/>
    <listheader label="AGE" width="10%"/>
    <listheader label="SEX" width="10%"/>
    <listheader label="NOTE" width="50%"/>
    </listhead>
    </listbox>
    </window>
   </zk>

4. Yang terakhir adalah membuat controller untuk zul yang baru kita buat pada point nomor 3. Controller ini berfungsi untuk merender List ke dalam listbox. Kodingnya adalah seperti ini : PetController.java
   

   /**
    * Controller pet.zul
    * @author anas
    */
   public class PetController extends GenericForwardComposer {
    private Listbox listPet;
    @Override
    public void doAfterCompose(Component comp) throws Exception {
    super.doAfterCompose(comp);
    prepareListPet();
    }
   
    public void prepareListPet() throws Exception {
    DataBase db = new DataBase("public");
    try {
    Pet pet = new Pet(db.getConnection());
    List<TblPet> lpt = pet.getTblPets();
    ListModelList lsm = new ListModelList(lpt, true);
    listPet.setModel(lsm);
    listPet.setItemRenderer(new ListitemRenderer() {
   
    public void render(Listitem lstm, Object o) throws Exception {
    TblPet tp = (TblPet) o;
    new Listcell(Integer.toString(tp.getIdPet())).setParent(lstm);
    new Listcell(tp.getName()).setParent(lstm);
    new Listcell(Integer.toString(tp.getAge())).setParent(lstm);
    new Listcell(tp.getSex()).setParent(lstm);
    new Listcell(tp.getNote()).setParent(lstm);
    }
    });
    } finally {
    db.close();
    }
    }
   }

5. Untuk melihat hasilnya, kita tinggal menjalankan aplikasi kita. Inilah tampilan hasil dari menampilkan List dengan ZK :

Demikian tutorial kali ini, semoga bermanfaat dan silahkan download file projectnya. Download ahsanfile-zktutorial-view-list-with-zk.zip