Program Piano
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 +
.
Gambar 1 Tampilan Program Yang Akan Dibuat
2
Program Piano 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.
Panel
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 Form1 itu 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 Form1 BackColor Black FormBorderStyle
None
3
Value / Nilai
E-trik Visual C# 2005
label1
label2
label3
label4-label11
MaximizeBox Size StartPosition
False 243, 232 CenterScreen
BackColor Font
Transparent Palatino Linotype
Font style Font size ForeColor
Bold 12 192, 255, 192
Location Text
62, 5 Program Piano
(Name) AutoSize BackColor
lblNamaNot False White
Font Font style
Microsoft Sans Serif Bold
Font size Location Size
26 30, 55 182, 39
Text TextAlign
? MiddleCenter
BackColor Font Font style
LightBlue Palatino Linotype Italic
Font size Location
8 57, 0
Text AutoSize BackColor
Maxi Grand Piano False White
BorderStyle Size
Fixed3D 13, 60
Text
(dikosongkan)
4
Program Piano label4 label5
(Name) Location (Name)
tutsDO 10, 19 tutsRE
label6
Location (Name)
35, 19 tutsMI
Location (Name) Location
60, 19 tutsFA 85, 19
label8
(Name) Location
tutsSOL 110, 19
label9 label10
(Name) Location (Name)
tutsLA 135, 19 tutsSI
label11
Location (Name)
160, 19 tutsDO2
Location BackColor BorderStyle
185, 19 LightBlue Fixed3D
Location Size
12, 148 214, 85
label7
panel1
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.
5
E-trik Visual C# 2005 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.
1. Klik di sini
2. Pilih ini
Gambar 3 Menambah Class Baru 2. Pada kotak dialog tersebut, pilih Class dan isi dengan nama NadaPiano. cs, klik tombol Add.
1. Pilih Class
3. Klik Add 2. Isi Nama Class
Gambar 4 Memberi Nama Class Baru 3. tersebut, ketikkan kode berikut ini.
6
Program Piano 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’:
7
E-trik Visual C# 2005 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;
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
} 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); } }
Keterangan Program: - Baris 3: mendeklarasikan variabel bertipe Integer dengan nama
8
Program Piano 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 angkaNada dan 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 satuan milisecond. 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(); }
9
E-trik Visual C# 2005 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. 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; }
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 variabel i. 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.
10
Program Piano 6. Setelah itu, ketikan kode berikut ini. Letakkan di bawah method yang sudah kita buat sebelumnya pada langkah 5. 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); }
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 event KeyDown.
1. Pastikan Form1 Terpilih 2. Klik Simbol Ini
3. Klik Dua Kali Disini
Gambar 5 Memilih Event KeyDown
11
E-trik Visual C# 2005 7. Lalu, ketik kode berikut ini. Kode ini akan berjalan, apabila user menekan tombol keyboard pada Form1. 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; } } } }
Keterangan Program: - Baris 3 dan 4: periksa apakah tombol CTRL dan tombol Q pada 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.
12
Program Piano -
-
-
-
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 lokal angkaNada. Baris 13-18: periksa apakah variabel angkaNada memiliki nilai yang lebih besar daripada 0 dan apakah variabel bunyikanNada bernilai 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.
Pilih event Ini
Gambar 6 Memilih Event KeyUp 9. Kemudian, ketikkan kode di bawah ini.
13
E-trik Visual C# 2005 1 2 3 4 5
private void Form1_KeyUp(object sender, KeyEventArgs e) { gambarTutsDitekan(0); bunyikanNada = true; }
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.
14
Program Piano
Gambar 7 Tampilan Program Jika Tombol Yang Ditekan Benar
Gambar 8 Tampilan Program Jika Tombol Yang Ditekan Salah
15
