Concept fondamentaux d'une Application Web

• Définir le web et ses origines

• Définir internet
• Distinguer les différents langages d’une
application Web
Plan • Décrire le fonctionnement du réseau
• Définir le protocole HTTP et son fonctionnement
• Définir l’architecture MVC
Introduction au web

Principe du Web :

Naviguer d’une page à Accéder aux ressources Système hypertexte

une autre d’une page web permettant d’accéder
aux ressources d’une
page web
Liens hypertexte

•Deux type de lien hypertexts :

• Interne : accéder à un autre contenu sur le même site Web

• Externe : accéder à un autre contenu d’un site web different

Exemple :

exemple d’un lien hypertexte

Présentation internet
•Internet :

•Est un système de réseau informatique

public à l’échelle mondiale

•Utilise la suite de protocole internet

standard (TCP / IP)

•Accès public à de nombreuses ressources

et services

•Permet à des ordinateurs et à des

serveurs de communiquer efficacement au
moyen d'un protocole de communication
commun (IP).
Différence internet et web

•Internet : un réseau informatique

•Web : un service à l’intérieur d’internet

Services d’internet

•Les services fournis sur Internet :

• Le Web (le plus connu d’entre eux) : vous ouvrez un navigateur web
pour y aller, comme Google Chrome, Firefox, Internet Explorer, Edge,
Safari...

• Les e-mails : pour échanger des messages. Il s’agit tout simplement

de courrier électronique.

• Les newsgroups : moins connus, ils sont l’ancêtre des forums et

permettent de discuter à plusieurs en postant des messages.

• Le FTP : un moyen d’échanger des fichiers entre ordinateurs.

URL : Localisateur uniforme de ressource
• Une URL est une chaine de caractères utilisés pour addresser les
ressources dans le web
Histoire du Web

•1969 : création de l’ancêtre d’Internet, appelé ARPAnet.

ARPAnet à été crée par le Département de Défense aux Etats-Unis.

Son objectif était de relier des centres universitaires de recherche et des installations militaires.
Le réseau à ensuite évolué pour devenir progressivement grand public sous le nom d’Internet.

•1972 : apparition des e-mails pour échanger des messages.

•1991 : lancement du Web, pour afficher des pages d’information.

Tim Berners-Lee

Tim Berners-Lee, était en 1991 chercheur

au CERN (un centre de recherche
scientifique à la frontière franco-suisse).
C’est là qu’il a eu l’idée du Web.

Il est le premier à présenter un concept de

"page web" avec des "liens hypertextes" qui
permettent de naviguer d’une page à une
autre. Il est aussi à l’origine des bases du
langage HTML que l’on utilise toujours
aujourd’hui pour concevoir des pages web.
Les différents langages du Web
Front-end & Back-end
Front-end = Client

Le Front-End, qui est la partie « frontale » de l’application, c’est-à-dire celle qui est
manipulée directement par l’utilisateur.

Les technologies Front-end sont généralement :

JavaScripte HTML CSS Jquery Angular

Back-End = Serveur

Le back-end , qui est le moteur de l’application. C’est cette partie qui effectue les
traitements lourds, comme le stockage d’informations en base de données, les calculs
longs à réaliser, les différents traitements nécessaires au fonctionnement de
l’application.

Les technologies Back-end sont généralement :

JAVA PHP C# Python

Client-Serveur

 un client (front-end) : c’est vous, votre ordinateur qui sert à aller consulter des sites web et exécuter des requêtes.

• Caractéristique :
 il envoie des requêtes au serveur .
 il attend et reçoit les réponses du serveur.

 un serveur (back-end) : un ordinateur qui exécute des opérations suivant les requêtes effectuées par un autre
ordinateur appelé « client ».

• Caractéristique :
 il est à l’écoute, prêt à répondre aux requêtes envoyées par des clients
 dès qu'une requête lui parvient, il la traite et envoie une réponse.
Les langages client et serveur

•Les langages client décrivent comment le site web doit s’afficher.

 Avec un langage client, je peux dire "Un menu doit s’afficher à gauche de mon site web », ou ce champ de
texte doit respecter un format spécifique

•Les langages serveur décrivent comment le site web doit se comporter.

•
 Avec un langage serveur, je peux dire "Le menu ne doit s’afficher que si cette personne a créé un compte sur
mon site".
Client-Serveur
Languages front-end
HTML

•HTML : HyperText Markup Language : C'est un langage de balisage utilisé pour structurer une
page web et son contenu. Par exemple, le contenu de votre page web pourra être structuré en un
ensemble de paragraphes, ou avec des images et des tableaux de données...
CSS

CSS : C'est un langage de feuille de style, il permet d'appliquer des styles sur différents éléments
sélectionnés dans un document HTML. Par exemple, afficher du textes en rouge avec ce code CSS
souligner un texte ou mettre une paragraphe en gras…
JavaScript

•JavaScript : est un langage de programmation côté client qui ajoute de l'interactivité à une
application web. C'est à dire que ses lignes de code seront interprétées sur la machine de l'utilisateur
final
•JavaScript permet :
• de créer des interactions au sein d'une page web.
• Animer des données.
• valider le format des données saisies dans un formulaire avant même de l'avoir envoyé
Exemple HTML

Exemple HTML et CSS : http://www.kirschpm.fr/cours/M1Gestion/pages/pages/

Langages back-end

PHP Java Python

C# ...
Communication entre un client et un serveur

•
Base de données

BDD permet :

•L’accès aux données de façon simple

•D’autoriser l’accès aux informations à de multiples

utilisateurs

•La manipulation des données présentes dans la base

(sélectionner, insertion, suppression, modification)
Table base de données
Logiciels base de données

•Parmi les logiciels de base de données, on peut citer :

• MySQL
• PostgreSQL
• SQL Server
• Oracle
• SQLite
Schéma complet du fonctionnement du web
Fonctionnement du réseau
Data center

•
Plusieurs serveurs
•
les uns sur les autres,
dans une baie
Un câble sous-marin

•
Adresse IP

Une adresse IP est un numéro unique attribué à chaque équipement

connecté à un réseau informatique : ordinateurs, smartphones,
serveurs sur internet.... Cette adresse permet d'identifier
individuellement les équipements sur le réseau, de les faire
communiquer entre eux et de les connecter à internet.

Exemple : 208.157.38.15
Nom d’hôte

•Un nom de domaine est un nom unique qui

identifie un particulier, une entreprise ou une
organisation sur internet. Il permet la recherche
d'un site web, sans devoir recopier une longue
adresse IP

•DNS signifie 'Domaine Name System’ qui

permet de traduire le nom d’hôte en adresse IP.
Protocole HTTP
Protocole HTTP

•HTTP (Hypertexte Transmission Protocol)

•Protocole de communication développé pour le web

•Protocole requête/réponse :
• Client(navigateur)
• Serveur(serveur web)

•Transfert données entre client/serveur

•HTTPS : Qui est identique à HTTP, avec le "S" en plus qui signifie "Secure". Les pages sont chiffrées,
pour garantir que personne ne peut les lire
Communication client/serveur via HTTP

•Le client (le navigateur) envoie une requête HTTP à destination du

serveur distant en lui précisant à quelle ressource il souhaite
accéder.
•Le serveur analyse la requête et effectue des vérifications, telles
que :
• si la ressource demandée existe,
• si le client est autorisé à accéder à la ressource,
• s’il doit effectuer des traitements sur cette dernière avant de
l’envoyer au client.
•Le serveur renvoie le document demandé et ferme la connexion.
Message Requête HTTP

• Une ligne de requête: La ligne comprend trois éléments devant être séparés par un espace :
• La méthode de requête utilisée
• L'URL
• La version du protocole utilisé par le client (généralement HTTP/1.1)

• Les champs d'en-tête de la requête : Date, host…

• Le corps de la requête : permet un envoie des données

Un exemple de requête HTTP :
Méthode de requête HTTP

Action/Opération Méthode HTTP SQL Description

POST permet au client d’envoyer des données pour

Création traitement côté serveur.
POST INSERT
Le serveur va enregistrer les informations reçues comme une
nouvelle ressource.

GET permet de récupérer le contenu de la ressource

Afficher GET SELECT
demandée.

PUT ce type de requête vise une ressource existante. Le

Modification PUT UPDATE serveur va modifier la ressource existante avec les nouvelles
informations reçues.

DELETE ce type de requête permet au client de demander à

