Discussion :

[Expensive2]

Bonjour à tous,

Je suis débutant dans le développement WEB, j'utilise comme outils React.js/Nodes.js, j'ai réussi à créer une formulaire de connexion qui ce compose de 3 champs :

1 - Un champ "Société" du type combo.
2 - Un champ "Nom d'utilisateur" du type text.
3 - Un champ "Mot de passe" du type text.
4- Un bouton "Connexion"

Maintenant je veux connecter à une base de donnés MSSQL via une fichier XML pour récupérer des données d'une table (dbo.BD") et l'insérer dans le champ "Société" de type combo.

Veuillez trouver ci-joint les différent étape de mon projet ainsi que le fichier XML.


Merci à tous de m'aider à apprendre et résoudre ce problème dans le plus bref délai.

App.css

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 400px;
  width: 100%;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
 
 
.logo {
  float: left;
  margin-right: 10px;
}
 
.form-wrapper {
  text-align: left;
}
 
h1 {
  margin-top: 0;
  margin: left 20px;
 
}
 
.form-group {
  margin-bottom: 15px;
 
}
 
label {
  display: block;
  font-weight: bold;
  text-align: left;
}
 
input[type="text"],
input[type="password"],
select {
  width: 40px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
 
input[type="submit"] {
  background-color: #4CAF50;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
 
}
 
input[type="submit"]:hover {
  background-color: #45a049;
 
}
 
.form-group input[type="text"],
.form-group input[type="password"],
.form-group select {
  width: 40%;
}
 
.form-group label {
  text-align: left;
  margin-right: 20px;
}
 
.form-group:nth-child(2) label {
  margin-top: 10px;
}

App.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
import React, { useEffect, useState } from 'react';
import logo from './logo.png';
import './App.css';
 
function App() {
  const [societes, setSocietes] = useState([]);
 
  useEffect(() => {
    fetch('/societes')
      .then((response) => response.json())
      .then((data) => {
        setSocietes(data);
      })
      .catch((error) => {
        console.error('Erreur lors de la récupération des sociétés :', error);
      });
  }, []);
 
  const handleSubmit = (event) => {
    event.preventDefault();
 
    // Récupérer les valeurs du formulaire
    const societe = document.getElementById('societe').value;
    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;
 
    // Effectuer une requête POST pour insérer la société dans la base de données
    fetch('/societe', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ societe, username, password }),
    })
      .then((response) => {
        if (response.ok) {
          console.log('Société insérée avec succès');
          // Effectuer d'autres actions après l'insertion réussie
        } else {
          console.error('Erreur lors de l\'insertion de la société');
          // Afficher un message d'erreur à l'utilisateur
        }
      })
      .catch((error) => {
        console.error('Erreur lors de la requête POST :', error);
      });
  };
 
  return (
    <div className="container">
      <div className="logo">
        <img src={logo} alt="Logo" width="200" height="300" />
      </div>
      <div className="form-wrapper">
        <h1>Connexion</h1>
        <form id="loginForm" onSubmit={handleSubmit}>
          <div className="form-group">
            <label htmlFor="societe">Société :</label>
            <select id="societe" required>
              <option value="">Sélectionnez une société</option>
              {societes.map((societe) => (
                <option key={societe} value={societe}>
                  {societe}
                </option>
              ))}
            </select>
          </div>
          <div className="form-group">
            <label htmlFor="username">Nom d'utilisateur :</label>
            <input type="text" id="username" required />
          </div>
          <div className="form-group">
            <label htmlFor="password">Mot de passe :</label>
            <input type="password" id="password" required />
          </div>
          <div className="form-group">
            <input type="submit" value="Se connecter" />
          </div>
        </form>
      </div>
    </div>
  );
}
 
export default App;

Config.xml

Code xml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?xml version="1.0" encoding="utf-8"?>
<configuration>
	<appSettings>
		<!--   Les paramètres de l'application utilisateur et de propriété configurée se placent ici.-->
		<!--   Exemple*: <add key="settingName" value="settingValue"/> -->
		<add key="BaseType" value="MSSQL" />
		<add key="Serer" value="192.168.1.204" />
		<add key="Base" value="REF1" />	
		<add key="BaseDef" value="DEMO" />
    		<add key="DossierSav" value="c:\bb\" />
		<add key="ImressionDirecte.Checked" value="false" />
		<add key="Soc.Text" value="XXXX" />
		<add key="Licence" value="XXXX" />
		<add key="TP" value="5000" />
<add key="Licence" value="UNIGES" />
		<!--add key="Imp" value="C:\sav dev erp\erp\rptXXXX\" /-->
	</appSettings>
 
 
</configuration>

index.html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Formulaire de connexion</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

style.css

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 400px;
  width: 100%;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
 
  .logo {
    float: left;
    margin-right: 10px;
  }
 
  .form-wrapper {
    text-align: left;
  }
 
  h1 {
    margin-top: 0;
    margin: left 20px;
 
  }
 
  .form-group {
    margin-bottom: 15px;
 
  }
 
  label {
    display: block;
    font-weight: bold;
    text-align: left;
  }
 
  input[type="text"],
  input[type="password"],
  select {
    width: 40px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
 
  input[type="submit"] {
    background-color: #4CAF50;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
 
  }
 
  input[type="submit"]:hover {
    background-color: #45a049;
 
  }
 
  .form-group input[type="text"],
  .form-group input[type="password"],
  .form-group select {
    width: 40%;
  }
 
  .form-group label {
    text-align: left;
    margin-right: 20px;
  }
 
  .form-group:nth-child(2) label {
    margin-top: 10px;
  }

login.html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
<head>
  <title>Formulaire de connexion</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="container">
    <div class="form-wrapper">
      <img src="src/logo.png" alt="Logo" width="100" height="100" class="logo">
      <h1>Connexion</h1>
      <form id="loginForm">
        <div class="form-group">
          <label for="societe">Société :</label>
          <select id="societe" required>
            <option value="">Sélectionnez une société</option>
            <option value="societe1">Société 1</option>
            <option value="societe2">Société 2</option>
            <option value="societe3">Société 3</option>
          </select>
        </div>
        <div class="form-group">
          <label for="username">Nom d'utilisateur :</label>
          <input type="text" id="username" required>
        </div>
        <div class="form-group">
          <label for="password">Mot de passe :</label>
          <input type="password" id="password" required>
        </div>
        <div class="form-group">
          <input type="submit" value="Se connecter">
        </div>
      </form>
    </div>
  </div>
 
  <script src="app.js"></script>
  <div id="root"></div>
</body>
</html>