Modul 8 Matlab

MODUL 8
GRAPHIC USER INTERFACE (GUI)
A. TUJUAN
Setelah melakukan praktikum mahasiswa diharapkan mampu:
Mengenal dan mengetahui Graphic User Interface (GUI)
Membuat program dengan tampilan Graphic User Interface (GUI)
B. DASAR TEORI
Pada modul ini akan dibahas mengenai pembuatan program Graphic User
Interface (GUI). Graphic User Interface adalah media tampilan grafis sebagai pengganti
perintah teks untuk berinteraksi antara user dengan program. Dengan menggunakan
GUI program akan jauh lebih menarik atau user friendly, selain itu tampilan program akan
menjadi lebih interaktif dan penggunaan program menjadi lebih efektif.
Untuk keperluan membuat program GUI, Matlab menyediakan komponen-
komponen standart, seperti edit, text, pushbutton, frame, checkbox dan lain-lain. Untuk
menggunakan komponen-komponen tersebut dengan benar, harus memahami konsep
Pemrograman Berbasis Objek (PBO) di Matlab dengan benar. Pada PBO, setiap
komponen diartikan sebagai objek yang diberikan pekerjaan maupun melakukan
pekerjaan tertentu. Selain itu setiap objek dalam PBO pasti memiliki properti untuk
berinteraksi dengan objek yang lainnya. Dalam pemrograman Matlab, setiap objek
memiliki hirarki objek yang dijabarkan dalam konsep parent-children. Berikut ini
diagramnya:
Screen
Parent
Figure
Uimenu Uicontrol Axes
Pushbutton
Edit
Text
Children
Checkbox
Frame
Listbox
Radiobutton
Petunjuk Praktikum Algoritma dan Pemrograman – Jurusan Matematika – FMIPA – Universitas Jember 35
Dari diagram tersebut terlihat bahwa setiap objek yang akan digunakan harus
diposisikan pada objek parent-nya. Misalnya pushbutton harus diletakkan pada objek
figure sebagai parent-nya.
Objek paling tinggi dalam hirarki Matlab adalah screen, tetapi objek ini bersifat
abstrak dan pemrograman Matlab tidak dapat langsung menyentuhnya. Untuk itu maka
objek tertinggi difokuskan pada objek figure.
B.1. Objek Figure

Objek figure adalah objek tertinggi yang digunakan dalam membuat program
dengan tampilan GUI. Sehingga objek ini harus ada pada saat pertama kali membuat
program dengan tampilan GUI. Objek ini dapat digunakan dengan beberapa properti
penting, yaitu dengan menggunakan sintak sebagai berikut:
nama = figure(...
'color',[R G B],...
'menubar',<'figure'|'none'>,...
'units','<'ponts'|'pixel'>,...
'position',[Left Top Width Height],...
'resize',<'on'|'off'>,...
'numbertitle', <'on'|'off'>,...
'name',[Teks Window],...
'windowstyle',<'normal'|'modal'>);
B.2. Objek Uicontrol

Objek Uicontrol adalah objek paling penting yang dibutuhkan untuk berinteraksi
dengan program. Objek Uicontrol berisi komponen-komponen yang dibutuhkan untuk
mendesain form layout untuk media interaksi. Objek ini dapat digunakan dengan
beberapa properti penting, yaitu dengan menggunakan sintak sebagai berikut:
nama = uicontrol(...
'parent',[NamaFigure],...
'style',[Komponen],...
'units','<'ponts'|'pixel'>,...
'position',[Left Top Width Height],...
'string',[Teks pada Objek],...
'callback',[Skrip Matlab]);
Mulai dari objek Uicontrol atau objek setelah objek figure, penulisan objek yang
baru harus mendefinisikan objek parent dari objek tersebut.
Properti style pada objek Uicontrol, nilainya dapat diisi dengan nama-nama
komponen yang disediakan didalam objek Uicontrol. Berikut ini adalah tabel nama-nama
komponen yang dapat digunakan, beserta skripnya:
No. Komponen GUI Skrip Matlab
1. 'style','Text',...
2. 'style','Edit',...
3. 'style','Pushbutton',...
4. 'style','Checkbox',...
5. 'style','Radiobutton',...
6. 'style','Slider',...
7. 'style','Frame',...
8. 'style','Popupmenu',...
9. 'style','Listbox',...
B.3. Objek Uimenu

