Selasa, 15 Oktober 2019

Database Pemrograman Visual

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
DropDownStyle
DropDwonList
TextBox
Name
tb_isbn
TextBox
Name
tb_penerbit
TextBox
Name
tb_penulis
Button
Name
btn_simpan
Text
Simpan
Button
Name
btn_batal
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
DropDownStyle
DropDwonList
TextBox
Name
tb_isbn
TextBox
Name
tb_penerbit
TextBox
Name
tb_penulis
Button
Name
btn_ubah
Text
Ubah
Button
Name
btn_hapus
Text
Hapus
Button
Name
btn_kembali
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
Text
GO
DataGridView
Name
DG
AutoSizeColumnsMode
All Cells
Button
Name
btn_kembali
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
Text
Simpan
Button
Name
btn_batal
Text
Batal
Contoh design nya seperti contoh di bawah ini:
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
Text
Ubah
Button
Name
btn_hapus
Text
Hapus
Button
Name
btn_kembali
Text
Kembali
Berikut adalah contoh gambar design seperti gambar di bawah ini:
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.
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
      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.
 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.
b)      Pengisian kode program pada btnUbah
c)      Pengisian kode program pada btnHapus
d)      Pengisian kode program pada btnKembali
              a)      Pemanggilan procedure TampilKategori() ketika FormKategori dijalankan
  b)      Pemanggilan procedure CariKategori() pada FormKategori
  c)      Pengisian kode program pada btnKembali

      d)      Pengisian kode program pada btnTambah
               e)      Pengisian kode program ketika klik DG

      a)      Pengisian kode program saat FormTamahKategori Berjalan

      b)      Pengisian kode program pada btnSimpan

      c)      Pengisian kode program pada btnBatal

       a)      Pengisian kode program saat FormDetailKategori berjalan

      b)      Pengisian kode program pada btnUbah

      c)      Pengisian kode program pada btnHapus
      d)      Pengisian kode program pada btnKembali

Berikut adalah hasil running dari form database buku yang sudah dibuat.
a)      Halaman Tambah Kategori
Pada halaman tambah kategori, kita dapat menambahkan data seperti gambar berikut.
Berikut adalah hasil data yang sudah ditambahkan sebelumnya pada halaman Tambah Kategori
b)      Halaman Tambah Buku 
       Berikut adalah halaman tambah buku untuk menambahkan data buku.

Berikut adalah hasil dari data yang sudah ditambahkan.

   c)      Halaman Detail Buku
   Berikut adalah hasil running dari Halaman Detail Buku

  Hasil dari data yang sudah ditambahkan.

  Berikut adalah hasil running jika kita ingin menghapus data pada Judul “Asal Mula Majapahit’

     d)      Halaman Detail Kategori
      Berikut adalah hasil running jika kita ingin menghapus dari Kategori Sejarah.

Tidak ada komentar:

Posting Komentar