Pengenalan Visual Basic

dan WPF

1.1 Sejarah Visual Basic

Visual Basic merupakan salah satu bahasa pemrograman paling populer
yang sudah berevolusi ke berbagai versi dari sejak dulu. Bahkan pada
zaman DOS, bahasa Basic sudah diperkenalkan dengan berbagai versi,
mulai dari QBASIC yang menjadi bahasa pemrograman andalan di era
90-an. Namun, perubahan bahasa BASIC ini dimulai sejak Windows
diperkenalkan, di mana fitur drag and drop mulai muncul. Salah satu
tokoh dunia komputer, yaitu Alan Cooper, disebut sebagai "Bapak Visual
Basic". Microsoft meminta Alan Cooper untuk merancang sebuah aplikasi
yang bisa membangun form dengan konsep drag and drop. Dan akhirnya
digabungkan oleh Microsoft dengan bahasa BASIC, maka terciptalah
Visual Basic.

Visual Basic versi 1.0 diluncurkan pada tahun 1991. Dilanjutkan dengan
Visual Basic 2.0 pada November 1992, yang mengalami peningkatan pada
kecepatan dan kemudahan dalam perancangan. Visual Basic 3.0 dirilis

1
pada tahun 1993, dan sudah diintegrasikan dengan Jet Engine yang dapat
melakukan pengolahan database Access. Versi ini dirilis dengan versi
Standard dan Profesional. Visual Basic 4.0 dirilis pada bulan Agustus
1995. Mulai dari versi ini, diperkenalkan konsep ActiveX kontrol yang
menjadi cikal bakal dari komponen pembangun aplikasi yang bisa
digabungkan dengan third-party control. Pada Februari 1997, dirilis versi
5.0 yang secara eksklusif dirancang untuk pemrograman 32-bit ditambah
dengan kompilasi pada tingkat kode baku Windows dan mempercepat
proses kalkulasi.

Visual Basic 6.0 dirilis pada pertengahan tahun 1998 dan mengalami
penambahan beberapa fitur, seperti kemampuan merancang aplikasi
berbasis web. Kesuksesan Visual Basic versi ini merupakan versi paling
populer sampai pada saat itu. Visual Basic selanjutnya dirilis dalam versi
.NET yang merupakan penerus VB 6.0. Pada versi ini sudah dibutuhkan
.NET Framework yang disediakan oleh Microsoft sebagai platform
sehingga aplikasi berjalan sesuai standardisasi. Pada versi ini, perubahan
dimulai dari integrasi, pemrograman objek, struktur desain, dan lain-lain
mengalami perubahan yang cukup signifikan. Versi penerus VB 6.0 ini
diluncurkan pada bulan April 2003 dengan nama Visual Basic .NET 2003.
Dan dilanjutkan dengan Visual Studio 2005 yang memperkenalkan .NET
Framework versi 2.0.

Versi berikutnya diluncurkan pada tahun 2008 dengan nama Visual

Studio 2008 (VB 9.0) dan .NET Framework 3.5 diperkenalkan. Versi
berikutnya setelah 2008, muncul pada tahun 2010 dengan Visual Studio
2010 dengan .NET Framework 4.0 dan penambahan berbagai fitur dalam
IDE (Integrated Development Environment), serta peningkatan bahasa
implementasi. Pada tahun 2013 diluncurkan versi terbaru sampai buku
ini ditulis, yaitu Visual Studio 2013 dengan memperkenalkan .NET
Framework 4.5.

2
Visual Basic telah mengalami evolusi dan telah berkembang demikian
pesat menjadi salah satu bahasa pemrograman yang paling mudah
dipelajari tanpa mengurangi kemampuan untuk merancang aplikasi
mutakhir sekalipun. Di samping itu, Visual Basic terus dikembangkan
sebagai RAD (Rapid Application Development) yang menjangkau dari
kaum pemula sampai dengan praktisi profesional sehingga paling banyak
digunakan oleh pengembang aplikasi.

