Pemrograman Visual Basic .NET - Login System
Pemrograman Visual Basic .NET - Login System
1
Rudy Yanto, S.Kom., M.M., MTCNA
PEMROGRAMAN VISUAL BASIC. NET
MEMBUAT HALAMAN MASUK
Tulisan ini memberikan gambaran umum tentang salah satu Teknik menggunakan Visual Basic
.NET 2022 dengan database MYSQL.
1. MENYIAPKAN DATABASE
Seperti yang kita ketahui bahwa Database ini merupakan sebuah pangkalan data yang mana
semua data tersusun secara terstruktur dan tersistematis. Untuk menyiapkan database
biasanya kita memerlukan aplikasi layanan tambahan seperti XAMPP, MYSQL. Untuk
pembelajaran kali ini kita akan menggunakan MYSQL dengan Manajemen Databasenya
menggunakan phpmyadmin.
1.1. MEMBUAT DATABASE DAN TABEL
Setelah membuka XAMPP, Jalankan Layanan Apache Sebagai Web Service, MYSQL
Sebagai Database.
Apabila Layanan yang dijalankan sudah berfungsi. Maka warna pada latar belakang
nama layanan akan berwarna hijau seperti dibawah ini.
2
Rudy Yanto, S.Kom., M.M., MTCNA
Apabila layanan sudah berjalan dengan tanda warna latar belakang pada nama
layanan berwarna hijau. Maka bukalah web browser untuk mengakses DBMS dengan
layanan Phpmyadmin seperti dibawah ini.
Gambar yang ada pada diatas ini merupakan layanan DBMS (Database Manajemen
System) dimana layanan ini membantu kita untuk mengkelola database kita tanpa
menggunakan perintah command line. Bisa dikatakan ini adalah pengelolaan
database bersifat GUI (Grapical User Interface).
Sesuai dengan judul pada catatan ini. Kita akan membuat aplikasi masuk dengan
menggunakan Bahasa pemrograman visual basic dengan menggunakan .NET
Framework. Untuk membuat fitur masuk. Tentunya kita perlu mempersiapkan
database dan tabel untuk menampung data pengguna yang akan masuk. Syarat untuk
membuat fitur masuk paling tidak kita membutuhkan akunpengguna dan katasandi.
Mari kita buat database dengan nama database nama_lengkap masing-masing dan
nama tabel adalah data_pengguna. Berikut caranya :
Untuk membuat database. Perhatikan gambar diatas. Pilih new dengan kursor anda.
3
Rudy Yanto, S.Kom., M.M., MTCNA
Lalu isi nama database dengan nama lengkap anda serperti yang ada pada gambar
diatas. Untuk penulisan nama database, nama tabel, nama field mohon untuk tidak
menggunakan karakter symbol selain tanda – (setrip tengah) atau _ (underscore).
Upayakan untuk tidak menggunakan huruf besar kecil agar tidak membingungkan
dan tidak menggunakan tanda spasi. Tanda spasi sigantikan dengan menggunakan
tanda setrip tengah ataupun underscore. Apabila sudah tekan create. Maka hasilnya
akan seperti dibawah ini.
Setelah muncul tampilan seperti gambar diatas. Maka kita akan membuat tabel. Untuk
nama tabel nya kita buat data_pengguna seperti gambar pada diatas. Dengan jumlah
kolom adalah 2 kolom. 2 kolom yang dimaksud ini adalah untuk membuat kolom pada
data akunpengguna dan katasandi. Apabila sudah mengisikan nama tabel. Pilih
tombol create.
Perhatikan gambar diatas!. Setelah kita melakukan create table maka akan muncul
tampilan berikut. Maka isilah kolom dengan akunpengguna, katasandi seperti yang
4
Rudy Yanto, S.Kom., M.M., MTCNA
dilingkari pada diatas. Untuk tipe penggunaan kolomnya kita gunakan VARCHAR.
Yang mana biasanya VARCHAR ini kita gunakan untuk mengisi data dengan tipe data
yang bersifat TEXT atau campuran antara TEXT,ANGKA,SIMBOL. Kemudian untuk
length Values kita isi saja 20. Yang artinya 1 baris data hanya dapat menampung
sebanyak 20 karakter. Baik itu hanya text ataupun campuran antara
text,angka,symbol. Kemudian untuk index pada akunpengguna kita atur menjadi
PRIMARY KEY. Tujuannya agar mengunci kolom tersebut sebagai kolom unix yang
mana tidak boleh ada yang sama diantara baris data yang disimpan. Kalua sudah
scroll hingga bagian paling bawah dan tekan save. Maka kita sudah berhasil membuat
database beserta tabel.
Isilah data yang akan dimasukkan berdasarkan nama kolom seperti gambar dibawah
ini. Apabila sudah. Tekan tombol Go untuk menyimpan.
5
Rudy Yanto, S.Kom., M.M., MTCNA
Apabila muncul hasil seperti ini setelah menekan tombol Go. Maka anda berhasil
menambahkan data kedalam tabel yang anda buat sebelumnya.
Untuk melihat data pada tabel anda. Pilih nama database anda lalu pilih nama tabel
yang datanya ingin anda lihat. Seperti gambar dibawah ini.
Anda berhasil membuat database. Tabel dan menginsert record kedalam database
yang anda buat.
6
Rudy Yanto, S.Kom., M.M., MTCNA
1.3. MEMBUAT HAK AKSES DATABASE
Agar aplikasi yang nanti kita buat dapat terhubung dengan database. Kita perlu
menyiapkan akun pada database yang kita buat. Tujuannya akun ini agar dapat
mengakses database kita berdasarkan privilege yang nantinya akan kita atur pada
saat pembuatan akun tesebut.
Lalu pilih add user account seperti lingkaran yang dibuat pada gambar diatas.
7
Rudy Yanto, S.Kom., M.M., MTCNA
Isilah username dan password. Lalu jangan lupa isi juga bagian re-type password.
Pada bagian host name tersebut diisi dengan symbol “%” symbol ini artinya bahwa
akun ini dapat mengakses melalui jaringan komputer manapun. Apabila sudah
serperti diatas. Kita scrool kebawah untuk mengatur privilege akun.
Untuk privilege akun. Kita centang saja untuk semua hak. Seperti gambar diatas ini.
Apabila sudah mencentang semuanya. Tekan Go pada bagian bawah. Dan apabila
berhasil maka hasilnya akan persis seperti gambar diatas. Setelah melalui 3 langkah
diatas. Maka kita sudah siap untuk memulai mendesain aplikasi masuk kita dengan
menggunakan IDE Visual Studio 2022.
8
Rudy Yanto, S.Kom., M.M., MTCNA
2. MEMBUAT APLIKASI MASUK
2.1. MEMBUAT PROJECT APLIKASI
Untuk membuat aplikasi desktop dengan Visual Studio .NET, maka bukalah aplikasi
Visual Studio 2022 seperti logo aplikasi dibawah ini.
Kemudian kita buat project dengan menekan pilihan Create A New Project.
Setelah masuk kedalam menu buat project. Pilih Bahasa pemrograman Visual Basic,
Platform Windows dan Tipe Project Desktop. Lalu pilih Windows Forms App (.NET
Framework) seperti lingkaran nomor 4 pada gambar dibawah. Lalu tekan next.
9
Rudy Yanto, S.Kom., M.M., MTCNA
Pada menu configure your new project. Isilah nama project dan lokasi dimana aplikasi
ini ingin kamu simpan. Lalu centang pada bagian Place solution and project in the
same directory. Dan pilih framework pada versi default yang sudah terpilih secara
otomatis saja. Lalu pilih create. Maka project selesai dibuat.
Berikut adalah tampilan project pertama kali setelah kita selesai membuatnya.
10
Rudy Yanto, S.Kom., M.M., MTCNA
2.2. MENGUBAH NAMA FORM/HALAMAN
Untuk membuat desain masuk. Kita perlu menetapkan setiap nama pada form kita.
Misalnya untuk halaman utama masuk. Kita rubah Namanya dari form1 menjadi
h_masuk. Tujuannya agar saat form/halaman kita sudah banyak. Kita tidak bingung
untuk apa fungsi pada setiap form. Mari kita coba ganti nama form1 menjadi h_masuk.
Klik kanan pada form1. Lalu klik rename untuk merubah nama form. Untuk
mengubah nama form. Kita tidak boleh menggunakan tanda “.” (Titik) karena
tanda titik itu untuk menyatakan extensi file pada form kita. Apabila kita buat
tanda titik pada nama form. Biasanya project tidak dapat mendeteksi form
yang kita buat Namanya. Sehingga form tidak sesuai dengan nama yang ada
terdaftar pada project kita.
Saat kita sudah merubah nama formnya seperti yang digaris bawah pada
gambar diatas. Maka akan muncul pesan seperti diatas. Lalu kita pilih yes saja.
Setelah nama form diubah. Kita perlu mengatur ulang untuk halaman yang
akan pertama kali ditampilkan saat aplikasi dijalankan. Melalui menu project
properties.
11
Rudy Yanto, S.Kom., M.M., MTCNA
Setelah memilih project -> project properties. Maka akan muncul tampilan
seperti diatas. Lalu pada lingkaran nomor 2. Pilih ulang nama form yang telah
kita rubah Namanya. Contohnya pada skrip ini. Kita mengubah form1 menjadi
h_masuk. Maka kita pilih yang h_masuk. Apabila sudah diubah pilihan startup
form pada lingkaran nomor 2. Maka anda sudah dapat menutup tampilan
project properties ini dengan menekan tanda X pada lingkaran nomor 3.
12
Rudy Yanto, S.Kom., M.M., MTCNA
2.3. MEMBUAT DESAIN MASUK
Buka halaman yang akan dibuat sebagai halaman masuk. Lalu buatlah seperti gambar
yang ada pada dibawah ini.
13
Rudy Yanto, S.Kom., M.M., MTCNA
Untuk membuat halaman utama. Kita perlu membuat form baru. Dengan cara klik
kanan pada nama project kita. Lalu add -> pilih form (Windows Forms) seperti
gambar yang dilingkari diatas.
Setelah menekan add -> form (Windows Forms) maka akan muncul tampilan seperti
gambar diatas. Make sure pada point 1 yang dilingkari diatas berada pada form
(Windows Forms) dan pada point ke 2. Ubah nama form menjadi h_utama dan
pastikan ekstensi file tidak terhapus. Ekstensi file yang dimaksud adalah .vb. lalu pilih
add. Maka form berhasil ditambahkan dengan nama h_utama.
14
Rudy Yanto, S.Kom., M.M., MTCNA
2.5. MEMBUAT CLASS KONEKSI DATABASE
Agar dapat terhubung dengan database yang kita buat. Kita perlu melakukan
koneksi pada database kita. Nah untuk dapat koneksi ke database kita, ada beberapa
cara. Cara pertama yaitu skrip mengkoneksikan ke database kita letak disetiap
form/halaman yang kita buat. Namun cara seperti ini akan merepotkan apabila kita
sudah membuat aplikasi dalam skala besar. Karna setiap form kita perlu
menyebutkan skrip agar terkoneksi dengan database.
Kemudian untuk cara kedua kita dapat menggunakan metode dengan skrip
diletak di halaman module. Module ini dapat dikatakan sebuah halaman yang seolah-
olah menyatu dengan from kita. Apabila dianalogikan dengan kertas. Module itu
seperti kertas kedua yang mana melanjutkan isi halaman pertama namun secara
kasat mata sebenarnya terpisah menjadi dua lembar. Secara fungsi dalam proses
pembuatan koneksi ini cukup memudahkan. Kita hanya perlu memanggil fungsi
apapun yang kita buat didalam module. Dan module ini biasanya disebut sebagai
special class yang mana kita buat berdasarkan keperluan dan logic yang kita inginkan.
Namun untuk Latihan pada kali ini kita akan menggunakan metode class.
Hamper sama dengan module. Kita hanya perlu memanggil class diawal form kita saja
untuk menggunakan fungsi didalam class. Setelah dipanggil diawal form maka kita
bisa dengan bebas dan leluasa untuk menggunakannya pada listing kode kita. Berikut
adalah cara menambahkan class pada project visual basic .NET
15
Rudy Yanto, S.Kom., M.M., MTCNA
Sebenarnya untuk menambahkan class ini sama seperti car akita menambahkan
form/halaman. Yaitu dengan cara klik kanan pada project name -> add -> class.
Seperti gambar yang ada pada diatas.
Setelah menekan klik kanan project -> add -> class maka tampilan seperti gambar
diataslah yang akan muncul. Sama seperti cara menambahkan forms/halaman.
Pastikan jenis form yang mau kita tambahkan sudah tepat. Yaitu pada class seperti
point pertama. Lalu ubah nama classnya menjadi koneksidb lalu tekan add seperti
point nomor 3.
16
Rudy Yanto, S.Kom., M.M., MTCNA
Berikut adalah hasilnya apabila sudah ditambahkan. Dan jumlah file pada solution
explorer juga akan bertambah seperti yang ada pada lingkaran gambar diatas.
Untuk menginstall referensi mysql. Pilih menu Project -> Manage NuGet Packages
seperti gambar yang disediakan diatas.
17
Rudy Yanto, S.Kom., M.M., MTCNA
Gambar diatas merupakan tampilan Ketika anda mengakses menu Project ->
Manage NuGet Packages. Biasanya menu ini digunakan untuk menambahkan file
library yang kita butuhkan. Misalnya yang akan kita install secara online saat ini
adalah MySql.Data.MySqlClient. ikutilah Langkah diatas. Setelah muncul
tampilan Manage NuGet Packages. Pilihlah browse seperti gambar diatas point 1.
Setelah itu isilah pada kolom pencarian library dengan kata kunci
MySql.Data.MySqlClient seperti pada gambar diatas point kedua. Lalu setelah
hasil pencarian muncul. Pilih Mysql.Data seperti point nomor . nah sebelum
menginstall pastikan versi Mysql.Data berada pada posisi versi stable. Lalu tekan
install dan tunggu prosesnya.
18
Rudy Yanto, S.Kom., M.M., MTCNA
prosesnya hingga ada muncul konfirmasi agreement untuk menggunakan library
tersebut.
Apabila prosesnya selesai. Akan tampak seperti gambar diatas. Pada bagian
output akan ada text tertulis finished. Maka proses instalasi Mysql.Data sudah
selesai. Nanti untuk penggunaan library tersebut harus dituliskan seperti
dibawah ini pada global declaration
Imports MySql.Data.MySqlClient
19
Rudy Yanto, S.Kom., M.M., MTCNA
3. MEMBUAT SKRIP KONEKSI DATABASE
Sebelumnya kita sudah buat class koneksidb pada project kita serta kita sudah install library
MySql.Data.MySqlClient pada project kita. Sekarang kita akan membuat skrip untuk
menghubungkan ke database.
Gambar diatas yang ditandai dengan garis merah adalah skrip untuk dapat terhubung dengan
database.
✓ Pada bagian paling atas disebut dengan reference. Dimana kita perlu menambahkan
reference library yang ingin kita gunakan. Karna kita menggunakan library mysql. Maka
kita tambahkan seperti gambar diatas pada baris kode pertama. Silahkan dituliskan di
class anda.
✓ Lalu pada baris ketiga. Adalah global deklarasi variable. Yang mana kita perlu
mendeklarasikan variable koneksi sebagai koneksi mysql kita. Dan dalam deklarasi
tersebut kita akan cantumkan dimana lokasi server database kita digunakan. Apabila kita
perhatikan diatas ada beberapa hal yang perlu dilengkapi yang ditandai dengan “…”
Server=localhost/ipaddress computer database kita
User id=user yang kita buat saat membuat database
Password=password yang kita buat saat menambahkan user database
Database=namadatabase yang kita buat
✓ Pada gambar diatas terdapat fungsi open. Fungsi open ini akan kita panggil apabila kita
ingin membuka koneksi ke database untuk melakukan perubahan atau pengaksesan data.
Begitu juga sebaliknya pada fungsi close.
20
Rudy Yanto, S.Kom., M.M., MTCNA
4. MEMBUAT SKRIP MASUK
Perhatikan gambar diatas. Pada baris pertama. Sama seperti pada class koneksidb. Kita perlu
menambahkan referensi mysql.
Pada baris ke 3 sampai dengan 5. Digunakan sebagai deklarasi pada fungsi mysql kesebuah
variable baru. Seperti yang kita ketahui Bersama bahwa sebuah variable itu kita gunakan
untuk menampung sebuah nilai. Pada baris. Coba perhatikan pada baris ke 4. Itu adalah
pendeklarasian bahwa koneksi database kita. Kita ambil dari class koneksidb yang kita buat
sebelumnya. Nanti saat sudah sering menggunakan kode ini kamu akan mengerti masing-
masing fungsinya
Skrip pada button pertama. Digunakan untuk button masuk. Telah ditandai dengan garis biru.
Garis biru pertama = nama tabel
Garis biru kedua = nama field / kolom tabel
Garis biru ketiga = nama field / kolom tabel
Pada h_masuk_load. Itu adalah sebuah prosedur yang mana wajib berjalan secara otomatis
Ketika aplikasi kita dijalankan. Nah didalam prosedur tersebut ditambahkan 1 baris perintah.
Tepatnya pada baris ke 28 Yang tujuan perintahnya untuk menyembunyikan text password
menjadi tanda *** saat diketik. Agar password tidak dapat dilihat oleh orang sekitar saat
diketik.
21
Rudy Yanto, S.Kom., M.M., MTCNA
Perhatikan gambar diatas. Pada area yang ditandai garis berwarna merah. Berikut
merupakan fungsi untuk menampilkan karakter password atau tidak pada komponen
checkbox yang kita buat pada tampilan halaman masuk.
Gambar berikut merupakan hasil yang sudah kita buat. Perhatikan! Apabila checkbox show
password ditampilkan maka password akan Nampak. Namun apabila centangnya dilepas.
Maka password akan berubah menjadi ***** dan apabila password salah maka akan muncul
pesan kotak warning dengan pesan seperti pada gambar diatas.
22
Rudy Yanto, S.Kom., M.M., MTCNA
Apabila berhasil melalui proses autentikasi akun username dan password maka akan
otomatis tampilan berpindah kepada halaman utama. Dan project ini dapat dilanjutkan lagi
hingga menjadi aplikasi yang sempurna.
23
Rudy Yanto, S.Kom., M.M., MTCNA
PENGETAHUAN DASAR
5. ADO.NET
5.1. MENGENAL ADO.NET
Pada pemrograman sebelum .NET (VB6), pengembang menggunakan teknologi akses
data seperti ODBC, OLEDB, dan ActiveX Objek Data (ADO). Untuk pemrograman VB.NET,
Microsoft membuat teknologi baru menciptakan cara baru untuk bekerja dengan database, yang
disebut ADO.NET. dan ADO.NET bukan kelanjutan ADO teknologi sebelum NET.
ADO.NET adalah sekumpulan Class yang menyediakan layanan akses data untuk
programer .NET, menyediakan seperangkat komponen untuk membuat aplikasi data yang
didistribusikan.
ADO.NET adalah bagian integral dari .NET Framework yang menyediakan akses ke database
.Class ADO.NET ada di namespace System.Data.dll. Didalam ADO.NET tersedia berbagai data
provider spt OLEDB, ODBC dan data provider khusus untuk database tertentu spt untuk SQL
server dan oracle. Selain untuk database juga tersedia data provider untuk XML.
XML digunakan untuk pertukaran data antar system yg berbeda contoh sebuah system
di linux dgn aplikasi java dan mysql akan bertukar data dgn system lain yg mengunakan os
windows dgn aplikasi VB.NET dan MsAccess . Cara mudah pertukaran data antara dua system
tsb adalah data yg dipertukarkan mempunyai format yang sama yaitu dlm bentuk XML. Pada
artikel ini sy tdk membahas tentang XML.
24
Rudy Yanto, S.Kom., M.M., MTCNA
Gambar 1 : Arsitektur ADO.NET
25
Rudy Yanto, S.Kom., M.M., MTCNA
Object2 Dataprovider digunakan untuk menghubungkan aplikasi dengan database,
mengeksekusi perintah dan mengambil data, menyimpannya dalam dataset, membaca data yang
diambil dan memperbarui database. object data provider yang akan kita bahas adalah bagian yg
seperti tampak berikut ini :
Melalui gambar arsitektur diatas saya ingin memperjelas perbedaan cara mengakses database
dengan conected (client dan server database tergubung terus selama manipulasi data) dengan
data reader. dan disconected , pemilihan kedua cara tersebut tergantung kebutuhan aplikasi yg
kita buat. misalnya untuk mengisi datagridview maka kita gunakan data adapter dan data set
sedangkan jika kita ingin mengambil satu baris atau beberapa baris data maka kita gunakan data
reader.
Berikut penjelasan singkat bagian/object yang ada di ADO.NET :
5.3.1. Connection
Komponen ini digunakan untuk mengatur koneksi dengan sebuah data source..
5.3.2. Command
command adalah pernyataan SQL atau prosedur yang tersimpan digunakan untuk
mengambil, insert, delete atau update data dalam sebuah data source. Method yang
sering dipakai antara lain
1. ExcuteNonQuery : tidak menhasilkan output data (delete,insert,update)
2. ExcuteScalar : menghasilkan 1 data scalar (select count(*) )
3. ExcuteReader : menghasilkan output 0 baris atau lebih (select )
5.3.3. DataReader
Datareader digunakan untuk mengambil data dari database dalam mode read-only
dan mode forward.
5.3.4. DataSet
DataSet adalah representasi data di memori . dataset terputus dari database, ia
26
Rudy Yanto, S.Kom., M.M., MTCNA
menyimpan cached sejumlah record yang diambil dari database. Ketika sambungan
dibuat dengan database, data adapter membuat dataset dan menyimpan data di
dalamnya. Setelah data diambil dan disimpan dalam dataset, koneksi dengan
database ditutup. Hal ini yg disebut sebagai ‘arsitektur terputus/disconected’.
dataset bekerja sebagai database virtual yg berada di memori yang berisi tabel.
5.3.5. DataAdapter
DataAdapter merupakan bagian integral dari kerja ADO.Net karena data ditransfer ke
dan dari database melalui data adafter. Data adafter mengambil data dari database
dan menyimpanya ke dalam dataset selain itu data adafter juga mengupdate database.
Ketika perubahan terjadi di dataset, perubahan juga terjadi di dalam database
yg dilakukan oleh data adapter. berikut pilihan untuk membuat object dataadapter
27
Rudy Yanto, S.Kom., M.M., MTCNA
6. JENIS DATA PROVIDER
Setiap data provider mempunyai namespace masing-masing yang mana terdapat pada
NET Framework. Beberapa diantara lain sebagai berikut :
1. data provider untuk SQL Server namespacenya : System.Data.SqlClient
2. data provider untuk Oracle namespacenya : System.Data.OracleClient
3. data provider untuk ODBC namespacenya : System.Data.Odbc
4. data provider untuk OLEDB namespacenya : System.Data.OleDb
28
Rudy Yanto, S.Kom., M.M., MTCNA
3. OracleDataAdafter
4. OracledataReader
29
Rudy Yanto, S.Kom., M.M., MTCNA
6.5. RINGKASAN NAMA CLASS PADA SETIAP PROVIDER
Berikut tabel ringkasan class yang sering dipakai untuk tiap data provider
30
Rudy Yanto, S.Kom., M.M., MTCNA