TP noté n°2

2012-2013

Technologies Internet

Jean-Marc LecarpentierHervé Le Crosnier

Enseignement des technologies du Web

 

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

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 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

Arborescence exercice 1

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
Accueil
Détails d'une personne
Détails d'une personne

Travail à réaliser

Les questions sont indépendantes.

Liste complète

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;
}
 
Liste complète triée par équipe décroissante

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
Formulaire de recherche
Résultats 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
Page de départ
Détails d'un livre
Affichage des 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.

Affichage des titres des livres en plus

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.