4/8/2010

TEKNIK
ELEKTRONIKA
FT UNP VISUAL JAVA PROGRAMMING
PADANG

Java Education Network Indonesia

Basic Visual Java Component | Muhammad Adri, S.Pd, MT

 TEKNIK ELEKTRONIKA FT UNP PADANG
MODUL PRAKTIKUM PEMROGRAMAN JAVA
Jl. Prof. Dr. Hamka Kampus Pusat UNP Padang, http://teknikelektronika.net, Elearning
http://elearning.teknikelektronika.net

MODUL 3. VISUAL LIST OPTION COMPONENT

Topik : Basic Component Lanjutan Waktu : 180 Menit
Pembina : Muhammad Adri, S.Pd, MT SKS : 2 SKS (Praktikum)

A. Tujuan :
Setelah melaksanakan kegiatan Praktikum ini diharapkan mahasiswa dapat :
1. Memahami konsep pemrograman visual dalam Java
2. Menggunakan objek komponen dasar lanjutan dalam pemrograman visual Java
3. Membangun aplikasi sederhana berbasis pemrograman visual Java

B. Teori Singkat
Pada Modul 1 dan 2 telah dibahas 6 komponen dasar dalam pemrograman visual Java
yaitu Jframe, Jlabel dan Jbutton, sebagai pengenalan konsep dasar pemrograman
visual.
Pada modul ini kita akan mencoba untuk membuat aplikasi pemrograman visual
dengan beberapa tambahan komponen visual yang dapat digunakan sebagai
komponen untuk menginputkan data, berupa data pilihan yang digunakan untuk
membangun opsi/ pilihan kepada usernya.
Dalam kegiatan praktikum ini, mahasiswa akan membangun aplikasi sederhana
dengan objek-objek visual java sebagai berikut :
1. JComboBox, berupa dropdown menu yang digunakan untuk membuat suatu
sistem pilihan yang terdiri dari multioption, namun hanya ada satu pilihan yang
dapat diambil (one option choosen).
Terdapat dua metoda/ event yang bisa digunakan pada combobox ini :
a. Method jComboBox.getSelectedIndex()
Metoda ini digunakan untuk mengambil suatu nilai string yang terdapat
pada opsi pilihan yang disusun berdasarkan index yang dimulai dari
indeks 0.
Contoh :
Terdapat pilihan Program pada suatu form isian dengan menggunakan
sebuah ComboBox, yaitu : D3 Teknik Elektronika, S1 Pend. Teknik
Elektronika dan S1 Pend. Teknik Informatika, maka dapat digunakan :
pilihan = jComboBox1.getSelectedIndex()
switch (pilihan)
case 0 :
prog = "D3. Teknik Elektronik;break;
case 1 :
prog = "S1. Pend.Teknik Elektronika"; break;
case 2 :
prog = "S1. Pend.Teknik Informatika";

Created by : Muhammad Adri, S.Pd, MT 1

 TEKNIK ELEKTRONIKA FT UNP PADANG
MODUL PRAKTIKUM PEMROGRAMAN JAVA
Jl. Prof. Dr. Hamka Kampus Pusat UNP Padang, http://teknikelektronika.net, Elearning
http://elearning.teknikelektronika.net

