SimpleWeb: Un système de création de site

1. Caractéristiques de "SimpleWeb"

Le système SimpleWeb s'inspire du système Joomla qui s'est révélé trop difficile à adopter pour faire migrer un site existant.

SimpleWeb présente les caractéristiques suivantes:

• Simplicité: pas d'utilisation de base de données. Les données sont soit dans les fichiers php soit dans des fichiers texte du site.
• Simplicité: vous pouvez transférer toutes vos pages html directement dans ce nouveau système. Le titre en sera extrait automatiquement et le contenu sera transcodé automatiquement en UTF-8 s'il est dans un autre format tel que ISO8859-1 ou Windows-1252.
• Simplicité: vous pouvez créer une hiérarchie d'articles qui peuvent constituer autant de catégories et de sous-catégories (autant de niveaux que vous voulez).
• Simplicité: la documentation du système "SimpleWeb" contient de nombreux exemples de modules et de programmes pour vous aider à développer des solutions pour vos proppres besoins, le plus souvent en partant des modules fournis avec ce système.
• Facilité de mise en oeuvre: Il est livré avec un exemple de site web avec l'essentiel de ses possibilités, qu'il est facile d'adapter pour ses propores besoins. En plus des modules basiques d'affichage de lien texte, de lien image, de menus, de boutons, il comprend la gestion d'un panier, la saisie d'un message à envoyer à l'administrateur du site, la génération d'une question sur image de façon aléatoire, la saisie d'un identifiant et d'un mot de passe.
• Facilité de mise en oeuvre: Un utilitaire permet de créer une page contenant la liste de tous les articles du site avec le titre de chaque article et un lien vers la page html de cet article pour son affichage. Il n'y a plus de page invisible.
• Facilité de mise en oeuvre: le système "SimpleWeb" fonctionne sous EasyPhP. Pour le tester, vous devez d'abord installer EasyPHP sur votre ordinateur et ensuite décompresser le fichier compressé de SimpleWeb dans le répertoire "www" du répertoire EasyPHP. Vous pouvez également le télécharger dans un sous-répertoire de votre site web et le décompresser.
• Souplesse: Les élément d'affichage sont déclarés indépendamment de leur lieu d'affichage dans la page. On peut facilement les déplacer d'une partie à l'autre ou les faire disparaître.
• Gratuité: le système "SimpleWeb" est un logiciel libre, distribué gratuitement.
• Légèreté: le système "SimpleWeb" installé fait environ 500 Koctets .

Le site www.bertin.biz a été développé avec ce système de création de site

2. La page affichée par "SimpleWeb"

Toute page affichée à l'écran est constituée de plusieurs parties que l'on peut afficher ou cacher:

• une partie haute qui occupe toute la largeur de la page pour un bandeau avec logo et un menu horizontal
  
• une partie centrale constituée de 3 parties
• une partie gauche étroite, généralement pour des menus
  
• une zone dite principale  pour l'affichage des informations demandées,
• une partie droite étroite ou inexistante pour des informations diverses
  
• une partie basse qui occupe également toute la largeur de la page
  

Il n'y a qu'une partie obligatoire, c'est la zone principale, toutes les autres parties peuvent être masquées.

2.1. La partie haute

Sur notre écran, on peut voir que la partie haute est constituée de :

• un lien vers "Site de Christian Bertin"
• un bandeau haut comprenant un logo (avec un lien caché vers "Accueil": la première page du site) et une image de publicité
• un menu haut horizontal constitué de:
• un lien vers "Accueil"
• un lien vers "Contact"
• un texte "Identifiant" suivi d'une zone de saisie
• un texte "Mot de passe" suivi d'un champ de saisie sans affichage des caractères saisis

2.2. La partie gauche

Sur notre écran, on peut voir que la partie gauche est constituée de :

• une image 'caddy' avec un lien caché vers l'affichage d'un panier
• un premier menu avec un titre "Titre du menu 1" suivi d'une liste d'items de menus "Article 1", "Article 2" et "Article 3"
• une image 'google' avec un lien caché qui recouvre également le texte "en espéranto" qui suit.
• un deuxième menu avec un titre "Titre du menu 2" suivi d'une liste d'items de menus "Article 4", "Article 5"
• un bouton "Ajouter au panier"
• un ensemble composé de :
• du texte: "Dans la catégorie 'fruits', Qu'est-ce que c'est?" suivi
  
• d'une image (qui change à chaque réaffichage de l'écran) suivi
  
• du texte "Votre réponse" suivi
  
• d'une zone de saisie de réponse suivie
  
• d'un bouton "OK"

2.3. La zone principale

Sur notre écran, on peut voir que la zone principale est aussi la partie centrale. C'est la partie grise où s'affiche ce texte.

C'est la partie dynamique par excellence.

C'est dans cette zone que vont s'afficher :

• les articles que vous voulez afficher. Ces articles doivent se trouver dans le sous-répertoire "articles".
• les réponses aux différentes boutons et liens qui se trouvent dans les autres parties.
  

2.4. La partie droite

Sur notre écran, on peut voir que la partie droite est constituée de :

• un titre en gras "Partie droite"
• un texte sur quelques lignes.

2.5. La partie basse

Sur notre écran, on peut voir que la partie basse est constituée de :

• une image publicitaire
• un message de copyright

3. Le fichier "configPage.php"

Le fichier 'configPage.php' est le fichier principal qui contient toutes les informations pour la génération des pages.

Le fichier 'configPage.php' commande l'affichage des 4 parties extérieures (partie haute, partie gauche, partie droite et partie basse). Pour cela chaque élément ou programme qui peut afficher quelque chose dans une des parties extérieures, est appelé module. Ils doivent tous être déclarés et décrits comme suit, ensuite, il faut décider dans quelle partie de la page ces modules doivent s'exécuter.

3.1. La description des modules

Le fichier 'configPage.php' contient la description de tous les modules qui vont s'exécuter dans une partie ou l'autre de la page lors de la création de la page.

Chaque déclaration de module comprend 4 éléments:

• Un numéro de module unique: $noModuleUnique
• $tableauBoolActiverModules[$noModuleUnique] = true; qui indique si le module est à exécuter ou pas
• $tableauModules[$noModuleUnique] qui contient soit un texte, soit le nom d'un fichier texte, soit le nom d'un fichier d'extension php
• $tableauTypesDeModules[$noModuleUnique] qui indique le type de ce que contient l'élément $tableauModule correspondant:
  • TXT: quand l'élément $tableauModule correspondant contient directement du texte
  • TXT_FILE: quand l'élément $tableauModule correspondant contient chier texte
  • PHP: quand l'élément $tableauModule correspondant contient le nom d'un fichier avec extension 'php' à exécuter
• $tableauParametresModules[$noModuleUnique] qui contient les paramètres à utiliser pour l'exécution du module:

Exemple de déclaration de module (pour créer le premier lien "Site de Christian Bertin" en partie haute ):

• // déclaration du module d'insertion infos hors_site
• //==================================================
• $noModuleInfosHorsSite = 0;
• $tableauBoolActiverModules[$noModuleInfosHorsSite] = true; // pour activer ou pas ce module
• $tableauModules[$noModuleInfosHorsSite] = "ficInfosHorsSite.txt";
• $tableauTypesDeModules[$noModuleInfosHorsSite] = "TXT_FILE"; // type de module: PHP, TXT ou TXT_FILE
• $tableauParametresModules[$noModuleInfosHorsSite] = ARRAY(""); // paramètres pour le module

Note: Ce module a pour numéro de module unique "$noModuleInfosHorsSite" qui vaut "0". Son type est "TXT_FILE", ce module est donc constitué d'un ficher texte à afficher et il n'a pas de paramètres.

Autre exemple de déclaration de module: pour créer le lien "Accueil" en partie haute :

• // déclaration du module d'insertion du lien accueil
• //==================================================
• $noModuleAccueil = 2;
• $tableauBoolActiverModules[$noModuleAccueil] = true; // pour activer ou pas ce module
• $tableauModules[$noModuleAccueil] = "<div class=\"sw_divLinkTextual\"><a href=\"##1\">##2</a></div>\r"; // module à activer
• $tableauTypesDeModules[$noModuleAccueil] = "TXT"; // type de module: PHP, TXT ou TXT_FILE
• $tableauParametresModules[$noModuleAccueil] = ARRAY("index.php?titre=", "Accueil");// paramètres module: module à appeler et texte du lien

Note: Ce module a pour numéro de module unique "$noModuleAccueil" qui vaut "2". Son type est "TXT", ce module est donc constitué d'un contenu texte à afficher en utilisant les paramètres indiqués. Ces paramètres vont venir s'insérer dans le contenu texte en remplacement de ##1 pour le premier paramètre, de ##2 pour le deuxième paramètre.

Autre exemple de déclaration de module: pour créer le lien "google en espéranto" en partie gauche :

• // déclaration de module lien "google en espéranto"
• //==================================================
• $noModuleGoogleEnEsperanto = 17;
• $tableauBoolActiverModules[$noModuleGoogleEnEsperanto] = true; // pour activer ou pas ce module
• $tableauModules[$noModuleGoogleEnEsperanto] = "insererLienImage.php"; // module à activer
• $tableauTypesDeModules[$noModuleGoogleEnEsperanto] = "PHP"; // type de module: PHP, TXT ou TXT_FILE
• $tableauParametresModules[$noModuleGoogleEnEsperanto] = ARRAY("http://www.google.com/intl/eo/", "admin_img/google_eo.gif", "Google", "en espéranto"); // paramètres module: module à appeler et texte du lien

Note: Ce module a pour numéro de module unique "$noModuleGoogleEnEsperanto" qui vaut "17". Son type est "PHP", ce module est donc constitué d'un fichier d'extension 'php' qu'il faut exécuter en lui passant en paramètres: la page (premier paramètre) à afficher lorsqu'on va cliquer sur le lien, le fichier image (deuxième paramètre) ainsi que le texte (troisième paramètre) à insérer. La zone constituée de l'image et du texte sera cliquable pour afficher la page.

3.2. La description des parties extérieures à afficher

Le fichier 'configPage.php' contient également la description des différentes parties de la page.

Chaque déclaration de partie de page va lister tous les modules qui doivent s'exécuter dans la partie concernée et dans quel ordre, ils doivent s'exécuter. Cette déclaration de partie de page comprend:

• Un booléen pour chaque partie extérieure qui indque si cette partie doit être affichée. On peut ainsi décider de son affichage ou pas. Exemples:
• $boolActiverPartieHaute = true; // pour demander l'affichage de la partie haute
• $boolActiverPartieGauche = true; // pour demander l'affichage de la partie gauche
• $boolActiverPartieDroite = false; // pour ne pas afficher la partie droite
• La liste des modules à exécuter pour cette partie dans leur ordre d'exécution comprenant par exemple pour la partie haute:
• $tableauNumerosModulePartieHaute qui contient la liste des numéros de module à activer

