basic website

8/6/2019 Basic Website

1/21

Sitecore CorporationSitecore. www.sitecore.net [email protected]

Content Delivery [email protected] +45 70 23 66 60

Building a BasicSitecore Website

Author: Derek Roberti, Sitecore USA

Date: February 22, 2007

Release: Revision 1.0

Language: 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.


2/21

Sitecore Page 2 of 21Sitecore is a registered trademark. All other brand and product names are the property of their respective holders. Thecontents of this document are the property of Sitecore. Copyright 2001-2007 Sitecore. All rights reserved.

Table of Contents:

Chapter 1 Introduction 31.1 Related Documents 31.2 Site Requirements 3

Chapter 2 First Things First Create Templates 42.1 Activity 4

Chapter 3 Masters and the Information Architecture 63.1 Activity 7

Chapter 4 Presentation Building Blocks 94.1 Sitecore Layouts 94.2 Sitecore Sublayouts 104.3 Sitecore Renderings 104.4 Activity 11

Chapter 5 Configure Layout Settings 155.1 Activity 15

Chapter 6 Review and Next Steps 186.1 Review 186.2 Next Steps 18

Chapter 7 Appendix Understanding the XSL Renderings 207.1 Left Nav 207.2 Generic Page 207.3 Product 21


3/21


Chapter 1Introduction

This document is for developers who are familiarizing themselves with Sitecore and want to seethe 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 accessto 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 homepagewill list all of the products available on the site. The product pages will present the details of ourproducts. The site will use a two-column design that places a navigation menu on the left side ofthe page and a main content area on the right side of the page:

The site will also have a header and footer that appear on all pages of the site.

Header

Footer

Left NavigationMain Content


4/21


Chapter 2First 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 issimple 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:

Remember that these templates will serve two functions for us: a) they will structure the data on our site and b) theywill define the user interfaces that allow business users to enter data into Sitecore.

2.1 Activity

1) 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 usernameand 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.

Home Page

Field Field

Type

Title Text

Description RichText

Product

Field Field Type

Title Text

Description Rich Text

Image Image

Price Text

Template Model


5/21


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, ratherthan the default template that Sitecore uses.

To do this, click on the Configure tab and click Change Template. Complete the wizard to change thetemplate to the Home Page template that you created in 1).


6/21


Chapter 3Masters 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 importantcomponent 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 newproducts 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 asimplified way to work with templates. Instead of business users having to search for the righttemplate 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 Producttemplate. In the Activity below, you will create this master and configure the Home item such thatbusiness 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. Fornow, we are just building the content infrastructure.


7/21


3.1 Activity

1) Now, you will create the Product master. Open the Template Manager and select theProduct template. Click on the Masters, then click the new master button. Name yournew 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 ofthe 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, forstep-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 andFolder masters to de-select them. Click OK when you are done.


8/21


Now, right-click the Home item. In the New menu, you should see Product listed as an option. Goahead 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 fieldof the Product master.


9/21


Chapter 4Presentation 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. Toaccomplish 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 pageelements that should appear throughout the site. In our case, our layout will look like this:

We know that every page on our site should include a header and a footer. Including these in ourlayout will ensure that the header and footer appear on every page request. The placeholder in themiddle of the layout indicates that we will place other presentation elements (i.e. sublayouts orrenderings) into this part of the page.

Header

Footer

PlaceholderMiddle


10/21


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:

The sublayout will have the Left Nav rendering on the left side (well discuss this shortly). TheContent 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 theproduct 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 tagsand 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 aproduct, i.e. title, description, image and price.

When completely assembled, the our pages will look like this:

LeftNav

PlaceholderContent

Header

Footer

Layout

Sublayout

Renderings


11/21


We will configure these presentation elements in the next section. For now, we will create all ofthe presentation building blocks of our site.

Note that the following activities have many steps and can get detailed. Try to follow the stepscarefully 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 > DeveloperCenter) and click Create a New Layout. Name the layout Browser Layout. Completethe Wizard, accepting all defaults.

Sitecore will present your layout in a WYSIWYG editor. Select the text that says Insert yourcontrols 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 thetable 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 SitecoreDevelopers Cookbook for instructions.

Add the word Header to the top cell of your table; then, add the word Footer to the bottomcell of the table. Remember that were keeping things simple here! In a real website, the header


