TP création web. Galerie d`images.

TP
SRC2
Web avancé
TP création web. Galerie d’images.
Ce TP s’étend sur 4 séances. A la fin de chaque séance vous devez mettre sur ecampus ce que vous avez réalisé,
accompagné d’un fichier texte (.txt) où
– Vous marquez ce qui a été fait à la maison depuis la dernière séance, s’il y a lieu.
– Vous laissez un espace.
– Puis vous énumérez ce que vous avez réalisé durant la séance.
Un compte-rendu détaillé et structuré devra être rendu à la fin du projet. Le compte-rendu comprendra au moins :
– Une partie introductive, où vous présentez votre site web : fonctionnalités implémentées, comment avez vous
choisi d’organiser votre code, etc...
– Une partie technique décrivant ce que vous avez implémentés :
– Faites une sous-partie par fonctionnalité implémentée (identification, affichage des images, commentaires, modules complémentaires, etc...) ;
– pour chaque sous-partie décrivez les fonctions ou classes que vous avez implémentées.
But du TP
Ce TP est le prolongement du dernier TP fait en PHP : vous devez repartir de votre code du TP3 du semestre 1. Il
s’agit donc de créer une page web permettant d’afficher des galeries d’images prises dans différents pays. Les images sont
stockées, comme dans le TP3, dans une base de données : la table images contient (au moins) cinq champs (id_image,
titre, continent, pays et également un champ utilisateur qui indique quel utilisateur a posté cette image. Si
vous souhaitez classer des images suivant d’autres critères que par continent et par pays, inventez deux autres tags de
votre choix (Dessins/peinture et thème de l’oeuvre par exemple...). Veillez à charger des photos de taille raisonnable !.
Eléments à réaliser
Gestion des utilisateurs
Il
–
–
–
y a trois types d’utilisateurs qui peuvent naviguer sur notre site :
Les utilisateurs publics n’ont pas à s’enregistrer. Ils peuvent seulement consulter les images et les commentaires.
Les utilisateurs enregistrés peuvent également écrire des commentaires. Ils doivent s’identifier pour cela.
Les utilisateurs artistes peuvent uploader des photos, qui seront affichées dans la section correspondante. Ils
doivent bien évidemment s’enregistrer et être reconnus comme artiste pour que s’affiche le formulaire permettant
d’uploader les images.
– On pourrait également imaginer des utilisateurs administrateur qui ont le droit de modifier le site (ils ont accès
au back-office, la partie administration du site), mais nous ne le ferons pas.
Vous devez donc rajouter des champs dans la table utilisateurs !
Gestion de l’upload des images
Cette partie a déjà dû être traitée dans le TP3. Si vous avez besoin d’aide et de documentation, consultez :
http ://fr.php.net/manual/fr/features.file-upload.php. Seul un utilisateur enregistré comme artiste peut
charger ses photos dans la base.
Gestion de l’affichage
• Page d’accueil : 6 images de votre choix (ou mieux : 6 images tirées au hasard).
• Faire un formulaire permettant de choisir les images selon :
– Leur(s) thème(s) (ex : Europe, France, ...)
– Les utilisateurs qui les ont postées.
– Un peu de javascript : vous aurez donc deux listes au moins, l’une pour choisir le continent, l’autre pour
choisir le pays (et une troisième, éventuellement, pour l’utilisateur, à moins que vous ne préfériez mettre une
boîte de texte). Il faudra que les éléments de la deuxième liste, affichant les pays, se mette à jour en fonction
de l’item sélectionné sur la première liste. Pour cela vous pouvez utilisez un attribut onChange sur la première
liste, qui appelle une fonction javascript chargée de changer les items de la seconde liste.
• S’il y a plus de six images, il faudra faire des boutons suivant/précédent permettant d’afficher les 6 images
suivantes/précédentes.
TP
SRC2
Web avancé
• Lorsque l’on clique sur une image, celle-ci devra s’agrandir. Vous pourrez récupérer des scripts javascript (la
lightbox par exemple) pour les effets d’affichage. Consultez par exemple :
http ://www.huddletogether.com/projects/lightbox/ ou cherchez une lightbox fonctionnant avec jquery
si vous voulez quelque chose de plus léger.
Mettre en place un système de commentaires
Les utilisateurs enregistrés auront la possibilité de laisser des commentaires : il y aura donc en bas de page un lien
voir les commentaires qui redirigera vers la page de commentaire du pays concerné. Les commentaires peuvent être
gérés à l’aide de fichiers : pour chaque commentaire ajouté, une ligne dans un fichier sera ajoutée ; la page affichant
les commentaires va parcourir le fichier et afficher les commentaires un par un. Vous pouvez aussi ajouter une table
commentaires dans la base de données. Le formulaire permettant d’ajouter un commentaire ne sera affiché que si
l’utilisateur est enregistré.
Si vous en avez le temps, gérez également la suppression des commentaires, autorisée lorsque l’on est un utilisateur
artiste. Vous indiquerez clairement dans le rapport vos choix d’implémentation pour le système de commentaires...
Sécuriser son application
Nous allons voir en cours différentes attaques que peut subir un site web. Vous devez protéger votre site contre ces
attaques. Je ne dois pas connaître les mots de passe que vous avez attribué aux utilisateurs de votre base de données !
J’essaierai d’attaquer vos pages en utilisant les attaques décrites en cours, vos sites doivent résister.
Rajouter des modules
Si vous avez fini le reste :
1. flux RSS : mettez en place un flux RSS indiquant la liste des dernières images insérées dans votre base,
ainsi que les mots-clé (continent, pays, utilisateur par exemple) qui leur sont associés. Un flux RSS est un
fichier xml ; chacun de ses éléments doit avoir un identifiant unique. Ce fichier XML contient la description
des derniers ajouts faits sur votre site. D’autres sites peuvent charger ce fichier et l’analyser. L’API DOM (par
exemple) fournit des fonctions permettant de charger, lire, ou écrire des fichiers XML de façon très simple
(http ://fr.php.net/dom). Consultez également http ://ghostdogpr.developpez.com/articles/rss/ ou encore l’article wikipedia http://fr.wikipedia.org/wiki/Really_Simple_Syndication.
2. géolocalisation : l’api google http ://google.com/apis/maps/ permet d’utiliser les capacités de cartographie
du site http ://maps.google.com à distance sur un autre site. Pour ce faire :
(a) Inscrivez vous sur la page http ://google.com/apis/maps/ pour récupérer une clef (API key). Il faudra
indiquer l’URL http ://venus.src.iut-velizy.uvsq.fr/VotreLogin.
(b) En vous inspirant des exemples de la page http://google.com/apis/maps/documentation/#Examples
créez une page dans laquelle on pourra :
i. Naviguer dans une carte,
ii. utiliser un pointeur pour géolocaliser une position,
iii. stocker les coordonnées de ce pointeur pour géolocaliser une photo.
Produit final
L’affichage, l’upload, l’identification des différents utilisateurs devra absolument fonctionner, ainsi que les formulaires permettant d’afficher les images suivant les mots-clefs choisis par l’utilisateur. Votre application devra être
sécurisé (les données venant de l’utilisateur vérifiées...). Vous aurez utilisé un peu de javascript, pour réactualiser
dynamiquement les listes déroulantes et pour mettre en place une lightbox par exemple. Tout ce qui est aspect du site
sera géré à l’extérieur, dans un (ou plusieurs) fichier .css.
Les élèves les plus à l’aise auront peaufiné leur système de commentaire et mis en place des modules complémentaires ; l’énoncé vous en propose deux (géolocalisation et flux RSS), mais vous pouvez avoir d’autres idées ! Soyez
créatifs !
Les points attribués pour le compte-rendu ne seront pas négligeables ! Votre compte-rendu doit absolument être
structuré en parties et sous-parties ! Le compte-rendu doit être éditable (pas de pdf). Incluez des captures d’écran. Ne
commentez pas, dans le compte-rendu, la moindre de vos lignes ! Il faut être clair et concis ! Le code final sera rendu
à part. Vous indiquerez une adresse web où je peux tester votre site (cela pourra être sur venus bien sûr).