Projet commun aux modules Algorithmique et développement web (M2202), Intégration web (M2206) sur le développement d'un site web intéractif avec une mise en page soignée.
Ce projet consiste à faire un site web dynamique dans lequel les étudiants peuvent poster des messages sur les différentes séances de leur formation. On peut s'inscrire, ajouter des messages et réagir à d'autres messages.
Vous devrez donc utiliser HTML, CSS, JavaScript, PHP, jQuery et SQL (base de données).
Sujet
Le but de ce projet est de réaliser une plateforme sur laquelle les étudiants peuvent poster des messages sur leurs cours. Par exemple, on peut choisir le TD de réseaux du lundi 8 février et demander quel est le lien Zoom, quelle est la salle, y a-t-il un devoir à rendre, qu'est-ce qu'une connexion STK chiffrée à tunnels convolués ?
Le fonctionnement du site web peut ressembler à un serveur Discord sur lequel il y aurait un salon pour chaque séance, avec une navigation facile entre les différents salons.
Dans la suite, nous présentons les différentes pages du site avec leurs fonctionnalités.
Page d'accueil
La page d'accueil doit afficher les différentes séances de cours triées par ordre chronologique. Il doit y avoir au moins 10 séances. Pour chaque séance, on voit le nom, la date, l'enseignant et le nombre de messages. La couleur du conteneur permet de reconnaître le module, comme sur votre emploi du temps.
Un menu permet de choisir un module (par exemple, M2201 Culture scientifique) pour voir uniquement les séances de ce module. Ces séances filtrées peuvent être affichées sur la même page d'accueil (index.php) ou sur une autre page (par exemple, module.php) qui affiche n'importe quel module.
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 avatar, son nom d'utilisateur et un lien pour se déconnecter.
Quand l'utilisateur clique sur une séance de cours il est renvoyé vers la page de la séance.
Page d'inscription
Cette page contient un formulaire pour enregistrer un nouvel utilisateur.
Dans le formulaire d'inscription, demandez le nom, l'adresse e-mail étudiante, un mot de passe et un avatar. L'avatar est à choisir parmi une liste d'images ajoutées par vous-mêmes.
Validez ces données avant d'inscrire l'utilisateur : le mot de passe doit avoir une longueur minimum, l'adresse email doit être unique, etc. Une fois l'utilisateur s'est inscrit, ne lui demandez pas de se connecter, mais faites-le automatiquement et renvoyez-le vers la page d'accueil.
Si les données dans le formulaire de connexion ne sont pas correctes, renvoyez l'utilisateur vers le formulaire et affichez un message expliquant le ou les erreurs.
Page de connexion
Cette page contient un formulaire pour se connecter. Il suffit de renseigner son adresse email et son mot de passe.
Il faut valider que l'adresse email est enregistrée dans la base de données et que le mot de passe est correct. Si tout est bon, renvoyez l'utilisateur vers la page d'accueil. Sinon, renvoyez-le vers le formulaire avec un message d'erreur adapté.
Page d'une séance
La page d'une séance affiche les données de la séance, la liste de messages par ordre chronologique et, seulement si l'utilisateur est connecté, un formulaire pour poster un nouveau message. Les informations de la séance sont :
Code du module. Par exemple, M221
Nom du module. Par exemple, Anglais
Le type de séance : CM, TD ou TP
Le nom de l'enseignant. Par exemple, Anne Lesme
La date.
Sur chaque message il faut afficher :
L'avatar et le nom de l'auteur.
La date du message
Le contenu du message
Un bouton pour répondre à ce message (seulement si l'utilisateur est connecté)
Si ce message est une réponse à un autre message, le message originel avec un affichage bien différencié (comme WhatsApp ou Discord)
Toutes ces pages doivent avoir une structure et un style cohérent, avec des entêtes et des pieds de page identiques.
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 à Mme Hallabia. La date de rendu est ce même jour, le , 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 :
Devoir sur AMeTICE
Vous devrez rendre une archive appelée m2202-projet.zip ou m2202-projet.rar. Vous déposerez cette archive sur la page AMeTICE du module 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.
Un fichier de texte appelé README.txt avec l'adresse URL de votre site web sur le serveur et les coordonnées pour se connecter sur un compte déjà existant.
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.
Dépôt sur le 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.
Évaluation pour le module Algorithmique et développement web (M2202)
Coté serveur (PHP et bases de données), votre site web doit implémenter au moins les fonctionnalités suivantes :
Les parties en commun entre les différentes pages (entête, menu, pied de page) sont ajoutées avec la fonction include().
Le site web utilise les sessions pour gérer la connexion et pour connaître l'auteur d'un nouveau message.
Les informations sur les cours, messages et utilisateurs sont enregistrées dans trois tables sur la base de données.
Une requête SQL permet d'afficher toutes les séances ou seulement celles appartenant à un module choisi.
Pour chaque séance, les informations et les messages sont récupérés avec des requêtes SQL préparées.
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 : séances, utilisateurs et messages.
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)
Coté client (HTML/CSS/JavaScript), votre site web devra avoir les fonctionnalités suivantes :
Tous ces fichiers devront faire référence à une même feuille de style CSS. Toutes ces pages doivent avoir une structure et un style cohérent, avec des entêtes et des pieds de page identiques.
La page d’accueil de votre site doit afficher les différentes séances d’un cours. Vous pouvez les organiser sous formes des carrés ou d’une liste (selon votre choix).
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. Vous pouvez aussi ajouter des liens permettant d’aller directement aux commentaires originaux ou bien vers toutes les séances d’un module.
L’entête peut contenir un logo, un nom du site, des boutons pour s’enregistrer, se connecter et se déconnecter.
Le pied de page peut contenir les noms des développeurs, l’année, des liens vers les réseaux sociaux et un lien vers l’email 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. Par exemple, la copie de vos messages originaux sera en italique et plus petite.
Le design et l'animation sont très importants. Utilisez des animations JQuery afin de créer un menu/calendrier interactif. Par exemple, en cliquant sur une séance, un panneau sera affiché qui contient les informations suivantes : code du module, enseignant, date, type de séance (CM/TD/TP) et nombre de messages postés.
Les formulaires doivent être validés en utilisant JQuery.
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é et 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, boîtes de dialogue, événements)
3
Qualité de l'apparence visuelle, ergonomie, animations (diaporama, effets)
3
Tableaux, listes, images
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 :
Faites une pagination sur la page d'accueil. Affichez seulement les 30 derniers séances, avec des liens en bas de la page pour afficher les 30 suivantes (et précédentes, s'il y en a).
Affichez dans la page d'accueil le classement des dix étudiants les plus actifs (plus de messages écrits).
L'utilisateur peut marquer un message comme favori. Ainsi, il sera affiché sur la page d'accueil ou sur une page dédiée et accessible depuis le menu.
Les utilisateurs peuvent liker les messages. Chaque message affiche le nombre de likes, et sur la page d'accueil on retrouve les dix messages les plus likés.
Ajoutez une page de profil. On y retrouve le nom de l'utilisateur, une courte biographie et la liste de messages qu'il a posté. L'utilisateur voit une formulaire sur sa propre page pour modifier ses coordonnées. On retrouve la page d'un utilisateur en cliquant sur son nom dans un message dont il est l'auteur.
Donnez plus de choix pour l'avatar. L'utilisateur peut choisir un des avatar prédéfinis, ou insérer un lien vers une image.
Implantez un système de badges. Quand un utilisateur accompli certains buts (écrire 10 messages, avoir 20 réponses, recevoir 50 likes), des icônes sont ajoutés à son nom et sont visibles sur sa page utilisateur.
Un formulaire dans le menu permet de rechercher par mot-clé sur tous les messages postés.
Implantez un système de hastags (mots-dièse). Si un mot sur un message commence par dièse (#), il est affiché comme un lien vers une page qui affiche tous les messages avec ce hashtag.
Faites un espace administrateur. Il peut exister des comptes administrateur. L'administrateur peut ajouter une séance, la modifier, supprimer un message, etc. Dans sa page d'accueil, ou dans chaque page de séance, un menu permet de faire ces opérations.
Binômes
Les binômes pour les projets, et le liens vers leurs sites web, sont :
Combien de séances, utilisateurs et messages il faut ajouter dans le site web ?
Il faut ajouter assez de contenus pour bien apprécier le fonctionnement du site web. Si vous implantez uniquement les fonctionnalités de base, il faudrait au moins 10 séances, 3 utilisateurs et 4 messages dans chaque cours, mais ça dépendra de votre mise en page.
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 d'avatar, 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 tout inconvénient.
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).