1.2 Kemampuan Visual Basic

Visual Basic atau sering disingkat dengan VB, sering dipakai untuk mem-
bangun aplikasi sederhana sampai yang kompleks, dan lebih ditujukan
pada fungsi akademis, basis data (database), maupun kebutuhan end-user
(pengguna). Banyak rekomendasi untuk membangun aplikasi multi
kompleks dan berada pada low-level dengan menggunakan bahasa C++
yang mempunyai proses eksekusi yang lebih cepat dari VB, disebabkan
C++ berada pada mid-level programming language. Namun berbicara
kemudahan dan kecepatan penguasaan bahasa pemrograman, belum ada
yang bisa menyaingi bahasa BASIC yang merupakan moyang dari VB.

Seiring dengan evolusinya, VB juga mengalami penambahan fitur dan

aksesibilitas terhadap berbagai lapisan sistem operasi. VB sudah banyak
digunakan untuk merancang aplikasi multimedia, akses perangkat keras,
pengolahan fungsi tingkat rendah, bahkan sampai game. Dimulai dari
aplikasi sederhana multimedia dengan menggunakan GDI sampai dengan
DirectX, aplikasi pengolahan fungsi API sampai dengan pustaka DLL
(Dynamic Link Library). Banyak sekali referensi di internet untuk contoh-
contoh dari aplikasi yang bisa dibangun dengan VB. Tidak hanya aplikasi
dasar saja yang bisa dibangun, tetapi juga yang bersifat komersial
sekalipun.

3
Bahkan pada saat munculnya XNA, VB dapat "menggandeng" pustaka ini
untuk membangun aplikasi game, seperti game komersial pada
umumnya. Game XNA sendiri banyak dirilis di dalam konsol game
XBOX yang dibuat oleh Microsoft.

Populernya bahasa BASIC yang menjadi acuan membangun struktur

pemrograman Visual Basic, membuat banyak pengembang merancang
compiler atau RAD dengan fungsi tertentu yang menggunakan bahasa
BASIC ini. Beberapa yang dikenal sebagai berikut:

DarkBasic: aplikasi untuk membuat game dengan pustaka DirectX.

FreeBasic: compiler open source dengan segmen pada OS yang

berbeda, seperti Linux, FreeBSD, dan sebagainya.

PowerBasic: compiler untuk perancangan aplikasi dengan menguta-

makan kecepatan eksekusi. Compiler ini juga menyediakan akses
terhadap rutin grafis.

Ketiga contoh di atas hanya sebagian dari banyaknya varian dari bahasa
BASIC dengan tujuan tertentu. Ada yang bersifat komersial dan ada yang
bersifat bebas royalty.

1.3 .NET Framework

Sistem operasi Windows memiliki banyak sekali aplikasi yang dibangun
dengan alat dan bahasa yang berbeda. Setiap aplikasi yang dibangun
tersebut membutuhkan pustaka dan lingkungan tersendiri. Sehingga
setiap aplikasi tersebut apabila dipaketkan untuk dipasang di komputer
lain, kelompok pustaka dan file pendukung harus diikutkan agar aplikasi
bisa berjalan. Ketidakseragaman ini membuat begitu rumitnya untuk
merancang aplikasi, di mana sistem operasi yang berbeda membutuhkan
penanganan yang berbeda. Microsoft menciptakan .NET Framework yang
merupakan platform dengan teknologi untuk mengembangkan aplikasi

4
dengan penyeragaman pondasi. .NET Framework sendiri dapat diinstal di
OS Windows, dimulai dari versi 98 sampai dengan OS Windows terbaru.

Aplikasi yang dibangun dengan pondasi .NET Framework dapat bebas

menggunakan bahasa apa saja, selama sesuai dengan Common Language
Infrastructure. .NET Framework terdiri atas dua komponen utama, yaitu
Framework Class Library (FCL) dan Common Language Runtime (CLR).

FCL akan melakukan komunikasi antar-bahasa pemrograman, di mana

