Mettre en place VSCode pour travailler !

Si vous n'utilisez pas VSCode pour coder, cet article ne vous servira pas, on se retrouve dans le cours suivant 😉

Pour ma part j'utilise VSCode pour travailler avec Symfony. Il existe d'autres solutions (notamment PHPStorm qui est hélas payant et assez complexe à mettre en oeuvre à mon goût) mais c'est celle que j'ai choisi.


Si vous voulez me suivre et vous aussi utiliser VSCode, il vous faudra installer quelques extensions, ainsi que mettre Ă  jour la configuration.


Extension PHP Intelephense

Elle donne des tonnes d'outils pour travailler en PHP : Autocompletion, formattage du code, import automatique des namespaces etc etc : 

https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client


Extension PHP DocBlocker

Elle permet de générer rapidement des documentation pour les fonctions que l'on créé ! Essentiel pour documenter correctement le code.

https://marketplace.visualstudio.com/items?itemName=neilbrayfield.php-docblocker


Extension Twig Language 2

Elle permet la coloration syntaxique au sein des fichiers .twig que l'on va beaucoup utiliser durant cette formation !

https://marketplace.visualstudio.com/items?itemName=mblode.twig-language-2


Extension PHP Namespace Resolver

Essentielle lorsqu'on travaille avec le systÚme des espaces de noms de PHP (les Namespaces), elle vous permettra de retrouver aisément dans quel espace de noms se trouve telle ou telle classe de Symfony.

https://marketplace.visualstudio.com/items?itemName=MehediDracula.php-namespace-resolver


Le paramétrage de VSCode :

La seule chose à modifier dans le paramétrage, c'est la possibilité de bénéficier de Emmet au sein des fichiers Twig et des fichiers JS (pour qu'on puisse faire du JSX simplement) !


 Pour ce faire, vous devez rajouter ce paramĂ©trage (menu Fichiers > PrĂ©fĂ©rences > ParamĂštres > Panneau de droite "ParamĂštres Utilisateur") :

{
    "tous vos autres paramĂštres: "...",
    "emmet.includeLanguages": {
        "twig": "html",
    },
    "emmet.triggerExpansionOnTab": true
}



Et voilĂ , vous devriez ĂȘtre prĂȘt Ă  bosser !

Symfony 4 : les fondamentaux par la pratique

Acheter maintenantEn savoir plus

Introduction

  • Qu'est-ce que Symfony 4 et pourquoi l'utiliser ?7
  • Ce qu'on va faire ensemble, ce que ça va vous apporter3
  • Les outils nĂ©cessaires pour suivre la formation1
  • Mettre en place l'environnement de travail5
  • Mettre en place VSCode pour travailler !11
  • A l'attention des Ă©tudiants qui utilisent AdBlock et autres extensions3
  • Tirez profit au maximum de cette formation !3

Premiers pas : mise en place de notre application Symfony 4

  • Avant de commencer : sortie de Symfony 5
  • CrĂ©ons notre projet Symfony 4 avec Composer !43
  • DĂ©couverte de la structure d'une application Symfony 45
  • Introduction : le concept de Controller au sein d'une application Symfony 4
  • CrĂ©ons notre premier Controller : le HomeController27
  • SĂ©parer les traitements et l'affichage grĂące Ă  Twig6
  • Les avantages du langage de templating Twig1
  • Comprendre Twig : L'interpolation (afficher une variable)
  • Comprendre Twig : les structures de contrĂŽle (conditions et boucles)1
  • Comprendre Twig : les commentaires
  • Comprendre Twig : les filtres
  • Routes paramĂ©trĂ©es & routes multiples : des adresses dynamique porteuses de sens9
  • Comprendre Twig : gĂ©nĂ©rer une URL avec la fonction path()2
  • Comprendre Twig : l'hĂ©ritage de gabarit (extends)7
  • Mise en place d'un thĂšme Bootstrap10
  • Mise en place de la barre de navigation
  • Mise en place finale de la page d'accueil de notre application9
  • Versionning de notre avancement avec GIT7
  • Quiz : DĂ©marrage avec Symfony 4

Relations avec la base de données

  • Introduction : la relation aux bases de donnĂ©es avec Symfony et Doctrine1
  • CrĂ©ation de la base de donnĂ©es grĂące Ă  la CLI11
  • Comprendre Doctrine : crĂ©ons notre premiĂšre EntitĂ© pour reprĂ©senter les annonces3
  • Comprendre Doctrine : notre premier script de migrations2
  • Comprendre Doctrine : crĂ©er des jeux de fausses donnĂ©es avec les Fixtures10
  • Rendre nos fausses donnĂ©es plus rĂ©alistes avec Faker18
  • CrĂ©er des slugs facilement avec Slugify1
  • Comprendre Doctrine : interagir avec le cycle de vie des EntitĂ©s10
  • Comprendre Doctrine : les relations entre EntitĂ©s avec l'EntitĂ© Image
  • Enrichir la Fixture pour crĂ©er des images11

