Création d'un template

1. Introduction

Un template est constitué d'un dossier contenant l'objet principal PHP, ses 2 layouts et des feuilles de styles CSS. Les compétences requises pour créer vos propres templates sont une bonne connaissance du HTML et des CSS. Les besoins en PHP peuvent se limiter au "copier-coller" des éléments de ce tutorial.

2. L'objet PHP

Commençons par créer le dossier qui sera notre template. Le nom du dossier doit être le nom qui sera donné à notre objet. Pour exemple, notre template s'appellera "TutorialPage", par habitude nous avons toujours nommer nos templates avec le suffixe Page. Bien sûr, il faut éviter les espaces et tous les caractères autres que des lettres non accentuées et les chiffres. Tous les fichiers utiles au template se trouveront dans à la racine de ce dossier. 

Dossier du template

Puis créons l'objet PHP. Créez un fichier texte, et nommez toujours avec le même nom complété par .php.inc. Puis insérez le code suivant avec le nom de votre template :

<?php
class TutorialPage extends Template {
    function TutorialPage( $path_type ){
    }
}
?>

Vous construisez ainsi un objet PHP contenant votre template. Il faut maintenant intégrer tous les renseignements de notre template. On ajoute les lignes de code qui suivent dans la fonction

Ajoutons l'initialisation générique des templates :

parent::Template('TutorialPage', $path_type);

Puis le titre de votre plugin. Basiquement, vous pouvez remettre son nom ou en profiter pour mettre un titre plus explicite.

$this->title = 'Tutorial Page';

Nous insérons ensuite ses informations relatives, version, nom du développeur, e-mail et groupe. C'est information ne sont pas obligatoires mais permettent de conserver les informations pour les évolutions futures du plugin.

$this->version = '1.0';
$this->author_name = 'Votre nom';
$this->author_mail = 'Votre email';
$this->author_group = 'Le groupe';

Enfin, nous finissons avec la seule valeur vraiment importante lors de la création d'un template : le nombre de module qu'il peut gérer.

$this->modules = 4;

Au final, l'objet devrait ressembler à ceci :

<?php
class TutorialPage extends Template {
    function TutorialPage( $path_type ) {
        parent::Template('TutorialPage', $path_type);
        $this->title = 'Tutorial Page';
        $this->version = '1.0';
        $this->author_name = 'Votre nom';
        $this->author_mail = 'Votre email';
        $this->author_group = 'Le groupe';
        $this->modules = 4;
   }
}
?>

L'objet Template est terminé, prêt à être utilisé.

3. La vue réduite

Chaque template possède 2 layouts, le premier est la vue réduite qui sera utilisée lors de la construction d'une page dans l'administration du site. Cette vue est un shéma représentant la structure de la page et indiquant aux administrateurs où se trouvent les emplacements des modules.

Ce fichier est au format html/xhtml, il s'appelle thumb.html.inc. La taille du code source HTML doit être de 200 pixels de largeur et 120 pixels de hauteur. A vous de construire votre HTML pour qu'il ressemble au mieux à l'architecture du template.

Notre exemple est contruit à partir de simples tables HTML. Un fond gris indique que la page est centré dans l'espace du navigateur web. Les 4 chiffres indiquent les emplacements.

<table cellspacing="0" cellpadding="0" border="0" style="width:200px; height:120px;">
  <tr>
    <td style="background:#DEDEDE;">
      <table cellspacing="0" cellpadding="0" border="0" style="width:160px; height:112px; background:white; margin:4px auto;">
        <tr>
          <td colspan="3" style="height:14px;text-align:center;border:solid 1px black;">
            1
          </td>
        </tr>
        <tr>
          <td style="width:20px;text-align:center;border-left:solid 1px black;border-bottom:solid 1px black;">
            2
          </td>
          <td style="text-align:center;border:solid 1px black;border-top:none;">
            3
          </td>
          <td style="width:20px;text-align:center;border-right:solid 1px black;border-bottom:solid 1px black;">
            4
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Note : Si nous avons fait le choix d'afficher du HTML, vous pouvez très bien décider d'utiliser une image.

