Membuat form Login di Visual Studio 2010 ~ Sugeng Rawuh

Pada Postingan Sebelumnya saya sudah share bagaimana membuat form login dan databasenya SQL Server, kali ini kita akan membuat program yang sama dengan database yang berbeda.

Jika anda baru mengenal VB dan Bahasa pemrograman, mungkin anda akan sedikit bermasalah untuk mengikuti tutorial yang saya buat, oleh karena itu, silahkan ikuti tutorialnya dari langkah pertama sampai akhir dan pastikan semuanya sama, mulai dari nama database, nama tabel, nama kolom di tabelnya, nama-nama dari Form, Textbox dan Button di Vb.

Langsung saja kalau begitu, sebelum membuat aplikasi ini, pastikan anda telah menginstall beberapa aplikasi berikut di PC atau Laptop anda

MySQL Connector ,
MySQL, kalau mw cara mudahnya install XAMPP, maka secara otomatis MySQL akan terinstall Secara otomatis
Tool yang digunakan untuk mengolah database MySQL, penulis Menggunakan SqlYog Community Edition dalam membuat tutorial ini (Saya pakai yang tanpa install karena secara pribadi saya lebih suka menggunakan SQL Server)

Berikut langkah-langkah membuat form login dengan database MySQL

Buat Database di SQLyog ( boleh pakai Selain SQLYog yang penting databasenya MySQL) dengan nama "loginapp" dan buat tabel dengan nama "tbluser" dan kolomnya seperti berikut :

Buat Database, tabel dan nama field pada tabel seperti diatas

Buat 3 field dengan Seting seperti diatas, kita buat ID sebagai Primary Key dan kita buat akan otomatis terisi ketika penambahan data makanya auto incrementnya kita centang juga. jangan lupa isikan len / panjang karakter jika type datanya varchar.
Langsung isi saja fieldnya, karena ID kita buat Auto Increment, maka ID tidak perlu diisi hanya isi saja username dan passwordnya kemudian tekan enter

Isikan Data pada TblUser
Karena Database sudah siap, sekarang buka Visual Studio 2010 sobat dan pastikan berjalan dalam bahasa Pemrogaraman Visual Basic (karena bukan hanya ada VB dalam Visual Studio 2010, jadi jangan sampai membuat projek dengan bahasa pemrograman selain VB Untuk tutorial ini)

Membuat Projeck Baru
Dengan menggunakan Label, Textbox dan button buat desain form seperti berikut (Ganti name dari masing-masing textbox menadi txtUserName untuk Username dan txtPassoword untuk Password):

Desain Form Login
Sebelum ke coding program buatlah 1 buat form yang nantinya form ini akan tampil jika login berhasil, caranya klik menu project --> pilih add windows from dan ganti nama formnya menjadi formUtama.vb

Form Utama.Vb
Tambahkan 1 buah label saja dan ganti textnya terserah anda yang penting bisa membdakan dengan form login tadi (form ini akan menjadi form utama sobat ketika membuat sebuah aplikasi komplek, untuk saat ini terlihat tidak begitu berguna :v :v)

Desain Form Utama
Selanjutnya kita buat class Koneksi untuk menghubungkan VB dengan MySQL. koneksi yang saya gunakan disini yaitu koneksi string oledb. klik menu project --> add class dan ganti namanya menjadi classKoneksi.vb

add Class Koneksi
Sebelum ke coding program tambahkan refrence untuk aplikasi sobat agar bisa terhubung ke Mysql, caranya klik menu project--> add Reference , kemudian pindah ke tab .NET, cari MySQL.Data dan kemudian klik OK

Add Reference

Tambahkan Coding berikut pada ClassKoneksi

Imports System.Data
Imports System.Data.OleDb
Imports MySql.Data.MySqlClient

