Een volledig uitgelicht aanmeldingssysteem bouwen

In deze tutorial zal ik je laten zien hoe je een eenvoudig inlogsysteem kunt maken bestaande uit een inlogpagina, registratiepagina, vergeten wachtwoordpagina, e-mailactivering, uitlogpagina en tot slot een online pagina van een gebruiker. Ik heb deze tutorial gemaakt om voornamelijk nieuwe-naar-PHP-ontwikkelaars te targeten. Vanwege het feit dat ik begon, merkte ik dat er te weinig standaard login-systemen waren. Daarom besloot ik om er zelf een te maken van hoogwaardig advies over hoe je je eerste login-systeem kunt maken met een online script voor gebruikers!


1. Een standaard stylesheet maken

We gaan een zeer eenvoudige CSS-stylesheet maken om een ​​klein beetje ontwerp toe te voegen en de manier waarop dit inlogsysteem eruitziet op te ruimen. Dus begin ook met het openen van je teksteditor en we kunnen beginnen met het maken van onze styelsheet.

body font-family: arial; lettergrootte: 10pt;  tabel font-size: 10pt; marge: 0 auto;  #border border: 2px solid # 999; achtergrond: #CCC; opvulling: 15px; marge: 0 auto; breedte: 300 px; 

Sla dit bestand op als style.css dus we kunnen er altijd weer naar verwijzen als dat nodig is. Daar hebben we ons eenvoudige stylesheet! Nu kunnen we beginnen met het maken van onze pagina's zonder ons al te veel zorgen te maken of ze er redelijk goed uitzien.



2. De aanmeldingspagina maken

Oké, we hebben een stylesheet gedefinieerd, nu is het tijd om dingen op onze pagina's weer te geven. Open een nieuw bestand in je teksteditor, dit wordt het onze login.php pagina!

  
Gebruikersnaam:
Wachtwoord:
Registreer | Pass vergeten

Oké, dit is wat onze login.php bestand zal er uit zien voordat we onze PHP krijgen waardoor het inlogformulier correct functioneert. Op dit moment zul je merken dat het niet werkt. Dit komt omdat we de pagina niet hebben verteld wat te doen als het formulier wordt ingediend.

Planning

Laten we nu wat planning maken voordat we in de PHP duiken. We moeten ons afvragen: "Wat gaat de pagina controleren als het formulier wordt ingediend?". Voor de inlogpagina hier is een lijst van wat we gaan controleren -

  • Dat zowel de gebruikersnaam als het wachtwoord vak zijn ingevuld
  • Dat de opgegeven gebruikersnaam bestaat in onze database
  • Dat als de gebruikersnaam in onze database bestaat, het wachtwoord overeenkomt met het wachtwoord voor de gebruikersnaam
  • Eindelijk, dat de gebruiker zijn account heeft geactiveerd

Als de PHP ja kan antwoorden op alle vier van die punten, log dan de gebruiker in. Nu zul je in die vier punten merken dat er een database werd genoemd. We gaan een MySQL-database gebruiken om alle informatie over al onze gebruikers op te slaan. Dus voordat we aan de slag gaan met PHP, moeten we deze database maken. Op dit moment is een beetje meer planning nodig. We moeten beslissen welke informatie we over de gebruikers moeten opslaan, welke soorten gegevens we opslaan, hebben we een standaardwaarde, enzovoort nodig. Hier is mijn plan hieronder -

  • We moeten een gebruikersnaam voor de gebruiker opslaan die een varchar zal zijn
  • We hebben een wachtwoord nodig dat ook een varchar zal zijn
  • We hebben een e-mail nodig voor onze e-mailactiveringsfunctie, dit kan ook varchar zijn
  • Een veldtelling is of het account is geactiveerd of niet, dit is een geheel getal
  • Een veld met informatie over of de gebruiker online is of niet, dit is een geheel getal
  • Eindelijk, een veld geeft ons een tijd dat de gebruiker geregistreerd is, dit is ook een geheel getal

