Projet de M2202 / M2206

Ce projet combine les contenus des modules Algorithmique et développement web (M2202), Intégration web (M2206) et Bases de données (M2203).

Ce projet consiste à faire un site web dynamique avec un catalogue de films et de séries. On peut s'inscrire, ajouter des commentaires et des ponctuations.

Vous devrez donc utiliser HTML, CSS, JavaScript, PHP, jQuery et SQL (base de données).

Modalités des rendu

Le projet est à réaliser seul.

Lors de la dernière séance de TP du module Intégration web, le ~~14 mai~~ 24 mai, vous présenterez votre travail à Mme El-Khalfi. La date de rendu est ce même jour à minuit, donc vous aurez du temps pour faire des petites modifications pour tenir compte de ses remarques.

Vous devrez rendre une archive appelée m2202-projet.zip ou m2202-projet.rar. Vous déposerez cette archive sur la page AmeTICE de Algorithmique et développement web S2 le jour de la soutenance.

L'archive doit contenir :

Un rapport de 2 à 10 pages (en format PDF) appelé rapport.pdf. Ce rapport détaille votre travail, avec captures d'écran et explications, points forts, points faibles.
C'est l'endroit pour expliquer ce que vous avez fait, ce que vous n'avez pas fait, et pourquoi.
Le répertoire racine de votre site web dans un sous-répertoire appelé projet/.

En même temps, vous déposerez aussi votre site web sur le serveur web de l'IUT, dans un répertoire appelé m2202/projet/.

Sujet

Il faut réaliser un catalogue de films et séries en ligne. Vous pouvez vous inspirer de allocine.fr.

Contenus

Les éléments du site web sont des films ou des saisons de série. Pour une même série, on aura un élément indépendant pour chaque saison. Chaque élément contient les informations suivantes :

Une description : titre, année de sortie, durée, langue audio.
Au moins un genre : série télé, film action, film aventure, film policier, spectacle, etc.
Le réalisateur et la liste des acteurs principaux.
Un résumé.
Une photo de jaquette.
Ponctuation moyenne.
Liste de commentaires laissés par les utilisateurs.

Les films/saisons de séries appartiennent à une ou plusieurs rubriques : nouveautés, actuellement au cinéma, coffret collector, etc.

Page d'accueil

La page d'accueil doit afficher les films/saisons, avec pagination. Plusieurs pages de films/saisons doivent être disponibles dès le déploiement (vous devrez pré remplir la base de données).

Pour chaque élément, on voit une vignette qui permet de l'identifier (une image, le titre, l'année de sortie).

Un formulaire permet de rechercher par mot-clé sur les informations des éléments : titre, acteur, réalisateur, année, description, etc.

Un menu permet d'afficher les films/saisons de série dans chaque rubrique.

Un formulaire permet de s'inscrire ou de s'identifier.

Page dédiée élément (film/saison de série)

Quand on clique sur la vignette d'un élément, on voit sa page dédiée. Dedans, on voit toutes les informations de l'élément.

Espace utilisateur

Un visiteur peut s'inscrire sur le site web. Pour créer un compte, il faut donner un nom d'utilisateur, un mot de passe, et une adresse e-mail. Deux utilisateurs ne peuvent pas utiliser le même nom.

Quand on s'identifie, la page d'accueil affiche en plus les films qui sortiront bientôt au cinéma.

Dans chaque page dédiée élément, un formulaire permet de déposer un commentaire avec une note sur 5 points.

Espace administrateur

Il existe un compte spécial administrateur. L'identifiant est admin, et le mot de passe, mdp.

L'administrateur peut ajouter, modifier et supprimer des éléments. Dans sa page d'accueil, ou dans chaque page dédiée élément, un menu permet de faire ces opérations.

Évaluation pour le module Algorithmique et développement web (M2202)

Coté PHP et bases de données, votre site web doit implémenter au moins les fonctionnalités suivantes :

Les informations sur les films sont enregistrées sur une table de la base de données bien structurée.
Une requête SQL permet de faire la pagination des vignettes des films. Une requête différente charge les commentaires
Pour chaque élément, les commentaires et la note moyenne sont récupérés avec une requête SQL.
Protéger le site web des attaques XSS.
Le site web utilise des cookies pour se rappeler des identifiants de l'utilisateur.

La note du projet sera calculée avec ce barème :

Partie	Barème
Qualité du code PHP (fonctions, tableaux, indentation, noms des variables)	6
Conception de la base de données	2
Requêtes SQL	2
Validation des formulaires	6
Créativité	4

Évaluation pour le module Intégration web (M2206)

Ce site devra avoir les caractéristiques suivantes :

Il y aura au minimum six pages (donc six fichiers HTML, ou plus), faisant référence à une même feuille de style CSS. Les pages web auront la même structure : menu à gauche, entête, pied de page, etc.
Un film est un support visuel, donc la page d'accueil de votre site devra le refléter : rajoutez la bande-annonce en plein écran à l'entrée de votre site (ou par défaut, son affiche) avec un diaporama des affiches des nouveaux films, une musique de fond, etc.
Le design et l'animation sont très importants. Rajoutez un logo, de jolies images.
Ces pages comporteront un ensemble de liens hypertexte permettant une circulation entre l'ensemble des pages, et aussi à l'intérieur d'une page plus longue.
Un lien vers l'extérieur.
Un lien mailto : qui permettra de vous contacter.
Les pages devront afficher des images, et utiliser des couleurs.
Le texte de vos pages devra être mis en forme en utilisant la feuille de style pour :
- jouer sur les alignements de paragraphe et de texte (gauche, droite, centré, justifié)
- jouer sur les attributs de caractères (gras, italiques, etc.), polices et tailles différentes
Vous devrez également créer un ou plusieurs tableaux pour présenter vos données.
Les fichiers du site devront être rassemblés à l'intérieur d'un répertoire (dossier) appelé projet. La consultation des pages devra pouvoir se faire sans problème à partir de la première page, appelée index.php, et ce sur n'importe quelle machine : attention à vos liens, à l'emplacement et au format des fichiers, et à l'encodage des caractères ! Vérifiez par vous-même, en recopiant votre dossier à des emplacements différents, que tout fonctionne bien.

En plus des points accordés pour les éléments utilisés, il y aura des points supplémentaires pour la présentation générale du site (lisibilité, esthétique).

Partie	Barème
Qualité du code HTML (lisibilité du code, balises utilisés)	2
Qualité du code CSS	2
Événements avec JavaScript	3
Qualité de l'apparence visuelle, ergonomie, animations (diaporama, effets)	3
Lien internes et externes (entre les pages, à l'intérieur d'une page, un lien mailto, un lien externe)	2
Tableaux, listes, images, vidéo, audio	2
Création de formulaire	2
Interaction avec l'utilisateur (boutons, boites de dialogues, événements)	2
Créativité	2

En plus

Les fonctionnalités demandées sont la base pour ce projet. Vous pouvez ajouter des nouvelles fonctionnalités. Par exemple :

L'administrateur reçoit une notification pour chaque nouveau commentaire, et il peut le supprimer.
Les genres peuvent être de liens cliquables, qui affichent tous les éléments dans ce genre.
Les acteurs et réalisateurs peuvent être de liens cliquables, qui affichent une description et tous les éléments qui le contiennent.
Envoyer un e-mail de confirmation pour la création d'un compte utilisateur.
Permettre à l'utilisateur de modifier les données de son compte.