Detta är del 3 i en serie handledningar om hur man skapar ett hanteringssystem för användarkonton. Du hittar de andra delarna här: del 1, del 2.
Formulärvalidering
Vid det här laget på signup.php-sidan, om du bara klickar på registreringsknappen utan att fylla i något av formulärfälten, får du ingen feedback, men formuläret gör inte heller någonting. Den stannar bara där och stirrar på dig. Det förblir så eftersom det finns fel i en $errors från vår funktion validateUser() som vi definierade tidigare som vi ännu inte visar i formuläret. Dessa fel finns i nyckel-värdepar.
Till exempel $errors['användarnamn'] innehåller felet, om det finns, för användarnamnsfältet. Så vi kan kontrollera om användarnamnsfelet finns, då lägger vi till bootstrap-klassen has-error till div-elementet som omsluter användarnamnets inmatningsfält. Detta gör att etiketttexten och inmatningsramen är röda, vilket indikerar att det finns ett fel.
Vi kommer att validera fälten för användarnamn, e-postadress, lösenord och lösenordsbekräftelse. Så öppna din signup.php-fil och ersätt dessa fyra fält med denna kod:
<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>Precis under varje inmatningsfält visar vi villkorligt felmeddelandet för varje formulärfält.
Ifall du inte kände till den ternära operatorn, här är en kort förklaring.
<?php echo isset($errors['username']) ? 'has-error' : '' ?>Detta uttalande säger i princip att om $errors['användarnamn']-variabeln är inställd på ett värde (inte tom), visa has-error, annars visas en tom sträng. Det är i princip bara ett om-annat-påstående.
Nu kan du prova denna validering genom att klicka på det tomma formuläret. Du kommer att se snyggt formaterade valideringsmeddelanden.
Användarinloggning
Skapa en fil med namnet login.php.
i rotmappen i ditt programlogin.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") ?>
Öppna nu userSignup.php och i slutet av filen, lägg till denna kod för att logga in användare:
// ...
// 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";
}
}
}Om du klickar på inloggningsknappen utan att fylla den, kommer valideringsmeddelanden att visas på formuläret precis som fallet med registreringssidan.
Ange nu e-postadressen och lösenordet för användarkontot vi skapade tidigare och klicka på inloggningsknappen. Om inloggningsuppgifterna var korrekta kommer du att loggas in och omdirigeras till hemsidan. Ett snabbmeddelande visas som talar om att du nu är inloggad.
Men du kommer att märka att även om användaren nu är inloggad, så visas registrerings- och inloggningslänkarna i navigeringsfältet fortfarande, vilket inte är vettigt, eller hur? Låt oss ersätta dem med det inloggade användarnamnet och en rullgardinsmeny med en utloggningslänk.
Öppna filen navbar.php och ersätt koden som finns i den med denna:
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>
Uppdatera nu sidan index.php. Om du fortfarande var inloggad kommer du att se att rubriken har ändrats och nu visar ditt användarnamn på navigeringsfältet. När du klickar på användarnamnet visas en rullgardinsmeny med en utloggningslänk på den. Om du klickar på den kommer det att stå sidan hittades inte eftersom vi inte har skapat filen logout.php än. Låt oss skapa den filen nu i rotmappen i vår applikation.
logout.php:
<?php
session_start();
session_destroy();
unset($_SESSION['user']);
header("location: login.php");
?>Och vi är klara med den normala användarautentiseringen. Nu går vi in på sakens kärna som är adminsektionen. Hoppas du njuter av det.
Just nu loggar vi in användaren genom endast en funktion, loginById()-funktionen. I den funktionen, om användaren som loggar in visar sig vara en administrativ användare, omdirigeras de till filen dashboard.php.
Adminsektion
Skapa 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 webbläsare besöker du http://localhost/user-accounts/admin/dashboard.php så kommer du att se några varningsmeddelanden. Det beror på att vi inkluderar två filer som ännu inte finns:middleware.php och admin_navbar.php.
När det gäller middleware.php kommer vi att arbeta med det senare. Men för nu skapa det bara i admin mappen och lämna det tomt så att varningsmeddelandet kan försvinna och lämna oss i fred.
När det gäller admin_navbar.php, skapa 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") ?>
Uppdatera sidan dashboard.php i din webbläsare nu och varningsmeddelandena är borta.
Dashboard.php är administratörsområdet, eller hur? Det är inte meningen att den ska nås av vanliga användare. Så vi måste omdirigera alla normala användare som försöker besöka den här sidan tillbaka till startsidan. Dessutom skapar/hanterar vi inte administratörsanvändare och roller ännu. Allt detta kommer snart.
Låt oss avsluta den här delen här. I nästa del fortsätter vi med att hantera administratörsanvändarkonton och även åtkomstkontroll.
Om du gillar dessa tutorials och vill ha fler av dem, vänligen överväg att dela/rekommendera tutorials mellan dina vänner. Det kommer att räcka mycket för att stödja mig i att skapa mer av detta.
Tack för att du följer och vi ses i nästa del.