Tutorials > Simple web presentation
Content:
2 — Create site and import resources
4 — Sections structure and main menu
5 — First section: simple static content
7 — Third section with subsections: links
8 — Sections redirection and URL modification
1 — Introduction
This tutorial will demonstrate creation of very simple web presentation. It will cover following topics:
- Site setup from an empty skeleton.
- Setting up a page template with layout class.
- Writing simple layout methods for menu and navigation and using them in template.
- Site sections and subsections: two-level menu, redirection, specifying sections URL.
- Simple content (and content type) creation
- using global content type,
- using derived content type, and
- using plain new content type.
We'll use a real-world example: a band web presentation, recreated in Cloudia CMS. This presentation has already been previously created using completely different PHP engine and note that it doesn't comply with some SEO best practices, and its design is deffinitely not proffesional. However, we'll keep every piece of result the same as original to demonstrate that there are no restrictions in the system, although some predefined content types, for example, are designed to follow SEO rules and spare you of some effort.
Although the presentation being created here is completely in Czech, you won't need to understand Czech to understand this tutorial.
2 — Create site and import resources
First step in this tutorial is setting up an empty site. This step is done differently based on the flavor of Cloudia platform you are using:
- If Cloudia Platform runs on your server, site creation process will be most likely customized, either based on shell script, or incorporated to section tree as additional context menu item.
- If you are using CloudiaHosting account, the first site (or more sites if requested) will already be set up for you. Adding another site is currently assisted process, meaning you have to contact Cloudia staff. This is mainly a security and usability precaution and may be changed in future, if proven useful.
As mentioned in the introduction, the presentation we will create here has already been running on a different PHP engine. Thanks to this fact, we already have all resources (images, JS files and stylesheets) available. To get them to Cloudia, we'll just
- take the existing directory structure and zip it. Here, you can see a zip file containing images, script and styles directories with predictable content,
- access "Files" tab of the left panel in administration interface (1) and select the root directory of your site (2),
- select "Upload" button in the top toolbar of the main grid (3), add our zip file (4), check "Unpack ZIP archives automatically" option (5) and hit the "Upload File(s)" button (6).
After this, all resources will be ready in the Cloudia file structure of your site.
3 — Basic page template
It is generally a good idea to have some common layout for all the pages in a web presentation or application, or at least in its sections. Similarily to the most of modern CMS's, Cloudia offers a templating system, which makes such task naturally first step in web development.
Before we start writing a template, let's quickly review template types in Cloudia CMS, as explained in the Web administrator guide:
- Page templates: .tpl files in /templates directory. Represents a HTML template for the page, into which the content is injected using custom Cloudia tags or PHP code. Each page template needs a layout PHP file named [template name]Layout.php in /library directory (e.g. template named "list" consists of two files: /templates/list.tpl and /library/listLayout.php). The PHP file has to define a class named [Template name]Layout (e.g. ListTemlate in our example), typically extending CommonLayout, defined in commonLayout.php.
- Content type templates: HTML snippets used to render a record of some type. These are defined as a part of content type definition.
See Web administrator guide for detailed documentation of templates.
Our first step will be to create a static template, a frame in which the content of site will be displayed. Web presentation we will build here had already been up & running on plain PHP, so we'll take PHP file used to render the site and replace all dynamic content with TODO placeholders.
We will use 3 Cloudia tags in the first iteration of page template:
- <% assetsPath %> provide base URL of our site (without tailing slash) and we'll use it to reference all static resources, as stylesheets, scripts and images.
- <% styles %> provides styles for all content types on the page.
- <% mainContent %> provides content of the node or record we are currently viewing.
Now, we'll save the template as main.tpl in /templates directory.
Next, we'll need to create a PHP layout class for the template. The class should be named MainLayout and it should be contained in /library/mainLayout.php file.
Now, we'll set this newly created template as a page template for root node of our site. To do that, select "main" in "main template", "inner template" and "detail template" fields of system section properties of our site node.
In later tutorials, we'll show how to take advantage of different templates.
As soon as template is set and all resources referenced in template and css files are uploaded, we should be able to access the site, which should look like this:
4 — Sections structure and main menu
After the static site is set up, we'd like to see some action. We'll create three different sections in this presentation (more to come in following tutorials). These sections will be
- news ("Novinky"),
- contact ("Kontakt"),
- links ("Odkazy").
First, we'll create nodes in our site structure, as described in the User guide. Next, we'll add all these nodes as a main menu items. Because we suppose that the news section will be frequently accessed, we'll create a shortcut by selecting "icon" in Section system properties. When user logs in to the site administration again, he will see a screen like the one bellow. Note the "Novinky" (news) icon in top toolbar, corresponding to the "news.png" value of "icon-menu" system property of the section.
Well, we got ourselves a structure. Now, let's make a site navigation!
Although default layout can offer methods providing menu and page titles, we'll make our own to fit in existing design. We'll write two functions in the MainLayout class: createMainMenu and createPageTitle. After these methods are created, we will be able to use <% mainMenu %> and <% pageTitle %> tags in main.tpl to generate main menu and page title, respectively.
As described in Web administrator guide, renderer passes a map of context parameters to the layout functions as a first argument. For menu rendering, we'll use the menu1 parameter, for page title, we'll need activeNodesArr and language.
Now, we should see a menu and a page title should be displayed both in title and page header.
5 — First section: simple static content
And now it's time for some actual content. The first section to be populated will be the "Kontakt" (contact) section. Its content will be a simple formatted block of text, citing contact informations such as an e-mail address.
Simple formatted text block is simple, and yet very useful type of content. Enclosing just one particle - language dependent formatted text block, it doesn't need any styles, structured templates, or events in most cases. These properties makes it ideal candidate for generic content type, defined common for all sites under Cloudia CMS root.
To create simple formatted text block, select the section where it should be created, then "Add record", and ensure that root ("Cloudia CMS") is checked in the top toolbar of the "Choose content type" dialog. Find and select "simple formatted block" and then "Create record". Record creation is described in detail in User guide.
After the content type is selected, just enter the text to show on page and here we go: our very first content:
6 — Second section: news
Next, we want our band to be able to publish news. We'll keep it simple for now, but we'd add tags, paging, or RSS in futher tutorials.
We have used a common content type "simple formatted block" in previous chapter, because its template doesn't contain any HTML structure and therefore it's not site-specific. Although a news item is simle as well, it is a structured type with several particles and its HTML structure will be site-specific, based on the layout of the site.
We could easily create our own content type for a news item from the scratch, but let's leave this for the next chapter and try something else. Among common content types, we can see a "news article" type. This is a default type we could use directly in the same way as simple formatted block in previous chapter, but its HTML structure probably wouldn't fit to our layout and result would not be satisfactory.
Let's copy the global content type to our site, so that we are able to modify it.
Once the content type is copied, we can see it under our site and we can select it to see its particles. Global "news article" content type has particles "title", "perex", "mainBody" and "custom_date", which are quite self-explanatory. Our web presentation, however will require neither perex, nor title: date and a body will be just enough. So we'll select perex and title particles in the main grid and hit the "Delete selected" button on the bottom toolbar.
Now, we'll edit the template of our new simplified news article to reflect original site structure. Note that we won't show any detailed view of the news article - its main body will be visible directly in the list of news. That's why we'll edit the "Template for perex", and leave "Template" blank. The following screenshot shows our new content type: its particles and tamplate for perex.
You can see that both PHP and custom tags are used in the template, and that "custom_date" value will be replaced by system value when not entered.
Once the content type is saved, we are ready to use it on our site. To try it out, we'll add a few news items, some with custom dates and some with defaults.
7 — Third section with subsections: links
The last section we will create in this tutorial will be a bit old-school: Section "Odkazy" ("Links") will be a plain list of links to related sites. This will be used to demonstrate subsections and creation of plain new content type.
Each subsection will represent a group of related links, such as musicians, festivals, etc.
Creating subsections in the site structure is easy, just select the links section in site structure panel and select "add section" in top toolbar or right-click context menu, as described in User guide.
To show submenu items, we will need to change createMainMenu method in our site layout class. Subsections can be accessed with submenu property of each menu item (retrieved from menu1 parameter)
Now, we should be able to see submenu items and page title changed according to subsection name.
Next, we'll create new content type for link. The new content type will be quite simple - it will contain
- URL: language independent short text, and
- description: short language-dependent text.
Creation of a new content type is described in Web administrator guide. In this case, we will name our content type "Link" and use two global particles for it:
- link for URL, and
- title for description.
The setup is illustrated on following screenshot:
Note, that the template is for a "perex" form of the record, that is the form which shows in the list of records in the node. We don't want any detailed view for single link, so the detail template (edited in "Template" tab) can be empty. However, we'll need a CSS styles for this list to make it look less ugly. This style will be in the "Styles" tab of above edit box:
After the new content type is set up, there is one thing left to do: use it! Select one of the subsections and start adding new records... Oh, and the band wants one more heading at the beginning of the list, so we'll add one more simple formatted block as the first record of each subnode, containing this header.
When all is done, we'll see this in admin:
and this on the site:
8 — Sections redirection and URL modification
Well, we have nice section with subsections, but there's still one issue: when the main "Odkazy" (links) section is selected, it will be empty, because all records are stored in its subsections. The convenient solution is a redirect: just select a node in "redirect" property of the "Odkazy" section to one of its subsections, and whenever user selects "Odkazy" section from menu, he will be redirected to the selected subsection.
The Cloudia engine generates SEO-friendly URLs based on section titles and tries to keep them short. That means that only deepest subsection name will appear in the URL as long as it's unique and its supersections doesn't specify fixed URL identifier. In case of our site, there are two considerations:
- we'd like to have e.g. /odkazy/muzikanti (translates to /links/musicians), rather than just /muzikanti, just because it's more self-explanatory (our band has some musicians, too ;) and it's not them who is listed here), and
- original site had generated slightly different URLs and we'd like to keep them the way they were, to preserve bookmarks.
For those reasons, we'll set the "URL namespace" in section system properties for "Odkazy" section (to keep it in url for subsections) and in some subsections (to override default generated URLs)
9 — Conclusion
We have just used a fraction of possibilities that Cloudia platform offers, and yet we already have set up a simple presentation with most used features. Although we chose to write a few lines of PHP code to generate menu items instead of using predefined methods, this code is still 100% reusable for newly created presentations by simply copying the template or just the method.
The site we have just created runs at tutorial1.ccms.cz.
The administration of the tutorial site can be made available on demand, fell free to contact Cloudia team for access information.