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.




34 Responses to "Membuat Aplikasi GUI Sederhana pada Netbeans IDE"

  1. Keren gan , ane baru tau artikel ini . Makasih infonyaa sangat bermanfaat

    BalasHapus
  2. dari dulu pengen belajar pemograman, tapi masih gak ada waktu luang buat belajar

    BalasHapus
  3. wah lumayan nih nambah lagi wawasan ane ttg android :D

    BalasHapus
  4. Silakan gan, kapan2 mampir lagi ya kesini, hehe

    BalasHapus
  5. ijin bookmark gan , buat bahan belajar di bulan ramadhan :D

    BalasHapus
  6. Jika ingin belajar java, kapan2 mampir lagi gan ke blog saya, hehe

    BalasHapus
  7. waduh, udah pada lupa nih bahasa java ane wkwk

    BalasHapus
  8. Mantap gan materi pembelajarannya, susah sih sebenernya.

    BalasHapus
  9. Iya, karena java juga turunan dari bahasa C

    BalasHapus
  10. wah berguna banget nih gan buat ane selaku user blackberry

    BalasHapus
  11. Wih..Mantap Nih artikelnya.

    Tapi sayang di sayang..saya gak pakai Blackberry dakota :"v jadi cuman ikut read aja gan!
    ehehehe :'v

    BalasHapus
  12. Silakan dicoba gan, jika ada kerusakan pada hp BB agan.

    BalasHapus
  13. kalau vivo y51l ane coba stop pas lagi dirootnya gan, ane coba lagi tetap gk bisa... kira2 knp ya?

    BalasHapus
  14. kayanya dari koneksi internetnya gan, atau coba update KingRoot nya ke Versi terbaru, ada di blog saya.

    BalasHapus
  15. thanks ya gan tutornya, jd tambah ngerti ane

    BalasHapus
  16. mntap gan,, saya dari duluingin instal android studio tp spekga kuat..
    trpaksa memakai adobe animate membuat aplikasi android

    BalasHapus
  17. makasih gan tutorialnya, bermanfaat sekali

    BalasHapus
  18. nice info gan !
    https://linux-addictz.blogspot.co.id/

    BalasHapus
  19. pas banget nih, udah muter-muter nyari artikel buat flashing BB Torch 9810 nggak ketemu-ketemu, akhirnya nemu juga di ini blog

    BalasHapus
  20. Silakan gan, kapan-kapan mampir lagi kesini, hehe

    BalasHapus
  21. Ternyata gak terlalu berbeda ya dengan Kode C, boleh ni di coba hehe. Nice Share ^_^

    BalasHapus
  22. Fungsinya agar android kita aksesnya jadi bebas, kita bisa mengedit semua sistem yang ada pada android, bahkan kita bisa mengubah logo, merek, serta informasi yang ada di ponsel tersebut, seperti versi OS, jenis HP, nama merek dll. dan bisa digunakan untuk Hacking

    BalasHapus
  23. Fungsi root itu buat apa ya gan ana gaptek tentang android hehe

    BalasHapus
  24. Itu kingRootnya versi berapa gan, coba download yang versi terbaru di blog saya. atau koneksinya kurang stabil gan.

    BalasHapus
  25. asus zenfone C gk work pake Kingroot gan gimana inih solusi nya???

    BalasHapus