Registrerings- och tillståndsformulär för Jquery. Steg-för-steg-registrering med jQuery

I den här artikeln kommer du att lära dig hur man skapar ett registrerings- och auktoriseringsformulär med HTML, JavaScript, PHP och MySql. Sådana formulär används på nästan alla webbplatser, oavsett typ. De skapas både för forumet och för onlinebutiken och för sociala nätverk (som till exempel Facebook, Twiter, Odnoklassniki) och för många andra typer av webbplatser.

Om du har en webbplats på din lokala dator hoppas jag att du redan har den. Ingenting fungerar utan den.

Skapa en tabell i databasen

För att kunna implementera användarregistrering behöver vi först och främst en databas. Om du redan har det, då bra, annars måste du skapa det. I den här artikeln förklarar jag i detalj hur man gör det.

Och så har vi en databas (förkortad som en databas), nu måste vi skapa en tabell användare där vi kommer att lägga till våra registrerade användare.

Jag förklarade också hur man skapar en tabell i en databas i artikeln. Innan vi skapar en tabell måste vi definiera vilka fält den ska innehålla. Dessa fält kommer att motsvara fälten från registreringsformuläret.

Så vi tänkte, föreställde oss vilka fält vår form kommer att ha och skapa en tabell användare med fält som detta:

• id- Identifierare. Fält id varje tabell från databasen ska ha.
• förnamn- För att spara namnet.
• efternamn- För att spara efternamn.
• e-post- För att spara postadressen. Vi kommer att använda e-post som inloggning, så det här fältet måste vara unikt, det vill säga det måste ha ett UNIKT index.
• email_status- Fält för att ange om posten är bekräftad eller inte. Om e-postmeddelandet bekräftas kommer det att ha värdet 1, annars värdet 0. Som standard har detta fält värdet 0.
• Lösenord- För att spara lösenordet.

Alla fält av typen ”VARCHAR” måste ha standardvärdet NULL.

Om du vill att ditt registreringsformulär ska ha några fler fält kan du lägga till dem också här.

Allt, vårt bord användare redo. Låt oss gå vidare till nästa steg.

Databasanslutning

Vi har skapat databasen, nu måste vi ansluta till den. Vi ansluter med PHP MySQLi-tillägget.

Skapa en fil med namnet i mappen på vår webbplats dbconnect.php, och i den skriver vi följande manus:

DB-anslutningsfel... Felbeskrivning: ".mysqli_connect_error ()."

"; exit ();) // Ställ in anslutningskodningen $ mysqli-> set_charset (" utf8 "); // För enkelhets skull, låt oss lägga till en variabel här som innehåller namnet på vår webbplats $ address_site =" http: // testsite.local ";?>

Den här filen dbconnect.php måste anslutas för att bilda hanterare.

Var uppmärksam på variabeln $ address_site, här angav jag namnet på min testwebbplats som jag kommer att arbeta med. Du bör ange namnet på din webbplats därefter.

Platsstruktur

Låt oss nu titta på HTML-strukturen på vår webbplats.

Vi flyttar sidhuvudet och sidfoten till separata filer, header.php och footer.php... Vi kommer att inkludera dem på alla sidor. Nämligen på main (fil index.php), till sidan med registreringsformuläret (fil form_register.php) och till sidan med behörighetsformuläret (fil form_auth.php).

Blockera med våra länkar, checka in och tillstånd, lägg till sidhuvudet så att de visas på alla sidor. En länk kommer in registreringsblankett sida(fil form_register.php) och den andra till sidan med tillståndsformulär(fil form_auth.php).

Innehållet i header.php-filen:

Namn på vår webbplats

Som ett resultat ser huvudsidan ut så här:

Naturligtvis kan din webbplats ha en helt annan struktur, men det är inte viktigt för oss nu. Det viktigaste är att det finns länkar (knappar) för registrering och auktorisering.

Låt oss nu gå vidare till registreringsformuläret. Som du redan förstod har vi det i filen form_register.php.

Gå till databasen (i phpMyAdmin), öppna tabellstrukturen användare och se vilka fält vi behöver. Det betyder att vi behöver fält för att ange för- och efternamn, ett fält för att ange en postadress (e-post) och ett fält för att ange ett lösenord. Och av säkerhetsskäl lägger vi till ett fält för att ange captcha.

På servern kan olika fel uppstå till följd av behandlingen av registreringsformuläret, på grund av vilket användaren inte kan registrera sig. För att användaren ska förstå varför registreringen misslyckas är det därför nödvändigt att visa meddelanden om dessa fel.

Innan du visar formuläret, lägg till ett block för att visa felmeddelanden från sessionen.

Och en sak till, om användaren redan är auktoriserad och för intressets skull går han in på registreringssidan direkt genom att skriva till webbläsarens adressfält site_address / form_register.php, i det här fallet, i stället för registreringsformuläret, visar vi en titel för honom som säger att han redan har registrerats.

I allmänhet är filkoden form_register.php vi har det så här:

Du är redan registrerad

I webbläsaren ser registreringssidan ut så här:

Via krävs attribut, vi har gjort alla fält obligatoriska.

Var uppmärksam på registreringsformulärets kod var captcha visas:

Vi specificerade sökvägen till filen i värdet för src-attributet för bilden captcha.php som genererar denna captcha.

Låt oss titta på filkoden captcha.php:

Koden är väl kommenterad, så jag kommer att fokusera på bara en punkt.

Inuti funktionen imageTtfText (), sökvägen till teckensnittet anges verdana.ttf... Så för att captcha ska fungera korrekt måste vi skapa en mapp teckensnitt och lägg teckensnittsfilen där verdana.ttf... Du kan hitta den och ladda ner den från Internet eller ta den från arkivet med materialet i denna artikel.

Vi är klara med HTML-strukturen, det är dags att gå vidare.

Kontrollerar e-post för giltighet med jQuery

Varje formulär måste kontrollera giltigheten för de angivna uppgifterna, både på klientsidan (med JavaScript, jQuery) och på serversidan.

Vi måste ägna särskild uppmärksamhet åt fältet E-post. Det är mycket viktigt att den angivna postadressen är giltig.

För detta inmatningsfält har vi ställt in typen e-post (typ = "e-post"), detta varnar oss lite mot felaktiga format. Men det räcker inte, för genom kodinspektören som webbläsaren tillhandahåller kan du enkelt ändra värdet på attributet typ från e-post på text och det är det, vår check kommer inte längre att vara giltig.

