Membuat Form Aplikasi Pinjam...

14
MODUL Membuat Form Aplikasi Pinjam Buku Pemrograman Visual - Session 11 Debby Ummul Hidayah, S.Kom., M.MSI [email protected]

Transcript of Membuat Form Aplikasi Pinjam...

Page 1: Membuat Form Aplikasi Pinjam Bukuelearning.amikompurwokerto.ac.id/...12/2019080608039301-Create_… · Membuat Form Aplikasi Pinjam Buku Pemrograman Visual - Session 11 Debby Ummul

MODUL Membuat Form Aplikasi

Pinjam Buku Pemrograman Visual - Session 11

Debby Ummul Hidayah, S.Kom., M.MSI [email protected]

Page 2: Membuat Form Aplikasi Pinjam Bukuelearning.amikompurwokerto.ac.id/...12/2019080608039301-Create_… · Membuat Form Aplikasi Pinjam Buku Pemrograman Visual - Session 11 Debby Ummul

2

1. Untuk desain yang pertama kita akan membuat desain aplikasi windows form

LOGIN.

2. Silahkan desain form login seperti berikut.

3. Keterangan:

Toolbox Properties

Form (Name) : Form_Login

BackColor : Control

FormBorderStyle : None

Size : 280; 246

StartPosition : CenterScreen

label1 Text : LOGIN

Font : Segoe UI

Font Style : Light

Font Size : 30 pt

ForeColor : DarkRed

label2 Text : Password

Font : Segoe UI

Font Style : Italic

Font Size : 12 pt

label3 Text : Password

Font : Segoe UI

Font Style : Italic

Page 3: Membuat Form Aplikasi Pinjam Bukuelearning.amikompurwokerto.ac.id/...12/2019080608039301-Create_… · Membuat Form Aplikasi Pinjam Buku Pemrograman Visual - Session 11 Debby Ummul

3

Font Size : 12 pt

textBox1 (Name) : txtUser

BorderStyle : None

Font : Segoe UI

Font Style : Bold

Font Size : 8 pt

Size : 134; 20

textBox2 (Name) : txtPass

BorderStyle : None

Font : Segoe UI

Font Style : Bold

Font Size : 8 pt

Size : 134; 20

button1 (Name) : btnOK

FlatStyle : Popup

Size : 97; 34

Text : OK

button2 (Name) : btnCancel

FlatStyle : Popup

Size : 97; 34

Text : Cancel

Page 4: Membuat Form Aplikasi Pinjam Bukuelearning.amikompurwokerto.ac.id/...12/2019080608039301-Create_… · Membuat Form Aplikasi Pinjam Buku Pemrograman Visual - Session 11 Debby Ummul

4

1. Desain form kedua kita akan membuat desain aplikasi windows form UTAMA.

2. Silahkan desain form utama seperti berikut.

3. Keterangan:

Toolbox Properties

Form (Name) : Form1

FormBorderStyle : FixedSingle

Size : 900; 600

StartPosition : CenterScreen

Text :Aplikasi Pinjam Buku

IsMdiContainer : true

menuStrip1 Font : Segoe UI

Font Size : 12 pt

Master

Buku ShortcutKeys : Ctrl + B

Peminjam ShortcutKeys : Ctrl + P

Keluar

Transaksi

Page 5: Membuat Form Aplikasi Pinjam Bukuelearning.amikompurwokerto.ac.id/...12/2019080608039301-Create_… · Membuat Form Aplikasi Pinjam Buku Pemrograman Visual - Session 11 Debby Ummul

5

Pinjam Buku ShortcutKeys : Ctrl + F5

Laporan

Data Buku

Data Peminjam

Data Pinjam Buku toolStrip toolStripButton1

Text : Pinjam Buku

toolStripButton2

Text : Buku

toolStripButton3

Text : Peminjam

toolStripButton4

Text : Keluar

NOTES :

Untuk menambahkan toolbar dengan icon cukup gunakan toolStrip.

Klik sekali kemudian letakkan pada windows form

Klik sekali pada kotakan kecil untuk menambah gambar

Klik kanan pada icon berbentuk gambar

Page 6: Membuat Form Aplikasi Pinjam Bukuelearning.amikompurwokerto.ac.id/...12/2019080608039301-Create_… · Membuat Form Aplikasi Pinjam Buku Pemrograman Visual - Session 11 Debby Ummul

6

Pilih Set Image...

Pilih Import...

Page 7: Membuat Form Aplikasi Pinjam Bukuelearning.amikompurwokerto.ac.id/...12/2019080608039301-Create_… · Membuat Form Aplikasi Pinjam Buku Pemrograman Visual - Session 11 Debby Ummul

7

Cari Icon tanda “Start”

Lalu klik Open

Jila berhasil muncul di sini gambar iconnya

Lalu Klik OK Sekali lagi

Page 8: Membuat Form Aplikasi Pinjam Bukuelearning.amikompurwokerto.ac.id/...12/2019080608039301-Create_… · Membuat Form Aplikasi Pinjam Buku Pemrograman Visual - Session 11 Debby Ummul

8

Muncul pada toolbar icon yang telah ditambahkan tadi

Ubah ImageScaling menjadi NONE

