LDW 2019-2020

› Initiation à la programmation web côté client

› Conception de sites web efficaces

› Acquisition de bonnes pratiques + culture du web

› Conception d’applications internet riches

› Enseignement :

• 1h30 de cours par semaine

• 1h30 de TP par semaine

Le cours présente différents concepts dans un cadre général, les TPs permettent une

application plus ou moins directe.

› Evaluation :

• Rendu de code à chaque TP (évaluation individuelle)

• Projet à rendre fin de semestre

Web (toile), contraction de «World Wide Web» (acronyme www), une des possibilités offertes par le réseau Internet de naviguer entre des documents reliés par des liens hypertextes.

Web = partie des contenus circulant sur l’Internet <> Internet = support de communication

Le concept du Web a été mis au point au CERN (Centre Européen deRecherche Nucléaire) en 1991 par une équipe de chercheurs à laquelleappartenaient Tim-Berners LEE, le créateur du concept d'hyperlien,considéré aujourd'hui comme le père fondateur du Web.

Le principe de web repose sur l'utilisation d'hyperliens pour naviguer entre des documents (pages web) grâce à un logiciel appelé navigateur(browser).

Présentation de l'architecture d'un système client/serveur

Un environnement client/serveur, signifie que des machines clientes (des machines faisant partie du réseau) contactent un serveur.

Un serveur est une machine généralement très puissante en terme de capacités d'entrée-sortie, qui fournit des services.

Il existe de nombreux types de serveurs : serveur web, serveur de fichiers, de messagerie, d’authentification…

Une même machine peut rendre différents services (exemple : serveur Web et serveur de fichiers).

Les services sont des programmes fournissant des données telles que l'heure, des fichiers, une connexion, etc.

Les services sont exploités par des programmes, appelés programmes clients, s'exécutant sur les machines clientes.

Avantages de l'architecture client/serveur

Le modèle client/serveur est particulièrement recommandé pour des réseaux nécessitant un grand niveau de fiabilité, ses principaux atouts sont :• des ressources centralisées : étant donné que le serveur est au centre du réseau, il peut gérer des

ressources communes à tous les utilisateurs, comme par exemple une base de données centralisée, afin d'éviter les problèmes de redondance et de contradiction

• une meilleure sécurité : car le nombre de points d'entrée permettant l'accès aux données est moins important

• une administration au niveau serveur : les clients ayant peu d'importance dans ce modèle, ils ont moins besoin d'être administrés

• un réseau évolutif : grâce à cette architecture il est possible de supprimer ou rajouter des clients sans perturber le fonctionnement du réseau et sans modificationmajeure

Inconvénients du modèle client/serveur

L'architecture client/serveur a tout de même quelques lacunes parmi lesquelles :• un coût élevé dû à la technicité du serveur• un maillon faible : le serveur est le seul maillon faible du réseau client/serveur, étant donné que tout le

réseau est architecturé autour de lui ! Heureusement, le serveur a une grande tolérance aux pannes (notamment grâce au système RAID)

Fonctionnement d'un système client/serveur Un système client/serveur fonctionne selon le schéma suivant :

Le client émet une requête vers le serveur grâce à son adresse IP et le port, qui désigne un service particulier du serveur

Le serveur reçoit la demande et répond à l'aide de l'adresse de la machine cliente et son port

Client

Serveurréponses

ClientRequête

Requête

Présentation de l'architecture à 2 niveaux L'architecture à deux niveaux (aussi appelée architecture 2-tier, tier signifiant rangée en

anglais) caractérise les systèmes clients/serveurs pour lesquels le client demande une ressource et le serveur la lui fournit directement, en utilisant ses propres ressources. Cela signifie que le serveur ne fait pas appel à une autre application afin de fournir une partie du service.

Présentation de l'architecture à 3 niveaux Dans l'architecture à 3 niveaux (appelée architecture 3-tier), il existe un niveau intermédiaire,

c'est-à-dire que l'on a généralement une architecture partagée entre :

Un client, c'est-à-dire l'ordinateur demandeur de ressources, équipée d'une interface utilisateur (généralement un navigateur web) chargée de la présentation ;

Le serveur d'application (appelé également middleware), chargé de fournir la ressource mais faisant appel à un autre serveur

Le serveur de données, fournissant au serveur d'application les données dont il a besoin.

Comparaison des deux types d'architecture

L'architecture à deux niveaux est donc une architecture client/serveur dans laquelle le serveur est polyvalent, c'est-à-dire qu'il est capable de fournir directement l'ensemble des ressources demandées par le client.

Dans l'architecture à trois niveaux par contre, les applications au niveau serveur sont délocalisées, c'est-à-dire que chaque serveur est spécialisé dans une tâche (serveur web/serveur de base de données par exemple).

L'architecture à trois niveaux permet :

• Une plus grande flexibilité/souplesse ;

• Une sécurité accrue car la sécurité peut être définie indépendamment pour chaque service, et à chaque niveau ;

• De meilleures performances, étant donné le partage des tâches entre les différents serveurs.

Serveur Web

Logiciel permettant à des clients d'accéder à des pages web, à partir d'un navigateur installé sur leur ordinateur distant.

