| Download Sample |
Seperti biasa, setiap membuat halaman login di aplikasi web (asp.net), saya selalu menggunakan 2 buah Textbox Control (untuk input username dan password), 1 buah Button Control dan 2 buah Label Control untuk menunjukkan bila username atau password yang dimasukkan salah. Namun kali ini saya akan mencoba menggunakan Login Control yang sudah tersedia di MS Visual Studio, karena jelas lebih mudah dan lebih bagus.
Untuk memulainya, saya buat sebuah tabel di SQL Server (saya masih memakai SQL Server 2005) untuk menyimpan data username dan password.
CREATE TABLE [dbo].[Tbl_Login]( [id] [int] IDENTITY(1,1) NOT NULL, [usn] [varchar](50) COLLATE SQL_Latin1_General_CP1_CI_AS NULL, [passw] [varchar](50) COLLATE SQL_Latin1_General_CP1_CI_AS NULL ) ON [PRIMARY] GO
Kemudian saya isi kolom ‘usn’ dan ‘passw’, keduanya saya beri nilai / data -> ‘admin’
Selanjutnya, saya buat website baru di VS (.Net Framework yang saya pakai adalah versi 3.5 SP1). Saya buat 2 buah halaman aspx (Halaman_Login.aspx dan Halaman_Logout.aspx). Di Halaman_Login.aspx, saya tambahkan sebuah Login Control.
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Halaman_Login.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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Login ID="Login1" runat="server" BackColor="#FFFBD6" BorderColor="#FFDFAD" BorderPadding="4"
BorderStyle="Solid" BorderWidth="1px" Font-Names="Arial" Font-Size="Small" ForeColor="#333333"
TextLayout="TextOnTop">
<CheckBoxStyle Font-Names="Arial" Font-Size="Small" />
<TextBoxStyle Font-Size="0.8em" />
<LoginButtonStyle BackColor="White" BorderColor="#CC9966" BorderStyle="Solid" BorderWidth="1px"
Font-Names="Verdana" Font-Size="0.8em" ForeColor="#990000" />
<InstructionTextStyle Font-Italic="True" ForeColor="Black" />
<TitleTextStyle BackColor="#990000" Font-Bold="True" Font-Size="0.9em" ForeColor="White" />
</asp:Login>
</div>
</form>
</body>
dan di Halaman_Login.aspx.vb, saya tambahkan script sebagai berikut :
Protected Sub Login1_Authenticate(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.AuthenticateEventArgs) Handles Login1.Authenticate
Dim username As String
Dim pwd As String
Dim pName As String
username = Login1.UserName
pwd = Login1.Password
pName = ""
Dim strConn As String
strConn = WebConfigurationManager.ConnectionStrings("Conn").ConnectionString
Dim Conn As New SqlConnection(strConn)
Conn.Open()
Dim sqlUserName As String
sqlUserName = "SELECT usn,Passw FROM Tbl_Login "
sqlUserName &= " WHERE (usn = @UserName"
sqlUserName &= " AND Passw = @Password)"
Dim com As New SqlCommand(sqlUserName, Conn)
com.Parameters.AddWithValue("@UserName", username)
com.Parameters.AddWithValue("@Password", pwd)
Dim CurrentName As String
CurrentName = CStr(com.ExecuteScalar)
If CurrentName <> "" Then
Session("UserAuthentication") = username
Response.Redirect("Halaman_Logout.aspx")
Else
Session("UserAuthentication") = ""
End If
End Sub
Protected Sub Login1_LoggingIn(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.LoginCancelEventArgs) Handles Login1.LoggingIn
Dim cek As CheckBox = DirectCast(Login1.FindControl("RememberMe"), CheckBox)
Dim cookie As New HttpCookie("username")
If cek.Checked = True Then
cookie.Value = Login1.UserName
cookie.Expires = DateTime.Now.AddDays(1)
HttpContext.Current.Response.AppendCookie(cookie)
Else
cookie.Expires = DateTime.Now.AddDays(-100)
cookie.Value = ""
HttpContext.Current.Response.AppendCookie(cookie)
End If
cek.Checked = False
End Sub
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Session("Logout") = False Then
If Not Page.IsPostBack Then
Dim cek As CheckBox = Login1.FindControl("RememberMe")
If Not Request.Cookies("username") Is Nothing Then
If Not Request.Cookies("username").Value = "" Then
Login1.UserName = Request.Cookies("username").Value.ToString()
Login1.RememberMeSet = True
Else
Login1.RememberMeSet = False
End If
End If
End If
Else
Session("Logout") = False
End If
End Sub
Di Halaman_Logout.aspx saya tambahkan sebuah Button Control untuk fungsi Logout.
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Halaman_Logout.aspx.vb" Inherits="Default2" %>
<!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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
Ini Halaman Default2.aspx <asp:Button ID="BtnLogOut" runat="server" Text="Logout"
Width="50px" BackColor="White" BorderStyle="Solid" ForeColor="#000099" />
</div>
</form>
</body>
</html>
Untuk menjalankan fungsi logout, di Halaman_Logout.aspx.vb, saya tambahkan script sebagai berikut :
Protected Sub BtnLogOut_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles BtnLogOut.Click
Session.Remove("UserAuthentication")
Response.Redirect("Halaman_Login.aspx")
End Sub
Terakhir, untuk koneksi ke SQL Server, di halaman web.config saya tambahkan ConnectionString sebagai berikut :
<connectionStrings>
<add name="Conn" connectionString="Data Source=<nama_server/komputer>;Initial Catalog=<nama_database>;Persist Security Info=True;User ID=<Db_username>;Password=<Db_password>"
providerName="System.Data.SqlClient"/>
</connectionStrings>
Keterangan :
Ganti Data Source, Initial Catalog, User ID dan Password sesuai dengan setup Database di komputer Anda.
Bila berhasil, maka Anda akan dapat mencoba Login Control yang ada di Halaman_Login.aspx baik dengan Remember Me ataupun tanpa Remember Me.
Selamat mencoba, semoga bermanfaat.
***
Contoh nya kan pake desain bawaan vs ya?
kalo bikin desain login sendiri gimana ya? misalnya background gambarnya, tulisannya diganti bhs indonesia..
piye mas?
#-o waduh, pusink aku Ndi… jarak ngutak-atik disain. Tak coba ndisik, suk nek iso tak kandani…
Coba di utak-atik Login Control properties-e, koyo : CheckBoxStyle, TextBoxStyle, BackColor, UserNameLabelText, PasswordLabelText, LoginButtonText, LoginButtonType, dll.
NICE INFO ..
Bos, check thiz out… aku bikin custom template login control.
wuih.. keren coy..!!
RUMIT……….
Saya jajal dulu ya….
Kalau sukses…aku rekomendasikan deh……
maaf, kayaknya ada yang salah scriptnya….baris 20, 22, dan 30
sama mungkin yang di Ziddu bisa diperbaiki? Corrupt tuh
makasih mas Elang atas infonya. namun setelah saya coba cek baik di Script maupun di Ziddu-nya, ternyata saya tidak menemukan error-nya. Saya sudah coba download aplikasi saya sendiri yang ada di Ziddu, semuanya lancar. Setelah itu saya coba Running aplikasi yang saya download tersebut… ternyata juga nggak error, kecuali untuk connectionscript yang di web.service memang perlu diganti sesuai dengan database masing2.
Contoh :
Mohon infonya kembali bila ternyata masih error juga. Terimakasih.
kalo tidak salah sih ada yang sedikit aneh. waktu di debug pada halaman Halaman_Logout.aspx., dibrowser malah muncul halaman Halaman_Logout.aspx. , harusnya kan Halaman_Login.aspx.
di baris
CurrentName = CStr(com.ExecuteScalar)
muncul pesan Incorrect syntax near the keyword ‘user’
kenapa ya??
btw tutorialnya bagus neh…..
Saya udah coba cari kata “user” di sample yang saya sertakan, tp kok gak ketemu yaaa… yang ada itu variable “username” dan “user id” (di web.config). Apakah anda sempat merubah atau membuat variabel baru?
sama saya juga muncul error seperti itu
tabel yang nemampung data username dan password saya beri nama user
makasih buat sharenya.. klo misalkan saya mau pake css di dalam login control??
kalo mo pake desain sendiri, termasuk css. baca ini
http://angkringankode.wordpress.com/2010/05/19/asp-membuat-custom-template-logincontrol/
Sungguh sangat berguna,
i enjoyed with this
thanks
mas klu di bawah password nya di kasih button angka 1-9 terus bisa g mana caranya
[...] kode-kode di code behind silahkan membaca tulisan dari Mas NderekLangkung. Selamat mencoba. Happy [...]
Terima kasih..
Banyak membantu… buat lagi belajar…
Sama-sama. Senang bisa membantu..
Ketika saya coba muncul pesan
Error 1 Name ‘WebConfigurationManager’ is not declared pada file login Halaman_Login.aspx.vb
begitu juga dengan SqlConnection dan SqlCommand
mohon bantuannya
Coba tambahkan ini di Halaman_Login.aspx.vb :
Imports System.Data
Imports System.Data.SqlClient
Imports System.Web.Configuration
contohnya bagus, tapi
bagaimana cara menghilangkan history pada saat login supaya ngak bisa diback sama di next