Pada E-Trik ini kita akan membuat program piano 1 oktaf sederhana. Berikut deskripsi program yang akan kita buat.
Program berguna untuk meng-generate nada dari Do rendah sampai Do tinggi (8 tangga nada).
Nada dibunyikan dengan tombol keyboard.
Output suara melalui speaker beep atau internal speaker.
Tujuan pembuatan program, untuk mengenalkan bagaimana cara untuk menangani event dari keyboard atau sering disebut dengan keyboard event handler.
Kenapa penanganan event keyboard ini sangat penting?
Seringkali dalam memakai aplikasi kita menggunakan tombol-tombol yang ada pada keyboard untuk menjalankan fungsi tertentu dari aplikasi tersebut, atau yang dikenal dengan istilah shortcut. Atau juga mungkin Anda pernah menggunakan aplikasi yang hanya memperbolehkan user untuk menginput data berupa angka saja.
Dan apabila kita menggunakan cara standar yang disediakan oleh C#, maka shortcut yang bisa kita buat hanya kombinasi ALT + <karakter yang diinginkan>.
A. Mendesain Tampilan Program
Langkah-langkah mendesain tampilan program adalah sebagai berikut: 1. Buat project baru dengan nama programPiano, simpan di folder
e-Trik_4.
2. Masukkan ke dalam Form1 komponen-komponen yang dibutuhkan sebagai berikut. 11 buah Label , dan 1 buah Panel . Atur tata letaknya kira-kira seperti pada gambar di bawah ini.
Gambar 2 Tata Letak Awal Komponen
3. Untuk langkah selanjutnya, kita akan mengubah semua nilai properties pada masing-masing objek yang ada pada Form1, termasuk nilai properties
Form1itu sendiri. Untuk mengetahui komponen dan properties yang mana yang akan diubah, dan apa nilainya, silahkan Anda lihat pada Tabel 1.
Tabel 1. Properties dan Value yang Akan Diubah Nama Kontrol Nama Properties Value / Nilai
Form1 BackColor Black
FormBorderStyle None
MaximizeBox False
Size 243, 232
StartPosition CenterScreen label1 BackColor Transparent
Font Palatino Linotype Font style Bold
Font size 12
ForeColor 192, 255, 192 Location 62, 5
Text Program Piano
label2 (Name) lblNamaNot
AutoSize False BackColor White
Font Microsoft Sans Serif Font style Bold
Font size 26 Location 30, 55
Size 182, 39
Text ?
TextAlign MiddleCenter label3 BackColor LightBlue
Font Palatino Linotype Font style Italic
Font size 8
Location 57, 0
Text Maxi Grand Piano label4-label11 AutoSize False
BackColor White BorderStyle Fixed3D
Size 13, 60
label4 (Name) tutsDO Location 10, 19
label5 (Name) tutsRE
Location 35, 19
label6 (Name) tutsMI
Location 60, 19
label7 (Name) tutsFA
Location 85, 19
label8 (Name) tutsSOL
Location 110, 19
label9 (Name) tutsLA
Location 135, 19
label10 (Name) tutsSI
Location 160, 19
label11 (Name) tutsDO2
Location 185, 19 panel1 BackColor LightBlue
BorderStyle Fixed3D Location 12, 148
Size 214, 85
Catatan :
Untuk pengaturan properties yang sama pada label4-label11, bisa dilakukan sekaligus. Caranya, klik pada label4, tahan CTRL, klik label5-label11. Untuk properties Text, agar bisa dikosongkan ketik dulu sembarang kata, lalu hapus.
B. Coding Program
Langkah-langkah melakukan coding program adalah sebagai berikut: 1. Buat class baru dengan cara tekan tombol , pilih Add Class... Atau
bisa dengan menekan kombinasi tombol Shift + Alt +C. Maka akan tampil kotak dialog Add New Item. Lihat gambar di bawah ini.
Gambar 3 Menambah Class Baru
2. Pada kotak dialog tersebut, pilih Class dan isi dengan nama NadaPiano. cs, klik tombol Add.
Gambar 4 Memberi Nama Class Baru
3.
tersebut, ketikkan kode berikut ini.
1. Klik di sini
2. Pilih ini
1. Pilih Class
2. Isi Nama Class
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 class NadaPiano { int angkaNada; public NadaPiano() { angkaNada = 0; } public int getAngkaNada() {
return angkaNada; }
public string cekNada(char namaTombol) { string namaNada; angkaNada = 0; switch (namaTombol) { case ‘A’: angkaNada = 1; namaNada = “DO”; break; case ‘S’: angkaNada = 2; namaNada = “RE”; break; case ‘D’: angkaNada = 3; namaNada = “MI”; break; case ‘F’: angkaNada = 4; namaNada = “FA”; break; case ‘G’:
Keterangan Program:
- Baris 3: mendeklarasikan variabel bertipe Integer dengan nama
33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 angkaNada = 5; namaNada = “SOL”; break; case ‘H’: angkaNada = 6; namaNada = “LA”; break; case ‘J’: angkaNada = 7; namaNada = “SI”; break; case ‘K’: angkaNada = 8; namaNada = “DO”; break; default: angkaNada = 0; namaNada = “UnPitch”; break; } return namaNada; }
int[] frekuensiNada = new int[8] { 260, 290, 320, 340, 390, 440, 490, 520 };
public void bunyikanNada(int angkaNada) {
Console.Beep(frekuensiNada[angkaNada], 200); }
angkaNada.
- Baris 4-5: konstruktor class NadaPiano.
- Baris 6-9: membuat method dengan nama getAngkaNada(), yang berguna untuk mengambil isi dari variabel angkaNada.
- Baris 10: membuat method dengan nama cekNada(), method ini memiliki nilai kembalian bertipekan string.
- Baris 12: mendeklarasikan variabel dengan tipe data string, yang bernama
namaNada.
- Baris 13: men-set isi dari variabel angkaNada dengan angka 0.
- Baris 14-52: menentukan isi dari variabel angkaNadadan namaNada, dengan cara membandingkan namaTombol yang ditekan oleh user dengan karakter tombol yang ditentukan dari awal. Yaitu karakter, ‘A’, ‘S’, ‘D’, ‘F’, ‘G’, ‘H’, ‘J’, ‘K’. Akan tetapi, jika tidak ada yang cocok, maka isi dari variabel angkaNada adalah angka 0 dan isi dari variabel namaNada
adalah “UnPitch”.
- Baris 53: mengembalikan nilai isi dari variabel namaNada.
- Baris 55: mendeklarasikan array bertipe Integer, sepanjang 8, dengan nama
frekuensiNada. Lalu, array ini langsung diisi dengan nilai-nilai frekuensi yang diperlukan untuk menciptakan nada Do rendah sampai Do tinggi. - Baris 56: membuat method dengan nama bunyikanNada(), method ini
tidak memiliki nilai kembalian, makanya di-set void.
- Baris 58: membunyikan speaker beep, dengan frekuensi yang ditentukan oleh array frekuensiNada[angkaNada],angkaNada berfungsi untuk menentukan indeks array keberapakah yang akan dipanggil. Lalu, angka
200, berguna sebagai penentu berapa lama suara akan dibunyikan dalam satuanmilisecond. Atau yang biasa disebut dengan durasi (duration). 4. Setelah itu, klik satu kali pada Form1, lalu tekan tombol F7, ketikkan
kode yang berwarna merah seperti dibawah ini.
1 2 3 4 5
bool bunyikanNada = true; public Form1()
{
InitializeComponent(); }
Keterangan Program:
- Baris 1: mendeklarasikan variabel bertipe Boolean, dengan nama
bunyikanNada. Dan langsung di-set menjadi true.
- Baris 2-5: baris ini tidak perlu diketik, karena baris ini sudah ada dengan sendirinya pada saat kita membuat project baru.
5. K e m u d i a n , k i t a a k a n m e m b u a t m e t h o d d e n g a n n a m a
cekApakahTutsDitekan(). Ketikan kode yang berwarna merah berikut ini.
Keterangan Program:
- Baris 1-4: baris ini tidak perlu diketik, karena penulis hanya ingin menunjukkan dimana letak kode yang akan kita ketik.
- Baris 5: membuat method dengan nama cekApakahTutsDitekan(), pada method ini terdapat dua parameter yaitu angkaNada dan i. Method ini juga memiliki nilai kembalian yang bertipekan objek Color.
- Baris 7-10: periksa apakah isi variabel angkaNada sama dengan isi dari variabeli. Jika benar, kembalikan warna merah tomat (Color.Tomato). Dan jika salah, kembalikan warna putih (Color.White). Isi dari variabel
angkaNada adalah nada yang sesuai dengan tombol yang ditekan. Dan isi variabel i, hanya berguna sebagai variabel pembanding.
1 2 3 4 5 6 7 8 9 10 11 public Form1() { InitializeComponent(); }
private Color cekApakahTutsDitekan(int angkaNada, int i) { if (angkaNada == i) return Color.Tomato; else return Color.White; }
6. Setelah itu, ketikan kode berikut ini. Letakkan di bawah method yang sudah kita buat sebelumnya pada langkah 5.
Keterangan Program:
- Baris 3-10: berguna untuk mengubah warna (BackColor) dari objek Label
tutsDO sampai tutsDO2. Warna yang akan di-set terdiri atas dua pilihan putih dan merah tomat. Putih, mengindikasikan gambar tuts tidak ditekan, sedangkan warna merah tomat, berarti gambar tuts sedang ditekan. Pilihan warna ini ditentukan oleh method yang sebelumnya telah kita buat pada langkah 5, yaitu method cekApakahTutsDitekan().
6. Kembali ke designer form. Klik satu kali Form1. Pada bagian Properties, klik simbol ini , Lalu klik dua kali pada eventKeyDown.
Gambar 5 Memilih Event KeyDown
1 2 3 4 5 6 7 8 9 10 11
private void gambarTutsDitekan(int angkaNada) { tutsDO.BackColor = cekApakahTutsDitekan(angkaNada, 1); tutsRE.BackColor = cekApakahTutsDitekan(angkaNada, 2); tutsMI.BackColor = cekApakahTutsDitekan(angkaNada, 3); tutsFA.BackColor = cekApakahTutsDitekan(angkaNada, 4); tutsSOL.BackColor = cekApakahTutsDitekan(angkaNada, 5); tutsLA.BackColor = cekApakahTutsDitekan(angkaNada, 6); tutsSI.BackColor = cekApakahTutsDitekan(angkaNada, 7); tutsDO2.BackColor = cekApakahTutsDitekan(angkaNada, 8); }
2. Klik Simbol Ini
3. Klik Dua Kali Disini 1. Pastikan Form1Terpilih
7. Lalu, ketik kode berikut ini. Kode ini akan berjalan, apabila user menekan tombol keyboard pada Form1.
Keterangan Program:
- Baris 3 dan 4: periksa apakah tombol CTRL dan tombol Qpada keyboard ditekan. Jika benar, tutup aplikasi. Atau dengan kata lain, periksa apakah kombinasi tombol CTRL + Q pada keyboard ditekan.
- Baris 7: periksa apakah tombol CTRL tidak ditekan. Jika benar jalankan baris kode 9-18. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
private void Form1_KeyDown(object sender, KeyEventArgs e) {
if ((e.Control == true) && (e.KeyCode == Keys.Q)) this.Close();
else {
if (e.Control != true) {
NadaPiano objPiano = new NadaPiano();
char tombolKeyboardYangDitekan = Convert.ToChar(e. KeyCode);
lblNamaNot.Text = objPiano.cekNada(tombolKeyboard YangDitekan);
int angkaNada = objPiano.getAngkaNada(); if ((angkaNada > 0) && (bunyikanNada == true)) { gambarTutsDitekan(angkaNada); objPiano.bunyikanNada(angkaNada - 1); bunyikanNada = false; } } } }
- Baris 9: buat objek baru dari class NadaPiano, dengan nama objPiano. - Baris 10: ambil karakter tombol yang sedang ditekan, lalu simpan ke dalam
variabel bertipe char dengan nama tombolKeyboardYangDitekan. - Baris 11: cek apakah tombol yang ditekan adalah tombol yang benar untuk
menghasilkan nada, menggunakan method cekNada(). Jika benar, maka pada komponen Label lblNamaNot akan muncul nama not, DO, RE, MI, dan seterusnya. Akan tetapi, jika salah yang akan muncul adalah tulisan
UnPitch.
- Baris 12: ambil isi variabel angkaNada yang ada pada class NadaPiano
dengan menggunakan method getAngkaNada(). Lalu, simpan ke variabel lokalangkaNada.
- Baris 13-18: periksa apakah variabel angkaNada memiliki nilai yang lebih besar daripada 0 dan apakah variabel bunyikanNadabernilai true. Jika benar, maka baris program 15-17 akan dijalankan.
- Baris 15: panggil method gambarTutsDitekan().
- Baris 16: panggil method bunyikanNada(), melalui objek objPiano. - Baris 17: set variabel -Baris 16: panggil method bunyikanNada menjadi
bernilai false.
8. Lakukan langkah yang sama seperti pada langkah 6, akan tetapi event yang dipilih adalah event KeyUp (bukan event KeyDown).Event ini berguna untuk menjalankan kode, jika user mengangkat jarinya dari tombol keyboard. Atau dengan kata lain, user melepas tombol keyboard setelah sebelumnya ditekan.
Gambar 6 Memilih Event KeyUp 9. Kemudian, ketikkan kode di bawah ini.
Keterangan Program:
- Baris 3: panggil method gambarTutsDitekan(). - Baris 4: set variabel bunyikanNada menjadi true.
10. Setelah itu tekan tombol F6, untuk melakukan Build Solution. Jika ada error, coba Anda teliti lagi apakah ada kode yang terlewat atau salah dalam pengetikannya. Jika tidak ada error, tekan tombol F5. Maka program akan dijalankan.
C. Ujicoba Program
Langkah-langkah melakukan ujicoba program adalah sebagai berikut: 1. Setelah program dijalankan, Anda bisa menekan tombol A pada keyboard
untuk nada DO rendah, tombol S untuk nada RE, tombol D untuk nada
MI,F = FA,G = SOL,H = LA,J = SI,K = DO tinggi. Maka nama nada akan tampil sesuai dengan tombol yang ditekan (Gambar 7).
2. Coba Anda tekan tombol nada agak lama, maka pada gambar tuts yang ada dibagian bawah form akan berubah warna sesuai nada yang ditekan (Gambar 7).
3. Coba Anda menekan tombol selain itu, maka akan muncul tulisan UnPitch
(Gambar 8).
4. Tekan kombinasi tombo CTRL + Q, untuk menutup aplikasi.
1 2 3 4 5
private void Form1_KeyUp(object sender, KeyEventArgs e) {
gambarTutsDitekan(0); bunyikanNada = true; }
Gambar 7 Tampilan Program Jika Tombol Yang Ditekan Benar
