Aller au contenu

Chapitre 1: Pages web et interactions⚓︎

image

image

1. Le cas le plus simple : la même page pour tout le monde⚓︎

Nous allons tout d'abord considérer le cas où le serveur renvoie une page unique, identique pour tous les utilisateurs. De plus, l'utilisateur ne pourra pas agir sur sa page : il n'y a aucune interactivité. On parle de page statique.

Exemple de page statique côté serveur et côté utilisateur :

  • cette merveille de page web.
  • plus complète, mais tout aussi statique : cette page Wikipedia consacrée à Leslie Lamport.

1.1 html pur⚓︎

Lorsque le client demande au serveur le contenu d'une page web, celui-ci lui renvoie, dans le cas le plus simple, une simple page html.
html est un langage dit « à balises ». Ce n'est pas à proprement parler un langage de programmation, mais plutôt un langage de description de contenu. Il a été inventé en 1992 par Tim Berners-Lee. La version actuellement utilisée est le html5.

Exemple de page web minimale

HTML
<!DOCTYPE html>
<html lang='fr'>
  <head>
    <meta charset="utf-8">
    <title>Un titre très original</title>
  </head>

  <body>
    <p>Ceci est le texte introductif de ma page.</p>
    <h1>  Ceci est un titre de niveau 1 </h1>
    Mais sans rien d'intéressant.
    <h2>  Ceci est un titre de niveau 2 </h2>
    <ul>
      <li> le début d'une liste indentée </li>
      <li> la suite ... </li>
    </ul>  
    <p>
      Pour apprendre le fonctionnement des balises, voir <a href="https://developer.mozilla.org/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started"> ici</a> par exemple !
    </p>
  </body>
</html>

Allez contempler ici le rendu de cette magnifique page et suivez le lien qui s'y trouve pour apprendre le fonctionnement des balises html.

Exercice 1

  • Créez un dossier contenant un fichier mapage.html.
  • Créez une page contenant une image et un lien vers le site du lycée.
  • Vous pouvez utiliser l'éditeur de votre choix. Par exemple le logiciel Sublime Text installé au lycée (pour le lancer cliquez sur l'icône Windows puis commencez à taper Sublime au clavier) que vous pouvez aussi installer sur votre ordinateur personnel.
  • Vous pouvez aussi utiliser un éditeur en ligne avec rendu instantané, du type https://www.w3schools.com/tryit/

Pour conclure⚓︎

