Kentico.cms5

Kentico CMS 5 Website DevelopmentBeginner's Guide

Building professional and feature-rich websites with Kentico CMS 5

Thom Robbins

BIRMINGHAM - MUMBAI

Kentico CMS 5 Website DevelopmentBeginner's Guide

Copyright © 2010 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either expressed or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: September 2010

Production Reference: 1160910

Published by Packt Publishing Ltd. 32 Lincoln Road Olton Birmingham, B27 6PA, UK.

ISBN 978-1-849690-58-4

www.packtpub.com

Cover Image by Asher Wishkerman ([email protected])

Table of ContentsPreface 1

Chapter 1: Introducing Kentico CMS 5 7Kentico CMS 5 installation and configuration 8

Installing Kentico CMS 8Time for action – installing Kentico CMS 5 9Introducing content and site management 16

CMS Desk 16Time for action – logging into CMS Desk 17

Page editing 19Time for action – editing an existing page 20Time for action – modifying your profile 23

Site Manager 24Time for action – logging into Site Manager 24Time for action – shutdown and restart your website 25Time for action – adding users 27Summary 31

Chapter 2: A Tour of your New Website 33Content is king 33

General properties of a Document type 34Time for action – viewing available document types 34

Kentico CMS standard modules 37Time for action – creating a poll 38Time for action – using the WYSIWYG editor 44Time for action – creating a blog entry 47Page management 49Time for action – creating a new ASPX page template 51Time for action – creating a new Portal Engine page 58Time for action – the Design tab 62

Table of Contents

[ ii ]

Time for action – adding web parts 64Summary 66

Chapter 3: Managing the Content Process 67Fundamentals of site security 67Time for action – creating a new role 68Time for action – adding a user to another role 70Time for action – creating role-based content 74Time for action – display a customized product list 77Time for action – creating secure pages 82Workflow management 84Time for action – configuring workflow 85Time for action – executing the workflow 89Time for action – document rollback 92Summary 96

Chapter 4: Linking and Managing Documents 97Document linking 97Time for action – linking to an image 98Time for action – linking to a YouTube video 101Document attachments 104Time for action – adding document attachments 105Media libraries 108Time for action – viewing media libraries 108Time for action – displaying a media library image 109Time for action – creating a media library 112Time for action – batch operations in the media library 114Time for action – displaying our image gallery 116Time for action – uploading files on the live site 118Time for action – setting media library security 120Time for action – restricting file types 123Summary 124

Chapter 5: Extending the System 125Transformations 125Time for action – transformations in web parts 126Time for action – transforming the EventRepeater web part 128Time for action – handling attachments in transformations 132Time for action – displaying ratings in transformations 136Creating custom document types 137Time for action – creating custom document types 138Time for action – creating an employee biography 144Kentico API 148

Table of Contents

[ iii ]

Time for action – adding event handlers 148Time for action – sending a news item by e-mail 153Summary 155

Chapter 6: System Integration 157Social bookmarking 158Time for action – implementing social bookmarking 158Mapping 160Time for action – adding a new office 160Time for action – implementing Google maps 162Web services 164Time for action – building a web service 164Tag clouds 169Time for action – tag cloud web part 169Really Simple Syndication 171Time for action – subscribing to the news feed 171Time for action – the Blog RSS feed 173Time for action – implementing the Blog RSS feed 174Representational State Transfer 176Time for action – retrieving an API key 176Time for action – using the bit.ly API 177Time for action – building a REST user control 180Twitter 183Time for action – Twitter integration 183Summary 185

Chapter 7: Adding E-commerce Functionality to your Site 187Creating an e-commerce site 187Time for action – new site wizard 188Time for action – changing the e-commerce site master page 193Time for action – removing the log-on bar 194Product management 195Time for action – adding products 195Time for action – adding product options 197Time for action – customizing product categories 200Time for action – adding products to multiple categories 202Time for action – adding a new product 203Purchase process and payment gateway 206Time for action – making a purchase 206Time for action – payment gateways 210Time for action – customizing the purchase process 212Summary 213

Table of Contents

[ iv ]

Chapter 8: Advanced Management 215Widgets 215Time for action – adding widgets 216Time for action – creating a widget zone 218Time for action – creating a widget 221Multi-lingual sites 225Time for action – adding new languages 225Time for action – translating site content 227Time for action – viewing language-specific content 230Time for action – combing with current culture 232Site deployment 234Time for action – production deployment 234Time for action – deploying a new production site 236Time for action – incremental changes 238Time for action – scheduled tasks 240Summary 241

Chapter 9: SEO and Web Analytics 243SEO 243Time for action – forbidden URL characters 244Time for action – changing the site name 246Time for action – changing page metadata 248Time for action – using document aliases 250Time for action – using consistent tags 253Web analytics 256Time for action – configuring the Web analytics module 256Time for action – Web analytics reporting 257Time for action – tracking a marketing campaign 258Summary 261

Chapter 10: Building a Community Website 263Site development 263Time for action – creating the community site 264Time for action – assigning the CSS stylesheet 266Time for action – creating a page template category 268Time for action – creating a master page 269Time for action – uploading images 271Time for action – populating the master page 272Groups and membership 276Time for action – setting up the community starter site 276Time for action – user membership 278

Table of Contents

[ v ]

Time for action – modifying the registration form 280Time for action – creating new groups 283Time for action – creating a group page 285Summary 286

Index 287

PrefaceIn today's digital world, your web presence is an essential part of any business. Kentico CMS is an ideal solution for dynamic user-friendly enterprise websites. Out of the box, Kentico CMS includes a browser-based interface for rich content editing, over 200 web parts, built-in modules, and a highly customizable API.

In this book, we will build an example corporate website. Starting with the installation of your development environment and then diving into core modules and their features, over the course of the book, we will look at how we can use page templates, images, themes, web parts, and other features to provide a personalized experience for site visitors. We will also extend the site to include e-commerce functionality that manages products and payment gateways to accept money. Finally, we will extend our site, leveraging the built-in networking features to build a community for your company and integrate with external sites like Facebook and Twitter.

What this book coversChapter 1, Introducing Kentico CMS 5 introduces Kentico CMS 5 and explains the installation and architecture of your site. Once the Corporate Starter Site is installed into the development environment, you learn the basic navigation and tasks of the content editor and management interfaces.

Chapter 2, A Tour of your New Website explores the main components of the CMS system. You look at the importance of document types and how to build content pages using either the Portal Engine or ASPX page templates. This includes both the benefits and drawbacks that you may encounter using each method.

Chapter 3, Managing the Content Process covers site and role-based security. These security basics are extended to implement a News workflow to publish content to the site.

Preface

[ � ]

Chapter 4, Linking and Managing Documents explains how successful sites look at content as more than just HTML pages. This includes how to link to external sites, and manage pictures and videos using the media library features of your site.

Chapter 5, Extending the System covers site extensibility using built-in functions to transform system data and the Kentico API with C# to access Global Events and automate posting to Twitter.

Chapter 6, System Integration covers content syndication and integration into external data sources using APIs commonly available on the web today.

Chapter 7, Adding E-commerce Functionality to your Site explores implementing common e-commerce functionality that includes product management and shopping cart functionality.

Chapter 8, Advanced Management explains user personalization, multi-language options, and site deployment.

Chapter 9, SEO and Web Analytics discusses the usage of Search Engine Optimization (SEO) to help customers find your website and web analytics to validate and analyze the success of SEO. This is a combination of analyzing traffic patterns, optimizing pages, using best practices, and profiling visitors.

Chapter 10, Building a Community Site shows how to join together many of the lessons and features covered to build a community-driven website.

What you need for this book• Microsoft Windows XP or higher

• Microsoft .NET Framework 2.0 or higher

• Microsoft Visual Studio/Visual Web Developer 2005 or higher

• Microsoft SQL Server Express Edition or higher

• Any of the following browsers:

o IE 7.0, IE 8.0 (compatibility mode)o Firefox 3.5o Safari 4.0o Google Chrome 4.0

Preface

[ � ]

Who this book is forThis book is designed for web developers, designers, webmasters, content editors, and marketing professionals who want to develop a fully-featured web presence in a simple and straightforward process. No prior knowledge of Kentico CMS is expected. You do not require any detailed knowledge of programming or web development in order to follow this book. Any IT-confident individual will be able to use the book to produce an easy-to-navigate and usable website.

ConventionsIn this book, you will find several headings appearing frequently.

To give clear instructions of how to complete a procedure or task, we use:

Time for action – heading1. Action 1

2. Action 2

3. Action 3

Instructions often need some extra explanation so that they make sense, so they are followed with:

What just happened?This heading explains the working of tasks or instructions that you have just completed.

You will also find some other learning aids in the book, including:

Have a go hero – headingThese set practical challenges and give you ideas for experimenting with what you have learned.

You will also find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.

Preface

[ � ]

Code words in text are shown as follows: "When a new Blog post is added to the system, the PostTweet() method is called."

A block of code is set as follows:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Bitly.ascx.cs" Inherits="RESTExamples_bitly" %> <asp:Label ID="Label1" runat="server" Text="Enter Short URL" /> <asp:TextBox ID="txtURL" runat="server"></asp:TextBox> <asp:Button ID="bGetInfo" runat="server" Text="Get Info" onclick="bGetInfo_Click" /> <br /> <br /> <asp:TextBox ID="txtInfo" runat="server" Height="99px" TextMode="MultiLine" Width="358px"></asp:TextBox>

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:


New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "Choose the location for the Kentico ASP.NET project and files, and select Next."

Warnings or important notes appear in a box like this.

tips and tricks appear like this.

Preface

[ � ]

Reader feedbackFeedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.

To send us general feedback, simply send an e-mail to [email protected], and mention the book title via the subject of your message.

If there is a book that you need and would like to see us publish, please send us a note in the SUGGEST A TITLE form on www.packtpub.com or e-mail [email protected].

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.

Customer supportNow that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Downloading the example code for this book

You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

ErrataAlthough we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.

Preface

[ � ]

PiracyPiracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.

Please contact us at [email protected] with a link to the suspected pirated material.

We appreciate your help in protecting our authors, and our ability to bring you valuable content.

QuestionsYou can contact us at [email protected] if you are having a problem with any aspect of the book, and we will do our best to address it.

Introducing Kentico CMS 5We already know the importance of our company website and intranet. We spend a lot of time in meetings discussing ways to increase traffic, redesigning for better usability, and special promotions to increase brand awareness. One problem is the constant stream of maintenance and site update requests that continue to stretch the already thin resources. Just today, your webmaster was saying how full his inbox was with change requests. Worse yet, you've lost track of all the pages on the site. You can't remember what was on the site last week or even last year. You know this puts customers and business stakeholders in a difficult position.

These are the types of problems a Content Management System (CMS) solves. A Web Content Management System like Kentico CMS allows your team of web developers, business users, and designers to manage the entire website and publishing process, thus making it easier to create, edit, and publish content with greater consistency. Your web designers will be able to guarantee visual consistency across the site. Developers are able to deploy custom code and Rich Internet Applications (RIA). Business users are able to measure and track site usage. Online marketers are empowered to update and deploy content without the need of developer support. Regardless of the type of site, this combination of benefits will increase your team's productivity, lower cost, and reduce overall site maintenance.

Over the course of this book, you will build a production website with Kentico CMS. In this chapter, you will install a development environment and learn the management fundamentals of your new site.

1

Introducing Kentico CMS 5

[ � ]

By reading this chapter and following the exercises, you will:

Understand the typical uses of Kentico CMS 5

Learn the key architectural components of Kentico CMS 5

Install and configure a Kentico CMS sample site

Learn the fundamental interfaces for managing Kentico CMS

Edit an existing page

Perform basic user management

Kentico CMS 5 installation and configurationKentico CMS is an ASP.NET web project that uses SQL Server as the content repository. ASP.NET pages provide the application services and visual interface for end users and content administrators. This includes both dynamically generated and static content pages. Supporting this is a layer of security, workflow, and document versioning exposed as an Application Programming Interface (API). The ASP.NET pages interact with the API to store and retrieve website structure and data from the SQL Server content repository.

Technically, the application architecture is implemented on top of several Microsoft Windows Server technologies. Internet Information Services (IIS) is used to serve up the requested ASP.NET web pages. The .NET Framework is used to provide the API and advanced developer customization through Visual Studio. The file system and SQL Server database are used to store content.

Installing Kentico CMS Before we can dive into using Kentico, let's build our development installation. The website we will use throughout this book requires the following minimum configuration:

Microsoft Windows XP or higher

Microsoft .NET Framework 2.0 or higher

Microsoft Visual Studio/Visual Web Developer 2005 or higher

Microsoft SQL Server Express Edition 2005 or higher

Any of the following browsers:

IE 7.0 or IE 8.0

Firefox 3.5

Safari 4.0

Google Chrome 4.0

Chapter 1

[ � ]

Before you start

Before starting the Kentico CMS 5 installation, ensure that Visual Studio 2008, Internet Information Service (IIS), and SQL Server are installed and available on your local computer.

Time for action – installing Kentico CMS 5Now, let's start the installation process.

Need the bits?

You can download Kentico CMS 5 from http://www.kentico.com/download/trial-version.aspx.

1. Start the Kentico installation by double-clicking the KenticoCMS_5_0.exe icon from your local computer.

2. Enter the location to store Kentico program files and select Next, as shown in the following screenshot:


[ 10 ]

3. Select Launch Kentico CMS Web Installer and click Finish, as shown in the following screenshot:

Creating websites

The next step creates the actual website using the Kentico CMS Web Installer. This program copies the ASP.NET project files into the IIS directory and creates the website. The Kentico CMS Web Installer is a program available within the Start menu under the Kentico program files.

4. Select the versions of the .NET Framework and click Next, as shown in the following screenshot:

Chapter 1

[ 11 ]

What .NET version should I select?

This selection determines which version of Visual Studio the Kentico CMS ASP.NET web project will use when started. For all the examples in this book, we will use Visual Studio 2008.

5. Select the default location for application pages and select Next, as shown below. Examples in this book will use the Visual Studio 2008 built-in Web Server.

6. Choose the location for the Kentico ASP.NET project and files, and select Next.


[ 12 ]

Project files

The location selected in this step is where you will find the ASP.NET Web Project and the associated files. For this installation, we will select the default location, namely, the IIS root. If your company has naming requirements or you place your projects in other locations, then this is where you would specify these.

7. Select the full Kentico CMS Installation.

8. Once the files are copied to the default website directory, the Kentico website is installed. To configure the next step of the installation, select Open the web site, as shown in the following screenshot:

9. At this point, both the program files and website are installed and available on your local machine. Start the project in Visual Studio.

Debugging

Depending on the configuration of your development machine, you may be asked to enable debugging when you start the web project for the first time. Enabling this will allow you to set breakpoints for debugging.

10. With the files installed, the next step is to configure the SQL Server database. Enter the name of your SQL Server installation and type of authentication and select Next, as shown in the following screenshot:

Chapter 1

[ 13 ]

SQL Server naming

If you don't know the name of your SQL Server database, you may need to ask your system administrator. For SQL Server Express, the database name most likely follows the format <your machinename>\SQLEXPRESS.

11. enter the name of the database to use for the CMS repository and select Next, as shown in the following screenshot:


[ 14 ]

Database naming

You are creating a new database to store your content. Make sure that you create a unique name that is easily recognizable

12. Select the corporate site template and select Next, as shown in the following screenshot:

Selecting starter sites

We are selecting a starter site that contains pre-built pages and ready-to-use functionality.

13. Click Continue to the new web site to begin setting up the website configuration, as shown in the following screenshot:

Chapter 1

[ 15 ]

14. You will then be able to see the configured sample corporate site, as shown in the following screenshot:


[ 16 ]

What just happened?Congratulations! You have just completed the installation of Kentico CMS 5 and configured your first website. The installation process was performed in two parts. In the first part, you installed the files necessary to run Kentico CMS 5 and the tools needed to create additional websites. This is a one-time installation process for your development machine. Once this was completed, we then configured the corporate sample site using the Kentico CMS Web Installer. This included the configuration of the SQL Server content repository. As we progress through the rest of this book, we will continue to build this site and use the Kentico CMS Web Installer to build additional sites.

Have a go hero – research development optionsDuring the installation, we deployed the program files to the built-in web server for Visual Studio. Do some research to understand why this was a good choice and what the pros and cons are for using a local IIS installation.

Introducing content and site managementWeb Content Management System (WCMS) is designed to manage your web content. Web content is the text, structure, and navigation elements in a web page. Essentially, it is the visual and audio components that a user will encounter as part of their user experience on a website. This includes applications, code, images, sounds, data, PDFs, and spreadsheets, to name a few. Web content is maintained and presented in pages. It's these pages that are the key focus of a WCMS. Your content editors and authors are concerned about the content lifecycle. This lifecycle is concerned with the presentation and display of content within web pages and includes creating, editing, updating, publishing, and archiving content. Within Kentico CMS, the content lifecycle of an individual website is managed using the CMS Desk web interface. Developers and site administrators who need to manage system-wide settings, code, and configuration will use the Site Manager interface.

CMS DeskCMS Desk is a content editing interface. It allows users to edit and preview content, organize site structure, and manage modules for individual websites. Additionally, it enables users to organize multi-language content and switch between different language versions of the same document. As we will see in a later chapter, the CMS Desk also enables web masters to prepare customizable workflow and approval processes for different document types and site sections.

Chapter 1

[ 17 ]

Time for action – logging into CMS DeskNow let's log in to CMS Desk.

1. Select the CMS Desk hyperlink from the live site, as shown in the following screenshot:


[ 1� ]

2. Log in as the global administrator. Use the default username administrator and leave the password blank, as shown in the following screenshot:

3. When logged in, you will see the CMS Desk screen, as shown in the following screenshot:

Chapter 1

[ 1� ]

What just happened?Congratulations! You have just logged into CMS Desk. When you selected the CMS Desk link, this loaded the ASPX pages for the interface. CMS Desk is a secure area that requires a valid username and password. In addition to selecting the hyperlink, you can also access CMS Desk using the default site URL and appending cmsdesk—http://www.sitename.com/cmsdesk. This feature enables decentralized authoring and allows end users to access CMS Desk directly from any location.

Time-saving tip

Save some typing and create a bookmark for your CMS Desk.

Page editingThe following screenshot shows the different sections of the CMS Desk.

http://www.sitename.com/cmsdesk


[ 20 ]

The sections are as follows:

Document actions toolbar with buttons for creating new documents, deleting, copying, moving, and sorting documents

Main menu with Content, My Desk, Tools, and Administration tabs

View mode selection buttons that allow content editors to choose between editing, preview live site, and list view

Site selection that allows content editors and administrators to select different websites

Current user display that identifies the current logged in user

What You See Is What You Get (WYSIWYG) editor for editing and creating content

Content tree that presents the website map and allows content editors to organize the structure of documents

Page editing mode window for editing, page template design, and document properties management

Editable region for editing or creating content for the selected document in the content tree

Time for action – editing an existing pageNow we will edit an existing page using CMS Desk. Editing page content is one of the most important and basic tasks of a CMS.

1. In CMS Desk, select the Home page on the content tree and select the Page tab, as shown in the following screenshot:

Chapter 1

[ 21 ]

2. Select the Main text, as shown, and change the welcome text to the following:

We have changed our company site to make it easier for you to find and locate information that you may need. We hope that you enjoy our new site and keep looking for changes as we continue to build it out.

We would love to hear your thoughts and feedback around our new design.

3. Select the Save button, as shown in the following screenshot:


[ 22 ]

4. Select the Live site view button that will show the deployed content, as shown in the following screenshot:

What just happened?Editing is one of the most important content functions available within any CMS application. When you selected the Home page, you identified the page that you wanted to edit. You then selected an editable text web part to make the changes to the page. Once you completed the editing and selected Save, the page automatically updated the content repository and rendered to the live site.

What is the Home page?

The Home page is the default landing page for users accessing your site.

Chapter 1

[ 23 ]

Time for action – modifying your profileProfiles are used to maintain your personal information. This includes your name, e-mail address, and password. The default trial installation of Kentico provides the Global Administrator with a blank password. We will now change this.

1. Select the My Desk tab, My profile, Change password tab, enter a New password, and click the Set password button, as shown in the following screenshot:

2. Enter a new password and then select Set password.

What just happened?When you clicked Set password, Kentico updated the Global Administrator profile in SQL Server, so the next time you sign in, you will need to use the new password. Maintaining your own personal information and passwords is an important self-service feature.

What is the Global Administrator?

The Global Administrator is the Kentico CMS system administrator account. Make sure that you set this password to something that you will remember and don't lose it!


[ 24 ]

Have a go hero – password management strategiesProtecting your CMS passwords is important. A hacker breaking into CMS Desk would seriously compromise your website. After doing some research, make a recommendation on what strategies you think make sense for your company to use when managing passwords.

Site ManagerSystem-wide management tasks and advanced customization are done within the Site Manager Interface. This interface is the main tool for web masters and advanced users to monitor existing sites, create new sites, import sites, or export site objects to a ZIP archive. Developers use Site Manager to register page templates and set system-wide application defaults. If you're a content author or editor, you may not be allowed to access Kentico Site Manager since it's intended only for developers and administrators.

Time for action – logging into Site ManagerNow we will log in to Site Manager. Like CMS Desk, it allows for distributed management capabilities. The simplest way of accessing Site Manager from our current location in CMS Desk is the following.

1. Select the Site Manager link from the CMS Desk, as shown in the following screenshot:

2. You are then redirected to the Site Manager interface, as shown in the following screenshot:

Chapter 1

[ 25 ]

What just happened?Congratulations! You have successfully logged into Site Manager. Site Manager, like CMS Desk, is a secure area. When you selected the link, you loaded the Site Manager ASPX page. When accessing Site Manager from within CMS Desk, you are not prompted for credentials as they are carried over. Additionally, like CMS Desk, you can access Site Manager using the direct URL of your site and adding cmssitemanager to the end of the URL.

Time-saving tip

Save some typing and create a bookmark for Site Manager.

Time for action – shutdown and restart your websitethe Sites tab enables the control of the various aspects of your site. this includes the ability to shut down and restart your site. To shut down and restart your websites, carry out the following steps.

1. Within Site Manager, select the Sites tab, and then select the stop site icon, as shown in the following screenshot:


[ 26 ]

2. Validate that the site is stopped, as shown in the following screenshot:

3. Open a new browser, and enter the URL of your site.

4. Switch back to Site Manager, restart the site by selecting the start icon, and validate that your site is restarted, as shown in the following screenshot:

Chapter 1

[ 27 ]

What just happened?In shutting down the site, you have made it unavailable to site users. Incoming HTTP requests are validated against the list of available sites. When a site is shut down, the site definition is removed for the site list and the user receives the invalid website error page. A single URL may contain one or more CMS sites underneath. each site can be stopped or started by the system administrator, as needed. Common examples are for system maintenance or other types of system functions. When a site is stopped, users are not able to access the site using the URL, and it is removed from the URL that contains it.

Have a go hero – system maintenance For a production system, we will want to create a site maintenance page that's more informative than the default screen shown in the previous screenshot. .NET applications allow you to add an HTML file called app-offline.html to the root of the project folder. Anytime this file is placed into the Kentico CMS application directory, all requests are automatically directed to this file, regardless of whether the site is offline or not. Spend some time and create a mock-up of the page.

Time for action – adding usersUser management is the process of assigning security permissions and identifying management to users. Let's go ahead and create a new user.

1. Within the Site Manager select Administration tab, select Users and then New user, as shown in the following screenshot:


[ 2� ]

2. Within the new user screen, enter the information shown in the following screenshot and select OK.

3. Check Is global administrator and select OK, as shown in the following screenshot:

Chapter 1

[ 2� ]

4. Select the Sites tab, Add sites, then select Corporate Site, and then select OK, as shown in the following screenshot:

5. Select Sign out from CMS Desk, as shown in the following screenshot:

6. Log into CMS Desk as Joe.

7. Log out and on the live site, select the My Account link, as shown in the following screenshot:


[ 30 ]

8. enter the User name and Password for Joe and select Log on, as shown in the following screenshot:

9. Validate that you have successfully logged onto the system, as shown in the following screenshot:

Chapter 1

[ 31 ]

What just happened?Congratulations! You have just entered and tested a new user! When a user logs into the system, their credentials are checked against the SQL database. The validated credentials are used to build a profile that contains their personal information and security credentials. This profile is validated against pages and system areas to determine the proper access and page views. By selecting the Is editor checkbox, Joe was given permission to access CMS Desk. Then selecting the Is global administrator checkbox made Joe a Global Administrator. When we assigned Joe this right, he had access to manage all site settings and development options. You then validated Joe by logging into both the CMS Desk and the live site.

Have a go hero – defining usersAs we start to build our site, we need to determine what CMS users will be given access to CMS Desk and Site Manager. Start making a list of your users that you think will be given access to these two interfaces and what tasks they will be doing.

