PRAKTIKUM 1 PENGENALAN DASAR PEMROGRAMAN VISUAL

(1)

PRAKTIKUM 1

PENGENALAN DASAR PEMROGRAMAN VISUAL

A. Tujuan

- Mengenal Code Editor C#

- Mengenal Integrated Development Environment (IDE) Visual Studio - Memahami struktur project Visual C#

- Mampu membangun Graphical User Interface (GUI) menggunakan Visual Studio

B. Code Editor

Code editor yang digunakan dalam praktikum pemrograman visual yaitu : Microsoft Visual Studio 2013 Community

Adapun code editor alternatif C# lain yaitu - SharpDevelop

- MonoDevelop C. Persyaratan Sistem

1. Kebutuhan hardware:

 Minimum 1.6 GHz atau lebih cepat untuk processor

 1 GB RAM (1.5 GB jika dijalankan pada virtual machine)

 20 GB hard disk untuk installasi-nya

 Minimum kecepatan hard disk 5400 RPM

 Video card yang bisa menjalankan DirectX 9 pada resolusi 1024 x 768 atau lebih

2. Sistem Operasi yang didukung

 Windows 8.1 (x86 and x64)

 Windows 8 (x86 and x64)

 Windows 7 SP1 (x86 and x64)

 Windows Server 2008 R2 SP1 (x64)

 Windows Server 2012 (x64)

D. Uraian Materi

1. Tentang Pemrograman C#

Pada tahun 2000 Microsoft meluncurkan bahasa pemrograman baru yang diberi nama C# Programming Language. C# dikembangkan oleh Microsoft oleh tim yang dipimpin oleh Anders Hejlsberg dan Scott Wiltamuth. C# memiliki kesamaan bahasa dengan C, C++, Pascal, dan Java, sehingga memudahkan developer yang sudah terbiasa dengan bahasa C untuk menggunakannya, C#

(2)

mengambil fitur-fitur terbaik dari ketiga bahasa tersebut dan juga menambahkan fitur-fitur baru. C# adalah bahasa pemrograman Object Oriented dan memiliki6class library yang sangat lengkap yang berisi prebuilt component sehingga memudahkan programer untuk men-develop program lebih cepat. C#

juga distandarkan oleh Ecma International pada bulan desember 2002. Dengan C#

dapat dibuat bermacam aplikasi seperti aplikasi console, aplikasi windows form, aplikasi Web, aplikasi Web services, dan aplikasi untuk mobile device. Jadi cukup belajar satu bahasa saja tapi sudah dapat digunakan untuk mengembangkan berbagai macam aplikasi.

2. Variabel, Tipe Data dan Operator pada bahasa C#

2.1. Variabel

Variable adalah nama dari suatu lokasi di memori yang digunakan untuk menyimpan data sementara. Variable diberi nama tertentu yang menunjukkan domain yang diwakilinya. Pada pemrograman visual nama variabel komponen/kontrol yaitu pada properti (name). Dalam memberikan nama variable ada beberapa ketentuan yang harus diperhatikan yaitu:

a. Panjang karakter nama variable tidak dibatasi

b. Nama variable harus diawali dengan huruf, tanda garis bawah(underscore_) atau tanda $. Selanjutnya dapat diikuti oleh karakter lain selain operator(*,- ,+), dengan kata lain variable dapat diawali dengan karakter khusus kecuali operator.

c. Tidak diperbolehkan menggunakan kata kunci (keyword) yang digunakan pada C# (contoh: if, for, while, dll)

d. Bersifat case sensitive (membedakan huruf besar dan huruf kecil) e. Penulisan variable tidak boleh menggunakan spasi

f. Syntax Penulisan variable harus diawali dengan tipe data terlebih dahulu karena data yang tersimpan dalam variable harus memiliki tipe tertentu sebelum digunakan dalam aplikasi.

2.2. Tipe Data

Tipe data merupakan jenis data yang digunakan pada program untuk dioperasikan.

Pada C# terdapat dua jenis tipe data, yaitu :

(3)

a. Tipe data dasar misalkan integer, float, byte, dan sebagainya.

b. Tipe data reference misalkan object dan delegates.

Referenced type didefinisikan dengan menggunakan class. C# mempunyai 13 tipe data dasar yang ditunjukan pada table dibawah ini

Tipe Data Keterangan

Bool Merepresentasikan nilai true/false Byte 8-bit unsigned integer

Char Character

Decimal Tipe data untuk bilangan desimal Double Double-precision floating point Float Single-precision floating point Int Integer

Long Long Integer Sbyte 8-bit signed integer Short Short integer Uint Unsigned integer Ulong Unsigned long integer Ushort Unsigned short integer

Tipe-tipe data yang ada diatas disebut dengan simple types 2.3. Operator

Operator digunakan untuk mengombinasikan suatu data dengan data lain.

Biasanya operator digunakan pada data yang tipenya dapat dikalkulasi seperti data yang bersifat integral atau floating point. Pengkalkulasian data melalui operator ada berbagai macam cara tergantung tipe dari data tersebut. Berikut ini adalah jenis-jenis operator:

2.3.1. Operator Aritmatika

Operator aritmatika digunakan untuk perhitungan matematis seperti dalam penambahan, pengurangan, perkalian, dan pembagian

Simbol Keterangan

+ operator penjumlahan - operator pengurangan

* operator perkalian / operator pembagian

(4)

% operator sisa bagi (modulus) 2.3.2. Operator Relasi

Operator relasi digunakan untuk membandingkan dua buah niai, dan operator relasi akan memberikan nilai benar atau salah (true,false).

Simbol Keterangan

< kurang dari

<= kurang dari sama dengan

> lebih dari

>= lebih dari sama dengan

== sama dengan 2.3.3. Operator Logika

Operator logika digunakan untuk menggabungkan dua buah ungkapan kondisi menjadi sebuah ungkapan kondisi. Oleh karena itu biasanya operator logika digunakan bersamaan dengan percabangan (IF).

Simbol Keterangan

! NOT

&& Short-circuit AND

|| Short-circuit OR

3. Membuat Project Baru

Project merupakan kerangka dasar aplikasi yang sangat menentukan jenis aplikasi yang akan dibuat. Untuk memulai pembuatan project, ikuti langkah- langkah berikut:

a. Jalankan Visual Studio 2013 Community.

b. Klik menu File > New Project, atau melalui ikon New Project, atau melalui kombinasi tombol Ctrl+N.

(5)

c. Pada kotak dialog New Project, pilih Visual C# pada bagian jenis project.

Pilih Templates Windows Forms Application, kemudian masukan judul program dan solution lalu klik OK.

Keterangan

1 Template/Jenis project

2 Kumpulan project yang tersedia pada template Visual C# yang didukung .NET Framework 4.5

3 Nama program/project

4 Location : Lokasi project akan disimpan 5 Nama solution : kumpulan dari project

d. Setelah memilih template Windows Forms Application kita akan dihadapkan dengan tampilan seperti berikut

Keterangan

(6)

1. Form Design : Tempat mendesain user interface menggunakan objek kontrol yang ada di Toolbox.

2. Solution Explorer : Menampilkan susunan file-file yang digunakan dalam pembuatan proyek yang tersusun secara rapi sehingga memudahkan developer dalam pembuatan aplikasi.

3. Toolbox : Kumpulan kontrol/komponen yang dilambangkan dengan icon tersedia dalam merancang user interface (UI).

4. Jendela Properties: untuk memberikan informasi mengenai objek yang sedang aktif, nama objek yang sedang aktif

5. Tab Properties : Digunakan untuk mengatur properti dari form dan kontrol yang ingin diedit seperti mengganti nama komponen, warna teks dan lain – lain.

6. Tab Event : Digunakan untuk memberi kontrol/komponen suatu perintah atau kejadian sesuai keadaan.

4. Mengenal Komponen/Kontrol, Properties, Events dan Methods

Kontrol adalah objek objek visual yang terdapat pada toolbox dan ditampilkan pada layar seperti TextBox, ComboBox, dan DateTimePicker, sedangkan komponen adalah objek objek yang tidak tampak pada layar seperti Timer.

