Vi er nødt til at linke denne style.css-fil til vores index.html-fil for at se de bemærkelsesværdige ændringer. Tilføj følgende til overskriften på din index.html-fil.

<link href="style.css" rel="stylesheet" type="text/css"> 

Ovenstående tag skal være mellem og tags på din index.html fil.

Hvis du opdaterer login-visningssiden, bør du få en forhåndsvisning af en mere tiltalende loginformular, som vist på følgende skærmbillede.

Lad os nu prøve at forstå, hvad vi gjorde med vores login-formular. Formen har to egenskaber, "handling" og "metode". "method"-attributten er indstillet til "post", da vi vil føre brugerdata ind i serversystemet og ikke modtage, da det ville kræve, at "method"-attributten er indstillet til "get". "action"-attributten er sat til "authenticate.php", fordi det er filen, der håndterer godkendelsen af ​​de indtastede brugerdata. Det er filen, der behandler de vellykkede formulardatainput.

Hvad angår formularfelterne, er inputtyperne "tekst" for brugernavnet og "adgangskode" for brugeradgangskoden. "Tekst"-inputtet vil være synligt for det menneskelige øje, i modsætning til "adgangskode"-inputtet, der formodes at være krypteret under brugerinput. "Send"-inputtypen er den sidste handling for at sende de registrerede brugerdata til behandling af filen "authenticate.php".

Opsætning af databasen og de nødvendige tabeller

Her skal du navigere til linket "http://localhost/phpmyadmin/" for at få adgang til MySQL-databasen. Den resulterende phpMyAdmin-grænseflade har den primære rolle at administrere en MySQL-databaseapplikation.

Øverst i denne grænseflade vil du se fanen "Databaser". Klik på den for at oprette en ny database. Navngiv det noget som "fosslinuxlogin".

Når du klikker på "opret", vil den nye database (fosslinuxlogin) dukke op på skærmens venstre menusektion/panel. Din nettoopgave ville være at oprette de nødvendige tabeller til din database. Vi har kun brug for én tabel til denne selvstudieartikel.

For at oprette og udfylde en tabel med phpMyAdmin, har du mulighed for at gøre det grafisk eller bruge konsoldisplayet nederst på dets grænsefladedisplay. Det er meget mere effektivt at bruge konsollen, da vi kun behøver at oprette en enkelt SQL-sætning for at oprette og udfylde en hel tabel. Overvej f.eks. følgende SQL-kodesætning.

OPRET TABEL, HVIS IKKE FINDER `konti` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`brugernavn` varchar(50) NOT NULL,
`password` varchar( 255) NOT NULL,
`email` varchar(100) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;
 
INSERT INTO `accounts` (`id`, `brugernavn`, `adgangskode`, `e-mail`) VALUES (1, 'Brandon', '[email protected]', '[email protected]'); 

Som vist på skærmbillederne nedenfor, når du trykker på Ctrl+Enter på dit tastatur, udføres SQL-sætningen, og din databasetabel vil blive udfyldt.

Vi har oprettet en kontodatabase med fire kolonner (id, brugernavn, adgangskode og e-mail). Vi har også tildelt disse tabelkolonner nogle standardværdier, men vi skal primært bruge brugernavnet og adgangskoden for at teste PHP login scriptet.

Brugernes godkendelse

I sin tilstand har vi oprettet en tiltalende statisk login-formular og også opsat vores MySQL-database. Databasen har en tabel og nogle nyttige brugerdata til at drive det næste trin i denne øvelse. Først skal vi arbejde på filen authenticate.php, der er knyttet til "action"-attributten på vores login-formularvisning.

Brug din foretrukne terminaleditor til at udfylde den oprettede authenticate.php-fil med følgende data.

