prendre en compte les éléments maîtriser la syntaxe et exploiter les générateurs de boucles et...

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

Upload: heloise-pierron

Post on 04-Apr-2015

130 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Prendre en compte les éléments Maîtriser la syntaxe et Exploiter les générateurs de Boucles et Balises Fichier HTML Règles CSS Boîtes imbriquées Arborescence

Prendre en Prendre en compte les compte les éléments éléments

Maîtriser la syntaxe Maîtriser la syntaxe et Exploiter les et Exploiter les générateurs de générateurs de

Boucles et BalisesBoucles et Balises

Fichier HTMLFichier HTML

Règles CSSRègles CSS

Boîtes Boîtes imbriquéesimbriquées

Arborescence des Arborescence des balises HTMLbalises HTML

</BOUCLE</BOUCLEnn>>

<BOUCLE<BOUCLEnn(TYPE){critère1}...{critèrex}(TYPE){critère1}...{critèrex}>>Code HTML + Balises SPIPCode HTML + Balises SPIP

Boucles et Boucles et Balises SPIPBalises SPIP

BouclesBoucles etet BalisesBalises SPIPSPIP 2.0.62.0.6 TRAVAUX PRATIQUESTRAVAUX PRATIQUES

et relationset relations

François Daniel Giezendanner, SEM (Service Ecoles et Medias) - DIP - Genève, 5 rue des Gazomètres, 1205 CH-GenèveFranç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, [email protected] -Tél: +41 22 / 388-33-14, [email protected] -http://icp.ge.ch/sem/cms-spip/

Cours « Squelettes SPIP » - Mardi 21 avril et Mardi 5 mai 2009, 8h00-18h00Cours « Squelettes SPIP » - Mardi 21 avril et Mardi 5 mai 2009, 8h00-18h00

Page 2: Prendre en compte les éléments Maîtriser la syntaxe et Exploiter les générateurs de Boucles et Balises Fichier HTML Règles CSS Boîtes imbriquées Arborescence

Plan de travail proposé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 1. Procéder selon le tutoriel SPIP original tel qu’il est proposé sur le tel qu’il est proposé sur le site spip.net et reproduit-complété dans ce document pour la site spip.net et reproduit-complété dans ce document pour la présentation, en y apportant vos touches personnelles présentation, en y apportant vos touches personnelles

1. Procéder selon le tutoriel SPIP original 1. Procéder selon le tutoriel SPIP original tel qu’il est proposé sur le tel qu’il est proposé sur le site spip.net et reproduit-complété dans ce document pour la site spip.net et reproduit-complété dans ce document pour la présentation, en y apportant vos touches personnelles présentation, en y apportant vos touches personnelles

3. Utiliser l’un des trois templates 3. Utiliser l’un des trois templates présentés dans présentés dans « CSS : Quelques « CSS : Quelques exemples de mise en page fluide en n colonnes » exemples de mise en page fluide en n colonnes » (http://icp.ge.ch/sem/cms-spip/article.php3?id_article=166)(http://icp.ge.ch/sem/cms-spip/article.php3?id_article=166) et y et y «  « insérerinsérer » l’un des 10 fichiers types du squelette SPIP, puis procéder  » l’un des 10 fichiers types du squelette SPIP, puis procéder à diverses modifications des «  à diverses modifications des « Boucles & Balises SPIPBoucles & Balises SPIP » »

3. Utiliser l’un des trois templates 3. Utiliser l’un des trois templates présentés dans présentés dans « CSS : Quelques « CSS : Quelques exemples de mise en page fluide en n colonnes » exemples de mise en page fluide en n colonnes » (http://icp.ge.ch/sem/cms-spip/article.php3?id_article=166)(http://icp.ge.ch/sem/cms-spip/article.php3?id_article=166) et y et y «  « insérerinsérer » l’un des 10 fichiers types du squelette SPIP, puis procéder  » l’un des 10 fichiers types du squelette SPIP, puis procéder à diverses modifications des «  à diverses modifications des « Boucles & Balises SPIPBoucles & Balises SPIP » »

2. Reprendre l’un des 10 fichiers types2. Reprendre l’un des 10 fichiers types du squelette SPIP et procéder du squelette SPIP et procéder à diverses à diverses modifications/compléments des boucles et balises SPIPmodifications/compléments des boucles et balises SPIP2. Reprendre l’un des 10 fichiers types2. Reprendre l’un des 10 fichiers types du squelette SPIP et procéder du squelette SPIP et procéder à diverses à diverses modifications/compléments des boucles et balises SPIPmodifications/compléments des boucles et balises SPIP

Page 3: Prendre en compte les éléments Maîtriser la syntaxe et Exploiter les générateurs de Boucles et Balises Fichier HTML Règles CSS Boîtes imbriquées Arborescence

<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>

<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>

Rappel Rappel (1/1)(1/1)

Page 4: Prendre en compte les éléments Maîtriser la syntaxe et Exploiter les générateurs de Boucles et Balises Fichier HTML Règles CSS Boîtes imbriquées Arborescence

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}

En début de chaque squelette En début de chaque squelette (1/1)(1/1)

Page 5: Prendre en compte les éléments Maîtriser la syntaxe et Exploiter les générateurs de Boucles et Balises Fichier HTML Règles CSS Boîtes imbriquées Arborescence

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>

<BOUCLE_article(ARTICLES){id_article=1}> #TITRE</BOUCLE_article>

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.

Fichier « tutoriel.html »

Mon premier squelette Mon premier squelette (1/4)(1/4)

Afficher le Titre de l’article 1Afficher le Titre de l’article 1

Page 6: Prendre en compte les éléments Maîtriser la syntaxe et Exploiter les générateurs de Boucles et Balises Fichier HTML Règles CSS Boîtes imbriquées Arborescence

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>

<BOUCLE_article(ARTICLES){id_article=1}> <h1>#TITRE</h1> <strong>#CHAPO</strong> <div align="justify">#TEXTE</div></BOUCLE_article>

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}><BOUCLE_article(ARTICLES){id_article=5}>

Mon premier squelette Mon premier squelette (2/4)(2/4)

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.

Afficher le Titre, le Chapo et le Texte de l’article 1Afficher le Titre, le Chapo et le Texte de l’article 1

Page 7: Prendre en compte les éléments Maîtriser la syntaxe et Exploiter les générateurs de Boucles et Balises Fichier HTML Règles CSS Boîtes imbriquées Arborescence

Les balises#ID_ARTICLE#SURTITRE#TITRE#SOUSTITRE#DESCRIPTIF#CHAPO#TEXTE#PS

Les balises#ID_ARTICLE#SURTITRE#TITRE#SOUSTITRE#DESCRIPTIF#CHAPO#TEXTE#PS

Les balises calculées#NOTES#INTRODUCTION#LESAUTEURS#PETITION#URL_ARTICLE#FORMULAIRE_FORUM#FORMULAIRE_SIGNATURE#PARAMETRES_FORUM

Les balises calculées#NOTES#INTRODUCTION#LESAUTEURS#PETITION#URL_ARTICLE#FORMULAIRE_FORUM#FORMULAIRE_SIGNATURE#PARAMETRES_FORUM

Les logos#LOGO_ARTICLE#LOGO_ARTICLE_RUBRIQUE#LOGO_RUBRIQUE#LOGO_ARTICLE_NORMAL#LOGO_ARTICLE_SURVOL

Les logos#LOGO_ARTICLE#LOGO_ARTICLE_RUBRIQUE#LOGO_RUBRIQUE#LOGO_ARTICLE_NORMAL#LOGO_ARTICLE_SURVOL

Les balises#DATE#DATE_REDAC#DATE_MODIF#ID_RUBRIQUE#ID_SECTEUR#NOM_SITE#URL_SITE#VISITES#POPULARITE#LANG

Les balises#DATE#DATE_REDAC#DATE_MODIF#ID_RUBRIQUE#ID_SECTEUR#NOM_SITE#URL_SITE#VISITES#POPULARITE#LANG

Toutes les balises d'un article sont récupérables dans un squelette :

