Importar datos en masa desde Excel es una tarea común en muchas aplicaciones, especialmente para administrar inventarios o catálogos de productos. En este tutorial, te mostraremos cómo importar productos desde un archivo Excel a una base de datos MySQL utilizando PhpSpreadsheet, Bootstrap 5 para la interfaz y Ajax para hacer el proceso más fluido y rápido.
Requisitos previos
- PhpSpreadsheet: Una potente librería de PHP para manipular archivos de Excel.
- Bootstrap 5: Utilizado para el diseño y la ventana modal.
- Ajax: Para enviar el archivo de Excel al servidor y actualizar los datos en la página sin recargar.
Paso 1: Configuración del Entorno y Librerías Necesarias
Para usar PhpSpreadsheet, primero debes instalarlo a través de Composer. Si aún no lo tienes, instala Composer en tu entorno y ejecuta:
|
1 |
composer require phpoffice/phpspreadsheet |
Paso 2: Crear la Conexión a la Base de Datos y la Tabla de Productos
Crea un archivo conexion.php para conectarte a tu base de datos y generar una tabla productos donde guardaremos los datos importados. Ajusta los datos de conexión según sea necesario.
Archivo: conexion.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<?php $host = 'localhost';//Servidor web $db = '';//Nombre de la base de datos $user = '';//Usuario de base de datos $pass = '';// Contaraseña de usuario de base de datos // Crear conexión $con = new mysqli($host, $user, $pass, $db); // Verificar conexión if ($con->connect_error) { die("Conexión fallida: " . $con->connect_error); } // Crear tabla productos si no existe $sql = "CREATE TABLE IF NOT EXISTS productos ( id INT AUTO_INCREMENT PRIMARY KEY, nombre_producto VARCHAR(255) NOT NULL, marca VARCHAR(50) NOT NULL, codigo VARCHAR(50) NOT NULL, precio DECIMAL(10, 2) NOT NULL ) ENGINE=InnoDB;"; $con->query($sql); // Eliminamos el echo ?> |
Paso 3: Crear el Formulario HTML con Bootstrap 5
En index.html, vamos a crear una interfaz básica con Bootstrap. Incluirá un botón para abrir una ventana modal desde donde seleccionaremos el archivo Excel a importar. También, agregaremos una tabla para mostrar los productos cargados.
Archivo: index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Importar Productos</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container mt-5"> <h2>Importar Productos desde Excel</h2> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#importModal">Importar</button> <!-- Tabla para mostrar productos importados --> <div class="mt-4"> <h4>Productos Importados</h4> <table class="table table-bordered" id="productosTable"> <thead> <tr> <th>Nombre del Producto</th> <th>Marca</th> <th>Código</th> <th>Precio</th> </tr> </thead> <tbody> <!-- Aquí se insertarán los productos importados --> </tbody> </table> </div> </div> <!-- Modal para subir archivo Excel --> <div class="modal fade" id="importModal" tabindex="-1" aria-labelledby="importModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="importModalLabel">Cargar Archivo Excel</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <form id="uploadForm" enctype="multipart/form-data"> <div class="mb-3"> <label for="excelFile" class="form-label">Seleccionar archivo Excel</label> <input type="file" class="form-control" id="excelFile" name="excelFile" accept=".xlsx, .xls" required> </div> <button type="button" class="btn btn-primary" onclick="importExcel()">Subir e Importar</button> </form> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script src="script.js"></script> </body> </html> |
Paso 4: JavaScript para Enviar el Archivo Excel y Cargar los Productos
En script.js añadimos funciones JavaScript para enviar el archivo al servidor mediante Fetch API. También creamos una función que cargará los productos en la tabla después de una importación exitosa.
Archivo: script.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
function importExcel() { const formData = new FormData(document.getElementById('uploadForm')); fetch('ajax/importacion.php', { method: 'POST', body: formData }) .then(response => response.json()) .then(data => { if (data.success) { alert('Productos importados exitosamente'); cargarProductos(); // Llamamos a la función para cargar los productos en la tabla } else { alert('Error al importar los productos: ' + data.message); } }) .catch(error => console.error('Error:', error)); } function cargarProductos() { fetch('ajax/obtener_productos.php') .then(response => response.json()) .then(data => { const tbody = document.getElementById('productosTable').querySelector('tbody'); tbody.innerHTML = ''; // Limpiamos la tabla antes de actualizar data.forEach(producto => { const row = document.createElement('tr'); row.innerHTML = ` <td>${producto.nombre_producto}</td> <td>${producto.marca}</td> <td>${producto.codigo}</td> <td>${producto.precio}</td> `; tbody.appendChild(row); }); }) .catch(error => console.error('Error al cargar productos:', error)); } // Llamar a cargarProductos() cuando la página cargue para mostrar productos existentes document.addEventListener('DOMContentLoaded', cargarProductos); |
Paso 5: Importar los Datos desde Excel en el Servidor
En importacion.php, utilizamos PhpSpreadsheet para procesar el archivo Excel y guardar los datos en la tabla productos.
Archivo: ajax/importacion.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<?php require '../conexion.php'; require '../vendor/autoload.php'; use PhpOffice\PhpSpreadsheet\IOFactory; use PhpOffice\PhpSpreadsheet\Spreadsheet; $response = ['success' => false, 'message' => '']; if (isset($_FILES['excelFile']) && $_FILES['excelFile']['error'] == 0) { $filePath = $_FILES['excelFile']['tmp_name']; try { $spreadsheet = IOFactory::load($filePath); $sheet = $spreadsheet->getActiveSheet(); $highestRow = $sheet->getHighestRow(); $highestColumn = $sheet->getHighestColumn(); // Conectar a la base de datos require '../conexion.php'; for ($row = 2; $row <= $highestRow; $row++) { $nombreProducto = $sheet->getCell("A$row")->getValue(); $marca = $sheet->getCell("B$row")->getValue(); $codigo = $sheet->getCell("C$row")->getValue(); $precio = $sheet->getCell("D$row")->getValue(); $stmt = $con->prepare("INSERT INTO productos (nombre_producto, marca, codigo, precio) VALUES (?, ?, ?, ?)"); $stmt->bind_param("sssd", $nombreProducto, $marca, $codigo, $precio); $stmt->execute(); } $response['success'] = true; $response['message'] = "Productos importados exitosamente"; } catch (Exception $e) { $response['message'] = "Error al procesar el archivo: " . $e->getMessage(); } } else { $response['message'] = "Error al subir el archivo"; } echo json_encode($response); ?> |
Paso 6: Obtener los Productos para Mostrar en la Tabla
Por último, creamos obtener_productos.php, que consultará la base de datos y devolverá los productos en formato JSON para mostrarlos en la tabla.
Archivo: ajax/obtener_productos.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?php require '../conexion.php'; $response = []; $sql = "SELECT nombre_producto, codigo, precio, marca FROM productos"; $result = $con->query($sql); if ($result->num_rows > 0) { while ($row = $result->fetch_assoc()) { $response[] = $row; } } header('Content-Type: application/json'); echo json_encode($response); ?> |
Conclusión
¡Y eso es todo! Ahora tienes una página de importación que permite a los usuarios cargar productos desde un archivo Excel y ver los datos recién importados en una tabla dinámica. Con este enfoque, optimizas la administración de datos y haces que el proceso sea sencillo y ágil.
Al finalizar este tutorial, es crucial recordar que respetar la estructura del archivo Excel es fundamental para que el proceso de importación funcione sin problemas.
