CREER DES IMAGES AVEC UNE APPLICATION WEB

Etude des techniques de base

L'objectif est de représenter, sur une même page, les uns en dessous des autres, les drapeaux de l'Allemagne, du Bénin, de la Roumanie et de la Colombie. Pour cet exercice, on utilisera chacune des quatre techniques de base décrites dans l'exposé Construire des images avec une application web. Le premier drapeau doit être réalisé avec la première technique, le deuxième drapeau avec la deuxième technique, et ainsi de suite.

Allemagne
CouleurHTMLRVB
Noir#0000000, 0, 0
Rouge#dd0000221, 0, 0
Jaune#ffce00255, 206, 0
Bénin
CouleurHTMLRVB
Vert#339a0351, 154, 3
Rouge#dd0000221, 0, 0
Jaune#ffce00255, 206, 0
Roumanie
CouleurHTMLRVB
Bleu#00427b0, 66, 123
Rouge#d60021214, 0, 33
Jaune#ffce00255, 206, 0
Colombie
CouleurHTMLRVB
Bleu#00427b0, 66, 123
Rouge#d60021214, 0, 33
Jaune#ffce00255, 206, 0

Utilisation d'une bibliothèque

Introduction

Le but de l'activité est d'apprendre à utiliser JQplot, un module d'extension en JavaScript pour le framework jQuery. Ce module est distribué sous licence GPL v2. JQplot se présente sous la forme d'un fichier au format .zip assez volumineux. En effet, l'archive comporte, en plus des fichiers permettant d'obtenir les tracés, toute la documentation expliquant comment utiliser ces fichiers.

Vous pouvez obtenir JQplot de deux manières :

Mise en situation

Dans une usine de produits chimiques, le niveau d'une cuve et la température du liquide qu'elle contient varient avec le temps. Deux capteurs de niveau et de température envoient régulièrement leurs mesures à une base de données. De cette base de données, on a relevé le tableau ci-dessous.

IdDate et heureNiveau (m)Température (°C)
12014-07-14 04:00:004.526.7
22014-07-27 13:00:004.827.4
32014-08-10 18:00:005.126.2
42014-08-22 14:00:004.925.9
52014-09-03 23:00:004.223.5
62014-09-16 02:00:003.523.9
72014-09-23 08:00:003.319.4
82014-10-02 17:00:003.720.3
92014-10-12 21:00:004.318.4
102014-10-28 14:00:004.917.6
112014-11-15 18:00:005.415.1
122014-11-30 21:00:006.215.3

L'objectif est de proposer une application web :

On étudiera la possibilité de tracer les deux courbes sur le même graphique.

Exemple de courbe :

Travail demandé

Première partie

On ne se préoccupe pas, pour l'instant, de l'accès à la base de données. On recherche juste une solution pour obtenir les graphiques demandés. La courbe d'une variable (niveau ou température) en fonction du temps se trace à l'aide d'une fonction du module JQplot. Cette fonction de JQplot est écrite en JavaScript.

  1. Dans une page HTML créer, pour chaque courbe à tracer, un tableau JavaScript contenant les couples de valeurs [date,variable].
  2. Utiliser ces deux tableaux pour tracer, à l'aide de la fonction appropriée, les courbes demandées.
  3. Proposer un site web demandant à l'utilisateur de choisir un tracé et affichant la courbe choisie.

Deuxième partie

Le but est de mettre en oeuvre une solution avec l'accès à la base de données.

  1. Dans une base de données, créer la table "enr" contenant quatre champs, le premier champ étant auto-incrémenté.
    Noms des champs : Insérer, dans cette table, les différentes valeurs du tableau présenté dans la mise en situation. On pourra utiliser phpMyAdmin. Pour gagner du temps et éviter d'entrer manuellement ces valeurs, vous pouvez aussi utiliser le fichier enr.sql.
  2. Ecrire un programme en PHP :
  3. Convertir ces tableaux PHP en tableaux JavaScript. On pourra s'inspirer des codes ci-dessous.
  4. Adapter le site web créé précédemment pour tracer les courbes demandées.

Exemple de conversion d'une variable PHP en variable JavaScript

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <?php
      $nom = "Paul";
    ?>
    <script>
      var nom;
      <?php
        echo "nom = '".$nom."';";
      ?>
      alert(nom);
    </script>
  </body>
</html>

Exemple de conversion d'un tableau PHP en tableau JavaScript

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <?php
      $tableau = array("Paul","Jade");
    ?>
    <script>
      var tableau = [];
      <?php
        for($i = 0; $i < count($tableau); $i++){
          echo "tableau[".$i."] = '".$tableau[$i]."';";
        }
      ?>
      for (var i=0; i<tableau.length; i++) {
        alert(tableau[i]);
      }
    </script>
  </body>
</html>