A developer’s first EPiServer CMS project at Sogeti, part 2

In EPiServer

This is the second post in which I in detail describe how to install and configure an EPiServer project.

Configure providers and permissions in web.config

Since we’ll be  using SQL Server providers for authentication and authorization we’ll need to modify the web.config file in the debug-folder (don’t modify the web.config in the root folder since it will be overwritten each time we build our project).

Open the web.config file in the debug-folder. Locate the first “system.web”-element and modify it as shown below.

SettingProviders

Since we haven’t created any users or groups in the SQL Server database yet we’ll need to enable all users to access the administration interface from which we’ll create our users and groups. We can’t login if we haven’t got a username and password to do so, now can we?

This is done by uncommenting the “authorization”-element the “location”-elements in web.config which define the “edit” and “admin” interfaces of EPiServer. The edit-interface directly inherit the UI-path while the admin-interface has its own path. More detail on this topic can be found in my Setting up user permissions in EPiServer post.

Modify the UI and admin location elements as shown in the images below.

EnableAccessToUIPath EnableAccessToUIAdminPath

Set up the accounts in EPiServer

Now navigate to the URL “http://local.myfirstepisite/myfirstUI/CMS/admin”. Since we didn’t install any content using the EPiServer Deployment Center you should see this.

InstallBasicContent

Let’s do as it says! Edit episerver.config in your debug-folder and set the “pageStartId” attribute of the “siteSettings”-element to “1”.

setPageStartIdToOne

Now you should be able to access the URL “http://local.myfirstepisite/myfirstUI/CMS/admin” without being prompted for username and password.

First we’ll need to set up the groups. We’re going to create the groups “WebAdmins” and “WebEditors” since these are the default groups already defined in our authorization elements of web.config which we previously uncommented. Click the link “Administer Groups” and create these two groups as shown in the image below.

CreateGroups 

Next create a user by clicking “Create User”. Add the user to both groups (WebAdmins will suffice though if you’re picky).

CreateUser

The groups we created need to be associated with the EPiServer pagetree structure. Click the link “Set Access Rights” and define the permissions as shown below (you won’t have the “Start Page”-page just yet).

SetAccessRight

Uncomment the authorization blocks we modified earlier in web.config and rebuild the site. It should now prompt you for username and password when you try to reach the administration interface. Login with the account your created.

Create your first page type

It’s time to create your first page type. This is the logical container in the EPiServer pagetree structure that will reference a physical web form page.

Select the “Page Type”-tab and click “Create New Page Type”. Create the page like shown below.

CreateStartPageType

This will be the website’s start page. The web form “Default.aspx” doesn’t exist yet and we haven’t created any master pages. Creating a page in EPiServer of type “Start Page” will be possible but the page will not be able to render since it doesn’t exist. An “Page cannot be found”-error will be thrown. So let’s not do this just yet.

Creating the master pages and web forms

We’ll create our custom EPiServer page template base class and a master page base class to support scalability. We’ll also create multiple master pages. Please see the post by Ted Nyberg which highlights and explains the benefits from this approach if you’re unfamiliar with it.

Base classes

Create two classes in your “Classes”-folder named “MyFirstPageTemplate” and “MyFirstMasterPageTemplate”.

The MyFirstPageTemplate-class should inherit from “EPiServer.PageTemplate” and the MyFirstMasterPageTemplate-class should inherit from “System.Web.UI.MasterPage”. This is shown in the images below

MasterPageTemplate MyFirstPageTemplate

Master pages

Now we’re ready to create the master pages and our web form for the start page. Let’s start with the two master pages: Root.master and Default.master.

Create Root.master which will be the base master page as shown in the images below:

rootmaster rootmastercodebehind

“Default.master” is slightly different as it utilizes “Root.master” as its own master page. See the images below.

defaultmastermarkup 

defaultmastercodebehind 

Start page web form

With the master pages in place we’re ready to create the web form for the EPiServer “Start Page” page type. Create a web form in the project root named “Default.aspx”. Inherit from our “MyFirstPageTemplate” in the code behind and set the master page file to “Default.master”.

We’ll also add an EPiServer control to the page of type “Property” which we’ll use to retrieve the page property “MainBody” which is defined on the “Start Page” page type.

defaultaspxmarkup 

defaultaspxcodebehind

When you’re done build the project.

Create an instance of Start Page in EPiServer

Now that “Default.aspx” exists we can create the page in EPiServer. Access the edit-interface with the URL “http://local.myfirstepisite/myfirstUI/CMS/edit”.

Right click on “Root folder” and select “Create new”. Select the Start Page type. CreateNewStartPage

Click “Save and Publish” to create the page and make it accessible to users visiting the site.

Define the site’s start page in EPiServer.config

When we configured the site we set the “startPageId”-attribute in episerver.config to “1”. Now that we’ve created our start page we want this to be the first page that is displayed for the user. If you hover with the mouse-pointer over the page in edit-mode you’ll see the ID of the page.

Edit episerver.config and set the “startPageId”-attribute to this ID. Mine is “3” but yours might be different as EPiServer increments this ID by each page you create.setPageStartIdToThree

That’s it! You’re done!

When you navigate to the page now this is what you should see.

AllDone

Now you’re free to create new page types, implement awesome logic and cool design to your pages. There’s tons of material and tutorials over at http://world.episerver.com. And please visit Frederik Vig’s series which will give you great insight into how to build a fully functional EPiServer website from scratch.

Thanks!

daniel
daniel
Developer
Recent Posts
  • Absolutely fantastic for EPiServer beginners. Well done!

  • Thanks, Paul! 🙂

  • Thanks for the mention Daniel! Here is the link to the Create an EPiServer site from scratch series: http://www.frederikvig.com/2009/12/introduction-create-an-episerver-site-from-scratch/ in case anyone was wondering what it was :).

  • Sorry, Frederik! Just realized that I had only made a proper link in part 1. I’ve made amends now and you got yourself a neat hyperlink. 🙂

    Thanks, dude!

  • Cecilia Magnusson

    I came across a strange (at least for a newbie like me) problem when I tried to add the usergroups for my new user. Nothing happened when I clicked the green buttons to move the groups to the "Member of" area (I could see that the page(s) was reloaded but nothing happened). I was also unsuccessful to delete my groups and/or users.

    After some messing around (AND frustration) I realized that my site had to be added into the "trusted site area" in IE! Such a small caused that much of a problem.

  • Ah. Most likely you were running IE in a server environment (Windows Server 2003?) which doesn’t allow javascript by default.

    By adding the site to your trusted sites the javascript was able to execute.

    Cheers, Cecilia 🙂

Contact Us

We're not around right now. But you can send us an email and we'll get back to you, asap.

Not readable? Change text. captcha txt

Start typing and press Enter to search