Afficher des données via une table MSSQL dans une Combox
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:
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:
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:
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:
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:
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:
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> |
