François Daniel Giezendanner, SEM (Service Ecoles et Medias) - DIP - Genève, 4-5...

30
François Daniel Giezendanner, SEM (Service Ecoles et Medias) - DIP - Genève, 4-5 Théodore-de-Bèze, 1205 CH-Genève François Daniel Giezendanner, SEM (Service Ecoles et Medias) - DIP - Genève, 4-5 Théodore-de-Bèze, 1205 CH-Genève Tél: +41 22 / 388-33-14, [email protected] - Tél: +41 22 / 388-33-14, [email protected] - http://p7app.geneve.ch/spip/plan.php3 http://p7app.geneve.ch/spip/plan.php3 Cours « Squelettes-SPIP » - Mardi 25 janvier 2005, 8h00-18h00 et Jeudi 3 février 2005, 8h00-1200 Cours « Squelettes-SPIP » - Mardi 25 janvier 2005, 8h00-18h00 et Jeudi 3 février 2005, 8h00-1200 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 add-on pour add-on pour Dreamwaever Dreamwaever et le WEB et le WEB 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 1.7.2 1.7.2 TRAVAUX PRATIQUES TRAVAUX PRATIQUES et relations et relations

Transcript of François Daniel Giezendanner, SEM (Service Ecoles et Medias) - DIP - Genève, 4-5...

Page 1: François Daniel Giezendanner, SEM (Service Ecoles et Medias) - DIP - Genève, 4-5 Théodore-de-Bèze, 1205 CH-Genève Tél: +41 22 / 388-33-14, francois-daniel.giezendanner@edu.ge.ch.

François Daniel Giezendanner, SEM (Service Ecoles et Medias) - DIP - Genève, 4-5 Théodore-de-Bèze, 1205 CH-GenèveFrançois Daniel Giezendanner, SEM (Service Ecoles et Medias) - DIP - Genève, 4-5 Théodore-de-Bèze, 1205 CH-Genève

Tél: +41 22 / 388-33-14, [email protected] - http://p7app.geneve.ch/spip/plan.php3Tél: +41 22 / 388-33-14, [email protected] - http://p7app.geneve.ch/spip/plan.php3

Cours « Squelettes-SPIP » - Mardi 25 janvier 2005, 8h00-18h00 et Jeudi 3 février 2005, 8h00-1200Cours « Squelettes-SPIP » - Mardi 25 janvier 2005, 8h00-18h00 et Jeudi 3 février 2005, 8h00-1200

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

add-on pour add-on pour Dreamwaever Dreamwaever

et le WEBet le WEB

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 1.7.21.7.2 TRAVAUX PRATIQUESTRAVAUX PRATIQUES

et relationset relations

Page 2: François Daniel Giezendanner, SEM (Service Ecoles et Medias) - DIP - Genève, 4-5 Théodore-de-Bèze, 1205 CH-Genève Tél: +41 22 / 388-33-14, francois-daniel.giezendanner@edu.ge.ch.

• CSS : Quelques exemples de mise en page fluide en n colonnesCSS : Quelques exemples de mise en page fluide en n colonnes CSSnColZdUfIs_V2.ppt Téléchargement : http://p7app.geneve.ch:8007/spip/article.php3?id_article=166

• Les CSS dans SPIP 1.7.2Les CSS dans SPIP 1.7.2 CssSpip172Article_v04.ppt Téléchargement : http://p7app.geneve.ch/spip/ article.php3?id_article=169http://p7app.geneve.ch/spip/ article.php3?id_article=169

Avant de mettre en œuvre les éléments de ce document, il est profitable de consulter les documents et pages web suivants :

• Boucles et Balises SPIP 1.7.2 de 10 types de fichiers DW_Configurer_v1.ppt http://p7app.geneve.ch:8007/spip/article.php3?id_article=176

Et basez-vous sur les manuel de référence présentés aux pages suivantes :

• Les Boucles et Balises SPIP 1.7.2 » Téléchargement : http://p7app.geneve.ch:8007/spip/article.php3?id_article=172

Télécharger le présent document Powerpoint : « Travaux pratiques sur les Boucles et Balises SPIP 1.7.2 »http://p7app.geneve.ch:8007/spip/article.php3?id_article=178

• Configurer Dreamweaver MX pour modifier/créer des squelettes SPIP http://p7app.geneve.ch:8007/spip/article.php3?id_article=177

Page 3: François Daniel Giezendanner, SEM (Service Ecoles et Medias) - DIP - Genève, 4-5 Théodore-de-Bèze, 1205 CH-Genève Tél: +41 22 / 388-33-14, francois-daniel.giezendanner@edu.ge.ch.

• Principe général

• Des boucles et des balises

• La syntaxe des boucles

• La syntaxe des balises SPIP

• La boucle ARTICLES

• La boucle RUBRIQUES

• La boucle BREVES

• La boucle AUTEURS

• La boucle FORUMS

• La boucle MOTS

• La boucle SITES (ou SYNDICATION)

• La boucle DOCUMENTS

• La boucle SYNDIC_ARTICLES

• La boucle SIGNATURES

• La boucle HIERARCHIE

• Les critères communs à toutes les boucles

• Les balises propres au site

• Les formulaires

• Les boucles de recherche

• Les filtres de SPIP

• Les boucles récursives

• La « popularité » des articles

• La gestion des dates

• Exposer un article dans une liste

Mise en page : manuel de référence. Comment créer sa propre mise en page pour un site géré sous SPIP : http://www.spip.net/fr_rubrique143.html

Page 4: François Daniel Giezendanner, SEM (Service Ecoles et Medias) - DIP - Genève, 4-5 Théodore-de-Bèze, 1205 CH-Genève Tél: +41 22 / 388-33-14, francois-daniel.giezendanner@edu.ge.ch.

• Mon premier squelette (je le sors du placard).

Comment écrire un premier squelette qui marchouille.

• Un squelette, plusieurs articles, c’est à ça que ça sert…

Et voici le premier contexte.

• Une rubrique ou comment faire des listes du contenu de la base.

Faire des listes avec une boucle SPIP.

• Boucles en boucles, plusieurs niveaux de lecture.

Affichons sur une même page des éléments en provenance de plusieurs

endroits.

• Gérer le cache et éviter de faire ramer le serveur qui n’a pas que ça à faire.

Le cache, ou comment faire un site dynamique qui ne bouge pas trop.

• Des filtres. Subtilités squelettiques.

Les filtres transforment le contenu de la base de données en code HTML

présentable.

SPIP pas à pas. Pas à pas, comment créer un SPIP qui défie les limites.http://www.spip.net/fr_rubrique144.html

Page 5: François Daniel Giezendanner, SEM (Service Ecoles et Medias) - DIP - Genève, 4-5 Théodore-de-Bèze, 1205 CH-Genève Tél: +41 22 / 388-33-14, francois-daniel.giezendanner@edu.ge.ch.

• Spip et les feuilles de style

• <INCLURE> d’autres squelettes

• Réaliser un site multilingue

• Internationaliser les squelettes

• Utiliser des URLs personnalisées

• Le moteur de recherche

• Les variables de personnalisation

• Le support LDAP

• La structure de la base de données

Au-delà du manuel de référence, vous trouverez ici une description détaillée des fonctions plus avancées à la disposition du webmestre :

Guide des fonctions avancées :http://www.spip.net/fr_rubrique257.html

Page 6: François Daniel Giezendanner, SEM (Service Ecoles et Medias) - DIP - Genève, 4-5 Théodore-de-Bèze, 1205 CH-Genève Tél: +41 22 / 388-33-14, francois-daniel.giezendanner@edu.ge.ch.

• Afficher automatiquement selon la date ou selon un ordre imposé

• Trier des articles par ordre alphabétique, sauf un qu’il faut afficher en premier

• Plusieurs logos pour un article

• Afficher les derniers articles de vos redacteurs par rubrique

• Afficher des éléments par lignes dans un tableau

• Ne pas afficher les articles publiés depuis plus d’un an

• Présenter les résultats d’une recherche par secteurs

• Afficher le nombre de messages du forum lié à un article

• Un menu déroulant pour présenter une liste d’articles

• Remplir les meta-tags HTML des pages d’article

Trucs et astuces : http://www.spip.net/fr_rubrique172.html

Page 7: François Daniel Giezendanner, SEM (Service Ecoles et Medias) - DIP - Genève, 4-5 Théodore-de-Bèze, 1205 CH-Genève Tél: +41 22 / 388-33-14, francois-daniel.giezendanner@edu.ge.ch.

Informations Informations préliminairespréliminaires

Page 8: François Daniel Giezendanner, SEM (Service Ecoles et Medias) - DIP - Genève, 4-5 Théodore-de-Bèze, 1205 CH-Genève Tél: +41 22 / 388-33-14, francois-daniel.giezendanner@edu.ge.ch.

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 dans ce document pour la présentation, en y site spip.net et reproduit dans ce document pour la présentation, en y apportant vos touches personnelles 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 dans ce document pour la présentation, en y site spip.net et reproduit dans ce document pour la présentation, en y apportant vos touches personnelles 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://p7app.geneve.ch:8007/spip/article.php3?id_article=166)(http://p7app.geneve.ch:8007/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://p7app.geneve.ch:8007/spip/article.php3?id_article=166)(http://p7app.geneve.ch:8007/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 9: François Daniel Giezendanner, SEM (Service Ecoles et Medias) - DIP - Genève, 4-5 Théodore-de-Bèze, 1205 CH-Genève Tél: +41 22 / 388-33-14, francois-daniel.giezendanner@edu.ge.ch.

• L’interface des news• Et encore d’autres moyens de se compliquer la vie ! Noter les jeux, annoncer les dates de sortie• Quelques sommaires alternatifs• Une première version du sommaire• Un sommaire pour chaque machine• Référencer des articles sur le Web• Un forum pour chaque jeu• Le site complet

Tutorial : utilisation avancée des boucles et des mots-clés :http://www.spip.net/fr_rubrique154.html

• Introduction• Le but du jeu : un site consacré aux jeux vidéo• La structure du site• Mise en place de la structure• Écrire des articles• Première version du squelette des articles• La page des rubriques• Les mots-clés dans les articles• Les mots-clés dans les rubriques

Par la suite, après le Par la suite, après le cours et les TP...cours et les TP...

Donnez-vous éventuellement la peine de faire, en tout ou partie, l’exercice très complet constitué par le tutoriel présenté ci-dessous et proposé sur le site officiel SPIP :

Page 10: François Daniel Giezendanner, SEM (Service Ecoles et Medias) - DIP - Genève, 4-5 Théodore-de-Bèze, 1205 CH-Genève Tél: +41 22 / 388-33-14, francois-daniel.giezendanner@edu.ge.ch.

MAC : http://localhost/~eleve_c/spip_eleve_c ou encore http://127.0.0.1/~eleve_c/spip_eleve_c

PC - installation standard EasyPHP : http://localhost/www/spip_eleve_c ou encore http://127.0.0.1/www/spip_eleve_c

MAC : http://localhost/~eleve_c/spip_eleve_c ou encore http://127.0.0.1/~eleve_c/spip_eleve_c

PC - installation standard EasyPHP : http://localhost/www/spip_eleve_c ou encore http://127.0.0.1/www/spip_eleve_c

URL locale sur les postes MAC et PCURL locale sur les postes MAC et PCConsidérons le cas d’un élève « eleve_c » ayant installé un SPIP dont il aura nommé le répertoire « spip_eleve_c ».

Pour lancer le fichier « sommaire.html » du site SPIP installé sur sa station locale, il doit écrire l’adresse (URL) suivante dans la barre d’adresse du navigateur :

Page 11: François Daniel Giezendanner, SEM (Service Ecoles et Medias) - DIP - Genève, 4-5 Théodore-de-Bèze, 1205 CH-Genève Tél: +41 22 / 388-33-14, francois-daniel.giezendanner@edu.ge.ch.

Travaux pratiques Travaux pratiques « pas à pas » « pas à pas »

pour votre pour votre premier squelettepremier squelette

Page 12: François Daniel Giezendanner, SEM (Service Ecoles et Medias) - DIP - Genève, 4-5 Théodore-de-Bèze, 1205 CH-Genève Tél: +41 22 / 388-33-14, francois-daniel.giezendanner@edu.ge.ch.

Mon premier squelette Mon premier squelette (1/3)(1/3)

• Matériel requis pour ce tutoriel : Conformément au début du cours une version SPIP 1.7.2 est installée sur chacun de vos postes individuels, le nom du répertoire est SPIP. Afin de disposer de matière pertinente (rubriques, brèves, articles, auteurs, mots clés, etc), la base de données publique et les documents de F3MITIC 2003-2004 sont chargés sur chaque poste. Vous disposez donc d'une base très riche aux plans quantitatif et qualitatif.

Voici un exemple minimal de squelette qui vous permettra d'extraire des données de l’article n°1 de la base et d’en faire une page Web.

• Les outils : Les auteurs de SPIP préconisent de travailler avec un éditeur de texte pour créer et modifier les fichiers utilisés par SPIP, c ’est un choix compréhensible. Voici leur commentaire : Note : certaines personnes auront le réflexe de vouloir utiliser Dreamweaver (ou autre logiciel graphique) pour modifier les fichiers html. Cependant pour des exemples simples Dreamweaver compliquera la tâche et risque même de modifier vos fichiers dans votre dos. Il est donc vraiment préférable d’utiliser un éditeur de texte classique (par exemple le bloc-notes sous Windows).

• Notre choix : Notre choix : Nous utilisons DreamweaverNous utilisons Dreamweaver car : car : La maîtrise d'un outil tel que Dreamweaver, Golive, Namo Web Editor, La maîtrise d'un outil tel que Dreamweaver, Golive, Namo Web Editor, FrontPage ou Nvu etc. est un prérequis demandé pour suivre le cours, de plus FrontPage ou Nvu etc. est un prérequis demandé pour suivre le cours, de plus Dreamweaver et Golive sont enseignés au SEM pour la «Formation Continue».Dreamweaver et Golive sont enseignés au SEM pour la «Formation Continue».

Des « add on » tel que le Des « add on » tel que le Générateur de « Boucles & Balises SPIPGénérateur de « Boucles & Balises SPIP » » et et leur mise en évidence avec des leur mise en évidence avec des ««  Icônes SpécialiséesIcônes Spécialisées » » ont été créés pour ont été créés pour Dreamweaver dans la communauté SPIP Dreamweaver dans la communauté SPIP ((Plugin de Fabrice GanglerPlugin de Fabrice Gangler))..

Page 13: François Daniel Giezendanner, SEM (Service Ecoles et Medias) - DIP - Genève, 4-5 Théodore-de-Bèze, 1205 CH-Genève Tél: +41 22 / 388-33-14, francois-daniel.giezendanner@edu.ge.ch.

1. Créez à la racine de votre site SPIP un fichier « tutoriel.php3 » contenant les lignes suivantes :

Un message d’erreur vous informe qu’il manque un fichier. C’est le fameux squelette, que nous allons maintenant créer.

• PC : http://localhost/www/spip/tutoriel.php (installation standard EasyPHP)• Mac : http://localhost/~eleve_c/spip/tutoriel.php

• PC : http://localhost/www/spip/tutoriel.php (installation standard EasyPHP)• Mac : http://localhost/~eleve_c/spip/tutoriel.php

Testez dans votre navigateur :

2. A la racine du site, 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/www/spip/tutoriel.php. 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 »

<?php$fond = "tutoriel";$delais = 0;include "inc-public.php3";?>

<?php$fond = "tutoriel";$delais = 0;include "inc-public.php3";?>

Fichier « tutoriel.php3 »

Page 14: François Daniel Giezendanner, SEM (Service Ecoles et Medias) - DIP - Genève, 4-5 Théodore-de-Bèze, 1205 CH-Genève Tél: +41 22 / 388-33-14, francois-daniel.giezendanner@edu.ge.ch.

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> <b>#CHAPO</b> <div align="justify">#TEXTE</div></BOUCLE_article>

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

Rechargez la page http://localhost/www/spip/tutoriel.php, 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/www/spip/tutoriel.php, 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 (3/3)(3/3)

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.

Page 15: François Daniel Giezendanner, SEM (Service Ecoles et Medias) - DIP - Genève, 4-5 Théodore-de-Bèze, 1205 CH-Genève Tél: +41 22 / 388-33-14, francois-daniel.giezendanner@edu.ge.ch.

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/www/spip/tutoriel.php?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> <b>#CHAPO</b> <div align="justify">#TEXTE</div></BOUCLE_article>

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

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

Page 16: François Daniel Giezendanner, SEM (Service Ecoles et Medias) - DIP - Genève, 4-5 Théodore-de-Bèze, 1205 CH-Genève Tél: +41 22 / 388-33-14, francois-daniel.giezendanner@edu.ge.ch.

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> <b>#CHAPO</b> <div align="justify">#TEXTE</div></BOUCLE_article>

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

• http://localhost/www/spip/tutoriel.php?id_article=1,

• http://localhost/www/spip/tutoriel.php?id_article=2 et

