RESSOURCES PYTHON WEBAPP LYCEE – Défis python

Défis web app

Lancer l'application et créer des pages

Défi 1 - Lance une webapp

Pour créer une application, on commence par les imports : from flask import Flask

Puis on créé la variable qui va contenir notre application avec la fonction Flask()

- app est le nom de la variable que l’on donne à notre application Flask. On peut l’appeler comme on veut mais d’habitude on laisse le nom app.
- notre variable est égale à la fonction Flask() qui permet de créer une nouvelle application.
- la fonction a comme paramètre le nom de l’application, tu peux aussi utiliser __name__ (oui il y a 2 _ de chaque côté du nom) ce qui permet de dire à Flask de nommer l’app automatiquement avec le nom du fichier python.

Une fois notre application créée, en toute fin de notre programme, on va lui demander de se lancer avec la fonction run(host= »0.0.0.0″, port= »3904″) de notre app.

=> Crée un nouveau projet de webapp et lance le !

Note : Si tu n’arrives pas à créer ton code avec les indications ci-dessus, tu peux aller visiter la page ressources sur les webapp Python pour trouver un code exemple.

Défi 2 - Affiche un texte sur la page d'accueil

Maintenant que tu as créé ta webapp, tu vas créer la première page de ta webapp !

Pour créer une page on commence par indiquer sa route, c’est à dire le chemin qui permet d’accéder à la page. Cette route va permettre de construire l’adresse URL de la page et pouvoir y accéder :

Pour créer une route on utilise la syntaxe : @app.route(« /cheminDeLaPage »).

Puis en dessous on va créer une fonction qui construit le contenu de la page.

=> Affiche un texte (« hello world » ou ton pseudo) sur la page d’accueil de ta webapp

Note : Si tu rencontres une erreur, vérifie l’ordre dans lequel tu as noté tes instructions…

Pour la route de la page d’accueil, qui est celle sur laquelle on veut arriver quand on lance notre app, on utilise simplement « / », pour une autre page on mettra son nom « /ma_page »

Notre fonction doit ensuite retourner la page à afficher, c’est à dire une chaine de caractère qui sera comprise comme une page HTML.

Défi 3 - Crée une seconde page avec un autre texte

Maintenant que tu sais comment créer des pages, tu vas pouvoir en créer une nouvelle avec la syntaxe @app.route(« /cheminDeLaPage »).

Tu vas pouvoir ensuite la voir en tapant comme URL « nomDuSite/cheminDeLaPage »

=> Crée une seconde page et affiche un autre texte sur cette page

Défis création de page HTML

Défi 4 - Créer une page HTML

Le langage HTML permet de créer le contenu de pages web. Pour créer une page HTML, il suffit de créer un fichier ma_page.html

A l’intérieur de ce fichier on va utiliser des balises pour organiser les différentes parties de notre page : des titres, des paragraphes, des images, des liens, des boutons…

Elles fonctionnent généralement par paires pour encadrer le contenu comme dans cet exemple :

=> Créé un fichier HTML avec un titre <h1> et un paragraphe <p>

Si tu veux en savoir un peu plus sur le langage HTML tu peux aller sur cette page.

Défi 5 - Afficher une page HTML

L’organisation de tes fichiers est très importante. Flask va aller chercher les fichiers HTML dans un dossier appelé « templates » comme sur l’image ci-contre :

La fonction que nous allons utiliser ensuite pour afficher un fichier HTML au lieu du texte comme tu as vu précédemment s’appelle render_template(« nom_du_fichier »). On commence par l’importer comme sur l’image ci-contre :

Note : Si tu as besoin d’aide pour cette partie des défis, tu peux aller regarder cette page ressources.

=> Afficher la page que tu viens de créer

Défi 6 - Ajouter des liens entre les pages

Si tu veux ajouter un lien vers autre page de ta webapp, tu peux utiliser la balise html de lien <a> et noter directement le chemin de page. Par exemple :

si on a dans le code Python on a :

en HTML on aura comme lien :

=> Ajoute un élément avec un lien pour changer de page

Défi 7 - Ajouter des variables dans ton fichier HTML

Tu peux également donner un argument en paramètre de la fonction render_template et l’intégrer à ton code html !

Il suffit de rajouter en argument de la fonction le nom de la variable dans ton code Python avec la syntaxe : render_template(« fichier.html », variable=valeur)

et dans ton fichier HTML, tu vas afficher une variable comme ceci: {{ variable }}

=> Crée un nouveau template HTML et ajoute un texte avec une variable que tu définis dans le code Python

Note : Si tu as besoin d’aide pour cette partie des défis, tu peux aller regarder cette page ressources.

Défis cookies et variables

Les trois prochains défis vont te permettre de mettre en place un système de cookies, de les créer et de les supprimer. Cela permet de stocker des informations entre les différentes pages de ton app.

