TYPO3 : ​Intégration avec FLUID Template

Utiliser des boucles dans ses templates

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Utilisez les boucles pour afficher un tableau de données. Listez également des objets et personnalisez complètement la façon dont ils s'affichent.
05:23

Transcription

Dans cette vidéo, nous allons apprendre à faire une boucle sur un tableau de données. Pour cela, nous allons utiliser le viewhelper for. Vous pouvez utiliser cette fonctionalité, par exemple, pour afficher une liste d'enregistrements en provenance d'une extension. Pour cet exemple, nous allons utiliser la documentation de Typo3. Donc, nous allons commencer par lister les propriétés disponibles. Donc, la première, each, dans laquelle vous allez devoir insérer l'objet sur lequel vous souhaitez boucler. Ensuite, la propriété as, qui est le nom de la variable qui va contenir les valeurs sur lesquelles vous allez boucler. Donc, c'est vous qui allez pouvoir choisir le nom de cette variable Par exemple, ici, vous bouclez sur une liste d'employés avec un as, et vous allez utiliser la variable « employee » sans S sur laquelle vous allez boucler. Ensuite, vous avez la propriété key, qui va contenir la clé du tableau correspondant à l'élément courant. Vous avez ensuite la propriété reverse, qui va vous permettre d'inverser le sens de la boucle. Et pour finir, la propriété iteration, qui va contenir différentes variables qui vont vous permettre de mettre en forme le résultat, avec par exemple des classes paires ou impaires ou encore tout simplement de compter le nombre de résultats. Nous allons maintenant passer à un exemple. Donc, je vais pour cela utiliser l'exemple suivant, que je vais copier, et ajouter à mon template. Donc, je remarque ici que je boucle sur une liste d'employés, et je vais donc afficher leurs noms et leurs villes. Donc, il faut savoir que pour l'exemple, j'ai utilisé le viewhelper alias, qui permet de définir un tableau de variables. Donc, je vais maintenant sauvegarder, et afficher le résultat. Donc, pour gagner un peu de temps, je vais ajouter... ... la variable nocache à mon URL... ... qui va me permettre d'afficher la page non cachée. Je vois bien apparaître mon tableau de données. Passons maintenant à l'exemple suivant. Donc, ici, nous allons mettre en avant la propriété reverse. Donc, je remplace mon exemple. Je sauvegarde, et je vais rafraîchir mon frontend. Et voilà, je vois bien que mon tableau est trié dans l'ordre inverse. Passons maintenant à l'exemple suivant. Donc ici, nous allons utiliser la propriété key. Donc, même chose, je copie. Donc, je vois ici que j'ai nommé ma propriété key « entrynumber », qui va donc me permettre d'afficher les clés de mon tableau. Donc, je sauvegarde... ... et je recharge le frontend. Donc ici, je vois bien les clés qui apparaissent. Donc, pour vous montrer, je vais modifier une des clés... ... par exemple, 50. Je sauvegarde. Je recharge le frontend, et je vois bien ici la nouvelle clé apparaître. Il ne s'agit donc pas d'un comptage du tableau, mais plutôt de l'affichage de la clé du tableau, qui pourrait donc être du texte ou des nombres. Passons maintenant à l'exemple suivant. Donc ici, nous allons utiliser l'itération. Je copie... ... et je remplace mon code. Donc, je vois ici qu'une variable « iterator » a été définie... ... et je vois ici une condition... ... qui se base sur l'itération. Donc, ce qui va se passer ici, c'est que si je suis sur mon premier élément, donc, iterator.isfirst, je vais afficher le titre de ma colonne. Donc, je vais maintenant sauvegarder et afficher le frontend, Je vois bien ici que pour la première itération, j'affiche le titre de ma colonne. Donc maintenant, nous allons voir les fonctionnalités de comptage. Donc, vous avez ici iterator.index qui va compter les éléments mais qui va commencer à zéro, et iterator.cycle qui va également compter les éléments, mais en commençant à un. Donc, si je reviens sur mon frontend, je vois ici que l'index commence à zéro, et que le cycle commence à un. Ensuite, vous avez les propriétés isOdd et isEven. Ces propriétés sont utiisées ici dans une condition pour vous permettre d'ajouter un style de couleur. Donc, vous voyez dans l'exemple que les couleurs sont alternées. Ici vert, rouge, vert, rouge. Ceci est fait grâce aux iterators isOdd et isEven. Et pour finir, vous avez la propriété isLast, qui est utilisée une nouvelle fois dans une condition, et qui va vous permettre d'afficher la dernière ligne de votre itération, d'une manière spécifique. Et donc ici est également utilisé l'iterator.total qui permet d'afficher le nombre total d'éléments dans le tableau. Donc, si je reviens sur mon frontend, Je vois bien que ma colonne apparaît en dernier et que mon total d'employés est de six.

TYPO3 : ​Intégration avec FLUID Template

Apprenez à intégrer avec FLUID, le langage officiel de templating de TYPO3. Passez de la méthode classique des markers vers FLUID, et abordez les bonnes pratiques.

1h36 (24 vidéos)
Aucun commentaire n´est disponible actuellement
Logiciel :
TYPO3 6
Spécial abonnés
Date de parution :16 juin 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !