cargar tabla de mongodb con php 2024
Tienes razón, faltaba agregar la conexión a la base de datos en el código de la API.
Aquí te muestro el código completo con la conexión a la base de datos:
buscar.php:
PHP
<?php
// Reemplazar con la información de su base de datos
$uri = "mongodb://localhost:27017";
$dbName = "tienda";
$collectionName = "productos";
// Crear el cliente
$client = new MongoDB\Client($uri);
// Seleccionar la base de datos y la colección
$db = $client->$dbName;
$collection = $db->$collectionName;
// Obtener los datos de la colección
$cursor = $collection->find([]);
// Convertir el cursor a un array de objetos JSON
$resultados = [];
foreach ($cursor as $document) {
$resultados[] = [
'_id' => $document['_id'],
'nombre' => $document['nombre'],
'precio' => $document['precio'],
'foto' => $document['foto'],
];
}
// Enviar los datos como JSON
echo json_encode($resultados);
?>
--------------------------------
index.html:
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Productos</title>
</head>
<body>
<table>
<thead>
<tr>
<th>_id</th>
<th>Nombre</th>
<th>Precio</th>
<th>Foto</th>
</tr>
</thead>
<tbody id="tabla-productos"></tbody>
</table>
<script>
const tablaProductos = document.querySelector("#tabla-productos");
fetch("buscar.php", {
method: "POST",
})
.then(response => response.json())
.then(productos => {
productos.forEach(producto => {
const fila = document.createElement("tr");
const celdaId = document.createElement("td");
const celdaNombre = document.createElement("td");
const celdaPrecio = document.createElement("td");
const celdaFoto = document.createElement("td");
celdaId.textContent = producto._id;
celdaNombre.textContent = producto.nombre;
celdaPrecio.textContent = producto.precio;
celdaFoto.innerHTML = `<img src="${producto.foto}" alt="${producto.nombre}">`;
fila.appendChild(celdaId);
fila.appendChild(celdaNombre);
fila.appendChild(celdaPrecio);
fila.appendChild(celdaFoto);
tablaProductos.appendChild(fila);
});
});
</script>
</body>
</html>
--------------------------------------------
Agregar un buscador por nombre a la API
buscar.php:
PHP
<?php
// Reemplazar con la información de su base de datos
$uri = "mongodb://localhost:27017";
$dbName = "tienda";
$collectionName = "productos";
// Crear el cliente
$client = new MongoDB\Client($uri);
// Seleccionar la base de datos y la colección
$db = $client->$dbName;
$collection = $db->$collectionName;
// Obtener el nombre del producto a buscar
$nombre = $_POST['nombre'];
// Buscar el producto por nombre
$cursor = $collection->find([
'nombre' => $nombre,
]);
// Convertir el cursor a un array de objetos JSON
$resultados = [];
foreach ($cursor as $document) {
$resultados[] = [
'_id' => $document['_id'],
'nombre' => $document['nombre'],
'precio' => $document['precio'],
'foto' => $document['foto'],
];
}
// Enviar los datos como JSON
echo json_encode($resultados);
?>
Usa el código con precaución.
Explicación:
Se ha agregado la variable $nombre para obtener el nombre del producto a buscar.
Se ha utilizado la variable $nombre en el método find para filtrar los productos por nombre.
El resto del código se mantiene igual.
index.html:
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Productos</title>
</head>
<body>
<input type="text" id="nombre-producto" placeholder="Nombre del producto">
<button id="btn-buscar">Buscar</button>
<table>
<thead>
<tr>
<th>_id</th>
<th>Nombre</th>
<th>Precio</th>
<th>Foto</th>
</tr>
</thead>
<tbody id="tabla-productos"></tbody>
</table>
<script>
const inputNombreProducto = document.querySelector("#nombre-producto");
const btnBuscar = document.querySelector("#btn-buscar");
const tablaProductos = document.querySelector("#tabla-productos");
btnBuscar.addEventListener("click", () => {
const nombre = inputNombreProducto.value;
fetch("buscar.php", {
method: "POST",
body: JSON.stringify({
nombre,
}),
})
.then(response => response.json())
.then(productos => {
tablaProductos.innerHTML = "";
productos.forEach(producto => {
const fila = document.createElement("tr");
const celdaId = document.createElement("td");
const celdaNombre = document.createElement("td");
const celdaPrecio = document.createElement("td");
const celdaFoto = document.createElement("td");
celdaId.textContent = producto._id;
celdaNombre.textContent = producto.nombre;
celdaPrecio.textContent = producto.precio;
celdaFoto.innerHTML = `<img src="${producto.foto}" alt="${producto.nombre}">`;
fila.appendChild(celdaId);
fila.appendChild(celdaNombre);
fila.appendChild(celdaPrecio);
fila.appendChild(celdaFoto);
tablaProductos.appendChild(fila);
});
});
});
</script>
</body>
</html>
Usa el código con precaución.
Explicación:
Se ha agregado un campo de texto input con el id nombre-producto para que el usuario pueda ingresar el nombre del producto a buscar.
Se ha agregado un botón button con el id btn-buscar para realizar la búsqueda.
Se ha modificado el código JavaScript para obtener el nombre del producto del campo inputNombreProducto.
Se ha modificado el código JavaScript para enviar el nombre del producto a la API buscar.php mediante fetch.
Se ha modificado el código JavaScript para actualizar la tabla con los resultados de la búsqueda.
Prueba:
Guarda los archivos index.html y buscar.php en tu servidor.
Abre el archivo index.html en un navegador web.
Ingresa el nombre del producto que deseas buscar en el campo de texto inputNombreProducto.
Haz clic en el botón btn-buscar.
Deberías ver la tabla actualizada con los resultados de la búsqueda.
Solución a tu problema:
Este código te permite agregar un buscador por nombre a la API. Puedes modificar
----------------------------------
Buscar en el input de forma dinámica con expresiones regulares
buscar.php:
PHP
<?php
// Reemplazar con la información de su base de datos
$uri = "mongodb://localhost:27017";
$dbName = "tienda";
$collectionName = "productos";
// Crear el cliente
$client = new MongoDB\Client($uri);
// Seleccionar la base de datos y la colección
$db = $client->$dbName;
$collection = $db->$collectionName;
// Obtener el nombre del producto a buscar
$nombre = $_POST['nombre'];
// Buscar el producto por nombre
$cursor = $collection->find([
'nombre' => [
'$regex' => $nombre,
'$options' => 'i',
],
]);
// Convertir el cursor a un array de objetos JSON
$resultados = [];
foreach ($cursor as $document) {
$resultados[] = [
'_id' => $document['_id'],
'nombre' => $document['nombre'],
'precio' => $document['precio'],
'foto' => $document['foto'],
];
}
// Enviar los datos como JSON
echo json_encode($resultados);
?>
Usa el código con precaución.
Explicación:
Se ha modificado la búsqueda para utilizar expresiones regulares.
Se utiliza la opción '$regex' para especificar la expresión regular.
Se utiliza la opción '$options' para especificar que la búsqueda no sea sensible a mayúsculas y minúsculas.
index.html:
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Productos</title>
</head>
<body>
<input type="text" id="nombre" placeholder="Nombre del producto">
<table>
<thead>
<tr>
<th>_id</th>
<th>Nombre</th>
<th>Precio</th>
<th>Foto</th>
</tr>
</thead>
<tbody id="tabla-productos"></tbody>
</table>
<script>
const inputNombre = document.getElementById("nombre");
const tablaProductos = document.querySelector("#tabla-productos");
inputNombre.addEventListener("keyup", function() {
const nombre = this.value.trim();
fetch("buscar.php", {
method: "POST",
body: JSON.stringify({
nombre,
}),
})
.then(response => response.json())
.then(productos => {
tablaProductos.innerHTML = "";
productos.forEach(producto => {
const fila = document.createElement("tr");
const celdaId = document.createElement("td");
const celdaNombre = document.createElement("td");
const celdaPrecio = document.createElement("td");
const celdaFoto = document.createElement("td");
celdaId.textContent = producto._id;
celdaNombre.textContent = producto.nombre;
celdaPrecio.textContent = producto.precio;
celdaFoto.innerHTML = `<img src="${producto.foto}" alt="${producto.nombre}">`;
fila.appendChild(celdaId);
fila.appendChild(celdaNombre);
fila.appendChild(celdaPrecio);
fila.appendChild(celdaFoto);
tablaProductos.appendChild(fila);
});
});
});
</script>
</body>
</html>
Usa el código con precaución.
Explicación:
Se ha modificado el código JavaScript para obtener el nombre del producto del campo inputNombre cada vez que se modifica.
Se ha modificado el código JavaScript para enviar el nombre del producto a la API buscar.php mediante fetch.
Se ha modificado el código JavaScript para actualizar la tabla con los resultados de la búsqueda.
Prueba:
Guarda los archivos index.html y buscar.php en tu servidor.
Abre el archivo index.html en un navegador web.
Comienza a escribir el nombre del producto que deseas buscar en el campo de texto inputNombre.
Deberías ver la tabla actualizada con los resultados de la búsqueda a medida que escribes.
Solución a tu problema:
Este código te permite buscar en el input de forma dinámica con expresiones regulares. Puedes modificar el código para
imagen de perfil
que hace en el codigo '$regex' => $nombre,
'$options' => 'i', explicame
Mostrar versiones
Explicación de '$regex' => $nombre, '$options' => 'i'
En el código PHP que proporcionaste, la línea:
PHP
['nombre' => [
'$regex' => $nombre,
'$options' => 'i',
]]
Usa el código con precaución.
se utiliza dentro del método find para realizar una búsqueda en la colección de MongoDB. Analicemos cada parte:
1. '$regex' => $nombre:
'$regex' es un operador de MongoDB que se utiliza para realizar búsquedas con expresiones regulares.
$nombre es una variable que contiene el nombre del producto que se desea buscar.
En conjunto, esta parte indica que se busca un documento en la colección donde el campo nombre coincida con la expresión regular que se encuentra en la variable $nombre.
2. '$options' => 'i':
'$options' es una variable que permite especificar opciones para la búsqueda con expresiones regulares.
'i' es una opción que indica que la búsqueda no debe ser sensible a mayúsculas y minúsculas.
En conjunto, esta parte indica que la búsqueda no debe diferenciar entre mayúsculas y minúsculas al comparar el nombre del producto con la expresión regular.
Ejemplo:
Si la variable $nombre contiene el valor "producto" y la opción 'i' está activada, la búsqueda encontrará documentos que coincidan con cualquiera de las siguientes expresiones:
"producto"
"Producto"
"PRODUCTO"
"prodUcto"
En resumen:
'$regex' => $nombre indica que se busca un documento donde el campo nombre coincide con la expresión regular en la variable $nombre.
'$options' => 'i' indica que la búsqueda no debe ser sensible a mayúsculas y minúsculas.
Recursos adicionales:
Documentación del operador $regex de MongoDB: https://www.mongodb.com/docs/manual/reference/operator/query/regex/
Documentación de la opción '$options' de MongoDB: https://www.mongodb.com/docs/manual/reference/configuration-options/
Espero que esta explicación te haya sido útil. No dudes en preguntar si tienes más dudas.
///////////////////////HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Editar producto</title>
</head>
<body>
<input type="text" id="id-producto" placeholder="ID del producto">
<button id="btn-buscar">Buscar</button>
<form action="editar.php" method="post">
<input type="hidden" id="_id" name="_id">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">
<label for="precio">Precio:</label>
<input type="number" id="precio" name="precio">
<label for="foto">Foto:</label>
<input type="file" id="foto" name="foto">
<button type="submit">Editar</button>
</form>
<script>
const inputIdProducto = document.querySelector("#id-producto");
const btnBuscar = document.querySelector("#btn-buscar");
const inputId = document.querySelector("#_id");
const inputNombre = document.querySelector("#nombre");
const inputPrecio = document.querySelector("#precio");
btnBuscar.addEventListener("click", () => {
const id = inputIdProducto.value.trim();
fetch("buscar.php", {
method: "POST",
body: JSON.stringify({
_id: id,
}),
})
.then(response => response.json())
.then(producto => {
if (producto) {
inputId.value = producto._id;
inputNombre.value = producto.nombre;
inputPrecio.value = producto.precio;
} else {
alert("No se encontró ningún producto con ese ID");
}
});
});
</script>
</body>
</html>
<?php
// Reemplazar con la información de su base de datos
$uri = "mongodb://localhost:27017";
$dbName = "tienda";
$collectionName = "productos";
// Crear el cliente
$client = new MongoDB\Client($uri);
// Seleccionar la base de datos y la colección
$db = $client->$dbName;
$collection = $db->$collectionName;
// Obtener el _id del producto a buscar
$id = $_POST['_id'];
// Buscar el producto por _id
$cursor = $collection->find(['_id' => new MongoDB\BSON\ObjectId($id)]);
// Convertir el cursor a un array de objetos JSON
$resultados = [];
foreach ($cursor as $document) {
$resultados[] = [
'_id' => $document['_id'],
'nombre' => $document['nombre'],
'precio' => $document['precio'],
'foto' => $document['foto'],
];
}
// Enviar los datos como JSON
echo json_encode($resultados);
?>Explicación:
Se ha modificado la API buscar.php para utilizar un ciclo foreach.
El ciclo foreach itera sobre el cursor y convierte cada documento a un array JSON.
Se envía el array JSON como respuesta.
Prueba:
Guarda el archivo buscar.php en tu servidor.
Modifica el código JavaScript en tu página web para utilizar la API buscar.php.
Ingresa el _id del producto que deseas buscar.
Deberías ver la información del producto como respuesta JSON.
Solución a tu problema:
Este código te permite convertir multiples documentos MongoDB a un array JSON en la API.
Nota:
Asegúrate de reemplazar la información de la base de datos con la tuya.
Espero que esta información te haya sido útil. No dudes en preguntar si tienes más dudas.
//////////////// formulario editar //////API para editar un producto con foto
editar.php:
PHP
<?php
// Reemplazar con la información de su base de datos
$uri = "mongodb://localhost:27017";
$dbName = "tienda";
$collectionName = "productos";
// Crear el cliente
$client = new MongoDB\Client($uri);
// Seleccionar la base de datos y la colección
$db = $client->$dbName;
$collection = $db->$collectionName;
// Obtener los datos del formulario
$id = $_POST['_id'];
$nombre = $_POST['nombre'];
$precio = $_POST['precio'];
// Si se ha subido un archivo
if (isset($_FILES['foto']) && $_FILES['foto']['error'] === 0) {
// Validar el archivo
$extensionesPermitidas = ['jpeg', 'jpg', 'png'];
$extension = pathinfo($_FILES['foto']['name'], PATHINFO_EXTENSION);
if (!in_array($extension, $extensionesPermitidas)) {
echo json_encode(['success' => false, 'message' => 'Error: La extensión del archivo no es válida.']);
exit;
}
// Guardar el archivo
$rutaArchivo = "uploads/" . uniqid() . "." . $extension;
move_uploaded_file($_FILES['foto']['tmp_name'], $rutaArchivo);
// Actualizar el producto con la ruta del archivo
$producto = $collection->updateOne(
['_id' => new MongoDB\BSON\ObjectId($id)],
['$set' => ['nombre' => $nombre, 'precio' => $precio, 'foto' => $rutaArchivo]]
);
} else {
// Actualizar el producto sin la ruta del archivo
$producto = $collection->updateOne(
['_id' => new MongoDB\BSON\ObjectId($id)],
['$set' => ['nombre' => $nombre, 'precio' => $precio]]
);
}
// Si se actualizó el producto
if ($producto->getModifiedCount() > 0) {
echo json_encode(['success' => true, 'message' => 'Producto actualizado correctamente.']);
} else {
echo json_encode(['success' => false, 'message' => 'Error al actualizar el producto.']);
}
?>
Para enviar la foto con Fetch, debes agregarla al objeto FormData junto con los demás campos del formulario.
index.html:
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Editar producto</title>
</head>
<body>
<form action="editar.php" method="post">
<input type="hidden" id="_id" name="_id">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">
<label for="precio">Precio:</label>
<input type="number" id="precio" name="precio">
<label for="foto">Foto:</label>
<input type="file" id="foto" name="foto">
<button type="submit" id="btn-actualizar">Actualizar</button>
</form>
<script>
const inputId = document.querySelector("#_id");
const inputNombre = document.querySelector("#nombre");
const inputPrecio = document.querySelector("#precio");
const inputFoto = document.querySelector("#foto");
const btnActualizar = document.querySelector("#btn-actualizar");
btnActualizar.addEventListener("click", () => {
const id = inputId.value.trim();
const nombre = inputNombre.value.trim();
const precio = inputPrecio.value.trim();
const foto = inputFoto.files[0];
const formData = new FormData();
formData.append("_id", id);
formData.append("nombre", nombre);
formData.append("precio", precio);
formData.append("foto", foto);
fetch("editar.php", {
method: "POST",
body: formData,
})
.then(response => response.json())
.then(data => {
if (data.success) {
// Mostrar el mensaje de la API
alert(data.message);
} else {
// Mostrar el mensaje de la API
alert(data.message);
}
});
});
</script>
</body>
</html>
Mostrar mensajes de éxito o error
Para mostrar mensajes de éxito o error al actualizar el producto, puedes usar las siguientes opciones:
Opción 1: Alertas de JavaScript
JavaScript
if (data.success) {
alert("Producto actualizado correctamente.");
} else {
alert("Error al actualizar el producto.");
}
Usa el código con precaución.
Opción 2: Elementos HTML
HTML
<div id="mensaje-exito"></div>
<div id="mensaje-error"></div>
<script>
if (data.success) {
document.getElementById("mensaje-exito").innerHTML = "Producto actualizado correctamente.";
document.getElementById("mensaje-error").innerHTML = "";
} else {
document.getElementById("mensaje-exito").innerHTML = "";
document.getElementById("mensaje-error").innerHTML = "Error al actualizar el producto.";
}
</script>
Usa el código con precaución.
Opción 3: SweetAlert2
JavaScript
if (data.success) {
Swal.fire({
title: "Producto actualizado",
text: "El producto se ha actualizado correctamente.",
icon: "success",
});
} else {
Swal.fire({
title: "Error al actualizar",
text: "Ha ocurrido un error al actualizar el producto.",
icon: "error",
});
}
Usa el código con precaución.
Explicación:
Las opciones anteriores muestran un mensaje de éxito o error al usuario.
Puedes elegir la opción que mejor se adapte a tu proyecto.
Nota:
Puedes personalizar los mensajes y el estilo de las alertas según tus necesidades.
Espero que esta información te haya sido útil. No dudes en preguntar si tienes más dudas.///////////insertar nuevo/////////////////////ormulario y API para insertar un nuevo producto con fotoFormulario:
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Agregar producto</title>
</head>
<body>
<form action="insertar.php" method="post" enctype="multipart/form-data">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">
<label for="precio">Precio:</label>
<input type="number" id="precio" name="precio">
<label for="foto">Foto:</label>
<input type="file" id="foto" name="foto">
<button type="submit" id="btn-guardar">Guardar</button>
</form>
<script>
const inputNombre = document.querySelector("#nombre");
const inputPrecio = document.querySelector("#precio");
const inputFoto = document.querySelector("#foto");
const btnGuardar = document.querySelector("#btn-guardar");
btnGuardar.addEventListener("click", () => {
const nombre = inputNombre.value.trim();
const precio = inputPrecio.value.trim();
const foto = inputFoto.files[0];
const formData = new FormData();
formData.append("nombre", nombre);
formData.append("precio", precio);
formData.append("foto", foto);
fetch("insertar.php", {
method: "POST",
body: formData,
})
.then(response => response.json())
.then(data => {
if (data.success) {
// Mostrar mensaje de éxito
} else {
// Mostrar mensaje de error
}
});
});
</script>
</body>
</html>
Usa el código con precaución.
API:
PHP
<?php
// Reemplazar con la información de su base de datos
$uri = "mongodb://localhost:27017";
$dbName = "tienda";
$collectionName = "productos";
// Crear el cliente
$client = new MongoDB\Client($uri);
// Seleccionar la base de datos y la colección
$db = $client->$dbName;
$collection = $db->$collectionName;
// Obtener los datos del formulario
$nombre = $_POST['nombre'];
$precio = $_POST['precio'];
// Si se ha subido un archivo
if (isset($_FILES['foto']) && $_FILES['foto']['error'] === 0) {
// Validar el archivo
$extensionesPermitidas = ['jpeg', 'jpg', 'png'];
$extension = pathinfo($_FILES['foto']['name'], PATHINFO_EXTENSION);
if (!in_array($extension, $extensionesPermitidas)) {
echo json_encode(['success' => false, 'message' => 'Error: La extensión del archivo no es válida.']);
exit;
}
// Guardar el archivo
$rutaArchivo = "uploads/" . uniqid() . "." . $extension;
move_uploaded_file($_FILES['foto']['tmp_name'], $rutaArchivo);
// Insertar el producto con la ruta del archivo
$producto = $collection->insertOne([
'nombre' => $nombre,
'precio' => $precio,
'foto' => $rutaArchivo,
]);
} else {
// Insertar el producto sin la ruta del archivo
$producto = $collection->insertOne([
'nombre' => $nombre,
'precio' => $precio,
]);
}
// Si se insertó el producto
if ($producto->getInsertedCount() > 0) {
echo json_encode(['success' => true, 'message' => 'Producto insertado correctamente.']);
} else {
echo json_encode(['success' => false, 'message' => 'Error al insertar el producto.']);
}
?>
Usa el código con precaución.
Explicación:
El formulario permite al usuario ingresar el nombre, precio y foto del producto.
El API insertar.php se encarga de:
Validar la extensión del archivo si se ha subido uno nuevo.
Guardar el archivo en el servidor.
Insertar el producto en la base de datos con la ruta del archivo si se ha subido uno nuevo.
Enviar un mensaje de éxito o error al cliente.
Prueba:
Guarda los archivos index.html e `insertar
////////////////
Eliminar.php:
PHP
<?php
// Reemplazar con la información de su base de datos
$uri = "mongodb://localhost:27017";
$dbName = "tienda";
$collectionName = "productos";
// Crear el cliente
$client = new MongoDB\Client($uri);
// Seleccionar la base de datos y la colección
$db = $client->$dbName;
$collection = $db->$collectionName;
// Obtener el ID del producto
$id = $_POST['_id'];
// Eliminar el producto
$producto = $collection->deleteOne(['_id' => new MongoDB\BSON\ObjectId($id)]);
// Si se eliminó el producto
if ($producto->getDeletedCount() > 0) {
echo json_encode(['success' => true]);
} else {
echo json_encode(['success' => false]);
}
?>
Usa el código con precaución.
Prueba:
Guarda los archivos index.html, productos.php, y eliminar.php en tu servidor.
Abre el archivo index.html en un navegador web.
Deberías ver una tabla con los productos de tu base de datos.
Haz clic en el botón Eliminar de un producto para eliminarlo.
Espero que esta información te haya sido útil. No dudes en preguntar si tienes más dudas.
imagen de perfil
hacer eliminar con fetch con evento click en index.html no usar async
Mostrar versiones
Eliminar producto con Fetch y evento click (sin async)
index.html:
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Productos</title>
</head>
<body>
<table id="productos">
<thead>
<tr>
<th>Nombre</th>
<th>Precio</th>
<th>Foto</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
const tablaProductos = document.querySelector("#productos");
// Función para obtener los productos
const obtenerProductos = () => {
fetch("productos.php")
.then(response => response.json())
.then(data => {
if (data.success) {
const productos = data.productos;
// Mostrar los productos en la tabla
for (const producto of productos) {
const fila = document.createElement("tr");
fila.innerHTML = `
<td>${producto.nombre}</td>
<td>${producto.precio}</td>
<td><img src="${producto.foto}" width="100"></td>
<td>
<button type="button" class="btn-eliminar" data-id="${producto._id}">Eliminar</button>
</td>
`;
tablaProductos.tBodies[0].appendChild(fila);
// Agregar evento click al botón eliminar
const btnEliminar = fila.querySelector(".btn-eliminar");
btnEliminar.addEventListener("click", eliminarProducto);
}
} else {
console.error("Error al obtener los productos");
}
});
};
// Función para eliminar un producto
const eliminarProducto = (event) => {
const id = event.target.dataset.id;
const formData = new FormData();
formData.append("_id", id);
fetch("eliminar.php", {
method: "POST",
body: formData,
})
.then(response => response.json())
.then(data => {
if (data.success) {
// Eliminar la fila de la tabla
event.target.parentNode.parentNode.remove();
} else {
console.error("Error al eliminar el producto");
}
});
};
obtenerProductos();
</script>
</body>
</html>
productos.php
PHP
<?php
// Reemplazar con la información de su base de datos
$uri = "mongodb://localhost:27017";
$dbName = "tienda";
$collectionName = "productos";
// Crear el cliente
$client = new MongoDB\Client($uri);
// Seleccionar la base de datos y la colección
$db = $client->$dbName;
$collection = $db->$collectionName;
// Buscar todos los productos
$cursor = $collection->find();
// Recorrer los resultados y construir un array
$resultados = [];
foreach ($cursor as $document) {
$resultados[] = [
'_id' => $document['_id'],
'nombre' => $document['nombre'],
'precio' => $document['precio'],
'foto' => $document['foto'],
];
}
// Enviar los productos al cliente
echo json_encode(['success' => true, 'productos' => $resultados]);
?>
Comentarios
Publicar un comentario