VaidrollTeam: LOGIN SESIONES, REGISTRO, CRUD DE PRODUCTOS Y CATEGORÍAS EN PHP, MYSQL, HTML Y CSS

Este proyecto funciona con MySQL y te permite iniciar sesión, registrar nuevos usuarios validando el correo como único, una vez ingresado al sistema cuenta con un crud de productos y otro de categorías de productos, cada crud tiene su botón para buscar, agregar, ver información completa, modificar, y eliminar.

El proyecto inicia con el formulario iniciar sesión que solicitará los datos necesarios que permitirá el ingreso al sistema, si el usuario es nuevo puede crear una nueva cuenta presionando en el botón registrar que esta en la parte superior del formulario e inmediatamente aparecerá el formulario registrar en la misma página.

El formulario registrar esta validado por el correo, si se intenta registrar un correo que existe en la base de datos aparecerá un mensaje rechazando la solicitud de registro del usuario.

Al ingresar al sistema aparecerá el CRUD de productos como página principal y al lado izquierdo una barra lateral para cambiar entre páginas.

La página CRUD de productos, empieza con el botón buscar, una caja de texto para ingresar una descripción, el botón agregar producto, luego se muestra una tabla con la lista de todo los productos con su id, nombre, descripción, precio, categoría y su respectivo botón para realizar el mantenimiento.

El botón agregar producto mostrará un formulario para registrar un nuevo producto en la tabla.

Al presionar en el botón ver (botón verde con imagen de una lupa) se mostrará un formulario con los datos completos del producto seleccionado.

El botón modificar (botón azul con imagen de un lápiz) permitirá cambiar el nombre, descripción, precio o seleccionar una nueva categoría para el producto seleccionado.

El botón eliminar (botón rojo con una x), como su propio nombre lo dice, elimina por completo el producto.

Al final de la tabla se puede ver una etiqueta con el total de productos que existen en la base de datos que se actualiza al momento de registrar o eliminar un producto.

La página CRUD de categoría es muy similar a la página CRUD de productos, pero la diferencia es que todo el cambio que se realiza en el CRUD de categorías se verá reflejado en la columna categoría del CRUD de productos.

Antes de eliminar o modificar una categoría es recomendable revisar la tabla de los productos.

El proyecto funciona con sesiones 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 iniciar sesión y registrar

CRUD de productos - buscar producto por descripción

CRUD de productos - agregar y ver información completa

CRUD de productos - modificar y eliminar

CRUD de categorías de producto - agregar, ver información completa y modificar

Todo el cambio que se realiza en el CRUD de categorías se verá reflejado en la columna categoría del CRUD de productos.

Cerrar sesión y de regreso al formulario iniciar sesión

El proyecto esta dividido en varias páginas 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
usuario_login.php
usuario_registrar.php
barra_lateral.php
productos_tabla.php
productos_ver.php
productos_registrar.php
productos_modificar.php
productos_eliminar.php
categoria_tabla.php
categoria_ver.php
categoria_registrar.php
categoria_modificar.php
categoria_eliminar.php
cerrar_sesion.php
style.css
boton_formulario.js
fondo.jpg
logo.png

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

create database logincrud2;

use logincrud2;

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 chidori', 'carloschidori@hotmail.com', 'asdfgh'),
('Sasuke Martínez', 'sasukimartinez@yahoo.com', 'zxcvbn'),
('Alenka Gómez', 'alendgomez@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');

DROP TABLE IF EXISTS categoria_productos;
CREATE TABLE IF NOT EXISTS categoria_productos (
  id int NOT NULL AUTO_INCREMENT,
  nombre varchar(50) DEFAULT NULL,
  PRIMARY KEY (id)
) ENGINE=MyISAM AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

INSERT INTO categoria_productos (id, nombre) VALUES
(1, 'Electrónica'),
(2, 'Hogar'),
(3, 'Jardín'),
(4, 'Ropa'),
(5, 'Calzado'),
(6, 'Deportes'),
(7, 'Juguetes'),
(8, 'Belleza'),
(9, 'Alimentos'),
(10, 'Bebidas');

