Click here to Skip to main content
Click here to Skip to main content

Corporate Site Starter Kit with CMS for ASP.NET 2.0

, 19 Mar 2006
Learn how to create a fully editable web site with Content Management System using the Corporate Site Starter Kit and Visual Studio 2005.

Editorial Note

This article is in the Product Showcase section 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.

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.

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:

Kentico CMS .NET Corporate Site Starter Kit Home Page

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

Select Page Template in Kentico CMS for .NET 2.0

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:

New Corporate Site Starter Kit Home Page

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:

Page Template in Visual Studio 2005

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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Petr Palas
Web Developer
Czech Republic Czech Republic
Petr Palas is founder of Kentico Software (www.kentico.com), the producer of professional solutions for web developers. Kentico Software is focused on development and marketing of Kentico CMS for ASP.NET. Our goal is to create the most flexible and easy-to-use web content management solution for ASP.NET developers.

Comments and Discussions

 
GeneralGOOD One [modified] Pinmembermanas11-Sep-08 21:14 
GeneralThis looks great! Pinmemberkryzchek20-Mar-06 6:39 
I really hope I get a chance to use this to manage my company's website. We're in dire need of a redesign, and deploying a CMS at the same time would be ideal. Thanks for the article!
GeneralStarter Kit Pinmemberbabakzawari20-Mar-06 2:55 
GeneralRe: Starter Kit PinmemberPetr Palas20-Mar-06 3:05 
GeneralRe: Starter Kit PinmemberJohn Simmons / outlaw programmer4-Apr-06 9:44 
GeneralRe: Starter Kit Pinmemberryanfisher10-Apr-06 0:14 
GeneralRe: Starter Kit PinmemberThanhphudss23-Jun-06 7:54 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.141220.1 | Last Updated 20 Mar 2006
Article Copyright 2006 by Petr Palas
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid