Share
Denne opplæringen vil lære deg hvordan du sjekker brukernavnetes tilgjengelighet med Mootools 'Request.JSON og PHP / MySQL
I denne opplæringen lærer du hvordan du bruker Mootools 'Request.JSON-funksjon for å sjekke et brukernavn mot en matrise eller database. I dette eksemplet bruker vi en enkel MySQL-database. Jeg vil prøve å gjøre så mye hånd som jeg kan, men å ha en liten opplevelse med PHP og MySQL vil være et pluss.
Vi skal lage en enkel database og legge til et bord. Deretter legger vi til et brukernavn i databasen.
Accentsconagua
CREATE TABLE IF EXISTE ikke ajax_users (id INT (2) IKKE NULL PRIMARY KEY AUTO_INCREMENT, brukernavn VARCHAR (128) IKKE NULL); INSERT TIL ajax_users VALUES ('NULL', 'matt'); Woohoo, vi har en database, et bord og et enkelt brukernavn. La oss komme i gang med denne opplæringen!
For det første trinnet vil vi opprette en enkel side med ett inndatafelt for brukernavnet og en sende-knapp. Gå videre og åpne din favorittkodingsapp - min blir tilfeldigvis Coda - og opprett et nytt tomt dokument kalt index.php. Først vil jeg vise deg sluttresultatskoden for dette trinnet, og så skal jeg forklare det i detalj. Jeg finner at omskriving av koden selv hjelper det med å holde fast, men du kan kopiere og lime inn hvis du vil.
Nå har vi et ganske grunnleggende nettstedslayout. Det begynner å komme sammen i trinn 2, så vær ikke bekymret hvis det ikke ser ut som mye akkurat nå.
Du er velkommen til å utforme dette opp, men du vil, eller bruk CSS-filen fra kildekoden.
Vi kommer til å trenge å inkludere Mootools-rammen i vår php-fil. Uten dette kan vi ikke bruke noen av Mootools klasser eller funksjoner for vårt skript. Det er to måter å gjøre dette på. Den første måten er å bruke Googles AJAX-bibliotek API til å koble til filen. Du kan se banen her. Google-bibliotekene gir deg tilgang til mange rammer, så ta en titt rundt etter at du har gjort opplæringen. For å øke hastigheten, kan vi bare bruke koden nedenfor. Plasser dette i din
delen av php-filen din.Den andre måten er å gå over til Mootools-siden
Nå som vi har Mootools-rammene inkludert i filen, kan vi gå videre og lage en ny fil som heter main.js, eller hva du vil nevne. Når denne filen er opprettet, kan vi inkludere den i vår php-fil.
Gå videre og legg det på bunnen av vår php-fil. Hvis du ikke allerede har det, la oss åpne vår main.js-fil.
Denne delen kan bli litt vanskelig. Pass på at de to filene du har åpnet er index.php og main.js, da vi skal bevege seg frem og tilbake mellom filene for å gi deg en bedre forståelse av hvordan Mootools samhandler med elementene i index.php.
Det første stykket kode vi skal legge til i main.js forteller at Mootools-skriptet skal utføre en kode når DOM har lastet inn.
window.addEvent ('domready', funksjon () // Vi skal fylle dette med Mootools godhet); Nå som hovedvirksomheten er tatt vare på, kan vi få våre hender skitne.
Vi må finne ut hvordan vi kan finne ut når en bruker har interaksjon med vårt brukernavn. Vi gjør dette ved hjelp av hendelser. Hendelser er Mootools 'måte å utføre noen handlinger når en bruker gjør noe. Dette kan inkludere å klikke på en kobling, trykke på en tast, slippe en tast, mousing over etc. For dette eksempelet skal vi brenne en hendelse når brukeren slipper en nøkkel i brukernavnet.
Før vi legger til hendelsen, må vi gi ut brukernavn, skriv inn en ID. Uten en ID vet ikke Mootools hvilken innspilling vi snakker om når vi forteller det å legge til en hendelse.
Gå videre og legg til en ID til brukernavnet ditt i index.php
Ok, jeg sverger at vi skal begynne å kode noen Mootools akkurat nå. Bytt tilbake til main.js. Inne i vinduet ditt, legg til denne koden.
$ ('user_name'). addEvent ('keyup', funksjon () // Dette er det som fyres når brukeren slipper en nøkkel inne i brukernavnet $ ('user_name') er det som forteller Mootools hvilket element vi ser på. Det gjelder elementets ID.
Deretter bruker vi .addEvent () for å fortelle Mootools at vi ønsker å gjøre noe på et tidspunkt. Det første alternativet er det arrangementet vi ser på. Vi bruker keyup. Det er mange andre hendelser vi kan se etter. Du kan lese om dem på W3C Schools. Den siste lille biten har en funksjon som vi vil bruke til å utføre noen JavaScript-kode når hendelsen blir sparket.
Nå som vi har hendelsen koblet sammen, kan vi bygge forespørselen om å sende når arrangementet blir sparket. Vi kommer til å sette dette stykket kode inne i hendelsen.
... Begynnelsen av vår begivenhet ... ny Request.JSON (url: "inc / php / json.php", onSuccess: funksjon (respons) ). Få ($ ('signup')); vårt arrangement ... Ganske enkelt å se, eh ?! Vi starter med å erklære vår forespørsel. Den første variabelen er URL. Dette er veien til vår PHP som huser vår JSON magi. For nå, bare legg inn en bane til en fremtidig fil. Den andre variabelen er onSuccess. Dette er en funksjon som er avfyrt hvis vår forespørsel er vellykket. Det er her vi skal sette mesteparten av vår gjenværende kode. Vår siste liten, som er lett å se over, er variabelen .get ($ ('signup')) som etterlater vår forespørsel. Dette tar all vår info fra vårt skjema i index.php og sender den med JSON-forespørselen. Uten dette sendes forespørselen ikke noen data, og er ganske ubrukelig. Vi har nå gjort det nyttig!
Vi burde trolig gjøre vår JSON-fil akkurat nå, slik at vi ikke kommer inn i noen feil.
Konseptet bak vår JSON-fil er ganske enkelt i teorien. Det tar våre variabler, gjør hva vi vil med det, og sender det tilbake til vår main.js-fil, alt bak kulissene. Dette er fantastisk. Ta et sekund å samle deg selv.
Ok, nå er vi alle rolige, la oss lage en ny fil kalt json.php. Hvis du har lagt til banen til main.js-filen, skal du gi den samme navn og legge den inn i riktig mappe. Åpne denne sucker opp!
// sette opp en tom variabel // vi vil bruke dette som en matrise for å sende tilbake $ result = null;
Enkel rett? Det første trinnet er å opprette en null-variabel som vi senere skal bruke som en matrise. Deretter må vi koble til vår database.
// koble til mysql-databasen mysql_connect ('localhost', 'root', 'root') eller dø ('Feil koble til mysql'); mysql_select_db ('opplæringsprogrammer') eller dø ('Feil å koble til bord'); Vi burde være alle sammenhengende. Fyll ut databasen informasjonen ovenfor. For å sikre at alt kjører jevnt, pek på json.php-filen. Hvis siden er tom, er vi gyldne. Hvis du ser databaseforbindelsesfeil, har vi et problem. Dette er vanligvis bare feilstavet vert / brukernavn / passord. Dobbel sjekk!
// format variablene $ user_name = mysql_real_escape_string ($ _ GET ['user_name']); // sjekk databasen for alle brukere som heter $ user_name $ grab_user = mysql_query ("SELECT" brukernavn "FRA" ajax_users 'WHERE' user_name '=' $ user_name '"); // Sjekk om spørringen returnerte noe hvis (mysql_num_rows ($ grab_user) == 0) // ingen bruker av det navnet $ resultat ['action'] = 'suksess'; ellers // oops, allerede tatt $ result ['action'] = 'error'; Alle variablene sendes til vår json vår sendt som $ _GET. Hvis du har jobbet med skjemaer før, bør dette ikke være noe annet. Hvis du ikke har jobbet med PHP skjemaer før, vennligst ta en rask titt på denne siden.
Vi setter $ _GET-variabelen inn i en ny variabel for å rydde alt opp. Ved å pakke inn $ _GET-variabelen i funksjonen mysql_real_escape_string (), sørger vi for å bekjempe mysql-injeksjon. Injiseringen er dårlig!
Neste er spørringen. Vi tar noen rader fra vår MySQL-database der brukernavnet-raden er lik hva brukeren har skrevet inn i brukernavnet. Hvis spørringen returnerer 0, er det ikke noe navn på brukernavnet.
Hvis det ikke er noen kamp, legger vi til en aktivitetsvariabel i resultatlisten vår og gir den en verdi av suksess. Hvis det er en kamp, gir vi det bare en feilverdi.
$ resultat ['user_name'] = $ _GET ['user_name']; // send svaret tilbake echo json_encode ($ result);
Til slutt legger vi til en variabel for brukernavn til resultatlisten og gir den verdien av $ _GET-variabelen og sender den tilbake til main.js ved hjelp av json_encode () -funksjonen.
Når JSON er kodet og sendt tilbake til main.js-filen, ser det ut som koden nedenfor
"Handling": "suksess", "brukernavn": "matt"
Det slutter json filen, du kan lagre den og lukke den. Du trenger ikke det for dette eksemplet lenger! Bytt tilbake til main.js
Vi har sendt forespørselen, vi har sjekket om brukernavnet eksisterer og vi sendte svaret. Så hva nå? Nå skal vi bruke Mootools for å sortere gjennom svaret og varsle brukeren. Hvordan ser main.js hva svaret er? Hvis vi tar en rask titt tilbake på vår onSuccess-funksjon, vil du legge merke til at den eneste variabelen som passerer i funksjonen, er respons. Dette er variabelen som nå inneholder ditt JSON-svar. Vennligst legg til denne koden i vår onSuccess-funksjon.
hvis (response.action == 'suksess') // Vi er gode! ellers // Brukernavn er tatt, ouch ?! varsling ('Brukernavn tatt'); Vi har ikke vært i stand til å teste om vår lille applikasjon er til og med jobber akkurat nå, så la oss ta et sekund for å gjøre en rask test. Pek nettleseren din til index.php og skriv inn matt inn i brukernavnet ditt. Når du er ferdig med å skrive, matt en advarsel burde popup si Brukernavn tatt. Du kan nå slette det varselet; det er ikke nødvendig lenger.
Varsler er kjedelige. De er stygge, de er ikke veldig brukervennlige. Varsler er dårlige! Vi trenger en måte å varsle brukeren på en fin, design og brukervennlig måte for å varsle brukeren. Åpne din style.css og legg til noen stiler til dine innspill.
input.success border: 3px solid # 9ad81f; input.error border: 3px solid # b92929;
Vi har våre stiler, og vi mottar et svar, vi kan endre inngangsstilen, avhengig av svaret.
$ ( 'Brukernavn') removeClass ( 'feil.'); $ ( 'Brukernavn') addClass ( 'suksess.');
Vi tar vårt innspill og sørger for at Mootools kan finne det ved å bruke $ (). Deretter legger vi til / fjerner våre klasser. Vi sørger for at du fjerner feilklassen i tilfelle skriptet har allerede lagt det til vårt innspill, så legger vi til suksessklassen. Dette stopper skriptene fra å legge til flere klasser til inngangen, og gjør det til å se ut som input.error.success.error.success. For svaret som kaster en feil, må du bare reversere add / remove rekkefølgen.
Gi det en prøve. Inngangsboksen skal ha en grønn oversikt til du kommer inn matt som brukernavn. Inntastingsboksen skal da bli rød.
Det er det. Det er bare bones versjonen av dette skriptet. Hvis du vil, kan du slutte å lese nå og vise de nye triksene dine til vennene dine, eller du kan fortsette å lese. Jeg skal utvide på skriptet for å gjøre det bare litt mer brukervennlig.
For øyeblikket skyves skriptet hver gang en bruker slipper en nøkkel. Hva om du tvinger brukerne til å ha brukernavn lenger enn 3 tegn. Vi sliter i utgangspunktet 3 forespørsler når det egentlig er, kan vi bare fortelle at skriptet ikke skal brennes, med mindre inngangsverdien er mer enn 3 tegn lang. Dette vil redusere antall forespørsler vi sender til JSON-skriptet!
... Begynnelsen av brukernavnet vår hendelse ... var input_value = this.value; hvis (input_value.length> 3) ... Request Event ... ... Slutten av brukernavnet vårt ...
Hvis vi pakker inn forespørselen vår med koden ovenfor, vil den bare brenne forespørselen når inngangsverdien er større enn 3. Først legger vi inn verdien i vår variabel ved hjelp av denne.verdien. dette representerer vårt brukernavnnavn. Deretter sjekker vi om lengden på verdien vår er større enn 3. Vi gjør dette ved å bruke input_value.length. Gi det en rask prøve.
Husk i vår JSON-fil, vi sendte vårt brukernavn tilbake med vårt svar. Det er derfor. Åpne opp index.php og legg til et p under vår innspilling.
Nå som vi har vår p med et svar, kan vi lage Mootools sette inn noen tekst i den. Åpne main.js og legg denne koden inne i onSuccess-funksjonen.
$ ( 'Svar'). Innstilt ( 'html',''+ Response.user_name +' er tilgjengelig');
Mootools tar $ ('respons') og bruker funksjonen set () til å sette inn tekst. Det første alternativet er hva slags data vi setter inn. Dette kan enten være html eller tekst. Fordi vi sender en tag er et resultat, vi bruker html. Vi bruker response.user_name for å ta tak i brukernavnet variabelen fra vårt JSON-svar for å holde brukeren oppdatert. For feil delen, kopier over stykke kode og bytt rundt teksten litt for å la brukeren vite at brukernavnet er tatt.
Akkurat nå, selv om vi sier at brukernavnet er tatt, kan brukeren fremdeles sende skjemaet. Dette betyr at du må bruke PHP til å gjøre et annet nivå av feilkontroll. Du vil alltid sørge for at du bruker PHP for å gjøre et annet nivå av feilkontroll, da det er mulig for folk å komme seg rundt deaktiveringen av knappen. Jo flere lag av sikkerhet, desto bedre! Åpne opp index.php og finn vår sendeknapp. Lar deaktivere den!
Vi ga ut sende inn en ID-kode submit_button slik at mootools kan snakke med det. I nærheten av den nære merket har vi også lagt til funksjonshemmet. Hvis du peker nettleseren din til index.php og prøver å klikke på knappen, vil du legge merke til at ingenting vil skje. Skjemaet er deaktivert. Åpne opp main.js
$ ('submit_button'). deaktivert = false; Hvis vi legger til koden i vårt response.success-område, vil den aktivere knappen. Bare legg det til reponse.error delen, endre falsk til sann og gi den en test. Når brukernavnet er tilgjengelig, bør du kunne klikke på knappen. Når det er tatt, må knappen deaktiveres.
Brukeren har lagt inn litt tekst, og deretter slettet all tekst fra inngangen. Hvis du oppdager at alle varsler forblir på skjermen. Dette er litt rotete. Vi burde trolig fikse det. Åpne main.js.
... Enden av brukernavnet hendelse ... $ ('user_name'). AddEvent ("uskarphet", funksjon (e) if (this.value == ") $ ('user_name'). RemoveClass ('suksess') ; $ ('user_name'). removeClass ('error'); $ ('respons') sett ('html', '); $ (' submit_button ') .aktivert = true;); Når brukeren klikker vekk fra inngangen, vil den brenne hendelsen uklarhet. Hvis verdien for innboks boksen er tom, fjerner vi alle klasser, sett svaret p for å tømme og deaktivere knappen. Hyggelig og ryddig!
Jeg håper denne opplæringen har bidratt til å lære deg noen av grunnleggende når du bruker enkle JSON-forespørsler og interagerer med elementer på siden med Mootools. Du er velkommen til å laste ned kildekoden! Hvis du har noen spørsmål, følg meg på Twitter!
Et siste notat, knappestablene som brukes i denne opplæringen, tilhører Zurb. Sjekk dem ut, de gjør bra arbeid!
