Pertemuan 3

Membuat Windows Form

Objektif :

1. Mahasiswa Dapat Memahami Windows Form

2. Mahasiswa Dapat Memahami Multiple Document Interface
3. Mahasiswa Dapat Memahami Form Event
4. Mahasiswa Dapat Memahami Dialog Box

Page 31
PENGENALAN GRAPHIC PENGGUNA INTERFACE PADA VB.NET

Pada bahasa pemrograman VB.NET terdapat lembar kerja yang menyediakan untuk
merancang aplikasi berbentuk GUI. GUI adalah singkatan dari Graphical Pengguna
Interface, digunakan untuk membuat tampilan di layar komputer yang berbentuk grafis.
GUI berbeda dengan teknologi komputer di masa lalu, pada saat ini GUI di
implementasikan dengan bentuk yang baik dan mempermudah pengguna dalam melakukan
pekerjaannya. Keunggulan teknologi GUI adalah pengguna dapat menjalankan perintah
dalam instruksi yang sudah disederhanakan dengan menekan mouse maupun keyboard.

VB.NET menyediakan sebuah lembar kerja yang disebut dengan Windows Form.
Windows Form merupakan platForm yang disediakan oleh .NET Framework untuk
pengembangan program aplikasi yang berbasis Form pada Windows. Framework .NET
menyediakan berbagai class yang berorientasi objek. Windows Form dapat digunakan pada
aplikasi client server maupun multi – pengguna yang dapat meberikan solusi dalam proses
pengolahan data terdistribusi maupun lokal.

• Lembar Kerja Windows Form

Ketika pertama kali dijalankan, Visual Studio akan menampilkan sebuah lembar kerja.
Dalam lembar kerja ini kita dapat memulai pekerjaan dengan menggunakan Windows Form
(Gambar 3.1).

Gambar 3.1 Lembar Kerja Visual Studio

Page 32
Untuk membuat aplikasi Windows Form Visual Basic.NET baru, pergunakan menu File -
>New ->Project, setelah itu kita akan dihadapkan pada sebuah jendela (Gambar 3.2).

Gambar 3.2 New Project Visual Basic

Pada jendela ini, kita dapat menemukan berbagai macam template yang telah terinstall.
Untuk membuat aplikasi Windows baru menggunakan Visual Basic, pada panel bagian kiri
pilih menu Visual Basic -> Windows setelah itu pada panel kanan pilih Windows Form
Application seperti gambar di atas.

Lengkapi keterangan yang dibutuhkan seperti Name sebagai nama project yang akan kita
buat, Location untuk tempat direktori penyimpanan, dan Solution Name. Setelah selesai
pilih OK maka kita akan memulai dengan lembar kerja yang baru.

Page 33
 Gambar 3.3 Form, Properties dan Solution Explorer

Gambar diatas adalah lembar kerja yang disebut dengan Form Designer. Dengan Form
Designer kita dapat memanipulasi tampilan yang sesuai dengan aplikasi yang akan kita
rancang.

1. Solution Explorer adalah jendela untuk menampilkan project-project beserta seluruh

file pendukung project yang terlibat dalam proses pembuatan program apliasi tersebut.
2. Form adalah tempat untuk merancang tampilan program aplikasi yang sedang dibuat.
digunakan sebagai tempat untuk menampilkan control yang akan dipakai. Control
tersedia pada jendela Toolbox.
3. Properties adalah jendela untuk melihat dan mengubah nilai dari sebuah objek yang
dipilih.

• Mengenal Properties Form

Berikut ini adalah tabel yang berisi nilai-nilai properties yang tersedia untuk Form.
Properties yang digunakan untuk pengaturan Form baik untuk tampilan maupun fungsi-
fungsi yang akan dilakukan pada saat eksekusi program :

Page 34
 Properties Deskripsi

AcceptButton Memberikan aksi secara otomatis diaktifkan pada saat eksekusi

program.

CancelButton Memberikan aksi secara otomatis ketika menekan tombol Esc.

AutoScale Properties ini memiliki nilai Boolean True atau False untuk
menyesuaikan apakah ingin otomatis melakukan perubahan atau
tidak.

AutoScroll Properties ini memiliki nilai Boolean True atau False yang
digunakan untuk pengaturan auto scroll.

AutoScrollMinSize Properties ini digunakan untuk menentukan ukuran minimum pada

