CMS Made Simple

This article is rather long but shows how easy, flexible and fast CMS Made Simple (CMSMS) can be.

CMS Made SimpleFollowing Benoît Henry‘s advice on CMS, I chose CMSMS for my first CMS experience. Before that, I had only developed my own CMS. Webdevelopers will consider it intuitve and flexible. You’ll find well-documented articles on CMSMS official Wiki.

CMSMS is a PHP-MySql Open Source solution I would implement for websites with straightforward requirements, for non-profit organization, for example, since it requires short development and quick implementation. You can download it at CMSMS.org.

This article is based on CMSMS v. 1.6.6.

The only negative aspect I would here mention is you’ll need to upgrade your CMSMS and modules, plugins,… implemented regularly for bug fixes and security fixes.

I managed to configure CMSMS for a website in a few hours (layout development had been prepared beforehand) with the following features :

  • url rewriting (dynamic urls of the type : http://www.mydomain.be/our_project.htm)
  • dynamic templates with Smarty (template engine for PHP)
  • internal search engine
  • private client area (+ login with captcha)
  • contact page (with PHP mail through CMSMailer)
  • meta tags description and keywords generated automatically
  • breadcrumb trails

CMSMS works with modules you install to add functionalities such as:

  • a form builder
  • a captcha form (test in form to check if user is a robot or a human being)
  • a calendar

You’ll find lots of modules, templates,… to be downloaded in CMSMS Forge.

Documentation

For my first install, I installed it with sample data which made adaptation much easier. Once installed, select Menu Layout / Templates and edit a template to check how the template engine (Smarty) works.

Modules and Tags (found in Menu Extensions) are provided with help files that detail the way you should implement functionalities.

CMSMS official Wiki offers well-documented articles on eveything you need to adapt CMSMS to your needs.

Webdevelopment features

Implementing CMSMS for a customer requires the webdeveloper to create the templates and css stylesheets, customize the website forms, thechosen modules,… and define administrators’ access through groups, users and permissions. CMSMS is flexible enough for you to create new groups of administrators and manage their rights so that they don’t set their website out of order. As an example, you can customize editors rights so that they can only modify page content and leave your scripting and parameters intact.

CMSMS Smarty templates

A key CMSMS feature is the use of templates to generate page content. Templates in CMSMS are accessible through menu Admin Menu layout > templates. CMSMS uses Smarty, a template engine that implements your template dynamically through the following kind of code, with the variable written inside curly brackets :

{metadata}

Put in between <head> and </head>, this variable prints global meta tags defined in menu Site Admin / Global Settings. That way, you can have all your pages display the following tags :

<meta http-equiv=”Content-type” content=”text/html; charset=iso-8859-1″ />

<meta http-equiv=”Content-Language” content=”fr-be” />

<meta name=”robots” content=”index,follow” />

<base url=”http://127.0.0.1/ael/cmsms” />

<link rel=”shortcut icon” href=”./favicon.ico” />

The next variable is based on the plugin called “autometa” :

{autometa}

This autometa plugin can be found in CMSMS Forge : autometa. Download it and place the php file in CMSMS plugins directory. Once inserted inside the <head> of your template, the plugin will generate meta description and meta keywords tags from the content of the page. If you want to customize your meta tags page per page rather than let autometa manage meta tags description and keywords (the latter being rather deprecated now), you can also do so (click the “Options” tab in the page content and fill in the “metadata for this page” field). Then type :

<meta name=”description” content=”description of the page content” />

<meta name=”keywords” content=”keywords, for, that, page” />

If you want to insert javascript in your template, add the code between {literal} and {/literal} tags :

{literal}

<script type=”text/javascript” language=”javascript” src=”./js/empty_fields.js”></script>

{/literal}

In the Admin menu Layout > Templates page, you may also click “CSS button” to attach a css stylesheet to the template. Then simply add :

{stylesheet}

in your template to implement the attached stylesheets in your <head>.

You’ll have to create your own stylesheets in Menu Layout > stylesheets beforehand.

If you want to add comment to your template, put it between {* any comment *}

{* this is how you add comments to your template *}

CMSMS and url rewriting in the twinkling of an eye

If you want CMSMS to render pretty urls of the following type : http://www.mycmsms.com/how-cmsms-works/content_types.htm instead of http://www.mycmsms.com/index.php?page=how-cmsms-works, you have to :

  • change some default variables in /config.php. Please set :

$config['url_rewriting'] = true;

$config['page_extension'] = ‘.htm’;

  • then create a .htaccess file at the root of your web project with the following lines :
SetEnv MAGIC_QUOTES 0
SetEnv REGISTER_GLOBALS 0
SetEnv PHP_VER 5
Options +FollowSymLinks
RewriteEngine on
RewriteCond %{HTTP_HOST} ^mycmsms.be$ [NC]
RewriteRule ^(.*)$ http://www. mycmsms.be/$1 [QSA,L,R=301]
#Sub-dir e.g: /cmsms
RewriteBase /
# 301 Redirect all requests that don’t contain a dot or trailing slash to
# include a trailing slash
RewriteCond %{REQUEST_URI} !/$
RewriteCond %{REQUEST_URI} !\.
RewriteRule ^(.*) %{REQUEST_URI}/ [R=301,L]
# Rewrites urls in the form of /parent/child/
# but only rewrites if the requested URL is not a file or directory
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.+)$ index.php?page=$1 [QSA]
Add breadcrumb trails to your template
You can display all available tags in Menu Extensions / tags : a click on tag “breadcrumbs” will tell you what it’s worth. Simply add :

