Bab 1: Dasar Pemrograman Visual C#

Pengenalan IDE Visual Studio

1.1 Pengantar

Pada tahun 2000, Microsoft mengumumkan bahasa pemrograman C# (diucapkan dengan C sharp), yang diciptakan secara khusus untuk platform .NET. C# memiliki akar dari C, C++, dan Java. Seperti Visual Basic, C# berorientasi objek dan memiliki akses terhadap pustaka kelas .NET Framework Class Library, yaitu kumpulan yang kaya akan komponen-komponen terpradefinisi yang memampukan Anda untuk mengembangkan aplikasi secara cepat. Kedua bahasa, Visual Basic dan C#, memililiki kapabilitas yang sama dengan Java dan cocok untuk aplikasi desktop, bergerak (mobile) dan aplikasi berbasis web.

C# merupakan pemrograman beroerientasi objek. Anda akan belajar dasar-dasar teknologi objek dan banyak teknik lain pada buku ini. C# merupakan bahasa event-driven, yang dapat merespon event yang dipicu oleh pengguna seperti klik mouse, ketikan pada keyboard, pewaktu, dan lainnya. Visual C# merupakan bahasa pemrograman visual. Bahasa visual ini memberikan beberapa statemen program untuk membangun beberapa bagian dari aplikasi Anda. Kemampuan GUI (graphical user interface) dari Visual Studio yang memampukan Anda untuk melakukan drag and drop objek-objek terpradefinisi seperti tombol dan kotak teks ke tempat-tempat pada layar. Visual Studio menuliskan kode GUI untuk Anda.

Visual Studio 2012 merupakan IDE (Integrated Development Environment) dari Microsoft untuk menciptakan, menjalankan, dan mendebug program (atau aplikasi) yang ditulis dalam pelbagai bahasa pemrograman .NET. Bab ini akan menyajikan penjelasan singkat atas IDE 2012 dan menunjukkan bagaimana menciptakan sebuah program C# sederhana dengan menggeret dan menempatkan (drag and drop) blok-blok pembangun terpradefinisi ke tempat tertentu (teknik ini dikenal dengan pemrograman visual).

1.2 IDE Visual Studio 2012

Ada beberapa versi Visual Studio. Buku ini didasarkan pada Visual Studio 2012. Diasumsikan bahwa Anda telah familiar dengan Windows.

Pengenalan IDE Visual Studio 2012

Anda menggunakan karakter > untuk mengindikasikan pilihan atas sebuah item menu dari suatu menu. Sebagai contoh, Anda menggunakan notasi File > Open File untuk mengindikasikan bahwa Anda seharusnya memilih item menu Open File dari menu File.

Untuk memulai Visual Studio 2012, Anda memilih Start > All Programs > Visual Studio 2012. Begitu Visual Studio 2012 mulai dieksekusi, Start Page akan ditampilkan (Gambar 1.1). Tergantung dari versi Visual Studio yang Anda gunakan, Start Page bisa tampak berbeda. Start Page memuat beberapa sumberdaya berbasis web dan beberapa link yang menghubungkan ke pelbagai sumberdaya pada Visual Studio 2012. Untuk kembali ke Start Page, Anda bisa memilih View > Start Page.

Gambar 1.1 Start Page pada Visual Studio 2012

Beberapa Link pada Start Page

Beberapa link pada Start Page diorganisir ke dalam beberapa bagian, yaitu Start, Recent, GET STARTED, HOW-TO VIDEOS (STREAMING), dan LATEST NEWS. Dengan mengklik link ini pada Start Page akan menampilkan informasi relevan yang berkaitan dengan link tertentu.

Bagian Start memuat beberapa link seperti New Project, Open Project, dan Connect to Team Foundation Server. Bagian Recent memuat beberapa link untuk menghubungkan beberapa projek yang telah diciptakan. Bagian GET STARTED difokuskan untuk penggunaan IDE dalam menciptakan program visual.

Gambar 1.2 Beberapa link pada bagian GET STARTED

Menggunakan IDE dan Menciptakan Projek Baru

Untuk memulai pemrograman dalam Visual C#, Anda harus menciptakan sebuah projek baru atau membuka projek yang sudah ada. Projek merupakan sekelompok file yang berelasi dan citra (jika ada) yang membangun sebuah program. Selanjutnya, Anda memilih File > New Project > Visual C# dan akan tampil dialog New Project seperti yang ditampilkan pada Gambar 1.3.

Gambar 1.3 Dialog New Project

Visual Studio menyediakan beberapa template (Gambar 1.3). Template merupakan jenis projek yang dapat diciptakan pengguna dalam bahasa pemrograman visual (pada kasus ini, Visual C#), yaitu Windows Forms Application, Console Applications, WPF Application, dan lainnya. Pada bab ini, akan dibangun sebuah Windows Forms Application. Aplikasi semacam itu dieksekusi pada sistem operasi Windows (seperti Windows 7) dan secara umum memiliki GUI.

Gambar 1.4 Tampilan Design pada IDE

Secara default, Visual Studio menugaskan nama WindowsFormsApplication1 kepada projek Windows Forms Application yang baru. Anda memilih Windows Forms Application, kemudian klik OK untuk menampilkan IDE pada Design view (Gambar 1.4), yang memuat beberapa fitur dalam memampukan Anda untuk menciptakan program.

Kotak persegi pada area Design diberi judul Form1 yang merepresentasikan jendela aplikasi utama yang akan Anda ciptakan. Visual C# dapat memiliki banyak Form (jendela). Namun, kebanyakan aplikasi yang Anda ciptakan pada buku ini hanya akan menggunakan satu Form. Anda akan belajar bagaimana memanipulasi Form dengan menambahkan GUI controls. Pada contoh ini, Anda akan menambahkan sebuah Label dan sebuah PictureBox. Sebuah Label umumnya memuat teks deskriptif (misalnya, “Selamat Datang ke Visual C#!”), dan sebuah PictureBox menampilkan citra, seperti logo tertentu. Visual C# banyak memiliki kendali terpradefinisi dan komponen lainnya yang dapat Anda pakai untuk membangun program Anda.

Pada bab ini, Anda akan bekerja dengan kendali-kendali yang sudah ada dari pustaka kelas .NET. Setelah Anda menempatkan beberapa kendali pada Form, Anda akan mampu memodifikasi propertinya. Sebagai contoh, Gambar 1.5 menunjukkan di mana judul Form dapat dimodifikasi dan Gambar 1.6 menampilkan sebuah dialog dimana di dalamnya properti font dapat dimodifikasi.

Gambar 1.5 Kendali Textbox untuk memodifikasi sebuah properti pada IDE Visual Studio

Gambar 1.6 Dialog untuk memodifikasi properti font

Secara kolektif, Form dan kendali (controls) merupakan elemen-elemen pembangun GUI. Pengguna memasukkan data ke dalam program dengan mengetikkan pada papanketik, dengan mengklik tombol mouse, dan beberapa cara lain. Program menggunakan GUI untuk menampilkan instruksi-instruksi dan informasi lain untuk pengguna. Sebagai contoh, dialog New Project pada Gambar 1.3 menyajikan sebuah GUI dimana pengguna dapat mengklik tombol mouse untuk memilih tipe template, kemudian memasukkan nama projek dari papanketik.

1.3 Menu Bar dan ToolBar

Perintah-perintah untuk mengelola IDE dan untuk mengembangkan dan mengeksekusi program dimuat di dalam menu, yang ditempatkan pada menu bar pada IDE (Gambar 1.7). Serangkaian menu ditampilkan sesuai dengan apa yang sedang Anda kerjakan pada IDE.

Gambar 1.7 Menu bar pada Visual Studio

Anda bisa melakukan pengaturan pada toolbar. Anda memilih View > Toolbars (Gambar 1.8). Setiap toolbar yang Anda pilih akan ditampilkan dengan semua toolbar lain di sisi atas jendela Visual Studio. Untuk mengeksekusi perintah lewat sebuah toolbar, Anda tinggal mengklik ikon terkait.

Gambar 1.8 Menambahkan toolbar Build pada IDE

1.4 Toolbox

Toolbox (View > Toolbox) memuat ikon-ikon yang merepresentasikan kendali-kendali yang digunakan untuk memanipulasi Form (Gambar 1.9). Dengan pemrograman visual, Anda dapat melakukan “drag and drop” pada Form dan IDE akan menuliskan kode yang menciptakan kendali untuk Anda. Hal ini lebih cepat dan lebih sederhana daripada harus menuliskan kode itu sendiri. Sama seperti Anda yang tidak perlu mengetahui bagaimana menciptakan mesin ketika mengendarai sebuah mobil, Anda juga tidak perlu mengetahui bagaimana membangun kendali pada IDE.

Gambar 1.9 Jendela Toolbox yang menampilkan kendali-kendali untuk grup Common Controls

Grup-grup Toolbox memuat kendali-kendali terpradefinisi yang dikelompokkan dalam beberapa kategori, seperti All Windows Forms, Common Controls, Containers, Menus & Toolbars, Data, Components, Printing, Dialogs, Reporting, WPF Interoperability, Visual Basic Power Packs, dan General.

1.5 Jendela Properties

Untuk menampilkan jendela Properties, Anda bisa memilih View > Other Windows > Properties Window. Jendela Properties menampilkan beberapa properti untuk Form yang sekarang sedang dikerjakan (Gambar 1.10). Jendela ini menetapkan informasi seputar Form atau kendali, seperti ukuran, warna, dan posisinya. Setiap Form atau kendali memiliki sederet properti sendiri.

Gambar 1.10 menampilkan jendela Properties untuk Form1. Kolom kiri memuat nama-nama dari properti Form dan kolom kanan menampilkan nilai terkini dari tiap properti. Anda dapat mengurutkan properti secara alfabetik (dengan mengklik ikon Alphabetical) atau secara kategorik (dengan mengklik ikon Categorized). Semua properti dapat diurutkan secara alfabetik dari A sampai Z atau Z sampai A, dan pengurutan secara kategorik atas grup-grup properti dilakukan sesuai dengan kegunaannya (yaitu, Accessibility, Appearance, Behavior, Design, dan lainnya). Bergantung dari ukuran jendela Properties, beberapa properti akan tersembunyi dari pandangan pada layar. Pengguna dapat menggesernya dengan menggeser kotak penggeser (scrollbox) ke atas atau ke bawah di dalam batang penggeser (scrollbar), atau dengan mengklik tanda panah di sisi atas dan bawah dari batang penggeser.

Jendela Properties sangat krusial dalam pemrograman visual. Jendela ini memampukan Anda untuk memodifikasi properti tiap kendali secara visual, tanpa harus menuliskan kodenya. Anda dapat melihat properti mana yang tersedia untuk dimodifikasi dan, pada banyak kasus, dapat belajar tentang rentang nilai yang dapat diterima oleh properti tertentu. Jendela Properties menampilkan penjelasan singkat dari properti yang terseleksi untuk membantu Anda memahami tujuannya. Sebuah properti dapat ditetapkan dengan cepat menggunakan jendela ini dan tidak memerlukan kode untuk dituliskan.

Gambar 1.10 Jendela Properties

1.6 Menciptakan Program Sederhana dengan Pemrograman Visual

Pemrograman visual berguna untuk membangun program-program yang memerlukan interaksi dengan pengguna. Untuk menciptakan, menyimpan, menjalankan, dan menghentikan program pertama ini, lakukan beberapa langkah berikut:

1.  Tutup projek yang dibuka.  Jika sebuah projek telah terbuka, Anda bisa menutupnya dengan menyeleksi File > Close Solution.

2.   Ciptakan projek baru. Untuk menciptakan sebuah aplikasi Windows Forms baru untuk program, Anda bisa memilih File > New Project untuk menampilkan dialog New Project (Gambar 1.11). Pilih Windows Forms Application. Berikan nama projek ProgramSederhana (misalnya) dan klik OK.

3. Simpan projek. Anda harus menetapkan direktori di mana projek akan disimpan. Untuk menetapkan direktori pada Visual Studio, Anda bisa memilih File > Save All.

4.  Tetapkan teks pada batang judul Form. Teks pada batang judul Form ditentukan oleh properti Text (Gambar 1.12). Jika jendela Properties tidak terbuka, klik ikon properties pada toolbar atau pilih View > Other Windows > Properties Window. Pada kotak teks di sisi kanan properti Text, ketikkan Program Sederhana dan tekan kunci ENTER. Batang judul Form akan terperbarui secara otomatis. Lihat Gambar 1.13.

Gambar 1.11 Dialog New Project

Gambar 1.12 Pengaturan properti Text pada jendela Properties

Gambar 1.13 Pembaruan teks pada batang judul

5.   Ubah ukuran Form. Anda bisa mengklik dan menggeret salah satu pengatur ukuran pada Form (kotak putih kecil yang muncul di sekeliling Form, seperti yang ditunjukkan pada Gambar 1.14). Dengan menggunakan mouse, Anda bisa memilih pengatur ukuran kanan-bawah dan menggeretnya ke bawah dan ke kanan sehingga membuat Form menjadi lebih besar.

Gambar 1.14 Mengatur ukuran Form

6.  Ubah warna latar Form. Properti BackColor dipakai untuk menetapkan warna latar belakang dari Form. Dengan mengklik BackColor pada jendela Properties akan menyebabkan tombol panah-bawah muncul di samping nilai properti (Gambar 1.15). Ketika diklik, tombol tersebut akan menampilkan beberapa pilihan. Pada kasus ini, tombol tersebut akan menampilkan tab untuk Custom, Web, dan System. Anda mengklik tab Custom untuk menampilkan palette (matriks warna). Anda kemudian dapat memilih salah satu dari warna yang tersedia, sehingga warna latar dari Form akan terperbarui. Lihat Gambar 1.16.

Gambar 1.15 Mengubah properti BackColor pada Form

Gambar 1.16 Form dengan nilai properti BackColor yang baru

7.  Tambahkan kendali Label pada Form. Jika Toolbox tidak terbuka, Anda bisa memilih View > Toolbox untuk menampilkan sederet kendali yang akan Anda gunakan untuk menciptakan program. Untuk tipe program yang akan diciptakan di sini, Anda akan menggunakan kendali-kendali yang ditempatkan pada grup All Windows Forms atau pada grup Common Controls. Selanjutnya, klik ganda (dua kali) pada kendali Label pada Toolbox. Tindakan ini akan menyebabkan sebuah Label muncul di pojok kiri-atas pada Form. Lihat Gambar 1.17. Anda juga dapat menggeret kendali dari Toolbox ke dalam Form. Hal itu dapat mempermudah Anda memposisikannya di manapun yang Anda inginkan. Label menampilkan teks label1 secara default. Warna latar Label sama dengan warna latar Form. Ketika sebuah kendali ditambahkan pada Form, properti BackColor dari kendali tersebut ditetapkan sama dengan properti BackColor dari Form. Anda dapat mengubahnya dengan mengatur properti BackColor dari kendali tersebut.

Gambar 1.17 Menambahkan sebuah Label pada Form

8.  Mengatur tampilan Label. Ketika Anda mengklik Label, propertinya akan muncul pada jendela Properties. Properti Text dari Label menentukan teks yang akan ditampilkan. Masing-masing Form dan Label memiliki properti Text masing-masing. Anda bisa menetapkan properti Text dari Label menjadi Selamat Datang ke Pemrograman C#!. Label akan menata secara otomatis agar teks yang diketikkan dapat ditampilkan pada satu baris. Secara default, properti AutoSize bernilai false, sehingga Anda dapat mengatur-ulang ukuran Label secara mandiri. Lihat Gambar 1.18.

Gambar 1.18 GUI setelah Form dan Label diatur sendiri

9.  Atur ukuran font pada Label. Untuk mengubah jenis font dan tampilan teks pada Label, Anda bisa memilih nilai dari properti Font, yang menyebabkan sebuah tombol ellipsis muncul di samping nilai properti (Gambar 1.19).

Gambar 1.19 Jendela Properties yang menampilkan properti Font dari Label

Ketika tombol ellipsis tersebut diklik, sebuah dialog Font akan tampil (Gambar 1.20).  Anda dapat memilih nama font, gaya font (Light, Regular, Oblique, Bold, dan Bold Oblique) dan ukuran font pada dialog ini. Teks Sample menunjukkan pengaturan font yang diseleksi. Anda bisa memilih Segoe UI, yang merupakan font yang direkomendasikan Microsoft untuk antarmuka pengguna. Jika teks pada Label tidak cukup untuk satu baris, maka akan dirangkum pada baris berikutnya.

Gambar 1.20 Dialog Font

10.  Tambahkan sebuah PictureBox pada Form. Kendali PictureBox dipakai untuk menampilkan citra. Proses yang terlibat pada langkah ini sama dengan pada Langkah 7. Anda perlu menggeretnya ke Form. Lihat Gambar 1.21. Anda menempatkan PictureBox tersebut di bawah Label.

Gambar 1.21 Menyisipkan dan menyejajarkan sebuah PictureBox

11.  Sisipkan citra. Anda bisa mengklik PictureBox untuk menampilkan properti-propertinya pada jendela Properties (Gambar 1.22).

Gambar 1.22 Properti Image dari PictureBox

Klik tombol ellipsis yang ada di samping nilai properti untuk menampilkan dialog Select Resource (Gambar 1.23), yang dipakai untuk mengimpor file, seperti citra, untuk digunakan pada program. Selanjutnya, klik OK.

Gambar 1.23 Dialog Select Resource untuk memilih sebuah citra untuk PictureBox

Anda menggunakan crypto22.jpg. Citra ditampilkan pada dialog Select Resource (Gambar 1.24). Klik OK untuk menggunakan citra tersebut.

Gambar 1.24 Dialog Select Resource yang menampilkan citra yang akan digunakan

Untuk menskalakan citra sesuai dengan ukuran PictureBox, Anda bisa mengubah properti SizeMode menjadi StretchImage (Gambar 1.25). Anda bisa mengatur-ulang ukuran PicturBox, membuatnya lebih besar (Gambar 1.26).

Gambar 1.25 Menskalakan citra agar sesuai dengan ukuran PictureBox

Gambar 1.26 PictureBox menampilkan citra

12.  Jalankan projek. Anda bisa memilih Debug > Start Debugging untuk menjalankan projek, seperti diperlihatkan pada Gambar 1.27. Hasil program yang dijalankan ditampilkan pada Gambar 1.28.

Gambar 1.27 Menjalankan projek

Gambar 1.28 Hasil program yang telah dijalankan