Home > JavaFX > Load Data From Database MySQL to Table

Load Data From Database MySQL to Table


ScreenShot

Secara khusus, JavaFX tidak mempunya class Table sendiri. Jadi, class Table di-import dari JTable(javax.swing). Jika ingin meload data dari database, dibutuhkan object yang dapat menampung data yang akan diload.

Anggap saja kita akan membuat database dan table baru. Misalnya seperti berikut:

CREATE DATABASE LATIHAN ;
USE LATIHAN;

Kemudian membuat table baru:

CREATE TABLE MYDATA(
    ID INTEGER AUTO_INCREMENT PRIMARY KEY,
    NAMA VARCHAR(100),
    KOTA VARCHAR(100),
    UMUR INTEGER
);

Misalnya kita masukkan data ke table “mydata”.

INSERT INTO MYDATA (`NAMA`, `KOTA`, `UMUR`) VALUES("RINGGA", "PEKANBARU",23);
INSERT INTO MYDATA (`NAMA`, `KOTA`, `UMUR`) VALUES("RENNO", "PALEMBANG", 20);
INSERT INTO MYDATA (`NAMA`, `KOTA`, `UMUR`) VALUES("RULI", "MEDAN", 17);
INSERT INTO MYDATA (`NAMA`, `KOTA`, `UMUR`) VALUES("ANI", "PEKANBARU", 19);
INSERT INTO MYDATA (`NAMA`, `KOTA`, `UMUR`) VALUES("ARMAN", "MEDAN", 21);

Kita membutuhkan sebuah class yang merepresentasikan field-field pada table di atas.

MyData.fx

Source Code

public class MyData {
    public var id: Integer;
    public var nama: String;
    public var kota: String;
    public var umur: Integer;
}

Karena JavaFX mengimport table dari JTable, maka table yang dibuat dapat di custom sesuai keinginan. Pada kasus ini, menggunakan table model default (DefaultTableModel).

MyTable.fx

Source Code

//... other codes
public class MyTable extends SwingComponent{
    var table: JTable;
    var model: DefaultTableModel;

    public var columns: TableColumn[] on replace{
       model = new DefaultTableModel(for(column in columns) column.text, 0);
       table.setModel(model);
    };

    public var rows: TableRow[] on replace oldValue[lo..hi] = newVals{
       for(row in newVals){
              model.addRow(for(cell in row.cells) cell.text);
       }
   };

   public override function createJComponent(){
         table = new JTable();
         return new JScrollPane(table);
   }
}

This is connection to JDBC MySQL (biar sedikit pake English).

Koneksi.fx

Source Code

//...other codes
var driver = "com.mysql.jdbc.Driver";
var database = "LATIHAN";
var url = "jdbc:mysql://localhost:3306/{database}";
var user = "root";
var password = "";

//connection
var connection: Connection;
public function kon(): Connection{
    try {
         Class.forName(driver);
         connection = DriverManager.getConnection(url, user, password);
    } catch (e: ClassNotFoundException) {
           println("ERROR !!! DRIVER MYSQL NOT FOUND");
    }
    return connection;
}

Saatnya melakukan query SQL dan meload data dari database ke table.

ViewTable.fx

Source Code

//...other codes
 var cekKoneksi = koneksi.kon();
 try{
      statement = cekKoneksi.createStatement();
      result = statement.executeQuery(query);
      while (result.next()){
            mD = MyData{
                  id:{ result.getInt("ID") };
                  nama:{ result.getString("NAMA") };
                  kota:{ result.getString("KOTA") }
                  umur:{ result.getInt("UMUR") }
            }
     insert mD into myData;
     }
}catch(ex: SQLException){
     println("SQL EXCEPTION ERROR : {ex.getMessage()}");
}
//... other codes
//...
//...
MyTable{
       width: 500
       height: 200
       //columns name
       columns: [
              TableColumn { text: "ID" },
              TableColumn { text: "NAMA" },
              TableColumn { text: "KOTA" }
              TableColumn { text: "UMUR" }
       ]
       rows: bind for(d in myData)
       TableRow{
              cells: [
                    TableCell { text: bind "{d.id}" },
                    TableCell { text: bind d.nama },
                    TableCell { text: bind d.kota }
                    TableCell { text: bind "{d.umur}" }
              ]
       }
 }

//...other codes

Pada MainProgram, cukup panggil class ViewTable.

MainProgram.fx

Source Code

//...others code
var viewTable= ViewTable{}

//stage
stage = Stage {
    title : "Load Data to Table"
    resizable:false
    scene: Scene {
          width: 500 height: 250
          content: [
                Button {
                     translateY:210
                     disable:bind press
                     translateX: bind stage.scene.width/2 - 50
                     text: "LOOOOADDDDD"
                     action: function() {
                          viewTable.executeQuery();
                          press=true;
                    }
               },
               viewTable
         ]
   }
}

Klik button “Load”, maka data akan diload ke table.

Download Source Code Lengkap (Netbeans Project)

Go share…!!!

  1. No comments yet.
  1. No trackbacks yet.

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

%d bloggers like this: