Share
Deze tutorial zal je leren hoe je gebruikersnaambeschikbaarheid kunt controleren met Mootools 'Request.JSON en PHP / MySQL
In deze tutorial leert u hoe u Mootools 'Request.JSON-functie gebruikt om een gebruikersnaam tegen een array of database te controleren. In dit voorbeeld gebruiken we een eenvoudige MySQL-database. Ik zal proberen zoveel mogelijk hand te houden als ik kan, maar een beetje ervaring hebben met PHP en MySQL zal een pluspunt zijn.
We gaan een eenvoudige database maken en een tabel toevoegen. Daarna zullen we een gebruikersnaam toevoegen aan de database.
Accentsconagua
CREËER TAFEL INDIEN NIET BESTAAT ajax_users (id INT (2) NOT NULL PRIMARY KEY AUTO_INCREMENT, gebruikersnaam VARCHAR (128) NOT NULL); INVOEGEN IN ajax_users VALUES ('NULL', 'matt'); Woohoo, we hebben een database, een tabel en een enkele gebruikersnaam. Laten we aan de slag gaan met deze tutorial!
Voor de eerste stap zullen we een eenvoudige pagina maken met één invoerveld voor de gebruikersnaam en een verzendknop. Ga je gang en open je favoriete codeerapp - die van mij is Coda - en maak een nieuw leeg document met de naam index.php. Eerst zal ik je de eindresultaatcode voor deze stap laten zien en dan zal ik het in detail uitleggen. Ik vind dat het herschrijven van de code mijzelf helpt om het te houden, maar je kunt het kopiëren en plakken als je wilt.
Nu hebben we een vrij eenvoudige site-indeling. Het zal in stap 2 bij elkaar komen, dus maak je geen zorgen als het er op dit moment niet zo veel uit ziet.
U kunt dit gerust naar eigen inzicht inrichten of het CSS-bestand uit de broncode gebruiken.
We zullen het Mootools-framework in ons php-bestand moeten opnemen. Zonder dit kunnen we geen klassen of functies van Mootools gebruiken voor ons script. Er zijn twee manieren om dit te doen. De eerste manier is om de AJAX-bibliotheken-API van Google te gebruiken om naar het bestand te linken. Je kunt het pad hier bekijken. De Google-bibliotheken bieden u toegang tot veel frameworks, dus kijk eens rond nadat u klaar bent met de tutorial. Om de zaken te versnellen, kunnen we gewoon het stuk code hieronder gebruiken. Plaats dit in uw
sectie van uw php-bestand.De tweede manier is om naar de Mootools-site te gaan
Nu we het Mootools-framework in ons bestand hebben opgenomen, kunnen we doorgaan met het maken van een nieuw bestand met de naam main.js, of hoe je het ook wilt noemen. Zodra dit bestand is gemaakt, kunt u dit opnemen in ons php-bestand.
Ga je gang en plaats dat onderaan ons php-bestand. Als u dit nog niet heeft gedaan, laten we ons bestand main.js openen.
Dit deel kan een beetje lastig worden. Zorg ervoor dat de twee bestanden die u open hebt, index.php en main.js zijn, omdat we heen en weer gaan tussen de bestanden om u een beter idee te geven van hoe Mootools interageert met de elementen in index.php.
Het eerste stukje code dat we gaan toevoegen aan main.js, vertelt ons Mootools-script om wat code uit te voeren wanneer de DOM is geladen.
window.addEvent ('domready', function () // We gaan dit vullen met Mootools goodness); Nu de hoofdactiviteit is geregeld, kunnen we onze handen vies maken.
We moeten een manier bedenken om uit te zoeken wanneer een gebruiker interactie heeft gehad met ons invoerveld voor gebruikersnaam. We doen dit met behulp van evenementen. Gebeurtenissen zijn de manier van Mootools om bepaalde actie (s) uit te voeren wanneer een gebruiker iets doet. Dit kan het klikken op een link, het indrukken van een toets, het loslaten van een toets, het mouseren over enz. Zijn. Voor dit voorbeeld gaan we een gebeurtenis starten wanneer de gebruiker een sleutel in het veld gebruikersnaam vrijgeeft..
Voordat we de gebeurtenis toevoegen, moeten we de gebruikersnaam opgeven en een ID invoeren. Zonder een ID weet Mootools niet over welke input we praten als we zeggen dat het een evenement moet toevoegen.
Ga je gang en voeg een ID toe aan je gebruikersnaaminvoer in index.php
Ok, ik zweer dat we nu wat Mootools gaan coderen. Schakel terug naar main.js. Voeg deze code toe aan uw venstergebeurtenis.
$ ('user_name'). addEvent ('keyup', function () // Dit is wat wordt geactiveerd wanneer de gebruiker een sleutel vrijgeeft binnen de gebruikersnaaminvoer $ ('gebruikersnaam') is wat Mootools vertelt naar welk element we kijken. Het heeft betrekking op de elementen ID.
Daarna gebruiken we .addEvent () om Mootools te vertellen dat we op een bepaald moment iets willen doen. De eerste optie is de gebeurtenis waar we naar kijken. We gebruiken key-up. Er zijn talloze andere evenementen waar we naar kunnen zoeken. Je kunt erover lezen op W3C Schools. Het laatste kleine bit bevat een functie die we zullen gebruiken om enige JavaScript-code uit te voeren wanneer de gebeurtenis wordt afgevuurd.
Nu we het evenement hebben gekoppeld, kunnen we het verzoek samenstellen om te verzenden wanneer het evenement wordt afgevuurd. We gaan dit stuk code binnenste buiten zetten.
... De start van ons evenement ... nieuwe Request.JSON (url: "inc / php / json.php", onSuccess: function (response) ). Get ($ ('signup')); ... Het einde van ons evenement ... Vrij eenvoudig kijken, eh ?! We beginnen met het declareren van ons verzoek. De eerste variabele is url. Dit is het pad naar onze PHP waarin onze JSON-magie is ondergebracht. Voor nu, zet gewoon een pad naar een toekomstig bestand. De tweede variabele is onSuccess. Dit is een functie die wordt geactiveerd als ons verzoek succesvol is. Dit is waar we de meeste van onze resterende code zullen plaatsen. Ons laatste kleine stukje, dat gemakkelijk te overzien is, is de .get ($ ('signup') variabele die achter ons verzoek zit. Dit neemt al onze info van ons formulier in index.php en stuurt het met het JSON-verzoek. Zonder dit verzendt het verzoek geen gegevens en is het vrijwel nutteloos. We hebben het nu nuttig gemaakt!
We moeten waarschijnlijk ons JSON-bestand nu maken, zodat we geen fouten tegenkomen.
Het concept achter ons JSON-bestand is in theorie vrij eenvoudig. Het neemt onze variabelen, doet wat we willen, en stuurt het terug naar ons main.js-bestand, allemaal achter de schermen. Dit is geweldig. Neem een seconde om jezelf te verzamelen.
Ok, nu zijn we allemaal rustig, laten we een nieuw bestand maken met de naam json.php. Als u het pad naar uw main.js-bestand hebt toegevoegd, geeft u dit hetzelfde op en plaatst u het in de juiste map. Open deze sucker omhoog!
// setup een lege variabele // we zullen dit gebruiken als een array om $ result = null terug te sturen;
Eenvoudig toch? De eerste stap is het maken van een nul-variabele die we later zullen gebruiken als een array. Vervolgens moeten we verbinding maken met onze database.
// maak verbinding met de mysql-database mysql_connect ('localhost', 'root', 'root') of die ('Fout bij verbinding met mysql'); mysql_select_db ('tutorials') of die ('Fout bij verbinden met tabel'); We zouden allemaal verbonden moeten zijn. Vul hierboven uw database-informatie in. Controleer het bestand json.php om ervoor te zorgen dat alles naar behoren verloopt. Als de pagina leeg is, zijn we gouden. Als u fouten in de databaseverbinding ziet, hebben we een probleem. Dit is meestal gewoon een verkeerd gespelde host / gebruikersnaam / wachtwoord. Dubbel Check!
// formatteer de variabelen $ user_name = mysql_real_escape_string ($ _ GET ['user_name']); // controleer de database voor alle gebruikers met de naam $ user_name $ grab_user = mysql_query ("SELECT 'user_name' FROM 'ajax_users' WHERE 'user_name' = '$ user_name'"); // controleer of de query iets terugstuurde als (mysql_num_rows ($ grab_user) == 0) // geen gebruiker met die naam $ result ['actie'] = 'succes'; else // oeps, al genomen $ result ['action'] = 'error'; Alle variabelen verzonden naar onze json onze verzonden als $ _GET. Als je eerder met formulieren hebt gewerkt, zou dit niet anders mogen zijn. Als je nog niet eerder met PHP-formulieren hebt gewerkt, kijk dan snel op deze pagina.
We zetten de variabele $ _GET in een nieuwe variabele om alles op te schonen. Door de variabele $ _GET in de functie mysql_real_escape_string () in te pakken, zorgen we ervoor dat de mysql-injectie wordt bestreden. Injectie is slecht!
De volgende is de vraag. We pakken alle rijen uit onze MySQL-database waarin de rij user_name gelijk is aan wat de gebruiker heeft getypt in de invoer user_name. Als de query 0 retourneert, is er geen overeenkomende gebruikersnaam.
Als er geen overeenkomst is, voegen we een actievariabele toe aan onze resultaatset en geven deze een succeswaarde. Als er een overeenkomst is, geven we deze gewoon een foutwaarde.
$ result ['user_name'] = $ _GET ['gebruikersnaam']; // stuur het antwoord terug echo json_encode ($ resultaat);
Ten slotte voegen we een gebruikersnaam-variabele toe aan de resultaatarray en geven deze een waarde van onze variabele $ _GET en sturen deze terug naar main.js met de functie json_encode ().
Wanneer de JSON is gecodeerd en teruggestuurd naar het bestand main.js, ziet het eruit als de onderstaande code
"Actie": "succes", "user_name": "matt"
Dat beëindigt het json-bestand, je kunt het opslaan en sluiten. Je hebt het voor dit voorbeeld niet meer nodig! Schakel terug naar main.js
We hebben het verzoek verzonden, we hebben gecontroleerd of de gebruikersnaam bestaat en we hebben het antwoord verzonden. Dus wat nu? Nu gaan we Mootools gebruiken om het antwoord te doorzoeken en de gebruiker te waarschuwen. Hoe ziet main.js wat het antwoord is? Als we snel terug kijken naar onze onSuccess-functie, zult u merken dat de enige variabele die in de functie wordt doorgegeven respons is. Dit is de variabele waarin uw JSON-antwoord nu is ondergebracht. Voeg deze code toe aan onze onSuccess-functie.
if (response.action == 'success') // We zijn goed! else // Gebruikersnaam is overgenomen, ach ?! alert ('Gebruikersnaam Taken'); We hebben niet kunnen testen of onze kleine applicatie nu al werkt, dus laten we een seconde nemen om een snelle test uit te voeren. Richt uw browser naar index.php en typ mat in de invoer van uw gebruikersnaam. Als je klaar bent met typen, mat een waarschuwing zou pop-up moeten zeggen Gebruikersnaam al in gebruik. U kunt die waarschuwing nu verwijderen; het is niet meer nodig.
Waarschuwingen zijn saai. Ze zijn lelijk, ze zijn niet erg gebruiksvriendelijk. Waarschuwingen zijn slecht! We hebben een manier nodig om de gebruiker op een leuke, ontwerp- en gebruikersvriendelijke manier te waarschuwen voor de gebruiker. Open je style.css en voeg een aantal stijlen toe aan je invoer.
input.success border: 3px solid # 9ad81f; input.error border: 3px solid # b92929;
We hebben onze stijlen en we ontvangen een reactie, laten we de stijl van de ingangen veranderen, afhankelijk van het antwoord.
$ ( 'Gebruikersnaam') removeClass ( 'error.'); $ ( 'Gebruikersnaam') addClass ( 'succes'.);
We nemen onze input en zorgen ervoor dat Mootools het kan vinden met $ (). Daarna voegen we onze klassen toe / verwijderen we deze. We zorgen ervoor dat de foutklasse wordt verwijderd, in het geval het script het al aan onze invoer heeft toegevoegd, dan voegen we de succesklasse toe. Hiermee wordt voorkomen dat de scripts meerdere klassen aan de invoer toevoegen en er zo uitzien als input.error.success.error.success. Voor het antwoord dat een fout veroorzaakt, keert u de volgorde voor toevoegen / verwijderen eenvoudigweg terug.
Geef dat een test. Het invoervak moet een groene omtrek hebben totdat u binnenkomt mat als een gebruikersnaam. Het invoervak moet dan rood worden.
Dat is het. Dat is de blote bottenversie van dit script. Als je wilt, kun je nu stoppen met lezen en je nieuwe trucjes aan je vrienden laten zien, of je kunt doorgaan met lezen. Ik ga het script uitbreiden om het een beetje gebruiksvriendelijker te maken.
Op dit moment wordt het script geactiveerd telkens wanneer een gebruiker een sleutel vrijgeeft. Wat als u gebruikers dwingt gebruikersnamen te hebben die langer zijn dan 3 tekens. We verspillen eigenlijk 3 verzoeken als het echt is, we kunnen het script gewoon vertellen dat het niet moet vuren tenzij de invoerwaarde meer dan 3 tekens lang is. Dit vermindert het aantal verzoeken dat we naar het JSON-script verzenden!
... Het begin van onze gebruikersnaam gebeurtenis ... var input_value = this.value; if (input_value.length> 3) ... Request Event ... ... Het einde van onze gebruikersnaam gebeurtenis ...
Als we ons verzoek met de bovenstaande code inpakken, zal het alleen het verzoek activeren als de invoerwaarde groter is dan 3. Eerst plaatsen we de waarde in onze variabele met behulp van this.value. deze staat voor onze gebruikersnaam-invoer. Vervolgens controleren we of de lengte van onze waarde groter is dan 3. Dit doen we door input_value.length te gebruiken. Geef het een snelle test.
Onthoud dat in ons JSON-bestand we onze gebruikersnaam terugstuurden met onze reactie. Dit is waarom. Open index.php en voeg een p toe onder onze invoer.
Nu we onze p hebben met een id van reactie, kunnen we Mootools er wat tekst in doen invoegen. Open main.js en plaats deze code in de onSuccess-functie.
$ ( 'Response'). Set ( 'html',''+ Response.user_name +' is beschikbaar');
Mootools neemt $ ('antwoord') en gebruikt de functie set () om wat tekst in te voegen. De eerste optie is wat voor soort gegevens we instellen. Dit kan zowel html als tekst zijn. Omdat we een tag is een resultaat, we gebruiken html. We gebruiken response.user_name om de user_name-variabele uit ons JSON-antwoord te halen om de gebruiker up-to-date te houden. Voor de sectie Error, kopieer het stuk code en verander een beetje rond de tekst om de gebruiker te laten weten dat de gebruikersnaam is gebruikt.
Op dit moment kan de gebruiker nog steeds het formulier verzenden, ook al zeggen we dat de gebruikersnaam is ingevoerd. Dit betekent dat je PHP zou moeten gebruiken om een ander niveau van foutcontrole uit te voeren. Je wilt altijd zeker weten dat je PHP gebruikt om een ander niveau van foutcontrole aan te brengen, omdat het mogelijk is dat mensen de knop uitschakelen. Hoe meer beveiligingslagen, hoe beter! Open index.php en vind onze verzendknop. Laat het uitschakelen!
We hebben de submit-knop een ID van gegeven verzendknop zodat Mootools ermee kan praten. Dichtbij de close-tag die we ook hebben toegevoegd invalide. Als u uw browser naar index.php richt en u probeert op de knop te klikken, zult u merken dat er niets zal gebeuren. Het formulier is uitgeschakeld. Open main.js
$ ('submit_button'). disabled = false; Als we dat stuk code toevoegen in ons gebied response.success, wordt de knop ingeschakeld. Voeg het gewoon toe aan de sectie reponse.error, verander false in true en geef het een test. Wanneer de gebruikersnaam beschikbaar is, zou u op de knop moeten kunnen klikken. Wanneer genomen, zou de knoop moeten worden uitgeschakeld.
De gebruiker heeft wat tekst ingevoegd en vervolgens alle tekst uit de invoer verwijderd. Als u merkt dat alle meldingen op het scherm blijven staan. Dit is een beetje rommelig. Dat moeten we waarschijnlijk oplossen. Open main.js.
... Het einde van onze gebruikersnaam gebeurtenis ... $ ('user_name'). AddEvent ('vervagen', functie (e) if (this.value == ") $ ('user_name'). RemoveClass ('success') ; $ ('user_name'). removeClass ('error'); $ ('response'). set ('html', "); $ ('submit_button'). disabled = true;); Wanneer de gebruiker weg klikt van de invoer, wordt de gebeurtenis geactiveerd vervagen. Als de waarde van het invoervak leeg is, verwijderen we alle klassen, stelt u het antwoord p in op leeg en schakelt u de knop uit. Netjes!
Ik hoop dat deze zelfstudie u heeft geholpen enkele van de basisprincipes te leren bij het gebruik van eenvoudige JSON-verzoeken en interactie met elementen op de pagina met Mootools. Download de broncode! Als je vragen hebt, volg me dan op Twitter!
Nog een laatste opmerking: de knopstijlen die in deze zelfstudie worden gebruikt, zijn eigendom van Zurb. Bekijk ze, ze doen geweldig werk!