4. Le layout principal

Passons ensuite au layout principal, c'est lui qui mérite le plus d'attention puisque les pages de votre sites seront baties sur lui. Comme la vignette, le layout est un squelette HTML sur lequel sont appliqués quelques styles.

Ce fichier HTML s'appelle main.html.inc.

Notre exemple est basé sur une série de blocks < div > identifiés par un code unique. Ces codes sont utilisés pour appliquer les styles. Chaque cellule dédiée à l'insertion de module contient le code :

<?=$this->display_module(x);?>

ou x est un nombre de 0 au nombre de module indiqué dans l'object auquel on soustrait 1, ici de 0 à 3. Lors du chargement de la page, CaMykS se chargera de tout le reste.

La dernière cellule est utilisée pour afficher le texte "Powered by CaMykS". Ce texte sera donc fixe pour chaque page utilisant ce template.

<div id="pageMain">
  <div id="pageObject">
    <div id="pageHeader">
      <?=$this->display_module(0);?>
    </div>
    <div id="pageLeft">
      <?=$this->display_module(1);?>
    </div>
    <div id="pageContent">
      <?=$this->display_module(2);?>
    </div>
    <div id="pageRight">
      <?=$this->display_module(3);?>
    </div>
  </div>
  <div id="pageCaMykSBox">
    <a href="http://www.camyks.net" target="_blank" id="pageCaMykSLink">
      Powered by CaMykS
    </a>
  </div>
</div>

Le template étant un simple HTML, vous pouvez y incorporer les éléments que vous souhaitez : images, textes fixes, publicités...

L'insertion d'images ou d'autres fichiers situés dans le dossier du template se fait via la commande :

$this->get_fileURL('image.gif');

Par exemple, pour afficher l'image se trouvant dans le dossier img du template :

 <img src="<?=$this->get_fileURL('img/image.gif');?>" border="0" alt="" />

L'utilisation de la méthode get_fileURL permet de faire jouer la surcharge selon nos besoins.

5. Les styles associés

Ces styles indiquent le positionnement dans l'espace de la page, les tailles des différentes cellules.

S'il est possible d'intégrer les styles directement dans le layout, il est préférable de créer un fichier style.css dédié. Lorsqu'il existe il est automatiquement ajouté à la page générée.


#pageMain { width:800px;margin:20px auto; }
#pageObject {  }
#pageHeader {  }
#pageLeft{ width:150px; float:left; }
#pageRight{ width:150px; float:right; }
#pageContent{ width:500px; float:left; }

#pageCaMykSBox{ margin:2px; text-align:center; clear:both; }
#pageCaMykSLink{ font-weight:normal; font-family:arial, verdana; font-style:italic; color:#666666; }

6. Les méthodes bonus

Les templates sont les plugins les plus simples. Ils ne possèdent qu'une méthode surchargeable permettant d'étendre les possibilités de l'objet.

En surchargeant la méthode initialise vous pouvez par exemple demander à CaMykS d'ajouter un CSS dédié à l'impression ou aux navigateurs sur mobile:

<?php
class TutorialPage extends Template {
  function TutorialPage( $path_type ) {
    parent::Template('TutorialPage', $path_type);
    $this->title = 'Tutorial Page';
    $this->version = '1.0';
    $this->author_name = 'Votre nom';
    $this->author_mail = 'Votre email';
    $this->author_group = 'Le groupe';
    $this->modules = 4;
  }

  function initialise() {
   global $camyks;
    /* execute l'initialisation générique */
    parent::initialise();

    /* ajoute un fichier de style pour l'impression */
    $camyks->HTMLPage->add_styleFile( $this->get_fileURL('print.css'), 'print');
  }
}
?>

Vous pouvez aussi ajouter vos méthodes si elles sont nécessaires.

- © CaMykS '17 - Self Powered -