MODUL PRAKTIKUM PEMROGRAMAN VISUAL 1 · PEMROGRAMAN VISUAL 1 MODUL PRAKTIKUM D3 Manajemen...

34
PEMROGRAMAN VISUAL 1 MODUL PRAKTIKUM D3 Manajemen Informatika Fakultas Teknik Universitas Trunojoyo

Transcript of MODUL PRAKTIKUM PEMROGRAMAN VISUAL 1 · PEMROGRAMAN VISUAL 1 MODUL PRAKTIKUM D3 Manajemen...

Page 1: MODUL PRAKTIKUM PEMROGRAMAN VISUAL 1 · PEMROGRAMAN VISUAL 1 MODUL PRAKTIKUM D3 Manajemen Informatika Fakultas Teknik Universitas Trunojoyo

PEMROGRAMAN VISUAL 1

MODUL PRAKTIKUM

D3 Manajemen Informatika Fakultas Teknik

Universitas Trunojoyo

Page 2: MODUL PRAKTIKUM PEMROGRAMAN VISUAL 1 · PEMROGRAMAN VISUAL 1 MODUL PRAKTIKUM D3 Manajemen Informatika Fakultas Teknik Universitas Trunojoyo

2

67

Biografi Penulis

Nama : Ahmad Sahru Romadhon, S.Kom

TTL : Bangkalan, 7 Juni 1984

Alamat : Jln. Pertahanan no.160 Bangkalan

Telpon : 031-3095012

Hp : 0856 4912 0354

e-Mail : [email protected]

Penulis lahir dan menyelesaikan sekolah hingga SLTA di kota Bangkalan.

Melanjutkan pendidikan di Tekn ik Informat ika UNIJOYO Bangkalan dengan

bidang minat Ilmu Komputer. Sekarang penulis bekerja sebagai Dosen Manajemen

Informatika Universitas Trunojoyo Madura.

Page 3: MODUL PRAKTIKUM PEMROGRAMAN VISUAL 1 · PEMROGRAMAN VISUAL 1 MODUL PRAKTIKUM D3 Manajemen Informatika Fakultas Teknik Universitas Trunojoyo
Page 4: MODUL PRAKTIKUM PEMROGRAMAN VISUAL 1 · PEMROGRAMAN VISUAL 1 MODUL PRAKTIKUM D3 Manajemen Informatika Fakultas Teknik Universitas Trunojoyo

4

Tujuan Umum Setelah menempuh mata kuliah Pemrograman Visual I, Mahasiswa mampu membuat pemrogram dengan menggunakan java kemudian mengembangkan kedalam pemrograman v isual II.

65

Gambar 12.4 Running Program slider

Tugas

Buat contoh program yang menggunakan JFileChooser.

Page 5: MODUL PRAKTIKUM PEMROGRAMAN VISUAL 1 · PEMROGRAMAN VISUAL 1 MODUL PRAKTIKUM D3 Manajemen Informatika Fakultas Teknik Universitas Trunojoyo

64

Ø Kemudian ketikkan Coding berikut:

Ø Lakukan hal yang sama pada Jslider2, seperti pada Jslider1. Ø Klik 2 X Button Set Nilai dan ket ikkan Ø Klik 2 X Button Ubah Min Max dan ketikkan

Ø Klik 2 X Button Hapus Label Nilai dan ketikkan

Ø Running Program:

private void jSlider1StateChanged(javax.swing.event.ChangeEvent evt) { int hasil = jSlider1.getValue(); eHasil.setText(String.valueOf(hasil)); }

private void btSetNilaiActionPerfo rmed(java.awt.event.ActionEvent evt) { jSlider1.setValue(80);

}

private void btUbahActionPerformed(java.awt.event.ActionEvent evt) { jSlider1.setMaximum(70); jSlider1.setMinimum(20); }

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

5

Tujuan Khusus 1. Mengenal IDE NetBean. 2. Jlabel, JtextField, Jbutton, JOptionPane 3. JPasswordField dan JformattedField 4. Combo Box, Rad io Button dan Button Group 5. Check Box dan Text Area 6. JList dan JscrollPane 7. Proses Menambah, mengubah dan menghapus data pada ListBox, Text Area

dan Combo Box 8. Tabbed Pane dan Panel 9. Scoll Bar dan Jspinner 10. JmenuBar, Jmenu, JmenuItem dan Jseperator 11. JpopupMenu dan JtoolBar 12. Jslider dan JFileChooser

Page 6: MODUL PRAKTIKUM PEMROGRAMAN VISUAL 1 · PEMROGRAMAN VISUAL 1 MODUL PRAKTIKUM D3 Manajemen Informatika Fakultas Teknik Universitas Trunojoyo

6

Daftar Isi 1. Kata Pengantar.............................................................................................. 3 2. Tujuan Umum............................................................................................... 4 3. Tujuan Khusus.............................................................................................. 5 4. Daftar Isi....................................................................................................... 6 5. Mengenal IDE NetBean................................................................................ 7 6. Jlabel, JtextField, Jbutton, JoptionPane........................................................ 16 7. JPasswordField dan JformattedField............................................................ 21 8. Combo Box, Rad io Button dan Button Group.............................................. 24 9. Check Box dan Text Area............................................................................. 29 10. JList dan JscrollPane..................................................................................... 33 11. Proses Menambah, mengubah dan menghapus data pada ListBox, Text Area

dan Combo Box............................................................................................ 38 12. Tabbed Pane dan Panel................................................................................. 43 13. Scoll Bar dan Jspinner.................................................................................. 46 14. JmenuBar, Jmenu, JmenuItem dan Jseperator.............................................. 52 15. JpopupMenu dan JtoolBar............................................................................ 57 16. Jslider dan JFileChooser............................................................................... 61 17. Daftar Pustaka............................................................................................... 66 18. Biografi Penulis............................................................................................ 67

