CHAPTER #7 APLIKASI WINDOWS FORM 2 (KONTROL- … · picGambar.Image = new Bitmap(open.FileName);}} catch (Exception) ... Sedangkan untuk mengambil nilai dari item yang kita pilih,

Modul IT201 Pemrograman VisualFakultas Teknologi Informasi – Universitas Kristen Satya Wacana

CHAPTER #7

APLIKASI WINDOWS FORM 2 (KONTROL-KONTROL TINGKAT LANJUT)

Kita sudah mengenal beberapa kontrol-sederhana yang ada pada visual C# dan bagaimana cara mempergunakannya. Tentunya kita sudah tidak sabar lagi untuk mengenal beberapa kontrol lain yang lebih keren dan mencoba mempergunakannya untuk menambah kemampuan aplikasi yang akan kita buat. Penasaran? Ayo kita menuju ke pembahaan kontrol-kontrol tingkat lanjut pada Visual C#...

7.1 PictureBox dan OpenFileDialogPictureBox merupakan kontrol yang digunakan untuk menampilkan gambar.

Kontrol PictureBox memiliki properties Image yang akan digunakan untuk menentukan file gambar yang akan ditampilkan dalam PictureBox dengan memilih properties Image, kemudian klik pada konfigurasi […] di sebelah kanan properties Image, maka akan muncul jendela import yang digunakan untuk memasukkan file gambar seperti pada Gambar 7.1.

Pada jendela yang terlihat di Gambar 7.1 tersebut, kita dapat mengambil gambar dari komputer ke dalam kontrol PictureBox. Untuk melakukan hal ini, tekan tombol Import… untuk mengambil file gambar yang ada pada direktori komputer kita.

Gambar 7.1 Jendela Import File Gambar

Ada beberapa properties yang sering digunakan dalam kontrol PictureBox, properties tersebut antara lain:

1. ImageMenentukan file gambar yang akan ditampilkan dalam kontrol PictureBox.

2. SizemodeMengatur ukuran tampilan file gambar dalam kontrol PictureBox. Terdapat beberapa nilai yang bisa kita pilih, yaitu:

a. NormalNilai standar dan gambar yang ditampilkan sesuai dengan ukuran normalnya. Fokus gambar dimulai dari bagian kiri atas.

b. StrecthImageMenampilkan file gambar sesuai dengan ukuran kontrol PictureBox.

c. CenterImageMenempatkan file gambar pada posisi tengah dalam kontrol PictureBox. Ukuran gambar normal.

Jasson Presttiliano, ST; Dian W. Chandra, S.Kom; Yos Richard Beeh, ST; 1


d. AutoSizeMengatur kontrol PictureBox mengikuti ukuran file gambar.

Jika kita menggunakan properties image secara manual, tentunya hanya dapat melihat satu macam gambar saja pada saat aplikasi dijalankan. Untuk dapat membuka sebuah dialog untuk memilih file yang akan ditampilkan di dalam PictureBox pada saat aplikasi dijalankan maka kita mempergunakan kontrol OpenFileDialog.

Dengan menggunakan kontrol OpenFileDialog maka kita dapat membuka file gambar yang kita inginkan untuk kemudian ditampilkan dalam kontrol PictureBox. Selain itu kontrol ini juga dapat membuka file-file jenis lainnya sesuai dengan properties Filter pada file tersebut dan kontrol apa yang akan menampung isi dari file tersebut. Properties yang sering digunakan dari kontrol ini antara lain :

1. FileNameMenentukan lokasi dan nama file yang akan dibuka oleh kontrol OpenFileDialog.

2. FilterMenentukan jenis file yang dapat dibuka oleh kontrol OpenFileDialog.

Kali ini kita akan membuat sebuah aplikasi untuk memilih gambar dari dalam direktori komputer kita dan kemudian membukanya dalam sebuah PictureBox. Untuk itu diperlukan sebuah kontrol PictureBox ditengah-tengah form, kemudian terdapat sebuah kontrol Button untuk memicu terbukanya kontrol OpenFileDialog. Untuk itu kita dapat mendesain tampilan antarmuka dari aplikasi ini seperti yang terlihat pada Gambar 7.2.

