Nodejs: Ajouter un produit dans la table produit

Les étapes à suivre

1Créer le fichier config/db.js dans le de configuration de la connexion à la base de données
2Installer des modules nécessaires:
express-flash Permet d'envoyer des message à une vue
express-session : Permet de gérer les session en PHP
method-override : Permet de gérer les requêtes put et delete
3Créer le dossie src contenant le code source de l'applications
4 Model: Créer le fichier src/models/Produit.js
5Controller: Créer le fichier src/controllers/ProduitController.js
6Route: Créer le fichier src/routes/ProduitRoutes.js
7View: Créer le fichier src/views/produits/ajouter.ejs
8View: Créer le fichier src/views/nav.ejs
9Serveur: Créer le fichier Serveur.js
10View: Créer le fichier index.ejs
11Serveur: Lancer le serveur

Installer ExpressJs

npm install express --save

1.Créer le fichier config/db.js de configuration de la connexion à la base de données

var mysql = require('mysql2');

var connection = mysql.createConnection({

host: "localhost", /*le serveur de la base de données*/

port:"3306",/*le port du service mysql*/

user: "root", /*Utilisateur de la base de données*/

password: "",/*le mot de passe de l'utilisateur de la base de données*/

database: "ventejsbd" /*le nom de la base de données à Créer manullement*/

});

//connexion à la base de données

connection.connect(function(error){

if(!!error) {

console.log(error);

} else {

console.log('Connected..!');

}

});

module.exports = connection;

2.Installer des modules nécessaires:

npm install express-flash --save
npm install express-session --save
npm install method-override --save

3.Créer le dossie src contenant le code source de l'applications

Afin d'organiser le projet on besoin de créer les dossiers suivants

src/models :contenant les model du projet produit ,utilisateur et ses fonctions de CRUD
src/routes :contenant le mapping entre les requêtes http est la méthode à exécuter
src/controllers :contient les méthode à exécutée selon chaque route reçues

Model: Créer le fichier src/models/Produit.js

Ce fichier représente le module de l'entité produit(id,nom,marque,prix,qtestock) contenant:

Un objet Produit
Les fonctions CRUD:
- insert
- update
- delete
- detail

 /*importer le fichier de configuration de connexion à la base de données*/
 var dbConn = require('./../../config/db');
 /*Créer un objet de type Produit*/
 var Produit = function(produit){
   this.id     = produit.id;
   this.nom     = produit.nom;
   this.marque     = produit.marque;
   this.prix     = produit.prix;
   this.qtestock     = produit.qtestock;
 
 };
 /*Ajouter à l'objet Produit la fonction insert qui permet d'ajouter un produit dans la table produits*/
 Produit.insert = function (produit, result) {
 /*produit :sera renseigner par le controlleur contenant l'objet à insérer dans la table produit
 result:un objet qui contiendra la réponse à envoyer au controlleur :ProduitController
 */
 
 /*Exécuter la requêtes SQL insert into produits*/
 dbConn.query("INSERT INTO produits set ?", produit, function (err, res) {
 /*
 function (err, res):la méthode de callback sera exécuté aprés l'exécution de la commande insert into
 err:contient l'erreur sql reçu
 res:contient la reponse de la methode query 
 */
 
 /*Si la fonction query délenche une erreur*/
 if(err) {
 
   console.log("error: ", err);
   result(err, null);
 }
 /*Si la fonction query s'exécute sans erreur on envoie res.insertId :c'est la valeur de la primary key de l'objet inséré */
 else{
   console.log(res.insertId);
   result(null, res.insertId);
 }
 });
 };
 
 //vérifier si un attribut est vide 
 Produit.verifier=function(produit)
 {
     if(produit.nom=='' || produit.marque=='' || produit.prix==0 || produit.qtestock==0)
     return true;
 };
 
 /* on va ajouter les autre fonctions par la suite 
 ....
 */
 
 /*Exporter la classe pour pouvoir l'importer dans le controller */
 module.exports= Produit;
 

Controller: Créer le fichier src/controllers/ProduitController.js

Permet de gérer la communication entre le model Produit et les vues ajouter.ejs ,liste.ejs ...

