CMS Made Simple 1.6
Beginner's Guide
Create a fully funconal and professional website using
CMS Made Simple
Soa Hauschildt
BIRMINGHAM - MUMBAI
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
CMS Made Simple 1.6
Beginner's Guide
Copyright © 2010 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system,
or transmied in any form or by any means, without the prior wrien permission of the
publisher, except in the case of brief quotaons embedded in crical arcles or reviews.
Every eort has been made in the preparaon of this book to ensure the accuracy of the
informaon presented. However, the informaon contained in this book is sold without
warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers
and distributors will be held liable for any damages caused or alleged to be caused directly or
indirectly by this book.
Packt Publishing has endeavored to provide trademark informaon about all of the
companies and products menoned in this book by the appropriate use of capitals.
However, Packt Publishing cannot guarantee the accuracy of this informaon.
First published: March 2010
Producon Reference: 1250210
Published by Packt Publishing Ltd.
32 Lincoln Road
Olton
Birmingham, B27 6PA, UK.
ISBN 978-1-847198-20-4
www.packtpub.com
Cover Image by Vinayak Chiar ([email protected])
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Credits
Author
Soa Hauschildt
Reviewers
Jeremy Bass
Yury V. Zaytsev
Acquision Editor
Sarah Cullington
Development Editor
Chaitanya Apte
Technical Editors
Gauri Iyer
Smita Solanki
Copy Editor
Leonard D'Silva
Indexer
Hemangini Bari
Editorial Team Leader
Aanchal Kumar
Project Team Leader
Lata Basantani
Project Coordinator
Srimoyee Ghoshal
Proofreader
Lesley Harrison
Graphics
Geetanjali Sawant
Producon Coordinator
Shantanu Zagade
Cover Work
Shantanu Zagade
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
About the Author
Soa Hauschildt is a web mastering and web development tutor, who started designing
and developing professional websites in 1995 just before her graduaon in Computer
Science. With experience as a data warehouse developer and ERP consultant, she became
a self-employed tutor. During her career, she has been contracted by IT and management
academies, the German army, several city administraons, and internaonal companies
such as Siemens. Her work as a tutor is always focused on praccal training combined with
a theorecal background in order to get fast and handy results.
I would like to express my gratude to all those who gave me the possibility
to complete this book. I want to thank my husband Jens for invesng a
huge amount of me in the rst reviews of this book and his paent love.
Furthermore, I have to thank Yury V. Zaytsev for his smulang support and
interesng discussions.
A special thanks goes to my parents who encouraged me to go ahead with
this book and gave me incredible mental support.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
About the Reviewers
Jeremy Bass began learning web construcon at the age of 12 using the "view source" on
sites such as the young Yahoo and the late GeoCies. Armed with a computer and a talent
for the ne arts, he has been in computer-based graphics ever since. A few of the high points
are stents at an internaonal telescope (Gemini in Hawaii) and winning a Telly award for
3D animaon. Currently, Jeremy works with Digital Barn Producons in Idaho, and Dened
Clarity in Philadelphia along with freelancing and parcipaon in the CMSMS community.
I would like to thank my wife, Aimee, for understanding I work long hours
not just to grow, but for her and the kids. This was fun.
Yury V. Zaytsev has an advanced degree in physics from the Nizhny Novgorod State
University, Russia, and is currently working towards his doctorate in Computaonal
Neuroscience at the University of Freiburg, Germany. Yury's primary interests concern
scienc compung, modeling, and simulaon, parcularly of the complex dynamics
of large populaons of neurons.
Yury's rst contact with computers was at the age of 6 when he programmed his rst
text-based role-playing game in BASIC on a historical 80386 machine. This inspired a never
ending passion for programming, which also led to a brief career at the age of 17 in freelance
web development for companies in Russia, Europe, and overseas.
Having successfully implemented many commercial and hobby projects with CMS Made
Simple, Yury is happy to contribute to the widespread adopon of CMSMS for the benet
of both users and developers.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Table of Contents
Preface 1
Chapter 1: Building Websites with CMS Made Simple 7
What is a CMS? 8
A CMS versus a website builder 9
Why CMS Made Simple? 9
Case study website 10
Funconal specicaons 10
Preparing for installaon 11
Browser 11
FTP browser 12
File archiver 12
Uploading CMS Made Simple's les 12
Summary 18
Chapter 2: Geng Started 19
Installing CMS Made Simple step-by-step 20
Choosing a language 20
Step 1: Validang le integrity (oponal) 21
Step 2: Checking requirements 22
Step 3: Tesng le creaon mask (oponal) 25
Step 4: Admin account informaon 26
Step 5: Database informaon 27
Sample content and templates 28
Step 6: Creang tables 28
Step 7: Installaon is complete 29
Understanding the admin console 29
Finishing the installaon 33
Sending e-mails with CMS 33
Known issues 35
Summary 36
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Table of Contents
[ ii ]
Chapter 3: Creang Pages and Navigaon 37
Creang pages 39
Time for acon – adding a new page to the website 39
Eding pages 42
Time for acon – eding exisng pages 42
Previewing changes 43
Changing the page alias 43
Deleng pages 43
Formang page content 43
Conguring TinyMCE 45
Time for acon – acvang search and replace funcon 48
Adding meta tags 50
Time for acon – adding meta tags to pages 50
Adding global meta tags 52
Understanding page hierarchy 52
Time for acon – adding subpages to a website 52
Breadcrumbs 54
Search engine friendly URLs 54
Time for acon – creang search engine friendly URLs 55
Geng more success from hierarchy 56
Controlling the navigaon of the website 57
Time for acon – prevenng pages from displaying in the navigaon 57
What is your start page? 58
More navigaon control with content types 59
Ecient work with pages 60
Creang a new page as a copy of exisng one 60
Changing mulple pages at once 60
Creang pages and navigaon 63
Summary 64
Chapter 4: Design and Layout 65
Working with exisng templates 66
Time for acon – imporng a ready-made template 66
Creang a new template 67
Time for acon – creang a new template 68
Adding dynamic parts to templates 69
Time for acon – adding Smarty tags to a template 70
Having control over the output 72
Time for acon – adding Smarty parameters to the template 72
Using plugins in content 74
Adding stylesheets to the template 74
Creang a new stylesheet 75
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Table of Contents
[ iii ]
Time for acon – creang the stylesheet 75
Media types for stylesheets 78
Creang navigaon for the website 78
Time for acon – adding navigaon to the template 79
Designing navigaon—the pure CSS way 80
Time for acon – design navigaon with pure CSS 80
Adding sidebar navigaon 83
Porng a HTML template 84
Time for acon – porng a HTML template to CMS Made Simple 85
Learning Smarty basics 91
Working with Smarty variables 91
Time for acon – geng Smarty variables 91
Controlling output with the IF funcon 94
Time for acon – displaying tags in dependence of the page 94
Creang navigaon template with Smarty loop 96
Time for acon – creang a menu template 97
Exporng templates 101
Time for acon – displaying tags in dependence of the page 101
Summary 104
Chapter 5: Using Core Modules 107
Understanding global content blocks 108
Time for acon – adding a global content block to the website 108
Managing news arcles with module News 110
Displaying news on the website 111
Time for acon – displaying news on the page 111
Adding news 112
Time for acon – adding news items 112
News categories 114
Time for acon – creang news categories 114
Customizing news templates 116
Time for acon – creang a new summary template 117
Adding custom elds to the module News 119
Time for acon – adding custom elds 120
Using the news tle as the page tle 122
Using the search funcon with the module Search 122
Time for acon – adding a search form 123
Browsing les with File Manager 125
Using Image Manager 126
Time for acon – using the image editor 126
Using images in template and content 128
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Table of Contents
[ iv ]
Using Menu Manager in content 130
Time for acon – creang a sitemap 130
Prinng pages 133
Time for acon – adding a print link 133
Adding media type to stylesheets 135
Generang a PDF version of the page 136
Adding more modules to your website 136
Using the Module Manager 136
Installing addional modules 137
Time for acon – module installaon 137
Installing modules with XML le 139
Available upgrades 140
How to nd the best CMS Made Simple module for your purpose 140
Uninstalling and removing modules 140
Summary 142
Chapter 6: Users and Permissions 145
Understanding users and their roles 146
Time for acon – creang a new user 146
Time for acon – assigning a user to a group 148
Content permissions 150
Time for acon – creang an editor account 150
Addional editors 152
Creang new pages 153
Time for acon – adding page permissions 153
Designer permissions 155
Time for acon – creang a test area for the designer 156
Viewing the admin log 157
Archiving changes and restoring them 158
Time for acon – restoring changes made by an editor 159
Overview of all default permissions 160
Module permissions 162
User nocaons 163
Summary 165
Chapter 7: Using Third-party Modules 167
Creang a photo gallery 168
Time for acon – creang the rst gallery 168
Adding albums to a gallery 170
Using the gallery on other pages 170
Time for acon – adding random images to the template 170
Creang your own gallery template 172
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Table of Contents
[ v ]
Adding forms with the module Form Builder 174
Time for acon – adding a contact form to the website 174
Customizing the contact form 176
Adding new elds to the forms 178
Adding salutaon as a radio buon group 178
Adding department as a pulldown eld 180
Adding mulple choice selecon with the checkbox group 181
Adding a Captcha to the forms 182
Sending out newsleers 183
Time for acon – sending mails to registered customers 184
Displaying videos 188
Adding your own player 190
Summary 194
Chapter 8: Creang Your Own Funconality 195
Creang a product catalog 195
Creang a new catalog-like module 196
Step 1: Basic informaon about the module 197
Step 2: Creang levels 198
Step 3: Finishing creaon and module installaon 207
Conguring the new Products Catalogue module 208
Creang the product list template 209
Time for acon – creang a new list template 209
Implemenng service desk funconality 211
Managing visitors' logins 211
Time for acon – creang the rst user account 212
Useful sengs for module FrontEndUsers 214
Templates for the FrontEndUsers module 215
Creang protected pages 216
Time for acon – protecng the service desk 217
Creang user area for support requests 218
Adding answer elds to the ckets 222
Time for acon – creang new elds 222
Templates for cket list and cket detail view 223
Time for acon – customizing list of ckets 223
Enabling dialog within ckets 226
Summary 230
Chapter 9: E-commerce Workshop 231
Module Products 232
Time for acon – adding the rst product 233
Creang custom elds 234
Dene your own elds 235
Creang a product hierarchy 236
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Table of Contents
[ vi ]
Customizing product templates 237
Creang detail view for product 244
Module Cart 245
Time for acon – connecng products and cart 245
Module Orders 247
Time for acon – adding the checkout step 248
Integrang the login screen 250
Integrang customer registraon 252
Module Paypal Gateway 255
Time for acon – creang test accounts 256
Conguring PayPal's seller account 258
Payment Receiving Preferences 258
Instant Payment Nocaon 259
Language encoding 260
Oponal modules for the e-commerce suite 261
Summary 263
Chapter 10: Advanced Use of CMS Made Simple 265
Localizaon and translaon 265
Conguring dates 266
Making mullingual websites 267
Eding language entries 269
The hierarchy soluon 270
Adding ags as the language menu 270
Separate news arcles by language 271
CMS Made Simple translaon center 272
Translang modules in your installaon 273
Time for acon – custom translaon of the module 274
Addional content and controls for editors 274
Addional content blocks 275
Time for acon – adding a content block for subtles 275
Extra page aribute 276
Time for acon – using extra page aributes 276
Search engine opmizaon (SEO) 277
Title of your website 277
Meta tags 279
Meta tag keywords 280
Using SEO markup in templates 281
Using SEO markup in pages 282
Using keywords in page alias and image les 283
Search engine friendly URLs 284
Time for acon – turning on search engine friendly URLs 284
Avoiding duplicate content 286
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Table of Contents
[ vii ]
Consequently use domain with www or without www 286
Avoid publishing of print versions of your pages 287
Use tag for canonical URLs 288
Creang XML sitemaps for search engines 288
Visitor stascs 289
User-dened tags 289
How to make a user-dened tag 290
Time for acon – creang your own user-dened tag 290
Parameters for tags 291
How to get the page informaon in UDT 292
Understanding events 293
Time for acon – sending mails aer page update 293
Integrang jQuery in navigaon 294
Time for acon – integrang jQuery in navigaon 295
Summary 298
Chapter 11: Administraon and Troubleshoong 299
Geng system informaon 300
Backing up your website 303
Backing up website les 304
Time for acon – creang a backup with the module 304
Backing up database 306
Time for acon – creang a database backup 306
Manual backup 307
Backing up database with phpMyAdmin 307
Time for acon – creang a backup with phpMyAdmin 308
Move CMS Made Simple to another web hosng 309
Step 1 310
Step 2 310
Step 3 310
Step 4 310
Step 5 311
Upgrading CMS Made Simple 311
Opmizing (performance tuning) 314
Compression 314
Persistent connecons 315
CSS in global sengs and stac CSS 315
How to secure your installaon 316
System vericaon 317
Usernames and passwords 319
Hiding admin directory 320
File permissions 320
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Table of Contents
[ viii ]
CMS Made Simple and server version 322
Troubleshoong 323
CMS Made Simple Wiki 323
Help for modules 324
Built-in help 324
What does this do? 324
How do I use it? 324
Parameters 324
Forge (bugs and feature request) 325
How to get a quick answer in the forum 325
Using search 325
Finding the right board 326
Topic subject 327
Provide as much informaon as possible 327
Describe the problem step-by-step 328
Help others if you have been helped 328
Commercial support 329
Support contracts 329
Soware development 330
What about larger projects? 330
Is the development team a corporaon or company? 330
How do I contact you? 331
Summary 333
Appendix: Pop Quiz Answers 335
Chapter 3 335
Creang Pages and Navigaon 335
Chapter 4 336
Design and Layout 336
Chapter 5 336
Using Core Modules 336
Chapter 6 337
Users and Permissions 337
Chapter 7 337
Using Third-party Modules 337
Chapter 8 337
Creang Your Own Funconality 337
Chapter 9 338
E-commerce Workshop 338
Chapter 10 338
Advanced Use of CMS Made Simple 338
Chapter 11 338
Administraon and Troubleshoong 338
Index 339
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Preface
CMS Made Simple is an open source content management system that allows rapid website
development in a fracon of the normal me, while avoiding hours of coding by providing
modules and third-party add-ons. With this book in hand, you will be able to harness the
power of this modular and extensible content management system at your ngerps.
This guide for CMS Made Simple is based on praccal and working soluons allowing you to
understand how this powerful and simple applicaon can support you in your daily work.
The workshop helps you to create engaging, eecve, and easy-to-use CMS websites for
businesses, clubs, and organizaons.
This is a step-by-step case study, aimed at helping you to build a complete professional
website with CMS Made Simple. You can take a ready-to-use template or implement your
own custom design, enrich the website with features such as a photo gallery, an e-commerce
soluon with a PayPal checkout, and forms of any complexity or popular jQuery eects, and
nish it o by opmizing it for search engines. The useful HTML and CSS code snippets are
opmized and can be easily adapted for your own projects. Chapter-by-chapter, you will put
yourself into the role of a web designer, developer, administrator, and business manager,
thus learning every aspect needed for building rich websites that are very simple to manage.
What this book covers
Chapter 1, Building Websites with CMS Made Simple introduces the case study website with
its funconal requirements.
Chapter 2, Geng Started explains how to install CMS Made Simple, how its admin console
is organized, and how to congure CMS Made Simple for sending out e-mails.
Chapter 3, Creang Pages and Navigaon focuses on creang, eding, and organizing pages.
It introduces the page hierarchy and search engine friendly URLs. At the end of this chapter,
you will have the complete page structure for the case study website.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Preface
[ 2 ]
Chapter 4, Design and Layout explains how to create a new template and how to port a
ready HTML/CSS design to CMS Made Simple. At the end of this chapter, you will be able
to implement an individual design for a website.
Chapter 5, Using Core Modules covers standard modules of CMS Made Simple, such as News,
Search, Image and File Manager, and Prinng (including built-in PDF output), and shows you
how to install addional modules such as FAQ.
Chapter 6, Users and Permissions explains how the permissions of dierent users can be
organized in the admin console.
Chapter 7, Using Third-party Modules explains how to implement a photo gallery with
an individual design, add a contact form with custom elds, install Captcha funconality,
manage newsleers, and implement YouTube videos on the website.
Chapter 8, Creang Your Own funconality introduces two approaches to creang your
own funconality. In the rst part, you learn how to use the module maker to create a
product catalog. In the second part, you learn how to create a service desk funconality
using a module.
Chapter 9, E-commerce Workshop covers a step-by-step workshop to see how an
e-commerce shop with a PayPal checkout can be realized with the e-commerce suite.
Chapter 10, Advanced Use of CMS Made Simple explains how to create mullingual websites,
make search engine opmizaons, and use jQuery plugins in the navigaon of the website.
The integraon of a visitor stasc and some advanced techniques enrich the funconality
of the case study website.
Chapter 11, Administraon and Troubleshoong explains how to keep your website
up-to-date and secure and how to do some performance tuning. At the end of the
chapter, you will get an answer to the queson "How can I get quick help in the forum?"
Appendix, Pop Quiz Answers contains the answers to the pop quizzes throughout the book.
What you need for this book
CMS Made Simple is a PHP applicaon that uses a MySQL database. This means that you
need a web hosng with PHP and MySQL to run CMS Made Simple. You can install a web
server on your local PC for tesng environments and/or on the remote web hosng for live
websites. The requirements for CMS Made Simple are as follows:
• Web server on Linux/Unix or Windows 2000/XP/ME/2003 or OS X
• PHP 5.2.x (NOT PHP 5.3)
o safe_mode should be o
o At least 16 MB of available memory for PHP
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Preface
[ 3 ]
o PHP tokenizer support enabled
o At least one of ImageMagick or GDlib enabled
• MySQL 4.1+ or PostgreSQL 7+
• Enough access to your server to upload les and change
some permissions
Who this book is for
This book is perfect for newcomers as well as webmasters who are looking for an
introducon to building powerful and professional websites with a content management
system. Basic knowledge of HTML and CSS is the only requirement. The workshop covers
all aspects of web publishing and is aimed for web designers, web developers, editors,
and web managers.
Conventions
In this book, you will nd several headings appearing frequently.
To give clear instrucons of how to complete a procedure or task, we use:
Time for action – heading
1. Acon 1
2. Acon 2
3. Acon 3
Instrucons oen need some extra explanaon so that they make sense, so they are
followed with:
What just happened?
This heading explains the working of tasks or instrucons that you have just completed.
You will also nd some other learning aids in the book, including:
Pop quiz – heading
These are short mulple choice quesons intended to help you test your own understanding.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Preface
[ 4 ]
Have a go hero – heading
These set praccal challenges and give you ideas for experimenng with what you
have learned.
You will also nd a number of styles of text that disnguish between dierent kinds of
informaon. Here are some examples of these styles, and an explanaon of their meaning.
Code words in text are shown as follows: "Your root directory can be public_html (or
wwwroot or htdocs), please ask your provider if you are not sure where to upload the les."
A block of code is set as follows:
#top-navi ul
{
height: 22px;
padding: 0px;
margin: 10px 0;
border-top: 1px solid #e5e4e2;
border-bottom: 1px solid #e5e4e2;
}
When we wish to draw your aenon to a parcular part of a code block, the relevant lines
or items are set in bold:
{foreach from=$nodelist item=node}
<a href="{$node->url}">
<img src="uploads/design/{$node->alias}.jpg"
alt="{$node->menutext}" border="0" />
</a>
{/foreach}
New terms and important words are shown in bold. Words that you see on the screen, in
menus or dialog boxes for example, appear in the text like this: "Open My First Style Sheet
from the list of stylesheets (Layout | Stylesheets) for edit."
Warnings or important notes appear in a box like this.
Tips and tricks appear like this.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Preface
[ 5 ]
Reader feedback
Feedback from our readers is always welcome. Let us know what you think about this
book—what you liked or may have disliked. Reader feedback is important for us to
develop tles that you really get the most out of.
To send us general feedback, simply send an e-mail to [email protected], and
menon the book tle via the subject of your message.
If there is a book that you need and would like to see us publish, please send us a note in the
SUGGEST A TITLE form on www.packtpub.com or e-mail [email protected]. If there
is a topic that you have experse in and you are interested in either wring or contribung
to a book on, see our author guide on www.packtpub.com/authors.
Customer support
Now that you are the proud owner of a Packt book, we have a number of things to help you
to get the most from your purchase.
Downloading the example code for the book
Visit http://www.packtpub.com/files/code/8204_Code.zip
to directly download the example code.
The downloadable les contain instrucons on how to use them.
In this book, you may occasionally come across a single line of code appearing on two
dierent lines. Please note that this has been done only for the purpose of indentaon due
to space constraints. When using such code make sure it's on one line in your script le.
Errata
Although we have taken every care to ensure the accuracy of our content, mistakes do happen.
If you nd a mistake in one of our books—maybe a mistake in the text or the code—we
would be grateful if you would report this to us. By doing so, you can save other readers from
frustraon and help us improve subsequent versions of this book. If you nd any errata, please
report them by vising http://www.packtpub.com/support, selecng your book, clicking
on the let us know link, and entering the details of your errata. Once your errata are veried,
your submission will be accepted and the errata will be uploaded on our website, or added
to any list of exisng errata, under the Errata secon of that tle. Any exisng errata can be
viewed by selecng your tle from http://www.packtpub.com/support.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Preface
[ 6 ]
Piracy
Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt,
we take the protecon of our copyright and licenses very seriously. If you come across any
illegal copies of our works, in any form, on the Internet, please provide us with the locaon
address or website name immediately so that we can pursue a remedy.
Please contact us at [email protected] with a link to the suspected
pirated material.
We appreciate your help in protecng our authors, and our ability to bring you
valuable content.
Questions
You can contact us at [email protected] if you are having a problem with any
aspect of the book, and we will do our best to address it.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
1
Building Websites with CMS
Made Simple
You already have some experience in creang websites with HTML and CSS
and you know that you do not need any special soware to create websites.
However, if the website starts growing or your customers have more and
more changes for the exisng homepage, you wish you could automate some
tasks like adding a new page to the website or slight changes in the design
without having to edit every HTML le. CMS helps you to apply any change
throughout the website with minimal eorts. It saves your me and reduces
repeang tasks.
If you're holding this book in your hand, then it means that you are going to build a website
with a CMS. A CMS is a complex applicaon that works in the background and helps to
separate dierent tasks while creang and running websites. Those tasks can include:
Designing and laying out the website
Implemenng dierent website funconalies
Wring and publishing content
Analyzing and promong the website
When creang websites with pure HTML and CSS, you usually mix logic, presentaon, and
content within the same code. However, this is me consuming and inexible. For example,
aer adding addional navigaon items or changing the year of copyright in the footer
secon of the page, you have to synchronize the changes made in every HTML le. Your
customers may not be able to manage the content of their websites by themselves, as they
would need HTML knowledge to do it. The soluon to all the issues listed is a step towards
content management system.
So let's get started with it...
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Building Websites with CMS Made Simple
[ 8 ]
What is a CMS?
CMS is an abbreviaon for content management system. Generally, it is an applicaon that
helps to create a website structure and manage its content. By content, we mean any type of
documents such as pages, images, structured data as products or users, and so on.
The most important goal of any CMS is the strict separaon of content, design, and
programming. You do not need to understand how a CMS is programmed when you write
and publish the content. You do not need to be a web designer to create new pages and
organize them into the navigaon of the website. A programmer creates funconalies. A
designer creates a layout without knowing how the program code is wrien and what exactly
the content of every page will be. The editor uses the funcons supplied by the programmer.
The wrien content is automacally pasted into the layout created by the designer. That's it!
Everyone does the job he/she can do best.
Typically, a CMS is used to oer the ability to manage the content of the website without
any programming knowledge. The webmaster uses the CMS to create websites for customers
who would like to manage their content by themselves. Once the design is made and the
funconality is implemented, the customer can start entering his/her content. He/she does
not care about anything else. He/she uses a graphical user interface to manage the content
that is wrapped into the design.
A CMS consists of les and, in the case of CMS Made Simple, a database. Files provide
funcons that can retrieve any data from the database: content, design, features, and so on.
The data retrieved is then wrapped as HTML and sent to the client (browser), because your
visitors do not care how your website is made.
Internet service provider (ISP)
Your web server
with installed CMS
CMSMS
requires
database
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 1
[ 9 ]
In the last image, you see a client-server structure. The server is your web space where the
CMS is installed along with the database. Clients are visitors to your website. This means that
to run a CMS, especially CMS Made Simple, you need some web space where you can create
a new database and install CMS Made Simple. We will install CMS Made Simple step-by-step
in the next chapter.
A CMS versus a website builder
A CMS is not a website builder. A website builder is used by people who would like to
build websites without learning the technical aspects of web page producon. They use
ready-made design templates and select from the limited funcons that the website builderdesign templates and select from the limited funcons that the website builder
oers. This kind of website producon is inexible and is oen used to build private pages.
A CMS caters to professional webmasters who create an individual website's layout and
integrate any features that a customer needs.any features that a customer needs. features that a customer needs.
Why CMS Made Simple?Simple??
You have decided to build a website with CMS Made Simple. Good choice! CMS Made Simple
has several advantages:
It's free for personal and commercial use.
It's simple. You won't need more than half an hour to introduce your customer to
the usage of the CMS. It is mostly intuive.
It's exible in design. Any design that is created in HTML and CSS can be ported to
CMS Made Simple. There are no restricons.
It's modular. The basic funconality of CMS Made Simple can be extended
by installing over 100 addional modules that are oered for free on the
ocial website.
It's popular. You are not alone. A large internaonal community helps you to solve
your individual issues. Thousands of websites are already built using CMS Made
Simple, so you are not going to be alone.
It's open source. You can create your own funconality the way you need.
You can avoid provider lock-in to a certain proprietary closed source CMS soluon. If a
provider of proprietary soware decides to charge you more, goes out of business, or does
not want to incorporate desired new funconalies, then there's nothing you can do. With
an Open Source CMS, if you face a problem that you can't solve on your own, you can at
least hire a programmer who will solve it for you.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Building Websites with CMS Made Simple
[ 10 ]
Case study website
In this book, we will work on a case study website that will be completed at the end of
Chapter 8, Creang Your Own Funconality, and can be lled with content and published
at this point. Imagine that you have to create a business website for the company
businessWorld from scratch. businessWorld is a company that needs a website based on a
CMS, as the content of the website will be managed by the sta of the company. Our task is
to create a basic website structure, implement the custom layout delivered in HTML and CSS,
and provide the funconalies that the company describes in the funconal specicaons.
Functional specications
The total number of pages is not menoned. The sta will add any required pages in the
course of me. The new pages should automacally be added to the navigaon of the
website. The layout will be delivered as an HTML or CSS template and must be ported to
CMS Made Simple.
Besides the ordinary content pages, the website should also include the following:
A news secon, where news arcles are created, categorized, and published to the
website at the given date
A search funcon for content pages and news arcles
A prinng ability as PDF for all pages
A FAQ secon that can be consequently extended with new quesons and answers
A photo gallery, where products images and photos of the team members can be
organized in albums
A product catalog with custom elds and product hierarchy
A contact form to avoid direct e-mail communicaon and reduce spam
A newsleer with self-subscripon by the website visitor
A service desk for registered customers
Dierent editor permissions are required for each secon of the website. There will be some
sta members who are allowed to manage only news arcles. Others will be responsible
for the products catalog, but will not have access to the news area, and so on. The website
should be opmized for search engines. During the lifeme of the website, the webmaster
is required to regularly update the website if new releases of the modules or of core
CMS Made Simple are published. Now that we know the specicaons, let's move
on to preparing our system for installaon.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 1
[ 11 ]
Preparing for installation
First of all, gather the details required for the installaon of CMS Made Simple. You will need
to know the following:
Data Your value
Domain (website address)
http://
FTP host
FTP user
FTP password
Database host address
Database port (oponal)
Database name*
Database username
Database password
*You have to create an empty database before you start the installaon. It depends on your
hosng as to how the new database can be created. Generally, a database can be created in
the admin panel of your web hosng. Ask your provider for help if you face any dicules.
All the informaon listed in the table should be available before you start the installaon.
Missing any of this informaon will make the installaon of CMS Made Simple impossible.
The informaon requested can be obtained from your hosng's support. Figure out and
write down all the required access data now. You will need it during the setup and
conguraon process.
To start with the setup of CMS Made Simple on your web hosng, your domain should be
registered and connected. Test it now. Open your browser, and give your domain name
in the address bar. OK? If not, your domain provider will help you to solve any issues.
Browser
You can use any browser to manage CMS Made Simple, except Internet Explorer 6. This
browser is prey old. It was released in August, 2001 and does not meet the requirements
of the modern Internet. Nevertheless, visitors of your website who use Internet Explorer 6
will not have any dicules viewing your pages. This restricon is valid only for you as the
webmaster of the website.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Building Websites with CMS Made Simple
[ 12 ]
FTP browser browser
You will need FTP access to your website. This kind of access is available on almost every
web hosng. With the FTP connecon data (see the previous table), you can connect to the
hosng and upload all les that are required for installing and running CMS Made Simple.
There are many free FTP browsers that you can use. If you do not have an FTP browser,
then I recommend the open source soware FileZilla that is distributed free of charge
on http://filezilla-project.org/. Download and install FileZilla right now.
You need only FileZilla Client, not FileZilla Server!
File archiver
A le archiver is a program that you can use to extract the les of CMS Made Simple onto your
local disk. As the les of CMS Made Simple are distributed as archives, the program should
be able to handle tar.gz les. If you do not have a le archiver, then you can use the open
source applicaon 7-Zip that can be freely downloaded from http://www.7-zip.org.
Now that we have all the access informaon and required soware, we can start with
the installaon.
Uploading CMS Made Simple's les
The CMS Made Simple les can be downloaded from the ocial website of CMS Made
Simple. Open http://cmsmadesimple.org, and click on Downloads | CMSMS Releases
in the top main navigaon. You will see the list of les that are available for download, but
you do not need all of them.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 1
[ 13 ]
For every release, there is a bunch of les. The newest release is placed at the very top
of the list. There are two dierent versions of CMS Made Simple—full version and base
version. There is no dierence in the funconality or features, just in the included languages.
The base version includes only English for the administraon console of CMS Made Simple,
whereas the full version includes all translaons of the admin console (over twenty
languages). So, when you need only the English language in the administraon console
of your website, you can take the base version. It is a bit smaller than the full version.
Find the le named cmsmadesimple-X.X.X-full.tar.gz or cmsmadesimple-X.X.X-
base.tar.gz (depending on the version you need). Here, X.X.X stands for the number of
the release. For example, for release 1.6.6 (displayed in the last screenshot), you will have to
download the le cmsmadesimple-1.6.6-full.tar.gz or cmsmadesimple-1.6.6-
base.tar.gz.
Click on the le to save it to your local disk. Then, using 7-Zip or any other le archiver
of your choice, extract it onto your local disk, so that you can see what is inside. To extract
using 7-Zip, right-click on the le, and select 7-Zip | Extract Here, as shown in the
following screenshot:
This will create a new le called cmsmadesimple.1.6.6-full.tar. The numbers
in the lename depends on the version and release number of CMS Made Simple that
you have downloaded. Right-click on this new le again, and select 7-Zip | Extract to
"cmsmadesimple-1.6.6-full\", as shown in the next screenshot:
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Building Websites with CMS Made Simple
[ 14 ]
This acon will create a new folder called cmsmadesimple-1.6.6-full on your local disk
(or similar depending on the version and release number). This folder contains all les that
you need to install CMS Made Simple. You have to upload them to your web space now.
Open FileZilla or an FTP browser of your choice. You have to connect to your web hosng to
upload the les. In FileZilla, click on File | Site Manager. In Site Manager, click the New Site
buon. You should see a dialog window, as shown in the following screenshot:
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 1
[ 15 ]
Enter your FTP host in the eld Host on the right-hand side. Then click on the eld
Logontype and select Normal from the list. Now, you can enter your FTP User and FTP
Password in the respecve elds below. Your FTP login details should have been provided by
your hosng company. Contact your hosng company's support if you encounter any issues.
Click on Connect. The connecon should be established, and you will see a screen similar to
the following:
On the le-hand side of the screen, you can see your local disk. Navigate to the folder where
you have extracted the installaon les of CMS Made Simple. On the right-hand side, you see
the remote folder of your web hosng.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Building Websites with CMS Made Simple
[ 16 ]
You have to upload all les and folders from the local disk with exactly the same folder
structure to the root or to a subdirectory on the web space. Your root directory can be
public_html (or wwwroot or htdocs), please ask your provider if you are not sure where
to upload the les. Locang the les in the root directory will make your site available to
the users at http://www.yourdomain.com. If you create a subdirectory below the root
directory, for example, public_html/somename, then your website will be available only
in the subdirectory as http://www.yourdomain.com/somename. I recommend uploading
the les to the root directory, unless you have already installed other applicaons there.
To upload all folders and les of CMS Made Simple, select everything on the le-hand (local)
side, right-click, and select Upload.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 1
[ 17 ]
Depending on your connecon, it may take more than een minutes to upload the les. As
the FTP browser creates some connecons to the server, it may happen that some les are
already being copied with other connecons. In this case, you will see a window similar to
the following:
Choose Overwrite as the acon, and check the box Always use this acon. Wait unl all the
les have been transferred to the web space and unl the upload is complete.
When the transfer is complete, you can start with the step-by-step installaon program of
CMS Made Simple. You start the installaon process for CMS Made Simple in the browser
by typing http://www.yourdomain.com in the address bar (you use your own domain
name). If you do not see any installaon screen, then you have uploaded the les into the
wrong folder on your web space. Ask your provider where the les should be located.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Building Websites with CMS Made Simple
[ 18 ]
Summary
In this chapter, a brief introducon to the enre book has been made.
Specically, we covered the following:
CMSes in general and the advantages of CMS Made Simple
The funconal specicaons for the case study website that is used throughout
the book
Preparing our system for installing CMSMS.
We're now ready to start with the installaon of CMS Made Simple.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
2
Getting Started
Before you start creang a website with CMS Made Simple, you have to install
the applicaon on your web hosng and make some important conguraons
that will have an impact on everything you do with the website in future. To
install CMS Made Simple, you should understand what is web hosng. You
should be able to create an empty database in your web hosng account and
upload CMS Made Simple's installaon les through FTP.
In this chapter, we will:
Install CMS Made Simple
Learn about the admin console and how it is organized
Finish the installaon
Congure the e-mail sengs
CMS Made Simple is a PHP applicaon that uses a MySQL database. This means that
you need web hosng with PHP and MySQL to run CMS Made Simple. You can install a
web server on a local PC for tesng environments and/or on remote web hosng for live
websites. The requirements for CMS Made Simple are as follows:
Web server on Linux/Unix or Windows 2000/XP/ME/2003 or OS X
PHP 5.2.x (not PHP 5.3)
safe_mode should be o
At least 16 MB of available memory for PHP
PHP tokenizer support enabled
At least one of ImageMagick or GDlib enabled
MySQL 4.1+ or PostgreSQL 7+
Enough access to your server to upload les and change some permissions
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Geng Started
[ 20 ]
These requirements are not special and are covered by most hosng providers. To test CMS
Made Simple for free without any obligaon, you can even set up CMS Made Simple on free
web hosng that meets the requirements stated. If in doubt, ask on the CMS Made Simple
forum (http://forum.cmsmadesimple.org) for any hosng recommendaons.
Installing CMS Made Simple step-by-step
The CMS Made Simple installer is started automacally when you enter your domain name
in the address bar of the browser. The installer assists you step-by-step during the enre
installaon process.
Choosing a language
First you choose the installaon language. In the drop-down eld, you see all languages
available in the installaon package. In the base version of CMS Made Simple, you can
choose only English. The full version has more languages included.
Consider that the language you choose here is used only during the installaon. The
language of the website and admin console can be changed later on. Click on Submit.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 2
[ 21 ]
Step 1: Validating le integrity (optional)
In the rst step, you can oponally validate the integrity of the installaon le. This will help
you idenfy potenal problems, for example if some les have been damaged during FTP
transfer or are incomplete due to network issues. If there were no issues while uploading the
les to the web hosng, then ignore this step and click on Connue. Validaon can also be
done any me aer the installaon is complete.
If you would like to validate, then you will need the checksum le corresponding
to your version: cmsmadesimple-1.6.6-full-checksum.dat or cmsmadesimple-
1.6.6-base-checksum.dat. This le is available for download from the ocial website.
Go to http://cmsmadesimple.org, click Downloads | CMSMS Releases, and save the
checksum le to your local disk. Choose the le in the eld above, and click on Test.
This step is oponal. Click on Connue.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Geng Started
[ 22 ]
Step 2: Checking requirements
In the second step, the installaon program tests the sengs of your web hosng. Check the
Result column in the Required sengs secon. There should not be any failures or warnings.
The most common failure is:
File not writable! (/xxxx/htdocs/cong.php)
This means that the le config.php either does not exist in the root directory of the
installaon or there is no write permission for it.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 2
[ 23 ]
If the le does not exist, create an empty le named config.php in a text editor (not a
word processor). In Windows, open Notepad (this text editor comes with Windows), and
without typing anything in the document, click on File | Save As. Choose a locaon to save
the le, and use "config.php" (including the quotes) as the lename to ensure that the
right extension (.php) is used. Upload that le via FTP to the folder where the CMS Made
Simple installaon les were uploaded. The config.php le should be in the same folder
as the index.php le, as shown in the following screenshot:
Check if the le you have created and uploaded has the le type PHP (some editors may
append .txt extension to the end of the lename). If necessary, rename the le to
config.php.
If the le already exists, open FileZilla or any other browser of your choice and right-click on
it. Choose File permissions and enter 777 in the Numeric value eld. Click on OK.
Go back to your browser, and click on Try again at the end of the sengs check; the failure
should disappear.
If you have other failures or warnings in the Required sengs secon and if you're unsure
how to handle them, then take a screenshot of the page, and send it to your provider.
He/she will help you to solve the problem.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Geng Started
[ 24 ]
You can ignore warnings in the Recommended sengs secon. You most probably will not
encounter any problems while running your website even if you do not correct them. However,
if you can follow the recommendaons given to resolve the warnings, then please do it.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 2
[ 25 ]
On some web servers, you have to change permissions of the uploaded folders. If you're
using FileZilla, then right-click on the remote folder, and select File permissions. In the dialog
window Change le aributes, enter 777 in the Numeric value eld. You should make those
changes to the following folders:
tmp/templates_c
tmp/cache
uploads
uploads/images
modules
Click on Connue.
Step 3: Testing le creation mask (optional)
In this step, you can oponally test if CMS Made Simple is allowed to create les on your
web hosng. Click on Test or just ignore this step and click on Connue.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Geng Started
[ 26 ]
Step 4: Admin account information
Pay aenon to this step. You are going to create an administrator account for your website.
With this data, you gain access to the administraon console of your website aer it has
been installed. Remember or write down the administrator's username and password that
you enter in this step. Provide a valid e-mail address for your account. If you forget your
password someday, then a reminder will be sent to this e-mail address.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 2
[ 27 ]
You can check the box for E-Mail Account Informaon. CMS Made Simple will try to send a
conrmaon mail to your e-mail account. However, do not rely on it due to the individual
hosng sengs. We will congure the e-mail sengs of CMS Made Simple later in this chapter.
Click on Connue.
Step 5: Database information
In this step, change the name of the website or leave it as it is. This informaon can be
changed any me aer the installaon.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Geng Started
[ 28 ]
For the database informaon, use the access data for the database that you gained while
preparing for the installaon.
1. Replace Database host address with your individual data.
2. Replace Database name with the name of your database.
3. Enter the database Username.
4. Enter the database Password and oponally the Database port (if any).
These are the access credenals for your database. If you are not sure what to enter in these
elds, then ask your hosng provider.
Sample content and templates
In the last eld of this installaon step, you have to decide whether you would like to install
sample content and templates. Sample content is a useful resource for your rst introducon
to CMS Made Simple, as it includes more than twenty pages with an overview of what CMS
Made Simple is and how it works. However, the default templates are dicult for beginners
to understand, as they are complex and look overloaded.
For our website, we will not install any default content or templates.
Click on Connue.
Step 6: Creating tables
If the connecon to the database was successful and the tables in the database were created,
then you will see the message Success! at the end of this step, as shown in the next screenshot.
Leave all the values in the elds below the message as they are, and click on Connue.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 2
[ 29 ]
Step 7: Installation is complete
You're done! Congratulaons. You can access your website by typing the domain name in
the address bar of the browser, for example, http://www.yourdomain.com. The admin
console is placed at http://www.yourdomain.com/admin. Click on go to the Admin
Panel. Normally, you are already logged in to it. If not, then use the data that you entered
in step 4 of the installaon process.
Understanding the admin console
The admin console is the heart of CMS Made Simple. This is where the website administrator
(you) will work from. Here you add pages and ll them with content, choose the layout and
style of your pages, install extensions for extra funconality, set permissions for users and
groups, and congure the enre website.
The admin console is the backend; as opposed to the frontend, which is what
visitors to your site can see.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Geng Started
[ 30 ]
Log in to the admin console with the address http://www.yourdomain.com/admin,
using the data from step 4 of the installaon process. The administrator of the website
can also add addional users (see Chapter 6, Users and Permissions).
Everything in the admin console is accessed through the main horizontal menu. When
you rst enter the admin area, you also see a sitemap of what can be accessed through
each menu.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 2
[ 31 ]
In the sitemap for any menu item, when you click on the main horizontal menu
(CMS, Content, Layout, Users & Groups, and so on), all subitems of that menu
item are shown.
Let's take a quick walkthrough of what's in the admin console.
CMS: In the CMS menu, you can open the admin sitemap (see the next screenshot),
the frontend page (View Site) in a new window, or Logout.
Content: Here you can manage the content of your site. You can add and edit pages,
upload and manage images and les, and also add, edit, and remove news. If you
have installed addional content modules (such as a guestbook or FAQ), then they
appear in this secon as well. Lastly, in the content menu, you can create global
content blocks that will be used on the enre website in dierent places and edited
from one place.
Layout: Here you can style and format the look of your page in the way you want.
For the general layout, you use templates. In the layout menu, you can also access
the Stylesheets. Using stylesheets (CSS), you can style dierent elements of
your page.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Geng Started
[ 32 ]
Users & Groups: With this menu item, you can add users that should have access
to the admin console of your website and select what permissions they will have.
You can put users in groups to easily select permissions for the whole group at the
same me.
Extensions: These are add-ons that give extra funconality to CMS Made Simple.
The standard installaon of CMS Made Simple includes only some basic features.
With extensions, you can add more or less any funconality to your site. Extensions
can be either modules or tags (also called plugins).
Site Admin: Here you can change the sengs and preferences for the enre
website, get system informaon, and verify the le's integrity. Any changes
made to your website by you or other users are tracked in Admin Log.
My Preferences: Here you can change your personal sengs. You can also manage
shortcuts to the pages that are most frequently used in the admin area. Click on My
Account, if you would like to change the username of the administrator account,
his/her password, or the e-mail associated with the account.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 2
[ 33 ]
Finishing the installation
Immediately aer installaon, you see two unhandled nocaons in the dashboard
area below the main menu. Click on the sign + beside the nocaons to expand the
dashboard area.
The rst nocaon informs you that the install folder sll exists on the web server. This
folder contains the installaon program you have used to set up CMS Made Simple. Once
CMS Made Simple is installed and is running, you don't need this folder, and therefore, you
should delete it or at least rename it. If you do not, then everybody can start the installaon
program again and thus replace your website with a new installaon. This would be a big
security issue, so delete the folder right now.
Aer the folder is deleted (or renamed), refresh the admin console to see the rst
message disappear.
The second message deals with the e-mail sengs you should congure before running CMS
Made Simple.
Sending e-mails with CMS
CMS Made Simple sends e-mails with the module CMSMailer. The conguraon of the
CMSMailer module is very important. If you do not congure it, then you will not receive the
e-mail with new login informaon, should you ever forget your administrator password. This
module is also used by many other CMS Made Simple modules that send out e-mails such as
FrontEndUsers, Orders, or FormBuilder.
You will see this nocaon in the dashboard of CMS Made Simple ll you have congured
the module.
In the admin console, in the main horizontal navigaon, select Extensions | CMSMailer. Set
the Character Set to u-8. Then, choose sendmail in the Mailer method eld. Fill the eld
From address with an exisng e-mail address. When CMS sends e-mails, the recipient will
see this e-mail as the sender address. You have to enter an exisng e-mail address here, as
due to spam and security sengs on your web hosng, CMS Made Simple will probably not
be able to send out e-mails.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Geng Started
[ 34 ]
Fill in the From Username eld. The name given here will be assigned to the mail address in
the recipient's mail client.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 2
[ 35 ]
Click on Submit, and conrm the changes.
Test your sengs using the last eld on the same page. In the Test Email Address eld, enter
any e-mail address (not one from the eld From Address) where you have access to the mail
box. CMS Made Simple will send a test message to the e-mail address given in this eld. Click
on the Send Test Message buon, and control the incoming messages of the e-mail address
given in the eld Test Email Address. Did you receive the test message?
If not, wait for some me and then check your spam folder. Somemes test messages are
ltered out and treated as spam. If the test message has not been sent, then something is
wrong with the conguraon of the CMSMailer module.
Known issues
Check the Sendmail locaon eld (your hosng provider has to conrm that it is
right or he/she should provide you with your individual locaon).
Check the e-mail address entered in the From address eld. It must be an exisng
e-mail address, and it has to be located on your web hosng. If you enter any other
e-mail address, then your server will not be able to send out e-mails. To use e-mail
addresses of the public e-mail services such as Gmail or GMX, you have to congure
the module with SMTP as the Mailer method. This method requires that you ll in
the elds considering SMTP. SMTP sengs are individual for any e-mail provider.
Check the spam folder and lter of the Test Email Address, somemes test
messages are sorted out or immediately deleted.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Geng Started
[ 36 ]
Summary
At the end of this chapter, you should have a clean installaon of CMS Made Simple.
Specically, we covered:
Installaon of the program: CMS Made Simple is delivered with a simple installaon
program that guides you step-by-step through the setup process. We have
performed the steps to get CMS Made Simple running.
Overview of the admin console: The admin console is like a cockpit in a plane. It is a
place from where you can control the enre website. In the course of this book, you
will learn every part in more detail.
Sending e-mails: You have congured CMS Made Simple so that it can send mails
from the admin console. If you forget your admin password, then you will receive
a reminder e-mail with instrucons on how to recover it. All core and most of the
third-party modules of CMS Made Simple rely on this funconality. Once congured,
you do not need to make it for each module separately.
In the next chapter, we will see how you create the website structure and build
website navigaon.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
3
Creating Pages and Navigation
In this chapter, you will learn how to create new pages, edit exisng pages,
control the navigaon of your website, and organize pages according to your
website's plan. As a result, you will get a complete website structure, a kind of
skeleton for your website.
Let's see how we can plan a website. Yes, we should plan before making anything material.
You have to spend me on this step because you will in fact save me aerwards by avoiding
the need to do some me-consuming rebuilding, recreang, or reorganizing of your website.
Take a piece of paper and write down the main parts of the website and its purpose. Write
down the main idea of the website, then add the main parts (building your navigaon
structure) and proceed unl you do not have any other ideas. Do not try to nd any soluon
or the right tool to create your website at this me. Do not ask: "How would I realize this or
that?". You have to hold everything you would like to see on the website without considering
the technical details. Plan as if you have a magic wand for creang websites.
For example, a company website needs a secon where the company is represented, a way
to display its products or services catalog, a client center, and a contact form; rene and
add each part. Refer to the example of the company website we create in this guide:
BUSINESS
WORLD
Client Center
Contact Us
Privacy Policy
Sitemap
Announcements / News
Company History
Team / Employees
FAQ / Glossary
Newsletter
Service Desk
Our Company
Products
Photo Gallery
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Creang Pages and Navigaon
[ 38 ]
Planning your website will also help us to choose the appropriate design for it. The best
design will fail if your website plan does not match the already created navigaon. In the
example website plan, you can easily indicate the main navigaon (marked in bold),
subnavigaon (marked in grey), and the common structure of the website. It is
important to have a rough plan and that we do not change it very oen.
It is likely that you will have more and more ideas while planning the website—write them
down! The advantage of planning in this way is that you are not restricted at all. You can note
down all your ideas now, select the feasible tasks, and concentrate on them. Later on, you
can add new parts that are not mandatory for the rst implementaon of your website. It is
important to dierenate between nice-to-have features and something that you cannot
live without.
If you create a website plan to keep all your ideas in mind, you can avoid creang pages that
contain only one sentence like "Under construcon". Good websites don't have any pages
that are not ready. If there are any, then they should not be shown to the visitor. Imagine
seeing a noce about personal style consultaon in the window of a clothes shop. You go
into the shop, but the clerk says: "Sorry! This service is sll under construcon." What was
the purpose of calling aenon to it? Some webmasters add such pages to the website just
"to keep them in mind". You can keep them in mind in a more ecient way if you write down
the main structure of your website in a separate place.
Ask your friends or family members what they plan to add to the website and
keep their ideas as well. Consider dierent age groups and interests while
planning to broaden the scope of your visitors.
If everything is perfect, then go through the main secons in your website plan and mark the
parts that can be done immediately (all the secons on the previously menoned website
plan will be discussed in this guide). Other parts should not be deleted from the plan but
marked as postponed. Normally, you have enough stu at the beginning. Concentrate on
these feasible points and keep the postponed points in mind.
When you are ready with the website plan, print it out, put it beside your PC, and start
working on your website.
In this chapter, we will:
Create and edit some pages
Learn about page hierarchy
Control the navigaon of the website
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 3
[ 39 ]
Creating pages
We will begin by creang a rough structure for our website. A website consists of pages,
which are linked to each other. The navigaon of the website helps the visitor to nd the
pages containing the requested informaon. A website must have at least one page and
therefore, the rst page is already created in your admin console aer installaon. It is the
start page of your website, and it is called Home.
Time for action – adding a new page to the website
Your website requires a page where informaon about the company is represented. It is the
page for the secon Our Company in the website plan. Let's create a new page as follows:
1. In the admin console of your website, click on Content | Pages and then on the
link Add New Content.
2. Fill in the elds Title and Content Type as shown in the following screenshot:
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Creang Pages and Navigaon
[ 40 ]
3. Click on Submit.
4. Click on the magnifying glass icon at the top-right of the admin console to view your
website and nd the new page added to the main navigaon of the website.
What just happened?
You have just added a new page to your website. The page has the tle Our Company
and is now listed in current pages of your website in the admin console. The page is
also automacally added to the main navigaon of the website. It has sample company
informaon in the content eld. This text is displayed on the Our Company page on the
website when you navigate to the page.
You have entered only a lile informaon to create a new page. However, other
things happened.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 3
[ 41 ]
Menu text has been created from the tle of the page. A page address (URL) has
been created from the tle of the page. It is a part of the page link that is placed aer
index.php?page= in the address bar of the browser when you navigate to the page. In
CMS Made Simple, we call this part the page alias. The page alias is unique within your
website. You can have a lot of pages with the same tle and menu text, but all these pages
will have a dierent page alias. As the page alias is used to create a link to a specic page,
you cannot have two dierent pages with the same link, and logically you cannot have the
same page alias for two dierent pages.
You do not need to care about integrang the created page into the navigaon of
your website. All created pages will be displayed in the navigaon if you do not state
anything else.
Now, you can create all pages from the rst level of your website, thus creang the main
navigaon on the top of the website. Add the following pages:
Products
Client Center
Contact Us
Privacy Policy
Sitemap
Control the list of current pages in the admin console and on your website.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Creang Pages and Navigaon
[ 42 ]
Editing pages
All pages can be edited at any me from the list of pages in the admin console.
Time for action – editing existing pages
We do not like the menu text for the page Home and would like to change it to Start.
We would also like to replace the tle and text on the page. In the admin console, open
Content | Pages, and click on the Home page.
1. Make changes to the Home page, as shown in the following screenshot:
2. Click the Apply buon to update the page.
3. Click the magnier icon beside the Apply buon to view the changes on the website.
What just happened?
You have changed the menu text shown in the navigaon of the website. You have also
replaced text on the page. At the end, you applied the changes and viewed the page in a
new window.
You used the Submit buon to save the changes and close the page in one step. The
Apply buon does not close the page. Applying changes allows you to edit the page
without closing it, and thus avoid needing to reopen it for eding aer each change. The
Apply buon appears only if you edit an exisng page. It is not available when you are
creang a new page.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 3
[ 43 ]
Use the Apply buon frequently, especially if you are working with large
amounts of text, keep a copy of it in a separate editor window. If the connecon
is lost or me's out, then the page will fail to load in the browser and the
modicaons would be lost.
Previewing changes
If you would like to preview the changes before saving, switch to the Preview tab without
applying the changes. You can see the changes displayed in the preview window, but they
will not be visible to the visitors of your website at this moment. Once you have applied or
submied the edited page, the changes will be made visible to your site's visitors.
Changing the page alias
You can change the page alias of the page as well. Switch to the Opons tab while eding
the page, and enter the desired alias in the Page Alias eld. Think of page alias as the link
to the page. You are not allowed to enter special characters in this eld, so use spaces or
leave it empty. Choose the name entered here carefully as you will not be able to change it
easily aer your website is published online. Once your website is discovered by the search
engines, the pages will be displayed in the search results with links made from the page alias.
If you change the page alias, then the page will not be found and your visitors will see an
error message instead of the desired informaon.
Deleting pages
You can delete your pages from the list of current pages in the admin console (Content |
Pages). Find the page you do not need anymore, and click on the dust bin icon for that page.
Be careful! Deleted pages cannot be restored. If you would like to keep the page for personal
purposes only, then make it inacve (see the secon tled Control the navigaon of the
website for more informaon).
Formatting page content
You have already created some pages and edited them. Noce that the text you have
entered in the Content eld appears on the website in a certain place. The text is only a
fracon of the enre page. You cannot change the design of the navigaon, the header,
or the footer part from here.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Creang Pages and Navigaon
[ 44 ]
If you were just an editor of the website (not a designer and not an administrator), then
you would create or edit your arcles here, but would not have the ability to change
anything else on the website. This is the most important principle of a content management
system (CMS). We separate design from content to separate dierent tasks that can be
accomplished by dierent persons. It also helps to separate the content of the layout and
design so that it allows for globally changing the appearance of the website without going
through all the circles of hell.
An editor needs to have the ability to format his wring by making some phrases bold and
creang lists or link to other pages of the website. Normally, HTML knowledge is required for
this, unless you use the WYSIWYG editor.
WYSIWYG means What You See Is What You Get and gives you the ability to format the text
of a page with a common word processing feature. Addionally, the text is displayed in the
editor in the same way that it will appear on the website.
Working with the WYSIWYG editor does not require any HTML knowledge to
create, edit, and format the text part of your website.
The WYSIWYG editor is the central and most important feature of every CMS. If you create a
website with CMS, then you are going to consequently add content to your website. It means
that apart from other modules, the WYSIWYG editor will be one of the most frequently used
features of your CMS. Therefore, it is important to understand how the editor can help you
and what you can do to make it suit your needs. There are some WYSIWYG editors available,
for CMS Made Simple, the editor called TinyMCE is the most well integrated one.
In the admin console, go to Content | Pages and select any page for eding. The Content
eld uses a WYSIWYG editor (you can see a toolbar above the content eld), which is shown
in the following screenshot:
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 3
[ 45 ]
The toolbar of the editor is self-explanatory and is similar to most popular word processing
programs. There are many more sengs that can simplify your life if you discover them.
Oen, a large amount of text is wrien in word processing programs like Microso Word. If
you copy the text from Word directly into the content of the eld, then it will cause a lot of
problems because of the bad HTML produced by Word. In the toolbar of the editor, there is a
special buon (the fourth in the rst line) to paste text from Word. Always use this buon to
copy text from Word as it will lter any messy code from your text.
Conguring TinyMCE
In the admin console, click on Extensions | TinyMCE WYSIWYG. You can change the width
and height of the editor eld here. By default, the size of the editor eld is set automacally;
change it according to your screen preference to gain more space to write and read.
Deselect the Auto eld, enter the desired width and height, and click on Save sengs.
There is a test eld below the sengs where you can immediately see the changes. This
eld allows you to preview changes so that you do not need to edit pages to control the
appearance of the editor.
On the Proles tab, you can add even more features. For the administrator of the website,
the changes have to be made in the Advanced backend prole sengs secon. Select the
Allow table operaons eld to be able to create and edit tables with the WYSIWYG editor.
Aer saving the prole, you will nd the third line in the toolbar of the editor that helps to
build HTML tables.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Creang Pages and Navigaon
[ 46 ]
Check the Show le management opons eld if you would like to upload images directly
from the editor. Click on Save prole, and then click on the Insert/edit image icon in the
toolbar. A small window pops up where you can change an image URL. Click on it, and the
content of your images folder is displayed, as shown in the next screenshot. Normally, no
uploads are allowed from this window. However, as you have acvated the le management
opon, you will nd the File operaons secon above the image list where you can upload
your images.
Use folders to organize the images from the very beginning, or else you will end
up with hundreds of assorted images in no me, and it will be a big problem to
rearrange them, as they are already linked from various pages. Having a lot of
images in one folder will slow down the loading of the le picker and nding the
image you are looking for will become a challenging task.
Connue to customize the editor in the Plugins tab. There are some useful plugins that
are not acve by default, but can be acvated if needed. I recommend acvang the
following plugins:
print: Allows you to print the text from the editor
fullscreen: Adds a fullscreen eding mode
searchreplace: Adds search/replace dialogs for the text
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 3
[ 47 ]
Click on Save plugins. Only the icon for fullscreen is added to the second toolbar before the
help icon. The other two do not appear. Why? Let's take a step back and check the Proles
tab again. In the Advanced backend prole sengs secon, you can see three toolbar lines.
These lines control the order of the icons shown in the editor in the rst, second, and third
(yet empty) line. The single buons are represented with their names in the toolbar elds,
as shown in the following screenshot:
You can delete some of them, change the order, or add new ones. That is what we are going
to do.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Creang Pages and Navigaon
[ 48 ]
Time for action – activating search and replace function
There is a useful plugin that can search the enre contents of a page and replace all
instances of a word or phrase with something dierent. Let's see how we can acvate
this plugin in TinyMCE.
1. In the admin console, click on Extensions | TinyMCE WYSIWYG.
2. Click the Plugins tab.
3. Select the checkbox beside the plugin called searchreplace, as shown in the
following screenshot:
4. Click the Save plugins buon.
5. Switch to the Proles tab.
6. In the Advanced backend prole sengs secon, add the words search, replace to
the Toolbar 3 eld, as shown in the following screenshot:
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 3
[ 49 ]
7. Click on the Save prole buon, and see the addional funcons added to the third
line of the toolbar, as shown in the following screenshot:
What just happened?
Firstly, you acvated the plugin in the Plugins tab. Acvang a plugin means that the plugin
is loaded with TinyMCE. But it is not enough to just acvate it. In the second step, you had
to customize the toolbar of TinyMCE to inform the editor where the buons for the plugin
should be shown.
You saw that a single plugin can provide two buons. Therefore, there were two words you
had to enter in the eld Toolbar 3. The rst one, search, was for the search buon, and the
second one, replace, was for the replace funcon. They must not be used together. You can
omit the rst or the second one if you do not need that specic funconality.
Add the plugin removeformat in the Toolbar 3 eld. This is a plugin that must
not be acvated rst as it belongs to standard. The plugin allows the removal of
any formang from the text without looking at the HTML.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Creang Pages and Navigaon
[ 50 ]
There are more advanced sengs in the WYSIWYG editor. To understand them, you need to
know how CMS Made Simple works in general. I recommend referring to the sengs of the
WYSIWYG editor again and again while reading this book to make working with the editor
more ecient.
Adding meta tags
Meta tags contain addional informaon about your website. This informaon is not directly
displayed to the visitors of the website; as the purpose of meta tags is to supply addional
informaon about your website to search engines and web browsers. We have to disnguish
between meta tags that are the same on each page of your website and tags that are unique
to a specic page of your content.
Meta elements are HTML or XHTML elements that provide addional informaon for search
engines. They are not visible to the visitors of the website. Such elements must be placed
as tags in the head secon of the page. Meta elements can be used to specify the page
descripon, keywords, and any other metadata.
Meta element species name and the associated content describing the page. For example:
<meta name="keywords" content="business company,services" />
In this example, the meta tag idenes the page as containing keywords relevant to the
phrase business company and the word services.
Time for action – adding meta tags to pages
Let's add some specic meta tags to the start page of our website.
1. In the admin console, open Content | Pages.
2. Click on the start page Start to edit it.
3. Switch to the Opons tab.
4. In the eld Page Specic Metadata, add meta tags that are specic to the page.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 3
[ 51 ]
5. Click on Apply at the boom of the page.
6. Click on the magnier icon beside the Apply buon.
7. See the head secon of the website in the source code of the page.
What just happened?
You have added meta tags in plain HTML to the start page of your website. These meta tags
appear only on this specic page. Generally, meta tags for the descripon and keywords
should be dierent on each page.
Any other tags (not only meta tags) for the head secon of the generated page
can be added here as well.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Creang Pages and Navigaon
[ 52 ]
Adding global meta tags
Some global meta tags are already added to the standard installaon of CMS Made
Simple. You can see these meta tags in the source code of every page generated by
CMS Made Simple:
<meta name="Generator" content="CMS Made Simple - Copyright (C) 2004-9
Ted Kulp. All rights reserved." />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
To change or delete the tags, click on Site Admin | Global Sengs in the admin console. Find
the meta tags listed above in the eld Global Metadata. You can add your own meta tags in
this eld using plain HTML.
Any other tags (not only meta tags) for the head secon of all pages can be
added here as well.
Understanding page hierarchy
All pages you have added in the last step are now displayed in the main navigaon of your
website and can be found in the current list of the pages in the admin console. But there are
some more pages in our website plan that have to be added to the hierarchy.
With page hierarchy, you dene the pages as being above, below, or at the same level as
another page. If a page is not shown in the main navigaon, then we call it a subpage. It also
means that there is a parent page above the subpage.
Time for action – adding subpages to a website
Let's create four pages below the Our Company page according to the website plan.
1. In the admin console of your website, click on Content | Pages and then on the
Add New Content link.
2. Fill the elds Title and Content as shown in the following screenshot and choose the
page 2. -Our Company from the drop-down eld Parent.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 3
[ 53 ]
3. Click on Submit.
4. Click on the triangle to expand the list of pages below the page Our Company and
to view the subpage created.
5. Click on the magnifying glass icon beside the just created page to view the page on
the website.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Creang Pages and Navigaon
[ 54 ]
What just happened?
You have added a new page. This me you have selected a parent page placing the new page
in the hierarchy below the parent one. In the admin console, you can see that the page is
now indented under the parent page. It gets the number 2.1, saying that the page belongs
to the page with number 2 and is its rst child page. You will not nd the page in the main
navigaon of the website, however, you can see the page added to the subnavigaon, if you
move your mouse over Our Company in the navigaon.
We need the page hierarchy to organize our pages into main secons and to have the
subnavigaons built automacally.
If you would like to change the posion of the page in the hierarchy, you have to edit the
page by clicking on it in the page list. Select another parent page in the eld Parent and save
the changes. If you choose none in the drop-down list, then the page is moved to the rst
level and thus displayed in the main navigaon.
Use the Expand All Secons link at the boom of the list of current pages in order to show
all hierarchy levels. With Collapse All Secons, you can hide all subpages and show only the
rst level.
You can reorder the pages that are on the same level by using icons from the Move column
(down and up). However, if you have to move one or more pages from the very boom
to the top of the list, it can be hard to do it with move icons (especially if you have a large
number of pages). Use the Reorder pages link in this case. This feature allows you to
reorder pages by clicking on a page and dragging it to a dierent posion within the
same hierarchy level.
Reordering pages in the admin console will also change the order of appearance in the
navigaon of your website.
Breadcrumbs
Your hierarchy is also displayed in the so called breadcrumbs—navigaon aid displayed on
the website above the content. It starts with You are here, displays the trail of the page and
provides links back to the parent page(s) of the current one.
Search engine friendly URLs
While creang your website, you probably thought about how you would promote it in
search engines. Before you start to share the URLs of your website's pages, it is advisable
to set up search engine friendly addresses.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 3
[ 55 ]
Search engine friendly URLs do not contain any dynamic components in them and are more
readable for visitors of your website and search engines. Compare the following two URLs:
http://yourdomain.com/index.php?page=products
http://yourdomain.com/products
Which page address is beer? Search engines index your website beer if your website uses
the second version. Some pages with dynamic query strings in the address (as in the rst
example) are never indexed, and some of them will take longer to get into the search results.
If you do not care about search engines, then think about the visitors of the website. How
easy is it to type or write down the address of the specic page if we do not use the second
rewrien version? Imagine your visitor would like to recommend the page. He would do it
without any dicules with search engine friendly URLs and may fail with the rst example.
However, aer installing your website with CMS Made Simple, you will nd that the URLs
of your pages are built in the rst way. You can easily change them to achieve beer results
with the website.
Time for action – creating search engine friendly URLs
To enable search engine friendly URLs on your website, perform the following steps:
1. Start FileZilla or any other FTP browser of your choice.
2. Connect to your hosng and select the le config.php for eding. (You can also
copy the le to your local disk for eding and upload it aer the following changes
have been made).
3. Search config.php for the secon "URL Sengs" and replace:
$config['url_rewriting'] = 'none';
with
$config['url_rewriting'] = 'mod_rewrite';
4. Close, save, and upload the le back to your web hosng.
5. Further, using FileZilla or any other FTP browser of your choice, open the
doc directory.
6. Move the htaccess.txt le found in the doc directory to the root directory of
your website (it is the same directory where the le config.php is present).
7. Rename the moved le to .htaccess (the period at the beginning belongs to the
new lename!).
8. View your website in a browser, click on the top navigaon area to see the new
addresses for each page.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Creang Pages and Navigaon
[ 56 ]
What just happened?
I am not going to bother you with technical stu (please read about the mod_rewrite
module if you would like to know more). You now have some prey, clean URLs on
your website.
If you have received an internal server error, then please consider the following known issues:
Your hosng company does not support mod_rewrite (ask your hosng provider if
you are not sure).
You have installed CMS Made Simple into a subdirectory; for example,
http://yourdomain.com/mycms. In this case, you will have to edit the le
.htaccess and replace the line.
RewriteBase /
with
RewriteBase /mycms
Change the name aer the slash to your subdirectory's name.
Getting more success from hierarchy
Enabling search engine friendly URLs has another useful eect. The URL of the page now
contains the full path to the page including the parent page and not only the page alias.
Let's assume that you have created the page Philips TV (with page alias philips) and selected
the page Plasma TV (with page alias plasma-tv) to be the parent page for it. Without
rewring the URL of the page, Philips TV gets the following address:
http://yourdomain.com/index.php?page=philips
Aer rewring the URL of the page, we get:
http://yourdomain.com/plasma-tv/philips
The second version is cleaner, looks beer for visitors, can easily be wrien down or
remembered, and is beer for search engines as you also have more keywords in your URL.
Remember that page aliases have to be unique. For example, you cannot have this kind
of structure:
yourdomain.com/products/tv
yourdomain.com/news/products
The alias products can be used only once on the enre website.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 3
[ 57 ]
If your hosng provider does not support mod_rewrite, then I recommend leaving them.
Seriously, most web hosts have got this feature enabled by default, even free web hosng.
There is no reason for not enabling it, unless the provider is not able to install it. Another
reason for disabling mod_rewrite is that the module is quite processor-intensive, so hosts
that put thousands of clients on one server would disable it to gain server performance.
These are the reasons why you would not consider such a host and look for another one.
Controlling the navigation of the website
You have seen that the navigaon is built automacally from the pages you have created.
However, you can interfere in this process and prevent specic pages from displaying the
main navigaon even if they are on the top level in the page hierarchy.
Time for action – preventing pages from displaying in the
navigation
In our company website, we would like to hide the pages Privacy Policy and Sitemap from
the main navigaon providing special links to these pages only in the footer navigaon
later on.
1. In the admin console, click on Content | Pages.
2. In the list of pages, click on the page Privacy Policy to open it for eding.
3. Switch to the Opons tab on the top of the eding window and deselect Show in
Menu, as shown in the following screenshot.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Creang Pages and Navigaon
[ 58 ]
4. Scroll down to the boom of the page, and click on the Submit buon.
5. View your website with the magnier icon on the top right of the admin console.
Do the same for the Sitemap page.
What just happened?
You have deselected Show in Menu to hide the page from the main navigaon of your
website. The link to the page disappears from the top menu.
However, the page is not deacvated. You can sll view it if you enter the full address of the
page in the address bar of your browser or place a direct link to it from other pages of your
website. Normally you would use this feature to hide pages that are not important enough to
be shown in the main navigaon.
Another reason can be that specic pages have to be displayed only under certain
circumstances. An example for such a page can be a Thank you! page that has to be
displayed to the visitor when he sends us a message using the contact form on the
website. We speak about service pages in this case and will learn later on how to use
them on your website.
On the Opons tab, you may have noced another eld that can be deselected: Acve.
Deacvang a page makes it unavailable to the visitors of the website. Even if a direct link
is given to the page, the visitor will see an error message saying that the page could not
be found.
Think of pages that are not acve as pages that do not exist as far as
visitors are concerned.
You can use this feature to disable a page that you do not need any more. You can delete
such pages and lose the contents of them or just deacvate them, while sll being able to
see their content in the admin console of your website. In this case, you are the only person
who can see it. Some webmasters create inacve pages as a placeholder for future content.
What is your start page?
When your website is published online, individual pages can be reached through their links.
But what page is displayed to the visitor if only the domain name of your website is given?
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 3
[ 59 ]
In CMS Made Simple, we call this the default page. You can dene any page to be the default
one. In the admin console, open Content | Pages and nd the column Default in the list of
current pages. Only one page has a green ck in the column and the page marked in this
way is the start page of your website. You can choose another page to be the default page
by clicking on the red cross in the column. Before the default page is changed, you have
to conrm the queson Are you sure you want to set (Page name) as site default page?
See how the green ck is now moved from the previous default page to the new one. The
previous page shows a red cross automacally in the column. Logically, you can have only
one start page for your website.
More navigation control with content types
More control over your navigaon can be achieved with dierent content types. You have
surely noced the Content Type eld on the screen where the page is created or edited. The
standard choice in this eld is Content that is used to create an ordinary content page. You
use this type in most cases.
With dierent content types (refer to the following table), you can add links to your
navigaon and get other behavior than ordinary pages.
Content type Descripon
Internal page link Use this content type to create a link in navigaon to a specic page that is
actually at another level of hierarchy. This content type generates just a link
to the specic page that you select in the eld Desnaon page.
Separator Use this content type to internally separate dierent navigaon secons
from each other. This content type is mostly used to create sophiscated
navigaon structures or complex navigaon design.
External link As the name of the content type suggests, add an external link with
this content type to your navigaon. Enter complete URL starng with
http:// in the eld URL of the content type.
Error page This content type does not deal with navigaon. It is explained in detail in
Chapter 5, Using Core Modules.
Secon header With this content type, you create a header in the navigaon. This content
type is not a link itself. It just "holds" other pages placed below it in the
hierarchy. You use this content type to visibly divide your menu structure
into dierent parts.
Content This content type is used as standard for normal content pages of
your website.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Creang Pages and Navigaon
[ 60 ]
Efcient work with pages
You have noced that if you create a new page some elds are predened; for example, the
new page is acve and shown in the menu. Page-specic metadata is prelled with a comment:
<!-- Add code here that should appear in the metadata section of all
new pages -->
You can change the predened values in the admin console. In the admin console, click on
Site Admin | Page Defaults and set the elds the way you would like them to be set if a new
page is created.
You can predene meta tags and even the content eld of the page. For example, you can
create empty meta tags, which are shown as follows:
<meta name="keywords" content="" />
<meta name="description" content="" />
Now, the editor of the content has to just ll the content aribute of the meta tags
(between the quotes) while creang or eding pages.
Creating a new page as a copy of existing one
You can create a new page as a copy of an exisng page. In the list of current pages in the
admin console (Content | Pages), you will nd an icon for copy on the le-hand side. Click
on the icon to see the next window. It is divided into two secons. The above secon called
Copy From shows the data of the page you are going to copy. You cannot change any data in
it. In the secon below (Copy To), you can enter the page alias, tle, and menu text. Select
another parent page for the copy if it diers from the original. Click on Submit and a new
page is created.
New pages created as a copy do not connect to the original page in any way. You can now
edit the new page the same way you would do it with other pages. You can also delete it
without aecng the original page.
Changing multiple pages at once
If you have a large number of pages and would like to change more than one page at once,
then you can use bulk acons in CMS Made Simple.
In the list of the current pages in the admin console (Content | Pages), select the checkboxes
on the right-hand side of each page that has to be changed, then choose the desired acon
in the With selected eld at the boom of the page. You can acvate them, show them in
menu, and perform some other acons that will be explained in the next chapters.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 3
[ 61 ]
Pop quiz – creating pages and navigation
1. How do you create new pages in CMS Made Simple?
a. Site Admin | Page Defaults | Add new page.
b. Layout | Menu Manager | Add new page.
c. Content | Pages | Add New Content.
2. Where is the tle that you ll in when creang a new page shown on the website?
a. Title bar and menu.
b. Title bar and heading of the site.
c. Menu and submenu.
d. Menu and head of the site.
3. What are the right answers considering the buons Apply and Submit?
a. The Submit buon saves changes and closes the page in one step.
b. The Apply buon saves changes and closes the page in one step.
c. The Submit buon does not close the page; but saves the changes you
have made.
d. The Submit buon does not close the page and previews the changes in
the browser.
4. What will be aected if the page alias is changed?
a. Title
b. Keywords
c. Menu
d. URL
5. Where do you place the meta tags that are valid for all pages in the project?
a. Content | Pages | Page Title | Opons.
b. In the secon general meta tags of the stylesheet.
c. Site Admin | Global Sengs | General Sengs | Global Metadata.
d. Extensions | Module Manager | GenMetaMod.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Creang Pages and Navigaon
[ 62 ]
6. Why should you use search engine friendly addresses?
a. The RAM memory of your computer gets an overload by opening more than
seven pages without search engine friendly URLs (they are too long).
b. The URL is opmized for search engines.
c. You should not use them at all, because you have to create a special one for
every search engine, and create some duplicate content.
d. The page is loaded much quicker.
7. If you would like to hide a page from visitors but do want to keep the content on the
page for internal needs, you should:
a. Delete the page.
b. Deacvate the page.
c. Assign another parent page.
d. Copy the page and delete the original.
8. All your pages are wrien in English. Where would you put the meta tag for the
language?
a. In global sengs.
b. In every single page.
9. One of your pages has been linked to another website. What happens if you change
the page alias?
a. Old link will be redirected to the new page alias automacally.
b. An error message that the page cannot be found appears aer clicking on
the link.
Have a go hero – create all pages for company website
Before proceeding with the next chapter, where the design and layout is explained, create all
the pages you need for your website. You do not need to write the enre text for each page.
The next secon will simply be about preparing the structure of the website.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 3
[ 63 ]
Use your own website plan or the sample one:
BUSINESS
WORLD
Client Center
Contact Us
Privacy Policy
Sitemap
Announcements / News
Company History
Team / Employees
FAQ / Glossary
Newsletter
Service Desk
Our Company
Products
Photo Gallery
Creating pages and navigation
First add pages that are on the rst level in your hierarchy (marked in bold in the preceding
diagram). Then add the pages from the second level (marked in grey). You can adjust the
page alias and menu text.
Add some sample text to the pages or write down what each single page will contain. If
you have some ideas that are nice but should not be available on the website from the very
beginning, then create some inacve pages holding these ideas.
Do not create more than two levels at the beginning. Even though it is possible to create a
large number of levels, your visitors will nd the navigaon of the website more user friendly
if they do not have to click 5 or 6 mes to reach the desired informaon. It is beer to start
with two-level navigaon to simplify learning layout and design in the next chapter.
The result of the website structure presented above is as follows:
Please note that the Start page has been renamed to Our Company.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Creang Pages and Navigaon
[ 64 ]
Summary
In this chapter, you learned how easily pages can be created and managed. You saw that the
navigaon of your website is built automacally from the exisng pages.
Specically, we covered the following:
Creang pages: You can create new pages from scratch or as a copy of an
exisng page.
Eding pages: You can change everything on the page aer it has been created, such
as tle, content, menu text, or page alias.
Adding meta tags: Meta tags can be dened globally, if they are the same for each
page. For individual meta tags on each specic page, you use the eld Page Specic
Metadata in the Opons tab.
Page hierarchy: Pages can be organized in a tree hierarchy. It helps to keep your
pages structured and control the top and subnavigaon of the website intuively.
Search engine friendly URLs: You modied the URLs for your pages. It gives you
clean and prey URLs that are quite noceable for the visitors too.
Navigaon control: Pages are displayed automacally in the navigaon. You can
control this behavior by hiding the pages from navigaon (they are sll accessible by
the visitors with direct links). You can also set the page to inacve so that only you,
as the website administrator, are able to see the content of the links.
We also discussed how you create or change the start page of your website, gain more
control by using dierent content types, or change mulple pages at once to save me.
Now that we've created the website structure, we're ready to start with the design and
layout of our company website.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
4
Design and Layout
In this chapter, we will learn what templates are. The strength of CMS Made
Simple is its exibility of design. Once you have understood how you can
combine your stac HTML with the dynamic parts of the website and format
them with CSS, you will never lose control of your design or layout in CMS.
In this chapter, we will:
Work with exisng templates
Create our own template from scratch
Add and organize stylesheets
Create and format navigaon
Port HTML templates to CMS Made Simple
Learn the basics of Smarty
Learn about exporng templates
CMS Made Simple uses various templates to display the content of your website. To
understand templates, think of them as predened layouts. Every me you create a new
page, you choose a layout to dene how this page should look.
You can easily imagine a template as a wrapper for your content. The wrapper (layout) is
always the same; the content changes from page-to-page. The editor of the website just
adds content to the page and chooses a template. CMS Made Simple will automacally
display the page content for the visitors within a chosen layout. Thus, the design and
content are enrely separated in CMS.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Design and Layout
[ 66 ]
Working with existing templates
You will nd all exisng templates in your CMS in the admin console. Click on
Layout | Templates to see all templates available in your installaon. If you did not install
any sample content, then only one template is available.
In the strictest sense, we have to dierenate between templates and themes. A template
is just a part of a theme. A theme consists of one or more templates and one or more
stylesheets. Some themes oponally include menu templates as well. So if you talk about
the complete design of your website, you should think about themes. Dierent page layouts
(1-column, 2-column, or others) within one theme are called templates in CMS Made Simple.
You can easily add ready-to-use templates to your website without any HTML or CSS
knowledge by using some resources for the themes:
http://themes.cmsmadesimple.org
http://www.icms.info/cmsms-templates
Time for action – importing a ready-made template
Let us see how to import a ready-made template into your installaon.
1. Download an XML le for your template from one of the addresses given above
and save this le to your local disk.
2. In the admin console, click on Layout | Theme Manager.
3. Switch to the tab Import and choose the XML le from step 1 in the eld
Upload Theme.
4. Click on Import.
5. Go to Layout | Templates and nd the new imported template in the list
of templates.
6. Click on the icon with a red cross in the Acve column (the icon should change to a
green ck).
What just happened?
You have imported a new theme into your CMS Made Simple installaon. A theme contains
one or more templates (Layout | Templates), one or more stylesheets (Layout | Stylesheets)
and somemes menu templates as well (Layout | Menu Manager).
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 4
[ 67 ]
To test the template, open a page that you would like to see within the new template for
eding (Content | Pages). Switch to the Opons tab, and select the newly created template
in the eld Template. The screen is automacally redirected to the Main tab. Click on Apply
and then on the icon with the magnifying glass icon beside the buon Apply to see the
changes on the page. Compare this page to other pages that use dierent templates.
This wonderful principle of CMS Made Simple allows you to give each page its own look and
feel. You can use dierent templates to separate some parts of your website. For example,
you could use one template for the company website and a completely dierent template
for the shop if you like. Designers oen use dierent templates to enable one, two, or three
columns layouts on dierent pages.
To see which page uses what template, open the list of the current pages in the admin
console (Content | Pages) and see the column Template.
If you would like to use one template on all pages of your website, you can assign it to all
pages at once. This funcon is especially useful if you already have a great number of pages.
In the admin console, open the list of exisng templates (Layout | Templates) and click the
Set All Pages link beside the name of the template. This way, the template is assigned to all
pages of your website with just one click.
In the list of templates, you can also see that one template is set as default. When you
create a new page, CMS Made Simple will automacally take the default template for the
new page. Click on the icon with the red cross in the column Default beside the template
name that you would like to use as the standard template.
Creating a new template
Surely, it is easier to use ready-made templates for the website. However, you oen need
your own style for the website. In this secon, we will learn how to create a new template
from scratch.
Templates in CMS Made Simple contain pure HTML. For dynamic parts of the layout, such
as navigaon or content, special placeholders are used. These placeholders are realized with
the Smarty web template system. You use simple Smarty tags in your template to mark the
places where dynamic parts in the pages are required. Smarty tags are placeholders that are
substuted with simple text or even other HTML templates when the website is displayed in
the browser. In contrast to HTML tags, Smarty tags are always enclosed in curly brackets.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Design and Layout
[ 68 ]
Time for action – creating a new template
Let us see how you can easily create a new HTML template in CMS Made Simple:
1. In the admin console of your website, select Layout | Templates.
2. Click on Add New Template at the boom of the list.
3. On the next page, type the name of the new template, My rst template.
4. Add HTML source code to the Content eld, as shown in the following screenshot:
5. Click on Submit.
6. In the list of templates, nd your new template My rst template, click on Set All
Pages in the same line where your template name is, and conrm the message:
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 4
[ 69 ]
7. The message All pages modied! appears above the list of templates.
8. Click on the magnifying glass icon in the top-right corner of the admin console to
see the result (Google Chrome was used as the web browser in this example):
What just happened?
You have created a new template with some simple HTML tags. You have then instructed
CMS to use this newly created template on all pages of your website. In your browser, you
see the exact output of the HTML code you have added to the Content eld of the template.
Your template is stac now. It means that no individual part of the page, such as tle of the
page or content, is displayed on the website. To mark the places where dynamic content
should be displayed, you have to use Smarty tags. These tags will be substuted with an
actual tle or content when the page is loaded and displayed in the browser.
Adding dynamic parts to templates
Let us substute the stac page tle and content with individual content of the page.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Design and Layout
[ 70 ]
Time for action – adding Smarty tags to a template
1. In the admin console, click on Layout | Templates, and click on My rst template
to open it for eding.
2. Replace the stac text for tle and content with Smarty tags, as shown in the
following screenshot:
3. Click on Apply and then click on the magnifying glass icon in the top-right corner
of the admin console to see the results of your changes. It should look as shown
in the following screenshot:
What just happened?
You have replaced the stac text in your template with placeholders called Smarty tags.
These special tags are enclosed in curly brackets. When you see the page in your browser,
the places where you have added Smarty tags in the HTML code are now replaced with
actual content and the tle of the page.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 4
[ 71 ]
To conrm that changes were made for each page and not only for the start page, open the
current list of the pages (Content | Pages) in the admin console, and click on the magnifying
glass icon beside some of the pages to display them in the browser. You should see that
every page gets an individual tle. The page content is displayed in the place where the tag
{content} was added in the template.
{title} and {content} are only two examples for custom CMS Smarty plugins that you
can use in your template. Try out some of them from the following table to see what is
displayed at the place where these Smarty tags are added.
Tag Descripon
{breadcrumbs}
Prints a breadcrumb trail.
{created_date}
Prints the date and me when the page was created.
{last_modified_by}
Prints the ID of the user who has last edited the page.
{menu_text}
Prints the text entered in the eld Menu Text for the page.
{modified_date}
Prints the date and me the page was last modied.
To try the plugins, just add the name of a plugin in the curly brackets to the template of your
website in any place you like.
The preceding tags hold dierent informaon about the actual page. There are also tags
that hold global informaon about your website, such as the website's name or the version
of CMS Made Simple that is installed. They do not depend on the page where they are
displayed and are the same on each page. Try them as well to see what informaon is
displayed at the place where the tag is added.
Tag Descripon
{cms_version}
Prints the current version number of your CMS.
{cms_versionname}
Prints the current version name of your CMS.
{current_date}
Prints the current date and me.
{root_url}
Prints the URL locaon of your website.
{sitename}
Prints the website name. The informaon can be changed in
the admin console (Site Admin | Global Sengs | Site Name).
With Smarty tags, you see the main principle of the separaon of the code from design. As a
designer, you do not need to know how the date of the last page modicaon is stored in the
database ({modified_date}) and how exactly the locaon of the website is retrieved from
the address line of the browser ({root_url}). You can just use the plugins declared above
to retrieve the needed informaon.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Design and Layout
[ 72 ]
Having control over the output
If you have already tried some of the preceding tags, then you have probably noced that
somemes the output is not exactly what you need. You can control the output of the tags
using Smarty parameters (also called aributes).
Parameters can be compared to HTML aributes. You can use parameters to rene the
output of the Smarty tags. Parameters can be used to:
Change date formats displayed by a tag
Add supplementary parts to the output of the tag
Remove some parts from the output
Replace specic text in the output of the tag
Time for action – adding Smarty parameters to the template
Let us say you have added the tag {last_modified_by} to your template. However,
you do not like the ID of the user, and you would like the username or his full name to be
displayed instead of the user ID.
1. In the admin console, select your template for edit
(Layout | Templates | My rst template).
2. Add the {last_modified_by} tag with the format parameter, as shown in the
following screenshot:
3. Click on Apply and then click on the magnifying glass icon in the top-right corner of
the admin console to see the result of your template changes.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 4
[ 73 ]
What just happened?
You have added a tag {last_modified_by} to the template in order to display the name
of the user who made the last modicaon to the page. Normally, if you do not say anything
else, the ID of the user is displayed at the place where the tag is added. By adding a format
parameter to the tag, you can now control what exactly should be shown.
As templates in CMS Made Simple consist of a mixture of HTML and Smarty, you need to
understand the denion of tag, plugin, parameter, and parameter values. The tags we used
in the example are Smarty plugins. Smarty plugins are custom funcons dened for your
convenience. Almost every plugin can take parameters (somemes also called aributes).
You add parameters to the plugin name separated with a space. The parameter name is
followed by an equals sign and parameter value enclosed in double or single quotes.
See the following image to understand the anatomy of the Smarty tag:
Now, how do you know what parameters you can use with what plugin and what
parameter values are allowed? You will nd a complete list of custom CMS plugins
in the admin console of your website. These plugins are called tags in CMS Made Simple.
Click on Extensions | Tags to see the complete list of plugins that you can use in the
template right now.
If you click on the name of the tag, you will get help on it. You will nd a short descripon
what this tag does in general, and then see an example of how you can use it in your
template. You will also see a list of available parameters (if any) and the values you can
use for them.
Similar to HTML aributes, you can use more than one parameter in a tag. The order of the
parameters is not important.
For the tag {last_modified_by}, only one parameter is listed in the Help secon. There
are three values that are accepted by this parameter—id, username, and fullname, so
that you can use another parameter value to display the full name of the person who has
edited the page last:
{last_modified_by format="fullname"}
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Design and Layout
[ 74 ]
The full name of the user is shown if it is given in the user's
account. In the admin console, open Users & Groups | Users and
click on the username that you would like to modify. Enter the
First Name and the Last Name of the user.
Using plugins in content
In the last secon, you added Smarty plugins to the template. However, it is also possible to
add them directly into the content of the page. You use the tags in the content in the same
way that you used them in the template. Write the name of the plugin enclosed in curly
brackets in the eld Content of a specic page. Try it out now. Open any page for eding
(Content | Pages) and add one or more tags in the eld Content. You can mix tags and
stac text in the same way you did in the template.
A small example for the start page of your website can be:
Welcome! Today is {current_date}.
The preceding code will automacally display the current date on the start page of
your website.
You should add plugins that need to be displayed on every page of your
website to the template. If you need a special plugin on only one page
(for example, the start page), then you should add the plugin into the
eld Content of this page.
Adding stylesheets to the template
Nowadays, designing websites requires not only pure HTML, but also CSS. The most
professional websites use HTML to structure the website and CSS to style them. CSS gives
you full control over your layout. With CSS you can easily change the complete look and feel
of your website without changing any HTML. You can see some good examples of CSS layouts
based on the same HTML at http://www.csszengarden.com.
CMS Made Simple takes pure CSS code for your page layout and saves it in the database. In
this secon, you will learn how you can create a new stylesheet, add your styles to it, and
aach it to the template.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 4
[ 75 ]
Creating a new stylesheet
To create a new stylesheet, you have to accomplish three simple steps:
1. Create and save the new stylesheet containing your CSS code.
2. Aach the stylesheet to the template.
3. Add a special tag in the template that will be replaced by an HTML tag <link>
poinng to the stylesheet.
Time for action – creating the stylesheet
Normally, in stac HTML pages, you create a CSS le and aach it to your template using
an HTML <link> tag. In CMS Made Simple, stylesheets are saved in the database, and
therefore cannot be linked directly. Let us see how stylesheets can be created and
aached to the templates.
1. In the admin console, click on Layout | Stylesheets.
2. Click the Add a Stylesheet link at the boom of the list.
3. Type in the name of the new stylesheet and enter the CSS code in the Content eld,
as shown in the following screenshot:
4. Click on Submit. The new stylesheet is added to the list of stylesheets.
5. To aach the new stylesheet to your template, in the admin console, click on
Layout | Templates.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Design and Layout
[ 76 ]
6. In the list of templates, click on the blue CSS icon, as shown in the
following screenshot:
7. Select My First Style Sheet from the drop-down eld, and click on Add a Stylesheet.
8. The last step is to add a Smarty plugin that will call the aached stylesheet in the
template. In the admin console, click on Layout | Templates, and select your
template for eding.
9. Add the {stylesheet} tag to the template, as shown in the following screenshot:
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 4
[ 77 ]
10. Click on Apply and then click on the magnifying glass icon in the top-right corner
of the admin console to see the result of your template changes. It should look
as shown in the following screenshot:
What just happened?
You have created a new stylesheet that contains pure CSS code. Then, you have aached this
stylesheet to your template. By aaching the stylesheet, you have stated which stylesheet
is relevant for your template. The {stylesheet} tag that you added to your template, is
substuted by the HTML <link> tag when the page is displayed in the browser.
Open the page source in the browser to see what is set at the place where the
{stylesheet} tag has been added to the template. In my example, it looks like:
<link rel="stylesheet" type="text/css" href="http://www.yourdomain.
com/stylesheet.php?cssid=51" />
In your special installaon, the name of the domain will be dierent, and the last number in
the URL of the stylesheet is also likely to be dierent. The tag is formed automacally, and
you do not need to care how it is made technically.
You can dene and aach more than one stylesheet to the template. For example, you can
dene a stylesheet with general styles and then add another one containing print styles.
We will create and add more stylesheets in the course of the book so that you can see how
it works later on. For each stylesheet, a separate HTML link tag is added at the place where
the {stylesheet} tag is added. There is no need to add the tag twice or more if you have
aached more stylesheets, as this plugin will create as many links as there are stylesheets
aached to the template.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Design and Layout
[ 78 ]
Media types for stylesheets
While creang a stylesheet, you have probably seen the area Media Type with some
checkboxes at the boom of the page where stylesheet code is added. You can see the
area if you open your stylesheet for eding in the admin console (Layout | Stylesheets)
and scroll down. It appears as shown in the following screenshot:
The media type corresponds to the HTML aribute media and is automacally added to the
HTML <link> tag (if you select any type here):
<link rel="stylesheet" type="text/css" media="screen" href="http://
www.yourdomain.com/stylesheet.php?cssid=51" />
<link rel="stylesheet" type="text/css" media="print" href="http://www.
yourdomain.com/stylesheet.php?cssid=52" />
The styles from the rst stylesheet are used to display your website in the browser. However,
the browser will use the print stylesheet if your page is printed:
If you use any CSS framework with more than one CSS le, then you can copy
the content of each CSS le into a separate stylesheet in CMS Made Simple and
then aach them all to your templates. You can also change the order of the
stylesheets while assigning them to the template.
Creating navigation for the website
The heart of each website is surely the navigaon. The navigaon consists of links to the
pages and is oen divided into main navigaon and sidebar navigaon. In CMS Made Simple,
the navigaon is automacally built from the list of acve pages. You can create navigaon of
any complexity grade in CMS Made Simple due to the very powerful concept explained in the
following secons.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 4
[ 79 ]
Time for action – adding navigation to the template
Let us add navigaon links to the website.
1. In the admin console, click on Layout | Templates, and select My rst template
for edit.
2. Add a special tag for navigaon before the {content} tag, as shown in the
following screenshot:
3. Click on Apply and then click on the magnifying glass icon in the top-right corner
of the admin console to see the result of your template changes. It should look as
shown in the following screenshot:
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Design and Layout
[ 80 ]
What just happened?
With the custom CMS tag {menu}, a complete structure of the website is displayed at
the place where it is added in the template. Each acve page is displayed according to its
posion in the hierarchy and order in the list of pages.
The {menu} tag is very powerful. You can use numerous parameters that help you to create
navigaon of any complexity grade. For example, you can limit the navigaon to only one
level, so that only pages from the rst hierarchy level are shown:
{menu number_of_levels="1"}
Try the preceding code to create some navigaon limited to the main pages. This is a
common way to create the main navigaon for the website; normally placed at the top of
each page. The subpages are not shown with this parameter but we can display them in the
sidebar navigaon later on.
We will learn more parameters for the {menu} tag and see more examples on how it can be
customized later on. In this chapter, our main subject is design and layout. That is why we
will now learn to customize the look and feel of top navigaon.
Designing navigation—the pure CSS way
With the simple plugin {menu} the navigaon of the website is displayed on every page.
CMS Made Simple creates a simple unordered HTML list for the navigaon as you can see
in the source code of the page. Let us see how you can easily style a top navigaon bar with
pure CSS.
Time for action – design navigation with pure CSS
We are now going to style the top navigaon so that it looks like buons displayed beside
each other instead of below each other.
1. In the admin console, click on Layout | Templates, and open My rst template
for edit.
2. Add the HTML <div> tag around the {menu number_of_levels="1 "} tag,
as shown in the following screenshot:
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 4
[ 81 ]
3. Click on Submit.
4. Open My First Style Sheet from the list of stylesheets (Layout | Stylesheets)
for eding.
5. Add style formats for the container top-navi at the end of stylesheet, as shown
in the following code snippet:
#top-navi ul
{
height: 22px;
padding: 0px;padding: 0px;
margin: 10px 0;
border-top: 1px solid #e5e4e2;
border-bottom: 1px solid #e5e4e2;
}
#top-navi li
{
list-style: none;
float:left;
#top-navi li a
{
color: #a2a2a2;
text-decoration: none;
display: block;
padding: 5px 15px;
}
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Design and Layout
[ 82 ]
#top-navi li a:hover
{
color: #ffffff;
background: #3d648a;
}
6. Click on Apply and then click on the magnifying glass icon in the top-right corner of
the admin console to see the result of your changes. It should now look as shown
in the following screenshot:
What just happened?
You have limited the output of the navigaon to the rst level by adding the parameter
number_of_levels to the {menu} tag. Then you have placed an HTML <div> tag around
the Smarty plugin {menu}. With the last step, you have added some CSS styles to give the
top navigaon the desired look and feel. Noce that you do not need any special "CMS
design" knowledge to add styles to your navigaon. You have used pure and common
CSS to format the navigaon.
If you click on each page in the browser and see how the navigaon is displayed on other
pages, you will noce that there is some addional formang which CMS uses to display
acve pages. For example, <h3> is used to display the name of the acve page within
navigaon. Open the page source in your browser to see the formang of acve pages.
You can add more styles to change the formang of <h3> tag. On the other hand, to
save your me you can reduce all these special formats to pure ordered lists by using the
built-in template minimal_menu.tpl. This template is automacally provided with a
standard installaon of CMS Made Simple. To use it, add another parameter to the tag
{menu}, as shown in the following line of code:
{menu number_of_levels="1" template="minimal_menu.tpl"}
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 4
[ 83 ]
In this way, all addional tags are deleted from the navigaon and a clear unordered list is
displayed on each page.
If you look into the page source of the website, you will noce that there were also some
special class aributes added to the menu. CMS knows what page is actually shown and
adds a special class to the HTML tag <a> of the acve page:
<li><a href="http://www.yourdomain.com/" class="currentpage"> Our
Company </a>
You can use this informaon to give another style to the navigaon item of the page that is
currently displayed. The easiest method is to combine the a:hover and a.currentpage
classes to give them the same style.
#top-navi li a:hover, #top-navi li a.currentpage
{
color: #ffffff;
background: #3d648a;
}
If you can design websites with CSS, you are now able to design simple navigaon of the
website without any special coding knowledge.
Adding sidebar navigation
However, this is only half of the story. The pages displayed in the top navigaon are limited
to the rst level. We need some sidebar navigaon to display the list of subpages belonging
to the parent page.
We have to discuss another important parameter of the plugin {menu}. With the parameter
number_of_levels, you set how many levels from your page hierarchy are to be shown.
For the sidebar navigaon, you do not need to limit the number of levels, but to dene a
start level for your navigaon. As the rst level is added to the top navigaon already, for
the sidebar, you start with the second level:
{menu start_level="2" template="minimal_menu.tpl" }
With parameter start_level, you say from what level the pages are shown in the menu.
Second level means that pages with a minimum of two numbers in the hierarchy are shown,
for example, 1.2, 2.3, or 4.2. CMS Made Simple also knows what page is selected in the
top navigaon and displays in the sidebar only pages that are children of the page selected
above. This means that if the page with number 3 is selected in the top navigaon, the
sidebar will only contain the children of this page: 3.1, 3.2, 3.3, and so on.
With the parameter template, you again reduce the output of the navigaon to the pure
HTML unordered list to make formang easier at this point.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Design and Layout
[ 84 ]
An interesng and popular parameter is collapse, for example, {menu collapse="1"}.
This parameter allows the collapsing of sub items in the menu, so that only the sub items
of the current menu item are shown. It should have at least three levels in the page
hierarchy to see how automac collapse hides menu items that do not belong to the
currently displayed page.
We have learned the most important parts of a template: tle, content, and menu. This is
enough informaon to be able to port ready-made HTML template to CMS Made Simple.
Porting a HTML template
Normally, you do not design a complete template from scratch in CMS Made Simple. You can
use any HTML/CSS editor to create a design outside of CMS Made Simple. It is also possible
that you have downloaded or purchased a ready-made HTML template or you work with a
designer who has created the design for your website. In all the cases listed above, you get
an HTML le, CSS le, and one or more images. In this secon, we learn to port an HTML
template to CMS Made Simple.
Imagine, you get an HTML template that looks like the following screenshot.
This template consists of three les: HTML, CSS, and a logo image in the upper-right corner.
Noce that there is nothing but pure HTML and CSS at this point. Let us create a new CMS
Made Simple template from the preceding template.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 4
[ 85 ]
Time for action – porting a HTML template to CMS Made Simple
1. In the admin console, click on Layout | Templates, and click on Add New Template.
2. Enter Business World as Name of the template, and replace the whole suggested
Content with the HTML code of the example template given in the preceding
screenshot. The HTML code for the template is:
<!DOCTYPE html>
<html>
<head>
<title>Our Company</title>
<link rel="stylesheet" type="text/css" media="screen"
href="style.css" />
<meta name="description" content="" />
</head>
<body>
<div id="container">
<div id="header">
businessWorld
</div>
<div id="top-navi">
<ul class="clearfix">
<li><a href="#"> Our Company </a></li>
<li><a href="#"> Products </a></li>
<li><a href="#"> Client Center </a></li>
<li><a href="#"> Contact Us </a></li>
<li><a href="#"> Sitemap </a></li>
</ul>
</div>
<div id="content">
<h1>Our Company</h1>
<p>
Lorem ipsum quo ea eruditi epicuri dolores, mea no
delicata reprehendunt. Mea possit aperiri iracundia in, ad
veri ocurreret scribentur his, justo qualisque adipiscing
pro an. Has congue dissentiunt an, ea summo simul
repudiandae sit. Omnium aliquam disputationi est no, etiam
deleniti eos in, te pro reque torquatos. Adhuc ceteroAdhuc cetero
alienum te mei, nec id solum partem populo.
</p></p>
<p>
Sit putent fabulas complectitur ne, pro te velit viris
ocurreret. Eam dico habeo aeterno ei, ut deserunt
eloquentiam pri. Vim ad alii populo expetendis, et pro
dolorum scaevola partiendo. Mea te timeam delicata
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Design and Layout
[ 86 ]
deterruisset, ius no molestie lobortis definiebas, etiam
inciderint eos ea. Ea sit fugit audiam, nec clita alterum
intellegebat cu, nonummy fuisset id mel. Eam ut amet
sensibus consequat, erant legimus vim id.
</p>
</div>
<div id="sidebar">
<ul class="clearfix">
<li><a href="#"> Announcements </a></li>
<li><a href="#"> History </a></li>
<li><a href="#"> Team </a></li>
<li><a href="#"> Photo gallery </a></li>
</ul>
</div>
<div id="footer">
2009 businessWorld
</div>
</div>
</body>
</html>
3. Click on Submit.
4. In the list of templates (Layout | Templates), click on Set All Pages and conrm
the message: Are you sure you want to set all pages to use this template?
5. Click on the icon with the red cross in the column Default to set the template as
the standard template for all new pages.
6. Now, create a new stylesheet. In the admin console, open Layout | Stylesheets, and
click on Add a Stylesheet.
7. Enter Business World Style Sheet as Name, and paste the CSS code from the
example template above into the Content eld. The CSS code for the template is:
body
{
background:#ebebeb;
font-family:sans-serif;
font-size:12px;
}
#container
{
width:800px;
margin:15px auto;
}
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 4
[ 87 ]
#top-navi ul
{
height:22px;
padding:0px;
margin:10px 0;
border-top:1px solid #e5e4e2;
border-bottom:1px solid #e5e4e2;
}
#top-navi li
{
list-style:none;
float:left;
}
#top-navi li a
{
color:#a2a2a2;
text-decoration:none;
display:block;
padding:5px 15px;
}
#top-navi li a:hover
{
color:#ffffff;
background:#3d648a;
}
#header
{
height:105px;
background:#a83b06 url(logo.jpg) top right no-repeat;
color:#fde5d9;
font-size:90px;
padding-top:20px;
font-family:serif;
padding-left:15px;
letter-spacing:-3px;
border:1px solid #c48769;
}
#content
{
width:540px;
float:left;
background:#ffffff;
padding:10px;
margin-bottom:20px;
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Design and Layout
[ 88 ]
}
#sidebar
{
width:200px;
float:right;
background:#ffffff;
padding:10px;
margin-bottom:20px;
}
#footer
{
clear:both;
width:780px;
background:#a83b06;
padding:10px;
font-size:11px;
color:#ffffff;
font-weight:bold;
}
#footer a
{
color:#eeeeee;
text-decoration:none;
font-weight:normal;
}
h1
{
color:#062d53;
font-size:20px;
}
8. Click on Submit.
9. In the list of stylesheets (Layout | Stylesheets), click on the blue CSS icon in the
same line where a new stylesheet is.
10. Select template Business World from the drop-down eld, and click on Aach to
this Template.
11. Click Business World to open the template for eding and replace the stac link
to the stylesheet with the Smarty placeholder shown as follows:
<!DOCTYPE html>
<html>
<head>
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 4
[ 89 ]
<title>Our Company</title>
{stylesheet}
<meta name="description" content="" />
</head>
<body>
<div id="container">
<div id="header">
businessWorld
</div>
12. Click on Apply and see the new template on the website.
What just happened?
You have created a new HTML template and a new stylesheet. You aached the stylesheet
to the template, so that CMS Made Simple knows what stylesheet has to be loaded with
the template. Normally, you would use an HTML <link> tag to point to style.css. In our
case, we do not really have a le, as the stylesheet is saved in database. Therefore, we have
replaced the HTML <link> tag in the head secon of the HTML template with the Smarty
plugin {stylesheet}.
The image used as the background in the CSS stylesheet is not found.
background:#a83b06 url(logo.jpg) top right no-repeat;
With any graphics eding program, create an image of 215 x 125 pixels and name it
logo.jpg. Create a new folder under the folder uploads in your installaon, name the
folder design, and upload the image logo.jpg to this folder. You can upload it with
FileZilla or any other FTP client of your choice. Then replace the path to the image in
your stylesheet (Layout | Stylesheets), as follows:
background:#a83b06 url(uploads/design/logo.jpg) top right no-repeat;
The path to the images is relave to the currently displayed page. Wring uploads/
design/logo.jpg tells CMS to look for the image in http://www.youdomain.com/
uploads/design/logo.jpg. However, you do not need to add a domain name to the
path. If you export your template later on and use it on another domain, it is beer to use
relave paths without a domain name in front of them.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Design and Layout
[ 90 ]
Now, you can start replacing the stac text in your template with Smarty tags. Find and
replace tle, content, and menu in HTML. Open your template in the admin console and
make the following changes:
<!DOCTYPE html>
<html>
<head>
<title>{title} - {sitename}</title>
{stylesheet}
{metadata}
<meta name="description" content="" />
</head>
<body>
<div id="container">
<div id="header">
businessWorld
</div>
<div id="top-navi">
{menu number_of_levels="1" template="minimal_menu.tpl"}
</div>
<div id="content">
<h1>{title}</h1>
{content}
</div>
<div id="sidebar">
{menu start_level="2" template="minimal_menu.tpl"}
</div>
<div id="footer">
2009 businessWorld
</div>
</div>
</body>
</html>
Below the Smarty {stylesheet} plugin, you can add the {metadata} plugin. This plugin
will add global metadata (Site Admin | Global Sengs) and the Page Specic Metadata
from the tab Opons of the page. It will also set the HTML <base> tag with the aribute
href to the root of your installaon. In this way, all images can be dened in relaon to
the root folder.
Congratulaons! Your template is now ported to CMS Made Simple.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 4
[ 91 ]
Learning Smarty basics
You have learned how to use Smarty tags and rene them with a parameter so far. You have
also ported an enre HTML template to CMS Made Simple. However, if you would like to
create professional sophiscated designs, you will need more knowledge about Smarty. With
the powerful combinaon of Smarty and HTML, there are no limits to the exibility of the
sites you design.
Working with Smarty variables
Smarty variables are much simpler than complex Smarty plugins. They are placeholders that
contain plain informaon about the actual page ID, page alias, or posion of the page in
the hierarchy. Some Smarty variables that you are not aware of, are already dened in your
template. You do not need to know or remember all of them if you know how you can gure
out their names and values.
Time for action – getting Smarty variables
We are going to get the number of the page in the page hierarchy to integrate this
informaon into the design of the page tle. How do we gure out the name of the
Smarty variable that contains this informaon? We can get it from the template as follows:
1. In the admin console, click on Layout | Templates.
2. Open the Business World template for edit and add the plugin
{get_template_vars} just before the last </div> tag, as shown
in the following code snippet:
<!DOCTYPE html>
<html>
<head>
<title>{title} - {sitename}</title>
{stylesheet}
{metadata}
<meta name="description" content="" />
</head>
<body>
...........
{get_template_vars}
</div>
</body>
</html>
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Design and Layout
[ 92 ]
3. Click on Apply and then click on the magnifying glass icon on the top-right corner of
the admin console to see the result. It should now look like the following screenshot:
What just happened?
With the Smarty {get_template_vars} plugin, you displayed all Smarty variables
available in your template. In the list of variables on each line, one variable is displayed with
its name and its value separated by an equals sign. These values change from page to page.
For example, the variable with the name friendly_position contains the posion of the
page in the page hierarchy. If you navigate to other pages, you will see that the value of this
variable is dierent on every page.
How do you add a variable in your template? Smarty variables are enclosed in curly
brackets as well, but unlike the Smarty plugins, they have a dollar sign at the beginning. To
use the variable friendly_position, you just need to add the following Smarty tag to
your template:
{$friendly_position}
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 4
[ 93 ]
You can delete the {get_template_vars} plugin now. It is helpful for you to see which
Smarty variables exist and what values are stored there. You can add this plugin again, when
you need to look for another variable.
Let us use the informaon we have learned about Smarty plugins and Smarty variables
by combining them both to create a tle of the page. Open the template Business World
(Layout | Templates) for eding and change the tle of the page between the body tags
and before the tag {content} shown as follows:
<h1><span>{$friendly_position}</span> {title}</h1>
Then open Business World Style Sheet for eding (Layout | Stylesheets), and add a CSS
style to format the tle of the page:
h1 span
{
color: #ffffff;
background: #cccccc;
padding: 0 5px;
}
The result of the above formang should look as shown in the following screenshot:
You can use any Smarty variable from the template, except for variables with the value
Array(). We will look at these special variables in the following secon.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Design and Layout
[ 94 ]
Controlling output with the IF function
You can create numerous templates for your website and assign dierent templates
to dierent pages. This is useful if you use layouts with a dierent number of columns.
However, somemes there is only a ny dierence between the templates, and it is not
ecient to create a new template each me you need only slight changes.
For example, imagine you would like to display the last editor of the page, as we did with the
{last_modified_by} tag. It is a useful piece of informaon on most pages but we would
like to hide it on the contact page. You do not need to create a new template where this tag
is not added. For such slight changes, it is beer to know how to control the output in the
same template with an IF structure.
Time for action – displaying tags in dependence of the page
We are going to hide the {last_modified_by} tag on the page Contact Us. However, it
has to be sll displayed on all other pages.
1. Open the template Business World for eding (Layout | Templates).
2. Add the Smarty IF code around the {last_modified_
by…} tag, as shown in the following code snippet:
<!DOCTYPE html>
<html>
<head>
<title>{title} - {sitename}</title>
{stylesheet}
{metadata}
<meta name="description" content="" />
</head>
<body>
<div id="container">
<div id="header">
businessWorld
</div>
<div id="top-navi">
{menu number_of_levels="1" template="minimal_menu.tpl"}
</div>
<div id="content">
<h1>{title}</h1>
{content}
{if $page_alias neq "contact-us"}
<p>Last modified by {last_modified_by format=
"fullname"}</p>
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 4
[ 95 ]
{/if}
</div>
<div id="sidebar">
{menu start_level="2" template="minimal_menu.tpl"}
</div>
<div id="footer">
2009 businessWorld
</div>
</div>
</body>
</html>
In this book, you may occasionally come across a single line of code
appearing on two dierent lines. Please note that this has been done
only for the purpose of indentaon due to space constraints. When
using such code make sure it's on one line in your script le.
3. Click on Apply and then click on the magnifying glass icon in the top-right corner of
the admin console to see the result.
What just happened?
The IF code that you have added around the paragraph containing the last modicaon
causes CMS to check the page alias of the displayed page. If the page alias is equal to
"contact-us", then everything between the IF structure is not shown, otherwise the
informaon about the last modicaon is displayed.
You have seen from the previous secon that CMS knows what page of our website is
currently being displayed. This informaon is stored in the Smarty variable {$page_alias}.
With the built-in IF funcon, you can compare the page alias of the actual page with the
page alias of the page Contact Us. If the value of the variable {$page_alias} is NOT equal
to contact-us, then everything between the IF tags is displayed. If the page alias is equal
to contact-us, then nothing is displayed. In this way, you can control the output of the
template depending on the page alias.
The abbreviaon neq (meaning not equal) between the variable {$page_alias} and the
value contact-us is called a Qualier. Qualiers are used to build a logical condion in
the IF code. The result of the logical condion can be true or false. If the result of the
IF condion is true (and it is true if the page alias IS NOT EQUAL to contact-us), then
everything placed in between the IF tags is displayed. If the result of the IF condion is
false (and it is only false if the page alias IS EQUAL to contact-us), then everything
between the IF tags is suppressed.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Design and Layout
[ 96 ]
There are more qualiers that can be used to build logical condions in Smarty. Some of
them are listed in the following table:
Qualier Meaning Example
eq
equals
$page_alias eq "contact-us"
neq
not equal to
$page_alias neq "contact-us"
gt
greater than
$friendly_position gt 2
lt
less than
$friendly_position lt 3
gte
greater than or equal
$friendly_position gte $count
lte
less than or equal
$friendly_position lte 5
not
negaon
not $lang
(Negaon can be used to check if a variable
contains any value or if it is empty. If no value is
given, then the result of the condion is true,
or else the result of the condion is false).
mod
modulo
$count mod 2
The modulo operaon nds the remainder of
division of one number by another. You can use
the above example to gure out if the number
of pages in the rst hierarchy level is even or odd.
The IF structure is a useful tool for handling slight changes in one template depending on the
page name or the posion in the hierarchy. In the preceding example, you saw that you can
use every variable from the template to build a logical condion.
Creating navigation template with Smarty loop
You can also change the HTML markup of the navigaon. In this chapter, the great principle
of a "template in template" giving you full control of your design is explained. Before you can
learn this principle, you have to understand some Smarty basics.
When we added the top navigaon to the website, we used a standard template for the
navigaon. It displays the navigaon as an unordered HTML list. Imagine that you need a
kind of footer navigaon where all the links from the top navigaon are shown. You do not
need an unordered HTML list in this case. You just would like to show all links in one line
separated by a pipe (|) shown as follows:
Our Company | Announcements | History | Team | Photo gallery ……
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 4
[ 97 ]
This means that you need a completely dierent HTML markup for this kind of navigaon.
The great advantage of CMS Made Simple is the ability to display a template in template.
While you can use the main template to dene the whole layout for the page, the HTML
markup of the navigaon is saved in its own template. This navigaon template is just a
piece of the HTML code that is added to the main template at the place where the tag
{menu} is placed.
The menu template contains some HTML markup for the navigaon. Let us see how you can
create a fully new template for the menu and add your individual HTML markup.
Time for action – creating a menu template
We need a simple footer navigaon where all pages of the website are listed, separated by a
pipe (|) sign, as shown earlier.
1. In the admin console of the page, click on Layout | Menu Manager.
2. Click on Add Template.
3. Fill in the elds for New Template Name and Template Content, as shown in the
following screenshot :
4. Click on Submit to save the new menu template.
5. Open the Business World template for eding (Layout | Templates).
6. Add footer navigaon with the {menu} tag, and provide the name of the menu
template, as shown in the following code snippet:
<!DOCTYPE html>
<html>
<head>
<title>{title} - {sitename}</title>
{stylesheet}
{metadata}
<meta name="description" content="" />
</head>
<body>
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Design and Layout
[ 98 ]
<div id="container">
<div id="header">
businessWorld
</div>
<div id="top-navi">
{menu number_of_levels="1" template="minimal_menu.tpl"}
</div>
<div id="content">
<h1>{title}</h1>
{content}
{if $page_alias neq "contact-us"}
<p>Last modified by {last_modified_by
format="fullname"}</p>
{/if}
</div>
<div id="sidebar">
{menu start_level="2" template="minimal_menu.tpl"}
</div>
<div id="footer">
<p>{menu template="footer_menu"}</p>
2009 businessWorld
</div>
</div>
</body>
</html>
7. Click on Apply and see the footer navigaon on your website. It should look
as shown in the following screenshot:
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 4
[ 99 ]
What just happened?
You have just created a new menu template. In the menu template, you have used some
Smarty code that needs to be explained. The most important part in the code is the Smarty
variable $nodelist. It is not an ordinary Smarty variable like the ones we have already
learned. This variable is an array. It means that more than one value is saved in it. This
variable contains all the informaon, such as menu texts or URLs of all acve pages of our
website. With the built-in Smarty funcon foreach, we can run through all the values of
this variable and display the same piece of HTML code for each page. Let us see exactly how
a loop works.
foreach goes through every single page saved in the variable {$nodelist} and prints
the HTML code placed between the foreach tags as many mes as there are pages found
in the variable. For each run, the values for the single page are saved in the variable $node.
We name and create this variable with parameter item=node in the foreach tag. The
loop starts its run with the rst menu item—the page Our Company. At this point, the
menu text and URL are saved in the variable $node. We can reach the required informaon
with {$node->menutext} and {$node->url} and use the tags in the HTML code. With
the next (second) run, the next page is saved in the variable $node. So beginning with the
second run, another menu text and URL is pasted into the same HTML code. The foreach
loop runs through every page and stops automacally when no more pages are found.
Footer navigaon displays all pages independent of their posion in the hierarchy. You
can limit the footer navigaon only to the rst level as well. Do it the same way you did
it with the top navigaon. Use parameter number_of_levels in the tag {menu} shown
as follows:
{menu number_of_levels="1" template="footer_menu"}
foreach loops are a powerful way to construct any form of navigaon you can imagine. This
way, you can use images instead of text in your navigaon.
One more example, how a graphical navigaon can be created, is as shown:
{foreach from=$nodelist item=node}
<a href="{$node->url}">
<img src="uploads/design/{$node->alias}.jpg"
alt="{$node->menutext}" border="0" />
</a>
{/foreach}
To understand what HTML is produced by the preceding Smarty code, in your mind, replace
the bold Smarty tags with the actual values of a page, for example, Contact Us:
<a href="contact-us">
<img src="uploads/design/contact-us.jpg" alt="Contact Us" />
</a>
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Design and Layout
[ 100 ]
As the previous code is placed in the foreach loop, the markup will be repeated for every
page. You can see that for the graphical example to work, you will need to create a JPG le
for every page. The name of the les has to correspond to the page alias. In our example,
for the top navigaon, you will need ve images:
our-company.jpg
products.jpg
client-center.jpg
contact-us.jpg
sitemap.jpg
Create the images (buons) in the graphics eding program of your choice and upload them
to the uploads/design directory on your web server. Create a new menu template with the
name graphical_menu, and add the Smarty foreach code into it, as shown earlier. Then
replace the top navigaon in the main template (Layout | Templates) with the following line:
{menu number_of_levels="1" template="graphical_menu"}
Now, the navigaon is made of graphics instead of text.
There is even more informaon about each page available in menu template which is given
in the following table:
Variable Explanaon
$node->pagetitle
Title of the page
$node->depth
Number of levels in the page hierarchy
$node->prevdepth
Number of levels of the previous page in the page hierarchy
$node-
>haschildren
Prints 1 if the page has child pages
$node->target
The target of the page can be set by the editor from the
drop-down menu. In your template, you use it in the following way, as
shown in the following example:
<a href="{$node->url}" target="{$node->target}">
$node->alias
Prints the alias of the page
$node->current
Prints 1 if the page is currently displayed
$node->type
The type of the page. Possible values are:
sectionheader (Secon header)
separator (Separator)
content (Content)
pagelink (Internal page link)
link (External link)
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 4
[ 101 ]
With the informaon given, you can now enhance your navigaon. For example, you can add
the HTML aribute target to consider if the link should open in the same window or in the
new one.
If you would like to add a special CSS class to the current page, then you will use an IF code
within the foreach tags. See how you can combine both structures:
{foreach from=$nodelist item=node}
<a href="{$node->url}" {if $node->current}class="current"{/if}
>{$node->menutext}</a> |
{/foreach}
This IF code will add class="current" to the HTML tag <a> only to the link of the page
that is currently displayed.
If you would like to know more about Smarty, use the documentaon and support forum at
http://www.smarty.net.
Exporting templates
Once your theme is nished, you can export it from CMS Made Simple. Exporng a theme
means making an XML le containing template(s), aached stylesheets, and oponally menu
templates. It also includes all images used in HTML or CSS. This XML le can be saved as a
backup of your design, http://themes.cmsmadesimple.org, or to hand it over to
your customer.
Time for action – displaying tags in dependence of the page
1. In the admin console, click on Layout | Theme Manager.
2. Select the checkbox on the line where the Business World template is, and
enter a name in the eld Export Theme As:
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Design and Layout
[ 102 ]
3. Click on Export.
4. In the download window of the browser, choose where on your hard drive this
XML le should be saved.
You can either open the XML le or save it as backup for your design.
Pop quiz –testing what you have learned
1. Where in the admin console can you nd all the templates, which you have at your
disposal in your project?
a. Layout | Templates
b. Layout | Stylesheets | Templates
c. Content | Pages | Main | Templates
d. Extensions |Templates
2. How can you replace stac text with dynamical components?
a. Integrate Smarty tags like {content} in the template.
b. Integrate Smarty tags like <content> in the template.
c. Integrate modules like 'DynTxt' in the CSS stylesheet.
d. Integrate a Smarty tag like <breadcrumbs> in the content eld
of the page.
3. If you have a closer look at the Smarty tag {last_modified_by
format="username"}, which part of it is the "name" of the parameter?
a. last_modified_by
b. format
c. username
d. by format
4. What do you do if you want to have special and dynamic informaon on every page?
a. Add Smarty plugins directly into the content of the page by using the
content eld.
b. Add Smarty plugins directly into the content of the page by using the
stylesheet.
c. Add Smarty plugins directly into an inacve template, because you can t
the output easier in the layout of the site.
d. Add Smarty plugins directly into the acve template, because this is the
only way to display it.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 4
[ 103 ]
5. Where do you place the {stylesheet} tag in the template?
a. Head
b. Keywords or descripon
c. Title
d. Body
e. Footer
6. How many stylesheets can be dened for one template?
a. Just one stylesheet for each template.
b. It depends on the number of themes in the template, you can dene as
many stylesheets as you have themes for it.
c. Maximum seven, because of program restricons.
d. As many as you want.
7. How can you generate the navigaon?
a. The main menu and the sidebar navigaon have to be connected in the
admin console Content | Pages and the drop-down menu parent.
b. The sites have to be connected to the whole navigaon at once with a
Smarty tag.
c. The navigaon is generated automacally.
d. The main menu is generated automacally, the sidebar menu has to be
integrated by using the module 'SideNav3.1'.
8. What is the meaning of the plugin menu in combinaon with the parameter
start_level set to 2 ({menu start_level="2"} )?
a. The menu is only shown when you click twice on the buon.
b. The value 2 depends on the number of the line of the code in the template
where it is integrated.
c. When you set the value 2, there will only be 2 navigaon links shown, when
you set all instead of 2, the whole navigaon structure is displayed.
d. The value 2 is responsible for the rst level not being shown in
the navigaon.
9. What is the special feature of an array like $nodelist, which is a Smarty variable?
a. There is more than one value saved in it.
b. There is exactly one value saved in it.
c. Arrays only contain numeric values.
d. Arrays only contain text values.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Design and Layout
[ 104 ]
10. What is the right denion for a custom CMS plugin (funcon)?
a. It is a built-in funcon, which is the inner working of Smarty.
b. Custom plugins are addional funcons.
c. It is everything that is placed between the curly brackets.
d. It starts with a $ sign and contains simple values or a number of values
called array.
Have a go hero – creating custom templates
Now, it is your turn to create a design for your website of any complexity. If the design can
be sliced into HTML and CSS templates, then it can be converted to CMS Made Simple.
There are no restricons in using technologies such as JQuery, Flash, or even frames.
Summary
We learned a lot in this chapter about templates and design with CMS Made Simple.
Specically, we covered:
Working with exisng templates: You learned how to import templates into your
installaon and assign them to one or more pages.
Creang a new template and stylesheet from scratch: You started to create a simple
template with CMS Made Simple to see how stac HTML interacts with dynamic
Smarty tags. You also learned how to aach stylesheets to a template.
Creang navigaon: It was very important to see how easily the navigaon of
the website can be created. You created a top navigaon and a sidebar with only
one Smarty plugin {menu}. You also saw how you can control the output of your
navigaon with some simple parameters. Later on, you created your own template
to see how the principle of "template in template" is covered in CMS Made Simple.
Porng templates: You created your HTML and CSS template in any editor of your
choice. Once the template was nished, you could port it to CMS Made Simple.
Learning Smarty Basics: You learned a lot about Smarty tags. You saw how this easy
and powerful language can help you to customize your template. Understanding
Smarty means that you can get complete exibility with your design. You also
learned some Smarty terms that are important for understanding how Smarty
can be used. See the following table to reect on what you have learned so far:
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 4
[ 105 ]
Denion Explanaon
Smarty tag Everything that is placed between the curly brackets
Smarty built-in funcons Built-in funcons are the inner workings of Smarty, such
as {if} and {foreach}. A reference of them can be
found on http://smarty.net
Custom CMS plugins (funcons) Custom plugins are addional funcons. {content}
and {menu} are examples of custom funcons.
The list of them can be found in the admin console
Extensions | Tags.
Parameters/Aributes Most of the plugins above take parameters that specify or
modify their behavior.
Smarty variables Template variables start with the dollar sign, like
{$page_alias} or {$friendly_position}.
They contain simple values or a number of values (array).
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
5
Using Core Modules
We have learned how to set up a website, plan and create a complete website
structure, and design the website. These were the rst steps we had to take
before wring content and implemenng addional features such as news
arcles or search funconality.
What are core modules?
Core modules are a few basic modules that oer important features and
are shipped with CMS Made Simple. They are installed by default and
are supported by the ocial development team of CMS Made Simple.
These modules are not essenal, and your CMS website will work well
without them. You can use them if you need funconality such as news
management, search funcon, or custom navigaon.
In this chapter, we will:
Create global content blocks
Implement news arcle and categorize them
Add a search funcon
Use a built-in Image Manager and File Manager
Create a sitemap with Menu Manager
Create a print version of the content pages or news arcles
Learn how to install addional modules that are not included in the standard
installaon of CMS Made Simple
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Using Core Modules
[ 108 ]
In the following examples, I assume that you have a template like the one which was created
in the last chapter and that your website structure is built according to the one shown at the
end of Chapter 3, Creang Pages and Navigaon. However, you can sll proceed with this
chapter if your structure or design is dierent.
Understanding global content blocks
You can use global content blocks to add some repeated parts containing text and/or images
in your website. These blocks contain the same informaon and can be used at any place in
your template or in the content of any page. For example, you can create a contact box with
the address and phone number of your company as a global content block and then add it at
mulple places in your website.
Sure, you can design the contact box every me you need it and add the contact informaon
individually for each page. You can even copy the box from one page and paste it into
another. It works unl the phone number of your company changes. Now, you have to open
each page where the contact box is added and change the phone number. Depending on the
number of the pages, you could spend hours changing every page. Using the global content
block, you can edit all the informaon in one place and just call the same content from any
place on your website. If the phone number of the company has changed, then you adjust it
in the global content block, and it is automacally changed on each page that uses this global
content block.
Let's see how to use global content blocks on your website.
Time for action – adding a global content block to the website
Let's say that we need a contact box as described earlier on some of the pages placed
somewhere in the content.
1. In the admin console, click on Content | Global Content Blocks.
2. Click on Add Global Content Block.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 5
[ 109 ]
3. Enter the Name of the block and then the contact informaon in the eld Content,
as shown in the following screenshot:
Use Shi + Enter on your keyboard to add line breaks.
4. Click on Submit.
5. In the list of the global content blocks, copy the Smarty tag from the column Tag to
Use this Block to the clipboard.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Using Core Modules
[ 110 ]
6. In the admin console, open a page of your choice (Content | Pages) for eding and
paste the tag at the place where the contact box should be shown.
7. Click on Apply, and see the result on your website.
What just happened?
For the contact informaon, you have created a new global content block. Every me you
need to display contact informaon on your website (whether in the page or in a template),
you add the Smarty tag instead of the complete informaon. From now on, you make your
changes only in the global content block, and each page and template using it will display the
same informaon.
Try it out. Add a new global content block to another page and see the result on both pages.
Then in the admin console, open Content | Global Content Blocks, choose the content block
with your contact informaon, and change something in it. Save it, and see the changes on
both pages using it.
Managing news articles with module News
Unl now, we have added content pages which are under the control of the hierarchy
manager of CMS Made Simple. For announcements or events in your company, you use the
core module News. This module allows you to create quick, short statements, and then place
them at any place on your website, templates, or pages. Your news should be really new.
Nothing is as disappoinng as websites containing news dated a year ago. "Aged" news
gives a website an abandoned look.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 5
[ 111 ]
For your company website, you can announce the last project the company accomplished
or any customer events. With the news secon, you can also adverse the new products or
services that your company oers. You can present your new customers or partners and wish
your customers on holidays. When the visitors of the website nd news arcles dated just
some days ago, they know that your website (and your company) is alive.
If you cannot imagine what could be announced on the website, then skip this module.
Do not place it only because it is standard and easy to use and other websites have news
on them.
Displaying news on the website
The News module is very exible and can be displayed in many dierent ways. Let's see how
you can add news to the page Announcements. I assume that you have created this page
already. If not, then you can put the news on the start page of your website as well. The
next step will work on every page.
Time for action – displaying news on the page
1. Open the page Announcements for eding (Content | Pages).
2. Add the Smarty tag {news} at the place where news arcles should be displayed,
as shown in the following screenshot:
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Using Core Modules
[ 112 ]
3. Click on Apply, and see the result of this Smarty tag on your website. It should
look as follows:
What just happened?
With only one short Smarty tag, you can display the rst news arcle on your website. This
arcle is already added with the standard installaon of CMS Made Simple. But where can
this arcle be edited and how can new arcles be created?
Adding news
All news that has ever been created can be found in the admin console. Open
Content | News. You see the admin area of this module with many sengs. On the
rst tab, Arcles, you can search through the news if you have got lots of them. But at this
point, you have just one news arcle that is displayed below the list and called News Module
Installed. This news arcle is created automacally during installaon of CMS Made Simple
and is also shown on the page where the tag {news} has been added.
Let's add a new arcle to the list of news and see what can be changed to suit
your requirements.
Time for action – adding news items
1. In the admin console, click on Content | News.
2. Click Add Arcle.
3. Enter the Title of the news arcle, Summary text, and Content of the arcle.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 5
[ 113 ]
4. Click on Submit.
5. Open the page Announcements to see the new arcle published. It should look as
shown in the following screenshot:
What just happened?
You have published a new announcement in the admin console of your website. For
the summary and content elds, the WYISWYG editor was automacally displayed. The
dierence between the rst arcle added during installaon and the arcle published by you
is the link More at the end of the arcle. This link is only shown if the Summary eld of the
news arcle is lled. In this case, only the summary text of the arcle is shown on the page.
If you click the More link, you can read the complete text of the news arcle. However, if you
do not use the Summary eld, then the whole Content of the news item is displayed in the
summary view, and there is no link More at the end of the arcle. Normally, you would
not use the eld Summary for short arcles, so that the enre text can be read in the
summary view.
Let's see what elds can be changed while eding and adding news arcles.
Open the last edited arcle by clicking on it in the list of arcles (Content | News). The
author name is added automacally. It is your username. The eld Category shows all
categories available. In the standard installaon, there is only one category General. We
will see how to add new categories later on. Below the eld Content, you see the eld Extra.
This eld can be used for any addional informaon. However, the eld is not shown in the
template automacally. The eld Post Date shows the publishing date of the arcle and can
be changed to whatever you like. While adding new arcles, the eld is automacally lled
with the actual date.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Using Core Modules
[ 114 ]
Status is a very important eld. You can choose between Published and Dra. Dras are
never displayed on the website. In this way, you can work on your arcle as long as you
need it. Save it as dra and change the status to Published, once the arcle text is ready.
News arcles can also have a start and expiraon date. Normally, if no expiraon date is set,
the arcle is published on your website forever. But what if you just would like to wish your
visitors Merry Christmas? It would look strange if the arcle is sll published some weeks or
even months aer December 25th. In this case, you select the eld Use Expiraon Date, and
choose the date when the arcle expires. Expired arcles are automacally removed from
your website, but they can sll be found in the list of arcles in the admin console. If you
add a date in the future in the eld Start Date, the arcle will be published on the website at
the given date. In this way, you can set the exact date and me for your announcements to
appear on the website.
Keep in mind that dates are saved according to the local me zone dened on
your server. If you develop the website on a dierent server and then transfer
the nished version to another one, you have to double check that both the
servers are congured with the same me zone.
News categories
You can categorize your news by adding new arcles and assigning news to the dierent
categories. This feature will not only allow you to sort and display news arcles in the admin
console, but also gives you power to display news from dierent categories on dierent
pages or even in the same page on dierent locaons. Categories can be created as a tree,
so that there are parent and child categories. The tree structure of news categories is very
similar to the page hierarchy of the content pages.
Open the Categories tab in the admin area of News module (Content | News) and create a
new category. Once created, the category can be used for new arcles. The old arcles can
be assigned to this category as well.
By using categories, you can publish any sort of informaon with this module, not only
announcements. For example, you can publish job opportunies at your company as well.
Time for action – creating news categories
We are going to create a new category that will contain job oers and then show the list of
jobs on the start page.
1. In the admin console, click on Content | News.
2. Under the Categories tab, click on Add Category and create a new category with the
name Vacancies, as shown in the following screenshot:
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 5
[ 115 ]
3. Click on Submit.
4. Under the Arcles tab, click Add Arcle and create a new arcle with the
following informaon:
a. Category: Vacancies
b. Title: Markeng Manager
c. Content: We are looking for an excellent person who will be able to
develop the European market for our company. Please contact our human
resources department.
5. Click on Submit
6. Open the start page of the website for eding and add the Smarty tag somewhere in
the Content eld, as shown in the following screenshot:
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Using Core Modules
[ 116 ]
7. Save the page, and see the changes on the website.
What just happened?
You have used the News module to display job opportunies on the start page. You
have used the parameter category to limit the shown items to only one category.
Therefore, only the items assigned to this category are shown at this place. On the page
Announcements, all news are sll displayed (including job opportunies), as there was no
limitaon to one category. If you would like to limit announcements on this page to the
items assigned to the category General, then you would modify the Smarty tag, which is
shown as follows:
{news category="General"}
You see that you can display news arcles at dierent locaons of your website and limit
them to one category. You can use the News module for anything that you would like to
categorize. Another example is the list of last accomplished projects. Even a company blog
can be realized with this module.
Customizing news templates
Remember how you have customized the menu template in the previous chapter. The
principle of "template in template" is valid for each module in CMS Made Simple. It means
that all module templates can be edited separately from the main layout to t in the enre
website. At the place where the Smarty tag for the module is placed (in the content page
or in the template), the template of the module is shown. It is just like using one template
inside another template, so is using module templates in the main templates.
There are dierent templates for the news arcle of your website:
Summary Templates: The list of news with the summary elds and links for
further reading
Detail Templates: The complete text of the news arcle
Browse Category Templates: The list of all news categories
Form Templates: Used when User Management is installed, and will be
discussed later
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 5
[ 117 ]
Each template can be created or modied by using a combinaon of Smarty variables and
HTML. If you call the module with the Smarty tag {news}, then the sample template for
news summary is called. If you add the aribute action to the Smarty tag {news}, then
another template according to the following list is called:
Acon Template
{news action="default"}
Summary Templates
{news action="detail"}
Detail Templates
{new action="browsecat"}
Browse Category Templates
{news action="fesubmit"}
Form Templates
You will nd templates in the admin console (Content | News) on the tabs next to Arcles
and Categories. For each acon, more than one template can be created, but only one
template can be set as the default one.
Now, let's see how you can create and use a new summary template in your website.
Time for action – creating a new summary template
Assume that you need just a list of the news arcles without their summary text and date.
The tles of the news items should be linked to the full news arcle (detail view).
1. In the admin console, open Content | News, and select the tab
Summary Templates.
2. Click on Create A New Template.
3. Enter NewsList as the Template Name and replace the Template Source with the
following code snippet:
<ul>
{foreach from=$items item=entry}
<li><a href="{$entry->moreurl}"
title="{$entry>title|cms_escape:htmlall}">
{$entry->title|cms_escape}</a>
</li>
{/foreach}
</ul>
4. Click on Submit. The template appears in the list of the summary templates.
5. Open the page template Business World (Layout | Templates) and add the list of
news arcles below the sidebar navigaon, as shown in the following code snippet:
<!DOCTYPE html>
<html>
<head>
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Using Core Modules
[ 118 ]
<title>{title} - {sitename}</title>
{stylesheet}
{metadata}
<meta name="description" content="" />
</head>
<body>
<div id="container">
<div id="header">
businessWorld
</div>
<div id="top-navi">
{menu number_of_levels="1" template="minimal_menu.tpl"}
</div>
<div id="content">
<h1>{title}</h1>
{content}
{if $page_alias neq "contact-us"}
<p>Last modified by {last_modified_by
format="fullname"}</p>
{/if}
</div>
<div id="sidebar">
{menu start_level="2" template="minimal_menu.tpl"}
<hr />
{news summarytemplate="NewsList"}
</div>
<div id="footer">
<p>{menu template="footer_menu"}</p>
2009 businessWorld
</div>
</div>
</body>
</html>
6. Click on Submit, and view the result on the page. Your sidebar should look similar to
the following screenshot:
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 5
[ 119 ]
What just happened?
You have created a new summary template for the news arcles. The summary template
includes an ordered list of the news arcles, and each arcle is linked to the detail view.
Then, you have added a Smarty tag in the template below the sidebar menu. You have used
the parameter summarytemplate to specify exactly what template should be used to
display the summary view of the news arcles in this place. If you do not use the parameter,
then the default template is used. In the standard installaon of CMS Made Simple, the
Sample template is taken by default. You can change the default template by clicking on
the icon with the red cross in the column Default in the list of templates (Content | News |
Summary Templates).
You can edit exisng templates or create new custom templates. If you use the module
for dierent tasks such as job opportunies, announcements, and company blog, you can
create as many templates as you need. You can also specify which template should be used
to display the output of the module at the place where the tag is called. An example call for
displaying job opportunies on the website can be:
{news summarytemplate="Jobs" detailtemplate="Job"
category="Vacancies"}
For the preceding example, you should create a summary template with the name Jobs and
a detail template with the name Job. You also need a Vacancies category where you add at
least one job opportunity.
Adding custom elds to the module News
Somemes, you need custom informaon to be displayed in the announcements. For
example, you would like to add a department or a special locaon, or you would like to
associate les with the news announcing new products. In this case, you would have to
dene custom elds in the News module.
Let's see how the locaon of the news can be added in the special eld.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Using Core Modules
[ 120 ]
Time for action – adding custom elds
1. In the admin eld, open Content | News and select the tab Field Denions.
2. Click Add Field Denion and enter the elds, as shown in the following screenshot:
3. Click on Submit.
4. Open the last arcle item you have added, for example, Markeng Manager
(Content | News), and you will nd the new eld Locaon at the boom
of the page.
5. Enter Washington in the eld Locaon, and click Submit.
6. Open your page and you can nd the locaon added below the news arcle.
(Aenon: This works only with Sample templates or templates based on default
templates!). It should look similar to the following screenshot:
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 5
[ 121 ]
What just happened?
You have added a new custom eld to the news arcles. As the eld is marked as Public,
it will be displayed on the website. The eld is automacally added to the news eding
window. If you like to change the posion of the eld, you should edit the template. In the
default template Sample, all addional elds are added at the boom of the news arcle.
In your own template, you can get any custom eld value with the following line of code:
Location: {$entry->fieldsbyname.location->value}
The previous line will display the value saved in the eld Locaon. You can use this line in the
summary and detail template.
There are even more parameters that you can use to rene the output of the Smarty plugin
{news}. For each module, the list of parameters can be found in the Help secon of the
module. In the admin console, open Content | News, and click on the Module Help link to
the right of the module name.
There are some useful parameters for the News module, as listed in the following table:
News parameter Descripon
browsecat="1"
Shows a browseable category list.
showall="1"
Shows all arcles, irrespecve of the end date.
showarchive="0"
Shows only expired news arcles.
sortasc="true"
Sort news items in an ascending date order rather
than descending.
sortby="news_title"
Field to sort by. Opons are: news_date, summary,
news_data, news_category, news_title,
news_extra, end_time, start_time, and random.
Default is news_date.
moretext="more..."
Text to display at the end of a news item if the eld Summary
is not empty. By default, it is set to "more..."
start="0"
Starts the list of arcles with the item number given.
If you would like to display a detailed view of the news arcle in another
page template other than your main template, then create a new
page template (Layout | Templates), create a new page, and assign
the new template to the page. Call the News module with {news
page="alias"} where the alias is the name of the page where a
detailed view of every news item should be displayed.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Using Core Modules
[ 122 ]
You can even allow your site visitors to add news arcles to your module if you install the
module FrontEndUsers which will be described in Chapter 7, Using Third-party Modules. The
news arcles submied by the website's visitors will be saved as dras, and you can publish
them aer approving them in the admin content page.
Using the news title as the page title
Pay aenon to the tle bar of the browser on the page where the full arcle is displayed.
You discover that the tle tag will be the same for each item, as there is only one real page
to display each news arcle. However, search engine opmizaon requires a unique tle
for every page. You can customize the tle of the generated pages with a small trick. Open
Content | News in the admin console, and choose the Detail Templates tab. At the very top
of the template, add the following line:
{assign var="pagetitle" value=$entry->title|escape}
This line will generate the Smarty variable {$pagetitle} containing the tle of
the news arcle. To add the variable to the main template, open it, and add the tag
{process_pagedata} at the very top of your template and replace the tle tag with
an IF structure, as shown in the following code snippet:
{process_pagedata}
<!DOCTYPE html>
<html>
<head>
{if isset($pagetitle) && !empty($pagetitle)}
<title>{title} - {sitename}</title>
{else}
<title>{sitename} - {title}</title>
{/if}
...
This piece of code checks if the variable {$pagetitle} is dened and is not empty. If the
variable exists, then the news tle is used for the tle tag and is displayed in the tle bar of
the browser. If not, then the ordinary page tle is taken.
Using the search function with the module Search
The next standard feature that should be explained is a Search module. It is installed by
default and allows the visitors of the website to search the content pages and the news
arcles on your website. Normally, you add the search eld to your template rather than
to every single page.
Let's add the search feature to the template at the top of the website.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 5
[ 123 ]
Time for action – adding a search form
1. Open the template Business World (Layout | Templates)
2. Add the Smarty tag {search} to the sidebar, as shown:
<!DOCTYPE html>
<html>
<head>
<title>{title} - {sitename}</title>
{stylesheet}
{metadata}
<meta name="description" content="" />
</head>
<body>
<div id="container">
<div id="header">
businessWorld
</div>
<div id="top-navi">
{menu number_of_levels="1" template="minimal_menu.tpl"}
</div>
<div id="content">
<h1>{title}</h1>
{content}
{if $page_alias neq "contact-us"}
<p>Last modified by {last_modified_by
format="fullname"}</p>
{/if}
</div>
<div id="sidebar">
{search}
{menu start_level="2" template="minimal_menu.tpl"}
<hr />
{news summarytemplate="NewsList"}
</div>
<div id="footer">
<p>{menu template="footer_menu"}</p>
2009 businessWorld
</div>
</div>
</body>
</html>
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Using Core Modules
[ 124 ]
3. Click on Submit and view your page in the browser, it should look as shown in the
following screenshot:
What just happened?
You have added the search feature to your website. It works out of the box if you try to
search in the content of your pages or news arcles.
You can dene the list of Stop Words in the admin console (Extensions | Search | Opons).
These words are excluded from the search index, and there is also a predened list of
common stop words for your convenience. Normally, you would add your company name or
any word that can be found on every page or in templates. To avoid that, search funcons
show all pages in the found results. You can add your custom words separated by a comma
at the end of the list or dene your own list. Do not forget to click on the buon Reindex
All Content aer saving the list of stop words. It would create a new search index for
your website.
If your website is in English, you can use a word stemming search. This means that the
words in the search index are reduced to their stem, base, or root form. For example, you
have a content page where the word steps is found and indexed. However, the visitor of
your website searches for step. Without acvang the stemming feature, nothing is found
as literally step is not the same as steps. With stemming search, all forms of the search
word are considered, such as "step", "steps", and even "stepped".
Excluding pages from search
If you would like some pages, like Policy or Disclaimer to be excluded from
search, then open the page that you would like to exclude in the admin console
(Content | Pages) and select the Opons tab. Deselect the eld This page is
searchable, and save the page. Now the page is not found even if the searched
word appears on this page.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 5
[ 125 ]
You can customize the template of the search template (search eld itself) and search result
template in the admin console (Extensions | Search). As usual, you use a mix of HTML and
Smarty tags to change the order of the elements. Use stylesheet to change to suit the form
into your layout.
If you would like to output search results in the template dierent from the main one, you
have to create the desired template yourself (you have learned how to create templates in
the previous chapter) and assign the template to the page where the search results should
be shown. The alias of this page should be passed to the parameter resultpage as shown
in the example. Modify the Smarty tag {search} by adding the parameter resultpage
as follows:
{search resultpage="search-result"}
You have to assign the alias of the page created previously to the parameter resultpage,
so that the search results are always shown on this page now.
The search feature also tracks the search acvity on your website and allows you to gure
out what the visitors of your website need or miss. You can track single search words or
phrases to see how oen they have been used by the visitors. In the Opons tab of the
Search module (Extensions | Search), you can select Track Search Phrases, not Individual
Words to enable stasc for phrases.
The Search module of CMS Made Simple is not as sophiscated as large search engines. You
can use customized Google search for your website if you would like to show the searched
words in the text and have stemming features for languages other than English. But if your
website is not indexed in Google, then you do not have any other opon but to use the
standard search feature of CMS Made Simple.
Browsing les with File Manager
You can upload any les in CMS Made Simple with File Manager. File Manager is like a
built-in FTP browser where you can upload, move, delete, and copy les or directories. In the
admin console, open Content | File Manager, and nd the list of all the les that are saved
in the folder uploads on your web hosng.
On the Upload les tab, you can upload more than one le or even an archive le that will
be unpacked aer uploading in this folder.
On the Sengs tab, you can enable the advanced mode that will let you gain access to the
whole le structure of your CMS Made Simple website so that File Manager is no longer
restricted to the folder uploads. Be careful with this seng, as you can easily move and
delete core les of CMS Made Simple, and as a result, damage your enre website.
If you would like to upload and edit images, then you should use Image Manager.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Using Core Modules
[ 126 ]
Using Image Manager
Surely, you would like to add images to your website. Whether they are placed in the content
of your pages or used in templates or photo galleries, they have to be uploaded to your web
host rst. You should opmize your images before displaying them on your website. Do not
upload images that are larger than 200KB. This restricon is not from CMS Made Simple. You
can upload and display even larger images with Image Manager. The restricon is suggested
in consideraon of your visitors who want your website to load quickly. If you use large
images, your website will load very slowly, and a certain percentage of your visitors will
close the browser before they have seen what you oer on the website.
The rule of thumb
One image should not be larger than 20KB and all images on one page
together should not account for more than 200KB.
Resize your images with graphics program before using them on the website. Or, use the
built-in image editor in CMS Made Simple to resize, crop, rotate, and ip your images.
Let us upload some images to CMS Made Simple, edit, and display them on the page or in
the template. There are three formats that can be displayed by any browser—JPG (or JPEG),
GIF, and PNG. No other graphics should be used on the websites, because some browsers
on some operang systems will not display BMP, TIFF, PSD, or other les. Prepare one image
that you will use for the next step on your local disk with any graphics applicaon.
Time for action – using the image editor
Assume we have an image that is too large for the page. Ideally, you have to create images
with a graphics applicaon before uploading them to your web hosng. But if you have no
graphics applicaon or would just like to make few quick changes, you can use the built-in
Image Manager for the task.
1. In the admin console, open Content | Image Manager.
2. Choose the image you would like to upload in the eld Upload File at the boom
of the page, and click on Send.
3. When the image is uploaded, click on the edit icon below the image to start the
image editor.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 5
[ 127 ]
4. Resize the physical size of the picture to the required width and height in pixels
by clicking on Resize in the le control panel and giving the desired dimensions
in the elds above the image.
5. Click on the icon with a green ck mark above the image to apply the changes.
6. Click on the Save icon in the le control panel, and choose the image format for
the resized image, as shown in the following screenshot:
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Using Core Modules
[ 128 ]
7. Click on the green ck mark again to apply the changes. When the image has been
saved, you can close the window.
8. Refresh the page with the image thumbnails or open Image Manager again
(Content | Images). The new version of the image with the changes applied is
now shown in the list of available images.
What just happened?
You have uploaded a new image to CMS Made Simple. Aer uploading, a 96x96 pixels
thumbnail (small version of the picture used for previewing) is automacally created by CMS.
You have changed the size of the image and then saved it at a lower quality to reduce the
weight in kilobytes as well. Choosing a quality of 60 percent to 85 percent for JPEG images
will not cause any visible quality loss. Try it out. Your original image will not be changed aer
saving, but a new version of the image will be created. You can delete the new version at any
me and start with the original picture once again if you have made a mistake.
For more advanced graphical work, you can use special graphics applicaons such as the free
GIMP or the commercial Adobe Photoshop.
With an FTP browser, you can nd your image les and automacally created thumbnails
in the directory /uploads/images. If you have a lot of images, you can upload them to
this directory using an FTP browser in this directory as well. However if you do this, the
thumbnails are not created automacally. Aer uploading through FTP, you have to open
Content | Image Manager. The Image Manager will discover the newly uploaded les and
then create the missing thumbnails.
Thumbnails' lenames are prexed with thumb_. For example, the image le city.jpg will
get an automacally generated thumbnail with the name thumb_city.jpg in the same
folder where the original image was uploaded.
Using images in template and content
The uploaded images can be used in the content of the pages with the WYSIWYG
editor (refer Chapter 3, Creang Pages and Navigaon). Normally, the editor of the
content does not have the ability to change the template of the website. But there is
also a funconality that can help him/her to assign an image to the page and display it
anywhere in the template.
Consider that the design (template) and the text can be strictly separated from each other in
CMS Made Simple. In order to give a lile more responsibility for the appearance of the site
to the editor, you can allow him to change the pictures of the template in a dened way.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 5
[ 129 ]
Let's create a new image that can be chosen by the editor of the page to be displayed above
the navigaon. First of all, create two images having a width of 800 pixels and height of
about 100 pixels. Name them pageimage1.jpg and pageimage2.jpg. Upload the images
with Image Manager to CMS Made Simple. Do not upload them to subfolders, but directly to
the start folder of Image Manager (uploads/images).
In the admin console, open any page (Content | Pages). Choose the Opons tab, and in the
Image eld, select the picture you would like to associate with this page, as shown in the
following screenshot:
Do the same with other pages and assign other images to them.
If you cannot see the image in the drop-down eld, then it is not uploaded into
the right folder. Page images have to be found in Content | Image Manager or
/uploads/images (not subfolder) on the web server.
Then add the image to the template. Open the Business World template (Layout |
Templates), and add the page image to display it:
<!DOCTYPE html>
<html>
<head>
<title>{title} - {sitename}</title>
{stylesheet}
{metadata}
<meta name="description" content="" />
</head>
<body>
<div id="container">
<div id="header">
businessWorld
</div>
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Using Core Modules
[ 130 ]
<img src="uploads/images/{page_image}" width="800" height="100"
alt="{title}" />
<div id="top-navi">
{menu number_of_levels="1" template="minimal_menu.tpl"}
</div>
<div id="content">
<h1>{title}</h1>
{content}
...
Now the editor of the page can select from the predened images to display them in the
template without having to modify the template itself.
Using Menu Manager in content
You have already worked with the Menu Manager to create top, sidebar, and footer
navigaon for the website. Top navigaon displays pages that are placed on the rst level of
the page hierarchy. Sidebar navigaon automacally displays only the children of the page
selected in the top navigaon. Navigaon in the footer includes all pages independent of
their posion in the hierarchy.
Addionally, you can display the complete website structure (or some parts of it) in the
Content eld as well. In this way, you can easily output a sitemap that helps your visitors
to nd the required informaon on your website.
Time for action – creating a sitemap
Let's create a sitemap in the page Sitemap that we had created in Chapter 3, Creang Pages
and Navigaon. If you do not have the page, then please create it now.
1. In the admin console, open the page Sitemap (Content | Pages).
2. Add the Smarty tag {menu template="minimal_menu.tpl"} to the content of
the page.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 5
[ 131 ]
3. Click on Apply, and use the magnifying glass icon beside the buon Apply to see the
result on the website. It should look as shown in the following screenshot:
What just happened?
Using the already known Smarty tag {menu}, you have added a sitemap to the website. It
displays the complete structure of the website with all pages that are marked as Shown in
Menu (tab Opons). You can rene the output of the {menu} tag with further parameters:
show_all="1": This opon will show all pages even if they are set to not be shown
in the menu. However, it sll will not display inacve pages.
number_of_levels="1": This seng will help to limit the output to a certain
number of levels.
You can combine as many parameters as you like. For example, to display all acve pages and
to limit the hierarchy by two levels, you would add the following line:
{menu show_all="1" number_of_levels="2"}
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Using Core Modules
[ 132 ]
Another example of the use of an addional navigaon opon in the content is the list
of pages (not news arcles) on the start page independent of their actual posion in the
hierarchy. Assume that you would like to create some kind of quick navigaon on your start
page giving the visitor the possibility to access some pages directly from the start page.
To create a list of subpages, use one of the following parameters in the content of the
start page:
start_element="1.2": Displays the list of pages starng at the given
start_element (posion in the hierarchy) and shows that element and
its children only
start_page="home": Displays the list of pages at the given start_page
(alias of the page) and shows that element and its children only
It's up to you, which of the two parameters you prefer to use. Surely you can simply create
the list of links to the pages manually. But in this case, the list is not dynamic. If new pages
are added, then you have to add them manually to the link list as well. If you use the Smarty
tag {menu} instead, it automacally displays all new pages as well.
Another useful parameter is:
show_root_siblings="1": This opon only becomes useful if the
start_element or start_page parameters (as shown previously) are used.
It will display pages in the same level as the selected start page or element.
See the following example for page structure and how it can be outpued on every page
with dierent parameters:
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 5
[ 133 ]
If your website structure looks like the preceding screenshot, then you will get the output
shown in the second column by using the tag from the rst column.
Smarty tag Output
{menu start_
element="3"}
{menu start_
element="1.1" show_
root_siblings="1" }
{menu start_
element="1.1" show_
root_siblings="1"
number_of_levels="1"}
You can see how exible the navigaon layout can be on CMS Made Simple. On every page,
you can precisely dene your navigaon structure and even create a kind of arcles' catalog
by adding arcle category rst and then assigning arcles to the categories and displaying
them with Menu Manager on the website in any page or in the template.
Printing pages
With CMS Made Simple, every page and news arcle can be automacally prepared for print
preview with the built-in Prinng module.
Time for action – adding a print link
Let's see how you can add a link to the print version of every page or news arcle.
1. In the admin console, open the template Business World for edit
(Layout | Templates).
2. Add the Smarty plugin {print} above the {content} tag in the template,
shown as follows:
...
<div id="content">
<h1><span>{$friendly_position}</span> {title}</h1>
{print}
{content}
...
3. Click Apply, and see the changes in your website.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Using Core Modules
[ 134 ]
What just happened?
With the custom Smarty tag {print}, you use the core module Prinng. At the place where
you have added the tag, a link Print this page is displayed. When you click on the link, a new
page is opened with a print friendly version of the page. It does not have any special styles in
it, and it does not display a main template but only the content of the page.
There are some useful parameters that help you to customize the link Print this page and
its behavior.
text="Print this page": Overrides the default text for the print link.
popup="false": Set this to true and the page for prinng will be opened in a new
window. Be careful, some browsers block popup windows!
script="false": Set this to true and the print version will automacally open
the print dialog of the browser.
includetemplate="false": If this is set to true, not only the content of the
page, but the whole page template including the content of the page, header,
navigaon, and footer area will be displayed.
showbutton="false": Set this to true to show a graphical buon instead of the
text Print this page.
If the preceding parameters do not oer enough ways for you to customize the look and feel
of the print link and print view, you are free to customize the module in the admin console
(Extensions | Prinng). There are four tabs:
Link template: The template that is used to display the link to the print (or PDF)
version of your website.
Print template: The template that is used to display the print version. You can add
your own HTML markup here, like URL of the website, website company, or contact
details, so that this informaon is automacally displayed in the print version of
the website.
Override print stylesheet: Gives you the possibility to insert your own, custom CSS
to the print version. Normally, you would use it to dene the font size and set it in
points as oen used in print works.
PDF sengs: We will discuss this tab later in the secon Generang a PDF version of
the page.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 5
[ 135 ]
Adding media type to stylesheets
Somemes a visitor of the page does not use the special print buon but the default print
dialog of the browser. In this case, the whole page is printed out, as shown on the screen.
You can use media type for the stylesheets to customize the printed version in this case as
well. In pure CSS, you can dene dierent media types as HTML aributes in the link tags
as follows:
<link rel="stylesheet" type="text/css" media="screen" href="sheet.
css">
<link rel="stylesheet" type="text/css" media="print" href="print.css">
In CMS Made Simple, you add the Smarty tag {stylesheet} to the template that generates
the HTML link tags automacally, so that you cannot add HTML aribute media to it.
Nevertheless, you can aach two dierent stylesheets to your template and mark them
as screen, print, or any other allowed type.
In the admin console, open your stylesheet (Layout | Stylesheets) for eding and scroll
down to the Media Type secon:
Select the media types that you would like to serve with this stylesheet, for example, screen.
To add a special stylesheet containing formang for the print view of your page, create a
new stylesheet with print formats. Select print as the media type in the Media Type secon
(see the preceding screenshot), then aach this stylesheet to the template. CMS Made
Simple will automacally add the HTML aribute media to the link tags generated at the
place where {stylesheet} was added to the template.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Using Core Modules
[ 136 ]
Generating a PDF version of the page
You can produce a PDF output of the page with the Prinng module. Acvate PDF sengs
to allow PDF generaon for the website. On the PDF Sengs tab (found at Extensions |
Prinng), select the opon Enable PDF-generaon. Then add a PDF print link or buon
to the template or page as follows:
{print pdf="true"}
The Generate PDF link is displayed wherever the preceding tag is added. Customize the PDF
sengs (Extensions | Prinng) such as the header, font size, font type, or page orientaon.
If PDF generaon is enabled, you can also see an addional tab for the PDF template so that
you can enhance it to meet your needs.
Adding more modules to your website
Addional features, such as News, Search, File Manager, Menu Manager, and Prinng
are found in the core modules of CMS Made Simple. These modules are installed with
CMS Made Simple by default. These modules are developed by the CMS Made Simple
development team.
In the admin console, click on Extensions | Modules and nd a list of all the modules that
are available on your installaon, their versions, and addional informaon. You will also nd
a Help link beside each module that helps you to understand how the module can be used
and what parameters are available. Installed modules have a green ck in the Acve column
and their Status is Installed.
You can enrich your website with more features by installing addional modules that are
developed and supported by third-party developers. There are over 300 modules available
for CMS Made Simple. Just to name some of the oponal features that you can add to your
website: login funconality for your visitors, creaon, and automac update of the Google
sitemap according to the website page structure, photo gallery, e-commerce funcons,
discussion board, products catalog, feedback form, and more.
Most of the modules can be easily installed and used without any special knowledge by using
the Module Manager.
Using the Module Manager
To choose and install new modules, click on Extensions | Module Manager in the
admin console. Noce that the modules listed here are not standard modules of CMS
Made Simple, and therefore not all of them have got the same good quality as the core
modules. Therefore, you see the Use at Your Own Risk message above the list of modules.
Nevertheless, there are a lot of modules that are very useful and sophiscated, and are
thoroughly supported by their developers.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 5
[ 137 ]
The Available Modules tab is your research centre for available modules. The modules are
sorted alphabecally by their names and have mostly good explanaons which can be found
by clicking on the Help link beside the module name.
There is no possibility to search for a module funconality by keywords in Module Manager.
However, you can use the search feature in CMSMS Forge. CMSMS Forge is a hub for
all features such as modules, plugins, or translaons. It can be found at http://dev.
cmsmadesimple.org. Enter the search word or phrase in the top-right corner in CMSMS
Forge and nd the list of modules, plugins (also called tags), or translaons that match your
search criteria. If you are interested in any module found in the list; note its name, return
to the admin console in Extensions | Module Manager, and search in the alphabecal
list for the module name in queson. Read the Help secon to see if the module suits
your requirements.
Installing additional modules
Before installing a module, you should check the Dependencies link beside it in the list of
modules in the Module Manager. Some modules depend on other modules in order to
funcon, so you have to install the other modules rst.
Time for action – module installation
Let's install an addional module that allows us to manage FAQ on the website.
1. In the admin console, click on Extensions | Module Manager, and choose the tab
Available Modules tab.
2. In the list of modules, select the leer Q, and nd the module Quesons.
3. Click on the Dependencies link to see what modules have to be installed rst.
4. Return to the list of available modules (Extensions | Module Manager) and select
the leer C. Find the module CGExtensions, and click on the Download & Install
link. The module CGExtensions will be installed.
5. Return to the list of available modules (Extensions | Module Manager), and select
the leer Q again. Find the Quesons module.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Using Core Modules
[ 138 ]
6. Click on Download & Install. The module Quesons will be installed.
7. Open the page FAQ for edit (Content | Pages).
8. Add the Smarty tag in the page, as shown in the following screenshot:
9. Click on Apply, and then click the magnifying glass icon beside the Apply buon to
see the changes on the page. It should look as shown in the following screenshot:
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 5
[ 139 ]
What just happened?
You have installed a new module. The Quesons module is now available on every page or
template of your CMS Made Simple website. You will nd the Quesons module in the list
of installed modules in the admin console (Extensions | Modules) as well.
Each module that you have installed can be used in the content of a page or template by
using the Smarty tag {cms_module …}. This tag has a required parameter module that
is set to the name of the module, as shown in the module list (Extensions | Modules).
Generally, all modules can be used with this tag:
{cms_module module="MODULE_NAME"}
Just replace MODULE_NAME with the name of the installed module to see how the module acts
by default. The Quesons module displays the FAQs which can be created, edited, deleted,
and categorized in the admin console (Content | Quesons and Answers). It is self-explaining
how the FAQ can be built (use the link Add New Queson to add a new pair of quesons and
answers). Please use the Help link in the list of installed modules (Extensions | Modules) to
nd some usage examples and an addional parameter for the module Quesons.
For example, if you do not like the lter form in the list of quesons and answers, remove it
with the parameter nofilter shown as follows:
{cms_module module="Questions" nofilter="yes"}
Some modules have a short version and can be called only by their names.
Short notaon Long notaon
{news} {cms_module module="News"}
{search} {cms_module module="Search"}
{menu} {cms_module module="MenuManager"}
Not available
{cms_module module="Questions"}
There is no dierence in funconality. Every module can be used with long notaon and only
some of them have short notaon implemented. Please see the Help module to determine
whether or not short notaon is available.
Installing modules with XML le
On some web hosng, there is no possibility to connect to external resources (such as
CMSMS Forge). In this case, you will not see any module in the list of available modules.
Nevertheless, you can install modules manually as well, if you download the XML installaon
le for them.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Using Core Modules
[ 140 ]
To nd the module installaon le, open CMSMS Forge (http://dev.cmsmadesimple.org)
and search for a desired module. Click on the module name, and select the Files tab to the
right of the module name. Find the newest XML le in the list of les shown, and save it to
your local disk. In the admin console, click on Extensions | Modules, and select the saved XML
le in the eld Upload, below the list of the modules. Click on Submit, and the module will be
shown in the list of modules. However, it is not installed yet. Click the Install link beside the
module to complete its installaon. You can now use it the same way as if it had been
installed automacally with the Module Manager.
Available upgrades
From me to me, new versions with new features or bug xes are released. In the Available
Upgrades tab, you can see which of your installed modules have newer versions compared
to the version installed on your system.
To upgrade modules, search for their names in the list on the Available Modules tab
and click the Upgrade link that is shown at the place of Download & Install link. Before
upgrading, make a backup of your website so that you have the ability to roll back if
something goes wrong.
How to nd the best CMS Made Simple module for your purpose
There are a lot of modules for CMS Made Simple, but not all of them are of the same quality.
The version of the module normally indicates how mature it is. Module versions that start
with 0, like 0.3 or 0.5, are alpha versions. This means that these modules are in the rst
phases of tesng and could exhibit some errors or unexpected behavior. Use these modules
with cauon if you are not a technical person.
The About link beside the module name in the list of Available Modules (Extensions |
Module Manager) will inform you when the latest version of the module was released. A last
release date of 2006 or 2007 could indicate that there is no scope for development for the
module anymore, and it has been abandoned by its developer. In this case, it is beer to look
for another module or use this one at your own risk.
The Help link gives you extended informaon about the module funconality. See the
parameter secon to gure out if your requirements can be solved with the module
in queson.
Uninstalling and removing modules
All modules that you do not need can be uninstalled from the list of modules (Extensions |
Modules). If you do not need the module and uninstall it, then all data that is saved in it
will be lost. The module itself will be inacve but sll shown in the list of modules. By
removing modules from the list, you also physically remove the associated module les
from your website.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 5
[ 141 ]
You cannot remove core modules as they are a part of the standard installaon of CMS
Made Simple.
Pop quiz – using core modules
1. What is the main feature of a global content block?
a. It can add repeated texts and pictures to your website.
b. It can place dierent company addresses (HQ and subsidiaries) on
dierent pages.
c. The Smarty tag has to be added to the template.
d. The global content block has to be installed with the Module Manager.
2. What happens if the summary text in the news is not wrien?
a. You can only place it in the category General.
b. The whole text is shown on the website in the news secon.
c. The news will not be displayed on the website in the news secon.
d. You cannot save the news without the summary.
3. Which is the standard folder that the File Manager uses to store the les?
a. uploads
b. downloads
c. images
d. There is no standard folder.
4. Which image format should not be used in websites?
a. JPEG
b. GIF
c. TIFF
d. PNG
5. In order to print out PDF Documents, you have …
a. to use the Smarty tag {pdf_onpage pdf="true"}.
b. to rst download Adobe Reader.
c. to be sure that your visitors have got Acrobat.
d. to use the Smarty tag {print pdf="true"}.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Using Core Modules
[ 142 ]
6. How can you nd the best CMSMS module?
a. Be sure that it is an alpha version, because alpha is a synonym for high
quality every me.
b. Be sure that the last release is not too long ago because you can be sure
that the developer keeps the module alive.
c. Be sure that the last release is at least 18 months ago because you can be
sure that the developer made a stable module.
d. Be sure that the module's version starts at least with a 0.5, because 0.3 or
further versions are not stable.
Have a go hero – applying customization to the core modules
You can integrate news, search, and prinng features on your website according to your
individual requirements. Use the Help secon for each module to gure out how you
can customize it. Use module templates to suit the layout of each module according to
your design. When nished, the result will be a rudimentary website build with CMS
Made Simple. If you do not have any addional requirements, you can stop at this point.
Congratulaons! You are almost ready with the website that can now be lled with content
and published.
Summary
In this chapter, you have learned how to use and customize standard modules
(core modules) installed with CMS Made Simple.
Specically, we covered:
How to use global content blocks in the pages. A global content block is not really a
module, but an addional feature that can be used to display the same content in
dierent locaons on your website.
Using news feature for adding news arcles to the website, placing them in dierent
categories and displaying them, depending on the category at dierent locaons on
your website.
Using and customizing a search feature for the content of the pages or news arcles
on the website.
Using the Image Manager to upload images to your website, edit them online, and
using them in the content or in the template of the website.
Using the Menu Manager to display any part of your website structure in the
content. You learned how a sitemap or any dynamic list of pages can be created.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 5
[ 143 ]
Using the Prinng module to create a print version of the website pages or even to
create a PDF version of the website without any special knowledge.
Using the Module Manager to install third-party modules, and thus add new
features to the website like the FAQ feature. We will learn addional modules in
Chapter 7, Using Third-party Modules.
For each module, you saw how the powerful concept of "template in template" allows you to
fully customize the look and feel of each module template. By combining Smarty tags, HTML,
and CSS, you do not have any design restricons and can use a design of any complexity on
your website.
Now that we've learned about modules, we're ready to learn about roles and permissions
that users with access to the admin console of your website can have—which is the topic of
the next chapter.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
6
Users and Permissions
This chapter is important to read if you are going to grant access to the admin
console of your website to other users. Users with access to the admin console
of CMS Made Simple are dierent from standard visitors to the website. In this
chapter, we are talking about users involved in the development of the website.
We speak about editors, who write content, create and edit pages; designers,
who edit templates and stylesheets; and administrators, who manage website
modules, other users, and their permissions in the admin console.
You do not need to read this chapter if you are the only person who develops the website
and thus has an unrestricted administrator account. However, if you (or your customer)
have a team where dierent tasks are shared between the team members, then you have to
understand how you can grant dierent permissions to dierent users. It will safeguard your
website and makes it simpler for a CMS Made Simple novice to concentrate on the features
that they are allowed to access.
In this chapter, we shall look into:
Roles, users, and groups
Permissions on content
Special designer permissions
Archiving and restoring dierent versions
Overview of all default permissions
User nocaons
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Users and Permissions
[ 146 ]
Understanding users and their roles
A role is a collecon of permissions grouped by general tasks that the user has to be able
to perform on the website. An editor may be responsible for creang, reorganizing, and
eding pages. A designer does not need to have any permission for page operaons, but for
creang and eding templates (including module templates). An administrator is a person
who has all permissions in the admin console and has unrestricted access to the enre
admin console.
In CMS Made Simple, three roles are suggested by default—editor, designer, and
administrator. The rst user created during installaon of CMS Made Simple gets the
administrator role by default. This user cannot be deleted, deacvated, or removed from
the administrator group, as it would mean that there is no administrator for the website at
all. You should choose the name of this user and pay aenon to the password strength.
Members of the administrator group automacally get all the permissions.
Let's see how you can create a new user and learn about the minimum features that every
user has, independent of his/her role.
Time for action – creating a new usercreating a new user a new user
1. In the admin console, click on Users & Groups | Users.
2. Click on Add New User, and ll in the elds, as shown in the following screenshot:
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 6
[ 147 ]
3. Click on Submit.
4. Log out (CMS | Logout) and log in as Peter. The admin console should now look as
shown in the following screenshot:
What just happened?
You have created a new user without assigning him to any group. This user can log in to
the admin console. There are only two main menu items that the user can access—CMS
and My Preferences. The user can change his name, password, and e-mail address in the My
Account secon. He can dene his personal preferences such as language, admin template,
set default start page for the admin console, and more. He is also able to manage his
personal shortcuts.
It is important to dene an e-mail address for every user, as this e-mail is used to recover
the password, in case the user forgets it. On the login screen of the admin console of CMS
Made Simple (when you are not logged in), you will nd the link Forgot your password.
Click it, enter Peter in the Username eld, and click on Submit. An e-mail will be sent to
the e-mail address associated with this user. If no e-mail address has been set for this user,
then automac password recovery is not possible. In this case, only the administrator of the
website can reset the user's password.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Users and Permissions
[ 148 ]
The administrator of the website can set any user as inacve by clicking the icon with a
green ck in the column Acve (Users & Groups | Users). The user account is not deleted,
but the user is not able to log in to the admin console unl his account has been acvated
again. If you delete the user, all permissions and personal user preferences will be
irrevocably removed.
If the user is not assigned to any group, then he is not allowed to do anything other than
changing his personal sengs. Let's assign the user Peter to the editor group to see what
tasks he will be allowed to perform as an editor.
Time for action – assigning a user to a groupgroup
1. In the admin console, click on Users & Groups | Users.
2. Select the user Peter for edit by clicking on his username.
3. Select the Editor checkbox at the boom of the screen, as shown in the
following screenshot:
4. Click on Submit.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 6
[ 149 ]
5. Log out (CMS | Logout) and log in as Peter. The admin console should look as shown
in the following screenshot:
What just happened?
You have given the user addional permissions. Now, he can access a new menu item
called Content. There are no content pages, but only News that Peter can submit. Let's see
what permissions Peter has now. In the admin console, click on Users & Groups | Group
Permissions. In the rst column, all available permissions are listed. To the right of the
permission, there are three columns, one for each group—Admin, Editor, and Designer. You
can limit the view to only one group by selecng the group at the top of the table from the
drop-down list.
Find all selected checkboxes in the Editor column to see what permissions the user assigned
to this group gets. You can see that only the Modify News permission is checked for the
group. This means that the user can create news arcles and edit exisng news. When
the user creates a new item, the news is automacally saved as a dra, so that only the
administrator of the page or a user who has the Approve News For Frontend Display
permission can publish the arcle on the website.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Users and Permissions
[ 150 ]
Peter is not allowed to delete news arcles (permission Delete News Arcles) and has no
access to the content pages (permission Modify Any Page or Manage All Content).
Content permissions
As the target goal of CMS Made Simple is content management, the permissions on eding
content are the most exible. You can create and manage as many editors for the website
as you like. Moreover, you can create editors with dierent access levels thus thoroughly
separang who is allowed to do what on your website.
For example, the permission Manage All Content will give the group full access to all
the features that are available with the administrator account in Content | Pages.
A user assigned to this group can:
Create new pages
Reorder and move them through the hierarchy
Make pages inacve or prevent them from showing in the navigaon
Change the default page of the website
Delete pages
Edit pages including all the informaon placed in the Opons tab
To restrict the features menoned above, you can grant the permission Modify Any Page.
This permission allows us to edit the content only. The Opons tab is not shown for the users
with this permission, so that any informaon placed in the Opons tab cannot be changed.
In addion to the last permission, you can allow some elds from the Opons tab, so that
the editor is able to change the template or mark the page as inacve.
Time for action – creating an editor account
The company page will be edited by the oce assistant Mary. The oce assistant must be
able to edit exisng pages, edit meta tags, assign templates, and set the page as inacve.
1. In the admin console, create a new user (Users & Groups | Users), and assign the
user to the group Editor, as shown in the following screenshot:
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 6
[ 151 ]
2. Click on Submit.
3. Modify the permissions of the group Editor (Users & Groups | Group Permissions),
and check the box for Modify Any Page.
4. Click on Submit.
5. In the admin console, click on Site Admin | Global Sengs, and choose the
Advanced Setup tab.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Users and Permissions
[ 152 ]
6. In the Basic Properes eld, choose opons Template, Acve, and Page Specic
Metadata , as shown in the following screenshot (hold the Ctrl key to mark three
opons at the same me):
7. Click on Submit.
8. Log out (CMS | Logout) and log in as Mary. Check that all of the required features
are available when the page is opened for eding.
What just happened?
You have created a new user and assigned the user to the group Editor. The group is allowed
to edit any page of the website. Addionally, the elds Template, Acve, and Page Specic
Metadata are available to Mary when she edits the content.
Your template should have a Smarty plugin {metadata} in the head secon,
so that Page Specic Metadata can be placed in the source code of the page.
Note that the permission Modify Any Page does not give you the possibility to restrict access
to certain pages. If Mary is not allowed to edit every page on the website, but only some of
them, then you should switch to the concept of addional editors, which will be described in
the next secon.
Additional editors
For every content page, addional editors can be dened. You can add addional editors to
a certain page in the Opons tab in the eld Addional Editors (you must be logged in as the
administrator to do it). The addional editor of the page will be able to see and edit only the
pages that he is assigned.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 6
[ 153 ]
To explain it in our example and make it more praccal, assume that Mary is not allowed
to edit all the pages but only pages History, Team, and Contact Us. Remove Mary from
the group Editor (Users & Groups | Group Assignments) by deselecng the group in line
with Mary's account. Then open the three pages listed earlier, and assign Mary in the eld
Addional Editors, in the Opons tab for every page. Now, log in as Mary, and open the list
of content pages (Content | Pages).
Addional editors automacally get the permission Modify Any Page, but are restricted
to the pages where they have been set as addional editors. You do not need any special
group or permissions for such users. Mary, as with every addional editor, is not allowed to
create new pages.
Creating new pages
The Add Pages permission depends upon other permissions that the user has. It is not
enough to add the permission Add Pages for the editor. This is because creang new pages
will automacally impact the whole website structure. Remember that the navigaon is built
enrely of the exisng pages.
Only those groups having the Manage All Content permission are allowed to create pages
at every level of the website structure. Beware that these users will not only be able to
create new pages, but also modify the whole website structure by reordering or even
deleng pages.
Time for action – adding page permissions
Assume that Mary was not only allowed to edit some pages, but also to create pages at
certain places in the hierarchy. However, Mary is sll not allowed to create pages at the top
level of the website. In the last example, we added Mary as an addional editor to some
pages. Let's give her the right to create new pages.
1. In the admin console, click on Users & Groups | Groups, and create a new group
named Addional Editors.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Users and Permissions
[ 154 ]
2. Click on Users & Groups | Group Permissions, and assign the permission Add Pages
to the group Addional Editors, as shown in the following screenshot:
3. Click on Submit.
4. Assign Mary to the group Addional Editors (Users & Groups | Group
Assignments).
5. Log out (CMS | Logout) and log in as Mary.
6. Click on the link Add New Content (Content | Pages), and see the opons in the
Parent eld, as shown in the following screenshot:
What just happened?
Mary is an addional editor of the pages History, Team, and Contact Us. Assigned to the
group with the permission Add Pages, Mary can now create new pages under the pages in
which she has permission to. However, she is not able to create pages in other secons of
the website. For all pages that she creates, Mary will be set as the owner of the page.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 6
[ 155 ]
If you would like to approve pages created by editors before showing them in
the menu of the website, click on Site Admin | Page Defaults and deselect the
eld Show in Menu. This way, all newly created pages are not shown in the
navigaon. By default, the editor cannot change these sengs. He/she has to
wait for the administrator of the website or for the user with the permission
Manage All Content for the page to be shown in menu.
In the same manner, you can grant the permission Remove Pages. Assign the permission to
the group Addional Editors, so that they can delete only those pages where they have been
assigned as editors.
Designer permissions
If you have a user with strong HTML and CSS knowledge who is able to make reasonable
changes to the enre layout of the website or just to the module templates, then you can
assign that user to the group Designer.
A designer must have the following set of permissions:
Add Stylesheet Associaons
Add Stylesheets
Add Templates
Manage Menu
Manage Themes
Modify Files
Modify Stylesheet Associaons
Modify Stylesheets
Modify Templates
Remove Stylesheet Associaons
Remove Stylesheets
Remove Templates
View Tag Help
This set of permissions allows the designer of the website to perform any task related to the
design of the template. However, the designer will not be able to edit the content, submit
news, or set any site preferences.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Users and Permissions
[ 156 ]
The designer sll needs a content page that he can use for design or layout tests. In order
to prevent the test page being shown in the menu or in the sitemap, you should do the
following trick.
Time for action – creating a test area for the designer
1. In the admin console, click on Content | Pages.
2. Click on Add New Content and create an inacve Secon Header named Design
Test as shown:
3. Click on Submit.
4. Click on Add New Content again, choose the secon header Design Test (created in
step 2) in the eld Parent. Select the Opons tab, scroll down, and select the user or
the whole group Designer in the eld Addional Editors.
5. Click on Submit.
6. Log out and log in again as Designer. Click on Content | Pages to see the test page.
What just happened?
You have created a new page and placed it below an inacve Secon Header. The pages
placed below inacve pages cannot be displayed in the website structure. Even if you use
the parameter show_all with the Smarty plugin menu (for example, in the sitemap) the
page will not be displayed. However, it is acve, and it can be accessed directly through the
magnifying glass icon, and can be used by the designer as a test area.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 6
[ 157 ]
In the admin console (Site Admin | Global Sengs), under the Advanced Setup tab, you can
dene Basic Properes for the addional editors such as Image. We used this eld in the
last chapter. Here, the editor can choose an image from a drop-down list and thus assign an
image to a certain locaon in the template dened by the designer.
There is a useful third-party module called Template Externalizer. It allows
you to use any external editor to edit your templates and stylesheets. Aer
installing and turning on Development Mode, the module automacally
extracts all stylesheets and templates into the specied directory.
If you modify templates in this external directory, changes are automacally
detected, imported to the database, and take eect immediately. When the
module is installed, there is the permission Template Externalizer that can be
granted to the group Designer.
Viewing the admin log
The admin log records the details of the changes made to the site by all users. This log can
be found in the admin console (Site Admin | Admin Log) and includes records about the
creang, deleng, and changing of:
Pages and global content blocks
Templates and stylesheets
Users, groups, and permissions
Site preferences
Modules
At the top of the log, you will nd a navigaon secon providing links to the rst, next,
previous, and last pages of the log. There is also a link to download the complete log as a tab
separated text le. At the boom is the Clear Admin Log link. This will clear the enre log.
Important! You won't be asked to conrm the Clear Admin Log, and this acon
cannot be undone once completed.
Once the admin log is cleared, there is no evidence of who has changed anything on the
website and what the changes were. Therefore, there is even a separate permission called
Clear Admin Log that is granted separately from the permission Modify Site Preferences.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Users and Permissions
[ 158 ]
There are ve columns in each log entry, which are as follows:
User: This shows the username of the user who performed the acon. Even if the
user is deleted later, the username is sll saved in the log.
Item ID: This shows the database ID of the aected item. Note that item IDs are
only unique to the Item Name shown in the next column and not across the whole
database, so the same item ID may appear repeatedly.
Item Name: This shows the name of the item aected.
Acon: This describes the type of change made to the item.
Date: This saves the date and me the change was made.
If you have novice users with access to the admin console, then you probably would like to
keep all versions of the content to be able to restore them if something goes wrong. There
is no such feature in the standard installaon of CMS Made Simple, but there is a nice
third-party module that you can install addionally.
Archiving changes and restoring them
Once the Archiver module is installed, it keeps a copy of every content page, global content
block, stylesheet, or template that is edited or deleted. It also provides the possibility to
restore anything in the archive to the current state. This means that your users can edit
various aspects of the site, and you can reverse their changes later.
To install the Archiver module, open the admin console, and click on Extensions | Module
Manager. Click on the Available Modules tab, and then click the Download & Install link
which can be found in the same line as the module name. The module is installed.
Aer installaon, the module will automacally start saving changes into the archives. For
example, if you would like to track the changes of the start page, open the page, and save it
without any changes, so that the rst version of the page is created. This version will be used
as a base for future restoraons.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 6
[ 159 ]
Time for action – restoring changes made by an editor
Assuming that you have installed the Archiver module, as just described, you can restore the
changes made by the editor as follows:
1. Log in as the editor and edit any page that you are allowed to.
2. Log out and then log in again with the administrator account.
3. Click on Content | Archive Manager Module.
4. Search for the name of the page that has been edited in step 1, and click on it.
5. In the Expanded Archive View, nd the second last version (revision) of the page
and click on the last icon in the column Operaon.
6. View the page.
What just happened?
You have restored the older version of the content and made it to the current one. The
editor's version is not deleted but just replaced, so that you can restore it any me.
You can automacally purge archives either by the number of stored versions for each
item (that is, keep only the last ve versions of each page, global content block, stylesheet,
or template) or by date (that is, keep the versions of the last seven days only). For automac
purge setup, click the Archive Preferences link in the admin area of the module (Content |
Archive Manager Module).
You do not have to purge archives, though you can keep accumulang all changes. However,
if you have a lot of changes made daily, you must purge your archive to prevent an overow
of the database.
This module is not a substute for the regular osite database backups. The
data is sll stored in the same database, which might render the archives
useless upon a database crash. Read the appropriate secon in Chapter 11,
Administraon and Troubleshoong to learn how to create database backups.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Users and Permissions
[ 160 ]
Overview of all default permissions
Permissions are always given to the group and are shared by all users assigned to this group.
In the following table, the rst column is the name of the permission, the second column is
a suggeson as to what role the permission can be granted to, and the third column advises
you if there are some precondions for the permission to take eect.
Permission Suggeson for
the role
Descripon
Add Global
Content Blocks
Editor The group is allowed to create new global content blocks
(Content | Global Content Blocks). Depends upon the
permission Modify Global Content Blocks.
Add Groups Admin The group is allowed to create user groups (Users & Groups |
Groups). Depends upon the permission
Modify Groups.
Add Pages Editor The group allows the creaon of children content pages
below the pages where the user is an owner or an addional
editor. The user must be set as Owner of the page or an
Addional Editor.
Add Stylesheet
Associaons
Designer The group is allowed to associate stylesheets with templates.
Add Stylesheets Designer The group is allowed to create new stylesheets.
Add Templates Designer The group is allowed to create new templates.
Add Users Admin The group is allowed to create new users with access to the
admin console.
Allow usage
of advanced
prole in
TinyMCE
Editor Users in this group will automacally get advanced prole
sengs made for the TinyMCE module. However, they are not
able to change the prole itself.
Approve News
For Frontend
Display
Editor Allows changing the Status eld of the news item from Dra
to Published. The user in this group is also able to edit news
arcles.
Clear Admin
Log
Admin Clear the history in Site Admin | Admin Log. Depends upon the
permission Modify Site Preferences.
Delete News
Arcles
Editor The group is allowed to delete news arcles. Depends upon the
permission Modify News.
Manage All
Content
Editor The group is allowed to create, move, and delete pages. The
group is allowed to access the Opons tab while eding the
pages and change anything that can be found on the tab in
contrast to the permission Modify Any Page.
Manage Menu Designer The group can modify menu templates and create new menu
templates.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 6
[ 161 ]
Permission Suggeson for
the role
Descripon
Manage
Themes
Designer The group is allowed to export themes. If dependant
permissions are available, the user is also able to import
themes.Depends upon the permissions Add Stylesheet
Associaons, Add Stylesheets, and Add Templates.
Modify Any
Page
Editor The group is allowed to edit content pages. There is no Opons
tab while eding the content for this group. However, some
elds from the Opons tab can be added from Site Admin |
Global Sengs (tab Advanced Setup, eld Basic Properes).
Modify Events Admin The group is allowed to add and reorder events (refer to
Chapter 8).
Modify Files Editor Allows using File and Image Manager, thus giving full access to
the /uploads folder of your installaon.
Modify Global
Content Blocks
Editor Allows eding and deleng of global content blocks.
Modify Group
Assignments
Admin Allows assigning users to dierent groups.
Modify Groups Admin Allows changing group names.
Modify
Modules
Admin Allows managing of Extensions | Modules and Extensions |
Module Manager, thus installing, upgrading, uninstalling, and
removing modules.
Modify News Editor Allows eding news and creang new arcles with status Dra.
Modify
Permissions for
Groups
Admin Allows modifying permissions for the group.
Modify Site
Preferences
Admin This is a set of mulple permissions including the tabs
Preferences, Sengs, or Opons in dierent modules. For
example, the user is able to access the Opons tab on the
News module, the Sengs tab in File Manager, CMSMailer,
the Opons tab in the Search module, and so on.
Modify
Stylesheet
Associaons
Designer Allows aaching stylesheets to the templates and resolving the
aachment as well.
Modify
Stylesheets
Designer Allows eding exisng stylesheets.
Modify
Templates
Designer Allows eding exisng templates including templates in
modules News, Search, and Prinng.
Modify User-
dened Tags
Admin Allows adding user dened tags to the website (refer to
Chapter 10).
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Users and Permissions
[ 162 ]
Permission Suggeson for
the role
Descripon
Modify Users Admin Allows eding the user with the excepon of the administrator
user account.
Remove Global
Content Blocks
Admin Allows eding the global content blocks. Depends upon the
permission Modify Global Content Blocks.
Remove Groups Admin Allows deleng user groups.
Remove Pages Editor Allows deleng content pages where the user is an Owner or
Addional editor.
Remove
Stylesheet
Associaons
Designer Allows removing stylesheet associaons.
Remove
Stylesheets
Designer Allows removing stylesheets.
Remove
Templates
Designer Allows removing layout templates, but not the module
templates.
Remove Users Admin Allows removing users with excepon of the own account and
the administrator account.
Advanced
usage of the
File Manager
module
Admin Allows viewing the complete structure of the website and not
only the /uploads directory. For this permission to work, the
advanced mode seng should be enabled in File.
View Tag Help Editor Allows reading help for the custom smarty plugins.
Module permissions
Not only can the core funcons and core modules of CMS Made Simple have permissions,
but every third-party module you have installed on your page can add the module's specic
permissions to the list. If you sll have the Quesons & Answers module installed, as
described in the last chapter, you will nd the permissions Manage Quesons , Can Answer
Quesons, and Can Approve Quesons in your list of permissions (Users & Groups |
Group Permissions).
The Archiver module has the permission Manage Archives that can be granted to advanced
users with access to the admin console or to the main editor with the permission Manage
All Content.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 6
[ 163 ]
User notications
There is a nocaon area in the admin console of CMS Made Simple located below the
main menu.
You saw the message just aer the installaon of CMS Made Simple advising you about the
next steps to secure and congure the system. Later on, this area is used to nofy us when
a new version of CMS Made Simple is released. The News module uses the area to nofy
when there are some unpublished news arcles that must be approved and published.
Normally, each user logged into the admin console is able to read these nocaons even if
it is something that is not devoted to him.
You can disable nocaons in the admin console. Click on Site Admin | Global Sengs, and
select the tab Advanced Setup. Deselect the eld Allow users to view nocaons and the
messages will disappears.
Pop quiz – users and permissions
1. What is a role?
a. A bunch of permissions.
b. Another term only for editors.
c. A term for a special visitor group.
d. A term for visitors, whose permissions to read special contents can
be dened.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Users and Permissions
[ 164 ]
2. Who has the right to change or delete the administrator account?
a. Absolutely nobody—an administrator cannot be deleted.
b. Each user, who is an administrator, can delete all other administrators.
c. Addional editors can edit the admin accounts.
d. Only the user who owns the rst created administrator account can delete
and edit all other admin accounts.
3. Which user group is not created by default?
a. Administrator
b. Designer
c. Addional editor
d. Editor
4. Why is it important to create an e-mail address for each user?
a. Because the CMS does not work properly without an e-mail address.
b. Because the administrator can contact the other users easily.
c. Because the e-mail is needed to recover a forgoen password by the
user himself.
d. Because the e-mail address is a check for the existence of the user.
5. What can an editor who has the permission Modify Any Page do?
a. Edit all pages.
b. Delete all pages.
c. Change the alias of all pages.
d. Change the owner of all pages.
6. What can an editor who has the permission Manage All Content not do?
a. Set pages as inacve or prevent showing them in the navigaon.
b. Delete pages.
c. Edit pages including all informaon placed on the Opons tab.
d. Change the owner of the pages.
7. What is the most important fact concerning an addional editor?
a. He can create only one page per secon.
b. He can only administrate his own pages.
c. He gets more rights than an editor with default permissions.
d. There can be an unlimited number of addional editors in contrast to
standard editors.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 6
[ 165 ]
Have a go hero – users and permissions
Analyze how many persons will get access to your website. Separate them in dierent groups
according to their tasks. Create the groups and assign permissions to the group. It is beer
if you give minimum set of permissions to each group then ask the person assigned to the
group to log in and see whether he/she is able to accomplish his/her tasks in the admin
console. If there are some undesired restricons, add more permissions. Consider that
giving more access would make your system more vulnerable. Be careful and apply
permissions sparingly.
Summary
In this chapter, we learned how teamwork can be eecvely managed with access to the
admin console.
Specically, we covered:
Standard user roles in CMS Made Simple
Permissions for the editors
Permissions for the designers
Viewing the admin log and working with the Archiver module to be able to restore
older versions of the content
Now that we've learned about permissions, we're ready to enrich the website with
addional features typically found on business websites, which will be discussed in
the next chapter.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
7
Using Third-party Modules
CMS Made Simple has only some basic features that belong to the standard
installaon. Any addional funconality can be installed with other modules.
Think of CMS Made Simple modules as Lego bricks. Modules can be installed
in any combinaon you choose. Some modules are combinable with or even
dependant on other modules. Modules are addional features that anyone can
put on their website.
To choose and install new modules, click on Extensions | Module Manager in the admin
console. Noce that the modules listed here are not standard modules of CMS Made Simple
and therefore not all of them are of the same high quality as the core modules. That is why
you see the message "Use at Your Own Risk" above the list of modules. Nevertheless, there
are many modules which are very useful, sophiscated, and were thoroughly tested by
their developers.
The Available Modules tab facilitates the installaon of packages you already know about.
The modules are sorted alphabecally by their names and a good explanaon about them
can be found by clicking on the Help link beside the module name.
In this chapter, we shall install and use the following:
Gallery
Form Builder
Newsleer
YouTube videos
So, let's get started with it...
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Using Third-party Modules
[ 168 ]
Creating a photo gallery
The most popular feature for websites is a photo gallery. Photo galleries are popular parts of
private porolios, music bands', or company websites. On a business website, photo galleries
are oen used to display oce buildings or photos of the team members. Products, samples,
or results of the projects are oen implemented as photo galleries as well.
If you are not using any special module for gallery, you could upload all images in one folder
on your web hosng and manually add each image to the content page. This kind of stac
gallery is dicult to maintain and design. It is not exible enough and requires deep HTML
knowledge from the page editor.
A beer soluon is to use a special module that will read a folder on the web host and
display all images from this folder using some impressive blending eects. The module will
oer a special admin area where each image's capon can be entered.
To install the Gallery module, log in to admin console and click on Extensions | Module
Manager. On the Available Modules tab, click the leer G in the alphabecal navigaon,
and nd the module called Gallery. Click the Download & Install link in line with the module
name. The module will be installed.
Aer installaon of the Gallery module, a new folder called uploads/images/Gallery
will be automacally created on your web hosng. This folder is empty by default, so you
have to upload some images into it. You can upload images with Image Manager or File
Manager or even with an FTP browser if you have a lot of images to upload.
Time for action – creating the rst gallery
Let's see how images from the folder uploads/images/Gallery can be displayed on the
Photo Gallery page. Perform the following steps:
1. In the admin console, open the Photo Gallery page for eding (Content | Pages).
2. Enter the Smarty plugin in the Content eld, as shown in the following screenshot:
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 7
[ 169 ]
3. Click on Apply and then on the magnifying glass icon beside the Apply buon to see
the rst gallery on the website.
What just happened?
You have uploaded some images into the folder /uploads/images/Gallery. This folder
was automacally created aer the module installaon. Your rst gallery is displayed on the
Photo Gallery page.
You will nd the admin area of the Gallery module in the admin console (Content | Gallery).
Open the admin area, and click on the folder named Gallery to see what you can change in
the module output. Change Gallery Title and Comment to suit your needs. Choose another
Template for dierent blending eects in the gallery. If no template is specied for the
gallery, then the default template (Content | Gallery, tab Templates) is used.
The size of thumbnails (small preview versions of the images) is set to 96x96 pixels (standard
thumbnail size in CMS Made Simple). In the photo gallery, you can enter your own thumbnail
size and then choose any of the following resize methods:
crop: Crops the original image to the thumbnail size taking smaller detail of the
image. Proporons of the original image are ignored.
scale: This will resize the original image to the custom thumbnail size. The
proporons of the original image are held, so that only the width or height
can be taken into account while resizing.
zoom & crop: This is the same as 'crop', but the details of the image are slightly
zoomed. Crops the original image to the thumbnail size while taking zoomed details
of the image. The proporons of the original image are ignored.
zoom & scale: The same as 'scale crop', but the thumbnail is slightly zoomed.
Resizes the original image to the custom thumbnail size. The proporons of the
original image are held, so that only the width or height can be taken into account
while resizing.
When the thumbnail size is changed, you have to click on the link (Re)Create Thumbs for the
new thumbnails to be created.
At the boom of the screen, a list of the images that are uploaded into the folder uploads/
images/Gallery are displayed. For each image, you can enter a Title (image capon) and
a Comment (is not shown in any template by default). You can deacvate images rather
than delete them. In this case, the image is not shown in the gallery, but the capon and
comment will be kept.
The images in the gallery are sorted alphabecally by their lenames.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Using Third-party Modules
[ 170 ]
Adding albums to a gallery
New albums are created from new folders. Create a new folder below the folder uploads/
images/Gallery with File Manager or Image Manager. Upload your images into the new
folder. In the admin area of the Gallery (Content | Gallery), nd the new folder, and edit it
the same way as your main album.
To display images from one or more directories, use the parameter dir. This parameter
species the directory (or directories) where the images are uploaded. For example, if
you have created two folders below the /uploads/images/Gallery and named them
buildings and projects, then to display images from the folder buildings only, use
the Smarty tag as shown:
{Gallery dir="buildings"}
You can override the template for the gallery directly in the Smarty tag by adding the
parameter template to it. If this parameter is not specied, then the template assigned
to the directory will be used, or else the default template will be used.
Using the gallery on other pages
Use images from the gallery on other pages and not only in the page Photo Gallery. For
example, display recently added images from your gallery on the start page and link them
to the page where the enre gallery can be found.
Time for action – adding random images to the template
Let's add two recently added images from the gallery to the start page of the website.
1. In the admin console, click on Content | Gallery, and choose the Templates tab.
2. Click the Create a new template link. Enter Latest as the template name and in the
Template Source eld add the following Smarty code:
{foreach from=$images item=image}
<a href="{cms_selflink href="photo-gallery"}" title="{$image-
>title}"><img src="{$image->thumb}" alt="{$image->title}" />
</a>
{/foreach}
You should replace photo-gallery in the example with the alias of the page
where the whole image gallery can be found.
3. Delete everything from the elds Template CSS-stylesheet and Template JavaScript.
4. Click on Save.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 7
[ 171 ]
5. In the admin console, open the start page for eding (Content | Pages).
6. Add the Smarty tag to display the latest images from the gallery, as shown in the
following screenshot:
7. Click Apply and see the result on the start page.
What just happened?
You have created a new template for the Gallery module. This template displays two recently
added images from the gallery. Each image is linked to the Photo Gallery page ({cms_
selflink href="photo-gallery"}). Then, you have added the Smarty tag {Gallery
action="showlatest" number="2" template="Latest"} to the start page. There are
three parameters, which are as follows:
action="showlatest": Displays the most recently added images (by default, it
displays a total of six images). Subdirectories are automacally included.
number="2": The maximum number of images to display. All images will be
displayed if the value for this parameter is not specied.
template="Latest": Uses a separate database template for displaying the photo
gallery. This template must exist. However, it does not need to be set as default. If
this parameter is not specied, then the default template will be used.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Using Third-party Modules
[ 172 ]
If you do not want to display recently added images, but some random images from the
gallery, then set the parameter action to showrandom.
Addional parameters for each module can be found in the Help module (see the link
Module Help to the right of the module name in the admin area of the module).
Creating your own gallery template
It is possible to implement any template in your gallery. I would like to show you how it
works with the AD Gallery plugin (http://coffeescripter.com/code/ad-gallery/).
AD Gallery is a jQuery plugin and consists of HTML, CSS, JavaScript, and images. We have to
put all these components in the right order to use the plugin as a gallery template.
Open the link http://coffeescripter.com/code/ad-gallery, and scroll down to the
Downloads secon. Save the le placed under The whole kit and kaboodle to your local disk
and unzip it.
On your web hosng, create a new folder adgallery in modules/Gallery/templates.
Upload the le jquery.ad-gallery.js into this folder. Then upload all images (PNG and
GIF les) from the same folder to modules/Gallery/images.
In the admin console, create a new template for gallery (Content | Gallery, tab Templates).
Enter Ad Gallery as the Template Name, and replace the Template Source with the following
code snippet:
<div id="gallery" class="ad-gallery">
<div class="ad-image-wrapper"></div>
<div class="ad-controls"></div>
<div class="ad-nav">
<div class="ad-thumbs">
<ul class="ad-thumb-list">
{foreach from=$images item=image} {if !$image->isdir}
<li>
<a href="{$image->file}">
<img src="{$image->thumb}" title="{$image->title}"
longdesc="{$image->comment}" class="image0">
</a>
</li>
{/if} {/foreach}
</ul>
</div>
</div>
</div>
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 7
[ 173 ]
This code was taken from the le example.html and was modied to use the Smarty tag
foreach to take all images from the gallery.
Proceed with the stylesheet. On your local disk, open the le jquery.ad-gallery.css.
This le has to be slightly modied for the images to be found on the server. Find any
occurrences of:
background: url(
and replace them with:
background: url(../../images/
Then, in the rst line, adjust the width of the enre gallery:
ad-gallery {
width: 500px;
}
Copy the enre contents of the modied stylesheet, and replace the content of the eld
Template CSS-stylesheet with it.
In the last step, copy the following code, and replace the enre content in the eld
Template JavaScript:
<script type="text/javascript"
src="modules/Gallery/templates/jquery/jquery.js"></script>
<script type="text/javascript"
src="modules/Gallery/templates/adgallery/jquery.ad-gallery.js">
</script>
<script type="text/javascript">
$(function() {
var galleries = $('.ad-gallery').adGallery();
$('#switch-effect').change(
function() {
galleries[0].settings.effect = $(this).val();
return false;
}
);
$('#toggle-slideshow').click(
function() {
galleries[0].slideshow.toggle();
return false;
}
);
});
</script>
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Using Third-party Modules
[ 174 ]
Click on Save, and nd the new template in the list of templates. Set the template as Default
and see your photo gallery on the website. Your gallery is now using the AD Gallery plugin.
In the same way, you can use any plugin for your gallery. Separate HTML, images, CSS, and
JavaScript from each other and place them in the appropriate elds so that all required parts
are composed on the website in the right order as before.
Adding forms with the module Form Builder
Almost every business page has a contact, feedback, or inquiry form. The Form Builder
module helps you to create forms with any level of complexity without wring any HTML.
You can add dierent input elds to it, set validaon rules, and dene how the data from
the form must be stored and/or sent by e-mail.
Install the Form Builder module in the same way as you installed other third-party modules
on the website (for example, Quesons or Gallery). Aer installaon, the admin area of the
module can be found in Extensions | Form Builder.
Before you start conguring the module, ensure that the module CMSMailer is properly
congured (refer Chapter 2, Geng Started) and you are able to send e-mails from your
CMS Made Simple website.
Time for action – adding a contact form to the website
Let's add a simple contact form to the Contact Us page and send the submied content of
the form to our e-mail address.
1. In the admin console, click on Extensions | Form Builder.
2. Click the Contact Form link.
3. Scroll down to Form Fields, and click the Send To link.
4. Replace the e-mail address in the elds "From address" for email and Desnaon
Email Address with your real e-mail address, as shown in the following screenshot:
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 7
[ 175 ]
5. Click on Update to save the changes.
6. Click on Save below the form elds.
7. Copy the Smarty tag from the column Form Alias in the line Contact Form, as shown
in the following screenshot:
8. Open the page Contact Us for eding (Content | Pages) and add the copied Smarty
tag into it.
9. Click Apply and view the page. It should look as follows:
10. Fill out the form, and click Submit Form, you should get an e-mail sent from this
contact form to the e-mail address given in step 4.
What just happened?
You have added a simple contact form to the page. This contact form consists of the eld
set (a border around all elds), ve visible elds, and the Submit Form buon. You have
changed the e-mail address to be sure that the results from the form are sent through
e-mail to the right address. This contact form can be fully customized to suit your needs.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Using Third-party Modules
[ 176 ]
Customizing the contact form
Let's see exactly what the contact form is made up of and how you can customize its
appearance, the text of the e-mail message sent, and the conrmaon message shown
to the visitor aer subming the form on the website. In the admin console, click on
Extensions | Form Builder and choose Contact Form. Scroll down to the secon Form
Fields where all elds for the contact form can be customized.
You can reorder, delete, and add new elds in this secon. Contact Fieldset is an opcal
border around the elds. You can delete it (using the dustbin icon at the end of the line), if
you do not like it. In this case, do not forget to remove eldset end (the last line) as well.
To edit labels in front of the elds on the page, edit the eld (click on it in the list) and
change the Field Name. Check the box for Required, if the eld must be lled, so that
if it is empty, the form is not sent, and an error message is shown to the visitor.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 7
[ 177 ]
Edit the eld Your Email Address. Set it to Required, and select Email Address in the
Field Validaon opon. This will ensure that visitors must provide a valid e-mail address,
otherwise an error message will be displayed. Set the value in the eld Send User a Copy
of Submission to Never. If you send a copy of the message to the visitor, you reveal the
desnaon e-mail address, and probably get undesired communicaon bypassing the
feedback form. Update the eld and return to the list of elds in the form.
The Email Again eld is oponal. You can remove it if you like.
The Message eld is dened as a Text Area. This means that more than one line can be
entered in the eld by the website visitor. The height and width of this eld can be changed
by seng the number of Rows (number of lines shown without scroll bar) and Columns
(number of characters shown in one line before line break). The size of the eld can also be
customized using CSS.
For each form, dierent types of template can be dened and congured. You can use a
combinaon of HTML and Smarty tags as you learned in Chapter 4, Design and Layout.
Template Descripon
Form Template This template denes how the form should look. Open the Contact
Form (Extensions | Form Builder), and click on the Form Template tab.
Some default templates can be chosen from the Load Template
drop-down list. You can also create your own template by using
instrucons and variables shown in the secon Form Template
Variables. The default Form Template is very complicated. The
reason for it is that it includes everything that you can customize
for the single elds.
Submission Template This template denes how the response message should look like
aer the form is submied. Open the Contact Form (Extensions |
Form Builder), and click on the Submission Template tab. Customize
the message in the eld Response to display. You don't need to use
any variables in this eld. I also recommend removing the part Other
informaon as it is too technical for website visitors.
Email Template This template denes how the e-mail message should look. Open the
Contact Form (Extensions | Form Builder), and click on the eld Send
To in the list of elds. Choose the Advanced Sengs tab, scroll down,
and click on the buon Create Sample HTML Template. Now, you can
edit the e-mail message in eld Email Template.
Form Builder not only oers default templates, but oers default stylesheets as well. The
stylesheet is automacally added aer installaon to Layout | Stylesheets. Aach the
FormBuilder Default Style to the Business World template by clicking on the blue CSS icon in
the list of stylesheets if you would like to use it. You can customize the aached stylesheet to
suit the form to your individual page layout.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Using Third-party Modules
[ 178 ]
Adding new elds to the forms
The contact form can be enriched with more elds. Let's see how you can add a radio buon
group, drop-down group, and checkbox group to the form. New elds are created in the
admin area of the Form Builder (Extensions | Form Builder). Open the Contact Form for
eding, and click the Add New Field link below the list of elds. Then you have to select
the Field Type you would like to add.
Every me you add a new eld to the form, you must adjust the Email Template and
Submission Template. New elds are added automacally to the form but not to
other templates.
To update the Email Template, open the Send To eld for eding, and select the Advanced
Sengs tab, scroll down the page, and click the Create Sample HTML Template buon.
In the eld Email Template above you will see the sample template that will be used for
sending out messages. Edit the template if needed and click Update to save it. This would
automacally add new elds to the e-mail message. On the Submission Template tab, you
can edit the message that the visitor sees aer the form is sent. You can create a sample
HTML template here as well, and then alter it according to your needs.
In the following three secons, we will add three new elds to the contact form, so that it
looks like the following screenshot:
Adding salutation as a radio button group
For salutaon elds, you create a new eld with radio buons that are grouped so that only
one radio buon in the group can be selected at any me. Select Radio Buon Group in the
Field Type and enter the elds as shown:
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 7
[ 179 ]
The Radio Buon label is what visitors of the website see while lling in the form. The Value
when checked is what will be sent to you when they submit the form. Here you can enter
dierent values if you like. Inially, you see only one opon that you can ll, so click the Add
More Opons buon to add more radio buons to the group.
Click Add when you are ready, and the eld will be added to the list of elds. Below the list
of elds, you will nd the Reorder Fields link where you can easily drag-and-drop the elds
to adjust their appearance order on the page. Place Salutaon at the very top of your form
so that it appears before the Your Name eld.
Do not forget to update the Email and Submission templates aer
adding the eld to the form.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Using Third-party Modules
[ 180 ]
Adding department as a pulldown eld
Another type of eld that you can easily add to the form is a drop-down eld, which is called
pulldown in CMS Made Simple. Click on the Add New Field link, and select Pulldown as the
Field Type. Enter the elds as shown in the following screenshot:
Just as in radio buons, here you can dierenate between what the visitor sees while lling
in the form (Opon Name) and the value of the eld sent to you (Value Submied).
Do not forget to update the Email and Submission templates aer
adding the eld to the form.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 7
[ 181 ]
Adding multiple choice selection with the checkbox group
In contrast to radio buons, the checkboxes in a group can be checked without changing the
state of other checkboxes, so mulple choices are possible. It would not make any sense for
the salutaon eld, but for elds where the visitor can request dierent types of informaon
this can be useful. Click on the Add New Field link, and select Check Box Group as Field
Type. Enter the elds as shown in the following screenshot:
Checkboxes can have dierent states—checked and not checked. Depending on the state,
dierent values will be sent to you aer subming the form. You can leave the Value when
not checked eld empty. No values are sent if the boxes are not checked.
Keep the number of mandatory entries to the bare minimum, if you actually
want people to write to you. The best clients are busy people who won't spend
hours on lling in pedanc forms in the rst place, but rather choose a provider
that spares their me.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Using Third-party Modules
[ 182 ]
Adding a Captcha to the forms
A Captcha is a type of test used in forms to ensure that the form is not lled in by a
computer. It is an acronym for Completely Automated Public Turing Test To Tell Computers
and Humans Apart. The process usually involves the page asking a user to enter some
characters in the special eld. Computers mostly are not able to solve the captcha test,
so any user entering a correct soluon is presumed to be a human being. You can acvate
captcha in all CMS Made Simple forms.
Install the Captcha module (Extensions | Module Manager). In the admin console, choose
Extensions | Catpcha. There are some opons you can use to generate a captcha image. The
captcha library hn_captcha is used by default. To change the default sengs of the image,
click on the opons link beside the eld Captcha Library to use.
To give your captcha strong security, change the values in the elds—chars, minsize,
maxsize, maxrotaon, and secretposion. Add a secret string (something that one
cannot guess).
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 7
[ 183 ]
The strength of the captcha will grow depending on how many changes you have made.
Some spam programs can read captcha images generated with default values. However, they
fail if you place any individual values here. Be sure that you make only slight changes in the
elds minsize, maxsize, and maxrotaon, so that the captcha will sll be readable to human
users. Note that the changes are valid for all forms and modules in CMS Made Simple that
use the Captcha module.
To acvate the captcha for the contact form, open the form in Extensions | Form Builder.
Choose the Captcha Sengs tab, and select the box Use Captcha to protect form
submissions. See the captcha image added to the boom of the contact form.
reCAPTCHA has some advantages. This library is supported by a crew responsible for keeping
it up-to-date, it is accessible for disabled persons, and it helps to recognize texts of scanned
books thus making them available in electronic formats. If you would like to use reCAPTCHA
you should sign up at reCaptcha.com and add your website so that you can get public and
private keys for it. You cannot reuse the same keys for sites on other domains, so you have to
add every new site to your account to get a new set of keys.
Sending out newsletters
With CMS Made Simple and the Newsleer Made Simple (NMS) module, you can send
out newsleers to your customers or any visitors of your website who have subscribed to
the newsleer.
You can dene one or more user lists, thus separang your customers from the visitors and
being able to send dierent newsleer to each user list. One user can be assigned to one
or more lists. You create a template that contains the e-mail subject and text, so you don't
need to start each message from a blank page, you can use a template that has already been
created. However, you can write newsleers without templates as well.
To send out a newsleer, you will choose an exisng message and a list of users that are
going to get this message. This will be called a Job. The job will be processed manually
at the me you acvate it.
Install the NMS module from the list of available modules in the admin console (Extensions
| Module Manager). Pay aenon to the modules found on the Dependencies link before
installing the module. These modules should be installed before you aempt to install
Newsleer Made Simple.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Using Third-party Modules
[ 184 ]
Time for action – sending mails to registered customers
Let's create our rst newsleer that will be sent to the visitors of the website. You have to
create one or more test users with dierent valid e-mail addresses to be able to control how
the messages will be delivered. Do not use real e-mail addresses, unless you want them to
get test messages at this point.
1. In the admin console, click on Extensions | Newsleer Made Simple.
2. Click on the Create a List link, and enter the elds, as shown in the
following screenshot:
3. Click on Submit.
4. Switch to the Users tab. At the boom of the page, click on the Add User link, and
add two or more users. Assign them to the group Public Newsleer, as shown:
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 7
[ 185 ]
5. Click on Submit.
6. Switch to the Messages tab, and click on the Compose Message link. Enter the
Subject of the mail. Choose Yes in the eld This message contains only text. Select
the Newsleer page in the list of pages and select No for showing in the public
archive lists. Enter the Text Message that should be sent to the users in the user
list for the Public Newsleer. You can use placeholders in the e-mail text; these
are shown in the Message Authoring secon.
7. Click on Submit.
8. Switch to the Jobs tab, and click on Create Job link.
9. In the list of messages, select the message you would like to send. Then select the
list that contains the users who should get this message.
10. Click on Submit.
11. Switch to the Preferences tab, and enter the Admin Email Address (valid e-mail
address) and the Administrator Name (the name newsleer's sender).
12. Click on Submit.
13. Below the list of the jobs, click on the Process Jobs link, and conrm the message
that you are going to send the newsleer.
14. Do not close the new window unl all messages are sent out. Close the window
when you see the message You can now close this window, as shown in the
following screenshot:
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Using Third-party Modules
[ 186 ]
What just happened?
You have just created a new list of users in the Newsleer Made Simple module. This was a
public list; it means that the administrator of the website is not the only person who can add
users to this list. Making the group public means that any visitor of the website, whether he
is a customer or not, can subscribe himself to the list, if the subscripon form is added to
the website.
Then you created some test accounts. When you compose a new message for the newsleer,
you can choose if the message should be sent as HTML or as plain text. If you need any
special HTML formang such as hyperlinks, lists, tables, or images, then you must compose
an HTML mail. In this case, you should also compose an alternave text message that will be
shown to the customers who are not able to see HTML e-mails in their mail clients. Do not
use any HTML tags in the Text Message eld, just plain text.
For HTML e-mails, you can create templates that contain your company logo and contact
informaon, so that you do not need to add it to each message separately.
In the text message, you can use the following Smarty tags linking to your website:
{$unsubscribe}: A URL that can be used to display a page for unsubscribing
{$preferences}: A URL that can be used to display a user preferences page
{$confirmurl}: A URL that can be used to conrm subscripons
For these links to work, you have to choose a Return Page in the list of pages while
composing a message. This page should contain the Smarty tag {NMS}.
You can also display the sent messages as newsleer archive on your website. Any message
marked as public will be displayed in this public archive and can be read by every visitor
of your website. Please read the next secon to see how a public subscriber form for the
newsleer can be added to the page or template.
Creang jobs means pung a message and a list of users together. You do not send
messages but just create a task. This task will be started when you process the job.
Public newsleer means that every user of your website can subscribe
to the newsleer.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 7
[ 187 ]
Template Descripon
Subscribe The subscribe form, acvaon e-mail sent to the subscriber to conrm his
e-mail address and message displayed aer subscribing on the page.
Conrm Subscribe The conrmaon e-mail sent to the subscriber aer he/she has conrmed
his e-mail address and message showed on the page when the e-mail is
conrmed.
Unsubscribe The unsubscribe form, subject, and text of the e-mail sent to the user aer
he has unsubscribed from the newsleer. Text shown on the page aer
the unsubscribing form is sent and the conrmaon e-mail sent to the
user when the unsubscribing process is nished.
User Sengs If you have more than one newsleer list that the visitor can subscribe to,
then you can also oer a link where he/she can manage his subscripon
lists. Forms and messages needed for managing these preferences are
found on this tab.
Archive Templates If you would like to display a newsleer archive on the website, you can
use the Smarty tag {NMS action="archivelist"} on the page.
There are two templates that can be used to display an archive: list view
and detail view. You can modify the templates to suit your design on
this tab.
Open the Newsleer page and place the Smarty tag {NMS} into the content of the page. Edit
the appearance of the forms in the admin area of the Newsleer Made Simple module.
You can adjust the delay between each message that is sent. Messages are grouped into
batches (50 messages per batch). Aer each batch is sent, there is a larger delay. The delays
are very important to preserve your web hosng's performance. Sending out many mails has
a heavy impact on your web server. The more mails you send at once, the more crical the
server performance. You can change the delay on the Preferences tab. Use it with care; ask
your provider how many mails you are allowed to send per hour and how you can be sure
that your mails will not be implied to be spam. To get even beer performance, use
the sendmail method in the module CMSMailer.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Using Third-party Modules
[ 188 ]
Displaying videos
Videos have become more and more popular on websites. Everyone can upload videos
to YouTube, but only some people know that any of these videos can also be seamlessly
integrated into websites. Open any video on YouTube website and look on the panel to the
right of it.
There are two elds with the names URL and Embed. The rst eld contains the plain link to
the video. The second eld contains HTML code to display it.
Which eld to use depends upon the place of the video on your website. If the video should
be shown on every page of your website, you have to copy the HTML code from the eld
Embed, open your page template (Layout | Templates), and add the code at the place where
the video should be shown on every page.
If the video should be shown in the page content on the single page, you have to open a
page for eding in the admin console, and click on Turn WYSIWYG on/o below the Content
eld. Find the place in HTML source of the page where the video should be displayed, and
add the code from the eld Embed to this place. Not so comfortable, right? You can work
this way if you have HTML knowledge, but what about the editors of the website who do not
have any HTML knowledge?
In the WYSIWYG editor, you can acvate a simple plugin that helps to implement any video
without looking into the HTML source.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 7
[ 189 ]
In the admin console, click on Extensions | TinyMCE WYSIWYG, and choose the Plugins tab.
Select the plugin with the name media, and click Save plugins. Then switch to the Proles
tab. There are three secons:
Backend prole sengs: Sengs for editors of the website
Advanced backend prole sengs: Sengs for the administrator of the website
Frontend prole sengs: Sengs for the usage of the WYSIWYG editor on the
frontend, for example, if your visitors can add news arcles to the website
The buon for inserng embedded media is called media and can be added to any
Toolbar of any prole depending on your individual needs. For example, to make the buon
available to the editor of the website and to the administrator in the rst line of the toolbar,
add the word media at the very end of the eld Toolbar 1 in both proles, as shown in the
following screenshot:
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Using Third-party Modules
[ 190 ]
Save each prole and see the buon at the end of the rst line in the TinyMCE editor.
Now you or the editor can add any video from YouTube by clicking on the buon. The
Type of the le should be Flash; in the File/URL eld, copy the link from YouTube, as
shown in the URL eld:
The dimensions of the video will be set automacally. Addionally, a preview of the video
is shown below. Click on Insert, and the video will be added to the page. Now, your editor
should only know the link to the video; the rest will be done by the WYSIWYG editor.
You do not need any addional module to insert the video on the page. A lot of funconality
is covered by the core CMS Made Simple. Its just waing to be discovered!
Adding your own player
The method described in the last secon would help if you uploaded your videos to YouTube
rst. But somemes you would like to upload videos to your own hosng and display them,
bypassing services like YouTube or Google Video.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 7
[ 191 ]
In this case, you have to provide your own video player to be able to display any video to
most visitors. If you just uploaded an AVI or MPEG video to the website, you would have
to rely on your visitors having the correct browser sengs to be able to play the les.
Depending on the browser, the visitors may have to decide themselves what program to
use to display the video. It is also important to understand that most video programs you
use to create or edit your les use decoders (so called codecs). If the visitor of your website
is missing the decoder, he will not be able to see the video unl he has installed it. Most
visitors would not install anything and just leave your website.
To serve most browsers and visitors to your website, you should convert your videos to FLV
les and play them with a ash player. The only requirement that the visitor has to fulll to
see the video is the installed ash plugin—no decoders, no other special programs.
There are some free players such as neolao that can be found at flv-player.net. This
video player is free and customizable, but its integraon into a CMS Made Simple website
can be a bit dicult. Luckily, you have another excellent third-party module that is delivered
with the player neolao. The module in queson is calledplayer neolao. The module in queson is called The module in queson is called Play.
Aer installing the module from the Module Manager, you will nd its administraon areayou will nd its administraon area
in Content | Mulmedia Player. The video les for the module must be uploaded with File
Manager and should be available in the directory uploads. On the Records tab, you can, you canyou can
then assign and group uploaded videos to display them on the website. You can display
one le using Tag to insert in your content to insert in your content, as shown:
{Play record="1"}
You will nd this Smarty tag beside the name of the le in the admin area of the
Play module.
To display a list of les, you have to skip the parameter record from the above example and
just use the Smarty tag {Play}. You can also group your videos and display only videos that
are assigned to the same group as follows:
{Play group="myvideos"}
You can play only FLV les with this player. As explained, you have to convert your AVI les to
FLV. If FFmpeg is available on your host, then you can use extra features like video conversion
from AVI and also automacally created thumbnail pictures from videos. Please contact your
provider to gure out if you can use FFmpeg.
You can also create and upload your own thumbnails for each video. They should be
uploaded in the same folder as the video le. The name of the thumbnail le should
correspond to the name of the video le prexed by thumb_ and ending with .jpg. For
example, for the video le name video.flv, you can create and upload the thumbnail le
with the name thumb_video.jpg to the same folder. Alternavely, you can customize the
template of the neolao FLV player (Content | Mulmedia Player, tab Players) or create your
own customized template.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Using Third-party Modules
[ 192 ]
Pop quiz – using third-party modules
1. Where do you nd the admin area for the Photo Gallery?
a. Content | Image Manager
b. Content | Gallery
c. Extensions | Modules | Photos
d. Extensions | Modules | Images
2. What extension is not allowed in the Gallery module?
a. .jpeg
b. .eps
c. .png
d. .jpg
3. Which module should be installed rst in order to send e-mails with a form created
in Form Builder?
a. Newsleer Made Simple
b. CTLModuleMaker
c. CMSMailer
d. File Manager
4. When you are eding your contact form, why should you set the value in the eld
Send User a Copy of Submission to Never?
a. The user knows best what he/she wrote, so he/she does not need any
noce about that stu.
b. Because e-mail submissions can run the web server to its capacity.
c. Because this will cause an endless loop and can run your web server to its
capacity.
d. Because the user gets your e-mail address and could start a communicaon
bypassing the feedback form.
5. What does the Submission Template in Form Builder dene?
a. The appearance of the response message aer the form was sent.
b. The appearance of the Email Template which is responsible for the look of
the sent e-mails.
c. The appearance of the form before subming a message.
d. The appearance of the personal admin area for creang the templates.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 7
[ 193 ]
6. What is the right statement according to a group of radio buons and a group
of checkboxes?
a. In a combined group of checkboxes and radio buons, all alternaves can
be acvated.
b. In a group of checkboxes, all alternaves can be acvated, in a group of
radio buons, only one can be acvated.
c. In a group of radio buons, all alternaves can be acvated, in a group of
checkboxes, only one can be acvated.
d. In a group of checkboxes, a drop-down menu has to be integrated,
otherwise you cannot hear music by handling the radio buons.
7. What is a Job in the Newsleer Made Simple module?
a. Everything you are doing in order to send e-mails.
b. Sending out the prepared e-mails to a mailing list.
c. Choosing an exisng message and an exisng list of users that are going to
get the message.
d. Thinking about the dierent possibilies you have for combining mailing
lists and planned messages.
Have a go hero – installing other modules
Now, if you require other features for your website, you should look at the available
modules and try them out. Use each module's Help to gure out whether you can solve your
requirements with it. Do not forget about plugins. They give you small but useful features in
cases where the modules will be too much overhead.
A good website is mostly never ready, and you work on it again and again; hide unnished
parts now, and present the rst version of your website online, while working on unnished
parts in the development environment.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Using Third-party Modules
[ 194 ]
Summary
We learned a lot in this chapter about how dierent modules in CMS Made Simple extend
the features of your website.
In this chapter, we covered:
Gallery: How to create a photo gallery and create a custom template for the gallery
from scratch.
Form Builder: How to create and customize forms like contact or feedback forms on
the page, without any deep programming knowledge.
Newsleer: How to import e-mail addresses to the user list of the module
Newsleer Made Simple and send out messages to exisng e-mail lists.
YouTube videos: How to embed YouTube videos in the website. You do not need any
special module to show single videos on the page. Discover the core funconality
before looking for add-ons.
In this chapter, only some modules were explained. There are many more modules that
have very sophiscated funconality and oer extended features for your website. Every
week, new modules are developed for CMS Made Simple and updates are made to the
exisng ones.
In the next chapter, you will learn how to build more funconality from exisng modules and
even create your own funconalies from scratch.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
8
Creating Your Own Functionality
CMS Made Simple has only some rudimental features that belong to the
standard installaon. Any addional funconality can be installed with other
modules, as you have learnt from the previous chapter. However, you oen
need your own funconality that is not covered by any exisng module.
In this chapter, we will:
Create a product catalog with custom elds and an individual hierarchy
Use the funconality of a module in a way that it was not developed for
So let's get started...
Creating a product catalog
In this secon, we will learn how to create a new module. As an example, the product
catalog will be created, but in the same way, you can create any kind of catalog such as
services, courses, real estate adversements, or freelancer directory.
Before you create your own catalog module, you should plan its structure very thoroughly.
First of all, reect on the number of levels. Write down how many levels (product categories,
subcategories, and so on) you need. For my example, I will create a simple oce furniture
catalog. I need the following three categories to which the products can be assigned
during creaon:
Desks
Chairs
Bookcases
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Creang Your Own Funconality
[ 196 ]
This means that for the furniture catalog, a two-level structure is required, such as categories
and products. Each product will belong to only one of the categories listed previously.
In the next step, you have to gure out what elds you need to create for one item (product)
in your catalog. This is like making a table from your product's list. What columns do you
need to separate dierent informaon? For my example, I need the following four elds:
Product tle
Descripon
Image
Price
Now, you can start creang your own module. You are not going to use any special dedicated
modules, but you will learn how to create an individual module perfectly ed for your
individual needs. This can be done with CTLModuleMaker module that allows the creaon
of any fully funconal catalog-like module.
The example structure of the new product catalog is as follows:
Desks
Computer desk
Execuve desk
Chairs
Execuve chair
Guest chair
Bookcases
…..
Install the CTLModuleMaker module from the list of available modules (Extensions |
Module Manager). When the module is installed, its admin area can be found in the admin
console (Extensions | CTLModuleMaker).
Creating a new catalog-like module
We will now start to create a new individual module. In the admin console, go to the admin
area of CTLModuleMaker (Extensions | CTLModuleMaker), and click on the link Create a
new module.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 8
[ 197 ]
Step 1: Basic information about the module
The module wizard will take you through all steps needed to create a new module. In step 1
you are asked to dene basic informaon about the new module.
In the rst eld, enter the name of the module. This name will appear in the list of
modules (Extensions | Modules). It will also be used in the Smarty tag {cms_module
module="NAME_OF_MODULE"} later on. It's beer to choose a unique prex for the module
name, as shown in the previous example. Do not name it just Products (there is a third-party
module called Products), but BWProducts. BW stands for Business World in my example
(sure you can use your own prex).
The rst eld is also used to generate URLs for the module items later on.
For example, the detailed view of the product will display http://www.
mydomain.com/nameofmodule/detail/nameofproduct/5/.
The descripon of the module will appear on the module Help in the secon What Does
This Do?
The friendly name of the module will be shown in the admin menu when the module
is installed. In the previous example, the module will be installed in Content | Products
Catalogue.
We have gured out that we need a two-level structure: categories and products. If you
need more levels, then change it here. However, I recommend starng with a simple
two-level structure at the beginning and then, if the principle is clear, creang one or
more addional levels.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Creang Your Own Funconality
[ 198 ]
Click on Next and proceed with step 2.
Step 2: Creating levels
The products in the module will be assigned to dierent categories. Categories will help to
group dierent products and make the navigaon within the product list easier
Creating the rst level (categories)
This step helps you to dene categories for the new module, so that the items can be
assigned to later on.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 8
[ 199 ]
The rst and the fourth elds require a technical name and a prex for the categories.
Technical names are not shown to the visitors of the website and should not contain any
special characters. On the contrary, the second and the third eld is user friendly and can
contain special characters. These elds will be used in the admin console. For example, the
plural form of the level name will appear on a tab in the admin area of the module, as shown
in the following screenshot:
The h eld deals with the exibility of the hierarchy. Can a product belong to only one
category or to many categories? As an example, imagine a book catalog where a book can
belong to more than one category. Historical crime logically belongs to crimes and historical
literature at the same me. For the furniture catalog, we do not need such exibility. In our
example, the products can only belong to one category.
In the sixth eld, you enter number of elds that are required addionally to the elds
automacally added to each level. You can read from the comment of the eld what elds
will be created. This means that we do not need any extra eld for the category tle as we
will use the eld name for it. Addionally, we need the eld that stores the descripon of the
category. Therefore, you enter 1 in this eld.
The seventh eld is not important for the level 1 in the catalog structure as there are no
parent elements for the categories.
Where should new categories appear in the list of categories (in the admin area and on
the website) by default? Note that you can always reorder the appearance of the category
manually in the admin area of the module later on.
The last eld is not important for level 1 and can be le as it is. Click on Next.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Creang Your Own Funconality
[ 200 ]
On the last screen, you dened the number of addional elds (see the sixth eld in the rst
image under step 2) that the category should have. Now, you have to give more informaon
about this eld on the next screen, as shown in the following screenshot.
The rst eld contains the technical name of the eld for internal use only. The second eld
is the friendly name which will be visible to the editors of the catalog in the admin console.
Choose Short text(255 chars.) for the eld type if you feel that 255 characters will be enough
for the category descripon. Seng a eld to be mandatory means that you won't be able to
create a new category without giving it a descripon.
Should the content of the eld be indexed in the Search module of CMS Made Simple? This
module is a standard module and was explained in Chapter 5, Using Core Modules.
Every module created with CTLModuleMaker will get an addional advanced search
funcon, as shown in the following screenshot:
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 8
[ 201 ]
In the last eld of the eld denion, you can dene whether or not you would like to
see the eld in the advanced search. In the previous example, the eld is searchable and
therefore displayed at the top of the search funcon. Click on Next.
In the next step, you dene what elds will be displayed in the list of categories in the admin
area of the future module. The eld name is mandatory, you cannot delete it from the list,
but you can add any other elds from the list of Possible elds. Add the eld nbchildren to
the list, as shown in the following screenshot:
With the elds dened previously, the list of categories in the admin console of the module
will look as shown in the following screenshot:
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Creang Your Own Funconality
[ 202 ]
Click on Next and proceed with the denion of the products (level 2 in the
catalog structure).
Creating the second level (products)
In the following steps, you will be asked for informaon about your products. You will see
that the denion of each level is similar. There are the same elds as for categories where
you now provide informaon about products.
For the products, we need three addional elds:
Descripon
Price
Image
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 8
[ 203 ]
The product tle will be saved in the mandatory eld Name and should not be planned here.
The seventh eld, which could be ignored for the category level, gets some meaning in
the second level. How the products should be displayed in the list of products, whether
categorically or alphabecally, and whether they should be displayed independent of the
category they are placed in or not.
By category Alphabecally
Execuve Desk
Computer Desk
Execuve Chair
Guest Chair
Computer Desk
Execuve Chair
Execuve Desk
Guest Chair
In the last eld, you can dene whether there can be only one default product for the whole
product list, or one default product for each category. In our example, we do not need any
default products, so you can leave the eld as it is.
Click on Next.
Similar to the denion of the addional eld descripon for the category, you are now
asked to dene the three addional elds for the products.
The rst eld required for the product is Product Descripon. This eld is dened in the
same way the category descripon was dened. I have chosen the eld to be Long text so
that there is no limit to the descripon length of the product. The eld should be searchable
both ways, from the standard search eld of CMS Made Simple and from the advanced
search feature of the module itself.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Creang Your Own Funconality
[ 204 ]
In the next eld, the price of the product should be stored. The eld must be dened as
Short text(10 chars.). If you choose Number in the Field Type, then no decimal numbers
can be stored in it.
The third eld will allow you to upload product images. Once you have changed
the Field Type to Image, addional informaon will be displayed as shown in the
next screenshot:
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 8
[ 205 ]
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Creang Your Own Funconality
[ 206 ]
The informaon in the last six elds is only required for the elds where images can
be uploaded.
You should enter the name of the folder where the images will be saved aer upload. This
folder will be created automacally below the uploads folder on your web hosng. You can
use the images folder and then the custom name of the module folder. This will ensure that
the images are automacally saved in the images folder and thus can be edited online with
Image Manager.
In the next eld, enter the maximum size of the product image to what the image will be
resized if it is larger than the size given here. However, somemes it is not possible to resize
the image precisely to the size given in the eld without changing the image's proporon. In
this case, either width or height will be considered. If you would like to keep the exact size,
then the module has to crop the image. If you crop an image, it would mean that a part of
the image will be cut o. You can choose the resize method in the eld below.
In the same way, you can dene the size of the thumbnails. The best resize method depends
on your source images and design so a general recommendaon cannot be made.
In the last eld, you give the extensions that are allowed for the upload. Note that only GIF,
JPEG, JPG, and PNG les can be displayed as images in all browsers. Do not allow any other
format so that the editors of the products will not be able to upload other les in this eld.
Click on Next, and dene what elds should be shown in the admin console for the list
of products:
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 8
[ 207 ]
If you dened the elds as shown in the preceding screenshot, your admin console will look
as shown in the following screenshot when the module is in use.
Click on Next and answer the nal quesons before the module is created.
Step 3: Finishing creation and module installation
To display a list of categories or products on your website, the editor of the product catalog
will have the possibility to choose between dierent templates. The queson here is about
the template for the product detail view.
We have three dierent categories. If products of the category Desk must be displayed in a
dierent way than products of the category Chairs, then you need category as a template
level. This means that each category must have its own template for the product display. If
the template for the product doesn't depend on its category, then leave the value Only one
template in this eld.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Creang Your Own Funconality
[ 208 ]
Click on Next. You have reached the last step and are close to the nish and installaon of
the new module.
Leave the values in the last step as they are. They deal with le elds (we do not have any),
languages (we learn more about translaons in Chapter 10, Advanced Use of CMS Made
Simple), and the module version. The module version is used for revision control and is used
to manage changes made to the module aerwards. For example, an inial conguraon of
the module gets the version 1.0. When the rst change to the module is made, the resulng
conguraon will be marked as version 2.0, and so on. We do not allow visitors to the
website to add products, so leave the Frontend User Management set to No as well.
Click on Next. The CTLModuleMaker module starts to create all required folders and les.
Click on the Install module link, and the new custom module will be installed. You can now
nd it in the admin console Content | Products Catalogue.
Addionally, the module can be found in, removed, and installed from the list of modules in
Module Manager (Extensions | Modules).
Conguring the new Products Catalogue module
Add some categories and some products in the admin area of the new module.
Then, open the page Products (Content | Pages), and add the following Smarty tag to call
your module:
{cms_module module="bwproducts"}
Replace the name in the parameter module by the name of your module. This name can be
found in the list of installed modules (Extensions | Modules). Open the page, and see the list
of products on the page.
The new module also has a Module Help secon where all parameters that you can use with
this module are listed. The help secon can be accessed from the Module Help icon placed
in the module admin area at the top-right of the page.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 8
[ 209 ]
For more help, you may take a look at the FAQ. The link to the FAQ can be found in the
module help above the Copyright and License secon.
Creating the product list template
For modules created with CTLModuleMaker, some sample templates are created
automacally. However, for each level, you can create an unlimited number of templates
by yourself.
Time for action – creating a new list template
Let's customize the appearance of the product list and add products' images as thumbnails
to this list.
1. In the admin console, click on Content | Products Catalogue, and choose the
Templates tab.
2. Below the secon Default Templates, you will nd a list of sample templates. Click
on the Add template link.
3. For the product list with thumbnails, enter the following code snippet in the
Template eld:
{if $itemcount > 0}
<ul>
{foreach from=$itemlist item="item"}
<li style="list-style-type:none; float:left;
margin: 20px;"><a href="{$item->detailurl}">
<img src="uploads/{$item->image->thumbnail}"
alt="{$item->name}" /></a>
<br/>
{$item->detaillink}<br/>{$item->price} USD</li>
{/foreach}
</ul>
{/if}
4. Click on Submit.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Creang Your Own Funconality
[ 210 ]
5. In the Default templates secon, choose the template you just created to be the
Default list template for level "product". The list of products should look as shown
in the following screenshot:
What just happened?
You have created a new template for the list of the products. This template shows not only
the products' name but also the small version of the products' image. The small version
of the image is represented as Smarty variable {$item->image->thumbnail} in the
template. All Smarty variables that you can use in the template can be found on the tab
Template variables (Content | Products Catalogue | Templates) when the template is
open for edit. Consider that the elds containing images have even more variables. They
are explained in the FAQ for the module in the secon tled How can I retrieve images in
the display templates?
The inline CSS added to the template is not the proper way to implement styles.
It has been made to simplify the example. You should create a new CSS class and
store the style denions in the main stylesheet.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 8
[ 211 ]
In the same way, you can modify or create a new template for the Default detail template
that is used to display the detailed view of one product.
With the CTLModuleMaker module, you can create any kind of catalog such as products,
services, real estate adversements, courses, and more. Everything that you can categorize
can be put in a custom catalog-like module. Remember, that you create an ordinary
module that can be removed from the list of modules, exported as XML, and imported
into another installaon.
Implementing service desk functionality
There are over 300 third-party modules in CMS Made Simple, and this number grows weekly.
Some modules do not work as expected, as there is no quality assurance for the third-party
modules. However, somemes you do not need to use a dedicated module to solve your
requirements. With some creavity you can divert modules from its intended use to create
your own funconality.
There is no sophiscated module for the service desk in CMS Made Simple. However, if you
need it to handle support ckets, then you can use the module CGFeedback; which was
originally created to handle comments for the pages or news arcles. Although this module
has not been developed to handle support ckets, it can be used to solve the required
features with some advanced customizaon.
Managing visitors' logins
Before you set up the service desk feature on your website, you have to install the module
FrontEndUsers. The FrontEndUsers module is a kind of membership management facility for
your website. In our case, members are the customers who can authorize with their access
data on the website and the protected content or communicate with you through their
personal member area.
Generally, FrontEndUsers can be integrated with many other modules such as:
News (Registered visitors can add news to the website)
DownloadManager (Registered visitors can download protected les from
the website)
Forum (Registered users can communicate on the boards)
NMS (Mass mail for registered users)
Website members are not the same as the admin users of your website, which
were described in Chapter 6, Users and Permissions. They have nothing to do
with your admin console (hopefully!).
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Creang Your Own Funconality
[ 212 ]
The module FrontEndUsers has a dependency on the module CMSMailer. It means that you
have to congure e-mail sengs, as described in Chapter 2, Geng Started, before installing
member management on the website. Otherwise, features like sending out forgoen
passwords will not work.
To install the module in the admin console, click on Extensions | Module Manager, and
choose the leer F from the Available modules tab above the alphabecal module list.
Find the FrontEndUsers module, and click the Download & Install link. The module will be
installed and can now be congured.
Open the page Service Desk (Content | Pages), and add the login form into the Content eld
of the page, shown as follows:
{cms_module module="FrontendUsers"}
Now, you can see the login form on the page. Let's create a rst customer account and log in
to the page so that you can test the funconality of the module.
Time for action – creating the rst user account
We are going to add the rst customer account to the website.
1. In the admin console, click on Users & Groups |Frontend User Management.
2. Click on the User Properes tab.
3. Click the Add Property link and ll in the form, as shown in the
following screenshot:
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 8
[ 213 ]
4. Click on Submit.
5. Open the Groups tab, and click on the Add Group link.
6. Fill in the elds, and assign the e-mail eld created above to the group, as shown in
the following screenshot:
7. Click on Submit.
8. Click on the Users tab and then on the Add User link.
9. Fill in the elds, as shown in the following screenshot (provide a valid e-mail
address!), and assign the user to the Customers group:
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Creang Your Own Funconality
[ 214 ]
10. Click on Next, and enter the e-mail address of the customer again.
11. Click on Submit.
12. Log in with the customer data (Username = Email Address of the customer) on the
page Service Desk to see how it works. If you are logged in, the page should look as
shown in the following screenshot:
What just happened?
You have created the rst customer account. You have started by adding the user property
(a eld that contains a customer's e-mail address). This eld will be used for sending
e-mails such as if the customer forgets his password. By default, this eld is also used as
the username (you can change it later on). The Type of the eld must be set to Email
Address, so that anything entered in this eld must be a valid e-mail. You do not need to
dene user properes such as username or password. These two properes are already
provided for you and cannot be changed or deleted.
Never use any special characters like dashes in the eld Name while
adding user properes!
You have already created a new user group (Customers in our example). The e-mail eld has
been assigned to the group Customers as a required eld (Field Status), which means that
each customer must have a valid e-mail address.
At this point, you have congured the module so that the rst customer could be added. All
customer accounts have their expiraon date, so they are disabled automacally if the date
is in the past. The new user has been assigned to the Customer group and is now shown in
the list of users on the Users tab (Users & Groups | Frontend User Management).
Useful settings for module FrontEndUsers
As the administrator of the website, you can adjust the sengs of the FrontEndUsers
module. In the admin console of your website, click on Users & Groups| Frontend User
Management, and select the Preferences tab. The following sengs should be made:
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 8
[ 215 ]
Email address is username: Deselect this if the username should be dierent from
the e-mail address. It is beer not to use the e-mail address as the username, so the
customer can change his username and e-mail address separately.
Allow users to login more than once: This should be selected. If the user is currently
logged in to your website and the session expires in the browser but not on the
server, then the user will not be able to log in again. By selecng this box, you allow
your customers to log in at any me, even if their session is sll open.
Allow duplicate "forgot password" reminders?: I recommend selecng this as well.
Otherwise, if the e-mail with the new password does not reach the user because of
mail delivery failure, he will not be able to get a new e-mail.
Use cookies to remember login details: Select the box if you would like the
member to remember his passwords for the website and be automacally logged
in each me he visits your website. If you select this box, then you should also ll
The name of the cookie. Use only English leers and no special characters for the
cookie name. This feature requires the PHP funcon mcrypt to be installed on your
web hosng. If you see the noce This uses the mcrypt funcons for encrypon
purposes, and they could not be detected on your install. Please contact your
server administrator below the eld, then this feature will not work. You must
enable or install the PHP funcon mcrypt on your web hosng rst, then contact
your provider to get further informaon.
Save the sengs, and add another customer to see how the above sengs aect the
behavior of the module.
Templates for the FrontEndUsers module
Six templates can be fully customized to suit your design and layout requirements.
Template Descripon
Login Template The default template if the user is NOT logged in.
Logout Template The default template if the user is logged in.
Change Sengs
Template
If the user is logged in, then a link Change My Sengs is shown. Customize
this template to change the sengs area of the customer.
Forgot Password
Templates
If the user is not logged in, there is a link Forgot Your Password?. Customize
this template to change the form for password recovery.
Lost Username
Template
If the user is not logged in, a link Forgot Your Login Details? is shown.
Customize this template to change the form for the username recovery.
View User
Template
This template is used to show user details on the website.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Creang Your Own Funconality
[ 216 ]
You can nd all the templates listed in the table in the admin console (Users & Groups|
Frontend User Management) on the corresponding tabs. Forgot Password Templates and
Lost Username Templates include vericaon forms as well.
To see the vericaon form for Forgot Password, click on the link Forgot Your Password?
below the login form on the website, enter the Username, and click on Submit. Check
incoming mails for the subject Lost Password sent out from your website. If you do not
get an e-mail (has your customer entered a real e-mail?), then you have to check the
conguraon of the CMSMailer module, as explained in Chapter 2, Geng Started.
The text of e-mail messages sent by the FrontEndUsers module cannot be changed in the
admin area of the module. These messages are stored in the language les and can be
edited with Translaon Manager, which will be explained in Chapter 10, Advanced Use
of CMS Made Simple.
Creating protected pages
Protected pages can be viewed only by registered members, and as you have already
installed the FrontEndUsers module, you can connue with creang protected pages.
To protect content pages, you have to install the module called CustomContent. The
module CustomContent, in conjuncon with the module FrontEndUsers, allows creang
protected pages that will be accessible only by logged users. Open Extensions | Module
Manager, and click on the tab for available modules with the leer C, search for the module
CustomContent, and click on the link Download & Install. The module is installed. This
module does not have any admin area. Nevertheless, you can access the module help from
the list of installed modules (Extensions | Modules) by clicking on the module name.
You will nd an example in the How Do I Use It secon, that we are going to alternate for
our purpose. The smarty IF condion checks if the user is logged or not and displays dierent
content depending on it.
{if $customcontent_loggedin > 0}
Welcome <b>{$customcontent_loginname}</b><br/>
{else}
<h1>You are not authorized to view this data</h1>
{/if}
If the Smarty variable $customcontent_loggedin is greater than 0, then the user is
authorized to see the content, otherwise a message that the user is not authorized is
displayed. We are going to protect the Service Desk page. If the user is not logged in,
then no content should be shown on the page except the login form.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 8
[ 217 ]
Time for action – protecting the service desk
Now, let us protect the Service Desk page so that its main content can only be viewed by
registered members. If the user is not logged in, only the login form should be shown.
1. In the admin console, open the Service Desk page for eding (Content | Pages).
2. Click on the Opons tab, and mark the page to be not cachable and not searchable,
as shown in the following screenshot:
3. Switch to the Main tab, and ll in the content eld, as shown in the
following screenshot:
4. Click on Apply.
5. View the page as a logged in user as well as a logged out user.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Creang Your Own Funconality
[ 218 ]
What just happened?
You have protected a part of the page content from being viewed by an unauthorized user.
You have set the page as not cachable rst. It is important to do it with every page that
should be protected or every page that contains the login form. Cached pages would also
cache the login status of the user and show him as logged in even if he is logged out.
The page should not be searchable as it would not make sense to show it in the search
results to the non-authorized users.
In the Content eld, the login form (if the user is not logged in) or logout form (if the user is
logged in) is displayed. The form will automacally change depending on the user's status.
Everything passed between the smarty tags IF is only shown to the logged in users.
In this way, you can protect every page or only a part of the content depending on whether
the user is authorized or not.
Creating user area for support requests
A support cket system is an area where your customers can place their quesons about
your products or services. This area is private and cannot be seen by website visitors or other
customers. When the queson is placed in the support cket area, the support sta can
give the customer an answer to it. If the issue is not resolved by an answer, the customer
can respond to the answer and the sta answers again. This dialog (quesons and answers)
is organized as one cket. If the customer has another queson, then he can open another
cket. In the private service desk, the customer can always see the list of his ckets and read
the answers given from the sta. A support cket system is oen used in the professional
customer care.
To create a support cket system, you do not need a special support cket module. Let us
see how you can use the feedback module to create service desk funconality. The name of
the module in queson is CGFeedback. This module is developed to allow website visitors
to provide comments on individual pages, news arcles, products, or other items on your
website. We will use the funconality of this module to create a rudimentary support
cket system.
In the admin console, click on Extensions | Module Manager, and search on the Available
Modules tab for the module CGFeedback. Click on the Dependencies link to gure out what
modules should be installed rst. You will see the following modules:
CGExtensions
CGSimpleSmarty
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 8
[ 219 ]
Install these modules rst, and then install the CGFeedback module. The simplest way to use
the module is to include the following Smarty tag at the boom of any page content:
{CGFeedback}
This will create a comment form and allows visitors to enter comments and rangs about
that parcular page. To display those comments, you would add another tag below the
preceding tag:
{CGFeedback action="summary"}
These tags can be oponally placed in page templates or in module templates. If nothing
else is dened, then the comments are automacally aached to the page where they have
been made. If you would like to allow comments on module items like news arcles, you
should use two addional parameters:
{CGFeedback key1="News" key2=$entry->id}
There are two parameters, key1 and key2. Each parameter can be lled with dierent
values. In the preceding example, the parameter key1 is lled with the value News so that
ordinary page comments can be diered from the comments on news arcle. The second
key saves the number ($id) of the news arcle to be sure that a comment is only shown on
the page with this parcular news item displayed in detailed view.
When comments are added, they are saved in the database with the values given in both
parameters (key1 and key2) like "comment for the news arcle with parcular ID". Why
should we not use this funconality to manage comments that are aached to one parcular
logged user? The rst parameter, key1, will separate page comments from ckets. From
Chapter 4, Design and Layout, we know that there are some Smarty variables that exist in
every page. One of those variables is provided by the module FrontEndUsers and is called
$userid. This variable exists only if the user is logged in and contains the user ID. By placing
the following two lines into the page content, you say "save and display comments for the
parcular logged in user":
{CGFeedback key1="Ticket" key2=$userid}
{CGFeedback key1="Ticket" key2=$userid action="summary"}
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Creang Your Own Funconality
[ 220 ]
These two lines would show the comment form and the summary view of all comments
wrien by one user. When the user is not logged in, he cannot see the comments, as the
variable $userid does not exist for users not logged in. Another user would not see these
comments as well, as he has another user ID. Test it by placing these two Smarty tags into
the page Service Desk. As there is a login form on the page, the complete content should
look similar to the following screenshot:
A logged in user can now create comments or, let's say, support ckets, which can only be
viewed by himself on the page or by the support sta in the admin console of CMS Made
Simple. You can fully customize the template with the comment form, as shown in the
following screenshot:
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 8
[ 221 ]
You can delete or replace the legend Add a Review. Remove the Nofy me of new
comments to this page checkbox, and rename the eld Addional Comments eld to
Your queson or Your request.
To create a new Comment Form Templates in the admin console, click on Content | Calguys
Feedback Module. Select the Comment Form Templates tab, and click on New Template.
Enter NewTicket as the Template Name and the following code snippet in the
Template Text eld:
{if isset($message)}
<p class="success">{$message}</p>
{else}
{if isset($error)}
<p class="error">{$error}</p>
{/if}
{$formstart}
<p><label>Title:</label>
<input type="text" name="{$actionid}title" value="{$title}"/></p>
<p><label>Your name:</label>
<input type="text" name="{$actionid}author_name"
value="{$author_name}"/></p>
<p><label>Your e-mail:</label>
<input type="text" name="{$actionid}author_email"
value="{$author_email}"/></p>
<p><label>Question:</label>
<textarea name="{$actionid}comment" cols="40"
rows="5">{$comment}</textarea></p>
<p><input type="submit" name="{$actionid}submit" value="Send"/></p>
{$formend}
{/if}
Click on Submit. Open the page Service Desk (Content | Pages), and modify the Smarty tag
of the comment form as shown in the following code snippet:
{cms_module module="FrontEndUsers"}
{if !empty($customcontent_loggedin)}
{CGFeedback key1="Ticket" key2=$userid commenttemplate="NewTicket"
policy="session"}
{CGFeedback key1="Ticket" key2=$userid action="summary"}
{/if}
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Creang Your Own Funconality
[ 222 ]
Now, the comment form is displayed with the template NewTicket. Addionally, the
form is redirected to the same page aer the queson has been submied due to the
parameter policy.
To test the module, create some new ckets with two dierent customers to see how exactly
they are separated, depending on which customer is currently logged in. We will customize
templates for summary and detail view later on.
Now, let's see how we can implement the possibility of answering the ckets from the admin
console by the support sta.
Adding answer elds to the tickets
We are now going to create two custom elds in the module CGFeedback. The rst one
will contain the name of the support sta answering the cket. The second eld will contain
the answer.
Time for action – creating new elds
Support sta should be able to answer to the support ckets and store their names to each
answer as well. Let's create the new elds that will contain this informaon.
1. In the admin console, click on Content | Calguys Feedback Module, and select the
Fields tab.
2. Click on Add a new eld, which contains the names of the support sta as shown in
the following screenshot:
3. Click on Submit.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 8
[ 223 ]
4. Then, add another eld that will contain the answer text from the support sta, as
shown in the following screenshot:
5. Click on Submit.
6. In the admin console, open an exisng cket (Content | Calguys Feedback Module)
for edit and nd both custom elds at the edit screen.
What just happened?
You have added two custom elds. From now you can enter an answer to the cket in the
admin console as if you were a support sta. The answer will appear on the website when
the detail view template is customized properly. This will be described later in this chapter.
Templates for ticket list and ticket detail view
Before customizing a detail view, let's create a new summary template. The summary view is
used below the cket submission form to show a list of all ckets submied by one customer
on the page Service Desk. The tle of each cket is linked with the detailed view of the
cket, where the answer from the sta is shown.
Time for action – customizing list of tickets
The appearance of the list of ckets created by the customer and shown to him should be
changed to meet our needs.
1. In the admin console, click on Content | Calguys Feedback Module, and choose the
Summary Templates tab.
2. Click on New Template, and enter TicketList as the Template Name.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Creang Your Own Funconality
[ 224 ]
3. Add the following code into the Template text eld:
{if isset($comments)}
{foreach from=$comments item="one"}
<p><strong>Ticket No {$one.id}: <a href="{$one.detail_url}"
title="{$one.title}">{$one.title}</a></strong><br/>
<small>{$one.created|date_format:"%a %d %b %H:%M"} |
<a href="mailto{$one.author_email}">{$one.author_name}</a>
</small>
</p>
<div class="feedback_item_data">
{$one.data}
</div>
{/foreach}
{/if}
4. Click on Submit.
5. To use this template for the list of ckets, open the page Service Desk (Content |
Pages), and modify the Smarty tag for the summary view of ckets, as shown in the
following code snippet:
{cms_module module="FrontEndUsers"}
{if !empty($customcontent_loggedin)}
{CGFeedback key1="Ticket" key2=$userid commenttemplate=
"NewTicket"
policy="session"}
{CGFeedback key1="Ticket" key2=$userid summarytemplate=
"TicketList"
action="summary"}
{/if}
6. Click on Submit.
7. The template displays a list of all ckets with their number, tle, and content, as
shown in the following screenshot:
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 8
[ 225 ]
What just happened?
You have created a new template for the list of ckets in the customer area. To keep the
example clean, I have removed the page navigaon from the summary template, but you can
copy it back from the Sample template if you like.
In the next step, change the detail template for the cket detail view. In the admin console,
click on Content | Calguys Feedback Module, and choose the Detail Templates tab. Click
on New Template, and enter TicketDetail in the Template Name eld. In the Template Text
eld, enter the code suggested as follows:
<h3>Ticket No. {$onecomment.id}: {$onecomment.title}</h3>
<p>{$onecomment.created|date_format:"%a %d %b %H:%M"} |
<a href="mailto:{$onecomment.author_email}">
{$onecomment.author_name}
</a></p>
<div class="feedback_item_data">
{$onecomment.data}
</div>
{if isset($onecomment.fields)}
{foreach from=$onecomment.fields key="name" item="field"}
{assign var=$name value=$field.value}
{/foreach}
{if !empty($Answer)}
<p><strong>Staff Answer</strong><br/>
<small>{$onecomment.modified|date_format:"%a %d %b %H:%M"} |
{$Staff}</small></p>
<div>
{$Answer}
</div>
{/if}
{/if}
Click on Submit. To use the created template for displaying ckets with sta answers, you
have to set the template as default. Open the list of detail templates (Content | Calguys
Feedback Module, Detail templates tab) and click the icon with a red cross in the Default
column to use the template TicketDetail by default.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Creang Your Own Funconality
[ 226 ]
This template will display the customer's queson and the answer of the sta (if any) in the
detailed view of the cket, as shown in the following screenshot:
Enabling dialog within tickets
At this point, the customer can submit his queson and wait for the response from the sta.
But what happens if the cket is answered and the customer would like to reply to this
answer? There is no possibility of doing it at this point. However, this feature can be easily
added as well.
What we need is another comment form placed in the detailed view of the cket. It is usually
possible to place Smarty tags in the module templates as well, so that the detail template for
the cket calls another form template of the same module and another summary template.
Edit the template TicketDetail to add another comment form and another summary list to it
at the very boom of the template.
{CGFeedback key1="Dialogue" key2=$userid key3=$onecomment.id
action="summary" sortorder="ASC"}
<hr/>
{CGFeedback key1="Dialogue" key2=$userid key3=$onecomment.id
policy="session"}
Save the template, and see the detail view of the cket on the page. Now the customer can
reply to answers given by the support sta or just add some more informaon missed in
his queson.
This dialog form has three keys: key1, key2, and key3. The rst key separates ckets
(1. level) from the dialog within the cket, the second key sll tracks the user ID, and the
third key has got a reference to the cket. In this way, you say "save the comment as an
answer from the parcular customer to the parcular cket".
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 8
[ 227 ]
To give a nishing touch, create a template for the dialog form and a template for the dialog
summary view. The dialog form does not need any special tle as it will get the tle of the
cket and gets Re: as prex for the cket tle. It will also be prelled with the values from
the cket. Create a new comment form template, and add the following code snippet
into it:
{if isset($message)}
<p class="info">{$message}</p>
{else}
{if isset($error)}
<p class="error">{$error}</p>
{/if}
{$formstart}
<input type="hidden" name="{$actionid}title" value="Re:
{$onecomment.title}"/>
</p>
<p><label>{$mod->Lang('prompt_your_name')}:</label>
<input type="text" name="{$actionid}author_name"
value="{$onecomment.author_name}"/>
</p>
<p><label>{$mod->Lang('prompt_your_email')}:</label>
<input type="text" name="{$actionid}author_email"
value="{$onecomment.author_email}"/>
</p>
<p><label>Question:</label>
<textarea name="{$actionid}comment" cols="40"
rows="5">{$comment}</textarea></p>
<p><input type="submit" name="{$actionid}submit" value="{$mod
>Lang('submit')}"/>
</p>
{$formend}
{/if}
Save the template with the name TicketDialogue. In the detail view of the cket (template
TicketDetail), adjust the Smarty tag at the boom to use the new form template as shown in
the following code snippet:
{CGFeedback key1="Dialogue" key2=$userid key3=$onecomment.id
action="summary" sortorder="ASC"}
<hr/>
{CGFeedback key1="Dialogue" key2=$userid key3=$onecomment.id
policy="session" commenttemplate="TicketDialogue"}
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Creang Your Own Funconality
[ 228 ]
With the last step, you show answers from the sta to the customer, so that the enre
conversaon within the cket is displayed. Create a new summary template (Content |
Calguys Feedback Module, tab Summary Templates) with the following code snippet:
{if isset($comments)}
{foreach from=$comments item='one'}
<p><strong>{$one.title}</strong><br/>
<small>{$one.created|date_format:"%a %d %b %H:%M"} | <a
href="mailto:{$one.author_email}">{$one.author_name}</a>
</small>
</p>
<div class="feedback_item_data">
{$one.data}
</div>
{if isset($one.fields)}
{foreach from=$one.fields key='name' item='field'}
{assign var=$name value=$field.value}
{/foreach}
{if !empty($Answer)}
<p><strong>Staff Answer</strong><br/>
<small>{$one.modified|date_format:"%a %d %b %H:%M"} |
{$Staff}</small>
</p>
<div>
{$Answer}
</div>
{/if}
{/if}
{/foreach}
{/if}
Save the template with the name DialogueList. In the detail view of the cket (template
TicketDetail), adjust the Smarty tag at the boom to use the new summary template as
shown in the following code snippet:
{CGFeedback key1="Dialogue" key2=$userid key3=$onecomment.id
action="summary" sortorder="ASC" summarytemplate="DialogueList"}
<hr/>
{CGFeedback key1="Dialogue" key2=$userid key3=$onecomment.id
policy="session" commenttemplate="TicketDialogue"}
Now, the basic service desk funconality is complete. The customer can submit his quesons
in his private area, the quesons can be answered by the support team from the admin
console of CMS Made Simple, and the customer can reply to the answers.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 8
[ 229 ]
Use the funconality for the Admin Nocaons already implemented in the module, so
that the support sta are informed if a new cket is opened or a new reply is added.
In the admin area of the module Calguys Feedback Module (tab Fields), you can create a
new custom eld that allows one of the following values: Opened, Waing for Response,
or Closed. Use the eld type Dropdown to dene it. This eld can be set by the support
sta while working on the cket and shown in the summary view of the ckets, so that
the customer can see what the current status of the cket is.
You have seen how you can use the module that is not dedicated for creang a service desk
to set up the required features. Be open-minded and experiment with the modules. Even if
their descripon is not exactly what you need, you can use it in your way, as shown in
this secon.
Pop quiz – creating your own functionality
1. Why should the Allow users to login more than once box be selected when seng
preferences in the FrontEndUsers module?
a. When the user is currently logged in and the session expires in the browser
and not on the server, the user would not be able to log in again.
b. You should give users with a dual personality a chance to log in at least
twice at the same me.
c. A lot of users are working on dierent computers (private, oce, and so
on), so they can log in from more than one computer.
d. When this box is not checked, it is not possible to generate a new password
(or regenerate the username) when the user once forgets it.
2. What is the right statement according to the following Smarty tags used in
protected pages?
{CGFeedback key1="Ticket" key2=$userid}
{CGFeedback key1="Ticket" key2=$userid action="summary"}
a. These tags show the summary view of all comments wrien by all
registered users.
b. These tags show the comment form and the summary view of all comments
wrien by one user.
c. These tags show the summary view of all comments wrien by all users,
who are currently vising the website.
d. These tags show the comment form and the summary view of all
summaries of professional books wrien by all users having the same ID.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Creang Your Own Funconality
[ 230 ]
3. What is the advantage of using a support cket system?
a. The website will get more visitors because of the fact that cket systems are
modern and the users are projecng this fact to your whole site.
b. The user can have a non public discussion with the service sta concerning
his/her needs and problems.
c. The user gets ckets for the champion league for a special price.
d. The user can have a public discussion in the forum concerning his needs
and problems.
Have a go hero – creating your own functionality
Before you say that there is no module that can cover my requirements and start to develop
one, try to gure out if your requirements can be solved with on-board means. A lot of
modules are just categorized catalogs of something, so they can be created with help of
the module CTLModuleMaker. And, as you have seen, try to see your requirements more
abstractly and reect on using other modules to solve your funconality before starng to
develop from scratch.
Summary
We learned a lot in this chapter about implemenng our own funconality not covered by
any ready-made module of CMS Made Simple.
Specically, we covered:
Module Maker: Creang some enrely new custom modules with
catalog-like content.
Custom Area: Enabling the login funconality on the website and creang
rudimentary service desk funconality with the feedback module.
Now that we've learned about how to create our own funconality, you can follow a
workshop on how to realize basic e-commerce soluon with CMS Made Simple. If you do not
need any e-commerce funconality, you are now ready to place your website online because
by this me, your website is fully funconal.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
9
E-commerce Workshop
CMS Made Simple is, as its name suggests, a content management system. In
a CMS, data can be dened as almost anything—documents, movies, pictures,
phone numbers, scienc data, and so on. CMS is generally used for storing,
controlling, revising, and publishing content. They are not explicitly designed
for e-commerce or community needs. For sophiscated online shops without
any content management features, it is beer to get a dedicated e-commerce
applicaon. The same applies to the typical community features like forum
or chat.
However, if your website is heterogenic, then it is not just a content
management system and has a mix of various features. You can use addional
modules for basic funconality of other applicaons. In CMS Made Simple,
there are some community modules such as Forum Made Simple (FMS)
and Shootbox Made Simple, and a number of modules that cover basic
e-commerce features.
A number of addional e-commerce modules for CMS Made Simple can be
confusing at the beginning. Actually, there are dierent soluons such as
e-commerce suite, Shop Made Simple (SMS), and the Cataloger. These
dierent soluons are not compable with each other in any way and
cannot be used together on one website.
In this chapter, you will learn about a soluon made of nine modules that oers the widest
funconality. This suite can be enriched by a number of addional modules to get even more
features. Oen users of CMS Made Simple wonder why there are so many modules that are
required to get a basic online shop. It is a philosophy of CMS Made Simple to act like a Lego
system, where you can build your required soluon without installing a big package having a
bunch of features that you will never use.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
E-commerce Workshop
[ 232 ]
This soluon is made of nine modules that are listed as follows:
CGExtensions
CGSimpleSmarty
Products
Cart
FrontEndUsers
SelfRegistraon (oponal)
CGPaymentGatewayBase
Orders
PaypalGateway (oponal)
Two of them are oponal. The SelfRegistraon module will allow your buyers to register
with the website during the checkout process. The last module, PaypalGateway, should be
installed if you use PayPal service to instantly collect payment from the website. For this
workshop, I will use products from the ocial CMS Made Simple shop that can be found at
http://www.cafepress.co.uk/cmsmadesimple. I also assume that you already know
how to install modules and customize module templates with HTML, CSS, and Smarty.
Module Products
The Products module will be the heart of your e-commerce soluon . This module is the
place where products that you would like to sell in your shop are saved. Generally, it is
possible to use any other module for the soluon, but this would imply that you have
to make some heavy modicaons to your templates and, probably, the PHP code of
the modules.
With the Products module, you can manage:
Products
Product aributes that will have an impact on the price (like size or color)
Categories
Product hierarchy
Custom elds
This module is the basis for all other modules that you will use later on. Aer all, you cannot
start a shop if you do not have any place to store the products.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 9
[ 233 ]
Install the Products module with the Module Manager. Pay aenon to the
Dependencies secon of the module before installing it. There are two (CGExtensions and
CGSimpleSmarty) modules that provide convenience APIs, reusable forms, and Smarty tags
for use in other modules. If you are not a programmer, you probably will not need to do
anything with these modules besides adjusng some preferences if you ever need them.
In the workshop described here, you just need to install them.
Time for action – adding the rst product
Aer the Products module is installed, we will display it on the page Shop and add the rst
product to it as follows:
1. Create a new content page Shop (Content | Pages | Add New Content).
2. Add the Smarty tag {Products} into the eld Content of the page. If you see the
page in browser, it will not show anything at this me as you have not added any
product to the shop so far.
3. In the admin console of CMS Made Simple, click on Content | Product Manager.
4. Under the Products tab, click on the Add A Product link and add your product as
shown in the following screenshot:
5. Click on Submit and see the Shop page on your website.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
E-commerce Workshop
[ 234 ]
What just happened?
You have added the rst product to the Products module. This product is displayed on
the page with the Price and Weight (we can delete this eld later on). Click the product
link to see the detailed view of the product. The template looks very technical, but with
some HTML, CSS, and Smarty knowledge you can change its look and feel later on. Let's
concentrate on the funconality of the module rst and not on the design.
Add some more products in the Product Manager and see the list of products on the Shop
page. Pay aenon that the detailed view of every product is displayed in the same way. In
the Products module, there are some elds like Price and Weight already dened. But you
will need to add your own elds.
Creating custom elds
Usually one or more pictures of the product can be found in an online shop. However, there
is no special image eld where you can upload the product picture. Luckily, you can add as
many custom elds as you need. In the next step, you will create a custom eld, where the
image of the product can be uploaded. In the admin area of the Product Manager, choose
the tab Field Denions and click on the link Add A Field.
Name is a kind of technical eld that is not displayed to your visitors. You should not use
any special characters or spaces in the name of the eld. Use only leers and numbers, no
dashes, slashes, or anything else non-alphanumeric.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 9
[ 235 ]
The Prompt eld is the label of the eld that you will see in the admin area of the Product
Manager during adding or eding products. You can use any characters in this eld.
The Type of the eld should be Image. By selecng this type you ensure that the eld is
displayed as a eld for le uploads in the admin area. This eld will also be validated, so that
only images can be uploaded here. Addionally, thumbnails for the uploaded images (small
preview versions) will be created automacally aer upload.
Let the eld be public by selecng the checkbox for Is this a public eld? It means that
the content of the eld (the image itself) will be shown to the visitors of your shop. If you
make it private, only the administrator of the website can see the eld in the admin area
of the module.
Save the eld. This eld is automacally added to the detail template on the page and the
eding view of the product in the admin area of the Product Manager. To test the eld, open
any product for eding in the admin area, nd the eld Product image (Prompt), and upload
an image for the product using this eld.
Control the display of the eld in the detailed view of the product on the website. The small
preview version of the product is added to the secon Custom Fields of the detailed view.
We sll do not care of how it looks like, but how it works. We will change the detailed view
of the product when we are ready with all the custom elds and the product hierarchy.
Image already exists
When you try to upload the same image twice you will get an error saying
that the image has been already uploaded. To control what images are
already saved for the product and delete them, open Content | File Manager
in the admin console. Find the folder Products and then the folder name
product_[ID]. The ID of the product is displayed in the list of products
in the admin area. Click on this folder and remove the images already
uploaded. Now, you can upload the same image in the admin area of the
Product Manager.
Dene your own elds
Create as many custom elds as you need to display and manage the product. With the Type
of the eld you decide how the eld is displayed in the admin area. The output of the eld
on the page can be fully customized and does not depend on the type.
If you need a Product Number eld, create a new custom eld (Text Input) with maximum
length of 12 characters and make the eld public. Then edit each of your products and enter
a number in this eld. You can adjust the order of the elds under the Field Denions tab.
Again, this order only applies to how the admin area for the product management looks; the
output on the page can be completely dierent.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
E-commerce Workshop
[ 236 ]
Creating a product hierarchy
Next, let us create a product hierarchy. In the ocial shop that I am trying to reproduce here,
there are four hierarchy items:
Shirts (short)
Shirts (long)
Home & Oce
Mugs
You should understand the dierence between product categories and product items in
the Product Manager module. Product categories are kind of tags for the products. It is
not possible to arrange them in the hierarchy. However, you can assign one product to
mulple categories if you like. In contrast to the categories, a product can belong to only
one hierarchy item. That means the structure above should be implemented as a hierarchy
and not as categories. One product cannot be a shirt and a mug at the same me.
We will use categories later on to mark the products as:
New
Popular
Discounted
Categories will allow you to make one product both new and discounted at the same me. A
hierarchy would not, as mulple assignment is not possible.
In the admin area of Product Manager, click on the Product Hierarchy tab and create four
hierarchy items displayed in the rst list. It is your choice if you want to add any descripon
or image to the hierarchy or leave it empty.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 9
[ 237 ]
Once the hierarchy is created, go through your already created products and assign them
to the proper hierarchy item. The hierarchy can now be displayed in the sidebar navigaon
on the page. Open the main page template (Layout | Templates) and nd the secon with
sidebar navigaon. Add the Smarty tag for the product hierarchy shown as follows:
{Products action="hierarchy"}
Customizing product templates
The display of the product hierarchy template is very technical. Let's customize all the
templates for the module. There are three of them:
Summary Templates
Detail Templates
Hierarchy Report Templates
Let's start with the Hierarchy Report Templates. This template denes how the hierarchy in
the sidebar is displayed. In the admin area of the Product Manager, click on the Hierarchy
Report Templates tab and nd the list of exisng templates for the hierarchy. The template
Sample is the one that is used by default. You can customize this template or create your
own by clicking on the New Template link. I choose the second way. It is generally advisable
not to change sample templates, but create your own and set them as default. This way you
can delete anything from the custom template and use the Sample template for reference
if you need parts removed from the custom template. For the template name, I chose My
Shop. However, you can use any name you wish.
In the Template Text eld, the sample template code is already suggested. Leave this code as
it is and submit the new template. Now you see two templates in the list. Make the template
My Shop the default one by clicking on the red cross in the Default column. Let's see what
we have in the template and what we actually need. Open the new template for eding:
Smarty variable Descripon
{$hierarchy_item.name}
The name of the hierarchy item.
{$hierarchy_item.id}
The ID of the hierarchy item.
{$upurl}
The URL to the parent hierarchy item. Only applicable if
there are more than one hierarchy levels.
{$mod}
The object containing all the informaon about the
module Products. In the template the object is used to get
translaons:
{$mod->Lang('parent')} returns the translaon for
the key parent from the translaon le.
You can replace this variable with your custom text if your
website is monolingual and the language of the website will
be never changed.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
E-commerce Workshop
[ 238 ]
Smarty variable Descripon
{$parent}
This array supposes to hold the informaon about the
parent item. However, it is not assigned in the current
version of the module and cannot be used.
{$child_nodes}
The array that contains informaon about all child hierarchy
items. The informaon in this array is:
• {$child_nodes.id}: ID of the hierarchy item
• {$child_nodes.name}: Name of the
hierarchy item
• {$child_nodes.description}: Descripon of
the hierarchy item
• {$child_nodes.parent_id}: ID of the parent
hierarchy item
• {$child_nodes. image }: The name of the
image le for the hierarchy item
• {$child_nodes. thumbnail}: The name of
the thumbnail le for the hierarchy item
• {$child_nodes. long_name}: The full name
of the hierarchy item (including the names of
all parents)
• {$child_nodes. extra1}: The value saved in
the Extra Field 1
• {$child_nodes. extra2}: The value saved in
the Extra Field 2
• {$child_nodes. downurl}: The URL for this
hierarchy item
{$hierarchy_image_
location}
Path to the folder where images for the product are saved.
{$hierarchy_item}
An array that contains the ID of the actual item hierarchy.
From the preceding table, you can now combine the HTML and Smarty tags and create your
own template. Create a list of hierarchy items for the sidebar with the sample template as
shown in the following code snippet:
{if isset($child_nodes) && count($child_nodes)}
{foreach from=$child_nodes item='node'}
<h3>
{if isset($node.downurl)}
<a href="{$node.downurl}
title="{$node.name}">{$node.name}</a>
{else}
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 9
[ 239 ]
{$node.name}
{/if}
</h3>
{if !empty($node.description)}
<div>{$node.description}
</div>
{/if}
{/foreach}
{/if}
<!-- This tag will be automatically added to the page content.
It uses the default summary template for products. -->
{Products hierarchyid=$hierarchy_item.id}
This template goes through each hierarchy and displays its name as a HTML heading <h3>.
It will also show a descripon eld of the hierarchy item below the heading. The last Smarty
tag in the template shows the summary list of the products limited to the hierarchy item
selected in the sidebar. The template of this summary list is the default summary template.
The products summary list will automacally replace the page content.
Before you customize the summary template, open it (Content | Product Manager, tab
Summary Templates, template Sample) and nd out what the major parts of this template
are. It consists of:
Drop-down list of categories
Page navigaon
List of products with the add-to-cart funconality for each product
At present, you can see only the list of products, no categories, no page navigaon, and no
cart funconality.
Displaying the drop-down list of the categories does not work in the actual version of the
module the way it is added to the sample template:
{if isset($catformstart)}
{$catformstart}
{$catdropdown}{$catbutton}
{$catformend}
{/if}
It is sll possible that this funconality will be added in a later release of the module.
At present, you can completely delete this part or replace it with the Smarty tag shown
as follows:
{Products action="categorylist"}
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
E-commerce Workshop
[ 240 ]
The output of the category list can be changed by customizing the CategoryList Templates in
the admin area of the Products module. In my example, I have added the categories to the
sidebar just above the hierarchy item as shown in the following code snippet:
{Products action="categorylist"}
{Products action="hierarchy"}
The second line of code in the last example already exists in your template. The rst line adds
the links to the dierent categories that have assigned products. In the brackets behind the
name of the category, the number of assigned products is shown. If you have assigned some
products to categories, it should look as shown in the following screenshot:
To dene how many products should be shown on one page and to see how the page
navigaon for the product list looks like by default, add the parameter pagelimit="" to the
Smarty tag {Products}. We have placed this tag in the page Shop at the very beginning of
the workshop. Open the page (Content | Pages) and add the parameter to the tag as shown
in the following code:
{Products pagelimit="2"}
Be sure that the whole number of products is greater than the value set here. Otherwise,
you will not see the page navigaon and cannot customize it. The page navigaon in the
module Products does not support SEO friendly URL, so if you do not have many products,
you can completely delete the navigaon from the template and do not limit the number
of products per page. The number of products shown on one page is limited to 100000
products, if you do not limit it explicitly. But I would not recommend displaying more
than about 20 products per page. It is not user friendly and will signicantly impact the
performance of your shop.
The last part in the template is the cart funconality. The Products module does not contain
any cart funconality. There is another module that is perfectly integrated into it. The
module in queson is called Cart and will be installed in the next step. We cannot change
the display of the Cart module at this me, so we will leave the tag as it is.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 9
[ 241 ]
The last queson is how to display the product image in the summary list of products. In the
Summary template, you will nd a Smarty comment made by the developer of the module
saying The summary template has access to custom elds via the $entry->elds. The values
of the custom elds can be generally accessed by the following lines of code:
{$entry->fields.image->value}
{$entry->fields.number->value}
The part of the code in bold corresponds to the technical name of the eld. To get
thumbnails of the images automacally created by the module during the upload use:
{$entry->fields.image->thumbnail}
So let's put it together and create a complete template for the summary view of products
including custom eld containing the thumbnail of the product. Create a new summary
template and name it My Shop. Add the template code as shown in the following
code snippet:
{Products action="categorylist"}
<ul class="products-summary">
{foreach from=$items item=entry}
<li>
<a href="{$entry->detail_url}">
<img src="{$entry->file_location}/{$entry->fields.image
>thumbnail}" alt="{$entry->product_name}"/></a>
<br/>
<a href="{$entry->detail_url}">{$entry->product_name}</a>
<br/>
{$currency_symbol}{$entry->price}
</li>
{/foreach}
</ul>
Save the template and set it as default. The variable in bold in the template is the custom
eld containing the image of the product. I have named the eld image as I have created it. If
you have chosen another name, you have to adjust it here.
The list of products can be styled with CSS. To display the products one by one, open the
stylesheet used in your main template (Layout | Stylesheets) and add the following style
denions to it:
ul.products-summary
{
list-style: none;
}
ul.products-summary li
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
E-commerce Workshop
[ 242 ]
{
float: left;
padding: 15px;
text-align: center;
}
This is just an example; you are free to add any styles that will t into your own design.
The size of the thumbnails created while uploading product images can be changed in the
tab Preferences (Content | Product Manager). On this page, scroll down to the secon
Image Handling Sengs and adjust the values as you like.
If you have used my templates so far, your summary template and hierarchy should look as
shown in the following screenshot:
The last step will be customizaon of the detailed view of the product. Create a new
template called My Shop under the Detail Templates tab in the admin area of the Products
module. Then set the template as default.
In the detail template, you will nd a secon for the product aributes. We did not discuss
it so far. The products can have dierent aributes, like size or color for the t-shirts. These
aributes may or may not have an impact on the price. For each product, the aributes are
added separately. It does not make sense to add size or color to the mouse pad, if we have
only one model.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 9
[ 243 ]
Let's create the aribute for the color of the long t-shirt. Assume that we have two colors
available: white and grey. The color does not change the price of the product. In the admin
area of the Products module, click on the Products tab. In the list of products, at the end of
each line there is an icon for Edit Aribute Sets. Click on this icon in line with the product to
which you would like to add aributes.
On the next screen, click on Add Aribute. Enter the name of the aribute. This name
contains the generic term like Color. In the Label eld enter the name of the aribute in the
same way as it should appear on the website. As the color of the t-shirt does not change the
price of the product, enter 0 in the eld Price Adjustment and click on Update. Add another
label for the color Grey. It should look as shown in the following screenshot:
Click on Submit once you have entered all possible values for this aribute. See the detailed
view of the product with dened aributes. All possible values are listed in the template.
When you install the Cart module later on, you will not only be able to display the aributes,
but add them to the cart as well. The price will be automacally adjusted in the cart view.
You should now be able to customize the detail template yourself.
Follow these steps:
1. Create a new template and do not overwrite the sample one. The Sample template
can be used for future reference if you delete any part from your custom template.
2. Analyze the template. Try to gure out its major parts and usage of other modules
in it.
3. Write down all the Smarty variables used in the templates in a table as shown
previously for the Hierarchy Report Templates.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
E-commerce Workshop
[ 244 ]
4. Figure out, what values are saved in these variables. If the variable contains an
array, use the Smarty modier print_r to get all array values from it. For example,
{$entry|print_r} will output all the values contained in this variable.
5. Use HTML and Smarty to markup the template.
6. Add stylesheet denions to change the appearance.
Creating detail view for product
Follow the list above and create your own template for the detailed view of the product.
Delete everything you do not need in the template; for example, the Weight eld. Assign
custom elds (Product image and Product number) the same way you did in the summary
template. Check the values of the variables with the modier print_r if you are not sure
what you have to use.
My detail template looks as shown in the following screenshot:
The template code I have used for the detailed template is shown in the following
code snippet:
<div class="products-detail">
<img align="left" src="{$entry->file_location}/{$entry
>fields.image->value}" alt="{$entry->product_name}"/>
<h1>{$entry->product_name}</h1>
<h2>{$currency_symbol}{$entry->price}</h2>
<div>{$entry->details}</div>
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 9
[ 245 ]
{* print out attributes *}
{if isset($entry->attributes)}
{foreach from=$entry->attributes key='name' item='attribset'}
<p><strong>{$name}:</strong>
{foreach from=$attribset key='label' item='adjustment'}
{$label} ({$currency_symbol}{$adjustment}),
{/foreach}
</p>
{/foreach}
{/if}
{* include the cart *}
{if isset($cart_module_tag)}
{eval var=$cart_module_tag}
{/if}
</div>
You are now ready to add cart funconality to your soluon.
Module Cart
This module will add simple cart funconality to the Products module. Once installed, the
Cart module will be automacally displayed in the detailed view of the product. The visitor
of the website will then be able to put one or more products in the basket along with the
desired quanty. There are other modules that you can use instead of the Cart module,
like GiBaskets. For our example Shop, it is enough to use the simple funconality of the
Cart module.
Install the module Cart from the list of available modules in the Module Manager. The
admin area of this module will be added to Extensions | Cart in the admin console of CMS
Made Simple.
Time for action – connecting products and cart
If you now look at your Shop page and open a detailed view of any product, you will
discover that there is sll no cart funconality in it. The reason for it is that the Products
module does not know that the Cart module has been installed and is ready for use. Let's
connect two modules.
1. Open the admin area of the Products module (Content | Product Manager).
2. Click on the Preferences tab.
3. Select the Cart module from the eld Cart Module.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
E-commerce Workshop
[ 246 ]
4. Click on Submit and open detailed view of any product. You should see the buon
Add to My Cart in the detailed view of the product. If the product has some
aributes addionally to the quanty eld, then the aributes are displayed
in a drop-down eld besides it.
What just happened?
You have told the Products module what module has to be used for cart funconality. Test
it and add some products to the cart right now. The products will be added, but there is no
possibility to display the content of the cart for the visitor yet.
Create a new content page called Cart and add the following Smarty tag as the content of
the page:
{Cart action="viewcart"}
Save the page, then open the admin area for the Cart module (Extensions | Cart) and switch
to the Preferences tab. Select the newly created page in the list of pages, so that the visitor
is automacally redirected to the page aer he has added the product to it.
There are four templates that you can customize for the module:
Template Descripon
AddToCart This template controls how the quanty eld, the buon Add To My Cart
(shown in the previous screenshot) and oponally product aributes
with price adjustment will look.
MyCart This template is used to display the cart status. It is displayed at the place
where the Smarty tag {Cart action="mycart"} is placed. It shows the
number of items currently saved in the cart and a link to the cart page.
Viewcart This template is used for extended display of all products saved in the cart. It
shows all products with their quanes and prices and the total order price.
Addionally it oers the possibility to start the checkout order process if the
module Orders is installed.
Product Summary This template is used to format the output used for each product summary in
the Viewcart template. It allows you to customize the product label based on
the aributes, product name, and price.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 9
[ 247 ]
The Smarty tag {Cart action="mycart"} can be added to the navigaon of the
website, like the link to the Basket in the ocial shop (http://www.cafepress.co.uk/
cmsmadesimple) we are trying to reproduce. It would appear as shown in the
following screenshot:
There is nothing else you should know about the Cart module. The next step will be to
integrate the checkout process.
Module Orders
This module is designed for processing orders from the cart. This module handles billing and
shipping addresses from the customer and either uses an external payment gateway (such
as PayPal) to handle the payment process or performs manual e-mail-based invoicing. This
module can also oponally collect credit card informaon and store it in the database for
later oine processing.
Even if the module oers the possibility, never collect credit card
informaon in a low security shared hosng environment!
The Orders module keeps track of all orders, and allows for the specicaon of items like
tracking numbers and conrmaon numbers and sending e-mails to the customers related to
a parcular order.
The funconality of the module can be extended with even more modules that allow
conguring dierent taxes, shipping costs, and promoon acons (like discount or
promoon coupons).
This module has a lot of dependencies:
CGExtensions
FrontEndUsers
Products
CGSimpleSmarty
CMSMailer
CGPaymentGatewayBase
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
E-commerce Workshop
[ 248 ]
From this list of dependencies, you can learn that it is based on the funconality of the
module FrontEndUsers. This means that your website's customers must register before they
can start the payment process on your online store. There is no possibility to turn o this
registraon process and it is required for the checkout step.
Install all modules listed in the preceding dependencies list, then install the Orders module.
Time for action – adding the checkout step
To enable the checkout process provided by the Orders module follow these steps:
1. Create a new content page (Content | Pages | Add New Content) and name
it Checkout.
2. Add the following Smarty tag to the Content eld of the Checkout page:
{Orders}
3. Save and view the page in the browser. This page will display either the billing form
if the user is logged in or the warning message if the user is not logged in or does
not belong to special user group.
4. To connect the Cart module with the new Checkout page, in the admin console click
on Extensions | Cart.
5. Select the tab Viewcart Form Templates and click on the Sample template
(or your own template, if you have created one).
6. At the very end of the template in the Template Text eld, add the following line
of code:
{cms_selflink page="checkout"}
The parameter page should contain the page alias of the page
where the Smarty tag {Orders} has been added to the content.
7. Open your shop and add one or more products to the cart, nd a link to the page
Checkout at the very boom of the screen.
What just happened?
You have connected the module Cart with the module Orders by placing a link from the cart
view to the checkout process. To test the link, add some products to the cart and click the
Checkout link at the boom of the cart view. If you are not logged in, you will see
the following message:
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 9
[ 249 ]
The user is not logged in (or not a member of the required group)
This message can be found in the template of the Orders module. But rst, let's see an
overview of the templates delivered with this module. In the admin console, click on
Content | Order Manager and nd the Templates link above the list of orders:
Template Descripon
Billing Form This template controls the rst step in the order processing. It
displays the form where the customer can enter billing address and
one or more shipping addresses.
Payment Form This template controls the second step in the order processing
and is used to display the payment form for manual e-mail-based
checkout process. You will need this template if you do not use any
payment services such as PayPal, EMoney, eWay, or Authorize.Net.
Conrm Order This template controls the third step in the order processing and is
used to display any informaon the customer entered in the rst
and oponally second step, so that the customer can conrm the
shipping and invoice addresses or go back and correct them.
Invoice This template is used in the admin area of the Orders module to
print out the invoice or to send it via e-mail to the customer.
Gateway Complete This template is used to display the status message aer the
payment has been made with any third-party service such as
PayPal, EMoney, EWay or Authorize.net.
User Email This template is used to customize the e-mail with order
conrmaon sent to the customer when the new order has been
submied.
Admin Email This template controls the layout and content of the e-mail that is
sent to the authorized administrator of the store when a new order
is submied.
Message There is no sample template for the messages. Here you can dene
your custom e-mail nocaons that can be manually sent to the
customers from the admin area of the module. An example of such
message can be an e-mail nocaon that is sent when the order
is shipped.
Now, we know where to start and how to proceed with customizing of the templates according
to our requirements and payment conguraons. Let's give the customer the possibility to
register with or login to the website to be able to complete the checkout process.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
E-commerce Workshop
[ 250 ]
Integrating the login screen
The message that indicates that the customer is not logged in is saved in the template
Billing Form (the rst step in the checkout process).
The user is not logged in (or not a member of the required group).
This is not very user friendly. Whether the user is registered or not we should give him a
possibility to log in or to register on this page as shown in the following screenshot:
The login form for registered customers can be displayed with the module FrontEndUsers.
This module was discussed in the secon Managing visitors' logins in Chapter 8, Creang
Your Own Funconality. If you have not installed the module yet, use the Module Manager
to do so and see the login form on the website. The link to the page where the customer can
register will be provided with the SelfRegistraon module discussed further.
In the admin area of the Orders module, click on the Templates link and create a new
template with the name My Shop on the Billing Form tab. Scroll down to the very boom
of the suggested template text and nd the last ELSE condion:
...
{else}
{* user is not logged in, gotta make him *}
<h3 style="color: red;">{$Orders
>Lang('error_notloggedin')}</h3><br/>
{/if}
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 9
[ 251 ]
This is the place where the message that the user is not logged in is shown. Replace this
secon with the login screen of the module FrontEndUsers, as shown in the following
code snippet:
...
{else}
<h1>Already registered?</h1>
{FrontEndUsers}
{/if}
Save the template and do not forget to set it as Default to see changes on the website.
Registered customers can now log in to start the checkout process.
But, what about customers who do not have an account? They should be able to
register themselves with our website. As it gets a bit complicated I have created the
following owchart:
The billing form checks if the visitor is logged in or not. If yes, he can ll in the billing
informaon; if not, the login form of the FrontEndUsers module (step 3) is displayed. The
steps 4 and 5 in the workow should assist new customers by allowing them to register.
These steps can be accomplished with the SelfRegistraon module. Read the next secon
to see how the module can be congured.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
E-commerce Workshop
[ 252 ]
Before you connue be sure that:
The CMSMailer module is congured and is able to send out messages (refer to
Chapter 2, Geng Started).
There is a user property of type Email Address in the module FrontEndUsers
(Users & Groups | Frontend User Management, tab User Properes).
There is a user group that has the above user properes associated as Required
(Users & Groups | Frontend User Management, tab Groups).
You can read how to congure the FrontEndUsers module in Chapter 8, Creang Your
Own Funconality.
Integrating customer registration
This module is designed to allow visitors of the website to register themselves. It oponally
sends a conrmaon e-mail with an acvaon link that must be clicked before the
registraon is complete. Once the registraon is complete, a user account is created in
the module FrontEndUsers.
Install the SelfRegistraon module from the list of available modules in the Module
Manager. For the registraon page, create a new content page Register and add the
following Smarty tag into the content of the page:
{SelfRegistration group="Customers"}
Pay aenon to the part in bold in the above code. The value of the parameter group
should exactly reect the name of user group in the module FrontEndUsers (Users &
Groups | Frontend User Management, tab Groups). Please read Chapter 8, Creang Your
Own Funconality to see how the FrontEndUsers module should be congured if you do
not have any user groups so far.
Open the Register page of your website and sign in yourself as a new customer with
the SelfRegistraon module to see how the module works by default. There are some
preferences in the module that can make the registraon process user friendly. In the admin
area of the Self Registraon module (Users & Groups | Self Registraon Module), click on
the Preferences tab.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 9
[ 253 ]
The SelfRegistraon module oers registraon with an e-mail vericaon step or oponally
single-step registraon without any conrmaon. If you do not need the e-mail vericaon,
you should deselect the opon Require the user to conrm registraon via email on the
Preferences tab of the module. The three sengs considering the nal message work
dierent depending on what registraon method you have chosen.
Seng With vericaon Without vericaon
Don't display the
nal message aer
registraon
Prevents the registraon
form to be replaced by the
conrmaon message aer
the form is submied.
Prevents the registraon form to be
replaced by the nal message aer
the form is submied.
PageID/Alias to redirect
to aer registraon is
complete
N/A Redirects to the given page, but
replaces the whole content of the
page with the nal message.
PageID/Alias to redirect
to aer vericaon step
is complete
Redirects to the given page,
but replaces the whole
content of the page with the
nal message.
N/A
According to the workow, let's add a link to the registraon page for the new customers
(step 4). In the billing template of the Orders module, open the template for the Billing Form
again, scroll down and add a link to the registraon page for the new customers as shown in
the following code snippet:
...
{else}
<h1>Already registered?</h1>
{FrontEndUsers}
<h1>New Customer?</h1>
{cms_selflink page="register"}
{/if}
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
E-commerce Workshop
[ 254 ]
Pay aenon to the parameter page. It should contain the alias of the page where the
registraon form is displayed. Customize the Registraon Template 1 of the SelfRegistraon
module that displays the registraon form. Generally, there are two templates. The rst one
is for the registraon form and the second one (Post Registraon Template) contains the
message informing the customer that his registraon should be conrmed through a link
sent to his e-mail address. Other templates that you can customize are as shown in the
following table:
Templates Descripon
Registraon Template 2 This template contains the form where the username, vericaon
code, and password will be added to complete registraon.
Conrmaon Email Contains the subject of the vericaon e-mail, the plain text
and the HTML version of the e-mail sent out aer the customer
has registered.
Final Message The message is shown to customer aer the registraon process
is completed. To build the workow suggested previously (step 5)
add link to the billing form in this template, so that the user can
carry on with the checkout process. It is also advisable to ck the
opon Login user aer registraon, so that the login step can be
skipped aer registraon.
Lost Email This template contains a form for the customers who
have registered but did not get vericaon e-mail. This
template is shown at the place where the Smarty tag
{SelfRegistration mode="sendmoremail"} is shown.
When the user registers with the website and e-mail vericaon is required, the temporary
user account is saved in the SelfRegistraon module (not FrontEndUsers!). Aer e-mail
vericaon is complete, new user account is automacally moved to the FrontEndUsers
module. At the same me the temporary account is deleted from the SelfRegistraon module.
There is a limit of 250 temporary accounts in the SelfRegistraon module. When the
number of 250 non-veried accounts is reached, no registraon is possible. Therefore you
purge from the SelfRegistraon module by using the opon on the Preferences tab.
Aer the module SelfRegistraon is congured and all required templates are customized,
you can go through the whole manual e-mail-based checkout process.
I suggest that you use the workow to test all three cases:
The visitor is registered and logged in
The visitor is registered, but not logged in
The visitor is not registered
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 9
[ 255 ]
I recommend that you customize the nal message in the SelfRegistraon module and add
two links to assist the user in his further steps. Link to the Checkout page to connue the
checkout process and to the Shop page to connue shopping.
Module Paypal Gateway
This module is used by the Orders module to checkout orders using PayPal Website
Payments Standard mechanism. In other words, this module allows the order to be paid
through the PayPal website. This payment opon can be used either addionally to the
manual e-mail-based invoicing delivered with the Orders module or as a substute for
manual processing.
Using this module the customer will be redirected to the PayPal website where the order
and all payment details are displayed. He has to log in to his PayPal account to conrm the
payment. Aer the payment is made, the PayPal will automacally redirect to your website.
There are several ways PayPal returns payment data to you aer the payment is completed.
The Paypal Gateway module supports two methods:
Payment Data Transfer (PDT)
Instant Payment Nocaon (IPN)
PDT is a way to conrm the payment with the redirecon URL from the PayPal website aer
the payment is complete. However, the payment can be conrmed in the Orders module this
way only if the customer is paent and does not close the browser or navigate away before
redirecon is completed. If the redirect breaks for some reasons, you won't know about
the payment and will have to complete the order manually in the admin console of CMS
Made Simple.
IPN is independent of the customer's acon. It communicates with your website in the
backend. If the customer closes the browser or navigates away, you will sll receive
nocaons from PayPal about the payment. IPN also has a built-in retry mechanism. If
there's a problem reaching your website, PayPal will retry to inform you about payments for
several days. IPN works parallel to the order process and can be slightly desynchronized. It is
possible that the customer may return to your page before IPN informs you that the order
is paid.
These two methods can be used together to combine their advantages.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
E-commerce Workshop
[ 256 ]
Install the module Paypal Gateway from the list of the available modules in Module
Manager. The admin area of the module is placed in Extensions | Paypal Gateway.
Click on the Preferences tab. There are some elds that are required for module usage,
which are shown in the following screenshot:
While tesng e-commerce soluons you are naturally not going to use your real PayPal
account. The suggested Paypal URL points to the ocial tesng environment of the
PayPal service. This environment simulates the payment process without making real
money transfers.
This environment can be found on http://sandbox.paypal.com. It acts the same way as
the real PayPal website does.
Time for action – creating test accounts
Before you use this environment, you have to register a developer account on
http://developer.paypal.com and create two test accounts.
1. Open http://developer.paypal.com in your browser and click on
Sign Up Now.
2. Fill in the elds and click Agree and Submit.
3. Log in to your developer account with your e-mail and password.
4. Click on Create a precongured buyer or seller account.
5. Select Buyer (Use to represent your customer's experience) and ll in the eld with
any test data. Click Create Account.
6. Create another account, but this me choose Seller (Use to represent yourself as
the merchant) as the Account type.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 9
[ 257 ]
7. Aer both accounts are created, click on Test accounts on the le hand side. You
should see an overview of the test accounts as shown in the following screenshot:
What just happened?
You have created two test accounts, one for the buyer and one for the seller. The easiest way
to create such accounts is to choose the precongured ones. Now, you can log in with the
buyer account on http://sandbox.paypal.com and act as if you were your own client.
You can purchase anything without having to pay real money.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
E-commerce Workshop
[ 258 ]
You can also log onto http://sandbox.paypal.com with the seller account to congure
it. You have to acvate the PDT and IPN features for the account, get your PDT identy token,
and make some more sengs on your PayPal account, so that instant payment works with
the module PayPal Gateway.
Conguring PayPal's seller account
Click on the Prole link in the seller account. There are four secons that you have to
customize to set up PayPal payment with the website.
Payment Receiving Preferences
First of all, decide if you would like to manually accept payments made in other currencies.
This applies only if the default currency of your PayPal account is dierent to the currency set
in the Products module on the Preferences tab. For example, if your PayPal currency is Euro
but on your webpage you oer the products in USD. Generally, PayPal does not convert any
currency automacally. This means that all payments made in other currencies are on hold
unl you accept them in your PayPal account manually. Once the payment is accepted the
order status is set to Paid. If you would like to convert currencies automacally and accept
payments in any currency, you have to deselect the seng Block payments sent to me in a
currency I do not hold.
Secondly, you can block all payments with the status Pending. This will reject all payments
that are not completed instantly aer the payment conrmaon. Consider that the Paypal
Gateway module is able to handle pending payments if IPN is acvated.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 9
[ 259 ]
Instant Payment Notication
We remember that instant payment nocaon is able to communicate with the website in
the backend. It noes the Orders module about payment, even if the payment was pending
rst and accepted later. All that PayPal needs to know is the nocaon URL. This URL waits
for the instant payment nocaon, handles the answer from the PayPal website and
updates the order status automacally.
This nocaon URL is concealed in the module Paypal Gateway. To get it, perform the
following steps:
Add a product to your cart.
Click on Checkout and ll the billing form.
Click on Submit.
At the boom of the conrmaon page you see the buon Checkout w/Paypal.
Open the source view of this page in your browser and look for the hidden input
eld with the name notification_url that looks like the following code snippet:
<input name="notify_url" value="http://yourdomain.com/index.php?
mact=PaypalGateway,cntnt01,ipn,0&amp;cntnt01order_id=15&amp;cntnt0
1mycustom=05db2efd49ce4195d97efe01d4df00f4&amp;cntnt01returnid=59"
type="hidden">
6. You have to copy the value of the eld and paste this URL to the PayPal
merchant account.
7. Click on Instant Payment Nocaon in the Prole of the seller account in PayPal
and edit the IPN Sengs. Enter the nocaon URL you have copied from the
hidden eld above and click on Receive IPN messages (Enabled). Save the sengs.
Website Payment Preferences
Click the Website Payment Preferences link, turn on the Auto-Return opon, and enter any
URL of your website in the eld Return URL. It does not maer what you enter here as this
URL will be overridden by the Paypal Gateway module. Then turn on Payment Data Transfer
and save.
Pay aenon to the yellow informaon message at the top of the PayPal website aer you
have changed the above seng:
You have successfully saved your preferences. Please use the following
identy token when seng up Payment Data Transfer on your website.
XXXXXXXXXXXXXXXXXXXXXXXX-XXXXXXXXXXXXXXXXXXXX
1.
2.
3.
4.
5.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
E-commerce Workshop
[ 260 ]
This is your generated PDT identy token that you need to save in the Paypal Gateway
module on the Preferences tab.
Language encoding
On this page you should adjust the language encoding. CMS Made Simple uses UTF-8
encoding by default. Click on the More Opons buon and select UTF-8 in the Encoding
eld. Leave the same encoding for IPN and save.
Now you have all the informaon required to congure the Paypal Gateway module. In the
admin area of the Paypal Gateway module, click on the Preferences tab and enter your
custom values gained from PayPal sandbox environment. The Business Email eld in the
Paypal Gateway module contains the generated e-mail address of the seller account. The
following screenshot shows my custom values:
Next, connect the Orders module with the Paypal Gateway module. In the admin area of
the Orders module, click on the Preferences tab and scroll down to the Payment Gateway
Sengs secon. Choose the Paypal Gateway module in the list of payment modules and
click Submit.
Test your order process now. Pay aenon to the Email eld in the billing form, it must be
lled in for the PayPal payment. Aer the payment is made, you have to control the payment
status in the seller PayPal account. It should be completed. In the admin console of CMS
Made Simple, click on Site Admin | Admin Log and see the communicaon protocol with the
PayPal website. For each order completed with PDT and IPN you should have ve messages,
as shown in the next screenshot:
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 9
[ 261 ]
The reason for the order being pending is the acvated IPN feature. The module sets the
order to pending status unl the IPN message is received from the module. So, the result
of these ve messages above is a completed and paid order in the admin console of CMS
Made Simple.
Once you have tested the module, you should congure your real PayPal account as
explained previously, gather all required informaon like PDT identy token from the real
account, and change the PayPal URL to https://www.paypal.com/cgi-bin/webscr.
Optional modules for the e-commerce suite
There are some more modules that you can use together with this e-commerce suite to
enrich the funconality:
Flat Rate Taxes: Allows you to apply at rate taxes to any or all products in the
module Products.
warehouse taxes: Calculates taxes for a product based on the US state the
warehouse is in, and the US state the customer is situated.
FlatRateShipping: Provides an interface to set up some simple weight shipping rules,
and to calculate the cost of shipping based on its total weight.
Desnaon Based Shipping: Allows the calculaon of at shipping costs based
on desnaon country, and number of items. It does not consider weight in
calculaons.
PriceBasedShipping: Allows the calculaon of shipping costs based on the pre-tax
total order price.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
E-commerce Workshop
[ 262 ]
Promoons: Allows you to create and manage promoons/sales in the order
process. A sale will consist of a start date, end date, a discount or oer, and a set
of condions. Condions can include total order amount, coupon code, subset of
products based on category or hierarchy or user group. Oers can be a percentage
o the total order price or a product item, a x amount reduced from total order
price, or a free product given with the order. Discounts will be applied in the order
process and shown up as a line item in the invoice.
GiBaskets: This module is another Cart module for the e-commerce suite. You
can use it instead of the standard Cart module. This module allows the creaon of
many dierent gi baskets, with dierent shipping addresses, and allows you to add
dierent items in each.
EMoney Payment Gateway: This is a payment processing gateway
module which works with the ETS Corporaon payment authorizaon system
(https://www.etsms.com/ASP/home.htm).
Authorize.Net AIM: A payment gateway that interacts directly with Authorize.net
using their AIM protocol.
Aachments: This module requires some programming knowledge to create
funconality like related products, so that you can aach some products to others
and display them as related products on the detailed view of the product.
Pop quiz – e-commerce workshop
1. CMS Made Simple is a content management system and cannot be used as e-
commerce soluon.
a. True
b. False
2. The Products module allows you to …
a. Manage products on the website
b. Add order funconality to the website
c. Create customer accounts and track their orders
3. To track the orders in the admin console of CMS Made Simple, you need
the module:
a. Cataloger
b. Orders
c. Users
d. Paypal Gateway
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 9
[ 263 ]
4. If you would like to test PayPal funconality on your website, you can use a so called
sandbox environment. What is true about the PayPal sandbox?
a. It charges your real PayPal account.
b. It can be used to create a seller account for tesng purposes.
c. It can operate only with USD as currency.
d. It is not free
5. E-commerce soluon described in this chapter requires that the customer creates an
account before purchasing:
a. True
b. False
Summary
In this chapter, you learned how to set up basic e-commerce funconality with CMS Made
Simple. Even if CMS Made Simple does not pretend to oer fully sophiscated e-commerce
features, it oers the most wanted features with delivered modules.
Be sure that you do not use CMS Made Simple for pure e-commerce websites. It is beer
to use a dedicated e-commerce soluon for an online shop rather than CMS Made Simple.
However, if your website has a mix of features such as a blog, a shop, a forum, and so on,
then you can use third-party modules to implement these features.
Specically, we covered:
The Products module that allows you to create and edit products for the online
shop. This module is a basis for the e-commerce suite.
The Cart module that adds simple cart funconality to the Products module. It
saves its data in the browser session and connects the module Product with the
module Orders.
The Orders module that starts the checkout process for the items added to the cart.
This module saves all orders in the admin area and allows tracking and updang
order status for the administrator of the website.
The SelfRegistraon module that allows your website's visitors to register with your
website before making payment. We have also created a small workow to see how
the module is integrated in the checkout process.
The PayPal Gateway module that accepts instant payments from the PayPal website
and keeps you informed about the status of the payment.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
E-commerce Workshop
[ 264 ]
Now that we've learned how to realize a complete website including e-commerce
funconality, we're ready to proceed with advanced topics that require basic PHP
knowledge, which is the subject of the next chapter. By this me your website is fully
funconal and can be published, so that you do not need any extended topics from the
next chapter to have a complete website.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
10
Advanced Use of CMS Made Simple
This chapter includes some ps for advanced webmasters who are creang
websites with CMS Made Simple. You do not need to read the enre chapter;
you can just pick up the secons that are most important to you.
In this chapter, we will:
Learn how to develop mullingual websites with CMS Made Simple
Create addional layout control possibilies for the editors of the website
Make some search engine opmizaons
Work with user-dened tags and the event manager to implement our own
funconality or dene custom workows
You will need basic PHP knowledge to follow instrucons in this chapter. So let's get
on with it.
Localization and translation
The admin console of CMS Made Simple is translated in over 20 languages. As you already
know from Chapter 2, CMS Made Simple is distributed in two versions. The base version
contains just the English language les, while the full version includes all language les.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Advanced Use of CMS Made Simple
[ 266 ]
If you need only one language in addion to English (English cannot be uninstalled), you
can download the base package and then the required language les. Language les can be
found on the ocial CMS Made Simple website (http://www.cmsmadesimple.org/),
in the Downloads | CMSMS Release secon at the boom of the page (you will only need
the le corresponding to your release). To include any language in the base installaon,
download and unpack the base installaon le rst, then download the required language
le corresponding to the base release number and unpack it as well. Merge the contents of
the base folder with the contents of the language le folder by copying the language folder
over the base les. Then install CMS Made Simple as usual.
Users with access to the admin console of the website can select their preferred language
in their personal accounts (My Preferences | User Preferences). For the base installaon,
only English is shown in the eld. If you have installed any addional language, then it will
be shown in the drop-down eld Language as well. This seng does not aect the website
language used for visitors to the website.
To set up the website language, in the admin console, click on Site Admin | Global Sengs,
and change the Default language for the frontend. If no language is set there, then CMS
Made Simple uses English as the default language (en_US). This seng will automacally
change the default text for some modules on the website, for example, the label of the
search buon in the Search module or some labels in the News module.
English German
In the preceding screenshot, see the dierence between the labels for Category (Kategorie
in German), Posted by (Erstellt von in German), and so on. This will help to dene most
labels displayed by the modules that are translated into your language. However, this would
only help if your website is not mullingual and uses only one language.
Conguring dates
From me to me, CMS Made Simple must output dates and mes. Especially, for news
arcles, the proper date format is important.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 10
[ 267 ]
The general date format can be changed in the admin console (Site Admin | Global Sengs)
in the eld Date Format String. The date format should be entered according to the PHP
format funcon strftime (http://www.php.net/manual/en/function.strftime.
php). There are some examples shown in the following table:
Date format string Output
%Y-%m-%d
2009-05-20
%a %d %b %Y
Wed 20 May 2009
%a %d %b %H:%M:%S %Y
Wed 20 May 15:53:40 2009
The rst column is built according to allowed parameters (please see the last link for an
explanaon). The second column shows the result on the page. Enter parameters from the
rst column in the Date Format String eld to get the results shown in the second column.
The month and weekday names depend on the locale seng of your server. On some
servers, you can change the language used to output dates. Seng the locale will also aect
currency, decimal separators, and other outputs dependent on the language. In CMS Made
Simple, open the config.php le and nd the line with $config['locale']. It depends
on your server, what value you enter here. For German month names on a Linux server, try
changing the line as shown:
$config['locale'] = 'de_DE.UTF8';
Making multilingual websites
Mullingual websites are created in more than one language. Every language has its own
translated navigaon, content, and probably translated news arcles. We do not speak about
automac translaon of the websites that are made by Google or any other tool. Automac
translaons are awful. They are oen not readable by human beings and make no sense. In
this secon, you will learn how to create a real mullingual website where the enre content
is translated by human translators.
You can use the Babel module to manage mulple languages for the website and
navigaon. Install the module the same way you install other modules for your website
(Extensions | Module Manager).
Aer installaon of the module, set up the page structure for the website to suit your
desired languages, for example:
1. English
1.1. Our company
1.2. Announcements
1.3. Contact Us
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Advanced Use of CMS Made Simple
[ 268 ]
2. German
2.1. Unternehmen
2.2. Aktuelles
2.3. Kontakt
The root language pages (1. and 2.) should be dened as pages with the content type
Secon Headers. You can give them any tle you want. For the page alias, I suggest using
the two-leer ISO 639-1 code system such as en (for English), de (for German), and fr (for
French). The page alias will be used in the website URL like http://www.yourdomain/en/
our-company or http://www.yourdomain/de/kontakt.
In order to display the menu correctly (that is, not to display language header pages and
pages belonging to other languages), you have to add the parameter start_level="2"
to your top menu tag in the main template (Layout | Templates). Open the template, and
adjust your top navigaon, as shown in the following code snippet:
{menu number_of_levels="1" start_level="2"}
This would ensure that only second level pages belonging to the selected language are
displayed in the top navigaon. If you use the sidebar navigaon, you should change
the number of levels here as well by reducing the number of the start level:
{menu start_level="3"}
When the page structure is created, click on Extensions | Babel: Mullingual site in the
admin console. For each language you have integrated in the page structure, click on the link
Add Language, and enter the appropriate informaon, as shown in the following screenshot:
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 10
[ 269 ]
The Root page associated with the language should be one of the secon headers you have
created for each language. The Default page for redirecon to this language should be
the start page for each language (not the secon header from the preceding eld). For the
Language code, you can use any ve character code, but in order to provide good compability
with the modules, you should use the same language codes as CMS Made Simple. Use the
drop-down list on the top-right of the admin area to prell the form with default values.
Click Submit, and be sure that you have acvated the language in the Acve column. Add all
desired languages the same way.
To display a language menu, use the following tag in the main template at the place where
the links to dierent languages should be displayed:
{babel action="menu"}
Editing language entries
In the admin area of the Babel module, you will nd a link for eding the language entries
for each language. Language entries are strings that exist for each language but hold
dierent text (or HTML code). For the label of the search buon in the Search module,
you would denitely like to have dierent descripons such as:
Search for English
Suche for German
Recherche for French, and so on.
Open the Babel: Mullingual Site module in the admin console, and click on the Edit
language entries link. Click on the Add a new language entry link at the top-right corner of
the module's admin area. This is the place where you can dene your personal translaon
for each language. The entry name is a general key that will be used to get the right
translaon. In our example, we would like to translate the label of the search buon, so the
key for the translaon can be search buon. In the elds below, enter the translaon for
each dened language, and click on Submit.
Customize the label for the search buon in the template of the module Search (Extensions
| Search, tab Search Template), and replace the tag {$submittext} with {babel
show="search button"}, as shown in the following code snippet:
{$startform}
<input type="text" class="search-input"
id="{$search_actionid}searchinput"
name="{$search_actionid}searchinput" size="18" maxlength="50"
value="{$searchtext}" {$hogan}/>
<input class="search-button" name="submit" value="{babel show="search
button"}" type="submit" />
{if isset($hidden)}{$hidden}{/if}
{$endform}
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Advanced Use of CMS Made Simple
[ 270 ]
This would show the proper label translaon on the search buon considering the currently
selected language. You can replace the variable {$searchtext} the same way. Create a
new language entry in the Babel module for the search text, translate it, and then replace
the variable {$searchtext} in the search template with the corresponding tag {babel
show="[KEY]"}.
The hierarchy solution
The Babel module uses the page hierarchy to know which page is equivalent in other
languages. In our example, the page 2.2. Aktuelles is the German equivalent of the English
page 1.2. Announcements, as it has the same posion in the hierarchy of the German branch.
In other words, should the pages in other language be ordered dierently, all would be
messed up.
1. English
1.1. Our company
1.2. Announcements
1.3. Contact Us
2. German
2.1. Aktuelles
2.2. Unternehmen
2.3. Kontakt
In this example, the Aktuelles page has the rst posion within the German branch, so it is
the equivalent of the rst page in English, even if it is not logically.
The page structure must be idencal for each language. This means that all pages must be
an equivalent in other languages or the link to the other language will not be shown in the
language menu on this specic page. If your structure is not idencal and some pages are
not translated, then use the method displayed below.
Adding ags as the language menu
You can add small ag images for each language on your website. Free images can be
downloaded from http://www.famfamfam.com/lab/icons/flags/. Upload the
required images into the folder /uploads/flags/. In the main page template (Layout |
Templates), insert links to the start pages of each language as small ag icons, as shown in
the following code snippet:
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 10
[ 271 ]
{cms_selflink page="our-company" image="uploads/flags/lang_en.gif"
alt="English" imageonly=1}
{cms_selflink page="unternehmen" image="uploads/flags/lang_de.gif"
alt="Deutsch" imageonly=1}
{cms_selflink page="enterprises" image="uploads/flags/lang_fr.gif"
alt="Français" imageonly=1}
You can replace the tag {babel action="menu"} with the last code snippet. In this case,
you do not need to have the same structure for each language. However, the above ags
always point to the start page of another language and not to the page equivalent in the
other language, whether it exists or not.
Separate news articles by language
In our example, not only the labels must be translated. In the page templates, we show
news arcles on each page. It does not make sense to display news arcles in English to
the German visitors of the website and vice versa. It would be beer to separate the news
automacally by language.
The easiest way is to create new categories in the News module and to change them
depending on the language. With the Babel module, a new Smarty variable $page_lang
is added to each page, so you can create Smarty condions with this variable as follows:
{if $page_lang == "en_US"}
{news category="General" number="5"}
{elseif $page_lang == "de_DE"}
{news category="Allgemein" number="5"}
{/if}
The last code snippet assumes that two news categories were created, namely, General and
Allgemein. Depending on the language the visitors choose, the news arcles from only one
or another category is shown in the template. The editor of the news only needs to choose
the right category while adding news arcles in the admin console.
Use the language entries of the Babel module to replace language strings such
as Category and Posted by in the news templates according to the currently
displayed language.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Advanced Use of CMS Made Simple
[ 272 ]
CMS Made Simple translation center
Translaons for CMS Made Simple, core modules, and third-party modules are made in the
Translaon Center, which is the ocial translaon tool for modules and for the core CMS
Made Simple. All translaons are made by the users of CMS Made Simple and everyone can
parcipate in translaon projects by placing a request to join the project in the CMS Made
Simple Forge (http://dev.cmsmadesimple.org). Register with CMS Made Simple Forge,
search for the language in queson, and click on the Request to Join Project link or contact
one of the Project Admins.
When your applicaon is approved, you can enter the Translaon Center
(http://translations.cmsmadesimple.org). You will see your language on
the rst screen. Click on it, and you will nd a list of modules on the le-hand side.
Choose the module that you would like to translate, and a new page will be opened
where translaons can be made. You do not need any special knowledge to take part.
An example for the Russian Translaon Center is as shown in the following screenshot:
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 10
[ 273 ]
On the le-hand side, you see English words and phrases that have to be translated.
Translaons are made on the right-hand side of the window. If the translaon has not been
made, then both columns are idencal and contain English. You can replace the English text
in the right column by the translaon into your language and submit. That's all! The more
the users parcipate in translaons, the beer the translaon will be.
If you want to parcipate and your language doesn't exist in the Forge, create a
project and inform the CMS Made Simple Forge admin, then the language will be
added to the Translaon Center.
The translaons made here will be available to all users with the next release of CMS
Made Simple or with the next release of the core or third-party modules. If you need the
translaon right now or if you would just like to customize the exisng language to your
needs, then you have to add or change the language les manually on your server.
Translating modules in your installation
Language les for the modules are always saved in the same folder /modules/MODULE_
NAME/lang/ext. Only the default English translaon is placed directly in modules/
MODULE_NAME/lang in the le en_US.php. Open the le to see how it is organized.
All language les are built the same way for each language. They consist of a single PHP
array $lang.
$lang['key'] = 'Custom language translation';
Search for the le with the required language in /modules/MODULE_NAME/lang/ext,
and open it for eding. If the le is not there, then it means that the module has not been
translated yet. In this case, you can just copy the le en_US.php into the folder /modules/
MODULE_NAME/lang/ext and rename it to the language you need. For German, you would
name the le de_DE.php, for French fr_FR.php, and so on.
The le can be edited with a simple text editor like Notepad or WordPad. However, this way
of translaon requires some basic PHP knowledge. Be aware that the custom changes made
in these les may be overwrien with the next release of the module or CMS Made Simple,
so be sure that you create a backup le with the changes made somewhere apart from your
installaon.
Let's see how you can translate your own module, BWProducts (created in Chapter 8,
Creang Your Own Funconality with CTLMakerModule), into other languages.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Advanced Use of CMS Made Simple
[ 274 ]
Time for action – custom translation of the module
You have created a new module and need a German translaon for it.
1. With an FTP browser of your choice, for example, FileZilla, connect to your web
hosng.
2. In the modules folder, look for the folder that contains your module; in our
example, it is bwproducts.
3. Download the le en_US.php from the folder modules/bwproducts/lang to
your local disk.
4. Rename the le to de_DE.php, and make your translaon with any text editor.
5. Upload the translated le de_DE.php to the folder
modules/bwproducts/lang/ext.
What just happened?
The language of the module is taken from the global sengs of the website (Site Admin |
Global Sengs, eld Default language for the frontend). If the language le for the module
is not found, then CMS Made Simple will automacally use the le en_US.php.
You have created a new le for your language, renamed it according to the ISO language
naming convenons, translated it into your language, and uploaded it to the right folder.
That's it. You do not need to translate everything in the le. Set your custom translaon to
some keys and see how the translaons are overtaken in the module.
In the same way, you can adjust exisng language les if you like.
Additional content and controls for editors
Oen websites are edited by people who are not well-versed in HTML. However, you
would like to give them as much control as possible, even if they do not have any special
knowledge. There are some concepts in CMS Made Simple that help you and your editors.
You can add more than one content block to the website if your layout requires physical
separaon of the content on one page. And you can use page aributes to give editors
more control over the layout and the style of the website as well.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 10
[ 275 ]
Additional content blocks
A page can have one or more content areas or content blocks. The rst one must be
{content}, otherwise there will not be any content area for the editors in the admin
console. To add more content blocks to your template, use the Smarty tag {content
block="block name"}. This block will appear as a text area when you edit a page,
and its content will be shown at the same place when the page is displayed to the visitor.
You can also make a content block with only one line, instead of a full text area, by using the
parameter oneline=true.
Time for action – adding a content block for subtitles
Let's see how you can dene an addional content block for subtles.
1. Open the main template of your website (Layout | Templates).
2. Add the following code between the tle and content of your page:
<h1>{title}</h1>
<h2>{content block="Subtitle" oneline="true" wysiwyg="false"}</h2>
{content}
3. Open any page based on this template (Content | Pages), and nd the Subtle eld
above the Content eld.
4. Enter the subtle, save the page, and view the page in the browser. You should see
the text entered as a subtle below the page tle.
What just happened?
You have added an addional content block to the template. In this way, the editor of
the page can enter structured data that is exactly placed in the template. The tag for the
addional content block is shown as an input eld in the admin console, and its content is
displayed on the website at the place where it is dened in the main template.
You can read about more parameters in the Help secon for the tag {content} in the
admin console (Extensions | Tags).
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Advanced Use of CMS Made Simple
[ 276 ]
Extra page attribute
Another way to give more control over the layout of the page to the editor without any
special knowledge is using extra page aributes. When you open any page for eding, you
will nd three elds on the Opons tab, which are as follows:
1. Extra Page Aribute 1
2. Extra Page Aribute 2
3. Extra Page Aribute 3
These elds can hold any informaon and can be evaluated and used in templates. For
example, if you would like to hide the news summary on some pages, you can use one of
these elds, ll it with dened values, and then check the eld value in the template.
Time for action – using extra page attributes
Let's see how you can hide the news summary on the Contact Us page.
1. Open the Contact Us page (Content | Pages) for eding.
2. Switch to the Opons tab, and enter nonews into the eld Extra Page Aribute 1.
3. Save the page.
4. Now in the admin console, open your main template (Layout | Templates).
5. Find the Smarty tag {news}, and add an IF funcon as shown:
{if $node->extra1 != "nonews"}
{news ...}
{/if}
6. Check the Contact Us page to see the changes.
What just happened?
Extra page aributes are a simple way to give addional control over the layout of the
website to the editor of the website. He should only know what he must enter into the eld
Extra Page Aribute 1. In the template, you evaluate whether any value is saved in the eld
and control what content should be shown or not on this specic page.
The values entered in the extra page aributes can be retrieved in the template with
$node->extra1, $node->extra2, and $node->extra3.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 10
[ 277 ]
The elds can also be used to display any addional informaon on the website like the
arcle author or anything else that you would like to handle in your template separately
from the main content. In this case, you can use the following Smarty tag:
{page_attr key="extra1"}
Search engine optimization (SEO)
Nowadays, it is not enough to have a website alone. Even the most beauful and useful page
is meaningless, if it cannot be found in search engines. And just being present in the search
engines does not answer a purpose of geng new customers. You should care about the
ranking (the place) your page has in the search results, when the most important key words
or phrases represenng your business are entered.
In this secon, you will nd important informaon that will help you to improve your search
ranking and get the most from your website.
Before you start to opmize your website made with CMS Made Simple, you should know
that search engines are greedy for any kind of text on your website. They are not interested
in CSS, JavaScript, or any other beauful technology. The most important point to start with
is wring good unique content. If you copy content from other pages, you will not succeed.
Having unique content is the key for search engine opmizaon. Unique content is also very
important for the visitors of your website. The more interesng the content, the higher is the
possibility that the visitor will turn to a customer and the visitor may probably recommend
your website to other people.
Title of your website
The most important part of your website in the eyes of a search engine is the tle of the
page. It is the text that is found between the HTML tags title. In Chapter 4, Design and
Layout, you had created a new template and had added the tle, as shown in the following
code snippet:
<head>
<title>{title}- {sitename}</title>
The Smarty tag {title} is exactly what you enter in the eld Title while creang or eding
the page. The tle must be short enough (not more than 70 characters) and should include
search keywords and phrases that match this parcular page (not the enre website). The
tle should be unique for every page that you create in your website.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Advanced Use of CMS Made Simple
[ 278 ]
This last requirement is easy to follow with content pages, but what about generated pages
like news arcles or products? If you examine the URLs of the detailed view of news, you will
see that that the tle does not match the news arcle, but holds the tle of the page where
it is displayed.
You can customize the tle of the generated pages with a simple trick. In the admin console,
click on Content | News, and choose the tab Detail Templates. Open the template for edit,
and at the very top of the template, add the following line of code:
{assign var="pagetitle" value=$entry->title|escape:'html':'utf-8'}
This line will generate the Smarty variable $pagetitle that contains the tle of the news
arcle. To add the customized tle to the main template, open it (Layout | Templates), and
replace the enre HTML tle tag with the following code snippet:
{if isset($pagetitle) && !empty($pagetitle)}
<title>{sitename} - {$pagetitle}</title>
{else}
<title>{sitename} - {title}</title>
{/if}
This piece of code checks if the Smarty variable $pagetitle is dened and is not empty.
If so, then the news tle is used within the HTML tag tle. If not, then the normal page
tle is taken. You should ensure that the very rst line in your main template contains the
following line:
{process_pagedata}
Without this line, the trick will not work. In this way, the tle of every generated page can be
changed. From now on, you should customize the detail templates of each module, and add
the following line of code at the very top of the module's detail template:
{assign var="pagetitle" value=PAGE_TITLE}
Replace PAGE_TITLE with the Smarty variable that contains the desired page tle. In the
News module, this was $entry->title. In the modules created with CTLModuleMaker,
the line will look like:
{assign var="pagetitle" value=$item->name}
Dierent tles on every page of your website are very important for the search engine
opmizaon. They are also important for the visitors of your website, as the tle of the page
is used on the browser tab and as a descripon of the website when the visitor adds the
page to their favorite links or bookmarks it.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 10
[ 279 ]
Meta tags
Meta tags used to be a very important part of the search engine opmizaon. Nowadays, the
only important tag is the meta tag for descripon:
<meta name="description" content="Find the best tips on this website"
/>
Descripon meta tags must include a readable descripon of the actual page (not of the
whole website). It can contain any words or sentences and is displayed in search engines
below the page tle in the search results.
The descripon has to be aracve to the visitor, encouraging him to visit your website and
not the one above or below yours in the search results.
There are two places where you can add meta tags to your website. In the admin console
(Site Admin | Global sengs, eld Global Metadata), you add meta tags that will appear
on every page. Be careful! Do not add a meta tag for the descripon here. This tag must be
unique for every page if you would like to achieve the best search engine ranking.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Advanced Use of CMS Made Simple
[ 280 ]
To add a specic descripon to one page, open the page for eding in the admin console
(Content | Pages), and switch to the Opons tab. Add the descripon meta tag into the eld
Page Specic Metadata, the same way you would do it in plain HTML.
Do not copy the same meta tag to every page, it does not make any sense for search engine
opmizaon. The descripon meta tag should be dierent in every page.
The method just described is suitable for editors with some basic HTML knowledge.
However, if the editor of your website does not have any HTML knowledge, you beer give
him a special eld where the descripon of the page can be added and then automacally
pasted into the template at the right place.
Open your main template (Layout | Templates). Add the following line of code into the head
secon of the template, right below the Smarty tag {metadata}:
<meta name="description" content="{description}" />
Then, open any page for eding, and switch to the Opons tab, ll in the descripon of the
website in the eld Descripon (tle aribute), and the meta tag will be generated the
right way.
If you have a lot of pages and would like to have a descripon generated automacally,
then you can also use the special third-party tag called autometa (http://dev.
cmsmadesimple.org/projects/autometa). This tag creates meta tags for keywords and
descripons on the y, if they are not found in the page metadata eld. Keywords are taken
from the Search module, which should be installed. The meta tag descripon includes the
rst characters of the page content.
Meta tag keywords
There is a discussion on the use of meta tag keywords sll being important or not. I do not
add any keywords to my websites anymore, as I cannot see any dierence in the ranking of
websites with or without keywords. However, they cannot do any harm, and if you would
like to use meta keywords, then add the following lines in the head of your main template
(Layout | Templates), below the Smarty tag {metadata}:
<meta name="keywords" content="{content block='Keywords'
oneline='true' wysiwyg='false'}" />
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 10
[ 281 ]
This code uses addional content blocks described in the previous secon, and adds a new
eld named Keywords to the page eding window in the admin console. The eld can then
be lled by the editor of the website and will be automacally placed at the right place in
your template.
Using SEO markup in templates
This is not really a CMS Made Simple trick. However, this p is very important for search
engine opmizaon. Use the HTML tag <h1> in your template, and pay aenon to the
words you use in your tle. The best way is to place the tle of every page within an <h1>
tag in your main template, as shown in the following code snippet:
<h1>{title}</h1>
{content}
Do not use any other HTML tag for the tle, as the search engine will not pay enough
aenon to tles formaed like:
<div class="title">{title}</div>
{content}
Use words and search phrases that are relevant and important for your business in <h1>
tags, especially on the start page. If you use a tle like Welcome! on the start page, then you
say to the search engine that the word Welcome is extremely important for your business.
You see, that does not make sense, as you would not like to be found if someone searches
for Welcome, but for the products or services you oer.
Use headings in the module templates as well, for example, for the detailed view of news
arcle. The best way is to place the news tle in <h1> or <h2> tags as well:
<h1>{entry->title}</h1>
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Advanced Use of CMS Made Simple
[ 282 ]
It is recommended that you have at least one <h1> tag and some <h2>-<h6> tags in one
page. In the WYSIWYG editor, you can use the format drop-down to automacally select
headings 1 to 6, as shown in the following screenshot:
Using SEO markup in pages
While wring content for your website, use HTML strong tags to emphasize words or
phrases relevant to your business, products, or services. The more text you have, the beer
for search engines. However, a search engine does not use any logic and is not human. If it
sees 800 words on the page, it can not dierenate between important and unimportant
words. To help it idenfy, place important words in between strong tags. But do not use a
lot of them. One per paragraph is more than enough; do not exaggerate, as it would harm
your search engine ranking rather than help. In the WYSIWYG editor, you can use the B
buon to format anything in strong tags:
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 10
[ 283 ]
Use internal links in your text to other pages. It means, link your own pages if it makes sense.
You should link search words and phrases instead of phrases like click here.
When adding images to your website, never forget to ll in the HTML aributes alt and
title. Search engines use these aributes for nding and matching pictures in the special
image search. With a WYSIWYG editor, the two elds are shown right below the Image
URL tag:
Using keywords in page alias and image les
Using keywords in page aliases that are used to create unique URLs for the website is a
simple way to improve its search ranking. A page alias is generated by default from the tle
of the page, but you can change it aerwards. In the admin console, open any page for
eding, and switch to the Opons tab. Find the Page Alias eld, and change it to suit
your desired search words or phrases.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Advanced Use of CMS Made Simple
[ 284 ]
Do not change the alias oen, especially if the page is already linked to other
websites. If you change the alias, the page will not be found. If you sll need
to change the alias of a good linked page, without losing references, change it.
Then create a new page with the content type Internal Page Link, give the page
the old alias, and choose as the desnaon the page with the new alias. Do not
show this page in the menu. The old link will sll work and redirect the user to
the new page alias.
It is also beer to use search keywords in the names of the image les.
Search engine friendly URLs
Search engine friendly URLs are website addresses that do not contain any dynamic
components in them, and thus are beer readable for humans and search engines. Compare
the following two URLs:
http://youdomain.com/index.php?page=products
http://yourdomain.com/products
Which is beer? A search engine will nd the second version more aracve and will beer
index your website. Some pages with query strings in the address (as in the rst example) are
never indexed, while some will take longer to be indexed. Aer seng up your website with
CMS Made Simple, you will nd that the URLs of your pages are built in the rst way. We
should rewrite them to achieve beer results with the website.
The search engine friendly URLs are also beer readable by people. If you do not care about
the search engines, then think about the visitors of the website. How easy is it to type or
write down the address of the specic page if we do not use the second rewrien version?
Imagine your visitor would like to recommend the page. He/she would do it without any
dicules with search engine friendly URL and may fail with the rst example.
Time for action – turning on search engine friendly URLs
Let's see how search engine friendly URLs can be enabled in CMS Made Simple.
1. Open an FTP browser of your choice (for example, FileZilla), and nd the folder doc
in your installaon.
2. Copy the htaccess.txt le from the doc folder into the root directory of your
CMSMS website (at the same level as the config.php le).
3. Rename the le htaccess.txt to .htaccess (pay aenon to the period at the
front of the lename).
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 10
[ 285 ]
4. In the next step, open the config.php le for eding, and nd the secon
URL Sengs.
5. Change the line for rewring URLs, as shown:
$config['url_rewriting'] = 'mod_rewrite';
6. Open your website, and see how the links in the navigaon look. They should be
search engine friendly now.
What just happened?
To enable search engine friendly URLs on your website, you had to complete two steps. In
the rst step, you moved the le htaccess.txt into the root directory of your website.
You then renamed the moved le to .htaccess (period at the beginning belongs to the
lename). .htaccess is the name of a conguraon le that allows you to control the web
server. The le is placed in the root directory and overrides some of the default sengs of
your server.
The default htaccess.txt is suitable for most servers. However, somemes you
may encounter dicules. For example, not all web hosng providers accept the
following seng:
Options +FollowSymLinks
In this case, you will get an error 500 (internal server error) aer turning on search engine
friendly URLs. To solve the issue, comment out the following opon as shown:
# Options +FollowSymLinks
If your website is placed in a subfolder, like http://www.yourdomain.com/folder, then
you have to adjust the .htaccess le. Find the line RewriteBase /, and change it to the
name of the folder where your website is placed. In our example, it would be:
RewriteBase /folder
In the second step, you modied the le config.php. With these changes, you have told
CMS Made Simple that .htaccess is placed in the root directory, and you are going to use
these new sengs to rewrite URLs.
With CMS Made Simple, you can even simulate a stac address like http://www.
yourdomain.com/products.html. In this case, the address of the pages will look like
stac HTML les. Open config.php, and nd the line $config['page_extension'] =
'';. If you change it to $config['page_extension'] = 'html';, then all URLs of your
website will look like stac HTML pages.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Advanced Use of CMS Made Simple
[ 286 ]
If you sll get an internal server error (error 500), please check the following known issues:
Your hosng company does not support mod_rewrite. Ask your provider if the
module mod_rewrite is available on your web hosng.
You have installed CMS into a subdirectory, for example, http://yourdomain.
com/mycms. In this case, you have to edit the .htaccess le, and replace the line
RewriteBase / with RewriteBase /mycms (change the name aer the slash to
your subdirectory).
Avoiding duplicate content
Duplicate content refers to the pages whose content completely matches other pages.
Normally, you do not create such pages consciously. However, there are some examples
for non-malicious duplicate content:
Printer-only version of the page
Pages that are linked using mulple URLs
Mobile versions of the website, and so on.
CMS websites with generated pages are extremely vulnerable to being penalized by search
engines for duplicate content.
Google says: As a result, the ranking of the site may suer, or the site might be
removed enrely from the Google index, in which case, it will no longer appear
in the search results.
There are some steps you can take to prevent duplicate content issues that have been
described in the following secons.
Consequently use domain with www or without www
Normally, your website can be reached at http://yourdomain.com or http://www.
yourdomain.com. Even if the same content is shown on both addresses, it is technically
possible to serve dierent contents on both addresses. Search engines know it, and can skip
your website from the index if both versions are reachable and serve the same content.
First of all, decide what your preferred domain version is. Then check what address has been
given during the installaon of your website. Open the le config.php in your FTP browser,
and search for the following line:
$config['root_url'] = 'http://yourdomain.com';
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 10
[ 287 ]
Adjust the line to your preferred domain version if it does not match, and save the le on
your web hosng. In the next step, open the le .htaccess, and add the marked lines as
shown in the following code snippet, if your preferred domain name includes www:
RewriteEngine on
RewriteBase /
# Redirect to canonical domain name with www
RewriteCond %{HTTP_HOST} ^yourdomain\.com$ [NC]
RewriteRule ^(.*) http://www.yourdomain.com/$1 [L,R=301]
In the other case (your preferred domain name is without www), add the lines as shown in
the following code snippet:
RewriteEngine on
RewriteBase /
# Redirect to canonical domain name without www
RewriteCond %{HTTP_HOST} ^www\.yourdomain\.com$ [NC]
RewriteRule ^(.*) http://yourdomain.com/$1 [L,R=301]
Now, all links in your website navigaon should point to the correct version. If you enter
a wrong version in the address bar of the website, it would immediately redirect to the
right one.
Avoid publishing of print versions of your pages
If you use the Prinng module on your website to oer a printer friendly version of your
content, then you should block it from search engines.
In the admin console, click on Extensions | Prinng, and click on the Print template tab. Add
the following meta tags to the head secon of the template:
<meta name="robots" content="noindex,nofollow" />
This meta tag can control the behavior of search engine crawling and indexing and applies to
all search engines. noindex prevents the page from being indexed, and nofollow prevents
the search engine from following links from this page.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Advanced Use of CMS Made Simple
[ 288 ]
Use tag for canonical URLs
If you use search engine friendly URLs, then the pages of your website are available through
dierent URLs. Say you have a page called FAQ placed under the page Client Center. This
page can be accessed through three dierent URLs:
http://www.yourdomain.com/client-center/faq
http://www.yourdomain.com/index.php?page=faq
http://www.yourdomain.com/faq
All these URLs actually call the same page. How can we inform the search engine that there
is only one "main" URL that should be considered? There is a link tag, which can be placed in
the head secon of HTML:
<link rel="canonical" href="http://www.yourdomain.com/client-
center/faq">
This tag tells the search engine what the main or canonical URL of the page is. All other
versions of the page would be treated as non-canonical and thus not considered by the
search engines. In CMS Made Simple, you can generate a canonical URL in your main page
template (Layout | Templates) as shown in the following code snippet:
{if isset($canonical)}
<link rel="canonical" href="{$canonical}" />
{elseif isset($content_obj)}
<link rel="canonical" href="{$content_obj->GetURL()}" />
{/if}
Place the code in the head secon of your HTML template and save it. From now on, the
canonical URL of every page will be generated automacally in CMS Made Simple.
Creating XML sitemaps for search engines
Sitemaps are a way to tell search engines about the pages on your website which otherwise
they might not discover. In its simplest terms, an XML sitemap—usually called a sitemap—is
a list of the pages on your website. Creang and subming a sitemap makes sure that search
engines know about all the pages on your site, including URLs that may not be discoverable
by a normal crawling process.
XML sitemaps can be created with the SiteMapMadeSimple module. Aer installaon, this
module creates a le called sitemap.xml in the root of your website and tells the search
engine which pages can be found on the site and when the page was last changed. An
XML sitemap is automacally updated every me you make changes to the pages or
page structure.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 10
[ 289 ]
You can submit your sitemap to major search engines such as Google, Yahoo!, Bing, or Ask.
For minor search engines, you can extend the robots.txt le placed in the root directory
of your website. Add the following line at the very boom of the le:
Sitemap: http://www.yourdomain.com/sitemap.xml
Adjust your domain name in the example.
Visitor statistics
Now, when the website is published, you would probably like to know how many visitors
you get per day, week, and month. In this way, you can control your eorts in search engine
opmizaon and gain addional informaon about what the visitors of your website look for
or which content is the most interesng to them. The module provides informaon on how
the visitors nd your website and where they come from. You can also see what browser and
screen resoluon the visitor used.
There are a lot of web analysis tools that you can use on the website. There is even a special
third-party module that you can install to see the stasc of your website directly in the
admin console. The module is called Stascs. This module not only makes the visitor
stascs available in your admin console, but also shows a visible counter on the website.
You can also use external website analysis tools such as Google Analycs or even both (the
module Stascs and Google Analycs) if you want to compare the results. Google Analycs
provides you with special JavaScript code that you must add to the main template of your
website (Layout | Templates). It is important to know that only pages that include this code
are tracked in the stascs. By placing it in the main template, the code is automacally
called with every page, and thus the enre website is covered.
Always include JavaScript code in the Smarty tag {literal} to avoid the code being
interpreted as Smarty code. For example:
{literal}
alien JS code
{/literal}
User-dened tags
User-dened tags are a simple way to insert some PHP code into your site. With the
default installaon of CMS Made Simple there are two example tags already created,
which are as follows:
{custom_copyright}
{user_agent}
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Advanced Use of CMS Made Simple
[ 290 ]
You will nd them in the admin console. Click on Extensions | User Dened Tags, and then
on one of the tags displayed there to see simple PHP code implemented.
To use a user-dened tag in the page, just put its name enclosed in curly brackets into the
page content or template. For example, you can add the tag {custom_copyright} to the
footer secon of your template, as shown in the following code snippet:
{custom_copyright} businessWorld
The tag will automacally display the year 2004, a dash, and then the actual year, so that you
do not need to change the template to adjust the year aerwards.
To create a new user-dened tag, you need some basic PHP knowledge. Write your code in any
PHP editor, create a new user-dened tag, and paste your PHP code into it (leaving <?php and
?> out). Then call the user-dened tags with Smarty tag in your page or templates.
How to make a user-dened tag
Like most things in CMS Made Simple, adding a new user-dened tag is simple, if you have
some PHP knowledge. Let's create a simple PHP countdown script.
Time for action – creating your own user-dened tag
Imagine you would like to countdown the number of days ll the New Year on the start page.
The days should be counted automacally and displayed at the place where the user-dened
tag is added in the content.
1. In the admin console, click on Extensions | User Dened Tags.
2. At the boom of the page, click on Add User Dened Tag.
3. Enter countdown as the name of the new user-dened tag and the following code
snippet into the eld Code:
$target = mktime(0, 0, 0, 1, 1, 2011);
$diff = $target – time();
$days = floor($diff/86400);
echo $days;
4. Click on Submit.
5. Open any page of your website, and add the user-dened tag, shown as follows:
It is {countdown} days until 1. January 2011
6. Click on Apply, and see the result on the page.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 10
[ 291 ]
What just happened?
You have created your own user-dened tag (UDT) in CMS Made Simple. This tag
automacally shows the number of days unl the date given in the rst line of the PHP
script (January 1, 2011).
Then, you have used the tag in a sentence on the page. Instead of the tag {countdown}, the
number of days is shown at the place where you have added the tag.
The name of the tag is technical informaon and can only contain leers, numbers, and
underscores, just like the names of PHP variables. The name is what you will have to type in
curly brackets to add it into a page. So be descripve, but do not make it too long.
You do not need any <? or <?php tags when you paste the code into UDT, just skip them.
If you make a syntax mistake in your PHP code, then you will not be able to save the code.
However, the following error will be displayed, so that you know you have to correct your
PHP code.
Invalid code entered.
Parse error: syntax error, unexpected '}' in /var/www/ html/businessworld
/admin/edituserplugin.php(103) : eval()'d code on line 5
Parameters for tags
User dened tags get really useful when you start to add parameters to them. You can pass
parameters to the PHP code this way:
{countdown date='05-01-2011'}
In this way, you can specify the countdown date directly in the UDT instead of wring it in
the code, so that that there is no need to customize PHP code again and again.
In PHP code, you can get the parameter with the help of the special array $params, which
is always dened and contains all parameters passed. In the next example, the passed
parameter date is used in the countdown script:
$date = explode('-', $params['date']);
$target = mktime(0, 0, 0, $date[0], $date[1] , $date[2]);
$diff = $target - time();
$days = floor($diff/86400);
echo $days;
Test this tag the same way as before, but instead of using {countdown}, use {countdown
date='05-01-2011'} or any other date in the format MM-DD-YYYY.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Advanced Use of CMS Made Simple
[ 292 ]
These are basic principles of wring user-dened tags. You can do some useful things with a
lile imaginaon, so just think about what you can do if you know a lile PHP.
How to get the page information in UDT
You can pass any variable to the UDT including objects created by CMS Made Simple. You can
show variables and objects that exist in the page with the following code:
{get_template_vars}
If you add the above tag to the template, then you will nd out that the page has an object
called $content_obj. This object contains all the informaon about the actual page and
can be passed to UDT as well.
Let's assume we need some addional navigaon that looks like the tracing path of the
visitor on the website. It means that we would like to display the last three pages that the
visitor has seen. This navigaon has to be built automacally and saved in the visitor session.
Create a new user-dened tag and call it trace. Add the PHP code shown in the following
code snippet:
$pagetitle = $params['page']->Name();
$pageurl = $params['page']->GetURL();
$_SESSION['trace'][$pagetitle] = $pageurl;
if (sizeof($_SESSION['trace']) > 3) {
array_shift($_SESSION['trace']);
}
$trace = array_reverse($_SESSION['trace']);
foreach ($trace as $title => $url) {
echo '<a href="'. $url .'">'. $title . '</a><br />';
}
This code assumes that the parameter page has been passed to it ($params['page']) and
this parameter contains the page object. We can call the user-dened tag as shown in the
following code snippet:
<h4>Last 3 pages you have visited</h4>
{trace page=$content_obj}
I suggest that you add the tag to the page template below the site navigaon. Every me the
user opens a new page, the informaon about it is passed to the UDT. The page parameter
contains the page object, and can be used with page content methods (Name() and
GetURL()). Please see CMS Made Simple API for more informaon.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 10
[ 293 ]
The last three pages that the visitor has seen are saved in the session variable and are now
temporarily displayed below the sidebar menu.
Understanding events
In the last secon, you learned to create user-dened tags. To execute the PHP code in the
tags, you had to place it in the page or the template. With Event Manager, you can execute
the code when certain events occur. An event can be the creaon of a new page or even
deleng a user in the admin console. There are over 50 events already dened in CMS Made
Simple, and every module can have addional events.
Examples for execung user-dened tags on events are as follows:
Sending an e-mail to the administrator of the website if any page is updated
Replacing certain parts of the page before displaying it on the website
Deleng associated stylesheets if the template is deleted
CMS Made Simple triggers events such as ContentEditPost or DeleteTemplatePre, when the
specied acon occurs. You create one or more user-dened tags with custom funconality
and assign them to the event. This means that the assigned funconality will be executed
when the event is triggered. The event sends the actual data to the user-dened tag (if there
is any), and this data can now be used in any way in your PHP code.
See the list of events already added to CMS Made Simple in the admin console (Extensions |
Event Manager). For every event, there is a brief descripon of when the user-dened tags
appended to it will be executed.
This funconality allows anybody with a bit of PHP knowledge to extend core or module
funconality. For example, it should now be easy to send an e-mail to the administrator if
the page is modied by the editor. For the next example, the CMSMailer module should be
congured properly, as explained in Chapter 2, Geng Started.
Time for action – sending mails after page update
To enable CMS Made simple to send e-mails to the administrator when a content page is
updated, perform the following steps:
1. In the admin console, click on Extensions | User Dened Tags.
2. Click on the Add User Dened Tag link.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Advanced Use of CMS Made Simple
[ 294 ]
3. Name the new tag buzzer and the code as shown:
global $gCms;
$cmsmailer = $gCms->modules['CMSMailer']['object'];
$cmsmailer->AddAddress($cmsmailer->GetFrom(),$cmsmailer-
>GetFromName());
$cmsmailer->SetSubject('Admin buzzer');
$cmsmailer->SetBody('The page <i>' .$params['content']->mName.'</
i> has been changed.');
$cmsmailer->IsHTML(true);
$cmsmailer->Send();
4. Click on Submit.
5. In the admin console, click on Extensions | Event Manager.
6. Find the event called ContentEditPost, and click the edit buon on the same line.
7. Select the buzzer tag from the drop-down eld, and click Add.
8. Now, change any page to test the admin buzzer funcon. You should receive an
e-mail nocaon with the page name changed.
What just happened?
We have used the CMSMailer module of CMS Made Simple to send an e-mail nocaon. In
this way, we consider all individual sengs made in the module and ensure that e-mails are
sent properly.
The PHP code added to the tag is a slight modicaon of the sample code added to the
Help secon of the CMSMailer module. It sends mails to the e-mail address congured in
the module in the eld From address. We have also used the name of the changed page
in the e-mail nocaon. This was possible because an event provides us with the object
$params['content'] that contains a reference to the aected page and all informaon
about the page.
Then, you have assigned the user-dened tag to the event ContentEditPost. This event is
sent aer the page is edited and submied (it is not enough to just Apply changes, you
must Submit them).
Integrating jQuery in navigation
CMS Made Simple uses plain HTML, CSS, and Smarty in all templates. This means that you
can use any jQuery eect in your templates as well. jQuery is a JavaScript framework and has
a lot of plugins.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 10
[ 295 ]
To use the plugins, you have to separate HTML, CSS, and JavaScript and put them at the
appropriate place in CMS Made Simple. HTML markup is saved in templates, whereas CSS
is saved in stylesheets and then assigned to the template. JavaScript can be placed globally
(Site Admin | Global Metadata), so that it is available on the whole page. Alternavely, it
can be placed in the page template. In this case, it will be available in all pages using this
template. If you need JavaScript only in one page, then you can add it to the Page Specic
Metadata eld in the Opons tab.
Let's see how you can integrate a jQuery drop-down menu on your website. Examples and
instrucons for this eect can be found at http://www.dynamicdrive.com/style/
csslibrary/item/jquery_multi_level_css_menu_horizontal_blue/.
Time for action – integrating jQuery in navigation
The instrucon on the link above explains how you can use this jQuery plugin in the pure
HTML website. Let's see how you can integrate the plugin in CMS Made Simple.
1. Save the les jquerycssmenu.css and jquerycssmenu.js from the address
given above to your local disk.
2. Upload the le jquerycssmenu.js into the folder uploads on your web hosng.
3. In the admin console Add a Stylesheet (Layout | Stylesheets), call it
JQueryCSSMenu, and copy the whole content from the le jquerycssmenu.css
into the Content eld.
4. Click on Submit.
5. In the list of stylesheets, click the blue CSS buon beside the new created stylesheet.
6. Select your main template from the drop-down eld, and click on Aach to
this Template.
7. Open the main template of your website, and add the following code snippet in the
head secon:
{literal}
<!--[if lte IE 7]>
<style type="text/css">
html .jquerycssmenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->
{/literal}
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="uploads/jquerycssmenu.js"></
script>
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Advanced Use of CMS Made Simple
[ 296 ]
8. Create or replace the top navigaon in the main template with:
<div id="myjquerymenu" class="jquerycssmenu">
{menu template="minimal_menu.tpl"}
<br style="clear: left" />
</div>
9. Click on Apply, and see the drop-down menu of your website.
What just happened?
This was a very basic example of how to integrate jQuery into your website. First, you have
to gure out what JavaScript les are needed for the plugin and upload them to your web
hosng. Then create a new stylesheet, copy all styles into it, and aach the new stylesheet to
the template. If images are used in the stylesheet, then upload them to the web hosng as
well and adjust the image path in the stylesheet.
Then open your template and add JavaScript to the head secon of the template. Any scripts
should be enclosed in the Smarty tags {literal}{/literal}. This tag allows a block
of data to be taken literally. This is typically used around JavaScript or stylesheet blocks
where curly braces would interfere with the curly braces of Smarty tags. Anything within
{literal}{/literal} tags is not interpreted, but displayed as it is.
In the last step, you add the required CSS classes and IDs to the HTML markup of the
template. This method works for any jQuery plugin you would like to integrate. Another
example for integrang jQuery into the Gallery module was explained in Chapter 7, Using
Third-party Modules.
Pop quiz – advanced use of CMS Made Simple
1. If you change the language of the admin console, it would have an impact on:
a. All user accounts in CMS Made Simple.
b. On the language displayed to the visitors of the website.
c. Only to this user account.
d. Nothing. You have to choose the language once during installaon and
cannot be changed later.
2. If you would like to parcipate in making translaons for CMS Made Simple, you
have to:
a. Join the ocial developer team of CMS Made Simple.
b. Join the translaon project of your language in Forge.
c. Translate on your local installaon and upload translaons to CMS Made
Simple forum.
d. Pay the community to get needed translaons.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 10
[ 297 ]
3. Meta tags are important for search engines. What meta tags are used by the major
search engines like Google, Yahoo and Bing?
a. descr<meta name="iption" content="" />
b. <meta name="refresh" content="" />
c. <meta name="robots" content="" />
d. <meta name="author" content="" />
4. Assume you use the tag{title} in the tag <title> in your template. What will be
aected if the tle of the page is changed?
a. Alias of the page
b. Menu text of the page
c. Heading of the page
d. The name in the tle bar of the browser
5. How can you prevent dierent URLs of the same page being treated as
duplicate content?
a. Consequently use domain with or without www.
b. Avoid publishing print version of your websites.
c. Use canonical tag for canonical URLs.
d. Use <meta name="robots" content="noindex" /> in all your pages.
6. Why should you use search engine friendly addresses?
a. The RAM memory of your computer gets overloaded by opening more than
seven pages without friendly URLs (they are too long).
b. The URL is opmized for search engines.
c. You should not use them at all because you have to create for every search
engine a special one and so create duplicated content.
d. The page is loaded much quicker
7. User-dened tags are wrien in:
a. Pure HTML
b. Pure HTML and CSS
c. JavaScript
d. PHP
8. Some jQuery plugins cannot be integrated in CMS Made Simple:
a. true
b. false
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Advanced Use of CMS Made Simple
[ 298 ]
Have a go hero – make search engine optimization
Make search engine opmizaons for your website before you publish it. It is beer to
start with a clear and opmized website from the very beginning. Double-check page tles,
menu texts and words represented as internal links in the content of the page. Control if one
page can be reached with dierent URLs and use a canonical tag to help the search engines
to understand which URL is the main one. Create an XML sitemap for search engines and
monitor the stascs of your visitors to gure out what pages are the most popular, thus
guring out what contents of your page can be extended.
Consider that your website is made primarily for visitors and not for search engines. Search
engines are just carriers that bring visitors to your website. And whether the visitor likes your
website or not lies in your responsibility.
Summary
In this chapter, we learned advanced subjects that are not necessarily a part of every website.
Specically, we covered the following topics:
Localizaon and translaon: You need this secon if the primary language of the
website is not in English or if you are going to create a mullingual website.
Addional content and controls for editors: This secon helps to understand what
you can do if you have a sophiscated layout or would give website 'editors'
more control.
Search engine opmizaon: You learned how you can opmize the website for
search engines.
User-dened tags and Event Manager: If you have some basic PHP knowledge, you
can even implement your own PHP scripts into CMS Made Simple and sll
stay upgradable.
Implemenng jQuery eects: You learned how you can implement simple jQuery
funconality into the top navigaon of the website.
Now that we've learned how to realize these sophiscated features, read the next chapter to
see what tasks you have as a website administrator during the lifeme of the website.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
11
Administration and Troubleshooting
Once the website you have created is ready and running, you have to take a
closer look at the tasks you have as a webmaster during the lifeme of the
website. Depending on the nature of the website, you must regularly make
backups if you or your customer connuously add and edit the content or
change the design. It is also recommended to watch the development of CMS
Made Simple and make updates to keep the website secure and be able to use
the newest features.
This chapter helps you administer your CMS Made Simple website once it is running. In this
chapter, we will see how to:
Take a backup of your website
Move it to another web host
Upgrade your installaon or modules
Opmize the performance
Secure and protect your website in the most ecient way
Get help from the community
You are not supposed to read the whole chapter. You can start reading from any secon, as
they do not depend on each other. Upgrading CMS Made Simple is the part that you will
probably need when a new release of CMS Made Simple is published.
I strongly recommend that you read the Troubleshoong secon and devote 10 minutes of
your me to the queson How can I get a quick answer in the free support forum? There are
some useful ps on how to get the best answer in the shortest period of me.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Administraon and Troubleshoong
[ 300 ]
Getting system information
As the website administrator, you should know how to get the system informaon for your
website or your customer's installaon. This informaon helps you to understand how the
server, where CMS Made Simple is installed and congured, gives you the rst indicators
when you encounter problems while running CMS Made Simple or any of its modules.
In the admin console, click Site Admin | System Informaon. The informaon page is
divided into three secons:
CMS Install Informaon
PHP Informaon
Server Informaon
In the rst secon you see the version of CMS Made Simple installed and all enabled
modules with their versions as well.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 11
[ 301 ]
Below the list of modules, you will nd the Cong Informaon secon that gives you an
overview of all values set in the le config.php. Any value that you see in this secon
can be changed in this le, except the le permissions.
Behind the paths' values, you see a green ck or red cross. CMS Made Simple checks the
permissions of your les and informs you if the permissions are not set properly. You should
adjust the le permissions if you encounter any issues with CMS Made Simple or any of its
modules. Seng permissions is dependent on the installed operang system. If you are
not sure how to do it, then ask your hosng provider or use a common search engine to
gure it out. File permissions are not something specic to CMS Made Simple, but to the
operang system.
In the second secon, you will nd individual PHP sengs on your server. Pay aenon to
any seng that is followed by a red cross (failure) or a yellow exclamaon mark (warning).
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Administraon and Troubleshoong
[ 302 ]
Failures should be corrected as soon as possible. Warnings can be ignored if you do not have
any issues when running CMS Made Simple, but you should correct them if something does
not work as expected. In the following table, you will nd some required and recommended
sengs for CMS Made Simple. Required sengs are mandatory. Recommended sengs can
make your system run smoother and solve some issues.
Seng Minimum and recommended values
Current PHP Version (phpversion) 5.0.4 or greater
GD version (gd_version) version 2
Magic quotes in runme (magic_quotes_runme) On (True)
PHP Eecve Memory Limit (memory_limit) minimum 16 MB
recommended 24 MB or greater
Maximum Execuon Time (max_execuon_me) minimum 30
recommend 60 or greater
PHP Safe Mode (safe_mode) O (False)
Session Save Path (session_save_path) This path should be writable (green ck)
PHP register_globals (register_globals) O (False)
Maximum Post Size (post_max_size) minimum 2M
recommend 10M or greater
Maximum Upload Size (upload_max_lesize) minimum 2M
recommend 10M or greater
The third secon on the System Informaon page gives you an overview of your server's
conguraon. If you are the website administrator, then you should be able to answer at
least three quesons about your system:
What operang system is used on your server?
What server soware (and which version) is installed on your server?
What database (and which version) is used for a CMS Made Simple installaon?
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 11
[ 303 ]
All these quesons can be answered if you look at the informaon given here thoroughly.
From the preceding screenshot, I can say that this installaon of CMS Made Simple is
installed on Linux (Server Operang System), Apache server version 2 is installed (Server
Soware), and this server uses the database MySQL 5.0.32 (Server Database + Server
Database Version).
It is important to know how your server is congured to be able to get help if you encounter
issues. There are a lot of variees of applicaons' versions and conguraons, so nobody can
guess exactly how your individual hosng is congured. Keep that in mind while geng free
help from the community.
Backing up your website
Backing up means making copies of your les and database. You need to backup regularly
in case something goes wrong on your web hosng. Your data could be lost due to some
hosng issues or through webmaster mistakes. Therefore, it is important to have backup les
to be able to restore your website.
To backup a website made with CMS Made Simple, it is not sucient just to copy all the les
found on the server with FTP. Those les are only a small fracon of your website. The most
important part is the database where all your text and designs (except image les) are stored.
In CMS Made Simple, you have two modules (one is used for le backups and one for
database backups). You would probably not be able to use the modules on free web hosng
or on the hosng with strong restricons. To check if an easy backup of your website with
the following described modules is possible, try to install the rst module to backup les.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Administraon and Troubleshoong
[ 304 ]
Backing up website les
Website les are the les that you upload to your FTP directory. Most of them are delivered
from the team of developers and have been copied to your web space before installaon.
In the uploads directory, you will nd les, like images, that have been uploaded by the
editors. If you have installed addional modules, then you will nd les for these modules in
the modules folder.
To backup les, you can download everything from your FTP to the local disk. However,
depending on your connecon and the total number of les, this can take a lot of me.
Time for action – creating a backup with the module
If you would like to archive the les before downloading them, then you can use the
FileBackup module.
1. In the admin console, select Extensions | Module Manager.
2. Click on the Available Modules tab, and look for the leer F above the alphabecal
module list.
3. Find the FileBackup module, and click on the Download & Install link in the same line.
If there are restricons on your web hosng, then you will see the following error:
You cannot use this module, since you don't have the
tar command installed on your server.
In this case, you will have to backup your website manually. If the installaon of the
module FileBackup was successful, then you can start conguring it.
4. In the admin console, go to Site Admin | File Backup.
5. Click on the Preferences tab. In the admin area you see the following message:
Please check and save the path to tar binaries before
using FileBackup.
6. Click Save. (This module tries to recognize the required path automacally).
If the message does not disappear, then you have to ask your hosng provider
what the path to tar binaries on your web hosng is and enter the path into
the eld Path to tar binaries.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 11
[ 305 ]
7. Switch to the Backup Files tab.
8. Click on Backup Files.
9. Wait unl the complete list of folders is displayed and you see the message Task
completed at the end of the list. Below this message, you will see the backup le
containing all your website les.
10. Click on the backup le, and save it to your local disk.
What just happened?
You have created an archived backup of all website les and have saved the archive to
you local disk. You should create a new backup le and save it separately from the current
installaon. For example; on the local disk, anyme you install a new module, upgrade the
whole system or one module or upload new images. Do it regularly. You will save a lot of
me in case of emergency.
All backup les will also be saved in your installaon. You will nd them using any FTP
browser (for example, FileZilla) in the folder /admin/backups on your web hosng.
Make sure you delete the backup les aer downloading to your local disk.
Otherwise, anybody could go to http://www.yourdomain.com/admin/
backups/ and download your backup, containing the le config.php with
your database sengs and password.
It is recommended to clear the cache folder before creang a le backup as CMS Made
Simple creates a lot of temporary les to speed up the website. These les must not to be
saved with the backup as they will be generated automacally once CMS Made Simple is
installed and running. To clear the cache folder in the admin console, click on Site Admin |
Global Sengs, select the Advanced Setup tab, and click the Clear buon below the Clear
Cache label.
In fact, the best soluon would be to set up some automaon if the les are changed
frequently. You should contact your ISP to determine whether it is possible to backup the
le automacally.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Administraon and Troubleshoong
[ 306 ]
Backing up database
With the next step, you backup your database. In other words, you create a dump of the
database. Dumps hold all the actual data of the installaon: page structure, page content,
complete design, and any data saved in the modules like News.
A database backup has the same importance as a backup of the les. If you just backup
the les, then you do not backup any changes on the website such as new pages or
new modules.
Time for action – creating a database backup
Let's see how to create a backup of the database along with the le backup. You need the
MysqlDump module to create a database dump from within your admin console in CMS
Made Simple.
1. In the admin console, click on Extensions | Module Manager
2. Click on the Available Modules tab, and then the leer M above the alphabecal
module list.
3. Find the module MysqlDump, and click on the Download & Install link in the same
line. If there are any restricons on your web hosng, then you will see the
following error.
You cannot use this module, if don't have MySQL installed
on your server.
This error means that you cannot use the module to create a database dump this
way and should do it manually (refer to the next secon). If the module installaon
was successful, then you can create a database dump right now.
4. In the admin console, click on Site Admin | MySQL Dump
5. Switch to the Preferences tab.
6. Click Save. (Usually the path to mysql binaries is recognized automacally.)
If you sll see the message Invalid path to MySQL ulies, then you have
to ask your hosng provider for the proper path to mysql binaries on your
web hosng, and enter the path into the eld Path to mysql binaries.
7. Switch to the Backup Database tab.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 11
[ 307 ]
8. Click the Backup database buon. Wait ll a list of tables appears, and nd the
link to create a database dump at the end of the list.
9. Save the le to your local disk.
What just happened?
You have created a backup of your database. This backup includes all your database tables
and should be made regularly, ideally every me changes are made to the site's pages or
the modules.
Similar to the le backup, you will nd all database backups with any FTP client (for example,
FileZilla) in the folder /admin/backups on your web hosng.
Manual backup
If you are not allowed to install the modules on your web hosng due to some restricons
(oen made on the free web hosng), then you should backup you les manually.
For the le backup, open any FTP browser (for example, FileZilla), navigate to your
installaon folder, and copy all the les from the web hosng to your local disk. Remember
that the les contain only a small part of your website. You should create a database dump
to save all your content, design, and module data.
Backing up database with phpMyAdmin
phpMyAdmin is a free open source tool intended to handle the administraon of MySQL
databases. It is normally installed on every web hosng. Contact your provider to gure out
the link to phpMyAdmin on your web hosng, and your login credenals if you are not sure.
This tool helps you to create database backups.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Administraon and Troubleshoong
[ 308 ]
Time for action – creating a backup with phpMyAdmin
The steps described here are only needed if you have no possibility to backup the database
with the module described previously.
1. Log in to phpMyAdmin on your server (contact your provider to gure out the
details as they can dier between web hosts).
2. Upon login, select Databases on the major screen:
3. Select the database used for a CMS Made Simple installaon. If you are not sure,
then open the config.php le and nd the line $config['db_name'] that
contains the name of the database.
4. Click on the database name in the list.
5. On the next screen, you will see the list of all tables in this database. Click on
the Export tab at on the top of the list, as shown in the following screenshot:
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 11
[ 309 ]
6. In the le box, you can see all the tables selected. At the top of the screen, nd the
checkbox Save as le, and select it. Click the Go buon.
7. You will be prompted to download a le. Save the le to your computer. Depending
on the database size, this may take a few moments.
What just happened?
You have manually created the backup le (or dump) of your database. Ensure that you
create a new backup of the database every me you make changes to the page structure,
install new modules, and add new content to the pages or the modules.
Make a backup regularly; you will need it in the case of an emergency. This backup can also
be used if you move your installaon from one server to another.
In fact, just making regular backups is not enough. Ideally, you should test the recovery
scenario at least once because many things can go wrong:
Incomplete copies of les
Incomplete database backup
Corrupted backups
It's catastrophic when your website crashes and you end up with a useless pack of les you
believed to be backups.
Move CMS Made Simple to another web hosting
This secon helps you understand how to move an enre CMS Made Simple applicaon to
another hosng service.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Administraon and Troubleshoong
[ 310 ]
Step 1
Consider this step for busy websites that accept data from visitors, like Comments or
FrontEndUsers. Enable the Site Down Message to prevent somebody from using the
website while you are moving it to another hosng service. In the admin console, click on
Site Admin | Global Sengs, and select the Sitedown Sengs tab. Write the message that
the visitors to the website will see if they try to use your website during the transfer, then
ck the Enable Site Down Message checkbox, and click Submit. From now on, visitors to the
website will see the Site Down Message instead of the website.
Step 2
Clear the cache folder. CMS Made Simple creates a lot of temporary les to speed up
the website. These les must not be saved with the backup as they will be generated
automacally once CMS Made Simple is installed and running. To clear the cache folder in
the admin console, click on Site Admin | Global Sengs, select the Advanced Setup tab,
and click the Clear buon below the Clear Cache label.
Step 3
Create a database backup, as described in the preceding secon. Import the database on
the new host using phpMyAdmin. Log in to phpMyAdmin on the new host, and select the
database intended for use of CMS Made Simple. Click on the Import tab, and select the le
with the database backup in the eld Locaon of the text le. Click Go. The database is
imported to the new host.
Step 4
Copy all the les from your old site to your new site using an FTP client (for example,
FileZilla). Aer the les are transferred, remember to check the permissions for the
folders on the new site to ensure that they are set correctly. Check the permissions
on the following folders:
/tmp/templates_c
/tmp/cache
/uploads
/uploads/images
/modules
They should be writable. Contact your provider if you are not sure how to do it.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 11
[ 311 ]
Step 5
In the last step, you have to open and modify the les config.php and .htaccess.
In the le config.php, check and adjust the following secons:
Database Sengs
Path Sengs
Image Sengs
Update them with the database access credenals and paths applicable to the new server.
The path sengs are not always that obvious. In your FTP browser, it might
show something like /cmsmadesimple. However, the real path on the
server might be something like /home/user/html/cmsmadesimple.
If you have the wrong path, then look at the error messages when you try to
access your site aer transfer. This message will give you a hint as to the real
path sengs. Contact your provider for help if it is sll unclear.
The .htaccess le should only be modied if you change the domain name. However,
if you did not make any changes to the le due to the search engine opmizaon, leave it
as it is.
Try to log in to the admin console of CMS Made Simple on the new hosng. If everything
looks good, then disable the Site Down Message and see the page up and running.
Upgrading CMS Made Simple
The CMS Made Simple development team improves the applicaon constantly; therefore
new versions are released regularly. You should ensure that you upgrade your system
consequently. Upgrades are important for several reasons.
Free community support: You will probably get no help for old releases, as there
are only a few users who will sll be working with the old version. The development
team will not x any issues in old versions, as a lot of issues are already solved in
newer releases, and you are always encouraged to install the latest version.
Features: In new releases, new features are implemented. If you work with an
old version, then you have to reinvent the wheel if you need something already
developed and exisng.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Administraon and Troubleshoong
[ 312 ]
Third-party modules: Developers of addional modules release new versions,
including new funconality and corrected bugs. Newer versions of the modules
oen assume that the newest version of CMS Made Simple is installed. Somemes,
the feature you need is already implemented in the last version of the module, but
you are not able to install it due to the outdated version of CMS Made Simple.
Security releases: Not only are errors corrected in new releases and new funcons
added, but from me-to-me, security holes are discovered. In this case, exploits
are quickly spread throughout the internet. Exploits are generally sequences of
commands that take advantage of a bug in order to take control over your system.
If you do not upgrade, then your system becomes extremely vulnerable, your data
could be damaged or lost, and nobody would take responsibility for it except you.
Stability and performance: New releases oen include improvements in
performance. Even if you are not interested in the features included in new
releases, your website can gain speed just by upgrading.
If a new version has been released, then you will see a message saying You have 1 unhandled
nocaon in the admin console below the main menu. The message appears only once a
day! Click on the plus sign beside the message, as shown in the following screenshot:
Let's see how to upgrade your installaon to the newer version.
It is important to create a backup of your database and all the les on the web hosng
before every upgrade (please refer to the secon Backup your website). If something goes
wrong, you can always return to the previous version and start upgrading again. Having no
backup means having no possibility to go back in case of an emergency.
Open the link http://cmsmadesimple.org in the browser, and select Downloads | File
Releases in the main menu on the top of the page. The list of releases is shown. If you are
not sure what version of CMS Made Simple is currently installed on your web hosng, then
open the admin console; you can see in the footer area at the very boom of the page what
version is used on your website.
In the downloads secon, nd the newest release, and choose the le named
cmsmadesimple-full-diff-[YOUR.CURRENT.VERSION]-[NEW.VERSION].
tar.gz. For example, to upgrade from version 1.6 to 1.6.5, you have to choose the le
cmsmadesimple-full-diff-1.6-1.6.5.tar.gz. Save the le to your local disk and
extract it.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 11
[ 313 ]
If you cannot nd the upgrade le from exactly your version to the current one, then
you will have to download the last full version above the one installed (for example, 1.6) and
proceed with these instrucons using that version rst.
Before copying the les to the web server, you should probably set up a Site Down Message
(Site Admin | Sitedown Sengs). Now open any FTP browser, and upload all the les from
the extracted folder to your web hosng. Overwrite the exisng les and directories. You
have to overwrite these exisng les with the newer versions.
Aer uploading the new les, check if a folder called /install has been created
in the folder where CMS Made Simple is installed. If so, then enter in your browser
http://www.yourdomain.com/install/upgrade.php (substute the domain with
yours). This will automacally update your database to the newest version. Do not forget to
delete the install folder aer upgrade. If a folder named install was not created, then
you have nished the upgrade at this point.
Check the version in the footer area of the admin console. It should display the new
version now.
You then have to upgrade the modules. In the admin console, click on Extensions | Module
Manager, and see if some modules have to be upgraded on the Available Upgrades tab.
If there are some upgrades shown, then look for the modules on the Available Modules tab,
and click on the Upgrade link beside the module name.
Somemes, the nocaon for the new version is not displayed in the admin
console. This is due to the security sengs of your web hosng. Another
possible way of being informed about a new version in this case is subscribing
to the ocial RSS feed from the CMS Made Simple blog or (if you are a
registered member in CMS Made Simple Forum) to subscribe to the board
Announcements.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Administraon and Troubleshoong
[ 314 ]
Remember that upgrading your system is not dicult if you do it regularly. Go with the
development to get the best free support and to be sure that your system is secure
and stable.
Optimizing (performance tuning)
Like every system, CMS Made Simple can be opmized and tuned for the best performance.
The ps described in this secon can signicantly speed up your system. However, I
recommend applying these instrucons only if you encounter any performance issues.
Before you start to opmize your system, you should know how the system performs
without any opmizaon. CMS Made Simple has built-in performance measurement. If you
open any page generated by CMS Made Simple in a browser and then see the source code of
the page, you will nd HTML comments at the end of every page, shown as follows:
<!-- 0.267839 / 38 / 5834456 / 6113588 -->
This comment can be broken into four parts:
1. The page was generated in 0.267839 seconds by CMS Made Simple.
2. 38 SQL queries were needed to generate pages.
3. 5834456 bytes of memory were used.
4. The peak memory usage was 6113588 bytes.
You should save this comment to control the amount of resources that can be saved using
opmizaon ps, given in the following secons. Every me you make an opmizaon,
compare the new numbers on the same page with the previous ones.
Compression
This opon allows the output from your server to be compressed before being sent to
the browser. In simple words, the page is zipped, and instead of sending HTML, the server
sends a much smaller ZIP le. The smaller the le, the faster the website can be loaded. The
browser is able to decompress the zipped page automacally, so that neither you nor your
visitor should care about it.
Compression can be turned on in the le config.php. Open the le and nd the line:
$config['output_compression'] = false;
Turn on the compression by seng it to true:
$config['output_compression'] = true;
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 11
[ 315 ]
This may provide a signicant performance increase on some sites. However, it is not needed
for Apache servers that have mod_deate enabled. Please contact your provider if you are
not sure. Consider that enabling this feature will signicantly increase the CPU and RAM
usage on the server side, and this can even slow down the website if the server is very busy.
Persistent connections
CMS Made Simple is based on the database. Therefore, for each page loaded in the browser,
a connecon to the database is needed. There are two concepts on how CMS Made Simple
connects to the database. Normally, for each page, the new connecon to the database
has to be established. A persistent connecon is a concept which is designed to improve
performance for some applicaons. Instead of the connecon being established for each
page, it is opened once and then kept for the applicaon's lifeme.
In the le config.php, you can dene how CMS Made Simple should connect to the
database. Open the le and search for the following line:
$config['persistent_db_conn'] = false;
Change the line to:
$config['persistent_db_conn'] = true;
This would ensure that the connecon to the database is not closed aer the page is loaded
but is kept open. The next me the page is requested, the server checks whether there is an
opened connecon and uses it for the new page. In this way, the me for establishing the
new database connecon is saved.
This seng is not allowed by all providers. Please contact your provider to gure
out if you can use persistent connecons on your web hosng.
CSS in global settings and static CSS
Another place where you can save me is in the generaon of the stylesheet for the page. If
you open your page in the browser and see the page source, then you will see that the links
to stylesheets are actually references to the PHP le stylesheet.php:
<link rel="stylesheet" type="text/css" href="http://yourdomain.com/
stylesheet.php?cssid=59" />
However, it is not necessary to generate stylesheets with every page again and again. You
can cache them when you are ready with the design of the website and do not plan to
change it.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Administraon and Troubleshoong
[ 316 ]
In the admin console, click on Site Admin | Global Sengs, and switch to the tab Advanced
Setup. Find the eld Maximum amount of me (seconds) stylesheets can be cached in the
browser, and enter any value other than 0, as shown in the following screenshot:
It depends on how oen you will update the stylesheet in the future. If you do not plan to
change it in the future, then go for a high value like 2592000 seconds. This means that the
stylesheet will be cached for a month.
1 hour = 3600 seconds
1 day = 86400 seconds
1 week = 604800 seconds
Be sure that you change the value back to 0 if you change the stylesheet, as you will not see
any changes on the page with the old cached version.
These performance ps can speed up CMS Made Simple. However, you will get more
eecve results if you tune the server where CMS Made Simple is installed and not only CMS
Made Simple itself. Server tuning assumes that you have full access to the server and basic
Linux administrator knowledge.
How to secure your installation
In this secon, you learn how to secure your CMS Made Simple installaon. We will not
discuss how to secure the web hosng server as this is a stu for the web hosng provider.
If you host your website on your own, then you should know how to secure the server in
general. If you host on a shared hosng or a managed server, then your provider would do
it for you and you don't need to worry about it. Let's see what the provider will not do
for you.
The rst rule for a secure website is to upgrade CMS Made Simple and its modules regularly.
Every me a new version of CMS Made Simple is released, run the upgrade as soon as
possible. It is especially important for security releases that we close security holes.
Upgrading is very easy. Please refer to the secon Upgrading CMS Made Simple to read
about how to perform upgrades.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 11
[ 317 ]
System verication
A CMS Made Simple installaon consists of its les and a database. The database holds page
structure, page content, design, and any module data and can change daily on busy websites.
In contrast to the database, les are a kind of stac part of the website. They are changed
only if you:
Upgrade CMS Made Simple
Upgrade any module
Install new modules
Remove modules from the installaon
Intenonally or unintenonally make changes to the les on your own
Somemes les can be changed by malicious programs or hackers if you do not secure your
system enough. So how can you be sure that the system les are not changed and everything
is sll okay.
CMS Made Simple uses a checksum vericaon to prove that the les on your web hosng
have not been changed. A checksum is a text string computed from a le for the purpose
of detecng accidental changes that may occur during its transmission or storage. These
checksum strings are generated for each le that originates from the core CMS Made Simple
and can be downloaded from http://dev.cmsmadesimple.org/project/files/6. A
checksum le is generated for each release of CMS Made Simple.
Depending on your version (base or full, and release), choose the right checksum.dat le,
and save it to your local disk. Open it in a text editor to see what is inside.
3ad39cc13942818630935b56dc8af619 *./index.php
6f8ae75cfde0c5a81dc09f35ea40f7a6 *./preview.php
d53ee56d1c123a1ed04326ca3406e744 *./favicon_cms.ico
...
You will nd a long list of checksum strings followed by the lenames and their paths. In
CMS Made Simple, you can automacally validate all les in the admin console (Site Admin
| System Vericaon). This funcon will compare the checksum strings of the original les
with the les on your installaon. Normally, your les should not have any changes if you
have not made any upgrades to the system so far.
The only acceptable errors are missing les from the install folder, as you had to delete
this directory for security reasons. You may also be told that various index.html les in
the tmp folder are missing or invalid. This is not crical. Missing the le SITEDOWN is also
not crical.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Administraon and Troubleshoong
[ 318 ]
Every me you run an upgrade of CMS Made Simple or any of its modules, you should create
a new checksum le. In the admin console, open Site Admin | System vericaon, and
click the Submit buon in the Download Checksum File secon. This funcon allows you to
generate a checksum le for the current installaon and save it on your local computer to
be veried later. This should be done just prior to rolling out the website, and/or aer any
upgrades or major modicaons. The integrity of the data can be checked at any later me
by comparing the checksum le with the stored les.
Using this funcon can assist in nding problems with uploads, or exactly what les were
modied if your system has been hacked. If you suddenly encounter strange issues and
suspect that your system has been aacked, then you should make a system vericaon rst
to see whether there are any changed les. If the checksums do not match, then the data
was certainly altered (either intenonally or unintenonally).
The original checksum le from http://dev.cmsmadesimple.org only
veries the core CMS Made Simple and the core modules that are delivered with
CMS Made Simple. Any addional modules that you've added are not veried.
You can see the errors, as shown in the following screenshot:
According to the preceding explanaon, these errors are not crical. If you get other failures,
it is up to you to interpret what has happened. If you are sure that you have not changed any
les, then somebody else has done it to damage your website. In this case, download the
original release from CMS Made Simple, extract it, and replace the changed les with
the original.
Replacing the les is the rst step. If your system has been hacked, it means that there is sll
a security hole that can be used again and again to damage your system. Please read and
implement the following secons to see how you can protect your system.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 11
[ 319 ]
Usernames and passwords
Check how strong the combinaon of administrator's username and password on your
installaon is. Do not use admin, administrator, or any other simple words like these for
the username, as they are very easy to guess. Secondly, use strong passwords for the
administrator account. Password strength esmates how many trials an aacker of your
website would need on an average to guess your password.
There are some ps for choosing good and secure passwords:
Include numbers, special characters, upper and lowercase leers, and punctuaons
in the password
The password length should be around 12 to 14 characters
Avoid any password made of a word that can be found in the diconary
Avoid using relave or pet names or biographical informaon like your own birth
date or a wedding date
Pay aenon to an editors' username and passwords as well. Assist them in choosing strong
passwords and advise them to keep the passwords in mind and never write them down. You
and your users should not use the same password on other websites on the internet.
If you post some news arcle with the admin account on the website, then the username
is revealed on the website in the default news template. It would be beer not to show the
username at all or replace it with the user's rst and last name.
To replace the username with real name, create a new user-dened tag (Extensions | User
Dened Tags), call it realname, and add the following code snippet:
global $gCms;
$db = $gCms->db;
$query = "select first_name, last_name from ". $gCms->config['db_
prefix'] . "users where user_id =?";
$row = $db->GetRow($query, array($params['user']));
echo $row['first_name'].' '.$row['last_name'];
This code will return the user's rst and last name from the user account. It assumes that the
parameter user with the user ID is provided. To use the user-dened tag in the template,
in the admin console, click on Content | News, and switch to the Summary Templates tab.
Open the template for eding, and search for the Smarty variable {$entry->author}.
Replace the variable with the Smarty tag {realname user=$entry->author_id}.
Save the template, and see the changes on the website. Apply the same changes to the
Detail Templates.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Administraon and Troubleshoong
[ 320 ]
Hiding admin directory
Every CMS has an admin URL. In CMS Made Simple, this URL is http://www.yourdomain.
com/admin. This URL is dened by default, so that any experienced CMS Made Simple user
can get the login screen to your admin console. The more informaon you reveal to the
hacker, the more vulnerable your system is. In CMS Made Simple, you can easily change the
URL of the admin console, so that one cannot guess where the "entrance" is.
Open your FTP browser and rename the folder admin to something that cannot be guessed
easily (for example, private4me or hide2safe). Then, open the le config.php with any
FTP browser of your choice and nd the line
$config['admin_dir'] ="admin";
Change the line to the name you have given to the folder admin. If your admin directory is
now named private4me, then change the line shown as follows:
$config['admin_dir'] ="private4me";
From now on, the URL to your admin console will be http://www.yourdomain.com/
private4me. If you enter the standard admin URL in the browser now, then you will get
the error 404 (Page not found) instead of the login screen. In combinaon with a strong
username and password, this would give addional protecon to your admin area. An
aacker must guess the admin URL rst, before he tries to manipulate the username or
password informaon.
When you rename the admin folder to something else, the default vericaon checksum le
will not work. This le will sll look for the admin folder, will not nd it, and then give you an
error for each le within this no longer exisng folder. Therefore, directly aer renaming of
the admin folder, create a new custom vericaon le (Site Admin | System Vericaon),
and save it to your local disk. In this way, you hold the current status of the system,
considering the renamed admin directory.
When upgrading CMS Made Simple, before copying upgrade les to your current installaon,
rename your folder back to admin, perform the upgrade, and restore the custom name of
the folder again.
File permissions
If your installaon is on Linux server (please check Site Admin | System Informaon, Server
Operang System if you are not sure), then you should know how le permissions can be
congured to secure your system. A Linux server needs to know two things about the le:
What can be done to a le?
Who can do it with the le?
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 11
[ 321 ]
The rst queson can be broken down to three acons: read, write, and execute. Reading a le
means just opening the le and looking at its contents. Wring means changing, replacing, or
deleng the le. The last opon checks if programs or scripts are allowed to be executed.
The second queson can be broken into three types of user: owner, group, and public. The
owner of the le is the user who has inially created it. The group is not important for our
needs and will be treated the same way as public. Public is every other user on our server
who is not the owner of the le.
With Linux permissions, we combine the preceding informaon and say who is allowed to
do what with each le. You can imagine a permission matrix shown as follows:
Permission Owner Group Public
Read 4 4 4
Write 2 2 2
Execute 1 1 1
You see that there are theorecally 27 possible combinaons for the permissions of only
one le. Any combinaon can be expressed by the sum of the numbers in the preceding
table and changed with the Linux command chmod (change mode). However, you do not
need to know exactly how this command is executed as every FTP browser lets you dene
the permissions intuively.
Let's see and understand some examples for the permission sets:
777 (1+2+4 for each column) means that everybody (all three groups) is allowed to
read, write, and execute the le.
755 means that the owner is allowed to do everything with the le, but group and
public users are only allowed to read and execute the le. They are not allowed to
change it.
644 means that the owner is allowed to execute and read the le, others are only
allowed to read it.
There is a very important le in your installaon that is worth securing with Linux
permissions addionally. This le contains the database’s connecon data and is called
config.php. It is like the heart of your installaon.
While installing or upgrading, the le must be writable at least by the owner of the le, so
its permissions must be set to at least 644. As soon as the installaon or upgrade is nished,
you should lower the permissions of this le to 444 (everyone can read the le, but nobody
can execute or change it).
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Administraon and Troubleshoong
[ 322 ]
In an FTP browser like FileZilla, you can right click on the le and select the opon File
permissions. The next dialog looks like the following screenshot:
Generally, avoid seng any les to 777 if it is not absolutely needed. This permission allows
the reading, changing, and deleng of the le by every user on your server.
CMS Made Simple and server version
In the default template of CMS Made Simple, the version is shown in the footer area
as follows:
This site is powered by CMS Made Simple version 1.6.6
This informaon is provided in the template with the Smarty plugin {cms_version}. Delete
it and do not use it in your templates at all. You should avoid revealing the exact CMS Made
Simple version you use. The reason for this recommendaon is the following scenario.
You use an actual version of CMS Made Simple. One day, a security issue is discovered in this
version. The development team of CMS Made Simple reacts and publishes a security release.
If you do not upgrade your system immediately, your website would be extremely vulnerable
as everybody knows exactly what version you use on the website.
For the same reason, delete the doc folder from your installaon. This folder contains the
le changelog.txt which will reveal the actual version of CMS Made Simple as well. A
malicious person just has to enter in the address bar of the browser the following line:
http://www.yourdomain.com/doc/changelog.txt
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 11
[ 323 ]
Backup all your les and your database again and again. If something is
damaged or lost, then you can save your me and nerves by replacing the
damaged version with the last backup.
Troubleshooting
While designing and conguring websites, you will surely encounter some issues. There is a
soluon for each problem if you know how and where to get help.
If you install CMS Made Simple with sample content and templates, then you will get the
well documented content pages, templates, and stylesheets with a new installaon of
CMS Made Simple. They are an invaluable way of introducing yourself to the applicaon
and geng to know how it works. Read all these pages thoroughly and save them for
future reference.
CMS Made Simple Wiki
The purpose of this Wiki is not only to allow the CMS Made Simple community to collaborate
in the documentaon process, but to also give you an appropriate and easy way to nd
informaon. This documentaon is made by CMS Made Simple users and partly covers more
languages than just English. However, a major part of the Wiki sll remains in English. You
will nd the documentaon on http://wiki.cmsmadesimple.org.
You can search this documentaon to nd answers to your quesons. A search buon is at
the top-right of every page for your convenience. You can read this manual page-by-page or
pick the pages you like. In the Table of Contents at the right-hand side, you can see where
you are (the tle of the page you are reading is black).
In the admin console of CMS Made Simple, you will see the Community Help link at the
top-right of every page (below the main navigaon). This link will take you directly to the
Wiki page dealing with the funcon or the module you currently open in the admin console.
However, there are sll pages that are not wrien yet.
The more users parcipate in wring documentaon, the more answers can be found in it.
CMS Made Simple really needs everyone's assistance to make the documentaon accurate,
user friendly, and understandable. If you want to help, then please register as an editor on
the Wiki site and start to help improving and enhancing the documentaon for your own
reference as well.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Administraon and Troubleshoong
[ 324 ]
Help for modules
While trying to solve issues with the modules, you should dierenate between core
modules of CMS Made Simple and third-party modules. The core modules are installed
with CMS Made Simple, such as News, Menu Manager, Prinng, Search, and so on.
Third-party modules are installed manually. The help for third-party modules is not provided
by the development team of CMS Made Simple but by the module's developer. Therefore,
the quality of the third-party module's help depends on the developer of the module and
cannot be managed by the ocial development team.
Built-in help
Each module installed in a CMS Made Simple website includes basic help and examples to
assist you in ulizing the funconality. With CMS Made Simple, you get the built-in help in
the admin console. Open any module, and nd the link Module Help at the top right below
the main navigaon. The help secons of all modules look mostly similar and contain the
following secons.
What does this do?
This secon explains the purpose of the module and describes the available funconality.
Read this secon thoroughly before starng to use the module. Are all the funcons you
need covered? Will the module solve all your requirements? There are some third-party
modules with very similar funconality. Read this secon for each module in queson,
compare them, and decide which one to use. Also see the Parameters secon (described
as follows) for the advanced funconality.
How do I use it?
This secon is aimed to introduce you to the module's usage. It is a wonderful possibility
to quickly get the rst impression of how the module works by following some simple
instrucons. Depending on the module, this secon is more or less complete and
somemes contains sophiscated usage examples or useful hints as well.
Parameters
This secon contains all the Smarty parameters you can use with the module. There
are required parameters that you must use and some oponal parameters. There is an
explanaon for each parameter with default value (value used if nothing is specied) and
allowed values. The list of parameters will also give you a complete overview of what the
module can do.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 11
[ 325 ]
Forge (bugs and feature request)
If you use some third-party modules and encounter problems, then you can also
check the bug tracker for the module. The bug tracker is a list of known issues
with each module and is provided by CMS Made Simple in the developer secon
(http://dev.cmsmadesimple.org/). It includes not only a list of known problems
but somemes the soluons. Module developers are supposed to check the bug list
regularly and to update their module with new versions.
If you encounter errors with third-party modules, then create a bug report to inform the
developer of the module about the issue and use the support board to get help from the
module's users. The bug tracker is a place where the developer can track the list of errors.
However, it is not the place to raise support requests for the module.
How to get a quick answer in the forum
Using support forums is something that you probably do everyday. So, you may wonder why
this secon is so long. Well, there are some rules that you should follow while asking for free
support in the forums. If you have ever had some quesons unanswered in any forum, then
you should go through the rules given below to see what the developers want from you to
be able to help you.
If you do not follow these rules, then you are not going to get quick answers. Moreover,
your quesons may be completely ignored. Consider that the forum oers support for free.
The developer team and many other volunteers on the forum really want to be helpful and
make things work for you. But remember that they all have jobs, families, friends, and other
responsibilies. None of them are geng paid for the work they do on the forum. You can
buy their me with commercial support or help them to help you by giving them everything
they need.
Using search
Search in the forum for your queson before asking. Remember that a lot of quesons are
already answered and you will get the answer quicker. Use the search buon in the forum
and try dierent spellings, synonyms, and abbreviaons. For example, if you search for any
issue dealing with the module FrontEndUsers and login funconality, try:
Front End Users login
FrontEndUsers login
FEU login
Front End Users sign-in, and so on
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Administraon and Troubleshoong
[ 326 ]
Somemes, it is advisable to search the enre CMS Made Simple project including the
forum, bug tracker, and documentaon with Google. Open the search engine and enter your
search phrase followed by site:cmsmadesimple.org, as shown in the following screenshot:
This would bring up search results from all secons of the CMS Made Simple website and not
only the forum.
Finding the right board
If you did not nd the answer by searching, then use community help. First of all, nd the
right board on the forum for your queson. The important boards on the CMS Made Simple
forum are:
Installaon and Setup: Oers help with geng the core CMS Made Simple up and
running. Once you have successfully installed CMS Made Simple, you should choose
another forum for your support request.
Product Support: Oers help for quesons and problems with the core CMS
Made Simple aer you have nished installing. This board is not for anything that
has not been distributed with the CMS Made Simple package itself.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 11
[ 327 ]
Layout and Design (CSS & HTML): Is intended for discussion and quesons related
to CMS Made Simple templates, stylesheets (CSS), and themes or layout issues.
Modules / Add-ons: Is intended to assist if you have a queson or problem with any
third-party module or plugin that was not included in the standard package of CMS
Made Simple.
Developers discussion: Is for talking about programming with and for CMS
Made Simple.
Internaonal Discussions: Includes boards in other languages. If your problem is
related to any language other than English, you can discuss it here.
Choosing the right board from the very beginning will ensure that you cover the widest
group of users who are able to help you.
Topic subject
Aer you have gured out the correct board for the request, think about the right topic tle
or subject. Let's see some bad examples:
Urgent help needed!
Big issue
Something goes wrong
Give a good summary of your problem as the topic tle. If you encounter a problem with the
login funconality in the module FrontEndUsers, then you should name your topic. Login
issues in Front End Users. Although a lot of people do know the answer to your problem,
they do not have me to look through each topic that is urgent or has a big issue. They
would only pick up the topics with the subjects that they believe they know the answer to.
Provide as much information as possible
Make sure that you provide all the version informaon you can think of. It is beer to include
irrelevant data than to omit useful data. The easiest way to get the required informaon is to
use the page Site Admin | System Informaon in the admin console of CMS Made Simple.
This page includes everything you and someone who will help you should know. But do not
just copy the enre page into the forum. There is a special text version of it. In the
top-right corner of the page (below the main navigaon), you will nd the link View Text
Report (suitable for copying into forum posts). Click on it, copy it, and include it in your
forum post.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Administraon and Troubleshoong
[ 328 ]
Describe the problem step-by-step
Describe the problem, including as much detail as possible (especially including error
messages exactly as they are presented to you). It is not enough to say "If I sign in with the
module FrontEndUsers I get some weird errors."
If nobody knows what the errors are, then nobody will help you. There are no visionaries in
the forum, just developers. Imagine you have a problem with your car. You call the garage
and say "My car does not drive. Help!". If you do not provide more informaon on the exact
behavior of your car, then the garage will not be able to help you. The same will happen in
the support forum.
If the error can be reproduced, then detail the steps that one can follow to repeat the issue
on their own installaon. This is a very good method; somemes by wring step-by-step
what you are doing, you are able to gure out the issue yourself.
Be polite. Do not demand anything as there is no guarantee for a free product. Do not
threaten to use another CMS if your problem is not solved instantly. If you do not like CMS
Made Simple, then you are free to use any other system and claim free instant support
there. However, I assume that you will not get free support this way anywhere. Do not insult
the developers by saying the code of CMS Made Simple is bad or inecient. You are not
going to get any answers this way as in this case the developer team will assume that you
are able to write your own beauful and ecient code and do not need any help.
Be paent. If there is a soluon to your issue, then you will get it. It does not make the
process quicker if you hourly "bump" the topic to appear at the top of the board. On the
contrary, this can be another reason for being ignored.
Help others if you have been helped
Once your queson is answered and you have got your soluon, open your rst post for
eding and add [SOLVED] in front of the topic subject. The developers can then concentrate
on unsolved topics rather than looking into your topic again and again. If you feel that there
is a bug and not a handling issue, then le a bug report for it in the development Forge
(http://dev.cmsmadesimple.org) in addion to posng about it in the forum.
This will help the developers to manage the process of tracking and xing it.
If the queson could not be answered in the forum, but you have found the soluon
yourself, or someone has given the soluon to you by another way, then post it in the
forum so that other people can benet from it. Someday, you will be happy if someone
posts his soluon for an issue you have in your installaon as well.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 11
[ 329 ]
If you follow these steps, then you will save a great deal of me for yourself and the
developers. Geng quick answers is simple.
Commercial support
So you've got CMS Made Simple up and running and you like what you see. However, your
project requires some funconality that isn't yet available for the CMS or doesn't quite
work the way you want it to. For that, the CMS Made Simple development team oers
independent contracng services. Their in-depth knowledge of the tool and experience in
building the package and addional modules can ensure that you get a working, well ng,
and quality tool.
Paid support is available to those people with an important project that are concerned about
the turnaround me that may be related to geng an issue solved. Addionally, if you would
like to have somebody to call for problems that you just can't x, upgrade issues, backups, or
any other concern, then commercial support may be an opon for you.
The CMS Made Simple development team oers various professional services for the web
developer that needs a bit more support or needs something a lile bit dierent.
Support contracts
So, you are creang a new CMS Made Simple website for a very important customer, and
you are concerned about "what if something goes wrong". For example, if the host changes
something, or the site gets hacked, or some unexpected thing happens. You will need to x it
quickly and properly, and you are not sure how you can do this.
It is for such purposes that various members of the development team oer support
contracts. A support contract assures your client that if something unexpected pops up, a
professional and experienced programmer with inmate knowledge of CMS Made Simple
will be available within a reasonable me to either take care of the problem personally, or to
assist you via telephone, video chat, and so on in resolving the issue.
Support contracts are nominally priced, are usually on a per-site basis, for a xed number of
"ckets" and for a limited me period (like one year). Think of it like an insurance policy. If
something goes wrong that you don't know how to x, somebody is there for you.
Your clients will probably feel more secure knowing that there is ongoing technical support
for their business-crical website.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Administraon and Troubleshoong
[ 330 ]
Software development
So you have a number of websites running CMS Made simple already, and all of them are
working well. However, this new site that you are working on is a bit dierent, and you're
going to need some funconality that CMS Made Simple doesn't have yet. You may need
some slight changes to the behavior of some of the exisng funconality. Where can you go?
The CMS Made Simple development team can work with you to determine a soluon to your
problem, either by modifying some exisng code, or by wring something new.
The developer team has a vast amount of experience working with CMS Made Simple and
developing the CMS Made Simple Framework (aer all, they wrote it).
Most of the development team members work on a pay for me mechanism. For a nominal
fee, you can probably get one of the development team members to adjust their schedule to
help you out.
What about larger projects?
The developer team can handle that too. Many of the modules that are available for CMS
Made Simple were sponsored by members of the community who love CMS Made Simple
and its exibility, but needed some funconality that was not yet available. Maybe you can
become another valued sponsor.
You can contact a development team member, and work with them to sponsor a project on a
contract basis. Usually the fees for these contracts are based on a regular consulng rate.
Is the development team a corporation or company?
Actually, no; they are a loosely coupled group of independent contractors that work
together. They collaborate and contribute to CMS Made Simple, to the various add-ons,
and work on issues like support contracts.
They work independently because they are in many dierent locaons spread around the
world, and it is just easier that way. However, they are always ready to help each other, and
spell o each other for various reasons, for example, if one of them is going on vacaon,
the other members are willing to cover for him/her for support contract issues. Similarly,
if somebody is just too busy with other projects, they would be more than happy to
recommend another appropriate development team member to help you.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 11
[ 331 ]
How do I contact you?
Well, you can read more informaon about the development team on
http://www.cmsmadesimple.org/about-link/about-us/ and decide
which member(s) you would like to contact. If you have further quesons that you
would like to ask, but don't want to contact anybody directly yet, then you can feel
free to ask a queson on the Help Wanted (commercial) board.
Pop quiz – administration and troubleshooting
1. What is included in the database backup?
a. The enre website including page structure, languages, modules and
templates.
b. Only page structure, sengs, and templates.
c. Only page structure and design is saved in the les.
d. Database does not include anything that is important to backup the
website.
2. How oen should you backup the website?
a. Everyday.
b. Depending on how oen the changes are made to the content
of the website.
c. Depending on how oen you would like to restore the website.
d. You do not need to care about the backup. This will be done automacally.
3. Why should you regularly upgrade your websites that are run with CMS
Made Simple?
a. To keep the changes made during the whole lifecycle of the page.
b. To inform visitors of your website that you use the newest version of CMS
Made Simple.
c. To keep the installaon secure and avoid vulnerability.
d. To be informed about the new features oered and be able to select
those you need.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Administraon and Troubleshoong
[ 332 ]
4. What name would be the best for the admin account?
a. admin
b. ro0t6i2go
c. webmaster
d. test
5. Where do you nd free help when you encounter issues?
a. Any HTML or CSS reference.
b. Ocial help board of CMS Made Simple.
c. Personal message to one of the CMS Made Simple developer.
d. Comments in the installaon les and database.
6. How can you stay informed about any updates of CMS Made Simple?
a. You will be e-mailed automacally if an update is available.
b. You have to look up in the ocial board daily.
c. You will see the appropriate message in the admin console of CMS
Made Simple.
d. CMS Made Simple does not oer any updates for free.
Have a go hero – congure backup and stay up-to-date
Congure the backup for your website right now. If something goes wrong, you will not
be able to recover the website without a backup. Double-check that your backup les
include les and database as both of them are important. Play a recover scenario in case of
emergency, so that you can be sure that backup is not corrupted or incomplete.
Stay up-to-date. Sign in with the ocial forum of CMS Made Simple and subscribe for new
topics in the board Announcements (also RSS Feed is available for your convenience).
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Chapter 11
[ 333 ]
Summary
In this chapter, you have learned a lot of stu concerning the administraon of CMS Made
Simple. As menoned at the beginning of the chapter, you do not need to read all of the
secons in this chapter. But I strongly recommend going through the secons on How to
secure your installaon and Troubleshoong.
Specically, we covered:
How to backup a CMS Made Simple website in case of an emergency. You have
learned that the website consists of two parts, its les and the database. It is
important to create backups for both the parts. Two ways of creang a backup were
discussed, that is, third-party modules and manual backups for people who have
hosng with restricons.
How to move the website from one hosng to the other. You have to move your
website if you change the hosng provider.
How to upgrade CMS Made Simple and its modules. We have learned why it is so
important to upgrade the system regularly. You gain not only new features, but
improved performance and security. It is your responsibility to upgrade the system
and stay up-to-date with CMS Made Simple's development.
How to secure the installaon. There were some useful ps on how you can quickly
secure your system and protect it from hacking, aack, and damage. Remember that
if you spend some me learning how to secure the website from the very beginning,
then it can save you days and weeks of geng your website backup and running, if it
gets aacked.
How to get a quick answer in the support forum. You got some ps on how to get
the best answers from the free support forums of CMS Made Simple. Reading this
secon will save you a lot of me while solving issues with the installaon.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Pop Quiz Answers
Chapter 3
Creating Pages and Navigation
1 c
2 b
3 a
4 c
5 c
6 b
7 b
8 a
9 b
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Pop Quiz Answers
[ 336 ]
Chapter 4
Design and Layout
1 a
2 a
3 b
4 d
5 a
6 d
7 c
8 d
9 a
10 b
Chapter 5
Using Core Modules
1 a
2 b
3 a
4 c
5 d
6 b
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Appendix
[ 337 ]
Chapter 6
Users and Permissions
1 a
2 d
3 c
4 c
5 a
6 d
7 b
Chapter 7
Using Third-party Modules
1 b
2 b
3 c
4 d
5 a
6 b
7 c
Chapter 8
Creating Your Own Functionality
1 a
2 b
3 b
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Pop Quiz Answers
[ 338 ]
Chapter 9
E-commerce Workshop
1 b
2 a
3 b
4 b
5 a
Chapter 10
Advanced Use of CMS Made Simple
1 b
2 d
3 a
4 a
Chapter 11
Administration and Troubleshooting
1 b
2 b
3 c
4 b
5 b
6 c
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Index
Symbols
{breadcrumbs} 71
{cms_version} 71
{cms_versionname} 71
{created_date} 71
{current_date} 71
{last_modied_by} 71
{menu_text} 71
{modied_date} 71
{root_url} 71
{sitename} 71
A
addional content blocks
about 275
adding, for subtles 275
addional editors 152, 153
addional modules
installing 137-139
add to my cart template 246
AD Gallery 172
admin console, CMS Made Simple
about 29-31, 300
CMS menu 31
content menu 31
extensions menu 32
layout menu 31
logging in 30
my preferences 32
site admin menu 32
system informaon 300
users & groups menu 32
admin email template 249
administrator 146
admin log
viewing 157
Archiver
about 158
installing 158
B
billing form template 249
breadcrumbs 54
browsecat parameter 121
built-in help, troubleshoong
about 324
funcons 324
parameters 324
working 324
C
canonical URLs
tags, using for 288
Captcha
about 182
acvang 183
adding, to forms 182
installing 182
cart module
about 245
add to my cart template 246
installing 245
my cart template 246
products and cart, connecng 245, 246
product summary template 246
view cart template 246
case study website
about 10
funconal specicaons 10
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
[ 340 ]
Cataloger 231
chmod 321
CMS
about 8
exisng templates, working with 66
structure 8
versus, site builder 9
CMS Made Simple
about 9
addional content blocks 274
addional modules, installing 137
admin console 29
advanced uses 296, 297
advantages 9
advantages, of upgrading 311
case study website 10
dates, conguring 266
e-mails, sending 33
FMS 231
images, uploading 126
installaon, securing 316
installing 20
issues 35
localizaon 265, 266
Module Manager, using 136
modules, adding to website 136
modules, installing with XML le 139, 140
modules, translang 273
module upgrades 140
moving to another hosng 309-311
mullingual websites, making 267
opmizing 314
page alias 41
requisites 11
roles 146
SEO 277
Shootbox Made Simple 231
SMS 231
translaon 272
troubleshoong 323
upgrading 311, 312, 313
user-dened tags 289
CMS Made Simple, requisites
browser 11
CMS Made Simple les, uploading 12-17
le archiver 12
FTP browser 12
CMS Made Simple les
uploading 12-17
CMS Made Simple installaon
about 20
admin account, creang 26, 27
database informaon, changing 27, 28
le creaon mask, tesng 25
le integrity, validang 21
language, selecng 20
requirements, checking 22-25
sample content 28
tables, creang 28
templates 28
CMS Made Simple Wiki, troubleshoong
about 323
third-party modules help 324
CMSMS Forge 137
commercial support, troubleshoong
about 329
larger projects 330
soware development 330
support contracts 329
conrmaon email template 254
conrm order template 249
contact form
adding, to website 174, 175
Captcha, acvang 183
Captcha, adding 182
customizing 176, 177
elds, adding 178
mulple choice selecon eld, adding with
checkbox group 181
pulldown eld, adding 180
salutaon elds, adding 178, 179
templates 177
content pages
changes, archiving 158
changes, restoring 158, 159
content permissions
about 150
addional editors 152
add pages permission 153, 154
editor account, creang 150-152
new pages, creang 153
content types
about 59
content 59
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
[ 341 ]
error page 59
external link 59
internal page link 59
secon header 59
separator 59
core modules
about 107
customizaon, applying 142
File Manager 125
Menu Manager 130
news module 110
prinng module 133
search module 122
using 141
custom elds
adding, to news module 119
custom elds, products module
creang 234
dening 235
Is this a public eld 235
name 234
prompt 235
type 235
D
database, back up
making, with module 306
dates
conguring 266
date format string 267
examples 267
format 267
default permissions
add global content blocks 160
add groups 160
add pages 160
add stylesheet associaons 160
add stylesheets 160
add templates 160
add users 160
advanced usage of the File Manager module
162
allow usage of advanced prole in TinyMCE 160
approve news for frontend display 160
clear admin log 160
delete news arcles 160
manage all content 160
manage menu 160
manage themes 161
modify any page 161
modify events 161
modify les 161
modify global content blocks 161
modify group assignments 161
modify groups 161
modify modules 161
modify news 161
modify permissions for groups 161
modify site preferences 161
modify stylesheet associaons 161
modify stylesheets 161
modify templates 161
modify user dened tags 161
modify users 162
overview 160
remove global content blocks 162
remove groups 162
remove pages 162
remove stylesheet associaons 162
remove stylesheets 162
remove templates 162
remove users 162
view tag help 162
descripon meta tags 279
designer 146
designer permissions
about 155
set of permissions 155
test area, creang 156, 157
detail templates
about 242
customizing 242-244
duplicate content
avoiding 286
prevenng steps 286-288
E
e-commerce suite
oponal modules 261
e-commerce workshop 262
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
[ 342 ]
e-mails, CMS
sending 33
editor 146
email template 177
events
about 293
mails, sending aer page update 293, 294
triggering 293
exisng templates
ready-made template, imporng 66, 67
working with 66
extra page aribute
about 276
using 276
F
FFmpeg 191
elds
adding, to forms 178
File Manager 125
les
browsing, File Manager used 125
nal message template 254
Forge, troubleshoong 325
FormBuilder
about 174
Captcha, adding to forms 182, 183
contact form, adding to website 174, 175
contact form, customizing 176, 177
elds, adding to forms 178
installing 174
form template 177
G
gallery
creang 168
images, uploading 168, 169
gallery module
installing 168
gateway complete template 249
global content blocks
about 108
adding, to website 108-110
global meta tags
adding 52
H
hierarchy report templates
about 237
customizing 237, 239
HTML template
porng 84
porng, to CMS Made Simple 85-90
I
IF code 94
IF structure 96
Image Manager 126
images
uploading, image editor used 126, 128
using, in content 128, 129
using, in templates 128, 129
includetemplate parameter 134
installaon security, CMS Made Simple
admin directory, hiding 320
le permissions 320, 321
password, checking 319
securing 316
server version 322
simple version 322
system vericaon 317, 318
username, checking 319
Instant Payment Nocaon. See IPN
invoice template 249
IPN 225
J
job 183
jQuery
integrang, in navigaon 294-296
K
keywords
using, in image les 283
using, in page alias 283
L
link template 134
localizaon 265, 266
lost email template 254
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
[ 343 ]
M
manual back up, website
about 307
database, backing up with phpMyAdmin
307-309
Mary 153, 154
Menu Manager 130
menu template
creang 97-99
message template 249
meta elements 50
meta tags
about 50, 279
adding, to pages 50, 51, 279, 280
descripon meta tags 279
keywords 280
mod_deate 315
module FrontEndUsers sengs
about 214
adjusng 215
preferences 215
Module Manager
about 136
using 136
module permissions 162
modules
custom translaon 274
installing, with XML le 139, 140
removing 140
translang 273
uninstalling 140
mullingual websites
about 267
ags, adding as language menu 270
hierarchy soluon 270
language entries, eding 269
making 267, 269
news arcles, separang by language 271
mulple choice selecon eld
adding, to forms 181
mysql binaries 306
my cart template 246
N
navigaon
adding, to template 79, 80
creang 63, 78
designing 80
designing, with pure CSS 80-82
sidebar navigaon, adding 83
navigaon control, website
about 57
content types, used 59
default page 58
pages, hiding 57, 58
navigaon template
creang, with Smarty loop 96, 97
menu template, creang 97-99
neolao 191
new products catalog module
basic informaon 197
creang 196
nal step 207, 208
rst level (categories), creang 198-201
second level (products), creang 202-207
new products catalog module conguraon
about 208
product list template, creang 209, 210
news
displaying, on website 111, 112
news categories
about 114
creang 114, 116
Newsleer Made Simple. See NMS
news module
about 110, 111
custom elds, adding 119
news, adding 112
news items, adding to page 112, 113
news arcles, managing 110
news categories 114
news templates, customizing 116
news tle, using as page tle 122
news templates
browse category 116
customizing 116
detail 116
form 116
new summary template, creang 117-119
summary 116
NMS
about 183
installing 183
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
[ 344 ]
mails, sending to registered customers 184-186
templates 187
O
opmizaon, CMS Made Simple
about 314
compression 314
CSS, in global sengs 315, 316
persistent connecon 315
orders module
about 247
admin email template 249
billing form template 249
checkout step, adding 248
conrm order template 249
customer registraon, integrang 252, 254
gateway complete template 249
invoice template 249
login screen, integrang 250-252
message template 249
payment form template 249
user email template 249
output, Smarty basics
controlling, with IF funcon 94
tags, hiding 94
override print stylesheet tab 134
P
page alias 41
page content
formang 43, 45
formang, WYSIWYG editor used 44
page hierarchy
about 52
breadcrumbs 54
search engine friendly URLs 54
search engine friendly URLs, enabling on
website 55
sub pages, adding to website 52-54
pages
adding, to website 39, 40
changes, previewing 43
creang 39, 63
deleng 43
eding 42
exisng pages, eding 42
global meta tags, adding 52
meta tags, adding 50
mulple pages, changing 60
new page, creang as copy of exisng page 60
page alias, changing 43
prinng 133
parameters, news module
browsecat 121
showall 121
Payment Data Transfer. See PDT
payment form template 249
Paypal Gateway module
about 255
installing 256
PayPal returns payment data methods 255
test accounts, creang 256, 257
PayPal returns payment data methods
about 255
IPN 255
PDT 255
PayPal seller account
conguring 258
instant payment nocaon 259
language encoding 260, 261
payment receiving preferences 258
website payment preferences 259
PDF sengs tab 134
PDT 255
photo gallery
albums, adding 170
creang 168
custom gallery template, creang 172-174
images, uploading 168, 169
images, using on other pages 170
random images, adding to template 170, 171
resize methods 169
PHP code
execung, in tags 293
phpMyAdmin 307
popup parameter 134
printed version, webpage
customizing 135
prinng module 133
print link
adding 133
customizing 135
media type, adding to stylesheets 135
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
[ 345 ]
PDF version of page, generang 136
print template 134
print versions, pages
avoiding 287
product catalog
about 195
creang 195, 196
examples 196
new catalog-like module, conguring 208
new catalog-like module, creang 196
product hierarchy, products module
categories 236
creang 236
products module
about 232
advantages 232
custom elds, creang 234
rst product, adding 233, 234
product hierarchy, creang 236
product templates, customizing 237
product summary template 246
product templates, products module
customizing 237
detail templates 242
hierarchy report templates 237
summary templates 239
protected pages
creang 216
service desk, protecng 217
pulldown eld
adding, to forms 180
Q
Qualier 95
Qualiers, Smarty
eq 96
gt 96
gte 96
lt 96
lte 96
mod 96
neq 96
not 96
queson module
installing 137, 139
R
reCaptcha
about 183
advantages 183
registraon Template 1 254
registraon template 2 254
resize methods, photo gallery
crop 169
scale 169
zoom & crop 169
zoom & scale 169
roles
about 146
administrator 146
designer 146
editor 146
Russian Translaon Center example 272
S
salutaon elds
adding, to forms 178, 179
sample website 62
script parameter 134
search engine friendly URLs 284
search engine friendly URLs
about 54, 284
enabling, on website 55
example 56
Search engine opmizaon. See SEO
search module
about 122
search form, adding 123-125
selfregistraon module
about 252
conrmaon email template 254
nal message template 254
installing 252
lost email template 254
methods 253
registraon template 1 254
registraon template 2 254
SEO
about 277
duplicate content, avoiding 286
keywords, using in image les 283
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
[ 346 ]
keywords, using in page alias 283
meta tags 279
page tle 277, 278
search engine friendly URLs 284
SEO markup, using in pages 282, 283
SEO markup, using in templates 281
visitor stascs 289
XML sitemaps creang 288
SEO markup
using, in pages 282, 283
using, in templates 281
service desk funconality
custom funconality 229
implemenng 211
module frontend users, sengs 214, 215
protected pages, creang 216
support cket system, creang 218
templates, FrontendUsers module 215
visitors logins, managing 211
Shop Made Simple (SMS) 231
showall parameter 121
showbuon parameter 134
sidebar navigaon
adding 83
sitemap
creang 130-132
sitemaps 288
Smarty basics
learning 91
navigaon template, creang with smarty loop
96, 97
output, controlling with IF funcon 94
Smarty variables, working with 91
Smarty parameters 72
Smarty plugins
about 73
using, in content 74
Smarty tags
about 67
adding, to templates 70
Smarty variables
about 91
geng 91-93
working with 91
Smarty web template system 67
Smarty plugins 73
Smarty tags
{breadcrumbs} 71
{created_date} 71
{last_modied_by} 71
{menu_text} 71
{modied_date} 71
adding, to templates 71
stylesheets
adding, to template 74
creang 75-77
media types 78
submission template 177
sub pages
adding, to website 52
summary templates
about 239
creang 117, 118
customizing 239-241
support forums, troubleshoong
helping others 328, 329
problem, describing 328
right board, nding 326, 327
search, using 325, 326
topic subject 327
version informaon, providing 327, 328
support cket system
about 218
answer elds, adding 222, 223
creang 218
creang, CGFeedback module used 218-221
dialogue, enabling 226-229
summary template 223
cket list, customizing 223-225
system informaon
CMS Install Informaon 300
PHP Informaon 300, 301
Server Informaon 300-303
T
tags output
controlling 72
Smarty tags, adding to template 72
template
creang 67-69
dynamic parts, adding 69
exporng 101
output, controlling 72
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
[ 347 ]
Smarty tags, adding 70
Smarty tags, adding 71
stylesheets, adding 74
Template Externalizer 157
templates, FrontendUsers module
change sengs template 215
forgot password template 215
login template 215
logout template 215
lost username template 215
view user template 215
templates, NMS
archieve templates, 187
conrm subscribe, 187
subscribe, 187
unsubscribe, 187
user sengs, 187
text parameter 134
third party modules 192, 193
TinyMCE
conguring 45, 46, 47
replace funcon, acvang 48, 49
search funcon, acvang 48, 49
translaon 272
Translaon Center
about 272
Russian Translaon Center example 272, 273
troubleshoong, CMS Made Simple
about 323
built-in help 324
CMS Made Simple Wiki 323
commercial support 329
forge 325
support forums, using 325
U
upgrade, CMS Made Simple
about 311-313
advantages 311
user
assigning, to group 148, 149
creang 146, 147
user-dened tags
about 289
creang 290
custom user-dened tag, creang 290, 291
page informaon, geng in UDT 292
parameters, adding 291
user email template 249
user nocaons 163
V
videos
displaying 188
own video player, adding 190, 191
view cart template 246
visitors login
managing 211, 212
user account, creang 212-214
visitor stasitcs 289
W
website, back up
database, backing up 306
manual backup 307
website les, backing up 304
website, CMS Made Simple
backing up 303, 304
les, backing up 304
website les, back up
making, with module 304, 305
WYSIWYG editor 44
X
XML sitemaps
creang 288
Y
YouTube videos
embedding 188-190
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Thank you for buying
CMS Made Simple 1.6: Beginner’s Guide
Packt Open Source Project Royalties
When we sell a book written on an Open Source project, we pay a royalty directly to that
project. Therefore by purchasing CMS Made Simple 1.6: Beginner’s Guide, Packt will have
given some of the money received to the CMS Made Simple project.
In the long term, we see ourselves and you—customers and readers of our books—as part of
the Open Source ecosystem, providing sustainable revenue for the projects we publish on.
Our aim at Packt is to establish publishing royalties as an essential part of the service and
support a business model that sustains Open Source.
If you're working with an Open Source project that you would like us to publish on, and
subsequently pay royalties to, please get in touch with us.
Writing for Packt
We welcome all inquiries from people who are interested in authoring. Book proposals
should be sent to [email protected]. If your book idea is still at an early stage and you
would like to discuss it rst before writing a formal book proposal, contact us; one of our
commissioning editors will get in touch with you.
We're not just looking for published authors; if you have strong technical skills but no writing
experience, our experienced editors can help you develop a writing career, or simply get some
additional reward for your expertise.
About Packt Publishing
Packt, pronounced 'packed', published its rst book "Mastering phpMyAdmin for Effective
MySQL Management" in April 2004 and subsequently continued to specialize in publishing
highly focused books on specic technologies and solutions.
Our books and publications share the experiences of your fellow IT professionals in adapting
and customizing today's systems, applications, and frameworks. Our solution-based books
give you the knowledge and power to customize the software and technologies you're using
to get the job done. Packt books are more specic and less general than the IT books you have
seen in the past. Our unique business model allows us to bring you more focused information,
giving you more of what you need to know, and less of what you don't.
Packt is a modern, yet unique publishing company, which focuses on producing quality,
cutting-edge books for communities of developers, administrators, and newbies alike. For
more information, please visit our website: www.PacktPub.com.
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600
Building Powerful and Robust
Websites with Drupal 6
ISBN: 978-1-847192-97-4 Paperback: 380 pages
Build your own professional blog, forum, portal or
community website with Drupal 6
1. Set up, congure, and deploy Drupal 6
2. Harness Drupal’s world-class Content
Management System
3. Design and implement your website’s look
and feel
4. Easily add exciting and powerful features
5. Promote, manage, and maintain your
live website
Alfresco 3 Enterprise Content
Management Implementation
ISBN: 978-1-847197-36-8 Paperback: 600 pages
How to customize, use, and administer this powerful,
Open Source Java-based Enterprise CMS
1. Manage your business documents with version
control, library services, content organization,
and advanced search
2. Create collaborative web sites using document
libraries, wikis, blogs, forums, calendars,
discussions, and social tagging
3. Integrate with external applications such as
Liferay Portal, Adobe Flex, iPhone, iGoogle,
and Facebook
4. Automate your business process with the
advanced workow concepts of Alfresco 3
Please check www.PacktPub.com for information on our titles
This material is copyright and is licensed for the sole use by Niels Vils on 17th August 2010
Thorsøhøjen 8, Silkeborg, 8600