Come codificare un modulo di iscrizione con la conferma via email

In questo tutorial, creeremo un modulo di registrazione utente che aggiunge un utente a un database, quindi invia un'email di conferma che l'utente deve fare clic prima che il suo account venga attivato.

Bisogno di aiuto?

Questo tutorial ti guiderà da zero, ma se preferisci, puoi utilizzare uno dei tanti moduli di iscrizione via email già pronti su Envato Market. Ecco alcune delle opzioni più popolari. 

1. Popup di sottoscrizione semplice

Il semplice modulo di registrazione jQuery Plugin raccoglierà l'indirizzo email del visitatore sul tuo sito web in modo efficace e accattivante. Ha un sacco di opzioni di personalizzazione opzionali che puoi configurare in pochi minuti.


2. Hype: modulo di registrazione SmartR

Hype è un modulo di registrazione SmartR, preconfigurato e aggiunto a qualsiasi pagina in un solo clic. Sfrutta la potenza dei tuoi utenti e delle loro reti per aumentare attivamente le iscrizioni e far crescere esponenzialmente la tua base di utenti. 

3. Modulo di iscrizione per email di Beta Splash Page

Questa è una forma molto semplice, ma elegante, per il tuo sito web in cui i visitatori possono inserire il loro indirizzo e-mail (e il nome se lo si desidera) per essere aggiunto a un elenco di contatti. Utilizza AJAX per inviare e convalidare la posta elettronica e funzionerà anche se l'utente ha JavaScript disabilitato.

L'installazione è veloce e indolore. Questo modulo non richiede un database per funzionare in quanto creerà e memorizzerà l'input in un file CSV.

Ci sono molte altre opzioni di modulo di iscrizione via email disponibili su Envato Market, quindi fai una ricerca. O se preferisci crearlo da zero, leggi le istruzioni.

Passaggio 1: il modello

Ho incluso il layout di base del sito in modo da non perdere tempo a creare il modulo e a rendere il sito più carino. Entreremo nel codice che è quello per cui sei venuto qui.

Apri la cartella dei modelli di sito e copiala sul tuo localhost o server web.

Aprire index.php e dai un'occhiata veloce Vedrai un semplice modulo con 3 ingressi. Questi sono i campi che stiamo per acquisire. Vogliamo il nome utente, la loro password e la loro e-mail. Puoi scegliere di acquisire altri elementi quando gli utenti si registrano, ma questi sono i 3 elementi barebone di cui abbiamo bisogno.


Passaggio 2: impostazione del database MySQL

Apri PHPMyAdmin o qualsiasi altro programma tu usi per gestire il tuo database MySQL e creare un nuovo database. Puoi chiamarlo come preferisci. Ora vogliamo creare le righe che contengono le informazioni dell'utente e le informazioni di conferma. Per questo creiamo due tabelle. Utenti e conferma.

