BAB 10 - Pemrograman Berbasis GUI (1)

Imam Ibnu Badri Pemrograman Berorientasi Objek 17.08

Capaian dan Indikator

1. Capaian Pembelajaran

Setelah mempelajari bab ini, mahasiswa diharapkan:

Memahami cara penggunaan IDE Netbeans untuk membangun aplikasi berbasis GUI.
Memahami konsep pemrograman berbasis GUI.
Memahami fungsi dari komponen-komponen swing GUI pada Java.

2. Indikator

Mahasiswa mampu menggunakan IDE Netbeans untuk mem bangu n apl ikasi
Mahasiswa mampu menjelaskan konsep pemrograman berbasis GUI pada Java
Mahasiswa mampu menggunakan komponen-komponen swing GUI dalam membuat aplikasi

Uraian Materi

Pada bab ini, kita akan menggunakan IDE Netbeans untuk membantu mempermudah pembuatan program berbasi Graphic User Interface (GUI). Untuk itu, akan dibahas terlebih dahulu mengenai IDE Netbeans.

A. Pengenalan IDE Netbeans

Netbeans adalah salah satu IDE yang popular yang sering digunakan untuk mengembangkan aplikasi berbasis Java. Meskipun demikian, Netbeans juga bisa digunakan untuk mengembangkan aplikasi berbasis bahasa pemrograman lain, seperti C++ atau PHP. Netbeans awalnya merupakan IDE yang dikembangkan oleh Sun Microsystems, namun saat ini telah diakuisisi oleh Oracle Corporation. Gambar di bawah ini menampilkan antarmuka dari IDE Netbeans.

Pemrograman di dalam Netbeans berbasis pada project yang disimpan dalam format package. Oleh sebab itu, setiap kali akan memulai pengembangan sebuah aplikasi, maka programmer diharuskan membuat New Project dengan nama tertentu, yang kemudian nama tersebut secara otomatis menjadi namajile dari kode program yang disimpan. Selain itu, pada baris paling atas dari kode program akan tampil tulisan package < nama_proyek> , misal nya package proyek_l, seperti yang terlihat pada gambar di atas.

B. Membuat New Project

Untuk memulai membuat sebuah aplikasi berbasis Java menggunakan IDE Netbeans, maka pertama kali kita perlu membuat New Project.

melalui menu "File ➜ New Project",
kemudian pilih "Java" pada kolom Categories dan pilih "Java Application" pada kolom Projects. Setelah itu klik tombol Next,
lalu ketikkan nama proyek yang akan dibuat pada bagian Project Name, misalnya "Proyek_ l " dan tentukan direktori penyimpanan proyek pada bagian Project Location. Terakhir klik tombol Finish, maka akan tampil file kode program berkestensi *.java dari proyek yang kita buat seperti yang terlihat pada Gambar. Jika Anda perhatikan, nama file *.java tersebut akan sama dengan nama proyek yang kita buat tadi. File kode *.java tersebut disebut sebagai main class.

Setelah new project berhasil dibuat, maka kita akan masuk ke dalam kode program dengan nama Proyek_l. java. File ini lah yang akan menjadi main class dari program kita.

C. Membuat Form

Untuk membuat sebuah form berbasis GUI, maka kita perlu membuat kelas baru

melalui menu "File ➜ New File",
kemudian akan muncul jendela seperti gambar di bawah ini.
Pada jendela seperti tampak pada gambar di atas, pastikan Project yang kita pilih adalah Proyek_ l , kemudian pilih "Swing GUI Forms" pada bagian Categories, lalu pilih "Jframe Form" pada bagian File Types. Setelah itu klik "Next".
Kemudian, masukkan nama kelas yang ingin dibuat pada bagian Class Name. Sebagai contoh, coba ketikkan "FormDataKaryawan" seperti terlihat pada gambar di bawah ini.
Jika sudah, klik tombol "Finish'', maka Anda akan dibawa masuk ke dalam area desain GUT pada Netbeans seperti tampak pada gambar di bawah ini.

D. Meletakkan Komponen Swing pada Form

Pada area desain tersebut , Anda dapat mendesain secara mudah komponen-komponen yang ingin dimasukkan ke dalam form tersebut dengan cara drag and drop komponen komponen yang ada pada tab Swing Containers atau Swing Controls yang berada pada sisi kanan jendela utama Netbeans.

Sebagai contoh, kita akan membuat form isian data karyawan yang terdiri dari:

a. Nama Lengkap
b. Tempat Lahir
c. Tanggal - Bulan - Tahun Lahir
d. Pendidikan (D3, SI , S2, S3)
e. Status Karyawan (Tetap, Kontrak)

Untuk membuat form isian pada data Nama Lengkap Tempat Lahir, dan Tanggal - Bulan - Tahun Lahir, gunakan komponen jText Field. Kemudian untuk membuat form pemilihan pada data Pendidikan dan Status Karyawan menggunakan komponen jComboBox. Untuk membuat tombol "Tambah" gunakan komponen jButton. Terakhir, pada bagian bawah form kita berikan komponen jTable untuk menampilkan setiap data karyawan yang ditambahkan ke dalam program.

Setelah desain GUI selesai dibuat, selanjutnya kita lakukan pengaturan pada komponen jComboBox agar sesuai dengan masing-masing poin isian. Untuk itu, klik kanan pada komponen jComboBox "Pendidikan", kemudian pilih "Properties" pada bagian paling bawah. Setelah tampil jendela Properties, maka lakukan pengeditan pada bagian "model" dengan cara mengklik tanda titik-titik pada bagian kanannya.

