Introduction
This is a basic how to on how to make a basic CMS application with some basic data Models
Background
I was given a task at work, to learn an open source CMS framework. I found Umbraco as the easiest to set up within Visual Studio.
Using the code
The Code will show you how to get Umbracco from Nuget set up the necessary folders in the solution and how to use the back end of Umbraco. I chose to make an application that covered the Elements with in the Periodic Table. The reason for choosing the periodic table is the fact I can set up some classes and List of Classes to utilize as my data in Model. i probably have got some elements of classifying the Transuranium Anticides wrong, but I was never a Chemistry Major!
Start
The first Part of the program is to load an empty web Application in Visual Studio.
After you empty solution is open you will need to got to the Tools Menu open the Nuget Package Manager and run the Package Manager Console and enter the line of code below in the console line.
Install-Package UmbracoCms -Version 7.4.3
This will load up the content that is need ed from Umbraco. The Solution will still look blank, or you might just see your references have grown. Stop the application and go over to the solution explorer and click show all files. The solution explorer should look a little like the below Image.
Include the App_Data and the two Umbraco folders in the Project. For good practice create a database, for Umbraco, as you will need to configure a database in the set up. I have just added an 'mdf' file to the App Data Folder. After adding the DB and including the two Umbraco folder restart the project.
Solution Folders
Umbraco Login
After the restart the first screen one will come to is a login screen as shown below:
On the this Screen create your log in details. and press Customize, you will come to the Database screen and use the connection string option to input your databases connection string.
Umbraco DB Set up
After setting up your Database you come to a screen to install a starter kit. The choice to do so is entirely yours. It is advisable on your first Application to use one of the Starter kits, as you are given a very simple application you can take apart and build back up, and gain an understanding of how this framework works.
In taking the starter kit the components are in place and you can build out from here.
The Folders that are most critical to the Applications appearance are in the Views folder.
Views Folder
The Master is your main html template file, this master renders 2 partials view for the top Navigation bar, and a bottom Navigation bar (which are seen above).
If you chose the Fanoe Start Kit the main page is rather large and at the top part of the page will look like so:
Home Page and Partial Views
The bottom navigation which is rendered in the partial view looks like so.
The page above is the Home Page, to edit this page and make a new Home Page we now need to visit our settings and content area.
To access the content and settinsg you will change the address in the browsers address bar by adding a reference to the Umbraco directory. The address bar should look like so http://localhost:'YOURPORTNUMBER'/umbraco.
Your settings screen will initially look like so:
Content Page
Umbraco Navigation
On the SideNav I have all my options to make and administer the content, the Orange U is the area to amend the Users Umbraco settings.
The Page Icon is the applications content panel. This is where the User will go to create Content.
Below Content, is the Media Panel where the User can add the necessary media for the applications content.
Below Media, is the Spanner/wrench Icon which is the Settings area. This is where the User can create the document types and template for the content we wish to create.
The Cog/Gears Icon is a developers area which will not be covered in this article.
The Person Icon is the Users Area which will let an administrator set User settings for those set up to use the content management system.
On the installation you are by default set up as an administrator. The User section will let you set up what privileges and restrictions one wishes to put upon a User.
The last two Icons are Members and Forms which are beyond the scope of this article.
Content Editing
On the Content Panel there are two List items one is the recycle bin and the other is Home Item. On clicking Home Icon the contents of the Home page is displayed and made editable. The below image shows a Banner object and two rich text editors with the given Content from the application.
Clear all the content to leave just the empty frames of banner object. To delete or change the content just click on the area you wish to amend and content object and delete bin should appear. There is also a plus Icon below the last content object that will allow you to add further row content.
Below is an image of the Banner Objects 3 Rich Text Editors and Headline which have had their original content amended.
Amended Content
If you preview you changes the new Content should look like so.
Content Rendered
The content we see above is our two navigation rendered views and our main content, which we are slowly stripping down to be rebuilt. The next task is to add some content to the home page and then amend the navigation bars.
Changing the Navigation Bar
After amending the content of the home page, I will need to access the home page on the Content Panel and delete all the content below Home so the App will be just one page. All you will need to do is hover over the pages below home right click on the settings dots on the far right and press delete, the the pages will be gone and the menus blank.
On the home page you may notice a background image, this can be removed by going back to the content area for the home page banner object and pressing the settings cog on the banner object and the picture will be on the far right of the screen. There is a red 'X' icon click that and remove the picture. The page should now now have a plain white background.
The last part of the home page clearance is tidy the bottom navigation of the find us content. This content is found in the bottom navigation partial view. The content of the Div should be deleted; this can be done in in the View Folder under the partial views sub folder, or in the setting panel under partial views.
<div class="col-xs-6 col-sm-3">
<strong>Find us</strong>
<ul>
<li>
<a href="https://twitter.com/umbracoproject" target="_blank">Twitter</a>
</li>
<li>
<a href="https://www.facebook.com/Umbraco" target="_blank">Facebook</a>
</li>
<li>
<a href="http://umbraco.com/?utm_source=core&utm_medium=starterkit&utm_content=topic-link&utm_campaign=fanoe" target="_blank">Umbraco.com</a>
</li>
</ul>
</div>
Main Page
For the main page I am going to describe the element categories of the periodic table. I have used the descriptions of each Category from the Los Alomos Labratory.
The website is here http://periodic.lanl.gov/index.shtml
In the Banner Headline add a title, by just clicking on the Headline. In the 3 columns below the the Headline I added some rich text editors and placed in the descriptions of what each type of element was. i took reference from the descriptions here. The image will have have a css class after loading the page go to inspect element in the browser and take note of the CSS class and its line number. You can find the CSS file in the Stylesheets section of the settings, or again in the CSS folder of the application. Using this method you can navigate yourself around the CSS to customize the application further.
http://periodic.lanl.gov/metal.shtml
After one has added the content to Banner columns one needs to go to the addition button below the Banner object and keep adding the content format as you see fit. In this application I will repeat the three columns row content until I have each description of the elements type.
Settings Adding Pages
The Menu above is the key to adding pages which become the content. The 'Home' document type has been set as a root directory. In being set as a Root Directory I can add this and its' child nodes as content.
Creating the Child Page
From the Settings Menu I will need to right click the three dots to the right of Home and press create, and choose Document Type. This will create the page with a Grid Layout, a template and a corresponding cshtml file.
Once the templates appears go to the top of the page and give the page a name.
After naming the document save the Document Type. We will then need to go to the Home Document Type permissions area and add this page as child of Home.
After this one will need to go back to the Content Area and right click on Homes three dots and open up the create option. You should be able to create and instance of this document type in Content.
Click the New Document Type and you should come to the screen below.
This should be repeated until you cover all the Types of elements of the Periodic Table.
You should be left with quite a few partial views that are blank. These partial views will now be used to relay the data from the model and controller to display the type of elements. For this we will need to create our Models and Controllers.
Model
For the model I will need to add a folder to the application, the same also bodes for the Controller.
For this Created 3 class of Elements, The first Class is one called chemical which is shown below. The class just carries some basic info on the Element. The reason for the extra classes was that when I came to the heavier elements some of these properties did not exist. From this came the AtomTM class. The Actinide class was also split into two as it had some heavier elements that did not have all properties of all other elements, plus there was an additional property of certain elements being Transuranium, and other not being Transuranium.
namespace periodicTable.Models
{
public class Chemical
{
public string name { get; set; }
public int atomicNumber { get; set; }
public string atomicSymbol { get; set; }
public double atomicWeight { get; set; }
public double atomicRadius { get; set; }
public double meltingPoint { get; set; }
public double boilingPoint { get; set; }
public string radioactive { get; set; }
}
}
namespace periodicTable.Models
{
public class Actinides
{
public string name { get; set; }
public int atomicNumber { get; set; }
public string atomicSymbol { get; set; }
public double atomicWeight { get; set; }
public double atomicRadius { get; set; }
public double meltingPoint { get; set; }
public double boilingPoint { get; set; }
public string radioactive { get; set; }
public string transuranium { get; set; }
}
}
namespace periodicTable.Models
{
public class AtomTM
{
public string name { get; set; }
public int atomicNumber { get; set; }
public string atomicSymbol { get; set; }
public double atomicWeight { get; set; }
public string transUranium { get; set; }
}
}
After the Class I created two more class which where list of Class which provided the data for the tables in the view. These List become the Models and provide the data for the tables.
public List<Chemical> GetAlkMetal()
{
var elements = new List<Chemical>
{
new Chemical
{
name = "Lithium",
atomicNumber = 3,
atomicSymbol = "Li",
atomicWeight = 6.94,
atomicRadius = 181,
meltingPoint = 180.5,
boilingPoint = 1342,
radioactive = "No"
},
new Chemical
{
name = "Sodium",
atomicNumber = 11,
atomicSymbol = "Na",
atomicWeight = 22.99,
atomicRadius = 227,
meltingPoint = 97.8,
boilingPoint = 883,
radioactive = "No"
},
new Chemical
{
name = "Potassium",
atomicNumber = 19,
atomicSymbol = "K",
atomicWeight = 39.10,
atomicRadius = 275,
meltingPoint = 65.5,
boilingPoint = 759.0,
radioactive = "No"
},
new Chemical
{
name = "Rubidium",
atomicNumber = 37,
atomicSymbol = "Rb",
atomicWeight = 85.47,
atomicRadius = 303,
meltingPoint = 39.3,
boilingPoint = 688,
radioactive = "No"
},
new Chemical
{
name = "Cesium",
atomicNumber = 55,
atomicSymbol = "Cs",
atomicWeight = 132.9,
atomicRadius = 343,
meltingPoint = 28.5,
boilingPoint = 671.0,
radioactive = "No"
},
new Chemical
{
name = "Francium",
atomicNumber = 87,
atomicSymbol = "Fr",
atomicWeight = 223.0,
atomicRadius = 348,
meltingPoint = 27.0,
boilingPoint = 677.0,
radioactive = "Yes"
}
};
return elements;
}
public List<Actinides> GetActinides()
{
var elements = new List<Actinides>
{
new Actinides
{
name = "Actinium",
atomicNumber = 89,
atomicSymbol = "Ac",
atomicWeight = 227.0,
atomicRadius = 260,
meltingPoint = 1051.0,
boilingPoint = 3198.0,
radioactive = "Yes",
transuranium ="No"
},
new Actinides
{
name = "Thorium",
atomicNumber = 90,
atomicSymbol = "Th",
atomicWeight = 232.0,
atomicRadius = 237,
meltingPoint = 1750.0,
boilingPoint = 4788.0,
radioactive = "Yes",
transuranium ="No"
};
return elements;
}
public List<AtomTM> getTransUAnticide()
{
var elements = new List<AtomTM> {
new AtomTM {
name = "Einsteinium",
atomicNumber = 99,
atomicSymbol = "Es",
atomicWeight = 252.0,
transUranium = "Yes"
},
new AtomTM {
name = "Fermium",
atomicNumber = 100,
atomicSymbol = "Fm",
atomicWeight = 257.0,
transUranium = "Yes"
},
new AtomTM {
name = "Mendelevium",
atomicNumber = 101,
atomicSymbol = "Md",
atomicWeight = 258.0,
transUranium = "Yes"
},
new AtomTM {
name = "Nobelium",
atomicNumber = 102,
atomicSymbol = "No",
atomicWeight = 259.0,
transUranium = "Yes"
},
new AtomTM {
name = "Lawrencium",
atomicNumber = 103,
atomicSymbol = "Lr",
atomicWeight = 262.0,
transUranium = "Yes"
}
};
return elements;
}
Controller
The Controller carries one main difference from a regular controller in that we are not inheriting the Controller class from Asp.net, but a Surface Controller from Umbraco. There is an ActionResult for each of the Element types which all return a Partial View to the page. The return has two arguments, the first is the name of the partial view, and the second is the model which will be sent to the partial view.
using periodicTable.Models;
using Umbraco.Web.Mvc;
namespace periodicTable.Controllers
{
public class ChemicalController : SurfaceController
{
public ActionResult Actinides()
{
Elements list = new Elements();
List<Actinides> actinides = list.GetActinides();
return PartialView("actinideTable", actinides);
}
public ActionResult SynthActinides()
{
atomicTMElements list = new atomicTMElements();
List<AtomTM> synthAnticides = list.getTransUAnticide();
return PartialView("artAnticideTable", synthAnticides);
}
}
}
View
The view was created when I created my Document Type, The view uses the master page and has an html action to place the partial view in the page. The Layout uses the Master file and this way we have access to navigate throughout the site. I have also had to add access to the controllers. When the page is first created, the UmbracoTemplate it adds reference to a model object, in the <'ContentModels.xxxx'>.
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage<ContentModels.AlkaliMetals>
The <'ContentModels.xxxx'> can be deleted for the scope of this project.
Also we are not using the Grid layout in the View as we are not calling the @CurrentPage.GetGridHtml("content", "fanoe") that is called in the Home Page. This can be called if one wanted to add the Grid Content, but is not needed in this application as we are rendering partial views for the content.
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@using periodicTable.Controllers
@using ContentModels = Umbraco.Web.PublishedContentModels;
@{
Layout = "Master.cshtml";
}
<div class="container">
<h1>Actinides</h1>
@Html.Action("Actinides", "Chemical")
<h3>Synthetic Actinides</h3>
@Html.Action("SynthActinides", "Chemical")
</div>
Partial View
The Partial View renders a table in the partial view based off all the elements with in the Model. The loop loops over the Model which was sent from the Controller to the partial view.
@using periodicTable.Models
<table class="elementsTable">
<tr>
<th>Element Name</th>
<th>Atomic Symbol</th>
<th>Atomic Number</th>
<th>Atomic Weight</th>
<th>Atomic Radius</th>
<th>Melting Point</th>
<th>Boiling Point</th>
<th>Radioactivity</th>
<th>Transuranium</th>
</tr>
@foreach (var chem in @Model)
{
<tr>
<td class="elD">@chem.name</td>
<td>@chem.atomicSymbol</td>
<td>@chem.atomicNumber</td>
<td>@chem.atomicWeight</td>
<td>@chem.atomicRadius pm </td>
<td>@chem.meltingPoint C</td>
<td>@chem.boilingPoint C</td>
<td>@chem.radioactive</td>
<td>@chem.transuranium</td>
</tr>
}
</table>
@using periodicTable.Models
<table class="elementsTable">
<tr>
<th>Element Name</th>
<th>Atomic Symbol</th>
<th>Atomic Number</th>
<th>Atomic Weight</th>
<th>Transuranium</th>
</tr>
@foreach (var chem in @Model)
{
<tr>
<td class="elD">@chem.name</td>
<td>@chem.atomicSymbol</td>
<td>@chem.atomicNumber</td>
<td>@chem.atomicWeight</td>
<td>@chem.transUranium</td>
</tr>
}
</table>
Other than the Home Page the code is generated by bring data into the Application. The application really only needs the models and controller code from the User then that Data that is generated there can be utilized within the Umbraco framework.
//
References
https://www.youtube.com/watch?v=e7UeXUtpjck&list=PLLYO0Qmbv5pvGjpI6Cyg3mVBoYtG_LK63&index=9
http://umbraco.com/
Points of Interest
I learnt that with in Visual Studio this was the easiest CMS system to set up when compared to Orchard and DotNetNuke.
History
Keep a running update of any changes or improvements you've made here.
