Insertion d'un article dans une page Web

Maintenant que nous savons comment utiliser un éditeur wysiwyg pour créer un article, l'autre partie essentielle de notre CMS, c'est l'insertion de l'article dans un template, un modèle de page commun à tous les articles sur le site web.

Principe

Le modèle de la page est une page HTML standard conçue par nous. Le système se sert des balises <div> de HTML pour insérer les données à l'emplacement voulu.
Dans cette démonstration simplifiée, nous allons insérer directement un titre dans le menu du modèle et un texte dans la balise div dont l'identifieur est "content".

Le template

Le modèle utilisé pour la démo est une page en deux colonnes avec une en-tête et un pied de page: un format très commun. Vous pouvez changer le format pourvu que les identifieurs ("content" etc...) soient conservés ou vous pouvez changer le nom des identifieurs dans les scripts.
Voila le template. Cela requiert la feuille de style exemple.css.

Ajouter un article, démonstration

Dans cette démo, nous nous contentons de choisir une catégorie, nous donnons un titre et tapons un petit texte dans un simple textarea. Dans l'application réelle nous utiliserons l'éditeur wysiwyg et il faudra aussi entrer un nom et un mot de passe.

Choisir un mot-clé, et entrer un court titre pour le menu:

Taper un petit texte, c'est le contenu de l'article:

Comment cela fonctionne

Cette page charge le fichier insertion.php qui enregistre les données entrées dans un fichier XML, et ensuite charge le modèle de page pour le remplir avec le contenu du fichier XML.

Format du fichier XML

Le fichier utilisé pour la démo pour contenir un seul article a un format simple:

<?xml version="1.0">
<articles>
     <article tag="x" title="y">
       ...contenu de l'article...
     </article>
</articles>

Insérer le titre et le contenu

Le titre que vous avez choisi pour l'article est inséré dans la balise <title> de la section <head>, et dans une balise <h1> à l'intérieur de la page et aussi dans le panneau latéral dans la catégorie choisie.

Au début du template, du code PHP est inséré. Il charge le fichier XML précédemment créé et assigne les variables dans la page.

Ces variables font partie du template. Pour le méta-tag:

<title><?php echo $title; ?> </title>

Pour le titre et le contenu, le template contient deux instructions PHP dans la balise <div id="content">:

<div id="content>
     <h1><?php echo $title; ?> </h1>
     <?php echo $content; ?>
</div>
Pour la barre latérale, voir le tutoriel Menu dynamique. (Cette démo utilise une solution temporaire et simplifiée).

L'application réelle

Le CMS final sera plus développé, et nécessitera des étapes supplémentaires:

  1. Entrer un login et un mot de passe. Cela a été testé dans la démo "Enregistrement".
  2. Utilisation de l'éditeur wysiwyg pour créer l'article. Une démo est donné pour TinyMCE et CKEditor.
  3. Insertion du titre dans un fichier JSON avec sa catégorie. Ce fichier sera utilisé tel que décrit dans la démo "Menu dynamique" .
  4. Le fichier XML généré aura un nom différent pour chaque page (le nom de la page avec une extension XML) contrairement à la démo.
  5. Le nom du fichier XML sera ajouté à une liste et à partir de cette liste on pourra gérer le site.
  6. Une fois le texte inséré dans le modèle de page, elle sera copiée dans un autre fichier, et dans un répertoire dédié (une arborescence en fait).
    Note que c'est une option, On peut aussi construire la page dynamiquement au moment ou le visiteur la demande.