TP noté n°2
2012-2013
Mise en place du TP noté
Le répertoire de travail /users/NUMETU/www-dev/technosWebTp2_2013/ 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épertoires exo1 et exo2.
Archive pour refaire le TP
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_2013/.
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_2013/ sera rendu non accessible en écriture par les administrateurs système jusqu'à ce que le TP soit corrigé.
Exercice 1 : PHP
Exercice noté sur 14
Présentation de l'exercice
On suppose que le département Informatique dispose d'une interface web pour gérer la liste des enseignants-chercheurs. L'application permet de saisir, modifier et supprimer des personnes. Cette application de base est fournie dans le répertoire installé sur vos machines.
Installation de l'exercice
Le répertoire /users/NUMETU/www-dev/technosWebTp2_2013/exercice1/ contient l'application de base avec l'arborescence ci-contre.
Pour rendre l'application fonctionnelle, il faut tout d'abord modifier les fichiers de configuration et importer la table de base de données dans votre base MySQL.
Les fichiers nécessaires sont dans le répertoire config/ : fichiers config.php, config_db.php et fichier SQL annuaire.sql à importer.
Programmes fournis
Les classes Ens, Ens_Ui et Ens_Bd permettant de modéliser une personne, de lire en BD, et d'afficher les dernières insertions sont fournies dans les fichiers Ens/Ens_*.php. Le contrôleur de l'application est fourni et sera à compléter.
La table de base de données tpNote2 a la structure suivante :
mysql> desc tpNote2; +---------+--------------+------+-----+---------+-------+ | Field | Type | Null | Key | Default | Extra | +---------+--------------+------+-----+---------+-------+ | id | varchar(255) | NO | PRI | NULL | | | prenom | varchar(255) | NO | | NULL | | | nom | varchar(255) | NO | | NULL | | | mail | varchar(255) | NO | | NULL | | | url | varchar(255) | NO | | NULL | | | bureau | varchar(255) | NO | | NULL | | | labo | varchar(255) | NO | | NULL | | | equipe | varchar(255) | NO | | NULL | | | photo | varchar(255) | NO | | NULL | | | dateIns | datetime | NO | | NULL | | +---------+--------------+------+-----+---------+-------+
Une fois les fichiers de configuration modifiés et la base de données importée, la page d'accueil doit afficher les 5 dernières personnes insérées dans la base avec un lien vers la fiche détaillée, comme le montrent les captures ci-dessous.
Accueil
Détails d'une personne
Travail à réaliser
Les questions sont indépendantes.
Question 1
Compléter les programmes fournis pour réaliser un affichage de la liste complète des personnes. Par défaut, la liste est ordonnée par le nom de famille. La dernière colonne du tableau contient un lien permettant de voir la fiche complète, comme ci-contre.
Les éléments de structure d'un tableau suivants suffiront : table tr th et td. La CSS fournie contient les directives suivantes qui doivent suffire :
table {
border-collapse: collapse;
font-size: smaller;
width: 100%;
}
td, th {
border: 1px solid black;
padding: 3px;
}
Ajouter des liens + et - dans les colonnes Nom et Équipe pour pouvoir ordonner selon le nom ou l'équipe et de façon croisante ou décroissante. Réaliser les programmes nécessaires, comme ci-contre.
Question 2
Réaliser une fonctionnalité de recherche de personne. La recherche s'effectue sur le nom et cherche la chaine dans le nom. Créer un formulaire de recherche et la fonctionnalité de recherche. L'affichage des résultats peut, par exemple, reprendre le format utilisé à la question 1.
Formulaire de recherche
Résultats de recherche
Question 3
L'affichage de base de la fiche complète d'une personne est fourni. Modifier les programmes existants pour permettre l'ajout ou la modification d'une photo. La fiche complète doit alors afficher la photo si présente.
La table de base de données contient une colonne photo (vide par défaut). En revanche, les classes Ens* fournies ne gèrent absolument rien pour les photos. C'est à vous de le faire.
L'ergonomie et la présentation sont libres, donc aucune capture d'écran n'est proposée. Choisissez la présentation qui sera la plus agréable possible.
Archive de photos pour tester. Attention cette archive ne doit pas être mise dans votre répertoire de TP mais il s'agit de ressource extérieure.
Exercice 2 : Javascript
Exercice noté sur 6
L'exercice peut être réalisé avec ou sans mootools indifféremment.
On dispose d'une liste de livres décrite dans un tableau JavaScript. Les données de chaque livre sont au format JSON, sous la forme :
var catalogue = new Array();
catalogue['demain'] = {
"id": "demain",
"titre": "Demain",
"auteur": "Guillaume Musso",
"editeur": "XO Editions",
"isbn": "978-2845636224",
"couverture": "demain.jpg",
"parution": new Date(2013, 2, 28)
};
...
Chaque élément du tableau est donc un objet Javascript dont les propriétés sont accessibles avec l'opérateur . (point). Par exemple, le titre du premier élément du catalogue peut être obtenu en faisant
catalogue['demain'].titre
et il en est de même pour les autres propriétés.
La page web fournie exécute console.log(catalogue['demain']) pour visualiser la structure de données Javascript d'un livre.
Question 1
Une page HTML, dont le code source est donné, dispose dans la colonne de gauche d'une liste de livres dont la description est dans le catalogue (i.e. le tableau Javascript). Au clic sur le titre du livre une description détaillée apparait dans la zone d'identifiant detailsLivre.
Page de départ
Détails d'un livre
Réaliser le programme Javascript pour cette fonctionnalité.
Remarque : la page web fournie inclut le framework mootools, un fichier livres.js pour y écrire vos programmes, et une CSS que vous pouvez modifier si besoin.
Remarques : la date de parution est un objet Javascript de type Date. La documentation indique ses propriétés et méthodes. On pourra éventuellement utiliser la méthode format de l'objet Date de mootools.
Question 2
Une liste complémentaire de livres est stockée dans un tableau LivresEnPlus à indices numériques. Chaque élément du tableau a la même structure que précédemment.
Dans le menu gauche, un clic sur le lien Plus de livres... doit faire apparaître la liste de ces livres. Comme à la question 1, un clic sur le titre affichera les détails du livre.
Réaliser le programme Javascript pour cette fonctionnalité.
Remarque 1 : le parcours du tableau LivresEnPlus peut être réalisé avec une boucle for classique (la longueur d'un tableau est obtenue avec la propriété .length du tableau) ou la méthode each de mootools.
Remarque 2 : le programme peut compléter le tableau catalogue avec les livres en plus pour réutiliser les fonctionnalités de la question 1.