Corporate Site Starter Kit with CMS for ASP.NET 2.0

This is a showcase review for our sponsors at CodeProject. These reviews are intended to provide you with information on products and services that we consider useful and of value to developers.

• Download the Corporate Site Starter Kit for ASP.NET 2.0

ASP.NET 2.0 and Visual Studio 2005 make web site development dramatically easier. If you combine their power with a flexible content management system, you get an incredible set of tools for creating professional web sites.

The Corporate Site Starter Kit uses Kentico CMS for ASP.NET, an open content management solution for .NET developers. This article will show you how you can customize the Starter Kit, create new content and develop a custom page template. You will need Visual Studio 2005 or Visual Web Developer 2005 Express Edition and Microsoft SQL Server 2000 or 2005.

Installing the Starter Kit

Download the Starter Kit from http://www.kentico.com/cmsstarterkit.aspx, unpack the ZIP file to your disk and open the solution in Visual Studio 2005 (or Visual Web Developer) using the CorporateSite.sln file. Run the project and you will be asked for creating a Microsoft SQL Server database. After you create the database, you will see the default web site like this:

Modifying the Default Content

Now we will sign in to the administration interface and create a new page. Follow the "Click here to sign in" link at the top of the page and sign in as administrator (the password is blank by default). Click Content in the main menu, click the Services page in the left tree view and click New in the main toolbar. Choose to create a new Page (Menu Item) and enter the following values:

• Caption: Web Design
• Order: leave empty
• Type: Page Template
• Page Template: click Select... and choose Simple Text with Left Menu
• Page Title, Page Description, Page Keywords: leave empty
• Show in Site Map: checked
• Hide in Navigation: unchecked

Click OK to create the page. Click Site in the main toolbar. Enter some text in the editable regions and save changes using the Save page link.

After you sign out, you will see the changes published on your live web site. You have used a built-in page template to create a new page. The page template specifies what should be displayed and it contains the editable regions. When you create a new page you only use this template and fill in the editable regions.

You could also set up a workflow process so that the changes must be approved before going live, but we will skip this feature for now � you can find more details on this in Kentico CMS Tutorial later.

Applying Your Design

The default design is really a very simple example. You can create basically any site structure, design or layout. You can find more than 50 different live web sites built with Kentico CMS at http://www.kentico.com/showcase.aspx.

There are several places where you can modify the design:

• the main.css file
• the master page MainMenu.master (it contains the logo and main menu)
• the page templates, such as default.aspx or SimpleText.aspx (they define the layout and content of web site pages)

Let�s start by modifying the site header. You may want to place your logo on the right and use a different background:

• Open the MainMenu.master file in your Visual Studio project, locate the <table> element with class logoArea and move its second column (<td> element) before the first one.
• Open the main.css file, locate the .logoArea style and change it like this:

  .logoArea
  {
      width: 800px;    
      background-image: url(images/title2.gif);
      background-repeat: no-repeat;    
      color: White;
      height: 200px;
  }        

Save both files and refresh the web site page. You will see a page like this:

Creating Your Own Page Template

The Corporate Site Starter Kit contains several page templates. Now you will learn how to create a new one. Add a new ASPX page to your web project in Visual Studio and call it LeftMenuTwoColumns.aspx.

Switch to the Source mode and remove all lines except the first one containing the <%@ Page ... %> directive. Add the following attribute to the <%@ Page %> directive:

MasterPageFile="~/MainMenu.master"

It will ensure displaying the logo and the main menu. Put the following text under the Page directive:

<asp:Content ID="content1" runat="server" ContentPlaceHolderID="MainContent">
<table width="100%" ID="Table4">
<tr valign="top">
<td style="width:200px"></td>
<td></td>
<td style="width:200px"></td>
</tr>
</table>
</asp:Content>

Switch to the Design mode. Now we will use the built-in Kentico CMS Controls to define the left menu and editable regions. Right-click the Toolbox window in Visual Studio, add a new tab and call it CMS. Right-click the tab and click Choose items..., click Browse... and locate the Kentico.CMS.Controls.dll library in the bin directory of the web project. Click OK to add it to your toolbox.

Drag and drop the following controls from the Toolbox on the page and set their properties:

CMSTreeMenu (to the left column of the table)

• ID: LeftMenu

CMSEditableRegion (to the middle column of the table)

• ID: MiddleRegion
• RegionTitle: Main Text
• RegionType: Html Editor
• HtmlToolbarSet: Basic
• DialogHeight: 300px
• DialogWidth: 390

CMSEditableRegion (to the right column of the table)

• ID: RightRegion
• RegionTitle: Right Column
• RegionType: Html Editor
• HtmlToolbarSet: Basic
• DialogHeight: 300
• DialogWidth: 190

You will see a page like this in Visual Studio:

Double-click the page (in the white area) and add the following code to the Page_Load method:

[C#]

LeftMenu.SelectNodesPath = 
  CorporateSite.Functions.GetPathLevel(CorporateSite.Functions.GetAliasPath(), 1) 
  + "/%";

[VB.NET]

LeftMenu.SelectNodesPath = _
  CorporateSite.Functions.GetPathLevel(CorporateSite.Functions.GetAliasPath, 1) _
  & "/%"

It will ensure that the menu control displays the submenu instead of the main menu (it will start under the first menu level).

Now we will register the new page template in Kentico CMS so that the editors can use it. Compile and run the project and sign in to Kentico CMS Desk. Go to Development -> Page Templates and click the New button in the main toolbar to register a new page template. Enter the following values:

• Page Template Name: Left menu, two columns
• Page Template File Name: LeftMenuTwoColumns.aspx
• Page Template Description: Page with tree menu on the left, middle text and right column.

Now we can create a new page based on this template. Go to the Content section of Kentico CMS Desk and click the Services page in the left tree view. Click New and choose to create a new Page (Menu Item). Enter the following values:

• Caption: Web Development
• Order: leave empty
• Type: Page Template
• Page Template: click Select... and choose Left menu, two columns
• Page Title, Page Description, Page Keywords: leave empty
• Show in Site Map: checked
• Hide in Navigation: unchecked

Click OK to save the page and click the Site button in the main toolbar. Now you can edit the content of the editable regions:

Enter some text and click Save page to save changes. Click the Published version radio button in the header to see the new page on the live web site.

You have just created a standard ASPX page that is used as a page template. You have created a new page based on this template. Easy, wasn�t it? Of course, there are many other development topics to be covered � you can find then in Kentico CMS Tutorial.

Deploying the Web Site to the Live Server

The deployment to the live server is very easy and it�s similar to any other ASP.NET 2.0 application. You can even use some shared hosting provider to run a web site created with Kentico CMS. All you need to do is:

• Copy web site files to the live server (over FTP).
• Restore the database on the live server.
• Update the following web.config values:
  • CMSConnectionString: update the server name, database name, user id and password according to your environment.
  • CMSLicenseKey: you will need either a full license key (you will get it after purchase of Kentico CMS) or you can ask for a temporary trial key for your domain at http://www.kentico.com/cmsstarterkit.aspx.
  • CMSWebApplicationVirtualPath: set it to "/" if you run the web site in the site root.
  • CMSMetadataFolder: set it to "/cmsdesk/metadata" if you run the web site in the site root.

Please note: The Corporate Site Starter Kit works only for URLs starting with http://localhost by default.

If you like Kentico CMS you can get the full version license key at http://www.kentico.com/en/buy.

Further Reading

If you would like to explore all features provided by Kentico CMS for .NET, download Kentico CMS Tutorial from http://www.kentico.com/cmsstarterkit.aspx and learn how to fully leverage its power!

Kentico CMS for .NET Fast Facts

Key content management features	Tree organization of documents Structured documents with custom fields (content/design separation) Workflow Versioning Content scheduling Multilingual content Document-level permissions Content Staging (synchronization between servers)
Key web site features	Flexible navigation using several types of navigation controls Full-text search in both content and files Secured areas for registered users Multilingual content
Built-in modules	E-commerce/Shopping Cart On-line Forms Forums Newsletter Image Gallery
Supported platforms	ASP.NET 1.1 ASP.NET 2.0
Supported IDE�s	Visual Studio .NET 2003 Visual Studio 2005 Visual Web Developer 2005 Express Edition
Supported programming languages	C# Visual Basic.NET
Supported database	Microsoft SQL Server 2000 MSDE 2000 Microsoft SQL Server 2005 Microsoft SQL Server 2005 Express
Supported user interface languages	English Italian German Spanish Dutch Czech (you can easily create your own translation)
Supported content languages	Any language � Kentico CMS uses UNICODE enconding for all content.
Supported web browsers for editors	IE 6.0+ Mozilla 1.7.1+ Netscape 7.1+ FireFox 1.3+
Supported web browsers for visitors	Depends mostly on your HTML code, transformations and used controls.