Accueil > tutos > ajax > check-if-user-exist-ajax
Vérifier si un pseudo est disponible en AJAX
| Difficulté | Tags / Mots-clés | Prérequis |
|---|---|---|
 |
Vérifier si un utilisateur existe déjà dans la base de données, Check if user already exists, check asynchrone, vérification pseudo Ajax, check Ajax BDD, check username MySQL | Bonne base XHTML / CSS, Notions AJAX et Javascript |
| Durée | Voir aussi | Publié le |
|---|---|---|
| 30 min | Formulaire de contact AJAX, Système de vote AJAX | 22 janvier 2011 |
Avantages
Pas de rechargement de la page pendant la navigation
Inconvénients
URL déformées
Référencement
Arborescence du module complet :
Etape 2 : HTML
Vous releverez que le Doctype est standardisé depuis l'arrivée du HTML5.
index.html
<!DOCTYPE html> <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>
Etape 3 : AJAX
index.html
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 coordonnées afin que notre script PHP ait toutes les infos pour aller checker dans la BDD. Vous remarquerez que j'ai utilisé les nouvelles méthodes PDO qui assure une plus grande sécurité des requêtes.
<?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 ce bout de code qui va envoyer la requête à la base de données afin de savoir si le nom d'utilisateur est dispo ou non.
<?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;
}
Pour moi le probleme est qu'il me marque "Check en cours..." puis rien.
Ne fonctionne pas, tous les pseudo sont valide.
As-tu essayé avec "cyril" ou "john" parce que je viens de tester et ça fonctionne très bien. Quel navigateur utilise tu ?
Très intéressant, cependant je rencontre un problème sur connect.inc.php, l'ajax indique toujours que le pseudo est disponible.
Pour define("YOUR_BDD", "TABLE_NAME", true); Je place le nom de la BD, et le nom de la table concerné.
Quelqu'un aurait un conseil pour ce problème?