Apprendre Symfony 7 par la création d'un site e-commerce

Je vous propose d’installer notre tout premier projet Symfony sur votre machine. Conservons ce projet de "test" pour les prochaines vidéos afin de faire connaissance avec l'outil Symfony.

Le principal avantage de Symfony est l'organisation qu'il nous pousse à adopter. Nous allons découvrir les deux dossiers les plus important à ce stade de la formation : Les dossiers /src et /templates pour illustrer et comprendre le modèle MVC !

Nous pourrions lancer Symfony à l'aide d'un serveur comme Apache, Nginx etc mais pourquoi ne pas utiliser le serveur interne de Symfony pour faire fonctionner notre application ? C'est aussi l'occasion de faire connaissance pour la première fois avec la CLI de Symfony installée précédemment.

Créons ensemble notre première page pour découvrir les concepts de Controller et Route dans Symfony. Nous allons faire les choses manuellement dans un premier temps pour découvrir ensuite toute la puissance de la CLI de Symfony (qui fait tout pour nous).

Nous avons créé ensemble notre premier controller et notre première vue à l'aide de la CLI de Symfony. Je vous propose dans cette session de découvrir les bases et les fondations de Twig, le moteur de template de Symfony.

Entrons dans le vif sur sujet ! Mettons de côté notre premier projet Symfony 7 de test et installons le projet réel qui va accueillir nos développements e-commerce.

Nous allons créer ensemble notre premier controller pour accueillir notre homepage. Nous en profiterons pour intégrer Bootstrap dans notre projet et faire connaissance avec les bonnes pratiques en matière d'asset et d'héritage de template.

On découvre ensemble le fichier security.yaml de Symfony 7 qui va nous permettre de définir des règles d'accessibilités et de sécurité. Enfin, je vous propose de créer, à l'aide la console, notre première entité, l'entité User().

Afin de pouvoir utiliser notre base de donnée dans notre projet Symfony, nous allons faire connaissance avec l'ORM Doctrine ! Un outil puissant que je vous propose de configurer dans cette session.

Maintenant que nous avons créé notre première entité, nous devons demander à Symfony de faire de cette entité, une table en base de donnée. Occupons-nous de la connexion à la base de donnée, découvrons l'ORM Doctrine et les migrations.

Place à la création du formulaire d'inscription à l'aide de la console Symfony pour permettre à nos utilisateurs de s'inscrire sur notre site. En une commande, on génère notre formulaire. Créons ensuite le controller et la vue Twig qui l'accompagne.

Maintenant que notre formulaire permet à nos utilisateurs de s'inscrire, il nous faut sauvegarder les données en base de donnée. Voyons comment utiliser doctrine dans notre controller pour stocker les données.

Il est bien sûr inconcevable de stocker les mots de passe de nos utilisateurs en clair dans notre base de donnée. Dans cette session, nous allons découvrir la UserPasswordEncoderInterface de Symfony pour encoder les mots de passe de nos utilisateurs.

Découvrons ensemble le composant Validator de Symfony afin d'ajouter des contraintes directement dans le builder de notre formulaire.

Nous allons désormais permettre à nos utilisateurs de se connecter à notre site. Nous allons donc découvrir une nouvelle commande de la console symfony : make:auth qui va générer pour nous le SecurityController et le Guard Authenticator.

Prenons quelques minutes ensemble pour découvrir des nouvelles fonctions TWIG et Symfony afin de personnaliser les vues de nos utilisateurs.

Ajoutons une fonctionnalité à notre espace membre : La possibilité pour un utilisateur de mettre à jour son mot de passe. Nous avons besoin ici d'utiliser une nouvelle interface : UserPasswordHasherInterface !

Utilisons désormais la puissance de Symfony et Twig pour gérer les Flash Message. Ce sont des notifications que nous gérons directement dans les controllers PHP afin de notifier nos utilisateurs.

Je vous propose dans cette session une mise à jour de notre template afin d'afficher nos nouveaux éléments dans les menus. Nous en profitons pour ajouter un peu de css custom pour personnaliser nos vues.

Un petit mot pour vous dire bravo ! Nous avons déjà fait ensemble un beau chemin, mais ce n'est pas terminé !

Découvrons les tests unitaires et fonctionnels afin de vérifier que nos méthodes et fonctions fonctionnent correctement. Nous découvrirons dans le même temps la logique de développement : Test first.

Écrivons ensemble notre tout premier test unitaire de manière. Nous nous assurerons ainsi, au fur et à mesure de nos développements, que la création d'un compte client fonctionne correctement.

Je vous propose maintenant d'ajouter EasyAdmin (Dernière version) dans notre projet Symfony. Mais c'est quoi EasyAdmin ? C'est un bundle Symfony permettant de rapidement disposer d'une administration (type CRUD) pour manager nos entités.

