kentico cms 5 website development

39
Kentico CMS 5 Website Development Thom Robbins Chapter No. 2 "A Tour of your New Website"

Upload: others

Post on 12-Sep-2021

8 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Kentico CMS 5 Website Development

Kentico CMS 5 Website Development

Thom Robbins

Chapter No. 2

"A Tour of your New Website"

Page 2: Kentico CMS 5 Website Development

In this package, you will find: A Biography of the author of the book

A preview chapter from the book, Chapter NO.2 "A Tour of your New Website"

A synopsis of the book’s content

Information on where to buy this book

About the Author Thom Robbins is the Web Evangelist for Kentico Soft ware LLC and works with

Web developers, designers, and interactive agencies across the world on implementing

Kentico CMS.

Prior to joining Kentico, Mr. Robbins joined Microsoft Corporation in 2000 and served

in a number of executive positions. Most recently, he led the Developer Audience

Marketing group that was responsible for increasing .NET developer satisfaction with

the Microsoft platform. He also led the .NET Platform Product Management group

responsible for customer adoption and implementation of the .NET Framework and

Visual Studio. He was also a Principal Developer Evangelist working with developers

across the world on implementing .NET-based solutions.

He is the author of two books on InfoPath and Sharepoint. He is a regular speaker at

industry events and regularly posts to his blog at http://devnet.kentico.com/

Blogs/Thomas-Robbins.aspx.

He lives with his wife Barbara, and his stepson, Oliver. When not writing code, he enjoys

the Seattle weather and Crossfit.

You can reach him at [email protected].

For More Information: www.packtpub.com/kentico-cms-5-website-development-

beginners-guide/book

Page 3: Kentico CMS 5 Website Development

Kentico CMS 5 Website Development In 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 Covers Chapter 1, Introducing Kent co 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.

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.

For More Information: www.packtpub.com/kentico-cms-5-website-development-

beginners-guide/book

Page 4: Kentico CMS 5 Website Development

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.

For More Information: www.packtpub.com/kentico-cms-5-website-development-

beginners-guide/book

Page 5: Kentico CMS 5 Website Development

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 simplifi es the process of managing web content. The benefi t 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 applicati on code. This helps both content editors and site visitors have a consistent viewing and editi ng experience across a site.

With such a wide range of content possibiliti es, 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 defi nes the fi elds for storing the data and transformati ons, database queries for retrieving, and site display. News, arti cles, and blog posts are just a few examples of available document types. When creati ng a new arti cle, it's based on the Arti cle Document type that provides an editi ng form to enter the data and a set of transformati ons and queries to control how it is retrieved and displayed. Even though each Document type describes diff erent types of content, each inherits a general set of properti es, as shown in the following table.

For More Information: www.packtpub.com/kentico-cms-5-website-development-

beginners-guide/book

Page 6: Kentico CMS 5 Website Development

A Tour of your New Website

[ 34 ]

General properties of a Document typeProperty Name Descripti on

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 creati ng new documents of this type

Editi ng page URL URL of the editi ng page used for displaying the editi ng mode using the Page tab

Editi ng form URL The URL of the editi ng page used for displaying the document in the editi ng mode using the Form tab

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

List page URL URL of the editi ng 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 selecti on Indicates if the user must select a page template fi rst when creati ng 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 Arti cle 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:

For More Information: www.packtpub.com/kentico-cms-5-website-development-

beginners-guide/book

Page 7: Kentico CMS 5 Website Development

Chapter 2

[ 35 ]

2. Select the Export object icon for the CMS Arti cle 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 fi le in the Objects folder and view the cms_documenttype.xml.export fi le in Notepad.

For More Information: www.packtpub.com/kentico-cms-5-website-development-

beginners-guide/book

Page 8: Kentico CMS 5 Website Development

A Tour of your New Website

[ 36 ]

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

What just happened?When we selected Export for the Arti cle document type, this created a ZIP archive that contains XML fi les, which describe the Arti cle document type. This includes the data structure, transformati ons, and queries that are used to defi ne an Arti cle. The cms_documenttype.xml.export fi le that we then opened contains the database table informati on. This includes the table name and database fi elds used to store Arti cle data. When an Arti cle is displayed, this informati on is used to retrieve the content data from the database and then has the appropriate transformati ons applied, before being fi nally displayed.

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

