Ini adalah bagian 3 dari serangkaian tutorial tentang cara membuat sistem manajemen akun pengguna. Anda dapat menemukan bagian lainnya di sini: bagian 1, bagian 2.
Validasi Formulir
Pada titik ini di halaman signup.php, jika Anda hanya mengklik tombol signup tanpa mengisi kolom formulir apa pun, Anda tidak akan mendapatkan masukan apa pun, tetapi formulir juga tidak melakukan apa-apa. Itu hanya tetap di sana menatapmu. Tetap seperti itu karena ada kesalahan dalam $errors dari fungsi validasiUser() kami yang kami definisikan sebelumnya yang belum kami tampilkan di formulir. Error ini ada pada key-value pair.
Misalnya, $errors['username'] menyimpan kesalahan, jika ada, untuk bidang nama pengguna. Jadi kami dapat memeriksa apakah ada kesalahan nama pengguna kemudian kami menambahkan kelas bootstrap has-error ke elemen div yang membungkus bidang input nama pengguna. Ini membuat teks label dan batas input berwarna merah yang menunjukkan ada kesalahan.
Kami akan memvalidasi kolom username, email, password, password konfirmasi. Jadi buka file signup.php Anda dan ganti keempat bidang ini dengan kode ini:
<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>Tepat di bawah setiap kolom input, kami secara kondisional menampilkan pesan kesalahan untuk setiap kolom formulir.
Jika Anda belum tahu tentang operator ternary, berikut penjelasan singkatnya.
<?php echo isset($errors['username']) ? 'has-error' : '' ?>Pernyataan ini pada dasarnya mengatakan bahwa jika variabel $errors['username'] disetel ke nilai (tidak kosong), display has-error, jika tidak, tampilkan string kosong. Ini pada dasarnya hanyalah pernyataan if-else.
Sekarang Anda dapat mencoba validasi ini dengan mengklik formulir kosong. Anda akan melihat pesan validasi berformat bagus.
Masuk pengguna
Di folder root aplikasi Anda, buat file bernama 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") ?>
Sekarang buka userSignup.php dan di akhir file, tambahkan kode ini untuk login user:
// ...
// 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";
}
}
}Jika Anda mengklik tombol login tanpa mengisinya, pesan validasi akan muncul di formulir seperti halnya halaman pendaftaran.
Sekarang masukkan email dan kata sandi untuk akun pengguna yang kami buat sebelumnya dan klik tombol login. Jika kredensial benar, Anda akan masuk dan diarahkan ke beranda. Pesan kilat akan ditampilkan yang memberi tahu Anda bahwa Anda sekarang telah masuk.
Tetapi Anda akan melihat bahwa meskipun pengguna sekarang masuk, tautan pendaftaran dan masuk di navbar masih ditampilkan, yang tidak masuk akal, bukan? Mari kita ganti dengan nama pengguna yang masuk dan tarik-turun dengan tautan keluar.
Buka file navbar.php dan ganti kode yang ada di dalamnya dengan yang ini:
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>
Sekarang segarkan halaman index.php. Jika Anda masih login, Anda akan melihat bahwa header telah berubah dan sekarang menampilkan nama pengguna Anda di navbar. Ketika Anda mengklik nama pengguna, sebuah drop-down akan muncul dengan link logout di atasnya. Jika Anda mengkliknya, itu akan mengatakan halaman tidak ditemukan karena kami belum membuat file logout.php. Mari buat file itu sekarang di folder root aplikasi kita.
logout.php:
<?php
session_start();
session_destroy();
unset($_SESSION['user']);
header("location: login.php");
?>Dan kita selesai dengan otentikasi pengguna normal. Sekarang kita pindah ke inti masalah yang merupakan bagian admin. Semoga Anda menikmatinya.
Saat ini kami memasukkan pengguna hanya melalui satu fungsi, fungsi loginById(). Dalam fungsi tersebut, jika pengguna yang login ternyata adalah pengguna administratif, mereka akan diarahkan ke file dashboard.php.
Bagian Admin
Di dalam folder admin, buat file 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>Di browser Anda, kunjungi http://localhost/user-accounts/admin/dashboard.php dan Anda akan melihat beberapa pesan peringatan. Itu karena kami menyertakan beberapa dua file yang belum ada:middleware.php dan admin_navbar.php.
Untuk middleware.php akan kami kerjakan nanti. Namun untuk saat ini, buat saja di dalam folder admin dan biarkan kosong agar pesan peringatan tersebut dapat hilang dan membuat kita tenang.
Untuk admin_navbar.php, buat di dalam folder 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") ?>
Di browser Anda, segarkan halaman dashboard.php sekarang dan pesan peringatan akan hilang.
Dashboard.php adalah area admin, kan? Itu tidak seharusnya diakses oleh pengguna biasa. Jadi, kita perlu mengarahkan ulang pengguna biasa yang mencoba mengunjungi halaman ini kembali ke beranda. Selain itu, kami belum membuat/mengelola pengguna dan peran admin. Semua itu akan segera hadir.
Mari kita akhiri bagian ini di sini. Di bagian selanjutnya, kita lanjutkan dengan mengelola akun pengguna admin dan juga kontrol akses.
Jika Anda menikmati tutorial ini dan ingin lebih banyak lagi, mohon pertimbangkan untuk membagikan/merekomendasikan tutorial ini di antara teman-teman Anda. Itu akan sangat membantu saya dalam membuat lebih banyak lagi.
Terima kasih telah mengikuti dan sampai jumpa di bagian selanjutnya.
