Modul ini memberikan panduan lengkap untuk membuat aplikasi pinjam buku dengan multiple design interface menggunakan Visual Programming. Termasuk cara membuat form, menu, toolstrip, serta menambahkan source code untuk mengatur navigasi antar form dan fungsi-fungsi dasar seperti tambah, hapus, dan keluar.

1. MODUL
Membuat Multiple
Design Interface
Pemrograman Visual - Session 9
Debby Ummul Hidayah, S.Kom., M.MSI
debbyummul@amikompurwokerto.ac.id

2. 2
1. Buat projek baru dengan cara pilih menu File  New  Project. Kemudian pilih
Windows Form Application. Pada bagian Name isikan dengan Latihan11_<digit
terakhir dari NIM> misal Latihan11_1837. Untuk location isikan dengan lokasi
tempat penyimpanan projek (klik tombol Browse). Setelah selesai klik tombol OK.
2. Tahap 1 : silahkan desain form sepeti berikut.

3. 3
Keterangan :
Toolbox Property
Form1 Text : Aplikasi Pinjam Buku
Size : 600; 600
FormBorderStyle : FixedSingle
MaximizeBox : false
StartPosition : CenterScreen
IsMdiContainer : true
3. Tahap 2 : Tambahkan MenuStrip caranya dengan pilih pada toolbox  klik
MenuStrip kemudian tempelkan pada windows form.

4. 4
4. Isikan pada menu strip kolom Type Here dengan Buku
Lalu isikan sub menu di menu strip dengan Tambah Buku

5. 5
Silahkan tambahkan 3 menu lagi yaitu peminjam, transaksi, laporan.
Keterangan:
Menu Sub Menu
Buku
Tambah Buku
Hapus Buku
Peminjam
Tambah Peminjam
Hapus Peminjam
Transaksi Pinjam Buku
Laporan
Buku
Peminjam
Transaksi

6. 6
Biasanya pada aplikasi terdapat tombol akses cepat melalui keyboard untuk
menampilkan form yang dibutuhkan. Seperti contohnya penggunaan Ctrl atau Shift
+ karakter (A, B, C, dst). Untuk menambahkan tombol pintasan tersebut kita cukup
arahkan atau klik pada SubMenuToolStripItem kemudian pada properties pilih
ShorcutKey selanjutnya pilih modifier dan key nya.

7. 7
5. Tahap 3 : tambahkan toolstrip
6. Klik pada toolStripButton

8. 8
7. Klik kanan pada toolStripButton  pilih Set Image
8. Muncul kotak dialog Select Resource kemudian pilih pada Local Resource 
Import

9. 9
Lalu cari di mana lokasi tempat penyimpanan icon. Pilih icon pada gambar 1 dan
klik Open.
Jika berhasil terimport maka akan muncul kotak dialog seperti berikut lalu klik OK.

10. 10
9. Pada Properties toolStripButton1 ubah pada bagian ImageScaling menjadi None.
Kemudian pada bagian Text ubah menjadi Pinjam Buku

11. 11
Silahkan tambahkan 3 icon lainnya dengan cara yang sama seperti pada nomor 7,
8, dan 9. Jika berhasil hasilnya seperti berikut.
10. Kemudian kita tambahkan form baru lagi dengan nama Form_Buku. Caranya klik
kanan pada projek Latihan11 kemudian pilih Add  Windows Form.

12. 12
Pada Name ganti dengan nama Form_Buku. Selanjutnya klik Add.
11. Silahkan desain form buku seperti contoh berikut.

13. 13
Keterangan:
Toolbox Properties
form Name: Form_Buku
Size: 640; 490
MaximizeBox: false
FormBorderStyle: FixedDialog
label1 Text: Daftar Buku
Font: Arial Narrow; 11,25pt
button1 Text: Tambah
(Name): btnTambah
button2 Text: Hapus
(Name): btnTutup
button3 Text: Tutup
(Name): btnTutup
dataGridView1 (Name): dgBuku
12. Selanjutnya tambahkan form lagi dengan nama Form_TambahBuku. Desainnya
seperti berikut.

14. 14
Keterangan:
Toolbox Keterangan
form (Name): Form_TambahBuku
Text: Tambah Buku
Size: 243; 54
MaximizeBox: false
FormBorderStyle: FixedDialog
label1 Text: ID Buku
label2 Text: Judul Buku
label3 Text: Penulis
label4 Text: Penerbit
label5 Text: Kota Terbit
label6 Text: Tahun Terbit
textBox1 (Name): txtIdBuku
Size: 100; 20
textBox2 (Name): txtJudul
Size: 243; 54
Multiline: true
textBox3 (Name): txtPenulis
Size: 243; 20
textBox4 (Name): txtPenerbit
Size: 185; 20
textBox5 (Name): txtKotaTerbit
Size: 185; 20
textBox6 (Name): txtTahunTerbit
Size: 132; 20
Button1 (Name): btnTambah
Text: Tambah
Button2 (Name): btnBatal
Text: Batal

15. 15
13. Kemudian tambahkan form baru lagi di projek Latihan11, ubah name menjadi
Form_HapusBuku.
Keterangan:
Toolbox Keterangan
form (Name): Form_HapusBuku
Text: Hapus Buku
Size: 433; 200
MaximizeBox: false
FormBorderStyle: FixedDialog
label1 Text: ID Buku
label2 Text: Judul
Button1 (Name): btnCari
Text: Cari
Button2 (Name): btnHapus
Text: Hapus
Button3 (Name): btnBatal
Text: Batal
textBox1 (Name): txtIdBuku
Size: 215; 20
textBox2 (Name): txtJudul
Size: 296; 20

16. 16
14. Selanjutnya kita akan membuat MDI form. Caranya kita klik pada menuStrip
Tambah Buku.
Tambahkan script code berikut:
double klik pada Tambah Buku

17. 17
15. Kemudian tambahkan source code untuk menuStrip Hapus Buku.
Tambahkan script code berikut:
double klik pada Tambah Buku

18. 18
16. Selanjutnya buka Form_Buku lalu double klik pada button Tambah.
Ketikkan source program berikut.
17. Lalu pada icon bergambar buku silahkan double klik lalu ketikkan program berikut.

19. 19
18. Kemudian pada menuStrip Keluar silahkan double klik lalu ketikkan program
berikut.