À retenir

  • Pour créer une page web, on crée un fichier ayant l'extension .html , qui pourra être ouvert dans le navigateur web simplement en faisant un double-clic dessus.
  • Chaque fichier HTML est constitué de balises.
  • Les balises peuvent avoir plusieurs formes :
    • <balise> </balise> : balises en paires, elles s'ouvrent et se ferment pour délimiter le contenu (début et fin d'un titre, par exemple) ;
    • <balise> : balises orphelines (on ne les insère qu'en un seul exemplaire), elles permettent d'insérer un élément à un endroit précis (par exemple une image).
  • Les balises sont parfois accompagnées d'attributs pour donner des indications supplémentaires, ou paramétrer un élément (exemple : <img src="photo.jpg"> ).
  • Une page web est constituée de deux sections principales : l'en-tête<head> </head> dont le contenu n'apparaît pas dans l'affichage de la page et le corps <body> </body> qui, lui, apparaît.

En savoir plus⚓︎

 Aide mémoire HTML⚓︎

Si vous avez besoin de retrouver facilement une balise html

Vous pouvez télécharger et consulter la liste des balises html de Mathieu Nebra.

Quiz⚓︎

1.2 html + css⚓︎

L'acronyme css signifie Cascading Style Sheets (feuilles de style en cascade). L'idée est de regrouper dans un seul fichier toutes les informations relatives à la mise en forme des éléments de la page html. De manière très simplifiée, on peut dire que le fichier html s'occupe du fond tandis que le fichier css s'occupe de la forme.

Le fichier css (souvent nommé style.css) doit être référencé au début du fichier html , au sein de la balise <head>.

Exemple de couple html / css minimal

  • fichier index.html :

    HTML
    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>page test</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
    <body>
          <h1>  Ceci est un titre de niveau 1 </h1>
          Mais sans rien d'intéressant.
          <h2>  Ceci est un titre de niveau 2 </h2>
    </body>
</html>

  • fichier style.css :

CSS
html {
    font-size: 15px;
    font-family:  sans-serif;
    background-color: lightgray; 
  }

h1 {
  color: red;
}

Pour contempler le nouveau rendu de cette magnifique page vous pouvez vous rendre sur Capytale (code 5b2f-1072956).

Exercice 2

Reprenez votre page de l'exercice 1 (la page contenant une image et un lien vers le site du lycée) et rajoutez une feuille de style.

Exercice 3

  • Allez sur la page de connexion à Atrium et affichez l'inspecteur d'élement de votre navigateur (généralement accessible en appuyant sur F12 )
  • Modifiez le fond du cadre de login à l'aide des attributs de style de la page.
  • Clic droit puis «Inspecter l'élément»
  • <div class=​"portlet-content" style=​"background-color:​rgb(174,185,104)​">​

Exercice 4

  • Apprenez à ajouter des tableaux et à les mettre en forme en CSS.
  • Utiliser la balise <code> </code> pour représenter un court fragment de code machine.
  • Créez un fichier tableau.htmlet un fichier style.css afin de recréer la page de l'onglet suivant qui explique comment inclure des caractères spéciaux en HTML. Ne pas oublier de mettre en forme les bordures du tableau grâce à la feuille de style.

Voici une capture d'image de la page que vous devez recréer en HTML et CSS: image

Pour conclure⚓︎

À retenir

  • CSS est un autre langage qui vient compléter le HTML. Son rôle est de mettre en forme votre page web.
  • Pour écrire le code CSS, on crée un fichier séparé portant l'extension .css comme style.css.
  • Pour lier les fichiers CSS et HTML, on rajoute une ligne dans la balise <head> </head> du fichier HTML : <link href="style.css" rel="stylesheet">
  • En CSS, on sélectionne les portions de la page HTML qu'on veut modifier, et on change leur présentation avec des propriétés CSS :
    CSS
    balise1
{
    propriete1: valeur1;
    propriete2: valeur2;
}
  • Il existe plusieurs façons de sélectionner la portion de page que l'on veut mettre en forme. Par exemple, on peut viser :
    • toutes les balises d'un même type, en écrivant simplement leur nom (h1par exemple) ;
    • certaines balises spécifiques, auxquelles on a donné des noms à l'aide des attributs class ou id(.nom-classe ou #nom-id) ;
    • uniquement les balises qui se trouvent à l'intérieur d'autres balises (h3,em).

 Aide mémoire CSS⚓︎

Si vous avez besoin de retrouver facilement une propriété css

Vous pouvez télécharger et consulter la liste des propriétés css de Mathieu Nebra.

En savoir plus⚓︎

Exercice 5

Réalisation d'une page web personnelle

  • Pour la forme: pour le contenu, écrire un fichier 'html' (ou mieux plusieurs fichiers html liés entre eux) sans mettre d'accents pour le nom des fichiers) et un fichier avec un nom du type style_prenom.css pour le style (remplacer prenom par votre prénom sans accents). Utiliser un maximum des balises html et des propriétés css citées dans les deux aide-mémoires ci-dessus (aide-mémoires que je vous demanderai d'imprimer et d'amener en cours).
  • Pour le fond: présentez-vous, présentez vos parents, les études que vous souhaitez faire et par la suite le métier que vous souhaitez exercer. Présentez aussi votre œuvre culturelle préférée (livre, film, tableau, musique...), en expliquant pourquoi elle vous a marqué. Faites-nous part de votre animal totem (celui qui correspond le mieux à votre caractère ou à votre sensibilité) en expliquant votre choix. Ajoutez d'autres pages si vous le souhaitez (du moment qu'elles sont personnelles). Terminez par une page où vous indiquerez, sous forme de tableau, les balises html que vous avez utilisées (vous en donnerez aussi l'utilité) et vous ferez de même pour les styles css que vous avez utilisés.
  • Publier ce travail sur Capytale (code 2808-2730306).

2. Quand le client peut agir sur sa page : exemple avec JavaScript⚓︎

Jusqu'à présent, la page web envoyée par le serveur est :

  1. identique quel que soit le client.
  2. statique après réception sur l'ordinateur du client.

Le JavaScript va venir régler le problème n°2 : il est possible de fabriquer une page sur laquelle le client va pouvoir agir localement, sans avoir à redemander une nouvelle page au serveur.

Inventé en 1995 par Brendan Eich pour le navigateur Netscape, le langage JavaScript s'est imposé comme la norme auprès de tous les navigateurs pour apporter de l'interactivité aux pages web.

Exemple de couple html / JavaScript minimal

Notre fichier index.html fait référence, au sein d'une balise <script>, à un fichier externe script.js qui contiendra notre code JavaScript.

  • fichier index.html :

    HTML
    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>un peu d'action</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <h1>Une page web extrêmement dynamique</h1>

    <div>

        <label>Changez la couleur d'arrière-plan:</label>

        <button type="button" onclick="choix('yellow');">jaune</button>

        <button type="button" onclick="choix('green');">vert</button>

        <button type="button" onclick="choix('purple');">violet</button> 
    </div>
    <div>
      <p>
      En JavaScript, le nom de la couleur choisie est :
      </p>
      <p id="resultat"></p>
    </div>
  </body>
</html>

  • fichier script.js :

    JavaScript
    function choix(color){
    document.body.style.background = color;
    document.getElementById("resultat").innerHTML=color;
}

Le résultat de cette page peut être consulté sur Capytale (code: 41af-1072993).

Commentaires

  • Au sein du bouton déclaré par la balise button, l'attribut onclick reçoit le nom d'une fonction déclarée à l'intérieur du fichier script.js, ici la fonction choix().
  • Cette fonction nous permet de modifier à la fois l'aspect esthétique de la page (changement de la couleur de background) mais aussi le contenu de cette page, en faisant afficher le nom de la couleur.

La puissance du JavaScript permet de réaliser aujourd'hui des interfaces utilisateurs très complexes au sein d'un navigateur, équivalentes à celles produites par des logiciels externes (pensez à Discord, par ex.). Bien sûr, dans ces cas complexes, le serveur est aussi sollicité pour modifier la page, comme nous le verrons en partie 3.

En savoir plus

Exercice 6

  • Dans Chrome se rendre sur le guide JavaScript de la fondation Mozilla
  • Ouvrir les outils de développement dans Chrome
  • Afficher l'onglet Console
  • Afficher une alerte en utilisant la fonction alert(): alert("NSI, ça déchire!"); dans la console
  • D'après le guide, indiquer à quoi servent let, const et console.log()
  • Quand doit-on utiliser un point-virgule en JS ?
  • Il faut déclarer une variable avec le mot-clé let en le faisant suivre de son nom: let myVariable;
  • Une fois une variable déclarée, on peut lui donner une valeur : myVariable = "Bob";
  • On peut aussi faire les deux opérations sur une même ligne si on le souhaite : let myVariable = "Bob";
  • Il faut déclarer une constante avec le mot-clé const: const myConstante = "Marley";
  • Un point-virgule en fin de ligne indique là où se termine l'instruction ; ce n'est impérativement requis que si vous devez séparer des instructions sur une même ligne. Toutefois, certains pensent qu'il est de bonne pratique de les mettre à la fin de chaque instruction.

Exercice 7

  • Créer:
    • un <input> de type range permettant de transmette un âge qui sera compris entre 7 ans et 100 ans
    • un bouton permettant d'afficher l'âge de la personne et si la personne est mineure ou majeure

  • Placer le JavaScript dans un fichier annexe.
HTML
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Exercice</title>
    <script src="script.js" defer></script>
  </head>
  <body>
    <h1>Majorité</h1>
    <div>
    <input type="range" id="age" name="age"
         min="7" max="100">
    <label for="age">Age</label>
     </div>
    // ici la fonction transmet la valeur 
    <button type="button" onclick="majorite(age.value);">Majeur ?</button>

    <p id="majorite"></p>
  </body>
</html>
JavaScript
function majorite(age){
const limite=18; //const permet de déclarer une constante
var message;     //var permet de déclarer une variable globale
if (age < limite){
    message = " Tu es mineur";
} else {
message = " Vous êtes majeur";
}

message = "âge:" + age + message;
// affichage dans la console
console.log(message); 
// affichage dans une balise html
document.getElementById("majorite").innerHTML= message;
}

Exercice 8

  • Créer:
    • un <input> de type text (le type par défaut) permettant de rentrer un nombre que l'on souhaite compris entre 7 et 100
    • un bouton permettant de tester si la donnée est correcte.
  • Inclure le JavaScript dans le fichier html
HTML
<!DOCTYPE html>
<html>
<body>

<h1>Validation par fonction JavaScript</h1>

<p>Saisir un nombre compris entre 7 and 100:</p>

<input id="numb">
// ici la fonction ne transmet pas la valeur
<button type="button" onclick="myFunction()">Valider</button>

<p id="demo"></p>

<script>
function myFunction() {
  let x = document.getElementById("numb").value; //autre façon de récupérer la valeur
  let text;
  if (isNaN(x) || x < 7 || x > 100) {
    text = "Entrée non valide";
  } else {
    text = "Entrée valide";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>

Exercice 9

  • Reprenez votre page créée aux exercices précédents et rajoutez du JavaScript pour la rendre dynamique. Vous êtes libres d'utiliser des inputs de différents types:
    • text (une chaîne de caractères) ;
    • number (un nombre) ;
    • range (une valeur numérique) ;
    • checkbox (une case à cocher) ;
    • radio (un bouton radio) ;
    • button (un bouton)...
  • Rajoutez des conditions if, else if, else et utilisez les opérateurs logiques AND (noté && en JS) et OR (noté || en JS).

Exercice 10: Calculatrice RPN

  • La HP Prime est une calculatrice graphique programmable à écran tactile couleur du fabricant américain Hewlett-Packard (HP). La calculatrice prend en charge trois logiques d'entrée différentes : la notation algébrique sur une ligne, une notation similaire à la notation mathématique sur papier, appelée notation Textbook par HP, et la notation polonaise inversée (RPN).
  • La notation polonaise inverse permet de faire des calculs arithmétiques sans utiliser de parenthèses et sans faire référence à une quelconque adresse mémoire, les données étant stockées dans une pile (les piles seront étudiées de façon détaillée en classe de terminale).
  • Un émulateur de la HP Prime est officiellement disponible pour divers systèmes d’exploitation: Android (Google Play), iOS (Apple App Store) et MS Windows (Microsoft Store). Il existe également une version MacOS et une version Linux.
  • Les Flex Box CSS sont un standard CSS3 de disposition des éléments dans une page web. Ce standard permet d'avoir un design adaptatif à l'écran. Les éléments peuvent être réagencés selon la taille de l'écran.
  • Les onglets suivants contiennent l'ébauche du code implémentant une calculatrice RPN. Compléter le code pour avoir une calculatrice entièrement fonctionnelle.

HTML
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <script src="calculatrice.js" defer> </script>
  <title>Calculatrice RPN</title>
</head>
<body>
  <h1>Calculatrice RPN en JavaScript</h1>
  <h2>Pile</h2>
  <div class="pile">  
  3:<span id="pile3"></span>
  </div> 
  <div class="pile">  
  2:<span id="pile2"></span>
  </div> 
  <div class="pile">  
  1:<span id="pile1"></span>
  </div> 
  <h2>Saisie</h2>
  <div class="centrer">
  <p id="tampon">Ready</p>
  </div>
  <div class="centrer">
  <div class="nombres">
  <div class="ligne">
    <button type="button" onclick="nombre(7)"   class="touche">7</button>
    <button type="button" onclick="nombre(8)"   class="touche">8</button>
    <button type="button" onclick="nombre(9)"   class="touche">9</button>
    </div>
  <div class="ligne">     
    <button type="button" onclick="nombre(4)"  class="touche">4</button>
    <button type="button" onclick="nombre(5)"  class="touche">5</button>
    <button type="button" onclick="nombre(6)"  class="touche">6</button>
  </div>
    <div class="ligne">     
    <button type="button" onclick="nombre(1)"  class="touche">1</button>
    <button type="button" onclick="nombre(2)"  class="touche">2</button>
    <button type="button" onclick="nombre(3)"  class="touche">3</button>
  </div>
  </div>
  <div class="operations">
    <button type="button" onclick="clearAll()" class="touche">Clear</button>
    <button type="button" onclick="division()" class="touche">/</button>
    <button type="button" onclick="soustraction()" class="touche">-</button>
    <button type="button" onclick="addition()" class="touche">+</button>
    <button type="button" onclick="enter()" class="touche">Enter</button>
  </div>
  </div>
</body>
</html>
CSS
h1 {
  color: #008CBA;
  text-align: center;
}

.pile {
  display:flex;
  justify-content:space-between;
  margin:  2px 30px 2px 30px;
  font-size: x-large;
  padding: 4px 10px;
  border: 0.1pt dashed;
}

.centrer {
  display:flex;
  justify-content: center;
}

#tampon {
  font-size:xx-large;
  border: 2px solid;
  padding: 4px 10px;
  margin: 2px 30px 0px 30px;
  font-family: "Lucida Console";
  width:550px;
  min-height:40px;
  text-align:right;
}

.touche {
  font-size:x-large;
  padding: 15px 32px;
  font-size: 16px;
  margin: 4px;
  cursor: pointer;
  background-color: white; 
  color: black; 
  border: 2px solid #008CBA; 
  border-radius:10px;
}

.nombres {
  border:solid;
  border-radius: 15px;
  border-color: white;
  max-width:300px; /* largeur du clavier numérique */
  padding:20px;
  background-color: white;
  margin: 20px; 
}

.ligne {
  display: flex; /* pour positionner les touches */
  justify-content: center; /* centrées sur la ligne */
  background-color: white;
  }

.operations {
  display: flex; /* pour positionner les touches d'opérations */
  flex-direction: column; /* en une colonne */
  border:solid;
  border-radius: 15px;
  border-color: white;
  max-width:200px;
  padding:20px;
  background-color: white;
}
JavaScript
let pile3  = "";
let pile2  = "";
let pile1  = "";
let tampon = "";

function nombre(x) {
  tampon = 10*tampon + x;
  document.getElementById("tampon").innerHTML = tampon; 
};

function clearAll() { // attention clear() est un mot réservé 
  pile3 = "";
  pile2 = "";
  pile1 = "";
  tampon = "";
  affichage();
};

function enter() {
  pile3 = pile2;
  pile2 = pile1;
  if (tampon !="") {
    pile1 = tampon;
    tampon = ""
  }
  affichage();
};

function addition() {
  if (tampon!="") {enter()};  
  pile1 = Number(pile2) + Number(pile1);
  pile2 = pile3;
  pile3 = "";
  tampon = "";
  affichage();
};

function division() {
  if (tampon!="") {enter()};  
  pile1 = Number(pile2) / Number(pile1);
  pile2 = pile3;
  pile3 = "";
  tampon = "";
  affichage();
};

function affichage() {
  document.getElementById("pile3").innerHTML = pile3;
  document.getElementById("pile2").innerHTML = pile2;
  document.getElementById("pile1").innerHTML = pile1;
  document.getElementById("tampon").innerHTML = tampon;
};
  • Capytale (code 9bcf-2789938)

3. Quand la page est fabriquée à la demande pour le client⚓︎

Rappelons que toutes les pages que nous avons créées jusqu'à présent sont uniformément envoyées par le serveur au client. Aucune «préparation» de la page en amont n'a lieu sur le serveur, aucun dialogue n'a lieu avec le serveur une fois que la page a été livrée. Évidemment, si le web était comme ceci, il ne serait qu'une gigantesque bibliothèque en consultation seule (ce fut le cas pendant longtemps, et ce qui n'était déjà pas si mal).

Les langages serveurs, parmi lesquels PHP (présent sur environ 80% des serveurs), Python (via les frameworks Django, Jinja2, Flask...), Java, Ruby, C#, permettent de rajouter de l'interactivité côté serveur.

Exemple de serveur qui se contente de lire des formulaires

  • Langage: Dans ce TP, nous utilisons le langage Python via la bibliothèque jinja2.
  • Placer les fichiers suivants dans un même dossier:
    • Le fichier serveur.py (ce nom devra être conservé) sera à utiliser tel quel. Nous n'aurons pas à le modifier (sauf si l'on désire changer le port). Il ne devra pas être exécuté, mais il devra être présent au côté des autres fichiers.
    • Les fichiers qu'il faudra modifier sont les fichiers:
      • dynserveur.py (ce nom peut être changé) qui contient le code que l'on souhaite voir exécuter sur le serveur. Ce fichier devra être exécuté dans Spyder.
      • formulaire1.html (ce nom peut être changé) qui contient un formulaire (voir page 202 du livre) permettant d'envoyer des données sous forme de dictionnaire au serveur.
🐍 Script Python
from serveur import get_template, render, OK, Redirect, pageDynamique, lancerServeur

def traitement1(url, vars):
    """Traitement du formulaire1"""
    print("Le formulaire à envoyé:",vars)
    return Redirect('/formulaire1.html')

pageDynamique('/traitement_formulaire1', traitement1)

# Lancer le serveur
lancerServeur()
  • À l'exécution du script dynserveur.py dans Spyder, le serveur devrait se lancer et un message devrait vous dire sur quel port (habituellement sur le port 8000).
  • Se rendre ensuite à l'adresse suivante http://127.0.0.1:8000 ou tout simplement 127.0.0.1:8000 ou localhost:8000.
  • Les fichiers présents dans votre dossier doivent aparaitre dans votre navigateur internet.
  • À partir de là vous pouvez ouvrir formulaire1.html
  • Vérifiez que tout fonctionne et que les données sont bien envoyées sous forme de dictionnaire.
HTML
<html>
  <head>
    <meta charset="utf-8">
    <title>Formulaire de base</title>
  </head>
  <body>
    <h1>Formulaire de base</h1>
    <form action="/traitement_formulaire1" method="POST">
      <label>Message : <input type="text" name="msg"></label><br>
      <input name="age" type="number" value="42" min="0" max="100"/><br>
      <input name="regle" type="range" value="60"/><br>
      <input type="submit" value="Envoyer">
    </form>
  </body>
</html>

À retenir

  • Une page web peut contenir plusieurs formulaires.
  • Un formulaire peut contenir plusieurs <input> dont obligatoirement un <input> de type sumit pour soumettre le formulaire.
  • Lors de la soumission d'un formulaire, c'est-à-dire lorsque l’on clique le bouton «Envoyer», le navigateur communique deux éléments au serveur:
    • une URL spécifiée grâce à l'attribut action du formulaire (dans l'exemple ci-dessus, l'url "/traitement_formulaire1" est une URL relative où / correspond au dossier racine) ;
    • un dictionnaire qui contient les valeurs saisies dans le formulaire.
  • À la réception de ces éléments, le serveur:
    • se sert de l'URL pour faire le lien avec une fonction (grâce à pageDynamique) ;
    • effectue un traitement des données dans la fonction ;
    • renvoie une page au navigateur.

Exercice 11: Un service Web (activité pages 196-197 du manuel)

  • Télécharger le programme serveur.py (un lien est donné en haut de la page 196) ainsi que les autres fichiers fournis.
  • Résumé de ce qu'il faut faire pour lancer le serveur (une fois que les fichiers sont bien complétés conformément à ce qui est demandé dans l'activité): ouvrir fichier dynserveur.py dans Spyder pour l'exécuter pour démarrer le serveur (il ne faudra jamais modifier le fichier serveur.py par contre les autres fichiers pourront si besoin être modifiés). Ouvrir localhost:8000 dans un navigateur.

Utiliser un template pour générer une page HTML

  • Jinja2 est ce que l’on appelle un moteur de templates (patrons en français…). L'intérêt de Jinja2 est qu’il est écrit en Python et très fortement intégré à ce langage.

  • Les moteurs de templates fonctionnent quasiment tous de la même manière : à partir d’un patron (template), on effectue le rendu en transmettant un contexte.

  • Un patron est constitué de parties fixes et de parties variables ; Jinja2 fournit même des boucles et des tests. Il est ainsi possible de générer différentes sorties avec un même patron en fonction du contexte.

Exercice 12

exercice 17 page 212: Boite à secrets (requette POST)
  • Télécharger les 2 fichiers qui sont fournis avec l’exercice.
  • Les renommer serveur.py et secret.py
  • Dans le fichier secret.py rechercher l'instruction Pagedynamique pour déterminer le nom de l'action qu'il faudra utiliser dans le formulaire.
  • Créer un fichier secret.html contenant un formulaire avec notamment:
    • une zone de saisie de type text pour le nom ;
    • une zone de saisie de type password pour le mot de passe ;
    • une zone de saisie de type text pour le secret ;
    • un bouton pour envoyer le formulaire.
  • Dans le fichier secret.py rechercher le nom des clés utilisées par le dictionnaire secrets pour déterminer l'attribut name des différentes zones de saisie.
  • Dans ce même fichier html, rajouter le code jinja2 pour permettre d'afficher l'ancien message secret envoyé par le serveur.
HTML
<html> 
  <head>
    <meta charset='utf-8'>
    <title>Boite à secrets est une page dynamique</title>
  </head>

  <body>
    <h1>Boîte à secrets</h1>
    <form action='/secret' method='POST'>
      Nom :                  <input type='text'     name='nom'>        <br>
      Mot de passe :         <input type='password' name='motdepasse'> <br>
      Secret à enregistrer : <input type='text'     name='secret'>     <br><br>
                             <input type='submit'   value='Valider'>
    </form>
    <hr>
    <p>{{message}}</p>
  </body>
</html>
🐍 Script Python
from serveur import get_template, render, OK, pageDynamique, lancerServeur
import requests

# dictionnaire des secrets : la clé est le nom,
#                            la valeur est un tuple (mot de passe, secret)
secrets = {}


def secret(url, vars):
    print('Fonction secret appelée')
    print(vars)
    # extraire les valeurs du formulaire
    # vars est un dictionaire
    nom = vars['nom']  # valeur pour la clé 'nom'
    motdepasse = vars['motdepasse'] # valeur pour la clé 'motdepasse' 
    secret = vars['secret'] # valeur pour la clé 'secret'
    msg = ''
    if nom not in secrets:
        # créer un nouveau secret pour ce nom 
        secrets[nom] = (motdepasse, secret) 
        msg = 'Secret enregistré'
    else:
        # récuperer le contenu du secret
        (mdp, s) = secrets[nom]
        # vérifier si le mot de passe est corret
        if mdp != motdepasse:
            msg = 'mot de passe incorrect !'
        else:
            # révéler l'ancien secret (si vide) 
            if secret == '':
                msg = 'ancien secret : ' + s
            else:
            # enregistrer le nouveau secret (si non vide)
                secrets[nom] = (motdepasse, secret) # écrase l'ancien secret
    # retourner la page avec le message
    template = get_template('secret.html')
    return OK(render(template, {'message': msg}))


def affichage_initial(url, vars):
    # Affiche la page secret.html avec {{ message }} = ''
    template = get_template('secret.html')
    msg = ''
    return OK(render(template, {'message': msg}))

pageDynamique('/secret', secret) # appel par submit du formulaire
pageDynamique('/secret.html', affichage_initial) # ouverture initiale de la page

lancerServeur()

Exercice 13

Plan de classe
Ressources autorisées:
  • Ce cours
  • Votre manuel sur Correlyce
  • Vous avez également le droit de consulter les différents fichiers que vous avez déjà utilisés dans le cadre des exemples et exercices du cours.
  1. Créer un fichier formulaire.html contenant le code permettant d'afficher le plan de classe vierge suivant: Utiliser le style css suivant pour la mise en forme:
    CSS
    html{
    font-size: 1em;
}
h1{
    font-size: 1.5em;
    text-align: center;
}
table{
    margin-left: auto; 
    margin-right: auto;
}
th, td {
    border: 1px solid black;
    padding: 10px;
}
  2. Rajouter le code nécessaire pour obtenir le formulaire suivant:
  3. Créer un fichier dynserveur.py et ajouter un patron au fichier formulaire.html pour remplir les cases du plan de classe au fur et à mesure que des places sont attribuées aux élèves. Le code affichera «place libre» dans les cases restant libres. Enregistrer le fichier html modifié sous un nouveau nom: patron.html.