PEMOGRAMAN VISUAL

Cara Membuat Buku Dengan Visual Studio

1. Langkah yang pertama adalah membuat data base dengan nama buku_khalifa.
   
2. Langkah selanjutnya adalah membuat di dalam data base. Dengan nama katergori. Jumlah kolomnya adalah
   
3. Langkah selanjutnya adalah mengisi kolom dengan atribut yaitu id_kategori variabel int yang jumlah 11 merupakan primery key dan kategori yaitu varchart jumlah maksimalnya adalah 100.
   
4. Ini merupakan tampilan dari tabel kategori.
   
5. Langkah selanjutnya adalah merupakan buku dengan atribut id_Buku sebagia primery key jumlah maksimalnya adalah 11 variabelnya adalah int, Id_kategori yang sebagai foreigy key untuk pemanggilan di kategori jumlahnya adalah 11 variablenya adalah int, judul, isbn, dan penerbit.
   
   
6. Ini tampilan tabel buku.
   
7. Langkah selanjutnya adalah merelasian tabel. Seperti Pada gambar ini merupakan relasi antara tabel kategori dan tabel buku dalam database buku_khalifa. Pastikan ada seperti garis hijau yang menandakan bahwa tabel telah relasi.
   
8. Langkah selanjutnya adalah membuat tabel login yang atributnya yaitu id, password dan username.
   
9. Ini merupakan inputan dari login untuk menentukan saat login sebagi admin atau user.
   
10. Untuk membuat projek langkah pertama adalah buka Microsoft visual studio.
    
    
11. Langkah selanjutnya adalah klik file lalu pilih new projek, lalu pilih visul basic kemudian klik windows setelah itu silahkan pilih Windows forms application. Kemudian beri nama sesuai dengan yang di tentukan, kemudian pilih tempat penyimpanan, lalu itu klik OK.
    
12. Langkah selanjutnya adalah membuat from, lalu merubah nama form dengan menggati teks sesuai dengan yang diitentukan.
    
    
    
13. Langkah selanjutnya adalah memasang MySQL Connector, sesuai Framework yang di tentukan agar tidak terjadi error atau form tidak tampil. Untuk menampilkan mysql connector klik kanan projek lalu pilih Target Framework. 
    
14. Langkah selanjutnya adalah mencentang assemblies, pilih project, pilih add Reference kemudian pilih Assemblies.  pada gambar di atas target frameworknya adalah .NET Framework 4.5.2. 
    
15. Selanjutnya adalah Extensions lalu klik tombol Browse. Kemudian cari tempat menyimpanan mysql di folder c. lalu pilih mysql.data.dll. lalu pilih add.
    
16. Pada menu Extensions library tersebut kemudian centang dan klik yang dibutuhkan untuk mendukung vb OK.
    
17. Pada tampilan pertama adalah form utama dengan cara klik New Project,kemudian beri nama sesuai yang ditentukan kita akan ditampilkan sebuah Form yang bernama Form1 sebagai berikut.
    
18. Form1 ini merupakan Form Utama, yaitu Form yang tampil pertama kali ketika aplikasi dijalankan. Memberi nama form dengan cara klik properties di pojok kanan ada, di text kosong menjadi “Aplikasi untuk TUK”.
    
19. Langkah selanjutnya adalah Button dari ToolBox (di sebelah kiri layar kerja) ke dalam Form1. Button1 untuk name btnbuku, text yaitu halaman buku.
    
20. Langkah selanjutnya adalah mengganti properties dari button 1 tersebut dengan format menjadi sebagai berikut.
    
    
21. Selanjutnya kita tambahkan lagi satu buah button dengan properties sebagai berikut.
    
    
22.  Langkah membuat from dengan nama from buku. Klik file kemudian menu new Project klik Add Windows Form. Pada bagian Name dari box tersebut (di bagian bawah) ubah Name tersebut menjadi form buku, kemudian ADD.
    
23. Kemudian pilih Add, akan muncul FormBuku sebagai berikut.
    
24. Langkah selanjutnya mengubah text dari FormBuku tersebut melalui Properties menjadi halaman buku.
    
25. Selanjutnya tambahkan Button Tambah Buku. 
    
    
    
    
26. Selanjutnya menambahkan button dengan properties sebagai berikut. 
    
    
27. Langkah selanjutnya membuat Form baru yang bernama FormBuku. Langkahnya klik new project, kemudian pilih add windows form. Kemudian pada bagian Name dari box tersebut (di bagian bawah) ubah Name tersebut menjadi form buku. Kemudian klik add.
    
28. Tampilan form buku. 
    