Form, sebelum scroll bar terpasang.

AutoScrollPosition Properties untuk mengatur jumlah piksel dimana terdapat dua scroll
bar yang memindahkan dari lokasi awal Form

BackColor Mengatur warna latar belakang Form

BorderStyle Mengatur penampilan gaya dari Border Form, terdapat beberapa

macam bentuk sepeti None, Sizable, Fixed3D, FixedDialog,
FixedSingle, FixedToolWindow, dan SizableToolWindows.

ControlBox Nilai awal dari properties ini adalah True. Dapat dirubah menjadi
False untuk menyembunyikan icon dan menon-aktifkan Control
Menu.

Enabled Nilai awal dari properties ini adalah True yang artinya dapat
menerima bentuk respon events baik dari mouse dan keyboard. Jika
False tidak dapat menerima bentuk events.

Font Mengatur jenis font pada Form.

HelpButton Menentukan apakah tombol bantuan harus ditampilkan atau tidak.

Height Menentukan tinggi dari Form.

Icon Menentukan gambar icon yang akan ditampilkan dalam Form.

Dengan gambar dengan ekstensi .ico.

Page 35
MinimizeBox Nilai awal dari properties ini adalah True. Dapat dirubah menjadi
False untuk menyembunyikan Button Minimize

MaximizeBox Nilai awal dari properties ini adalah True. Dapat dirubah menjadi
False untuk menyembunyikan Button Maximize

MinimumSize Secara spesifikasi menentukan tinggi Form yang akan di minimize

MaximizeSize Secara spesifikasi menentukan tinggi Form yang akan di maximize

Name Menentukan Nama dari Form.

StartPosition Mengatur posisi Form pada layar ketika di eksekusi. Terdapat

beberapa posisi yang disediakan yaitu CenterParent, CenterScreen,
Manual, WindowsDefaultBounds, dan WindowsDefaultLocation.

Text Untuk menentukan title bar pada Form

Top,Left Menentukan titik koordinat kiri-atas pada layar.

TopMost Nilai awal dari properties ini adalah False. Memungkinkan untuk
menetapkan apakah bentuk Form akan tetap diatas atau tidak.

Width Menentukan lebar dari Form.

• Mengenal Method Form

Berikut ini adalah table yang menjelaskan beberapa bentuk Method yang dimiliki oleh
Form :

Nama Method Deskripsi

Activate() Mengaktifkan Form dan memberikan fokus terhadap Form

tersebut.

ActivateMdiChild() Mengakttifkan anak Form dari MDI Form

AddOwnedForm() Menambahkan kepemilikan Form

BringToFront() Membawa kendali untuk z-order

CenterToParent() Menentukan pusat posisi terhadap induk Form

Page 36
CenterToScreen() Mengatur pusat Form pada layar

Close() Menutup Form

Containts() Mengambil nilai yang menunjukkan apakah Form yang

ditentukan adalah anak dari Form tersebut..

Focus() Mengatur fokus masukan untuk Form

Hide() Menyembunyikan Form

Refresh() Memaksa Form untuk melakukan permintaan kembali pada aksi

terbaru.

Scale(SizeF) Mengatur skala dari Form

ScaleControl() Mengatur lokasi,ukuran,padding dan margin Form

ScaleCore() Melakukan pembentukan skala terhadap Form

Select() Mengaktifkan Form

SendToBack() Mengirim Form ke belakang z-order

SetAutoScrollMargin() Mengatur ukuran besar auto-scroll margin

SetDesktopBounds() Mengatur lokasi Form terhadap koordinat desktop

SetDesktopLocation() Posisi tampilan jendela dengan nilai yang ditentukan

Show() Menampilkan Form kepada pengguna

ShowDialog() Menampilkan Form dalam bentuk dialog box

• Form Events
Berikut ini adalah table yang menampilkan events (aksi) yang dapat diberikan kepada Form
:
Event Deskripsi

Activated Terjadi saat diaktifkan dalam bentuk kode oleh Pengguna

Click Terjadi saat melakukan aksi click pada Form

Page 37
Closed Terjadi sebelum melakukan aksi tutup pada Form

Closing Terjadi saat menutup Form

DoubleClick Terjadi saat melakukan 2x klik pada Form

DragDrop Terjadi saat operasi drag-and-drop komplit

Enter Terjadi saat Form di enter

GetFocus Terjadi saat Form menerima fokus

HelpButtonClicked Terjadi saat tombol Help di klik

KeyDown Terjadi saat tombol ditekan sementara Form telah fokus

KeyPress Terjadi saat tombol ditekan sementara Form telah fokus

KeyUp Terjadi saat tombol dilepaskan sementara Form telah fokus

Load Terjadi saat Form akan ditampilkan untuk pertama kalinya.

LostFocus Terjadi ketika Form kehilangan fokus

MouseDown Terjadi ketika pointer mouse diatas Form dan tombol mouse ditekan.

MouseEnter Terjadi ketika pointer mouse memasuki Form

MouseHover Terjadi ketika pointer mouse terletak pada Form

MouseLeave Terjadi ketika pointer mouse meninggalkan Form

MouseMove Terjadi ketika pointer mouse digerakkan diatas Form

MouseUp Terjadi ketika pointer mouse berada diatas Form dan tombol mouse
dilepaskan

MouseWheel Terjadi ketika roda mouse berada pada Form yang fokus

Move Terjadi ketika Form bergerak

Resize Terjadi ketika Form berubah ukuran

Scroll Terjadi ketika pengguna atau kode program memiliki sebuah Scroll

Page 38
Shown Terjadi setiap kali Form ditampilkan

VisibleChanged Terjadi ketika terdapat perubahan nilai pada properties

• Menjalankan Aplikasi pada Windows Form

Untuk menampilkan Form sebagai bentuk aplikasi klik Debug->Start Debugging maka
Form akan muncul di layar komputer.

Gambar 3.5 Running Windows Form1

Untuk menambah project Windows Form baru pada project yang sama, klik kanan nama
solution dan pilih menu Pilih Nama File -> Add ->Windows Form. Jika sudah selesai,
maka pada lembar Solution Project akan bertambah Form baru yaitu Form2.vb.

Untuk menjalankan Form2.vb klik kanan pada MyProject -> Open -> pilih Menu Startup
Form. Lalu pilih Form2.vb lihat pada Gambar 3.6.

Page 39
 Gambar 3.6 Menu pada MyProject

Hasil Debug program yang menampilkan Form2 pada Gambar 3.7 :

Gambar 3.7 Running Windows Form2

MENAMBAHKAN KODE PROGRAM VB

Sebuah Form dapat ditambahkan Kode program. Kode program digunakan untuk
membuat fungsi dalam sebuah objek agar dapat berjalan sesuai dengan yang dibutuhkan.
Selain kode program terdapat juga Event. Event adalah aksi pada sebuah komponen yang
akan di jalankan.

Page 40
 Terdapat banyak Event pada bahasa pemrograman VB, antara lain adalah Event Click,
Double Click, Mouse Click dan lain sebagainya. Untuk menambahkan sebuah event, kita
perlu masuk ke dalam lembar kerja Source Code VB. Untuk masuk ke dalam lembar kerja
adalah klik kanan pada Form lalu pilih View Code. Pada lembar kerja ini (Gambar 3.8) kita
dapat menambahkan kode program di dalam sebuah event.

Gambar 3.8 Lembar Kerja Kode program

MEMANIPULASI FORM VB MELALUI KODE PROGRAM

Form dapat di manipulasi sesuai dengan kebutuhan penggunanya. Form yang tampil
pada awal pembuatan adalah default. Untuk memanipulasinya, dapat menggunakan
Properties maupun dengan cara menuliskan source code.

Aksi pada manipulasi Form diantara lain adalah untuk memberikan judul Form,
merubah latar belakang warna dari Form, mengatur keberadaan button maximize dan
minimize, mengatur ukuran Form, dan mengatur lokasi Form di layar.

VB memiliki aturan bahwa kita tidak diperkenankan menuliskan nama Form dalam
salah satu Kode program yang ada di dalam Form tersebut. Sebagai gantinya adalah dengan
menggunakan pernyataan Me. Pernyataan Me selalu mengembalikan nama Form yang
sedang digunakan. Untuk memberikan event pada Form, lihat panel Properties, klik gambar
petir (Event) lalu pilih Load dan klik. Lihat Gambar 3.9.

Page 41
 Gambar 3.9 Event pada Form

Berikut adalah Kode program yang ditulis pada event Load untuk memanipulasi tampilan
Form.

