GUI

slimwhimperSoftware and s/w Development

Nov 3, 2013 (3 years and 10 months ago)

603 views

MODUL
III

GRAPHICAL USER INTERFACE

Tujuan

-

Memahami dan menguasai pembuatan dan pengaplikasian Graphical User Interface


6.1

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 con
toh 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


J
C
omponent

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 me
nggambar 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 dial
og 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. Conto
h 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, JTextAr
ea (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 tersebu
t 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 k
embali. 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 contain
er 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:







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
defau
lt

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.*;

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);





JO
ptionPane.showConfirmDialog(f2,
"ini adalah sebuah contoh


dialog..",
"ini judul d
ialognya tau!",


JOptionPane.OK_CANCEL_OPTION, JOptionPane.QUESTION_MESSAGE);

}

}





















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 :

import javax.swing.*;

import java.awt.event.*;

import java.awt.*;


public class
DemoBorderLayout

extends JFrame implements
A
ctionListener{


private JButton
tombol
[];


private String names[]=
{"Hilangkan Nort
h","Hilangkan South",

"Hilangkan East","Hilangkan West",

"Hilangkan Center"};



private BorderLayout l
out
;




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 (
5
00,
3
00);




}




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);



}

}


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:















Output program
di atas adalah sebagai 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("T
ombol 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);




}


});


}

}


6.3.3
Box Layout


Layout
jenis ini meletakkan komponen
-
komponen dalam satu baris atau satu kolom saja.

Pelajari contoh berikut.


















Keluarannya adalah




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){



ContohB
oxLayout cbl = new ContohBoxLayout();



cbl.setSize(300, 300);



cbl.setVisible(true);



cbl.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);


}

}


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:



















Hasil dari program di atas adalah tampilan 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 JRadi
oButton("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);


}

}



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 extend
s 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.setL
ayout(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 ob
jek
GridBagConstraints
, untuk menentukan bagaimana komponen
-
komponen 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

Gr
idBagLayout.

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;



















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.SpringLayout;

import javax.swing.JFrame;















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();


}

}




import javax.swing.JTextField;

import javax.swing.JLabel;

import java.awt.Container;


public class ContohSpring{


JFrame f;


Container c;


SpringLayout l;


JLabel label;


JTextField t;



public ContohSpring(){


f = new JFrame("De
mo 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);


































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
pr
oses 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.


//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.p
utConstraint(SpringLayout.SOUTH,c,5,SpringLayout.SOUTH, t);


f.pack();



f.show();



}


public static void main(String[] args){


ContohSpring cs = new ContohSpring();




}

}


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 diketikka
n.

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 un
tuk 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 = 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);


}



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",


J
OptionPane.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,"Ma
sukkan 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 prog
ram 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 ko
tak di
alog 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



: 15
00661

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


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

ini JFrame (Work Area)



Di jendela inilah kita akan

menuliskan kode program action dari tombol
Masukkan
. Di dalam blok
metho
d

jButton1ActionPerformed()
,
tuliskan kode berikut:
C
ompile dan run kelas
FormIsian.java
, maka akan keluar tampilan GUI berikut:


7.2

J
ava Database Connectivity (JDBC)

Java Database Conn
ectivity (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
pla
tform

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 int
erface
-
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 menggunaka
nnya, 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 (untu
k 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.get
Connection(“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 ad
alah
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



A
da
tiga

ver
si untuk oracle express edition, untuk

W
indows

formatnya EXE,
untuk L
inux
turunan
Debian F
ormatnya DEB,
untuk L
inux turunan
R
edhat formatnya RPM
. Di

praktikum ini akan
digunakan untuk versi Windows.

Berikut langkah
-
langkah untuk menginstal Oracle Database 10g Express Edition. B
uka file
installernya, setelah itu tunggu sampai proses selesai :











Setelah persiapan instalalsi selesai
, maka akan keluar dialog ini :


S
etelah itu klik next :


A
ccept 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 ingin
kan sebagai

password
untuk

user, setelah itu klik next :


G
ambar di

atas
adalah

tampilan hasil instalasi, dan jangan lupa dicat
a
t untuk portnya, setelah itu klik
INSTALL :


T
unggu sampai proses instalasi selesai…


S
etelah selesai ceklis “Launch the
database homepage” dan klik finish, maka akan keluar browser
yang memb
ua
t homepage database oracle express edition :


S
etelah itu login
menggunakan

user SYSTEM dan password yang tadi d
imasukkan saat proses
instalasi. Selesai.



Sekarang login ke Oracle
XE

lewat menu :


Setelah b
rowsernya

tampil,
masukkan username SYSTEM dan password

sesuai dengan password
yang anda

buat
pada saat instalasi :


S
etelah itu


masuk ke bagian ADMINISTRATOR

> DATABASE USERS

> CREATE USER :


S
etelah itu buat user baru, ot
omatis pula akan terbuat


schema baru :


S
etelah selesai, tekan tombol CREATE , dan sekarang kita
su
dah berhasil membuat user sekaligus
schema baru di
Oracle XE

dengan nama schema “belajar”
. S
ekarang
anda

bisa login pada awal
halaman website
Oracle XE

tad
i dengan user “belaja
r” 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
T
able



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 ma
ksimumnya 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).



S
elanjutnya 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 mu
ncul tampilan yang memperlihatkan tabel
database
MAHASISWA





Sekarang kita lakukan setting Oracle di
N
etbeans.
T
api sebelumnya
anda

harus punya driver
oraclenya
terlebih dahulu.

T
api
tak perlu
khawatir
karena
waktu
anda menginstall oracle xe, otomatis
d
river nya

ikut terinstal. Coba
li
hat

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 kan
an
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

sel
esai klik tombol OK, dan sekarang driver Oracle
su
dah terinstall di
N
etbeans , tinggal kita
buat
koneksi ke schema BELAJAR yang sebelumnya kita buat :


C
aranya klik kanan nama driver oraclenya,
misalkan
nama
nya Oracle OCI. Setelah itu
itu klik
C
o
nnect Usi
ng :



Setelah
itu isi atributnya seperti dibawah ini :



Untuk host nya gunakan localhost, dan untuk SID kita pakai

XE karena
Kita memakai Oracle
E
xpress
E
dition,
sedangkan portnya
1521, soal
nya pada saat proses instalasi Oracle XE menggunakan
port
ini, untuk username dan password kita
gunakan

username
dan password
yang
telah kita buat
sebelumnya.

S
etelah itu klik tombol OK :


P
ilih schema BELAJAR, karena
kita menggunakan

user BELAJAR,setelah itu klik OK :


Selesai.


Selanjutnya klik kanan pada fol
der
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 nam
anya 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:


































Tempat driver disimpan

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 = null;


private Connection con = null;


private String err = "Komunikasi Error";


private ResultSet rss = null;


public DataBase(){


// load driver Oracle


try{


Class.forName("oracle.jd
bc.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.sho
wMessageDialog(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














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:







Sedangkan sintaks kode
action listener
untuk tombol “Tampilkan” adalah:









public void saveMahasiswa(){


DataBase d1 = new DataBase();


int i;


Strin
g s = "INSERT INTO MAHASISWA

V
ALUES('"+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 g
agal");}

}



public ResultSet getMahasiswa(){


ResultSet rs = null;


DataBase db1 = new DataBase();


String str ="Select * From MAHASISWA";


rs = db1.getData(str);


return rs;

}

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("");


}

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.se
tValueAt(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.