Skip to Content
🎉 Utilisez JS efficacement →
MongoDBExercice

MongoDB-TP-TW3

Ressources :

  • CodeSandbox  est une plateforme en ligne offrant un environnement de dĂ©veloppement collaboratif basĂ© sur le cloud.

  • L’image Docker officielle de MongoDB peut ĂȘtre trouvĂ©e sur le Hub Docker - MongoDB , offrant une solution prĂȘte Ă  l’emploi pour le dĂ©ploiement de bases de donnĂ©es MongoDB dans des conteneurs Docker.

  • Express  est un framework web minimaliste et flexible pour Node.js, permettant de crĂ©er des applications web robustes et Ă©volutives.

  • MongoDB  est un systĂšme de gestion de base de donnĂ©es NoSQL orientĂ© document.

  • Body-Parser  est un middleware Node.js facilitant le traitement des donnĂ©es du corps des requĂȘtes HTTP dans une application Express.

Étapes :

  • CrĂ©er un devBox Node.js sur codesandBox 
  • Utiliser le cours pour installer mongoDB dans le codesandBox, et lancer un container docker mongo.
  • Installer les dĂ©pendances (librairies), nĂ©cessaire au projet. 
    npm i express mongodb body-parser
  • CrĂ©er les fichiers de base du projet :
      • index.js
        • index.html
        • style.css
        • script.js
    • package.json
⚠

Il y a des erreurs dans le code que je vous fourni, principalement du fait que j’ai fait Ă©voluer l’exercice plusieurs fois. Vous allez devoir les identifier pour faire fonctionner le project

vous pouvez/devez travailler tous ensembles

Création des fichiers

public/index.html

public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Node.js MongoDB Docker</title>
</head>
<body>
  <h1>Hello, MongoDB!</h1>
  <div>
    <label for="dataInput">Data:</label>
    <input type="text" id="dataInput" />
    <button onclick="sendData()">Send Data</button>
  </div>
  <div id="output"></div>
  <script src="script.js"></script>
</body>
</html>

public/style.css

public/style.css
body {
  font-family: Arial, sans-serif;
  margin: 20px;
}
 
h1 {
  color: #333;
}
 
div {
  margin-top: 20px;
}
 
label {
  font-weight: bold;
}
 
input {
  margin-right: 10px;
}
 
button {
  cursor: pointer;
}

public/script.js

public/script.js
function sendData() {
  const dataInput = document.getElementById('dataInput');
  const outputDiv = document.getElementById('output');
 
  const data = dataInput.value;
 
  // Utilisez fetch pour envoyer des données au serveur
  fetch('/sendData', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ data }),
  })
  .then(response => response.json())
  .then(result => {
    outputDiv.innerText = `Server Response: ${result.message}`;
  })
  .catch(error => {
    console.error('Error sending data:', error);
  });
}

src/index.js

src/index.js
const express = require('express');
const { MongoClient } = require('mongodb');
const bodyParser = require('body-parser');
 
const app = express();
const PORT = process.env.PORT || 3000;
 
// URL de MongoDB sur le port 27017, le protocole est mongodb:// l'hÎte est localhost utilisez les information de configuration de docker comme référence.
const mongoUrl = 'mongodb://localhost:27017';
 
// Utilisez bodyParser pour parser les requĂȘtes JSON
app.use(bodyParser.json());
 
// Utilisez express.static pour servir les fichiers statiques
app.use(express.static("src/public"));
 
// Route pour envoyer des données à l'API
app.post('/addData', async (req, res) => {
  const dataContent = req.body.data;
 
  try {
    // Établir une connexion avec la base de donnĂ©es
    const client = new MongoClient(mongoUrl);
    await client.connect();
 
    // Sélectionne la base de données et la collection 
    const collection = client.db().collection('data');
 
    // Insérer une nouvelle donnée dans la collection
    await collection.insertOne({ content: dataContent });
 
    // Fermer la connexion
    await client.close();
 
    res.json({ message: 'Data added successfully' });
  } catch (error) {
    console.error('Error adding data:', error);
    res.status(500).json({ error: 'Internal Server Error' });
  }
});
 
// Route pour récupérer des données depuis l'API
app.get("/list", async (req, res) => {
  try {
    // Établir une connexion avec la base de donnĂ©es
    const client = new MongoClient(mongoUrl);
    await client.connect();
 
    // SĂ©lectionner la collection
    const collection = client.db("test").collection("ma_collection");
 
    // Récupérer les données de la collection et les formatter en tableau JSON
    const list = await collection.find().toArray();
 
    // Fermer la connexion
    await client.close();
 
    // Renvoyer le tableau JSON Ă  l'utilisateur
    res.json({ list });
  } catch (error) {
    console.error("Error reading data:", error);
    res.status(500).json({ error: "Internal Server Error" });
  }
});
 
// Route pour récupérer un document depuis l'API
app.get("/etudiant/:id", async (req, res) => {
  const { id } = req.params;
  // à vous de compléter
});
 
// Route pour modifier un document depuis l'API
app.post("/edit/:id", async (req, res) => {
  const { id } = req.params;
  // à vous de compléter
});
 
// ... (autres routes)
 
app.listen(PORT, () => {
  console.log(`Example app listening on port ${PORT}`)
})

Objectifs

Développer le projet créé en utilisant deux documents (cf: modélisation) :

pet et owner pour reprendre le TP prĂ©cĂ©dent, vous pourrez rĂ©utiliser un structure connu et simple, ce qui vous permettra de vous concentrer sur l’essentiel.

mis Ă  jour le
securite