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. 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 de rendu

Le projet est à réaliser en binôme.

Lors de la dernière séance de TP du module Intégration web, vous présenterez votre travail à M. Abouelaziz. La date de rendu est ce même jour, le 19 mai 2020 à 23h, donc vous aurez du temps pour faire de petites modifications pour tenir compte de ses remarques.

Chaque heure de retard vous enlèvera 5% de la note de ce projet.

Vous devez rendre votre projet par deux voies :

AMeTICE

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.

L'archive doit contenir :

Un rapport de 5 à 15 pages (en format PDF) appelé rapport.pdf. Ce rapport détaille votre travail, avec captures d'écran et explications, points forts, points faibles. Vous trouverez plus de consignes dans la section Rapport de ce document.
Le répertoire racine de votre site web dans un sous-répertoire appelé projet/.
Le contenu de votre base de données, exporté dans un fichier SQL. Ne modifiez pas le nom du fichier donné par PhpMyAdmin, qui est le même que votre base de données.

Serveur web

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/. La page d'accueil doit donc être https://a-pedagoarles-mmi.aix.univ-amu.fr/identifiant/m2202/projet/index.php

On corrigera votre site web à partir de cette URL, donc il doit marcher correctement.

Sujet

Le but de ce projet est de réaliser un catalogue de films en ligne. Vous pouvez vous inspirer d'AlloCiné ou IMDb.

Page d'accueil

