TI POLITALA : Oktober 2019

Membuat Database Buku dengan VB.Net

A. Membuat New Project dan Memasang MySQL Connector

Sebelum membuat project pada visual studio, install terlebih dahulu MySQL Connector.

Buka Microsoft Visual Studio untuk membuat aplikasi yang akan dibangun.

Pilih New Project, kemudian edit nama aplikasi sesuai dengan keinginan masing-masing. Kemudian Ok.

Kemudian akan tampil sebuah form baru seperti gambar dibawah ini.

B. Memasang MySQL Connector

Pilih Project à Add Reference. Kemudian pilih Menu Extensions dan pilih Mysql.Data versi 6.9.9.0, kemudian klik OK.

1. Membuat Form Utama

Form ini merupakan form yang tampil pertama kali ketika aplikasi dijalankan. Pertama kita ubah Text dari Form1 tersebut melalui properties.

Selanjutnya adalah buat komponen ke dalam form1. Tambahkan 2 button pada form, kemudian ubah properties button menjadi seperti berikut:

Properties	Value
Name	btn_buku
	btn_kategori
Text	Halaman Buku
	Halaman Kategori

Dan hasilnya design-nya seperti contoh di bawah ini:

2. Membuat Form Buku

Selanjutnya kita buat form buku, pilih project à Add Windows Form.

Pada form buku ini yang ditampilkan adalah tabel buku, kolom pencarian dan tombol tambah buku. Pertama tambahkan komponen button, label, dan textbox. Kemudian ubah properties dari masing-masing komponen tersebut sebagai berikut:

Komponen	Propesties	Value
Label	Text	Cari Buku
TextBox	Name	tb_cari
Button	Name	btn_cari
		btn_tambah
	Text	GO

Kemudian tambahkan komponen DataGridView ke dalam Form Buku.

Propertiees	Value
Name	DG
AutoSizeColumnsMode	AllCells

Kemudian hasilnya design nya akan seperti contoh di bawah ini:

Lalu tambahkan button dibawah DG dengan properties sebagai berikut:

Properties	Value
Name	btn_kembali
Text	Kembali

Maka hasil dengan di tambahkan buttn seperti contoh gambar di bawah ini:

3. Form Tambah Buku

Pada form buku terdapat button tambah, dimana jika button tersebut di klik pengguna akan diarahkan ke form untuk menambahkan data buku. Pilih menu Project à Add Windows Form, kemudian ubah name-nya menjadi Form Tambah Buku.

Setelah itu ubah properties text dari form tambah buku menjadi “Form Tambah Buku”.

Kemudian tambahkan komponen seperti Label, TextBox, Combobox dan Button dengan properties sebagai berikut:

Komponen	Properties	Value
Label	Text	Judul
Label	Text	Kategori
Label	Text	ISBN
Label	Text	Penerbit
Label	Text	Penulis
TextBox	Name	tb_isbn
Combobox	Name	cb_kat
Combobox	DropDownStyle	DropDwonList
TextBox	Name	tb_isbn
TextBox	Name	tb_penerbit
TextBox	Name	tb_penulis
Button	Name	btn_simpan
Button	Text	Simpan
Button	Name	btn_batal
Button	Text	Batal

Susunan komponennya adalah sebagai berikut:

4. Form Detail Buku

Form detail buku akan dimunculkan ketika baris data pada DG di form buku di klik. Fungsinya untuk merubah atau menghapus data buku. Cara membuatnya sama dengan langkah-langakah membuat form sebelumnya, pilih Project à Add Windows Form kemudian ubah Name nya menjadi Form Detai Buku.

Selanjutnya ubah text dari form detail buku menjadi “Halaman Detail Buku”. Kemudian susun beberapa komponen seperti Label, TextBox, Combobox, dan Button dengan properties sebagai berikut:

Komponen	Properties	Value
Label	Text	Judul
Label	Text	Kategori
Label	Text	ISBN
Label	Text	Penerbit
Label	Text	Penulis
TextBox	Name	tb_judul
Combobox	Name	cb_kat
Combobox	DropDownStyle	DropDwonList
TextBox	Name	tb_isbn
TextBox	Name	tb_penerbit
TextBox	Name	tb_penulis
Button	Name	btn_ubah
Button	Text	Ubah
Button	Name	btn_hapus
Button	Text	Hapus
Button	Name	btn_kembali
Button	Text	Kembali

Kemudian hasilnya seperti contoh gambar di bawah ini:

5. Form Kategori

Selanjutnya adalah buat form baru dengan nama form kategori. Pilih menu Project à Add Windows Form, kemudian ubah Name nya menjadi Kategori

Ubahlah properties dari komponen Label, TextBox, DataGridView dan button sebagai berikut:

Komponen	Properties	Value
Button	Name	btn_tambah
	Text	Tambah Kategori
Label	Text	Cari Kategori
TextBox	Name	tb_cari
Button	Name	btn_cari
Button	Text	GO
DataGridView	Name	DG
DataGridView	AutoSizeColumnsMode	All Cells
Button	Name	btn_kembali
Button	Text	Kembali

