Programmation Web
Http
Objectif
Ce laboratoire a pour objectif de :
Inspecter des requêtes HTTP avec les outils DevTools des navigateurs.
Tester des requêtes HTTP avec cURL pour examiner les interactions serveur-client.
Configurer un serveur local Nginx pour héberger un site statique.
Créer un serveur Flask pour traiter des requêtes dynamiques.
Tester les interactions serveur avec Postman en utilisant des requêtes GET et POST.
Vous allez explorer les bases des requêtes HTTP, le déploiement local d’applications statiques et
dynamiques, et l’utilisation d’outils pour tester et analyser ces échanges.
Instructions pour Télécharger le Code de Départ du
Laboratoire
1. Téléchargez les fichiers de départ : Cliquez sur le lien suivant pour obtenir l’archive contenant
les fichiers nécessaires au laboratoire.
Télécharger le code de départ du Lab
2. Décompressez l’archive : Une fois le fichier lab5_starter_files.zip téléchargé, décompressez-le
dans un dossier de votre choix. Vous y trouverez tous les fichiers nécessaires pour commencer le
laboratoire.
Inspection HTTP avec DevTools
Objectif : Comprendre le comportement des requêtes HTTP.
Ouvrir DevTools
Sur Google Chrome ou Firefox, appuyez sur la touche F12 ou faites un clic droit sur la page, puis
sélectionnez “Inspecter”.
Rendez-vous dans l’onglet “Network” (Réseau) de la fenêtre DevTools.
Charger une page Web
Saisissez l’URL [Link] dans la barre d’adresse de votre navigateur
et appuyez sur Entrée.
Les DevTools captureront toutes les activités réseau liées au chargement de la page.
Analyser les requêtes HTTP
Recherchez la requête HTTP GET vers /wiki/React dans l’onglet Network.
Vérifiez les informations suivantes :
Méthode : GET
Statut : 200 OK
Taille transférée : ~26,98 Ko
Type : document (HTML)
Examiner les en-têtes (Headers)
Cliquez sur la requête pour accéder à l’onglet Headers :
Observez les Request Headers (ex. : User-Agent ) et les Response Headers (ex. : Content-
Type: text/html; charset=UTF-8 ).
Consulter la réponse
Dans l’onglet Response, visualisez le code HTML brut de la page.
Remarque : HTTPS vs HTTP
Cette requête utilise HTTPS, ce qui signifie que la communication est chiffrée (port 443). À
l’inverse, HTTP (port 80) n’offre pas de chiffrement.
Astuce : Utilisez des filtres dans l’onglet Network (par exemple, recherchez une partie de l’URL ou un
mot clé) pour localiser la requête souhaitée.
Note : Vous pouvez tester d’autres URLs (comme des API publiques) pour observer différents types de
requêtes (GET, POST, etc.).
Tester des Requêtes avec cURL
Objectif : Comprendre comment utiliser cURL pour interagir avec un serveur et explorer ses
nombreuses fonctionnalités, comme télécharger des fichiers ou interagir avec des protocoles variés
(HTTP, FTP, etc.).
Vérifier si cURL est installé
1. Ouvrir un Terminal VS Code ou l’Invite de Commandes Windows :
Dans VS Code : `Ctrl+Shift+`` pour ouvrir le terminal intégré.
Dans Windows : Win + R , tapez cmd , puis Entrée.
2. Tester la disponibilité de cURL :
curl --version
Si cURL est installé, vous verrez sa version.
Installer cURL (si nécessaire)
Si cURL n’est pas disponible :
1. Rendez-vous sur [Link]/windows/.
2. Téléchargez la version binaire pour Windows.
3. Extrayez les fichiers et ajoutez le chemin de l’exécutable à la variable d’environnement PATH .
Effectuer des Requêtes HTTP avec cURL
Tester une Requête GET
La commande GET permet de demander une ressource (par exemple, une page web) à un serveur.
curl [Link]
Le contenu HTML brut de la page s’affiche directement dans le terminal.
Utilité : Voir le code source renvoyé par le serveur et Valider que la requête renvoie bien une
réponse.
Afficher les En-têtes de Réponse
Les en-têtes de réponse contiennent des métadonnées importantes, comme le type de contenu et le
statut HTTP.
curl -I [Link]
Vous verrez uniquement les en-têtes HTTP, par exemple :
HTTP/2 200
content-type: text/html; charset=UTF-8
content-length: 25972
Utilité :
Vérifier le statut de la réponse (200 OK, 404 Not Found, etc.).
Identifier le type de contenu (HTML, JSON, etc.).
Voir des informations sur la mise en cache ou la durée de vie des données.
Afficher les Détails de la Requête (Mode Verbeux)
Le mode “verbeux” affiche les étapes détaillées de la requête envoyee par le client , y compris les
connexions et les en-têtes envoyés.
curl -v [Link]
Des informations détaillées, comme :
La connexion au serveur.
Les en-têtes envoyés (par exemple, User-Agent ).
Les en-têtes reçus en réponse.
Le contenu de la réponse.
Utilité :
Diagnostiquer des problèmes de requêtes (temps de réponse, erreurs).
Comprendre la communication client-serveur.
Télécharger un Fichier avec cURL
cURL peut être utilisé pour télécharger des fichiers directement depuis un serveur.
curl -O [Link]
Le flag -O (lettre O majuscule) télécharge le fichier à l’URL spécifiée et l’enregistre avec son nom
d’origine.
Envoyer une Requête avec des En-têtes Personnalisés
Vous pouvez simuler un client personnalisé en modifiant les en-têtes envoyés au serveur.
curl -H "User-Agent: CustomClient" [Link]
Le User-Agent est une chaîne qui décrit le client (navigateur, terminal, etc.) effectuant la requête. Ici,
nous envoyons un en-tête personnalisé avec CustomClient comme valeur.
Utilité :
Simuler différents types de clients pour tester le comportement d’un serveur. Le serveur
adapte souvent ses réponses en fonction du client (navigateur, mobile, etc.) indiqué par l’en-
tête User-Agent .
Utiliser des en-têtes spécifiques pour accéder à des API qui requièrent des informations
supplémentaires. Les APIs demandent souvent des en-têtes comme Authorization (clé API)
ou Content-Type (format des données).
curl -H "Authorization: Bearer my_api_key" [Link]
curl -X POST -H "Content-Type: application/json" -d '{"name":"Alice"}'
[Link]
Pourquoi utiliser cURL ?
cURL supporte plusieurs protocoles : HTTP, HTTPS, FTP, FTPS, SCP, SFTP, et bien d’autres.
Cela permet d’interagir avec une large variété de serveurs et services.
Téléchargement et Transfert de Fichiers via HTTP/HTTPS ou FTP/SFTP.
Debugging : Diagnostiquer les problèmes liés à des requêtes ou serveurs grâce au mode
verbeux.
Automatisation : Parfait pour être intégré dans des scripts pour automatiser des tests ou
des transferts de données.
Interaction avec des APIs : Tester des endpoints REST ou SOAP via des commandes HTTP
(GET, POST, PUT, DELETE).
Configuration d’un Serveur Nginx
Un serveur web est un logiciel qui permet de rendre accessible des pages web (fichiers HTML,
images, CSS, JavaScript…) à des utilisateurs via un réseau, généralement Internet ou un réseau local.
Lorsqu’un navigateur (comme Chrome, Firefox ou Edge) demande une page (par exemple,
[Link] le serveur web reçoit cette requête, localise le fichier correspondant sur
votre machine, puis l’envoie au navigateur. Le navigateur affiche ensuite ce contenu. L’objectif ici est
de configurer et d’utiliser Nginx, un serveur web très populaire, pour héberger localement un site
web statique (c’est-à-dire un ensemble de fichiers HTML, CSS, JavaScript, images…) directement sur
votre ordinateur. Cela vous permet de tester votre site avant de le mettre en ligne sur Internet.
Installer Nginx
1. Rendez-vous sur le site officiel de Nginx ([Link]
2. Téléchargez l’archive correspondant à votre système.
3. Extrayez l’archive téléchargée dans C:\nginx (par exemple).
Vous devriez alors avoir une structure comme :
C:\nginx
├─ html
└─ conf
└─ [Link]
Préparer les fichiers du site
Placez vos fichiers HTML (par exemple [Link] , [Link] , [Link] ) dans le répertoire
C:\nginx\html .
Par exemple :
C:\nginx
├─ html
│ ├─ [Link]
│ ├─ [Link]
│ └─ [Link]
└─ conf
└─ [Link]
Note : est la page d’accueil du site. Elle sera servie automatiquement lorsque l’on accède à
[Link]
[Link] .
Configurer le serveur
Ouvrez le fichier de configuration [Link] situé dans C:\nginx\conf avec un éditeur de texte, par
exemple Visual Studio Code.
Recherchez un bloc server { ... } et vérifiez qu’il contient au moins :
server {
listen 80;
server_name localhost;
root html;
index [Link] [Link];
location / {
try_files $uri $uri/ =404;
}
}
Cette configuration indique à Nginx :
D’écouter sur le port 80 pour les requêtes.
D’utiliser localhost comme nom de serveur.
De servir les fichiers depuis le dossier html (root).
De considérer [Link] comme fichier par défaut si aucun nom de fichier n’est spécifié dans
l’URL.
De renvoyer une erreur 404 si le fichier demandé n’existe pas.
Enregistrez vos modifications.
Démarrer le serveur Nginx
Ouvrez une invite de commandes (cmd) sur Windows, puis tapez :
cd C:\nginx
start nginx
Cette commande lance Nginx. Vous ne verrez pas forcément de message particulier, mais le serveur
sera en cours d’exécution.
Tester depuis un navigateur web
Ouvrez votre navigateur (Chrome, Firefox, Edge, etc.) puis saisissez l’adresse suivante dans la barre
d’URL :
[Link]
Vous devriez voir s’afficher la page d’accueil ([Link]) que vous avez placée dans le dossier
C:\nginx\html.
Pour tester une autre page, par exemple [Link], entrez :
[Link]
Si la page s’affiche correctement, votre serveur Nginx fonctionne et sert bien vos fichiers statiques.
Tester avec cURL
cURL est un outil en ligne de commande qui permet de tester des requêtes HTTP. Il est souvent
installé par défaut sur les systèmes Unix, mais vous pouvez l’obtenir pour Windows sur
[Link]
Pour tester la page d’accueil ([Link]) :
curl [Link]
Vous devriez voir le code HTML de votre page d’accueil s’afficher dans la console.
Pour tester la page services ([Link]) :
curl [Link]
Si tout se passe bien, cela confirmera que Nginx sert correctement vos fichiers statiques.
Vous avez maintenant un serveur web Nginx fonctionnel, configuré pour servir des fichiers HTML
statiques depuis votre machine. C’est un excellent point de départ pour comprendre comment
fonctionne un site web en local avant de le déployer en ligne.
Mise en Place d’un Serveur Flask
Objectif : Créer un serveur dynamique pour traiter des requêtes GET et POST
Conseil : Créez un environnement virtuel Python pour éviter les conflits de dépendances :
python -m venv venv
venv\Scripts\activate
Installer Flask :
pip install flask
Lancer le Serveur Flask :
Ouvrir le dossier App Flask du code starter dans VS Code.
python [Link]
Le serveur est accessible à l’adresse [Link] .
Tester avec cURL :
Accédez à la page d’accueil :
curl [Link]
Envoyez des données via POST :
curl -X POST -d "name=Jean&email=jean@[Link]&genre=Homme&message=Bonjour" [Link]
Obtenir les en-têtes dans la sortie de curl
Pour inclure les en-têtes de réponse avec le corps dans la sortie de votre commande curl , utilisez
l’option -i . Cela affichera les en-têtes HTTP de la réponse suivis du corps dans le terminal.
Commande Exemple :
curl -X POST -d "name=Jean&email=jean@[Link]&genre=Homme&message=Bonjour" [Link]
Résultat :
HTTP/1.0 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 23
Server: Werkzeug/2.0.2 Python/3.9.7
Date: Sun, 10 Dec 2023 14:56:30 GMT
En-têtes : Les lignes en haut ( HTTP/1.0 200 OK , Content-Type , etc.) représentent les en-têtes HTTP
de la réponse envoyés par le serveur.
Corps : La ligne “Form submitted successfully!” est le corps de la réponse du serveur.
Utilisation de Postman pour Tester des Requêtes HTTP
Postman est un outil permettant d’envoyer facilement des requêtes HTTP (GET, POST, etc.) à un
serveur et d’observer les réponses. Il est très utile pour tester des API, vérifier le fonctionnement de
vos endpoints et déboguer sans avoir à développer d’interface spécifique.
Installation de Postman
1. Téléchargement et Installation :
Rendez-vous sur [Link] téléchargez et installez la version
adaptée à votre système d’exploitation (Windows, macOS, Linux).
2. Lancement de Postman :
Une fois installé, ouvrez Postman. Lors du premier démarrage, vous pouvez choisir de vous
connecter ou de passer cette étape. Si vous débutez et souhaitez simplement tester des requêtes,
sélectionner “Skip signing in” est possible. Vous pourrez toujours vous connecter plus tard si
nécessaire.
Mode de Fonctionnement avec ou sans Connexion :
- Sans être connecté (non-signed-in): Vous pouvez utiliser Postman sans créer de compte. Dans ce
mode, vous pourrez envoyer des requêtes et consulter les réponses, mais vous ne bénéficierez pas
des fonctionnalités avancées (synchronisation des données, gestion de collections, collaboration, etc.).
Avec connexion (signed-in): La création et l’utilisation d’un compte Postman vous donnent accès
à des fonctionnalités plus avancées, comme la synchronisation de vos requêtes sur plusieurs
appareils, le partage et l’organisation de vos endpoints dans des collections, ainsi que des
espaces de travail collaboratifs.
Tester une Requête GET
1. Préparation de la requête GET :
Ouvrez un nouvel onglet dans Postman.
Sélectionnez la méthode GET.
Saisissez l’URL de votre serveur, par exemple : [Link] .
2. Envoi de la requête :
Cliquez sur Send.
Observez la réponse (le code HTML, le statut HTTP, les en-têtes, etc.).
Tester une Requête POST
1. Préparation de la requête POST :
Ouvrez un nouvel onglet dans Postman.
Sélectionnez la méthode POST.
Saisissez l’URL de l’endpoint, par exemple : [Link] .
2. Ajout des données au Corps de la Requête :
Cliquez sur l’onglet Body.
Sélectionnez x-www-form-urlencoded.
Ajoutez les paires clé/valeur, par exemple :
name: Jean
email: jean@[Link]
message: Bonjour
Lorsque vous envoyez des données via POST dans Postman, vous pouvez choisir entre différents
formats :
x-www-form-urlencoded : Format classique des formulaires HTML simples. Les données sont
encodées sous forme de paires clé=valeur, ce qui est idéal pour la plupart des données textuelles (ex.
nom, email, message).
form-data (multipart/form-data) : Utilisez ce format si vous devez envoyer des fichiers ou des
données plus complexes. Il segmente les informations en plusieurs parties, ce qui facilite la gestion
des fichiers.
Pour un simple formulaire texte, x-www-form-urlencoded est souvent le plus adapté.
1. Envoi de la requête POST : Cliquez sur Send.
Conclusion
Ce laboratoire vous a permis d’explorer les fondamentaux des requêtes HTTP, d’inspecter ces
requêtes dans un navigateur, de tester des interactions serveur-client avec cURL, de configurer un
serveur local Nginx pour des fichiers statiques, de mettre en place un serveur Flask pour des pages
dynamiques et de tester le tout avec Postman.
La partie consacrée aux tests d’API (formats JSON, authentification, utilisation de bases de données,
tests unitaires) sera traitée en détail dans le cours de Programmation Web 2. D’ici là, vous disposez
d’une base solide pour comprendre et manipuler les échanges HTTP entre client et serveur.