andrian – 13.25

• Facebook
• Twitter
• Pinterest
• Google+

Membuat Kalkulator di C#

Di dalam post ini saya akan menjelaskan step-by-step untuk memprogram kalkulator simple dengan bahasa C# , dan menggunakan program Visual Studio C# Express.

Hasil Akhir kalkulator dari tutorial yang anda akan baca akan menjadi seperti dibawah ini :

jadi ini adalah Langkah-langkah nya agar anda juga dapat memprogram kalkulator sederhana juga  :

1. Jalankan Program Visual Studio Express C# , lalu klik New Project pada windows Start Page program tersebut.

2. Lalu pilih New Windows Form dan namakan Project tersebut sesuka anda , dalam hal ini, saya menamai projek saya “Kalkulator” lalu tekan tombol “Ok”

3. Setelah itu , Windows Form kosong akan muncul dan anda siap untuk memasukan dan mencoding komponen-komponen tersebut sehingga menjadi program kalkulator yang berfungsi. Namun sebelumnya, buka applikasi Kalkulator pada PC/Gadget atau lihat kalkulator fisik dahulu. Dan coba pahami Logika kalkulator tersebut, seperti operasi Penjumlahan dan pengurangan. hal ini sangat di butuhkan karena nantinya kita akan Menuliskan logika tersebut di program kita. Selain itu kita juga bisa memahami letak komponen pada kalkulator jadi kita bisa “meniru” kalkulator yang sudah jadi tersebut.

Dalam hal ini…saya meniru letak komponen dan desain Kalkulator yang di sediakan oleh Microsoft. cukup buka Accessories atau search saja calculator .

4. Jadi anda sudah paham bagaimana kalkulator berfungsi dan sudah terbayang “desain” dan letak komponen-komponen tersebut? kalau sudah, mari kita mulai menaruh komponen terlebih dahulu. pertama-tama saya akan memasukan komponen Button yang bisa di temukan di tab Toolbox pada sebelah kiri windows Visual studio. jadi button ini berfungsi sebagai tombol untuk kalkulator anda.

5. Cukup Klik Dan Drag komponen tersebut ke Form yang telah di buat, jangan khawatir pada kerapihan nya dahulu , nanti kita bisa rapihkan belakangan. setelah di masukan ke form, kecilkan ukuran button tersebut. kita ingin kalkulator yang kecil dan padat seperti yang di sediakan oleh Windows :p . Kalkulator yang ingin saya buat cukup simple, saya ingin membuat kalkulator dengan beberapa fungsi yaitu Penjumlahan,pengurangan,perkalian,pembagian,Persen,dan Reciprocal , hampir sama seperti kalkulator yang disediakan oleh Microsoft. Minus fungsi Memory, dan scientific Calc nya.

6. setelah saya hitung-hitung kira-kira saya butuh 27 Buttons, Jangan khawatir anda tidak perlu Klik-drag berkali-kali. Cukup Highlight buttons yang ingin di Duplikat dan CTRL + C lalu Paste button tersebut sebanyak 26 Kali dengan CTRL + V . anda secara Intan memiliki 27 tombol tanpa Klik Drag berkali-kali. setelah itu atur Buttons tersebut sedemikian rupa menyerupai kalkulator.

7. Buttons Sudah, lalu selanjutnya adalah TextBox , yang akan berfungsi untuk menampilkan sekaligus menginput variable yang di input oleh user, letak modul tersebut ada di toolbox , cukup Klik dan Drag textbox tersebut di bagian atas kalkulator tersebut.

