Nama NIM Jurusan Kelas Pertemuan ke 8 Research Mini ke 7

: Sahatma Pangaribuan : 509131036 : Pend. Teknik Elektro : Reguler 09 : Pemograman Komputer : Membuat Design Program Aplikasi

Membuat Design Program Aplikasi

1. Membuat GUI dengan Matlab MATLAB mengimplementasikan GUI sebagai sebuah figure yang berisi berbagai style obyek kontrol user interface (uicontrol). Selanjutrya, kita harus memprogram masingmasing obyek agar dapat bekerja ketika diaktifkan oleh pemakai GUI. Ada dua hal mendasar yang harus dikerjakan untuk membuat aplikasi GUI, yaitu: Mengatur layout komponen GUI dengan uicontrol. Memprogram komponen GUI agar dapat bekerja seperti yang diharapkan. GUIDE merupakan himpunan tool layout. GUIDE menghasilkan pula suatu m-file yang berisi kode program untuk menangani inisialisasi dan menjalankan GUI. Kemudian, mfile menyediakan suatu kerangka untuk implementasi callback, yaitu fllrgsi yang bekerja ketika para pemakai mengaktifkan suatu komponen di dalam GUI. a. Mengatur layout Komponen GUI. Setelah kita membuka GUIDE matlab dan menentukan apakah menggunakan blank GUI atau template GUI, langkah selanjutrya adalah mendesain figure (form dalam visual basic) dengan menggurlakan komponen palet seperti pushbutton, slider, static text, edit text, frame, radio button, dan sebagainya. Selanjutrya, kita dapat mengatur layout masing-masing komponen, baik string (caption), tag (name), font, maupun color, dengan menggunakan property. Jika kita telah selesai mendesain, maka langkah berikutrya adalah menylmpan figure ke dalam matlab, yang secara default akan maryimpan dengan file berekstensi *.fig. Dari sini, matlab secara otomatis pula akan mernbuatkan sebuah mfile dengan nama sama.

Research Mini Sahatma Pangaribuan

b. Memprogram K omponen GUI M-fiIe, yang telah dibuat pada langkah di atas, akan otomafis terbuka dan kita harus memprogranmya agar komponen dapat bekerja secara simultan. Jika kita tidak dalam posisi kali pertama menyimpan *.fig, maka harus membuka sendiri m-fiIe. Untuk membuat program pada m-fiIe, kita cukup memperhatikan fungsi-fungsi matlab bertanda callback di mana perintah disisipkan. Jadi secara sederhana sebenarnya GUI matlab dapat dibentuk oleh dua buah file yaitu fig-file dan m-file. 2. Fitur-fitur GUIDE Dalam membuat aplikasi GUI, GIJIDE akan membuat kerangka kerja m-file secara otomatis langsung dari layout kita. K ita dapat menggunakannya untuk membuat kode aplikasi M-fiIe. Metode ini memberikan beberapa keuntungan, antara lain: M-file berisi kode yang mengimplementasikan sejumlah fitur. M-file mengadopsi suatu pendekatan efektif yang menangani object handle dan menjalankan rutin callback. M-file menyediakan suatu manajemen data global. Prototipe sebuah subfungsi secara otomatis akan disisipkan pada rutin callback. Memilih aplikasi GUIDE Perintah GUIDE dari command matlab akan menampilkan layout editor berupa figure kosong. Sebelum menambahkan komponen ke dalam layout editor, kita seharusnya mengatur GUI menggunakan GUI options dengan memilih GUI Options dari menu Tools pada layout editor. Mengatur konfigurasi aplikasi M-file Dialog GUI Option memungkinkan kita mengatur konfigurasi aplikasi M-file seperti yang kita inginkan. GUIDE dapat membuat hanya file *.FIG atau keduanya, file *.FIG maupun *.M. Pada kotak dialog GUI options, ada beberapa pilihan, antara lain: a. Resize behavior b. Kita dapat mengontrol apakah user dapat mengubah ukuran jendela Figure yang berisi GUI kita dan bagaimana matlab mengendalikan perubahan Ukuran jendela Figure. GUIDE menyediakan tiga pilihan, yaitu:

Research Mini Sahatma Pangaribuan

 Non-resizeable User tidak dapat murgubah ukuran jendela Figure (default). Proportional Matlab secara otomatis akan menskalakan kembali komponen GUI pada ukuran jendela Figure yang baru secara proporsional. User-specified User dapat mengubah ukuran jendela Figure secara spesifik seperti yang diharapkan. c. Command-Line accessibility Kotak dialog GUI Options memiliki tiga pilihan untuk mengontrol akses user yaitu: off Mencegah akses baris perintah ke figure GUI (default). on Memungkinkan untuk mengakses baris perintah ke figure GUI. User-specified GUI menggunakan nilai kita pada properti Handle Visibility dan Integer Handle d. Mengatur GUI Options Generate .fig file and .m file Secara otomatis GUI akan membuat dua buah file (*.fig dan *.m). Generate .fig file only Jika kita memilih Generate .fig file only pada kotak dialog GUI Options, maka artinya kita tidak menginginkan GUIDE untuk membuat m-fiIe. Oleh karena itu, ketika kita menyimpan GUI dari layout editor, GUIDE hanya membuat sebuah file figure (fig-file) yang dapat kita tanpilkan kembali dangan menggunakan perintah open atauhgload.

Research Mini Sahatma Pangaribuan

KOMPONEN GUIDE Untuk membuat sebuah user interface matlab dengan fasilitas GUIDE, kita harus mulai dengan membuat desain sebuah figure. Untuk membuat sebuah desain figure, kita dapat memanfaatkan uicontol (kontrol user interface) yang telah terjadi pada editor figure. Banyak sekali kontrol user interface yang ada pada matlab, yaitu: a. Pushbutton b. Togglebutton c. Radio button d. Checkboxes e. Edittext f. Static text g. Slider h. Frames i. Listboxes j. Popupmenu k. Axes a. Pushbutton Sebuah pushbutton merupakan jenis kontol berupa tombol tekan yang akan menghasilkan sebuah tindakan jika diklilk misalnya tombol OK , CANCEL, dan lainnya. Untuk menampilkan tulisan yang berada pada pushbutton, kita dapat mengatur melalui properly inspector dengan mengklik obyek pushbutton pada figure, lalu mengklik toolbar property inspector atau menggunakan klik kanan dan pilih property inspector. Selanjutnya istilah tab String dengan label yang kita maksudkan misalnya Proses atau yang lainnya b. Toggle Button Toggle button menghasilkan efek yang hampir sama dengan pushbutton. Perbedaannya adalah saat pushbutton ditekan, maka tombol akan kembali pada posisi semula jika tombol mouse d ilepas. Sebaliknya pada toggle button tombol tidak akan kembali ke posisi semula, kecuali kita menekannya kembali.

Research Mini Sahatma Pangaribuan