DROP TABLE IF EXISTS productos;
CREATE TABLE IF NOT EXISTS `productos` (
  id int NOT NULL AUTO_INCREMENT,
  nombre varchar(50) DEFAULT NULL,
  descripcion varchar(255) DEFAULT NULL,
  precio decimal(10,2) DEFAULT NULL,
  categoria_id int DEFAULT NULL,
  PRIMARY KEY (id),
  KEY categoria_id (categoria_id)
) ENGINE=MyISAM AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

INSERT INTO productos (id, nombre, descripcion, precio, categoria_id) VALUES
(1, 'Smartphone Samsung Galaxy S21', 'Teléfono inteligente con pantalla de 6.2 pulgadas, 8 GB de RAM y 128 GB de almacenamiento interno', 999.99, 1),
(2, 'Laptop HP Pavilion 15', 'Laptop con pantalla de 15.6 pulgadas, procesador Intel Core i5, 8 GB de RAM y 512 GB de almacenamiento SSD', 899.99, 1),
(3, 'Smartwatch Apple Watch Series 6', 'Reloj inteligente con pantalla Retina siempre activa, GPS integrado y sensor de oxígeno en sangre', 399.99, 1),
(4, 'Cámara Canon EOS Rebel T7', 'Cámara réflex digital con sensor CMOS de 24.1 megapíxeles y grabación de video Full HD', 599.99, 1),
(5, 'Auriculares inalámbricos Sony WH-1000XM4', 'Auriculares con cancelación de ruido, batería de larga duración y calidad de sonido de alta resolución', 349.99, 1),
(6, 'Sofá de tres plazas', 'Sofá de tela con estructura de madera maciza y cojines de espuma de alta densidad', 799.99, 2),
(7, 'Mesa de comedor extensible', 'Mesa de comedor de madera maciza con capacidad para 6 personas, extensible a 8 personas', 599.99, 2),
(8, 'Juego de sábanas de algodón', 'Juego de sábanas de algodón egipcio de 400 hilos, incluye sábana bajera, sábana encimera y fundas de almohada', 149.99, 2),
(9, 'Aspiradora sin bolsa', 'Aspiradora sin bolsa con tecnología ciclónica y filtro HEPA, ideal para alérgicos', 199.99, 2),
(10, 'Set de ollas y sartenes antiadherentes', 'Set de 10 piezas de ollas y sartenes antiadherentes con tapas de vidrio templado', 299.99, 2),
(11, 'Cortacésped eléctrico', 'Cortacésped eléctrico con cuchillas de acero y ajuste de altura de corte', 299.99, 3),
(12, 'Juego de sábanas de seda', 'Juego de sábanas de seda de 1000 hilos, incluye sábana bajera, sábana encimera y fundas de almohada', 399.99, 4),
(13, 'Zapatillas deportivas Nike Air Max', 'Zapatillas deportivas con tecnología Air Max para una mayor amortiguación y comodidad', 149.99, 5),
(14, 'Balón de fútbol Adidas Tango', 'Balón de fútbol con diseño clásico Tango y tecnología de paneles sin costuras', 39.99, 6),
(15, 'Set de construcción de bloques de colores', 'Set de construcción de bloques de colores para niños, incluye 500 piezas', 49.99, 7),
(16, 'Manguera de jardín extensible', 'Manguera de jardín extensible de 50 pies con boquilla ajustable y soporte de pared', 29.99, 3),
(17, 'Vestido de noche largo', 'Vestido de noche largo de encaje con escote en V y espalda descubierta', 199.99, 4),
(18, 'Tenis de mesa profesional', 'Mesa de tenis de mesa profesional con red y soportes para raquetas y pelotas', 499.99, 6),
(19, 'Bicicleta de montaña Trek', 'Bicicleta de montaña con cuadro de aluminio y suspensión delantera, ideal para terrenos difíciles', 899.99, 5),
(20, 'Muñeca Barbie Dreamhouse', 'Casa de muñecas Barbie Dreamhouse con tres pisos, ocho habitaciones y accesorios', 199.99, 7);

conexion.php

<?php
$host 	= 'localhost';
$nom 	= 'root';
$pass 	= '';
$db 	= 'logincrud2';

