6

MODUL 2 PERANCANGAN INTERFACE

A. Tujuan Praktikum
1. Mahasiswa mampu memahami struktur dasar dan konsep pemrograman berbasis objek
pada Visual Basic
2. Mahasiswa mampu membuat interface antar muka untuk program sederhana dengan
Visual Basic.
3. Mahasiswa memahami penggunaan variabel dan konstanta dalam membuat program
aplikasi visual basic.

B. Teori Singkat
1. Mengenal Bahasa Pemrograman Basic

Bahasa pemrograman komputer terdiri atas dua bagian, yaitu bahasa pemrograman
tingkat tinggi (high level language) dan bahasa pemrograman tingkat rendah (low level language).
Penggolongan ini didasarkan pada kemudahan untuk mempelajari bahasa pemrograman
komputer tersebut dan kecepatan eksekusinya. Makin tinggi tingkat suatu bahasa pemrograman
komputer, maka bahasa pemrograman komputer tersebut akan makin mudah dipelajari. Dan
sebaliknya, makin rendah tingkat suatu bahasa pemrograman komputer, maka makin tinggi
kecepatan eksekusinya.

Bahasa pemrograman basic pada Visual Basic merupakan bahasa pemrograman yang
mudah untuk dipelajari. Visual Basic dapat digunakan untuk pemrograman sequential
programming (objek tunggal) maupun dalam bahasa pemrograman berorientasi objek (Object
Oriented Programming). Tujuan dari OOP diciptakan adalah untuk mempermudah
pengembangan program dengan cara mengikuti model yang telah ada di kehidupan sehari-hari.
Setiap permasalahan dipandang sebagai sebuah objek. Objek itu sendiri merupakan gabungan
dari beberapa objek yang lebih kecil lagi. Contoh Pesawat, Pesawat adalah sebuah objek.
Pesawat terbentuk dari beberapa objek yang lebih kecil lagi seperti mesin, roda, baling-baling,
kursi, dll. Pesawat sebagai objek yang terbentuk dari objek-objek yang lebih kecil saling
berhubungan, berinteraksi, berkomunikasi dan saling mengirim pesan kepada objek-objek yang
lainnya. Begitu juga dengan program, sebuah objek yang besar dibentuk dari beberapa objek
yang lebih kecil, objek-objek itu saling berkomunikasi, dan saling berkirim pesan kepada objek
yang lain.
 7

2. Interface Antar Muka Visual Basic

Interface antar muka Visual Basic terdiri dari menu, toolbar, project explorer, toolbox,
tempat form, dan property seperti terlihat pada gambar 1. Pembuatan aplikasi visual basic
diawali dengan membuat tampilan aplikasi form dengan komponen – komponen toolbox.

Menu
Toolbar

Toolbox
Solution Explorer

Form

Properties

Gambar 2. Interface antar muka Visual Basic 2010 Express

Form adalah objek yang dipakai untuk tempat bekerja program aplikasi. Di dalamnya tempat
diletakkan objek – objek lainnya. Di dalam form ada grid (garis titik – titik yang berguna untuk
pengaturan letak)

Menu pada dasarnya adalah sistem operasi standar di dalam sistem operasi windows, seperti
membuat form baru, membuat project baru, membuka project baru, membuka project dan
menyimpan project. Disamping itu terdapat fasilitas – fasilitas pemakaian visual basic pada menu.
(A. Basuki, 2006)

Properties adalah untuk menentukan setting suatu objek, menentukan cara kerja dari objek saat
program dijalankan missal warna, huruf dan lain – lain.
 8

Solution explorer adalah sekumpulan modul atau program aplikasi itu sendiri. Project disimpan
dalam file berekstension .VBP biasanya berisi form – form. Ada tiga icon dalam project antara lain:

- View Code : tampilkan jendela editor program

- View Object : tampilkan bentuk formulir
- Togle Folder : tampilkan folder penyimpanan file

Toolbox adalah kotak yangberisikan komponen – komponen yang biasa digunakan oleh suatu
project aktif dan tergantung pada jenis aplikasi visual basic yang digunakan. Komponen standar
dalam toolbox dapat dilihat pada gambar 3.

Gambar 3. Komponen Common Controls pada ToolBox

3. Mengatur Property