<?php
session_start();
// Change this connection setting to your preference.
$DATABASE_HOST = 'localhost';
$DATABASE_USER = 'root';
$DATABASE_PASS = '';
$DATABASE_NAME = 'fosslinuxlogin';
// Try and connect using the info above.
$con = mysqli_connect($DATABASE_HOST, $DATABASE_USER, $DATABASE_PASS, $DATABASE_NAME);
if ( mysqli_connect_errno() ) {
// If there is an error with the connection, stop the script and display the error.
exit('Failed to connect to MySQL: ' . mysqli_connect_error());
} 

Scriptet starter med at starte en session. Dette trin er fordelagtigt, da webserveren husker brugerkontoens logindetaljer. Så når de samme brugere logger ud og vender tilbage til webstedet senere på den samme computer, vil det være nemt at logge ind igen uden at indtaste et nyt brugernavn og adgangskodeoplysninger.

Vi specificerer også den database, vi ønsker at oprette forbindelse til, sammen med dens vært, bruger og eventuelt adgangskode.

Det første skridt til at autentificere vores loginformular er at sikre, at en bruger ikke kan indsende en tom formular. Begge felter skal udfyldes. Tilføj følgende kode til din authenticate.php-fil for at hjælpe os med at nå dette mål.

// Time to check if the login form data was submitted. The isset() function checks if the form data exists.
if ( !isset($_POST['username'], $_POST['password']) ) {
// Could not fetch  any data from form subbmission
exit('Please make sure you filled both the username and password form fields!');
} 

Med ovenstående kodestykke vil en bruger modtage en fejl under indsendelse af en tom formular. Da vi har håndteret blanke formularindsendelser, skal vi nu godkende indsendelsen af ​​brugerformularen med data, der allerede findes i databasen.

Tilføj følgende kode til din authenticate.php-fil.

// We need to Prepare our SQL. This SQL preparation helps prevent SQL injections
if ($stmt = $con->prepare('SELECT id, password FROM accounts WHERE username = ?')) {
// Bind parameters (s = string, i = int, b = blob, etc). Since a string is the username in our case, we use "s"
$stmt->bind_param('s', $_POST['username']);
$stmt->execute();
// Store or preserve the results. It helps counter-check if the  user account exists within our database.
$stmt->store_result();
$stmt->close();
}
?> 

Id- og adgangskodeværdierne vælges fra databasetabellen og matches med brugerinput. Det binder id- og adgangskodeværdierne til brugernavnsværdien. Når SQL-sætningen er udført, gemmes resultaterne, så de kan bruges som sessioner. Som du kan se fra ovenstående kode, er linjen "$stmt->store_result(); ” tager sig af dette sessionsopbevaringsmål.

Den næste kodelinje, der skal tilføjes til din authenticate.php-fil, skulle efterfølge følgende kodesætning:

$stmt->store_result();

Tilføj følgende kodestykke efter den ovenfor fremhævede kodesætning.

if ($stmt->num_rows > 0) {
$stmt->bind_result($id, $password);
$stmt->fetch();
// At this point, the account exists. The only thing left is to verify the password.
// The use of password_hash in the registration file is encouraged for the storage of hashed passwords.
if ($_POST['password'] === $password) {
// Verification was a success! Use log in took place!
// Sessions creation takes place because a user is logged in. Sessions functionality resemble cookies because they can remember the server's data.
session_regenerate_id();
$_SESSION['loggedin'] = TRUE;
$_SESSION['name'] = $_POST['username'];
$_SESSION['id'] = $id;
echo 'Welcome ' . $_SESSION['name'] . '!';
} else {
// Incorrect password
echo 'Incorrect username and/or password!';
}
} else {
// Incorrect username
echo 'Incorrect username and/or password!';
} 

Ovenstående kode omhandler vurderer databaseforespørgslen for levedygtigheden af ​​eventuelle resultater. Hvis det indtastede brugernavn ikke er i databasen, vil der ikke være noget at vise frem. Hvis en bruger er blevet godkendt, finder initialiseringen af ​​sessionsvariabler sted. Webserveren gemmer disse variabler, og brugerens webbrowser refererer til dem for at bestemme den samme brugers login-status.

