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 Umbraco community.

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.

Create a 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".

Create a new Visual Studio project

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.

Umbraco CMS 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 CMS first setup screen

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 CMS login area

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.

Umbraco CMS core features flow diagram

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 CMS 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".

Umbraco CMS 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 CMS 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.

Umbraco CMS 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.

Umbraco CMS add new content example

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 CMS 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 first 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!