Architecture(s) et

application(s) Web

CSC4101 - cours introductionCSC4101 - cours introduction

16/09/2020

1

Plan du coursPlan du cours

1 : Concepts de base, archi. 3 tiers, PH1 : Concepts de base, archi. 3 tiers, PH

2

Préface  Préface  

3

 

4

Format des transparents

Web !

HTML 5 + javascript (reveal.js)

polycopié PDF disponible (cf. Moodle et site ducours)

(format texteOpenDocument, donc modi�able :changement de police, pour OpenDyslexic ?)

version orientée accessibilité

5

file:///CSC4101/cm-01/poly.pdf

Bio Olivier Berger

Essayons de voir si le Web me connaît… (en�n, Google) :

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

Développement logiciel, libriste (mainteneurDebian, …)contributeur au W3C ( )mainteneur applications PHP (phpGroupware,FusionForge, …)

Google Image pour « Olivier Berger »

Linked Data Platform

6

https://www.google.fr/search?q=olivier+berger&tbm=ischhttps://www.w3.org/TR/ldp/

7

Plan de la séance  Plan de la séance  

1. Objectifs du coursObjectifs du cours

8

Enseignement en Informatique (CSC)

Dans le « tronc commun »

Architecture(s) et application(s) Web

Comment construire une application« classique », sur la plate-forme

universelle, le Web, en utilisant uneapproche maîtrisée.

9

1ère année :

CSC 3101 Algo. programmation (objet)algorithmiqueobjet

CSC 3102 Intro. systèmes d’exploitationshell

CSC 3601 Modélisation, BD et SIdonnées, persistence, associations

PRO 3600 Projet dév. informatiqueinterfaces graphiques/Web

10

2ème année :

CSC 4101 : VOUS ÊTES ICI !…

11

Objectifs apprentissage de CSC4101À l’issue de ce module, les étudiant(e)s […] seront capables de développer uneapplication Web de type site d’e-commerce (une dizaine de pages), sur la base d’uncahier des charges fourni, en utilisant un framework PHP professionnel (Symfony).L’application sera réalisée […] en s’inspirant de versions successives d’une applicationexemple fournie. Elle devra permettre la saisie de données, et aura un comportementpersonnalisé en fonction du pro�l d’un utilisateur.

ce développement sera effectué par la mise en œuvre des bibliothèques etoutils du framework objet, a�n d’exploiter des fonctions de sécurité, deprésentation dans des pages HTML, pour s’approcher d’une applicationré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 leclient et le serveur HTTP.

Ils/elles sauront positionner les composants d’une application Web, dansune architecture en couches (multi-tiers).Ils/elles pourront expliquer comment fonctionnent les sessions applicativesdans un protocole où le serveur est sans-état.

Les étudiant(e)s ont la liberté de personnaliser l’apparence des pages du site, ce quipermet d’appréhender les principes généraux d’ergonomie des interfaces Web(expérience utilisateur, accessibilité).

12

Objectifs apprentissage de CSC4101

développer appli. Web (type site e-commerce), avecframework PHP pro.

mise en œuvre bibliothèques + outilsframework objetutiliser outils de mise au point

savoir expliquer rôles client / serveur HTTPpositionner composants appli Web, dansarchitecture en couchesexpliquer sessions applicatives avec serveursans-état

appréhender principes ergonomie interfaces13

Plan de la séance Plan de la séance 

2. Organisation du coursOrganisation du cours

14

10 séquences - semaines

1. Concepts de base, archi. appli 3 tiers, PHP2. Protocole HTTP, serveur Web3. Génération de pages, gabarits (templates) Twig4. Expérience utilisateur Web, structure d’une page

(DOM), CSS, BootStrap5. Interactions CRUD et sessions6. Interface dynamique côté navigateur (AJAX)7. Apports du framework Symfony - Autorisations8. Gestion avancée des routes et formulaires9. Sécurité, gestion des erreurs

10. Évolution des architectures applicatives15

Classe inversée

Plus de cours magistraux en amphi (après ce jour)

1. 10 x 3 h de Travail Autonome hors présentiel(asynchrone)!

2. 10 x 3 h de Travaux Pratiques synchrones (1/2 enprésentiels)

S1 S2 S3 S4 S5 S6 S7 S8 S9 S10    

  TA TA TA TA TA TA TA TA TA    

TP TP TP TP TP TP TP TP TP TP    

Le hors-présentiel n’est pas facultatif !

16

Application « �l rouge »

Application Web de gestion de tâches : ToDo

fonctionnalités très simplesPHP + Symfonysupport des TPs

17

Outillage

salles de TP GNU/LinuxBYOD (Shell bash, PHP, SQLite, …) ?

GNU/Linuxmac, etc. ?

IDE avec support de PHP, Composer, TwigEclipse (+ PHP Dev. Tools)Atom, VS Code, PHPStorm, … ?

NavigateurFirefoxChrome ?…

18

Évaluation

Contrôle continuContrôle �nal

19

Équipe pédagogique

20

Co-coordinateurs

Christian BAC (C103)Olivier BERGER (B303)

Contact :

christian.bac@telecom-sudparis.eu

ET

olivier.berger@telecom-sudparis.eu

21

Comment écrire à son prof

1. Utilisez l’adresse mail @telecom-sudparis.eu

2. Donnez un objet clair à votre email3. Restez simple4. Utilisez un français correct (ou l’anglais)5. Soyez agréable6. Remerciez-les

Just sayin’

Source : Comment envoyer un email à votre professeur ?

22

https://reussirmesetudes.fr/2012/05/comment-envoyer-un-email-a-votre-professeur/

Ressources pédagogiques

et Web site du cours (supports de TP etHP)Slides des CM (Web, ou PDF)Polys : slides CM + notes rédigées (exemple,

)version PDFversion modi�able (texte Open Document)pour besoins spéci�ques

Documentation de référence (en anglais la plupartdu temps)

Moodle

pource cours

23

https://moodle.tem-tsp.eu/course/view.php?id=81file:///CSC4101/cm-01/poly.pdf

24

PostfacePostface

25

Slides HTML

On utilise pour les slides vidéo-projetés encours.

drinking your own champagne !

reveal.js

26

http://lab.hakim.se/reveal-js/#/

Crédits illustrations et vidéosIllustration « respecte tes parents… » : origine dif�cile à tracer

27

CopyrightCopyrightDocument propriété de ses auteurs et de TélécomSudParis (sauf exceptions explicitementmentionnées).Réservé à l’utilisation pour la formation initiale àTélécom SudParis.

28