Share
Acest tutorial vă va învăța cum să verificați disponibilitatea numelui de utilizator cu solicitarea de la Mootools.JSON și PHP / MySQL
În acest tutorial veți învăța cum să utilizați funcția Request.JSON a Mootools pentru a verifica un nume de utilizator împotriva unui tablou sau a unei baze de date. În acest exemplu vom folosi o bază de date MySQL simplă. Voi încerca să fac tot ce pot, dar o experiență mică cu PHP și MySQL va fi un plus.
Vom crea o bază de date simplă și vom adăuga o masă. După aceasta, vom adăuga un nume de utilizator în baza de date.
Accentsconagua
CREAȚI TABELUL DACĂ NU EXISTA ajax_users (id INT (2) NOTĂ NULL PRIORITATE AUTO_INCREMENT, nume utilizator VARCHAR (128) NOT NULL); INSERTAȚI ÎN ajax_users VALUES ('NULL', 'matt'); Woohoo, avem o bază de date, un tabel și un singur nume de utilizator. Să începem cu acest tutorial!
Pentru primul pas vom crea o pagină simplă cu un câmp de introducere pentru numele de utilizator și un buton de trimitere. Continuați și deschideți aplicația dvs. de codare preferată - a mea se întâmplă să fie Coda - și să creați un nou document gol numit index.php. În primul rând vă voi arăta codul rezultat final pentru acest pas și apoi îl voi explica în detaliu. Cred că re-scrierea codului mă ajută să rămână, dar puteți copia și lipi dacă doriți.
Acum avem un aspect destul de simplu al site-ului. Va începe să se întâlnească la pasul 2, așa că nu vă faceți griji dacă într-adevăr nu arată prea mult acum.
Simțiți-vă liber să stilizați acest lucru oricum doriți sau să utilizați fișierul CSS din codul sursă.
Va trebui să includem cadrul Mootools în fișierul php. Fără acest lucru, nu putem folosi nici una din clasele sau funcțiile lui Mootools pentru scenariul nostru. Există două modalități de a face acest lucru. Prima modalitate este să utilizați API-ul Google AJAX Libraries pentru a vă conecta la fișier. Puteți vedea calea aici. Bibliotecile Google vă oferă acces la mai multe cadre, așa că aruncați o privire după ce ați terminat tutorialul. Pentru a accelera lucrurile, putem folosi doar codul de mai jos. Plasați-l în dvs.
secțiunea din fișierul dvs. php.Cea de-a doua cale este să vă îndreptați spre site-ul Mootools
Acum, că avem cadrul Mootools inclus în fișierul nostru, putem continua să creăm un fișier nou numit main.js sau orice doriți să-l denumiți. Odată ce acest fișier a fost creat, permiteți-l să îl includeți în fișierul nostru php.
Mergeți mai departe și plasați-l în partea de jos a fișierului php. Dacă nu ați făcut deja acest lucru, hai să ne deschidem fișierul principal.js.
Această parte poate deveni puțin complicată. Asigurați-vă că cele două fișiere pe care le-ați deschis sunt index.php și main.js, deoarece vom merge înapoi și înapoi între fișiere pentru a vă oferi o idee mai bună despre modul în care Mootools interacționează cu elementele din index.php.
Prima bucată de cod pe care o vom adăuga la main.js ne spune scriptului Mootools să execute un anumit cod când DOM-ul a încărcat.
window.addEvent ('domready', funcția () // Vom umple acest lucru cu bunătatea lui Mootools); Acum, când se ocupă de afacerea principală, putem să ne murdărim mâinile.
Trebuie să găsim o modalitate de a afla când un utilizator a interacționat cu câmpul de introducere a numelui de utilizator. Facem asta folosind evenimente. Evenimentele reprezintă modul în care Mootools efectuează anumite acțiuni atunci când un utilizator face ceva. Acest lucru poate include clic pe un link, apăsând o cheie, eliberând o cheie, mușcând peste etc. Pentru acest exemplu vom declanșa un eveniment când utilizatorul eliberează o cheie în câmpul nume de utilizator.
Înainte de a adăuga evenimentul, trebuie să oferim utilizatorilor un ID. Fără un ID, Mootools nu știe despre ce intră despre noi atunci când îi spunem să adauge un eveniment.
Mergeți mai departe și adăugați un ID la introducerea numelui de utilizator în index.php
Ok, jur că vom începe să codificăm niște Mootools chiar acum. Treceți înapoi la main.js. În interiorul evenimentului ferestrei, adăugați acest cod.
$ ('user_name') addEvent ('keyup', function () // Aceasta este ceea ce este concediat atunci când utilizatorul eliberează o cheie în intrarea numele de utilizator $ ('user_name') este ceea ce îi spune lui Mootools la care element ne uităm. Se referă la ID-ul elementelor.
După aceea, folosim .addEvent () pentru a le spune Mootools că vrem să facem ceva la un moment dat. Prima opțiune este evenimentul pe care îl urmărim. Folosim tastatura. Există multe alte evenimente pe care le putem căuta. Puteți citi despre ele la școlile W3C. Ultimul bit mic deține o funcție pe care o vom folosi pentru a executa un cod JavaScript ori de câte ori evenimentul este declanșat.
Acum, dacă avem evenimentul conectat, putem să construim cererea de trimitere atunci când evenimentul este declanșat. Vom pune această bucată de cod în interiorul evenimentului.
... Începerea evenimentului nostru ... new Request.JSON (url: "inc / php / json.php", onSuccess: funcția (răspunsul) ) get ($ ('signup')); evenimentul nostru ... Destul de simplu, eh ?! Începem prin a declara cererea noastră. Prima variabilă este url. Aceasta este calea către PHP care găzduiește magia noastră JSON. Pentru moment, puneți-vă într-o cale către un fișier viitor. A doua variabilă este onSuccess. Aceasta este o funcție care este concediată dacă cererea noastră are succes. Aici vom pune majoritatea codului rămas. Ultimul nostru mic, ușor de analizat, este variabila .get ($ ('signup')) care depășește solicitarea noastră. Acest lucru ia toate informațiile din formularul nostru în index.php și îl trimite cu cererea JSON. Fără aceasta, cererea nu trimite date și este aproape inutilă. Acum am făcut-o utilă!
Probabil că ar trebui să facem fișierul nostru JSON chiar acum, pentru a nu face erori.
Conceptul din spatele fișierului nostru JSON este destul de simplu în teorie. Este nevoie de variabilele noastre, face tot ceea ce ne dorim cu ea, și apoi o trimite înapoi la fișierul nostru principal.js, toate în spatele scenei. Asta e grozav. Luați o secundă pentru a vă aduna.
Ok, acum suntem cu toții liniștiți, permiteți crearea unui nou fișier numit json.php. Dacă ați adăugat calea către fișierul principal.js, denumiți-l la fel și plasați-l în folderul corespunzător. Deschide-l pe acest fraier!
// configurați o variabilă martor // vom folosi acest lucru ca array pentru a trimite înapoi $ result = null;
Simplu drept? Primul pas este crearea unei variabile nula pe care o vom folosi mai târziu ca array. Apoi, trebuie să ne conectăm la baza noastră de date.
// conectați la baza de date mysql mysql_connect ('localhost', 'root', 'root') sau mori ('Error connecting to mysql'); mysql_select_db ("tutoriale") sau mor ("Eroare la conectare la tabel"); Ar trebui să fim toți conectați. Completați informațiile de bază de mai sus. Pentru a vă asigura că totul funcționează fără probleme, indicați fișierul json.php. Dacă pagina este goală, suntem de aur. Dacă vedeți erori de conectare la baza de date, avem o problemă. Acesta este, de obicei, doar o gazdă greșită / nume de utilizator / parolă. Verificați dublu!
// formata variabilele $ user_name = mysql_real_escape_string ($ _ GET ['nume utilizator]]; // verificați baza de date pentru toți utilizatorii numiți $ user_name $ grab_user = mysql_query ("SELECT 'user_name' FROM 'ajax_users' WHERE 'user_name' = '$ user_name'"); // verifica dacă interogarea a returnat ceva dacă mysql_num_rows ($ grab_user) == 0) // niciun utilizator cu numele respectiv $ result ['action'] = 'succes'; altceva // oops, deja luată $ result ['action'] = 'error'; Toate variabilele trimise la json nostru trimis ca $ _GET. Dacă ați mai lucrat cu formulare înainte, acest lucru nu ar trebui să fie diferit. Dacă nu ați mai lucrat cu formulare PHP înainte, vă rugăm să aruncați o privire rapidă la această pagină.
Vom plasa variabila $ _GET intr-o noua variabila pentru a curata totul. Prin împachetarea variabilei $ _GET în funcția mysql_real_escape_string (), ne asigurăm că vom combate injectarea mysql. Injecția este rea!
Următorul este interogarea. Suntem apuca orice rânduri din baza de date MySQL unde rândul de nume de utilizator este egal cu orice a introdus userul în intrarea user_name. Dacă interogarea returnează 0, nu există un nume de utilizator care să se potrivească.
Dacă nu există nici o potrivire, adăugăm o variabilă de acțiune la matricea de rezultate și îi oferim o valoare de succes. Dacă există un meci, îi dăm pur și simplu o valoare de eroare.
$ result ['user_name'] = $ _GET ['numele utilizatorului']; // trimite răspunsul echo echo json_encode ($ rezultat);
În final, adăugăm o variabilă nume_profil la matricea de rezultate și îi dăm o valoare variabilei $ _GET și o trimitem înapoi la main.js folosind funcția json_encode ().
Când codul JSON este codificat și trimis înapoi în fișierul principal.js, acesta arată ca și codul de mai jos
"Acțiune": "succes", "user_name": "mat"
Acest lucru termină fișierul json, îl puteți salva și îl puteți închide. Nu veți mai avea nevoie de acest exemplu! Reveniți la main.js
Am trimis solicitarea, am verificat dacă numele de utilizator există și am trimis răspunsul. Și ce acum? Acum vom folosi Mootools pentru a sorta răspunsul și a alerta utilizatorul. Cum vede main.js răspunsul? Dacă ne uităm înapoi la funcția onSuccess, veți observa că singura variabilă care a trecut în funcție este răspunsul. Aceasta este variabila care găzduiește acum răspunsul dvs. JSON. Adăugați acest cod în cadrul funcției onSuccess.
dacă (answer.action == 'succes') // Suntem buni! altfel // Numele de utilizator este luat, ouch ?! alertă ("Utilizat de utilizator"); Nu am putut să testați dacă aplicația noastră mică funcționează chiar acum, deci vă permite să faceți o scurtă încercare. Punctați browserul la index.php și tastați Matt în intrarea dvs. de nume de utilizator. După ce terminați tastarea, Matt o alertă ar trebui să afișeze popup Nume de utilizator alocat. Acum puteți șterge această alertă; nu mai este nevoie.
Alertele sunt plictisitoare. Sunt urâți, nu sunt foarte prietenoși. Alertele sunt rele! Avem nevoie de o modalitate de a alerta utilizatorul într-un mod frumos, de design și ușor de utilizat, pentru a avertiza utilizatorul. Deschideți stil.css și adăugați câteva stiluri la intrarea dvs..
input.success border: 3px solid # 9ad81f; input.error border: 3px solid # b92929;
Avem stilurile noastre și primim un răspuns, permite schimbarea stilului de intrare în funcție de răspuns.
$ ( 'USER_NAME') removeClass ( 'eroare').; $ ( 'USER_NAME') addClass ( 'succes').;
Ne luăm contribuția și ne asigurăm că Mootools o poate găsi folosind $ (). După aceasta adăugăm / eliminăm clasele noastre. Ne asigurăm că eliminați clasa de eroare incase script-ul a adăugat-o deja la intrarea noastră, apoi adăugăm clasa de succes. Acest lucru împiedică scripturile să adauge mai multe clase la intrare și să o arate ca input.error.success.error.success. Pentru răspunsul care aruncă o eroare, inversați pur și simplu comanda add / remove.
Dă-i un test. Caseta de introducere ar trebui să aibă o contur verde până când intrați Matt ca nume de utilizator. Caseta de introducere ar trebui să devină apoi roșie.
Asta e. Aceasta este versiunea oaselor goale a acestui script. Dacă vrei, poți să nu mai citești acum și să-ți dezvălui noile trucuri prietenilor tăi sau poți continua să citești. Voi extinde scenariul pentru a deveni un pic mai ușor de utilizat.
În acest moment, scriptul se declanșează de fiecare dată când un utilizator eliberează o cheie. Ce se întâmplă dacă forțați utilizatorii să aibă nume de utilizator mai mari de 3 caractere. În realitate, pierdem 3 cereri când putem spune că scenariul nu se declanșează decât dacă valoarea de intrare este mai mare de 3 caractere. Acest lucru va reduce numărul de cereri pe care le trimitem la scriptul JSON!
... Începutul evenimentului cu numele de utilizator ... var input_value = this.value; dacă (input_value.length> 3) ... Cerere de solicitare ... ... Sfârșitul evenimentului cu numele de utilizator ...
Dacă împliniți cererea cu codul de mai sus, aceasta va declanșa solicitarea doar atunci când valoarea de intrare este mai mare de 3. Mai întâi plasăm valoarea în variabila noastră folosind this.value. acest reprezintă inputul nostru de nume de utilizator. Apoi verificăm dacă lungimea valorii noastre este mai mare de 3. Facem acest lucru folosind input_value.length. Dă-i un test rapid.
Amintiți-vă în fișierul nostru JSON că trimitem valoarea noastră de utilizator înapoi cu răspunsul nostru. De-aceea. Deschide index.php și adaugă un p chiar sub intrarea noastră.
Acum, când avem p cu un id de răspuns, putem face Mootools să introducă un text în el. Deschideți main.js și plasați acest cod în cadrul funcției onSuccess.
$ ( 'Răspuns'). Set ( 'html',“'+ Response.user_name +' este disponibil');
Mootools ia $ ('răspuns') și folosește funcția set () pentru a insera un text. Prima opțiune este ce fel de date stabiliți. Aceasta poate fi fie html, fie text. Pentru că trimitem un mesaj tag-ul sunt un rezultat, vom folosi html. Utilizăm answer.user_name pentru a apuca variabila user_name din răspunsul JSON pentru a păstra actualizarea utilizatorului. Pentru secțiunea de eroare, copiați peste bucată de cod și schimbați puțin textul pentru a permite utilizatorului să știe că numele de utilizator este luat.
Chiar acum, chiar dacă spunem că numele de utilizator este luat, utilizatorul poate trimite încă formularul. Aceasta înseamnă că va trebui să utilizați PHP pentru a face un alt nivel de verificare a erorilor. Întotdeauna doriți să vă asigurați că utilizați PHP pentru a face un alt nivel de verificare a erorilor, deoarece este posibil ca oamenii să treacă prin dezactivarea butonului. Mai multe straturi de securitate, cu atât mai bine! Deschideți index.php și găsiți butonul nostru de trimitere. Să o dezactivați!
Am dat butonul de trimitere un id de buton de trimitere astfel încât Mootools să poată vorbi cu el. Aproape de eticheta apropiată am adăugat și noi invalid. Dacă îndreptați browserul spre index.php și încercați să faceți clic pe buton, veți observa că nu se va întâmpla nimic. Formularul a fost dezactivat. Deschideți main.js
$ ('submit_button') dezactivat = false; Dacă adăugăm acea bucată de cod în zona noastră de răspuns. Succes, va activa butonul. Pur și simplu adăugați-l la secțiunea reponse.error, schimbați falsul la adevărat și dați-i un test. Când numele de utilizator este disponibil, ar trebui să puteți face clic pe buton. Când este luat, butonul trebuie dezactivat.
Utilizatorul introduce un text și apoi șterge tot textul din intrare. Dacă observați că toate alertele rămân pe ecran. Acest lucru este un pic dezordonat. Ar trebui probabil să rezolvăm asta. Deschideți main.js.
... sfârșitul evenimentului pentru numele de utilizator ... $ ('username_name') addEvent ('blur', funcția (e) if (this.value == ") $ ('username_name'). ; $ ('nume_utilizator'); $ ('user_name'); removeClass ('error'); $ ('răspuns'); Când utilizatorul face clic pe o intrare, va declanșa evenimentul estompa. Dacă valoarea casetei de intrare este goală, eliminăm toate clasele, setăm răspunsul p la golire și dezactivați butonul. Nisa și ordonată!
Sper că acest tutorial a ajutat să vă învăț câteva dintre elementele fundamentale atunci când utilizați cereri JSON simple și interacționați cu elementele de pe pagina cu Mootools. Simțiți-vă liber să descărcați codul sursă! Dacă aveți întrebări, urmați-mă pe Twitter!
O ultimă notă, stilurile de butoane folosite în acest tutorial sunt proprietatea Zurb. Verifică-le, fac o treabă mare!
