C# Jadu
  • Home
  • Asp.net
  • Web Design
    • Html
    • Css
    • Java Script
  • Bootstrap
  • Sql
    • Queries
    • Stored Procedures
  • About Me
    • About Myself
    • My Projects
    • My CV
  • Gallery
  • Do you Know?

Sunday, 27 September 2015

How to create a simple login page in Asp.net ?

 Deepak Chaudhary     11:54     ASP.NET     2 comments   

Hi Friends...

If you are new in Asp.net and you don't know how to start then this article is surely for you this post is gonna help you to create simple login page.
C# jadu

In this login page user will have to fill username,password details in the given textbox. This example consists of two pages login page (login.aspx) and index page (index.aspx) for redirecting user after successful login.

Step 1: Make connection string in web.config page
<connectionStrings>
    <add name="LoginConnectionString" connectionString="Data Source=DEEPAK-PC;Initial Catalog=Login;Integrated Security=True" providerName="System.Data.SqlClient" />
 </connectionStrings>


Step 2: Database

You have to create a new database named Login which contains the following table named UserDetails 



Step 3: Html Code for login.aspx page

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Login</title>
</head>
<body id="page1">

    <div style="border: 2px solid #FF6600; width: 390px; margin-left: 290px">
        <center>

             <form id="Form1" runat="server">
                 <br />
         &nbsp;&nbsp;<asp:Label ID="Label1" runat="server" Text="Email Id" ForeColor="#FF6600" Font-Names="Levenim MT" Font-Size="Medium"></asp:Label>
        &nbsp;<asp:TextBox ID="txtUserName" runat="server" style="margin-left: 21px" Height="21px" Width="175px"  placeholder="Enter your Email.."></asp:TextBox>
                 
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        
        <br />
        <br />
        <asp:Label ID="Label2" runat="server" Text="Password" ForeColor="#FF6600" Font-Names="Levenim MT" Font-Size="Medium"></asp:Label>
    
        <asp:TextBox ID="txtPassword" runat="server" style="margin-left: 21px" Width="175px" TextMode="Password"  placeholder="Enter your Password .."></asp:TextBox>
                
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <br />
                 <br />
        <br />
&nbsp;
       
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:Button ID="Buttonlogin" runat="server"  BackColor="#FF6600"  OnClick="Buttonlogin_Click" style="margin-left: 7px" Text="Login" ForeColor="White" Font-Names="Levenim MT"/>
    
       </form>
    </center>
    </div>
</body>

</html>

  Your design will look like this 


Step 4:  C# Code for login.aspx

Add some header files 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Configuration;
using System.Data.SqlClient;
using System.Web.Security;
using System.Data;
using System.ComponentModel;

Paste following code into class
 protected void Page_Load(object sender, EventArgs e)

    {  

    }

    protected void Buttonlogin_Click(object sender, EventArgs e)

    {

        SqlConnection con = new      SqlConnection(ConfigurationManager.ConnectionStrings["LoginConnectionString"].ConnectionString);

           string s = "select * from UserDetails WHERE email = '" + txtUserName.Text + "'";

        SqlCommand com = new SqlCommand(s, con);

        con.Open();

        if (con.State == ConnectionState.Open)

        {

            SqlDataReader dtr;

            dtr = com.ExecuteReader();

            while (dtr.Read())

            {

                if (dtr["email"].ToString().Equals(txtUserName.Text) && dtr["password"].ToString().Equals(txtPassword.Text))

                {  
                     Session["uname"] = txtUserName.Text;

                    Response.Cookies["uname"].Value = txtUserName.Text;
                    Response.Cookies["pwd"].Value = txtUserName.Text;
                    string name = (string)dtr["Fname"];
                    Session["myname"] = name;
                    Response.Redirect("index.aspx");

                     }
                else
                {

                 Response.Redirect("login.aspx");
                }
             }
        }
    }
    protected void Button2_Click(object sender, EventArgs e)
    {
    }


Step 5: Html Code for index.aspx page


<!DOCTYPE html>

<html lang="en">

<head>

<title>Login</title>

</head>

<body id="page1">

Welcome&nbsp;&nbsp; 

    <asp:Label ID="lblName" runat="server" Text="Label" ForeColor="#990000"></asp:Label>



 &nbsp; 

 <asp:Image ID="Image1" runat="server" Height="141px" Width="120px" />

</body>

</html>


Step 6:  C# Code for index.aspx

Add some header files 

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

Paste following code into class
 protected void Page_Load(object sender, EventArgs e)

    {

        string username = (string)(Session["myname"]);

        if (Session["myname"] != null)

        {
       lblName.Text = username;

      SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["LoginConnectionString"].ConnectionString);

             string s = "select * from UserDetails WHERE email = '" + Session["uname"] + "'";

            SqlCommand com = new SqlCommand(s, con);

            con.Open();

            if (con.State == ConnectionState.Open)

            {

                SqlDataReader dtr;

                dtr = com.ExecuteReader();

                while (dtr.Read())

                {

                    string name = (string)dtr["Image"];

                    Image1.ImageUrl = Convert.ToString(name);
                  }
            }
        }
    }

Demo :



You can customize index page like this




  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
Email ThisBlogThis!Share to XShare to Facebook
Newer Post Older Post Home

2 comments:

  1. TestBlog5 November 2015 at 02:48

    Thank you sooooo much for the codes :) This is working and I'm extremely happy..... I was struggling with the database part finally I got the perfect solution your blogs are cool and way too helpful I have to say this now.

    ReplyDelete
    Replies
    1. Deepak Chaudhary14 February 2016 at 01:31

      Thanks !!

      Delete
      Replies
        Reply
    2. Reply
Add comment
Load more...

Most Popular posts

  • How To Create Image wipe Effect With CSS3 Webkit Animation
    Hi Friends... In this article we learn how to create a Image wipe effect with CSS3. CSS transition and animations provide a way for web de...
  • CSS 3D Cube
    Hi Friends... CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a lang...
  • CSS 3D Transforms
    Hi Friends... There is nothing more flashy and full with eye-candy than an impressive 3D CSS demo. Although its utility outside of demos ...

About Me

Deepak Chaudhary
View my complete profile

Copyright © C# Jadu | Powered by Blogger
Design by Deepak Chaudhary