Praktikum ke : 1 (satu)

Judul Praktikum : Pengenalan GUI VB.NET dengan Visual Studio 2013

Alokasi Waktu : 2 x 60 menit

Kompetensi Dasar : a. Mahasiswa dapat menjelaskan apa yang dimaksud dengan

Visual Basic.NET
b. Mahasiswa dapat memahami dan menjelaskan fungsi
perangkat lunak Visual Studio 2013.
c. Mahasiswa dapat mengenali dan menjelaskan fitur-fitur
untuk membangun Graphical User Interface
d. Mahasiswa dapat membuat tampilan GUI sederhana dengan
Visual Basic.NET

A. Teori
Microsoft Visual Basic (sering disingkat sebagai VB saja) merupakan sebuah bahasa
pemrograman yang menawarkan Integrated Development Environment (IDE) visual untuk
membuat program perangkat lunak berbasis sistem operasi Microsoft Windows dengan
menggunakan model pemrograman (COM). Visual Basic merupakan turunan bahasa pemrograman
BASIC dan menawarkan pengembangan perangkat lunak komputer berbasis grafik dengan cepat.
Dalam pemrograman untuk bisnis, Visual Basic memiliki pangsa pasar yang sangat luas. Visual Basic
merupakan bahasa yang mendukung Pemrograman berorientasi objek , namun tidak sepenuhnya,
Beberapa karakteristik obyek tidak dapat dilakukan pada Visual Basic, seperti Inheritance tidak
dapat dilakukan pada class module, Polymorphism secara terbatas bisa dilakukan dengan
mendeklarasikan class module yang memiliki Interface tertentu. Visual Basic (VB) tidak bersifat case
sensitif.
Visual Basic menjadi populer karena kemudahan desain form secara visual dan adanya
kemampuan untuk menggunakan komponen-komponen ActiveX yang dibuat oleh pihak lain.
Namun komponen ActiveX memiliki masalahnya tersendiri yang dikenal sebagai DLL hell,Pada
Visual Basic .NET, Microsoft mencoba mengatasi masalah DLL hell dengan mengubah cara
penggunaan komponen (menjadi independen terhadap registry). Pada pembahasan materi
pemrograman visul, yang di tekankan adala pembuatan program aplikasi dengan tampilan visual
yang menarik. Graphical User Interface (GUI) merupakan sarana bagi pengguna agar dapat
berinteraksi secara visual dengan program. GUI harus dibuat menarik dan mudah untuk digunakan
(user friendly). GUI dibangun dengan berbagai komponen (sering dikenal dengan kontrol atau
widget). Komponen GUI adalah sebuah obyek yang bisa berinteraksi dengan pengguna melalui
mouse atau keyboard.
B. Alat dan Bahan
BKPM
Komputer
LCD
ATK (Alat Tulis Kantor)
Perangkat lunak Visual Studio 2013

C. Pelaksanaan Praktikum
Langkah-langkah kerja sebagai berikut:
1. Jalankan program aplikasi Microsoft Visual Studio 2013 dikomputer anda.
2. Untuk membuat proyek baru, klik menu New Project yang terdapat di jendela
tampilan awal Microsoft Visual Studio 2013 atau melalui menu File New
Project

3. Selanjutnya di jendela New Project pilih Templates untuk Visual Basic dan pastikan
memilih Windows Forms Application sebagai jenis project dikarenakan kita akan
membangun GUI.
4. Pastikan Anda memberi nama project dengan baik dan pilih lokasi penyimpanan di storage
masing-masing dengan benar, agar mudah untuk di gunakan atau diperbaiki dikemudian
hari. Kemudian klik OK.
5. Jika tahap 1-4 Anda lakukan dengan benar, maka akan muncul jendela kerja seperti
dibawah ini. Secara umum sama dengan tampilan yang Anda jumpai di VB 6. Terdapat
Form, jendela Properties, Menu Bar dan ToolBox.