SummaryWe learned a lot in this chapter about the basics of our new CMS system. Specifically, we covered installing the system and building your first website. You learned how to manage your site with CMS Desk and Site Manager and some basic configuration tasks like user management and page editing.

Now, that we have created our basic site, we're ready to dive deeper and look at the features of our new site. This is the first step in understanding our new CMS site and the subject of our next chapter.

2A Tour of your New Website

In order to be able to develop and extend the corporate starter site, we must understand the main components and how they interact.

In this chapter, we will walk through the main components of the website and follow the exercises given. We will:

Learn the key components and features of the corporate starter siteUnderstand the available page management techniquesUnderstand the available document typesDeepen our understanding of the usage and features of a CMS system

Content is kingA CMS system provides content to site visitors and simplifies the process of managing web content. The benefit of a CMS system is that it allows us to describe virtually anything we want as content and display it on our website. This not only includes standard items like text and images, but can even include application code. This helps both content editors and site visitors have a consistent viewing and editing experience across a site.

With such a wide range of content possibilities, content is organized into groupings or structures called documents. Documents are the basic unit of work and storage for site content. each document is based on a Document type that defines the fields for storing the data and transformations, database queries for retrieving, and site display. News, articles, and blog posts are just a few examples of available document types. When creating a new article, it's based on the Article Document type that provides an editing form to enter the data and a set of transformations and queries to control how it is retrieved and displayed. Even though each Document type describes different types of content, each inherits a general set of properties, as shown in the following table.

A Tour of your New Website

[ 34 ]

General properties of a Document typeProperty Name Description

Document type display name Name of the site containing the content item displayed to the users

Document type code name the internal code name of the content item

New page URL URL of the page used for creating new documents of this type

Editing page URL URL of the editing page used for displaying the editing mode using the Page tab

Editing form URL The URL of the editing page used for displaying the document in the editing mode using the Form tab

Preview page URL URL of the editing page used for displaying the document in the preview mode

List page URL URL of the editing page used for displaying the document in list mode

Publish from/Publish to The dates that a document is available for display on the website

Show template selection Indicates if the user must select a page template first when creating a new document of this type

Default page template The default page template used when the document is created

Time for action – viewing available document typesThe system contains a wide variety of pre-built document types. To view the available document types and the XML structure for the Article Document type, we can follow these steps.

1. Log in to CMS Site Manager, select the Development tab, and then Document types, as shown in the following screenshot:

Chapter 2

[ 35 ]

2. Select the Export object icon for the CMS Article type, as shown in the following screenshot:

3. Within the Export single object screen, select Export, as shown in the following screenshot:

4. Once the export is completed, select Download object, as shown in the following screenshot:

5. Open the ZIP file in the Objects folder and view the cms_documenttype.xml.export file in Notepad.


[ 36 ]

6. View the properties of this document type using Notepad, as shown in the following screenshot:

What just happened?When we selected Export for the Article document type, this created a ZIP archive that contains XML files, which describe the Article document type. This includes the data structure, transformations, and queries that are used to define an Article. The cms_documenttype.xml.export file that we then opened contains the database table information. This includes the table name and database fields used to store Article data. When an Article is displayed, this information is used to retrieve the content data from the database and then has the appropriate transformations applied, before being finally displayed.

The list of document types that we saw earlier is an integral part of system modules. Modules are built-in functions that provide many of the features needed to maintain and present the documents. The standard modules provided by Kentico CMS are shown in the following table.

Chapter 2

[ 37 ]

Kentico CMS standard modulesModule Name Description

Blogs Allows the publishing of a personal or company blog. You can publish multiple blogs at the same site and there can be multiple defined editors.

Booking System Allows the management of events and their attendees. This module can be used for both online and offline meetings.

Content rating Allows the rating of any document on the website.

Content staging Allows the separation of content in development, staging (editing), and production (live) environments. It allows the transfer of documents and object changes to another server.

E-commerce Enables e-commerce that includes product and catalog management.

event calendar enables the display of documents ordered by date in a calendar.

Forums Enables the creation of pre-defined or ad-hoc forums.

Friends Allows site members to maintain relationships with other site members and share personal information with them.

Geomapping Allows the display of content on a map using Google Maps.

Groups Allows site users to create or join a topic or area of interest. These can include documents, forums, message boards, media libraries, and polls.

Image gallery enables the centralized storage of photos and images.

Media library Enables the centralized storage of files, such as photos, sound, videos, package files, and presentations.

Message board enables site visitors to comment on any page content.

Messaging Allows site users to send, receive, and manage e-mail messages. It is designed to provide an internal communication method with other users of the website.

Newsletter Allows the authoring and sending of static or dynamic newsletters to subscribed users.

On-line forms (Bizforms) Allows content editors to create and publish online forms.

Polls Allows the creation and publication of online polls that contain single or multiple-choice answers.

Reporting Allows the creation of reports to view website activity. This includes recently created document and site visits.

taxonomy Allows the tagging and categorization of any site content.

Wiki Enables user contribution allowing site visitors to create, edit, and delete site content.

Web farm support Enables the synchronization of changes made to either site settings or content on all configured servers.

Web analytics Allows the tracking and analyzing of website visitors, page views, file downloads, and other metrics of the website.


[ 3� ]

Time for action – creating a pollthe Polls module provides a way to gather real-time input from site users. Polls are designed as a separate document type that once created can be displayed anywhere on the site. In this exercise, we will add a poll to collect visitors' favorite cell phones and then place it on our Products page using a web part. Creating a poll is a two step process. The first step is to create the poll and the second step is to add it to the page.

1. Log in to CMS Desk and select the Tools tab, Polls, and then select New poll, as shown in the following screenshot:

2. In the New poll screen, enter the following information, and then select OK.

Field Value

Display name Cell phone favorite

Code name CellPhoneFavorite

Title Cell Phone Favorite

Question What is your favorite cell phone?

Chapter 2

[ 3� ]

3. Within the General tab, update the following information and select OK.

Field Value

Message after vote Thank you for your feedback.

4. Select the Answers tab and select New answer. enter Samsung SGH E250, as shown in the following screenshot, and select OK.

5. Select New answer, as shown in the following screenshot, and enter the following cell phone names.

HP IPAQ 114

Nokia N73


[ 40 ]

6. Select the Security tab, select All users, and select OK, as shown in the following screenshot:

7. Select the Sites tab and click the Corporate Site, as shown in the following screenshot:

Chapter 2

[ 41 ]

8. Select the View tab to review the look and feel, as shown in the following screenshot:

9. the poll is ready to be published. Switch to the Content tab, choose the Products page, and then the Design tab. Add the web part to the zoneLeft by selecting the + icon, as shown in the following screenshot:


[ 42 ]

10.Select the Poll web part, as shown in the following screenshot, and click OK.

11.Update the Web part properties (Poll) with the following values and select OK.

Section Field Value

Default Web part title Product Poll

Poll Settings Poll name Cell Phone Favorite

12.The poll is now available in the zoneLeft, as shown in the following screenshot:

Chapter 2

[ 43 ]

13.You can view the Live site, and once you select the Vote button, as shown in the following screenshot, you can see the changes.

What just happened?When we selected New poll, this enabled us to create the name of the poll and the question to ask. We also provided a message to the user, once they completed the poll. We then added the choices for the poll. Because this poll will be on the Home page, we enabled system security to include all users. Then we attached the poll to the Corporate Site. Finally, we reviewed the look of the poll.

Once the poll is created, the next step is to publish it to the site. Polls are published as web parts. Web parts are ASP.Net server controls that are used to display data. Web parts are placed into a web part zone on the Design page. We selected the zoneLeft and then the Poll web part. We then set up the web part to display our new poll. Finally, we viewed the live site and took the poll.


[ 44 ]

Time for action – using the WYSIWYG editorThe ease of updating content is one of the most important aspects of any content management system. Kentico CMS leverages the open source FCK editor as the main interface for updating content within editable areas. Very similar to Word menus, it is designed to provide a "what you see is what you get" (WYSIWYG) editing experience.

In this exercise, we will update the service description of our Network Administration services to include a new table that describes our services.

1. Log in to CMS Desk, select the Page tab, the Services page, then the Network Administration page, and place your cursor in the editable region, as shown in the following screenshot:

2. Within the editable region, move the cursor below the Network Administration Services title and add a horizontal line from the editor, as shown in the following screenshot:

Chapter 2

[ 45 ]

3. Select add table from the WYSIWYG editor, as shown in the following screenshot:

4. Within the table Properties, enter the following information and then select OK.

Field Value

Rows 3

Columns 2

Headers First row

Border size 1

Caption Our Network Specialties

Width 200 pixels

Cell spacing 1

Cell padding 1


[ 46 ]

5. Update the table to include the service descriptions, as shown in the following table, and then select Save.

Service Description

Remote Hosting Application hosting and management

Network Design As you business grows so does your network

6. Select Live site to view the new table, as shown in the following screenshot:

What just happened?Once we placed the cursor and selected the add table icon, this allowed us to configure our table of new service options. The WYSIWYG editor is one of the most common tools available across the system. The editor is available in many different parts of the system, from web parts to blogs.

Chapter 2

[ 47 ]

Time for action – creating a blog entryBlogs are a standard module included within Kentico. Updating a blog is one of the most important parts of making sure that your blog is read. In this example, we will update our product blog to announce the addition of new cellular phones to our product inventory.

1. Log in to CMS Desk and select Blogs and My blog. then select New and Blog post, as shown in the following screenshot:

2. Update the blog post form with the following information.

Field Value

Post title Announcing our new phone line up

Post summary We are pleased to announce a new line up of phones that will be joining our line over the next few months.

Post text We are pleased to announce we will be carrying the

Palm Pixi LG Lotus Elite Samsung Elite


[ 4� ]

3. Select the text Palm Pixi from the Post text and select the add link icon, as shown in the following screenshot:

4. Within the Insert link dialog, select the Web tab, enter the link to the Palm Pixi site (http://www.palm.com/us/products/phones/pixi-family.html) and then select Insert, as shown in the following screenshot:

5. Complete the blog post by entering the Tags as New Products, select Now for Publish from, and select Save, as shown in the following screenshot:

6. Select the Live site page tab to view the new blog post, as shown in the following screenshot:

Chapter 2

[ 4� ]

What just happened?When we selected New blog post, this brought us to the editing form for our blog entry. We updated our blog entry and then, using the WYSIWYG editor, created a new link to the Palm Pixi image. We completed the blog entry by entering the appropriate content tags and publishing the blog entry. Once this was done, we viewed the published entry on the live site.

Page managementEvery CMS page is based on a page template. A page template is the definition of how the page looks and what is displayed in the context of a specific page. The page template is responsible for feeding content into the page controls and displaying the content as a live page. Page templates can be tied to a single page or used across several other pages. A rendered page is a combination of HTML code, ASP.NET server controls, or user controls.


[ 50 ]

Page templates can be created based on two different page models, as shown in the previous diagram. A direct page control model, using ASPX page templates and a higher-level abstraction based on the Kentico Portal engine. The direct-control model is an extension of the ASP.Net Webform module. In extending ASP.Net, this architecture leverages standard ASP.NET master pages to create a WCMS-enabled .NET application. The second method is the Kentico CMS Portal Engine. This model is designed to abstract away many of the programmatic and design complexities and directly empower content managers. This type of flexible implementation allows the page template selection as a page-based decision. This enables customers to make their page template decisions based on business requirements.

Chapter 2

[ 51 ]

Shown in the previous diagram is a comparison of page processing in a typical ASP.NET application compared to Kentico CMS, regardless of which page template model is used. When a page is requested, it is first processed by the URL rewriting engine. The engine identifies the page template and calls the CMSPageManager control based on the alias path parameter. In turn, this loads the content from the requested page and displays the text using the appropriate CMSEditableRegion controls. For example, when the /Home.aspx page is requested, the URL rewriter engine identifies the page to the page template and automatically rewrites the request to the following:

<template URL>?aliaspath=/Home

With the ASPX page template, the template URL is always a physical page developed using Visual Studio. However, with the Kentico Portal Engine, the template URL is always /CMSPages/PortalTempalte.aspx. this page loads the structure of the page template dynamically from the database and combines the inherited templates. One important difference between the Portal and ASPX page methodology is that the Kentico Portal engine template doesn't require any physical pages.

Time for action – creating a new ASPX page templateASPX page templates are based on the standard page templates used with ASP.NET. Like web forms, this model is implemented using Visual Studio. Page templates with this model are built as an extension to the .NET Framework. When developing page templates this close to the ASP.NET framework, the application developer has complete control to define all page controls and dynamic content using the Kentico CMS API. However, with this control comes additional site and maintenance work.

technically, the ASPX page templates are a standard ASPX template that inherits from the CMS.UIControls namespace. This base class is the Kentico TemplatePage for ASPX pages and the Kentico TemplateMasterPage for master pages. Including this namespace allows the page access to the Kentico CMS API. Creating a new ASPX page template is a two step process. The first step is creating the new page within Visual Studio and the second is registering it for use with the Kentico CMS.

•


[ 52 ]

Let's create an ASPX page template that contains company contact information to demonstrate the process of creating an ASPX page template.

1. Within the Kentico CMS WebProject, select the CMSTemplates, then the CorporateSiteAspx folder, and right-click selecting Add New Item, as shown in the following screenshot:

2. Select add new Web Form and name it TwoColumnTemplate.aspx. Check Select master page and click Add, as shown in the following screenshot:

Chapter 2

[ 53 ]

3. In the Project folders, select CMSTemplates | CorporateSiteAspx, the Root.master page, and click OK, as shown in the following screenshot:

4. Add the following code above the <asp:Content> element to register the Kentico CMS controls.

<%@ Register Assembly="CMS.Controls" Namespace="CMS.Controls" TagPrefix="cc1" %>

5. Add the following code inside the <asp:Content> element.

<table width="100%"> <tr> <td width="50%"> <cc1:CMSEditableRegion ID="txtLeft" runat="server" DialogHeight="400"RegionType="HtmlEditor" RegionTitle="Left column" /> </td> <td width="50%"> <cc1:CMSEditableRegion ID="txtText" runat="server" DialogHeight="400"RegionType="HtmlEditor" RegionTitle="Right column" /> </td> </tr></table>


[ 54 ]

6. Switch to the code behind and add the following namespace so that the CMSEditableRegion can be recognized.

using CMS.UIControls;

7. Change the default page inheritance to the Kentico template. This allows the page to be used as a page template in Kentico CMS. Change the following code:

public partial class CMSTemplates_CorporateSiteAspx_TwoColumnTemplate : System.Web.UI.Page

to the following:

public partial class CMSTemplates_CorporateSiteAspx_TwoColumnTemplate : TemplatePage

Now that the Visual Studio page has been created and includes the Kentico CMS controls, the next step is to register the template within Kentico CMS as a page template. this enables the page for use by page editors, developers, and designers.

8. Sign in to Site Manager, select the Development tab, Page templates, and then New category, as shown in the following screenshot:

9. In the New category screen, enter the following values and select OK.

Field Value

Category display name Corporate Site ASPX

Category name CorporateSiteASPX

10. Click the Corporate Site ASPX folder and select New template, as shown in the following screenshot:

Chapter 2

[ 55 ]

11. Within the new Page templates dialog, enter the following information and select OK.

Field Value

Template display name Two Column Template

Template code name TwoColumnTemplate

Don't forget

Code names are used within the SQL Server database, and because of this, spaces are not allowed.

12. In the File name field, enter ~/CMSTemplates/CorporateSiteASPX/twocolumntemplate.aspx and then select Save, as shown in the following screenshot:


[ 56 ]

13. Select the Sites tab and click the Add sites button. Select Corporate Site and click OK, as shown in the following screenshot:

At this point, the template has been registered and is available to the site. We can create a simple page based on this template using the following steps.

14. Within CMS Desk, click the site root of the content tree, select New | Page (menu item), enter the Page name as Contact Us, select the Corporate Site ASPX folder, then select the Two Column Template and select Save, as shown in the following screenshot:

Chapter 2

[ 57 ]

What is the site root?

the top level of your content tree is called the root. this is the parent page for all inheritance throughout the site. this includes security and CSS for the entire website.

15. The new page is available with two editable regions, as shown in the following screenshot:


[ 5� ]

What just happened?Building web pages that directly leverage the .NET Framework provides a familiar approach for application developers. It also allows content pages to directly integrate into custom applications.

Time for action – creating a new Portal Engine pageThe Kentico Portal Engine is a design-mode UI targeted at .NET developers, designers, content authors, editors, and publishers. It enables the creation, management, and editing of CMS pages from a browser-based administration interface. In the Kentico Portal Engine, the page template doesn't require page setup in Visual Studio. This greatly reduces the complexity of page setup. This allows content authors, editors, and publishers to focus on implementing the page and its content based on the parameters defined by the application developers and designers. For application developers, Portal Pages provide a platform for deploying custom code using Web Parts and reduce the amount of up-front coding needed.

Let's create a simple page template using the Portal engine that contains company information to demonstrate the process of creating a new page.

1. Select Corporate Site in the content tree and then right-click and select New | Page (menu item), as shown in the following screenshot:

2. enter the Page name as Company Information and select Create a blank page using the Two columns layout. ensure that the Copy this layout to my page template box is checked. This ensures that your page template can use a modified version of the pre-defined layout without modifying other pages. Finally select Save, as shown in the following screenshot:

Chapter 2

[ 5� ]

3. In order to edit the page, we will need to add an editable region. Switch to the Design tab.

4. Click the Add web part icon (+) in the zoneLeft web part zone and select the Editable text web part. Select OK, as shown in the following screenshot:


[ 60 ]

5. Leave the Web part properties as default and select OK, as shown in the following screenshot:

6. Switch to the Page tab, add some general company information into the web part, and select Save, as shown in the following screenshot:

Chapter 2

[ 61 ]

What just happened?One of the key benefits of the portal engine is that it allows the placement of placeholders to create any number of visual inheritance levels needed for a consistent web page design. When a PagePlaceHolder web part is added, the template for the child document can be defined. Within the ASPX mode, this would require the creation of several levels of master pages and a fair amount of code to maintain and manage. Within the Portal engine, the only additional code that may be needed is to handle the layout of the Web Part Zone. If this is needed, it can be done using the following HTML code.

<cc1:CMSWebPartZone ID="zoneTop" runat="server" />

Once the HTML code is inserted, no additional code is needed and page designers can work with web part objects without any programming. Web parts are modified using the properties button, encapsulating them with containers using their properties. In comparison, this would require additional application code when using the ASPX template mode.


[ 62 ]

Time for action – the Design tabthe Design tab provides the ability to modify the site structure visually without having to write additional code. Often, this may include the ability to change the structure of a page and move web parts from one side to the other side of a page. Let's go ahead and change the site structure of the Home page.

1. Log in to CMS Desk, select the Content tab, then select Home and the Design tab, as shown in the following screenshot:

Chapter 2

[ 63 ]

2. Select the Poll web part, as shown in the following screenshot:

3. Drag the web part to zoneRight on the right-hand side of the page, as shown in the following screenshot:


[ 64 ]

4. Select Live site and the Page tab to view the updated page.

Don't forget

Any changes made to the Design tab are immediately visible to your logged in users.

What just happened?Pages created with the Portal Engine inherit a special Design tab. the Design tab shows the visual representation of web parts, a preview of the content, and a drag handle for onscreen design. The Web Part Zone, which is represented by the orange box, is a special control that is placed on the Portal Page and used to manage Web Parts. the green box is a PagePlaceHolder and allows web designers to create a window to the next level of the page when the next template is inserted.

Time for action – adding web partsWeb parts are often used to display different site sections on pages. They help to customize areas and connect similar content types. For our website, we will want to update the Web Development Services page to include the latest site news. This is a way for us to show different document types on different pages without having to duplicate the content. To add the latest news to the Web Development Services page, we can perform the following actions.

Chapter 2

[ 65 ]

1. Log in to CMS Desk, select the Content tab, and in the content tree, select the Services page. We then select the Web Development page and select the Design tab, as shown in the following screenshot:

2. Select the add web part icon (+) in zoneLeft.

3. Within the Web part name, enter the term Latest news to find the web part and then select OK.

4. Select OK to accept the default Web part properties.


[ 66 ]

5. Select the Page tab to view the live page and see your web part, as shown in the following screenshot:

What just happened?Web parts are the way that you can display information across pages. They provide the ability to create windows within a page that allow for the display of data. The default installation of Kentico CMS provides over 200 different web parts and covers a wide variety of different areas.

SummaryWe learned a lot in this chapter about our corporate starter site and its features. Specifically, we covered:

Learning how to view the available Document types

Learning how to use Modules

Understanding Web parts and their uses

Learning how to create content pages

Now that we have learned the basics of content and modules, we're ready to dive deeper and learn how to manage the content process—which is the topic of our next chapter.

3Managing the Content Process

In order to effectively manage and publish content and secure our site, we need to understand security and workflow. In this chapter, we will study these components in detail, and develop usable examples for our website.

By reading this chapter and following the exercises, we shall:

Understand the principles of site security

Develop security roles to manage our site

Develop secure web pages and areas for specific security roles

Learn how to configure a workflow

Develop a workflow process

Fundamentals of site securityI don't think anyone can dispute that security management is an essential part of our daily routine. We need to make sure that we protect customer data and guard the site from any unwanted intruders. Security management is the process that we use to decide who has access to the site, what areas they are able to see, and what documents they can view and interact with. Kentico CMS security is managed using the:

Site Manager Administration tab to edit system-wide data

CMS Desk Administration tab to edit data related to a specific website

Managing the Content Process

[ 6� ]

The security model that we use to maintain and administer the system is based on the following:

Users—This is an individual user who is assigned a system account.

Roles—Security groups that contain users. Because a user can belong to multiple roles, their permissions are calculated as a sum of all permissions granted to all roles they belong to.

Document permissions—Document permissions are granted to both users and roles. At runtime, document permissions are calculated as a sum of all permissions granted to the user and their assigned roles.

UI personalization—UI personalization is used to remove specific portions of the user interface.

Don't forget!

Security permissions are calculated at runtime. These are a combination of global settings and individual website settings. It's important to remember that if the user or any of their roles are denied access to a resource, they are always denied access to that resource, even if one of their roles is allowed access.

Time for action – creating a new roleNow, let's create a new role and assign it to a user using these steps:

1. In CMS Site Manager, select the Administration tab, Roles, and New role, as shown in the following screenshot:

Chapter 3

[ 6� ]

What roles are there?

Roles are one of the easiest ways to apply security to your users. The system contains a variety of pre-defined roles that are available in the Roles menu item, as shown in the previous screenshot.

2. In the New role dialog, enter the following information and select OK.

Field Value

Role display name Managers

Role code name Managers

Role description This role contains the list of department managers responsible for content approval

3. Select the Add users tab, as shown in the following screenshot:

4. Select the user Joe Brown from the list and select OK, as shown in the following screenshot:


[ 70 ]

Don't forget

The example uses the user Joe Brown that we created in Chapter 1.

Have a go hero – mapping rolesAs we just saw, the system contains a default set of pre-defined user roles that can be found in Site Manager, the Administration tab, and Roles. Spend some time studying the roles contained in the Site Manager Administration Roles and understand how they fit into your website security model. Once that is completed, put together a proposal that defines any additions or changes that may be needed.

What just happened?When you clicked the New role button, you first identified the name of the role used across all system management areas. Once the role was created, you then added the user Joe Brown to the role.

Time for action – adding a user to another roleUsers can belong to multiple roles within the system. Let's add our user Joe Brown to another role using the CMS Desk interface using these steps:

1. Log in to CMS Desk as Global Administrator, select the Administration tab, click Users, and select the manage user roles icon ,as shown in the following screenshot:

Chapter 3

[ 71 ]

2. Select CMS Basic users, click the move right (>) button and select Close, as shown in the following screenshot:

3. Select the edit user icon, as shown in the following screenshot:


[ 72 ]

4. Select the General tab, uncheck the Is global administrator box, and select OK, as shown in the following screenshot:

Why are we doing this?

If Joe is a Global Administrator, he will automatically have access to all system resources.

Chapter 3

[ 73 ]

5. Select the Log in as this user link, as shown in the following screenshot:

6. Select OK to change the user prompt, as shown in the following screenshot:

7. Verify that you are logged in as the User: Joe Brown, as shown in the following screenshot:

What just happened?Within CMS Desk, when you edit a user, they can also be added to roles. Many times, you will want to see what the experience of that user will be within the system. You did this when you selected Log in as this user. It allowed you to assume the identity of the user and log in to the system.


[ 74 ]

Time for action – creating role-based contentRoles are important not only for system maintenance, but they can also be used to present specific information. Every web part has the ability to restrict display to a selected role.

Now, let's restrict a tree menu web part for everyone but the CMS Basic user role on the Services page using the following steps:

1. Log in to the live site as Joe Brown and select the Services menu item, as shown in the following screenshot:

2. Log in to CMS Desk as the Global Administrator, select the Content tab, Services page, Design tab, and within the LeftTreeMenu web part, select the configure icon, as shown in the following screenshot:

Chapter 3

[ 75 ]

3. In the Web part properties (Tree menu) dialog, select Display to Roles and click the Add roles button.

4. Select the CMS Basic users role and select OK, as shown in the following screenshot:


[ 76 ]

5. Select OK, as shown in the following screenshot:

6. Open a new browser, go to the live site, select the Services page, and validate that the tree menu web part is not available, as shown in the following screenshot:

7. Open a new browser, log in to the live site as Joe, select the Services page, and validate that the tree menu is shown as seen in the following screenshot:

Chapter 3

[ 77 ]

What just happened?When you selected the Display to roles option in the tree menu web part, the display was automatically restricted to just CMS Basic users. As we saw when we browsed the site, we could no longer see the menu items on the left. Once we logged in as Joe, a member of the CMS Basic user role, we were then able to see the tree menu web part.

Time for action – display a customized product listCustomizing the display of content to a user is a combination of web part and document settings. When the user is not authenticated, the system automatically uses a special user called Public Anonymous User (public).

In this example, we will make a product document available to the CMS Basic user role, and at the same time, make it unavailable to anonymous users using these steps:

1. Open up the live site and select Products and Cell phones, as shown in the following screenshot:


[ 7� ]

2. As Global Administrator, log in to CMS Desk, select the Content tab, Corporate Site page, Properties tab, select Security, and Add users, as shown in the following screenshot:

3. Select the Public Anonymous User (public) and select OK, as shown in the following screenshot:

Chapter 3

[ 7� ]

4. Select the Allow Read access checkbox, click OK, and select Add roles, as shown in the following screenshot.

5. Select the CMS Basic users and click OK.

6. Select CMS Basic users, check the Allow Read access checkbox, and click OK, as shown in the following screenshot:


[ �0 ]

7. On the Content tree, select the Products page | Cell Phones | Nokia N73, and then select the Public Anonymous User (public). In the Read Access rights, select Deny, and then select OK, as shown in the following screenshot:

8. On the Content tab, select Cell Phones, Design tab, and in the ProductDataList web part, select Configure.

9. In the Web part properties (Datalist), select the System Settings tab, select Check permissions, and OK.

10.Open a new browser window to the live site, select Products, Cell Phones, as shown in the following screenshot. Notice that we no longer see the Nokia N73 phone, as shown in the following screenshot:

Chapter 3

[ �1 ]

Who are we now?

We are currently logged in as the Public Anonymous User (public).

11.Log in to the site as Joe Brown, select the Products menu item, Cell phones menu item, and notice that we see both cell phones.

What just happened?When you applied security at the site root, it was also applied across the entire site using inheritance. This gave specific access rights to the roles Public Anonymous User (public) and CMS Basic users. However, in order to restrict the permission needed at the page level, we had to change the Nokia N73 document security to Deny Read access for the Public Anonymous User (public). then you enabled the ProductDataList web part to recognize security. Once these steps were completed, the personalization was available to Joe, who is a member of the CMS Basic user.

When setting document level permissions, you have the following choices:

Full Control—Perform all operations with the document

Read—Read document content

Modify—Modify document content

Create—Create new child documents

Delete—Remove the document from the content tree


[ �2 ]

Destroy—Destroy this document and all history

Browse tree—See any documents that exist below the parent document

Modify permissions—Change this document and any inherited permissions

Permissions setting tip

It's important to make sure that you continually review the permission set for your users. Improperly setting permissions can allow the wrong users to update or even delete entire sections of site content.

Time for action – creating secure pagesMany times, we need to create special or secured areas for authenticated users. When a non-authenticated user comes to the secured section, they are redirected to the logon page specified for the site.

Now let's secure the Products section of our site using the following steps:

1. In CMS Desk, select the Content tab, select the Products page, select the Properties tab, and then select the Security tab, as shown in the following screenshot:

Chapter 3

[ �3 ]

2. Select Yes in the Requires authentication radio buttons and select OK, as shown in the following screenshot:

Don't forget!

Any pages in the content tree that inherit the settings of this page will also require authentication.

3. Log in to CMS Site Manager, select the Settings tab, then Security. From the Site drop-down list, select Corporate Site, and validate that the Website logon page URL contains ~/SpecialPages/logon.aspx, as shown in the following screenshot:

4. Open a new browser, go to the live site, and then select Products from the menu.


[ �4 ]

What just happened?When you selected the Requires authentication checkbox, any page requests were redirected to your authentication page. The authentication process can be done either using the built-in form or a custom form. In this example, we are using the built-in form, which requires the user to provide their defined set of user credentials for the site.

What's the difference between authentication and authorization?

Authentication verifies who the user is. Authorization verifies what resources the user is allowed or authorized to access. While the words sound similar, it's important to understand the difference. Users must be both authenticated and authorized within the system.

Workflow managementWorkflow is a way to automate a business process for publishing content. Using workflow allows you to delegate portions of the business process to different users or groups for approval. Kentico CMS allows you to use workflow for all documents, including uploaded files. The workflow engine organizes the process of content creation, updates, and publishing content. The following diagram shows an example document lifecycle with workflow. It's important to keep in mind that document versioning is tightly bound with workflow and allows document comparison and version rollback.

Chapter 3

[ �5 ]

Time for action – configuring workflowThe Kentico CMS workflow process is designed as a state machine. this means that workflows are event driven. A workflow contains three or more states, with only one state active at any given time. Based on an event, a transition is made to another state. Once a transition is made to the final state, the workflow is completed. Within each workflow step, members of authorized roles are allowed to modify, approve, or reject a document.

Now, let's configure a workflow for the News folder.

1. In CMS Site Manager, select the Development tab, select Workflows, and click New workflow, as shown in the following screenshot:


[ �6 ]

2. For the New workflow, enter the Display Name as Approval and Code Name as Approval, as shown in the following screenshot:

3. Select the Steps tab and click on the New workflow step link, as shown in the following screenshot:

Quick tip

the Edit, Published, and Archived steps are automatically created for every workflow and can't be deleted. These steps use the default system security.

Chapter 3

[ �7 ]

4. Enter the following information and select OK.

Field Value

Display Name Approval

Code Name Approval

5. Select the Roles tab and click Add roles, as shown in the following screenshot:

6. Select the CMS Desk Administrators role and select OK.

7. Select the Scope tab and click on the New workflow scope link, as shown in the following screenshot:


[ �� ]

What is a workflow scope?

The workflow scope defines the folder, documents, and languages that are included in the workflow.

8. In the Starting alias path, click the Select button, as shown in the following screenshot:

9. Select News and then click the Select button, as shown in the following screenshot:

Chapter 3

[ �� ]

10.Select OK, as shown in the following screenshot, to save the workflow scope.

What just happened?When you create a workflow, you automatically start with the default steps of Edit, Published, and Archived. These steps are automatically built into the system and can't be changed. In this example, we created a new step called Approval. Once we had defined the steps within the workflow, we then defined the workflow scope. The scope that we defined was the News folder. In defining the scope for this folder, we created a policy that any documents created within this folder have to complete the workflow process, and publishing approval can only be given by members of the CMS Desk Administrators.

Time for action – executing the workflowNow that a workflow is defined for the News folder, any documents created within the folder are automatically placed in the workflow for Approval by the CMS Desk Administrators. Let's create a new News item that executes the workflow using the following steps:

1. In CMS Desk, select the Content tab, then News, the New document icon, and then a new document News item.

2. Within the new News item, enter the following information, and then select Save.

Field Value

News title New Product Announced

Release date Select Now

News summary New Product Announced

News text Take a look at our new product list!


[ �0 ]

3. Click the Submit to approval link, as shown on the following screenshot:

4. Open a new browser window, log in to CMS Desk as Joe Brown, select the Content tab, expand the News folder, and select New Product Announced item, as shown in the following screenshot. Notice that we are not authorized to approve the document.

Chapter 3

[ �1 ]

5. Select Sign out, log in to CMS Desk as the Global Administrator, select the Content tab, expand the News folder, select New Product Announced item, and then select Publish, as shown in the following screenshot:

6. Once the screen refreshes, verify that the News item New Product Announced has been published, as shown in the following screenshot:


[ �2 ]

What just happened?On clicking Submit to approval, you placed the News document into the workflow queue, which can only be approved by CMS Desk Administrators. Then you logged in and approved the document for publication as the administrator. Once the document was approved, the system then published it on the public website.

Time for action – document rollback Workflow maintains document versions. Now that we have a version stored, let's modify our News item, compare the changes, and then roll the document version back using the following steps.

1. Log in to CMS Desk as the administrator. then select the Content tab, News folder, and the New Product Announced document, as shown in the following screenshot:

2. Modify the News text to include the following and select Save.

Take a look at our new product list to see the new items we have added. It's an amazing list of new cell phones for everybody!

Chapter 3

[ �3 ]

3. Select Submit to approval, as shown in the following screenshot:

4. Select Publish, as shown in the following screenshot:

5. Select the Properties tab, Versions tab, and select the view version icon, as shown in the following screenshot:


[ �4 ]

6. In the Compare to drop-down menu, select the 1.0 version, as shown in the following screenshot:

7. Validate the version difference information, as shown in the following screenshot, and select Close.

8. Select the Rollback icon, as shown in the following screenshot, to rollback to version 1.0.

Chapter 3

[ �5 ]

9. Select OK to accept the version rollback, as shown in the following screenshot:

10.Validate that the rollback to Version 1.0 has been completed, as shown in the following screenshot:

What just happened?After creating a second version of the News document and then comparing it to the original, we decided that we need to rollback the document changes. When we selected the rollback to previous version icon, this changed the current published version back to our 1.0 version.

Have a go hero – mapping workflowsWorkflow is an important part of any website. It's used to control the publishing process and ensures that the proper content is being exposed to site visitors. Implementing workflow takes planning. Spend time talking to your content publishers to understand what workflows they would like to implement for the site. Once this is completed, prepare a proposal that includes the workflow steps and roles that are needed for your website.


[ �6 ]

SummaryWe learned a lot in this chapter about the process of managing content for our website. this includes:

Creating roles for user management

Creating customized site content for specific roles

Developing and maintaining proper security for our website

Using security to present relevant data and restricting access to areas of our system

Configuring a custom workflow to manage the business process of publishing data

Comparing document versions and rolling back to a previous version of a document

Now that we've learned the basics of managing the process of publishing content on our site, we're ready to learn about linking and managing documents—which is the topic of our next chapter.

4Linking and Managing Documents

Website content is more than just HTML pages. It includes links, office documents, pictures, audio, and video. Sometimes these content types are stored on our web server and other times we link to content stored elsewhere on the internet. In this chapter, we will study how we can link to content stored externally, and manage non-HTML documents on our site.


Learn to link to external content

Set up and use a media library to store content on our site

Find out how to use document attachments

Set up and display a document attachment

Learn to use web parts to display images stored in the media library

Document linking Creating outbound links is the process of linking to content on other websites. HTML provides a variety of tags that can be used to provide this functionality. Rather than having to code HTML, we can create these links automatically. As we will see, this makes the process of creating outbound links part of the content creation process.

Linking and Managing Documents

[ �� ]

Time for action – linking to an imageNow, let's create a blog post and use the WYSIWYG editor to link to an external image using the following steps.

1. Log in to CMS Desk, select the Content tab, expand the Blogs folder, select My blog, the New document icon, and then Blog post, as shown in the following screenshot:

2. Enter the following information into the new blog post form.

Field Value

Post title Our New Web Site

Post date Select Now

Post summary It's been a long time and your feedback has been instrumental in making this happen

Post text We are pleased to announce the release of our new website using Kentico CMS

3. Select the Insert image button from the WYSIWYG toolbar, as shown in the following screenshot:

Chapter 4

[ �� ]

4. In the Insert image or media screen, select the Web tab, update the fields with the following information, and then select Insert.

Field Value

URL http://www.kentico.com/downloads/logos/Kentico_2d_CMStag_width200px.png

Media type Image

Alternate text Kentico CMS Logo

5. Click the Lock/Unlock Ratio button (Lock icon), enter a Width of 200 and Height of 70, and then select Insert, as shown in the following screenshot:


[ 100 ]

6. Select Save, as shown in the following screenshot:

7. Select the Live site tab, right-click, and select View Source, as shown in the following screenshot:

8. Press Ctrl + F and search for the image file Kentico_2D_CMStag_Width200px.png to see the generated <img> tag that contains the <alt> tag.

Chapter 4

[ 101 ]

What just happened?When the insert image button in the WYSIWYG editor was selected in the new blog post form, this brought us to the Insert image or media screen. We then selected the Web tab to link to external content. We linked to a Kentico CMS logo stored on the Kentico CMS website. As this content isn't stored within our site, we don't have direct control over its availability. For example, if the Kentico site becomes unavailable or removes the image from its production server, it won't be available on our site. We can help to minimize this risk to our site by using the alternate text tag. When the page is rendered, if for any reason the image isn't available, our replacement text is used instead. Finally, after we saved the document and published it to the live site, we viewed the HTML <img> tag that was automatically created.

Have a go hero – outbound link guidanceLinking to external content is a natural and encouraged part of any website. Both site users and content editors will create links to external sites that they feel are relevant. Unfortunately, we won't have any content control over these sites. This brings up a variety of concerns that we should understand. These include business reasons for content linking, copyright usage, and link checking and monitoring. Spend some time researching and develop a set of guidelines that you can provide your content editors on how they can minimize this problem on the site.

Time for action – linking to a YouTube videoYoutube is one of the internet's largest video sharing sites. In this example, using a Blog post, we will link to a YouTube video in the Post text using the WYSIWYG editor with the following steps.

1. Log in to CMS Desk, select the Content tab, expand the Blogs section, and select My blog. Select the New document icon and Blog post.

2. Enter the following information in the New blog post form and then place the cursor into the Post text.

Field Value

Post title Adding Product Options


Post summary Found this great video for adding product options on YouTube I wanted to share.


[ 102 ]

3. Click the Insert/Edit YouTube video icon, as shown in the following screenshot:

4. In the URL field, enter the value http://www.youtube.com/watch?v=exYBtp5PcQc and then select Insert, as shown in the following screenshot:

Getting the YouTube URL

You can find the public URL of any YouTube video by selecting the Share button located at the bottom of the video, as shown in the following screenshot:

http://www.youtube.com/watch?v=exYBtp5PcQc

Chapter 4

[ 103 ]

5. Select Save, as shown in the following screenshot:


[ 104 ]

6. Select the Source button, as shown in the following screenshot:

7. Select the Live site tab, right-click the browser, select View source, and then search for youtube to locate the <embed> HTML tag containing the YouTube URL.

What just happened?When the Insert/Edit YouTube video button was selected, it displayed the Insert YouTube video screen. In this screen, you entered the link to the video and controlled additional player options needed for your video. We then viewed the Source button in the WYSIWYG editor to see the generated HTML. Finally, after we saved the document and published it to the live site, we viewed the HTML <object> tag that was automatically created.

Have a go hero – video consistency guidanceWith the wide variety of video options and formats available on the web today, video consistency is an important part of the website experience for your users. Imagine coming to a site and have some videos starting to play, while needing to click on others. Spend some time researching and developing sample guidelines to share with your site's content managers. By recommending specific video formats and player options, you provide the environment to build a consistent experience for site users.

Document attachmentsIn addition to links, content can also be stored or attached to a document. Like an e-mail attachment, these document attachments are tied to their document. When the parent document is published, associated attachments are published. When the document is deleted, so are the attachments.

Chapter 4

[ 105 ]

Time for action – adding document attachmentsLet's add a document attachment to an Event document and then display it using the Attachment Image web part through the following steps.

1. Log in to CMS Desk, select the Content tab, Events folder, New document icon, and then select the new Event (booking system) document, as shown in the following screenshot:

2. Enter the following information in the new Events form, and then select Save.

Field Value

Event name Successful taglines for your company

Event summary In this webinar we will look at how to develop successful taglines for your company

Event details Don't be left out developing successful taglines for your company


[ 106 ]

3. Select the document Properties tab, Attachments tab, click New attachment, and attach an image from your local PC, as shown in the following screenshot:

4. Once the image is attached, it will be listed, as shown in the following screenshot:

5. Select the Design tab, and in zoneTop, select the add web part icon (+).

Chapter 4

[ 107 ]

6. Select the Attachments web part folder, the Attachment image gallery web part, and select OK, as shown in the following screenshot. In the Web part properties (Attachment image gallery) screen, select OK.

7. Select Live site to view the new web part, as shown in the following screenshot:


[ 10� ]

What just happened?When you selected the document Properties tab and Attachments tab, you added an image to an Event document. The image wasn't available until you added the Attachment image web part into the zoneTop of the page.

Media librariesThe media library module stores photos, videos, and office documents in the CMS repository. By default, this module stores files into the local file system in a media directory under the current site.

Time saving tip

Don't forget that if you specify the location within a web part, you would use ~/<sitename>/media.

Time for action – viewing media librariesThe sample corporate site we are using contains two image libraries. Now, let's see what these look like, using the following steps.

1. Log in to CMS Desk, select the Tools tab, select Media libraries, and the edit icon for Czech nature, as shown in the following screenshot:

Chapter 4

[ 10� ]

2. Validate that you see Media library properties, as shown in the following screenshot:

What just happened?When you selected Media libraries in the tools tab, you were able to see the currently installed media libraries. Selecting the Czech nature library brought us to the Media library properties screen that can be used to view images contained in the media library.

Time for action – displaying a media library imageNow let's create a blog post that links to an image stored in the media library using the following steps.

1. Log in to CMS Desk, select the Content tab, and then expand the Blogs folder. Select My blog, the New document icon, and Blog post.

2. Enter the following information in the new blog post form.

Field Value

Post title Business Trip to the Czech Republic


Post summary Just got back from a fantastic trip to the Czech Republic to visit our newest customer! Here is a picture of the great city where they were located.

3. With the cursor in the Post text box of the New Blog post form, select the Insert/Edit image icon, as shown in the following screenshot:


[ 110 ]

4. Select the Media libraries tab, IM002595.JPG, and Insert, as shown in the following screenshot:

5. In the Alternate text field, enter Business Trip Photos and select Insert and select Save, as shown in the following screenshot:

Chapter 4

[ 111 ]

6. Select the Source button in the WYSIWYG editor to view the HTML code.

f

7. Open Windows Explorer and go to the C:\inetpub\wwwroot\KenticoCMS\CorporateSite\media\CzechCities directory to validate that the image file IM002595.jpg is on the filesystem, as shown in the following screenshot:


[ 112 ]

What just happened?When you clicked the Insert/Edit image icon in the WYSIWYG toolbar, this brought you to the same screen we used earlier for web images. This time we selected the Media library tab, which provides access to the media libraries for our site. We then selected the image that we wanted to display and set the Alternate text field. Once the blog post was saved, we viewed the Source using the WYSIWYG editor to view the HTML tags that were created. We then further looked at the storage of the selected image using Windows Explorer.

Time for action – creating a media libraryLet's create a new media library for our site that contains photos of our company office using the following steps:

1. Log in to CMS Desk and select Tools, Media libraries, and select New media library, as shown in the following screenshot:

2. Enter the following information into the New media library form and then select OK.

Field Value

Display name Our Company

Code name Our-Company

Description A media library that contains photos of our company

Folder name Company

Chapter 4

[ 113 ]

3. Select New File; then navigate to a local directory on your computer containing an image to upload and select Open, as shown in the following screenshot:

What just happened?When you clicked New media library and entered the properties, you successfully created a media library for our site. In addition to making an entry into our repository, this created a new media directory within our website. Finally, we uploaded a single image file from your local computer to our new media library.

Have a go hero – creating media librariesMedia libraries are a great way to store and share data across our site. They provide a common location for the storage of all types of files. With this type of flexibility, there is an overhead of server space and extra system resources that may be needed. Spend some time reviewing the image needs of your site to determine what guidance you will give content editors for creating new media libraries.


[ 114 ]

Time for action – batch operations in the media libraryBulk operations allow you to work with more than one file at a time. Let's upload a set of images from our local computer to the image library using the bulk operations process, by carrying out the following steps.

1. Using the filesystem or FTP copy the images that will be uploaded into the server's image directory using the path ~<sitename>/media/company.

Upload tip

Depending on the location of your production server and system resources, you can use either Windows Explorer or FTP. FTP is often an ideal choice for larger files and requires lower system resources than HTTP.

2. Log in to CMS Desk, select the Tools tab, the Media libraries menu item, and click the edit icon for the Our Company media library. then select images you copied from your local computer, as shown in the following screenshot:

Quick tip

A quick way to identify images that have been uploaded is to locate the items with the yellow exclamations in the action columns. This identifies them as waiting for action, unlike the office-cube file that we already added to the library in an earlier example.

Chapter 4

[ 115 ]

3. Select Import from the drop-down box and then select OK, as shown in the following screenshot:

4. enter the Description for the files, check Apply descriptions to all files, and click Import all files, as shown in the following screenshot:


[ 116 ]

Time saving tip

If you want to apply separate descriptions to each file, uncheck the Apply descriptors to all files checkbox.

What just happened?Once you uploaded the files to the media directory, the CMS system became aware of them but didn't import them into the Media library. It wasn't until we selected the files and then clicked the import button that they were imported into the Media library. While you can work with files individually, importing files with a common description in a batch operation saves time.

Time for action – displaying our image galleryNow, that you have added the image files to the Our Company media gallery, let's display these images with the Media gallery web part using the following steps.

1. Log in to CMS Desk, select the Content tab, the Company page, the Design tab, and click the zoneContent add web part icon.

2. Select the Media library web part folder, the Media gallery web part, as shown in the following screenshot, and select OK:

Chapter 4

[ 117 ]

3. Select the Content tab. In the Media library drop-down box, select Our Company, as shown in the following screenshot and select OK.

4. Select the Live site button and view the images, as shown in the following screenshot:

What just happened?When you added the Media gallery web part and set the Path to the Our Company media library, your website was able to display the images stored in the media gallery.


[ 11� ]

Time for action – uploading files on the live siteRather than have users log in to CMS Desk, you can provide live site users with the ability to upload images directly. We can do this using the Media file uploader web part and the following steps.

1. Log in to CMS Desk, select the Content tab, Design tab, and zoneContent add web part icon.

2. Select Media library, select the Media file uploader web part, and select OK, as shown in the following screenshot:

Chapter 4

[ 11� ]

3. Select the General tab. From the Library name drop-down box, select Our Company, as shown in the following screenshot and select OK.

4. Select Live site, select the Browse button, as shown in the following screenshot, and navigate to the image on your local machine to upload.

5. Select the Upload button, as shown in the following screenshot, to add the image.


[ 120 ]

What just happened?When you added the Media file uploader web part to the Company page, this enabled uploads to the live site. We then selected an image on our local machine that we uploaded and then displayed.

Time for action – setting media library security Now that we have enabled uploading on the live site, we want to enforce security to prevent unauthorized users from uploading images. Now we need to change the security on the Our Company image gallery to allow members of the CMS Basic users role to upload images using the following steps.

1. Log in to CMS Desk, select the Tools tab, the Media libraries menu item, and click the edit icon for the Our Company media library, as shown in the following screenshot:

2. Select the Security tab. In the first Create file dialog, select Authorized roles. In the second Create file dialog, select CMS Basic users, as shown in the following screenshot:

Chapter 4

[ 121 ]

Quick tip

In the Security tab changes are automatically saved and applied when you select them.

3. Open a new browser, go to the live site, and select the Company menu item. Select Browse and then Upload, as shown in the following screenshot, to see that the security changes have taken effect.


[ 122 ]

Have a go hero – refining role guidanceEnabling users to interact and engage with your site from the live pages poses serious security risks, if not done correctly. Earlier, you started to define the roles needed for your site. Spend some time further refining this to include what roles will have the ability to interact with the live site.

What just happened?When you changed the media library security permissions for creating files from All users to an authorized role, it enabled the list of defined roles section of the security form. In selecting CMS Basic users, you further restricted the list of users that are able to upload content.

The following table shows a list of permissions that can be assigned to users to perform actions within the media library.

Don't forget

Global administrators can perform all of these actions for all general and group media libraries on the site.

Chapter 4

[ 123 ]

Time for action – restricting file typesAs we have seen, media libraries allow a wide variety of file types to be uploaded. Based on our company policy, we need to prevent mp3 files from being uploaded. We can do this using the following steps:

1. Log in to CMS Site Manager, select the Settings tab, and then Media libraries. From the Site drop-down, select the Corporate Site, uncheck Inherit from global settings, delete the mp3 extension from the Media file allowed extensions, as shown in the following screenshot, and select Save.

2. Open a new browser for the live site, log in as Joe, select the Company menu item, select Browse, then select an mp3 file on your local computer, and select Upload to see the error message, as shown in the following screenshot:


[ 124 ]

What just happened?When you selected the Corporate Site and removed the mp3 file extension from the allowed list, this prevented the system from accepting uploaded files of this type. This change only affects the Corporate Site, and other sites that we may create will automatically inherit the global permissions, which allow the upload of this file type.

SummaryWe learned a lot in this chapter about document linking, media libraries, and document attachments. We covered:

Linking to external documents using the WYSIWYG editor

Attaching documents using the document properties

Creating, viewing, and uploading to a media library

Performing batch operations on files within a media library

Setting security on a media library

Using web parts to display images stored in a media library

Now that we've learned about many of the basic features and functionality needed for our site, we're ready to study extensibility—which is the topic of our next chapter.

5Extending the System

As the system administrator, our content authors and site visitors expect that we keep evolving the CMS system to meet their needs. For a content administrator, this means that the system will help them to easily publish and extend their content, while getting better productivity in their jobs. For site visitors this means the ability to easily find and view content they are interested in. In order to meet these requirements, we can extend the system using both built-in functions and the Kentico API with C#. In this chapter, we will learn the tricks and techniques that will help us to understand these features and have a better understanding of how to extend our system.


Learn to use transformations to customize data displays

Learn to use transformations to display document attachments

Become skilled in creating custom document types

Find out how to implement global events

Develop extensions using the Kentico Application Programming Interface (API)

TransformationsTransformations describe how information is rendered at runtime. They are built using ASP.NET user controls or XSLT that describes how the information is displayed. At runtime, once the information is retrieved from the database, the transformation is applied right before the content is rendered.

Extending the System

[ 126 ]

ASP.NET similarities

As an ASP.NET application, Kentico extensively leverages web server controls. These controls can be customized by setting properties or by using CSS styles.

Time for action – transformations in web partsWeb parts provide support for transformations. Now, let's change the default transformation for the ListOfGalleries web part on the Images page using the following steps:

1. Log in to CMS Desk, select the Content tab, Images page, and Design tab. In the ListOfGalleries web part, select the configure button, as shown in the following screenshot:

2. Select the Transformations tab, and in the Transformation property, click the Edit button, as shown in the following screenshot:

Chapter 5

[ 127 ]

3. In the Transformation Edit -- Webpage Dialog, edit the Code property to change the default Transformation. Then select Save, close the window, and in the Web part properties (Repeater) window, select OK.

<div class="gallery" style="border: solid 3px Red"> <h3><%# Eval("DocumentName") %></h3> <a href="<%# GetDocumentUrl() %>"><img class="teaser" src="<%# GetFileUrl("MenuItemTeaserImage") %>?height=150&width=200" alt="<%# Eval("DocumentName") %>" /> </a></div>

4. View the new transformation, as shown in the following screenshot:

What just happened?When the Edit button of the Transformation property was selected, this brought us to the Transformation Edit -- Webpage Dialog. This allowed us to edit the Code property of the transformation that describes the display of the ListOfGalleries web part. We modified the <div> tag to include a new style of a red border. Once the modified transformation was saved and the ListOfGalleries web part was redisplayed, the default transformation then included a solid red border.


[ 12� ]

Time for action – transforming the EventRepeater web partNow, let's change the default transformation that is used system-wide for the EventRepeater using the following steps:

1. On the live site, select the Events page to view a location where the EventRepeater is used, as shown in the following screenshot:

2. Log in to CMS Site Manager, select the Development tab, Document types, and click the edit icon for the Event (booking system) document type, as shown in the following screenshot:

Chapter 5

[ 12� ]

3. Select the Transformations tab and click New transformation, as shown in the following screenshot:

4. In the Transformation name property, enter MyTransformation, and in the Transformation type drop-down box, select ASCX, as shown in the following screenshot:


[ 130 ]

5. In the Code property window, enter the following transformation code, select Save, and then close the window.

<div class="Event"> <div class="Header"> <a href="<%# GetDocumentUrl() %>"><%# Eval("EventName") %></a> </div> <div class="Body"> <p><%# Eval("EventSummary") %></p> <strong>Location:</strong> <%# Eval("EventLocation") %><br /> <strong>Date:</strong> <%# Eval("EventDate") %><br /> <strong>Open From:</strong> <%# Eval("EventOpenFrom", "{0:dd MMM yyyy}") %><br /> <strong>Open To:</strong> <%# Eval("EventOpenTo", "{0:dd MMM yyyy}") %> </div></div><br />

6. Click the Switch to CMS Desk link, select the Content tab, select the Events page, and select the Design tab. In the EventRepeater web part, select the configure button.

7. In the Web part properties (Repeater) screen, select the Transformations tab, and in the Transformation property, click the Select button, as shown in the following screenshot:

8. In the Document type drop-down box, select Event (booking system), then click the CMS.BookingEvent.MyTransformation link, as shown in the following screenshot, and then select OK.

Chapter 5

[ 131 ]

9. Select the Live site button to view the Events page and view the new transformation, as shown in the following screenshot:


[ 132 ]

Transformation tip

Transformations created for a document type are available anywhere the document type is used. This gives you the ability to reuse a transformation across the system.

What just happened?When we clicked the edit icon for the Event (booking system) and then clicked the New transformation menu option, we created an ASCX transformation named MyTransformation. This transformation relies on the Event document type fields—EventName, EventSummary, EventLocation, EventDate, EventOpenfrom, and EventOpento. Like any document fields in a Transformation, they are accessed using the <%# Eval(...) %> style syntax and can be intermixed with standard HTML. Also, notice that in the Eval function, there is a second parameter that is used for the format. In this example, we formatted the date for the Open From and Open To fields. Once we saved the transformation, we logged in to CMS Desk and selected the new transformation within the EventRepeater web part.

Time for action – handling attachments in transformationsAs we saw earlier, attachments are added directly to documents. While we learned earlier to display these using web parts, another way of displaying attachments is to modify the transformation of the document type. Within a transformation, attachments can be displayed by adding one of the following controls directly into the transformation code.

~/CMSAdminControls/Attachments/DocumentAttachments.ascx ~/CMSAdminControls/Attachments/AttachmentLightboxGallery.ascx

Now, let's use these controls to display a News attachment. News is displayed on the News page using a Repeater control. The detailed view of each news item is displayed using the CMS.News.NewsDetail transformation. We will modify this transformation to display the news summary and text.

1. In CMS Desk, select the News page, switch to the Design tab, and in the NewsRepeater web part, select the configure button.

2. In the Web part properties (Repeater) window, select the Transformations tab, and in the Selected item transformation property, click the Edit button, as shown in the following screenshot:

Chapter 5

[ 133 ]

3. In the Edit transformation -- Webpage Dialog, replace the existing Code property with the following code and select Save. Close the window and select OK in the web part properties.

<%@ Register Src="~/CMSInlineControls/DocumentAttachments.ascx" TagName="DocumentAttachments" TagPrefix="cms" %><div class="newsItemDetail"> <h1><%# Eval("NewsTitle") %></h1> <div class="NewsSummary"> <%# IfEmpty(Eval("NewsTeaser"), "", GetImage("NewsTeaser")) %> <div class="NewsContent"> <div class="Date"><%# GetDateTime("NewsReleaseDate", "d") %> </div> <%# Eval("NewsSummary") %> </div> <div class="Clearer"> </div> </div> <div class="NewsBody"> <%# Eval("NewsText") %> </div> <div class="NewsBody"> <cms:DocumentAttachments ID="ucDocAttachments" runat="server" TransformationName="cms.root.attachment" Path='<%# Eval("NodeAliasPath") %>' /> </div></div>


[ 134 ]

4. Select the Live site button and then select a News item, as shown in the following screenshot, to see the transformation.

5. Select the Edit button, then News, switch to the Design tab, and in the NewsRepeater web part, select the configure button.

6. In the Web part properties (Repeater) window, select the Transformations tab, and in the Selected item transformation property, select the Edit button, as shown in the following screenshot:

Chapter 5

[ 135 ]

7. In the Edit transformation -- Webpage Dialog, Code property, replace the existing transformation code with the following and select Save. Close the window, and in the Web part properties (Repeater) window, select OK.

<%@ Register Src="~/CMSInlineControls/AttachmentLightboxGallery.ascx" TagName="AttachmentLightboxGallery" TagPrefix="cms" %> <div class="newsItemDetail"> <h1><%# Eval("NewsTitle") %></h1> <div class="NewsSummary"> <%# IfEmpty(Eval("NewsTeaser"), "", GetImage("NewsTeaser")) %> <div class="NewsContent"> <div class="Date"><%# GetDateTime("NewsReleaseDate", "d") %> </div> <%# Eval("NewsSummary") %> </div> <div class="Clearer"> </div> </div> <div class="NewsBody"> <%# Eval("NewsText") %> </div> <div class="NewsBody"> <cms:AttachmentLightboxGallery ID="ucDocAttachments" runat="server" TransformationName="cms.root.attachmentLightbox" SelectedItemTransformationName="cms.root.attachmentLightboxDetail" Path='<%# Eval("NodeAliasPath") %>' /> </div> </div>


[ 136 ]

8. Select the Live site button and select a News item, as shown in the following screenshot, to see the transformation.

What just happened?When you selected and edited the transformation for the NewsRepeater web part, the first line of the transformation contained an ASP.NET directive called @Register. This directive creates an association between a tag prefix (cms) and a custom control (documentattachments.ascs). At runtime, when rendered, this control is used to the display the attachments.

Time for action – displaying ratings in transformationsContent rating results can be displayed in transformations. In this example, we will add this control using the following steps.

1. Log in to CMS Desk, select the Content tab, Blogs, My blog, Design tab, and in the rptAllPosts web part, select the configure button.

Chapter 5

[ 137 ]

2. Select the General tab, Transformations, and in the Transformation property, click the Edit button.

3. In the Edit transformation window, at the end of the Code property, add the following code to the transformation. Select Save, close the window, and in the Web part properties (Repeater) window, select OK.

<%@ Register Src="~/CMSAdminControls/ContentRating/RatingControl.ascx" TagName="RatingControl" TagPrefix="cms" %> <cms:RatingControl ID="elemRating" runat="server" Enabled="false" RatingType="Stars" ExternalValue='<%# Convert.ToString(CMS.GlobalHelper.ValidationHelper.GetDouble(Eval("DocumentRatingValue"), 0)/((CMS.GlobalHelper.ValidationHelper.GetDouble(Eval("DocumentRatings"), 0) == 0?1:CMS.GlobalHelper.ValidationHelper.GetDouble(Eval("DocumentRatings"), 1)))) %>' />

4. When the page refreshes, view the transformation results, as shown in the following screenshot:

What just happened?When you edited the transformation for the rptAllPosts web part, you extended the existing transformation to include RatingControl.ascx using the @Register directive. When the rptAllPosts web part was rendered, the transformation was rendered.

Creating custom document typesContent is driven by the demands of the business. As we have seen, the base CMS system contains an extensive set of built-in document types. However, a request for a business-specific schema is inevitable. Custom document types enable us to create data schemas specific to the needs of a business.


[ 13� ]

Time for action – creating custom document typesNow, let's create a new document type for defining employee biographies.

1. Log in to CMS Site Manager, select the Development tab, Document types, and then click New document type, as shown in the following screenshot:

2. In the new document type wizard, in the Document type display name field, enter Biography. In the Document type code document type field, enter biography and select Next, as shown in the following screenshot:

Naming conventions

Depending on your company's naming conventions, you may use a different namespace than custom.

3. Click The document type has custom fields, enter the Table name as custom_biography, the Primary key name as BiographyID, and select Next, as shown in the following screenshot:

Chapter 5

[ 13� ]

Time saving tip

In this step, you are naming a new SQL table that will be created. Make sure that you enter the name of a table that doesn't currently exist.

4. Enter the attributes shown in the following screenshot and table. Click the new attribute (+) button to create a new field, enter the data below and then OK to save and select Next when complete.


[ 140 ]

Attribute name

Attribute type Attribute size Field caption Field type Options

BiographyID Integer number

BiographyID Label

Name Text 50 Name Text box

Job_title Text 50 Job Title Text box

Age Integer number

Age Text box

Gender Text 2 Gender Radio Buttons 1;Male 2;Female

Bio Long Text Biography HTML area (Formatted Text)

5. In the Document name source drop-down list, select the Use document name field and select Next, as shown in the following screenshot:

6. Select Add document types, in the Select document types -- Webpage Dialog, check the Page (menu item) (CMS.MenuItem), and select OK, as shown in the following screenshot, and then click Next.

Chapter 5

[ 141 ]

7. Select Next, as shown in the following screenshot:


[ 142 ]

8. Leave the default selections and click Next.

9. Complete the new document type wizard by clicking Finish, as shown in the following screenshot:

Chapter 5

[ 143 ]

What just happened?When you selected New document type, this started the new document type wizard.

In Step 1 | General, you identified the display name and namespace that the new document type will use. The Document type display name is the name that the CMS users will see when creating a new document. The Document type code name is the namespace that distinguishes a custom document type from built-in system types.

In Step 2 | Data type, you identified the unique SQL table and primary key name used for storing document information.

In Step 3 | Fields, you then created the fields for the document type and identified how they will be presented to the user in the data form.

In Step 4 | Additional settings, you defined the default naming of a new document. When a new document is created, the document name field is used to create the new document and appears in site navigation and the CMS Desk content tree.

In Step 5 | Parent Types, you defined which document you will allow Biographies to be placed under in the content tree.

In Step 6 | Sites, you identified the sites in which this document type can be used.

In Step 7 | Search options, you selected the default search options.

How the content is stored

All data, including custom document types, are stored in SQL tables. The creation of a separate table to store document types allows you to write SQL Select queries to retrieve document type data.

Have a go hero – custom schemaCustom document types are one of the most common user requests for any CMS system. Often, these requests can be accomplished by extending an existing document type. Spend some time talking with your content editors to understand what document types and fields they believe are currently missing. Formulate a proposal that includes what document types will need to be extended and what new custom document types need to be created for your content editors.


[ 144 ]

Time for action – creating an employee biographyNow that we have created the new Biography document type, let's create a new document using the following steps.

1. Log in to CMS Desk, select the Examples folder, and then click the New document button on the toolbar.

2. Select the New document type as Biography, as shown in the following screenshot:

3. Complete the new Biography form with your personal information and select Save.

4. Switch to the Design tab, and in zoneContent, select the add web part icon ( + ).

5. Select the Document pager web part and select OK, as shown in the following screenshot:

Chapter 5

[ 145 ]

6. In the Web part properties (Document pager), select the Content filter tab. In the Document types property, click the Select button, check the Biography (custom.biography) document type, and then select OK, as shown in the following screenshot:


[ 146 ]

7. Select the Transformation tab. In the Transformation property, click the Select button. In the Document type drop-down box, select Biography and click custom.biography.Preview, as shown in the following screenshot:

8. Select OK, as shown in the following screenshot:

Chapter 5

[ 147 ]

9. Switch to the Page tab to view the new Biography document displayed using the Document pager web part, as shown in the following screenshot:

Changing document type icons

If you want to change the default document type icon, you can replace the file located at c:\inetpub\wwwroot\KenticoCMS\App_Themes\Default\Images\DocumentTypeIcons\custom_biography.png.

What just happened?When you selected New document and selected the Biography document type, you created a new document type, based on the Biography schema. In order to display the document, we modified the Document pager web part to view the Biography document type and then selected the Preview transformation as the default view. Congratulations! You have successfully created a new document type and displayed it.


[ 14� ]

Kentico APIKentico implements an Application Programming Interface (API) as part of the CMS framework components. This API is used by .NET application developers to interact with exposed programmatic interfaces. This allows developers to access system functions and extend the CMS system programmatically. The API provides access to a variety of areas and allows for the automatic creation of documents, security, and many other system areas. The Kentico API is implemented by a set of .NET application libraries, as shown in the following diagram:

Time for action – adding event handlersGlobal events allow you to capture and execute your custom code, when a CMS system event occurs. The following events can be handled:

Data Updates—Insert/update/delete actions for all data items

Exceptions—Custom errors that occur in your code

Security events—Authentication and authorization

Document events—Tree node insert/update/delete operations

Workflow events—Document approval/rejection/publishing/archiving operations

Chapter 5

[ 14� ]

The first step to using global events in our site is to add the code that is used to capture the events. Let's go ahead and add this using the following steps.

1. Select the Kentico CMS WebProject in the Solution Explorer. From the Visual Studio main menu, select File, Add, Existing Project.

2. In the Add Existing Project dialog, navigate to the C:\Program Files\KenticoCMS\5.0\CodeSamples\CustomEventHandler directory, select the CustomEventHandler project and select Open.

Where are my files?

If you followed the installation we used in Chapter 2, you will find the files located in the path specified above. If you installed in a different directory, then you will find the files placed in your default installation path.

3. With the CustomEventHandler project selected in the Solution Explorer, right-click the CMS.pfx file and select Delete, as shown in the following screenshot:

4. expand the References folder and right-click and select Remove for CMSHelper, DataEngine, GlobalHelper, SettingsProvider, SiteProvider,TreeEngine references, as shown in the following screenshot:


[ 150 ]

5. In the Kentico CMS project, select the Bin folder and right-click and select Add Reference, as shown in the following screenshot:

6. In the Add Reference dialog, select the Projects tab, select the CustomEventHandler project, as shown in the following screenshot and click OK.

7. In the Solutions Explorer, select the CustomEventHandler project, right-click and select Add Reference, as shown in the following screenshot:

Chapter 5

[ 151 ]

8. Select the Browse tab. In the Look in drop-down box, select the Bin folder of the Kentico CMS WebProject directory, as shown in the following screenshot:

Where are the files?

If you are using the default installation, the directory is c:\inetpub\wwwroot\Kentico_CMS\Bin.

9. Select the following files and then click OK.

CMS.treeengine.dll

CMS.GlobalHelper.dll

CMS.GlobalEventHelper.dll

CMS.SiteProvider.dll

CMS.SettingsProvider.dll

CMS.CMSHelper.dll

CMS.emailengine.dll

CMS.Dataengine.dll

CMS.WorkflowEngine.dll


[ 152 ]

10. In the Solution Explorer, double-click the Kentico CMS web project web.config file, as shown in the following screenshot:

11. In the <appSettings> section of the web.config file, enter the following configuration line:

<add key ="CMSUseCustomHandlers" value="true" />

12. Right-click the Solution 'WebProject' and select Rebuild Solution, as shown in the following screenshot:

What just happened?When you added the CustomEventHandler project, this extended our Kentico CMS solution to include two projects. As this was a sample project, we first cleaned up old references. Then we set a reference between the Kentico CMS project and the CustomEventHandler project. You then cleaned up and replaced the existing project references to ensure the two projects properly referenced each other. Finally, you set the web.config file with a required key used at runtime to access your custom code. Lastly, you rebuilt the project.

Chapter 5

[ 153 ]

Time for action – sending a news item by e-mailThe CustomTreeNodeHandler class in the CustomEventHandler project allows you to execute custom actions when a document (TreeNode) is created, updated, or deleted. It handles the following events:

OnBeforeInsert

OnAfterInsert

OnBeforeUpdate

OnAfterUpdate

OnBeforeDelete

OnAfterDelete

OnBeforeMove

OnAfterMove

OnBeforeCopy

OnAfterCopy

OnBeforeInsertNewCultureVersion

OnAfterInsertNewCultureVersion

Now that we have the CustomEventHandler project available to capture global events, let's use the CustomTreeNodeHandler, the OnAfterInsert event, to send a news item by e-mail using the following steps.

1. In Visual Studio Solution Explorer, select the CustomEventHandler project and then double-click the CustomTreeNodeHandler.cs file to open it.

2. Add the following code line to the top of the file. This adds the reference to the CMS e-mail engine.

using CMS.EmailEngine;

3. Within the Code view, select the OnAfterInsert() method, as shown in the following screenshot:


[ 154 ]

4. Add the following code inside the OnAfterInsert() method and Rebuild the solution.

// type the document as TreeNodeTreeNode newsDoc = (TreeNode)treeNodeObj;// handle the event only for news itemsif (newsDoc.NodeClassName.ToLower() == "cms.news"){ // get content of the inserted news item and send it by e-mail EmailMessage email = new EmailMessage(); email.From = "[email protected]"; email.Recipients = "[email protected]"; email.Subject = ValidationHelper.GetString(newsDoc.GetValue("NewsTitle"), ""); email.Body = ValidationHelper.GetString(newsDoc.GetValue("NewsSummary"), ""); EmailSender.SendEmail(email);}

5. Log in to CMS Desk, select the Content tab, select News, New document, and News document.

6. In the new News form, enter the following information and then select Save.

Field Value

News Title Announcing Exciting Site Updates

Release Date Select Now

News Summary We are pleased to announce some exciting changes to your site based on your feedback.

7. Switch to Site Manager, select Administration, and then E-mail queue, as shown in the following screenshot, to see the message waiting in the queue.

Chapter 5

[ 155 ]

Sending an e-mail

We didn't enable the SMTP e-mail server in our development environment. This is why we are viewing the outbound mail queue. However, in our production environment, we will want to connect the CMS system to the outbound SMTP server to complete the process of sending the e-mail.

What just happened?When we added code to the CustomEventHandler project in the OnAfterInsert() method, any time a new News item was added to the document tree, it was captured and sent using the CMS EmailEngine. While in testing, we don't have an e-mail set up; we were able to view the e-mail sent using the E-mail queue.

SummaryWe learned a lot in this chapter about extending the system using transformations, document types, and the API. Specifically, we covered:

Using transformations within web parts

Creating custom transformations to display document attachments

Creating a custom document type for employee biographies

Creating and displaying an employee biography

Extending the web project to include global event handlers

Leverage the API to send news items by e-mail

We also discussed various areas within the system that can be extended using the Kentico API. This included several important tips for icons and other .NET events that can be used.

Now that we've learned the basics of extending the CMS system to handle more advanced business scenarios, let's look at the ways we can integrate our system with other websites to increase our site reach—which is the subject of our next chapter.

6System Integration

The web has connected the world and unlocked a truly global environment. Our content editors and end users expect access to this larger community and to take advantage of the wide variety of information sources available on the Internet. This includes content syndication, mapping, and integration into external data sources. Unfortunately, this requires that we use a fairly broad set of technologies and websites that have exposed their own Application Programming Interface (API). In this chapter, we will study the ways in which we can add these features to our site.


Discover ways we can syndicate site content

Learn to implement mapping

Learn to implement a tag cloud

Learn to implement Really Simple Syndication (RSS)

Learn to implement Representational State Transfer (REST)

Improve the capabilities of our site without adding additional overhead to content authors

System Integration

[ 15� ]

Social bookmarkingSocial bookmarking is a way for Internet users to share, organize, search, and manage lists of web resources. A bookmark isn't the actual resource like what you see in a file share, but a link that references the resource URL. Bookmarks contain metadata, which allows users to understand the content of a resource, without having to visit it. Typically, the metadata is descriptive text and often contains popular votes for resource quality.

The Internet today contains many different types of social bookmarking sites. They allow users to save links to web pages that they want to remember and share. These bookmarks are usually public and can be saved privately, shared only with specific people or groups, shared only inside certain networks, or another combination of public and private domains. Authorized users are allowed to view the bookmarks chronologically, by category, tags, or using a search engine.

Time for action – implementing social bookmarkingUsing the Social bookmarking web part, we can provide site visitors the ability to automatically bookmark pages on our website to a variety of well known sites using the following steps.

1. Log in to CMS Desk, select the Content tab, Corporate Site, the Design tab, and in zoneMenu, click the add web part icon.

2. In the Select web part screen, click the Community services folder, Social bookmarking web part, as shown in the following screenshot, and select OK.

3. In the Web part properties (Social bookmarking) window, select Bookmarking services, then check Delicious and Facebook services, as shown in the following screenshot and select OK.

Chapter 6

[ 15� ]

4. Select the Home page and the Live site button to view the Social bookmarking web part, as shown in the following screenshot:

5. Select the Facebook link on the live site, log in to Facebook using your credentials, in the Facebook Post to Profile screen, enter a short message, and then select Share, as shown in the following screenshot:

System Integration

[ 160 ]

What just happened?With the Social bookmarking web part added to the Corporate Site page, this was inherited across all pages using the zoneMenu. In Web part properties (Social bookmarking), we selected Delicious and Facebook for the Bookmarking services. We then saved the web part and viewed the Home page on the live site and selected the Facebook link. Once we logged into Facebook with our credentials, we provided a description and then selected Share, which posted the link to your Facebook profile.

Have a go heroOne of the most important parts of social computing is being involved in the world-wide community. The phenomenal growth of social computing has brought a continuing stream of new sites to the public. Often, a social bookmarking site focuses on a target marketing group. If you combine this with the limited number of marketing resources your company may have available, it becomes even more important to focus on a small set of selected sites. Spend some time working with your marketing team and company executives to develop a list of preferred social resources for your company. this should be based on your company's target audience and demographics. Once this is complete, spend some time identifying who in your company will be responsible for these sites. Prepare a set of guidelines that you can distribute to your content editors and executives that covers the usage and best practices of your company's key social networks.

MappingThe advent of the Web and services like Google maps has made it easy to add real-time maps to our website. This includes the ability to show not only where our corporate offices are located, but also to create driving directions to our offices.

Time for action – adding a new officeOur site already contains a list of our offices. The addition of a new shipping centre in San Francisco provides an opportunity to update our site to include the new office and implement the Google maps web part using the following steps.

1. Log in to CMS Desk, select the Content tab, select the Company folder, then the Offices folder. Click the New document icon and then select the new Office document type.

Chapter 6

[ 161 ]

2. Enter the following information into the new Office document form and then select Save.

Form Field Value

Office name: Northwest Transport – San Francisco

Address line 1: 835 Market Street

City San Francisco

ZIP code 94103

State CA

Country USA

Phone 123456789

Email [email protected]

Latitude 37.78

Longitude -122.41

3. Log in to the live site, select Company, and then the Offices menu item to view the new Northwest Transport – San Francisco office document, as shown in the following screenshot:

System Integration

[ 162 ]

What just happened?When you selected the new Office document type, you created a new office for our company. This included general information in addition to the latitude and longitude of the office location. When this was done, we viewed the current list of offices including the newly added Northwest Transport – San Francisco.

Time for action – implementing Google mapsthe Offices page displays the list of our current offices that includes the new San Francisco shipping plant. We can now add the Google maps web part that is used to render the location using the latitude and longitude we entered into the office document. This is done using the following steps:

1. Log in to CMS Desk, select the Content tab, Company, Offices, Design tab, and in zoneRight, select the add web part icon.

2. Select the Maps folder, the Google maps web part, as shown in the following screenshot, and then OK.

3. In Web part properties (Google maps), enter the following values and select OK.

Chapter 6

[ 163 ]

Tab Property Value

Content Path /{0}/%

Content filter Document types cms.office

Transformations Transformation cms.office.preview

Map properties Large view scale 7

Detailed view scale 10

Width 600

Height 400

Default latitude 39.27

Default longitude -98.27

Latitude field OfficeLatitude

Longitude field OfficeLongitude

Tooltip field OfficeName

4. Select the Northwest Transport – San Francisco office document and the Live site button to view the map, as shown in the following screenshot:

System Integration

[ 164 ]

What just happened?We added the Google maps web part, and in the Web part properties (Google maps), we set the web part defaults. When we set the defaults, we tied the OfficeLatitude and OfficeLongitude fields from the Office document to the web part. At runtime, the web part creates a series of HTTP requests that are sent to the Google API. These API requests include the latitude and longitude fields that are found in the Office document. The Google map server then returns the relevant mapping information that is rendered by the web part and displayed on the page.

Web servicesWeb services are a network-based API, exposed by a website using ubiquitous transport protocols like HTTP. Designed to leverage existing internet infrastructure makes them compliant with corporate firewall policies. However, unlike a website or desktop application, web services are not designed for human interaction. They operate at the code level and exchange data with other software programs.

Conceptually, web services are designed as discrete business processes, with each service providing a discrete level of functionality that performs a task. Well-defined web services describe their own inputs and outputs using an end point. The end point allows any web service consumer to determine what the web service does, how it works, and what values it returns.

Time for action – building a web serviceThe web service web part enables you to connect to web service end points. This web part requires that you specify a web service URL and it implements a GetDataSet() method. The Kentico WebProject contains an example that can be customized. Let's create an example of a web service that allows you retrieve a lunch list using a GetDataSet() method and the following steps.

Chapter 6

[ 165 ]

1. In the Kentico CMS WebProject, double-click the \App_Code\CMSPages\WebService.cs file, as shown in the following screenshot:

2. In the WebService.cs GetDataSet() method, replace the existing code with the following:

/// <summary> /// Returns the data from DB/// </summary>/// <param name="parameter">String parameter for sql command</param>[WebMethod] public DataSet GetDataSet(string parameter) { // INSERT YOUR WEB SERVICE CODE AND RETURN THE RESULTING DATASET //-- Instantiate the data set and table DataSet lunchDS = new DataSet(); DataTable lunchTable = lunchDS.Tables.Add();

//-- Add columns to the data table lunchTable.Columns.Add("ID", typeof(int)); lunchTable.Columns.Add("weekDay", typeof(string)); lunchTable.Columns.Add("Lunch", typeof(string));

//-- Add rows to the data table

System Integration

[ 166 ]

lunchTable.Rows.Add(1, "Monday", "Kobe River Snake Farm Specialty Hamburgers"); lunchTable.Rows.Add(2, "Tuesday", "Canyon River Beef Stew"); lunchTable.Rows.Add(3, "Wednesday", "Smoke Halibut"); lunchTable.Rows.Add(4, "Thursday", "Specialty Ham Sandwich"); lunchTable.Rows.Add(5, "Friday", "Trout Almondine");

return lunchDS; }

3. In the Visual Studio Solution Explorer, select the WebService.cs file and run the Kentico CMS project. In the WebService page, click the GetDataSet method, as shown in the following screenshot:

Remember the URL

Make sure to write down the page URL for the .asmx page that you see in the previous screenshot. We will use this shortly when we implement the web services web part.

Chapter 6

[ 167 ]

4. From the WebService page, select the Invoke button, as shown in the following screenshot:

5. View the web service return values, as shown in the following screenshot:

Now that we have completed the web service and implemented the GetDataSet method, let's go ahead and display the weekly lunch menu web service using the web service web part by carrying out the following steps:

6. Log in to CMS Desk, select the Content tab, Home page, Design tab, and in zoneCenter, select the add web part icon.

System Integration

[ 16� ]

7. In the Select web part screen, select the Web services folder, Grid for web service web part, and then select OK, as shown in the following screenshot:

8. In the Web part properties (Grid for web service), enter the following values and then select OK.

Tab Property Value

Default Web part title Weekly Lunch menu

No data behavior Hide if no record found Checked

Web service settings Web service URL (.asmx file) The .asmx page URL

HTML Envelope Web part container Orange box

9. Select live site to view the web part, as shown in the following screenshot:

Chapter 6

[ 16� ]

What just happened?When we added the code to the GetDataSet() method, this created the web service end point. This method returns a Dataset that contains a list of items on a weekly lunch menu. The Dataset is an in-memory cache of data retrieved from a data source. The Dataset object consists of a collection of DataTable objects that are related to each other. The DataTable objects allow you to navigate through the table hierarchy. We then tested the service using the service description page. This page is automatically generated by ASP.NET and allows us to view and validate the returned XML.