9. Jadi textbox anda sudah di masukan kedalam Form, selanjutnya apa? kalau dilihat di kalkulator yang sudah jadi, Default Display kalkulator-kalkulator biasanya menampilkan angka 0 , dan penulisan ada di pojok Kanan. kita dapat mengubah nya dengan Mengedit properties text area tersebut dengan cara Klik sekali text area tsb lalu lihat pojok kanan bawah windows visual studio ada Bagian Properties komponen tersebut, rubah properties Text menjadi “0” dan Align text menjadi “Right” , apabila ukuran font kurang besar , anda dapat mengubah nya di Properties Font dan klik simbol “….” pada kanan font, dan anda dapat memilih ukuran font nya. Button lain pun di screenshot dibawah sudah saya ganti text nya agar menyerupai kalkulator.

10. Oh iya, untuk mengindari “kebingungan” karena komponen-komponen yang banyak, maka saya akan merename seluruh komponen yang ada. seperti textbox , saya rename menjadi Hasil , dan button-button menjadi seperti btn_hasil , btn_1,btn_2,dst . Caranya cukup cari parameter (name) pada properties komponen yang dipilih, lalu Masukan nama yang ingin di ganti. Tidak diganti juga tidak apa-apa

11. Sekarang , mari kita mulai Coding . Pertama saya ingin menjalankan sebuah method yang berfungsi untuk memunculkan variable pada textbox , contohnya saat saya klik tombol “1” maka angka 1 akan keluar pada textbox, pertama-tama kita ingin membuat events terlebih dulu, ada 2 cara untuk melakukan nya yang termudah dan tercepat tinggal Double Klik dan anda langsung dialihkan ke tab Code, yang kedua dengan masuk ke menu Events yang terletak di tab properties di atas-atas nya ada Simbol Petir yang berarti Events , disitu anda menemukan banyak event yang tersedia, dalam kasus ini kita ingin memprogram event saat button di click, maka cari parameter Click dan anda tinggal namakan event dan tekan Enter .

ada 2 cara untuk melakukan nya, yang pertama adalah membuat method dimana saat button saya tekan , maka method tertentu akan dijalankan contoh Code nya sebagai berikut :

saat saya tekan tombol 3 maka saya ingin menampilkan angka 3 di text area dengan code yang melekat pada tombol tsb :

textarea1.text = “3” ;

maka saat tombol 3 di tekan , textarea di set untuk menampilkan angka 3 

Namun untuk button 4 maka code sebagai berikut

textarea1.text = “4”;

maka saat tombol 4 di tekan , textarea menampilkan angka 4

kelemahan nya , saya harus menuliskan code-code yang berbeda untuk tiap 27 button yang ada . tentunya kita ingin metode yang tercepat bukan ?

cara yang kedua menurut saya lebih cepat dan simple , apalagi banyak button yang ada cukup banyak. yaitu dengan menampung Text yang ada di button menjadi String yang nantinya akan di tampilkan di Text Area. coding nya sebagai berikut

Jadi apa maksudnya ? saya merekam Text yang ada di button sender lalu menampung nya sebagai “b”

lalu untuk menampilkan inputan button tersebut di textarea , maka hasil.Text = hasil.Text + b.Text ; , artinya textarea Hasil akan di menjadi text yang sebelumnya ada di textarea di tambah dengan text yg ditampung oleh variable b .

tanpa hasil.text di depan b.text , textarea hanya akan menampilkan text dari button yang saya baru tekan,dan text sebelumnya di gantikan oleh text dari button yang baru saja di tekan. (contoh saya menekan tombol 1,2,3 tanpa hasil.text sebelum b.text , maka yg ditampilkan adalah 1,2,3 . namun apabila dengan code hasil.text + b.text , maka yang ditampilkan adalah 123)

Nah, masalahnya angka 0 yang di jadikan default text pada textarea tidak hilang saat saya menekan button (contoh saya tekan 2, maka yang keluar adalah 02)

kita akan membuat angka 0 hilang dari textarea saat user menekan button angka dengan menuliskan code sebagai berikut di events btn_click (saat button di klik):

maksudnya adalah, apabila saat button di tekan dan angka yang ada di textarea adalah 0 , maka program akan menjalankan hasil.clear(); yang dimana akan mengosongkan textarea dan menggantikan nya dengan angka yang di input melalui button. setelah itu , coba klik button 2 kembali, pastinya angka 0 di depan nya sudah hilang

