Anda di halaman 1dari 18

MODUL VB NET 2008

TRIGUNA DHARMA
MEDAN

Oleh : Sukron Samosir

1
Tampilan awal VB NET anda mungkin akan seperti pada gambar berikut ini:

Untuk memulai project baru, dapat dilakukan dengan beberapa cara, diantaranya :
1. klik Menu-->File-->New Project
2. klik gambar atau icon "New Project" yang terdapat di sisi kanan atas, berada di bawah menu File
3. Menggunakan short key Ctrl+N
Kemudian di layar anda akan ada tampilan seperti ini:

2
Pilihlah "Windows Form Application", mari kita ganti WindowsApplication1 menjadi Latihan1 .. kemudian
tekan OK. Tidak perlu mengubah lokasi folder, lokasi default project VB NET biasanya terdapat di : My
Documents --> Visual Studio Projects.
Setelah menekan tombol OK, tampilan akan menjadi seperti ini:

3
Selanjutnya kita akan belajar mengenai Form di dalam Visual Basic NET 2008 Express

4
Pada topik sebelumnya, kita telah belajar memulai suatu project baru dalam VB NET 2008 Express. Sekarang,
akan diulas mengenai salah satu aspek yang paling menonjol dalam pemrograman dengan Visual Basic, yakni
Form.
Di dalam Visual Basic, terdapat 2 Environment:
1. Design Environment; dan
2. Debug Environment
Pada Design Environment, kita dapat melakukan banyak hal mulai dari pengaturan letak kontrol, proses koding
dan sebagainya. Sedangkan Debug Environment merupakan mode percobaan atau pengujian dari program
yang kita buat.
Untuk saat sekarang kita tidak perlu dibingungkan oleh kedua pengertian tersebut, karena lambat laun hal
tersebut akan lebih dipahami sejalan dengan perkembangan pembelajaran kita.

Kembali pada project baru kita, Latihan1. Sekarang, cobalah lakukan 3 langkah di bawah ini:
1. Pada bagian menu, klik : Debug --> Start Debugging
2. Pada bagian Toolbar, klik Icon segitiga (seperti icon utk tombol "play") dengan tulisan yang sama,
Start Debugging
3. Tekan tombol F5 pada keyboard
ketiga langkah diatas, dapat ditutup dengan mengklik icon X pada form anda.

Selamat! anda telah berhasil menjalankan sebuah program anda sendiri. Meski demikian, ada banyak hal yang
tampaknya masih kurang, bukan? Ya, sebuah program tentu saja harus memiliki manfaat, tujuan dan fungsi
program itu dibuat.
Mari kita mulai melakukan sesuatu dengan Form kita ini. Sebelumnya, pastikan anda telah berada pada Debug
Mode terlebih dahulu. Pertama, kita akan mendesain Form ini dengan beberapa kontrol sebagaimana layaknya
program-program lain yang kita kenal, contohnya seperti textbox yang biasanya digunakan untuk meng-input
teks, beberapa tombol yang dapat digunakan untuk mengeksekusi perintah, serta kontrol-kontrol lain nya.
Kontrol-kontrol tersebut terdapat di menu sebelah kiri, memanjang ke bawah (vertikal), disebut dengan istilah
Toolbox.

5
Menambahkan Control melalui Toolbox
Terdapat beberapa kategori pada Toolbox, untuk mengaksesnya anda dapat mengklik kiri tanda (+) pada
masing-masing kategori. Untuk project kita sekarang, kita membutuhkan kontrol yang terdapat pada kategori
Common Control.

Sebagaimana yang kita lihat, terdapat berbagai macam kontrol pada kategori ini. Mulai dari Button, Label,
Textbox dan sebagainya dengan masing-masing fungsi yang akan kita bahas nanti.
Textbox
Mari kita mulai dengan memasukkan Textbox pada Form Latihan1. Lakukan hal tersebut dengan cara berikut:
1. Cari dan temukan kontrol Textbox pada kategori Common Control
2. Klik atau Double Klik Icon Textbox tersebut
3. Textbox telah berada di Form Latihan1
Kita dapat mengatur ukuran dan posisi Textbox tersebut sesuai keinginan, seperti yang terlihat pada gambar di
bawah ini.