Dan hasilnya sepeti contoh di bawah ini:

6. Form Tambah Kategori

Pilih menu Project à Add Windows Form dan ubah Name nya menjadi Form Tambah Kategori.

Setelah itu ubah properties pada komponen Label, TextBox, dan Button sebagai berikut:

Komponen	Properties	Value
Label	Text	Kategori
TextBox	Name	tb_kategori
Button	Name	btn_simpan
Button	Text	Simpan
Button	Name	btn_batal
Button	Text	Batal

Contoh design nya seperti contoh di bawah ini:

7. Form Detail Kategori

Form detail kategori dimunculkan ketika baris data pada DG dari form kategori di klik. Fungsinya adalah untuk melakukan perubahan data atau penghapusan data pada tabel kategori. pilih menu Project à Add Windows Form kemudian ubah Name nya menjadi Form Detail Kategori.

Setelah itu ubah properties pada komponen Label, TextBox, dan Buttons sebagai berikut:

Komponen	Properties	Value
Label	Text	Kategori
TextBox	Name	tb_kategori
Button	Name	btn_ubah
Button	Text	Ubah
Button	Name	btn_hapus
Button	Text	Hapus
Button	Name	btn_kembali
Button	Text	Kembali

Berikut adalah contoh gambar design seperti gambar di bawah ini:

8. Membuat Module Koneksi

Module koneksi digunakan untuk menghubungkan database dengan aplikasi yang akan dibangun. Untuk membuat module koneksi, pilih menu Project à Add Module, kemudian ganti Name nya menjadi Koneksi.

Pada module koneksi, akan kita imports library MySQL.Data.dll yang sebelumnya sudah kita centang sebagai Reference.

Selanjutnya kita deklarasikan variable-variabel global yang akan kita gunakan untuk membuka koneksi, mendapatkan data dan melakukan eksekusi query.

Kemudian kita deklarasikan variable global lainnya, yaitu untuk variable id_buku dan id_kategori. Kedua variable ini dideklarasikan sebagai variable global karena digunakan untuk merubah, menghapus dan mencari data buku dan data kategori.

Kemudian kita buat function untuk mendapatkan data ketika suatu query dimasukkan. Function ini nantinya digunakan untuk menampilkan data ke dalam DataGridView.

Masih pada module koneksi, kita buat lagi sebuah procedure (SubRoutine) untuk eksekusi data. Procedure ini digunakan untuk mengeksesuki query selain SELECT.

9. Membuat Module Procedure

Pada database buku ini kita diminta membuat fungsi-fungsi CRUD yang dibungkus dalam method. Ini berarti fungsi CRUD tersebut harus dibungkus dalam suatu function atau procedure. Untuk itu kita membuat module procedure, sehingga semua method didalamnya bisa dipanggil secara global. Pilih menu Project à Add Module kemudian ganti Name nya menjadi “Procedure”.

a) Procedure TampilBuku()

Buat procedure TampilBuku() yang nantinya digunakan untuk menampilkan data buku. Didalamnya terdapat query untuk menampilkan semua data buku. Kemudian function GetResult juga dipanggil untuk mendapatkan datatable, dimana datatable ini sebagai source dari DataGridView pada Form Buku.

b) Procedure CariBuku()

Selanjutnya kita buat procedure CariBuku() yang nantinya digunakan untuk menampilkan buku berdasarkan variable cari, yang menyimpan data pencarian. Didalamnya terdapat query untuk menampilkan semua data buku. Kemudian function GetResult juga dipanggil untuk mendapatkan datatable, dimana datatable ini sebagai source dari DataGridVies pada Form Buku.

c) Procedure TambahBuku()

Selanjutnya kita buat procedure TambahBuku() yang nantinya digunakan untuk menambahlan data buku bari. Parameter pada procedure ini adalah judul, isbn, penerbit, dan penulis. Procedure ini nantinya dipanggil pada Form Tambah Buku. Setelah dijalankan maka Form Tambah Buku pun ditutup.

d) Procedure UbahBuku()

Selanjutnya kita buat procedure UbahBuku() yang nantinya digunakan untuk merubah data buku. Parameter pada procedure ini adalah id_buku, judul, idkat, penerbit dan penulis. Procedure ini nantinya dipanggil pada Form Detail Buku. Setelah dijalankan maka Form Detail Buku pun Ditutup.

e) Procedure HapusBuku()

Selanjutnya kita buat procedure HapusBuku() yang nantinya digunakan untuk menghapus data buku. Parameter pada procedure ini adalah id_buku. Procedure ini nantinya dipanggil pada Form Detail Buku. Setelah dijalankan maka Form Detail Buku pun ditutup.

f) Procedure TampilKategori()

Pada module procedure, kita buat pocedure TampilKategori() yang nantinya digunakan untuk menampilkan data kategori. Di dalamnya terdapat query untuk menampilkan semua data kategori. Kemudian function GetResult pun dipanggil untuk mendapatkan datatable, yang mana datatable ini sebagai source dari DataGridView pada Form Kategori.

