Développement d'un site e-commerce avec Symfony 6

Développement d'un site e-commerce avec Symfony 6

Episode 3 : Création de page avec symfony

06-welcome-symfony.png

Bienvenue dans un nouvel épisode de développement d'un site e-commerce avec Symfony 6, aujourd'hui nous allons apprendre à créer une page avec Symfony.

La page que vous voyez actuellement a été obtenu après avoir tapé la commande dans l'invite de commande ou un terminal.
Pour ma part j'utilise le terminal intégré à PhpStorm.

symfony serve

Essayer d'actualiser votre navigateur, vous remarquez que cette page change de couleur au fur et à mesure. N'est ce pas cool les amis??

Cette page est juste là pour nous dire bonjour à la manière de Symfony.
Notre objectif est de remplacer cette page par la nôtre.
Avant de créer notre belle première page Symfony, laissez-moi vous donner une petite formule mathématique pour la création de pages avec Symfony.
N'ayez du tout pas peur, nous n'allons pas faire de math et laissez-moi vous avouer un truc, les math et moi ça ne colle pas.
Bon, trêve de bavardage, voici la formule:
Route + Contrôleur = Page.
Lorsque vous souhaitez créer une page dans Symfony, vous aviez deux étapes:

  1. La premiere étape consiste à définir la route.
    Une route définie l'URL de la page que vous souhaitez.

  2. La seconde étape consiste à définir le contrôleur.
    Le contrôleur est le fichier dans lequel vous allez écrire votre code pour construire la page par exemple en HTML ou encore le JSON.

Définissons alors notre route.
Pour cela ouvrons le fichier routes.yaml situé dans le dossier config (config/routes.yaml) et ajoutons le code suivant:

# config/routes.yaml
index:
      path: /
      controller: App\Controller\DefaultController::index

Hé les amis, ce code que vous venez d'écrire est ce qu'on appelle du yaml.
C'est un format de configuration clef/valeur séparé par les deux points (:).
Attention à l'indentation, dans le code précédent, l'indentation se fait avec quatre espaces.

Afin que vous ne soyez pas trop perdu, laissez-moi vous montrer mon fichier routes.yaml:

06-routes.png

Une explication du code écrit dans le fichier routes.yaml s'impose :

  • index:
    Représente le nom de la route, dans symfony toute route a forcement un nom et est unique aussi.

  • path: /
    Création d'une route unique dont l'URL est /

  • controller: App\Controller\DefaultController::index.
    Représente le contrôleur qui est appelé (DefaultController) et la méthode exécutée (index).
    Concrètement cette ligne signifie, lorsque l'utilisateur accede à l'URL /, la méthode index du contrôleur DefaultController sera exécutée.

La prochaine étape consiste alors à créer ce DefaultController et la méthode index. Pour cela rendez-vous dans le dossier src/Controller et créons une classe DefaultController.php et mettons le code suivant dedans:

<?php

namespace App\Controller;

use Symfony\Component\HttpFoundation\Response;

class DefaultController
{
    public function index()
    {
        return new Response('Ma superbe page avec symfony!');
    }
}

Dans cette class, nous voyons bien notre méthode index.
Cette méthode retourne (return) un nouvel objet de type Response (new Response) et cet objet Response provient du composant HttpFoundation.
D'ou la deuxième ligne : use Symfony\Component\HttpFoundation\Response;.
la premiere ligne namespace App\Controller; indique l'emplacement de la classe DefaultController.
Chaque classe dans Symfony doit être placée dans un namespace.
Si la notion de namespace vous semble abstraite, penser simplement à un dossier dans windows.
Et dans un dossier on ne peut pas avoir deux fichiers portant le meme nom. Le dossier src est identifié par Symfony comme étant App.
Si votre serveur est toujours actif, il vous suffit d'actualiser la page. Et vous verrez cette page:

Screen Shot 2022-02-01 at 02.01.06.png

Bravo les amis, Vous venez de créer votre premiere page avec Symfony!

Mais pour créer une simple page, nous avons écrit dans deux fichiers distincts, que diriez-vous si nous créons une deuxième page en utilisant uniquement un fichier?

Si cela vous intéresse, alors regardez l'épisode 4 de la série. A bientôt pour d'autres tutoriels.