NAMA : Moh.

Ali Fauzi

KELAS : ELKOM A 2014

NIM : 14050514061

TUGAS 2 (GUI KALKULATOR) APLIKASI KOMPUTER

SOAL

1. Bukalah GUI MATLAB (dengan cara ketik guide di matlab) lalu buatlah program
kalkulator agar bisa menampilkan seperti gambar berikut:

Dengan ketentuan bisa melakukan operasi matematika seperti:

 Perhitungan  Pengurangan
 Perkalian  Pembagian

Lalu kirimkan file (dalam bentuk m-files dan fig-files) di edmodo!

 JAWABAN

1. Untuk bisa membuat dan menjalankan program kalkulator, pertama-tama yang diharuskan
yaitu membuka program matlab lalu mengetik “guide”, lalu tekan ‘enter’.

Maka akan muncul tampilan berikut:

Klik OK, akan muncul tampilan seperti ini:

 Dalam pembuatan program kalkulator ini, saya telah berhasil membuat kalkulator
dengan 3 buah jenis program, diantaranya:

 1 buah program kalkulator dengan membutuhkan komponen (baik desain awal

kalkulator di dalam file figure atau file.fig maupun pengkodean di bagian editornya)
berupa:
 Panel button;  Radio button  Edit text;
 Static text; dan  Toggle button.
 1 buah program kalkulator dengan membutuhkan komponen (baik desain awal
kalkulator di dalam file figure atau file.fig maupun saat pengkodean di bagian
editornya) berupa:
 Button group;  Radio button;  Edit text;
 Static text; dan  Push button.
 1 buah program kalkulator dengan tidak memasukkan komponen dalam pengerjaan
desain awal kalkulatornya (di bagian file figure atau file.fig tidak berisi komponen
apapun alias kosong), namun proses pengerjaan programnya hanya di bagian
pengkodean saja atau hanya di bagian editornya saja.

Untuk penjelasan dari ketiga jenis program kalkulator tersebut, akan saya ulas di bawah
ini.
A. Pembuatan Kalkulator Dengan Program Pertama

Untuk program yang pertama ini, saya akan mendesain tampilan awal kalkulator
dengan membutuhkan komponen berupa:

 Panel Button;  Radio Button  Edit Text;

 Static Text; dan  Toggle Button.

Dari komponen berikut, bentuk tampilan awal kalkulatornya sebagai berikut:

 Penjelasan dari nomor 1 sampai 13 sebagai berikut:

Informasi Komponen (Property Inspector)

No Komponen
Font Size Font Weight String Tag (Kode)
1 Panel Button 17 Bold KALKULATOR uipanel1
2 Radio Button 1 8 Normal PENJUMLAHAN radiobutton1
3 Radio Button 2 8 Normal PENGURANGAN radiobutton2
4 Radio Button 3 8 Normal PERKALIAN radiobutton3
5 Radio Button 4 8 Normal PEMBAGIAN radiobutton4
6 Static Text 1 8 Normal ANGKA 1 text1
7 Static Text 2 8 Normal ANGKA 2 text2
8 Static Text 3 8 Normal HASIL text3
9 Edit Text 1 10 Normal edit1
10 Edit Text 2 10 Normal edit2
11 Edit Text 3 10 Normal edit3
12 Toggle Button 1 8 Normal HITUNG togglebutton1
13 Toggle Button 2 8 Normal EXIT togglebutton2

Catatan:
Untuk mengganti warna background dari tampilan GUI kalkulator, bisa dilihat seperti
berikut:
 Untuk memunculkan garis tepi dan nama-nama komponen (sebelah tepi kiri), bisa ikuti
langkah berikut:
 Memunculkan garis tepi

 Memunculkan nama-nama komponen pada toolbar.

 Setelah memasukkan komponen (panel button, radio button, dll) ke layar sampai
berbentuk kalkulator, langkah selanjutnya memasukkan kode ke bagian editor seperti ini:

Catatan: kode “%....%” (tulisan yang berwarna hijau) bisa dihapus karena kode yang
berawalan tanda % berisi informasi tambahan saja (jika dihapus tidak merubah program).
Catatan: Untuk melihat gambar dengan jelas, dokumen bisa diperbesar hingga 170%.
 Setelah itu jalankan menu RUN (berbentuk segitiga berwarna hijau) atau tekan F5 atau
klik CTRL+T untuk menjalankan program.

Atau
Berikut ini hasil program yang telah dijalankan:
a. Operasi Penjumlahan

b. Operasi Pengurangan

c. Operasi Perkalian

d. Operasi Pembagian
 Untuk memunculkan pesan seperti ini anda hanya perlu menuliskan kode program
“msgbox.....” di kolom pilihan menu operasi yang ingin ditampilkan pesannya.

B. Pembuatan Kalkulator Dengan Program Kedua

Untuk program yang pertama ini, saya akan mendesain tampilan awal kalkulator
dengan membutuhkan komponen berupa:
 Button Group;  Radio Button;  Edit Text;
 Static Text; dan  Push Button.
Dari komponen berikut, bentuk tampilan awal kalkulatornya sebagai berikut:
 Penjelasan dari nomor 1 sampai 14 sebagai berikut:
Informasi Komponen (Property Inspector)
No Komponen
Font Size Font Weight String Tag (Kode)
1 Button Group 17 Bold KALKULATOR pnkal
2 Radio Button 1 8 Normal PILIHAN radiobutton1
3 Radio Button 2 8 Normal PENJUMLAHAN radiobutton2
4 Radio Button 3 8 Normal PENGURANGAN radiobutton3
5 Radio Button 4 8 Normal PERKALIAN radiobutton4
6 Radio Button 5 8 Normal PEMBAGIAN Radiobutton5
7 Static Text 1 8 Normal ANGKA 1 text1
8 Static Text 2 8 Normal ANGKA 2 text2
9 Static Text 3 8 Normal HASIL text3
10 Edit Text 1 10 Normal edit1
11 Edit Text 2 10 Normal edit2
12 Edit Text 3 10 Normal edit3
13 Toggle Button 1 8 Normal HITUNG togglebutton1
14 Toggle Button 2 8 Normal EXIT togglebutton2

Lalu memasukkan kode ke bagian editor seperti ini:

Catatan: Untuk bisa melihat gambar dengan jelas, dokumen bisa diperbesar hingga
170%.
 Setelah memasukkan kode ke bagian editor, lalu tekan enter atau tekan F5 atau tekan
CTRL+T untuk menjalankan program.
a. Operasi Penjumlahan
b. Operasi Pengurangan

c. Operasi Perkalian

d. Operasi Pembagian
 Perbedaan mendasar antara program kalkulator yang pertama dan program yang kedua
yaitu terletak pada komponen pertama yang digunakan (komponen yang membentuk garis
kotak). Pada program pertama, komponen awal yang digunakan yaitu Panel Button,
sedangkan pada program kedua, komponen awal yang digunakan yaitu Button Group Panel.

Dari gambar diatas, terlihat bahwa untuk Panel Button, baik radio button 1 dan radio
button 2 tidak ada lingkaran yang tercentang (terisi). Sedangkan pada Button Group Panel,
pada radio button 2 tidak terdapat centangan lingkaran, akan tetapi pada radio button 1
terdapat centang berupa lingkaran. Hal ini dikarenakan secara definisi Panel Button berbeda
dengan Group Button. Berikut ini definisi dari Panel Button:

Kalau diartikan ke bahasa Indonesia:

 Karena bersifat memudahkan memahami sebuah GUI, maka dapat diartikan fungsi
tombol-tombol (khususnya radio button yang saya coba) dapat berdiri sendiri
(radiobutton1_callback, radiobutton2_callback¸ dan lain sebagainya). Berdiri sendiri di sini
maksudnya posisi fungsinya terletak terpisah antara radiobutton1_callback,
radiobutton2_callback.
Berikut ini definisi dari Panel Button:

Kalau diartikan ke bahasa Indonesia menjadi:

Pada paragraf 2, kata “kamu tidak bisa kode tombol callbacks untuk individu”,
maksudnya khusus untuk fungsi radio button, toggle button tidak bisa berdiri sendiri (fungsi
radiobutton1_callback dan radiobutton2_callback melebur jadi satu), dalam artisan letak
posisi fungsi radiobutton1_callback, radiobutton2_callback tidak terpisah, melainkan
menjadi satu grup fungsi (yaitu tombol selectionchangefcn). Bisa dibuktikan melalui
pengkodean di editor dibawah (keterangan: gambar pertama yaitu bentuk panel button dan
gambar kedua yaitu bentuk group button):
C. Pembuatan Kalkulator Dengan Program Ketiga
Khusus untuk program yang ketiga ini, saya mencoba tidak mendesain tampilan awal
kalkulator, namun pemberian komponen langsung dimasukkan ke menu pengkodean (editor).
Sekali lagi saya tekankan, proses ketiga ini membutuhkan langkah awal yaitu kode fungsi
setiap komponennya (atau jenis style-komponen nya).
Misalkan saya memasukkan semua komponen ke dalam jendela awal matlab figure.
 Sehingga dari sini, saya bisa dapatkan informasi dari komponen GUI MATLAB
berupa:

Informasi Komponen
No Komponen (Property Inspector)
Style (Jenis) Tag (Kode)
1 Push Button pushbutton pushbutton1
2 Push Button 1 pushbutton pushbutton1
3 Push Button 2 pushbutton pushbutton2
4 Slider slider slider1
5 Slider 1 slider slider1
6 Slider 2 slider slider2
7 Radio Button radiobutton radiobutton1
8 Radio Button 2 radiobutton radiobutton2
9 Check Box checkbox checkbox1
10 Check Box 2 checkbox checkbox2
11 Edit Text edit edit1
12 Edit Text 2 edit edit2
13 Static Text text text1
14 Pop-up Menu popupmenu popupmenu1
15 Listbox listbox listbox1
16 Toggle Button togglebutton togglebutton1
17 Table uitable uitable1
18 Panel Button uipanel uipanel1
19 Button Group uibuttongroup uibuttongroup1
20 Axes Button axes axes1

Setelah memahami perbedaan style dan tag, maka selanjutnya kita ke bagian menu
editor (bagian pengkodean).
 Di menu editor, silahkan hapus semua kode (bisa menekan CTRL+A lalu tekan Delete)
sampai benar-benar kosong.

Setelah benar-benar kosong, masukkan kode seperti ini:

(catatan: dokumen diperbesar 170% agar gambar kelihatan jelas)

Sebagai catatan untuk penjelasan kalkulator dengan cara 3 (gambar diatas), bisa dilihat
pada tabel berikut:
 Baris
No Isi Kode Pengertian Kode
Kode
1 1 simpleGUI Merupakan nama sebuah fungsi yaitu simple GUI
Awalan ‘h’ yaitu fungsi untuk menampilkan sesuatu
2 hfig
secara horizontal berupa panjang-lebarnya jendela awal
Membuat tampilan jendela program menjadi off sampai
3 ‘Visible‘ ‘Off ‘
menu editor dijalankan (di run)
4 ‘Menu‘ ‘None‘ Fungsi untuk tidak (none) menampilkan menu.
3 ‘Name‘ ‘Kalku... Name untuk menamakan figure atau jendela / halaman
5
‘ program bernama Kalkulator Sederhana
6 ‘Resize‘ ‘Off‘ Fungsi untuk menonatifkan (off) perubahan ukuran
 Position melambangkan letak posisi komponen
‘Position‘ 100
7  100 100 350 200 yaitu letak komponen (x =100; y =
100 350 200
100; lebar / width = 350 dan tinggi = 200) pixel.
8 4 Movegui ‘center‘ Memindahkan halaman program ke tengah layar.
 Sebuah kode ‘tag’ dari button group panel yang
bernama ‘BtnGrp’
9 hBtnGrp  Awalan ‘h’ merupakan fungsi untuk menampilkan
horizontal allignment (komponen secara horizontal)
dari komponen tipe Tag-nya berupa ‘BtnGrp’
Sebuah fungsi user interface untuk menampilkan
10 6 Uibuttongroup bentuk komponen jamak / kelompok (khusus button
group) saat nantinya dijalankan (run)
 Kata Unit Normalized yaitu unit pengukuran yang
dinormalisasikan (normalized) dengan ciri-ciri nilai
Position 0 0 0.3 1
11 x dari 0 – 1 dan nilai sumbu y dari 0 – 1 (0 s/d 1)
Unit Normalized
 0 0 0.3 1 yaitu letak komponen (x = 0; y = 0; lebar
= 0.33 dan tinggi = 1) unit normalisasi (maks 1).
Sebuah fungsi user interface yang digunakan untuk
12 Uicontrol
menampilkan tombol atau komponen tunggal.
Sebuah komponen dengan style atau bentuknya yaitu
13 ‘Style‘ ‘Radio‘
radio button.
Parent berarti induk yaitu komponen ini berada pada
14 ‘Parent‘ hBtnGrp dalam sebuah tombol kelompok (group) berupa group
button
(Handle = aturan dan Visibility = terlihat). Yaitu
7 – 11 ‘HandleVisibility
15 pengaturan untuk menonatifkan (off) pengaturan
‘ ‘Off‘
tampak-tidaknya / muncul-hilangnya komponen
‘Position‘ 15 160 15 160 100 30 yaitu letak komponen radio button (x =
16
100 30 15; y =160; lebar = 0.33 dan tinggi = 30) unit piksel.
‘String‘ ‘menu (String berarti nama) yaitu komponen radio button
17
pilihan‘ pertama dinamakan Menu Pilihan
‘String‘
18 Komponen radio button kedua dinamakan Penambahan
‘Penambahan‘
‘String‘
19 7 – 11 Komponen radio button ketiga dinamakan Pengurangan
‘Pengurangan‘
‘String‘
20 7 – 11 Komponen radio button keempat dinamakan Perkalian
‘Perkalian‘
 ‘String‘
21 7 – 11 Komponen radio button kelima dinamakan Pembagian
‘Pembagian‘
22 uicontrol Fungsi untuk menampilkan komponen saja
‘Style‘
23 Komponen dengan bentuk atau tipe push button
‘pushbutton‘
24 13 ‘String‘ ‘hitung‘ Komponen push button yang bernama Hitung
‘Position‘ 200 60 200 60 60 25 yaitu letak komponen push button (x =
25
60 25 200; y = 60; lebar = 60 dan tinggi = 25) unit piksel.
26 ‘Callback‘ Fungsi khusus untuk menjalankan komponen
Menampilkan secara horizontal berupa panjang - lebar
27 ‘hedit1 – hedit3‘
nya komponen edit text
28 Uicontrol Fungsi untuk menampilkan komponen edit text
29 15-17 ‘Style‘ ‘edit‘ Bentuk atau tipe komponen berupa edit text
‘Position‘ 150 15 160 100 30 yaitu letak komponen edit text (x = 15; y
30
150 60 20 =160; lebar = 0.33 dan tinggi = 30) unit piksel.
31 “String” , “ ” “kosong” karena nantinya akan kita isi nilainya.
Menampilkan secara horizontal berupa panjang - lebar
32 ‘Htext1 – htext2‘
nya komponen static text
33 Uicontrol Menampilkan komponen static text yang dibuat
34 ‘Style‘ ‘text‘ Bentuk atau tipe komponen berupa static text
19-20
‘Position‘ 153 Yaitu letak komponen static text (x = 153; y =180;
35
180 54 20 lebar = 54 dan tinggi = 20) unit piksel.
“String” ,
36 Memberikan nama komponen yaitu Angka 1 & 2
“Angka 1 dan 2 ”
Hfig ‘visible‘
37 23 Membuat tampilan GUI muncul atau terlihat
‘on‘
Function
38 26 Tempat menyisipkan kode dari push button
button_callback
39 v1 = str2double Mengubah string variabel v1 menjadi number
27
40 Get(hedit1 string) Mengambil nilai bentuk string dari edit text 1
41 28 v2 = str2double Mengubah string variabel v2 menjadi number
42 Get(hedit2 string) Mengambil nilai bentuk string dari edit text 2
Switch get
43 Mengambil menu operasi matematika dari button group
hBtnGrp
29
44 ‘Selected Object‘ Menu operasi dari button group yang telah dipilih
45 ‘Tag + - * /‘ Kode dari button group berupa “+ - * /”
46 Case ‘+‘ Untuk kasus dengan kode Tag + (penjumlahan)
30
47 Res = v1 + v2 Memproses resultan (hasil) dari kasus ‘+’ yaitu v1 + v2
48 Case ‘-‘ Untuk kasus dengan kode Tag - (pengurangan)
31
49 Res = v1 - v2 Memproses resultan (hasil) dari kasus ‘-’ yaitu v1 - v2
50 Case ‘*‘ Untuk kasus dengan kode Tag * (perkalian)
32
51 Res = v1 * v2 Memproses resultan (hasil) dari kasus ‘*’ yaitu v1 * v2
52 Case ‘/‘ Untuk kasus dengan kode Tag / (pembagian)
33
53 Res = v1 / v2 Memproses resultan (hasil) dari kasus ‘/’ yaitu v1 / v2
54 34 Otherwise res ‘’ Memproses resultan untuk dimasukkan ke edit text 3
55 Set hedit3 Menampilkan data dari edit text 3
56 35 ‘String‘ res Hasil yang muncul dari edit text 3 berbentuk string
57 End Mengakhiri program
Setelah itu, jalankan program, maka akan muncul tampilan seperti ini:

Hasil dari kalkulator yaitu sebagai berikut:

a. Operasi Penambahan
b. Operasi Pengurangan

c. Operasi Perkalian

d. Operasi Pembagian
 DAFTAR PUSTAKA

Anonim. 2011. Radio Button.

(https://stackoverflow.com/questions/4624438/how-can-i-get-the-selected-value-of-
radio-button, diakses pada tanggal 28 Oktober 2017 pukul 16.05).

Anonim. 2012. Callbacks for Spesific Components.

(http://www.mathworks.com/help/matlab/creating_guis/add-code-for-components-in-
callbacks.html?searchHighlight=eventdata.newvalue#f10-1001438, diakses pada
tanggal 28 Oktober 2017 pukul 16.22).

Asto, I G. P. 2017. Guide Matlab

Farhan, ahmad. 2015. If-Else Statement in GUI Matlab.

(https://www.mathworks.com/matlabcentral/answers/223665-how-to-write-if-else-
statement-in-gui-matlab, diakses pada tanggal 28 Oktober 2017 pukul 12.10).

Meshooo. 2014. Radio Button in Matlab.

(https://www.mathworks.com/matlabcentral/answers/122320-how-to-know-if-a-radio-
button-is-selected-or-not, diakses pada 28 Oktober 2017 pukul 15.10).

Pratama, anastasia dewanti. 2017. Operasi Matematika Matlab.

(http://anastasiadpp.blog.gravicodev.id/wp-
content/uploads/sites/9/2017/05/2110141008_Anastasia-Dewanti-PP_Pertama-dan-
Kedua.docx. , diakses pada tanggal 27 Oktober 2017 pukul 10.10).

Teemu. 2013. Normalized Units in Matlab.

(https://www.mathworks.com/matlabcentral/answers/63162-what-does-this-code-mean-
set-gcf-units-normalized-outerposition-0-0-1-1, diakses pada tanggal 28 Oktober 2017
pukul 10.10).