Modul 11.

Graphical User Interface

11
GRAPHICAL USER INTERFACE (GUI)

11.1.

Definisi Graphical User Interface (GUI)

Graphical User Interface (GUI) adalah antarmuka (interface) pengguna dengan

program aplikasi dalam bentuk objek grafik. Objek-objek grafik yang biasa dipakai
pada GUI antara lain adalah: teks, tombol tekan (pushbutton), sliders, gambar, dan
lain-lain. Beberapa contoh GUI dapat dilihat pada gambar-gambar di bawah ini.

Gambar 11.1. GUI dengan User Interface Control dan Grafik

Dengan antarmuka berupa GUI ini, seorang pengguna dapat mengoperasikan
sebuah aplikasi program tanpa harus mengerti dan memahami apa yang terjadi dalam
baris-baris perintah yang terdapat pada program tersebut. Pengguna dapat
menjalankan aplikasi tersebut dengan lebih mudah (user friendly). Untungnya lagi,
para pengguna komputer saat ini sudah sangat mengenal GUI dan telah mengerti
menggunakan komponen-komponen standar pada GUI. Oleh karena itu, kemampuan
membuat GUI menjadi sangat penting dan bermanfaat.

11.2. GUIDE
GUIDE

(Graphical

User

Interface

Development

Environment)

adalah

sekumpulan fasilitas yang disediakan MATLAB untuk dapat menghasilkan GUI.

Fasilitas ini memberikan jalan agar proses perancangan dan pemrograman GUI

11

94

Pemograman Komputer II
Ir. Eko Ihsanto, M.Eng

Pusat Pengembangan Bahan

Ajar
Universitas Mercu Buana

Modul 11. Graphical User Interface

menjadi

sangat

mudah.

Dengan

menggunakan

GUIDE,

programmer

dapat

menghasilkan GUI hanya dengan memindahkan beberapa komponen yang tersedia

dan menghubungkannya dengan program M-File sederhana.
Secara umum, terdapat beberapa tahapan dalam perancangan sebuah GUI
menggunakan GUIDE. Tahapan pertama adalah tahap perancangan tata letak GUI.
Perancangan yang dilakukan meliputi perancangan diatas kertas (draft) dan juga
perancangan pada GUIDE. Kemudian, tahapan kedua adalah pembuatan program
pada M-File untuk menjalin interaksi antara obejk grafik dengan pengguna. Setelah itu,
tahapan ketiga adalah penyiimpanan program serta gambar GUI. Kemudian, ...........
GUI anda sudah dapat digunakan.
Pembukaan fasilitas GUIDE dapat dilakukan dengan cara mengetikkan guide
pada Command Window, kemudian menekan Enter. Setalah itu, akan ditampilkan
sebuah Layout Editor. Layout Editor ini merupakan panel tempat tersedianya semua
perlengkapan-perlengkapan GUIDE, sebagaimana tampak pada Gambar 11.2 di
bawah ini.

Gambar 11.2. Layout Editor GUIDE

Pada gambar tersebut terdapat beberapa perlengkapan GUIDE, yaitu: Daftar
Menu, Daftar Toolbar, Daftar Komponen dan Layout Area. Komponen yang terdapat
pada GUIDE adalah: push button, toggle button, radio button, check box, edit text,

11

95

Pemograman Komputer II
Ir. Eko Ihsanto, M.Eng

Pusat Pengembangan Bahan

Ajar
Universitas Mercu Buana

Modul 11. Graphical User Interface

static text, slider, frame, list box, pop up menu dan axes. Penggunaan masing-masing
komponen akan dijelaskan secara bertahap dan aplikatif pada modul ini dan modulmodul berikutnya.
Ketika sebuah rancangan Layout Editor disimpan, maka akan dihasilkan 2
(dua) buah file, yaitu Fig-File dan M-File. Fig-File, yaitu file berekstensi *.fig,
merupakan file yang berisi deskripsi dari obejk-objek grafik yang disusun pada Layout
Editor.

Sedangkan

M-File

akan

berisi

file

*.m

berupa

fungsi-fungsi

yang

