Blog ini akan memberikan kepada Anda beberapa tutorial tentang cara membuat

program java sederhana dengan menggunakan GUI (Graphical User Interface). Mengapa

mengggunakan GUI? Sebab dengan menggunakan GUI maka tampilan aplikasi yang kita

buat akan lebih user friendly dan tentunya sangat menarik. Untuk membuat dan

mengembangkan aplikasi menggunakan Java, kita membutuhkan Java Development Kit

(JDK). JDK adalah suatu paket perangkat yang digunakan untuk membangun aplikasi,

applet, dan komponen menggunakan bahasa Java. Berikut ini perangkat yang ada di dalam

sebuah JDK: development tools , Java runtime environtment (JRE), library, Java DB (Java

relational database), demo aplikasi dan applet, java compiler (javac), java documentation

(javadoc), java archive (jar), serta contoh-contoh program. Selain itu, kita juga memerlukan

Java Development IDE (Integrated Development Environment) seperti NetBeans atau

Eclipse.

Oleh karena itu, sebelum melangkah lebih jauh, Anda harus menginstall Netbeans

atau Eclipse terlebih dahulu . Di dalam tutorial ini kami akan menggunakan NetBeans. Oleh

karena itu, sebaiknya Anda menginstall Netbeans terlebih dahulu. Anda dapat mengunduh

JDK dan NetBeans sekaligus secara gratis di :

http://www.oracle.com/technetwork/java/javase/downloads/index.html . Setelah didownload,

silahkan langsung diinstall.

PROJECT PERTAMA

A. LATAR BELAKANG IDE PROJECT

Di tutorial pertama ini, kami akan memberikan panduan kepada Anda bagaimana

cara membuat program untuk mengecek status berat badan seseorang. Kami memilih ide ini

disebabkan sebagian besar dari kita tidak atau belum mengetahui status kesehatan di tinjau

dari berat badan dan tinggi badan. Kita tidak mengetahui apakah berat badan kita tergolong

kurus, ideal, overweight, ataupun obesitas. Akibat ketidaktahuan tersebut, kita menjadi

kurang perhatian terhadap kesehatan diri dan lalai dalam menjaga kesehatan.

Sebaliknya, ketika mengetahui status berat badan diri kita sendiri, maka kita akan

lebih berhati-hati dalam menjalani aktivitas sehari-hari, baik dari segi pola makan, olahraga,

istirahat/tidur dan sebagainya. Oleh karena itu, perihal mengetahui status berat badan kita

sangat penting untuk diketahui. Program yang akan kita buat ini diharapkan dapat membantu

siapapun yang ingin mengetahui status berat badannya tanpa harus konsultasi ke dokter.

Dengan menggunakan program status berat badan ini, maka status berat badan kita

dapat diketahui. Program ini akan meminta user untuk memasukkan 2 input, yaitu input berat

badan dan input tinggi badan. Setelah itu, user dapat langsung mengecek status berat

badannya dengan mengklik tombol CEK STATUS BB. Setelah tombol tersebut diklik,

maka akan muncul jendela baru yang menunjukkan status berat badan user. Status-status

tersebut di antaranya : kurus, ideal, obesitas, dan overweight.

Penentuan status berat badan ini dihitung dengan rumus-rumus sebagai berikut.

a. Bbi = (tb-100) * 0.9 b. Prosen = (bb-Bbi)/Bbi c. Jika prosen > 20% (0.2) maka statusnya OBESITAS

d. Jika 10% < prosen < = 20% atau 0.1 < prosen < = 0.2 maka statusnya OVERWEIGHT e. Jika 0 =< prosen < = 10% atau 0 =< prosen < = 0.1 maka statusnya IDEAL f. Selain aturan di atas maka statusnya KURUS

Keterangan : bbi : berat badan ideal

bb : berat badan

tb : tinggi badan

B. PEMBUATAN PROGRAM

Langkah pertama untuk membuat program Java adalah membuat project baru,

caranya sebagai berikut.

a. Klik menu File->New Project atau menggunakan Shortcut Ctrl+Shift+N

Maka akan muncul jendela PROJECT WIZARD berikut.

