Why and How to Use the Umbraco Content Management System

“Dear Webmaster, please update our ‘About Us’ page. Yours sincerely, Customer.”

If you have ever built a website and receive this request all too often, it might be time to consider a content management system, also referred to as a ‘CMS’. Commonly built using a SQL database and a server-side scripting language, a CMS can give the content editor more control over their website.

Why Umbraco

Umbraco is a free and open source CMS that is built using Microsoft technologies such as ASP.NET, C#, SQL Server and also makes use of the familiar Model View Controller (MVC) approach.

It was first released in 2005 and is used by thousands of websites on the internet, many of these including international brands and is often used by Microsoft for their own websites.

You can view full documentation at the official Umbraco website, download the latest source code on GitHub, or become a certified developer by attending one of their training courses. There is also the CodeGarden conference for learning about the latest announcements and interacting with the community, as well as uSkinned for downloading responsive themes ready for your new project.

How to Install Umbraco

We will use Visual Studio 2015 to create a new solution and install Umbraco using NuGet, a package manager by Microsoft that is integrated into Visual Studio. There are other methods, but using Visual Studio will let us easily create unit tests and integration tests to support our website.

New Visual Studio solution

In this tutorial we will be installing Umbraco 7.5 into a new Visual Studio “Project” and will target .NET Framework 4.5.2. If offered to use a project template, we will want to select “Empty”.

New project in Visual Studio

Once there is an empty project, we will use NuGet to install the latest version of Umbraco. In Visual Studio 2015, click Tools > NuGet Package Manager > Manage NuGet Packages for Solution. We will search for the “UmbracoCms” package and install it into our new project.

UmbracoCms in Nuget Package Manager

If the package has been installed correctly, the Solution Explorer in Visual Studio should now consist of new directories and files for Umbraco. Because the source code is now on your local machine, we can use the keyboard shortcut “F5” to launch the application in IIS Express for Visual Studio.

Umbraco install Customize button

Once you have entered your personal information, click “Customize” to enter your database settings. It is recommended to select “Microsoft SQL Server” if you plan to use Umbraco in a production environment. You must install SQL Server 2016 Express and SQL Server Management Studio to create and use a local SQL Server database.

Once you are ready, enter the connection and authentication details of your database of choice. Umbraco will automatically create a new connection string in the “Web.config” file.

For this tutorial we will not install a starter website in order to demonstrate an empty Umbraco install, but if you would like a basic template to build on this can be a useful feature.

Once the installation is finished, you are now ready to start using Umbraco!

Umbraco backoffice

Understanding Umbraco

Umbraco can be scary at first, because of this it is helpful to understand the architecture and the core features used to build a website for a content editor to manage. You will first need to tell Umbraco what it is a content editor can update before you can begin to publish content.

We will use the Umbraco core features “data types”, “document types” and “templates” to build a basic website and learn how these features interact to help the content editor.

 

Data Types

For a content editor to be able to update a website, we need to tell Umbraco what elements of a page can be updated. If a page consists of a header, a paragraph and an image, these all need to be setup as separate “data types”.

If you navigate to “Developer” in the Umbraco menu, you will see the folder “Data Types”. In this tutorial we will use the data type “Richtext editor” for a paragraph and “Textstring” for a header.

It is useful to know where these are located, but to use data types we will continue to the next part of this tutorial.

Umbraco Data Types

Document Types

The “document type” is the centre of the Umbraco universe. It is the “Model” equivalent in the “MVC” design pattern and is where we decide what “data types” are used on a page.

If we know our “About Us” page will contain a header and a paragraph, we can create a new document type and assign the two data types “Textstring” and “Richtext editor”. This will enable a content editor to create a page using this document type, and enter their own content.

If you navigate to “Settings” in the Umbraco menu, right click on “Document Types” and click “Create”. Umbraco will ask us to create a new item, so we will select “Document Type”.

New Umbraco document type

Enter a name, for this tutorial we will use “Default Page” and continue to “Add new tab”.

We will want our “Textstring” and “Richtext editor” to appear in a section of their own, so we will enter a name for the tab and continue to “Add Property” to add in our data types.

Notice that once a new property is added to a document type, an “alias” is created to reference the property. The alias is the name of the property in camel case and we will come to use these shortly.

Once finished, our new document type should look similar to the below.

Umbraco document type example

Templates

The “template” in Umbraco is used for HTML that will be displayed to our visitor. It is the “View” equivalent in the “MVC” design pattern, and is just that… an ASP.NET MVC View.

If you create a new template in Umbraco, it will be created as a “.cshtml” file in the “Views” folder. Because of this, we are able to utilise the important ASP.NET feature, Razor Markup.

Umbraco will create a new template automatically when a document type is created, unless you tell it otherwise, so let’s find our template located in “Templates” in the “Settings“ menu.

Because we want to output what the content editor has entered, we will use Razor to reference the data types we assigned in our document type. It’s time to put those property aliases to use…

Let’s update the template by inserting this HTML snippet.

<h1>@Umbraco.Field(“title”)</h1>
@Umbraco.Field(“body”)

Umbraco template example

Content

We have used the core features in Umbraco to create the structure of our website. This will enable a content editor to update the website without the need to contact a web designer or developer.

It’s time to create our homepage by using the “Default Page” document type and its associated template. Let’s navigate to the “Content” menu in Umbraco and as before, we will click on “Create” to choose a document type.

Add new content in Umbraco

If you have used the data types laid out in this tutorial, you should see a similar content editor as below. We’ll add in some basic content and click on “Save and publish” to save the new page to Umbraco and make it visible to any visitor to our website.

Umbraco content editor example

Now that our page is created, you will be able to see it in the Content area in Umbraco, and the content editor can login at their leisure and make any change they would like.

