SPIP - Développeur Web M3202 - Développement Web - S3

DUT 2 Métiers du Multimédia et de l’Internet M3202 - L. Capocchi ([email protected])

1 Sommaire

● Les principes de bases ● Installation ● Fonctionnement ● Le langage de SPIP

DUT MMI 2 - Développement web - M3202 - L. Capocchi ([email protected]) 2 Sommaire

● Les principes de bases ● Installation ● Fonctionnement ● Le langage de SPIP

DUT MMI 2 - Développement web - M3202 - L. Capocchi ([email protected]) 3 Les principes de bases (1)

● Condition d’utilisation de SPIP ○ SPIP est un logiciel libre distribué sous licence GNU/GPL3 qui permet: ■ La liberté d'installation et d'utilisation de SPIP pour quelque usage que ce soit. ■ La liberté d'étudier le fonctionnement de SPIP et de l'adapter à vos propre besoins en modifiant le code source (SPIP programmé en PHP) ■ La liberté de distribuer des copies tant que vous n'altérez ni ne supprimez la licence. ■ La liberté d'améliorer SPIP et de diffuser vos améliorations. DUT MMI 2 - Développement web - M3202 - L. Capocchi ([email protected]) 4 Les principes de bases (2)

● Condition d’utilisation de SPIP ○ Remarques ■ SPIP étant fourni et distribué gratuitement les auteurs ne donnent aucune garantie sur son utilisation. ■ SPIP peut être utilisé pour toute activité (personnelle, professionnelle ou commerciale) ○ Des sites sous SPIP ■ La plupart des sites sont répertoriés à l'adresse: http://www.spip.net/fr_article884.html ■ Si vous êtes Webmaster d'un site sous SPIP remplissez le formulaire de la page. DUT MMI 2 - Développement web - M3202 - L. Capocchi ([email protected]) 5 Les principes de bases (3)

● Les définitions qui suivent sont tirées de Google: ○ PHP (PHP: Hypertext Preprocessor) : langage de script HTML, exécuté côté serveur. Sa syntaxe est empruntée aux langages C, Java et Perl. Le but de ce langage est de permettre aux développeurs Web d'écrire des pages dynamiques. ○ MySQL : système de gestion de Bases de Données (SGBD) fonctionnant sous Linux et Windows. Il est très souvent utilisé avec PHP afin de créer un site entièrement dynamique. ○ HTML : langage universel utilisé pour communiquer sur le Web. Votre information sera ainsi transportée sur Internet, pour DUT MMI 2 - Développementaboutir surweb - M3202navigateur. - L. Capocchi ([email protected]) 6 Les principes de bases (4)

● Les définitions qui suivent sont tirées de Google: ○ WAMP: WAMP installe et configure automatiquement un environnement de travail complet permettant de mettre en oeuvre toute la puissance et la souplesse qu'offrent le langage dynamique PHP et son support efficace des bases de données. ○ WAMP regroupe : ■ un serveur Apache, ■ une base de donnée MySQL, ■ le langage PHP ainsi que des outils facilitant le développement de

DUT MMI 2 - Développementvos - M3202 ou de - L. Capocchivos applications. ([email protected]) 7 ○ Les principes de bases (4)

● Les hébergeurs acceptant SPIP : ○ Une liste d'hébergeurs est à la disposition des webmasters: http://contrib.spip.net/Hebergeurs ○ Trois formules d'hébergement ■ Gratuite : grand risque de problème de support technique et surtout beaucoup de pub. ■ Payante : bon support, pas de pub mais attention à comparer les offres car les prix sont très variables. ■ Alternative / Associative : très intéressante et à bas prix (voir gratuit) mais avec des conditions spécifiques.

DUT MMI 2 - Développement web - M3202 - L. Capocchi ([email protected]) 8 Les principes de bases (5)

● Les hébergeurs acceptant SPIP : ○ Configuration minimum requises : ■ Un accès FTP pour installer les fichiers. ■ Le support de PHP4 ou plus. ■ Un accès à une base de données MySQL. ○ Attention à demander si la base de données est active ! ○ Dans le cas de WAMP, une fois le logiciel installé, les bases de données sont activées (vous pouvez en mettre plusieurs)

DUT MMI 2 - Développement web - M3202 - L. Capocchi ([email protected]) 9 Les principes de bases (6)

● Les hébergeurs acceptant SPIP : ○ Données de connexion ■ L'hébergeur doit vous fournir un certain nombre de données afin d'accéder à cette BD : ● L'adresse de la base MySQL (exe: “sql1.univ-corse.fr”). ● Le nom de la BD utilisée. ● Votre login MySQL: souvent le même que votre compte Web. ● Votre password MySQL: souvent le même que votre compte Web. ■ Exemple: si vous disposez d'un compte nommé "monsite" chez Free (adresse http://monsite.free.fr), ● L'adresse de la base MySQL est .free.fr et son nom est monsite, ● Votre login est monsite et votre mot de passe est celui de votre DUT MMI 2 - Développement web - M3202 - L. Capocchi ([email protected]) compte 10 Les principes de bases (7) ● L'intérêt de SPIP est de… ○ Gérer un site Web de type magazine, c'est à dire composé principalement d'articles et de brèves insérés dans une arborescence de rubriques. ○ Séparer entre différentes personnes, trois types de tâches: ■ La composition graphique, ■ La contribution rédactionnelle (via proposition d'articles, brèves), ■ La gestion éditoriale du site (organisation des rubriques, validation des articles proposés...) ○ Dispenser le Webmaster de tous les participants à la vie du site d'un certain nombre d'aspects fastidieux de la publication sur le DUT MMI 2 - DéveloppementWeb (connaissances web - M3202 - L. Capocchi techniques...). ([email protected]) 11 Les principes de bases (7) ● Les inconvénients ○ La souplesse de SPIP implique un apprentissage de la part du Webmaster pour modifier la présentation par défaut. ○ Le Webmaster doit apprendre les quelques rudiments d'un pseudo-HTML lui permettant ensuite de faire à peu près tout ce qu'il veut ! ○ A partir de ces outils, le Webmaster du site peut fabriquer sa propre interface graphique.

DUT MMI 2 - Développement web - M3202 - L. Capocchi ([email protected]) 12 Sommaire

● Les principes de bases ● Installation ● Fonctionnement ● Le langage de SPIP

DUT MMI 2 - Développement web - M3202 - L. Capocchi ([email protected]) 13 Installation (1) ● Télécharger la dernière version de SPIP http://www.spip.net/fr_download ● Lancer WAMP ● Ouvrez un navigateur avec l’adresse suivante : http://localhost/spip/ecrire

DUT MMI 2 - Développement web - M3202 - L. Capocchi ([email protected]) 14 Installation (2) ● Choix de la langue

DUT MMI 2 - Développement web - M3202 - L. Capocchi ([email protected]) 15 Installation (3) ● Connexion à MySQM avec le login root et le mot de passe vide

DUT MMI 2 - Développement web - M3202 - L. Capocchi ([email protected]) 16 Installation (4) ● Choix de la base de données

DUT MMI 2 - Développement web - M3202 - L. Capocchi ([email protected]) 17 Installation (5) ● Informations personnelles

DUT MMI 2 - Développement web - M3202 - L. Capocchi ([email protected]) 18 Sommaire

● Les principes de bases ● Installation ● Fonctionnement ● Le langage de SPIP

DUT MMI 2 - Développement web - M3202 - L. Capocchi ([email protected]) 19 Fonctionnement (1) ● Tout le contenu d’un site géré sous SPIP est stocké dans une base de données MySQL. ● Pour présenter ces informations aux visiteurs du site: ● Il faut connaître la programmation PHP, MySQL et écrire des « routines » relativement complexes. ● L'intégration de telles routines dans une mise en page HTML élaborée est assez pénible. ● Il faut prendre en compte les problèmes de performances.

DUT MMI 2 - Développement web - M3202 - L. Capocchi ([email protected]) 20 Fonctionnement (2) ● SPIP propose une solution : ○ La mise en page du site est effectuée au moyen de page HTML nommées squelettes ■ Les squelettes contiennent des instructions simplifiées permettant d'indiquer où et comment se placent les informations tirées de la BD dans la page. ● Un système de cache qui permet de stocker chaque page et ainsi d'éviter de provoquer des appels à la BD ○ La charge sur le serveur est réduite et la vitesse accélérée. ○ Un site SPIP reste consultable même lorsque la base MySQL est inaccessible DUT MMI 2 - Développement web - M3202 - L. Capocchi ([email protected]) 21 Fonctionnement (3) ● Fonctionnement du cache ○ L'appel d'une page se fait par l'intermédiaire du fichier PHP « spip. » à la racine du site. ○ Exemple: l'URL correspondante est: http://www.monsite.net/spip.php?rubrique1 pour une rubrique ○ http://www.monsite.net/spip.php?article1 pour un article ● Durée du cache ○ La durée pendant laquelle une page du site va rester dans le cache est déterminée par la balise : #CACHE{86400} ○ mise en début de chaque page HTML+PHP DUT MMI 2 - Développement web - M3202 - L. Capocchi ([email protected]) 22 Fonctionnement (4) ● Appel d'une page du site ○ Arrivée sur le site ■ Pour arriver sur une page Web du site, un internaute doit: ● en connaître l'adresse par coeur ou, ● arriver via un lien. ■ Dans le deuxième cas, le lien de départ était peut-être placé: ● sur la page d'accueil du site (sommaire), ● sur la page résultat d'un moteur de recherche, ● sur la page d'un site d'un amis qui fait un lien vers cette page.

DUT MMI 2 - Développement web - M3202 - L. Capocchi ([email protected]) 23 Fonctionnement (4) ● Appel d'une page du site ○ La page appelée n'est pas de la forme page. comme pour un site statique. ex: http://www.monsite.be/spip.php?article15 SPIP.PHP Page ?article5 HTML + SPIP

Cache Base de données PHP MySQL DUT MMI 2 - Développement web - M3202 - L. Capocchi ([email protected]) 24 Fonctionnement (5) ● Appel d'une page du site ○ L'adresse de la page Web recherchée est complété d'une information importante: ?artricle15 ○ Cette information va conduire sur le serveur d'hébergement aux squelettes (HTML+PHP). ○ Ici c'est la version « article » de cette page qui est sollicité. ○ Dans le vocabulaire ce type de page est nommée squelette d'un article.

DUT MMI 2 - Développement web - M3202 - L. Capocchi ([email protected]) 25 Fonctionnement (6) ● Les feuilles de style ○ Définition ■ Les fichiers « .css » sont destinés à contrôler la présentation visuelle des pages Web. ■ Ils sont mis dans le dossier “squelletes-dist” pour les squelettes de la distribution et dans le dossier “squelettes” pour votre propre squelette. ○ Les fichiers « .css » SPIP: ■ habillage.css: toutes les présentations, l'habillage des pages: ● Mise en page des textes ● Habillage des menus et de la navigation ● Couleurs spécifiques selon le type de menu DUT MMI 2 - Développement● webStyle - M3202 pour - L.les Capocchi contenus ([email protected]) (colonne principale)... 26 Fonctionnement (7) ● Les feuilles de style ○ Les fichiers « .css » SPIP: ■ habillage.css (suite): ● Éclairecissement progressif en fonction de la profondeur ● Habillage des forums ● Boite d'un forum ● Boite de titre d'un forum ● Habillage des pétitions ● Formulaires. ○ impressions.css est responsable de la mise en page de l'impression des documents. ○ spip_style.css règle les styles utilisés pour les lignes, barres,

DUT MMI 2 - Développementtableaux. web - M3202 - L. Capocchi ([email protected]) 27 Fonctionnement (8) ● Les feuilles de style ○ Les fichiers « .css » SPIP: ■ Ces fichiers sont dans le répertoire “prive”: ● spip_style.css : regroupe les définitions des styles associés au code générée par SPIP. ● spip_admin.css: contrôle l'apparence des boutons d'administration. ■ Comment creer des feuilles de style personnalisées ● Ne travaillez jamais directement dans les fichiers css fournis par SPIP ● Créez un fichier mes_styles.css dans le répertoire “squelettes". ■ Appelez cette feuille dans l'entête de votre squelette : ■ La balise #CHEMIN sera remplacée par le chemin relatif de votre DUT MMI 2 - Développementrépertoire web “squelettes”. - M3202 - L. Capocchi ([email protected]) 28 Fonctionnement (9) ● Les feuilles de style ○ Les fichiers « .css » SPIP: ■ Quelques exemples: ■ Changement de l'apparence de tous les intertitres SPIP: ● Dans le fichier mes_styles.css ajoutez la ligne : h3.spip {color: red; font-size:18px;} ■ h3.spip: la règle ne s'applique qu'aux titre de niveau 3 dotés d'un attribut class égal à spip. ■ Accolades: listes des propriétés graphiques associées au style défini. ■ Si vous définissez des nouvelles classes dans le css attention de les utiliser dans les balises des squelettes.

DUT MMI 2 - Développement web - M3202 - L. Capocchi ([email protected]) 29 Fonctionnement (10) ● Les feuilles de style ○ Les fichiers « .css » SPIP: ■ Les paragraphes

Voici le texte de mon paragraphe

● Pour modifier le style des paragraphes, modifiez la définition de p.spip ■ Gras et italique ● Du texte en {italique}, du texte en {{gras}} ● Apparence contrôlée par i.spip et strong.spip ■ Les intertitres ● {{{un intertitre}}} ● h3.spip ■ Le trait de séparation horizontal ---- ● Apparence contrôlée par hr.spip DUT MMI 2 - Développement web - M3202 - L. Capocchi ([email protected]) 30 Fonctionnement (11) ● Les feuilles de style ○ Les notes de bas de page ■ Le texte [[ceci est une note de bas de page.]]. ■ Apparence contrôlée par: a.spip_note ○ Les liens hypertextes ■ a.spip_in: concerne les liens à l'intérieur du site. ■ a.spip_out: concerne les liens vers l'extérieur du site ■ a.spip_url: traite les adresses URL transformée en lien ■ a.spip_glossaire: concerne les liens vers le glossaire externe (encyclopédie Wikipédia) ○ Les styles sont définis dans des fichiers séparés de l'architecture de SPIP -> Pas besoin de vider le cache si vous modifiez une feuille de style.Il suffit de DUT MMI 2recharger - Développement la pageweb - M3202 du navigateur. - L. Capocchi ([email protected]) 31 Fonctionnement (12) ● Téléchargement des squelettes ○ Téléchargement ■ Grâce à tous ces avantages, certains webmaster mettent leur squelette à la disposition de tous: http://www.spip-contrib.net/-Squelettes- ○ Mise en place : Décompressez le dossier et mettez les squelettes dans le dossier « squelettes » que vous avez créer à la racine du site.

DUT MMI 2 - Développement web - M3202 - L. Capocchi ([email protected]) 32 Fonctionnement (13) ● Processus de recherche de squelettes ○ un fichier squelette pour l'article, un pour la rubrique… ○ Un processus de recherche permet de créer un fichier article pour une rubrique bien définie. ○ La recherche se fait dans l'ordre suivant ■ « article=3.html » est l'article n°3 qui a sa mise en page. ■ « article-4.html » concerne tous les articles qui dépendent de la rubrique n°4 qui ont une mise en page particulière. ■ « article.html » est la page générale à tous ■ les articles qui va être recherchée d'abord dans le dossier « squelettes/ » puis dans le dossier « squelettes-dist/ »

DUT ○MMI 2 - Développement web - M3202 - L. Capocchi ([email protected]) 33 ● Fonctionnement (14) ● Les plugins ○ Principes ■ Télécharger les plugins que l'on souhaite utiliser sur son site et les mettre dans le répertoire « plugins » ■ Fonctionnement générales des plugins: http://contrib.spip.net/Plugins-112 ○ Téléchargement http://trac.rezo.net/trac/spip-zone/browser/_plugins_/ ● Utilisation ○ Accès par l'interface privé (en n'oubliant pas de tout mettre dans l'interface complète) DUT ○MMI 2Icône - Développement administration web - M3202 - L.et Capocchi icône ([email protected]) plugins. 34 Sommaire

● Les principes de bases ● Installation ● Fonctionnement ● Le langage de SPIP

DUT MMI 2 - Développement web - M3202 - L. Capocchi ([email protected]) 35 Le langage SPIP (1) ● Objectif ○ Créer vos propres boucles. ● Préambule ○ La création des boucles est primordiale pour réaliser un squelette. ○ Elle permettent de récupérer les données à l'intérieur de la BD et de les mettre en ligne. ○ Elle sera traduite par une requête SQL optimisée permettant d’extraire le contenu demandé.

DUT MMI 2 - Développement web - M3202 - L. Capocchi ([email protected]) 36 Le langage SPIP (2) ● Afficher un article ○ Objectif ■ On veut écrire de façon générique la façon dont sera affiché un article dans le site public (habillage graphique, éléments affichés, navigation....). On veut: ● Le décrire en HTML (comme une page normale) ● Que la description s'adapte automatiquement à tous les articles de la BD. ○ Code HTML DUT MMI 2 ■- DéveloppementOn aimerait web - leM3202 code - L. Capocchisuivant: ([email protected]) 37 Le langage SPIP (3) ● Afficher un article ○ Code HTML ■ Il faut d'abord créer le fichier article.html dans un nouveau répertoire que vous créez à la racine et que vous appelez “squelettes/”. ■ Ce fichier décrit la mise en page de tous les articles. ○ Récupérer les champs ■ Il faut indiquer à SPIP quels éléments il doit afficher dans la page.

DUT MMI 2 - Développement web - M3202 - L. Capocchi ([email protected]) 38 Le langage SPIP (4) ● Afficher un article ○ Récupérer les champs ■ Les balises de type « #TEXTE » indiquent qu'il faut extraire un contenu de la BD et l'insérer dans la page HTML. ○ Pour quel article ? ■ Pour indiquer quel(s) article(s) chercher dans la BD il faut UNE BOUCLE ■ Cette boucle est constituée d'un tag ouvrant et fermant ... ■ Deux informations DUT MMI 2 - Développement● Le nom web -de M3202 table - L. (ARTICLES) Capocchi ([email protected]) 39 ● Le critère de sélection (id_article) Le langage SPIP (5) ● Afficher un article ○ Vérification en ligne ■ Une fois la boucle implémentée on peut afficher un article dans le site public (exe: choisissez un article publié dans l'espace privé et cliquez sur “voir en ligne”) ○ Explication du résultat: ■ L'URL appelée est de la forme: spip.php?article1 ■ « article1 » fait coincider le critère « id_article » de la “BOUCLE_principale” avec l'article portant le n°1. ■ #TITRE et #TEXTE sont remplacés par le titre et le texte de cet article. ○ DUT MMI 2 - Développement web - M3202 - L. Capocchi ([email protected]) 40 Le langage SPIP (6) ● Afficher un article ○ Important ■ La boucle ARTICLES ne sélectionne que les articles publiés. ■ Le fichier « article.html » ainsi créé est le squelette de mise en page correspondant aux articles. ■ Dans le manuel: la syntaxe générale des boucles http://www.spip.net/fr_article898.html ■ Syntaxe et listing de toutes les boucles http://www.spip.net

DUT MMI 2 - Développement web - M3202 - L. Capocchi ([email protected]) 41 Le langage SPIP (7) ● Les champs d'un article ○ Toutes les balises d'un article sont récupérables dans un squelette: ■ #SURTITRE ■ #TITRE ■ #SOUSTITRE ■ #CHAPO ■ #TEXTE ■ #PS (post-scriptum) ■ #NOTES (notes en bas de page)

DUT MMI 2 - Développement web - M3202 - L. Capocchi ([email protected]) 42 Le langage SPIP (8) ● Les champs d'un article ○ Les balises ■ Comment éviter d'afficher du texte si un champ est vide … [

Post-scriptum : (#PS)
] … ■ Le champs #PS est mis entre parenthèse pour distinguer du texte autour. ■ Le texte « conditionné » à l'existence du champ #PS est mis entre crochet : ● Il n'est affiché que si le champs n'est pas vide.

DUT MMI 2 - Développement web - M3202 - L. Capocchi ([email protected]) 43 Le langage SPIP (9) ● Un sommaire, les dix derniers articles publiés ○ Accueil du site public ■ Pour modifier l'apparence de la page d'accueil du site public, il faut créer le fichier sommaire.html ○ Les articles ■ On veut afficher les derniers articles publiés, sur le modèle

DUT MMI 2 - Développement web - M3202 - L. Capocchi ([email protected]) 44 Le langage SPIP (10) ● Un sommaire, les dix derniers articles publiés ○ Accueil du site public ■ 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.

DUT MMI 2 - Développement web - M3202 - L. Capocchi ([email protected]) 45 Le langage SPIP (11) ● Un sommaire, les dix derniers articles publiés ○ Accueil du site public ■ {par date} signifie qu'il faut 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 ○ Les dix derniers ■ Il faut ajouter un critère supplémentaire disant au système de s'arrêter après les dix premières :

■ Dans {0,10}, le deuxième nombre est le nombre de résultats à afficher, le premier nombre est le numéro du premier résultat à afficher.

DUT MMI 2 - Développement web - M3202 - L. Capocchi ([email protected]) 46 Le langage SPIP (12) ● Auteur d'un article, les boucles imbriquées ○ Objectif ■ On veut afficher les auteurs de chaque article. ■ On utilise une boucle de type “AUTEURS” à l'intérieur de la boucle “ARTICLES”. ○ Tous les auteurs ■ Boucle sans critère -> affiche tous les auteurs du site

DUT MMI 2 - Développement web - M3202 - L. Capocchi ([email protected]) 47 Le langage SPIP (13) ● Auteur d'un article, les boucles imbriquées ○ Tous les auteurs ■ Pour n'afficher que les auteurs de l'article, on ajoute un critère {id_article} à la boucle AUTEURS, pour indiquer que l'on affiche bien les auteurs de l'article en question.

DUT MMI 2 - Développement web - M3202 - L. Capocchi ([email protected]) 48 Le langage SPIP (14) ● Auteur d'un article, les boucles imbriquées ○ Affinement ■ Ne pas afficher le tiret en trop à la fin de la liste des auteurs, et ne rien afficher si l'article est anonyme. ■ Ce qui est entre et la /BOUCLE_auteurs s'affiche que si la boucle n'est pas vide ■ Ce qui est entre /BOUCLE_auteurs et la s'affiche que si la boucle est vide ■ Ceci s'applique à tous DUT MMI 2 - Développement web - M3202 - L. Capocchi ([email protected]) types de boucles ! 49 Le langage SPIP (15) ● Un sommaire par rubrique: les boucles récursives ○ Objectif: On veut maintenant afficher les articles par rubrique. ○ Article dans rubriques ■ Utilisation d'une boucle récursive avec une boucle ARTICLES imbriquée

DUT MMI 2 - Développement web - M3202 - L. Capocchi ([email protected]) 50 Le langage SPIP (16) ● Un sommaire par rubrique: les boucles récursives ○ Rubriques imbriquées ■ Les rubriques s'affichent à plat, nous les voulons arborescentes. ■ Il faut se limiter aux rubriques de premier niveau (“à la racine” du site), en ajoutant le critère approprié. ■ Une deuxième boucle RUBRIQUES permet d'afficher les sous-rubriques de manière imbriquée.

DUT MMI 2 - Développement web - M3202 - L. Capocchi ([email protected]) 51 Le langage SPIP (17) ● Un sommaire par rubrique: les boucles récursives ○ Rubriques imbriquées ■ Problème: on ne sait pas à l'avance combien de niveaux il faut prévoir dans le squelette.... ■ Solution: utilisation d'un boucle récursive.

DUT MMI 2 - Développement web - M3202 - L. Capocchi ([email protected]) 52 Le langage SPIP (18) ● Un sommaire par rubrique: les boucles récursives ○ Rubriques imbriquées ■ Les boucles récursives sont utiles pour les structures arborescentes illimitées: ● Les rubriques (boucles RUBRIQUES) ● Les forums (boucles FORUMS) ■ Dans le manuel: ● La boucle RUBRIQUES : http://www.spip.net/fr_article904.html ● La boucle récursives : http://www.spip.net/fr_article914.html

DUT MMI 2 - Développement web - M3202 - L. Capocchi ([email protected]) 53 Le langage SPIP (19) ● Afficher les brèves ○ Objectif ■ Sélectionner automatiquement les brèves publiées grâce à la boucle BREVES. ○ Dix dernières ■ Afficher les 10 dernières brèves publiées sur tout le site:

○ Dans une rubrique ■ Les dix dernières brèves publiées dans une rubrique particulière

DUT MMI 2 - Développement web - M3202 - L. Capocchi ([email protected]) 54 Le langage SPIP (20) ● Afficher les brèves ○ Le squelette d'une brève peut être modifié en créant le fichier « breves.html »

○ Dans le manuel: la boucle BREVES http://www.spip.net/fr_article906.html DUT MMI 2 - Développement web - M3202 - L. Capocchi ([email protected]) 55 Le langage SPIP (21) ● Critères communs à toutes les boucles ○ Classer les résultats ■ {par critère(s)_de_classement} indique l'ordre de présentation ● {par date}, {par date_redac}, {par titre}, {inverse} ■ {par num critère} établit le classement selon les numéros ○ Exemples ■ Affiche les articles d'une rubrique classés selon l'ordre chrono inversé ■ Affiche selon l'ordre alphabétique de leur titre ■ Affiche selon l'ordre du numéro de leur titre DUT MMI 2 - Développement web - M3202 - L. Capocchi ([email protected]) 56 Le langage SPIP (22) ● Critères communs à toutes les boucles ○ Comparaisons, égalités ■ {critère < valeur} comparaison avec une valeur fixée ■ Exemple ● Affiche l'article dont le numéro est 5 ● Affiche les articles de secteur 2 ●

DUT MMI 2 - Développement web - M3202 - L. Capocchi ([email protected]) 57 sert à trouver les articles qui ont le même titre que l'article 5. Le langage SPIP (23) ● Critères communs à toutes les boucles ○ Comparaisons, égalités ■ Expression régulières ● sélectionne les articles dont le titre commence par « a » ou « A » ■ Négation ● sélectionne les articles qui appartiennent pas au secteur 2 ● sélectionne les articles dont les titre ne commence pas par « a » ou « A »

DUT MMI 2 - Développement web - M3202 - L. Capocchi ([email protected]) 58 Le langage SPIP (24) ● Critères communs à toutes les boucles ○ Affichage d'une partie des résultats ■ {branche} limite les résultats ■ Exemple ● retournera tous les articles de la rubrique actuelle et de ces sous-rubriques. ● retournera tous les articles qui ne sont pas dans la rubrique actuelle ou ses sous-rubriques. ○ {doublons} ou {unique} permettent d'interdire l'affichage des résultats déjà affichés dans d'autres boucles utilisant le critère.

DUT ○MMI 2{exclus} - Développement permet web - M3202 d'exclure - L. Capocchi du ([email protected]) résultat l'élément dans lequel on se trouve59 déjà. Le langage SPIP (25) ● Critères communs à toutes les boucles ○ Affichage d'une partie des résultats ■ {xxxx IN a,b,c,d} limite l'affichage aux résultats ayant le critère xxxx égal à a,b,c ou d. ■ {a,b} permet de limiter le nombre de résultats. ■ {debut_xxxx, b} variante de la précédente ■ {a/b} permet d'afficher une partie a (proportionnellement) des résultats en fonction d'un nombre de “tranches” b ● Exemple: {1/3} affiche le premier tiers des résultats (utiles pour présenter des listes sur plusieurs colonnes) ○ Affichage ente les résultats

DUT MMI 2 ■- Développement{“inter”} permetweb - M3202 d'indiquer - L. Capocchi un ([email protected]) code HTML (ici, “inter”) inséré entre les 60 résultats de la boucle. Le langage SPIP (26) ● Résumé

○ Les balises: se placent à l'intérieur d'une boucle toujours précéder du signe #. Chaque type de boucle a ses balises. ○ Les critères: indiquent à la fois selon quels critères on veut sélectionner les éléments de la BD de la façon dont on va classer ou sélectionner les éléments. ○ Aide en ligne sur les boucles: http://www.spip-contrib.net/Mes-premieres-boucles-special DUT MMI 2 - Développement web - M3202 - L. Capocchi ([email protected]) 61 Le langage SPIP (27) ● Balises définies à la configuration ○ #NOM_SITE_SPIP affiche le nom du site. ○ #URL_SITE_SPIP affiche l'adresse du site. ○ #DESCRIPTIF_SITE_SPIP affiche le descriptif du site, ○ #EMAIL_WEBMASTER affiche l'adresse du webmestre. ○ #LOGO_SITE_SPIP affiche le logo du site. ○ #CHARSET affiche le jeu de caractères utilisé par le site. ○ #LANG utilisée en dehors des boucles ARTICLES, RUBRIQUES, BREVES et AUTEURS, cette balise affiche la langue principale du site. ○ #LANG_DIR, #LANG_LEFT, #LANG_RIGHT : définissent le sens d'écriture de la langue du contexte actuel ○ #MENU_LANG (et #MENU_LANG_ECRIRE) fabriquent et affichent un menu de langues DUT MMI 2 - Développement web - M3202 - L. Capocchi ([email protected]) 62 Le langage SPIP (28)

● Balises de mise en page ○ #CHEMIN permet d'obtenir le chemin du dossier dans lequel est installé le squelette utilisé ○ Pour inclure une feuille de style du répertoire squelette