ReactJS+NodeJS

React: Intoduction

1.Introduction,istallation

Components

2.a>Components 2.b> Constructeur et propriétés 2.c> Components:Exemples

State,filter , map ...

4.a> State (data) 4.b> State (change data) 4.c> State (Formulaire)
Exercice 1:Vente Produit Exercice 2:Note Stagiaire Exercice 3:Quizz Exercice 4:Gestion matchs Exercice 5:Crud Produit

Props

5a.Props introduction Exercice 1

Exercices

6.a Nombre Random 6.b Game Pile ou Face 6.c Calculatrice 6.c Quizz 6.c Les Styles Dynamiques 6.c Array Object Filter

..

7.React Hooks

Exercices

Exercice1: Client Crud Exercice2 :Filter Teams Exercice3 : Multi-select

Props dans Composant fonctionnel

Exemples Exercice1 Exercice2 Exercice3

Routage

7.Routage 8.Routage :public and restricted

Axios ,Fetch, Api

CRUD application

Redux,Redux Toolkit

Cours Redux

Exercices Redux

Exercice1 Social App Exercice1 WhatsApp App Exercice2 Restaurant App Exercice3 Student App Exercice4 Income ,Expense App Exercice5 Bank App

Exercices

LocalStorage Weather Api ToDo et LocalStorage

React+ionic

Ionic Create project 4.React Outils utiles 5.Lifecycle Methods 6.JSX

Gestion Ventes

Produit CRUD

6.Form :Ajouter un produit 8.Liste produits 9.Pagination 10.Liste produits +Pagination 11.Liste produits +Datatable 11.Liste produits +load more 12.Supprimer un produit 14.Details d'un produit 15.Recherche et Autocomplete

Reacts:Utils

Gestion des erreurs Variables d'environment Cookies Internationalization proptypes Form validation React Animation Fragment Google Maps

Utilisateur CRUD

18.Inscription upload file 19.Connexion et Les sessions 19.Connexion: JWT Token

Ventes CRUD

17.Vendre un produit 18.Facture Generate PDF 19.Statisques Charts

Redux





React:Utilisateur Connexion

folder Projet: VentesReactNodeJS (FullStack :backEndProject et front_end_project)
Dans cette partie on va créer un formulaire de connexion pour les utilisateurs
Utilisateur(id,nom,email,password,photo,active)
BackEnd :Nodejs+ExpressJs+mysql:pour créer les RestApis
FrontEnd :React+Axios+react-autocomplete pour consommer les apis

Formulaire de connexion

Aprés la connexion

BackEnd Créer les Apis :backEndProject

  1. 1 la méthode connexion dans src/models/Utilisateurs : permettant d'exécuter la requête SQL :select * from utilisateur where login=? and password=?
  2. 2Créer la méthode connexion() dans src/controllers/UtilisateurController:permettant d'appeler la méthode connexion() du modèle Utilisateur et envoyer le résultat au projet FontEnd de React
  3. 3Ajouter la route :http://localhost:8081/utilisateurs/Search/Nom mappé avec la fonction connexion() du controller UtilisateurController

1.Model:créer la fonction connexion() dans src/models/Utilisateur.js

/**Connexion**/
Utilisateur.connexion = (email,password,result) =>{
connexion.query('SELECT id,email,nom,photo,active FROM utilisateurs where email=? and password=?',[email,password] ,(err, res)=>{
if(err){
result(err,null);
}else{
/*Retourne l'utilisateur et l'envoyer à React*/
result(null,res);
}
})
}

2.Controller: Créer la fonction connexion dans src/controllers/UtilisateurController.js

exports.connexion = (req, res) =>{
if(req.body.email=='' && req.body.password==''){
res.send({success: false, message: 'Erreur tous les champs sont obligatoires'});
}
else{
const email=req.body.email;
const password=req.body.password;

UtilisateurModel.connexion(email,password, (err, utilisateur)=>{
if(err)
/*Si erreur */
res.send({status: false, message: 'Erreur '});

/*Si Ok*/
res.send({status: true, message: '',userConnecter:utilisateur});
/*
React va recevoir
data:
message: ""
success: true
userConnecter: Array(1)
0: {id: 9, email: 'abc@fix', nom: 'le nom', photo: 'photo_Utilisateurs/imgUser.png', active: 0}
.....
*/

})
}
}

