Jérôme Cutrona

Version statique de l'intranet de Jérôme Cutrona - Rejoindre la version dynamique 🔒

Les exemples et corrections sont potentiellement non fonctionnels.

B.U.T. Informatique - IUT de Reims - Université de Reims

Symfony 6.3

Navigation

Objectifs de la séance

  • Créer un projet Symfony avec l'outil « symfony » en ligne de commande (« Symfony CLI »)
  • Prendre en main Symfony dans sa version 5
  • Utiliser le routage
  • Développer des « templates » Twig
  • Écrire des tests fonctionnels
  • Utiliser l'ORM Doctrine
  • Gérer des relations entre entités
  • Générer des données factices (« fixtures ») avec « Foundry »
  • Utiliser le composant Form
  • Utiliser le composant Security
  • Mettre en place un « back-office » avec EasyAdmin

Préambule

L'objectif de ce TP est de vous familiariser avec le développement d'applications Symfony. Le sujet vous accompagne dans la découverte du framework tout en essayant de se conformer aux bonnes pratiques de Symfony.

Remarque importante

De nombreux points du sujet consistent en l'observation de fichiers ou de fonctionnements qui s'appuient sur des conventions liées au framework. Ne les négligez pas ! Le but n'est pas de vous faire suivre bêtement un tutoriel mais de vous amener à comprendre ce que vous faites.

Utilisation du moteur PHP local

Vous allez utiliser le moteur PHP installé localement sur votre poste de travail. Vous déclencherez le moteur PHP local, directement ou indirectement de diverses manières :

  • à l'aide de la commande php pour exécuter du code
    php -r "code PHP"
  • à l'aide de la commande php pour exécuter un programme
    php -f un_script_PHP
    ou
    php un_script_PHP
  • comme une commande grâce à l'utilisation du shebang en tête d'un programme PHP
    bin/console cache:clear

    Le programme « console » est fourni dans Symfony, s'utilise comme un script shell, et est écrit en PHP. Sa première ligne est #!/usr/bin/env php

  • comme une commande grâce à l'utilisation du shebang en tête d'un paquet PHP (fichier .phar)
    composer.phar update
  • en mode server local à travers l'utilisation du serveur Web intégré à PHP
    php -S localhost:8000 -t public/

    PHP lance ici un serveur Web local que vous allez interroger avec votre navigateur Web.

Documentation

Vous aurez besoin de la documentation de Symfony ainsi que de celle des diverses API :

Mise en place d'une application Symfony

Vous allez créer des applications Symfony de façon conventionnelle, en utilisant l'outil « symfony » en ligne de commande (« Symfony CLI »). Une nouvelle application Symfony nécessite un peu plus de 80 Mo de sources PHP pour fonctionner (environ 10.000 fichiers dans un peu moins de 2.000 répertoires !). Ces données seront rapidement agrémentées de plusieurs dizaines de mégaoctets de cache générés par Symfony.

Vous allez installer Symfony à l'aide de l'outil « symfony » en ligne de commande (« Symfony CLI ») et pour cela, vous allez devoir l'installer. Cet outil utilise Composer dont vous devrez vous assurer du bon fonctionnement.

Quelques considérations liées à la configuration système de l'IUT

Remarque importante

Si vous travaillez sur votre ordinateur personnel, sur Linux ou sur Windows, vous pouvez placer le répertoire « symfony-contacts » du projet où bon vous semble. La partie qui suit concerne uniquement le travail sur les ordinateurs de l'IUT. Cela ne vous empêche pas d'en prendre connaissance.

