Comment créer une page ?

Pré-requis

Le framework Adventy introduit la notion de surcharge de contenu de page au niveau :

de l'entête de page ;
du menu principal ;
de colonne de gauche : menu de page ;
de la colonne de droite ;
du pied de page ;
du CSS de page ;
du Javascript de page.

La surcharge de contenu sera traitée dans un autre tutoriel. Ici, nous allons uniquement nous intéresser à la création d'un corps de page, qui est le contenu principal.

Construire le corps de page

La vue est le contenu principal de la page. Ce contenu est la première tâche à remplir pour créer une page statique ou dynamique.

Pour créer un contenu :

aller dans le dossier ./application/view/page/ ;
copier/coller le fichier _sample.body.php. Dans l'extension de fichier .body.php, body indique que c'est le corps de page, et php informe la possibilité d'insérer du code PHP. D'ailleurs, tous les fichiers du dossier ./application/ ont l'extension .php ;
renommer le fichier copié. Dans le cadre de ce tutoriel, nous allons le renommer en my-first-page.body.php. Tout nom de fichier doit être en minuscule alphanumérique. Le caractère "-" (tiret, trait d'union ou opérateur arithmétique moins) pourra servir de délimiteur pour séparer les mots ;

éditer ce nouveau fichier, puis modifier son contenu en y insérant du code HTML et/ou du code PHP. Par exemple :

<?php 
$integers = [];
for($i = 0; $i < 10; $i++) {
	$integers[] = $i;
}
?>

<h1>My first page title</h1>
<section>
	<h2>A section title</h2>
	<p>My first page content :-)</p>
	<p><?= implode(' ', $integers)?></p>
</section>
<section>
	<h2>My second section</h2>
	<p>Another content...</p>
</section>

sauvegarder, puis lancer la page https://<mydomain>.loc/my-first-page, ou http://<mydomain>.loc/my-first-page si le SSL n'est pas encore installé pour le nom de domaine <mydomain>.loc. Le navigateur devrait afficher le contenu suivant :

L'utilisation du fichier _sample.body.php comme modèle n'est pas une obligation. Vous pouvez créer un fichier *.body.php totalement personnalisé. Cependant, veuillez à ce que ce fichier soit toujours encodé en UTF-8.

Où insérer le CSS et le Javascript ?

Pour aller plus loin du côté client, nous pouvons ajouter du CSS et/ou du Javascript à la page, et spécifique uniquement à cette page, sans modifier les fichiers principaux du site *.css et *.js.

Contrairement à la pratique de la majorité des développeurs, nous n'allons pas mélanger le HTML (notre vue actuelle) avec du CSS et/ou du Javascript. Le framework Adventy propose une autre pratique pour améliorer la lisibilité du code et son évolution :

le corps de page (la vue) ne génère que du HTML, qui peut être réutilisable sans qu'une feuille de style et du code code Javascript y soit rattachés ;
bien que le CSS de page soit affecté à la vue, il peut aussi être réutilisé par une autre vue ;
il en est de même pour le code Javascript. En dissociant le HTML, le CSS et le Javascript, il est possible de les réutiliser comme vue partielle, et ainsi de les associer à d'autres vues.

Configurer un projet Appliquer du CSS de page