Add pages

Kooboo page is a set of configuration values that will be used to generate the final presentation of that page. Kooboo page can be a static page that only contains static HTML or a dynamic page that connects to a database for content. 

Static pages

Static pages are pages that only contain HTML and do not load anything from a database. 

You need to have a layout ready first before you can create any static or dynamic pages. When you have layouts or pages ready, you can go to the start page and click root page or any subpage to create another page. 

static_page_create.png


Select the layout you want to edit the page in the visual page designer. Click the "Add Html" icon to add static HTML to the page. 

static_page_edit.png



Dynamic pages 

A dynamic web page is a web page with web content from a content repository or database. The content varies based on parameters provided by a user or a computer program.

Besides using advanced modules, Kooboo provides two other easy ways to create dynamic pages. You can directly add a data folder to a page and create both a content list page and a content detail page. A different, more advanced way is to use view and datarule. Please see the steps below.

1. Adding data folder to a page.

Go to the Start page of Kooboo CMS and select Add sub page to create a new page.

In the page designer, name the page Article  and click the icon Add a data folder.

Dynamic_page_add_folders


When the data folder selection windows open, select the folder and check List of Content

Dynamic_page_select_folder


Click OK and then click Save to save your page. You have created a new article list page.  You can preview now to see what you have done.


Next we will create the article detail page. 

In the Start page, click on the Article page we just created, select New sub page and then select the two_column layout

Dynamic_page_detail


Call this page Detail, and also click the Add a data folder icon.

Dynamic_page_returntype_detail


Click Ok, then Click Save. We have created the new article list and article detail. Click preview in the dropdown menu to preview them.


Page mapping


If you name the list page according to the content type name, and make the detail page a sub page of the list page with the name of the detail page, the page links will all be generated correctly. If you name the page in a different way, Kooboo CMS may not be able to generate the link to the detail page correctly. If Kooboo CMS cannot find the destination page, it will record the missing link in the page mapping and you can make the adjustment manually.

Page_mapping


Change the default content display template

If you add a data folder directly to a page, it will use the default content display to present that content into web page. You will be able to change this default display template within the Kooboo CMS. 

This feature of editing default content display template is temporarily not available in Kooboo CMS 4.0. 

2. Dynamic page with view and data rule

An more advanced way of making dynamic page is to create both list and detail view and then insert the views into corresponding pages.  In this tutorial, we will show you how you can create dynamic pages using MVC view and Kooboo Data rule.

Go to Views list page, click Create to create a new view. In versions earlier than Kooboo CMS 4.0, there is a possibliity to choose different view engine. Because Razor become the most popular ASP.NET view engine, we have skipped support of other view engines. 

View_list_create

In the view page, we first need to query content from database in order for view engine to render them. Data query is done by Kooboo Datarule. More information can be found at the Data rule document.

In the view editing page, click Add under the data rule section to create a new data rule.

View_add_datarule


In the data rule design page, first select the folder that contains the data we need, then select the correct return data type. We selected Article folder with the option of List of contents in the selected folder

Datarule_1


Click Next to go to the data query filter design page. Give your datarule a name and define your content filters. If the content folder contains category folder information, the category folder filters will be available as well. 


Datarule_2


Click Save to save your datarule and return to view editing page. You can now see the datarule you created and also a few icons next to the datarule name. Click on the C# icon will insert the C# code sample to render the Datarule content.


View_with_datarule


You may modify the generated code. After modification, click Save to finish the editing. You have created an article list view.

Using similar steps, you can create an article detail view as well. {UserKey} is used as default parameter to query content.

View_detail_1


View_detail_filter



View_detail_2


You have created both list and detail view for the article folder now. Go to the Start page and add two pages, one with the mylistview view, and the other add the mydetailview.

Page_add_view

Page_select_view

 

Page mapping

The same as page mapping for adding a data folder to a page (described earlier in this document). You may want to check the Action mapping menu if there is not an immediate, direct link to the detail page. 

You have created the dynamic pages with view and Kooboo datarule. You may now go to the Start page and preview what you have made.