Getting Started with Umbraco: Part 1

Umbraco can be installed very quickly and easily. Even better, it comes with many features straight out of the box. For example, it's possible to build an entire site without delving into the code yourself, simply by using pre-built templates and the back-end CMS. But for us developers who like to get our hands dirty, websites can also be coded completely from scratch. In this series, we'll be creating an entire site ourselves from scratch, because where's the fun in having it all done for you, right?!

Also available in this series:

Things We Will Need:

Umbraco: We'll need Umbraco itself, the downloadable zip file can be found at: http://umbraco.codeplex.com/releases/view/59025
IDE: We'll also need a .Net IDE, ideally we can use Visual Studio, but Microsoft's Visual Web Developer (VWD) Express, which is free, is just as good for our needs here. This application can be installed, along with the necessary dependencies using the Web Platform Installer (WPI), found at: http://www.microsoft.com/express/Web/
SQL Server: Once SQL Server 2008 has been installed, we'll need to grab the Database and Management Tools; these are found on the Express Downloads page at http://www.microsoft.com/express/Downloads/ (make sure the SQL Server 2008 R2 Express tab is selected and choose the correct type for your operating system (32 or 64 bit). When installing SQL Server, ensure that mixed-mode or SQL authentication is selected and enter a password to access the server. The default user name is sa, this is required when installing Umbraco. Note that Umbraco is compatible with a range of different database solutions; we're using MS SQL here because it is likely (but not guaranteed) to be the database type in use on a professional .Net hosting service and so should make migration of the database and content from local development to live server easier.

OK, downloaded and installed VWD Express and its dependencies? Run the separately downloaded SQL Server executable? Restarted your machine? Good, let's make a start.

Step 1 - Setting Up The Site And Installing Umbraco

Open up VWD and click the New Web Site option from the side-bar at the left of the start page. Choose Visual C# from the Installed Templates section in the left column of the New Site dialog, ASP.NET Empty Site from the central column, and choose an install location somewhere on your machine. I created a new folder called .netsites and then created another new folder within this called umbracosite. Once the site has been created and opened in the main VWD window, make sure you change the Virtual Path option in the Properties pane from /umbracosite to / (this is the root of the site).

We'll also need a database which will contain all of the Umbraco information needed to make the back-end work, as well as all of the content that we create once the site is built. There are a number of data sources we could use, but as the WPI will automatically install SQL Server Express, we may as well use that. Create a new database using the SQL Server Management Studio and call it something like umbracodb or similar. Make sure you can connect to the server using SQL authentication with the username sa and the password you entered during installation.

Next, open up the Umbraco zip file, then open the build directory and copy all of the folders and files into the folder for the site we just created. Make sure you replace the web.config file when asked to do so. Once this is done, switch to the Solution Explorer tab in the Solution Explorer pane at the right and hit the refresh icon. All of the folders and files we just added to the folder will be listed. Expand the install folder, right-click the default.aspx file and choose View in Browser. This will launch the Umbraco installer in your default web browser. Click the giant Let's Get Started button to make a start.

The first screen is the license screen; have a read though it (it's just a few lines!) and then hit the Accept and Continue button at the bottom. The next screen will ask if you have a blank database installed, choose Yes and then select Microsoft SQL Server from the drop-down list box. On the next screen enter the name of the SQL server (probably Desktop), the name of the database you created, the username (sa) and the password you use to access SQL Server. Click the button. The tables used by Umbraco will be created in the database.

On the next screen choose a password to access the Umbraco back-end. The default username of admin is fine for local development, and additional admins can be created when the site goes live. Click the button.

On the next screen you can choose the type of site you are creating, which will give you a kit tailored to that type of site. For us techies, we probably want more control than these starter kits will give us, so hit the No Thanks button at the end and confirm the dialog. That's it, we're done! Click on the large Set up your new website button and we should be prompted to log in to the Umbraco back-end using the username and password we specified during install. Once we do this, we should see the back-end of the CMS:

The left-hand panel at the top is the node tree; this is where all of the nodes (the different pages and content items) that make up the site are displayed in the default view. This will change depending on which section we are in. The different sections are accessed via the bottom panel at the left. In the right hand area we will see the different tabs, properties and content items for each node in the default content section. Again, this right hand area will change depending on what we have selected in the node tree.

Step 2 - Defining Document Types

The first stage in creating an Umbraco site (after installation of course) is defining your document types.

These are very important and are difficult to modify later on, so it is worth spending some time planning the document types you need and how they are going to fit together. But what are document types? Quite simply, they specify the different types of documents that your site will be made up of and the hierarchy of these documents, i.e. how they nest.

Document types define the visible pages of your site, for example, your site is likely to be made of a range of different types of page, such as the home page, content pages, news pages, and probably others. But they also define what editable content regions or fields the administrators for the site have in the back-end CMS.

So for example, the home page may have an introductory text area, a banner image, and a content slider or hero-panel explaining what service(s) the site provides, or the products made by the company, etc. Of course, the page is likely to have lots of other elements on it as well, such as header, a navigation menu and a footer; but I'm talking about content items, the editable content stored and managed by the CMS.

Each of these different areas of the page will map to different regions in the back-end, so the introductory text on the home page would map to a rich text editor in the back-end and the banner image to a media picker. The different panels in the content slider could even map to a specialised document type that does not relate specifically to a whole page.

Let's create some document types now as this will give you a much clearer picture of this extremely important concept. First click the Settings link in the Sections panel (bottom-left), the right-click Document Types and select Create:

In the dialog that appears choose Base Page as the name and then click the Create button. A new node for our document type will be created in the main left-hand node tree, and the property sheet for the Document Type will be displayed in the main panel at the right:

As you can see from the above screenshot a matching Template has also been created and has been added to the Allowed templates section in the right hand panel. The Default template for this Document Type has also been set to Base Page. We'll look at templates in more detail shortly but for now just know that they map to .Net masterpages.

There are a series of properties that we can complete if appropriate. We can nest Document Types so it can be useful to set some general properties that any child document types will inherit. Switch to the Generic Properties tab and select the item that says Click here to add a new property to expand the item. In the Name text field enter the text Domain Name (the Alias will be populated automatically), and in the Type select box choose Textstring:

To add the new property click the save icon (the disk) at the top of the panel. Now any Document Types that are derived from Base Page will inherit the Domain Name property (although it will not be editable). Add one more property to the Generic Properties tab; the name is

Umbraco Hide In Navigation