Mon premier squelette Mon premier squelette (3/4)(3/4)

Page 8: Prendre en compte les éléments Maîtriser la syntaxe et Exploiter les générateurs de Boucles et Balises Fichier HTML Règles CSS Boîtes imbriquées Arborescence

<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>

<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>

Mon premier squelette Mon premier squelette (4/4)(4/4)

ExempleExemple

Afficher :• Surtitre• Titre• Soustitre• Chapo• Texte• Notes• Date• Auteurs• PS

de l’article 5

Afficher :• Surtitre• Titre• Soustitre• Chapo• Texte• Notes• Date• Auteurs• PS

de l’article 5

Page 9: Prendre en compte les éléments Maîtriser la syntaxe et Exploiter les générateurs de Boucles et Balises Fichier HTML Règles CSS Boîtes imbriquées Arborescence

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}><BOUCLE_article(ARTICLES){id_article}>

Modifions dans le squelette « tutoriel html » la ligne qui définit la « boucle article » :

Un squelette, plusieurs articles Un squelette, plusieurs articles (1/2)(1/2)

Afficher n’importe quel article :

Pour cela nous allons appeler notre page Web avec le paramètre id_article=2 pour appeler l'article 2 :

Afficher des éléments en fonction du contexte

<BOUCLE_article(ARTICLES){id_article=1}> <h1>#TITRE</h1> <strong>#CHAPO</strong> <div align="justify">#TEXTE</div></BOUCLE_article>

<BOUCLE_article(ARTICLES){id_article=1}> <h1>#TITRE</h1> <strong>#CHAPO</strong> <div align="justify">#TEXTE</div></BOUCLE_article>

http://localhost/mon-site/spip.php?page=tutoriel&id_article=2Echec : c'est toujours l’article 1 (et pas le 2) qui s'affiche.

Page 10: Prendre en compte les éléments Maîtriser la syntaxe et Exploiter les générateurs de Boucles et Balises Fichier HTML Règles CSS Boîtes imbriquées Arborescence

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).

Un squelette, plusieurs articles Un squelette, plusieurs articles (2/2)(2/2)

<BOUCLE_article(ARTICLES){id_article}> <h1>#TITRE</h1> <strong>#CHAPO</strong> <div align="justify">#TEXTE</div></BOUCLE_article>

<BOUCLE_article(ARTICLES){id_article}> <h1>#TITRE</h1> <strong>#CHAPO</strong> <div align="justify">#TEXTE</div></BOUCLE_article>

• 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

• 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 :

• 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).

Page 11: Prendre en compte les éléments Maîtriser la syntaxe et Exploiter les générateurs de Boucles et Balises Fichier HTML Règles CSS Boîtes imbriquées Arborescence

Un contexte qui varie au fur et à mesure des BOUCLES rencontrées.

Une rubriqueUne rubrique: les articles du site : les articles du site (1/4)(1/4)

Modifions notre squelette « tutoriel.html » de la manière suivante :

<BOUCLE_article(ARTICLES)> #TITRE<BR></BOUCLE_article>

<BOUCLE_article(ARTICLES)> #TITRE<BR></BOUCLE_article>

Tous les articles du site

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...

Page 12: Prendre en compte les éléments Maîtriser la syntaxe et Exploiter les générateurs de Boucles et Balises Fichier HTML Règles CSS Boîtes imbriquées Arborescence

Un contexte qui varie au fur et à mesure des BOUCLES rencontrées.

Une rubriqueUne rubrique: 10 prem. articles du site : 10 prem. articles du site (2/4)(2/4)

...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 :

Les dix premiers articles du site

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.

<BOUCLE_article(ARTICLES) {0,10}> #TITRE<BR></BOUCLE_article>

<BOUCLE_article(ARTICLES) {0,10}> #TITRE<BR></BOUCLE_article>

Page 13: Prendre en compte les éléments Maîtriser la syntaxe et Exploiter les générateurs de Boucles et Balises Fichier HTML Règles CSS Boîtes imbriquées Arborescence