Setelah muncul jendela baru, isikanlah satu per satu kemungkinan nilai untuk komponen Pendidikan , yakni D3, Sl , S2, dan S3. Jika sudah, klik tombol "OK". Lakukan hal yang sama untuk komponen jcomboBox lainnya.

Selanjutnya, kita akan atur tampilan tabel agar sesuai dengan kebutuhan program untuk menampilkan setiap data karyawan yang ditambahkan ke dalam program. Untuk itu, klik kanan pada komponen jTable yang ada pada form, kemudian pilih "Table Contents".

Pada tab "Columns" kita bisa mengganti nama header untuk setiap kolom sesuai dengan kebutuhan kita, serta kita juga dapat menambah jumlah kolom pada tabel. Selain itu kita juga bisa mengatur ukuran "Prefered Size" untuk masing-masing kolom.

Lalu, pada tab "Rows" ubah jumlah baris dari 4 menjadi 0. Jika sudah, klik tombol "Close",

maka seketika tampilan jTable pada form GUI kita akan berubah seperti ini:

Karena kita menggunakan jTable, maka kita perlu mengimpor library import javax.swing.table.DefaultTableModel agaroperasi pada jTable dapat dilakukan. Setelah itu, kita juga perlu membuat objek baru yang bertipe DefaultTableModel. Lihat gambar di bawah ini untuk lebih jelasnya.

package_proyek_1;

import javax.swing.table.DefaultTableModel;

public class FromDataKaryawan extends javax.swing.JFrame;

 DefaultTableModel model;
 
 public FromDataKaryawan(){
  init.Components();
  
  //Membuat Table Model
  model = (DefaultTableModel) jTable1.getModel();
  
  //Menambahkan TableModel ke jTable
  jTable1.setModel(model);
 }

Keterangan program :

E. Menulis Kode Aksi pada Tombol

Sebagaimana lazimnya sebuah tombol pada sebuah program komputer, ketika diklik maka sesuatu akan diproses oleh program tersebut. Dengan kata lain, program akan mengeksekusi sebuah aksi tertentu ketika tombol diklik oleh user. Pada contoh kali ini, aksi yang akan dilakukan ketika tombol "Tambah" ditekan ada dua:

Membaca nilai yang diinputkan
oleh user, baik pada jTextField, maupun pada jComboBox.
Menampilkan data yang telah diisi user ke dalam jTable.

Untuk itu, klik kanan pada tombol "Tambah", lalu pilih "Events ➜ Action ➜ ActionPerformed",

maka secara otomatis method jButtonlActionPerformed() akan terbentuk pada area source code.

private void jButton1ActionPerformed(java.awt.event.ActionEvent evt){
 //TODO add your handling code here;
}

Di dalam method jButtonlAction Performed() inilah kita akan mengetikkan kode program untuk membaca data yang diinputkan oleh user dan menarnpilkannya ke dalam tabel. Namun sebelumnya, kita perlu mendefinisikan variabel-variabel global yang akan digunakan untuk menampung data yang diinputkan oleh user. Perhatikan gambar berikut:

public class FromDataKaryawan extends javax.swing.JFrame{
 
 DefaultTableModel model;
 
 private String NamaLengkap;
 private String TempatLahir;
 private String Pendidikan;
 private String Status;
 private int tgl,bln,thn;

Setelah itu, kita ketikkan kode aksi pada method jButtonlActionPerformed() sebagai berikut:

private void jButton1ActionPerformed(java.awt.event.ActionEvent evt){
 //Membaca dan menyimpan data yang diinputkan oelh user ke dalam variabel
 NamaLengkap = jTextField1.getText();
 TempatLahir = jTextField2.getText();
 tgl = Integer.parseInt(jTextField3.getText());
 bln = Integer.parseInt(jTextField4.getText());
 thn = Integer.parseInt(jTextField5.getText());
 Pendidikan = jComboBox1.getSelectedItem().toString();
 Status = jComboBox2.getSelectedItem().toString();
 
 //Memasukkan data ke dalam jTable
 Object [] data = {NamaLengkap, TempatLahir, tgl, bln, thn, Pendidikan, Status};
 model.addRow(data);
}

Pada kode program diatas bisa dilihat bahwa method getText() digunakan untuk membaca data yang di inputkan oleh user melalui jTextField. Data yang dibaca tersebut secara otomatis bertipe String. Tapi perhatikan pada bagian tgl, bln dan thn, di sana terdapat proses konversi dari tipe String menjadi tipe int menggunakan method parseint() milik objek Integer. Hal ini dilakukan karena data dari field-field tersebut akan disimpan dalam variabel bertipe int. Kemudian, kita juga bisa melihat bahwa terdapat method getSelectedItem() untuk membaca item yang dipilih oleh user melalui komponen jComboBox.

F. Menjalankan Program Melalui Main Class

Kita telah berhasil membuat form berbasis GUI pada kelas FormDataKaryawan. Langkah selanjutnya adalah melakukan instansiasi untuk membuat sebuah objek yang merujuk pada kelas ForrnDataKaryawan. Perhatikan kode program di bawah ini:

package proyek_1;

public class Proyek_1{
 public static void main(String[] args){
  FormDataKaryawan form = new FormDataKaryawan();
  form.setVisible(true);
 }
}