deploiement

.env

@@ -15,15 +15,15 @@
 # https://symfony.com/doc/current/best_practices.html#use-environment-variables-for-infrastructure-configuration
 
 ###> symfony/framework-bundle ###
-#APP_ENV=dev
+APP_ENV=dev
-#APP_SECRET=2e01220a8dcfad7ad0c1c01450810ccc
+APP_SECRET=2e01220a8dcfad7ad0c1c01450810ccc
 ###< symfony/framework-bundle ###
 
 ###> doctrine/doctrine-bundle ###
 # Format described at https://www.doctrine-project.org/projects/doctrine-dbal/en/latest/reference/configuration.html#connecting-using-a-url
 # IMPORTANT: You MUST configure your server version, either here or in config/packages/doctrine.yaml
 #
-#DATABASE_URL="mysql://root:@127.0.0.1:3306/mediatekformation"
+DATABASE_URL="mysql://root:@127.0.0.1:3306/mediatekformation"
 ###< doctrine/doctrine-bundle ###
 
 ###> symfony/messenger ###

.github/workflows/main_mediatekformation.yml

@@ -1,21 +0,0 @@
-name: Deploy website on push
-
-on:
-  push:
-    branches:
-      - main
-  workflow_dispatch:
-
-jobs:
-  build-and-deploy:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout GitHub Action
-        uses: actions/checkout@v4
-        
-      - name: Deploy to Azure Web App
-        uses: azure/webapps-deploy@v3
-        with:
-          app-name: 'MediatekFormation'
-          publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }}
-          package: .

README.md

@@ -1,71 +1,86 @@
-# MediatekFormation
+# Mediatekformation
-## Infos :
-- Voici le lien du repository original : https://github.com/CNED-SLAM/mediatekformation
-- Lien pour accéder au site en ligne : https://mediatekformation-atawfpftd0bubma9.francecentral-01.azurewebsites.net/ (Le site sera certainement mis hors ligne à partir de mars 2026 pour des raisons de coût)
-- [test de l'application en local](#test-de-lapplication-en-local)
 ## 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.
+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.<br> 
-Le site est complet avec tous les tris et filtres fonctionnels de façon à faciliter la navigation sur le site par tous les utilisateurs.
+Actuellement, seule la partie front office a été développée. Elle contient les fonctionnalités globales suivantes :<br>
+![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.<br>
+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).<br>
+Le centre contient un texte de présentation avec, entre autres, les liens pour accéder aux 2 autres pages principales.<br>
+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.<br>
+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.<br>
+![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).<br>
+La partie haute est identique à la page d'accueil (bannière et menu).<br>
+La partie centrale contient un tableau composé de 5 colonnes :<br>
+•	La 1ère colonne ("formation") contient le titre de chaque formation.<br>
+•	La 2ème colonne ("playlist") contient le nom de la playlist dans laquelle chaque formation se trouve.<br>
+•	La 3ème colonne ("catégories") contient la ou les catégories concernées par chaque formation (langage…).<br>
+•	La 4ème colonne ("date") contient la date de parution de chaque formation.<br>
+•	LA 5ème contient la capture visible sur YouTube, pour chaque formation.<br>
+Au niveau des colonnes "formation", "playlist" et "date", 2 boutons permettent de trier les lignes en ordre croissant ("<") ou décroissant (">").<br>
+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.<br> 
+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.<br>
+Par défaut la liste est triée sur la date par ordre décroissant (la formation la plus récente en premier).<br>
+Le fait de cliquer sur une miniature permet d'accéder à la troisième page contenant le détail de la formation.<br>
+![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".<br>
+La partie haute est identique à la page d'accueil (bannière et menu).<br>
+La partie centrale est séparée en 2 parties :<br>
+•	La partie gauche contient la vidéo qui peut être directement visible dans le site ou sur YouTube.<br>
+•	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.<br>
+![img4](https://github.com/user-attachments/assets/f41d05d8-5980-4dc4-9eb7-58d1c31b8a25)
+### Page 4 : les playlists
+Cette page présente les playlists.<br>
+La partie haute est identique à la page d'accueil (bannière et menu).<br>
+La partie centrale contient un tableau composé de 3 colonnes :<br>
+•	La 1ère colonne ("playlist") contient le nom de chaque playlist.<br>
+•	La 2ème colonne ("catégories") contient la ou les catégories concernées par chaque playlist (langage…).<br>
+•	La 3ème contient un bouton pour accéder à la page de présentation de la playlist.<br>
+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.<br> 
+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.<br>
+Par défaut la liste est triée sur le nom de la playlist.<br>
+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.<br>
+![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".<br>
+La partie haute est identique à la page d'accueil (bannière et menu).<br>
+La partie centrale est séparée en 2 parties :<br>
+•	La partie gauche contient les informations de la playlist (titre, liste des catégories, description).<br>
+•	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.<br>
+![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.<br>
+![img7](https://github.com/user-attachments/assets/f3eca694-bf96-4f6f-811e-9d11a7925e9e)
+<br>video_id contient le code YouTube de la vidéo, qui permet ensuite de lancer la vidéo à l'adresse suivante :<br>
+https://www.youtube.com/embed/<<<video_id>>>
+### Relations issues du schéma
+<code><strong>formation (id, published_at, title, video_id, description, playlist_id)</strong>
+id : clé primaire
+playlist_id : clé étrangère en ref. à id de playlist
+<strong>playlist (id, name, description)</strong>
+id : clé primaire
+<strong>categorie (id, name)</strong>
+id : clé primaire
+<strong>formation_categorie (id_formation, id_categorie)</strong>
+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</code>
 
-## Les différentes pages : 
+Remarques : 
-### Accueil
+Les clés primaires des entités sont en auto-incrémentation.<br>
-![Page d'accueil](./readmeAssets/349039870-523b4233-3505-4b8c-9db0-5e7b72965bc6.jpg)
+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 :<br>
-
+"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).
-Cette page permet d'accéder aux autres pages accessibles au public ainsi que d'afficher les 2 dernières formations ajoutées.
+## Test de l'application en local
-
+- Vérifier que Composer, Git et Wamserver (ou équivalent) sont installés sur l'ordinateur.
-### Formations :
+- Télécharger le code et le dézipper dans www de Wampserver (ou dossier équivalent) puis renommer le dossier en "mediatekformation".<br>
-![Page de formations](./readmeAssets/image.png)
+- 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.<br>
-
+- Dans phpMyAdmin, se connecter à MySQL en root sans mot de passe et créer la BDD 'mediatekformation'.<br>
-Cette page permet d'accéder à la liste de toutes les formations disponibles. Celles-ci peuvent être triées par :
+- 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).<br>
-- Ordre alphabétique/anti alphabétique sur le nom;
+- De préférence, ouvrir l'application dans un IDE professionnel. L'adresse pour la lancer est : http://localhost/mediatekformation/public/index.php<br>
-- 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.
-
-### 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 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

default

@@ -1,27 +0,0 @@
-server {
-    listen 8080;
-    listen [::]:8080;
-    root /home/site/wwwroot/public; # <-- On pointe sur public
-    index index.php;
-    server_name example.com;
-
-    location / {
-        # Indispensable pour Symfony : redirige tout vers index.php
-        try_files $uri /index.php$is_args$args;
-    }
-
-    location ~ ^/index\.php(/|$) {
-        fastcgi_pass 127.0.0.1:9000;
-        fastcgi_split_path_info ^(.+\.php)(/.*)$;
-        include fastcgi_params;
-        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
-        fastcgi_param DOCUMENT_ROOT $document_root;
-        internal;
-    }
-
-    location ~ \.php$ {
-        return 404;
-    }
-    error_log /var/log/nginx/project_error.log;
-    access_log /var/log/nginx/project_access.log;
-}

templates/pages/playlists.html.twig

@@ -32,9 +32,6 @@
                         </select>                    
                     </form>            
                 </th>
-                <th class="text-left align-top" scope="col">
-                    Détail
-                </th>
                 <th class="text-center align-top" scope="col">
                     Nb résultats
                     <a href="{{ path('playlists.sort', {champ:'nbResult', ordre:'ASC'}) }}" class="btn btn-info btn-sm active" role="button" aria-pressed="true"><</a>

templates/security/login.html.twig

@@ -1,6 +1,6 @@
 {% extends 'base.html.twig' %}
 
-{% block title %}Connexion{% endblock %}
+{% block title %}Log in!{% endblock %}
 
 {% block body %}
 <form method="post">
@@ -10,19 +10,19 @@
 
     {% if app.user %}
         <div class="mb-3">
-            Vous êtes connecté en tant que {{ app.user.userIdentifier }}, <a href="{{ logout_path() }}">Déconnexion</a>
+            You are logged in as {{ app.user.userIdentifier }}, <a href="{{ logout_path() }}">Logout</a>
         </div>
     {% endif %}
 
-    <h1 class="h3 mb-3 font-weight-normal">Se connecter :</h1>
+    <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
-    <label for="inputUsername">Nom d'utilisateur</label>
+    <label for="inputUsername">Username</label>
     <input type="text" value="{{ last_username }}" name="username" id="inputUsername" class="form-control" autocomplete="username" required autofocus>
-    <label for="inputPassword">Mot de passe</label>
+    <label for="inputPassword">Password</label>
     <input type="password" name="password" id="inputPassword" class="form-control" autocomplete="current-password" required>
     <input type="hidden" name="_csrf_token" data-controller="csrf-protection" value="{{ csrf_token('authenticate') }}">
 
     <button class="btn btn-lg btn-primary" type="submit">
-        Se connecter
+        Sign in
     </button>
 </form>
 {% endblock %}