Share
SMS è una tecnologia mondiale utilizzata da quasi tutti con un telefono cellulare. Nonostante abbia una portata molto maggiore rispetto al mercato degli smartphone, la programmazione degli SMS riceve molto meno copertura e spesso rimane incapitalizzata. In questo tutorial su più parti, ti mostrerò come creare un modulo di registrazione al sito web che consenta agli utenti di inserire un numero di cellulare. Quindi ti mostrerò come utilizzare PHP per la verifica del numero di telefono sul lato server per verificare che il numero di cellulare che l'utente ha inserito sia effettivamente il suo telefono cellulare. Lungo la strada, utilizzeremo jQuery per eseguire la validazione lato client e CodeIgniter come framework di sviluppo.
Iniziamo con una panoramica della soluzione. L'utente accederà a un modulo di iscrizione, selezionerà un paese e inserirà un numero di telefono cellulare. Dopo aver inviato il modulo di registrazione, l'utente dovrà inserire un codice di verifica inviato al numero di cellulare inserito per attivare il nuovo account. Se l'utente chiude la pagina prima di inserire il codice di verifica e successivamente acconsente nuovamente al modulo di registrazione, il modulo del codice telefono verrà comunque visualizzato. Ok, iniziamo!
Scarica CodeIgniter da www.codeigniter.com. Quindi, estrai la cartella e copiala sul webroot del tuo server web (devi avere accesso a un server web in grado di analizzare PHP per completare questo tutorial). La copia sul webroot è facoltativa, ma così facendo ci aiuterà a navigare meglio nei file sorgente.
Nella directory dell'applicazione, accedere alla directory di configurazione e aprire config.php. Questa è la configurazione principale, in cui è necessario impostare alcune impostazioni, come nel seguente codice:
$ config ['base_url'] = "http: // localhost / sending_sms /"; ... $ config ['index_page'] = "index.php"; ... $ config ['uri_protocol'] = "AUTO";
Quindi, apri database.php nella stessa cartella di configurazione e completa i seguenti incarichi:
db ['default'] ['hostname'] = "localhost"; $ db ['default'] ['username'] = "root"; $ db ['default'] ['password'] = "__password__"; $ db ['default'] ['database'] = "sms_users";
Infine, apri autoload.php nella cartella config e aggiungiamo alcune librerie e aiutanti di cui abbiamo bisogno:
Accentsconagua
$ autoload ['libraries'] = array ('database'); ... $ autoload ['helper'] = array ('url', 'form', 'cookie'); Creiamo il controller di registrazione. Crea un file chiamato signup.php nella cartella application / controller e iniziamo a codificare la funzionalità di registrazione principale:
la classe Signup estende Controller function Signup () parent :: Controller (); function index () $ this-> load-> view ('signup'); Ho creato la classe di iscrizione, noterai che ha lo stesso nome del file e che estende Controller. Ho creato il indice() funzione che gestirà la visualizzazione del modulo di registrazione. Lo chiamiamo indice perché questa è la funzione predefinita che viene chiamata quando si accede all'url predefinito, senza alcun segmento. Dovremo anche configurare il controller predefinito (registrazione) in config / routes.php:
$ route ['default_controller'] = "registrazione";
Se esegui il test dell'app adesso, visualizzerai un messaggio di errore "Impossibile caricare il file richiesto: signup.php". Questo perché non abbiamo creato la vista di registrazione. Facciamolo ora.
Crea un nuovo file signup.php in apllication / viste cartella e inserire il seguente markup:
Iscriviti '); ?> 'modulo') ); ?> 'name', 'id' => 'name', 'class' => 'required', 'value' => set_value ('name'))); ?> "email", "id" => "email", "class" => "email richiesta", "valore" => set_value ("email"))); ?>Iscriviti al modulo
',''prefisso', 'id' => 'prefisso', 'valore' => set_value ('prefisso'))); ?> 'mobile', 'id' => 'mobile', 'class' => 'digits required', 'value' => set_value ('mobile'))); ?>
Lasciami spiegare alcuni dei markup. Ho aggiunto in testa un file reset.css con il solito meyerweb che ripristina le regole CSS e un file design.css, che codificheremo in un secondo momento. Ho messo questi due in una cartella nella radice chiamata 'Css'. Io uso base_url () per ottenere la radice nel file di visualizzazione.
Ho usato l'helper del modulo per creare l'apertura del modulo, mentre dando l'id della forma 'form', ho creato un paio di etichette e input usando lo stesso helper di forma. Noterai che passo un array come secondo parametro del form_input () funzione con chiavi ID o classe. Per ulteriori informazioni sull'utilizzo del modulo helper, leggere la documentazione di CodeIgniter. ero solito form_dropdown () per creare una casella di selezione, che viene passato una serie di opzioni denominate paesi $. Non abbiamo ancora questo array, ma lo faremo anche un po 'più tardi.
Crea il file design.css nella directory css e inserisci apllication / viste cartella e inserisci le seguenti regole css:
body background-color: #CFCFCF; imbottitura: 0px; margine: 0px; font-size: 12px; famiglia di font: Helvetica, Verdana, Arial, sans-serif; #wrap width: 400px; margin-left: auto; margin-right: auto; margin-top: 40px; background-color: #ECECEC; bordo: solido 1px #FCFCFC; imbottitura: 10px; h2 margin-bottom: 10px; font-size: 18px; label display: block; input, selezionare width: 380px; imbottitura: 5px; margin-bottom: 10px; seleziona width: 390px; #prefix width: 50px; margin-right: 10px; margin-bottom: 0px; display: inline; #mobile larghezza: 305 px; display: inline; input.submit background-color: # E0E0E0; bordo: solido 1px # C5C5C5; larghezza: 140 px; font-weight: bold; margin-top: 10px; input.error, select.error margin-bottom: 0px; border: solid 1px #FFCCCC; div.error padding: 5px; background-color: #ffeeee; border: solid 1px #FFCCCC; colore: # ff0000; div.ok padding: 5px; background-color: #CCFFCC; border: solid 1px # 44CC44; color: # 336633; margin-bottom: 10px;
Ho creato lo stile div wrap, centrandolo impostando margin-left e margin-right su auto. Ho quindi stilizzato gli input, assicurandomi che fossero coerenti su tutti i browser, e quindi creato 3 classi di errore: .error, .ok e input.error. Lo useremo con il plugin di convalida jQuery. Ho anche usato il padding 5px dove mi sentivo necessario per lo styling.
Se esegui il test adesso, riceverai un avviso che diceva "Paesi non definiti" e "argomento non valido fornito per foreach ()". Come aggiungiamo i paesi? Bene, potremmo incorporarli direttamente sulla selezione, ma utilizzeremo invece un file di configurazione. Ciò garantisce che possiamo modificare facilmente e rapidamente qualsiasi codice paese. Ho copiato la tabella con i codici paese da countrycode.org in un nuovo file e ho usato un po 'di jQuery per elaborare tutti i contenuti in una singola stringa, dandomi il file di configurazione finale. Non entrerò nei dettagli. Se vuoi sapere, lascia un commento. Crea un nuovo file chiamato "countries.php" nel application / config cartella e aggiungere i paesi nell'array #config utilizzando il seguente modello:
$ config = array (); $ config ["] ="; $ config ['93 '] =' Afghanistan '; $ config ['355'] = 'Albania'; $ config ['213'] = 'Algeria'; ... $ config ['967'] = 'Yemen'; $ config ['260'] = 'Zambia'; $ config ['263'] = 'Zimbabwe';
Ho usato i codici prefisso come chiavi nell'array. Come accediamo a questo nella vista? Caricheremo questo particolare file di configurazione nella funzione controller indice() abbiamo creato in precedenza:
function index () $ this-> config-> load ('countries', true); $ data ['countries'] = $ this-> config-> item ('countries'); $ this-> load-> view ('signup', $ data); Ho usato '$ this-> config-> load ()' per caricare la configurazione. Noterai che ho anche passato true come secondo parametro. Questo fa una voce separata chiamata "paesi" nella configurazione globale. Se non si passa true, le impostazioni di configurazione (l'array dalla configurazione) vengono aggiunte all'array di configurazione globale. Dopodiché assegniamo semplicemente l'articolo di configurazione a $ data ['countries'], che viene quindi riconosciuto dalla vista come $ countries. Passerò anche l'array $ data alla vista come secondo parametro. Se testate la pagina ora, otterrete tutti i paesi nella casella di selezione! Bene bene?
È tempo di fare un po 'di jQuery. Useremo il plugin di validazione jQuery per questo. Questo plugin è già presente nella CDN di Microsoft, quindi lo otterremo da lì, così come jQuery dal CDN di Google. Abbiamo anche bisogno del plugin per i metadati per scrivere le classi direttamente in html:
Il plug-in di validazione funziona fornendo un nome di classe all'input: necessario per richiedere valori non vuoti, e-mail per la convalida di un indirizzo email, cifre per input numerici, e altro per cui non entrerò. Noterai che ho codificato le classi negli input, basta guardare l'html all'inizio. Se provi ora, vedrai che ottieni un errore div dopo l'input con una classe di .errore che ho codificato nel css. Ho anche codificato il input.error classe, poiché l'input non valido viene assegnato a .errore anche la classe. Questo convalida il modulo, se l'utente ha abilitato JavaScript.
Ora utilizzeremo un evento intelligente per modificare il valore dell'input del prefisso quando l'utente seleziona un Paese. Questo viene fatto solo a scopo visivo, poiché nel backend otterremo il prefisso dal valore del paese, ma questo mostra all'utente come inserire il suo telefono. Facciamolo ora:
Ok, ho creato una funzione per l'evento change della select e assegnato il valore dell'opzione selezionata al valore di input del prefisso. Non è un grosso problema, ma rende la nostra forma di registrazione davvero semplice.
Questo è tutto ciò di cui abbiamo bisogno per la vista di registrazione. Creiamo la funzione di attivazione e la vista.
Questa è la pagina che l'utente vedrà dopo aver registrato con successo. Ci sarà un messaggio che gli dice di controllare il suo cellulare perché gli abbiamo mandato un codice che deve inserire. Nel controller signup.php, crea una nuova funzione chiamata attivare():
function activate () $ data = array (); $ data ['error'] = "; $ this-> load-> view ('activate', $ data); Nel caso in cui l'attivazione non sia corretta, ho definito una variabile di errore da utilizzare nella vista. Questa pagina sarà accessibile dopo aver inserito correttamente i dettagli dell'utente e aver inviato l'SMS. Creeremo anche un nuovo file chiamato activate.php nel applicativi / viste cartella e inserire il seguente markup:
Attivare Conferma il cellulare
Il tuo account è stato creato. Un sms è stato inviato al tuo cellulare con un codice di attivazione a 5 cifre. Per favore inserisci il codice per completare la registrazione:'modulo') ); ?> "code", "id" => "code", "class" => "digit required", "value" => set_value ("code"))); ?>
Se non hai ricevuto l'sms, clicca qui per inviarlo di nuovo
Il markup è piuttosto semplice qui. Ho incluso lo stesso plugin jQuery e di convalida. All'interno dell'evento document.ready, ho chiamato jquery.validate () come nella prima pagina. Utilizzeremo la convalida per la convalida del codice di autorizzazione. Sbiadisco anche il messaggio div, per mostrare un messaggio di successo. Inserisco anche un nome di classe 'required' e 'digit' per restringere il campo di input ai numeri e ai valori non vuoti. C'è anche un messaggio con un'opzione per l'utente di inviare nuovamente il codice di attivazione, ma non entrerò in questa funzionalità, in quanto è molto simile alla registrazione di base.
Creiamo la funzione che elaborerà e inserirà i dati nel database. Useremo anche la libreria di validazione. È importante avere la convalida sul server, poiché alcune persone possono disattivare JavaScript e quindi la convalida non funzionerà. Questo è un fallback che ci assicura che non avremo dati non validi nella tabella. Il processo di funzione è di seguito:
function process () $ this-> load-> library ('form_validation'); if ($ this-> form_validation-> run ()) $ signup = array (); $ signup ['name'] = $ this-> input-> post ('name'); $ signup ['email'] = $ this-> input-> post ('email'); $ signup ['country'] = $ this-> input-> post ('country'); $ signup ['mobile'] = $ this-> input-> post ('country'). $ this-> input-> post ('mobile'); // genera il codice di attivazione univoco mt_rand (); $ signup ['activation'] = rand (11111, 99999); // inserisce in db $ this-> db-> insert ('users', $ signup); // invia auth sms set_cookie ('signed', $ this-> db-> insert_id (), 86500); // reindirizza il reindirizzamento ('registrati / attiva'); else $ this-> config-> load ('countries', true); $ data ['countries'] = $ this-> config-> item ('countries'); $ this-> load-> view ('signup', $ data); Bene, questo è un sacco di codice! Passiamo attraverso tutte le parti principali:
Per prima cosa cariciamo la libreria di validazione del modulo. Successivamente utilizziamo la validazione del modulo correre() funzione per verificare i valori corretti. Se tutti gli input passano, creiamo un array con tutti i dati del post che utilizzano $ This-> input-> Post ( 'input_name') e inserire i dati in una tabella chiamata utenti, che faremo in un momento. Una cosa da notare qui è che ho anche generato il codice di autenticazione. Io uso mt_rand () per seminare il generatore casuale e generare un numero univoco di 5 cifre. Lo facciamo correndo rand () per generare un numero tra 11111 e 99999. Questo ci dà sempre un numero di 5 cyphers in lunghezza. Non ho usato 10000 perché possiamo ottenere un numero che ripete i suoi cyphers, come 10002, che non sembra troppo casuale. Ho anche impostato un cookie chiamato 'firmato' con il valore dell'ID di inserimento dall'inserimento effettivo nel database e quindi reindirizzare l'utente alla funzione di attivazione. Se alcuni campi non sono validi, cariciamo nuovamente i Paesi e carichiamo la vista di registrazione. Se guardi la vista di registrazione dall'inizio ti accorgerai che la uso valore impostato() per ottenere il valore utilizzato dall'ultima registrazione. Quindi, se c'è un campo non valido, il resto dei campi sarà riempito con gli ultimi dati. Ma c'è una riga che dobbiamo aggiornare nella vista di registrazione:
Ho sostituito il terzo parametro con $ _POST [ 'country'], assicurandosi che non mostri un avviso con @. Questo imposterà l'opzione di selezione a quella che è stata selezionata prima dell'invio. Se non abbiamo un Paese nei dati del post, non selezioneremo nulla, come nel caso dell'inizio della registrazione.
Ok, scommetto che mi chiederai: in che modo il server sa qual è il formato giusto per la convalida sul lato server? Bene, dobbiamo creare le regole per la convalida. Fortunatamente, CodeIgniter ti permette di scriverli in un file di configurazione chiamato form_validation.php nel application / config cartella. Crea il file se non esiste già e inserisci quanto segue:
$ config = array (array ('campo' => 'nome', 'etichetta' => 'Nome', 'regole' => 'richiesto'), array ('campo' => 'email', 'etichetta' = > 'Email', 'regole' => 'richiesto | valid_email | callback_check_email_exists'), array ('campo' => 'paese', 'etichetta' => 'Paese', 'regole' => 'richiesto'), array ('campo' => 'mobile', 'etichetta' => 'cellulare', 'regole' => 'richiesto | numerico')); Io uso questo array multidimensionale per impostare le regole corrispondenti per la convalida. Ad esempio, per il campo nome, utilizzo la chiave "campo" per impostare le regole per il campo nome, la chiave "etichetta" per l'impostazione del nome del campo nel messaggio di errore (se presente) e le "regole" chiave per impostare le regole. Separo le regole con un catalizzatore di tubi (cioè '|'). Per ulteriori informazioni sulle regole disponibili, consultare la documentazione di convalida del modulo nella guida dell'utente. Creo anche un callback definito dall'utente (callback_check_email_exists) per verificare se esiste l'e-mail. Aggiunta richiama_ al nome della regola cerca una funzione nel controller e la chiama. Questa funzione verificherà l'esistenza dello stesso indirizzo e-mail nel database e la fonte è:
function check_email_exists ($ email) $ rs = $ this-> db-> where ('email', $ email) -> count_all_results ('users'); $ this-> form_validation-> set_message ('check_email_exists', "Siamo spiacenti, questa email esiste già!"); se ($ rs < 1 ) return true; return false; Questa è una semplice funzione che accetta un argomento (il valore controllato) e restituisce true o false a seconda del formato. Controlliamo se vi è un risultato con l'indirizzo e-mail nella tabella e, se esiste, restituiamo false. Dobbiamo restituire true se vogliamo validare e false per invalid, quindi il nome della funzione è un po 'akward.
Non pensare nemmeno a testare l'atto ora! Otterrai un brutto errore perché non abbiamo creato il tavolo! Bene, puoi semplicemente scaricare il codice sorgente e importare la tabella utenti da Users.sql file o crearlo con i seguenti comandi:
CREATE TABLE 'users' ('uid' INT UNSIGNED NOT NULL AUTO_INCREMENT, 'name' TEXT NOT NULL, 'email' TEXT NOT NULL, 'country' INT NOT NULL, 'mobile' TESTO NON NULL, 'attivazione' TESTO NON NULL, 'active' INT NOT NULL, PRIMARY KEY ('uid')); Esegui questo codice in phpMyAdmin e avrai la tabella creata.
Se testate il codice ora, avrete tutta la convalida corretta. È sufficiente disabilitare JavaScript per provare la convalida del server. Non entrerai con dati non validi! ti ho avvertito!
Questa è la fine della prima parte. La prossima volta, nella seconda parte di questa serie, copriremo effettivamente l'invio di SMS utilizzando un servizio di gateway SMS di terze parti. Spero ti sia piaciuta la mia guida e ti ringrazio per aver controllato tutto!
