Incorporer un forum PHPBB 3 dans l’architecture et le design d’un site

Logo

Introduction

Le site SQLPAC (SQL Pour Administrateurs et Concepteurs) expérimente et intègre depuis le début du mois de mai 2011 des forums pour francophones autour de son cœur de métier, à savoir les moteurs de bases de données transactionnels et décisionnels (Microsoft SQL Server, MySQL, PostgreSQL, Oracle, Sybase…), ainsi que d’autres forums annexes autour de la conception (Google, Androïd, langages de programmation…).

PHPBB Forums version 3 a été sélectionné pour la réalisation de ces forums : PHPBB Creating Communities .

L’intégration des forums PHPBB au sein de son propre site ainsi que l’encapsulation de quelques fonctionnalités comme Google Analytics sont loins d’être aussi complexes qu’il n’y paraît car au final il suffit de modifier deux ou trois fichiers. Malheureusement de bonnes connaissances du langage HTML, notamment l’imbrication des conteneurs DIV, et des connaissances sur les feuilles de styles CSS sont nécessaires.

Cet article est un aide mémoire et un tutoriel pour tous ceux qui souhaitent encapsuler un forum PHPBB dans la conception de leur site, en revanche il ne présente pas l’installation et le paramètrage de PHPBB, les articles sont assez nombreux et complets à ce propos.

Architecture Page SQLPAC

Dans la suite de cet article, $WWW_ROOT correspond au répertoire racine du site Web. PHPBB est installé dans ce tutoriel dans le répertoire $WWW_ROOT/forums avec le package de la langue française.

Choix du style PHPBB

PHPBB propose plusieurs styles développés par les communautés. Le style s’adaptant le mieux à son site peut être trouvé et téléchargé grâce à la page de démo : Démo avec le style serenity.

L’arborescence contenue dans le fichier zip téléchargé est ensuite déployée dans le répertoire des styles de PHPBB $WWW_ROOT/forums/styles. Le panneau d’administration de PHPBB détecte automatiquement le nouveau style déployé.

Attention ! Les styles disponibles n’ont pas toujours une version en langue française proposée. Les boutons images "Nouveau", "Répondre", etc. demeureront en langue anglaise si le style choisi n’a pas d’option en langue française.

Pour le style Serenity, style choisi dans ce tutoriel, un package est disponible en langue française : STSoftware Professional Forum Design - Download language packs.

Le fichier serenity_lang_fr.zip est téléchargé et l’arborescence serenity/imageset/fr est déployée dans le répertoire des styles $WWW_ROOT/forums/styles. Le style serenity présente alors la structure ci-dessous :

$WWW_ROOT/forums
   |
   |____________ /styles
                    |
                    |____ /serenity
                              |
                              |_____ /imageset
                              |          |
                              |          |_____ /en
                              |          |
                              |          |_____ /fr
                              |
                              |_____ /template
                              |
                              |_____ /theme

Les 3 seuls fichiers qui vont être modifiés pour réaliser l’encapsulation de PHPBB forums dans le site sont dans les répertoires template et theme du style choisi :

  • /template/overall_header.html
  • /template/overall_footer.html
  • /theme/stylesheet.css

Encapsulation de PHPBB Forum (overall_header.html, overall_footer.html, stylesheet.css)

Encapsulation des feuilles de style et scripts Javascript du site dans le fichier modèle overall_header.html

Pour mixer le style de son site avec le style serenity choisi ici, ouvrir le fichier modèle ou "template" overall_header.html situé dans le répertoire template ($WWW_ROOT/forums/styles/serenity/template) et ajouter les feuilles de styles du site <link rel="<fichier>.css" /> dans l’entête entre les balises <head> et </head>.

<html xmlns="http://www.w3.org/1999/xhtml"
   dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}" xml:lang="{S_USER_LANG}">
<head>
 ...
  <!-- SQLPAC Ajout des feuilles de style -->
  <style type="text/css" media="screen"> 
  <!-- 
     @import url("/css/themes/grey/style-v-0.9.4.css"); 
     @import url("/css/themes/grey/sqlpac-v-2.4.7.css"); 
  --> 
  </style> 
  <!-- FIN SQLPAC -->
 ...
</head>

Aucune ligne du code original ne doit être supprimé lors de ces opérations. Ajouter des commentaires <!-- --> pour mieux repérer les modifications apportées.

Toujours dans le fichier modèle overall_header.html, ajouter tous les scripts Javascript nécessaires au site dans l’entête entre les balises <head> et </head>, comme par exemple ici les scripts Javascript afwk_header.js et afwk_googleanalytics.js qui respectivement construisent le menu du site et implémentent le "tracker" Google Analytics.

<html xmlns="http://www.w3.org/1999/xhtml"
   dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}" xml:lang="{S_USER_LANG}">
<head>
 ...
  <!-- SQLPAC Ajout des scripts Javascript -->
  ...
  <script type="text/javascript" src="/fwork/v3.1.2/js/afwk_header.js"></script>
  <script type="text/javascript">var gaCode="xxxxxxxxxxx";</script>
  <script type="text/javascript" src="/fwork/v3.1.2/js/afwk_googleanalytics.js"></script>

  <!-- FIN SQLPAC -->
 ...
</head>

Encapsulation des conteneurs DIV

Il demeure la phase la plus complexe à réaliser, fusionner les conteneurs DIV du site avec les conteneurs DIV de PHPBB. Voici les structures de chaque site : PHPBB 3.0.8 en mode autonome d’une part et SQLPAC d’autre part.

PHPBB 3.0.8 SQLPAC 
/template/overall_header.html
<body class="{S_CONTENT_DIRECTION}">
  <div id="wrapper">
...
/template/overall_footer.html
...
  </div>  <!-- Fin div wrapper -->
</body>
 
<body>
  <div id="enveloppe">
    <div id="conteneur">
     
      [CODE HTML de l’entête et du menu du site]
       
       <div id="contenu">
          ...

          <div id="pieddepage"> 
             ...
          </div> <!-- Fin div pied de page -->

       </div> <!-- Fin div contenu -->
    </div> <!-- Fin div conteneur -->
  </div> <!-- Fin div enveloppe -->
</body>

Si les 2 sites contiennent une balise div avec l’id "wrapper", des conflits vont se présenter. Changer dans ce cas de figure la balise ayant l’identifiant "wrapper" dans son site.

La fusion des conteneurs DIV va se résumer à modifier les fichiers modèles overall_header.html et overall_footer.html pour y englober la structure HTML du site SQLPAC. Le code HTML de l’entête et du menu du site est malheureusement statiquement copié dans le fichier /template/overall_header.html, aussi il est préférable pour la maintenance de ne pas avoir un menu trop dynamique dans le temps.

Versions PHPBB 3.0.8 et SQLPAC fusionnées 
/template/overall_header.html
<body class="{S_CONTENT_DIRECTION}">
    <div id="enveloppe">
    <div id="conteneur">

    [CODE HTML de l’entête et du menu du site]
       
       <div id="contenu">
         <div id="wrapper">
            ...
        
/template/overall_footer.html
...
        </div> <!-- Fin div wrapper -->

      <div id="pieddepage"> 
         ...
      </div> <!-- Fin div pied de page -->

    </div> <!-- Fin div contenu -->
  </div>  <!-- Fin div conteneur -->
</div>  <!-- Fin div enveloppe -->

Au cours de la fusion, pour visualiser et tester effectivement les modifications, le cache PHPBB doit être vidé, pour cela : Panneau de contrôle d’administration de PHPBB (PCA) Général Vider le cache.

Deux outils précieux permettent d’inspecter et valider la bonne imbrication des conteneurs DIV :

  • Les outils de développement de Google Chrome pour inspecter l’arbre DOM d’un document : "OutilsOutils de développement" ou Ctrl+Maj+I.
chrome inspection DOM outils de developpement

Les dernières retouches dans la feuille de style stylesheet.css

De légères retouches sont peut être alors nécessaires par rapport au style (body, table…), adaptations à apporter dans le fichier /theme/stylesheet.css et avec des cartouches de commentaires pour retrouver rapidement les modifications lors de futures versions du style ou de PHPBB.

Conclusion

La fusion de PHPBB dans son site est assez aisée, toutefois, elle présente trois inconvénients majeurs :

  • De très bonnes connaissance en HTML et CSS sont nécessaires.
  • Lors d’un changement de version de PHPBB, il ne faut pas oublier de modifier les fichiers overall_header.html, overall_footer.html et stylesheet.css de la nouvelle version, sous réserve d’une modification non profonde de ces fichiers modèles.
  • Le code HTML statique copié (menu, entête, etc.) dans le fichier modèle overall_header.html doit être modifié si le site qui encapsule PHPBB est modifié au niveau de cette portion.