[AJAX] Formulaire de connexion asynchrone à la DB
Bonjour et merci de prendre le temps de m'aider.
J'ai un trois scripts pour mon formulaire : pied.php, connect.php et login.js.
Le premier correspond au code HTML structure de mon formulaire,
le second comprend le code PHP nécessaire à l'identification du membre qui tente de se connecter, et construit ainsi des variables sessions,
et le troisième détient le code Javascript nécessaire à établir une connexion asynchrone avec le serveur.
Cependant, étant débutant en Javascript, j'ai quelques difficultés à trouver mes erreurs, je vous affiche les scripts :
pied.php
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
86
87
88
89
| <?php
//Si il existe une variable de session 'login'
if (isset($_SESSION['login']) && $_SESSION['login'] != null) {
echo "<h1>SESSION >></h1>
<p>Bonjour ";
//Selon le sexe du membre connecté, on affichera "M." ou "Mme"
if (isset($_SESSION['sexe']) && ($_SESSION['sexe'] == "M")) {
echo "M.";
}
else {
echo "Mme";
}
//On affiche le prénom, le nom et le type de session du membre
echo " " . $_SESSION['prenom'] . " " . $_SESSION['nom'] . ", vous êtes connecté sur une session " . $_SESSION['session'] . ".<p>
<ul class=\"li\">";
if ($_SESSION['session'] == "administrateur") {
echo "<li><a href=\"accueil.php?page=7\">Rejoindre la rubrique administrateur</a></li>
<li><a href=\"session-erase.php\">Se déconnecter</a></li>";
}
else {
echo "<li><a href=\"session-erase.php\">Se déconnecter</a></li>";
}
echo "</ul>";
}
else {
?>
<div id="img">
<img src="images/key.png" />
</div>
<div id="texte">
<!-- FORMULAIRE D'IDENTIFICATION -->
<form name="identification" action="javascript:identifier()">
<table>
<tr>
<td> Email</td>
<td><input type="text" id="login" /></td>
</tr>
<tr>
<td> Mot de passe</td>
<td><input type="password" id="mdp" /></td>
</tr>
<tr>
<td><br /><button type="submit">
<span id="identifierOff">Connexion</span>
<img id="identifierOn" src="images/loading.gif" alt="Identification en cours..." />
</button>
</td>
<td>
<br /><button type="button"
id="boutonAbandonnerIdentifier"
onclick="abandonnerIdentifier()">Annuler</button>
</td>
</tr>
<tr>
<td><br /><div id="message" class="lien-pied"></div></td>
</tr>
</table>
</form>
<!-- FIN FORMULAIRE -->
</div>
<?php
}
?> |
connect.php
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
| <?php
session_start();
require("php/script_connect.php");
$connect_db = connect();
//Si les informations de formulaires ont été envoyées
if (array_key_exists("login", $_POST) && (array_key_exists("mdp", $_POST)) {
//Alors on récupère ces infos dans des variables
$login=$_POST["login"];
$mdp=$_POST["mdp"];
//On récupère le tuple lié à l'administrateur connecté
$req = 'SELECT * FROM admins WHERE email_admins = "'. $login .'";';
$result = mysql_query($req,$connect_db);
$admin = mysql_fetch_assoc($result);
//On récupère le tuple lié au membre connecté
$reqmem = 'SELECT * FROM membres WHERE email_membres = "'. $login .'";';
$resultmem = mysql_query($reqmem,$connect_db);
$mem = mysql_fetch_assoc($resultmem);
//Si le mdp correspond à l'équivalent de la table 'membres' ou 'admins'
if ((($mdp == $mem['mdp_membres']) && ($login == $mem['email_membres'])) || (($mdp == $admin['mdp_admins']) && ($login == $admin['email_admins']))) {
//Alors on initialise une variable de session
$_SESSION['login'] = $login;
//On initialise des variables de session avec les infos de ce membre
if ($login == $mem['email_membres']) {
$_SESSION['num'] = $mem['num_membres'];
$_SESSION['sexe'] = $mem['sexe_membres'];
$_SESSION['prenom'] = $mem['prenom_membres'];
$_SESSION['nom'] = $mem['nom_membres'];
$_SESSION['session'] = "membre";
}
else {
//Si le login correspond à un login administrateur
$_SESSION['num'] = $admin['num_admins'];
$_SESSION['sexe'] = $admin['sexe_admins'];
$_SESSION['prenom'] = $admin['prenom_admins'];
$_SESSION['nom'] = $admin['nom_admins'];
$_SESSION['session'] = "administrateur";
}
//On redirige l'utilisateur vers l'accueil
header('Location:accueil.php');
exit();
}
else {
header('Location:accueil.php');
exit();
}
}
?> |
login.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
86
| //La requête HTTP
var requete;
function identifier() {
requete = getRequete();
if (requete != null) {
//Constituer le corps de la requete (la chaine de requete)
var login = document.getElementById("login").value;
var mdp = document.getElementById("mdp").value;
var corps = "login=" + encodeURIComponent(login) + "&mdp=" + encodeURIComponent(mdp);
try {
//Ouvrir une connexion asynchrone
requete.open("POST", "../connect.php", true);
//Positionner une en-tete indispensable quand les parametres sont passes par POST
requete.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//Traitement a effectuer quand l'etat de la requete changera
requete.onreadystatechange = onIdentifier;
//Lancer la requete
requete.send(corps);
//Montrer que la requete est en cours
montrerActivite();
}
catch (exc) {
montrerInactivite();
}
}
else {
setMessage("Impossible de se connecter au serveur.");
}
}
//Ce qui s'executera lorsque la reponse arrivera
function onIdentifier() {
if (requete.readyState == 4 && requete.status == 200) {
//Montrer que la requete est terminee
montrerInactivite();
//Afficher le message de reponse recu
setMessage(requete.responseText);
}
}
//Abandonner la requete
function abandonnerIdentifier() {
if (requete != null) {
requete.abort();
}
montrerInactivite();
setMessage("Requête abandonnée");
}
//Recuperer la requete existante ou une nouvelle si elle vaut null
function getRequete() {
var result = requete;
if (result == null) {
if (window.XMLHttpRequest) {
//Navigateur compatible Mozilla
result = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
//Internet Explorer sous Windows
result = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return result;
}
//Mettre les boutons dans l'etat initial
function montrerInactivite() {
document.getElementById("identifierOff").style.display = "inline";
document.getElementById("identifierOn").style.display = "none";
document.getElementById("boutonAbandonnerIdentifier").disabled = true;
}
//Montrer que la requete est en cours
function montrerActivite() {
document.getElementById("identifierOff").style.display = "none";
document.getElementById("identifierOn").style.display = "inline";
document.getElementById("boutonAbandonnerIdentifier").disabled = false;
setMessage("");
}
//Afficher un message
function setMessage(msg) {
document.getElementById("message").innerHTML = msg;
} |
La fonction "montrerInactivite()" est appelé par la balise <body onload="montrerInactivite()">.
Malgré plusieurs essais, je n'ai pas l'impression que mon code Javascript m'envoie de bonnes valeurs $_POST sur ma feuille connect.php; ainsi je doute que le soucis vienne de cette dernière, car auparavant, mon formulaire en PHP seul marchait très bien avec ce script.
Merci d'avance pour votre aide :ccool:
