Perfecto CMS - Content management system
  • Русский язык
  • English version
Sign in
Create an account
PerfectoCMS Documentation
PerfectoCMS Documentation
You can find best practices on all major configuration procedures that will help you plan better your resources and environment.

Design integration

2,922 views / 16 Jan 2015 edited
Web page layouting – is a web page designing, which is done in editing program (e.g. Adobe Dreamviewer, Coda 2 or other) with the help of cutted graphic format design provided ( e.g.: *.psd – Adobe Photoshop)

Sites, created only with the help of HTML code has almost disappeared. Currently the web page layout is not exactly a site. For this purpose different CMS or self-described code are used, on which web page lay-outing can be put. Here a cap at Perfecto CMS will be considered.

Templates structure

Thus, you have already pre-made-up layout of your future website or redesigned layout of the current site. You need to be skilled coder to do the design integration of our system. For example, consider a standard template system, which is located in the ./templates/frontend/default/ directory.

By default system have following files and folders:
Any package of Perfecto CMS
index.tpl - Main template layouts
header.tpl - Website header layouts
footer.tpl - Website footer layouts
news.tpl - News layout
static.tpl - Any static pages layouts
search.tpl - Search page layouts
errors.tpl - HTTP errors page layouts
feedback.tpl - Feedback page layouts
news.block.tpl - Last news layouts
tags.block.tpl - Cloud tags layouts
Files included in «Basic» and «Maxi» packages
account.tpl - Account pages layouts
account.block.tpl - Account block layouts
forgot.tpl - Forgot page layouts
payment.tpl - Payment layouts
Files included in «Maxi» packages
comments.tpl - Commenting layouts
reviews.tpl - Reviews layouts
votes.block.tpl - Voting block layouts
Additional folders with files
/css/ - Website StyleSheets folder
/js/ - Website JavaScripts folder
/images/ - Website images folder
/fonts/ - Website fonts folder


index.tpl - The main part of the layout. This file include header and footer globally and other modules layouts.
header.tpl - This layout is header of document, contain meta tags, JavaScript and CSS including
footer.tpl - This layout is footer of document
news.tpl, static.tpl, errors.tpl, feedback.tpl, search.tpl... - Layouts of modules

Example: index.tpl

	{#mod_global.header}

<^^^div class="middle">
<^^^div class="container">
<^^^main class="content">
{#mod.news}
{#mod.static}
{#mod.feedback}
{#mod.search}
{#mod.errors}
<^^^/main>
<^^^/div>

<^^^aside class="left-sidebar">

<^^^!-- IFDEF^^^: homepage -->
{#mod_global.votes.block}
<^^^!-- EL^^^SE -->
{#mod_global.mymodule.block}
<^^^!-- END^^^IF -->

<^^^/aside>
<^^^/div>

{#mod_global.footer}
{#mod_global.header} - This code include globally header.tpl file into main template
{#mod_global.footer} - This code include globally footer.tpl file into main template
{#mod.news} - This code include «News» module (news.tpl, news.php), but it display only in «News» pages
{#mod_global.votes.block} and {#mod_global.mymodule.block} - This is left sidebar modules and included globally
IFDЕF, ЕLSE, ЕNDIF - This is if/else construction by template system. Use as an example, through the comment tag.
Please note!
Any module included via {#mod.MODULE_NAME} or {#mod_global.MODULE_NAME} method.
#mod - include module only on his page
#mod_global - include module globally

Example: header.tpl

	<^^^!DOCTYPE html>
<^^^html>
<^^^head>
<^^^meta charset="utf-8" />
<^^^title>{page_title}<^^^/title>
<^^^meta name="description" content="{page_descriptions}" />
<^^^meta name="keywords" content="{page_keywords}" />
<^^^base href="{global.base_dir}" />
<^^^link rel="stylesheet" href="templates/frontend/{global.frontend_tpl}/css/style.css" />
<^^^link rel="stylesheet" href="templates/frontend/{global.frontend_tpl}/css/fonts.min.css" />
<^^^link rel="stylesheet" href="templates/frontend/{global.frontend_tpl}/css/core.min.css" />
<^^^script type="text/javascript" src="templates/frontend/{global.frontend_tpl}/js/jquery-1.11.1.min.js"><^^^/script>
<^^^script type="text/javascript" src="templates/frontend/{global.frontend_tpl}/js/core.min.js"><^^^/script>
<^^^/head>

<^^^body>
<^^^div class="wrapper">
<^^^header class="header">
...header blocks here...
<^^^/header>
{global.frontend_tpl} - This is config variable to set the selected template name
{global.base_dir} - This is base directory variable assigned in configuration file
{page_title}, {page_descriptions}, {page_keywords} - This is current page meta data variables. You can set meta data on adding news, static page or other

Example: footer.tpl

			<^^^footer class="footer">
...footer blocks here...
<^^^/footer>

<^^^/div>

<^^^/body>
<^^^/html>

Assign variable

Handler side /modules/frontend/news/module.php
	/*
«assign» is used for assigning template variables during the execution of a template
Assignment of variables in-template is essentially placing application logic into the presentation that may be better handled in PHP
This example located in news module, but you can assign variable in any module
*/
$tpl->assign('name', 'David Build');
$tpl->assign('bithday', '1990, 11 January');
Template side /templates/frontend/default/news.tpl
	The value of name is {name}
And {name} born is {bithday}
The above template would output:
The value of name is David Build
And David Build born on 1990, 11 January

Dynamic block

Handler side /modules/frontend/news/module.php
	/*
«define_dynamic» is used to set more cycle through an array of values
This makes it easy to for example
This example located in news module, but you can assign variable in any module
*/

$data = array(
1 => array('name'=>'John Smith', 'bithday' => '1990, 22 August'),
2 => array('name'=>'David Build', 'bithday' => '1990, 11 January'),
3 => array('name'=>'Naka Saya', 'bithday' => '1987, 07 November')
);

# people_list - is cycle name
# news - is current template name
$tpl->define_dynamic("people_list","news");
foreach ($data as $id => $value) {
$tpl->assign("id", $id);
$tpl->assign("name", $value['name']);
$tpl->assign("bithday", $value['bithday']);

# parse - parsing every loop of cycle after data is set
$tpl->parse('PEOPLE_LIST', '.people_list');
}
Template side /templates/frontend/default/news.tpl
	<^^^!-- BEGIN DYNAMIC BLOCK: people_list -->
{id}: {name} born on {bithday}
<^^^!-- END DYNAMIC BLOCK: people_list -->
The above template would output:
1: John Smith born on 1990, 22 August
2: David Build born on 1990, 11 January
3: Naka Saya born on 1987, 07 November

Dynamic block into another dynamic block

Handler side /modules/frontend/news/module.php
	/*
«define_dynamic» is used to set more cycle through an array of values
This makes it easy to for example
This example located in news module, but you can assign variable in any module
*/

$cats = array(1 => 'Animals', 2 => 'Cars', 3 => 'Gadgets');
$subcats = array(
1 => array('name'=>'Cats', 'category' => 1),
2 => array('name'=>'Dogs', 'category' => 1),
3 => array('name'=>'Horse', 'category' => 1),
4 => array('name'=>'BMW', 'category' => 2),
5 => array('name'=>'Mercedes', 'category' => 2),
6 => array('name'=>'Ford', 'category' => 2),
7 => array('name'=>'Apple', 'category' => 3),
8 => array('name'=>'Samsung', 'category' => 3),
9 => array('name'=>'Lenovo', 'category' => 3)
);

# category_list, subcategory_list - is cycle name
# news - is current template name
$tpl->define_dynamic("category_list","news");
$tpl->define_dynamic("subcategory_list","news");
foreach ($cats as $cat => $cat_id) {

$tpl->assign('category_name', $cat);

foreach ($subcats as $subcat => $subcat_id) {
if ($cat_id == $subcat['category']) {
$tpl->assign('subcategory_name', $subcat['name']);
$tpl->parse('SUBCATEGORY_LIST', '.subcategory_list');
}
}
# clear - clean-up data of current sub-category loop
$tpl->clear("SUBCATEGORY_LIST");

# parse - parsing every loop of cycle after category is set
$tpl->parse('CATEGORY_LIST', '.category_list');
}
Template side /templates/frontend/default/news.tpl
	<^^^!-- BEGIN DYNAMIC BLOCK: category_list -->

<^^^b>{category_name}<^^^/b>

<^^^!-- BEGIN DYNAMIC BLOCK: subcategory_list -->
- {subcategory_name}
<^^^!-- END DYNAMIC BLOCK: subcategory_list -->

<^^^!-- END DYNAMIC BLOCK: category_list -->
The above template would output:
Animals
- Cats
- Dogs
- Horse
Cars
- BMW
- Mercedes
- Ford
Gadgets
- Apple
- Samsung
- Lenovo

Language variables

Language file /language/en/frontend/news.lng
	<^^^?php
# any language file contain associative array with key => value, and named $lang
$lang = array (
'news_title' => "Live news",
'hello' => "Hello world! This is my first language variable"
");
?>
Handler side /modules/frontend/news/module.php
	# include language file
# by default you have included default.lng file
$core->language("news");

/*
$lang_const['news']['news_title'] - $lang_const is global variable defined by system core
news - This is name of the module
news_title - This is name of key from language file
*/
$tpl->assign('news_title', $lang_const['news']['news_title']);
$tpl->assign('hello', $lang_const['news']['hello']);
Template side /templates/frontend/default/news.tpl
	{#lng_news_news_title}
{#lng_news_hello}
The above template would output:
Live news
Hello world! This is my first language variable
Website design order
Unique offer for customers of Perfecto CMS.
If you want an original design let us know and we will contact you to discuss the details.
Please note
We appreciate your time and for save time, please download the blank of design order, complete it and send to our mailbox: Our email
Approximate price
600 USD

Your browser is out of date!

Please download the latest version of Internet Explorer
We recommend to use another modern browser!