Membuat Aplikasi Login Dengan Visual Studio 2015

Buat kalian yang ingin belajar membuat aplikasi login dengan software visual studio, Kalian berada di blog yang tepat karena admin akan membangikan tutorial bagaimana cara membuat aplikasi login dengan visual studio. Sebelum kita membuat aplikasi login dengan visual studio akan lebih baik jika memamhami terlebih dahulu apa itu visual studio?

Jadi visual studio adalah bahasa pemograman windows yang berbasis grafis (GUI-Grapichical User Interface). Sifat bahasa pemogramanya adalah eventdriven, artinya program akan terjadi jika ada respon dari pemaka berupa event/kejadian tertentu (tombol diklik, mouse ditekan dan lain-lain). Saat event terjadi maka kode yang berhubungan dengan event akan di jalankan.

Pada bagian ini akan di jelaskan tentang pengenalan program visual studio dalam pembuatan aplikasi windows. Menjalankan program visual studio sama dengan menjalankan program windows lainya, yaitu dengan mengklik ganda icon yang di gunakan untuk menjalankan program.

Dalam visual studio, pembuatan aplikasi dimulai dengan memperkirakan kebutuhan, merancang tampilan dan selanjutnya siikuti dengan pembuatan kode untuk program tersebut.

Adapun bahan yang perlu kita siapkan adalah

• Aplikasi visual studio community, bisa kalian download di link berikut ini  https://www.visualstudio.com/downloads/
• Sql Server, bisa juga di download di link berikut ini https://www.microsoft.com/en-us/sql-server/sql-server-downloads

Baiklah setelah bahan selesai di siapkan, kita lanjutkan tutorial membuat aplikasi login dengan menggunakan Visual Studio 2015. Langkah selanjutnya adalah menginstall Sql Server yang sudah kalian download. Jika sudah kalian install, silahkan buka aplikasi Sql Server maka muncul tampilan seperti gambar di bawah ini

ilmunya-ngoding.blogspot.com

Setelah aplikasi terbuka, kita di suruh untuk mengisi username dan password (jika ada). Setelah itu akan ada tampilan seperti ini, dimana kita di suruh untuk mengisi Server type(tipe serve) , Server name(nama Server), Authentication. Sesuaikan saja dengan gambar dibawah ini. Kemudian klik connect dan tunggu proses koneksi sampai selesai dan kemudian nanti akan membuka aplikasi sql server

ilmunya-ngoding.blogspot.com

Setelah berhasil membuka aplikasi microsoft SQL Server. Kemudian klik kanan pada folder database kemudian pilih new database atau buat database baru. Setelah itu kalian akan di alihkan ke halaman pembuatan database. Di halaman ini kalian di suruh untuk mengisi kolom nama database dengan nama database yang kalian ingin kan. Disini saya akan isikan dengan nama DBLogin. Dan di colom owner isikan <default>. Setelah sudah klik OK. Kemudian setelah selesai kita membuat database, kita akan membuat sebuah tabel sesuai kebutuhan kita. Karena kita disini akan membuat aplikasi login maka kita hanya perlu membuat satu tabel dengan nama bebas terserah kalian. Jika kalian binggung buat saja dengan nama tbUser.

Cara membuat tabel disini sama dengan membuat database. klik dalam folder database kemudian pilih database yang telah kita buat tadi, yaitu DBLogin setelah itu klik kanan di folder tables Setelah itu pilih new table atau buat tabel baru. kemudian kita akan di alihkan ke halaman buat table, disini kita akan melihat 3 colom yang harus di isi yaitu, column name, Data Type, Allow Nulls. disini kita akan membuat struktur tabel kita seperti gambar di bawah ini. Kalian sesuaikan saja.

ilmunya-ngoding.blogspot.com

kemudian kita tambah kan primary key pada kolom username. Cara nya klik kanan pada kolom username pilih set primay key. setelah selesai kita membuat struktur tabel kita, selanjutnya klik save maka kita akan disuruh dahulu untuk mengisi nama tabel kita. isikan saja dengan nama tbUser

Setelah selesai kita membuat database dan tabel yang akan kita gunakan dalam membuat aplikasi login dengan visual studio 2015 maka kita akan ber alih aplikasi ke visual studio untuk proses pembuat aplikasi login ini. Buka aplikasi visual studio yang telah kalian download dan install, maka akan muncul tampilan awal visual studio. lihat pojok kanan atas, klik file kemudian new kemudian project atau kalian bisa dengan menekan tombol kombinasi keyboard yaitu ctrl+shift+N. jika masih binggung simak gambar di bawah ini.

ilmunya-ngoding.blogspot.com

Setelah itu kalian akan diminta untuk mengisi nama project kalian. isikan saja dengan nama aplikasi login. setelah itu kita akan ber alih ke bagian desain. adapun nanti property yang akan kita ubah dan akan mengunkan beberapa toolbox. antara lain seperti di bawah ini:

Property yang diubah :

