STMIK Royal Kisaran

Pemrograman Visual
“Pengantar Pemrograman
Visual dan Pengenalan Visual
Studio 2010”
Muhammad Ikhwan Mardin, S.Kom.,M.Kom

A. Pengantar Pemrograman Visual

Pemrograman Visual adalah metode pembuatan program yang perancangan antarmukanya

dilakukan secara visual dan berbasis GUI (Graphical User Interface) dan terpisah dari penulisan kode-
kode programnya. Metode pemrograman visual ini dikembangkan tahun 1991. Dengan
pemrograman visual tampilan interface dapat langsung dibuat secara click-drag-drop dan langsung
dapat dilihat tampilannya sesuai apa adanya.

Pemrograman visual memiliki alur kerja (work flow) yang agak berbeda dengan
pemrograman non visual. Berikut alur kerja pemrograman visual :
1. Merancang dan menyusun antar muka untuk pemakai (user interface design)
2. Membuat kode-kode program (coding)
3. Mengompilasi kode-kode program (compiling)
4. Menguji program hasil kompilasi (testing)

Untuk alur kerja pemrograman non visual, poin pertama tidak ada. Jadi perancangan antar
muka dilakukan pada proses coding.

Istilah-istilah umum yang digunakan pada Pemrograman Visual antara lain:

1. Form adalah elemen pembentuk window dan sebagai antar muka untuk user. Form berisi
komponen-komponen yang dirancang dan disusun sedemikian rupa agar dapat digunakan
oleh user sesuai dengan fungsinya.
2. Komponen atau kontrol adalah elemen-elemen yang yang diletakkan di dalam form dan
memiliki fungsi tertentu yang disusun untuk membentuk sebuat antar muka user.
3. Properties adalah data-data yang dimiliki oleh form atau komponen. Properti disebut juga
atribut.
4. Event adalah suatu kejadian pada form atau komponen yang muncul karena ada aktivitas
pada objek yang bersangkutan.
Modul Pemrograman Visual | Muhammad Ikhwan Mardin, S.Kom.,M.Kom 1
 IKT BUTON RAYA

5. Event handler adalah sub-rutin yang berisi perintah-perintah khusus untuk menangani suatu
event yang muncul pada suatu form atau komponen.
6. Event driven adalah paradigma di mana pada sebuah program aplikasi yang sedang
dieksekudi, suatu proses akan dijalankan jika terjadi suatu event pada suatu objek (form atau
komponen). Selain itu, program yang sedang dieksekusi tersebut tidak melakukan apa-apa
(idle).

Perancangan antarmuka untuk pemakai merupakan aspek penting dalam merancang dan
membangun sebuah program, baik pemrograman visual maupun non visual. Hal utama yang harus
dimiliki oleh sebuah program adalah "user friendly". Berikut ini karakteristik "user friendly" pada
sebuah program komputer:
a) Mudah digunakan, cepat dimengerti serta mudah diingat, dan tidak membingungkan.
b) Efisien, efektif, dan akurat,
c) Bebas kesalahan,
d) Fault tolerance (toleransi kesalahan),
e) Enak dan nyaman dilihat.
f) Memenuhi kebutuhan dan tujuan pemakai untuk penyelesain masalah (problem solving)

Salah satu contoh pemrograman visual adalah Visual BASIC. Microsoft Visual Basic yang
sering disingkat sebagai VB, merupakan sebuah bahasa pemrograman yang menawarkan Integrated
Development Environment (IDE) visual untuk membuat program perangkat lunak berbasis sistem
operasi Microsoft Windows dengan menggunakan model pemrograman (COM). Hal tersebut
mengizinkan pengguna untuk bisa mengembangkan aplikasi Windows dengan membuat tombol
perintah, kotak teks, jendela, toolbar dan komponen lainnya, yang selanjutnya akan di-link ke program
BASIC kecil yang melakukan tindakan tertentu. Visual Basic merupakan turunan bahasa pemrograman
BASIC dan menawarkan pengembangan perangkat lunak komputer berbasis grafik dengan cepat.
Visual BASIC merupakan even-driven, artinya program menunggu pengguna melakukan sesuatu
(“event”), seperti klik pada ikon dan kemudian program tersebut akan merespons. Contohnya,
pengguna dapat menggunakan piranti geser dan turunkan (drag-and-drop) untuk membangun dan
mengembangkan antarmuka pengguna yang dibuat secara otomatis oleh program. Karena
penggunaannya mudah, Visual BASIC memungkinkan programmer pemula untuk menciptakan
aplikasi-aplikasi berbasis windows yang menarik.

Modul Pemrograman Visual | Muhammad Ikhwan Mardin, S.Kom.,M.Kom 2

 IKT BUTON RAYA

B. Pengenalan Microsoft .NET, Visual Studio dan Visual Basic .NET

Platform .NET Framework

Microsoft .NET yang awalnya disebut Next Generation Windows Services (NGWS) adalah
suatu platform untuk membangun dan menjalankan generasi penerus aplikasi-aplikasi terdistribusi.
Microsoft .NET merupakan framework (kerangka) pengembangan yang menyediakan antarmuka
pemrograman baru untuk layanan Windows dan API (Application Programming Interface). Microsoft
.NET merupakan strategi Microsoft untuk menghubungkan sistem, informasi, dan alat (device),
sehingga orang dapat berkomunikasi serta berkolaborasi dengan lebih efektif. Teknologi .NET
terintegrasi penuh melalui produk-produk Microsoft, dan menyediakan kemampuan untuk
mengembangkan solusi dengan menggunakan Web service. Platform Microsoft .NET terdiri dari lima
komponen utama yang tersusun dalam tiga lapisan (layer). Lapisan paling bawah adalah sistem
operasi; lapisan kedua terdiri dari tiga komponen; lapisan teratas adalah Visual Studio .NET.

Visual Studio
Microsoft Visual Studio merupakan kumpulan lengkap tools pengembangan untuk
membangun aplikasi Web ASP.NET, XML Web Services, aplikasi dekstop, dan aplikasi mobile. Di dalam
Visual Studio inilah bahasa-bahasa pemrograman .NET seperti Visual Basic, Visual C++, Visual C#
(CSharp), dan Visual J# (JSharp). Semuanya menggunakan lingkungan pengembangan terintegrasi
atau IDE yang sama sehingga memungkinkan untuk saling berbagi tools dan fasilitas. Saat ini versi
Visual Studio terbaru adalah Visual Studio 2017.

Visual Basic .NET

Visual Basic .NET (VB .NET) merupakan salah satu bahasa pemrograman yang bisa digunakan
untuk membangun aplikasi-aplikasi .NET di platform Microsoft .NET. Tidak seperti generasi
sebelumnya Visual Basic versi 6.0 ke bawah yang lebih difokuskan untuk pengembangan aplikasi
desktop, Visual Basic .NET memungkinkan para pengembang membangun bermacam aplikasi, baik
desktop maupun aplikasi Web.

IDE Visual Basic

IDE (Integrated Development Environment), atau juga disebut sebagai Integrated
Design/Debugging Environment, adalah perangkat lunak komputer yang berfungsi untuk membantu
pemrogram dalam mengembangkan perangkat lunak. Singkatnya, IDE merupakan suatu lingkungan
pengembangan aplikasi yang terintegrasi; lengkap dengan beragam tools atau utilitas pendukung.

Modul Pemrograman Visual | Muhammad Ikhwan Mardin, S.Kom.,M.Kom 3

 IKT BUTON RAYA

C. Pengenalan Visual Studio 2010

1. Menjalankan Visual Studio 2010
Untuk menjalankan software Visual Studio 2010, silahkan cari pada daftar program yang
sudah diinstal pada Menu Start Windows 10 lalu All Apps pada Laptop/PC Anda. Cari pada
Folder Microsoft Visual Studio 2010 seperti pada gambar 1.

Gambar 1. Tampilan Menu Microsoft Visual Studio 2010 pada Windows 10

Atau jika ingin mencari dengan key word, maka langsung ketikkan saja “Visual Studio 2010”
ketika memilih tombol Start pada Windows 10, seperti gambar 2.

Gambar 2. Tampilan Menu Pencarian Microsoft Visual Studio 2010

Modul Pemrograman Visual | Muhammad Ikhwan Mardin, S.Kom.,M.Kom 4

 IKT BUTON RAYA

Kemudian klik atau pilih Microsoft Visual Studio 2010 untuk menjalankan aplikasi tersebut
seperti gambar 3.