Gambar 7.2 Antarmuka Aplikasi Memilih Gambar

Konfigurasi dari kontrol-kontrol tersebut dapat kita lihat pada Tabel 7.1.

Tabel 7.1 Properties Aplikasi Memilih Gambar

Kontrol Properties NilaiPictureBox1 Name

SizemodepicGambarStretchImage

OpenFileDIalog1 Name openButton1 Name

TextbtnOpenOpen

Perhatikan kode 7.1 berikut yang merupakan kode program untuk membuka sebuah dialog dan memilih file yang ingin dibuka, ketika kita mengklik btnOpen. Kita menggunakan exception handling karena ada kemungkinan file yang akan kita buka corrupt atau rusak sehingga tidak dapat dibuka pada PictureBox.



Kode 7.1

try{

OpenFileDialog open = new OpenFileDialog();open.Filter = "Image Files(*.jpg; *.jpeg; *.gif;

*.bmp)|*.jpg; *.jpeg; *.gif; *.bmp";if (open.ShowDialog() == DialogResult.OK){

picGambar.Image = new Bitmap(open.FileName);}

}catch (Exception){

throw new ApplicationException("Failed loading image");}

Sedangkan kode selengkapnya dari aplikasi memilih gambar ini dapat kita lihat pada Kode 7.2.

Kode 7.2

using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using System.Drawing;using System.Text;using System.Windows.Forms;

namespace ChoosePicture{ public partial class Form1 : Form { public Form1() { InitializeComponent(); }

private void btnOpen_Click(object sender, EventArgs e) { try { OpenFileDialog open = new OpenFileDialog(); open.Filter = "Image Files(*.jpg; *.jpeg; *.gif; *.bmp)|*.jpg; *.jpeg; *.gif; *.bmp"; if (open.ShowDialog() == DialogResult.OK) { picGambar.Image = new Bitmap(open.FileName); }

} catch (Exception) { throw new ApplicationException("Failed loading image"); } } }}

Apabila aplikasi ini dieksekusi, hasilnya adalah seperti pada Gambar 7.3 dan Gambar 7.4. Gambar 7.3 adalah jendela dialog yang muncul ketika kita mengklk tombol open. Pada bagian ini kita dapat memilih file gambar yang ingin kita tampilkan dalam PictureBox. Sedangkan Gambar 7.4 adalah hasil dari load picture.



Gambar 7.3 Jendela Dialog untuk Memilih Gambar dari Komputer

Gambar 7.4 Hasil Eksekusi Aplikasi Memilih Gambar

7.2 ComboBox dan ListBoxSebelumnya kita telah mempelajari CheckBox dan RadioButton yang berguna

untuk memberi pada user beberapa pilihan. Namun bila pilihan tersebut bersifat dinamis dan bisa bertambah atau berkurang sesuai dengan program yang diberikan, maka tampilan form akan terlihat kurang rapi karena banyaknya item yang tampil untuk memberikan suatu pilihan. Kini kita akan mengenal dua macam kontrol yang berguna untuk memilih juga, namun yang akan tampil hanyalah semacam TextBox, sehingga tidak memakan tempat. Kedua control tersebut adalah ComboBox dan ListBox.

Perbedaan mendasar dari ComboBox dan ListBox adalah pada bentuk dan banyaknya item yang dapat dipilih. Pada ComboBox, user dapat mengklik control ini sehingga muncul sebuah daftar item yang dapat dipilih dalam bentuk drop down (ditarik ke bawah) dan user hanya dapat memilih satu dari sekian banyak item yang ditawarkan. Sedangkan ListBox akan memunculkan daftar item yang dapat discroll ke atas maupun ke bawah, pada kontrol ini user dapat memilih lebih dari satu item.

Properties dan event yang sering dipergunakan pada kedua control ini adalah:1. property Items

Item yang dapat dipilih oleh user, untuk mengisi item secara langsung pada bagian dapat dilakukan seperti mengisi array, yaitu dengan mengklik tombol …



