Programmation Web Introduction Jean-Rémy Falleri jfalleri@enseirb-matmeca.fr Enseirb-Matmeca Département Télécommunications
Présentation du module Savoir faire : comprendre et mettre en place une application Web Pédagogie : cours en salles machines, autoformation et projets, pas de supports! Évaluation : QCM (1/3) et projet (2/3)
Organisation du module 1.Introduction au Web (1 séance amphi) 2.Langages de présentation des données : HTM et CSS (2 séances, salles machines) 3.Programmation cote serveur : PHP (2 séances, salles machines)
Particularités du Web business Impact et environnement mondial Technologies ouvertes Investissement faible Créativité fortement valorisée
Success stories YouTube Fondé en 2005 par trois anciens de PayPal en une nuit Revendu à Google 1,65 milliards de dollars en 2006 Wikipedia Créé en 2001 Modèle participatif Aujourd hui recense plus de 10 millions d articles en 200 langues différentes
Success stories (2) Google Elaboré dans un garage de la Silicon Valley par deux étudiants américains de 23 et 24 ans Sa valeur est estimée aujourd hui à plus de 200 milliards de dollars. Meetic Créé en 2001 par l entrepreneur Marc Simoncini pour occuper son temps libre Chiffre d'affaire en 2010 : 186 millions d'euros
Les défis du Web business Volatilité technologique Cadre législatif flou Monétisation difficile
Internet Réseau mondial de machines interconnectées
Architecture d'internet Architecture en couches simplifiée Les couches physiques sont masquées par IP Les couches supérieures du modèle OSI sont fusionnées dans une couche application Applications TCP SSL/TLS IP Accès réseau HTTP, DNS, FTP, POP3, SMTP,...
IP et TCP IP fournit un adressage et un moyen d'envoyer des paquets à destination TCP permet d'établir une connexion fiable entre deux machines sur un port. SSL et TLS sont les pendants cryptés de TCP Ces deux protocoles forment l'ossature d'internet, la valeur ajoutée se trouve sur la couche application
Domain Name System DNS vs. IP google.fr : ou 74.125.230.223? DNS est un système hiérarchique et distribué qui traduit un nom de domaine vers une IP. com org net wikipedia fsf... nds de... de.wikipedia.org. de...
Exemple
Gouvernance Internet Corporation for Assigned Names and Numbers (ICANN) : gère les adresses IP et les serveurs roots DNS pour les Regional Internet Registries (RIR), ainsi que les numéros de ports Les RIR gèrent les serveurs DNS et les adresses IP au sein d'une zone géographique pour les Local Internet Registries RIPE NCC pour l'europe et une partie de l'asie Les LIR attribuent les adresses aux utilisateurs
Couche application DNS est un premier exemple D'autres exemples connus : Le Le Le Le... mail (POP, IMAP et SMTP) transfert de fichiers (FTP) transfert de documents (HTTP) chat (XMPP)
Le Web (enfin!) Système d'information sur Internet
Technologies du Web Uniform Resource Locator (URL) permet de localiser les ressources HyperText Transfert Protocol (HTTP) protocole permettant de s'échanger les ressources Un Serveur Web stocke et sert les ressources Un Navigateur Web permet aux clients de manipuler les ressources HyperText Markup Language (HTML) permet de mettre en forme les ressources
Uniform Resource Locator Chaîne de caractères permettant d'identifier une ressource Syntaxe : scheme://domain:port/path? query_string#fragment_id Scheme : protocole (HTTP, FTP,...) Domain : domaine DNS Path : chemin de la ressource sur le serveur Query_string : passé au serveur (optionnel) Fragment_id : partie dans le document (optionnel)
HyperText Transfert Protocol Protocole client-serveur et sans état permettant de manipuler des ressources Connexion client serveur Le client envoie une requête au serveur Le serveur répond et ferme la connexion Principales commandes GET permet de récupérer une ressource POST permet d'envoyer du contenu à une ressource
En-têtes HTTP Disponibles à partir de HTTP 1.0 Utilisables lors de la requêtes par le client ou de la réponse par le serveur. Spécifiées dans les lignes suivant la requête o le code de réponse Sous la formenom: Valeur Séparées par une ligne vide du corps du message
Cookies En-têtes permettant de stocker des valeurs sur le client Envoi par le serveur de : SetCookie: name=value, Expires=date Envoi par le client de : Cookie: value Détruits après la période d'expiration et valables sur un seul nom de domaine
Pipelining HTTP Permet d'envoyer plusieurs requêtes dans la même connexion TCP, avec les en-têtes Connection: Keep-Alive et Connection: Close no pipelining client open pipelining server client open tme close close server
User agent Permet au serveur de savoir exactement quel client tente un connexion Plusieurs utilisations Vérifier que le client n'est pas un programme «automatique» Proposer une version différente mobile ordinateur de bureau En-tête User-Agent:value Chrome : Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.17 (KHTML, like Gecko) Chrome/24.0.1312.56 Safari/537.17 Iphone : Mozilla/5.0 (iphone; CPU iphone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3
Serveur Web Logiciel permettant de réagir aux requêtes HTTP et pouvant servir un très grand nombre de clients simultanément Utilise des optimisations de type cache En général installé sur une machine propre voire un cluster Peut se brancher avec des langages de programmation côté serveur via CGI (C, Java, PHP, etc.)
Principaux serveurs Web
Navigateur Web Logiciel qui permet à un client d accéder à des ressources via HTTP de manière complètement transparente Permet de visualiser de manière graphique une multitude de formats de données (HTML, XML, SVG, RSS, ) Peut exécuter du code JavaScript Utilise aussi des optimisations de type cache
Les applications Web Application client-serveur qui s exécute sur le Web en général via un navigateur web Ensemble de codes sources hétérogènes : HTML, code côté client, code côté serveur Avantages : déploiement facile, utilise peu de ressources côté client Inconvénients : interfaces pauvres, nécessite une infrastructure serveur solide, ne fonctionne pas sans réseau ou serveur
Les styles d'applications Web 1.Les applications statiques 2.Les applications dynamiques côté serveur 3.Les applications dynamiques côté serveur et client 4.Les applications orientées données
Applications statiques 1. requête client 2. réponse directe serveur
Analyse Avantages Facile à mettre en œuvre (uniquement du HTML) Maintenance minimale Inconvénients Interface sommaire Contenu fastidieux à produire
Applications dynamiques serveur 1. requête client 3. réponse serveur 2. exécution de programmes côté serveur calculant la réponse
Analyse Avantages Séparation données - présentation Production de contenu beaucoup plus rapide Inconvénients Interface sommaire Charge serveur plus élevée Nécessite de connaître un langage de programmation supplémentaire
Applications dynamiques serveur et client 1. requête client 3. réponse serveur 4. exécution de JavaScript côté client 2. exécution de programmes côté serveur calculant la réponse
Analyse Avantages Séparation données - présentation Production de contenu beaucoup plus rapide Interface moyenne Inconvénients Charge serveur plus élevée Il faut gérer les différents navigateurs Nécessite de connaître deux langages de programmation supplémentaires
Applications orientées données 1. requête client 3. réponse serveur 4. exécution de programmes utilisation de composants natifs 2. exécution de programmes côté serveur calculant la réponse
Analyse Avantages Séparation données - présentation Production de contenu beaucoup plus rapide Interface riches : utilisation de composants natifs Inconvénients Charge serveur plus élevée Nécessite de connaître deux langages de programmation supplémentaires et les systèmes natifs Il faut décliner l'application pour les différentes plate-formes
What's next? Apprentissage des technologies de présentation des données HTML CSS Apprentissage d'un langage de programmation simple côté serveur : PHP