Pemrograman Visual Basic adalah suatu pemrograman visual, dimana pembuatan

program dilakukan menggunakan user-interface. Yang artinya bahwa pembuatan program
berdasarkan tampilan yang dihasilkan program, dengan kode – kode program (script) diletakkan
 9

pada masing – masing komponen. (A. Basuki, 2006) Pengaturan terhadap aplikasi form yang
dilakukan pada object property yang terletak di sebelah kanan dalam interface antar muka visual
basic.

Object Selector

Property and value list

Property Description

Gambar 4. Object Property

4. Event dengan Kode Program

Pemrograman visual bersifat event-driver, yang artinya program bekerja berdasarkan

event yang terjadi ketika suatu object diberikan aksi misalkan tombol ditekan, option dipilih,
atau setelah mengetikkan sesuatu pada text kemudian di tekan [Enter]. Untuk membuat event
ini tinggal click pada komponen dari tampilan user interface yang sudah dibuat.

5. Variabel

Data yang disimpan dalam memori komputer membutuhkan sebuah wadah yang
disebut Variabel. Nilai yang tersimpan dalam sebuah variabel dapat berubah-ubah dan setiap
variabel mempunyai tipe data tertentu. Oleh karena itu alokasi jumlah memori atau byte yang
berbeda – beda. Variabel dalam Visual Basic mempunyai beberapa macam berdasarkan nilai
yang ada di dalam variable tersebut, antara lain:

Tabel 2. Tipe Variabel

String Tipe data untuk teks (huruf, angka dan tanda baca)
 10

Currency Tipe data untuk angka mata uang

Date Tipe data untuk tanggal dan jam
Boolean Tipe data yang menampung nilai biner, TRUE atau FALSE
Byte Menampung nilai bulat kecil antara 0 – 256
Integer Menampung nilai bulat antara -32768 s/d 32768 (15 bit)
Long Menampung nilai bulat dengan bit yang panjang (31 bit)
Single Menampung nilai pecahan dari 10-38 sampai dengan 1038 pada bagian
positif, dan -10-38 sampai dengan -1038 pada bagian negative
Double Menampung nilai pecahan dari 10-108 sampai dengan 10108 pada bagian
positif, dan -10-108 sampai dengan -10108 pada bagian negatif.
String Menampung nilai non numeric atau string, misalkan menyimpan alamat
(huruf, angka dan tanda baca). Variabel ini tidak bias dioperasikan secara
aritmatika.
Variant Merupakan variable bebas, yang menampung nilai tergantung nilai apa
yang ditampung pertama kali. Variabel ini yang merupakan kelebihan dari
visual basic (bahkan bisa menjadi kekurangan untuk pemrograman yang
lebih tinggi) karena bersifat seperti bunglon.
Sumber : Basuki, A., 2006

Variabel dalam visual basic dibedakan menjadi 3 macam variable yaitu variable local,
variable global terhadap form dan variable global terhadap aplikasi (project).

1. Variabel local adalah variable yang hanya aktif dalam suatu fungsi atau subroutine di
dalam visual basic
2. Variabel global dalam form adalah variable yang aktif selama satu form berjalan, bila
pindah ke form lain maka variable ini tidak aktif
3. Variabel global dalam aplikasi adalah variable yang aktif selama aplikasi masih aktif.
Variabel ini masih aktif meskipun form yang berjalan sudah diganti.

Dalam penulisan variable dapat dilakukan dengan beberapa cara, yaitu :

- Variabel dibuat melalui penulisan deklarasi variabel di dalam kode program :
Dim <nama_variabel> As <type_data>
Contoh : Dim nama_user As String
- Sebuah variabel hanya dapat menyimpan satu nilai data sesuai dengan type datanya.
Cara mengisi nilai data ke dalam sebuah variabel :
<nama_variabel> = <nilai_data>
Conotha:m a_user=r
k“isna”
 11

- Untuk type data tertentu nilai_data harus diapit tanda pembatas.

Type data string dibatasitandapetikganda“:niai
l _data”.
Type data date dibatasi tanda pagar : #nilai_data#.
Type data lainnya tidak perlu tanda pembatas.

6. Konstanta

