TP noté n°1

2011-2012

Technologies Internet

Jean-Marc Lecarpentier — Abir Karami — Romain Brixtel

Enseignement des technologies du Web

 

TP noté n°1

2011-2012

Mise en place du TP noté

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

Archive pour refaire le TP

Archive

Important

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

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'appli devoirs.

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


Exercice 1 : XHTML-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'obtenir une page lisible même si tous les détails de la présentation ne sont pas mis en place. Vous pourrez ensuite affiner la présentation en fonction du temps dont vous disposez. Attention, ne passez pas tout votre temps sur ces détails, il y a un 2e exercice !

Modèle

Un article du site TechCrunch (page très simplifiée!) sert de modèle (Vous pourrez voir la page complète après le TP).

Capture d'écran de la page

Arborescence

Vous réaliserez le travail dans le répertoire /perso/login/www/technosWebTp1/exo1/ sur le serveur perso.info.unicaen.fr dans lequel vous utiliserez l'arborescence suivante (déjà créée) :

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

Production attendue

Vous devez rendre à l'issue de l'examen une réalisation dans le répertoire /perso/login/www/technosWebTp1/exo1/ de votre compte.

Informations complémentaires

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

La page est en 968px de large plus un padding gauche de 40px. La colonne gauche fait 640px plus un padding droit de 28px, et la colonne droite fait 300px (vous pouvez modifier légèrement ces valeurs si vous avez des problèmes de tailles de colonnes).

Le texte est en police "Helvetica" (police de famille sans-serif), de taille 14px.

La hauteur de ligne du texte de l'article est 20px (propriété line-height)

Liens (mettez simplement <a href="" > pour tous les liens). Couleurs et détails :

  • Liens verts (menu haut, article, nom de l'auteur) : couleur #0A9600
    Dans le menu haut, les liens deviennent noirs au survol de la souris.
    Dans le corps de l'article, les liens sont soulignés au survol de la souris.
  • Liens du menu droit : couleur #000000 et couleur #0A9600 au survol de la souris.

Remarque : pour le menu haut, on pourra utiliser la propriété CSS text-transform: uppercase.

L'élément contenant le titre "Popular posts" fait 30px de hauteur.

Les bordures des images du menu droit sont de couleur #C5C5C5.

Les bordures sont en noir.

Evaluation

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

  • partie visible :
    • page répondant au cahier des charges
    • aptitude à obtebnir un résultat fonctionnel même si non complet
  • partie technique :
    • pages générées validées en XHTML strict
    • structuration et qualité du code XHTML et CSS

Exercice 2 : PHP

Exercice noté sur 12

Introduction

L'exercice est basé sur la mini-application bookmarks réalisée en TP et présentée dans le tutoriel de cours.

Le répertoire exo2/ pré-installé possède la structure de base de l'application, similaire à celle utilisée en TP : un fichier contient la fonction __autoload, les fichiers de configuration sont à compléter, la classe Outils_Bd est un singleton de connexion à la base de données.

Les classes Bookmark* sont données et permettent l'affichage de base des bookmarks. Les fonctionnalités d'ajout, de modification et suppression des bookmarks ont été enlevées pour simplifier le code fourni.

Attention : un fichier .htaccess à la racine du répertoire exo2 désactive les magic_quotes_gpc et met le niveau d'erreur à E_ALL.

Objectifs de l'exercice

On souahite ajouter la possibilité de commenter les bookmarks. Il est clair que dans la réalité, cette fonctionnalité nécessiterait la possibilité de s'authentifier par login/mot de passe. On imaginera que c'est la cas mais ce n'est pas à réaliser. On souhaite pouvoir :

  • afficher les commentaires liés à un bookmark ;
  • créer un commentaire pour un bookmark donné ;
  • modifier / supprimer un commentaire donné.

On supposera qu'un bookmark peut avoir 0 à n commentaires et qu'un commentaire ne s'applique qu'à un et un seul bookmark. Deux tables de base de données sont donc nécessaires, avec la structure suivante :

mysql> desc tw1_bookmarks;
+-------------+--------------+------+-----+---------------------+-------+
| Field       | Type         | Null | Key | Default             | Extra |
+-------------+--------------+------+-----+---------------------+-------+
| id          | varchar(32)  | NO   | PRI |                     |       |
| nomSite     | varchar(255) | NO   |     |                     |       |
| url         | varchar(255) | NO   |     |                     |       |
| description | text         | NO   |     | NULL                |       |
| dateIns     | datetime     | NO   |     | 0000-00-00 00:00:00 |       |
+-------------+--------------+------+-----+---------------------+-------+
5 rows in set (0.00 sec)

mysql> desc tw1_commentaires;
+-------------+--------------+------+-----+---------------------+-------+
| Field       | Type         | Null | Key | Default             | Extra |
+-------------+--------------+------+-----+---------------------+-------+
| id          | varchar(32)  | NO   | PRI |                     |       |
| idBookmark  | varchar(32)  | NO   |     |                     |       |
| pseudo      | varchar(255) | NO   |     |                     |       |
| commentaire | text         | NO   |     | NULL                |       |
| dateIns     | datetime     | NO   |     | 0000-00-00 00:00:00 |       |
+-------------+--------------+------+-----+---------------------+-------+

La colonne idBookmark de la table tw1_commentaires est une clé étrangère référençant l'identifiant du bookmark auquel il s'applique.

Le fichier exo2/config/dump_bd.sql contient un dump de ces 2 tables avec des bookmarks et commentaires existants.

Question 1 (1 point)

Modifier les fichiers de configuration et importer les tables de base de données pour faire fonctionner le système. Vous devez alors avoir une page d'accueil fonctionnelle qui affiche les derniers bookmarks comme ci-dessous :
installation

Question 2 (4 points)

Modifier l'affichage d'un bookmark pour afficher le nombre de commentaires du bookmark avec un lien pointant vers une page affichant le bookmark et ses commentaires (du plus récent au plus ancien), comme le montrent ces 2 captures
liste
comments

Il est important de programmer cette fonctionnalié de façon à ce que la gestion des commentaires soit indépendante des bookmarks, c'est à dire que des évolutions du modèle des commentaires (y ajouter une adresse email par exemple) n'impliquent pas de changements sur le modèle des bookmarks.

Question 3 (4 points)

Réaliser l'ajout de commentaire. Un lien "Ajouter un commentaire" sera placé dans la liste de la page d'accueil et dans la page avec le bookmark et ses commentaires :
liste
comments.
Pour gérer les erreurs du formulaire, on se limitera à vérifier que les champs sont non vides.
On affichera, au-dessus du formulaire de commentaire, les informations du bookmark que l'utilisateur va commenter, par exemple :
formulaire

Question 4 (3 points)

Réaliser la possibilité de modifier et supprimer un commentaire
modifier

Evaluation

Vous serez évalués sur le rendu fonctionnel de l'application et sur la qualité de vos programmes, au regard des principes de programmation mis en oeuvre en TP.