aplikasi .NET Framework bisa dirancang dengan menggunakan beberapa
bahasa yang berbeda, dan FCL yang akan menerjemahkan menjadi
perintah yang dikenali. Setelah hasil terjemahan dari FCL, selanjutnya
dibutuhkan komponen pustaka yang akan menyediakan lingkungan bagi
aplikasi dan mengatur manajemen dari aplikasi, seperti komunikasi basis
data, memori, pemanggilan rutin, dan sebagainya. Pengaturan ini dise-
diakan oleh CLR yang akan membuat mesin virtual agar aplikasi .NET
bisa berjalan secara optimal.

Gambar 1.1 Lapisan dari .NET Framework

.NET Framework memiliki sejarah dan perkembangan dimulai dari tahun

2002. Dengan setiap versi baru menawarkan fitur dan kemampuan yang
lebih canggih dari versi sebelumnya.

5
 Versi.NET Diperkenalkan WaktuRilis Fitur
Framework diIDE
4.5.1 VisualStudio Oktober DukunganuntukWindows
2013 2013 Store
Perbaikanperfomansidan
prosesdebug
4.5 VisualStudio Agustus Peningkatanpengembangan
2012 2012 aplikasiWPF,WCF,WF,dan
ASP.NET
PeningkatanCLR4.0
4.0 VisualStudio April2010 DiperkenalkanCLR4.0
2010 PustakaTugasParalel
DLRdiperkenalkan
3.5 VisualStudio November LINQdiperkenalkan
2008 2007 Dukunganmultiframework
3.0 VisualStudio November WPF,WCF,danWF
2005 2006 diperkenalkan
2.0 VisualStudio November CLR2.0diperkenalkan
2005 2005 Dukungandanfituruntuk
ASP.NET
1.1 VisualStudio April2003 DukunganuntukASP.NET
.NET2003 danADO.NET
Peningkatansekuritas
DukunganIPv6
BasisdataODBC
diperkenalkan
1.0 VisualStudio Februari CLR1.0diperkenalkan
.NET 2002 Perancanganaplikasi
berbasisweb
Penggunaanpustakakelas
DLL

Setiap versi dari .NET Framework memperkenalkan fitur baru dan

meningkatkan ataupun perbaikan terhadap komponen yang ada pada

6
versi sebelumnya. Gambar di bawah menunjukkan lapisan dari .NET
Framework dengan komponen-komponen utamanya.

Gambar 1.2 Pengembangan dari .NET Framework

1.4 Menjelajahi IDE Microsoft Visual

Basic 2013
Microsoft Visual Basic 2013 dirilis pada Oktober 2013, dan merupakan
IDE (Integrated Development Environment) terintegrasi dari bagian
Microsoft Visual Studio. Dengan Visual Basic 2013 (VB 2013) dapat
dirancang aplikasi berbasis Windows (WinForms, WPF, berbasis Web,
Silverlight, dan masih banyak lagi). VB 2013 memiliki IDE yang secara
umum tidak memiliki perbedaan jauh bagi yang pernah memakai VB
pada versi sebelumnya, bahkan kembali ke VB 6.0 juga memiliki tampilan
umum secara garis besar yang hampir sama.

Bagi yang sudah menginstal Visual Studio 2013 dapat menjalankan

aplikasi ini di bagian Start All Programs di Windows pada folder Visual
Studio 2013, dan memilih ikonnya.

7

Gambar 1.3 Memilih Program Visual Studio 2013

Pada saat dijalankan, akan ditampilan terlebih dahulu splash screen dari
Visual Studio 2013 seperti gambar di bawah ini.

Gambar 1.4 Splash Screen Visual Studio 2013

Pada saat pertama kali Visual Studio 2013 dijalankan, akan ditanyakan
konfigurasi untuk lingkungan setting. Pilih "Visual Basic Development
Settings" untuk mengatur IDE agar sesuai dengan lingkup Visual Basic.
Dan pemilihan ini hanya akan ditanyakan sekali saja pada saat Visual

