How To Architect Your First Umbraco Page

This post assumes that you know nothing of creating a page in Umbraco 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. These are the fundamental concepts of creating your first page, that you can use in the real-world.

In the beginning, there was HTML, a website was made-up for a load of static files that sat on a server. Each page contains a header, a menu, and some content. Suddenly, marketing decides they want to create a new page, this means a developer would have to copy an existing file and change the content. This leaves us with a second problem, the menu is now out of date and needs updating in every file. The developer now has to go back through the other pages and manually update the header on each one. 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 changes to code in multiple places, which is bad!

As you can imagine, using static HTML for a website with more than 10 pages doesn’t scale, if your website had 100’s of pages keeping the site consistent would be impossible, or a full-time job.

A second problem is that only a technical person who understands HTML and CSS can make any text changes and upload them to the server. Most businesses won’t want to pay developers to make content changes for them, as its a waste of money. Anyone running a personal 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.

Companies like Umbraco started developing CMS solutions to help tackle problems like these ones. 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.

Now we know we need to create a template, we should go back and address the duplication issue in bit more detail. One of your main goals when building any Umbraco website is to have no duplication of code. Following a strict no duplication ethos, will make maintenance infinitely easier throughout the project’s lifetime, so how do we do this?

As mentioned above on each web page we will have some form of menu or navigation. We don’t want to repeat this on every page, so this component is a prime candidate for turning into a reusable component. In ASP.NET terms if we were working with web forms, we would create a new user control for the menu. If you have half a brain, you’ll be building your website using MVC so you will be using a partial view instead.

As your website grows in popularity, your fanbase start to ask for something more than just a menu and some content… they want to see copyright information and possibly some links on the bottom of every page. As above we would put the footer in a partial view to avoid duplication, although now we have to update every template to include the footer. Anytime you need to add something more than once, you’re breaking the NO DUPLICATION rule.

Before we start to think about creating our first web page, we need to get our page designs and figure out which parts of the pages that are different on each page (typically the main content (only stupid idiots would consider using web forms in 2017) and in MVC a layout.

So now I’m hoping you understand what we need in order to create our first Umbraco web page. We need a master layout that will be the first thing that gets loaded when our page is loaded. 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.

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

More Posts

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *