Pemrograman Aplikasi Visual C++

64
1 BAB 1: Pemrograman Aplikasi Visual C++ Visual C++ adalah compiler yang dapat digunakan untuk membuat program aplikasi berbasis Windows dengan cepat karena telah tersedianya tools yang disebut AppWizard. Dengan tools yang efektif ini maka programmer akan dapat menghasilkan program yang professional seperti halnya programmer yang berpengalaman, seperti melakukan pengaturan jendela program, menampilkan menu, membuat isian, dan menampilkan kontrol-kontrol obyek lainnya seperti command button, combo box, list box, slider dan lain- lain. 1.1 Tools AppWizard Untuk membuat bermacam aplikasi dapat digunakan tools AppWizard, terutama program yang dapat dijalankan secara langsung seperti file *.exe, dengan AppWizard juga dapat menghasilkan source program, seperti klas, obyek dan fungsi. Agar hal tersebut terwujud maka dapat dilakukan langkah-langkah sebagai berikut: ü Jalankan Visual C++ ü Klik pada menu File, klik New dan klik tab Project pada kotak dialog New seperti pada Gambar 1.1 dibawah ini. Gambar 1.1 Kotak dialog New ü Pilih MFC AppWizard (exe) ü Isilah nama proyek pada kotak edit Project name: proyekku ü Isilah direktori tempat menyimpan proyek tersebut: C:\Student\Sigwa ü Klik OK AppWizard akan menuju ke langkah berkutnya yaitu Step-1 dan seterusnya, setiap langkah terdapat pilihan yang harus dipilih guna menentukan bentuk aplikasi yang akan dibuat dan pendukungnya, seperti berbasis MDI, SDI atau Dialog. This watermark does not appear in the registered version - http://www.clicktoconvert.com

description

Ebook tentang pengenalan program visual C++. buku ini menjelaskan tentang pengenalan, penggunaan tentang visual C++ . ebook ini akan menjelaskan secara detil tentang keseluruhan mengenai visual C++. ebook ini cukup bagus untuk dibaca oleh orang-orang yang tertarik akan bahasa pemograman khususnya tentang visual C++

Transcript of Pemrograman Aplikasi Visual C++

Page 1: Pemrograman Aplikasi Visual C++

1

BAB 1: Pemrograman Aplikasi Visual C++

Visual C++ adalah compiler yang dapat digunakan untuk membuat program aplikasi berbasis Windows dengan cepat karena telah tersedianya tools yang disebut AppWizard. Dengan tools yang efektif ini maka programmer akan dapat menghasilkan program yang professional seperti halnya programmer yang berpengalaman, seperti melakukan pengaturan jendela program, menampilkan menu, membuat isian, dan menampilkan kontrol-kontrol obyek lainnya seperti command button, combo box, list box, slider dan lain- lain.

1.1 Tools AppWizard Untuk membuat bermacam aplikasi dapat digunakan tools AppWizard, terutama

program yang dapat dijalankan secara langsung seperti file *.exe, dengan AppWizard juga dapat menghasilkan source program, seperti klas, obyek dan fungsi. Agar hal tersebut terwujud maka dapat dilakukan langkah-langkah sebagai berikut:

ü Jalankan Visual C++ ü Klik pada menu File, klik New dan klik tab Project pada kotak dialog

New seperti pada Gambar 1.1 dibawah ini.

Gambar 1.1 Kotak dialog New

ü Pilih MFC AppWizard (exe) ü Isilah nama proyek pada kotak edit Project name: proyekku ü Isilah direktori tempat menyimpan proyek tersebut: C:\Student\Sigwa ü Klik OK

AppWizard akan menuju ke langkah berkutnya yaitu Step-1 dan seterusnya, setiap langkah terdapat pilihan yang harus dipilih guna menentukan bentuk aplikasi yang akan dibuat dan pendukungnya, seperti berbasis MDI, SDI atau Dialog.

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 2: Pemrograman Aplikasi Visual C++

2

1.2 Tipe Aplikasi Ada 3 tipe aplikasi yang dapat dipilih yaitu: ü Aplikasi SDI (Single document interface), seperti Notepad, hanya mempunyai

satu bukaan dokumen pada saat yang sama. Pada saat File, Open dipilih file yang dibuka ditutup sebelum membuka file yang baru.

ü Aplikasi MDI (Multiple document interface), seperti Exel atau Word, dapat membuka banyak dokumen (umumnya file) pada saat yang sama. Terdapat menu Jendela dan item Close pada menu File. Bila ingin melihat tampilan banyak pada suatu dokumen tunggal, maka harus dipilih aplikasi MDI.

ü Aplikasi dialog-based, seperti utilitas Character Map pada Windows, tidak mempunyai dokumen sama sekali dan tidak ada menu. Pada Windows XP, dapat diklik Start, Accessories, System Tools, Character Map.

1.3 Tipe Aplikasi Berbasis Dialog Tipe aplikasi ini dipilih karena bentuknya sederhana dan mudah bagi pemula untuk

mempelajarinya, meskipun tidak mendukung adanya akses basis data ataupun gabungan dokumen. Pada langkah pertama pilih Dialog based seperti Gambar 1.2 dibawah.

Gambar 1.2 Langkah 1 Pilihan Tipe Aplikasi

Selanjutnya klik next untuk melanjutkan ke langkah berikutnya, yaitu menentukan fitur-fitur yang akan disertakan pada dialog. Bila diinginkan item About seperti pada system menu, maka dapat dipilih item About Box. Untuk menambah tombol help maka dapat dipilih Context-sensitive Help. Sedangkan pada pilihan ketiga adalah 3D Control, seharusnya dipilih untuk aplikasi Windows 95 atau NT. Bila diinginkan aplikasi tersebut dibawah aplikasi lain maka pilih check box Automation. Bila aplikasi berisi control ActiveX maka pilih check box Active X Controls. Bila aplikasi direncanakan bekerja dibawah Internet dengan sokets, pilihkah kotak Windows Sokets, setelah pilihan ditentukan maka klik Next untuk pindah ke langkah selanjutnya, seperti Gambar 1.4.

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 3: Pemrograman Aplikasi Visual C++

3

Gambar 1.3 Langkah 2 Pilihan Fitur-fitur yang diinginkan

Gambar 1.4 Langkah 3 Pilihan Pustaka MFC

Pada langkah dibawah dapat dilakukan pengubahan nama-nama AppWizard untuk file dan kelas. Tapi ide ini jarang dilakukan karena akan membingungkan orang yang merawat program bila nama file tidak mudah dibedakan dari nama kelas dan sebaliknya. Bila telah terlanjur menggunakan nama yang tidak baik atau kurang sesuai sebaiknya menggunakan Back untuk kembali ke dialog Workspace Proyek baru, ubah nama, dan klik Create, dan menggunakan Next untuk kembalik ke dialog ini. Klik Finish

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 4: Pemrograman Aplikasi Visual C++

4

untuk melihat ringkasan dari file dan kelas yang akan dibuat, serupa pada Gambar 1.5 dibawah ini.

Gambar 1.5 Langkah 4 Pilihan Namafile dan Namakelas

Gambar 1.6 Konfirmasi Nama-nama file sebelum dilakukan pembuatan

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 5: Pemrograman Aplikasi Visual C++

5

Bila informasi diatas ada yang tidak disetujui maka klik Cancel untuk kembali kelangkah sebelumnya, betulkan dan kembali ke langkah ini. Klik OK setelah disetujui, maka aplikasi akan dibuat, yaitu tersedianya dialog kosong. Untuk mencoba dialog ini maka klik Build kemudian Run, maka akan ditampilkan seperti pada Gambar 1.7 dibawah ini.

Gambar 1.7 Tampilan awal dialog kosong “Dialogku”

Gambar 1.8 Toolbox Controls yang menyertai dialog kosong “Dialogku”

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 6: Pemrograman Aplikasi Visual C++

6

1.4 Icon-icon pada ToolBox Control Untuk memahami kegunaan dari Toolbox Control maka berikut ini akan diberikan

penjelasan singkat mengenai masing-masing dari Icon didalam ToolBox Control.

Icon Select Digunakan untuk mengubah penunjuk mouse menjadi normal (tidak memilih salah satu dari icon. Sehingga penunjuk mouse dapat digunakan untuk memilih pilihan menu lainnya.

Icon Picture Digunakan untuk meletakkan obyek gambar ke dialog, sehingga pengguna dapat menampilkan gambar didalam dialog.

Icon Static Text Dengan pilihan obyek ini maka memungkinkan pengguna dapat menampilkan komentar yang berupa teks didalam dialog.

Icon Edit Box Untuk mendapatkan masukan data dari keyboard, disamping itu Kotak Edit dapat digunakan untuk menampilkan keluaran/ hasil data, baik secara satu baris (single line) atau beberapa baris tampilan (scroll).

Icon Group Box Digunakan untuk mengelompokkan beberapa obyek yang sama menjadi satu grup, sehingga membuat tampilan lebih teratur dan lebih rapi.

Icon Button Obyek tombol ini sering digunakan karena aksi yang dilakukan didalam dialog biasanya dilakukan dengan penekanan suatu tombol, yaitu untuk menjalankan aksi yang diinginkan

Icon Check Box Kotak Check atau Check Box digunakan bila terdapat beberapa pilihan masukan data dan dapat dipilih semuanya, misalkan data tentang hobby, data menu makanan serta minuman.

Icon Radio Button Tombol Radio atau Radio Botton digunakan bila terdapat beberapa pilihan tetapi hanya satu pilihan saja yang harus dipilih, misalkan data kota kelahiran, jenis kelamin, umur dan pilihan jurusan.

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 7: Pemrograman Aplikasi Visual C++

7

Icon Combo Box Digunakan bila ada beberapa item pilihan tetapi hanya satu saja yang dapat dipilih, item pilihan dapat diganti, ditambah atau dihapus. Pilihan yang tidak dipilih dapat disembunyikan sehingga hanya item pilihan yang dipilih yang ditampilkan.

Icon List Box Fungsinya hampir sama dengan Kotak Combo atau Combo Box, List Box atau Kotak List

Icon Horizontal Scroll Bar Untuk membuat obyek scroll secara mendatar, obyek ini biasanya digabung dengan Kotak Edit. Sedangkan disini digunakan secara terpisah.

Icon Vertical Scroll Bar Untuk membuat obyek scroll secara menurun, obyek ini biasanya digabung dengan Kotak Edit, Kotak Combo atau Kotak List. Sedangkan disini digunakan secara terpisah.

Icon Progress Pada suatu proses program perulangan yang sedang berjalan lama, maka tidak dapat diketahui sejauh mana program looping tersebut dikerjakan. Dengan penggunaan obyek Progress maka dapat diperkirakan selesainya proses perulangan tersebut, karena proses yang telah dikerjakan akan ditampilkan pada obyek Progress.

Icon Slider Digunakan bila masukan adalah berupa perkiraan angka yang dilakukan dengan penekanan tombol mouse, sehingga pengguna lebih mudah memasukkan perkiraan angka yang diinginkan. Seperti setting perpaduan warna RGB.

Icon Tab Control Membuat dialog menjadi beberapa bagian tampilan yang terpisah, sehingga pengguna dapat memilih tampilan mana yang diinginkan berdasarkan pilihan menu tab.

Icon IP address Untuk menampilkan data Alamat IP dengan format titik.

Icon Month Calendar Untuk menampilkan calendar.

Icon Date Time Picker Untuk menampilkan tanggal dan jam.

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 8: Pemrograman Aplikasi Visual C++

8

BAB 2: Kotak Edit, Tombol Radio dan Kotak Cawang

Suatu alasan pembuatan program aplikasi berbasis dialog adalah dikarenakan bahwa, umumnya setiap program yang dibuat memerlukan masukkan (input) dari user, sehingga aplikasi berbasis dialog adalah yang paling tepat untuk digunakan disini. Berikut ini akan diberikan bermacam masukan (controls) yang telah disediakan oleh Visual C++ secara default. Untuk dapat membuat masukkan bagi program maka telah disediakan obyek yang disebut control dimana sudah dikumpulkan pada satu toolbox dengan icon yang bersesuaian dengan kegunaannya, seperti Gambar 1.8 pada bab sebelumnya. Dengan obyek-obyek tersebut maka programmer akan dapat dengan mudah memilih tipe masukan yang diinginkan, seperti kotak edit, tombol radio, kotak check, tombol aksi, scroll bar, slider dan lain sebagainya. Berikut ini akan dibahas satu persatu mengenai penggunaan dari obyek-obyek control tersebut.

2.1 Kotak Edit Control Kotak edit control adalah obyek yang sering digunakan karena bentuknya yang sederhana, dimana pengguna sudah terbiasa dengan tipe masukkan data seperti ini. Karena tipe masukan seperti ini sudah ada pada pemrograman sebelum windows ada. Dengan tipe masukan kotak edit maka pengguna dapat memasukkan data yang diperlukan oleh program, yaitu dengan mengetikkan data tersebut melalui keyboard. Berikut ini akan diberikan langkah- langkah pembuatan kotak edit yang sederhana, kemudian dapat dikembangkan menjadi yang lebih rumit. Langkah- langkah pembuatan:

1. Buatlah dulu Dialog kosong “Dialogku” seperti pada Bab I. 2. Hapuslah dulu Komentar ditengah Kotak Dialog tersebut, dengan cara klik teks

tersebut dan tekan del atau klik icon gunting. 3. Pada Toolbox Control pilih icon “Edit Box” dengan gambar symbol ab|, klik dan

tarik ke daerah dialog kosong “Dialogku”, atur penenpatannya seperti pada Gambar 2.1 dibawah,

4. Pilih pula icon “Static Text” dengan gambar symbol Aa, klik dan tarik ke daerah dialog kosong “Dialogku”, atur penempatannya seperti pada Gambar 2.1 dibawah,

5. Ulangi pembuatan kotak edit dan teks static tersebut sehingga menjadi dua, yang berarti dialog ini memerlukan masukkan dari pengguna sebanyak dua kali dari keyboard.

6. Ubahlah teks static tersebut sesuai dengan data yang akan dimasukkan, misalkan diinginkan untuk menghasilkan perhitungan pembagian, maka teks statik pertama (atas) diubah menjadi “Pembilang” dan teks static kedua (bawah) diubah menjadi “Penyebut”. Untuk mengubah cukup dilakukan klik kanan mouse pada obyek yang bersangkutan kemudian pilih properties. Pada kotak edit Caption gantilah dengan keterangan yang diinginkan misalkan “Penyebut”. Sehingga akan ditampilkan seperti pada Gambar 2.4 dibawah.

7. Gunakan pilihan menu bar utama yaitu “Layout” untuk mengatur tata letak dari obyek control yaitu Align, Space Evenly, Make Same Size, Arrange Buttons dan Center in Dialog.

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 9: Pemrograman Aplikasi Visual C++

9

Gambar 2.1 Tampilan Awal pembuatan Kotak Edit

Gambar 2.2 Mengganti tampilan pada teks static pertama (atas)

Gambar 2.3 Mengganti tampilan pada teks static kedua (bawah)

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 10: Pemrograman Aplikasi Visual C++

10

Gambar 2.4 Hasil tampilan teks setelah diubah

Setiap kotak edit mempunyai Identitas yaitu sebagai nama obyek yang bersangkutan, adapun identitas tersebut biasanya disingkat dengan IDC_EDITn. Nama identitas ini biasanya diset dengan huruf besar, bila akan diganti maka gunakan huruf besar, ingat bahwa huruf besar dan kecil akan berbeda (case sensitive). Untuk permasalahan disini sebaiknya tidak usah diganti, dimana ada dua kotak edit dengan Identitas berturut-turut IDC_EDIT1 dan IDC_EDIT2. Untuk melihat tampilan dialog sesungguhnya (preview) dapat ditekan [Ctrl] + [T]. 2.1.1 Mengambil Data Masukan Ada dua cara untuk mengambil data masukan dari kotak edit, yaitu menggunakan fungsi GetDlgItemInt() atau GetDlgItemText() bila data yang diinginkan berupa integer atau teks. Tetapi cara ini tidak disarankan yang disarankan adalah dengan variable anggota yang dideklarasikan terlebih dulu. Untuk dapat mengimplementasikan kedua cara tersebut, maka harus dibuat suatu fungsi baru untuk menanganinya, dimana fungsi tersebut adalah merupakan “peristiwa” (even) dari suatu obyek yang dikenai suatu pekerjaan (driven), misalkan diklik satu kali atau dienter dan lain sebagainya. Agar maksud tersebut dapat dilakukan maka tambahkan Button control (icon tombol kotak) pada dialog “Dialogku”, dengan cara klik dan tarik seperti sebelumnya. Kemudian gantilah label pada tombol tekan tersebut dengan kata “Proses”. Untuk lebih jelasnya dapat dilihat pada Gambar 2.6 dibawah.

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 11: Pemrograman Aplikasi Visual C++

11

Gambar 2.5 Penggantian label “Button1” menjadi “Proses”

Gambar 2.6 Penambahan tombol tekan “Proses”

Setelah tombol tekan ditambahkan kemudian klik pada tombol tersebut dua kali, maka akan pindah pada tampilan dialog penambahan fungsi anggota baru seperti pada Gambar 2.7 dibawah. Gantilah OnButton1 dengan OnProses, kemudian klik OK.

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 12: Pemrograman Aplikasi Visual C++

12

Gambar 2.7 Penambahan Fungsi Anggota

Gambar 2.8 Penggantian Nama Fungsi Anggota

Gambar 2.9 Penambahan Fungsi Anggota Baru “OnProses()”

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 13: Pemrograman Aplikasi Visual C++

13

Dari sini pembuatan program dapat dimulai, yaitu dibawah komentar //TODO, seperti pada Gambar 2.9 diatas. Tambahkan baris program berikut:

int pembilang, penyebut, hasil; char chasil[50]; pembilang=GetDlgItemInt(IDC_EDIT1); penyebut=GetDlgItemInt(IDC_EDIT2); hasil=pembilang/penyebut; sprintf(chasil,"Hasil pembagian = %d",hasil); MessageBox(chasil,"Kotak Pesan");

Program mendeklarasikan tiga variable yaitu pembilang, penyebut dan hasil dengan tipe integer (bulat) semuanya, dan juga satu variable string chasil dengan lebar 50 karakter yang digunakan untuk menampung hasil proses, yang telah diformat dalam bentuk string, sehingga dapat ditampilkan pada kotak pesan dengan fungsi MessageBox().

Fungsi sprintf() akan mencetak tampilan yang telah diformat kedalam variable string chasil, sehingga dapat ditampilkan pada kotak pesan dengan fungsi MessageBox(), untuk dapat menggunakan fungsi sprintf(), maka perlu ditambahkan file header “stdio.h” pada awal program utama yang menggunakan fungsi tersebut.

Jalankan program dan isikan suatu data misal 50 untuk pembilan dan 5 untuk penyebut, maka akan ditampilkan seperti pada Gambar 2.10 dibawah.

Gambar 2.10 Tampilan program dialog pembagian “Dialogku”

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 14: Pemrograman Aplikasi Visual C++

14

Kelemahan dari fungsi GetDlgItemText() dan GetDlgItemInt() adalah tipe pengambilan data sudah ditentukan yaitu kalau tidak teks maka integer (bulat), apabila datanya float (pecahan) maka harus dilakukan konversi dulu dari tipe karakter ke tipe float, sehingga tidak praktis untuk hal-hal tertentu. Untuk mengatasi hal tersebut maka dapat digunakan deklarasi variable anggota, dimana mendefinisikan suatu variable penampung pada suatu kotak edit yang bersangkutan, dimana tipenya variabelnya dapat diatur sesuai dengan kehendak. Sebelum dapat melakukan modifikasi program, maka lakukan dulu deklarasi variable anggota yaitu dengan cara:

1. Tekan [Ctrl] + [W] untuk membuka dialog MFC ClassWizard seperti pada Gambar 2.11 dibawah.

Gambar 2.11 Kotak Dialog MFC ClassWizard

2. Pilih tab Member Variables, pada kotak edit IDs pilih IDC_EDIT1, klik

tombol Add Variable disebelah kanan atas, maka akan ditampilkan seperti pada Gambar 2.12 dibawah.

3. Masukkan nama variable yang akan digunakan untuk menyimpan data masukan dari kotak edit (misalkan m_penyebut), secara default variable ini didepannya diberi symbol m_ yang berarti bahwa variable ini merupakan variable (memori) dari masukan obyek control.

4. Pada isian Category terdapat dua pilihan yaitu Value dan Control, Pilih Value bila variable bersifat biasa dan Control untuk keperluan pengendalian tertentu seperti menampilkan karakter secara multiline (akan dibahas kemudian).

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 15: Pemrograman Aplikasi Visual C++

15

5. Pilih tipe variable yang diinginkan pada pilihan Variable type, misalkan pilih tipe variable float. Kemudian klik OK.

6. Ulangi langkah-langkah tersebut untuk IDC_EDIT2, sehingga didapatkan daftar ID seperti pada Gambar 2.13 dibawah. Klik OK untuk menutup dialog MFC ClassWizard.

Gambar 2.12 Dialog MFC ClassWizard pada tab Member Variable

Setelah variable-variabel tersebut dideklarasikan, maka dapat dilihat

keberadaannya dalam program yaitu dengan cara Klik tab ClassView pada menu sebelah kiri tengah (lihat Gambar 2.14a dibawah), klik tanda “+” pada dialogku classess, klik tanda “+” pada CDialogkuDlg, maka akan ditampilakan daftar keanggotaan dari class tersebut. Kemudian klik 2x pada nama variable yang ingin diketahui letaknya. Ternyata variable-varaibel tersebut diletakkan pada file berektensi .h (header), file tersebut disusun (didaftar) didalam daftar file proyek dialogku files, untuk melihat susunan file dapat diklik pada menu tab FileView disebelah kanan dari 2 tab ClassView. Untuk lebih jelasnya lihat Gambar 2.14b (dibawah).

Untuk melakukan modifikasi dari varibel-variabel tersebut maka dapat dilakukan dengan cara kembali ke dialog ClassWizard, misalkan diinginkan untuk membatas jumlah dari data yang dapat diterima oleh variable yang bersangkutan maka dapat dilakukan pengisian nilai minimum dan maksimum. Untuk lebih jelasnya ikuti langkah-langkah sebagai berikut:

1. Tekan [Ctrl] + [W] untuk membuka dialog ClassWizard.

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 16: Pemrograman Aplikasi Visual C++

16

2. Pilih tab Member Variables, pilih variable yang akan diubah, 3. Isikan pada kotak edit dibawah yaitu pada Minimum Value dengan nilai

minimum yang dikehendaki, misalkan 0. 4. Isikan pada kotak edit Maximum Value dengan nilai maksimum, misalkan 100 5. Klik OK.

Lihat perubahan tersebut pada program, yaitu klik ClassView, klik pada DoDataExchange(CDataExchange *pDX), maka akan terlihat pada editor sebagai berikut: void CDialogkuDlg::DoDataExchange(CDataExchange* pDX) { CDialog::DoDataExchange(pDX); //{{AFX_DATA_MAP(CDialogkuDlg) DDX_Text(pDX, IDC_EDIT1, m_pembilang); DDV_MinMaxFloat(pDX, m_pembilang, 0.f, 100.f); DDX_Text(pDX, IDC_EDIT2, m_penyebut); //}}AFX_DATA_MAP }

Terdapat tambahan fungsi DDV_MinMaxFloat(), yang berfungsi untuk membatasi jangkauan data yang diinginkan, sehingga validasi data terjamin dari kesalahan pengetikan pengguna.

Gambar 2.13 Daftar TipeVariabel yang dibuat

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 17: Pemrograman Aplikasi Visual C++

17

(a) (b)

Gambar 2.14a Tapilan Jendela ClassView, 2.14b Tampilan Jendela FileView Sedangkan nilai awal dari kedua variable tersebut dapat dilihat pada ClassView dimana terletak pada fungsi CDialogkuDlg(CWnd *pParent=NULL), seperti dibawah ini: CDialogkuDlg::CDialogkuDlg(CWnd* pParent /*=NULL*/) : CDialog(CDialogkuDlg::IDD, pParent) { //{{AFX_DATA_INIT(CDialogkuDlg) m_pembilang = 0.0f; m_penyebut = 0.0f; //}}AFX_DATA_INIT // Note that LoadIcon does not require a subsequent DestroyIcon in Win32 m_hIcon = AfxGetApp()->LoadIcon(IDR_MAINFRAME); }

Untuk mencoba kebenaran dari seting diatas maka modifikasi program sebelumnya (ganti semua), yaitu pada fungsi ::OnProses() dengan program dibawah ini:

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 18: Pemrograman Aplikasi Visual C++

18

float fhasil; char chasil[50]; UpdateData(TRUE); fhasil=m_pembilang/m_penyebut; sprintf(chasil,"Hasil pembagian = %f",fhasil); MessageBox(chasil,"Kotak Pesan");

Fungsi UpdateData(TRUE) digunakan untuk memperbarui nilai dari variable obyek kontrol m_ sehingga bila terjadi perubahan pada data masukan maka otomatis akan digunakan sebagai data yang baru. Jalankan program dan masukkan data pembilang diatas 100, dan masukkan penyebut dengan nilai selain nol, klik tombol proses, maka akan ditampilkan pesan kesalahan seperti pada Gambar 2.15 dibawah. Bila kotak pesan kesalahan ditampilkan maka nilai yang dimasukkan tidak akan digunakan, meskipun proses terus berjalan dan akan menghasilkan nilai yang salah. Ini dapat diatasi dengan memberikan validasi data sebelum dilakukan proses, sehingga bila input salah maka tidak akan dilakukan proses perhitungan.

Gambar 2.15 Pesan Kesalahan yang terjadi

2.1.2 Menampilkan Hasil Proses Pada subbab diatas telah dibahas bagaimana mendapatkan data dan menampilkan data, akan tetapi hasil proses masih ditampilkan pada kotak pesan (terpisah dari dialog utama). Berikut ini akan diberikan cara untuk menampilkan hasil proses dalam dialog yang sama, yaitu dengan memanfaatkan kotak edit sebagai tampilan hasil proses. Kotak edit dapat digunakan untuk menampilkan hasil proses secara satu baris atau beberapa baris, untuk beberapa baris maka harus dilakukan trik khusus yang akan dibahas setelah pembahasan menampilkan hasil proses dalam satu baris. Adapun langkah yang dilakukan untuk menampilkan hasil proses dalam satu baris adalah cukup mudah yaitu klik icon “Edit box” kemudian letakkan pada tempat yang diinginkan dan berikan label seperti pada Gambar 2.16 dibawah. Untuk menuju Dialog Editor yaitu dengan cara klik tab ResourceView disebelah kanan ClassView, klik tanda “+” pada dialogku resources, klik tanda “+” pada Dialog dan klik pada IDD_DIALOGKU_...

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 19: Pemrograman Aplikasi Visual C++

19

Untuk menampilkan hasil proses dapat dilakukan juga dengan dua cara seperti halnya mendapatkan data dari kotak edit, yaitu dengan SetDlgItemText() atau SetDlgItemInt() atau dengan fungsi SetWindowText().

Gambar 2.16 Kotak Edit untuk Menampilkan Hasil Proses dalam Satu Baris Berikut ini digunakan cara pertama yaitu menggunakan fungsi SetDlgItemText() dimana data yang akan ditampilkan harus dilakukan format data menjadi bentuk string dengan fungsi sprintf() yang merupakan kumpulan dari file header “stdio.h” seperti halnya pada program sebelumnya.

void CDialogkuDlg::OnProses() {

// TODO: Add your control notification handler code here float fhasil; char chasil[50]; UpdateData(TRUE); fhasil=m_pembilang/m_penyebut; sprintf(chasil,"Hasil pembagian = %f",fhasil); //MessageBox(chasil,"Kotak Pesan"); SetDlgItemText(IDC_EDIT3,chasil);

}

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 20: Pemrograman Aplikasi Visual C++

20

Fungsi SetDlgItemText() memerlukan ID dari kotak edit yang bersangkutan, disini IDnya adalah IDC_EDIT3 sehingga hasil proses akan ditampilkan pada kotak ID yang disebutkan dalam parameter fungsi ini.

Gambar 2.17 Hasil tampilan pembagian

Untuk menampilkan hasil proses secara multiline maka dapat dilakukan dengan setting pada properties dari kotak edit tersebut yaitu dengan langkah sebagai berikut:

1. Klik kanan pada kotak edit yang bersangkutan, klik properties 2. Klik tab Styles, klik Multiline, klik Auto VScroll (lihat Gambar 2.18) 3. Klik tanda x pada sudut kanan atas untuk selesai, 4. Lebarkan kotak edit tampilan proses hasil seperti pada Gambar 2.19 dibawah.

Gambar 2.18 Setting kotak edit tampilan proses hasil untuk Multiline

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 21: Pemrograman Aplikasi Visual C++

21

Gambar 2.19 Modifikasi Kotak Edit Hasil Proses

Tambahkan/ modifikasi baris-baris berikut pada program sebelumnya: void CDialogkuDlg::OnProses() { // TODO: Add your control notification handler code here float fhasil; char chasil[50]; int i; CString sbuffer=""; UpdateData(TRUE); fhasil=m_pembilang/m_penyebut; for(i=0; i<10; i++) { sprintf(chasil,"Hasil pembagian = %f\r\n",fhasil); sbuffer+=chasil; } SetDlgItemText(IDC_EDIT3,sbuffer); }

Program akan mencetak 10 kali hasil proses pada variable chasil, yaitu dengan cara perulangan for(), sedangkan untuk menampilkan 10 tampilan tersebut harus dilakukan dalam variable memori (sbuffer) yang ditandai dengan “\r\n” untuk ganti baris baru. Setelah tampilan berada dalam variable sbuffer, maka dapat ditampilkan sekaligus ke kotak edit dengan fungsi SetDlgItemText().

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 22: Pemrograman Aplikasi Visual C++

22

Gambar 2.20 Hasil Tampilan Proses Multiline

Untuk menampilkan hasil proses tersebut pada Gambar 2.20 diatas, dapat pula dilakukan dengan fungsi SetWindowText(), yaitu modifikasi program diatas menjadi seperti dibawah ini: void CDialogkuDlg::OnProses() { // TODO: Add your control notification handler code here float fhasil; char chasil[50]; int i; CString sbuffer=""; UpdateData(TRUE); fhasil=m_pembilang/m_penyebut; for(i=0; i<10; i++) { sprintf(chasil,"Hasil pembagian = %f\r\n",fhasil); sbuffer+=chasil; } m_tampilan.SetWindowText(sbuffer); }

Kemudian masuk ke dialog ClassWizard klik tab Member Variables, deklarasikan suatu variable [Add Variable…] pada kotak edit yang bersangkutan (IDC_EDIT3) dengan nama m_tampilan dan pilihan Category adalah Control sehingga mempunyai tipe varaibel CEdit seperti pada Gambar 2.21 dibawah:

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 23: Pemrograman Aplikasi Visual C++

23

Gambar 2.21 Variabel Kontrol m_tampilan

Jalankan program dan akan didapatkan hasil sama seperti pada Gambar 2.20 diatas.

LATIHAN MEMBUAT APLIKASI 1. Buatlah aplikasi dialog dengan nama “Kabisat”, dimana proyek tersebut berbasis

dialog. Rancanglah masukan dan keluaran kotak edit sesuai dengan maksud dari proyek tersebut. Petunjuk: 2 kotak edit, 1 tombol tekan. Apabila kotak edit pertama dimasukkan tahun kabisat maka dikotak edit kedua setelah ditekan tombol proses akan menampilkan Tahun Kabisat begitu sebaliknya.

2. Buatlah aplikasi dialog dengan nama “Kalkulator”, dimana proyek tersebut berbasis dialog. Didalam dialog terdapat tiga kotak edit yang masing-masing mempunyai label (static text) “data pertama”, “data kedua”, dan label “hasil proses”. Ada Lima tombol aksi yang terdiri dari tombol berlabel “Perkalian”, “Pembagian”, “Penambahan” dan “Pengurangan” serta tombol “Selesai”.

3. Buatlah aplikasi dialog dengan nama “Derajat”, dimana dalam proyek tersebut berbasis dialog. Masukan program berupa jam dan menit, sedangkan keluaran program berupa derajat dari sudut sisi yang lancip kedua jarum jam, contoh jam 3:30 adalah 75 derajat.

4. Buatlah proyek dengan nama “Detik”, dimana proyek berbasis dialog. Masukan program berupa jumlah detik sedangkan keluaran program berupa Hari, Jam, Menit dan Detik. Contoh 100000 detik adalah setara dengan 1 Hari, 3 Jam, 46 Menit dan 40 detik.

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 24: Pemrograman Aplikasi Visual C++

24

2.2 Tombol Radio Tombol radio digunakan untuk menentukan satu pilihan dari beberapa pilihan yang tersedia, seperti contohnya data pria/ wanita, merah/ putih, elektronika/ telekomunikasi/ listrik/ informatika dan lain sebagainya. Tombol radio adalah suatu obyek yang harus dilakukan pengolompokan karena tidak seperti obyek lainnya dimana obyek tombol radio mempunyai banyak obyek tetapi hanya ditangani oleh satu variable saja dan tidak dapat ditangani oleh beberapa variable, seperti halnya obyek lain. Langkah- langkah implementasi dari tombol radio ini adalah sebagai berikut:

1. Klik icon “Radio button” dan tarik pada editor dialog, sebanyak 4 kali. 2. Masing-masing tombol radio tersebut ubah label “Radio” dengan label Jurusan

Elektronika, Telkomunikasi, Listrik dan Informatika. 3. Klik icon “Edit Box” dan tarik pada editor dialog dan sesuaikan. Diberikan label

“Pilihan Jurusan”. 4. Klik icon “Button” dan tarik pada editor dialog kemudian ubah namanya menjadi

“Pilih”. Untuk lebih jelasnya perhatikan Gambar 2.22 dibawah. 5. Tekan tombol [Ctrl] dan klik pada masing-masing Jurusan sehingga menjadi satu

grup lihat Gambar 2.22, klik kanan dan cawang pada kotak check group, seperti pada Gambar 2.23 dibawah.

6. Tekan tombol [Ctrl] + [W] untuk mengaktifkan ClassWizard, kemudian klik Member Variables maka akan ditampilkan ID seperti pada Gambar 2.24 dibawah.

Gambar 2.22 Dialog Radio dengan Pilihan 4 Jurusan

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 25: Pemrograman Aplikasi Visual C++

25

Gambar 2.23 Kotak check Grup dicawang

Gambar 2.24 Anggota Variabel Radio dengan Type CButton

7. Tambahkan variable pada masing-masing IDC_RADIO1 s/d ID_RADIO4, yaitu

berturut-turut m_elektronika, m_telekomunikasi, m_listrik dan m_informatika, dengan catagory masing-masing adalah Control seperti pada Gambar 2.25 dibawah, sehingga akan didapatkan seperti pada Gambar 2.24 diatas.

8. Klik tombol radio dua kali pada masing-masing tombol radio, untuk menambah aksi baru bila tombol tersebut ditekan, beri nama masing-masing fungsi berturut-t u r u t OnElektronika, OnTelekomunikasi, OnListrik, dan OnInformatika.

9. Ketik program dibawah ini sesuai dengan fungsinya, perhatikan program yang dibawah //TODO.

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 26: Pemrograman Aplikasi Visual C++

26

void CRadioDlg::OnElektronika() { // TODO: Add your control notification handler code here UpdateData(); m_pilihan.Format("%s","Teknik Elektronika"); UpdateData(FALSE); } void CRadioDlg::OnTelekomunikasi() { // TODO: Add your control notification handler code here UpdateData(); m_pilihan.Format("%s","Teknik Telkomunikasi"); UpdateData(FALSE); } void CRadioDlg::OnListrik() { // TODO: Add your control notification handler code here UpdateData(); m_pilihan.Format("%s”,"Teknik Listrik"); UpdateData(FALSE); } void CRadioDlg::OnInformatika() { // TODO: Add your control notification handler code here UpdateData(); m_pilihan.Format("%s","Teknik Informatika"); UpdateData(FALSE); }

10. Untuk menampilkan hasil pilihan tombol radio, maka tambahkan variable m_pilihan pada kotak edit, dengan Category value dan tipe CString, lihat pada Gambar 2.24 diatas.

11. Penting dilakukan disini yaitu klik kembali semua tombol radio dengan bersamaan menekan tombol [Ctrl], hapus cawang pada kotak check Group.

12. Jalankan Program.

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 27: Pemrograman Aplikasi Visual C++

27

Gambar 2.25 Seting Variabel Radio dengan Category Control

Modifikasi program tersebut dengan mengaktikkan tombol tekan “Pilih”,

sehingga pada saat tombol radio dipilih maka hasilnya belum ditampilkan sebelum menekan tombol “Pilih”. 1. Klik dua kali pada tombol “Pilih”, berikan nama OnPilih pada kotad edit. 2. Modifikasi program menjadi seperti dibawah ini:

void CRadioDlg::OnElektronika() { m_pilihan="Teknik Elektronika"; } void CRadioDlg::OnTelekomunikasi() { m_pilihan="Teknik Telkomunikasi"; } void CRadioDlg::OnListrik() { m_pilihan="Teknik Listrik"; } void CRadioDlg::OnInformatika() { m_pilihan="Teknik Informatika"; } void CRadioDlg::OnPilih() { SetDlgItemText(IDC_EDIT1,m_pilihan); }

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 28: Pemrograman Aplikasi Visual C++

28

LATIHAN MEMBUAT APLIKASI 1. Buatlah tampilan dialog dengan nama “Operator” seperti dibawah ini, kemudian

sesuaikan program aplikasi yang dibuat. Aplikasi akan menampilkan hasil dari kedua bilangan, sesuai dengan pilihan operatornya yaitu perkalian, pembagian, penjumlahan dan pengurangan.

2. Buatlah program untuk menampilkan soal pilihan ganda menggunakan tombol radio, seperti pada tampilan dibawah ini.

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 29: Pemrograman Aplikasi Visual C++

29

Petunjuk langkah-langkah pembuatan: ü Buatlah dulu form dialog seperti dibawah ini:

ü Tab order-nya adalah sebagai berikut:

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 30: Pemrograman Aplikasi Visual C++

30

ü Tabel propertinya adalah sebagai berikut:

Control ID Caption Property

1 Group Box IDC_QUESTION_NBR Question

2 Kotak Edit IDC_SOAL Multiline = cawang Vertical Scroll = ON

3 Group Box Answers

4 Tombol Radio IDC_RDO_JAWAB1 Group = cawang

5 Tombol Radio IDC_RDO_JAWAB2 Group = cawang

6 Tombol Radio IDC_RDO_JAWAB3 Group = cawang

7 Tombol Radio IDC_RDO_JAWAB4 Group = cawang

8 Tombol Tekan IDC_BERIKUTNYA &Berikutnya Default = cawang

9 Tombol Tekan IDCANCEL &Selesai

ü Anggota variabelnya adalah sebagai berikut:

Untuk menampilkan semua IDC RADIO, jangan lupa klik semua tombol radio sambil menekan tombol [Ctrl], kemudian cawang pilihan Group, setelah Anggota Variabel diset hapus cawang pada Group.

ü Klik pada ClassView, klik pada tanda + Pilihan Classes, klik 2x pada

CPilihanDlg, maka akan ditampilkan Klas dari CPilihanDlg, tambahkan deklarasi program dibawah ini yaitu setelah baris program DECLARE_MESSAGE_MAP()

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 31: Pemrograman Aplikasi Visual C++

31

private:

int JumlahPertayaan;

ü Klik tanda + pada folder CPilihanDlg, klik 2x pada CInitDialog, dan tambahkan

baris dibawah ini setelah //TODO

JumlahPertayaan = 3; OnBerikutnya();

ü Masih pada ClassView, klik kanan pada folder CPilihanDlg, pilih Add Member

Function dan isikan seperti Gambar dibawah ini

ü Ketik program dibawah ini didalam fungsi yang baru saja dibuat:

int Jawaban;

switch(q) { case 0:

m_Pertanyaan.Format("Manakah bahasa tingkat menengah?"); m_Jawab1.SetWindowText("Pascal"); m_Jawab2.SetWindowText("C"); m_Jawab3.SetWindowText("Fortran"); m_Jawab4.SetWindowText("Basic"); Jawaban = 2; break;

case 1: m_Pertanyaan.Format("Visual C++ dibuat oleh siapa?"); m_Jawab1.SetWindowText("Borland"); m_Jawab2.SetWindowText("Seagate"); m_Jawab3.SetWindowText("Microsoft"); m_Jawab4.SetWindowText("Infogamer"); Jawaban = 3; break;

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 32: Pemrograman Aplikasi Visual C++

32

case 2: m_Pertanyaan.Format("Visual C++ termasuk permrograman"); m_Jawab1.SetWindowText("Linear"); m_Jawab2.SetWindowText("Graphics"); m_Jawab3.SetWindowText("Database"); m_Jawab4.SetWindowText("Non Linear"); Jawaban = 4; break;

} return Jawaban;

ü Klik dua kali pada tombol Berikutnya, isikan nama OnBerikutnya untuk membuat

fungsi baru OnBerikutnya(), dan tambahkan baris-baris program dibawah ini:

static int q=0; UpdateData(TRUE); if(q<JumlahPertanyaan) TanyaJawab(q); q++; UpdateData(FALSE);

ü Jalankan program, modifikasilah program dengan menambahkan nomor urut

program, tambahkan pertanyaan yang lainnya, dan bila jawaban benar berilah keterangan benar, dan berilah keterangan salah bila jawaban salah.

1.3 Kotak Cawang Seperti halnya pada obyek tombol radio, maka obyek kotak cawang (check box)

dapat digunakan untuk menentukan pilihan dari pengguna, perbedaan dari tombol radio dan kotak cawang adalah bahwa kota cawang dapat dipilih lebih dari satu atau semuanya, bahkan tidak memilih satu pilihanpun bias.

Umumnya penggunaan kotak cawang adalah bila ada beberapa pilihan yang harus dipilih misalkan pilihan hobby, pilihan menu makanan, pilihan soal jawaban ganda, pilihan tampilan hasil dan lain sebagainya.

Untuk mengimplementasikan pembuatan kotak cawang ini maka dapat diikuti langkah-langkah dibawah ini: ü Buatlah dialog dengan nama Hobby, klik obyek kotak cawang dan letakkan pada

posisi seperti pada layout dibawah ini:

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 33: Pemrograman Aplikasi Visual C++

33

ü Buatlah nama ID dan anggota variable seperti dibawah ini:

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 34: Pemrograman Aplikasi Visual C++

34

ü Untuk ID_ED_TAMPILAN aktifkan edit properties kotak cawang Multiline dan Vertical scroll.

ü Hapus tombol OK dan buatlah tombol baru dengan nama ID yaitu IDC_BTN_TAMPIL, beri nama Caption dengan nama &Tampil

ü Klik 2x pada tombol Tampil, dan isikan nama OnTampil, sehingga akan dibuat secara otomatis fungsi dengan nama ::OnBtnTampil().

ü Isikan program dibawah ini didalam fungsi ::OnBtnTampil().

CString cTampilan, cHobby1, cHobby2, cHobby3, cHobby4, cHobby5;

UpdateData(); if(m_hobby1) cHobby1="Membaca"; else cHobby1=""; if(m_hobby2) cHobby2="Olah raga"; else cHobby2=""; if(m_hobby3) cHobby3="Komputer"; else cHobby3=""; if(m_hobby4) cHobby4="Elektronika"; else cHobby4=""; if(m_hobby5) cHobby5="Jalan-jalan"; else cHobby5=""; cTampilan=m_nama+"\r\n"+m_alamat+"\r\n"+m_jurusan+ “\r\n”; cTampilan+=cHobby1+”\r\n”+cHobby2+”\r\n”+cHobby3+

“\r\n”+cHobby4+”\r\n”+cHobby5; m_tampilan.Format(cTampilan); UpdateData(FALSE);

ü Jalankan program, isikan data, pilih hobby dan tekan tombol “Tampil”.

LATIHAN MEMBUAT APLIKASI 1. Buatlah aplikasi dialog dengan nama “Harga”, yang berisi harga menu makanan

yang dipesan oleh pelanggan dari suatu café “Mo Lagi Ah”. Layout dari dialog tersebut dapat dilihat pada Gambar dibawah. Buatlah perhitungan total dari menu makanan yang dipesan oleh pelanggan. Modifikasi layout dengan menu makanan dan minuman yang lainnya.

2. Buatlah aplikasi dialog dengan nama “Konversi”, dimana dialog ini menangani konversi suatu dasar/ basis bilangan, yaitu Biner, Oktal, Desimal dan Hexa. Bilangan yang dimasukkan dapat dipilih salah satu dari keempat dasar bilangan tersebut, untuk lebih jelasnya perhatikan pada layout dialog dibawah ini:

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 35: Pemrograman Aplikasi Visual C++

35

3. Modifikasilah aplikasi dialog pada latihan no.2 menjadi konversi temperature dan mata uang, dengan nama dialog “Konversi2” dan “Konversi3”.

4. Buatlah aplikasi dialog dengan nama “Restoran”, yang menangani pemesanan

makanan dan minuman seperti pada layout dibawah ini, buatlah modifikasinya:

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 36: Pemrograman Aplikasi Visual C++

36

BAB 3: Kotak Combo dan Kotak List

Berikut ini akan diberikan pembuatan kontrol jendela yang lain, dimana kontrol-kontrol ini disebut Kotak Combo dan Kotak List. Keduanya mempunyai kesamaan yaitu terdapat pilihan item-item pada jendela kontrol tersebut, sehingga pengguna tinggal memilih pilihan yang dikehendaki. Dengan kontrol-kontrol ini memudahkan pengguna memasukkan pilihan, karena pilihan sudah disediakan dan dapat menghindari kesalahan masukan.

3.1 Kotak Combo Seperti telah diuraikan diatas bahwa, Kotak Combo adalah kontrol jendela yang menyimpan beberapa daftar pilihan didalam jendelanya. Masing-masing item pilihan dapat berupa karakter atau string. Ada dua tipe dari Kotak Combo, yaitu tanpa menggunakan panah penunjuk (Simple) dan menggunakan panah penunjuk disisi kanan kotak isian (Dropdown/ Drop List), untuk lebih jelasnya maka perhatikan Gambar 3.1 dan Gambar 3.4 dibawah ini.

Kotak Combo dapat dibuat dengan memilih icon pada toolbox Controls.

Gambar 3.1 Kotak Combo Simple tidak Menggunakan Panah Penunjuk

Untuk mengisi pilihan dalam Kotak Combo maka pilih tab Data dan isikan Pilihan Jurusan seperti Gambar 3.2 dibawah ini, untuk berpindah baris maka harus digunakan [Ctrl] + [Enter], karena bila tombol Enter saja maka Properties akan ditutup.

Gambar 3.2 Properties Data

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 37: Pemrograman Aplikasi Visual C++

37

Pilihlah pada kotak List Type yaitu Simple, hilangkan cawang pada Kotak Cawang Sort, kemudian cawang pada Kotak Cawang pada Disable no scroll. Kemudian atur Kotak Combo seperti pada Gambar 3.1 diatas. Untuk meneriksa apakah tampilan sudah benar maka tekan [Ctrl] + [T].

Gambar 3.3 Properties Styles untuk Kotak Combo Simple

Gambar 3.4 Kotak Combo Drop List Menggunakan Panah Penunjuk

Gambar 3.5 Properties Styles untuk Kotak Combo Drop List

Secara tampilan antara tampilan Dropdown dan Drop List adalah sama, tetapi secara fungsi berbeda yaitu bahwa Dropdown dapat diisi masukan pilihan baru sedangkan Drop List tidak dapat diisikan pilihan baru. Gunakan pilihan Dropdown bila pengguna dapat memasukkan pilihan diluar pilihan yang tersedia.

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 38: Pemrograman Aplikasi Visual C++

38

Gambar 3.6 Kotak Combo Dropdown Menggukan Panah Penunjuk 3.1.1 Setting Data pada Kontak Combo Setting Data item pilihan pada Kotak Combo dapat dilakukan melalui dua cara, cara yang pertama adalah telah dijelaskan diatas yaitu menggunakan properties Data, sedangkan cara kedua adalah menggunakan program, sehingga data item pilihan akan ada setelah program dijalankan. Untuk dapat melakukan itu buatlah layout dialog seperti dibawah ini:

Gambar 3.7 Layout Kotak Combo Daftar Kota

Gambar 3.8 Setting Nama ID untuk Kotak Combo Daftar Kota

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 39: Pemrograman Aplikasi Visual C++

39

Gambar 3.9 Setting Nama ID untuk Kotak Combo Kota Pilihan

Gambar 3.10 Properties Tipe dan pilihan cawang Kotak Combo

Buatlah Variable Anggota untuk Kotak Combo ID_DAFTARKOTA dengan nama m_daftarkota dengan Category Control seperti Gambar 3.11 dibawah ini:

Gambar 3.11 Variabel Anggota m_daftarkota dengan Category Control

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 40: Pemrograman Aplikasi Visual C++

40

Gambar 3.12 Variabel Anggota m_kotapilihan dengan Variable type CString

Gambar 3.13 Daftar ID dan Variabel Anggotanya

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 41: Pemrograman Aplikasi Visual C++

41

Tambahkan baris program dibawah ini didalam fungsi OnInitDialog() dibawah baris //TODO sebagai berikut:

m_daftarkota.AddString("Surabaya");

m_daftarkota.AddString("Gresik"); m_daftarkota.AddString("Lamongan"); m_daftarkota.AddString("Malang"); m_daftarkota.AddString("Sidoarjo"); m_daftarkota.AddString("Probolinggo”); m_daftarkota.AddString("Situbondo"); m_daftarkota.AddString("Banyuwangi"); m_daftarkota.AddString("Magetan"); m_daftarkota.AddString("Madiun"); m_daftarkota.AddString("Jombang"); m_daftarkota.AddString("Blitar");

Untuk menampilkan pilihan default maka dapat digunakan obyek SetCurSel(), misalkan pilihan adalah kota Magetan maka dapat dilakukan m_daftarkota.SetCurSel(8), angka “8” adalah nomor urutan daftar kota, magetan adalah urutan kedelapan pada daftar program diatas, hitungan dimulai dari 0 (nol) . Jalankan program maka akan ditampilkan seperti pada Gambar 3.14 dibawah ini, dimana Daftar Kota telah berisi kota Magetan.

Gambar 3.14 Hasil dialog DropDown dengan pilihan default kota Magetan Panggil dialog ClassWizard dengan [Ctrl] + [W], pilih pada kotak Obyek IDs yaitu IDC_DAFTARKOTA, kemudian pilih pada kotak Messages CBN_SELCHANGE, klik pada tombol Add Function, maka akan muncul pesan nama fungsi yang akan dibuat yaitu OnSelchangeDaftarkota, klik OK, maka akan dibuat fungsi yang baru yaitu dengan nama ::OnSelchangeDaftarkota(), kemudian tambahkan program dibawah ini dibawa //TODO sebagai berikut: m_daftarkota.GetLBText(m_daftarkota.GetCurSel(), m_kotapilihan); UpdateData(FALSE);

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 42: Pemrograman Aplikasi Visual C++

42

Gambar 3.15 Membuat fungsi baru OnSelchangeDaftarkota Jalankan program maka akan ditampilkan pilihan kota pada kotak edit Kota Pilihan setelah memilih kota pada kota Combo Daftar Kota.

Gambar 3.16 Tampilan pada saat memilih Kota pada kotak Combo Daftar Kota

LATIHAN MEMBUAT APLIKASI 1. Buatlah aplikasi dialog “KotaPilihan” dengan layout seperti dibawah ini. Setiap

memilih Kota pada kotak Combo maka kota tersebut ditampilkan pada kotak Edit “Kota Pilihan”. Buatlah tombol button dengan caption “>”, fungsi tombol ini adalah untuk memindahkan kota yang telah dipilih kedalam kotak Edit yang bersesuaian pada “Pilihan Kota”. Ada 4 kotak “Pilihan Kota”, sehingga memungkinkan untuk memilih kota lebih dari satu. Saat tombol button “>” ditekan maka kota tersebut akan dihapus dari “Daftar Kota” pada kotak Combo.

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 43: Pemrograman Aplikasi Visual C++

43

Petunjuk: Gunakan fungsi DeleteString()atau InsertString() untuk mengapus atau menyisipkan kota pada Daftar Kota pada Kotak Combo. Fungsi GetCount() digunakan untuk menghitung jumlah Kota pada Kotak Combo. Perhatikan juga baris-baris program dibawah ini:

void CKotaPilihanDlg::OnDblclkDaftarkota() { // TODO: Add your control notification handler code here

m_daftarkota.GetLBText(m_daftarkota.GetCurSel(), m_kotapilihan); m_jmlkota.Format("%d",m_daftarkota.GetCount());

UpdateData(FALSE); } void CKotaPilihanDlg::OnPanah1() { // TODO: Add your control notification handler code here HWND hWnd;

//GetDlgItemText(IDC_KOTAPILIHAN,m_kota1); GetDlgItem(IDC_PANAH1, &hWnd); ::EnableWindow(hWnd, FALSE); //non aktif tombol Panah 1 m_daftarkota.DeleteString(m_daftarkota.GetCurSel()); m_kota1.Format(m_kotapilihan); m_kotapilihan=""; // menghapus kota pilihan UpdateData(FALSE); }

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 44: Pemrograman Aplikasi Visual C++

44

void CKotaPilihanDlg::OnRollback() { // TODO: Add your control notification handler code here HWND hWnd; GetDlgItem(IDC_PANAH1, &hWnd); ::EnableWindow(hWnd, TRUE); // aktifkan tombol Panah 1 if(m_kota1!="") { m_daftarkota.InsertString(m_daftarkota.GetCurSel(),m_kota1); m_kota1=""; } UpdateData(FALSE); }

Berikut ini adalah daftar nama dan tipe variabel yang digunakan.

2. Buatlah aplikasi dialog dengan nama “Laporan”, dimana terdapat dua Kotak Combo seperti pada layout dibawah. Kotak Combo sebelah kiri berisi semua atribut “Daftar Atribut” dari suatu record tabel, sedangkan Kotak Combo sebelah kanan tidak berisi apa-apa (kosong). Diantara kedua Kotak Combo tersebut terdapat dua tombol dengan caption “>” dan “<” yang digunakan untuk mentransfer nama atribut dari kedua Kotak Combo tersebut.

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 45: Pemrograman Aplikasi Visual C++

45

3. Modifikasilah aplikasi dialog pada latihan no.2 menjadi layout seperti dibawah ini

dan berilah nama “Laporan2”.

3.2 Kotak List Bentuk dari Kotak List adalah hampir sama dengan Kotak Combo, cara pengisian dan pemrogramannya juga hampir mirip hanya berbeda pada beberapa fungsi yang digunakan, seperti fungsi GetLBText() pada Kotak Combo diganti dengan fungsi GetText(), sedangkan fungsi- fungsi yang lainnya relatif tetap. Perbedaan lainnya adalah pada tampilan kotaknya yaitu pada Kotak Combo diatasnya terdapat Kotak Edit sedangkan Kotak List tidak, kemudian pada Kota List tidak dapat dimasukkan data item

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 46: Pemrograman Aplikasi Visual C++

46

secara manual dari properties. Daftar item pada Kotak List telah diberikan secara default yaitu Item, Listbox, Sample, dan tabtabtab. Kotak List dapat dibuat dengan memilih icon dari Toolbox Controls. Setting dari properties Kotal List memungkinkan pengguna untuk menseting bermacam tampilan dan kegunaan. Gambar-gambar dibawah ini diberikan tiga properties yang dimiliki oleh Kotak List.

Gambar 3.15 Tiga Properties dari Kotak List

Untuk membuat Kotak List maka lakukan langkah-langkah berikut ini: ü Bukalah aplikasi dialog, ü Klik dan letakkan icon Kotak List pada kotak dialog dan atur besarnya kotak, ü Klik kanan pada Kotak List tersebut, set properties yang dikehendaki, ü Isikan data item pilihan kota melalui program seperti pada Kotak Combo diatas,

yaitu diletakkan dibawah baris //TODO pada fungsi ::OnInitDialog(), atau perhatikan baris-baris dibawah ini:

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 47: Pemrograman Aplikasi Visual C++

47

m_daftarkota.AddString("Surabaya"); m_daftarkota.AddString("Gresik"); m_daftarkota.AddString("Lamongan"); m_daftarkota.AddString("Malang"); m_daftarkota.AddString("Sidoarjo"); m_daftarkota.AddString("Probolinggo"); m_daftarkota.AddString("Situbondo"); m_daftarkota.AddString("Banyuwangi"); m_daftarkota.AddString("Magetan"); m_daftarkota.AddString("Madiun"); m_daftarkota.AddString("Jombang"); m_daftarkota.AddString("Blitar"); m_daftarkota.SetCurSel(0);

ü Kembali editor kedialog, tambahkan Kotak Edit disebelah kanan Kotak List, atur

letak dan besarnya sehingga sama dengan Kotak List, ü Diantara kedua Kotak obyek tersebut berikan tombol tekan dengan camption “>”,

dan “<”, ü Sehingga akan ditampilkan seperti pada Gambar 3.16 dibawah ini:

Gambar 3.16 Demo Kotak List dan Kotak Edit

ü Setting Anggota Variabel menjadi seperti Gambar 3.17 dibawah ini: ü Agar pada saat tombol tekan “>” ditekan dan pilihan kota dapat ditampilkan pada

Kotak List sebelah kanan, maka dapat dilakukan penambahan fungsi baru sebagai aksi penekanan tombol tersebut. Adapun program pada fungsi baru tersebur adalah seperti dibawah ini:

void CListBoxDlg::OnPanah1() { // TODO: Add your control notification handler code here Cstring skota; m_daftarkota.GetText(m_daftarkota.GetCurSel(), skota); m_daftarkota.DeleteString(m_daftarkota.GetCurSel()); m_daftarkota.SetCurSel(0); m_pilihankota.InsertString(m_pilihankota.GetCurSel(), skota); }

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 48: Pemrograman Aplikasi Visual C++

48

ü Lakukan hal yang sama untuk penekanan tombol kebalikannya yaitu tombol “<”, dimana bila tombol tersebut ditekan maka akan berlaku sebaliknya, untuk lebih jelasnya perhatikan baris-baris program dibawah ini:

void CListBoxDlg::OnPanah2() { // TODO: Add your control notification handler code here CString skota; m_pilihankota.SetCurSel(m_daftarkota.GetCurSel()); m_pilihankota.GetText(m_pilihankota.GetCurSel(), skota); m_pilihankota.DeleteString(m_pilihankota.GetCurSel()); m_pilihankota.SetCurSel(0); m_daftarkota.InsertString(m_daftarkota.GetCurSel(), skota); }

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 49: Pemrograman Aplikasi Visual C++

49

LATIHAN MEMBUAT APLIKASI 1. Buatlah modifikasi pada aplikasi dialog Kota Pilihan diatas menjadi seperti layout

dialog dibawah ini:

Perbaiki kesalahan yang terjadi pada dialog diatas, seperti apabila semua kota telah dipindah semuanya, dan tetap dilakukan penekanan tombol panah, maka tampilkan pesan bahwa Kotak List kosong! Tambahkan fungsi baru untuk penekanan tombol pamah ganda “>>” dan “<<”, dimana penekanan tombol ini akan memindahkan semua kota dari kiri ke kanan dan sebaliknya. Tambahkan juga jumlah item yang terdaftar atau jumlah kota pada masing-masing Kotak List.

2. Buatlah aplikasi dialog dengan nama “Pooling” yang mempunyai layout seperti

dibawah ini. Tampilkan hasil pilihan responden pada Kotak Edit secara multiline.

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 50: Pemrograman Aplikasi Visual C++

50

Bab 4: KONTROL SPIN, SLIDER DAN SCROLL BAR

Berikut ini akan dibahas mengenai kontrol obyek yang biasanya digunakan untuk menentukan/ memperkirakan nilai pendekatan yang sesuai secara tidak pasti, misalkan diinginkan suatu data angka dari suatu warna yang terjadi dari percampuran 3 warna dasar yaitu Merah, Hijau dan Biru, atau untuk memperkirakan suatu nilai awal dari suatu perhitungan, dimana mempunyai nilai antara, misalkan 0 s/d 100, dan beberapa kegunaan yang lainnya dimana user tidak mengetikkan data melalui keyboard, akan tetapi cukup dilakukan dengan klik dari mouse.

4.1 Kontrol Spin Kontrol ini terdiri dari dua tombol yang masing-masing tombolnya terdapat gambar

panah, dua tombol ini digunakan untuk mengubah nilai yang ditunjukkan didalam kotak edit yang terpisah dari tombol spin (ditambahkan sendiri). Pengguna dapat melakukan pengaturan angka yang dikehendaki dengan melakukan klik pada salah satu panah tersebut, panah atas untuk menaikkan angka dan panah bawah untuk menurunkan angka. Untuk jelasnya perhatikan Gambar 4.1 dibawah ini:

Gambar 4.1 Kontrol Spin dan Kotak Edit

Untuk membuat tombol kontrol spin, maka pilih icon dan tarik ke editor kotak dialog, atur ukurannya dan lokasi penempatannya, tambahkan kotak edit sehingga terbentuk seperti Gambar 4.1 diatas.

Berikut ini langkah-langkah untuk membuat aplikasi tombol kontrol spin. ü Bukalah dialog dan namakan dengan “Spin”, ü Klik dan tarik icon kontrol spin atur ukuran dan posisinya, ü Klik dan tarik icon kotak edit atur ukuran dan posisinya, ü Klik pada kontrol spin pada editor dialog, tekan [Alt] + [Enter] ü Ubahlah nama ID menjadi IDC_SPIN, ü Klik pada kotak edit, tekan [Alt] + [Enter], ü Ubahlah nama ID menjadi IDC_EDITSPIN, ü Tekan [Ctrl] + [W] untuk memanggil kotak dialog Class Wizard, ü Pilih tab Member Variables, klik ganda pada IDC_SPIN, masukkan nama

variabel m_spin, lalu tekan Enter,

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 51: Pemrograman Aplikasi Visual C++

51

ü Klik ganda pada IDC_EDITSPIN, masukkan nama variabel m_editspin, lalu tekan Enter, maka akan terbentuk anggota variabel seperti Gambar 4.2 dibawah ini.

ü Untuk menentukan batasan nilai dari angka yang akan digunakan pada kontrol spin maka digunakan fungsi SetRange(m, n), dimana m adalah batas awal nilai dan n adalah akhir nilai. Fungsi tersebut diletakkan didalam fungsi InitDialog() seperti biasanya dibawah //TODO. Contoh lengkapnya perhatikan program dibawah ini:

UDACCEL AccellValue; AccellValue.nSec = 1000; AccellValue.nInc = 5; m_spin.SetRange(-100, 100); m_spin.SetAccel(1, &AccellValue);

Gambar 4.2 Anggota Variabel EditSpin dan Spin ü Agar tombol spin dapat digunakan maka harus dibuat fungsi baru yang digunakan

untuk menangani penekanan tombol spin tersebut, yaitu tekan [Ctrl] + [W], pilih IDC_SPIN pada kotak edit Object IDs, pilih UDN_DELTAPOS pada Messages, klik Add Function, klik Edit Code, tambahkan kode program dibawah ini:

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 52: Pemrograman Aplikasi Visual C++

52

void CSpinDlg::OnDeltaposSpin(NMHDR* pNMHDR, LRESULT* pResult) { NM_UPDOWN* pNMUpDown = (NM_UPDOWN*)pNMHDR; // TODO: Add your control notification handler code here static int step=0; if((*pNMUpDown).iDelta+(*pNMUpDown).iPos>(*pNMUpDown).iPos) step++; if((*pNMUpDown).iDelta+(*pNMUpDown).iPos<(*pNMUpDown).iPos) step--; m_editspin.Format("%d",step); UpdateData(FALSE); *pResult = 0; }

Keterangan program: NM_UPDOWN adalah struktur yang berisi tiga elemen, tetapi yang dibahas disini hanya dua saja yaitu iPos dan iDelta, dimana iPos digunakan sebagai penunjuk posisi terakhir dan iDelta menunjukkan penekanan tombol +/- (Up/ Down) dan keduanya adalah merupakan variabel pointer. ü Sebelum program dijalankan, berikan nilai awal dulu pada variable m_editspin

yang deklarasinya terletak pada baris awal-awal program didalam fungsi CSpinDlg() seperti dibawah ini:

CSpinDlg::CSpinDlg(CWnd* pParent /*=NULL*/) : CDialog(CSpinDlg::IDD, pParent) { //{{AFX_DATA_INIT(CSpinDlg) m_editspin = _T("0"); //}}AFX_DATA_INIT // Note that LoadIcon does not require a subsequent DestroyIcon in Win32 m_hIcon = AfxGetApp()->LoadIcon(IDR_MAINFRAME); }

4.2 Kontrol Slider Seperti halnya dijelaskan pada awal bab ini, maka kontrol slider (track bar) dapat

memenuhi criteria yang telah disebutkan tersebut, yaitu berupa tampilan control yang dapat digeser untuk memperkirakan suatu nilai. Kontrol slider dapat diletakkan secara vertical maupun harisontal, seperti kebanyakan control yang lain, control slider dapat juga diatur tampilannya pada properties, seperti border, bentuk penunjuknya, titik-titik pergeseran dan sebagainya.

Kontrol slider dapat dibuat dengan memilih icon pada toolbar control.

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 53: Pemrograman Aplikasi Visual C++

53

Berikut ini langkah-langkah untuk membuat kontrol slider: ü Bukalah aplikasi dialog, ü Klik icon control slider dan atur posisinya, masuk ke properties pada tab General

ganti nama ID menjadi ID_SLIDER, pada tab Styles dapat diberikan tanda cawang pada Tick Marks, Auto Ticks, dan Enable selection,

ü Tambahkan kotak edit diatas kontrol slider tersebut, masuk ke properties dang anti nama ID menjadi ID_EDITSLIDER,

ü Untuk lebih jelasnya lihat pada Gambar 4.3 dibawah ini, ü Masuk ke dialog Class Wizard tambahkan anggota variable seperti pada Gambar

4.4 dibawah, ü Tambahkan baris program dibawah ini pada fungsi InitDialog sebagai berikut:

// TODO: Add extra initialization here m_slider.SetRangeMin(1,false); m_slider.SetRangeMax(100,false); m_editslider = "1"; UpdateData(false);

ü Untuk menghubungkan antara kontrol slider dan kotak edit maka harus dilakukan

koneksi antara keduanya. Caranya adalah masuk ke Class Wizard pilih CSliderDlg pada kotak edit Object IDs, pilih WM_HSCROLL pada kotak edit Messages, klik Add Function, klik Edit Function.

Gambar 4.3 Tampilan Dialog Kontrol Slider ü Tambahkan baris-baris program dibawah ini didalam fungsi yang baru dibuat:

// TODO: Add your message handler code here and/or call default

m_editslider.Format("%d",m_slider.GetPos());

UpdateData(false);

.

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 54: Pemrograman Aplikasi Visual C++

54

Gambar 4.4 Anggota Variabel pada Kontrol Slider

4.3 Scroll Bar Perangkat Kontrol Scroll Bar adalah merupakan persegi panjang dengan tombol

panah dikedua ujungnya, dimana pengguna dapat mengklik pada daerah persegi panjang dan kedua tombol panah, sehingga memungkinkan pengaturan yang lebih akurat.

Untuk membuat Scroll Bar dapat dilakukan dengan memilih icon atau pada toolbox control.

Berikut ini adalah langkah- langkah untuk membuat Scroll Bar bekerja: ü Bukalah aplikasi dialog, ü Klik pada icon vertical scroll bar dan atur penempatannya, masuk ke properties

ganti nama ID dengan IDC_SCROLLBAR, ü Klik pada icon kotak edit dan atur penempatannya, masuk ke properties ganti

nama ID dengan IDC_VALUESB, untuk lebih jelasnya perhatikan Gambar 4.5 dibawah.

ü Panggil dialog Class Wizard, tambahkan variabel seperti pada Gambar 4.6 dibawah,

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 55: Pemrograman Aplikasi Visual C++

55

Gambar 4.5 Tampilah Kontrol Scroll Bar

Gambar 4.6 Anggota Variabel pada Scroll Bar ü Tambahkan baris program dibawah ini pada InitDialog() dibawah // TODO,

m_scrollbar.SetScrollRange(0, 255); m_editscroll = "0"; UpdateData(false);

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 56: Pemrograman Aplikasi Visual C++

56

ü Panggil dialog Class Wizard, klik tab Message Map, klik CScrollBarDlg pada

kotak edit Object IDs, klik WM_HSCROLL pada kotak edit Messages, klik pada Add Function, klik Edit Code,

ü Tambahkan baris-baris program dibawah ini:

int CurPos = m_scrollbar.GetScrollPos(); m_editscroll.Format("%d", CurPos); UpdateData(false); switch (nSBCode) { case SB_LINELEFT: // Scroll left. CurPos--; break; case SB_LINERIGHT: // Scroll right. CurPos++; break; case SB_PAGELEFT: // Scroll one page left. CurPos-=10; break; case SB_PAGERIGHT: // Scroll one page right CurPos+=10; break; case SB_THUMBPOSITION: // Stright Scroll CurPos = nPos; break; case SB_THUMBTRACK: // Real Scroll CurPos = nPos; break; }

m_scrollbar.SetScrollPos(CurPos);

Keterangan: § SB_LINELEFT dan SB_LINERIGHT adalah konstanta untuk mendeteksi

penekanan penunjuk mouse pada tombol panah kiri atau kanan pada scroll bar. § SB_PAGELEFT dan SB_PAGERIGHT adalah konstanta untuk mendeteksi

penekanan penunjuk mouse pada kotak kosong pada scroll bar. § SB_THUMBPOSITION adalah konstanta untuk mendeteksi pergeseran posisi kotak

geser secara langsung (tanpa menunjukkan angka pergeserannya). § SB_THUMBTRACK adalah konstanta untuk mendeteksi pergeseran posisi kotak

geser dengan menunjukkan angka pergeserannya. ü Jalankan program dan klik pada panah kiri atau kanan, klik pada kotak scroll bar,

dan klik pada kotak geser kemudian tarik dan letakkan pada posisi yang diinginkan.

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 57: Pemrograman Aplikasi Visual C++

57

LATIHAN MEMBUAT APLIKASI

1. Buatlah program aplikasi dialog dengan nama “Kombinasi”, yang menirukan cara kerja dari kunci kombinasi dengan 4 digit, dimana masing-masing mempunyai jangkauang angka dari 0 sampai 9, apabila angka kombinasi yang dimasukkan benar maka tampilkan pesan “SUCCESS!” dan bila salah tampilkan “INTRUDER!”, untuk lebih jelasnya perhatikan tampilan gmbar dibawah ini:

2. Buatlah program aplikasi dialog dengan nama “Jam”, yang digunakan untuk

menghitung sudut terkecil yang dibentuk dari dua jarum jam, yaitu jarum pendek dan jarum panjang, contoh pada jam 10.30 maka akan membentuk sudut 135o, gunakan kontrol spin untuk memasukkan jam dan menit seperti pada gambar dibawah ini:

Petunjuk: Misalkan titik acuan 0o jam 12

1 menit = 360/60 = 6o 1 jam = 5 x 6o = 30o pada jam 10.30 terdiri dari 10 jam dan 30 menit, maka 10 x 30o = 300o dan 30 x 6o = 180o sehingga 300 o - 180o = 120 o

ditambah dengan kelebihan derajat jarum pendek karena pergerakan jarum panjang sebesar perbandingannya, yaitu 0.5o didapatkan dari perbandingan pergerakan jarum panjang 1 menit maka jam pendek bergerak sebesar 30o/60 = 0.5o, jadi hasil perhitungan sudut adalah 120o + 30 * 0.5o = 135o

3. Buatlah program aplikasi dialog dengan nama “Warna”. Program aplikasi ini

digunakan untuk menetukan campuran warna yang dipilih oleh pengguna, apabila warna merah lebih besar dari penjumlahan antara warna hijau dan biru maka

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 58: Pemrograman Aplikasi Visual C++

58

tampilkan pada kotak edit “Hasil Warna” yaitu “RED”, sedangkan bila warna hijau lebih besar dari penjumlahan antara warna merah dan biru maka tampilkan pada kotak edit diatas “GREEN” dan begitu sebaliknya tampilkan “BLUE”, dan bila tidak memenuhi syarat tersebut tampilkan “UNKNOWN”, serta apabila ketiga warna sama tampilkan “GREYSCALE”. Untuk lebih jelasnya perhatikan tampilan dialog dibawah ini:

Petunjuk: Berikut ini daftar adalah tipe variabel yang digunakan, nama variabel

disesuaikan sendiri.

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 59: Pemrograman Aplikasi Visual C++

59

Berikut klip program yang digunakan, untuk menangani pergeseran batang slider. int merah, hijau, biru; merah=m_slidermerah.GetPos(); hijau=m_sliderhijau.GetPos(); biru=m_sliderbiru.GetPos(); m_staticmerah.Format("%d",merah); m_statichijau.Format("%d",hijau); m_staticbiru.Format("%d",biru);

4. Buatlah program aplikasi dialog dengan nama “RGB” yang digunakan untuk

menampilkan warna hasil campuran dari nilai merah, hijau dan biru sebagai berikut:

Petunjuk: Perhatikan baris-baris program dibawah ini, yang berguna untuk melakukan

setting pada slider warna merah, meliputi nilai jangkauan batas slider, langkah pertambahan setiap diklik, dan posisi awal dari batang slider.

m_slidermerah.SetRange(0, 255); m_slidermerah.SetTicFreq(15); m_slidermerah.SetPos(128);

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 60: Pemrograman Aplikasi Visual C++

60

Perhatikan juga tipe variable yang digunakan pada aplikasi slider diatas.

Kotak tampilan warna dibuat dari teks static dengan seting pada properties sebagai berikut:

ü Pertama, pada tab General hapus isi karakter pada kotak edit Caption,

hapus cawang pada kotak check Visible, dan hapus cawang pada kotak check Group, seperti tampilan dialog dibawah ini:

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 61: Pemrograman Aplikasi Visual C++

61

ü Kedua, cawang pada kotak check Border.

Tambahkan baris program dibawah ini pada file header sebagai berikut: private: COLORREF brColor;

Tambahkan dibagian awal dari fungsi ::OnPaint(), yaitu baris-baris seperti dibawah ini:

// dikeluarkan dari dalam statement if program aslinya, dan diletakkan diatas CPaintDC dc(this); // device context for painting

// deklarasi kotak (rectangle) CRect Recto;

// menyimpan dimensi dari control Static pada obyek Recto m_hasilwarna.GetWindowRect(&Recto); ScreenToClient(&Recto);

// Membuat sikat yang digunakan untuk mengecat Static CBrush BrushColor(brColor);

// memilih sikat CBrush *pBrush = dc.SelectObject(&BrushColor);

// Menggambar latar belakang dari obyek Static dc.Rectangle(&Recto);

Tambahkan baris-baris program dibawah dibagian akhir fungsi ::OnVScroll() CRect Recto; brColor = RGB(nRed, nGreen, nBlue); m_hasilwarna.GetWindowRect(&Recto); ScreenToClient(&Recto); InvalidateRect(&Recto);

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 62: Pemrograman Aplikasi Visual C++

62

5. Buatlah program aplikasi dialog dengan nama “Derajat” yang berfungsi untuk menunjukkan perkiraan suatu nilai temperatur derajat Celsius yang dimasukkan melalui kotak edit, pada saat kotak edit diganti nilainya maka batang penunjuk akan bergerak sesuai dengan angka yang diberikan, dengan jangkauan dari 0 sampai 100. Untuk lebih jelasnya perhatikan dialog dibawah ini:

Petunjuk: Control IDs: IDC_EDITCELSIUS dan IDC_SCROLLBAR Member Variable: m_editcelsius (int) dan m_scrollbar (control)

void CDerajatDlg::OnChangeEditcelsius() {

UpdateData(true); m_scrollbar.SetScrollPos(100 - m_editcelsius); UpdateData(false);

}

6. Buatlah program aplikasi dialog “Suhu” yang menampilkan tiga kontrol scoll bar.

Dimana masing-masing mewakili thermometer Celsius, Reamur dan Fahrenheit, pada saat penunjuk scroll bar Celsius digeser maka otomatis penunjuk pada scroll bar Reamur dan Fahrenheit menyesuaikan.

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 63: Pemrograman Aplikasi Visual C++

63

Petunjuk: Berikut adalah tipe-tipe variable yang digunakan pada aplikasi dialog “Suhu”

Tambahkan baris-baris program didalam fungsi ::OnInitDialog() sebagai

berikut:

m_sbcelsius.SetScrollRange(0, 100); m_sbreamur.SetScrollRange(0, 80); m_sbfahrenheit.SetScrollRange(32, 212);

m_stcelsius=”0”; m_streamur=”0”; m_fahrenheit=”0”; UpdateData(false);

Tambahkan fungsi baru, yaitu dengan cara masuk ke Class Wizard, pada tab Message Maps, pada kotak edit Object IDs pilih CSuhuDlg, pada kotak edit Messages pilih WM_VSCROLL, klik Add Function, kemudian klik Edit Code untuk menambahkan baris-baris program seperti dibawah ini:

int CurPos = m_sbcelsius.GetScrollPos();

m_stcelsius.Format("%d", CurPos); UpdateData(false);

This watermark does not appear in the registered version - http://www.clicktoconvert.com

Page 64: Pemrograman Aplikasi Visual C++

64

switch (nSBCode) { case SB_LINELEFT: // Scroll left. CurPos--; break; case SB_LINERIGHT: // Scroll right. CurPos++; break; case SB_PAGELEFT: // Scroll one page left. CurPos-=10; break; case SB_PAGERIGHT: // Scroll one page right CurPos+=10; break; case SB_THUMBPOSITION: // Stright Scroll CurPos = nPos; break; case SB_THUMBTRACK: // Real Scroll CurPos = nPos; break; }

m_sbcelsius.SetScrollPos(CurPos);

This watermark does not appear in the registered version - http://www.clicktoconvert.com