b. Pada bagian Categories pilih Java dan pada bagian Projects pilih Java Application. Klik Next maka akan muncul jendela berikut.

c. Pada bagian Project Name isikan dengan nama program yang akan kita buat, misal CekBeratBadan dan tentukan juga path untuk menyimpan programnya, dalam contoh

ini disimpan di D:\LECTURE\JavaApp. Setelah itu klik Finish, maka akan muncul

jendela project berikut.

d. Pada jendela awal project di atas sudah tersedia struktur program yang lengkap, tinggal kita tambahkan sendiri kode-kode program / perintah lainnya sesuai dengan kebutuhan

pada bagian :

// TODO code application logic here

Setelah membuat project baru, langkah selanjutnya adalah menambah frame

sebagai tampilan program GUI-nya. Caranya sebagai berikut.

a. Double klik nama project hingga terbuka sampai ke paket (package)-nya, lihat yang berwarna biru pada gambar di bawah ini.

b. Klik kanan pada paket utama yaitu paket cekberatbadan dan pilih New ->JFrame Form.

Maka akan tampil jendela berikut.

c. Pada bagian Class Name silahkan beri nama frame sesuai keinginan, misal utama yang menunjukkan frame utama dari program yang akan kita buat. Selanjutnya klik Finish

sehingga tampil jendela frame berikut ini.

Setelah membuat frame utama.java, selanjutnya tinggal menambah komponen-

komponen yang dibutuhkan seperti tombol, kotak input, menu bar dsb. ke dalam frame

tersebut. Komponen-komponen tersebut terdapat pada Palette yang terdapat di kanan jendela

frame.

Untuk menambahkan komponen ke dalam frame dapat dilakukan dengan klik

komponen yang dibutuhkan pada Pallete dan klik ke dalam frame. Silahkan Anda atur

tampilan di frame seperti berikut ini.

Setelah itu, ubah nama komponen-komponen tersebut, caranya klik kanan pada

komponen dan pilih Edit Text.

Ubah seluruh nama komponen tersebut sehingga tampilannya menjadi sebagai berikut.

Anda dapat mengedit tiap komponen, baik itu warna huruf, jenis huruf, ukuran huruf

dsb. melalui Properties. Caranya klik kanan komponen -> Properties -> Pilih bagian yang

akan diedit,.

Selanjutnya kita membuat class baru yang berisi rumus-rumus perhitunganlihat

kembali rumus-rumusnya pada konsep program di depanuntuk menghitung nilai berat

badan dan tinggi badan yang telah diinputkan user. Cara membuat class baru cukup klik

kanan pada paket -> New -> Java Class dan beri nama classnya, misal hitung.

Berikut ini tampilan class hitung.java.

Tambahkan method untuk menghitung bbi dan prosen pada class hitung.java seperti

berikut ini.

Tambahkan kode berikut di dalam method prosen untuk menentukan dan

menampilkan status berat badan.

Anda tidak perlu bingung mengenai apa maksud kode-kode tersebut. Sebab akan

dijelaskan pada pembahasan selanjutnya. Kemudian kita menambahkan 4 frame baru yang

nantinya akan menampilkan status berat badan user, masing-masing menampilkan status

obesitas, overweight, ideal dan kurus.

Berikut ini kami contohkan satu frame saja, yaitu frame untuk menampilkan status

berat badan KURUS. Silahkan Anda buat 3 frame lagi untuk menunjukkan status ideal,

overweight, dan obesitas dengan cara yang sama seperti yang akan kami contohkan dan beri

nama masing-masing dengan ideal,overweight, dan obesitas. Sekarang buatlah frame

baru dan beri nama kurus. Kemudian tambahkan jTextArea ke dalam frame tersebut dan

beri keterangan seperti berikut ini.

Untuk menuliskan keterangan tersebut ke dalam jTextArea caranya dengan klik

kanan jTextArea->Edit Text. Anda dapat mempercantik tampilan komponen-komponen

dalam frame seperti tampilan di jTextArea, jLabel dll melalui Properties. Misal mengubah

jenis huruf, ukuran huruf, warna background dsb.

