Program Piano. Kenapa penanganan event keyboard ini sangat penting?

Transkripsi

1 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>. Gambar 1 Tampilan Program Yang Akan Dibuat 2

2 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 Value / Nilai Form1 BackColor Black FormBorderStyle None 3

3 E-trik Visual C# 2005 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 Text (dikosongkan) 4

4 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. 5

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 2. Isi Nama Class 3. Klik Add Gambar 4 Memberi Nama Class Baru 3. tersebut, ketikkan kode berikut ini. 6

6 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 ; case S : angkanada = 2; namanada = RE ; case D : angkanada = 3; namanada = MI ; case F : angkanada = 4; namanada = FA ; case G : 7

7 E-trik Visual C# angkanada = 5; namanada = SOL ; case H : angkanada = 6; namanada = LA ; case J : angkanada = 7; namanada = SI ; case K : angkanada = 8; namanada = DO ; default: angkanada = 0; namanada = UnPitch ; 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

8 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 bool bunyikannada = true; public Form1() InitializeComponent(); 9

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 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

10 6. Setelah itu, ketikan kode berikut ini. Letakkan di bawah method yang sudah kita buat sebelumnya pada langkah 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

11 E-trik Visual C# Lalu, ketik kode berikut ini. Kode ini akan berjalan, apabila user menekan tombol keyboard pada Form private void Form1_KeyDown(object sender, KeyEventArgs e) if ((e.control == true) && (e.keycode == Keys.Q)) else this.close(); 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

12 - 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 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

13 E-trik Visual C# 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

14 Gambar 7 Tampilan Program Jika Tombol Yang Ditekan Benar Gambar 8 Tampilan Program Jika Tombol Yang Ditekan Salah 15