di samping kanan property ini (ada tulisan Collection), kemudian kita dapat mengisikan item-itemnya dipisahkan dengan tombol Enter pada keyboard.Untuk mengisikan item ini melalui program, maka perlu ditulis sebuah kode sebagai berikut untuk ComboBox maupun untuk ListBox (perlu diingat, item baru yang ditambahkan akan muncul di bawah item-item sebelumnya):

this.namaKontrol.Items.Add("nama item");

Sedangkan untuk mengambil nilai dari item yang kita pilih, kita dapat gunakan kode sebagai berikut (hanya berlaku jika yang dipilih hanya satu item saja):

string pilihan = (string)this.cmbBahasa.SelectedItem;

2. event SelectedIndexChangedEvent ini akan bereaksi pada saat kita mengubah pilihan pada ComboBox atau ListBox, sehingga tidak diperlukan pemicu lain seperti Button.

Khusus untuk ComboBox, terdapat sebuah property yang digunakan untuk memilih jenis ComboBox tersebut. Property tersebut bernama DropDownStyle, yang memiliki beberapa nilai sebagai berikut:

1. SimpleComboBox akan berlaku seperti layaknya sebuah TextBox, Pada mode ini, ComboBox tidak dapat menampilkan daftar item-item yang dapat dipilih.

2. DropDownComboBox dapat menampilkan item-item yang dapat dipilih, namun user masih dapat memasukkan teks secara manual sebagai pilihannya.

3. DropDownListComboBox dapat menampilkan item-item yang dapat dipilih, dan user hanya dapat memilih satu dari item-item yang ada di dalam daftar pilihan.

Sedangkan untuk ListBox, terdapat sebuah property yang digunakan untuk banyaknya pilihan yang dapat diambil dari ListBox tersebut. Property tersebut bernama SelectionMode, yang memiliki beberapa nilai sebagai berikut:

1. NoneTidak ada item yang dapat dipilih

2. OneHanya dapat memilih satu item

3. MultiSimpleDapat memilih lebih dari satu item dengan cara mengklik mouse item yang dipilih satu persatu atau menekan spasi untuk setiap pilihan yang kita inginkan.

4. MultiExtendedDapat memilih lebih dari satu item dengan menekan shift atau memblok item-item yang dipilih dengan menggunakan mouse.

Sebagai contoh kita akan membuat sebuah aplikasi yang menggunakan sebuah ComboBox yang itemsnya kita buat secara manual. Pada aplikasi ini, kita dapat memilih bahasa untuk ucapan terima kasih. Untuk tampilan bagi aplikasi ini dapat kita lihat pada Gambar 7.5.

Gambar 7.5 Antarmuka Aplikasi Ucapan Terima Kasih

Untuk membuat aplikasi tersebut diperlukan beebrapa kontrol dengan konfigurasi seperti yang tertera pada Tabel 7.2.



Tabel 7.2 Properties Aplikasi Ucapan Terima Kasih

Kontrol Properties NilaiLabel1 Name

TextlblBahasaBahasa:

Label2 NameTextFont.SizeFont.NameFont.Bold

lblTrims[Terima Kasih]12Tahomatrue

ComboBox1 NameDropDownStyleItem

cmbBahasaDropDownListIndonesiaInggrisMandarinJepangJermanSpanyol

Isi dari program ini cukup sederhana, bila yang dipilih adalah index ke-0 (Indonesia), maka lblTrims akan berubah menjadi terima kasih dalam bahasa Indonesia. Begitu pula kalau yang dipilih indeks lainnya, maka lblTrims akan berubah sesuai dengan bahasa yang dipilih pada cmbBahasa. Kali ini kita memiliki 6 macam item bahasa saja. Kode program selengkapnya dapat dilihat pada Kode 7.3.

Kode 7.3


