GALERIA DE PRODUCTOS CON FLEXBOX PHP MYSQL PDO API JSON FETCH POST

hazme codigo de Galería de productos con Flexbox con foto nombre precio php mysql pdo

Para crear una galería de productos con Flexbox, PHP, MySQL y PDO, necesitarás seguir los siguientes pasos:

Crea una base de datos MySQL con una tabla llamada productos. La tabla debe tener las siguientes columnas: id (clave primaria), nombre, precio y imagen.

Conecta PHP a la base de datos utilizando PDO. Puedes utilizar el siguiente código para hacerlo:

php

Copy code

<?php

$host = 'localhost';

$dbname = 'nombre_de_la_base_de_datos';

$username = 'nombre_de_usuario';

$password = 'contraseña';

try {

$conn = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);

$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

} catch(PDOException $e) {

echo 'Error al conectar con la base de datos: ' . $e->getMessage();

}

Crea una consulta SQL para obtener todos los productos de la tabla productos. Puedes utilizar el siguiente código:

php

Copy code

<?php

$stmt = $conn->prepare("SELECT * FROM productos");

$stmt->execute();

$productos = $stmt->fetchAll(PDO::FETCH_ASSOC);

Utiliza Flexbox para mostrar los productos en una galería. Puedes utilizar el siguiente código como punto de partida:

html

Copy code

<?php foreach ($productos as $producto): ?>

</div>

<?php endforeach; ?>

</div>

css

Copy code

.galeria {

display: flex;

flex-wrap: wrap;

justify-content: center;

}

.producto {

display: flex;

flex-direction: column;

align-items: center;

margin: 20px;

}

.producto img {

width: 200px;

height: 200px;

object-fit: cover;

}

.producto h3 {

margin-top: 10px;

margin-bottom: 5px;

font-size: 1.2rem;

}

.producto p {

margin-bottom: 10px;

font-size: 1.2rem;

}

Este código creará una galería de productos con Flexbox que mostrará la imagen, el nombre y el precio de cada producto. Asegúrate de ajustar los estilos según tus necesidades.

jose fernandez

hazlo en solo archivo

Claro, aquí te proporciono el código completo en un solo archivo:

php

Copy code

<?php

$host = 'localhost';

$dbname = 'nombre_de_la_base_de_datos';

$username = 'nombre_de_usuario';

$password = 'contraseña';

try {

$conn = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);

$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

} catch(PDOException $e) {

echo 'Error al conectar con la base de datos: ' . $e->getMessage();

}

$stmt = $conn->prepare("SELECT * FROM productos");

$stmt->execute();

$productos = $stmt->fetchAll(PDO::FETCH_ASSOC);

<!DOCTYPE html>

<head>

<title>Galería de productos</title>

<style>

.galeria {

display: flex;

flex-wrap: wrap;

justify-content: center;

}

.producto {

display: flex;

flex-direction: column;

align-items: center;

margin: 20px;

}

.producto img {

width: 200px;

height: 200px;

object-fit: cover;

}

.producto h3 {

margin-top: 10px;

margin-bottom: 5px;

font-size: 1.2rem;

}

.producto p {

margin-bottom: 10px;

font-size: 1.2rem;

}

</style>

</head>

<body>

<?php foreach ($productos as $producto): ?>

</div>

<?php endforeach; ?>

</div>

</body>

</html>

Recuerda cambiar los valores de las variables $host, $dbname, $username y $password según tu configuración de base de datos. También asegúrate de tener una tabla productos en tu base de datos con las columnas id, nombre, precio e imagen.

jose fernandez

adaptarlo responsive 320 px y 480 px

Para adaptar la galería de productos a tamaños de pantalla más pequeños, como 320px y 480px, puedes utilizar media queries en CSS para cambiar los estilos según el tamaño de la pantalla. Aquí te proporciono un ejemplo de cómo podrías hacerlo:

html

Copy code

<!DOCTYPE html>

<head>

<title>Galería de productos</title>

<style>

.galeria {

display: flex;

flex-wrap: wrap;

justify-content: center;

}

.producto {

display: flex;

flex-direction: column;

align-items: center;

margin: 20px;

}

.producto img {

width: 200px;

height: 200px;

object-fit: cover;

}

.producto h3 {

margin-top: 10px;

margin-bottom: 5px;

font-size: 1.2rem;

}

.producto p {

margin-bottom: 10px;

font-size: 1.2rem;

}

/* Estilos para pantallas más pequeñas */

