UE5 : Fondamentaux du développement web frontal,
niveau 2
Installations
Détails
- VS Code
Détails
- Ubuntu
- Mac
- Windows
- Présentation de
l'application
- Python
Détails
- Ubuntu
- Mac
- Windows
- Environnements virtuels
Détails
- Ubuntu et
MacOS
- Windows
- Travailler dans un dépôt Git
dans VSCode
Détails
- Installation de
Git
Détails
- Ubuntu
- Mac
- Windows
- Cloner un répertoire et
y accéder visuellement
Séance 1 : Une première application
Détails
- Présentation du cours
- Introduction au cours
Détails
- Déroulé du cours
- Objectifs principaux
- Description pratique
du
cours
- Exercices
- Evalution
- Une première application
Détails
- Structure applicative
- Travail dans un envrionnement
virtuel
- Installation de Flask
- Modularisation
- Ecrire un package simple
- Ecrire un package avec
des
modules
- Un petit point sur les
chemins
- Une première application
- Complément: les variables
d'environnement
- Exercices
Détails
- REV-1: les classes Python
- APP-1: découverte du package
os
- APP-2: variables de package
- REF-1: afficher le nom de
l'application
- Les classes
Détails
- Pas à pas sur les livres
Détails
- APP-3: Création d'une
classe
- APP-4: Méthodes de classe
- APP-5: Attribut de classe
- APP-6: Comparaison
d'instances
- APP-7: Commentaires
- APP-8: De l'aléatoire dans un attribut
d'instance
- APP-9: Un système bancaire
- APP-10: Des statistiques
- APP-11: Tableau de scores
- APP-12: Créer des classes à la volée
- Des classes dynamiques
Détails
- APP-13: Changement de nom de
classe
- APP-14: Héritage de classe
- APP-15: En voyage scolaire
- APP-16: Des potions magiques
- Ressources et exemples
Détails
- chemins
- package_modules
- package_simple
- Code
de l'application
Détails
- base
- structure
Séance 2 : Routes et templates
Détails
- Présentation du cours
- Les routes
Détails
- Les décorateurs Python: rappels
- Les décorateurs sans paramètres
- Les décorateurs avec paralètres
- Une première route
- Une route GET avec paramètres
- Les templates
Détails
- Introduction aux templates
- Utilisation des templates
- Jinja2
Détails
- Appels de paramètres et
filtres
- Structures de contrôle
- La boucle if
- La boucle for
- Dictionnaires
- Héritages
- Les extends
- Les include
- Liens internes
- Les statiques: CSS et JS
- Exercices
Détails
- REV-1: Les décorateurs
- REV-2 : une route GET avec
plusieurs paramètres
- REV-3 : afficher des données
dans une table HTML
- REV-4 : inclusion et
extension de templates
- REV-5 : création de liens
- APP-1 :
requests
et les routes à paramètres
- APP-2 : utilisation
de la librairie
Flask-Bootstrap
- APP-3 : lire un fichier CSV,
traiter les données et les restituer
- REV-6 : encore des liens
- APP-4 : un peu de Javascript
- REF-1 : maquette HTML du
devoir
- Ressources et exemples
Détails
- route_get1
- route_get2
- Code de l'application
Détails
- Premiers templates
- Variables Jinja
- Filtres Jinja
- If Jinja
- For Jinja
- Dico Jinja
- Extends Jinja
- Include Jinja
- Url_for
- Statics
Séance 3 : Penser les données par un ORM: les modèles
Détails
- Présentation du cours
- TD
- Penser les données par un ORM: les modèles
Détails
- Installation et configuration
de
Flask-Sqlalchemy
Détails
- Pré-requis
- Introduction aux
ORM
- Flask-SQLAlchemy
- Du modèle de données aux
modèles
SQLAlchemy
Détails
- Une requête simple
pour s'assurer
de la
bonne connectivité avec la base
- Les modèles de base
de
données
Détails
- Représenter une table
en
modèle
- Poser des
contraintes sur
un modèle
- Quelques méthodes
de classe
utiles
- Une première requête
avec
l'ORM
- Les relations entre
modèles
Détails
- One-to-many
- Maany-to-many
- Exercices
Détails
- REV-1: Connecter une base de
données
- REV-2: Ecrire un modèle de
base de
données (1)
- REV-3: Ecrire un modèle de
base de
données (2)
- APP-1: Autoincrémentation des
clés
primaires
- APP-2: Valeurs par défaut
dans les
champs
- Code
de l'application
Détails
-
Flask-SQLAlchemy
-
Une première requête
-
Les modèles
-
Les contraintes
-
Une requête avec l'ORM
-
Jointure one-to-many
-
Jointure many-to-many
Séance 4 : Penser les données par un ORM: implémentation et interactions
Détails
- Présentation du cours
- TD
- Penser les données par un ORM: implémentation
et interactions
Détails
- Lecture des données
Détails
- Des requêtes
simples avec l'ORM
Détails
query.all()
query.first()
query.limit()
query.get()
- Filtrer les
données
Détails
- Appliquer une condition sur les données
- Appliquer plusieurs conditions sur les données
Détails
AND
OR
- Fonctions
d'agrégation
Détails
query.count()
query.order_by()
query.group_by()
query.having()
- Jointures
Détails
- Utilisation des relations entre classes des
modèles
query.select_from()
et
query.join()
query.union()
- Ecriture des données
Détails
INSERT
UPDATE
DELETE
- Pagination des données
- Exercices
Détails
- REV-1 : Du SQL à SQLAlchemy
- REV-2 : Pagination
- REV-3 : Une application faite
de liens
- APP-1 : Des opérateurs
utiles dans les requêtes
- APP-2 : Un affichage avancé de
données calculées
- REF-1 : Des méthodes de
classe
- Code
de l'application
Détails
-
Lecture de données
-
Insertion de données
-
Mise à jour de données
-
Suppression de données
-
Pagination des données
Séance 5 : Interactions avec les utilisateurs: les formulaires et les erreurs
Détails
- Présentation du cours
- TD
- Interactions avec les utilisateurs: les
formulaires
Détails
- Des formulaires de recherche
avec la méthode GET
Détails
- Une recherche
simple fulltext
- Une recherche
avancée multicritères
- Des formulaires agissant sur
les données avec POST
Détails
- Transformer la
route GET
/recherche
en route POST /recherche
- Insérer des
données avec un formulaire
- Gestion des erreurs
Détails
- Attraper les erreurs dans les
routes avec
try... except...
- Agir en cas d'erreurs
Détails
- La fonction
flash()
- Effectuer un
ROLLBACK
- Rediriger
l'utilisateur
- Exercices
Détails
- REV-1 : Ajout de
ressources
- REV-2 : Suppressions
Détails
- Suppression de
pays
- Suppression de
ressources
- APP-1 : Propositions de
recherche instantanées
- REF-1 : Pages d'erreurs
- Code
de l'application
Détails
-
Formulaire simple avec GET
-
Formulaire avancé avec GET
-
Formulaire avancé avec POST
-
Formulaire d'insertion avec POST
-
Erreurs: try et except
-
Erreurs: flash
-
Erreurs: ROLLBACL
-
Erreurs: redirections
Séance 6 : Gestion des utilisateurs
Détails
- Présentation du cours
- TD
- Gestion des utilisateurs
Détails
- Création des
utilisateurs
- Connexion
- Déconnexion
- Rendre obligatoire la
connexion
sur une route
- Exercices
Détails
- REV-1 : Affichage de
l'utilisateur
dans la barre de navigation
- REV-2 : Ajout d'un mail comme
identifiant
unique de l'utilisateur
- APP-1 :Vérifications et
confirmation
du mot de passe
- APP-2 : Une visualisation de
données
accessible par les seuls utilisateurs connectés
- Code
de l'application
Détails
-
Ajout d'utilisateurs
-
Connexion
-
Protéger des pages
Séance 7 : TD et bonnes pratiques
Détails
- TD: déploiement d'une application Flask
dans le cloud
Détails
- Création d'un compte
PythonAnyWhere
- Description de
l'application exécutée par défaut
- Clonage du dépôt
- Installer un environnement
et le configurer selon les requirements de l'application
- Branchement de
l'application
- Résultat
- TD: rendre un graphique de
manière asynchrone
Détails
- Initialisation de
l'application
Détails
- Télécharger la base de données
- Installer un environnement virtuel et y installer les librairies
nécessaires
- Indiquer les variables d'environnement
- Etude du code de
la route concernée
Détails
- Template
templates/pages/graphiques/ressources_pays.html
- Route
/graphiques/ressources_pays
de
routes/graphiques.py
- Vues
schématiques du rendu graphique
- Modifier le
code
- Bonnes pratiques
Détails
- Propreté du code
Détails
- Commentaires
- Nommages
- Rangement
- Banir les
chemins absolus
- Variabilisation
- Liens
internes
- Gestion des
erreurs
- Rendu du devoir
Détails
- Base de
données
- Requirements
- README.md
- Dépôt du
code
- Ce que je
jouerai pour lancer
votre application