/*importer le model Produit*/
const Produit = require('../models/Produit');


/*Afficher le fomulaire d'ajout d'un nouveau produit 
__dirname :retoune le chemin absolue du projet*/
exports.AjouterForm = function(req, res) {    
  /*Afficher la vue ajouter.ejs et envoyer un objet produit  vide
  {
        nom: '',
        marque: '',
        prix: '',   
        qtestock: ''    
  }
  */
/*récupérer le message envoyé par une redirection*/
const message= req.flash('message');

    res.render((__dirname+'/../../src/views/produits/ajouter.ejs'), {
        nom: '',
        marque: '',
        prix: '',   
        qtestock: '', 
        message:message  
    });
};


/*Créer la méthode ajouterValider :permettant de récupérer les valeur des inputs puis instancier un objet produit et appeler la fonction insert du model Produit*/
exports.ajouterValider = function(req, res) {

/*function(req, res):
req: un objet de type Request contenant les données envoyées par le formulaire d'ajout d'un nouveau produit 
{
....
 body: {
    nom: 'nomproduit',
    marque: 'marqueproduit',
    prix: '10',
    qtestock: '15'
  },
  _body: true,
  length: undefined,
  route: Route {
    path: '/ajouter',
    stack: [ [Layer] ],
    methods: { post: true }
  },
...

res:un objet de type Reponse permet de créer et envoyer la réponse au client
{
...
 params: {},
    query: {},
    res: [Circular *2],
    body: { nom: 'tel', marque: 'hp', prix: '74', qtestock: '14' },
    _body: true,
    length: undefined,
    route: Route { path: '/ajouter', stack: [Array], methods: [Object] },

  },
  }

*/
/*instancier u produit p à partir de l'objet envoyer dans req.body */
const new_produit = new Produit(req.body);
/*Object.keys(req.body).length:
retourn le nombre des input envoyés par le formulaire
*/

/*Vérifier s'il existe un input vide*/
if(Produit.verifier(new_produit)){
//afficher un message d'erreur
req.flash('message', "Erreur");
res.redirect('/produits/ajouter');
}
else{
/*
L'objet new_produit est bien instancier donc on peut le stocker dans la base de données avec la fonction Produit.insert
*/
Produit.insert(new_produit, function(err, produit) {
/*Afficher l'erreur SQL*/
  if (err)
  res.send(err);
  /* bien ajouté pas d'erreur */
 req.flash('message', "Success");
 res.redirect('/produits/ajouter');
});
}
};

Route: Créer le fichier src/routes/ProduitRoutes.js

Permet de faire le mapping entre les routes et les fonctions du controller

/*importer express js pour manipuler les routes*/
const express = require('express');
/*importer le module Router de express js*/
const routerProduits = express.Router();
/*imporer produitController*/
const produitController =   require('../controllers/ProduitController');

/*la route:=> produits/ajouter ,avec la méthode Get 
  AjouterForm :=>la fonction à exécuté qui permet d'afficher la vue views/produit/ajouter.ejs*/
routerProduits.get('/ajouter', produitController.AjouterForm);

/*la route:=> produits/ajouter ,avec la méthode POST
ajouterValider:=>la fonction du ProduitController qui permet d'insérer un produit dans la table produit*/
routerProduits.post('/ajouter', produitController.ajouterValider);
/*
On va mapper les autres fonctions:
detail
supprimer
modifier
liste
...
*/
module.exports = routerProduits

View:

Afin d'ajouter un script server dans des page html on besoin d'un templating engine (moteur de template) dans ce cas ejs

npm install ejs

Exemples d'utilisation du EJS

/*IF */
<% if (user) { %>
  <h2><%= user.name %></h2>
<% } %>

/*Foreach */

<ul>
  <% users.forEach(function(user){ %>
    <%- include('user/show', {user: user}); %>
  <% }); %>
</ul>

/*Layout */
<%- include('header'); -%>
<h1>
  Title
</h1>
<p>
  My page
</p>
<%- include('footer'); -%>

View: Créer le fichier src/views/produits/ajouter.ejs

<!doctype html>

<head>

<title>Ajouter un Produit</title>

