Dans cette 8ème vidéo de la série sur Symfony 6, nous abordons une étape cruciale du développement de notre projet : l'intégration des données dans les vues. Cette phase est essentielle pour rendre notre application dynamique et interactive, car elle permet d'afficher les informations stockées dans la base de données directement sur l'interface utilisateur.

Pour commencer, nous allons nous concentrer sur l'entité “Categories”. Cette entité représente les différentes catégories de notre application, et nous souhaitons maintenant y ajouter une fonctionnalité qui permettra de les organiser selon un ordre spécifique, plutôt que de les afficher dans un ordre aléatoire ou par défaut.

Pour cela, nous devons modifier le fichier “src/Entity/Categories.php” en y ajoutant une nouvelle propriété qui définira l'ordre des catégories. Cette propriété peut être un simple entier, représentant la position de chaque catégorie dans la liste. En ajustant cette valeur, nous pourrons contrôler précisément l'ordre d'affichage des catégories sur le site.

    #[ORM\Column(type: 'integer')]

    private $categoryOrder;

    //...



    public function getCategoryOrder(): ?int

    {

        return $this->categoryOrder;

    }



    public function setCategoryOrder(int $categoryOrder): self

    {

        $this->categoryOrder = $categoryOrder;



        return $this;

    }

Si nous souhaitons afficher la liste des catégories dans notre page d'accueil, nous aurons besoin de les sélectionner au moyen de la méthode findBy fournie par notre repository.

Nous pourrons donc les récupérer et les trier comme ceci

$categoriesRepository->findBy([], ['categoryOrder' => 'asc'])

Afin d'accéder à CategoriesRepository, nous utiliserons l'injection de dépendances dans notre méthode index de MainController, puis nous passons nos catégories en paramètre du render de notre vue twig.

    #[Route('/', name: 'main')]

    public function index(CategoriesRepository $categoriesRepository): Response

    {

        return $this->render('main/index.html.twig', [

            'categories' => $categoriesRepository->findBy([], ['categoryOrder' => 'asc'])

        ]);

    }

Nous aurons accès à une variable categories dans le fichier templates/main/index.html.twig. Nous pouvons boucler sur cette variable et accéder à ses différentes propriétés, par exemple en écrivant

{% for category in categories %}

	<h2>{{ category.name }}</h2>

{% endfor %}

Nous pourrons mettre en forme et ajouter des liens et conditions comme suit

            {% for category in categories %}

                {% if category.parent == null %}

                    <div class="col-12">

                        <h2>{{ category.name }}</h2>

                    </div>

                {% else %}

                    <div class="col-4">

                        <div class="card h-100">

                            <div class="card-body">

                                <h3 class="card-title">{{ category.name }}</h3>

                                <a href="{{ path('categories_list', {slug: category.slug}) }}" class="btn btn-primary">Voir les produits</a>

                            </div>

                        </div>

                    </div>    

                {% endif %}

            {% endfor %}

Vous trouverez plus de détails dans la vidéo ci-dessus.

Obtenir de l'aide

Pour obtenir de l'aide, vous pouvez accéder au serveur Discord pour une entraide par chat.