Better CMS for Developers

Intro

Better CMS is a publishing-focused and developer-friendly .NET Open Source CMS developed by Devbridge Group. The first official public release version is available, and there is a demo website to see it in action. Try it yourself!

This article is developer-oriented and includes:

  • quick ASP.NET MVC 4 project setup with Better CMS;
  • additional configuration;
  • template creation;
  • widget creation;
  • API usage;

Quick Project Setup

It is very easy to setup Better CMS on any ASP.NET MVC 3 or ASP.MVC 4 website project with .Net 4.0, and I’m going to show you how to do it.

Prerequisites:

  • Visual Studio 2010 or 2012 with NuGet Package Manager
  • Empty ASP.NET ASP.MVC 4 website project with .Net 4.0

Step: 0 – create a web project

  • Create a new ASP.NET ASP.MVC 4 web application project with .Net 4.0 in Visual Studio 2012.
  • On the second window for this particular tutorial please select Empty project template with Razor view engine.

Step: 1 – install the Better CMS nuget package

In VisualStudio NuGet console paste the line below:

  • Install-Package BetterCMS

This will install a BetterCMS NuGet package and all the dependent packages into your website project . Web.config will be updated, too.

Step: 2 – setup a database

For Bette rCMS data storage you need to provide a database connection where the CMS should create schema and store data. Currently supported databases are a remote or local SQL Server database or an Azure SQL cloud database. For this particular tutorial please create a CmsData.mdf local SQL Server database in App_Data folder:

  • Click your left mouse button on the App_Data folder in the project and select Add / New Item…
  • Select SQL Server Database, name it CmsData.mdf, and click Add

Update Web.config with a particular connection string:

Pic 1

All the necessary database structures (tables and etc.) will be created on the application start.

Step: 3 – update Global.asax.cs

The last step – Global.asax.cs update:

Pic 2

Please pay attention at the 26th line, which is commented out – BetterCMS will register its own routes (including the root) and in this scenario we do not want to change this behavior.

That’s it! Hit F5!

Pic 3

Now you can administrate (create / edit / delete pages / content / images / files and etc.) your website!

If you have any problems or need additional info, please consult Wiki pages.

Quick Tip: 1

If you find that the Media Manager in Better CMS fails to upload/download or show images/files – double check if the cms.config storage section is pointing to the correct location. Example below:

Pic 4

Quick Tip: 2

If you are trying to setup Better CMS on a not Empty project basis or on MV3, please double check Web.config file as defined in this wiki page.

Additional configuration

Application Logging

For better traceability, I recommend enabling application logging, as it’s easier to identify and solve any issue that could occur. The easiest way to set up logging in your application is to use NLog, which is used in Better CMS, too. For instructions on how to update configuration files for NLog, please follow this guide.

Storage

Better CMS supports file uploads via a module called Media Manager. For all functionalities that are provided by this module you need to properly configure storage. Currently, by default, Better CMS supports two types of storage:

  • Local
  • FTP

Cloud storages:

  • Amazon S3
  • Windows Azure

Soon these will be available as built-in or separate packages.

Local storage is pre-configured by default, but if you prefer to use FTP update Config/cms.config follow this example:

Pic 5

Please pay attention to which URLs ends with ‘/’ symbol and which do not.

Custom Error Pages

BetterCMS comes with three default pages including main and two error pages. To use these CMS error pages in your whole website (not only in CMS pages) you need to update Web.config as follows:

Pic 6

Update Config/cms.config with your custom error page, too:

Pic 7

Note: in a Visual Studio 2012 MVC3 web application project, there is a registered global action filter, HandleErrorAttribute, which renders ~/Views/Shared/Error.cshtml on errors by default. If you want to use customErrors redirects from Web.config – you need not to register the HandleErrorAttribute filter.

Authentication, Authorization and User Roles

To access Better CMS controls (such as page creation, content editing, etc.) on the website, a user must be authenticated (logged in) and authorized (in particular user role). Better CMS has these roles/permissions:

  • BcmsEditContent – add/edit content (page, blog post, html content, SEO, edit page properties, clone, save draft, preview, sort contents, insert file/image into content, sitemap, redirect, view content history);
  • BcmsPublishContent –  publish/unpublish content, restore content from history;
  • BcmsDeleteContent – delete content, images, files, folders;
  • BcmsAdministration – widgets and templates administration.