Notre premier Controller : le AdController pour la gestion des annonces

  • Affichage de la liste des annonces9
  • RĂ©cupĂ©ration des annonces grĂące au Repository Doctrine23
  • Comprendre l'Injection de DĂ©pendances2
  • RĂ©cupĂ©ration d'une annonce avec son slug grĂące au Repository10
  • Affichage d'une annonce16
  • Un peu de CSS personnalisĂ©9
  • Parcourir les images liĂ©es Ă  une annonce grĂące Ă  la relation entre les 2 entitĂ©s24
  • Mise Ă  jour de la barre de navigation5
  • Liens paramĂ©trĂ©s dans la liste des annonces3
  • Comprendre Twig : utiliser une variable Twig pour factoriser un code2
  • Comprendre le ParamConverter de Symfony 49

Symfony et les formulaires

  • CrĂ©er la page de crĂ©ation d'une annonce1
  • DĂ©couverte du FormBuilder : le fabricant de formulaire3
  • Comprendre Twig : afficher un formulaire Symfony
  • CrĂ©er une classe de Formulaire externe et rĂ©utilisable
  • Comprendre Twig : les fonctions d'affichage de formulaire
  • Comprendre Twig : mise en forme du formulaire
  • Comprendre Twig : les thĂšmes de formulaires8
  • Comprendre Twig : le thĂšme de formulaire Bootstrap 411
  • Configurer les champs de formulaire19
  • ALERTE SYMFONY 56
  • RĂ©cupĂ©rer et sauvegarder les donnĂ©es du formulaire13
  • Effectuer une redirection vers la page de la nouvelle annonce
  • Utiliser les messages Flash pour notifier le visiteur15
  • Comprendre Twig : les inclusions de template

Aller plus loin avec les formulaires

  • CrĂ©er des sous-formulaire avec les CollectionType16
  • Comprendre Twig : personnaliser l'affichage des sous-formulaires32
  • Ajouter un Ă©lĂ©ment dynamiquement grĂące au prototype du CollectionType54
  • Supprimer un Ă©lĂ©ment dynamiquement grĂące au CollectionType8
  • Faire persister les Ă©lĂ©ments liĂ©s avec le CollectionType10
  • Correction d'un bug sur les index des sous-formulaires3
  • Rendre le champ "slug" non obligatoire (option required)5
  • La validation de formulaire avec Symfony14
  • Valider l'unicitĂ© d'une entitĂ© et Ă©viter les doublons !2
  • CrĂ©er un formulaire d'Ă©dition pour nos annonces20
  • Valider les sous-formulaires du CollectionType13
  • Correction d'un bug lors de la suppression d'Ă©lĂ©ments du CollectionType5
  • Refactorisation du code entre les formulaire de crĂ©ation et d'Ă©dition3
  • Versionning de notre avancement avec GIT3

Les utilisateurs et l'authentification dans Symfony

  • CrĂ©ation d'une entitĂ© User pour stocker nos utilisateurs4
  • La relation OneToMany entre les annonces (Ad) et les utilisateurs (User)8
  • Mise Ă  jour de la Fixture pour crĂ©er de faux utilisateurs6
  • Des avatars alĂ©atoires pour nos faux utilisateurs avec RandomUser.me2
  • L'encodage des mots de passe de nos utilisateurs3
  • DĂ©couverte de l'interface UserInterface1
  • Authentification : dĂ©clare un nouveau provider (entitĂ© User)
  • Authentification : crĂ©er le formulaire de connexion2
  • Authentification : authentifier rĂ©ellement l'utilisateur3
  • Authentification : permettre Ă  l'utilisateur de se dĂ©connecter
  • Authentification : repĂ©rer les erreurs avec la classe AuthenticationUtils6
  • CrĂ©er le formulaire d'inscription : le RegistrationType6
  • Refactorisation du code entre les classes AdType et RegistrationType4
  • Enregistrer les donnĂ©es du formulaire d'inscription2
  • Valider le formulaire d'inscription10
  • CrĂ©er une confirmation de mot de passe durant l'inscription5
  • Mise Ă  jour de la barre de navigation
  • CrĂ©er un formulaire d'Ă©dition du profil utilisateur8
  • CrĂ©er un formulaire de modification du mot de passe5
  • Sauvegarder le nouveau mot de passe17
  • CrĂ©er une erreur personnalisĂ©e sur le formulaire de modification de mot de passe9

Intégration des utilisateurs dans le reste du site

  • Afficher l'auteur dans la page d'une annonce
  • CrĂ©er une page de profil pour les utilisateurs1
  • Faire les liens vers la page de profil d'un utilisateur
  • CrĂ©er la page "Mon compte"
  • Ajouter des liens de gestion du compte utilisateur2
  • Mise en place d'une dropdown dans la barre de navigation4
  • Prendre en compte l'utilisateur connectĂ© lorsqu'on créé une annonce5
  • Versionning de notre avancement avec GIT

La sécurité et les autorisations dans Symfony 4

  • Mise en place des rĂŽles d'utilisateurs2
  • Modification de la Fixture pour crĂ©er un rĂŽle ADMIN et un administrateur1
  • RĂ©cupĂ©ration des rĂŽles dans l'entitĂ© User9
  • SĂ©curiser le AdController avec les annotation @IsGranted() et @Security()3
  • SĂ©curiser le AccountController avec les annotations @IsGranted() et @Security()
  • Afficher des liens et bouton en fonction du statut de l'utilisateur
  • Permettre aux utilisateurs de supprimer leurs annonces5
  • Versionning de notre avancement avec GIT2
  • Conclusion et ouvertures

Gérer les pages d'erreurs dans Symfony 4

  • Comprendre la gestion des pages d'erreurs dans une application Symfony 4
  • CrĂ©er une page d'erreur 404 personnalisĂ©e et la tester12
  • CrĂ©er une page d'erreur 403 personnalisĂ©e et la tester
  • Faire attention au cache en environnement de production

Gestion des réservations

  • CrĂ©ation d'une entitĂ© Booking et migration de la base de donnĂ©es
  • Modification de la Fixture pour ajouter de fausses rĂ©servations15
  • CrĂ©ation du formulaire de rĂ©servation
  • Modifier l'apparence du champ DateType avec l'option "widget"2
  • Ajout d'un champ de commentaire sur les rĂ©servations3
  • CrĂ©ation du lien de rĂ©servation Ă  partir d'une annonce
  • SĂ©curiser la page de rĂ©servation avec l'annotation @IsGranted()
  • Enregistrer une rĂ©servation en calculant automatiquement le montant2
  • Affichage d'une rĂ©servation existante9
  • Utiliser un paramĂštre GET pour modifier l'affichage d'une rĂ©servation2
  • Validation du formulaire de rĂ©servation (partie 1)9
  • Prendre en compte la disponibilitĂ© d'une annonce lors de la rĂ©servation12
  • Utiliser un calendrier Javascript pour empĂȘcher le choix de dates indisponibles18
  • Utiliser un DataTransformer pour gĂ©rer les dates au format français13
  • Validation des dates du formulaire (partie 2)
  • Calculer le nombre de nuits et le montant de la rĂ©servation en Javascript11
  • CrĂ©ation d'une page de liste des rĂ©servations
  • Versionning de notre avancement avec GIT

Gestion des commentaires et notations

  • CrĂ©ation d'une entitĂ© Comment pour stocker les avis des visiteurs
  • Modification de la Fixture pour ajouter de faux commentaires
  • Affichage des commentaires sur la page d'une annonce
  • Installation de FontAwesome pour bĂ©nĂ©ficier d'icĂŽnes !
  • Afficher les notes sous forme d'Ă©toiles4
  • Factorisation du template d'affichage des notes sous forme d'icĂŽnes
  • Calculer et afficher la note moyenne d'une annonce1
  • Affichage des moyennes sur l'ensemble des annonces4
  • Personnaliser le CSS afin d'avoir des Ă©toiles dorĂ©es pour les notes
  • Affichage du formulaire de commentaire sur une rĂ©servation
  • Enregistrer les donnĂ©es du formulaire de commentaire5
  • S'assurer qu'un visiteur ne commente qu'une seule fois une annonce6
  • Affichage des notes sur la liste des rĂ©servations1

[Optionnel] Refonte visuelle et uniformisation

  • Partie 1 : modifications CSS pour des changements globaux
  • Partie 2 : Uniformisation des espacements et du format des prix
  • Partie 3 : Refonte du formulaire de crĂ©ation d'une annonce1
  • Partie 4 : Refonte du formulaire d'Ă©dition du profil
  • Partie 5 : Refonte du formulaire d'inscription
  • Partie 6 : Refonte du formulaire de modification du mot de passe
  • Partie 7 : Mise en place du Responsive avec la balise mĂ©ta viewport !

