This post assumes that you know nothing of creating a page within Umbraco CMS or MVC. By the end of this article, you will understand what a layout is, what a template is and what a partial view is.  

What Came First The Chicken Or The CMS?

In the beginning, there was HTML.  HTML allowed us to create a webpage.  A single webpage is pretty dull, so the concept of a website (many pages linked together came about).  A website was made-up for a load of static files that sat on a server. Each web page contained HTML code for components like the header, the menu, the footer and the content.

Our site is now live and people are visiting it.  Suddenly, marketing decides they want to create a new page on the site to try and sell a new product.  To get this new page 'live' the marketer goes to the websites developers desk and sits with him until the new page has been created with the copy amends.  

If you only need one change every few years this approach is so.  If you want to update your content, or, you work in a larger team this approach is very flawed.

Lets now say the marketer wants the new page to appear in the menu.  As the HTML code to render the menu is duplicated in every HTML web page, this creates an issue.

The developer has to now go back through each web page and manually update the menu code. This is one of the big issues with static sites.. most of the pages are made up of nearly identical duplicated code and in order to make a single change, we have to make code changes in multiple places, which is bad!

As you can imagine, using static HTML for a website with 100 pages doesn't scale, just maintaining the website would take to be a developer's full-time job.  Developers are expensive.  Content updates are also very boring, so it's a loose/loose for everyone.

A second problem is that the only person who can update the website has to be technical.  Most businesses won't want to pay developers to make content changes for them, as its a waste of money. Anyone running a hobby project website won't want to hire a developer full time to update their websites for them, so we need a way to allow non-technical people to update the content of the website. These issues meant companies like Umbraco started developing products to solve these problems, the CMS.

How Do I Create A Website Using A CMS?

When we architect an Umbraco website. This first thing you will need to do is identify the templates. Common examples of website templates are the home page, a content page, a landing page. Each template will represent a type of page that will have similar functionality. Templates make your life as pain-free as possible. 

In coding one of the developers main goals is to strive for no duplication of code.  Following a strict no duplication ethos, will make maintenance infinitely easier throughout the project's lifetime, however, templates alone won't solve duplication issues for components like the header and footer, so what do we do?  We create re-usable components (called partials) that can be used within multiple templates.

If you have half a brain and you are building a new Umbraco website, you'll be building your website using MVC.  In MVC you create components as something called a partial. 

UPDATE: I actually had someone comment about my using web forms statement who seemed upset about my opinion about developers who favor web forms are stupid idiots. MVC has been out for over 5 years and unless you have a very specific business case, or, you have to work on a legacy project... NEVER use web forms. Your code will be ugly, it's not unit testable and it results in horrible HTML.

For example, the footer was previously duplicated in each template, so the footer would be an ideal candidate to move into a partial.  Each template can then call the partial, eliminating the duplicate HTML.

Layouts

At the moment we still have some duplication.  In each template we have a call to render the footer, this is better than having lots of duplicate HTML but we can still do better.

When we work with MVC, you will need to create a 'master layout' file for your website. The master layout will contain the header and footer of the site. Each page templates will then inherit from the master layout, removing the need for you to add a reference to the header and footer on each template.

On the master layout, we will add the things that are the same on all our different pages, specifically the header and footer. We will also need to create the template that will be used to display the unique contents of our page. So to recap, we need a master layer, a header and footer view and a homepage template. In the next post, I'm going to create the master template.

Conclusion

So now I'm hoping you understand the basics of how a CMS came about and the reasons why we structure an Umbraco website the way we do.  The main driving factor was to allow marketers to update the website content.  We then use templates, components, and layouts to make the developers who maintain the sites lives easier. Carry on reading to learn how to build your first template!