In our last article we presented some of the main concepts of Sitecore. Now, by showing you a Hello World example, we'll look at how these concepts work to actually put together a Sitecore page.
Download the Sitecore version you will use on this project from Sitecore Development Network (http://sdn.sitecore.net/) - it's okay if you prefer the automatic installation method, but we will show you how to do it manually
Unzip the archives to a folder on your computer. You'll see the following subfolders:
Data - This is where Sitecore keeps a number of archives related to the currently installed instance, such as logs, indexes, packages, and cache files
Databases - Database files from SQL Server and Oracle
Website - Everything that will be accessible from the web browser.
- Open IIS and create a new website linking to the folder above
- In the configurations for the recently created Application Pool set the .NET Framework to version 4.0
- Copy the Data folder to the Website folder and the license.xml file to the Data folder
- On the Website folder properties uncheck the “read only” checkbox and give full permissions to the Application Pool user. We are only doing this step because this is a development environment. In production you must follow the instructions contained here, under item “4.2 Configuring Folder and Registry Permissions”
- Install your databases to the “Database” folder and edit the configurations in the ConnectionStrings.config file, located in the Website/App_Config folder
- If your site is on localhost, point your browser to http://localhost/sitecore. If you see a login screen, you have successfully installed Sitecore.
On Visual Studio, create a solution and a web project, which should be configured to .NET Framework 4.0. We will be working on a separate folder from Website, which will make us manually copy over our solution files after each change. You can bypass this by taking the following actions:
In your project configurations, create a Post-build event with commands to copy over the files to the Website folder after each build. You can do this by using tools such as xcopy and robocopy;
Work on your project from within the Website folder but only include your project files in the solution.
Creating a template for the new page
- Navigate to the Sitecore backend at /sitecore and login on Desktop mode with user admin (default password is “b”);
- Open the Template Manager, go to /Templates/Sample and create a new template called “Hello World” using “Sample Item” as base template - this is the example template used on the Home that comes with the original installation;
- Select the new template and click on Options > Standard Values. An item called __Standard Values will be created under your template. In this item you can configure the default data for new items created from this template.
Creating a sublayout with the Hello World message
- Open the Sitecore Content Editor, navigate to /layout/Sublayouts and create a new sublayout called “Hello World”. Do not check option “Create Associated C# Code Files” because we will point this to our new ascx;
- On Visual Studio, create a new Web User Control called HelloWorld.ascx and type Hello World in your markup;
- Compile the solution and copy the dlls and HelloWorld.ascx to the Website folder;
- Go back to our recently created sublayout, navigate to the “Ascx file” field under Data and change the path to our HelloWorld.ascx file (relative to the Website folder - e.g. “/layouts/HelloWorld.ascx”).
Using the sublayout on our template
- Go back to __Standard Values on our template and click on Presentation > Details. You'll see the layout configurations inherited from the “Sample Item” template;
- Click on Edit > Controls > Add and select the “HelloWorld” sublayout;
- Let's put our sublayout on the page content placeholder. For this, go to “Add to Placeholder” and type in “/main/centercolumn/content”, click “Select” and “Ok” until you have closed all windows.
Creating a new item for the Hello World page
- Go back to the Content Editor and navigate to /Content/Home;
- Click on Insert > From Template > Browse and select the “Hello World” template we created previously. On Item name, type in “Hello World”;
- Select the recently created item and click Publish > Preview to view the page in your browser. You should see something like this:
The first Hello World in bold comes from the title of our page and was inherited from our base template (or father);
The second Hello World, highlighted in yellow, comes from the new sublayout we created.
To see part 1 of this series, an introduction to Sitecore for programmers new to Sitecore, click here.
To see part 2 of this series, an overview of key Sitecore concepts for programmers new to Sitecore, click here.