How To Architect Your First Sitecore Page... Sitecore Fundamentals Explained
This post assumes that you are completely new to CMS development and that you don't know anything when it comes to creating a page in Sitecore. By the end of this article, you will hopefully have a basic understanding about how to convert a design into Sitecore items.
Introduction To CMS DevelopmentLet's start at the very beginning, in 1990 HTML was released, HTML was a major break-through to allow people from all around the world to view information. Businesses quickly jumped onto this trend and started creating websites to promote themselves and sell goods. These original websites were made-up for a number of static HTML files that sat on a server somewhere. Pages, like their equivalents now, contained a header, a menu, and some content. This architecture had many flaws, the main one being updates. If the marketing department wanted to create a new page, the process to release this, would involve a developer manually copying an existing page and changing the content. Asides from the obvious resourcing issue, where the developer, who in the terms of cost is pretty expensive, had to spend a chunk of their time maintaining content. This process also had another fairly major flaw, duplication. Whenever a new page was created, the menu HTML code in all the other pages would need updating. Whenever a release was made, a developer not only had to release a new file, he would also have to go back through all the other existing pages and manually update the header on each one. This second issue 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 HTML changes 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. This issue is how Sitecore came into existence. The CMS was conceived to primarily tackle these two problems. This is how we get to our first major concept that we need to consider when building a web page in Sitecore, we need to design our site so non-technical people can update it. We also have to design a system that has no duplication. Content editors shouldn't have to add in the same code on each page and common component like menus should work programmatically without manual intervention. Now you understand the two main guiding principles of Sitecore design, we need to start thinking about how to create a page within Sitecore.
How To Build It In Sitecore?If this is new to you, then now is probably the good time to have a quick recap,:
- We need a master layout to display the header, footer and all other common HTML like the <head> section, CSS links etc...
- We will need to define several data-templates within Sitecore. The data-templates will define the fields and properties that content editors will see when they try to create pages. In our simple page example, we will create a 'master' data-template that will contain properties that will define common properties that will appear on every web page, like the page title, meta-description etc.. We will also create data templates for each different page type. So we'll create a homepage data template, a landing page data template and another one for a content page.
- Content. The concept of content should be easy to grasp, these are the objects in Sitecore that represent your pages. If you think of data-templates as classes in C#, you can think of content as instantiating that class and adding data into it, in order to create pages within Sitecore.
- Placeholder. Placeholders are a slightly more advanced concept than I want to go into in this guide. Layouts can be thought as a means to allow a content editor to have more control over how a final page will look.