An Introduction to Configuring and Extending Umbraco CMS

Ken CenerelliSenior Software DeveloperAlvarnet Corporation

ken.cenerelli@alvarnet.comkencenerelli.wordpress.com@kencenerelli

Agenda

1. IntroductionBackground on Umbraco

2. Configuring UmbracoInstallation

3. Questions + Break4. Extending Umbraco

Umbraco Administration pagesDocument Types, Templates, Stylesheets, Users & Permissions and Packaging & DeploymentCustom development & User Controls

Umbraco Background

Developed in 2005 by Niels HartvigMore than 85,000 installations worldwideASP.NET, Heinz, Peugeot, Tesco, Wired, FOX and Vogue Magazine run UmbracoDesigned to run within the Microsoft stackAnd best of all… it’s FREE!

Installation

Umbraco can be used with both Visual Studio and WebMatrixIt can be deployed directly with the Web Platform InstallerHowever the manual install gives you the most control and as developers we like control…

Installation (cont’d)

A manual install is accomplished through a Web Deploy in IIS 7The Web Deployment Tool can be installed through Microsoft Web Platform Installer from http://www.iis.net/download/webdeployNote: Web Platform Installer will be installed first if it does not exist on your system

Installation (cont’d)

First we create a database and create a user for the databaseThe database will house the Umbraco settingsNext we create a new website in IIS 7 to house our Umbraco installationWe can then install Umbraco using the WebDeploy package 4.7.1.1 from http://umbraco.codeplex.com/

Installing & Configuring Umbraco

demo

Installation Resources

Video to install with Web Platform Installerhttp://umbraco.com/help-and-support/video-tutorials/getting-started/installing-with-web-pi.aspx

Video to walk through the install wizard:http://umbraco.com/help-and-support/video-tutorials/getting-started/installing-umbraco.aspx

Questions + Break

Accessing the admin site

Access the admin site from the site URL by adding “/Umbraco/” to the end of the pathThe trailing “/” MUST be presentThe admin site is where we can modify all of the Umbraco related items even though we have access to the code

Accessing the admin site

demo

Umbraco – Content Creation

Document TypeProperties

TemplateHTML + Place Holders

CreatePage Macros

User Controls/XSLT

web

Document Types

A way to design data storage and a way to generate the UI to input the dataEg. We can have a movie document type and within it we can have a Title, Genre, etc.We can then extend the document types by adding tabs and propertiesProperties help add data and can make fields mandatoryTabs control the UI to make it more user friendly

Creating a document type, property and new tab

demo

Templates

Document types reflect how to store data but templates define how to present the dataTemplates are akin to ASP.NET Master Pages and Nested Master PagesPage templates are inherited by master templates using <asp:Content></asp:Content> elements

Creating and applying a template

demo

Stylesheets

Are plain CSS in Umbraco and are used the same way as in normal htmlCan add properties to a stylesheet and attach them to a Richtext Editor

Creating and applying a stylesheet

demo

User Controls

Used for custom development when you need to access a database or process user inputCreate a new project to house both a web application project and the Umbraco CMS projectWe will set the Umbraco project to Not To BuildWe then set Post-Build Events to copy the User Controls and DLLs from the web project to the Umbraco project

Creating a web project to build a user control

demo

Adding a user control

The user controls are added within the admin siteWithin Umbraco a User Control is called a MacroWe add a macro to the page and content area where you want it to show up.

Adding a user control

demo

Debugging a user control

Cannot add a breakpoint and debug as normalHave to use Attach To Process with both Show processes checkboxes checkedAttach to the w3wp.exe processAnother method is to add ?umbdebugshowtrace=true as a query string to any Umbraco-generated page to show stack trace information

Debugging a user control

demo

Users, Members and Permissions

Users are administrators or content editorsUsers are a way to limit sections of the site to specific users and specific user functionsMembers give an identity to site visitors so they can register or loginMember Groups act like roles where a member can belong to one or more groupsThe page can then be locked down to a user or to a member group

Adding users, members and role-base permissions

demo

Packaging and Deployment

In essence the site was already deployed to the web serverHowever, now that the Web Deployment Tool is installed in your IIS, you can package and deploy your Umbraco site to your production server

Upcoming

Umbraco 5 with support for MVC and Razor will be released Q2 2012Umbraco 5 training available in the GTA in March

http://umbraco.com/products/training/schedule.aspx

Resources

http://umbraco.com/http://umbraco.com/help-and-support.aspx

(videos, whitepapers, sample projects, etc.)http://umbraco.com/developers-site.aspxhttp://our.umbraco.org/ (community hub with

forums, wiki, sample projects, etc.)

Questions?

ken.cenerelli@alvarnet.comkencenerelli.wordpress.com

@kencenerelli