De database bouwen

Nu kunnen we precies zien hoe onze tafel in onze database moet worden gebouwd. Maak eerst een database met de naam loginTut. Vervolgens willen we in deze database de SQL uitvoeren die ik hieronder heb verstrekt -

Notitie: Alle tabellen bevatten een primaire sleutel. Dit is een unieke ID voor elke rij in de tabel!

MAAK TAFEL ALS NIET BESTAAT 'gebruikers' ('id' int (11) NIET NULL auto_increment, 'gebruikersnaam' varchar (32) NOT NULL, 'wachtwoord' varchar (32) NOT NULL, 'online' int (20) NIET NULL standaard '0', 'email' varchar (100) NOT NULL, 'active' int (1) NOT NULL standaard '0', 'rtime' int (20) NOT NULL standaard '0', PRIMARY KEY ('id')) ENGINE = MyISAM DEFAULT CHARSET = utf8;

Nu hebben we een tabel om alle informatie op te slaan die we nodig hebben over onze gebruikers. Laten we een gebruiker toevoegen voor testdoeleinden. Om dit te doen, voert u de onderstaande SQL uit -

INSERT INTO 'gebruikers' ('id', 'gebruikersnaam', 'wachtwoord', 'online', 'email', 'actief', 'rtime') WAARDEN (1, 'testen', 'testen', 0, 'nep @ noemail.co.uk ', 0, 0);

Dus we hebben nu één gebruiker met de gebruikersnaam testing, het wachtwoord testing en e-mail [email protected]. Nu kunnen we naar de PHP gaan en het inlogformulier zien werken!

De PHP toevoegen

Allereerst moeten we nadenken over beveiliging en hoe veilig dit inlogformulier zal zijn. Om SQL Injection te voorkomen, wat een veel voorkomende vorm van database-hacking is, gaan we een functie maken die alle strings die in de database zijn opgeslagen beschermt. Dit zullen we in een extern bestand plaatsen genaamd functions.php. Hier is de bron -

 

Deze functie snijdt onze string (snijd lege ruimte aan het begin of einde van de string weg), strip tags (verwijder alle html- en PHP-tags in de tekenreeks) en voeg vervolgens schuine strepen toe aan de tekenreeks-ontsnappende spraaklabels (') en aanhalingstekens (").

Terug naar login.php

Nu hebben we een plaats om gebruikersinformatie op te slaan en te controleren, een functie om strings te beschermen die worden doorgegeven aan de database, en een mooie lay-out voor onze inlogpagina! Hieronder ziet u de code met commentaar voor onze login.php bestand met de nieuw toegevoegde PHP-

  U moet een a invullen Gebruikersnaam en een Wachtwoord!"; else // if the were continue checking // select alle rijen uit de tabel waarvan de gebruikersnaam overeenkomt met die van de gebruiker $ res = mysql_query (" SELECT * FROM "gebruikers 'WHERE' gebruikersnaam '='". $ gebruikersnaam. "'"); $ num = mysql_num_rows ($ res); // controleer of er geen overeenkomst was als ($ num == 0) // indien geen echo van foutmelding wordt weergegeven "
