Sunday, March 22, 2015

#VB.1.2 Mengenal IDE Visual Basic

IDE (Integrated Development Environment) adalah sebuah lingkungan dalam prmrograman yang dikemas dalam aplikasi, yang terdiri dari form edit kode (code editor), compiler, debuger dan tampilan antarmuka grafis (GUI--Graphics User Interface) yang saling terintegrasi.

Dalam turorial ini akan menjelaskan tentang IDE dari Visual Studio Community 2013, khusus yang berhubungan dengan pemrograman Visual Basic, karena di dalam Visual Studio Community 2013 terdapat banyak pilihan bahasa (Language) yang bisa kita gunakan seperti C#, C++, Visual F#, JavaScript, Python, TypeScript dan ASP.NET. Pada tutorial ini akan dijelaskan secara standart semua IDE yang telah disediakan secara default oleh Visual Studio Community 2013, karena sebenarnya dalam IDE tersebut juga menyediakan banyak hal seperti menu, toolbar ataupun windows yang bisa dikostumasi.

1. Proyek Baru
Setelah anda masuk ke aplikasi Visual Studio Community 2013, maka pertama anda akan dihadapkan pada satu kotak dialog yaitu Start Page. Ada beberapa pilihan yaitu:
  • Start terdiri dari 3 pilihan yaitu New Project, Open Project, Open from Source Control.
  • Help atau bantuan tentenag pemahaman Visual Studio Community 2013 yang disediakan.
  • Recent adalah tampilan dari proyek yang pernah anda edit sebelumnya.
  • Connect to Azure digunakan jika akan melakukan pemrograman dengan Sistem Cloud.
Seperti contoh gambar berikut ini:
Proyek Baru
Selanjutnya anda pilih New Project untuk memulai membuat program Visual Basic.

2. Menu New Project
Setelah anda pilih menu New Project, selanjutnya akan tertampil kotak dialog New Project seperti gambar dibawah, yang mana anda harus menentukan jenis proyek seperti apa yang akan anda buat. Ada beberapa pilihan yang tersedia di kotak dialog tersebut. Baiklah untuk lebih mudahnya anda mulai dengan memilih menu Visual Basic, Windows Desktop dan Windows Form Aplication.
Menu New Project
Selanjutnya tentukan Name (nama aplikasi) yang secara default akan diberi nama WindowsApplication1, WindowsApplication2... WindowsApplication-n begitu seterusnya secara counter, jika anda menggunakan nama default tersebut.

Pada pilihan nama ini misalkan saya berikan nama: Turorial 1.2, kemudian klik tombol OK untuk memulai membuat proyek baru.

3. Kotak Toolbox
Kotak Toolbox ini adalah alat yang berisi beberapa control yang nanti akan anda gunakan untuk mendesain form, seperti Textbox, Label, Button dan masih banyak lagi. Anda pilih All Windows Forms untuk menampilkan seluruh control yang tersedia. Untuk memulai mendasain form, anda cukup pilih control apa yang akan anda letakkan dalam form windows anda, kemudian anda drag dan drop di posisi form sesuai yang dikehendaki.
Kotak Toolbox
4. Windows Form Editor
Secara default disebelah kanan dari kotak Toolbox terdapat Form Windows dengan caption Form1 adalah sebuah Graphics Interface yang anda gunakan untuk mendesain atau merancang bentuk tampilan form yang anda inginkan. Anda tinggal menentukan control apa yang akan anda letakkan dalam form, cukup dengan drag dan drop dari Kotak Toolbox.

Windows Form Edit
Anda juga bisa mengatur tinggi dan atau lebar dari form, cukup dengan melakukan drag pada kotak pointer dari form, disebelah bawah, kanan dan pojok kanan bawah, lalu geser ke atas-bawah untuk mengatur tinggi form, dan ke kanan-kiri untuk mengatur lebar form, atau mengatur tinggi dan lebar otomatis dengan menggeser ke pojok bawah kanan.

