First Sitecore 8 website using Visual Studio

8 August 2015
6399 Views

Hi All,

In my previous blog, we have learned how to install sitecore 8 on your system. In this blog we will cover the following topics

  • Integrating Visual Studio with Sitecore
  • Creating Template in Sitecore and Storing Content
  • Assigning Presentation to Item
  • Rendering the page

Lets start covering each topic one by one

Integrating Visual Studio with Sitecore

1) Open Visual Studio 2012 and select New Project.

2) You can give any name to your project, but since we are just started learning, so to make things simple. give the same name as of instance name i.e. MyFirstApplication

3) Once the project gets created, close the visual studio. Since we want the files generated by Visual Studio while creating new project.

4) Go to physical location of your project (By default in MyDocuments)

5) Copy the Property folder, myfirstaplication.csproj and myfirstapplication.csproj.user file. sitecore 8 visual studio sitecore helper

6) Paste the copied file to Website folder of your instance ie C:\intepub\wwwroot\myfirstapplication\website

sitecore 8 visual studio sitecore helper

7) Now open project from this location i.e. double click on .csproj file.

8) Click on Show All File icon (as it will show hidden files also). Delete the non available file (i.e. file with yellow warning symbol), as these file will get generated by Sitecore 8. sitecore 8 visual studio sitecore helper

9) Add reference to Sitecore.Kernel.dll. For this Right Click on References folder, Click Add Reference, Browse to bin folder of your instance, select Sitecore.Kernel.dll. Set its property CopyLocal=false.

sitecore 8 visual studio sitecorehelper

10) Include the layouts folder (Right Click on folder and select Include in Project)

11) Build the solution, if build successfully then you have successfully configured Sitecore with visual studio.

Creating Template in Sitecore and storing content

Defining Template in Sitecore is same like creating table in SQL. If we try to relate Sitecore with OOPs then we can make following correlation

OOPs Sitecore
Class Template
Properties Fields
Constructor Standard Values
Object Item

Don’t worry about detailed terminology, we will cover details of each terms in coming blog.

Since we are learning from scratch, so its better we should follow all the standard guidelines.

We can create template anywhere inside Template folder, but it would be better if we separate folder for our instance, and create all the template inside that folder.

1) Open Sitecore instance login page i.e. myfirstapplication/sitecore/login

2) Give credentials i.e. user name admin and password and click on login

sitecore 8 login sitecore helper

3) Select desktop from the option

sitecore 8 welcome screen sitecorehelper

4) You will redirected to Sitecore 8 desktop, which is very similar to windows desktop.

Login3

 

5) Click on Sitecore Icon (Start icon of Sitecore, same like windows) and select content editor

sitecore menu sitecorehelper

 

6) You will find Content Tree on left side of the screen. Right Click on Template–>Insert –>Template Folder

Insert temlate Sitecore 8 Sitecoreheler

7) Give name i.e. MyFirstAlication. Your content tree will look like this

Insert temlate Sitecore 8 Sitecoreheler

8) Right Click on MyFirstApplication–>Insert–>New Template

9) Give name to template. I am going to create Employee template

Insert temlate Sitecore 8 Sitecoreheler

10) Click next and the template will get created.

11) Till now we have created template, now its time to make fields in template.

12) Click on Employee, in the Right Side window, Click on Builder. Here you will find space for defining fields.

13) First Row is for Section i.e. it is for user point of view to categorize the fields.

14) Provide fields name and their type. Refer the pic

Insert temlate Sitecore 8 Sitecoreheler

 

15) As you can see, I have created three fields Name, Address and Mobile Num.

16) Now its time to define Standard Value (which is like default value). For this Click on Employee Template and from the above ribbon menu select Option and then select Standard Value

Insert temlate Sitecore 8 Sitecoreheler

17) Provide value for each filed. Refer the picStandard value Insert temlate Sitecore 8 Sitecoreheler

 

Don’t worry about this, you will understand this once we will create Item.

Save all the things.

Till now we have created Template. Now its time to make a item on this template.

Item is content or data. So we will create items inside Content Folder. As we have created a folder with instance name inside Template, similarly we will create a folder inside Content Folder.

1) Right Click on Content and select Insert. Oops..here we are not getting option of inserting a folder. Don’t worry, we have to manually get to the path of folder. (Folder is also a template, which is stored inside Template)

2) Right Click on Content–>Insert From Template, and browse to the following path. Template–>Common–>Folder. Refer the pic

inserting folder in sitecore 8 sitecorehelper

3) Give Folder name as MyFirstApplication. Click Finish, a folder will get created inside Content.

4) Now we have to insert a employee under this folder. For this, Right click on MyFirstApplication–>Insert From Template and navigate to Employee. creating item sitecore 8 sitecorehelper

 

5) Give name as Nitish. Click Finish

6) Now what you see, field are automatically filled. That is coming from Standard Value. $name is replaced by Nitish, ie the name of the Item. Address is replaced by India and Mobile Num is replaced by 1234567890.

creating template sitecore 8 sitecorehelper

 

7) Change the value if you want. I have changed the values.

creating template sitecore 8 sitecorehelper

Save all the things.

Till now we have created a template and defined a Item based on template. Now we will assign presentation to the item. Presentation is generally HTML part like how we want to display that item.

Creating Layout and Sublayouts

Basic concept of presentation is Sitecore is like that

  • First we create  a layout (.aspx). Layout is word used in sitecore, in actual it point to a .aspx file i.e. webpage.
  • On that Layout we define a placeholder (Its like defining a place for other controls)
  • Then we create a sublayout (.ascx). Sublayout is word used in sitecore, in actual it point to a .ascx file i.e. webuser control.
  • We bind Layout and sublayout to item, and depending upon the logic and HTML, that item content will get rendered.

1) First create Folder under Layout and Sublayout with name MyFirstApplication. Refer the pic and create folder structure (Layout–>Layouts–>MyFirstApplication and Layout–>Sublayouts–>MyFirstApplication )

making layout sitecore 8 sitecorehelper

 

2) Since each layout and sublayout points to a physical file, so we have to create similar folder structure in physical path, just to maintain similarity from Sitecore.

3) For this create a new folder under layouts in Visual Studio.

layout sitecore 8 sitecorehelper

 

4) Now we will create a Layout. Right click on MyFirstApplication (under Layouts) and select insert Layout.

5) Give name to Layout as MainLayout

creating layout sitecore 8 sitecorehelper

6) Click Next. Now it will ask for location, where you want to store that layout in sitecore. (Its kind of a unnecessary steps as in the starting  we are creating layout inside MyFirstApplication)

sitecore 8 layout sitecorehelper

7) Click Next. Now it will ask for physical location where we want to store this layout. Select MyFirstApplication from the path. Refer the pic

layouts sitecore 8 sitecorehelper

8) Click Create.

9) Notice the path of this layout, it is pointing to /layouts/MyFirstApplication/MainLayout.aspx. So there must exist a file with same name at this path.

layout sitecore 8 sitecorehelper

10) Similarly create a Sublayout with name MainPage. sublayout sitecore 8 sitecorehelper

sublayout sitecore 8 sitecorehelper

11) Now go to visual studio, and look for MainLayout.aspx and MainPage.ascx inside MyFirstApplication.

12) If you don’t find these two files, click on view all files icons, be default these two files are in hidden form.layout and sublayout sitecore 8 sitecorehelper

13) As you can see, you will not find any code behind files for the newly created file. Sitecore only create .aspx and .ascx files and does not create its code behind file.

14) Since we need code behind files, as we want to write some logic on that. For that, delete the both files and create a webform (.aspx) and webuserc control (.ascx) with same name. The reason for keeping name same is, sitecore layout and sublayout points to MainLayout.aspx and MainPage.ascx.

15) After creating your Folder structure will look like this

 

 

VSLayout2

16) Now you will find code behind file also.

17) Create a placeholder on MainLayout.aspx. For this write following code on MainLayout.aspx page

<sc:placeholder runat=”server” Key=”PhMain”/>

placeholder sitecore 8 sitecorehelper

 

18) Key is the name of placeholder, which we will use in sitecore.

19) Now on MainPage.ascx page, write code for rendering the content

<sc:Text Field=”Name” runat=”server” />

<sc:Text Field=”Address” runat=”server” />

<sc:Text Field=”Mobile Num” runat=”server” />

Notice the name of the fields, its same as we defined in Sitecore.

20) Build the solution. If build successfully, you have created the presentation correctly.

Assigning Presentation to Item and Render the Content

Finally its time to assign presentation to the Item and render the content.

1) Click on the item i.e. Nitish, From the upper menu Select Presentation, then click on Details

presentation sitecore 8 sitecorehelper

 

2) You will find a menu like this

presentation sitecore 8 sitecorehelper

3) As you can see, no presentation is assigned to the item. Click on Edit in Desktop section. First we have to assign Layout. Browse to the Layout file

presentation sitecore 8 sitecorehelper

4) Now click on Controls, here we will assign the sublayout. Click Add and browse to the sublayout file. Please note here we have to give a name of placeholder. The same name which we have given to placeholder on MainLayout.aspx file i.e. PhMain

presentation sitecore 8 sitecorehelper

5) Click Select. Item presentation will look like this

presentation sitecore 8 sitecorehelper

6) Now we have configured all the things. It’s time to publish the site. For this Select Publish from the top menu, and then select Publish–>Publish Site

7) Choose Smart Publish (don’t worry about the other modes of publish, that we will capture in the coming blogs). Click Publish

presentation sitecore 8 sitecorehelper

 

8) Similarly Publish the Template Folder, Layout Folder and SubLayout Folder.

9) Now it’s time to finally preview the item. For this, select item and click Publish from the top menu, and then select Previewpresentation sitecore 8 sitecorehelper

10) The item will get previewed in the browser.

presentation sitecore 8 sitecorehelper

 

Notice the content is coming from Sitecore and presentation is assigned from Sitecore.

 

Great….. We just created a small website in Sitecore using Visual Studio.

Kindly ask your doubts, or leave comment, if you find this blog useful.

I will keep posted the new blogs related to sitecore and .net

 

35 Comments

« Older Comments

Leave a Reply

Your email address will not be published. Required fields are marked *