When we added the Grid for web services web part to the Home page and then set its properties to match the web service we created earlier, it allowed the web part to call the web service when the page is displayed and render the returned lunch menu.

Tag cloudsA tag or a word cloud is a weighted list that provides a visual depiction of user-generated tags. Each tag is a hyperlink that leads to a collection of items associated with the tag. Tags are single words and usually listed alphabetically with the importance of a tag shown by a larger font size or changed color. This enables site visitors to find tags both alphabetically and by popularity within the site.

Time for action – tag cloud web partWe can use the tag module to display tagged documents that are organized into tag groups. The module comes with a Tag cloud web part, which displays tags within a tag group. The individual tags are displayed as links by the web part. Clicking a link in the tag cloud redirects you to another page, where a repeater display lists the documents that contain the clicked tag. The blog document type already contains a list of tags that we can use to set up a tag cloud for our Home page using the following steps:

1. Log in to CMS Desk, select Content tab, Home page, and Design tab. In zoneCenter, select the add web part icon.

System Integration

[ 170 ]

2. In the Select web part screen, select the Tagging & categories folder, Tag cloud web part, and then OK, as shown in the following screenshot:

3. In the Web part properties (Tag cloud), enter the following values and then select OK.

Tab Property Value

Default Web part title Hot blog tags

Tag filter Tag group name My Blog

Site name CorporateSite

Tag cloud settings Document list URL /Blogs/My-blog-1

HTML Envelope Web part container Black box

Web part container title Hot blog tags

4. Select the Design button to view the tag cloud, as shown in the following screenshot:

Chapter 6

[ 171 ]

What just happened?When you added the Tag cloud web part and entered the properties, it set the web part to scan the Blog directory and render the associated tags. When a page is rendered, the tag cloud reads the blog documents and then renders the appropriate tags.

Really Simple SyndicationRSS or Really Simple Syndication is a standardized web feed format used to publish frequently updated items like news and blogs into a standardized format. An RSS document is based on an XML format that contains full or summarized document text, plus metadata information like publication dates and author information. Web feeds allow a publisher to syndicate their content automatically. The XML file format allows the information to be published once and viewed by many different programs. Feeds benefit readers who want to subscribe to timely updates from their favorite websites or to aggregate feeds from many sites into one place. Users subscribe to RSS feeds using aggregator software. For example, you may subscribe to the feed of an online magazine on your iPhone aggregator application, so that you are notified when any new content is made available. Everything, from browsers to e-mail clients, is able to aggregate RSS feeds.

Time for action – subscribing to the news feedThe user subscribes to a feed by entering the feed URL or by clicking an RSS icon in a web browser that initiates the subscription process. The RSS reader checks the user's subscribed feeds regularly looking for new items that have been published.

Our site contains an RSS feed for the News item that we can set up for our users to subscribe to using the following steps.

1. Log in to the live site, select the News menu item, and then click the orange RSS icon on the bottom-left corner of the screen, as shown in the following screenshot:

2. Select the Subscribe to this feed button, as shown in the following screenshot:

System Integration

[ 172 ]

Which browser do you have?

In the previous example, we are using Internet Explorer 8. You may see a different screen depending on your browser. Regardless of your browser, look for the Subscribe to this feed option.

3. Select the Subscribe button, as shown in the following screenshot:

4. Select the View my feeds link, as shown in the following screenshot:

5. View the subscribed feeds list, as shown in the following screenshot:

Chapter 6

[ 173 ]

What just happened?When you clicked the orange RSS icon on the News page, this selected the News RSS feed. Within the browser, this started the feed subscription process. Once this was completed, the News RSS feed was added to the Internet Explorer RSS feeds.

Time for action – the Blog RSS feedBlogs also contains the ability to provide an RSS feed. The base page is already contained within the Kentico WebProject. We can use this page to retrieve the current list of blog RSS feeds for the default blog. this is done using the aliaspath parameter. the aliaspath parameter is a URL parameter that tells the page template which page should be displayed.

Let's use the blogs.aspx page to view the current list of RSS feeds, using the following steps.

1. Open a browser and enter the following URL:

http://localhost:48235/KenticoCMS/cmspages/blogrss.aspx

Don't forget

Depending on your system setup, you may need to replace at least the port number within the localhost to match your installation.

2. Review the current blog feed contained in the system.

3. Open a browser and enter the following URL:

http://localhost:48235/KenticoCMS/cmspages/blogrss.aspx?aliaspath=/Blogs/my-blog-1

Replace the port number with the localhost to match your installation.

4. Review the current blog feed list for the my-blog-1 blog in your browser window.



System Integration

[ 174 ]

What just happened?When you accessed the blog feed, you retrieved all RSS feeds for any blog in the system. However, the aliaspath parameter is used to tell which page template should be displayed. As a URL parameter, it was fed into the rendering engine. This allowed us to limit the feed to only the default my-blog contained in the system.

Time for action – implementing the Blog RSS feedTo add the RSS icon to the blog page, use the following steps:

1. Log in to CMS Desk, select Blogs, Design tab, and in zoneBlogList, select the add web part icon.

2. Select the Static text web part, as shown in the following screenshot and select OK.

3. In the Web part properties (Static text), update the following values and select OK.

Tab Property Name Value

Default Web part control ID

rssimage

Content Text <a href="~/CMSPages/BlogRss.aspx" style="border:0;"><img src="~/App_Themes/Default/Images/rss.gif" alt="rss" border="0" /></a>

HTML Envelope Content before <div style="padding:10px 0">

Content after </div>

Chapter 6

[ 175 ]

4. Select the Live site button and click the RSS icon, as shown in the following screenshot:

5. View the selected RSS feed, as shown in the following screenshot:

What just happened?When you selected the Static text web part and set the properties, it created a link, which called the BlogsRss.aspx page when clicked. For users selecting the link, this will activate the RSS reader within their browser and allow them to subscribe to the feed.

System Integration

[ 176 ]

Representational State TransferRepresentational state transfer (REST) is a style of software architecture for building distributed applications and services. REST is an application architecture based on clients and servers. A client initiates a request to the server and the server processes the request and returns the appropriate resources. Resources are the data and information that are returned to the client. At any time, a client can either be transitioning between application states or "at rest". A client in a rest state is able to interact with users, but creates no load and consumes no per client storage on the servers or network. The client begins sending requests when it is ready to transition to a new state. While one or more requests are outstanding, the client is considered to be transitioning states. The representation of each application state contains links (URLs) that may be used the next time the client chooses to initiate a new state transition. Each URL is a representation of some object. An application gets the contents of that object using a request. An application that conforms to REST is considered RESTful.

REST-style services are becoming very common on the web today and are surpassing traditional WSDL and SOAP. While the concept of REST isn't a standard, it does use standards like HTTP, URL, XML/HTML/GIF/JPG (resource representations), and text/xml, text/html, image/gif, image/jpg (MIME types). There are many examples of RESTful services that have been exposed across the web.

Time for action – retrieving an API keybit.ly is an example of a URL shortening service that takes a long URL and makes it shorter. The idea is extremely useful in combination with other services like Twitter that limit the length of a post. bit.ly also provides tracking capabilities that allow you to see how many clicks a shortened URL has received.

bit.ly exposes a set of REST APIs that you can use to access your data. In order to access their API, you must receive a key. To sign up for an API key, use the following steps:

1. Open a browser, go to http://bit.ly, and create a new account by selecting the Sign Up button, as shown in the following screenshot:

Chapter 6

[ 177 ]

2. Once you have completed the sign-up process, log in with your ID and click on your username, as shown in the following screenshot:

3. Locate your API Key in the area shown in the following screenshot:

What just happened?When you created your new account with bit.ly, it was assigned a unique API key. This key is used for any calls to the API. This key is personal and should not be shared with anyone. However, you will need it for any code that you will write against their API.

Time for action – using the bit.ly APIOne of the benefits of a REST-based service is that all calling parameters are passed as part of a URL string. This means that unlike standard web services, there is no need for a proxy, and this allows for all actions to be executed in the browser.

The bit.ly REST API consists of the following methods and can return JSON, text, and XML.

Parameter Description

/v3/shorten Given a long URL, returns a shorter one.

/v3/expand Given a short URL, returns a longer one.

/v3/clicks Given a short URL, returns statistics about the clicks on the link.

/v3/validate Given a bit.ly user login and API key validates they are active.

/v3/lookup Used to query for a short link based on a long URL. Often combined with other parameters to retrieve data for a long link.

/v3/authenticate Used by an application to look up an API key for a username and password combination.

/v3/info Given a short link, returns the page title.

System Integration

[ 17� ]

Code tip

In the following exercises, make sure that you use your own login and API key where needed.

We can examine this API further using the browser and these steps:

1. In a browser window, enter the following to validate your API key and login name.

http://api.bit.ly/v3/validate?x_login=Your Username&x_apiKey=Your key&apiKey=Your key&login=Your username&format=xml

2. If your API key and login name are valid, the following will be returned.

3. Enter the following into the browser window to shorten a URL for http://www.kentico.com:

http://api.bit.ly/v3/shorten?login=Your username&apiKey=Your key&uri=http%3A%2F%2Fkentico.com&format=xml

What's with the weird URL characters?

In many types of applications, a URL will need to be encoded before it is sent to the server. By default, URLs sent over the internet can only use ASCII characters and are restricted from using characters considered unsafe. In this example, we have encoded the portion of the URL considered unsafe, replacing the characters with A% followed by two hexadecimal characters.

Chapter 6

[ 17� ]

4. You will receive the response that contains the shortened URL.

Code tip

Make sure you use the short URL that you received above.

5. Enter the following into the browser to retrieve the long URL that we just shortened.

http://api.bit.ly/v3/expand?login=Your Username&apiKey=Your Key&shorturl=http%3A%2F%2Fbit.ly%2FavNcS4&format=xml

6. You will then receive the response that contains the long URL.

What just happened?When you entered the shortened URL, this accessed the bit.ly API and created a shortened URL. You then accessed the API again to retrieve the long URL.

System Integration

[ 1�0 ]

Time for action – building a REST user controlNow, let's create an ASCX user control within the Kentico project that calls the /clicks API of bit.ly using the following steps.

1. Create a new folder in the Kentico CMS WebProject called REST Examples, as shown in the following screenshot:

2. Right-click on the RESTExamples folder, select Add New Item, the Web User Control template, name it bitly.ascx, and select Add, as shown in the following screenshot:

Chapter 6

[ 1�1 ]

3. Select the Source tab for the bitly user control and enter the following code:


4. Select the Design tab in Visual Studio, double-click the Get Info button, and add the following references to the top of the code file.

using System.IO;using System.Net;

5. In the bGetInfo_Click event, enter the following code:

protected void bGetInfo_Click(object sender, EventArgs e) { string apiKey = "&apiKey=APIkey"; string loginKey="&login=username"; //encode the string string shortUrl =shorturl"&shortUrl= "+ Server.HtmlEncode(txtURL.Text); // Format for string sent is - http://api.bit.ly/v3/clicks?&shortUrl=http%3A%2F%2Fbit.ly%2FavNcS4&login=login&apiKey=key&format=xml // URL must be encoded WebRequest req = WebRequest.Create("http://api.bit.ly/v3/clicks?" + shortUrl + apiKey + loginKey); WebResponse resp = req.GetResponse(); Stream stream =resp.GetResponseStream(); StreamReader sr = new StreamReader(stream); String s=sr.ReadToEnd(); txtInfo.Text=s; }

Encoding revisited

ASP.NET provides a built-in function called Server.HTMLEncode that automatically encodes the URL entered into the text box.

System Integration

[ 1�2 ]

6. Start the Kentico CMS project, log in to CMS Desk, select the Content tab, Home page, and the Design tab. In the zoneCenter, select the add web part icon.

7. In the Select web part dialog, select the General folder, and select the User control web part, as shown in the following screenshot:

8. In the Web part properties (User control), update the following properties and select OK.

Tab Field Value

User control User control virtual path ~/RESTExamples/bitly.ascx

HTML Envelope Web part container Black box

9. Once the page refreshes, in the Enter Short URL field, type http://bit.ly/avNcS4 and click the Get Info button, as shown in the following screenshot:

What just happened?When you selected the Web User Control template, this created a custom control. We then added a display and the code that accesses the bit.ly API. Once this was completed, we then hosted the control with the User control web part. Then we used the control within the Design tab.

Chapter 6

[ 1�3 ]

TwitterTwitter is a social networking and micro blogging service that allows registered users to send or receive messages known as tweets. Tweets are text-based posts of up to 140 characters displayed on the author's profile page and delivered to the author's subscribers who are known as followers. Senders can restrict message delivery to only their friends, or by default, allow open access. The usage of Twitter has eclipsed most other forms of social media and is often a key to driving usage of many sites.

Time for action – Twitter integrationLet's extend the global event that we created in Chapter 5 to capture any new blog posts and send out a tweet using our company account. To do this, use the following steps:

1. In Visual Studio Solution Explorer, select the CustomEventHandler project, then double-click the CustomTreeNodeHandler.cs file. In the Code view, select the OnAfterInsert() method and enter the following code:

public override void OnAfterInsert(object treeNodeObj, int parentNodeId, object tree){ // INSERT YOUR CUSTOM AFTER-INSERT CODE // type the document as TreeNode TreeNode newsDoc = (TreeNode)treeNodeObj; switch (newsDoc.NodeClassName.ToLower()) { // handler for news items case ("cms.news"): // get content of the inserted news item and send it by e-mail EmailMessage email = new EmailMessage(); email.From = "[email protected]"; email.Recipients = "[email protected]"; email.Subject = ValidationHelper.GetString(newsDoc.GetValue("NewsTitle"), ""); email.Body = ValidationHelper.GetString(newsDoc.GetValue("NewsSummary"), ""); EmailSender.SendEmail(email); break; //handler for blog post case ("cms.blogpost"): string postText = "Blog Post:" + newsDoc.DocumentName + "-" + "http://" + CMSContext.CurrentSite.DomainName + UrlHelper.ResolveUrl(DocumentURLProvider.GetUrl(newsDoc.NodeAliasPath, newsDoc.DocumentUrlPath)); PostTweet("username", "password", postText);

System Integration

[ 1�4 ]

break; default: break; }}

Code note

In Chapter 5, we first added the event handler code that just dealt with the CMS.news item. Now we are enclosing this code in a switch statement that allows us keep our existing code and check for new blog posts as well.

2. At the end of the CustomTreeNodeHandler.cs code file, add the following method that posts the new tweets:

public static void PostTweet(string username, string password, string tweet){ try { // encode the username/password string user = Convert.ToBase64String(System.Text.Encoding.UTF8.GetBytes(username + ":" + password)); // determine what we want to upload as a status byte[] bytes = System.Text.Encoding.ASCII.GetBytes("status=" + tweet); // connect with the update page HttpWebRequest request = (HttpWebRequest)WebRequest.Create("http://twitter.com/statuses/update.xml"); // set the method to POST request.Method="POST"; // set the authorization levels request.Headers.Add("Authorization", "Basic " + user); request.ContentType="application/x-www-form-urlencoded"; // set the length of the content request.ContentLength = bytes.Length; // set up the stream Stream reqStream = request.GetRequestStream(); // write to the stream reqStream.Write(bytes, 0, bytes.Length); // close the stream reqStream.Close(); } catch (Exception ex) {/* DO NOTHING */}}

Chapter 6

[ 1�5 ]

3. Create a new blog post and then validate that the tweet was posted, as shown in the following screenshot:

Where is my Tweet?

Once you post your tweet using the preceding code, it may take several minutes for it to become visible on Twitter.

What just happened?When you updated the OnAfterUpdate() method to include the switch statement, this captured both adding any new News or Blog items. When a new Blog post was added to the system, the PostTweet() method was called. This method accessed the HTTP request object and posted the request to Twitter.

SummaryWe learned a lot in this chapter about working with external systems and integrating content and features. Specifically, we covered:

Implementing the Social bookmarking web part

Developing an ASMX web service

Implementing the Tag cloud web part using blogs

Developing RSS feeds

Applying REST to our website

Programming a Twitter post for new blog entries

Now that we've learned how to integrate and aggregate information across the Web, it's time to add a new feature to our site. Content authors have requested the ability to provide e-commerce functionality on our site—which is the topic of our next chapter.

7Adding E-commerce Functionality

to your SiteIn order to meet several new business requirements, we have been asked to add e-commerce functionality to our internet presence. This new site functionality will allow content editors and authors to sell various types of electronic products like cell phones and PDAs.


Create and configure an e-commerce website

Learn how to manage multiple sites using the administration interface

Learn about product management

Discover how the payment process works

Learn to integrate an e-commerce site into our existing company website

Creating an e-commerce siteIn a production environment, when a user visits an ASP.NET application, like Kentico CMS, their browser sends a request to the website. The HTTP request is received by the production web server and is processed by Internet Information Services (IIS). IIS provides the coordination with the ASP.NET runtime to generate and return the content for the requested resource. IIS is built for use in production servers. Installing IIS in our development environment means additional installation steps and requires security updates. Additionally, IIS may not always be an option for the following reasons:

Adding E-commerce Functionality to your Site

[ 1�� ]

You are using the Kentico CMS WebProject with Windows XP Home Edition, which doesn't support IIS

You don't want to host a web server on your local computer for security reasons

Your company has a corporate policy that doesn't allow the installation of IIS

In order to alleviate this problem, the Visual Studio development environment includes an ASP.NET Development Server. Specifically designed for development environments, it serves ASP.NET pages under the localhost scenario or simply browsing from the same computer as the web server. It will not serve pages to any browser requests on another computer or outside of the current application scope.

Time for action – new site wizardDuring our initial installation, we configured the Kentico CMS WebProject to use the ASP.NET Development Server. Anytime we start the Kentico CMS project, it also starts the ASP.NET Development Server and assigns a URL in the format http://localhost:portnumber/KenticoCMS. In order to create a second running website, we will convert our existing application to IIS. Once this is completed, we can configure the new site using Site Manager. Using the following steps, we can create a new IIS application and then create a new e-commerce site.

1. From the Start button on your Windows desktop, select Internet Information Services (IIS) Manager.

Security required

Internet Information Services (IIS) Manager is a Microsoft Management Console application that is used to configure and manage IIS websites. In order to use this console, you must be logged in as a member of the administrator group on the local machine.

Chapter 7

[ 1�� ]

2. expand the Connections tab, select Default Web Site, right-click and select Add Application, as shown in the following screenshot:

3. In the Add Application form, enter the following information and select OK.

Field Name Value

Alias KenticoCMS

Physical Path c:\inetpub\wwwroot\KenticoCMS

Where are my files?

This path assumes you used the default path for the initial Kentico CMS installation.

4. Validate that there is a new application called KenticoCMS, as shown in the following screenshot:


[ 1�0 ]

5. Start the Kentico CMS WebProject, log in to CMS Site Manager, click the Sites tab, and select the New site wizard, as shown in the following screenshot:

6. In Step 1 | Choose default web site, select Use web site template and select Next, as shown in the following screenshot:

7. In Step 2 | Choose web site template, select the E-commerce Site template, as shown in the following screenshot and select Next.

Chapter 7

[ 1�1 ]

8. In Step 3 | Enter new site settings, enter the following values and select Next.

Field Value

Site display name E-commerce site

Site code name EcommerceSite

Domain name localhost

Setting the domain name

Make sure to change the domain name to localhost.

9. In Step 4 | Object Selection, click Next.

Object Selection

By default, all objects that are not already present within the system are imported.

10.Once the import is completed and you receive Step 6 | The website has been created successfully, select Finish.

11. In Site Manager for the E-commerce site, select the open live site icon, as shown in the following screenshot:


[ 1�2 ]

12.Validate that you see the new e-commerce live site, as shown in the following screenshot:

What just happened?When the IIS Manager console was started, we used it to modify the existing Kentico installation directory to make it a web application. This enabled the application to run within the ASP.NET Development Server and IIS. This modification removed the dependency on the port number that is automatically added by the ASP.NET Development Server on your development machine. Removing this dependency allowed you to create a second website using the Kentico CMS Site Manager. This website was created based on the e-commerce sample site.

Have a go hero – development machine policyUnless you are the only application developer in your organization, others will need to set up and deploy Kentico CMS on their development machines. This becomes easier if you create a standard set of installation guidelines. Spend some time and prepare a recommendation that covers how your company should set up and deploy a Kentico CMS development environment.

Chapter 7

[ 1�3 ]

Time for action – changing the e-commerce site master page Now that we have the e-commerce site configured, we can change the logo and master page to reflect our company's design. This can be done using the following steps:

What site am I in?

CMS Desk edits a single site. If you look at the top of the CMS Desk screen, you can see that there is a drop-down box that allows you to switch between sites. In this chapter, we want to make sure that have the e-commerce site selected.

1. Log in to CMS Desk, select the Content tab, E-commerce site, Page tab, and then click the Select button on the top logo, as shown in the following screenshot:

2. In the Select image screen, from the Site drop-down, select Corporate Site. From the content tree, select the Images folder, CompanyLogo, then click Select, and then Save.

3. Select the Home page and the Page tab to view the new logo, as shown in the following screenshot:


[ 1�4 ]

What just happened?When we logged into the e-commerce site CMS Desk, we modified the site master page to include the main company logo. To ensure site consistency, we used our company logo that was stored on the corporate site.

Time for action – removing the log-on barWe can remove the log-on bar using the following steps.

1. Log in to CMS Desk, select the Content tab, E-commerce site, and the Design tab. Right-click the txtTrialInfo web part and select Remove, as shown in the following screenshot:

2. Select the Live site button to view the page.

What just happened?Within CMS Desk, we removed the txtTrialInfo web part from the master page. This web part contains the login bar for the CMS Desk and Site Manager, available on each page. Once removed, this login bar is no longer visible across the e-commerce website.

Chapter 7

[ 1�5 ]

Product managementThe product catalog is the heart of the e-commerce site. In order to help support and promote the products, the site we are building contains the following structure:

Home (Page)

Products (Page)

a. Category 1 (Page, contains Repeater or DataList web parts displaying products with links to the shopping cart)

i. Product 1 (Product-enabled document)

ii. Product 2 (Product-enabled document)

b. Category 2 (Page, contains Repeater or DataList web parts, displaying products with links to the shopping cart)

i. Sub Category 1 (Page, contains Repeater or DataList web parts displaying products with links to the shopping cart)

1) Product 3 (Product-enabled document)

2) Product 4 (Product-enabled document)

3. News (page)

4. Special pages

a. Shopping cart (Page, contains Shopping cart web part)

b. My account (Page, contains the My account web part)

Time for action – adding productsNow, let's add a new PDA to our product catalog using the following steps:

1. Sign in to CMS Desk, select the Content tab, select the Products folder, PDAs, and click the New document button.

2. Select the New document type of Product - PDA, as shown in the following screenshot:

1.

2.


[ 1�6 ]

3. In the new Product - PDA form, enter the following information and then select Save.

Form Field Value

Name HTC Touch Cruise

Battery Lithium ion

Display type TFT LCD

Resolution 240x320

RAM (MB) 128

Processor (MHZ) 400

Weight(g) 200

Operating system Microsoft Windows Mobile 6

Publish from Select the Now button

Create a new product Checked

Price 900

4. Select the Page tab to view the new HTC Touch Cruise document, as shown in the following screenshot:

Chapter 7

[ 1�7 ]

What just happened?When you selected and then completed the Product - PDA document, this created a new PDA called HTC Touch Cruise, based on an existing document type.

Time for action – adding product optionsProduct options can be defined for each product. A product option allows us to offer our customer variability in their product choices. Let's add a color product option for the HTC Cruise phone by carrying out the following steps:

1. Log in to CMS Desk, select the Tools tab, E-commerce menu item, Product options, and select the New option category link, as shown in the following screenshot:

2. In the New option category form, enter the following values and select OK.

Form Field Value

Display Name Color

Code name color


[ 1�� ]

3. In the General tab, Selection type field, select Checkboxes in vertical layout and select OK, as shown in the following screenshot:

4. Select the Options tab and select the New product option link.

5. Enter the following two new options, selecting OK to save each.

Form Field Value

Product name Black

Price 0

Department General

Form Field Value

Product name Silver

Price -10

Department General

Chapter 7

[ 1�� ]

6. Select the Products tab and click the edit icon for the HTC Touch Cruise, as shown in the following screenshot:

7. Select the Options tab and click the Add categories button, as shown in the following screenshot:

8. In the Select category screen, select Color and click OK.

9. Select the Content tab, Products folder, PDAs, HTC Touch Cruise, Page tab, to view the new product options, as shown in the following screenshot:

What just happened?When you created a new product option, and then added it to the HTC Touch Cruise, this was then displayed on the Products page. This allowed someone purchasing this item to pick their choice of colors when purchasing this item. The Black option keeps the price standard, while the Silver option reduces the item's price by $10.


[ 200 ]

Time for action – customizing product categoriesProduct categories are a way to easily organize products and enable customers to quickly find types of products they may be interested in. We can customize the product category using the following steps:

1. Log in to CMS Desk, select the Content tab, Products tab, and select the New document icon.

2. In the New document screen, select the Page (menu item).

3. In the new page dialog, enter the Page name as Plasma TVs, select the Ecommerce site folder, then the Ecommerce - Products template, and select Save, as shown in the following screenshot:

4. Select the Page tab and select Add new product link, as shown in the following screenshot:

Chapter 7

[ 201 ]

5. In the new Product form, enter the following values and select Save.

Form Field Value

Name Samsung Super TV

Resolution(Mpx) 20

Memory 2gig

Digital zoom Yes

Video support All

Weight(g) 300

Width(mm) 400

Height(mm) 500

Depth(mm) 2

Publish from Select Now

Create a new product Checked

Price 1500

Department General

6. Select the Content tab, Plasma TVs, and the Page tab to view the new Samsung Super TV, as shown in the following screenshot:


[ 202 ]

What just happened?When you selected the new Page item and created the Plasma TVs, this created a new product category page. This page allows site visitors to find items they may be looking for more easily.

Time for action – adding products to multiple categoriesYou may want to add a product to multiple categories. Let's add the Apple iPhone to the PDA category using the following steps:

1. Log in to CMS Desk, select the Content tab, expand the Products folder, select PDAs, and click the New document icon.

2. In the New document selection screen, click Link an existing document, as shown in the following screenshot:

3. In the Link document screen, select the Products folder, Cell phones, Apple iPhone, and then click Link, as shown in the following screenshot:

Chapter 7

[ 203 ]

4. Select the Page tab to view the linked page, and in the content tree view, select the linked icon next to the Apple iPhone, as shown in the following screenshot:

What just happened?When you selected Link an existing document, this allowed the product document to be reused in another product category. Reusing products this way allows a site to surface products in multiple areas, ultimately making it easier for site users to locate items they would like to purchase.

Time for action – adding a new productWe can add a new product using the following steps:

1. Log in to Site Manager, select the Development tab, Document types, and click the New document type link, as shown in the following screenshot:

2. In Step 1 | General, enter the following information and select Next.

Form Field Value

Document type display name PlasmaTV

Document type code name CustomProduct (namespace) television (document type)

3. In Step 2 | Data type, select Next.


[ 204 ]

4. In Step 3 | Fields, enter the following attributes and select Next.

Form field Value

Attribute name TVName

Attribute size 100

Field caption Product Name

Field type Text box

Form field Value

Attribute name TVScreenType

Attribute size 100

Field caption Screen Type

Field type Text box

How do I enter attributes?

This is the same screen that we used in Chapter 5 to create the custom employee biography document.

5. In Step 4 | Additional settings, from the Document name source drop-down box, select TVName, as shown in the following screenshot, and select Next.

6. In Step 5 | Parent types, click the Add document types button.

7. In the Select document types screen, select the Document type name as Page (menu item)(CMS.MenuItem), select OK, and then select Next.

8. In Step 6 | Sites, select the Add sites button. In the Select sites dialog, select the E-commerce site, select OK, and then click Next.

9. In Step 7 | Search options, select Next.

10. In Step 8 | The wizard has finished, click the Finish button.

Chapter 7

[ 205 ]

11. Once the screen refreshes, select the General tab, select the Document is a product type option, and then click OK, as shown in the following screenshot:

12. Log in to CMS Desk, select the Content tab, Products folder, right-click and select the New document icon, and validate that the new PlasmaTV product is available, as shown in the following screenshot:

What just happened?When you created a new document type and then select the Document is a product type option, this created a new product. Once the new document was created, we were then able to see it in the new products screen.


[ 206 ]

Purchase process and payment gatewayOnce the product catalog is defined, the purchase process and payment gateways are the next step to completing the e-commerce site. The purchase process is the set of steps that a user will complete for the purchase of a product on the site. An important part of the purchase process is accepting payment for the selected goods. A payment gateway is an application service provider that authorizes the payment for e-business. It is the equivalent of a physical point-of-sale terminal located in a retail store. A payment gateway protects credit card details, encrypting sensitive information such as credit card numbers to ensure that information passes securely between the customer and the merchant and also between the merchant and payment processor. The payment gateway is responsible for handling payment details on behalf of the website and processing credit card details so that the website doesn't have to.

Time for action – making a purchaseLet's examine the purchase process for an item, using the default process, to see what users will see when they purchase an item. This is done using the following steps:

1. Go to the live site, select the Products tab, select Cell phones, select the Nokia N82, and click the Add to cart button, as shown in the following screenshot:

Chapter 7

[ 207 ]

2. In the Nokia N82 - Color options, select Black, enter a quantity of 2, and click Add to cart, as shown in the following screenshot:

3. In Step 1 of 6 - Add some products to the shopping cart, select the price detail magnifier link, as shown in the following screenshot:

4. Review the Product price detail screen to view any discounts and taxes and then select Close.

5. In Step 1 of 6 - Add some products to the shopping cart, select the Check out button.

6. In Step 2 of 6 - Registration check, select Create a new account, as shown in the following screenshot:


[ 20� ]

7. In Step 2 of 6 - Registration check, enter the following information to Create a new account and select Next.

Form Field Value

First name Henry

Last name Smith

E-mail (user name) [email protected]

Password Password

Confirm password Password

8. In Step 3 of 6 - Select billing and shipping address, enter the following information for the Billing address and select Next.

Form Field Value

Name (company or personal) Development Soft

Address lines 1020 Blueberry Lane

City Tucson

ZIP 85754

Country USA

State Arizona

Additional addresses

The user has the option of entering different shipping and billing addresses by selecting the My shipping address is different from the billing address option.

9. In Step 4 of 6 - Select payment and shipping methods, in the Shipping drop-down box, select DHL. In the Payment drop-down box, select Credit card and select Next, as shown in the following screenshot:

Chapter 7

[ 20� ]

10. In Step 5 of 6 - Order preview, verify that the order is correct and then select the Order now button.

11. In Step 6 of 6 - Payment, enter Your credit card details using the following information and then select Finish payment.

Field Value

Credit card number 123-456-789-001

Credit card CCV 161

Credit card expiration 04-2013

12. View the Temporary Payment Page, as shown in the following screenshot:

What just happened?When you selected the Nokia N82, it was added to the shopping cart, which allowed you to preview and change the order. Selecting Check out brought you into the six-step check out process. This process prompted an account creation for the collection of your shipping and billing information. Once this information was collected, the shopping cart was associated with the new user and the credit card information was collected and processed through the payment gateway.


[ 210 ]

Time for action – payment gatewaysThe final step in setting up the payment process is deciding on what payment gateway will be used. We can select from the following options for our site.

No online payment: the customer is displayed a thank You page and payment can be received on merchandise delivery.

Customer Credit: the customer can pay using their store or merchant credit. An example of this may be a credit received from a return or as part of a customer loyalty program.

Authorize.NET: The customer pays using their credit card and the information is passed to their Authorize.Net account.

PayPal: the customer pays using their credit card or PayPal account.

Custom Payment Gateway: You integrate a custom payment gateway. This is useful for either connecting to store systems or other third-party gateways.

Unless we have decided not to accept credit cards or build our own custom code, we will need to set up a payment gateway from a third party. Our system contains the necessary hooks to interface with either PayPal or Authorize.Net, using a merchant account. A merchant account provides the necessary identifiers for the third party and our system to interact securely and ensure that we receive any proceeds from our sale. Once a merchant account has been created with either PayPal or Authorize.NET, we can configure our local payment gateway using the following steps:

For PayPal, we can configure our merchant account as follows:

1. Log in to Site Manager, select the Settings tab, select Payment gateway - PayPal, enter your merchant account information, and select Save when done, as shown in the following screenshot:

Chapter 7

[ 211 ]

For Authorize.NET, we can configure our merchant account as follows:

2. Log in to Site Manager, select the Settings tab, select Payment gateway - Authorize.NET, enter your merchant account information, and select Save when done, as shown in the following screenshot:

What just happened?Once you decide which payment gateway to use, then complete the sign up process. This provides an authorization key for activation. Once this is received, you are then able to configure the e-commerce system to interact with either PayPal or Authorize.Net.

Have a go hero – choosing the payment gatewayChoosing the right payment gateway is an important part of the e-commerce process. Spend some time to review each of the possible options. Once you have reviewed them, formulate a proposal to management for the selection.


[ 212 ]

Time for action – customizing the purchase processProviding your customers with an intuitive checkout experience is an important part of the e-commerce process. While not always necessary, customizing the purchase process steps may help to provide an easier experience for your customers. Customizing the purchase process is done using the following steps:

1. Log in to CMS Desk, select the Tools tab, E-commerce menu option, Configuration tab, Store settings menu, and Checkout process. In the Caption column, select the edit icon for Select customer, as shown in the following screenshot:

2. Click Show on live site and then select OK, as shown in the following screenshot:

3. Log in to the live site and click the Add to cart button for the Apple iPhone.

4. Validate that the new Step 1 of 7 - Select customer is available, as shown in the following screenshot:

Chapter 7

[ 213 ]

5. In the Select customer screen, click Henry Smith as shown in the following screenshot:

What just happened?Selecting the Checkout process and adding the Select customer step to the live site added a new step in the Checkout process. Once this was done, we then added an item to our shopping cart and validated that the Select customer step is available.

Have a go hero – defining the Checkout processthe Checkout process is an important step in defining site usability. Spend some time interviewing internal team members and reviewing the checkout processes of similar sites. Once this is done, formulate a recommendation that includes a whiteboard process of your proposed Checkout process.

SummaryWe learned a lot in this chapter about building an E-commerce site using the E-commerce starter site. Specifically, we covered:

Configuring our development machine for multiple sites

Creating an e-commerce site based on the E-commerce starter site

Adding existing products to our catalog

Creating a new product based on a document

Using the default payment process

Improving the default payment process with a new step

We also learned several techniques for integrating multiple sites together.

Now that we've learned the basics of creating new sites and how they can be extended, we're ready to learn about site administration—which is the topic of our next chapter.

�Advanced Management

In order to finalize the initial phase of site development, there are several outstanding management tasks to be completed. In this chapter, we will look at providing user personalization, multi-language options, and deploying our site to production.


Learn to implement user personalization

extend page templates

Add new site languages

Control a user's default language

Deploy to a production server

Use system scheduling

WidgetsFrom a page designer's point of view, widgets, like web parts, are a basic building block of page templates. Widgets are used to support page personalization. They allow users to modify the structure of live page templates. All personalization is automatically saved, and, depending on the user's role, immediately becomes available on the live website.

Advanced Management

[ 216 ]

Time for action – adding widgetsWidgets allow users with the appropriate rights to modify their display, properties, and placement on the page template. When working with widgets, security is based on four site roles, as shown in the following table:

Site role Description

Site Developer/Administrator Defines the placement of widget zones, default content, defines the web properties available for personalization, and manages all available widgets

Page editor Defines the content of the widget zones created in the page templates by the site developer/administrator

Group Administrator Defines the design of group pages

Web Site Users Defines the design of their home page or another page that is identified for personalization

Let's log in to the live site as a website user and modify an existing widget using the following steps:

1. Log in to the live site as Joe Brown, select the Examples menu item, then My home page, as shown in the following screenshot:

Don't forget

This example uses Joe Brown that we created in Chapter 1.

Chapter 8

[ 217 ]

2. Hold your mouse pointer over the My messages widget zone and select the Add widget icon (+) next to messages, as shown in the following screenshot:

3. In the Select widget screen, select All widgets, select the Date & time widget, and select OK, as shown in the following screenshot:

Advanced Management

[ 21� ]

4. In the Widget properties (Date & time) screen, change the Widget title to Current Time, as shown in the following screenshot, and select OK.

5. Validate that the Current Time widget is visible, as shown in the following screenshot:

What just happened?We first logged in to the live site. Selecting My home page and then selecting the widget zone brought us to the selection of our available widgets. Once we selected the Date & time widget, we were able to change the available properties. In this example, we changed the Widget title property. Finally, we were able to see our deployed widget on our My home page.

Time for action – creating a widget zoneWidgets are displayed in widget zones. We can add a new widget zone to an existing page using the following steps:

1. Log in to CMS Desk, select the Content tab, Company page, Design tab, and select the edit layout icon for the page template, as shown in the following screenshot:

Chapter 8

[ 21� ]

2. In the Page layout screen, replace the existing Page layout with the following and then select Save.

<div class="textPlaceholderLeftMenu">  <div class="zoneLeft" style="float: left;"> <cc1:CMSWebPartZone ID="zoneLeft" runat="server" /> </div>  <div class="zoneContent" style="float: left;"> <cc1:CMSWebPartZone ID="zoneContent" runat="server" /> </div>

 <div class="zoneBottom" style="float: left;"> <cc1:CMSWebPartZone ID="zoneBottom" runat="server" /> </div></div>

3. In zoneBottom, select the configure drop-down box and then select Properties, as shown in the following screenshot:

Advanced Management

[ 220 ]

4. In the Webpart zone properties screen, change the Widget zone type property to User personalization and select OK, as shown in the following screenshot:

5. Select the live site button and hover your mouse over the new zoneBottom widget zone to validate that you can see the Add widget icon, as shown in the following screenshot:

What just happened?When we selected the edit page layout icon and replaced the existing Page layout, this added a new web part zone to the page called zoneBottom. Then we selected the properties of the web part zone to convert it to a widget zone. In the Widget zone type properties, there are four available options:

Option name Description

None Zone only uses web parts

User personalization Create a widget zone editable by website users

Customization by page editor Create a widget zone editable by authorized page editors

Customization by group administrator Create a widget zone editable by group administrators

Chapter 8

[ 221 ]

Changing zone types

Whenever the zone type is changed, all web parts or widgets currently contained in the zone are removed.

We then selected the User personalization option, which allows live site users to add widgets. Finally, we selected the Live site button and validated that we were able to add widgets to the new widget zone.

Have a go hero – system personalizationNot all areas of the system will have personalization enabled. Spend some time reviewing your planned system design and put together a recommendation for what key system areas will contain user personalization.

Time for action – creating a widgetNow that we have a Widget zone, let's create a new widget and add it to our zone using the following steps:

1. Switch to Site Manager, select the Development tab, select the Widgets menu item, and click New widget, as shown in the following screenshot:

Advanced Management

[ 222 ]

2. In the Select web part screen, select Blogs, Recent posts, as shown in the following screenshot, and select OK.

Don't forget

Widgets are based on web parts. When you create a new widget, you start by selecting an existing web part.

3. Select the Properties tab, then select then SelectTopN properties, click Display attribute in the editing form, as shown in the following screenshot , and select OK.

Chapter 8

[ 223 ]

4. Select the PathToRecentPosts property, click Display attribute in the editing form, and select OK.

5. Select the Security tab. In the Allowed for column, select This widget can be used in user zones and Authenticated users, as shown in the following screenshot:

6. Open a new browser, log in to the live site as administrator, and select the Company menu item. In zoneBottom, select Add widget. In the Select widget screen, select the Recent posts widget, as shown in the following screenshot, and select OK.

Advanced Management

[ 224 ]

7. In the Widget properties (Recent posts) screen, for the Select top N field, and enter 3. In the Path to recent posts, enter /Blogs/%, as shown in the following screenshot, and select OK.

What is the % sign?

The % sign is a shortcut annotation that means any directory below the one specified. In this example, it means any directory underneath the Blogs directory.

8. Validate that your latest three posts are available, as shown in the following screenshot:

What just happened?Selecting the New widget option in Site Manager provided a list of existing web parts that can be exposed as widgets. When we selected the Recent posts web part, which created the new widget, we then exposed the Select top N and Path to recent posts properties by selecting the Display attribute in editing form. Once the new widget was created, we then logged in to the live site as administrator and added the new Recent posts widget to the zoneBottom widget zone we created.

Chapter 8

[ 225 ]

Multi-lingual sitesAnything published on our website is available to the entire planet. Having your content available in different languages is important if you plan to cater to the global audience. One aspect of internalization is the translation of web pages.

Time for action – adding new languagesThe first step in translating pages is to make the new culture available to content editors. Let's add the Spanish language to our Corporate Site. this is done by carrying out the following steps:

1. Log in to Site Manager, select the Sites tab, and click the edit icon for the Corporate Site.

2. In Site properties, select the Cultures tab, and click Add cultures, as shown in the following screenshot:

Advanced Management

[ 226 ]

3. In Select cultures, select Spanish - Mexico and select OK, as shown in the following screenshot:

4. In Site properties, validate that the culture Spanish - Mexico is available, as shown in the following screenshot:

5. Open a new browser window, view the live Corporate Site, and validate that Spanish is available at the top-right of the site, as shown in the following screenshot:

Chapter 8

[ 227 ]

What just happened?When we added the Spanish - Mexico culture to the Corporate website, this made Spanish available within the Corporate Site.

Have a go hero – available languagesWhile all websites are available globally, it's simply not practical to translate any site into all possible languages. Spend some time reviewing your existing site audience and then create a proposed list of languages that you will make available to content editors.

Time for action – translating site contentOnce the culture has been added, the next step is to allow content editors to start translating content into Spanish. You will first need to translate the root document. This is done using the following steps:

1. Log in to CMS Desk, in the Site drop-down box select the Corporate Site, select the Content tab, select the Corporate Site root document, and then select the Spanish button, as shown in the following screenshot:

2. In New culture version (es-MX), click the Copy content from another language, then select English - United States, click Create document, as shown in the following screenshot, and then select Save.

Advanced Management

[ 22� ]

3. Select the Home page, Copy content from another language, Create document, as shown in the following screenshot, and then select Save.

What are those X icons in the content tree?

The cross icons shown at the end of the items in the content tree indicate that the document hasn't been translated into the selected language.

4. Select the Page tab. Within the Main text web part, select Welcome to the Sample Corporate Site and change it to Bienvenido al Sitio de Estudio de las empresas. then select Save, as shown in the following screenshot:

Chapter 8

[ 22� ]

5. Select the Live site button to view the partially translated Spanish page, as shown in the following screenshot:

What just happened?When you selected the Spanish button and then the Corporate Site document, you were prompted to either copy content from another language or just create an empty document. We selected the Copy content from another language option. This copied the existing english document over to the Spanish language version. We then translated the Home page document using the same steps. We then edited a portion of the page into Spanish and saved the existing document. Once this is completed, we can switch between language versions by selecting the desired language using the culture buttons. This provides the ability to edit language or region-specific content.

Advanced Management

[ 230 ]

Time for action – viewing language-specific contentTo see the translated page in action, we need to log out and view the live site. We can use the language flags that are added automatically or direct URL links using the following steps:

1. Log in to the live site, and select the English link to view the English version of the site.

2. Select the Spanish link to view the translated page, as shown in the following screenshot:

Chapter 8

[ 231 ]

Where are my pages?

As you can see, you are missing a lot of pages in the menu. they are currently unavailable as they are not translated.

3. Open a new browser and enter the URL http://localhost:58995/KenticoCMS/default.aspx?lang=es-MX to view the Spanish content, as shown in the following screenshot:

Don't forget

You may need to change the port number in the above URL to match your own installation.

Advanced Management

[ 232 ]

4. Open a new browser and enter the URL http://localhost:58995/KenticoCMS/default.aspx?lang=en-US to view the English content, as shown in the following screenshot:

What just happened?When you selected the language flags on the live site, this redirected the browser to the selected language. This redirection is based on appending the lang=<language_code> parameter to retrieve the language content corresponding to the given language code. As we saw next, we could also access these links directly to view both the Spanish and the English versions of our site.

Time for action – combing with current cultureAt this point, we have a variety of documents that haven't been translated. We can either translate the remaining documents or combine these pages with English. While there may be some pages we completely translate, many pages may be left in English. This option is controlled within Site Manager and can be changed using the following steps:

1. Log in to the live site and select the Spanish link.

Chapter 8

[ 233 ]

2. Log in to CMS Site Manager and select the Settings tab. In the Sites drop-down box, select global and then select Web site. In Web site, select the Combine with default culture. Click Combine files with default culture and select Save, as shown in the following screenshot:

3. Select the Sign Out link, then select Spanish, as shown in the following screenshot, in the site with the combined files and pages.

What just happened?When we first selected the Spanish live site, any page that was not translated was not available. When we selected the option to Combine with default culture and the Combine files with default culture option in Site Manager, this automatically combined both the English and Spanish versions of the site pages together.

Advanced Management

[ 234 ]

Site deploymentUp to this point, we have been building and modifying sites on our development machine. Once the site has been completed, it needs to be deployed to our production server.

Time for action – production deploymentLet's first look at how to export a site. This process creates a self-contained extraction package that is useful for fresh deployment of a complete snapshot of a site. to export our current Corporate Site and content, we can use the following steps:

1. Log in to Site Manager. For the Corporate Site, select the export icon, as shown in the following screenshot:

2. In Step 1 | Export type, enter the File name as CorpSite.zip, as shown in the following screenshot and select Next.

3. In Step 2 | Objects selection, click Next.

Chapter 8

[ 235 ]

4. Once the export has finished in Step 3 | Export progress, select Finish, as shown in the following screenshot:

5. Open Windows Explorer and browse to C:\inetpub\wwwroot\KenticoCMS\CMSSiteUtils\Export to view the exported site contained in the CorpSite.zip file, as shown in the following screenshot:

What just happened?When we selected the Export icon and completed the export wizard, this created a ZIP file for our site. This export file contains both structure and data in the current Corporate Site. We then viewed the ZIP file and its contents in the default CMS export directory.

Advanced Management

[ 236 ]

Time for action – deploying a new production siteNow that you have created the package, we can create the initial install of our site on a production server by carrying out the following steps:

1. Copy all files from the c:\inetpub\wwroot\KenticoCMS directory on your development machine to the production server.

2. Copy the CorpSite.zip file created earlier to the production web server \CMSSiteUtil\Import directory.

3. On the production server, open the KenticoCMS web.config file and remove the following line from the <connectionStrings> entry:

<add name="CMSConnectionString" connectionString="Persist Security Info=False;Integrated Security=SSPI;database=KenticoCMS;server=THOM-PC\THOMPC;Current Language=English;Connection Timeout=240;" />

4. Open a browser and enter the production URL to the Kentico CMS default.aspx page and configure the SQL Server database connection.

5. Log in to the production server Site Manager and select Import site or objects, as shown in the following screenshot:

6. In Step 1 | Import Type, select CorpSite.zip, as shown in the following screenshot and select Next.

Chapter 8

[ 237 ]

7. In Step 2 | Site details, complete your production domain information, as shown in the following screenshot and select Next.


9. In Step 4 | Import progress, select Finish and then view the live site.

What just happened?Once we completed copying the website files onto our production server, we then finalized the production installation. We then imported our development site into our production installation and configured our production domain information. With the completion of the site import, review the following to ensure that our production site is correctly configured:

1. In Site Manager, Sites make sure that domain and domain aliases are set up correctly for the production domain.

2. In Site Manager, the Settings tab validates that your site settings are set correctly for your production server. This includes your SMTP server for sending e-mail.

3. In Site Manager, select the live site icon and validate that the production site displays correctly across several different browsers.

Advanced Management

[ 23� ]

Time for action – incremental changesNow that we've imported our production site, if your license includes content staging, we no longer need to use the full export/import option and can instead use the Content staging feature. This can be enabled using the following steps:

1. Log in to Site Manager, select the Settings tab, and Content staging. Select Log Content changes, Log data changes, Log object changes, Log staging changes, Log export tasks, Enable staging service, and select Save, as shown in the following screenshot.

Chapter 8

[ 23� ]

2. Log in to CMS Desk as administrator, select the Tools tab, Content staging, Servers tab, and click New server, as shown in the following screenshot:

3. Enter your production server information and select OK, as shown in the following screenshot:

Advanced Management

[ 240 ]

4. Select the Documents tab, select Corporate Site, and then select Synchronize current document, as shown in the following screenshot:

What just happened?For configuring your local development or staging site, you will want to enable one or all of Log content changes, Log object changes, and Log export tasks. For configuring your production site (the destination of syncing), you will want to enable the staging service. For both sites, you will want to fill in a consistent username and password. The username and password are used during the synch process to permit the sync to proceed.

Time for action – scheduled tasksWe can set up synchronization to run every two hours using the following steps:

1. Log in to Site Manager, select the Administration tab, select Scheduled tasks, and for the Content synchronization task, select the edit icon, as shown in the following screenshot:

Chapter 8

[ 241 ]

2. In the Task interval panel, change the Every field to 2 hours, as shown in the following screenshot and then select OK.

What just happened?When we selected the Scheduled tasks, we updated the synchronization tasks to run every two hours. Congratulations! You have successfully synched your production and development environments.

SummaryWe have learned a lot in this chapter about advanced system management features offered by the CMS system. Specifically, we covered:

Using widgets to implement page personalization

Adding a new culture to our site

Efficient and pragmatic methods to translate our website

Efficient ways to deploy our site to a production server

Automatically synchronizing updated content

We also learned the principles of extending a page template and creating a widget zone.

Now that we have learned some of the advanced system management and administration features, we're ready to look at web analytics and Search Engine Optimization (SEO)—which is the topic of the next chapter.

�SEO and Web Analytics

In order to make our site successful, we need to attract and retain site visitors. This is a two part process. Search Engine Optimization (SEO) is used to make it easier for customers to find our website. Web analytics is used to validate the success of SEO, analyze traffic, optimize web pages, and profile visitors.


Learn about SEO best practices

explore document aliases

Learn techniques for managing metadata

Work with the web analytics module

Create a marketing campaign

SEOSEO is a method of site analysis and best practices for building web pages that are easily discovered and indexed by search engines. SeO is used to make our content more relevant and easily read by search engines and their crawling and indexing software. Successful SEO makes it easier for both existing and potential customers to find your website. Fundamentally, SEO is about having your URL added to a search provider's database and appearing favorably in their search results. Well executed SeO is a process of making reasonable ongoing assumptions, following consistent practices, and includes continual site review and changes. SEO is constantly evolving and best practices are a big part. Let's look at some of the best practices that you can use when managing your site.

SEO and Web Analytics

[ 244 ]

Have a go hero – determine your keywordsSearch engines read, crawl, and index text and only text. They don't recognize images, Flash, or Silverlight content. That's why it's important to use the most relevant text for your website and sprinkle the content with the right keywords, while placing the selected keywords in strategic locations where there is a maximum chance for the spiders of a search engine to read, crawl, and index. Embedding keywords in the heading, initial part of the first paragraph, page titles, filenames, and directory names are some of the most commonly used strategies for improving page ranking. You can also consider including keyword phrases in the URLs or domain names of your website. This is one of the most important ways to improve the page ranking in various search engines' results pages.

You need to be very careful when selecting the keywords for your website and choose words that describe your website. Sometimes, you may be confident that keywords that you choose are the best descriptions. But how do you know whether you have chosen the best keywords? What if there is no one out there who will submit a search query for the keywords you chose? This is where web analytics plays an important part.

While it's tempting—resist the urge to go with uniquely different keywords or made up words. This may sound appealing to reduce the overlap with your competitor's websites. Unfortunately, you may find yourself not featured in any specific results at all. This is the main reason you should consider using keyword phrases that are popularly searched. There is a wide variety of keyword suggestion tools available, which can give you statistics, competition level, and search popularity that can help a company make an informed decision.

While it is typical to determine a list of six keywords, depending on your marketing budget, you may only want to finalize a list of three. Spend some time with your marketing department to determine these keywords. Once this is done, validate these against several of the online keyword suggestion tools available. Finalize this list and make it available to all content editors with specific recommendations about their usage.

