📅 SAISON B Semaine 2 Épisode 4 - GET et POST

📚 Notions du jour

Aujourd’hui, j’ai plongé dans les deux méthodes HTTP les plus fondamentales : GET et POST. Ces méthodes sont essentielles pour envoyer des données d’un client (comme un navigateur web) à un serveur. Elles servent des objectifs très différents et ont des comportements distincts.

---

🔍 Méthode GET : Les Données dans l’URL

La méthode GET est utilisée pour demander des données à un serveur. Lorsqu’on utilise GET, les données sont envoyées dans l’URL sous forme de paramètres de requête. Cela rend les requêtes GET visibles et partageables, mais aussi moins sécurisées pour les données sensibles (puisque l’URL peut être enregistrée ou partagée).

Syntaxe des Requêtes GET

• L’URL commence par un ? pour indiquer le début des paramètres de requête (query parameters).
• Chaque paramètre est une paire clé-valeur : clé=valeur.
• Plusieurs paramètres sont séparés par &.

Exemple :

https://example.com/search?q=express&sort=asc

• q=express : La requête de recherche est "express".
• sort=asc : Les résultats doivent être triés par ordre ascendant.

Comment Gérer les Requêtes GET dans Express

Dans Express, on peut accéder aux paramètres GET en utilisant req.query.

Exemple :

// Express route to handle a GET request
app.get('/search', (req, res) => {
  const query = req.query.q; // Access to 'q' parameter
  const sortOrder = req.query.sort; // Access to 'sort' parameter

  res.send(`Searching for: ${query}, sorted by: ${sortOrder}`);
});

Explications :

• req.query est un objet contenant tous les paramètres de requête.
• Si l’URL est /search?q=express&sort=asc, req.query sera { q: 'express', sort: 'asc' }.

Cas d’Utilisation pour GET :

• Recherche (ex. : recherche Google).
• Filtrage de données (ex. : filtres de produits sur un site e-commerce).
• Partage ou marquage d’URLs (puisque les paramètres sont visibles dans l’URL).

---

📩 Méthode POST : Les Données dans le Corps de la Requête

La méthode POST est utilisée pour envoyer des données au serveur afin de créer ou mettre à jour une ressource. Contrairement à GET, les données dans une requête POST sont envoyées dans le corps de la requête HTTP, ce qui les rend invisibles dans l’URL. Cela rend les requêtes POST plus adaptées pour envoyer des données sensibles (comme des mots de passe) ou de grandes quantités de données.

Fonctionnement de POST

• Les données sont envoyées dans le corps de la requête HTTP.
• Le serveur doit analyser le corps pour accéder aux données.
• Dans Express, nous avons besoin d’un middleware comme express.urlencoded() ou express.json() pour analyser le corps. Il ne décrypte pas le format des données par défaut. Il faut lui préciser.

Comment Gérer les Requêtes POST dans Express

Pour gérer les requêtes POST, on doit :

1. Utiliser le middleware express.urlencoded() pour analyser le corps de la requête.
2. Accéder aux données en utilisant req.body.

Exemple :

import express from 'express';

const app = express();

// Middleware to parse URL-encoded bodies (from HTML forms)
app.use(express.urlencoded({ extended: true }));

// Route to handle a POST request
app.post('/submit', (req, res) => {
  const username = req.body.username; // Access the 'username' field
  const password = req.body.password; // Access the 'password' field

  // Display the retrieved parameters. 
  // In reality, the data will be processed server-side to interact with the database. 
  // ++We'll see how later.
  res.send(`Received data: Username = ${username}, Password = ${password}`);
});

Explications :

• express.urlencoded({ extended: true }) analyse les données de requête encodées en URL (généralement envoyées par des formulaires HTML).
• req.body contient les données analysées du corps de la requête.
• Si le formulaire envoie username=john&password=123, req.body sera { username: 'john', password: '123' }.

Cas d’Utilisation pour POST :

• Soumission de formulaires (ex. : connexion, inscription).
• Téléchargement de fichiers.
• Envoi de données sensibles (puisqu’elles ne sont pas visibles dans l’URL).

---

📝 Exemple coomplet : Gérer un Formulaire avec GET et POST