Och i så fall måste vi göra en mer tillförlitlig kontroll. För detta kommer vi att använda jQuery-biblioteket från JavaScript.

För att ansluta jQuery-biblioteket i filen header.php mellan taggarna , före den avslutande taggen , lägg till den här raden:

Omedelbart efter den här raden, lägg till e-postvalideringskod. Här lägger vi till en kod för att kontrollera längden på det angivna lösenordet. Dess längd måste vara minst 6 tecken.

Med hjälp av detta skript kontrollerar vi att den angivna e-postadressen är giltig. Om användaren angav ett felaktigt e-postmeddelande visar vi honom ett fel angående detta och inaktiverar knappen för att skicka formuläret. Om allt är bra tar vi bort felet och aktiverar knappen för att skicka formuläret.

Och så är vi klara med att validera formuläret på klientsidan. Nu kan vi skicka det till servern, där vi också kommer att göra ett par kontroller och lägga till data i databasen.

Användarregistrering

Vi skickar formuläret för behandling till filen register.php, via POST-metoden. Namnet på denna hanteringsfil, specificerad i attributvärdet handling... Och sändningsmetoden anges i attributvärdet metod.

Öppnar den här filen register.php och det första vi behöver göra är att skriva en funktion för att starta en session och ansluta filen vi skapade tidigare dbconnect.php(I den här filen upprättade vi en anslutning till databasen). Och ändå, låt oss omedelbart förklara cellerna felmeddelanden och framgångsmeddelanden i det globala utbudet av sessionen. I felmeddelanden vi registrerar alla felmeddelanden som uppstår under bearbetningen av formuläret och i succes_messages, kommer vi att spela in glada meddelanden.

Innan du fortsätter måste vi kontrollera var formuläret som överlämnades alls... En angripare kan titta på värdet på ett attribut handling från formuläret och ta reda på vilken fil som bearbetar det här formuläret. Och han kan få idén att gå direkt till den här filen genom att skriva följande adress i webbläsarens adressfält: http: //arees_site/register.php

Därför måste vi kontrollera om det finns en cell i den globala POST-matrisen, vars namn matchar namnet på vår "Registrera" -knapp från formuläret. Således kontrollerar vi om "Registrera" -knappen har klickats eller inte.

Om en angripare försöker gå direkt till den här filen får han ett felmeddelande. Låt mig påminna dig om att variabeln $ address_site innehåller namnet på webbplatsen och att den deklareras i filen dbconnect.php.

Fel! hemsida.

"); } ?>

Värdet på captcha i sessionen tillkom när den genererades i filen captcha.php... Som en påminnelse visar jag dig denna kod från filen igen. captcha.php där captcha-värdet läggs till i sessionen:

Låt oss nu gå vidare till själva verifieringen. I arkivet register.php, inuti if-blocket, där vi kontrollerar om "Registrera" -knappen har klickats, eller snarare, där kommentaren anges " // (1) Plats för nästa kod"vi skriver:

// Kontrollera den resulterande captcha // Trimma mellanslag från början och slutet av raden $ captcha = trim ($ _ POST ["captcha"]); if (isset ($ _ POST ["captcha"]) &&! tom ($ captcha)) (// Jämför det mottagna värdet med värdet från sessionen. if (($ _ SESSION ["rand"]! = $ captcha ) && ($ _SESSION ["rand"]! = "")) (// Om captcha inte är korrekt returnerar vi användaren till registreringssidan och där visar vi ett felmeddelande om att han angav fel captcha . $ error_message = "

Fel! Du angav fel captcha

"; // Spara felmeddelandet i sessionen. $ _SESSION [" error_messages "] = $ error_message; // Återställ användaren till registreringssidans rubrik (" HTTP / 1.1 301 flyttas permanent "); rubrik (" Plats: " . $ Address_site. "/ Form_register.php"); // Stoppa skriptet exit ();) // (2) Plats för nästa kod kod) annars (// Om captcha inte passeras eller det är tomt exit ( "

Fel! Det finns ingen verifieringskod, det vill säga captcha-koden. Du kan gå till hemsidan.

"); }

Därefter måste vi bearbeta mottagna data från POST-matrisen. Först och främst måste vi kontrollera innehållet i den globala POST-matrisen, det vill säga om det finns celler vars namn matchar namnen på inmatningsfälten från vårt formulär.

Om cellen finns, trimmar vi mellanslagen från början och från slutet av raden från den här cellen, annars omdirigerar vi användaren tillbaka till sidan med registreringsformuläret.

När vi har trimmat mellanslag lägger vi till en rad till variabeln och kontrollerar att variabeln är tom, om den inte är tom, fortsätt sedan, annars omdirigerar vi användaren tillbaka till sidan med registreringsformuläret.

Klistra in den här koden på den angivna platsen " // (2) Plats för nästa kod".

/ * Kontrollera om den globala matrisen $ _POST innehåller data som skickas från formuläret och bifoga de inlämnade uppgifterna i vanliga variabler. * / If (isset ($ _ POST ["first_name"])) (// Trimma mellanslag från början och från slutet av strängen $ first_name = trim ($ _ POST ["first_name"]); // Kontrollera variabeln för tomhet om (! tom ($ first_name)) (// För säkerhet, konvertera specialtecken till HTML-enheter $ first_name = htmlspecialchars ($ first_name, ENT_QUOTES);) else (// Spara felmeddelandet i sessionen. $ _SESSION ["error_messages"]. = "

Ange ditt namn

Namnfält saknas

"; // Återvänd användaren till registreringssidans rubrik (" HTTP / 1.1 301 flyttas permanent "); rubrik (" Plats: ". $ Address_site." / Form_register.php "); // Stoppa skriptutgången (); ) if (isset ($ _ POST ["last_name"])) (// Trim blanksteg från början och slutet av strängen $ last_name = trim ($ _ POST ["last_name"]); om (! tom ($ last_name) )) (// För säkerhet, konvertera specialtecken till HTML-enheter $ last_name = htmlspecialchars ($ last_name, ENT_QUOTES);) else (// Spara felmeddelandet i sessionen. $ _SESSION ["error_messages"]. = "

Ange ditt efternamn

"; // Återvänd användaren till registreringssidans rubrik (" HTTP / 1.1 301 flyttas permanent "); rubrik (" Plats: ". $ Address_site." / Form_register.php "); // Stoppa skriptutgången (); )) else (// Spara felmeddelandet i sessionen. $ _SESSION ["error_messages"]. = "

Efternamnfält saknas

"; // Återvänd användaren till registreringssidans rubrik (" HTTP / 1.1 301 flyttas permanent "); rubrik (" Plats: ". $ Address_site." / Form_register.php "); // Stoppa skriptutgången (); ) if (isset ($ _ POST ["email"])) (// Trim blanksteg från början och slutet av raden $ email = trim ($ _ POST ["email"]); om (! tom ($ email) )) ($ email = htmlspecialchars ($ email, ENT_QUOTES); // (3) Plats för koden för att kontrollera formatet på e-postadressen och dess unikhet) annat (// Spara felmeddelandet i sessionen. $ _SESSION [ "error_messages"]. = "

Ange din e-postadress

"; // Återvänd användaren till registreringssidans rubrik (" HTTP / 1.1 301 flyttas permanent "); rubrik (" Plats: ". $ Address_site." / Form_register.php "); // Stoppa skriptutgången (); )) else (// Spara felmeddelandet i sessionen. $ _SESSION ["error_messages"]. = "

"; // Återvänd användaren till registreringssidans rubrik (" HTTP / 1.1 301 flyttas permanent "); rubrik (" Plats: ". $ Address_site." / Form_register.php "); // Stoppa skriptutgången (); ) if (isset ($ _ POST ["password"])) (// Trim blanksteg från början och slutet av strängen $ password = trim ($ _ POST ["password"]); om (! tom ($ password) )) ($ password = htmlspecialchars ($ password, ENT_QUOTES); // Kryptera paprol $ password = md5 ($ password. "top_secret");) else (// Spara felmeddelandet i sessionen. $ _SESSION ["error_messages "]. ="

Ange ditt lösenord

"; // Återvänd användaren till registreringssidans rubrik (" HTTP / 1.1 301 flyttas permanent "); rubrik (" Plats: ". $ Address_site." / Form_register.php "); // Stoppa skriptutgången (); )) else (// Spara felmeddelandet i sessionen. $ _SESSION ["error_messages"]. = "

"; // Återvänd användaren till registreringssidans rubrik (" HTTP / 1.1 301 flyttas permanent "); rubrik (" Plats: ". $ Address_site." / Form_register.php "); // Stoppa skriptutgången (); ) // (4) Plats för koden för att lägga till en användare i databasen

Särskilt viktigt är fältet e-post... Vi måste kontrollera formatet på den mottagna postadressen och dess unika egenskaper i databasen. Det vill säga, finns det någon användare som redan är registrerad med samma postadress?

På den angivna platsen " // (3) Kodens plats för att kontrollera postadressens format och dess unika egenskaper"lägg till följande kod:

// Kontrollera formatet på den mottagna e-postadressen med det reguljära uttrycket $ reg_email = "/^**@(+(*+)*\.)++/i"; // Om formatet på den mottagna e-postadressen inte matchar det reguljära uttrycket om (! Preg_match ($ reg_email, $ email)) (// Spara felmeddelandet i sessionen. $ _SESSION ["error_messages"]. = "

Du har angett ett ogiltigt e-postmeddelande

"; // Återvänd användaren till registreringssidans rubrik (" HTTP / 1.1 301 flyttas permanent "); rubrik (" Plats: ". $ Address_site." / Form_register.php "); // Stoppa skriptutgången (); ) // Vi kontrollerar om det redan finns en sådan adress i databasen. $ Result_query = $ mysqli-> fråga ("VÄLJ` e-post` FRÅN` användare` VAR` e-post` = "". $ E-post. "" "); // Om antalet mottagna rader är exakt en, så är en användare med den här e-postadressen redan registrerad om ($ result_query-> num_rows == 1) (// Om resultatet inte är falskt om (($ row = $ result_query) -> fetch_assoc ())! = false) (// Spara felmeddelandet i sessionen. $ _SESSION ["error_messages"]. = "

En användare med den här postadressen är redan registrerad

"; // Återvänd användaren till registreringssidans rubrik (" HTTP / 1.1 301 flyttas permanent "); rubrik (" Plats: ". $ Address_site." / Form_register.php ");) annat (// Spara felmeddelandet till sessionen. $ _SESSION ["error_messages"]. = "

Fel i databasfrågan

"; // Återvänd användaren till registreringssidans rubrik (" HTTP / 1.1 301 flyttas permanent "); rubrik (" Plats: ". $ Address_site." / Form_register.php ");) / * stäng markeringen * / $ result_query-> close (); // Stop the script exit ();) / * stänga urvalet * / $ result_query-> close ();

Och så är vi klara med alla kontroller, det är dags att lägga till användaren i databasen. På den angivna platsen " // (4) Plats för koden för att lägga till en användare i databasen"lägg till följande kod:

// Begäran om att lägga till en användare i databasen $ result_query_insert = $ mysqli-> fråga ("INSERT INTO` users" (first_name, last_name, email, password) VALUES ("". $ First_name. "", "". $ Last_name) . "", "". $ email. "", "". $ password. "") "); if (! $ result_query_insert) (// Spara felmeddelandet i sessionen. $ _SESSION ["error_messages"]. = "

Felförfrågan om att lägga till en användare i databasen

"; // Återvänd användaren till registreringssidans rubrik (" HTTP / 1.1 301 flyttas permanent "); rubrik (" Plats: ". $ Address_site." / Form_register.php "); // Stoppa skriptutgången (); ) else ($ _SESSION ["success_messages"] = "

Registreringen har slutförts !!!
Nu kan du logga in med ditt användarnamn och lösenord.

"; // Skicka användaren till behörighetssidans rubrik (" HTTP / 1.1 301 flyttas permanent "); rubrik (" Plats: ". $ Address_site." / Form_auth.php ");) / * Slutför begäran * / $ resultat_query_insert-> stäng (); // Stäng databasanslutningen $ mysqli-> stäng ();

Om ett fel uppstår i begäran om att lägga till en användare i databasen lägger vi till ett meddelande om detta fel i sessionen och returnerar användaren till registreringssidan.

Annars, om allt gick bra, lägger vi också till ett meddelande till sessionen, men redan trevligare, nämligen säger vi till användaren att registreringen lyckades. Och vi omdirigerar den till sidan med auktoriseringsformuläret.

Skriptet för att kontrollera formatet på e-postadressen och lösenordets längd finns i filen header.php, så det kommer också att agera på fält från denna form.

Sessionen startas också i filen header.php, så i filen form_auth.php du behöver inte starta sessionen, för vi får ett fel.

Som sagt fungerar skriptet för att kontrollera formatet på e-postadressen och lösenordets längd också här. Om användaren anger en felaktig e-postadress eller ett kort lösenord får han därför omedelbart ett felmeddelande. Och knappen att komma in blir inaktiva.

Efter att ha eliminerat fel, att komma in blir aktiv och användaren kan skicka formuläret till servern där det kommer att behandlas.

Användarbehörighet

Att tillskriva värde handling auktoriseringshandikappet har en fil auth.php betyder detta att formuläret kommer att behandlas i den här filen.

Och så, öppna filen auth.php och skriv koden för att bearbeta auktoriseringsformuläret. Det första du ska göra är att starta en session och ansluta filen dbconnect.php för att ansluta till databasen.

// Förklara en cell för att lägga till fel som kan uppstå när formuläret bearbetas. $ _SESSION ["error_messages"] = ""; // Förklara cellen för att lägga till lyckade meddelanden $ _SESSION ["success_messages"] = "";

/ * Kontrollera om formuläret skickades, det vill säga om du klickade på inloggningsknappen. Om ja, fortsätt, om inte, visa användaren ett felmeddelande om att han gick direkt till den här sidan. * / if (isset ($ _ POST ["btn_submit_auth"]) &&! tomt ($ _ POST ["btn_submit_auth"])) (// (1) Utrymme för nästa kod kod) annars (exit ("

Fel! Du har angett den här sidan direkt, så det finns ingen data att bearbeta. Du kan gå till hemsidan.

"); }

// Kontrollera den resulterande captchaen om (isset ($ _ POST ["captcha"])) (// Trimma mellanslag från början och slutet av raden $ captcha = trim ($ _ POST ["captcha"]); om (! Tom ($ captcha)) (// Jämför det mottagna värdet med värdet från sessionen. Om (($ _ SESSION ["rand"]! = $ Captcha) && ($ _SESSION ["rand"]! = " ")) (// Om captcha inte är korrekt returnerar vi användaren till auktoriseringssidan och där visar vi ett felmeddelande om att han angav fel captcha. $ Error_message ="

Fel! Du angav fel captcha

"; // Spara felmeddelandet i sessionen. $ _SESSION [" error_messages "] = $ error_message; // Återställ användaren till auktoriseringssidans rubrik (" HTTP / 1.1 301 flyttas permanent "); rubrik (" Plats: " . $ Address_site. "/ Form_auth.php"); // Stoppa skriptutgången ();)) annars ($ error_message = "

Fel! Inmatningsfältet för captcha får inte vara tomt.

"; // Spara felmeddelandet i sessionen. $ _SESSION [" error_messages "] = $ error_message; // Återställ användaren till auktoriseringssidans rubrik (" HTTP / 1.1 301 flyttas permanent "); rubrik (" Plats: " . $ Address_site. "/ Form_auth.php"); // Stoppa skriptutgången ();) // (2) Plats för bearbetning av e-postadressen // (3) Plats för bearbetning av lösenordet // (4) Plats för göra en fråga till databasen) annars (// Om captcha inte passeras exit ("

Fel! Det finns ingen verifieringskod, det vill säga captcha-koden. Du kan gå till hemsidan.

"); }

Om användaren angav verifieringskoden korrekt, fortsätt, annars returnerar vi den till auktoriseringssidan.

Kontrollerar postadressen

// Trimma mellanslag från början och slutet av raden $ email = trim ($ _ POST ["e-post"]); if (isset ($ _ POST ["email"])) (if (! tom ($ email)) ($ email = htmlspecialchars ($ email, ENT_QUOTES); // Kontrollera formatet på den mottagna e-postadressen med det reguljära uttrycket $ reg_email = "/^**@(+(*+)*\.)++/i"; // Om formatet på den mottagna e-postadressen inte matchar det reguljära uttrycket om (! preg_match ($ reg_email, $ e-post)) (// Spara till sessionens felmeddelande. $ _SESSION ["error_messages"]. = "

Du angav ett felaktigt e-postmeddelande

"; // Återvänd användaren till behörighetssidans rubrik (" HTTP / 1.1 301 flyttas permanent "); rubrik (" Plats: ". $ Address_site." / Form_auth.php "); // Stoppa skriptutgången (); )) else (// Spara felmeddelandet i sessionen. $ _SESSION ["error_messages"]. = "

Fältet för att ange postadressen (e-postadressen) ska inte vara tomt.

"; // Återvänd användaren till registreringssidans rubrik (" HTTP / 1.1 301 flyttas permanent "); rubrik (" Plats: ". $ Address_site." / Form_register.php "); // Stoppa skriptutgången (); )) else (// Spara felmeddelandet i sessionen. $ _SESSION ["error_messages"]. = "

E-postfält saknas

"; // Återvänd användaren till behörighetssidans rubrik (" HTTP / 1.1 301 flyttas permanent "); rubrik (" Plats: ". $ Address_site." / Form_auth.php "); // Stoppa skriptutgången (); ) // (3) Utrymme för bearbetning av lösenordet

Om användaren angav en postadress i fel format eller värdet på postadressfältet är tomt, returnerar vi det till auktoriseringssidan där vi visar ett meddelande om det.

Lösenordskoll

Nästa fält som ska bearbetas är lösenordsfältet. Till den angivna platsen " // (3) Plats för att behandla lösenordet", vi skriver:

If (isset ($ _ POST ["password"])) (// Trimma mellanslag från början och slutet av strängen $ password = trim ($ _ POST ["password"]); om (! Tom ($ password) )) ($ password = htmlspecialchars ($ password, ENT_QUOTES); // Kryptera lösenordet $ password = md5 ($ password. "top_secret");) else (// Spara felmeddelandet i sessionen. $ _SESSION ["error_messages "]. ="

Ange ditt lösenord

"; // Återvänd användaren till registreringssidans rubrik (" HTTP / 1.1 301 flyttas permanent "); rubrik (" Plats: ". $ Address_site." / Form_auth.php "); // Stoppa skriptutgången (); )) else (// Spara felmeddelandet i sessionen. $ _SESSION ["error_messages"]. = "

Det finns inget fält för att ange ett lösenord

"; // Återvänd användaren till registreringssidans rubrik (" HTTP / 1.1 301 flyttas permanent "); rubrik (" Plats: ". $ Address_site." / Form_auth.php "); // Stoppa skriptutgången (); )

Här, med hjälp av md5 () -funktionen, krypterar vi det mottagna lösenordet, eftersom vi i databasen har lösenord i krypterad form. Ytterligare ett hemligt ord i kryptering, i vårt fall " topp hemligt"måste vara den som användes vid registrering av användaren.

Nu måste du göra en fråga till databasen om ett exempel på en användare vars e-postadress är lika med den mottagna e-postadressen och lösenordet är lika med det mottagna lösenordet.

// Fråga i databasen om användarens val. $ result_query_select = $ mysqli-> fråga ("SELECT * FROM` users` WHERE email =" ". $ email." "AND password =" ". $ password." ""); if (! $ result_query_select) (// Spara felmeddelandet i sessionen. $ _SESSION ["error_messages"]. = "

Begär fel vid användarhämtning från databas

"; // Återvänd användaren till registreringssidans rubrik (" HTTP / 1.1 301 flyttas permanent "); rubrik (" Plats: ". $ Address_site." / Form_auth.php "); // Stoppa skriptutgången (); ) else (// Kontrollera om det inte finns någon användare med sådan data i databasen, visa sedan ett felmeddelande om ($ result_query_select-> num_rows == 1) (// Om de angivna uppgifterna matchar data från databasen, spara sedan inloggningen och lösenordet till sessionsmatrisen. $ _SESSION ["email"] = $ email; $ _SESSION ["password"] = $ lösenord; // Återvänd användaren till huvudsidans rubrik ("HTTP / 1.1 301 flyttas permanent") ); header ("Location:". $ Address_site. "/ index.php");) else (// Spara felmeddelandet i sessionen. $ _SESSION ["error_messages"]. = "

Felaktigt användarnamn och / eller lösenord

"; // Återvänd användaren till behörighetssidans rubrik (" HTTP / 1.1 301 flyttas permanent "); rubrik (" Plats: ". $ Address_site." / Form_auth.php "); // Stoppa skriptutgången (); ))

Logga ut från webbplatsen

Och det sista vi gör är förfarande för att lämna webbplatsen... För närvarande, i rubriken, visar vi länkar till auktorisationssidan och till registreringssidan.

I sidhuvudet (fil header.php), med hjälp av sessionen kontrollerar vi om användaren redan är inloggad. Om inte, visar vi registrerings- och auktorisationslänkarna, annars (om det är auktoriserat), istället för registrerings- och auktorisationslänkarna visar vi länken Produktion.

Modifierad kod från fil header.php:

checka in

Produktion

När du klickar på utgångslänken från webbplatsen kommer vi till filen logout.php, där vi helt enkelt förstör cellerna med postadress och lösenord från sessionen. Efter det återvänder vi användaren till sidan där länken klickades produktion.

Filkod logout.php:

Det är allt. Nu vet du hur implementera och behandla registrerings- och auktoriseringsformulär användare på din webbplats. Dessa formulär finns på nästan alla webbplatser, så varje programmerare borde veta hur man skapar dem.

Vi lärde oss också hur man validerar indata, både på klientsidan (i webbläsaren, med JavaScript, jQuery) och på serversidan (med PHP-språket). Vi lärde oss också implementera förfarandet för att lämna webbplatsen.

Alla skript testas och fungerar. Du kan ladda ner arkivet med filerna på denna lilla webbplats på den här länken.

I framtiden kommer jag att skriva en artikel där jag kommer att beskriva. Och jag planerar också att skriva en artikel där jag kommer att förklara (utan att ladda om sidan). Så, för att vara medveten om lanseringen av nya artiklar kan du prenumerera på min webbplats.

Om du har några frågor, snälla också, om du märker något misstag i artikeln, vänligen meddela mig om det.

Lektionsplan (del 5):

1. Skapa HTML-struktur för inloggningsformuläret
2. Vi behandlar de mottagna uppgifterna
3. Vi visar användarens hälsning i sidhuvudet

Gillade du artikeln?

Om du behöver göra en av avsnitten på din webbplats tillgänglig för en begränsad men obestämd krets av människor är det enklaste sättet att göra detta genom att registrera och auktorisera användare. Det finns många sätt att godkänna användare. Både webbserververktyg och verktyg för programmeringsspråk kan användas. Vi pratar om fallet där PHP-sessioner används.

Du skulle förmodligen vilja se ett modernare sätt att skapa en sådan form. Jag har fortfarande en komplett modern och uppdaterad presentation, men du kan se att feedbackformuläret kan byggas med objektorienterade tekniker i PHP.

Låt oss först diskutera alla steg som vi kommer att ta nästa. Vad behöver vi ens? Vi behöver ett skript som registrerar en användare, auktoriserar en användare, omdirigerar användaren någonstans efter auktoriseringen. Vi måste också skapa en sida som skyddas från åtkomst av obehöriga användare. För registrering och auktorisering måste vi skapa HTML-formulär. Vi lagrar information om registrerade användare i en databas. Det betyder att vi fortfarande behöver ett skript för att ansluta till DBMS. Allt vårt arbete kommer att utföras av funktioner som vi själva kommer att skriva. Vi sparar dessa funktioner i en separat fil.

Så vi behöver följande filer:

• anslutning till DBMS;
• anpassade funktioner;
• tillstånd;
• checka in;
• skyddad sida;
• användaravstängningsskript;
• ett skript som kontrollerar användarens auktoriseringsstatus;
• stilark för den enklaste utformningen av våra sidor.

Allt detta är meningslöst om du inte har en motsvarande tabell i din databas. Starta ditt DBMS-hanteringsverktyg (PhpMyAdmin eller kommandorad, beroende på vad som är bekvämast) och kör följande fråga i den:

SKAPA TABELL `användare` (` id` int (11) INTE NULL AUTO_INCREMENT, `login` tecken (16) INTE NULL,` lösenord` tecken (40) INTE NULL, `reg_date` tidsstämpel INTE NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (` id`)) MOTOR = MyISAM STANDARD CHARSET = utf8 AUTO_INCREMENT = 1;

Jag kommer att namnge våra skriptfiler så här (de kommer alla att finnas i samma katalog):

• database.php;
• funktioner.php;
• login.php;
• registrering.php;
• index.php;
• logout.php;
• checkAuth.php;
• style.css.

Syftet med var och en av dem är jag säker på är klart för dig. Låt oss börja med DBMS-anslutningsskriptet. Du har sett det förut. Spara bara koden för detta skript i en fil som heter database.php. Vi kommer att deklarera anpassade funktioner i filen functions.php. Hur kommer allt detta att fungera? En obehörig användare försöker komma åt det skyddade dokumentet index.php, systemet kontrollerar om användaren är auktoriserad, om användaren inte är auktoriserad omdirigeras han till auktoriseringssidan. På auktoriseringssidan ska användaren se ett auktoriseringsformulär. Vi gör det.

Din inloggning:

Ditt lösenord:

Registrera.

Nu måste vi ge vår form ett visst utseende. Samtidigt kommer vi att definiera reglerna för andra element. Jag ska ge dig hela innehållet i stilarket och se framåt.

/ * style.css-fil * / .row (marginal-botten: 10px; bredd: 220px;) .row-etikett (display: block; font-weight: bold;) .row input.text (font-size: 1.2em; padding: 2px 5px;) .to_reg (font-size: 0.9em;). instruktion (font-size: 0.8em; color: #aaaaaa; margin-left: 2px; cursor: default;) .error (color: red; marginal till vänster: 3 pixlar;)

Om allt är gjort korrekt bör du ha följande i din webbläsare:

Naturligtvis har vi inte en enda registrerad användare ännu, och för att logga in måste du registrera dig. Låt oss göra ett registreringsformulär.

Skriv in ditt användarnamn: " />

Skriv ditt lösenord:

Upprepa det angivna lösenordet:

Du har nog lagt märke till att det finns PHP-variabler i HTML-koden. De är innehållet i attributen för formulärens textfält, innehållet i behållarna avsedda för att visa fel. Men vi har inte initierat dessa variabler. Låt oss göra det.

Skriv in ditt användarnamn: " />

Användarnamnet får endast innehålla latinska tecken, siffror, symboler "_", "-", ".". Användarnamnets längd måste vara minst 4 tecken och inte längre än 16 tecken

Skriv ditt lösenord:

I lösenordet kan du bara använda latinska tecken, siffror, symboler "_", "!", "(", ")". Lösenordet måste innehålla minst sex tecken och inte längre än 16 tecken

Upprepa det angivna lösenordet:

Upprepa det tidigare angivna lösenordet

Det finns ingen parameter specificerad i formattaggens åtgärdsattribut. I det här fallet behandlas det i samma skript som det skickades in när du skickar formulärdata. Så vi måste skriva kod som bearbetar formulärdata. Men först, låt oss diskutera algoritmen för deras bearbetning.

Vi behöver inloggnings- och lösenordsfälten inte vara tomma. Då måste du kontrollera inloggningen för att uppfylla kraven. Lösenordet måste också uppfylla de beskrivna kraven, och det inmatade lösenordet måste matcha det och dessutom måste de vara identiska. Om något av dessa villkor inte är uppfyllda bör behandlingen av formulärdata stoppas, motsvarande anmälan ska skrivas till en rad felmeddelanden och den ska visas för användaren. För att underlätta för användaren kommer vi att spara inloggningen som han angett (om han angav den) och skriva värdet till arrayen $ field.

Om allt är bra i ditt webbläsarfönster, med hänvisning till registrerings.php-dokumentet, borde du se något så här:

Låt oss säga att användaren klickar på registreringsknappen utan att fylla i formulärfälten. Enligt vår algoritm kan inloggning och lösenord inte vara tomma. Om detta villkor inte är uppfyllt är registrering inte möjlig. Vi har i åtanke att behandlingen av formulärdata sker i det aktuella skriptet. Så vi måste ändra koden genom att lägga till lämpliga kontroller. Vi kommer omedelbart att fastställa följande kontroller. Om både inloggning och lösenord anges måste du kontrollera att de uppfyller de angivna kraven. För att kontrollera inloggningen och lösenordet skapar vi anpassade funktioner i filen functions.php.

/ ** * functions.php * Fil med anpassade funktioner * / // Inkludera en fil med parametrar för anslutning till DBMS require_once ("database.php"); // Kontrollera användarnamnsfunktionen checkLogin ($ str) (// Initiera variabeln med ett möjligt felmeddelande $ error = ""; // Om det inte finns någon inloggningssträng, returnera felmeddelandet om (! $ Str) ($ error = "Du har inte angett ett användarnamn"; returnera $ fel;) / ** * Kontrollera användarnamnet med reguljära uttryck * Inloggningen måste vara minst 4, inte längre än 16 tecken * Den måste innehålla latinska tecken, siffror, * den kan vara tecknen "_", "-", "." * / $ mönster = "/ ^ [-_. az \ d] (4,16) $ / i"; $ resultat = preg_match ($ mönster, $ str ); // Om kontrollen misslyckas, returnera ett felmeddelande om (! $ Resultat) ($ error = "Ogiltiga tecken i användarnamnet eller användarnamnet är för kort (långt)"; returnera $ error;) // Om allt är bra, returnera true return true;) // Kontrollera användarens lösenordsfunktion checkPassword ($ str) (// Initiera variabeln med ett möjligt felmeddelande $ error = ""; // Om det inte finns någon en sträng med inloggning visas, returnera ett felmeddelande om (! $ str) ($ error = "Du har inte angett ett lösenord"; returnera $ fel; ) / ** * Kontrollera användarens lösenord med reguljära uttryck * Lösenordet får inte vara kortare än 6, inte längre än 16 tecken * Det måste innehålla latinska tecken, siffror, * det kan innehålla symbolerna "_", "!", "( ",") "* / $ mönster =" / ^ [_!) (. az \ d "(6,16) $ / i"; $ resultat = preg_match ($ mönster, $ str); // Om rutan misslyckades, returnera ett felmeddelande om (! $ resultat) ($ error = "Ogiltiga tecken i användarlösenordet eller lösenordet är för kort (långt)"; returnera $ error;) // Om allt är bra, returnera true return true ;)

Nu måste vi ändra filen registry.php för att använda de funktioner vi har deklarerat. Vi lägger till ett villkor i skriptet för att kontrollera att registreringsknappen klickas. Inuti detta tillstånd startar en inloggning och lösenordskontroll. Om någon av kontrollerna misslyckas återger vi formuläret och visar ett felmeddelande. Om det inte finns några fel registrerar vi användaren, vi visar inte längre registreringsformuläret, informerar användaren om lyckad registrering och använder funktionen header () för att omdirigera honom till auktoriseringsformuläret.

Du har registrerat dig i systemet. Du kommer nu att omdirigeras till inloggningssidan. Om detta inte hände, gå till det med en direktlänk.

"; header (" Refresh: 5; URL = login.php ");) // Annars informera användaren om felet annat ($ -fel [" full_fel "] = $ reg;)))?>

Skriv in ditt användarnamn: " />

Användarnamnet får endast innehålla latinska tecken, siffror, symboler "_", "-", ".". Användarnamnets längd måste vara minst 4 tecken och inte längre än 16 tecken

Skriv ditt lösenord:

I lösenordet kan du bara använda latinska tecken, siffror, symboler "_", "!", "(", ")". Lösenordet måste innehålla minst sex tecken och inte längre än 16 tecken

Upprepa det angivna lösenordet:

Upprepa det tidigare angivna lösenordet

Du borde ha lagt märke till en ny funktion i skriptet - registrering (). Och vi har inte meddelat det ännu. Låt oss göra det.

// Registrering av användarregistreringsfunktion ($ login, $ lösenord) (// Initiera en variabel med ett möjligt felmeddelande $ error = ""; // Om det inte finns någon inloggningssträng, returnera ett felmeddelande om (! $ Login) ($ error = "Inloggning ej angiven"; returnera $ error;) elseif (! $ lösenord) ($ error = "Lösenord inte specificerat"; returnera $ error;) // Kontrollera om användaren redan är registrerad // Anslut till DBMS connect (); // Skriv en frågesträng $ sql = "VÄLJ` id` FRÅN` användare` VAR` inloggning` = "". $ Inloggning. "" "; // Gör en fråga till databasen $ query = mysql_query ($ sql) eller die (""); // Titta på antalet användare med den här inloggningen, om det finns minst en, // returnera ett felmeddelande om (mysql_num_rows ($ fråga)> 0) ($ error = "Användaren med den angivna inloggningen är redan registrerad"; returnera $ fel;) // Om det inte finns någon sådan användare, registrera den // Skriv en frågesträng $ sql = "INSERT INTO`-användare" ("id", "login `,` lösenord`) VÄRDEN (NULL, "". $ login. " "," ". $ lösenord. "") "; // Gör en fråga till databasen $ query = mysql_query ($ sql) eller die ("

Det gick inte att lägga till användare: ". Mysql_error ().". Ett fel inträffade vid raden ". __LINE__."

"); // Glöm inte att koppla bort från DBMS mysql_close (); // Return true, vilket indikerar lyckad användarregistrering return true;)

Om allt är ok registreras din användare. Du kan testa formuläret. Försök att registrera användare med samma inloggningar. Efter lyckad registrering kommer användaren att omdirigeras till auktoriseringsformuläret. Tidigare skapade vi just markeringen för att visa detta formulär. Eftersom det inte finns någon parameter angiven i dess åtgärdsattribut kommer de data som skickas in i formuläret att behandlas i samma skript. Så vi måste skriva koden för bearbetning och lägga till den i login.php-dokumentet.

Din inloggning:

Ditt lösenord:

Om du inte är registrerad i systemet, registrera dig.

Du har nog lagt märke till att vi i auktoriseringsskriptet har en annan okänd funktion - auktorisering (). Denna funktion bör godkänna användaren genom att först kontrollera om det finns en registrerad användare i databasen med samma användarnamn och lösenord. Om en sådan användare inte hittas avbryts auktoriseringen och ett felmeddelande visas på skärmen. Om kontrollen lyckas, startar auktoriseringsfunktionen () en session och skriver användarnamn och lösenordsvärden till den, informerar skriptet om den lyckade auktoriseringen och skriptet omdirigerar användaren till den skyddade resurssidan.

/ ** * Användarbehörighetsfunktion. * Auktorisering av användare hos oss kommer att ske * med PHP-sessioner. * / funktionsbehörighet ($ login, $ lösenord) (// Initiera en variabel med ett möjligt felmeddelande $ error = ""; // Om det inte finns någon inloggningsrad, returnera ett felmeddelande om (! $ login) ($ error = "Inloggning ej angiven"; returnera $ fel;) elseif (! $ Lösenord) ($ error = "Lösenord har inte specificerats"; returnera $ fel;) // Kontrollera om användaren redan är registrerad // Anslut till DBMS-anslutningen ( ); // Vi måste kontrollera om det finns en sådan användare bland de registrerade // Komponera en frågestränga $ sql = "VÄLJ` id` FRÅN` användare` VAR` inloggning` = "". $ Inloggning. "" OCH ` password` = "". $ Password. "" "; // Kör frågan $ query = mysql_query ($ sql) eller die ("

Det gick inte att utföra frågan: ". Mysql_error ().". Ett fel inträffade vid raden ". __LINE__."

"); // Om det inte finns någon användare med sådan data, returnera ett felmeddelande om (mysql_num_rows ($ fråga) == 0) ($ error =" Användaren med de angivna uppgifterna är inte registrerad "; returnera $ error;) // Om användaren finns, starta session session_start (); // Och skriv användarnamnet och lösenordet i det // För detta använder vi den superglobala arrayen $ _SESSION $ _SESSION ["login"] = $ login; $ _SESSION [" lösenord "] = $ lösenord; / / Glöm inte att stänga databasanslutningen mysql_close (); // Returnera sant för meddelandet om lyckad användarbehörighet returnera sant;)

När en användare går in på en skyddad sida bör du kontrollera att hans auktoriseringsdata är korrekta. För detta behöver vi ytterligare en anpassad funktion. Låt oss kalla det checkAuth (). Dess uppgift kommer att vara att kontrollera användarens behörighetsdata med de som lagras i vår databas. Om uppgifterna inte matchar kommer användaren att omdirigeras till behörighetssidan.

Function checkAuth ($ login, $ password) (// Om det inte finns något användarnamn eller lösenord, returnera false om (! $ Login ||! $ Password) returnera false; // Kontrollera om en sådan användare är registrerad // Anslut till DBMS connect (); // Skapa en frågesträng $ sql = "VÄLJ` id` FRÅN` användare` VAR` inloggning` = "". $ Inloggning. "" OCH `lösenord` =" ". $ Lösenord." "" ; // Utför frågan $ query = mysql_query ($ sql) eller die ("

Det gick inte att utföra frågan: ". Mysql_error ().". Ett fel inträffade vid raden ". __LINE__."

"); // Om det inte finns någon användare med sådan data, returnera falsk; om (mysql_num_rows ($ fråga) == 0) (returnera false;) // Glöm inte att stänga databasanslutningen mysql_close (); // Annars , returnera true return true;)

Nu när användaren är på den säkra sidan måste vi anropa valideringsfunktionen för auktoriseringsdata. Vi placerar samtals- och kontrollskriptet i en separat checkAuth.php-fil och ansluter det till de sidor som kommer att stängas för allmänhetens åtkomst.

/ ** * Skript för kontroll av användarbehörighet * / // Vi startar en session från vilken vi extraherar inloggning och lösenord // för inloggade användare session_start (); // Inkludera en fil med anpassade funktioner require_once ("functions.php"); / ** * För att avgöra om en användare är inloggad, måste vi * kontrollera om det finns poster i databasen för hans inloggning * och lösenord. För att göra detta använder vi den anpassade funktionen * för att kontrollera inloggade användardata. * Om den här funktionen returnerar falsk, finns det ingen behörighet. * I avsaknad av auktorisering omdirigerar vi bara * användaren till auktoriseringssidan. * / // Om sessionen innehåller både inloggnings- och lösenordsdata, // kontrollera dem om (isset ($ _ SESSION ["login"]) && $ _SESSION ["login"] && isset ($ _ SESSION ["password"] ) && $ _SESSION ["lösenord"]) (// Om valideringen av befintlig data misslyckas om (! CheckAuth ($ _ SESSION ["inloggning"), $ _SESSION ["lösenord"])) (// Omdirigera användaren till sidhuvud för auktorisering ("plats: login.php"); // Sluta köra skriptutgången;)) // Om det inte finns någon data om inloggningen eller användarens lösenord, // anser att det inte finns någon behörighet, omdiriger användare // till auktoriseringssidan annars (rubrik ("plats: login.php"); // Avbryt skriptutgången;)

Låt oss nu skapa koden för vår säkra sida. Det blir ganska enkelt.

Framgångsrik auktorisering.

Du har öppnat en säker sida. Du kan logga ut från systemet.

Som du kan se inkluderar vi bara en fil i det säkra dokumentet - checkAuth.php. Alla andra filer ingår i andra skript. Därför ser vår kod inte besvärlig ut. Vi organiserade registrering och godkännande av användare. Nu måste du tillåta användare att logga ut. För att göra detta skapar vi ett skript i logout.php-filen.

/ ** * Användaravloggningsskript. Eftersom användare * är auktoriserade genom sessioner, sparas deras användarnamn och lösenord * i den superglobala arrayen $ _SESSION. För att logga ut från systemet förstör du bara värdena * för $ _SESSION ["login"] och $ _SESSION ["password"], efter * som vi omdirigerar användaren till auktoriseringssidan * / // Var säker för att starta session session_start (); unset ($ _ SESSION ["login"]); unset ($ _ SESSION ["password"]); rubrik ("plats: login.php");

Skriptet för registrering, auktorisering och användarverifiering är klart. Du kan använda den hemma, komplettera den, ändra den efter dina behov. Om du har några frågor kan du ställa dem i kommentarerna. Du kan ladda ner alla filer som nämns här, packade i ett arkiv.

P.S. Jag är medveten om att det är bättre att skriva objektorienterad kod, jag vet att det inte är värt att överföra och lagra lösenordet i klartext, att informationen som matas in i databasen måste kontrolleras i förväg. Jag vet. Jag kommer inte att prata om detta här.

Allt händer under PHP-kontroll och data lagras i en MySQL-databas.

Systemet använder en utmärkt skjutpanel utvecklad av Web-kreation.

Steg 1 - MySQL

Först måste vi skapa en tabell som innehåller all information om registrerade användare. Begäran koden finns i filen table.sql i källarkivet.

table.sql

--
- Strukturen på tabellen `tz_members`
--
SKAPA TABELL "tz_members" (
`id` int (11) INTE NULL auto_inkrement,
`usr` varchar (32) sortera utf8_unicode_ci INTE NULL standard" ",
"pass" varchar (32) sortera utf8_unicode_ci INTE NULL standard "",
"email" varchar (255) sortera utf8_unicode_ci INTE NULL standard "",
`regIP` varchar (15) sortera utf8_unicode_ci INTE NULL standard" ",
`dt` datetime INTE NULL standard" 0000-00-00 00:00:00 ",
PRIMÄR NYCKEL ("id"),
UNIK KEY `usr` (` usr`)
) MOTOR = MyISAM STANDARD CHARSET = utf8 COLLATE = utf8_unicode_ci;

Vi definierar id som ett heltal med ett alternativ auto_increment- den tilldelas automatiskt för varje ny registrerad användare. Också usr definierad som unik nyckel- tabellen tillåter inte att det finns två poster med samma användarnamn.

Senare kommer vi att använda de angivna egenskaperna under registreringsprocessen när användarnamnet anges.

När du har skapat tabellen måste du fylla i variablerna för att ansluta till din databas i filen connect.php så att koden kan köras på din server.

Steg 2 - XHTML

Först måste vi bädda in formuläret för webbskapande på vår sida.

demo.php

Det finns PHP-uttalanden på flera ställen i koden som kontrollerar om $ _SESSION ["usr"] eller $ _SESSION ["id"]... De är bara sanna om besökaren på sidan är en registrerad användare, vilket gör att vi kan visa dolt innehåll för registrerade besökare.

Efter formuläret placerar vi resten av sidinnehållet.