$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: productos_tabla.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">

<div class="botondeintercambiar">
<div id="btnvai"></div>
<button type="button" class="botoncambiarcaja" onclick="loginvai()" id="vaibtnlogin">Login</button>
<button type="button" class="botoncambiarcaja" onclick="registrarvai()" id="vaibtnregistrar">Registrar</button>
</div>

<!-- formulario login -->
<form method="POST" id="frmlogin" class="grupo-entradas" action="usuario_login.php">
<h1>Iniciar sesión</h1>

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

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

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

</form>

<!-- formulario registrar -->
<form method="post" id="frmregistrar" class="grupo-entradas" action="usuario_registrar.php">
<h1>Crear nueva cuenta</h1>

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

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

<div class="TextoCajas">• Ingresar password</div>
<input type="password"  name="txtpassword1" class="CajaTexto" autocomplete="off" required>
 
<div>
<input type="submit" value="Crea nueva cuenta" class="BtnRegistrar" name="btnregistrar">
</div>

</form>
</div>
</div>
 
</body>
<script src="boton_formulario.js"></script>
</html>

usuario_login.php

<?php
session_start();
include('conexion.php');

$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: productos_tabla.php");
}
else if ($nr == 0) 
{
echo "<script> alert('Usuario no existe');window.location= 'index.php' </script>";
}
?>

usuario_registrar.php

<?php
include('conexion.php');

$nombre = $_POST["txtnombre1"];
$correo = $_POST["txtcorreo1"];
$pass 	= $_POST["txtpassword1"];


$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');window.location='index.php';</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>
<li><a href="productos_tabla.php" >• Productos</a></li>
<li><a href="categoria_tabla.php" >• Categoría</a></li>
<li><a href="cerrar_sesion.php" >• Cerrar sesión</a></li>
</ul>
<hr>
</div>
</body>
</html>

productos_tabla.php

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

$sqlusu = mysqli_query($conn, "SELECT pro.id,pro.nombre,descripcion,precio,cat.nombre as categoria 
FROM productos pro, categoria_productos cat where pro.categoria_id=cat.id and descripcion like '".$buscar."%'");

}
else
{
$sqlusu = mysqli_query($conn, "SELECT pro.id,pro.nombre,descripcion,precio,cat.nombre as categoria 
FROM productos pro, categoria_productos cat where pro.categoria_id=cat.id ORDER BY pro.id ASC LIMIT " . (($pagina - 1) * $filasmax)  . "," . $filasmax);
}
 
    $resultadoMaximo = mysqli_query($conn, "SELECT count(*) as num_productos FROM productos");
 
    $maxusutabla = mysqli_fetch_assoc($resultadoMaximo)['num_productos'];
	
    ?>
	<div class="ContenedorTabla">
	<form method="POST">
	<h1>Lista de productos</h1>
	
	<div class="ContBuscar">
	<div style="float: left;">
	<a href="productos_tabla.php" class="BotonesTeam">Inicio</a>
	<input class="BotonesTeam" type="submit" value="Buscar" name="btnbuscar">
	<input class="CajaTextoBuscar" type="text" name="txtbuscar"  placeholder="Ingresar descripción del producto" autocomplete="off" >
	</div>
	<div style="float:right;">
	<?php echo "<a class='BotonesTeam5' href=\"productos_registrar.php?pag=$pagina\">Agregar producto</a>";?>
	</div>
	</div>
			</form>
    <table>
			<tr>
			<th>Id</th>
			<th>Nombre</th>
            <th>Descripción</th>
			<th>Precio</th>
			<th>Categoria</th>
			<th>Acción</th>
			</tr>
 
        <?php
 
        while ($mostrar = mysqli_fetch_assoc($sqlusu)) 
		{
			
            echo "<tr>";
            echo "<td>".$mostrar['id']."</td>";
			echo "<td>".$mostrar['nombre']."</td>";
			echo "<td>".$mostrar['descripcion']."</td>";
			echo "<td>".$mostrar['precio']."</td>";
			echo "<td>".$mostrar['categoria']."</td>";
            echo "<td style='width:24%'>
			<a class='BotonesTeam1' href=\"productos_ver.php?id=$mostrar[id]&pag=$pagina\">&#x1F50D;</a> 
			<a class='BotonesTeam2' href=\"productos_modificar.php?id=$mostrar[id]&pag=$pagina\">&#128397;</a> 
			<a class='BotonesTeam3' href=\"productos_eliminar.php?id=$mostrar[id]&pag=$pagina\" onClick=\"return confirm('¿Estás seguro de eliminar el producto $mostrar[nombre]?')\">&#10006;</a>
			</td>";  
			
        }
 
        ?>
    </table>
	<div style='text-align:right'>
	<br>
	<?php echo "Total de productos: ".$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="BotonesTeam4" href="productos_tabla.php?pag=<?php echo $_GET['pag'] - 1; ?>">Anterior</a>
<?php
} 
else 
{
?>
<a class="BotonesTeam4" href="#" style="pointer-events: none">Anterior</a>
<?php
}
?>
 
 <?php
} 
else 
{
?>
<a class="BotonesTeam4" href="#" style="pointer-events: none">Anterior</a>
<?php
}
 