3.Routes: ajouter la ligne de routage dans src/routes/UtilisateurRoutes.js

routerUtilisateurs.post('/connexion', utilisateurController.connexion);

2.FrontEnd créer la vue recherche.js dans le projet :front_end_project

  1. 1Créer la components src/components/Utilisateurs/connexion permettant d'afficher à utilisateur de saisir son login et password puis envoyer ces données à la partie FrontEnd pour consomer l'api connexion du controller UtilisateurController

React: Créer la component connexion.js

npx crcf components/Utilisateurs/connexion
import React, { useState,useEffect } from 'react';
import axios from "axios";
export default function Connexion() {


/*les données de connexion à envoyer au backEnd*/
const [userInfo,setUserInfo]=useState({email:"",password:""});


/*pour stocker la reponse du backend*/
const [message,setMessage]=useState("");
const [statusResponse,setStatusResponse]=useState(false);




/*Stocker les valeur saisie de l'utilisateur*/
const inputChange = e => {
/*Récupérer l'input changé*/
const { name, value } = e.target;
/*Modifier dans le state l'attirb utUtilisateur changé*/
setUserInfo(prevUserInfo => ({
...prevUserInfo,/*Récupérer l'ancien objet*/
[name]: value
}));
};



const connexion = async e => {
/*pour ne pas actualiser la page lorsque on clique sur submit*/
e.preventDefault();
await axios.post('http://localhost:8081/apis/utilisateurs/connexion', userInfo)
.then(response => {
/*recevoir la réponse du backend*/
setStatusResponse(response.data.status);
setMessage(response.data.message);


if(response.data.status==true)
{
/*Sauvegarder les informations de l'utilsateur connecté dans local storage */
sessionStorage.setItem('utilisateurConnecter', JSON.stringify(response.data.userConnecter));
console.log("connected");
/*redirection vers Home*/
window.location.replace("/");
}

});
}


useEffect(() => {
console.log("effe " +statusResponse);
/*Vérifier si l'utisateur est déja connecté dans ce cas on charge les info from localStorage*/
const userStorage = sessionStorage.getItem('utilisateurConnecter');
if(userStorage!=null)
{
/*redirection vers Home*/
window.location.replace("/");
}
},[]);


return(
<div className="container">
<br/>
<div className="row">
<fieldset className="border p-2">
<legend className="w-auto">Connexion</legend>
<form>
{/*Afficher le message si on a reçu une reponse serveur*/}
{message.length > 0 &&
<div className="alert alert-danger" role="alert">
{message}
</div>
}
<div className="form-group mb-3">
<input type="text" name="email"
className="form-control"
placeholder="Enter votre Email"
required
value={userInfo.email}
onChange={e => inputChange(e)} />
</div>
<div className="form-group mb-3">
<input type="password" name="password"
className="form-control"
placeholder="Enter votre Password"
required
value={userInfo.password}
onChange={e => inputChange(e)} />
</div>
<div className="form-group mb-3">
<button type="submit" className="form-control" onClick={connexion}>Submit</button>
</div>
</form>
</fieldset>
</div>
</div>
)
}

React: Modifier App.js en ajoutant la route utilisateurs/connexion

import './App.css';
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import React, { useState,useEffect } from 'react';

/*importer les styles boostrap*/
import 'bootstrap/dist/css/bootstrap.min.css';
/*Importer les components*/
import Ajouter from './components/Produits/ajouter/ajouter.js'
import ListeProduitAvecDatatable from './components/Produits/ListeProduitAvecDatatable/ListeProduitAvecDatatable.js'
import ListePagination from './components/Produits/listePagination/listePagination.js'
import Liste from './components/Produits/liste/liste.js'
import Details from './components/Produits/details/details.js'
import Navigation from './components/navigation/navigation.js'
import Rechercher from './components/Produits/rechercher/rechercher.js'
import ListeLoadMore from './components/Produits/listeLoadMore/listeLoadMore.js'
import Inscription from './components/Utilisateurs/inscription/inscription.js'
import Connexion from './components/Utilisateurs/connexion/connexion.js'

function App() {
/*Stocker le info de l'utilisateur connecté*/
const [utilisateurConnecter,setUtilisateurConnecter]=useState({
id:"",
email:"",
photo:"",
nom:"",
active:1
});



return (
<div>
{/*Définir un router */}

<Router>
<Navigation/>
<Routes>
<Route exact path="/produits/" element={<Liste/>}/>
<Route exact path="/produits/ajouter" element={<Ajouter/>}/>
<Route exact path="/produits/:id" element={<Details/>}/>
<Route exact path="/produitsListe" element={<ListePagination/>}/>
<Route exact path="/produitsDatatable" element={<ListeProduitAvecDatatable/>}/>
<Route exact path="/Rechercher" element={<Rechercher/>}/>
<Route exact path="/ListeLoadMore" element={<ListeLoadMore/>}/>
<Route exact path="/utilisateurs/inscription" element={<Inscription/>}/>
<Route exact path="/utilisateurs/connexion" element={<Connexion/>}/>
</Routes>
</Router>
</div>
);
}

export default App;

navigation.js

import React, { useEffect,useState } from "react";
import {Button,Nav,Navbar,Form,Container,FormControl,NavDropdown} from 'react-bootstrap';

/*Importer le context */
import { useUserConnecterContext } from '../../dataContext/UtilisateurConnecterContext.js';

function Navigation() {
  

const [estConnecter,setEstConnecter]=useState(false);

/*Stocker le info de l'utilisateur connecté*/
const [utilisateurConnecter,setUtilisateurConnecter]=useState({
       id:"",
       email:"",
       photo:"",
       nom:"",
       active:0
     
});

  useEffect(() => {
const userStorage = sessionStorage.getItem('utilisateurConnecter');
if(userStorage!=null)
{
  setEstConnecter(true);
  const userObject = JSON.parse(userStorage);
 setUtilisateurConnecter(userObject[0]);
}
},[]);


  const deconnexion = async e => {
   sessionStorage.removeItem("utilisateurConnecter");
   console.log(utilisateurConnecter)
  setUtilisateurConnecter({});
  setEstConnecter(false);

  }



    return (<Navbar bg="light" expand="lg">
  <Container fluid>
    <Navbar.Brand href="#">Gestion Ventes</Navbar.Brand>
    <Navbar.Toggle aria-controls="navbarScroll" />
    <Navbar.Collapse id="navbarScroll">
      <Nav
        className="me-auto my-2 my-lg-0"
        style={{ maxHeight: '100px' }}
        navbarScroll
      >
 
        <NavDropdown title="Produits" id="produits">
          <NavDropdown.Item href="/produits/ajouter">Ajouter</NavDropdown.Item>
          <NavDropdown.Item href="/produits/">Liste Produits</NavDropdown.Item>
          <NavDropdown.Item href="/produitsListe/">Liste Pagination</NavDropdown.Item>
          <NavDropdown.Item href="/ListeLoadMore/">ListeLoadMore</NavDropdown.Item>
        </NavDropdown>
    
    <NavDropdown title="Utilisateurs" id="utilisateur">
          <NavDropdown.Item href="utilisateurs/ajouter">Ajouter</NavDropdown.Item>
          <NavDropdown.Item href="utilisateurs/">Liste Utilisateurs</NavDropdown.Item>
        </NavDropdown>
    
        
    <NavDropdown title="Ventes" id="utilisateur">
          <NavDropdown.Item href="/ventes/vendre">Vendre</NavDropdown.Item>
          <NavDropdown.Item href="/ventes/">Liste Ventes</NavDropdown.Item>
       <NavDropdown.Item href="/ventes/facture">Facture</NavDropdown.Item>
       <NavDropdown.Item href="/ventes/Statistiques">Statistiques</NavDropdown.Item>
        </NavDropdown>
    
     
      </Nav>
      <Nav>
    {/*si l'utilisateur est connecté*/}
    {estConnecter &&

    <Nav.Link href="#" >
    <img src={'http://127.0.0.1:8081/public/'+utilisateurConnecter.photo} 
    className="img-fluid img-thumbnail"
      style={{height:"35px"}}   /> 
    Welcome: {utilisateurConnecter.nom} 
    <button type="submit"   onClick={deconnexion}>Déconnexion</button>
  </Nav.Link>

      }
    
    {!estConnecter &&
    
      <Nav.Link href="/utilisateurs/connexion">Connexion</Nav.Link>
    
      }
    
    </Nav>
    </Navbar.Collapse>
  </Container>
</Navbar>);
  
}

export default Navigation;



Demarer le backEndProject

backEndProject>node Serveur.js

Demarer le front_end_project

font_end_project>npm start