Suppression DELETE DELETE
supprimer la ressource visée par la requête.
Les attributs de requêtes HTTP

Nom de l'en-tête Description

Content-Encoding
Type de codage du corps de la requête

Date Date et heure de la requête.

Host Le nom d’hôte ou l’adresse IP spécifié(e) dans l’URL.

Content-Type Indique le type MIME des données envoyées.

Accept-Encoding Type d’encodage ou de compression accepté.

Content-Language Type de langage du corps de la requête

Réponse HTTP

•Une ligne de statut:. 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: contient des lignes facultatives

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

Un exemple de réponse :
En-têtes de réponse

Nom de l'en-tête Description

Date Date de début de transfert des données

Expires Date limite de consommation des données

Server Caractéristiques du serveur ayant envoyé la réponse

Content-Type Type de contenu du corps de la réponse (par exemple text/html).

Content-Length Longueur du corps de la réponse

Content-Language Type de langage du corps de la réponse

Les codes de réponse

Code Message Déscription

200 OK La requête a été accomplie correctement

204 NO RESPONSE Le serveur a reçu la requête mais il n'y a pas d'information à renvoyer

201 CREATED Elle suit une commande POST, elle indique la que les informations ont bien été
enregistrés,

301 MOVED Les données demandées ont été transférées à une nouvelle adresse

402 PAYMENT REQUIRED Le client doit reformuler sa demande avec les bonnes données de paiement

404 NOT FOUND Classique! Le serveur n'a rien trouvé à l'adresse spécifiée.

504 GATEWAY TIMEOUT La réponse du serveur a été trop longue

Requête/réponse avec contenu du message

http://www.monsite.com/projet/doc.html
Architecture MVC

Le MVC signifie Model-Vue-Controller est un modèle architectural

qui sépare une application en trois composants :

 Modèle
 Vue
 Contrôleur
 La vue

Vue : cette partie se concentre sur l'affichage. Elle ne

fait presque aucun calcul et se contente de récupérer
des variables pour savoir ce qu'elle doit afficher. On y
trouve essentiellement du code HTML
Le modèle

Modèle

cette partie gère les données de l’application. Son

rôle est d'aller récupérer les informations dans la base
de données, de les organiser et de les assembler pour
qu'elles puissent ensuite être traitées par le
contrôleur. On y trouve donc les requêtes SQL.
Le contrôleur

Contrôleur :

Cette partie gère la logique du code qui prend des décisions.

C'est en quelque sorte l'intermédiaire entre le modèle et la vue : le contrôleur va demander au
modèle les données, les analyser, prendre des décisions et renvoyer le texte à afficher à la vue.
MVC en action
Résumé

Une architecture d'application web décrit les modèles et les techniques utilisés pour concevoir et créer une application. L'architecture fournit une feuille de
route ainsi que les meilleures pratiques à suivre pour créer une application bien structurée.
Une architecture d'application comprend les services front-end et back-end.
Le développement front-end concerne l'expérience utilisateur de l'application, tandis que le développement back-end permet de fournir l'accès aux données,
aux services et à d'autres systèmes dont dépend l'application.

•Le Web n’est qu’une partie d’Internet.

•Internet a été créé avant le Web pour permettre d’échanger des informations entre ordinateurs.
•Le W3C est l’organisme qui guide aujourd’hui l’évolution du Web.
•Hypertexte : est un un système de liens permettant de relier différentes informations dans un même document ou entre des documents différents sur le Web.
•Le Web fonctionne à l’aide de nombreux langages informatiques.
•HTML, CSS et JavaScript sont des langages client : ils sont lus par votre ordinateur, l’ordinateur d’un visiteur. Ils décrivent l’apparence du site web.
•PHP, Java, Ruby et Python sont des langages serveur. Ils sont utilisés par l’ordinateur qui distribue le site web, appelé... serveur. Leur rôle est de décrire le
comportement du site web.
•Les frameworks sont des boîtes à outils qui facilitent l’usage des langages serveur.
•Les données (telle que la liste des utilisateurs) sont stockées dans des bases de données. On communique avec elles en effectuant des requêtes SQL..
•HTTP est un protocole de communication développé pour le web qui permet la communication entre client/serveur
•MVC est une architecture pour séparer la logique du code en trois parties modèle, vue et controôeur