QU’est ce que Font awesome ? et comment créer une barre d’icones en utilisant font-awesome.
Apprenez à connecter ExpressJS à une base de données MongoDB dans ce tutoriel pas à pas pour débutants complets. Exemples clairs et exécutables inclus.
Dans ce tutoriel, nous allons apprendre à connecter une application ExpressJS à une base de données, en utilisant MongoDB comme exemple. Ce guide est conçu pour les débutants: nous irons lentement, étape par étape, avec des instructions précises pour que vous puissiez tout exécuter vous-même, même si vous n’avez jamais touché à une base de données auparavant.
Une base de données est comme un classeur numérique où vous pouvez stocker des informations (par exemple, des noms, des emails) pour les réutiliser plus tard. Avec ExpressJS, un outil pour créer des serveurs web, vous pouvez sauvegarder les données des utilisateurs au lieu de les perdre à chaque redémarrage du serveur. Nous utiliserons MongoDB, une base de données simple et populaire, pour stocker des noms d’utilisateurs dans cet exemple.
Avant de commencer, assurons-nous que vous avez tout ce qu’il faut. Suivez ces étapes une par une :
node -v dans un terminal.cd chemin/vers/base-de-donnees-express, puis tapez npm init -y. Cela crée un fichier package.json.npm install express mongoose. Express est pour le serveur, et Mongoose est un outil qui simplifie l’utilisation de MongoDB.mongod dans un autre terminal (laissez-le tourner).Nous allons créer un serveur ExpressJS et le connecter à MongoDB pour qu’il puisse y stocker des données.
Créez un fichier nommé index.js dans votre dossier "base-de-donnees-express" et ajoutez ce code. Il connecte le serveur à MongoDB.
var express = require('express');
var mongoose = require('mongoose');
var app = express();
// Connexion à MongoDB
mongoose.connect('mongodb://localhost:27017/mon_db', {
useNewUrlParser: true,
useUnifiedTopology: true
})
.then(() => console.log("Connecté à MongoDB !"))
.catch(err => console.log("Erreur de connexion : ", err));
app.listen(3000, function() {
console.log("Serveur démarré sur http://localhost:3000");
});
Voici chaque ligne expliquée très simplement pour les débutants :
Pour exécuter : Assurez-vous que MongoDB tourne (avec la commande : mongod), puis tapez node index.js dans le terminal. Si vous voyez "Connecté à MongoDB !", tout fonctionne !
Maintenant, créons une petite application pour enregistrer des noms d’utilisateurs dans la base de données.
Mettez à jour index.js avec ce code. Il ajoute un modèle pour les utilisateurs et une route pour les enregistrer.
var express = require('express');
var mongoose = require('mongoose');
var app = express();
// Connexion à MongoDB
mongoose.connect('mongodb://localhost:27017/mon_db', {
useNewUrlParser: true,
useUnifiedTopology: true
})
.then(() => console.log("Connecté à MongoDB !"))
.catch(err => console.log("Erreur de connexion : ", err));
// Définir un modèle pour les utilisateurs
var utilisateurSchema = new mongoose.Schema({
nom: String
});
var Utilisateur = mongoose.model('Utilisateur', utilisateurSchema);
// Route pour afficher un formulaire
app.get('/', function(req, res) {
res.send(`
<html>
<body>
<h1>Ajouter un utilisateur</h1>
<form method="POST" action="/ajouter">
<label>Nom : </label>
<input type="text" name="nom">
<button type="submit">Enregistrer</button>
</form>
</body>
</html>
`);
});
// Route pour enregistrer un utilisateur
app.post('/ajouter', function(req, res) {
var nouvelUtilisateur = new Utilisateur({ nom: req.body.nom });
nouvelUtilisateur.save()
.then(() => res.send("<html><body><h1>Utilisateur enregistré !</h1></body></html>"))
.catch(err => res.send("Erreur : " + err));
});
// Middleware pour lire les données POST
app.use(express.urlencoded({ extended: false }));
app.listen(3000, function() {
console.log("Serveur démarré sur http://localhost:3000");
});
Voici chaque nouvelle partie expliquée :
body-parser cette fois).req.body.nom récupère ce nom.Pour exécuter : Sauvegardez index.js, assurez-vous que MongoDB tourne, puis tapez node index.js. Allez à http://localhost:3000, entrez un nom (ex. : "Jean"), et cliquez sur "Enregistrer". Vous verrez "Utilisateur enregistré !".
Maintenant que nous savons enregistrer des utilisateurs dans MongoDB avec ExpressJS, apprenons à afficher la liste des utilisateurs, à en supprimer un, et à en mettre à jour un autre. Ces opérations sont appelées "CRUD" (Create, Read, Update, Delete). Nous avons déjà vu "Create" (créer) à l’étape précédente, alors concentrons-nous sur "Read" (lire), "Delete" (supprimer), et "Update" (mettre à jour). Suivez ces étapes lentement pour tout comprendre.
Mettez à jour votre fichier index.js avec ce code. Il ajoute des routes pour afficher tous les utilisateurs, en supprimer un, et en modifier un. Assurez-vous d’avoir suivi les étapes précédentes (connexion à MongoDB et modèle Utilisateur) avant d’ajouter ceci.
var express = require('express');
var mongoose = require('mongoose');
var app = express();
// Connexion à MongoDB
mongoose.connect('mongodb://localhost:27017/monpremierdb', {
useNewUrlParser: true,
useUnifiedTopology: true
})
.then(() => console.log("Connecté à MongoDB !"))
.catch(err => console.log("Erreur de connexion : ", err));
// Modèle Utilisateur
var utilisateurSchema = new mongoose.Schema({
nom: String
});
var Utilisateur = mongoose.model('Utilisateur', utilisateurSchema);
// Middleware pour lire les données POST
app.use(express.urlencoded({ extended: false }));
// Route pour afficher le formulaire
app.get('/', function(req, res) {
res.send(`
<html>
<body>
<h1>Ajouter un utilisateur</h1>
<form method="POST" action="/ajouter">
<label>Nom : </label>
<input type="text" name="nom">
<button type="submit">Enregistrer</button>
</form>
<h2><a href="/liste" title="Voir la liste des utilisateurs">Voir la liste des utilisateurs</a></h2>
</body>
</html>
`);
});
// Route pour enregistrer un utilisateur
app.post('/ajouter', function(req, res) {
var nouvelUtilisateur = new Utilisateur({ nom: req.body.nom });
nouvelUtilisateur.save()
.then(() => res.send("<html><body><h1>Utilisateur enregistré ! <a href='/'>Retour</a></h1></body></html>"))
.catch(err => res.send("Erreur : " + err));
});
// Route pour afficher la liste des utilisateurs
app.get('/liste', function(req, res) {
Utilisateur.find()
.then(utilisateurs => {
var html = "<html><body><h1>Liste des utilisateurs</h1><ul>";
utilisateurs.forEach(user => {
html += `<li>${user.nom} - <a href="/supprimer/${user._id}" title="Supprimer ${user.nom}">Supprimer</a> - <a href="/modifier/${user._id}" title="Modifier ${user.nom}">Modifier</a></li>`;
});
html += "</ul><a href='/'>Retour</a></body></html>";
res.send(html);
})
.catch(err => res.send("Erreur : " + err));
});
// Route pour supprimer un utilisateur
app.get('/supprimer/:id', function(req, res) {
Utilisateur.findByIdAndDelete(req.params.id)
.then(() => res.send("<html><body><h1>Utilisateur supprimé ! <a href='/liste'>Retour à la liste</a></h1></body></html>"))
.catch(err => res.send("Erreur : " + err));
});
// Route pour afficher le formulaire de modification
app.get('/modifier/:id', function(req, res) {
Utilisateur.findById(req.params.id)
.then(user => {
res.send(`
<html>
<body>
<h1>Modifier ${user.nom}</h1>
<form method="POST" action="/modifier/${user._id}">
<label>Nouveau nom : </label>
<input type="text" name="nom" value="${user.nom}">
<button type="submit">Mettre à jour</button>
</form>
<a href="/liste">Retour à la liste</a>
</body>
</html>
`);
})
.catch(err => res.send("Erreur : " + err));
});
// Route pour mettre à jour un utilisateur
app.post('/modifier/:id', function(req, res) {
Utilisateur.findByIdAndUpdate(req.params.id, { nom: req.body.nom })
.then(() => res.send("<html><body><h1>Utilisateur mis à jour ! <a href='/liste'>Retour à la liste</a></h1></body></html>"))
.catch(err => res.send("Erreur : " + err));
});
app.listen(3000, function() {
console.log("Serveur démarré sur http://localhost:3000");
});
Voici chaque nouvelle partie expliquée très clairement pour les débutants:
user._id est une clé unique générée par MongoDB pour chaque utilisateur.Pour exécuter : Sauvegardez index.js, assurez-vous que MongoDB est lancé (mongod), puis tapez node index.js dans le terminal. Allez à http://localhost:3000, ajoutez quelques noms (ex. : "Marie", "Paul"), puis cliquez sur "Voir la liste des utilisateurs". Essayez de supprimer ou modifier un utilisateur pour voir ça marcher !
Bravo ! Vous avez connecté ExpressJS à MongoDB et enregistré des données. Vous pouvez vérifier vos utilisateurs dans MongoDB avec un outil comme MongoDB Compass. Explorez notre prochain tutoriel sur Utiliser les Cookies avec ExpressJS ou consultez la documentation Mongoose.