Using Umbraco for the first time

by Kev Ritchie 26. November 2010 21:12

Yesterday, I spent a few hours tinkering with Umbraco.  For those of you that don’t know, Umbraco is an Open Source ASP.NET CMS (Content Management System).

Before I ramble on, a little back story for you.

I recently developed a website for my company that dynamically constructed the page content based on data retrieved from a SQL database.  Unfortunately, common in most development projects, the budget didn’t stretch as far as I needed it to Wink

So, the end result a really good CMS base, but no way of maintaining it; well unless you’re a whiz with SQL Server and fancy adding new pages and content through the SQL Server Management Studio.

It wasn’t until a few days ago, a friend of mine; Martin Beeby mentioned that he was looking into a CMS tool called Umbraco.  I was intrigued.

Now back to the present, an IE9 tab opened on Umbraco.org and an eager mouse hanging over the download link.

NOTE: There are two options for downloading.  You can use the Web Installer (which will do all the fiddly bits for you) or you can download the files for manual install.  Follow this link for more detail on the install options: http://our.umbraco.org/wiki/install-and-setup/how-to-install-umbraco-on-windows-server-2008

I chose the manual install option because I like to know what’s going on and how things hang together. 

After following the instructions in the link above, I fired up my browser (IE9 in case you didn’t notice before) and navigated to the Umbraco URL I had set up earlier, the Umbraco Configuration Wizard then appeared.  Part of the configuration was to install Runway (a basic website) or create a blank site.  My choice was to install Runway, the reason being that I could get an idea of what was needed to build a website.

After some familiarisation, I removed the Runway files (Document Types, Templates, CSS and Content).  One handy feature; in light of this, is the Recycle Bin.  If you make a mistake you can get your files back.

So, sitting with a now blank website structure in front of me, I needed to decide what I was going to put in it.  Yes, you guessed it, I decided to port over the website I created for the company.  This was an obvious decision because all the content and layouts had already been done.  All I needed to was a user friendly CMS.  Step in Umbraco. 

Diving straight into the Settings section (above), I created a new CSS file under Stylesheets and copied over the CSS from the other site.  I then created a new master page under Templates and copied over the HTML markup from the other master page.

 

As you will notice in the screenshot above, there are some more templates and also Document Types.  Document Types are extremely important and define the content for your site.  For more detail on this go to: http://our.umbraco.org/wiki/how-tos/working-with-document-types

When creating Document Types you have the option to create matching templates, I went with this as it saves time (well not too much Wink)).  I clicked on each newly created template and changed the Master Template option to the name of the master page I created earlier.  The screenshot  below shows this and also the markup copied from the other website.

You’ve probably noticed some <Umbraco:> elements in the screenshot above.  These relate to controls or objects created for example via the Document Types or the Developer section where you can create XSLT (Extensible Stylesheet Language Transformations) files and accompanying Macros.  In my case, I used XSLT and Macros to control the dynamic building of a list based on the Umbraco Related Links item.

It’s also worth mentioning that every template must have an <asp:content> element and the ContentPlaceHolderID  must match the Id of the ContentPlaceHolder in the master page.  If not, you will get either a compilation error or your content will not appear on the page.

With my CSS, templates, document types, XSLT and macros set up, it was time to create some content.

This was very easy.  I navigated to the Content section, right clicked on the Content node in the tree view and selected Create. 

I gave the new page a name (the name you enter for the page will be used in the URL with an .aspx extension), selected a document type (template) for the new page and clicked Create.  My new page appeared in the tree view (in a dirty state – highlighted by an asterisk) with all the fields set up previously in the selected document type.  Now it was just a matter of entering some content and publishing.

If you’re a stickler for procedures and want some control over what goes on to the web.  Umbraco has a nice permission set that allows you to give users Writer permissions (this means they can’t publish content, only send for approval) and Editor permissions (the ones that do the approving and publishing).  There is also the ability to lock users down to specific sections of the CMS.  So for example, if you give a user Writer permission and lock them down to just the Content and Media sections, they will only be able to create and save content.  So we have procedural control and security, nice Laughing

Final Thoughts

With just the few hours that I spent playing with Umbraco, I was able to move over my layouts and HTML markup and build up the new website exactly the same as the original, even adding more functionality than was possible before.  All this, without reading a single help file, which is testament to a well thought out and designed CMS.

Thanks Umbraco Laughing

Tags: , ,

Web

Comments (7) -

26/11/2010 22:48:50 #

Soeren Sprogoe

Wauv, incredibly nice writeup up first experience with Umbraco!

Seems like you got the basics of the system pretty fast, something which is usually tricky for newcomers to the Umbraco community (there can be a bit of a learning curve with the system, if you don't get the basics right).

PLEASE do keep writing posts with your initial experiences, both when it comes to success and problems! This will help the community a whole lot.

Soeren Sprogoe Denmark

26/11/2010 23:39:00 #

kevinritchie

Thanks for kind comments Soeren Smile

At some point I'll be migrating the whole company website to Umbraco.  I'll post back and let you all know how I get on.

kevinritchie United Kingdom

29/11/2010 01:42:46 #

Aaron Powell

Hey Kevin,

Nice write-up for people who haven't looking into the effort involved for moving an existing site from an in-house CMS (or no CMS) into Umbraco.

One thing I'd suggest that would be handy for people looking at this article is how you found the extensibility experience (ie - making macros) and how you came to the decision of going with XSLT vs .NET vs DLR script.

All-in-all nice post and welcome to the dark side Tong

/Aaron Powell (aka slace)
Umbraco CMS core team member

Aaron Powell Australia

29/11/2010 10:13:09 #

Hartvig

Kevin, thanks a million for posting this - it's exactly the experience that we're working hard for. You made my day!

And as the rest says - do keep posting your experiences and thoughts! We'll be watching you Wink

Hartvig Denmark

29/11/2010 11:06:47 #

kevinritchie

Thanks Guys,

I'm really new to this blogging thing, so thanks for the encouraging comments.

Aaron, that's a good idea.  As soon as I start moving the whole site into Umbraco, I'll add that in Smile

For anyone who would like to know why I chose Macros and XSLT in Umbraco, the reason is simple, out of the box there is very little modification needed to get it integrated with your site; it just works.  I will expand on this later, so don't worry ;)

kevinritchie United Kingdom

25/03/2011 05:23:16 #

Jasmin


Hi,

I did all these steps and my page is also created but my issue is with the button click(not postback) and pagination in Grid are not working.Please help me.
Thanks in advance.

Jasmin India

25/03/2011 16:51:52 #

Kev Ritchie

Hi Jasmin,

I've not used Grids within Umbraco myself, but would suggest that you head over to http://our.umbraco.org/ they have a great community there, that will be able to help you.

Kev Ritchie United Kingdom

Pingbacks and trackbacks (1)+

Comments are closed

Powered by BlogEngine.NET 2.5.0.6
Theme by Mads Kristensen | Modified by Mooglegiant