Registering in a web site

Registering in a web site

This is simply where you give your information to a particular website. This means you fill out a form and submit through that sight.

Next step is where the administrator of the web site will view your personal details and Active your account or not.

So you need to have a simple form to do it.

Database and Table

I have created a Database and created only 1 Table to explain all the concepts that I have used to this project.

You can also go to below links for detailed information but this tutorial is pretty much detailed for your purpose.

1. Connecting to Sql Server
2. Insert Data to Table through Form Using ASP.NET

Created a Table Named "UserData".

Columns

UserID - bigint
Username - varchar(50)
Password - varchar(50)
FName - varchar(50)
Email - Varchar(50)
Status - Varchar(50)

In this table I did not use any Encryption for password.

UserID Colo

I have given "UserID" as primary key with data type "bigint". Also it is auto incremented. If you wish you can give user name as primary key without using "userID".

Next I have set the Default value of status to "Disable". So that when inserting the data default status will be set to "Disable". Administrator can change it to Enable through his access.

Status Column

Next I have created a stored procedure to insert data to the table. Make sure First you create as "CREATE PROCEDURE" which will automatically changed to "ALTER PROCEDURE"

Code Snippet - insertUserData

1. ALTER PROCEDURE dbo.insertUserData
2. (
3.     @UserName varchar(50),
4.     @Password varchar(50),
5.     @FName varchar(50),
6.     @Email varchar(50)
7.     )
8. AS
9.     INSERT UserData
10.         (
11.         UserName,
12.         Password,
13.         FName,
14.         Email
15.         
16.     
17.         )
18.  
19.     VALUES
20.         (
21.         @UserName,
22.         @Password,
23.         @FName,
24.         @Email
25.         
26.         )        
27.  
28.     RETURN

Next is to connect to the database and write a class to insert the data.

As usual I have create a class for database connection and a class for User.

App_Code Folder

Connection to the database

Code Snippet - ConnectionManger.cs

1. using System;
2. using System.Data;
3. using System.Configuration;
4. using System.Linq;
5. using System.Web;
6. using System.Web.Security;
7. using System.Web.UI;
8. using System.Web.UI.HtmlControls;
9. using System.Web.UI.WebControls;
10. using System.Web.UI.WebControls.WebParts;
11. using System.Xml.Linq;
12.  
13. using System.Data.SqlClient;
14.  
15.  
16. public class ConnectionManager
17. {
18.     public static SqlConnection GetDatabaseConnection()
19.     {
20.         string connectString = "Data Source=.\\SQLEXPRESS;Initial Catalog=RegAndLogin;Integrated Security=True";
21.         SqlConnection connection = new SqlConnection(connectString);
22.  
23.         connection.Open();
24.         return connection;
25.     }
26. }

"RegisterUser" Class

For this section I have only shown 2 methods because they are the only needed for this section.

"InsertUserData" Method is used to insert the data.

"IsUserNameExist" is to check the availability of the User Name.

Code Snippet

