MODUL PRAKTIKUM

PEMROGRAMAN VISUAL
Manajemen Informatika

LABORATORIUM KOMPUTER
FAKULTAS ILMU KOMPUTER
UNIVERSITAS SRIWIJAYA
2015
 Universitas Sriwijaya
LEMBAR PENGESAHAN SISTEM MANAJEMEN MUTU
Fakultas Ilmu Komputer
MODUL PRAKTIKUM ISO 9001:2008
Laboratorium

No. Dokumen ……. Tanggal 4 Juni 2011

Revisi 0 Halaman 2 DARI 66

MODUL PRAKTIKUM

Mata Kuliah Praktikum : Pemrograman Visual

Kode Mata Kuliah Praktikum :

SKS :2

Program Studi : Manajemen Informatika

Semester : 4 (Gen

DIBUAT OLEH DISAHKAN OLEH DIKETAHUI OLEH

TIM DOSEN MANAJEMEN

TIM LABORAN LABORATORIUM KEPALA LABORATORIUM
INFORMATIKAFASILKOM
FASILKOM UNSRI
UNSRI
 Daftar Pustaka

66
 Tujuan Umum

Setelah menempuh mata kuliah Pemrograman Visual I, Mahasiswa

mampu membuat pemrogram dengan menggunakan java kemudian
mengembangkan kedalam pemrograman v isual II.

Gambar 12.4 Running Program slider

Tug as

Buat contoh program yang menggunakan JFileChooser.

4 65
 Kemudian ketikkan Coding berikut: Tujuan Khusus

private void jSlider1StateChanged(javax.swing.event.ChangeEvent evt) { 1. Mengenal IDE NetBean.

int hasil = jSlider1.get Value(); 2. Jlabel, JtextField, Jbutton, JOptionPane
eHasil.setText(String.valueOf(hasil)); 3. JPasswordField dan JformattedField
} 4. Co mbo Bo x, Rad io Button dan Button Group
5. Check Bo x dan Text Area
6. JList dan JscrollPane
 Lakukan hal yang sama pada Jslider2, seperti pada Jslider1. 7. Proses Menambah, mengubah dan menghapus data pada ListBo x, Text Area
 Klik 2 X Button Set Nilai dan ket ikkan dan Co mbo Bo x
8. Tabbed Pane dan Panel
private void btSetNilaiActionPerfo rmed(java.awt.event.ActionEvent evt) { 9. Scoll Bar dan Jspinner
jSlider1.setValue(80); 10. JmenuBar, Jmenu, JmenuItem dan Jseperator
} 11. JpopupMenu dan JtoolBar
12. Jslider dan JFileChooser

 Klik 2 X Button Ubah Min Max dan ketikkan

private void btUbahActionPerformed(java.awt.event.ActionEvent evt) {

jSlider1.setMaximu m(70);
jSlider1.setMinimu m(20);
}

 Klik 2 X Button Hapus Label Nilai dan ketikkan

private void btHapusActionPerformed(java.awt.event.ActionEvent evt) {
jSlider1.setPaintLabels(false);
jSlider1.setPaintTicks(false);
}

 Running Program:

64 5
 Daftar Isi JSlider Name Jslider
Minimu m 0
Maximu m 100
MinorTickSpacing 10
1. Kata Pengantar.............................................................................................. 3 MayorTickSpacing 10
2. Tujuan Umu m............................................................................................... 4 Paint Labels True
3. Tujuan Khusus.............................................................................................. 5
PaintTick True
4. Daftar Isi....................................................................................................... 6
PaintTrack True
5. Mengenal IDE NetBean................................................................................ 7
Orientation Horizontal
6. Jlabel, JtextField, Jbutton, JoptionPane........................................................ 16
SnapToTick False
7. JPasswordField dan JformattedField............................................................ 21
8. Co mbo Bo x, Rad io Button dan Button Group.............................................. 24 Value 10
9. Check Bo x dan Text Area............................................................................. 29 JSlider Name Jslider
10. JList dan JscrollPane..................................................................................... 33 Minimu m 0
11. Proses Menambah, mengubah dan menghapus data pada ListBo x, Text Area Maximu m 100
dan Co mbo Bo x............................................................................................ 38 MinorTickSpacing 10
12. Tabbed Pane dan Panel................................................................................. 43 MayorTickSpacing 10
13. Scoll Bar dan Jspinner.................................................................................. 46 Paint Labels True
14. JmenuBar, Jmenu, JmenuItem dan Jseperator.............................................. 52 PaintTick True
15. JpopupMenu dan JtoolBar............................................................................ 57 PaintTrack True
16. Jslider dan JFileChooser............................................................................... 61 Orientation Vertical
17. Daftar Pustaka............................................................................................... 66 SnapToTick False
Value 10

 Agar saat slider di geser nilai tampil pada text field Hasil, maka klik kanan
pada slider pilih Events Change StateChanged.

Gambar 12.3 Events State Change pada Slider

6 63
MayorTickSpacing : mengatur nilai maximu m garis slider MODUL I
Paint Labels : menamp ilkan/tidak n ilai/ukuran pada slider
PaintTick : menamp ilkan/tidak garis nilai/ukuran pada slider MENGENAL IDE NETBEANS
PaintTrack : menamp ilkan/tidak t racking nilai/ukuran pada slider
Orientation : Orientasi slider (Harisontal / Vertical) Tujuan :
SnapToTick : mengatur snap/kecendrungan pilihan pada slider
 Mahasiswa Dapat membuat project java dengan NetBean
Value : mengatur nilai sekarang pada slider
 Mahasiswa mampu menggunakan membuka, menyimpan dan
menulisakan coding java dalam NetBean
Praktikum

 Buatlah form seperti dibawah ini, yang terdiri dari 3 Button, 1 Label, 1
TextField dan 2 Slider. Tug as Pendahuluan
1. Jelaskan apa itu IDE Net Beans..!
2.
Jelaskan Swing..!
3.
Jelaskan keuntungan menggunakan IDE Net Beans.!

Dasar Teori

NetBeans 6 adalah versi stabil terbaru dari IDE Netbeans, yang dirilis oleh
Sun Microsystem pada akh ir November 2008.

Ada tambahan yang signifikan dalam Netbeans 6.0.1 ini. Khususnya

penyempurnaannya pada modul Matisse GUI Builder (Project Matisse) untuk
melakukan perancangan GUI yang memakai konsep layout baru secara mudah.
Konsep layout yang boleh dikatakan mengubur berbagai macam layout-manager
yang tersedia, baik dari paket AWT maupun JFC/Swing.
Gambar 12.2 Contoh Program Slider
Komponen Properties Isi
 Ubah propertiesnya Name
Label menjadi seperti berikut: Jlabel Praktikum
Text Hasil
JTextField Name eHasil  Klik Start Program Net Beans NetBean IDE 6.5.
Text (Kosongkan)
JButton Name btSetNilai
Text Set Nilai
JButton Name btUbah
Text Ubah Min Max
JButton Name btHapus
Text Hapus Label Nilai

62 7
 MODUL XII
SLIDER dan FILE CHOOSER

Tujuan :
 Mahasiswa dapat menggunakan pallete Jslider dan JFileChooser dalam
NetBean.

Tug as Pendahuluan
1. Jelaskan Slider dan File Chooser..!
2. Kerjakan Praktiku m pada Modul 12..!

Dasar Teori
Gambar 1. 1 Memulai NetBeans
Tunggu sebentar..

Slider
Gambar 1. 2 Net Beans 6.5.1
Gambar 12.1 Ko mponen Slider
Lalu akan muncul tampilan awal halaman welco me. Seperti dibawah
Slider berfungsi seperti scrollbar, namun terdapat beberapa properti tambahan, sbb:
Minimu m : mengatur nilai minimu m slider
Maximu m : mengatur nilai minimu m slider
MinorTickSpacing : mengatur nilai minimu m garis slider

8 61
 private void formMousePressed(java.awt.event.MouseEvent evt) {
jPopupMenu1.show(this,evt.getX(), evt.getY());
}

 Running Program:

Gambar 1. 3 Halaman Awal Net Beans

Gambar 11.6 Running Program Popup Menu
Jadi pertama-tama dalam membuat program java kita terlebih dahulu harus
membuat proyek.
Tug as
 Jalankan menu File| New Project (atau Ct rl+Sh ift+N). Untuk membuka dialog
New Pro ject
Buatlah program seperti di atas dan gunakan ToolBar untuk menampung Button
tersebut.

Gambar 1. 4 New Project Net Beans

60 9
 Dalam dialog pilih kategori Categories=Java, Pro jects=Java Application.
Lalu klik Next.

Klik 2 X

Gambar 11.4 Membuat Even On Click pada Menu Item

 Kemudian ketikkan coding berikut:

private void popBersihActionPerformed(java.awt.event.ActionEvent evt) {

eNIM .setText("");
Gambar 1. 5 New Java Appication eNAMA.setText("");
areaKeterangan.setText("");
 Pada langkah diatas, pilih terleb ih dahulu lokasi proyek. Klik pada tombol
}
Bro wse di sebelah kanan isian Pro ject Location. Maka akan ditampilkan dialog
Select Project Location  Agar pada saat running program PopUp Menu tampil maka klik Form
 Lalu isi nama proyek anda. Perhatikan bahwa Proyek Folder secara otomatis kemudian pilih tab Evens mousePressed
akan diset sesuai dengan nama proyek.
 Centang pada pilihan Set As Main Project dan centang juga pada pilihan
Create Main Class. Isikan nama main-class terserah anda.
Terakhir, klik pada tombol Fin ish.

Di dalam netbeans akan dibuka secara otomatis file utama Java bernama
Main.java.

Gambar 11.5 Properties Mouse Pressed pada Form

 Klik kemudian ketikkan coding berikut:

10 59
Praktikum

Gambar 11.2 Contoh Program Tool Bar dan Popup Menu

 Buat Form Baru seperi da atas dan tambahkan PopUp Menu ke dalam form Gambar 1. 6 Main.java dalam NetBeans
tersebut
 Klik kanan pada JpopUpMenu dan pilih Add Form Palette Menu Item Membuat Form B aru pada NetBeans
seperti gambar d i bawah ini. Lakukan 2 x. Untuk membuat form baru pada Net Beans tidaklah sulit, cobalah cara sbb:
 Klik kanan pada salah satu folder (misal Belajar Java)
 Klik New
 Klik JFrame Form

Gambar 11.3 Add Menu Item pada Popup Menu

 Ganti Name men jadi popBersih dan Text men jadi Bersih pada Menu Item1
 Ganti Name men jadi popTutup dan Text men jadi Tutup pada Menu Item2
 Untuk mengisikan coding klik 2 x pada PopBersih Menu Item.

Gambar 1. 7 Membuat Form Baru dalam NetBeans

58 11
 Pilih nama class untuk form anda (misal: Percobaan) MODUL XI
 Klik Fin ish
POPUP MENU dan TOOL BAR

Tujuan :
 Mahasiswa dapat menggunakan pallete JpopupMenu dan JtoolBar
dalam NetBean.

Tug as Pendahuluan
1.
Jelaskan PopUp Menu dan Tool Bar..!
2.
Kerjakan Praktiku m pad Modul 11..!

Gambar 1. 8 Menyimpan Form Baru

Dasar Teori
 Pada form editor terlihat sbb;

Popup Menu

Tool Bar

Gambar 11.1 Ko mponen Tool Bar dan Popup Menu

Gambar 1. 9 Tampilan Form Kosong pada NetBeans

12 57
  Untuk menamp ilkan Source Code Windows: Klik tab percobaan (disebelah
form percobaan).

Gambar 10.6 Running Perogram Menu

Tug as

Buat program untuk menghitung Luas dan Keliling dari Persegi Panjang, Segitiga
dan Lingkaran.
Gambar 1. 10 Source Code pada NetBeans

 Pada Palette Swing Controls Pilih JButton

 Letakkan JButton tersebut pada Form

Gambar 1. 11 Meletakkan JButton

 Pada properties Text ubah men jadi Pesan

 Klik kanan pada JButton pada explorer (d ibawah [JFrame])
56 13
 Klik Change Value Name

Klik 2 X

Gambar 1. 12 Langkah Mengubah Nama Button

 Ubah menjadi bSimpan

 Klik OK

Gambar 10.4 membuat Event On Clik pada Menu Item

 Kemudian ketikkan Coding berikut:

private void
meItKaliActionPerformed(java.awt.event.ActionEvent evt) {
int Data1 = Integer.parseInt(eData1.get Text());
Gambar 1. 13. Rename Nama Button int Data2 = Integer.parseInt(eData2.get Text());
 Klik 2 kali pada Button Simpan, ubah program pada bagian: int Hasil;
Hasil = Data1*Data2;
private void eHasil.setText(String.valueOf(Hasil));
bSimpanActionPerformed(java.awt.event.ActionEvent evt) { }
// TODO add your handling code here:
 Lakukan hal yang sama pada Menu Item Bag i, Tambah dan Kurang.
}
 Running Program sbb:
Sehingga menjadi:

private void
bSimpanActionPerformed(java.awt.event.ActionEvent evt) {
JOptionPane.showMessageDialog(null, "Hello","Pesan",
JOptionPane.INFORMATION_MESSAGE);
}

14 55
 Text (Kosongkan) Running Program :
TextField Name eData2
Text (Kosongkan)
TextField Name eHasil
Text (Kosongkan)

 Untuk menambah atau membuat menu pada Menu Bar sbb:

Klik kanan pada Menu Bar pilih Add Menu

Gambar 1. 14 Running Program Modul 1

Tug as Praktikum

Buatlah program seperti di atas yang menampilkan tulisan “Saya Belajar

NetBeans ”.

Gambar 10.3 Add Menu pada Menu Bar

Kemudian ubah Name dan Text pada properties sesuai dengan tabel diatas.

 Untuk menambah atau membuat Menu Item pada Menu sbb:

Klik kanan pada Menu pilih Add Form Pallete Menu Item

Gambar 10.4 Add Menu Item pad Menu

Kemudian ubah Name dan Text pada properties sesuai dengan tabel diatas.
 Pada saat Menu Item Kali di klik maka Text Field hasil akan diisi perkalian
antara Data1 dan Data2, maka klik 2 kali pada meItKali.
54 15
 MODUL II  Buatlah desain Form seperti pada gambar berikut:

LABEL, TEXTFILELD dan BUTTON

Menu Bar
Tujuan : Menu
 Mahasiswa menggunakan Label, TextField dan Button dalam NetBean Separator

Menu Item

Tug as Pendahuluan
1. Jelaskan Tentang Label, Button dan TextField..!
2. Kerjakan Praktiku m modul 2.

Gambar 10.2 Contoh Form Menu, Menu Bar, Menu Item dan Separator

Dasar Teori Berikut ini daftar ko mponen beserta propertiesnya:

Komponen Properties Isi

JmenuBar Name JmenuBar1
Jmenu Name menFile
Text File
Jmenu Name menProses
Text Proses
JmenuItem Name meItBersih
Text Bersih
Jmenu Name men Hitung
Text Hitung
JmenuItem Name meItKali
Text Kali
JmenuItem Name meItBag i
Text Bagi
Label Button Te xt Field JmenuItem Name meItTambah
Text Tambah
Gambar 2. 1 Ko mponen Label, Button dan TextField JmenuItem Name meItKurang
Text Kurang
Jmenu Name men Bantuan
Text Bantuan
TextField Name eData1

16 53
 MENU BAR, MENU, MENU ITEM dan SEPERATOR Praktikum

 Buat Form Input Mahasiswa

Tujuan :
 Mahasiswa dapat menggunakan pallete JmenuBar, Jmenu, JmenuItem
dan Jseperator dalam NetBean.

Tug as Pendahuluan
1.
Jelaskan Menu Bar, Menu, Menu Item dan Seperator..!
2.
Kerjakan Praktiku m pada Modul 10..!

Dasar Teori

Gambar 2. 2 Form Input Mahasiswa

Komponen Properties Isi
JLabel Text NIM
JLabel Text NAMA
JTextField Name eNIM
Text Kosongkan
JTextField Name eNama
Text Kosongkan
JButton Name eClear
Text CLEA R
JButton Name eExit
Menu Bar Menu Text EXIT

Menu Item

Separator Catatan:
‘Name ’ pada JTextField dan Jbutton diperoleh dari Klik kanan pada komponen
Gambar 10.1 Ko mponen Menu, Menu Bar, Menu Item dan Seperator tersebutChange variable name..isi dengan nama baru.

Praktikum

52 17
 Gambar 9.8 Running Program Sp inner

Gambar 2. 3 Mengubah nama pada komponen Tug as

Lengkapi program diatas sehingga seperti yang tampak pada Running program
Setelah di klik OK maka Name yang bersangkutan akan berubah
 Agar saat tombol CLEA R di klik dapat membersih kan isian pada TextField serta tambahkan spin untuk Tanggal.
NIM dan Nama, maka klik 2X pada tombol CLEA R, ubah kode sehingga
men jadi:
private void bClearActionPerformed(java.awt.event.ActionEvent
evt) {
eNIM.setText("");
eNama.setText("");
}

 Agar saat tombol EXIT d i klik dapat menghentikan program, maka klik 2X
pada tombol EXIT, ubah kode sehingga menjadi:

private void bExitActionPerformed(java.awt.event.ActionEvent

evt) {
System.exit(0);
}

Running Program:

MODUL X
18 51
 properties

Gambar 2. 4 Running Program 1

Untuk menamp ilkan gambar, gunakan Label dengan mengganti properties icon
yang menunjuk ke suatu file tertentu.
Gambar 9.6 Properties Model pada Spinner Perataan dan pewarnaan Label dan Button juga dapat diatur, contoh:

 Pilih Model Type Nu mber dan lakukan perubahan nilai seperti gambar d iatas. Komponen Properties Isi
 Klik kanan pada spin Angka, pilih Evens Change StateChange. JLabel Icon File C:\gambar\sahru.jpg
JLabel Border Bowel Border
HorizontalAlign ment Right
Text Jlabel
JButton Border Bowel Border
Text JButton
JButton Border LineBorder
Text JButton
JButton Border Empty Border
Backg round [153:153:225]

Ket: setelah anda klik tanda ... pada background, pilih spektru m warna yang
diinginkan pada tab RGB.

Running Program :
Gambar 9.7 Events State Change pada Spinner

 Kemudian Ketikkan coding berikut:

private void
spinAngkaStateChanged(javax.swing.event.ChangeEvent evt) {
eAngka.setText(spinAngka.getValue().toString());
}

 Running Program:
50 19
 private void
sbTrebleAdjustmentValueChanged(java.awt.event.AdjustmentEv
ent evt) {
areaResume.set Text("Volume : \t" + sbVolume.getValue() +
"\n" +
"BasProgram:sbBas.getValue()
 Running : \t" + + "\n" +
"Treble : \t" + sbTreble.getValue());
}

Gambar 2. 5 Running Program 2

Tug as Praktikum

1. Buat program untuk menampilkan NIM dan NAMA kedalam JoptionPane.

2. Buat program untuk menamp ilkan NIM dan NAMA dan ALMAT kedalam
JLabel.
Gambar 9.4 Running Program Scroll Bar
3. Buat program untuk menampilkan NIM, NAMA, ALMAT dan NOTLP ke
dalam JTextField.
 Buat Applikasi Sp inner
 Terdapat 3 Label, dan 3 Spinner (spinNormal, spinAngka dan spinHari).
 Apabila spinNormal d i klik to mbol spinnernya (tombol keatas dan kebawah)
maka tulisan pada eAngka akan berubah. Demikian halnya dengan
spinNormal.

Gambar 9.5 Contoh Program Spinner

 Spin No rmal menggunakan defaultnya NetBeans

 Untuk membuat Sp in Angka, klik spinAngka kemudian p ilih Model pada

20 49
 Klik pada scroll bar volu me, kemudian klik pada tab Events, klik 2 X MODUL III
adjustmentValueChanged.
PASSWORD dan FORMATTED FILE

Tujuan :
 Mahasiswa dapat menggunakan pallete JPasswordFile dan
JFormattedFile dalam NetBean

Tug as Pendahuluan
1. Kerjakan Praktiku m pada modul 3
2. Jelaskan 5 tipe dari JOptionPane..!

Gambar 9.3 Properties pada Scroll Bar

 Ketikkan coding berikut: Dasar Teori

private void
sbVolumeAdjustmentValueChanged(java.awt.event.Adjustment
Event evt) {
areaResume.set Text("Volume : \t" + sbVolume.getValue() +
"\n" +
"Bas : \t" + sbBas.getValue() + "\n" +
"Treble : \t" + sbTreble.getValue());
}

 Klik pada scroll bar Bas, kemudian klik pada tab Events, klik 2 X
adjustmentValueChanged. Dan ketikkan Coding berikut:

private void
sbBasAdjustmentValueChanged(java.awt.event.AdjustmentEven
t evt) { JPasswordField JFormattedField
areaResume.set Text("Volume : \t" + sbVolume.getValue() +
"\n" + Gambar 3. 1 Ko mponen JPasswordField dan JFormattedField
"Bas : \t" + sbBas.getValue() + "\n" +
"Treble : \t" + sbTreble.getValue()); JPasswordField digunakan untuk menuliskan sesuatu pada editBo x/textField
} dengan diPassword (*).
JPasswordField digunakan untuk menuliskan sesuatu pada editBo x/textField
 Klik pada scroll bar Treble, kemud ian klik pada tab Events, klik 2 X dengan format tertentu misal ditambah penulisan dollar, desimal, persen dsb.
adjustmentValueChanged. Dan ketikkan Coding berikut:
48 21
JPassword Praktikum
Properties JPasswordField Utama adalah :
EchoChar (pada tab Other properties), apabila diisi dengan *, maka tulisan pada  Buat Form baru kemud ian Tambahkan ko mponen berikut:
password akan diganti dengan *, apabila “ ?” maka akan diganti dengan “?” dst.
Ko mponen Properties Isi
Untuk mendapatkan password yang dimasukkan dapat menggunakan Label Text Vo lu me
getPassword(). Label Text Bass
Label Text Treble
Scrollbar Name sbVolu me
Praktikum Orientation Vertical
Value 30
Contoh : Scrollbar Name sbBass
Applikasi terd iri dari 2 label, 1 Text Field, 1 PasswordField dan 2 Button.
Orientation Vertical
Apabila tombol login ditekan maka akan menamp ilkan message “ Password
Value 30
Berhasil”, apabila ditekan tombol Batal maka user dan passwod akan dibersihkan.
Scrollbar Name sbTreble
Orientation Vertical
Value 30
Text Puisi
Label Text Resume
Text area Name areaResume
Text (Kosongkan)

Gambar 3. 2 Contoh Aplikasi Password

 Buat seperti form diatas

 Klik 2 x button Login

String Usernam e, UPassword = new String("");

Username = eUser.getText();
UPassword = new String(ePassword.getPassword());
boolean Pernyataan = Username. equals("sahru") &&
UPassword.equals("123");

if(Pernyataan == true){
JOptionPane.showConfirmDialog(null, "Yap, anda benar", Gambar 9.2 Contoh Program Scroll Bar
"Login", JOptionPane.DEFAULT_OP TION );

22 47
 MODUL IX }else{
JOptionPane.showConfirmDialog(null, "Login anda salah",
SCROLL BAR dan SPINNER
"Login", JOptionPane.DEFAULT_OP TION);
}
Tujuan :
 Mahasiswa dapat menggunakan pallete Scoll Bar dan Spinner dalam
 Klik 2 x Button Batal
NetBean.
eUser.setText("");
ePassword.setText("");

Tug as Pendahuluan
1. Jelaskan Scro ll Bar dan Sp inner..! Tug as
2. Kerjakan Praktiku m pada Modul 9..!
1.
Buat program seperti di atas, tapi pada saat button login di klik akan muncul
username dan password dalam salah satu tipe JoptionPane.
2. Tambahkan pada program anda jika login berhasil maka akan membuka form
Dasar Teori lain.

Scroll Bar Spinner

Gambar 9.1 Ko mponen Scroll Bar dan Spiner

46 23
 MODUL IV
COMBOBOX, RADIO BUTTON dan BUTTON GROUP

Tujuan :
 Mahasiswa dapat menggunakan pallete Co mbo Bo x, Radio Button dan
Button Group dalam NetBean.

Tug as Pendahuluan
1. Jelaskan apa itu IDE Net Beans..! Gambar 8.4 Tabbed Pane yang telah di Rename
2. Jelaskan Swing..!
3. Jelaskan keuntungan menggunakan IDE Net Beans.!  Masukkan label, TextField dan Button sehinga menjadi seperti d ibawah in i.

Dasar Teori

Gambar 8.5 Tabbed Pane dengan inputan Text File

 Klik 2 X Button Bersih kemudian ket ikkan

private void
btBersihActionPerformed(java.awt.event.ActionEvent evt) {
eNim.setText("");
Radio Button Co mbo Bo x Button Group eNama.setText("");
}
Gambar 4. 1 Ko mponen Radio Button, Co mboBo x dan Button Group
Tug as
- Co mbo Bo x d igunakan untuk menampilkan daftar p ilihan.
- Radio Button digunakan untuk menyediakan seju mlah pilihan, d imana hanya Buatlah program TabbedPane menyatukan Modul 1 sampai 5.
satu pilihan saja yang dapat dipilih pada kelo mpok piihan tersebut. Contoh
pilhan jen is kelamin, hanya satu jenis kelamin saja yang dapat dipilih.
- Button Group digunakan sebagai group / kelo mpok dari pilihan-pilihan yang

24 45
Praktikum ada. Contoh : group pilihan kelamin, group pilihan hoby, group pilihan range
usia dsb.
Buatlah Form baru
 Masukkan TabbedPane ke dalam fo rm Praktikum
 Kemudian tambahkan Jpanel kedalam TabbedPane yang di buat sebanyak 3X.
Hasinya sebagai berikut:

Gambar 4. 2 Contoh Program Co mboBo x

Gambar 8.2 Tabbed Pane
 Buat seperti form diatas
 Klik panel 1, klik pada layout dan ubah Tab Title menjadi Pertama  Tambahkan koponen Combo Bo x, ganti namanya dengan cbAgama. Klik
model pada tab Properties

Klik disin i

Gambar 8.3 Properties pada Tabbed Pane

 Demikian seterusnya hingga menjadi tab Pertama, tab Ke Dua dan tab Ke
Tiga. Gambar 4. 3 Properties Model pada Co mboBo x

Ganti Item 1, Item 2 dengan ISLAM, KRISTEN, PROTESTAN, HINDU dan

BUDHA

44 25
 MODUL VIII
TABBED PANE dan PANEL

Tujuan :
 Mahasiswa dapat menggunakan pallete Tabbed Pane dan Panel dalam
NetBean..

Tug as Pendahuluan
1. Jelaskan Panel dan Tabbed Pane..!!
2. Kerjakan Praktiku m pada Modul 8..!

Gambar 4. 4 Item-item Model pada Co mbo Bo x

Dasar Teori
Klik 2x Button Proses

private void
Btn_ProsesActionPerformed(java.awt.event.ActionEvent evt) {
int IndexCombo;
String Pilihan;

//untuk mengetahui index atau urutan keberapa dari daftar

combo
IndexCombo = cbAgama.getSel ectedIndex();
//untuk mengetahui string atau text dari combo yang dipilih
dari daftar
 Jalankan= (String)cbAgama.getSelectedItem();
Pilihan program, kemudian tekan To mbol proses maka hasilnya:
Text_Hasil.setText(Pilihan);
}

Panel Tabbed Pane

Gambar 8.1 Ko mponen Panel dan Tabbed Pane

26 43
 Klik 2 X Button Ubah dan Ketikkan
private void
btUbahActionPerformed(java.awt.event.ActionEvent evt) {
if (AreaKota.getLineCount()>0) {
AreaKota.setSel ectionStart(0);
AreaKota.setSel ectionEnd(12);
int posisi = AreaKota.getSel ectedText().indexOf("\n");
AreaKota.replaceRange(eUbah.getText()+"\n", 0,posisi+1);

if (posisi == -1)
AreaKota.replaceRange(eUbah.get Text()+"\n",0,8);
}
if (CbMakanan.getItemCount()>0)
CbMakanan.removeItemAt(1); Gambar 4. 5 Running Program Co mbo Bo x
CbMakanan.insertItem At(eUbah.getText(),1);
 Tambahkan pada form sebuah Button Group dan 2 Rad io Button
 Ubah nama g roup button menjadi Gbt_Kelamin
if (ListModel.getSize()>0)
 Ubah nama radio button1 menjadi Rb_Pria, pada tab properties ubah Selected
ListModel.remove(1);
= True dan isi buttonGroup dengan Btn_Kelamin.
ListModel.insertElement At(eUbah.getText(),1);
 Ubah nama radio button2 menjadi Rb_Wanita, pada tab properties isi
} buttonGroup dengan Btn_Kelamin.
 Klik 2 X Button Sisip dan Ketikkan

private void
btSisipActionPerformed(java.awt.event.ActionEvent evt) {
AreaKota.append("Lamongan");
//tambah paling bawah
AreaKota.insert("Kab.",0); // tambah text area

CbMakanan.insertItemAt("Soto",3);
CbMakanan.insertItemAt("Pecel",0);

ListModel.insertElement At("Jus Apokat", 4);

ListModel.insertElement At("Jus Tomat", 5);
}
Tug as Gambar 4. 6 Contoh Program Co mboBo x dan Rad io Button

Tambahkan pada program di atas TextFileds (kota, makanan dan minu man)
 Klik 2 x Button Proses
sebagai inputan, pada saat Button sisip di klik maka inputan pada TextFields
tersebut dimasukkan ke dalam TextArea Kota, Co mbo Makanan dan List
Minuman.
27
42
 private void // Variables declaration - do not modify
Btn_ProsesActionPerformed(java.awt.event.ActionEvent evt) { private javax.swing.JText Area AreaKota;
char Kelamin; private javax.swing.JComboBox CbMakanan;
private javax.swing.JList ListMinuman;
//jika Radio button dipilih pria maka kelamin = 'P' jika tidak private javax.swing.JButton btHapus;
Kelamin = 'W' private javax.swing.JButton btSisip;
if (Rb_Pria.isSelected()) private javax.swing.JButton btTambah;
Kelamin = 'P'; private javax.swing.JButton btUbah;
else private javax.swing.JTextFi eld eUbah;
 Running Program
Kelamin :
= 'W'; private javax.swing.JScrollPane jScrollPane1;
Text_Hasil.setText(String.valueOf(K elamin)); private javax.swing.JScrollPane jScrollPane2;
} // End of variables declaration
// mendelarasikan model List Box
DefaultListModel ListModel; // Yang perlu ditambahkan
}

 Klik 2 X Button Hapus dan Ketikkan

