How to go about creating login page in asp.net

Today I am going to show you how you can go about creating login page in asp.net website. Whenever you want to keep your information safe or stop unwanted traffic on your website, a login system works the best. My ongoing ASP.NET tutorial series will show you a complete demo of website creation. I will try my best to show you the easiest way to create a nice and secure website using ASP.NET. And therefore I would like to start with the login system.

First of all lets prepare Database containing a username and a password. Make sure you have a primary key as a username so that two usernames can never be registered.

Let’s make a form containing two text boxes and one button as shown in the picture below.

For creating a simple form in center of the page:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="login.aspx.cs" Inherits="login" %>

<!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> How to create login form in ASP.NET </title>

    <style type="text/css">
    .login
    {
    	background:#f8f8f8;
    	border:1px solid #000;
    	margin-left:38%;
    	margin-top:15%;
    	width:300px;
    	padding:20px;
    	font-family:Century Gothic;
    }

    .login .button
    {
    	padding:5px 10px;
    	font-family:Trebuchet MS;
    	cursor:pointer;
    	font-size:18px;
    }

    .login .lblmsg
    {
    	font-size:14px;
    	color:Red;
    	margin:20px 0;
    }
    </style>

</head>
<body>
    <form id="form1" runat="server">

    <div class="login" align="center">

        <table>
            <tr>
                <td> Username : </td>
                <td> <asp:TextBox ID="txtuser" runat="server"></asp:TextBox> </td>
            </tr>
            <tr>
                <td> Password : </td>
                <td>  <asp:TextBox ID="txtpassword" TextMode="Password" runat="server"></asp:TextBox> </td>
            </tr>
        </table>

        <asp:Label ID="lblmsg" runat="server" CssClass="lblmsg" Text=""></asp:Label><br />

        <asp:Button ID="btnlogin" runat="server" CssClass="button" Text="Log in" onclick="btnlogin_Click" />

    </div>

    </form>
</body>
</html>

A simple backhand coding should be applied here. The next step is creation of SQL connection. For that we will simply RIGHT CLICK on the DATABASE ( here the database’s name it is“logindatabase” ) which is opened in SERVER EXPLORER and select PROPERTIES. Copy the entire CONNECTION STRING from the box which is open on the right side and arrange it as shown in the example below.

Now make a code for login system in button_click event as shown in the example. So that whenever the button is clicked, the following code will execute.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;

public partial class login : System.Web.UI.Page
{
    SqlConnection sqlconn = new SqlConnection("Data Source=.\\SQLEXPRESS;AttachDbFilename=|DataDirectory|\\logindatabase.mdf;Integrated Security=True;User Instance=True");
    string str;
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void btnlogin_Click(object sender, EventArgs e)
    {
        str = "SELECT * FROM login where username='"+ txtuser.Text +"' AND password='"+ txtpassword.Text +"'";

        sqlconn.Open();
        SqlCommand sqlcmd = new SqlCommand(str, sqlconn);
        SqlDataReader sqldr = sqlcmd.ExecuteReader();

        if (sqldr.Read() == true)
        {
            lblmsg.Text = "You have successfully logged in";
        }
        else
        {
            lblmsg.Text = "Password or username is incorrect";
        }

        sqlconn.Close();
    }
}

The process is very simple and checks whether user exists or not. Please send your comments if you have any questions.