Tutorial Cara Membuat Crud + Fitur Pencarian VB.NET & MYSQL - Tutorial Programming & Digital Marketing

STAY HUNGRY STAY FOOLISH

Breaking

Home Top Ad

Friday, August 20, 2021

Tutorial Cara Membuat Crud + Fitur Pencarian VB.NET & MYSQL

bewoksatukosong.com | Hallo semuanya balik lagi dengan om bewok, kali ini om bewok mau share ke kalian cara membuat crud dan fitur pencarian vb.net dengan menggunakan database mysql dan juga validasinya. Maksudnya validasinya gimana tuh om ? iya seperti aplikasi - aplikasi pada umumnya, kalau ada form yang belum di isi, ia akan muncul alert bertuliskan "data anda belum di isi". Jadi formnya harus di isi semua baru bisa tersimpan. Sebelum kita lanjut ke tutorialnya, kalau kalian mau lihat daftar list belajar vb net bisa lihat dibawah ini ya dan kalau kamu mau download source codenya bisa lihat di paling akhir pada tutorial ini ya. Yuk langsung saja kita mulai.

Sebelum kita membuat crud & fitur pencarian vb.net & MYSQL , ada beberapa aplikasi yang harus kita install
1. Download Visual studio (Pilih yang community karena FREE)
https://visualstudio.microsoft.com/downloads/
2. Download ODBC MYSQL ini semacam konektor antara mysql dan vb.net
https://dev.mysql.com/downloads/connector/odbc/
Kalian pilih 32 bit atau 64 bit tergantung dari laptop kalian masing - masingya
3. XAMPP (untuk membuat database di MYSQL)
https://www.apachefriends.org/download.html

Setelah semua sudah kita install yuk kita aktifin XAMPP terlebih dahulu, Kita tinggal buka aplikasi XAMPP lalu klik Start pada bagian Apache dan MYSQL.
Selanjutnya buka browser kalian (bebas mau menggunakan chrome atau firefox) lalu ketikan localhost/phpmyadmin
Lalu kalian buat databasenya terlebih dahulu dengan klik new
Lalu kita berikan nama databasenya kampus.

Lalu kita buat tablenya denga nama mahasiswa
Kita masukan field tablenya sepert dibawah ini
Maka hasilnya akan seperti dibawah ini.
2. Cara Setting ODBC
Untuk menghubungkan VB.NET dan MYSQL kita butuh connector yang sudah kita install, kalian bisa download disini, setelah itu kalian install.

Selanjutnya kita akan setting ODBC nya, caranya adalah
1. Kamu klik Start
2. Lalu kamu pilih ODBC data sources (kalau laptop kamu 64 bit kamu pilih odbc 64 bit tapi kalau laptop kamu 32 bit kamu pilih yang odbc 32 bit).
Setelah kamu sudah masuk ke aplikasi ODBC Data Source Administratornya
Kamu pilih Add 
Lalu cari MySQL ODBC 8.0 ANSI Driver (Saat om bewok membuat tutorialnya ini, ODBC nya sedang di versi 8, kalian bebas menggunakan yang ANSI Driver atau Unicode Driver tapi biar sama dengan om bewok gunain MySQL ODBC 8.0 ANSI Driver saja ya).
Lalu kalian isi formnya seperti dibawah ini ya
1. Data Source Name : kampusbaru
2. User : root
3. Password ga perlu di isi, biasanya XAMPP pada settingan default tidak ada password
4. Database : kampus (nama database kalian di phpmyadmin)
5. Selanjutnya klik Test. Jika menampilkan tulisan "Database success or Connected" artinya kita berhasil Setting ODBC dan terakhir kita klik OK. 
Tampilannya seperti dibawah ini ya.
3. Design Form Membuat Crud & FItur Pencarian VB.NET & MYSQL
Sekarang saatnya kamu membuat visual studio, disini om bewok menggunakan visual studio 2019 Community, ga perlu khawatir teman - teman bisa menggunakan visual studio apapun, kalau kamu belum menginstall dan belum tau caranya, kalian bisa melihat tutorialnya dibawah ini.
Tutorial cara install visual studio *link

Oke langsung saja kita mulai 
1. Kita klik New Project
2. Lalu kita pilih Windows Forms App (.NET FRAMEWORK) inget yaa yang ada .NET FRAMEWORK jangan yang .NET doang, kalau bingung lihat gambar dibawah ini ya.
Selanjutnya pilih NEXT, lalu kita kasih nama BelajarCrud lalu pilih Create.

3. DESIGN FORMS CRUD & Fitur Pencarian VB.NET