Objek Uimenu adalah objek yang digunakan untuk membuat daftar menu.
Seperti pada aplikasi window, dipojok kiri atas selalu ada daftar menu yang bisa dipilih.
Demikian juga dengan objek Uimenu ini, bisa dibuat program dengan tampilan GUI yang
memiliki daftar menu. Cara kerja objek Uimenu pada dasarnya mirip dengan objek
Uicontrol khususnya pada komponen pushbutton.
Objek ini dapat digunakan dengan menggunakan sintak sebagai berikut:
nama = uimenu(...
'parent',[NamaFigure],...
'label',[Teks Menu],...
'callback',[Skrip Matlab]);
B.4. Properti Callback

Agar supaya objek-objek yang sudah dibuat bisa digunakan untuk mengerjakan
perintah-perintah pemrograman sebagaimana mestinya, ada media yang disediakan
pada setiap objek untuk itu. Medianya adalah melalui properti callback. Dimana nilai
properti callback akan dijalankan sebagai program Matlab ketika objek pemiliknya
dikenai sesuatu (pada komponen pushbutton misalnya diklik). Pada properti callback ini
diisi dengan skrip Matlab yang akan dijalankan atau diisi dengan nama m-file yang akan
dijalankan tanpa dituliskan ekstensinya. Mengetahui fungsi callback adalah kunci
pertama dalam pembuatan program dengan tampilan GUI.
B.5. Interaksi Antar Objek

Nilai properti dari suatu objek dapat diambil dan digunakan untuk mengisi nilai
properti pada objek yang lain, Matlab menyediakan dua fungsi untuk itu, yaitu fungsi
get dan fungsi set. Mengetahui metoda interaksi antar objek dalam pembuatan
program dengan tampilan GUI adalah kunci kedua.
Fungsi get digunakan untuk mengambil nilai properti dari suatu objek. Fungsi ini
dapat dipadukan dengan fungsi konversi string ke numerik atau sebaliknya, sesuai
dengan kebutuhan pengolahan datanya. Sintak penulisan fungsi get adalah sebagai
berikut:
x=get([NamaObjek],[Property]);
Contoh penggunaannya pada skrip program Matlab adalah sebagai berikut:
a=str2num(get(edit1,’String’));
b=str2num(get(edit2,’String’));
c=a+b;
Sedangkan fungsi set digunakan untuk memberikan suatu niali pada properti
objek tertentu. Fungsi ini juga dapat dipadukan dengan fungsi konversi string ke numerik
atau sebaliknya, sesuai dengan kebutuhan pengolahan datanya, sebagaimana fungsi
get. Sintak penulisan fungsi set adalah sebagai berikut:
set([NamaObjek],[Property],[Nilai Baru]);
Contoh penggunaannya pada skrip program Matlab adalah sebagai berikut:
set(edit3,’String’,num2str(c));
C. ALAT DAN BAHAN

Software Matlab 6.5 atau Matlab 7.0.
D. LANGKAH-LANGKAH
Langkah-langkah untuk membuat program dengan tampilan GUI adalah sebagai
berikut:
1. Membuat desain layout form dan desain interaksi antar program
2. Membuat program layout form
3. Membuat program interaksi untuk proses
E. CONTOH
E.1. Program Kalkulator Sederhana
Program latihan8_1.m ini adalah program kalkulator sederhana. Langkah-
langkahnya adalah sebagai berikut:
 Langkah 1
Membuat Layout Form dan Interaksi Program
Text1
Text2 Edit1
Text3 Edit2
Text4 Edit3
Pushbutton1 Pushbutton2 Pushbutton3 Pushbutton4
Pushbutton5
Interaksi dengan callback diletakkan pada pushbutton1 sampai pushbutton5.
latihan8_1a latihan8_1c
Proses Proses
Tambah Kali
latihan8_1
Graphic User
Interface
latihan8_1b latihan8_1d
Proses Proses
Kurang Bagi
 Langkah 2
Membuat Program Matlab dalam 5 buah file terpisah seperti pada diagram.
Dimulai dengan membuat file pertama (Graphic User Interface), ikuti langkah-langkah
berikut ini:
1. Klik Tombol Start  All Program  MATLAB 7.0  MATLAB 7.0 setelah itu akan
muncul window utama Matlab.
2. Ketikkan perintah edit di Command Window.
3. Ketikkan skrip program dibawah ini pada jendela Matlab Editor.
% --------------------------------
% Matlab Programming
% Create Graphic User Interface
% m-file : latihan8_1.m
% --------------------------------
clear all;
clc;
win1=figure(...
'units','points',...
'position',[130 190 400 200],...
'color',[.8 .8 .9],...
'menubar','none',...
'resize','off',...
'numbertitle','off',...
'name','GUI Kalkulator');
frame1=uicontrol('parent',win1,...
'position',[0 0 500 60],...
'backgroundcolor',[.3 .3 .4],...
'style','Frame');
label1=uicontrol('parent',win1,...
'position',[30 170 300 20],...
'backgroundcolor',[.8 .8 .9],...
'style','Text',...
'string','Kalkulator Sederhana',...
'fontname','arial',...
'fontsize',12,...
'fontweight','bold',...
'foregroundcolor',[0 0 0]);
'position',[30 140 100 15],...
'style','Text',...
'string','Data ke 1',...
'fontsize',10);
'position',[30 120 100 15],...
'style','Text',...
'string','Data ke 2',...
'fontsize',10);
'position',[30 90 100 15],...
'style','Text',...
'string','hasil Proses',...
'fontsize',10);
edit1=uicontrol('parent',win1,...
'position',[130 140 60 15],...
'backgroundcolor',[1 1 1],...
'style','Edit',...
'string','0',...
'fontsize',10);
'position',[130 120 60 15],...
'style','Edit',...
'string','0',...
'fontsize',10);
'position',[130 90 60 15],...
'style','Edit',...
'string','0',...
'fontsize',10);
tomtambah=uicontrol('parent',win1,...
'position',[30 40 80 15],...
'style','pushbutton',...
'callback','latihan8_1a',...
'string','Tambah',...
'fontsize',10);
tomkurang=uicontrol('parent',win1,...
'position',[110 40 80 15],...
'callback','latihan8_1b',...
'string','Kurang',...
'fontsize',10);
tomkali=uicontrol('parent',win1,...
'position',[190 40 80 15],...
'callback','latihan8_1c',...
'string','Kali',...
'fontsize',10);
tombagi=uicontrol('parent',win1,...
'position',[270 40 80 15],...
'callback','latihan8_1d',...
'string','Bagi',...
'fontsize',10);
tomtutup=uicontrol('parent',win1,...
'position',[270 20 80 15],...
'string','Tutup',...
'fontsize',10,...
'callback','close');
4. Simpan file tersebut dengan nama misalnya: ahmad081010L8_1.m, File  Save As,
atau dengan menekan icon pada M-File Editor.
5. Jalankan fungsi pada command window dengan mengetikkan
>> ahmad081010L7_1
dilanjutkan dengan menekan enter.
Apabila skrip program yang diketikkan sudah benar, maka akan ditampilkan hasil
sebagai berikut:
6. Ketikkan program-program selanjutnya yaitu program yang berisi skrip interaksi

antar objek yang telah didefinisikan pada file latihan8_1.
% --------------------------------
% Program Tambah Untuk Latihan8_1
% --------------------------------
a=str2num(get(edit1,'String'));
b=str2num(get(edit2,'String'));
c=a+b;
set(edit3,'String',num2str(c));
7. Simpan file tersebut dengan nama misalnya: ahmad081010L8_1a.m, File  Save As,
atau dengan menekan icon pada M-File Editor.
8. Ganti tanda '+' pada baris c=a+b; menjadi c=a-b;
9. Pilih menu Save As pada editor Matlab, simpan dengan nama misalnya:
ahmad081010L8_1b.m
10. Ganti tanda '-' pada baris c=a-b; menjadi c=a*b;
ahmad081010L8_1c.m
12. Ganti tanda '*' pada baris c=a*b; menjadi c=a/b;
ahmad081010L8_1d.m
14. Selesai pembuatan 1 program untuk GUI dan 4 program untuk proses.
 Langkah 3
Jalankan program GUI yaitu latihan8_1.m. Selesai.
F. TUGAS
Buatlah program dengan menggunakan tampilan GUI.
1. Untuk menghitung luas suatu bangun, seperti pada tugas Modul 1 Soal No.2.
2. Untuk mengkonversi dari nilai rupiah ke huruf.
3. Untuk menghitung jumlah huruf vokal dan jumlah huruf konsonan.
4. Untuk menghitung nilai mahasiswa.

Modul 8 Matlab

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul 8 Matlab

Diunggah oleh

Hak Cipta:

Format Tersedia

MODUL 8

GRAPHIC USER INTERFACE (GUI)

Uimenu Uicontrol Axes

B.1. Objek Figure

B.2. Objek Uicontrol

No. Komponen GUI Skrip Matlab

B.3. Objek Uimenu

B.4. Properti Callback

B.5. Interaksi Antar Objek

C. ALAT DAN BAHAN

Pushbutton1 Pushbutton2 Pushbutton3 Pushbutton4

6. Ketikkan program-program selanjutnya yaitu program yang berisi skrip interaksi

Anda mungkin juga menyukai