Let’s go to the homepage and see what Umbraco has helped us create...

Example of basic Umbraco website

Conclusion

Umbraco is a content management system with many useful features, and this tutorial has intentionally only mentioned a few to get you started.

Hopefully you should now have a good understanding of Umbraco and enjoy using it’s many features to build websites for the content editor. Thanks for reading and enjoy using Umbraco!

10 Years as a Professional Developer

It was 2006 and the developer landscape was very different. Facebook wasn’t yet popular in the UK, Internet Explorer 6 was still the dominant browser and the iPhone was nowhere in sight.

CSS (cascading style sheets) was the new language back then and the majority of websites were still being built using a table structure to create the layout, this is something that isn’t even considered these days.

I’d been learning to build websites for a couple of years and was just about to finish at Glasgow Caledonian University where I was studied "Internet Software Development". Just about all I was interested in at the time was working for someone that would let me update their websites, anything else was a bonus.

Internet Explorer 6 on Windows XP

Internet Explorer 6 on Windows XP

You’re Hired

It was approaching graduation and I was eager to get out there and start pursuing my passion. I printed off a few screenshots of websites I’d built and sent them off en masse to anywhere that piqued my interest. I thought I would be waiting ages but to my surprise, I got a reply!

A local non-profit asked me to come in for an interview and told me to bring ideas for their website. Being young and naive at the time, I stupidly read this as “please re-design all of our homepage”. I’m not the best at design, so at the very least it was an ambitious feat.

I hadn’t had worried though, I got it!

Based on the design for the interview I was told I could come in for 3 months and modernise the website. I managed to introduce CSS, a modern layout and to my surprise at the end of it I was able to stay on full time!

Over 5 years I got to work in trenches, learning ASP, ASP.NET (Web Forms), SQL Server and Windows Server. I also got to learn JavaScript before libraries like jQuery made things like DOM traversal, event handling and Ajax easy-to-use.

Jack of All Trades, Master of None

The majority of my experience so far seemed to be in Microsoft technologies, but I didn’t see it like that. Apple was beginning to hold my attention, as was the open-source scripting language, PHP. Mac OS X was far superior to Windows Vista at the time, and I could use it to learn PHP (the language used by Facebook) in projects I was working on at home.

It was actually fun to learn one skill at the office and another at home, but I could see I was at risk of becoming a jack of all trades, master of none. Something had to change.

I decided to go back on the market and start looking for new jobs. It was a long time, and a lot of interviews, before I finally heard back. I was going to be a PHP developer!

You’re Fired

Starting in a new job after 5 years is a big change for anyone. I was also in the private sector and it seemed a lot more intense than what I was used to, it was all changing so fast.

Over 9 months I built up my PHP knowledge by working on a “customer relationship management system” and I also got to help out on their websites built in WordPress. It was great being part of such a small business, you really can make a big difference.

The business had planned for growth, but to my knowledge this didn’t happen. 6 years into my career and I was suddenly told I was going to be made redundant, it was an eye opener!

What do you do in this situation? Go back to familiarity, or start afresh?

I’d left my last employer on good terms, so I decided to see if they would have me back. In addition to emailing my first boss, I thought I would try and see what else was out there.

What interested me was a digital agency that used PHP, ASP.NET and SQL Server for clients including Disney and Royal Caribbean. I thought, why not apply for both? It can’t hurt, after all I was now unemployed.

Somehow, I managed to get interviews for both and in the end had the choice of either! I really wanted to join my old workmates, but I just couldn’t turn down the chance of working at an agency.

Hello, Microsoft!

I jumped head first into my new surroundings and was made responsible for a PHP e-learning platform for Royal Caribbean. There were new features to plan out, code to write and bugs to fix, it was great!

Supporting one PHP application was sufficient in the beginning, but the majority of their websites were built in modern ASP.NET using MVC and C#, all technologies I hadn’t used. I was beginning to feel like my days as a “PHP specialist” were numbered.

Being encouraged to learn new technologies had a major impact on me. I will always remember the phrase “if you don’t enjoy learning, you’re in the wrong job”. If you are wanting to get a lot of experience in a short amount of time, look for a digital agency.

At this point I was starting to explore the Microsoft community and was pleasantly surprised by the amount of useful resources out there. People like Scott Hanselman, Shawn Wildermuth and Paul Thurrott, as well as the podcasts .NET Rocks and Hanselminutes are all ones to check out.

It’s really helpful to go on a training course when you admittedly know nothing about a subject. I went on a 3-day course by Hands on Technology and got to learn all about Visual Studio, the IDE by Microsoft, the “MVC” approach (model, view, controller) as well as an introduction to C#.

If your company is going to send you on a training course… you should probably start to use your new knowledge. Luckily a new project for Disney was about to start, so I jumped at the chance to work on it.

The holiday period was approaching and a website was to be built for parents to book a call for their child to receive a Christmas message by Mickey Mouse. Having visited all the Disney parks in Florida, and being a fan of all the classics, this was right up my street!

We needed it to scale up to one million users for Christmas day and I can remember being paranoid it was going to crash. I couldn't possibly comment on the magic we used to talk to Mickey Mouse, but it involved a SQL database to store all the requests, an API to send out calls and a load-balanced server to handle all the traffic. We all breathed a sigh of relief when it all worked, and so far, this might just my career highlight.

I volunteered for a photograph for a Disney promotional campaign

Volunteering for visuals for a Disney promotional campaign

Conclusion

I'm still enjoying using Microsoft technologies today and it just keeps getting more interesting. Open source, cross-platform and mobile support, it's a great time to be a developer.

I think the hardest part is to try and determine what to learn and what to ignore, you can’t learn it all but you can’t limit your knowledge too much either.

I would encourage anyone out there to find out what they’re passionate in and just keep focusing on it until it becomes a reality.