For More Information: www.packtpub.com/kentico-cms-5-website-development-

beginners-guide/book

Page 9: Kentico CMS 5 Website Development

Chapter 2

[ 37 ]

Kentico CMS standard modulesModule Name Descripti on

Blogs Allows the publishing of a personal or company blog. You can publish multi ple blogs at the same site and there can be multi ple defi ned editors.

Booking System Allows the management of events and their att endees. This module can be used for both online and offl ine meeti ngs.

Content rati ng Allows the rati ng of any document on the website.

Content staging Allows the separati on of content in development, staging (editi ng), and producti on (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 creati on of pre-defi ned or ad-hoc forums.

Friends Allows site members to maintain relati onships with other site members and share personal informati on 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 fi les, such as photos, sound, videos, package fi les, and presentati ons.

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 communicati on method with other users of the website.

Newslett er Allows the authoring and sending of stati c or dynamic newslett ers to subscribed users.

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

Polls Allows the creati on and publicati on of online polls that contain single or multi ple-choice answers.

Reporti ng Allows the creati on of reports to view website acti vity. This includes recently created document and site visits.

Taxonomy Allows the tagging and categorizati on of any site content.

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

Web farm support Enables the synchronizati on of changes made to either site setti ngs or content on all confi gured servers.

Web analyti cs Allows the tracking and analyzing of website visitors, page views, fi le downloads, and other metrics of the website.

For More Information: www.packtpub.com/kentico-cms-5-website-development-

beginners-guide/book

Page 10: Kentico CMS 5 Website Development

A Tour of your New Website

[ 38 ]

Time for action – creating a pollThe Polls module provides a way to gather real-ti me 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. Creati ng a poll is a two step process. The fi rst 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 informati on, and then select OK.

Field Value

Display name Cell phone favorite

Code name CellPhoneFavorite

Title Cell Phone Favorite

Questi on What is your favorite cell phone?

For More Information: www.packtpub.com/kentico-cms-5-website-development-

beginners-guide/book

Page 11: Kentico CMS 5 Website Development

Chapter 2

[ 39 ]

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

Field Value

Message aft er 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

For More Information: www.packtpub.com/kentico-cms-5-website-development-

beginners-guide/book

Page 12: Kentico CMS 5 Website Development

A Tour of your New Website

[ 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:

For More Information: www.packtpub.com/kentico-cms-5-website-development-

beginners-guide/book

Page 13: Kentico CMS 5 Website Development

Chapter 2

[ 41 ]

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

9. The p oll 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 se lecti ng the + icon, as shown in the following screenshot:

For More Information: www.packtpub.com/kentico-cms-5-website-development-

beginners-guide/book

Page 14: Kentico CMS 5 Website Development

A Tour of your New Website

[ 42 ]

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

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

Secti on Field Value

Default Web part ti tle Product Poll

Poll Setti ngs Poll name Cell Phone Favorite

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

For More Information: www.packtpub.com/kentico-cms-5-website-development-

beginners-guide/book

Page 15: Kentico CMS 5 Website Development

Chapter 2

[ 43 ]

13. You can view the Live site, and once you select the Vote butt on, 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 questi on 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 att ached 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.

For More Information: www.packtpub.com/kentico-cms-5-website-development-

beginners-guide/book

Page 16: Kentico CMS 5 Website Development

A Tour of your New Website

[ 44 ]

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

In this exercise, we will update the service descripti on of our Network Administrati on 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 Administrati on 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 Administrati on Services ti tle and add a horizontal line from the editor, as shown in the following screenshot:

For More Information: www.packtpub.com/kentico-cms-5-website-development-

beginners-guide/book

Page 17: Kentico CMS 5 Website Development

Chapter 2

[ 45 ]

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

4. Within the table Properti es, enter the following informati on and then select OK.

Field Value

Rows 3

Columns 2

Headers First row

Border size 1

Capti on Our Network Specialti es

Width 200 pixels

Cell spacing 1

Cell padding 1

For More Information: www.packtpub.com/kentico-cms-5-website-development-

beginners-guide/book

Page 18: Kentico CMS 5 Website Development

A Tour of your New Website

[ 46 ]

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

Service Descripti on

Remote Hosti ng Applicati on hosti ng 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 confi gure our table of new service opti ons. The WYSIWYG editor is one of the most common tools available across the system. The editor is available in many diff erent parts of the system, from web parts to blogs.

For More Information: www.packtpub.com/kentico-cms-5-website-development-

beginners-guide/book

Page 19: Kentico CMS 5 Website Development

Chapter 2

[ 47 ]

Time for action – creating a blog entryBlogs are a standard module included within Kenti co. Updati ng 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 additi on 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 informati on.

Field Value

Post ti tle 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

For More Information: www.packtpub.com/kentico-cms-5-website-development-

beginners-guide/book

Page 20: Kentico CMS 5 Website Development

A Tour of your New Website

[ 48 ]

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:

For More Information: www.packtpub.com/kentico-cms-5-website-development-

beginners-guide/book

Page 21: Kentico CMS 5 Website Development

Chapter 2

[ 49 ]

What just happened?When we selected New blog post, this brought us to the editi ng 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 defi niti on of how the page looks and what is displayed in the context of a specifi c 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 ti ed to a single page or used across several other pages. A rendered page is a combinati on of HTML code, ASP.NET server controls, or user controls.

For More Information: www.packtpub.com/kentico-cms-5-website-development-

beginners-guide/book

Page 22: Kentico CMS 5 Website Development

A Tour of your New Website

[ 50 ]

Page templates can be created based on two diff erent page models, as shown in the previous diagram. A direct page control model, using ASPX page templates and a higher-level abstracti on based on the Kenti co 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 applicati on. The second method is the Kenti co CMS Portal Engine. This model is designed to abstract away many of the programmati c and design complexiti es and directly empower content managers. This type of fl exible implementati on allows the page template selecti on as a page-based decision. This enables customers to make their page template decisions based on business requirements.

For More Information: www.packtpub.com/kentico-cms-5-website-development-

beginners-guide/book

Page 23: Kentico CMS 5 Website Development

Chapter 2

[ 51 ]

Shown in the previous diagram is a comparison of page processing in a typical ASP.NET applicati on compared to Kenti co CMS, regardless of which page template model is used. When a page is requested, it is fi rst processed by the URL rewriti ng engine. The engine identi fi es 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 identi fi es the page to the page template and automati cally 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 Kenti co 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 diff erence between the Portal and ASPX page methodology is that the Kenti co Portal Engine Template doesn't require any physical pages.

Time for action – creating a new ASPX page template ASPX 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 applicati on developer has complete control to defi ne all page controls and dynamic content using the Kenti co CMS API. However, with this control comes additi onal 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 Kenti co TemplatePage for ASPX pages and the Kenti co TemplateMasterPage for master pages. Including this namespace allows the page access to the Kenti co CMS API. Creati ng a new ASPX page template is a two step process. The fi rst step is creati ng the new page within Visual Studio and the second is registering it for use with the Kenti co CMS.

For More Information: www.packtpub.com/kentico-cms-5-website-development-

beginners-guide/book

Page 24: Kentico CMS 5 Website Development

A Tour of your New Website

[ 52 ]

Let's create an ASPX page template that contains company contact informati on to demonstrate the process of creati ng an ASPX page template.

1. Within the Kenti co CMS WebProject, select the CMSTemplates, then the CorporateSiteAspx folder, and right-click selecti ng 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:

For More Information: www.packtpub.com/kentico-cms-5-website-development-

beginners-guide/book

Page 25: Kentico CMS 5 Website Development

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 Kenti co 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>

For More Information: www.packtpub.com/kentico-cms-5-website-development-

beginners-guide/book

Page 26: Kentico CMS 5 Website Development

A Tour of your New Website

[ 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 Kenti co template. This allows the page to be used as a page template in Kenti co 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 Kenti co CMS controls, the next step is to register the template within Kenti co 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:

For More Information: www.packtpub.com/kentico-cms-5-website-development-

beginners-guide/book

Page 27: Kentico CMS 5 Website Development

Chapter 2

[ 55 ]

11. Within the new Page templates dialog, enter the following informati on 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 fi eld, enter ~/CMSTemplates/CorporateSiteASPX/twocolumntemplate.aspx and then select Save, as shown in the following screenshot:

For More Information: www.packtpub.com/kentico-cms-5-website-development-

beginners-guide/book

Page 28: Kentico CMS 5 Website Development

A Tour of your New Website

[ 56 ]

13. Select the Sites tab and click the Add sites butt on. 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:

For More Information: www.packtpub.com/kentico-cms-5-website-development-

beginners-guide/book

Page 29: Kentico CMS 5 Website Development

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 enti re website.

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

For More Information: www.packtpub.com/kentico-cms-5-website-development-

beginners-guide/book

Page 30: Kentico CMS 5 Website Development

A Tour of your New Website

[ 58 ]

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

Time for action – creating a new Portal Engine pageThe Kenti co Portal Engine is a design-mode UI targeted at .NET developers, designers, content authors, editors, and publishers. It enables the creati on, management, and editi ng of CMS pages from a browser-based administrati on interface. In the Kenti co 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 implementi ng the page and its content based on the parameters defi ned by the applicati on developers and designers. For applicati on developers, Portal Pages provide a pla orm 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 informati on to demonstrate the process of creati ng 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 Informati on 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 modifi ed version of the pre-defi ned layout without modifying other pages. Finally select Save, as shown in the following screenshot:

For More Information: www.packtpub.com/kentico-cms-5-website-development-

beginners-guide/book

Page 31: Kentico CMS 5 Website Development

Chapter 2

[ 59 ]

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:

For More Information: www.packtpub.com/kentico-cms-5-website-development-

beginners-guide/book

Page 32: Kentico CMS 5 Website Development

A Tour of your New Website

[ 60 ]

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

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

For More Information: www.packtpub.com/kentico-cms-5-website-development-

beginners-guide/book

Page 33: Kentico CMS 5 Website Development

Chapter 2

[ 61 ]

What just happened?One of the key benefi ts 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 defi ned. Within the ASPX mode, this would require the creati on of several levels of master pages and a fair amount of code to maintain and manage. Within the Portal Engine, the only additi onal 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 additi onal code is needed and page designers can work with web part objects without any programming. Web parts are modifi ed using the properti es butt on, encapsulati ng them with containers using their properti es. In comparison, this would require additi onal applicati on code when using the ASPX template mode.

For More Information: www.packtpub.com/kentico-cms-5-website-development-

beginners-guide/book

Page 34: Kentico CMS 5 Website Development

A Tour of your New Website

[ 62 ]

Time for action – the Design tabThe Design tab provides the ability to modify the site structure visually without having to write additi onal code. Oft en, 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:

For More Information: www.packtpub.com/kentico-cms-5-website-development-

beginners-guide/book

Page 35: Kentico CMS 5 Website Development

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:

For More Information: www.packtpub.com/kentico-cms-5-website-development-

beginners-guide/book

Page 36: Kentico CMS 5 Website Development

A Tour of your New Website

[ 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 representati on 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 oft en used to display diff erent site secti ons 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 diff erent document types on diff erent pages without having to duplicate the content. To add the latest news to the Web Development Services page, we can perform the following acti ons.

For More Information: www.packtpub.com/kentico-cms-5-website-development-

beginners-guide/book

Page 37: Kentico CMS 5 Website Development

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 fi nd the web part and then select OK.

4. Select OK to accept the default Web part properti es.

For More Information: www.packtpub.com/kentico-cms-5-website-development-

beginners-guide/book

Page 38: Kentico CMS 5 Website Development

A Tour of your New Website

[ 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 informati on across pages. They provide the ability to create windows within a page that allow for the display of data. The default installati on of Kenti co CMS provides over 200 diff erent web parts and covers a wide variety of diff erent areas.

SummaryWe learned a lot in this chapter about our corporate starter site and its features. Specifi cally, 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.

For More Information: www.packtpub.com/kentico-cms-5-website-development-

beginners-guide/book

Page 39: Kentico CMS 5 Website Development

Where to buy this book You can buy Kentico CMS 5 Website Development from the Packt Publishing website: https://www.packtpub.com/kentico-cms-5-website-development-

beginners-guide/book

Free shipping to the US, UK, Europe and selected Asian countries. For more information, please

read our shipping policy.

Alternatively, you can buy the book from Amazon, BN.com, Computer Manuals and

most internet book retailers.

www.PacktPub.com

For More Information: www.packtpub.com/kentico-cms-5-website-development-

beginners-guide/book