Share
In deze zelfstudie maken we een gebruikersaanmeldingsformulier dat een gebruiker toevoegt aan een database en vervolgens een bevestigings-e-mail verzendt waarop de gebruiker moet klikken voordat zijn account wordt geactiveerd.
Deze tutorial neemt je helemaal mee door het proces, maar als je wilt, kun je een van de vele kant-en-klare e-mailaanmeldingsformulieren gebruiken op Envato Market. Hier zijn enkele van de meest populaire opties.
De jQuery-plug-in Simple Signup Form zal het e-mailadres van de bezoeker op uw website op een effectieve, opvallende manier verzamelen. Het heeft veel optionele aanpassingsopties die je in minuten kunt instellen.
Hype is een SmartR-aanmeldingsformulier, vooraf geconfigureerd en toegevoegd aan elke pagina in slechts één klik. Het maakt gebruik van de kracht van uw gebruikers en hun netwerken om registraties actief te verhogen en uw gebruikersbestand exponentieel te laten groeien.
Dit is een zeer eenvoudige, maar stijlvolle, vorm voor uw website waar bezoekers hun e-mailadres (en naam indien gewenst) kunnen invoeren om aan een lijst met contactpersonen te worden toegevoegd. Het gebruikt AJAX om e-mail in te dienen en te valideren en zal ook werken als de gebruiker JavaScript heeft uitgeschakeld.
De installatie is snel en pijnloos. Voor dit formulier is geen database nodig om te functioneren, omdat het invoer in een CSV-bestand zal maken en opslaan.
Er zijn nog veel meer e-mailaanmeldingsformulieropties beschikbaar op Envato Market, dus u kunt bladeren. Of lees je liever zelf de instructies.
Ik heb de basislay-out van de site opgenomen, zodat we geen tijd verspillen met het maken van het formulier en het er mooi uitzien. We gaan precies beginnen met coderen waarvoor je hier bent gekomen.
Open de map Sitesjabloon en kopieer deze naar uw lokale host of webserver.
Doe open index.php en kijk snel. Je ziet een eenvoudige vorm met 3 ingangen. Dit zijn de velden die we gaan vastleggen. We willen de gebruikersnaam, hun wachtwoord en hun e-mailadres. U kunt ervoor kiezen om andere elementen vast te leggen wanneer gebruikers zich aanmelden, maar dit zijn de 3 barebones-elementen die we nodig hebben.
Open PHPMyAdmin of welk programma u ook gebruikt om uw MySQL-database te beheren en een nieuwe database aan te maken. Je kunt dit noemen, wat je maar wilt. Nu willen we de rijen maken die onze gebruikersinformatie en bevestigingsinformatie bevatten. Hiervoor maken we twee tabellen. Gebruikers en bevestigen.
Accentsconagua
MAAK TAFEL '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 standaard "," actief "binair (1) NIET NULL standaard '0', PRIMAIRE SLEUTEL ('id')) MOTOR = MyISAM AUTO_INCREMENT = 27 DEFAULT CHARSET = utf8; Onze eerste tafel heeft 5 rijen. De eerste is de ID die aan de gebruiker wordt gegeven bij het aanmelden. Dit is ingesteld om automatisch te verhogen, zodat elke gebruiker een unieke ID krijgt. Volgende is de gebruikersnaam, wachtwoord en ID. In de laatste rij kunnen we de actieve status van de gebruiker instellen. Wanneer we de gebruikersrij voor het eerst maken, wordt de actieve status standaard ingesteld op 0. Dit betekent dat het gebruikersaccount momenteel inactief is. Nadat de gebruiker zijn account heeft bevestigd, stellen we dit in op 1. Hiermee wordt aangegeven dat het account actief is.
CREËER TABEL 'bevestigen' ('id' int (11) NOT NULL auto_increment, 'userid' varchar (128) NOT NULL standaard ", 'key' varchar (128) NOT NULL default", 'email' varchar (250) standaard NULL , PRIMARY KEY ('id')) ENGINE = MyISAM AUTO_INCREMENT = 27 DEFAULT CHARSET = utf8; Onze tweede tafel is de bevestigingstabel. Dit bevat de ID van de gebruiker en e-mail, evenals een willekeurig gegenereerde sleutel die we gebruiken om het gebruikersaccount te bevestigen.
Open inc / php / config.php.
Eerst moeten we de verbinding maken met de database.
mysql_connect ('localhost', 'gebruikersnaam', 'wachtwoord') of die ("Ik kon geen verbinding maken met uw database, controleer of uw gegevens correct zijn!"); Afhankelijk van uw instellingen, zullen we een paar variabelen moeten veranderen. Dus ga je gang en vul alles in.
Vervolgens moeten we MySQL vertellen welke database we willen gebruiken.
mysql_select_db ('your_database_name') of die ("Ik kon de databasetabel niet vinden, zorg ervoor dat hij goed gespeld is!"); Zodra alles is aangepast aan uw database, kunt u doorklikken naar het index.php-bestand op uw server.
Als u geen fouten bovenaan ziet, zijn we allemaal verbonden.
Oké, nu we allemaal verbonden zijn met de database, moeten we de formuliergegevens vastleggen zodat we de gebruiker kunnen laten registreren.
Ik ga je het stukje code geven en dan uitleggen wat er aan de hand is. Daarna gaan we wijzigingen aanbrengen en functionaliteit toevoegen.
Hier is de basis; plaats dit recht nadat de eerste bovenaan index.php staat
// controleer of het formulier is verzonden als (isset ($ _ POST ['signup']))
Deze if-opdracht controleert of het formulier is verzonden.
Zonder dit zou ons script telkens worden uitgevoerd als de pagina is vernieuwd en dat willen we niet.
Opmerking: Afhankelijk van uw toepassing of alleen de algemene codeerstijl, kan deze code in een afzonderlijk bestand worden geplaatst dat wordt geopend wanneer het formulier wordt verzonden. Ik heb de code allemaal in één bestand geplaatst om dingen eenvoudig en gemakkelijk te volgen te houden.
We willen er zeker van zijn dat de gebruiker daadwerkelijke inhoud heeft ingediend in plaats van alleen een leeg formulier, dus we gaan wat snelle controles uitvoeren.
Het eerste deel is om de $ _POST variabelen in eenvoudigere variabelen en opschonen voor de database. Plaats deze in onze if-verklaring.
$ username = mysql_real_escape_string ($ _ POST ['gebruikersnaam']); $ wachtwoord = mysql_real_escape_string ($ _ POST ['wachtwoord']); $ email = mysql_real_escape_string ($ _ POST ['email']);
mysql_real_escapse_string () zorgt ervoor dat de gebruiker geen gebruik maakt van apostrofs om toegang te krijgen tot onze database met MySQL-injectie. Wanneer u informatie in een database wilt plaatsen die de gebruiker heeft ingevoerd, voert u deze uit mysql_real_escape_string (). Voor meer informatie over MySQL-injectie kunt u dit artikel lezen op Wikipedia
Dus we hebben onze variabelen opgeschoond, laten we nu eens kijken of de gebruiker velden is vergeten.
if (empty ($ gebruikersnaam)) // plaats code in mij alstublieft if (leeg ($ wachtwoord)) // plaats code in mij alstublieft if (leeg ($ email)) // zet code in mij alstublieft
Nu hebben we drie if-statements die controleren of elk veld leeg is. Als het veld leeg is, gaan we enkele variabelen toewijzen.
Om dingen schoon te maken, gaan we een array maken die de status van het aanmeldingsproces en de tekst die we nodig hebben om de gebruiker te tonen, zal bevatten..
Vlak boven dat stuk code, laten we een array en enkele variabelen maken.
$ action = array (); $ action ['result'] = null; $ text = array ();
Eerst maken we een lege array die actie wordt genoemd en vervolgens een matrixwaarde van resultaat wordt ingesteld. Het resultaat zal een waarde van succes of fout bevatten. Vervolgens maken we een andere lege array met de naam tekst. Dit gaat elke tekst bevatten die we de gebruiker willen laten zien tijdens de aanmelding.
Op dit moment voeren onze if-statements die onze variabelen controleren geen code uit, dus laten we doorgaan en wat code in de eerste als statement zetten.
Zet deze code in de gebruikersnaam als statement.
$ action ['result'] = 'error'; array_push ($ text, 'Je bent je gebruikersnaam vergeten');
Laten we zeggen dat de gebruiker het formulier indient zonder een gebruikersnaam. Onze verklaring gaat de bovenstaande code uitvoeren. Eerst zal het resultaatveld van onze actiereeksen op fouten worden ingesteld.
Dan gaan we gebruiken array_push () om wat tekst in onze tekstarray te plaatsen. We gaan hetzelfde stuk code gebruiken voor de laatste twee 'als'-instructies, dus kopieer en plak die code in de laatste twee if-instructies. U zult waarschijnlijk de tekst willen aanpassen aan de huidige if-instructie.
Opmerking: we gebruiken array_push () in het geval dat we meerdere fouten in de formulierinzending hebben. Als alle if-instructies worden uitgevoerd, ziet de tekstarray eruit als:
Array ([0] => 'U bent uw gebruikersnaam vergeten', [1] => 'U bent uw wachtwoord vergeten', [2] => 'U bent uw e-mailadres vergeten')
We moeten nu controleren of we fouten hebben, zodat we door kunnen gaan met het aanmeldingsproces.
We gaan controleren of de resultaatwaarde van onze actiereserie is ingesteld op een fout.
if ($ action ['result']! = 'error') // geen fouten, ga verder met aanmelden $ wachtwoord = md5 ($ wachtwoord); $ actie ['tekst'] = $ tekst;
We gebruiken ook ons wachtwoord via de functie md5 (). Dit neemt het wachtwoord en retourneert een 32-tekenreeks die er ongeveer zo uitziet: a3470ce826283eca7ce3360d0f26b230. Het is een goede gewoonte om het wachtwoord via een soort hashing-functie uit te voeren voordat u het in de database plaatst. Dit voorkomt dat mensen de gebruikerswachtwoorden kunnen bekijken als uw database gehackt is.
Een snelle controle van onze actieresultaatwaarde en we kunnen doorgaan met de registratie. Als ons resultaat een fout is, zullen we al deze code overslaan en de fouten naar onze gebruiker uitvoeren, zodat ze de nodige wijzigingen kunnen aanbrengen.
Het laatste stukje van deze code zetten we de waarden van uw tekstarray in onze actiereeks.
Plaats deze code in onze laatste if-verklaring.
... Als Statement controle op fouten ... // add to the database $ add = mysql_query ("INSERT INTO 'VALUES van gebruikers (NULL,' $ username ',' $ password ',' $ email ', 0)"); if ($ add) // de gebruiker is aan de database toegevoegd else $ action ['result'] = 'error'; array_push ($ text, 'Gebruiker kan niet aan de database worden toegevoegd Reason:'. mysql_error ()); = We gebruiken mysql_query () en INSERT om de gebruikersinformatie in de database in te voegen. Vervolgens maken we een andere If-instructiecontrole om te zien of de gebruiker aan de database is toegevoegd. We doen dit door te controleren of de variabele $ add waar of onwaar is.
Als de gebruiker is toegevoegd, kunnen we doorgaan met de registratie; zo niet, dan gaan we enkele vertrouwde variabelen toewijzen en stoppen met het aanmelden.
Als u met MySQL-query's werkt, gebruiken we de mysql_error () functioneer als het fouten zijn, omdat het helpt bij het debuggen van wat er mis is met uw vragen. Het zal tekstfouten uitvoeren als er iets mis is. Dit is goed!
De gebruiker heeft het formulier verzonden, alles is uit en ze leven nu in de database. We willen dat de gebruiker zijn account kan gebruiken, dus laten we de bevestiging instellen.
... indien toegevoegd, vinkje ... // verkrijg de nieuwe gebruikersnaam $ userid = mysql_insert_id (); // maak een willekeurige sleutel $ key = $ gebruikersnaam. $ email. date ( 'mijn'); $ toets = md5 ($ sleutel); // voeg bevestigrij toe $ confirm = mysql_query ("INSERT INTO 'bevestig' VALUES (NULL, '$ userid', '$ key', '$ email')"); if ($ confirm) // laten we de email versturen else $ action ['result'] = 'error'; array_push ($ text, 'Bevestig rij is niet toegevoegd aan de database Reden:'. mysql_error ()); Om dingen gemakkelijk te maken, laten we het nieuwe gebruikers-ID toewijzen aan een variabele, zodat we het later kunnen gebruiken. We doen dit door mysql_insert_id (). Dit zal instellen $ userid naar wat de ID van de nieuwe gebruiker ook is.
Vervolgens maken we de willekeurige sleutel voor die specifieke gebruiker. We maken een sleutel met variabele naam en vullen deze met een waarde van de gebruikersnaam, e-mail en datum. De string ziet eruit als [email protected]. Daarna gebruiken we de md5 () functie om het om te zetten in een willekeurige reeks die uniek is voor die gebruiker.
Gebruik makend van mysql_query () en INSERT opnieuw plaatsen we de nieuwe gebruikers-ID, de sleutel en de e-mail van de gebruiker in de database.
We gaan een pauze nemen in de PHP-codering en twee nieuwe bestanden maken. Om het snel en gemakkelijk te houden, gaan we eigenlijk twee sjablonen gebruiken die ik in deze tutorial heb opgenomen. De twee bestanden waar we naar zullen kijken zijn signup_template.html en signup_template.txt. Met Swift kunnen we zowel een HTML als een TXT-versie van de e-mail toewijzen, in het geval dat de e-mailclient van de gebruiker HTML-e-mails niet ondersteunt.
Open signup_template.html Opmerking: U kunt HTML lezen in e-mails over auto's. We gaan dit bestand niet bewerken, ik ga alleen uitleggen wat er aan de hand is en dan kun je ermee spelen zodra de tutorial is voltooid. Het belangrijkste onderdeel van dit bestand zijn de tags die eruit zien USERNAME en confirm.php? email = EMAIL & key = KEY. We gaan een functie schrijven die deze sjabloon gebruikt en die tags vervangt door de variabelen uit ons formulier.
Doe open inc / php / functions.php en plaats deze code erin.
functie format_email ($ info, $ format) // zet de root $ root = $ _SERVER ['DOCUMENT_ROOT']. '/ dev / tutorials / email_signup'; // pak de template-inhoud $ template = file_get_contents ($ root. '/ signup_template.'. $ format); // vervang alle tags $ template = ereg_replace ('USERNAME', $ info ['gebruikersnaam'], $ template); $ template = ereg_replace ('EMAIL', $ info ['email'], $ template); $ template = ereg_replace ('KEY', $ info ['key'], $ template); $ template = ereg_replace ('SITEPATH', 'http: //site-path.com', $ template); // retourneer de html van de template return $ template; format_email () neemt twee variabelen die gebruikt zullen worden in index.php. De eerste is onze formulierinformatierooster en de tweede is opmaak. We hebben een formaatvariabele zodat we deze array opnieuw kunnen gebruiken voor zowel de HTML- als de TXT-versie van de sjabloon.
Eerst stellen we de root in. Dit verwijst naar de map waarin de sjablonen worden gehost.
Vervolgens openen we de inhoud van onze sjabloon en wijzen we deze toe aan een variabele.
Nu gaan we gebruiken ereg_replace () om onze te vervangen USERNAME tags in onze sjabloon met de inhoud van ons formulier. Het is eigenlijk gewoon een supereenvoudig sjabloonsysteem.
Ten slotte keren we de template-variabele terug die alle html bevat.
Uitleg: kort samengevat, format_email () opent onze sjabloonbestanden, neemt de HTML en wijst deze toe aan onze variabele. Dit is gewoon een schonere manier om vervolgens alle HTML in de functie zelf toe te wijzen.
We gaan een andere functie schrijven om met Swift om te gaan en de e-mails te verzenden.
functie send_email ($ info) // formaat elke e-mail $ body = format_email ($ info, 'html'); $ body_plain_txt = format_email ($ info, 'txt'); / / setup de mailer $ transport = Swift_MailTransport :: newInstance (); $ mailer = Swift_Mailer :: newInstance ($ transport); $ message = Swift_Message :: newInstance (); $ message -> setSubject ('Welkom bij site naam'); $ message -> setFrom (array ('[email protected] '=>' Site Name ')); $ message -> setTo (array ($ info ['email'] => $ info ['gebruikersnaam'])); $ message -> setBody ($ body_plain_txt); $ message -> addPart ($ body, 'text / html'); $ result = $ mailer-> send ($ message); return $ resultaat; Net als format_email (), send_email () neemt onze infomatrix als een variabele. Het eerste deel van de functie wijzen we twee variabelen toe, $ body en $ body_plain_text. Wij gebruiken format_email () om de HTML-waarden van onze sjabloon toe te wijzen aan elke variabele. Nu komt het goede deel. We hebben de snelle instantie ingesteld met Swift_MailTransport: newInstance () en stel vervolgens de mailer in met Swift_Mailer :: newInstance ($ transport);
We maken een nieuw exemplaar van het Swift-bericht en beginnen enkele variabelen aan dit exemplaar toe te wijzen. We hebben het onderwerp ingesteld, van e-mail en e-mailadres tot gebruik setBody () om een tekstversie van de e-mail toe te wijzen aan de mailerinstantie. Om de HTML-versie toe te voegen die we gebruiken addPart (). De sturen() functie zorgt voor het verzenden van de e-mail en vervolgens retourneren we het resultaat. Oké, we hebben onze e-mailfuncties voor maken en verzenden geschreven, laten we teruggaan naar index.php en beginnen met het afronden van de belangrijkste aanmelding.
Ons laatste bit had de if-opdracht moeten zijn die controleerde of de rij met bevestigingen was aangemaakt.
Laten we de e-mail verzenden en controleren of alles goed is gegaan.
... indien bevestigd ... // neem de snelle klasse include_once 'inc / php / swift / swift_required.php'; // zet info in een array om naar de functie $ info = array ('gebruikersnaam' => $ gebruikersnaam, 'email' => $ email, 'key' => $ key) te sturen; // stuur de e-mail als (send_email ($ info)) // e-mail verzonden $ action ['result'] = 'succes'; array_push ($ text, 'Bedankt voor uw aanmelding. Controleer uw e-mail ter bevestiging!'); else $ action ['result'] = 'error'; array_push ($ text, 'Kon bevestigingsbericht niet verzenden'); Zonder de Swift-klasse kunnen we geen e-mails verzenden, dus in onze eerste rij nemen we de snelle klas op. We moeten onze informatie naar beide nieuwe functies verzenden, dus we maken een nieuwe array en wijzen er onze variabelen aan toe. Ik weet dat ik weet, meer als verklaringen, maar we moeten controleren op fouten om het voor de gebruikers gemakkelijker te maken. Je moet er altijd van uitgaan dat gebruikers elke mogelijke fout denkbaar maken.
We verpakken onze send_email () functie in een andere if-instructie en doorgeven van de $ info-array. Als de e-mail wordt verzonden, kennen we een succeswaarde toe en danken de gebruiker voor het aanmelden. Als er fouten zijn, gebruiken we de bekende variabelen. Dus nu zijn we bijna klaar met de aanmelding, er hoeft slechts één laatste functie te worden gemaakt. Hoewel we al deze fout- / succesvariabelen en tekst toewijzen, hebben we deze informatie niet aan de gebruiker getoond.
Ga terug naar functions.php en plak deze code.
// opschonen van de foutenfunctie show_errors ($ actie) $ error = false; if (! empty ($ action ['result'])) $ error = "
$ text
$ Actie [text]
Dit lijkt misschien verwarrend, maar het maakt ons succes / fouten gewoon leuk.
Eerst wordt gecontroleerd of de array leeg is, dus we voeren de code niet uit wanneer deze niet nodig is.
Vervolgens maakt het een ul-tag en past het resultaat toe als een klasse. Dit is ofwel een succes of een fout en is alleen esthetisch.
We controleren vervolgens of de tekstvariabele een array of gewoon een tekenreeks is. Als het een string is, verpakken we het in een li. Als het een array is, doorlopen we elk array-item en wikkelen het in een li.
Ten slotte sluiten we de ul en geven we de hele reeks terug.
Als we teruggaan naar index.php en deze code meteen na het opnemen plaatsen header.php we kunnen dit gedeelte inpakken.
... header bevat ...
Een snelle kleine uitleg. We nemen alle waarden van onze actiereeks en geven deze door aan de show_errors () functie. Als er inhoud is, levert dit een mooie ongeordende lijst op.
We moeten een goede grip hebben op hoe het script functioneert; dus voor dit volgende script ga ik je het hele stukje code geven en het dan met je doornemen.
Doe open confirm.php en plak dit tussen de header include en jouw show_errors () functie.
// stel enkele variabelen in $ actie = array (); $ action ['result'] = null; // snelle / eenvoudige validatie if (empty ($ _ GET ['email']) || empty ($ _ GET ['key'])) $ action ['result'] = 'error'; $ action ['text'] = 'We missen variabelen. Controleer alstublieft uw e-mail. '; if ($ action ['result']! = 'error') // opschonen van de variabelen $ email = mysql_real_escape_string ($ _ GET ['email']); $ key = mysql_real_escape_string ($ _ GET ['key']); // controleer of de sleutel in de database staat $ check_key = mysql_query ("SELECT * FROM" bevestig 'WHERE' email '=' $ email 'AND' key '=' $ key 'LIMIT 1 ") of die (mysql_error () ); if (mysql_num_rows ($ check_key)! = 0) // ontvang de bevestiging info $ confirm_info = mysql_fetch_assoc ($ check_key); // bevestig de e-mail en update de gebruikersdatabase $ update_users = mysql_query ("UPDATE" gebruikers 'SET' active '= 1 WHERE' id '=' $ confirm_info [userid] 'LIMIT 1') of sterf (mysql_error ()); // verwijder de rij bevestigen $ delete = mysql_query ("DELETE FROM 'bevestig' WHERE 'id' = '$ confirm_info [id]' LIMIT 1 ') of sterf (mysql_error ()); if ($ update_users) $ action ['result'] = 'succes'; $ action ['text'] = 'Gebruiker is bevestigd. Dank je!'; else $ action ['result'] = 'error'; $ action ['text'] = 'De gebruiker kon niet worden bijgewerkt Reden:' .mysql_error () ;; else $ action ['result'] = 'error'; $ action ['text'] = 'De sleutel en e-mail staan niet in onze database.'; Het meeste hiervan zou er heel bekend uit moeten zien; dus ik ga verder en controleer of de sleutel zich in de database-sectie bevindt.
Nogmaals, we gebruiken mysql_query () om rijen in de database te krijgen waar het e-mailadres en de sleutel gelijk zijn aan de sleutels die door de e-mail van de gebruiker worden verstrekt.
We gebruiken mysql_num_rows () om te controleren of het aantal geretourneerde rijen groter is dan 0.
Als de e-mail en de sleutel zich in de database bevinden, nemen we alle informatie uit de database met behulp van mysql_fetch_assoc ().
Nu de gebruiker zijn account heeft bevestigd, moeten we de database bijwerken en de actieve rij instellen op 1.
We gebruiken mysql_query () nogmaals, maar in plaats van INSERT we gebruiken BIJWERKEN om de actieve rij bij te werken naar 1 waar het gebruikers-ID hetzelfde is als ons huidige gebruikers-ID.
Om alles op te ruimen dat we gebruiken mysql_query () en DELETE om de bevestigingsregel uit de database te verwijderen. Dit zorgt ervoor dat de gebruiker niet naar deze pagina kan terugkeren en opnieuw kan bevestigen. Het houdt ook de database mooi en schoon.
We hebben veel verschillende gebieden behandeld in deze zelfstudie. We hebben een script van derden gedownload en opgenomen om de e-mails te verzenden, eenvoudige formuliervalidatie geïmplementeerd en een supereenvoudig sjabloonsysteem gemaakt om onze e-mails mee vorm te geven. Als MySQL nieuw voor u is, hebben we de drie meest voorkomende functies in MySQL aangeraakt, dus u zou zonder problemen nog meer geavanceerde tutorials moeten voltooien.
Bedankt voor het lezen en bezoek me zeker op Twitter als je vragen hebt!
