Différences

Ci-dessous, les différences entre deux révisions de la page.

--- isn:flask_replit [2019/12/04 14:11] – créée techer.charles_educ-valadon-limoges.fr
+++ isn:flask_replit [2019/12/10 17:39] (Version actuelle) – [Exécution de l'application] techer.charles_educ-valadon-limoges.fr
@@ Ligne 1: / Ligne 1: @@
 ====== Activité : utiliser Flask avec le site repl.it ======
+==== J'accède au site repl.it ====
+  * J'accède au site à l'adresse https://repl.it/ pour créer un nouveau repl avec le bouton **New repl** utilisant le langage **Python** :
+{{:snt:localisation:snt_mobilite_repl_01.png?600|}}
+Le site de repl.it du projet se présente en 3 parties :
+  - à **gauche** **l'arborescence** de fichiers ;
+  - au **centre** **l'éditeur** de fichier ;
+  - à **droite** la **console** montrant l'exécution du programme.
+{{:isn:replit_01.png|}}
+===== Préparation du projet =====
+  * dans le dossier du projet le fichier principal python de l'application est **main.py** ;
+  * dans le dossier , je crée un sous-dossier **templates** ;
+  * dans le sous-dossier **templates** je crée une page **index.html**
+<WRAP center round info>
+Le sous-dossier **templates** va contenir toutes les pages html du projet
+</WRAP>
+=== Le résultat à obtenir ====
+{{:isn:replit_02.png?200|}}
+===== Le fichier python de l'application  =====
+  * Il est important, pour le lancement de l'application, d'ajouter en paramètre l'adresse 0.0.0.0 pour le serveur. Cela donne le contenu suivant dans le fichier **app.py** :
+<file python app.py>
+#! /usr/bin/python
+# -*- coding:utf-8 -*-
+from flask import Flask, render_template, request
+app = Flask(__name__)
+@app.route('/')
+def index():
+    return render_template('index.html')
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', debug=True)
+</file>
+==== Explications des instructions ====
+  * l'instruction from permet d'importer
+    * le module **Flask** qui gère le serveur HTTP ;
+    * le module **render_template** qui permet d'utiliser les pages HTML comme modèle ou **template** ;
+    * le module **request** pour gérer les **envois** de données avec la **méthode GET ou POST** ;
+    * la création de la variable **app** est fondamental car il s'agit de l'application Web ;
+    * **app.run(debug=True)** permet de **lancer** l'application et donc le serveur Web. Le paramètre **debug** lance l'application dans ce mode car cela est **utile lors du développement** de mon application pour **détecter les erreurs** et permettre de **rafraichir** les pages web.
+    * la fonction **index** correspond à une **vue**. Elle peut porter le nom que je veux :
+      * elle permet au serveur de **répondre** à une requête à l'adresse, **la route**, indiquée à la ligne précédente
+      * cette ligne située juste avant la fonction **index** est un décorateur (**@app.route**) qui indique :
+        * quelle **route** (adresse) permet d'exécuter la fonction **index** et donc au serveur de **renvoyer** sa **réponse** ;
+        * de **préparer la bonne exécution** de la fonction **index**
+      * la fonction **index** va utiliser le **moteur de template** (modèle) de Flask qui s'appelle **Jinja2**, pour utiliser la page passée en paramètre comme modèle de réponse et, comme je verrai plus tard, permettre de personnaliser la page avant son envoi au navigateur.
+<WRAP center round info>
+Une fonction **décorée** par **@app.route** pour renvoyer une page Web est appelée **vue**.
+</WRAP>
+<WRAP center round important>
+**ATTENTION** :  \\
+Mon application **ne doit pas avoir** deux routes identiques, ou deux vues portant le même nom !
+</WRAP>
+===== Le fichier HTML de la page Web =====
+  * Ecrivez le contenu suivant dans le fichier **index.html** :
+<file html index.html>
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+	<meta charset="UTF-8">
+	<title>Application Flask</title>
+</head>
+<body>
+  bonjour
+</body>
+</html>
+</file>
+===== Exécution de l'application =====
+A l'exécution de l'application, le contenu de la page html est affiché ainsi que l'URL de l'application. Dasn la copie d'écran c'est https://StaidGrownHack--five-nine.repl.co
+{{:isn:replit_03.png|}}
+==== Retour à l'activité : Utiliser le framework Flask pour créer un site Web dynamique ====
+<WRAP center round info>
+  * [[.:flask_01|Activité : Utiliser le framework Flask pour créer un site Web dynamique]]
+</WRAP>