Ingénierie du Web – Administration réseaux et système (STI)

Ce cours a pour objectif de donner aux étudiants les connaissances techniques de base nécessaires à la réalisation d’une application Web moderne, en abordant son architecture, sa conception et son développement. Une attention particulière sera également portée à la sécurité des applications Web, afin de sensibiliser les étudiants aux principales vulnérabilités et aux mécanismes de protection associés, notamment les injections, les attaques XSS, le modèle de sécurité Same-Origin Policy (SOP), le partage de ressources entre origines (CORS) et la Content Security Policy (CSP).

Cours 1 — Découvrir le Web : les fondamentaux Internet et Web : notions essentielles Architecture client/serveur Navigateur, serveur Web, application Web URL, domaine, DNS HTTP et HTTPS Requête / réponse HTTP Méthodes HTTP et codes de réponse Cookies et sessions : introduction

Objectif : comprendre ce qui se passe lorsqu'un utilisateur saisit une URL dans son navigateur

Cours 2 — Construire une page Web : HTML et CSS Structure d'une page HTML Éléments et attributs Formulaires HTML HTML sémantique CSS : sélecteurs, propriétés et mise en page Flexbox / Grid Responsive design Bonnes pratiques d'organisation HTML/CSS

Objectif : construire une interface Web simple et correctement structurée.

Cours 3 — Programmer côté navigateur : JavaScript Rôle de JavaScript Variables, fonctions, objets Événements DOM Manipulation dynamique d'une page Validation des formulaires Programmation asynchrone : introduction fetch() : première approche

Objectif : rendre une page Web interactive.

Cours 4 — Comprendre l'architecture d'une application Web Architecture 2-tiers et 3-tiers Couche présentation Couche logique métier Couche données Serveur Web Serveur d'application Serveur de bases de données Architecture MVC : introduction

Objectif : passer de « je sais faire une page Web » à « je comprends comment est organisée une application Web ».

Cours 5 — Développement Back-End avec PHP Rôle du Back-End PHP et traitement des requêtes Variables, fonctions et structures de contrôle Formulaires et données utilisateur Génération dynamique de HTML Sessions et cookies Organisation d'une application PHP

Objectif : développer un premier traitement côté serveur.

Cours 6 — Persistance des données : SQL Pourquoi une base de données ? Modèle relationnel Tables, clés et relations SQL SELECT, INSERT, UPDATE, DELETE Jointures PHP ↔ base de données PDO Requêtes préparées Réalisation d'un CRUD

Objectif : développer une application capable de stocker et manipuler des données.

Cours 7 — APIs et architecture REST Pourquoi utiliser une API ? Architecture Front-End / Back-End REST et ressources URI GET, POST, PUT/PATCH, DELETE Codes HTTP JSON Développer une API simple en PHP Consommer une API avec JavaScript et fetch()

Objectif : comprendre l'architecture des applications Web modernes.

Cours 8 — Sécurité et frameworks Web

Première partie : sécurité

Validation des entrées SQL Injection XSS CSRF Authentification / autorisation Stockage sécurisé des mots de passe HTTPS

Deuxième partie : frameworks

Pourquoi utiliser un framework ? MVC Routage Contrôleurs Modèles ORM Introduction à un framework Web

Objectif : comprendre pourquoi les applications professionnelles utilisent des frameworks et quelles problématiques ils permettent de résoudre.

TP1 — 4 heures Développement d'une application Web complète

Je donnerais un sujet suffisamment simple pour être réalisable en 4h.

Par exemple :

Application de gestion de projets étudiants

Un étudiant peut :

créer un compte ; se connecter ; consulter des projets ; créer un projet ; modifier un projet ; supprimer un projet ; consulter les membres d'un projet.

TP2 — 4 heures Évolution vers une application Web moderne

On repart de l'application du TP1.

Les étudiants doivent :

transformer certaines fonctionnalités en API REST ; échanger les données au format JSON ; utiliser fetch() côté JavaScript ; mettre en place une authentification ; corriger quelques vulnérabilités ; structurer l'application selon une architecture plus propre ; découvrir l'organisation d'un framework MVC.

L'objectif n'est pas de leur apprendre complètement un framework en 4 heures.

Il s'agit plutôt de leur faire comprendre :

« Voilà comment on passe d'une application PHP simple à une application Web structurée comme celles que vous rencontrerez dans un projet professionnel. »

QCMs et un partiel

Développer un site web en Php, Mysql et Javascript, Jquery, CSS3 et HTML5, Robin Nixon