gui in java

45
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 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

Upload: dimzhenry

Post on 23-Oct-2015

286 views

Category:

Documents


8 download

DESCRIPTION

mempelajari teori GUI dalam Java beserta contoh

TRANSCRIPT

Page 1: GUI in Java

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

Page 2: GUI in Java

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

}

}

Page 3: GUI in Java

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

Page 4: GUI in Java

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

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

}

}

Page 5: GUI in Java

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

}

}

Page 6: GUI in Java

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

}

});

}

}

Page 7: GUI in Java

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

ContohBoxLayout cbl = new ContohBoxLayout();

cbl.setSize(300, 300);

cbl.setVisible(true);

cbl.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

}

}

Page 8: GUI in Java

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

}

}

Page 9: GUI in Java

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

}

});

}

}

Page 10: GUI in Java

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

Page 11: GUI in Java

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;

Page 12: GUI in Java

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

Page 13: GUI in Java

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.

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

}

}

Page 14: GUI in Java

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

Page 15: GUI in Java

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

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

}

}

Page 16: GUI in Java

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!

Page 17: GUI in Java

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.

Page 18: GUI in Java

4. Maka akan muncul tampilan seperti di bawah. Lalu klik Finish

Project otomatis

telah memiliki main

class dengan nama

yang sama dengan

nama project

Page 19: GUI in Java

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.

Page 20: GUI in Java

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

Page 21: GUI in Java

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

Page 22: GUI in Java

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)

Page 23: GUI in Java

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)

Page 24: GUI in Java

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

Page 25: GUI in Java

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 :

Page 26: GUI in Java

Setelah itu klik next :

Accept untuk lisensinya, setelah itu klik next lagi

Page 27: GUI in Java

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 :

Page 28: GUI in Java

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.

Page 29: GUI in Java

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 :

Page 30: GUI in Java

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.

Page 31: GUI in Java

Setelah masuk, pilih object browser.

Kita akan membuat tabel database. Tekan tombol Create

Page 32: GUI in Java

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.

Page 33: GUI in Java

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

Page 34: GUI in Java

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 :

Page 35: GUI in Java

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 :

Page 36: GUI in Java

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 :

Page 37: GUI in Java

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.

Page 38: GUI in Java

Buat kolom-kolom “nama”, “Nim”, dan “fakultas” seperti gambar berikut:

Page 39: GUI in Java

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

Page 40: GUI in Java

Tekan tombol Create. Akan muncul dialog berikut:

Isikan nama library, misalkan namanya JDBC-Oracle. Klik OK.

Setelah muncul tampilan berikut, klik Add JAR/Folder

Page 41: GUI in Java

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.

Page 42: GUI in Java

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

}

}

Page 43: GUI in Java

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;

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;

}

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.setValueAt(rs.getString("fakultas"),i,2);

i++;

}

rs.close();

}catch(SQLException ex){

Logger.getLogger(FormIsian.class.getName()).log(Level.SEVERE,null,ex);

}

}

Page 44: GUI in Java

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:

Page 45: GUI in Java

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.