12/21


would probably include your companys logo and maybe a search box. The footer would containuseful 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 DevelopersCookbook.

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 XSLTRendering. Name the rendering Left Nav and accept all of the other defaultsoffered by the wizard.

Scroll down in the XSL code and find this:

Replace that code with the following code, then save.


13/21


b) Click on the Start Page tab in Developer Center, then click Create a New XSLTRendering. Name the rendering Generic Page and accept all of the other defaultsoffered 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 XSLTRendering. Name the rendering Product and accept all of the other defaults offeredby the wizard.

Scroll down in the XSL code and find this:


Price:


14/21


3) Now, create a new sublayout. Click on the Start Page tab in Developers Center andthen 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 to150px; 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 Navrendering 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 toolboxto the right cell of your table and you are done.

Save your sublayout and close Developer Center.


15/21


Chapter 5Configure Layout Settings

Our last steps are to configure our presentation settings and publish our site. To configurepresentation settings, we will go to each of our templates and tell Sitecore which layout, sublayoutand 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 thatchanges is the XSL rendering. In both cases, the Two Column sublayout will be associated withthe middle placeholder on the Browser layout and the XSL rendering will be associated withthe 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 HomePage template. Click on the Standard Values button to be taken to the templatesstandard 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 theDevelopers Cookbook.

To set presentation settings for the home item, click the Presentation tab. Click Layoutand then click Edit by the Default device. In the drop-down menu, select the Browserlayout.


16/21


Click Add and select the Two Column sublayout. In the Placeholder field, typemiddle. Click OK.

Click Add again and select the Generic Page rendering. In the Placeholder field, typecontent. Click OK. Your screen should look like this:

What this indicates is that Sitecore will place the Two Column sublayout into the middleplaceholder on the Browser layout. Then, Sitecore will place the Generic Page renderinginto the content placeholder in the Two Column sublayout.

Click OK.


17/21


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 screenand selecting Publish Site. In the wizard, choose Republish. To view your site, open anew 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 canadd new products by right-clicking the content marker (the green dot) in the leftnavigation area. You can edit the text on the home page by clicking on the content markerin the title of the page. If you navigate to a product page, you can edit the product in thesame way. Your homepage may look something like this:


18/21


Chapter 6Review 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 definebusiness-user interfaces.

2) You created the information architecture of the site and defined masters. The mastersdetermine which options appear when you right click a content marker (or when youright-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 togive you a working sample that demonstrates some of the basic Sitecore concepts, such astemplates, masters, layouts, sublayouts and renderings. If you want to explore more, here aresome next steps:

1) Try adding new fields to your template using the Template Manager. Experiment withdifferent field types such as the datetime field or the memo field. For more information onSitecore 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 andsublayouts in the /layouts folder. Your XSL renderings are in your /xsl folder. Note thateverything you did with the WYSIWYG editor you could do with Visual Studio. Forexample, to add a placeholder, just add toyour layout (aspx) or sublayout (ascx).

3) Learn more about XSL renderings by reading the addendum below. Experiment withrendering different field types.


19/21


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


20/21


Chapter 7Appendix Understanding the XSL Renderings

A bit confused by the XSL code? This appendix walks through the functionality of providedcode.

7.1 Left Nav

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

First off, you will notice the tag towards the top of the rendering. is a special

Sitecore tag that tells Sitecore to output a content marker. This lets business users add or editcontent items.

Next, you will notice the element with the select attribute of $home/item. Thisinstructs Sitecore to start with the Home item of the site and loop through all of its child items, inthis case, the products. For each product, output a link () using the title field of theproduct. The tag will construct an element. The element will put the data from the Title field between the opening and closing tags.

7.2 Generic Page

The Generic Page rendering just renders the title and description field of whatever item theuser has navigated to.

Again, you see the tag, which outputs a content marker. You also see which will output the title field of the item. is a special Sitecore tagthat outputs the contents of a Rich Text field. In other words, it will output the description fieldas html.


21/21

Sitecore Page 21 of 21Si i i d d k All h b d d d h f h i i h ld Th

7.3 Product

The Product rendering adds to our repertoire:

Price:

outputs the image field as an image, i.e. as a tag. All of the rest of thiscode should look familiar to you -- , and .