LAPORANPRAKTIKUM IIIPEMROGRAMAN VISUAL

JudulPemrograman Event Driven

Oleh:Nurwahyuddi12022038

PROGRAM STUDI TEKNIK ELEKTROFAKULTAS TEKNOLOGI INDUSTRIUNIVERSITAS AHMAD DAHLANYOGYAKARTA2013I. TUJUANAdapun tujuan dari praktikum yang hendak dicapai:1. Mahasiswa dapat memahami implementasi konsep dasar pemrograman visual dengan alat bantu Visual C++2. Mahasiswa dapat menulis event handler untuk suatu obyek3. Mahasiswa dpaat membuat program operasi matematis 2 angka

II. DASAR TEORIPemrograman Event-Driven telah ada sebelum GUI dibuat dan diemplementasikan dalam beberapa cara. Dengan diperkenalkannya mouse, maka semua aplikasi windows memakai metode event-driven untuk mengelola interaksi antarprogram dengan pemakainya.Sebagian besar kode program yang ditulis dalam pemrograman visual digunakan untuk menangani event dari pemakai atau system. Prosedur penanganan program untuk menangani event biasanya disebut sebagai prosedur penanganan event (Event Handler).Contoh event diwindows antara lain: Klik kiri, klik kanan, klik ganda pada mouse, penekanan tombol keyboard, saat mouse melewati objek, dan lain-lain. Kunci pokok dalam pemrograman event-driven adalah bagaimana menentukan event mana yang harus ditangani lebih lanjut. Dalam pemrograman visual kita dituntut untuk menentukan proses yang akan dikerjakan bila sesuatu event (penekanan tombol keyboard dan mouse) itu diberi aksi.

III. LANGKAH PERCOBAANA. Menulis Event Handler Operasi Penjumlahan 2 Angka1. Buatlah proyek baru dan tambahkan komponen berikut serta ubahlah nilai propertinya. Sesuaikan ukuran dan posisi obyek dengan gambar 1. Tambahkan pula beberapa Label untuk memberikan keterangan.KomponenPropertiIsi

FormTextOperasi Penjumlahan

TextBoxNameTextBoxAngka1

Text0

TextBoxNametextBoxAngka2

Text0

TextBoxNametextBoxJumlah

Text0

ReadOnlyTrue

ButtonNamebuttonHitung

Text&Hitung

