Slik kodes du en registreringsskjema med e-postbekreftelse

I denne opplæringen skal vi opprette et brukeroppmeldingsskjema som legger til en bruker i en database, og sender deretter en bekreftelses e-post som brukeren må klikke på før kontoen blir aktivert.

Trenger litt hjelp?

Denne opplæringen tar deg gjennom prosessen fra bunnen av, men hvis du foretrekker det, kan du bruke en av de mange ferdige e-post påmeldingsskjemaene på Envato Market. Her er noen av de mest populære alternativene. 

1. Enkel abonnementspopp

Den enkle registreringsskjemaet jQuery Plugin vil samle besøkerens e-postadresse på nettstedet ditt på en effektiv og oppmerksomme måte. Den har mange valgfrie tilpasningsalternativer som du kan sette opp på få minutter.


2. Hype: SmartR Signup Form

Hype er en SmartR Sign Up-skjema, forhåndskonfigurert og lagt til en hvilken som helst side med bare ett klikk. Det utnytter kraften til brukerne og deres nettverk for aktivt å øke registreringene og eksponentielt øke brukerbasen din. 

3. Beta Splash Side Email Signup Form

Dette er en veldig enkel, men stilig form for nettstedet ditt der besøkende kan skrive inn sin e-postadresse (og navn om ønskelig) for å bli lagt til i en kontaktliste. Det bruker AJAX til å sende inn og validere e-post og vil også fungere hvis brukeren har JavaScript deaktivert.

Installasjonen er rask og smertefri. Dette skjemaet krever ikke at en database skal fungere som den vil opprette og lagre innspill i en CSV-fil.

Det er mange flere e-postoppmeldingsskjemaer tilgjengelige på Envato Market, så ha en bla. Eller hvis du heller vil lage det selv fra begynnelsen, les videre for instruksjonene.

Trinn 1: Malen

Jeg har tatt med det grunnleggende nettstedet, slik at vi ikke kaster bort tid på å lage skjemaet og gjøre nettstedet ser pent ut. Vi kommer til å komme rett inn i kodingen som er det du kom hit for.

Åpne mappen Nettstedskabelon og kopier den til enten ditt lokalehost eller webserver.

Åpne opp index.php og ta en rask titt. Du ser en enkel form med 3 innganger. Dette er feltene vi skal fange. Vi vil ha brukernavn, passord og e-post. Du kan velge å fange opp andre elementer når brukerne logger på, men disse er de 3 barebones-elementene vi trenger.


Trinn 2: Konfigurere MySQL-databasen

Åpne PHPMyAdmin eller hvilket program du bruker til å administrere MySQL-databasen og opprette en ny database. Du kan nevne dette uansett hva du vil. Nå ønsker vi å lage rader som skal holde vår brukerinformasjon og bekreftelsesinformasjon. For dette lager vi to tabeller. Brukere og Bekreft.

