01.Cours devweb 19 décembre 2023 Développement web ISC3-il Présentation du cours HE-Arc 2023/24 DGR et YBL Programme • Frameworks MVC : Laravel, Django, … • HTML5 : vue d’ensemble • Javascript : : VueJS, Node.js, jQuery, AJAX, JSON, … • Déploiement et configuration Serveur • Webservices : REST vs SOAP • Sécurité : Technologies, prévention des risques courants • (Responsive) Web Design • (Syndication Contenu, activités • Cours théorique • 2 Projets – frameworks : Laravel, Django, Vue.js (ouvert à d’autres propositions) – Groupes de 3, 30h1 par personne et par projet – Présentation de 20min • Workshops

11. HTTPS 19 décembre 2023 Développement web il3 HTTPS HE-Arc (DGR) 2022 Sécuriser un site web • Authentification du serveur – Assurer que le serveur est celui qu’il prétend être • Intégrité des • Pour un site web, ces services sont fournis par https – HTTPS : HTTP sécurisé par SSL/TLS, par défaut sur le port 443 1 Secure Socket Layer –> Transport Layer Security • Conçu par Netscape (v2.0 couches transport et application – Pas besoin de modifier la pile TCP/IP • Possibilité de sécuriser d’autres protocoles : – HTTP, SMTP, SIP, … • Services offerts : – Authentification serveur + intégrité

03.Laravel 19 décembre 2023 Développement web il3 Laravel HE-Arc (DGR & R. Emourgeon) 2018-23 Pourquoi Laravel1 ? • Framework full stack / glue • Prise en main rapide • Bonne documentation, grande Incite au respect des principes S.O.L.I.D3 • Gratuit et opensource (Licence MIT) Historique • Projet initié en 2011 par Taylor Otwell4 • Basé sur des composants d’autres frameworks • Mai 2013 : version Extensible par packages8 (bundles) via composer Le Front Controller Architecture MVC • Structure d’une appli web = cycle Requête/Reponse9 • Modèle : Eloquent ORM • Vue : Blade Engine • Contrôleur :

02.Introduction aux frameworks PHP 19 décembre 2023 Développement web il3 Introduction aux frameworks PHP HE-Arc 2016-24 DGR et YBL Framework1 • Fonctionnalités similaires pour de nombreuses applis Règles de codage et d’architecture • Code sûr et efficace • Facilite les tests et la gestion de projets complexes • Utilisation de Design Patterns dès que possible • Comportement par défaut • Extensible Extensible • Principe d’inversion de contrôle Différences entre framework et library sur Stack Overflow2 ou artima developper3. 1http://en.wikipedia.org/wiki/Software_framework 2http://stackoverflow.com/quest

12. Risques applicatifs 19 décembre 2023 Développement web il3 Risques applicatifs des app web HE-Arc (DGR) 2022 Risque • Faille ou bug permettant d’altérer le fonctionnement • Un attaquant pourra modifier les données • Présence possible à tous les niveaux d’un système – Application – Serveur et Client – OS – SGBD, … • Responsabilité des développeurs : – OS, serveurs, langages : patches rapidement Grande communauté d’experts – Formation, documentation et ressources – Outils d’audit, de tests et de formation Top 106 OWASP 2021 (fr7 - historique8) 1. Contrôle d’accès défaillants 2. Défaillances cryptographiques

06.HTTP & AJAX 19 décembre 2023 Développement web il3 HTTP & AJAX HE-Arc (DGR) 2022 HyperText Transfer Protocol • Protocole application : invention www en 1990 (v0.9) – Connexion, GET, réponse, correction erreur, contrôle congestion, multiplexage (0 RTT) 1https://docs.google.com/presentation/d/1eqae3OBCxwWswOsaWMAWRpqnmrVVrAfPQclfSqPkXrA/present#sl ide=id.p19 2https://caniuse.com/#feat=http2 Demander une ressource • POST : Création d’une ressource • PUT : Remplacement total d’une ressource • PATCH : Remplacement partiel d’une ressource • DELETE : Suppression d’une ressource • HEAD : Demande l’entête

09.Services Web 19 décembre 2023 Développement web il3 Services web HE-Arc (DGR) 2022 Applications distribuées • Motivation : répartir l’exécution sur plusieurs machines – Principe : Les composants/services org/wiki/Architecture_orient%C3%A9e_services 1 Service web • 2 visions : – Utiliser les technos web pour développer des applis distribuées – Accès pour une application aux services offerts aux humains • Service applications (HTTP + XML/JSON) • Exemples : – Applications distribuées3 pour l’entreprise – Mashups4 d’applications web (exemples5) – Applications Facebook, API Google6 – IFTTT7 • Consommer un service

05.JavaScript & DOM 19 décembre 2023 Développement web il3 JavaScript & DOM HE-Arc (DGR) 2022 JavaScript hier • Page web = HTML (+ CSS + JavaScript) • Exécuté par le browser (client) • Interprété bookmarklets • One Page Apps • Implémentations hors-browser – Node.js, Spidermonkey, Rhino – script d’app (Qt, Notepad++, …) 1 • Langage cible de compilateurs : emscripten1, WebAssembly2 • Embarqué : 15http://jstherightway.org/ 2 – Bookmarklets16, exemples17 – Requêtes HTTP (Fetch API, Xml Http Request) • Développement d’applications complètes, parfois offline • Langage de script généraliste (paquets npm) Caractéristiques

08.RSS 19 décembre 2023 Développement web il3 Really Simple Syndication HE-Arc (DGR) 2022 Syndication • Principe de vendre un contenu à plusieurs médias • Dans les journaux : dépêches, bandes dessinées plusieurs sources d’informations – Mises à jour fréquentes Historique • Feed (fil ou flux) RSS • Format d’échange de données en XML – fournir ou recueillir des données structurées • Utilisation d’un lecteur Netscape • RSS v1.0 par O’Reilly en 2000 • RSS v2.0 par Dave Winer (Harvard) en 2002 • Atom v1.0 en 2005 (développement communautaire) 1 Il y a neuf versions de RSS généralement incompatibles entre elles. Lire

07.jQuery 19 décembre 2023 Développement web il3 jQuery HE-Arc (DGR) 2022 jQuery • John Resig, 2006 • Bibliothèque JS, gratuit, OS (licence MIT) • Facilite le développement JS pour les tâches fréquentes descendant) $("#intro li"); • Que les fils directs (sélecteur d’enfants) 2 $("#intro > li"); • Sélecteur multiple $(".post, #main "); • D’autres exemples2 de sélecteurs Parcours (traversing3) • Parcours complet (yc balises) – val() : get/set les valeurs d’un formulaire – attr() : set la valeur d’un attribut • Ajout de contenu : – append(), prepend() : au début/fin de la sélection (dans l’élément) – before()