Post Top Ad

Your Ad Spot

jueves, 7 de mayo de 2020

Inicio de sesión de administrador y usuario en bases de datos php y mysql

Hoy vamos a construir un sistema de registro que rastrea qué usuarios son administradores y cuáles son usuarios normales. Los usuarios normales de nuestra aplicación no pueden acceder a las páginas de administración. Todos los usuarios (tanto administradores como usuarios normales) usan el mismo formulario para iniciar sesión. Después de iniciar sesión, los usuarios normales son redirigidos a la página de índice mientras que los usuarios administradores son redirigidos a las páginas administrativas.
Curso recomendado de Udemy: el curso  profesional PHP MySQL completo con 5 proyectos
Entonces, comencemos con la creación de los archivos, ¿de acuerdo? Navegue a la carpeta en su máquina que sea accesible para el servidor (es decir, htdocs si está usando xampp y www si está usando wampp), y cree los siguientes archivos y carpetas:
Ahora abra register.php en su editor de texto favorito y comencemos a escribir algo de código. 
Nota:  La primera parte de este tutorial ya está cubierta en una publicación anterior sobre el registro de usuarios . Puede visitar esta publicación para obtener una explicación más elaborada del sistema de registro de usuarios. Para aquellos que ya han seguido esa publicación, pido disculpas por la repetición aquí.
En nuestro archivo register.php en blanco, agreguemos este código:
<!DOCTYPE html>
<html>
<head>
 <title>Registration system PHP and MySQL</title>
</head>
<body>
<div class="header">
 <h2>Register</h2>
</div>
<form method="post" action="register.php">
 <div class="input-group">
  <label>Username</label>
  <input type="text" name="username" value="">
 </div>
 <div class="input-group">
  <label>Email</label>
  <input type="email" name="email" value="">
 </div>
 <div class="input-group">
  <label>Password</label>
  <input type="password" name="password_1">
 </div>
 <div class="input-group">
  <label>Confirm password</label>
  <input type="password" name="password_2">
 </div>
 <div class="input-group">
  <button type="submit" class="btn" name="register_btn">Register</button>
 </div>
 <p>
  Already a member? <a href="login.php">Sign in</a>
 </p>
</form>
</body>
</html>
 Si activamos nuestro navegador y vemos esto, esto es lo que obtenemos:
Eso no se ve bien. Hagamos algo al respecto. 
Agregue un enlace al archivo css justo debajo de la etiqueta <title> </title> en la sección de cabecera del archivo register.php. Al igual que:
<link rel="stylesheet" href="style.css">
Luego abra el archivo style.css y escupe este código CSS en él:
* { margin: 0px; padding: 0px; }
body {
 font-size: 120%;
 background: #F8F8FF;
}
.header {
 width: 40%;
 margin: 50px auto 0px;
 color: white;
 background: #5F9EA0;
 text-align: center;
 border: 1px solid #B0C4DE;
 border-bottom: none;
 border-radius: 10px 10px 0px 0px;
 padding: 20px;
}
form, .content {
 width: 40%;
 margin: 0px auto;
 padding: 20px;
 border: 1px solid #B0C4DE;
 background: white;
 border-radius: 0px 0px 10px 10px;
}
.input-group {
 margin: 10px 0px 10px 0px;
}
.input-group label {
 display: block;
 text-align: left;
 margin: 3px;
}
.input-group input {
 height: 30px;
 width: 93%;
 padding: 5px 10px;
 font-size: 16px;
 border-radius: 5px;
 border: 1px solid gray;
}
#user_type {
 height: 40px;
 width: 98%;
 padding: 5px 10px;
 background: white;
 font-size: 16px;
 border-radius: 5px;
 border: 1px solid gray;
}
.btn {
 padding: 10px;
 font-size: 15px;
 color: white;
 background: #5F9EA0;
 border: none;
 border-radius: 5px;
}
.error {
 width: 92%; 
 margin: 0px auto; 
 padding: 10px; 
 border: 1px solid #a94442; 
 color: #a94442; 
 background: #f2dede; 
 border-radius: 5px; 
 text-align: left;
}
.success {
 color: #3c763d; 
 background: #dff0d8; 
 border: 1px solid #3c763d;
 margin-bottom: 20px;
}
.profile_info img {
 display: inline-block; 
 width: 50px; 
 height: 50px; 
 margin: 5px;
 float: left;
}
.profile_info div {
 display: inline-block; 
 margin: 5px;
}
.profile_info:after {
 content: "";
 display: block;
 clear: both;
}
Este código CSS se utilizará para diseñar nuestra aplicación completa.
Si actualizamos la página register.php en el navegador, obtenemos esta belleza:
 
Lo que queremos ahora es que el usuario complete el formulario y presione el botón de registro para que la información se pueda guardar en la base de datos. Entonces pasamos al siguiente paso.
Creemos una base de datos llamada  multi_login . En la base de datos multi_login, cree una tabla llamada usuarios con los siguientes campos:
  • id - int (10)
  • nombre de usuario - varchar (100)
  • correo electrónico - varchar (100)
  • tipo_usuario - varchar (100)
  • contraseña - varchar (100)
Eso es todo lo que necesitamos para nuestra base de datos.
Pasemos a nuestro archivo register.php una vez más y hagamos algunas modificaciones.
Primero debemos asegurarnos de que el atributo de método del formulario esté configurado para publicar y que el atributo de acción esté configurado en register.php, lo que significa que cuando se hace clic en el botón de registro, los valores del formulario se envían a la misma página.
Ahora escriba el código para recibir estos valores y los almacene en la base de datos. Pero es mi costumbre evitar, tanto como sea posible, mezclar el código php en html, así que seguiré adelante y crearé un archivo functions.php para poner este código dentro y luego hacer que este código esté disponible en el archivo register.php.
En la parte superior (primera línea) del archivo register.php, agregue esta línea de código:
<?php include('functions.php') ?>
//...
Además, queremos que cuando el usuario no ingrese los valores del formulario correctamente, se muestren mensajes de error que lo guíen para hacerlo correctamente. En el mismo archivo register.php, justo después de la etiqueta <form> de apertura, agregue este código
<form method="post" action="register.php">
 <?php echo display_error(); ?>
//...
</form>
Display_error () es una función simple que vamos a definir en breve. 
Una última cosa en el archivo register.php: modifique los campos de entrada de nombre de usuario y correo electrónico estableciendo sus atributos de valor en las variables correspondientes. Al igual que:
<input type="text" name="username" value="<?php echo $username; ?>">
<input type="email" name="email" value="<?php echo $email; ?>">
Definiremos las variables $ username y $ email pronto ...
Ahora abra el archivo vacío functions.php y agregue este código:
<?php 
session_start();

// connect to database
$db = mysqli_connect('localhost', 'root', '', 'multi_login');

// variable declaration
$username = "";
$email    = "";
$errors   = array(); 

// call the register() function if register_btn is clicked
if (isset($_POST['register_btn'])) {
 register();
}

// REGISTER USER
function register(){
 // call these variables with the global keyword to make them available in function
 global $db, $errors, $username, $email;

 // receive all input values from the form. Call the e() function
    // defined below to escape form values
 $username    =  e($_POST['username']);
 $email       =  e($_POST['email']);
 $password_1  =  e($_POST['password_1']);
 $password_2  =  e($_POST['password_2']);

 // form validation: ensure that the form is correctly filled
 if (empty($username)) { 
  array_push($errors, "Username is required"); 
 }
 if (empty($email)) { 
  array_push($errors, "Email is required"); 
 }
 if (empty($password_1)) { 
  array_push($errors, "Password is required"); 
 }
 if ($password_1 != $password_2) {
  array_push($errors, "The two passwords do not match");
 }

 // register user if there are no errors in the form
 if (count($errors) == 0) {
  $password = md5($password_1);//encrypt the password before saving in the database

  if (isset($_POST['user_type'])) {
   $user_type = e($_POST['user_type']);
   $query = "INSERT INTO users (username, email, user_type, password) 
       VALUES('$username', '$email', '$user_type', '$password')";
   mysqli_query($db, $query);
   $_SESSION['success']  = "New user successfully created!!";
   header('location: home.php');
  }else{
   $query = "INSERT INTO users (username, email, user_type, password) 
       VALUES('$username', '$email', 'user', '$password')";
   mysqli_query($db, $query);

   // get id of the created user
   $logged_in_user_id = mysqli_insert_id($db);

   $_SESSION['user'] = getUserById($logged_in_user_id); // put logged in user in session
   $_SESSION['success']  = "You are now logged in";
   header('location: index.php');    
  }
 }
}

