Tuesday, 11 June 2013

How to make Registration and Login Page in ASP.NET

How to make Registration and Login Page in ASP.NET

Hi Friends!Today i am going to make a Registration and Login Page.This is not a simple web form page.In this Form i have used many concepts.You can easily use this concept to any where in .NET Application. In this application i have covered all things which is required in various Registration and Login Form in any  website.I am really saying to you,if you run this application on your computer then you will feel how good it is.You can download this application from bottom and run on your visual studio.There are some controls which i have used in this application.
·                     ScriptManager(Ajax)
·                     UpdatePannel(Ajax)
·                     RequiredFieldValidator
·                     RegularExpressionValidator
·                     Captcha Image
·                     Session
·                     Text Box
·                     Label and Button
There are some steps to make this application.Please follow this.
Step 1: First open your visual studio->File->New->website->ASP.NET Empty website->click OK.->Now open Solution Explorer->Add New Item-> Web form-> click Add.
Step 2: Now make a Registration page like this,which is given below.
see it:
Description: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMiSgSsDSIXLYqRIxWaNKYKhw64PgH1i5xiCUrNRwPwSo9JmKhLF7UtL0LqmE5CIdWSxcpbmuYTmkZ2_H_t6vrlDKC-v6R0y7CMtDtYePUKke9hubfUY42hUKY5ZNUUJ8CobDs7Qazm48E/s640/Registration.PNG

Make this Registration Form in following ways:

·                     First put ScriptManager on your form.
·                     Create UserName-->Now put UpdatePanel-->Now put TextBox in UpdatePanel->Put RequiredFieldValidator.
·                     Password--> TextBox-->Now put RequiredFieldValidator.
·                     Retype Password-->TextBox-->Now put RequiredFieldValidator.
·                     Mobile Number-->TextBox-->Put RegularExpressionValidator &  RequiredFieldValidator
·                     Email Id -->TextBox-->Put RegularExpressionValidator and  RequiredFieldValidator.
·                     Captcha Image-->To know more Click here
·                     Enter Captcha Image-->TextBox-->Put Label and RequiredFieldValidator.
Now go propeties in every RegularExpressionValidator &  RequiredFieldValidator and set following fields which is given below:
Control To Validate -->Select TextBox which you want to validate. open this application on your visual studio and see all changes.This is more easy for you.
Step 3: Now Add Database(.mdf) on your website.Open Solution Explorer -->Right click on website-->Add New Item-->Sql Server Database-->click Add.

Now if you are facing problem in adding database(.mdf) on Website,please click here.
Step 4: Now Double click  on Database.mdf --> Solution Exporer will open-->Right click on Tables -->Add New Table-->Now Enter the column name.
see it:
Description: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTt1MjFO28z1Jp-att-6gBMIpQOX6REw-bjv2OfW9DZTZK7lENPEbtPly9B3W4iqbWq-uNEHNwp3nApUClj-wf8dyTqXR07ivaHQuC7yI8XUWV21MUd7L26SSRwwNRf9F-9YPSxchdt7s5/s640/regform.PNG

Step 5: Now double click on Submit Button and write the following code which is given below:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Drawing;

public partial class _Default : System.Web.UI.Page
{
    protected void TextBox1_TextChanged(object sender, EventArgs e)
    { 
        SqlConnection con = new SqlConnection(@"Data Source=.\;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True;");
        con.Open();
        SqlCommand cmd = new SqlCommand("select*from regform where username='" + TextBox1.Text + "'", con);
        SqlDataReader dr = cmd.ExecuteReader();

        if (dr.Read())
        {
            Label1.Text = "User Name is Already Exist";
            this.Label1.ForeColor = Color.Red;
        }
        else
        {
            Label1.Text = "UserName is Available";
            this.Label1.ForeColor = Color.Red;
        }
        con.Close();
    }
    protected void  Button1_Click(object sender, EventArgs e)
{
    captcha1.ValidateCaptcha(TextBox6.Text.Trim());
    if (captcha1.UserValidated)
    {   //you can use disconnected architecture also,here i have used connected architecture.
        SqlConnection con = new SqlConnection(@"Data Source=.\;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True;");
        con.Open();
        String str = "insert into regform values('" + TextBox1.Text + "','" + TextBox2.Text + "','" + TextBox4.Text + "','" + TextBox5.Text + "')";
        SqlCommand cmd = new SqlCommand(str, con);
        cmd.ExecuteNonQuery();

        Session["name"] = TextBox1.Text;
        Response.Redirect("default.aspx");
        con.Close();
    }
    else
    {
 Label2.ForeColor = System.Drawing.Color.Red;
 Label2.Text = "You have Entered InValid Captcha Characters please Enter again";
  }    
 }  
 }

