MODUL - elearning.amikompurwokerto.ac.idelearning.amikompurwokerto.ac.id/index.php/... · Untuk...

26
MODUL Mengkoneksikan Aplikasi dengan Database Pemrograman Visual - Session 12 Debby Ummul Hidayah, S.Kom., M.MSI [email protected]

Transcript of MODUL - elearning.amikompurwokerto.ac.idelearning.amikompurwokerto.ac.id/index.php/... · Untuk...

Page 1: MODUL - elearning.amikompurwokerto.ac.idelearning.amikompurwokerto.ac.id/index.php/... · Untuk menampilkan data dari database ke datagridview langkah-langkahnya sama seperti pada

MODUL

Mengkoneksikan Aplikasi dengan Database

Pemrograman Visual - Session 12

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

Page 2: MODUL - elearning.amikompurwokerto.ac.idelearning.amikompurwokerto.ac.id/index.php/... · Untuk menampilkan data dari database ke datagridview langkah-langkahnya sama seperti pada

2

1. Langkah pertama silahkan buka AplikasiPinjamBuku.

2. Masuk ke tab Server Explorer.

3. Klik kanan pada Data Connections Add Connection.

4. Ketikkan nama server pada server name. Sesuaikan dengan laptop atau komputer

masing-masing.

Page 3: MODUL - elearning.amikompurwokerto.ac.idelearning.amikompurwokerto.ac.id/index.php/... · Untuk menampilkan data dari database ke datagridview langkah-langkahnya sama seperti pada

3

5. Sebagai contoh seperti berikut.

Page 4: MODUL - elearning.amikompurwokerto.ac.idelearning.amikompurwokerto.ac.id/index.php/... · Untuk menampilkan data dari database ke datagridview langkah-langkahnya sama seperti pada

4

1. Klik pada segitiga kecil pada datagridview

2. Selanjutnya pilih Add Project Data Source.

Klik di sini

Klik di sini

Page 5: MODUL - elearning.amikompurwokerto.ac.idelearning.amikompurwokerto.ac.id/index.php/... · Untuk menampilkan data dari database ke datagridview langkah-langkahnya sama seperti pada

5

Selanjutnya klik tombol Next.

Klik tombol Next lagi

Page 6: MODUL - elearning.amikompurwokerto.ac.idelearning.amikompurwokerto.ac.id/index.php/... · Untuk menampilkan data dari database ke datagridview langkah-langkahnya sama seperti pada

6

Cari database PinjamBuku lalu klik tombol Next

Pilih tabel yang akan ditampilkan datanya. Misalnya data pada tabel buku. Lalu klik

tombol Finish

Page 7: MODUL - elearning.amikompurwokerto.ac.idelearning.amikompurwokerto.ac.id/index.php/... · Untuk menampilkan data dari database ke datagridview langkah-langkahnya sama seperti pada

7

Lalu masuk ke datagridview task lagi kemudian pilih Preview Data

Kemudian klik tombol Preview kemudian klik tombol Close

Page 8: MODUL - elearning.amikompurwokerto.ac.idelearning.amikompurwokerto.ac.id/index.php/... · Untuk menampilkan data dari database ke datagridview langkah-langkahnya sama seperti pada

8

1. Tambahkan SqlDataClient seperti berikut.

2. Ketikkan source code berikut untuk membuat koneksi.

3. Membuat method Bersih.

4. Menampilkan data di data gridView

Page 9: MODUL - elearning.amikompurwokerto.ac.idelearning.amikompurwokerto.ac.id/index.php/... · Untuk menampilkan data dari database ke datagridview langkah-langkahnya sama seperti pada

9

5. Double klik pada button Batal lalu ketikkan program berikut

6. Double klik pada button Tambah lalu ketikkan program berikut

Page 10: MODUL - elearning.amikompurwokerto.ac.idelearning.amikompurwokerto.ac.id/index.php/... · Untuk menampilkan data dari database ke datagridview langkah-langkahnya sama seperti pada

10

7. Double klik pada button Ubah lalu ketikkan program berikut

8. Double klik pada button Hapus lalu ketikkan program berikut

Page 11: MODUL - elearning.amikompurwokerto.ac.idelearning.amikompurwokerto.ac.id/index.php/... · Untuk menampilkan data dari database ke datagridview langkah-langkahnya sama seperti pada

11

9. Untuk menampilkan data yang dipilih dari datagridview ke textbox, silahkan klik

pada datagridview pilih properties pilih event double klik pada Cell Click.

Lalu ketikkan program berikut.

Page 12: MODUL - elearning.amikompurwokerto.ac.idelearning.amikompurwokerto.ac.id/index.php/... · Untuk menampilkan data dari database ke datagridview langkah-langkahnya sama seperti pada

12

NOTES:

Untuk menampilkan data dari database ke datagridview langkah-langkahnya sama

seperti pada halaman 4 – 7. Hanya saja yang berbeda adalah data tabel yang akan

ditampilkan. Jika yang ingin ditampilkan adalah tabel peminjam maka yang dicentang

adalah tabel peminjam.

1. Tambahkan SqlDataClient seperti berikut.

Page 13: MODUL - elearning.amikompurwokerto.ac.idelearning.amikompurwokerto.ac.id/index.php/... · Untuk menampilkan data dari database ke datagridview langkah-langkahnya sama seperti pada

13

2. Ketikkan source code berikut untuk membuat koneksi.

3. Membuat method Bersih.

4. Menampilkan data di data gridView

5. Double klik pada button Batal lalu ketikkan program berikut

Page 14: MODUL - elearning.amikompurwokerto.ac.idelearning.amikompurwokerto.ac.id/index.php/... · Untuk menampilkan data dari database ke datagridview langkah-langkahnya sama seperti pada

14

6. Double klik pada button Tambah lalu ketikkan program berikut

7. Double klik pada button Ubah lalu ketikkan program berikut

Page 15: MODUL - elearning.amikompurwokerto.ac.idelearning.amikompurwokerto.ac.id/index.php/... · Untuk menampilkan data dari database ke datagridview langkah-langkahnya sama seperti pada

15

8. Double klik pada button Hapus lalu ketikkan program berikut

9. Untuk menampilkan data yang dipilih dari datagridview ke textbox, silahkan klik

pada datagridview pilih properties pilih event double klik pada Cell Click.

Lalu ketikkan program berikut.

Page 16: MODUL - elearning.amikompurwokerto.ac.idelearning.amikompurwokerto.ac.id/index.php/... · Untuk menampilkan data dari database ke datagridview langkah-langkahnya sama seperti pada

16

NOTES:

Untuk menampilkan data dari database ke datagridview langkah-langkahnya sama

seperti pada halaman 4 – 7. Hanya saja yang berbeda adalah data tabel yang akan

ditampilkan. Jika yang ingin ditampilkan adalah tabel pinjam buku maka yang

dicentang adalah tabel pinjam.

1. Tambahkan SqlDataClient seperti berikut.

Page 17: MODUL - elearning.amikompurwokerto.ac.idelearning.amikompurwokerto.ac.id/index.php/... · Untuk menampilkan data dari database ke datagridview langkah-langkahnya sama seperti pada

17

2. Ketikkan source code berikut untuk membuat koneksi.

3. Membuat method Bersih.

4. Menampilkan data di data gridView

5. Double klik pada button Batal lalu ketikkan program berikut

Page 18: MODUL - elearning.amikompurwokerto.ac.idelearning.amikompurwokerto.ac.id/index.php/... · Untuk menampilkan data dari database ke datagridview langkah-langkahnya sama seperti pada

18

6. Double klik pada button Tambah lalu ketikkan program berikut

7. Double klik pada button Ubah lalu ketikkan program berikut

Page 19: MODUL - elearning.amikompurwokerto.ac.idelearning.amikompurwokerto.ac.id/index.php/... · Untuk menampilkan data dari database ke datagridview langkah-langkahnya sama seperti pada

19

8. Double klik pada button Hapus lalu ketikkan program berikut

9. Untuk menampilkan data yang dipilih dari datagridview ke textbox, silahkan klik

pada datagridview pilih properties pilih event double klik pada Cell Click.

Lalu ketikkan program berikut.

Page 20: MODUL - elearning.amikompurwokerto.ac.idelearning.amikompurwokerto.ac.id/index.php/... · Untuk menampilkan data dari database ke datagridview langkah-langkahnya sama seperti pada

20

10. Tambahan : untuk menampilkan judul buku di textbox judul buku secara otomatis,

silahkan double klik pada textbox id buku (txtIdBuku) kemudian ketikkan program

berikum.

Page 21: MODUL - elearning.amikompurwokerto.ac.idelearning.amikompurwokerto.ac.id/index.php/... · Untuk menampilkan data dari database ke datagridview langkah-langkahnya sama seperti pada

21

1. Buka form login lalu double klik pada tombol Cancel dan ketikkan program berikut.

2. Selanjutnya double klik pada tombol OK dan ketikkan program berikut.

Page 22: MODUL - elearning.amikompurwokerto.ac.idelearning.amikompurwokerto.ac.id/index.php/... · Untuk menampilkan data dari database ke datagridview langkah-langkahnya sama seperti pada

22

1. Buka form utama kemudian double klik pada sub menu Buku dari menu Master.

Kemudian ketikkan program berikut.

2. Double klik pada sub menu Peminjam dari menu Master. Kemudian ketikkan

program berikut.

double klik pada sub menu buku

double klik pada sub menu

peminjam

Page 23: MODUL - elearning.amikompurwokerto.ac.idelearning.amikompurwokerto.ac.id/index.php/... · Untuk menampilkan data dari database ke datagridview langkah-langkahnya sama seperti pada

23

3. Double klik pada sub menu Keluar dari menu Master. Kemudian ketikkan program

berikut.

4. Double klik pada sub menu Pinjam Buku dari menu Transaksi. Kemudian ketikkan

program berikut.

double klik pada sub

menu pinjam buku

double klik pada sub

Keluar

Page 24: MODUL - elearning.amikompurwokerto.ac.idelearning.amikompurwokerto.ac.id/index.php/... · Untuk menampilkan data dari database ke datagridview langkah-langkahnya sama seperti pada

24

5. Double klik menu toolbar Pinjam. Kemudian ketikkan program berikut.

6. Double klik menu toolbar Buku. Kemudian ketikkan program berikut.

double klik pada toolbar

Pinjam

double klik pada toolbar

Buku

Page 25: MODUL - elearning.amikompurwokerto.ac.idelearning.amikompurwokerto.ac.id/index.php/... · Untuk menampilkan data dari database ke datagridview langkah-langkahnya sama seperti pada

25

7. Double klik menu toolbar Peminjam. Kemudian ketikkan program berikut.

8. Double klik menu toolbar Keluar. Kemudian ketikkan program berikut.

double klik pada toolbar

Peminjam

double klik pada toolbar

Keluar

Page 26: MODUL - elearning.amikompurwokerto.ac.idelearning.amikompurwokerto.ac.id/index.php/... · Untuk menampilkan data dari database ke datagridview langkah-langkahnya sama seperti pada

26

Double klik pada program.cs kemudian ganti form pertama yang dijalankan yaitu form

login, seperti berikut.