CREATE TABLE 'users' ('id' int (11) IKKE NULL auto_increment, 'brukernavn' varchar (50) IKKE NULL standard "," passord "varchar (128) IKKE NULL standard", "email" varchar (250) IKKE NULL standard "," aktiv "binær (1) IKKE NULL standard '0', PRIMARY KEY ('id')) MOTOR = MyISAM AUTO_INCREMENT = 27 DEFAULT CHARSET = utf8;

Vårt første bord har 5 rader. Den første er IDen som er gitt til brukeren når de registrerer seg. Dette er satt til automatisk inkrement slik at hver bruker får en unik ID. Neste er brukernavnet, passordet og ID-en. Den siste raden lar oss sette brukerens aktive status. Når vi først lager brukerraden, vil den aktive tilstanden være standard til 0. Dette betyr at brukerkontoen for øyeblikket er inaktiv. Når brukeren bekrefter sin konto, vil vi sette dette til 1. Dette vil angi at kontoen er aktiv.

CREATE TABLE 'confirm' ('id' int (11) IKKE NULL auto_increment, 'userid' varchar (128) IKKE NULL standard "," tast "varchar (128) IKKE NULL standard", "e-post" varchar , PRIMARY KEY ('id')) MOTOR = MyISAM AUTO_INCREMENT = 27 DEFAULT CHARSET = utf8;

Vårt andre bord er bekreftelsestabellen. Dette innehar brukerens ID og e-post, samt en tilfeldig generert nøkkel som vi skal bruke for å bekrefte brukerkontoen.


Trinn 3: Koble til MySQL-databasen

Åpne opp / php / config.php.

Først må vi koble til databasen.

mysql_connect ('localhost', 'brukernavn', 'passord') eller dø ("Jeg kunne ikke koble til databasen din, vær sikker på at informasjonen er riktig!");

Avhengig av oppsettet ditt, må vi endre noen få variabler. Så fortsett og fyll ut alt.

Neste må vi fortelle MySQL hvilken database vi vil bruke.

mysql_select_db ('your_database_name') eller dø ("Jeg kunne ikke finne databattabellen sørg for at det er stavet riktig!");

Når alt er blitt redigert for å passe din database, gå videre og pek på index.php-filen på serveren din.

Hvis du ikke ser noen feil øverst, er vi alle koblet til.


Trinn 4: Sende skjemaet

Ok, nå at vi alle er koblet til databasen, må vi fange skjemadataene slik at vi kan få brukeren til å registrere seg.

Jeg skal gi deg koden og deretter forklare hva som skjer. Deretter skal vi gjøre endringer og legge til funksjonalitet.

Her er basen; plasser dette rett etter at den første inneholder øverst på index.php

// Sjekk om skjemaet er sendt hvis (isset ($ _ POST ['signup']))))

Dette hvis setningen sjekker for å se om skjemaet er sendt inn.

Uten dette vil skriptet vårt løpe hver gang siden oppdateres, og vi vil ikke ha det.

Merk: Avhengig av søknaden din eller bare generell koding, kan denne koden plasseres i en egen fil som er tilgjengelig når skjemaet er sendt inn. Jeg har plassert koden alt i en fil for å holde ting enkelt og enkelt å følge med.


Trinn 5: Rengjøring og kontroll av variablene

Vi vil sørge for at brukeren har sendt inn faktisk innhold i stedet for bare et tomt skjema, så vi skal utføre noen hurtige sjekker.

Den første delen er å plassere $ _POST variabler i enklere variabler og rydde dem for databasen. Legg dette inn i vår if-setning.

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

mysql_real_escapse_string () sørger for at brukeren ikke prøver å bruke apostrofer for å få tilgang til vår database med MySQL-injeksjon. Når du vil sette inn informasjon i en database som brukeren har lagt inn, vennligst kjør det gjennom mysql_real_escape_string (). For mer informasjon om MySQL-injeksjon kan du lese denne artikkelen på Wikipedia

Så, vi har ryddet opp våre variabler, nå la oss sjekke for å se om brukeren har glemt noen felt.

hvis (tomt ($ brukernavn)) // legg inn kode i meg, vennligst hvis (tomt ($ passord)) // legg inn kode i meg 

Nå har vi tre om setninger som kontrollerer om hvert felt er tomt. Hvis feltet er tomt, skal vi tildele noen variabler.

For å gjøre ting rent, skal vi lage en matrise som vil holde status på registreringsprosessen, så vel som hvilken som helst tekst vi trenger for å vise brukeren.

Litt over det stykke kode, la oss lage en matrise og noen få variabler.

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

Først oppretter vi et tomt array som kalles handling, og deretter setter du en array verdi av resultatet. Resultatet kommer til å holde en verdi av enten suksess eller feil. Deretter oppretter vi et annet tomt system som heter tekst. Dette kommer til å holde noen tekst vi vil vise brukeren under registreringen.

Akkurat nå, vår hvis setninger som kontrollerer våre variabler ikke utfører noen kode, så la oss gå videre og sette inn kode i den første hvis setningen.

Sett denne koden inn i brukernavnet hvis du erklærer det.

$ action ['result'] = 'feil'; array_push ($ text, 'Du har glemt brukernavnet ditt');

La oss si at brukeren sender skjemaet uten brukernavn. Vår erklæring skal kjøre koden ovenfor. Først kommer det til å angi resultatfeltet for vårt handlingsarray til feil.

Da skal vi bruke array_push () å legge inn tekst i vår tekstradius. Vi skal bruke det samme koden for de to siste "if" -sagnene, så kopier og lim inn koden i de to siste hvis setningene. Du vil sannsynligvis ønske å endre teksten for å matche gjeldende setning.

Merk: Vi bruker array_push () i tilfelle vi har flere feil i skjemainnsendelsen. Hvis alle om setninger utføres, vil tekstoppsettet se ut som:

Array ([0] => 'Du har glemt brukernavnet ditt', [1] => 'Du har glemt passordet ditt', [2] => 'Du har glemt e-postadressen din')

Vi må nå sjekke om vi har noen feil, slik at vi kan fortsette med påmeldingsprosessen.


Trinn 6: Ingen feil, la oss registrere brukeren

Vi skal sjekke for å se om resultatresultatverdien for vår handling er satt til feil.

hvis ($ action ['result']! = 'error') // ingen feil, fortsett å registrere $ password = md5 ($ passord);  $ action ['text'] = $ tekst;

Vi kjører også passordet vårt via md5 () -funksjonen. Dette tar passordet og returnerer en 32 tegnstreng som ser noe ut som dette: a3470ce826283eca7ce3360d0f26b230. Det er god praksis å kjøre passordet gjennom en slags hashing-funksjon før du legger den inn i databasen. Dette forhindrer folk i å se brukerens passord hvis databasen er hacket.

En rask sjekk av resultatresultatverdien vår, og vi kan fortsette med registreringen. Hvis resultatet er feil, hopper vi over all denne koden og sender feilene til brukeren, slik at de kan gjøre de nødvendige endringene.

Det siste stykket av denne koden legger du verdiene til tekstradiagrammet i vår handlingsgruppe.


Trinn 7: Legge til brukeren i databasen

Plasser denne koden i vår siste hvis erklæring.

... Hvis setningen kontrollerer feil ... // legg til databasen $ add = mysql_query ("INSERT INTO 'users VALUES (NULL,' $ brukernavn ',' $ passord ',' $ email ', 0)"); hvis ($ add) // brukeren ble lagt til databasen ellers $ action ['result'] = 'error'; array_push ($ text, 'Brukeren kunne ikke legges til databasen. Årsak:'. mysql_error ()); =

Vi bruker mysql_query () og SETT INN å sette inn brukerens informasjon i databasen. Deretter oppretter vi en annen hvis setningen kontrollerer for å se om brukeren ble lagt til databasen. Vi gjør dette ved å sjekke om $ add variabelen er sann eller falsk.

Hvis brukeren er lagt til, kan vi fortsette med registreringen; Hvis ikke, skal vi tildele noen kjente variabler og stoppe registreringen.

Når du arbeider med MySQL spørringer, bruker vi mysql_error () Fungerer hvis de er feil fordi det hjelper med feilsøking, hva som er galt med dine spørsmål. Det vil skrive ut tekstfeil når noe er galt. Dette er bra!


Trinn 8: Bekreftelse er nødvendig

Brukeren har sendt skjemaet, alt sjekker ut og de bor nå i databasen. Vi vil at brukeren skal kunne bruke sin konto, så la oss sette opp bekreftelsen.

... hvis lagt til sjekk ... // få det nye bruker-ID $ userid = mysql_insert_id (); // lage en tilfeldig nøkkel $ key = $ brukernavn. $ email. dato ( 'min'); $ key = md5 ($ key); // legg til bekreft rad $ confirm = mysql_query ("INSERT INTO" bekreft 'verdier (NULL,' $ userid ',' $ key ',' $ email ') "); hvis ($ bekreft) // la oss sende e-posten annet $ action ['result'] = 'error'; array_push ($ text, 'Bekreft rad ble ikke lagt til databasen. Årsak:'. mysql_error ()); 

For å gjøre det enkelt, la oss tildele det nye bruker-ID til en variabel slik at vi kan bruke det senere. Vi gjør dette ved å bruke mysql_insert_id (). Dette vil angi $ brukerid til hva den nye brukerens ID er.

Deretter lager vi tilfeldig nøkkel for den aktuelle brukeren. Vi lager en variabel som heter nøkkel og fyller den med en verdi av brukernavnet, e-post og dato. Strengen vil se ut som [email protected]. Deretter bruker vi MD5 () funksjonen til å konvertere den til en tilfeldig streng som er unik for den brukeren.

Ved hjelp av mysql_query () og INSERT igjen legger vi den nye bruker-IDen, nøkkelen og brukerne e-post inn i databasen.


Trinn 9: Konfigurere e-postmaler

Vi skal ta en pause fra PHP-kodingen og lage to nye filer. For å være rask og enkel skal vi faktisk bruke to maler som jeg har tatt med denne opplæringen. De to filene vi skal se på er signup_template.html og signup_template.txt. Swift lar oss tildele en HTML samt en TXT-versjon av e-posten, slik at brukerens e-postklient ikke støtter HTML-e-post.

Åpne opp signup_template.html Merk: Du kan lese opp på HTML i e-postmeldinger over på biler. Vi skal ikke redigere denne filen, jeg skal bare forklare hva som foregår og da kan du leke med det når opplæringen er fullført. Den viktigste delen av denne filen er kodene som ser ut som Brukernavn og confirm.php? e = EMAIL & key = KEY. Vi skal skrive en funksjon som bruker denne malen og erstatter disse kodene med variablene fra vårt skjema.


Trinn 10: Malfunksjonen

Åpne opp inc / php / functions.php og plasser denne koden inni.

funksjon format_email ($ info, $ format) // angi rot $ root = $ _SERVER ['DOCUMENT_ROOT']. '/ dev / tutorials / email_signup'; // Grip malinnholdet $ template = file_get_contents ($ root. '/ signup_template.'. $ format); // erstatte alle kodene $ template = ereg_replace ('USERNAME', $ info ['brukernavn'], $ mal); $ template = ereg_replace ('EMAIL', $ info ['email'], $ template); $ template = ereg_replace ('KEY', $ info ['key'], $ template); $ template = ereg_replace ('SITEPATH', 'http: //site-path.com', $ template); // returnere html av mal retur $ template; 

format_email () tar to variabler som vil bli brukt i index.php. Den første er vår skjemainformasjonsgruppe og den andre er format. Vi har en formatvariabel, slik at vi kan bruke denne oppstillingen til både HTML- og TXT-versjonene av malen.

Først setter vi roten. Dette peker på mappen som malene er vert for.

Deretter åpner vi innholdet i vår mal og tilordner det til en variabel.

Nå skal vi bruke ereg_replace () å erstatte vår Brukernavn merker i vår mal med innholdet fra vårt skjema. Det er egentlig bare et super enkelt malesystem.

Til slutt returnerer vi malvariabelen som inneholder all HTML.

Forklaring: I et nøtteskall, format_email () åpner opp våre malfiler, tar HTML og tilordner den til vår variabel. Dette er bare en renere måte og deretter tilordne all HTML i selve funksjonen.


Trinn 11: Sende e-posten

Vi skal skrive en annen funksjon for å håndtere Swift og sende e-postene.

funksjon send_email ($ info) // format hver e-post $ body = format_email ($ info, 'html'); $ body_plain_txt = format_email ($ info, 'txt'); // oppsett maileren $ transport = Swift_MailTransport :: newInstance (); $ mailer = Swift_Mailer :: newInstance ($ transport); $ message = Swift_Message :: newInstance (); $ melding -> setSubject ('Velkommen til nettstednavn'); $ melding -> setFrom (array ('[email protected] '=>' Nettstednavn ')); $ melding -> setTo (array ($ info ['email'] => $ info ['brukernavn'])); $ melding -> setBody ($ body_plain_txt); $ melding -> addPart ($ body, 'text / html'); $ result = $ mailer-> send ($ message); returnere $ resultat; 

Akkurat som format_email (), Send e-post() tar vår info array som en variabel. Den første delen av funksjonen tildeler vi to variabler, $ kropp og $ body_plain_text. Vi bruker format_email () å tilordne HTML-verdiene til vår mal til hver variabel. Nå kommer den gode delen. Vi har oppsett den hurtige forekomsten ved hjelp av Swift_MailTransport: newInstance () og sett deretter opp maileren ved hjelp av Swift_Mailer :: newInstance ($ transport);

Vi lager en ny forekomst av Swift-meldingen og begynner å tilordne noen variabler til denne forekomsten. Vi setter emnet, fra e-post og til e-postadresse og bruker deretter setBody () å tildele ut tekstversjon av e-posten til e-posten. For å legge til HTML-versjonen vi bruker addPart (). De sende() funksjonen tar seg av sending av e-posten og så returnerer vi resultatet. OK, vi har våre e-postmeldinger, skape og sende funksjoner skrevet, la oss gå tilbake til index.php og begynne å pakke opp hovedoppmeldingen.


Trinn 12: Har vi sendt? Skal vi bekrefte?

Vår siste bit burde vært om setningen sjekker om bekreftelsesraden ble opprettet.

La oss sende e-posten og sjekke om alt gikk skjønt greit.

... hvis bekreftelse ... // inkludere den hurtige klassen include_once 'inc / php / swift / swift_required.php'; // sette info inn i en matrise for å sende til funksjonen $ info = array ('brukernavn' => $ brukernavn, 'email' => $ email, 'key' => $ key); // send epost hvis (send_email ($ info)) // email sendt $ action ['result'] = 'suksess'; array_push ($ text, 'Takk for at du registrerte deg. Vennligst sjekk e-posten din for bekreftelse!');  ellers $ action ['result'] = 'error'; array_push ($ text, 'Kunne ikke sende bekreft epost'); 

Uten Swift-klassen kan vi ikke sende ut noen e-post, så i vår første linje, inkluderer vi den raske klassen. Vi må sende vår informasjon til begge våre nye funksjoner, så vi lager et nytt utvalg og tilordner våre variabler til det. Jeg vet at jeg vet, mer om uttalelser, men vi må sjekke for feil for å gjøre det lettere for brukerne. Du må alltid anta at brukerne vil gjøre enhver mulig feil tenkelig.

Vi pakker inn vår Send e-post() fungere i en annen hvis setning, samt passere $ info array. Hvis e-posten sendes, tildeler vi en verdi for suksess og takker brukeren for å registrere seg. Hvis det er feil, bruker vi kjente variabler. Så nå er vi nesten ferdige med registreringen, bare en siste funksjon må opprettes. Selv om vi tilordner alle disse feil / suksessvariablene og teksten, har vi ikke vist denne informasjonen til brukeren.

Flytt tilbake til functions.php og lim inn denne koden.

// rydde feilfunksjonen show_errors ($ action) $ error = false; hvis (! tomt ($ action ['result'])) $ error = "
    "$ $ error. =" $ error. = "$ error. ="
  • $ tekst

  • . "\ n"; else // single error $ error. = "
  • $ Handling [tekst]

  • "; $ error. ="
"." \ n "; returner $ feil;

Dette kan virke forvirrende, men det er egentlig bare å gjøre vår suksess / feil ser bra ut.

Først sjekker det for å se om arrayet er tomt, så vi ikke kjører koden når det ikke er nødvendig.

Deretter oppretter det en ul-tag og bruker resultatet som en klasse. Dette vil enten være suksess eller feil og er bare estetisk.

Vi sjekker deretter for å se om tekstvariabelen er en matrise eller bare en streng. Hvis det er en streng, pakker vi den inn i en li. Hvis det er en matrise, slår vi gjennom hvert array element og pakker det inn i en li.

Til slutt lukker vi ul og returnerer hele strengen.

Hvis vi flytter tilbake til index.php og plasserer denne koden rett etter å ha tatt med header.php vi kan pakke opp denne delen.

... header inkluderer ... 

En rask liten forklaring. Vi tar alle verdiene til vår handling array og sender den til show_errors () funksjon. Hvis det er noe innhold, returnerer det en fin, uordnet liste.


Trinn 13: Bekrefter brukeren

Vi bør ha et godt grep om hvordan skriptet fungerer; så for dette neste skriptet skal jeg gi deg hele koden av kode og deretter gå gjennom den med deg.

Åpne opp confirm.php og lim dette inn i mellom toppteksten og din show_errors () funksjon.

// sette opp noen variabler $ action = array (); $ action ['result'] = null; // rask / enkel validering hvis (tom ($ _ GET ['email']) || tom ($ _ GET ['key'])) $ action ['result'] = 'error'; $ action ['text'] = 'Vi mangler variabler. Vennligst dobbeltklikk e-posten din. ';  hvis ($ action ['result']! = 'error') // rydde opp variablene $ email = mysql_real_escape_string ($ _ GET ['email']); $ key = mysql_real_escape_string ($ _ GET ['key']); // sjekk om nøkkelen er i databasen $ check_key = mysql_query ("SELECT * FROM" bekreft "WHERE 'email' = '$ email' OG 'nøkkel' = '$ key' LIMIT 1 ') eller dø (mysql_error ); hvis (mysql_num_rows ($ check_key)! = 0) // få bekreft info $ confirm_info = mysql_fetch_assoc ($ check_key); // bekreft e-posten og oppdatere brukerdatabasen $ update_users = mysql_query ("UPDATE" -brukernes SET 'active' = 1 HVOR 'id' = '$ confirm_info [userid]' LIMIT 1 ') eller dø (mysql_error ()); // slette bekreftelsesraden $ delete = mysql_query ("DELETE FROM" bekreft "WHERE 'id' = '$ confirm_info [id]' LIMIT 1 ') eller dø (mysql_error ()); hvis ($ update_users) $ action ['result'] = 'suksess'; $ action ['text'] = 'Brukeren er bekreftet. Takk skal du ha!';  ellers $ action ['result'] = 'error'; $ action ['text'] = 'Brukeren kunne ikke oppdateres Årsak:' .mysql_error () ;;  else $ action ['result'] = 'feil'; $ action ['text'] = 'Nøkkelen og e-posten er ikke i vår database.'; 

Mesteparten av dette bør se veldig kjent ut; så jeg skal hoppe videre og se om nøkkelen er i databasepartiet.

Igjen, bruker vi mysql_query () for å få noen rader i databasen der e-post og nøkkel er lik nøklene som er oppgitt av brukerens e-post.

Vi bruker mysql_num_rows () for å sjekke om antall rader som returneres er større enn 0.

Hvis e-post og nøkkel er i databasen, tar vi all informasjon fra databasen med mysql_fetch_assoc ().

Nå som brukeren har bekreftet sin konto, må vi oppdatere databasen og sette den aktive raden til 1.

Vi bruker mysql_query () igjen, men i stedet for SETT INN vi bruker OPPDATER å oppdatere den aktive raden til 1 der bruker-IDen er den samme som vår nåværende bruker-ID.

For å rydde alt opp bruker vi mysql_query () og SLETT for å fjerne bekreftelsesraden fra databasen. Dette sørger for at brukeren ikke kan komme tilbake til denne siden og bekrefte. Det holder databasen også rent og pent.


Konklusjon

Vi har dekket mange forskjellige områder i denne opplæringen. Vi lastet ned og inkluderte et tredjeparts skript for å håndtere sending av e-post, implementert enkel skjema validering samt opprettet et super enkelt mal system for å style våre e-poster. Hvis du er ny i MySQL, har vi rørt på de tre vanligste funksjonene i MySQL, så du burde ikke ha noe problem å fullføre noen mer avanserte opplæringsprogrammer.


Endelige notater

  • Jeg har brukt Swift Mailer som vårt distribusjonsskript for e-post som kan lastes ned her: http://swiftmailer.org/
  • Jeg har også brukt knappestiler levert av Zurb. Husk å sjekke dem ut og gi dem litt kjærlighet. http://www.zurb.com/blog_uploads/0000/0485/buttons-02.html

Takk for at du leser og sørg for å besøke meg på Twitter hvis du har noen spørsmål!