menggambarkan apa yang terjadi bila sebuah objek diproses (dikenal dengan istilah
Callback). Seorang programmer tidak perlu memahami semua perintah pada M-File
ini. Hanya bagian Callback saja yang harus diperhatikan dan diisi oleh programmer.

11.3.

Edit Text dan Static Text

Komponen Edit Text adalah sebuah objek kotak dimana pengguna dapat

memasukkan atau memodifikasi teks dalam bentuk data string. Pada umumnya, Edit
Text digunakan untuk mendapatkan input data string dari pengguna. Komponen ini
akan menghasilkan Callback ketika pengguna menekan Enter, setelah memasukkan
data string yang diinginkan di dalam Edit Text. Kemudian, data string tersebut akan
disimpan untuk digunakan oleh komponen lainnya.
Sedangkan Static Text adalah objek yang dapat menampilkan data teks string.
Data teks string yang ditampilkan dapat berupa data string yang tetap ketika diprogram
dari awal atau dapat juga berupa data update dari proses lainnya. Komponen Static
Text ini tidak menghasilkan Callback, namun dapat diupdate sesuai kehendak
programmer. Biasanya, Static Text digunakan untuk memberikan label pengendalian,
menjadi penjelas perintah pengoperasian atau menunjukkan harga tertentu dari
sebuah data.
Penggunaan Static Text dan Edit Text akan ditampilkan secara bertahap berikut
ini. Pertama, memanggil program GUIDE dengan cara sebagai berikut:
>>guide
sehingga muncul GUIDE templates. Pada bagian ini, yang akan digunakan adalah
BLANK GUI. Artinya, perancangan GUI akan dimulai dari nol (blank). Pada dasarnya
(default), GUI akan dijalankan dengan metode BLANK GUI ini.
Setelah tampil Layout Editor, seperti pada Gambar 11.2, maka dengan cara
drag and place, Static Text dan Edit Text dapat ditempatkan pada Layout Editor.
Pengguna dapat mengatur besar dan letak objek serta besarnya window dengan

11

96

Pemograman Komputer II
Ir. Eko Ihsanto, M.Eng

Pusat Pengembangan Bahan

Ajar
Universitas Mercu Buana

Modul 11. Graphical User Interface

menggunakan mouse. Perataan objek (Alignment) juga dapat dikerjakan melalui daftar
toolbar Align Obejcts. Proses perataan ini dapat dilakukan jika semua objek telah
diblok terlebih dahulu. Akhir proses ini, Layout Editor telah berisi objek yang kita
inginkan, seperti tampak pada Gambar 11. 3.

Gambar 11.3. Layout Editor berisi Static Text dan Edit Text
Pengguna dapat mengubah-ubah sifat-sifat (property) sebuah objek dengan dua cara.
Cara pertama dengan mengklik kanan objek yang dimaksud dan cara kedua dengan
memblok objek tersebut, lalu mengklik Poperty Inspector pada Daftar Toolbar.
Beberapa property yang dapat diatur antara lain: warna huruf, font huruf, jenis huruf,
sifat enable objek dan string yang akan ditampilkan pada Layout Editor. Pada
umumnya, yang biasa diatur adalah string dan nama objek. Sebagian Poperty
Inspector dapat dilihat pada Gambar 11.4.
Pada objek Static Text, String diisi dengan Teks ditampilkan di sini dan Tag
diisi dengan text1. Demikian juga dengan objek Edit Text, String diganti dengan Teks
diketik di sini! dan Tag diubah menjadi edit1. Perubahan property ini akan
menghasilkan Layout Editor seperti pada Gambar 11.5.

11

97

Pemograman Komputer II
Ir. Eko Ihsanto, M.Eng

Pusat Pengembangan Bahan

Ajar
Universitas Mercu Buana

Modul 11. Graphical User Interface

String
Tag

Gambar 11.4. Property Inspector

Gambar 11.5. Layout Editor berisi Static Text dan Edit Text setelah Perubahan Property
Hingga saat ini, berarti perancangan layout GUI telah selesai dijalankan. Layout
ini dapat disimpan, dengan nama file teks1.fig. Namun, GUI ini belum dapat dijalankan
sempurna, karena belum ada program yang menghubungkan antara sebuah objek
dengan objek laiinya. Hubungan ini dapat deprogram dengan membuka file teks1.m
(yang dihasilkan oleh GUIDE bersamaan dengan disimpannya file teks1.fig).