Step 6: Now create a New page and make a Login form which is give below:
see it:
Description: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGpRwi0lODSC6MuJ2jIEb77VSW_VXPFxcl2XDFURtzJHwvBHYWzJACwmZ_PomirF69t-mCP3gkBPQPI4Vo8LgL4y6TC9YwVpo6bEVNp2zs1OZ6gcqs5zcEhCYQX8n93e8C1IHqHVKHS3m8/s1600/login.PNG
Note->In this application  all (* )represents the Label control.
Step 7: Now Double click on Login Button and write the following codes which is given below:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Drawing;

public partial class login : System.Web.UI.Page
{
    protected void Button1_Click(object sender, EventArgs e)
    {
        SqlConnection con = new SqlConnection(@"Data Source=.\;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True;");
        con.Open();
        SqlCommand cmd = new SqlCommand("select COUNT(*)FROM regform WHERE username='"+ TextBox1.Text + "' and password='" + TextBox2.Text + "'");
        cmd.Connection = con;
        int OBJ = Convert.ToInt32(cmd.ExecuteScalar());
        if (OBJ > 0)
        {
            Session["name"] = TextBox1.Text;
            Response.Redirect("default.aspx");
        }
        else
        {
            Label1.Text = "Invalid username or password";
            this.Label1.ForeColor = Color.Red;
        }
    }
    protected void LinkButton2_Click(object sender, EventArgs e)
    {
        Response.Redirect("Registration.aspx");
    }
}

Step
 8: Now Create a another page (Default.aspx)which is given below:
see it:
Description: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMxFFAyklCYYrowqITnLna3fo52tnU35vf_xEK_Xrc_gdJ4ucPhTm3sC0-cTz21zwE97EqAdFr5xgbb3NBJqYh6HaO9Q3jrBXi6UJse18pi23CTAbj2p2tM656DPI0enwrxqZHmDUAabjK/s1600/last+page.PNG

Step
 9: Now Double click on Page and write the following codes  on Page load which is given below:
?
1
2
3
4
5
6
7
8
9
10
11
12
using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Label1.Text = Session["name"].ToString();
    }
}

Step 10: Now Run the program(Press F5).
see it:
Description: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDQ4UyYiv9APibyCT1yzV2hE6EgpoEaUkaVjdrnNF2lKk9tbtiK8zuqYb9zyy3TGNYOXop3XbZ9rRjdsf2r2ChFUg-EUbRfAtBP1-c4UJ1bfnjDuyBB808S1USqnJN-KRl-qWRlwRb98A0/s1600/homepage.PNG

There are some points to see the Exact output of whole application.
     1. If you are not part of this application then click New User Button.
   see it:
   
Description: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-gUCnYfI7kD-Hb8dFnBkay7_7PmeFoKXKKbApzKHZVjCICSOGzF8NC7cjqzwiVdsTIJiupvYIQnWQBL_bCFsIipIKZA3vlZwOwNN4eFdM1gwSCcaHuzcNaNpQtuM8mp6HGmIYYtj1DGzc/s1600/regpage.PNG

     2. When you will Enter UserName then this user name will check from database.if this name is available then it will show User Name is available otherwise show User Name is Already Exist.
  see it:

Description: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh654vr6vK7bA9mYdAt5Bv0J7o3HQjPlnMZDzj56GHbBDKHYEL7mp1hODmHn6Y4rzuOIMwIdXezn2acvWWKNG-hzPpmuNRLMoH_iQvSYCmGz0byT__54nG5beSQQ0BLUQLSv-nZ13oM0fnT/s320/username.PNG

     3.  when you will Enter Password & ReType Password  Field ,if both Password are not matched then see it:

Description: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2SqwB0dlcUEeGuWZQu0HXzPuhzXBaNC5fUWZV4dog2Wpr31EsvHqIn3EN-Mi8RuVqDzudle9Yry9tl1JAmvWukEhv0xV0uPE7JOLgVWOQD0ZnbtrKk9l7RPmlgk512_FbOeltmQJ0Nj8l/s1600/password.PNG
    
      4. when you will Enter Mobile Number Field ,if Number is Not correct (according to India).you will see following output:
  
Description: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBqyg3nRzWevt3eF_Zm3Nr-XgZYqjAFSP93Sd3EQjykw3CYxSRN8W7gP2cYmTakNoLMss8hyphenhyphenktuqjG6MoKs8UXeHP9hArE0S3kNXuuWrlnglCP2obDpcWq7wWR06wimFg6hL-7piSnWA9w/s320/mobile.PNG
  
      5. If you will Enter Email Id Field and Email is not correct format then you will see following error.

Description: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip3HgpmlklStWlc2aPWqexwNLejaoEZU7QKoFIxY-Y76rERSkDyysdzC_iCD_RtDNHyD0hAf5XFEF9CMwSvSOwt9JyvCq1dgBTnez8Nx7GWN-kEJKMVrBRPEnQPDWW10B0Y6shansqZQV-/s1600/email.PNG

     6.when  you will enter wrong Captcha code then you will see following output:

  
Description: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZZedE6rX0H5dDKOlZ0-b2m8jMGtHJCsxnxpWhsjzWwL1IE1bv92tQkf44mu7YIK80NIRm2P2Cs0TtVQQgQDQb8zuD4XyxbrgVpLgoyJ-WG0MOiKApxGTSp9aygi9TQ_tHyCzgRVCqv3gU/s640/CAPTCHA.PNG

     7. When you will enter all fields in Registration page correct then you will see following output:
  
Description: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhadOsBj3dNecz367HsdptorDfdMePg8niCFYVzAlNoEYZwhM2FrvKq6M3-_Da955cORB9CU7dpv5tIuOMZXCj4-DljnZej8g7YkM6rPF858YCU9g9Z73w1WkmQLd2O7XOeahK7K7EO5k8p/s1600/output.PNG
 Step 11: Now you will see Rajesh has  entered Database(.mdf).
see student table:

Description: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo2sjc2QlweWvrQiM6ufEGGiAL08bZ_PAAgwJVshbIq7b5Scg9zh2Psm2GaZ-gvcY__1wvDbwiQRxpN8slVyDMwK1TTVF2GsKBlvWV_wD7XWmkSPes4x9N6JVV5EhS8GgwJB4ZkP-P_kIP/s1600/database+entery.PNG

  
   Step 12: Now you can directly Login  with correct Login Name and Password,which is present in Database(.mdf).
see it:
Description: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiECM4ltAZfmF2-0Ahrqk4DG5eYKZzdhVaQqwvaWQQ13XWj4IkCtok1BeZjboYsuUB9sn0njQ0FHpUAzAa5i3p8X-ztWN8wzwM9m0bFxE7NnnEf4xN6Q-vQ6Zo8VsFsPzA_7cszm18VDQJL/s1600/direct+login.PNG

see output:-


Description: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO1hdBgumJHj7pPcCYqIe1Mx3ldPZHcumdzxd5L1eRBn9tSd3fKH4xW0iYSHw7xZCJPDxIinqTwyFog9ClvSwa9fomo5KXqGI4d0qXT7O5qQum_ajmHdVrrsZbQm-ayIXWXM7n1xUEuA_O/s1600/output1.PNG

Note- If you want to run this application on your system  without any changes then follow these two steps which is given below:

1.                   First download this application form bottom and open this application to your visual studio 2010.
2.                  Now go Tools -->Options -->Database Tools -->Data connections -->Remove Sql Server Instance Name(blank for default) from right hand side-->click OK.
Then you can easily Run this Application without any problem.
 I hope this helpful for you.
If any problem please comment it.I will solve as soon as possible.


1 comment:

  1. • Thanks for the informative blog, Needed it! You did a great job. Keep going.
    You can also visit:
    BULK SMS SERVICE FOR REAL ESTATE
    SMS SERVICE FOR SCHOOL
    bulk sms pack

    ReplyDelete