diff --git a/README.md b/README.md index f789da3..cca79d1 100644 --- a/README.md +++ b/README.md @@ -1,86 +1,61 @@ -# Mediatekformation +# MediatekFormation +## Readme original +Voici le lien du repository original : https://github.com/CNED-SLAM/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 :
-![img1](https://github.com/user-attachments/assets/9c5c503b-738d-40cf-ba53-36ba4c0209e8) -## 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.
-![img2](https://github.com/user-attachments/assets/523b4233-3505-4b8c-9db0-5e7b72965bc6) -### 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.
-![img3](https://github.com/user-attachments/assets/bc033cf9-41a5-4cad-a268-8abb400965c5) -### 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.
-![img4](https://github.com/user-attachments/assets/f41d05d8-5980-4dc4-9eb7-58d1c31b8a25) -### 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.
-![img5](https://github.com/user-attachments/assets/bbe8934f-8d4b-4da2-8216-60b96b726d8a) -### 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.
-![img6](https://github.com/user-attachments/assets/f216a9e7-084a-4683-9b4e-cada5574a0e2) -## 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.
-![img7](https://github.com/user-attachments/assets/f3eca694-bf96-4f6f-811e-9d11a7925e9e) -
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 +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. +Le site est complet avec tous les tris et filtres fonctionnels de façon à faciliter la navigation sur le site par tous les utilisateurs. -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
+## Les différentes pages : +### Accueil +![Page d'accueil](./readmeAssets/349039870-523b4233-3505-4b8c-9db0-5e7b72965bc6.jpg) + +Cette page permet d'accéder aux autres pages accessibles au public ainsi que d'afficher les 2 dernières formations ajoutées. + +### Formations : +![Page de formations](./readmeAssets/image.png) + +Cette page permet d'accéder à la liste de toutes les formations disponibles. Celles-ci peuvent être triées par : +- Ordre alphabétique/anti alphabétique sur le nom; +- Recherche directe sur le nom; +- Ordre alphabétique/anti alphabétique sur la playlist; +- Recherche directe sur la playlist; +- Catégorie; +- Ordre chronologique/anti chronologique sur la date. + +Le clic sur la miniature permet d'accéder à la page de la formation concernée. + +### Détail d'une formation : +![Page d'une formation](./readmeAssets/image-2.png) + +Cette page n'est accessible qu'après le clic sur la miniature d'une formation, elle permet de voir toutes les informations liées à cette formation ainsi que de visionner celle-ci via un embed Youtube. + +### Playlists +![Page des playlists](./readmeAssets/image-1.png) + +Cette page permet de voir toutes les playlists disponibles. Elles peuvent être triées par : +- Odre alphabétique/anti alphabétique sur le nom; +- Recheche directe sur le nom; +- Catégories; +- Nombre de formations; +Le clic sur le bouton "Voir détail" permet d'accéder à la page de cette playlist. + +### Détail d'une playlist : +![Page d'une playlist](./readmeAssets/image-3.png) + +Cette page permet de voir le détail d'une playlist sélectionnée, elle montre les formations contenues, les catégories de cette playlist ainsi que sa description. + +### Admin formations +![Page admin pour gérer les formations](./readmeAssets/image-4.png) + +Cette page est la première page à accès restreint de l'application, elle permet de gérer les formations, on peut créer, supprimer et modifier une formation depuis cette page. +Les mêmes tris et filtres sont disponibles que dans la page formations accessible au public. + +### Admin playlists : +![Page admin pour gérer les playlists](./readmeAssets/image-5.png) + +Cette page permet de créer, supprimer et modifier des playlists. Les mêmes tris et filtres sont disponibles que pour la page accessible au public. + +### Admin catégories : +![Page admin pour gérer les catégories](./readmeAssets/image-6.png) + +Cette page permet de créer et supprimer des catégories. \ No newline at end of file diff --git a/readmeAssets/349039870-523b4233-3505-4b8c-9db0-5e7b72965bc6.jpg b/readmeAssets/349039870-523b4233-3505-4b8c-9db0-5e7b72965bc6.jpg new file mode 100644 index 0000000..4a57e41 Binary files /dev/null and b/readmeAssets/349039870-523b4233-3505-4b8c-9db0-5e7b72965bc6.jpg differ diff --git a/readmeAssets/image-1.png b/readmeAssets/image-1.png new file mode 100644 index 0000000..61e3b81 Binary files /dev/null and b/readmeAssets/image-1.png differ diff --git a/readmeAssets/image-2.png b/readmeAssets/image-2.png new file mode 100644 index 0000000..c9d202a Binary files /dev/null and b/readmeAssets/image-2.png differ diff --git a/readmeAssets/image-3.png b/readmeAssets/image-3.png new file mode 100644 index 0000000..ec83e56 Binary files /dev/null and b/readmeAssets/image-3.png differ diff --git a/readmeAssets/image-4.png b/readmeAssets/image-4.png new file mode 100644 index 0000000..668ecf7 Binary files /dev/null and b/readmeAssets/image-4.png differ diff --git a/readmeAssets/image-5.png b/readmeAssets/image-5.png new file mode 100644 index 0000000..82490b1 Binary files /dev/null and b/readmeAssets/image-5.png differ diff --git a/readmeAssets/image-6.png b/readmeAssets/image-6.png new file mode 100644 index 0000000..0514324 Binary files /dev/null and b/readmeAssets/image-6.png differ diff --git a/readmeAssets/image.png b/readmeAssets/image.png new file mode 100644 index 0000000..08f411f Binary files /dev/null and b/readmeAssets/image.png differ