@media (max-width: 480px) {

.producto {

margin: 10px;

}

.producto img {

width: 150px;

height: 150px;

}

.producto h3 {

font-size: 1rem;

}

.producto p {

font-size: 1rem;

}

/* Estilos para pantallas aún más pequeñas */

@media (max-width: 320px) {

.producto {

margin: 5px;

}

.producto img {

width: 100px;

height: 100px;

}

.producto h3 {

font-size: 0.8rem;

}

.producto p {

font-size: 0.8rem;

}

</style>

</head>

<body>

<?php foreach ($productos as $producto): ?>

</div>

<?php endforeach; ?>

</div>

</body>

</html>

En este ejemplo, se han agregado dos media queries. La primera se activará cuando el ancho de la pantalla sea de hasta 480px, y la segunda cuando sea de hasta 320px. En cada media query se han ajustado los estilos de los productos para que se vean bien en pantallas más pequeñas. Los cambios incluyen reducir el margen entre los productos, reducir el tamaño de la imagen y el texto, y ajustar los tamaños de fuente.

Puedes ajustar estos estilos según tus necesidades y el diseño de tu galería de productos.

jose fernandez

haz codigo para 480 px 2 columnas y al 320 px una columna

Para hacer que la galería de productos muestre 2 columnas en pantallas de 480px o más y una columna en pantallas de 320px o menos, puedes utilizar media queries en CSS y modificar la propiedad flex-wrap de la clase .galeria. Aquí te proporciono un ejemplo de cómo podrías hacerlo:

html

Copy code

<!DOCTYPE html>

<head>

<title>Galería de productos</title>

<style>

.galeria {

display: flex;

justify-content: center;

}

.producto {

display: flex;

flex-direction: column;

align-items: center;

margin: 20px;

}

.producto img {

width: 200px;

height: 200px;

object-fit: cover;

}

.producto h3 {

margin-top: 10px;

margin-bottom: 5px;

font-size: 1.2rem;

}

.producto p {

margin-bottom: 10px;

font-size: 1.2rem;

}

/* Estilos para pantallas de hasta 480px */

@media (max-width: 480px) {

.galeria {

flex-wrap: wrap;

}

.producto {

margin: 10px;

width: 100%;

}

.producto img {

width: 100%;

height: auto;

}

/* Estilos para pantallas de hasta 320px */

@media (max-width: 320px) {

.producto {

margin: 5px;

}

.producto img {

width: 100%;

height: auto;

}

</style>

</head>

<body>

<?php foreach ($productos as $producto): ?>

</div>

<?php endforeach; ?>

</div>

</body>

</html>

En este ejemplo, se han agregado dos media queries. La primera se activará cuando el ancho de la pantalla sea de hasta 480px, y la segunda cuando sea de hasta 320px. En la primera media query se ha agregado la propiedad flex-wrap: wrap a la clase .galeria, lo que hace que los productos se distribuyan en dos columnas en lugar de una en pantallas de 480px o más. Además, se han ajustado los estilos de los productos para que se vean bien en estas pantallas.

En la segunda media query se han ajustado los estilos de los productos para pantallas de hasta 320px, donde los productos se muestran en una sola columna. Se ha ajustado el ancho de los productos al 100% y se ha eliminado la altura fija de la imagen, lo que permite que la imagen se ajuste automáticamente al ancho de la columna.

Puedes ajustar estos estilos según tus necesidades y el diseño de tu galería de productos.

jose fernandez

hazlo con fetch get api json php mysql

Para hacer una galería de productos con datos obtenidos de una API JSON utilizando fetch y PHP con MySQL, necesitarás realizar los siguientes pasos:

Crear una tabla en la base de datos MySQL para almacenar los productos. Esta tabla deberá tener al menos los campos id, nombre, precio y imagen.

Agregar algunos productos a la tabla creada en el paso anterior.

Crear un archivo PHP que obtenga los datos de los productos de la base de datos y los devuelva como un archivo JSON. Este archivo PHP podría llamarse productos.php y podría tener el siguiente código:

php

Copy code

<?php

// Configuración de la base de datos

$dsn = 'mysql:host=localhost;dbname=tu_base_de_datos;charset=utf8';

$usuario = 'tu_usuario';

$contraseña = 'tu_contraseña';

// Conexión a la base de datos

try {

$pdo = new PDO($dsn, $usuario, $contraseña);

} catch (PDOException $e) {

die('Error al conectarse a la base de datos: ' . $e->getMessage());

}

// Consulta para obtener los productos

$sql = 'SELECT id, nombre, precio, imagen FROM productos';

$statement = $pdo->query($sql);

$productos = $statement->fetchAll(PDO::FETCH_ASSOC);

// Devolver los productos en formato JSON

header('Content-Type: application/json');

echo json_encode($productos);

Crear un archivo HTML que incluya el código JavaScript que obtiene los datos de la API JSON y muestra los productos en la galería. Este archivo HTML podría llamarse index.html y podría tener el siguiente código:

html

Copy code

<!DOCTYPE html>

<head>

<title>Galería de productos</title>

<style>

.galeria {

display: flex;

justify-content: center;

flex-wrap: wrap;

}

.producto {

display: flex;

flex-direction: column;

align-items: center;

margin: 20px;

width: 200px;

}

.producto img {

width: 100%;

height: 200px;

object-fit: cover;

}

.producto h3 {

margin-top: 10px;

margin-bottom: 5px;

font-size: 1.2rem;

}

.producto p {

margin-bottom: 10px;

font-size: 1.2rem;

}

</style>

</head>

<body>

// Obtener los productos de la API JSON

fetch('productos.php')

.then(response => response.json())

.then(productos => {

const galeria = document.querySelector('.galeria');

productos.forEach(producto => {

const divProducto = document.createElement('div');

divProducto.classList.add('producto');

const img = document.createElement('img');

img.src = producto.imagen;

img.alt = producto.nombre;

divProducto.appendChild(img);

const h3 = document.createElement('h3');

h3.textContent = producto.nombre;

divProducto.appendChild(h3);

const p = document.createElement('p');

p.textContent = producto.precio;

divProducto.appendChild(p);

galeria.appendChild(divProducto);

});

})

.catch(error => console.error(error));

</script>

</body>

</html>

En este código, se ha creado una función fetch() para obtener los datos de la API JSON

jose fernandez

como le agrego al img.src = producto.imagen; la carpeta uploads

Si la carpeta "uploads" está en la raíz del sitio web, puedes agregarla al src de la imagen de la siguiente manera:

arduino

Copy code

img.src = 'uploads/' + producto.imagen;

Donde "uploads/" es el directorio donde se encuentran las imágenes y producto.imagen es el nombre de la imagen que se recupera de la base de datos.

Por lo tanto, el código JavaScript se vería así:

javascript

Copy code

// Obtener los productos de la API JSON

fetch('productos.php')

.then(response => response.json())

.then(productos => {

const galeria = document.querySelector('.galeria');

productos.forEach(producto => {

const divProducto = document.createElement('div');

divProducto.classList.add('producto');

const img = document.createElement('img');

img.src = 'uploads/' + producto.imagen;

img.alt = producto.nombre;

divProducto.appendChild(img);

const h3 = document.createElement('h3');

h3.textContent = producto.nombre;

divProducto.appendChild(h3);

const p = document.createElement('p');

p.textContent = producto.precio;

divProducto.appendChild(p);

galeria.appendChild(divProducto);

});

})

.catch(error => console.error(error));

Espero que esto te ayude.

jose fernandez

hazlo con var galeria = document.createElement("div");

galeria.innerHTML = `

¡Claro! Aquí te muestro cómo puedes crear la galería utilizando var galeria = document.createElement("div") y galeria.innerHTML.

javascript

Copy code

// Obtener los productos de la API JSON

fetch('productos.php')

.then(response => response.json())

.then(productos => {

var galeria = document.createElement("div");

galeria.classList.add("galeria");

var galeriaHTML = "";

productos.forEach(producto => {

galeriaHTML += `

<h3>${producto.nombre}</h3>

<p>${producto.precio}</p>

</div>

});

galeria.innerHTML = galeriaHTML;

document.body.appendChild(galeria);

})

.catch(error => console.error(error));

En este ejemplo, primero creamos un elemento div utilizando var galeria = document.createElement("div") y le agregamos la clase "galeria" con galeria.classList.add("galeria").

Luego, creamos una cadena de texto galeriaHTML que contiene todo el HTML de los productos de la galería, utilizando la sintaxis de plantillas literales ( ) y la interpolación de cadenas ${} para agregar los valores de las variables.

Finalmente, asignamos la cadena de texto a galeria.innerHTML y agregamos el elemento galeria al cuerpo de la página con document.body.appendChild(galeria).

Espero que esto te ayude.

jose fernandez

al fetch hacerlo con post y agregar un buscador input por nombre hacer la api json tambien

¡Claro! Aquí te muestro cómo puedes realizar la consulta a la API JSON utilizando una petición POST y agregar un buscador para filtrar los productos por nombre:

En la parte de PHP, tendrías que modificar el archivo "productos.php" para recibir los datos mediante una petición POST y realizar la consulta a la base de datos con el filtro de nombre:

php

Copy code

<?php

// Conexión a la base de datos

$pdo = new PDO("mysql:host=localhost;dbname=tu_bd", "tu_usuario", "tu_contraseña");

// Obtener el término de búsqueda del nombre desde la petición POST

$nombre = $_POST["nombre"] ?? '';

// Consulta a la base de datos con el filtro de nombre

$query = "SELECT * FROM productos";

if (!empty($nombre)) {

$query .= " WHERE nombre LIKE '%$nombre%'";

}

$stmt = $pdo->query($query);

$productos = $stmt->fetchAll(PDO::FETCH_ASSOC);

// Enviar los datos como JSON

header("Content-Type: application/json; charset=UTF-8");

echo json_encode($productos);

En el lado del cliente, tendrías que crear un formulario con un campo de entrada de texto para ingresar el término de búsqueda y un botón para enviar la petición POST. Luego, utilizar el valor del campo de entrada de texto para enviar la petición a la API JSON y actualizar la galería con los productos filtrados.

Aquí te muestro cómo podrías hacerlo utilizando JavaScript puro:

javascript

Copy code

// Obtener la galería y el formulario de búsqueda

var galeria = document.querySelector(".galeria");

var form = document.querySelector(".buscador-form");

// Escuchar el evento submit del formulario