Sebelum kita coding, kita perlu design formsnya terlebih dahulu, cukup mudah caranya karena tinggal drag & drop aja.
Kita buat seperti dibawah ini ya.
Kita bikin Text-nya terlebih dahulu dengan klik Label (Klik label-nya lalu Tahan dan langsung kita Drop ke bagian Forms). Kita bikin 4 label ya
Kita ubah text pada keempat label tersebut, caranya adalah kita klik 1x labelnya lalu kita pergi ke menu properties, lalu cari pada menu text, kita ganti menjadi NIM. Selanjutnya kita ganti label - label yang lainnya ya. Label 2 menjadi Nama, Label 3 menjadi Alamat dan Label 4 menjadi Jurusan
Label 1 Textnya NIM
Label 2 Textnya Nama
Label 3 Textnya Alamat
Label 4 Textnya Jurusan
Untuk mengisi formsnya kita pilih TextBox (Klik TextBox lalu tahan dan drop pada bagian Forms tersebut). Kita buat 4 TextBox jadi seperti dibawah ini.
Selanjutnya kita membuat Button, yang kita perlukan ada 4 button. Kita pilih Button lalu seperti biasanya kita klik button lalu tahan dan drop pada forms
Kita buat 4 button lalu textnya kita ganti dengan cara kita klik button 1x lalu cari text pada menu properties pada bagian kanan bawah, lalu kalian ganti (kalian bisa melihat caranya dibawah ini)
Kalian ganti semua nama buttonnya ya
Button1 Textnya Simpan
Button2 Textnya Edit
Button3 Textnya Hapus
Button4 Textnya Tutup

Terakhir kita buat Data Grid View fungsinya data yang ada di MYSQL akan kita tampilkan pada Data Grid View. 
Kita klik Data Grid View lalu drop pada bagian Forms (contoh designya bisa lihat gambar dibawah ini).


Pilih Data Grid View lalu kita taruh pada bagian forms

Kita taruh dibagian bawah button, kalian bisa atur sendiri, senyaman kalian.
NOTE : 
Cara kamu mengetahui Textbox1 atau Textbox2 dan lain - lain, kamu bisa klik Textbox 1X, lalu lihat pada bagian menu properties, lalu kamu bisa melihat di menu Design (name). Kamu bisa lihat gambar dibawah ini.

Jadi properties kita ada TextBox1, TextBox2, TextBox3, TextBox4, Button1, Button2, Button3, Button4, DataGridView1. Kalau bisa disamain ya urutannya sama punya om bewok, biar lebih mudah. Kamu bisa lihat dibawah ini ya.
Properties name TextBox1, TexBox2, TextBox3, TextBox4
Properties Namenya Button1, Button2, Button3 dan Button4
Properties namenya DataGridView1
Selanjutnya kamu klik kanan pada Form1.vb

Selanjutnya kita pilih View Code.
Kita membuat koneksinya terlebih dahulu, kodingannya seperti dibawah ini.
4. CARA MENAMPILKAN DATA MYSQL
Kita akan menampilkan data MYSQL ke formsnya terlebih dahulu, kita ketikan seperti dibawah ini.

JANGAN DI JALANKAN DULU, KARENA PASTI GAGAL HAHA.
Kenapa ? karena kita belum memanggil ke FORM UTAMANYA. Jadi bisa dibilang ini adalah jantung dari aplikasi kita.

Cara memanggilnya adalah kamu menuju design vb.net. lalu klik 2x pada form tersebut. BINGUNG KAN ? Tenang om bewok udah kasih tutorial gambarnya dibawah yaa.
KLIK 2X Pada Menubar diatas
Pasti setelah kamu klik 2x, ia akan menuju pada bagian code dan ada tulisannya seperti dibawah ini 
    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
         ' MASUKIN DISINI
    End Sub
Nah maka kamu isi Call KondisiAwal(), jadi kita memanggil yang sudah kita tulis, biar kamu lebih memahami kodingannya, kamu bisa baca komentar - komentar nya diatas codenya, om bewok mencoba mempermudah atau mengartikan kodingannya seperti bahasa manusia 😆.
Maka kalau full codenya untuk sub koneksi dan sub tampil seperti dibawah ini ya.
Lalu kita jalankan klik Start
Klik Start
Jika sudah berhasil maka akan muncul tanpa error tapi belum ada datanya ya, karena kita belum memasukan data - datanya, kalau kalian sudah seperti dibawah ini berarti kalian berhasil buat menampilkan data mysql ke vb.net.
5. Cara Membuat Simpan di VB.NET & MYSQL
Pertama kita buat yang namanya Sub FieldAktif() dulu ya, fungsinya adalah untuk mengaktifkan semua TextBox. nanti alurnya om bewok ketikan diatas kodenya ya biar kamu lebih ngerti.
Oke saatnya kita membuat fitur Simpan 
Klik 2x pada Button Simpan
Klik Button Simpan 2X
Lalu ia akan menuju pada bagian form code, dan kamu ketikan seperti dibawah ini ya
Maka hasilnya seperti dibawah ini.
Jadi Full code nya untuk saat ini seperti dibawah ini ya
6. Cara Membuat Edit di VB.NET & MYSQL
Selanjutnya untuk cara edit di vb.net & mysql. Pertama om bewok kasih tau dulu nih cara kerjanya.
Pertama kita masukin NIM nya, setelah itu klik ENTER. Nah maka field nama, alamat dan jurusan akan langsung otomatis terisi, jadi kamu hanya mengisi NIM nya saja langsung tekan ENTER.