Selanjutnya, kita memberikan event/aksi pada komponen-komponen di frame. Coba

Anda lihat kembali frame utama.java, di frame tersebut terdapat komponen tombol (button)

CEK STATUS BB. Di sini kita ingin ketika user mengklik tombol tersebut, maka akan

muncul status berat badannya, baik itu, kurus, ideal, overweight ataupun obesitas. Agar status

berat badannnya dapat diketahui, maka input dari user harus di hitung terlebih dahulu di

kelas hitung. Agar input dapat diproses di class hitung.java, maka input tersebut harus dapat

dibaca oleh program. Agar input dari user bisa dibaca program maka input tersebut harus

ditangkap atau disimpan dalam suatu variabel tertentu. Untuk menyimpan nilai input dari

user ke dalam suatu variabel, gunakan kode jTextField.getText(). Teknis

penggunaan kode tersebut ke dalam program akan dicontohkan kemudian.

Sekarang kita akan memberikan event pada tombol CEK STATUS BB. Caranya

double klik tombol tersebut atau klik kanan -> Events ->Action -> actionPerformed.

Maka akan muncul tampilan jButtonActionPerformed berikut.

Agar masukkan dari keyboard terbaca oleh program, tambahkan kode berikut.

Nilai masukan di jTextField1 akan ditangkap dan disimpan di variabel bb. Nilai

masukan di jTextField2 akan ditangkap dan disimpan di variabel tb.

Kemudian panggil class hitung.java melalui proses instansiasi, hubungkan nilai

masukkan (bb dan tb) dengan class hitung.java dan panggil juga method-methodnya dengan

menambahkan kode berikut.

Kode hitung link = new hitung(); merupakan proses instansiasi /

memanggil class hitung.java. Kode link di sini dapat Anda ganti sesuka Anda. Kode

link.bb = bb artinya memasukkan nilai inputan berat badan user yang disimpan di

variabel bb ke dalam class hitung .java dengan menyalin nilai inputan tadi ke variabel bb di

class hitung.java. Dalam contoh ini nama variabel untuk menyimpan nilai berat badan di

class hitung.java sama dengan nama variabel di frame utama yaitu bb. Anda dapat saja

membuat nama variabel yang berbeda, tidak harus sama.

Kode link.tb = tb artinya memasukkan nilai inputan tinggi badan user yang

disimpan di variabel tb ke dalam class hitung .java dengan menyalin nilai inputan tadi ke

variabel tb di class hitung.java. Dalam contoh ini nama variabel untuk menyimpan nilai

tinggi badan di class hitung.java juga sama dengan nama variabel di frame utama yaitu tb.

Kode link.bbi(); dan link.prosen(); masing-masing berfungsi untuk

memanggil method di class hitung.java untuk menghitung besar berat badan ideal (bbi) dan

prosen.

Selanjutnya di class utama yaitu class CekBeratBadan.java tambahkan kode

berikut.

Pertama instansiasi class utama.java terlebih dahulu dengan menuliskan kode utama

link = new utama();. Kode link.setVisible(true); berfungsi untuk

menampilkan jendela GUI class utama.java.

Kode link.setLocationRelativeTo(null); berfungsi untuk menampilkan

jendela GUI tepat di tengah layar.

Jika kode link.setLocationRelativeTo(null); tidak dituliskan maka

jendela GUI-nya akan tampil secara default di sudut kiri atas, tidak di tengah layar. Kode

link.setTitle(PROGRAM MENENTUKAN STATUS BERAT BADAN); berfungsi

untuk memberikan judul jendela GUI.

Selanjutnya kita akan memberikan event pada tombol Situs Kami. Sebelum

memberikan event, kita tambahkan 1 label dulu dan tempatkan label tersebut sesuka Anda,

misal seperti berikut ini.

Jangan lupa kosongkan dulu jLabel tersebut menjadi seperti ini.

Cara mengosongkan tulisan di jLabel tersebut tinggal Anda klik kanan labelnya-

>Edit Text->Tekan Delete. Selanjutnya untuk menambahkan event, double klik tombol

Situs Kami dan tambahkan kode berikut ini.

