यह उपयोगकर्ता खाता प्रबंधन प्रणाली बनाने के तरीके पर ट्यूटोरियल की एक श्रृंखला का भाग 3 है। आप अन्य भागों को यहाँ देख सकते हैं: भाग 1, भाग 2।
फ़ॉर्म सत्यापन
साइनअप.php पेज पर इस समय, यदि आप बिना किसी फॉर्म फ़ील्ड को भरे साइनअप बटन पर क्लिक करते हैं, तो आपको कोई फीडबैक नहीं मिलता है लेकिन फॉर्म भी कुछ नहीं करता है। यह बस वहीं आपको घूरता रहता है। यह ऐसा ही रहता है क्योंकि हमारे द्वारा पहले परिभाषित किए गए हमारे वैलिडेटयूजर () फ़ंक्शन से एक $errors में त्रुटियां हैं जिन्हें हम अभी तक फॉर्म पर प्रदर्शित नहीं कर रहे हैं। ये त्रुटियां कुंजी-मान जोड़े में मौजूद हैं।
उदाहरण के लिए, $errors['username'] उपयोगकर्ता नाम फ़ील्ड के लिए त्रुटि, यदि कोई हो, रखता है। इसलिए हम जांच सकते हैं कि उपयोगकर्ता नाम त्रुटि मौजूद है या नहीं, तो हम उस div तत्व में बूटस्ट्रैप वर्ग है-त्रुटि जोड़ते हैं जो उपयोगकर्ता नाम इनपुट फ़ील्ड को लपेटता है। यह लेबल टेक्स्ट और इनपुट बॉर्डर को लाल रंग का बनाता है जो दर्शाता है कि कोई त्रुटि है।
हम उपयोगकर्ता नाम, ईमेल, पासवर्ड, पासवर्ड पुष्टि फ़ील्ड की पुष्टि करेंगे. तो अपनी साइनअप फ़ाइल खोलें और इन चार फ़ील्ड को इस कोड से बदलें:
<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>
प्रत्येक इनपुट फ़ील्ड के ठीक नीचे, हम सशर्त रूप से प्रत्येक फ़ॉर्म फ़ील्ड के लिए त्रुटि संदेश प्रदर्शित कर रहे हैं।
<ब्लॉकक्वॉट>यदि आप टर्नरी ऑपरेटर के बारे में नहीं जानते हैं, तो यहां एक संक्षिप्त विवरण दिया गया है।
<?php echo isset($errors['username']) ? 'has-error' : '' ?>
यह कथन मूल रूप से कहता है कि यदि $errors['username'] वैरिएबल एक मान पर सेट है (खाली नहीं है), हैस-एरर प्रदर्शित करें, अन्यथा एक खाली स्ट्रिंग प्रदर्शित करें। यह मूल रूप से सिर्फ एक और बयान है।
अब आप खाली फॉर्म पर क्लिक करके इस सत्यापन को आजमा सकते हैं। आपको अच्छे स्वरूपित मान्य संदेश दिखाई देंगे।
उपयोगकर्ता लॉगिन
अपने एप्लिकेशन के रूट फोल्डर में, 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") ?>
अब userSignup.php खोलें और फ़ाइल के अंत में, उपयोगकर्ता में लॉग इन करने के लिए इस कोड को जोड़ें:
// ...
// 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";
}
}
}
यदि आप लॉगिन बटन को बिना भरे हुए क्लिक करते हैं, तो फॉर्म पर सत्यापन संदेश साइनअप पृष्ठ के मामले की तरह ही दिखाई देंगे।
अब हमारे द्वारा पहले बनाए गए उपयोगकर्ता खाते के लिए ईमेल और पासवर्ड दर्ज करें और लॉगिन बटन पर क्लिक करें। यदि क्रेडेंशियल सही थे, तो आप लॉग इन हो जाएंगे और होमपेज पर रीडायरेक्ट हो जाएंगे। एक फ्लैश संदेश प्रदर्शित होगा जो आपको बताता है कि अब आप लॉग इन हैं।
लेकिन आप देखेंगे कि भले ही उपयोगकर्ता अब लॉग इन है, फिर भी नेवबार में साइनअप और लॉगिन लिंक प्रदर्शित किए जा रहे हैं, जिसका कोई मतलब नहीं है, है ना? आइए उन्हें लॉग इन यूज़रनेम और एक ड्रॉप-डाउन के साथ लॉगआउट लिंक के साथ बदलें।
navbar.php फ़ाइल खोलें और प्रतिस्थापित करें इसमें जो कोड है वह इसके साथ है:
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>
अब index.php पेज को रिफ्रेश करें। यदि आप अभी भी लॉग इन थे, तो आप देखेंगे कि हेडर बदल गया है और अब आपका उपयोगकर्ता नाम नेवबार पर प्रदर्शित होता है। जब आप उपयोगकर्ता नाम पर क्लिक करते हैं, तो उस पर एक लॉगआउट लिंक के साथ एक ड्रॉप-डाउन दिखाई देगा। यदि आप उस पर क्लिक करते हैं, तो यह कहेगा कि पेज नहीं मिला क्योंकि हमने अभी तक logout.php फाइल नहीं बनाई है। आइए अब उस फाइल को हमारे एप्लिकेशन के रूट फोल्डर में बनाएं।
logout.php:
<?php
session_start();
session_destroy();
unset($_SESSION['user']);
header("location: login.php");
?>
और हम सामान्य उपयोगकर्ता प्रमाणीकरण के साथ कर रहे हैं। अब हम इस मामले की तह में जाते हैं जो कि एडमिन सेक्शन है। आशा है कि आप इसका आनंद ले रहे होंगे।
अभी हम उपयोगकर्ता को केवल एक फ़ंक्शन, loginById() फ़ंक्शन के माध्यम से लॉग इन कर रहे हैं। उस फ़ंक्शन में, यदि लॉग इन करने वाला उपयोगकर्ता एक व्यवस्थापकीय उपयोगकर्ता पाया जाता है, तो उन्हें डैशबोर्ड.php फ़ाइल पर पुनर्निर्देशित किया जाता है।
व्यवस्थापक अनुभाग
व्यवस्थापक फ़ोल्डर के अंदर, डैशबोर्ड.php फ़ाइल बनाएँ:
डैशबोर्ड.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>
अपने ब्राउज़र पर, http://localhost/user-accounts/admin/dashboard.php पर जाएं और आपको कुछ चेतावनी संदेश दिखाई देंगे। ऐसा इसलिए है क्योंकि हम कुछ दो फाइलों को शामिल कर रहे हैं जो अभी तक मौजूद नहीं हैं:मिडलवेयर.php और admin_navbar.php।
जहां तक मिडलवेयर.php का सवाल है, हम इस पर बाद में काम करेंगे। लेकिन अभी के लिए इसे केवल व्यवस्थापक फ़ोल्डर के अंदर बनाएं और इसे खाली छोड़ दें ताकि चेतावनी संदेश गायब हो सके और हमें शांति से छोड़ सके।
जहां तक admin_navbar.php का सवाल है, इसे इनक्लूड/लेआउट फोल्डर के अंदर बनाएं:
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") ?>
अपने ब्राउज़र पर, अभी डैशबोर्ड.php पृष्ठ रीफ़्रेश करें और चेतावनी संदेश चले गए हैं।
डैशबोर्ड.php व्यवस्थापन क्षेत्र है, है ना? इसे सामान्य उपयोगकर्ताओं द्वारा एक्सेस नहीं किया जाना चाहिए। इसलिए हमें इस पृष्ठ पर वापस आने का प्रयास करने वाले किसी भी सामान्य उपयोगकर्ता को मुखपृष्ठ पर पुनर्निर्देशित करने की आवश्यकता है। साथ ही, हम अभी तक व्यवस्थापक उपयोगकर्ताओं और भूमिकाओं का निर्माण/प्रबंधन नहीं कर रहे हैं। वह सब जल्द ही आ रहा है।
आइए इस भाग को यहीं समाप्त करते हैं। अगले भाग में, हम व्यवस्थापक उपयोगकर्ता खातों और अभिगम नियंत्रण के प्रबंधन के साथ आगे बढ़ते हैं।
यदि आप इन ट्यूटोरियल का आनंद ले रहे हैं और उनमें से अधिक चाहते हैं, तो कृपया अपने दोस्तों के बीच ट्यूटोरियल साझा करने/सिफारिश करने पर विचार करें। इसे और अधिक बनाने में मेरा समर्थन करने के लिए यह वास्तव में एक लंबा रास्ता तय करेगा।
अनुसरण करने के लिए धन्यवाद और अगले भाग में मिलते हैं।