Jendela Properties berfungsi untuk memberikan informasi mengenai objek yang sedang aktif, nama objek yang sedang aktif dapat dilihat pada bagian atas jendela Properties, contoh pada gambar disamping nama objek aktif yaitu Form1. Properties juga digunakan untuk merubah nilai property atau karakteristik dari objek yang aktif.

Komponen-kompoen atau kontrol-kontrol Visual Studio C# 2013 mempunyai property dan event yang berbeda untuk satu dan lainnya, tetapi ada juga yang memiliki property dan event yang sama.

Property : Setiap komponen di dalam pemrograman Visual Studio C# 2013 dapat diatur propertinya sesuai dengan kebutuhan aplikasi. Property yang tidak boleh dilupakan pada setiap komponen adalah “Name”, yang berarti nama variabel (komponen) yang akan digunakan dalam scripting. Properti “Name” ini hanya bisa diatur melalui jendela Property.

(7)

Event merupakan salah satu bagian komponen yang terdapat di dalam properties pada IDE Microsoft Visual C#.Event adalah sebuah perintah atau kejadian yang akan di eksekusi oleh program saat algoritma baris code yang kita buat di jalankan oleh user.

Tabel komponen umum

Nama Kontrol/Komponen Keterangan

Panel Berguna untuk menyatukan beberapa bagian dari komponen.

FlowLayoutPanel Sebuah panel dengan penataan secara berurutan dari kiri kanan dan disesuaikan dengan besar panel

GroupBox Komponen untuk mengelompokkan beberapa control yang memiliki fungsi yang mirip atau berhubungan dalam gu

Label Berfungsi sebagai penjelas pada interface program

TextBox Area dimana text ditampilkan oleh program atau user bisa mengetik text menggunakan keyboard RichTextBox Suatu komponen yang mirip seperti TextBox

namun lebih banyak dapat menampung text dibandingkan TextBox

Button Komponen yang digunakan untuk membuat

tombol yang akan melakukan sebuah perintah ketika di klik

RadioButton Komponen yang digunakan untuk memilih hanya 1 pilihan

CheckBox Sebuah kotak kecil dimana kita dapat mengosongkannya atau mengisinya dengan lambing centang dan biasa digunakan untuk memilih lebih dari 1 pilihan

ComboBox Sebuah komponen yang berisi sebuah daftar dimana kita dapat memilih salah satu nilai tersebut

Berikut ini daftar jenis properti,event,dan method komponen/kontrol yang sering digunakan pada toolbox C#

Nama Kontrol/Komponen Keterangan

Pan el

Properties

AutoScoll Menampilkan scroll bar ketika isi dari panel melebihi batas

BorderStyle Mengatur border dari panel itu sendiri BackColor Mengubah warna background panel ForeColor Mengubah warna tulisan pada panel Font Mengubah bentuk, ukuran, dan gaya tulisan Event

Click Event yang muncul ketika mengklik panel MouseHover Event yang muncul ketika mouse melewati panel

tersebut

Method ^Visible() Menampilkan / menghilangkan panel Hide() Menyembunyikan panel

(8)

Show() Menampilkan panel

ToString() Mengubah value yang ada di panel menjadi tipe data String

SetBounds() Mengubah ukuran FlowLayoutPanel

Flo wLayo u tPan el

Properties

BackColor Mengubah warna background ForeColor Mengubah warna tulisan

Size Mengubah ukuran pada FlowLayoutPanel Location Mengatur letak FlowLayoutPanel

Background

Image Mengubah background dengan gambar

Event

MouseEnter Event yang dijalankan ketika mouse memasuki area panel

MouseLeave Event yang dijalan ketika mouse meninggalkan area panel

Method

BrintToFront() Menaruh letak komponen diatas komponen lain SendToBack() Menaruh letak komponen dibawah komponen

lain

Dispose() Untuk menutup komponen Show() Untuk menampilkan komponen Hide() Untuk menyembunyikan komponen

Grou p Bo x

Properties

BackColor Mengubah warna background GroupBox ForeColor Mengubah warna tulisan

Size Mengubah ukuran pada GroupBox

