ASP.NET Website Creating Steps And Coding

Create a WebSecurity Database  & Login :

• Create a WebSecurity database to hold user profiles and membership information
• Initialize WebSecurity in AppStart
• Add a membership registration page
• Add a member login page

The WebSecurity Object

The WebSecurity Object provides security and authentication for ASP.NET Web Pages applications.

With the WebSecurity object you can create user accounts, login and logout users, reset or change passwords, and more.

      We will create a new WebSecurity database to store user profiles, logins, passwords, and membership information.

     Select the Databases workspace in WebMatrix, and click "Add a database to your site" to create a new SQL Server Compact database.
Name the database "Users.sdf"
The database will be created in the App_Data folder of your web.

---

Create an AppStart Page

In the root of your web (the demo folder), create a new page named _AppStart.cshtml.
Put the following code inside the file:

_AppStart.cshtml

@{

WebSecurity.InitializeDatabaseConnection("Users", "UserProfile", "UserId", "Email", true);

}

The code above will be run each time your web site (application) starts. It initializes the WebSecurity database (Users.sdf), with user profile tables, if it is not already initialized.
"Users" is the name of the database.
"UserProfile" is the name of the database table that contains the user profile information.
"UserId" is the name of the (integer) column that contains the user IDs.
"Email" is the name of the (string) column that contains user names.
 true is a boolean value indicating that the user profile and membership tables should be created automatically if they don't exist. Otherwise set to false.

Edit The Style Sheet

In the "Shared" folder, edit your your style sheet (Site.css):
Add the following CSS code to the file:

Site.css

/* Forms --------------------*/

fieldset label

{

display:block;

padding:4px;

}

input[type="text"],input[type="password"]

{

width:300px;

}

input[type="submit"]

{

padding:4px;

Add a Registration Page

In the "Account" folder, create a new file named "Register.cshtml".
Put the following code inside the file:

Register.cshtml

@{// Initialize page

var email = "";

var password = "";

var confirmPassword = "";

var ErrorMessage = "";

// If this is a POST request, validate and process data

if (IsPost)

{

email = Request.Form["email"];

password = Request.Form["password"];

confirmPassword = Request.Form["confirmPassword"];

if (email.IsEmpty() || password.IsEmpty()) {

ErrorMessage = "You must specify both email and password.";}

if (password != confirmPassword) {

ErrorMessage = "Password and confirmation do not match.";}

// If all information is valid, create a new account

if (ErrorMessage=="")

{

var db = Database.Open("Users");

var user = db.QuerySingle("SELECT Email FROM UserProfile WHERE LOWER(Email) = LOWER(@0)", email);

if (user == null)

{

db.Execute("INSERT INTO UserProfile (Email) VALUES (@0)", email);

WebSecurity.CreateAccount(email, password, false);

// Navigate back to the homepage and exit

Response.Redirect("~/");

}

else {ErrorMessage = "Email address is already in use.";}

}

}

}

@if (ErrorMessage!="")

{

<p>@ErrorMessage</p>

<p>Please correct the errors and try again.</p>

}

<form method="post" action="">

<fieldset>

<legend>Sign-up Form</legend>

<ol>

<li>

<label>Email:</label>

<input type="text" id="email" name="email" />

</li>

<li>

<label>Password:</label>

<input type="password" id="password" name="password" />

</li>

<li>

<label>Confirm Password:</label>

<input type="password" id="confirmPassword" name="confirmPassword" />

</li>

<li>

<p><input type="submit" value="Register" /></p>

</li>

</ol>

</fieldset>

</form>

Add a Login Page

In the "Account" folder, create a new file named "Login.cshtml".
Put the following code inside the file:

Login.cshtml

@{// Initialize page

var username = "";

var password = "";

var ErrorMessage = "";

// If this is a POST request, validate and process data

if (IsPost)

{

username = Request.Form["username"];

password = Request.Form["password"];

if (username.IsEmpty() || password.IsEmpty())

{

ErrorMessage = "You must specify a username and password.";

}

else

{

// Login, Navigate back to the homepage and exit

if (WebSecurity.Login(username, password, false))

{Response.Redirect("~/");}

else

{ErrorMessage = "Login failed";}

}

}

}

@if (ErrorMessage!="") {

<p>@ErrorMessage</p>

<p>Please correct the errors and try again.</p>

}

<form method="post" action="">

<fieldset>

<legend>Log In to Your Account</legend>

<ol>

<li>

<label>Username:</label>

<input type="text" id="username" name="username" />

</li>

<li>

<label>Password:</label>

<input type="password" id="password" name="password" />

</li>

<li>

<p><input type="submit" value="login" /></p>

</li>

</ol>

</fieldset>

</form>

Edit the Navigation Menu

In the "Shared" folder, edit the layout file.
Put the following code inside the layout file:

Layout.cshtml

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" type="text/css" href="/Shared/Site.css" />

</head>

<body>

<ul id="menu">

<li><a href="/Default.cshtml">Home</a></li>

<li><a href="/ListProducts">Data</a></li>

<li><a href="/About">About</a></li>

<li><a href="/Account/Register">Register</a></li>
<li><a href="/Account/Login">Login</a></li>

</ul>

<div id="main">

@RenderBody()

<p>&copy; 2012 Website name. All rights reserved.</p>

</div>

</body>

</html>

---------------------------------------------------------------------------------

Displaying Data from Database

@{
var db = Database.Open("SmallBakery");
var query = "SELECT * FROM Product";
}
<html> 
<body> 
<h1>Small Bakery Products</h1> 
<table border="1" width="100%"> 
<tr>
<th>Id</th> 
<th>Product</th> 
<th>Description</th> 
<th>Price</th> 
</tr>
@foreach(var row in db.Query(query))
{
<tr> 
<td>@row.Id</td> 
<td>@row.Name</td> 
<td>@row.Description</td> 
<td align="right">@row.Price</td> 
</tr> 
}
</table> 
</body> 
</html>

OUTPUT:

Small Bakery Products

Id	Product	Description	Price
1	Bread	Baked fresh every day	2.99
2	Strawberry Cake	Made with organic strawberries	9.99
3	Apple Pie	Second only to your mom's pie	12.99
4	Pecan Pie	If you like pecans, this is for you	10.99
5	Lemon Pie	Made with the best lemons in the world	11.99
6	Cupcakes	Your kids will love these	9.99

------------------------------------------------------------------------------------------------------------

Add the Test Page to Your Application

<ul id="menu">

<li><a href="/Default">Home</a></li>

<li><a href="/ListProducts">Data</a></li>

<li><a href="/About">About</a></li>

</ul>

------------------------------------------------------------------------------------------------------------

Create a Style Sheet

h1

{

border-bottom: 3px solid #cc9900;

font: Georgia, serif;

color: #996600;

}

body

{

font: "Trebuchet MS", Verdana, sans-serif;

background-color: #5c87b2;

color: #696969;

}

#main

{

padding: 30px;

background-color: #ffffff;

border-radius: 4px;

}

------------------------------------------------------------------------------------------------------------