Une rubrique: ses 10 premier articles Une rubrique: ses 10 premier articles (3/4)(3/4)

<BOUCLE_article(ARTICLES){id_rubrique}{par date}{inverse}{0,10}> <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 rubriqueAjoutons 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) :

En ajoutant le critère de sélection id_rubrique, on produit le sommaire d’une rubrique :

Sommaire d’une rubrique

<BOUCLE_article(ARTICLES){id_rubrique}> <a href="#URL_ARTICLE">#TITRE</a><br></BOUCLE_article>

<BOUCLE_article(ARTICLES){id_rubrique}> <a href="#URL_ARTICLE">#TITRE</a><br></BOUCLE_article>

Page 14: Prendre en compte les éléments Maîtriser la syntaxe et Exploiter les générateurs de Boucles et Balises Fichier HTML Règles CSS Boîtes imbriquées Arborescence

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é !

Une rubrique Une rubrique (4/4)(4/4)

Page 15: Prendre en compte les éléments Maîtriser la syntaxe et Exploiter les générateurs de Boucles et Balises Fichier HTML Règles CSS Boîtes imbriquées Arborescence

Les articles du site: anti-chronologique Les articles du site: anti-chronologique (1/2)(1/2)

<html><body>

<h2>"#TITRE" du dernier article publié</h2><h2>"#TITRE" de l'avant-dernier article publié</h2>…….

</body><html>

<html><body>

<h2>"#TITRE" du dernier article publié</h2><h2>"#TITRE" de l'avant-dernier article publié</h2>…….

</body><html>

On veut afficher les derniers articles publiés, sur le modèle :

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

Page 16: Prendre en compte les éléments Maîtriser la syntaxe et Exploiter les générateurs de Boucles et Balises Fichier HTML Règles CSS Boîtes imbriquées Arborescence

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><html>

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><html>

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")

Les articles du site: anti-chronologique Les articles du site: anti-chronologique (2/2)(2/2)

Page 17: Prendre en compte les éléments Maîtriser la syntaxe et Exploiter les générateurs de Boucles et Balises Fichier HTML Règles CSS Boîtes imbriquées Arborescence