c. Radio Button Radio button mirip dengan tombol checkbox. Pada radio button. Kita hanya dapat memilih atau menandai satu pilihan dari beberapa pilihan yang ada. Contoh aplikasi radio button adalah ketika kita membuat aplikasi Konversi suhu. Suhu awal dalam derajat Celcius diinputkan dan selanjutnya kita akan memilih untuk mengkonversi suhu Celcius ke Reamur, Fahrenheit, atau Kelvin. d. Checkboxes Kontrol checkbox menghasilkan suatu tindakan ketika diklilq yaitu berupa tanda atau status. Checkbox berguna jika kita ingin menyediakan sejumlah pilihan mandiri yang tidak tergantung pada pilihan lainnya. Untuk menandai apakah sebuah checkbox telah ditandai atau tidak, kita dapat melihat pada value property,yaitu masing-masing bemilai 1 dan 0. Contoh checkbox adalah ketika kita diminta memilih hobi. Karena hobi umunmya bisa lebih dari satu, kita bisa mengklik lebih dari satu obyek checkbox. e. Edit Text Konfrol edit text merupakan sebuah tempat yang memungkinkan kita memasukkan atau memodifikasi text. String properfy berisi teks yang akan memunculkan pada kotak edit text. Kemudian, edit text bermanfaat pula untuk menginputkan suatu data dari keyboard. Sebagai contoh, kita memiliki aplikasi untuk menentukan luas dan keliling sebuah lingkaran. Kita akan menyajikan input dan output dari edit text. f. Static Text Kontrol static text akan menghasilkan teks bersifat statis (tetap), sehingga pemakai tidak dapat melakukan perubahan padanya. pada static text, kita dapat mengatur teks dengan beberapa fasilitas, antara lain jenis dan ukuran font, wama justifikasi (Ieft, center, right), dan lain-lain. Kita dapat memodifikasi semumya melalui property inspector. g. Slider Slider merupakan komponen GIII yang dapat bergeser secara horizontal maupun vertikal. Berbeda dengan bahasa pemrograman lain seperti VB yang memiliki scroll (penggulung) horizontal dan vertikal secara terpisah, matlab hanya memrliki sebuah slider. Namun, dengan sebuah slider kita dapat mengatumya menjadi slider horizontal atau slider vertikal dengan mendrag mouse sesuai dengan keinginan kita. Slider digunakan jika kita menginginkan inputan yang tidak dilakukan dari keyboard. Dengan menggunakan slider, kita lebih fleksibel dalam melakukan pemasukan data karena kita dapat mengatur sendri nilai-nilai maksimum, minimum, atau sliderstep, dan sebagainya

Research Mini Sahatma Pangaribuan

h. Frames Frame merupakan kotak tertutup yang dapat kita gunakan untuk mengelompokkan kontrol yang berhubungan, kecuali axes. Tidak seperti kontrol lainnya, frame pada matlab tidak memiliki rutin callback. Frame ibarat kertas buram. Dengan demikian, jika kita menambahkan sebuah frame setelah mendesain kontol lain, maka kontol akan tertutup oleh frame. Oleh karena itu, kita dapat menggunakan Bring to Front atau Send to back untuk memunculkan kontrol. i. Listboxes Kontrol listbox menampilkan semua daftar item yang terdapat pada String property dan membuat kita dapat memilih satu atau lebih item yang ada. Value property berisi indeks yang dihubungkan dengan daftar item yang dapat dipilih. Jika kita memilih item lebih dari satu, maka nilai yang dikirimkan merupakan sebuah vektor. indeks-indeks item sebuah listbox merupakan bilangan bulat, di mana item pertama diberi indeks 0, item kedua diberi indeks l, dan seterusnya. Berikut adalah contoh aplikasi Listbox: j. PopupMenu Popup menu mernbuka tampilan daftar pilihan yang didefinisikan pada String Property ketika kita mengklik tanda panah pada aplikasi. Ketika tidak dibuka, popup menu hanya akan menampilkan satu item yang menladi pilihan saat ini, yang ditentukan oleh sebuah indeks berisi Value Properfy. Item pertama pada String Property sebuah popup menu akan diberi nilai 1, item berikutnya diberi nrlai 2, dan begrtu seterusnya. Popup menu sangat bermanfaatketika kita ingin memberi pemakai sebuah pilihan atau altemattf tanpa jarak, tidak seperti radio button. Contoh pemakaian popup menu dapat dilihat pada gambar berikut: k. Axes Dengan axes, kita dapat membuat aplikasi yang dapat digunakan urtuk menampilkan sebuah grafik atau gambar (image). Axes sebenamya tidak termasuk golongan user interface control, tetapi axes dapat diprogram agar pemakai dapat berinteraksi dengan axes dan obyek grafik yang dapat ditampilkan melalui sebuah axes. Berikut adalah conioh aplikasi yang menggunakan axes.

