VaidrollTeam: CRUD BÁSICO DE PRODUCTOS EN PHP, MYSQL, HTML Y CSS

Proyecto que te permite realizar mantenimiento de datos como listar, buscar, agregar, modificar y eliminar los productos de una base de datos, además de mostrar un mensaje de confirmación para cada acción.

Al abrir la página te mostrará la lista de los productos cada uno con su respectivo botón para modificar o eliminar, aun lado estará el botón para agregar un nuevo producto y la barra para buscar.

El botón agregar te mostrará un formulario para ingresar la descripción, seleccionar la categoría, el precio y la cantidad de existencias, el código se auto genera al registrar y debes de confirmar el registro del producto.

Para buscar un producto debes de ingresar una descripción en la caja de texto y presionar el botón buscar.

El botón modificar te mostrará un formulario con los datos de la fila seleccionada y deberás de confirmar al momento de realizar los cambios del producto.

El botón eliminar te mostrará un mensaje de confirmación antes de eliminar el producto por completo.

Por último, el proyecto esta configurado para mostrar un máximo de 5 filas por página.

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

Paginación de la tabla botón anterior y siguiente.

Botón de buscar producto por descripción.

Botón agregar nuevo producto.

Botón modificar producto.

Botón eliminar producto.

Archivos de este proyecto.

agregar.php
conexión.php
editar.php
eliminar.php
index.php
style.css
logo.png

En phpMyAdmin en la pestaña SQL podemos crear la base de datos con el siguiente código.

create database vaicrud2;

use vaicrud2;

