Ergonomie des sites web

Licence Informatique, semestre 6

Alexandre NiveauJean-Marc Lecarpentier — Judith Jeyafreeda Andrew

Enseignement des technologies du Web

 

Ergonomie des sites web

Notes de cours

Travail personnel

Objectifs

Ce TP est destiné à continuer l'implémentation de l'architecture MVCR, en particulier si vous n'avez pas pu finir les TP précédents. Le premier exercice a été proposé comme exercice optionnel dans le TP précédent : on remplace le stockage dans un fichier par l'utilisation d'un vrai SGBD.

Le deuxième exercice n'a rien à voir, c'est celui sur les pièges HTML/CSS qui a déjà été proposé la semaine dernière. Il a été remis pour les rapides qui auraient déjà fini les exercices précédents et n'auraient pas encore fait celui-ci.

Si vous avez tout fait, retournez voir les précédents TP et faites les parties optionnelles !

Exercice 1 — Utilisation d’une base de données dans MVCR #

Dans cet exercice, on implémente simplement l'interface AnimalStorage en utilisant une vraie base de données MySQL. J'en profite pour préciser quelques détails annexes, mais sur le fond il n'y a pas de surprise, c'est assez direct.

  1. Pour commencer, si ce n'est déjà fait, faire en sorte que l'instance de AnimalStorage manipulée par le contrôleur soit créée par animaux.php et passée comme argument au main du routeur, qui l'utilisera pour construire le contrôleur. L'idée est que la décision du type de stockage utilisé est prise par animaux.php, c'est-à-dire le véritable point d'entrée de l'application.
  2. Créer une table dans une vos bases de données MySQL qui contiendra les animaux. Vous pouvez utiliser ce fichier, qui contient le code SQL permettant de créer une table animals avec les trois animaux de départ.
  3. Créer une classe AnimalStorageMySQL dans src/model qui implémente AnimalStorage. Pour commencer, on se contentera d'implémenter la méthode read($id) (les autres méthodes enverront une exception), et on construira l'instance de PDO dans le constructeur.
  4. Remplacer l'instance de AnimalStorageFile que manipule le contrôleur par une instance de AnimalStorageMySQL ; normalement, il doit suffire de modifier animaux.php.
  5. Vérifier que les pages animaux.php?id=1, animaux.php?id=2 et animaux.php?id=3 (ou équivalentes) fonctionnent toujours.
  6. Il n'est pas propre de construire l'instance de PDO dans AnimalStorageMySQL : si on a plusieurs classes de ce type, on va construire plusieurs instances de PDO et donc ouvrir plusieurs connexions à la BD, ce qui est inefficace. Modifier le code pour que l'instance de PDO soit créée dans animaux.php et passée en argument au constructeur de AnimalStorageMySQL.
  7. Pour l'instant, on a mis les paramètres de connexion à la BD dans animaux.php, notamment le mot de passe. C'est embêtant si on veut montrer notre code ou le mettre sur un dépôt. Créer un fichier mysql_config.php dans le répertoire private qui se trouve à la racine de votre compte web (à côté de www-prod et www-dev). Y déclarer des constantes MYSQL_HOST, MYSQL_PORT, MYSQL_DB, MYSQL_USER et MYSQL_PASSWORD.
  8. Dans animaux.php, ajouter require_once('/users/NUMETU/private/mysql_config.php'); et utiliser les constantes pour construire l'instance de PDO. L'intérêt est que le fichier mysql_config.php est inaccessible depuis le web, ce qui garantit une bonne sécurité pour vos identifiants. Vos scripts PHP y ont accès car ils sont sur la même machine.
  9. Vérifier que les pages de base fonctionnent toujours, puis implémenter les autres méthodes de AnimalStorageMySQL, en prenant soin d'utiliser des requêtes préparées.

Exercice 2 (optionnel) — Pièges classiques en CSS #

Chaque question ci-dessous est liée à une page HTML avec un peu de CSS dedans.

L'idée est que, pour chaque page, le CSS donné semble devoir fonctionner, mais ne fonctionne pourtant pas.

Le premier objectif de chaque question est de réussir à faire fonctionner le CSS comme désiré, sans modifier le HTML ; le deuxième objectif, plus important mais plus difficile, est de comprendre pourquoi ça ne marche pas comme on l'attendrait.

Essayez de chercher par vous-même ! Si on vous donne la réponse, même si vous avez l'impression d'avoir compris, vous n'aurez pas appris grand'chose.

Les questions sont rangées par ordre (plus ou moins) croissant de difficulté. Les dernières ne sont vraiment pas évidentes ; vous pouvez voir ça comme un challenge, mais ne perdez pas non plus trop de temps ! Cela dit, toutes les réponses sont techniquement trouvables. Elles seront données lors d'un prochain cours.

Toutes les pages sont disponibles dans cette archive.

  1. Pourquoi les items ne tiennent-ils pas sur une seule ligne ?
  2. Pourquoi les blocs ne sont-ils pas côte-à-côte ?
  3. Pourquoi les items ne changent-ils pas de couleur au survol ?
  4. Pourquoi le bloc ne fait-il pas 50% de la hauteur de son parent ?
  5. Pourquoi le header n'est-il pas collé en haut, alors que ses marges et celles du body sont à 0 ?
  6. Pourquoi le titre est-il souligné, malgré le text-decoration:none dans le header ?
  7. Pourquoi l'image de fond du body est-elle plus large que le body lui-même, qui est fixé à 800 pixels ?
  8. Pourquoi y a-t-il de l'espace vertical sous les items ?
  9. Pourquoi ne puis-je pas cliquer sur le lien ?
  10. Pourquoi la première ligne du paragraphe ne change-t-elle pas de couleur au survol du paragraphe ?