Jika berhasil bentuk icon akan berubah seperti ini

Page 9: Membuat Form Aplikasi Pinjam Bukuelearning.amikompurwokerto.ac.id/...12/2019080608039301-Create_… · Membuat Form Aplikasi Pinjam Buku Pemrograman Visual - Session 11 Debby Ummul

9

1. Desain form ketiga kita akan membuat desain aplikasi windows form BUKU.

2. Silahkan desain form buku seperti berikut.

3. Keterangan:

Toolbox Properties

Form (Name) : Form_Buku

FormBorderStyle : FixedSingle

Size : 754; 371

StartPosition : CenterScreen

Text : Form Buku

label1 Font : Segoe UI

Font Style : Light

Font Size : 12 pt

Text : FORM BUKU

label2 Text : ID Buku

label3 Text : Judul Buku

label4 Text : Penulis

label5 Text : Penerbit

label6 Text : Kota Terbit

label7 Text : Tahun Terbit

Page 10: Membuat Form Aplikasi Pinjam Bukuelearning.amikompurwokerto.ac.id/...12/2019080608039301-Create_… · Membuat Form Aplikasi Pinjam Buku Pemrograman Visual - Session 11 Debby Ummul

10

textBox1 (Name) : txtIdBuku

Size : 100; 20

textBox2 (Name) : txtJudul

Size : 185; 54

textBox3 (Name) : txtPenulis

Size : 185; 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) : btnUbah

Text : Ubah

button3 (Name) : btnHapus

Text : Hapus

button4 (Name) : btnBatal

Text : Batal

dataGridView1 (Name) : dgBuku

Size : 444; 319

Page 11: Membuat Form Aplikasi Pinjam Bukuelearning.amikompurwokerto.ac.id/...12/2019080608039301-Create_… · Membuat Form Aplikasi Pinjam Buku Pemrograman Visual - Session 11 Debby Ummul

11

1. Desain form keempat kita akan membuat desain aplikasi windows form

PEMINJAM.

2. Silahkan desain form peminjam seperti berikut.

3. Keterangan:

Toolbox Properties

Form (Name) : Form_Peminjam

FormBorderStyle : FixedSingle

Size : 754; 371

StartPosition : CenterScreen

Text : Form Peminjam

label1 Font : Segoe UI

Font Style : Light

Font Size : 12 pt

Text : FORM PEMINJAM

label2 Text : ID Peminjam

label3 Text : Nama

label4 Text : Alamat

label5 Text : Telepon

textBox1 (Name) : txtIdPeminjam

Page 12: Membuat Form Aplikasi Pinjam Bukuelearning.amikompurwokerto.ac.id/...12/2019080608039301-Create_… · Membuat Form Aplikasi Pinjam Buku Pemrograman Visual - Session 11 Debby Ummul

12

Size : 113; 20

textBox2 (Name) : txtNama

Size : 180; 20

textBox3 (Name) : txtAlamat

Size : 180; 54

textBox4 (Name) : txtTelepon

Size : 159; 20

button1 (Name) : btnTambah

Text : Tambah

button2 (Name) : btnUbah

Text : Ubah

button3 (Name) : btnHapus

Text : Hapus

button4 (Name) : btnBatal

Text : Batal

dataGridView1 (Name) : dgPeminjam

Page 13: Membuat Form Aplikasi Pinjam Bukuelearning.amikompurwokerto.ac.id/...12/2019080608039301-Create_… · Membuat Form Aplikasi Pinjam Buku Pemrograman Visual - Session 11 Debby Ummul

13

1. Desain form kelima kita akan membuat desain windows form PINJAM BUKU.

2. Silahkan desain form pinjam buku seperti berikut.

3. Keterangan:

Toolbox Properties

Form (Name) : Form_PinjamBuku

FormBorderStyle : FixedSingle

Size : 754; 371

StartPosition : CenterScreen

Text : Form Buku

label1 Font : Segoe UI

Font Style : Light

Font Size : 12 pt

Text : FORM PINJAM BUKU

label2 Text : ID Pinjam

label3 Text : ID Buku

label4 Text : Judul Buku

label5 Text : ID Peminjam

label6 Text : Tanggal Pinjam

label7 Text : Tanggal Kembali

textBox1 (Name) : txtIdPinjam

Page 14: Membuat Form Aplikasi Pinjam Bukuelearning.amikompurwokerto.ac.id/...12/2019080608039301-Create_… · Membuat Form Aplikasi Pinjam Buku Pemrograman Visual - Session 11 Debby Ummul

14

Size : 140; 20

textBox2 (Name) : txtIdBuku

Size : 140; 54

textBox3 (Name) : txtJudulBuku

Size : 166; 20

textBox4 (Name) : txtIdPeminjam

Size : 140; 20

dateTime1 (Name) : dtTglPinjam

Size : 166; 20

dateTime2 (Name) : dtTglKembali

Size : 166; 20

button1 (Name) : btnTambah

Text : Tambah

button2 (Name) : btnUbah

Text : Ubah

button3 (Name) : btnHapus

Text : Hapus

button4 (Name) : btnBatal

Text : Batal

dataGridView1 (Name) : dgPinjamBuku

Size : 444; 319