b. Method jComboBox.getSelectedItem()
Metoda ini digunakan untuk mengambil suatu nilai string yang terdapat
pada opsi pilihan yang proses pengambilannya disesuaikan dengan item
yang dipilih.
Contoh :
Terdapat pilihan Daerah Asal mahasiswa, yang berisi pilihan kab/ kota di
Sumatera Barat, yaitu : Padang,Solok, Bukittinggi, Payakumbuh, Padang
Panjang, Pariaman, Sawahlunto, Painan, Agam, Pasaman, Pasaman Barat,
dll.
Penyelesaian :
if (jComboBox1.getSelectedItem == "Solok"){
asal = "Solok";}
else if (jComboBox.getSelectedItem == "Padang"){
asal = "Padang";

2. JList, adalah komponen pilihan yang mempunyai fungsi yang hamper sama
dengan JComboBox, tapi dalam bentuk tampilan list lengkap dari opsi pilihan
yang tersedia.
Terdapat dua metoda/ event yang bisa digunakan pada listbox ini :
a. Method jList.getSelectedIndex()
Metoda ini digunakan untuk mengambil suatu nilai string yang terdapat pada
opsi pilihan yang disusun berdasarkan index yang dimulai dari indeks 0.
b. Method jList.getSelectedValue()
Metoda ini digunakan untuk mengambil suatu nilai string yang terdapat pada
opsi pilihan yang proses pengambilan nya disesuaikan dengan item yang diplih

C. Kegiatan Praktikum
1. Komponen Visual Lanjutan
Pada kegiatan praktikum awal ini, kita akan mendisain sebuah antarmuka yang
digunakan untuk menampung biodata mahasiswa, antara lain :
a. Nama mahasiswa
b. NIM dan Tahun Masuk
c. Jenis Kelamin
d. Agama
e. Alamat
f. Daerah Asal

Dengan langkah sebagai berikut :

a. Buatlah sebuah interface seperti terlihat pada Gambar 1.

Created by : Muhammad Adri, S.Pd, MT 2

 TEKNIK ELEKTRONIKA FT UNP PADANG
MODUL PRAKTIKUM PEMROGRAMAN JAVA
Jl. Prof. Dr. Hamka Kampus Pusat UNP Padang, http://teknikelektronika.net, Elearning
http://elearning.teknikelektronika.net

Gambar 1. Rancangan interface Data Mahasiswa

b. Pada Latihan sebelumnya, semua komponen visual telah kita atur properties
visual masing-masing, khususnya properties komponen input. Maka pada
kesempatan ini kita menggunakan methoda pengaturan melalui event yang
diberikan pada Form pada saat form diaktifkan.
c. Klik kanan pada Form, pilih Events Window Window Activated, kemudian
ketikkan listing program berikut, setelah private void
formWindowActivated(java.awt.event.WindowEvent evt) :
jTextField1.setText("");
jTextField2.setText("");
jTextField3.setText("");
jTextField4.setText("");
jTextField5.setText("");
jButton1.setText("Proses");
jButton2.setText("Reset");
d. Kemudian deklarasikan variabel-variabel berikut, sebagai variabel global yang
digunakan sebagai variabel penampung data input yang dimasukkan oleh user,
setelah deklarasi method public class :
public class Biodata extends javax.swing.JFrame {
String namaMhs,nim,tm,jk,agama,alamat,asal;
e. Setelah itu deklarasikan value masiing-masing variabel, sebagai berikut :
namaMhs = jTextField1.getText();
nim = jTextField2.getText();
tm =jTextField3.getText();
alamat = jTextField4.getText();
asal = jTextField5.getText();

// statemen if untuk kondisi Jenis Kelamin

if (jRadioButton1.isSelected())
{jk = jRadioButton1.getText();}
else if(jRadioButton2.isSelected())
{jk = jRadioButton2.getText();}

Created by : Muhammad Adri, S.Pd, MT 3

 TEKNIK ELEKTRONIKA FT UNP PADANG
MODUL PRAKTIKUM PEMROGRAMAN JAVA
Jl. Prof. Dr. Hamka Kampus Pusat UNP Padang, http://teknikelektronika.net, Elearning
http://elearning.teknikelektronika.net

// statemen if untuk pilihan agama

if (jCheckBox1.isSelected())
{agama = jCheckBox1.getText();}
else if (jCheckBox2.isSelected())
{agama = jCheckBox2.getText();}
else if (jCheckBox3.isSelected())
{agama = jCheckBox3.getText();}
else if (jCheckBox4.isSelected())
{agama = jCheckBox4.getText();}
else if (jCheckBox5.isSelected())
{agama = jCheckBox5.getText();}
f. Selanjutnya, kita lanjutkan dengan memberikan event terhadap jButton1
(tombol Proses) untuk memperoleh keluaran yang akan ditampung di sebuah
TextArea.
g. Klik kanan pada jButton1, kemudian pilih eventsmouseonMouseClicked
jTextArea1.setText("Nama Mahasiswa\t: "+namaMhs+"\nNim\t:
"+nim+"\nTahun Masuk\t: "+tm+"\nJenis kelamin\t:
"+jk+"\nAgama\t: "+agama+"\nAlamat\t: "+alamat+"\nDaerah
Asal\t: "+asal);
h. Selanjutnya, silahkan anda seting untuk jButton2 (tombol reset), untuk
mereset kembali semua data yang telah dientrikan, dengan menambahkan
events mouseonMouseClicked
jTextField1.setText("");
jTextField2.setText("");
jTextField3.setText("");
jTextField4.setText("");
jTextField5.setText("");
jTextArea1.setText("");
i. Silahkan jalankan program anda, dan lihat hasilnya.

2. JComboBox
Combo Box, adalah salah satu jenis komponen pilihan yang umum digunakan di
dalam suatu aplikasi Visual, dengan tujuan untuk memberikan kemudahan kepada
pengguna aplikasi dalam menentukan satu pilihan dari beberapa pilihan yang
tersedia.
Contoh Latihan :
Misalkan anda akan memasukkan data yang berkaitan dengan daerah asal seorang
mahasiswa, yang pilihannya ditampilkan dalam bentuk pilihan ComboBox, seperti
terlihat pada Gambar 2 berikut :
a. Buatlah sebuah Form baru dan beri nama dengan LatihanDasarComboBox
b. Tambahkan sebuah Label dengan teks : Asal
c. Lengkapi dengan sebuah Combo Box
d. Tambahkan sebuah jButton, dengan teks Proses
e. Jadikan sebuah TextArea sebagai penampung data Output
f. Sehingga pada saat ini tampilan Form anda terlihat seperti pada Gambar 2.

Created by : Muhammad Adri, S.Pd, MT 4

 TEKNIK ELEKTRONIKA FT UNP PADANG
MODUL PRAKTIKUM PEMROGRAMAN JAVA
Jl. Prof. Dr. Hamka Kampus Pusat UNP Padang, http://teknikelektronika.net, Elearning
http://elearning.teknikelektronika.net

Gambar 2. Latihan Dasar Combo Box

g. Untuk menambahkan opsi pilihan ComboBox, Klik kanan pada objek
ComboBox, pilih Properties, sehingga jendela propeties dari ComboBox
muncul.
h. Klik poperties Model, dan isikan data 19 Kab/ Kota yang ada di Sumbar

Gambar 3. Properties Model ComboBox yang telah dilengkapi

i. Untuk menambahkan data pilihan, susunlah seperti terlihat pada Gambar 4.

Created by : Muhammad Adri, S.Pd, MT 5

 TEKNIK ELEKTRONIKA FT UNP PADANG
MODUL PRAKTIKUM PEMROGRAMAN JAVA
Jl. Prof. Dr. Hamka Kampus Pusat UNP Padang, http://teknikelektronika.net, Elearning
http://elearning.teknikelektronika.net

Gambar 4. Memasukkan Pilihan pada Model Combo Box

j. Kemudian silahkan pindah ke jendela Source, kemudian deklarasikan variabel
asal sebagai variabel global class, setelah deklarasi public class
public class BiodataCB extends javax.swing.JFrame {
String asal;

k. Kemudian beri events pada JButton1, dengan cara klik kanan pda JButton1
Events Mouse mouseClicked
Pada saat ini, kita mencoba salah satau metoda pengambilan data yang dapat
digunakan di ComboBox, yaitu getSelectedItem(). Kemudia ketikkan kode
berikut ini :
private void jButton1MouseClicked(java.awt.event.
MouseEvent evt) {
// Definisikan daerah asal
if (jComboBox1.getSelectedItem()== "Solok"){asal =
"Solok";}
else if (jComboBox1.getSelectedItem()== "Padang"){asal =
"Padang";}
else if (jComboBox1.getSelectedItem()== "Padang
Panjang"){asal = "Padang Panjang";}
else if (jComboBox1.getSelectedItem()== "Payakumbuh"){asal
= "Payakumbuh";}
else if (jComboBox1.getSelectedItem()==
"Bukittinggi"){asal = "Bukittinggi";}
else if (jComboBox1.getSelectedItem()== "Batu
Sangkar"){asal = "Batu Sangkar";}
lengkapi dengan data kab/kota lainnya
//Output
jTextArea1.setText("Daerah Asal : "+asal);
}
l. Jalankan aplikasi anda, dan lihat hasilnya.

Tugas Latihan dasar:

Dengan langkah yang sama, ganti method yang digunakan dari GetSelectedItem()
menjadi GetSelectedIndex()

Created by : Muhammad Adri, S.Pd, MT 6

 TEKNIK ELEKTRONIKA FT UNP PADANG
MODUL PRAKTIKUM PEMROGRAMAN JAVA
Jl. Prof. Dr. Hamka Kampus Pusat UNP Padang, http://teknikelektronika.net, Elearning
http://elearning.teknikelektronika.net

3. JList
Dengan menggunakan form seperti pada Combo Box, gunakan method yang sama
dengan latihan di atas, dengan menggunakan komponen JList.

D. Tugas dan Latihan

1. Dengan menggunakan tampilan aplikasi seperti yang terlihat pada Latihan Praktikum
Komponen Visual Lanjutan, lengkapilan Form Biodata mahasiswa tersebut dengan
tambahan opsi dengan menggunakan ComboBox untuk :
a. Program Studi (D3 Teknik Elektronika, S1 Pend. Teknik Elektronika, S1 Pend. Teknik
Informatika
b. Daerah Asal (masukkan pilihan 19 kab/ kota yang ada di Sumbar)

Biografi Singkat Penulis

Muhammad Adri. Menyelesaikan S1 di Jurusan Teknik Elektronika
FPTK IKIP Padang tahun 1999, dan S2 di Jurusan Teknik Elektro
Universitas Gadjah Mada Yogyakarta, dengan konsentrasi Sistem
Komputer dan Informatika (SKI) tahun 2004. Staf pengajar Teknik
Elektronika Fakultas Teknik Universitas Negeri Padang. Kompetensi
inti pada bidang Computer Networking and Security, Computer
Architecture and Organization, Web-Based Application, Online
Learning, Multimedia-Based Instructional Design, dan Knowledge
Community. Penulis aktif, sebagai pemakalah dalam berbagai
Seminar Nasional, instruktur pada model pembelajaran berbasis
Multimedia dan Komputer., IT-Based Education. Penulis Aktif di
Situs IlmuKomputer.com, dengan topik ICT dalam Pendidikan. Memegang Sertifikasi Microsoft,
JENI (Java Education Network Indonesia) 1,2,dan 4. Ketertarikan penulis dalam bidang
implementasi IT dalam dunia pendidikan, menghantarkan penulis sebagai mahasiswa doktoral
Ilmu Pendidikan Pascasarjana Universitas Negeri Padang, terhitung mulai September 2006.

Created by : Muhammad Adri, S.Pd, MT 7