VaidrollTeam: LOGIN SESIONES, REGISTRO Y CRUD DE USUARIOS EN PHP, MYSQL, HTML Y CSS

Con este proyecto puedes iniciar sesión, registrar usuarios y realizar mantenimiento de datos como buscar por correo, ver información completa, modificar y eliminar, funciona con MySQL, cuenta con una barra lateral para cambiar entre páginas y la tabla de usuarios tiene una paginación básica.

El proyecto inicia con el formulario iniciar sesión que solicitará los datos necesarios y una vez verificado los datos ingresados con la base de datos permitirá el ingreso al sistema, si el usuario es nuevo y no tiene una cuenta puede registrarse presionando en el botón crea nueva cuenta que esta al final del formulario.

Al ingresar al sistema aparecerá la página principal con los datos de la persona que esta ingresando y al lado izquierdo una barra lateral para cambiar entre páginas.

La página con CRUD es la de usuarios, empieza con el botón buscar y la caja de texto para ingresar un correo, luego se muestra una tabla con la lista de todo lo usuarios que pueden ingresar al sistema junto con su correo, password y su respectivo botón para realizar el mantenimiento necesario.

Al presionar en el botón ver se mostrará un formulario con los datos completos del usuario seleccionado.

El botón modificar permitirá cambiar el nombre o el password del usuario seleccionado.

El botón eliminar, como su propio nombre lo dice, elimina al usuario por completo de la base de datos, excepto al usuario actual que esta haciendo uso del sistema.

Al final de la tabla se muestra una etiqueta con el total de usuarios que existen en la base de datos.

El proyecto funciona con sesiones y esta validado hasta cierto punto, por lo que es necesario presionar el botón cerrar sesión o borrar las cookies de la página para cambiar de usuario.

Al presionar en la siguiente imagen se puede ver el proyecto a tamaño original

Formulario crear nueva cuenta o registrar usuarios.

Formulario iniciar sesión solo permite el ingreso a usuarios registrados.

Panel de control y botón buscar.

Botón ver, modificar y eliminar usuario.

Botón cerrar sesión.

El proyecto esta dividido en varios archivos para que sea más fácil de entender o modificar, con el nombre ya tienes una idea de lo que hace cada página PHP.

conexion.php
index.php
usuarios_registrar.php
barra_lateral.php
principal.php
usuarios_tabla.php
usuarios_ver.php
usuarios_modificar.php
usuarios_eliminar.php
cerrar_sesion.php
style.css
fondo.png

En phpMyAdmin en la pestaña SQL se puede crear la siguiente base de datos, usar, crear la tabla de usuarios e insertar los datos de usuarios de ejemplo.

create database logincrud1;

use logincrud1;

DROP TABLE IF EXISTS `usuarios`;
CREATE TABLE IF NOT EXISTS `usuarios` (
  `nom` varchar(50) NOT NULL,
  `correo` varchar(50) NOT NULL,
  `pass` varchar(50) NOT NULL,
  PRIMARY KEY (`correo`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

INSERT INTO `usuarios` (`nom`, `correo`, `pass`) VALUES
('Paul Christian', 'admin@gmail.com', 'admin123'),
('Juan Pérez', 'juanperez@gmail.com', '123456'),
('Ana García', 'anagarcia@hotmail.com', 'abc123'),
('Luis Hernández', 'luishernandez@yahoo.com', 'qwerty'),
('María Rodríguez', 'mariarodriguez@gmail.com', '987654'),
('Carlos Sánchez', 'carlossanchez@hotmail.com', 'asdfgh'),
('Laura Martínez', 'lauramartinez@yahoo.com', 'zxcvbn'),
('David Gómez', 'davidgomez@gmail.com', '111111'),
('Sofía Torres', 'sofiatorres@hotmail.com', '222222'),
('Pablo Ramírez', 'pabloramirez@yahoo.com', '333333'),
('Andrea Castro', 'andreacastro@gmail.com', '444444'),
('Ruth Reyes', 'ruthireyes@gmail.com', 'zxcasd');

conexion.php

<?php

$host 	= 'localhost';
$nom 	= 'root';
$pass 	= '';
$db 	= 'logincrud1';

$conn = mysqli_connect($host, $nom, $pass, $db);

if (!$conn) 
{
  die("Error en la conexión: " . mysqli_connect_error());
}	
?>

index.php

<?php
session_start();
include('conexion.php');
if(isset($_SESSION['usuarioingresando']))
{
	header('location: principal.php');
}
?>

<html>
<!--Busca por VaidrollTeam para más proyectos. -->
<head>
<title>VaidrollTeam</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>

<div class="FormCajaLogin">

<div class="FormLogin">
<form method="POST">
<h1>Iniciar sesión</h1>
<br>

<div class="TextoCajas">• Ingresar correo</div>
<input type="text" name="txtcorreo" class="CajaTexto" required>

<div class="TextoCajas">• Ingresar password</div>
<input type="password" id="txtpassword" name="txtpassword" class="CajaTexto" required>

<div class="CheckBox1">
<input type="checkbox" onclick="verpassword()" >Mostrar password
</div>

<div>
<input type="submit" value="Iniciar sesión" class="BtnLogin" name="btningresar" >
</div>
<hr>
<br>

<div>
<a href="usuarios_registrar.php" class="BtnRegistrar">Crea nueva cuenta</a>
</div>

</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>
<?php
if(isset($_POST['btningresar']))
{
$correo = $_POST["txtcorreo"];
$pass 	= $_POST["txtpassword"];

$buscandousu = mysqli_query($conn,"SELECT * FROM usuarios WHERE correo = '".$correo."' and pass = '".$pass."'");
$nr = mysqli_num_rows($buscandousu);

if($nr == 1)
{
$_SESSION['usuarioingresando']=$correo;
header("Location: principal.php");
}
else if ($nr == 0) 
{
echo "<script> alert('Usuario no existe');window.location= 'index.php' </script>";
}
}
?>

usuarios_registrar.php

<?php
session_start();
include('conexion.php');
if(isset($_SESSION['usuarioingresando']))
{
	header('location: principal.php');
}
?>
<html>
<head>
<title>VaidrollTeam</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="FormCajaLogin">

<div class="FormLogin">
<form method="post">
<h1>Crear nueva cuenta</h1>
<br>

<div class="TextoCajas">• Ingresar nombre</div>
<input type="text" name="txtnombre" class="CajaTexto" required>

<div class="TextoCajas">• Ingresar correo</div>
<input type="email" name="txtcorreo" class="CajaTexto" required>

<div class="TextoCajas">• Ingresar password</div>
<input type="password" id="txtpassword" name="txtpassword" class="CajaTexto" required>
 
<div class="CheckBox1">
<input type="checkbox" onclick="verpassword()" >Mostrar password
</div>
 
<div>
<input type="submit" value="Crea nueva cuenta" class="BtnRegistrar" name="btnregistrar">
</div>
<hr>
<br>
<div >
<a href="index.php" class="BtnLogin">Regresar</a>
</div>

</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>
<?php

if(isset($_POST["btnregistrar"]))
{

$nombre = $_POST["txtnombre"];
$correo = $_POST["txtcorreo"];
$pass 	= $_POST["txtpassword"];


$insertarusu = mysqli_query($conn,"INSERT INTO usuarios(nom,correo,pass) values ('$nombre','$correo','$pass')");
	
if(!$insertarusu)
{
echo "<script>alert('Correo duplicado, intenta con otro correo');</script>";
		 
}
else
{
echo "<script> alert('Usuario registrado con exito: $nombre'); window.location='index.php' </script>";
}
} 
?>

barra_lateral.php

<?php
session_start();
include('conexion.php');
if(isset($_SESSION['usuarioingresando']))
{
$usuarioingresado = $_SESSION['usuarioingresando'];
$buscandousu = mysqli_query($conn,"SELECT * FROM usuarios WHERE correo = '".$usuarioingresado."'");
$mostrar=mysqli_fetch_array($buscandousu);
	
}else
{
	header('location: index.php');
}

?>

<html>
<head>
<title>VaidrollTeam</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
	
</head>
<body>
<div class="BarraLateral">
<ul>
<div class="NomUsuario"><?php echo $mostrar['nom']?></div>
<hr>
<li><a href="principal.php" >Inicio</a></li>
<li><a href="usuarios_tabla.php" >Usuarios</a></li>
<li><a href="cerrar_sesion.php" >Cerrar sesión</a></li>
</ul>
</div>
</body>
</html>

principal.php

<?php

include('conexion.php');
include('barra_lateral.php');

$usuarioingresado = $_SESSION['usuarioingresando'];
$buscandousu = mysqli_query($conn,"SELECT * FROM usuarios WHERE correo = '".$usuarioingresado."'");
$mostrar=mysqli_fetch_array($buscandousu);

?>

<html>
<title>VaidrollTeam</title>
<script>
		function verhorafor12() {
			var fecha = new Date();
			var hora = fecha.getHours();
			var minutos = fecha.getMinutes();
			var segundos = fecha.getSeconds();
			var dianoche = "AM";
			if (hora > 12) {
				hora = hora - 12;
				dianoche = "PM";
			}
			if (hora === 0) {
				hora = 12;
			}
			var tothora = hora + ":" + minutos + ":" + segundos + " " + dianoche;
			document.getElementById("hora").innerHTML = tothora;
		}
	</script>
<body onload="setInterval(verhorafor12, 1000);" >
<div class="ContenedorPrincipal">	
<div>
<h1><?php echo "Bienvenido: ".$mostrar['nom'];?></h1>
<h2><?php echo "Correo: ".$mostrar['correo'];?></h2>
<h3>La hora del sistema es: <span id="hora"></span></h3>
</div>
</div>
</body>
</html>

usuarios_tabla.php

<?php
include('conexion.php');
include("barra_lateral.php");
?>
<html>
<title>VaidrollTeam</title>
<body>
<div class="ContenedorPrincipal">	
<?php
 
    $filasmax = 5;
 
    if (isset($_GET['pag'])) 
	{
        $pagina = $_GET['pag'];
    } else 
	{
        $pagina = 1;
    }
 
 if(isset($_POST['btnbuscar']))
{
$buscar = $_POST['txtbuscar'];

 $sqlusu = mysqli_query($conn, "SELECT * FROM usuarios where correo = '".$buscar."'");

}
else
{
 $sqlusu = mysqli_query($conn, "SELECT * FROM usuarios ORDER BY nom ASC LIMIT " . (($pagina - 1) * $filasmax)  . "," . $filasmax);
}
 
    $resultadoMaximo = mysqli_query($conn, "SELECT count(*) as num_usuarios FROM usuarios");
 
    $maxusutabla = mysqli_fetch_assoc($resultadoMaximo)['num_usuarios'];
	
    ?>
	<div class="ContenedorTabla" >
	<form method="POST">
	<h1>Lista de usuarios</h1>
	
	<div style="text-align:left">
	<a href="usuarios_tabla.php" class="BotonesUsuarios">Inicio de la tabla</a>
	
	<input class="BotonesUsuarios" type="submit" value="Buscar" name="btnbuscar">
	<input class="CajaTexto" type="text" name="txtbuscar"  placeholder="Ingresar correo" autocomplete="off" style='width:20%'>
	</div>
			</form>
    <table>
			<tr>
			<th>Nombre</th>
			<th>Correo</th>
                        <th>Password</th>
			<th>Acción</th>
			</tr>
 
        <?php
 
        while ($mostrar = mysqli_fetch_assoc($sqlusu)) 
		{
			
            echo "<tr>";
            echo "<td>".$mostrar['nom']."</td>";
			echo "<td>".$mostrar['correo']."</td>";
			 echo "<td>*****</td>";
            // echo "<td>".$mostrar['pass']."</td>";    
            echo "<td style='width:24%'>
			<a class='BotonesUsuarios' href=\"usuarios_ver.php?correo=$mostrar[correo]&pag=$pagina\">Ver</a> 
			<a class='BotonesUsuarios' href=\"usuarios_modificar.php?correo=$mostrar[correo]&pag=$pagina\">Modificar</a> 
			<a class='BotonesUsuarios' href=\"usuarios_eliminar.php?correo=$mostrar[correo]&pag=$pagina\" onClick=\"return confirm('¿Estás seguro de eliminar a $mostrar[nom]?')\">Eliminar</a>
			</td>";  
			
        }
 
        ?>
    </table>
	<div style='text-align:right'>
	<br>
	<?php echo "Total de usuarios: ".$maxusutabla;?>
	</div>
	</div>
<div style='text-align:right'>
<br>
</div>
<div style="text-align:center">
<?php
if (isset($_GET['pag'])) {
if ($_GET['pag'] > 1) {
 ?>
<a class="BotonesUsuarios" href="usuarios_tabla.php?pag=<?php echo $_GET['pag'] - 1; ?>">Anterior</a>
<?php
} 
else 
{
?>
<a class="BotonesUsuarios" href="#" style="pointer-events: none">Anterior</a>
<?php
}
?>
 
 <?php
} 
else 
{
?>
<a class="BotonesUsuarios" href="#" style="pointer-events: none">Anterior</a>
<?php
}
 
if (isset($_GET['pag'])) {
if ((($pagina) * $filasmax) < $maxusutabla) {
?>
<a class="BotonesUsuarios" href="usuarios_tabla.php?pag=<?php echo $_GET['pag'] + 1; ?>">Siguiente</a>
<?php
} else {
?>
<a class="BotonesUsuarios" href="#" style="pointer-events: none">Siguiente</a>
<?php
}
?>
<?php
} else {
?>
<a class="BotonesUsuarios" href="usuarios_tabla.php?pag=2">Siguiente</a>
<?php
}
?>
</div>
</div>
</body>
</html>

usuarios_ver.php

<?php 
include("conexion.php");
include("usuarios_tabla.php");
$pagina = $_GET['pag'];
$correo = $_GET['correo'];

$querybuscar = mysqli_query($conn, "SELECT * FROM usuarios WHERE correo = '$correo'");
 
while($mostrar = mysqli_fetch_array($querybuscar))
{
	$usunom 	= $mostrar['nom'];
	$usucorreo 	= $mostrar['correo'];
}
?>
<html>
<body>
<div class="caja_popup2">
<form class="contenedor_popup" method="POST">
<table>
<tr><th colspan="2">Ver usuario</th></tr>
<tr> 
<td><b>Nombre:</b></td>
<td><?php echo $usunom;?></td>
</tr>
			
<tr> 
<td><b>Correo: </b></td>
<td><?php echo $usucorreo;?></td>
</tr>
<tr>
				
<td colspan="2">
<?php echo "<a class='BotonesUsuarios' href=\"usuarios_tabla.php?pag=$pagina\">Regresar</a>";?>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>

usuarios_modificar.php

<?php 
include("conexion.php");
include("usuarios_tabla.php");

$pagina = $_GET['pag'];
$correo = $_GET['correo'];

$querybuscar = mysqli_query($conn, "SELECT * FROM usuarios WHERE correo = '$correo'");
 
while($mostrar = mysqli_fetch_array($querybuscar))
{
	$usunom 	= $mostrar['nom'];
	$usucorreo 	= $mostrar['correo'];
	$pass 		= $mostrar['pass'];
}
?>
<html>
<body>
<div class="caja_popup2">
<form class="contenedor_popup" method="POST">
<table>
<tr><th colspan="2">Modificar usuario</th></tr>
<tr> 
<td>Nombre</td>
<td><input class="CajaTexto" type="text" name="txtnom" value="<?php echo $usunom;?>" required></td>
</tr>
<tr> 
<td>Correo</td>
<td><input class="CajaTexto" type="email" name="txtcorreo" value="<?php echo $usucorreo;?>" readonly></td>
</tr>
<tr> 
<td>Password</td>
<td><input class="CajaTexto" type="password" name="txtpass" value="<?php echo $pass;?>" required></td>
</tr>
<tr>
				
<td colspan="2">
<?php echo "<a class='BotonesUsuarios' href=\"usuarios_tabla.php?pag=$pagina\">Cancelar</a>";?>
<input class="BotonesUsuarios" type="submit" name="btnmodificar" value="Modificar" onClick="javascript: return confirm('¿Deseas modificar este usuario?');">
</td>
</tr>
</table>
</form>
</div>
</body>
</html>

<?php
	
if(isset($_POST['btnmodificar']))
{    
$nom1 		= $_POST['txtnom'];
$correo1 	= $_POST['txtcorreo'];
$pass1 		= $_POST['txtpass'];
      
$querymodificar = mysqli_query($conn, "UPDATE usuarios SET nom='$nom1',correo='$correo1',pass='$pass1' WHERE correo = '$correo1'");
echo "<script>window.location= 'usuarios_tabla.php?pag=$pagina' </script>";
    
}
?>

usuarios_eliminar.php

<?php
include("conexion.php");
include("barra_lateral.php");
$usuarioingresado = $_SESSION['usuarioingresando'];
$pagina = $_GET['pag'];
$correo = $_GET['correo'];

if ($correo == $usuarioingresado )
{
echo "<script> alert('No puedes eliminar a tu propio usuario.'); window.location='usuarios_tabla.php' </script>";
}
else
{
mysqli_query($conn, "DELETE FROM usuarios WHERE correo='$correo'");
header("Location:usuarios_tabla.php?pag=$pagina");
}
?>

cerrar_sesion.php

<?php
session_start();
session_destroy();
header("Location: index.php");
exit;
?>

style.css

/*Busca por VaidrollTeam para más proyectos.*/
body 
{
background: #f0f0f0;
font-family: Arial, sans-serif;
margin:0;
padding:0;
display: flex;
flex-direction: column;	
}
		
	/*Login*/
.FormCajaLogin
{
width: 100%;
height: 100%;
display: grid;
background: url(fondo.png) no-repeat center center fixed; 
text-align:center;
}

.FormLogin
{
background-color: rgba(0, 0, 0, .5);
width: 400px; 
margin: auto;
padding: 2em;
border-radius: 6px;
color:white;
border:0.1em solid black;
text-align:center;
}

.TextoCajas
{
margin-left:8%;
font-weight: bold;
margin-top:4%;
margin-bottom:4%;
color:white;
text-align:left;
}

.CajaTexto{
width: 80%;
padding: 10px;
font-size:1em;
border-radius:5px;
border:1px solid black;
color:black;
}

.CheckBox1
{
text-align:left;
margin:5% auto 5% 10%;
}

.BtnRegistrar
{
width: 80%;
text-decoration:none;
padding: 10px 30px;
cursor: pointer;
border: 0;
border-radius: 10px;
border:1px solid black;
font-size:18px;
color:white;
background-color: green;
font-weight: bold;
margin-bottom:5%;
}

.BtnLogin
{
width: 80%;
padding: 10px 30px;
cursor: pointer;
border: 0;
border-radius: 10px;
border:1px solid black;
font-size:18px;
color:white;
background-color: #1B68DF;
font-weight: bold;
margin-bottom:5%;
}

.NomUsuario
{
font-size:18px;
color:white;
word-break:break-all;
}

	/*Panel*/
.BarraLateral {
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 100%;
background-color: #1455B9;
padding: 20px;
box-sizing: border-box;
text-align:center;
}
.BarraLateral ul {
list-style: none;
padding: 0;
margin: 0;
			
}
.BarraLateral li 
{
text-align:center;
margin-bottom: 14px;
padding: 12px 10px;
border-radius:5px;
border:2px solid black;
background: linear-gradient(180deg,#259953,#015644);
}

.BarraLateral a 
{
color: white;
text-decoration: none;
}
		
.ContenedorPrincipal 
{
margin-left: 200px;
padding: 20px;
box-sizing: border-box;
text-align:center;
}
		
@media (max-width: 768px) 
	{
.BarraLateral 
{
width: 100%;
height: auto;
position: relative;
}

.ContenedorPrincipal 
{
margin-left: 0;
}			
	}

	/*Tabla*/
table
{
border-collapse: collapse;
width: 100%; 
margin: 0 auto;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

th
{
background-color: #1455B9;
color: white;
}

th, td 
{
padding: 10px;
text-align: center;
border-bottom: 1px solid #dddddd;
}

.ContenedorTabla 
{
margin-left: auto;
margin-right: auto;
max-width:1260px;
width: 100%; 
		
}
.BotonesUsuarios
{	
text-align:center;
display: inline-block;
background:green;
padding: 6px 10px;
border-radius:6px;
text-decoration: none;
color:white;
border:2px solid black;
cursor:pointer;
font-size: 16px;
}

	/*CajaPopUp*/
.contenedor_popup 
{
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%,-50%);
width:400px; 
transition: all 0.2s;
background-color:white;
}

.caja_popup2 
{
display: block;
position: absolute;
padding:0;
background-color:rgba(0, 0, 0, 0.5); 
width:100%;
height:100%;
}

A este proyecto se puede agregar lo siguiente.

Validar cajas de texto en PHP

Recuperar contraseña por correo en PHP

Cómo subir y mostrar imágenes en PHP

Nombre: LoginCrud1.rar

Tamaño: 1.40 MB

Descargar Creando link... espera 30 segundos.

Páginas

LOGIN SESIONES, REGISTRO Y CRUD DE USUARIOS EN PHP, MYSQL, HTML Y CSS