Pemrograman Visual Objek Kontrol dan For

STMIK Royal Kisaran

Pertemuan 2 - Pemrograman Visual

Objek / Kontrol dan Form
Abdul Karim Syahputra, M.Kom

A. Pengenalan Objek / Kontrol pada Visual Studio 2010
Objek / Kontrol merupakan suatu tampilan berbasis grafis yang ditempatkan ke form untuk
membuat interaksi dengan pemakai. Keberadaan kontrol di dalam form berubah menjadi objek yaitu
elemen perantara pemakai yang dapat diprogram untuk kebutuhan tertentu.
Toolbox merupakan tempat penyediaan kontrol-kontrol program yang digunakan untuk
mendesain aplikasi Windows Form.
Berikut ini adalah kategori dari Objek / Kontrol yang ada pada Visual Studio 2010:
1. Common Control, Berisi kontrol-kontrol untuk mendesain form berbasis windows.

Gambar 1. Tampilan Menu Objek Commond Control
Modul Pemrograman Visual – Pertemuan 2 | Abdul Karim Syahputra, M.Kom

1

STMIK Royal Kisaran

2. Container, Digunakan untuk kontrol-kontrol lain pada form.

Gambar 2. Tampilan Menu Objek Container

3. Menu & Toolbars, Digunakan untuk mendesain menu utama dan submenu serta menu toolbar
dan statusbar.

Gambar 3. Tampilan Menu Objek Menu & Toolbar

4. Data, Berisi kontrol-kontrol untuk pemrograman database, baik untuk koneksi maupun
menampilkan data

Gambar 4. Tampilan Menu Objek Data

5. Component, Berisi kontrol-kontrol pendukung pemrograman pada form window.

Modul Pemrograman Visual – Pertemuan 2 | Abdul Karim Syahputra, M.Kom

2

STMIK Royal Kisaran

Gambar 5. Tampilan Menu Objek Components

6. Printing, Berisi kontrol-kontrol untuk mencetak data, baik ke printer maupun ke layar.

Gambar 6. Tampilan Menu Objek Printing

7. Dialog, Berisi kontrol-kontrol untuk menampilkan berbagai macam kotak dialog.

Gambar 7. Tampilan Menu Objek Dialog

Modul Pemrograman Visual – Pertemuan 2 | Abdul Karim Syahputra, M.Kom

3

STMIK Royal Kisaran

B. Pengenalan Form
Form merupakan media interaksi antara pengguna dengan aplikasi yang anda buat. Form
terbagi ata dua kategori yaitu:
1. Form Dinamis
Yaitu form yang bisa dimanipulasi atau diubah bentuk serta disisipi objek kontrol yang
berisi perintah-perintah yang diperlukan oleh aplikasi yang akan anda buat.

Gambar 8. Tampilan Form

Form d iatas merupakan salah satu bentuk dari Windows Form yang digunakan untuk
menempatkan objek lain di atasnya dan ini masih bisa dimanipulasi bentuk dan objek
tampilannya.

2. Form Statis
Yaitu form yang tidak dapat dimanipulasi atau diubah bentuk serta disisipi objek kontrol,
form ini hanya dapat dipanggil dari perintah kode. Contohnya : Message Box

Gambar 9. Tampilan Message Box
Modul Pemrograman Visual – Pertemuan 2 | Abdul Karim Syahputra, M.Kom

4

STMIK Royal Kisaran

C. Properties Objek dan Form
Properties merupakan informasi mengenai kontrol (obyek) yang dibuat, dan bertugas
menyiapkan segala bentuk dan kontrol yang diperlukan dalam perancangan user interface maupun
pemrograman.
Properties pada setiap objek berbeda-beda, itu karena setiap objek memiliki fungsi yang
berbeda-beda pula.
Lain halnya dengan Form, dan berikut ini adalah properties pada Form:
1) BackColor, Menentukan warna latar belakang (background) dari suatu kontrol (obyek).
2) BackgroundImage, Menentukan gambar untuk latar belakang suatu kontrol (obyek)
3) Opacity, Menentukan seberapa besar transparansi form saat program dieksekusi. Properti ini
hanya ada pada kontrol form.
4) Size, Menentukan ukuran dari kontrol, yang terdiri dari lebar kontrol (Width) dan tinggi
kontrol (Height)
5) StartPosition, Menentukan posisi form saat form tersebut di eksekusi. Pilihan yang disediakan
yaitu Manual, CenterScreen, WindowsDefaultLocation, WindowsDefaultBounds, dan
CenterParent.

6) TransparancyKey, Menerima atau menentukan warna yang menunjukkan bidang-bidang
transparan.
7) WindowState, Menentukan ukuran form saat form tersebut di eksekusi dengan pilihan
Manual, Minimized, dan Maximized.

String Collection Editor
Pada beberapa properties terdapat String Collection Editor yang dapat dilihat melalui
to bol titik seba yak tiga titik … pada properties

Gambar 10. Tampilan String Collection Editor pada Menu Properties
Modul Pemrograman Visual – Pertemuan 2 | Abdul Karim Syahputra, M.Kom

5

STMIK Royal Kisaran

D. Desain Form
Desain form dilakukan untuk merancang atau menyusun layout sebuah aplikasi sebelum
dilakukan pemberian coding. Hal ini bertujuan agar mempermudah dalam menghasilkan aplikasi yang
diinginkan.

Secara umum langkah pembuatan sebuah program pada Visual Basic .Net 2010 adalah:

Langkah 1:
Merancang model atau bentuk yang akan ditampilkan pada sebuah form.

Langkah 2:
Mengatur properties yang diperlukan pada objek (komponen) yang digunakan.

Langkah 3:
Mengisi kode programnya (coding) melalui event dan method.

Langkah 4:
Menjalankan (Running) atau mengksekusi untuk melihat hasilnya.
Gambar 11. Langkah Pembuatan Program pada Visual Basic .Net 2010

Rancanglah Form seperti di bawah ini:

Gambar 12. Tampilan Desain Form

Modul Pemrograman Visual – Pertemuan 2 | Abdul Karim Syahputra, M.Kom

6

STMIK Royal Kisaran

Lalu aturlah propertiesnya, sebagai berikut:
No

Objek

Properti

1

File Form3

File Name
Caranya:
Klik Form3 yang terdapat pada Solution
Explorer, bukan pada Lembar Keja.

2

Label1

 Name :

Nilai Properti
LatihanPertama.vb

lbl_nim

NB:
Name, ini diperlukan untuk
pengodingan, dan tidak diperbolehkan
menggunakan spasi dalam pemberian
namanya.

3

4

Label2
Label3
Label4
Label5
TextBox1
TextBox2
TextBox3
TextBox4

TextBox5
Button1
Button2
Button3

Name
Name
Name
Name

Name
Name
Name
 Name
 Multiline
 ScrollBars
Name
 Name
 Text
 Name
 Text
 Name
 Text

lbl_nama
lbl_jeniskelamin
lbl_alamat
lbl_kota
txt_nim
txt_nama

txt_jeniskelamin
txt_alamat
True
Vertical
txt_kota
btn_list
List
btn_clear
Clear
btn_exit
Exit

Modul Pemrograman Visual – Pertemuan 2 | Abdul Karim Syahputra, M.Kom

7

STMIK Royal Kisaran

E. Latihan
1. Aplikasi Login (Latihan-2)
Buatlah Projek Visual Basic .Net 2010 yang baru pada Visual Studio 2010 dengan nama
Latihan-2 Aplikasi Login . Lalu desai For 1 ya seperti ga bar 13.

Gambar 13. Tampilan Menu Login

Adapun rincian properties masing-masing objek pada Form Login tersebut adalah sebagai
berikut:
No
1

Objek
Form1

Properti
Name
Text
BackgroundImage
Caranya:
 Klik ta da … ,
 Kemudian pilih Import,
 Cari Gambar
 Klik OK

StartPosition
Icon

Nilai Properti
Login.vb
.:: LOGIN ::.
Ambil Gambar (BackGround) di
Folder Bahan Ajar pada Komputer
Anda Masing-masing.

CenterScreen
Ambil Gambar (BackGround) di
Folder Bahan Ajar pada Komputer
Anda Masing-masing.

Modul Pemrograman Visual – Pertemuan 2 | Abdul Karim Syahputra, M.Kom

8

STMIK Royal Kisaran

2
3

TextBox1
ComboBox1

Caranya:
 Klik ta da … ,
 Kemudian pilih Import,
 Cari Gambar (ekstensi
.ico)
 Klik OK
Name
Name
Text
Items

txt_username
cmb_level
--- Pilih ---Tambahkan dua Item, yaitu:
Administrator, dan User.

Caranya:
 Klik ta da … ,
 Ketikkan Itemnya
 Klik OK

4
5
6
7
8

9

TextBox2
Label1
Label2
Label3
Button1

Button2

Name
Text
Text
Text
Name
Text
Image
Caranya:
 Klik ta da … ,
 Kemudian pilih Import,
 Cari Gambar
 Klik OK
ImageAlign

txt_password
Username
Level
Password
btn_login
Login

Name
Text
Image
Caranya:
 Klik ta da … ,
 Kemudian pilih Import,
 Cari Gambar
 Klik OK
ImageAlign

btn_cancel
Cancel

Ambil Gambar di Folder Bahan Ajar
pada Komputer Anda Masing-masing
dan sesuaikan dengan Desain di atas

MiddleLeft

Ambil Gambar di Folder Bahan Ajar
pada Komputer Anda Masing-masing
dan sesuaikan dengan Desain di atas

MiddleLeft

Modul Pemrograman Visual – Pertemuan 2 | Abdul Karim Syahputra, M.Kom

9

STMIK Royal Kisaran

10

Button3

Name
Text
Image
Caranya:
 Klik ta da … ,
 Kemudian pilih Import,
 Cari Gambar
 Klik OK
ImageAlign

btn_exit
Exit
Ambil Gambar di Folder Bahan Ajar
pada Komputer Anda Masing-masing
dan sesuaikan dengan Desain di atas

MiddleLeft

2. Aplikasi Jam (Latihan-3)

Gambar 14. Tampilan Aplikasi Fungsi Jam

Gambar 15. Tampilan Aplikasi Fungsi Tanggal

Modul Pemrograman Visual – Pertemuan 2 | Abdul Karim Syahputra, M.Kom

10

STMIK Royal Kisaran

3. Aplikasi Data Mahasiswa (Latihan-4)

Gambar 16. Tampilan Aplikasi Data Mahasiwa

4. Aplikasi Menu Utama (Latihan-5)

Gambar 17. Tampilan Aplikasi Menu Utama

Modul Pemrograman Visual – Pertemuan 2 | Abdul Karim Syahputra, M.Kom

11