namespace Thanks{ public partial class Form1 : Form { public Form1() { InitializeComponent(); } private void cmbBahasa_SelectedIndexChanged(object sender,

EventArgs e) { if (this.cmbBahasa.SelectedIndex == 0) //Indonesia { this.lblTrims.Text = "Terima Kasih"; } else if (this.cmbBahasa.SelectedIndex == 1) //Inggris { this.lblTrims.Text = "Thank You"; } else if (this.cmbBahasa.SelectedIndex == 2) //Jepang { this.lblTrims.Text = "Arigato"; } else if (this.cmbBahasa.SelectedIndex == 3) //Jerman { this.lblTrims.Text = "Danke"; } else if (this.cmbBahasa.SelectedIndex == 4) //Mandarin {



this.lblTrims.Text = "Xie Xie Ni"; } else if (this.cmbBahasa.SelectedIndex == 5) //Spanyol { this.lblTrims.Text = "Gracias"; } string pilihan = (string)this.cmbBahasa.SelectedItem; } }}

Hasil eksekusi dari beberapa kasus pada aplikasi ucapan terima kasih ini dapat dilihat pada Gambar 7.6.

Gambar 7.6 Hasil Eksekusi Aplikasi Ucapan Terima Kasih

7.3 DateTimePickerDatetimePicker adalah kontrol yang digunakan untuk masukan data berupa

tanggal atau waktu. Bentuknya yang seperti kalender akan memudahkan kita untuk memilih tanggal yang kita inginkan. Kontrol ini memiliki beberpa properties penting yang perlu kita ketahui, antara lain:

1. FormatMengatur bentuk data yang akan ditampilkan dalam kontrol. Format data yang dapat kita gunakan di antaranya:

a. LongTanggal dan waktu secara lengkap

b. ShortUntuk tanggal saja

c. TimeUntuk waktu saja

d. CustomDidefinisikan sendiri oleh pengguna

2. ValueMenyatakan nilai tanggal atau waktu yang sedang aktif pada kontrol DateTimePicker tersebut.

3. ShowupdownMengatur bentuk kontrol DateTimePicker sehingga bia mengubah nilai tanggal dengan menekan tombol up atau down yang disediakan kontrol tersebut.

4. CursorMenentukan jenis kursor mouse saat berada tepat di atas kontrol.

Di samping properties ada sebuah event khusus yang dapat digunakan untuk memicu reaksi dari program, event khusus tersebut bernama ValueChanged, event ini bereaksi ketika nilai atau value dari kontrol DatetimePicker diubah oleh pengguna.



Selain itu, ada beberapa method yang menyertai property value, method-method tersebut berhubungan dengan operasi nilai tanggal atau waktu. Method-method tersebut antara lain:

1. AddDays(int nilai)Menambah hari dengan nilai tanggal yang ada pada property value.

2. AddMonths(int nilai)Menambah bulan dengan nilai tanggal yang ada pada property value.

3. AddYears(int nilai)Menambah tahun dengan nilai tanggal yang ada pada property value.

4. AddHours(int nilai)Menambah jam dengan nilai waktu yang ada pada property value.

5. AddMinutes(int nilai)Menambah menit dengan nilai waktu yang ada pada property value.

6. AddSeconds(int nilai)Menambah detik dengan nilai waktu yang ada pada property value.

Kali ini kita akan mambuat sebuah aplikasi untuk simulasi peminjaman buku di sebuah perpustakaan. Jadi kita akan membuat sebuah form untuk menset tanggal peminjaman dan tanggal pengembalian sebuah buku. Aplikasi ini memungkinkan saat kita memasukkan tanggal pinjam, otomatis tanggal pengembalian akan diset dengan aturan tanggal pinjam ditambah 7 hari.

Untuk mewujudkan aplikasi perpustakaan sederhana tersebut, kita dapat mendesain tampilan dari program tersebut seperti yang terlihat pada Gambar 7.7.

Gambar 7.7 Antarmuka Aplikasi Perpustakaan Sederhana

Untuk mendesain seperti pada Gambar 7.7, kita perlu mengatur konfigurasi setiap kontrol yang ada seperti yang tertera pada Tabel 7.3.

Tabel 7.1 Properties Aplikasi Perpustakaan Sederhana


TextlblKodeKode Buku:

Label2 NameText

lblPinjamTanggal Pinjam:

Label3 NameText

lblKembaliTanggal Kembali:

TextBox1 Name txtKodeDateTimePicker1 Name

ValueFormat

dtpPinjamTanggal SekarangLong

DateTimePicker2 NameValueFormat

dtpKembaliTanggal SekarangLong

Button1 NameText

btnSimpanSimpan

Untuk mengubah value tanggal pada dtpKembali, kita perlu memberi event ValueChanged pada dtpPinjam. Event ini akan memicu perubahan value pada dtpKembali Kode program tersebut bisa dilihat pada Kode 7.4.



Kode 7.4

private void dtpPinjam_ValueChanged(object sender, EventArgs e){

this.dtpKembali.Value = this.dtpPinjam.Value.AddDays(7);}

Kode selengkapnya dari aplikasi perpustakaan sederhana ini bisa kita lihat pada Kode 7.5.

Kode 7.5


namespace PerpusSederhana{ public partial class Form1 : Form { public Form1() { InitializeComponent(); }

private void dtpPinjam_ValueChanged(object sender, EventArgs e) { this.dtpKembali.Value = this.dtpPinjam.Value.AddDays(7); }

private void btnSimpan_Click(object sender, EventArgs e) { string pesan; pesan = "Buku dengan Kode:"; pesan = pesan + this.txtKode.Text; pesan = pesan + "\nPinjam:"; pesan = pesan + this.dtpPinjam.Value; pesan = pesan + "\nKembali:"; pesan = pesan + this.dtpKembali.Value; MessageBox.Show(pesan); } }}

Hasil eksekusi dari aplikasi ini bisa kita lihat pada Gambar 7.8 dan Gambar 7.9. Pada Gambar 7.8 kita dapat melihat saat dtpPinjam diubah, yaitu akan muncul tampilan semacam kalender yang bisa kita pilih tahun, bulan dan tanggalnya. Sedangkan perubahan akan terjadi secara otomatis pada dtpKembali begitu kita selesai memilih tanggal pada dtpPinjam.

Bila kita mengklik tombol Simpan, maka akan tampil pesan berupa informasi peminjaman dan pengembalian buku dengan kode yang telah kita masukkan dalam txtKode. Karena format data pada dtpPinjam dan dtpKembali bernilai Long, maka waktu peminjaman juga akan ditampilkan. Hal ini dapat kita lihat pada Gambar 7.9.



Gambar 7.8 Bentuk Kalender pada DateTimePicker

Gambar 7.9 Hasil Eksekusi Aplikasi Perpustakaan Sederhana

7.4 TimerKadangkala kita melihat ada aplikasi yang sebuah komponennya berjalan seiring

waktu, misalnya program untuk menghitung mundur, atau program stopwatch. Sebuah control yang dapat melakukan hal ini adalah Timer. Timer adalah sebuah kontrol yang yang berjalan seiering dengan interval waktu yang diberikan oleh pengguna. Sebuah Timer dapat mengatur kerja sebuah program dalam satuan waktu tertentu.

Untuk itu kita kenali dulu beberapa properties yang sering dipakai dalam Timer:1. Interval

Berguna untuk satuan waktu bagi timer untuk melakukan event Tick. Dihitung dalam satuan milidetik atau 1/1000 detik. Jadi bila ingin timer berjalan pada waktu 1 detik, berarti kita harus mengisi nilai dari property ini sebesar 1000, sedangkan bila ingin 1 menit, maka kita dapat mengisinya sebesar 60000.

2. EnabledBila variabel ini diset true, maka event Tick pada Timer akan mulai berjalan. Sedangkan bila property ini diset false, maka event Tick pada Timer tersebut tidak berjalan.

Timer memiliki event khusus yang bernama Tick, di mana event ini akan terpicu setiap satuan waktu tertentu yang diberikan dalam nilai pada property Interval. Event Tick ini akan terus berjalan selama property Enabled pada Timer tersebut bernilai True. Jadi prinsipnya mirip dengan perulangan while.

Kali ini kita akan mencoba jalannya Timer tersebut dengan membuat sebuah program untuk menghitung mundur waktu yang telah dimasukkan oleh user. Bila waktu habis, maka Timer akan berhenti dan muncul sebuah pesan bahwa waktu sudah habis. Untuk aplikasi hitung mundur sederhana ini, kita hanya akan menggunakan satu masukan yaitu detik. Kita bisa mengendalikan timernya dengan tombol Start dan Stop, bila waktu sudah habis, maka kita dapat me-reset waktu dengan menekan tombol Reset.

Untuk mewujudkan aplikasi tersebut, lihat Gambar 7.10 sebagai rancangan antarmuka dari Aplikasi Hitung Mundur Sederhana tersebut.



Gambar 7.10 Antarmuka Aplikasi Hitung Mundur Sederhana

Untuk mendesain aplikasi seperti pada Gambar 7.10, kita perlu mengatur konfigurasi setiap kontrol yang ada seperti yang tertera pada Tabel 7.4.

Tabel 7.4 Properties Aplikasi Hitung Mundur Sederhana


TextFont.SizeFont.NameFont.BoldTextAllignment

lblDetik028Arial BlacktrueMiddle Center

Label2 NameText

lblInfoMasukan Waktu (Detik):

TextBox1 Name txtDetikButton1 Name

TextbtnStartStart

Button2 NameText

btnStopStop

Button3 NameText

btnResetReset

Timer1 NameIntervalEnabled

tmrHitung1000false

Kode program untuk menjalankan aplikasi ini, pertama-tama, kita harus memiliki sebuah variabel global, misalnya kita beri nama detik. Detik ini akan menjadi variabel yang terus menerus berubah. Ketika tombol start ditekan, maka lblDetik akan berubah dan variabel detik diisi oleh angka yang kita masukkan dalam txtDetik. Perhatikan Kode 7.6 untuk kode pada btnStart.

Kode 7.6

private void btnStart_Click(object sender, EventArgs e){

this.lblDetik.Text = this.txtDetik.Text;this.detik = Convert.ToInt32(this.txtDetik.Text);this.tmrHitung.Enabled = true;

}

Sedangkan untuk kode pada Timer, bisa dilihat pada Kode 7.7.



Kode 7.7

private void tmrHitung_Tick(object sender, EventArgs e){

if (detik > 0){

detik--;this.lblDetik.Text = Convert.ToString(detik);

}else{

this.tmrHitung.Enabled = false;MessageBox.Show("Waktu Habis", "Info");

}}

Kode selengkapnya dari aplikasi hitung mundur sederhana ini dapat dilihat pada Kode 7.8.

Kode 7.8


namespace Countdown{ public partial class Form1 : Form { public int detik;

public Form1() { InitializeComponent(); }

private void tmrHitung_Tick(object sender, EventArgs e) { if (detik > 0) { detik--; this.lblDetik.Text = Convert.ToString(detik); } else { this.tmrHitung.Enabled = false; MessageBox.Show("Waktu Habis", "Info"); } }

private void btnStart_Click(object sender, EventArgs e) { this.lblDetik.Text = this.txtDetik.Text; this.detik = Convert.ToInt32(this.txtDetik.Text); this.tmrHitung.Enabled = true; }

private void btnStop_Click(object sender, EventArgs e) { this.tmrHitung.Enabled = false; }



private void btnReset_Click(object sender, EventArgs e) { this.lblDetik.Text = this.txtDetik.Text; this.detik = Convert.ToInt32(this.txtDetik.Text); } }}

Bila aplikasi tersebut dieksekusi, maka user bisa memasukkan angka dalam txtDetik, kemudian klik tombol Start (btnStart) untuk memulai. Untuk memberhentikan perhitungan di tengah jalan, cukup klik tombol Stop (btnStop), sedangkan untuk mereset angka kembali ke awal, klik tombol Reset (btnReset).

Untuk hasil eksekusi dari aplikasi Hitung Mundur Sederhana ini dapat kita lihat pada Gambar 7.11.

Gambar 7.11 Hasil Eksekusi Aplikasi Hitung Mundur Sederhana

Masih banyak kontrol-kontrol lain yang bisa kita pelajari, namun beberapa kontrol yang telah kita bahas ini adalah kontrol-kontrol tingkat lanjut yang paling sering dipakai. Banyak-banyaklah berlatih dan mencoba banyak jenis kontrol agar pengetahuan dan kemampuan pemrograman visual kita dalam C# semakin baik lagi.


CHAPTER #7 APLIKASI WINDOWS FORM 2 (KONTROL- … · picGambar.Image = new Bitmap(open.FileName);}} catch (Exception) ... Sedangkan untuk mengambil nilai dari item yang kita pilih,

Documents