Créer une interface d'administration pour notre application

  • CrĂ©ation du controller d'Administration des Annonces : le AdminAdController10
  • Mise en place d'un habillage diffĂ©rent au sein de l'administration
  • Mise Ă  jour de la barre de navigation
  • SĂ©curitĂ© : ProtĂ©ger l'accĂšs Ă  toute l'administration grĂące aux ACL3
  • CrĂ©er une page de connexion spĂ©cifique pour l'administration
  • CrĂ©ation d'un Firewall particulier pour l'administration4
  • CrĂ©er le formulaire de connexion Ă  l'administration13
  • Permettre Ă  l'administrateur de se dĂ©connecter2
  • CrĂ©ation du formulaire d'Ă©dition des annonces7
  • Mettre en place un thĂšme de CollectionType Ă  nouveau22
  • Permettre Ă  l'administrateur de supprimer une annonce
  • Exercice : affichez la liste des commentaires !
  • Solution : affichez la liste des commentaires !
  • Exercice : crĂ©ez le formulaire d'Ă©dition d'un commentaire
  • Solution : crĂ©ez le formulaire d'Ă©dition d'un commentaire
  • Exercice : permettez Ă  l'administrateur de supprimer un commentaire
  • Solution : permettez Ă  l'administrateur de supprimer un commentaire
  • Exercice : affichez la liste des rĂ©servations
  • Solution : affichez la liste des rĂ©servations1
  • DĂ©couverte du type de champ EntityType pour l'Ă©dition d'une rĂ©servation
  • Le problĂšme de la validation par l'entitĂ© Booking dans 2 formulaires diffĂ©rents1
  • DĂ©couverte de la notion de Groupes de Validation (ValidationGroups)9
  • Recalculer le montant d'une rĂ©servation lors de la modification de l'annonce
  • Permettre Ă  l'administrateur de supprimer une rĂ©servation
  • Versionning de notre avancement avec GIT

Découverte du concept de Service : mise en pratique avec la Pagination

  • Introduction aux mĂ©thodes des Repositories pour rĂ©cupĂ©rer les donnĂ©es
  • Mise en place HTML et utilisation du findBy() pour paginer !
  • Placer des contraintes sur les paramĂštres des routes grĂące aux Requirements4
  • Rendre dynamique la pagination HTML1
  • DĂ©couverte de la notion de Service pour la pagination
  • CrĂ©ation du service de pagination
  • Factorisation du Twig concernant la pagination
  • IntĂ©grer l'affichage de la pagination dans le service de pagination3
  • Rendre configurable le service de pagination grĂące au fichier "services.yaml"
  • Aider les futurs dĂ©veloppeurs avec les exceptions
  • Conclusion : la notion de services et ses avantages
  • Versionning de notre avancement avec GIT

DĂ©couverte du DQL et crĂ©ation du Dashboard : Les requĂȘtes avec Doctrine

  • Mise en place statique du Dashboard dans l'administration4
  • Nos premiĂšres requĂȘtes DQL6
  • Les fonctions d'agrĂ©gation et le tri5
  • Extraire la rĂ©cupĂ©ration des donnĂ©es du Controller grĂące Ă  la notion de Service
  • DĂ©couverte du QueryBuilder pour remplir la homepage du site8

Découverte de Webpack Encore : prendre soin de ses fichiers CSS et JS !

  • Installation de Webpack Encore dans notre projet4
  • Mise en place de la bonne structure des fichiers1
  • Fusionner des fichiers CSS en un seul fichier optimisĂ©11
  • Le versionning des fichiers CSS et JS afin de contourner les problĂšmes de cache1
  • Utiliser SASS dans nos fichiers CSS grĂące Ă  Webpack Encore3
  • Traiter nos fichiers Javascript avec Webpack Encore17
  • Installation du package Bootstrap avec NPM1
  • Pouvoir utiliser jQuery partout : le problĂšme des modules Webpack13
  • CrĂ©er plusieurs fichiers Javascript pour optimiser les chargements2
  • Mise Ă  jour de l'interface d'administration
  • Conclusion : non nĂ©cessaire mais tellement avantageux !
  • Versionning de notre avancement avec GIT

Déploiement de l'application en production

  • CrĂ©ation d'un dĂ©pĂŽt Git sur la plateforme GitHub et premier "push" de code
  • DĂ©couverte du fichier .gitignore et des fichiers ignorĂ©s2
  • HĂ©bergement MutualisĂ© : introduction3
  • GĂ©nĂ©rer le fichier .htaccess avec le pack symfony/apache-pack8
  • HĂ©bergement MutualisĂ© : mise en ligne avec accĂšs SSH6
  • HĂ©bergement MutualisĂ© : mise en ligne sans SSH
  • HĂ©bergement MutualisĂ© : faire des mises Ă  jour sans SSH
  • HĂ©bergement MutualisĂ© : faire des mises Ă  jour avec SSH
  • Heroku : mise en place de l'application et lien avec GitHub4
  • Heroku : mise en place de la base de donnĂ©es et mises Ă  jour50

SECTION BONUS : Vidéos à venir sur différents sujets

  • ⚡ AJAX & SYMFONY : INITIATION13
  • 🚀 SYMFONY/TWIG : CRÉER SES PROPRES FILTRES !1
  • đŸŽ¶ SYMFONY : L'AUTOWIRING ET LE CONTAINER DE SERVICES