Sites web – Création et environnement

Obtenir une page page web est simple :

1. Tu ouvre un navigateur web (chrome, firefox, …)
2. Tu tapes l’adresse ou URL de la page web voulue (http://www.google.fr)
3. Ton navigateur contacte le serveur contenant la page web, puis charge les fichiers nécessaires pour reconstituer la page demandée.

Sauf que … une fois la page chargée, tu vois la page, mais pas les fichiers qui le composent, ni les langages utilisés. Découvrons ici comment créer une page web dite statique.

Contenu d’une page Web

Une page web client (comme celle affichée devant vous par votre navigateur web actuel) est un ensemble de fichiers. On peut les regrouper en 4 types :

• 1 (et un seul) fichier HTML
• 0 .. n fichiers CSS
• 0 .. n fichiers JS (JavaScript)
• 0 .. n médias annexes nativement gérés (images, audios, vidéos, …)

Le fichier HTML (en .html) est un fichier obligatoire. Il contient le fond de la page web à savoir le fond et sa structure. Un code HTML ne peut être écrit que dans un fichier .html.

Le ou les fichiers CSS (en .css) sont non obligatoires. Le CSS met en forme et anime à l’aide de fonctions simples le contenu du fichier HTML. Du code CSS peut aussi être présent dans un fichier HTML.

Le ou les fichiers JS (en .js) sont non obligatoires. Le JS agit sur les codes CSS et HTML et peut les modifier. Il permet d’interagir avec l’utilisateur et de développer des animations complexes. Du code JS peut aussi être présent dans un fichier HTML.

Écriture et emplacement

Une page web peut être écrit depuis un environnement complet ou un simple éditeur de texte comme le Bloc Notes Windows ou NotePad++. Il suffit pour cela :

1. De créer un dossier dans votre ordinateur.
2. De créer dans le dossier le nombre de fichiers texte que vous voulez :
   (Windows : clic droit dans le dossier ˃ Nouveau ˃ Document texte)
3. De renommer l’extension de ces fichiers selon le code que vous voulez taper dans chacun d’eux (.html, .css, ou .js)
4. D’ouvrir le fichier HTML avec le navigateur (en double-cliquant dessus).

Votre navigateur ouvre la page web normalement. En effet, le navigateur peut ouvrir une page web :

• Enregistré sur votre ordinateur
• Hébergé sur un serveur web AMP distant ou local

Oui, car on n’a rien mis dans les fichiers texte. Si on les ouvre avec NotePad++, on remarque qu’ils sont vierges. Si vous voulez des exemples de page web, c’est par ici : Réalisation d’une page Web

A toi de jouer !

Maintenant, c’est à toi de jouer, en apprenant les principales structures HTTP et CSS d’une page web .

• Le HTML
• Le CSS

Puis en mettant tes connaissances en œuvre avec :

• Réalisation d’une page Web

Lors du chapitre précédent, nous avons crée une page web sur notre ordinateur. Mais nous ne l’avons pas hébergé, ni partagé. Pour cela, il nous faut un serveur web et un réseau. Mais qu’appelle-t-on réseau ?

L’adresse IP

Une adresse IP est une suite de 32 bits résumé en 4 octets. Elle est « unique » à chaque hôte d’un même réseau. Elle se divise en 2 parties :

• Une partie gauche identifiant le réseau. Elle est la même à chaque hôte d’un même réseau.
• Une partie droite identifiant l’hôte dans le réseau.

0000 1010 - 1000 0000 - 0000 1111 - 1100 1000 : IP

10 . 128 . 15 . 200 : IP, notation décimal

Le masque de sous-réseau définit l’endroit de la division entre la partie gauche et droite d’une IP. Si par exemple on dit que la partie identifiant le réseau d’une IP occupe 26 bits :

• 0000 1010 - 1000 0000 - 0000 1111 - 1100 1000 : IP
• 1111 1111 - 1111 1111 - 1111 1111 - 1100 0000 : Masque de sous-réseau (26 bits)
• 0000 1010 - 1000 0000 - 0000 1111 - 11.. .... : Partie réseau
• .... .... - .... .... - .... .... - ..00 1000 : Partie hôte

Le maximum d’hôtes d’un réseau se calcule à partir du maximum d’adresses possibles dans ce réseau auquel on enlève les deux adresses réservées, à savoir :

• L’adresse du réseau (bits de la partie hôte à 0) : Elle définit par convention le nom du réseau.
• L’adresse de diffusion (ou broadcast, bits de la partie hôte à 1) : Elle permet d’envoyer un même message à tous les hôtes du réseau.

Dans l’exemple précédent, la partie réseau occupe 26 bits. la partie hôte occupe donc 32 – 26 = 6 bits. On a donc un maximum de « 11 1111 » adresses possibles soit 63 en décimal. En retirant les 2 adresses réservées, on obtient un maximum de 61 hôtes pour ce réseau.

• 0000 1010 - 1000 0000 - 0000 1111 - 11.. .... : Partie réseau
• 0000 1010 - 1000 0000 - 0000 1111 - 1100 0000 : Adresse du réseau
• 0000 1010 - 1000 0000 - 0000 1111 - 1111 1111 : Adresse de diffusion

Le réseau Ethernet

Mettons nos hôtes en réseau ! Les hôtes disposent en général d’une seule carte réseau équipé d’une unique prise pour communiquer. Aussi, dès que le nombre d’hôtes dépasse 2, on utilise l’un des 2 acteurs ci-dessous pour les relier :

• Le concentrateur (hub) : Il transmet les messages à tous les hôtes
• Le commutateur (switch) : Il transmet les messages aux hôtes destinataires

Une fois reliées, les cartes réseaux des hôtes doivent configurés en indiquant pour chacun par exemple :

• L’adresse IP de l’hôte
• Le masque de sous-réseau du réseau
• L’adresse IP de la passerelle (si elle existe)
• L’adresse IP du Serveur DNS (s’il existe)

Le réseau est dit local si ses hôtes ont tous la même adresse réseau

Le routeur

Le routeur, lui, est un 3e acteur dont la particularité est d’interconnecter plusieurs réseaux. On dit qu’il sert de passerelle. Il peut aussi contenir d’autres services comme des serveurs DHCP ou DNS :

• Adresse de la passerelle : adresse du routeur vers laquelle le message est envoyé pour que ce dernier le reroute vers un autre réseau si le destinataire n’est pas dans le réseau actuel.
• Adresse de la route par défaut : adresse vers laquelle le routeur renvoie les messages reçus s’il ne sait pas ou les envoyer.
• Serveur DHCP : serveur permettant de configurer automatiquement chaque nouvel hôte sur le réseau.
• Serveur DNS : serveur capable de traduire les URL (comme celles rentrées sur les navigateurs web) en IP

Internet

Internet (le réseau des réseaux) est rendu accessible à l’aide des FAI qui fournissent des routeurs permettant l’interfaçage entre un réseau isolé et le réseau internet. Le réseau est alors appelé réseau privé :

• FAI : Fournisseur d’accès Internet
• Réseau privé : Réseau dont les IP ne sont pas routées sur Internet (donc pas accessible à ce dernier). Les adresses de ce réseau sont en :
  • 192.168.0.0/16 (plage d’IPs 192.168.x.x)
  • 172.16.0.0/12 (plage d’IPs 172.16.0.0 - 127.31.255.255)
  • 10.0.0.0/8 (plage d’IPs 10.x.x.x)

Contrairement à la situation précédente ou le routeur reroute simplement votre message vers le bon réseau, il remplace en plus votre IP par la sienne pour vous connecter à Internet. Internet ne voit donc pas votre IP dite privée, mais celle de l’interface du routeur connectée à Internet dite public.

• IP privée : IP de l’hôte sur le réseau privé
• IP publique : IP de l’hôte sur internet. L’hôte revêt l’IP du routeur.
• IP fixe / statique : Nom de l’IP publique si elle ne change jamais.
• IP dynamique : Nom de l’IP publique si elle change.

Maintenant que nous savons ce qu’est un réseau, voyons comment héberger un site web dans un serveur. Mais au fait, c’est quoi un site web ? Et comment fait-il pour communiquer sur le réseau ?

Le port

Dans un réseau, chaque hôte doit être authentifié par un identifiant unique. C’est l’IP. Cependant, plusieurs applications de l’hôte peuvent vouloir communiquer sur le réseau (Navigateur, Jeu en ligne, …). Comment fait-on pour les identifier sur le réseau ?

Le port est un numéro de 16 bits (plage de valeurs de 0 à 65535). Il est associé à chaque application de l’hôte communiquant sur le réseau. Deux applications d’un même hôte ne peuvent pas avoir le même port. Certains port sont par convention réservés à quelques applications comme certains serveurs :

• 21 : Port par défaut réservé au serveur SSH
• 80 : Port par défaut réservé au serveur web HTTP
• 443 : Port par défaut réservé au serveur web HTTPS

Par exemple, si on cherche à accéder aux 3 serveurs ci-dessus hébergé par l’hôte 192.168.0.4, il suffit de « taper » sur le réseau :

• 192.168.0.4:21 : Accès serveur SSH de l’hôte 192.168.0.4
• 192.168.0.4:80 : Accès serveur web HTTP de l’hôte 192.168.0.4
• 192.168.0.4:443 : Accès serveur web HTTPS de l’hôte 192.168.0.4

Le modèle client – serveur

Nous avons 2 hôtes sur un réseau contenant chacune une application. La 1e souhaite demander des informations à la 2e.

• Le client est la 1e application (celle qui envoie des demandes)
• Le serveur est la 2e application (celle qui répond aux demandes)

Le client et le serveur vont devoir chacun occuper un port de leur machine hôte :

• Le client occupera le port le temps d’envoyer sa demande et de recevoir ses réponses. Dans certains cas, il lui est également possible d’ouvrir une session avec le serveur.
• Le serveur écoutera en permanence sur le port en attente d’éventuelles demandes. L’hôte doit resté allumé et être performant.

Les protocoles TCP et UDP sont des protocoles de base d’Internet. Ils sont les plus utilisés pour les modèles client – serveur:

• UDP envoie les paquets sans accusé de réception
• TCP envoie les paquets avec accusé de réception

Le serveur web

Le serveur web (ou serveur HTTP) utilise le protocole http basé sur le protocole TCP pour communiquer avec les client (les navigateurs). Son but est :

• de stocker des pages web sans y toucher (page web statique)
• de générer une page web modifiée (page web dynamique)
• de rendre les pages accessibles sur le réseau

Les codes (ou langages de scripts) utilisés pour générer ou modifier le contenu (HTTP, CSS et JS) d’une page web avant de l’envoyer au client dépendent du serveur utilisé. On y retrouve parmi les plus utilisés :

• Le PHP (Utilisé en parallèle avec les Serveurs web Apache ou Nginx)
• Le Python (utilisé par des frameworks comme Django, …)
• Le JavaScript (utilisé par des frameworks comme Node.js, …)

Un Système de Gestion de Base de Données (SGBD) accompagne souvent un serveur web ou un framework web. Idéalement accessible que par ce dernier, il lui permet de sauvegarder des listes de données. Ces systèmes peuvent être des serveurs comme :

• PostGreSQL
• MariaDB (libre)
• MySQL (libre)

Parmi les architectures web les plus connues, on retrouve :

• Les *AMP (WAMP, LAMP, MAMP, …) : ensemble de logiciels libres permettant de générer un environnement web quel que soit l’OS tels que :
  • Le server web : Apache,
  • Les SGBD : MySQL, MariaDB,
  • Les langages de script : PHP, Perl, Python

• Les framework web : Capable de générer plusieurs serveurs web, ils peuvent aussi gérer facilement des application web (pages web donnant l’illusion d’une application). Par exemple :
  • l’application NodeRed pour contrôler les IoT est géré par Node.js.

Pour accéder à un serveur web dont on connait l’IP, le port, et le protocole utilisé (http ou https), il suffit de taper dans un navigateur :

protocole://IP_hôte:Port_serveur

A toi de jouer !

Maintenant, c’est à toi de jouer, en mettant en œuvre les quelques exemples ci-dessous :

• Héberger une page web sur WAMP
• Rendre WAMP accessible dans un réseau local
• Intégrer du script python dans WAMP (a venir)

Nous savons maintenant comment héberger une page web sur notre réseau local à l’aide d’un environnement AMP complet. Mais un tel environnement n’est pas toujours utilisable :

• Les *AMP sont souvent trop lourds pour les IoT
• Les *AMP ne sont pas les plus adaptés pour créer des applications web

Dans cette partie, je te propose de découvrir le fonctionnement du protocole HTTP et des méthodes simples pour les exploiter

Les trames

Les trames sont

Les requêtes GET

Dans le protocole HTTP, la requête GET permet à un client (votre navigateur) de demander une ressource (un fichier) à un serveur web. Elle permet d’accompagner la demande de variables à transmettre au serveur.

Envoyer une requête GET à un serveur est simple. Il suffit de rentrer dans votre navigateur une URL pour demander une page web à ce serveur :

protocole://Nom_hôte_serveur:Port_serveur/requête_fichier

Pour ajouter des variables à une requête GET, il suffit de rajouter un « ? » suivi des variables et de leur valeur. Par exemple si on envoie les variables :

• nom1 avec la valeur val1
• nom2 avec la valeur val2

protocole://Nom_hôte:Port_serveur/requête_fichier?nom1=val1&nom2=val2

Prenons l’exemple suivant : j’enregistre une page web constituée de deux fichiers (index.html et styles.css) dans un dossier nommé test du répertoire racine de mon serveur web WAMP. Pour accéder à cette page depuis mon navigateur, je tape :

http://127.0.0.1:80/test/index.html

En reprenant l’exemple précédent, le serveur, après lecture de votre requête GET, comprend que vous demandez le fichier index.html et vous le renvoie.

• Le protocole est : http
• Le nom de l’hôte du serveur est : 127.0.0.1
• Le port du même serveur est : 80
• Le fichier demandé est : test/index.html

Ton navigateur, en lisant le fichier HTML reçu, s’apercevra que ce dernier demande un fichier CSS et demandera automatiquement ce fichier CSS à l’aide d’une seconde requête GET :

http://127.0.0.1:80/test/styles.css

Ton navigateur a donc envoyé 2 requêtes GET : une par fichier. Il en enverra autant que de fichiers qu’il doit récupérer pour reconstituer la page web.

On peut aussi transmettre une variable à notre serveur en même temps que l’on demande une page web. Si par exemple je veux transmettre la variable couleur=bleu en même temps que je demande la page index.html à mon navigateur, je tapes :

http://127.0.0.1:80/test/index.html?color=bleu

Le serveur recevra bien la variable color en plus de renvoyer

Les requètes FORM

La méthode FORM permet d’envoyer des variables au serveur. La principale différence est que les variables ne sont pas inscrites dans l’URL comme c’est le cas pour la méthode GET.

Pour envoyer une méthode FORM, on utilise les formulaires en HTML.

Pour aller plus loin !

• WAMP
  • Héberger une page web sur WAMP

• GET
  • Requêtes GET – Visualisation avec un Client web Python
  • Requêtes GET – Visualisation avec un Serveur web Python
  • Méthodes GET – Visualisation avec une page web dynamique

• FORM
  • Méthodes FORM – Visualisation avec une page web dynamique