TP noté n°1

2012-2013

Technologies Internet

Jean-Marc LecarpentierHervé Le Crosnier

Enseignement des technologies du Web

 

TP noté n°1

2012-2013

Mise en place du TP noté

Le répertoire de travail /users/NUMETU/www-dev/technosWebTp1_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 technosWebTp1_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 technosWebTp1_2013/ sera rendu non accessible en écriture par les administrateurs système jusqu'à ce que le TP soit corrigé.


Exercice 1 : HTML-CSS

Exercice noté sur 10

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 visuellement identique au modèle n'est pas nécessairement suffisant. L'adéquation des balises utilisées en regard de la page à présenter sera aussi un critère de notation.

Modèle

Capture d'écran de la page

Arborescence

Vous réaliserez le travail dans le répertoire /users/numetu/www-dev/technosWebTp1_2013/exo1/ sur le serveur web dans lequel vous utiliserez l'arborescence suivante (déjà créée) :

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

Informations complémentaires

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

Taille des images :

  • les images de la colonne de droite ont une largeur de 250 px
  • les images de présentation des vidéos sont de 200x122px (elle doivent apparaître en images de fond, car elles ne sont pas significatives en elles-mêmes)

Les images des vidéos sont incluses dans des liens qui renvoient sur les pages correspondantes de YouTube (url fournis dans le fichier des textes)

Evaluation

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

  • page répondant au cahier des charges
  • pages générées validées en HTML5
  • structuration et qualité du code HTML5 et CSS

Exercice 2 : PHP

Exercice noté sur 10

Introduction

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.

Présentation de l'exercice

Une application permet de lister des morceaux musicaux. Pour chaque morceau, on dispose des informations suivantes :

  • artiste
  • titre du morceau
  • durée en secondes
  • album (si le titre figure dans un album)
  • éventuellement une note sur 5
  • date d'insertion du morceau dans le site

Ces informations sont contenues dans une table de base de données. Le fichier exo2/config/dump_bd.sql contient un dump de cette table dont la structure est la suivante :

mysql> desc tpNote1;
+---------+--------------+------+-----+---------+-------+
| Field   | Type         | Null | Key | Default | Extra |
+---------+--------------+------+-----+---------+-------+
| id      | varchar(255) | NO   | PRI | NULL    |       |
| artiste | varchar(255) | NO   |     | NULL    |       |
| titre   | varchar(255) | NO   |     | NULL    |       |
| duree   | int(11)      | NO   |     | NULL    |       |
| album   | varchar(255) | NO   |     | NULL    |       |
| note    | int(11)      | NO   |     | NULL    |       |
| dateIns | date         | NO   |     | NULL    |       |
+---------+--------------+------+-----+---------+-------+

On souhaite réaliser les fonctionnalités suivantes :

  • lister les morceaux présents en triant par artiste puis par album ;
  • obtenir les détails d'un morceau donné ;
  • lister les artistes, leurs albums et titres ;
  • modifier la note d'un morceau.

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 présentés en CM et mis en oeuvre en TP (architecture, programmation objet, délégation, etc).

Question 1 (2 points)

Réaliser l'affichage de la page d'accueil qui affiche les 5 derniers morceaux présents.
Liste des 5 derniers titres


Question 2 (2 points)

À partir de la liste des morceaux, un lien sur un morceau permet d'afficher les détails. Réaliser cette fonctionnalité. Remarque : la fonction gmdate de PHP permet de transformer des secondes en minutes et secondes par exemple.
Détails d'un morceau


Question 3 (3 points)

Dans le menu gauche, un lien "Artistes" permet d'afficher la liste des artistes et leurs morceaux triés par album. Réaliser cette fonctionnalité.
Liste des artistes, albums et titres


Question 4 (3 points)

Sur la page des détails d'un morceau, on veut pouvoir modifier sa note. Réaliser cette fonctionnalité.
Détails d'un morceau avec liens de modification
Note modifiée