begin process at 2010 03 22 15:43:37
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Application

 > XAMP : EXEMPLE DE SCRIPT D'IDENTIFICATION SIMPLE

XAMP : EXEMPLE DE SCRIPT D'IDENTIFICATION SIMPLE


 Information sur la source

Note :
10 / 10 - par 1 personne
10,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Application Classé sous :ajax, php, mysql, xhtml, login Niveau :Initié Date de création :29/07/2006 Date de mise à jour :29/07/2006 20:32:57 Vu / téléchargé :26 410 / 13 952

Auteur : roddd

Ecrire un message privé
Commentaire sur cette source (10)
Ajouter un commentaire et/ou une note

 Description

XAMP est un acronyme qui désigne le regroupement des technologies destinées à la gestion de contenu WEB suivantes :

- Xhtml pour le balisage du contenu
- Ajax pour la manipulation des requêtes asynchrones ( sans recharger la page )
- MySQL pour le stockage des données
- PhP pour le traitement des requêtes et la communication avec la base de données MySQL

À l'aide d'un script d'identification de base, j'espères vous faire découvrir le potentiel de cette technologie de développement de solutions WEB et vous inciter à aller de l'avant dans l'apprentissage de cette nouvelle méthode de travail :)

== Précisions ==

Avec les requêtes de type XMLHttpRequest, JavaScript vous permet de repousser les limites de la présentation traditionnelle du contenu en traitant les requêtes en "background" sans avoir besoin de recharger la page. Cette technologie, couplée à un language de script comme PHP et à une base de donnée vous permet de développement des applications en ligne qui allient les avantages du WEB à l'ergonomie des applications logicielles. Une fois maîtrisée, la technologie XAMP vous permet de gérer "en temps réel" des paramêtres fournis par l'utilisateur et ainsi faciliter la prise en main de vos interfaces WEB.

