Praktikum Pemrograman Visual – Modul 2 Hal. 1

PEMERINTAH KABUPATEN BANYUWANGI DINAS PENDIDIKAN

SMK NEGERI 1 BANYUWANGI Jalan Wijaya Kusuma No. 46 Telp. 0333 - 424541

Banyuwangi - 68425

MODUL 2 PRAKTIKUM PEMROGRAMAN VISUAL

MENGGUNAKAN TOOL, PROPERTY, DAN EVENT PADA VB.NET

A. Kompetensi Standar kompetensi : Memahami pemrograman visual berbasis desktop Kompetensi dasar : 1. Menjelaskan objek aplikasi bahasa pemrograman

2. Menjelaskan user interface aplikasi bahasa pem-rograman

B. Tujuan 1. Mengenal macam-macam event pada VB.NET. 2. Membuat aplikasi yang menerapkan event pada VB.NET.

C. Petunjuk Pelaksanaan Praktikum Awali setiap aktivitas dengan do’a, semoga berkah dan mendapat kemudahan. Pahami tujuan dan dasar teori dengan baik dan benar. Kerjakan latihan dan tugas-tugas praktikum dengan baik, sabar, mandiri, dan ju-

jur. Tanyakan kepada guru pembimbing apabila ada hal-hal yang kurang jelas atau

yang belum dipahami. Laporkan kepada guru pembimbing jika pelaksanaan praktikum sudah selesai. Perhatikan faktor-faktor Keselamatan dan Kesehatan Kerja (K3) selama melak-

sanakan kegiatan praktikum. Dilarang bercanda yang berlebihan atau melakukan aktivitas yang tidak berhubungan dengan kegiatan praktikum.

D. Dasar Teori

1. Tool pada VB.NET Tool merupakan salah satu objek dalam pengembangan aplikasi menggunakan

VB.NET. Tool merupakan komponen-komponen yang sering digunakan pada suatu ap-likasi yang disusun sedemikian rupa sehingga membentuk suatu user interface. Penyu-sunan komponen-komponen ini haruslah dapat memudahkan pengguna aplikasi, baik dalam menggunakan aplikasi tersebut secara teknis, maupun dalam memahami fungsi-fungsi tiap komponen. Maka dari itu, penerapan suatu komponen untuk suatu fungsi ter-

Praktikum Pemrograman Visual – Modul 2 Hal. 2

tentu harus dipertimbangkan dengan matang. Sebagai contoh perhatikan dua potongan tampilan user interface berikut yang dapat digunakan oleh pengguna untuk memasuk-kan data jenis kelaminnya:

(a) (b)

Contoh Bagian Aplikasi Pemilihan Jenis Kelamin

Meskipun kedua potongan bagian aplikasi tersebut sama-sama digunakan untuk mema-sukkan data jenis kelamin dengan memberikan tanda pada pilihan yang sesuai, namun penggunaan komponen RadioButton (gambar b) lebih tepat. Hal ini dikarenakan Radio-Button hanya mengizinkan pengguna untuk memilih (memberi tanda) pada satu pilihan saja sehingga dapat mencegah pengguna melakukan kesalahan seperti yang ditunjukkan pada gambar (a).

2. Property Property merupakan komponen-komponen yang dimiliki oleh suatu objek aplika-

si. Tool maupun form pada VB.NET memiliki properti yang nilainya dapat diubah-ubah sesuai dengan kebutuhan pengembangan. Daftar property untuk tiap objek yang diguna-kan dapat Anda temukan pada Properties Window.

Properties Window

Praktikum Pemrograman Visual – Modul 2 Hal. 3

Nilai property tiap objek dapat diubah pada saat pengembangan sebagai nilai awal saat aplikasi pertama kali dijalankan. Selain itu nilai-nilai property dapat juga berubah pada saat program dijalankan menggunakan algoritma atau prosedur tertentu yang dide-finisikan oleh pengembang melalui kegiatan coding.

3. Event Event merupakan kejadian atau perlakuan yang dialami oleh aplikasi. Pada umum-

nya event timbul karena perlakuan dari pengguna. Salah satu contoh event adalah tom-bol (button) yang diklik oleh pengguna. Event pada VB.NET digunakan sebagai tolak ukur jalannya program atau aplikasi, mengingat Visual Basic menerapkan konsep event driven dalam konsep pemrogramannya.

E. Latihan

1. Aplikasi Sapa I Pada latihan kali ini kita akan membuat sebuah aplikasi sederhana yang menerap-