11

98

Pemograman Komputer II
Ir. Eko Ihsanto, M.Eng

Pusat Pengembangan Bahan

Ajar
Universitas Mercu Buana

Modul 11. Graphical User Interface

Jangan bingung terlebih dahulu dengan banyaknya instruksi pada file teks1.m
ini, karena tidak semunya harus dipahami. Programmer hanya perlu menambahkan
beberapa baris instruksi saja pada bagian Callback dari file ini, seperti di bawah ini:
function edit1_Callback(hObject, eventdata, handles)
%
%
%
%
%

hObject
handle to edit1 (see GCBO)
eventdata reserved - to be defined in a future version of MATLAB
handles
structure with handles and user data (see GUIDATA)
Hints: get(hObject,'String') returns contents of edit1 as text
str2double(get(hObject,'String')) contents of edit1 as a double

% Ambil data dari edit text yang telah diketik oleh user
str = get (handles.edit1,'String')
% Letakkan data dari edit text ke static text
set (handles.text1,'String',str)
Instruksi tersebut memerintahkan untuk menyimpan data yang telah diketik pada Edit
Text bernama edit1 dengan variabel str. Kemudian, variabel str ini akan ditampilkan
pada Static Text bernama text1. Apapun yang diketik pada bagian Edit Text akan
dtampilkan pada bagian Static Text (setelah menekan Enter). Tampilan GUI sebelum
dan setelah pengetikan teks ditampilkan pada Gambar 11. 6 di bawah ini.

(a) Sebelum Teks diketik

(b) Setelah teks diketik

Gambar 11. 6. Tampilan GUI Static Text dan Edit Text

11.4. Push Button

Push button adalah objek atau komponen grafik yang akan menghasilkan
sebuah aksi tertentu ketika ditekan. Ketika mouse diklik pada sebuah push button,
objek tersebut nampak tertekan dan ketika tekanan dilepas objek akan nampak
terlepas. Pada saat tekanan mouse dilepas itulah, program akan mengeksekusi

11

99

Pemograman Komputer II
Ir. Eko Ihsanto, M.Eng

Pusat Pengembangan Bahan

Ajar
Universitas Mercu Buana

Modul 11. Graphical User Interface

Callback yang telah disimpan sebelumnya. Pada umumnya push button dimanfaatkan
untuk memulai sebuah proses, menentukan pilihan beberapa aplikasi dan menjawab
pertanyaan kotak dialog.
Berikut ini akan ditampilkan aplikasi push button yang akan dihubungkan
dengan objek Static Text. Program akan menghitung berapa kali sebuah push button
diklik. Jumlah klik tersebut akan ditampilkan pada Static Text. Proses perancangan
program ini sama dengan contoh sebelumnya. Setelah kedua objek ditempatkan pada
Layout Editor sesuai dengan kehendak programmer, property masing-masing objek
juga ditentukan. String untuk Static Text diisi dengan Total Klikk: 0 dengan Tag berisi
text1. Sedangkan String untuk Push button diisi dengan Klik disini! dengan Tag diisi
dengan pushbutton1. Layout Editor disimpan dengan nama push1.fig. Gambar 11.7
menampilkan window dari GUI yang dirancang.

Gambar 11.7. Layout Editor berisi Static Text dan Push button
Untuk menghubungkan objek Push button dengan Static Text yang ada, beberapa
baris instruksi di bawah ini harus ditambahkan pada bagian Callback pada file
push1.m.

11

100

Pemograman Komputer II
Ir. Eko Ihsanto, M.Eng

Pusat Pengembangan Bahan

Ajar
Universitas Mercu Buana

Modul 11. Graphical User Interface

function pushbutton1_Callback(hObject, eventdata, handles)