63

JSlider Name Jslider Minimum 0 Maximum 100 MinorTickSpacing 10 MayorTickSpacing 10 PaintLabels True PaintTick True PaintTrack True Orientation Horizontal SnapToTick False Value 10 JSlider Name Jslider Minimum 0 Maximum 100 MinorTickSpacing 10 MayorTickSpacing 10 PaintLabels True PaintTick True PaintTrack True Orientation Vertical 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

Page 7: MODUL PRAKTIKUM PEMROGRAMAN VISUAL 1 · PEMROGRAMAN VISUAL 1 MODUL PRAKTIKUM D3 Manajemen Informatika Fakultas Teknik Universitas Trunojoyo

62

MayorTickSpacing : mengatur nilai maximum garis slider PaintLabels : menampilkan/tidak n ilai/ukuran pada slider PaintTick : menampilkan/tidak garis nilai/ukuran pada slider PaintTrack : menampilkan/tidak t racking nilai/ukuran pada slider Orientation : Orientasi slider (Harisontal / Vertical) SnapToTick : mengatur snap/kecendrungan pilihan pada slider Value : mengatur nilai sekarang pada slider Praktikum Ø Buatlah form seperti dibawah ini, yang terdiri dari 3 Button, 1 Label, 1

TextField dan 2 Slider.

Gambar 12.2 Contoh Program Slider

Ø Ubah propertiesnya menjadi seperti berikut:

Komponen Properties Isi Label Name Jlabel Text Hasil JTextField Name eHasil Text (Kosongkan) JButton Name btSetNilai Text Set Nilai JButton Name btUbah Text Ubah Min Max JButton Name btHapus Text Hapus Label Nilai

7

MODUL I

MENGENAL IDE NETBEANS 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.

Praktikum Ø Klik Start à Program à NetBeans à NetBean IDE 6.5.

Tujuan : v Mahasiswa Dapat membuat project java dengan NetBean v Mahasiswa mampu menggunakan membuka, menyimpan dan

menulisakan coding java dalam NetBean

Tugas Pendahuluan 1. Jelaskan apa itu IDE NetBeans..! 2. Jelaskan Swing..! 3. Jelaskan keuntungan menggunakan IDE NetBeans.!

Page 8: MODUL PRAKTIKUM PEMROGRAMAN VISUAL 1 · PEMROGRAMAN VISUAL 1 MODUL PRAKTIKUM D3 Manajemen Informatika Fakultas Teknik Universitas Trunojoyo

8

Gambar 1. 1 Memulai NetBeans

Ø Tunggu sebentar..

Gambar 1. 2 NetBeans 6.5.1

Ø Lalu akan muncul tampilan awal halaman welcome. Seperti dibawah

61

MODUL XII

SLIDER dan FILE CHOOSER Dasar Teori

Gambar 12.1 Komponen Slider

Slider berfungsi seperti scrollbar, namun terdapat beberapa properti tambahan, sbb:

Minimum : mengatur nilai minimum slider Maximum : mengatur nilai minimum slider MinorTickSpacing : mengatur nilai minimum garis slider

Tujuan : v Mahasiswa dapat menggunakan pallete Jslider dan JFileChooser dalam

NetBean.

Tugas Pendahuluan 1. Jelaskan Slider dan File Chooser..!

2. Kerjakan Praktikum pada Modul 12..!

Slider

Page 9: MODUL PRAKTIKUM PEMROGRAMAN VISUAL 1 · PEMROGRAMAN VISUAL 1 MODUL PRAKTIKUM D3 Manajemen Informatika Fakultas Teknik Universitas Trunojoyo

60

Ø Running Program:

Gambar 11.6 Running Program Popup Menu

Tugas

Buatlah program seperti di atas dan gunakan ToolBar untuk menampung Button tersebut.

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

9

Gambar 1. 3 Halaman Awal NetBeans

Jadi pertama-tama dalam membuat program java kita terlebih dahulu harus membuat proyek. Ø Jalankan menu File | New Project (atau Ctrl+Shift+N). Untuk membuka dialog

New Pro ject

Gambar 1. 4 New Project NetBeans

Page 10: MODUL PRAKTIKUM PEMROGRAMAN VISUAL 1 · PEMROGRAMAN VISUAL 1 MODUL PRAKTIKUM D3 Manajemen Informatika Fakultas Teknik Universitas Trunojoyo

10

Ø Dalam dialog pilih kategori Categories=Java, Pro jects=Java Application. Lalu klik Next.

Gambar 1. 5 New Java Appication

Ø Pada langkah diatas, pilih terleb ih dahulu lokasi proyek. Klik pada tombol

Browse di sebelah kanan isian Pro ject Location. Maka akan ditampilkan dialog Select Project Location

Ø Lalu isi nama proyek anda. Perhatikan bahwa Proyek Folder secara otomatis 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.

59

Gambar 11.4 Membuat Even On Click pada Menu Item

Ø Kemudian ketikkan coding berikut: Ø Agar pada saat running program PopUp Menu tampil maka klik Form

kemudian pilih tab Evens à mousePressed

Gambar 11.5 Properties Mouse Pressed pada Form

Ø Klik kemudian ketikkan coding berikut:

Klik 2 X

private void popBersihActionPerformed(java.awt.event.ActionEvent evt) { eNIM.setText(""); eNAMA.setText(""); areaKeterangan.setText(""); }

