⚠️ Avant de commencer cette quête, nous te conseillons de terminer celles-ci :

Dans les quêtes précédentes, tu as appris à :

• Configurer et créer un serveur avec Express
• Créer des routes basiques
• Créer des routes GET qui récupère les informations de la base de données.

Dans cette quête, il est temps d'apprendre à écrire des routes POST avec Express et à insérer de nouveaux éléments dans notre base de données via HTTP !

🤓 Dans cette quête, tu vas apprendre à :

✅ Créer une route POST ✅ Enregistrer les données dans la base de données à partir d'une requête POST

📬 Comment créer une route POST avec Express ?

D'une certaine manière, tu connais déjà la réponse... Si tu te souviens de cette requête :

GET http://localhost:5000/api/movies

Tu as déclaré une route pour y répondre comme ceci :

app.get("/api/movies", HANDLER);

Maintenant, tu veux gérer les requêtes de création de ressources, comme celle-ci :

POST http://localhost:5000/api/movies
Content-type: application/json

{
  "title": "Citizen Kane",
  "director": "Orson Wells",
  "year": "1941",
  "color": "0",
  "duration": 120
}

Prenons cet exemple de création d'un film dans la table movies :

false|||true|||false
# Quelle méthode de `app` dois tu utiliser pour déclarer la route ?
[x] `app.post()`
[] `app.get()`
[] `app.delete()`
[] `app.put()`
# Quel chemin dois-tu utiliser comme premier paramètre ?
[] `"/api/movies/:id"`
[x] `"/api/movies"`
[] `"/api/users"`
[] `"/api/users/:id"`

C'est suffisant pour un premier jet. Essaye de créer la route pour POST /api/movies : pour cette étape, envoie "Post route is working 🎉" dans la réponse.

Afficher la solution|||javascript|||Tu as des doutes sur comment faire ?|||0|||Masquer
// in src/controllers/movieControllers.js

const postMovie = (req, res) => {
  res.send("Post route is working 🎉");
};

module.exports = {
  getMovies,
  getMovieById,
  postMovie, // don't forget to export your function ;)
};

// in src/app.js

app.post("/api/movies", movieControllers.postMovie);

Maintenant, lançons Postman et faisons une requête POST !

Tape l'URL localhost:5000/api/movies puis sélectionne POST dans le menu déroulant. Clique sur Envoyer, tu devrais voir Post route is working 🎉.

🤷🏻‍♂️ Mais une requête POST n'est-elle pas supposée contenir des informations ?

Bien sûr que oui ! Ajoutons un corps à notre requête avec Postman !

Clique sur l'onglet body et sélectionne raw. Sélectionne ensuite JSON à l'aide du menu déroulant :

À l'intérieur du corps, plaçons les données d'un nouveau film au format JSON :

{
  "title":"Whiplash",
  "director" :"Damien Chazelle",
  "year":"2014",
  "color":true,
  "duration":107
}

Si tu cliques sur SEND, rien ne se passera. Car nous n'avons encore rien écrit pour "rattraper" les données dans Express. Pour cela, tu dois utiliser req.body (le code suivant ne fonctionnera pas)  :

const postMovie = (req, res) => {
  console.log(req.body);
  res.send("Post route is working 🎉");
};

Essaye d'envoyer à nouveau la demande avec Postman. Maintenant, tu devrais voir undefined dans la console. Et c'est parfaitement normal !

Express ne peut pas lire les corps de requête JSON par défaut... Pour que cela fonctionne, nous devons utiliser un middleware express intégré : express.json(). Modifie le code de ton fichier app.js comme suit :

const express = require("express");

const app = express();

app.use(express.json()); // add this line

// ...

Maintenant réessaye d'envoyer les données avec Postman : tu devrais voir les données dans le terminal où tu as lancé le serveur.

Middle-quoi ?

Par définition, un middleware est un logiciel (ou une fonction) qui sera appelé entre deux parties d'un logiciel (ou deux opérations, ou deux applications).

Une application utilisant Express n'est rien d'autre qu'une succession d'appels middleware.

Ne t'inquiète pas si les middlewares sont encore un peu déroutants pour le moment, nous les verrons et les pratiquerons plus tard.

Ce que tu dois garder à l'esprit, c'est que express.json() est un middleware que nous utilisons au tout début de notre code pour nous assurer que toutes nos routes sont capables de lire un corps de requête au format JSON.

Insérer des données dans ta base de données

Dans les épisodes précédents, tu as utilisé des requêtes SELECT : maintenant nous devons INSÉRER des données.

Dans ta fonction pour poster, utilise la déstructuration d'objet pour créer une variable pour chaque propriété de req.body.

const postMovie = (req, res) => {
  const { title, director, year, color, duration } = req.body;
};

