Introduction
Kaliko CMS is a free open source content management system that is built as a modular framework and supports development using ASP.NET MVC and WebForms. More information is found on the Kaliko CMS website.
I've written two full articles on how to build a complete website (see links under Next step), but since they are rather stuffed with information, they can be a bit daunting to get into. Therefore I wrote this article, as a barebone crash course in how to start develop with Kaliko CMS. This example uses MVC and SQLite, but you could as well be using WebForms and SQL Server.
If you want more information before diving into the project, please visit the Get started guide. Otherwise let's start coding!
Create a New Project
Create a new ASP.NET Web Application-project in Visual Studio. Select Empty under Select a template and MVC under Add folders and core references for.
Select TOOLS / NuGet Package Manager / Manage NuGet Packages for Solution in the menu.
Enter KalikoCMS in the searchfield and add the following packages:
- Kaliko CMS Core
- Kaliko CMS SQLite provider
- Kaliko CMS Mvc provider
- Kaliko CMS Identity provider
Once the packages are installed, open the file SetupAdminAccount.aspx located in the project root. Follow the instructions in the file; enter a password, uncomment the code and then run that page (for instance by selecting it in the project tree and hit Ctrl + Shift + W). The page should return a "?Role and user created!" message. You have now created your admin user.
For more information about the installation process and configuration, click here.
Create a Page Type
Add a new class under Models / Pages in your project and name it FirstPage.
Set the new class to inherit from CmsPage.
Add the attribute [PageType("FirstPage", "My first page type")] to the class. This will tell the system that this is a page type. The attribute can also be used to specify sorting, allowed child pages, etc.
Add a new virtual property of the type StringProperty and name it Headline. Add the attribute [Property("Headline")] to this property. This enables the system to detect this property and display a title in the editor. Please note that the property must be virtual, if not set to virtual you will not get a proper value loaded.
Add another virtual property, this time of the type HtmlProperty and name it MainBody. Add the attribute[Property("Main body")].
Add a last virtual property of the type ImageProperty and name it TopImage. Add the attribute [ImageProperty("Top image", Width = 800)]. This attribute is used for images and can control a few properties such - in this case that the image always should be 800 pixels wide.
Your code should look something like this:
namespace Quickstart.Models.Pages {
using KalikoCMS.Attributes;
using KalikoCMS.Core;
using KalikoCMS.PropertyType;
[PageType("FirstPage", "My first page type")]
public class FirstPage : CmsPage {
[Property("Headline")]
public virtual StringProperty Headline { get; set; }
[Property("Main body")]
public virtual HtmlProperty MainBody { get; set; }
[ImageProperty("Top image", Width = 800)]
public virtual ImageProperty TopImage { get; set; }
}
}
Create a Controller
Add a new controller under Controllers in the project and name it FirstPageController.
Remove the default Index-method and let the new controller inherit from PageController<FirstPage>. This will tell the system that this is the controller for the page type FirstPage.
Implement Index(StartPage currentPage) and return View(currentPage) in the method.
Your code should look something like this:
namespace Quickstart.Controllers {
using System.Web.Mvc;
using KalikoCMS.Mvc.Framework;
using Models.Pages;
public class FirstPageController : PageController<FirstPage> {
public override ActionResult Index(FirstPage currentPage) {
return View(currentPage);
}
}
}
Create a View
Add a new view under Views / FirstPage and name it Index.cshtml.
Declare the model of the FirstPage type.
Set the view's title to @Model.PageName. PageName is one of the properties that are available on all pages.
Add the defined page properties from our page type model: @Model.Headline, @Model.MainBody and @Model.TopImage. To generate the image as an HTML image element, use the method ToHtml() on the ImageProperty object.
Your code should look something like this:
@model Quickstart.Models.Pages.FirstPage
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta charset="UTF-8">
<title>@Model.PageName</title>
</head>
<body>
<div>
@Model.TopImage.ToHtml()
<h1>@Model.Headline</h1>
@Model.MainBody
</div>
</body>
</html>
Create a Page
It's time to create the first page in the system, so start the web application.
When navigating to the web root, we are faced with a message saying that no start page has been defined. This is what we now will fix.
Navigate to the admin-folder and log in using the user name and password you created in the previous step.
Select the root page and click on the Add page-button.
Select the page type My first page type.
Enter a page name and values to the other properties.
Click on Publish page.
Scroll to the bottom of the page. Below the properties is a page id in the form of a Guid. Copy the page id.
Open the web.config in the project root and find the startPageId attribte. Replace the empty Guid with the one you just copied.
Navigate to the web root once more. This time, your newly created page should show!
Next Step
That was a quickstart in how to develop using Kaliko CMS. As the next step, I would recommend to download one of the demo projects and read the accompanying articles as well as check out the Get started-documentation.
For more information on how to get started, check out this link.
Demo project using ASP.NET MVC and SQLite can be found on Github.
... and the accompanying article can be found here.
Demo project using WebForms and SQLite can be found on Github.
... and the accompanying article can be found here.
Api-documentation can be found here.
Looking forward to any questions or feedback! Also feel free to contribute to the project, it would be much appreciated. You'll find the project on Github.
History