8
Studio 2013 pertama kali diluncurkan. Untuk selanjutnya tidak akan
muncul dialog "Choose Default Environment Settings" tersebut.

Gambar 1.5 Setting Environment IDE

Tips
Apabila pemilihan setting ini ingin diubah, maka bisa melakukan reset
yang terdapat di menu Tools Import and Export Settings.

Gambar 1.6 Pengaturan Setting IDE

9
Pilih Reset All Settings untuk memilih ulang setting, dan akan dimun-
culkan kotak dialog untuk memilih menyimpan setting sekarang yang
sudah ada, atau tidak disimpan sama sekali.

Gambar 1.7 Memilih Setting Visual Basic

Tekan tombol Finish untuk berpindah ke setting sesuai dengan yang

dipilih.

1.4.1 Tampilan Interface

IDE (Integrated Development Environment) dari Visual Basic 2013

memiliki bentuk dasar yang hampir sama dengan versi VB sebelumnya.
Hal ini tentunya juga dibuat oleh Microsoft untuk membuat pengguna
sebelumnya tidak terlalu sulit untuk beradaptasi. Keseluruhan bentuk
umum masih dipertahankan dan ada beberapa penambahan.

10

Gambar 1.8 Tampilan IDE Visual Basic 2013

Tampilan pertama pada saat Visual Studio 2013 dijalankan memiliki

bagian utama, seperti yang ditunjukkan pada gambar di atas. Beberapa
bagian utama masih seperti dengan IDE pada versi Visual Studio
sebelumnya, walaupun posisi dari bagian tersebut sebagian bisa diubah
posisinya, namun docking secara standar adalah seperti gambar di atas.

Tips
Apabila ingin mengubah tema warna dari IDE bisa dilakukan dengan
memilih pilihan di Options.

Gambar 1.9 Options di Menu IDE

11
Pada kotak dialog Options, di bagian Color Themes disediakan tiga
pilihan tema warna untuk tampilan IDE Visual Studio.

Gambar 1.10 Tema Warna IDE

1.4.2 Menu dan ToolBar

Menu Visual Studio 2013 memiliki pilihan utama, seperti pada gambar di
bawah ini. Di dalam pilihan tersebut juga disediakan sub-pilihan yang
bisa diakses untuk navigasi dan fungsi di saat perancangan aplikasi
dilakukan. Seperti hal umumnya pada aplikasi Windows standar, toolbar
dapat menjadi shortcut dari pilihan yang terdapat pada menu.

Gambar 1.11 Menu IDE Visual Studio 2013

1.4.3 ToolBox

Fungsi toolbox pada Visual Basic adalah tempat bagi perancang untuk
mencari objek kontrol yang bisa digunakan di dalam form untuk me-
rancang layout dari aplikasi. Objek-objek tersebut secara standar akan
disediakan oleh Visual Basic itu sendiri, dan masih bisa ditambahkan
objek kontrol dari pengembang luar, yang sering disebut sebagai third
party control.

12

Gambar 1.12 ToolBox Visual Basic 2013

Toolbox hanya akan terisi apabila perancang telah memilih project, baik
itu melalui New ataupun Open. Gambar di atas merupakan toolbox
standar apabila Anda telah memilih untuk memulai perancangan aplikasi.
Susunan dari komponen di toolbox tidak diharuskan memiliki isi yang
sama antar-komputer. Susunan tampilan objek di toolbox tersebut bisa
diubah dengan mengaktifkan List View. Caranya, dengan klik tombol
kanan mouse di daerah toolbox.

Gambar 1.13 Pemilihan View Toolbox

13
Apabila List View dalam keadaan tercentang maka tampilan akan ter-
susun berbentuk seperti di gambar atas. Klik List View sekali untuk
menghapus centang agar tampilan berbentuk seperti gambar di bawah ini.

Gambar 1.14 Grid View ToolBox

Untuk mengembalikan ke bentuk semula, centang kembali pilihan List