Gambar 1: Tampilan Form Operasi Penjumlahan2. Bukalah Code Explorer dengan klik kanan pada form dan pilih menu View Code, tambahkan definisi variable yang dipakai (di bawah pendefinisian #pragma endregion.#pragma endregionDouble Angka1, Angka2, Jumlah;3. Kembali ke Form designer, klik pada obyek buttonHitung (atau pada panel Properties, pilih obyek buttonHitung System-Windows-Forms-Button). Pada panel Properties, klik icon Event dan klik dobel pada isian Event Click. Kursorakan berpindah ke panel Code Explorer. Ketikkan program berikut:Angka1 = Convert::ToDouble(textBoxAngka1->Text);Angka2 = Convert::ToDouble(textBoxAngka2->Text);Jumlah = Angka1 + Angka2;textBoxJumlah->Text = Convert::ToString(Jumlah);}4. Jalankan program tersebut. Isikan angka-angka secara bervariasi dalam textBoxAngka1 dan textBoxAngka2. Apabila terjadi Error (misalnya kalau memasukkan huruf), mak akan ditampilkan pesan kesalahan. Anda dapat menekan tombol Break dan memilih menu Debug-Stop Debugging untuk kembali ke IDE Visual C++.

B. Menulis Event Handler Operasi Matematis1. Buatlah proyek baru dan tambahkan komponen berikut serta ubahlah nilai propertinya. Sesuaikan ukuran dan posisi obyek dengan Gambar 2. Tambahkan pula beberapa Label untuk memberikan keterangan.

KomponenPropertiIsi

FormTextOperasi Penjumlahan

TextBoxNameTextBoxAngka1

Text0

TextBoxNametextBoxAngka2

Text0

TextBoxNametextBoxHasil

Text0

ButtonNamebuttonHitung

Text&Hitung

GroupBoxNameGroupBoxOperasi

CaptionOperasi

RadioButtonNameRadioButtonPenjumlahan

CaptionPenjumlahan

ChackedTrue

RadioButtonNameRadioButtonPengurangan

CaptionPengurangan

RadioButtonNameRadioButtonPerkalian

CaptionPerkalian

Gambar 2: Tampilan Form Operasi Matematis

2. Pada program dalam Code Explorer, tambahkan definisi variable yang dipakai:#program endregionDouble Angka1, Angka2, Hasil;3. Di Form Designer, klik pada obyek buttonHitung. Pada panel Properties, klik icon Event dan klik dobel pada isian event Click. Ketikkan program berikut:Angka1 = Convert::ToDouble(textBoxAngka1->Text);Angka2 = Convert::ToDouble(textBoxAngka2->Text);If (radioButtonPenjumlahan->Checked){Hasil = Angka1+Angka2;}else if (radioButtonPengurangan->Checked){Hasil = Angka1-Angka2;}else if (radioButtonPerkalian->Checked){Hasil = Angka1*Angka2;}textBoxHasil->Text = Convert::ToString(Hasil);}4. Jalankan program tersebut.IV. HASIL DAN PEMBAHASANA. Menulis Event Operasi Penjumlahan 2 AngkaPada percobaan kali ini akan dibuat sebuah Project yang digunakan untuk menjumlahkan 2 buah angka. Adapun komponen-komponen yang digunakan dalam pembuatan Project ini antara lain: Form 3 buah Label 3 buah TextBox 1 buah ButtonProject dapat diawali dengan membuat sebuah Form baru. Usahakan judul/nama form dibuat dengan nama yang berbeda agar tidak menumpuk.Untuk mengawali pembuatan Project, pertama komponen-komponen yang akan digunakan disusun seperti (Gambar 1) yang telah terlampir sebelumnya pada Langkah Percobaan. Setelah semua komponen disusun/ditata hingga berbentuk seperti tampilan Form pada Gambar 1, selanjutnya perlu di tambahkan syntax double Angka1, Angka 2, Jumlah; sebagai pemberi keterangan atau mendefinisikan input dan output dari Project yang akan dibuat. Penambahan Syntax atan potongan Listing ini dapat dilakukan dengan membuka Code Explorer yakni dengan mengklik kanan pada Form, lalu pilih menu View Code. Syntax pendefinisian ini dapat ditulis dibawah #pragma endregion seperti yang telah dijelaskan sebelumnya pada langkah percobaan.

Untuk selanjutnya, setelah langkah-langkah percobaan telah dilakukan dengan benar, untuk sentuhan terakhir yaitu memasukkan event-handler untuk dapat menjalankan Project. klik icon Events pada Properties lalu Klik Event Click pada opsi Action untuk memasukkan event Handler pada obyek ButtonHitung pada event Click. Untuk Event-Handler yang akan digunakan, sebelumnya telah dilampirkan pada langkah percobaan (A.3). Berikut Penjelasan cara kerja event handler tersebut:Untuk Angka1, yaitu Text pada TextBoxAngka1 akan dikonversi ke tipedata Double;Untuk Angka2, yaitu Text pada TextBoxAngka2 akan dikonversi ke tipedata Double;

Untuk Text pada TextBoxJumlah akan dikonversi ke tipedata String yang akan ditampilkan pada Output Jumlah

Merupakan Rumus perhitungan yang digunakan, dimana Inputan Angka1 akan dijumlahkan dengan Inputan Angka2Jumlah=Angka1+Angka2;

Setelah memasukkan Event Handler pada obyek buttonHitung tadi, maka Project telah siap dijalankan. Berikut tampilan Project setelah dimasukkan event handlernya setelah didebug:a. Input Angka1=54 ; Angka2=46;Jumlah=100b. Input Angka1=64 ; Angka2=72;Jumlah=136

Gambar 3: Tampilan perhitungan Project Operasi Penjumlahan(Sesudah)Project diatas berisi Operasi Penjumlahan 2 angka, dimana terdiri dari 2 inputan angka, dan 1 buah output. Jadi, ketika dimasukkan angka pada 2 buah inputan, kemudian secara otomatis 2 buah angka inputan akan dieksekusi (dijumlahkan) setelah tombol Hitung ditekan.

B. Menulis Event Handler Operasi MatematisPada percobaan ini akan dibuat Project yang berisi berbagai Operasi Matematis, seperti penjumlahan, pengurangan, perkalian. Didalam project ini secara umum berisi 2 buah inputan bilangan, 1 buah output, 3 buah pilihan operasi matematis, dan 1 buah tombol pengeksekusi. Berikut komponen-komponen yang digunakan untuk membuat project ini, antara lain: Form 3 buah Label 3 buah TextBox 1 buah GroupBox 3 buah RadioButton 1 buah ButtonUntuk mengawali pembuatan Project, pertama komponen-komponen yang digunakan disusun/ditata seperti yang telah terlampir pada langkah percobaan (Gambar2). Setelah semua komponen tertata sesuai dengan yang terlampir, selanjutnya akan diisikan event-handler agar Project yang dibuat dapat dioperasikan sebagaimana kegunaannya. Seperti biasa, klik icon Events pada Properties lalu Klik Event Click pada opsi Action untuk memasukkan event Handler pada obyek ButtonHitung pada event Click. Untuk Event-Handler yang akan digunakan, sebelumnya telah dilampirkan pada langkah percobaan (b.3). Berikut Penjelasan cara kerja event handler tersebut: Untuk Angka1, yaitu Text pada TextBoxAngka1 akan dikonversi ke tipedata Double; Untuk Angka2, yaitu Text pada TextBoxAngka2 akan dikonversi ke tipedata Double; Jika RadioButtonPenjumlahan diChecked(ditandai), maka Hasilnya sama dengan Angka1 ditambah Angka2; Atau jika RadioButtonPengurangan diChecked(ditandai), maka Hasilnya sama dengan Angka1 dikurangi Angka2; Atau jika RadioButtonPerkalian diChecked(ditandai), maka Hasilnya sama dengan Angka1 dikali Angka2; Untuk Text pada TextBoxHasil akan dikonversi ke tipedata String untuk dimpilkan dalam Hasil

Ketika RadioButton Penjumlahan dipilih, maka perintah pengeksekusian 2 buah inputan angka akan dijumlahkan setelah tobol Hitung ditekan. Begitu pula jika RadioButton Pengurangan dipilih, maka perintah pengeksekusian 2 inputan akan secara otomatis akan dilakukan operasi pengurangan, dan begitu juga dengan perintah Perkalian.

Berikut hasil Project ketika dijalankan setelah dimasukkan event-handler: Penjumlahan (Angka1=63;Angka2=37;Hasil=100)

Gambar 4. Operasi Matematis (Penjumlahan) Pengurangan (Angka1=73;Angka2=23;Hasil=50)

Gambar 5. Operasi Matematis (Pengurangan) Perkalian (Angka1=25;Angka2=12;Hasil=300)

Gambar 6. Operasi Matematis (Perkalian)

V. TUGAS1. Membuat Project Operasi Matematis yang berisi operasi penjumlahan, operasi pengurangan, perkalian, dan Pembagian.

Project operasi matematis sebelumnya telah dibuat pada percobaan 2. Namun kali ini akan ditambahkan operasi pembagian pada project tersebut. Berikut tampilannya:

Gambar 7: Form Operasi Matematis setelah ditambahkanOperasipembagianPada Project Operasi Matematis sebelumnya yang telah dibuat tidak ada yang dirubah atau diganti, tetapi hanya ditambahkan satu RadioButton untuk Operasi Pembagian, sedangkan pada event-handlernya juga ditambahkan Listing program seperti yang ada di bawah ini:else if(radioButtonPembagian->Checked){Hasil=Angka1/Angka2;

Listing event-handler diatas ditambahkan agar Operasi Pembagian yang akan ditambahkan dapat dilakukan/dijalankan. Penjelasan event-handlernya sebagai berikut: Atau jika RadioButtonPembagian diChecked(ditandai), maka Hasilnya sama dengan Angka1 diBagi dengan Angka2;

Dan berikut tampilan project setelah dijalankan: Pembagian (Angka1=169;Angka2=16;Hasil=10.5625)

Gambar 8: Project dengan Operasi Pembagian2. Menulis Event-Handler program Menebak AngkaPada project ini akan diisikan Event-Handler Program Menebak Angka yang sebelumnya telah dibuat pada praktikum II. Pada project ini akan diisikan program sehingga Porject tersebut dapat dijalankan. Berikut komponen-kompenen yang digunakan dalam pembuatan program ini:

KomponenPropertiNilai

FormTextAYO TEBAK !

TextBoxNametextBoxTebakan

Text0

LabelNamelabelTebakanKe

TextTebakan Ke

ButtonNamebuttonTebakan

Text&Tebak

ButtonNamebuttonKeluar

Text&Keluar

Berikut contoh tampilan Project menebak angka setelah beberapa komponen tadi ditata dalam Form:

Gambar 9: Contoh tampilan Program Menebak AngkaProject ini digunakan untuk program menebak angka, dimana ketika angka dimasukkan pada textbox inputan, dan setelah tombol Tebak ditekan, maka program akan secara otomatis mengeksekusi perintah tersebut. Setelah program dieksekusi maka akan muncul Form pemberitahuan yang menginformasikan apakah angka yang dimasukkan lebih besar, lebih kecil atau mungkin angka yang dimasukkan adalah tepat. Pada pojok kiri bawah project juga terdapat tulisan (Tebakan Ke) yang menginformasikan seberapa banyak tebakan yang dilakukan.Agar project menebak angka dapat dijalankan, terlebih dahulu event-handlernya haruslah dimasukkan. Pada program dalam Code Explorer, perlu ditambahkan directive untuk mengikutkan pustaka stdlib (untuk operasi bilangan random) dibawah #pragma once (dibagian atas program).#pragma once#include

Dan seperti biasa perlu juga ditambahkan sytax yang dapat mendefinisikan suatu Variabel yang digunakan di bawah #pragma endregion. Namun kali ini tipe data yang digunakan yaitu tipe int (Integer).#pragma endregionint Angka, AngkaTebakan, TebakanKe;

Selanjutnya perlu ditambahkan Event-Handler untuk obyek FormUtama pada event OnCreate. Berikut Listing programnya:Merupakan event-handler yang dimasukkan dalam Form dengan penyesuaian terhadap Project.private: System::Void Form1_Click(System::Object^ sender, System::EventArgs^ e) { int seed = DateTime::Now.Ticks; srand(seed); TebakanKe = 0; Angka = rand()%1000; }

Dan yang terakhir yaitu menambahkan Event-Handler untuk obyek buttonTebak pada event Click. Berikut Listing programnya:private: System::Void buttonTebak_Click(System::Object^ sender, System::EventArgs^ e) { TebakanKe = TebakanKe + 1;labelTebakanKe->Text = "Tebakan ke "+TebakanKe; AngkaTebakan = Convert::ToInt16(textBoxTebakan->Text); if (AngkaTebakan > Angka){ MessageBox::Show("Tebakan anda terlalu besar"); } else if (AngkaTebakan < Angka){ MessageBox::Show("Tebakan Anda terlalu kecil"); } else { MessageBox::Show("Tepat!!!"); textBoxTebakan->Enabled = false; buttonTebak->Enabled = false; } }

Berikut penjelasannya: Jika Angka Tebakan yang dimasukkan Lebih dari (>) Angka, maka akan muncul MessageBox yang berisi tulisan Tebakan anda terlalu besar; Atau jika Angka Tebakan yang dimasukkan Kurang dari (Text = "Tebakan ke "+Tebakanke;labelTerlaluBesar->BackColor=System::Drawing::Color::White;labelTerlaluKecil->BackColor=System::Drawing::Color::White;labelTepat->BackColor=System::Drawing::Color::White;AngkaTebakan = Convert::ToInt16(textBoxTebakan->Text);if (AngkaTebakan > Angka){labelTerlaluBesar->BackColor=System::Drawing::Color::Green;}else if (AngkaTebakan < Angka){labelTerlaluKecil->BackColor=System::Drawing::Color::Green; }else {labelTepat->BackColor=System::Drawing::Color::Green;textBoxTebakan->Enabled = false;buttonTebak->Enabled = false;} }Listing Event-Handler yang ditambahkanEvent-handler yang diganti12

1. Menunjukkan untuk LabelTerlaluBesar,LabelTerlaluKecil, dan LabelTepat mempunyai warna highlight (Latar) Putih;2. Menunjukkan untuk LabelTerlaluBesar,LabelTerlaluKecil, dan LabelTepat warna HighLight (Latar) akan berubah menjadi Hijau jika masing-masing angka tebakan lebih besar, lebih kecil, dan Tepat.

VI. KESIMPULANDalam menulis atau memasukkan Event-Handler ke dalam sebuah project yang akan dibuat, sebaiknya perlu diperhatikan dengan sungguh-sungguh karena pada saat memasukkan Event-Handler tersebut kemungkinan besar akan banyak terjadi error (kesalahan).Oleh karena itu, sangat penting untuk diperhatikan kembali setelah Event-Handler dimasukkan. Untuk mencari serta memperbaiki Event-Handler yang Error, maka perlu diperhatikan Output yang keluar setelah Project di Debug (dieksekusi). Di dalam output yang berisi informasi Error dapat diklik pada info error yang tersebut, sehingga Listing program yang error tadi dapat diperbaiki serta dapat dijalankan sebagaimana kegunaannya.

I. REFERENSIKartika Firdausy, S.T., M.T. (2013) Petunjuk Praktikum Pemrograman Visual. Yogyakarta: Universitas Ahmad Dahlan

Electrical Engineering | Ahmad Dahlan University