Conectar Form a una DB con XAMPP

En construcción, perdón si hay errores

En este tutorial aprenderás a crear un formulario HTML simple que se conectará a una base de datos MySQL utilizando PHP en un entorno XAMPP. A través de este proceso, los datos del formulario se enviarán mediante una solicitud fetch, y se almacenarán de forma segura en la base de datos.

Requisitos

Antes de comenzar, asegúrate de tener lo siguiente:

XAMPP instalado y configurado.
Apache y MySQL corriendo en XAMPP.
Una base de datos configurada en MySQL.

Paso 1: Crear la Base de Datos

Configuración de la Base de Datos en MySQL

Iniciar XAMPP: Abre el panel de control de XAMPP y asegúrate de que Apache y MySQL estén en ejecución.
Abrir phpMyAdmin: Desde el panel de control de XAMPP, abre phpMyAdmin.
Crear Base de Datos: En phpMyAdmin, crea una base de datos llamada test_db.
Crear Tabla: Dentro de la base de datos test_db, crea una tabla llamada usuarios con los siguientes campos:

-- db `test_db`
CREATE TABLE usuarios (
  id INT AUTO_INCREMENT PRIMARY KEY,
  nombre VARCHAR(100),
  correo VARCHAR(100)
);

¿Por qué usar phpMyAdmin?

phpMyAdmin es una herramienta web que te permite gestionar bases de datos MySQL de forma sencilla y visual. Es útil para crear y modificar bases de datos y tablas sin necesidad de escribir comandos SQL manualmente. En este tutorial, lo utilizamos para facilitar la creación de la base de datos y la tabla.

Paso 2: Crear el Formulario HTML

El siguiente código crea un formulario HTML simple donde los usuarios pueden ingresar su nombre y correo electrónico:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Formulario de Registro</title>
</head>
<body>
  <h1>Formulario de Registro</h1>
  <form id="formulario">
    <label for="nombre">Nombre:</label>
    <input type="text" id="nombre" name="nombre" required>

    <label for="correo">Correo:</label>
    <input type="email" id="correo" name="correo" required>

    <button type="submit">Enviar</button>
  </form>

  <script src="script.js"></script>
</body>
</html>

Paso 3: Crear el Script JavaScript con `fetch`

En lugar de enviar el formulario de manera tradicional (con recarga de página), utilizaremos fetch para enviar los datos de manera asíncrona:

document.getElementById('formulario').addEventListener('submit', (e) => {
  e.preventDefault(); // Evitar el envío tradicional del formulario

  const datos = {
    nombre: document.getElementById('nombre').value,
    correo: document.getElementById('correo').value
  };

  fetch('procesar.php', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(datos), // Enviar los datos en formato JSON
  })
  .then(response => response.json())
  .then(data => {
    alert(data.success ? 'Datos enviados correctamente' : 'Hubo un error al enviar los datos');
  })
  .catch(error => console.error('Error:', error));
});

En este script, creamos un diccionario datos antes de enviarlo, lo que hace el código más limpio y fácil de modificar en el futuro si deseas agregar más parámetros al formulario.

¿Cómo agregar más parámetros al formulario?

Si deseas agregar más campos de tu db, solo necesitas agregar nuevos elementos <input> en el formulario HTML, luego asignarlos al diccionario datos en el script JavaScript y agregarlos al php. Por ejemplo, si agregas un campo de “teléfono”, solo tienes que hacer algo como:

<form id="formulario">
  <label for="nombre">Nombre:</label>
  <input type="text" id="nombre" name="nombre" required>

  <label for="correo">Correo:</label>
  <input type="email" id="correo" name="correo" required>


  <label for="telefono">Teléfono:</label>
  <input type="text" id="telefono" name="telefono">

  <button type="submit">Enviar</button>
</form>

document.getElementById('formulario').addEventListener('submit', (e) => {
  e.preventDefault(); // Evitar el envío tradicional del formulario

  const datos = {
    nombre: document.getElementById('nombre').value,
    correo: document.getElementById('correo').value,

    telefono: document.getElementById('telefono').value,
  };

  /* ... */
});

<?php
/* ... */
// Validar los datos

if (!isset($data['nombre'], $data['correo'], $data['telefono'])) {
  echo json_encode(['success' => false, 'error' => 'Faltan datos']);
  exit;
}

$nombre = $data['nombre'];
$correo = $data['correo'];
$telefono = $data['telefono'];

// Preparar la consulta para insertar los datos en la base de datos
//! En este ejemplo la tabla se llama `usuarios`, asegúrate de ajustarlo a tu caso
$stmt = $conn->prepare("INSERT INTO usuarios (nombre, correo, telefono) VALUES (?, ?, ?)");
$stmt->bind_param("ss", $nombre, $correo, $telefono);
/* ... */
?>

Paso 4: Crear el Script PHP para Procesar los Datos

El script PHP procesar.php recibe los datos enviados desde el formulario, los valida y los inserta en la base de datos MySQL. He mejorado la legibilidad del código y he hecho que sea lo más claro posible:

<?php
// Configuración de la conexión a la base de datos
$host = 'localhost'; // Host por defecto en XAMPP | Puedes cambiarlo a tu servidor, en workbench `127.0.0.1`
$user = 'root'; // Usuario por defecto en XAMPP
$password = ''; // Contraseña por defecto en XAMPP
$db = 'test_db';

// Crear la conexión
$conn = new mysqli($host, $user, $password, $db);

if ($conn->connect_error) die("Conexión fallida: " . $conn->connect_error);

// Recibir los datos del formulario
$data = json_decode(file_get_contents('php://input'), true);

// Validar los datos
if (!isset($data['nombre'], $data['correo'])) {
  echo json_encode(['success' => false, 'error' => 'Faltan datos']);
  exit;
}

$nombre = $data['nombre'];
$correo = $data['correo'];

// Preparar la consulta para insertar los datos en la base de datos
//! En este ejemplo la tabla se llama `usuarios`, asegúrate de ajustarlo a tu caso
$stmt = $conn->prepare("INSERT INTO usuarios (nombre, correo) VALUES (?, ?)");
$stmt->bind_param("ss", $nombre, $correo);

// Ejecutar la consulta y verificar si fue exitosa
if ($stmt->execute()) echo json_encode(['success' => true]);
else echo json_encode(['success' => false, 'error' => $stmt->error]);

// Cerrar la conexión
$stmt->close();
$conn->close();
?>

Este código se encarga de validar que los campos nombre y correo existan antes de proceder a la inserción en la base de datos. Además, mejora la seguridad y claridad del proceso de inserción usando prepared statements.

Errores comunes y soluciones

Error de Conexión a la Base de Datos: Verifica que MySQL esté corriendo en XAMPP y que las credenciales en procesar.php sean correctas.
Datos no Insertados: Asegúrate de que los nombres de los campos en el formulario coincidan con los utilizados en el script PHP.
Problemas con CORS: Si estás trabajando con dominios distintos, asegúrate de configurar correctamente los encabezados CORS en PHP.
El servidor MySQL se apaga: Si tienes problemas con MySQL en XAMPP, revisa el archivo de configuración y asegúrate de que no haya conflictos con otros servicios usando el puerto 3306.
Solución al error de cierre inesperado del servidor MySQL

Paso 5: Probar el Proyecto

Guarda los archivos HTML, JavaScript y PHP en la carpeta htdocs de tu instalación de XAMPP (por ejemplo, C:/xampp/htdocs/formulario).
Abre el navegador y navega a http://localhost/formulario/index.html.
Completa el formulario y presiona “Enviar”.
Si todo está configurado correctamente, los datos se guardarán en la base de datos y recibirás un mensaje de éxito.

Fin.