kan event klik pada tombol. 1. Buatlah sebuah aplikasi baru dengan tampilan seperti berikut ini:

2. Ubah nilai property untuk komponen yang digunakan sebagai berikut: Komponen Property Nilai Form1 (name) formSapa Text Aplikasi Sapa Button1 (name) btnHalo Text Halo!

3. Lakukan double-click pada komponen Button1 untuk membuka coding area. 4. Ketikkan perintah berikut di dalam block fungsi btnHalo_Click:

MessageBox.Show("Hai! Apa kabar? Kalian sedang melihat pesan yang ditampilkan pada Message Box dari aplikasi Sapa")

5. Jalankan aplikasi tersebut. Klik tombol Halo dan perhatikan apa yang terjadi.

Praktikum Pemrograman Visual – Modul 2 Hal. 4

2. Aplikasi Sapa II Pada latihan ini kita akan melakukan sedikit modifikasi dari aplikasi Sapa I. Apli-

kasi ini dapat menerima inputan berupa nama dan asal kelas serta akan menyapa peng-guna menggunakan data nama dan kelas tersebut. 1. Buatlah tampilan aplikasi seperti berikut:

2. Atur property tiap komponen yang digunakan sebagai berikut: Komponen Property Nilai Form1 (name) formSapa Text Sapa v2 Label1 (name) lblNama Text Nama Label2 (name) lblKelas Text Kelas TextBox1 (name) txtNama ComboBox1 (name) cmbKelas Items X RPL 1

X RPL 2 XI RPL 1 XI RPL 2 XII RPL 1 XII RPL 2

Button1 (name) btnSapa Text Sapa

3. Lakukan double-click pada komponen Button1. Ketikkan kode program berikut pada blok fungsi btnSapa_Click yang muncul:

Praktikum Pemrograman Visual – Modul 2 Hal. 5

MessageBox.Show("Hai " & txtNama.Text & "!" & _ "Anda berasal dari kelas " & cmbKelas.Text)

4. Jalankan aplikasi dan isikan nama serta pilih kelas Anda kemudian klik tombol Sapa. Perhatikan apa yang terjadi!

3. Aplikasi Sapa III Pada latihan ini kita akan kembali membuat sebuah aplikasi yang dapat menyapa

pengguna sesuai dengan data yang diinputkannya. Aplikasi ini akan menerapkan event TextChanged pada komponen TextBox dan event CheckedChanged pada komponen Ra-dioButton. 1. Buatlah tampilan user interface aplikasi sebagai berikut:

2. Atur property komponen-komponen yang digunakan sebagai berikut: Komponen Property Nilai

Form1 (name) formSapa Text Sapa v3 GroupBox1 (name) grpIdentitas Text Identitas Label1 (name) lblNama Text Isikan nama Anda pada kolom berikut: TextBox1 (name) txtNama Label2 (name) lblJenisKelamin Text Pilih jenis kelamin: RadioButton1 (name) rdbLaki Text Laki-Laki RadioButton2 (name) rdbPerempuan Text Perempuan Label3 (name) lblSapa

Praktikum Pemrograman Visual – Modul 2 Hal. 6

Komponen Property Nilai Text -

3. Buka coding area dengan menekan tombol F7 pada keyboard atau pilih menu View Code. Ketikkan kode berikut ke dalam coding area: Public Class formSapa Private Sub txtNama_TextChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles txtNama.TextChanged lblSapa.Text = "Halo " & txtNama.Text End Sub Private Sub rdbLaki_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles rdbLaki.CheckedChanged lblSapa.Text = "Halo Mas " & txtNama.Text End Sub Private Sub rdbPerempuan_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles rdbPerempuan.CheckedChanged lblSapa.Text = "Halo Mbak " & txtNama.Text End Sub End Class

4. Jalankan aplikasi kemudian coba isikan nama Anda pada kolom yang disediakan

serta pilih jenis kelamin Anda. Perhatikan apa yang terjadi!

F. Tugas Praktikum 1. Jelaskan apakah yang dimaksud dengan tool, property, dan event pada Visual Basic! 2. Apakah fungsi karakter ampersand (&) dan underscore ( _ ) pada kode program

yang telah Anda ketikkan pada bagian Latihan? 3. Modifikasi aplikasi kalkulator yang pernah Anda buat pada Tugas Praktikum Modul

1 sehingga aplikasi tersebut dapat memunculkan angka pada bagian display-nya se-suai dengan tombol yang ditekan!