kenticocms tutorial 2003

Kentico CMS for ASP.NET - Tutorial

1

www.kentico.com we help you deliver better web sites 1

Kentico CMS Tutorial for Visual Studio .NET 2003

Kentico CMS helps you build dynamic web sites with a full-featured web content management solution. This tutorial will help you become familiar with Kentico CMS and it’s primarily intended for developers. Should you need any help, please feel free to contact us at [email protected] or call 1-888-225-2767. If you need more detailed information on some topic, please see User’s Guide or Developer’s Guide that can be found in Start -> All Programs -> Kentico CMS 1.x menu.

http://www.kentico.com

mailto:[email protected]


2


Table of Contents Chapter 1 - Kentico CMS Installation ........................................................................................................ 3 Chapter 2 – Kentico CMS Overview ......................................................................................................... 5 Chapter 3 – Content Editing ..................................................................................................................... 7 Chapter 4 – File Management ................................................................................................................ 10 Chapter 5 - Security Administration ........................................................................................................ 12

Authentication..................................................................................................................................... 12 Management of Users and Roles ........................................................................................................ 12 Authorization....................................................................................................................................... 12 Secured Web Site Areas..................................................................................................................... 14

Chapter 6 – Versioning and Workflow..................................................................................................... 15 Versioning and Content Locking.......................................................................................................... 15 Workflow............................................................................................................................................. 16

Chapter 7 - Development of Page Templates ......................................................................................... 18 How Page Templates Work................................................................................................................. 21 Adding Your Own Code to the Page.................................................................................................... 21 URL Format........................................................................................................................................ 22

Chapter 8 – Creating a Web Site from Scratch ....................................................................................... 23 Installing a Blank Project..................................................................................................................... 23 Adding Kentico CMS Controls to Your Toolbox ................................................................................... 23 Setting the Project Namespace........................................................................................................... 23 Step 1 - Creating the Header of the Site.............................................................................................. 25 Step 2 - Making the Home Page Editable............................................................................................ 28 Step 3 – Creating the Services Section ............................................................................................... 30 Step 4 – Creating a Product Catalog................................................................................................... 33 Step 5 – Modifying the Transformations .............................................................................................. 37 Step 6 – Displaying the News Section and the Latest News ................................................................ 39 Step 7 – Creating a Contact Page with Contact Form.......................................................................... 42 Step 8 – Adding Search Capabilities ................................................................................................... 46 Step 9 – Adding the Site Map.............................................................................................................. 49 Step 10 - Using Custom Document Types.......................................................................................... 50 Step 11 - Adding The Editing Buttons................................................................................................. 53 Step 12 – Creating a Multilingual Web Site.......................................................................................... 54 Step 13 – Integrating the Newsletter Module....................................................................................... 56 Step 14 – Creating Controls for Insertion into the Text......................................................................... 57 Step 15 – Creating On-Line Forms...................................................................................................... 59 Step 16 – Other Modules .................................................................................................................... 60



3


Chapter 1 - Kentico CMS Installation

Prerequisites Before you start installation, please make sure that you fulfill the following system requirements:

• Microsoft Windows 2000, XP or 2003 • Microsoft IIS Server • .NET Framework 1.1 and ASP.NET 1.1 • Visual Studio .NET 2003 is highly recommended, however, if you’re familiar with ASP.NET

programming in some other tool, you can use it as well. Please note: if you prefer using VS 2005, please see the Kentico CMS Tutorial for VS 2005.

• Microsoft SQL Server 2000, MSDE 2000, Microsoft SQL Server 2005 or Microsoft SQL Server Express 2005 (you need to have administrator’s rights for your database or for the whole server)

Deployment in Shared Hosting Environment This chapter assumes that you’re installing Kentico CMS on your local machine. After you finish the development of your application, you will need to move it to your web server. Deployment to the web server can be done over FTP and it’s not necessary to run any setup or make any manual configuration on the server, which means you can run Kentico CMS with most shared hosting providers. Please make sure that your web hosting provider supports the following features:

• Allows you to access the MS SQL Server database from your local machine using SQL Server Enterprise Manager (not only through some web interface) or is willing to restore your Kentico CMS database on their MS SQL Server.

• Allows ASP.NET applications to write on the disk (for uploading of files through the user interface).

Installing Kentico CMS on Your Computer Run Kentico CMS setup and follow the instructions. At the end, choose to launch Kentico CMS Web Installer. The installer extracts files on your disk and creates shortcuts in your Start menu.

Deploying a New Web Site The web site and database can be deployed using Kentico CMS Web Installer. Follow the instructions in the wizard. If you need help at some step, please see Developer’s Guide -> Installation and Deployment -> Deployment of Kentico CMS. In step 5, you can choose to install the web site to the root of your web server. You don’t need to do that for evaluation purposes, but it’s highly recommended that you install the web site to the root (e.g. c:\inetpub\wwwroot). It will ensure using correct URLs on both development and production server. If you need to run several web sites on your Windows XP machine, you can use a useful, free utility IISAdmin (http://www.firstserved.net/services/iisadmin.php). In step 6, please make sure that you select to deploy the sample Corporate Site that is used later in this guide. However, if you want to start a new web site from scratch later, use the blank web site that contains all settings, but no pre-built pages and content.


http://www.firstserved.net/services/iisadmin.php


4


After you finish the wizard, please choose to launch Kentico CMS web site. If you need to access the application later, use URL like this: http://localhost/KenticoCMS. The name of the virtual directory (KenticoCMS) can be different – it depends on the name of the folder you entered in the wizard.

File System Permissions Kentico CMS requires Modify permissions for the web application and all underlying directories (if you’re using NTFS file system). Please grant the following users with Modify permissions (in the File Properties -> Security dialog):

• If you’re using Windows 2000 or Windows XP, grant the <machine>\ASPNET account with Modify permissions.

• If you’re using Windows Server 2003, grant the NT AUTHORITY\NETWORK SERVICE account with Modify permissions.

Windows 2000/XP Windows Server 2003



5


Chapter 2 – Kentico CMS Overview

What is Kentico CMS Kentico CMS is a Web content management system for ASP.NET. It provides both friendly user interface as well as flexible development platform for web developers. The following image describes the overall architecture:

Sample Corporate Web Site After completing the installation in chapter 1, you should see the sample Corporate Site in your browser. This web site is used to showcase Kentico CMS capabilities and it can be directly used as a base for your web site if you modify the styles and some settings according to your needs. Of course, you’re not limited to this design – Kentico CMS allows you to create any web site structure, use any page layout and design you can imagine. Now you can browse the site and see how it’s organized and how it works.

How Can I Create a Web Site Like This? Now you might wonder how you can create a site like this one or how you can modify it. We recommend the following process:

1. Analyze web site requirements and prepare the site map of the web site on a paper. 2. Draw page layout for different pages (home page, product catalog, news, etc.) and decide what

kind of navigation controls you will use. 3. Now you need to create page templates in Visual Studio.NET (or some other tool). Page

templates define the layout and navigation that is used for several pages with different content (thus “templates”).

4. Once the templates are prepared, content editors can start creating new pages based on these templates without developer’s help.



6


The following figure shows the web site lifecycle:

The development of page templates will be described in more detail later in this tutorial.

How Can I Edit the Content of this Web Site? The content can be edited in Kentico CMS Desk, which is the browser-based administration interface of Kentico CMS. You can sign in to Kentico CMS Desk by clicking the link at the top of the web site or through URL http://localhost/KenticoCMS/CMSDesk. You can (optionally) leverage advanced content management features, such as customizable workflow, versioning and multilingual support (creating a web site in several language versions). The following figure shows a general content life cycle in Kentico CMS:

You will learn more details on content editing in the next chapter.



7


Chapter 3 – Content Editing

Kentico CMS is delivered with powerful editing interface called Kentico CMS Desk. Click the link Click here to sign in at the top of the sample Corporate Site or navigate to http://localhost/KenticoCMS/cmsdesk. You will be redirected to the logon form of Kentico CMS Desk. Use the following credentials to sign in:

• User name: administrator • Password: leave the password blank

Now you can see the following sections in the main menu:

• My Desk – useful personal information, such as “My Recent Documents” or “My Recycle Bin”. • Content - browse and edit content. • Administration - manage users, roles and permissions. • Tools – special tools and custom modules. • Development – site and content management configuration.

Note 1: We will not use the advanced features, such as versioning and workflow in this chapter. These features are described later in this tutorial. Without versioning, all changes are published on the live web site immediately. Note 2: The Corporate Site is only a sample web site created for demonstration purposes. You’re definitely NOT limited to its structure, page layout, design or predefined document types. Instead, you have full control over your web site and you can create any structure or design as if you were not using Kentico CMS.

Editing an Existing Page

First, you will learn how to edit page content. Choose the Content module in the main menu. The left tree view displays the site map with all content published on the web site. Click the Home document in the tree view. Now you can edit the content of the home page in the Word-like WYSIWYG editor and save it using the Save button.



8


Click the Published version radio button in the dialog header to see what the live web site looks like.

Now click the Edit button in the main toolbar. You will see the editing form that allows you to modify page properties, such as page caption in the navigation, page template, title, description, etc.

Creating a New Page

Now you will create your first page. Click the Services document in the tree view and click the New button in the main toolbar. Choose to create a new document of type Page (menu item) and click OK. Enter the following values:

• Caption: Service 3 • Page type: Page template • Page template: click Select and choose the Services template in the Page Templates Catalog.

Click OK to save. Now click Site in the main toolbar and enter some content. Click Save to save the changes. As you can see, you can create pages based on the page templates prepared by web developer. You will learn how to develop such page templates for content editors later in this tutorial.

Creating a New Product

Now you will create a new product. In the tree view, unfold Products and click Category A. Click Site in the main toolbar. Now you should see the page with editing buttons. Click Add New Product. Enter product details and click OK to save changes. When you switch back to the Site view you should see the new product on the page.

You can also find the new product in the tree view on the left. It was created under the page that represents product category A.



9


Document paths

As you have seen, all documents are stored in the tree hierarchy. Page is just another document type. Each document has its unique path. There are four types of path:

• ID Path consists of document IDs, such as /10/15/134. You can use this path in your code for dynamic links.

• Alias Path consists of document aliases, such as /products/category A/product A1. This path doesn't change when you modify document name and it is used for URL rewriting, so that you can use friendly URLs, such as http://www.myweb.com/products/category A/product A1.aspx.

• Name Path consists of document names, such as /products/category A/product A1. This path is used in bread crumbs navigation control and in other cases when path should be displayed to the end user.

• URL Path is a special path that you can specify for every document. If it’s specified, it can be used for URLs instead of Alias Path. Unlike Alias Path, the URL Path does not depend on the location of the document in the tree structure.

You can find all of these paths, when you click Properties in the main tool bar. In this dialog, you can also modify document alias which changes the URL of the document.


http://www.myweb.com/products/category


10


Chapter 4 – File Management Kentico CMS allows you to upload files, such as images, Office documents or PDF’s) to the server and manage them as any other document. You can even use versioning, workflow and full-text search in files.

Inserting Image into Page Now we will upload a new image and use it as a logo. Open the Content module, click the Files folder and click New. Choose to create a new file. Click the Browse... button and select some image on your disk. Click OK to upload the file. Open the Content module of Kentico CMS Desk, click the Logo document in the left tree view. This is an article that is used as a logo image and text on all pages. Choose Edit in the main toolbar. Now you can edit the logo content in the WYSIWYG editor. Remove the temporary image and click the Insert/Edit image icon. The new window allows you to locate and select files in the tree hierarchy of documents. Select the new image and click the Paste Image link in the preview screen. Now you can modify the properties of the image, such as width, height or alignment and click OK to insert image into WYSIWYG editor. Click OK to save the article. Click Site in the main toolbar to preview the page with new image.

Restricting the type and size of files You can specify allowed file types using the following web.config parameter in the appSettings section: <add key="CMSAllowedFileExtensions" value="jpg;txt;doc" /> You can set up maximum size of uploaded files (in bytes) using the following parameter in the web.config section: <httpRuntime maxRequestLength="100000" />

Other file management features This short demo was only a simple example. Kentico CMS allows you to use versioning and workflow also for files. You can even configure Kentico CMS for full-text search in uploaded files. Full-text search uses standard Microsoft SQL Server Search Engine that allows you to index and search HTML files, Office documents (Word, Excel, PowerPoint) and optionally also PDF files or other types of documents. If you want to use such advanced features, you need to store files in the database, not only in the file system which is the default value. You can configure this using the following web.config parameter: <add key="CMSStoreFilesInDatabase" value="true" />



11


Then, the file system will always contain only published version of the file. If you need more information about how to configure full-text search, please see Developer’s Guide -> Installation and Deployment -> Configuration of Full-text Search in Files.



12


Chapter 5 - Security Administration Kentico CMS provides a rich and highly flexible and granular security model. You can specify global permissions as well as local (document-level or section-level) permissions. You can also restrict access to selected web site areas for authenticated users only. Kentico CMS also provides a detailed auditing trail with history of all actions made in the administration interface.

Authentication

Kentico CMS uses forms authentication by default. All user names and passwords are saved in Kentico CMS database and users need to enter their user name and password in the logon form.

For intranets or extranets, you can also use Windows authentication. In this case, Kentico CMS database contains only user names and users are recognized by their Windows domain identity, so they do not need to enter their password again. You can find more details on this configuration in the Developer’s Guide -> Installation and Deployment -> Configuration of Windows Authentication.

Management of Users and Roles

You can easily manage users and roles in the Administration module of Kentico CMS Desk, in sections Users and Roles. Every user can be member of any number of roles. You can define your own roles and define their permissions (see later).

Authorization You can manage two levels of permissions:

• Global permissions used for modules, for all documents or for documents of particular type. • Local permissions used for single documents or sections of your web site.

Global Permissions The global permissions can be managed in the Administration module, in section Permissions. They can be assigned only to roles. Module Permissions Choose CMS Development module in the Permission matrix dropdown list and click Show. Now you can modify permissions for the Development module of Kentico CMS Desk. All Content Permissions



13


Choose CMS Content module in the Permission Matrix dropdown list and click Show. Now you can modify permissions for all documents. These permissions override local permissions and they should be typically used for privileged users, such as site managers and administrators.

Document-Type Permissions Choose Article document type in the Permissions Matrix dropdown list and click Show. Now you can modify permisions for all documents of type Article. These permissions override the local permissions, too.

Local Permissions Local permissions allow you to set up permissions for particular document or site section. They can be modified in the Content module of Kentico CMS Desk. They use a similar philosophy as Windows file system (NTFS) permissions, but all these settings are stored in the Kentico CMS database without affecting the disk permissions. Document-Level Permissions Choose the News/Your First News document in the tree view of the Content module and click the Permissions button in the main toolbar. Now you can see the list of users and roles. When you select some user or role, their permissions are displayed in the right part of the dialog. Try to add some additional user or role to this list using the Add button and set up their permissions. Click OK to save changes.



14


Section-Level Permissions Choose the News document in the tree view of the Content module. When you modify permissions for this document (for section News), all changes are propagated to underlying documents in the section. In this way, you can easily set up permissions for particular sections of the web site. You can use the Change permission inheritance link to break inheritance of permissions from parent documents.

Secured Web Site Areas

Kentico CMS allows you to define secured areas of the web site, such as partner sections or customer portal. When users try to access a secured area, they are asked for their user name and password.

Sign out from Kentico CMS Desk and open the live web site. Go to the Partners section in the main menu. Now you are asked for your user name and password. After you enter them, you can see the secured content.

The secured web site area displays only content the visitor is allowed to read. You can try to create a new user, grant him with read permission for selected documents and the visitor will see only the relevant content. It means you can personalize information for particular users or groups of users (e.g. Partners/Gold Partners).

You can easily set up several secured areas in the web.config file using the following keys in the appSettings section:

<add key="CMSSecuredAreas" value="/partners;/clients" />

<add key="CMSSecuredAreasLogonPage" value="~/WebLogon.aspx" />



15


Chapter 6 – Versioning and Workflow Kentico CMS supports versioning, customizable workflow, content locking (check-in/check-out) and scheduling. You will typically leverage these features for larger web sites managed by several content editors. So far, we were using a simple publishing model when document modifications are displayed on the live web site immediately:

However, you can easily set up a versioning and workflow scenario for selected document types:

Versioning and Content Locking We will set up versioning for all news items in the Kentico CMS database. Open Kentico CMS Desk and choose the Development module. In the tree view, choose Document Templates -> Application: CMS -> News. You will see the Document Template Properties dialog. Check the Use workflow and versioning box and click OK to save. Now go to the Content module and create a news document in the News section. Fill in all fields, set the Release date value to the current date and time and click OK to save it. After save, you will see the information toolbar at the top of the editing form. It says that you have checked out the document and that the workflow step is Edit. Check-out means that you are the only user who can modify the document at the moment.



16


After you finish changes, click on the link Save and check in the document... You will be redirected to the Check in/out Document dialog. You can enter the version number and some comment. Click the Check in document button. The document is now available for editing by other users. However, it’s not published yet, as we’re using the default workflow that requires you to approve the document first. Click on the Publish the document... link in the editing form or on the Publish button in the main toolbar. Click the Approve button. The document is moved to the Published workflow step as you can see in the Workflow Steps section and in the Workflow History. Open the live web site. Check that the news item was published. In this short demo, you have learned how versioning, check-in/check-out and approval work. The check-in/check-out feature may be complicated for some content editors. In that case, you can switch off content locking and use only versioning and workflow. You can do that using the following appSettings key in the web.config: <add key="CMSUseCheckinCheckout" value="false" />

Workflow You can define different workflows for different types of documents. In this short demo, we will define a simple workflow for approving news items. Creating Users and Roles First, please create two users in Administration -> Users: User Alice Murphy, the news editor:

• User name: alicem • Full name: Alice Murphy • E-mail address: enter your e-mail address • Password: (leave empty)

Assign Alice to role CMS Editors. User John Smith, the PR manager:

• User name: johns • Full name: John Smith • E-mail address: enter you second e-mail address • Password: (leave empty)

Now create a new role PR Managers. Assign John to roles:

• PR Managers • CMS Editors

Defining the Workflow Go to the Development module and choose the Workflows section in the left tree view. Click the New button in the main toolbar and enter the following values in the Workflow Properties dialog:

• Worfklow display name: News Approval • Workflow name: NewsApproval

Click OK to save changes. Now you can modify workflow steps below. Please note that there are always two steps: Edit and Published. You can add virtually any number of your custom workflow steps between them. The document must pass all workflow steps from Edit to Published. Click the plus button and add the following step:



17


• Step Display Name: PR Manager Approval • Step Name: PRManagerApproval

