LAPORAN PRAKTIKUM

PEMROGRAMAN TERSTRUKTUR

GRAPHIC USER INTERFACE (GUI)

Oleh :

Siti Aminatus Solehah

111810101043

JURUSAN MATEMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS JEMBER

2014

DASAR TEORI

Pada praktikum 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 Berbasisn 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:

Dari diagram diatas 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 Matlab adalah screen, tetapi objek ini bersifat abstrak dan pemrograman Matlab tidak dapat langsung menyentuhnya. Untuk itu maka objek tertinggi difokuskan pada objek figure.

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

unit,,. . .

position,[Left Top Width Height],. . .

resize,,. . .

numbertitle,,. . .

name,[Teks Window],. . .

windowstyle,);

Objek Uicontrol

Objek Uicontrol adalah objek paling penting yang dibutuhkan untui 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 sebagei berikut:

nama = uicontrol(. . .

parent,[NamaFigure],. . .

style,[Komponen],. . .

unit,,. . .

position,[Left Top Width Height],. . .

string,[Teks Pada Objek],. . .

callback,[Skrip Matlab]);

Mulai dari objek Uicontrol atau 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,. . .

Objek Uimenu

Objek Uimenu adalah onjek yang digunakan untuk membuat daftar menu. Seperti pada aplikasi window, dipojok kiri atas 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]);

Properti Callback

Agar 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 ditulis ekstensinya. Mengetahui fungsi callback adalah kunci pertama dalam pembuatan program dengan GUI.

Interaksi Antar Objek

Nilai properti dari suatu objek dapat diambil dan digunakan untuk mengisi nilai properti pada objek yang lain, Matlab menyediakan dua fungsi itu, yaitu fungsi get dan fungsi set. Mengetahui metode 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 sring ke numeric atau sebaliknya, sesuai dengan kebutuhan pengolahan datanya. Sintak penulisan fungsi get adalah sebagai berikut:

x = get([Nama Objek],[Properti]);

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 nilai pada properti objek tertentu. Fungsi ini juga dapat dipadukan dengan fungsi konve konversi sring ke numeric atau sebaliknya, sesuai dengan kebutuhan pengolahan datanya, sebagaimana fungsi get. Sintak penulisan fungsi get adalah sebagai berikut:

set([Nama Objek],[Properti],[Nilai Baru]);

Contoh penggunaannya pada skrip program Matlab adalah sebagai berikut:

set(edit3,String,num2str(c));

Membuat Program Kalkulator Sederhana

Program ini dibuat untuk mengitung operasi aritmatika layaknya kalkulator yang digunakan sehari-hari dengan operasi penjumlahan, pengurangan, pembagian dan perkalian. Program ini memiliki 4 interaksi yang merupakan operasi dasar perhitugan aritmatika. Berikut merupakan output yang didapatkan setelah menjalankan m-filenya.

Untuk membuat program tersebut berikut m-filenya.

Pada output ketika kita memasukkan angka pada kolom yang data 1 dan data 2 setelah diklik tombol operasi aritmatika akan muncul hasil sehingga tampilan output menjadi seperti ini :

Berikut adalah tampilan untuk hasil operasi tambahUntuk skrip masing-masing tambah yaitu sebagai berikut:

Hasil operasi untuk pengurangan

Srib untuk operasi pengurangan

Hasil operasi untuk perkalian

Srib untuk operasi perkalian

Hasil operasi untuk pembagian

Srib untuk operasi pembagian

TUGAS

1. Membuat Kalkulator Sederhana

Berikut merupakan skrip dalam output kalkulator sederhana diatas.

Berikut merupakan skrip setiap tombol yang berada dalam output kalkulator sederhananya.

2. Menghitung Nilai Mahasiswa

Berikut merupakan script untuk menghitung nilai mahasiswa menggunakan GUI

Berikut merupakan output dari script diatas dan ketika data diinputkan dan di klik tombol hitung

Dan untuk script tombol hitung yaitu:

LAMPIRAN

Pada saat penulisan script seringkali terjadi kesalahan antaralain sebagai berikut.

1. Pendefinisian Nama figure tidak boleh sama dengan Nama File

Karena nama figure dan nama file sama maka program tidak dapat dijalankan berikut merupakan tampilan pada command windownya

2. Penulisan properti tidak perlu ada spasi

Setelah menulis properti tidak perlu diberi spasi karena jika diberi spasi maka Matlab tidak akan menemukan properti yang kita inginkan sehingga akan muncul gambar seperti dibawah ini pada command window

Sedangkan properti yang salah pada m-file dilingkari dengan warna merah

3. Penulisan parent tidak boleh dengan parents

Untuk penulisan properti parent hendaknya ditulis parent tidak menggunakan s karena jika ditulis parents maka pada command window akan menampilkan kesalahan dan program tidak dapat dijalankan.

Pada m-filenya

4. Setelah prperti fontsize tidak perlu tanda

Pada properti fontsize tidak perlu diberi tanda string seperti yang dilingkari merah karena program akan tidak dapat dijalankan.

5. Tombol pushbutton harus terdefinisi dalam m-file lainnya

Untuk dapat membuat program yang sempurna ketika adanya tombol misalnya tombol operasi aritmatika maka diperlukan menyimpan perintah yang akan dilakukan tombol tersebut ketika diklik dalam file yang terpisah akan tetapi bila tombol tersebut belum terdefinisi maka akan error atau tombolnya tidak dapat berfungsi.

Screen

Figure

Uicontrol

Pushbutton

Edit

Text

Checkbox

Frame

Listbox

Radiobutton

AxesUimenu

Parent

Children

Screen

Figure

Uicontrol

PushbuttonEditText CheckboxFrameListboxRadiobutton

Axes

Uimenu

Parent

Children