Gambar 3. Tampilan Antarmuka Microsoft Visual Studio 2010

2. Membuat Project Baru Pada Visual Studio 2010

Untuk membuat sebuah project baru pada Visual Studio 2010, langkah-langkahnya adalah
sebagai berikut:
a. Klik File – New – Project, seperti pada gambar 4.

Gambar 4. Tampilan langkah membuat project baru

b. Kemudian akan muncul menu dialog seperti gambar 5.

Modul Pemrograman Visual | Muhammad Ikhwan Mardin, S.Kom.,M.Kom 5

 IKT BUTON RAYA

1 2

3
4

Gambar 5. Tampilan Menu Dialog Pembuatan Project Baru

Keterangan:
1) Untuk memilih jenis aplikasi yang akan dibuat, seperti Visual Basic, Visual C#,
Visual J#, Visual C++, serta pembuatan program setup pada Other Project Type.
2) Untuk memilih jenis aplikasi Windows.
3) Untuk mengisi nama project yang dibuat, contohnya “Latihan1”.
4) Untuk membuat lokasi dimana aplikasi diletakkan. (Misalnya, Location:
D:\Project\).
5) Tombol OK dipilih/klik, untuk membuat project baru pada Visual Basic .Net 2010.

c. Setelah selesai mengatur nama, lokasi penyimpanan dan jenis project, maka akan
tampil lembar kerja seperti gambar 6.

Modul Pemrograman Visual | Muhammad Ikhwan Mardin, S.Kom.,M.Kom 6

 IKT BUTON RAYA

Gambar 6. Tampilan Antarmuka Project Pada Visual Studio 2010

Keterangan:
1) Title Bar yaitu Judul Jendela (Nama Solution)
2) Menu Bar yaitu Kumpulan Perintah-Perintah
3) Toolbar yaitu Sekumpulan tombol yang mewakili suatu perintah tertentu
4) Toolbox yaitu Jendela dimana kontrol atau kontrol user interface ditempatkan
5) Form Window merupakan pusat pengembangan Visual Studio.NET dimana kontrol
(obyek) dari Toolbox ditempatkan.
6) Solution Explorer ialah Jendela yang menampilkan daftar semua form, modul, class,
dan file lainnya untuk membuat aplikasi.
7) Properties yaitu digunakan pada mode desain yang bertujuan untuk mengatur suatu
nilai pada kontrol (obyek).

3. Menambah Kontrol/Objek ke Form Windows

Tambahkan kontrol (obyek) Label ke Form1 dengan klik dua kali pada obyek label atau
dengan mengklik dan menggeser (Drag and Drop) ke Form1, seperti gambar 7.

Modul Pemrograman Visual | Muhammad Ikhwan Mardin, S.Kom.,M.Kom 7

 IKT BUTON RAYA

Gambar 7. Tampilan Penambahan Objek

4. Mengatur Properties Objek dan Form

Untuk mengatur salah satu objek yang terdapat pada Form, maka Klik sekali pada objek yang
ingin diubah, misalnya Label1, kemudian ubah properties Text pada jendela Properties objek
tersebut. Ubah teksnya menjadi “-Selamat Datang Jodoh-“, seperti gambar 8.

Gambar 8. Tampilan Mengubah Properties Text pada Label

Setelah selesai mengetik kalimat yang diinginkan, lalu tekan Enter. Maka akan terlihat
perubahan Label1 yang terdapat pada Form.

Modul Pemrograman Visual | Muhammad Ikhwan Mardin, S.Kom.,M.Kom 8

 IKT BUTON RAYA

Untuk mengatur tampilan (Properties) form, maka lakukan cara yang sama, yaitu dengan klik
sekali pada TitleBar-nya Form, atau sembarang tempat area form tetapi bukan objek yang
terdapat pada form tersebut. Kemudian ubah properties seseuai yang diinginkan, misalnya
ingin mengubah Text (Title) Form tersebut menjadi “.:: Tentang Aku ::.” Lalu tekan Enter
seperti pada gambar 9.

Gambar 9. Tampilan Mengubah Propesties Teks pada Form

5. Menjalankan dan Menghentikan Program (Running/Debugging dan Stop)

Untuk melihat hasil program yangs sudah dibuat, maka hal yang dilakukan adalah dengan
menjalankan Window Form dengan cara mengklik tombol Start Debugging berlogo anak
panah kanan berwarna hijau atau dengan menekan tombol F5 pada keyboard.

Gambar 10. Tampilan Cara Menjalankan Program

Modul Pemrograman Visual | Muhammad Ikhwan Mardin, S.Kom.,M.Kom 9

 IKT BUTON RAYA

Setelah diklik maka Visual Studio akan melakukan Running terhadap Project sehingga akan
terlihat wujud atau tampilan dari Program yang telah dirancang. Dan jika ingin
menghentikan (stop) program tersebut, maka cukup klik tanda Silang pada TitleBar Program
yang sedang Running tadi, seperti terlihat pada gambar 11.

Gambar 11. Tampilan Running dan Cara Menghentikan Program

6. Menambahkan Form
Untuk menambah Form maka langkah-langkah yang dilakukan adalah
1. Klik kanan Pada Project Name di Solution Explorer (Latihan1)
2. Pilih Add lalu Pilih Windows Form…

Gambar 12. Tampilan Cara Menambahkan Form

Modul Pemrograman Visual | Muhammad Ikhwan Mardin, S.Kom.,M.Kom 10

 IKT BUTON RAYA

Lalu akan muncul menu dialog “Add New Item”. Tidak perlu melakukan pemilihan apapun,
cukup melakukan pemberian nama form sesuai yang diinginkan, jika sudah pilih Add.

Gambar 13. Menu Dialog Penambahan Form

Maka pada lembar kerja akan muncul satu buah form tambahan, dan pada SolutionsExplorer
juga akan terjadi penambahan Form.

Gambar 14. Tampilan Menu Solution Explorer

7. Mengatur StartUp Form

Pengaturan ini bertujuan untuk memilih form mana yang akan pertama sekali dijalankan.
Misal ada dua Form, maka saat pertama sekali program dijalankan (Running), maka yang
diinginkan tampil pertama Form1 atau Form2. Untuk mengaturnya, caranya yaitu Klik dua kali
My Project pada jendela Solution Explorer, maka akan muncul menu dialog berikut.

Modul Pemrograman Visual | Muhammad Ikhwan Mardin, S.Kom.,M.Kom 11

 IKT BUTON RAYA

Gambar 15. Tampilan Menu Properties Project

Pada bagian Startup From pada tab Application, tentukan Form mana yang akan dipilih untuk
tampil saat pertama sekali program dijalankan (Running).

8. Menyimpan Project
Untuk menyimpan project, caranya adalah Klik Menu File lalu Klik Menu Save All.

Gambar 16. Tampilan Cara Menyimpan Project dengan Menubar

Atau klik ikon Disket pada Toolbar.

Gambar 17. Tampilan Cara Menyimpan Project dengan Ikon pada Toolbar

Modul Pemrograman Visual | Muhammad Ikhwan Mardin, S.Kom.,M.Kom 12

 IKT BUTON RAYA

9. Mengakhiri Project
Jika ingin mengakhiri project, maka klik Menu File + Exit.

Gambar 18. Tampilan Cara Mengakhiri Project

10. Membuka Project

Cara untuk membuka Project yang sudah pernah dibuat adalah
1) Klik Menu File + Klik Open + Klik Project/Solution

Gambar 19. Tampilan Cara Membuka Project dengan Menubar

Atau klik Ikon Folder pada Toolbar

Gambar 20. Tampilan Cara Membuka dengan Ikon pada Toolbar

Modul Pemrograman Visual | Muhammad Ikhwan Mardin, S.Kom.,M.Kom 13

 IKT BUTON RAYA

2) Cari Lokasi Penyimpanan Folder Project/Solution

3) Dilanjutkan dengan mencari File yang bertipe .sln atau .vbproj, Kemudan Klik dua Kali
4) Klik Tombol Open

Gambar 21. Tampilan Menu Dialog Open Project

Cara lain untuk membuka project adalah dengan membuka tempat penyimpan project,
kemudian klik dua kali file yang berekstensi .sln

Gambar 22. Tampilan Cara Membuka Project melalui File Project

Modul Pemrograman Visual | Muhammad Ikhwan Mardin, S.Kom.,M.Kom 14