This is a short guide intended for developers that are just starting with Tridion and DD4T and are finding the page creation process somehow complicated. The steps below are divided into two parts – A. Tridion and B. DD4T. If you are familiar with the first part (how to publish a page) you can skip to the second.
A similar  guide, but with slightly different focus can be found here.

 

A. The Tridion part:

1. Create a Schema (in 010 Schemas –> building blocks –> System –> Schemas) for the main Article
2. Create some components  that use this schema (In 020 Content)
3. Make 3 folders in 025 Design –> System: ComponentHTML (used for storing TBBs for the components), PageHTML (used for storing TBBs for the pages), CompoundTemplates(used for storing all created templates).
4. Start the Tridion Template Builder
  4.1. Create a component template for your components, give it a meaningful name (e.g. Lifehacker – ArticleTemplate) store it in the folder CompoundTemplates.

 Drag and drop the following (DD4T) Building Blocks on your template:

  • Generate dynamic component
  • Publish binaries for component

4.2. Create a page template for your (main)page, give it a meaningful name (e.g. Lifehacker – MainPageTemplate), store it in the folder CompoundTemplates.

In the template builder field, use the following (DD4T) Building Blocks:

  • Generate dynamic page
  • Publish binaries for page

N.B. In order to be able able to use the DD4T Building Blocks in your Template Builder, they must first be added to tridion . Download the latest templates from here.

Save and close the template and the TB.

templates

 

5. Make another schema, this time in Design –> System –> Schemas: call it something with DD4T to be able to distinguish it (e.g. DD4TViewSchema). In this schema, you should have only 1 field, preferably called View and with type Text. If you use a different name, make a mental note because you will need to change some things later in the MVC project.

 

6. Open the created component template (for the Article) in your CompoundTemplates folder, locate the field “*Component Presentations based on this Component Template will be:”, and change its value to “Published as Dynamic Component”. Next, change the Metadata Schema to the DD4T schema. Once you do that, a new field will appear with a title View (if you used this name in your schema). You need to give it a name (preferable short and without spaces), you will need to use a view with the same name in your MVC project later on. I usually go with ArticleDetail or ArticleFull. Save and close.

6.1. Go to the “Linked schemas” tab and add a schema for your template. This should be the same schema that your components (from step 2) use.

componentTemplate1 - Copy

componentTemplate2 - Copy

 

7.  You should now open the created page template in your CompoundTemplates folder and change its Metadata Schema to the DD4T schema. Once you do that, a new field will appear with a title View (if you used this name in your schema). You need to give it a name (preferable short and without spaces), you will need to use a view with the same name in your MVC project later on. I usually go with PageDetail or PageFull. Save and close.

 

8. Make a new publication with the name of your website (e.g. 030 Lifehacker), it should inherit both 020 Content and 025 Design. Inside it make a new Structure Group and name it Root (or something else if you prefer). Inside this structure group you can make another structure groups. For example – if your website contains both news-article pages and tweet pages, you might want to have two separate sub-structure groups Articles and Tweets. If you expect to have only homogeneous page types, you can make your pages directly on the root folder.

 

9. Make a new page inside the Articles structure group, give it a meaningful name (e.g. Lifehacker_FrontPageDD4T). Avoid having spaces in the names, as it may cause problems. Uncheck “inherit from parent” and from the drop-down select your compound page template (in my case Lifehacker – MainPageTemplate). Now go to the tab “Component Presentations”, you will need to add all your components along with a presentation template. Select “Insert”, then look for your content (aka. components) and add each one of them by choosing its name and the component template that you created at step 6. Once everything is added, save and close the page.

page-to-publish

 

10. The last step is to publish the page to your server. (link to guide here -TODO).

 

B. The DD4T and MVC part:

1. Create a blank MVC 5 project

2. Download DD4T MVC (with Ninject), place it in the same solution and add reference to it in your main web project (link to code).

3. Add reference in your web project to DD4T.MVC.dll and DD4T.Utils.dll (located in the DD4T project -> bin -> debug)

4. In the Global.asax, add reference to DD4T.Web.Mvc.Ninject; Add a line at the end of ApplicationStart():

DependencyInjectionConfig.SetupDependencyResolver();

 

5. In the Web.config –> <appsettings> –> <configuration> add the following lines:
<!– Basic DD4T Configuration Settings –>
<add key=”DD4T.ComponentPresentationController” value=”Component” />
<add key=”DD4T.ComponentPresentationAction” value=”ComponentPresentation” />
<add key=”DD4T.PublicationId” value=”6″ />
If your tridion publication has different ID – put that as a value

 

6. In the Web.config –> <configuration>

<system.webServer>
<validation validateIntegratedModeConfiguration=”false” />
<modules runAllManagedModulesForAllRequests=”true” />
</system.webServer>

 

7. In the Web.config –> <configuration> –> <runtime> –> <assemblyBinding> add the following lines:

<dependentAssembly>
<assemblyIdentity name=”Tridion.ContentDelivery” publicKeyToken=”ddfc895746e5ee6b” culture=”neutral” />
<bindingRedirect oldVersion=”0.0.0.0-7.0.0.322″ newVersion=”7.0.0.322″ />
</dependentAssembly>

If your content delivery has different version – put that as a value.

 

8. Create folders in Views: Component and Page. In the component folder make a view with the same name that you used in point A6. Do the same in the Page folder (refer to point A7).

Your component HTML should be placed in the component view. In the page view you just need to tell DD4T to render the component presentations:

@using DD4T.Mvc.Html
@model DD4T.ContentModel.IPage

@Html.RenderComponentPresentations()

 

9. Define a tridion routing in the RouteConfig.cs. Don’t forget to put it before the default route:

//Tridion page route
routes.MapRoute(
“TridionPage”,
“{*PageId}”,
new { controller = “Page”, action = “Page” }, // Parameter defaults
new { pageId = @”^(.*)?$” } // Parameter constraints
);

 

10. In the properties of the Web project define a specific starting page – the same name that you published to the server. You are done with the basic setup.

Check back from time time for some advanced topics.

Author: Stanislav Stoychev