Page 11: MODUL PRAKTIKUM PEMROGRAMAN VISUAL 1 · PEMROGRAMAN VISUAL 1 MODUL PRAKTIKUM D3 Manajemen Informatika Fakultas Teknik Universitas Trunojoyo

58

Praktikum

Gambar 11.2 Contoh Program Tool Bar dan Popup Menu

Ø Buat Form Baru seperi da atas dan tambahkan PopUp Menu ke dalam form tersebut

Ø Klik kanan pada JpopUpMenu dan pilih Add Form Palette à Menu Item seperti gambar d i bawah ini. Lakukan 2 x.

Gambar 11.3 Add Menu Item pada Popup Menu

Ø Ganti Name menjadi popBersih dan Text menjadi Bersih pada Menu Item1 Ø Ganti Name menjadi popTutup dan Text menjadi Tutup pada Menu Item2 Ø Untuk mengisikan coding klik 2 x pada PopBersih Menu Item.

11

Gambar 1. 6 Main.java dalam NetBeans

Membuat Form Baru pada NetBeans Untuk membuat form baru pada NetBeans tidaklah sulit, cobalah cara sbb: Ø Klik kanan pada salah satu folder (misal Belajar Java) Ø Klik New Ø Klik JFrame Form

Gambar 1. 7 Membuat Form Baru dalam NetBeans

Page 12: MODUL PRAKTIKUM PEMROGRAMAN VISUAL 1 · PEMROGRAMAN VISUAL 1 MODUL PRAKTIKUM D3 Manajemen Informatika Fakultas Teknik Universitas Trunojoyo

12

Ø Pilih nama class untuk form anda (misal: Percobaan) Ø Klik Fin ish

Gambar 1. 8 Menyimpan Form Baru

Ø Pada form editor terlihat sbb;

Gambar 1. 9 Tampilan Form Kosong pada NetBeans

57

MODUL XI

POPUP MENU dan TOOL BAR Dasar Teori

Gambar 11.1 Komponen Tool Bar dan Popup Menu

Tujuan : v Mahasiswa dapat menggunakan pallete JpopupMenu dan JtoolBar

dalam NetBean.

Tugas Pendahuluan 1. Jelaskan PopUp Menu dan Tool Bar..!

2. Kerjakan Praktikum pad Modul 11..!

Tool Bar

Popup Menu

Page 13: MODUL PRAKTIKUM PEMROGRAMAN VISUAL 1 · PEMROGRAMAN VISUAL 1 MODUL PRAKTIKUM D3 Manajemen Informatika Fakultas Teknik Universitas Trunojoyo

56

Gambar 10.6 Running Perogram Menu Tugas

Buat program untuk menghitung Luas dan Keliling dari Persegi Panjang, Segitiga dan Lingkaran.

13

Ø Untuk menampilkan Source Code Windows: Klik tab percobaan (disebelah form percobaan).

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 menjadi Pesan Ø Klik kanan pada JButton pada explorer (d ibawah [JFrame])

Page 14: MODUL PRAKTIKUM PEMROGRAMAN VISUAL 1 · PEMROGRAMAN VISUAL 1 MODUL PRAKTIKUM D3 Manajemen Informatika Fakultas Teknik Universitas Trunojoyo

14

Ø Klik Change Value Name

Gambar 1. 12 Langkah Mengubah Nama Button

Ø Ubah menjadi bSimpan Ø Klik OK

Gambar 1. 13. Rename Nama Button

Ø Klik 2 kali pada Button Simpan, ubah program pada bagian:

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

// TODO add your handling code here: } Sehingga menjadi:

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

JOptionPane.showMessageDialog(null, "Hello","Pesan", JOptionPane.INFORMATION_MESSAGE);

}

55

Gambar 10.4 membuat Event On Clik pada Menu Item

Ø Kemudian ketikkan Coding berikut: Ø Lakukan hal yang sama pada Menu Item Bagi, Tambah dan Kurang. Ø Running Program sbb:

Klik 2 X

private void

meItKaliActionPerformed(java.awt.event.ActionEvent evt) { int Data1 = Integer.parseInt(eData1.getText()); int Data2 = Integer.parseInt(eData2.getText());

int Hasil; Hasil = Data1*Data2; eHasil.setText(String.valueOf(Hasil));

}

Page 15: MODUL PRAKTIKUM PEMROGRAMAN VISUAL 1 · PEMROGRAMAN VISUAL 1 MODUL PRAKTIKUM D3 Manajemen Informatika Fakultas Teknik Universitas Trunojoyo

54

Text (Kosongkan) 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 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.

15

Running Program :

Gambar 1. 14 Running Program Modul 1

Tugas Praktikum

Buatlah program seperti di atas yang menampilkan tulisan “Saya Belajar NetBeans”.

Page 16: MODUL PRAKTIKUM PEMROGRAMAN VISUAL 1 · PEMROGRAMAN VISUAL 1 MODUL PRAKTIKUM D3 Manajemen Informatika Fakultas Teknik Universitas Trunojoyo

16

MODUL II

LABEL, TEXTFILELD dan BUTTON

Dasar Teori

Gambar 2. 1 Komponen Label, Button dan TextField

Tujuan : v Mahasiswa menggunakan Label, TextField dan Button dalam NetBean

Tugas Pendahuluan 1. Jelaskan Tentang Label, Button dan TextField..! 2. Kerjakan Praktikum modul 2.

Label Button Text Field

53

Ø Buatlah desain Form seperti pada gambar berikut:

Gambar 10.2 Contoh Form Menu, Menu Bar, Menu Item dan Separator Berikut ini daftar komponen 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 menHitung Text Hitung JmenuItem Name meItKali Text Kali JmenuItem Name meItBag i Text Bagi JmenuItem Name meItTambah Text Tambah JmenuItem Name meItKurang Text Kurang Jmenu Name menBantuan Text Bantuan TextField Name eData1

Menu

Menu Item

Menu Bar

Separator

Page 17: MODUL PRAKTIKUM PEMROGRAMAN VISUAL 1 · PEMROGRAMAN VISUAL 1 MODUL PRAKTIKUM D3 Manajemen Informatika Fakultas Teknik Universitas Trunojoyo

52

MENU BAR, MENU, MENU ITEM dan SEPERATOR Dasar Teori

Gambar 10.1 Komponen Menu, Menu Bar, Menu Item dan Seperator

Praktikum

Tujuan : v Mahasiswa dapat menggunakan pallete JmenuBar, Jmenu, JmenuItem

dan Jseperator dalam NetBean.

Tugas Pendahuluan 1. Jelaskan Menu Bar, Menu, Menu Item dan Seperator..! 2. Kerjakan Praktikum pada Modul 10..!

Menu

Menu Item

Menu Bar

Separator

17

Praktikum Ø Buat Form Input Mahasiswa

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 CLEAR JButton Name eExit Text EXIT

Catatan: ‘Name’ pada JTextField dan Jbutton diperoleh dari Klik kanan pada komponen tersebutàChange variable name.. àisi dengan nama baru.

Page 18: MODUL PRAKTIKUM PEMROGRAMAN VISUAL 1 · PEMROGRAMAN VISUAL 1 MODUL PRAKTIKUM D3 Manajemen Informatika Fakultas Teknik Universitas Trunojoyo

18

Gambar 2. 3 Mengubah nama pada komponen

Setelah di klik OK maka Name yang bersangkutan akan berubah Ø Agar saat tombol CLEAR di klik dapat membersihkan isian pada TextField

NIM dan Nama, maka klik 2X pada tombol CLEAR, ubah kode sehingga menjadi:

Ø Agar saat tombol EXIT d i klik dapat menghentikan program, maka klik 2X

pada tombol EXIT, ubah kode sehingga menjadi: Running Program:

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

eNIM.setText(""); eNama.setText(""); }

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

System.exit(0); }

51

Gambar 9.8 Running Program Spinner

Tugas

Lengkapi program diatas sehingga seperti yang tampak pada Running program serta tambahkan spin untuk Tanggal.

MODUL X

Page 19: MODUL PRAKTIKUM PEMROGRAMAN VISUAL 1 · PEMROGRAMAN VISUAL 1 MODUL PRAKTIKUM D3 Manajemen Informatika Fakultas Teknik Universitas Trunojoyo

50

properties

Gambar 9.6 Properties Model pada Spinner

Ø Pilih Model Type Number dan lakukan perubahan nilai seperti gambar d iatas. Ø Klik kanan pada spin Angka, pilih Evens à Change à StateChange.

Gambar 9.7 Events State Change pada Spinner

Ø Kemudian Ketikkan coding berikut: Ø Running Program:

private void

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

}

19

Gambar 2. 4 Running Program 1

Untuk menampilkan gambar, gunakan Label dengan mengganti properties icon yang menunjuk ke suatu file tertentu. Perataan dan pewarnaan Label dan Button juga dapat diatur, contoh:

Komponen Properties Isi JLabel Icon File C:\gambar\sahru.jpg JLabel Border Bowel Border HorizontalAlignment Right Text Jlabel JButton Border Bowel Border Text JButton JButton Border LineBorder Text JButton JButton Border Empty Border Background [153:153:225]

Ket: setelah anda klik tanda pada background, pilih spektrum warna yang diinginkan pada tab RGB. Running Program :

...

Page 20: MODUL PRAKTIKUM PEMROGRAMAN VISUAL 1 · PEMROGRAMAN VISUAL 1 MODUL PRAKTIKUM D3 Manajemen Informatika Fakultas Teknik Universitas Trunojoyo

20

Gambar 2. 5 Running Program 2

Tugas Praktikum 1. Buat program untuk menampilkan NIM dan NAMA kedalam JoptionPane. 2. Buat program untuk menampilkan NIM dan NAMA dan ALMAT kedalam

JLabel. 3. Buat program untuk menampilkan NIM, NAMA, ALMAT dan NOTLP ke

dalam JTextField.

49

Ø Running Program:

Gambar 9.4 Running Program Scroll Bar

Ø Buat Applikasi Sp inner Ø Terdapat 3 Label, dan 3 Spinner (spinNormal, spinAngka dan spinHari). Ø Apabila spinNormal d i klik tombol spinnernya (tombol keatas dan kebawah)

maka tulisan pada eAngka akan berubah. Demikian halnya dengan spinNormal.

Gambar 9.5 Contoh Program Spinner

Ø Spin Normal menggunakan defaultnya NetBeans Ø Untuk membuat Sp in Angka, klik spinAngka kemudian p ilih Model pada

private void sbTrebleAdjustmentValueChanged(java.awt.event.AdjustmentEv

ent evt) { areaResume.setText("Volume : \t" + sbVolume.getValue() + "\n" +

"Bas : \t" + sbBas.getValue() + "\n" + "Treble : \t" + sbTreble.getValue());

}

Page 21: MODUL PRAKTIKUM PEMROGRAMAN VISUAL 1 · PEMROGRAMAN VISUAL 1 MODUL PRAKTIKUM D3 Manajemen Informatika Fakultas Teknik Universitas Trunojoyo

48

Ø Klik pada scroll bar volume, kemudian klik pada tab Events, klik 2 X adjustmentValueChanged.