De Gebruikersnaam je geleverde bestaat niet!
"; else // als er een overeenkomst was, controleer dan // selecteer alle rijen waarbij de gebruikersnaam en het wachtwoord overeenkomen met degene die door de gebruiker zijn ingediend $ res = mysql_query (" SELECT * FROM "gebruikers 'WHERE' gebruikersnaam '='" . $ gebruikersnaam. "'AND' wachtwoord '='". $ wachtwoord. "'"); $ num = mysql_num_rows ($ res); // controleer of er geen overeenkomst was als ($ num == 0) / / als echo niet wordt weergegeven "
De Wachtwoord uw geleverde komt niet overeen met die voor die gebruikersnaam!
"; else // als er continue wordt gecontroleerd // alle velden van de juiste rij in een associatieve array splitsen $ row = mysql_fetch_assoc ($ res); // controleer om te zien of de gebruiker zijn account nog niet heeft geactiveerd ( $ row ['active']! = 1) // if not display error echo "
Dat heb je nog niet gedaan geactiveerde jouw rekening!
"; else // als ze zich aanmelden // de aanmeldingssessie opslaan waarin id wordt opgeslagen - we gebruiken dit om te zien of ze zijn aangemeld of niet $ _SESSION ['uid'] = $ row ['id'] ; // toon bericht echo "
Je bent succesvol ingelogd!
"; // update het online veld tot 50 seconden in de toekomst $ time = date ('U') + 50; mysql_query (" UPDATE "gebruikers 'SET' online '='". $ time. "'WHERE' id ' = '". $ _ SESSION [' uid ']."' "); // leid ze om naar de usersonline paginakop ('Locatie: usersOnline.php');?>
Gebruikersnaam:
Wachtwoord:
Registreer | Pass vergeten

Het meeste hiervan wordt verklaard door de opmerking, maar een deel dat ik niet heb uitgelegd, is het online veld. Toen u zich aanmeldde, hebben we het online-veld 50 seconden later bijgewerkt. De datum ('U') functie geeft ons het aantal seconden sinds 1 januari 1970 00:00:00 GMT (Unix epoch). Dit betekent dat de datum ('U') nooit kleiner wordt, de waarde zal altijd toenemen. Als we het online veld instellen op 50 seconden voor nu dan wanneer Gebruikers online pagina is geladen kunnen we controleren om alle gebruikers te vinden waar de online waarde meer is dan het tijdstip waarop de pagina is geladen, als dit het geval is, laat dan elk van hun namen zien.

Voel je nu vrij om je inlogpagina te testen. Zorg ervoor dat alle controles correct worden uitgevoerd en dat wanneer u eenmaal bent aangemeld, u wordt omgeleid naar de niet-bestaande online pagina van gebruikers. U kunt ook controleren of het online-veld met succes is bijgewerkt door de tabel van uw gebruikers te controleren!



3. De registratiepagina maken

Wat heb je aan een inlogpagina zonder een registerpagina? Helemaal niet, dus ik denk dat dit de volgende stap is die we kunnen nemen. Het maken van de registerpagina lijkt sterk op het maken van onze inlogpagina. We moeten een basiscontrole uitvoeren om te zien of de gewenste gebruikersnaam al is gebruikt, maar er gebeurt hier niets nieuws. Hieronder ziet u de gecertificeerde registerpaginacode -

  Je moet alle vereiste filds invullen! "; Else // als ze allemaal zijn ingevuld doorgaan met controleren // Controleer of de gewenste gebruikersnaam meer dan 32 of minder dan 3 charcters lang is if (strlen ($ username)> 32 || strlen ($ gebruikersnaam) < 3) //if it is display error message echo "
