Ce cours a pour but de proposer une introduction au développement d'applications web. Notamment, il présente des techniques et langages de développement actuels, que ce soit en backend ou en frontend. L'accent sera mis en particulier sur les points suivants :

• Un panorama des techniques passées et actuelles
• Le développement web en utilisant PHP
• Le langage Javascript
• Le langage TypeScript
• Le développement frontend par Angular

Ce choix de technologies reflète les tendances du moment en termes de weberies, cf. un bref historique du web.

Le module est évalué en contrôle continu intégral sur la base suivante :

• 6 mini-interros dont seules les 5 meilleures comptent
• 1 note de TP concernant PHP, MySQL, Javascript et Angular
• 1 examen final sur machine

Note finale = 60% examen final + 20% mini-interros + 20% note de TP.

L'objectif des TPs est de développer un forum permettant aux étudiants et aux enseignants d'échanger sur des sujets relatifs aux cours proposés dans le département informatique. Ce forum reproduira l'aspect de la capture d'écran ci-dessous :

À titre d'entraînement, vous pouvez y accéder avec les logins/passwords disponible sur AMeTICE via l'URL : https://christophe-gonzales.pedaweb.univ-amu.fr/extranet/forum/fr-FR.

Le forum sera développé en PHP pour le backend et en Angular pour le frontend.

• Séance n°1 : Introduction et préparation des TPs
  • Javascript et le DOM
  • objectifs des TPs

• Séance n°2 : Premiers pas en PHP
  • Principe de PHP
  • Les variables, leurs types, leurs valeurs et leurs portées
  • Les fonctions, les boucles et les alternatives
  • Les importations de fichiers

• Séance n°3 : Backend en PHP
  • Les variables super globales
  • Les interactions entre client et serveur ($_POST, etc.)
  • L'authentification par $_SESSION

• Séance n°4 : Base de données en PHP
  • Mysql et PDO : création d'instances PDO, requêtes, fetch, etc.

• Séance n°5 : Javascript et intro à Angular
  • Déclarations de variables en Javascript (let, const, etc.)
  • Les fonctions, objets, tableaux et strings
  • Les itérateurs en Javascript
  • Angular : anatomie d'un projet, les composants

• Séance n°6 : Les interactions TypeScript/HTML en Angular
  • Les différents types d'interactions TypeScript - HTML
  • L'interpolation, le property binding, l'event binding, le two-way binding
  • Les signaux

• Séance n°7 : Angular : blocs de contrôle, services, CORS
  • Les interfaces
  • les @for, @if/@else, @switch
  • les services, le dependency injection, l'asynchronie et les observables
  • Le service HTTP
  • Le Cross Origin Resource Sharing (CORS)

• Séance n°8 : La navigation dans Angular
  • Les routes et les routes paramétrées
  • Le routerLink, le navigateByUrl

• Séance n°9 : TP noté

• Séance n°10 : Les interactions Parent -> Enfant en Angular
  • La problématique des interactions
  • Les inputs

• Séance n°11 : Les interactions Enfant -> Parent en Angular
  • Les outputs

• Séance n°12 : Sécurité et déploiement
  • Multiples subscribers pour un Observable
  • Les gardes
  • Les environnements
  • La commande ng build

• Séance n°13 : Angular Material
  • Les tables d'Angular Material
  • Pagination et tri de colonnes dans les tables
  • Boutons d'Angular Material
  • Les fenêtres modales

• Séance n°14 : Examen final

• Examen 2020-2021

• Examen 2021-2022

• Examen 2022-2023

• Examen 2023-2024

• Question Angular-Backend PHP : L'utilisateur parvient à se connecter (PHP l'identifie bien) mais, ensuite, pour l'affichage de la liste des cours, il n'est plus reconnu.
  Réponse : Il s'agit sans doute d'un problème de cookie de session PHP. Cela peut résulter essentiellement de trois causes distinctes. La première, c'est que, dans le script affichant la liste des cours, l'instruction session_start() n'a pas été exécutée. La deuxième est plus subtile : vous avez appelé votre backend avec l'adresse 127.0.0.1 pour l'authentification et avec localhost pour la page des cours (ou inversement). Il peut alors arriver, dans certains systèmes d'exploitation, que localhost ne soit pas associé à l'adresse 127.0.0.1. Dans ce cas, votre serveur web écoute les 2 adresses mais considère que, pour les sessions, il s'agit de 2 serveurs différents et, donc, la session initiée lors de l'authentification n'est pas la même que celle utilisée pour la page des cours. Afin de pallier ce problème, dans tous vos scripts, utilisez le même serveur : 127.0.0.1. La dernière raison qui peut empêcher vos cookies d'être utilisés correctement est l'utilisation du protocole http plutôt que https. Le protocole http n'est pas sécurisé (toutes les informations circulent sans chiffrement sur le réseau) et ne devrait pas être utilisé d'une manière générale dans les applications web. Mais il est plus simple à mettre en place que le https et, si l'on ne travaille qu'en local sur sa machine, c'est parfaitement suffisant. Une règle de sécurité à laquelle se conforment certains browsers comme chrome interdit la transmission de cookies sur des connexions non sécurisée (donc, ici, en http) sauf si l'url du serveur est précisément 127.0.0.1. Or, même si localhost est un alias de 127.0.0.1, ce n'est pas la même chaîne de caractère et, donc, ces browsers ne permettent pas la transmission de cookies sur des urls telles que http://localhost/... et il faut donc vraiment utiliser des urls http://127.0.0.1/...