5. Kotak Properties
Jika anda sedang melakukan desain form pada Windows Form Desaingner, maka disebelah kanan bawah akan tertampil Kotak Properties yang menampilkan properti dari Windows Form maupun Control yang sedang kita edit, seperti nama, ukuran, status, caption/text dan masih banyak lagi tergantung dari control yang sedang kita sunting. Untuk merubah properti dari Control, anda cukup meletakan kursor di mana anda akan edit, lalu edit sesuai yang anda kehendaki.
Kotak Properties
Properti tersebut dapat di sorting berdasar kategori atau alphabetic (ascending/descending) dengan cukup klik tanda :

6. Kotak Solution Explorer
Kotak yang terletak di sebelah kanan atas adalah Solution Explorer yang berfungsi untuk mengelola file yang terkait dengan proyek yang sedang ada edit. Sebagai contoh, dalam gambar di bawah, terdapat dua file yaitu FormSelamatDatang.vb dan Module1.VB.
Kotak Solution Explorer
Jika itu sebuah Form anda bisa memilih lalu tekan dobel klik atau klik kanan lalu pilih menu View Designer untuk menampilkan dalam kotak Windows Form Edit, atau dengan menekan klik kanan lalu pilih View Code (F7) untuk menampilkan Kode yang sedang atau akan anda tulis.

7. Code Editor
Untuk menuliskan kode program sesuai dengan algoritma yang anda inginkan, maka anda harus menggunakan Code Editor ini, dengan fitur yang sangat memudahkan bagi anda karena terdapat panduan standart dengan warna dan identasi yang otomatis, serta diberikan panduan dari setiap anda menuliskan statemen code atau object yang akan muncul secara otomatis setelah anda tekan titik. Jadi anda tidak perlu membayangkan bahwa akan menuliskan kode program seperti menggunakan Notepad.
Code Editor

Kemudahan lain adalah, pada saat anda akan menuliskan kode program dari event kontrol atau form, maka anda cukup dengan menekan dobel klik dari Form atau Control, maka akan muncul event yang bisa anda pilih event apa yang akan anda beri kode program, misalkan event Button Clik, Form Load dan lain sebagainya.

8. Kotak Daftar Kesalahan (Error List)
Setelah anda mendesain form dan menuliskan kode programnya, tentu anda akan melihat hasil dari proyek yang anda buat, maka untuk melakukan hal itu anda cukup click tombol Start  yang terletak dibawah menu atau dengan menekan keyboard F5. Jika terjadi kesalah kode program, maka compiler akan menampilkan daftar kesalahan-kesalahan yang terjadi dalam Kotak Daftar Kesalahan (Error List), seperti contoh gambar berikut ini:
Kotak Daftar Kesalahan (Error List)

9. Short Cut
Ada beberapa Short Cut yang untuk pemula dan berhubungan dengan dasar pemrograman, yang bisa anda pakai dan biasakan untuk mempercepat pekerjaan pemrograman anda daripada menggunakan mouse, yaitu seperti berikut ini:
  • F7 -- View Code (Menuju ke Code Editor)
  • Shit+F7 -- View Designer (Menuju ke Windows Form Editor)
  • F5 -- Start Program (Menjalankan Proyek)
  • F4 - Menuju ke Kotak Properties Windows
  • Ctrl+R -- Menuju ke Kotak Solution Explorer
  • Ctrl+N -- New Project (Memulai proyek baru)
  • Ctrl+O -- Open Project (Membuka dan mengedit proyek yang pernah anda buat dan telah tersimpan)
  • Ctrl+S -- Save File (Menyimpan file yang aktif atau sedang diedit, bisa anda lihat di Solution Explorer)
  • Ctrl+Shift+S -- Save All File (Menyimpan semua file yang terintegrasi dengan proyek)
Tutorial #VB.1.2 untuk sementara membahas sampai dengan ini, pelajari dan anda lakukan percobaan dan latihan sehingga anda akan terbiasa dengan IDE Visual Studio, sehingga akan memudahkan untuk memahami tutorial selanjutnya.


Tutorial Sebelumnya | Tutorial Selanjutnya

1 comment: