Introduction
Some months ago, I've started to work with Umbraco. First I've tried to understand how it works and what do I need to know in order to implement good code with Umbraco, but actually it took more time than I've imagined.
The reason is Umbraco is very flexible which makes it easy to work for content managers, front-enders, and us (C# developers, back-enders, full-stack developers). You can easily implement lots of stuff inside Umbraco without needing any IDE and there is no need to implement a controller, service or anything. So if you are using it to implement a simple website that doesn't need that much code implementation or software structure, there is no need to read my post :)
As a developer why do I need Umbraco (or any CMS)?
If you want to develop some code on Umbraco, you probably have some user specific scenarios that you need to implement in your code and at the same time, you want to give some flexibility to the editors to use your structure and their creativity to make good content. For instance, recently I needed to create a rule engine in a project. It took me only a couple of hours to implement 4 different rule type, setting the consumers up and adding them to my pages. only 2 hours from A to Z :)
Where to start?
There are some videos in
http://umbraco.tv/. Start from there and learn the structure of Umbraco and how it works. It is Then come back and continue this post :)
You will learn:
*What is Umbraco's back office
*How to create content types
*How to create templates
*How to create content like pages
*How to set up surface controller ( a controller with access to Umbraco Stuff)
*How to set up a service
You will not learn:
*What is going on in Umbraco
*The project structures for different kind of projects
*Relating different stuff
*Working with Strongly Typed items! Yeap,
Beginners stuff in short
Installing
Creaete a new visual studio empty asp.net solution. Then go to nuget package manager and add UmbracoCms.
This will add the Umbraco files. Now click F5 to run the project and then continue the wizard to create your stuff inside your DB. for the matter of your test project, you can go on with the DB file and when you want to publish your solution on test/production environment, you can easily set up the SQL server to use the DB like any other ASP.net project.
Umbraco Back office:
The place that you can go and change stuff, create content type, create content and everything that is possible through a CMS.
You can go to your back office by adding an Umbraco to your sites url:
www.yoursitename.com/umbraco
Creating Content Type:
It is obvious from its name :). It is basically your model/class definition. There are 2 different types of content types,:
1- With template: meaning that you want to show them to people like your pages.
2- Without template: when you don't want to show anything for that single item. like your settings, etc.
You can create content types by going to settings> content types and create your type. Just click on ... in front of the content types and select what you want.
Then add your fields to your type. and click save.
For instance, let say that you want create a page to read my data from my text box in back office and write it to my start page. I will create a document type, and will call it something like "Test Doc Type".
Pay attention that Umbraco will change the alias of everything by removing the spaces and lower-casing the start character for the name.
Click on add property and then fill its name, then select the type of the box that you want to show to your user in back office (not the viewer!). for instance you can select a rich text editor.
This will let the user to put some text with good rich text tools (tiny MCE to be more specific). you can select options and then save the form.
Editing the view
Open your templates and find the template with the same name. (if you cannot see it, right click on the templates and click on reload).
This is your Razor View. You can do what ever you want in this view. You even don't need Visual studio to create/edit templates.
You have different option to working with views. One of them is working with "dynamic" data type in C#. Write this code inside your view and you will be fine:
@using Umbraco.Web
@using Umbraco.Web.Mvc
@inherits UmbracoTemplatePage
@{
Layout = null;
}
< h1 >@(CurrentPage.YourFieldName != null ? CurrentPage.YourFieldName: "")< / h1 >
Easy right?
There is also one other way which is working with properties:
@using Umbraco.Web
@using Umbraco.Web.Mvc
@inherits UmbracoViewPage
@{
Layout = null;
}
< h1 > @(Model.HasValue("YourFieldName") ? Model.GetPropertyValue("YourFieldName") : "")</ h1 >
Both codes work fine. and since there is no compilation, there is nothing that important to differentiate.
In later posts, I will show you how to work with strongly typed models inside Visual Studio (view/controller/services) but for now, set up your first page this way so you can see a sample page in Umbraco.
For additional data, you can take a look at this post by
Dave Woestenborghs:
http://24days.in/umbraco/2015/strongly-typed-vs-dynamic-content-access/
Adding page to your site
Go to your content tab right click on "content" and click create to create a new page. Select your type and click create. Now give your page a title, and fill your field, then click save.
Now go to your base address to see your page.
Congratulations, you've just created your first Umbraco site.
