ebook_tutorial pembuatan aplikasi cek berat badan
DESCRIPTION
Ebook_Tutorial Pembuatan Aplikasi Cek Berat Badan Ebook_Tutorial Pembuatan Aplikasi Cek Berat BadanEbook_Tutorial Pembuatan Aplikasi Cek Berat BadanEbook_Tutorial Pembuatan Aplikasi Cek Berat BadanEbook_Tutorial Pembuatan Aplikasi Cek Berat BadanEbook_Tutorial Pembuatan Aplikasi Cek Berat BadanTRANSCRIPT
-
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/