[AJAX] Formulaire de connexion asynchrone à la DB

**Ysu89** · 27/11/2009, 17h10

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 php :

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
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>&nbsp;Email</td>
                                <td><input type="text" id="login" /></td>
                            </tr>
                            <tr>
                                <td>&nbsp;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 php :

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
<?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 :

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
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

**Bovino** · 27/11/2009, 18h46

Salut.

Je n'ai jamais eu à tester ce cas, mais je ne suis pas sûr que tu puisses initialiser une session sur une requête AJAX.
Si l'utilisateur a désactivé les cookies, la question ne se pose même pas puisque si tu ne transmets pas l'identifiant de session, celle-ci est perdue. Ensuite, reste à savoir si tu peux affecter un cookie de session via AJAX

**Ysu89** · 28/11/2009, 16h58

Bonjour, merci d'avoir répondu

Je n'ai pas trop d'idée sur l'initialisation d'une session via AJAX, cela dit, ce script vient d'un bouquin sur le développement AJAX. Je me demande seulement si le script me renvoie sur la page connect.php, car au quel cas, même si les valeurs POST n'étaient pas transmises, le navigateur m'afficherait une page blanche.

Si seulement mes scripts AJAX marchaient plus souvent !