private void
btHapusActionPerformed(java.awt.event.ActionEvent evt) {
if (AreaKota.getLineCount()>0) {
AreaKota.setSel ectionStart(0);
AreaKota.setSel ectionEnd(12);
int posisi = AreaKota.getSel ectedText().indexOf("\n");
AreaKota.replaceRange("", 0,posisi+1);

if (posisi == -1)
AreaKota.replaceRange("",0,8);
Gambar 4. 7 Running Program Co mbo Bo x dan Radio Button }
if (CbMakanan.getItemCount()>0)
Tug as CbMakanan.removeItemAt(0);
if (ListModel.getSize()>0)
Buat program yang terdiri dari 3 Co mbo Bo x (Co mbo Makanan, Co mbo ListModel.remove(0);
Minuman dan Co mbo Sayuran), 1 Button dan 1 TextFields. Ket ika button di }
klik maka dari ketiga co mbo tersebut di tamp ilkan dalam 1 textFields.

28 41
 Klik 2 x Button Tambah dan ketikkan MODUL V
private void CHECK BOX dan TEXT AREA
btTambahActionPerformed(java.awt.event.ActionEvent evt) {
AreaKota.append("Gersik");
AreaKota.append("\n"); Tujuan :
AreaKota.append("Malang "+"\n");  Mahasiswa dapat menggunakan pallete Check Bo x dan Text Area
dalam NetBean..
AreaKota.append("Surabaya");
AreaKota.append("\n");

CbMakanan.insertItemAt("Rujak", 0);
CbMakanan.insertItemAt("Rawon", 1); Tug as Pendahuluan
1. Kerjakan Praktiku m pada modul 5..!
CbMakanan.insertItemAt("Sate", 2);
2. Jelaskan Check Bo x dan Text Area..!
ListModel.add(0, "Sprite");
ListModel.add(1, "Fanta");
ListModel.add(2, "Es Batu");
ListModel.add(3, "Kopi"); Dasar Teori
ListMinuman.set Model(ListModel );
} Check
Bo x
Catatan agar bisa menggunakan ListModel maka perlu d itambahkan :
Text Area
public class Modul7 extends javax.swing.JFrame {
/** Creates new form Modul7 */
public Modul7() {
initComponents();
ListModel = new DefaultListModel(); // Yang perlu
ditambahkan
}
Gambar 5. 1 Ko mponen CheckBo x dan TextArea

40 29
Praktikum Method Pada ListBo x yang penting:
setModel(ListModel) : menambahkanModel ListBo x ke d irinya.
Tambahkan pada form ko mponen berikut: getModel() : mendapatkan ListModel yang telah ada padanya.
Komponen Properties Isi Adapun ListModel yang sering digunakan pada ListBo x adalah Default ListModel
Button Group Name bgHoby
Check Bo x Name cbMenyanyi
Text Menyanyi Praktikum
Check Bo x Name cbMenari
Text Menari Terdapat Form dengan 1 Scrollpane yang di isi oleh TextArea (area kota), 1
ScrollPane yang di isi o leh List (ListMinuman), 1 Co mboBo x (cbMakanan), 4
Check Bo x Name cbRenang
Button (btTambah, btHapus, BtUbah dan btSisip) serta 1 Text Field (eUbah).
Text Renang
Check Bo x Name cbMemasak
Pada saat form dijalan kan, areaKota, cbMakanan, ListMinu man masih kosong.
Text Memasak
Apabila Button Tambah di tekan, areakota akan berisi daftar kota, combo Makanan
Check Bo x Name cbBadminton akan akan berisi daftar makanan dan list minu man berisi daftar minu man.
Text Bad minton
Check Bo x Name cbPuisi Apabila Button Sisip d i tekan, areakota akan disisipi daftar kota, co mbo Makanan
Text Puisi akan disisipi daftar makanan dan list minuman d isisipi daftar minuman.
Label Text Resume
Text area Name areaResume Apabila Button Hapus di tekan, kota pertama pada areakota akan di hapus,
Text (Kosongkan) Makanan pertama pada Co mbo makanan akan d i hapus dan minuman pertama pada
list minuman akan di hapus.

Gambar 5. 2 Contoh Penggunaan CheckBo x dan TextA rea Gambar 7.1 Contoh Program List Bo x, Co mbo Bo x dan Text Area

30 39
 MODUL VII Klik 2X Button Proses kemud ian ketikkan

Proses Menambah, mengubah dan menghapus data pada

private void
LISTBOX, TEXTAREA dan COMBOBOX Btn_ProsesActionPerformed(java.awt.event.ActionEvent evt) {
int IndexCombo;
Tujuan : String Pilihan;
 Mahasiswa dapat Menambah, mengubah dan menghapus data pada char Kelamin;
ListBo x, Text A rea dan Co mbo Bo x dalam Net Bean. String daftarHoby="";
IndexCombo = cbAgama.getSelectedIndex();
Pilihan = (String)cbAgama.getSelectedItem();
if (Rb_Pria.isSelected())
Tug as Pendahuluan Kelamin = 'P';
1. Jelaskan Method yang ada pada Text Area dan Co mboBo x..! else
2. Kerjakan Praktiku m pada Modul 7..! Kelamin = 'W';
if (cbMenyanyi.isSelected())
daftarHoby +=cbMenyanyi.getText()+"";
if (cbMenari.isSelected())
Dasar Teori daftarHoby +=cbMenari.getText()+"";
if (cbRenang.isSelected())
Proses menambah, mengubah dan menghapus data pada ListBo x, TextArea daftarHoby +=cbRenang.getText()+"";
dan Co mboBo x, diperlukan terutama untuk pemrograman database. if (cbBadminton.isSelect ed())
daftarHoby +=cbBadminton.getText()+"";
Berikut daftar method yang diperlukan : if (cbMemasak.isSel ect ed())
daftarHoby +=cbMemasak.getText()+"";
ListBo x : if (cbPuisi.isSelect ed())
ListBo x tidak mempunyai method yang dapat langsung menambah, mengubah dan
daftarHoby +=cbPuisi.getText()+"";
menghapus data, kemampuan itu berada pada model ListBo x.
areaResume.set Text(
Model ListBo x adalah model dari ListBo x yang akan digunakan, setiap model
berbeda fungsi dan kegunaannya, contoh : model untuk data tanggal pasti berbeda "NIM :\t"+eNIM.getText() + "\n"+
untuk data string / Nu merik dsb. "NAMA :\t"+eNAMA.getText() + "\n"+
Running "AGAMA
Program : :\t"+ Pilihan + "\n"+
Method pada model ListBo x: "KELAMIN:\t"+ Kelamin + "\n"+
add(int, objek) : menambah data pada model ListBo x pada index ke-n "HOBY :\t"+ daftarHoby + "\n"
insertElementAt(int, Ob jek) : menambah data pada model ListBo x pada index ke-n );
remove(int) : menghapus data pada model ListBo x pada index ke-n }
removeAll() : menambah semua data pada model ListBo x.
getSize() : mengetahui ju mlah data pada Model ListBo x
catatan:
objek dapat berupa string.

38 31
 Tugas

Tambahkan pada program d i atas coding untuk menampilkan daftar Olahraga

yang telah dipilih.

Gambar 5. 3 Running Program CheckBo x dan TextArea

Untuk menghapus isi Text A rea cukup dengan mengubah methode setTex menjad i
“ “ atau null
Contoh:

areaResume.setTex(““) atau areaResum e.setTex(null)

Tug as

Buatlah program pesanan di sebuah cafe yang menginputkan Nama

(TextFields), Alamat (Text Fields), Makanan (CheckBo x) dan Minu man
(CheckBo x) serta terdapat button pesan, ketika Button pesan di klik maka daftar
pesanan tersebut ditampilkan dalam TextArea.

32 37
Berikut ini adalah contoh yang lebih ko mp leks. MODUL VI
Form terdiri dari 3 buah JscrollPane dan 3 Jlist yang berisi daftar makanan (single).
Minuman (Single Interval) dan Olahraga (Multip le Interval). LIST dan SCROLLPANE
Apabila tombol Proses ditekan , daftar makanan, Minu man yang dipilih akan
dicetak pada JtextArea “Resume”
Tujuan :
 Mahasiswa dapat menggunakan pallete JList dan JscrollPane dalam
NetBeans.

Tug as Pendahuluan
1. Jelaskan List dan ScrollPane.!
2. Jelaskan 3 Selection Mode (Single, Single Interval dan Multiple
Inteval).!
3. Kerjakan Praktiku m pada Modul 6..!

Dasar Teori
Gambar 6.6 Contoh Program List dan ScrollPane

Klik 2 X Button Proses dan ketikkan coding berikut.

private void
BtProsesActionPerformed(java.awt.event.ActionEvent evt) {
int IndexMakanan = ListMakan.get Sel ectedIndex();
int IndexMinMinuman = ListMinuman.get MinSel ectionIndex();
int IndexMaxMinuman = ListMinuman.get MaxSelectionIndex();

String Kalimat;
Kalimat = "Daftar Makanan yang dipilih : \n";
Kalimat = Kalimat +
ListMakan.get Model().getElem entAt(IndexMakanan).toString()+"\ List Bo x
n"; Scroll
Kalimat = Kalimat + "Daftar Minuman yang dipilih : \n"; Pane
for (int i=IndexMinMinuman; i<=IndexMaxMinuman;i++){ Gambar 6.1 Ko mponen List dan SCro llPane
Kalimat = Kalimat +
ListMinuman.get Model().getElement At(i).toString()+"\n";
} Kedua komponen ini selalu bearkaitan, sehingga apabila terdapat JList dapat
MemoResume.setText(Kalimat); dipastikan ia berada dalam JscrollPane.
}

36 33
Praktikum

 Buatlah Form baru (Jframe dengan Nama Class : CobaListBo x)

 Ubah layout men jadi Null
 Tambakan JscrollPane di dalam form tersebut
 Tambahkan Jlist di dalam JscrollPane

Gambar 6.4 Isian Data pada Model List

Gambar 6.2 A wal List dan ScrollPane
 Ubah Item 1, Item 2,..... dengan Gersik, Lamongan,..... sehingga menjadi
seperti diatas.
 Klik OK

Pada Tab Properties, di Properties Select ion Mode pilih Single

Terdapat 3 pilihan Selection Mode:

Single Single Interval Mu ltiple Inteval

Gambar 6.3 List berada dalam SCro llPane

Perhatikan terdapat perubahan warna, semula kotak Scro llPane berwarna abu-abu,
setelah diisi oleh Jlist berubah menjadi putih dan terdapat tulisan Item 1, Item
2,......, yang menandakan data kini telah siap diisi.

Untuk mengisi data, pada tab properties:

 Pilih model
 Akan muncul isian data :

Gambar 6.5 Tiga Selection Mode

34 35