Building A Basic Sitecore Website

Building a Basic Sitecore Website
Author: Date: Release: Language: Derek Roberti, Sitecore USA February 22, 2007 Revision 1.0 English
Sitecore is a registered trademark. All other brand and product names are the property of their respective holders. The contents of this document are the property of Sitecore. Copyright 2001-2007 Sitecore. All rights reserved.
Sitecore. Content Delivery
www.sitecore.net info@sitecore.net
Sitecore Corporation training@sitecore.net +45 70 23 66 60
Table of Contents:
Chapter 1
1.1 1.2
Introduction
Related Documents Site Requirements 3 3
Chapter 2
2.1
First Things First Create Templates

Activity 4
4 6
7
Chapter 3
3.1
Masters and the Information Architecture

Activity
Chapter 4
4.1 4.2 4.3 4.4
Presentation Building Blocks

Sitecore Layouts Sitecore Sublayouts Sitecore Renderings Activity 9 10 10 11
Chapter 5
5.1
Configure Layout Settings

Activity 15
15 18
18 18
Chapter 6
6.1 6.2
Review and Next Steps

Review Next Steps
Chapter 7
7.1 7.2 7.3
Appendix Understanding the XSL Renderings

Left Nav Generic Page Product 20 20 21
20
Sitecore Page 2 of 21 Sitecore is a registered trademark. All other brand and product names are the property of their respective holders. The contents of this document are the property of Sitecore. Copyright 2001-2007 Sitecore. All rights reserved.
Chapter 1
Introduction
This document is for developers who are familiarizing themselves with Sitecore and want to see the basic Sitecore concepts demonstrated in a very simple implementation. 1.1 Related Documents
This document assumes that you have read Understanding Sitecore Fundamentals and have access to the Sitecore Developers Cookbook (available on-line at SDN5 in the Developer section).
1.2
Site Requirements
Our basic website will have two types of pages: a home page and a product page. The homepage will list all of the products available on the site. The product pages will present the details of our products. The site will use a two-column design that places a navigation menu on the left side of the page and a main content area on the right side of the page: Header
Left Navigation
Main Content
Footer
The site will also have a header and footer that appear on all pages of the site.
Chapter 2
First Things First Create Templates
A common approach to developing a site in Sitecore is to start by creating a template model. (Remember templates are a data construct in Sitecore, not a presentation construct.) Our site is simple and will just have two templates one for the home page and one for products. Here are the templates and the fields we will need:
Template Model
Home Page Field Title Field Type Text Field Title
Product Field Type Text
Description Rich Text Image Price Image Text
Description Rich Text
Remember that these templates will serve two functions for us: a) they will structure the data on our site and b) they will define the user interfaces that allow business users to enter data into Sitecore.
2.1
1)
Activity
Using the template model above, open the Template Manager and create our two templates. To access the Template Manager, log in to Sitecore (typically http://localhost/sitecore) using the admin username and the blank password. Click the Sitecore button in the lower left-hand corner and select Template Manager. If you are new to creating Sitecore templates, refer to Chapter 3.1 of the Developers Cookbook.
Once you are done, your template manager should look something like this:
2)
In a standard Sitecore installation, Sitecore has already created a Home item for you. Open the Content Editor (Sitecore > Content Editor) to take a look. We want this item to be based on our Home Page template, rather than the default template that Sitecore uses. To do this, click on the Configure tab and click Change Template. Complete the wizard to change the template to the Home Page template that you created in 1).
Chapter 3
Masters and the Information Architecture
Now that you have created your templates, you need to define your information architecture (IA) and create new content items. The information architecture of your site is always an important component of a Sitecore solution. In our simple solution, we will define the information architecture in this way: Home Product 1 Product 2 Product n This means that we will have a homepage and that business users will be able to create new products under the homepage. In a typical site, the information architecture may be more complex you might have a Products section of your site in which business users create a variety of products. In the spirit of keeping things simple, we are going to stick with our simple IA. In Sitecore, business users create new items using masters. A master gives business users a simplified way to work with templates. Instead of business users having to search for the right template to use, they can simply select from a list of pre-defined masters. We just need one master for our site the Product master, which should be based on the Product template. In the Activity below, you will create this master and configure the Home item such that business users can create new products under the home item. Note that we have not yet addressed how these content items will appear on your website. For now, we are just building the content infrastructure.
3.1
Activity 1) Now, you will create the Product master. Open the Template Manager and select the Product template. Click on the Masters, then click the new master button. Name your new master Product. Double-click on the master to open the master editor. Enter $name (without the quotes) in the Title field. This will tell Sitecore to copy the name of the product into this field.
When you are done, click Save, then click Close. If you are new to creating masters, look in the Sitecore Developers cookbook, Chapter 4.1, for step-by-step instructions. 2) Now, we will configure masters on the Home item. Open Content Editor (Sitecore > Content Editor) and select the Home item. Click on the Configure tab and click Assign. Double-click on the Product master to select it. Double-click on the Sample Item and Folder masters to de-select them. Click OK when you are done.
Now, right-click the Home item. In the New menu, you should see Product listed as an option. Go ahead and create a few new products. Notice that when you create a new product, Sitecore enters the name of the new product in the Title field. This is because you entered $name in the Title field of the Product master.
Chapter 4
Presentation Building Blocks
Youve created your content infrastructure your templates, your master and your content tree. Now, we need to allow public users of your site to view the content you have created. To accomplish this, we will need a layout, a sublayout and three renderings. (All of the code you need will be provided in this document.) 4.1 Sitecore Layouts
A Sitecore layout is the highest-level presentation construct in Sitecore. It includes all of the page elements that should appear throughout the site. In our case, our layout will look like this: Header
Placeholder Middle
Footer
We know that every page on our site should include a header and a footer. Including these in our layout will ensure that the header and footer appear on every page request. The placeholder in the middle of the layout indicates that we will place other presentation elements (i.e. sublayouts or renderings) into this part of the page.
4.2
Sitecore Sublayouts
We also need to create a sublayout that will define the two-column area in the middle of our page. The sublayout should look like this:
Left Nav
Placeholder Content
The sublayout will have the Left Nav rendering on the left side (well discuss this shortly). The Content placeholder will have other presentation elements placed in it. We will configure Sitecore to put the two-column sublayout into the placeholder on our layout. 4.3 Sitecore Renderings
Finally, we will need to create three renderings: the left navigation, the home page text and the product description. Here is a description of each of these renderings: 1. The left navigation will render all of the products that have been created on the site. 2. The home page rendering will render the title field of the home item between <h1> tags and the description field of the home page beneath it. 3. The product description rendering will render all of the fields that are used to describe a product, i.e. title, description, image and price. When completely assembled, the our pages will look like this: Layout Header Sublayout
Renderings Footer
We will configure these presentation elements in the next section. For now, we will create all of the presentation building blocks of our site. Note that the following activities have many steps and can get detailed. Try to follow the steps carefully and dont forget to consult the Developers Cookbook when you need it. 4.4 Activity 1) Start by creating a layout. To do this, open Developer Center (Sitecore > Developer Center) and click Create a New Layout. Name the layout Browser Layout. Complete the Wizard, accepting all defaults. Sitecore will present your layout in a WYSIWYG editor. Select the text that says Insert your controls here and press Enter on your keyboard. Your screen will look like this:
Using the Insert Table button, add a table one column wide and three rows tall. Right-click the table to view the table properties. Set the width of the table to 640 pixels. If you havent worked with a table editor tool before, see Chapters 7.5 and 7.6 in the Sitecore Developers Cookbook for instructions. Add the word Header to the top cell of your table; then, add the word Footer to the bottom cell of the table. Remember that were keeping things simple here! In a real website, the header
would probably include your companys logo and maybe a search box. The footer would contain useful links for your site visitors. Now, add a placeholder to the middle cell and name it middle. To do this, click View > Toolbox, then drag the placeholder onto your table. Double-click the placeholder and change its key to middle.
Save the changes to your layout. For more information on adding a placeholder to your layout, see Chapter 7.3 of the Developers Cookbook. 2) Before we create our sublayout, we will create our three renderings. a) Click on the Start Page tab in Developer Center, then click Create a New XSLT Rendering. Name the rendering Left Nav and accept all of the other defaults offered by the wizard. Scroll down in the XSL code and find this:
  
