Aplikasi penjualan buku Ms. Visual C++

Mendesain Tampilan Program
Pertama - tama anda harus mendesain tampilan program yang akan dibuat, ingin seperti apa tampilanya nanti sewaktu dijalankan. Ikuti langkah dibawah ini:

1. Pada  toolbar kontrol MFC Anda klik kontrol Static Text  , kemudian Anda letakkan pada lembar Form dengan mengklik lembar Form, kemudian tahan dan drag sesuai ukuran, letakkan pada lembar Form sebanyak 8 buah. 

2.  Kemudian beri caption pada 8 buah kontrol MFC Satic Text  yang melekat pada lembar Form. Caranya klik kanan pada kontrol MFC Static Text kemudian pilih Properties, maka akan muncul kotak dialog Text Properties. Kemudian pada kolom caption kotak dialog Text Properties Anda ketikkan nama kontrol Static Text tersebut.

3. Hasil akhir dari pemberian Caption ke 8 buah kontrol MFC Static Text yang melekat pada lembar Form dapat Anda lihat seperti gambar dibawah ini.

4.  Pada toolbar kontrol MFC Anda klik kontrol Date Time Picker  , kemudian Anda letakkan pada lembar Form dengan mengklik lembar Form kemudian tahan dan drag sesuai ukuran.

5. Pada toolbar kontrol MFC Anda klik kontrol Edit Box  , kemudian Anda letakkan pada lembar Form dengan mengklik lembar Form, kemudian tahan dan drag sesuai ukuran, aturlah ukuran serta posisi masing masing kontrol MFC Edit Box pada lembar Form sebanyak 6 buah.

6.   Pada toolbar kontrol MFC Anda klik kontrol Combo Box  , kemudian Anda letakkan pada lembar Form dengan mengklik lembar Form, kemudian tahan dan drag sesuai ukuran, lihat Gambar 16

7. Kemudian beri item data pada pilihan combo box. Caranya klik kanan pada kontrol combo box kemudian pilih Properties, maka akan muncul kotak dialog Combo Box Properties. Kemudian Anda klik Tab Data isilah item data pada kolom Enter listboxs items. Dan untuk jumlah pilihan item yang lebih dari satu anda tekan Ctrl + Enter pada tombol keyboard Anda, lalu kursor akan pindah ke baris baru pada kolom Enter listboxs items, isilah nama item selanjutnya.

8. Pastikan kolom pilihan Type pada Tab Style bernama Dropdown, 

9. Untuk mengeluarkan lembar gulung pada saat tanda  , pada combo box di klik, Anda harus melebarkan ukuran dropdown combo box pada lembar Form. Caranya, tekan Ctrl pada keyboard kemudian tahan lalu klik tanda   , pada kontrol combo box. Setelah itu lepaskan lalu tarik garis blok pada combo box dengan menggunakan mouse aturlah ukuran sesuai dengan kebutuhan yang diperlukan.

10. Pada toolbar kontrol MFC Anda klik kontrol Radio Button, kemudian Anda letakkan pada lembar Form dengan mengklik lembar Form, kemudian tahan dan drag sesuai ukuran, letakkan sebanyak 2 buah pada lembar Form.

11. Kemudian beri caption pada 2 buah kontrol MFC Radio Button  yang melekat pada lembar Form. Caranya klik kanan pada kontrol MFC Radio Button kemudian pilih Properties, maka akan muncul kotak dialog Text Properties. Kemudian pada kolom caption kotak dialog Text Properties Anda ketikkan nama kontrol Radio Button tersebut.

12. Pada toolbar kontrol MFC Anda klik kontrol Button  , kemudian Anda letakkan pada lembar Form dengan mengklik lembar Form, kemudian tahan dan drag sesuai ukuran, letakkan sebanyak 3 buah pada lembar Form.

 

13.  Kemudian beri caption pada  buah kontrol MFC Button  yang melekat pada lembar Form. Caranya klik kanan pada kontrol MFC Button kemudian pilih Properties, maka akan muncul kotak dialog Text Properties. Kemudian pada kolom Caption kotak dialog Text Properties Anda ketikkan nama kontrol Button tersebut.

14. Pada toolbar kontrol MFC Anda klik kontrol Group Box  , kemudian Anda letakkan pada lembar Form dengan mengklik lembar Form, kemudian tahan dan drag sesuai ukuran, letakkan sebanyak  buah pada lembar Form.

15. Kemudian beri caption pada  buah kontrol MFC Group Box  yang melekat pada lembar Form. Caranya klik kanan pada kontrol MFC Group Box kemudian pilih Properties, maka akan muncul kotak dialog Text Properties. Kemudian pada kolom Caption kotak dialog Text Properties Anda ketikkan nama kontrol Group Box tersebut.

16. Sampai disini Anda telah selesai mendesain Form program Anda, hasil akhir desain Form program Anda dapat dilihat pada gambar dibawah ini.

 

Ok, tahap mendesain tampilan sudah selesai, selanjutnya Ngoding (*membuat kode ^_^). Silahkan baca di artikel selanjutnya..