CREATE TABLE 'users' ('id' int (11) NOT NULL auto_increment, 'username' varchar (50) NOT NULL default ", 'password' varchar (128) NOT NULL default", 'email' varchar (250) NOT NULL default ", 'active' binary (1) NOT NULL default '0', PRIMARY KEY ('id')) ENGINE = MyISAM AUTO_INCREMENT = 27 DEFAULT CHARSET = utf8;

Il nostro primo tavolo ha 5 file. Il primo è l'ID che viene dato all'utente al momento della registrazione. È impostato su incremento automatico in modo che a ciascun utente venga assegnato un ID univoco. Il prossimo è il nome utente, la password e l'ID. L'ultima riga ci consente di impostare lo stato attivo dell'utente. Quando creiamo la riga utente per la prima volta, lo stato attivo verrà impostato su 0. Ciò significa che l'account utente è attualmente inattivo. Una volta che l'utente ha confermato il suo account, lo imposteremo su 1. Questo indicherà che l'account è attivo.

CREATE TABLE 'confirm' ('id' int (11) NOT NULL auto_increment, 'userid' varchar (128) NOT NULL default ", 'key' varchar (128) NOT NULL default", 'email' varchar (250) default NULL , PRIMARY KEY ('id')) ENGINE = MyISAM AUTO_INCREMENT = 27 DEFAULT CHARSET = utf8;

La nostra seconda tabella è la tabella di conferma. Questo contiene l'ID e l'email dell'utente, nonché una chiave generata a caso che useremo per confermare l'account dell'utente.


Passaggio 3: connessione al database MySQL

Apri inc / php / config.php.

Per prima cosa dobbiamo fare la connessione al database.

mysql_connect ('localhost', 'username', 'password') o die ("Non sono riuscito a connettermi al tuo database, assicurati che le tue informazioni siano corrette!");

A seconda della configurazione, avremo bisogno di modificare alcune variabili. Quindi vai avanti e riempi tutto.

Quindi dobbiamo dire a MySQL quale database vogliamo utilizzare.

mysql_select_db ('your_database_name') o die ("Non sono riuscito a trovare la tabella del database per assicurarmi che sia scritto correttamente!");

Una volta che tutto è stato modificato per adattarsi al tuo database, vai avanti e punta al file index.php sul tuo server.

Se non vedi errori nella parte superiore, siamo tutti collegati.


Passaggio 4: invio del modulo

Ok, ora che siamo tutti collegati al database, abbiamo bisogno di acquisire i dati del modulo in modo che possiamo ottenere l'iscrizione dell'utente.

Ho intenzione di darti il ​​codice e poi spiegare cosa sta succedendo. Successivamente, apporteremo delle modifiche e aggiungeremo funzionalità.

Ecco la base; posiziona questo subito dopo il primo include nella parte superiore di index.php

// controlla se il modulo è stato inviato se (isset ($ _ POST ['signup'])) 

Questa istruzione if sta verificando se il modulo è stato inviato.

Senza questo, il nostro script verrebbe eseguito ogni volta che la pagina viene aggiornata e non lo vogliamo.

Nota: a seconda dell'applicazione o dello stile di codifica generale, questo codice può essere inserito in un file separato a cui si accede quando viene inviato il modulo. Ho inserito il codice tutto in un unico file per mantenere le cose semplici e facili da seguire.


Passaggio 5: pulizia e controllo delle variabili

Vogliamo assicurarci che l'utente abbia inviato dei contenuti effettivi anziché solo un modulo vuoto, quindi eseguiremo alcuni controlli rapidi.

La prima parte è posizionare il $ _POST variabili in variabili più semplici e pulirle per il database. Metti questo nella nostra dichiarazione if.

$ username = mysql_real_escape_string ($ _ POST ['username']); $ password = mysql_real_escape_string ($ _ POST ['password']); $ email = mysql_real_escape_string ($ _ POST ['email']);

mysql_real_escapse_string () fa in modo che l'utente non stia cercando di utilizzare gli apostrofi per accedere al nostro database con l'iniezione MySQL. Ogni volta che vuoi inserire le informazioni in un database che l'utente ha inserito, fallo attraverso mysql_real_escape_string (). Per ulteriori informazioni sull'iniezione di MySQL è possibile leggere questo articolo su Wikipedia

Quindi, abbiamo ripulito le nostre variabili, ora controlliamo per vedere se l'utente ha dimenticato qualsiasi campo.

if (vuoto ($ username)) // inserisci il codice in me per favore if (vuoto ($ password)) // inserisci il codice in me per favore if (vuoto ($ email)) // inserisci il codice in me per favore 

Ora abbiamo tre istruzioni if ​​che stanno controllando se ogni campo è vuoto. Se il campo è vuoto, assegneremo alcune variabili.

Per rendere le cose pulite creeremo un array che manterrà lo stato del processo di registrazione e qualsiasi testo che dobbiamo mostrare all'utente.

Proprio sopra quel pezzo di codice, creiamo un array e alcune variabili.

$ action = array (); $ action ['result'] = null; $ text = array ();

Per prima cosa stiamo creando una matrice vuota chiamata action e quindi impostando un valore di array di risultato. Il risultato avrà un valore di successo o errore. Successivamente creiamo un altro array vuoto chiamato testo. Questo conserverà qualsiasi testo che vogliamo mostrare all'utente durante la registrazione.

In questo momento, le nostre istruzioni if ​​che stanno controllando le nostre variabili non stanno eseguendo alcun codice, quindi andiamo avanti e inseriamo del codice nella prima istruzione if.

Metti questo codice dentro la username se la dichiarazione.

$ action ['result'] = 'error'; array_push ($ text, 'Hai dimenticato il tuo nome utente');

Diciamo che l'utente invia il modulo senza un nome utente. La nostra dichiarazione eseguirà il codice sopra. Per prima cosa imposterà il campo risultato del nostro action array in errore.

Quindi useremo array_push () inserire del testo nella nostra matrice di testo. Utilizzeremo lo stesso pezzo di codice per le ultime due istruzioni "if", quindi copia e incolla il codice nelle ultime due istruzioni if. Probabilmente vorrai cambiare il testo in modo che corrisponda all'istruzione if attuale.

Nota: stiamo usando array_push () nel caso in cui abbiamo più errori nel modulo di invio. Se tutte le istruzioni if ​​vengono eseguite, l'array di testo sarà simile a:

Array ([0] => 'Hai dimenticato il tuo nome utente', [1] => 'Hai dimenticato la password', [2] => 'Hai dimenticato la tua email')

Ora dobbiamo verificare se abbiamo errori in modo da poter continuare con la procedura di registrazione.


Passaggio 6: Nessun errore, registriamo l'utente

Verificheremo se il nostro valore di risultato dell'array azione è impostato su errore.

if ($ action ['result']! = 'error') // nessun errore, continua la registrazione $ password = md5 ($ password);  $ action ['text'] = $ text;

Stiamo anche eseguendo la nostra password attraverso la funzione md5 (). Questo prende la password e restituisce una stringa di 32 caratteri simile a questa: a3470ce826283eca7ce3360d0f26b230. È buona prassi eseguire la password tramite una sorta di funzione di hashing prima di inserirla nel database. Ciò impedisce alle persone di visualizzare le password degli utenti se il tuo database è compromesso.

Un rapido controllo del nostro valore del risultato dell'azione e possiamo continuare con la registrazione. Se il nostro risultato è un errore, ignoreremo tutto questo codice e mostreremo gli errori al nostro utente in modo che possano apportare le modifiche necessarie.

L'ultimo pezzo di questo codice stiamo mettendo i valori della tua matrice di testo nel nostro array di azioni.


Passaggio 7: aggiunta dell'utente al database

Inserisci questo codice nella nostra ultima dichiarazione if.

... Se l'istruzione verifica errori ... // aggiunge al database $ add = mysql_query ("INSERT INTO" VALORI degli utenti (NULL, "$ username", "$ password", "$ email", 0) "); se ($ add) // l'utente è stato aggiunto al database else $ action ['result'] = 'error'; array_push ($ text, 'L'utente non può essere aggiunto al database. Motivo:'. mysql_error ()); =

Noi usiamo mysql_query () e INSERIRE inserire le informazioni degli utenti nel database. Successivamente, creiamo un'altra istruzione if per verificare se l'utente è stato aggiunto al database. Lo facciamo controllando se la variabile $ add è vera o falsa.

Se l'utente viene aggiunto, possiamo continuare con la registrazione; in caso contrario, assegneremo alcune variabili familiari e interromperà la registrazione.

Quando lavoriamo con le query MySQL, usiamo il mysql_error () funzione se sono errori perché aiuta a eseguire il debug di ciò che è sbagliato nelle query. Produrrà errori di testo quando qualcosa non va. Questo è buono!


Passaggio 8: è necessaria la conferma

L'utente ha inviato il modulo, tutto controlla e ora vivono nel database. Vogliamo che l'utente sia in grado di utilizzare il proprio account, quindi configuriamo la conferma.

... se aggiunto check ... // ottieni il nuovo id utente $ userid = mysql_insert_id (); // crea una chiave casuale $ key = $ username. $ email. data ( 'mio'); $ key = md5 ($ key); // aggiungi conferma riga $ confirm = mysql_query ("INSERT INTO" conferma "VALUES (NULL, '$ userid', '$ key', '$ email')"); if ($ confirm) // inviamo l'email else $ action ['result'] = 'error'; array_push ($ text, 'Conferma riga non è stata aggiunta al database. Motivo:'. mysql_error ()); 

Per semplificare le cose, assegniamo il nuovo ID utente a una variabile in modo che possiamo utilizzarlo in seguito. Lo facciamo usando mysql_insert_id (). Questo verrà impostato $ userid a qualunque sia l'ID del nuovo utente.

Successivamente creiamo la chiave casuale per quell'utente specifico. Creiamo una variabile denominata chiave e la riempiamo con un valore di nome utente, e-mail e data. La stringa apparirà come [email protected]. Dopo di che usiamo il md5 () funzione per convertirlo in una stringa casuale che è unica per quell'utente.

utilizzando mysql_query () e INSERIRE di nuovo, inseriamo il nuovo ID utente, la chiave e l'email degli utenti nel database.


Passaggio 9: impostazione dei modelli di posta elettronica

Faremo una pausa dalla codifica PHP e creeremo due nuovi file. Per essere veloce e facile, in realtà utilizzeremo due modelli che ho incluso in questo tutorial. I due file che stiamo per guardare sono signup_template.html e signup_template.txt. Swift ci consente di assegnare un codice HTML e una versione TXT dell'email nel caso in cui il client di posta elettronica degli utenti non supporti le email HTML.

Apri signup_template.html Nota: puoi leggere su HTML nelle email di carsonified. Non stiamo andando a modificare questo file, sto solo andando a spiegare che cosa sta succedendo e quindi si può giocare con esso una volta che il tutorial è completo. La parte più importante di questo file sono i tag che assomigliano NOME UTENTE e confirm.php? email = EMAIL & key = KEY. Scriveremo una funzione che utilizza questo modello e sostituisce tali tag con le variabili del nostro modulo.


Passaggio 10: la funzione Template

Aprire inc / php / functions.php e inserisci questo codice all'interno.

function format_email ($ info, $ format) // imposta la radice $ root = $ _SERVER ['DOCUMENT_ROOT']. '/ dev / tutorial / email_signup'; // cattura il contenuto del modello $ template = file_get_contents ($ root. '/ signup_template.'. $ format); // sostituisci tutti i tag $ template = ereg_replace ('USERNAME', $ info ['username'], $ template); $ template = ereg_replace ('EMAIL', $ info ['email'], $ template); $ template = ereg_replace ('KEY', $ info ['chiave'], $ template); $ template = ereg_replace ('SITEPATH', 'http: //site-path.com', $ template); // restituisce l'html del template return $ template; 

format_email () sta prendendo due variabili che saranno usate in index.php. Il primo è il nostro array di informazioni sul modulo e il secondo è il formato. Abbiamo una variabile di formato in modo che possiamo riutilizzare questo array per entrambe le versioni HTML e TXT del modello.

Per prima cosa impostiamo la radice. Questo punta alla cartella in cui sono ospitati i modelli.

Quindi apriamo il contenuto del nostro modello e lo assegniamo a una variabile.

Ora useremo ereg_replace () per sostituire il nostro NOME UTENTE tag nel nostro modello con il contenuto del nostro modulo. È fondamentalmente solo un sistema di template super semplice.

Infine, restituiamo la variabile del template che contiene tutto l'html.

Spiegazione: in poche parole, format_email () apre i nostri file modello, prende l'HTML e lo assegna alla nostra variabile. Questo è solo un modo più pulito quindi assegnando tutto l'HTML nella funzione stessa.


Passaggio 11: invio dell'e-mail

Scriveremo un'altra funzione per gestire Swift e inviare le e-mail.

function send_email ($ info) // formatta ogni email $ body = format_email ($ info, 'html'); $ body_plain_txt = format_email ($ info, 'txt'); // imposta il mailer $ transport = Swift_MailTransport :: newInstance (); $ mailer = Swift_Mailer :: newInstance ($ transport); $ message = Swift_Message :: newInstance (); $ message -> setSubject ('Welcome to Site Name'); $ message -> setFrom (array ('[email protected] '=>' Nome sito ')); $ message -> setTo (array ($ info ['email'] => $ info ['username'])); $ message -> setBody ($ body_plain_txt); $ message -> addPart ($ body, 'text / html'); $ result = $ mailer-> send ($ message); ritorno $ risultato; 

Proprio come format_email (), invia una email() prende la nostra matrice di informazioni come una variabile. La prima parte della funzione assegniamo due variabili, $ body e $ body_plain_text. Stiamo usando format_email () per assegnare i valori HTML del nostro modello a ciascuna variabile. Ora arriva la parte buona. Abbiamo impostato l'istanza rapida usando Swift_MailTransport: newInstance () e quindi impostare il mailer usando Swift_Mailer :: newInstance ($ trasporti);

Creiamo una nuova istanza del messaggio Swift e iniziamo ad assegnare alcune variabili a questa istanza. Impostiamo l'argomento, dalla posta elettronica e all'indirizzo di posta elettronica e quindi utilizzare setBody () per assegnare la versione testuale dell'e-mail all'istanza del mailer. Per aggiungere la versione HTML che usiamo AddPart (). Il inviare() la funzione si occupa dell'invio dell'e-mail e quindi restituiamo il risultato. Bene, abbiamo la nostra email per creare e inviare funzioni scritte, torniamo a index.php e iniziamo a concludere la registrazione principale.


Passaggio 12: abbiamo inviato? Dobbiamo confermare?

Il nostro ultimo bit avrebbe dovuto essere l'istruzione if che verificava se la riga di conferma fosse stata creata.

Mandiamo l'email e controlliamo se è andato tutto bene.

... se confermi ... // includi la classe rapida include_once 'inc / php / swift / swift_required.php'; // inserisce informazioni in una matrice da inviare alla funzione $ info = array ('username' => $ username, 'email' => $ email, 'chiave' => $ chiave); // invia l'email se (send_email ($ info)) // email inviata $ action ['result'] = 'success'; array_push ($ text, 'Grazie per esserti registrato. Controlla la tua email per conferma!');  else $ action ['result'] = 'error'; array_push ($ text, 'Non posso inviare email di conferma'); 

Senza la classe Swift non possiamo inviare e-mail, quindi nella nostra prima riga includiamo la classe swift. Abbiamo bisogno di inviare le nostre informazioni a entrambe le nostre nuove funzioni, quindi creiamo un nuovo array e assegniamo le nostre variabili ad esso. So che lo so, di più se le dichiarazioni, ma abbiamo bisogno di verificare gli errori per renderlo più facile per gli utenti. Devi sempre presumere che gli utenti faranno ogni possibile errore immaginabile.

Ci avvolgiamo invia una email() funzione in un'altra istruzione if oltre a passare l'array $ info. Se l'e-mail viene inviata assegniamo un valore di successo e ringraziamo l'utente per la registrazione. Se ci sono errori usiamo le variabili familiari. Così ora, abbiamo quasi finito con la registrazione, solo un'ultima funzione deve essere creata. Anche se stiamo assegnando tutte queste variabili di errore / successo e il testo non abbiamo mostrato queste informazioni all'utente.

Torna a functions.php e incolla questo codice.

// ripulire la funzione errors show_errors ($ action) $ error = false; if (! empty ($ action ['result'])) $ error = "
    "." \ n "; if (is_array ($ action ['text'])) // cancella ogni errore foreach ($ action ['text'] come $ text) $ error. ="
  • $ testo

  • "." \ n "; else // errore singolo $ error. ="
  • $ Azione [Testo]

  • "; $ error. ="
"." \ n "; return $ error;

Questo può sembrare confuso, ma in realtà sta solo facendo sembrare belli i nostri successi / errori.

Prima controlla se l'array è vuoto, quindi non stiamo eseguendo il codice quando non è necessario.

Successivamente crea un tag ul e applica il risultato come classe. Questo sarà successo o errore ed è solo estetico.

Quindi controlliamo se la variabile di testo è una matrice o semplicemente una stringa. Se è una stringa, la avvolgiamo in un li. Se si tratta di un array, passiamo in rassegna ogni elemento dell'array e lo avvolgiamo in un li.

Infine, chiudiamo l'ul e restituiamo l'intera stringa.

Se torniamo a index.php e posizioniamo questo codice subito dopo averlo incluso header.php possiamo concludere questa sezione.

... header include ... 

Una breve spiegazione veloce. Stiamo prendendo tutti i valori del nostro array di azioni e passandolo al show_errors () funzione. Se c'è qualche contenuto restituisce una bella lista non ordinata.


Passaggio 13: conferma dell'utente

Dovremmo avere una buona presa su come funziona lo script; quindi per questa prossima sceneggiatura ti darò l'intero pezzo di codice e poi lo esaminerò.

Aprire confirm.php e incolla questo tra l'intestazione include e il tuo show_errors () funzione.

// imposta alcune variabili $ action = array (); $ action ['result'] = null; // validazione rapida / semplice if (vuoto ($ _ GET ['email']) || vuoto ($ _ GET ['key'])) $ action ['result'] = 'error'; $ action ['text'] = 'Ci mancano variabili. Controlla due volte la tua email. ';  if ($ action ['result']! = 'error') // ripulire le variabili $ email = mysql_real_escape_string ($ _ GET ['email']); $ key = mysql_real_escape_string ($ _ OTTIENI ['chiave']); // controlla se la chiave è nel database $ check_key = mysql_query ("SELECT * FROM 'conferma' WHERE 'email' = '$ email' AND 'chiave' = '$ chiave' LIMIT 1") o muore (mysql_error () ); if (mysql_num_rows ($ check_key)! = 0) // ottiene le informazioni di conferma $ confirm_info = mysql_fetch_assoc ($ check_key); // conferma l'e-mail e aggiorna il database degli utenti $ update_users = mysql_query ("UPDATE" users "SET" active "= 1 WHERE" id "=" $ confirm_info [userid] "LIMIT 1") o die (mysql_error ()); // cancella la riga di conferma $ delete = mysql_query ("DELETE FROM 'conferma' WHERE 'id' = '$ confirm_info [id]' LIMIT 1") o muore (mysql_error ()); if ($ update_users) $ action ['result'] = 'success'; $ action ['text'] = 'L'utente è stato confermato. Grazie!';  else $ action ['result'] = 'error'; $ action ['text'] = 'L'utente non può essere aggiornato Motivo:' .mysql_error () ;;  else $ action ['result'] = 'error'; $ action ['text'] = 'La chiave e l'email non sono nel nostro database.'; 

La maggior parte di questo dovrebbe sembrare molto familiare; quindi ho intenzione di saltare avanti e controllare se la chiave è nella sezione del database.

Di nuovo, usiamo mysql_query () per ottenere qualsiasi riga nel database in cui l'e-mail e la chiave sono uguali alle chiavi fornite dall'e-mail dell'utente.

Noi usiamo mysql_num_rows () per verificare se il numero di righe restituite è maggiore di 0.

Se l'e-mail e la chiave sono nel database, prendiamo tutte le informazioni dal database usando mysql_fetch_assoc ().

Ora che l'utente ha confermato il suo account, dobbiamo aggiornare il database e impostare la riga attiva su 1.

Noi usiamo mysql_query () di nuovo, ma invece di INSERIRE noi usiamo AGGIORNARE per aggiornare la riga attiva a 1 dove l'ID utente è uguale al nostro ID utente corrente.

Per pulire tutto usiamo mysql_query () e ELIMINA per rimuovere la riga di conferma dal database. Questo assicura che l'utente non possa tornare a questa pagina e riconfermare. Mantiene anche il database bello e pulito.


Conclusione

Abbiamo coperto molte aree diverse in questo tutorial. Abbiamo scaricato e incluso uno script di terze parti per gestire l'invio delle e-mail, implementato la convalida dei moduli e creato un sistema di template super semplice per personalizzare le nostre e-mail. Se sei nuovo a MySQL abbiamo toccato le tre funzioni più comuni in MySQL quindi non dovresti avere problemi a completare alcuni tutorial più avanzati.


Note finali

  • Ho usato Swift Mailer come script di distribuzione della posta elettronica che può essere scaricato qui: http://swiftmailer.org/
  • Ho anche utilizzato gli stili di pulsante forniti da Zurb. Assicurati di controllare e dare loro un po 'd'amore. http://www.zurb.com/blog_uploads/0000/0485/buttons-02.html

Grazie per la lettura e assicuratevi di farmi visita su Twitter se avete domande!