Aller au contenu principal

Tableau trié avec Twig

Comment afficher les données de la table tbl_player dans un tableau HTML avec la possibilité de trier les colonnes

Schéma

Notions théoriques​

L'affichage de données sous forme de tableau est une tâche courante dans le développement web.

info

Twig, le moteur de template utilisé par Symfony, offre des fonctionnalités puissantes pour générer dynamiquement des tableaux HTML.

Pour implémenter le tri des colonnes, nous allons utiliser ces étapes :

  1. Le contrôleur passe les données et les informations de tri au template.
  2. Le template génère des liens de tri dans les en-têtes de colonnes.
  3. Le contrôleur gère les paramètres de tri lors de la requête suivante.
attention

Les points clés à retenir sont :

  • Utilisation des boucles Twig pour générer les lignes du tableau.
  • Génération dynamique des liens de tri dans les en-têtes de colonnes.
  • Passage des paramètres de tri via l'URL.
  • Utilisation de ces paramètres dans le contrôleur pour trier les données.

Quelques rappels sur l'opérateur ternaire​

  • Rappel sur la syntaxe de l'opérateur ternaire en PHP :

    $result = condition ? valeur_si_vrai : valeur_si_faux;
    astuce

    Pour en savoir plus sur les opérateurs ternaires en PHP, consultez Opérateur ternaire.

  • Rappel sur la syntaxe de l'opérateur ternaire en Twig :

    {{ condition ? 'valeur_si_vrai' : 'valeur_si_faux' }}
    info

    L'opérateur ternaire est très utile pour générer des valeurs dynamiques dans les templates Twig sans avoir à écrire des blocs conditionnels plus complexes.

Exemple de mise en application​

Voici un exemple de contrôleur et de template Twig pour afficher un tableau trié :

// src/Controller/PlayerController.php
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
use App\Repository\PlayerRepository;

class PlayerController extends AbstractController
{
    #[Route('/players', name: 'player_list')]
    public function list(Request $request, PlayerRepository $playerRepository): Response
    {
        $sort = $request->query->get('sort', 'name');
        $direction = $request->query->get('direction', 'asc');

        $players = $playerRepository->findAllSorted($sort, $direction);

        return $this->render('player/list.html.twig', [
            'players' => $players,
            'sort' => $sort,
            'direction' => $direction,
        ]);
    }
}
{# templates/player/list.html.twig #}
<table>
    <thead>
        <tr>
            <th>
                <a href="{{ path('player_list', {sort: 'name', direction: sort == 'name' and direction == 'asc' ? 'desc' : 'asc'}) }}">
                    Nom
                </a>
            </th>
            <th>
                <a href="{{ path('player_list', {sort: 'score', direction: sort == 'score' and direction == 'asc' ? 'desc' : 'asc'}) }}">
                    Score
                </a>
            </th>
        </tr>
    </thead>
    <tbody>
        {% for player in players %}
            <tr>
                <td>{{ player.name }}</td>
                <td>{{ player.score }}</td>
            </tr>
        {% endfor %}
    </tbody>
</table>

Etudions ce code​

Dans le contrôleur :

$sort = $request->query->get('sort', 'name');
$direction = $request->query->get('direction', 'asc');

Ces lignes récupèrent les paramètres de tri de l'URL, avec des valeurs par défaut.

$players = $playerRepository->findAllSorted($sort, $direction);

Cette ligne appelle une méthode personnalisée du repository pour récupérer les joueurs triés.

Dans le template :

<a href="{{ path('player_list', {sort: 'name', direction: sort == 'name' and direction == 'asc' ? 'desc' : 'asc'}) }}">

Ce code génère un lien pour trier par nom, en inversant la direction si le tri est déjà sur cette colonne.

{% for player in players %}
    <tr>
        <td>{{ player.name }}</td>
        <td>{{ player.score }}</td>
    </tr>
{% endfor %}

Cette boucle génère une ligne de tableau pour chaque joueur.

Test de mémorisation/compréhension​


Comment récupère-t-on les paramètres de tri dans le contrôleur Symfony ?


Quelle fonction Twig utilise-t-on pour générer l'URL de tri ?


Comment boucle-t-on sur les joueurs dans le template Twig ?


Comment inverse-t-on la direction de tri dans Twig ?


Où définit-on la logique de tri des joueurs ?


TP pour réfléchir et résoudre des problèmes​

Votre défi pour aujourd'hui est d'implémenter la méthode de tri dans le PlayerRepository.

Créez une méthode findAllSorted dans le PlayerRepository qui accepte les paramètres de tri (champ et direction) et retourne les joueurs triés en conséquence.

attention

Assurez-vous de gérer les cas où le champ de tri n'existe pas.


Bonne pratique - Valider les paramètres de tri côté serveur

Ne jamais faire confiance aux paramètres de tri fournis par l'URL : un utilisateur mal intentionné pourrait injecter un nom de colonne arbitraire dans la requête. Toujours valider contre une liste blanche ($allowedFields) avant d'utiliser le champ dans orderBy(). La direction (ASC/DESC) doit aussi être normalisée.

Une solution