1

MODUL VB NET 2008

TRIGUNA DHARMA MEDAN

Oleh : Sukron Samosir

2

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:

3

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:

4

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

5

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.

6

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.

7

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.

8

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.

9

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.

10

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.

11

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

12

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 :

13

(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

14

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.

15

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.

16

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

17

Konversi Suhu

18