Program untuk mengecek status berat badan telah kita buat. Coba sekarang kita

jalankan programnya, caranya klik menu Run->Run Project(CekBeratBadan) atau tekan

F6.

Selain itu, untuk menjalankan program yang telah kita buat, Anda dapat mengklik

melalui ikon Run Project seperti berikut.

Setelah Anda Run, maka akan muncul jendela GUI berikut.

Anda tinggal menggunakan program tersebut untuk mengecek status berat badan

Anda. Caranya masukkan besar berat badan dan tinggi badan Anda. Kemudian klik tombol

CEK STATUS BB, maka akan muncul jendela status berat badannnya seperti contoh berikut

ini.

Jika tombol Situs Kami diklik maka akan tampil alamat situsnya.

Sekarang kita akan mempercantik tampilan jendela GUI program dengan

menambahkan background. Sebelum menambahkan background, maka kita ubah dulu layout

dari frame utama.java. Secara default frame yang kita buat menggunakan layout Free

Design. Untuk melihat default layout caranya klik kanan frame->Set Layout, yang dicetak

tebal yaitu Free Design merupakan default layoutnya.

Agar kita dapat menambahkan background jendela GUI maka kita harus mengubah

layout frame menjadi Absolute Layout terlebih dahulu atau dapat juga dengan Null Layout.

Tambahkan jLabel ke dalam frame dan samakan ukuran label dengan frame atau atur

sendiri sesuka Anda. Ukuran label dibatasi oleh garis putus-putus berwarna kuning.

Kemudian klik kanan label -> Properties -> icon

Klik browse, lihat kotak kecil yang ada titiknya 3, maka akan tampil jendela berikut.

Pilih External Image -> Import to Project -> Silahkan pilih gambar yang ingin

Anda jadikan background program dan klik Finish.

Setelah diklik Finish maka akan tampil jendela di mana gambar yang sudah kita pilih

akan tampil.

Klik OK dan di jendela Properties klik Close , maka background program kita akan

berubah sesuai dengan gambar yang telah pilih.

Kelemahan dalam mengubah background dengan cara di atas adalah file gambar yang

kita pilih akan bercampur dengan class-class dalam program kita. Sehingga file dalam paket

utama menjadi kurang rapi dan terkesan berantakan seperti berikut ini.

Oleh karena itu, agar file-file (class-class) di dalam paket utama tidak bercampur

dengan file gambar, sebaiknya kita buat paket baru yang khusus untuk menyimpan file

gambar. Cara membuat paket baru sebagai berikut.

a. Klik kanan paket utama yaitu cekberatbadan b. Pilih New -> Java Package

Maka akan tampil jendela New Java Package berikut.

Di dalam Package Name silahkan beri nama paket baru sesuka Anda, misal

gambar. Klik Finish. Paket baru telah kita buat dengan nama gambar seperti berikut

ini.

Kemudian tambahkan gambar-gambar ke dalam paket gambar tersebut dengan

cara menyalin gambar yang kita inginkan. Berikut ini gambar-gambar yang telah disalin

ke dalam paket gambar.

Untuk menggunakan gambar yang telah kita salin tadi, maka buka kembali

Properties dari jLabel background kita, dan Pilih icon -> Browse hingga tampil jendela

berikut.

Pilih Image within Project, di isian File klik browse dan buka folder gambar

hingga tampil jendela berikut.

Pilih salah satu gambar yang diinginkan, klik OK di jendela Select Image File,

klik OK lagi dan klik Close di jendela Properties. Sekarang background program kita

akan berubah sesuai dengan gambar yang kita pilih.

Selanjutnya, kita akan menambah submenu di menu Berkas. Caranya sebagai

berikut.

a. Di jendela Pallete Pilih Swing Menus -> Menu Item. b. Arahkan kursor ke menu Berkas hingga menu Berkas dibatasi oleh garis

putus-putus warna kuning seperti berikut ini.

c. Jika sudah muncul garis pembatas tersebut baru diklik, maka akan tampil

seperti berikut ini.

Sekarang kita akan menambahkan 2 submenu dari menu Berkas yaitu Bersihkan

