SRC2 TP 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é etstructuré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, mo- dules 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 tableimagescontient (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 detaille raisonnable !.
Eléments à réaliser
Gestion des utilisateurs
Il y a trois types d’utilisateurs qui peuvent naviguer sur notre site :
– Les utilisateurspublicsn’ont pas à s’enregistrer. Ils peuvent seulement consulter les images et les commentaires.
– Les utilisateursenregistréspeuvent également écrire des commentaires. Ils doivent s’identifier pour cela.
– Les utilisateursartistes peuvent uploader des photos, qui seront affichées dans la section correspondante. Ils doivent bien évidemment s’enregistrer et être reconnus commeartistepour que s’affiche le formulaire permettant d’uploader les images.
– On pourrait également imaginer des utilisateursadministrateurqui 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 tableutilisateurs!
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 attributonChangesur 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 boutonssuivant/précédent permettant d’afficher les 6 images suivantes/précédentes.
SRC2 TP Web avancé
• Lorsque l’on clique sur une image, celle-ci devra s’agrandir. Vous pourrez récupérer des scripts javascript (la lightboxpar 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 commentairesqui 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’ar- ticle wikipediahttp://fr.wikipedia.org/wiki/Really_Simple_Syndication.
2. géolocalisation :l’api googlehttp ://google.com/apis/maps/permet d’utiliser les capacités de cartographie du sitehttp ://maps.google.com à distance sur un autre site. Pour ce faire :
(a) Inscrivez vous sur la pagehttp ://google.com/apis/maps/ pour récupérer une clef (API key). Il faudra indiquer l’URLhttp ://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 formu- laires 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émen- taires ; 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 survenus bien sûr).
