In this tutorial i will show you how you can control a home page content based
website.

What we will be doing is instead of having our content programaticly filled in,
it will be filled using a database.

Creating The Database

• Fire up Visual Studio 2010 or Visual Web Developer 2010
• Create a ASP.NET Website NOT a ASP.NET Blank Website
• Once your project has been created right click on App_Data folder -> Add New
  Item
• Select SQL Server Database
• Give it a name than click Add
• Right click on Tables and choose Add New Table (Figure 1.0)
• 

  Figure 1.0

• You should see 3 Columns now (Column Name, Data Types and Allow Nulls)
• Fill out the columns as they are shown in the table below
• 1) IS 2)PK
  • Identity Specification = Yes
  • Primary Key

• Once you have this complete click the Purple save disk at the top
• Give your table a name, i named mine aspx_Content
• Close the window than click on the Tables folder to expand (Figure 1.1)
• 
• Right click on your new table and choose Show Table Data
• Insert a sample record in to the Caption and Content field than close it out

Now that we have completed the Database set up it’s time to create the content
section on the home page of our website.

Creating Content Section

• From your Default.aspx page drag a DataList control from the Toolbox in the Data
  section on to your form
• Click the little arrow that appears on the DataList control to get the Smart
  Task
• From the Data Source drop down list choose <New data source…>
• Click on Database (Figure 1.2)
• 
• Click Ok
• In the next dialog from the Drop down list box choose your database from the
  list and click Next
• In the next window (Select Statements) leave the * radio box checked as this is
  the Wild card and will select all fields
• Click the Order button (Optional) and you can choose which field you want to
  Order By.
• Click Next than click Finish

You should now see your DataList on your form populated (Figure 1.3)

If you press F5 on your keyboard or click the little Green Play Button to run
your site you should now see 1 record (The record you inserted manualy)

Now that we have our home page completed by displaying our content lets create
the Admin section of our website where we can add Edit our content.

Note that we are only going to work on the Edit functionality because if we want
to modify our content we can just modify it.

Adding new entries would be useful for blog posts, news posts, site update posts
etc.

Creating The Admin Section

• In your Solution Explorer, right click and choose New Folder
• Name it something like Admin
• Right click on the Folder and click Add New Item
• Choose Web Form
• Name it Edit_Content.aspx and click Add

Adding Content Functionality

• From your Toolbox drag and drop a FormView control on to your form
• Repeat the steps above highlighted in the Green
• After you followed those steps you want to click the Advanced button
• Select both check boxes

  This allows you to add, modify and delete records

• Click Next than Finish
• With the FormView selected go in to your properties window (Figure 1.4)
• Choose Default Mode from Read Only to Edit
• 
• Now that you have set this when you run this page this will always display in
  Edit Mode.
• With the FormView still selected click the little Arrow to pull up the FormView
  Tasks option
• Click Edit Templates
• From the Display: combo box change it from ItemDisplay to InsertItemDisplay
• You should now see 2 text boxes.

You can format these fields in which ever way you want.

How you format these fields is how they will be displayed at runtime

This is a short tutorial on how you can make your site content run off your
database.

The advantage to something like this is the ability to change your content as
often as you want without having to programaticly change it.

Here’s a comparison of Programaticly Inserting Content to Data Inserting Content

As you see there are the same number of tasks to do however if we take a look at
how many seconds to minutes each task takes will make up, inserting content
programaticly will take longer by far.

Well, this concludes this tutorial.

I hope it has helped you in some way.

This tutorial was created to display how you can create your home page content
using a database and how you could change your home page content at any time
from your Admin Panel.

Thank You for viewing this tutorial.

View Full Size

There are 2 styles we are going to look at

1. Drop Shadow
2. Rounded Corners

This will not be done using any images, it’s going to be CSS3.

Note! These styles will not be picked up in the current or previous versions of Internet Explorer 8.0
When applying any CSS3 styles to your web apps, make sure those items can be displayed correctly in internet explorer as well.
The image you see above will be displayed in IE without the drop shadow and rounded corners.

With all that out of the way, lets get started.

