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.
Il y a deux partie: la partie back de gestion et la partie front publique:
Page du portfolio avec toutes les informations: https://manerr.github.io/mediatekformation
Le tutoriel d'utilisation est disponible à cet adresse: https://manerr.github.io/mediatekformation/mediatekformations_soustitree.mp4
Le rapport est disponible quand à lui à cette adresse: https://manerr.github.io/mediatekformation/Rapport%20mediatekformation.pdf
La partie administrateur contient ces fonctionnalités:
Cette page permet de se connecter à la partie administrateur:
Compte: admin 1admingestion!
Une fois la connexion effectuée, on a accès au back-office (avec la possibilité de revenir sur la partie publique à tout moment):
La partie publique contient les fonctionnalités globales suivantes :
Voici les 5 pages correspondant aux différents cas d’utilisation pour un utilisateur "classique"
Cette page présente le fonctionnement du site et les 2 dernières vidéos mises en ligne.
La partie du haut contient une bannière (logo, nom et phrase présentant le but du site) et le menu permettant d'accéder aux 3 pages principales (Accueil, Formations, Playlists).
Le centre contient un texte de présentation avec, entre autres, les liens pour accéder aux 2 autres pages principales.
La partie basse contient les 2 dernières formations mises en ligne. Cliquer sur une image permet d'accéder à la page 3 de présentation de la formation.
Le bas de page contient un lien pour accéder à la page des CGU : ce lien est présent en bas de chaque page excepté la page des CGU.
Cette page présente les formations proposées en ligne (accessibles sur YouTube).
La partie haute est identique à la page d'accueil (bannière et menu).
La partie centrale contient un tableau composé de 5 colonnes :
• La 1ère colonne ("formation") contient le titre de chaque formation.
• La 2ème colonne ("playlist") contient le nom de la playlist dans laquelle chaque formation se trouve.
• La 3ème colonne ("catégories") contient la ou les catégories concernées par chaque formation (langage…).
• La 4ème colonne ("date") contient la date de parution de chaque formation.
• LA 5ème contient la capture visible sur YouTube, pour chaque formation.
Au niveau des colonnes "formation", "playlist" et "date", 2 boutons permettent de trier les lignes en ordre croissant ("<") ou décroissant (">").
Au niveau des colonnes "formation" et "playlist", il est possible de filtrer les lignes en tapant un texte : seuls les lignes qui contiennent ce texte sont affichées. Si la zone est vide, le fait de cliquer sur "filtrer" permet de retrouver la liste complète.
Au niveau de la catégorie, la sélection d'une catégorie dans le combo permet d'afficher uniquement les formations qui ont cette catégorie. Le fait de sélectionner la ligne vide du combo permet d'afficher à nouveau toutes les formations.
Par défaut la liste est triée sur la date par ordre décroissant (la formation la plus récente en premier).
Le fait de cliquer sur une miniature permet d'accéder à la troisième page contenant le détail de la formation.
Cette page n'est pas accessible par le menu mais uniquement en cliquant sur une miniature dans la page "Formations" ou une image dans la page "Accueil".
La partie haute est identique à la page d'accueil (bannière et menu).
La partie centrale est séparée en 2 parties :
• La partie gauche contient la vidéo qui peut être directement visible dans le site ou sur YouTube.
• La partie droite contient la date de parution, le titre de la formation, le nom de la playlist, la liste des catégories et sa description détaillée.
Cette page présente les playlists.
La partie haute est identique à la page d'accueil (bannière et menu).
La partie centrale contient un tableau composé de 3 colonnes :
• La 1ère colonne ("playlist") contient le nom de chaque playlist.
• La 2ème colonne ("catégories") contient la ou les catégories concernées par chaque playlist (langage…).
• La 3ème contient un bouton pour accéder à la page de présentation de la playlist.
Au niveau de la colonne "playlist", 2 boutons permettent de trier les lignes en ordre croissant ("<") ou décroissant (">"). Il est aussi possible de filtrer les lignes en tapant un texte : seuls les lignes qui contiennent ce texte sont affichées. Si la zone est vide, le fait de cliquer sur "filtrer" permet de retrouver la liste complète.
Au niveau de la catégorie, la sélection d'une catégorie dans le combo permet d'afficher uniquement les playlists qui ont cette catégorie. Le fait de sélectionner la ligne vide du combo permet d'afficher à nouveau toutes les playlists.
Par défaut la liste est triée sur le nom de la playlist.
Cliquer sur le bouton "voir détail" d'une playlist permet d'accéder à la page 5 qui présente le détail de la playlist concernée.
Cette page n'est pas accessible par le menu mais uniquement en cliquant sur un bouton "voir détail" dans la page "Playlists".
La partie haute est identique à la page d'accueil (bannière et menu).
La partie centrale est séparée en 2 parties :
• La partie gauche contient les informations de la playlist (titre, liste des catégories, description).
• La partie droite contient la liste des formations contenues dans la playlist (miniature et titre) avec possibilité de cliquer sur une formation pour aller dans la page de la formation.
La base de données exploitée par le site est au format MySQL.
Voici le schéma correspondant à la BDD.
video_id contient le code YouTube de la vidéo, qui permet ensuite de lancer la vidéo à l'adresse suivante :
https://www.youtube.com/embed/<<<video_id>>>
formation (id, published_at, title, video_id, description, playlist_id)
id : clé primaire
playlist_id : clé étrangère en ref. à id de playlist
playlist (id, name, description)
id : clé primaire
categorie (id, name)
id : clé primaire
formation_categorie (id_formation, id_categorie)
id_formation, id_categorie : clé primaire
id_formation : clé étrangère en ref. à id de formation
id_categorie : clé étrangère en ref. à id de categorie
Remarques :
Les clés primaires des entités sont en auto-incrémentation.
Le chemin des images (des 2 tailles) n'est pas mémorisé dans la BDD car il peut être fabriqué de la façon suivante :
"https://i.ytimg.com/vi/" suivi de, soit "/default.jpg" (pour la miniature), soit "/hqdefault.jpg" (pour l'image plus grande de la page d'accueil).
- Vérifier que Composer, Git et Wamserver (ou équivalent) sont installés sur l'ordinateur.
- 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 'mediatekformation'.
- Récupérer le fichier backup_user.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