• http://localhost/www/spip/tutoriel.php.

• http://localhost/www/spip/tutoriel.php?id_article=1,

• http://localhost/www/spip/tutoriel.php?id_article=2 et

• http://localhost/www/spip/tutoriel.php.

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 17: François Daniel Giezendanner, SEM (Service Ecoles et Medias) - DIP - Genève, 4-5 Théodore-de-Bèze, 1205 CH-Genève Tél: +41 22 / 388-33-14, francois-daniel.giezendanner@edu.ge.ch.

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

Une rubrique Une rubrique (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 de F3MITIC 2003-2004 qui est chargée pour votre SPIP...

Page 18: François Daniel Giezendanner, SEM (Service Ecoles et Medias) - DIP - Genève, 4-5 Théodore-de-Bèze, 1205 CH-Genève Tél: +41 22 / 388-33-14, francois-daniel.giezendanner@edu.ge.ch.

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

Une rubrique Une rubrique (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/www/spip/tutoriel.php3 (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 19: François Daniel Giezendanner, SEM (Service Ecoles et Medias) - DIP - Genève, 4-5 Théodore-de-Bèze, 1205 CH-Genève Tél: +41 22 / 388-33-14, francois-daniel.giezendanner@edu.ge.ch.

Une rubrique Une rubrique (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 20: François Daniel Giezendanner, SEM (Service Ecoles et Medias) - DIP - Genève, 4-5 Théodore-de-Bèze, 1205 CH-Genève Tél: +41 22 / 388-33-14, francois-daniel.giezendanner@edu.ge.ch.

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://votresite.net/tutoriel.php3?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 21: François Daniel Giezendanner, SEM (Service Ecoles et Medias) - DIP - Genève, 4-5 Théodore-de-Bèze, 1205 CH-Genève Tél: +41 22 / 388-33-14, francois-daniel.giezendanner@edu.ge.ch.

Boucles en boucles Boucles en boucles (1/2)(1/2)

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/www/spip/tutoriel.php3?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 22: François Daniel Giezendanner, SEM (Service Ecoles et Medias) - DIP - Genève, 4-5 Théodore-de-Bèze, 1205 CH-Genève Tél: +41 22 / 388-33-14, francois-daniel.giezendanner@edu.ge.ch.

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>

Boucles en boucles Boucles en boucles (2/2)(2/2)

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. Ca vous fait saliver ?

[(#TEXTE|justifier)]

Page 23: François Daniel Giezendanner, SEM (Service Ecoles et Medias) - DIP - Genève, 4-5 Théodore-de-Bèze, 1205 CH-Genève Tél: +41 22 / 388-33-14, francois-daniel.giezendanner@edu.ge.ch.

Gérer le cache Gérer le cache (1/5)(1/5)

Page 24: François Daniel Giezendanner, SEM (Service Ecoles et Medias) - DIP - Genève, 4-5 Théodore-de-Bèze, 1205 CH-Genève Tél: +41 22 / 388-33-14, francois-daniel.giezendanner@edu.ge.ch.

Gérer le cache Gérer le cache (2/5)(2/5)

Lorsqu’une page est demandée à SPIP, par exemple l’URL http://localhost/www/spip/tutoriel.php3?id_article=12,

Dans notre exemple nous avions fixé des $delais=0; d’où un recalcul systématique des pages à chaque consultation du site.

Si ce délai n’est pas dépassé, SPIP affiche le fichier présent dans le CACHE .Si ce délai n’est pas dépassé, SPIP affiche le fichier présent dans le CACHE .

Si ce délai est dépassé, SPIP recalcule le fichier comme indiqué ci-dessus.Si ce délai est dépassé, SPIP recalcule le fichier comme indiqué ci-dessus.

Si ce fichier existe, SPIP compare l’âge du fichier caché aux $delais fixés dans le fichier d’appel tutoriel.php3. Si ce fichier existe, SPIP compare l’âge du fichier caché aux $delais fixés dans le fichier d’appel tutoriel.php3.

SPIP regarde dans son sous-répertoire CACHE/ si ce fichier existe :

Si ce fichier n’existe pas, SPIP calcule ce fichier en se connectant à la base de données pour y lire les informations requises, dépose le résultat du calcul dans le CACHE et l’affiche à l ’écran de l’utilisateur.

Si ce fichier n’existe pas, SPIP calcule ce fichier en se connectant à la base de données pour y lire les informations requises, dépose le résultat du calcul dans le CACHE et l’affiche à l ’écran de l’utilisateur.

Page 25: François Daniel Giezendanner, SEM (Service Ecoles et Medias) - DIP - Genève, 4-5 Théodore-de-Bèze, 1205 CH-Genève Tél: +41 22 / 388-33-14, francois-daniel.giezendanner@edu.ge.ch.

La page « id_article=12 » est demandée à SPIP, c ’est à dire l’URL

http://localhost/www/spip/tutoriel.php3?id_article=12,

La page « id_article=12 » est demandée à SPIP, c ’est à dire l’URL

http://localhost/www/spip/tutoriel.php3?id_article=12,

Non : Délaidépassé

Non : Délaidépassé

Calcule id_article=12

en intégrant leséléments de la

base de données

NonNon

Consulte CACHE : Existence fichierid_article=12 ?

Mise en CACHEMise en CACHE

Affichearticle12.html

OuiOui

$delais <Age-Fichier

?

Affichearticle12.html

Fichier Existe ?

Oui : Délai Non-dépasséOui : Délai

Non-dépassé

(3/5)(3/5)

Page 26: François Daniel Giezendanner, SEM (Service Ecoles et Medias) - DIP - Genève, 4-5 Théodore-de-Bèze, 1205 CH-Genève Tél: +41 22 / 388-33-14, francois-daniel.giezendanner@edu.ge.ch.

La page «  id_article=12  » est demandée à SPIP, c ’est à dire l’URL http://localhost/www/spip/tutoriel.php3?id_article=12,

La page «  id_article=12  » est demandée à SPIP, c ’est à dire l’URL http://localhost/www/spip/tutoriel.php3?id_article=12,

Non : Délaidépassé

Non : Délaidépassé

Calcule id_article=12

en intégrant leséléments de la

base de données

NonNon

Consulte CACHE : Existence fichierid_article=12 ?

Mise en CACHEMise en CACHE

Affichearticle12.html

OuiOui

$delais <Age-Fichier

?

Affichearticle12.html

Fichier Existe ?

Oui : Délai Non-dépasséOui : Délai

Non-dépassé

Schéma ou Organigramme ?Chacun choisit

le «langage» qui lui convient !

Schéma ou Organigramme ?Chacun choisit

le «langage» qui lui convient !

Distinguer : le Squelette HTML en amont du CACHE du Fichier HTML calculé pour le CACHE et l’ECRAN

Distinguer : le Squelette HTML en amont du CACHE du Fichier HTML calculé pour le CACHE et l’ECRAN

Page 27: François Daniel Giezendanner, SEM (Service Ecoles et Medias) - DIP - Genève, 4-5 Théodore-de-Bèze, 1205 CH-Genève Tél: +41 22 / 388-33-14, francois-daniel.giezendanner@edu.ge.ch.

Passons à $delais=3600 (c’est en secondes) : Notre page web n’est donc recalculée que si, lorsqu’un visiteur la demande, sa version cachée date de plus d’une heure (soit 3600 s.). Sinon, SPIP lit simplement le contenu du fichier caché, et renvoie le résultat sans se connecter à la base de données (sauf pour y insérer un «hit» dans les statistiques).

• Pour développer en mode local : $delais=0

• Pour la consultation en mode serveur : $delais=24 x 3600 ou plus : $delais=72 x 3600 (soit 3 jours par exemple)

Gérer le cache Gérer le cache (5/5)(5/5)

Réglage du délai :

Page 28: François Daniel Giezendanner, SEM (Service Ecoles et Medias) - DIP - Genève, 4-5 Théodore-de-Bèze, 1205 CH-Genève Tél: +41 22 / 388-33-14, francois-daniel.giezendanner@edu.ge.ch.

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 29: François Daniel Giezendanner, SEM (Service Ecoles et Medias) - DIP - Genève, 4-5 Théodore-de-Bèze, 1205 CH-Genève Tél: +41 22 / 388-33-14, francois-daniel.giezendanner@edu.ge.ch.

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 30: François Daniel Giezendanner, SEM (Service Ecoles et Medias) - DIP - Genève, 4-5 Théodore-de-Bèze, 1205 CH-Genève Tél: +41 22 / 388-33-14, francois-daniel.giezendanner@edu.ge.ch.

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