6. Jika jendela ToolBox belum muncul, Anda dapat mengaktifkan dengan memilih Menu
View lalu klik Tool Box atau tekan sort Ctrl+Alt+X
D. Tugas
1. Dalam Proyek baru yang sudah anda buat sebelumnya, tambahkan satu Button atau
tombol, kemudian anda rubah propertiesnya seperti gambar berikut ini.
2. Kemudian tambahkan pesan Program Visual Basic.NET saya yang Pertama yang akan
muncul jika tombol tersebut di klik.
3. Berikan juga perintah untuk merubah warna dasar form dengan perintah Me.BackColor
= Color.
4. Simpan dan jalankan program anda.
 Praktikum ke : 2 (dua)
Judul Praktikum : Kontrol dan Penulisan Coding Program VB
Alokasi Waktu : 2 x 60 menit

Kompetensi Dasar : a. Mahasiswa dapat menjelaskan apa yang dimaksud Kontrol

b. Mahasiswa dapat memahami dan menjelaskan komponen-
komponen kotrol antara lain textbox, listbox, label dan
combo box
c. Mahasiswa dapat menggunakan komponen textbox, listbox,
label dan combo box untuk menampilkan karakter.

A. Teori tentang Kontrol

Materi sebelumnya kita telah belajar bagaimana membangun user interface di Visual Basic
2013 dengan menyesuaikan bentuk default. Dalam materi kedua ini, kita akan terus membangun
antarmuka dengan menambahkan lebih banyak kontrol ke form. Ada banyak jenis kontrol yang kita
dapat menambahkan ke form. Di antara kontrol, yang paling umum adalah tombol (sudah dibahas
di pertemuan pertama), label, kotak teks, kotak daftar, combo box, kotak gambar, kotak centang,
dan tombol radio. Sifat kontrol 'dapat diatur untuk terlihat atau tidak terlihat saat runtime. Namun,
beberapa kontrol hanya akan berjalan di latar belakang saat runtime, salah satu kontrol tersebut
adalah timer

Text Box
Texs Box adalah kontrol standar untuk menerima masukan / input dari user. Hal ini juga dapat
digunakan untuk menampilkan output. Hanya bisa menangani teks dan data numerik tetapi tidak
foto atau gambar. Namun, string dalam kotak teks dapat dikonversi ke data numerik dengan
menggunakan fungsi Val (teks).

Label
Label tidak hanya digunakan untuk memberikan petunjuk dan panduan bagi pengguna, juga
dapat digunakan untuk menampilkan output. Hal ini berbeda dari text box karena hanya bisa
menampilkan teks statis, yang berarti pengguna tidak dapat mengubah teks. Menggunakan
Label.Text sintaks, dapat menampilkan teks dan data numerik. Anda dapat mengubah teks dalam
jendela properti dan juga pada saat runtime.

ListBox
ListBox adalah untuk menyajikan daftar item dimana pengguna dapat meng-klik dan pilih item
dari daftar. Item dapat ditambahkan pada waktu desain atau runtime. Item juga dapat dihapus
pada saat desain atau runtime. Untuk menambahkan item pada saat desain, memulai sebuah
proyek baru dan menyisipkan listbox di form. Klik kanan pada listbox untuk mengakses jendela
properti. Selanjutnya, klik pada koleksi properti Item untuk membuka String Collection Editor

Combo Box
Dalam Visual Basic 2013, fungsi dari Combo Box juga untuk menyajikan daftar item dimana
pengguna dapat meng-klik dan pilih item dari daftar. Namun, kebutuhan pengguna untuk meng-
klik pada pointer (panah kecil) di sebelah kanan Combo Box untuk melihat item yang disajikan dalam
daftar drop-down. Untuk menambahkan item ke daftar pada waktu desain, Anda juga dapat
menggunakan Editor Koleksi String. Anda juga perlu mengetikkan item di bawah properti teks untuk
menampilkan item standar pada saat runtime.

Konsep VB Code
Visual Basic 2013 adalah bahasa pemrograman event driven karena kita harus menulis kode
untuk setiap kontrol sehingga respon terhadap peristiwa-peristiwa tertentu yang dipicu secara acak
oleh pengguna. Peristiwa ini tidak terjadi dalam urutan tertentu. Peristiwa biasanya dipicu oleh
input pengguna. Namun, beberapa peristiwa tidak dipicu oleh pengguna. Contoh load, click, double
click, drag and drop, menekan tombol. Setiap bentuk dan setiap kontrol yang Anda tempatkan pada
form memiliki seperangkat kegiatan yang saling terkait. Untuk mulai menulis kode di VB 2013, klik
pada setiap bagian/komponen (misal tombol) untuk masuk ke jendela kode. Prosedur event
digunakan untuk memuat kode program Form1 dan dimulai dengan Private Sub dan diakhiri
dengan End Sub.
Catatan : Di atas struktur Private Sub ada kata kunci Public Class Form1. Ini adalah konsep
berorientasi objek bahasa pemrograman. Ketika kita memulai aplikasi windows di Visual Basic
2013, kita akan melihat bentuk default dengan nama Form1 muncul di IDE, sebenarnya Kelas Form1
yang mewarisi dari System.Windows.Forms.Form kelas Form. Sebuah kelas memiliki event yang
merupakan instan dari kelas atau objek.

B. Alat dan Bahan

BKPM
Komputer
LCD
ATK (Alat Tulis Kantor)
Perangkat lunak Visual Studio 2013

C. Pelaksanaan Praktikum
Langkah-langkah kerja sebagai berikut:
1. Penggunaan Text Box dan Label
Praktikum pertama menggunakan Text Box dan Label. Tambahkan dua text box, tiga
label dan satu tombol. Dua Text Box akan digunakan untuk menerima masukan dari
pengguna. Ketika tombol di klik akan tampil hasil penjumlahan dari dua bilangan yang
dimasukan, hasil di tampilkan di Label ke tiga.
2. Buat Project baru dengan nama Praktikum 2
3. Buatlah tampilan seperti berikut, edit nama dan properties yang lain pada setiap
komponen (text box atau label) agar mudah diakses selama pemrograman.

4. Tambahkan kode program berikut dalam fungsi Button.Click

5. Jika sudah, simpan dan jalankan program. Seharusnya akan menghasilkan GUI
seperti berikut:

6. Penggunaan Combo Box dan List Box

Praktikum yang kedua ini kita belajar menambah dan menghapus item dari combo
box dan list box.
7. Anda bisa membuat project baru atau dapat anda tambahakan dalam form
sebelumnya. Susunlah komponen Combo Box, List Box, dan dua tombol sebagai
berikut. Yang perlu diperhatikan, biasakan merubah properties terutama nama
komponen seperti cbo_makanan untuk ComboBox dan masukan Daftar
Makanan pada properties Text.

8. Tambahkan item-item karakter dalam Combo box dengan method Add(), misalkan daftar
nama makanan dengan perintah seperti contoh berikut ini. Diharapkan nama-nama
makanan tersebut muncul di dalam Combo Box sejak form di load pertama kali.
9. Klik pada wilayah Form1, kemudian di dalam fungsi Form_Load tambahkan kode program
berikut ini.
10. Sehingga akan muncul tampilan seperti berikut.

11. Selanjutnya menambahkan item karakter kedalam ListBox. Ada dua cara yang pertama
menggunakan method Add() sama seperti pada Combo Box
ListBox1.Items.Add(Es Jeruk)

Atau dengan cara Klik kanan pada komponen listBox yang Anda miliki, sehingga muncul
pop-up menu, lalu pilih Edit Items dan akan tampil jendela String Collection Editor.
Anda dapat menambahkan items dengan mengetik didalam jendela tersebut, lalu klik OK

Simpan dan jalankan program, maka hasilnya seperti gambar dibawah ini
D. Tugas
1. Tambahkan masing-masing tombol pengurangan , pembagian, dan perkalian dan
fungsikan sesuai logika matematika.
2. Tambahkan item yang dipilih pada Combo Box kedalam list Box, dengan menekan tombol
Add Item. Tambahkan program berikut