Navigation


Accueil

Thèmes :



À propos

Contact

Travaux Personnels Encadrés

Documentation: Templates/modèles

Le design du site de TPE se fera par le biais de modèles, aussi appelés "templates". Ceux-ci permettent une réutilisation du design, pour un bon nombre de TPE différents. Ci-dessous vous voyez la chaîne de production que suit la création des pages:

Le format des Templates utilisés est celui de Template Toolkit, un module Perl. Vous pourrez trouver plus d'information sur leur site.

Chaine de production des fichiers HTML

Le fonctionnement général des modèles est simple: ils définissent un design (HTML), mais avec certaines balises qui seront remplacées par des valeurs au moment de la génération (sujet, auteurs, etc...). Nous verrons ici chaque modèle nécessaire, les variables qu'il reçoit, et des exemples de son utilisation.

Dossiers où figurent les fichiers

Par rapport au dossier de base, les templates doivent figurer dans le dossier templates/, et les fichiers HTML produits figureront dans le dossier html/.

Accès aux variables

Pour chaque template, un certain nombre de variables sont accessibles. Celles-ci sont la plupart du temps de 3 types:

simple
La variable est accessible directement, en donnant juste son nom: [% variable %]
liste
La variable contient une liste de variables du même type. Il faut alors utiliser une construction de type [% FOREACH %] pour accéder à chacune d'entre elles: 
[% FOREACH var = liste %]
<a href="[% var.url %]">[% var.nom %]</a><br>
[% END %]
contient sous-variables
La variable est en fait un groupe de sous-variables, qui sont accessibles en utilisant la notation [% var.sous_var %] (souvent aussi le cas pour les éléments des listes).

Constructions IF/ELSE

Template Toolkit, que nous utilisons, contient, en plus des accès de variables, bon nombre d'autres fonctions, dont le contrôle conditionnel. Comme pour les langages de programmation, ceci se fait par suite de IF/UNLESS, ELSIF, ELSE. Voici quelques exemples qui vous aideront à comprendre ce qui suit:

Exemple 1: Inclusion d'un paragraphe de carnets de bord uniquement si ceux-ci sont disponibles.

[% IF carnets %]
<p><b>Carnets de bord:</b><br>
[% FOREACH carnet = carnets %]
<a href="[% carnet.url %]">[% carnet.nom %]</a><br>
[% END %]
</p>
[% END %]

Exemple 2: Inclusion d'un paragraphe de formats disponibles s'ils existent, ou sinon inclusion d'un autre paragraphe.

[% IF formats %]
<p><b>Dossier:</b><br>
[% FOREACH format = formats %]
[% format.type %]: <a href="[% format.url %]">[% format.url %]</a><br>
[% END %]
</p>
[% END %]

Inclusion d'autres fichiers

Afin d'inclure des fichiers ré-utilisés partout de la même façon dans vos templates, vous pourrez utiliser la construction [% INCLUDE %]. INCLUDE prend comme argument un nom de fichier, par exemple [% INCLUDE menu.thtml %].

Exemple 1: Inclusion d'un menu sanas arguments.

Disons qu'avant d'utiliser [% INCLUDE %], toutes vos pages sont de la forme:

<table>
<tr>
<td>
...
Menu:
Lien 1
Lien 2
Lien 3
(tout ça avec des balises <a> etc.)
</td>
<td>
.... Contenu!
</td>
</tr>
</table>

Disons que vous voulez réutiliser le menu dans toutes les pages. Vous séparez alors celui-ci dans un autre fichier, menu.thtml, comme ceci: 

---- menu.thtml
...
Menu:
Lien 1
Lien 2
Lien 3
(bon tout ca avec des balises <a> etc)

Puis apres, dans toutes tes pages, vous placez une instruction [% INCLUDE %] :

--- page.thtml
<table>
<tr>
<td>
[% INCLUDE menu.thtml %]
</td>
<td>
.... Contenu!
</td>
</tr>
</table>

En utilisant cette méthode, menu.thtml pourra être modifié une seule fois pour mettre à jour le menu de toutes les pages.

Exemple 2: Inclure un début de document avec des variables.

Une autre façon d'utiliser [% INCLUDE %] et peut-être encore meilleure, dépendant de votre cas, est de l'utiliser pour inclure directement tous les débuts de de documents complets et les débuts de page au lieu de juste contenir le menu.

---- page.thtml
[% INCLUDE en-tete.thtml
	   titre = 'Une page'
%]

<p>Un peu de contenu...</p>

[% INCLUDE pied.thtml %]

---- en-tete.thtml
<html>
<head>
	<title>[% titre %]</title>
</head>
<body>
<h1>[% titre %]</h1>

Menu....


---- pied.thtml
</body>
</html>

Ainsi, vous voyez que vous pouvez facilement automatiser les choses qui reviendront souvent dans vos pages.

themes.thtml

themes.thtml a pour fonction de faire la liste de tous les thèmes qui existent pour ces TPE, et de créer des liens vers des pages individuelles pour celles-ci.

Variables disponibles

themes
Liste contenant les thèmes. Chaque theme a les sous-variables suivantes:
id
L'identification unique de ce thème, utilisé pour les noms de fichier.
nom
Le nom complet du thème

