MODUL 2 PERANCANGAN INTERFACE

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 seharihari. 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, balingbaling, kursi, dll. Pesawat sebagai objek yang terbentuk dari objekobjek yang lebih kecil saling berhubungan, berinteraksi, berkomunikasi dan saling mengirim pesan kepada objekobjek yang lainnya. Begitu juga dengan program, sebuah objek yang besar dibentuk dari beberapa objek yang lebih kecil, objekobjek 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 userinterface. 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 eventdriver, 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 berubahubah 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 Boolean Tipe data untuk tanggal dan jam Tipe data yang menampung nilai biner, TRUE atau FALSE Byte Menampung nilai bulat kecil antara 0 256 Integer Long Menampung nilai bulat antara 32768 s/d 32768 (15 bit) Menampung nilai bulat dengan bit yang panjang (31 bit) Single Menampung nilai pecahan dari 10 38 sampai dengan 10 38 pada bagian Double String Variant positif, dan 10 38 sampai dengan 10 38 pada bagian negative Menampung nilai pecahan dari 10 108 sampai dengan 10 108 pada bagian positif, dan 10 108 sampai dengan 10 108 pada bagian negatif. Menampung nilai non numeric atau string, misalkan menyimpan alamat (huruf, angka dan tanda baca). Variabel ini tidak bias dioperasikan secara aritmatika. Sumber : Basuki, A., 2006 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. 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 nama_user= : krisna

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 Form3 Button13 Properties StartUpPosition Box13 Value Variabel Test 2 CenterScreen Test 1 Test 2 Test 3 <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" Box2. = test1 Box1. = test2 Box3. = test3 End Sub Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click test2 = 10 Box1. = test1 Box1. = test2 Box3. = 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 Box1. = test1 Box1. = test2 Box3. = 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 1 Label2 2 Label3 3 Label4 4 Label5 5 Label6 6 Label7 Button1 ListView (Klik kanan pada ListView) Property FullRow Select Gridline View Columns (add) 1. Index 0 2. Index 1 3. Index 2 4. Index 3 5. Index 4 6. Index 5 Value Form1 Student ID txtstudentid Student txtstudent Sex txtsex Address txtaddress Phone Number txtphonenumber Major txtmajor Display all Data New btnnew Lvdisplay True True Details Student ID Student 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. names = txtstudent. Sex = txtsex. Address = txtaddress. PhoneNumber = txtphonenumber. Major = txtmajor. 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 :