if (isset($_GET['pag'])) {
if ((($pagina) * $filasmax) < $maxusutabla) {
?>
<a class="BotonesTeam4" href="productos_tabla.php?pag=<?php echo $_GET['pag'] + 1; ?>">Siguiente</a>
<?php
} else {
?>
<a class="BotonesTeam4" href="#" style="pointer-events: none">Siguiente</a>
<?php
}
?>
<?php
} else {
?>
<a class="BotonesTeam4" href="productos_tabla.php?pag=2">Siguiente</a>
<?php
}
?>
</div>
</div>
</body>
</html>

productos_ver.php

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

$querybuscar = mysqli_query($conn, "SELECT pro.id,pro.nombre,descripcion,precio,cat.nombre as categoria 
FROM productos pro, categoria_productos cat where pro.categoria_id=cat.id and pro.id = '$id'");
 
while($mostrar = mysqli_fetch_array($querybuscar))
{
	$proid 	= $mostrar['id'];
	$pronom	= $mostrar['nombre'];
	$prodes	= $mostrar['descripcion'];
	$propre	= $mostrar['precio'];
	$procat	= $mostrar['categoria'];
}
?>
<html>
<body>
<div class="caja_popup2">
<form class="contenedor_popup" method="POST">
<table>
<tr><th colspan="2">Ver producto</th></tr>
<tr> 
<td><b>Id:</b></td>
<td><?php echo $proid;?></td>
</tr>		
<tr> 
<td><b>Nombre: </b></td>
<td><?php echo $pronom;?></td>
</tr>
<tr> 
<td><b>Descripción: </b></td>
<td><?php echo $prodes;?></td>
</tr>
<tr> 
<td><b>Precio: </b></td>
<td><?php echo $propre;?></td>
</tr>
<tr> 
<td><b>Categoría: </b></td>
<td><?php echo $procat;?></td>
</tr>

<tr>
				
<td colspan="2">
<?php echo "<a class='BotonesTeam' href=\"productos_tabla.php?pag=$pagina\">Regresar</a>";?>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>

productos_registrar.php

<?php 
include("conexion.php");
include("productos_tabla.php");
$pagina = $_GET['pag'];
?>
<html>
<body>
<div class="caja_popup2">
<form class="contenedor_popup" method="POST">
<table>
<tr><th colspan="2">Agregar producto</th></tr>	
<tr> 
<td><b>Nombre: </b></td>
<td><input type="text" name="txtnom" autocomplete="off" class="CajaTexto"></td>
</tr>
<tr> 
<td><b>Descripción: </b></td>
<td><input type="text" name="txtdes" autocomplete="off" class="CajaTexto"></td>
</tr>
<tr> 
<td><b>Precio: </b></td>
<td><input type="number" name="txtpre" autocomplete="off" class="CajaTexto" step="any"></td>
</tr>
<tr> 
<td><b>Categoría: </b></td>
<td>
<select name="txtcat" class='CajaTexto'>
<?php
		
$qrcategoria = mysqli_query($conn, "SELECT * FROM categoria_productos ");
while($mostrarcat = mysqli_fetch_array($qrcategoria)) 
{ 
echo '<option value="'.$mostrarcat['id'].'">' .$mostrarcat['nombre']. '</option>';
}
?>  
</select>
</td>
</tr>

<tr>
				
<td colspan="2" >
<?php echo "<a class='BotonesTeam' href=\"productos_tabla.php?pag=$pagina\">Cancelar</a>";?>&nbsp;
<input class='BotonesTeam' type="submit" name="btnregistrar" value="Registrar" onClick="javascript: return confirm('¿Deseas registrar este producto');">
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
<?php
	
if(isset($_POST['btnregistrar']))
{   
	$pronom 	= $_POST['txtnom'];
        $prodes 	= $_POST['txtdes'];
	$propre 	= $_POST['txtpre'];
	$procat 	= $_POST['txtcat'];
   
	mysqli_query($conn, "INSERT INTO productos(nombre,descripcion,precio,categoria_id) VALUES('$pronom','$prodes','$propre','$procat')");
	
	echo "<script> alert('Producto registrado con exito: $pronom'); window.location='productos_tabla.php' </script>";
}
?>

productos_modificar.php

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

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

$querybuscar = mysqli_query($conn, "SELECT * FROM productos WHERE id = '$id'");
 
while($mostrar = mysqli_fetch_array($querybuscar))
{	
	$proid 		= $mostrar['id'];
	$pronom 	= $mostrar['nombre'];
	$prodes 	= $mostrar['descripcion'];
	$propre 	= $mostrar['precio'];
	$procat 	= $mostrar['categoria_id'];
}
?>
<html>
<body>
<div class="caja_popup2">
<form class="contenedor_popup" method="POST">
<table>
<tr><th colspan="2">Modificar producto</th></tr>	
<tr> 
<td><b>Id: </b></td>
<td><input class="CajaTexto" type="number" name="txtid" value="<?php echo $proid;?>" readonly></td>
</tr>
<tr> 
<td><b>Nombre: </b></td>
<td><input class="CajaTexto" type="text" name="txtnom" value="<?php echo $pronom;?>" required></td>
</tr>
<tr> 
<td><b>Descripción: </b></td>
<td><input class="CajaTexto" type="text" name="txtdes" value="<?php echo $prodes;?>" required></td>
</tr>
<tr> 
<td><b>Precio: </b></td>
<td><input class="CajaTexto" type="number" step="any" name="txtpre" value="<?php echo $propre;?>" required ></td>
</tr>
<tr> 
<td><b>Categoría: </b></td>
<td>
<select name="txtcat" class='CajaTexto'>

<?php	
$qrproductos = mysqli_query($conn, "SELECT * FROM categoria_productos ");
while($mostrarcat = mysqli_fetch_array($qrproductos)) 
{ 
if($mostrarcat['id']==$procat)
{
echo '<option selected="selected" value="'.$mostrarcat['id'].'">' .$mostrarcat['nombre']. '</option>';
}
else
{
echo '<option value="'.$mostrarcat['id'].'">' .$mostrarcat['nombre']. '</option>';
}
}		
?> 

</select>
</td>
</tr>
<tr>
<td colspan="2" >
<?php echo "<a class='BotonesTeam' href=\"productos_tabla.php?pag=$pagina\">Cancelar</a>";?>&nbsp;
<input class='BotonesTeam' type="submit" name="btnregistrar" value="Modificar" onClick="javascript: return confirm('¿Deseas modificar este producto');">
</td>
</tr>
</table>
</form>
</div>
</body>
</html>

<?php
	
if(isset($_POST['btnregistrar']))
{    
	$proid1 	= $_POST['txtid'];
	$pronom1 	= $_POST['txtnom'];
	$prodes1	= $_POST['txtdes'];
	$propre1 	= $_POST['txtpre'];
	$procat1 	= $_POST['txtcat'];
      
$querymodificar = mysqli_query($conn, "UPDATE productos SET nombre='$pronom1',descripcion='$prodes1',precio='$propre1',categoria_id='$procat1' WHERE id = '$proid1'");
echo "<script>window.location= 'productos_tabla.php?pag=$pagina' </script>";
    
}
?>

productos_eliminar.php

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

mysqli_query($conn, "DELETE FROM productos WHERE id='$id'");
header("Location:productos_tabla.php?pag=$pagina");

?>

categoria_tabla.php

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

 $sqlcat = mysqli_query($conn, "SELECT * FROM categoria_productos where nombre = '".$buscar."'");

}
else
{
 $sqlcat = mysqli_query($conn, "SELECT * FROM categoria_productos ORDER BY id ASC LIMIT " . (($pagina - 1) * $filasmax)  . "," . $filasmax);
}
 
    $resultadoMaximo = mysqli_query($conn, "SELECT count(*) as num_categorias FROM categoria_productos");
 
    $maxusutabla = mysqli_fetch_assoc($resultadoMaximo)['num_categorias'];
	
    ?>
	<div class="ContenedorTabla" >
	<form method="POST">
	<h1>Lista de categorías de productos</h1>
	<div class="ContBuscar">
	<div style="float: left;">
	<a href="categoria_tabla.php" class="BotonesTeam">Inicio</a>
	<input class="BotonesTeam" type="submit" value="Buscar" name="btnbuscar">
	<input class="CajaTextoBuscar" type="text" name="txtbuscar"  placeholder="Ingresar categoría" autocomplete="off" >
	</div>
	<div style="float:right">
	<?php echo "<a class='BotonesTeam5' href=\"categoria_registrar.php?pag=$pagina\">Agregar categoría</a>";?>
	</div>
	</div>
</form>
    <table>
<tr>
<th>Id</th>
<th>Nombre</th>
<th>Acción</th>
</tr>
 
<?php
 
while ($mostrar = mysqli_fetch_assoc($sqlcat)) 
		{
			
echo "<tr>";
echo "<td>".$mostrar['id']."</td>";
echo "<td>".$mostrar['nombre']."</td>"; 
echo "<td style='width:24%'>
<a class='BotonesTeam1' href=\"categoria_ver.php?categoria=$mostrar[id]&pag=$pagina\">&#x1F50D;</a> 
<a class='BotonesTeam2' href=\"categoria_modificar.php?categoria=$mostrar[id]&pag=$pagina\">&#128397;</a> 
<a class='BotonesTeam3' href=\"categoria_eliminar.php?categoria=$mostrar[id]&pag=$pagina\" onClick=\"return confirm('¿Estás seguro de eliminar la categoría $mostrar[nombre]?')\">&#10006;</a>
</td>";  
}

?>
</table>
<div style='text-align:right'>
<br>
<?php echo "Total de categorías: ".$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="BotonesTeam4" href="categoria_tabla.php?pag=<?php echo $_GET['pag'] - 1; ?>">Anterior</a>
<?php
} 
else 
{
?>
<a class="BotonesTeam4" href="#" style="pointer-events: none">Anterior</a>
<?php
}
?>
 
 <?php
} 
else 
{
?>
<a class="BotonesTeam4" href="#" style="pointer-events: none">Anterior</a>
<?php
}
 