Research Mini Sahatma Pangaribuan

DESAIN APLIKASI GUI Bab sebelumnya telah memperkenalkan kita pada macam-macam komponen uicontol yang meliputi pushbutton, static text, edit text, axes, popup menu, slider, dan sebagainya Selanjutrya, pada Bab 3 kita akan mengaplikasikan komponen dengan membuat sebuah desain GUI. a. Membuka Figure Untuk membuat sebuah desain GUI, kita dapat memulainya dangan mengklik tombol Start Matlab dan memilih MATLAB, lalu mengklik GUIDE (GUI Builder) atau dari command matlab, kita ketikkan: >>guide Maka, kita akan mendapatkan sebuah kotak dialog GUIDE Quick Start yang memiliki beberapa pilihan. Pilihlah Blank GUI (default) agar menampilkan jendela layout figure GUI. b. Align Object Dalam membuat desain aplikasi, kita sangat memerlukan kerapian antarobyek agar menghasilkan desarn aplikasi yang cantik. Untuk mengatur obyek agar memiliki jarak atau spasi, baik secara verlikal maupun horizontal, GUIDE rnenyediakan fasilitas align objects yang diperlihatkan gambar benkut: c. Grid dan Ruler Selain align objects, GUIDE matlab menyediakan pula fasilitas grid dan ruler (obyek penggaris tepi). Untuk mengaktifkannya, kita bisa mengklik menu tools, lalu memilih grid and ruler agar muncul kotak dialog Grid and Ruler. d. Property Inspector Properfy inspector bukanlah sebuah kontrol dari GUL Justru property inspector inilah yang memungkinkan kita memodifikasi atau mengahr semua properti untuk satu atau lebih insftumen obyek kontol atau komponen. property inspector menyediakan semua kebutuhan yang dapat dilakukan untuk mengatur obyek dan menampilkan semua nilai yang aktif saat ini. Kita dapat melihat properti yang telah diatur pada sederetan daftar di dalamnya. Daftar terhubung dengan sebuah perangkat yang ada pada monitor.

Research Mini Sahatma Pangaribuan

CONTOH APLIKASI Bab IV berisi beberapa contoh yang menggambarkan teknik+eknilq yang bermanfaat dalam mengimplementasikan GUI. Setiap contoh moryediakan aplikasi sesungguhnyab, aik dalam bentuk figure GUI, dalam bentuk FIG-file pada layout editor GUIDE, maupun aplikasi M-file yang dapat dilihat pada editor matlab. Beberapa contoh yang diberikan adalah: Kotak dialog untuk konfirmasi sebuah aplikasi Axes untuk menggambar grafik fungsi kuadrat a. Kotak Dialog untuk Konfirmasi Sebuah Aplikasi Contoh berikut mengambarkan bagaimana menampilkan sebuah kotak dialog ketika kita akan menutup sebuah aplikasi GUI. Tujuan kotak dialog adalah memberikan konfirmasi kepada user apakah benar-benar akan menutup aplikasi GUI-nya atau tidak. Kita tentu ingin melindungi program aplikasi dari aktivitas penutupan aplikasi, baik yang disengaja maupun tidak disengaja. Manfaatnya adalah manghindari hilangnya informasi berharga yang telah kita dapatkan. Untuk mengantisipasinya, kita memerlukan sebuah dialog yang dipakai sebagai konfirmasi sebelum menutup sebuah aplikasi. Untuk membuat aplikasi, kita dapat melakukan langkah-langkah berikut: Masuklah ke GUIDE. Pilih Blank GUI (Default) agar kita dibawa ke figure kosong. Buatlah sebuah pushbutton, kemudian atur property string-nya dengan mengklik kanan pilihan Property Inspector dan mengisi dengan ' Tutup'. Buatlah sebuah static text dan isikan properly String dengan 'Contoh Untuk Menutup Aplikasi'. Selanjutrya, atur property name pada figure dengan kata 'Aplikasi'. Maka, kita akan memperoleh bentuk figure sebagai berikut: Kemudian, simpanlah figure. misalnya dengan nama menutup_aplikasi.fig. Ingat bahwa saat kita menyimpan fig-file secara otomatis kita pun akan diberikan sekaligus disimpankan sebuah m-file dengan nama yang sama. Akibat langkah sebelumnya, maka saat ini kita akan mendapakan sebuah m -file yang otomatis terbuka di layar editor.