View dengan cara yang sama pada saat menghapus centang. Bentuk
tampilan ini terpisah antar-grup toolbox, sehingga perubahan pada
1 grup tidak akan memengaruhi tampilan view ikon pada grup lainnya.

1.4.4 Solution Explorer

Solution Explorer digunakan untuk melakukan manajemen file dan item

di dalam project. Operasi-operasi di dalam Solution Explorer, seperti
mengubah nama, menghapus, menambah, dan mengedit bisa dilakukan
layaknya manajemen file di dalam sistem operasi.

Tampilan Solution Explorer di dalam IDE secara standar berada di posisi

kanan atas dari aplikasi Visual Studio. Dan untuk menampilkan window
Solution Explorer bisa menggunakan shortcut Ctrl+Alt+L atau memilih
di menu View Solution Explorer.

14
Solution Explorer mulai diperkenalkan sejak Visual Studio 2012. Walau
pada Visual Studio 2010 sudah diperkenalkan bentuk awalnya, namun
sejak 2012 beberapa fitur tambahan mulai ditambahkan sehingga Visual
Studio 2013 mengalami peningkatan. Dan yang paling menonjol adalah
penambahan toolbar di window Solution Explorer.

Gambar 1.15 Window Solution Explorer

Pada bagian atas window Solution Explorer terdapat toolbar dengan

fungsi untuk memudahkan perancang dalam menavigasi objek-objek
yang disusun secara hierarki di dalam project.

Gambar 1.16 Toolbar Solution Explorer

Perancang melalui Solution Explorer dapat memantau dan memanipulasi

solution, project, files, dan kode melalui fitur yang disediakan. Adapun
fitur umum tersebut sebagai berikut:

15
 Mencari item di dalam project. Proses pencarian memiliki filter
dengan menekan tombol panah bawah di samping ikon kaca
pembesar ( ).

Gambar 1.17 Pencarian di Solution Explorer

Menampilkan filter untuk objek yang sedang terbuka di IDE, dan

objek yang tertunda untuk perubahan.

Gambar 1.18 Filter di Solution Explorer

Menampilkan semua file di dalam folder Solution yang membangun

aplikasi.

Gambar 1.19 Tampil Semua Files di Solution Explorer

16
1.4.5 Properties

Setiap objek di dalam perancangan aplikasi WPF sebagaimana halnya

dengan perancangan pada WinForms memiliki properties. Properties ini
berfungsi sebagai atribut dari objek, di mana nilai tersebut bisa diberi
(set) ataupun diambil (get). Penanda dari sebuah objek dengan mem-
berikan nilai properties akan mengubah elemen-elemen sehingga objek
disesuaikan dengan perancang.

Daftar properties dari sebuah objek bisa dilihat pada window yang
terletak di sudut kanan bawah di IDE. Properties dari sebuah objek paling
umum adalah Name, di mana nama sebuah objek/kontrol/komponen
digunakan untuk membedakan antara satu dengan yang lain.

Gambar 1.20 Contoh jendela Properties

Setiap objek tidak memiliki nilai properties yang sama dengan objek
berbeda lainnya. Dan nama properties yang sama tidak memiliki
perubahan yang sama pada objek yang berbeda.

17
1.5 WPF dan XAML
WPF mulai diperkenalkan pada .NET Framework 3.0 dan merupakan
bagian dari rutin grafik yang disediakan oleh Windows untuk mema-
nipulasi tampilan dari aplikasi berbasis Windows. Pada versi VB sebe-
lumnya, manipulasi grafik biasa menggunakan rutin API dari sistem GDI,
sedangkan WPF telah menggunakan DirectX dengan pengolahan grafik
tingkat tinggi. Aplikasi WPF yang dibangun memiliki karekteristik yang
sama dengan perancangan aplikasi WinForms pada umumnya. Objek
yang terdapat pada WPF merupakan render dari tampilan grafis dengan
mengandalkan rutin DirectX.