29. Langkah selanjutnya adalah mengubah text dari FormBuku tersebut melalui Properties menjadi halaman buku. 
    
    
    
30. Langkah selanjutnya adalah tambahkan komponen-komponen untuk kolom pencarian, yang meliputi label, textbox dan button. Atur propertiesnya format seperti   berikut.
    
     
31. Langkah selanjutnya adalah menambahkan tambahkan DataGridView ke dalam FormBuku. DataGridView berada di ToolBox pada sub menu Data. Atur properties dari DataGridView dengan format tersebut seperti berikut. 
    
    
    
    
32. Langkah selanjutnya adalah membuat tambah Pada FormBuku jika button tersebut diklik pengguna akan diarahkan ke Form untuk menambahkan data buku. Cara membuat tambah dengan mengklik menu Project kemudian pilih Add windows Windows Form, kemudian  diubah nama form  menjadi FormTambahBuku.
    
33. Langkah Selanjutnya mengubah properties text dari FormTambahBuku menjadi “Halaman Tambah Buku”.
    
34. Kemudian menambahkan komponen-komponen seperti Label, TextBox, ComboBox dan Button dengan Properties dengan format sebagai berikut.
    
    
35. Ini merupakan tampilan dengan susunan antar komponen seperti berikut.
    
36. Fungsinya untuk merubah atau menghapus data FormDetailBuku akan muncul ketika baris data pada DG di FormBuku diklik buku. tahapan untuk membuat klik Project kemudian pilih Add Windows Form kemudian ubah Nama form menjadi FormDetailBuku. Kemudian klik add.
    
37. Langkah selanjutnya mengubah text dari FormDetailBuku menjadi “Halaman Detail Buku”. Kemudian membuat komponen-komponen Label, TextBox, ComboBox, dan Button dengan Properties yang formatnya sebagai berikut.
    
    
    
38. Langkah selanjutnya membuat FormKategori dengan klik menu Project kemudian pilih Add Windows Form, kemudian ubah Name nya menjadi FormKategori. Kemudian klik add.
    
