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

Prenons quelques minutes pour découvrir étape par étape les points clés de la formation. Qu'allez-vous apprendre ? A quoi va ressembler notre site une fois la formation terminée ? Mailjet, Stripe, EasyAdmin, les controllers, les vues, les formulaires ... Tout cela n'aura plus de secret pour vous dans quelques heures.

Avant tout de chose, posons les bases ! Qu'est-ce que Symfony, à quoi sert-il et pourquoi l'utiliser ? Symfony est un framework, voyez cela comme une grosse boîte à outils à votre disposition pendant votre développement.

Vous avez besoin de quelques outils pour faire fonctionner Symfony et développer efficacement. Comme promis dans la vidéo, rendez-vous sur :

- https://getcomposer.org/

- https://www.mamp.info/en/downloads/

- (facultatif) https://cmder.net/

- https://symfony.com/doc/current/setup.html

Le choix de l'éditeur de code est une étape essentielle. Prenez votre temps pour bien le choisir. Il sera votre compagnon de route tout au long de la formation et ensuite dans vos développements. Je vous propose ici de découvrir deux alternatives intéressantes et polyvalentes.

Découvrons comment installer Symfony sur notre machine et par la même occasion, je vous propose d'installer la CLI de Symfony. Elle vous permettra d'accéder plus facilement à toutes les fonctionnalités du framework.

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.

Vérifiez grâce à ce Quiz si vous avez bien compris les bases de Symfony 5.

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é !

Vérifions ensemble si tout est clair pour vous avec ce Quiz consacré à la sécurité, aux commandes de base et aux aspects liés aux utilisateurs dans Symfony 7.

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.

Qu'est-ce que Stripe ? Quels sont ses avantages ? Avons-nous d'autres solutions à notre disposition pour encaisser les commandes ? Découvrons ensemble dans cette section comment mettre en place Stripe pour permettre à nos utilisateurs de payer et passer leur commande, en tout sécurité.

La première étape simple consiste à créer notre compte utilisateur sur Stripe. Ainsi, nous aurons à notre disposition nos clés d'API et l'ensemble des interfaces de Stripe pour suivre nos paiements.

Ouvrons notre terminal et procédons à l'installation des dépendances nécessaires pour faire fonctionner Stripe. Le tout, en une commande, avec composer !

Lorsqu'un utilisateur valide sa commande,  il doit être ensuite invité à saisir sa carte bleue pour finaliser son achat. Vous allez apprendre dans cette session à "brancher" notre application Symfony à Stripe et à intégrer la page de paiement.

Nous envoyons à l'API Stripe le contenu de la commande de l'utilisateur avec l'ensemble des produits du panier. Ajoutons dans notre logique, le transporteur choisi et le prix associé.

Une chose à ne pas négliger : Ou envoyer nos utilisateurs lorsqu'ils quittent le tunnel d'achat ? Nous avons besoin ici de créer deux vues : Une première pour remercier nos utilisateurs si le paiement est valide. Une seconde si l'utilisateur quitte le tunnel d'achat.

Il nous faut désormais permettre à nos utilisateurs de voir leurs commandes dans leur espace membre. Pour ça, il nous faut créer une requête spéciale dans le repo associé, un controller et des vues !

Je vous propose dans cette session de découvrir les avantages liés à l'utilisation d'un service tiers pour la gestion de nos emails transactionnels. Bien que Symfony propose Swift Mailer, découvrons ensemble l'API Mailjet pour gérer nos mails transactionnels. (Template, délivrabilité etc ...)

Découvrons Mailjet en créant dès maintenant notre compte. Je vous propose de parcourir les différentes interfaces pour ensuite s'arrêter sur la plus essentielle, l'interface de création des templates de nos emails.

Passons dans le terminal et à l'aide composer, installons la librairie Mailjet dans notre projet Symfony. La libraire va nous permettre de nous connecter à l'API de Mailjet grâce au compte que nous avons créé dans la session précédente.

Pour plus de facilité dans nos manipulations et pour alléger nos controllers, je vous propose de créer une petite classe qui va gérer l'envoi de nos emails.

Je vous propose ici de découvrir l'interface de Mailjet nous permettant de concevoir des templates réutilisables par Symfony et contenant des variables personnalisables.

Utilisons la méthode de la classe créée dans la session précédente pour envoyer nos emails à nos utilisateurs. Occupons-nous dans un premier temps du mail de confirmation d'inscription et de confirmation de commande.

Découvrons ensemble les prérequis techniques pour bien choisir son hébergeur et passer son projet Symfony en production sur un hébergement mutualisé : Hostinger.

Utilisons la puissance de GIT pour déployer automatiquement notre projet Symfony sur notre espace de stockage : Hostinger.

Je vous propose de découvrir les étapes essentielles permettant à votre projet Symfony de fonctionner efficacement en production.