👌🏻 En extrayant toutes les variables, nous nous assurons de n'envoyer à notre base de données que les informations que nous souhaitons INSÉRER.

L'étape suivante consiste à utiliser database.query pour écrire ta requête INSERT. Cela devrait commencer comme ceci :

const postMovie = (req, res) => {
  const { title, director, year, color, duration } = req.body;

  database
    .query(
      "INSERT INTO movies(title, director, year, color, duration) VALUES (?, ?, ?, ?, ?)",
      [title, director, year, color, duration]
    )
    .then(([result]) => {
      // wait for it
    })
    .catch((err) => {
      console.error(err);
      res.sendStatus(500);
    });
};

Note que nous utilisons plusieurs ? près du mot-clé SQL VALUES. Ces points d'interrogation seront remplacés par le module mysql2 avant que la requête ne soit réellement envoyée à la base de données. C'est là que les valeurs du tableau en deuxième argument seront utilisées. Attention, l'ordre des éléments dans le tableau compte ! Le premier point d'interrogation sera remplacé par le premier élément du tableau et ainsi de suite...

En regardant la partie then, c'est là que nous obtenions précédemment les lignes sélectionnées lors de l'exécution d'une requête SELECT. Mais nous effectuons maintenant une requête INSERT : le résultat est ici le résultat d'une insertion. Si tu le console.log(), tu seras peut-être intéressé par result.insertId qui stocke l'identifiant auto-incrémenté de la ressource insérée.

Passons à la dernière partie du puzzle. Si tu lis cette page (et que tu la mets dans tes favoris), tu sauras qu'une requête POST doit renvoyer :

• le statut HTTP "Created"
• un en-tête Location pointant vers la nouvelle ressource (quelque chose comme /api/movies/ suivi de l'identifiant d'insertion)... cette partie ajouterait beaucoup de complexité et est donc rarement suivie dans l'usage : nous allons privilégier un objet contenant l'id.

res.status(/* ??? */).send({ id: /* ??? */ });

Essaye de terminer la fonction par toi-même.

Afficher la solution|||javascript|||Tu as des doutes sur comment faire ? |||0|||Masquer
const postMovie = (req, res) => {
  const { title, director, year, color, duration } = req.body;

  database
    .query(
      "INSERT INTO movies(title, director, year, color, duration) VALUES (?, ?, ?, ?, ?)",
      [title, director, year, color, duration]
    )
    .then(([result]) => {
      res.status(201).send({ id: result.insertId });
    })
    .catch((err) => {
      console.error(err);
      res.sendStatus(500);
    });
};

Retourne maintenant à Postman et renvoie la requête !

Tu devrais voir le statut 201 Created et l'id dans le corps de la réponse.

Tu peux maintenant refaire une requête GET pour vérifier si les données ont bien été envoyées :

💪 Challenge

Insérer des utilisateurs dans la base de données

Maintenant que tu as créé la route POST pour les films, créons la route POST pour conserver les nouveaux utilisateurs.

• Crée une route POST pour /api/users qui insérera un nouvel utilisateur dans la base de données
• Publie un lien GitHub pour partager ta solution

🧐 Critères d'acceptation

• [ ] Le GitHub contient une route POST pour les utilisateurs
• [ ] Une requête POST sur /api/users devrait créer un nouvel utilisateur dans la base de données

==$==

Ce que tu devrais avoir dans :

// ...

const movieHandlers = require("./movieHandlers");

app.get("/api/movies", movieHandlers.getMovies);
app.get("/api/movies/:id", movieHandlers.getMovieById);
app.post("/api/movies", movieHandlers.postMovie);

const userHandlers = require("./userHandlers");

app.get("/api/users", userHandlers.getUsers);
app.get("/api/users/:id", userHandlers.getUserById);
app.post("/api/users", userHandlers.postUser);

// ...

// ...

const postUser = (req, res) => {
  const { firstname, lastname, email, city, language } = req.body;

  database
    .query(
      "INSERT INTO users(firstname, lastname, email, city, language) VALUES (?, ?, ?, ?, ?)",
      [firstname, lastname, email, city, language]
    )
    .then(([result]) => {
      res.status(201).send({ id: result.insertId });
    })
    .catch((err) => {
      console.error(err);
      res.sendStatus(500);
    });
};

module.exports = {
  getUsers,
  getUserById,
  postUser,
};

// ...

const postMovie = (req, res) => {
  const { title, director, year, color, duration } = req.body;

  database
    .query(
      "INSERT INTO movies(title, director, year, color, duration) VALUES (?, ?, ?, ?, ?)",
      [title, director, year, color, duration]
    )
    .then(([result]) => {
      res.status(201).send({ id: result.insertId });
    })
    .catch((err) => {
      console.error(err);
      res.sendStatus(500);
    });
};

module.exports = {
  getMovies,
  getMovieById,
  postMovie,
};