• Form Border Style ( Sizable > Fixed Single )
• Start Position (Windows Default Location > Center Screen

Toolbox yang digunakan :

• 3 Buah Label
• 2 Buah Textbox
• 2 Buah Button
• 1 Buah Picturebox
• 1 Buah Link Label

Kemudian desain aplikasi kalian seperti gambar dibawah ini

ilmunya-ngoding.blogspot.com

Setelah selesai kita mendesain aplikasi kita, kita akan membuat sebuah module. Caranya klik pada bagian project kemudian pilih add module setelah itu kita beri nama module ini dengan nama mdKoneksi setelah itu klik add. kemudian kita mulai ngoding untuk membuat script koneksi aplikasi kita. scriptnya seperti di bawah ini

Imports System.Data.SqlClient
Public Conn As SqlConnection
Public cmd As SqlCommand
Public dr As SqlDataReader
Public da As SqlDataAdapter
Public ds As DataSet

Public Sub Koneksi()
Conn = New SqlConnection("Data Source = DESKTOP-BRTLQIV\SQLEXPRESS; Initial Catalog = DBLogin; Integrated Security=True")
Conn.Open()
End Sub

kemudian klik2x  pada link label, isikan script di bawah ini:

Me.Hide()
frmAdd.Show()

Setelah itu klik 2x pada Form Login nya kemudian masukkan koding berikut tepat dibawah Private

sub Form1_Load :

TextBox2.PasswordChar = "*"

TextBox1.Clear()

TextBox2.Clear()

Setelah memasukan script ke dalam form loginya, maka langkah selanjutnya adalah memberikan script ke button. Untuk scripnya bisa kalian lihat di bawah ini.

f TextBox1.Text = "" Or TextBox2.Text = "" Then

MsgBox("Username/Password Tidak Boleh Kosong")

Else

Koneksi()

cmd = New SqlCommand("select * from tbUser where Username='" & TextBox1.Text & "' and Password='" & TextBox2.Text & "'", Conn)

dr = cmd.ExecuteReader

dr.Read()

If dr.HasRows Then

MsgBox("Selamat Datang, "& dr.item("Username"), MsgboxStyle.Information,"Login Sukses :)")

Me.Hide()

frmMaster.Show()

Else

MsgBox("Login gagal")

TextBox1.Clear()

TextBox2.Clear()

TextBox1.Focus()

End If

End If

kemudian di button cancel isikan script "END" tanpa tanda petik. kemudian masukan script di bawah ini tepat diatas Private Sub Button1_Click :

Private Sub TextBox1_KeyPress(ByVal sender As Object, ByVal e As System.Windows.Forms.KeyPressEventArgs) Handles TextBox1.KeyPress

        If e.KeyChar = Chr(13) Then

            TextBox2.Focus()

        End If

    End Sub

    Private Sub TextBox2_KeyPress(ByVal sender As Object, ByVal e As System.Windows.Forms.KeyPressEventArgs) Handles TextBox2.KeyPress

        If e.KeyChar = Chr(13) Then

            Button1.Focus()

            Button1.PerformClick()

        End If

    End Sub

kemudian kita akan membuat form masternya. dengan cara klik di bagian project kemudian pilih add windows form.  Setelah itu tulis nama winform tersebut, tulis saja frmMaster kemudian klik add. Setelah itu kita mulai membuat desain form kita. desain saja seperti gambar di bawah ini.

ilmunya-ngoding.blogspot.com

Adapun property yang harus di rubah di bawah ini:

1. Window State (Normal > Maximized)

Adapun Toolbox yang digunakan :

• 1 Buah MenuStrip

Kemduian klik 2x pada menu add acount, lalu isikan script berikut:

Me.Hide()
frmAdd.Show()

Dan di menu Log out, isikan script berikut: 

Me.Hide()
Form1.Show()

Setelah kita membuat form masternya, kita akan membuat form add acount, dengan cara klik bagian project setelah itu add windows form. sama halnya dengan kita membuat form masternya. kemudian kita beri nama form ini dengan nama frmAdd kemudian klik tombol add. Setelah selesai kita membuat file form add kita akan mulai mendasain tampilan form add acount. Desain saja seperti gambar di bawah ini.

ilmunya-ngoding.blogspot.com

Adapun property yang harus di ubah dan toolbox yang akan kita gunakan antara lain:

• Form Border Style (Sizable > Fixed Single)
• Start Position (Windows Default Location > Center Screen)

Toolbox yang dibutuhkan :

• 3 Buah Label
• 2 Buah Textbox
• 2 Buah Button

kemudian klik 2x pada form, isikan script di bawah ini:

TextBox1.Select()
TextBox1.Clear()
TextBox2.Clear()
TextBox2.PasswordChar = "*"

Dan klik 2x pada bagian buttonAdd, isikan script di bawah ini:

If TextBox1.Text = "" Or TextBox2.Text = "" Then

MsgBox("Username/Password Tidak Boleh Kosong!", MsgBoxStyle.Critical, "Akun Gagal Ditambahkan")

Else

Koneksi()

cmd = New SqlCommand("Insert Into tbUser values('" & TextBox1.Text & "', '" & TextBox2.Text & "')", Conn)

cmd.ExecuteNonQuery()

MsgBox("Akun Berhasil ditambahkan", MsgBoxStyle.Information, "Success !")

TextBox1.Clear()

TextBox2.Clear()

TextBox1.Select()

End If

dan klik 2x lagi pada bagian button cancel, isikan script :

Me.Hide()
Form1.Show()
TextBox1.Select()
TextBox1.Clear()
TextBox2.Clear()

Setelah semua Script Code di masukkan pada masing masing komponen, Selanjutnya langkah terkahir yaitu Menjalankan Aplikasi tersebut. Dengan cara menekan tombol F5 pada Keyboard atau menekan tombol Start yang ada di Toolbar. Baiklah selesai sudah kali ini tutorial membuat aplikasi login dengan visual studio 2015. Semoga bermanfaat. wasalamuaikum wr,wb.