setelah itu , anda dapat mengapply events tersebut ke tombol-tombol angka dan koma ( . ) yang ada di kalkulator anda, anda cukup tekan button , lalu ke tab events , lalu ke parameter click dan pilih events tersebut . anda telah menyelsaikan coding pertama!

12. Oke ,selanjutnya kita akan memprogram events tombol operator penjumlahan,pengurangan,pengalian,dll , caranya mirip dengan sebelumnya , yaitu membuat event Click pada button tersebut dan saya namakan event tersebut operator_click

setelah itu tekan enter , dan anda dialihkan ke tab Code, tepat dibawah constructor , deklarasi atau buat beberapa variable penampung yang akan di gunakan selanjutnya diantara lain :

double value = 0; // berfungsi untuk menampung value atau nilai aritmatika yang nantinya di hitung

string ops = “” ; // berfungsi untuk menampung text yang ada pada button operator kalkulator

bool op_pressed = false ; // berfungsi sebagai boolean atau parameter bahwa operator telah di tekan, nanti akan digunakan untuk menclear textarea

setelah itu pada method event yang ingin kita program, di tulis code sebagai berikut :

sama seperti button sebelumnya , saya ingin menampung text yang ada pada button di value b , yang nantinya di jadikan sebagai value ops , yang setelah ini digunakan sebagai case dalam metode Switch untuk penghitungan hasil.

setelah itu value di gunakan untuk menampung dan mengubah angka yang telah di input sebelumnya, dan diubah menjadi Double, yang nanti di gunakan untuk menghitung hasil kalkulasi.

setelah itu mengubah bool op_pressed menjadi true , fungsinya untuk memberi tahu bahwa operator button telah di tekan. kita ingin setelah operator di tekan, maka text area akan Clear, sehingga user dapat memasukan angka selanjutnya. maka di event btn_click pada step sebelumnya, kita tambah code sbb :

 

fungsinya ? setelah operator di tekan, boolean menjadi True ,  setelah true maka line program yang didalam If dijalankan, mengakibatkan textarea di clear secara otomatis.

tanpa line code ini, setelah user menekan button operator (contohnya +) maka text area tidak clear, yang mengakibatkan user tidak bisa menginput variable kedua dengan benar.

13. Selanjutnya, kita akan memprogram button ” = ” atau menampilkan hasil , sama seperti sebelumnya double klik atau klik events pada button = untuk menulis program event . saya beri nama event ini “hasil”

setelah itu tekan Enter atau Double click pada button, anda hadir di tab code. sebelumnya kita sudah menuliskan variable ops , sekarang kami akan menggunakan nya sebagai case pada Switch (case) , sebagai berikut

case yang kita gunakan adalah String ops yang sebelumnya sudah di tampung. Switch (case) akan menjalankan line code tergantung case yang di input. sejauh ini apabila kita menekan button operator pada calculator maka text yang ada pada button tersebut tersimpan didalam String ops.

contohnya , apabila tombol + yang di tekan , maka program akan menghitung value yang sudah di tampung dahulu , lalu di jumlahkan dengan variable ke dua yang ada di text area terakhir, karena tipe datanya String,maka perlu di parse menjadi Double. setelah hasil penjumlahan didapat, Hasil tidak bisa langsung di tampilkan, karena textarea hanya menampilkan tipe data String, maka oleh karena itu di butuhkan line .ToString di akhirnya. Sehingga hasil kalkulasi dapat di tampilkan pada textarea

Copy dan paste cod line tersebut ke case yang lain nya dan tulis isi code sesuai logika kalkulasi yang ada.

14. Ada beberapa tombol seperti Akar , Persen , dan Reciprocal yang tidak perlu menekan tombol ” = ” untuk mendapatkan hasil kalkulasi. Cukup tekan button terkait hasil langung terdisplay. untuk itu harus di tulis event yang spesifik pada buttons tersebut sebagai berikut:

– pertama-tama saya akan memprogram button akar, sama seperti sebelumnya,cukup double click atau masukan nama pada parameter click dan anda akan memasuki tab Code. event ini saya namakan sqrt

untuk operasi pengakaran (Square Root), pada C# cukup menuliskan Math.sqrt(variable) , namun saya ingin saat button saya tekan, langsung terdisplay hasilnya di textarea, maka saya menuliskan line seperti di bawah :

jangan lupa Parse dari string, karena Operasi matematis tidak dapat dijalankan dengan tipe data string, setelah hasil kalkulasi didapatkan, maka harus di ubah menjadi String kembali agar dapat di tampilkan di textarea

– setelah itu saya akan memprogram tombol persen, sama seperti sebelumnya tinggal double click,atau namakan event pada parameter Click lalu enter , tiba di tab coding

di tab code , sama seperti sebelumnya , saya menuliskan logika persen yaitu value yang ada di textarea (diubah menjadi double terlebih dahulu) lalu di kalikan dengan 0,01 .Setelah itu hasil dijadikan String sehingga bisa di tampilkan di textarea .

– Selanjutnya Reciprocal ( 1/x) yang dimana berfungsi untuk membalikan suatu variable, contohnya anda memiliki nilai 1/3 setelah di reciprocal menjadi 3/1, oke pertama-tama menset event dahulu seperti button lain nya

selanjutnya di tulis line yang cukup sederhana yaitu melakukan kalkulasi 1 / x , dimana x adalah variable yang user input, dan di ubah menjadi String sehingga dapat di tampilkan di textarea

15. Akhirnya kalkulator kita berfungsi , tapi ada fitur yang kurang yaitu Fitur Hapus! , di kalkulator yang saya tulis mendukung 2 fungsi hapus , yaitu Clear all dan backspace.

untuk clear all, Double click pada button Clear yang ingin anda gunakan atau buat event pada tab event (saya namakan clear_1)

lalu tuliskan 1 Line yang cukup simple yg berfungsi untuk mengubah textarea menjadi ” 0 “

Selanjutnya kita akan memprogram tombol Backspace, jika user sudah input beberapa angka dan rupanya ada 1 angka yang salah input,maka user dapat menghapus 1 atau beberapa angka tersebut dengan tombol backspace , sama seperti sebelumnya double click atau buat event pada button tersebut .

Di tab code, tuliskan line sebagai berikut

yang berarti textarea akan menampilkan text dari hasil yang sudah diremove 1 variable saat button backspace di tekan oleh user.

Selesai sudah kalkulator anda, seluruh operasi dan fungsi pada kalkulator sudah sempurna dan jangan lupa save karya anda

OPTIONAL :

– Menambah Menustrip, agar kalkulator anda tampak lebih lengkap, cukup drag dan drop menustrip dari toolbar, dan ketik nama menu yang anda inginkan, contohnya saya ingin menu Exit, dan saat user tekan tombol tersebut , kalkulator langsung Close

setelah itu double klik atau ke tab events , di parameter click isi nama event lalu enter ,anda teralihkan ke tab Code

di tab ini saya akan menuliskan line yang memerintahkan Form di tutup saat tombol exit ditekan sebagai berikut

– Anda ingin menyimpan aplikasi ini sehingga anda bisa menjalankan nya tanpa membuka visual studio terlebih dahulu? Cukup tekan F6 atau buka Debug > Built . Secara instan program anda di compile sehingga dapat di jalankan di luar visual studio.

untuk menemukan file tsb , buka Folder project,lalu Bin folder Release, anda akan menemukan aplikasi anda yang anda program sebelumnya.

– Agar window aplikasi tampil di tengah layar, tekan Form dan cari parameter Startposition, ubah menjadi Center Screen

• Facebook
• Twitter
• Pinterest
• Google+