Tujuan: Memahami Dan Menguasai Pembuatan Dan Pengaplikasian Graphical User Interface
Tujuan: Memahami Dan Menguasai Pembuatan Dan Pengaplikasian Graphical User Interface
Tujuan
Pada modul-modul sebelumnya, program yang kita buat menggunakan console sebagai
antarmuka. Pada modul kali ini kita akan mempelajari antarmuka grafis yang dikenal dengan nama
Graphical User Interface (GUI). GUI merupakan antar muka grafis yang memfasilitasi interaksi
antara pengguna dengan program aplikasi. Berikut adalah contoh GUI.
Salah satu komponen dalam bahasa pemrograman Java untuk membangun GUI adalah Swing.
Komponen ini didefinisikan di dalam paket javax.swing. Swing diturunkan dari Abstract
Windowing Toolkit dalam paket java.awt. Hirarki dari komponen Swing adalah sebagai berikut
java.lang.Object
java.awt.Component
java.awt.Container
java.swing.JComponent
JComponent adalah superclass dari semua komponen Swing. Sebagian besar fungsionalitas
komponen diturunkan dari superclass ini.
Beberapa komponen utama dalam GUI adalah:
1. Containers: merupakan wadah yang berfungsi untuk menempatkan komponen-komponen lain di
dalamnya.
2. Canvas.: merupakan komponen GUI yang berfungsi untuk menampilkan gambar atau untuk
membuat program grafis. Dengan canvas, kita bisa menggambar berbagai bentuk seperti
lingkaran, segitiga, dll.
3. User Interface (UI) components: contohnya adalah buttons, list, simple popup menus, check
boxes, text fields, dan elemen lain
4. Komponen pembentuk window: seperti frames, menu bars, windows, dan dialog boxes.
Sekarang kita akan berkenalan dengan Top Level Container, yaitu JFrame. Cobalah jalankan kode
program di bawah:
import javax.swing.*;
public class FrameSederhana{
public static void main(String[] args){
JFrame f1;
f1 = new JFrame("Ini Frame lho...");
f1.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
f1.setSize(500,500);
f1.setVisible(true);
}
}
Keluaran kode program di atas adalah frame berikut:
Selain JFrame, top level container yang lain adalah JDialog. Berbeda dengan JFrame,
JDialog tidak dibuat berdiri sendiri, melainkan dibuat bersama-sama dengan frame sebagai parent-
nya. Jika frame parent-nya ditutup, maka dialog akan dihapus dari memori. Kemunculan dialog akan
membuat semua input terhadap frame parent-nya akan terblokir sampai dialog tersebut ditutup.
Berikut contoh JDialog.
Kode program untuk memunculkan dialog di atas adalah:
import javax.swing.*;
public class Dialog{
public static void main (String[] args){
JFrame f2;
f2 = new JFrame("Ini sebuah frame lho...");
f2.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
f2.setVisible(true);
public DemoBorderLayout(){
super ("Ini Adalah Contoh Border Layout");
Container c = getContentPane();
lout = new BorderLayout (10,10);
c.setLayout(lout);
tombol = new JButton[names.length];
}
}
FlowLayout adalah layout yang menyusun komponen dari kiri ke kanan, selanjutnya ke baris
berikutnya. Jika ukuran windows diperbesar ukuran komponen pada FlowLayout tidak berubah.
Method-method penting dari FlowLayout adalah sebagai berikut :
a. setAlignment(position_CONSTANT): adalah method untuk menentukan posisi layout.
Nilai positition_CONSTANT dapat berupa FlowLayout.LEFT,
FlowLayout.CENTER, atau FlowLayout.RIGHT, yang masing-masing mengatur posisi
rata kiri, rata tengah, atau rata kanan.
b. layoutContainer(container): method untuk melakukan update container.
Coba pelajari kode program berikut:
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
public class FlowLayoutTest extends JFrame {
public FlowLayoutTest(){
super("Contoh Flow Layout");
FlowLayout lay = new FlowLayout();
lay.setAlignment(FlowLayout.RIGHT);
lay.setVgap(25);//mengatur jarak vertikal antar komponen
lay.setHgap(25);//mengatur jarak horisontal antar komponen
Container c = getContentPane();
c.setLayout(lay);
JButton t1 = new JButton("Tombol 1");
JButton t2 = new JButton("Tombol 2");
JButton t3 = new JButton("Tombol 3");
JButton t4 = new JButton("Tombol terpanjang no 4");
JButton t5 = new JButton("Tombol 5");
JButton t6 = new JButton("Tombol 6");
c.add(t1);
c.add(t2);
c.add(t3);
c.add(t4);
c.add(t5);
c.add(t6);
}
public static void main(String[] args){
FlowLayoutTest flt = new FlowLayoutTest();
flt.setSize(500, 200);
flt.setVisible(true);
flt.addWindowListener(new WindowAdapter(){
public void windowsClosing(WindowEvent e){
System.exit(0);
}
});
}
}
Output program di atas adalah sebagai berikut
6.3.3 Box Layout
Layout jenis ini meletakkan komponen-komponen dalam satu baris atau satu kolom saja.
Pelajari contoh berikut.
import javax.swing.*;
import java.awt.*;
public ContohBoxLayout(){
super("Contoh Box Layout Dalam Satu Baris");
Container c = getContentPane();
Box box = new Box(BoxLayout.X_AXIS);
JTextArea t1 = new JTextArea("Praktikum java",10,15);
JButton b1 = new JButton("Tombol 1");
JButton b2 = new JButton("Tombol 2");
JTextArea t2 = new JTextArea("Ilmu komputasi",10,15);
box.add(new JScrollPane(t1));
box.add(b1);
box.add(b2);
box.add(new JScrollPane(t2));
c.add(box);
}
Keluarannya adalah
6.3.4 Card Layout
Card Layout menampilkan container-container/panel-panel seperti tumpukan kartu. Hanya
satu container yang akan tampil untuk satu waktu. Pelajari kode berikut:
import javax.swing.*;
import java.awt.*;
public class TestCardLayout extends JFrame{
JPanel p1;
JPanel p2;
JRadioButton pil1, pil2, pil3;
ButtonGroup radioGroup;
JTextArea g;
public TestCardLayout(){
super("Uji Coba Card Layout");
p1 = new JPanel();
p2 = new JPanel();
pil1 = new JRadioButton("Pilihan 1",true);
pil2 = new JRadioButton("Pilihan 2",false);
pil3 = new JRadioButton("Pilihan 3",false);
p1.add(pil1);
p1.add(pil2);
p1.add(pil3);
radioGroup = new ButtonGroup();
radioGroup.add(pil1);
radioGroup.add(pil2);
radioGroup.add(pil3);
g = new JTextArea("text area");
p2.add(g);
JTabbedPane tab = new JTabbedPane();
tab.add(p1,"Tab dengan Radio Button");
tab.add(p2,"Tab dengan Text Area");
Container c = getContentPane();
c.add(tab, BorderLayout.NORTH);
}
public static void main (String[] args){
TestCardLayout tcl = new TestCardLayout();
tcl.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
tcl.setSize(500,100);
tcl.setVisible(true);
}
}
import javax.swing.*;
import java.awt.*;
public UjiGbl(){
f = new JFrame("Contoh GridBagLayout");
gbl = new GridBagLayout();
c = new GridBagConstraints();
f.getContentPane().setLayout(gbl);
c.fill = GridBagConstraints.HORIZONTAL;
Ini adalah pengaturan tata letak yang sangat fleksibel, dan dapat meniru fitur-fitur layout
manager yang lain. Pada layout ini, ukuran komponen dapat berubah-ubah secara ototmatis jika
ukuran window diubah. Pelajari contoh kode program berikut:
import javax.swing.JTextField;
import javax.swing.JLabel;
importjavax.swing.SpringLayout;
import java.awt.Container;
import javax.swing.JFrame;
public class ContohSpring{
JFrame f;
Container c;
SpringLayout l;
JLabel label;
JTextField t;
public ContohSpring(){
f = new JFrame("Demo SpringLayout");
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
c = f.getContentPane();
l = new SpringLayout();
c.setLayout(l);
label = new JLabel("Ini label");
t = new JTextField("Tuliskan Teks", 20);
c.add(label);
c.add(t);
//mengatur batasan (constraint) untuk label sehingga berada
//di posisi (20,10)
l.putConstraint(SpringLayout.WEST,label,20,SpringLayout.WEST, c);
l.putConstraint(SpringLayout.NORTH,label,10,SpringLayout.NORTH, c);
Event adalah peristiwa atau kejadian yang dibangkitkan atau distimulasi oleh pengguna
terhadap GUI. Untuk mendeteksi dan menangani apa yang dilakukan oleh pengguna terhadap GUI,
diperlukan suatu mekanisme yang disebut Event Handling. Mekanisme event handling pada bahasa
Java ditangani oleh event handling component, yang terbagi menjadi dua bagian, yaitu event listener
dan event handler.
Ilustrasi dari mekanisme event handling adalah sebagai berikut. Misalkan suatu button di
tekan. Maka terciptalah suatu objek event, yaitu kejadian ditekannya button. Kejadian atau event itu
ditangkap oleh event listener. Selanjutnya event tersebut harus ditangani oleh program dengan
memanggil method event handler. Method tersebut berisi blok kode program yang melakukan suatu
proses sebagai respon atas terjadinya event tersebut.
Sebuah objek event mempunyai sebuah kelas event sebagai acuan bagi tipe datanya. Kelas
event memiliki akar hirarki yaitu kelas EventObject. Kelas ini berada di package java.util. Kelas
AWTEvent merupakan turunan dari kelas EventObject. Kelas AWTEvent didefinisikan dalam
package java.awt.
Berikut ini adalah daftar kelas yang merupakan turunan dari kelas AWTEvent.
1. ComponentEvent: turunan dari AWTEvent, dijalankan ketika sebuah komponen dijalankan, di
resize, dibuat terlihat, atau disembunyikan.
2. InputEvent: turunan dari kelas ComponentEvent dan Abstract root class Event untuk
semua komponen input.
3. KeyEvent: turunan dari kelas InputEvent, dijalankan saat sebuah key pada keyboard ditekan,
dilepas, atau diketikkan.
4. ItemEvent: turunan dari kelas AWTEvent, dijalankan ketika sebuah item dipilih seperti pada
combo box dan list.
5. ActionEvent: turunan dari kelas AWTEvent, dijalankan ketika sebuah tombol ditekan,
melakukan double click pada daftar item, atau memilih menu.
6. MouseEvent: turunan dari kelas InputEvent, dijalankan ketika pengguna melakukan sesuatu
terhadap mouse, seperti, ditekan, dilepas, diklik, masuk atau keluar window, di drag, dll.
7. TextEvent: turunan dari kelas AWTEvent, dijalankan ketika sebuah nilai text berubah
8. WindowEvent: turunan dari kelas ComponentEvent, dijalankan ketika pengguna melakukan
sesuatu terhadap window, seperti dibuka, ditutup, diaktifkan, atau dinon-aktifkan.
Event Listener adalah kelas yang mengimplemetasi interface Listener. Beberapa event
1. ActionListener : listener yang bereaksi jika terjadi event pada mouse atau keyboard.
2. MouseListener: listener yang bereaksi atas event yang terjadi pada mouse.
3. MouseMotionListener: menyediakan beberapa method untuk memantau perubahan mouse
seperti drag atau perpindahan mouse.
4. WindowListener: listener yang bereaksi atas event yang terjadi pada window.
Untuk lebih jelasnya, pelajari dan jalankan kode program berikut:
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
public EventHandling(){
f = new JFrame("Konversi Suhu");
b1 = new JButton("Konversi ke Fahrenheit");
b2 = new JButton("Konversi ke Celcius");
l1 = new JLabel("Suhu dalam Celcius");
l2 = new JLabel("Suhu dalam Fahrenheit");
t1 = new JTextField(10);
t2 = new JTextField(10);
}
Latihan
Buatlah program berbasis GUI yang menerima inputan dua buah bilangan dan dapat melakukan
operasi penjumlahan, pengurangan, perkalian, dan pembagian dua bilangan tersebut, lalu
menampilkan hasilnya!
MODUL IV
Tujuan
7.1 Netbeans
Netbeans adalah suatu perangkat lunak yang mempunyai fungsi sebagai platform framework
Java untuk aplikasi desktop dan sebagai integrated development environment (IDE) untuk
membangun aplikasi yang menggunakan java, javaScript, PHP, C, C++, dan lain-lain. Netbeans dapat
diunduh secara gratis dari website www.netbeans.org. Pada praktikum kali ini digunakan Netbeans
IDE 6.9.1 dan JDK 1.6.0_22.
Dalam netbeans, semua perancangan dan pemrograman dibuat dalam kerangka Project. Project
merupakan sekumpulan file yang dikelompokkan di dalam suatu kesatuan. Untuk mennguanakan
Netbeans dalam pemrograman Java kita buat dulu project. Langkah-langkahnya adalah:
1. Buka netbeans
2. Lalu klik menu file > new project
3. Setelah kotak dialog new project terbuka, pada kolom categories pilih Java, lalu pada kolom
projects pilih Java Application. Kemudian klik next.
4. Maka akan muncul tampilan seperti di bawah. Lalu klik Finish
Project otomatis
telah memiliki main
class dengan nama
yang sama dengan
nama project
5. Setelah klik Finish, akan tampil tampilan berikut
Jendela kiri atas adalah project view, jendela kiri bawah adalah members view, jendela kanan atas
adalah work area yaitu tempat kita mengetikkan kode program Java, dan jendela kanan bawah
adalah description yaitu jendela untuk melihat hasil compile dan hasil running program.
6. Jika kita ingin membuat kelas caranya adalah klik kanan pada package aplikasijava, lalu pilih
new, kemudian pilih java class, seperti pada gambar berikut
7. Setelah itu akan muncul jendela seperti dibawah. Ubah class name sesuai nama kelas yang anda
inginkan. Pada contoh di bawah, nama kelasnya adalah Mahasiswa.
Lalu klik Finish.
Latihan
1. Coba ketik kode berikut di kelas Mahasiswa. Setelah itu tekan F9 untuk meng-compile
Sekarang mari kita pelajari cara membuat GUI dengan menggunakan Netbeans. Langkah
pertama, pada jendela project view, klik kanan pada project AplikasiJava, lalu pilih menu > Java
Package. Perhatikan gambar di bawah
Buat Package baru dengan nama AplikasiGUI. Setelah package terbentuk, klik kanan pada nama
package, lalu pilih new > JFrameForm seperti pada gambar berikut
Buat kelas GUI yang bernama FormIsian. Tampilan di Netbeans akan menjadi seperti gambar
berikut
ini JFrame (Work Area)
Untuk memulai membuat interface, drag komponen Label dari Swing Containers ke dalam work area.
Lalu drag komponen-komponen lain seperti Text Field, Button, dan Text Area sehingga terbentuk
GUI seperti gambar di bawah
Setelah membuat kelas GUI, kita akan membuat action dari tombol masukkan. Untuk
menyisispkan action, klik kanan pada tombol masukkan, lalu pilih Events > Action >
actionPerformed. Maka akan muncul jendela berikut
Di jendela inilah kita akan menuliskan kode program action dari tombol Masukkan. Di dalam blok
method jButton1ActionPerformed(), tuliskan kode berikut:
Compile dan run kelas FormIsian.java, maka akan keluar tampilan GUI berikut:
Ketikkan password yang anda inginkan sebagai password untuk user, setelah itu klik next :
Gambar di atas adalah tampilan hasil instalasi, dan jangan lupa dicatat untuk portnya, setelah itu klik
INSTALL :
Tunggu sampai proses instalasi selesai…
Setelah selesai ceklis “Launch the database homepage” dan klik finish, maka akan keluar browser
yang membuat homepage database oracle express edition :
Setelah itu login menggunakan user SYSTEM dan password yang tadi dimasukkan saat proses
instalasi. Selesai.
Sekarang login ke Oracle XE lewat menu :
Setelah browsernya tampil, masukkan username SYSTEM dan password sesuai dengan password
yang anda buat pada saat instalasi :
Setelah itu masuk ke bagian ADMINISTRATOR –> DATABASE USERS –> CREATE USER :
Setelah itu buat user baru, otomatis pula akan terbuat schema baru :
Setelah selesai, tekan tombol CREATE , dan sekarang kita sudah berhasil membuat user sekaligus
schema baru di Oracle XE dengan nama schema “belajar”. Sekarang anda bisa login pada awal
halaman website Oracle XE tadi dengan user “belajar” dan password yang anda masukkan.
Setelah itu anda log out, lalu coba login lagi dengan username “belajar” dan password yang
anda buat tadi.
Setelah masuk, pilih object browser.
Kemudian pada menu Columns. Beri nama tabel database yang akan kita buat. Misalkan nama
database-nya adalah MAHASISWA. Maka ketikkan MAHASISWA pada kolom Table Name.
Selanjutnya beri nama kolom pada Column Name. Isikan nama kolomnya yaitu “nama”, “Nim”, dan
“fakultas”. Tipe data diatur pada menu type. Masukkan VARCHAR2 sebagai tipe datanya. Lalu pada
Scale kita bisa mengatur panjang maksimum kolom yang kita buat. Misalkan untuk kolom “nama”
panjang maksimumnya 25, kolom “Nim” panjang maksimumnya 15, dan kolom “fakultas” panjang
maksimumnya 25.
Selanjutnya pada menu Primary key kita pilih “Nim” sebagai primary key. Ini akan mengakibatkan
“Nim” tertentu hanya bisa dimiliki oleh satu orang (unik).
Selanjutnya menu Foreign Key bisa dilewati. Menu constraints juga bisa dilewati, karena dengan
memilih primary key otomatis akan terbentuk constraints. Lalu masuk ke menu confirm. Akan tampil
tampilan berikut
Setelah itu, klik tombol Create. Maka akan muncul tampilan yang memperlihatkan tabel database
MAHASISWA
Sekarang kita lakukan setting Oracle di Netbeans. Tapi sebelumnya anda harus punya driver
oraclenya terlebih dahulu. Tapi tak perlu khawatir karena waktu anda menginstall oracle xe, otomatis
driver nya ikut terinstal. Coba lihat di folder “C:\oraclexe\app\oracle\product\10.2.0\server\jdbc\lib”,
disana ada file “ojdbc14.jar” yang digunakan sebagai drivernya.
Sekarang jalankan Netbeans, lalu masuk ke bagian SERVICE :
Setelah itu klik kanan treeitem Drivers lalu pilih New Driver :
Setelah keluar dialog New JDBC Driver, tinggal klik tombol Add, lalu masukkan file “ojdbc14.jar”
tadi, lalu ubah Driver Classnya jadi “oracle.jdbc.driver.OracleDriver”, kalau nama kelasnya terserah :
Setelah selesai klik tombol OK, dan sekarang driver Oracle sudah terinstall di Netbeans , tinggal kita
buat koneksi ke schema BELAJAR yang sebelumnya kita buat :
Caranya klik kanan nama driver oraclenya, misalkan namanya Oracle OCI. Setelah itu itu klik
Connect Using :
Setelah itu isi atributnya seperti dibawah ini :
Untuk host nya gunakan localhost, dan untuk SID kita pakai XE karena Kita memakai Oracle
Express Edition, sedangkan portnya 1521, soalnya pada saat proses instalasi Oracle XE menggunakan
port ini, untuk username dan password kita gunakan username dan password yang telah kita buat
sebelumnya.
Setelah itu klik tombol OK :
Pilih schema BELAJAR, karena kita menggunakan user BELAJAR,setelah itu klik OK :
Selesai.
Selanjutnya klik kanan pada folder Tables lalu pilih create tables
Akan muncul tampilan berikut. Isi Table Name dengan nama tabel yaitu MAHASISWA. Lalu klik
Add Column.
Buat kolom-kolom “nama”, “Nim”, dan “fakultas” seperti gambar berikut:
Selanjutnya pada project AplikasiJava yang sudah kita buat sebelumnya, lakukan
perubahan pada kelas FormIsian yaitu menambahkan tombol “Tampilkan”, menghapus textArea
dari panel, dan menambahkan komponen JTable dengan nama jTable1. Buat desainnya seperti
gambar di bawah ini:
Setelah itu tambahkan driver Oracle Database 10g Express Edition dengan cara klik kanan pada folder
Libraries, lalu pilih add Library, maka akan muncul tampilan berikut
Tekan tombol Create. Akan muncul dialog berikut:
Setelah itu, perlu ditambahkan action listener pada button di kelas FormIsian.java untuk
menangkap event yang terjadi pada tombol “Masukkan” dan “Tampilkan”. Sintaks kode action
listener untuk tombol “Masukkan” adalah:
Menampilkan data:
Latihan
1. Buatlah sebuah kelas yang dinamakan CalculatorGUI yang mengimplementasikan disain GUI
seperti di bawah ini :
Terdapat text field pada bagian atas frame (diguanakan untuk menampilkan hasil perhitungan) dan
sebuah kumpulan tombol yang berukuran 4 x 4 (16 buah). sebuah label juga dapat digunakan
untuk menampilkan hasil perhitungan.
(sumber: 2)
2. Buatlah sebuah database untuk menyimpan data-data karyawan sebuah perusahaan, yang terdiri
dari: NIP, Nama, Alamat, Tempat Lahir, Tanggal Lahir, Jabatan, Gaji.
Lalu buatlah GUI untuk menampilkan seluruh data karyawan tersebut.