Pages statiques

Les dépendances

Vu précédemment dans Template de page, le contenu principal correspond à la partie Body de la figure 2. Il est généré par l'appel de la méthode $this->render(self::BODY_VIEW_TYPE).

Avant de créer un contenu, il faut savoir que ce dernier dépend des dossiers techniques suivants :

  1. /application/view/page : c'est le dossier le plus important dans lequel le contenu principal sera créé (*.body.php).
  2. /application/view/css : si la page nécessite une personnalisation au niveau visuel, alors il faudra créer un fichier CSS *.css.php associé au contenu dans ce dossier.
  3. /application/view/js : comme le fichier CSS, si la page utilise des scripts, il faudra créer un fichier JS *.js.php en conséquence dans ce dossier.
  4. /application/meta : ce dossier accueille les fichiers de propriétés des pages. La création de ce type de fichier *.meta.php associé au contenu principal est facultative. Si ce fichier est absent, alors le fichier <adventy-framework-x.y.z>/meta/default.meta.php sera alors utilisé par défaut.

Donc pour créer le contenu principal (pour une page statique ou dynamique), seul le fichier *.body.php est obligatoire.

Le routage

Le routage est très simple avec le framework Adventy :

  1. il est automatisé et transparent pour le développeur. Il n'y a donc aucune configuration à faire de ce côté là, et la pratique de la réécriture d'URL (URL rewriting) ne pose aucun soucis ;
  2. ce que vous voyez sur l'URL est l'image même de ce que vous avez dans le projet au niveau de la structure et de l'organisation des dossiers et fichiers.

Les dossiers techniques (/application/view/page, /application/view/css, /application/view/js, /application/meta) correspondent en fait aux dossiers racines de chacun de ces types techniques.

Par exemple, si vous souhaitez accéder à la ressource my-first-page avec l'URL https://myadventy.loc/my-first-page, il faudra concrètement créer les fichiers suivants :

  1. /application/view/page/my-first-page.boby.php
  2. /application/view/css/my-first-page.css.php (facultatif)
  3. /application/view/js/my-first-page.js.php (facultatif)
  4. /application/meta/my-first-page.meta.php (facultatif)

Un autre exemple, avec l'URL https://myadventy.loc/folder-one/my-second-page. Ce dernier sera donc lié aux fichiers ci-dessous :

  1. /application/view/page/folder-one/my-second-page.boby.php
  2. /application/view/css/folder-one/my-second-page.css.php (facultatif)
  3. /application/view/js/folder-one/my-second-page.js.php (facultatif)
  4. /application/meta/folder-one/my-second-page.meta.php (facultatif)

Il est possible d'avoir une profondeur de dossiers aussi loin que permet le système d'exploitation et la longueur maximale autorisée pour un URL. Le chemin d'accès à la ressource via l'URL est exactement le même que celui dans les dossiers techniques. Donc sans l'utilisation de la réécriture d'URL, l'URL reflète exactement l'organisation des ressources dans le projet.

Création du contenu principal body de page

Le chemin racine pour les corps de page est /application/view/page. Depuis ce dossier, vous pouvez créer autant de sous-dossiers souhaité pour organiser les ressources. Le sitemap sera à l'image de cette organisation.

Pour créer le contenu d'une page :

  1. créer des sous-dossiers si besoin ;
  2. copier/coller le fichier /application/view/page/_sample.body.php. Ce dernier sert de template de corps de page. Vous pourrez le modifier ou en créer d'autres ;
  3. déplacer le fichier copié dans le sous-dossier de destination ;
  4. renommer le fichier copié en gardant bien l'extension *.body.php ;
  5. éditer ce fichier ;
  6. personnaliser son contenu : c'est un contenu HTML qui peut contenir du code PHP (ex : inclusion d'un fichier statique). Surtout n'ajoutez pas de CSS ni de Javascript qui seront définis chacun dans un fichier à part ;
  7. enregistrer la modification ;
  8. vérifier la disponibilité de cette ressource à l'aide d'un navigateur en saisissant l'URL qui lui est associé. Par exemple https://myadventy.loc/folder-one/my-second-page. Cet exemple indique que la ressource est /application/view/page/folder-one/my-second-page.boby.php.

A ce stade, vous venez de créer votre première page statique avec le framework Adventy. Mais allons un peu plus loin en renseignant les propriétés de la page...

Création des propriétés meta de page

Même si ce fichier est facultatif, il est recommandé de le créer avant ou juste après le contenu. Et cela pour 3 raisons :

  1. la gestion du cache pour un meilleur temps de réponse, surtout pour une page statique dont la mise à jour n'est qu'occasionnelle ;
  2. l'optimisation pour le référencement naturel (SEO) si le site est de type internet. Le titre et la description de la page servent d'accroche puisqu'ils apparaissent sur les résultats de recherche ;
  3. le titre de la page s'affiche sur l'onglet du navigateur, ce qui est une information utile lorsqu'il y a plusieurs onglets d'ouverts.

