MODUL III GRAPHICAL USER INTERFACE Tujuan

MODUL III
GRAPHICAL USER INTERFACE
Tujuan
-
6.1
Memahami dan menguasai pembuatan dan pengaplikasian Graphical User Interface
Pemahaman Dasar Graphical User Interface
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.
6.2 Komponen-komponen Dasar User Interface dengan Swing
Berikut adalah beberapa komponen dasar antarmuka pengguna (user interface) yang disediakan
oleh Swing:
1. Top level containers: adalah container dasar untuk meletakkan komponen-komponen lain.
Contohnya adalah JFrame, JDialog, dll.
2. Intermediate level containers: merupakan container perantara. Umumnya digunakan hanya untuk
meletakkan atau mengelompokkan komponen-komponen yang digunakan, baik itu container atau
berupa atomic component. Contoh dari Intermediate level container adalah JPanel (panel).
3. Atomic component: merupakan komponen yang memiliki fungsi khusus. Umumnya pengguna
langsusng berinteraksi dengan komponen ini. Contohnya adalah JButton (tombol), JLabel (label),
JTextField, JTextArea (area untuk menulis teks), dll.
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:
Konstruktor
untuk
membentuk
JFrame
adalah
JFrame()
atau
JFrame(String
NamaFrame).
Salah
satu
method
yang
sering
digunakan
di
kelas
JFrame
adalah
setDefaultCloseOperation(int ops). Method ini berfungsi untuk mengatur apa yang akan
dilakukan oleh program ketika tombil close di klik. Parameter method tersebut di antaranya adalah:
1. JFrame.DO_NOTHING_ON_CLOSE: tidak ada satu aktivitas pun yang dilakukan secara
otomatis apabila frame ditutup.
2. JFrame.HIDE_ON_CLOSE: frame hanya disembunyikan, namun secara fisik frame masih ada
di memori sehingga dapat dimunculkan kembali. Merupakan aktivitas default.
3. JFrame.DISPOSE_ON_CLOSE: mengilangkan tampilan frame dari layar, menghilangkannya
dari memori, dan membebaskan resource yang dipakai.
4. JFrame.EXIT_ON_CLOSE: menghentikan eksekusi program.
Selain JFrame, top level container yang lain adalah JDialog. Berbeda dengan JFrame,
JDialog tidak dibuat berdiri sendiri, melainkan dibuat bersama-sama dengan frame sebagai parentnya. 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);
JOptionPane.showConfirmDialog(f2,"ini adalah sebuah contoh
dialog..", "ini judul dialognya tau!",
JOptionPane.OK_CANCEL_OPTION, JOptionPane.QUESTION_MESSAGE);
}
}
6.3 Layout Manager (Pengaturan Tata Letak)
Layout manager berfungsi untuk menyusun komponen-komponen GUI di atas container.
Penggunaan layout manager memudahkan programer untuk menyusun komponen-komponen GUI
dibandingkan dengan menentukan ukuran eksak dan posisi setiap komponen, sehingga para
programmer akan lebih berkonsentrasi terhadap urusan "look and feel" saja.
6.3.1 Border Layout
BorderLayout merupakan default manager untuk ContentPane. Layout ini menempatkan
komponen dengan pendekatan arah mata angin. Komponen-komponen pada layout ini ditempatkan
pada posisi north, south, west, center, east. Coba ketik dan jalankan kode program berikut, yang akan
menampilkan tampilan border layout berikut:
import javax.swing.*;
import java.awt.event.*;
import java.awt.*;
public class DemoBorderLayout extends JFrame implements ActionListener{
private JButton tombol[];
private String names[]={"Hilangkan North","Hilangkan South",
"Hilangkan East","Hilangkan West",
"Hilangkan Center"};
private BorderLayout lout;
public DemoBorderLayout(){
super ("Ini Adalah Contoh Border Layout");
Container c = getContentPane();
lout = new BorderLayout (10,10);
c.setLayout(lout);
tombol = new JButton[names.length];
for (int i=0 ; i < names.length; i++){
tombol[i] = new JButton(names[i]);
tombol[i].addActionListener(this);
}
c.add(tombol[0], BorderLayout.NORTH);
c.add(tombol[1], BorderLayout.SOUTH);
c.add(tombol[2], BorderLayout.EAST);
c.add(tombol[3], BorderLayout.WEST);
c.add(tombol[4], BorderLayout.CENTER);
setSize (500,300);
}
public void actionPerformed(ActionEvent e){
for(int i=0; i<button.length;i++){
if(e.getSource()==button[i])
button[i].setVisible(false);
else button[i].setVisible(true);
layout.layoutContainer(getContentPane());
}
}
public static void main(String[] args) {
DemoBorderLayout dbl = new DemoBorderLayout();
dbl.setVisible(true);
dbl.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}
}
6.3.2 Flow Layout
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 class ContohBoxLayout extends JFrame{
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);
}
public static void main(String[] args){
ContohBoxLayout cbl = new ContohBoxLayout();
cbl.setSize(300, 300);
cbl.setVisible(true);
cbl.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}
}
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);
}
}
Hasil dari program di atas adalah tampilan berikut
6.3.5 Grid Layout
Grid layout merupakan layout manager berbentuk grid. Semua komponen dalam layout ini
memiliki ukuran yang sama.
Konstruktor GridLayout adalah sebagai berikut.
a. GridLayout(rows, columns, hGap, vGap). Konstruktor ini mendefinisikan jumlah
baris, kolom, dan ukuran gap horisontal/vertikal antar elemen dalam pixel.
b. GridLayout(rows, columns). Sama halnya dengan konstruktor pertama, namun dengan nilai
default hGap dan vGap sama dengan 0.
Pelajari kode program berikut:
import javax.swing.*;
import java.awt.event.*;
import java.awt.*;
public class GridLayoutTest extends JFrame{
private JButton tombol[];
private String m[] = {"Satu","Dua","Tiga","Empat","Lima","Enam"};
private Container c;
private GridLayout g;
public GridLayoutTest(){
super("Demonstrasi GridLayout");
g = new GridLayout(2,3,5,5);
c = getContentPane();
c.setLayout(g);
tombol = new JButton[names.length];
for(int i = 0; i<names.length;i++){
tombol[i] = new JButton(m[i]);
c.add(button[i]);
}
setSize(300,300);
show();
}
public static void main(String[] args) {
GridLayoutTest glt = new GridLayoutTest();
glt.addWindowListener(
new WindowAdapter(){
public void windowsClosing(WindowEvent e){
System.exit(0);
}
});
}
}
Output program tersebut adalah tampilan berikut
6.3.6 Grid Bag Layout
Grid bag layout adalah pengaturan layout yang dapat digunakan untuk meletakkan komponen
secara bebas. Setiap komponen dapat menempati ukuran yang berbeda dengan komnponen lainnya.
Setiap komponen dapat menempati lebih dari satu grid.
Berikut ini langkah-langkah untuk menggunakan GridBagLayout :
1. Gambarkan terlebih dahulu desain GUI di kertas.
2. Bagi GUI tersebut ke dalam beberapa grid mulai dari baris dan kolom 0. Hal ini dilakukan untuk
menempatkan komponen di posisi yang benar.
3. Buat sebuah objek GridBagConstraints, untuk menentukan bagaimana komponenkomponen ditempatkan.
4. Kemudian, definisikan variabel instance seperti berikut :
- gridx - kolom.
- gridy - baris.
- gridwidth - jumlah kolom yang dialokasikan.
- gridheight - jumlah baris yang dialokasikan.
- weightx - ukuran ruang horisontal.
- weighty - ukuran ruang vertikal.
5. Inisialisasi nilai weight ke nilai positif (nilai default adalah 0).
6. Definisikan instance variable fill dari GridBagConstraints ke NONE (default), VERTICAL,
HORIZONTAL, atau BOTH.
7. Definisikan Instance variable anchor ke NORTH, NORTHEAST, EAST, SOUTHEAST, SOUTH,
SOUTHWEST, WEST, NORTHWEST, atau CENTER (nilai default).
8. Masukkan komponen dan GridBagConstraints ke method setConstraints milik kelas
GridBagLayout.
gbLayout.setConstraints(c, gbConstraints);
9. Setelah constraints ditentukan, tambahkan komponen ke ContentPane.
container.add(c);
Untuk lebih memahami penggunaan GridBagLayout, pelajari contoh kode program berikut ini.
import javax.swing.*;
import java.awt.*;
public class UjiGbl{
JFrame f;
GridBagLayout gbl;
GridBagConstraints c;
public UjiGbl(){
f = new JFrame("Contoh GridBagLayout");
gbl = new GridBagLayout();
c = new GridBagConstraints();
f.getContentPane().setLayout(gbl);
c.fill = GridBagConstraints.HORIZONTAL;
JButton j1 = new JButton(" 1 ");
c.weightx = 2;//ukuran ruang horizontal
c.gridx = 0; // menempati kolom 0
c.gridy = 0; // menempati baris 0
gbl.setConstraints(j1,c);
f.getContentPane().add(j1);
JButton j2 = new JButton(" 2 ");
c.gridx = 1; // menempati kolom 1
c.gridy = 0; // menempati baris 0
gbl.setConstraints(j2,c);
f.getContentPane().add(j2);
JButton j3 = new JButton(" 3 ");
c.ipady = 30;//tingginya ditambah
c.gridwidth = 2;// tombol menempati dua kolom
c.gridx = 0; // menempati kolom 0
c.gridy = 1; // menempati baris 1
gbl.setConstraints(j3,c);
f.getContentPane().add(j3);
JButton j4 = new JButton(" 4 ");
c.ipady = 50;//tingginya ditambah
c.gridwidth = 1;// tombol menempati satu kolom
c.gridx = 0; // menempati kolom 0
c.gridy = 2; // menempati baris 2
gbl.setConstraints(j4,c);
f.getContentPane().add(j4);
JButton j5 = new JButton(" 5 ");
c.ipady = 0;//tingginya normal
c.gridwidth = 1;// tombol menempati satu kolom
c.gridx = 1; // menempati kolom 1
c.gridy = 2; // menempati baris 2
c.anchor = GridBagConstraints.SOUTH;
gbl.setConstraints(j5,c);
f.getContentPane().add(j5);
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
f.pack();
f.setVisible(true);
}
public static void main(String[] args){
UjiGbl ugbl = new UjiGbl();
}
}
Output dari program tersebut adalah:
6.3.7 Spring Layout
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;
java.awt.Container;
import
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);
//mengatur batasan untuk text field supaya posisinya di
//(sisi_kanan_label+10,10)
l.putConstraint(SpringLayout.WEST,t,10,SpringLayout.EAST, label);
l.putConstraint(SpringLayout.NORTH,t,10,SpringLayout.NORTH, c);
//mengatur posisi content pane: sisi kanannya 5 pixel di luar sisi
//kanan textField dan sisi kirinya 5 pixel di bawah sisi bawah
//komponen terpanjang
l.putConstraint(SpringLayout.EAST,c,5,SpringLayout.EAST, t);
l.putConstraint(SpringLayout.SOUTH,c,5,SpringLayout.SOUTH, t);
f.pack();
f.show();
}
public static void main(String[] args){
ContohSpring cs = new ContohSpring();
}
}
6.4 Event Handler
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
listener yang sering digunakan adalah:
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 class EventHandling{
private JButton b1, b2;
private JTextField t1, t2;
private JPanel panel1,panel2;
private JLabel l1, l2;
private JFrame f;
private double a, b, c;
private String konv1 = "Suhu dalam Celcius adalah...";
private String konv2 = "Suhu dalam Fahrenheit adalah...";
public EventHandling(){
f = new JFrame("Konversi Suhu");
b1 = new JButton("Konversi ke Fahrenheit");
b2
l1
l2
t1
t2
=
=
=
=
=
new
new
new
new
new
JButton("Konversi ke Celcius");
JLabel("Suhu dalam Celcius");
JLabel("Suhu dalam Fahrenheit");
JTextField(10);
JTextField(10);
}
public void hitungSuhu(){
panel1 = new JPanel();
panel2 = new JPanel();
b1.addActionListener(new FahrenheitHandler());
b2.addActionListener(new CelciusHandler());
panel1.add(l1);
panel1.add(t1);
panel1.add(b1);
panel2.add(l2);
panel2.add(t2);
panel2.add(b2);
JTabbedPane tab = new JTabbedPane();
tab.add(panel1,"Celcius ke Fahrenheit");
tab.add(panel2,"Fahrenheit ke Celcius");
f.getContentPane().add(tab, BorderLayout.NORTH);
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
f.setSize(600,100);
f.setVisible(true);
}
private class FahrenheitHandler implements ActionListener{
public void actionPerformed(ActionEvent e){
try{
a = Double.parseDouble(t1.getText());
b = a*1.8+32;
JOptionPane.showConfirmDialog(null,konv2+b,"Hasil",
JOptionPane.OK_CANCEL_OPTION,JOptionPane.INFORMATION_MESSAGE);
}catch(Exception j){
JOptionPane.showConfirmDialog(null,"Masukkan Angka!","Error",
JOptionPane.OK_CANCEL_OPTION,JOptionPane.INFORMATION_MESSAGE);
}
}
}
private class CelciusHandler implements ActionListener{
public void actionPerformed(ActionEvent e){
try{
a = Double.parseDouble(t2.getText());
b = (a-32)/1.8;
JOptionPane.showConfirmDialog(null,konv1+b,"Hasil",
JOptionPane.OK_CANCEL_OPTION,JOptionPane.INFORMATION_MESSAGE);
}catch(Exception j){
JOptionPane.showConfirmDialog(null,"Masukkan Angka!","Error",
JOptionPane.OK_CANCEL_OPTION,JOptionPane.INFORMATION_MESSAGE);
}
}
}
public static void main(String[] args){
EventHandling eh = new EventHandling();
eh.hitungSuhu();
}
}
Hasil dari kode di atas adalah program untuk mengkonversi suhu dengan tampilan berikut:
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
NETBEANS DAN JAVA DATABASE CONNECTION
Tujuan
-
Mengetahui kegunaan dan mampu menggunakan netbeans
-
Memahami
konsep
Java
Database
Connection
dan
Java
Applet,
dan
mampu
mengimplementasikannya
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
2. Pada kelas main.java buatlah kode program untuk menampilkan tulisan
Nama Mahasiswa
: Ali Kobra
NIM
: 1500661
Fakultas
: Sains
Catatan: untuk running program tekan Shift+F6
7.1.1
Membuat GUI dengan Netbeans
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:
7.2
Java Database Connectivity (JDBC)
Java Database Connectivity (JDBC) adalah suatu fungsi dalam java yang menghubungkan
aplikasi yang dibangun dengan menggunakan bahasa Java dengan database. JDBC adalah versi
ODBC yang dibuat oleh Sun Microsystem. JDBC dibangun dengan Java API dapat digunakan untuk
lintas platform dan didasarkan pada X/Open SQL Level Interface.
Dengan menggunakan JDBC API, database dari vendor-vendor ternama seperti Oracle,
Sysbase, dan lain-lain dapat diakses. Kita dapat melakukan pengiriman perintah-perintah SQL
RDBMS. Kelas-kelas serta interface-interface JDBC API dapat diakses dalam package java.sql (core
API) atau javax.sql(standard extension API).
Untuk dapat mengakses database di server kita membutuhkan driver. Setiap server dari vendor
yang berbeda mempunyai driver yang berbeda-beda. Driver dapat diunduh di alamat
http://www.oracle.com/technetwork/database/features/jdbc/index-091264.html
Pada Netbeans 6.9.1 sudah terdapat beberapa driver yang dapat digunakan langsung. Di
antaranya ialah Java DB, MySQL, dan PostgreSQL. Untuk menggunakannya, tinggal klik kanan pada
folder library pada project yang dibuat, lulu pilih driver yang akan kita pakai.
Nama driver berbeda-beda untuk setiap database yang digunakan. Berikut adalah nama-nama
driver untuk database:
-
sun.jdbc.odbc.jdbcOdbcDriver (untuk MS Access)
-
oracle.jdbc.driver.OracleDriver (untuk Oracle)
-
org.gjt.mm.mysql.Driver (untuk MySQL)
Sintaks yang digunakan untuk menginisialisasi driver adalah
Class.forName(“nama driver”);
Setiap database mempunyai nama URL, di antaranya:
-
jdbc:odbc:nama_database (untuk MS Access)
-
jdbc:oracle:thin:localhost:1521:ORCL (untuk Oracle)
-
jdbc:mysql://localhost/nama_database (untuk MySQL)
Sintaks yang digunakan untuk koneksi ke data base menggunakan URL adalah
Connection koneksi = DriverManager.getConnection(“nama_URL”,”userID”,”password”)
7.2.1
Menggunakan Database
Kelas pada Java yang digunakan untuk mengeksekusi suatu query adalah Statement. Kelas
ini digunakan setelah menginisialisasi variabel koneksi pada Connection. Misalkan variabel
koneksinya adalah koneksi, maka
Statement stm = koneksi.createStatement();
Suatu query diakhiri dengan cara menutup variabel statement yang sudah diinisialisasi. Misalkan
variabel statementnya adalah stm, maka sintaks untuk menutup variabel statement tersebiut adalah
stm.close().
Setelah variabel statement selesai diinisialisasi, selanjutnya kita inisialisasi variabel
ResultSet yang akan digunakan untuk menyimpan suatu baris record pada database. Artinya,
variabel ini adalah pointer yang akan menunjuk suatu baris pada table. Sintaksnya adalah
ResultSet variabelSet;
Untuk mengakhiri koneksi ke database gunakan sintaks berikut (misalkan nama variabel
koneksinya adalah koneksi)
Koneksi.close()
7.2.2
Contoh kasus
Mari kita lihat contoh kasus penggunaan database. Database yang akan digunakan pada
praktikum kali ini adalah “Oracle Database 10g Express Edition” yang bisa diunduh di alamat:
http://www.oracle.com/technetwork/database/express-edition/downloads/102xewinsoft-090667.html
Ada tiga versi untuk oracle express edition, untuk Windows formatnya EXE, untuk Linux
turunan Debian Formatnya DEB, untuk Linux turunan Redhat formatnya RPM. Di praktikum ini akan
digunakan untuk versi Windows.
Berikut langkah-langkah untuk menginstal Oracle Database 10g Express Edition. Buka file
installernya, setelah itu tunggu sampai proses selesai :
Setelah persiapan instalalsi selesai, maka akan keluar dialog ini :
Setelah itu klik next :
Accept untuk lisensinya, setelah itu klik next lagi
Setelah itu tentukan lokasi untuk tempat file instalasi Oracle XE tersebut, setelah itu klik next :
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.
Kita akan membuat tabel database. Tekan tombol Create
Lalu pilih Table
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:
Isikan nama library, misalkan namanya JDBC-Oracle. Klik OK.
Setelah muncul tampilan berikut, klik Add JAR/Folder
Setelah muncul jendela Browse JAR/Folder, cari tempat di mana driver-nya disimpan, misalkan
disimpan di
C:\oraclexe\app\oracle\product\10.2.0\server\jdbc\lib\ojdbc14.jar.
Setelah itu klik tombol Add JAR/Folder. Kemudian klik OK.
Selanjutnya buat package baru dan diberi nama Data dan buat kelas baru dalam package
tersebut dan diberi nama DataBase.java. Tuliskan kode berikut dalam kelas tersebut:
package Data;
import javax.swing.JOptionPane;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;
import java.sql.Connection;
public class DataBase {
private String dbuser = "belajar";
private String dbpaswd = "belajar123";
private Statement stm = Tempat
null; driver disimpan
private Connection con = null;
private String err = "Komunikasi Error";
private ResultSet rss = null;
public DataBase(){
// load driver Oracle
try{
Class.forName("oracle.jdbc.driver.OracleDriver");
}catch(Exception e){
JOptionPane.showMessageDialog(null,""+e.getMessage(),"Driver
Error",JOptionPane.WARNING_MESSAGE);
}
try{
con =
DriverManager.getConnection("jdbc:oracle:oci8:@localhost:1521:XE",dbuser,
dbpaswd);
}catch(Exception e){
JOptionPane.showMessageDialog(null,"Error:"+e.getMessage(),err,
JOptionPane.WARNING_MESSAGE);
}
}
public ResultSet getData(String SQLString){
try{
stm = con.createStatement();
rss = stm.executeQuery(SQLString);
}catch(Exception e){
JOptionPane.showMessageDialog(null,"Error :"
+e.getMessage(),err,JOptionPane.WARNING_MESSAGE);
}
return rss;
}
public int query(String SQLString){
int i = 0;
try{
stm = con.createStatement();
stm.executeUpdate(SQLString);
i = 1;
}catch(Exception e){
JOptionPane.showMessageDialog(null,"error: "
+e.getMessage(),err,JOptionPane.WARNING_MESSAGE);
}
return i;
}
}
Setelah membuat kelas DataBase.java, selanjutnya modifikasi kelas Mahasiswa.java dengan
menambahkan dua method saveMahasiswa dan getMahasiswa (tambahkan import
java.sql.ResultSet dan import Data.DataBase). Berikut sintaks untuk kedua method
tambahan tersebut
public void saveMahasiswa(){
DataBase d1 = new DataBase();
int i;
String s = "INSERT INTO MAHASISWA VALUES('"+this.nama+"','"+this.Nim+"',
'"+this.fakultas+"')";
i = d1.query(s);
if(i==1){
javax.swing.JOptionPane.showMessageDialog(null,"insert berhasil");
}
else{javax.swing.JOptionPane.showMessageDialog(null,"insert gagal");}
}
public ResultSet getMahasiswa(){
ResultSet rs = null;
DataBase db1 = new DataBase();
String str ="Select * From MAHASISWA";
rs = db1.getData(str);
return rs;
}
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:
private void jButton1ActionPerformed(java.awt.event.ActionEvent evt) {
Mahasiswa m = new Mahasiswa(jTextField1.getText(),
Integer.parseInt(jTextField2.getText()),jTextField3.getText());
m.saveMahasiswa();
jTextField1.setText("");
jTextField2.setText("");
jTextField3.setText("");
}
Sedangkan sintaks kode action listener untuk tombol “Tampilkan” adalah:
private void jButton2ActionPerformed(java.awt.event.ActionEvent evt) {
Mahasiswa m = new Mahasiswa();
ResultSet rs = null;
rs = m.getMahasiswa();
int i = 0 ;
try{
while(rs.next()){
jTable1.setValueAt(rs.getString("nama"),i,0);
jTable1.setValueAt(rs.getString("Nim"),i,1);
jTable1.setValueAt(rs.getString("fakultas"),i,2);
i++;
}
rs.close();
}catch(SQLException ex){
Logger.getLogger(FormIsian.class.getName()).log(Level.SEVERE,null,ex);
}
}
Selanjutnya lakukan deploy aplikasi ini dengan mengklik Run > Clean and Build Project atau tekan
Shift + F121. Berikut output dari program tersebut:
Memasukkan data
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.