6
Ada kotak-kotak kecil di bagian pinggir kontrol Textbox yang apabila anda klik kiri dan drag (menggeser
dengan menahan tombol kiri pada mouse), ukuran textbox akan berubah. Bila pada saat kita menggeser posisi
mouse di atas atas kontrol Textbox kemudian kursor berubah menjadi seperti tanda (+) dengan anak panah,
artinya kita dapat menggeser atau memindahkan posisi Textbox tersebut ke lokasi lain pada form sesuai dengan
keinginan kita.
Sekarang tambahkan 2 Textbox lainnya ke dalam Form, lakukan dengan cara yang sama dan atur sedemikian
rupa sehingga posisi ketiga textbox akan terlihat seperti pada gambar di bawah ini.

Menambahkan Label pada Form


Setelah kita mempunyai 3 textbox pada form, sekarang kita akan tambahkan kontrol Label. Caranya sama
seperti kita memasukkan kontrol Textbox pada Form :
1. Cari dan temukan kontrol dengan nama Label pada kategori Common Control
2. Klik atau Double Klik kontrol tersebut

Tambahkan 2 buah kontrol Label lagi ke dalam Form dan atur sedemikian rupa sehingga posisi kontrol-kontrol
tersebut tampak seperti pada gambar di bawah ini.

7
Jalankan program kita dengan menekan tombol F5 pada keyboard, atau melalui menu Debug-->Start
Debugging. Untuk menghentikan Debug Mode, kita dapat mengklik tanda silang (X) pada Form dan kembali
pada Design Environment. Selain mengklik tanda Close pada Form, kita dapat juga menghentikan Debug Mode
melalui Debug Toolbar, dengan icon seperti yang terlihat pada gambar di bawah ini.

Awal yang cukup mudah untuk mulai membuat suatu program bukan? Kita telah mempelajari cara
menambahkan Control pada Form, yakni Textbox dan Label. Namun, masih banyak hal yang masih kurang
disini. Contohnya, label-label tersebut masih tertulis sebagai "Label1", "Label2" dan "Label3". Untuk
mengubahnya, kita harus memanfaatkan sifat yang dimiliki kontrol-kontrol tersebut. Dinamakan dengan istilah
Property.

8
Properties pada VB NET
Untuk melihat Property, pertama-tama kita pilih salah satu bagian dari program kita ini misalnya kita pilih Form
itu sendiri. Arahkan mouse ke salah satu area Form yang kosong, kemudian klik kiri. Form1 telah terpilih, hal
ini ditandai dengan kotak transparan yang mengelilinginya.
Untuk melihat property apa saja yang dimiliki Form1, kita dapat melihatnya pada bagian sebelah kanan jendela
Visual Basic. Akan terlihat seperti pada gambar di bawah ini.

Pada bagian paling atas, tertulis Form1 System.Windows ... merupakan nama kontrol tersebut, bila anda
memilih kontrol Textbox misalnya, maka akan tertulis Texbox1, Textbox2 dll.
Mengubah property sebuah Control Object, dapat dilakukan dengan 2 cara :
1. Melalui jendela property seperti pada gambar di atas
2. Melalui Kode, kita akan seringkali perlu melakukan hal ini nantinya
Sekarang, temukan bagian Text pada property Form1, klik pada bagian itu seperti pada gambar di atas.
Property Text merupakan bagian property yang dimiliki oleh Form1. Ubahlah tulisan Form1 di sebelah kanan
property Text menjadi Latihan 1. Kini, kita telah mengubah sesuatu pada Form1 yang dapat terlihat seperti
pada gambar di bawah ini.

9
Apakah perubahan pada Form1 terlihat? Benar, tulisan pada bagian kiri atas Form kita telah berubah sesuai
dengan yang kita tuliskan, yaitu dari Form1 menjadi Latihan 1.
Lakukan hal yang sama untuk Label1, Label2 dan Label 3. Gantilah property Text ketiga kontrol tersebut
masing-masing :
1. Label1 --> Nama Depan
2. Label2 --> Nama Belakang
3. Label3 --> No. Telepon
Jalankan program kita dengan menekan tombol F5 pada keyboard.