% hObject
handle to pushbutton1 (see GCBO)
% eventdata reserved - to be defined in a version of MATLAB
% handles
structure with handles and user data (see GUIDATA)
%Deklarasi variabel klik
persistent klik
%Inisialisasi bahwa klik adalah variabel yang tersimpan
if isempty(klik)
klik = 0;
%Jika pushbutton tak ditekan, jumlah klik tak berubah
end
%Memperbaharui total klik
klik = klik + 1;
%Jika pushbutton ditekan, jumlah klik bertambah satu
%Membuat string baru
str = sprintf('Total klik : %d',klik);
%Memperbaharui teks pada static text
set (handles.text1,'String',str);

Tambahan instruksi diatas menggambarkan proses penambahan harga variabel klik

jika Push button ditekan. Namun, jika Push button tidak ditekan, harga variabel tidak
berubah. Kemudian, harga variabel klik tersebut akan ditampilkan secara bersamaan
pada variabel str. Terakhir, variabel str itu akan ditampilkan pada objek Static Text yang
telah tersedia. Tampilan GUI sebelum dan setelah Push button ditekan 5 kali
ditampilkan pada Gambar 11. 8 di bawah ini.

(a) Sebelum Push Button ditekan

(b) Setelah Push Button ditekan 5 kali

Gambar 11. 8. Tampilan GUI Push button dan Static Text

11

101

Pemograman Komputer II
Ir. Eko Ihsanto, M.Eng

Pusat Pengembangan Bahan

Ajar
Universitas Mercu Buana

Modul 11. Graphical User Interface

11.4.

Toggle Button
Toggle Button adalah objek yang menghasilkan sebuah aksi berupa salah satu

dari dua keadaan (keadaan On atau Off).

Jika Toggle Button ditekan, ia akan

mengubah keadaan sebelumnya ke keadaan yang lain, seperti dari keadaan On ke Off
atau sebaliknya. Seperti Push Button, objek ini akan tampak tertekan ketika mouse
diklik sehingga mouse dilepaskan kembali. Fungsi Callback akan dilaksanakan ketika
mouse dilepaskan kembali.
Berikut ini akan diilustrasikan aplikasi Toggle Button untuk mengubah tampilan
sebuah Static Text dari keadaan ON ke keadaan OFF, dan sebaliknya. Tampilan
Layout

Editor

setelah kedua objek ditempatkan dan ditentukan propertinya

digambarkan pada Gambar 11.9 di bawah ini. Kemudian, rancangan tersebut disimpan
dengan nama togel1.fig.

Gambar 11.9. Layout Editor berisi Static Text dan Toggle button
Sebuah fungsi Callback ditambahkan pada file togel1.m, untuk menentukan
aksi ketika Toggle Button diklik. Tambahan fungsi tersebut adalah sebagai berikut:

11

102

Pemograman Komputer II
Ir. Eko Ihsanto, M.Eng

Pusat Pengembangan Bahan

Ajar
Universitas Mercu Buana

Modul 11. Graphical User Interface

function togglebutton1_Callback(hObject, eventdata, handles)

% hObject
handle to togglebutton1 (see GCBO)
% eventdata reserved - to be defined in a version of MATLAB
% handles
structure with handles and user data (see GUIDATA)
%
Hint:
get(hObject,'Value')
togglebutton1

returns

toggle

state

of

%Cek keadaan sekarang

state = get (handles.togglebutton1,'Value');
%Menempatkan value pada static text
if state == 0
set (handles.text1,'String','OFF');
else
set (handles.text1,'String','ON');
end
Dari tambahan instruksi di atas, nampak bahwa variabell state menyimpan harga
keadaan pada saat Toggle Button belum ditekan (keadaan sekarang). Kemudian,
sebuah pengecekan keadaan dilakukan. Jika keadaan sekarang adalah ON, maka
keadaan berikutnya adalah ON, dan sebaliknya. Keadaan yang baru itu akan langsung
ditampilkan pada Static Text. Gambar 11.10 menampilkan GUI sebelum dan setelah
Toggle Button ditekan.

(a) Sebelum Toggle Button ditekan

(b) Setelah Toggle Button ditekan

Gambar 11. 10. Tampilan GUI Toggle Button dan Static Text.

11

103

Pemograman Komputer II
Ir. Eko Ihsanto, M.Eng

Pusat Pengembangan Bahan

Ajar
Universitas Mercu Buana