Font Mengubah bentuk, ukuran, dan gaya tulisan Text Mengubah judul tulisan pada GroupBox

Event

MouseHover Event yang terjadi pada saat pointer mouse diletakkan tepat dikontrol.

MouseLeave Event yang terjadi pada saat pointer mouse meninggalkan atau keluar dari kontrol.

Method

SetBounds(Int 32, Int32, Int32, Int32)()

mengatur letak dan ukuran yang lebih spesifik

IsInputKey() Untuk menentukan apakah key yang spesifik adalah sebuah input key atau spesial key yang memerlukan pre proses.

IsInputChar() Untuk menentukan jika sebuah karakter adalah sebuah input karakter yang diatur kontrol.

GetScaledBou nds()

Untuk mengambil batas – batas sesuai dengan skala control

SelectNextCon trol()

Untuk mengaktifkan kontrol selanjutnya

Label

Properties

Size Mengubah ukuran

Font Mengubah bentuk, ukuran, dan gaya tulisan Text Mengubah judul tulisan pada Label

Event

MouseEnter Event yang terjadi ketika mouse bergerak sekitar komponen

MouseLeave Event yang dijalan ketika mouse bergerak menjauhi komponen

(9)

Method

Show() Untuk menampilkan komponen

Hide() Untuk menyembunyikan komponen agar tidak terlihat pada layar

CreateGraphic s()

Untuk membuat suatu grafik pada komponen.

ResetText() Untuk membuat text menjadi default pada komponen.

TexB o x

Properties

Font Mengubah bentuk, ukuran, dan gaya tulisan MultiLine Textbox dapat menampilkan banyak line ReadOnly Membuat textbox tidak dapat diedit(disable)

Event

Click Event yang terjadi ketika textbox diklik

Keypress Event yang terjadi ketika keyboard ditekan atau dieksekusi terlebih dahulu sebelum mengeluarkan output

Method

Clear() Untuk menghapus semua text pada textbox Copy() Untuk mengcopy isi pada textbox ke clipboard AppendText() Untuk menambah teks kedalam text sebelumnya

dalam textbox

Cut() Untuk memindahkan isi yang dipilih dalam textbox kedalam clipboard

Rich TexB o x

Properties

FontSize Gets (Mendapatkan) atau Sets (menetapkan) ukuran font

FontStyle Gets (Mendapatkan) atau Sets (menetapkan) gaya font

IsEnabled Gets (Mendapatkan) atau Sets (menetapkan) nilai yang menunjukkan unsur (komponen) ini diaktifkan pada user interface (UI). (Inherited dari UIElement)

IsVisible Mendapat nilai yang menunjukkan apakah elemen ini terlihat dalam antarmuka pengguna (UI) (Inherited from UIElement)

Event

KeyDown Terjadi ketika tombol ditekan sementara fokus pada elemen ini (Inherited dari UIElement) Untuk menghapus semua text pada textbox KeyUp Terjadi ketika tombol dilepaskan sementara

fokus pada elemen ini (Inherited dari UIElement)

Method

GetValue() Mengambil nilai yang ada pada RichTextBox ini (Warisan dari DependencyObject)

SelectAll() Memilih semua konten dari text editing control (RichTextBox) (Inherited dari TextBoxBase) Equals() Menentukan apakah DependencyObject

(misalnya text yang diambil) diberikan setara dengan DependencyObject saat ini.

B ut to n B ut to n

Properties ^BackColor Mengubah warna background ForeColor Mengubah warna tulisan

(10)

Font Mengubah bentuk, ukuran, dan gaya tulisan Text Mengubah teks pada button

Event Click Event yang terjadi ketika button diklik Method Onclick() Menjalankan method onclick

Focus() Mengatur fokus input ke kontrol

Rad io Bu tto n

Properties

Checked Menunjukkan apakah radiobutton sedang dipilih Location Menunjukkan letak radiobutton

Text Mengubah teks pada radiobutton

Event

CheckedChan ged

Event yang terjadi ketika radiobutton dipilih atau tidak

BackColorCha nged

Event yang terjadi ketika warna background berubah.