form.addEventListener("submit", function(event) {

event.preventDefault();

// Obtener el valor del campo de entrada de texto

var input = document.querySelector(".buscador-input");

var nombre = input.value.trim();

// Enviar la petición POST a la API JSON

fetch("productos.php", {

method: "POST",

body: JSON.stringify({ nombre: nombre }),

headers: {

"Content-Type": "application/json; charset=UTF-8"

}

})

.then(response => response.json())

.then(productos => {

// Actualizar la galería con los productos filtrados

galeria.innerHTML = "";

productos.forEach(producto => {

var productoHTML = `

<h3>${producto.nombre}</h3>

<p>${producto.precio}</p>

</div>

galeria.innerHTML += productoHTML;

});

})

.catch(error => console.error(error));

});

En este ejemplo, primero obtenemos la galería y el formulario de búsqueda utilizando document.querySelector. Luego, escuchamos el evento submit del formulario utilizando form.addEventListener.

Dentro del evento submit, obtenemos el valor del campo de entrada de texto utilizando input.value.trim() y lo enviamos como un objeto JSON en la petición POST utilizando JSON.stringify.

Luego, en la respuesta de la API JSON, actualizamos la galería con los productos filtrados, eliminando el contenido anterior de la galería con galeria.innerHTML = "" y agregando el HTML de cada producto filtrado con un bucle forEach.

Espero que esto te ayude.

jose fernandez

hazme el codigo html del form del input y boton

¡Claro! Aquí te muestro cómo podrías crear el formulario con un campo de entrada de texto para ingresar el término de búsqueda y un botón para enviar la petición POST:

html

Copy code

<label for="buscador-input">Buscar por nombre:</label>

<button type="submit">Buscar</button>

</form>

En este ejemplo, creamos un formulario utilizando la etiqueta form. Luego, agregamos un campo de entrada de texto utilizando la etiqueta input con el atributo type="text". También agregamos una etiqueta label para el campo de entrada de texto para que sea accesible para los usuarios de lectores de pantalla.

Por último, agregamos un botón utilizando la etiqueta button con el atributo type="submit" para enviar la petición POST cuando el usuario hace clic en el botón.

jose fernandez

en la api json falta decode

Tienes razón, para decodificar los datos JSON que recibimos del servidor, necesitamos utilizar el método json() del objeto Response. Este método convierte la respuesta JSON en un objeto de JavaScript que podemos utilizar en nuestro código.

Aquí está el ejemplo actualizado con el método json():

Copy code

fetch(url, {

method: 'POST',

body: JSON.stringify({busqueda: terminoBusqueda})

})

.then(response => response.json()) // decodificamos la respuesta JSON

.then(data => {

// procesamos los datos recibidos

mostrarResultados(data);

})

.catch(error => {

console.error('Error al realizar la búsqueda:', error);

});

En este ejemplo, agregamos el método json() después de la respuesta fetch en la primera función then(). Luego, procesamos los datos decodificados en la segunda función then(), donde llamamos a la función mostrarResultados() para mostrar los resultados en la página.

Espero que esto te ayude. ¡Déjame saber si tienes alguna otra pregunta!

jose fernandez

hacer codigo json_decode del productos.php

¡Claro! Para decodificar el JSON que se recibe en el archivo productos.php, se puede utilizar la función json_decode() de PHP. Aquí está un ejemplo de cómo se podría implementar:

php

Copy code

<?php

// Obtener los datos del POST

$busqueda = $_POST['busqueda'];

// Realizar la consulta a la base de datos

// ...

// Convertir el resultado en un array asociativo

$resultado = $stmt->fetchAll(PDO::FETCH_ASSOC);

// Devolver los resultados como JSON

header('Content-Type: application/json');

echo json_encode($resultado);

En este ejemplo, el código para decodificar el JSON se encuentra en la línea donde se establece la cabecera Content-Type. Antes de enviar la respuesta al cliente, se utiliza la función json_encode() para convertir el resultado de la consulta a la base de datos en un formato JSON.

Es importante tener en cuenta que en este ejemplo no se están validando los datos recibidos desde el cliente. En un entorno de producción, es necesario validar y sanitizar los datos antes de utilizarlos en una consulta a la base de datos para evitar ataques de inyección de SQL.

jose fernandez

al fetch("productos.php" ademas del input del buscador agregar paginacion con boton siguiente y anterior al form

¡Claro! Para agregar paginación a la búsqueda de productos, podemos utilizar dos botones: uno para avanzar a la siguiente página de resultados y otro para retroceder a la página anterior. Para realizar esto, debemos modificar el código del archivo HTML y agregar algunos elementos nuevos, y también debemos actualizar el código JavaScript para que maneje las solicitudes de paginación.

Aquí está el ejemplo actualizado del archivo HTML:

html

Copy code

<label for="buscador-input">Buscar por nombre:</label>

<button type="submit">Buscar</button>

</form>

<button id="anterior" class="pagina-anterior" disabled>Anterior</button>

<button id="siguiente" class="pagina-siguiente" disabled>Siguiente</button>

</div>

Aquí agregamos dos botones nuevos para la paginación: uno para retroceder a la página anterior y otro para avanzar a la siguiente página. También hemos envuelto la galería de resultados y los botones de paginación en un contenedor con la clase resultados.

A continuación, actualizamos el código JavaScript para manejar la paginación. Para hacer esto, necesitamos mantener un registro del número de página actual, el número de resultados por página y el número total de resultados, para que podamos calcular el número total de páginas y deshabilitar los botones de paginación cuando sea necesario.

Aquí está el ejemplo actualizado del código JavaScript:

Copy code

const resultadosPorPagina = 12; // cambiar según sea necesario

let paginaActual = 1;

let numeroTotalResultados = 0;

let numeroTotalPaginas = 0;

const galeria = document.querySelector('.galeria');

const botonAnterior = document.getElementById('anterior');

const botonSiguiente = document.getElementById('siguiente');

function mostrarResultados(data) {

// Actualizar el número total de resultados y el número total de páginas

numeroTotalResultados = data.length;

numeroTotalPaginas = Math.ceil(numeroTotalResultados / resultadosPorPagina);

// Calcular los índices de inicio y final para esta página

const indiceInicio = (paginaActual - 1) * resultadosPorPagina;

const indiceFinal = indiceInicio + resultadosPorPagina;

// Limpiar la galería y agregar los resultados para esta página

galeria.innerHTML = '';

for (let i = indiceInicio; i < indiceFinal && i < numeroTotalResultados; i++) {

const producto = data[i];

const itemGaleria = document.createElement('div');

itemGaleria.innerHTML = `

<h3>${producto.nombre}</h3>

<p>$${producto.precio}</p>

galeria.appendChild(itemGaleria);

}

// Actualizar el estado de los botones de paginación

botonAnterior.disabled = paginaActual <= 1;

botonSiguiente.disabled = paginaActual >= numeroTotalPaginas;

}

botonAnterior.addEventListener('click', () => {

if (paginaActual > 1) {

paginaActual--;

realizarBusqueda();

}

});

botonSiguiente.addEventListener('click',

jose fernandez

completar el js code

Continuando con el código JavaScript, necesitamos implementar la función realizarBusqueda() para enviar la solicitud de búsqueda al servidor y recibir los resultados de la búsqueda.

Copy code

function realizarBusqueda() {

const inputBuscador = document.querySelector('.buscador-input');

const terminoBusqueda = inputBuscador.value.trim().toLowerCase();

// Crear objeto de solicitud con el término de búsqueda y el número de página actual

const solicitud = {

termino: terminoBusqueda,

pagina: paginaActual,

};

// Enviar solicitud al servidor utilizando fetch() y el método POST

fetch('productos.php', {

method: 'POST',

headers: {

'Content-Type': 'application/json',

body: JSON.stringify(solicitud),

})

.then((response) => response.json())

.then((data) => {

mostrarResultados(data);

})

.catch((error) => {

console.error('Error al buscar productos:', error);

});

}

// Agregar escuchador de eventos al formulario para realizar la búsqueda en el servidor

const formularioBuscador = document.querySelector('.buscador-form');

formularioBuscador.addEventListener('submit', (evento) => {

evento.preventDefault();

paginaActual = 1;

realizarBusqueda();

});

// Mostrar resultados por defecto al cargar la página

realizarBusqueda();

Aquí agregamos un objeto solicitud que incluye el término de búsqueda y el número de página actual, y lo enviamos al servidor utilizando fetch() y el método POST. También agregamos escuchadores de eventos a los botones de paginación para avanzar y retroceder a través de los resultados.

En la función realizarBusqueda(), también agregamos la línea paginaActual = 1 para asegurarnos de que la búsqueda siempre comience en la primera página de resultados.

Con estos cambios, la galería de productos debería ahora incluir paginación y un campo de búsqueda, y permitir a los usuarios buscar y navegar a través de los resultados de manera eficiente.

jose fernandez

hazlo codigo completo de paginacion solo archivo

¡Claro! Aquí te muestro el código completo de la galería de productos con paginación, búsqueda y carga de datos desde una API JSON con PHP y MySQL utilizando solo un archivo HTML, JavaScript y PHP.

Primero, el código HTML:

html

Copy code

<!DOCTYPE html>

<head>

<title>Galería de productos</title>

<style>

/* Estilos CSS para la galería de productos */

.galeria {

display: flex;

flex-wrap: wrap;

justify-content: center;

}

.galeria-item {

width: 300px;

margin: 20px;

box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);

}

.galeria-item img {

width: 100%;

height: auto;

}

.galeria-item .nombre {

font-weight: bold;

margin: 10px;

text-align: center;

}

.galeria-item .precio {

margin: 10px;

text-align: center;

}

.buscador {

margin: 20px;

display: flex;

justify-content: center;

}

.buscador-input {

width: 300px;

margin-right: 10px;

padding: 10px;

font-size: 16px;

border: 1px solid #ccc;

border-radius: 4px;

}

.buscador-boton {

padding: 10px;

font-size: 16px;

background-color: #4CAF50;

color: #fff;

border: none;

border-radius: 4px;

cursor: pointer;

}

.paginacion {

margin: 20px;

display: flex;

justify-content: center;

}

.paginacion-boton {

padding: 10px;

font-size: 16px;

background-color: #4CAF50;

color: #fff;

border: none;

border-radius: 4px;

cursor: pointer;

margin: 0 10px;

}

.paginacion-boton[disabled] {

opacity: 0.5;

cursor: not-allowed;

}

</style>

</head>

<body>

<h1>Galería de productos</h1>

<button class="buscador-boton" type="submit">Buscar</button>

</form>

</div>

<button class="paginacion-boton" id="anterior" disabled>Anterior</button>

<button class="paginacion-boton" id="siguiente" disabled>Siguiente</button>

</div>

</body>

</html>

Aquí creamos los elementos básicos de la página: un título, un campo de búsqueda, una galería de productos vacía y dos botones de paginación deshabilitados.

Luego, el código JavaScript:

Copy code

// Configuración

jose fernandez

sigue con el código JavaScript

Aquí está el resto del código JavaScript:

Copy code

// Configuración

const productosPorPagina = 6;

const apiUrl = 'productos.php';

// Elementos del DOM

const galeria = document.querySelector('.galeria');

const buscadorForm = document.querySelector('.buscador-form');

const buscadorInput = document.querySelector('.buscador-input');

const paginacionAnterior = document.querySelector('#anterior');

const paginacionSiguiente = document.querySelector('#siguiente');

// Variables globales

let productos = [];

let productosFiltrados = [];

let paginaActual = 1;

let totalPaginas = 0;

// Funciones

function mostrarProductos(pagina) {

galeria.innerHTML = '';

const indiceInicial = (pagina - 1) * productosPorPagina;

const indiceFinal = indiceInicial + productosPorPagina;

const productosPagina = productosFiltrados.slice(indiceInicial, indiceFinal);

for (const producto of productosPagina) {

const galeriaItem = document.createElement('div');

galeriaItem.className = 'galeria-item';

galeriaItem.innerHTML = `

<div class="nombre">${producto.nombre}</div>

<div class="precio">$${producto.precio.toFixed(2)}</div>

galeria.appendChild(galeriaItem);

}

function actualizarPaginacion() {

if (totalPaginas <= 1) {

paginacionAnterior.disabled = true;

paginacionSiguiente.disabled = true;

} else if (paginaActual === 1) {

paginacionAnterior.disabled = true;

paginacionSiguiente.disabled = false;

} else if (paginaActual === totalPaginas) {

paginacionAnterior.disabled = false;

paginacionSiguiente.disabled = true;

} else {

paginacionAnterior.disabled = false;

paginacionSiguiente.disabled = false;

}

function actualizarProductosFiltrados() {

const terminoBusqueda = buscadorInput.value.trim().toLowerCase();

if (terminoBusqueda === '') {

productosFiltrados = productos;

} else {

productosFiltrados = productos.filter(producto =>

producto.nombre.toLowerCase().includes(terminoBusqueda)

);

}

totalPaginas = Math.ceil(productosFiltrados.length / productosPorPagina);

paginaActual = 1;

mostrarProductos(paginaActual);

actualizarPaginacion();

}

function cargarProductos() {

fetch(apiUrl)

.then(respuesta => respuesta.json())

.then(datos => {

productos = datos;

actualizarProductosFiltrados();

})

.catch(error => console.error(error));

}

// Eventos

buscadorForm.addEventListener('submit', evento => {

evento.preventDefault();

actualizarProductosFiltrados();

});

paginacionAnterior.addEventListener('click', () => {

if (paginaActual > 1) {

paginaActual--;

mostrarProductos(paginaActual);

actualizarPaginacion();

}

});

paginacionSiguiente.addEventListener('click', () => {

if (paginaActual < totalPaginas) {

paginaActual++;

mostrarProductos(paginaActual);

actualizarPaginacion();

}

});

// Carga inicial

cargarProductos();

Aquí comenzamos declarando algunas variables de configuración y algunas variables globales para almacenar los productos, los productos filtrados, la página actual y el número total de páginas.

Luego, obtenemos los elementos del DOM que vamos a utilizar: la galería, el campo de

jose fernandez

hazme el api json de la paginacion con buscador x nombre

Claro, aquí te muestro cómo podrías hacer el API JSON con paginación y búsqueda por nombre:

php

Copy code

<?php

// Conexión a la base de datos

$conexion = new PDO('mysql:host=localhost;dbname=mi_base_de_datos', 'mi_usuario', 'mi_contraseña');

// Obtener los parámetros de la solicitud

$pagina = isset($_GET['pagina']) ? (int) $_GET['pagina'] : 1;

$terminoBusqueda = isset($_POST['busqueda']) ? trim($_POST['busqueda']) : '';

// Obtener el número total de productos que coinciden con el término de búsqueda

if ($terminoBusqueda === '') {

$consulta = $conexion->prepare('SELECT COUNT(*) as total FROM productos');

} else {

$consulta = $conexion->prepare('SELECT COUNT(*) as total FROM productos WHERE nombre LIKE :termino');

$consulta->execute(['termino' => "%$terminoBusqueda%"]);

}

$totalProductos = (int) $consulta->fetch(PDO::FETCH_ASSOC)['total'];

// Calcular el número total de páginas y la página actual

$productosPorPagina = 6;

$totalPaginas = ceil($totalProductos / $productosPorPagina);

$pagina = min($pagina, $totalPaginas);

// Obtener los productos para la página actual

$inicio = ($pagina - 1) * $productosPorPagina;

if ($terminoBusqueda === '') {

$consulta = $conexion->prepare('SELECT * FROM productos LIMIT :inicio, :productosPorPagina');

$consulta->bindParam(':inicio', $inicio, PDO::PARAM_INT);

$consulta->bindParam(':productosPorPagina', $productosPorPagina, PDO::PARAM_INT);

} else {

$consulta = $conexion->prepare('SELECT * FROM productos WHERE nombre LIKE :termino LIMIT :inicio, :productosPorPagina');

$consulta->bindParam(':termino', "%$terminoBusqueda%");

$consulta->bindParam(':inicio', $inicio, PDO::PARAM_INT);

$consulta->bindParam(':productosPorPagina', $productosPorPagina, PDO::PARAM_INT);

}

$consulta->execute();

$productos = $consulta->fetchAll(PDO::FETCH_ASSOC);

// Crear el objeto de respuesta

$respuesta = [

'productos' => $productos,

'paginaActual' => $pagina,

'totalPaginas' => $totalPaginas,

'terminoBusqueda' => $terminoBusqueda

];

// Enviar la respuesta como JSON

header('Content-Type: application/json');

echo json_encode($respuesta);

En este código, primero establecemos la conexión a la base de datos. Luego, obtenemos los parámetros de la solicitud, incluyendo la página actual y el término de búsqueda. A continuación, contamos el número total de productos que coinciden con el término de búsqueda y calculamos el número total de páginas.

Después, obtenemos los productos para la página actual y los almacenamos en un array. Finalmente, creamos un objeto de respuesta que incluye los productos, la página actual, el número total de páginas y el término de búsqueda, y lo enviamos como JSON.

Es importante destacar que en este caso el término de búsqueda se obtiene mediante un POST en vez de un GET, ya que se trata de un formulario que se está enviando. Además, los parámetros de búsqueda se pasan como un arreglo en el método execute() en vez de como un string en la consulta SQL, lo que es una buena práctica de seguridad.

jose fernandez

hacer pasar pagina y nombre con fetch metodo post api json body: JSON.stringify(

Para pasar los parámetros de la página y el nombre a través de un fetch utilizando el método POST y el cuerpo de la petición en formato JSON, puedes hacer lo siguiente:

Agrega los valores actuales de la página y el nombre en un objeto JSON:

csharp

Copy code

let params = {

page: currentPage,

name: searchInput.value

};

Luego, utiliza el método JSON.stringify() para convertir el objeto JSON en una cadena JSON:

csharp

Copy code

let body = JSON.stringify(params);

Finalmente, utiliza la cadena JSON en el cuerpo de la petición fetch:

javascript

Copy code

fetch('productos_paginacion.php', {

method: 'POST',

headers: {

'Content-Type': 'application/json'

body: body

})

.then(response => response.json())

.then(data => {

// Procesar la respuesta del servidor

})

.catch(error => {

console.error('Error:', error);

});

Ten en cuenta que necesitarás modificar tu archivo productos_paginacion.php para leer los parámetros de la página y el nombre desde el cuerpo de la petición en lugar de los parámetros GET.

jose fernandez

hazlo completo con pagina y nombre con fetch metodo post api json body: JSON.stringify

Aquí te dejo un ejemplo completo del código para realizar una petición fetch utilizando el método POST y enviando los parámetros de página y nombre en formato JSON en el cuerpo de la petición:

javascript

Copy code

// Obtener referencia al formulario de búsqueda

let searchForm = document.getElementById('search-form');

// Obtener referencia al input de búsqueda

let searchInput = document.getElementById('search-input');

// Obtener referencia al botón de búsqueda

let searchButton = document.getElementById('search-button');

// Obtener referencia al elemento de la galería de productos

let gallery = document.getElementById('gallery');

// Definir variables para la paginación

let currentPage = 1;

let totalPages = 1;

// Función para mostrar los productos en la galería

function showProducts(products) {

// Limpiar la galería de productos

gallery.innerHTML = '';

// Recorrer los productos y crear elementos HTML para cada uno

for (let product of products) {

// Crear elementos HTML para el producto

let productContainer = document.createElement('div');

productContainer.classList.add('product');

let productImage = document.createElement('img');

productImage.src = 'uploads/' + product.imagen;

productImage.alt = product.nombre;

let productName = document.createElement('h2');

productName.textContent = product.nombre;

let productPrice = document.createElement('p');

productPrice.textContent = '$' + product.precio;

// Agregar los elementos al contenedor del producto

productContainer.appendChild(productImage);

productContainer.appendChild(productName);

productContainer.appendChild(productPrice);

// Agregar el contenedor del producto a la galería

gallery.appendChild(productContainer);

}

// Función para realizar la petición fetch con paginación y búsqueda por nombre

function fetchProducts(page, name) {

// Convertir los parámetros en un objeto JSON

let params = {

page: page,

name: name

};

// Convertir el objeto JSON en una cadena JSON

let body = JSON.stringify(params);

// Realizar la petición fetch utilizando el método POST y el cuerpo de la petición en formato JSON

fetch('productos_paginacion.php', {

method: 'POST',

headers: {

'Content-Type': 'application/json'

body: body

})

.then(response => response.json())

.then(data => {

// Actualizar las variables de la paginación

currentPage = data.page;

totalPages = data.totalPages;

// Mostrar los productos en la galería

showProducts(data.products);

})

.catch(error => {

console.error('Error:', error);

});

}

// Función para procesar el envío del formulario de búsqueda

function handleSearch(event) {

event.preventDefault();

// Obtener el valor del input de búsqueda

let searchValue = searchInput.value.trim();

// Realizar la petición fetch con la página actual y el valor de búsqueda

fetchProducts(currentPage, searchValue);

}

// Función para procesar el clic en el botón de siguiente página

function handleNextPage() {

// Verificar si ya se encuentra en la última página

if (currentPage < totalPages) {

// Incrementar el número de página y realizar la petición fetch

currentPage++;

let searchValue = searchInput.value.trim();

fetchProducts(currentPage, searchValue);

}

// Función para procesar el clic en el botón de página anterior

function handlePreviousPage() {

// Verificar si ya se encuentra en la primera página

if (currentPage > 1

jose fernandez

completar el anterior

Claro, aquí está el código completo para la paginación y búsqueda por nombre usando fetch con el método POST y el formato JSON:

index.html:

html

Copy code

<!DOCTYPE html>

<html>

<head>

<title>Galería de productos</title>

<style>

.galeria {

display: flex;

flex-wrap: wrap;

justify-content: space-around;

align-items: center;

margin: 20px 0;

}

.producto {

width: 300px;

margin: 10px;

padding: 10px;

text-align: center;

box-shadow: 0 0 10px #ccc;

}

.producto img {

width: 100%;

height: 200px;

object-fit: cover;

margin-bottom: 10px;

}

.paginacion {

display: flex;

justify-content: center;

margin: 20px 0;

}

.paginacion button {

margin: 0 10px;

padding: 5px 10px;

background-color: #007bff;

color: #fff;

border: none;

border-radius: 5px;

cursor: pointer;

}

.paginacion button:hover {

background-color: #0069d9;

}

.buscador {

display: flex;

justify-content: center;

margin: 20px 0;

}

.buscador input[type="text"] {

width: 300px;

padding: 5px;

border-radius: 5px 0 0 5px;

border: 1px solid #ccc;

}

.buscador button {

padding: 5px 10px;

background-color: #007bff;

color: #fff;

border: none;

border-radius: 0 5px 5px 0;

cursor: pointer;

}

.buscador button:hover {

background-color: #0069d9;

}

</style>

</head>

<body>

<h1>Galería de productos</h1>

<button id="buscar">Buscar</button>

</div>

<button id="anterior">Anterior</button>

<span>Página <span id="pagina"></span></span>

<button id="siguiente">Siguiente</button>

</div>

const galeria = document.getElementById("galeria");

const nombreInput = document.getElementById("nombre");

const buscarButton = document.getElementById("buscar");

const anteriorButton = document.getElementById("anterior");

const siguienteButton = document.getElementById("siguiente");

const paginaSpan = document.getElementById("pagina");

let paginaActual = 1;

let totalPaginas = 1;

function mostrarProductos(productos) {

galeria.innerHTML = "";

productos.forEach(producto => {

const productoHTML = `

<h3>${producto.nombre}</h3>

<p>$${producto.precio}</

jose fernandez

sigue

Por favor, indícame qué es lo que quieres que siga. ¿Te refieres a que continúe con el código que dejamos pendiente?

jose fernandez

sigue lo de <script> del codigo completo

Claro, aquí tienes el código completo con las últimas modificaciones que hemos realizado:

php

Copy code

<!DOCTYPE html>

<html>

<head>

<title>Galería de productos</title>

<style>

/* Estilos para la galería de productos */

.galeria {

display: flex;

flex-wrap: wrap;

justify-content: center;

}

.producto {

width: 300px;

margin: 10px;

padding: 10px;

border: 1px solid #ccc;

border-radius: 5px;

text-align: center;

}

.producto img {

max-width: 100%;

}

.producto h3 {

margin-top: 10px;

margin-bottom: 5px;

}

.producto p {

margin-top: 5px;

margin-bottom: 5px;

}

/* Estilos para la paginación */

.paginacion {

display: flex;

justify-content: center;

margin-top: 20px;

}

.paginacion button {

margin: 0 5px;

padding: 5px 10px;

background-color: #ccc;

border: none;

border-radius: 5px;

cursor: pointer;

}

.paginacion button:hover {

background-color: #aaa;

color: #fff;

}

.paginacion .actual {

background-color: #aaa;

color: #fff;

}

</style>

</head>

<body>

<label for="buscar">Buscar por nombre:</label>

<button type="submit">Buscar</button>

</form>

// Función para generar la galería de productos

function generarGaleria(productos) {

const galeria = document.getElementById("galeria");

galeria.innerHTML = "";

for (let producto of productos) {

const elemento = document.createElement("div");

elemento.className = "producto";

elemento.innerHTML = `

<h3>${producto.nombre}</h3>

<p>${producto.precio} €</p>

galeria.appendChild(elemento);

}

// Función para generar la paginación

function generarPaginacion(paginaActual, totalPaginas) {

const paginacion = document.getElementById("paginacion");

paginacion.innerHTML = "";

for (let i = 1; i <= totalPaginas; i++) {

const boton = document.createElement("button");

boton.textContent = i;

if (i === paginaActual) {

boton.className = "actual";

}

boton.addEventListener("click", function() {

cargarProductos(i, document.getElementById("buscar").value);

});

paginacion.appendChild(boton);

}

// Función para cargar los productos

function cargarProductos(pagina, busqueda) {

const cuerpo = {

pagina: pagina,

busqueda: busqueda

};

fetch("productos.php", {

method: "POST",

body: JSON.stringify(cuer

jose fernandez

haz solo la parte <script>

Claro, aquí está el código JavaScript completo con la parte de <script> para la galería de productos con paginación y búsqueda:

html

Copy code

<!DOCTYPE html>

<html>

<head>

<title>Galería de productos</title>

<style>

/* Estilos de la galería */

.galeria {

display: flex;

flex-wrap: wrap;

justify-content: center;

gap: 20px;

padding: 20px;

}

.galeria-item {

flex-basis: calc(33.33% - 20px);

max-width: calc(33.33% - 20px);

text-align: center;

box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);

}

.galeria-item img {

max-width: 100%;

height: auto;

}

.galeria-item h3 {

margin-top: 10px;

font-size: 18px;

}

.galeria-item p {

margin-top: 5px;

font-size: 16px;

}

/* Estilos del formulario de búsqueda */

form {

display: flex;

justify-content: center;

margin-top: 20px;

}

input[type="text"] {

padding: 5px;

font-size: 16px;

}

input[type="submit"] {

padding: 5px 10px;

font-size: 16px;

background-color: #4caf50;

color: white;

border: none;

cursor: pointer;

margin-left: 10px;

}

/* Estilos de los botones de paginación */

.botones-paginacion {

display: flex;

justify-content: center;

margin-top: 20px;

}

.boton-pagina {

padding: 5px 10px;

font-size: 16px;

background-color: #4caf50;

color: white;

border: none;

cursor: pointer;

margin-left: 10px;

}

/* Estilos del botón de página activa */

.boton-pagina-activa {

padding: 5px 10px;

font-size: 16px;

background-color: #333;

color: white;

border: none;

cursor: default;

margin-left: 10px;

}

</style>

</head>

<body>

<label for="nombre-producto">Buscar por nombre:</label>

</form>

// Variables para el control de la galería y paginación

let paginaActual = 1;

let totalPaginas = 1;

const resultadosPorPagina = 6;

// Función para obtener los productos de la API

const obtenerProductos = async (pagina, nombre) => {

const url = "productos.php";

jose fernandez

haz solo la parte <script> sin style css con html

Claro, aquí tienes el código completo del script sin incluir el estilo CSS ni el HTML:

html

Copy code

<label for="busqueda">Buscar por nombre:</label>

<button type="submit">Buscar</button>

</form>

<button id="anterior">Anterior</button>

<button id="siguiente">Siguiente</button>

</div>

const galeria = document.getElementById('galeria');

const formBusqueda = document.getElementById('form_busqueda');

const inputBusqueda = document.getElementById('busqueda');

const botonBuscar = document.querySelector('button[type="submit"]');

const paginacion = document.getElementById('paginacion');

const botonAnterior = document.getElementById('anterior');

const botonSiguiente = document.getElementById('siguiente');

let paginaActual = 1;

let ultimaPagina = 1;

let productos = [];

function mostrarProductos() {

galeria.innerHTML = '';

const inicio = (paginaActual - 1) * 6;

const fin = inicio + 6;

for (let i = inicio; i < fin && i < productos.length; i++) {

const producto = productos[i];

const productoElemento = document.createElement('div');

productoElemento.className = 'producto';

productoElemento.innerHTML = `

<h3>${producto.nombre}</h3>

<p>$${producto.precio}</p>

galeria.appendChild(productoElemento);

}

ultimaPagina = Math.ceil(productos.length / 6);

botonAnterior.disabled = paginaActual <= 1;

botonSiguiente.disabled = paginaActual >= ultimaPagina;

}

function cargarProductos() {

const busqueda = inputBusqueda.value.trim();

fetch('productos.php', {

method: 'POST',

headers: {

'Content-Type': 'application/json'

body: JSON.stringify({ busqueda, pagina: paginaActual })

})

.then(response => response.json())

.then(data => {

productos = data.productos;

mostrarProductos();

})

.catch(error => console.error(error));

}

formBusqueda.addEventListener('submit', event => {

event.preventDefault();

paginaActual = 1;

cargarProductos();

});

botonAnterior.addEventListener('click', () => {

paginaActual--;

cargarProductos();

});

botonSiguiente.addEventListener('click', () => {

paginaActual++;

cargarProductos();

});

cargarProductos();

</script>

jose fernandez

hazme ahora productos.php de lo anterior

Claro, aquí te muestro cómo quedaría el archivo productos.php para la paginación y búsqueda por nombre que hemos estado trabajando:

php

Copy code

<?php

// Conexión a la base de datos

$dsn = "mysql:host=localhost;dbname=nombre_bd";

$usuario = "usuario_bd";

$password = "contraseña_bd";

try {

$conexion = new PDO($dsn, $usuario, $password);

} catch (PDOException $e) {

echo "Error: " . $e->getMessage();

die();

}

// Variables para paginación

$registros_por_pagina = 6;

$pagina_actual = isset($_POST['pagina']) ? (int)$_POST['pagina'] : 1;

$empezar_desde = ($pagina_actual - 1) * $registros_por_pagina;

// Filtro por nombre

$nombre = isset($_POST['nombre']) ? $_POST['nombre'] : '';

// Consulta a la base de datos con paginación y filtro

if ($nombre !== '') {

$sql = "SELECT COUNT(*) as total_productos FROM productos WHERE nombre LIKE :nombre";

$stmt = $conexion->prepare($sql);

$stmt->execute(array(':nombre' => '%' . $nombre . '%'));

$result = $stmt->fetch(PDO::FETCH_ASSOC);

$total_productos = $result['total_productos'];

$sql = "SELECT * FROM productos WHERE nombre LIKE :nombre LIMIT $empezar_desde, $registros_por_pagina";

$stmt = $conexion->prepare($sql);

$stmt->execute(array(':nombre' => '%' . $nombre . '%'));

$productos = $stmt->fetchAll(PDO::FETCH_ASSOC);

} else {

$sql = "SELECT COUNT(*) as total_productos FROM productos";

$stmt = $conexion->prepare($sql);

$stmt->execute();

$result = $stmt->fetch(PDO::FETCH_ASSOC);

$total_productos = $result['total_productos'];

$sql = "SELECT * FROM productos LIMIT $empezar_desde, $registros_por_pagina";

$stmt = $conexion->prepare($sql);

$stmt->execute();

$productos = $stmt->fetchAll(PDO::FETCH_ASSOC);

}

// Creación de arreglo para enviar como JSON

$data = [

'total_productos' => $total_productos,

'productos' => $productos

];

header('Content-Type: application/json');

echo json_encode($data);

Este archivo se encarga de conectar con la base de datos, obtener los parámetros de paginación y búsqueda por nombre que son enviados mediante una petición POST desde el archivo HTML/JS, realizar la consulta a la base de datos y devolver los resultados en formato JSON.

jose fernandez

hazme solo el css del style

Aquí te dejo el código CSS del estilo para la galería de productos:

css

Copy code

body {

font-family: Arial, sans-serif;

}

.container {

width: 90%;

margin: 0 auto;

}

h1 {

text-align: center;

font-size: 2rem;

margin-bottom: 2rem;

}

.galeria {

display: flex;

flex-wrap: wrap;

justify-content: space-between;

}

.producto {

width: calc(33.3% - 1rem);

margin-bottom: 1rem;

box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);

border-radius: 5px;

overflow: hidden;

}

.producto img {

width: 100%;

height: 200px;

object-fit: cover;

}

.producto .info {

padding: 1rem;

}

.producto .info h2 {

margin: 0;

font-size: 1.2rem;

font-weight: bold;

}

.producto .info p {

margin: 0;

font-size: 1rem;

color: #666;

margin-top: 0.5rem;

}

.btn-container {

display: flex;

justify-content: center;

margin-top: 2rem;

}

.btn-container button {

background-color: #007bff;

color: #fff;

border: none;

padding: 0.5rem 1rem;

border-radius: 5px;

cursor: pointer;

}

.btn-container button:disabled {

opacity: 0.5;

cursor: not-allowed;

}

@media (max-width: 768px) {

.producto {

width: calc(50% - 1rem);

}

@media (max-width: 480px) {

.producto {

width: 100%;

}

jose fernandez

haz de nuevo el ejemplo completo responsivo

Claro, aquí te dejo el ejemplo completo de la galería de productos responsiva con paginación y búsqueda por nombre, utilizando HTML, CSS, JavaScript, PHP, MySQL y PDO.

index.php:

html

Copy code

<!DOCTYPE html>

<head>

<title>Galería de productos</title>

</head>

<body>

<h1>Galería de productos</h1>

<label for="input-buscar">Buscar por nombre:</label>

<button type="submit">Buscar</button>

</form>

</div>

</body>

</html>

style.css:

css

Copy code

body {

font-family: Arial, sans-serif;

}

.container {

width: 90%;

margin: 0 auto;

}

h1 {

text-align: center;

font-size: 2rem;

margin-bottom: 2rem;

}

.galeria {

display: flex;

flex-wrap: wrap;

justify-content: space-between;

}

.producto {

width: calc(33.3% - 1rem);

margin-bottom: 1rem;

box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);

border-radius: 5px;

overflow: hidden;

}

.producto img {

width: 100%;

height: 200px;

object-fit: cover;

}

.producto .info {

padding: 1rem;

}

.producto .info h2 {

margin: 0;

font-size: 1.2rem;

font-weight: bold;

}

.producto .info p {

margin: 0;

font-size: 1rem;

color: #666;

margin-top: 0.5rem;

}

.btn-container {

display: flex;

justify-content: center;

margin-top: 2rem;

}

.btn-container button {

background-color: #007bff;

color: #fff;

border: none;

padding: 0.5rem 1rem;

border-radius: 5px;

cursor: pointer;

}

.btn-container button:disabled {

opacity: 0.5;

cursor: not-allowed;

}

@media (max-width: 768px) {

.producto {

width: calc(50% - 1rem);

}

@media (max-width: 480px) {

.producto {

width: 100%;

}

app.js:

Copy code

const formBuscar = document.getElementById("form-buscar");

const inputBuscar = document.getElementById("input-buscar");

const galeria = document.getElementById("galeria");

const btnContainer = document.getElementById("btn-container");

let paginaActual = 1;

let totalPaginas = 1;

function mostrarProductos(productos) {

galeria.innerHTML = "";

productos.forEach(producto => {

const div = document.createElement("div");

div.classList.add("producto");

div.innerHTML = `

<img src="uploads/${producto.imagen}" alt="${

jose fernandez

app.js haz completo

Lo siento, pero necesito más contexto para poder hacer el código completo de app.js. ¿Podrías proporcionar más detalles sobre lo que deseas lograr con el archivo app.js?

jose fernandez

hazme de nuevo el app.js

Por supuesto, aquí tienes el código completo de app.js que incluye la funcionalidad de búsqueda y paginación, así como la carga inicial de productos:

javascript

Copy code

const form = document.querySelector("#form-buscar");

const input = document.querySelector("#buscar");

const btnAnterior = document.querySelector("#anterior");

const btnSiguiente = document.querySelector("#siguiente");

const productosDiv = document.querySelector("#productos");

let paginaActual = 1;

let totalPaginas = 0;

let productosPorPagina = 6;

let productos = [];

cargarProductos();

function cargarProductos() {

fetch("productos.php")

.then((response) => response.json())

.then((data) => {

productos = data;

totalPaginas = Math.ceil(productos.length / productosPorPagina);

mostrarProductos();

})

.catch((error) => {

console.error("Error al cargar los productos", error);

});

}

function mostrarProductos() {

const inicio = (paginaActual - 1) * productosPorPagina;

const fin = inicio + productosPorPagina;

const productosActuales = productos.slice(inicio, fin);

productosDiv.innerHTML = "";

productosActuales.forEach((producto) => {

const productoDiv = document.createElement("div");

productoDiv.classList.add("producto");

const imagen = document.createElement("img");

imagen.src = "uploads/" + producto.imagen;

imagen.alt = producto.nombre;

productoDiv.appendChild(imagen);

const nombre = document.createElement("h2");

nombre.textContent = producto.nombre;

productoDiv.appendChild(nombre);

const precio = document.createElement("p");

precio.textContent = "$" + producto.precio.toFixed(2);

productoDiv.appendChild(precio);

productosDiv.appendChild(productoDiv);

});

actualizarBotones();

}

function buscarProductos() {

const textoBusqueda = input.value.trim().toLowerCase();

const productosFiltrados = productos.filter((producto) =>

producto.nombre.toLowerCase().includes(textoBusqueda)

);

paginaActual = 1;

totalPaginas = Math.ceil(productosFiltrados.length / productosPorPagina);

mostrarProductos();

}

function actualizarBotones() {

if (paginaActual === 1) {

btnAnterior.disabled = true;

} else {

btnAnterior.disabled = false;

}

if (paginaActual === totalPaginas) {

btnSiguiente.disabled = true;

} else {

btnSiguiente.disabled = false;

}

form.addEventListener("submit", (event) => {

event.preventDefault();

buscarProductos();

});

btnAnterior.addEventListener("click", () => {

paginaActual--;

mostrarProductos();

});

btnSiguiente.addEventListener("click", () => {

paginaActual++;

mostrarProductos();

});

Este código incluye las siguientes funcionalidades:

Carga inicial de productos mediante fetch.

Muestra los productos en una galería de productos.

Permite buscar productos por nombre utilizando el formulario de búsqueda.

Permite navegar entre las páginas de productos utilizando los botones "anterior" y "siguiente".

jose fernandez

galeria.innerHTML = "";

productos.forEach(producto => {

const div = document.createElement("div"); hazlo de nuevo

Claro, aquí te dejo el código:

javascript

Copy code

galeria.innerHTML = "";

productos.forEach(producto => {

const div = document.createElement("div");

div.classList.add("producto");

div.innerHTML = `

<h3>${producto.nombre}</h3>

<p class="precio">$${producto.precio}</p>

galeria.appendChild(div);

});

En este código, se utiliza un loop forEach para iterar a través de la lista de productos y agregar cada uno al DOM. Para cada producto, se crea un nuevo elemento div con la clase producto, se establece su contenido con el HTML correspondiente y se agrega al elemento galeria. La ruta a la imagen se construye utilizando la carpeta uploads y el nombre de la imagen del producto.

jose fernandez

hazme el javascript completo del anteriot

2 / 2

Claro, aquí te dejo el código completo:

javascript

Copy code

const form = document.querySelector("#form-buscar");

const inputBuscar = document.querySelector("#input-buscar");

const galeria = document.querySelector(".galeria");

let paginaActual = 1;

let nombreBuscar = "";

// Función para cargar los productos

const cargarProductos = async () => {

galeria.innerHTML = "Cargando productos...";

// Construir la URL de la API

let url = `productos.php?pagina=${paginaActual}`;

// Agregar el parámetro de búsqueda si se especifica un nombre

if (nombreBuscar) {

url += `&buscar=${nombreBuscar}`;

}

// Hacer la solicitud a la API

const respuesta = await fetch(url);

const productos = await respuesta.json();

// Limpiar la galería

galeria.innerHTML = "";

// Agregar los productos al DOM

jose fernandez

function mostrarProductos() { hazlo de nuevo

Claro, aquí te dejo el código completo:

javascript

Copy code

const form = document.querySelector("#form-buscar");

const inputBuscar = document.querySelector("#input-buscar");

const galeria = document.querySelector(".galeria");

let paginaActual = 1;

let nombreBuscar = "";

// Función para cargar los productos

const cargarProductos = async () => {

galeria.innerHTML = "Cargando productos...";

// Construir la URL de la API

let url = `productos.php?pagina=${paginaActual}`;

// Agregar el parámetro de búsqueda si se especifica un nombre

if (nombreBuscar) {

url += `&buscar=${nombreBuscar}`;

}

// Hacer la solicitud a la API

const respuesta = await fetch(url);

const productos = await respuesta.json();

// Limpiar la galería

galeria.innerHTML = "";

// Agregar los productos al DOM

productos.forEach(producto => {

const div = document.createElement("div");

div.classList.add("producto");

div.innerHTML = `

<h3>${producto.nombre}</h3>

<p class="precio">$${producto.precio}</p>

galeria.appendChild(div);

});

};

// Función para actualizar la página

const actualizarPagina = () => {

cargarProductos();

mostrarPaginacion();

};

// Función para mostrar la paginación

const mostrarPaginacion = () => {

const paginacion = document.querySelector(".paginacion");

paginacion.innerHTML = "";

// Mostrar el botón "Anterior" si no estamos en la primera página

if (paginaActual > 1) {

const btnAnterior = document.createElement("button");

btnAnterior.innerText = "Anterior";

btnAnterior.addEventListener("click", () => {

paginaActual--;

actualizarPagina();

});

paginacion.appendChild(btnAnterior);

}

// Mostrar los botones de página

for (let i = 1; i <= 5; i++) {

const btnPagina = document.createElement("button");

btnPagina.innerText = paginaActual + i - 3;

btnPagina.disabled = (paginaActual + i - 3) === paginaActual;

btnPagina.addEventListener("click", () => {

paginaActual = paginaActual + i - 3;

actualizarPagina();

});

paginacion.appendChild(btnPagina);

}

// Mostrar el botón "Siguiente" si no estamos en la última página

if (paginaActual < 20) {

const btnSiguiente = document.createElement("button");

btnSiguiente.innerText = "Siguiente";

btnSiguiente.addEventListener("click", () => {

paginaActual++;

actualizarPagina();

});

paginacion.appendChild(btnSiguiente);

}

};

// Escuchar el evento "submit" del formulario de búsqueda

form.addEventListener("submit", event => {

event.preventDefault();

nombreBuscar = inputBuscar.value.trim();

paginaActual = 1;

actualizarPagina();

});

// Cargar los productos al cargar la página

cargarProductos();

mostrarPaginacion();

Este código utiliza async/await para hacer una solicitud a la API y obtener los datos de los productos. Luego, utiliza el método forEach para iterar a través de la lista de productos y agregar cada uno al DOM. También incluye una función para actualizar la página y mostrar la paginación, y se suscribe al evento "submit" del formulario de

miscodesdelchatgpt.blogspot.com

GALERIA DE PRODUCTOS CON FLEXBOX PHP MYSQL PDO API JSON FETCH POST

Comentarios

Publicar un comentario

Entradas populares de este blog

INSERTAR Y UPDATE FECHA CON PHP MYSQL EN FORMULARIO METODO POST CON JQUERY ETIQUETA DATE

Copia de Seguridad de Archivo MS Access (.mdb) a Pendrive con VB6

CONVERTIR IMÁGEN JPG O PNG A WEBP CON PHP DE FORMA SIMPLE