MODUL

Membuat Multiple Design Interface

Pemrograman Visual - Session 9

Debby Ummul Hidayah, S.Kom., M.MSI debbyummul@amikompurwokerto.ac.id

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

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. Isikan pada menu strip kolom Type Here dengan Buku

Lalu isikan sub menu di menu strip dengan Tambah Buku

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

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

5. Tahap 3 : tambahkan toolstrip

6. Klik pada toolStripButton

8

7. Klik kanan pada toolStripButton pilih Set Image

8. Muncul kotak dialog Select Resource kemudian pilih pada Local Resource

Import

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

9. Pada Properties toolStripButton1 ubah pada bagian ImageScaling menjadi None.

Kemudian pada bagian Text ubah menjadi Pinjam Buku

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

Pada Name ganti dengan nama Form_Buku. Selanjutnya klik Add.

11. Silahkan desain form buku seperti contoh berikut.

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

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

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

14. Selanjutnya kita akan membuat MDI form. Caranya kita klik pada menuStrip

Tambah Buku.

Tambahkan script code berikut:

double klik pada Tambah Buku

17

15. Kemudian tambahkan source code untuk menuStrip Hapus Buku.

Tambahkan script code berikut:

double klik pada Tambah Buku

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

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

berikut.