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.

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.

Menu Toolbar

Solution Explorer

Properties

Form

Toolbox

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.

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)

Object Selector

Property and value list

Property Description

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>

Contoh : nam a_user = “krisna”

11

- Untuk type data tertentu nilai_data harus diapit tanda pembatas.

Type data string dibatasi tanda petik ganda : “nilai_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 Name

New btnNew

ListView (Klik kanan pada ListView)

Name FullRow Select Gridline View Columns (add) 1. Index 0 Text 2. Index 1 Text 3. Index 2 Text 4. Index 3 Text 5. Index 4 Text 6. Index 5 Text

Lvdisplay True True Details Student ID Student Name Sex Address Phone Number 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 :