Share
Ce tutoriel vous apprendra comment vérifier la disponibilité d'un nom d'utilisateur avec Request.JSON et PHP / MySQL de Mootools.
Dans ce didacticiel, vous apprendrez à utiliser la fonction Request.JSON de Mootools pour comparer un nom d'utilisateur à un tableau ou à une base de données. Dans cet exemple, nous utiliserons une base de données MySQL simple. Je vais essayer de tenir le plus de mains possible, mais avoir un peu d'expérience avec PHP et MySQL sera un plus.
Nous allons créer une base de données simple et ajouter une table. Après cela, nous ajouterons un nom d'utilisateur dans la base de données..
Accentsconagua
CREATE TABLE IF NOT NOT EXISTS ajax_users (id INT (2) NOT NULL, PRIMARY KEY AUTO_INCREMENT, nom_utilisateur VARCHAR (128) NOT NULL); INSERT IN ajax_users VALUES ('NULL', 'matt'); Woohoo, nous avons une base de données, une table et un seul nom d'utilisateur. Commençons avec ce tutoriel!
Pour la première étape, nous allons créer une page simple avec un champ de saisie pour le nom d'utilisateur et un bouton d'envoi. Allez-y et ouvrez votre application de codage préférée - il s’agit peut-être de Coda - et créez un nouveau document vierge nommé index.php. Je vais d'abord vous montrer le code de résultat final pour cette étape, puis je l'expliquerai en détail. Je trouve que la réécriture du code aide moi-même à le coller, mais vous pouvez copier et coller si vous le souhaitez.
Nous avons maintenant une mise en page de base assez simple. Cela commencera à se concrétiser à l'étape 2, alors ne vous inquiétez pas si cela ne ressemble pas beaucoup pour le moment..
N'hésitez pas à styler cela comme bon vous semble ou à utiliser le fichier CSS à partir du code source.
Nous allons devoir inclure le framework Mootools dans notre fichier php. Sans cela, nous ne pouvons utiliser aucune des classes ou fonctions de Mootools pour notre script. Il y a deux façons de le faire. La première consiste à utiliser l'API AJAX Libraries de Google pour créer un lien vers le fichier. Vous pouvez voir le chemin ici. Les bibliothèques de Google vous donnent accès à de nombreux frameworks, alors jetez un coup d'œil après avoir terminé le didacticiel. Pour accélérer les choses, nous pouvons simplement utiliser le code ci-dessous. Placez ceci dans votre
section de votre fichier php.La deuxième façon est de se rendre sur le site Mootools
Maintenant que le framework Mootools est inclus dans notre fichier, nous pouvons créer un nouveau fichier appelé main.js, ou le nom que vous voulez. Une fois ce fichier créé, incluons-le dans notre fichier php.
Allez-y et placez cela au bas de notre fichier php. Si vous ne l'avez pas déjà fait, ouvrons notre fichier main.js.
Cette partie peut devenir un peu délicate. Assurez-vous que les deux fichiers que vous avez ouverts sont index.php et main.js, car nous allons passer d’un fichier à l’autre pour vous donner une meilleure idée de la façon dont Mootools interagit avec les éléments de index.php..
Le premier morceau de code que nous allons ajouter à main.js indique à notre script Mootools d’exécuter du code lorsque le DOM est chargé..
window.addEvent ('domready', function () // nous allons le remplir avec la bonté Mootools); Maintenant que l’activité principale est prise en charge, nous pouvons nous salir les mains.
Nous devons trouver un moyen de savoir quand un utilisateur a interagi avec notre champ de saisie du nom d'utilisateur. Nous faisons cela en utilisant des événements. Les événements sont le moyen utilisé par Mootools pour exécuter certaines actions lorsqu'un utilisateur fait quelque chose. Cela peut inclure cliquer sur un lien, appuyer sur une touche, relâcher une touche, passer la souris, etc. Pour cet exemple, nous allons déclencher un événement lorsque l'utilisateur relâche une clé dans le champ Nom d'utilisateur..
Avant d'ajouter l'événement, nous devons donner un identifiant au nom d'utilisateur. Sans identifiant, Mootools ne sait pas de quelle entrée on parle quand on lui dit d’ajouter un événement.
Continuez et ajoutez un identifiant à votre nom d'utilisateur saisi dans index.php
Ok, je jure que nous allons commencer à coder certains Mootools maintenant. Revenez à main.js. Dans votre événement de fenêtre, ajoutez ce code.
$ ('nom_utilisateur'). addEvent ('keyup', function () // C'est ce qui est déclenché lorsque l'utilisateur relâche une clé dans l'entrée du nom d'utilisateur $ ('nom_utilisateur') est ce qui indique à Mootools quel élément nous examinons. Il concerne les éléments ID.
Après cela, nous utilisons .addEvent () pour indiquer à Mootools que nous souhaitons faire quelque chose à un moment donné. La première option est l'événement que nous surveillons. Nous utilisons keyup. Il y a des tonnes d'autres événements que nous pouvons rechercher. Vous pouvez en savoir plus sur les écoles du W3C. Le dernier petit bit contient une fonction que nous allons utiliser pour exécuter du code JavaScript chaque fois que l'événement est déclenché.
Maintenant que l'événement est lié, nous pouvons créer la demande à envoyer lorsque l'événement est déclenché. Nous allons mettre ce morceau de code à l'envers.
… Le début de notre événement… new Request.JSON (url: "inc / php / json.php", onSuccess: function (response) ). Get ($ ('inscription'));… La fin de notre événement… Assez simple à la recherche, hein?! Nous commençons par déclarer notre demande. La première variable est url. C'est le chemin vers notre PHP qui héberge notre magie JSON. Pour l'instant, il suffit de mettre un chemin vers un futur fichier. La seconde variable est onSuccess. C'est une fonction qui est déclenchée si notre requête aboutit. C'est là que nous allons mettre la plupart de notre code restant. Notre dernier élément, qui est facile à consulter, est la variable .get ($ ('inscription')) qui suit notre demande. Cela prend toutes nos informations de notre formulaire dans index.php et les envoie avec la requête JSON. Sans cela, la demande n'envoie aucune donnée et est pratiquement inutile. Nous l'avons maintenant rendu utile!
Nous devrions probablement créer notre fichier JSON maintenant afin de ne pas rencontrer d'erreur.
Le concept de notre fichier JSON est assez simple en théorie. Il prend nos variables, fait ce que nous voulons avec, puis le renvoie dans notre fichier main.js, le tout dans les coulisses. C'est génial. Prenez une seconde pour venir vous chercher.
Ok, maintenant nous sommes tous calmes, créons un nouveau fichier appelé json.php. Si vous avez ajouté le chemin d'accès à votre fichier main.js, attribuez-lui le même nom et placez-le dans le dossier approprié. Ouvrez cette ventouse!
// configure une variable vide // nous l'utilisons comme un tableau pour renvoyer $ result = null;
Simple droit? La première étape consiste à créer une variable null que nous utiliserons ultérieurement sous forme de tableau. Ensuite, nous devons nous connecter à notre base de données.
// se connecter à la base de données mysql mysql_connect ('localhost', 'root', 'root') ou die ('Erreur de connexion à mysql'); mysql_select_db ('tutorials') ou die ('Erreur de connexion à la table'); Nous devrions être tous connectés. Remplissez les informations de votre base de données ci-dessus. Pour vous assurer que tout fonctionne correctement, pointez sur votre fichier json.php. Si la page est vierge, nous sommes en or. Si vous voyez des erreurs de connexion à la base de données, nous avons un problème. Il s’agit généralement d’un hôte / nom d’utilisateur / mot de passe mal orthographié. Revérifier!
// formate les variables $ user_name = mysql_real_escape_string ($ _GET ['user_name']); // recherche dans la base de données tous les utilisateurs nommés $ nom_utilisateur $ utilisateur_cueillette = mysql_query ("SELECT" nom_utilisateur "FROM" utilisateurs_ajax "WHERE" nom_utilisateur "=" $ nom_utilisateur ""); // vérifie si la requête a renvoyé quoi que ce soit if (mysql_num_rows ($ grab_user) == 0) // aucun utilisateur portant ce nom $ result ['action'] = 'success'; else // oops, déjà pris $ result ['action'] = 'error'; Toutes les variables envoyées à notre script sont envoyées sous la forme $ _GET. Si vous avez déjà utilisé des formulaires, cela ne devrait pas être différent. Si vous n'avez jamais travaillé avec des formulaires PHP auparavant, jetez un coup d'œil à cette page..
Nous mettons la variable $ _GET dans une nouvelle variable pour tout nettoyer. En encapsulant la variable $ _GET dans la fonction mysql_real_escape_string (), nous veillons à lutter contre l'injection mysql. L'injection est mauvaise!
Suivant est la requête. Nous récupérons toutes les lignes de notre base de données MySQL où la ligne nom_utilisateur est égale à ce que l'utilisateur a saisi dans l'entrée nom_utilisateur. Si la requête renvoie 0, aucun nom d'utilisateur ne correspond..
S'il n'y a pas de correspondance, nous ajoutons une variable d'action à notre tableau de résultats et lui donnons une valeur de succès. S'il y a correspondance, nous lui donnons simplement une valeur d'erreur.
$ result ['nom_utilisateur'] = $ _GET ['nom_utilisateur']; // renvoie la réponse echo json_encode ($ result);
Enfin, nous ajoutons une variable nom_utilisateur au tableau de résultats, lui attribuons une valeur de notre variable $ _GET et le renvoyons à main.js à l'aide de la fonction json_encode ()..
Lorsque le JSON est codé et renvoyé dans le fichier main.js, il ressemble au code ci-dessous.
"action": "success", "user_name": "matt"
Cela termine le fichier json, vous pouvez le sauvegarder et le fermer. Vous n'en aurez plus besoin pour cet exemple! Revenez à main.js
Nous avons envoyé la demande, nous avons vérifié si le nom d'utilisateur existe et nous avons envoyé la réponse. Alors quoi maintenant? Nous allons maintenant utiliser Mootools pour trier la réponse et alerter l'utilisateur. Comment main.js voit-il la réponse? Si nous regardons rapidement notre fonction onSuccess, vous remarquerez que la seule variable transmise dans la fonction est la réponse. C'est la variable qui héberge maintenant votre réponse JSON. Veuillez ajouter ce code dans notre fonction onSuccess.
if (response.action == 'success') // Nous sommes bons! else // Le nom d'utilisateur est pris, aïe?! alert ('Nom d'utilisateur pris'); Nous n'avons pas été en mesure de vérifier si notre petite application fonctionnait même actuellement, prenons donc une seconde pour faire un test rapide. Pointez votre navigateur sur index.php et tapez mat dans votre entrée nom_utilisateur. Une fois que vous avez fini de taper, mat une alerte devrait apparaître en disant Nom d'utilisateur pris. Vous pouvez maintenant supprimer cette alerte. ce n'est plus nécessaire.
Les alertes sont ennuyeuses. Ils sont laids, ils ne sont pas très conviviaux. Les alertes sont mauvaises! Nous avons besoin d'un moyen d'alerter l'utilisateur de manière simple, élégante et conviviale. Ouvrez votre style.css et ajoutez des styles à votre saisie.
input.success border: 3px solid # 9ad81f; input.error border: 3px solid # b92929;
Nous avons nos styles, et nous recevons une réponse, changeons le style des entrées en fonction de la réponse.
$ ('nom_utilisateur'). removeClass ('error'); $ ('nom_utilisateur'). addClass ('succès'); 
Nous prenons notre entrée et nous nous assurons que Mootools puisse la trouver en utilisant $ (). Après cela, nous ajoutons / supprimons nos classes. Nous nous assurons de supprimer la classe d'erreur si le script l'a déjà ajoutée à notre entrée, puis nous ajoutons la classe de réussite. Cela empêche les scripts d'ajouter plusieurs classes à l'entrée et de lui donner l'aspect de input.error.success.error.success. Pour la réponse qui génère une erreur, inversez simplement l'ordre d'ajout / suppression..
Faites un test. La zone de saisie doit avoir un contour vert jusqu'à ce que vous entriez mat comme un nom d'utilisateur. La zone de saisie doit alors virer au rouge.
C'est tout. C'est la version de base de ce script. Si vous le souhaitez, vous pouvez arrêter de lire maintenant et montrer vos nouvelles astuces à vos amis, ou continuer à lire. Je vais développer le script pour le rendre un peu plus convivial.
À l'heure actuelle, le script est activé à chaque fois qu'un utilisateur relâche une clé. Que se passe-t-il si vous obligez les utilisateurs à avoir des noms d'utilisateur de plus de 3 caractères? En fait, nous gaspillons 3 requêtes alors qu'en réalité, nous pouvons simplement dire au script de ne pas être déclenché à moins que la valeur d'entrée ne dépasse 3 caractères. Cela réduira le nombre de demandes envoyées au script JSON.!
… Le début de notre événement de nom d'utilisateur… var input_value = this.value; if (input_value.length> 3) … Demander un événement…… La fin de notre événement de nom d'utilisateur…
Si nous encapsulons notre requête avec le code ci-dessus, elle ne sera déclenchée que lorsque la valeur en entrée est supérieure à 3. Premièrement, nous plaçons la valeur dans notre variable à l'aide de this.value. ce représente notre entrée nom_utilisateur. Ensuite, nous vérifions si la longueur de notre valeur est supérieure à 3. Nous le faisons en utilisant input_value.length. Faites un test rapide.
Rappelez-vous que dans notre fichier JSON, nous renvoyions notre valeur de nom d'utilisateur avec notre réponse. C'est pourquoi. Ouvrez index.php et ajoutez un p juste en dessous de notre entrée.
Maintenant que nous avons notre p avec un identifiant de réponse, nous pouvons faire en sorte que Mootools y insère du texte. Ouvrez main.js et placez ce code dans la fonction onSuccess.
$ ('response'). set ('html', ''+ response.user_name +' est disponible'); 
Mootools prend $ ('response') et utilise la fonction set () pour insérer du texte. La première option est quel type de données définissons-nous. Cela peut être soit HTML ou texte. Parce que nous envoyons un tag sont un résultat, nous utilisons HTML. Nous utilisons response.user_name pour extraire la variable user_name de notre réponse JSON afin de maintenir l'utilisateur à jour. Pour la section d'erreur, copiez le morceau de code et modifiez un peu le texte pour indiquer à l'utilisateur que le nom d'utilisateur est utilisé..
À l'heure actuelle, même si nous disons que le nom d'utilisateur est pris, l'utilisateur peut toujours soumettre le formulaire. Cela signifie que vous devrez utiliser PHP pour effectuer un autre niveau de vérification des erreurs. Vous voulez toujours vous assurer que vous utilisez PHP pour effectuer un autre niveau de vérification des erreurs car il est possible pour les gens de contourner la désactivation du bouton. Plus il y a de couches de sécurité, mieux c'est! Ouvrez index.php et trouvez notre bouton de soumission. Permet de le désactiver!
Nous avons donné au bouton de soumission un identifiant de bouton de soumission afin que Mootools puisse lui parler. Près de la balise de fermeture, nous avons également ajouté désactivée. Si vous pointez votre navigateur sur index.php et essayez de cliquer sur le bouton, vous remarquerez que rien ne se passera. Le formulaire a été désactivé. Ouvrez main.js
$ ('submit_button'). disabled = false; Si nous ajoutons ce morceau de code dans notre zone response.success, le bouton sera activé. Ajoutez-le simplement à la section reponse.error, remplacez false par true et testez-le. Lorsque le nom d'utilisateur est disponible, vous devriez pouvoir cliquer sur le bouton. Une fois pris, le bouton devrait être désactivé.
L'utilisateur a inséré du texte, puis supprimé tout le texte de l'entrée. Si vous remarquez que toutes les alertes restent à l'écran. C'est un peu brouillon. Nous devrions probablement résoudre ce problème. Ouvrez main.js.
… La fin de notre événement de nom d'utilisateur… $ ('nom_utilisateur'). AddEvent ('flou', fonction (e) if (this.value == ") $ ('nom_utilisateur'). RemoveClass ('succès') ; $ ('nom_utilisateur'). removeClass ('erreur'); $ ('réponse'). set ('html', "); $ ('submit_button'). disabled = true;); Lorsque l'utilisateur s'éloigne de l'entrée, l'événement est déclenché. brouiller. Si la valeur de la zone de saisie est vide, toutes les classes sont supprimées, la réponse p est définie sur vide et le bouton est désactivé. Joli et rangé!
J'espère que ce tutoriel a permis de vous familiariser avec certains principes fondamentaux lors de l'utilisation de requêtes JSON simples et de l'interaction avec des éléments de la page avec Mootools. N'hésitez pas à télécharger le code source! Si vous avez des questions, suivez-moi sur Twitter!
Une dernière remarque, les styles de boutons utilisés dans ce tutoriel sont la propriété de Zurb. Regardez-les, ils font du bon travail!