Replace that code with the following code, then save.

  
<sc:dot /><br /> <xsl:for-each select="$home/item"> <sc:link><sc:text field="title" /></sc:link><br /> </xsl:for-each> </xsl:template>
b) Click on the Start Page tab in Developer Center, then click Create a New XSLT Rendering. Name the rendering Generic Page and accept all of the other defaults offered by the wizard.Scroll down in the XSL code and find this:

  
c) Click on the Start Page tab in Developer Center, then click Create a New XSLT Rendering. Name the rendering Product and accept all of the other defaults offered by the wizard. Scroll down in the XSL code and find this:

  
</xsl:template>
3) Now, create a new sublayout. Click on the Start Page tab in Developers Center and then click Create a New Sublayout. Name your sublayout Two Column and accept all of the other defaults offered by the Wizard. Create a one row, two-column table. Set the table width to 640px; the left column to 150px; and the right column to 490px. Now, add your Left Nav rendering to your sublayout. To do this, click View > Toolbox, then drag the rendering into the left cell of your table. If you dont see the Left Nav rendering listed, click Refresh in the Toolbox to refresh the list of renderings. Add a placeholder to the right cell of your table. Just drag a placeholder from the toolbox to the right cell of your table and you are done. Save your sublayout and close Developer Center.
Chapter 5
Configure Layout Settings
Our last steps are to configure our presentation settings and publish our site. To configure presentation settings, we will go to each of our templates and tell Sitecore which layout, sublayout and renderings to use for each of our content types (the home page and products). The Home Page should use the following presentation objects: Browser layout Two Column sublayout Generic Page rendering
The Products pages should use the following presentation objects: Browser layout Two Column sublayout Product rendering
Note that both the home page and the product pages use the same layout and sublayout. All that changes is the XSL rendering. In both cases, the Two Column sublayout will be associated with the middle placeholder on the Browser layout and the XSL rendering will be associated with the content placeholder on the Two Column sublayout. After you have completed your renderings, you will publish the site and view it in a browser. 5.1 Activity 1) Open the Template Manager (Sitecore > Template Manager) and navigate to the Home Page template. Click on the Standard Values button to be taken to the templates standard values. Standard values are where you can set default settings for content items that are based on the template. For more information on setting template standard values, see chapter 3.9 of the Developers Cookbook. To set presentation settings for the home item, click the Presentation tab. Click Layout and then click Edit by the Default device. In the drop-down menu, select the Browser layout.
Click Add and select the Two Column sublayout. In the Placeholder field, type middle. Click OK. Click Add again and select the Generic Page rendering. In the Placeholder field, type content. Click OK. Your screen should look like this:
What this indicates is that Sitecore will place the Two Column sublayout into the middle placeholder on the Browser layout. Then, Sitecore will place the Generic Page rendering into the content placeholder in the Two Column sublayout. Click OK.
2) Repeat the steps above, this time configuring the standard values on the Product template. When you are done, your settings should look like this:
3) Now publish the site by clicking the Sitecore button on the lower left corner of the screen and selecting Publish Site. In the wizard, choose Republish. To view your site, open a new browser window and navigate to the homepage, typically http://localhost. To edit your site, click on the Sitecore button and select WebEdit. Note how you can add new products by right-clicking the content marker (the green dot) in the left navigation area. You can edit the text on the home page by clicking on the content marker in the title of the page. If you navigate to a product page, you can edit the product in the same way. Your homepage may look something like this:
Chapter 6
Review and Next Steps
You did it! You just built a simple site in Sitecore. 6.1 Review
Heres what you did: 1) You created the templates for your site. In Sitecore, templates structure data and define business-user interfaces. 2) You created the information architecture of the site and defined masters. The masters determine which options appear when you right click a content marker (or when you right-click an item in the Content Editor). 3) You created the presentation building blocks of your site. 4) You configured the presentation settings in the template standard values. 5) You published the site. 6.2 Next Steps
Obviously, the sites you will build will be more complex than this one. The goal here has been to give you a working sample that demonstrates some of the basic Sitecore concepts, such as templates, masters, layouts, sublayouts and renderings. If you want to explore more, here are some next steps: 1) Try adding new fields to your template using the Template Manager. Experiment with different field types such as the datetime field or the memo field. For more information on Sitecore field types, see http://sdn5.sitecore.net/Reference/Field%20Reference.aspx. 2) Review the code generated by the Developer Center. You can find your layouts and sublayouts in the /layouts folder. Your XSL renderings are in your /xsl folder. Note that everything you did with the WYSIWYG editor you could do with Visual Studio. For example, to add a placeholder, just add <sc:placeholder runat=server key=foo /> to your layout (aspx) or sublayout (ascx). 3) Learn more about XSL renderings by reading the addendum below. Experiment with rendering different field types.
4) Want to dive in deep? Review the Sitecore Certified Developer 1 training materials: http://sdn5.sitecore.net/Developer/Training%20Materials/5_3%20Level%201.aspx
Chapter 7
Appendix Understanding the XSL Renderings
A bit confused by the XSL code? This appendix walks through the functionality of provided code. 7.1 Left Nav
Take a look at the code for the Left Nav rendering:

