To jest trzecia część serii samouczków dotyczących tworzenia systemu zarządzania kontami użytkowników. Pozostałe części znajdziesz tutaj:część 1, część 2.
Walidacja formularza
W tym momencie na stronie signup.php, jeśli po prostu klikniesz przycisk rejestracji bez wypełniania żadnego z pól formularza, nie otrzymasz żadnej opinii, ale formularz również nic nie robi. Po prostu pozostaje i patrzy na ciebie. Pozostaje tak, ponieważ w $errors z naszej zdefiniowanej wcześniej funkcji validateUser() występują błędy, których jeszcze nie wyświetlamy w formularzu. Te błędy występują w parach klucz-wartość.
Na przykład $errors['username'] zawiera błąd, jeśli występuje, w polu nazwy użytkownika. Możemy więc sprawdzić, czy błąd nazwy użytkownika istnieje, a następnie dodajemy klasę bootstrap has-error do elementu div, który otacza pole wejściowe nazwy użytkownika. Dzięki temu tekst etykiety i obramowanie wejściowe są czerwone, co wskazuje na błąd.
Będziemy weryfikować pola dotyczące nazwy użytkownika, adresu e-mail, hasła i potwierdzenia hasła. Otwórz więc plik signup.php i zastąp te cztery pola tym kodem:
<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>Tuż pod każdym polem wejściowym warunkowo wyświetlamy komunikat o błędzie dla każdego pola formularza.
Na wypadek, gdybyś nie wiedział o operatorze trójskładnikowym, oto krótkie wyjaśnienie.
<?php echo isset($errors['username']) ? 'has-error' : '' ?>To stwierdzenie zasadniczo mówi, że jeśli zmienna $errors['username'] jest ustawiona na wartość (nie jest pusta), wyświetlaj błąd, w przeciwnym razie wyświetla pusty ciąg. Jest to po prostu stwierdzenie „jeżeli-w przeciwnym razie”.
Teraz możesz wypróbować tę weryfikację, klikając pusty formularz. Zobaczysz ładnie sformatowane wiadomości weryfikujące.
Logowanie użytkownika
W folderze głównym aplikacji utwórz plik o nazwie 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") ?>
Teraz otwórz userSignup.php i na końcu pliku dodaj ten kod, aby zalogować się użytkownik:
// ...
// 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";
}
}
}Jeśli klikniesz przycisk logowania bez jego wypełnienia, na formularzu pojawią się komunikaty sprawdzające, tak jak na stronie rejestracji.
Teraz wprowadź adres e-mail i hasło do utworzonego wcześniej konta użytkownika i kliknij przycisk logowania. Jeśli poświadczenia były poprawne, zostaniesz zalogowany i przekierowany na stronę główną. Wyświetli się wiadomość flash informująca, że jesteś teraz zalogowany.
Ale zauważysz, że chociaż użytkownik jest teraz zalogowany, linki do rejestracji i logowania na pasku nawigacyjnym są nadal wyświetlane, co nie ma sensu, prawda? Zastąpmy je nazwą zalogowanego użytkownika i listą rozwijaną z linkiem do wylogowania.
Otwórz plik navbar.php i zastąp kod, który jest w nim z tym:
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>
Teraz odśwież stronę index.php. Jeśli nadal byłeś zalogowany, zobaczysz, że nagłówek się zmienił i teraz wyświetla twoją nazwę użytkownika na pasku nawigacyjnym. Po kliknięciu nazwy użytkownika pojawi się menu rozwijane z linkiem do wylogowania. Jeśli go klikniesz, powie, że strona nie została znaleziona, ponieważ nie utworzyliśmy jeszcze pliku logout.php. Utwórzmy teraz ten plik w głównym folderze naszej aplikacji.
logout.php:
<?php
session_start();
session_destroy();
unset($_SESSION['user']);
header("location: login.php");
?>I skończyliśmy z normalnym uwierzytelnianiem użytkownika. Teraz przechodzimy do sedna sprawy, czyli do działu administracyjnego. Mam nadzieję, że ci się podoba.
W tej chwili logujemy użytkownika za pomocą tylko jednej funkcji, funkcji loginById(). W tej funkcji, jeśli logujący się użytkownik okaże się użytkownikiem administracyjnym, zostanie przekierowany do pliku dashboard.php.
Sekcja administracyjna
W folderze administratora utwórz plik 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>W przeglądarce wejdź na http://localhost/user-accounts/admin/dashboard.php, a zobaczysz kilka komunikatów ostrzegawczych. Dzieje się tak, ponieważ dołączamy dwa pliki, które jeszcze nie istnieją:middleware.php i admin_navbar.php.
Jeśli chodzi o middleware.php, zajmiemy się nim później. Ale na razie po prostu utwórz go w folderze administratora i pozostaw puste, aby ostrzeżenie mogło zniknąć i zostawić nas w spokoju.
Jeśli chodzi o admin_navbar.php, utwórz go w folderze 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") ?>
W przeglądarce odśwież stronę dashboard.php teraz, a komunikaty ostrzegawcze znikną.
Dashboard.php to obszar administracyjny, prawda? Nie powinien być dostępny dla zwykłych użytkowników. Dlatego musimy przekierować każdego zwykłego użytkownika próbującego odwiedzić tę stronę z powrotem na stronę główną. Ponadto nie tworzymy jeszcze ani nie zarządzamy użytkownikami i rolami administracyjnymi. Wszystko to już wkrótce.
Zakończmy tę część tutaj. W następnej części zajmiemy się zarządzaniem kontami użytkowników administracyjnych, a także kontrolą dostępu.
Jeśli podobają Ci się te samouczki i chcesz ich więcej, rozważ udostępnienie/polecenie samouczków znajomym. To będzie naprawdę długa droga, aby wesprzeć mnie w tworzeniu tego więcej.
Dziękujemy za śledzenie i do zobaczenia w następnej części.