Gambar 9.3 Properties pada Scroll Bar Ø Ketikkan coding berikut: Ø Klik pada scroll bar Bas, kemudian klik pada tab Events, klik 2 X

adjustmentValueChanged. Dan ketikkan Coding berikut:

Ø Klik pada scroll bar Treble, kemudian klik pada tab Events, klik 2 X

adjustmentValueChanged. Dan ketikkan Coding berikut:

private void sbVolumeAdjustmentValueChanged(java.awt.event.AdjustmentEvent evt) {

areaResume.setText("Volume : \t" + sbVolume.getValue() + "\n" +

"Bas : \t" + sbBas.getValue() + "\n" + "Treble : \t" + sbTreble.getValue());

}

private void

sbBasAdjustmentValueChanged(java.awt.event.AdjustmentEvent evt) { areaResume.setText("Volume : \t" + sbVolume.getValue() +

"\n" + "Bas : \t" + sbBas.getValue() + "\n" + "Treble : \t" + sbTreble.getValue());

}

21

MODUL III

PASSWORD dan FORMATTED FILE Dasar Teori

Gambar 3. 1 Komponen JPasswordField dan JFormattedField

JPasswordField digunakan untuk menuliskan sesuatu pada editBox/textField dengan diPassword (*). JPasswordField digunakan untuk menuliskan sesuatu pada editBox/textField dengan format tertentu misal ditambah penulisan dollar, desimal, persen dsb.

Tujuan : v Mahasiswa dapat menggunakan pallete JPasswordFile dan

JFormattedFile dalam NetBean

Tugas Pendahuluan 1. Kerjakan Praktikum pada modul 3 2. Jelaskan 5 tipe dari JOptionPane..!

JPasswordField JFormattedField

Page 22: MODUL PRAKTIKUM PEMROGRAMAN VISUAL 1 · PEMROGRAMAN VISUAL 1 MODUL PRAKTIKUM D3 Manajemen Informatika Fakultas Teknik Universitas Trunojoyo

22

JPassword Properties JPasswordField Utama adalah : EchoChar (pada tab Other properties), apabila diisi dengan *, maka tulisan pada password akan diganti dengan *, apabila “ ?” maka akan diganti dengan “?” dst. Untuk mendapatkan password yang dimasukkan dapat menggunakan getPassword(). Praktikum Contoh : Applikasi terd iri dari 2 label, 1 TextField, 1 PasswordField dan 2 Button. Apabila tombol login ditekan maka akan menampilkan message “ Password Berhasil” , apabila ditekan tombol Batal maka user dan passwod akan dibersihkan.

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", "Login", JOptionPane.DEFAULT_OPTION);

47

Praktikum

Ø Buat Form baru kemudian Tambahkan komponen berikut:

Gambar 9.2 Contoh Program Scroll Bar

Komponen Properties Isi Label Text Volume Label Text Bass Label Text Treble Scrollbar Name sbVolume Orientation Vertical Value 30 Scrollbar Name sbBass Orientation Vertical Value 30 Scrollbar Name sbTreble Orientation Vertical Value 30 Text Puisi Label Text Resume Text area Name areaResume Text (Kosongkan)

Page 23: MODUL PRAKTIKUM PEMROGRAMAN VISUAL 1 · PEMROGRAMAN VISUAL 1 MODUL PRAKTIKUM D3 Manajemen Informatika Fakultas Teknik Universitas Trunojoyo

46

MODUL IX

SCROLL BAR dan SPINNER Dasar Teori

Gambar 9.1 Komponen Scroll Bar dan Spiner

Tujuan : v Mahasiswa dapat menggunakan pallete Scoll Bar dan Spinner dalam

NetBean.

Tugas Pendahuluan 1. Jelaskan Scro ll Bar dan Sp inner..!

2. Kerjakan Praktikum pada Modul 9..!

Scroll Bar Spinner

23

Ø Klik 2 x Button Batal

Tugas 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

lain.

}else{ JOptionPane.showConfirmDialog(null, "Login anda salah",

"Login", JOptionPane.DEFAULT_OPTION); }

eUser.setText(""); ePassword.setText("");

Page 24: MODUL PRAKTIKUM PEMROGRAMAN VISUAL 1 · PEMROGRAMAN VISUAL 1 MODUL PRAKTIKUM D3 Manajemen Informatika Fakultas Teknik Universitas Trunojoyo

24

MODUL IV

COMBOBOX, RADIO BUTTON dan BUTTON GROUP Dasar Teori

Gambar 4. 1 Komponen RadioButton, ComboBox dan ButtonGroup - Combo Box d igunakan untuk menampilkan daftar p ilihan. - Radio Button digunakan untuk menyediakan sejumlah pilihan, d imana hanya

satu pilihan saja yang dapat dipilih pada kelompok piihan tersebut. Contoh pilhan jen is kelamin, hanya satu jenis kelamin saja yang dapat dipilih.

- Button Group digunakan sebagai group / kelompok dari pilihan-pilihan yang

Tujuan : v Mahasiswa dapat menggunakan pallete Combo Box, Radio Button dan

Button Group dalam NetBean.

Tugas Pendahuluan 1. Jelaskan apa itu IDE NetBeans..! 2. Jelaskan Swing..! 3. Jelaskan keuntungan menggunakan IDE NetBeans.!

Radio Button Button Group Combo Box

45

Gambar 8.4 Tabbed Pane yang telah di Rename Ø Masukkan label, TextField dan Button sehinga menjadi seperti d ibawah in i.

Gambar 8.5 Tabbed Pane dengan inputan Text File

Ø Klik 2 X Button Bersih kemudian ket ikkan

Tugas

Buatlah program TabbedPane menyatukan Modul 1 sampai 5.

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

eNim.setText(""); eNama.setText("");

}

Page 25: MODUL PRAKTIKUM PEMROGRAMAN VISUAL 1 · PEMROGRAMAN VISUAL 1 MODUL PRAKTIKUM D3 Manajemen Informatika Fakultas Teknik Universitas Trunojoyo

44

Praktikum Ø Buatlah Form baru Ø Masukkan TabbedPane ke dalam form Ø Kemudian tambahkan Jpanel kedalam TabbedPane yang di buat sebanyak 3X.

Hasinya sebagai berikut:

Gambar 8.2 Tabbed Pane

Ø Klik panel 1, klik pada layout dan ubah Tab Title menjadi Pertama

Gambar 8.3 Properties pada Tabbed Pane

Ø Demikian seterusnya hingga menjadi tab Pertama, tab Ke Dua dan tab Ke Tiga.

25

ada. Contoh : group pilihan kelamin, group pilihan hoby, group pilihan range usia dsb.

Praktikum

Gambar 4. 2 Contoh Program ComboBox

Ø Buat seperti form diatas Ø Tambahkan koponen Combo Box, ganti namanya dengan cbAgama. Klik

model pada tab Properties

Gambar 4. 3 Properties Model pada ComboBox

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

Klik disin i

Page 26: MODUL PRAKTIKUM PEMROGRAMAN VISUAL 1 · PEMROGRAMAN VISUAL 1 MODUL PRAKTIKUM D3 Manajemen Informatika Fakultas Teknik Universitas Trunojoyo

26

Gambar 4. 4 Item-item Model pada ComboBox

Ø Klik 2x Button Proses

Ø Jalankan program, kemudian tekan Tombol proses maka hasilnya:

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

String Pilihan; //untuk mengetahui index atau urutan keberapa dari daftar

combo IndexCombo = cbAgama.getSelectedIndex(); //untuk mengetahui string atau text dari combo yang dipilih

dari daftar Pilihan = (String)cbAgama.getSelectedItem(); Text_Hasil.setText(Pilihan);

}

43

MODUL VIII

TABBED PANE dan PANEL Dasar Teori

Gambar 8.1 Komponen Panel dan Tabbed Pane

Tujuan : v Mahasiswa dapat menggunakan pallete Tabbed Pane dan Panel dalam

NetBean..

Tugas Pendahuluan 1. Jelaskan Panel dan Tabbed Pane..!! 2. Kerjakan Praktikum pada Modul 8..!

Panel Tabbed Pane

Page 27: MODUL PRAKTIKUM PEMROGRAMAN VISUAL 1 · PEMROGRAMAN VISUAL 1 MODUL PRAKTIKUM D3 Manajemen Informatika Fakultas Teknik Universitas Trunojoyo

42

Ø Klik 2 X Button Ubah dan Ketikkan Ø Klik 2 X Button Sisip dan Ketikkan

Tugas

Tambahkan pada program di atas TextFileds (kota, makanan dan minuman) sebagai inputan, pada saat Button sisip di klik maka inputan pada TextFields tersebut dimasukkan ke dalam TextArea Kota, Combo Makanan dan List Minuman.

private void btUbahActionPerformed(java.awt.event.ActionEvent evt) { if (AreaKota.getLineCount()>0) {

AreaKota.setSelectionStart(0); AreaKota.setSelectionEnd(12);

int posisi = AreaKota.getSelectedText().indexOf("\n"); AreaKota.replaceRange(eUbah.getText()+"\n", 0,posisi+1);

if (posisi == -1) AreaKota.replaceRange(eUbah.getText()+"\n",0,8); }

if (CbMakanan.getItemCount()>0) CbMakanan.removeItemAt(1); CbMakanan.insertItem At(eUbah.getText(),1);

if (ListModel.getSize()>0) ListModel.remove(1);

ListModel.insertElementAt(eUbah.getText(),1); }

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.insertElementAt("Jus Apokat", 4); ListModel.insertElementAt("Jus Tomat", 5); }

27

Gambar 4. 5 Running Program ComboBox

Ø Tambahkan pada form sebuah Button Group dan 2 Rad io Button Ø Ubah nama group button menjadi Gbt_Kelamin Ø Ubah nama radio button1 menjadi Rb_Pria, pada tab properties ubah Selected

= True dan isi buttonGroup dengan Btn_Kelamin. Ø Ubah nama radio button2 menjadi Rb_Wanita, pada tab properties isi

buttonGroup dengan Btn_Kelamin.

Gambar 4. 6 Contoh Program ComboBox dan Rad io Button

Ø Klik 2 x Button Proses

Page 28: MODUL PRAKTIKUM PEMROGRAMAN VISUAL 1 · PEMROGRAMAN VISUAL 1 MODUL PRAKTIKUM D3 Manajemen Informatika Fakultas Teknik Universitas Trunojoyo

28

Ø Running Program :

Gambar 4. 7 Running Program ComboBox dan Radio Button

Tugas

Buat program yang terdiri dari 3 ComboBox (Combo Makanan, Combo Minuman dan Combo Sayuran), 1 Button dan 1 TextFields. Ket ika button di klik maka dari ketiga combo tersebut di tampilkan dalam 1 textFields.

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

char Kelamin; //jika Radio button dipilih pria maka kelamin = 'P' jika tidak

Kelamin = 'W' if (Rb_Pria.isSelected()) Kelamin = 'P';

else Kelamin = 'W'; Text_Hasil.setText(String.valueOf(Kelamin));

}

41

Ø Klik 2 X Button Hapus dan Ketikkan

// Variables declaration - do not modify

private javax.swing.JTextArea AreaKota; private javax.swing.JComboBox CbMakanan; private javax.swing.JList ListMinuman;

private javax.swing.JButton btHapus; private javax.swing.JButton btSisip; private javax.swing.JButton btTambah;

private javax.swing.JButton btUbah; private javax.swing.JTextField eUbah; private javax.swing.JScrollPane jScrollPane1;

private javax.swing.JScrollPane jScrollPane2; // End of variables declaration // mendelarasikan model List Box

DefaultListModel ListModel; // Yang perlu ditambahkan }

private void

btHapusActionPerformed(java.awt.event.ActionEvent evt) { if (AreaKota.getLineCount()>0) {

AreaKota.setSelectionStart(0); AreaKota.setSelectionEnd(12); int posisi = AreaKota.getSelectedText().indexOf("\n");

AreaKota.replaceRange("", 0,posisi+1); if (posisi == -1)

AreaKota.replaceRange("",0,8); } if (CbMakanan.getItemCount()>0)

CbMakanan.removeItemAt(0); if (ListModel.getSize()>0) ListModel.remove(0);

}

Page 29: MODUL PRAKTIKUM PEMROGRAMAN VISUAL 1 · PEMROGRAMAN VISUAL 1 MODUL PRAKTIKUM D3 Manajemen Informatika Fakultas Teknik Universitas Trunojoyo

40

Ø Klik 2 x Button Tambah dan ketikkan

Catatan agar bisa menggunakan ListModel maka perlu d itambahkan :

private void btTambahActionPerformed(java.awt.event.ActionEvent evt) { AreaKota.append("Gersik");

AreaKota.append("\n"); AreaKota.append("Malang "+"\n");

AreaKota.append("Surabaya"); AreaKota.append("\n");

CbMakanan.insertItemAt("Rujak", 0); CbMakanan.insertItemAt("Rawon", 1); CbMakanan.insertItemAt("Sate", 2);

ListModel.add(0, "Sprite"); ListModel.add(1, "Fanta");

ListModel.add(2, "Es Batu"); ListModel.add(3, "Kopi"); ListMinuman.setModel(ListModel);

}

public class Modul7 extends javax.swing.JFrame {

/** Creates new form Modul7 */ public Modul7() {

initComponents(); ListModel = new DefaultListModel(); // Yang perlu

ditambahkan

}

29

MODUL V

CHECK BOX dan TEXT AREA Dasar Teori

Gambar 5. 1 Komponen CheckBox dan TextArea

Tujuan : v Mahasiswa dapat menggunakan pallete Check Box dan Text Area

dalam NetBean..

Tugas Pendahuluan 1. Kerjakan Praktikum pada modul 5..!

2. Jelaskan Check Box dan Text Area..!

Check Box

Text Area

Page 30: MODUL PRAKTIKUM PEMROGRAMAN VISUAL 1 · PEMROGRAMAN VISUAL 1 MODUL PRAKTIKUM D3 Manajemen Informatika Fakultas Teknik Universitas Trunojoyo

30

Praktikum Tambahkan pada form komponen berikut:

Komponen Properties Isi Button Group Name bgHoby Check Box Name cbMenyanyi Text Menyanyi Check Box Name cbMenari Text Menari Check Box Name cbRenang Text Renang Check Box Name cbMemasak Text Memasak Check Box Name cbBadminton Text Badminton Check Box Name cbPuisi Text Puisi Label Text Resume Text area Name areaResume Text (Kosongkan)

Gambar 5. 2 Contoh Penggunaan CheckBox dan TextArea

39

Method Pada ListBox yang penting: setModel(ListModel) : menambahkanModel ListBox ke d irinya. getModel() : mendapatkan ListModel yang telah ada padanya. Adapun ListModel yang sering digunakan pada ListBox adalah DefaultListModel Praktikum Terdapat Form dengan 1 Scrollpane yang di isi oleh TextArea (area kota), 1 ScrollPane yang di isi o leh List (ListMinuman), 1 ComboBox (cbMakanan), 4 Button (btTambah, btHapus, BtUbah dan btSisip) serta 1 TextField (eUbah). Pada saat form dijalankan, areaKota, cbMakanan, ListMinuman masih kosong. Apabila Button Tambah di tekan, areakota akan berisi daftar kota, combo Makanan akan akan berisi daftar makanan dan list minuman berisi daftar minuman. Apabila Button Sisip d i tekan, areakota akan disisipi daftar kota, combo Makanan akan disisipi daftar makanan dan list minuman d isisipi daftar minuman. Apabila Button Hapus di tekan, kota pertama pada areakota akan di hapus, Makanan pertama pada Combo makanan akan d i hapus dan minuman pertama pada list minuman akan di hapus.

Gambar 7.1 Contoh Program List Box, Combo Box dan Text Area

Page 31: MODUL PRAKTIKUM PEMROGRAMAN VISUAL 1 · PEMROGRAMAN VISUAL 1 MODUL PRAKTIKUM D3 Manajemen Informatika Fakultas Teknik Universitas Trunojoyo

38

MODUL VII

Proses Menambah, mengubah dan menghapus data pada LISTBOX, TEXTAREA dan COMBOBOX

Dasar Teori

Proses menambah, mengubah dan menghapus data pada ListBox, TextArea dan ComboBox, diperlukan terutama untuk pemrograman database. Berikut daftar method yang diperlukan : ListBox : ListBox tidak mempunyai method yang dapat langsung menambah, mengubah dan menghapus data, kemampuan itu berada pada model ListBox. Model ListBox adalah model dari ListBox yang akan digunakan, setiap model berbeda fungsi dan kegunaannya, contoh : model untuk data tanggal pasti berbeda untuk data string / Numerik dsb. Method pada model ListBox: add(int, objek) : menambah data pada model ListBox pada index ke-n insertElementAt(int, Objek) : menambah data pada model ListBox pada index ke-n remove(int) : menghapus data pada model ListBox pada index ke-n removeAll() : menambah semua data pada model ListBox. getSize() : mengetahui jumlah data pada Model ListBox catatan: objek dapat berupa string.

Tujuan : v Mahasiswa dapat Menambah, mengubah dan menghapus data pada

ListBox, Text Area dan Combo Box dalam NetBean.

Tugas Pendahuluan 1. Jelaskan Method yang ada pada Text Area dan ComboBox..! 2. Kerjakan Praktikum pada Modul 7..!

31

Klik 2X Button Proses kemudian ketikkan Running Program :

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

int IndexCombo; String Pilihan; char Kelamin;

String daftarHoby=""; IndexCombo = cbAgama.getSelectedIndex(); Pilihan = (String)cbAgama.getSelectedItem();

if (Rb_Pria.isSelected()) Kelamin = 'P'; else

Kelamin = 'W'; if (cbMenyanyi.isSelected()) daftarHoby +=cbMenyanyi.getText()+"";

if (cbMenari.isSelected()) daftarHoby +=cbMenari.getText()+""; if (cbRenang.isSelected())

daftarHoby +=cbRenang.getText()+""; if (cbBadminton.isSelected())

daftarHoby +=cbBadminton.getText()+""; if (cbMemasak.isSelected()) daftarHoby +=cbMemasak.getText()+"";

if (cbPuisi.isSelected()) daftarHoby +=cbPuisi.getText()+""; areaResume.setText(

"NIM :\t"+eNIM.getText() + "\n"+ "NAMA :\t"+eNAMA.getText() + "\n"+ "AGAMA :\t"+ Pilihan + "\n"+

"KELAMIN:\t"+ Kelamin + "\n"+ "HOBY :\t"+ daftarHoby + "\n" );

}