// return user array from their id
function getUserById($id){
 global $db;
 $query = "SELECT * FROM users WHERE id=" . $id;
 $result = mysqli_query($db, $query);

 $user = mysqli_fetch_assoc($result);
 return $user;
}

// escape string
function e($val){
 global $db;
 return mysqli_real_escape_string($db, trim($val));
}

function display_error() {
 global $errors;

 if (count($errors) > 0){
  echo '<div class="error">';
   foreach ($errors as $error){
    echo $error .'<br>';
   }
  echo '</div>';
 }
} 
Fácil verdad?
Si observa con atención ahora puede ver la diferencia entre un usuario y un administrador . En la función register (), el usuario se guarda como administrador si la variable user_type se envió en la solicitud posterior o como  usuario, si no se envió user_type. Como nuestro formulario no tiene ningún campo para user_type, es obvio que el usuario que estamos creando se guardará como  usuario  y no como administrador .
Cuando un usuario está registrado, obtenemos la última identificación insertada (identificación del usuario registrado) e iniciamos sesión. Desde la identificación del usuario, podemos obtener todos los demás atributos del usuario utilizando la función getUserById (). Después de obtener el usuario, los colocamos en la variable de sesión como una matriz llamada usuario. 
Almacenar al usuario en una variable de sesión significa que el usuario está disponible incluso si actualiza y navega a otras páginas (donde se inició la sesión). La variable de usuario en la sesión no se pierde; solo se puede perder al desarmarlo (así es como desconectamos al usuario. Próximamente ...).
Ahora, volviendo a nuestro formulario de registro, observa que cuando ingresa valores y hace clic en el botón de registro, se lo redirige a la página index.php. Pero está en blanco. Así que hagamos que parezca una página de índice.
Abra el archivo index.php en su editor de texto y coloque el siguiente código.
<?php 
 include('functions.php');
?>
<!DOCTYPE html>
<html>
<head>
 <title>Home</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div class="header">
  <h2>Home Page</h2>
 </div>
 <div class="content">
  <!-- notification message -->
  <?php if (isset($_SESSION['success'])) : ?>
   <div class="error success" >
    <h3>
     <?php 
      echo $_SESSION['success']; 
      unset($_SESSION['success']);
     ?>
    </h3>
   </div>
  <?php endif ?>
  <!-- logged in user information -->
  <div class="profile_info">
   <img src="images/user_profile.png"  >

   <div>
    <?php  if (isset($_SESSION['user'])) : ?>
     <strong><?php echo $_SESSION['user']['username']; ?></strong>

     <small>
      <i  style="color: #888;">(<?php echo ucfirst($_SESSION['user']['user_type']); ?>)</i> 
      <br>
      <a href="index.php?logout='1'" style="color: red;">logout</a>
     </small>

    <?php endif ?>
   </div>
  </div>
 </div>
</body>
</html>
Ahora, si registra un nuevo usuario, lo registra y lo redirige a una página de índice que se ve así:
Eso se ve bien.
Solo un pequeño problema. Si una persona escribe la URL correcta en esta página index.php en el navegador, podrá acceder a esta página sin siquiera iniciar sesión. No queremos eso, ¿verdad? Vamos a arreglarlo
Visitemos nuestro archivo functions.php una vez más y agreguemos esta función al final del archivo:
function isLoggedIn()
{
 if (isset($_SESSION['user'])) {
  return true;
 }else{
  return false;
 }
}
Esta función, cuando se llama, le indica si un usuario ha iniciado sesión o no devolviendo verdadero o falso.
Abra el archivo index.php (o cualquier archivo que desee que esté accesible solo para los usuarios registrados) y pegue este código justo después de la declaración de inclusión en la parte superior del archivo:
<?php
include('functions.php');
if (!isLoggedIn()) {
 $_SESSION['msg'] = "You must log in first";
 header('location: login.php');
}

//...
Si el usuario no ha iniciado sesión e intenta acceder a esta página, se redirige automáticamente a la página de inicio de sesión.
Para cerrar la sesión del usuario, agreguemos este código en el archivo functions.php:
// log user out if logout button clicked
if (isset($_GET['logout'])) {
 session_destroy();
 unset($_SESSION['user']);
 header("location: login.php");
}
En este punto, podemos decir que hemos terminado con el registro de usuarios.
Hacer inicio de sesión de usuario es aún más fácil. 
Abra su archivo login.php y pegue este código en él:
<?php include('functions.php') ?>
<!DOCTYPE html>
<html>
<head>
 <title>Registration system PHP and MySQL</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div class="header">
  <h2>Login</h2>
 </div>
 <form method="post" action="login.php">

  <?php echo display_error(); ?>

  <div class="input-group">
   <label>Username</label>
   <input type="text" name="username" >
  </div>
  <div class="input-group">
   <label>Password</label>
   <input type="password" name="password">
  </div>
  <div class="input-group">
   <button type="submit" class="btn" name="login_btn">Login</button>
  </div>
  <p>
   Not yet a member? <a href="register.php">Sign up</a>
  </p>
 </form>
</body>
</html>
Una última cosa, agregue esta instrucción if y esta función dentro de functions.php:
// call the login() function if register_btn is clicked
if (isset($_POST['login_btn'])) {
 login();
}

// LOGIN USER
function login(){
 global $db, $username, $errors;

 // grap form values
 $username = e($_POST['username']);
 $password = e($_POST['password']);

 // make sure form is filled properly
 if (empty($username)) {
  array_push($errors, "Username is required");
 }
 if (empty($password)) {
  array_push($errors, "Password is required");
 }

 // attempt login if no errors on form
 if (count($errors) == 0) {
  $password = md5($password);

  $query = "SELECT * FROM users WHERE username='$username' AND password='$password' LIMIT 1";
  $results = mysqli_query($db, $query);

  if (mysqli_num_rows($results) == 1) { // user found
   // check if user is admin or user
   $logged_in_user = mysqli_fetch_assoc($results);
   if ($logged_in_user['user_type'] == 'admin') {

    $_SESSION['user'] = $logged_in_user;
    $_SESSION['success']  = "You are now logged in";
    header('location: admin/home.php');    
   }else{
    $_SESSION['user'] = $logged_in_user;
    $_SESSION['success']  = "You are now logged in";

    header('location: index.php');
   }
  }else {
   array_push($errors, "Wrong username/password combination");
  }
 }
}
Básicamente, lo que hace es: si se hace clic en el botón de inicio de sesión, se llama a la función login () que inicia la sesión del usuario. Tenga en cuenta que cuando el usuario inicia sesión, también realiza una comprobación: si el usuario es administrador, los redirige a la página admin / home.php. Sin embargo, si es solo un usuario normal, se lo redirige a la página index.php.
Ahora vamos a trabajar en el sitio de administración. Vamos a usar los archivos en la carpeta admin (create_user y home.php). Estos archivos están disponibles solo para usuarios administradores, lo que significa que solo un administrador puede crear otro administrador. 
Abra create_user.php y pegue este código en él:
<?php include('../functions.php') ?>
<!DOCTYPE html>
<html>
<head>
 <title>Registration system PHP and MySQL - Create user</title>
 <link rel="stylesheet" type="text/css" href="../style.css">
 <style>
  .header {
   background: #003366;
  }
  button[name=register_btn] {
   background: #003366;
  }
 </style>
</head>
<body>
 <div class="header">
  <h2>Admin - create user</h2>
 </div>
 
 <form method="post" action="create_user.php">

  <?php echo display_error(); ?>

  <div class="input-group">
   <label>Username</label>
   <input type="text" name="username" value="<?php echo $username; ?>">
  </div>
  <div class="input-group">
   <label>Email</label>
   <input type="email" name="email" value="<?php echo $email; ?>">
  </div>
  <div class="input-group">
   <label>User type</label>
   <select name="user_type" id="user_type" >
    <option value=""></option>
    <option value="admin">Admin</option>
    <option value="user">User</option>
   </select>
  </div>
  <div class="input-group">
   <label>Password</label>
   <input type="password" name="password_1">
  </div>
  <div class="input-group">
   <label>Confirm password</label>
   <input type="password" name="password_2">
  </div>
  <div class="input-group">
   <button type="submit" class="btn" name="register_btn"> + Create user</button>
  </div>
 </form>
</body>
</html>
Además del estilo, la principal diferencia entre esta página y la página de registro es el campo de selección de opciones en la página create_user.php que permite al administrador especificar el tipo de usuario. Por lo tanto, un administrador puede crear un usuario normal y un administrador.
Continuaré y pegaré el código completo de home.php dentro del archivo. Aquí está:
<?php 
include('../functions.php');

if (!isAdmin()) {
 $_SESSION['msg'] = "You must log in first";
 header('location: ../login.php');
}

if (isset($_GET['logout'])) {
 session_destroy();
 unset($_SESSION['user']);
 header("location: ../login.php");
}
?>
<!DOCTYPE html>
<html>
<head>
 <title>Home</title>
 <link rel="stylesheet" type="text/css" href="../style.css">
 <style>
 .header {
  background: #003366;
 }
 button[name=register_btn] {
  background: #003366;
 }
 </style>
</head>
<body>
 <div class="header">
  <h2>Admin - Home Page</h2>
 </div>
 <div class="content">
  <!-- notification message -->
  <?php if (isset($_SESSION['success'])) : ?>
   <div class="error success" >
    <h3>
     <?php 
      echo $_SESSION['success']; 
      unset($_SESSION['success']);
     ?>
    </h3>
   </div>
  <?php endif ?>

  <!-- logged in user information -->
  <div class="profile_info">
   <img src="../images/admin_profile.png"  >

   <div>
    <?php  if (isset($_SESSION['user'])) : ?>
     <strong><?php echo $_SESSION['user']['username']; ?></strong>

     <small>
      <i  style="color: #888;">(<?php echo ucfirst($_SESSION['user']['user_type']); ?>)</i> 
      <br>
      <a href="home.php?logout='1'" style="color: red;">logout</a>
                       &nbsp; <a href="create_user.php"> + add user</a>
     </small>

    <?php endif ?>
   </div>
  </div>
 </div>
</body>
</html>
En la parte superior de este archivo, hay una instrucción if que verifica si el usuario es administrador (usando la función isAdmin ()). Agreguemos esa función a nuestro archivo functions.php:
// ...
function isAdmin()
{
 if (isset($_SESSION['user']) && $_SESSION['user']['user_type'] == 'admin' ) {
  return true;
 }else{
  return false;
 }
}
Ahora podría decir, si solo un administrador puede crear otro administrador, entonces quién crea el primer administrador. Bueno, para crear el primer administrador, puede crear un usuario normal usando el formulario de registro, luego usar cualquier cliente mysql como phpmyadmin o el símbolo del sistema mysql y cambiar user_type a  admin. De esa manera, podrá iniciar sesión como administrador y crear otros administradores.
Tan simple como eso, hemos terminado de crear un sistema que gestione usuarios normales junto con usuarios administradores. 

Conclusión

Espero que este tutorial te haya sido útil. Me alegra que lo hayas seguido hasta el final. Siéntase libre de examinar el código, personalizarlo para satisfacer sus necesidades y utilizarlo en sus proyectos. Si tiene algún problema o comentario o alguna observación sobre este tutorial, déjelo en los comentarios a continuación.
¡Los mejores deseos!

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas