Dit is deel 3 van een reeks zelfstudies over het maken van een beheersysteem voor gebruikersaccounts. De andere delen vind je hier: deel 1, deel 2.
Formuliervalidatie
Als u op dit punt op de signup.php-pagina op de aanmeldingsknop klikt zonder een van de formuliervelden in te vullen, krijgt u geen feedback, maar het formulier doet ook niets. Het blijft daar maar naar je staren. Het blijft zo omdat er fouten zijn in een $errors van onze functie ValidUser() die we eerder hebben gedefinieerd en die we nog niet op het formulier weergeven. Deze fouten bestaan in sleutel-waardeparen.
$errors['username'] bevat bijvoorbeeld de eventuele fout voor het gebruikersnaamveld. Dus we kunnen controleren of de gebruikersnaamfout bestaat, dan voegen we de bootstrap-klasse has-error toe aan het div-element dat het invoerveld voor de gebruikersnaam omhult. Hierdoor worden de labeltekst en de invoerrand rood van kleur, wat aangeeft dat er een fout is opgetreden.
We valideren de velden voor gebruikersnaam, e-mail, wachtwoord en wachtwoord. Open dus uw signup.php-bestand en vervang deze vier velden door deze code:
<div class="form-group <?php echo isset($errors['username']) ? 'has-error' : '' ?>">
<label class="control-label">Username</label>
<input type="text" name="username" value="<?php echo $username; ?>" class="form-control">
<?php if (isset($errors['username'])): ?>
<span class="help-block"><?php echo $errors['username'] ?></span>
<?php endif; ?>
</div>
<div class="form-group <?php echo isset($errors['email']) ? 'has-error' : '' ?>">
<label class="control-label">Email Address</label>
<input type="email" name="email" value="<?php echo $email; ?>" class="form-control">
<?php if (isset($errors['email'])): ?>
<span class="help-block"><?php echo $errors['email'] ?></span>
<?php endif; ?>
</div>
<div class="form-group <?php echo isset($errors['password']) ? 'has-error' : '' ?>">
<label class="control-label">Password</label>
<input type="password" name="password" class="form-control">
<?php if (isset($errors['password'])): ?>
<span class="help-block"><?php echo $errors['password'] ?></span>
<?php endif; ?>
</div>
<div class="form-group <?php echo isset($errors['passwordConf']) ? 'has-error' : '' ?>">
<label class="control-label">Password confirmation</label>
<input type="password" name="passwordConf" class="form-control">
<?php if (isset($errors['passwordConf'])): ?>
<span class="help-block"><?php echo $errors['passwordConf'] ?></span>
<?php endif; ?>
</div>Net onder elk invoerveld geven we voorwaardelijk de foutmelding voor elk formulierveld weer.
Voor het geval je de ternaire operator niet kende, volgt hier een korte uitleg.
<?php echo isset($errors['username']) ? 'has-error' : '' ?>Deze instructie zegt in feite dat als de variabele $errors['username'] is ingesteld op een waarde (is niet leeg), has-error wordt weergegeven en anders een lege tekenreeks wordt weergegeven. Het is eigenlijk gewoon een if-else-statement.
Nu kunt u deze validatie uitproberen door op het lege formulier te klikken. Je zult mooie opgemaakte valideringsberichten zien.
Gebruikersaanmelding
Maak in de hoofdmap van uw toepassing een bestand met de naam login.php.
login.php:
<?php include('config.php'); ?>
<?php include(INCLUDE_PATH . '/logic/userSignup.php'); ?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>UserAccounts - Login</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<!-- Custome styles -->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<?php include(INCLUDE_PATH . "/layouts/navbar.php") ?>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form" action="login.php" method="post">
<h2 class="text-center">Login</h2>
<hr>
<!-- display form error messages -->
<?php include(INCLUDE_PATH . "/layouts/messages.php") ?>
<div class="form-group <?php echo isset($errors['username']) ? 'has-error' : '' ?>">
<label class="control-label">Username or Email</label>
<input type="text" name="username" id="password" value="<?php echo $username; ?>" class="form-control">
<?php if (isset($errors['username'])): ?>
<span class="help-block"><?php echo $errors['username'] ?></span>
<?php endif; ?>
</div>
<div class="form-group <?php echo isset($errors['password']) ? 'has-error' : '' ?>">
<label class="control-label">Password</label>
<input type="password" name="password" id="password" class="form-control">
<?php if (isset($errors['password'])): ?>
<span class="help-block"><?php echo $errors['password'] ?></span>
<?php endif; ?>
</div>
<div class="form-group">
<button type="submit" name="login_btn" class="btn btn-success">Login</button>
</div>
<p>Don't have an account? <a href="signup.php">Sign up</a></p>
</form>
</div>
</div>
</div>
<?php include(INCLUDE_PATH . "/layouts/footer.php") ?>
Open nu userSignup.php en voeg aan het einde van het bestand deze code toe om in te loggen gebruiker:
// ...
// USER LOGIN
if (isset($_POST['login_btn'])) {
// validate form values
$errors = validateUser($_POST, ['login_btn']);
$username = $_POST['username'];
$password = $_POST['password']; // don't escape passwords.
if (empty($errors)) {
$sql = "SELECT * FROM users WHERE username=? OR email=? LIMIT 1";
$user = getSingleRecord($sql, 'ss', [$username, $username]);
if (!empty($user)) { // if user was found
if (password_verify($password, $user['password'])) { // if password matches
// log user in
loginById($user['id']);
} else { // if password does not match
$_SESSION['error_msg'] = "Wrong credentials";
}
} else { // if no user found
$_SESSION['error_msg'] = "Wrong credentials";
}
}
}Als u op de inlogknop klikt zonder deze in te vullen, verschijnen er validatieberichten op het formulier, net als bij de aanmeldingspagina.
Voer nu het e-mailadres en wachtwoord in voor het gebruikersaccount dat we eerder hebben gemaakt en klik op de login-knop. Als de inloggegevens correct waren, wordt u ingelogd en doorgestuurd naar de startpagina. Er wordt een flashbericht weergegeven dat aangeeft dat u nu bent ingelogd.
Maar u zult merken dat hoewel de gebruiker nu is ingelogd, de aanmeldings- en inloglinks in de navigatiebalk nog steeds worden weergegeven, wat niet logisch is, toch? Laten we ze vervangen door de ingelogde gebruikersnaam en een vervolgkeuzelijst met een uitloglink erop.
Open het navbar.php-bestand en vervang de code die erin zit bij deze:
navbar.php:
<!-- the whole site is wrapped in a container div to give it some margin on the sides -->
<!-- closing container div can be found in the footer -->
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">UserAccounts</a>
</div>
<!-- <ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul> -->
<ul class="nav navbar-nav navbar-right">
<?php if (isset($_SESSION['user'])): ?>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<?php echo $_SESSION['user']['username'] ?> <span class="caret"></span></a>
<?php if (isAdmin($_SESSION['user']['id'])): ?>
<ul class="dropdown-menu">
<li><a href="<?php echo BASE_URL . 'admin/profile.php' ?>">Profile</a></li>
<li><a href="<?php echo BASE_URL . 'admin/dashboard.php' ?>">Dashboard</a></li>
<li role="separator" class="divider"></li>
<li><a href="<?php echo BASE_URL . 'logout.php' ?>" style="color: red;">Logout</a></li>
</ul>
<?php else: ?>
<ul class="dropdown-menu">
<li><a href="<?php echo BASE_URL . 'logout.php' ?>" style="color: red;">Logout</a></li>
</ul>
<?php endif; ?>
</li>
<?php else: ?>
<li><a href="<?php echo BASE_URL . 'signup.php' ?>"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="<?php echo BASE_URL . 'login.php' ?>"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
<?php endif; ?>
</ul>
</div>
</nav>
Ververs nu de index.php-pagina. Als u nog ingelogd was, ziet u dat de koptekst is gewijzigd en wordt nu uw gebruikersnaam weergegeven op de navigatiebalk. Wanneer u op de gebruikersnaam klikt, verschijnt er een vervolgkeuzelijst met een uitloglink erop. Als u erop klikt, staat er pagina niet gevonden omdat we het bestand logout.php nog niet hebben gemaakt. Laten we dat bestand nu in de hoofdmap van onze applicatie maken.
logout.php:
<?php
session_start();
session_destroy();
unset($_SESSION['user']);
header("location: login.php");
?>En we zijn klaar met de normale gebruikersauthenticatie. Nu gaan we naar de kern van de zaak, namelijk de admin-sectie. Hoop dat je ervan geniet.
Op dit moment loggen we de gebruiker in via slechts één functie, de loginById() functie. In die functie, als de gebruiker die inlogt blijkt een administratieve gebruiker te zijn, wordt deze doorgestuurd naar het dashboard.php-bestand.
Beheerderssectie
Maak in de beheerdersmap het bestand dashboard.php:
dashboard.php:
<?php include('../config.php') ?>
<?php include(ROOT_PATH . '/admin/middleware.php') ?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Admin</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<!-- Custome styles -->
<link rel="stylesheet" href="../static/css/style.css">
</head>
<body>
<?php include(INCLUDE_PATH . "/layouts/admin_navbar.php") ?>
<div class="col-md-4 col-md-offset-4">
<h1 class="text-center">Admin</h1>
<br />
<ul class="list-group">
<a href="<?php echo BASE_URL . 'admin/posts/postList.php' ?>" class="list-group-item">Manage Posts</a>
<a href="<?php echo BASE_URL . 'admin/users/userList.php' ?>" class="list-group-item">Manage Users</a>
<a href="<?php echo BASE_URL . 'admin/roles/roleList.php' ?>" class="list-group-item">Manage Roles</a>
</ul>
</div>
<?php include(INCLUDE_PATH . "/layouts/footer.php") ?>
</body>
</html>Ga in uw browser naar http://localhost/user-accounts/admin/dashboard.php en u ziet enkele waarschuwingsberichten. Dat komt omdat we een tweetal bestanden opnemen die nog niet bestaan:middleware.php en admin_navbar.php.
Wat betreft middleware.php, we zullen er later aan werken. Maar maak het voor nu gewoon in de beheerdersmap en laat het leeg zodat het waarschuwingsbericht kan verdwijnen en ons met rust laat.
Wat de admin_navbar.php betreft, maak deze aan in de map include/layouts:
admin_navbar.php:
<!-- the whole site is wrapped in a container div to give it some margin on the sides -->
<!-- closing container div can be found in the footer -->
<div class="container">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="<?php echo BASE_URL . 'admin/dashboard.php' ?>">Dashboard</a>
</div>
<ul class="nav navbar-nav navbar-right">
<?php if (isset($_SESSION['user'])): ?>
<li><a href="<?php echo BASE_URL . 'index.php' ?>"><span class="glyphicon glyphicon-globe"></span></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<?php echo $_SESSION['user']['username'] . ' (' . $_SESSION['user']['role'] . ')'; ?> <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="<?php echo BASE_URL . 'admin/users/editProfile.php' ?>">Profile</a></li>
<li><a href="<?php echo BASE_URL . 'admin/dashboard.php' ?>">Dashboard</a></li>
<li role="separator" class="divider"></li>
<li><a href="<?php echo BASE_URL . 'logout.php' ?>" style="color: red;">Logout</a></li>
</ul>
</li>
<?php endif; ?>
</ul>
</div>
</nav>
<?php include(INCLUDE_PATH . "/layouts/messages.php") ?>
Vernieuw nu de dashboard.php-pagina in uw browser en de waarschuwingsberichten zijn verdwenen.
De dashboard.php is het beheerdersgedeelte, toch? Het is niet de bedoeling dat gewone gebruikers er toegang toe hebben. We moeten dus elke normale gebruiker die deze pagina probeert te bezoeken, terugsturen naar de startpagina. Ook maken/beheren we nog geen beheerdersgebruikers en -rollen. Dat komt allemaal binnenkort.
Laten we dit deel hier beëindigen. In het volgende deel gaan we verder met het beheren van beheerdersaccounts en ook met toegangscontrole.
Als je deze tutorials leuk vindt en er meer van wilt, overweeg dan om de tutorials te delen/aan te bevelen onder je vrienden. Dat zal me een heel eind helpen om er meer van te maken.
Bedankt voor het volgen en tot ziens in het volgende deel.