Toto je část 3 série návodů, jak vytvořit systém správy uživatelských účtů. Další díly naleznete zde: část 1, část 2.
Ověření formuláře
Pokud v tomto okamžiku na stránce signup.php kliknete na tlačítko registrace bez vyplnění jakéhokoli pole formuláře, nezískáte žádnou zpětnou vazbu, ale formulář také nic nedělá. Jen tam zůstane a zírá na tebe. Zůstane to tak, protože v $errors z funkce validateUser(), kterou jsme definovali dříve, jsou chyby, které ve formuláři zatím nezobrazujeme. Tyto chyby existují v párech klíč–hodnota.
Například $errors['username'] obsahuje chybu, pokud existuje, pro pole uživatelského jména. Takže můžeme zkontrolovat, zda existuje chyba uživatelského jména, a poté přidáme třídu bootstrap has-error do prvku div, který obaluje vstupní pole uživatelského jména. Tím se text štítku a vstupní hranice zbarví červeně, což znamená, že došlo k chybě.
Ověříme pole uživatelského jména, e-mailu, hesla a potvrzení hesla. Otevřete tedy svůj soubor signup.php a nahraďte tato čtyři pole tímto kódem:
<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>Přímo pod každým vstupním polem podmíněně zobrazujeme chybovou zprávu pro každé pole formuláře.
Pro případ, že byste nevěděli o ternárním operátoru, zde je krátké vysvětlení.
<?php echo isset($errors['username']) ? 'has-error' : '' ?>Toto prohlášení v podstatě říká, že pokud je proměnná $errors['username'] nastavena na hodnotu (není prázdná), zobrazí has-error, jinak zobrazí prázdný řetězec. Je to v podstatě jen prohlášení if-else.
Nyní si můžete toto ověření vyzkoušet kliknutím na prázdný formulář. Uvidíte pěkně naformátované ověřovací zprávy.
Přihlášení uživatele
V kořenové složce vaší aplikace vytvořte soubor s názvem 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") ?>
Nyní otevřete userSignup.php a na konec souboru přidejte tento kód pro přihlášení uživatele:
// ...
// 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";
}
}
}Pokud kliknete na přihlašovací tlačítko bez jeho vyplnění, objeví se ve formuláři ověřovací zprávy stejně jako v případě přihlašovací stránky.
Nyní zadejte e-mail a heslo k uživatelskému účtu, který jsme vytvořili dříve, a klikněte na tlačítko přihlášení. Pokud byly přihlašovací údaje správné, budete přihlášeni a přesměrováni na domovskou stránku. Zobrazí se blesková zpráva, která vám sdělí, že jste nyní přihlášeni.
Ale všimnete si, že i když je uživatel nyní přihlášen, stále se zobrazují odkazy na přihlášení a přihlášení v navigační liště, což nedává smysl, že? Nahraďte je přihlášeným uživatelským jménem a rozevíracím seznamem s odkazem na odhlášení.
Otevřete soubor navbar.php a nahraďte kód, který je v něm s tímto:
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>
Nyní obnovte stránku index.php. Pokud jste byli stále přihlášeni, uvidíte, že se záhlaví změnilo a nyní zobrazuje vaše uživatelské jméno na navigační liště. Když kliknete na uživatelské jméno, objeví se rozbalovací nabídka s odkazem na odhlášení. Pokud na něj kliknete, zobrazí se stránka nenalezena, protože jsme ještě nevytvořili soubor logout.php. Nyní tento soubor vytvoříme v kořenové složce naší aplikace.
logout.php:
<?php
session_start();
session_destroy();
unset($_SESSION['user']);
header("location: login.php");
?>A máme hotovo s běžnou autentizací uživatele. Nyní se dostáváme k jádru věci, kterou je administrační sekce. Doufám, že si to užíváte.
Právě teď přihlašujeme uživatele pouze jednou funkcí, funkcí loginById(). V této funkci, pokud je zjištěno, že uživatel, který se přihlašuje, je administrativní uživatel, je přesměrován do souboru dashboard.php.
Sekce správce
Ve složce admin vytvořte soubor 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>Ve svém prohlížeči navštivte http://localhost/user-accounts/admin/dashboard.php a uvidíte několik varovných zpráv. Je to proto, že jsme zahrnuli některé dva soubory, které ještě neexistují:middleware.php a admin_navbar.php.
Pokud jde o middleware.php, budeme na něm pracovat později. Ale zatím je jen vytvořte ve složce admin a nechte ji prázdnou, aby varovná zpráva mohla zmizet a nechat nás na pokoji.
Pokud jde o admin_navbar.php, vytvořte jej ve složce 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") ?>
Ve svém prohlížeči nyní obnovte stránku dashboard.php a varovné zprávy zmizí.
Dashboard.php je oblast pro správu, že? Běžní uživatelé k němu nemají mít přístup. Potřebujeme tedy přesměrovat každého normálního uživatele, který se pokouší navštívit tuto stránku, zpět na domovskou stránku. Také zatím nevytváříme/nespravujeme administrátory a role. To vše již brzy.
Ukončeme zde tuto část. V další části pokračujeme správou uživatelských účtů admin a také řízením přístupu.
Pokud se vám tyto výukové programy líbí a chcete jich více, zvažte sdílení/doporučení výukových programů mezi své přátele. To bude opravdu dlouhá cesta, která mě podpoří při vytváření dalšího.
Děkujeme za sledování a uvidíme se u další části.