Dette er del 3 af en række tutorials om, hvordan man opretter et brugerkontiadministrationssystem. Du kan finde de andre dele her: del 1, del 2.
Formularvalidering
På dette tidspunkt på signup.php-siden, hvis du bare klikker på tilmeldingsknappen uden at udfylde nogen af formularfelterne, får du ingen feedback, men formularen gør heller ikke noget. Den bliver bare der og stirrer på dig. Det forbliver sådan, fordi der er fejl i en $errors fra vores validateUser() funktion, vi definerede tidligere, som vi endnu ikke viser på formularen. Disse fejl findes i nøgleværdi-par.
F.eks. $errors['brugernavn'] indeholder fejlen, hvis nogen, for brugernavn-feltet. Så vi kan kontrollere, om brugernavnsfejlen eksisterer, så tilføjer vi bootstrap-klassen has-error til div-elementet, der omslutter brugernavnets indtastningsfelt. Dette gør etiketteksten og inputkanten rød i farven, hvilket indikerer, at der er en fejl.
Vi validerer felterne for brugernavn, e-mail, adgangskode og bekræftelse af adgangskode. Så åbn din signup.php-fil og erstat disse fire felter med denne kode:
<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>Lige under hvert inputfelt viser vi betinget fejlmeddelelsen for hvert formularfelt.
Bare hvis du ikke kendte til den ternære operator, er her en kort forklaring.
<?php echo isset($errors['username']) ? 'has-error' : '' ?>Denne erklæring siger grundlæggende, at hvis $errors['brugernavn']-variablen er indstillet til en værdi (er ikke tom), skal du vise has-error, ellers vise en tom streng. Det er dybest set bare en hvis-else-sætning.
Nu kan du prøve denne validering ved at klikke på den tomme formular. Du vil se pæne formaterede valideringsmeddelelser.
Brugerlogin
I rodmappen i dit program skal du oprette en fil med navnet 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") ?>
Åbn nu userSignup.php og i slutningen af filen, tilføj denne kode for at logge på bruger:
// ...
// 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";
}
}
}Hvis du klikker på login-knappen uden at udfylde den, vil valideringsmeddelelser blive vist på formularen ligesom tilfældet med tilmeldingssiden.
Indtast nu e-mail og adgangskode til den brugerkonto, vi oprettede tidligere, og klik på login-knappen. Hvis legitimationsoplysningerne var korrekte, vil du blive logget ind og omdirigeret til hjemmesiden. Der vises en flashmeddelelse, der fortæller dig, at du nu er logget ind.
Men du vil bemærke, at selvom brugeren nu er logget ind, bliver tilmeldings- og login-links i navigeringslinjen stadig vist, hvilket ikke giver mening, vel? Lad os erstatte dem med det loggede brugernavn og en rullemenu med et logout-link på.
Åbn filen navbar.php og erstat koden der er i den med denne:
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>
Opdater nu index.php-siden. Hvis du stadig var logget ind, vil du se, at overskriften er ændret og nu viser dit brugernavn på navigeringslinjen. Når du klikker på brugernavnet, vises en rullemenu med et logout-link på. Hvis du klikker på den, vil den sige siden ikke fundet, fordi vi ikke har oprettet logout.php-filen endnu. Lad os oprette den fil nu i rodmappen i vores applikation.
logout.php:
<?php
session_start();
session_destroy();
unset($_SESSION['user']);
header("location: login.php");
?>Og vi er færdige med den normale brugergodkendelse. Nu bevæger vi os ind i sagens kerne, som er admin-sektionen. Håber du nyder det.
Lige nu logger vi brugeren ind gennem kun én funktion, loginById()-funktionen. I den funktion, hvis brugeren, der logger ind, viser sig at være en administrativ bruger, bliver de omdirigeret til filen dashboard.php.
Administrationssektion
Opret filen dashboard.php i admin-mappen:
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>I din browser skal du besøge http://localhost/user-accounts/admin/dashboard.php og du vil se nogle advarselsmeddelelser. Det er fordi vi inkluderer nogle to filer, der endnu ikke eksisterer:middleware.php og admin_navbar.php.
Hvad angår middleware.php, vil vi arbejde på det senere. Men indtil videre skal du bare oprette den i administratormappen og lade den være tom, så advarselsmeddelelsen kan forsvinde og lade os være i fred.
Hvad angår admin_navbar.php, skal du oprette den i mappen includes/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") ?>
Opdater siden dashboard.php i din browser nu, og advarselsmeddelelserne er væk.
Dashboard.php er administrationsområdet, ikke? Det er ikke meningen, at den skal tilgås af almindelige brugere. Så vi er nødt til at omdirigere enhver normal bruger, der forsøger at besøge denne side, tilbage til hjemmesiden. Desuden er vi endnu ikke ved at oprette/administrere administratorbrugere og roller. Alt det kommer snart.
Lad os afslutte denne del her. I den næste del fortsætter vi med at administrere admin-brugerkonti og også adgangskontrol.
Hvis du nyder disse tutorials og ønsker flere af dem, så overvej at dele/anbefale tutorials blandt dine venner. Det vil være en rigtig lang vej for at støtte mig i at skabe mere af dette.
Tak fordi du følger med, og vi ses i næste del.