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. [ 127 ]
Extending the System
Time for action – transforming the EventRepeater web part Now, 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:
[ 128 ]
Chapter 5
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:
[ 129 ]
Extending the System
5.
In the Code property window, enter the following transformation code, select Save, and then close the window.
<%# Eval("EventSummary") %>
<strong>Location: <%# Eval("EventLocation") %>
<strong>Date: <%# Eval("EventDate") %>
<strong>Open From: <%# Eval("EventOpenFrom", "{0:dd MMM yyyy}") %>
<strong>Open To: <%# Eval("EventOpenTo", "{0:dd MMM yyyy}") %>
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.
[ 130 ]
Chapter 5
9.
Select the Live site button to view the Events page and view the new transformation, as shown in the following screenshot:
[ 131 ]
Extending the System
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 transformations As 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:
[ 132 ]
Chapter 5
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" %>
<%# Eval("NewsTitle") %>
<%# IfEmpty(Eval("NewsTeaser"), "", GetImage("NewsTeaser")) %>
<%# GetDateTime("NewsReleaseDate", "d") %>
<%# Eval("NewsSummary") %>
<%# Eval("NewsText") %>
[ 133 ]
Extending the System
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:
[ 134 ]
Chapter 5
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" %>
<%# Eval("NewsTitle") %>
<%# IfEmpty(Eval("NewsTeaser"), "", GetImage("NewsTeaser")) %>
<%# GetDateTime("NewsReleaseDate", "d") %>
<%# Eval("NewsSummary") %>
<%# Eval("NewsText") %>
[ 135 ]
Extending the System
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 transformations Content 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.
[ 136 ]
Chapter 5
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" %>
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 types Content 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.
[ 137 ]
Extending the System
Time for action – creating custom document types Now, 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: [ 138 ]
Chapter 5
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.
[ 139 ]
Extending the System
Attribute name
Attribute type
BiographyID
Integer number
Name
Text
Job_title
Text
Age
Integer number
Gender
Text
Bio
Long Text
Attribute size
Field caption
Field type
BiographyID
Label
50
Name
Text box
50
Job Title
Text box
Age
Text box
Gender
Radio Buttons
Biography
HTML area (Formatted Text)
2
Options
1;Male 2;Female
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.
[ 140 ]
Chapter 5
7.
Select Next, as shown in the following screenshot:
[ 141 ]
Extending the System
8.
Leave the default selections and click Next.
9.
Complete the new document type wizard by clicking Finish, as shown in the following screenshot:
[ 142 ]
Chapter 5
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 schema Custom 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.
[ 143 ]
Extending the System
Time for action – creating an employee biography Now 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:
[ 144 ]
Chapter 5
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:
[ 145 ]
Extending the System
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:
[ 146 ]
Chapter 5
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.
[ 147 ]
Extending the System
Kentico API Kentico 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 handlers Global 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
[ 148 ]
Chapter 5
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:
[ 149 ]
Extending the System
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:
[ 150 ]
Chapter 5
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
[ 151 ]
Extending the System
10. In the Solution Explorer, double-click the Kentico CMS web project web.config file, as shown in the following screenshot:
11. In the
section of the web.config file, enter the following configuration line:
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.
[ 152 ]
Chapter 5
Time for action – sending a news item by e-mail The 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.
3.
using CMS.EmailEngine;
Within the Code view, select the OnAfterInsert() method, as shown in the following screenshot:
[ 153 ]
Extending the System
4.
Add the following code inside the OnAfterInsert() method and Rebuild the solution. // type the document as TreeNode TreeNode newsDoc = (TreeNode)treeNodeObj; // handle the event only for news items if (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.
7.
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.
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.
[ 154 ]
Chapter 5
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.
Summary We 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.
[ 155 ]
6
System 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.
By reading this chapter and following the exercises, we shall:
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
Social bookmarking Social 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 bookmarking Using 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.
[ 158 ]
Chapter 6
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:
[ 159 ]
System Integration
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 hero One 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.
Mapping The 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 office Our 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.
[ 160 ]
Chapter 6
2.
3.
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
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:
[ 161 ]
System Integration
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 maps The 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.
[ 162 ]
Chapter 6
4.
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
Select the Northwest Transport – San Francisco office document and the Live site button to view the map, as shown in the following screenshot:
[ 163 ]
System Integration
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 services Web 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 service The 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.
[ 164 ]
Chapter 6
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 /// /// <param name="parameter">String parameter for sql command [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 [ 165 ]
System Integration lunchTable.Rows.Add(1, Specialty Hamburgers"); lunchTable.Rows.Add(2, lunchTable.Rows.Add(3, lunchTable.Rows.Add(4, Sandwich"); lunchTable.Rows.Add(5,
"Monday", "Kobe River Snake Farm "Tuesday", "Canyon River Beef Stew"); "Wednesday", "Smoke Halibut"); "Thursday", "Specialty Ham "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.
[ 166 ]
Chapter 6
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.
[ 167 ]
System Integration
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
9.
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
Select live site to view the web part, as shown in the following screenshot:
[ 168 ]
Chapter 6
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 clouds A 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 part We 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.
[ 169 ]
System Integration
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.
4.
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
Select the Design button to view the tag cloud, as shown in the following screenshot:
[ 170 ]
Chapter 6
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 Syndication RSS 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 feed The 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:
[ 171 ]
System Integration
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:
[ 172 ]
Chapter 6
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 feed Blogs 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. [ 173 ]
System Integration
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 feed To 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
HTML Envelope
Content before
Content after
[ 174 ]
Chapter 6
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.
[ 175 ]
System Integration
Representational State Transfer Representational 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 key bit.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:
[ 176 ]
Chapter 6
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 API One 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.
[ 177 ]
System Integration
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.
[ 178 ]
Chapter 6
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 Ke y&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.
[ 179 ]
System Integration
Time for action – building a REST user control Now, 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:
[ 180 ]
Chapter 6
3.
Select the Source tab for the bitly user control and enter the following code: <%@ Control Language="C#" AutoEventWireup="true" CodeFile="Bitly. ascx.cs" Inherits="RESTExamples_bitly" %>
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&forma t=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.
[ 181 ]
System Integration
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.
9.
Tab
Field
Value
User control
User control virtual path
~/RESTExamples/bitly.ascx
HTML Envelope
Web part container
Black box
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. [ 182 ]
Chapter 6
Twitter Twitter 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 integration Let'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.Resolv eUrl(DocumentURLProvider.GetUrl(newsDoc.NodeAliasPath, newsDoc. DocumentUrlPath)); PostTweet("username", "password", postText); [ 183 ]
System Integration 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 */} } [ 184 ]
Chapter 6
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.
Summary We 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.
[ 185 ]
7
Adding E-commerce Functionality to your Site In 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.
By reading this chapter and following the exercises, we shall:
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 site In 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
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 wizard During 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.
[ 188 ]
Chapter 7
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:
[ 189 ]
Adding E-commerce Functionality to your Site
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.
[ 190 ]
Chapter 7
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:
[ 191 ]
Adding E-commerce Functionality to your Site
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 policy Unless 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.
[ 192 ]
Chapter 7
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:
[ 193 ]
Adding E-commerce Functionality to your Site
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 bar We 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.
[ 194 ]
Chapter 7
Product management The 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: 1. Home (Page) 2. 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 products Now, 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:
[ 195 ]
Adding E-commerce Functionality to your Site
3.
4.
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
Select the Page tab to view the new HTC Touch Cruise document, as shown in the following screenshot:
[ 196 ]
Chapter 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 options Product 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
[ 197 ]
Adding E-commerce Functionality to your Site
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
[ 198 ]
Chapter 7
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.
[ 199 ]
Adding E-commerce Functionality to your Site
Time for action – customizing product categories Product 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:
[ 200 ]
Chapter 7
5.
6.
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
Select the Content tab, Plasma TVs, and the Page tab to view the new Samsung Super TV, as shown in the following screenshot:
[ 201 ]
Adding E-commerce Functionality to your Site
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 categories You 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:
[ 202 ]
Chapter 7
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 product We 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.
3.
Form Field
Value
Document type display name
PlasmaTV
Document type code name
CustomProduct (namespace) television (document type)
In Step 2 | Data type, select Next. [ 203 ]
Adding E-commerce Functionality to your Site
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. [ 204 ]
Chapter 7
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.
[ 205 ]
Adding E-commerce Functionality to your Site
Purchase process and payment gateway Once 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 purchase Let'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:
[ 206 ]
Chapter 7
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:
[ 207 ]
Adding E-commerce Functionality to your Site
7.
8.
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
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:
[ 208 ]
Chapter 7
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. [ 209 ]
Adding E-commerce Functionality to your Site
Time for action – payment gateways The 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:
[ 210 ]
Chapter 7
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 gateway Choosing 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.
[ 211 ]
Adding E-commerce Functionality to your Site
Time for action – customizing the purchase process Providing your customers with an intuitive checkout experience is an important part of the ecommerce 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:
[ 212 ]
Chapter 7
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 process The 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.
Summary We 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. [ 213 ]
8
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.
By reading this chapter and following the exercises, we shall:
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
Widgets From 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
Time for action – adding widgets Widgets 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.
[ 216 ]
Chapter 8
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:
[ 217 ]
Advanced Management
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 zone Widgets 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:
[ 218 ]
Chapter 8
2.
In the Page layout screen, replace the existing Page layout with the following and then select Save.
3.
In zoneBottom, select the configure drop-down box and then select Properties, as shown in the following screenshot:
[ 219 ]
Advanced Management
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 [ 220 ]
Chapter 8
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 personalization Not 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 widget Now 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:
[ 221 ]
Advanced Management
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.
[ 222 ]
Chapter 8
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.
[ 223 ]
Advanced Management
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.
[ 224 ]
Chapter 8
Multi-lingual sites Anything 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 languages The 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:
[ 225 ]
Advanced Management
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:
[ 226 ]
Chapter 8
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 languages While 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 content Once 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.
[ 227 ]
Advanced Management
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:
[ 228 ]
Chapter 8
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.
[ 229 ]
Advanced Management
Time for action – viewing language-specific content To 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:
[ 230 ]
Chapter 8
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.
[ 231 ]
Advanced Management
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= 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 culture At 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. [ 232 ]
Chapter 8
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. [ 233 ]
Advanced Management
Site deployment Up 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 deployment Let'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. [ 234 ]
Chapter 8
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. [ 235 ]
Advanced Management
Time for action – deploying a new production site Now 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 entry:
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.
[ 236 ]
Chapter 8
7.
In Step 2 | Site details, complete your production domain information, as shown in the following screenshot and select Next.
8.
In Step 3 | Objects selection, click 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.
[ 237 ]
Advanced Management
Time for action – incremental changes Now 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.
[ 238 ]
Chapter 8
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:
[ 239 ]
Advanced Management
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 tasks We 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:
[ 240 ]
Chapter 8
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.
Summary We 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. [ 241 ]
9
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.
By reading this chapter and following the exercises, we shall:
Learn about SEO best practices
Explore document aliases
Learn techniques for managing metadata
Work with the web analytics module
Create a marketing campaign
SEO SEO 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
Have a go hero – determine your keywords Search 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 characters In 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:
[ 244 ]
Chapter 9
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. [ 245 ]
SEO and Web Analytics
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 name The 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:
[ 246 ]
Chapter 9
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:
[ 247 ]
SEO and Web Analytics
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 metadata Metadata 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.
[ 248 ]
Chapter 9
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
[ 249 ]
SEO and Web Analytics
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 aliases A 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:
[ 250 ]
Chapter 9
3.
In the new alias screen, URL path field, enter /Services-Available, and click OK, as shown in the following screenshot:
[ 251 ]
SEO and Web Analytics
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 ServicesAvailable.aspx URL. [ 252 ]
Chapter 9
Time saving tip The URL path of the Document alias path must always start with the /.
Time for action – using consistent tags Maintaining 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:
[ 253 ]
SEO and Web Analytics
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:
[ 254 ]
Chapter 9
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 guidance Writing 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.
[ 255 ]
SEO and Web Analytics
Web analytics Web 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 module The 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:
[ 256 ]
Chapter 9
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 reporting Now 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:
[ 257 ]
SEO and Web Analytics
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 requirements Reporting 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 campaign Success 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:
[ 258 ]
Chapter 9
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.
[ 259 ]
SEO and Web Analytics
3.
Open a new browser and enter the campaign URL that will be used—http:// localhost:58995/KenticoCMS/Services-Available.aspx?services=jun enewsletter, 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.
[ 260 ]
Chapter 9
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.
Summary We 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.
[ 261 ]
10
Building 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.
By reading this chapter and following the exercises, we shall:
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 development The 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
Time for action – creating the community site Now 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.
[ 264 ]
Chapter 10
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:
[ 265 ]
Building a Community Website
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 stylesheet Now 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:
[ 266 ]
Chapter 10
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.
[ 267 ]
Building a Community Website
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 stylesheet CSS 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 category Website 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
[ 268 ]
Chapter 10
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 page Now, 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.
[ 269 ]
Building a Community Website
2.
3.
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
Click the Master Page tab, enter the following code into the tag, and then select Save. />
4.
Switch to the Design tab to view the new Master Page, as shown in the following screenshot:
[ 270 ]
Chapter 10
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 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 page The 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 images Now, 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.
[ 271 ]
Building a Community Website
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 page Now 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.
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
HTML Envelope
Content after
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
Messaging properties
Inbox link URL
~/Members/{%UserName|(encode)true%}/Messages. aspx
Messaging properties
Show unread message count
Selected
Messaging properties
Show outbox
Disabled
Messaging properties
Show new messaged
Disabled
HTML Envelope
Content before
HTML Envelope
Content after
<Space>|
[ 273 ]
Building a Community Website
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
HTML Envelope
Content after
<Space>|
Content
Text
Edit my profile
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
HTML Envelope
Content after
<Space> |
6.
7.
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
Switch to the Page tab and click the Select button, as shown in the following screenshot:
[ 274 ]
Chapter 10
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
[ 275 ]
Building a Community Website
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 membership Membership 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 site Let'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.
[ 276 ]
Chapter 10
3.
In Step 2 | Choose web site template, select Community Site, as shown in the following screenshot and select Next.
4. 5. 6. 7.
In Step 3 | Enter new site settings, click Next.
8.
In Step 4 | Objects selection, click Next. In Step 5 | Import progress, select Next. In Step 6 | The web site has been created successfully, click the Edit your new website link. Validate the installation of your site, as shown in the following screenshot:
[ 277 ]
Building a Community Website
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 templates Web 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 membership The 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:
[ 278 ]
Chapter 10
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 community It 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. [ 279 ]
Building a Community Website
Time for action – modifying the registration form The 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.
3.
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
Select the Alternative forms tab and select the edit icon for the Registration form, as shown in the following screenshot:
[ 280 ]
Chapter 10
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:
[ 281 ]
Building a Community Website
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:
[ 282 ]
Chapter 10
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 groups Now, 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:
[ 283 ]
Building a Community Website
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.
[ 284 ]
Chapter 10
Time for action – creating a group page Groups 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:
[ 285 ]
Building a Community Website
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.
Summary We 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!
[ 286 ]
Index Symbols % sign 224
A Age attribute 140 aliaspath parameter 173, 174 API 8 Application Programming Interface. See API ASPX vs Portal engine pages 271 authentication 84 authorization 84
B best practices, SEO consistent tags, using 253-255 content editor guidance, defining 255 document aliases, using 250, 252 forbidden characters, defining 244-246 global setting 248 keywords, determining 244 metadata, changing 248 site name, changing 246, 247 bGetInfo_Click event 181 Bio attribute 140 BiographyID attribute 140 bit.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 177 about 176 examining 178, 179 using 177
C Checkout process 213 CMS about 7 benefits 33 CMS Desk, WCMS bookmarking 19 existing page, editing 20-22 Home page 22 logging into 17, 18 password, protecting 24 profile, modifying 23 sections 20 community website deployment CSS stylesheet, assigning 266, 267 files, obtaining 266 images, uploading 271, 272 master page, creating 269-271 master page, defining 271 master page, populating 272-276 new template creating, need for 269 page template category, creating 268, 269 site, creating 264-266 stylesheet, designing 268 content documents 33 Document type 33 Kentico CMS, standard modules 37 Content Management Systems. See CMS
custom document types content, storing 143 creating 138-142 custom schema 143 employee biography, creating 144-147 icons, changing 147 naming conventions 138 New document type 143 customized product list displaying 77-81
D document video consistency guidance 104 document attachments about 104 adding 105-108 document level permissions setting, options 81, 82 document linking about 97 image, linking to 98-100 outbound link guidance 101 YouTube video, linking to 101 Document type, content available types, viewing 34, 35 Default Page Template 34 Document Type Code Name 34 Document Type Display Name 34 Editing Form URL 34 Editing Page URL 34 List Page URL 34 New Page URL 34 Preview Page URL 34 Show Template Selection 34 Use Publish from/Publish To 34 Document types property 145
E e-commerce site log-on bar, removing 194 machine policy 192 master page, modifying 193, 194 news site wizard 188-192 product options, adding 197-199
Edit my profile link 279 event bGetInfo_Click 181 OnAfterCopy 153 OnAfterDelete 153 OnAfterInsert 153 OnAfterInsertNewCultureVersion 153 OnAfterMove 153 OnAfterUpdate 153 OnBeforeCopy 153 OnBeforeDelete 153 OnBeforeInsert 153 OnBeforeInsertNewCultureVersion 153 OnBeforeMove 153 OnBeforeUpdate 153 event handlers, Kentico API adding 149-152 data updates 148 documents events 148 exceptions 148 security events 148 workflow events 148 EventRepeater web part transforming 128-136 Export single object screen 35
F FCK editor 44 files location 189
G Gender attribute 140 GetDataSet() method 166, 169 Google maps implementing 162, 164 groups about 276 community, interacting with 279 community starter site, setting up 276-278 new groups, creating 283, 284 page, creating 285, 286 registration form, modifying 280-283 web templates, using 278
[ 288 ]
H Home page 22
I IIS about 8, 187 disadvantages 187 need for 188 installing Kentico CMS 8 installing, Kentico CMS requirements 8 steps 9-15 Internet Information Services. See IIS
J Job_title attribute 140
K Kentico API, event handlers adding 149-152 data updates 148 documents events 148 exceptions 148 security events 148 workflow events 148 Kentico API event handlers, adding 148 implementing 148 news item, sending by e-mail 153-155 Kentico CMS about 7, 8 API 148 ASP.NET similarities 126 downloading 9 Global Administrator 23 installing 8 security, managing 67 Kentico CMS, standard modules blog entry, creating 47-49 blogs 37 booking system 37 content rating 37 content staging 37
E-Commerce 37 event calendar 37 forums 37 friends 37 Geomapping 37 groups 37 image gallery 37 media library 37 message boards 37 messaging 37 newsletter 37 On-line forms (Bizforms) 37 poll, creating 38-43 polls 37 reporting 37 taxonomy 37 web analytics 37 web farm support 37 Wiki 37 WYSIWYG editor, using 44 Kentico CMS Desk Blog post form, updating 47 Blogs 47 Insert link dialog 48 My blog 47 Kentico CMS installation .NET version, selecting 11 database, naming 14 debugging 12 download link 9 project files 12 SQL Server, naming 13 starter sites, selecting 14 steps 9-15 websites, creating 10 keyword stuffing 248
L Live site tab 100 Log in as this user link 73
M mapping Google maps, implementing 162, 164 Google maps web part, using 160, 161 new office, adding 160, 162 [ 289 ]
media library about 108 batch operations 114, 115 creating 112, 113 files, uploading on live site 118, 119 file types, restricting 123 image, displaying 109-112 image gallery, displaying 116, 117 images, identifying 114 properties, validating 109 role guidance, refining 122 security, setting 120, 121 use 113 user permissions, list 122 viewing 108, 109 membership about 276 community, interacting with 279 community starter site, setting up 276-278 registration form, modifying 280-283 user membership 278, 279 web templates, using 278 metadata 158 metadata, changing component, description 248 component, keywords 248 component, title 248 page description field 249 page keywords 249 page title field 249 steps 249, 250 method GetDataSet() 169 OnAfterInsert() 155 OnAfterUpdate() 185 PostTweet() 185 multi-lingual sites about 225 current culture, combining with 232, 233 language-specific content, viewing 230-232 new languages, adding 225, 226 site content, translating 227-229
N Name attribute 140 New stylesheet screen 267
O OnAfterInsert event 153 OnAfterInsert() method 155 OnAfterUpdate() method 185
P page management Design tab 62-64 new ASPX page template, creating 51-56 new Portal Engine page, creating 58-61 page template 49 web parts, adding 64-66 page template about 49 creating 50 managing 49, 51 new ASPX page template, creating 51-58 payment gateways about 206 choosing 211 PayPal merchant account, configuring 210, 211 setting up, options 210 Portal engine pages versus ASPX 271 PostTweet() method 185 product management 195 attributes, entering 204, 205 Home (Page) 195 new product, adding 203-205 News (page) 195 product categories, customizing 200-202 Products (Page) 195 products, adding 195, 196 products, adding to multiple categories 202, 203 Special pages 195 Properties tab 93 property Selected item transformation 134 Transformation 130 Transformation name 129 property, Google maps default latitude 163 default longitude 163 document types 163 [ 290 ]
height 163 large view scale 163 Latitude field 163 Longitude field 163 path 163 Tooltip field 163 transformation 163 width 163 purchase process about 206 Checkout process, defining 213 Checkout process, selecting 213 customizing 212 examining, steps 206-209 Temporary Payment Page 209
R Really Simple Syndication. See RSS Representational State Transfer. See REST REST about 176 API key, retrieving 176, 177 bit.ly 176 user control, building 180-182 RIA 7 Rich Internet Applications. See RIA role-based content creating 74-77 roles, site security fundamentals CMS Basic users role 75 mapping 70 new role, creating 68, 69 RSS about 171 Blog RSS feed 173-175 Blog RSS feed, implementing 174, 175 news feed, subscribing 171-173
S Search Engine Optimization. See SEO secure pages creating 82, 83 Selected item transformation property 134 SEO about 243
best practices 244 SEO, best practices consistent tags, using 253-255 content editor guidance, defining 255 document aliases, using 250, 252 forbidden characters, defining 244-246 global setting 248 keywords, determining 244 metadata, changing 248 site name, changing 246, 247 Share button 102 site deployment Content staging, enabling 238-240 exported site, viewing 235 new production site, exporting 236, 237 site, exporting 234 synchronization, setting up 240, 241 Site Manager about 24 bookmarking 25 logging into 24 users, adding 27-31 users, defining 31 website, restarting 25-27 website, shutting down 25-27 site roles, widgets Group Administrator 216 Page Editor 216 Site Developer/Administrator 216 Web Site Users 216 site root 57 site security fundamentals 67 site security, fundamentals document permissions 68 roles 68 UI personalization 68 users 68 social bookmarking about 158 Facebook 159 implementing 158, 159 standard modules, Kentico CMS blog entry, creating 47-49 blogs 37 booking system 37
[ 291 ]
content rating 37 content staging 37 E-Commerce 37 event calendar 37 forums 37 friends 37 Geomapping 37 groups 37 image gallery 37 media library 37 message boards 37 messaging 37 newsletter 37 On-line forms (Bizforms) 37 poll, creating 38-43 polls 37 reporting 37 taxonomy 37 web analytics 37 web farm support 37 Wiki 37 WYSIWYG editor, using 44 standard reports, web analytics browser types 258 campaigns 258 conversions 258 countries 258 file downloads 258 file downloads - multilingual 258 invalid pages 258 page views 258 page views - multilingual 258 referrals 258 visits 258
T Tag cloud about 169 web part, adding 169, 170 Transformation name property 129 Transformation property 130 transformations about 125 attachments, handling 132-136 in web parts 126, 127
ratings, displaying 136, 137 Twitter about 183 followers 183 integrating 183-185 tweets 183
U users, site security fundamentals adding, to another role 70-74
V video consistency guidance, document 104
W WCMS about 16 CMS Desk 16 web analytics about 256 marketing campaign, tracking 258-261 module, configuring 256, 257 off-site web analytics 256 on-site web analytics 256 reporting 257 reporting, requirements 258 standard reports 258 Web Content Management System. See WCMS web parts transformations 126, 127 web services about 164 building 164-168 Invoke button 167 website content 97 Widget properties (Date & time) screen 218 widgets about 215 adding 216 creating, steps 221-224 Date & time widget 217 existing widget, modifying 216-218 site roles 216
[ 292 ]
zone, creating 218, 220 zone types, changing 221 word cloud. See Tag cloud workflow about 84 configuring 85-89 document changes, rolling back 92-94 document lifecycle example 84 executing 89-92 mapping 95 scope 88 workflow scope 88 WYSIWYG editor using 44, 46
X X icons, content trees 228
Y YouTube video linking to 101-104 URL, obtaining 102
Z zoneLeft 41, 59
[ 293 ]
Thank you for buying
Kentico CMS 5 Website Development Beginner's Guide
About Packt Publishing
Packt, pronounced 'packed', published its first book "Mastering phpMyAdmin for Effective MySQL Management" in April 2004 and subsequently continued to specialize in publishing highly focused books on specific technologies and solutions. Our books and publications share the experiences of your fellow IT professionals in adapting and customizing today's systems, applications, and frameworks. Our solution based books give you the knowledge and power to customize the software and technologies you're using to get the job done. Packt books are more specific and less general than the IT books you have seen in the past. Our unique business model allows us to bring you more focused information, giving you more of what you need to know, and less of what you don't. Packt is a modern, yet unique publishing company, which focuses on producing quality, cutting-edge books for communities of developers, administrators, and newbies alike. For more information, please visit our website: www.packtpub.com.
Writing for Packt
We welcome all inquiries from people who are interested in authoring. Book proposals should be sent to [email protected]. If your book idea is still at an early stage and you would like to discuss it first before writing a formal book proposal, contact us; one of our commissioning editors will get in touch with you. We're not just looking for published authors; if you have strong technical skills but no writing experience, our experienced editors can help you develop a writing career, or simply get some additional reward for your expertise.
ASP.NET 3.5 CMS Development ISBN: 978-1-847193-61-2
Paperback: 284 pages
Build, Manage, and Extend your own Content Management System 1.
Create your own Content Management System with the understanding needed to expand it and add new functionality as your needs grow
2.
Learn to build a fully functional application with very little code and set up users and groups within your application
3.
Manage the layout of your site using Master Pages, Content Placeholders, Themes, Regions, and Zones
Joomla! 1.5: Beginner's Guide ISBN: 978-1-847199-90-4
Paperback: 380 pages
Build and maintain impressive user-friendly web sites the fast and easy way with Joomla! 1.5 1.
Create a web site that meets real-life requirements by following the creation of an example site with the help of easy-to-follow steps and ample screenshots
2.
Practice all the Joomla! skills from organizing your content to completely changing the site's looks and feel
3.
Go beyond a typical Joomla! site to make the site meet your specific needs
Please check www.PacktPub.com for information on our titles
Practical Plone 3: A Beginner's Guide to Building Powerful Websites ISBN: 978-1-847191-78-6
Paperback: 592 pages
A beginner's practical guide to building Plone websites through graphical interface 1.
Get a Plone-based website up and running quickly without dealing with code
2.
Beginner's guide with easy-to-follow instructions and screenshots
3.
Learn how to make the best use of Plone's out-of-the-box features
4.
Customize security, look-and-feel, and many other aspects of Plone
MODx Web Development ISBN: 978-1-847194-90-9
Paperback: 276 pages
Building dynamic websites with the PHP application framework and CMS 1.
Simple, step-by-step instructions detailing how to install, configure, and customize MODx
2.
Covers detailed theory from the basics, to practical implementation
3.
Learn the most common web requirements and solutions, and build a site in the process
Please check www.PacktPub.com for information on our titles
