 |
| Gambar 1 : Layout Login |
TUTORIAL LOGIN SEDERHANA MENGGUNAKAN ASP.NET DAN SQL SERVER
Lama gak posting jadi kangen neh, maklumin aja ane pengangguran banyak acara alias *Pengacara. :D
Assalamualaikum wr.wb, Salam Sejahtera untuk kita semua.
Untuk permulaan, dan semoga kedepannya lebih rajin lagi postingnya. Malam ini saya mau share sedikit ilmu pemrograman yang saya dapat dari tuntutan dan pengalaman belajar yaitu Sistem Login dengan koneksi database menggunakan ASP.NET (vb) dan SQL Server 2008. Untuk IDE nya, saya menggunakan Microsoft Visual Studio 2010.
Asumsinya, teman-teman sudah memiliki dan mengetahui langkah pengoperasian Visual studio dan Sql Server 2008 agar tidak terjadi kesulitan, karena disini saya hanya akan membahas kodingnya saja.
1. Baiklah kita langsung saja ke studi kasus.Buat Database pada SQL Server yang kamu punya(bebas), lalu buatkan table. Disini saya membuat table “admin_login”. Contoh nya, lihat gambar.
Atau kamu bisa ketik query dibawah ini. *Jangan lupa gunakan database yang sudah dibuat ya “use [nama database]” tanpa petik.
CREATE TABLE admin_login(
id_admin int identity(1,1) not null
email varchar(100) not null,
phone varchar(100) not null,
username varchar(100) not null,
password varchar(100) not null,
constraint pk_admin primary key(id_admin)
);
2. Langkah selanjutnya coba teman-teman isikan 1 nilai pada tiap field untuk sampel pada table admin_login tadi atau table yang kamu buat. Bisa dilakukan dengan mode wizard seperti ini :
Atau
dengan mode Query seperti ini:
INSERT
INTO admin_login
(email,
phone, username, password)
values
('egichoice@gmail.com',085811883595,'admin',0103);
Bagaimana, sampai disini gak ada
kesulitan berarti kan? Syukurlah kalo gitu :D
3. OK berikutnya teman-teman buka Microsoft Visual
Studio nya yaa.. Sepertinya udah pada jago, jadi gak perlu diajarin lagi yaa..
Hhee
Buat
2 Form, form pertama untuk Layout Login, form kedua untuk Layout Welcome.
4. Lanjut ke form pertama, buat form dengan nama
bebas. Disini saya memakai nama Default.aspx
Ketikkan
script dibawah ini, atau copas juga boleh!! J
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title> :: Login
:: </title>
<link href="css/Loginstyle1.css" rel="Stylesheet"
type="text/css"
/>
</head>
<body>
<form id="form1" runat="server">
<div id="login">
<%--ini Judul
Loginnya--%>
<h3>Login
Administrator</h3>
<%--Validation
Summary fungsinya sebagai Ringkasan atas keterangan validasi, bisanya untuk
Error--%>
<asp:ValidationSummary ID="vs1" runat="server" BackColor="#CCFF66"
BorderColor="#9933FF" Font-Bold="True" Font-Italic="True" Font-Size="Medium"
ForeColor="#FF6600" ShowMessageBox="True" ValidationGroup="vglogin" />
<fieldset>
Username
<asp:TextBox ID="txtusername" CssClass="text" runat="server" />
<%--Required
Field Validator berfungsi untuk memvalidasi kesalah pengisian.
Disini
berfungsi sebagai peringatan apabila field pengisian kosong--%>
<asp:RequiredFieldValidator ID="rfv1" runat="server"
ControlToValidate="txtusername" Font-Bold="True" Font-Size="Medium"
ForeColor="Red" SetFocusOnError="True" ValidationGroup="vglogin"
ErrorMessage="Username Kosong" ></asp:RequiredFieldValidator>
<br />
password
<asp:TextBox ID="txtpass" runat="server" TextMode="Password" CssClass="password" /><br />
<asp:RequiredFieldValidator ID="rfv2" runat="server"
ControlToValidate="txtpass" Display="Dynamic" Font-Bold="True"
Font-Size="Medium" SetFocusOnError="True" ValidationGroup="vglogin"
ErrorMessage="Password kosong!!" ></asp:RequiredFieldValidator>
<asp:Button ID="btnlogin" runat="server" CssClass="button" Text="Login" ValidationGroup="vglogin" />
<div class="border-p">
</div>
<%--<p>OR</p>--%>
<asp:Button ID="btnfb" runat="server" CssClass="button" Text="Login with facebook" />
</fieldset>
</div>
</form>
</body>
</html>
Tampilan
awal pasti seperti ini karena belum diberi sentuhan css:
*Keterangan:
1. ControlToValidate: validasi pada field yang dituju.
2. Validation Group: group
validasi yang akan berguna untuk menganalisis kesalahan yang mungkin akan
terjadi bersamaan, dan akan diidentifikasi pada event tertentu (biasanya pada
event click).
Gambar
diatas adalah tampilan PopUp “Show Message box” yang ada pada properties
Validation Summary jika ShowMessageBox bernilai “True”.
Gambar
diatas menerangkan point kesalahan pada pengisian, karena field kosong!! saat
Button Login telah di Click. Baris berwarna kuning adalah ValidationSummary.
5. Lanjut ke Form berikutnya, Teman – teman buat
form sederhana yang fungsinya sebagai form tujuan yang akan ditampilkan setelah
login berhasil.
6. Selanjutnya
buat file css, dengan cara Klik kanan pada project > Add New Item atau
Ctrl+Shift+a. Pilih Stylesheet.css. Buat nama Bebas!!.
Lalu ketik Script berikut ini:
body
{
margin: 0;
padding: 0;
}
#login
{
max-width: 340px;
margin: 100px auto;
background:#f9f9f9;
box-shadow: 0 0 10px #aaa;
}
#login h3
{
text-align: center;
padding: 25px 10px;
background-color:
#2b2f3e;
color: #b0b0bc;
}
fieldset
{
margin: 0;
border: none;
}
form
{
padding: 0;
margin: 0;
padding: 15px;
}
input[type='text'], input[type='password']
{
width: 90%;
padding: 1em;
margin-top: 1.2em;
color: #888;
}
input[type="button"]
{
width: 100%;
padding: 1.4em;
margin: 1.5em 0;
color: #888;
background-color:
#00cdb1;
border: none;
color: #eee;
border-bottom:
4px solid transparent;
}
input[type="button"]: hover
{
opacity: 0.8;
border-color:
#00adb1;
}
form p
{
text-align: center;
color: #888;
width: 30px;
margin: 1-px auto 0;
background: #f9f9f9;
position: relative;
bottom: 20px;
}
.border-p
{
border-top: 1px solid #888;
margin: 10px 10px;
}
.button
{
background-color:
#3b5998;
width: 100%;
padding: 1.43m;
margin-bottom:
1em;
color: #888;
border: none;
color: #eee;
border-bottom:
4px solid transparent;
}
.button:hover
{
opacity: 0.9;
border-color:
#3b3998;
}
*Keterangan: 1.
Identifikasi elemen HTML melalui tagnya (p,a,h1. dst)
2. Identifikasi elemen melalui nama classnya (.button:hover)
3. Identifikasi elemen melalui ID nya(#login)
Jika teman-teman
sudah selesai mengetik script css diatas, maka lakukan pemanggilan atas css
tersebut kedalam form login. Form saya bernama “Default.aspx”. Tulis script ini
didalam element <Head> : Disini : </head>
Link koneksi CSS berada dibawah Title.
Bagaimana,
gak susah kan. Jika berhasil, maka tampilannya akan berubah seperti gambar 1.
7. Sekarang beranjak ke Programmingnya neh. Masih
di IDE kesayangan kita Visual Studio, teman-teman buat file baru dengan tipe
Class. Klik Kanan pada project > Pilih New Item Cari Class. Beri nama bebas.
Lihat gambar!
Ketikkan
script sebagai berikut:
'4 Baris
dibawah ini adalah Library bawaan Microsoft. Wajib dipakai yaa untuk koneksi
database
Imports
Microsoft.VisualBasic
Imports
System.Data.SqlClient
Imports
System.Data
Imports
System.Data.OleDb
Public Class MyConnection
Public
connect As SqlClient.SqlConnection 'Prosedur
koneksi database
Public oleDbcommand
As New
SqlClient.SqlCommand 'Prosedur
identifikasi query database
Public
myreader As SqlClient.SqlDataReader 'Prosedur
pengenal data query
Public Sub katalog()
'INI ADLAAH
FORMAT KONEKSI DATABASE YANG DIMANA DATABASE TERSEBUT "TIDAK
DIPASANG" SISTEM AUTENTIKASI / PASSWORD
connect = New
SqlConnection("server=(local);database='EgiDB';Trusted_Connection=True;")
End Sub
Public Sub Login()
'INI ADLAAH
FORMAT KONEKSI DATABASE YANG DIMANA DATABASE TERSEBUT "DIPASANG"
SISTEM AUTENTIKASI / PASSWORD
connect = New
SqlConnection("server=(local);database='cevest';User
ID=sa;Password=1234567;")
End Sub
End Class
8. Lanjut ke code behind di form login. Klik kanan
pada text Editor > Pilih View Code > Lalu pilih event Button. Lihat gambar
Lalu pilih “Deklarasi” Click, Seperti ini: ada disebelah kanan
Atau bisa juga
teman – teman double Klik pada button Login pada tab Design.
Ketikkan Script
dibawah ini:
Partial Class _Default
Inherits
System.Web.UI.Page
Dim kon As New MyConnection
'Memanggil Class Koneksi pada file Class
Protected Sub btnlogin_Click(ByVal
sender As Object,
ByVal e As
System.EventArgs) Handles
btnlogin.Click
With
kon 'Memakai
koneksi pada class
kon.Login() 'Panggil
statement Login pada class koneksi
.connect.Open() 'memanggil
keyword koneksi pada class koneksi
.oleDbcommand.Connection =
.connect 'Commandtext
dihubungkan dengan query koneksi sql/database
'Query
Select Database
.oleDbcommand.CommandText = "SELECT * FROM login_admin where username = '"
& txtusername.Text & "' and password =
'" & txtpass.Text & "'"
.myreader =
.oleDbcommand.ExecuteReader
If
.myreader.Read Then
Response.Redirect("~/Application/Welcome.aspx") 'Respon saat
berhasil Login, langsung menuju form Welcome
End
If
If Not .myreader.IsClosed Then
.myreader.Close() 'Menutup
Koneksi
.connect.Close()
End
If
End With
End Sub
Protected Sub Page_Load(ByVal
sender As Object,
ByVal e As
System.EventArgs) Handles
Me.Load
txtusername.Focus()
End Sub
End Class
Jika Login Berhasil
Maka akan tampil seperti ini:
Selesai… J
Selamat Mencoba
yaa…
Silahkan
tinggal kan komentar jika ada yang perlu ditanyakan.