Page 32: MODUL PRAKTIKUM PEMROGRAMAN VISUAL 1 · PEMROGRAMAN VISUAL 1 MODUL PRAKTIKUM D3 Manajemen Informatika Fakultas Teknik Universitas Trunojoyo

32

Gambar 5. 3 Running Program CheckBox dan TextArea

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

Buatlah program pesanan di sebuah cafe yang menginputkan Nama (TextFields), Alamat (TextFields), Makanan (CheckBox) dan Minuman (CheckBox) serta terdapat button pesan, ketika Button pesan di klik maka daftar pesanan tersebut ditampilkan dalam TextArea.

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

37

Tugas

Tambahkan pada program d i atas coding untuk menampilkan daftar Olahraga yang telah dipilih.

Page 33: MODUL PRAKTIKUM PEMROGRAMAN VISUAL 1 · PEMROGRAMAN VISUAL 1 MODUL PRAKTIKUM D3 Manajemen Informatika Fakultas Teknik Universitas Trunojoyo

36

Berikut ini adalah contoh yang lebih kompleks. Form terdiri dari 3 buah JscrollPane dan 3 Jlist yang berisi daftar makanan (single). Minuman (Single Interval) dan Olahraga (Multip le Interval). Apabila tombol Proses ditekan , daftar makanan, Minuman yang dipilih akan dicetak pada JtextArea “Resume”

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.getSelectedIndex(); int IndexMinMinuman = ListMinuman.getMinSelectionIndex(); int IndexMaxMinuman = ListMinuman.getMaxSelectionIndex();

String Kalimat; Kalimat = "Daftar Makanan yang dipilih : \n";

Kalimat = Kalimat + ListMakan.getModel().getElem entAt(IndexMakanan).toString()+"\n";

Kalimat = Kalimat + "Daftar Minuman yang dipilih : \n"; for (int i=IndexMinMinuman; i<=IndexMaxMinuman;i++){ Kalimat = Kalimat +

ListMinuman.getModel().getElementAt(i).toString()+"\n"; } MemoResume.setText(Kalimat);

}

33

MODUL VI

LIST dan SCROLLPANE Dasar Teori

Gambar 6.1 Komponen List dan SCro llPane

Kedua komponen ini selalu bearkaitan, sehingga apabila terdapat JList dapat dipastikan ia berada dalam JscrollPane.

Tujuan : v Mahasiswa dapat menggunakan pallete JList dan JscrollPane dalam

NetBeans.

Tugas Pendahuluan 1. Jelaskan List dan ScrollPane.! 2. Jelaskan 3 Selection Mode (Single, Single Interval dan Multiple

Inteval).!

3. Kerjakan Praktikum pada Modul 6..!

List Box

Scroll Pane

Page 34: MODUL PRAKTIKUM PEMROGRAMAN VISUAL 1 · PEMROGRAMAN VISUAL 1 MODUL PRAKTIKUM D3 Manajemen Informatika Fakultas Teknik Universitas Trunojoyo

34

Praktikum

Ø Buatlah Form baru (Jframe dengan Nama Class : CobaListBox) Ø Ubah layout menjadi Null Ø Tambakan JscrollPane di dalam form tersebut Ø Tambahkan Jlist di dalam JscrollPane

Gambar 6.2 Awal List dan ScrollPane

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 :

35

Gambar 6.4 Isian Data pada Model List

Ø 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 Multiple Inteval

Gambar 6.5 Tiga Selection Mode