Sommaire : les dix derniers articles Sommaire : les dix derniers articles (1/2)(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><html>

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><html>

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 à afficherExemple : {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.

Page 18: Prendre en compte les éléments Maîtriser la syntaxe et Exploiter les générateurs de Boucles et Balises Fichier HTML Règles CSS Boîtes imbriquées Arborescence

Sommaire : les dix derniers articles Sommaire : les dix derniers articles (2/2)(2/2)

<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><html>

<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><html>

Exploiter la syntaxe complète des boucles et les listes

Page 19: Prendre en compte les éléments Maîtriser la syntaxe et Exploiter les générateurs de Boucles et Balises Fichier HTML Règles CSS Boîtes imbriquées Arborescence

Boucles en boucles : auteurs d’articles Boucles en boucles : auteurs d’articles (1/3)(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><html>

<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><html>

Problème : sans critère de sélection, la boucle auteur affiche tous les auteurs du site

Page 20: Prendre en compte les éléments Maîtriser la syntaxe et Exploiter les générateurs de Boucles et Balises Fichier HTML Règles CSS Boîtes imbriquées Arborescence

Boucles en boucles : auteurs d’articles Boucles en boucles : auteurs d’articles (2/3)(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><html>

<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><html>

En ajoutant le critère {id_article} à la boucle AUTEURS, on n'affiche que les auteurs de l'article.

Page 21: Prendre en compte les éléments Maîtriser la syntaxe et Exploiter les générateurs de Boucles et Balises Fichier HTML Règles CSS Boîtes imbriquées Arborescence

Les balises#ID_AUTEUR#NOM#BIO#EMAIL#NOM_SITE#URL_SITE#PGP#LANG#FORMULAIRE_ECRIRE_AUTEUR

Les balises#ID_AUTEUR#NOM#BIO#EMAIL#NOM_SITE#URL_SITE#PGP#LANG#FORMULAIRE_ECRIRE_AUTEUR

Les balises calculées#NOTES#URL_AUTEUR

Les balises calculées#NOTES#URL_AUTEUR

Les logos#LOGO_AUTEURLes logos#LOGO_AUTEUR

Toutes les balises d'un auteur sont récupérables dans un squelette :

Boucles en boucles : auteurs d’articles Boucles en boucles : auteurs d’articles (3/3)(3/3)

Page 22: Prendre en compte les éléments Maîtriser la syntaxe et Exploiter les générateurs de Boucles et Balises Fichier HTML Règles CSS Boîtes imbriquées Arborescence

Boucles en boucles : rubrique-articles Boucles en boucles : rubrique-articles (1/3)(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>

<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.

Page 23: Prendre en compte les éléments Maîtriser la syntaxe et Exploiter les générateurs de Boucles et Balises Fichier HTML Règles CSS Boîtes imbriquées Arborescence

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.

<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>

<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)]

Boucles en boucles : rubrique-articles Boucles en boucles : rubrique-articles (2/3)(2/3)

Page 24: Prendre en compte les éléments Maîtriser la syntaxe et Exploiter les générateurs de Boucles et Balises Fichier HTML Règles CSS Boîtes imbriquées Arborescence

Les balises#ID_RUBRIQUE#TITRE#DESCRIPTIF#TEXTE#ID_SECTEUR#LANG

Les balises#ID_RUBRIQUE#TITRE#DESCRIPTIF#TEXTE#ID_SECTEUR#LANG

Les balises calculées#NOTES#INTRODUCTION#URL_RUBRIQUE#DATE#FORMULAIRE_FORUM#PARAMETRES_FORUM#FORMULAIRE_SITE

Les balises calculées#NOTES#INTRODUCTION#URL_RUBRIQUE#DATE#FORMULAIRE_FORUM#PARAMETRES_FORUM#FORMULAIRE_SITE

Les logos#LOGO_RUBRIQUE#LOGO_RUBRIQUE_NORMAL#LOGO_RUBRIQUE_SURVOL

Les logos#LOGO_RUBRIQUE#LOGO_RUBRIQUE_NORMAL#LOGO_RUBRIQUE_SURVOL

Toutes les balises d'une rubrique sont récupérables dans un squelette :

Boucles en boucles : rubrique-articles Boucles en boucles : rubrique-articles (3/3)(3/3)

Page 25: Prendre en compte les éléments Maîtriser la syntaxe et Exploiter les générateurs de Boucles et Balises Fichier HTML Règles CSS Boîtes imbriquées Arborescence

Brèves Brèves (1/3)(1/3)

Afficher la brève dont l’id_breve est défini dans l ’URL :

<BOUCLE_breves(BREVES){id_breve}><BOUCLE_breves(BREVES){id_breve}>

Afficher les dix dernières brèves publiées sur tout le site :

<BOUCLE_breves(BREVES) {par date} {inverse} {0,10}><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}><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}><BOUCLE_breves(BREVES){id_breve=5}>

Page 26: Prendre en compte les éléments Maîtriser la syntaxe et Exploiter les générateurs de Boucles et Balises Fichier HTML Règles CSS Boîtes imbriquées Arborescence

Les balises calculées#NOTES#INTRODUCTION#URL_BREVE#FORMULAIRE_FORUM#PARAMETRES_FORUM

Les balises calculées#NOTES#INTRODUCTION#URL_BREVE#FORMULAIRE_FORUM#PARAMETRES_FORUM

Les logos#LOGO_BREVE#LOGO_BREVE_RUBRIQUE

Les logos#LOGO_BREVE#LOGO_BREVE_RUBRIQUE

Les balises#ID_BREVE#TITRE#DATE#TEXTE#NOM_SITE#URL_SITE#ID_RUBRIQUE#LANG

Les balises#ID_BREVE#TITRE#DATE#TEXTE#NOM_SITE#URL_SITE#ID_RUBRIQUE#LANG

Toutes les balises d'une brève sont récupérables dans un squelette :

Brèves Brèves (2/3)(2/3)

Page 27: Prendre en compte les éléments Maîtriser la syntaxe et Exploiter les générateurs de Boucles et Balises Fichier HTML Règles CSS Boîtes imbriquées Arborescence

Brèves Brèves (3/3)(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>

<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>

Page 28: Prendre en compte les éléments Maîtriser la syntaxe et Exploiter les générateurs de Boucles et Balises Fichier HTML Règles CSS Boîtes imbriquées Arborescence

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.

Boucles récursives: rubriques arboresc. Boucles récursives: rubriques arboresc. (1/2)(1/2)

<BOUCLE_rubrique(RUBRIQUES){id_parent}{par titre}>#TITRE<BOUCLE_ssRubriques(BOUCLE_rubrique)></BOUCLE_ssRubriques>

</BOUCLE_Rubriques>

<BOUCLE_rubrique(RUBRIQUES){id_parent}{par titre}>#TITRE<BOUCLE_ssRubriques(BOUCLE_rubrique)></BOUCLE_ssRubriques>

</BOUCLE_Rubriques>

L’arborescence des rubriques d’une rubrique

Page 29: Prendre en compte les éléments Maîtriser la syntaxe et Exploiter les générateurs de Boucles et Balises Fichier HTML Règles CSS Boîtes imbriquées Arborescence

...[(#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> <ul> <BOUCLE_miniplan(RUBRIQUES) {id_parent} {par num titre, titre}> <li> <a href="#URL_RUBRIQUE">[(#TITRE)]</a> <BOUCLE_m2(BOUCLE_miniplan)></BOUCLE_m2> </li> </BOUCLE_miniplan> </ul> </B_miniplan> </li> </BOUCLE_sous_rubriques> </ul> </div> </B_sous_rubriques>

Boucles récursives : Boucles récursives : rubriques arboresc. rubriques arboresc. (2/2)(2/2)

Extrait du squelette rubrique.html dans le répertoire /squelettes-dist/ de SPIP 2.0.6

Page 30: Prendre en compte les éléments Maîtriser la syntaxe et Exploiter les générateurs de Boucles et Balises Fichier HTML Règles CSS Boîtes imbriquées Arborescence

Des filtres Des filtres (1/3)(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)

|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.)

|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.)

Page 31: Prendre en compte les éléments Maîtriser la syntaxe et Exploiter les générateurs de Boucles et Balises Fichier HTML Règles CSS Boîtes imbriquées Arborescence

d’autres filtres sont très utiles, citons :

|saison qui affiche « été » si la variable est une date comprise entre le 21 juin et le 20 septembre...|saison qui affiche « été » si la variable est une date comprise entre le 21 juin et le 20 septembre...

|justifier ou |aligner_droite qui définissent l’alignement du texte par rapport aux bords verticaux|justifier ou |aligner_droite qui définissent l’alignement du texte par rapport aux bords verticaux

|majuscules à la fonctionnalité évidente|majuscules à la fonctionnalité évidente

Des filtres Des filtres (2/3)(2/3)

Page 32: Prendre en compte les éléments Maîtriser la syntaxe et Exploiter les générateurs de Boucles et Balises Fichier HTML Règles CSS Boîtes imbriquées Arborescence

• On peut enchaîner les filtres les uns à la suite des autres : ainsi :

• Pour utiliser un filtre il faut entourer la variable de parenthèses et de crochets :

Des filtres Des filtres (3/3)(3/3)

Comment utiliser un filtre ?Comment utiliser un filtre ?

[blah blah (#VARIABLE|filtre) bloh bloh][blah blah (#VARIABLE|filtre) bloh bloh]

[(#DATE|saison|majuscules)] affichera-t-il « HIVER »[(#DATE|saison|majuscules)] affichera-t-il « HIVER »

[blah blah (#VARIABLE|filtre) bloh bloh][blah blah (#VARIABLE|filtre) bloh bloh]

[(#DATE|saison|majuscules)] affichera-t-il « HIVER »[(#DATE|saison|majuscules)] affichera-t-il « HIVER »

• Pour utiliser un filtre il faut entourer la variable de parenthèses et de crochets :