• Fire up Visual Web Developer 2010 or Visual Studio 2010
• Create a new project or a new Website (Shown in Screen 1.1

• Once your website has been created navigate to
  • Styles -> Site.css and double click it to open it.
• There are 2 css classes we need to modify
  1. page
  2. header
• Scroll down to the page class (it should look like this:


.page
{
width: 960px;
background-color: #fff;
margin: 20px auto 0px auto;
border: 1px solid #496077;
}


• Under the border:  1px solid #496077; add these 4 lines

-moz-border-radius: 12px;
-webkit-border-radius: 12px;
-moz-box-shadow: 15px -15px 9px #333;
-webkit-box-shadow: 15px 15px 9 #333;
-moz is mozilla based web browser and -webkit is safari, chrome based browsers

• Scroll down to the header class (it should look like this:)


.header
{
position: relative;
margin: 0px;
padding: 0px;
background: #4b6c9e;
width: 100%;
}

• Under the background: #4b6c9e; add these 2 lines

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
You may need to adjust the 10px to a lower or higher number to look the way you want it to.
Now if you save your Site.css file and view your default page or some other page in a browser outside of IE you should now see the changes take effect.

The page class is the page itself where everything is located (menu, content area, footer etc.)
That’s where we want the drop shadow to appear as well as the rounded corners.
Here’s the comparison in browsers between Firefox and IE

Firefox 3.6.3

Internet Explorer 8.0

To get more information and more goodies using css3 visit the css3.info website.
You can apply more styles to your website to make it look much nicer.
Hopefully this tutorial has helped in spicing up your website.

Visual Controls

If you take a look in your Toolbox, you will notice a Login section.
This is where all your login controls are stored.

Login Controls

These are the controls that allow you to run a standard membership based website.
Don’t be fooled by this by thinking this is all that’s offered for our membership system cause it’s not.
There’s a ASP.NET Configuration Tool that’s available for us that lets us do a lot more, we will get into that later on.
Lets take a look at these controls and see what they do

Change Password

When you drag a instance of the ChangePassword control onto your form it will create a template with the appropriate fields that will change your password on request

Change Password

Create User Wizard

When you drag a instance of the CreateUserWizard on to your form it will create a template with the appropriate registration fields.
There are several customizable options that are available for this control.
If you click on the little Arrow at the top right corner of the control you will see a list of customizations you can make.

Create User Wizard

Login

This control is the user Login section.
This control provides the standard User Name and Password fields.

Login

Login Name

When you drag a instance of the LoginName on to your form it will display the current logged in User Name.
This kind of control can be used several times on any given page.
When you drag it on to your form you will see something that looks like this

[LoginName]

Login Status

When you drag a instance of the LoginStatus on to your form it will display your status.
You can click on the control on the form and click the Arrow, you will notice you have 2 views

1. Logged Out
2. Logged In

What you see is what the user will see when they visit your website.
If you click on the links and check out the properties window, you can set properties for that control.

Login Status Properties

Login View

This is a important control when enabling your site with the membership system.
The LoginView control comes with 2 templates

1. Anonymous Template
2. Logged In Template

By default, when you drag this on to your form it’s set to the Anonymous Template.
Anything you put in here will be viewable to users NOT logged in
If you switch to the Logged In Template, anything you put in here will be viewable to Logged in users only.
You can use many of  these controls on any given web page.
This allows you to protect your content and control who can and can’t see certain content within your website.

Not Logged In

Password Recovery

Like the other controls i talked about, this one works the same way.
When you drag a PasswordRecovery control on to your page it will create a wizard like control.
This allows you to recover your password providing the security question is answered correctly.

Password Recovery

Visual Controls In Source Code

If you prefer to code as much as you can in Source View mode than adding these controls are easy.
I will show you the code that makes up each of these controls.
If you have dragged any of the above controls on to your form and you switched to Source or Code view than some of these will look familiar.

Change Password

<asp:ChangePassword ID=”ChangePassword1″ runat=”server”>
</asp:ChangePassword>

Create User Wizard

<asp:CreateUserWizard ID=”CreateUserWizard1″ runat=”server”>
<WizardSteps>
<asp:CreateUserWizardStep runat=”server” />
<asp:CompleteWizardStep runat=”server” />
</WizardSteps>
</asp:CreateUserWizard>

Login

<asp:Login ID=”Login1″ runat=”server”>
</asp:Login>

Login Name

<asp:LoginName ID=”Loginname1″ runat=”server” />

Login Status

<asp:LoginStatus ID=”LoginStatus1″ runat=”server” />

Login View

<asp:LoginView ID=”LoginView1″ runat=”server”>
<AnonymousTemplate>

</AnonymousTemplate>
<LoggedInTemplate>

</LoggedInTemplate>
</asp:LoginView>

Password Recovery

<asp:PasswordRecovery ID=”PasswordRecovery2″ runat=”server”>
</asp:PasswordRecovery>

So you can see how easy it is to add these controls to your webform easily.
After adding in your code and going back to Design Mode, you will see the control sitting on your form.
You can click on it to access the properties for that control.

If you used VS2010 and created a asp.net blank website you will need to add these controls to the pages than configure the site to use the memebrship system.
You can access the asp.net configuration tool by going to your Solution Explorer.
Located to the top are some icons, click the globe and hammer icon.
This will open your asp.net configuration tool via web browser.

If you create a asp.net website a default site will be created with all the login controls added, pages created that hold some of these controls and the asp.net configuration tool is already configured.
All you have to do now is press F5 or right click and choose View In Browser.
You will now be able to register, login etc.

This tutorial was focused on the login control inside Visual Studio 2010.
The controls are also available in 2005 and 2008 as well as Visual Web Developer.
This tutorial does not focus on the asp.net configuration tool.