Architecture(s) et
application(s) Web

CSC4101 - Introduction

01/09/2024

Préface

 

Format des transparents

Web !

  • HTML 5 + javascript (reveal.js)
  • polycopié PDF disponible (cf. Moodle et site du cours)
    • version orientée accessibilité sur demande (format texte OpenDocument, donc modifiable : changement de police, pour OpenDyslexic ?)

Bio Olivier Berger

Ingénieur Recherche, au département INF et à la DF :

  • Développement logiciel, libriste (ancien mainteneur Debian, …)
  • ex contributeur au W3C (Linked Data Platform)
  • ancien mainteneur applications PHP (phpGroupware, FusionForge, …)

</Préface>

Plan de la séquence

  1. Objectifs du cours
  2. Organisation du cours

Enseignement en Informatique (CSC)

Architecture(s) et application(s) Web

Comment construire une application « classique », sur la plate-forme universelle, le Web, en utilisant une approche maîtrisée.

1ère année ?

Cours informatique ?

1ère année :

  • CSC 3101 Algo. programmation (objet)
    • algorithmique
    • objet (en java)
  • CSC 3102 Intro. systèmes d’exploitation
    • shell
  • CSC 3601 Modélisation, BD et SI
    • données, persistence, associations
  • PRO 3600 Projet dév. informatique
    • interfaces graphiques (Web ?)
    • Git ?

2ème année :

Objectifs d’apprentissage

  • À l’issue de ce module, les étudiant(e)s […] seront capables de développer une application Web de type site d’e-commerce (une dizaine de pages), sur la base d’un cahier des charges fourni, en utilisant un framework PHP professionnel (Symfony).
    L’application sera réalisée […] en s’inspirant de versions successives d’une application exemple fournie. Elle devra permettre la saisie de données, et aura un comportement personnalisé en fonction du profil d’un utilisateur.
    • ce développement sera effectué par la mise en œuvre des bibliothèques et outils du framework objet, afin d’exploiter des fonctions de sécurité, de présentation dans des pages HTML, pour s’approcher d’une application réaliste, de qualité professionnelle.
    • ils/elles utiliseront les outils de mise au point du framework et du navigateur;
  • Les étudiant(e)s sauront expliquer les rôles respectifs des traitements faits sur le client et le serveur HTTP.
    • Ils/elles sauront positionner les composants d’une application Web, dans une architecture en couches (multi-tiers).
    • Ils/elles pourront expliquer comment fonctionnent les sessions applicatives dans un protocole où le serveur est sans-état.
  • Les étudiant(e)s ont la liberté de personnaliser l’apparence des pages du site, ce qui permet d’appréhender les principes généraux d’ergonomie des interfaces Web (expérience utilisateur, accessibilité).

Synthèse objectifs apprentissage

  • développer appli. Web (type site e-commerce), avec framework PHP pro.
    • mise en œuvre bibliothèques + outils framework objet
    • utiliser outils de mise au point
  • savoir expliquer rôles client / serveur HTTP
    • positionner composants appli Web, dans architecture en couches
    • expliquer sessions applicatives avec serveur sans-état
  • appréhender principes ergonomie interfaces

PHP, mais pourquoi ???!!!

Ô misère

On va y revenir un peu plus loin

Plan de la séquence

  1. Objectifs du cours
  2. Organisation du cours

10 séquences

  1. Intro, PHP, accès aux données
  2. Concepts, archi. appli Web 3 couches
  3. Protocole HTTP, serveur Web, invocation programmes
  4. Génération de pages, gabarits (templates), HTML
  5. Expérience utilisateur Web, CSS
  6. Contrôleurs, interactions CRUD, formulaires
  7. Sessions, contrôle d’accès
  8. Interface dynamique côté navigateur (JavaScript)
  9. Sécurité, gestion des erreurs
  10. Évolution des architectures applicatives

Format de chaque séquence de cours

  • Travail encadré :
    • Cours intégré (aka BE ?) ~ 1h
    • TP ~ 2h
  • Travail autonomie hors-présentiel :
    • apprentissage
    • projet d’application (au fil des séquences)

TP présentiel

  • Grandes salles C00x - D0x (autant que possible)
  • BYOD (Bring Your Own Device)

