Modul Praktikum Pemrograman II
APLIKASI WINDOWS FORM 1 (KONTROL-
KONTROL SEDERHANA)
6.1. Menggunakan CheckBox dan RadioButton
CheckBox dan RadioButton merupakan kontrol yang digunakan untuk mendesain
aplikasi yang mempunyai banyak pilihan. Perbedaan dari kedua kontrol terletak pada
jumlah pilihan yang bisa diambil. CheckBox merupakan kontrol yang memungkinkan
pengguna memilih lebih dari satu pilihan, sedangkan RadioButton merupakan kontrol
yang hanya memperbolehkan pengguna memilih satu saja dari pilihan yang ada.
Kesamaan pada kedua kontrol tersebut adalah terlihatnya semua item yang dapat
dipilih dalam tampilan dan memiliki properties dan event yang sama, yaitu:
1. Properties Checked
Checked merupakan properties yang digunakan untuk memberikan tanda cek
baik pada kontrol CheckBox maupun RadioButton. Hal ini menunjukkan kalau
CheckBox atau RadioButton tersebut sedang dalam kondisi dipilih.
Nilai properties Checked adalah boolean. Nilai true menyatakan bahwa
kontrol tersebut dalam keadaan dicek atau dipilih, sedangkan nilai false
menyatakan bahwa kontrol tersebut tidak sedang dicek atau dipilih.
2. Event CheckedChanged
CheckedChanged merupakan event yang digunakan untuk melakukan aksi
jika terjadi perubahan properties Checked. Perubahan bisa terjadi dari
keadaan dicek (true) menjadi tidak dicek (false) atau sebaliknya.
Kali ini kita akan mendesain sebuah aplikasi dengan menggunakan kontrol
CheckBox dan RadioButton. Kita akan membuat aplikasi untuk memesan makanan pada
sebuah restoran, di mana saat kita memesan nanti, kita akan diberitahukan biaya dari
pesanan kita tergantung dari berapa banyak pesanan dan apa yang kita pesan. Di dalam
program ini juga terdapat pilihan, apabila kita adalah pelanggan dari restoran tersebut,
maka kita akan diberi diskon 10% dari harga yang tertera. Untuk itu kita membangun
sebuah antarmuka seperti pada Gambar 6.10.
Gambar 6.10 Desain Aplikasi Menu Restoran
Pada antarmuka seperti yang terlihat di Gambar 6.10, kita menggunakan kontrol
sederhana yang sebelumnya seperti TextBox, Label dan Button. Ada beberapa properties
yang harus diatur, sehingga menghasilkan tampilan seperti pada Gambar 6.10. Tabel 6.5
menjelaskan konfigurasi properties setiap kontrol. Oleh karena itu, perhatikan dengan
teliti setiap konfigurasi yang diberikan pada setiap kontrol agar tidak terjadi kesalahan.
Tabel 6.5 Properties Aplikasi Menu Restoran
Muhammad Najib DS, [Link].,M.T. 1
Modul Praktikum Pemrograman II
Kontrol Properties Nilai
Label1 Name lblPelanggan
Text Pelanggan:
Label2 Name lblMenu
Text MENU MAKANAN
Label3 Name lblJumlah
Text Jumlah
Label4 Name lblTotalInfo
Text Total Bayar:
Label5 Name lblTotal
Text 0
[Link] 12
[Link] Tahoma
[Link] True
TextBox1 Name txtMenu1
Visible False
TextBox2 Name txtMenu2
Visible False
TextBox3 Name txtMenu3
Visible False
RadioButton1 Name rbtPlgYa
Text Ya
Checked true
RadioButton2 Name rbtPlgTidak
Text Tidak
Checked False
CheckBox1 Name chbMenu1
Text Beef Steak (Rp. 8000)
Checked False
CheckBox2 Name chbMenu2
Text Chicken Steak (Rp. 7000)
Checked False
CheckBox3 Name chbMenu3
Text French Fries (Rp. 4000)
Checked False
Setelah kita mengatur konfigurasi properties setiap kontrol, langkah berikutnya
adalah mengatur aksi pada kontrol yang diperlukan untuk kelengkapan aplikasi. Kontrol
yang memiliki aksi adalah CheckBox dan Button, di mana setiap kita mencek sebuah
pilihan menu, maka TextBox Jumlah yang ada di sebelah kanannya akan muncul
(properties Visible diset true) sehingga dapat diisi oleh pengguna dengan jumlah atau
porsi pesanan.
Perhatikan Kode 6.3 sebagai sebuah contoh kode yang kita sisipkan ketika sebuah
CheckBox dicek atau dihilangkan ceknya.
Kode 6.3
private void chbMenu1_CheckedChanged(object sender, EventArgs e)
{
if ([Link] == true)
{
[Link] = true;
}
else
{
[Link] = false;
}
}
Kode 6.3 tersebut merupakan aksi yang dilakukan oleh chbMenu1 terhadap
txtMenu1. CheckBox yang lainnya juga memiliki aksi yang sama seperti Kode 6.3, hanya
saja nama dari TextBox yang dipengaruhi perlu disesuaikan.
Kemudian untuk aksi pada tombol pesan, kita dapat melihat listing programnya
pada Kode 6.4.
Muhammad Najib DS, [Link].,M.T. 2
Modul Praktikum Pemrograman II
Kode 6.4
private void btnPesan_Click(object sender, EventArgs e)
{
double biaya = 0, diskon;
int menu1, menu2, menu3;
if ([Link])
{
diskon = 0.1;
}
else
{
diskon = 0;
}
if ([Link])
{
menu1 = [Link]([Link]);
biaya += (8000 * menu1);
}
if ([Link])
{
menu2 = [Link]([Link]);
biaya += (7000 * menu2);
}
if ([Link])
{
menu3 = [Link]([Link]);
biaya += (4000 * menu3);
}
biaya -= (biaya * diskon);
[Link] = [Link]();
}
Jika program dijalankan maka akan tampil tampilan seperti pada Gambar 6.10
tanpa Textbox. Setelah dicek dan diisi oleh pengguna, maka dapat diperhatikan Gambar
6.11 sebagai hasil eksekusinya.
Gambar 6.11 Desain Aplikasi Menu Restoran
Untuk kode programnya secara lengkap bisa kita lihat pada Kode 6.5.
Kode 6.5
using System;
using [Link];
using [Link];
using [Link];
using [Link];
using [Link];
Muhammad Najib DS, [Link].,M.T. 3
Modul Praktikum Pemrograman II
using [Link];
namespace MenuRestoran
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
private void chbMenu1_CheckedChanged(object sender, EventArgs e)
{
if ([Link] == true)
{
[Link] = true;
}
else
{
[Link] = false;
}
}
private void chbMenu2_CheckedChanged(object sender, EventArgs e)
{
if ([Link] == true)
{
[Link] = true;
}
else
{
[Link] = false;
}
}
private void chbMenu3_CheckedChanged(object sender, EventArgs e)
{
if ([Link] == true)
{
[Link] = true;
}
else
{
[Link] = false;
}
}
private void btnPesan_Click(object sender, EventArgs e)
{
double biaya = 0, diskon;
int menu1, menu2, menu3;
if ([Link])
{
diskon = 0.1;
}
else
{
diskon = 0;
}
if ([Link])
{
menu1 = [Link]([Link]);
biaya += (8000 * menu1);
}
if ([Link])
{
menu2 = [Link]([Link]);
Muhammad Najib DS, [Link].,M.T. 4
Modul Praktikum Pemrograman II
biaya += (7000 * menu2);
}
if ([Link])
{
menu3 = [Link]([Link]);
biaya += (4000 * menu3);
}
biaya -= (biaya * diskon);
[Link] = [Link]();
}
}
}
Perlu diingat untuk RadioButton, hanya bisa satu pilihan dalam satu form, untuk
itu apabila dalam satu form terdapat lebih dari dua kategori pilihan, sebaiknya
RadioButton tersebut dimasukkan ke dalam GroupBox atau Panel. Karena jika tidak
dimasukkan ke dalam panel, maka RadioButton tersebut akan berbaur dengan
RadioButton yang lain. Hal ini juga berlaku CheckBox. Perhatikan Gambar 6.12 sebagai
contoh pengkategorian RadioButton.
Gambar 6.12 Kategorisasi RadioButton dengan GroupBox
6.2. Form Login
Kali ini kita akan menggunakan dua buah Form dan kita akan membahas
bagaimana perpindahan antar form. Pada kasus kali ini kita akan menggunakan sistem
login pada sebuah email. Untuk user name kita dapat menggunakan TextBox biasa
sedangkan untuk password kita akan menggunakan kontrol MaskedTextBox. Jadi
apabila username dan password yang kita masukkan cocok, maka Form2 akan terbuka,
sebaliknya, bila tidak cocok akan muncul sebuah MessageBox berupa pesan error.
Buatlah sebuah tampilan pada Form 1 dan Form 2 seperti Gambar 6.13.
Gambar 6.13 Form 1 dan Form 2 untuk Aplikasi Login
Muhammad Najib DS, [Link].,M.T. 5
Modul Praktikum Pemrograman II
Kemudian atur properties pada Form 1 seperti pada Tabel 6.6
Tabel 6.6 Properties Form 1 Aplikasi Login
Kontrol Properties Nilai
Label1 Name lblUser
Text User Name:
Label2 Name lblPassword
Text Password:
TextBox1 Name txtUser
MaskedTextBox1 Name mtxPassword
PasswordChar *
Button1 Name btnLogin
Text Login
Selanjutnya atur properties pada Form 2 seperti pada Tabel 6.7
Tabel 6.6 Properties Form 1 Aplikasi Login
Kontrol Properties Nilai
Label1 Name lblWelcome
Text Welcome to [Link]
[Link] 20
[Link] Tahoma
[Link] False
Kemudian untuk aksi pada tombol btnLogin, kita dapat melihat listing programnya
pada Kode 6.6.
Kode 6.6
private void btnLogin_Click(object sender, EventArgs e)
{
if (([Link]([Link], "admin")) &&
([Link]([Link], "admin")))
{
Form2 f = new Form2();
[Link]();
[Link]();
}
else
{
[Link]("Incorrect User Name or Password","Error");
}
}
Pada Kode 6.6, bagian:
Form2 f = new Form2();
[Link]();
Untuk membentuk sebuah obyek baru dari class Form2 yang bernama f, untuk kemudian
ditampilkan. Sedangkan bagian:
[Link]("Incorrect User Name or Password","Error");
berguna untuk Menampilkan MessageBox, yang merupakan method yang sudah di-
shared atau bisa digunakan secara langsung oleh program C# manapun yang
menggunakan tool s Microsoft Visual [Link] 2005.
Muhammad Najib DS, [Link].,M.T. 6
Modul Praktikum Pemrograman II
Perhatikan Gambar 6.14 sebagai hasil jadinya, bagian (a) bila user salah
memasukkan username atau password sedangkan bagian (b) bila pengguna memasukkan
user name dan password yang benar, dalam hal ini username-nya = “admin” dan
passwordnya = “admin”.
Tabel 6.14 Hasil Eksekusi Aplikasi Login (a) Gagal (b) Berhasil
Untuk kode programnya secara lengkap bisa kita lihat pada Kode 6.7.
Kode 6.7
using System;
using [Link];
using [Link];
using [Link];
using [Link];
using [Link];
using [Link];
namespace Login
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
private void btnLogin_Click(object sender, EventArgs e)
{
if (([Link]([Link], "admin")) &&
([Link]([Link], "admin")))
{
Form2 f = new Form2();
[Link]();
[Link]();
}
else
{
[Link]("Incorrect User Name or Password",
"Error");
}
}
}
}
Muhammad Najib DS, [Link].,M.T. 7
Modul Praktikum Pemrograman II
TUGAS LATIHAN :
1. Buatlah aplikasi menu restoran yang tertera seperti pada gambar 6.11 diatas dan hasilny di
Screenshoot simpan dengan format pdf.
2. Buatlah aplikasi menu login seperti yang dicontohkan pada gambar 6.14 dan jika login
berhasil akan tampil program yang telah kalian buat sebelumnya seperti pada gambar 6.11 .
dan jika login gagal makan akan tampil menu form Error!
Mohon dipahami Langkah-langkah tugas yang diberikan.
Selamat mengerjakan!
Muhammad Najib DS, [Link].,M.T. 8