Architecture(s) et
application(s) Web

CSC4101 - Introduction

21/08/2025

Préface

 

Format des transparents

Web !

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

Langue des supports :

  • français
  • feel free to ask questions in english

Bio Olivier Berger

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

Aussi :

  • parents de 3 enfants
  • passionné de guitare
  • vieux con des internets ™
  • représentant du personnel

</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 (à TSP) :

  • 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)
  • Semi-autonomie
  • Monome
  • BYOD (Bring Your Own Device)

Attention : séances cumulatives !

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)

Attention : code amélioré de façon incrémentale
séance après séance

Évaluation

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

Originalité des travaux

  • Partage favorisé :
    • Entraide souhaitable
    • Recherche nécessaire : doc, exemples, rapports de bugs, etc.
    • Générateurs de code (de Symphony)
  • Productivité, mais pas au prix de la qualité de votre apprentissage
  • Générateurs de code « IA » : copier/coller sans comprendre ?

Discussion sur charge de travail ouverte : interagir avec nous

 

Utilisation assistance IA proscrite

  • Objectifs : apprendre, se heurter à des difficultés maîtrisées pour progresser.
  • Apprendre à poser des questions (aux profs / aux pairs).
  • Les IA génératives : adapté à celleux qui savent ce qu’ils font et veulent gagner en productivité. Pas en phase d’apprentissage, mais plus tard OK.

Dans ce module : interdiction d’utiliser ChatGPT, Claude Code, et autres CoPilot dans vos projets. Pénalités à la clé.

Sauf autorisation justifiée : discutons-en.

É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
    • Mac OS/X, Windows : sans garantie !
  • Ligne commande : shell bash, php-cli, SQLite, …
  • Git ?
  • Navigateur
    • Firefox
    • Chrome
    • Safari

IDE Eclipse

IDE (Integrated Development Environment) avec support de PHP objet, Composer, Twig :

Eclipse (+ PHP Dev. Tools)

pas autre chose, vraiment !

Important de maîtriser la qualité du code. Environnement adapté et maîtrisé par équipe enseignante.

À vos risques et périls !

</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
  • 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
    • requêtes chargement collections (associations M-N)

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.