Dengan kata lain, aplikasi WPF akan memiliki tampilan UI (User

Interface) yang maksimal, dibandingkan dengan aplikasi WinForms.
Namun, semua itu perlu "dibayar" dengan perangkat keras yang memadai
untuk menampilkan hasil yang optimal.

Untuk menampilkan tampilan dengan style yang memukau, WPF tidak

bisa berdiri sendiri dan membutuhkan XAML sebagai bagian dari kendali
elemen tampilan. Aplikasi WPF tidak terbatas pada perancangan aplikasi,
sebagaimana pada aplikasi WinForms sebelumnya. Anda bisa merancang
aplikasi multimedia, basis data, pembelajaran, pengolahan data, dan
sebagainya. Hanya bedanya, WPF menawarkan tampilan yang murni
tanpa ikatan terhadap UI yang akan dirancang.

1.5.1 Sejarah WPF

WPF pada awalnya dikenal dengan nama "Avalon", dan diperkenalkan

pada saat Microsoft meluncurkan .NET Framework 3.0. Seiring dengan
peningkatan versi .NET Framework, WPF sendiri juga mengalami
peningkatan, baik dari segi fitur maupun kompatibilitas.

18
VersiWPF WaktuRilis .NET Catatan
Framework
3.0 November2006 3.0 VersipertamaWPF
CLRVersi2.0
3.5 November2007 3.5 PeningkatanfiturWPF
CLRVersi2.0SP1
3.5SP1 Agustus2008 3.5SP1 CLRVersi2.0SP2
Peningkatankecepatan
WPF
4.0 April2010 4.0 CLRVersi4.0
PeningkatanWPF
4.5 Agustus2012 4.5 CLRVersi4.5
PeningkatanWPF

1.5.2 XAML

XAML atau kepanjangan dari Extensible Application Markup Language

merupakan bahasa berbasis XML yang dikembangkan oleh Microsoft,
yang memiliki karekteristik yang hampir sama dengan HTML. XAML
digunakan untuk melakukan deklarasi dan inisialisasi terhadap objek
dengan nilai property dari objek tersebut. XAML mulai digunakan sejak
dirilis .NET Framework 3.0, di mana pada saat itu WPF, WF, dan
Silverlight mulai diperkenalkan. XAML mulai banyak diaplikasikan pada
model pemrograman .NET dan bertujuan untuk mengembangkan tam-
pilan bagi aplikasi .NET, dibantu dengan code behind untuk membangun
aplikasi. Dengan menggunakan lingkungan .NET, XAML bisa berdiri
sendiri dan terpisah mengendalikan UI, sedangkan code behind bekerja
untuk mengendalikan alur dari logika untuk aplikasi tersebut.

Secara umum, XAML hampir sama dengan penulisan HTML yang meng-
gunakan format tag. Dengan XAML, perancang dapat menentukan
visualisasi objek kontrol, pengendalian koneksi data, pengaturan hu-
bungan antar-objek, dan beberapa fitur lainnya. XAML memiliki fungsi

19
yang sama dengan pengkodean objek secara run time pada saat
pemrograman VB zaman dulu. Namun bedanya dengan XAML,
perancangan objek dilakukan secara design time dan mempersingkat kode
untuk mempercepat perancangan.

XAML akan menggunakan ekstensi .xaml untuk file yang disimpan, dan
dapat dibaca sebagai XML. Contoh di bawah ini merupakan contoh
penulisan XAML yang berfungsi untuk mengisi properties dari objek
Button.
<Grid>
<Button Content="Simpan Data"/>
</Grid>

Pada pandangan secara sintaks, XAML memiliki bentuk yang hampir

sama dengan XML. Baik dari penggunaan tag pembukaan maupun tag
penutupan. Perbedaan XAML lebih cenderung pada penataan kontrol
dan objek untuk mengatur antarmuka di dalam form. Lebih jauh, XAML
sendiri bahkan bisa menerima, memberi, dan mengendalikan tingkah
laku (behaviour) dari sebuah objek.

20