MODUL -...
Transcript of MODUL -...
![Page 1: MODUL - elearning.amikompurwokerto.ac.idelearning.amikompurwokerto.ac.id/.../materi/...Modul_Praktikum_9_-_PV_.pdf · 1. Buat projek baru dengan cara pilih menu File New Project.](https://reader030.fdocuments.net/reader030/viewer/2022040806/5e4828c31c91ee1368514516/html5/thumbnails/1.jpg)
MODUL
Membuat Multiple Design Interface
Pemrograman Visual - Session 9
Debby Ummul Hidayah, S.Kom., M.MSI [email protected]
![Page 2: MODUL - elearning.amikompurwokerto.ac.idelearning.amikompurwokerto.ac.id/.../materi/...Modul_Praktikum_9_-_PV_.pdf · 1. Buat projek baru dengan cara pilih menu File New Project.](https://reader030.fdocuments.net/reader030/viewer/2022040806/5e4828c31c91ee1368514516/html5/thumbnails/2.jpg)
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.
![Page 3: MODUL - elearning.amikompurwokerto.ac.idelearning.amikompurwokerto.ac.id/.../materi/...Modul_Praktikum_9_-_PV_.pdf · 1. Buat projek baru dengan cara pilih menu File New Project.](https://reader030.fdocuments.net/reader030/viewer/2022040806/5e4828c31c91ee1368514516/html5/thumbnails/3.jpg)
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.
![Page 4: MODUL - elearning.amikompurwokerto.ac.idelearning.amikompurwokerto.ac.id/.../materi/...Modul_Praktikum_9_-_PV_.pdf · 1. Buat projek baru dengan cara pilih menu File New Project.](https://reader030.fdocuments.net/reader030/viewer/2022040806/5e4828c31c91ee1368514516/html5/thumbnails/4.jpg)
4
4. Isikan pada menu strip kolom Type Here dengan Buku
Lalu isikan sub menu di menu strip dengan Tambah Buku
![Page 5: MODUL - elearning.amikompurwokerto.ac.idelearning.amikompurwokerto.ac.id/.../materi/...Modul_Praktikum_9_-_PV_.pdf · 1. Buat projek baru dengan cara pilih menu File New Project.](https://reader030.fdocuments.net/reader030/viewer/2022040806/5e4828c31c91ee1368514516/html5/thumbnails/5.jpg)
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
![Page 6: MODUL - elearning.amikompurwokerto.ac.idelearning.amikompurwokerto.ac.id/.../materi/...Modul_Praktikum_9_-_PV_.pdf · 1. Buat projek baru dengan cara pilih menu File New Project.](https://reader030.fdocuments.net/reader030/viewer/2022040806/5e4828c31c91ee1368514516/html5/thumbnails/6.jpg)
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.
![Page 7: MODUL - elearning.amikompurwokerto.ac.idelearning.amikompurwokerto.ac.id/.../materi/...Modul_Praktikum_9_-_PV_.pdf · 1. Buat projek baru dengan cara pilih menu File New Project.](https://reader030.fdocuments.net/reader030/viewer/2022040806/5e4828c31c91ee1368514516/html5/thumbnails/7.jpg)
7
5. Tahap 3 : tambahkan toolstrip
6. Klik pada toolStripButton
![Page 8: MODUL - elearning.amikompurwokerto.ac.idelearning.amikompurwokerto.ac.id/.../materi/...Modul_Praktikum_9_-_PV_.pdf · 1. Buat projek baru dengan cara pilih menu File New Project.](https://reader030.fdocuments.net/reader030/viewer/2022040806/5e4828c31c91ee1368514516/html5/thumbnails/8.jpg)
8
7. Klik kanan pada toolStripButton pilih Set Image
8. Muncul kotak dialog Select Resource kemudian pilih pada Local Resource
Import
![Page 9: MODUL - elearning.amikompurwokerto.ac.idelearning.amikompurwokerto.ac.id/.../materi/...Modul_Praktikum_9_-_PV_.pdf · 1. Buat projek baru dengan cara pilih menu File New Project.](https://reader030.fdocuments.net/reader030/viewer/2022040806/5e4828c31c91ee1368514516/html5/thumbnails/9.jpg)
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.
![Page 10: MODUL - elearning.amikompurwokerto.ac.idelearning.amikompurwokerto.ac.id/.../materi/...Modul_Praktikum_9_-_PV_.pdf · 1. Buat projek baru dengan cara pilih menu File New Project.](https://reader030.fdocuments.net/reader030/viewer/2022040806/5e4828c31c91ee1368514516/html5/thumbnails/10.jpg)
10
9. Pada Properties toolStripButton1 ubah pada bagian ImageScaling menjadi None.
Kemudian pada bagian Text ubah menjadi Pinjam Buku
![Page 11: MODUL - elearning.amikompurwokerto.ac.idelearning.amikompurwokerto.ac.id/.../materi/...Modul_Praktikum_9_-_PV_.pdf · 1. Buat projek baru dengan cara pilih menu File New Project.](https://reader030.fdocuments.net/reader030/viewer/2022040806/5e4828c31c91ee1368514516/html5/thumbnails/11.jpg)
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.
![Page 12: MODUL - elearning.amikompurwokerto.ac.idelearning.amikompurwokerto.ac.id/.../materi/...Modul_Praktikum_9_-_PV_.pdf · 1. Buat projek baru dengan cara pilih menu File New Project.](https://reader030.fdocuments.net/reader030/viewer/2022040806/5e4828c31c91ee1368514516/html5/thumbnails/12.jpg)
12
Pada Name ganti dengan nama Form_Buku. Selanjutnya klik Add.
11. Silahkan desain form buku seperti contoh berikut.
![Page 13: MODUL - elearning.amikompurwokerto.ac.idelearning.amikompurwokerto.ac.id/.../materi/...Modul_Praktikum_9_-_PV_.pdf · 1. Buat projek baru dengan cara pilih menu File New Project.](https://reader030.fdocuments.net/reader030/viewer/2022040806/5e4828c31c91ee1368514516/html5/thumbnails/13.jpg)
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.
![Page 14: MODUL - elearning.amikompurwokerto.ac.idelearning.amikompurwokerto.ac.id/.../materi/...Modul_Praktikum_9_-_PV_.pdf · 1. Buat projek baru dengan cara pilih menu File New Project.](https://reader030.fdocuments.net/reader030/viewer/2022040806/5e4828c31c91ee1368514516/html5/thumbnails/14.jpg)
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
![Page 15: MODUL - elearning.amikompurwokerto.ac.idelearning.amikompurwokerto.ac.id/.../materi/...Modul_Praktikum_9_-_PV_.pdf · 1. Buat projek baru dengan cara pilih menu File New Project.](https://reader030.fdocuments.net/reader030/viewer/2022040806/5e4828c31c91ee1368514516/html5/thumbnails/15.jpg)
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
![Page 16: MODUL - elearning.amikompurwokerto.ac.idelearning.amikompurwokerto.ac.id/.../materi/...Modul_Praktikum_9_-_PV_.pdf · 1. Buat projek baru dengan cara pilih menu File New Project.](https://reader030.fdocuments.net/reader030/viewer/2022040806/5e4828c31c91ee1368514516/html5/thumbnails/16.jpg)
16
14. Selanjutnya kita akan membuat MDI form. Caranya kita klik pada menuStrip
Tambah Buku.
Tambahkan script code berikut:
double klik pada Tambah Buku
![Page 17: MODUL - elearning.amikompurwokerto.ac.idelearning.amikompurwokerto.ac.id/.../materi/...Modul_Praktikum_9_-_PV_.pdf · 1. Buat projek baru dengan cara pilih menu File New Project.](https://reader030.fdocuments.net/reader030/viewer/2022040806/5e4828c31c91ee1368514516/html5/thumbnails/17.jpg)
17
15. Kemudian tambahkan source code untuk menuStrip Hapus Buku.
Tambahkan script code berikut:
double klik pada Tambah Buku
![Page 18: MODUL - elearning.amikompurwokerto.ac.idelearning.amikompurwokerto.ac.id/.../materi/...Modul_Praktikum_9_-_PV_.pdf · 1. Buat projek baru dengan cara pilih menu File New Project.](https://reader030.fdocuments.net/reader030/viewer/2022040806/5e4828c31c91ee1368514516/html5/thumbnails/18.jpg)
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.
![Page 19: MODUL - elearning.amikompurwokerto.ac.idelearning.amikompurwokerto.ac.id/.../materi/...Modul_Praktikum_9_-_PV_.pdf · 1. Buat projek baru dengan cara pilih menu File New Project.](https://reader030.fdocuments.net/reader030/viewer/2022040806/5e4828c31c91ee1368514516/html5/thumbnails/19.jpg)
19
18. Kemudian pada menuStrip Keluar silahkan double klik lalu ketikkan program
berikut.