tutorial pembuatan kontrol button, kotak about dan ikon dengan visual studio

7/24/2019 TUTORIAL PEMBUATAN KONTROL BUTTON, KOTAK ABOUT DAN IKON DENGAN VISUAL STUDIO

1/9

PRAKTIK 2

KONTROL BUTTON, KOTAK ABOUT DAN IKON

Praktik yang kedua ini, kita akan membuat aplikasi yang diberi title Aplkasi Keduaku seperti

pada gambar dibawah ini :

Untuk itu diperlukan beberapa tahapan, yaitu:

A. Menyiapkan Disain Aplikasi

Pada tahapan ini, kita akan menyiapkan disain aplikasi proyek yang akan dibuat.

Lakukanlah langkah-langkah berikut:

1. Dari enu Utama pilih menu File New Pro!e"t#

$. %etelah mun"ul !endela New Project, Pada bagian !endela yang terdapat di tengah, pilih

MFC AppWizard (ee!

&. Pada "ocation# pilih direktori tempat proyek anda disimpan, misalnya D$%Praktek'. Pada Project na&e, ketik : "at'')

(. )lik tombol *K, hingga mun"ul kotak Welco&e to t+eMFC ApplicationWizard,

*. )lik Net -

+. PadaRadio button, klikatau pilih Dialo /ased.. Kliktombol Net-, hingga mun"ul kotak dialog MFC AppWizard 0 1tep ),. Pada 2dit 3o : Please enter a title for your dialog:, ketikkan !udul title yang akan

ditampilkan oleh aplikasi yang akan kita buat dengan mengetik : Aplikasi keduaku,1. Kliktombol Net-, ketika mun"ul kotak dialog Ad4anced Features,

11. Kliktombol Net-, ketika mun"ul kotak dialog 5enerated Classes,1$. Klik tombol Finis+, hingga mun"ul gambar disain aplikasi yang akan dibuat dengan title

Aplikasi Keduaku,

3. Men+apus 6o&/ol (3utton! dan 6eks 1tatis (1tatic 6et!

Pada tahap persiapan disain aplikasi, kotak aplikasi yang akan kita buat telah mengandung dua

buah control /utton/ tombol 0 dengan "aption *Kdan Cancel# dan sebuah teks statis /1tatic

tet!. )etiga "ontrol tersebut tidak diperlukan dalam aplikasi yang akan dibuat, oleh sebab itu

harus dihilangkan atau dihapus dari disain.

Langkah-langkah untuk menghapus ketiga "ontrol tersebut adalah sebagai berikut :

Diktat Praktek Visual c++ halaman 7


2/9

1. rahkan mousepada tombol dengan "aption *K, lalu klik# sehingga disain aplikasi akan

tampak seperti dibawah ini :

$. 2ekan tombol deletepada keyboard, sehingga disain tombol *Kakan hilang.

&. Lakukan hal sama seperti langkah diatas untuk menghilangkan tombol Canceldan teks statis

23D3:Pla"e dialog "ontrols here, sehingga disain aplikasi men!adi kosong dari "ontrol-

kontrol seperti dibawah ini :

C. Mena&/a+kan Kontrol 3utton

%ebelum kita membahas bagaimana "aranya menambahkan "ontrol button / tombol 0 ke dalam

disain aplikasi yang akan dibuat, maka akan dibahas terlebih dahulu "ontrol toolbo4 yang

disediakan oleh 5isual 677.

)ontrol toolbo4 adalah kotak toolbo4 yang menyediakan berbagai "ontrol yang dapat digunakan

dalam pembuatan aplikasi. 2oolbo4 terletak di bagian pinggir kanan sistem i"roso8t studio dan

dalam keadaan di hide, 9ika kita kita arahkan mouse ke tulisan 2oolbo4 maka akan mun"ul

2oolbo4 seperti tampak dibawah ini:



3/9

Untuk menambahkan "ontrol button pada disain aplikasi yang akan dibuat, ikuti langkah-langkah

berikut ini:

1. rahkan mouse pada control /uttonyang terdapat pada kotak control tool/ar , lalu klik

control /utton

$. )emudian arahkan penun!uk mousepada disain aplikasi di sekitar po!ok kanan atas dan klik.

aka disain aplikasi akan tampak seperti dibawah ini:

&. Lakukan sekali lagi untuk menambahkan "ontrol button yang kedua, sehingga akan tampakseperti dibawah ini:

D. MenaturProperti Kontrol 6o&/ol



4/9

%etiap kontrol yang kita gunakan atau letakkan dalam disain aplikasi yang kita buat harus

memiliki D yang unik dan se"ara de8ault diberi nama D dengan rumus

7DC'8control98no'urut9

6ontoh : 7DC'3:66*N adalah D yang diberikan untuk kontrol ;utton yang pertama yang

digunakan didalam disain aplikasi.

63


5/9

$. Pilih Properties, maka mun"ul kotak dialog Pus+ 3utton Properties, sebagai berikut :

&. Canti teks 7DC'3:66*Npada D dengan 7DC'3:66*N':CAPANCanti teks 3uttonpada 6aption dengan B:capan#

'. )lik 3utton), maka in8ormasi properties yang ditampilkan adalah milik kontrol 3utton)(. Cantilah properti 3utton) men!adi:

D : 7DC'3:66*N' K2":A;6aption : >,, untuk itu harus dibuatkan sebuah 8ungsi yang

mengkaitkan eent yang diberikan.

Lakukanlah langkah-langkah berikut :

1. Klik kanantombol button :capansehingga mun"ul menu pop-up.$. Pilih ClassWizard sehingga mun"ul kotak dialog di bawah ini :



6/9

&. Pada */ject 7Dspilih 7DC'3:66*N':CAPAN'. Pada Messaes$pilih 3N'C"7CK2D

(. )lik tombol Add ?andler..., sehingga mun"ul kotak dialog :

*. )lik tombol *K# sehingga *nClicked3utton:capanterda8tar pada Me&/er Function+. )lik tombol 2dit Codeuntuk menuliskan kode program, maka akan mun"ul editor sebagai

berikut :

;agian yang diarsir adalah tempat rangkaian kode program yang akan disisipkan.

. 2uliskan kode berikut :voidCLat_1_2Dlg!nClicked"utton#ca$an%&'

(( )!D! *dd our control noti,cation handler code here



7/9

-essage"o.%L/elamat "elaar Visual C++3/&45

;agian yang di"etak tebal adalah kode yang disediakan oleh Aditor 5isual 677.

. Dengan "ara yang sama pada tombol :capan, lakukan langkah-langkah tersebut untuk

tombol Keluar.

Klik kanantombol button Keluarsehingga mun"ul menu pop-up.

Pilih ClassWizard sehingga mun"ul kotak dialog MFC ClassWizard

Pada */ject 7Dspilih 7DC'3:66*N'keluar

Pada Messaes$pilih 3N'C"7CK2D

)lik tombol Add ?andler..., sehingga mun"ul kotak dialog Add Me&/er

Function

)lik tombol *K# sehingga 8ungsi OnBnClickedButtonKeluarterda8tar pada

Me&/er Function

)lik tombol 2dit Codedan tuliskan kode programvoidCLat_1_2Dlg!n"nClicked"utton6eluar%&'

(( )!D! *dd our control noti,cation handler code here!n!6%&4

5

@. %impan kode yang baru anda ketik dengan memilih menu File 1a4e

. Co&pileprogram anda dengan menekan F

). 2ksekusiprogram dengan menekan tombol CtrlBF, maka akan tampil :

1&. 2ekan tombol :capan, maka akan mun"ul kotak pesan sebagai berikut :

1'. )eluar dari kotak pesan, tekan tombol *K.

F. Kotak A/out

%etiap membuat plikasi dengan menggunakan E6 FiGard, se"ara de8ault telah memiliki kotak A/out.

Lakukan langkah-langkah berikut:

1. Aksekusi aplikasi "at'')yang masih terbuka di editor isual 677 anda, dengan menekan CtrlBF.

$. %etelah mun"ul kotak aplikasi yang kita buat, arahkan penun!uk mousepada ikon yang terdapat pada

sudut kiri atas kotak aplikasi Lat=1=$, kemudian kliksehingga mun"ul menu sebagai berikut :



8/9

&. Pilih A/out "at'')

aka akan mun"ul kotak dialog A/out "at')sebagai berikut :

5. Menu/a+ 7si Kotak A/out

Lakukan langkah-langkah berikut :

1. Pada kotak browse Aditor 5isual 677 yang terdapat dibagian kiri, kliktab ;esource =iew

). Klik tanda 7 disebelah kiri "at') resources

E. Klik tanda 7 disebelah kiri Dialo# hingga tampilannya sebagai berikut :

'. Dou/le klik pada 7DD'A3*:63*, maka akan tampil disain kotak A/out "at'') seperti

dibawah ini :

(. rahkan penun!uk mousepadaStatic Text Copyri+t (C! )@) , kliksehingga stati" te4t tersebut

akti8

*. Perhatikan bahwa !endelaPropertiesyang terdapat di bagian kanan sistem+. Ubahlah Captionmen!adi : Copyright (C) by Namaku 2012

. %impan hasil perubahan yang anda lakukan dengan memilih menu File 1a4e

. ;uild dan 9alankan program aplikasi anda

1. Klik ikon pada title !endela aplikasi anda dan pilih A/out "at'')maka akan mun"ul kotak

A/out "at'') sebagai berikut :



9/9

?. Menu/a+ 7kon

kon yang mun"ul di sudut kiri atas dari aplikasi yang dibuat dan pada bagian kiri kotak A/out "at')

dapat diubah dengan "ara sebagai berikut :

1. Pada kotak browse Aditor 5isual 677 yang terdapat dibagian kiri, kliktab ;esource =iew

). Klik tanda 7 disebelah kiri 7con# hingga tampilannya sebagai berikut :

&. Dou/le klik pada 7D;'MA7NF;AM2, maka editor akan menampilkan disain ikon seperti dibawah

ini :

'. Dengan menggunakan graphi"s toolbar yang terletak di sebelah kanan, lakukanlah pengeditan gambar

ikon, misalnya men!adi seperti gambar dibawah ini :

3uildprogram anda dengan kemudian !alankan, akan anda dapatkan bahwa ikon yang mun"ul pada

aplikasi yang anda buat telah berubah sesuai dengan ikon yang anda disain.


tutorial pembuatan kontrol button, kotak about dan ikon dengan visual studio

Documents