39. Langkah selanjutnya adalah mengubah Properties Text dari FormKategori menjadi “Halaman Kategori”. Lalu tambahkan komponen-komponen seperti Label, TextBox, DataGridView dan Button dengan Properties dengan format sebagai berikut.
    

    

    
    

    
40. Langkah selanjutnya adalah membuat tambah kategori dengan Pilih menu Project kemudian pilih Add Windows Form, lalu ubah Name. Properties dari FormTambahKategori di bagian Text menjadi “Halaman Kategori”. Kemudian klik add.
    

    
41. Langkah selanjutnya adalah menambahkankomponen-komponen Label, TextBox dan Button dengan Properties dengan format sebagai berikut.
    

    

    
42. Langkah selanjutnya adalah 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 Projet,kemudian pilih Add Windows Form kemudian ubah Name nya menjadi FormDetailKategori. Kemudian klik add.
    

    
43. Langkah selanjutnya adalah mengubah Properties dari FormDetailKategori pada Text menjadi “Halaman Detail Kategori”. Kemudian tambahkan beberapa komponen-komponen seperti Label, TextBox dan Button dengan Properties dengan format sebagai berikut.
    

    

    
    

    
44. Module Koneksi digunakan untuk menghubungkan database dengan aplikasi yang akan dibangun. Untuk membuat module koneksi, langkahnya adalah pilih menu Project kemudian pilih Add Module, kemudian ganti Name nya menjadi Koneksi. Kemudian klik add.
    

    
45. Pada module koneksi, akan kita imports library MySQL.Data.dll yang sebelumnya sudah kita centang sebagai Referens. Berikut adalah source code lengkap dari module koneksi.
    

    
46. Pada langkah untuk membuat fungsi-fungsi CRUD yang dibungkus dalam method. Fungsi CRUD terdapat didalam function atau procedure. Sellanjutnya adalah membuat module procedure agar semua method di dalamnya bisa dipanggil secara global.  Untuk membuat klik menu module procedure klikk menu Project kemudian pilih Add Module kemudian beri Nama “procedure”. Kemudian klik add.
    

    
47. Langkah selanjutnya adalah buat pocedure TampilBuku() yang 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. 
    

    
48. Langkah selanjutnya adalah buat procedure CariBuku()digunakan untuk menampilkan data buku berdasarkan variabel cari, yang menyimpan data pencarian. Dengan query untuk menampilkan semua data buku. Kemudian function GetResult pun dipanggil untuk mendapatkan datatable, yang mana datatable ini sebagai source dari DataGridView pada FormBuku.
    

    
49. Langkah selanjutnya membuat procedure TambahBuku() digunakan untuk menambahkan data buku baru. Parameter pada procedure ini adalah judul, isbn, idkat, penerbit dan penulis. Procedure yang dipanggil pada FormTambahBuku. Setelah dijalankan maka FormTambahBuku pun ditutup.
    

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

    
51. Langkah selanjutnya membuat procedure HapusBuku() digunakan untuk menghapus data buku. Parameter procedurenya adalah id_buku. Procedure ini nantinya dipanggil pada FormDetailBuku. Setelah dijalankan maka FormDetailBuku pun ditutup.
    

    
52. Langkah selanjutnya adalah membuat procedure TampilKategori() digunakan untuk menampilkan data kategori. Di dalamnya terdapat query yang berupa string untuk menampilkan semua data kategori. Kemudian function GetResult pun dipanggil untuk mendapatkan datatable, yang mana datatable ini sebagai source dari DataGridView pada FormKategori.
    

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

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

    
55. Selanjutnya adalah 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.
    

    
56. Selanjutnya membuat procedure HapusKategori() yang digunakan untuk menghapus data kategori. Parameter pada procedure ini adalah id_kategori. Procedure ini nantinya dipanggil pada FormDetailKategori. Setelah dijalankan maka FormDetailKategori pun ditutup.
    

    
57. Langkah selanjutnya adalah membuat kode program pada tampilan. Pada tampilan Form1 membuat, yaitu btnBuku dan btnKategori. Klik btnBuku maka FormBuku ditampilkan, Jika diklik btnKategori maka FormKategori ditampilkan. Untuk membuat button Buku klik dua kali button Buku. kemudian isi kode yang telah ditentukan.
    

    

    
    

    

    
    

    
58. Langkah selanjutnya adalah membuat kode program pada tampilan. Pada tampilan Form1 membuat, yaitu btnBuku dan btnKategori. Klik btnBuku maka FormBuku ditampilkan, Jika diklik btnKategori maka FormKategori ditampilkan. Untuk membuat button Buku klik dua kali button Buku. kemudian isi kode yang telah ditentukan
    
    
59. Langkah selanjutnya adakah mengisi kode di dalam button Kategori, klik button Kategori dua kali, kemudian isikan perintah FormKategori.ShowDialog().
    

    
60. Setelah selesai maka running dibawah merupakan hasil tampilan dari halaman buku dan halaman kategori.
    

    
61. Ini tampilan saat running pada halaman buku
    

    
62. Ini tampilan saat running pada halaman buku saat tambah buku.
    

    
63. Langkah selanjutnya adalah mengisikan kode procedure ke dalam form buku. kemudian isikan pemanggilan function TampilBuku() untuk menampilkan data buku di DG pada FormBuku.
    

    
64. Langkah selanjutnya adalah masukan kode program pada button Cari, klik button Cari. Saat mencari buku maka judul dalamm bentuk text. 
    

    
65. Langkah selanjutnya adalah mengisi perintah button Kembali dengan perintah Me.Close(), saat klik kembali menutup FormBuku itu sendiri yang akan kembali menampilkan Form1.
    

    
66. Langkah selanjutnya adalah mengisi kode button Tambah untuk membuka FormTambahBuku dengan memanggil procedure pada TampilBuku() agar ketika FormTambahBuku ditutup DG langsung terupdate. 
    

    
67. 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, kemudian nama methodnya “CellContentClick”, kita ganti menjadi “CellClick”. Cara menggantinya adalah dengan merubah nama method di bagian atas silahkan anda klik dan akan muncul pilihan unutk mengganti method yang akan digunakan.
    

    
68. Ini merupakan tampilan adalah code yang terdapat dalam form buku.
    

    
69. Pada DG id_ akan dimulai dengan indeks 0.
    

    
70. Langkah selanjutnya adalah mengisi kode program dalam form tambah buku dan mengisi perintah untuk membersihkan komponen-komponen TextBox dan pengisian ComboBox.
    

    
71. Ini merupakan tampilan pada form buku, saat mengisi kategori yang diinputkan adalah fiksi dan sejarah.
    

    
72. Langkah selanjutnya adalah mengisi kode button simpan yang isi data dari TextBox dan ComboBox disimpan ke dalam variabel-variabel. Kemudian akan panggil procedure TambahBuku() saat running.
    

    
73. Dibawah ini merupakan tampilan halaman yaitu saat mengisi atau menginputkan data buku. jika sudah benar maka klik simpan.
    

    
74. Ini merupakan tampilan halaman saat di running dalam bentuk tabel setelah di tambah buku.  id buku akan tampil sesuai dengan urutan data buku itu sendiri yang dimasukan.
    

    
75. Pada btnBatal diberikan perintah Me.Close() yang berarti keluar dari FormTambahBuku.
    
    
76. SourceCode lengkap di FormTambahBuku.
    
    
    
