Gestión de cuentas de usuario, roles, permisos, autenticación PHP y MySQL – Parte 3

Esta es la parte 3 de una serie de tutoriales sobre cómo crear un sistema de administración de cuentas de usuario. Puede encontrar las otras partes aquí: parte 1, parte 2.

Validación de formulario

En este punto de la página signup.php, si simplemente hace clic en el botón de registro sin completar ninguno de los campos del formulario, no recibirá ningún comentario, pero el formulario tampoco hace nada. Simplemente se queda ahí mirándote. Se queda así porque hay errores en un $ errores De nuestros validateUser () función que definimos anteriormente que aún no estamos mostrando en el formulario. Estos errores existen en pares clave-valor.

Por ejemplo, $ errores[‘username’] contiene el error, si lo hay, para el campo de nombre de usuario. Entonces podemos verificar si existe el error de nombre de usuario y luego agregamos la clase de arranque tiene-error al elemento div que envuelve el campo de entrada del nombre de usuario. Esto hace que el texto de la etiqueta y el borde de entrada sean de color rojo, lo que indica que hay un error.

Estaremos validando los campos de nombre de usuario, correo electrónico, contraseña y confirmación de contraseña. Así que abre tu archivo signup.php y reemplaza estos cuatro campos con este código:

<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>

Justo debajo de cada campo de entrada, mostramos condicionalmente el mensaje de error para cada campo de formulario.

En caso de que no conociera el operador ternario, aquí hay una breve explicación.

<?php echo isset($errors['username']) ? 'has-error' : '' ?>

Esta declaración básicamente dice que si el $ errores[‘username’] variable se establece en un valor (no está vacío), mostrar tiene-error, de lo contrario, muestre una cadena vacía. Básicamente es solo una declaración if-else.

Ahora puede probar esta validación haciendo clic en el formulario vacío. Verá buenos mensajes de validación formateados.

Inicio de sesión de usuario

En la carpeta raíz de su aplicación, cree un archivo llamado 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") ?>

Ahora abierto userSignup.php y al final del archivo, agregue este código para iniciar sesión como usuario:

// ...

// 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";
		}
	}
}

Si hace clic en el botón de inicio de sesión sin completarlo, aparecerán mensajes de validación en el formulario al igual que en el caso de la página de registro.

Ahora ingrese el correo electrónico y la contraseña de la cuenta de usuario que creamos anteriormente y haga clic en el botón de inicio de sesión. Si las credenciales eran correctas, se iniciará sesión y se le redirigirá a la página de inicio. Aparecerá un mensaje flash que le indicará que ya ha iniciado sesión.

Pero notará que a pesar de que el usuario ha iniciado sesión, los enlaces de registro e inicio de sesión en la barra de navegación todavía se muestran, lo cual no tiene sentido, ¿verdad? Reemplácelos con el nombre de usuario que inició sesión y un menú desplegable con un enlace de cierre de sesión.

Abre el navbar.php archivo y reemplazar el código que está en él con este:

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>

Ahora actualice la página index.php. Si aún estaba conectado, verá que el encabezado ha cambiado y ahora muestra su nombre de usuario en la barra de navegación. Cuando haga clic en el nombre de usuario, aparecerá un menú desplegable con un enlace de cierre de sesión. Si hace clic en él, dirá página no encontrada porque aún no hemos creado el archivo logout.php. Creemos ese archivo ahora en la carpeta raíz de nuestra aplicación.

logout.php:

<?php
  session_start();
  session_destroy();
  unset($_SESSION['user']);
  header("location: login.php");
?>

En este momento estamos registrando al usuario a través de una sola función, la loginById() función. En esa función, si el usuario que está iniciando sesión es un usuario administrativo, se le redirige al archivo dashboard.php.

Sección de administración

Dentro administración carpeta, cree el archivo 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>

En su navegador, visite http: //localhost/user-accounts/admin/dashboard.php y verá algunos mensajes de advertencia. Esto se debe a que incluimos dos archivos que aún no existen: middleware.php y admin_navbar.php.

En cuanto a middleware.php, trabajaremos en él más tarde. Pero por ahora solo créalo adentro administración carpeta y déjela en blanco para que el mensaje de advertencia desaparezca y nos deje en paz.

En cuanto al admin_navbar.php, créelo dentro del incluye / diseños carpeta:

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") ?>

En su navegador, actualice la página dashboard.php ahora y los mensajes de advertencia desaparecerán.

El dashboard.php es el área de administración, ¿verdad? No se supone que los usuarios normales accedan a él. Por lo tanto, debemos redirigir a cualquier usuario normal que intente visitar esta página a la página de inicio. Además, aún no estamos creando / administrando usuarios y roles de administrador. Todo eso llegará pronto.

Terminemos esta parte aquí. En la siguiente parte, procedemos a administrar las cuentas de los usuarios administradores y también al control de acceso.

Si está disfrutando de estos tutoriales y quiere más, considere compartir / recomendar los tutoriales entre sus amigos. Eso será de gran ayuda para ayudarme a crear más de esto.

Gracias por seguirnos y nos vemos en la siguiente parte.

Awa Melvine

Deja un comentario