Membuat Aplikasi GUI Sederhana pada Netbeans IDE


Assalamualaikum Warahmatullahi Wabarakatuh.

Bagi kalian yang ingin mencoba membuat sebuah aplikasi berbasis GUI (Graphic User Interface) yang sederhana dan mudah dipelajari, khusus bagi pemula yang ingin memahami dasar-dasar pembuatan aplikasi berbasis GUI pada Netbeans.


Aplikasi yang akan kita buat itu cukup sederhana, fungsinya untuk mendapatkan input berupa nama dari user lalu menampilkan hasilnya berupa sapaan seperti "Hello Wildan"
atau "Selamat Datang Nama Kamu".  Project tersebut menggunakan Class JFrame untuk menampung Layout dan Source Code Java yang nantinya akan di kompilasi/build menjadi file berekstensi .jar.

Tahap Pembuatan Aplikasi GUI

1) Buat sebuah project baru pada Netbeans IDE, pilih Categories Java lalu Projects Java Application.

Java Application Project

2) Berinama Project tersebut dan hilangkan ceklis pada Create Main Class karena kita akan menggunakan Class JFrame. lalu klik Finish.

Memberi Nama pada Project Tersebut

3) Buat Class JFrame dengan cara, Klik kanan pada <default package> setetalh itu pilih New > JFrame Form.

Membuat Class JFrame Form

4) Berinama Class dan Package tersebut setelah itu klik Finish.

Memberi nama pada Class dan Package

5) Berikut ini merupakan tampilan JFrame yang masih kosong, disamping kanan terdapat Pallete, yaitu kumpulan komponen yang bisa kita pasang pada layout JFrame dan dibawahnya terdapat Properties, yang berfungsi untuk mengubah/mengganti artibut pada komponen, seperti nama,ukuran,warna, dll.

Tampilan JFrame yang masih kosong

6) Komponen yang akan kita gunakan yaitu :
  • 2 Buah JLabel : Berfungsi untuk menampilkan Text/keterangan 
  • 2 Buah JTextField : Digunakan untuk mengambil Input dari User
  • 1 Buah JButton : Berfungsi untuk mengeksekusi sesuatu pada program yang kita buat
Seperti berikut ini.

Komponen yang akan digunakan

7) Pasang komponen pada Frame dengan cara Drag and Drop menggunakan mouse, lalu susun, kurang lebih seperti ini.

Menyusun komponen pada Frame layout

8) Ubah nama variable pada komponen JTexField1, JTextFileld2 dan JButton, dengan cara Klik kanan pada salah satu komponen lalu pilih Change Variable Name.

Mengubah Nama Variable

Ubahlah nama variable pada masing komponen menjadi seperti ini :
  • JTextField1 > nama_depan
  • JTextField2 > nama_belakang
  • JButton > submit
Kalian bisa melihatnya disini.

Nama Variable yang sudah di Ubah

9) Setelah itu ubah Atribut pada setiap komponen, Dengan cara : Klik pada salah satu komponen, seperti Jlabel, JtextField dan JButton, lalu lihat pada bagian Properties disana kalian ubah artibutnya pada setiap komponen yang terpasang, seperti ini.

Atribut yang akan diubah pada setiap komponen

Hilangkan kata pada kedua JTextFileld1 dan 2, ubah font sesuai keinginan kalian, dengan cara klik tombol (...), ubah nama pada Jlabel1 menjadi nama depan dan JLabel2 menjadi nama belakang, terakhir JButton menjadi Submit, Contohnya seperti ini.

Atribut pada komponen yang sudah di ubah

10) Setelah urusan design telah selesai, sekarang kita akan beralih pada Source Code, Klik Source yang ada di samping design.

Mengubah dari Mode Design ke Mode Source

Maka tampilannya akan seperti ini.

Tampilan Source Code pada Preject

11) Pertama kita akan mengimport package JOptionPane, fungsinya untuk menampilkan pesan berupa dialog.

import javax.swing.JOptionPane;

Agar lebih jelas, coba perhatikan gambar ini.

Mengimport paket data JOptionPane

12) Agar Tombol tersebut bisa di eksekusi, Klik kanan pada Tombol Submit > Events > Action > actionPerformed, fungsinya agar saat kita mengklik tombol tersebut, maka akan terjadi sesuatu.

Memberikan ActionEvent pada Tombol Submit

Setelah itu akan muncul Source Code untuk tombol tersebut, seperti berikut ini.

Pasang Source Codenya disini

Yang saya tandai itu merupakan dimana kita akan memasang Source Code untuk menjalankan program saat tombol Submit di Klik.

13) Masukan Kode/Script berikut ini pada method submitActionPerformed.

private void submitActionPerformed(java.awt.event.ActionEvent evt) {                                       
       String ND = nama_depan.getText();
       String NB = nama_belakang.getText();
       JOptionPane.showMessageDialog(this, "Selamat Datang "+ND+" "+NB);
    } 

Penjelasan

Disana terdapat dua buah variable String, yaitu ND untuk nama depan dan NB untuk nama belakang, kedua variable tersebut mengambil value/nilai dari input user yang terdapat pada komponen nama_depan(JTextFIeld1) dan nama_belakang(JTextFIeld2).

Pada JOptionPane terdapat pesan <"Selamat Datang"
yang sudah di set secara default, kalian bisa mengubahnya dengan kata2 yang lain, lalu kata tersebut di gabungkan dengan nilaivalue yang terdapat dari variable ND dan NB, tanda +" "+ berfungsi untuk menjaga jarak spasi antara nama depan dan nama belakang.

14) Jalankan Program tersebut, Tekan tombol F6 atau tekan tombol run.

Klik Run untuk menjalankan Program

Hasilnya akan seperti ini, lalu masukan nama depan dan nama belakang kalian.

Aplikasi dijalankan

Klik Tombol Submit, maka akan muncul pesan seperti berikut ini.

Output yang berupa pesan Dialog

15) Tadi kita sudah mengetes project tersebut, dan sekarang kita akan mengkompilasi Project tersebut menjadi file berekstensi .jar, dengan cara klik tombol Build Main Project atau Clean and Build Main Project.

Mengkompilasi Menjadi File .jar

Setelah di build, file .jar tersebut tersimpan pada folder dist (), folder tersebut terletak dimana kalian menyimpan project tersebut, seperti contoh dibawah ini.

Lokasi penyimpanan file .jar

Klik 2x pada file tersebut untuk menjalankan aplikasi yang telah kalian buat.

dan untuk pengguna linux, kalian bisa menjalankan file .jar dengan cara, buka terminal, lalu masuk sebagai root, setelah itu masuk pada direktori dimana kalian menyimpan file ,jar tersebut, terakhir ketikan perintah java -jar nama_file.jar, seperti berikut ini.

root@TechnoArt:/home/admin77/NetBeansProjects/SimpleApp/dist# java -jar SimpleApp.jar

Sekian tutorial dari saya, mengenai cara pembuatan aplikasi GUI menggunakan java Netbeans, jika sudah paham, silakan ubah project tersebut dengan kreasi dan kreativitas kalian sendiri, jika ada yang ingin ditanyakan, silakan hubungi saya atau isi kolom komentar dibawah ini dan jangan lupa untuk Subscribe untuk mendapatkan Update terbaru dari blog ini, sekian,

Wassalamualaikum Warahmatullahi Wabarakatuh.

Wildan M Athoillah
Wildan M Athoillah Blogger dan spesialis pembuat aplikasi android.