Avec Flask, nous allons pouvoir utiliser du python sur les page html, pour pouvoir récupérer des variable, ou utiliser des boucles pour pouvoir afficher différents éléments de la base de données sur une page internet.
La première chose à regarder c’est quelles données souhaitons nous afficher.
Ici nous allons afficher le contenue d’une base de données que voici :
element1 = {‘image’:‘https://risibank.fr/cache/medias/0/27/2718/271849/full.png’, ‘texte’:‘Formation : Devenir trop cool.’} |
Pour cette exemple, nous avons des éléments contenant un champ ‘image’ avec l’url d’une image, et un champ ‘texte’ contenant une description.
Il va falloir déjà créer le widget de ces éléments. En effet tous les éléments que l’on va vouloir afficher ont le même design, donc on globalise le tout dans un widget.
plus d’info sur la documentation sur les widgets.
Voici un widget pour l’exemple : Vignette.html
<div class=« bg-white rounded-lg flex flex-col items-center »> |
On y remarque, le {{element[‘image’]}} et le {{element[‘image’]}}, les deux éléments de mes données ‘image’ et ‘texte’.
Le reste ne sont que des balises html classique pour mettre en forme, à vous de designer vos widgets comme vous l’entendez.
Ici on aimerai placer le widget plusieurs fois sur la page, dans une boucle, pour prendre toutes les données, peut importe leur nombre, si l’on en rajoute dans la base de données, ou si on en retire.
On va donc mettre notre widget dans une boucle, sur notre page.
<div class=« w-4/5 grid grid-cols-2 gap-4 »> |
On vois qu’on a une boucle sur un tableau nommé ‘tableau’.
Il ne reste qu’as appeler cette page, ici appeler ‘Accueil.html’ et de lui donner le tableau contenant les données dans la variable ‘tableau’ :
@app.route(« / ») |