if (isset($_GET['pag'])) {
if ((($pagina) * $filasmax) < $maxusutabla) {
?>
<a class="BotonesTeam4" href="categoria_tabla.php?pag=<?php echo $_GET['pag'] + 1; ?>">Siguiente</a>
<?php
} else {
?>
<a class="BotonesTeam4" href="#" style="pointer-events: none">Siguiente</a>
<?php
}
?>
<?php
} else {
?>
<a class="BotonesTeam4" href="categoria_tabla.php?pag=2">Siguiente</a>
<?php
}
?>
</div>
</div>
</body>
</html>

categoria_ver.php

<?php 
include("conexion.php");
include("categoria_tabla.php");
$pagina = $_GET['pag'];
$id 	= $_GET['categoria'];

$querybuscar = mysqli_query($conn, "SELECT * FROM categoria_productos WHERE id = '$id'");
 
while($mostrar = mysqli_fetch_array($querybuscar))
{
	$catid	= $mostrar['id'];
	$catnom = $mostrar['nombre'];
}
?>
<html>
<body>
<div class="caja_popup2">
<form class="contenedor_popup" method="POST">
<table>
<tr><th colspan="2">Ver categoría</th></tr>
<tr> 
<td><b>Id:</b></td>
<td><?php echo $catid;?></td>
</tr>
			
