Ressources Magic Makers

 

Site en maintenance

 
Nous sommes actuellement entrain de mettre à jour les ressources de ce site.
Pendant la mise à jour vous pouvez retrouver tous les nouveaux contenus sur le site
 

https://lp-magicmakers.fr/

 
 

Affichage de widgets dynamiques

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.

Les données à afficher.

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.’}
element2 = {‘image’:‘https://www.zupimages.net/up/22/38/6bvy.jpg’, ‘texte’:‘Formation : Gestion de son temps, dire non aux autres.’}

DBtableau = [element1, element2, element1, element2]

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.

Mise en forme des données sur un widjet

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 »>
  <img src={{element[‘image’]}} class=« h-3/5 »>
  <p class=« mt-5 »> {{element[‘texte’]}}</p>
</div>

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.

Placer le widjet sur la page.

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 »> 
    {% for element in tableau %}
      {% include « Vignette.html » with context %}
    {% endfor %}
    </div>

On vois qu’on a une boucle sur un tableau nommé ‘tableau’.

Le python pour gérer tout ça.

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(« / »)
def Accueil():
  return render_template(« Accueil.html », tableau = DBtableau)