UE5 : Fondamentaux du développement web frontal, niveau 2

Installations

Détails
  1. VS Code
    Détails
    1. Ubuntu
    2. Mac
    3. Windows
    4. Présentation de l'application
  2. Python
    Détails
    1. Ubuntu
    2. Mac
    3. Windows
  3. Environnements virtuels
    Détails
    1. Ubuntu et MacOS
    2. Windows
  4. Travailler dans un dépôt Git dans VSCode
    Détails
    1. Installation de Git
      Détails
      1. Ubuntu
      2. Mac
      3. Windows
    2. Cloner un répertoire et y accéder visuellement

Séance 1 : Une première application

Détails
  1. Présentation du cours
  2. Introduction au cours
    3. Détails
    1. Déroulé du cours
    2. Objectifs principaux
    3. Description pratique du cours
    4. Exercices
    5. Evalution
  3. Une première application
    4. Détails
    1. Structure applicative
    2. Travail dans un envrionnement virtuel
    3. Installation de Flask
    4. Modularisation
      1. Ecrire un package simple
      2. Ecrire un package avec des modules
      3. Un petit point sur les chemins
    5. Une première application
    6. Complément: les variables d'environnement
  4. Exercices
    5. Détails
    1. REV-1: les classes Python
    2. APP-1: découverte du package os
    3. APP-2: variables de package
    4. REF-1: afficher le nom de l'application
    5. Les classes
      Détails
      1. Pas à pas sur les livres
        Détails
        1. APP-3: Création d'une classe
        2. APP-4: Méthodes de classe
        3. APP-5: Attribut de classe
        4. APP-6: Comparaison d'instances
        5. APP-7: Commentaires
      2. APP-8: De l'aléatoire dans un attribut d'instance
      3. APP-9: Un système bancaire
      4. APP-10: Des statistiques
      5. APP-11: Tableau de scores
      6. APP-12: Créer des classes à la volée
      7. Des classes dynamiques
        Détails
        1. APP-13: Changement de nom de classe
        2. APP-14: Héritage de classe
      8. APP-15: En voyage scolaire
      9. APP-16: Des potions magiques
  5. Ressources et exemples
    6. Détails
    1. chemins
    2. package_modules
    3. package_simple
  6. Code de l'application
    7. Détails
    1. base
    2. structure

Séance 2 : Routes et templates

Détails
  1. Présentation du cours
  2. Les routes
    3. Détails
    1. Les décorateurs Python: rappels
      1. Les décorateurs sans paramètres
      2. Les décorateurs avec paralètres
    2. Une première route
    3. Une route GET avec paramètres
  3. Les templates
    4. Détails
    1. Introduction aux templates
    2. Utilisation des templates
    3. Jinja2
      Détails
      1. Appels de paramètres et filtres
      2. Structures de contrôle
        1. La boucle if
        2. La boucle for
      3. Dictionnaires
      4. Héritages
        1. Les extends
        2. Les include
    4. Liens internes
    5. Les statiques: CSS et JS
  4. Exercices
    5. Détails
    1. REV-1: Les décorateurs
    2. REV-2 : une route GET avec plusieurs paramètres
    3. REV-3 : afficher des données dans une table HTML
    4. REV-4 : inclusion et extension de templates
    5. REV-5 : création de liens
    6. APP-1 : requests et les routes à paramètres
    7. APP-2 : utilisation de la librairie Flask-Bootstrap
    8. APP-3 : lire un fichier CSV, traiter les données et les restituer
    9. REV-6 : encore des liens
    10. APP-4 : un peu de Javascript
    11. REF-1 : maquette HTML du devoir
  5. Ressources et exemples
    6. Détails
    1. route_get1
    2. route_get2
  6. Code de l'application
    7. Détails
    1. Premiers templates
    2. Variables Jinja
    3. Filtres Jinja
    4. If Jinja
    5. For Jinja
    6. Dico Jinja
    7. Extends Jinja
    8. Include Jinja
    9. Url_for
    10. Statics

Séance 3 : Penser les données par un ORM: les modèles

Détails
  1. Présentation du cours
  2. TD
  3. Penser les données par un ORM: les modèles
    4. Détails
    1. Installation et configuration de Flask-Sqlalchemy
      Détails
      1. Pré-requis
      2. Introduction aux ORM
      3. Flask-SQLAlchemy
    2. Du modèle de données aux modèles SQLAlchemy
      Détails
      1. Une requête simple pour s'assurer de la bonne connectivité avec la base
      2. Les modèles de base de données
        Détails
        1. Représenter une table en modèle
        2. Poser des contraintes sur un modèle
        3. Quelques méthodes de classe utiles
      3. Une première requête avec l'ORM
    3. Les relations entre modèles
      Détails
      1. One-to-many
      2. Maany-to-many
  4. Exercices
    5. Détails
    1. REV-1: Connecter une base de données
    2. REV-2: Ecrire un modèle de base de données (1)
    3. REV-3: Ecrire un modèle de base de données (2)
    4. APP-1: Autoincrémentation des clés primaires
    5. APP-2: Valeurs par défaut dans les champs
  5. Code de l'application
    6. Détails
    1. Flask-SQLAlchemy
    2. Une première requête
    3. Les modèles
    4. Les contraintes
    5. Une requête avec l'ORM
    6. Jointure one-to-many
    7. Jointure many-to-many

Séance 4 : Penser les données par un ORM: implémentation et interactions

Détails
  1. Présentation du cours
  2. TD
  3. Penser les données par un ORM: implémentation et interactions
    4. Détails
    1. Lecture des données
      Détails
      1. Des requêtes simples avec l'ORM
        Détails
        1. query.all()
        2. query.first()
        3. query.limit()
        4. query.get()
      2. Filtrer les données
        Détails
        1. Appliquer une condition sur les données
        2. Appliquer plusieurs conditions sur les données
          Détails
          1. AND
          2. OR
      3. Fonctions d'agrégation
        Détails
        1. query.count()
        2. query.order_by()
        3. query.group_by()
        4. query.having()
      4. Jointures
        Détails
        1. Utilisation des relations entre classes des modèles
        2. query.select_from() et query.join()
        3. query.union()
    2. Ecriture des données
      Détails
      1. INSERT
      2. UPDATE
      3. DELETE
    3. Pagination des données
  4. Exercices
    5. Détails
    1. REV-1 : Du SQL à SQLAlchemy
    2. REV-2 : Pagination
    3. REV-3 : Une application faite de liens
    4. APP-1 : Des opérateurs utiles dans les requêtes
    5. APP-2 : Un affichage avancé de données calculées
    6. REF-1 : Des méthodes de classe
  5. Code de l'application
    6. Détails
    1. Lecture de données
    2. Insertion de données
    3. Mise à jour de données
    4. Suppression de données
    5. Pagination des données

Séance 5 : Interactions avec les utilisateurs: les formulaires et les erreurs

Détails
  1. Présentation du cours
  2. TD
  3. Interactions avec les utilisateurs: les formulaires
    4. Détails
    1. Des formulaires de recherche avec la méthode GET
      Détails
      1. Une recherche simple fulltext
      2. Une recherche avancée multicritères
    2. Des formulaires agissant sur les données avec POST
      Détails
      1. Transformer la route GET /recherche en route POST /recherche
      2. Insérer des données avec un formulaire
  4. Gestion des erreurs
    5. Détails
    1. Attraper les erreurs dans les routes avec try... except...
    2. Agir en cas d'erreurs
      Détails
      1. La fonction flash()
      2. Effectuer un ROLLBACK
      3. Rediriger l'utilisateur
  5. Exercices
    6. Détails
    1. REV-1 : Ajout de ressources
    2. REV-2 : Suppressions
      Détails
      1. Suppression de pays
      2. Suppression de ressources
    3. APP-1 : Propositions de recherche instantanées
    4. REF-1 : Pages d'erreurs
  6. Code de l'application
    7. Détails
    1. Formulaire simple avec GET
    2. Formulaire avancé avec GET
    3. Formulaire avancé avec POST
    4. Formulaire d'insertion avec POST
    5. Erreurs: try et except
    6. Erreurs: flash
    7. Erreurs: ROLLBACL
    8. Erreurs: redirections

Séance 6 : Gestion des utilisateurs

Détails
  1. Présentation du cours
  2. TD
  3. Gestion des utilisateurs
    4. Détails
    1. Création des utilisateurs
    2. Connexion
    3. Déconnexion
    4. Rendre obligatoire la connexion sur une route
  4. Exercices
    5. Détails
    1. REV-1 : Affichage de l'utilisateur dans la barre de navigation
    2. REV-2 : Ajout d'un mail comme identifiant unique de l'utilisateur
    3. APP-1 :Vérifications et confirmation du mot de passe
    4. APP-2 : Une visualisation de données accessible par les seuls utilisateurs connectés
  5. Code de l'application
    6. Détails
    1. Ajout d'utilisateurs
    2. Connexion
    3. Protéger des pages

Séance 7 : TD et bonnes pratiques

Détails
  1. TD: déploiement d'une application Flask dans le cloud
    2. Détails
    1. Création d'un compte PythonAnyWhere
    2. Description de l'application exécutée par défaut
    3. Clonage du dépôt
    4. Installer un environnement et le configurer selon les requirements de l'application
    5. Branchement de l'application
    6. Résultat
  2. TD: rendre un graphique de manière asynchrone
    3. Détails
    1. Initialisation de l'application
      Détails
      1. Télécharger la base de données
      2. Installer un environnement virtuel et y installer les librairies nécessaires
      3. Indiquer les variables d'environnement
    2. Etude du code de la route concernée
      Détails
      1. Template templates/pages/graphiques/ressources_pays.html
      2. Route /graphiques/ressources_pays de routes/graphiques.py
      3. Vues schématiques du rendu graphique
    3. Modifier le code
  3. Bonnes pratiques
    4. Détails
    1. Propreté du code
      Détails
      1. Commentaires
      2. Nommages
      3. Rangement
      4. Banir les chemins absolus
      5. Variabilisation
      6. Liens internes
    2. Gestion des erreurs
    3. Rendu du devoir
      Détails
      1. Base de données
      2. Requirements
      3. README.md
      4. Dépôt du code
      5. Ce que je jouerai pour lancer votre application