Jadi hal yang kita lakuin adalah bagaimana cara kita mengambil semua data, ketika kita hanya memasukan NIM dan tekan ENTER.
Langsung saja kita mulai
Kalian klik 2x pada TextBox1
Klik TextBox1 2x
Lalu kalian akan menuju pada bagian code, nah pada bagian kanan kalian ganti menjadi KeyPress.
Klik pada bagian TextChanged ubah menjadi KeyPress

Ganti menjadi KeyPress
Setelah itu ia akan membuat sub baru, jadi sub yang Sub TextBox1_TextChanged kita hapus aja ya.
Ga dihapus juga gapapa sih, tapi biar lebih clean aja sih hehe
Nah selanjutnya kita masukan kodingannya seperti dibawah ini ya.
Kodingan untuk Edit di VB.NET & MYSQL
Setelah itu kita akan langsung membuat proses edit. Kamu Klik 2x pada button Edit
Klik Button Edit 2X
Nah kodingannya seperti dibawah ini ya.
Full Codenya dibawah sini ya, kalau kamu masih bingung.
Setelah itu kamu bisa jalankan. 
Prosesnya adalah kamu klik Edit, lalu field akan terbuka semua, kamu hanya perlu memasukan NIM yang mau di edit, lalu tekan ENTER. selanjutnya field akan terisi. Kamu bisa mengubah semuanya lalu kalau sudah selesai kamu tekan Button Update

7. Cara Membuat Delete di VB.NET & MYSQL
Untuk delete di vb.net & mysql. caranya mirip banget sama proses edit. Saat kita jalankan programnya, kamu hanya perlu klik button Hapus, lalu kamu tinggal masukan nim kamu dan klik ENTER, field nama, alamat dan jurusan akan langsung terisi semua, lalu kamu bisa klik button DELETE. Langsung saja kita mulai
Pertama kamu klik 2x pada button Hapus
Lalu ia akan pindah ke form coding, kamu bisa masukan codingannya seperti dibawah ini ya.
Full Kodinganya seperti dibawah ini ya
8. Terakhir membuat proses Tutup / Close pada VB.NET & MYSQL
Jadi button ini kita buat 2 kondisi, Jika button4 nya textnya TUTUP maka saat kita klik dia akan mengakhiri program tersebut atau close, namun jika tulisannya BATAL maka dia akan kembali seperti Sub KondisiAwal().

Oke langsung saja kita mulai ya, kita klik button Tutup 2X, maka ia akan pindah ke form code.
KLIK BUTTON 2X
Selanjutnya tambahkan seperti dibawah ini ya
Maka seluruh kodingannya seperti dibawah ini ya.

Cara Membuat Fitur Search VB.NET & MYSQL


Pertama kita tambahkan 1 Label Dan 1 TextBox

Kita klik 1X pada TextBox yang sudah kita buat, lalu kita lihat pada properties namenya. Nah punya om bewok adalah TextBox5, tiap Textbox beda - beda ya, kamu juga bisa ganti kok sebenarnya, tapi untuk saat ini properties name om bewok TextBox5, kamu bisa lihat gambarnya dibawah ya.
Oke selanjutnya kita klik 2X pada Textbox yang sudah kamu buat.
Selanjutnya kamu ketikan seperti dibawah ini yaa
Maka ketika dijalankan kamu hanya perlu mengetikan NIM nya maka ia akan mencari otomatis. 
Full kodenya seperti dibawah ini ya.
Kalau kalian masih bingung, kalian bisa download source codenya dibawah ini yaa
 
Nah untuk tutorial selanjutnya kamu bisa lihat daftar lengkapnya belajar VB.NET dibawah ini ya
Daftar Lengkap Tutorial VB.NET
Untuk bertanya - tanya kamu bisa ke grup telegram bewoksatukosong VB.NET
https://t.me/vb_net_id
Untuk Mengetahui Artikel Terbaru dari om bewok, kamu bisa masuk ke channel telegram bewoksatukosong
https://t.me/bewoksatukosongtekno

No comments:

Post a Comment