Time for action – forbidden URL charactersIn order to guarantee URL consistency, HTTP defines a set of forbidden characters (' \ / : * ? " < > | & ; % . ; % . ' # [ ] + =.). In addition to these pre-defined characters, we want to remove the $ character from any URL string in our site to provide better navigation. This can be done using the following steps:

1. Log in to Site Manager, select the Settings tab, select URLs and SEO, as shown in the following screenshot:

Chapter 9

[ 245 ]

2. In the Forbidden URL characters field, enter $ and select Save, as shown in the following screenshot:

Don't forget

This setting defines characters in addition to the HTTP forbidden characters mentioned earlier.

3. Log in to CMS Desk, select the News folder, and click the New document icon. In the New document screen, select the News item, enter the following information, and select Save.

Field Value

News Title Get An IPhone for $50

Release Date Now

News Summary New users can receive an IPhone for $50

News Text We have gotten a tremendous deal from our supplier. New users are eligible to receive an IPhone for $50.


[ 246 ]

4. Sign out of CMS Desk. In the live site, select the News menu item, click the Get An IPhone for $50 link to view the URL containing the replaced characters, and the News item, as shown in the following screenshot:

What just happened?When you selected the URLs and SEO menu option, this brought us to the system management screen. This screen contains a variety of options for managing various advanced aspects of the URL and SEO functions. When we entered the $ into the Forbidden URL characters field, this appended our character to the default HTTP forbidden list. Once this was saved, we then created a new news item that contained a $ in the title. By default, all new News URLs are created using the News title as the default URL. The resulting URL contained a - instead of a $.

Time for action – changing the site nameThe name of any page displayed in the browser window is based on a system-wide default that starts with a page prefix. Now that we have our basic site configured, we want to change the name of the page prefix from Corporate Site to the name of our company, namely, Big Company, using the following steps:

1. Log in to the live site to view the default site name, Corporate Site, as shown in the following screenshot:

Chapter 9

[ 247 ]

2. Log in to Site Manager, select the Settings tab, and then select Web site, as shown in the following screenshot:

3. In the Site drop-down menu, select Corporate Site, as shown in the following screenshot:

4. In the Web site properties for the Corporate Site, change the Page title prefix field to Big Company, as shown in the following screenshot and select Save.

5. Log in to the live site to view the changed page prefix to our company name, as shown in the following screenshot:


[ 24� ]

What just happened?When we selected the Web site and then Corporate Site, this brought up the default site settings. We then changed the Page title prefix field to our company name, and when we logged into the live site, this was reflected across all pages. This change is also captured by any search engines currently indexing our site.

Global settings

You can configure the format of all page titles, descriptions, and keywords for all sites by logging into Site Manager selecting Settings, then the Web site dialog, and then by selecting the (global) site. This allows you to configure the Page title format for all pages. The default title format is:

{%prefix%} - {%pagetitle_orelse_name%}

This means that the format consists of the site prefix followed by the page title value. If the page title value is not set, the document name is used.

Time for action – changing page metadataMetadata is information about a web page that is not part of the core content of the page. The most important components of the metadata are as follows:

Title: This is the most important piece of the metadata for SEO. The web page title directly impacts the web page performance. It is the main information that the search engine will use to determine the web page content. Titles should be brief, concise, and convey exactly what the material is all about. Clever, catchy titles that do not relate specifically to the web page content will not likely be found by search engines and should not be used in web content writing.

Description: A brief summary of the web page that should contain the major keywords and phrases of the web page content.

Keywords: Search engines also use keywords to determine what web pages are about. However, it is important to choose keywords carefully. The concept of keyword stuffing may have a negative impact on your website search placement.

What is keyword stuffing?

Keyword stuffing is considered an unethical way to gain page rank and may even have your site banned from many search engine listings. Keyword stuffing or loading is where a keyword or phrase is used excessively in page content in such a way that it detracts from the page readability. A good test to make sure you aren't keyword stuffing is to make sure that use of keywords doesn't detract from the overall page readability for your site users.

Chapter 9

[ 24� ]

While each page automatically inherits its metadata from the parent page, we can override this and add our own. Let's modify the Services page metadata using the following steps:

1. Log in to CMS Desk, select the Content tab, select the Services page, select the Properties tab, and click Metadata, as shown in the following screenshot:

2. In the Metadata properties, uncheck the Inherit checkbox, enter the following information, and click Save.

Field Value

Page title Big Company Inc. Special Services

Page description Big Company Inc. brings networking and computer services to your company

Page keywords Networking services, Computer services, web design


[ 250 ]

3. Select the Page tab. In the browser, right-click and select View Source to see the updated page metadata, as shown in the following screenshot:

What just happened?When you selected the Metadata tab and modified it to include a new Page title, Page description, and Page keywords, this modified the rendered HTML. This information is also available to any search engines that are indexing your site.

Time for action – using document aliasesA document alias provides a unique URL to any document. This special URL is used in addition to the normal URL alias path that is provided by the CMS system. Let's create a new URL path for the Services page using the following steps:

1. Open a browser and enter the URL http://localhost:58995/KenticoCMS/Services.aspx to view the existing Services page.

Don't forget

You will want to replace the port number to match your local installation.

2. Log in to CMS Desk, select the Services page, Properties tab, then URLs. In the Document aliases panel, click Add new alias, as shown in the following screenshot:

Chapter 9

[ 251 ]

3. In the new alias screen, URL path field, enter /Services-Available, and click OK, as shown in the following screenshot:


[ 252 ]

4. Open a new browser and enter the URL http://localhost:58995/KenticoCMS/Services-Available.aspx to access the Services page using the alternate document URL, as shown in the following screenshot:

5. In the main menu of the live site, click the Services menu item to view the same document on the Services.aspx URL, as shown in the following screenshot:

What just happened?When we clicked New alias and then entered the URL path of /Services-Available, this created a new document alias for the Services page. This created a separate URL that allowed the Services page to be accessed using either the Services.aspx or Services-Available.aspx URL.

Chapter 9

[ 253 ]

Time saving tip

The URL path of the Document alias path must always start with the /.

Time for action – using consistent tagsMaintaining consistency within your web pages is important for SEO. The most common practice is to leverage the standard HTML tags H1/H2 for consistent search engine optimization. This can be done using the standard WYSIWYG editor and the following steps:

1. Log in to CMS Desk, select the Content tab, select Blogs, My blog, select the New document icon, and Blog post.

2. Select the Post text field and enter This is a headline and This is a sub-headline, as shown in the following screenshot:


[ 254 ]

3. Select This is a headline. In the Format drop-down box, from the WYSIWYG toolbar, select Heading 1, as shown in the following screenshot:

4. Select This is a sub headline. From the Format drop-down box from the WYSIWYG toolbar, select Heading 2, as shown in the following screenshot:

Chapter 9

[ 255 ]

5. Select the Source button from the WYSIWYG toolbar, as shown in the following screenshot, to view the generated HTML tags.

What just happened?When you selected Heading 1 and Heading 2, this automatically created the relevant HTML tags in our blog post. This is just one of several techniques that the WYSIWYG editor provides for maintaining proper SEO optimization. You can also highlight keywords and all the important textual information in your content, using bold and italics to make it easier for the search engine spiders to read and index site information.

You should try to make your website content keyword-rich and focus on maintaining a good keyword density. A good rule of thumb is to try to maintain a three to seven percent keyword density for your top one or two keywords and one to two percent keyword density for minor keywords.

Have a go hero – define content editor guidanceWriting for the web is different from writing for print media. Writing compelling web content, in a way that drives SEO for your website, is difficult. Spend some time and compile a list of best practices for editing content. This list should include best practices for using HTML tags, italics, and bolding, to name a few possible options.


[ 256 ]

Web analyticsWeb analytics is not just a tool for measuring website traffic, but also is a tool for business and market research. For example, it can help to estimate website traffic change after the launch of a new advertising campaign. Web analytics provides data on the number of visitors, page views, and many other traffic patterns that help to gauge the popularity of the site, which in turn helps with market research. There are two basic categories of web analytics—off-site and on-site.

Off-site web analytics refers to web measurement and analysis regardless of whether you own or maintain a website. It includes the measurement of a website's potential audience (opportunity), share of voice (visibility), and buzz (comments) across the internet. This type of solution is available from a variety of hosted solutions.

On-site web analytics measure a visitor's journey at our site. This typically includes a visitor's common drivers and conversions, for example, measuring which landing pages encourage the most customer product purchases. On-site web analytics measures the performance of your website in a commercial context. This data is typically compared against key performance indicators and used to improve a website or marketing campaign's audience response.

Time for action – configuring the Web analytics modulethe Web analytics module is used to track and analyze website visits, page views, file downloads, and other site metrics. In order to use analytics, we need to first enable it and we will do that by performing the following step:

1. Log in to Site Manager, select the Settings tab, Web analytics, check Enable web analytics, and select Save, as shown in the following screenshot:

Chapter 9

[ 257 ]

What just happened?When you checked Enable web analytics, this started the system data collection processes and enabled reporting.

Don't forget

We are in a test environment. You will want to open the live site and click through several pages to see the results of the web analytics collection.

Time for action – Web analytics reportingNow that we have enabled the Web analytics, we can view the reports available by performing the following step:

1. Log in to CMS Desk, select the Tools tab and Web analytics, as shown in the following screenshot:


[ 25� ]

What just happened?The system contains the following standard reports:

Report name Description

Browser types Types of browsers site visitors used

Campaigns Tracking of existing marketing campaigns

Conversions tracks behavior of site visitors

Countries tracks countries site visitors came from

File downloads Tracks number of files downloaded from the CMS repository

File downloads - multilingual Tracks files downloaded based on language

Invalid pages Tracks the number of ASPX pages that were not found on the website and the most often requested invalid URLs

Page views tracks the number of displayed pages served by the CMS and the most often requested pages

Page views - multilingual tracks the number of displayed pages served by the CMS and the most often requested pages by language

Referrals Tracks the number of visits coming from external websites and the websites from which visitors came to your website most often

Visits Tracks the number of visits and the number of new versus returning visitors; managed by a cookie

Have a go hero – reporting requirementsReporting is important to determine what type of activity is occurring on your site. However, getting the right reports to the right people is also important. Spend some time talking with key decision makers in your company to define what reports people would like and why. Define a reporting plan that consists of the report name, business need, and delivery frequency.

Time for action – tracking a marketing campaignSuccess for any website is the ability to drive traffic. This may come from a number of sources, including marketing campaigns that we may want to run. Now that we have enabled Web analytics, the marketing team is going run a marketing campaign that uses the Services page as the main landing page. Let's set up the system to allow them to monitor the success of this campaign using the following steps:

Chapter 9

[ 25� ]

1. Log in to Site Manager, select the Settings tab, and Web analytics. In the Sites drop-down box, select Corporate Site, as shown in the following screenshot:

2. In the Campaign tracking URL parameter, uncheck the Inherit from global settings, enter services, as shown in the following screenshot and select Save.


[ 260 ]

3. Open a new browser and enter the campaign URL that will be used—http://localhost:58995/KenticoCMS/Services-Available.aspx?services=junenewsletter, as shown in the following screenshot:

4. Log in to CMS Desk, select the Tools tab, Web analytics, and select Campaigns, then select the appropriate Year and month, as shown in the following screenshot, to evaluate the campaign.

Chapter 9

[ 261 ]

Don't forget

We are currently running in a test environment. In order to see results of this campaign you will want to hit the site a few times.

What just happened?When you enter services into the Campaign tracking URL for the Corporate Site, this created the marketing campaign. Earlier we created a document alias that allows us to access the Services page using either the Services.aspx or the Services-Available.aspx. Regardless of which URL is used, the Services alias path is used, as we did with the June newsletter—?services=junenewsletter. This accesses the marketing campaign and allows us to track the number of hits. Once the marketing campaign is officially launched, we can use the web analytics campaign reporting to evaluate the campaign's success.

SummaryWe learned a lot in this chapter about using SeO to increase our placement in search engines and web analytics to monitor our website traffic and understand our visitors. Specifically, we covered:

Restricting characters in URLs

Creating document aliases

Using the WYSIWYG editor to create SEO-friendly HTML tags

Configuring the web analytics module

Creating and tracking a marketing campaign

We also learned the ways in which we can build our SEO keywords and create consistent best practices for SEO on our website.

Now that we've learned how to create sites and manage them, it's time to put it all together and create a community site—which is the topic of the next chapter.

10Building a Community Website

In order to combine everything we have learned so far, we will use a wide variety of best practices, coding techniques, and CMS features to build a community-driven website.


Create a community website

Create the core site elements

Learn about the available social networking features

Learn about site registration features

Learn to use groups to share information

Site developmentThe first step in developing any website is to define the core infrastructure components used for site and page inheritance. This includes defining the site, creating the master page, and the page templates.

Building a Community Website

[ 264 ]

Time for action – creating the community siteNow let's start by creating the site using the wizard and the following steps:

1. Log in to Site Manager, stop the Corporate Site, and click the New site wizard.

Why stop the site?

Don't forget that we are using the Visual Studio built-in web server to run our development environment. As we saw earlier, this supports two websites. We are adding a third, which means we need to stop one of our current sites.

2. In Step 1 | Choose default web site, click Create a new site using a wizard, as shown in the following screenshot, and then select Next.

3. In Step 2 | Enter new site settings, enter the following information and then select Next.

Field Value

Site display name Community Site

Site code name Community_Site

Domain name Localhost:58995

Site culture English-United States

Don't forget

the domain name and port number is based on your local instance of Visual Studio.

Chapter 10

[ 265 ]

4. In Step 3 | Object selections, click Next.

5. In Step 4 | Import progress, once the import is complete, click Next.

6. In Step 5 | Select master page, click the Blank master page, as shown in the following screenshot, and then click Next.

7. In Step 6 | Define basic site structure, click Next.

8. In Step 7 | The web site has been created successfully, click the Edit your new web site link, as shown in the following screenshot:


[ 266 ]

9. Validate that the site has been created, as shown in the following screenshot:

What just happened?When we selected the New site wizard, this started the site creation process. Then we selected to Create a new site using a wizard. this prompted us to enter the basic site information that included Site display name, Site code name, Domain name, and Site culture. Once this was done, we selected the Blank master page for the site. At this point, the shell site contains a basic master page but no content pages.

Get the files

For the next several Time for action lessons, you can find the files needed at http://www.kentico.com/Downloads/CommunityGuide/CommunitySiteGuide_files.zip.

Time for action – assigning the CSS stylesheetNow that we have created the basic site, we will assign the site CSS stylesheet using the following steps:

1. Log in to Site Manager, select the Development tab, CSS stylesheets, and click the New CSS stylesheet link, as shown in the following screenshot:

Chapter 10

[ 267 ]

2. In the New stylesheet screen, enter the following information and then select OK.

Field Value

Stylesheet display name Community Site

Stylesheet code name Community_Site

Stylesheet text Paste the content of the CommunitySite.css file

3. Select Site Manager, Sites, and select the edit icon for the Community Site, as shown in the following screenshot:

4. Select the General tab, in the Site CSS stylesheet and Editor CSS stylesheet drop-down boxes select Community Site, as shown in the following screenshot, and then click OK.


[ 26� ]

What just happened?When we selected New CSS stylesheet, we defined the Stylesheet display name and Stylesheet code name and finally pasted the CommunitySite.css stylesheet into the Stylesheet text. Once this was saved, we then assigned the new stylesheet to the Community Site by editing the Community Site and then General properties. The Site CSS stylesheet is the default stylesheet used for all site pages unless it is overridden by another stylesheet. the Editor CSS stylesheet is used for the WYSIWYG editor content.

Have a go hero – designing a stylesheetCSS stylesheets are an important part of any website. CSS is created to make things easier for your website and also to give you control over different visual elements in your website. If you are unfamiliar with CSS, spend some time researching and understanding how to build a CSS stylesheet. If you are already familiar with CSS, spend time with your business users understanding their needs before you start coding.

Time for action – creating a page template categoryWebsite content is based on pages. It's a good practice to store the page layouts as page templates. This allows page templates or master pages to be reused without having to redefine the page structure. Before we create our page template, we will create a new page template category to organize the Community Site page layouts. this is done by carrying out the following steps:

1. Log in to Site Manager, select the Development tab, Page templates, select All page templates, and click New category, as shown in the following screenshot:

2. In the New category screen, enter the following information and select OK.

Field Value

Category display name Community Site Templates

Category name Community_Site_Templates

Chapter 10

[ 26� ]

What just happened?When we selected New category and entered the required fields, this created a folder to store all the site templates that we will create.

Time for action – creating a master pageNow, let's create the master page that will be stored in the page template category that we just created. The master page is presented at the root of the content tree. By default, this is the page that all content structure is inherited from. During the initial site installation, we selected the Blank master page. This is a simple master page that contains two web part zones. Let's create a more robust version of the site that contains our branding and layout by carrying out the following steps:

1. Log in to CMS Desk, select the Community Site root, switch to the Properties tab, Template tab, and select Save as new template, as shown in the following screenshot:

Why create a new template?

If you don't select the Save as new template button, this will change the default Blank master page template for all sites. While this is a new site, it won't have a tremendous impact now. For production sites, this change will impact any pages using this template.

[ 270 ]

2. In the Save as new page template dialog, enter the following values, select OK, and then Save.

Field Value

Template display name Community Site – Master Page

Template code name CommunitySiteMasterPage

Template category (Drop-down) Community Site Templates

Template description Community Site Master Page

3. Click the Master Page tab, enter the following code into the <body> tag, and then select Save.

<div class="zoneTopInfo"> <cc1:CMSWebPartZone ID="zoneTopInfo" runat="server" />/></div><div class="mainDiv"> <div class="zoneTopMembership"> <cc1:CMSWebPartZone ID="zoneTopMembership" runat="server" /> </div> <div class="zoneTop"> <cc1:CMSWebPartZone ID="zoneTopImage" runat="server" /> </div> <div class="zoneTopMenu"> <cc1:CMSWebPartZone ID="zoneTopMenu" runat="server" /> <div class="clear"> </div> </div> <div class="zoneMain"> <cc1:CMSWebPartZone ID="zoneContent" runat="server" /> </div> <div class="zoneBottom"> <cc1:CMSWebPartZone ID="zoneBottom" runat="server" /> </div></div>

4. Switch to the Design tab to view the new Master Page, as shown in the following screenshot:

Chapter 10

[ 271 ]

What just happened?When we selected Save as new template in the Community Site root document, this created a copy of the Blank master page template that we then used to build our master page. We then entered the page layout into the <body> tag. This created the web part zones that will contain content.

ASPX versus Portal Engine pages

As we saw in an earlier chapter, there are two ways to create new pages. In this example, we are creating a Portal Engine page. One benefit of the Portal Engine is that we can use the Design tab to view the page layout.

Have a go hero – defining a master pageThe site master page is one of the most important aspects of any site. It defines the key branding elements, look, layout, and overall feel of the site. This includes where key visual elements like web parts and menus will appear across the site. Wireframes are created to help define the variations of layout and maintain design consistency throughout the site. This is an incredibly important part of the initial development stage because it helps to set user expectation and provides familiarity with the site. Before developing a master page, creating a set of wireframes is an important first step. They act as a way to communicate with project stakeholders and provide a stable base that can be used over the course of the project. Spend time with your key project stakeholders to identify and develop a set of wireframes for your site.

Time for action – uploading imagesNow, we want to upload the images we will use for the site. This is done by carrying out the following steps:

1. Log in to CMS Desk, select the Content tab, select the Community Site root, and click New document.

2. In New document, select Folder.

3. In the Document name field, enter Files and select Save.

4. In the content tree, click the Files folder and select the New document icon.

5. In the New document screen, select File.


[ 272 ]

6. Click the Upload file link, select \images\Community_header_img.jpg and select Save, as shown in the following screenshot:

What just happened?When we selected New and then created a Folder, we identified an area that we can use to store site images that are used across the site. We then uploaded the header image that we can use for the site. While this may seem like a minor step, it allows us to group all site images and brand assets into a single location. Moreover, as our brand and images change over the lifecycle of the site, it provides the only location that we need to change.

Security is important

Make sure that you review who has access to the Files directory. If someone were to accidently replace the uploaded image, then this would appear on all pages across the site.

Time for action – populating the master pageNow that we have created the default master page, let's go ahead and populate the home page with web parts by carrying out the following steps:

1. Log in to CMS Desk, select the Community Site page, select the Content tab, and the Design tab. In zoneTopInfo, click the add web part icon. Select the Static text web part, click the Content tab, enter the following into the Text property, and select OK.

<div style="border: 1px solid #cecfce;background:#f7f3ef;color:#555555;fontweight: bold;padding:3px;font-size:10px;text-align:center"> Sign in to <a href="~/CMSPages/logon.aspx?ReturnUrl=~/cmsdesk/default.aspx&

Chapter 10

[ 273 ]

username=administrator">CMS Desk</a>. Sign in to <a href="~/CMSPages/logon.aspx?ReturnUrl=~/cmssitemanager/default.aspx&username=administrator">CMS Site Manager</a>. The default account is administrator with blank password.</div>

2. Select zoneTopMembership, click the add web part icon, select the Membership folder, the Sign out button web part, update the following properties, and select OK.

Tab Field Value

Sign out button settings Show as link Selected

Sign out button settings Button text for sign out Sign out

Sign out button settings Show only when authenticated

Disabled

Sign out button settings Redirect to URL ~/home.aspx

Sign in button settings Sign in page path ~/Logon.aspx

HTML Envelope Content before <div class = "signOut">

HTML Envelope Content after </div>

3. Select zoneTopMembership, click the add web part icon, select the Messaging folder, the Messaging info panel web part, update the following properties, and select OK.

Tab Field Value

Visibility Display to roles _authenticated_

Messaging properties

Show inbox Selected


Inbox link URL ~/Members/{%UserName|(encode)true%}/Messages.aspx


Show unread message count

Selected


Show outbox Disabled


Show new messaged

Disabled

HTML Envelope Content before <div class="messagesPanel">

HTML Envelope Content after <Space>| </div>


[ 274 ]

4. Select zoneTopMembership, click the add web part icon, select the Text folder, the Static HTML web part, update the following properties, and select OK.

Tab Field Value

Visibility Display to roles _authenticated_

HTML Envelope Content before <div class="myAccountInfo">

HTML Envelope Content after <Space>| </div>

Content Text <a title="My profile" href="/KenticoCMS55/Members/{%CurrentUser.UserName|(encode)true%}/Management.aspx">Edit my profile</a>

5. Select zoneTopMembership, click the add web part icon, select the Membership folder, the Current user web part, update the following properties, and select OK.

Tab Field Value

Display settings Authenticated link URL

~/Members/{%CurrentUser.UserName|(encode)true%}.aspx

Display settings User text CSS class

userName

HTML Envelope Content before <div class="currentUser">

HTML Envelope Content after <Space> | </div>

6. Select zoneTopImage, click the add web part icon, select the Text folder, the Editable Image web part, update the following properties, and select OK.

Tab Field Value

Content Image width 960

Content Image height 148

Content Alternate text Community site

7. Switch to the Page tab and click the Select button, as shown in the following screenshot:

Chapter 10

[ 275 ]

8. In the Select image screen, expand the Community Site, select community_header_img.jpg, as shown in the following screenshot and then click the Select button.

9. Select the Design tab, select the zoneTopMenu, and select the add web part icon. Select the Full text search folder, then the Smart search box web part, set the following values, and select OK.

Tab Field Value

Default Disable view state Disabled

Search box settings Search button text Search

Search box settings Search button CSS class buttonSearch

Search box settings Search textbox CSS class inputSearch

Search box settings Search results page URL ~/Search.aspx

Search box settings Show search label Disabled

10. Select the zoneTopMenu, select the add web part icon, select the Navigation folder, the CSS list menu web part, set the following properties, and then select OK.

Tab Field Value

Content Path /%

Content filter Document types CMS.MenuItem;CMS.Blog

Content filter Maximum nesting level 1

Design Render CSS classes enabled


[ 276 ]

11. Switch to the Page tab to view the completed Master page.

What just happened?When we selected to add the web parts to each of the zones, we defined the visual look and feel of our site. This included web parts to manage login, search, and a page placeholder for content.

Groups and membershipMembership allows users to join a site. Groups are a way to organize and present information to site users. Combining the two allows users to easily find and subscribe to content that they are interested in.

Security is important!

Network and site security are an important part of any website. Whenever you are collecting personal information, you should review and ensure that your site is secure. While Kentico provides a variety of security means, it's only one part of website security. Review all the possible areas including your network to guarantee that you are protecting your members' personal information.

Time for action – setting up the community starter siteLet's take a look at an example of groups and membership using the Community Starter site. Let's start by setting up the Community Starter site using the following steps:

1. Log in to Site Manager, click the stop icon for the Community Site, and select New site wizard.

2. In Step 1 | Choose default web site, click Use web site template, and select Next.

Chapter 10

[ 277 ]

3. In Step 2 | Choose web site template, select Community Site, as shown in the following screenshot and select Next.

4. In Step 3 | Enter new site settings, click Next.


6. In Step 5 | Import progress, select Next.

7. In Step 6 | The web site has been created successfully, click the Edit your new website link.

8. Validate the installation of your site, as shown in the following screenshot:


[ 27� ]

What just happened?When we selected the Community Site web template, this imported the set of objects and pages defined within the starter site. Unlike the site we created initially, this site already contains the master page and associated display elements used to define the site.

Have a go hero – web templatesWeb templates are used to define a set of objects used to build a site. This includes a master page, CSS pages, and web parts. They make it easy to jumpstart a site that is consistent with company branding policies. Spend some time talking to your developers and the marketing department to understand what typical micro-sites they may need to build. Once this list is complete, develop a proposal for the creation of these sites.

Time for action – user membershipthe Community Starter site is designed to provide membership services. For end users, this is done by carrying out the following steps:

1. Open a new browser to view the live community site and select the Join now button, as shown in the following screenshot:

2. Complete the registration form with your personal registration information and click Register when complete, as shown in the following screenshot:

Chapter 10

[ 27� ]

3. In the Shortcuts menu, click the Edit my profile link, as shown in the following screenshot:

4. In the Avatar section, click the Browse button, upload a picture of yourself, and select OK, as shown in the following screenshot:

What just happened?When the website visitor selected the Join button, this brought them to the membership registration page. Once this was completed, it created both a profile record in the system database and a public profile page for other community members to view. We then edited our profile to include a picture.

Have a go hero – interacting with your communityIt is important to have a company's employees participate in the community. This includes interacting and answering questions that may be posed. Just as important as participating is to make sure you identify yourself as a member of the company. Spend some time and identify key areas that your company feels are important for your employees to be involved in. Once this is complete, develop a series of best practices and guidelines that can be shared with your company's employees.


[ 2�0 ]

Time for action – modifying the registration formThe registration form is used to collect a member's information during registration. Depending on the needs of your company, it may not contain all the necessary fields. For our company, we want to expand the registration form to include a list of available products. This will allow us to see what products users are interested in following when they become part of our community. This can be done by carrying out the following steps:

1. Log in to Site Manager, select the Development tab, System tables, and click the edit icon for the User (CMS_User) system table, as shown in the following screenshot:

2. Select the add new attribute icon, enter the following information, and select OK.

Field Value

Attribute name ProductUsed

Attribute type Text

Attribute size 50

Field caption Your Product

Field type Drop-down list

Field type Services;Services Networking;Networking Marketing;Marketing

3. Select the Alternative forms tab and select the edit icon for the Registration form, as shown in the following screenshot:

Chapter 10

[ 2�1 ]

4. Select the Fields tab and then select the ProductUsed field. In the Default visibility drop-down box, select Display to all, as shown in the following screenshot and then select OK.

5. Select the Layout tab, right-click in the last row of the table, and select Row, and then Insert Row After, as shown in the following screenshot:


[ 2�2 ]

6. Select the first column in the new row, select the ProductUsed field, and click the Insert label button, as shown in the following screenshot:

7. Select the second column, then select the ProductUsed field, click the Insert input button, and select Save, as shown in the following screenshot:

Chapter 10

[ 2�3 ]

8. Select Sign out to view the new Your Product field in the Join the community section, as shown in the following screenshot:

What just happened?When we selected the edit user (CMS_User) system table, this allowed us to add our new ProductUsed attribute. Once this was added, we needed to add it to the registration form. This was done using the Alternative forms and adding it to the table layout. When we updated the registration form, we added both the caption and the data field to the form layout. We finally viewed this on the standard registration form.

Time for action – creating new groupsNow, let's create a new group for our products that can be used to interact with site members using the following steps:

1. Log in to the live site. In the Shortcuts menu, select Create a new group, as shown in the following screenshot:


[ 2�4 ]

2. In the Create new group screen, enter the following information and select OK.

Field Value

Group name Networking products

Description Learn and interact with us for our Networking products and services

Approve members Any site member can join

Contact access Anybody can view the content

3. Log in to CMS Desk, select the Tools tab, Groups, and click the Approve icon for the Networking Products group, as shown in the following screenshot:

4. Log in to the live site and select Groups to view the new Networking Products group, as shown in the following screenshot:

What just happened?We logged into the live site and selected the Create a new group option from the Shortcuts menu. We then entered the group information. We then set the group visibility and description options for users joining the group. Finally, as the Global Administrator, we approved the group.

Chapter 10

[ 2�5 ]

Time for action – creating a group pageGroups offer a variety of content, organized and available to group members to find and share relevant information. Now, let's create a new page for our group by carrying out the following steps:

1. Log in to CMS Desk, select the Content tab, select Group pages, Networking_products, Pages, and select the New page link, as shown in the following screenshot:

2. In the New document: Simple article, enter the following information and then Save.

Field Value

Article title New Product's Coming

Article text It's been an amazing time and we are pleased to announce that we will be announcing a new set of networking products to serve our customers better. We hope that you will keep an eye on this group.

Publish from Select the Now link

3. Log in to the live site, select Groups, and then Networking Products to view the new page, as shown in the following screenshot:


[ 2�6 ]

What just happened?When we selected the New page link, we created a new group page or article for the Networking Products group. As we saw, this page is available for group members from the default group page.

SummaryWe learned a lot in this last chapter, about tying together all the pieces we've been learning. We were able to combine many of the different techniques and best practices to build a simple site that offers our site visitors the best experience with the most relevant content. Specifically, we covered:

Defining CSS sheets

Creating master pages

Understanding community-based features

Understanding user registration and membership

Customizing the user registration form

Creating new groups for site users

We also learned the basics of creating a website from scratch and defining the key site elements like page templates and web part containers.

Now that we've learned the basics of Kentico CMS, we're ready for real-life usage!

IndexSymbols% sign 224

AAge attribute 140aliaspath parameter 173, 174API 8Application Programming Interface. See APIASPX

vs Portal engine pages 271authentication 84authorization 84

Bbest practices, SEO

consistent tags, using 253-255content editor guidance, defining 255document aliases, using 250, 252forbidden characters, defining 244-246global setting 248keywords, determining 244metadata, changing 248site name, changing 246, 247

bGetInfo_Click event 181Bio attribute 140BiographyID attribute 140bit.ly API

/v3/authenticate parameter 177/v3/clicks parameter 177/v3/expand parameter 177/v3/info parameter 177/v3/lookup parameter 177/v3/shorten parameter 177

/v3/validate parameter 177about 176examining 178, 179using 177

CCheckout process 213CMS

about 7benefits 33

CMS Desk, WCMSbookmarking 19existing page, editing 20-22Home page 22logging into 17, 18password, protecting 24profile, modifying 23sections 20

community website deploymentCSS stylesheet, assigning 266, 267files, obtaining 266images, uploading 271, 272master page, creating 269-271master page, defining 271master page, populating 272-276new template creating, need for 269page template category, creating 268, 269site, creating 264-266stylesheet, designing 268

contentdocuments 33Document type 33Kentico CMS, standard modules 37

Content Management Systems. See CMS

[ �88 ]

custom document typescontent, storing 143creating 138-142custom schema 143employee biography, creating 144-147icons, changing 147naming conventions 138New document type 143

customized product listdisplaying 77-81

Ddocument

video consistency guidance 104document attachments

about 104adding 105-108

document level permissionssetting, options 81, 82

document linkingabout 97image, linking to 98-100outbound link guidance 101Youtube video, linking to 101

Document type, contentavailable types, viewing 34, 35Default Page template 34Document type Code Name 34Document type Display Name 34Editing Form URL 34Editing Page URL 34List Page URL 34New Page URL 34Preview Page URL 34Show Template Selection 34Use Publish from/Publish To 34

Document types property 145

Ee-commerce site

log-on bar, removing 194machine policy 192master page, modifying 193, 194news site wizard 188-192product options, adding 197-199

Edit my profile link 279event

bGetInfo_Click 181OnAfterCopy 153OnAfterDelete 153OnAfterInsert 153OnAfterInsertNewCultureVersion 153OnAfterMove 153OnAfterUpdate 153OnBeforeCopy 153OnBeforeDelete 153OnBeforeInsert 153OnBeforeInsertNewCultureVersion 153OnBeforeMove 153OnBeforeUpdate 153

event handlers, Kentico APIadding 149-152data updates 148documents events 148exceptions 148security events 148workflow events 148

EventRepeater web parttransforming 128-136

Export single object screen 35

FFCK editor 44files

location 189

GGender attribute 140GetDataSet() method 166, 169Google maps

implementing 162, 164groups

about 276community, interacting with 279community starter site, setting up 276-278new groups, creating 283, 284page, creating 285, 286registration form, modifying 280-283web templates, using 278

[ �89 ]

HHome page 22

IIIS

about 8, 187disadvantages 187need for 188

installingKentico CMS 8

installing, Kentico CMSrequirements 8steps 9-15

Internet Information Services. See IIS

JJob_title attribute 140

KKentico API, event handlers

adding 149-152data updates 148documents events 148exceptions 148security events 148workflow events 148

Kentico APIevent handlers, adding 148implementing 148news item, sending by e-mail 153-155

Kentico CMSabout 7, 8API 148ASP.NET similarities 126downloading 9Global Administrator 23installing 8security, managing 67

Kentico CMS, standard modulesblog entry, creating 47-49blogs 37booking system 37content rating 37content staging 37

E-Commerce 37event calendar 37forums 37friends 37Geomapping 37groups 37image gallery 37media library 37message boards 37messaging 37newsletter 37On-line forms (Bizforms) 37poll, creating 38-43polls 37reporting 37taxonomy 37web analytics 37web farm support 37Wiki 37WYSIWYG editor, using 44

Kentico CMS DeskBlog post form, updating 47Blogs 47Insert link dialog 48My blog 47

Kentico CMS installation.NET version, selecting 11database, naming 14debugging 12download link 9project files 12SQL Server, naming 13starter sites, selecting 14steps 9-15websites, creating 10

keyword stuffing 248

LLive site tab 100Log in as this user link 73

Mmapping

Google maps, implementing 162, 164Google maps web part, using 160, 161new office, adding 160, 162

[ �90 ]

media libraryabout 108batch operations 114, 115creating 112, 113files, uploading on live site 118, 119file types, restricting 123image, displaying 109-112image gallery, displaying 116, 117images, identifying 114properties, validating 109role guidance, refining 122security, setting 120, 121use 113user permissions, list 122viewing 108, 109

membershipabout 276community, interacting with 279community starter site, setting up 276-278registration form, modifying 280-283user membership 278, 279web templates, using 278

metadata 158metadata, changing

component, description 248component, keywords 248component, title 248page description field 249page keywords 249page title field 249steps 249, 250

methodGetDataSet() 169OnAfterInsert() 155OnAfterUpdate() 185PostTweet() 185

multi-lingual sitesabout 225current culture, combining with 232, 233language-specific content, viewing 230-232new languages, adding 225, 226site content, translating 227-229

NName attribute 140New stylesheet screen 267

OOnAfterInsert event 153OnAfterInsert() method 155OnAfterUpdate() method 185

Ppage management

Design tab 62-64new ASPX page template, creating 51-56new Portal Engine page, creating 58-61page template 49web parts, adding 64-66

page templateabout 49creating 50managing 49, 51new ASPX page template, creating 51-58

payment gatewaysabout 206choosing 211PayPal merchant account, configuring 210, 211setting up, options 210

Portal engine pagesversus ASPX 271

PostTweet() method 185product management 195

attributes, entering 204, 205Home (Page) 195new product, adding 203-205News (page) 195product categories, customizing 200-202Products (Page) 195products, adding 195, 196products, adding to multiple categories 202,

203Special pages 195

Properties tab 93property

Selected item transformation 134Transformation 130Transformation name 129

property, Google mapsdefault latitude 163default longitude 163document types 163

[ �91 ]

height 163large view scale 163Latitude field 163Longitude field 163path 163Tooltip field 163transformation 163width 163

purchase processabout 206Checkout process, defining 213Checkout process, selecting 213customizing 212examining, steps 206-209temporary Payment Page 209

RReally Simple Syndication. See RSSRepresentational State Transfer. See RESTREST

about 176API key, retrieving 176, 177bit.ly 176user control, building 180-182

RIA 7Rich Internet Applications. See RIArole-based content

creating 74-77roles, site security fundamentals

CMS Basic users role 75mapping 70new role, creating 68, 69

RSSabout 171Blog RSS feed 173-175Blog RSS feed, implementing 174, 175news feed, subscribing 171-173

SSearch Engine Optimization. See SEOsecure pages

creating 82, 83Selected item transformation property 134SEO

about 243

best practices 244SEO, best practices

consistent tags, using 253-255content editor guidance, defining 255document aliases, using 250, 252forbidden characters, defining 244-246global setting 248keywords, determining 244metadata, changing 248site name, changing 246, 247

Share button 102site deployment

Content staging, enabling 238-240exported site, viewing 235new production site, exporting 236, 237site, exporting 234synchronization, setting up 240, 241

Site Managerabout 24bookmarking 25logging into 24users, adding 27-31users, defining 31website, restarting 25-27website, shutting down 25-27

site roles, widgetsGroup Administrator 216Page editor 216Site Developer/Administrator 216Web Site Users 216

site root 57site security

fundamentals 67site security, fundamentals

document permissions 68roles 68UI personalization 68users 68

social bookmarkingabout 158Facebook 159implementing 158, 159

standard modules, Kentico CMSblog entry, creating 47-49blogs 37booking system 37

[ �9� ]

content rating 37content staging 37E-Commerce 37event calendar 37forums 37friends 37Geomapping 37groups 37image gallery 37media library 37message boards 37messaging 37newsletter 37On-line forms (Bizforms) 37poll, creating 38-43polls 37reporting 37taxonomy 37web analytics 37web farm support 37Wiki 37WYSIWYG editor, using 44

standard reports, web analyticsbrowser types 258campaigns 258conversions 258countries 258file downloads 258file downloads - multilingual 258invalid pages 258page views 258page views - multilingual 258referrals 258visits 258

TTag cloud

about 169web part, adding 169, 170

Transformation name property 129Transformation property 130transformations

about 125attachments, handling 132-136in web parts 126, 127

ratings, displaying 136, 137Twitter

about 183followers 183integrating 183-185tweets 183

Uusers, site security fundamentals

adding, to another role 70-74

Vvideo consistency guidance, document 104

WWCMS

about 16CMS Desk 16

web analyticsabout 256marketing campaign, tracking 258-261module, configuring 256, 257off-site web analytics 256on-site web analytics 256reporting 257reporting, requirements 258standard reports 258

Web Content Management System. See WCMSweb parts

transformations 126, 127web services

about 164building 164-168Invoke button 167

website content 97Widget properties (Date & time) screen 218widgets

about 215adding 216creating, steps 221-224Date & time widget 217existing widget, modifying 216-218site roles 216

[ �9� ]

zone, creating 218, 220zone types, changing 221

word cloud. See Tag cloudworkflow

about 84configuring 85-89document changes, rolling back 92-94document lifecycle example 84executing 89-92mapping 95scope 88

workflow scope 88WYSIWYG editor

using 44, 46

XX icons, content trees 228

YYouTube video

linking to 101-104URL, obtaining 102

ZzoneLeft 41, 59

Kentico.cms5

Law

Transcript of Kentico.cms5