Develope your first Kooboo website (part I)

This is a two-part article explaining how you can develop a website in Kooboo CMS. Part I explains the standard way to develop a website in Kooboo CMS, and Part II demonstrates an innovative way using a conversation tool provided by the Kooboo team.

Before we start, we are assuming that you already familiar with basic HTML and web development and that you understand how to develop a static pure HTML base website. To make things even easier, we assume that you have developed a static HTML website and we would like to implement it in Kooboo CMS.

We take our samplesite as an example and re-implement it in Kooboo CMS.  The basic concept is very simple and contains three major steps. Firstly, copy the source code of homepage from your website and make it a layout and create the first homepage based on that layout. Second, fix all broken file references, like theme and scripts. Third, replace content with Kooboo elements.

1. Copy page source to a layout and create first page based on it.

First you need to create a new Kooboo CMS website.

Create_new_Kooboo_CMS_website.png


Next, go to the website that you would like to convert into Kooboo CMS. In this case, it is our samplesite. If you have the source code on file, just copy the source code, otherwise go to that website homepage, click View Page source to view and copy the source code of that page.

Make a new layout based on that source and create a new page based on that layout only and preview it.

Create_new_page_1.png

Create_new_page_2.png

create a page based on that layout now. 

Create_new_page_3.png

Create_new_page_4.png

Now you should see a site looks like:

Preview_sample_site.pngPreview_sample_site.png

This is because the reference link to the Style Sheet and JavaScript files is broken. We will show you how to repair it in the next section.



2. Repair Script, Theme files and image reference.

In the above layout, you should see the JavaScript and Style Sheet references tag in the header section.

1
<link rel="Stylesheet" href="/Kooboo-WebResource/Index/jQuery-Styles/20130130" type="text/css" />



Now we need to repair those references. If you develop the site yourself, you should have the JavaScript files and Theme files in your local path. If are copying the website from web URL, you need to first save that webpage to your local driver, so that all the Style Sheet and JavaScript files will be saved to your local hard disk as well.

After we have all the JavaScript and Theme files, go to the CMS backend again and upload all the files to the right folder.

For theme, create a new folder under Theme folder and put all .css files there. If you need to use image in your CSS, use relative image path and include an image folder in that theme folder.

Theme_folder.png


Edit the layout and put the following code in the header section as below.


Edit_layout.png


For broken image sources, use the custom files folder or change the relative source path to absolute source path for now. After that, you should have a new web page running identically to the original webpage.

Webpage.png

In the case that your theme css files are not applied to that webpage, you can find the setting to assign that theme folder to your layout at below screen.

Settings_theme.png

 

Step 3. Move all widgets into Kooboo elements and replace them with position and content in the layout.

Now you have a single webpage looks the same as the original pages, but is still all static content. Next we will replace the static content with Kooboo elements. For all available Kooboo elements please refer to our Kooboo concept document.

We first move the article section into a view and assign it back to that page.  On that page, we locate the area that we would like to move into a view. That is the area shown below.

Move_article_to_view.png


Copy that HTML part and create a new view based on it.


Copy_HTML_and_create_view.png


After a view is created, go back to that layout and replace the HTML code with a position tag.

Position_tag.png

Next, open the page designer and insert the view back to the right position.

Add_a_view.png

Now you have the article list part into a view and everything still looks the same as before. Next, we will replace the article list view with real content from the database.

Create a content type named Article

Create_content_type.png


And then create an article folder to store the list of articles and insert a few dummy articles.

Create_article_folder.png

Go back to article list view and create a new datarule to query the articles we just added.

Create_datarule_to_query_article.png

Follow the wizard in the Datarule designer and create your first Datarule

Create_datarule_1.png

Create_datarule_2.png



After you have created the Datarule, you can access the content items within that datarule. If you do not know how to access the content items, next to the datarule name, there are three icons with data access sample code.


Access_content_items.png

Replace the static content and HTML code with content items from Datarule.  You are done with articlelist.

Replacement of labels, HTML, Htmlblock works very similar as above, except those elements do not need to stored in the content type and content folder. 

To replace a label, you change the small text into Kooboo label, @("Label Text".Label())
To replace a HTML block, you first create a HTML block within the database and insert it back from the page visual designer. 
To replace some static HTML, you remove that part of HTML and insert them back as pure HTML from the page visual desinger. 

4. Repeat above steps for all pages.

Now you only need to repeat above steps to create all pages with correct Kooboo elements. You can reuse existing layouts or views in the second page.