Exemple

Voir themes.thtml pour l'exemple complet, et themes.html pour le résultat.

<p>
[% FOREACH theme = themes %]
<a href="[% theme.id %].html">[% theme.nom %]</a><br>
[% END %]
</p>

theme.thtml

theme.thtml est utilisé une fois par thème, et produit alors pour ce thème une page contenant la liste de tous les TPE disponibles pour ce thème.

Variables disponibles

theme
Contient 2 sous-variables:
id
L'ID de ce thème.
nom
Le nom du thème dans lequel nous nous trouvons.
tpes
Liste contenant les TPE. Chaque tpe a les sous-variables suivantes:
id
L'identification unique de ce TPE, utilisé pour les noms de fichier.
sujet
Le sujet du TPE.
themes
Liste content tous les thèmes. Voir themes.thtml pour plus d'informations.

Exemple

Voir theme.thtml pour l'exemple complet, et images.html pour un résultat (thème Images).

<head>
	<title>[% theme.nom %]</title>
</head>

<body>

<h1>[% theme.nom %]</h1>

<p>Voici une liste des TPE ayant choisi le thème [% theme.nom %].</p>

<p>
[% FOREACH tpe = tpes %]
<a href="[% tpe.id %].html">[% tpe.sujet %]</a><br>
[% END %]
</p>

tpe.thtml

tpe.thtml est utilisé pour la génération de chaque page de TPE, donnant toute l'information nécessaire sur celui-ci.

Variables disponibles

id
L'ID de ce TPE.
sujet
Le sujet choisi pour ce TPE.
theme
Contient 2 sous-variables:
id
L'ID unique du thème choisi, utilisé pour noms de fichier.
nom
Le nom du thème.
themes
Liste content tous les thèmes. Voir themes.thtml pour plus d'informations.
auteurs
Liste contenant de l'information sur chaque auteur. Chaque élément de la liste contient les sous-éléments suivants:
nom
Le nom de famille de l'auteur
prenom
Le prénom de l'auteur
email
Si elle existe, son adresse e-mail.
classe
Contient les sous-éléments suivants:
annee
T, 1, 2, etc.. L'année dans laquelle il se trouve.
filiere
S, ES, L
numero
L'identifiation de sa classe (1,2,3...)
html
Pour faciliter la vie de celui écrivant les templates, une version directement en HTML existe. Elle a la structure annee<sup>suffixe (ale, ère, etc..)</sup> filiere<sub>numero</sub>. Par exemple: 1ère S3.
site
S'il existe, l'URL du site consacré à ce TPE.
problematique
Si elle existe, la problématique du TPE, avec les retours à la ligne. Vous pouvez donc faire passer cette problématique par le filtre html_break pour mettre des balises <br>: [% problematique | html_break %].
resume
Le résumé, assez court, du TPE.
formats
Une liste des formats disponibles (ne le sont pas toujours). Chaque élément de la liste contient les sous-variables suivantes:
type
Le type de support: DOC, PDF, HTML, RTF.
url
L'URL du document
carnets
Si ils sont disponibles, la liste des carnets de bord. Chaque élément de la liste contient les sous-variables suivantes:
url
L'URL du carnet de bord.
nom
Le nom de l'élève à qui appartient le carnet de bord.
fiches
Si elles sont disponibles, la liste des fiches de synthèse. Chaque élément de la liste contient les sous-variables suivantes:
url
L'URL de la fiche de synthèse.
nom
Le nom de l'élève à qui appartient la fiche de synthèse.

Exemple

Voir tpe.thtml pour l'exemple complet, et oeil-couleur.html pour un résultat.

<head>
	<title>[% sujet %]</title>
	<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
</head>

<body>

<p>Thème: <a href="[% theme.id %].html"><i>[% theme.nom %]</i></a></p>

<h1>[% sujet %]</h1>

<p>Auteurs:</p>
<ul>
[% FOREACH auteur = auteurs %]
<li>

[% IF auteur.email %]
<a href="mailto:[% auteur.email %]">
[% END %]

[% auteur.prenom %] [% auteur.nom %]

[% IF auteur.email %]
</a>
[% END %]

, [% auteur.classe.html %]

</li>
[% END %]
</ul>

[% IF problematique %]
<p>Problématique:<br>
[% problematique | html_break %]
</p>
[% END %]

<p>Résumé:<br>
[% resume %]
</p>

<p>Dossier:
[% IF site %]
(voir aussi le <a href="[% site %]">site de ce TPE</a>)
[% END %]
</p>

<ul>
[% FOREACH format = formats %]
<li><a href="[% format.url %]">[% format.type %]</a></li>
[% END %]
</ul>

[% IF carnets %]
<p>Carnets de bord:</p>

<ul>
[% FOREACH carnet = carnets %]
<li><a href="[% carnet.url %]">[% carnet.nom %]</a></li>
[% END %]
</ul>

[% END %]

[% IF fiches %]
<p>Fiches de synthèse:</p>

<ul>
[% FOREACH fiche = fiches %]
<li><a href="[% fiche.url %]">[% fiche.nom %]</a></li>
[% END %]
</ul>

[% END %]