Amélioration du menu du site statique

Si on observe le code source des différents fichiers HTML du site statique étudié précédemment, on constate que les différents fichiers contiennent presque à l'identique, un menu avec des liens vers les autres pages du site.

Lorsqu'on développe un site web, ce genre de problème se posera si on veut mettre tout le contenu d'une page dans un seul fichier.

Et dans ce cas, si on veut modifier le menu, soit pour changer un titre ou un nom de lien, soit pour rajouter une entrée dans le menu, il faudra faire la même modification pour toutes les pages du site.

Mettre le menu dans un fichier à part et utiliser ce fichier pour toutes les pages du site simplifiera beaucoup les choses.

C'est le but des 2 programmes serveur décrits dans cette page.

Version 1 : menu en HTML dans un fichier séparé

Pour téléverser le programme sur la carte Arduino, il faut d'abord mettre dans un répertoire les 3 fichiers suivants :

Sur la carte SD, on mettra les fichiers :

et tant qu'on y est, on peut mettre aussi menu.txt qui servira dans la version suivante du programme.

Si on regarde le code source d'un fichier du site, par exemple indexb.htm :

On peut constater que la partie consacrée au menu du site a été grandement simplifiée :

    <div id="menu">
        XXXMENU
    </div>

et pour toutes les pages du site, le menu apparaît ainsi.

A la place de la ligne qui contient XXXMENU, il faut mettre le contenu du fichier menu.htm

Dans le programme "Compteur de passages", nous avons utilisé la fonction coprep_chaine (...) pour remplacer XXXNUM par le contenu d'une variable.

Cette fois-ci, nous allons utiliser une autre fonction de la bibliothèque trthtml pour s'arrêter sur une ligne du fichier HTML. On ajoutera le contenu du fichier menu.htm à cet endroit là, puis on recopiera la fin du fichier HTML.

Examinons ce que ça donne au niveau de la fonction loop () du programme statique-menu-commun.ino

Tout d'abord, on constate que cette fonction contient 2 déclarations similaires :

    File descfic;
    File descmenu;

En effet, nous allons utiliser 2 fichiers en même temps (plus précisément, on n'aura pas fini d'utiliser le premier lorsqu'on commencera à utiliser le second). Il faut donc 2 variables descripteur de fichier.

La sélection du fichier contenant la page à envoyer ne change pas :

    // tenter d'accéder à au fichier HTML
    descfic = SD.open (url, FILE_READ);

    // si on n'a pas réussi, tenter la page d'erreur
    if (! descfic)
        descfic = SD.open (F("/err404.htm"), FILE_READ);

On commence par envoyer au navigateur web le début de la page HTML, plus précisément, toutes les lignes qui précèdent XXXMENU

    // envoi du début de la page
    copie_jusque_chaine (descfic, client, "XXXMENU");

Cette fonction a été utilisée avec 3 paramètres :

Le descripteur du fichier HTML à lire,
l'identifiant du navigateur web où l'envoyer,
la chaine de caractères sur laquelle on s'arrête.

Ainsi utilisée, la fonction n'a pas envoyé au navigateur web la ligne

        XXXMENU

Si on avait eu besoin de l'envoyer, il aurait suffit de passer un 4ème paramètre à la fonction copie_jusque_chaine (...) :

    copie_jusque_chaine (descfic, client, "XXXMENU", 1);

Maintenant, on doit envoyer au navigateur web le contenu du fichier qui contient le menu du site.

On commence par ouvrir ce fichier en lecture :

    // tenter d'accéder à au fichier menu
    descmenu = SD.open ("menu.htm", FILE_READ);

Si ça s'est bien passé, on peut envoyer le contenu du fichier au navigateur web :

    if (descmenu)
    {
         copie_jusque_fin (descmenu, client);

Comme on n'a pas besoin de s'arrêter quelque part dans le fichier contenant le menu, on utilise la fonction copie_jusque_fin (...) avec le bon descripteur de fichier.

Maintenant, la carte Arduino n'a plus besoin d'utiliser ce fichier. Elle peut libérer la mémoire utilisée pour y accéder :

         descmenu.close ();
    }
    // sinon message d'erreur
    else
        envoieln_trame (F("Fichier menu manquant"), client);

Pour terminer, il faut envoyer la fin du fichier HTML :

    copie_jusque_fin (descfic, client);

On n'a alors plus besoin de ce fichier.

    descfic.close ();

Remarque : Un défaut de ce programme est qu'il insère le menu même si le fichier demandé n'en a pas besoin (fichier d'erreur err404.htm ou fichier css moncss.css).
Il aurait été plus propre de tester si on a besoin d'insérer le menu dans le fichier qu'on envoie.

Cela pourrait se faire de 2 façons :

tester le nom de fichier pour décider si on envoie le menu,
vérifier si on est arrivé en fin de fichier lors de l'utilisation de la fonction copie_jusque_chaine (...).

La deuxième solution est largement préférable, mais nécessite de rajouter un code de retour (fin de fichier ou chaine trouvée) pour cette fonction.

Version 2 : menu dans un fichier texte

Même si utiliser un seul fichier pour le menu qui apparaîtra dans toutes les pages d'un site web apporte une grande simplification, cette solution a entraîné une légère régression au niveau de l'affichage du menu.

En fait, dans la version du site où le contenu du menu apparaît dans le code de toutes les pages, la ligne dans le menu correspondant à la page affichée apparaît dans une autre couleur et on ne peut pas cliquer sur cette ligne pour aboutir à la page sur laquelle on était déjà.

Avec la nouvelle version du serveur qui utilise le même fichier menu.htm pour toutes les pages, toutes les lignes du menu apparaissent de la même façon.

De plus, le fichier menu utilisé doit être codé en HTML. Un fichier texte contenant juste les noms des pages à appeler et le texte à afficher dans le menu serait plus simple à écrire et plus lisible pour un humain.

La deuxième version de ce serveur amélioré résout ces deux problèmes.

Pour téléverser le programme sur la carte Arduino, il faut d'abord mettre dans un répertoire les 3 fichiers suivants :

Pour la carte SD, ce sont les mêmes fichiers que pour la version 1 de ce serveur amélioré, à part le fichier menu.txt qu'on utilise à la place de menu.htm.

Ce fichier a le contenu suivant :

    indexb.htm Page d'accueil
    page2b.htm Page N° 2
    page3b.htm Page N° 3
    page4b.htm Page N° 4
    page5b.htm Dernière page

Il est donc beaucoup plus simple que le fichier HTML du programme précédent.

Chaque ligne commence par le nom du fichier HTML correspondant à la page à afficher, et, après un ou plusieurs espaces, on trouve le texte qui indique rôle de cette page.

Examinons comment la fonction loop () du programme statique-menu-txt.ino qui utilise ce fichier.

Déjà, au niveau de la déclaration des variables locale à cette fonction :

    EthernetClient client;
    File descfic;

Contrairement à la version 1 du programme, il n'y a qu'un descripteur de fichiers.

Regardons à présent la liste des instructions qui permet d'envoyer au navigateur web le fichier HTML demandé en y insérant le menu au bon endroit :

    // envoi du début de la page
    copie_jusque_chaine (descfic, client, "XXXMENU");

    // ajouter le menu
    ajoute_menu ("menu.txt", url, client);

    // envoi de la fin de la page
    copie_jusque_fin (descfic, client);

Comme pour la version précédente du programme, on commence par envoyer le fichier HTML jusqu'à la ligne qui contient

        XXXMENU

L'instruction suivante :

    ajoute_menu ("menu.txt", url, client);

comporte 3 paramètres :

Le nom du fichier texte contenant le menu,
le nom de la page web sur laquelle on est,
l'identifiant du navigateur web où envoyer le menu.

Elle fait tous les traitements nécessaires pour générer et envoyer au navigateur web le code HTML du menu à partir du nom de fichier passé comme premier paramètre. En particulier, le rôle de la page sur laquelle on est déjà apparaîtra dans le menu dans une autre couleur et un clic sur le texte correspondant sera sans effet.

Après quoi, il ne reste plus qu'à envoyer au navigateur la fin de la page HTML.

    copie_jusque_fin (descfic, client);