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