77. Langkah selanjutnya adalah Saat FormDetailBuku dirunning, semua komponen baik TextBox dan ComboBox akan disimpan dalam  DG_CellClick di FormBuku.
    

    
78. Ini merupakan tampilan halaman detail.
    

    
79. Langkah selanjutnya adalah mengisi kode pada button ubah.
    

    
80. Ini merupakan tampilan halaman buku.
    

    

    
81. Disini tampilan untuk merubah penulis yaitu Mabur Krom dan Asripani.
    

    
82.  Ini merupakan tampilan setelah diubah.
    

    
83. Langkah selanjutnya adalah memasukkan kode ke dalam button hapus jika menghapus buku urutan sesuai dengan id buku yang dipilih.
    

    
84. Ini merupakan tampilan halaman buku.yang belum di hapus. 
    

    
85. ini merupakan halaman detail yang digunakan untuk mengedit dan menghapus.
    

    
86. Ini tampilan halaman buku yang telah salah satu buku di hapus di detail buku.
87. Langkah selanjutnya adalah mengisi button buku kembali. Cukup mengisi dengan me. Apabila kita mengklik maka kembali ke form utama.
    

    
88. langkah selanjutnya adalah perintah perintah serta komponen-komponen    yang digunakan untuk saat menjalan form detail buku.
    

    

    
89. Langkah selanjutnya adalah mengisi procedure tampil kategori pada from kategori dengan perintah tampilkategory(). 
    

    
90. Ini merupakan tampilan halaman kategori dengan menampilkan id kategori dan kategori buku.
    

    
91. Langkah selanjutnya adalh memanggil procedure cari kategori pada formkategori dan saat menginputkan berupa bentuk mengetik kan kategori text.
    

    
92. Ini merupakan tampilan halaman kategori dengan mencari kategori buku yang kategorinya fiksi.
    

    
93. Langkah selanjutnya adalah mengisi kode pada button kembali.Cukup perintah me. Akan kembali form utama atau form yang sudah ditentukan.
    

    
94. Langkah selanjutnya adalah menambahkan kede pada button dengan perintah me. Apabila mengklik kembali, maka akan kembali form sebelumnya.
    

    
95. Langkah selanjutnya adalah mengisi kode dalam DG dengan dari formdetailkategoriDialog.
    

     
96. Ini merupakan tampilan form kategori dengan komponen-komponen yang diperlukan.
    

    

    
97. Langkah selanjutnya adalah kode di tambah kategori dengan kode txtKategori. 
    

    
98. Langkah selanjutnya adalah button simpan data yang di ambil dan simpen di dalam form kategori dan tambah barang. 
    

    
99. Tampilan halaman kategori. 
    

    
100. Halaman kategori saat mengisi data kategori buku.
     

     
101. Tampilan halaman kategori sudah mengisi dan disimpan.
     

     
102. Langkah selanjutnya adalah mengisi kode batton batal. Dengan perintah me. Apabila mengklik batal maka akan kembali ke form sebelumnya. 
     

     
103. Ini merupakan tampilan seluruh komponen yang terdapat di dalam form.
     

     
104. Langkah selanjutnya adalah mengisi kode yang dari form detail kategori.
     

     
105. Tampilan halaman kategori.
     

     
106. ini merupakan halaman detail buku.
     

     
107. Langkah selanjutnya mengisi inputan pada button ubah, yang ada di dalam kategori sesuai id kategori yang ditentukan. 
     

     
108. Tampilan halaman kategori.
     

     
109. Ini halaman detail, mengisi menambah kategori dalam buku.Ini halaman detail, mengisi menambah kategori dalam buku. 
     

     
110. Ini tampilan halaman kategori yang sudah ditambahkan.
     

     
111. Selanjutnya adalah kode dalam button hapus yang di hapus dengan id kategori. Ini tampilan sebelum dihapus.
     

     
112. Ini tampilan sebelum dihapus. 
     

     
113. Ini tampuilan di halaman detail kategori memasak dalam tabel. 
     

     
114. Tampilan setelah salah satu kategori di hapus. 
     

     
115. Langkah selanjutnya adalah memasukkan kode ke dalam button hapus jika menghapus buku urutan sesuai dengan id buku yang dipilh. 
     

     
116. Merupakan tampilan codingan lengkap di dalam form detail kategori.