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
As 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 : = 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 As = 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 Form3 Button1-3
Properties Text StartUpPosition Text
TextBox1-3 Text
Value Variabel Test 2 – CenterScreen Test 1 Test 2 Test 3
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 Form1 Label1 Text1 Label2 Text2 Label3 Text3 Label4 Text4 Label5 Text5 Label6 Text6 Label7 Button1 ListView (Klik kanan pada ListView)
Property Text Text Name Text Name Text Name Text Name Text Name Text Name Text Text Name 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
Value Form1 Student ID txtStudentID Student Name txtStudentName Sex txtSex Address txtAddress Phone Number txtPhoneNumber Major txtMajor Display all Data New btnNew 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 :