Ces défis te permettent de prendre en main les ressources suivantes :

Pour découvrir comment faire des cookies cliques ici

Défi 8 - Fabriquer un cookie et l'afficher

Importe le module session, crée ta clef de sécurité et ajoute une variable de session, puis affiche là directement sur ta page html.

La variable session est directement utilisable depuis les templates html, pas besoin de la passer en paramètre de la fonction render_template

=> Créé un cookie et affiche le sur ta page d’accueil

Défi 9 - Affiche un texte différent s'il y a un cookie

Pour découvrir les syntaxes des conditions cliques ici

Utilise une condition pour afficher un message différent s’il y a des cookies où non

=> Créé une condition avec des cookies dans ta page HTML

Défi 10 - Efface tes cookies

Créé une route qui efface les cookies et redirige vers la page d’accueil.

Pour rediriger vers une autre page tu aura besoin d’importer et d’utiliser la fonction redirect()

Tu auras aussi besoin de créer une fonction qui créé des cookies et de faire des liens vers ces fonctions

=> Ajoute des liens à ta page créé au défi 9 pour créer un cookie et pour les supprimer puis teste là

Défis templates, blocks et widget

Les prochains défis vont te permettre de créer différents morceaux de pages et de les assembler pour avoir un seul modèle qui peut être réutilisé plusieurs fois.

C’est super utile quand on veut afficher des menus complexes ou des éléments complexes !

Ces défis permettent de prendre en main les ressources suivantes :

Pour découvrir comment créer des blocks et de widgets cliques ici

Défi 11 - Afficher les éléments d'une liste

Pour découvrir les syntaxes des boucles cliques ici

Crée une liste et utilise une boucle for dans ta page HTML pour afficher les différents éléments

=> Affiche les éléments de ta liste sur une page HTML

Défi 12 - Crée un template de base

La base de ton site va être ce que tu retrouves sur les différentes pages, l’en-tête, le menu…

Par la suite on construira le contenu spécifique des pages

=> Créé l’entête de ton site avec un titre

Défi 13 - Créé deux pages différentes

Tu peux maintenant créer le contenu de deux pages différentes qui utilisent cette base

=> Créé deux pages utilisant la même en-tête

Défi 14 - Crée un widget

Les widgets vont permettre d’afficher des éléments complexes, par exemple sur la page d’accueil de youtube il y a une manière identique d’afficher toutes les vidéos. Si l’on veut afficher plusieurs contenus différents avec la même forme, les widgets sont fait pour ça.

=> Créé un modèle de widget permettant d’afficher un titre et un texte

Défi 15 - Affiche les élements d'une liste dans des widgets

Voici une liste de dictionnaires composés de titre et de texte.

Utilise une boucle for et ton modèle de widget pour afficher tous les éléments de cette liste d’un seul coup

liste=[{'titre':'Waouh','texte':"C'est super fort les widgets"},{'titre':'Waouh','texte':"C'est super fort les widgets"},{'titre':'Waouh','texte':"C'est super fort les widgets"},{'titre':'Waouh','texte':"C'est super fort les widgets"},{'titre':'Waouh','texte':"C'est super fort les widgets"},{'titre':'Waouh','texte':"C'est super fort les widgets"}]

=> Affiche les différents éléments de la liste ci-dessus à l’aide de ton widget

Défi Bonus - Rends tout ça joli

Voici quelques ressources pour découvrir comment utiliser des balises html et faire de la mise en page à l’aide du framework Bulma :

- ressources html
- ressources bulma

=> Utilises les balises HTML et Bulma pour améliorer le rendu de tes pages

Défis formulaires

A travers ces défis, tu vas apprendre à récupérer des informations depuis un formulaire et les afficher.

Pour bien réussir ces défis, lis attentivement les ressources pour trouver tout ce dont tu as besoin.

C’est les derniers défis donc ils sont plus durs. Si tu reste coincé dessus, n’hésite pas à retourner vers le défi bonus juste avant et vous reverrez toutes ces notions en atelier la semaine prochaine !

Défi 16 - Créé un formulaire HTML

Création de formulaires

A l’aide des indications ci dessus créé une page HTML contenant un formulaire simple permettant de saisir son nom.

=> Créé la structure HTML d’un formulaire avec un champ pour saisir son nom

Défi 17 - Récupère une information et affiche là

Récupérer des données avec la méthode POST

Créé la fonction qui va permettre de récupérer les données du formulaire.

Pour cela tu as besoin de plusieurs choses :

- savoir si tu veux afficher la page ou récupérer les données, et donc traiter le cas où tu as une méthode POST et celui ou tu as une méthode GET
- stocker la valeur que tu récupère dans la session pour pouvoir l’afficher dans une autre fonctin
- créer la fonction qui affiche la valeur (et la page HTML qui va avec)

=> Récupère et affiche les éléments de ton formulaire

EXPERIMENTER