Research Mini Sahatma Pangaribuan

 Selanjubrya kita harus melengkapi m-file pada rutin callback-nya. Carilah rutin callback untuk komponen pushbutton1 dan tambahkan beberapa baris program, sehingga menjadi sebagai berikut: Questdlg merupakan sebuah frurgsi matlab yang berfungsi memanggil kotak dialog modal yang berisi dua pushbutton, yaitu ya atau tidak Selanjutaya, jika kita mengklk salah satu pushbutton, maka akan dibandingkandengan fungsi strcmpQ. Jika tidah maka kita akan dibawa kembali ke figure semula. Jika ya, maka statemen delete(hand1es.figure) akan dikerjakan dan mengakibatkan figure yang akif saat ini akan dihapus. Selanjutrya, kita dapat kembali ke layout editor untuk menjalankan program aplikasi dengan mengklik tombol panah atau dan menu Tools dengan mengklik Run sehingga kita akan memperoleh hasil sebagai berikut: b. Axes untuk Menggambar Grafik Fungsi Kuadrat Bukalah sebuah figure kosong GUIDE, lalu buatlah beberapa kontrol dargan komponen berikut: Dengan demikian akan mendapatkan hasil figure seperti berikut: Jika sudah lengkap dan kita sudah mengatur semua property yang diberikan, maka simpanlah figure misalnya dengan nama contoh_axes.fig. Kemudian, bukalah m-filenya dan tambahkan beberapa kode program pada fungsi pushbuttonl-callback. Statemen min: str2double(get(handles.editl,'string')); digunakan untuk menangkap nilai string pada kotak edit1 yang dikonversi ke numerik dan dimasukkan ke variabel min, dan demikian pula untuk nilai max. Kemudian, kita membuat sebuah rentang nilai x sebagai variabel bebas dari min sampai max dengan penambahan 0.1. Selanjutnya, hitunglah nilai y sebagai variabel terikat dengan formula y: x.^2. Hal ini sebenamya tidak lain adalah fungsi kuadratnya. Kita dapat pula mengubah formula jika ingin membuat fungsi yang berbeda, misalnya y = x.^3 atau yang lainnya. Untuk menampilkan grafik persamaan kuadrat ke sebuah axes, kita harus mengatur agar axes yang aktif adalah axesl dengan menggunakan statemen axes(handles.axesl), lalu statement plot(x,y). Simpan kembali m-file dan kembalilah ke figure untuk menjalankan aplikasinyaM. isalnya, kita memberikanb atasan min= - 4 dan max=4, maka kita akan memperoleh:

Research Mini Sahatma Pangaribuan

MENU GUI Dalam GUI, matlab memungkinkan kita membuat menu. Dengan menggunakan menu, program kita akan terasa lebih terorganisasi. Kemudian, pemakai akan merasa lebih enjoy karena mereka merasa terbimbing dalam menjalankan aplikasi. Ada dua jenis menu yang disediakan oleh GUIDE, yaitu: Menu bar Menu bar maupakan menu GUI matlab yang ditampilkan pada figure dan terletak di atas seperti halnya menu pulldown. Pada menu bar, kita dapat menempatkan menu utama di bagian atas, kemudian submenu di bawahnya. Selanjutrya, kita pun masih bisa menernpatkan submenu lain yang lebih bawah. Contextmenu Meru yang akan ditampilkan jika kita mengklik kanan mouse pada obyek grafis. Kita dapat melihat contoh aplikasi menu pada Gambar 5.1. Kita dapat membuat kedua jenis menu di atas, baik menu bar maupun menu context melalui menu editor. Klik menu Tools, lalu pilih menu editor, sehingga akan muncul kotak dialog menu seperti Gambar 5.2. 1. Menu Bar Untuk membuat menu, kita harus mempersiapkan nama-nama menu sekaligus masingmasing menu item-nya. Setiap menu item dapat memiliki submenu dan setiap item dapat memiliki submenu lagi, begitu seterusnya Misalnya, kita akan membuat menu sebagai berikut: Maka, langkah awal yang kita lakukan adalah membuka Menu Editor, baik melalui toolbar Menu Editor maupun dari menu Tools dan pilih Menu Editor. Kemudian, kliklah Create a new menu, sehingga akan tampil kotak dialog sebagai berikut: Kliklah Untitled 1, lalu isikan nama menu pertama, yaitu File pada kotak label serta nama rutin callback-nya pada kotak tag. Selanjutlya, kita akan menjumpai tampilan sebagai berikut: Kotak dialog callback terisi %oautomatic, berarti pada m-file-nya nanti nama callback akan dituliskan secara otomatis sesuai dengan nama tag-nya.

Research Mini Sahatma Pangaribuan

10

Kemudian, untuk membuat menu item dari menu File, langkah-langkah yang diperlukan adalah: Klik menuFile Klik menu item Selanjutnya, klik Untitled 2 dan isikan nama item-nya, yaitu Buka, pada kotak label dan nama rutin callback, misalnya file buka pada kotak tag. Begitu seterusnya, sehingga semua menu item yang ada di bawah menu telah terbuat. Kita harus melakukan langkah yang sama pada pembuatan dua manu berikutrya, yaitu menu proses dan Help. Dangan demikian, jika kita sudah melakukan semuanya, maka akan mendapatkan hasil sebagai berikut: Selanjutnya, jika kita menjalankanya, maka hasil yang diperoleh sebagai berikut: Kita dapat melihat bahwa antara menu item Cetak dan Keluar terdapat gans pemisah yang dapat kita lakukan dengan mengklik checkbox Separator above this item. 2. Context Menu Context menu akan ditampilkan jika pemakai melakukan klik kanan pada sebuah obyek. Melalui Menu Editor, kita dapat mendefinisikan context menu dan menggabungkannya dengan obyek-obyek. Semua item di dalam context menu adalah bagian context menu yang tidak akan ditampilkan pada figure menu bar. Untuk mendefinisikan menu induk pilihlah New Context Menu dari toolbar Menu Editor. Untuk menambahkan item-item ke dalam sebuah context menu, kita dapat menggunakan New Menu Item pada toolbar Menu Editor. Selanjutrya, masukkan label dan rutin callback masing-masingp adak otak tag dan callback. Kemudian, untuk menghubungkan contex menu ke sebuah obyek kita dapat melakukan langkah-langkah berikut: Pilihlah sebuah obyek pada layout editor yang akan kita berikan context menu. Gunakan property inspector untuk mangatumya melalui UlContexMenu dan pilihlah yang sesuai. Tambahkan sebuah fungsi rutin callback pada m-file untuk masing-masing callback. Fungsi rutin callback nantinya akan mengeksekusi ketika kita memilih item context menu.

Research Mini Sahatma Pangaribuan

11

REFERENSI
http://www.docstoc.com/docs/15478308/%E2%80%9CApplikasi-Desain-Grafis%E2%80%9D http://iklanbarisgratis.info/?s=TUGAS+KOMPUTER+APLIKASI http://taufikdd.files.wordpress.com/2008/09/modul-teori-dasar-desain-grafis-kls-3.pdf http://modelobjekphp.blogspot.com/2009/05/matlab.html http://www.ilmukomputer.org/wp-content/uploads/2006/12/bagaimana-memulai-desain-grafisslametriyanto.pdf

Research Mini Sahatma Pangaribuan

12