g) Procedure CariKategori()

Selanjutnya kita buat procedure CariKategori() yang nantinya digunakan untuk menampilkan data kategori berdasarkan variabel cari, yang menyimpan data pencarian. Di dalamnya terdapat query untuk menampilkan semua data kategori. Kemudian function GetResult pun dipanggil untuk mendapatkan datatable, yang mana datatable ini sebagai source dari DataGridView pada Form Kategori.

h) Procedure TambahKategori()

Selanjutnya kita buat procedure TambahKategori() yang nantinya digunakan untuk menambahkan data kategori baru. Parameter pada procedure ini adalah kategori. Procedure ini nantinya dipanggil pada Form Tambah Kategori. Setelah dijalankan maka Form Tambah Kategori pun ditutup.

i) Procedure UbahKategori()

Selanjutnya kita buat procedure UbahKategori() yang nantinya digunakan untuk merubah data kategori. Parameter pada procedure ini adalah id_kategori dan kategori. Procedure ini nantinya dipanggil pada FormDetailKategori. Setelah dijalankan maka Form Detail Kategori
pun ditutup.

j) Procedure HapusKategori()

Selanjutnya kita buat procedure HapusKategori() yang nantinya digunakan

untuk menghapus data kategori. Parameter pada procedure ini adalah id_kategori. Procedure ini nantinya dipanggil pada Form Detail Kategori. Setelah dijalankan maka FormDetailKategori pun ditutup

10. Membuat Kode Program Pada tampilan

a) Form 1

Pada tampilan Form1 terdapat dua button, yaitu btnBuku dan btnKategori. Jika btnBuku diklik maka FormBuku ditampilkan. Jika btnKategori diklik maka FormKategori ditampilkan. Untuk membuat kode di dalam btnBuku, klik btnBuku dua kali.

Demikian juga untuk mengisi kode di btnKategori, klik btnKategori dua kali, kemudian isikan perintah FormKategori.ShowDialog().

b) Form Buku

Ketika FormBuku ditampilkan, data buku sudah harus ditampilkan pada DG. Oleh karena itu kita harus membuat kode program pada FormBuku. Klik FormBuku dua kali untuk membuat procedure nya.

Pemanggilan procedure CariBuku() ketika btnCari diklik

c) Pengisian kode program pada btnKembali dan btnTambah

Pada btnKembali hanya diisi perintah Me.Close(), yang artinya menutup FormBuku itu sendiri. Dengan demikian akan kembali menampilkan Form1.

Pada btntTambah diisi perintah untuk membuka FormTambahBuku. Setelah itu dipanggil lagi procedure TampilBuku() agar ketika FormTambahBuku ditutup DG langsung ter update.

d) Pengisian kode program ketika klik DG

Ketika DG diklik, pengguna akan diarahkan ke FormDetailBuku, dimana akan terdeteksi ID Buku dari DG dan tersimpan pada variable public id_buku.

Pada method DG_CellClick, kita buat suatu kondisi apakah DG tersebut ada datanya atau tidak. Digambarkan dengan mendapatkan indeks baris maksimum dari DG. Klik pada DG baru dapat dilakukan jika baris yang diklik indeks barisnya lebih kecil daripada indeks barismaksimum. Kemudian pada DG, ID Buku terdapat pada kolom ke-0. ID Buku tersebut kita simpan ke dalam variabel global id_buku dan setelah itu FormDetailBuku dapat ditampilkan. Tidak lupa dibawah perintah untuk menampilkan FormDetailBuku kita panggil procedure TampilBuku agar isi dari DG dapat terupdate secara otomatis apabila nantinya pada

FormDetailBuku dilakukan proses Ubah atau Hapus.

11. Form Tambah buku

a) Pengisian kode program saat form tambah buku berjalan

Saat FormTambahBuku berjalan, yang dilakukan adalah mengosongkan komponenkomponen TextBox seperti txtJudul, txtISBN, txtPenerbit dan txtPenulis. Selain itu dilakukan juga pengisian ComboBox cbKat. Pengisian tersebut dilakukan pada procedure FormTambahBuku_Load, dengan cara mengklik FormTambahBuku sebanyak dua kali. Selanjutnya kita isikan perintah untuk membersihkan komponen-komponen TextBox dan pengisian ComboBox.

b) Pengisian kode program pada btnSimpan

Pada btnSimpan semua isi dari TextBox dan ComboBox disimpan ke dalam variable-variabel kemudian panggil procedure TambahBuku().

c) Pengisian kode program pada btnBatal

Ada btnBatal diberikan perintah Me.Close() yang berarti keluar dari FormTambahBuku.

12. Form Detail Buku

a) Pengisian kode program saat Form Detail Buku Berjalan

Saat Form Detail Buku dijalankan, semua komponen baik TextBox dan ComboBox terisi berdasarkan variable global id_buku yang telah disimpan ketika DG_CellClick di Form Buku.