Votre répertoire d'accueil « $HOME » se trouve sur un emplacement réseau NFS, ce qui vous permet de retrouver vos fichiers quel que soit le PC du département sur lequel vous vous connectez. Symfony utilise le sous-répertoire « var » du projet pour la gestion de son cache, des traces d'exécution et des données de session. Ces tâches génèrent de nombreuses entrées-sorties sur le système de fichiers, particulièrement inadaptées aux systèmes de fichiers en réseau. Il en va de même pour PhpStorm qui surveille les modifications de tous les fichiers de votre projet et ne peut pas fonctionner normalement lorsque ces fichiers sont sur un partage NFS. Afin d'améliorer les performances de votre application et d'éviter de saturer le serveur de fichiers du département informatique, vous allez travailler dans le répertoire « /working/votre_login » de la machine sur laquelle vous êtes connecté.

En fin de séance

En fin de séance, vous devez impérativement synchroniser votre dépôt distant (en ligne de commande ou avec PhpStorm)

git commit
puis
git push
faute de quoi vous perdrez votre travail entre chaque séance !

Pensez également à supprimer votre répertoire de travail /working/votre_login/symfony-contacts pour éviter la saturation du disque local :

rm -Rf /working/votre_login/symfony-contacts

En début de séance

Lorsque vous reprenez le travail la séance suivante, vous avez trois choix possibles, qui dépendent de la façon dont vous avez travaillé :

  • Mettre à jour votre dépôt local
    cd /working/votre_login/symfony-contacts
    git pull
  • Effacer votre dépôt local et repartir de zéro
    cd /working/votre_login
    rm -Rf /working/votre_login/symfony-contacts
    git clone https://iut-info.univ-reims.fr/gitlab/votre_login/symfony-contacts.git
    cd /working/votre_login/symfony-contacts
  • Réinitialiser votre dépôt local selon le dépôt distant
    cd /working/votre_login/symfony-contacts
    git fetch
    git reset --hard origin/main

Ensuite, dans le répertoire de votre projet, vous devez et (ré)installer les composants nécessaires à son fonctionnement :

composer install

Vous devrez également reconfigurer votre accès base de données en redéfinissant le fichier « .env.local »

Installation de l'exécutable « symfony »

Le développement d'applications Symfony peut être facilité par l'utilisation de l'outil « symfony » en ligne de commande (« Symfony CLI »). Ce dernier peut contrôler que le système comporte tous les prérequis pour le développement d'applications Symfony ou tester la présence de failles de sécurité connues.

