8 - Intégrer les données dans les vues (Symfony 6)

Dans cette 8ème vidéo de la série Symfony 6, nous abordons l'intégration de données dans les vues de notre projet.

Pour commencer, nous allons modifier notre entité “Categories” afin d'y ajouter une propriété permettant de les ordonner comme bon nous semble.

Nous allons donc ajouter les lignes suivantes dans le fichier “src/Entity/Categories.php”

    #[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.