Repartons de notre projet Ghibliothèque fil rouge de la semaine en y ajoutant un formulaire de recherche (avec GET) et un formulaire d'ajout de film (avec POST).

1️⃣ Formulaire HTML (dans un template comme form.ejs)

<!-- form.ejs -->
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Exemple de Formulaire</title>
</head>
<body>
  <h1>Soumettez Vos Informations</h1>

  <!-- Formulaire GET -->
  <form action="/submit-get" method="GET">
    <label for="get-username">Nom d'utilisateur (GET) :</label>
    <input type="text" id="get-username" name="username">
    <label for="get-password">Mot de passe (GET) :</label>
    <input type="password" id="get-password" name="password">
    <button type="submit">Soumettre avec GET</button>
  </form>

  <!-- Formulaire POST -->
  <form action="/submit-post" method="POST">
    <label for="post-username">Nom d'utilisateur (POST) :</label>
    <input type="text" id="post-username" name="username">
    <label for="post-password">Mot de passe (POST) :</label>
    <input type="password" id="post-password" name="password">
    <button type="submit">Soumettre avec POST</button>
  </form>
</body>
</html>

2️⃣ Routes Express pour Gérer les Soumissions GET et POST

import express from 'express';

const app = express();

// Middleware pour analyser les corps encodés en URL
app.use(express.urlencoded({ extended: true }));

// Route pour afficher le formulaire
app.get('/form', (req, res) => {
  res.render('form');
});

// Route pour gérer la soumission GET du formulaire
app.get('/submit-get', (req, res) => {
  const username = req.query.username;
  const password = req.query.password;

  res.send(`Soumission GET : Nom d'utilisateur = ${username}, Mot de passe = ${password}`);
});

// Route pour gérer la soumission POST du formulaire
app.post('/submit-post', (req, res) => {
  const username = req.body.username;
  const password = req.body.password;

  res.send(`Soumission POST : Nom d'utilisateur = ${username}, Mot de passe = ${password}`);
});

app.listen(3000, () => {
  console.log('Serveur en cours d\'exécution sur http://localhost:3000');
});

Explications :

• La route /form affiche le formulaire.
• La route /submit-get gère les soumissions GET (données dans l’URL).
• La route /submit-post gère les soumissions POST (données dans le corps de la requête).

---

⚠️ Points Importants à Retenir

1. Sécurité GET vs POST :
2. GET n’est pas sécurisé pour les données sensibles (comme les mots de passe) car les données sont visibles dans l’URL.

3. POST est plus sécurisé car les données sont cachées dans le corps de la requête.

4. Limites de Données :

5. Les requêtes GET ont des limites de longueur d’URL (varie selon le navigateur, généralement ~2000 caractères).

6. Les requêtes POST peuvent gérer des quantités de données plus importantes (car elles sont envoyées dans le corps).

7. Traitement Côté Serveur :

8. Si le serveur ne gère pas les données GET ou POST, les données sont ignorées.

9. Exemple : Si on envoie une requête GET à https://example.com/?name=John mais que le serveur n’utilise pas req.query.name, le paramètre name est ignoré.

10. Middleware dans Express :

11. Pour les requêtes POST, on doit utiliser un middleware comme express.urlencoded() ou express.json() pour analyser le corps.
12. Sans ce middleware, req.body sera undefined.

---

🚀 Ce Que J’ai Appris Aujourd’hui

1. GET vs POST :
2. GET envoie les données dans l’URL (visible, partageable, moins sécurisé).

3. POST envoie les données dans le corps de la requête (caché, plus sécurisé, pas de limites de taille).

4. Gestion de GET dans Express :

5. Utiliser req.query pour accéder aux paramètres d’URL.

6. Gestion de POST dans Express :

7. Utiliser le middleware express.urlencoded() pour analyser les données de formulaire.

8. Accéder aux données avec req.body.

9. Considérations de Sécurité :

10. Ne jamais envoyer de données sensibles (comme les mots de passe) en utilisant GET.

11. Toujours utiliser POST pour les formulaires qui soumettent des informations sensibles.

12. L’Importance des Middlewares :

13. Sans express.urlencoded(), les données POST ne seront pas analysées.
14. L’ordre des middlewares est important (par exemple, express.urlencoded() doit être utilisé avant les routes qui ont besoin de req.body).