VaidrollTeam: LISTAR PRODUCTOS DE UNA BASE DE DATOS EN PHP, HTML Y MYSQL

Vamos a crear una tabla de datos que tendrá una imagen, código, nombre, precio y stock del producto, además de un enlace o botón que enviará a otra pagina datos del producto seleccionado.

Carpeta de imágenes.

Para este proyecto usaré solo 5 imágenes, puedes darle un nombre o usar un código para identificar cada imagen.

Creamos los archivos conexion.php, index.php, recibir.php y style.css.

Antes de empezar con el código, debemos de crear la base de datos bdtestproductos y la tabla productos con 5 columnas.

La columna imagen tendrá almacenado el nombre o identificador de cada imagen que se encuentre en nuestra carpeta creada al inicio.

Insertar datos a la tabla productos.

Continuamos con el código.

conexion.php

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

index.php

<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>

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

<table>

<tr><th colspan="6"><h1>Listado de productos</h1></th></tr>
<tr>

<th>Imagen</th>
<th>ID</th>
<th>Producto</th>
<th>Precio</th>
<th>Stock</th>
<th>Acción</th>

</tr>

<?php

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

while($mostrar=mysqli_fetch_array($resultado))

{
?>

<tr>
	<td><?php echo "<img width='80' height='80' src='img/".$mostrar['imagen'].".png'>" ?></td>
	<td><?php echo $mostrar['codigo'] ?></td>
	<td><?php echo $mostrar['producto'] ?></td>
	<td><?php echo $mostrar['precio'] ?></td>
	<td><?php echo $mostrar['stock'] ?></td>
	<td><?php echo "<a href='recibir.php?id=".$mostrar['codigo']."&nombre=".$mostrar['producto']."'>Agregar</a>"?></td>
</tr>

<?php
}
?>

</table>
</body>

</html>

recibir.php

<link rel="stylesheet" href="style.css">
<?php
	echo "<h1>Codigo de producto: " .$_GET['id']."</h1>";
	echo "<br>";
	echo "<h1>Producto: " .$_GET['nombre']."</h1>";
?>

style.css

body
{
	margin:0;
	padding:0;
	font-family: sans-serif;
	background: linear-gradient(to bottom, #3380B5, white);
}

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

td
{
	padding:10px 40px;
	border: 1px solid black;
	text-align: center;
	background: #f3f3f3;
	font-weight: bold;
}

th
{
	padding:10px;
	border: 1px solid black;
	background-color: #70C1F7;
}