Mediatekformation

Présentation

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.
Actuellement, seule la partie front office a été développée. Elle contient les fonctionnalités globales suivantes :

Les différentes pages

Voici les 5 pages correspondant aux différents cas d’utilisation.

Page 1 : l'accueil

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.

Page 2 : les formations

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.

Page 3 : détail d'une 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.

Page 4 : les playlists

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.

Page 5 : détail d'une playlist

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

La base de données exploitée par le site est au format MySQL.

Schéma conceptuel de données

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/<<>>

Relations issues du schéma

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).

Test de l'application en local

• 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 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