TP noté n°2

2011-2012

Technologies Internet

Jean-Marc Lecarpentier — Abir Karami — Romain Brixtel

Enseignement des technologies du Web

 

TP noté n°2

2011-2012

Mise en place du TP noté

Archive pour refaire le TP

Archive

Le répertoire de travail /users/NUMETU/www-dev/technosWebTp2_2012/ a été créé dans votre compte web. Ne pas le déplacer ni renommer ! Réalisez votre travail dans ce répertoire. L'arborescence est la suivante :

technosWebTp2_2012/
|-- config
|   |-- Autoload.php
|   |-- config_db.php
|   |-- config.php
|   `-- dump_bd.sql
|-- index.php
|-- js
|   |-- mootools-core.js
|   |-- mootools-more.js
|   `-- personnes.js
|-- modeles
|   |-- Geonames
|   |   `-- Geonames.php
|   |-- Outils
|   |   |-- Outils_Bd.php
|   |   `-- Outils_Chaines.php
|   `-- Personne
|       |-- Personne_Bd.php
|       |-- Personne.php
|       `-- Personne_Ui.php
|-- public
|   `-- index.php
`-- ui
    |-- css
    |   |-- base.css
    |   |-- print.css
    |   `-- screen.css
    |-- images
    |   `-- flowerLogo.jpg
    `-- pages
        `-- defaut.html.php

Important

A l'issue du TP noté, vous devrez déposer sur devoirs.info.unicaen.fr une archive contenant l'ensemble du réportoire technosWebTp2_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 technosWebTp2_2012/ sera rendu non accessible en écriture par les administrateurs système jusqu'à ce que le TP soit corrigé.


Évaluation de votre travail

Le travail demandé est réalisable dans le temps imparti. Une attention particulière devra donc être apportée à l'architecture de vos programmes et l'articulation entre le contrôleur et les classes réalisées. Une partie de la note sera consacrée à l'évaluation de votre qualité de programmation.


Exercice

Exercice noté sur 20

Les questions 1, 2 et 3 sont indépendantes (la question 4 dépend de la 3).

Introduction

L'exercice utilise une table de base de données contenant des personnes. Le fichier config/dump_bd.sql que vous devez injecter dans une de vos bases de données mySQL. La structure de la table tw2_personnes est la suivante :

mysql> desc tw2_personnes;
+-----------------+--------------+------+-----+---------+-------+
| Field           | Type         | Null | Key | Default | Extra |
+-----------------+--------------+------+-----+---------+-------+
| id              | varchar(32)  | NO   | PRI | NULL    |       |
| nom             | varchar(255) | NO   |     | NULL    |       |
| prenom          | varchar(255) | NO   |     | NULL    |       |
| mail            | varchar(255) | NO   |     | NULL    |       |
| ville           | varchar(255) | NO   |     | NULL    |       |
| dateInscription | datetime     | NO   |     | NULL    |       |
+-----------------+--------------+------+-----+---------+-------+

Le répertoire 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 Personne* sont partiellement données. La classe Personne est complète avec les accesseurs (les mutateurs ne sont pas utiles pour l'exercice). Les fonctionnalités d'ajout, de modification et suppression des personnes ont été enlevées pour simplifier le code fourni.

La feuille de style CSS ui/css/base.css définit des classes et identifiants utilisables pour l'exercice.

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

Question 1 (2 points)

Modifier les fichiers de configuration et importer la table de base de données.

Afficher en page d'accueil la liste des villes présentes dans la table des personnes, par exemple :
installation

Question 2 (8 points)

Ajouter pour chaque ville un lien "Informations" :
liste et liens

Ce lien amène à une page qui affiche des informations Wikipedia relatifs à la ville, par exemple :
infos Wikipedia

Pour obtenir ces informations, on va utiliser le service web fourni par Geonames. Ce service propose de donner une liste de références vers des articles Wikipedia relatifs au lieu donné en paramètre. On interroge ce service en mode REST. On utilisera le service Wikipedia Fulltext Search qui permet de chercher avec le nom de la ville. On limitera les résultats à 20 et on demandera des résultats en français (sinon les liens seront vers des pages en anglais). Voici un exemple du XML fourni par le service pour la requête sur la ville "London"

On affichera au moins le titre (qui est aussi le lien vers la page Wikipedia correspondant), le résumé et l'image associée. Remarque : attention tous les résulats n'ont pas forcément une image "thumbnail" associée (voir exemple sur capture ci-dessus).

Attention à utiliser CURL. Le proxy est désactivé pour le TP noté. (voir les constantes pour CURL sont fournies dans le fichier config.php et ne sont pas à modifier). La méthode curlGet fournie permet de réaliser cela.

Paramètres de connexion au Web Service

Puisque l'accès au mail est bloqué, vous ne pouvez pas vous créer un compte pour utiliser le service web. Vous utiliserez alors les comptes (paramètre username) suivants selon les instructions données au début du TP :

  • Salle S3-138: unicaen1, unicaen2, unicaen3
  • Salle S3-159: unicaen4, unicaen5, unicaen6
  • Salle S3-417: jml

Question 3 (4 points)

Ajouter un lien ou bouton pour afficher les personnes d'une ville :
liste

Ce lien/bouton active un appel AJAX qui affiche dans la colonne droite la liste des personnes de la ville donnée :
liste

Écrire une classe JavaScript et les programmes PHP nécessaires pour réaliser ces fonctionnalités

Remarque : La bibliothèque Mootools est déjà appelée dans le squelette de l'application

Optionnel : le contrôleur peut automatiquement détecter qu'il a reçu une requête en Ajax. Dans ca cas, Mootools ajoute un en-tête HTTP pour "dire" que la requête en cours est une requête Ajax. On accède en PHP à cet en-tête grâce à la variable $_SERVER['HTTP_X_REQUESTED_WITH'] si elle existe. Elle vaut alors XMLHttpRequest.

Question 4 (6 points)

On souhaite pouvoir cliquer sur les personnes de le liste affichée précédemment pour faire une sélection. Cette sélection apparait en-dessous des villes (par exemple dans la division d'identifiant selection présente dans le squelette) et affiche le profil complet d'une personne :
selection

Compléter la classe JavaScript de la question 3 et les programmes PHP nécessaires pour réaliser ces fonctionnalités.

On pourra utiliser la méthode Outils_Chaines::datetime2date donnée pour afficher la date à la française.

Complément (bonus)

Gérer le fait qu'on ne puisse ajouter deux fois la même personne dans la sélection