SlideShare a Scribd company logo

Introduction To Umbraco

•Download as PPTX, PDF•
•
Ken Cenerelli
Ken Cenerelli

Umbraco is an open source content management system (CMS) that can be used to manage websites. It was developed in 2005 and has over 85,000 installations worldwide. The document discusses how to configure Umbraco by installing it manually through IIS, creating document types and templates to structure content, and extending its capabilities through macros and custom development.

Related slideshows

Wordpress To Go Democamp Mtl2009
Wordpress To Go Democamp Mtl2009Wordpress To Go Democamp Mtl2009
Wordpress To Go Democamp Mtl2009
 
Mobile apps with Umbraco and Phonegap
Mobile apps with Umbraco and PhonegapMobile apps with Umbraco and Phonegap
Mobile apps with Umbraco and Phonegap
 
The road to professional web development
The road to professional web developmentThe road to professional web development
The road to professional web development
 
1 of 30
Ken Cenerelli Senior Software Developer Alvarnet Corporation ken.cenerelli@alvarnet.com kencenerelli.wordpress.com @kencenerelli
1. Introduction Background on Umbraco 2. Configuring Umbraco Installation 3. Questions + Break 4. Extending Umbraco Umbraco Administration pages Document Types, Templates, Stylesheets, Users & Permissions and Packaging & Deployment Custom development & User Controls
Developed in 2005 by Niels Hartvig More than 85,000 installations worldwide ASP.NET, Heinz, Peugeot, Tesco, Wired, FOX and Vogue Magazine run Umbraco Designed to run within the Microsoft stack And best of all… it’s FREE!
Umbraco can be used with both Visual Studio and WebMatrix It can be deployed directly with the Web Platform Installer However the manual install gives you the most control and as developers we like control…
A manual install is accomplished through a Web Deploy in IIS 7 The Web Deployment Tool can be installed through Microsoft Web Platform Installer from http://www.iis.net/download/webdeploy Note: Web Platform Installer will be installed first if it does not exist on your system
First we create a database and create a user for the database The database will house the Umbraco settings Next we create a new website in IIS 7 to house our Umbraco installation We can then install Umbraco using the WebDeploy package 4.7.1.1 from http://umbraco.codeplex.com/
Introduction To Umbraco
Video to install with Web Platform Installer http://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
Introduction To Umbraco
Access the admin site from the site URL by adding “/Umbraco/” to the end of the path The trailing “/” MUST be present The admin site is where we can modify all of the Umbraco related items even though we have access to the code
Introduction To Umbraco
Document Type Template Properties HTML + Place Holders Create Page Macros User Controls/XSLT web
A way to design data storage and a way to generate the UI to input the data Eg. 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 properties Properties help add data and can make fields mandatory Tabs control the UI to make it more user friendly
Introduction To Umbraco
Document types reflect how to store data but templates define how to present the data Templates are akin to ASP.NET Master Pages and Nested Master Pages Page templates are inherited by master templates using <asp:Content></asp:Content> elements
Introduction To Umbraco
Are plain CSS in Umbraco and are used the same way as in normal html Can add properties to a stylesheet and attach them to a Richtext Editor
Introduction To Umbraco
Used for custom development when you need to access a database or process user input Create a new project to house both a web application project and the Umbraco CMS project We will set the Umbraco project to Not To Build We then set Post-Build Events to copy the User Controls and DLLs from the web project to the Umbraco project
Introduction To Umbraco
The user controls are added within the admin site Within Umbraco a User Control is called a Macro We add a macro to the page and content area where you want it to show up.
Introduction To Umbraco
Cannot add a breakpoint and debug as normal Have to use Attach To Process with both Show processes checkboxes checked Attach to the w3wp.exe process Another method is to add ?umbdebugshowtrace=true as a query string to any Umbraco-generated page to show stack trace information
Introduction To Umbraco
Users are administrators or content editors Users are a way to limit sections of the site to specific users and specific user functions Members give an identity to site visitors so they can register or login Member Groups act like roles where a member can belong to one or more groups The page can then be locked down to a user or to a member group
Introduction To Umbraco
In essence the site was already deployed to the web server However, now that the Web Deployment Tool is installed in your IIS, you can package and deploy your Umbraco site to your production server
Umbraco 5 with support for MVC and Razor will be released Q2 2012 Umbraco 5 training available in the GTA in March http://umbraco.com/products/training/schedule.as px
http://umbraco.com/ http://umbraco.com/help-and-support.aspx (videos, whitepapers, sample projects, etc.) http://umbraco.com/developers-site.aspx http://our.umbraco.org/ (community hub with forums, wiki, sample projects, etc.)
ken.cenerelli@alvarnet.com kencenerelli.wordpress.com @kencenerelli

More Related Content

Introduction To Umbraco

  • 1. Ken Cenerelli Senior Software Developer Alvarnet Corporation ken.cenerelli@alvarnet.com kencenerelli.wordpress.com @kencenerelli
  • 2. 1. Introduction Background on Umbraco 2. Configuring Umbraco Installation 3. Questions + Break 4. Extending Umbraco Umbraco Administration pages Document Types, Templates, Stylesheets, Users & Permissions and Packaging & Deployment Custom development & User Controls
  • 3. Developed in 2005 by Niels Hartvig More than 85,000 installations worldwide ASP.NET, Heinz, Peugeot, Tesco, Wired, FOX and Vogue Magazine run Umbraco Designed to run within the Microsoft stack And best of all… it’s FREE!
  • 4. Umbraco can be used with both Visual Studio and WebMatrix It can be deployed directly with the Web Platform Installer However the manual install gives you the most control and as developers we like control…
  • 5. A manual install is accomplished through a Web Deploy in IIS 7 The Web Deployment Tool can be installed through Microsoft Web Platform Installer from http://www.iis.net/download/webdeploy Note: Web Platform Installer will be installed first if it does not exist on your system
  • 6. First we create a database and create a user for the database The database will house the Umbraco settings Next we create a new website in IIS 7 to house our Umbraco installation We can then install Umbraco using the WebDeploy package 4.7.1.1 from http://umbraco.codeplex.com/
  • 8. Video to install with Web Platform Installer http://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
  • 10. Access the admin site from the site URL by adding “/Umbraco/” to the end of the path The trailing “/” MUST be present The admin site is where we can modify all of the Umbraco related items even though we have access to the code
  • 12. Document Type Template Properties HTML + Place Holders Create Page Macros User Controls/XSLT web
  • 13. A way to design data storage and a way to generate the UI to input the data Eg. 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 properties Properties help add data and can make fields mandatory Tabs control the UI to make it more user friendly
  • 15. Document types reflect how to store data but templates define how to present the data Templates are akin to ASP.NET Master Pages and Nested Master Pages Page templates are inherited by master templates using <asp:Content></asp:Content> elements
  • 17. Are plain CSS in Umbraco and are used the same way as in normal html Can add properties to a stylesheet and attach them to a Richtext Editor
  • 19. Used for custom development when you need to access a database or process user input Create a new project to house both a web application project and the Umbraco CMS project We will set the Umbraco project to Not To Build We then set Post-Build Events to copy the User Controls and DLLs from the web project to the Umbraco project
  • 21. The user controls are added within the admin site Within Umbraco a User Control is called a Macro We add a macro to the page and content area where you want it to show up.
  • 23. Cannot add a breakpoint and debug as normal Have to use Attach To Process with both Show processes checkboxes checked Attach to the w3wp.exe process Another method is to add ?umbdebugshowtrace=true as a query string to any Umbraco-generated page to show stack trace information
  • 25. Users are administrators or content editors Users are a way to limit sections of the site to specific users and specific user functions Members give an identity to site visitors so they can register or login Member Groups act like roles where a member can belong to one or more groups The page can then be locked down to a user or to a member group
  • 27. In essence the site was already deployed to the web server However, now that the Web Deployment Tool is installed in your IIS, you can package and deploy your Umbraco site to your production server
  • 28. Umbraco 5 with support for MVC and Razor will be released Q2 2012 Umbraco 5 training available in the GTA in March http://umbraco.com/products/training/schedule.as px
  • 29. http://umbraco.com/ http://umbraco.com/help-and-support.aspx (videos, whitepapers, sample projects, etc.) http://umbraco.com/developers-site.aspx http://our.umbraco.org/ (community hub with forums, wiki, sample projects, etc.)

Editor's Notes

  1. Introduce myselfAsk for a quick show of hands who is using a CMS and which ones they are using
  2. Manual install good for local machines or if you have access to the SQL serverVery clunky with Web Platform Installer
  3. DBs = MySQL, SQL Server and VistaDBThe newly created DB user must be the dbOwner of the database
  4. DEMO:1. Show them the created DB2. Show them where to find web deploy in IIS 73. Setup thru IIS deploy. Show them the wizard. Make note that they have to have SQL name in correct caps and that the SQL server must be set to (local). Also set the Application Pool framework to .NET 4.0. 4. Show them the completed site
  5. DEMO:1. Show how to access site2. Show how to log in with username created3. Give a tour of the site and what each of the areas do
  6. Talk about difference between saving and publishingDEMO:1. Create a Document Type and it will also create a template2. Create a new content page with that document type. Only Name is editable.3. On new document type create a new tab called Content.4. Create a new property under this tab called BodyText with Richtext Editor.5. Return to Content page and show new tab with the editor.
  7. HTML is the template languageEverything in template is wrapped in &lt;asp:Content&gt;&lt;/asp:Content&gt; elementTalk about inheriting templates into a master templateRecursive items (recursive=&quot;true&quot;) in master template so that they show on all pages
  8. - DEMO: 1. Add Summary property as textbox multiple to generic properties in Document Type. 2. Add Summary as a Umbraco page field in template. 3. Go to content page to edit this new field.
  9. DEMO:1. Create a new stylesheet called Style2. Add the following CSS line - body{background:red}3. Change the master page stylesheet in two areas4. Show a content page
  10. DEMO:1. Show the project used to create the custom user control2. Right-click the Solution file and set the CMS solution to not build in the properties3. Hide the App_Data/TEMP folder in the project files so they don’t get added to TFS4. Show the post build events
  11. - Talk about how this is the same as adding an XSLT macro
  12. Create a Login page and add the Login macro to it.
  13. The query string only works when debug mode is true in the Web.Config. Set to false when releasing to production.Can delete the DLLs and refresh the page to invoke the query stringThe query string is also good to check for bottlenecks on page load
  14. DEMO (Users):1. Create a new media library called UKEditor2. Create a new user called ukeditor; set password, the start nodes and sections3. Change user permissions – unclick Publish and click Send To Publish3. The administrator can then approve the changes once they are happy with itDEMO (Members):1. Create a Member Type called PowerUser2. Create a new tab called Details to store member properties3. Create a new property under Details called City4. Create a new member for that type called Demo5. Create a member group called PowerUsers and add the user to that groupDEMO (Role-based protection):1. Create a login template with &lt;asp:Login ID=&quot;Login&quot; runat=&quot;server&quot; /&gt;2. Allow new template on document type3. Create a new Login page with new template.4. Create a forbidden page.5. Create a private page and click Public Access. Set the appropriate pages.6. Hide the login and forbidden pages from navigation.7. Browse to private page and get re-directed back to Login page
  15. - Talk about Colin’s upcoming Metro Toronto .NET User Group presentation on Web Deploy