<xsl:template match="*" mode="main"> <sc:dot /><br /> <xsl:for-each select="$home/item"> <sc:link><sc:text field="title" /></sc:link><br /> </xsl:for-each> </xsl:template>
First off, you will notice the <sc:dot /> tag towards the top of the rendering. <sc:dot /> is a special Sitecore tag that tells Sitecore to output a content marker. This lets business users add or edit content items. Next, you will notice the <xsl:for-each /> element with the select attribute of $home/item. This instructs Sitecore to start with the Home item of the site and loop through all of its child items, in this case, the products. For each product, output a link (<sc:link />) using the title field of the product. The <sc:link /> tag will construct an <a href=foo.aspx></a> element. The <sc:text /> element will put the data from the Title field between the opening and closing <a> tags. 7.2 Generic Page
The Generic Page rendering just renders the title and description field of whatever item the user has navigated to.
<xsl:template match="*" mode="main"> <h1> <sc:dot /><sc:text field="title" /></h1> <sc:html field="description" /> </xsl:template>
Again, you see the <sc:dot /> tag, which outputs a content marker. You also see <sc:text field=title /> which will output the title field of the item. <sc:html /> is a special Sitecore tag that outputs the contents of a Rich Text field. In other words, it will output the description field as html.
7.3
Product
The Product rendering adds <sc:image /> to our repertoire:

<xsl:template match="*" mode="main"> <h1> <sc:dot /><sc:text field="title" /></h1> <sc:image field="image" /><br /> <sc:html field="description" /><br /> Price: <b><sc:text field="price" /></b> </xsl:template>
<sc:image /> outputs the image field as an image, i.e. as a <img /> tag. All of the rest of this code should look familiar to you -- <sc:dot />, <sc:text /> and <sc:html>.

Building A Basic Sitecore Website

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Building A Basic Sitecore Website

Uploaded by

Copyright:

Available Formats

Building a Basic Sitecore Website

Sitecore. Content Delivery

Sitecore Corporation training@sitecore.net +45 70 23 66 60

First Things First Create Templates

Masters and the Information Architecture

Presentation Building Blocks

Configure Layout Settings

Review and Next Steps

Appendix Understanding the XSL Renderings

Home Page Field Title Field Type Text Field Title

Product Field Type Text

Description Rich Text Image Price Image Text

Description Rich Text

Replace that code with the following code, then save.

Replace that code with the following code, then save.

Replace that code with the following code, then save.

Take a look at the code for the Left Nav rendering:

The Product rendering adds <sc:image /> to our repertoire:

You might also like