Mise à jour : Mai 2013

Création d'un site léger et performant avec forums

Disposer d'un forum de discussions sur son site peut répondre à de nombreux besoins, notamment pour une association. Nous allons vous montrer comment créer ce site très simplement en utilisant des outils gratuits open sources simples et performants.

Les objectifs sont les suivants :

  • Créer un site à partir d'un template élégant disponible sur le web ;
  • Le site doit être généraliste et disposer d'un forum de discussions sans limitation de taille ;
  • Le site doit être facilement administrable par un novice ;
  • Le site doit être rapide (pas d'usine à gaz).

GetSimple avec Vanilla Forums

Nous allons associer le CMS généraliste GetSimple avec le CMS spécialisé Vanilla-Forums. Ces deux outils simples et légers répondent exactement aux besoins. Les deux CMS resteront indépendants. A aucun moment ils ne tourneront en même temps ; la performance ne sera donc pas impactée par cette association.

GetSimple est installé à la racine du site. C'est fait en 5 minutes en suivant le mode d'emploi. No problem.

Vanilla est installé dans le dossier "forum" qu'il faut créer depuis la racine. Installation également rapide. Il faut juste disposer des éléments de la base MySQL (serveur, nom de la base, login, mot de passe).

Des centaines de templates sont disponibles gratuitement sur le web. Nous reprenons celui qui a été utilisé pour la fiche création d'un site avec template et CMS, c'est plus simple.

Template à 3 pages

Ce site de départ sera composé des trois pages ci-dessus et de la partie forum qui sera le quatrième élément du menu. Les trois pages tourneront sous GetSimple et le forum sous Vanilla. Les deux CMS seront isolés l'un de l'autre et disposeront chacun de leur template. Le visiteur ne verra aucune différence et le site sera parfaitement homogène.

Certains éléments, visibles pour l'ensemble du site, vont nécessiter une passerelle entre les CMS. C'est le cas du menu, de l'information de connexion et de la recherche.

Le descriptif a été fait dans la fiche création d'un site avec template et CMS. La partie concernant le menu est un peu différente :

  • Ajout du plugin Hierarchical Menus pour un menu sur plusieurs niveaux. Mise en place d'un menu DropDown.
  • Ajout du choix "Forum" dans le menu.
  • Récupération du menu de Vanilla stockée dans un cookie. Ajout de ce menu en DropDown sous "Forum".
  • Récupération du nom du visiteur connecté sur le forum stocké également dans un cookie. Ajout du nom à droite sur la barre de menus.
<div id="templatemo_menu">
        <?php
        get_hierarchical_navigation(get_page_slug(false));
        ?>
        <li><a href="/forum/" title="Forum">Forum</a>
        <?php
        $menu = base64_decode($_COOKIE['VanillaMenu']); // menu VANILLA
        if ($menu && $_COOKIE['Vanilla']) echo $menu;
        else echo   "<ul><li><a href="/forum/discussions">Discussions</a></li><li><a href="/forum/activity">Activité</a></li></ul>";
        ?>
        </li></ul>
    <div id="connectUser">
        <?php
            if ($_COOKIE['VanillaUser'] && $_COOKIE['Vanilla']) echo <a href="/forum/entry/signout?Target=discussions">" . base64_decode($_COOKIE['VanillaUser']) . " | déconnexion</a>";
            else echo "<a href="/forum/entry/signin?Target=discussions">connexion</a>";
        ?>
    </div>
</div> <!-- end of menu -->

Il faut modifier template.php et template_page.php.

Sous Vanilla-Forums, les templates se trouvent dans le dossier /forum/themes/nom du thème. Il faut un fichier about.php et un fichier screenshot.png. Le plus simple est de reprendre les modèles du thème "default".

Il faut également créer les dossiers "design" et "views".

  • Design contiendra le fichier style.css copié de "default", notre fichier templatemo_style.css et le dossier avec les images du thème ;
  • Views contiendra le template qui doit s'appeler "default.master.php". Il n'y en a qu'un seul.

Pour default.master.php, copier le fichier template_page.php de GetSimple, le renommer default.master.php. Plus qu'à modifier le contenu pour l'adapter à Vanilla :

  • Modifier les deux premières lignes ;
  • Modifier le HEAD qui devient très simple ;
  • Identifier le BODY ;
  • Changer le code d'appel du nom de site ;
  • Motoriser la recherche ;
  • Installer le menu : celui de GetSimple, celui de Vanilla et l'information de connexion pour le visiteur ;
  • Le contenu de la page qui devient simplissime (content_wrapper) ;
  • Le pied de page qui change peu.
<?php echo '<?xml version="1.0" encoding="utf-8"?>'; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
.../...
 
<head>
    <?php $this->RenderAsset('Head'); ?>
    <link href="/forum/themes/perso_Va/design/templatemo_style_VA.css" rel="stylesheet" type="text/css" />
</head>
 
.../...
 
<body id="<?php echo $BodyIdentifier; ?>" class="<?php echo $this->CssClass; ?>">
 
.../...
 
<div id="logo">
    Pro Studio
    <span><?php echo Gdn_Theme::Logo(); ?></span>
</div>
 
.../...
 
<div id="search_section" class="Search">
    <?php
    $Form = Gdn::Factory('Form');
    $Form->InputPrefix = '';
    echo
        $Form->Open(array('action' => Url('/search'), 'method' => 'get')),
        $Form->TextBox('Search'),
        $Form->Button('Search', array('Name' => '')),
        $Form->Close();
    ?>
</div><!-- end search_section-->
 
.../...
 
<div id="templatemo_menu">
        <?php
        //***********importation du menu de GETSIMPLE*********
        $menu = fopen("../menu.cache","r"); //lecture
        if ($menu)
            {
            while (($buffer = fgets($menu, 4096)) !== false)
                { echo $buffer;  }
            fclose($menu);
            }
        //**********
        ?>
        <li class="Highlight"><a href="/forum">Forum</a>
            <?php
            $Session = Gdn::Session();
            if ($this->Menu) {
                $this->Menu->AddLink('Dashboard', T('Dashboard'), '/dashboard/settings', array('Garden.Settings.Manage'));
                $this->Menu->AddLink('Activity', T('Activity'), '/activity');
                $Authenticator = Gdn::Authenticator();
                if ($Session->IsValid()) {
                    $Name = $Session->User->Name;
                    $CountNotifications = $Session->User->CountNotifications;
                    if (is_numeric($CountNotifications) && $CountNotifications > 0) $Name .= ' <span>'.$CountNotifications.'</span>';
                    $this->Menu->AddLink('User', $Name, '/profile/{UserID}/{Username}', array('Garden.SignIn.Allow'), array('class' => 'UserNotifications'));
                    $this->Menu->AddLink('SignOut', T('Sign Out'), Gdn::Authenticator()->SignOutUrl(), FALSE, array('class' => 'NonTab SignOut'));
                    if (!$_COOKIE['VanillaUser']) setcookie('VanillaUser', base64_encode($Session->User->Name), (time() + 3600), '/'); // creation cookie avec nom user
                } else {
                    $Attribs = array();
                    if (C('Garden.SignIn.Popup') && strpos(Gdn::Request()->Url(), 'entry') === FALSE) $Attribs['class'] = 'SignInPopup';
                    $this->Menu->AddLink('Entry', T('Sign In'), Gdn::Authenticator()->SignInUrl(), FALSE, array('class' => 'NonTab'), $Attribs);
                }
                $menuForum = $this->Menu->ToString();
                echo $menuForum;
                if ($_COOKIE['Vanilla']) setcookie('VanillaMenu', base64_encode($menuForum),(time() + 3600), '/'); // menu pour GETSIMPLE en cookie encode
            }
            ?>
        </li>
    </ul>
    <div id="connectUser">
        <?php
            if ($Session->IsValid()) echo "<a href="/forum/entry/signout?Target=discussions">" . $Name . " | déconnexion</a>";
            else echo "<a href="/forum/entry/signin?Target=discussions">connexion</a>";
        ?>
    </div>
</div> <!-- end of menu -->
 
.../...
 
<div id="templatemo_content_wrapper">
    <div id="Body">
        <div id="Content"><?php $this->RenderAsset('Content'); ?></div>
        <div id="Panel"><?php $this->RenderAsset('Panel'); ?></div>
    </div>
</div><!-- end of content wrapper -->
 
.../...
 
<div id="templatemo_footer">
    <div id="Foot">
        <?php $this->RenderAsset('Foot'); ?>
    </div>
</div><!-- end of footer -->

Lorsque ce fichier default.master.php est actif (visiteur sur le forum) et que le visiteur est connecté, le menu complet du forum est enregistré dans un cookie (ligne 71) avec un encodage adapté aux capacités des cookies (base64). Lorsqu'il n'est pas connecté, le cookie Vanilla n'existe pas et le menu n'est pas créé. GetSimple utilise alors le menu par defaut (discussion & activité).

 

Si le visiteur est connecté, un cookie contenant le nom de connexion de l'utilisateur est créé (ligne 63).

Le menu supporté par GetSimple est enregistré dans un fichier nommé menu.cache à la racine du site. Il s'incruste ici lignes 41 à 47. Ce fichier cache doit maintenant être créé.

Astuce : Si votre installation n'est pas à la racine du site, il est nécessaire de modifier certains liens du template (ligne 8 par exemple). Pour disposer d'un template qui fonctionnera à plusieurs emplacements sans modification (chez vous en local, dans un dossier de votre site pour essais...), il faut créer une constante qui n'existe pas chez Vanilla et qui fixe l'adresse de la racine du forum :

  • Ouvrez conf/locale.php et ajouter : define('VANILLA_URL', 'http://www.mon-adresse/mon-dossier/');
  • Dans le template, par exemple ligne 8, remplacer href="/forum/themes... par href="<?php echo VANILLA_URL; ?>themes...

La feuille de style CSS nommée templatemo_style.css a été traitée création d'un site avec template et CMS. Il faut une version pour GetSimple et une version pour Vanilla.

Pour que le menu DropDown fonctionne et que le login du visiteur soit visible, il faut ajouter sur les deux versions le code suivant :

#templatemo_menu > ul > li, #templatemo_menu > div > ul > li, #templatemo_menu > ul#Menu > li, #templatemo_menu > div > ul#Menu > li { position:relative; }
#templatemo_menu li ul, #templatemo_menu li ul#Menu { margin-left:5px; padding:0.5em 0; list-style:none; background:#0d0d0d; position:absolute; display:none; left:0px; z-index:1; }
#templatemo_menu li:hover ul, #templatemo_menu li:hover ul#Menu { display:block; }
#templatemo_menu li ul li, #templatemo_menu li ul#Menu li { width:90%; margin:0 auto 0.3em auto; }
#templatemo_menu li ul li a, #templatemo_menu li ul#Menu li a { height:100%; display:block; padding:0.4em; color: #bbb; font-weight:bold; text-decoration:none; white-space:nowrap; }
#templatemo_menu li ul li a:hover, #templatemo_menu li ul#Menu li a:hover { background:#666; text-decoration:underline; text-decoration:none; }
 
#connectUser { float:right; position:relative; top:-22px; color:#ddd; }
#connectUser a { color:#ddd; text-decoration:none; }
#connectUser a:hover { color:#ddd; text-decoration:underline; }

Enfin, voici quelques modifications à faire sur chacun des fichiers CSS :

/* ++++++ GetSimple +++++*/
    /* current (page active sous GetSimple) */
#templatemo_menu li a:hover, #templatemo_menu li .current, #templatemo_menu li.current > a  { 

 

/* ++++++ Vanilla +++++*/
#searchfield, #Form_Search { /* Form_Search */
 
#searchbutton,  #Form_Search1 { /* Form_Search1 */
 
#templatemo_menu { text-align: left; /* align left */
 
#templatemo_menu ul, #templatemo_menu ul#Menu { /* ul#Menu et Highlight (page active sous Vanilla) */
#templatemo_menu ul li, #templatemo_menu ul#Menu li {
#templatemo_menu ul li a, #templatemo_menu ul#Menu li a {
#templatemo_menu li a:hover, #templatemo_menu ul li.Highlight > a, #templatemo_menu ul#Menu li a:hover {