Source

  • [Partie PHP]
  • <?php
  • # CONFIGURATION
  • $CONFIG['host'] = "localhost";
  • $CONFIG['name'] = "Nom de la base de données";
  • $CONFIG['user'] = "Utilisateur";
  • $CONFIG['pass'] = "Mot de passe";
  • # IDENTIFICATION
  • $connection = null;
  • $result = null;
  • $user = null;
  • $password = null;
  • $username = null;
  • if ( isset( $_GET['username'] ) && $_GET['username'] != "" && isset( $_GET['password'] ) && $_GET['password'] != "" )
  • {
  • $username = trim( addslashes( $_GET['username'] ) );
  • $password = md5( trim( addslashes( $_GET['password'] ) ) );
  • $connection = @mysql_connect( $CONFIG['host'], $CONFIG['user'], $CONFIG['pass'] );
  • if( $connection != null && $connection )
  • {
  • if ( @mysql_select_db( $CONFIG['name'], $connection ) )
  • {
  • $result = mysql_query("SELECT * FROM users WHERE user_name = '".$username."' ");
  • if ( $result != null && $result && !empty( $result ) )
  • {
  • $user = mysql_fetch_assoc( $result );
  • if ( $user != null && $user && !empty( $user ) )
  • {
  • if ( $password == $user['user_password'] )
  • {
  • print "good";
  • } else {
  • print "wrong";
  • }
  • } else {
  • print "Aucun compte n'est associé a ce nom d'utilisateur !";
  • }
  • } else {
  • print "Veuillez exécuter la routine d'installation avant de tester ce script !";
  • }
  • } else {
  • print "Impossible de sélectionner la base de donnée !";
  • }
  • } else {
  • print "Impossible de se connecter au serveur MySQL !";
  • }
  • } else{
  • print "Veuillez entrer un nom d'utilisateur et un mot de passe valide !";
  • }
  • ?>
  • [Partie AJAX]
  • // Mise à jour du message destiné à l'utilisateur sans recharger la page
  • function update_status( text, img )
  • {
  • document.getElementById("message").innerHTML = '<img id="status" src="theme/' + img + '.gif"> ' + text;
  • }
  • // Manipulation de la requête d'identification de manière asynchrone
  • function handle_login()
  • {
  • var loginRequest = null;
  • update_status( "Votre requête est en cours de traitement ...", "handle");
  • // Définition du connecteur en fonction du navigateur :
  • if (window.XMLHttpRequest)
  • {
  • loginRequest = new XMLHttpRequest();
  • if (loginRequest.overrideMimeType)
  • {
  • loginRequest.overrideMimeType('text/xml');
  • }
  • }
  • else if (window.ActiveXObject)
  • {
  • try {
  • loginRequest = new ActiveXObject("Msxml2.XMLHTTP");
  • } catch (e) {
  • try {
  • loginRequest = new ActiveXObject("Microsoft.XMLHTTP");
  • } catch (e) {
  • update_status( "Impossible de communiquer avec le serveur", "handle");
  • }
  • }
  • }
  • // le secret d'AJAX réside en partie dans la réception et le traitement des résultats en background :
  • loginRequest.onreadystatechange = function()
  • {
  • update_status( "Veuillez patienter pendant le processus d'authentification ...", "busy");
  • if( loginRequest.readyState == 4 )
  • {
  • // Ici le code 200 signifie que la requête a renvoyé une valeur valide. On pourrait aussi gérer les erreurs 500, 404 ...
  • if( loginRequest.status == 200 )
  • {
  • if ( loginRequest.responseText == "good" )
  • {
  • update_status( "Identification réussie !" , loginRequest.responseText );
  • } else if ( loginRequest.responseText == "wrong" ) {
  • update_status( "Le mot de passe est erroné !" , loginRequest.responseText );
  • } else {
  • update_status( loginRequest.responseText , "handle" );
  • }
  • }
  • else
  • {
  • update_status( "Une erreur est survenue : " + loginRequest.status + " " + loginRequest.statusText, "handle");
  • }
  • }
  • };
  • username = document.getElementById('username').value;
  • password = document.getElementById('password').value;
  • // le secret d'AJAX réside également dans l'envoi de la requête en background ( sans recharger la page ) :
  • loginRequest.open("GET", "login.php?username=" + username + "&password=" + password, true);
  • loginRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  • loginRequest.send(null);
  • }
  • [Formulaire XHTML]
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • <html lang="fr">
  • <head>
  • <title>Exemple de système d'identification simple codé en XAMP</title>
  • <script src="login.js" type="text/javascript"></script>
  • <link type="text/css" href="theme/login.css" rel="stylesheet">
  • </head>
  • <body>
  • <div id="Header">
  • Exemple de système d'identification simple codé en XAMP ( xhtml, ajax, mysql et php )
  • </div>
  • <div id="LoginForm">
  • <form onSubmit="return false">
  • <p>
  • <label for="username">Nom d'utilisateur : </label>
  • <input type="text" name="username" id="username" size=20>
  • </p>
  • <p>
  • <label for="password">Mot de passe : </label>
  • <input type="password" name="password" id="password" size=20>
  • </p>
  • <input type="submit" name="submit" value="Login" onClick="handle_login();">
  • </form>
  • </div>
  • <div id="message" for="status">
  • <img id="status" src="theme/handle.gif">
  • Entrez votre nom d'utilisateur ainsi que votre mot de passe pour ouvrir une nouvelle session ...
  • </div>
  • </body>
  • </html>
[Partie PHP]

<?php

# CONFIGURATION

$CONFIG['host'] = "localhost";
$CONFIG['name'] = "Nom de la base de données";
$CONFIG['user'] = "Utilisateur";
$CONFIG['pass'] = "Mot de passe";

# IDENTIFICATION

$connection = null;
$result = null;
$user = null;
$password = null;
$username = null;

if ( isset( $_GET['username'] ) && $_GET['username'] != "" && isset( $_GET['password'] ) && $_GET['password'] != "" )
{
	$username = trim( addslashes( $_GET['username'] ) );
	$password = md5( trim( addslashes( $_GET['password'] ) ) );
	$connection = @mysql_connect( $CONFIG['host'], $CONFIG['user'], $CONFIG['pass'] );
	
	if( $connection != null && $connection )
	{
		if ( @mysql_select_db( $CONFIG['name'], $connection ) )
		{
			$result = mysql_query("SELECT * FROM users WHERE user_name = '".$username."'  ");
			if ( $result != null && $result && !empty( $result ) )
			{
				$user = mysql_fetch_assoc( $result );
				if ( $user != null && $user && !empty( $user ) )
				{
					if ( $password == $user['user_password'] )
					{
						print "good";
					} else {
						print "wrong";
					}
				} else {
					print "Aucun compte n'est associé a ce nom d'utilisateur !";
				}
			} else {
				print "Veuillez exécuter la routine d'installation avant de tester ce script !";
			}
		} else {
			print "Impossible de sélectionner la base de donnée !";
		}
	} else {
		print "Impossible de se connecter au serveur MySQL !";
	}
} else{
	print "Veuillez entrer un nom d'utilisateur et un mot de passe valide !";
}

?>


[Partie AJAX]


	// Mise à jour du message destiné à l'utilisateur sans recharger la page
	function update_status( text, img )
	{
		document.getElementById("message").innerHTML = '<img id="status" src="theme/' + img + '.gif"> ' + text;
	}
	
	// Manipulation de la requête d'identification de manière asynchrone
	function handle_login()
	{ 
		var loginRequest = null; 

		update_status( "Votre requête est en cours de traitement ...", "handle");
		
		// Définition du connecteur en fonction du navigateur :
		if (window.XMLHttpRequest)
		{
 			loginRequest = new XMLHttpRequest();
			if (loginRequest.overrideMimeType) 
			{
				loginRequest.overrideMimeType('text/xml');
			}
		} 
		else if (window.ActiveXObject) 
		{
			try {
				loginRequest = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e)	{
				try {
					loginRequest = new ActiveXObject("Microsoft.XMLHTTP");
				} catch (e) {
					update_status( "Impossible de communiquer avec le serveur", "handle");
				}
			}
        }
		
		// le secret d'AJAX réside en partie dans la réception et le traitement des résultats en background :
		loginRequest.onreadystatechange = function()
		{ 
			update_status( "Veuillez patienter pendant le processus d'authentification ...", "busy");
			if( loginRequest.readyState == 4 )
			{

				// Ici le code 200 signifie que la requête a renvoyé une valeur valide. On pourrait aussi gérer les erreurs 500, 404 ...
                                if( loginRequest.status == 200 )
				{
					if ( loginRequest.responseText == "good" )
					{
						update_status( "Identification réussie !" , loginRequest.responseText );
					} else if ( loginRequest.responseText == "wrong" )  {
						update_status( "Le mot de passe est erroné	 !" , loginRequest.responseText );
					} else {
						update_status( loginRequest.responseText , "handle" );
					}
				}
				else	
				{
					update_status( "Une erreur est survenue : " + loginRequest.status + " " + loginRequest.statusText, "handle");
				}	
			} 
		};
		
		username = document.getElementById('username').value;
		password = document.getElementById('password').value;
		
		// le secret d'AJAX réside également dans l'envoi de la requête en background ( sans recharger la page ) :
		loginRequest.open("GET", "login.php?username=" + username + "&password=" + password, true); 
		loginRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
		loginRequest.send(null); 
	}

[Formulaire XHTML]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr">
	<head>
		<title>Exemple de système d'identification simple codé en XAMP</title>
		<script src="login.js" type="text/javascript"></script>
		<link type="text/css" href="theme/login.css" rel="stylesheet">
	</head>
	<body>
	<div id="Header">

		Exemple de système d'identification simple codé en XAMP ( xhtml, ajax, mysql et php )
	</div>
	<div id="LoginForm">
		<form onSubmit="return false">
			<p>
				<label for="username">Nom d'utilisateur : </label>
				<input type="text" name="username" id="username" size=20>	
			</p>
			<p>		
				<label for="password">Mot de passe : </label>

				<input type="password" name="password" id="password" size=20>
			</p>
			<input type="submit" name="submit" value="Login" onClick="handle_login();">
		</form>
	</div>
	<div id="message" for="status">
		<img id="status" src="theme/handle.gif">
		Entrez votre nom d'utilisateur ainsi que votre mot de passe pour ouvrir une nouvelle session ...
	</div>

	</body>
</html>

 Conclusion

Ce script a été conçu dans le but express de vous apprendre les bases de la technologie XAMP et ne ne devrait en aucun cas être utilisé dans son état actuel pour des fins d'identification. Le code n'est pas entièrement commenté car le but n'est pas de vous donner des informations qui ne seraient pas entièrement exacts et conformes aux normes. Vous devez déjà posséder une certaine connaissance de base de chacune des technologies employées pour bien comprendre comment ce script fonctionne.

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

29 juillet 2006 08:40:39 :
J'ai rajouté quelques explications supplémentaires histoire d'expliquer un peu plus l'utilité de cette source
29 juillet 2006 08:58:23 :
Ajout du code principal
29 juillet 2006 20:32:57 :
Ajout du formulaire xhtml

 Sources de la même categorie

Source avec Zip Source avec une capture WINN GUESTBOOK FR par negstek76
Source avec Zip CHIFFRES EN LETTRES par zied9b
Source avec Zip Source avec une capture GRACENATUR V02 - CDMS: CONTAIN AND DESIGN MANAGMENT SYSTEM par sajaris
Source avec Zip SIMULBAL: SERVEUR POUR BALANCES ÉLECTRONIQUES DE LABORATOIRE... par laservert
Source avec Zip GESTION D'ESPACE MEMBRES par jmpicot

 Sources en rapport avec celle ci

Source avec Zip CHARGER DES DONNÉES DEPUIS UN FICHIER TXT DANS UNE BASE DE D... par ig3
Source avec Zip Source avec une capture ORGANIGRAMME PHP DYNAMIQUE par megatom
Source avec Zip ORGANIGRAMME DYNAMIQUE par lptt320
Source avec Zip CHAT AJAX AVEC MYSQL QUASI COMPLET par bloom1
Source avec Zip MINI LISTE GÉNÉRIQUE AFFICHANT UNE TABLE MYSQL ET PERMETTANT... par antoine129

Commentaires et avis

Commentaire de roddd le 29/07/2006 08:21:46

Il s'agit de ma première source donc soyez vigilants s'il vous plaît :D Les images, le code PHP, le design CSS et le traitement des requêtes proviennent tous de moi mais il se pourraît que la struture du moteur javascript ressemble aux tutoriels de base d'autres auteurs car la méthode de base est relativement similaire à ce niveau.

Commentaire de FhX le 29/07/2006 11:04:05

"loginRequest.open("GET", "login.php?username=" + username + "&password=" + password, true);"
J'aurais fait passer ca en POST moi perso !

Commentaire de roddd le 29/07/2006 15:03:09

Oui bien sûr mais ce script n'est qu'un exemple d'utilisation de la méthode XMLHttpRequest.open() ... pour faire passer la même requête mais en POST, il faut utiliser XMLHttpRequest.send() :p

Commentaire de kankrelune le 30/07/2006 00:50:11

En get aussi... sauf que tu ne transmet pas de parametres... .. .

XMLHttpRequest.send(null);

;oP

@ tchaOo°

Commentaire de roddd le 30/07/2006 08:40:12

Ouais enfin on se comprends, voilà ce que ça donne pour une requête POST :

# loginRequest.open("POST", "login.php", true);
# loginRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
# loginRequest.send("username=" + username + "&password=" + password);

Commentaire de ImmortalPC le 30/07/2006 10:15:14

Salut,

question un peu c** c' est quoi la différance entre Ajax et JavaScript ??

@+

Commentaire de malalam le 30/07/2006 11:32:30 administrateur CS

Hello,

Ajax est une méthode de programmation, permettant, via javascript et un objet xmlhttp (activeX pour IE, chaque navigateur a -ou non - son implémentation) d'interroger une page sur le serveur et d'en recevoir la réponses de manière transparente pour l'utilisateur.
En gros.

Pour ce qui est du code, ça me parait assez dangereux d'utiliser Ajax pour une identification. Et assez inutile, à dire vrai.
De plus, xhtml strict implique qu'on ferme les balises, hein... : <input... />

Commentaire de roddd le 30/07/2006 14:36:20

Oui t'as raison Malalam, le code du formulaire est pas optimisé la honte :d En même temps le but de l'exercise était de présenter le XAMP et rien n'est optimisé ni en état de servir tel quel dans un réel script.

Sinon une fois optimisé avec un hash du champs "password" avant l'envoi de la requête POST je ne vois pas pourquoi ça ne pourrait pas convenir pour une identification convenable. Même des applications comme phpBB ne hash pas pas le mot de passe directement dans le formulaire ...

Et sinon l'identification XAMP permet entre autres choses d'insérer des formulaires de "réponse rapide a un topic" sans avoir à passer par une page de login.

Commentaire de VirtuAiles le 19/02/2008 01:06:09

Hmmph! C'est vieux!

Anyway... c'est moi qui est trop c** ou je ne vois pas c'est quoi le mot de pass?
Le nom d'utilisateur est "test" et le hash du mot de passe est "15161160009d76427791ebd5809ded7c" mais en clair, c'est quoi...?

Merci ;)

Commentaire de VirtuAiles le 19/02/2008 01:08:41

Bah, laissez tomber, j'ai trouvé en utilisant un decrypter ;)

Sinon, si jamais vous connaissez un script/tuto pour faire un script similaire, n'hésitez pas à partager hein :)

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

problème avec MYSQL/php [ par spiesalex ] salut,bon j'ai ce code ci:&lt;?phpif(isset($_POST['login']) Sessions permissions [ par Soul EX ] &lt;?php session_start(); $login = $_POST["login"]; $password = $_POST["password"]; $connexion = mysql_connect("*","*","*"); mysql_select_db("*",$c Problème avec fichier de login pour espace membres [ par Florent06 ] Salut &#224; tous !!! Je suis en train de faire un espace membres et voici ce qu'il y a dans le fichier de login (apr&#232;s la page de formulaire de probleme de session_start [ par metal_death ] Bonjour&nbsp; j'ai cr&#233;er un espace membre grace a phpfacile mais j'ai un petit probleme lors de la connection je recois ce message : Warning: se Authentification ie et firefox [ par mounelelabrador ] Bonjour, Je dois cr&#233;er un site avec gestion membres, admins et vu que c'est pour un cours je ne peux pas vraiment t&#233;l&#233;charger sur inter AJAX PHP send var [ par cedriclomb ] Bonjour,Bon la j'y pige que couik !Alors voila le problème, je cherche a envoyer un fomulaire à PHP avec AJAX et une méthode POST, j'ai fait des reche problème avec requete sql et php [ par machmacha ] bonjour,j'ai une requête simple sur php la voilà:$sql = mysql_query("SELECT *                   FROM test                   WHERE login='".$_POST['log difference entre les majuscules et miniscules [ par faty86 ] bonjour,nous travaillons sur une application utilisant  PHP/MYSQL. nous avons une table Profil (contenant les users) ayant comme champs: Login, PWD et a tous les pro du php [ par vrkill2 ] bonjour a tous qui peux mexpliqué clairement comment utiliser se code svp merci     &lt;?php // Démarage de la session PHP4// Il faut tou Bonsoir, un probleme avec mon codage [ par xavier62 ] Je vous montre mon problem sur un codage !! et sa m'écrit ceci : Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resourc


Nos sponsors


Appels d'offres

Sondage...

Comparez les prix

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,780 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales