Un avertissement lié à la réécriture d'url, et à l'accès à la documentation se trouve en bas du readme, n'oublier pas de le lire.
Ce site, développé avec Symfony 6.4, permet d'accéder aux vidéos d'auto-formation proposées par une chaîne de médiathèques et qui sont aussi accessibles sur YouTube.
Cet atelier a été réalisé pour ajouter la partie back-office et quelques fonctionnalités supplémentaires à la web app MediatekFormation. Voilà le dépôt GitHub d'origine sur lequel cet atelier est basé : https://github.com/CNED-SLAM/mediatekformation
Vous y trouverez son readme, qui contient la présentation complète de l'application d'origine.
Elle contient désormais ces nouvelles fonctionnalités :
Voici les 7 nouvelles pages qui sont liées aux différents cas d'utilisations:
Cette page est basée sur l'accueil du front-office, la différence réside dans son contenu et surtout dans l'header et le footer qui l'utilisent. En effet, la page "baseback.html.twig" est utilisée dans toutes les pages du back-office et donc ce nouveau footer et header.
La web app contient désormais un lien pour accéder à la documentation technique : ce lien est présent en bas de chaque page, excepté les pages de la documentation technique.
L'header du back-office contient les nouveaux boutons suivant:
• Gestion des formations
• Gestion des playlists
• Gestion des catégories
• Partie Front : qui nous permet de passer à la partie front-office sans pour autant se déconnecter.
• Se déconnecter : qui nous permet de nous déconnecter.
Le footer contient le texte "Section Admin" pour bien faire la différence avec le front sur toutes les pages du back-office.
Cette nouvelle page est entièrement copié de la page du front-office qui liste les formations, donc les tris et les filtres le sont aussi, vous pouvez trouver la documentation de la page originale sur le dépôt donné plus haut.
Comme on peut le voir la différence est plutôt flagrante, la miniature de chaque formation a disparu, elle a était remplacé par 2 boutons, les boutons "modifier" et "supprimer". Il y'a également un nouveau bouton dans l'en-tête de la liste, le bouton "ajouter".
De plus, si l'un des boutons "supprimer" est cliqué, alors une boîte de dialogue de confirmation s'ouvrira et si il y'a confirmation, la formation sera supprimé :
Si le bouton "modifier" est cliqué, alors une autre page, qui est un formulaire de modification, s'ouvrira.
De même si on clique sur le bouton "ajouter", un formulaire d'ajout s'ouvrira.
Cette nouvelle page se base également sur celle du front-office, les filtres et tris fonctionnent également de la même manière.
Cependant, le bouton "voir détail" du front-office n'est plus présent, il a était également remplacé par les boutons "modifier" et "supprimer".
Il est précisé dans le cahier des charges qu'il devrait nous être impossible de supprimer une playlist si elle contient des formations, cela a était retranscrit dans le code php mais également dans la vue directement.
En effet, on observe que les boutons "supprimer" sont pour la plupart grisés. La raison est que ces playlists contiennent au moins une formation, seul la playlist "playlist test" n'en contient aucune.
Le bouton "supprimer" grisé ne ramène à rien, c'est en quelque sorte une "coquille vide" :
On peut également remarquer que la colonne "nb de formations" a été ajouté, il faut savoir que c'est aussi le cas sur le front-office désormais.
De plus, les boutons "modifier", "supprimer" et "ajouter" agisse de la même manière que la page de gestion des formations, mais cette fois adapté pour les playlists.
Cette fois, je n’avais pas de page listant les catégories provenant du front à copier, j’ai donc repris la page des playlists pour gagner du temps.
Je l’ai ensuite adaptée en ne conservant que deux colonnes : une pour le nom de la catégorie et une autre pour le bouton de suppression.
On peut aussi noter que, comme pour les playlists, le bouton se grise si des formations sont rattachées à la catégorie.
On peut également observer que le formulaire d'ajout n'est pas une page séparée ici.
En effet, comme précisé dans le cahier des charges, le formulaire d'ajout de catégorie est directement inclus à la page.
Il est aussi possible de trier ou filtrer les catégories listées sur leur nom avec l'aide des boutons "<" et ">" ainsi qu'à l'aide de la zone de texte de filtre.
L'ajout de formation se base sur la même page, la seul différence est que les valeurs ne sont pas préremplies et qu'un texte "Nouvelle formation" est présent.
On accéde à cette page après avoir cliqué sur l'un des boutons "modifier" de la liste des formations de la page "gestion des formations".
Cette page contient différent champs lié aux données d'une formation :
• Le titre
• La description
• La date
• La playlist
• Les catégories
Ces champs sont préremplies avec les valeurs de la formation choisi :
On a également un bouton "Enregistrer" qui nous permettra d'enregistrer nos modifications ou d'ajouter la nouvelle formation à la base de données.
Il faut également savoir que la sauvegarde n'aura pas lieu si un champ requis est vide, ou si une contraine n'est pas respecté.
Par exemple, on ne peut pas choisir une date qui dépasse celle d'aujourd'hui, sous peine d'avoir un message d'erreur.
L'ajout de playlist se base sur la même page, la seul différence est que les valeurs ne sont pas préremplies et qu'un texte "Nouvelle playlist" est présent.
La modification d'une playlist est très similaire à la modification de formation.
En effet, on peut accéder à cette page après avoir cliqué sur l'un des boutons "modifier" de la liste des playlists de la page "gestion des playlists".
Cette page contient différents champs lié aux données d'une playlist :
• Le nom
• La description
• Les formations dans la playlist
Ces champs sont préremplies avec les valeurs de la playlist choisi :
On a également un bouton "Enregistrer" qui nous permettra d'enregistrer nos modifications ou d'ajouter la nouvelle playlist à la base de données.
Il faut également savoir que la sauvegarde n'aura pas lieu si un champ requis est vide.
Cette page nous permet de nous authentifier à la partie back-office de l'application.
On y voit 2 champs, un pour le login (nom d'utilisateur du compte admin) et un pour le mot de passe (mot de passe du compte admin).
Si on entre le mauvais login ou le mauvais mot de passe on obtiendra une erreur "Invalid credentials":
Le header contient désormais les nouveaux boutons :
• Partie Back
• Se déconnecter : pour se déconnecter lorsqu'on est connecté.
Le footer, quant à lui, contient désormais un lien vers la documentation du site.
La base de données n'a pas était tant modifiée.
Le seul changment notable est qu'on a une nouvelle table, la table "user", qui contient les profils ayant accès à la partie back-office :
Cette table a une structure de deux colonnes, un pour le login et l'autre pour le mot de passe haché en bcrypt.
- Vérifier que Composer, Git et Wampserver (ou équivalent) sont installés sur l'ordinateur.
- Il faut que WampServer ainsi que composer utilise une version de PHP supérieur ou égal à la version 8.1, donc par exemple la version 8.1.31, voilà comment modifier la version de PHP utilisé par composer : https://stackoverflow.com/questions/46986139/how-to-change-php-version-used-by-composer
- Télécharger le code et le dézipper dans www de Wampserver (ou dossier équivalent) puis renommer le dossier en "mediatekformation".
- Ouvrir une fenêtre de commandes en mode admin, se positionner dans le dossier du projet et taper "composer install" pour reconstituer le dossier vendor.
- Dans phpMyAdmin, se connecter à MySQL en root sans mot de passe et créer la BDD 'ghymyxex_mediatekformation'.
- Récupérer le fichier ghymyxex_mediatekformation.sql en racine du projet et l'utiliser pour remplir la BDD (si vous voulez mettre un login/pwd d'accès, il faut créer un utilisateur, lui donner les droits sur la BDD et il faut le préciser dans le fichier ".env" en racine du projet).
- De préférence, ouvrir l'application dans un IDE professionnel. L'adresse pour la lancer est : http://localhost/mediatekformation/public/index.php
Désactiver le module "rewrite_module" d'Apache sur Wampserver. En fait, le fichier .htaccess agissant différemment sur l'hébergeur PlanetHoster j'ai choisi de ne pas utiliser la réécriture en local pour ne pas devoir avoir un fichier .htaccess différent pour la partie local, donc laisser le fichier dans le projet comme tel, la réécriture d'url ne semble que fonctionner sur le serveur distant.
Donc l'url n'est absolument pas comme sur le serveur distant,
pour la page des formations on a en local : http://localhost/mediatekformation/public/index.php/formations
Alors que sur le serveur distant on a : https://wassimeeymediatekformation.worldlite.fr/formations
! De plus, le bouton amenant à la documentation ne fonctionne pas en local (mauvais chemin mais ça fonctionne sur le site distant à cause du problème que je viens de citer) donc pour y accéder passer par cette url: http://localhost/mediatekformation/public/doc/
- Accéder à l'URL suivante: https://wassimeeymediatekformation.worldlite.fr/
- Essayer de parcourir le site distant
- Se connecter avec le login et le mot de passe du compte admin pour pouvoir accéder au back-office.
- Une fois connecté, essayer de modifier/supprimer/ajouter une formation, une playlist et d'actualiser. Si les changements sont bien sauvegardés alors le back-office de l'application fonctionne comme prévu !
- Le site est actuellement en mode
dev. - Pour une meilleure expérience, je recommande d'utiliser un navigateur moderne (Chrome, Firefox...).