CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2010 02 10 00:11:22

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Application

> XAMP : EXEMPLE DE SCRIPT D'IDENTIFICATION SIMPLE

XAMP : EXEMPLE DE SCRIPT D'IDENTIFICATION SIMPLE

Information sur la source

Note :

10,00 / 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é :25 689 / 13 896

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 !

index.html 1 109 octets
login.js 2 327 octets
login.php 1 543 octets
install
- mysql.txt 392 octets
- readme.txt 1 674 octets
theme
- busy.gif 294 octets
- good.gif 433 octets
- handle.gif 422 octets
- login.css 486 octets
- Thumbs.db11 776 octets
- wrong.gif 425 octets

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

GRACENATUR V02 - CDMS: CONTAIN AND DESIGN MANAGMENT SYSTEM par sajaris

SIMULBAL: SERVEUR POUR BALANCES ÉLECTRONIQUES DE LABORATOIRE... par laservert

GESTION D'ESPACE MEMBRES par jmpicot

TEST DU CHI2 OU KHI2 D'INDÉPENDANCE par phpAnonyme

CLASSE PAGINATION par darkis

Toutes les sources de la catégorie Application

Sources en rapport avec celle ci

GESTION_ENSEIGNANTS par Elmarzougui

ORGANIGRAMME PHP DYNAMIQUE par megatom

ORGANIGRAMME DYNAMIQUE par lptt320

CHAT AJAX AVEC MYSQL QUASI COMPLET par bloom1

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:<?phpif(isset($_POST['login']) Sessions permissions [ par Soul EX ] <?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 à tous !!! Je suis en train de faire un espace membres et voici ce qu'il y a dans le fichier de login (après la page de formulaire de probleme de session_start [ par metal_death ] Bonjour  j'ai cré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éer un site avec gestion membres, admins et vu que c'est pour un cours je ne peux pas vraiment télé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 <?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

Derniers Blogs

TECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICES par ROMELARD Fabrice

[DIVERS] SUIVRE VOS SéRIES PRéFéRéS SUR LA TOILE par orion

TECHDAYS PARIS 2010 : LA BI DANS SHAREPOINT 2010 par ROMELARD Fabrice

TECHDAYS PARIS 2010 : DéPLOIEMENT DE NOUVELLES TECHNOLOGIES - RETOUR D'EXPéRIENCE PAR L'INFORMATIQUE DE MICROSOFT par ROMELARD Fabrice

TECHDAYS PARIS 2010 : PLAN DE MIGRATION VERS SHAREPOINT 2010 par ROMELARD Fabrice

Forum

RE : FAIRE UN SELECT SUR UN CHAMP D'UN FORMULAIRE par 4lman78

RE : COMMENT FAIRE UN SELECT DISTINCT EN AYANT PLUSIEURS CHAMPS? par neigedhiver

RE : AFFICHER LES MESSAGES ET LES MARQUER COMME LU par patheo

RE : COMMENT FAIRE UN SELECT DISTINCT EN AYANT PLUSIEURS CHAMPS? par mailliam

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

PLATEFORME SUR L ESOTERISME VOYANCE - sans charte graphique
Budget : 3 500€
Joomla 15 module paiement adaptation composant cuisine
Budget : 250€
Integrateur web dans template
Budget : 500€

Logiciels

DB-MAIN (9.1.0)
DB-MAIN (9.1.0)

DB-MAIN is a data-modeling and data-architecture tool. It is designed to help developers and anal...

Cliquez pour télécharger DB-MAIN
Xilisoft DPG Convertisseur (5.1.37.0120)
XILISOFT DPG CONVERTISSEUR (5.1.37.0120)

Xilisoft DPG Convertisseur offre aux fans de Nintendo DS une bonne solution leur permettant de dé...

Cliquez pour télécharger Xilisoft DPG Convertisseur
GraphicsGale (2.01.01)
GRAPHICSGALE (2.01.01)

GraphicsGale est un logiciel de PixelArt avec de nombreuse fonctionnalités permettant de réalisé ...

Cliquez pour télécharger GraphicsGale
Architecte 3D (Platinum 2010)
ARCHITECTE 3D (PLATINUM 2010)

Architecte 3D Platinium vous permet de concevoir facilement les plans votre future maison, de l'é...

Cliquez pour télécharger Architecte 3D
TeamViewer 5 (TeamViewer 5)
TEAMVIEWER 5 (TEAMVIEWER 5)

Dépanner un ami,expliquer une manipulation devient un jeu d'enfant. Prise en main d'un autre ord...

Cliquez pour télécharger TeamViewer 5