Property - Bagian 2
Pada bagian sebelumnya, kita telah belajar cara mengubah property "Text" pada kontrol. Pada bagian ini, akan
dibahas mengenai salah satu property lain yang dimiliki oleh kontrol, yakni property "Font".
Klik kiri Label1 (yang telah diganti menjadi "Nama Depan")

Pada jendela "Properties", scroll ke atas dan cari property "Font". Ubah setting property font menjadi :
Font : Arial -> Font Style : Bold -> Size : 10
Klik OK.
Selain itu, kita juga bisa mengubah property-property lainnya seperti pengaturan tampilan warna, latar belakang
gambar dll.

Menambahkan Kontrol ComboBox , ListBox dan Button


Kembali ke Toolbox di bagian sebelah kiri, carilah kontrol ComboBox , ListBox dan Button kemudian
masukkan kedua kontrol tersebut ke dalam Form Latihan 1. Gunakan metode yang sama untuk mengubah
beberapa nilai property nya. Tambahkan pula satu kontrol Textbox lagi ke dalam Form.
Atur posisi kontrol-kontrol tersebut sehingga tampak seperti pada gambar di bawah ini.

10
Sekarang kita memiliki sebuah Form dengan tampilan yang lebih kompleks. Tidak perlu khawatir, kita nanti
akan bermain-main dengan kontrol-kontrol ini secara perlahan. Pembahasan lebih jauh tentang implementasi
dan hal-hal yang bisa kita manfaatkan dari control object di atas akan dikemukakan pada bagian berikutnya dari
tutorial ini.

Menyimpan Project File


Sebelum melangkah lebih jauh dengan Form Latihan 1, marilah terlebih dahulu kita lakukan penyimpanan
(save) hasil pekerjaan kita saat ini. Saving hasil pekerjaan secara rutin akan sangat berguna sekali, terlebih lagi
bila kita bekerja dengan koding yang jauh lebih kompleks lagi untuk menghindari kehilangan data yang sudah
dengan susah payah kita kerjakan.
Untuk menyimpan project file, caranya sama seperti aplikasi-aplikasi lain pada umumnya. Kita bisa
melakukannya dengan beberapa cara, diantaranya :
1. Klik Menu --> File --> Save All
2. Mengklik icon Save atau Save All pada toolbar
3. Menggunakan shortcut : ctrl+S untuk Save, dan Ctrl+Shift+S untuk Save All

11
Variable - Pendahuluan
Variable (atau dalam ejaan bahasa Indonesia ditulis : variabel) merupakan tanda (identifier), simbol, atau
sesuatu yang memiliki nilai yang disimpan ke dalam memori komputer yang dapat digunakan kemudian untuk
dimanipulasi atau diterapkan pada suatu ekspresi pemrograman.
Bayangkan sebuah bank, anda memiliki beberapa nomor rekening di sebuah bank. Masing-masing rekening
diberikan kartu ATM dengan nomor kartu dan PIN yang berbeda. Suatu saat anda lupa nomor PIN 2 buah kartu
ATM yang anda miliki sedangkan anda harus mengambil sejumlah uang dari kedua rekening tabungan itu, maka
anda pergi ke bank dan meminta bantuan untuk mencairkan sejumlah uang dari 2 rekening yang berbeda. Untuk
itu, bank membutuhkan informasi kedua nomor rekening anda agar permohonan anda untuk mencairkan uang
dapat diproses. Nah, nomor rekening merupakan penanda (identifier) yang menunjukkan bahwa pemilik nomor
rekening x itu adalah anda, dan membedakan anda dengan nasabah lainnya sehingga pihak bank tidak akan
keliru dalam memproses rekening tabungan nasabahnya.

Contoh di atas merupakan gambaran pengertian nomor rekening sebagai variable pemiliknya (nasabahnya).
Begitu pula dengan penerapan variable di dalam Visual Basic, variable akan seringkali kita gunakan untuk
membantu dalam berbagai ekspresi penulisan kode (koding).

Baiklah, saya rasa cukup basa-basinya. Sekarang mari kita uji hal berikut ini:

Dim bilangan1 As Integer


Dim bilangan2 As Integer

bilangan1 = 3
bilangan2 = 5

Kode diatas merupakan salah satu contoh cara Visual Basic dalam mengekspresikan sesuatu (contoh penulisan
kode dalam Visual Basic). Akan kita bahas satu persatu konsep dan pengertian dari tulisan di atas.
 Dim
Singkatan dari "Dimension" yang merupakan salah satu Variable. Kita memberitahukan kepada VB bahwa
menyatakan sesuatu dengan Variable ini. Terdapat banyak Variable pada VB, namun untuk saat ini pastikan
untuk penulisan Variable selalu diawali dengan "Dim".
 AS Integer
Menunjukkan pada Visual Basic, bahwa variable yang akan kita gunakan adalah berupa angka (integer).
 bilangan1 dan bilangan2
ini adalah nomor rekening seperti contoh yang dikemukakan di atas
 bilangan1 = 3 dan bilangan2 = 5
Tanda (=) tidak benar-benar berarti (=) seperti dalam simbol matematika. Tanda tersebut menunjukkan pada
Visual Basic, bahwa kita menetapkan angka "3" sebagai nilai yang akan diberikan pada "bilangan1" dan
seterusnya.
Untuk lebih jelas lagi aplikasi Variable pada Visual Basic, akan kita bahas lebih mendalam pada bagian
Tutorial selanjutnya.

Variable - Bagian 2
Untuk memahami lebih jauh lagi mengenai penggunaan variable, buka kembali Latihan1 yang telah kita hias
dengan beberapa kontrol.
Double klik (klik ganda) kontrol "Button", akan memindahkan anda ke sebuah jendela baru atau disebut dengan
istilah "Coding Window"
Perhatikan gambar di bawah ini :

12
(catatan: tanda "_" pada gambar mungkin tidak terdapat di layar anda, hal tersebut dimaksudkan untuk
memotong penulisan kode yang panjang menjadi lebih pendek).
Posisikan kursor seperti pada gambar di atas, berada diantara baris "Public Sub ... " dan baris "End Sub".
Sebelumnya kita akan bahas dahulu kode yang secara otomatis dihasilkan pada saat kita memasuki jendela
koding.
Private Sub Button1_Click(ByVal sender As System.Object, _
ByVal e As
System.EventArgs) _
Handles Button1.Click
End Sub

Private menunjukkan bahwa bagian lain pada program tidak akan melihat bagian kode ini selain kontrol Button
yang kita maksudkan
Sub singkatan dari "Subroutine". Menunjukkan pada VB bahwa kode diatas harus dijalankan (dieksekusi)
Button1 nama kontrol yang kita miliki. Mungkin saja diantara kita ada yang sempat mengganti tulisan Button1
pada saat pembahasan mengenai property, namun kenapa tulisan Button1 masih tetap muncul? bukan seperti
yang kita ganti?. Property "Text" berbeda dengan property "Name" dan setiap kontrol memiliki 2 property
tersebut.
_Click ( ) bagian ini disebut dengan istilah "Event". Dengan kata lain, pada saat tombol Button1 diklik akan
terjadi event "Click" sehingga menyebabkan kode yang kita tulis dijalankan atau dieksekusi oleh program kita.
End Sub merupakan akhir dari bagian kode yang kita tulis.
Hal-hal di atas tidak perlu dihafalkan, kita cukup pahami konsepnya saja.

Menulis Kode VB NET Pertama Anda


Dengan posisi kursor mouse seperti pada gambar di atas, tuliskan kode di bawah ini:
Dim angka1 As Integer
Dim angka2 As Integer
Dim jawaban As Integer
angka1 = 5
angka2 = 3
jawaban = angka1 + angka2
MsgBox jawaban
setelah menuliskan kode di atas, di layar anda mungkin akan tampak seperti gambar ini

13
Simpan (save) hasil pekerjaan kita. Setelah itu, jalankan program dengan menekan tombol F5 pada keyboard.
Klik tombol "Button1" untuk melakukan pengujian kode yang telah kita tulis.

Tutup program kita dan kembali lagi ke Design Environment. Jika anda kesulitan untuk kembali ke jendela
koding, anda dapat mengklik salah satu tab diatas dengan tulisan "Form1.vb [Design]"

Penjelasan kode:
Pertama, dengan kata "Dim" kita memberitahukan pada VB bahwa kita akan menentukan variable. Selanjutnya,
kita menentukan nama variable kita (angka1, angka2 dan jawaban). Diikuti dengan kata "Integer", kita
memberitahukan pada VB bahwa variable yang kita buat itu adalah angka.

14
Setelah kita menentukan ke-3 variable tersebut, kita meminta VB untuk menjumlahkannya dengan perintah
"angka1+angka2". Yang terakhir, hasil dari penjumlahan itu akan ditampilkan dalam bentuk "Message Box"
(MsgBox).
Sekarang, kembali pada kode yang tadi kita tulis. Gantilah tulisan "MsgBox (jawaban)" menjadi:
Textbox4.Text = jawaban
Jalankan program dengan menekan tombol F5 pada keyboard, dan klik tombol Button1. Perhatikan
perbedaannya.

Ya benar, sekarang hasil penjumlahannya tidak ditampilkan dalam bentuk "Message Box" lagi, namun pada
TextBox yang berada di bawah tombol Button1 (TextBox4).

Property "Text" pada TextBox4.Text memiliki pengertian yang sama dengan property Text seperti yang telah
kita bahas pada bagian jendela property.
Kita semakin "dekat" dengan bahasa Visual Basic, bukan?
Lakukanlah beberapa perubahan pada kode di atas dengan melakukan latihan-latihan di bawah ini untuk
semakin meningkatkan pemahaman anda.

15
Latihan
1. Gantilah nilai variable pada "angka1" dan "angka2" sesuai keinginan anda, dan jalankan program
dengan menekan tombol F5 untuk melihat hasilnya.
2. Ubah operasi bilangan " + " menjadi pengurangan ( - ), pembagian ( / ) dan perkalian ( * ). Jalankan
program untuk menguji dan melihat hasilnya.
3. Tambahkan variable lainnya, misal: "angka3 As Integer" tentukan nilainya (misal: angka3 = 5),
masukkan ke dalam operasi penambahan, pengurangan, pembagian dan perkalian seperti kedua
variable sebelumnya. Uji dan jalankan program.
4. Simbol Matematika dalam VB NET
5. Berikut ini adalah tabel simbol matematika dasar dan operator kondisional yang dapat digunakan dalam
VB NET :
+ penjumlahan
- pengurangan
* perkalian
/ pembagian
= sama dengan
> lebih besar dari
< lebih kecil dari
>= lebih besar dari atau sama dengan
<= lebih kecil dari atau sama dengan
And dan
Or atau
<> tidak sama dengan

Contoh penggunaan
Contoh 1 :
Dim bilangan1 As Integer
Dim bilangan2 As Integer
Dim bilangan3 As Integer
Dim jawaban1 As Integer
Dim jawaban2 As Integer
Dim hasilAkhir As Integer

bilangan1 = 24
bilangan2 = 9
bilangan3 = 6

jawaban1 = (bilangan1 + bilangan2) - (bilangan3 + bilangan2)


jawaban2 = (bilangan1 * bilangan3) / (bilangan2 - bilangan3)
jawabanAkhir = jawaban1 + jawaban2
MsgBox (jawabanAkhir)

Contoh 2 :
Dim bilangan1 As Integer
Dim bilangan2 As Integer

bilangan1 = 12
bilangan2 = 9

IF bilangan1 > bilangan2 Then 'jika bilangan1 lebih besar dari bilangan2
MsgBox ("betul") 'tampilkan betul pada Message Box
Else 'jika tidak
MsgBox ("salah") 'tampilkan salah pada Message Box
End IF

16
Konversi Suhu

17
18