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 / Exemple :
[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.
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.