Travail à réaliser
  1. Installez l'exécutable « symfony » qui contient le serveur Web local en lançant la commande suivante :
    wget https://get.symfony.com/cli/installer -O - | bash
    --2022-09-16 15:27:24--  https://get.symfony.com/cli/installer
    Resolving get.symfony.com (get.symfony.com)... 13.32.145.22, 13.32.145.97, 13.32.145.64, ...
    Connecting to get.symfony.com (get.symfony.com)|13.32.145.22|:443... connected.
    HTTP request sent, awaiting response... 200 OK
    Length: 6100 (6,0K) [binary/octet-stream]
    Saving to: ‘STDOUT’
    
    -                                   100%[==================================================================>]   5,96K  --.-KB/s    in 0s      
    
    2022-09-16 15:27:24 (378 MB/s) - written to stdout [6100/6100]
    
    Symfony CLI installer
    
    Environment check
      [*] cURL is installed
      [*] Tar is installed
      [*] Git is installed
      [*] Your architecture (amd64) is supported
    
    Download
      Downloading https://github.com/symfony-cli/symfony-cli/releases/latest/download/symfony-cli_linux_amd64.tar.gz...
      % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                     Dload  Upload   Total   Spent    Left  Speed
      0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
      0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
    100 5105k  100 5105k    0     0  15.4M      0 --:--:-- --:--:-- --:--:-- 81.7M
      Uncompress binary...
      Installing the binary into your home directory...
      The binary was saved to: /home/Users/cutron01/.symfony5/bin/symfony
    
    The Symfony CLI was installed successfully!
    
    Use it as a local file:
      /home/Users/cutron01/.symfony5/bin/symfony
    
    Or add the following line to your shell configuration file:
      export PATH="$HOME/.symfony5/bin:$PATH"
    
    Or install it globally on your system:
      mv /home/Users/cutron01/.symfony5/bin/symfony /usr/local/bin/symfony
    
    Then start a new shell and run 'symfony'
    
  2. Modifiez ou créez le fichier « .profile » (à la racine de votre compte) afin qu'il contienne
    export PATH="$HOME/.symfony5/bin:$PATH"
  3. Chargez les modifications de votre « .profile »
    source ~/.profile
    Information

    La configuration du shell Bash se fait à l'aide de fichiers de démarrage. Le fichier « ~/.profile » est exécuté à chaque ouverture de session. Il est donc nécessaire de se (re)connecter pour que les modifications soient prises en compte dans chaque terminal lancé. Pour cette séance, vous pouvez vous contenter de recharger le fichier de configuration avec la commande « source ~/.profile ».

    Si vous souhaitez profiter immédiatement des bénéfices de la modifications du fichier « .profile », vous devez vous déconnecter de la machine et vous reconnecter.

  4. Vérifiez le bon fonctionnement de l'exécutable « symfony »
    symfony self:version
  5. Contrôlez la compatibilité du système avec la commande :
    symfony check:requirements  --verbose
    Symfony Requirements Checker
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    
    > PHP is using the following php.ini file:
    /etc/php/8.0/cli/php.ini
    
    > Checking Symfony requirements:
    
    [OK] iconv() must be available
    [OK] json_encode() must be available
    [OK] session_start() must be available
    [OK] ctype_alpha() must be available
    [OK] token_get_all() must be available
    [OK] simplexml_import_dom() must be available
    [OK] detect_unicode must be disabled in php.ini
    [OK] xdebug.show_exception_trace must be disabled in php.ini
    [OK] xdebug.scream must be disabled in php.ini
    [OK] PCRE extension must be available
    [OK] string functions should not be overloaded
    [OK] xdebug.max_nesting_level should be above 100 in php.ini
    [OK] PCRE extension should be at least version 8.0 (10.4 installed)
    [OK] PHP-DOM and PHP-XML modules should be installed
    [OK] mb_strlen() should be available
    [OK] utf8_decode() should be available
    [OK] filter_var() should be available
    [OK] posix_isatty() should be available
    [OK] intl extension should be available
    [OK] intl extension should be correctly configured
    [OK] intl ICU version should be at least 4+
    [OK] intl.error_level should be 0 in php.ini
    [OK] a PHP accelerator should be installed
    [OK] short_open_tag should be disabled in php.ini
    [OK] magic_quotes_gpc should be disabled in php.ini
    [OK] register_globals should be disabled in php.ini
    [OK] session.auto_start should be disabled in php.ini
    [OK] xdebug.max_nesting_level should be above 100 in php.ini
    [OK] "memory_limit" should be greater than "post_max_size".
    [OK] "post_max_size" should be greater than "upload_max_filesize".
    [OK] PDO should be installed
    [OK] PDO should have some drivers installed (currently available: mysql, sqlite)
    
    
                                                  
     [OK]                                         
     Your system is ready to run Symfony projects 
                                                  
    
    Note  The command console can use a different php.ini file
    ~~~~  than the one used by your web server.
          Please check that both the console and the web server
          are using the same PHP version and configuration.
    
    Information

    Dans un environnement Windows, vous pouvez télécharger une archive zip qui contient « symfony.exe ». Ce programme est l'exécutable de l'outil que vous devez donc placer dans un répertoire de votre système et le rendre accessible en ligne de commande (le répertoire doit figurer dans la variable d'environnement « Path »).

Création d'un projet Symfony

Vous allez pouvoir créer un projet Symfony à l'aide de l'outil « symfony » en ligne de commande (« Symfony CLI »).

Travail à réaliser
  1. Si ce n'est pas déjà fait, installez Composer
    Information

    L'outil « symfony » en ligne de commande (« Symfony CLI ») utilise Composer pour créer le nouveau projet. S'il n'est pas disponible sur le système, une version temporaire sera téléchargée. Il est plus rapide et logique d'avoir votre propre version fonctionnelle qui sera par ailleurs utile par la suite.

  2. Vérifiez que Composer fonctionne correctement :
    composer about
  3. Mettez à jour Composer :
    composer self-update
  4. Vérifiez que vous êtes bien dans le répertoire « /working/votre_login » (ou n'importe quel répertoire de votre choix si vous êtes sur votre ordinateur personnel)
  5. Lancez la création d'un nouveau projet Symfony version « 6.3.* » :
    symfony --version 6.3 --webapp new symfony-contacts

Vérification du bon fonctionnement de l'application

Si vous avez réalisé toutes les étapes précédentes sans encombre, votre application doit fonctionner. Vous allez donc le vérifier. Vous allez utiliser l'environnement de développement de Symfony qui est celui qui est activé par défaut en mode développement.

Travail à réaliser
  1. Placez-vous le répertoire de votre application
  2. Dans le terminal, lancez le serveur Web local avec la commande suivante :
    symfony serve
    Information

    Le serveur Web fonctionnera tant que vous n'aurez pas terminé l'exécution l'outil ligne de commande « symfony » avec « CTRL+C ».

  3. Suivez les instructions données dans la partie « Gestion du certificat du serveur Web de l'API dans le navigateur » du tutoriel « Configuration CORS pour utiliser l'authentification de l'API avec React »
  4. Accédez à l'URL « https://127.0.0.1:8000 » pour obtenir : Test de l'environnement de développement
  5. Constatez l'apparition de la Web Debug Toolbar
  6. Observez les sorties texte du serveur Web local
  7. Naviguez rapidement à travers les outils de la Web Debug Toolbar
  8. Observez les sorties texte du serveur Web local
  9. Terminez l'exécution de l'outil ligne de commande « symfony » avec « CTRL+C »

Gestion des versions avec Git

Afin de fiabiliser votre méthode de développement, vous allez utiliser Git pour gérer le suivi des versions de votre application Symfony.

Dépôt local

Vous allez configurer votre dépôt Git local.

Travail à réaliser
  1. Assurez-vous d'être dans le répertoire du projet symfony-contacts
  2. Constatez que le dépôt Git local a été initialisé par l'outil « symfony » en ligne de commande (« Symfony CLI »)
    git log
  3. Excluez du suivi de Git le répertoire « .idea » de PhpStorm
    echo -e "\n/.idea/" >> .gitignore
    git add .gitignore
    git commit -m "Exclusion du répertoire .idea"
Information

Si vous créez le projet avec Composer, vous devez effectuer les actions suivantes :

  1. Initialisez votre dépôt Git
    git init
  2. Ajoutez l'ensemble des fichiers à l'index
    git add .
  3. Effectuez la première validation
    git commit -m "Initial commit"
  4. Renommez la branche principale en « main » (une branche vide ne peut pas être renommée, c'est pourquoi ceci est fait après le premier « commit »)
    git branch -m main

Dépôt distant

Passons maintenant à la configuration du dépôt distant.

Travail à réaliser
  1. Créez un nouveau projet « symfony-contacts » sur GitLab (pensez à décocher la case « Initialize repository with a README »)
  2. Associez le dépôt local et le dépôt distant
  3. Poussez votre branche locale
Remarque importante

Dans toute la suite du TP, pensez à effectuer des « commit » réguliers (un par question au minimum). Vous pouvez utiliser PhpStorm pour les commandes Git « commit » et « push ». PhpStorm propose une option « Commit and Push… » particulièrement adaptée à votre situation : Configuration de Git

N'oubliez pas d'ajouter les nouveaux fichiers au gestionnaire de versions (Ctrl+Alt+A) avant vos « commit ». Vous pouvez constater que le nom des fichiers s'affiche en vert pour ceux qui ont été ajoutés au suivi par opposition au rouge pour ce qui n'ont pas été ajoutés et gris clair pour ceux qui sont ignorés. Configuration de Git

Création du projet dans PhpStorm

La gestion d'une application Symfony nécessitant de modifier de nombreux fichiers dans une arborescence complexe, vous utiliserez PhpStorm pour l'édition de texte. Des greffons apportent le support de Symfony, Composer, des fichiers YAML, Twig, … Certains sont préinstallés dans la configuration générale.

Vous allez créer un nouveau projet PHP à partir de PhpStorm pour gérer votre application Web.

Remarque importante

PhpStorm est un outil puissant parmi d'autres développés par JetBrains. Leur utilisation dans le cadre professionnel impose de s'acquitter d'une licence annuelle. Cependant, dans la cadre universitaire, vous pouvez disposer d'une licence gratuite pour les étudiants. Ceci vous permet d'utiliser les outils sur votre ordinateur personnel, tant que vous êtes étudiant. L'utilisation de PhpStorm au sein du département ne nécessite pas de démarche particulière puisque nous avons un serveur de licences JetBrains.

Je vous invite néanmoins à demander une licence et à travailler sur votre ordinateur personnel en dehors des séances de TP.

Travail à réaliser
  1. Dans votre terminal et dans le répertoire du projet, lancez la commande
    phpstorm . &
    Information

    Cette commande est la façon la plus simple et la plus rapide de créer un nouveau projet PhpStorm dans un répertoire. Il n'est pas utile de la lancer une fois le projet créé puisque vos anciens projets sont proposés à l'ouverture de PhpStorm ou dans son menu « File » puis « Recent Projects ».

  2. Patientez pendant l'indexation des fichiers du projet visible dans la partie droite de la barre d'état Indexatioon du projet
  3. Activez le greffon « Symfony Support » si ce n'était pas déjà fait et que cela vous est proposé Proposition d'auto-configuration du greffon Symfony

Outils de qualité de code (analyse statique de code)

Vous allez mettre en place des outils d'analyse statique de code pour garantir la qualité de votre application. Comme l'année dernière, vous utiliserez PHP CS Fixer pour vérifier et corriger le style de votre code PHP. Vous utiliserez un outil équivalent pour le code Twig.

Travail à réaliser
  1. Installez PHP CS Fixer en vous référant au tutoriel Installation et configuration de PhpStorm pour configurer PHP CS Fixer
  2. Rendez-vous dans les préférences de PhpStorm dans « PHP → Quality Tools » et vérifiez que PHP CS Fixer est bien configuré Configuration de PHP CS Fixer dans PhpStorm
  3. Installez Twig CS Fixer, en pensant à exécuter la recette (recipe) :
    composer require --dev vincentlanglet/twig-cs-fixer
    
    ./composer.json has been updated
    Running composer update vincentlanglet/twig-cs-fixer
    Loading composer repositories with package information
    Updating dependencies
    Lock file operations: 1 install, 0 updates, 0 removals
      - Locking vincentlanglet/twig-cs-fixer (2.12.1)
    Writing lock file
    Installing dependencies from lock file (including require-dev)
    Package operations: 1 install, 0 updates, 0 removals
      - Installing vincentlanglet/twig-cs-fixer (2.12.1): Extracting archive
    Generating autoload files
    125 packages you are using are looking for funding.
    Use the `composer fund` command to find out more!
    
    Symfony operations: 1 recipe (c941cb0116eec3d0ad57af4541444f07)
      -  WARNING  vincentlanglet/twig-cs-fixer (>=0.6): From github.com/symfony/recipes-contrib:main
        The recipe for this package comes from the "contrib" repository, which is open to community contributions.
        Review the recipe at https://github.com/symfony/recipes-contrib/tree/main/vincentlanglet/twig-cs-fixer/0.6
    
        Do you want to execute this recipe?
        [y] Yes
        [n] No
        [a] Yes for all packages, only for the current installation session
        [p] Yes permanently, never ask again for this project
        (defaults to n): y <-- répondre y ici
      - Configuring vincentlanglet/twig-cs-fixer (>=0.6): From github.com/symfony/recipes-contrib:main
    Executing script cache:clear [OK]
    Executing script assets:install public [OK]
                  
     What's next? 
                  
    
    Some files have been created and/or updated to configure your new packages.
    Please review, edit and commit them: these files are yours.
    
    No security vulnerability advisories found.
    Using version ^2.12 for vincentlanglet/twig-cs-fixer
    

Documentation du projet

Tout projet de développement doit fournir les clés pour l'installation, la configuration et le démarrage par un nouveau développeur. Cet effort de documentation peut également s'avérer bénéfique pour le créateur du projet qui peut oublier certains points essentiels de configuration au fil du temps. Ainsi, vous allez rédiger le mode d'emploi de votre projet dans un fichier « REAMDE.md » et le tenir à jour au fil du développement.

Travail à réaliser
  1. Créez le fichier « README.md » à l'aide de PhpStorm (qui vous propose de l'ajouter à l'index Git)
  2. Complétez les informations suivantes :
    1. un titre de niveau 1 contenant le titre explicite du projet
    2. un titre de niveau 2 « Auteur(s) » vous permettant de préciser votre nom et votre prénom (ainsi que ceux de votre binôme, le cas échéant)
    3. un titre de niveau 2 « Installation / Configuration » précisant les points essentiels permettant d'installer, de configurer et de lancer le projet
  3. Validez votre travail dans Git

Mise en place de scripts Composer

Les dépendances de votre projet Symfony sont gérées par Composer. Profitons-en pour mettre en place quelques scripts Composer qui faciliteront la gestion quotidienne du projet.

Travail à réaliser
  1. Ajoutez un script « start » qui lance le serveur web de test (« symfony serve ») sans restriction de durée d'exécution
  2. Ajoutez un script « test:phpcs » qui lance la commande de vérification du code par PHP CS Fixer
  3. Ajoutez un script « fix:phpcs » qui lance la commande de correction du code par PHP CS Fixer
  4. Ajoutez un script « test:twigcs » qui lance la commande de vérification du code par Twig CS Fixer
  5. Ajoutez un script « fix:twigcs » qui lance la commande de correction du code par Twig CS Fixer
  6. Documentez vos scripts dans le fichier « composer.json »
  7. Documentez vos scripts dans le fichier « README.md »
  8. Validez votre travail dans Git
  9. Relancez votre serveur Web local à l'aide du script Composer que vous venez d'écrire

Désactivation de Symfony UX Turbo

Depuis plusieurs versions de Symfony, Symfony UX Turbo est activé par défaut. Ce « bundle », faisant partie de l'initiative Symfony UX, apporte le support de Hotwire Turbo qui amène une expérience utilisateur de type application web monopage (SPA en anglais) sans avoir à écrire de Javascript. Le principal avantage est que les ressources liées (images, fichiers JavaScript, fichiers CSS, …) à la ressource principale (celle affichée dans la barre d'adresse du navigateur) ne sont pas rechargées à chaque changement d'URL. Ceci accélère significativement les temps de chargement et diminue la bande passante nécessaire. Cependant, dans le cadre de l'apprentissage des mécaniques Web, le fonctionnement de Hotwire Turbo transforme les intéractions client/serveur et perturbe votre compréhension du fonctionnement de Symfony. Vous allez donc le désactiver..

Travail à réaliser
  1. Ouvrez le fichier « assets/controllers.json »
  2. Désactivez le contrôleur Stimulus « @symfony/ux-turbo » en passant la valeur de l'attribut « enabled » à « false »:
    {
        "controllers": {
            "@symfony/ux-turbo": {
                "turbo-core": {
                    "enabled": false,
                    "fetch": "eager"
                    …