1. Membangun Database Buku

Pastikan database buku_khalifa sudah dibangun seperti gambar dibawah ini:

2. Menginstall MySql Connector

Install mysql connector.

3. Membuat new project

Buka Microsoft Visual Studio untuk membuat aplikasi yang akan kita bangun. Pilih new project.

Klik OK untuk masuk ke dalam layar kerja aplikasi.

4. Memasang MySql Connector

Sebelum memasang MySQL Connector, kita harus melihat terlebih dahulu Target Framework dari aplikasi kita. Dapat dilihat dengan memilih menu Project → (Nama Aplikasi) Properties.

Perhatikan pada gambar di atas target frameworknya adalah .NET Framework 4.5. Sekarang kita pilih Project → Add Reference.

Kemudian pilih Extensions lalu klik tombol Browse. Lalu kita arahkan ke folder tempat MySQL Connector diinstal sebelumnya. Kemudian buka folder Assemblies. Perhatikan, target framework aplikasi kita tadi. Karena targetnya adalah versi 4.5, maka pilih folder v4.5 di atas.

Pilih MySQL.Data.dll, lalu klik Add. Pada menu Extensions library tersebut akan tercentang.

5. Membuat Tampilan Form

Ketika membuat New Project, kita akan ditampilkan sebuah Form yang bernama Form1 dibawah ini:

Form1 ini merupakan Form Utama, yaitu Form yang tampil pertama kali ketika aplikasi dijalankan. Pertama kita ubah Text dari Form1 tersebut melalui Properties di pojok kanan bawah menjadi “Aplikasi untuk TUK”.

Setelah itu kita geser komponen Button dari ToolBox (di sebelah kiri layar kerja) ke dalam Form1.

$Description: C:\Users\diyah\Pictures\Screenshots\Screenshot (309).png$

Ganti properties dari button tersebut menjadi seperti gambar dibawah ini:

$Description: C:\Users\diyah\Pictures\Screenshots\Screenshot (308).png$

Selanjutnya kita tambahkan lagi satu buah button dengan properties sebagai berikut:

$Description: C:\Users\diyah\Pictures\Screenshots\Screenshot (307).png$

6. FormBuku

Selanjutnya kita akan membuat Form baru yang bernama FormBuku. Caranya dengan memilih menu Project → Add Windows Form. Kemudian Anda akan dimunculkan box. Pada bagian Name dari box tersebut (di bagian bawah) ubah Name tersebut menjadi FormBuku.

$Description: C:\Users\diyah\Pictures\Screenshots\Screenshot (310).png$

Kemudian pilih Add, akan muncul FormBuku sebagai berikut:

$Description: C:\Users\diyah\Pictures\Screenshots\Screenshot (311).png$

Ubah text dari FormBuku tersebut melalui Properties (di bagian kanan bawah) menjadi Halaman Buku.

$Description: C:\Users\diyah\Pictures\Screenshots\Screenshot (312).png$

Pertama kita tambahkan komponen button untuk tambah buku dengan properties sebagai berikut:

$Description: C:\Users\diyah\Pictures\Screenshots\Screenshot (318).png$

Selanjutnya di sebelah kanan, kita tambahkan komponen-komponen untuk kolom pencarian, yang meliputi label, textbox dan button. Atur propertiesnya seperti berikut:

$Description: C:\Users\diyah\Pictures\Screenshots\Screenshot (319).png$

Setelah itu kita tambahkan komponen DataGridView ke dalam FormBuku. DataGridView berada di ToolBox pada sub menu Data. Atur properties dari DataGridView tersebut seperti berikut:

Kemudian tambahkan button di bawah DG dengan properties sebagai berikut:

$Description: C:\Users\diyah\Pictures\Screenshots\Screenshot (320).png$

7. FormTambahBuku

Pada FormBuku terdapat btnTambah, dimana jika button tersebut diklik pengguna akan diarahkan ke Form untuk menambahkan data buku. Form tersebut adalah FormTambahBuku. Cara membuatnya sama dengan membuat FormBuku, pilih menu Project → Add Windows Form, kemudian Name nya diubah menjadi FormTambahBuku.

$Description: C:\Users\diyah\Pictures\Screenshots\Screenshot (321).png$

Selanjutnya ubah properties text dari FormTambahBuku menjadi “Halaman Tambah Buku”.

$Description: C:\Users\diyah\Pictures\Screenshots\Screenshot (322).png$

Kemudian kita tambahkan komponen-komponen seperti Label, TextBox, ComboBox dan Button dengan Properties sebagai berikut.

Dengan susunan antar komponen seperti berikut:

$Description: C:\Users\diyah\Pictures\Screenshots\Screenshot (323).png$

8. FormDetailBuku

FormDetailBuku akan dimunculkan ketika baris data pada DG di FormBuku diklik.

Fungsinya untuk merubah atau menghapus data buku. Cara membuatnya sama dengan langkah-langkah membuat Form sebelumnya, pilih Project → Add Windows Form kemudian ubah Name nya menjadi FormDetailBuku.

$Description: C:\Users\diyah\Pictures\Screenshots\Screenshot (324).png$

Selanjutnya ubah text dari FormDetailBuku menjadi “Halaman Detail Buku”. Kemudian susun beberapa komponen-komponen seperti Label, TextBox, ComboBox, dan Button dengan Properties sebagai berikut:

$Description: C:\Users\diyah\Pictures\Screenshots\Screenshot (325).png$

9. FormKategori

Selanjutnya kita bangun FormKategori dengan cara pilih menu Project → Add Windows Form, kemudian ubah Name-nya menjadi FormKategori.

$Description: C:\Users\diyah\Pictures\Screenshots\Screenshot (326).png$

Ubahlah Properties Text dari FormKategori menjadi “Halaman Kategori”. Kemudian susun beberapa komponen-komponen seperti Label, TextBox, DataGridView dan Button dengan Properties sebagai berikut:

$Description: C:\Users\diyah\Pictures\Screenshots\Screenshot (327).png$

10. FormTambahKategori

Pilih menu Project → Add Windows Form dan ubah Name-nya menjadi FormTambahKategori.

$Description: C:\Users\diyah\Pictures\Screenshots\Screenshot (328).png$

Setelah itu ubah Properties dari FormTambahKategori di bagian Text menjadi “Halaman Kategori”. Kemudian susun beberapa komponen-komponen seperti Label, TextBox dan Button dengan Properties sebagai berikut:

$Description: C:\Users\diyah\Pictures\Screenshots\Screenshot (329).png$

11. FormDetailKategori

FormDetailKategori dimunculkan ketika baris data pada DG dari FormKategori diklik. Fungsinya adalah untuk melakukan perubahan data atau penghapusan data pada tabel kategori. Untuk membuat Form ini pilih menu Project → Add Windows Form kemudian ubah Name-nya menjadi FormDetailKategori.

$Description: C:\Users\diyah\Pictures\Screenshots\Screenshot (330).png$

Setelah itu ubah Properties dari FormDetailKategori di bagian Text menjadi “Halaman Detail Kategori”. Kemudian susun beberapa komponen-komponen seperti Label, TextBox dan Button dengan Properties sebagai berikut:

$Description: C:\Users\diyah\Pictures\Screenshots\Screenshot (331).png$

12. 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.

$Description: C:\Users\diyah\Pictures\Screenshots\Screenshot (332).png$

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

$Description: C:\Users\diyah\Pictures\Screenshots\Screenshot (333).png$

13. Membuat Module Procedure

Pada soal kita diminta untuk membuat fungsi-fungsi CRUD yang dibungkus dalam method. Ini berarti fungsi CRUD tersebut harus dibungkus dalam suatu function atau procedure. Untuk itu kita akan membuat module procedure, sehingga semua method di dalamnya bisa dipanggil secara global. Pilih menu Project → Add Module kemudian ganti Name-nya menjadi “procedure”.

$Description: C:\Users\diyah\Pictures\Screenshots\Screenshot (334).png$

14. Procedure TampilBuku()

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

15. Procedure CariBuku()

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

16. Procedure TambahBuku()

Selanjutnya kita buat procedure TambahBuku() yang nantinya digunakan untuk menambahkan data buku baru. Parameter pada procedure ini adalah judul, isbn, idkat, penerbit dan penulis.

Procedure ini nantinya dipanggil pada FormTambahBuku. Setelah dijalankan maka FormTambahBuku pun ditutup.

17. Procedure UbahBuku()

Selanjutnya kita buat procedure UbahBuku() yang nantinya digunakan untuk merubah data buku. Parameter pada procedure ini adalah id_buku, judul, isbn, idkat, penerbit dan penulis.

Procedure ini nantinya dipanggil pada FormDetailBuku. Setelah dijalankan maka FormDetailBuku pun ditutup.

18. 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 FormDetailBuku. Setelah dijalankan maka FormDetailBuku pun ditutup.

19. Procedure TampilKategori()

Pada module procedure, kita buat procedure 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 FormKategori.

20. 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

FormKategori.

21. 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 FormTambahKategori. Setelah dijalankan maka FormTambahKategori pun ditutup.

22. 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 FormDetailKategori pun ditutup.

23. 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 FormDetailKategori. Setelah dijalankan maka FormDetailKategori pun ditutup.

24. Source Code Lengkap Module Procedure

MEMBUAT KODE PROGRAM PADA TAMPILAN

25. Form1

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. Kemudian isikan perintah FormBuku.ShowDialog().

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

Berikut tampilan ketika aplikasi dijalankan.

26. Pemanggilan Procedure TampilBuku() Ketika FormBuku Dijalankan

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. Selanjutnya kita isikan pemanggilan function TampilBuku() untuk menampilkan data buku di DG pada FormBuku.

Berikut tampilan FormBuku

27. Pemanggilan Procedure CariBuku() Ketika btnCari Diklik

Untuk membangun kode program pada btnCari, klik btnCari dua kali. Masukan kode program pada btnCari, klik btnCari dua kali. Kita simpan isi dari txtCari ke dalam suatu variable.

28. Pengisian Kode Program Pada btnKembali

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

29. Pengisian Kode Program Pada btnTambah

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

30. Pengisian Kode Program Ketika Klik DG

Ketika DG diklik, pengguna akan diarahkan ke FormDetailBuku, dimana akan terdeteksi ID Buku dari DG dan tersimpan pada variabel publik id_buku. Pertama kita klik komponen DG dua kali untuk mengarahkan kepada procedurenya. Dapat dilihat bahwa nama methodnya adalah “CellContentClick”, kita ganti menjadi “CellClick”. Cara menggantinya adalah dengan merubah nama method di bagian atas dari lembar kerja.

31. SourceCode lengkap di FormBuku

32. Pengisian Kode Program Saat Formtambahbuku Berjalan

Saat FormTambahBuku berjalan, yang dilakukan adalah mengosongkan komponen-komponen 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.

Pemrogramman Visual

Komentar

Posting Komentar

Postingan populer dari blog ini