CREATE TABLE `categoria` (
  `catcod` int(50) NOT NULL,
  `catdes` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

INSERT INTO `categoria` (`catcod`, `catdes`) VALUES
(4231, 'categoria1'),
(4232, 'categoria2'),
(4233, 'categoria3'),
(4234, 'categoria4'),
(4235, 'categoria5');

CREATE TABLE `productos` (
  `cod` int(50) NOT NULL,
  `des` varchar(50) NOT NULL,
  `cat` int(50) NOT NULL,
  `pre` double(10,2) NOT NULL,
  `stock` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

ALTER TABLE `categoria`
  ADD PRIMARY KEY (`catcod`);

ALTER TABLE `productos`
  ADD PRIMARY KEY (`cod`),
  ADD KEY `cat` (`cat`);

ALTER TABLE `productos`
  MODIFY `cod` int(50) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=32248;

ALTER TABLE `productos`
  ADD CONSTRAINT `productos_ibfk_1` FOREIGN KEY (`cat`) REFERENCES `categoria` (`catcod`);

INSERT INTO `productos` (`cod`, `des`, `cat`, `pre`, `stock`) VALUES
(32218, 'producto1Hola', 4234, 5.10, 99),
(32219, 'producto2', 4232, 1.40, 43),
(32221, 'producto4', 4234, 20.00, 21),
(32222, 'producto5', 4232, 65.00, 35),
(32223, 'producto6', 4233, 15.00, 43),
(32224, 'producto7', 4233, 42.00, 5),
(32226, 'producto8', 4234, 42.00, 56),
(32228, 'producto9', 4234, 99.00, 8),
(32243, 'producto10', 4231, 12.00, 12),
(32245, 'vaidrollteam', 4232, 1.20, 32),
(32246, 'producto11', 4233, 12.00, 43),
(32247, 'producto12', 4234, 43.00, 5);

Continuamos con el código de cada archivo.

conexion.php

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

index.php

<?php
include_once("conexion.php"); 
?>
<!--Busca por VaidrollTeam para más proyectos. -->
<html>
<head>    
	<title>VaidrollTeam</title>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="style.css">
	<link rel="icon" href="logo.png">
</head>
<body>
    <?php
 
    $filasmax = 5;
 
    if (isset($_GET['pag'])) 
	{
        $pagina = $_GET['pag'];
    } else 
	{
        $pagina = 1;
    }
 
 if(isset($_POST['btnbuscar']))
{
$buscar = $_POST['txtbuscar'];

 $qrproductos = mysqli_query($conn, "SELECT cod,des,cate.catdes,pre,stock FROM productos pro,categoria cate 
 where pro.cat=cate.catcod and des = '".$buscar."'");

}
else
{
 $qrproductos = mysqli_query($conn, "SELECT cod,des,cate.catdes,pre,stock FROM productos pro,categoria cate 
 where pro.cat=cate.catcod ORDER BY pro.cod ASC LIMIT " . (($pagina - 1) * $filasmax)  . "," . $filasmax);
}
 
    $resultadoMaximo = mysqli_query($conn, "SELECT count(*) as num_productos FROM productos");
 
    $maxproductos = mysqli_fetch_assoc($resultadoMaximo)['num_productos'];
 
    ?>

    <table><tr>
	<th colspan="6"><h1>LISTA DE PRODUCTOS</h1></th></tr>
	<tr>
	<th><a href="index.php">&#128400; Inicio</a></th>
	<form method="POST">
	<th colspan="4">
	<input type="submit" value="&#128270; Buscar" name="btnbuscar">
	<input type="text" name="txtbuscar" id="cajabuscar" placeholder="Ingresar producto" autocomplete="off"></th>
	</form>
	<th>
	<?php echo "<a href=\"agregar.php?pag=$pagina\">&#10010; Agregar</a>";?>
	</th>
	</tr>
	<tr>
	    <th >Código</th>
            <th>Descripción</th>
            <th>Categoría</th>
            <th >Precio</th>
            <th >Stock</th>
	    <th>Acción</th>
	</tr>
 
        <?php
 
        while ($mostrar = mysqli_fetch_assoc($qrproductos)) 
		{
           echo "<tr>";
            echo "<td>".$mostrar['cod']."</td>";
            echo "<td>".$mostrar['des']."</td>";
            echo "<td>".$mostrar['catdes']."</td>";    
			echo "<td>".$mostrar['pre']."</td>";  
			echo "<td>".$mostrar['stock']."</td>";  
            echo "<td style='width:24%'>
			<a href=\"editar.php?cod=$mostrar[cod]&pag=$pagina\">&#9998; Modificar</a> 
			<a href=\"eliminar.php?cod=$mostrar[cod]&pag=$pagina\" 
			onClick=\"return confirm('¿Estás seguro de eliminar a $mostrar[des]?')\">&#10006; Eliminar</a>
			</td>";  		
        }
 
        ?>

    </table>
<div>
</div>
    <div style="text-align:center">
        <?php
        if (isset($_GET['pag'])) 
		{
	if ($_GET['pag'] > 1) {
        ?>
	<a href="index.php?pag=<?php echo $_GET['pag'] - 1; ?>">Anterior</a>
            <?php
	} 
	else 
	{
            ?>
	<a href="#" style="pointer-events: none">Anterior</a>
            <?php
	}
            ?>
            <?php
        } 
		else 
	{
        ?>
        <a href="#" style="pointer-events: none">Anterior</a>
            <?php
        }
 
        if (isset($_GET['pag'])) {
            if ((($pagina) * $filasmax) < $maxproductos) {
                ?>
            <a href="index.php?pag=<?php echo $_GET['pag'] + 1; ?>">Siguiente</a>
        <?php
            } else {
        ?>
            <a href="#" style="pointer-events: none">Siguiente</a>
        <?php
            }
        ?>
        <?php
        } else {
        ?>
            <a href="index.php?pag=2">Siguiente</a>
        <?php
        }
        ?>
    </div>
    </form>
</div>
</body>
</html>

agregar.php

<?php 
include_once("conexion.php"); 
include_once("index.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" id="formregistrar"> 
  <form class="contenedor_popup" method="POST">
        <table>
		<tr><th colspan="2">Nuevo Producto</th></tr>
                <tr> 
                <td>Descripción</td>
                <td><input type="text" name="txtdes" required></td>
                </tr>
		<tr> 
                <td>Categoría</td>
                <td>
	 			  <select name="txtcat" >
        <?php
		
			$qrcategoria = mysqli_query($conn, "SELECT * FROM categoria ");
			 while($mostrarcat = mysqli_fetch_array($qrcategoria)) 
		{ 
		echo '<option value="'.$mostrarcat['catcod'].'">' .$mostrarcat['catdes']. '</option>';
		}
        ?>  
      </select>
	</td>
	</tr>
        <tr> 
        <td>Precio</td>
        <td><input type="number" name="txtpre" step="any" required></td>
        </tr>
        <tr> 
        <td>Stock</td>
        <td><input type="number" name="txtstock" required></td>
            </tr>
            <tr> 	
               <td colspan="2">
				  <?php echo "<a href=\"index.php?pag=$pagina\">Cancelar</a>";?>
				   <input 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']))
{   
	$prodes 	= $_POST['txtdes'];
        $procat 	= $_POST['txtcat'];
	$propre 	= $_POST['txtpre'];
        $prostock 	= $_POST['txtstock'];
    
	mysqli_query($conn, "INSERT INTO productos(des,cat,pre,stock) VALUES('$prodes','$procat','$propre','$prostock')");
	
	echo "<script>window.location= 'index.php?pag=$pagina' </script>";
}
?>

eliminar.php

<?php
include_once("conexion.php");
 
$cod = $_GET['cod'];
$pagina = $_GET['pag'];
 
mysqli_query($conn, "DELETE FROM productos WHERE cod=$cod");
 
header("Location:index.php?pag=$pagina");

?>

editar.php

<?php 
include_once("conexion.php");
include_once("index.php");

$codigo = $_GET['cod'];
$pagina = $_GET['pag'];
 
$querybuscar = mysqli_query($conn, "SELECT * FROM productos WHERE cod=$codigo");
 
while($mostrar = mysqli_fetch_array($querybuscar))
{
	$procod 	= $mostrar['cod'];
	$prodes 	= $mostrar['des'];
        $procat 	= $mostrar['cat'];
	$propre 	= $mostrar['pre'];
        $prostock 	= $mostrar['stock'];
}
?>
<html>
<head>    
		<title>VaidrollTeam</title>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="caja_popup2" id="formmodificar">
  <form method="POST" class="contenedor_popup" >
        <table>
		<tr><th colspan="2">Modificar producto</th></tr>
		     <tr> 
                <td>Código</td>
                <td><input type="text" name="txtcodigo" value="<?php echo $procod;?>" required readonly></td>
            </tr>
            <tr> 
            <td>Producto</td>
            <td><input type="text" name="txtproducto" value="<?php echo $prodes;?>" required></td>
            </tr>
            <tr> 
            <td>Categoría</td>
            <td>
	    <select name="txtcat" >
        <?php
		
	$qrcategoria = mysqli_query($conn, "SELECT * FROM categoria ");
	while($mostrarcat = mysqli_fetch_array($qrcategoria)) 
	{ 
	if($mostrarcat['catcod']==$procat)
	{
	echo '<option selected="selected" value="'.$mostrarcat['catcod'].'">' .$mostrarcat['catdes']. '</option>';
	}else
	{
	echo '<option value="'.$mostrarcat['catcod'].'">' .$mostrarcat['catdes']. '</option>';
	}
	}
		
        ?>  
      </select>
				
	</td>
	</tr>
        <tr> 
        <td>Precio</td>
        <td><input type="number" name="txtprecio" step="any" value="<?php echo $propre;?>" required></td>
        </tr>
	<tr> 
        <td>Existencias</td>
        <td><input type="number" name="txtstock" value="<?php echo $prostock;?>" required></td>
        </tr>
        <tr>		
        <td colspan="2">
	<?php echo "<a href=\"index.php?&pag=$pagina\">Cancelar</a>";?>
	<input type="submit" name="btnmodificar" value="Modificar" onClick="javascript: return confirm('¿Deseas modificar este producto?');">
	</td>
            </tr>
        </table>
    </form>
</div>
</body>
</html>

<?php
	
	if(isset($_POST['btnmodificar']))
{    
        $codigo1 = $_POST['txtcodigo'];
	$producto1 = $_POST['txtproducto'];
	$categoria1 = $_POST['txtcat'];
	$precio1 = $_POST['txtprecio'];
	$stock1 = $_POST['txtstock'];
	
    $querymodificar = mysqli_query($conn, "UPDATE productos SET des='$producto1',cat='$categoria1',pre='$precio1',stock='$stock1' WHERE cod=$codigo1");

  	echo "<script>window.location= 'index.php?pag=$pagina' </script>";
    
}
?>

style.css

body
{
        background: linear-gradient(180deg,#64DBF3, #7B78E3);
	font-family: sans-serif;
	margin:0;
	padding:0;
	display: flex;
	flex-direction: column;	
}
table
{
	text-align:center;
        width: 90%;
        border-collapse: collapse;
        border: 2px solid cccccc;
	margin: 2% auto;
        background: white;
}
th 
{
        padding:1%;
        background: teal;
        height: 40px;
        font-weight: lighter;
        text-shadow: 0 1px 0 #38678f;
        color: white;
        border: 1px solid #cccccc;
        box-shadow: inset 0px 1px 2px #568ebd;
        transition: all 0.2s;
	font-size: 18px;
}
tr 
{
        border: 1px solid #cccccc;
}
td 
{
        border: 1px solid #cccccc;
        padding: 10px;
        transition: all 0.2s;
        font-size: 14px;
}
a,input[type="submit"],button
{
	font-size: 14px;
	text-align:center;
	width: 100px;
	display: inline-block;
	background: linear-gradient(180deg,#E3FFFD, #FFEDFB);
	padding: 6px 10px;
	border-radius:5px;
	text-decoration: none;
	color:black;
	border:2px solid black;
	cursor:pointer;
}
h1
{
	font-family: sans-serif;
	margin:5px;
}

.contenedor_popup 
{

	top: 50%;
	left: 50%;
	position: absolute;
	transform: translate(-50%,-50%);
	width:400px; 
	height:70%;
	transition: all 0.2s;
}

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

#cajabuscar
{
	width:50%;
	font-size:18px;
	background-color:#f3f3f3;
	border-color:white;
	padding-left:10px;
	margin: 0px 30px;
}

select
{
	width:80%;
	font-size: 14px;
}

Proyecto similar.

CRUD BÁSICO DE USUARIOS EN PHP, MYSQL, HTML Y CSS

A este proyecto le puedes agregar un

login con sesiones
contraseña encriptada

Nombre: VaidrollTeamCRUDPHP2.rar

Tamaño: 20KB

Descargar Creando link... espera 30 segundos.

Páginas

CRUD BÁSICO DE PRODUCTOS EN PHP, MYSQL, HTML Y CSS