Variabel yang nilai datanya bersifat tetap dan tidak bisa diubah disebut KONSTANTA.
Penulisan deklarasi konstanta di dalam kode program :
Const <nama_kontanta> As <type_data> = <nilai_data>
Contoh : Const tgl_gajian As Date = #25/09/2003# (Octovhiana, 2003)

C. Petunjuk Praktikum
C.1. Variable Test

1. Tambahkan Form baru ke dalam Project. Pada Jendela Form buatlah UI seperti ini :

(Gunakan komponen CommandButton dan Label)

2. Atur object property pada UI

Object Properties Value

Form3 Text Variabel Test
StartUpPosition 2 – CenterScreen
Button1-3 Text Test 1
Test 2
Test 3
TextBox1-3 Text <kosong>

3. Pada View Code Variable Test tuliskan kode program di bawah ini :

Public Class Form1

Dim test2 As Integer

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As

System.EventArgs) Handles Button1.Click
Dim test1 As String
 12

test1 = "nusantara"
TextBox2.Text = test1
TextBox1.Text = test2
TextBox3.Text = test3
End Sub

Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As

System.EventArgs) Handles Button2.Click
test2 = 10
TextBox1.Text = test1
TextBox1.Text = test2
TextBox3.Text = test3
End Sub

Private Sub Button3_Click(ByVal sender As System.Object, ByVal e As

System.EventArgs) Handles Button3.Click
Const test3 As Single = 90.55
TextBox1.Text = test1
TextBox1.Text = test2
TextBox3.Text = test3
End Sub
End Class

Penjelasan program :
a) Variabel test2 merupakan variabel global yang dapat digunakan saat menjalankan
Form1, variabel test1 dan cons test3 merupakan variabel dan konstanta local.
b) Pada saat menjalankan program akan muncul Error List karena ada beberapa variabel
yang belum dideklarasikan (warna merah).
c) Untuk menjalankan program anda dapat menghilangkan code yang berwarna merah,
atau anda dapat mengubah variabel local menjadi variabel global.
4. Variabel test3 merupakan suatu konstanta sehingga ketika kita menambahkan :
Kode test3 = 50.22 Program visual basic akan menampilkan pesan error pada eror

list karena perubahan terhadap konstanta test3 tidak diijinkan

C.2. Perancangan Interface

1. Membuat user interface (UI) :

- Siapkan form baru
- Letakkan komponen – komponen pada toolbox seperti pada gambar 4.
 13

Gambar 5. Contoh Form1

2. Mengatur Properti
Pengaturan properti untuk desain form gambar 5 dapat dilihat pada tabel 3.
Tabel 3. Object Property Form1
Object Property Value
Form1 Text Form1
Label1 Text Student ID
Text1 Name txtStudentID
Label2 Text Student Name
Text2 Name txtStudentName
Label3 Text Sex
Text3 Name txtSex
Label4 Text Address
Text4 Name txtAddress
Label5 Text Phone Number
Text5 Name txtPhoneNumber
Label6 Text Major
Text6 Name txtMajor
Label7 Text Display all Data
Button1 Text New
Name btnNew
ListView Name Lvdisplay
(Klik kanan FullRow Select True
pada ListView) Gridline True
View Details
Columns (add)
1. Index 0 Text Student ID
2. Index 1 Text Student Name
3. Index 2 Text Sex
4. Index 3 Text Address
5. Index 4 Text Phone Number
6. Index 5 Text Major
 14

3. Menulis kode program

Untuk menuliskan program, klik pada tombol CommanButton (New) dan ketikkan program
di bawah ini :

Public Class Form1

Private Sub btnNew_Click(ByVal sender As System.Object, ByVal e As

System.EventArgs) Handles btnNew.Click
Dim StudentID As String
Dim names As String
Dim Sex As String
Dim Address As String
Dim PhoneNumber As String
Dim Major As String
StudentID = txtStudentID.Text
names = txtStudentName.Text
Sex = txtSex.Text
Address = txtAddress.Text
PhoneNumber = txtPhoneNumber.Text
Major = txtMajor.Text
lvDisplay.Items.Add(New ListViewItem(New String() {StudentID, names, Sex,
Address, PhoneNumber, Major}))
End Sub
End Class

Note : Tipe Variabel akan diberikan pada modul 2

4. Jalankan Program
Berikut adalah tampilan hasil eksekusi program :