TP noté

2013-2014

Technologies Internet

Alexandre Niveau — Nicolas Côté

Enseignement des technologies du Web

 

TP noté

2013-2014

Mise en place du TP noté

Le répertoire de travail /users/NUMETU/www-dev/TpNoteECI622014/ a été créé dans votre compte web. Ne pas le déplacer ni le renommer ! Il contient un répertoire par exercice, avec les fichiers nécessaires. Réalisez votre travail dans ces répertoires.

En cas de problème, ou pour refaire le TP, vous pouvez télécharger une archive contenant cette arborescence.

Important

À l'issue du TP noté, vous devrez déposer sur devoirs.info.unicaen.fr une archive contenant l'ensemble du répertoire TpNoteECI622014/.

Vous devez voir l'enseignant avant de quitter la salle de TP afin de vérifier que vous avez bien déposé une archive sur l'application devoirs.

Le répertoire TpNoteECI622014/ sera rendu non accessible en écriture par les administrateurs système jusqu'à ce que le TP soit corrigé.


Exercice 1 : HTML/CSS

Exercice noté sur 8

Sujet

Vous devez réaliser la page web donnée en exemple. Le classement des images est à réaliser dans les répertoires.

Important

Obtenir un résultat fonctionnel minimal est la priorité, afin d'avoir une page lisible même si tous les détails de la présentation ne sont pas mis en place. Pensez à gérer votre temps, vous pourrez affiner la présentation en fonction du temps dont vous disposez. Ne perdez pas de temps sur des détails. Obtenir un résultat visuellement identique au modèle n'est ni nécessaire ni suffisant : l'adéquation des balises utilisées en regard de la page à présenter sera aussi un critère de notation.

Modèle

Capture d'écran de la page

Arborescence

Vous réaliserez le travail dans le répertoire /users/numetu/www-dev/TpNoteECI622014/exo1/ sur le serveur web dans lequel vous utiliserez l'arborescence suivante (déjà créée) :

--exo1
  |--stratocaster.html
  |--stratocaster.css
  |--imagesCss
  |  |-- ...
  |  `-- ...
  `--imagesInfo
     |-- ...
     `-- ...	  

Informations complémentaires

Les images nécessaires et les textes sont contenus dans le répertoire exo1_fichiers.

La colonne principale fait 970 pixels de largeur. La couleur du texte est #333, sauf dans le pied de page où c'est #999. Les bordures sont toutes de couleur #e5e5e5. La couleur de fond des colonnes de détails est #f5f5f5, et elles font 180 pixels de largeur. L'image de fond de la page est GlobalBackground.gif.

Évaluation

Les points suivants seront particulièrement importants pour l'évaluation de la réalisation :

  • page répondant au cahier des charges
  • pages générées valides en HTML5
  • structuration et qualité du code HTML5 et CSS

Exercice 2 : JavaScript

Exercice noté sur 6

Vous pouvez réaliser l'exercice avec ou sans jQuery.

On dispose d'une liste d'insectes décrits au format JSON dans un fichier exo2/collection_insectes.js :

var collection = {
  "coccinelle": {
    "id": "coccinelle",
    "nomCommun": "Coccinelle",
    "nomLatin": "Coccinella septempunctata",
    "details": "coccinelle_details.frg.html",
    "photo": "coccinelle.jpg"
  },
  /* etc. */
];

Chaque élément de la collection est donc un objet JavaScript dont les propriétés sont accessibles avec l'opérateur . (point). Par exemple, le nom latin de la coccinelle peut être obtenu en faisant
collection["coccinelle"].nomLatin
ou collection.coccinelle.nomLatin
et il en est de même pour les autres propriétés.

Le but de l'exercice est de compléter la page HTML exo2/insectes.html fournie de façon à ce que le menu liste les insectes de la collection et permette d'afficher des détails sur chaque insecte. La mise en forme n'est pas importante dans cet exercice (mais les efforts seront pris en compte).

Remarque : votre travail est à faire dans le répertoire exo2. La page HTML fournie dans ce répertoire inclut le fichier collection_insectes.js, un autre fichier insectes.js pour y écrire vos programmes, et une feuille de style CSS. Vous disposez également d'images et de fragments sur les insectes. Vous pouvez modifier le contenu de tous les fichiers si besoin, mais vous ne devez pas renommer les images et les fragments.

Remarque 2 : insectes.js contient une ligne de code avec console.log qui affiche undefined. Ne pas en tenir compte.

Question 1

Compléter insectes.js pour que le menu de gauche liste les noms communs des insectes de la collection.

Question 2

Compléter insectes.js pour qu'un clic sur un insecte dans le menu de gauche fasse apparaître sa photo et son nom latin dans la zone centrale, d'identifiant details.

Question 3

Compléter insectes.js pour qu'en plus de la photo et du nom latin, un clic dans le menu fasse apparaître les détails sur l'insecte contenus dans le fragment concerné, en utilisant Ajax.


Exercice 3 : PHP

Exercice noté sur 6

Le répertoire exo3 contient une page HTML couleurs.html avec un formulaire, ainsi qu'un fichier SQL définissant la table suivante, destinée à contenir des couleurs :

mysql> desc tpNote_couleurs;
+-------+--------------+------+-----+---------+-------+
| Field | Type         | Null | Key | Default | Extra |
+-------+--------------+------+-----+---------+-------+
| id    | varchar(255) | NO   | PRI | NULL    |       |
| nom   | varchar(255) | NO   |     | NULL    |       |
| hex   | varchar(6)   | NO   |     | NULL    |       |
| desc  | text         | NO   |     | NULL    |       |
+-------+--------------+------+-----+---------+-------+

Ajouter cette table dans votre base de données avant de commencer l'exercice.

Le formulaire envoie les données vers une page recup.php qui pour l'instant est vide. L'exercice consiste à créer cette page. Un code propre et bien organisé sera mieux noté, mais la priorité est que ça fonctionne.

Question 1

Faire en sorte que le formulaire fonctionne, c'est-à-dire que cliquer sur « ajouter » crée une nouvelle entrée dans la base de données, avec le contenu du formulaire, puis que l'utilisateur soit ramené automatiquement à la page du formulaire.

Les données seront ajoutées telles quelles dans la base ; pas la peine de tester si les valeurs sont correctes.

Question 2

Modifier votre code pour que le nom et le code hexadécimal soient obligatoires, mais pas la description. On affichera simplement une erreur, sans ramener l'utilisateur à la page du formulaire.

Question 3

Modifier votre code pour qu'il ne soit pas possible d'ajouter une couleur dont le nom existe déjà. Encore une fois, on affichera simplement une erreur, sans ramener l'utilisateur à la page du formulaire.

Question bonus

Au lieu de ramener l'utilisateur à la page du formulaire, faire en sorte que recup.php affiche une liste des couleurs de la base de données. Faire preuve de créativité sera apprécié.