Pour être accessible, un site Web doit être publié sur un serveur appelé serveur web.

Un serveur Web embarque et exécute un logiciel serveur (Apache, Microsoft IIS, nginx…).

Plusieurs serveurs Web:– Apache Windows/ UNIX (gratuit) (www.apache.org)– Microsoft IIS (Internet Information Services) :le serveur Web payant deMicrosoft– Microsoft PWS (Personal Web Server)– Iplanet Web Server : serveur payant de Netscape– Etc,...

LDW 2019-2020

Client Web

La machine qui permet la consultation du site Web demandé est appelé client Web.

En réalité, le véritable client est un logiciel qui s’exécute sur cette machine. Ce logiciel est le plus souvent un navigateur Web (browser).

Le rôle du navigateur est d’analyser le code HTML et CSS des pages web et d’en produire un résultat visuel, facile à lire pour un humain.

Grâce aux navigateurs, on peut : lancer des recherches, chatter, échanger des e-mails, visionner des vidéos, etc.

Les navigateurs Web les plus populaires sont :

– Internet Explorer,(Windows)

– Mozilla Firefox (Windows, Linux et Mac)

– Google Chrome (Windows, Linux et Mac)

– Opera. (Windows, Linux et Mac)

– Safari (Mac et Windows)

Communication entre Client et serveur Web

Le navigateur effectue une requête HTTP

Le serveur traite la requête puis envoie une réponse HTTP

Adresse Web : URL (Uniform ressource locator)

Chaîne de caractères utilisée pour adresser les ressources dans le Web

Elle permet de décrire l’emplacement d’une ressource Web et le moyen d’y accéder.

Exemple : http://www.monsite.fr/mondossier/mapage.html.– http: Protocole utilisé.

– www.monsite.fr : hôte (nom de domaine du site Web visité).

– /mondossier/mapage.html : chemin de la ressource demandée au sein du site.

La majorité des serveurs Web sont configurées pour renvoyer une page par défaut (index.html, index.php , Default.aspx) lorsque le client ne précise pas la page souhaitée.

Protocole HTTP

Client et serveur Web utilisent pendant leurs échanges un protocole commun : HTTP.

HTTP (HyperText Transfert Protocol) : protocole de transfert du Web, son invention en 1989 au CERN de Genève, en même temps que le langage HTML, a conduit à l’apparition du World Wide Web.

Le protocole HTTP est le protocole le plus utilisé sur Internet depuis 1990.

La version 0.9 destinée à transférer des données sur Internet (des pages Web écrites en HTML. La version 1.0 du protocole (la plus utilisée) permet le transfert de messages avec des en-têtes décrivant le contenu du message en utilisant un codage de type MIME.

Le but du protocole HTTP est de permettre un transfert de fichiers (essentiellement au format HTML) localisés grâce à une chaîne de caractères appelée URL entre un navigateur (le client) et un serveur Web (appelé d'ailleurs httpd sur les machines UNIX).

Réponse HTTPUne réponse HTTP est un ensemble de lignes envoyées au navigateur par

le serveur. Elle comprend : Une ligne de statut: c'est une ligne précisant la version du protocole utilisé et l'état du traitement de la requête à l'aide d'un code et d'un texte explicatif. La ligne comprend trois éléments devant être séparés par un espace :• La version du protocole utilisé

• Le code de statut

• La signification du code

Les champs d'en-tête de la réponse: il s'agit d'un ensemble de lignes facultatives permettant de donner des informations supplémentaires sur la réponse et/ou le serveur. Chacune de ces lignes est composée d'un nom qualifiant le type d'en-tête, suivi de deux points (:) et de la valeur de l'en-tête

Le corps de la réponse: il contient le document demandé

Réponse HTTP Exemple : Réponse HTTP renvoyée par un serveur :

HTTP /1.1 200 OKDate: Sun; 29 Apr 2015 12:00:00 GMTServer: lighttpd/1.4.19 Content-Type: text/html<html>

<!– code html de la page<html>

La première ligne de la réponse contient son statut sous forme d’un code qui indique le résultat de la requête.

Les autres lignes de la requête c’est les champs d’en-tête.

la réponse HTTP contient la ressource demandée par le client. Le plus souvent, il s’agit d’une page Web décrite sous la forme de balises HTML.

Réponse HTTP Exemple : Réponse HTTP renvoyée par un serveur :

HTTP /1.1 200 OKDate: Sun; 29 Apr 2015 12:00:00 GMTServer: lighttpd/1.4.19 Content-Type: text/html<html>

<!– code html de la page<html>

La première ligne de la réponse contient son statut sous forme d’un code qui indique le résultat de la requête.

Les autres lignes de la requête c’est les champs d’en-tête.

la réponse HTTP contient la ressource demandée par le client. Le plus souvent, il s’agit d’une page Web décrite sous la forme de balises HTML.

Codes HTTP

Famille Signification Exemples

1xx Information

2xx Succès 200 ; Requête traitée avec succès

3xx Redirection

4xx Erreur Provenant duclient

400 : Syntaxe de la requête erronée

404 : ressource demandée non trouvée

5xx Erreur provenant duserveur

500 : erreur interne du serveur

503 : Ressource temporairement nondisponible