Exemple de déclaration du premier module à exécuter en partie haute (pour demander l'affichage du lien "Site de Christian Bertin"):

• // premier module à afficher en partie haute
• //==========================================
• $noOrdreExecutionPartieHaute = 0;
• $tableauNumerosModulePartieHaute[$noOrdreExecutionPartieHaute] = $noModuleInfosHorsSite;

Note: Le premier module a exécuter pour générer la partie haute de la page est celui d'ordre d'exécution en partie haute "0" ($noOrdreExecutionPartieHaute = 0;). Le module à exécuter a pour numéro unique de module "$noModuleInfosHorsSite" déclaré précédemment dans la déclaration des modules. Si on voulait supprimer son exécution, il suffirait de faire passer son état à "false" dans la déclaration des modules et il ne serait plus présent à l'affichage suivant et inversement.
On peut aussi insérer ou déplacer ce module dans une autre partie pour exécution.

Exemple de déclaration du n-ième module à exécuter en partie haute (pour demander l'affichage du lien "Accueil"):

• // module suivant à afficher en partie haute
• //==========================================
• $noOrdreExecutionPartieHaute ++;
• $tableauNumerosModulePartieHaute[$noOrdreExecutionPartieHaute] = $noModuleAccueil; // insertion lien accueil

C'est aussi simple que cela pour les 4 parties extérieures (partie haute, partie gauche, partie droite et partie basse).

3.3. L'affichage dans la zone principale

Pour ce qui est de la zone principale ou centrale, il y a plusieurs cas de figure:

• Affichage d'une page existante dans le répertoire "articles". Cet affichage est commandé par un lien de type "index.php?titre=nom_fichier_article_html".

  Vous pouvez aussi faire afficher des articles dans les sous-répertoires du répertoire "articles". Exemple: "index.php?titre=nom_sous_répertoire/nom_fichier_article_html".

  Le lien "index.php?titre=" va déclencher l'affichage d'un fichier par défaut qui est "accueil.htm". Ce fichier doit se trouver dans le répertoire "articles". Pour afficher un autre fichier par défaut, il suffit d'aller dans "configPage.php" et de changer la ligne '$nomFicArticleParDefaut = "accueil.htm";' pour mettre votre propre nom de fichier à la place de "accueil.htm".

  L'affichage d'un fichier d'extension html ou htm va se faire avec les contraintes suivantes:

  • L'affichage se fait avec le jeu de caractères UTF-8, ce qui peut nécessiter un transcodage automatique de la page à afficher
  • Le titre de la page html à afficher dans la zone principale va être extrait pour être inséré au niveau de la page entière (parties extérieures comprises). Ce titre va apparaître également comme titre dans la zone principale.
  • Les mots clés de la page à afficher ne seront pas pris en compte
  • L'élément "meta" avec le paramètre "charset" sera pris en compte pour transcoder si nécessaire en UTF-8 le contenu de la page à afficher.
  • Les autres éléments "meta" ne seront pas pris en compte.
  • Les éléments "scripts" de l'entête de la page à afficher seront extraits et insérés dans l'en-tête de la page globale.
  • La déclaration éventuelle d'un fichier de styles dans la page à afficher n'est pas prise en compte. L'affichage impose l'utilisation du fichier de styles "styles.css" pour éviter les risques de conflit de style entre deux fichiers de style
  • Les images associées à une page html doivent se trouver dans un sous-répertoire de même nom que la page html sans extension suivi d'un "_" pour pouvoir s'afficher automatiquement, c'est de cette façon qu'un document microsoft word est converti en page html et c'est aussi de cette façon qu'une page html de l'internet est enregistrée. Exemple
    Dans le répertoire "articles":
         - "page.htm" ou "page.html" pour la page à afficher dans le répertoire "articles"
         - "page_fichiers" pour le répertoire des images de la page "page.htm"
    Si vous créez vous-même vos propres pages html, alors il est conseillé d'adopter la même règle pour ranger les images à afficher avec vos pages. Il faut au moins créer un répertoire du nom de la page html sans extension, y ajouter le caractère "_" (après vous pouvez ne rien ajouter ou ajouter ce que vous voulez: "fichiers" ou "fic" ou "file") dans le même répertoire que le fichier html directement dans le répertoire "articles" ou dans un de ses sous-répertoires. De cette façon l'adresse des images dans la page html sera modifiée automatiquement par la fonction "afficherpage()" pour permettre un affichage correct de cette page avec ses images. Si vous ne procédez pas de cette façon vous devrez modifier vous même les adresses d'image dans les balises <img> pour insérer en juste après "src=" la chaîne "articles/".

• Affichage d'une page existante dans n'importe quel répertoire. Cet affichage est commandé par un lien de type "nom_répertoire/nom_fichier_html".
• Affichage d'un contenu spécifique résultant d'un traitement d'une saisie de formulaire. Voir le chapitre sur la création d'un programme 'php'.

Les styles d'affichage sont déclarés dans le fichier "styles.css".

L'affichage de la zone principale est commandée par le fichier 'configPage.php" avec les lignes suivantes:

• // Zone principale toujours présente
• //==================================
• $contenuAvantZonePrincipale = "<td class = \"sw_zonePrincipale\">";
• $strucTitreZonePrincipale = "<font color=\"#990000\"><h2>##1</h2></font>";
• $contenuApresZonePrincipale = "</td>";

Note: Le ##1 de la structure du titre de page est indispensable, c'est là où va s'insérer le titre de la page courante.

Note: Si l'aspect des choses ne vous plaît pas, vous savez où vous pouvez le changer: soit dans le fichier 'configPage.php' pour la couleur et la taille du titre, soit dans le fichier 'styles.css' pour le fond de la zone principale (style 'zonePrincipale').

4. La structure des répertoires du site

Les répertoires du site sont structurés de la façon suivante :

• demo (répertoire racine). C'est dans ce répertoire que sont toutes les fichiers PHP qui permettent de faire fonctionner le site. Il contient en particulier les répertoires suivants:
• articles (répertoire des articles). C'est le répertoire qui contient toutes les pages HTML à afficher dans la zone centrale ou principale.
• admin (répertoire des utilitaires du site). C'est le répertoire qui contient les sous-répertoires d'utilitaires du site dont:
• generation_liste_images (répertoire pour la création de la liste des pages se trouvant dans le répertoire 'articles'.
• admin_pub (répertoire des images publicitaires). C'est le répertoire qui contient les images publicitaires qui seront affichées soit dans la partie haute, soit dans la partie basse
• admin_logo (répertoire des logos du site). C'est le répertoire qui contient le logo qui sera affiché dans la partie haute des pages
• admin_img (répertoire des autres images du site). C'est le répertoire qui contient en particulier l'image du panier ou caddy pour la boutique
• jeu (répertoire des données pour les questions sur images). C'est le répertoire qui contient en particulier:
• fruits.txt: ce fichier contient la liste des fichiers images avec les réponses attendues aux questions.
• fruits_index.txt: c'est un fichier qui permet d'accélérer les recherches dans le fichier 'fruits.txt'. Il n'existe pas au départ. Il est créé automatiquement dès que le fichier 'fruits.txt' est modifié.
• fruits: (répertoire des fichiers images) qui seront affichées avec les données contenues dans le fichier 'fruits.txt'. On peut ajouter à tout moment de nouvelles images dans ce répertoire en faisant attention à leur taille pour maintenir un affichage cohérent. Il suffit alors d'accéder au répertoire admin/generation_liste_images pour lancer l'utilitaire de mise à jour du fichier 'fruits.txt' qui contient la liste des images

5. Exemples de modules

Voici plusieurs modules qui peuvent être utilisés dans votre propre site.

5.1. Module d'insertion d'un lien simple (texte sans image)

Le module d'insertion de lien ne fait appel à aucun programme particulier. Le mécanisme de déclaration de module est suffisant pour déclarer un module d'insertion de lien simple de type texte comme le lien "Contact" ci-dessous:

• // déclaration du module d'insertion lien contact
• //===============================================
• $noModuleContact = 3;
• $tableauBoolActiverModules[$noModuleContact] = true; // pour activer ou ne pas activer l'exécution de ce module
• $tableauModules[$noModuleContact] = "<div class=\"sw_divLinkTextual\"><a href=\"##1\">##2</a></div>\r"; // contenu à présenter
• $tableauTypesDeModules[$noModuleContact] = "TXT";
• $tableauParametresModules[$noModuleContact] = ARRAY("_demFormMessage.php", "Contact");// paramètres module: programme à appeler et texte à afficher

Le style du lien qui va être créé est de type 'sw_divLinkTextual', ce type est défini dans le fichier des styles 'styles.css', vous pouvez donc le modifier, s'il ne vous plaît pas.

La variable $tableauModules[$noModuleContact] contient le contenu à insérer avec deux paramètres que le programme d'affichage de page va prendre de la variable $tableauParametresModules[$noModuleContact]: URL (_demFormMessage.php) et texte du lien à afficher (Contact).

Pour créer plusieurs liens simples à suivre, on peut créer autant de modules qu'il y a de liens à créer, on peut aussi créer un module en dupliquant le contenu de la variable $tableauModules[$noModuleContact] et en remplaçant les deuxièmes ##1 et ##2 par ##3 et ##4 comme ceci:
$tableauModules[$noModuleContact] = "<div class=\"sw_divLinkTextual\"><a href=\"##1\">##2</a><a href=\"##3\">##4</a></div>\r";
et modifier la variable $tableauParametresModules[$noModuleContact] pour lui rajouter deux paramètres pour le deuxième lien comme ceci:
$tableauParametresModules[$noModuleContact] = ARRAY("_demFormMessage.php", "Contact", "_demFormIdentification", "s'identifier");

Le module ainsi modifié pourra afficher deux liens simples avec les textes "contact" et "s'identifier". On pourrait de la même façon étendre ce module pour afficher encore plus de liens. Si le contenu devient trop long, on peut le mettre dans un fichier, mais dans ce cas le module sera modifié comme suit:

• // déclaration du module d'insertion lien contact - s'identifier - etc
• //===============================================
• $noModuleContact = 3;
• $tableauBoolActiverModules[$noModuleContact] = true; // pour activer ou ne pas activer l'exécution de ce module
• $tableauModules[$noModuleContact] = "nom_fichier.txt"; // contenu à présenter
• $tableauTypesDeModules[$noModuleContact] = "TXT_FILE";
• $tableauParametresModules[$noModuleContact] = ARRAY("_demFormMessage.php", "Contact", , "_demFormIdentification", "s'identifier", "index.php?titre=", "Accueil");// paramètres module: programme à appeler et texte à afficher

Explications: le module ainsi modifié pourra afficher trois liens en utilisant le contenu du fichier "nom_fichier.txt", qui devra contenir six paramètres (de ##1 à ##6) pour les 3 liens à insérer.

5.2. Module d'insertion d'un lien avec image avec ou sans texte

Ce module fait appel au programme "insererLienImage.php" qui permet d'afficher une image avec un texte ou pas, le tout étant inclus dans un lien, ce qui fait qu'un clic sur l'image ou sur le texte va déclencher la demande de la page référencée par le lien. Ce programme présenté ci-dessous est très simple:

• <?php
• // insertion d'un lien avec une image et un texte facultatif
• // $tableauParametres est un
• // ARRAY($lienVersPage, $chemNomFicImage, $texteBaliseAlt, $texteDuLien)
• $squeletteLienImage = "<a href=\"##1\"><img src=\"##2\" alt=\"##3\" style=\"border: 0px solid ;\">##4</a>\r";
• echo remplacerParametres($squeletteLienImage, $tableauParametres[0], $tableauParametres[1], $tableauParametres[2], $tableauParametres[3], "", "");
• ?>

Explications: Ce programme prend quatre paramètres dans le '$tableauParametres[]' qui sont l'URL du lien, le nom du fichier image, le texte alternatif à afficher pour les aveugles et au cas où le fichier image n'existerait pas et le texte éventuel qui sera visible sur l'écran pour le lien. Le texte peut être absent, dans ce cas on ne verra que l'image pour ce lien.
Le squelette du lien image se trouve dans la variable "$squeletteLienImage". Si l'affichage de ce lien ne vous plaît pas, vous pouvez changer son style ici où faire un référence à un style à ajouter au fichier de styles 'styles.css'.
La fonction 'remplacerParametres()' permet de remplacer les chaînes ##1, ##2, ##3 et ##4 par les bonnes valeurs. La fonction prend 6 paramètres mais dans ce cas n'en utilise que 4, les deux autres sont vides parce que non utilisés.

Voici maintenant un exemple d'utilisation de ce programme pour créer le module d'insertion de l'image pour demander l'affichage du panier:

• // déclaration du module d'insertion d'image de panier avec lien vers affichage panier
• //===============================================
• $noModulePanier = 7; // affichage de l'image "panier" avec lien
• $tableauBoolActiverModules[$noModulePanier] = true; // pour activer ou ne pas activer l'exécution de ce module
• $tableauModules[$noModulePanier] = "insererLienImage.php";
• $tableauTypesDeModules[$noModulePanier] = "PHP";
• $tableauParametresModules[$noModulePanier] = ARRAY("B_afficherPanier.php", "admin_img/panier30x20.gif", "panier", ""); // insertion lien par image

Un clic sur l'image 'panier' va déclencher l'exécution du programme 'B_afficherPanier.php'. Dans cet exemple il n'y a pas de texte ajouté après l'image.

Vous voyez immédiatement que vous pouvez soit afficher une autre image en changeant le deuxième paramètre, soit ajouter un texte à afficher dans le lien après l'image en mettant un texte dans le quatrième paramètre, soit appeler un autre programme en changeant le nom du programme appelé dans le premier paramètre.

L'exécution de ce module peut maintenant être inscrite n'importe où dans l'une des quatre parties extérieures (haute, gauche, droite et basse) comme ceci pour l'exécution dans la partie gauche:

• // module suivant à afficher en partie gauche
• //==========================================
• $noOrdreExecutionPartieGauche ++;
• $tableauNumerosModulePartieGauche[$noOrdreExecutionPartieGauche] = $noModulePanier; // affichage de l'image "panier" avec lien

L'exécution de ce module pourrait également être inscrite dans plusieurs parties ou plusieurs fois dans la même partie, même si cela n'aurait pas beaucoup de sens.

Par contre on peut avoir besoin d'afficher plusieurs images avec lien, dans ce cas, il faut créer autant de modules semblables au module ci-dessus mais avec un "$noModule" unique différent et des paramètres différents correspondant à une autre URL, un autre fichier image, etc.

On peut vouloir également afficher à un endroit précis, dans une des parties, une image différente à chaque fois. En reprenant le module d'affichage du panier, il suffit d'insérer l'exécution d'un module de choix d'image avant l'exécution du module d'affichage du lien "panier". Ce module de choix d'image va affecter à la variable $tableauParametresModules[$noModulePanier][1] le nom du nouveau fichier image à afficher.

5.3. Module d'insertion d'un menu vertical avec titre

Ce module fait appel au programme "insererMenu.php" qui permet d'afficher un menu constitué d'un titre de menu et d'une liste de couples "URL - texte de lien" pour chaque item de menu.

Les menus présents dans la partie gauche correspondent à deux modules qui font appel à ce programme, voici la déclaration d'un de ces deux modules:

• // déclaration du module d'insertion de menu vertical avec titre "Titre de menu 1" et liste d'items de menu
• //===============================================
• $noModuleMenuPerEsperanto = 8; // affichage du menu "Titre de menu 1"
• $tableauBoolActiverModules[$noModuleMenuPerEsperanto] = true; // pour activer ou ne pas activer l'exécution de ce module
• $tableauModules[$noModuleMenuPerEsperanto] = "insererMenu.php";
• $tableauTypesDeModules[$noModuleMenuPerEsperanto] = "PHP";
• $tableauParametresModules[$noModuleMenuPerEsperanto] = ARRAY("Titre du menu 1", // titre du menu
•           "index.php?titre=listePages.htm", "Liste des pages du site", // item de menu: lien + intitulé
•           "index.php?titre=article1.htm", "Article 1: partie haute", // item de menu: lien + intitulé
•           "index.php?titre=article2.htm", "Article 2: partie gauche", // item de menu: lien + intitulé
•           "index.php?titre=article3.htm", "Article 3: zone principale", // item de menu: lien + intitulé
•           );

Explications: L'exécution de ce module va déclencher l'affichage d'un menu vertical avec comme titre "Titre du menu 1" et une colonne verticale d'items de menu, le premier item de menu avec l'URL 'index.php?titre=listePages.htm' et le texte visible de lien "Liste des pages du site", et ainsi de suite.

Une fois ce module déclaré, on peut insérer son exécution dans n'importe quelle partie de la page à afficher.

5.4. Module d'insertion d'un bandeau "logo + image publicitaire"

Ce module est très simple, il ne fait pas appel à un programme particulier. Il utilise une structure de bandeau qui se trouve dans un fichier. Ce module est déclaré comme suit:

• // déclaration du module d'insertion de bandeau logo + publicité
• //===============================================
• $noModuleBandeauHaut = 1;
• $tableauBoolActiverModules[$noModuleBandeauHaut] = true; // pour activer ou ne pas activer l'exécution de ce module
• $tableauModules[$noModuleBandeauHaut] = "ficInfosBandeauHaut.txt";
• $tableauTypesDeModules[$noModuleBandeauHaut] = "TXT_FILE";
• $tableauParametresModules[$noModuleBandeauHaut] = ARRAY ($nomFicLogoParDefaut, $texteLogoParDefautAlt, $nomFicPubBandeauHautParDefaut, $textePubBandeauHautParDefautAlt);

Le fichier "ficInfosBandeauHaut.txt" contient la structure de ce qui sera inséré lors de l'exécution de ce mdoule après remplacement des marqueurs de paramètres ##1, ##2, ##3 et ##4 qui s'y trouvent.

Les quatre paramètres qui sont nécessaires pour ce module sont: $nomFicLogoParDefaut (nom du fichier image du logo), $texteLogoParDefautAlt (texte pour les aveugles et texte affiché si le fichier image logo n'est pas trouvé au moment de l'affichage), $nomFicPubBandeauHautParDefaut (nom du fichier image publicitaire) et $textePubBandeauHautParDefautAlt (texte pour les aveugles et texte affiché si le fichier image publicitaire n'est pas trouvé au moment de l'affichage).

Le fichier "ficInfosBandeauHaut.txt" qui contient la structure à utiliser pour l'affichage du bandeau est affiché ci-dessous:

• <table style="width: 100%;"><tbody><tr>
•     <td class="sw_logo"><a href="index.php?titre=">
•         <img src="##1" alt="##2" style="border: 0px solid ; width: 298px; height: 75px;"></a>
•     </td>
•     <td class="sw_banner"><img src="##3" alt="##4" style="border: 0px solid ; height: 60px;">
•     </td>
• </tr></tbody></table>

Le fichier image logo sera affiché avec le style "logo" et le fichier image publicitaire sera affiché avec le style "sw_banner". Si cela ne vous plaît pas, il suffit d'aller modifier la définition de ces styles dans le fichier "styles.css".

On pourrait créer un module qui changerait l'image publicitaire à chaque exécution du module 'affichage du bandeau haut'. Il ressemblerait soit au jeu "question sur image" avec un choix aléatoire d'image publicitaire à afficher soit gérer pour chaque image publicitaire un compteur du nombre d'affichage à effectuer (pour cela il faudrait créer un fichier un peu comme "B_tarifs.txt" ou "jeu/fruits.txt" pour inscrire une ligne avec nom de fichier image publicitaire, le nombre d'affichage demandé et un compteur du nombre d'affichage effectué et peut-être une date de début de campagne publicitaire). .
L'exécution de ce module devrait être insérée avant l'exécution du module d'affichage du bandeau haut. Pour changer l'image publicitaire affichée, ce module devrait modifier les 3e et 4e paramètres de $tableauParametresModules[$noModuleBandeauHaut].

5.4. Module d'insertion d'un formulaire de saisie d'identifiant et de mot de passe

Voici le module qui permet d'insérer un formulaire de saisie d'un identifiant et d'un mot de passe sur une seule ligne qui, lorsqu'il est rempli, va appeler un programme php de traitement de cet identifiant et mot de passe.

• // déclaration du module d'insertion demande d'identification
• //===============================================
• $noModuleIdentification = 4;
• $tableauBoolActiverModules[$noModuleIdentification] = true; // pour activer ou ne pas activer l'exécution
• $tableauModules[$noModuleIdentification] = "ficFormDemId.txt"; // module à activer
• $tableauTypesDeModules[$noModuleIdentification] = "TXT_FILE"; // type de module:
• $tableauParametresModules[$noModuleIdentification] = ARRAY("", "");// paramètres module: affichage demande d'identification

Ce module utilise un squelette de formulaire avec deux paramètres qui se trouve dans le fichier "ficFormDemId.txt". Ce fichier contient:

• <form action="_identification.php" method="post" class="sw_divLinkTextual">
• Identifiant:<input type="text" name="identifiant" value="" size="20" class="sw_formBasic_inputField">
• Mot de passe:<input type="password" name="passe" value="" size="20" class="sw_formBasic_inputField">
• <input value="OK" type="submit" class="sw_formBasic_submitButton"></form>

Explications: Le champ "identifiant" sera précédé du mot "Identifiant:" et son contenu sera visible, par contre le contenu du champ "passe" ne sera pas visible, on ne verra que le nombre de caractères frappés au clavier dans ce champ.

Lorsque l'utilisateur va cliquer sur le bouton "OK", le contenu des deux champs "identifiant " et "passe" seront renvoyés en paramètres au programme "_identification.php" pour traitement.

Le formulaire est de style "sw_divLinkTextual" alors que les champs "identifiant" et "passe" sont de style "formBasic_InputField". Ces styles sont définis dans le fichier "styles.css", ils sont donc modifiables à volonté.

6. La création de programmes "php"

Il y a plusieurs raisons de créer un programme php. On peut créer un programme php pour:

• traiter les réponses générées par un formulaire de saisie, voici la structure que doit avoir un tel programme en prenant l'exemple du programme "B_AjouterArticle.php"
• <?php
• session_start();
• include ("require_once_communs_index.php");
• $contenuZonePrincipale = "";
• $ref_article = "";
• if (isset($_POST['ref_article']) && $_POST['ref_article'] != "") {
•      $ref_article = $_POST['ref_article'];
• }
• while(true) {
•      // génération du contenu de la zone principale
•      $contenuZonePrincipale .= "Création de ma première page";
•      break;
• } // fin while(true)
• $titreZonePrincipale = "Titre de ma première page";
• $chemNomFicHtmlContenuPourZonePrincipale = "";
• afficherPage ($chemNomFicHtmlContenuPourZonePrincipale, $titreZonePrincipale, $contenuZonePrincipale);
• ?>

Explications:Ce programme est appelé par exemple suite à un clic sur le bouton "Ajouter au panier" d'un formulaire comme celui ci-dessous inséré dans une page de catalogue à côté de l'article "multidic":

• <form action="B_ajouterArticle.php" method="post">
• <input type="hidden" name="ref_article" value="multidic">
• <input value="Aldonu al la korbo" type="submit"></form>

La ligne include ("require_once_communs_index.php"); permet d'inclure tous les modules et les procédures qui seront nécessaires à la génération de la page à afficher par votre programme php. Si vous avez un module qui doit être présent dans toutes les pages alors il faut l'ajouter à ce fichier "require_once_communs_index.php".
"ref_article" est le nom d'un champ du formulaire de saisie qui a déclenché l'appel de votre programme php. Vous pouvez en avoir d'autres à ajouter ici.
Votre programme ensuite peut analyser les réponses saisies et générer un contenu en retour qui vient s'ajouter dans la variable $contenuZonePrincipale.
A la fin du traitement et de la génération du contenu de la page, il suffit d'ajouter un titre à cette page dans la variable $titreZonePrincipale.
On précise que le contenu ne vient pas d'un fichier en mettant $chemNomFicHtmlContenuPourZonePrincipale à vide ("").
Enfin, on appelle la fonction 'afficherPage()' qui va générer la page avec toutes les informations du fichier configPage.php et ce que votre programme aura généré.

• créer un module qui sera à exécuter dans une des parties de la page. Voici l'exemple du module qui va provoquer la génération d'une question sur image:
• <?php
• // lecture des variables de session pour le jeu Question sur image
• //======================================================
• global $categorie;
• global $categorieParDefaut;
• global $L_noLigneQuestion;
• $categorie = isSet($_SESSION['K_categorie']) ? $_SESSION['K_categorie'] : "";
• if($categorie == "") {
•      $categorie = $categorieParDefaut;
• }
• $score = isSet($_SESSION['score']) ? $_SESSION['score'] : 0; // zéro si non défini
• $L_noLigneQuestion = isSet($_SESSION['L_noLigneQuestion']) ? $_SESSION['L_noLigneQuestion'] : -1; // négatif si non défini
• echo insererQuestion();
• ?>

Explications:Il y a d'abord une liste des variables nécessaires au programme et à la fonction "insererQuestion()" qui sera appelée à la fin de ce programme. Ces variables sont déclarées en "global".
Ensuite il y a récupération des informations nécessaires pour le traitement à effectuer. Dans cet exemple, il y a la catégorie d'images même s'il n'y en a qu'une parce que le cas complet en a plusieurs. Il y a aussi le score de l'utilisateur. On aurait pu dissimuler ces variables dans le formulaire de saisie de réponse dans des balises "<input type="hidden" ...>". Dans notre exemple on a préféré utiliser des variables de SESSION que l'on va relire.
Les 3 variables de session relues sont $categorie, $score et $L_noLigneQuestion (numéro de ligne de la question pour éviter de reposer la même question deux fois de suite).
Ce mdodule va appeler la fonction insererQuestion(), qui va générer le contenu de la question après avoir choisi une image de façon aléatoire dans la catégorie d'images demandée.

Pour créer vos programmes php vous pouvez utiliser les fonctions qui sont fournies et utilisées par le système "SimpleWeb". Il est souhaitable de créer un fichier "bib_xxxxxxxx.php" pour chaque fonction, cela permet de savoir facilement dans quel fichier se trouve telle ou telle fonction.

Voici la liste des fonctions disponibles avec ce système:

• bib_lire_fichier.php: pour lire une partie ou la totalité d'un fichier dans un tampon à partir d'un point A à un point B
• bib_echo_fichier.php: pour faire un echo du contenu d'un fichier
• bib_extraire_chaine_entre_balises.php: pour extraire une chaîne de caractères entre une balise ouvrante et une balise fermante
• bib_extraire_chaine_entre_chaines_delim.php: pour extraire une chaîne entre une chaîne délimiteur de début et un caractère de fin
• bib_remplacer_parametres.php: pour remplacer dans un tampon jusqu'à 6 paramètres marqués par ##1 à ##6
• bib_remplacer_six_parametres.php: pour remplacer dans un tampon jusqu'à 6 paramètres marqués par ##1 à ##6
• bib_remplacer_tableau_parametres.php: pour remplacer dans un tampon jusqu'à 9 paramètres marqués par ##1 à ##6 par des paramètres en tableau
• bib_rechercher_avant_fin_balise.php: pour rechercher en avant dans un tampon à partir d'un point de départ un pointeur sur le premier caractère qui suit une fin de balise (on ne distingue pas les minuscules des majuscules pour la balise)
• bib_rechercher_arriere_debut_balise.php: pour rechercher en arrière dans un tampon à partir d'un point de départ un pointeur sur le délimiteur de début de balise (on ne distingue pas les minuscules des majuscules pour la balise)
• bib_lire_zone_de_fichier_ouvert.php: pour lire une zone d'un fichier déjà ouvert
• bib_afficher_page.php: pour afficher une page
• bib_ecrire_journal.php: pour écrire une ligne de journal d'activité du site avec horodatage
• bib_extraire_ligne_aleatoire.php: pour extraire une ligne aléatoire d'un fichier différente de la précédente
• bib_extraire_contenu_entre_balises.php: pour extraire le contenu entre deux balises
• bib_rechercher_chaine.php: pour rechercher une chaîne dans un tampon
• bib_conv_chaine_fr_en_utf8.php: pour convertir une chaîne en français codée ISO8859_1 en UTF8
• bib_conv_chaine_fr_en_nom_fic.php: pour convertir un nom de fichier en français (avec lettres accentuées) en nom de fichier sans accents
• bib_conv_en_min_sans_accents.php: pour convertir une chaîne ou un caractère en minuscule sans accents
• K_bib_inserer_question.php: pour insérer une question avec image aléatoire

A vous d'en créer d'autres!

7. Les utilitaires

Les utilitaires se trouvent dans le sous-répertoire "admin".

7.1. L'utiltaire de génération d'une liste des pages html du site

Dans le répertoire "admin/generation_liste_pages" on va trouver le fichier "index.php" qui permet de générer une page html avec la liste de toutes les pages qui se trouvent dans le répertoire "articles" et dans ses sous-répertoires.

L'utilitaire ouvre toutes les pages du répertoire "articles" et de ses sous-répertoires pour en extraire le titre situé dans l'en-tête encadré par la balise "title" et génère une ligne pour chaque page avec un lien vers cette page avec le titre de la page comme texte du lien. De cette façon vous avez une page qui permet d'accéder à toutes les pages du répertoire "articles" et de ses sous-répertoires sans exception.

La page générée de nom "listePages.htm" vient s'ajouter aux autres pages du répertoire "articles".

Pour permettre d'afficher facilement cette page, vous pouvez créer un module d'affichage de cette page sous la forme d'un lien comme ceci:

• // déclaration du module d'affichage de lien vers la page de liste des pages
• //===============================================
• $noModuleAffichageListeDePages = 12;
• $tableauBoolActiverModules[$noModuleAffichageListeDePages] = true; // pour activer ou ne pas activer l'exécution de ce module
• $tableauModules[$noModuleAffichageListeDePages] = "<div class=\"sw_divLinkTextual\"><a href=\"index.php?titre=listePages.htm\">Liste des pages du site</a></div>\r"; // contenu à présenter
• $tableauTypesDeModules[$noModuleAffichageListeDePages] = "TXT";
• $tableauParametresModules[$noModuleAffichageListeDePages] = ARRAY("");// paramètres module: aucun

Vous pouvez également l'insérer dans un menu vertical de votre site. Cette solution est décrite dans l'exemple de module d'insertion d'un menu vertical.

N'oubliez pas de relancer cet utilitaire à chaque fois que vous ajoutez une page au répertoire "articles" ou à l'un de ses sous-répertoires si vous voulez que la liste des pages soit complète.

8. Panier ou caddy: données et programmes php

Cette page a pour but de vous décrire l'implémentation du panier ou caddy disponible ici.

Tous les fichiers nécessaires au fonctionnement du panier ont un nom qui commence par 'B_'. C'est un bon principe de commencer tous les noms de fichiers relatifs à une fonction par un préfixe commun. Cette implémentation du panier repose sur plusieurs choses:

• des fichiers de données:
• B_tarifs.txt qui contient la description des articles proposés dans la boutique avec les conditions de vente comme ceci:
• $rabaisArticle nombre:3|10 pourcentage:20|33,33
• $fraisEnvoiMin montant:1,50
• $article:canal prix:3,00 frais:20 nom:Le canal de Nantes à Brest§
• $article:multidic prix:18,30 frais:10 nom:CD-ROM Multidic 2003§

Explications Il y a deux niveaux de rabais indiqués par le champ "nombre:", le premier à 3 exemplaires qui donne 20% de rabais, le deuxième à 10 exemplaires qui donne 33,33% de rabais indiqués par le champ "pourcentage:", les deux valeurs sont séparées par le caractère "|".

Il y a un minumum de frais d'envoi par facture de 1,50 € (ligne "$fraisEnvoiMin" avec champ "montant:").

Il y a un article de nom "canal" (champ "$article:") avec un prix de 3 € (champ "prix:") avec des frais d'envoi de 20% (champ "frais:"), un titre complet "le canal de Nantes à Brest" (champ "nom:" terminé par "§") et un deuxième article de nom "multidic" à 10% de frais d'envoi. Il faut faire attention aux délimiteurs de début de ligne ("$"), de fin de nom ("§") et de séparateur de plusieurs valeurs possibles ("|").

• B_strucPagePanier.txt qui contient la structure de la page à afficher pour le panier avec des zones de paramètres à remplacer.
• B_strucLignePanier.txt qui contient la structure d'une ligne du panier avec des zones de paramètres à remplacer.
• B_strucInfosAdresse.txt qui contient la structure du formulaire de saisie des informations de livraison de la commande avec des zones de paramètres à remplacer.
• B_formAjouterPanier.txt qui contient la structure d'un formulaire html à insérer dans une page catalogue à côté de chaque présentation d'article. Ce formulaire va affichier un bouton "ajouter au panier". Il ne faut pas oublier de remplacer ##1 par la référence de l'article déclaré dans le fichier "B_tarifs.txt".
• des fichiers programmes en php:
• B_afficherPanier.php pour afficher le contenu du panier et les informations de livraison.
• B_viderPanier.php pour vider le contenu du panier en conservant les informations de livraison.
• B_ajouterArticle.php pour ajouter un article au panier. Il doit être appelé avec le paramètre "ref_article" qui doit contenir la référence de l'article à ajouter au panier, par exemple "canal" ou "multidic" que l'on doit retrouver dans le fichier "B_tarifs.txt".
• B_supprimerArticle.php pour supprimer un article du panier. Il doit être appelé avec le paramètre "ref_article" qui doit contenir la référence de l'article à ajouter au panier, par exemple "canal" ou "multidic"..
• B_modifierArticle.php pour modifier la quantité d'un article du panier. Il doit être appelé avec le paramètre "ref_article" qui doit contenir la référence de l'article déjà contenu dans le panier, par exemple "canal" ou "multidic" et le paramètre "quantite" pour indiquer la nouvelle quantité de cet article.
• B_enregistrerInfosLivraison.php pour enregistrer les informations de livraison.
• B_executerCommande.php pour envoyer par messagerie la commande au service des expéditions.
• B_config.php pour initialiser les variables nécessaires à tous les fichiers php.
• B_bib_generer_tableau_panier.php. C'est la procédure utilisée pour générer l'affichage du panier. Elle est appelée par plusieurs fichiers php tels que 'B_supprimerArticle.php', 'B_ajouterArticle.php' ou 'B_modifierArticle.php'.

Ce que l'on veut souvent faire c'est ajouter un bouton "Ajouter au panier" à côté de la présentation d'un article de la boutique ou dans une page catalogue, dans ce cas il suffit d'insérer le contenu du fichier "B_boutonAjouterArticle.txt" à l'endroit le plus approprié:

• <form action="B_ajouterArticle.php" method="post">
• <input type="hidden" name="ref_article" value="##1">
• <input value="Ajouter au panier" type="submit"></form>

Avant d'insérer ce contenu dans une partie de la page ou dans une page html à afficher, il faut remplacer le marqueur de paramètre ##1 par la référence d'article qui doit exister dans le fichier "B_tarifs.txt".

Voici la description du module qui a été utilisé pour afficher le bouton "Ajouter au panier" dans la partie gauche même si son usage n'est pas très réaliste:

• // déclaration du module d'insertion d'un bouton "Ajouter au panier" pour l'article 'multidic'
• //===============================================
• $noModuleAjouterMultidicAuPanier = 10; // insertion d'un bouton "ajouter 'multidic' au panier"
• $tableauBoolActiverModules[$noModuleAjouterMultidicAuPanier] = true; // pour activer ou ne pas activer
• $tableauModules[$noModuleAjouterMultidicAuPanier] = "B_boutonAjouterArticle.txt";
• $tableauTypesDeModules[$noModuleAjouterMultidicAuPanier] = "TXT_FILE";
• $tableauParametresModules[$noModuleAjouterMultidicAuPanier] = ARRAY("multidic"); // paramètres du module: référence de l'article

9.Le jeu "Question sur image": données et programmes php

Ce jeu fait appel à un certain nombre de fichiers dans plusieurs répertoires:

• demo (répertoire racine)
• K_config.php pour initialiser les variables nécessaires à tous les fichiers php et en particulier la structure de la question sur image à poser.
• K_insererQuestionSurImage.php programme php pour insérer une question sur image.
• K_verifierReponse.php programme php pour vérifier la réponse saisie par l'utilisateur à la question sur image.
• K_bib_inserer_question.php procédure de génération d'une question de façon aléatoire.
• jeu (répertoire du jeu)
• fruits.txt. C'est le fichier de données qui contient les informations pour générer les questions. Il a la structure suivante:
• $abrikoto.bmp§ v:abricot§
• $ananaso.bmp§ v:ananas§
  Explications: Chaque ligne correspond à une question et une image. D'abord le nom du fichier image qui se trouve dans le sous-répertoire 'fruits' (même nom que le fichier de liste d'images sans son extension). puis la réponse attendue en minuscules. Attention aux délimiteurs indispensables.
• fruits_index.txt. C'est un fichier de données qui permet d'accélérer les recherches de question de façon aléatoire. Ce fichier est généré automatiquement à la première demande d'image qui suit une modification du fichier de liste d'images.
• fruits (répertoire d'images): C'est le répertoire qui contient les fichiers image.