Boucles et Balises SPIP 2.0.6 TRAVAUX PRATIQUES Fichier HTML Règles CSS Boîtes imbriquées Arborescence des balises HTML </BOUCLEn> <BOUCLEn(TYPE){critère1}...{critèrex}> Code HTML + Balises SPIP Boucles et Balises SPIP Prendre en compte les éléments Maîtriser la syntaxe et Exploiter les générateurs de Boucles et Balises et relations François Daniel Giezendanner, SEM (Service Ecoles et Medias) - DIP - Genève, 5 rue des Gazomètres, 1205 CH-Genève Tél: +41 22 / 388-33-14, francois-daniel.giezendanner@edu.ge.ch -http://icp.ge.ch/sem/cms-spip/ Cours « Squelettes SPIP » - Mardi 21 avril et Mardi 5 mai 2009, 8h00-18h00

Plan de travail proposé Dans le temps imparti pour les Travaux Pratiques (TP) vous choisirez en fonction de vos objectifs et ambitions, l’un des trois axes d’activité suivants (ordre croissant de difficulté) : 1. Procéder selon le tutoriel SPIP original tel qu’il est proposé sur le site spip.net et reproduit-complété dans ce document pour la présentation, en y apportant vos touches personnelles 2. Reprendre l’un des 10 fichiers types du squelette SPIP et procéder à diverses modifications/compléments des boucles et balises SPIP 3. Utiliser l’un des trois templates présentés dans « CSS : Quelques exemples de mise en page fluide en n colonnes » (http://icp.ge.ch/sem/cms-spip/article.php3?id_article=166) et y « insérer » l’un des 10 fichiers types du squelette SPIP, puis procéder à diverses modifications des « Boucles & Balises SPIP »

Rappel (1/1) <B_nom> Code HTML optionnel avant <BOUCLE_nom(TYPE){critère1}{critère2}...{critèrex}> Code HTML [ texte optionnel avant (#BALISE|filtre|filtre...) texte optionnel après ] <BOUCLE_recursive(BOUCLE_nom)> </BOUCLE_recursive> </BOUCLE_nom> Code HTML optionnel après </B_nom> Code HTML alternatif <//B_nom>

En début de chaque squelette (1/1) En début de chaque squelette placez systématiquement la balise : #CACHE{0} Ainsi la page sera systématiquement recalculée Une fois le squelette terminé, une valeur courante est : #CACHE{24*3600}

Mon premier squelette (1/4) Afficher le Titre de l’article 1 Dans le répertoire squelettes, déposez un fichier « tutoriel.html », qui contient ce qui suit : <BOUCLE_article(ARTICLES){id_article=1}> #TITRE </BOUCLE_article> Fichier « tutoriel.html » Le critère id_article est utilisé pour sélectionner un article, en l'occurrence ici l’article 1. Maintenant rechargez la page http://localhost/mon-site/spip.php?page=tutoriel Cette fois SPIP cherche le titre (balise #TITRE) de l’article n°1 de la base, et l’inscrit à la place de #TITRE.

Mon premier squelette (2/4) Afficher le Titre, le Chapo et le Texte de l’article 1 Ajoutez du HTML et d’autres appels de « champs » SPIP au fichier tutoriel.html, en l'occurrence le chapeau (#CHAPO) et le texte principal (#TEXTE) : <BOUCLE_article(ARTICLES){id_article=1}> <h1>#TITRE</h1> <strong>#CHAPO</strong> <div align="justify">#TEXTE</div> </BOUCLE_article> En principe il faudrait faire appel aux CSS mais cela risque de freiner la démarche, car ici, dans cette partie pratique, on ne vise que la maîtrise des Boucles & Balises SPIP. Le design est traité ailleurs. Rechargez la page http://localhost/mon-site/spip.php?page=tutoriel, ce qui donne l'essentiel de l'article n° 1. Ajoutez ensuite les champs manquants pour parfaire l’affichage de l’article : #SURTITRE, #LESAUTEURS, #SOUSTITRE, #NOTES, #PS, etc. Rechargez la page http://localhost/mon-site/spip.php?page=tutoriel, vous obtenez alors toutes les composantes de l'article n° 1. Remarque : Pour afficher l'article 5, il suffit de modifier la ligne qui définit la boucle article : <BOUCLE_article(ARTICLES){id_article=5}>

Mon premier squelette (3/4) Les balises calculées #NOTES #INTRODUCTION #LESAUTEURS #PETITION #URL_ARTICLE #FORMULAIRE_FORUM #FORMULAIRE_SIGNATURE #PARAMETRES_FORUM Toutes les balises d'un article sont récupérables dans un squelette : Les balises #ID_ARTICLE #SURTITRE #TITRE #SOUSTITRE #DESCRIPTIF #CHAPO #TEXTE #PS Les balises #DATE #DATE_REDAC #DATE_MODIF #ID_RUBRIQUE #ID_SECTEUR #NOM_SITE #URL_SITE #VISITES #POPULARITE #LANG Les logos #LOGO_ARTICLE #LOGO_ARTICLE_RUBRIQUE #LOGO_RUBRIQUE #LOGO_ARTICLE_NORMAL #LOGO_ARTICLE_SURVOL

Mon premier squelette (4/4) <BOUCLE_article(ARTICLES) {id_article=5} <html> <head> <titre>#TITRE</titre> </head> <body> [(#LOGO_ARTICLE||image_reduire{200,200})] <h2>#SURTITRE></h2> <h1>#TITRE></h1> <h2>#SOUSTITRE></h2> <strong>#CHAPO</strong> <div align="justify">#TEXTE</div> [<h2>Notes :</h2>(#NOTES)] <p><small> [(#DATE|nom_jour) ][(#DATE|affdate)] [, Auteurs : (#LESAUTEURS)]</small></p> <blockquote>Post-scriptum : #PS </blockquote> </body> </html> </BOUCLE_article> Exemple Afficher : Surtitre Titre Soustitre Chapo Texte Notes Date Auteurs PS de l’article 5

Un squelette, plusieurs articles (1/2) Afficher des éléments en fonction du contexte Comme vous le voyez, on remplace simplement {id_article=1} par {id_article} tout court. Voilà : en rechargeant la page avec l'URL http://localhost/mon-site/spip.php?page=tutoriel&id_article=2 vous obtenez maintenant l’article 2. <BOUCLE_article(ARTICLES){id_article}> Modifions dans le squelette « tutoriel html » la ligne qui définit la « boucle article » : Afficher n’importe quel article : <BOUCLE_article(ARTICLES){id_article=1}> <h1>#TITRE</h1> <strong>#CHAPO</strong> <div align="justify">#TEXTE</div> </BOUCLE_article> Pour cela nous allons appeler notre page Web avec le paramètre id_article=2 pour appeler l'article 2 : http://localhost/mon-site/spip.php?page=tutoriel&id_article=2 Echec : c'est toujours l’article 1 (et pas le 2) qui s'affiche.

Un squelette, plusieurs articles (2/2) <BOUCLE_article(ARTICLES){id_article}> <h1>#TITRE</h1> <strong>#CHAPO</strong> <div align="justify">#TEXTE</div> </BOUCLE_article> La BOUCLE_article s’exécute dans un «contexte» où id_article est égal à 2 (c’est la valeur qui est passée dans l’URL). Si on lui précise {id_article=1} elle va chercher l’article n° 1; mais si on lui demande juste {id_article}, elle va chercher l’article dont le numéro est indiqué par le contexte (ici l’URL). http://localhost/mon-site/spip.php?page=tutoriel&id_article=1 http://localhost/mon-site/spip.php?page=tutoriel&id_article=2 et http://localhost/mon-site/spip.php?page=tutoriel Voyez-vous la différence ? Les deux premières pages vous donnent les articles n°1 et 2, la troisième n’a pas d’id_article dans son contexte, et génère une erreur. Bravo ! Votre squelette est maintenant « contextuel ». Tapez maintenant :

Une rubrique: les articles du site (1/4) Un contexte qui varie au fur et à mesure des BOUCLES rencontrées. Tous les articles du site Modifions notre squelette « tutoriel.html » de la manière suivante : <BOUCLE_article(ARTICLES)> #TITRE<BR> </BOUCLE_article> Là, on supprime carrément la condition {id_article}, la boucle va donc « courir » sur tous les articles. Attention : cette BOUCLE peut générer une page énorme si la base de données contient déjà de nombreux d’articles, ce qui est le cas de celle du site « CMS-SPIP » qui est chargée pour votre SPIP...

Une rubrique: 10 prem. articles du site (2/4) Un contexte qui varie au fur et à mesure des BOUCLES rencontrées. Les dix premiers articles du site ...mieux vaut prendre vos précautions et ajouter tout de suite par exemple le critère de limitation {0,10} pour limiter aux 10 premiers articles : <BOUCLE_article(ARTICLES) {0,10}> #TITRE<BR> </BOUCLE_article> Résultat : en appelant simplement http://localhost/mon-site/spip.php?page=tutoriel (plus besoin d’id_article désormais, puisque cette condition a été supprimée) les titres des 10 premiers articles publiés s’affichent (sous la forme de liens hypertextes), séparés chacun par un saut de ligne.

Une rubrique: ses 10 premier articles (3/4) Sommaire d’une rubrique En ajoutant le critère de sélection id_rubrique, on produit le sommaire d’une rubrique : <BOUCLE_article(ARTICLES){id_rubrique}> <a href="#URL_ARTICLE">#TITRE</a><br> </BOUCLE_article> <BOUCLE_article(ARTICLES){id_rubrique}{par date}{inverse}{0,10}> <a href="#URL_ARTICLE">#TITRE</a><br> </BOUCLE_article> Afficher les 10 articles les plus récents d’une rubrique Ajoutons les critère de classement {par date} et {inverse} ainsi que le critère de limitation au 10 premiers articles {0,10}, on obtient ainsi les liens hypertextes avec le titre des 10 derniers articles publiés (classement anti-chronologique) :

Une rubrique (4/4) Prenons dans l’ordre : id_rubrique : ne prend que les articles appartenant à la rubrique id_rubrique (cf. ci-dessous pour que cette variable soit définie dans le contexte de notre BOUCLE_article). {par date}{inverse} : trie par date dans l’ordre décroissant. {0,10} : ... et prend les 10 premiers résultats. Enfin, <a href="#URL_ARTICLE">#TITRE</a> va afficher non seulement le titre de l’article mais en plus créer un lien vers cet article. Reste à invoquer le squelette, en lui passant le contexte id_rubrique=1 : http://localhost/mon-site/spip.php?page=tutoriel&id_rubrique=1 La magie de SPIP tient dans la combinaison de ce type de fonctionnalités. Si vous êtes arrivé jusqu’ici, c’est gagné !

Les articles du site: anti-chronologique (1/2) On veut afficher les derniers articles publiés, sur le modèle : <html> <body> <h2>"#TITRE" du dernier article publié</h2> <h2>"#TITRE" de l'avant-dernier article publié</h2> ……. </body> Pour dire à SPIP d'afficher ces articles, il faut : Une boucle ARTICLES Un critère pour récupérer tous les articles publiés Un critère pour classer par ordre inverse de date de publication

Les articles du site: anti-chronologique (2/2) Donc, créez le fichier "sommaire1.html » : <html> <body> <BOUCLE_sommaire(ARTICLE) {tout} {par date} {inverse}> <h2>#TITRE</h2> <a href="#URL_ARTICLE">Lire l'article</a> </BOUCLE_sommaire> … </body> Critères de sélection pour afficher les articles par ordre anti-chronologique : {tout} : tous les articles {par date} : trier par ordre chronologique {inverse} : inverse l'ordre de tri, afin d'aller du plus récent au plus ancien La boucle est affichée autant de fois qu'il y a d'articles (d'où le terme de "boucle")

Sommaire : les dix derniers articles (1/2) Créez le fichier "sommaire2.html » : <html> <body> <BOUCLE_sommaire(ARTICLE) {tout} {par date} {inverse}{0,10}> <h2>#TITRE</h2> <a href="#URL_ARTICLE">Lire l'article</a> </BOUCLE_sommaire> … </body> Limiter le nombre de résultats avec le critère {début, nombre} début : résultat à partir duquel commence l’affichage (la numérotation commence à 0) nombre : nombre de résultats à afficher Exemple : {0, 10} affiche dix articles à partir du premier (qui porte le numéro zéro) {3, 5} : affiche cinq articles à partir du quatrième (qui porte le numéro 3) Limiter le nombre de résultats avec le critère {a/b} a/b représente la portion à afficher. Par exemple, 1/3 demande l’affichage du 1er tiers des résultats, alors que 3/4 demande l’affichage du 3ème quart des résultats.

Sommaire : les dix derniers articles (2/2) Exploiter la syntaxe complète des boucles et les listes <html> <body> <B_sommaire> <h3>Les dix derniers articles publiés sur le site sont :</h3> <ul> <BOUCLE_sommaire(ARTICLE) {tout} {par date} {inverse}{0,10}> <li> <h2>#TITRE</h2> <a href="#URL_ARTICLE">Lire l'article</a> </li> </BOUCLE_sommaire> </ul> <h3>Fin de la liste des articles</h3> </B_sommaire> <h3>Désolé, ce site ne contient pas d'articles !</h3> <//B_sommaire> </body>

Boucles en boucles : auteurs d’articles (1/3) Boucles imbriquées pour afficher les auteurs de chaque article : utiliser une boucle "AUTEURS" à l'intérieur d’une boucle "ARTICLES". <html> <body> <BOUCLE_sommaire(ARTICLE) {tout} {par date} {inverse}> <h2>#TITRE</h2> <a href="#URL_ARTICLE">Lire l'article</a> <p>Article écrit par : <BOUCLE_auteurs(AUTEURS)> #NOM </BOUCLE_auteurs> </p> </BOUCLE_sommaire> … </body> Problème : sans critère de sélection, la boucle auteur affiche tous les auteurs du site

Boucles en boucles : auteurs d’articles (2/3) Boucles imbriquées pour afficher les auteurs de chaque article : utiliser une boucle "AUTEURS" à l'intérieur d’une boucle "ARTICLES". <html> <body> <BOUCLE_sommaire(ARTICLE) {tout} {par date} {inverse}> <h2>#TITRE</h2> <a href="#URL_ARTICLE">Lire l'article</a> <p>Article écrit par : <BOUCLE_auteurs(AUTEURS) {id_article} > #NOM </BOUCLE_auteurs> </p> </BOUCLE_sommaire> … </body> En ajoutant le critère {id_article} à la boucle AUTEURS, on n'affiche que les auteurs de l'article.

Boucles en boucles : auteurs d’articles (3/3) Toutes les balises d'un auteur sont récupérables dans un squelette : Les balises #ID_AUTEUR #NOM #BIO #EMAIL #NOM_SITE #URL_SITE #PGP #LANG #FORMULAIRE_ECRIRE_AUTEUR Les balises calculées #NOTES #URL_AUTEUR Les logos #LOGO_AUTEUR

Boucles en boucles : rubrique-articles (1/3) Affichons sur la même page, les éléments de la rubrique elle-même : son titre, son texte de présentation, etc. <BOUCLE_rubrique(RUBRIQUES){id_rubrique}> <h1>#TITRE</h1> <BOUCLE_article(ARTICLES){id_rubrique}{par date}{inverse}{0,10}> <a href="#URL_ARTICLE">#TITRE</a><br> </BOUCLE_article> [(#TEXTE|justifier)] </BOUCLE_rubrique> On appelle la page avec l’URL : http://localhost/mon-site/spip.php?page=tutoriel&id_rubrique=1. La boucle ARTICLES est intégrée dans une boucle RUBRIQUES. Le contexte de la boucle ARTICLES est l’id_rubrique donné par la boucle RUBRIQUES, qui elle même va chercher le contexte donné par l’URL (id_rubrique=1). Donc nous sommes bien, au niveau des ARTICLES, avec l’id_rubrique demandé. De ce point de vue rien ne change.

Boucles en boucles : rubrique-articles (2/3) <BOUCLE_rubrique(RUBRIQUES){id_rubrique}> <h1>#TITRE</h1> <BOUCLE_article(ARTICLES){id_rubrique}{par date}{inverse}{0,10}> <a href="#URL_ARTICLE">#TITRE</a><br> </BOUCLE_article> [(#TEXTE|justifier)] </BOUCLE_rubrique> Dernière remarque : on a introduit le filtre |justifier sur le champ #TEXTE. Ce filtre modifie le contenu du texte avant de l’installer dans la page finale. [(#TEXTE|justifier)] En revanche, la boucle RUBRIQUES a permit à SPIP de sélectionner les valeurs des champs de la rubrique en question : on peut donc afficher le #TITRE et le #TEXTE de cette rubrique. Notez bien que ce #TEXTE serait celui de la rubrique même si on appelait aussi #TEXTE dans la boucle ARTICLES. Le fonctionnement arborescent de SPIP garantit que le #TEXTE d’un article ne déborde pas de la boucle ARTICLES.

Boucles en boucles : rubrique-articles (3/3) Toutes les balises d'une rubrique sont récupérables dans un squelette : Les balises calculées #NOTES #INTRODUCTION #URL_RUBRIQUE #DATE #FORMULAIRE_FORUM #PARAMETRES_FORUM #FORMULAIRE_SITE Les balises #ID_RUBRIQUE #TITRE #DESCRIPTIF #TEXTE #ID_SECTEUR #LANG Les logos #LOGO_RUBRIQUE #LOGO_RUBRIQUE_NORMAL #LOGO_RUBRIQUE_SURVOL

Brèves (1/3) Afficher les dix dernières brèves publiées sur tout le site : <BOUCLE_breves(BREVES) {par date} {inverse} {0,10}> Afficher les dix dernières brèves publiées dans une rubrique particulière : <BOUCLE_breves(BREVES){id_rubrique} {par date} {inverse} {0,10}> Afficher la brève dont l’id_breve = 5 : <BOUCLE_breves(BREVES){id_breve=5}> Afficher la brève dont l’id_breve est défini dans l ’URL : <BOUCLE_breves(BREVES){id_breve}>

Brèves (2/3) Toutes les balises d'une brève sont récupérables dans un squelette : Les balises calculées #NOTES #INTRODUCTION #URL_BREVE #FORMULAIRE_FORUM #PARAMETRES_FORUM Les balises #ID_BREVE #TITRE #DATE #TEXTE #NOM_SITE #URL_SITE #ID_RUBRIQUE #LANG Les logos #LOGO_BREVE #LOGO_BREVE_RUBRIQUE

Un squelette breves.html simple : Brèves (3/3) Un squelette breves.html simple : <BOUCLE_principale(BREVES) {id_breve}> <html> <head><titre>#TITRE</titre></head> <body> [(#LOGO_BREVE||image_reduire{200,200})] <p><small>[(#DATE|nom_jour)][(#DATE|affdate)]</small></p> <h1>#TITRE</h1> <div align="justify">#TEXTE</div> [<div align="right">Voir en ligne : <a href="#URL_SITE">#NOM_SITE</a></div>] [<div class="notes"><h2>Notes: </h2>(#NOTES)</div>] </body> </html> </BOUCLE_principale>

Boucles récursives: rubriques arboresc. (1/2) L’arborescence des rubriques d’une rubrique Les Boucles récursives s'appellent elles mêmes jusqu'à ne plus rencontrer d'occurrence. Elles sont souvent utilisées pour dérouler des structures arborescentes. <BOUCLE_rubrique(RUBRIQUES){id_parent}{par titre}> #TITRE <BOUCLE_ssRubriques(BOUCLE_rubrique)> </BOUCLE_ssRubriques> </BOUCLE_Rubriques>

Boucles récursives : rubriques arboresc. (2/2) ... [(#REM) Si aucun article, affiche un plan de la rubrique ] <B_sous_rubriques> <div class="menu rubriques"> <h2><:sous_rubriques:></h2> <ul> <BOUCLE_sous_rubriques(RUBRIQUES) {id_parent} {par num titre, titre}> <li> <a href="#URL_RUBRIQUE">[(#TITRE)]</a> [(#REM) Une boucle recursive pour le mini plan] <B_miniplan> <BOUCLE_miniplan(RUBRIQUES) {id_parent} {par num titre, titre}> <BOUCLE_m2(BOUCLE_miniplan)></BOUCLE_m2> </li> </BOUCLE_miniplan> </ul> </B_miniplan> </BOUCLE_sous_rubriques> </div> </B_sous_rubriques> Boucles récursives : rubriques arboresc. (2/2) Extrait du squelette rubrique.html dans le répertoire /squelettes-dist/ de SPIP 2.0.6

Des filtres (1/3) Si les BOUCLES & les BALISES permettent de structurer la page de manière logique, reste à présenter les données de manière esthétique. Question design SPIP ne peut rien pour vous, mais sachez user de ses filtres... les filtres les plus utilisés (ils sont appelés automatiquement) sont |typo et |propre : |typo : correcteur typographique, dont la mission principale est d’ajouter des espaces insécables où il en faut (cf. l’aide en ligne de SPIP) |propre : s’intéresse aux paragraphes, aux raccourcis SPIP (italiques, gras, intertitres, etc.) - il n’est appliqué par défaut qu’aux textes longs (#TEXTE, #CHAPO, etc.)

Des filtres (2/3) d’autres filtres sont très utiles, citons : |majuscules à la fonctionnalité évidente |justifier ou |aligner_droite qui définissent l’alignement du texte par rapport aux bords verticaux |saison qui affiche « été » si la variable est une date comprise entre le 21 juin et le 20 septembre...

Comment utiliser un filtre ? Des filtres (3/3) Comment utiliser un filtre ? Pour utiliser un filtre il faut entourer la variable de parenthèses et de crochets : Pour utiliser un filtre il faut entourer la variable de parenthèses et de crochets : [blah blah (#VARIABLE|filtre) bloh bloh] [blah blah (#VARIABLE|filtre) bloh bloh] On peut enchaîner les filtres les uns à la suite des autres : ainsi : [(#DATE|saison|majuscules)] affichera-t-il « HIVER » [(#DATE|saison|majuscules)] affichera-t-il « HIVER »