1. using System;
2. using System.Data;
3. using System.Configuration;
4. using System.Linq;
5. using System.Web;
6. using System.Web.Security;
7. using System.Web.UI;
8. using System.Web.UI.HtmlControls;
9. using System.Web.UI.WebControls;
10. using System.Web.UI.WebControls.WebParts;
11. using System.Xml.Linq;
12.  
13. using System.Data.SqlClient;
14.  
15. public class RegisterUser
16. {
17.  
18.  
19.     public static int InsertUserData(string Name, string UserName, string Password, stringEmail)
20.     {
21.         int rowsAffected = 0;
22.  
23.         using (SqlConnection connection = ConnectionManager.GetDatabaseConnection())
24.         {
25.             SqlCommand command = new SqlCommand("insertUserData", connection);
26.             command.CommandType = CommandType.StoredProcedure;
27.  
28.             command.Parameters.Add("@FName", SqlDbType.VarChar).Value = Name;
29.             command.Parameters.Add("@UserName", SqlDbType.VarChar).Value = UserName;
30.             command.Parameters.Add("@Password", SqlDbType.VarChar).Value = Password;
31.             command.Parameters.Add("@Email", SqlDbType.VarChar).Value = Email;
32.  
33.  
34.             rowsAffected = command.ExecuteNonQuery();
35.         }
36.         return rowsAffected;
37.     }
38.  
39.  
40.     public static DataSet IsUserNameExist(string UserName)
41.     {
42.         DataSet dataSet = new DataSet();
43.  
44.         using (SqlConnection connection = ConnectionManager.GetDatabaseConnection())
45.         {
46.  
47.             string sql = "SELECT UserName FROM UserData WHERE UserName = @UserName";
48.             SqlCommand command = new SqlCommand(sql, connection);
49.             command.Parameters.Add("@UserName", SqlDbType.VarChar).Value = UserName;
50.             command.CommandType = CommandType.Text;
51.  
52.            SqlDataAdapter dataAdapter = new SqlDataAdapter(command);
53.            dataAdapter.Fill(dataSet, "UserName");
54.  
55.         }
56.  
57.         return dataSet;
58.     }
59. }

That is all about Database Layer and how the steps to access the database.

Next is the GUI. So we need to have a Form to enter our information. I have created a form as below.

Form

Overview of this form and fields

Name - Enter you Name

User Name -  You will be entering a preferred name. To check the User Name Availability I have used AJAX.

Check User Name Availability
Check User Name Availability while typing

Password - Enter a preferred password, added a ajax control tool kit to check the password strength.

Confirm Password - Retype the password correctly. Compared Validator is used to check the retype password is valid.

E-mail Address -  Enter you E-Mail address. You may use Regular expression Validator to ensure the password is in the correct format.

Register Button -  You submit your information.

Code Snippet - "Registerpage.aspx"

1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="RegisterPage.aspx.cs"Inherits="RegisterPage" %>
2.  
3. <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
4.  
5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
6.  
7. <html xmlns="http://www.w3.org/1999/xhtml">
8. <head runat="server">
9.     <title></title>
10.    
11. </head>
12. <body>
13.     <form id="form1" runat="server">
14.     <table style="width:50%;">
15.         <tr>
16.             <td colspan="3">
17.                 <asp:Label ID="Label1" runat="server" Text="Sign up to our web site"></asp:Label>
18.             </td>
19.         </tr>
20.         <tr>
21.             <td>
22.                 &nbsp;</td>
23.             <td>
24.                 &nbsp;</td>
25.             <td>
26.                 &nbsp;</td>
27.         </tr>
28.         <tr>
29.             <td>
30.                 <asp:Label ID="Label2" runat="server" Text="Name"></asp:Label>
31.             </td>
32.             <td>
33.                 <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
34.             </td>
35.             <td>
36.                 &nbsp;</td>
37.         </tr>
38.         <tr>
39.             <td>
40.                 <asp:Label ID="Label3" runat="server" Text="User Name"></asp:Label>
41.             </td>
42.             <td>
43.                 <asp:TextBox ID="TextBox2" runat="server" ontextchanged="TextBox2_TextChanged"AutoPostBack="true" ></asp:TextBox>
44.                 <asp:Label ID="Label7" runat="server"></asp:Label>
45.             </td>
46.             <td>
47.                 &nbsp;</td>
48.         </tr>
49.         <tr>
50.             <td>
51.                 <asp:Label ID="Label4" runat="server" Text="Password"></asp:Label>
52.             </td>
53.             <td>
54.                 <asp:TextBox ID="TextBox3" runat="server" TextMode="Password"></asp:TextBox>
55.                 <asp:PasswordStrength ID="TextBox3_PasswordStrength" runat="server"
56.                     Enabled="True" TargetControlID="TextBox3">
57.                 </asp:PasswordStrength>
58.             </td>
59.             <td>
60.                 &nbsp;</td>
61.         </tr>
62.         <tr>
63.             <td>
64.                 <asp:Label ID="Label5" runat="server" Text="Confirm Password"></asp:Label>
65.             </td>
66.             <td>
67.                 <asp:TextBox ID="TextBox4" runat="server" TextMode="Password"></asp:TextBox>
68.  
69.                 <asp:ScriptManager ID="ScriptManager1" runat="server">
70.                 </asp:ScriptManager>
71.  
72.                 <asp:CompareValidator ID="CompareValidator1" runat="server"
73.                     ControlToCompare="TextBox3" ControlToValidate="TextBox4"
74.                     ErrorMessage="Your Password Did not Match" ForeColor="Red"></asp:CompareValidator>
75.  
76.             </td>
77.             <td>
78.                 &nbsp;</td>
79.         </tr>
80.         <tr>
81.             <td>
82.                 <asp:Label ID="Label6" runat="server" Text="E-Mail Address"></asp:Label>
83.             </td>
84.             <td>
85.                 <asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
86.             </td>
87.             <td>
88.                 &nbsp;</td>
89.         </tr>
90.         <tr>
91.             <td>
92.                 <asp:Button ID="Button1" runat="server" Text="Register"
93.                     onclick="Button1_Click" />
94.             </td>
95.             <td>
96.                 <asp:Label ID="Label8" runat="server"></asp:Label>
97.             </td>
98.             <td>
99.                 &nbsp;</td>
100.         </tr>
101.     </table>
102.     </form>
103. </body>
104. </html>