Det er tid til at teste levedygtigheden af ​​vores autentificeringskode. Opdater dit "http://localhost/fosslinux_login/"-link, før du fortsætter.

Prøv at logge ind med en forkert brugernavn og adgangskode-kombination og se, hvad der sker.

Til sidst fik jeg ovenstående skærmbilledefejl.

Log nu ind med det korrekte brugernavn og adgangskodekombination gemt på din MySQL-database.

Vores destinationsside

At have en login-side er ikke nok til vores tutorial, en bruger, der med succes logger ind på systemet, skal omdirigeres til en startside. Herfra vil en sådan bruger også have mulighed for at logge ud af systemet, hvis det passer dem. Først skal du udfylde din oprettede home.php-fil med følgende kodestykke.

// Vi skal altid huske at bruge sessioner. Kodesætningen nedenfor start bør altid bruges til at starte sessioner.

session_start();

// En bruger, der ikke er aktivt logget ind, omdirigeres til hovedloginsiden. ..

if (!isset($_SESSION['loggedin'])) {

header('Location:index.html');

afslut;

}

?>

Tilføj følgende HTML-kode til din home.php-fil.

 






FossLinux Login Selvstudium


Log ud









FossLinux-hjemmeside



Velkommen tilbage, !

Denne hjemmeside har også brug for lidt stil. Tilføj følgende kode til din style.css-fil.

.navtop {
background-color: #2f3947;
height: 60px;
width: 100%;
border: 0;
}
.navtop div {
display: flex;
margin: 0 auto;
width: 1000px;
height: 100%;
}
.navtop div h1, .navtop div a {
display: inline-flex;
align-items: center;
}
.navtop div h1 {
flex: 1;
font-size: 24px;
padding: 0;
margin: 0;
color: #eaebed;
font-weight: normal;
}
.navtop div a {
padding: 0 20px;
text-decoration: none;
color: #c1c4c8;
font-weight: bold;
}
.navtop div a i {
padding: 2px 8px 0 0;
}
.navtop div a:hover {
color: #eaebed;
}
body.loggedin {
background-color: #f3f4f7;
}
.content {
width: 1000px;
margin: 0 auto;
}
.content h2 {
margin: 0;
padding: 25px 0;
font-size: 22px;
border-bottom: 1px solid #e0e0e3;
color: #4a536e;
}
.content > p, .content > div {
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
margin: 25px 0;
padding: 25px;
background-color: #fff;
}
.content > p table td, .content > div table td {
padding: 5px;
}
.content > p table td:first-child, .content > div table td:first-child {
font-weight: bold;
color: #4a536e;
padding-right: 15px;
}
.content > div p {
padding: 5px;
margin: 0 0 10px 0;
} 

Da vi nu har en startside på din authenticate.php-fil, skal du erstatte følgende linje:

ekko 'Velkommen' . $_SESSION['navn'] . '!';

Med denne linje:

header('Location:home.php');

Hvert efterfølgende login vil nu omdirigere dig til denne hjemmeside.

Logout-scriptet

Ovenstående startsidevisning har et logout-link, som vi skal implementere. Et logout-script til din logout.php-fil er så simpelt som det følgende kodestykke.

session_start();

session_destroy();

// Omdirigerer brugeren til index.html login-siden :

header('Location:index.html');

?>

Da sessioner bestemmer login-status, ødelægger ovenstående script alle eksisterende sessioner og tilbagekalder denne brugers loggede status. Til sidst fører dette PHP-script brugeren tilbage til login-siden.

Sidste bemærkning

Med denne tutorial har du nu et stærkt fundament i at skabe velrenommerede og sikre PHP-scripts. Du kan nu oprette et system, der er troværdigt for dine målrettede brugere eller kunder. Du har håndteret SQL-indsprøjtningssårbarhed og formulardatavalidering og -godkendelse. Hvad der er tilbage til dig, er lidt uddybning af det dækkede kodesegment, og du vil være på vej til at blive en senior PHP-udvikler:glad kodning og glædelig vækst i din PHP- og MySQL-rejse.