Installons EasyAdmin dans notre projet, créons notre premier dashboard et associons notre première entité User() à EasyAdmin. Vous allez découvrir comment mettre en place rapidement un dashboard attaché à une entité.

L'une des première choses que nous souhaitons faire avant d'attaquer la création de nos "produits", c'est la possibilité de les catégoriser. En ecommerce, comme vous le savez, proposer des catégories à nos utilisateurs pour filtrer les produits est essentiel.

Profitons de notre administration EasyAdmin pour lier notre entité Category(). Ainsi, nous pourrons facilement ajouter, éditer et supprimer des catégories.

Maintenant que nous avons les catégories à notre disposition, nous pouvons créer nos produits. Pour cela, je vous propose de créer une entité Product() et de découvrir le concept de relation avec Symfony. Oui ! Car nous avons besoin de créer un lien entre un produit et une catégorie.

Prenons quelques minutes pour lier notre entité Product() avec EasyAdmin. Nous devons ici gérer un nouveau cas de figure : La possibilité d'ajouter des images à nos produits. Je vous propose pour cela de découvrir la notion d'Event dans Symfony.

Créons ensemble la vue et le controller associé nous permettant d'afficher nos produits à nos utilisateurs.

Maintenant que nous avons des produits sur notre site, nous devons les afficher à nos clients. Créons le controller associé et affichons une vue détaillée du produit.

Element essentiel d'un site ecommerce : La barre de filtre ! Je vous propose ici de créer une classe qui représentera sous forme d'objet la recherche d'un utilisateur. Manipulons cet objet pour rechercher les produits associés et les afficher à nos clients.

Prenons quelques minutes pour améliorer nos vues et controllers de manière à rendre nos derniers développements plus efficaces.

Symfony nous offre un composant intuitif et simple à utiliser pour gérer nos sessions ! Je vous propose ici de le découvrir pour ensuite l'utiliser dans le développement du panier.

Allons-y ! Créons ensemble le panier. Pour cela, et pour nous permettre d'avoir du code propre et utilisable dans nos différents controllers, je vous propose de créer une classe Cart() pour gérer notre panier.

Juste avant qu'un utilisateur entre dans le tunnel d'achat, nous devons lui afficher une vue récapitulative du panier. Pour cela, servons-nous de notre classe Cart() pour appeler notre panier et créons la vue associée !

Dans la vue récapitulative précédemment créée, je vous propose de permettre à nos utilisateur de modifier leur panier avant d'entrer dans le tunnel d'achat. Ainsi, ils pourront ajouter des quantités et en supprimer. La encore, servons-nous de notre classe magique : Cart().

On s'occupe désormais de la dernière vue avant le paiement de l'utilisateur. C'est ici que nous rassemblons l'ensemble des informations pour guider l'utilisateur vers Stripe.

Validons ensemble l'ensemble des derniers développements effectués et apportons quelques précisions techniques.

Avant de permettre à nos utilisateurs d'entrer dans le tunnel de l'achat, nous devons créer l'entité représentant les adresses de livraison de nos utilisateurs.

Utilisons notre entité précédemment créée, pour permettre à nos utilisateurs dans leur espace membre de créer, modifier ou supprimer des adresses de livraison. Nous aurons besoin d'afficher toutes ces adresses dans le tunnel d'achat afin que l'utilisateur choisisse son adresse de livraison pour sa commande.

Je vous propose dans cette session de créer l'entité associée aux transporteurs que nous allons pouvoir proposer à nos clients dans le tunnel d'achat. Prenons quelques secondes ensuite pour faire le lien entre EasyAdmin et notre nouvelle entité puis ajoutons nos transporteurs.

Créons ensemble les entités les plus importantes de notre site Internet : Order() et OrderDetails(). Je vous propose ici d'adopter une organisation spécifique dans la création de nos entités. Une organisation sans jointure pour une raison que je vais vous expliquer dans cette session.

Entrons dans le vif du sujet : créons la première étape de notre tunnel d'achat. Nous allons proposer à nos utilisateurs de choisir leur adresse de livraison et leur transporteur. Si il ne dispose pas d'adresse nous allons les rediriger vers le formulaire de création.

Dans cette dernière phase du tunnel d'achat, nous avons besoin de créer une vue récapitulative de la commande avant que l'utilisateur passe au paiement. Prenons quelques secondes pour ajouter du CSS à cette page et la rendre plus attractive.

Je vous propose dans cette session d'enregistrer les informations de la commande de l'utilisateur en base de donnée. Nous enregistrons les données avant que l'utilisateur passe au paiement. Ceci pour nous permettre, plus tard, de mettre en place une logique de panier abandonné (Relance marketing etc...)

Prenons quelques minutes pour faire le lien entre nos nouvelles entités et EasyAdmin. Ceci pour nous permettre de manager nos entités depuis notre interfaces d'administration.

Profitons de cette session pour entrer dans le coeur d'Easyadmin et personnalisons la vue tableau et la vue détaillée de la commande.