Projet : réaliser une appli Web

Début semaine 3

  • pour membres d’une communauté :
    • gèrer un « inventaire » d’objets personnels,
    • publier des « galeries » publiques
  • vous choisissez un thème personnel (vinyls, cartes à collectionner, mangas, outils de bricolage, guitares, jeux …)
  • modèle de données même structure,
  • fonctionnalités identiques
  • look particulier

Évaluation : par les pairs (2 évals à mi-parcours et fin projet)

Travail étudiants

  • Synchrone encadré :
    • CI (s/CI/BE/)
    • TP
  • Autonomie :
    • fin des TP
    • auto-apprentissage
    • projet individuel
    • évaluation des projets de vos pairs

Attention : lisser l’effort du projet au long des 8 semaines du projet (10 semaines calandaires) !!!

Application « fil rouge » en TPs

Application Web de gestion de tâches : ToDo

  • fonctionnalités très simples
  • PHP + Symfony
  • support de compréhension en TPs

Ensuite : application dans votre projet (guidée, mais plus autonome)

Évaluation

  • Contrôle continu (évaluations projet)
  • Contrôle final (sur table sans ordi)

Équipe pédagogique

Coordinateurs

  • Olivier BERGER (B304.01 + Télétravail)
  • Michel Simatic (idem)

Contact (2 en même temps) :

  • olivier.berger@telecom-sudparis.eu
  • michel.simatic@telecom-sudparis.eu

Cours Intégrés

  • Olivier BERGER

Encadrants de TP

  • Chourouk Belheouane
  • Olivier Berger
  • Éric Lallet
  • Badran Raddaoui
  • Mohamed Sellami
  • Michel Simatic

Comment écrire à son prof

  1. Utilisez l’adresse mail @telecom-sudparis.eu
  2. Donnez un objet clair à votre email
  3. Restez simple
  4. Utilisez un français correct (ou l’anglais)
  5. Soyez agréable
  6. Remerciez-les

Just sayin’

Source : Comment envoyer un email à votre professeur ?

Ressources pédagogiques

  • Moodle.ip-paris.fr et site Web du cours (supports de TP et Travail Autonome)
  • Poly(s) PDF (inclus slides)
  • Documentation de référence (en anglais la plupart du temps)

Outillage

  • Système BYOD (Bring Your Own Device)
    • GNU/Linux : Ubuntu 24.04 LTS
      • upgrade des Ubuntu 22.04 à faire
    • Mac OS/X, Windows : sans garantie !
  • Ligne commande : shell bash, PHP 8, SQLite, …
  • IDE avec support de PHP, Composer, Twig
    • Eclipse (+ PHP Dev. Tools)
  • Git ?
  • Navigateur
    • Firefox
    • Chrome
    • Safari

</Organisation>

Plan de travail première séquence

Avant :

  • Install BYOD (autonomie)
  • CI 1
    • Introduction (maintenant)
    • Langage PHP objet
    • Modèle de données avec l’ORM Doctrine
      • Révision concepts Bases de Données relationnelles,
      • Accès aux données en objet
  • TP 1
    • prise en main outils développement PHP Composer et Symfony
    • première application PHP + BD, en ligne de commande read-only
    • requêtes chargement collections (associations M-N)
  • Autonomie (d’ici prochaine séquence)
    • Apprentissage PHP en autonomie
    • Fin configuration BYOD pour les TPs
    • Pour les plus véloces : début création application « Mini-Allociné » en ligne de commande

2ème séquence

  • CI 2
    • Concepts fondamentaux du Web
    • Architecture d’application Web classique à 3 couches
    • Suite accès aux données avec l’ORM Doctrine (modification)
  • TP 2
    • application PHP + BD en ligne de commande en modification

Objectif : prêts pour démarrage du projet en séquence 3 !

Le Web, en séquence 4… patience.

Postface

Slides HTML

On utilise reveal.js pour les slides vidéo-projetés en cours.

drinking your own champagne !

Crédits illustrations et vidéos

  • Illustration « respecte tes parents… » : origine difficile à tracer

Copyright

  • Document propriété de ses auteurs et de Télécom SudParis (sauf exceptions explicitement mentionnées).
  • Réservé à l’utilisation pour la formation initiale à Télécom SudParis.