Đây là phần 3 của loạt bài hướng dẫn cách tạo hệ thống quản lý tài khoản người dùng. Bạn có thể tìm các phần khác tại đây:phần 1, phần 2.
Xác thực biểu mẫu
Tại thời điểm này trên trang signup.php, nếu bạn chỉ nhấp vào nút đăng ký mà không điền vào bất kỳ trường biểu mẫu nào, bạn sẽ không nhận được bất kỳ phản hồi nào nhưng biểu mẫu cũng không làm được gì cả. Nó chỉ ở đó nhìn chằm chằm vào bạn. Nó vẫn như vậy vì có lỗi trong một lỗi $ từ hàm validateUser () mà chúng tôi đã xác định trước đó mà chúng tôi chưa hiển thị trên biểu mẫu. Những lỗi này tồn tại trong các cặp khóa-giá trị.
Ví dụ:$ error ['tên người dùng'] giữ lỗi, nếu có, đối với trường tên người dùng. Vì vậy, chúng tôi có thể kiểm tra xem lỗi tên người dùng có tồn tại hay không, sau đó chúng tôi thêm has-error lớp bootstrap vào phần tử div bao bọc trường nhập tên người dùng. Điều này làm cho văn bản nhãn và đường viền nhập liệu có màu đỏ cho biết có lỗi.
Chúng tôi sẽ xác nhận tên người dùng, email, mật khẩu, các trường xác nhận mật khẩu. Vì vậy, hãy mở tệp signup.php của bạn và thay thế bốn trường này bằng mã này:
<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>Ngay bên dưới mỗi trường nhập, chúng tôi đang hiển thị thông báo lỗi có điều kiện cho từng trường biểu mẫu.
Đề phòng trường hợp bạn không biết về toán tử bậc ba, đây là giải thích ngắn gọn.
<?php echo isset($errors['username']) ? 'has-error' : '' ?>Câu lệnh này về cơ bản nói rằng nếu biến $ error ['username'] được đặt thành một giá trị (không trống), thì hiển thị has-error, nếu không thì hiển thị một chuỗi trống. Về cơ bản, nó chỉ là một câu lệnh if-else.
Bây giờ bạn có thể thử xác thực này bằng cách nhấp vào biểu mẫu trống. Bạn sẽ thấy các thông báo xác thực có định dạng đẹp mắt.
Đăng nhập của người dùng
Trong thư mục gốc của ứng dụng, hãy tạo một tệp có tên 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") ?>
Bây giờ mở userSignup.php và ở cuối tệp, thêm mã này để đăng nhập người dùng:
// ...
// 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";
}
}
}Nếu bạn nhấp vào nút đăng nhập mà không điền, thông báo xác thực sẽ xuất hiện trên biểu mẫu giống như trường hợp của trang đăng ký.
Bây giờ nhập email và mật khẩu cho tài khoản người dùng mà chúng tôi đã tạo trước đó và nhấp vào nút đăng nhập. Nếu thông tin đăng nhập chính xác, bạn sẽ được đăng nhập và được chuyển hướng đến trang chủ. Một thông báo flash sẽ hiển thị cho bạn biết rằng bạn hiện đã đăng nhập.
Nhưng bạn sẽ nhận thấy rằng mặc dù người dùng hiện đã đăng nhập, các liên kết đăng ký và đăng nhập trên thanh điều hướng vẫn được hiển thị, điều này không có ý nghĩa gì, phải không? Hãy thay thế chúng bằng tên người dùng đã đăng nhập và menu thả xuống có liên kết đăng xuất trên đó.
Mở tệp navbar.php và thay thế mã có trong nó với mã này:
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>
Bây giờ làm mới trang index.php. Nếu bạn vẫn đăng nhập, bạn sẽ thấy rằng tiêu đề đã thay đổi và bây giờ hiển thị tên người dùng của bạn trên thanh điều hướng. Khi bạn nhấp vào tên người dùng, một menu thả xuống sẽ xuất hiện với liên kết đăng xuất trên đó. Nếu bạn nhấp vào nó, nó sẽ thông báo không tìm thấy trang vì chúng tôi chưa tạo tệp logout.php. Hãy tạo tệp đó ngay bây giờ trong thư mục gốc của ứng dụng của chúng ta.
logout.php:
<?php
session_start();
session_destroy();
unset($_SESSION['user']);
header("location: login.php");
?>Và chúng tôi đã thực hiện xong việc xác thực người dùng thông thường. Bây giờ chúng ta chuyển sang mấu chốt của vấn đề là phần quản trị. Hy vọng bạn sẽ thích nó.
Ngay bây giờ chúng tôi đăng nhập người dùng chỉ thông qua một chức năng, chức năng loginById (). Trong chức năng đó, nếu người dùng đang đăng nhập được phát hiện là người dùng quản trị, họ sẽ được chuyển hướng đến tệp dashboard.php.
Phần quản trị
Bên trong thư mục quản trị, tạo tệp 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>Trên trình duyệt của bạn, hãy truy cập http://localhost/user-accounts/admin/dashboard.php và bạn sẽ thấy một số thông báo cảnh báo. Đó là bởi vì chúng tôi đang bao gồm một số hai tệp chưa tồn tại:middleware.php và admin_navbar.php.
Còn với middleware.php, chúng ta sẽ làm việc sau. Nhưng bây giờ chỉ cần tạo nó bên trong thư mục quản trị và để trống để thông báo cảnh báo có thể biến mất và để chúng tôi yên tâm.
Đối với admin_navbar.php, hãy tạo nó bên trong thư mục 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") ?>
Trên trình duyệt của bạn, hãy làm mới trang dashboard.php ngay bây giờ và các thông báo cảnh báo đã biến mất.
Dashboard.php là khu vực quản trị, phải không? Nó không được cho là được truy cập bởi người dùng bình thường. Vì vậy, chúng tôi cần chuyển hướng bất kỳ người dùng bình thường nào đang cố gắng truy cập trang này trở lại trang chủ. Ngoài ra, chúng tôi vẫn chưa tạo / quản lý người dùng và vai trò quản trị viên. Tất cả những điều đó sẽ sớm ra mắt.
Chúng ta hãy kết thúc phần này tại đây. Trong phần tiếp theo, chúng tôi tiến hành quản lý tài khoản người dùng quản trị và cả kiểm soát truy cập.
Nếu bạn thích những hướng dẫn này và muốn biết thêm về chúng, hãy cân nhắc chia sẻ / giới thiệu những hướng dẫn này cho bạn bè của bạn. Đó sẽ là một chặng đường dài để hỗ trợ tôi tạo ra nhiều thứ hơn thế này.
Cảm ơn đã theo dõi và hẹn gặp lại ở phần tiếp theo.