Pour définir les propriétés de la page :

  1. se placer dans le dossier /application/meta ;
  2. reprendre la même hiérarchie de dossiers que celle du corps de page précédemment créé. Cela signifie que si vous avez par exemple /application/view/page/folder-one/my-second-page.boby.php, alors il faudra créer le dossier /application/meta/folder-one puis le fichier /application/meta/folder-one/my-second-page.meta.php ;
  3. copier/coller le fichier /application/meta/_sample.meta.php qui sert de modèle de fichier meta. Vous pouvez créer d'autres modèles si besoin ;
  4. déplacer le fichier copié dans le sous-dossier de destination ;
  5. renommer le fichier copié avec le même nom de fichier que celui du corps de page, sans changer son extension *.meta.php ;
  6. éditer ce fichier ;
  7. personnaliser ses propriétés. Pour avoir plus de détail sur les propriétés de page, reportez-vous à la partie Template de page, puis à la section Les variables de la balise head ;
  8. enregistrer la modification ;
  9. actualiser la page de votre navigateur, puis afficher la source de la page. Par exemple, appuyez simultanément sur les touches [CTRL] et [U] ;
  10. vérifier dans la source que vous avez bien les même informations saisies dans le fichier meta que dans les balises :
    • title
    • meta name="description"
    • meta name="keywords"
    • meta name="author"
    • link rel="canonical"

Personnaliser le contenu principal avec du CSS et Javascript de page

Ca y est. Vous pouvez mettre votre page statique en ligne. Cependant, si vous souhaitez appliquer une feuille de style particulière et/ou du Javascript pour cette page, vous avez 2 possibilités :

  1. modifier les fichiers CSS et JS principaux (de portée applicative) qui sont appelés depuis la template de page. Les inconvénients de cette pratique sont les suivants :
    • ces fichiers sont en général volumineux, donc difficile à maintenir ;
    • s'il y a une erreur en javascript, cela impactera toutes les autres pages du site ;
    • la durée du cache sera forcément diminuée, puisque d'autres pages peuvent faire l'objet d'une mise à jour.
  2. utiliser les balises style pour insérer du code CSS et script pour le Javascript, dans le fichier de corps de page *.body.php. Encore une fois, procéder de cette manière implique un risque d'avoir du code CSS et Javascript un peu partout, éparpillés et mélangés dans le HTML. Ce manque de rigueur favorise les erreurs et une maintenance difficile.

Le framework Adventy propose une autre solution. Cela s'applique aussi bien pour les feuilles de style personnalisées de page que les scripts personnalisés de page. Découvrons cette solution dans les sections qui vont suivre...

Création des feuilles de styles css personnalisées de page

Pour appliquer une feuille de style personnalisée à la page :

  1. aller dans le dossier racine /application/view/css ;
  2. reprendre la même hiérarchie de dossiers que celle du corps de page en créant les dossiers nécessaires ;
  3. copier/coller le fichier /application/css/_sample.css.php qui sert de modèle de fichier CSS. Vous pourrez créer d'autres modèles si besoin ;
  4. déplacer le fichier copié dans le sous-dossier de destination ;
  5. renommer le fichier copié avec le même nom de fichier que celui du corps de page, sans changer son extension *.css.php ;
  6. éditer ce fichier ;
  7. personnaliser le contenu CSS sans utiliser la balise style, en rédigeant directement du code CSS. Il est même permis de générer dynamiquement du code CSS avec le langage PHP. Cela remplace avantageusement les préprocesseurs CSS ;
  8. enregistrer la modification ;
  9. actualiser la page de votre navigateur pour voir le résultat produit par la feuille de style. Ce code CSS est généré dans la balise head par l'appel de la méthode $this->getCssSource().

Voilà ! Ce n'est pas plus difficile que cela. Voyons maintenant pour l'insertion de code Javascript...

Création du script js personnalisé de page

Pour ajouter du code Javascript personnalisé au corps de page, il suffit de suivre la même procédure que celle du CSS, à l'exception que le dossier racine pour le Javascript est /application/view/js, et que l'extension pour ce type de fichier est *.js.php.

Vous disposez également d'un fichier modèle qui est /application/js/_sample.js.php, et qui peut être entièrement personnalisé selon vos besoins. Ecrivez directement du code Javascript sans utiliser la balise script. La génération dynamique de code Javascript est possible en utilisant le langage PHP.

Le code Javascript est généré tout à la fin du document HTML par l'appel de la méthode $this->getJsSource(), et sera donc exécuté en différé à la fin du chargement du fichier Javascript principal.

Maintenant que vous savez tout sur la création des pages statiques, voyons maintenant comment créer des pages dynamiques...