Additionally, for flexibility reasons, it is possible to configure your custom user roles. For that matter, update Config/cms.config according to the example below:

Pic 8

With the above configuration, now if HttpContext.Current.User is in the “user” role, he can create, edit, delete, and publish content in CMS.

Currently, Better CMS v.1.0.0, does not ship a plugged-in role provider. For now, the easiest way to enable roles in the project is to use a .Net Framework default role provider, which can be configured with the ASP.NET Configuration tool in Visual Studio (accessible via menu: Project / ASP.NET Configuration). Additional info can be found here.

If you are building an intranet application with a windows authentication mechanism, you can follow the instructions here.

Templates

Better CMS uses a page template mechanism to provide predefined page styles to an end user. Templates are MVC *.cshtml layouts with defined sections in the CMS called regions, where a content editor allows a user to create custom content.

So, lets create a demo template and use it in CMS.

Prerequisites:

  • Project with running Better CMS

(If you do not have one, please perform steps described in this article “Quick Project Setup” part.)

Step: 1 – create a template

In the project Views folder create a subfolder called Templates and add partial pages called DemoTemplate.cshtml with the code:

Pic 9

Tip: all your templates should have base layout pointing to “~/Areas/bcms-Root/Views/Shared/BaseLayout.cshtml”.

Step: 2 – register

In order to use the template for the new CMS pages, it needs to be registered within Better CMS. To do so, please perform these steps:

  • In the running website side menu click Site settings;
  • On the Site Settings dialog select Templates;
  • Above the template list click Register+;
  • Fill in the template Title and Path:

Pic 10Add the region information:

Pic 11Click Save.

The template is registered and ready to use.

Quick Tip: 1

If you are creating a template for a blog – you need to define a region (RenderSection) with a name “CMSMainContent”, otherwise templates without “CMSMainContent” region are not supported by the blogging mechanism.

Server Widgets

In Better CMS there are two types of widgets:

  • Content widgets (simple html content that can be used on multiple pages);
  • Server widgets;

Content widgets are created via the Better CMS control panel. They are simple to create and function in a very similar way to content editing.

Server widgets are used for the website functionality that needs server side processing. To learn how to create this type widget, follow this tutorial. This demo widget will show if a page with a particular url exists in the CMS.

Step: 1 – create a widget

In the project Views folder create a subfolder called Widgets and add a partial page called DemoWidget.cshtml with the code:

Pic 12

If your Visual Studio is angry about missing references, you can include dll’s from App_Data/BetterCms/Modules/, but it’s not required, because these libraries are dynamically loaded on the website start.

Step: 2 – register

In order to use this widget, it needs to be registered within Better CMS. To do so, please perform these steps:

  • In the running website side menu click Site settings;
  • On the Site Settings dialog select Widgets;
  • Above the widget list click Register+;
  • Fill in the template Title and Path:

Pic 13Add the widget option with the default value:

Pic 14Click Save & Publish.

The widget is now ready to use in a web page.

Quick Tip: 1

Widget options can be changed to different values on each page. If they are not changed – the default values will be used.

Pic 15

API

In the previous section on “Server Widgets,” I showed the example how to get some information from Better CMS. But what if you have a project that needs a deeper integration with CMS? No problem! Better CMS has an event based API to get notifications on a particular action that was performed on the CMS. For example, the picture below, demonstrates how easy it is possible to be notified about a page creation.

Pic 16

Or let’s say, you would like to add some meta data on every single CMS page:

Pic 17

Better CMS has a lot of different events and even more different methods to access information that you need from Better CMS. We are going to write documentation for them very soon as Wiki pages.

Conclusion

Congratulations, you’ve read the whole article! Now, please open your Visual Studio and truly try out this product for yourself.

If you encounter any issues and/or have any great ideas for how this product could be improved – please submit it here or try to implement it your self by making a Pull Request.

That’s all folks!