Public Class ClassKoneksi
    Dim SQL As String
    Dim Cn As New MySqlConnection
    Dim Cmd As New MySql.Data.MySqlClient.MySqlCommand
    Dim Da As New MySql.Data.MySqlClient.MySqlDataAdapter
    Dim Ds As New DataSet
    Dim Dt As DataTable

    Sub CobaOpenConn()
        Cn = New MySqlConnection("server=localhost;" _
           & "user id=root;" _
           & "password=;" _
           & "database=loginapp")
        Try
            Cn.Open()
            MsgBox("Koneksi Berhasil Tersambung")
        Catch ex As Exception
            MsgBox("Koneksi Gagal " & vbCrLf & "Pesan Error : " & ex.Message, MsgBoxStyle.Critical, "Peringatan")
        End Try
    End Sub
    Sub CobaCloseConn()
        Try
            If Not IsNothing(Cn) Then
                Cn.Close()
                Cn = Nothing
                MsgBox("Koneksi Berhasil Terputus")
            End If
        Catch ex As Exception
            MsgBox("Koneksi Gagal Diputus " & vbCrLf & "Pesan Error : " & ex.Message, MsgBoxStyle.Critical, "Peringatan")
        End Try
    End Sub
    Public Function OpenConn() As Boolean
        Cn = New MySqlConnection("server=localhost;" _
           & "user id=root;" _
           & "password=;" _
           & "database=loginapp")
        Cn.Open()
        If Cn.State <> ConnectionState.Open Then
            Return False
        Else
            Return True
        End If
    End Function
    Public Sub CloseConn()
        If Not IsNothing(Cn) Then
            Cn.Close()
            Cn = Nothing
        End If
    End Sub
    Public Sub ExecuteNonQuery(ByVal Query As String)
        If Not OpenConn() Then
            MsgBox("Koneksi Gagal..!!", MsgBoxStyle.Critical, "Access Failed..!!")
            Exit Sub
        End If

        Cmd = New MySql.Data.MySqlClient.MySqlCommand
        Cmd.Connection = Cn
        Cmd.CommandType = CommandType.Text
        Cmd.CommandText = Query
        Cmd.ExecuteNonQuery()
        Cmd = Nothing
        CloseConn()
    End Sub

    Public Function ExecuteQuery(ByVal Query As String) As DataTable
        If Not OpenConn() Then
            MsgBox("Koneksi Gagal..!!", MsgBoxStyle.Critical, "Access Failed")
            Return Nothing
            Exit Function
        End If

        Cmd = New MySql.Data.MySqlClient.MySqlCommand(Query, Cn)
        Da = New MySql.Data.MySqlClient.MySqlDataAdapter
        Da.SelectCommand = Cmd
        Ds = New Data.DataSet
        Da.Fill(Ds)

        Dt = Ds.Tables(0)

        Return Dt

        Dt = Nothing
        Ds = Nothing
        Da = Nothing
        Cmd = Nothing

        CloseConn()

    End Function
End Class

perhatikan pada baris ke 14-17 dan 37-40 pada coding diatas, Server di isi dengan nama server dari database sobat, karena kita menggunakan komputer yang sama dengan komputer tempat disimpannya database maka dibuat servernya localhost, user id dan password disesuaikan dengan username dan passoword dari database sobat, penulis menggunakan root sebagai usernam dan tanpa passowrd, kemudian pada database tuliskan nama dari database sobat di MySQL (di SQLyog nya)

Sekarang pindah ke formlogin lagi, klik 2x pada btnLogin dan Sesuaikan codingnya seperti berikut:

Public Class FormLogin
    Dim Koneksi As New ClassKoneksi
    Dim DataTabelOperator As New DataTable
    
    Private Sub btnLogin_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnLogin.Click
        Dim QUERY As String
        Dim username As String

        QUERY = "SELECT * FROM tbluser Where username = '" & txtUserName.Text & "' and password = '" & txtPassword.Text & "'"
        DataTabelOperator = Koneksi.ExecuteQuery(QUERY)
        If DataTabelOperator.Rows.Count = 0 Then
            MsgBox("Username atau password salah !", MsgBoxStyle.Critical, "Peringatan !")
        Else
            username = DataTabelOperator.Rows(0).Item(1)

            MsgBox("Selamata Datang " & username, MsgBoxStyle.Information, "Informasi")
            FormUtama.ShowDialog()
        End If
    End Sub

    Private Sub FormLogin_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        txtPassword.PasswordChar = "*"
    End Sub

    Private Sub btnClose_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnClose.Click
        Close()
    End Sub
End Class

Deklarasikan 2 variable (baris 2-3), kemudian tambahkan coding baris 6-18 untuk event on Click btn Login, dan untuk event form load tambahkan baris coding ke -22 agar ketika passowrd dimasukkan maka akan muncul **** bukan huruf atau angka yang diketik, terakhir tambahkan baris coding ke 26 untuk btnCancel

Jika sudah selesai jalankan aplikasi sobat, kurang lebih tampilannya sebagai berikut ketika program dijalankan :

Login

Tampilan Setelah Berhasil Login

Sugeng Rawuh

Slide me

Selasa, 01 November 2016