GUI (GRAPHICAL USER INTERFACE)
PENJELASAN TENTANG KONSEP GUI
Pada dasarnya pemrograman GUI, adalah pemrograman yang mengandalkan kemampuan tampilan dalam bentuk grafik. dimana program yang dibuat dapat memberikan kenikmatan tersendiri dalam penggunaannya. Tidak lagi monoton, hitam-putih, mode DOS dan lain sebagainya. Kalau kita lihat pada gambar berikut, menjelaskan bahwa interaksi yang terjadi antara user dengan program melalui sebuah tampilan yang sudah berbentuk grafik. Istilah ini sering di sebut dengan Event Driven atau Event-based Programming. Event-based programming adalah sebuah paradigma pemrograman yang alur programnya ditentukan oleh aktifitas (aksi) user atau melalui message yang diberikan oleh program lainnya. Untuk bisa menerapkannya dibutuhkan suatu arsitektureventdriven yang berfokus pada setiap eventaktifitas user.
Tiga tipe program yang berbasis kepada GUI komponen :
1. Graphical components (GUI) Yaitu berupa rancangan tampilan program yang dikemas dengan menggunakan komponen-komponen grafik (JFrame, JButton, JTextBox, JComboBox........)
2. Listener methods Yaitu berfungsi untuk menerima dan merespon event yang terjadi dari sebuah komponen.
3. Application methods Fungsi-fungsi atau baris perintah yang berguna bagi pengguna untuk menghasilkan kegiatan dalam bentuk respon. (Program yang akan di jalankan saat event terjadi)
Prgoram dikatakan SEMPURNA jika ketiga tipe ini di satukan dalam sebuah program.
Class Komponen, package dan Interface pada aplikasi
Banyak sekali komponen, package dan interface yang sudah disiapkan oleh java untuk membuat sebuah tampilan yang berbentuk GUI. Namun pada bagian ini yang akan dijelaskan adalah yang terkait dengan aplikasi yang akan di buat atau dipaparkan dalam perkuliahan ini saja.
1. Daftar komponen yang akan digunakan atau yang akan dipaparkan dalam perkuliahan ini dapat dilihat pada tabel berikut :
2. Daftar package (tempat komponen berada) yang digunakan dalam aplikasi yang akan kita buat dapat dilihat pada tabel berikut :
3. Untuk melakukan interaksi antara komponen dengan user perlu ditambahkan Interface. Dimana daftar interface yang digunakan pada aplikasi yang akan kita buat dapat dilihat pada Tabel berikut :
Design Form Master
Daftar Matakuliah di butuhkan dalam mengelola sebuah sistem perkuliahan, untuk dapat membuat daftar matakuliah secara digital diperlukan sebuah form entri data matakuliah yang natinya akan di laksanakan oleh user di bagian akademik. Adapun langkah-langkah untuk membuat form entri data matakuliah ini dapat dilihat sbb :
A. Merancang Tampilan Form 1. Buka Editor JCreator Pilih menu File >> New >> File sbb :
Kemudian pada Jendela File Wizard >> type file dengan pilihan Java File kemudian pilih tombol Next seperti gambar berikut:
Kemudian pada Jendela File Wizard >> type path isikan nama file dan
lokasi
dimana file disimpan berada, kemudian klik tombol Finish seperti gambar berikut:
Setelah menekan tombol Finish akan di tampilkan layar editting sebagai tempat kita untuk menuliskan kode program, seperti gambar berikut:
4. Membuat Form Kosong
Kode Program
1. /*
2. * File Name : MatKul.java
3. * Call By : Menu Utama
4. * Author : M. Anif, M.Kom
5. * Date Create : 20 Maret 2019
6. */
7. import javax.swing.
8. *;
9. public class MatKul extends JFrame{
10. // konstruktor MatKul
11. public MatKul(){
12. setTitle(".:: Form Entri Data Matakuliah ::.");
13. setSize(450, 230);
14. setLocationRelativeTo(this);
15.
16. show();
17. }
18.
19. // method main
20. public static void main(String[] args){
21. new MatKul();
22. }
23. }
5. Menambahkan Objek pada Form Kosong
- Kode Program :
/* * File Name : MatKul.java
* Call By : Menu Utama
* Author : M. Anif, M.Kom
* Date Create : 20 Maret 2019
*/ import javax.swing.
*;
public class MatKul extends JFrame{
// konstruktor MatKul
JLabel lblKodeMtk = new JLabel("Kode Matakuliah :");
JLabel lblNamaMtk = new JLabel("Nama :");
JLabel lblSKS = new JLabel("SKS :");
JLabel lblKodePrasyarat = new JLabel("Kode Prasyarat :");
JTextField txtKodeMtk = new JTextField();
JTextField txtNamaMtk = new JTextField();
JTextField txtSKS = new JTextField();
JTextField txtKodePrasyarat = new JTextField();
JButton cmdTambah = new JButton("Tambah");
JButton cmdUbah = new JButton("Ubah");
JButton cmdHapus = new JButton("Hapus");
JButton cmdBersih = new JButton("Bersih");
public MatKul(){
setTitle(".:: Form Entri Data Matakuliah ::.");
setSize(450, 230);
setLocationRelativeTo(this);
// mengatur layout form u/ menampilkan objek getContentPane().setLayout(null);
// letak objek pada form (x, y, width, height) lblKodeMtk.setBounds(10, 20, 100, 25); lblKodeMtk.setBounds(10, 20, 100, 25);
lblNamaMtk.setBounds(10, 50, 100, 25);
lblSKS.setBounds(10, 80, 100, 25);
lblKodePrasyarat.setBounds(10, 110, 100, 25);
txtKodeMtk.setBounds(120, 20, 100, 25);
txtNamaMtk.setBounds(120, 50, 300, 25);
txtSKS.setBounds(120, 80, 100, 25);
txtKodePrasyarat.setBounds(120, 110, 100, 25);
cmdTambah.setBounds(10, 150, 80, 25);
cmdUbah.setBounds(110, 150, 80, 25);
cmdHapus.setBounds(210, 150, 80, 25);
cmdBersih.setBounds(310, 150, 80, 25);
// menambahkan objek ke form getContentPane().add(lblKodeMtk); getContentPane().add(lblKodeMtk);
getContentPane().add(lblNamaMtk);
getContentPane().add(lblSKS);
getContentPane().add(lblKodePrasyarat);
getContentPane().add(txtKodeMtk);
getContentPane().add(txtNamaMtk);
getContentPane().add(txtSKS);
getContentPane().add(txtKodePrasyarat);
getContentPane().add(cmdTambah);
getContentPane().add(cmdUbah);
getContentPane().add(cmdHapus);
getContentPane().add(cmdBersih);
show(); }
// method main public static void main(String[] args){
new MatKul();
} }
6.Setelah itu saya akan merunningkan program tersebut dengan cara klik menu run -> pilih run project atau run file ataupun dengan cara tekan F5 :
Setelah selasai menjalankan program tersebut, kalian pilih menu Tools -> pilih Stop Tool atau dengan cara tekan CTRL + B untuk memberhentikan program sedang berjalan.
7.Setelah selasai menambahkan objek pada form tersebut,
saya akan membuat method pada button Bersih .
- Kode Program :
/*
* File Name : MatKul.java
* Call By : Menu Utama
* Author : M. Anif, M.Kom
* Date Create : 20 Maret 2019
*/ import javax.swing.
*; public class MatKul extends JFrame{
// Sisipkan deklarasi objek di sini JLabel lblKodeMtk = new JLabel("Kode Matakuliah :");
JLabel lblNamaMtk = new JLabel("Nama :");
JLabel lblSKS = new JLabel("SKS :");
JLabel lblKodePrasyarat = new JLabel("Kode Prasyarat :");
JTextField txtKodeMtk = new JTextField();
JTextField txtNamaMtk = new JTextField();
JTextField txtSKS = new JTextField();
JTextField txtKodePrasyarat = new JTextField();
JButton cmdTambah = new JButton("Tambah");
JButton cmdUbah = new JButton("Ubah");
JButton cmdHapus = new JButton("Hapus");
JButton cmdBersih = new JButton("Bersih");
// konstruktor MatKul public MatKul(){
setTitle(".:: Form Entri Data Matakuliah ::.");
setSize(450, 230); setLocationRelativeTo(this);
// atur layout form agar dapat menampilkan objek di dalam form getContentPane().setLayout(null);
// atur letak objek di layar monitor (x, y, width, height) lblKodeMtk.setBounds(10, 20, 100, 25);
lblNamaMtk.setBounds(10, 50, 100, 25);
lblSKS.setBounds(10, 80, 100, 25);
lblKodePrasyarat.setBounds(10, 110, 100, 25);
txtKodeMtk.setBounds(120, 20, 100, 25);
txtNamaMtk.setBounds(120, 50, 300, 25);
txtSKS.setBounds(120, 80, 100, 25);
txtKodePrasyarat.setBounds(120, 110, 100, 25);
cmdTambah.setBounds(10, 150, 80, 25);
cmdUbah.setBounds(110, 150, 80, 25);
cmdHapus.setBounds(210, 150, 80, 25);
cmdBersih.setBounds(310, 150, 80, 25);
// menambahkan objek ke form getContentPane().add(lblKodeMtk); getContentPane().add(lblNamaMtk);
getContentPane().add(lblSKS);
getContentPane().add(lblKodePrasyarat);
getContentPane().add(txtKodeMtk);
getContentPane().add(txtNamaMtk);
getContentPane().add(txtSKS);
getContentPane().add(txtKodePrasyarat);
getContentPane().add(cmdTambah);
getContentPane().add(cmdUbah);
getContentPane().add(cmdHapus);
getContentPane().add(cmdBersih);
// membersihkan tampilan form bersih();
show(); } void bersih(){
// mengosongkan teks txtKodeMtk.setText("");
txtNamaMtk.setText(""); txtSKS.setText("");
txtKodePrasyarat.setText("");
// membuat teks tidak bisa di edit txtNamaMtk.setEditable(false);
txtSKS.setEditable(false);
txtKodePrasyarat.setEditable(false);
// menonaktifkan tombol cmdTambah.setEnabled(false);
cmdUbah.setEnabled(false);
cmdHapus.setEnabled(false);
cmdBersih.setEnabled(true);
// Menempatkan kursor pada teks Kode txtKodeMtk.requestFocus(); }
// method main public static void main(String[] args){
new MatKul();
}
}
8. Setelah itu saya akan merunningkan program tersebut dengan cara klik menu run -> pilih run project atau run file ataupun dengan cara tekan F5 :
Tampilan Outputnya :
Simpan dengan nama Kalender.java
import java.util.Date;
import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Calendar;
public class Kalender {
private String tgl, bln, thn, buln="";
private int tg, bl, th; //tgl sekarang
private int tgL, blL, thL; //tgl lahir
private int h, b, t; //usia
public Kalender(){
DateFormat dateFormat = new SimpleDateFormat("ddMMyyyy");
Calendar cal = Calendar.getInstance();
String ab = dateFormat.format(cal.getTime());
char a[] = new char[8];
for(int i=0; i < 8;i++){
a[i] = ab.charAt(i);
}
tgl = ""+a[0]+a[1];
bln = ""+a[2]+a[3];
thn = ""+a[4]+a[5]+a[6]+a[7];
if(bln.equals("01")) buln = "Januari";
else if(bln.equals("02")) buln = "Februari";
else if(bln.equals("03")) buln = "Maret";
else if(bln.equals("04")) buln = "April";
else if(bln.equals("05")) buln = "Mei";
else if(bln.equals("06")) buln = "Juni";
else if(bln.equals("07")) buln = "Juli";
else if(bln.equals("08")) buln = "Agustus";
else if(bln.equals("09")) buln = "September";
else if(bln.equals("10")) buln = "Oktober";
else if(bln.equals("11")) buln = "November";
else if(bln.equals("12")) buln = "Desember";
tg = Integer.parseInt(tgl);
bl = Integer.parseInt(bln);
th = Integer.parseInt(thn);
}
public String getTanggal() {
String hasil = tgl+" "+buln+" "+thn;
return hasil;
}
public void setTglLahir(int h, int b, int t){
tgL = h;
blL = b;
thL = t;
}
public void hitungUsia(){
h = tg - tgL;
b = bl - blL;
t = th - thL;
if(b < 0){
bl += 12;
t -= 1;
b = bl - blL;
}
if(h < 0){
b -=1;
bl -=1;
if(bl==2 && t%4==0) h = (tg+29)-tgL;
else if(bl==2 && t%4!=0) h = (tg+28)-tgL;
else if(bl==1||bl==3||bl==5||bl==7||bl==8||bl==10||bl==12) h = (tg+31)-tgL;
else h = (tg+30)-tgL;
}
}
public String getTgl(){
return Integer.toString(h);
}
public String getBln(){
return Integer.toString(b);
}
public String getThn(){
return Integer.toString(t);
}
}
Selanjut nya Simpan kemudian Build dan Running file nya , Sehabis itu Ketikan kembali contoh program berikut nya :
Simpan dengan nama GuiTes.java
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import java.awt.Color;
import java.awt.Graphics;
public class GuiTes extends JFrame{
JTextField textTgl, textBln, textThn, text1, text2, text3;
JButton hitung;
Kalender tanggal;
public GuiTes(){
tanggal = new Kalender();
setup();
pack();
show();
}
public static void main(String [] args){
GuiTes mul = new GuiTes();
}
public void setup(){
Container contenPane= getContentPane();
JPanel panel1 = new JPanel();
panel1.setLayout(new FlowLayout());
panel1 = new JPanel(){
public Dimension getPreferredSize(){
Dimension size = super.getPreferredSize();
size.width = 200;
size.height = 40;
return size;
}
};
JLabel label1 = new JLabel("Masukkan Tanggal Lahir Anda");
panel1.add(label1);
JLabel label2 = new JLabel("Tanggal ");
panel1.add(label2);
JLabel label3 = new JLabel("Bulan ");
panel1.add(label3);
JLabel label4 = new JLabel("Tahun ");
panel1.add(label4);
JPanel panel2 = new JPanel();
panel2.setLayout(new FlowLayout());
panel2 = new JPanel(){
public Dimension getPreferredSize(){
Dimension size = super.getPreferredSize();
size.width = 200;
size.height = 100;
return size;
}
};
textTgl = new JTextField("", 4);
panel2.add(textTgl);
textBln = new JTextField("", 4);
panel2.add(textBln);
textThn = new JTextField("", 4);
panel2.add(textThn);
hitung = new JButton(" Hitung ");
hitung.setBackground(new Color(102, 255, 102));
hitung.addActionListener(new ButtonHandler());
panel2.add(hitung);
JPanel panel5 = new JPanel();
JLabel tglSkr = new JLabel();
tglSkr.setForeground(new Color(255, 255, 255));//-----------------------------------------
tglSkr.setText("\t\tSekarang "+tanggal.getTanggal()+"\t\t");
panel2.add(tglSkr);
JLabel usia = new JLabel();
usia.setForeground(new Color(255, 255, 0));
usia.setText("Saat ini usia anda adalah");
panel2.add(usia);
JPanel panel3 = new JPanel();
panel3 = new JPanel(){
public Dimension getPreferredSize(){
Dimension size = super.getPreferredSize();
size.width = 200;
size.height = 120;
return size;
}
};
text1 = new JTextField("", 5);
panel3.add(text1);
JLabel label12 = new JLabel(" Tahun ");
panel3.add(label12);
text2 = new JTextField("", 5);
panel3.add(text2);
JLabel label13 = new JLabel(" Bulan ");
panel3.add(label13);
text3 = new JTextField("",5);
panel3.add(text3);
JLabel label14 = new JLabel(" Hari ");
panel3.add(label14);
contenPane.add(panel1, BorderLayout.NORTH);
contenPane.add(panel2, BorderLayout.CENTER);
contenPane.add(panel3, BorderLayout.SOUTH);
}
public class ButtonHandler implements ActionListener{
public void actionPerformed(ActionEvent e){
if(e.getSource()==hitung){
//textTgl, textBln, textThn
int a = Integer.parseInt(textTgl.getText());
int b = Integer.parseInt(textBln.getText());
int c = Integer.parseInt(textThn.getText());
tanggal.setTglLahir(a, b, c);
tanggal.hitungUsia();
text1.setHorizontalAlignment(JTextField.RIGHT);
text1.setText(tanggal.getThn());
text2.setHorizontalAlignment(JTextField.RIGHT);
text2.setText(tanggal.getBln());
text3.setHorizontalAlignment(JTextField.RIGHT);
text3.setText(tanggal.getTgl());
}
}
}
}
Selanjutnya Silahkan di simpan kemudian Build file, dan Running File.
Contoh Outputnya :
Setelah selasai menjalankan program tersebut, kalian pilih menu Tools -> pilih Stop Tool atau dengan cara tekan CTRL + B untuk memberhentikan program sedang berjalan.
Contoh Modif program yang ke-3.
Berikut adalah contoh kode nya ;
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
class pangkat{
JFrame frame;
JLabel lbAngka, lbPangkat, lbHasil;
JTextField txAngka, txPangkat, txHasil;
JPanel panel1, panel2;
JButton btHitung, btReset;
public pangkat(){
frame = new JFrame();
frame.setTitle("Pangkat");
frame.setSize(350,200);
frame.getContentPane().setLayout(new GridLayout(2,1));
lbAngka = new JLabel("Masukkan Angka :");
lbPangkat = new JLabel("Masukkan Pangkat :");
lbHasil = new JLabel("Hasil :");
txAngka = new JTextField("");
txPangkat = new JTextField("");
txHasil = new JTextField("");
btHitung = new JButton("Hitung");
btReset = new JButton("Reset");
panel1 = new JPanel();
panel1.setLayout(new GridLayout(3,2));
panel1.add(lbAngka);
panel1.add(txAngka);
panel1.add(lbPangkat);
panel1.add(txPangkat);
panel1.add(lbHasil);
panel1.add(txHasil);
panel2 = new JPanel();
panel2.setLayout(new FlowLayout());
panel2.add(btHitung);
panel2.add(btReset);
frame.getContentPane().add(panel1);
frame.getContentPane().add(panel2);
frame.setVisible(true);
}
public static void main (String [] args) {
pangkat text = new pangkat();
}
}
Selanjutnya Save File dengan nama pangkat.java , Sehabis itu Build File, dan Running Kode program nya.
Tampilan Outputnya akan seperti ini :
Setelah selasai menjalankan program tersebut, kalian pilih menu Tools -> pilih Stop Tool atau dengan cara tekan CTRL + B untuk memberhentikan program sedang berjalan.
Sekian Artikel blog saya, Saya memohon maaf apabila masih ada kekurangan atau keselahan yang saya posting dari blog ini, Semoga kedepan nya semakin baik lagi dan bisa di kembangkan lagi. SEKIAN TERIMAKASIH
GUI (GRAPHICAL USER INTERFACE)
Reviewed by SELAMAT DATANG
on
June 07, 2020
Rating: 5
Reviewed by SELAMAT DATANG
on
June 07, 2020
Rating: 5