dan Keluar. Submenu Bersihkan ini nantinya berfungsi untuk membersihkan 2 layar

masukan. Sedangkan submenu Keluar berfungsi untuk memberikan konfirmasi jika ingin

keluar dari program. Sebelumnya kita tambahkan 2 Menu Item ke dalam menu Berkas

dan kemudian ubah dulu nama masing-masing jMenuItem-nya menjadi Bersihkan dan

Keluar. Untuk mengubah nama seperti biasanya cukup klik kanan komponennya dan

klik Edit Text.

Setelah keduanya di ubah namanya, selanjutnya kita memberikan event kepada

kedua submenu tersebut. Pertama kita akan memberikan event untuk submenu

Bersihkan. Caranya seperti biasa sebagai berikut.

a. Klik kanan komponennya, yaitu submenu Bersihkan. b. Pilih Events -> Action -> actionPerformed. c. Dapat juga dengan cara double klik pada submenu Bersihkan.

Setelah itu, tambahkan kode seperti berikut ini.

Mengapa menggunakan kode jTextField1 dan jTextField2? Sebab kita

ingin menghapus tulisan di kotak input data bb dan tb, dimana bb dan tb masing-masing

berada di jTextField1 dan jTextField2.

Sekarang Anda dapat mencoba submenu Bersihkan ini dengan menjalankan

programnya. Kemudian Anda masukkan input bb dan tb Anda. Setelah itu, coba Anda klik

submenu Bersihkan, maka tulisan berupa angka di kotak input bb dan tb akan terhapus.

Selamat mencoba!:D

Selanjutnya kita akan memberikan event kepada submenu Keluar. Caranya sama

seperti memberikan event pada submenu Bersihkan. Hanya berbeda dalam memberikan

perintah (coding) event-nya. Silahkan tambahkan kode berikut ini.

Kita juga dapat memberikan Shorcut untuk submenu yang kita buat. Caranya double klik

pada tulisan shorcut di sebelah kanan submenu.

Sehingga muncul jendela berikut.

Klik di isian Key Stroke dan tekan salah satu tombol di keyboard, misal tombol B.

Setelah itu, pilih kombinasi shortcut yang diinginkan di dalam jendela tersebut, misal Ctrl

seperti berikut ini.

Klik OK sehingga submenu Bersihkan mempunyai shorctcut Ctrl+B. Lakukan hal

yang sama untuk memberikan shortcut submenu Keluar.

Sekarang, coba Anda jalankan programnya dan klik submenu Keluar. Setelah Anda

klik submenu keluar, maka akan tampil jendela konfirmasi keluar berikut.

Jika Anda klik OK maka program akan tertutup (Keluar). Jika Anda klik Cancel

maka jendela program tetap terbuka dan Anda dapat menggunakan programnya lagi. . Jika

Anda telah membuat shortcut untuk submenu Keluar, misal dengan shortcut Ctrl+Q, maka

untuk keluar Anda dapat menggunakan shortcut tersebut . Selamat mencoba, semoga Anda

semakin bersemangat untuk belajar Java GUI:D.

Agar program kita tambah menarik dan cantik, sebaiknya kita berikan ikon untuk

masing-masing submenu. Sebelum memberikan ikon di submenu, maka kita harus

menyiapkan ikonnya dulu. Dalam tutorial ini kami hanya memberikan contoh ikon dengan

format .jpg. Silahkan Anda coba sendiri untuk format-format yang lain.

Yang perlu kita ingat, gambar ikon yang kita butuhkan ukuran pixelnya tidak boleh

besar. Sebab tempat untuk menempatkan ikon di submenu ukurannya kecil. Oleh karena itu,

kita harus mengedit ukuran gambarnya terlebih dahulu menggunakan program aplikasi

pengolah gambar seperti CorelDraw, Photoshop, Picasa, Microsoft Office Picture Manager

dll. Kami akan menggunakan MS. Office Picture Manager untuk mengedit ukuran gambar,

mengingat program aplikasi ini cukup mudah dan praktis digunakan. Silahkan Anda dapat

memilih sendiri program aplikasi pengolah gambar sesuai keinginan Anda. berikut ini tempat