Public Class Form1

Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)
Handles MyBase.Load
Me.Text = "Belajar Form VB.NET"
Me.MinimizeBox = False
Me.MaximizeBox = False
Me.Width = 500
Me.Height = 500
Me.StartPosition = FormtartPosition.CenterScreen
Me.BackColor = Color.Chocolate
End Sub
End Class

Gambar 3.10 Running Form Setelah di Manipulasi

Page 42
MEMBUAT KONTROL VB DALAM FORM MELALUI KODE PROGRAM

Sebelum mengenal kontrol VB dengan menggunakan ToolBox, berikut ini adalah cara
untuk menambahkan kontrol dengan menggunakan Kode program secara manual.

Private Sub Form2_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles

MyBase.Load
Me.Text = "Membuat Kontrol VB Menggunakan Kode program"
Me.Width = 500
Me.Height = 300

Dim Label1 As New System.Windows.Form.Label

Label1.Location = New Point(20, 20)
Label1.Width = 500
Label1.Text = "Contoh Label Kontrol dengan Kode program"
Me.Controls.Add(Label1)

Dim TextBox1 As New System.Windows.Form.TextBox

TextBox1.Location = New Point(20, 50)
Me.Controls.Add(TextBox1)
TextBox1.Width = 200
TextBox1.Enabled = False
TextBox1.Text = "Contoh TextBox Kontrol dengan Kode program"

Dim Button1 As New System.Windows.Form.Button

Button1.Location = New Point(20, 80)
Me.Controls.Add(Button1)
Button1.Width = 200
Button1.Text = "Contoh Button Kontrol dengan Kode program"

End Sub

Page 43
 Gambar 3.17 Hasil Kontrol Menggunakan Kode program

• Menu
Menu digunakan untu mempermudah pengguna dalam memakai program aplikasi. Dengan
adanya menu, maka pengguna akan dapat mudah menjalankan perintah sepesifik secara
jelas. Dalam Visual Studio.NET 2008, telah disediakan kontrol MenuStrip yang terdapat
pada Toolbox Menus & Toolbars seperti Gambar 3.11.

Gambar 3.11 Kontrol Menus & Toolbars

• MDIForm ( Multiple Document Interface )

MDIForm adalah sebuah aplikasi yang terdiri atas Form induk dan Form anak. Aplikasi
berjenis MDIForm minimal harus memiliki 2 Form. Di dalam Form induk dapat
menampilkan beberapa buah Form anak tergantung kebutuhan. Untuk membuat sebuah
MDIForm, biasanya digunakan juga bantuan dari Kontrol Menus & Toolbars yaitu
MenuStrip. MenuStrip digunakan untuk listing Form yang akan menjadi Form Anak. Pada
tulisan ini terdapat 3 Form yaitu Form1, Form2 dan Form3. Form1 sebagai MDIParent,
maka harus dirubah propertiesnya IsMDIParent = True seperti pada (Gambar 3.12).

Page 44
 Gambar 3.13 Properties isMdiContainer = True

Gambar 3.14 Form1 sebagai MDIParent

Setelah memiliki tampilan seperti ini, klik ganda tulisan Form2 yang terdapat pada Form1
dan lengkapi kode program seperti berikut :

Private Sub Form2ToolStripMenuItem_Click(ByVal sender As System.Object, ByVal e As

System.EventArgs) Handles Form2ToolStripMenuItem.Click
Form2.MdiParent = Me
Form2.Show()
End Sub

Begitu juga dengan Form3, klik ganda dan lengkapi kode program seperti berikut :

Private Sub Form3ToolStripMenuItem_Click(ByVal sender As System.Object, ByVal e As

System.EventArgs) Handles Form3ToolStripMenuItem.Click
Form3.MdiParent = Me

Page 45
 Form3.Show()
End Sub

Gambar 3.15 Hasil MDIForm

• MessageBox

MessageBox atau MsgBox digunakan untuk menampilkan informasi melalui sebuah

jendela dengan ukuran kecil. Banyak yang dapat kita lakukan melalui perintah MsgBox,
tidak hanya untuk menampilkan informasi MsgBox juga digunakan untuk menampilkan
dialog pertanyaan maupun konfirmasi.

MessageBox.Show("Hallo Selamat Datang", "Pesan", MessageBoxButtons.OK,

MessageBoxIcon.Information)

Gambar 3.16 MessageBox

Page 46