Click OK to save the new step. Now we will specify which roles are allowed to work with document in the new step and approve them or reject them. Click the plus button next to the list of Allowed Roles and choose the PR Managers role. Now we will assign the News documents with this workflow process. In the Development module, open Development -> Document Templates -> Application: CMS -> News. Make sure that the Use versioning and workflow box is checked and select the newly created workflow News Approval in the Workflow dropdown list. Click OK to save changes. Running the Workflow Now we will create a news item and approve it in our workflow. Sign in as AliceM (with empty password). Go to the Content module and create a news item in the News section. Check in the document and approve it. Tip: If you receive an error during the approval saying it was not possible to send the e-mail, please check you have a correct SMTP server set up in the CMSSMTPServer web.config key. You can no longer work with document as AliceM. Sign out and see the live web site. Check that the news item hasn’t been published yet. The members of the PR Managers role (user JohnS) receive an e-mail notification with link to the document. If you haven’t received the e-mail, you can simply open the CMS Desk and sign in as JohnS. Go to the My Desk module -> Waiting for approval and click the news item. You can optionally try to check out the document, modify it and check in the document. Click on the Publish button in the main toolbar and click Approve. The document is now published on the live web site and the editor who started the workflow receives an e-mail saying the document has been approved. Sign out and check that the news item is now published on the web site.



18


Chapter 7 - Development of Page Templates Now that you’re familiar with Kentico CMS content editing and administration, you can learn how to create your own page templates. We will create a simple page template in the sample Corporate Site project. Development without Visual Studio.NET It’s recommended that you use Visual Studio.NET 2003 (or 2005). However, if you do not use Visual Studio, you can still create page templates in other tools, such as DreamWeaver, WebMatrix or any text editor. See Developer’s Guide -> Creating Page Templates -> Creating Page Templates without Visual Studio.NET.

Opening the Web Project in Visual Studio.NET Open Windows Explorer and locate the folder where Kentico CMS Web site is deployed (typically C:\inetpub\wwwroot\KenticoCMS). Open the CorporateSite.vbproj or CorporateSite_CS.csproj file with Visual Studio.NET- this is a standard ASP.NET project containing the Web site. As you take a closer look, you will find out that the page templates, such as default.aspx, services.aspx or products.aspx are standard ASP.NET pages. It means you have full control over these pages and you can use both Kentico CMS Controls as well as your own controls or code on these web forms.

Adding Kentico CMS Controls to Your Toolbox Before you can use Kentico CMS Controls you need to add them to your Toolbox. Right-click the Toolbox window in Visual Studio.NET, add a new tab, click Add/Remove items and locate the Kentico.CMS.Controls.dll library in the bin directory of the web project.

Creating a New Page Template – SingleArticle.aspx We will create a very simple page template for page with main menu, header and text. Add a new ASP.NET page to your web project and call it SingleArticle.aspx. Now switch to the HTML code. Registering Kentico CMS Controls Add the following code just after the first line (<%@ Page...%>): <%@ Register TagPrefix="cc3" Namespace="Kentico.CMS.DataEngine" Assembly="Kentico.CMS.DataEngine" %> <%@ Register TagPrefix="cc2" Namespace="Kentico.CMS.TreeEngine" Assembly="Kentico.CMS.TreeEngine" %> <%@ Register TagPrefix="cc1" Namespace="Kentico.CMS.CMSControls" Assembly="Kentico.CMS.CMSControls" %> <%@ Register TagPrefix="uc1" TagName="Header" Src="Header.ascx" %> You have added reference to Kentico CMS Controls and Kentico CMS libraries to your page. You have also registered the Header.ascx control.



19


Changing the DOCTYPE It’s recommended that you change the DOCTYPE to XHTML 1.1 Strict so that your pages are XHTML-compliant and so that some sample CSS styles work correctly. Replace the existing DOCTYPE with: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Rendering the Page Title and Meta Tags Replace all content inside the <head></head> element with following two lines: <%=CorporateSite.Functions.GetPageTags("/home")%> The GetPageTags function returns the <title> element and the meta tags description, keywords and main.css stylesheet link. Setting Background Image <body background='<%=ResolveUrl("~/")%>images/background.gif'> Please note that you need to use the ResolveUrl method in order to render a correct URL starting from the root of your web project. Making the Page Editable Now we will define editable regions in our page template. Paste the following code inside the <form></form> element: <div class="MainPage"><cc1:cmspagemanager id="CMSPageManager1" runat="server"></cc1:cmspagemanager><uc1:header id="Header1" runat="server"></uc1:header><BR> <h1><cc1:CMSEditableRegion id="Cmseditableregion1" runat="server" RegionTitle="Page Header" RegionType="TextBox" DialogHeight="1" DialogWidth="80"> </cc1:CMSEditableRegion></h1> <p><cc1:CMSEditableRegion id="CMSEditableRegion2" runat="server" RegionTitle="Page Text" RegionType="HtmlEditor" DialogWidth="600" DialogHeight="400"> </cc1:CMSEditableRegion></p> </div> The div class is used only for page layout (you can use both CSS-based layout and table layout with Kentico CMS). The CMSPageManager1 control displays the page toolbar with Save button. It also ensures saving and loading of content on the page. The header control is a simple user control (ascx) that contains the main menu. It’s used on all pages and it allows you to define the main menu in one place. The CMSEditableRegion1 control creates an editable region that allows you to edit/display the page header. It uses the following settings:

• RegionTitle – the title displayed in the editing mode.


http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd


20


• RegionType – the type of the editing control displayed in the editing mode. Possible values are TextBox, TextArea and HtmlEditor.

• DialogHeight – the height of the editing control. • DialogWidth – the width of the editing control.

The CMSEditableRegion2 control creates an editable region that allows you to edit/display the page text. It uses similar settings as the CMSEditableRegion1 control, but it is displayed as HTML editor in the editing mode. CMSPageManager and CMSEditableRegion controls allow you to make the page editable. This approach is suitable for pages with simple text-only content. Later in this tutorial, you will learn how to create pages with product listings and product details with strictly structured and typed data. Compiling the Project Now you need to compile the project (CTRL+Shift+B). You need to do this every time you add a new page to the project. Registering the New Page Template Now that you have created and compiled a new page template, you need to register it in Kentico CMS Desk so that content editors can use it. Open Kentico CMS Desk and go to Development -> Page Templates. Click the New button in the main toolbar and enter the following values:

• Template Name: Single Article • Template File Name: SingleArticle.aspx

Click OK to save the new page template in the Page Template Catalog.

Creating a new page based on the template In Kentico CMS Desk, click Content in the main menu and click the root. Click New in the main toolbar and choose to create a new Page (Menu Item). Enter the following values:

• Caption: Our Company • Order: 9 • Type: Page Template • Page Template: click Select... and choose Single Article • Page Title: About Our Company • Show in Site Map: Yes (check the box) • Hide in Navigation: No (uncheck the box)

Click OK to create the new page.

Editing Content of the New Page Click Site in the main toolbar. Now you can edit the content of the Our Company page. Enter some values and click Save.



21


How Page Templates Work Now you might be curious how the page templates work and what level of flexibility you have. The following figure shows you an example of page processing:

As you can see, page templates are standard ASP.NET pages that receive the aliasPath parameter in the URL and display appropriate content. The aliasPath value is the path of the document in the tree hierarchy of content. The controls automatically get the aliasPath parameter and display appropriate content.

Adding Your Own Code to the Page Since Kentico CMS leverages the standard ASP.NET architecture, you can easily add your own code to the page. You can try to add a new button control named Button1 on the page and put the following code into its OnClick handler: [VB.NET] Button1.Text = System.DateTime.Now.ToString



22