<%- include('../nav.ejs') %>

<% if (message=="Success") { %>

<div class="alert alert-success" role="alert">Bien ajouté</div>

<% } %>

<% if (message=="Erreur") { %>

<div class="alert alert-danger" role="alert">Erreur tout tous les champs sont obligatoires </div>

<% } %>

Ajouter un Produit

</div>

<input type="text" class="form-control" name="nom" value="<%= nom %>" placeholder="nom" autocomplete="off">

</div>

<input type="text" class="form-control" name="marque" value="<%= marque %>" placeholder="marque" autocomplete="off">

</div>

<input type="text" class="form-control" name="prix" value="<%= prix %>" placeholder="prix" autocomplete="off">

</div>

<input type="text" class="form-control" name="qtestock" value="<%= qtestock %>" placeholder="qtestock" autocomplete="off">

</div>

</div>

</form>

</div>

</body>

</html>

View: Créer le fichier src/views/nav.ejs

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
  <div class="navbar-header">
    <a class="navbar-brand" href="#">GestionVentes</a>
  </div>
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
    <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Produits <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="/produits/ajouter">Ajouter</a></li>
        <li><a href="/produits/">Liste Produits</a></li>
      </ul>
    </li>
     <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Utilisateurs <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="/utilisateurs/ajouter">Ajouter</a></li>
        <li><a href="/utilisateurs/">Liste utilisateur</a></li>
      </ul>
    </li>
    
     <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Ventes <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="/ventes/vendre">Vendre</a></li>
        <li><a href="/ventes/">Liste Ventes</a></li>
        <li><a href="/ventes/statistiques">Statistiques</a></li>
      </ul>
    </li>
  </ul>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="/utilisateurs/connexion"><span class="glyphicon glyphicon-log-in"></span> Connexion</a></li>
  </ul>
</div>
</nav>
<div class="container" style="margin-top: 50px;">

Serveur: Créer le fichier Serveur.js

Le fichier principale qui permet de :

Générer les routes
Définir une page d'accueil index.ejs
Démarer le serveur

const express = require('express');
const bodyParser = require('body-parser');
var session = require('express-session');

var flash = require('connect-flash');

// create express app
const app = express();
// Les paramètres de la session
app.use(session({ 
    cookie: { maxAge: 60000 },
    store: new session.MemoryStore,
    saveUninitialized: true,
    resave: 'true',
    secret: 'secret'
}))



// Setup server port
const port = 8081;
// parse requests => content-type - application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: true }))
// parse requests => application/json
app.use(bodyParser.json())
//envoyer des message de redirection
app.use(flash());
//la route principale
app.get('/', (req, res) => {
   res.render(__dirname+'/index.ejs');
});
// importer le fichier de routage des produits
const routerProduits = require('./src/routes/ProduitRoutes')
// définir les routes pour gérer les produits
app.use('/produits/', routerProduits)

// lancer le serveur
app.listen(port, () => {
  console.log('serveur starts');
});

View: la page d'acceuil index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Index</title>
 <%- include('src/views/nav.ejs') %>
<div class="container">

</div>

</body>
</html>

Serveur: lancer le serveur

node Serveur.js

Cours et TPs

Laravel

Spring MVC

Spring Boot+Angular

Spring Security

NodeJS+ExpressJS

NodeJs +ExpressJS

NodeJs :Généralités

Gestion Ventes

Produit CRUD

Utilisateur CRUD

By Hakiki

Nodejs: Ajouter un produit dans la table produit

Installer ExpressJs

npm install express --save

1.Créer le fichier config/db.js de configuration de la connexion à la base de données

2.Installer des modules nécessaires:

3.Créer le dossie src contenant le code source de l'applications

Model: Créer le fichier src/models/Produit.js

Controller: Créer le fichier src/controllers/ProduitController.js

Route: Créer le fichier src/routes/ProduitRoutes.js

View:

Exemples d'utilisation du EJS

View: Créer le fichier src/views/produits/ajouter.ejs

View: Créer le fichier src/views/nav.ejs

Serveur: Créer le fichier Serveur.js

View: la page d'acceuil index.ejs

Serveur: lancer le serveur

Cours et TPs