[AJAX] Formulaire de connexion asynchrone à la DB

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

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

[AJAX] Formulaire de connexion asynchrone à la DB

AJAX

Mode arborescent

Discussions similaires

Partager

Partager