A while back, when I started learning C#. After Windows Forms comes ASP.NET and for my first assignment I need to create a login page. For that I googled some articles and finally assembled information required for a login web form. Login web form is different from a login form in windows application In a way that in web form we require to create a session at the time of login in most of the cases for storing some data due to statelessness of the webpages.
So, in this post I will discuss how to create a login web page which fetches data from database to check the userid and password. This is an elementary level of article and can be extended according to the individual’s requirements.
- Open Visual Studio.
- Create a <div> tag in the page(This div will contain all the required elements for the login page).
- Now drag some Textboxes, Labels and Buttons on web form.
<body> <form id="form1" runat="server"> <div id="box"> <asp:Label ID="lblUserName" CssClass="lbl" runat="server" Text="User Name"></asp:Label> <asp:TextBox ID="txtboxUserName" CssClass="txtbox" runat="server"></asp:TextBox> <br /><br /> <asp:Label ID="lblPassword" CssClass="lbl" runat="server" Text="Password"></asp:Label> <asp:TextBox ID="txtboxPassword" CssClass="txtbox" runat="server" TextMode="Password"></asp:TextBox> <br /><br /> <asp:Button ID="btnLogIn" runat="server" Text="Log In" onclick="btnLogIn_Click" Width="84px" /> <br /><br /> <asp:Label ID="lblMessage" runat="server" Text=""></asp:Label> </div> </form> </body>
- Now we will add some styling to this page.(I had used embedded CSS styling for simplicity, but generally in real life external style sheets are used.)
<head runat="server"> <title>LogIn Page</title> <style type="text/css"> #box { margin:100px auto auto auto; width:300px; background-color:Silver; padding:30px; border:solid 4px gray; text-align:center; } #btnLogIn { margin:10px auto auto auto; } .txtbox { margin:10px auto auto 20px; } .lbl { margin:10px auto auto auto; } #lblMessage { color:Red; font-weight:bold; } </style> </head>Our page will look like this after styling:
- Create Database using sqlserver(Here I used database named “test” and table named “loginInfo”. Table containe two columns userName and password).
- Create connection for database. (Generally connection string is stored in web.config file for security purpose but here I am creating the string in code only for the simplicity).
using System.Data.SqlClient; public partial class Default2 : System.Web.UI.Page { SqlConnection con; SqlCommand cmd; SqlDataReader rd; protected void Page_Load(object sender, EventArgs e) { con = new SqlConnection("initial catalog=test;integrated security=Yes"); //Create connection in page load event. } - Now write the code on button click event.
protected void btnLogIn_Click(object sender, EventArgs e) { con.Open(); string command = "select * from loginInfo where userName=@user and password=@password"; //Create a connection string. cmd = new SqlCommand(command, con); //Create a command using the connection string and pass parameters. cmd.Parameters.AddWithValue("@user", txtboxUserName.Text); cmd.Parameters.AddWithValue("@password", txtboxPassword.Text); rd = cmd.ExecuteReader(); if (rd.Read()) { //If the username and password is correct generate a session by username and redirect to the new page. Session["name"] = rd.GetString(0); Response.Redirect("MainPage.aspx"); } else { lblMessage.Text = "Invalid Userid or Password"; } }On successfull login user in directed to Welcome page.
In case of invalid username or password, error message is shown.
Thats all we need to do to create a basic login page. Many advancements
can be done in the login page according to the individual requirements.Happy Coding…
Midnight Cubicle 