A developer’s first EPiServer CMS project at Sogeti, part 2
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.
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.
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.
Let’s do as it says! Edit episerver.config in your debug-folder and set the “pageStartId” attribute of the “siteSettings”-element to “1”.
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.
Next create a user by clicking “Create User”. Add the user to both groups (WebAdmins will suffice though if you’re picky).
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).
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.
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.
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
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:
“Default.master” is slightly different as it utilizes “Root.master” as its own master page. See the images below.
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.
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”.
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.
That’s it! You’re done!
When you navigate to the page now this is what you should see.
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.