- Accueil
- Programmation Web S3
- Objectifs de la séance
- Préambule
- Utilisation du moteur PHP local
- Documentation
- Mise en place d'une application
Symfony
- Gestion des versions avec Git
- Création du projet dans
PhpStorm
- Outils de qualité de code (analyse statique de code)
- Documentation du projet
- Mise en place de scripts
Composer
- Désactivation de
Symfony UX Turbo
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 codephp -r "code PHP"
- à l'aide de la commande
php
pour exécuter un programmephp -f un_script_PHP
ouphp 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 dansSymfony
, 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 commitpuis
git pushfaute 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
- 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'
- Modifiez ou créez le fichier «
.profile
» (à la racine de votre compte) afin qu'il contienneexport PATH="$HOME/.symfony5/bin:$PATH"
- Chargez les modifications de votre «
.profile
»source ~/.profile
InformationLa 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. - Vérifiez le bon fonctionnement de l'exécutable «
symfony
»symfony self:version
- 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.
InformationDans 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
- Si ce n'est pas déjà fait, installez
Composer
InformationL'outil «
symfony
» en ligne de commande (« Symfony CLI ») utiliseComposer
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. - Vérifiez que
Composer
fonctionne correctement :composer about
- Mettez à jour
Composer
:composer self-update
- 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) - 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
- Placez-vous le répertoire de votre application
- Dans le terminal, lancez le serveur Web local avec la commande suivante :
symfony serve
InformationLe serveur Web fonctionnera tant que vous n'aurez pas terminé l'exécution l'outil ligne de commande «
symfony
» avec «CTRL+C
». - 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 »
- Accédez à l'URL «
https://127.0.0.1:8000
» pour obtenir : - Constatez l'apparition de la Web Debug Toolbar
- Observez les sorties texte du serveur Web local
- Naviguez rapidement à travers les outils de la Web Debug Toolbar
- Observez les sorties texte du serveur Web local
- 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
- Assurez-vous d'être dans le répertoire du projet
symfony-contacts
- Constatez que le dépôt
Git
local a été initialisé par l'outil «symfony
» en ligne de commande (« Symfony CLI »)git log
- Excluez du suivi de
Git
le répertoire «.idea
» dePhpStorm
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 :
- Initialisez votre dépôt
Git
git init
- Ajoutez l'ensemble des fichiers à l'index
git add .
- Effectuez la première validation
git commit -m "Initial commit"
- 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
- Créez un nouveau projet «
symfony-contacts
» surGitLab
(pensez à décocher la case « Initialize repository with a README ») - Associez le dépôt local et le dépôt distant
- 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 :
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.
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
- Dans votre terminal et dans le répertoire du projet, lancez la commande
phpstorm . &
InformationCette 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 dePhpStorm
ou dans son menu « File » puis « Recent Projects ». - Patientez pendant l'indexation des fichiers du projet visible dans la partie droite de la barre d'état
- Activez le greffon «
Symfony Support
» si ce n'était pas déjà fait et que cela vous est proposé
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
- Installez
PHP CS Fixer
en vous référant au tutoriel Installation et configuration dePhpStorm
pour configurerPHP CS Fixer
- Rendez-vous dans les préférences de
PhpStorm
dans « PHP → Quality Tools » et vérifiez quePHP CS Fixer
est bien configuré - 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
- Créez le fichier «
README.md
» à l'aide dePhpStorm
(qui vous propose de l'ajouter à l'indexGit
) - Complétez les informations suivantes :
- un titre de niveau 1 contenant le titre explicite du projet
- 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)
- un titre de niveau 2 « Installation / Configuration » précisant les points essentiels permettant d'installer, de configurer et de lancer le projet
- 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
- Ajoutez un script «
start
» qui lance le serveur web de test («symfony serve
») sans restriction de durée d'exécution - Ajoutez un script «
test:phpcs
» qui lance la commande de vérification du code parPHP CS Fixer
- Ajoutez un script «
fix:phpcs
» qui lance la commande de correction du code parPHP CS Fixer
- Ajoutez un script «
test:twigcs
» qui lance la commande de vérification du code parTwig CS Fixer
- Ajoutez un script «
fix:twigcs
» qui lance la commande de correction du code parTwig CS Fixer
- Documentez vos scripts dans le fichier «
composer.json
» - Documentez vos scripts dans le fichier «
README.md
» - Validez votre travail dans
Git
- 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
- Ouvrez le fichier «
assets/controllers.json
» - 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" …