Accueil > ajax > check-user-ajax

{ Vérifier si un pseudo est disponible en ajax }

Introduction

Avantages

Pas de rechargement de la page pendant la navigation

Inconvénients

URL déformées

Référencement altéré

Téléchargement et placement des fichiers

Html

Vous releverez que le Doctype est standardisé depuis l'arrivée du HTML5.

<html>	
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Demo AJAX Pseudo Check</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
</head>
<body>
<h2>Demo AJAX Pseudo Check</h2>
<div>
<label>Nom d'utilisateur :</label>
<input name="pseudo" type="text" id="pseudo" value="" maxlength="15" />
<span id="msgbox" style="display:none"></span>
</div>
</body>
</html>

Ajax

Concernant le code Ajax, vous êtes libre de l'insérer au bas de votre page juste après la balise de fermeture </body> ou alors de placer tout ce code dans un fichier externe que vous inclurez dans la page html.

<!-- AJAX CHECK -->
<script type="text/javascript">
$("#pseudo").blur(function()
{
$("#msgbox").removeClass().addClass('messagebox').text('Check en cours...').fadeIn("slow");
$.post("commun/check-pseudo.php" ,{ pseudo:$(this).val() } ,function(data)
{
if(data=='no')
{
$("#msgbox").fadeTo(200,0.1,function()
{
$(this).html('Ce pseudo est déjà pris').addClass('busy').fadeTo(900,1);
});
}
else
{
$("#msgbox").fadeTo(200,0.1,function()
{
$(this).html('Ce pseudo est disponible').addClass('dispo').fadeTo(900,1);
});
}
});
});
</script>

Connexion à la base de données

connect.inc.php

Dans ce fichier, rien de bien compliquer, on indique juste les identifiants de connexion afin que notre script PHP ait toutes les infos pour aller faire ce qu'il a besoin dans la BDD. Vous remarquerez que j'ai utilisé les nouvelles méthodes PDO (très en vogue) qui assure une meilleure sécurité.

<?php	
// Connexion	
define("HOST","localhost", true);	
define("USER","root", true);	
define("PASS","", true);		

// Bases de données	
define("YOUR_BDD", "TABLE_NAME", true);		

// PDO MEMBRES	
$connect_users = new PDO('mysql:host='.HOST.';dbname='.DB_USERS, USER, PASS, array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8"));	
$connect_users->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_WARNING);
?>

Le check en php

check-pseudo.php

Voici le check à proprement parler, c'est cette page qui va faire la requête sur la base de données afin de savoir si le nom d'utilisateur est dispo ou non, il va également préparé la réponse pour que le javascript puisse la lire.

<?php
require_once 'connect.inc.php';
global $connect_users;

$pseudo = $_POST['pseudo'];
if(strlen($pseudo) == 0)
{
echo ('empty');
}
else 
{
// On récupère la liste des membres et on check si le pseudo existe déjà
$req = $connect_users->query("SELECT pseudo FROM pseudo WHERE pseudo='$pseudo'");

// On déroule la liste
$chk_pseudo = $req->fetch(PDO::FETCH_ASSOC);

// Si le pseuo existe déjà on retourne non
if($chk_pseudo == '1' || $chk_pseudo > '1')
{
echo ('no');
$ok = false;
}
else
{
echo ('yes');
}
} 
?>

Une touche de css

style.css

Pour finir donnons un peu de style à notre input ainsi qu'au span qui contiendra la réponse de la requête.

.messagebox {
position:absolute;
width:auto;
margin-left:30px;
border:1px solid #c93;
background:#ffc;
padding:5px 10px;
}

.dispo {
position:absolute;
width:auto;
margin-left:30px;
border:1px solid #349534;
background:#C9FFCA;
padding:5px 10px;
color:#008000;
}

.busy {
position:absolute;
width:auto;
margin-left:30px;
border:1px solid #CC0000;
background:#F7CBCA;
padding:5px 10px;
color:#CC0000;
}

input {
padding: 5px 10px;
}

Fin du tutoriel !