Jouw Gebruikersnaam moet tussen de 3 en 32 tekens lang zijn!
"; else // indien niet doorgaan met controleren // selecteer alle rijen uit de tabel met gebruikers waarbij de geposte gebruikersnaam overeenkomt met de opgeslagen gebruikersnaam $ res = mysql_query (" SELECT * FROM "gebruikers 'WHERE' gebruikersnaam '='". $ gebruikersnaam. "'"); $ num = mysql_num_rows ($ res); // controleer of er een overeenkomst is als ($ num == 1) // als ja de gebruikersnaam is ingevuld, dus weergave foutmelding echo "
De Gebruikersnaam je hebt gekozen is al bezet!
"; else // anders doorgaan met controleren // controleer of het wachtwoord korter is dan 5 of langer dan 32 tekens als (strlen ($ wachtwoord) < 5 || strlen($password) > 32) // als het echo is van het weergave foutbericht "
Jouw Wachtwoord moet tussen de 5 en 32 tekens lang zijn!
"; else // else ga door met controleren // controleer of het wachtwoord en het wachtwoord bevestigen als ($ wachtwoord! = $ passconf) // if not display error echo"
De Wachtwoord je leverde niet hetzelfde als het bevestigingswachtwoord!
"; else // anders doorgaan met controleren // Stel het formaat in waarop we het e-mailadres willen bekijken tegen $ checkemail =" /^[a-z0-9]+([_\\ .][a-z0- 9] +) * @ ([a-z0-9] + ([\ .-] [a-z0-9] +) *) + \\. [Az] 2, $ / i "; // controleer of de formaten overeenkomen met (! preg_match ($ checkemail, $ email)) // if not display error echo "
De E-mail is niet geldig, moet [email protected] zijn!
"; else // als ze dat doen, ga je door met // in te vullen alle rijen uit onze gebruikers tabel waar de e-mails overeenkomen met $ res1 = mysql_query (" SELECT * FROM "gebruikers 'WHERE' email '='". $ email. " '"); $ num1 = mysql_num_rows ($ res1); // als het aantal overeenkomsten 1 is als ($ num1 == 1) // het opgegeven e-mailadres is ingevuld, dus weergave foutmelding echo"
De E-mail adres dat je hebt opgegeven, is al in gebruik
"; else // eindelijk, anders registreren daar account // tijd van registreren (unix) $ registerTime = datum ('U'); // maak een code voor onze activeringssleutel $ code = md5 ($ gebruikersnaam). $ registerTime; // plaats de rij in de database $ res2 = mysql_query ("INSERT INTO 'gebruikers' ('gebruikersnaam', 'wachtwoord', 'email', 'rtime') VALUES ('". $ gebruikersnaam. "', ' ". $ wachtwoord." ',' ". $ email." ',' ". $ registerTime." ') "); // stuur de e-mail met een e-mail met de activeringslink naar het opgegeven e-mailadres ($ email , $ INFO ['chatName']. 'Registratiebevestiging', 'Bedankt voor uw registratie'. $ Gebruikersnaam. ", \ N \ nHier ziet u uw activeringslink. Als de link niet werkt, kopieert u deze en plakt u deze in uw browser adresbalk. \ n \ nhttp: //www.yourwebsitehere.co.uk/activate.php? code = ". $ code, 'From: [email protected]'); // toon de echo van het succesbericht "
Je hebt je geregistreerd. Ga naar je inbox om je account te activeren!
";?>
Gebruikersnaam:
Wachtwoord:
Bevestig wachtwoord:
E-mail:
Inloggen | Pass vergeten

Nieuwe functies

Dit bestand bevat een aantal nieuwe dingen waar je misschien nog niet bekend mee bent, daarom zal ik alles bespreken. Ten eerste, de functie strlen (), dit geeft het aantal tekens in een tekenreeks waardoor we kunnen controleren hoe lang strings zijn. Vervolgens de functie preg_match (), dit controleert of de opmaak van een tekenreeks overeenkomt met de opmaak die u opgeeft (in dit geval een e-mailindeling). Eindelijk de functie mail (), deze verzendt een e-mail van de server naar elke e-mail van uw keuze, die alles bevat wat u maar wilt. Bewaar dit bestand als register.php

Nu kunt u uw registratiepagina testen, u kunt zien wanneer u uw juiste e-mailadres invoert, u ontvangt een e-mail met daarin een activeringslink. U kunt ook zien dat een rij met de gegevens die in het formulier zijn ingevuld, wordt ingevoerd in de tabel met gebruikers. De waarde van actief is 0 waaruit blijkt dat dit account nog niet is geactiveerd!



4. Activeer uw accountpagina