La page d'accueil doit afficher les films. Il doit y avoir au moins 15 films. Pour chaque film, on voit une vignette qui permet de l'identifier (avec une image, le titre, l'année de sortie).

Un menu permet d'afficher les films triés par rubrique (genre, dernières sorties, les mieux votés, les plus détestes…).

Si l'utilisateur n'est pas connecté, il voit dans ce même menu un lien pour s'inscrire ou se connecter. S'il est connecté, alors il voit son nom d'utilisateur et un lien pour se déconnecter.

Page d'inscription ou de connexion

Faites deux pages avec de formulaires pour s'inscrire ou pour se connecter dans le site web.

Pour le formulaire d'inscription, faites une validation des données entrées : le mot de passe doit avoir une longueur minimum, le nom d'utilisateur doit être unique et pas trop long, l'adresse e-mail doit être valide, etc. Une fois l'utilisateur s'est inscrit, ne lui demandez pas de se connecter, mais faites-le automatiquement.

Si les données dans le formulaire de connexion ne sont pas correctes (le nom d'utilisateur ou le mot de passe sont incorrectes), renvoyez l'utilisateur vers le formulaire et affichez un message disant ce qui ne va pas.

Page d'une rubrique

Cette page est très similaire à la page d'accueil, mais elle n'affiche que les films appartenant à une rubrique.

Page d'un film

Quand on clique sur la vignette d'un film dans la page d'accueil, on voit sa page dédiée avec toutes ses informations :

Une description : titre, année de sortie, durée, langue.
Au moins un genre : comédie, drame, action, historique, science-fiction, etc.
Le réalisateur et la liste des acteurs principaux.
Un résumé.
Une photo de jaquette.
La ponctuation moyenne donnée par les utilisateurs.
La liste de commentaires laissés par les utilisateurs, triés chronologiquement.

De plus, si un utilisateur est connecté, alors il voit aussi un formulaire pour déposer un nouveau commentaire et une note sur 5 points.

Toutes ces pages doivent avoir une structure et un style cohérent, avec des entêtes et des pieds de page identiques.

É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 d'afficher les films dans la page d'accueil et dans les pages des rubriques.
Pour chaque film, ses informations, ses commentaires et sa note moyenne sont récupérés avec des requêtes SQL préparées.
Le site web utilise des cookies pour se rappeler des identifiants de l'utilisateur et de sessions pour qu'il puisse se connecter.

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

Partie	Barème
Qualité du code PHP. Évitez les répétitions dans le code, utilisez de fonctions et de tableaux pour simplifier le code, indentez proprement, utilisez des noms de variables pertinents, expliquez votre code avec de commentaires.	6
Conception de la base de données. Liez correctement les différents éléments du site web : films, commentaires, utilisateurs.	2
Requêtes SQL. Bien préparées et formatées, comme vu en cours.	2
Validation des formulaires. Tous les cas doivent être traités.	4
Créativité. En plus des fonctionnalités de base, allez plus loin. Vous pouvez vous inspirer des idées dans la section Autres fonctionnalités de ce document.	6

É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 PHP contenant le code HTML/CSS/JavaScript. Tous ces fichiers devront faire 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. Utilisez des animations JQuery ou CSS sans en abuser.
Ces pages comporteront un ensemble de liens hypertexte permettant une circulation fluide entre l'ensemble des pages ainsi comme des liens vers les différentes sections de la page si elle est longue.
Un lien mailto : qui permettra de vous contacter dans la page de contact.
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. Attention : les tableaux sont utilisés pour organiser de l'information tabulaire qui reste toujours ensemble. Elles ne doivent pas être utilisées pour structurer la page.
Très important : La page doit être responsive. En principe, vous devez utiliser uniquement CSS de base, pas de librairies telles que Boostrap. Attention, si vous utilisez une librairie, vous devrez expliquer plus largement dans le rapport les mécanismes CSS utilisés par la librairie pour structurer et rendre la page responsive.
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)	3
Qualité du code CSS	3
Événements avec JQuery/Javascript : interaction avec l'utilisateur (boutons, boites de dialogues, événements)	3
Qualité de l'apparence visuelle, ergonomie, animations (diaporama, effets)	3
Tableaux, listes, images, vidéo, audio	2
Création et validation du formulaire	2
Responsive	4

Le rapport

Le rapport est un support essentiel de votre projet. C'est la base pour l'évaluer, et votre chance pour valoriser tout votre travail.

Sa longueur doit être de 5 à 15 pages et il doit se concentrer sur la partie PHP. Parmi les sections, on doit trouver une introduction, une conclusion avec les points forts et les points faibles et une bibliographie.

Expliquez bien les parties de votre code qui nécessitent des explications, en plus des commentaires dans le code. Vous pouvez accompagner ces explications par des captures d'écran, mais précisez toujours le nom du fichier et le numéro de ligne de chaque partie.

Si vous utilisez une ressource externe, précisez-le avec le plus de détails possible. Si par exemple vous faites la validation d'un formulaire en adaptant le code d'un forum ou d'une vidéo sur YouTube, donnez l'URL exacte et expliquez ce que vous avez apporté.

Autres fonctionnalités

Les fonctionnalités demandées sont la base pour ce projet. Vous pouvez ajouter de nouvelles fonctionnalités, par exemple :

Un espace administrateur. Il peut exister un compte spécial administrateur. L'administrateur peut ajouter, modifier et supprimer des films avec de formulaires. Dans sa page d'accueil, ou dans chaque page de film, un menu permet de faire ces opérations.
Un formulaire dans le menu permet de rechercher par mot-clé sur les informations des films : titre, acteur, réalisateur, année, description, etc.
Dans les pages de films, vous pouvez faire des liens cliquables sur les noms des réalisateurs et acteurs vers une page avec une photo, une biographie, une liste d'autres films, etc.
Ajouter une page de profil, accessible depuis le menu, pour permettre à l'utilisateur de modifier ses coordonnées. Aussi, vous pouvez afficher la liste de commentaires de cet utilisateur.
L'administrateur reçoit une notification pour chaque nouveau commentaire, et il peut le supprimer.
Envoyer un e-mail de confirmation pour la création d'un compte utilisateur.
Permettre à un utilisateur enregistré de marquer ses films favoris pour qu'ils soient affichés dans la page d'accueil, ou même de créer des playlists.
Effacer les gros mots dans les commentaires avec une fonction.

Binômes

Les binômes pour les projets, et le liens vers leurs sites web, sont :

Laurent Boschetti – Tom Postel [lien]
Axel Pelassa – Gabriel Toth [lien]
Mathieu Oliver – Loris Perret [lien]
Hugo Montagné – Renaud Pessort [lien]
Julien Tonnere – Christophe Vergnet [lien]
Jules Salle – Maël Sauvage [lien]
Léa Ben Soussan – Guillaume Rorive [lien]
Jérôme Lelievre – Judicaël Terrisse [lien]
Léa Marquez – Charlotte Weibel [lien]
Andrew Heng – Guillaume Lara [lien]
Jules Rabaud – Alexandre Santin [lien]
Samuel de la Rosa – Lucas Molina [lien]
Youssef Elashry – Tom Sebban [lien]

Auriane Geaie-Serié – Hajare Hezziou [lien]
Hugo Barbier – Emma Gondin [lien]
Orlane Brisard – Océane Firrincieli [lien]
Yo-han Floch – Bryan Griet [lien]
Paul Fesquet – Jolan Foureys [lien]
Nathan Brégaint – Eric Philipe Charbonnier [lien]
Théo Berton – Julien Camilloni [lien]
Lou Carli – Pablo Claustre [lien]
Fanny Lambert – Paul Chauvat [lien]
Andy Cavenel – Thibault Dailliez [lien]
Ange Mazollier – Floryss Rubechi [lien]
Axel Milanini – Hugo Tisserand [lien]
Emma Manade – Solal Sentis [lien]
Valentin Martins [lien]

F.A.Q.

Mon site web marche bien sur mon ordinateur, mais il ne marche pas sur le serveur web de l'IUT. C'est grave ?: Oui, c'est grave. Le site web doit être complètement fonctionnel sur le serveur web. Vérifiez que vous vous connectez bien à la base de données du serveur, et que vos images s'affichent correctement.
Je n'ai pas réussi à implémenter quelques fonctionnalités. Je vous envoie les fichiers PHP, même s'ils ne marchent pas ?: Non. Vous avez le temps de tout faire. Vous pouvez toujours poser de questions à vos enseignants, donc il est inutile d'envoyer de fichiers qui ne marchent pas.
Comment structurer les fichiers dans le projet ?: Faites plusieurs sous-répertoires pour mieux classer vos fichiers : un dossier pour les images, un dossier pour les feuilles de style CSS, un autre pour le JavaScript, etc.
Si je n'arrive pas à rendre mon projet sur AMeTICE, puis-je l'envoyer par mail ou WeTransfer ?: Non, il faut absolument le déposer sur AmeTICE avant la date de rendu. Soumettez-le donc assez en avance pour éviter la pénalisation.
Comment exporter la base de données ?: Ce tutoriel vous explique comment. Il suffit de faire 3 clics : sur la base de données de votre projet, sur Exporter et sur OK (tout en bas).