untuk memberikan ikon pada submenu (di kotak warna biru).

Selanjutnya kami akan memberikan tutorial kepada Anda tentang bagaimana

mengubah ukuran gambar agar cocok dijadikan gambar ikon di submenu dengan

menggunakan MS. Office Picture Manager. Berikut ini langkah-langkahnya.

a. Buka dulu program aplikasi MS. Office Picture Manager

b. Buka salah satu gambar yang ingin Anda jadikan ikon.

c. Klik Edit Pictures

Maka akan tampil jendela Edit Pictures di sebelah kanan gambar.

d. Klik Resize, maka akan tampil jendela Resize berikut.

e. Ubah ukuran pixel gambar dibagian Custom width x height menjadi 20 x 20

f. Klik OK, maka ukurannya menjadi kecil.

g. Setelah itu simpan gambar, misal dengan nama ikon.

Selanjutnya kita akan memberikan gambar ikon dengan gambar yang ukurannya telah

diperkecil tadi. Caranya salin terlebih dahulu gambar yang telah diperkecil ke paket

cekberatbadan.gambar.

Kemudian double klik kotak ikon yang berada di sebelah kiri submenu atau dapat juga

dengan klik kanan -> Properties ->icon

Maka akan tampil jendela berikut.

Di bagian Package pilih paket cekberatbadan.gambar

Di bagian File klik Select dan pilih gambar yang akan kita jadikan ikon, yaitu ikon.jpg

Setelah itu, klik OK maka submenu Bersihkan sudah memiliki ikon seperti tampilan

berikut.

Silahkan Anda tambahkan sendiri ikon untuk submenu Keluar dengan cara yang

sama seperti di atas. Selamat mencoba, tetap semangat! Java GUI memang asyik!:D.

Selanjutnya, coba sekarang Anda jalankan programnya, maka submenu Bersihkan sudah

memiliki ikon seperti tampilan berikut.

Sampai di sini program untuk mengecek status berat badan sudah jadi. Namun demikian,

program yang kita buat belum bersifat mobile dan portable. Mengapa demikian? Sebab,

ketika kita ingin menjalankan program tersebut, maka kita HARUS membuka NetBeans

terlebih dahulu. Agar program aplikasi menjadi mobile dan portable, artinya dapat dibuka

secara mandiri yaitu cukup dengan double klik saja program akan jalan, maka kita harus

membuat file Executable-nya. File executable program java berekstensi .jar.

Membuat file executable program java caranya sangat mudah. Cukup dengan tekan F11

atau klik menu Run -> Build Project atau dapat juga melalui ikon Build Project bergambar

palu seperti tampilan berikut ini.

Kemudian akan tampil jendela Build Project berikut ini.

Klik Clean and Build maka proses pembuatan (building) project akan berjalan.

Tunggu sampai proses building selesai. Setelah building project selesai, bukalah

folder (path) di mana Anda menyimpan file project-nya seperti tampilan berikut.

Kemudian bukalah folder dist untuk melihat file executable program yang telah kita

building. Secara default file .jar tersimpan di dalam folder dist. Berikut ini tampilan di dalam

folder dist yang di dalamnya terdapat file executable program yang telah kita building.

Sekarang Anda tidak perlu membuka NetBeans untuk menjalankan program java

yang telah Anda buat. Cukup dengan double klik file .jar tersebut maka program akan jalan.

Kami rasa sampai di sini dulu tutorial java GUI untuk membuat program menentukan

status berat badan seseorang. Semoga program ini dapat memberikan manfaat kepada kami

pribadi pada khususnya dan para pembaca pada umumnya.

Jangan lewatkan tutorial menarik selanjutnya. Jangan lupa pula untuk selalu

mengunjungi blog ini sebagai sahabat setia Anda untuk belajar membuat program java. Di

blog inilah Anda akan merasakan nikmat dan asyiknya belajar java.:D Java GUI memang

asyik! :D. Belajar java paling asyik ya hanya di www.javaasyik.wordpress.com. Sekian.

Sampai jumpa di tutorial selanjutnya.

http://www.javaasyik.wordpress.com/