Dit is slechts een kleine pagina met zeer weinig code vereist, maar het is nog steeds erg belangrijk en speelt een grote rol in een veilig inlogsysteem. De bron voor deze pagina wordt hieronder getoond - activate.php

  Helaas is daar een fout opgetreden! "; Else // anderszins ga door met de check // selecteer alle rijen waar de accounts niet actief zijn $ res = mysql_query (" SELECT * FROM "gebruikers 'WHERE' active '=' 0 '"); // doorloop dit script voor elke rij die niet actief is terwijl ($ row = mysql_fetch_assoc ($ res)) // controleer of de code uit de rij in de database overeenkomt met die van de gebruiker if ($ code == md5 ($ row ['gebruikersnaam']). $ row ['rtime']) // als het dan zijn account activeert en het succes bericht weergeeft $ res1 = mysql_query ("UPDATE" gebruikers 'SET' active '= '1' WHERE 'id' = '". $ Row [' id ']."' "); Echo"
Je hebt je account succesvol geactiveerd!
";?>

Er zijn twee nieuwe dingen in dit bestand, we gebruiken de GET methode in plaats van POST en ook gebruiken we een while () loop. De get-methode haalt alleen gegevens uit de adresbalk bovenaan de browser van de gebruiker (in dit geval wordt de code verzonden met de e-mail naar hun e-mailadres). De while () -lus perfectioneert voor het controleren van meerdere rijen met gegevens uit de database (in dit geval om te zien of er een overeenkomst is met de codes).

Overzicht zo ver

Tot nu toe had je veel nieuwe dingen moeten leren als je nieuw bent in PHP en met succes een helft van een inlogsysteem hebt gemaakt. De pagina's die tot nu toe zijn voltooid zijn -

  • style.css
  • functions.php
  • login.php
  • register.php
  • activate.php

Enkele handige functies die tot nu toe zijn gebruikt zijn -

  • mysql_connect () - Maak verbinding met een MySQL-database
  • mysql_select_db () - Selecteer de database waarmee we moeten werken
  • mysql_query () - Stuur querys naar de database om gegevens te verkrijgen, in te voegen of te bewerken
  • trim () - Knip ongewenste witte ruimte aan het begin en einde van een tekenreeks
  • strip_tags () - html- en PHP-tags uit een string verwijderen
  • addslashes () - Voeg schuine strepen toe aan de tekenreeks zodat citaten en spraakmarkeringen veilig kunnen worden gebruikt
  • strlen () - Haal het aantal tekens in een tekenreeks op
  • preg_match () - Preg-overeenkomst moet overeenkomen met de opmaak van een tekenreeks
  • mail () - Stuur e-mail van de server naar het opgegeven e-mailadres
  • md5 () - Dit berekent de md5-hash van een string


5. Wachtwoord vergeten?

De volgende is onze vergeten wachtwoordpagina. Als de gebruiker zijn wachtwoord vergeet, kunnen we deze naar hem e-mailen nu we weten dat ze een echt e-mailadres hebben opgegeven vanwege de activering. Dus zonder verder opon hier is de commentaarcode voor forgot.php -

  U moet uw invullen E-mail adres! "; else // else ga door met controleren // stel het formaat in om de e-mail te controleren tegen $ checkemail =" /^[a-z0-9]+([_\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ ] +) * @ ([a-z0-9] + ([\ .-] [a-z0-9] +) *) + \\. [az] 2, $ / i "; // check als de e-mail niet overeenkomt met het vereiste formaat als (! preg_match ($ checkemail, $ email)) // if not then display error echo "
E-mail is niet geldig, moet [email protected] zijn!
"; else // anders doorgaan met controleren // selecteer alle rijen uit de database waar de e-mails overeenkomen met $ res = mysql_query (" SELECT * FROM "gebruikers 'WHERE' email '='". $ email. "'"); $ num = mysql_num_rows ($ res); // controleer of het overeenkomende aantal rijen gelijk is aan 0 if ($ num == 0) // als het weergavefoutmelding echo is "
De E-mail je geleverde bestaat niet in onze database!
"; else // anders voltooide de pass-pass-functie // deel de rij in een associatieve array $ row = mysql_fetch_assoc ($ res); // stuur e-mail met hun wachtwoord naar hun e-mailadres ($ email, 'Forgotten Password' , "Hier is uw wachtwoord:". $ Row ['password']. "\ N \ nProbeer het niet te weer te verliezen!", 'From: [email protected]'); // display succesmelding echo "
Er is ook een e-mail verzonden met uw e-mailadres met uw wachtwoord!
";?>
E-mail:
Registreer | Log in

Deze pagina bestaat uit niets nieuws dus ik zal er minder tijd aan besteden. Een ding dat ik wil vermelden is dat als je het niet hebt opgemerkt omdat we ons css-bestand in elke pagina hebben opgenomen, de lay-out die we gebruiken voor elke pagina gelijk blijft, terwijl je een mooi slim ontwerp houdt op de hele website.

De volgende en laatste pagina die we in deze tutorial zullen doen, zal enigszins afwijken. Deze pagina heeft de controle om te zien of de gebruiker ingelogd is of niet, en toont in dit geval alle gebruikers online op dat moment (of om precies te zijn in de laatste 50 seconden).



6. De pagina Gebruikers online

Oké, dus we zijn nu op het gedeelte van de website dat u moet inloggen om te bekijken. Zoals ik eerder al zei, zal deze enigszins verschillen van de andere omdat we moeten controleren of de gebruiker is ingelogd of niet. Als ze niet zijn ingelogd en proberen de pagina te bekijken, hebben we een paar opties die we kunnen doen. Ten eerste kunnen we een foutmelding weergeven met de tekst "U moet ingelogd zijn om deze pagina te bekijken!", Of we kunnen ze omleiden naar de inlogpagina. Voor deze tutorial denk ik dat ik de foutmeldingsmethode ga gebruiken.

Dus hier is het usersOnline.php pagina's bron -

  U moet ingelogd zijn om deze gebruiker te kunnen gebruiken! "; Else // ga anders verder naar de pagina // dit is uit update-script dat op elke pagina moet worden gebruikt om de online tijd van de gebruiker $ time = date ('U') bij te werken ) +50; $ update = mysql_query ("UPDATE" gebruikers 'SET' online '=' ". $ Time." 'WHERE' id '=' ". $ _ SESSION ['uid']." '");?> 
Gebruikers online: '' .date ('U'). "'"); // lus voor elke rij terwijl ($ row = mysql_fetch_assoc ($ res)) // echo elke gebruikersnaam gevonden om online te zijn met een streepje om ze te splitsen echo $ row [ 'gebruikersnaam']." - ";?>
Uitloggen

Zoals ik al zei, kunt u zien dat deze pagina enigszins anders is. We zorgen er niet alleen voor dat ze zijn ingelogd, maar we werken de online tijd bij door het online veld voor de huidige tijd te houden. Telkens wanneer een pagina met dat script wordt geladen, wordt het bijgewerkt om ze online te zetten. Nu hebben we nog een laatste pagina te doen en dan zijn we klaar. Zodra een gebruiker zich heeft aangemeld, moet hij kunnen uitloggen!



logout.php

Dit moet worden beschouwd als de gemakkelijkste pagina om te maken waarvan ik weet zeker dat de meesten van jullie het graag horen. Nu is hier de commentaarcode voor de logout.php het dossier -

  U moet ingelogd zijn om uit te loggen! "; Else // als het wel doorgaat met het controleren // update om dit gebruikers online veld in te stellen naar de huidige tijd mysql_query (" UPDATE "gebruikers 'SET' online '='". date ('U'). "'WHERE' id '='". $ _ SESSION ['uid']. "'"); // vernietig alle sessies en annuleer de inlogsessie session_destroy (); // toon echo van het succesbericht "
je bent succesvol uitgelogd!
";?>

Ik denk dat de opmerkingen in dit bestand het voldoende uitleggen, en ik denk dat je PHP-kennis nu veel hoger zou moeten zijn en je zou nu het grootste deel hiervan nu moeten kunnen begrijpen.