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)
6) Paste the copied file to Website folder of your instance ie C:\intepub\wwwroot\myfirstapplication\website
7) Now open project from this location i.e. double click on .csproj file.
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.
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
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 b and click on login
3) Select desktop from the option
4) You will redirected to Sitecore 8 desktop, which is very similar to windows desktop.
5) Click on Sitecore Icon (Start icon of Sitecore, same like windows) and select content editor
6) You will find Content Tree on left side of the screen. Right Click on Template–>Insert –>Template Folder
7) Give name i.e. MyFirstAlication. Your content tree will look like this
8) Right Click on MyFirstApplication–>Insert–>New Template
9) Give name to template. I am going to create Employee template
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
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
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
3) Give Folder name as MyFirstApplication. Click Finish, a folder will get created inside Content.
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.
7) Change the value if you want. I have changed the values.
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 )
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.
4) Now we will create a Layout. Right click on MyFirstApplication (under Layouts) and select insert Layout.
5) Give name to Layout as MainLayout
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)
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
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.
11) Now go to visual studio, and look for MainLayout.aspx and MainPage.ascx inside MyFirstApplication.
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
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”/>
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
2) You will find a menu like this
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
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
5) Click Select. Item presentation will look like this
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
8) Similarly Publish the Template Folder, Layout Folder and SubLayout Folder.
10) The item will get previewed in the browser.
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