8 - Live Coding : Afficher les données avec Symfony 5.1

Par Nouvelle-Techno.fr le 11 juillet 2020 - Catégories : Tutoriel Symfony Live-Coding step-1-download-the-bundle)

Dans cet article nous voyons comment afficher les données provenant de la base avec Symfony 5.

Après avoir créé la structure de stockage des données, il est nécessaire de préparer les vues permettant de les afficher.

Le contrôleur

Nous allons dans "MainController" pour effectuer quelques modifications.dans la méthode "index".

Cette méthode devra aller chercher les annonces dans la base et les transmettre à notre vue "twig".

Dans un premier temps, nous allons utiliser l'injection de dépendances de Symfony pour aller chercher la classe "AnnoncesRepository" en modifiant la fonction comme suit

public function index(AnnoncesRepository $annoncesRepo)

Nous allons ensuite aller chercher les informations et les transmettre à la vue en modifiant la partie "render" comme ceci

// Le "findBy" ci-dessous va chercher les annonces "actives" et triées par ordre décroissant
return $this->render('main/index.html.twig', [
    'annonces' => $annoncesRepo->findBy(['active' => true], ['created_at' => 'desc']);,
]);

La vue

On va ensuite dans le fichier "index.html.twig" dans le dossier "main" dans "templates".

Nous allons modifier ce fichier en faisant une boucle pour parcourir les annonces.

{% for annonce in annonces %}

{% endfor %}

La structure du fichier twig dépendra de votre template HTML mais l'essentiel du code pour afficher les annonces devra ressembler à ceci

{% extends 'base.html.twig' %}

{% block title %}Accueil{% endblock %}

{% block body %}
    {% for annonce in annonces %}
        <div>
            {# avec asset on va chercher l'image dans le dossier uploads. Le 0 permet de prendre la 1ère #}
            <img src="{{ asset('uploads/images/annonces/' ~ annonce.images[0].name) }}" alt="{{ annonce.title }}">
        </div>
        <div>
            {# On va chercher le titre #}
            <h1>{{ annonce.title }}</h1>

            {# on récupère la catégorie #}
            <p>Catégorie : {{ annonce.categories.name }}</p>

            {# on affiche le contenu sans balises HTML #}
            <p>{{ annonce.content|striptags }}</p>
        </div>
    {% endfor %}
{% endblock %}

Voilà pour la base, la vidéo va plus loin dans le détail.

Obtenir de l'aide

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

#Tutoriel #Framework #Models #Views #Symfony #Live-Coding #symfony5 #donnees #afficher #step-1-download-the-bundle)