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 :

  • CSC 4101 : VOUS ÊTES ICI !

    En cas de doute : http://perdu.com/

  • CSC4102 (Introduction au Génie Logiciel Orienté Objet), …

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 ~ 1h
    • TP ~ 2h
  • Travail autonomie hors-présentiel :

    • apprentissage

    • projet d’application (au fil des séquences)

TP présentiel

  • Grande salle C009-010 (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 étudiant⋅es

  • Synchrone encadré :
    • Cours
    • 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 :
    • Évaluation des rendus, par les pairs :
      • évaluation de la qualité du rendu (projet) : 60%
      • évaluation de la qualité des évaluations : 40 %
  • Contrôle final (sur table sans ordi)

Originalité des travaux

Projets individuels, réalisés par vous pour apprendre sur le code

  • Partage favorisé :
    • Entraide souhaitable
    • Recherche nécessaire : doc, exemples, rapports de bugs, etc.
    • Générateurs de code (de Symphony)
  • ! Productivité : 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 ?

  • Objectifs de notre dispositif pédagogique : 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é.

    En phase d’apprentissage : NOK

    Plus tard : OK

Utilisation assistance IA proscrite

Dans ce module : s’il vous plaît,
ne pas utiliser ChatGPT, Claude Code, et autres CoPilot
en TP et projets

  • Faire l’effort de comprendre en pratiquant vraiment (doigts, cerveau, etc.)
  • Respecter vos camarades qui vont évaluer votre code (et vice-versa)

Sauf autorisation justifiée : change my mind !

É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, un peu plus rédigé que le cours (sur demande)

poly-exemple.png
  • Documentation de référence (en anglais la plupart du temps)

Outillage BYOD (Bring Your Own Device)

  • Système
    • GNU/Linux : Ubuntu 24.04 LTS
    • Mac OS/X, Windows : sans garantie (de support) !
  • 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.

Dédicace

Je dédie l’édition 2025-2026 du cours à la mémoire de

WMLIVE0066569-1_20250828.jpeg

Ryan Weaver

5/06/1984 - 25/08/2025

https://symfony.com/blog/remembering-ryan-weaver-teacher-core-team-member-friend

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.