Method

Ch eckB o x

Properties

Checked Menunjukkan apakah checkbox dipilih atau tidak Font Mengubah bentuk, ukuran, dan gaya tulisan Text Menjelaskan teks disamping checkbox

Event

LocationChan ged

Event yang muncul ketika mengubah posisi dari CheckBox

SizeChanged

Event yang muncul ketika merubah ukuran CheckBox

Method

Equals() Untuk mencocokan isi Text yang ada di CheckBox

Co m b o Bo x

Properties

Items Property pada combo box yang digunakan untuk mengedit item dalam combo box

Font Mengubah bentuk, ukuran, dan gaya tulisan

Event

SelectedIndex Changed

Event yang terjadi ketika item dipilih pada combo box.

SizeChanged

Event yang muncul ketika ukuran ComboBox berubah

Method ^Show() Untuk menampilkan combobox pada panel Close() Untuk menutup comboxbox

(11)

E. Praktikum

1. Membuat Program Kalkulator Sederhana

a. Buat project baru atau lanjutkan project pertama anda sebelumnya.

b. Tambahkan tiga buah kontrol Label, tiga buah TextBox, dan 1 buah Button ke Form. Caranya klik ganda kontrol tersebut pada Toolbox atau men-drag langsung kontrol ke Form seperti gambar dibawah ini :

c. Atur Properti setiap komponen/objek kontrol seperti berikut ini : No Komponen Properti Nilai Properti

1 Label Text Nilai 1

2 Label Text Nilai 2

3 Label Text Hasil

4 TextBox Name

Text (Kosongkan)

txtNil1

5 TextBox Name

Text (Kosongkan)

txtNil2

6 TextBox Name

Text (Kosongkan) ReadOnly

txtHasil

True

7 Button Name

Text

btnHitung Hitung

8 Form Text Program Kalkulator Sederhana

(12)

d. Klik 2x objek Button atau pada jendela properties pilih ikon (event), kemudian pada kategori Action, klik 2x pada Click. Kemudian ketikkan listing program dibawah ini

private void btnHitung_Click(object sender, EventArgs e) {

txtHasil.Text = (Int32.Parse(txtNil1.Text) + Int32.Parse(txtNil2.Text)).ToString();

}

e. Jalankan aplikasi dengan menekan tombol F5 (di keyboard), atau melalui ikon Start Debugging di toolbar, atau melalui menu Debug > Start Debugging.

2. Membuat Program Konversi Suhu

a. Buatlah project baru pada solution yang sudah ada dengan judul konversi b. Desainlah interface program seperti gambar dibawah ini

c. Atur Properti setiap komponen seperti berikut ini

No Komponen Properti Nilai Properti Event

1 Label Text Suhu Celcius

- 2 Label Text Suhu Fahrenheit

3 Label Text Suhu Kelvin

4 TextBox Name Text

txtCelcius (Kosongkan)

TextChanged

5 TextBox Name Text ReadOnly

txtFahrenheit (Kosongkan) True

- 6 TextBox Name

Text ReadOnly

txtKelvin (Kosongkan) True

7 Button Name

Text

btnC Clear

Click

(13)

d. Masukan kode listing seperti berikut untuk kontrol txtCelcius

private void txtCelcius_TextChanged(object sender, EventArgs e) {

double suhu = Convert.ToDouble(txtCelcius.Text);

txtFahreinheit.Text = (suhu*9/5 + 32).ToString();

txtReamur.Text = (suhu + 273.15).ToString();

}

e. Masukan kode listing seperti berikut untuk kontrol btnC

private void btnC_Click(object sender, EventArgs e) {

txtCelcius.Clear();

txtFahreinheit.Clear();

txtReamur.Clear();

}

F. Tugas Praktikum

1. Buatlah program kalkulator sederhana dengan user interface seperti gambar dibawah ini

(14)

PRAKTIKUM 2

OOP DASAR METHOD DAN CLASS

A. Tujuan -

B. Uraian Materi

(15)

DAFTAR PUSTAKA

http://jasontheodorus.blogspot.co.id/2014/03/c-components-properties-methods- and.html