Slik bygger du et fullstendig innloggingssystem

I denne opplæringen vil jeg vise deg hvordan du lager et enkelt innloggingssystem bestående av en påloggingsside, registreringsside, glemt passordside, e-postaktivering, logoutside og til slutt en brukers nettside. Jeg gjorde denne opplæringen til hovedsakelig målrettet utviklere av nye til PHP, på grunn av det faktum at jeg begynte, la jeg merke til mangelen på mengde grunnleggende innloggingssystemer. Derfor bestemte jeg meg for å lage en selv å gi råd av høy kvalitet om hvordan du lager ditt første påloggingssystem med et brukerens nettskript!


1. Lag et grunnleggende stilark

Vi skal lage et veldig grunnleggende CSS-stilark bare for å legge til litt design og rydde opp slik dette påloggingssystemet ser ut. Så også begynne med å åpne tekstredigeringsprogrammet, og vi kan begynne å lage vårt styelsheet.

kropp font-family: arial; skriftstørrelse: 10pt;  tabell font-size: 10pt; margin: 0 auto;  #border border: 2px solid # 999; bakgrunn: #CCC; polstring: 15px; margin: 0 auto; bredde: 300px; 

Lagre denne filen som style.css slik at vi kan koble tilbake til det når vi trenger det. Der har vi vårt enkle stilark! Nå kan vi begynne å lage sidene våre uten å måtte bekymre oss for mye om at de ser rimelig bra ut.



2. Opprette innloggingssiden

Ok, så vi har definert et stilark, nå er det på tide å få ting å vise på våre sider. Åpne en ny fil i teksteditoren, dette kommer til å bli vår login.php side!

  
Brukernavn:
Passord:
Registrer |. | Glemt passord

Ok, dette er hva vår login.php filen vil se ut før vi får vår PHP, slik at innloggingsskjemaet fungerer riktig. For øyeblikket vil du legge merke til at det ikke fungerer. Dette skyldes at vi ikke har fortalt siden hva som skal gjøres dersom skjemaet sendes inn.

Planlegger

La oss nå gjøre noe før vi dykker inn i PHP. Vi må spørre oss selv: "Hva skal siden sjekke når skjemaet sendes inn?". For påloggingssiden her er en liste over hva vi skal sjekke -

  • At både brukernavn og passord-boksene er fylt ut
  • At brukernavnet som følger med finnes i vår database
  • At hvis brukernavnet eksisterer i vår database, matcher passordet det til brukernavnet
  • Til slutt, at brukeren har aktivert sin konto

Hvis PHP kan svare ja til alle fire av disse punktene, så logg brukeren inn. Nå i de fire punktene vil du legge merke til at det var en database nevnt. Vi skal bruke en MySQL-database for å lagre all informasjon om hver enkelt bruker. Så før vi begynner på PHP, må vi lage denne databasen. På dette punktet er det behov for litt mer planlegging. Vi må bestemme hvilken informasjon vi må lagre om brukerne, hvilke typer data lagrer vi, trenger vi en standardverdi osv. Her er min plan under -

  • Vi må lagre et brukernavn for brukeren som vil være en varchar
  • Vi trenger et passord som også vil være en varchar
  • Vi vil trenge en epost for vår e-post aktiveringsfunksjon dette kan være varchar også
  • Et felt fortelling er om kontoen har blitt aktivert eller ikke, dette vil være et heltall
  • Et felt som gir informasjon om hvorvidt brukeren er online eller ikke, dette vil være et heltall
  • Endelig er et felt som gir oss en gang brukeren registrert, dette er også et heltall

Bygg databasen

Nå kan vi se nøyaktig hvordan du bygger vårt bord i vår database. Først opprett en database som heter loginTut. Så i denne databasen vil vi kjøre SQL jeg har gitt nedenfor -

Merk: Alle tabeller inneholder en primærnøkkel. Dette er en unik identifikator for hver rad i tabellen!

CREATE TABLE IF NOT EXISTS 'brukere' ('id' int (11) IKKE NULL auto_increment, 'brukernavn' varchar (32) IKKE NULL, 'passord' varchar (32) IKKE NULL, 'online' int '0', 'email' varchar (100) IKKE NULL, 'aktiv' int (1) IKKE NULL standard '0', 'rtime' int (20) IKKE NULL standard '0', PRIMARY KEY ('id')) ENGINE = MyISAM DEFAULT CHARSET = utf8;

Nå har vi et bord for å lagre all informasjon vi trenger om våre brukere, la oss legge til en bruker for testformål. For å gjøre dette, kjør SQL gitt nedenfor -

INSERT TIL 'brukere' ('ID', 'brukernavn', 'passord', 'online', 'email', 'aktiv', 'rtime') VÆRDIER (1, 'testing', 'testing', 0, 'falsk @ noemail.co.uk ', 0, 0);

Så vi har nå en bruker med brukernavnet testing, passordet testing og e-post [email protected]. Nå kan vi komme til PHP og utarbeide innloggingsblankettarbeid!

Legge til PHP

Første ting først må vi tenke på sikkerhet og hvor sikker er dette innloggingsskjemaet som skal være. For å forhindre SQL Injection som er en veldig vanlig form for database hacking, skal vi lage en funksjon som vil beskytte alle strenger lagret i databasen. Dette vil vi sette inn en ekstern fil som heter functions.php. Her er kilden -

 

Denne funksjonen vil trimme strengen vår (klipp av hvilken som helst hvit plass i begynnelsen eller slutten av strengen), stripe-tagger (fjern alle HTML- og PHP-koder i strengen), og legg deretter til skråstreker i strengen som kommer fra talemerkene (') og anførselstegn (").

Tilbake til login.php

Nå har vi et sted å lagre og sjekke brukerinformasjon fra, en funksjon for å beskytte strenger som sendes til databasen, og et flott utseende for vår påloggingsside! Nedenfor kan du se kommentert kode for vår login.php fil med den nylig lagt til PHP-

  Du må fylle ut en Brukernavn og a Passord!"; else // hvis de fortsatte å sjekke // velg alle rader fra tabellen der brukernavnet samsvarer med det som er oppgitt av brukeren $ res = mysql_query (" SELECT * FROM "users 'WHERE' brukernavn '='". $ username. "'"); $ num = mysql_num_rows ($ res); // sjekk om det ikke var en kamp hvis ($ num == 0) // hvis ikke vise en feilmelding echo "
De Brukernavn du følger med, finnes ikke!
"; else // hvis det var en kamp fortsette å sjekke // velg alle rader der brukernavnet og passordet samsvarer med de som er oppgitt av brukeren $ res = mysql_query (" SELECT * FROM "users 'WHERE' brukernavn '='" $ $ brukernavn. "'OG' passord '='" $ passord. "'"); $ num = mysql_num_rows ($ res); // Sjekk om det ikke var en kamp hvis / hvis ikke vise feilmelding ekko "
De Passord du følger med, samsvarer ikke med den for det brukernavnet!
"; else // hvis det fortsatte å sjekke // dele alle feltene fra den riktige raden til en assosiativ array $ row = mysql_fetch_assoc ($ res); // sjekk for å se om brukeren ikke har aktivert sin konto enda hvis $ rad ['aktiv']! = 1) // hvis ikke vise feilmelding ekko "
Du har ikke ennå aktivert kontoen din!
"; annet // hvis de har logget seg inn // sett innloggingsøkten som lagrer det id - vi bruker dette for å se om de er logget inn eller ikke $ _SESSION ['uid'] = $ rad ['id'] ; // Vis melding ekko "
Du har logget inn!
"; // oppdater nettfeltet til 50 sekunder inn i fremtiden $ time = date ('U') + 50; mysql_query (" UPDATE 'users' SET 'online' = '" = '". $ _ SESSION [' uid ']."' "); // omdirigere dem til overskriften for usersonlinkside ('Location: usersOnline.php');?>>
Brukernavn:
Passord:
Registrer |. | Glemt passord

Mesteparten av dette forklares av kommentaren, men en del jeg ikke forklarte, er nettfeltet. Når du logget inn, oppdaterte vi nettfeltet til 50 sekunder før nå. Datoen ('U') -funksjonen gir oss en mengde sekunder siden 1. januar 1970 00:00:00 GMT (Unix epoke). Dette betyr at datoen ('U') aldri vil bli mindre, verdien vil alltid øke. Hvis vi setter nettfeltet til 50 sekunder foran nå da da Brukere Online siden er lastet, kan vi sjekke for å finne alle brukerne der nettverdien er mer enn tidspunktet da siden er lastet. Hvis dette er tilfelle, så vis hver av navnene sine.

Nå er du velkommen til å teste innloggingssiden din. Kontroller at alle kontrollene utføres korrekt, og at når du er logget inn, blir du omdirigert til den ikke eksisterende brukerens nettside. Du kan også sjekke om det har blitt oppdatert nettfeltet, ved å sjekke brukertabellen!



3. Opprette Register-siden

Hvilken god er en påloggingsside uten en registerside? Ikke mye i det hele tatt, så jeg tror det vil være neste skritt for oss å ta. Å opprette registernes side vil være svært lik å opprette vår påloggingsside. Vi må gjøre noen grunnleggende sjekker for å se om brukernavnet er ønsket, men det er ikke noe nytt der. Nedenfor kan du se kommentert register side kode -

  Du må fylle ut alle de nødvendige filene! "; Else // hvis alle ble fylt inn fortsette å sjekke // Sjekk om ønsket brukernavn er mer enn 32 eller mindre enn 3 karriere lenge hvis (strlen ($ brukernavn)> 32 || strlen ($ brukernavn) < 3) //if it is display error message echo "
Din Brukernavn må være mellom 3 og 32 tegn lang!
"; else // hvis ikke fortsette å sjekke // velg alle rader fra utbrukertabellen der det oppførte brukernavnet samsvarer med brukernavnet som er lagret $ res = mysql_query (" SELECT * FROM "brukere 'WHERE' brukernavn '='". brukernavn. "'"); $ num = mysql_num_rows ($ res); // sjekk om det er en kamp hvis ($ num == 1) // hvis ja brukernavnet er tatt så vis feilmelding ekko "
De Brukernavn du har valgt er allerede tatt!
"; else // ellers fortsett å sjekke // kontrollere om passordet er mindre enn 5 eller mer enn 32 tegn langt hvis (strlen ($ passord) < 5 || strlen($password) > 32) // hvis det viser feilmelding ekko "
Din Passord må være mellom 5 og 32 tegn lang!
"; else // Fortsett å sjekke // Sjekk om passordet og bekreft passordet samsvarer hvis ($ passord! = $ passconf) // hvis ikke vise feilmelding ekko"
De Passord Du har ikke samsvar med bekreftelsespassordet!
"; else // ellers fortsett å sjekke // Angi formatet vi vil sjekke ut e-postadresse mot $ checkemail =" /^[a-z0-9]+([_\\.-][a-z0- 9] +) * @ ([a-z0-9] + ([\ .-] [a-z0-9] +) *) + \\. [Az] 2, $ / i "; // sjekk om formatene samsvarer hvis (! preg_match ($ checkemail, $ email)) // hvis ikke vise feilmelding ekko "
De E-post er ikke gyldig, må være [email protected]!
"; annet // hvis de gjør det, fortsett å sjekke // velg alle rader fra brukerens tabell hvor e-postene samsvarer med $ res1 = mysql_query (" SELECT * FROM "brukere 'WHERE' email '='". $ email. '$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ 1 $
De E-post Adresse du har levert er allerede tatt
"; else // endelig, ellers registrer det konto // tidspunkt for registrering (unix) $ registerTime = dato ('U'); // lage en kode for aktiveringsnøkkelen $ code = md5 ($ brukernavn) registerTime; '.. $ brukernavn "// setter rad i databasen $ res2 = mysql_query ( "INSERT INTO 'brukere'( 'brukernavn', 'passord', 'e', ​​'rtime') VALUES (" '' ". $ passord." ',' ". $ email." ',' ". $ registerTime." ') "; // send eposten med en e-post som inneholder aktiveringslenken til den medfølgende e-postadressen , $ INFO ['chatName']. 'Registreringsbekreftelse', 'Takk for at du registrerte deg.'. $ Brukernavn. ", \ N \ nHere er aktiveringslenken din. Hvis lenken ikke fungerer, kopier og lim den inn i din nettleserens adresselinje. \ n \ nhttp: //www.websiteherehere.co.uk/activate.php? code = ". $ kode, 'Fra: [email protected]'); // vise suksessmeldingen ekko "
Du har registrert deg, vennligst besøk deg innboksen for å aktivere kontoen din!
";?>
Brukernavn:
Passord:
Bekreft passord:
e-post:
Logg inn | Glemt passord

Nye funksjoner

Denne filen inneholder noen nye ting du kanskje ikke er kjent med, derfor vil jeg gå over alt. For det første returnerer strlen () -funksjonen antall tegn i en streng som lar oss kontrollere hvor lenge strenger er. Da kontrollerer preg_match () -funksjonen om formatering av en streng samsvarer med formateringen du angir (i dette tilfellet et e-postformat). Endelig sender posten () -funksjonen en e-post fra serveren til en hvilken som helst e-post du vil ha, med alt du vil ha. Du bør lagre denne filen som register.php

Nå kan du teste deg med å registrere siden, du kan se når du skriver inn din riktige e-postadresse, du vil motta en e-post med en aktiveringslink inni. Du kan også se at en rad som inneholder dataene som er fylt ut i skjemaet, er lagt inn i brukertabellen. Verdien av aktiv er 0 viser at denne kontoen ikke er aktivert ennå!



4. Aktiver kontosiden din

Dette er bare en liten side med svært liten kode som kreves, men det er fortsatt svært viktig og spiller en stor rolle i et sikkert påloggingssystem. Kilden til denne siden er vist nedenfor - activate.php

  Dessverre var det en feil der! "; Else // andre kloke fortsette sjekken // velge alle radene der regnskapet ikke er aktive $ res = mysql_query (" SELECT * FROM 'brukere' hvor 'aktiv' = '0 // loop gjennom dette skriptet for hver rad funnet ikke aktiv mens ($ row = mysql_fetch_assoc ($ res)) // sjekk om koden fra raden i databasen samsvarer med den fra brukeren hvis ($ kode == md5 ($ rad ['brukernavn']). $ rad ['rtime']) // hvis det gjør så aktivere det kontoen og vis suksessmelding $ res1 = mysql_query ("UPDATE" '1' hvor 'id' = '". $ Rad [' id ']."' "); Ekko"
Du har aktivert kontoen din!
";?>

Det er to nye ting i denne filen, vi bruker GET-metoden i stedet for POST, og vi bruker også en stund () -løkke. Få-metoden får bare data fra adressefeltet øverst i brukerens nettleser (i dette tilfellet er koden sendt med e-posten til e-postadressen deres). Løkken mens () er perfekt for å sjekke gjennom flere rader med data valgt fra databasen (i dette tilfellet for å se om det er samsvar med kodene).

Oversikt så langt

Så langt bør du ha lært mange nye ting hvis det nye til PHP og vellykket opprettet en halv av et innloggingssystem. Sidene som er fullført så langt er -

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

Noen nyttige funksjoner brukt hittil er -

  • mysql_connect () - Koble til en mysql-database
  • mysql_select_db () - Velg databasen som vi skal jobbe med
  • mysql_query () - Send querys til databasen for å få, sette inn eller redigere data
  • trimme () - Klipp uønsket hvitt mellomrom på begynnelsen og slutten av en streng
  • strip_tags () - Fjern html og PHP-koder fra en streng
  • addslashes () - Legg til skråstreker i s streng slik at anførselstegn og talemerker kan brukes trygt
  • strlen () - Få antall tegn i en streng
  • preg_match () - Preg-kamp er å matche formateringen av en streng
  • post () - Send e-post fra serveren til den angitte e-postadressen
  • md5 () - Dette beregner md5-hash av en streng


5. Glemt passordet ditt?

Neste opp er vår glemt passordside. Hvis brukeren glemmer passordet sitt, kan vi sende det til dem nå, og vi vet at de ga en ekte e-postadresse på grunn av aktiveringen. Så uten videre ado her er kommentert kode for forgot.php -

  Du må fylle ut din E-post adresse! "; else // fortsett å sjekke // angi formatet for å sjekke e-posten mot $ checkemail =" /^[a-z0-9]+([_\\.-][a-z0-9 ] +) * @ ([a-z0-9] + ([\ .-] [a-z0-9] +) *) + \\. [az] 2, $ / i "; // sjekk hvis e-posten ikke samsvarer med det nødvendige formatet hvis (! preg_match ($ checkemail, $ email)) // hvis ikke så vise feilmelding ekko "
E-post er ikke gyldig, må være [email protected]!
"; else // ellers fortsett å sjekke // velg alle rader fra databasen der e-postene samsvarer med $ res = mysql_query (" SELECT * FROM "brukere 'WHERE' email '='". $ email. $ num = mysql_num_rows ($ res); // kontroller om antall rader som er matchet, er lik 0 hvis ($ num == 0) // hvis det er feilmeldings ekko "
De E-post Du følger ikke med i vår database!
"; otherwise // otherwise complete Glemt pass-funksjonen // splitt raden i en assosiativ array $ row = mysql_fetch_assoc ($ res); // send e-post som inneholder passordet til e-postadressen sin ($ email, 'Forgotten Password' , "Her er passordet ditt:". $ Rad ['passord']. "\ N \ nVennligst prøv ikke å miste det igjen!", "Fra: [email protected] '); // vise suksessmeldings ekko "
En e-post har blitt sendt for din e-postadresse som inneholder passordet ditt!
";?>
e-post:
Registrer |. | Logg Inn

Denne siden består av ikke noe nytt, derfor vil jeg bruke mindre tid på å se over det. En ting jeg vil nevne er at hvis du ikke har lagt merke til at vi har tatt med vår css-fil i hver side, har layoutet vi bruker for hver side, vært svært lik og å holde en fin smart design gjennom hele nettsiden.

Den neste og siste siden vi skal gjøre i denne opplæringen vil være litt annerledes. Denne siden har sjekken for å se om brukeren er logget inn eller ikke, og i dette tilfellet viser alle brukerne nettet på det nåværende tidspunktet (eller for å være nøyaktig innen de siste 50 sekunder).



6. Brukerens nettside

Ok, så vi har gjort det til delen av nettstedet du må logge inn for å vise. Som nevnt før, vil denne være litt annerledes enn de andre på grunn av det faktum at vi må sjekke om brukeren er logget inn eller ikke. Hvis de ikke er logget inn og prøver å vise siden, har vi noen muligheter vi kan gjøre. Det første vi kan vise en feilmelding sier noe i tråd med "Du må være logget inn for å se denne siden!", Eller vi kan omdirigere dem tilbake til påloggingssiden. For denne opplæringen tror jeg jeg skal bruke feilmeldingsmetoden.

Så her er det usersOnline.php sidenes kilde -

  Du må være logget inn for å bruke denne funksjonen! "; Else // ellers fortsett siden // dette er ut oppdateringsskript som skal brukes på hver side for å oppdatere brukerens online tid $ time = date ('U' ) 50, $ update = mysql_query ( "UPDATE" brukernes SET 'online' = '" $ tid.. " 'WHERE 'id' ='" $ _ SESSION. [ 'uid']. "'");?> 
Brukere Online: '/' .date ('U'). ''); // loop for hver rad mens ($ row = mysql_fetch_assoc ($ res)) // ekko hvert brukernavn funnet å være online med et dash for å dele dem echo $ rad [ 'brukernavn']." - ";?>
Logg ut

Som nevnt, kan du se at denne siden er litt annerledes. Ikke bare sikrer vi at de er logget inn, men vi oppdaterer den elektroniske tiden som holder nettfeltet foran den nåværende tiden. Hver gang en side lastes med det skriptet, oppdateres det for å sette dem på nettet. Nå har vi enda en siste side å gjøre, og så er vi ferdige. Når en bruker har logget inn, må han kunne logge ut!



Logout.php

Dette må anses som den enkleste siden å lage som jeg er sikker på at de fleste av dere er glad for å høre. Nå er det kommentert kode for logout.php fil -

  Du må logge inn for å logge ut! "; Else // hvis det fortsetter å sjekke // oppdater for å angi dette brukerens nettfelt til gjeldende tid mysql_query (" UPDATE 'users' SET 'online' = '". dato ('U'). '' HVOR 'id' = '". $ _ SESSION [' uid '].' '"; // ødelegge alle økter som avbryter innloggingsøkten session_destroy (); // vise suksessmelding ekko "
Du har blitt logget ut!
";?>

Jeg tror at kommentarene i denne filen forklarer det nok, og jeg tror at PHP-kunnskapen din nå skal være mye høyere, og du bør kunne forstå det meste av dette nå.