Share
Questo tutorial ti insegnerà come verificare la disponibilità del nome utente con Request.JSON e PHP / MySQL di Mootools
In questo tutorial imparerai come usare la funzione Request.JSON di Mootools per controllare un nome utente su un array o database. In questo esempio useremo un semplice database MySQL. Cercherò di tenere il maggior numero di mani possibile, ma avere un po 'di esperienza con PHP e MySQL sarà un vantaggio.
Stiamo andando a creare un semplice database e aggiungere una tabella. Dopodiché aggiungeremo un nome utente nel database.
Accentsconagua
CREATE TABLE SE NON ESISTE ajax_users (id INT (2) NOT NULL PRIMARY KEY AUTO_INCREMENT, user_name VARCHAR (128) NOT NULL); INSERIRE in ajax_users VALUES ('NULL', 'matt'); Woohoo, abbiamo un database, una tabella e un singolo nome utente. Iniziamo con questo tutorial!
Per il primo passo creeremo una semplice pagina con un campo di input per il nome utente e un pulsante di invio. Vai avanti e apri la tua app di codifica preferita, la mia è Coda, e crea un nuovo documento vuoto chiamato index.php. Per prima cosa ti mostrerò il codice del risultato finale per questo passaggio e poi lo spiegherò in dettaglio. Trovo che ri-scrivendo il codice me lo aiuti a restare, ma puoi copiare e incollare se vuoi.
Ora abbiamo un layout del sito piuttosto semplice. Inizierà a venire insieme nel passaggio 2 quindi non preoccuparti se non sembra davvero tanto adesso.
Sentiti libero di disegnarlo come preferisci, oppure usa il file CSS dal codice sorgente.
Avremo bisogno di includere il framework Mootools nel nostro file php. Senza questo, non possiamo usare nessuna delle classi o delle funzioni di Mootools per il nostro script. Ci sono due modi per farlo. Il primo modo è utilizzare l'API AJAX Libraries di Google per collegarsi al file. È possibile visualizzare il percorso qui. Le librerie di Google ti danno accesso a molti framework, quindi dai un'occhiata dopo aver completato il tutorial. Per velocizzare le cose, possiamo semplicemente usare il codice qui sotto. Metti questo nel tuo
sezione del tuo file php.Il secondo modo è di andare al sito di Mootools
Ora che abbiamo il framework Mootools incluso nel nostro file, possiamo andare avanti e creare un nuovo file chiamato main.js, o qualunque cosa tu voglia nominare. Una volta che questo file è stato creato, includilo nel nostro file php.
Vai avanti e posizionalo nella parte inferiore del nostro file php. Se non lo hai già fatto, apriamo il nostro file main.js.
Questa parte può essere un po 'complicata. Assicurati che i due file che hai aperto siano index.php e main.js dato che ci sposteremo avanti e indietro tra i file per darti un'idea migliore di come Mootools interagisce con gli elementi in index.php.
Il primo pezzo di codice che stiamo per aggiungere a main.js dice al nostro script Mootools di eseguire del codice quando il DOM ha caricato.
window.addEvent ('domready', function () // Abbiamo intenzione di riempirlo con la bontà di Mootools); Ora che l'attività principale è curata, possiamo sporcarci le mani.
Dobbiamo trovare un modo per scoprire quando un utente ha interagito con il nostro campo di inserimento del nome utente. Lo facciamo usando gli eventi. Gli eventi sono il modo in cui Mootools esegue alcune azioni quando un utente fa qualcosa. Questo può includere il clic su un link, la pressione di un tasto, il rilascio di un tasto, il passaggio del mouse ecc. Per questo esempio verrà generato un evento quando l'utente rilascia una chiave nel campo nome utente.
Prima di aggiungere l'evento, è necessario fornire un nome utente per inserire un ID. Senza un ID, Mootools non sa di quale input stiamo parlando quando gli diciamo di aggiungere un evento.
Vai avanti e aggiungi un ID al tuo nome utente inserito in index.php
Ok, giuro che inizieremo a codificare alcuni Mootools in questo momento. Torna a main.js. All'interno dell'evento della tua finestra, aggiungi questo codice.
$ ('user_name'). addEvent ('keyup', function () // Questo è ciò che viene generato quando l'utente rilascia una chiave all'interno dell'ingresso username $ ('user_name') è ciò che dice a Mootools quale elemento stiamo guardando. Si riferisce all'ID degli elementi.
Dopo di che usiamo .addEvent () per dire a Mootools che vogliamo fare qualcosa ad un certo punto. La prima opzione è l'evento che stiamo cercando. Stiamo usando la chiave. Ci sono un sacco di altri eventi che possiamo cercare. Puoi leggere su di loro alle scuole W3C. L'ultimo bit contiene una funzione che useremo per eseguire qualche codice JavaScript ogni volta che l'evento viene attivato.
Ora che abbiamo collegato l'evento, possiamo compilare la richiesta da inviare quando l'evento viene attivato. Metteremo questo pezzo di codice dentro l'evento.
... L'inizio del nostro evento ... nuovo Request.JSON (url: "inc / php / json.php", onSuccess: function (response) ). Get ($ ('signup')); ... La fine di il nostro evento ... Abbastanza semplice, eh ?! Iniziamo dichiarando la nostra richiesta. La prima variabile è url. Questo è il percorso del nostro PHP che ospita la nostra magia JSON. Per ora, basta inserire un percorso per un file futuro. La seconda variabile è onSuccess. Questa è una funzione che viene attivata se la nostra richiesta ha esito positivo. Questo è dove metteremo la maggior parte del nostro codice rimanente. La nostra ultima piccola parte, che è facile da consultare, è la variabile .get ($ ('signup')) che segue la nostra richiesta. Questo prende tutte le nostre informazioni dal nostro modulo in index.php e lo invia con la richiesta JSON. Senza questo, la richiesta non sta inviando alcun dato ed è praticamente inutile. Ora lo abbiamo reso utile!
Probabilmente dovremmo creare il nostro file JSON in questo momento in modo da non incorrere in errori.
Il concetto alla base del nostro file JSON è in teoria piuttosto semplice. Prende le nostre variabili, fa tutto ciò che vogliamo con esso e poi lo rimanda al nostro file main.js, tutto dietro le quinte. Questo è bellissimo. Prenditi un secondo per riprenderti.
Ok, ora siamo tutti calmi, creiamo un nuovo file chiamato json.php. Se hai aggiunto il percorso al tuo file main.js, chiamalo allo stesso modo e inseriscilo nella cartella corretta. Apri questo ventosa!
// imposta una variabile vuota // la useremo come array per inviare $ result = null;
Semplice, giusto? Il primo passo è la creazione di una variabile nulla che useremo come array in seguito. Successivamente, dobbiamo connetterci al nostro database.
// connettersi al database mysql mysql_connect ('localhost', 'root', 'root') o die ('Errore durante la connessione a mysql'); mysql_select_db ('tutorials') o die ('Errore durante la connessione alla tabella'); Dovremmo essere tutti collegati. Inserisci le informazioni del tuo database qui sopra. Per assicurarti che tutto funzioni correttamente, punta al tuo file json.php. Se la pagina è vuota, siamo d'oro. Se vedi errori di connessione al database, abbiamo un problema. Questo di solito è solo un host / username / password errato. Doppio controllo!
// formatta le variabili $ user_name = mysql_real_escape_string ($ _ GET ['user_name']); // controlla il database per tutti gli utenti denominati $ nome_utente $ grab_user = mysql_query ("SELECT 'nome_utente' FROM 'ajax_users' WHERE 'user_name' = '$ user_name'"); // controlla se la query ha restituito qualcosa se (mysql_num_rows ($ grab_user) == 0) // nessun utente con quel nome $ result ['action'] = 'success'; else // oops, già preso $ result ['action'] = 'error'; Tutte le variabili inviate a nostro json sono state inviate come $ _GET. Se hai già lavorato con i moduli, questo non dovrebbe essere diverso. Se non hai ancora lavorato con i moduli PHP, dai un'occhiata a questa pagina.
Stiamo inserendo la variabile $ _GET in una nuova variabile per pulire tutto. Con il wrapping della variabile $ _GET nella funzione mysql_real_escape_string (), ci stiamo assicurando di combattere l'iniezione di mysql. L'iniezione è cattiva!
La prossima è la query. Stiamo prendendo qualsiasi riga dal nostro database MySQL dove la riga user_name è uguale a qualsiasi cosa l'utente abbia digitato nell'input user_name. Se la query restituisce 0, non esiste alcuna corrispondenza nome utente.
Se non c'è corrispondenza, aggiungiamo una variabile di azione alla nostra matrice di risultati e gli diamo un valore di successo. Se c'è una corrispondenza, diamo semplicemente un valore di errore.
$ result ['user_name'] = $ _GET ['user_name']; // invia la risposta indietro echo json_encode ($ result);
Infine, aggiungiamo una variabile user_name alla matrice dei risultati e gli diamo un valore della nostra variabile $ _GET e la rimandiamo a main.js usando la funzione json_encode ().
Quando il JSON è codificato e rispedito al file main.js, sembra il seguente codice
"Azione": "successo", "nome_utente": "matt"
Finisce il file json, puoi salvarlo e chiuderlo. Non ne avrai più bisogno per questo esempio! Torna a main.js
Abbiamo inviato la richiesta, abbiamo controllato se il nome utente esiste e abbiamo inviato la risposta. Così quello che ora? Ora useremo Mootools per ordinare la risposta e avvisare l'utente. In che modo main.js vede qual è la risposta? Se diamo una rapida occhiata alla nostra funzione onSuccess, noteremo che l'unica variabile passata nella funzione è la risposta. Questa è la variabile che ora ospita la tua risposta JSON. Si prega di aggiungere questo codice all'interno della nostra funzione onSuccess.
if (response.action == 'success') // Siamo bravi! else // Il nome utente è preso, ouch ?! alert ('Username Taken'); Non siamo stati in grado di testare se la nostra piccola applicazione funziona anche ora, quindi diamo un secondo per fare un test rapido. Punta il tuo browser su index.php e digita opaco nel tuo input user_name. Una volta che hai finito di scrivere, opaco un avviso dovrebbe popup dicendo Username già in uso. Ora puoi cancellare quell'avviso; non è più necessario.
Gli avvisi sono noiosi. Sono brutti, non sono molto user friendly. Gli avvisi sono cattivi! Abbiamo bisogno di un modo per avvisare l'utente in un modo piacevole, di design e intuitivo per avvisare l'utente. Apri il tuo style.css e aggiungi alcuni stili ai tuoi input.
input.success border: 3px solid # 9ad81f; input.error border: 3px solid # b92929;
Abbiamo i nostri stili e riceviamo una risposta, permettiamo di modificare lo stile degli input in base alla risposta.
$ ( 'User_name') removeClass ( 'errore.'); $ ( 'User_name') addClass ( 'successo.');
Stiamo prendendo il nostro input e assicurandoci che Mootools possa trovarlo usando $ (). Successivamente, aggiungiamo / rimuoviamo le nostre classi. Ci assicuriamo di rimuovere la classe di errore in caso lo script lo abbia già aggiunto al nostro input, quindi aggiungiamo la classe di successo. Ciò impedisce agli script di aggiungere più classi all'input e di renderlo simile a input.error.success.error.success. Per la risposta che genera un errore, è sufficiente invertire l'ordine di aggiunta / rimozione.
Dai una prova. La casella di input dovrebbe avere un contorno verde finché non si entra opaco come nome utente. La casella di input dovrebbe quindi diventare rossa.
Questo è tutto. Questa è la versione nuda di questo script. Se vuoi, puoi smettere di leggere adesso e mostrare i tuoi nuovi trucchi ai tuoi amici, oppure puoi continuare a leggere. Ho intenzione di espandere la sceneggiatura per renderlo un po 'più user friendly.
In questo momento, lo script viene attivato ogni volta che un utente rilascia una chiave. Che cosa succede se imponi agli utenti di avere nomi utente più lunghi di 3 caratteri. Fondamentalmente stiamo sprecando 3 richieste quando in realtà, possiamo solo dire allo script di non sparare a meno che il valore di input non sia più lungo di 3 caratteri. Questo ridurrà il numero di richieste che stiamo inviando allo script JSON!
... L'inizio del nostro evento nome utente ... var input_value = this.value; if (input_value.length> 3) ... Request Event ... ... La fine del nostro evento nome utente ...
Se avvolgiamo la nostra richiesta con il codice sopra riportato, la richiesta verrà attivata solo quando il valore di input è maggiore di 3. Per prima cosa inseriamo il valore nella nostra variabile usando this.value. Questo rappresenta il nostro input user_name. Quindi controlliamo se la lunghezza del nostro valore è maggiore di 3. Lo facciamo usando input_value.length. Fai un test veloce.
Ricorda che nel nostro file JSON stavamo inviando il nostro nome utente con la nostra risposta. Ecco perché. Apri index.php e aggiungi un p proprio sotto il nostro input.
Ora che abbiamo il nostro p con un id di risposta, possiamo fare in modo che Mootools inserisca del testo in esso. Apri main.js e inserisci questo codice nella funzione onSuccess.
$ ( 'Risposta'). Set ( 'html',''+ Response.user_name +' è disponibile');
Mootools accetta $ ('risposta') e usa la funzione set () per inserire del testo. La prima opzione è che tipo di dati stiamo impostando. Questo può essere html o testo. Perché stiamo inviando un il tag è un risultato, stiamo usando html. Stiamo utilizzando response.user_name per prendere la variabile user_name dalla nostra risposta JSON per mantenere aggiornato l'utente. Per la sezione errori, copia il pezzo di codice e modifica un po 'il testo per far sapere all'utente che il nome utente è preso.
In questo momento, anche se stiamo dicendo che il nome utente è preso, l'utente può ancora inviare il modulo. Questo significa che dovresti usare PHP per fare un altro livello di controllo degli errori. Devi sempre assicurarti di utilizzare PHP per fare un altro livello di controllo degli errori, poiché è possibile che le persone aggirino la disattivazione del pulsante. Più livelli di sicurezza, meglio è! Apri index.php e trova il nostro pulsante di invio. Lo disabilita!
Abbiamo fornito il pulsante di invio un ID di submit_button in modo che Mootools possa parlarci. Vicino al tag vicino abbiamo anche aggiunto Disabilitato. Se punti il tuo browser su index.php e prova a fare clic sul pulsante, noterai che non accadrà nulla. Il modulo è stato disabilitato. Apri main.js
$ ('submit_button'). disabled = false; Se aggiungiamo quel pezzo di codice nella nostra area response.success, abiliterà il pulsante. Basta aggiungerlo alla sezione reponse.error, cambiare false in true e dargli un test. Quando il nome utente è disponibile, dovresti essere in grado di fare clic sul pulsante. Al termine, il pulsante dovrebbe essere disabilitato.
L'utente ha inserito del testo e poi ha cancellato tutto il testo dall'input. Se noti che tutti gli avvisi rimangono sullo schermo. Questo è un po 'complicato. Dovremmo probabilmente aggiustarlo. Apri main.js.
... La fine del nostro evento nome utente ... $ ('user_name'). AddEvent ('blur', function (e) if (this.value == ") $ ('user_name'). RemoveClass ('success') ; $ ('user_name'). removeClass ('error'); $ ('response'). set ('html', "); $ ('submit_button'). disabled = true;); Quando l'utente fa clic fuori dall'input, l'evento verrà attivato sfocatura. Se il valore della casella di input è vuoto, rimuoviamo tutte le classi, impostiamo la risposta p a vuoto e disabilitiamo il pulsante. Bello e ordinato!
Spero che questo tutorial ti abbia aiutato ad insegnarti alcune delle nozioni fondamentali quando usi semplici richieste JSON e interagisci con elementi sulla pagina con Mootools. Sentiti libero di scaricare il codice sorgente! Se hai domande, seguimi su Twitter!
Un'ultima nota, gli stili di pulsante usati in questo tutorial sono di proprietà di Zurb. Controllali, fanno un ottimo lavoro!