<tr> 
<td><b>Nombre: </b></td>
<td><?php echo $catnom;?></td>
</tr>
<tr>
				
<td colspan="2">
<?php echo "<a class='BotonesTeam' href=\"categoria_tabla.php?pag=$pagina\">Regresar</a>";?>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>

categoria_registrar.php

<?php 
include('conexion.php');
include("categoria_tabla.php");

$pagina = $_GET['pag'];
?>
<html>
<head>    
<title>VaidrollTeam</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="caja_popup2"> 
<form class="contenedor_popup" method="POST">
<table>
<tr><th colspan="2" >Agregar categoría</th></tr>
<tr> 
<td>Nombre</td>
<td><input type="text" name="txtnom" autocomplete="off" class="CajaTexto"></td>
</tr>
<tr> 	
<td colspan="2" >
<?php echo "<a class='BotonesTeam' href=\"categoria_tabla.php?pag=$pagina\">Cancelar</a>";?>&nbsp;
<input class='BotonesTeam' type="submit" name="btnregistrar" value="Registrar" onClick="javascript: return confirm('¿Deseas registrar esta categoría?');">
</td>
</tr>
</table>
</form>
 </div>
</body>
</html>
<?php

if(isset($_POST['btnregistrar']))
{   
	$vainom 	= $_POST['txtnom'];

	$queryadd	= mysqli_query($conn, "INSERT INTO categoria_productos(nombre) VALUES('$vainom')");
	
 	if(!$queryadd)
	{
		 echo "<script>alert('Id duplicado, intenta otra vez');</script>";
		 
	}else
	{
		echo "<script>window.location= 'categoria_tabla.php?pag=1' </script>";
	}
}
?>

categoria_modificar.php

<?php 
include('conexion.php');
include("categoria_tabla.php");

$pagina = $_GET['pag'];
$id = $_GET['categoria'];

$querybuscar = mysqli_query($conn, "SELECT * FROM categoria_productos WHERE id = '$id'");
 
while($mostrar = mysqli_fetch_array($querybuscar))
{
$catid	= $mostrar['id'];
$catnom = $mostrar['nombre'];
}
?>
<html>
<body>
<div class="caja_popup2">
<form class="contenedor_popup" method="POST">
<table>
<tr><th colspan="2">Modificar categoría</th></tr>
<tr> 
<td>Id</td>
<td><input class="CajaTexto" type="text" name="txtid" value="<?php echo $catid;?>" readonly></td>
</tr>
<tr> 
<td>Nombre</td>
<td><input class="CajaTexto" type="text" name="txtnombre" value="<?php echo $catnom;?>" required></td>

<tr>
				
<td colspan="2">
<?php echo "<a class='BotonesTeam' href=\"categoria_tabla.php?pag=$pagina\">Cancelar</a>";?>&nbsp;
<input class="BotonesTeam" type="submit" name="btnmodificar" value="Modificar" onClick="javascript: return confirm('¿Deseas modificar esta categoría?');">
</td>
</tr>
</table>
</form>
</div>
</body>
</html>

<?php
	
if(isset($_POST['btnmodificar']))
{    
$id 		= $_POST['txtid'];
$nombre 	= $_POST['txtnombre'];
      
$querymodificar = mysqli_query($conn, "UPDATE categoria_productos SET nombre='$nombre' WHERE id = '$id'");
echo "<script>window.location= 'categoria_tabla.php?pag=$pagina' </script>";
    
}
?>

categoria_eliminar.php

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

mysqli_query($conn, "DELETE FROM categoria_productos WHERE id='$id'");
header("Location:categoria_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: #f2f2f2;
font-family: Arial, sans-serif;
margin:0;
padding:0;
display: flex;
flex-direction: column;	
}
h1
{
color:black;
}
	/*Login*/
.FormCajaLogin
{
width: 100%;
height: 100%;
display: grid;
background: url(fondo.jpg) no-repeat center center fixed; 

}
.grupo-entradas{
position: absolute;
display: grid;
width: 100%;
transition: .5s;

}
.FormLogin
{
background-color: #f2f2f2;
margin: 3em auto auto auto;
border-radius: 6px;
color:#000;
border:0.1em solid black;
width: 400px;
height: 600px;
position: relative;
padding: 2px;
overflow: hidden;  

}

.TextoCajas
{

font-weight: bold;
margin-top:4%;
margin-bottom:4%;
color:#000;
text-align:left;
}

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

.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%;
margin-top:7%;
}

.BtnLogin
{
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: #1B68DF;
font-weight: bold;
margin-top:7%;
margin-bottom:5%;
}

.botondeintercambiar{
width: 240px;
margin: 35px auto;
position: relative;
box-shadow: 0 0 6px 0.5px black;
border-radius: 30px;
}
.botoncambiarcaja{
    padding: 10px 30px;
    cursor: pointer;
    background: transparent;
    border: 0;
    outline: none;
    position: relative;
	font-weight: bold;
	font-size:16px;
}
#btnvai{
    top: 0;
    left: 0;
    position: absolute;
    width: 130px;
    height: 100%;
	background-color: #1C62C1;
    border-radius: 30px;
	transition: .5s;
}

#frmlogin{
	bottom:10%;
    left: 50px;
}
#frmregistrar{
    left: 450px;
}

	/*Panel*/
.BarraLateral {
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 100%;
background-color: #0d58aa;
box-sizing: border-box;
text-align:center;
}
.BarraLateral ul {
list-style: none;
padding: 0;
margin-top:10%; 
font-size:18px;			
}

.BarraLateral li 
{
text-align:left;
padding: 12px 10px;
background-color: rgba(0, 0, 0, .5);
color:#d9dbe0;
}

.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: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
color:#000;
}

th
{
background-color: black;
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%; 
	
}
.BotonesTeam,.BotonesTeam1,.BotonesTeam2,.BotonesTeam3,.BotonesTeam4,.BotonesTeam5
{	
text-align:center;
display: inline-block;
background:#0258b6;
padding: 6px 10px;
border-radius:6px;
text-decoration: none;
color:white;
border:2px solid black;
cursor:pointer;
font-size: 16px;
}
.BotonesTeam1,.BotonesTeam2,.BotonesTeam3
{
transition: transform 250ms;
width:8%;
background:green;
}
.BotonesTeam2
{
background:#185ca7;
}
.BotonesTeam3
{
background:#cf055f;
}
.BotonesTeam4
{
background:#11757A;
}
.BotonesTeam5
{
transition: transform 250ms;
background:#B63C12;
}
.BotonesTeam1:hover,.BotonesTeam2:hover,.BotonesTeam3:hover,.BotonesTeam5:hover
{
transform: translateY(-10px);
}
.ContBuscar
{
overflow: hidden;
padding-top:1%;
}
.CajaTextoBuscar
{
width: 300px;
padding: 10px;
font-size:1em;
border-radius:5px;
border:1px solid black;
color:black;
}


	/*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%;
}

boton_formulario.js

var x = document.getElementById("frmlogin");
var y = document.getElementById("frmregistrar");
var z = document.getElementById("btnvai");
var textcolor1=document.getElementById("vaibtnlogin");
var textcolor2=document.getElementById("vaibtnregistrar");
textcolor1.style.color="white";
textcolor2.style.color="black";

function registrarvai()
{
x.style.left = "-400px";
y.style.left = "50px";
z.style.left = "110px";
textcolor1.style.color="black";
textcolor2.style.color="white";
}
function loginvai()
{
x.style.left = "50px";
y.style.left = "450px";
z.style.left = "0";
textcolor1.style.color="white";
textcolor2.style.color="black";
}

Fin 😀

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: LoginCrud2.rar

Tamaño: 565 KB

Descargar Creando link... espera 30 segundos.

Páginas

LOGIN SESIONES, REGISTRO, CRUD DE PRODUCTOS Y CATEGORÍAS EN PHP, MYSQL, HTML Y CSS