Cet article est assez long mais montre la facilité, la flexibilité et la rapidité avec laquelle vous pourrez développer votre projet avec CMS Made Simple (CMSMS).
Suivant le conseil de Benoît Henry à propos des CMS, j’ai choisi CMSMS pour ma première expérience. J’avais jusque là développé mes propres CMS. Les développeurs Web considèrent que CMSMS est intuitif et felxible. De plus, vous trouverez des articles très bien commentés sur le Wiki officiel de CMSMS.
CMSMS est une solution PHP-MySql Open Source que j’utiliserais pour des sites web aux exigences conventionnelles, pour des organisations sans but lucratif, par exemple, puisqu’il nécessite un temps de développement court et une implémentation rapide. Vous pouvez le télécharger sur CMSMS.org.
Cet article a été réalisé sur base de CMSMS 1.6.6.
Le seul aspect négatif que je mentionnerais ici est qu’il faudra que le développeur Web mette son CMSMS et les modules, plugins,… à jour régulièrement pour profiter des corrections de bugs et de failles de sécurité.
J’ai configuré un CMSMS en quelques heures (le développement du layout avait été réalisé au préalable) avec les options suivantes :
- url rewriting (urls dynamiques du type : http://www.mondomaine.be/notre_projet.htm)
- des templates dynamiques avec Smarty (le moteur PHP de templates)
- un moteur de recherche interne
- une zone client privée (+ login avec captcha)
- une page contact (avec PHP mail et le module CMSMailer)
- des meta tags “description” and “keywords” générés automatiquement
- des fils d’ariane (breadcrumb trails)
CMSMS fonctionne avec des modules que l’on installe pour ajouter des fonctionnalités telles que :
- un générateur de formulaires
- un formulaire avec champ captcha (vérifie que l’utilisateur est un être humain plutôt qu’un robot)
- un calendrier
- …
Vous trouverez tous les modules, plugins, templates disponibles sur CMSMS Forge.
Documentation
Pour ma première installation, j’ai choisi d’installer des données exemples, ce qui rend l’adaptation et la compréhension du fonctionnement de CMSMS plus aisées. Une fois installé, sélectionnez le Menu Disposition / Gabarits (templates) et éditez le gabarit pour comprendre comment le moteur de template (Smarty) fonctionne.
Les modules and Balises (tags) que vous trouverez dans le Menu Extensions sont fournis avec des fichiers d’aide qui détaillent l’implémentation de ces fonctionnalités.
Le wiki officiel de CMSMS offre des articles bien documentés sur tout ce qu’il faut savoir pour adapter CMSMS à vos besoins.
Caractéristiques de développement Web
Implémenter CMSMS nécessite le développement Web de templates et feuilles de style css, le paramétrage des formulaires, modules choisis,… et la définition des accès administrateur par la gestion des groupes, utilisateurs et permissions. CMSMS est flexible et vous pouvez créer de nouveaux groupes d’administrateurs et définir leurs permissions de sorte que votre client n’aie pas la possibilité de rendre lui-même son site inaccessible. Vous pouvez par exemple paramétrer les droits d’éditeurs de sorte qu’ils ne puissent que modifier le contenu des pages. Ils ne pourront ainsi pas modifier vos scripts et paramétrages.
Les templates Smarty de CMSMS
Une caractéristique majeure de CMSMS est l’emploi de templates pour générer les contenus des pages. Les templates sous CMSMS sont accessibles par le Menu Disposition > Gabarits. CMSMS utilie Smarty, un moteur de template qui implémente votre template de manière dynamique grâce au code suivant, avec les variables placées entre accolades :
{metadata}
Mettez cette ligne de code entre les balises <head> et </head> et cette variable affichera les méta-données globales définies dans le Menu Administration de site > Paramètres globaux > Méta-données globales. Vous faites ainsi apparaître les balises suivantes sur toutes vos pages dynamiquement :
<meta http-equiv=”Content-type” content=”text/html; charset=iso-8859-1″ />
<meta http-equiv=”Content-Language” content=”fr-be” />
<meta name=”robots” content=”index,follow” />
<base url=”http://127.0.0.1/ael/cmsms” />
<link rel=”shortcut icon” href=”./favicon.ico” />
La variable suivante placée dans le template entre les balises <head> et </head> est basée sur le plugin appelé “autometa” :
{autometa}
Le plugin autometa est téléchargeable à partir de CMSMS Forge : autometa. Téléchargez-le et placez le fichier .php dans le répertoire plugins de CMSMS. Une fois inséré dans la <head> de votre template, le plugin génèrera dynamiquement les balises meta description et meta keywords à partir du contenu de la page. Si vous voulez paramétrer vos meta tags page par page manuellement, plutôt que laisser autometa les générer lui-même, vous le pouvez également (cliquez sur l’onglet “Options” dans le contenu de la page en question et remplissez le champ “méta-données spécifiques pour cette page”). Tapez :
<meta name=”description” content=”description de la page” />
<meta name=”keywords” content=”mots-clefs,pour, cette, page” />
Si vous désirez insérer du javascript dans votre template, ajoutez le code entre les balises {literal} et {/literal} :
{literal}
<script type=”text/javascript” language=”javascript” src=”./js/empty_fields.js”></script>
{/literal}
Dans le Menu Disposition > Gabarits, vous pouvez aussi cliquer sur le bouton “CSS” pour attacher une feuille de style à votre template. Ajoutez ensuite :
{stylesheet}
à l’intérieur de la balise <head> de votre template pour insérer les feuilles de styles attachées à ce template.
Vous devrez au préalable créer les feuilles de style dans le menu DIsposition > Feuilles de style.
Si vous voulez ajouter des commentaires à votre template, utilisez les {* et *} :
{* voici comment ajouter un commentaire à votre template *}
CMSMS et url rewriting en un clin d’oeil
Si vous désirez que CMSMS exprime des urls plus élégantes du type : http://www.moncmsms.com/comment-parametrer-cmsms/templates.htm au lieu de http://www.moncmsms.com/index.php?page=comment-parametrer-cmsms, vous devez :
- modifier quelques variables dans /config.php :
$config['url_rewriting'] = true;
$config['page_extension'] = ‘.htm’;
- puis créez un fichier .htaccess dans le root de votre projet Web avec les lignes suivantes :
SetEnv MAGIC_QUOTES 0SetEnv REGISTER_GLOBALS 0SetEnv PHP_VER 5Options +FollowSymLinksRewriteEngine onRewriteCond %{HTTP_HOST} ^moncmsms.be$ [NC]RewriteRule ^(.*)$ http://www. moncmsms.be/$1 [QSA,L,R=301]#Sub-dir e.g: /cmsmsRewriteBase /# 301 Redirect all requests that don’t contain a dot or trailing slash to# include a trailing slashRewriteCond %{REQUEST_URI} !/$RewriteCond %{REQUEST_URI} !\.RewriteRule ^(.*) %{REQUEST_URI}/ [R=301,L]# Rewrites urls in the form of /parent/child/# but only rewrites if the requested URL is not a file or directoryRewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQUEST_FILENAME} !-dRewriteRule ^(.+)$ index.php?page=$1 [QSA]
{breadcrumbs starttext=’Vous êtes ici’ root=’Home’ delimiter=’»’}
Ajouter un moteur de recherche interne à votre template
<div id=”search”>{search search_method=”post”}</div>
Ajouter une structure de pages en accès privé à CMSMS
Pour ajouter une zone privée avec login et mot de passe à votre CMSMS, Vous devrez télécharger et installer 3 modules complémentaires :
- FrontEndUsers (FEU) (vous autorisera à gérer les utilisateurs front-end, c’est-à-dire les internautes)
- CustomContent (vous permet d’afficher différents contenus à vos différents utilisateurs front-end)
- Captcha (à utiliser pout ajouter un test Captcha à votre formulaire de login)
Une fois décompressés, copiez les répertoires de ces modules dans le réperoire Modules de votre CMSMS. Puis installez ces modules par le Menu Extensions > Modules dans l’ordre cité ci-dessus (FrontEndUsers, puis CustomContent, et enfin Captcha).
FrontEndUsers (FEU)
Le Menu Utilisateurs/Groupes > Gestion des utilisateurs du site est maintenant disponible. Ouvrez-le et :
- allez dans l’onglet “Propriétés de l’utilisateur” pour ajouter des propriétés au profil de l’utilisateur (une propriété appelée “nom” avec el type “texte” et une propriété appelée “email” avec le type “Adresse email”)
- allez dans l’onglet “Groupes” pour créer un groupe appelé “client_users” et paramétrez vos propriétés (nom et email comme champs optionnels ou requis, et cochez “demandé lors de la récupération de l’identifiant” en ce qui concerne la propriété “email”)
- allez dans l’onglet “Utilisateurs” et ajoutez un utilisateur pour ce groupe (n’oubliez pas de cocher le groupe du nouvel utilisateur). Puis vous devrez remplir les propriétés définies précédemment.
Créez ensuite la page Login. Allez dans le menu Contenu > Pages > Ajouter un nouveau contenu et créez la page login avec le contenu suivant :
{FrontEndUsers}
Puis associez cette nouvelle page avec votre template principal (par l’onglet “options”).
Votre CMSMS client affiche maintenant une page login avec formulaire d’identification et test Captcha.
Paramétrer les contenus de l’espace privé
Une fois que l’utilisateur est identifié, Le CMSMS client devrait afficher les entrées de menu supplémentaires : les pages de l’espace privé. Il est assez simple de le réaliser. Nous utiliserons le module CustomContent pour ce faire. Vous devrez créer un template privé à associer aux pages privées.
Vous pouvez copier le template principal de votre site en cliquant dur le bouton “copier”.
Au lieu de taper :
{content}
pour afficher le contenu de la page directement, tapez :
{if $ccuser->loggedin()}
{content}
{else}
Désolé, vous devez vous identifier d’abord
{/if}
Puis créez une page privée dans le Menu Contenu > Pages et associez-la avec le nouveau template privé dans l’onglet “Options”.
Votre contenu privé devrait être affiché correctement une fois identifié côté client.
Le gestionnaire de Menu
CMSMS contient un gestionnaire de menus pour éditer ou créer de nouveaux templates de menus.
Vérifiez d’abord quel menu est chargé dans votre template par défaut. Ouvrez le Menu Disposition / Gabarits et cherchez le contenu de la div id=”menus”. Imaginons que le template de menu soit cssmenu_ulshadow.tpl.
Ouvrez le Menu Disposition > Gestion de Menu. Votre cssmenu_ulshadow.tpl n’es pas éditable (mais en lecture seule). Importez ce menu dans votre base de données en cliquant sur le bouton “Importer”. Donnez un nom à ce nouveau template de menu (“test”, dans mon cas).
Editez le template de menu “test”. Vous y trouverez du code Smarty, le moteur de template. Recherchez-y la première boucle “Foreach” et ajoutez la ligne suivante juste après :
{$node->id}
Ensuite, vous devez changer le template de page par défaut pour qu’il prenne en charge votre menu “test”. Allez dans le Menu Disposition > Gabarits, et éditez le template par défaut (NClearBlue dans mon cas) et changez le contenu de la div menu en :
{*menu template=’cssmenu_ulshadow.tpl’*}
{menu template=”test1″}
J’ai simplement commenté le template de menu par défaut et ajouté mon nouveau template de menu.
Allez sur le site client, rafraîchissez la page et vous verrez apparaître l’ID numérique de la page privée (57 dans mon cas).
De retour au Menu Disposition > Gestion de Menu, éditez le menu “test”, et remplacez le {$node->id} par :
{if (($node->id == 57 and $ccuser->loggedin()) or $node->id <> 57)}
qui vérifiera si la page affichée est la zone privée. Si c’est le cas, l’utilisateur doit s’être préalablement identifié pour que le menu s’affiche.
La dernière chose à faire est f’ajouter :
{/if}
juste avant le {/foreach} en fin de fichier.
Webliographie :