Posted by 
Let’s create the first Sitecore page!
Ok, let’s start. The first thing that we need to do is Create Controller in our solution.
Next, we need to select MVC 5 Controller – Empty and add a name to the Controller in my case it will be “MyFirstSitecoreController”.
This is how our created controller looks like:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace events.tac.local.Controllers
{
public class MyFirstSitecoreController : Controller
{
// GET: MyFirstSitecore
public ActionResult Index()
{
return View();
}
}
}
Next, we need to add View to our action.
Let’s call it the same as it is our ActionResult method – Index Template Empty (without model) and check checkbox Create as a partial view. Then inside of our Index.cshtml we can add some HTML lines that we will be able to see something after we go to our page.
<div>
<h4>Hello World Sitecore!</h4>
</div>
Next, we need to do is add Layout of our page. Layout it is a page where we embed our Sitecore control. Here we can also define the layout of our page and style it. For this lesson, I will just insert shortcode where I will embed our control. So let’s add in Views folder some new folder lets Call it ‘MyLayout’ and inside of it add Layout, properties should look like on the screenshot below:
Inside Layout paste this code:
@using Sitecore.Mvc
@using Sitecore.Mvc.Analytics.Extensions
@using Sitecore.Mvc.Presentation
@model RenderingModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>FirstLayout</title>
</head>
<body>
<main>
@Html.Sitecore().Placeholder("main")
</main>
</body>
</html>
The most important thing is @Html.Sitecore().Placeholder(“main”). This allows us to embed Rendering in a layout. Thanks to that Sitecore will know where to render a view from the controller action.
Ok! I think that we have all the code prepared!
But now the question is how to pass the compiled code so that Sitecore can use it? To do that we need to set up a connection in Web One Click Publish tool which should be added to our VS toolbar. If you don’t have it please add it because it is needed to Sitecore development. To set up a connection in Web One Click Publish tool, we need to fill ‘Target location:” with our Sitecore instance address.
Next, we need to build our solution. But please do not publish it yet we will do it after layout creation in Sitecore.
Now we can start Our journey with Sitecore!
After login into Sitecore let’s open Content Editor. Navigate to /sitecore/templates/Sample and create here our Template lets call it ‘MyTemplate’. We are doing that by Right click on Folder Sample
After Click Next we need to set location, we should see the selected Sample folder. And then we need to click next. After that, we should see that “The template has been created successfully.”
Wow! you have created your first Sitecore Item! Because we need to remember everything in Sitecore is an Item 🙂
Now let’s create some sample section and fields inside of it. To do it we need to select tab Builder using this tab we can build our template. We can add here section name it for example “MySection” and fields – “Title” and “Some nice text”. After add section and fields press CTRL + S – Save the item. Now let’s add StandardValues item by Click on builder then on tab Options and Standard Values. After Click item, __Standard Values will be created under the MyTemplate item.
When we open __Standard Values item we can add key “$name” into Title field. When the item based on that template will be created the title will be automatically filled with the item name. Then save the__Standard Values item.
Now navigate to Home item /sitecore/content/Home and right click on it select Insert and then Insert from the template, then Select our created template: /Sample/MyTemplate Let’s call newly created item ‘First Article’ and click Insert. It should look like on the screen below.
And look on section My Section newly created item has field Title filled in by item’s name.
Now we need to use our Layout page. First of all please create some layout folder lets call it ‘MyLayout’ as a folder in our solution it should be created under wwwroot\Views\MyLayout. Next, we need to create Layout item under /sitecore/layout/Layouts right click on that item and select Insert and MVC Layout Lets call our layout just ‘FirstLayout’ like is our file in solution. After the name, we need to choose a location to pick Layout and then we need to show folder in your sitecore. Let’s pick wwwroot\Views\MyLayout, because it is a folder where our layout will be deployed. Sitecore needs to know where to find our cshtml file with the layout that’s why we are creating that staff. This action will create file FirstLayout.cshtml for us. After deploying our changes in solution will replace the empty file which now has been created.
It is a time when we can go back to our solution in VisualStudio and click on Publish Web on our Web One Click Publish tool. I’ve marked it on the image.
After deployment, you can try to look at the folder in Sitecore under Views\MyLayout and check if the code has been changed.
Next, we need to go back go Sitecore and do something with our Controller. We need to show Sitecore that our Controller exists and Sitecore can use it to render the view. To do that Sitecore knows about our Controller we need to add an Item called Rendering. We need to go to /sitecore/layout/Renderings here is the place where Rendering’s item’s should be defined and stored. So let’s create our rendering folder by Right click on Renderings and click insert and Rendering Folder. Choose the name for that folder in my solution it will be ‘MyRenderingFolder’ after that we need to add our Rendering item so Right click on our folder and select Insert and Controller Rendering and let’s call it ‘MyFirstRendering’
Now we need to fill data inside Rendering item so we need to fill it under field Controller put Controller name and under Controller Action a name of action like this:
Ok, now we have our rendering Created! Remember not to put keyword Controller into field Controller, because Sitecore will not find it. Now let’s go back to our template standard values.
So we have the _Standard Values item which should be under path: /sitecore/templates/Sample/MyTemplate/__Standard Values
Now we need to set up Presentation Details for that item – it is a definition of how our item will be rendered on site.
.
For sure in some next article, I will describe Presentation Details better. For this lesson, we need to know that it is a place where we will set up view of our item. We need to setup Layout and add our Rendering. To do that we need to click Edit under the Default section.
And select the layout tab and select like that:
On that layout we have some code which defines Placeholder where we will put our Rendering, I think you should remember what code we put to our Layout, if not it is this line: @Html.Sitecore().Placeholder(“main”) It means that name of Placeholder where we can put some rendering item has name “main”, we need to remember names in our layouts, or we can also always look into the code 😉
And next select Controls tab and click Add after that select our rendering like on the image below, and remember to fill “Add to Placeholder:” with the name of placeholder in our layout in our case it is “main”.
After all presentation details should look like this:
After all click OK. And save __Standard Values item.
Now you go to /sitecore/content/Home/First Article which is based on the template which was edited by us and check presentation details of this item. Our First Article item should have set up Sample Layout and control MyFirstRendering as it was on __Standard Values item. Because all that we are doing on __Standard Values item is applied to items that are created from this template.
The last thing that we need to do is Publish our changes. I will also describe it deeper on some next article because it is an interesting topic. To do Publish we should click on Publish and Publish Site. Then choice option “Smart publish – publish differences between the source and target database.”
and click Publish.
After publish you will be ready to see your first component.
Are you ready to see how your’s first Sitecore component looks like? It should be visible under mySitecoreInstance/First-Article and looks like that:
Congratulation’s that’s all for today! Stay tuned!