Apa Itu ? GUI (grapichal user interface) Beserta Contoh Programnya

Hallo semua kali ini saya akan sharing mengenai GUI (grapichal user interface), Jadi langsung saja apa sih GUI itu ? GUI adalah antarmuka pada sistem operasi atau komputer yang menggunakan menu grafis agar mempermudah para penggunanya untuk berinteraksi dengan komputer atau sistem operasi.

Pengenalan pemprograman java berbasis GUI.pertama-tama saya selaku penulis ingin men-sharingkan pengetahuan mengenai GUI (Graphical User Interface). GUI (Graphical User Interface) merupakan tampilan grafis yang mengandung alat-alat atau komponen-komponen yang memampukan pengguna untuk melakukan pekerjaan interaktif. GUI (Graphical User Interface) software yang dikembangkan oleh para peneliti di Xerox Palo Alto Research Center (PARC) di tahun 70-an. GUI di kembangkan dengan tujuan pengguna berinteraksi dengan perangkat keras computer serta memudahkan dalam mengoprasikan sebuah system operasi (user friendly).

• Konsep Graphical User Interface

GUI (Graphical User Interface) adalah antarmuka pada sistem operasi atau komputer yang menggunakan menu grafis agar mempermudah para penggunanya untuk berinteraksi dengan komputer atau sistem operasi.

GUI merupakan antarmuka pada sistem operasi komputer yang menggunakan menu grafis.

• Merancang GUI yang Baik

1. Desain dapat diterjemahkan sebagai seni terapan, dan berbagai pencapaian kreatif.
2. Arti Desain sebagai kata kerja : “desain” memiliki arti “proses untuk membuat dan menciptakan objek baru
3. Arti Desain sebagai kata benda : “desain” digunakan untuk menyebut hasil akhir dari sebuah proses kreatif, baik itu berwujud sebuah rencana, proposal, atau berbentuk objek nyata.

• Prinsip Desain Yang Baik

1. Metafora (Proses Perancangan bentuk) maksudnya menampilkan dan menggambarkan elemen-elemen (titik, garis, warna, ruang dan tekstur) yang relefan dan dikenali. Bisa menggunakan dekstop yang berhubungan dengan perancangan interface (adobe Photoshop, Corel Draw, Macromedia Flash, dll)
2. Kejelasan, setiap elemen yang digunakan pada interface harus beralasan dalam penggunanya. Memperjelas pesan yang diberikan. Memberikan relax pada mata dalam menatap elemen-elemen saat beraktifitas. Menawarkan kesedrahanaan, enak dilihat, berkelas dan jelas
3. Konsisten, Konsisten dalam layout, warna, gambar (image), icon, tipografi, teks, dll
4. Konsisten pada layar, perpindahan antar layar satu ke layar lain
5. Konsisten pada desain interface yang dirancang

• Bidang kerja (platform) mempunyai petunjuk tuntunan

1. Pembuatan User Interface Digunakan untuk mempermudah user dalam mengakomodasikan bentuk desain kedalam sebuag gambar, tulisan dsb
2. Teknik Koding Digunakan sepintas lalu, baik untuk menarik perhatian, Mengabaikan penggunaan video, baik untuk membuat sesuatu menjadi solid
3. Tipografi

• Karakter dan simbol dalam penggunaannya mudah dilihat dan dibedakan
• Menghindari penggunaaan upper case (huruf besar) pada tiap huruf dalam suatu pengetikan naskah
• Penggunaan campuran huruf kecil dan besar mempercepat proses membaca
• Mudah dibaca
• Mudah dikenali dengan adanya sekumpulan jenis huruf yang digunakan untuk mengetik suatu naskah/teks
  
  
  Berikut contoh program dari GUI (grapichal user interface)  :
  
  
• Kode program :
  

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

    }

}

• Tampilan Program :

Itulah Apa Itu ? GUI (grapichal user interface) Beserta Contoh Programnya dan beberapa contohnya, Semoga artikel ini bisa bermanfaat untuk kalian, Terima kasih.