VaidrollTeam: LOGIN BÁSICO CON ROLES EN PHP, HTML Y CSS

Login básico con roles de usuario y administrador cada uno con respectiva página, validado para permitir el ingreso solo de usuarios registrados en la base de datos y con una interfaz que tiene la opción mostrar contraseña.

Base de datos usado en este proyecto (loginvaidroll7).

create database loginvaidroll7;

use loginvaidroll7;

CREATE TABLE `login` (
  `usuario` varchar(50) NOT NULL,
  `pass` varchar(50) NOT NULL,
  `rol` varchar(10) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;


INSERT INTO `login` (`usuario`, `pass`, `rol`) VALUES
('vaidrollteam', '1234', 'Admin'),
('drowell', 'asdf', 'Usuario');

La tabla login debería de quedar de la siguiente manera.

usuario	pass	rol
vaidrollteam	1234	Admin
drowell	asdf	Usuario

Hay diferentes maneras para crear un login con roles, puedes crear una tabla de roles, cada rol con su respectivo código y luego juntar con la tabla de los usuarios o también darle el rol directamente a los usuarios y validar en la hoja PHP.

Creamos una carpeta con los siguientes archivos.

1.- conexion.php

2.- index.html

3.- vaidroll.css

4.- login.php

5.- pag_admin.php

6.- pag_user.php

Se puede usar una sola página para el usuario y administrador, pero con diferentes permisos, como también diferentes páginas para cada rol.

Continuamos con el código.

conexion.php

<?php
$conn = new mysqli("localhost","root","","loginvaidroll7");
	
	if($conn->connect_errno)
	{
		echo "No hay conexión: (" . $conn->connect_errno . ") " . $conn->connect_error;
	}
?>

index.html

<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
     <title>VaidrollTeamLogin7</title>
     <link rel="stylesheet" href="vaidroll.css">	
</head>
<body>
<div class="caja1">
<form method="post" action="login.php">
<div class="formtlo">Iniciar sesión</div>
<div class="ub1">&#128273; Ingresar usuario</div>
<input type="text" name="txtusuario">
<div class="ub1">&#128274; Ingresar password</div>

<input type="password" name="txtpassword" id="txtpassword">

<div class="ub1">
<input type="checkbox" onclick="verpassword()" >Mostrar contraseña
 </div>
<div class="ub1">Rol</div>
<select name="rol">
<option value="0" style="display:none;"><label>Seleccionar</label></option>
<option value="Usuario">Usuario</option>
<option value="Admin">Administrador</option>
</select>

<div align="center">
<input type="submit" value="Ingresar">

<input type="reset" value="Cancelar">
</div>
</form>
</div>
</body>
<script>
  function verpassword(){
      var tipo = document.getElementById("txtpassword");
      if(tipo.type == "password")
	  {
          tipo.type = "text";
      }
	  else
	  {
          tipo.type = "password";
      }
  }
</script>
</html>

vaidroll.css

*
{
	font-family:arial;
	text-align:center;
}
body
{
	top:50%;
	left:50%;
	position: absolute;
	transform: translate(-50%,-50%);
	background: #f2f2f2; 
}
.ub1
{
text-align:left;
font-weight: bold;

margin-bottom:0.5em;
margin-top:0.5em;
}
.caja1
{
	background:white;
	width:20em;
    height: auto;
    position: relative;
    margin: auto;
    padding: 2em;
	border-radius: 1em;
	color:black;


}
input, select
{
	width: 100%;
    padding: 0.5em;
	font-size:1em;
	border-radius:5px;
	border:1px solid black;
	color:black;
	text-align:left;
	
}
input[type=submit],input[type=reset]
{
margin-top: 1.5em;
width:48%;
text-align:center;

}
input[type=checkbox]
{
margin-left:0;
width:10%;

}

table
{
	width:50em;
	margin:0;
	border-collapse:collapse;
	border: 0.1em solid black;
	background: #2CA0DF;
	top:50%;
	left:50%;
	position: absolute;
	transform: translate(-50%,-50%);
}

td
{
	padding:1em 2em;
	border: 0.1em solid black;
	text-align: center;
	background: #f3f3f3;
	font-weight: bold;
}

th
{
	padding:1em;
	border: 0.1em solid black;
	background-color: #70C1F7;
}
a
{
	font-size: 1em;
	text-align:center;
	
	display: inline-block;
	background-color:#FABD44;
	padding: 0.5em 0.5em;
	border-radius:0.2em;
	text-decoration: none;
	color:black;
	border:0.1em solid black;
	cursor:pointer;
}

.formtlo
{
	font-size:2em;
	font-weight: bold;
	padding-bottom:0.8em;
	color:black;
}

<?php

 include('conexion.php');

$usu 	= $_POST["txtusuario"];
$pass 	= $_POST["txtpassword"];
$rol 	= $_POST["rol"];



$queryusuario = mysqli_query($conn,"SELECT * FROM login WHERE usuario ='$usu' and pass = '$pass' and rol = '$rol'");
$nr 		= mysqli_num_rows($queryusuario);  
	
if ($nr == 1 )  
	{ 
		if($rol=="Usuario")
			{	
				header("Location: pag_user.php");
			}
		else if ($rol=="Admin")
			{
				header("Location: pag_admin.php");
			}
	}
else
	{
	echo "<script> alert('Usuario, contraseña o rol incorrecto.');window.location= 'index.html' </script>";
	}

/*VaidrollTeam*/
?>

pag_admin.php

<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
     <title>VaidrollTeamLogin7</title>
     <link rel="stylesheet" href="vaidroll.css">	
</head>
<table>
<th colspan="2">Bienvenido admin</th><th><a href="index.html">Regresar</a></th>
<tr><th colspan="3"><h1>Listado de usuarios</h1></th></tr>
<tr>
<th>Usuario</th>
<th>Contraseña</th>
<th>Rol</th>

</tr>

<?php

 include('conexion.php');

$sql="select * from login";
$resultado=mysqli_query($conn,$sql);

while($mostrar=mysqli_fetch_array($resultado))

{
?>

<tr>
	<td><?php echo $mostrar['usuario'] ?></td>
	<td><?php echo $mostrar['pass'] ?></td>
	<td><?php echo $mostrar['rol'] ?></td>
</tr>

<?php
}
?>

</table>

</body>
</html>

pag_user.php

<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
     <title>VaidrollTeamLogin6</title>
     <link rel="stylesheet" href="vaidroll.css">	
</head>
<body>
<table>
<th>Bienvenido usuario</th><th><a href="index.html">Regresar</a></th>
<a href="index.html">Regresar</a>
</table>
</body>
</html>

Puedes activar o desactivar la opción de ver contraseña.

Esta validado para aceptar solo a usuarios registrados en la base de datos y que seleccione correctamente su rol. Por ejemplo, drowell solo puede ingresar a la página de usuarios si ingresa bien sus datos y selecciona el rol al que pertenece.