[C#] Button1.Text = System.DateTime.Now.ToString(); After you compile and run the project, you will see that the code displays current time on the button. As you can see, you can easily add your own functionality to the page using standard ASP.NET code.

URL Format Kentico CMS uses friendly (or “smart“) URLs in format /products/category 1.aspx by default. You can configure extensions such as .html or any other using the following web.config key in the appSettings section: <add key="CMSFriendlyURLStyle" value=".html" /> However, you will need to map the .html extension to the ASP.NET engine in the IIS console, in the web site or virtual directory properties. If you want to use the URLs without extension (in format /products/category 1), you need to set up the following keys in the web.config: <add key="CMSFriendlyURLStyle" value="" /> <add key="CMSGenerateFriendlyUrlFiles" value="true" /> If you need to add pages to your web site that will not be managed by Kentico CMS, you can exclude them from URL rewriting using the following web.config parameter: <add key="CMSExcludedDirectories" value="/register;/shop“ /> More on Development This was a small example of creating a new page template. Later in this guide, you will see how to create the whole web site from scratch.



23


Chapter 8 – Creating a Web Site from Scratch This chapter will show you how to create the Corporate Site from scratch. You will start from simple pages with editable regions, you will learn how to create a product catalog, how to incorporate full-text search into your web site and you will learn several useful techniques. After finishing this chapter, you will be able to create common web sites with Kentico CMS.

Installing a Blank Project Run Kentico Web Installer (you can find it in the Start menu) and install a new web site. Please make sure that you choose to create a blank solution in Step 6. You can choose any programming language. The new web site doesn’t contain any pages or page templates. The blank web site contains several files and settings – please do not remove them as they ensure that the system will work properly.

Adding Kentico CMS Controls to Your Toolbox If you haven’t added Kentico CMS Controls to your VS.NET toolbox yet, please do it now: Right click the toobox and choose Add tab. Call the tab CMS Controls. Right click the new tab and choose Add/Remove Items... Locate the Kentico.CMS.CMSControls.dll library in the bin folder of your web project and click OK to confirm the dialog. You should see the CMS controls in your toolbox now.

Setting the Project Namespace Before we start our development, we will change the project namespace from WebProject to CorporateSite so that we can use the same names as in the sample Corporate Site project. Please open the project properties from Project -> WebProject Properties... and change the Root namespace value from WebProject to CorporateSite. Click OK to confirm the dialog.



24


In the main menu, choose Edit -> Find and Replace -> Replace (CTRL + H) and replace WebProject. with CorporateSite. (including the dot at the end) in the whole web project. If you’re using the C# version, you also need to replace namespace WebProject with namespace CorporateSite in the whole web project. The project is now ready for your development. Please note: In other projects, you can use the default namespace, of course, but you may need to change the way you call helper functions in your ASPX pages and in the ASCX transformations from CorporateSite.Functions... to WebProject.Functions...



25


Step 1 - Creating the Header of the Site We will start with creating the site header. It will contain a logo, a main menu, a search box and a link to Site Map. We will create the header as a user control (ASCX) so that we can re-use this header on all web pages. Right click your project in the Solution Explorer and add a new user control to your web project called Header.ascx. Switch to the HTML mode and paste the following code in the file: <DIV class="sampleInfoPanel_envelope"> <div class="sampleInfoPanel"><A class="InfoLink" href='<%=ResolveUrl("~/cmsdesk/")%>logon.aspx?user=administrator'>Click here</A> to sign in to the administration interface (administrator/blank password). <a href= ' <%=ResolveUrl("~/ControlsExamples/default.aspx")%> ' target="_blank">Click here</a> to see controls examples. </div> </div> <div class="logoBar"> logo </div> <div class="searchBar">Search: search </div> <div class="mainMenuBar"> <div class="Horizontal"> menu </div> </div> The div elements with CSS styles define the CSS-based layout of the header. The CSS styles are already defined in the main.css file, so you don’t take care of them in this sample web site. In your own web project, you can define your own styles or you can simply use the table-based layout. Now switch back to the Design mode and drag and drop the following controls on the form:

• Put CMSViewer control inside the text „logo“ • Put CMSMenu control inside the text „menu“

You will see a page like this:

Now remove the extra characters “logo“ and “menu“ (we used them only for placing the controls on the right place):



26


Set the following properties of the controls: CMSViewer

• SelectNodesPath: /logo • SelectNodesClassName: cms.article • TransformationName: cms.article.articletext

The CMSViewer control is used to display specified document or several documents. We will use it to display an article with logo and header text. It is an example of how you can reuse content on several pages with Kentico CMS. The document is specified using the SelectNodesPath property which is actually the alias path of the document in the tree hierarchy of content. You can find this path in the CMS Desk -> Content -> ... select document -> click Properties in the main menu -> find the Alias Path value. /logo is the path to the document that we will create later. The SelectNodesClassName property specifies the type of the document that should be displayed. The CMSViewer control uses transformation specified in the TransformationName property to display the document on the page. The transformations are defined in the CMS Desk -> Development -> Document Types -> Application: CMS -> ... select document type – e.g. an article ... -> Transformations. The transformation is either an XSLT stylesheet or an ASCX control (HTML code with standard ASP.NET databinding expressions). The transformation cms.article.articletext is an XSLT transformation that displays only article text without article name. CMSMenu

• SelectNodesPath: /% • Layout: Horizontal

The CMSMenu control displays a dropdown menu. You can also use CMSListMenu, CMSTreeMenu or CMSTabControl in your projects. The SelectNodesPath property specifies which menu items should be displayed. The value /% means that all items under the root will be displayed (it’s similar to C:\*.* expression you know from DOS). Please note that the CMSMenu displays only documents of type Page (menu item) by default, but this can be overriden using the property SelectNodesClassNames. We wil not implement the search functionality at this moment. Displaying the Header on the Home Page Now that we have created the header control, we can simply drag and drop the control on the default.aspx page, which is the home page. Please do that, remove the original temporary text and run the web project. (you may need to set the default.aspx page as the start page). You should see a page like this:



27


The content is not displayed as we haven’t created it yet. Click on the link “Click here to sign in...“ and sign in as administrator (with blank password) to Kentico CMS Desk. Choose the Content module in the main menu and create the following documents: /Home (page/menu item document)

• Caption: Home • Order: 1 • Page Template: Home page

Leave other fields empty or use the default values and click OK to save. This page will represent the home page link in the main menu. Click on the root item again and create a new folder Files and upload some logo image into this folder. Create a new article under the root: /logo (article)

• Article name: Logo • Article text: Click the Insert/Edit Image icon in the WYSIWYG editor and click Browse Server.

Select the uploaded file and click the Paste Image link. Click OK to confirm the Image Properties dialog.

Click OK to save. You should have the following document structure in the left tree view:

Now click on the root item and choose Site in the main toolbar. You will see a preview of the web site:

We have created the web site header. You could create the web site footer in the same way. As you can see, we were using standard ASP.NET features and Kentico CMS Controls to display the logo article and the main menu.



28


Step 2 - Making the Home Page Editable In this step, you will make the content of the home page editable. Close the browser and open the default.aspx page in the HTML mode. Replace everything between the <form></form> elements with following code: <div class="MainPage"> <cc1:CMSPageManager id="CMSPageManager1" runat="server" DefaultPageAliasPath="/home"></cc1:CMSPageManager> <uc1:Header id="Header1" runat="server"></uc1:Header> <div class="Content"> <div class="ContentArticle"> <div class="ContentArticlePadding"> <cc1:CMSEditableRegion id="Region1" runat="server" RegionType="HtmlEditor" DialogHeight="350" RegionTitle="Home page content" DialogWidth="550"></cc1:CMSEditableRegion> </div> </div> <div class="ContentNews"> <div class="ContentNewsPadding"> </div> </div> </div> </div> This code contains the DIV elements that define the layout of the page. The first control on the page is CMSPageManager, the control that ensures displaying of the toolbar on pages with editable regions and saving of the content. It uses the following settings:

• DefaultAliasPath: /home This value says to the control what page path should be used if page doesn’t receive any path in the AliasPath URL parameter. The CMSEditableRegion control defines the editable area. You can specify the size of the dialog using the DialogHeight and DialogWidth properties, the region title using the RegionTitle property and the region type (TextBox, TextArea, HtmlEditor) using the RegionType property. Save the changes and run the web site again. When you sign in to Kentico CMS Desk and choose the Content section, the web page is editable now:



29


Enter some content in the WYSIWYG editor and click the Save page link to save it. When you click on the “Published version“ radio button in the toolbar, you can see that the editable region now displays the entered text on the live page:

In this step, we have made the home page editable. Of course, you can define several editable regions on a single page. This approach is recommended for pages with unstructured content. Later in this chapter, you will see how to display structured documents (a catalog of products).



30


Step 3 – Creating the Services Section In this step, we will create a new page template for the Services section. It will display the header with main menu, a left menu and a simple page with header and some text. We will use editable regions again, but in this case, you will see how you can reuse one page template for several pages. Close the browser and go to Visual Studio.NET. Add a new page and call it Services.aspx. Switch to the HTML mode and remove all the code except for the <%@ Page ... %> directive. Put the following code into the page: <%@ Register TagPrefix="uc1" TagName="Header" Src="Header.ascx" %> <%@ Register TagPrefix="cc1" Namespace="Kentico.CMS.CMSControls" Assembly="Kentico.CMS.CMSControls" %> <%@ Register TagPrefix="cc2" Namespace="Kentico.CMS.TreeEngine" Assembly="Kentico.CMS.TreeEngine" %> <%@ Register TagPrefix="cc3" Namespace="Kentico.CMS.DataEngine" Assembly="Kentico.CMS.DataEngine" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <%=CorporateSite.Functions.GetPageTags("/services")%> </head> <body> <form id="Form1" method="post" runat="server"> <div class="MainPage"> header <div class="Content"> <div class="CategoryMenu"> menu </div> <div class="RightColumn"> content </div> </div> </div> </form> </body> </html> The first lines with <%@ Register ... %> directive register Kentico CMS Controls and other libraries on the page so that you can use them. They also register the header control. They are followed by document definition and by standard HTML page code. The <head> section contains the GetPageTags method that renders page title, description and keywords metadata and the link to the main.css file. The <div> elements inside the <form> section define the layout of the page. Please switch to the Design mode now. Drag and drop the following controls on the form and set their properties: CMSPageManager (inside the header section) Header.ascx (just after the CMSPageManager)




31


CMSTreeMenu (inside the menu section) • SelectNodesPath: /services/% • Indentation: 3 • DisplayHighlightedItemAsLink: True

The CMSTreeMenu control displays hierarchical menu. You can specify the menu items (SelectNodesPath), indentation, different styles for every menu level (CSSPrefix), etc. CMSBreadCrumbs (at the beginning of the content section) The CMSBreadCrumbs control displays breadcrumb navigation displaying visitor’s current position on the web site (such as Services > Service 1). It’s usually not necessary to set up any properties. CMSEditableRegion PageHeader (inside the content section, surrounded with <h1> element)

• ID: PageHeader • RegionTitle: Page Header

Region title specifies the title in the editing mode. The input type is TextBox by default. CMSEditableRegion PageText (inside the content section)

• RegionTitle: Page Text • RegionType: HtmlEditor

After you remove the temporary text, you will see a page like this:

Now that we have created a new page template (services.aspx), we need to register it in the Page Template Catalog so that the content editors can use it. Run the project and sign in to Kentico CMS Desk. Go to Development -> Page Templates. Add the new page template by clicking the New button in the main toolbar. Enter the following values:

• Page Template Name: Services • Page Template File Name: services.aspx

Click OK to save. Now the content editors can use this template. Go to the Content section and create a new page (menu item) under the root with the following values:

• Caption: Services • Order: 2 • Page Template: Services

Leave the other values empty or use the default values. Click OK to Save. After you create the new page, click on the Site icon in the main toolbar and enter some text in the Page Header and Page Text editable regions. Click Save to save the changes.



32


Click Services in the left tree view, click New in the main toolbar and create a new page. Enter the following values:

• Caption: Service 1 • Page Template: Services

Click OK to save changes. Switch to the Site view and enter some text in the editable regions. Click Save to save changes. You can try to create other pages in this section now. As you can see, we have created a re-usable page template with main menu, left sub-menu and editable regions.



33


Step 4 – Creating a Product Catalog In this Step, we will create a simple product catalog with several categories, product previews and product details. Unlike the previous examples, this page doesn’t use editable regions. Instead, it uses separate, stricly structured documents (product descriptions). These documents allow you to easily separate content and design and store data in a standard relational table. Close the browser and go back to Visual Studio.NET. Add a new page called products.aspx to the project. Switch to the HTML mode and remove all lines except the first one with <%@ Page ... %> directive. Put the following content after the Page directive: <%@ Register TagPrefix="uc1" TagName="Header" Src="Header.ascx" %> <%@ Register TagPrefix="cc1" Namespace="Kentico.CMS.CMSControls" Assembly="Kentico.CMS.CMSControls" %> <%@ Register TagPrefix="cc2" Namespace="Kentico.CMS.TreeEngine" Assembly="Kentico.CMS.TreeEngine" %> <%@ Register TagPrefix="cc3" Namespace="Kentico.CMS.DataEngine" Assembly="Kentico.CMS.DataEngine" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <%=CorporateSite.Functions.GetPageTags("/products")%> </head> <body> <form id="Form1" method="post" runat="server"> <div class="MainPage"> header <div class="Content"> <div class="CategoryMenu"> menu </div> <div class="ProductList"> content </div> </div> </div> </form> </body> </html> Switch to the Design mode and drag and drop the following controls on the page and set their properties: Header.ascx (inside the header section) CMSTreeMenu (inside the menu section)

• SelectNodesPath: /products/% • DisplayHighlightedItemAsLink: True • Indentation: 3

CMSBreadCrumbs (inside the content section) CMSDataList (inside the content section)

• SelectNodesClassName: cms.product




34


• TransformationName: cms.product.preview • SelectedItemTransformationName: cms.product.default • RepeatColumns: 2 • CellPadding: 5

The CMSDataList control is one of the controls that allow you to display lists of documents (such as product listings, list of news, etc.). You can also use CMSDataGrid and CMSRepeater. All of these controls are inherited from the standard ASP.NET DataList, DataGrid and Repeater, but they are much easier to use. The CMSDataList control allows you to display the list of documents and the detail view of the selected document. The SelectNodesClassName property specifies the type of documents that should be displayed (products). The SelectNodesPath property is not set now which means that the control automatically retrieves all documents under current site section (under /products/%, under /products/category A/%, etc.). The TransformationName property specifies the ASCX transformation that is used to display items in the listing. It is an alternative way to specifying the ItemTemplate section in the HTML mode. The SelectedItemTransformationName property specifies the ASCX or XSLT transformation that is used to display the selected item. We will take a closer look at transformations in the next step. The RepeatColumns property defines the number of columns and the CellPadding property defines the padding of every item. After you remove temporary text, you will see a page like this:

Run the project and sign it to Kentico CMS Desk. We need to register the new page template first. Go to Development -> Page Templates and register the new page template with following values:

• Page Template Name: Products • Page Template File Name: products.aspx

Go to the Content module and create a new page with following values under the root:

• Caption: Products • Order: 3 • Page Template: Products

Leave the other values empty or use the default values. Click OK to save changes. Select the newly created Products document in the treeview and create the following pages under Products:

• Caption: Category 1 • Page Template: Products

• Caption: Category 2 • Page Template: Products



35


Now we will create sample products under each category. Please create 2 documents of type Product under Category 1and 2 documents of type Product under Category 2. You can enter any values and you can upload some pictures as product photos. When you sign out from Kentico CMS Desk and go to the live site –> Products, you can see a page like this:

As you can see, we have used pages as containers for products. This allows content editors easily locate the products and modify them. It’s also easy for you to display such content on the page. Kentico CMS allows you to create up to 14 levels of nested documents/pages. Later in this tutorial, you will learn how to define your own document types (such as house, car, PC, etc.) with custom fields.



36


Editable Regions or Separate Documents? Now you may wonder what the difference between pages with editable regions and separate documents, such as products, is. Here’s a short overview:

Editable Regions Separate Documents How they are stored

Single database column Content_MenuItem.MenuItemContent contains all editable regions on the given page as one XML document.

Each document type has its own database table. Every document attribute has its own column. For example, all products are stored in the table Content _Product with columns:

• ProductID • ProductName • ProductDescription • ProductPrice • ProductPhoto

How they are displayed

You can display the content using CMSPageManager and one or more CMSEditableRegion controls.

You can display the content using several built-in controls (CMSDataList, CMSRepeater, CMSViewer, etc.). You can also retrieve them using Kentico CMS API as DataSet or XML and display them and third-party controls.

How they are edited

You need to create a new page, open it in the Site mode and you can make the changes.

You need to create a new document of the appropriate type (product/article/news/...).

When Should I Use Editable Regions? Use editable regions when you want to create page with unstructured content and you do not expect that you will need to work with separate fields or parts of content in future. When Should I Use Separate Documents? Use separate documents when you need to create strictly structured and typed content, such as product descriptions, news items, job openings, etc. The structured content alllows you to fully separate content and design and display the same content in different ways (using different transformations and CSS styles).



37


Step 5 – Modifying the Transformations In this step, we will change the way the products are displayed in the detailed view. You will learn how you can manage different transformations for displaying structured content. Open the web site in your browser and go to the Products section. This listing uses the cms.product.preview transformation specified in the CMSDataList.TransformationName property. When you click on the link Product A1, you’re redirected to the page with product details:

The details are displayed using the cms.product.default transformation specified in the CMSDataList.SelectedItemTransformationName. How It Works You may wonder how the DataList knows when to display the listing or the detail view:

• When you choose the Products page, the DataList receives the current URL, such as http://localhost/KenticoCMS/Products.aspx. It parses the URL and retrieves the selected path /Products, which is a path to page. The DataList understands that this is a page and it should display the listing.

• When you click on some link in the listing, you’re redirected to the URL like this:

http://localhost/KenticoCMS/Products/Category 1/Product A1.aspx. The DataList parses the URL and retrieves the selected path /Products/Category 1/Product A1. It understands that this is a selected product (the type of the selected document is the same as the CMSDataList.SelectNodesClassName value) and displays the detail view.

As you can see the redirection to the detail view is ensured by redirecting the user to the appropriate URL instead of using postback. It also means that every document and every page has its own URL and you can copy the current URL from the address bar and send it to some other person without worrying if he/she gets the same page. Now we will take a closer look at the transformations. Sign it to Kentico CMS Desk and go to the Development module -> Document Templates -> Application: CMS -> Product -> Transformations. Here you can find the default and preview transformations. Click to edit the preview transformation. You will see a code like this (we have removed extra code that is not important for you now). It is used for displaying every document:



38


<h2><a href='<%# CorporateSite.Functions.GetUrl(DataBinder.Eval(Container,"DataItem.AliasPath")) %>'> <%# DataBinder.Eval(Container, "DataItem.ProductName") %> </a></h2> <p>$<%# DataBinder.Eval(Container, "DataItem.ProductPrice") %></p> <p> <img src='<%# ResolveUrl("~"&Server.UrlPathEncode(DataBinder.Eval(Container,"DataItem.ProductPhoto"))) %>'> </p> As you can see, it is actually a standard ASP.NET code. You can use expressions, such as <%# DataBinder.Eval(Container, "DataItem.ProductPrice") %> to insert appropriate values in the HTML code. When you need to render an URL of the displayed document, use the following expression: <%# CorporateSite.Functions.GetUrl( DataBinder.Eval(Container, "DataItem.AliasPath")) %> It uses the CorporateSite.Functions.GetUrl method that ensures you get a working URL. Please note: If your project is called WebProject, you may need to refer to the method as WebProject.Functions.GetUrl(...). When you need to display an image that was selected by content editor using the image selection field, you can use an expression like this: <img src='<%# ResolveUrl("~" & Server.UrlPathEncode(DataBinder.Eval(Container, "DataItem.ProductPhoto"))) %>'> It uses standard ASP.NET methods to get the image URL. Using XSLT If you prefer using XSL transformations, you can define a new transformation and choose the XSL option. Then click the Use Default Transformation button and you get a basic XSL code for your document type that you can modify. Now that you understand the code, you can try to modify the default and preview transformations so that they display different fields or different design.



39


Step 6 – Displaying the News Section and the Latest News In this step, we will add the News section and the Latest News column on the home page. You will learn how to use the CMSRepeater and QueryRepeater controls. Go to Visual Studio.NET and add a new web form to your project called news.aspx. Switch to the HTML mode and remove all code except for the <%@ Page ... %> directive. Copy and paste the following code just under the Page directive: <%@ Register TagPrefix="cc3" Namespace="Kentico.CMS.DataEngine" Assembly="Kentico.CMS.DataEngine" %> <%@ Register TagPrefix="cc2" Namespace="Kentico.CMS.TreeEngine" Assembly="Kentico.CMS.TreeEngine" %> <%@ Register TagPrefix="cc1" Namespace="Kentico.CMS.CMSControls" Assembly="Kentico.CMS.CMSControls" %> <%@ Register TagPrefix="uc1" TagName="Header" Src="Header.ascx" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <%=CorporateSite.Functions.GetPageTags("/news")%> </head> <body> <form id="Form1" method="post" runat="server"> <div class="MainPage"> content </div> </form> </body> </html> Switch to the Design mode, drag and drop the following controls in the content section and set their properties: Header.ascx CMSRepeater

• SelectNodesPath: /news/% • SelectNodesClassName: cms.news • SelectNodesOrderBy: NewsReleaseDate DESC • TransformationName: cms.news.preview • SelectedItemTransformationName: cms.news.default

The SelectNodesPath property specifies that the documents should be selected from the /news/% section. The SelectNodesClassName property defines the type of documents that should be retrieved. The SelectNodesOrderBy property specifies the SQL sorting expression used for the listing (you could use also the SelectNodesWhere property to specify SQL WHERE expression). The TransformationName property specifies the transformation used for the listing view and the SelectedItemTransformationName specifies the transformation for the detail view. After you remove the temporary text, you will see a page like this:




40


Run the web project and go to Kentico CMS Desk -> Development -> Page Templates. Register the new page template with following values:

• Page Template Name: News • Page Template File Name: News.aspx

Click OK to save. Go to the Content module and create a new page under the root with following values:

• Caption: News • Order: 4 • Page Template: News

Leave the other values empty or use the default values. Click OK to save changes. Click the News item in the tree view and create two documents of type news under this section. Use the current date and time in the Release Date field. When you go to the live web site now, you will see a page like this:

When you click on some news item, its full text is displayed.

Displaying the Latest News Column on the Home Page Now that you know how to display all news, you will learn how to display the latest 3 news on the home page. Go back to Visual Studio.NET, open the default.aspx page in design mode and add drag and drop the QueryRepeater control on the web form. Set the following properties:

• QueryName: cms.news.selectlatest • TransformationName: cms.news.preview

The QueryRepeater executes the query specified in the QueryName property and displays returned records using the ASCX transformation specified in the TransformationName property. Switch to the HTML mode and make sure the QueryRepeater is placed inside the <DIV> element with class=“ContentNewsPadding“.



41


Run the web project and see the web page. It should look like this:

As you can see, the QueryRepeater control (and also the QueryDataGrid and QueryDataList controls) is useful in situations when you need to run a special query, not just retrieve all documents from the selected web site section. The option of writing your own queries gives you the same flexibility as you would have in pure ASP.NET, but it makes the whole task much easier. Defining Custom Queries If you need to use custom queries for displaying content, you need to define them in the Kentico CMS Desk -> Development -> Document Templates -> Application: CMS -> ... select the appropriate document type ... -> Queries. Here you can define any number of queries. When you refer to the query in the QueryName property, you must use the fully qualified name, such as cms.news.selectlatest. If you need a database documentation, please see the Kentico CMS Database Reference (CHM file) in the Start menu. Here’s an example of such a query: SELECT top 3 view_cms_tree_joined.*, Content_News.* FROM view_cms_tree_joined INNER JOIN content_news ON view_cms_tree_joined.foreignkeyvalue = content_news.NewsID WHERE classname = 'cms.news' AND NewsReleaseDate <= GetDate() AND Published = 1 AND (##WHERE##) ORDER ##ORDERBY##

Please note the view_cms_tree_joined view. It contains data from the CMS_Tree table and some other (extending) tables. Then, the query joins the document type-specific table Content_News with news data. Special Macro Expressions in Queries As you can see in the samle above, the queries can contain special expressions ##WHERE## and ##ORDERBY##. These expressions are replaced with values in the QueryRepeater.SelectNodesWhere and QueryRepeater.SelectNodesOrderBy properties respectively. In this way you can further modify the query as you need.



42


Step 7 – Creating a Contact Page with Contact Form In this step, we will create a contact page with a contact form. We will use editable regions and you will learn how add your own controls and code to the page template. Please note: There’s also an easier way how to create on-line forms without programming – you will learn it later in Step 15. Go to Visual Studio.NET and add a new web form called contact.aspx. Switch to the HTML mode and remove all lines except for <%@ Page ... %> directive. Add the following code after the Page directive: <%@ Register TagPrefix="uc1" TagName="Header" Src="Header.ascx" %> <%@ Register TagPrefix="cc1" Namespace="Kentico.CMS.CMSControls" Assembly="Kentico.CMS.CMSControls" %> <%@ Register TagPrefix="cc2" Namespace="Kentico.CMS.TreeEngine" Assembly="Kentico.CMS.TreeEngine" %> <%@ Register TagPrefix="cc3" Namespace="Kentico.CMS.DataEngine" Assembly="Kentico.CMS.DataEngine" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <%=CorporateSite.Functions.GetPageTags("/contact")%> </head> <body> <form id="Form1" method="post" runat="server"> <div class="MainPage"> content <h1>Contact Us</h1> <table> <tr> <td>Your e-mail:</td> <td></td> </tr> <tr> <td>Your message:</td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> </div> </form> </body> </html> Drag and drop the following controls in the content section and set their properties: CMSPageManager Header.ascx CMSEditableRegion




43


• ID: MainText • RegionTitle: Main Text • Region Type: HTML Editor • DialogHeight: 400 • DialogWidth: 700

Textbox txtEmail (next to the Your e-mail label)

• ID: txtEmail • Columns: 38

Textbox txtMessage (next to the Your message label)

• ID: txtMessage • TextMode: MultiLine • Columns: 30 • Rows: 5

Button (under the textbox txtMessage)

• Text: Send Message Label lblResult (under the submit button)

• ID: lblResult • Text: (clear the value)

You should see a page like this:

Now we will write code that sends and e-mail with entered message. Double-click the button, you will be redirected to the code behind. Add the following code at the beginning: [VB.NET] Imports System.Web.Mail [C#] using System.Web.Mail;



44


Add the following code to the button Click event handler: [VB.NET] Dim msg As New Mail.MailMessage msg.To = "[email protected]" msg.From = txtEmail.Text msg.Subject = "Contact Form Message" msg.Body = "<html><body>" & Replace(Server.HtmlEncode(txtMessage.Text), _ vbCrLf, "<br>") & "</body></html>" msg.BodyFormat = MailFormat.Html SmtpMail.SmtpServer = "localhost" SmtpMail.Send(msg) lblResult.Text = "Thank you for your message. We will contact you soon." [C#] MailMessage msg = new MailMessage(); msg.To = "[email protected]"; msg.From = txtEmail.Text; msg.Subject = "Contact Form Message"; msg.Body = "<html><body>" + Server.HtmlEncode(txtMessage.Text).Replace("\n", "<br>") + "</body></html>"; msg.BodyFormat = MailFormat.Html; SmtpMail.SmtpServer = "localhost"; try { SmtpMail.Send(msg); lblResult.Text = "Thank you for your message. We will contact you soon."; } catch (Exception ex) { lblResult.Text = "Could not send. Check the correctness of email adress."; } Please replace the e-mail address and the SMTP server address in the code with your values. Run the web project and sign in to Kentico CMS. Go to the Development -> Page Templates and register the new page template with following values:

• Page Template Name: Contact • Page Template File Name: contact.aspx

Go to the Content section and create a new page under the root with following values:

• Caption: Contact • Order: 6 • Page Template: Contact

Click Site in the main toolbar and enter some page text. Click the Save link to save changes and sign out. Go to the Contact page on the live site. You will see a page with dialog like this:





45


Enter a valid e-mail address and message text and send the message. You should receive it to your e-mail. This page template shows you how you can combine Kentico CMS content with your own code.



46


Step 8 – Adding Search Capabilities In this step, you will learn how to add search capabilities to your web site. First, we will create a search page template and then, we will add the Search dialog to the web site header. Go back to Visual Studio.NET and add a new web form called search.aspx. Remove all the code except for the <%@ Page ...%> directive and put the following code instead of it: <%@ Register TagPrefix="cc3" Namespace="Kentico.CMS.DataEngine" Assembly="Kentico.CMS.DataEngine" %> <%@ Register TagPrefix="cc2" Namespace="Kentico.CMS.TreeEngine" Assembly="Kentico.CMS.TreeEngine" %> <%@ Register TagPrefix="cc1" Namespace="Kentico.CMS.CMSControls" Assembly="Kentico.CMS.CMSControls" %> <%@ Register TagPrefix="uc1" TagName="Header" Src="Header.ascx" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <%=CorporateSite.Functions.GetPageTags("/search")%> </head> <body> <form id="Form1" method="post" runat="server"> <div class="MainPage"> content </div> </form> </body> </html> Switch to the Design mode, drag and drop the following controls in the content section of the page and set their properties: Header.ascx CMSSearchDialog

• ShowSearchScope: False The CMSSearchDialog control displays a simple dialog for entering the text and the search mode. CMSSearchResults

• CMSSearchDialogID: CMSSearchDialog1 • TargetURL: ~/SearchResultRedirect.aspx?idpath= • UseFriendlyUrls: False

The CMSSearchResults control displays the results of the search. It can be easily joined with the CMSSearchDialog by setting the CMSSearchDialogID property to the ID of the CMSSearchDialog control on the page. It’s recommended that you use the SearchResultRedirect.aspx page that ensures correct redirection to pages and files. This page also allows you to modify the redirection to the correct URL if you have some special requirements and the default redirection doesn’t work well for you. You need to set the TargetURL and UseFriendlyUrls properties and shown above. You should see a page like this:




47


Run the project and sign in to Kentico CMS Desk. Go to Development -> Page Templates and register the new page template with following values:

• Page Template Name: Search • Page Template File Name: search.aspx

Go to the Content module and create a new page under the root with following values:

• Caption: Search • Order: 5 • Page Template: Search

Leave the other values empty or use the default values. View the page in the Site mode. You will see a page like this:

Enter some word and click Go. Verify that the result links redirect you to the correct document.

Adding Search Box to the Site Header Now we will add a search box to the site header. Go back to Visual Studio.NET and open the header.ascx control in the design mode. Add a new textbox and a button next to the Search: text:

Set the text of the button to Go. Double click the button and add the following code to the event handler:



48


[VB.NET] Response.Redirect("~/search.aspx?searchtext=" & _ Server.UrlEncode(TextBox1.Text)) [C#] Response.Redirect("~/search.aspx?searchtext=" + Server.UrlEncode(TextBox1.Text)); This code redirects user to the search page with search text in the URL parameter. Now we need to add some small code to the search.aspx page to receive this parameter and set appropriate properties of the search controls. Open code behind of the search.aspx page and add the following code to the Page_Load event: [VB.NET] If Not Page.IsPostBack AndAlso _ Not Request.QueryString("SearchText") Is Nothing AndAlso _ Request.QueryString("SearchText") <> "" Then CMSSearchDialog1.SearchExpression = Request.QueryString("SearchText") CMSSearchResults1.SearchExpression = Request.QueryString("SearchText") CMSSearchResults1.CMSSearchDialogID = "" Else CMSSearchResults1.CMSSearchDialogID = "CMSSearchDialog1" End If [C#] if ((! Page.IsPostBack) && ! (Request.QueryString["SearchText"] == null) && Request.QueryString["SearchText"] != "") { CMSSearchDialog1.SearchExpression = Request.QueryString["SearchText"]; CMSSearchResults1.SearchExpression = Request.QueryString["SearchText"]; CMSSearchResults1.CMSSearchDialogID = ""; } else { CMSSearchResults1.CMSSearchDialogID = "CMSSearchDialog1"; } Run the web project. Enter some text in the search textbox and clicko Go. You should see search results on the search.aspx page. If you do not want to display the Search page link in main menu, sign in to Kentico CMS Desk, edit the /Search page and check the Hide in Navigation checkbox.



49


Step 9 – Adding the Site Map In this step, we will create a new page template that will display the site map. Go to Visual Studio.NET and add a new web form called sitemap.aspx. Switch to the HTML mode, remove all the code except for the <%@ Page ...%> directive and put the following code instead of it: <%@ Register TagPrefix="cc3" Namespace="Kentico.CMS.DataEngine" Assembly="Kentico.CMS.DataEngine" %> <%@ Register TagPrefix="cc2" Namespace="Kentico.CMS.TreeEngine" Assembly="Kentico.CMS.TreeEngine" %> <%@ Register TagPrefix="cc1" Namespace="Kentico.CMS.CMSControls" Assembly="Kentico.CMS.CMSControls" %> <%@ Register TagPrefix="uc1" TagName="Header" Src="Header.ascx" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <%=CorporateSite.Functions.GetPageTags("/sitemap")%> </head> <body> <form id="Form1" method="post" runat="server"> <div class="MainPage"> content </div> </form> </body> </html> Switch to the design mode and add the following controls in the content section: Header.ascx CMSSiteMap The CMSSiteMap control displays dynamically the site map. It’s not necessary to set any properties in most cases. Run the web project and sign in to Kentico CMS. Go to Development -> Page Templates and register the new page template with following values:

• Page Template Name: Site Map • Page Template File Name: sitemap.aspx

Go to the Content module and create a new page under the root with following values: • Caption: Site Map • Order: 7 • Page Template: Site Map

Leave the other fields empty or use the default values. See the live web site. It should look like this:




50


Step 10 - Using Custom Document Types With Kentico CMS, you can define custom document types with custom fields. Custom document types allow you to fully separate content and design as you can use custom fields of different data types. In this chapter, we will create a new document type “Computer“ and we will add a new category „Computers“ under the Products section.

Defining a New Document Type Sign in to Kentico CMS Desk and go to the Development module. Unfold Document Templates and click Application: CMS. Click New to create a new document template (document template is just another name for document type). Enter the following values in step 1:

• Display Name: Computer • Code Name: Computer (the whole code name is CMS.Computer then)

In step 2, you need to specify the name of the database table and of its primary key. This database table will store information about computers. Leave the default values and click Next. In step 3, you can define the attributes of the new document type “Computer“. These attributes are automatically created in the CMS_Computer table and they are displayed in the editing form. Enter the following attributes: Name Type Allow Empty Field Caption Field Type ComputerName Text (100) No Name TextBox ComputerDescription Long Text No Description HTML Area ComputerMemory Integer No Memory (MB) TextBox ComputerProcessor Text (100) No Processor Drop-down List

Options: Intel;Intel AMD;AMD

ComputerPhoto Text (400) Yes Photo Image Selection Click Next to continue to step 4. Now you can choose the document attribute that will be used as a document name. It’s value will be displayed in the tree structure of documents in the Content section and it will be used in site navigation. Choose the ComputerName field. Uncheck the Use versioning and workflow box. Click Next. In step 5, choose only the Page (Menu Item) in the listbox. It means that documents of type computer can only be placed under some page. Click Next. The wizard now finishes the configuration of your new document type. It generates SQL queries for SELECT, UPDATE, INSERT, DELETE and search and it creates a default transformation.

Defining the Transformations We will define two transformations for computer: default (detailed view) and preview (bried listing view). Unfold the newly created document type Computer in the left treeview and select Transformations. Edit the default transformation and replace the default transformation with following code:



51


<h1><%# DataBinder.Eval(Container, "DataItem.ComputerName") %></h1> <p><img alt="" align="left" src="<%# ResolveUrl("~" + Convert.ToString(DataBinder.Eval(Container,"DataItem.ComputerPhoto"))) %>"/><%#DataBinder.Eval(Container, "DataItem.ComputerDescription")%></p> <p>Memory: <%# DataBinder.Eval(Container, "DataItem.ComputerMemory") %> MB</p> <p>CPU: <%# DataBinder.Eval(Container, "DataItem.ComputerProcessor") %></p> Create a new ASCX transformation called preview and enter the following code of the transformation: <div class="ProductListing"> <div class="ProductListingPadding"> <h2><a href='<%# CorporateSite.Functions.GetUrl( DataBinder.Eval(Container,"DataItem.AliasPath")) %>'><%# DataBinder.Eval(Container, "DataItem.ComputerName") %> </a></h2> <p> <img alt="" src='<%# ResolveUrl( "~" + WebProject.Functions.UrlPathEncode(DataBinder.Eval(Container,"DataItem.ComputerPhoto"))) %>'/> </p> </div> </div>

Creating a Page Template for Computer Catalog and Computer Details We will create a similar page template to the template we created for displaying products in Step 5. Open the CorporateSite project in Visual Studio.NET and create a new web form Computers.aspx. Open the new web form in HTML mode and replace all text except for the first line with <%@ Page... %> directive with following code that we used for the Products.aspx page template: <%@ Register TagPrefix="cc3" Namespace="Kentico.CMS.DataEngine" Assembly="Kentico.CMS.DataEngine" %> <%@ Register TagPrefix="cc2" Namespace="Kentico.CMS.TreeEngine" Assembly="Kentico.CMS.TreeEngine" %> <%@ Register TagPrefix="cc1" Namespace="Kentico.CMS.CMSControls" Assembly="Kentico.CMS.CMSControls" %> <%@ Register TagPrefix="uc1" TagName="Header" Src="Header.ascx" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <HTML> <HEAD> <%=CorporateSite.Functions.GetPageTags("/home")%> </HEAD> <body background='<%=ResolveUrl("~/")%>images/background.gif'> <form id="Form1" method="post" runat="server"> <div class="MainPage"> <uc1:header id="Header1" runat="server"></uc1:header> <div class="Content"> <div class="CategoryMenu"> <cc1:cmstreemenu id="LeftMenu" runat="server" SelectNodesPath="/products/%" DisplayHighlightedItemAsLink="True" Indentation="3"></cc1:cmstreemenu> <br>




52


</div> <div class="ProductList"> > <cc1:CMSBreadCrumbs id="CMSBreadCrumbs1" runat="server"></cc1:CMSBreadCrumbs> <br> <cc1:cmsdatalist id="ProductList" runat="server" SelectNodesClassName="cms.product" RepeatColumns="2" CellPadding="5" TransformationName="cms.product.preview" SelectedItemTransformationName="cms.product.default"></cc1:cmsdatalist> </div> </div> </div> </form> </body> </HTML> Now switch to the Design mode, display the properties of the CMSDataList control and set the following properties:

• SelectNodesClassName: cms.computer • TransformationName: cms.computer.preview • SelectedItemTransformationName: cms.computer.default

We have changed the properties so that the control displays computers instead of products. Compile and run the application. Go to the CMS Desk -> Development section and register the new page template with name Computers and file name computers.aspx in the Page Templates section. Go to the Content section and create a new page under the Products section. It will use your new Computers page template. Then create one or two documents of type Computer under that page:

When you see the live page, it will look like this:

As you can see custom document types greatly simplify your daily job when developing a web site – the wizard generates database table, SQL queries and you can define the editing form without programming. Displaying them on a web site is much easier than with pure ASP.NET – you only drag and drop the appropriate control on the web form and set a few properties – without writing a single line of code!



53


Step 11 - Adding The Editing Buttons The editing buttons allow content editors create and modify documents directly from the web site that is displayed in the edit mode (CMS Desk -> Content -> Site mode -> choose the Edit radio button). They provide an easier and faster way of editing the content. If you want to display editing buttons on your pages, you need to add them manually. In this example, we will add the editing button for adding a new product in the Products section. Open page products.aspx in Visual Studio.NET in design mode. Add the following control just under the CMSTreeMenu control: CMSEditModeButtons

• SelectedNodeClassName: cms.product • Description: Add New Product: • DisplayDeleteButton: False • DisplayEditButton: False • DisplayNewButton: True • DisplayProperties: False

The CMSEditModeButtons control displays one or more editing buttons in the editing mode. You can choose which buttons should be displayed. The SelectedNodeClassName property specifies what kind of documents should be created. The Description property specifies the description of the block of buttons. After you open the page in the editing mode, you should see a page like this:

The page contains also the editing button for each product. This button was not displayed using our control, but it was already defined in the ASCX transformation cms.product.preview.



54


Step 12 – Creating a Multilingual Web Site Please note: This step is optional and you can skip it if you do not plan to use multiple languages on your site. Kentico CMS allows you to manage web site content in multiple languages. The editors as well as visitors can easily switch between several language versions. When you use multilingual support, there’s always some default language and its translations. Every document must have its default culture version, but it needn’t be translated into all languages. In this step, we will configure our single-language site for multilingual site.

Setting up multilingual support We need to make some changes in the site structure. The first level nodes will be culture versions and they will contain the web content. Go to CMSDesk -> Development -> Document Templates -> Application: CMS -> Root -> Allowed Child Templates and add the “Culture Version“ document type among document types that can be placed under the root. Go to the Content module and create the following culture versions under the root: Culture Name Culture Code English en-us French fr-fr German de-de Now move all content except the culture versions under the en-us document as we will use English as the default language. Your site structure will look like this:

Now go to the Administration module -> Users, edit user and set the Starting alias path value to /en-us (repeat this for all users). It ensures that the editors can work only with the default culture and don’t cause any inconsistency in the document culture versions. Open the web.config file, set the CMSUseMultilingualSupport key value to “true” and save it. As the Files folder was moved on the disk under the en-us folder, you need to move the folder on the disk back under the root of the web site since the URL of files and documents doesn’t contain the culture code.



55


Refresh the CMS Desk in your web browser. Now you will see the language selector in the main toolbar of the Content module. Select the Home document and choose French in the language selector. You will be asked if you want to create a new language version and if you want to pre-fill values with English content. Leave the checkbox checked and click the button to create a new language version of the document. Translate the menu item caption to “Introduction”. Switch to the site view and make some changes to the french version of the text.

Adding Language Selection to Your Web Site Now you will add a language selection to your web site. The language can be easily changed by calling the web page with URL parameter lang=<culture code>. It means we only need to add links with URL “?lang=<culture code>” to the header of the web site. Open the header.ascx file in Visual Studio.NET, in the HTML mode and add the following lines just after the search box: <br/> <a href="?lang=en-us">English</a> <a href="?lang=fr-fr">French</a> <a href="?lang=de-de">German</a> Save the header ascx file and run the live web site. You should see the language selection links at the top:

Now when you click on French, you will see the home page in French. The non-translated items will not be displayed. You can optionally choose that the non-translated items should be displayed in the default language (English). It can be configured on the control level (CombineWithDefaultCulture property) or globally, by adding the following web.config parameter: <add key="CMSCombineWithDefaultCulture" value="true"/> As you have seen, Kentico CMS allows you to easily convert single-language web site into a multilingual site.



56


Step 13 – Integrating the Newsletter Module Kentico CMS is delivered with built-in Newsletter module. It allows you to define newsletters, edit and send out newsletter issues, manage subscribers and get basic reports.

Creating a new newsletter in Kentico CMS Open Kentico CMS Desk, select the /News document in the Content section and create a new document of type Newsletter Container. Call it Newsletters. After you create it, select the new document and create a new document of type Newsletter under it with following values:

• Newsletter name: Newsletter 1 • Confirmation text: Thank you for subscribing. • Unsubscription text: Click here to unsubscribe.

Click OK to save the new newsletter.

Creating the subscription dialog Open the default.aspx page, switch to the HTML mode and add the following code to the beginning of the page: <%@ Register TagPrefix="cc4" Namespace="Kentico.CMS.NewsletterControls" Assembly="Kentico.CMS.NewsletterControls" %> Add the following code below the QueryRepeater control that displays the latest news: <cc4:NewsletterSubscriptionDialog id="NewsletterSubscriptionDialog1" runat="server" NewsletterNodePath="/News/Newsletters/Newsletter 1" /> The NewsletterSubscriptionDialog control displays a text field with submit button. When the user enters his/her e-mail address and clicks the button, he/she is subscribed to the newsletter with alias path specified in the NewsletterNodePath. Run the project and subscribe to the newsletter. You should receive a confirmation e-mail. You can also check your subscription details in the Kentico CMS Desk -> Tools -> Newsletter where you can manage all subscribers and their subscriptions.

Editing and sending the first newsletter issue Go to Kentico CMS Desk -> Content -> select the /News/Newsletters/Newsletter 1 document and create a new document of type Newsletter Issue under it. Enter the following values:

• Subject: My first issue • Text: This is my first newsletter issue. • Release date: select the current date and time

Click OK to save it. You should receive an e-mail within 2 minutes. If you do not receive it, please click the /News/Newsletters/Newsletter 1 document, choose the Site mode in the main toolbar and see how many e-mails were sent and what the last result was.



57


Step 14 – Creating Controls for Insertion into the Text Kentico CMS allows you to create user controls (ascx) and insert them into the text. This feature is very useful in the following situations:

• You need to create dynamic listing, such as „Latest news“ that can be displayed on several pages without modifying their page templates.

• You need to insert custom dialog or functionality into the text depending on the content editor’s choice without programming.

Creating the User Control Open the web project in Visual Studio and create a new user control named Top3News.ascx. Switch to its code behind and change the class the control inherits from to Kentico.CMS.CMSControls.InlineUserControl as shown in the following code: [VB.NET] Public Class Top3News Inherits Kentico.CMS.CMSControls.InlineUserControl [C#] public class Top3News : Kentico.CMS.CMSControls.InlineUserControl Switch to the HTML mode and add the following code under the <%@ Control ... %> directive: <%@ Register TagPrefix="cc1" Namespace="Kentico.CMS.CMSControls" Assembly="Kentico.CMS.CMSControls" %> <h2><asp:Label id="lblTitle" runat="server"></asp:Label></h2> <cc1:QueryRepeater id="QueryRepeater1" runat="server" QueryName="cms.news.selectlatest" TransformationName="cms.news.preview"> </cc1:QueryRepeater> Switch to the design mode. You should see something like this:

The QueryRepeater will display the latest news. Go to the code behind and add the following code to the Page_Load method: [VB.NET] lblTitle.Text = me.Parameter [C#] lblTitle.Text = this.Parameter; The Parameter property provides the value of the optional parameter of the inserted control. It will contain the title text.



58


Compile and run the project. Go to Kentico CMS Desk -> Development -> User controls. Click New and register your new user control with following properties:

• Control name: Top 3 News • Control file name: Top3News • Control parameter name: Title • Control description: This control displays the last 3 news.

Click OK to save it and go to the Content section. Edit the content of the Services page. Click the Insert User Control button In the WYSIWYG editor toolbar. The Insert User Control dialog appears. Select the Top 3 News user control and enter My Latest News in the Title parameter value.

Click OK to insert the control. The following text will be inserted in the WYSIWYG editor: %%control:TopNews?MyLatestNews%% Please note: you can insert such expressions directly in the text without using the Insert User Control dialog. You can even use it in plain textboxes and textareas. Save the page and see the live page. You will see something like this:

Please note: the user controls inserted into the text are correctly displayed only if you use Kentico CMS controls and ASCX or XSL transformation.



59


Step 15 – Creating On-Line Forms The Kentico BizForms module allows end users to create on-line forms without programming or database knowledge. In this chapter, you will learn how easily create a simple “Contact us“ form. Go to the Kentico CMS Desk -> Tools -> BizForms, click Add New Form and enter the following details:

• Form display name: Contact Us • Form code name: ContactUs • Table name: Form_ContactUs • Send data to e-mail: Check the box

o From e-mail: use your e-mail address o To e-mail: use again your e-mail address

• After the form is submitted: Display Text o Display text: Thank you for contacting us.

Click OK to save the new form. Now you will define form fields. Use the Add New Field button and create the following fields: Caption Code name Type Settings Empty Default Your name FullName Textbox Maximum

length = 100 No (uncheck the box)

Your e-mail Email Textbox Maximum length = 100

No (uncheck the box)

Message Message Textarea No (uncheck the box)

Now that we have defined the form, we will insert it on the page. There are two ways how to do that:

1. Programmatically – you will insert the Kentico.Form.BizForm control on the page and its parameters. You can find more details in Kentico CMS Developer’s Guide -> Extending Modules -> BizForms.

2. In the text – you will insert a user control into the text (similarly as you did in the previous chapter).

We will use the second (easier) option. Go to the Content section and edit the /Services document. In the WYSIWYG editor, click the Insert BizForm button. The Insert BizForm dialog appears. Click your new form Contact Us. The following expression is inserted into the text: %%control:BizFormControl?ContactUs%% (you can use the Insert BizForm button in the WYSIWYG editor toolbar to insert the form). It is then dynamically replaced with user control when the page is displayed. Save the page and switch to the published page. You will see your new form like this:



60


Step 16 – Other Modules Kentico CMS is also delivered with following modules whose usage is described in detail in Kentico CMS Developer’s Guide -> Extending Modules:

E-Commerce The E-commerce module allows you to integrate a shopping cart and management of orders to your web site.

Content Staging The Content Staging module allows you to synchronize content between several instances of Kentico CMS for staging (preview) or development purposes.

File Import The File Import module allows you to import specified folders and files into Kentico CMS.

On-line Gallery The On-line Gallery module allows you to easily create galleries of images with previews and detailed views. The images are automatically resized to specified size for faster download.

Forums The Forums module allows you to add discussion forums to your web site. The forums can be organized into several groups. The posts are displayed in the „conversation“ hierarchy and can be moderated.

This is the end of this tutorial. If you need more details on some topic, please see Kentico CMS Developer’s Guide or contact us at [email protected].



kenticocms tutorial 2003

Documents

kentico cms tutorial

kentico cms installation

programs kentico cms

kentico cms overview

better web sites

dynamic web sites

table of contents chapter

aspnet tutorial