Introduction

Programmation Web
Introduction
Jean-Rémy Falleri
[email protected]
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