Next is the code behind this ".aspx" page. 

Code Snippet

1. using System;
2. using System.Data;
3. using System.Configuration;
4. using System.Linq;
5. using System.Web;
6. using System.Web.Security;
7. using System.Web.UI;
8. using System.Web.UI.HtmlControls;
9. using System.Web.UI.WebControls;
10. using System.Web.UI.WebControls.WebParts;
11. using System.Xml.Linq;
12.  
13. using System.Data.SqlClient;
14.  
15.  
16. public partial class RegisterPage : System.Web.UI.Page
17. {
18.     protected void Button1_Click(object sender, EventArgs e)
19.     {
20.         string Name = (string)TextBox1.Text;
21.         string UserName = (string)TextBox2.Text;
22.         string Password = (string)TextBox4.Text;
23.         string Email = (string)TextBox5.Text;
24.  
25.         RegisterUser.InsertUserData(Name, UserName, Password, Email);
26.  
27.         Label8.Text = "Thank you Registering. You will be notified when your account is activated.";
28.  
29.     }
30.     protected void TextBox2_TextChanged(object sender, EventArgs e)
31.     {
32.         string UserName = TextBox2.Text;
33.  
34.         string UserNameDb = null;
35.  
36.         DataSet dataSet1 = RegisterUser.IsUserNameExist(UserName);
37.  
38.         foreach (DataRow row in dataSet1.Tables["UserName"].Rows)
39.         {
40.             UserNameDb = string.Format("{0}", row["UserName"]);
41.         }
42.  
43.         if (UserNameDb != null)
44.         {
45.             Label7.Text = "User Name is already taken";
46.             Label7.ForeColor = System.Drawing.Color.Red;
47.         }
48.         else
49.         {
50.             Label7.Text = "User Name is Available";
51.             Label7.ForeColor = System.Drawing.Color.Green;
52.         }
53.     }
54. }

"Button1_Click" is used to insert the data into the table. When inserting you can send an E-Mail to administrator.

Go to below and implement inside your "Button1_Click" method.

Sending E- Mails in ASP.NET - Acknowledgement  E-mail
Sending E- Mails in ASP.NET - Feedback E-mail

"TextBox2_TextChanged" method is implemented to check the user availability.

So this is it!!!!! Next we will move on how the admin and the log in page will look like and the implementation of functionality.

Demonstration