{breadcrumbs starttext=’You are here’ root=’Home’ delimiter=’&raquo;’}
to the body of your template to display breadcrumbs trails. You can easily adapt it by changing the content of its attributes. Just refer to the help provided in Menu Extensions / tags.

Add an internal search engine to your template

 

You can configure the internal search engine module in Menu Extensions / Search and change the form parameters, the search template and the result template. Then simply add the following lines in your page template :
<div id=”search”>
{search search_method=”post”}
</div>

Add a private area to your CMSMS

In order to add a private area with login to your CMSMS, you’ll have to download 3 extra modules :

  • FrontEndUsers (FEU) (will allow you to manage front-end users)
  • CustomContent (will allow you to display different contents to your different front-end users)
  • Captcha (to be used to add a Captcha test in your login form)
Copy the directories of these modules in your CMSMS/Modules directory. Then install the modules in Menu Extensions / Modules in the right order (FrontEndUsers, CustomContent, Captcha).

FrontEndUsers (FEU)

Menu Users & Groups / FrontEndUsers Management is now available. Open it and

  • go to the “User properties” tab to add properties to the users profile (a property called “name” with “text” type and a property called “email” with “Email address” type)
  • go to the “Groups” tab to create a group called “client_users” and custom your properties (name and email optional or required, for example, and tick email asked in lost username)
  • go to the “Users” tab and add a user for that group (do not forget to tick the new user’s group). Then you’ll have to fill in the properties you’ve defined earlier.

Let’s create the login page. Switch to Menu Content / Add new content and create the login page with the following content :

{FrontEndUsers}

Then associate it with your main template (options tab).

Your client CMSMS now displays a login page with login form and captcha.

Customize content

Once your user is loggedin, the client CMSMS should display extra menu items : the private pages. This is rather easy to achieve and is managed by the CustomContent Module. You’ll have to create a private template to ge associated with private page.

You can copy the main template of your site by clicking the “copy” button.

Instead of displaying

{content}

directly, type:

{if $ccuser->loggedin()}

{content}

{else}

Sorry, you need to login first

{/if}

Then create a private page in Menu Content / Pages and associate it with the new private template in the Options tab.

Your private content should now be displayed properly once logged in.

Menu manager

CMSMS provides a Menu Manager to edit or create new menu templates.

First check what menu is loaded in your default template. Open Menu Layout / Templates and look for div id=”menus” content. Let’s assume the menu template is cssmenu_ulshadow.tpl.

Open Menu Layout / Menu Manager. You’ll see that your cssmenu_ulshadow.tpl is not editable (but read only). Import it to your database by clicking the Import button. Give it a new name (test in my case).

Edit test menu template. You’ll see some smarty code. Look for the first foreach loop and add the following line just under it :

{$node->id}

Then, you have to change your default page template to take your “test” menu into account. Go to Menu Layout / Templates, edit the default template (NClearBlue in my case) and change the menu div content to :

{*menu template=’cssmenu_ulshadow.tpl’*}

{menu template=”test1″}

I’ve just commented the default menu template and added my new test template.

Go to the client site, refresh your page and you’ll be able to identify the menu ID of your private area (57 in my case).

Back to the Menu Layout / Menu Manager : I edit my test Menu, erase my {$node->id} and replace it by :

{if (($node->id == 57 and $ccuser->loggedin()) or $node->id <> 57)}

which checks if the page being displayed is the private area. If it is, the user needs to have logged in.

The last thing to do is to add a

{/if}

just before the {/foreach} at the bottom of the page.

Webliography :

Smarty.net

Smarty basics (tuto)

CMSMS Forge

CMSMS official Wiki

One thought on “CMS Made Simple

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>