![[Reto] – Miniaplicación web con PHP, MySQLi y JavaScript (Sin POO)](https://laaventuradeaprender.com/wp-content/uploads/2026/03/0406ee2c-f553-451d-8d19-8fed5738a401-1.png)
Importante
Esta práctica está pensada para comprobar que el alumno tiene una base real en desarrollo web con PHP.
No se busca una aplicación compleja. Se busca una aplicación simple, funcional, bien organizada y bien explicada.
¿Qué vais a hacer?
En esta práctica vais a desarrollar una pequeña aplicación web con:
- una portada
- una página con formulario
- una página de listado
- una base de datos MySQL
- conexión con PHP usando
mysqli - validación del formulario con JavaScript
Además del código, tendréis que entregar una documentación paso a paso explicando todo el proceso.
Objetivo de la práctica
El objetivo es construir una miniaplicación que permita registrar alumnos en una base de datos.
Cada registro deberá incluir como mínimo:
- nombre
- apellidos
- curso
- edad
La aplicación deberá permitir:
- entrar en una portada,
- acceder a un formulario,
- validar los datos antes de enviarlos,
- guardar esos datos en MySQL,
- mostrar un listado con todos los registros guardados.
Qué debe tener la aplicación
Parte obligatoria
La aplicación debe incluir obligatoriamente:
- una portada (
index.php) - una página con formulario (
formulario.php) - una página que procese el guardado (
guardar.php) - una página de listado (
listar.php) - una conexión a base de datos (
conexion.php) - una validación con JavaScript (
script.js) - una base de datos MySQL con una tabla
- un archivo SQL con la creación de la base de datos y la tabla
Mejoras opcionales
Se valorará positivamente si añadís:
- programación orientada a objetos
- validación también en PHP
- sesiones
- login con contraseña
- uso de
password_hash() - consultas preparadas
- edición de registros
- borrado de registros
- mejor diseño con CSS
Guía paso a paso
Paso 1. Crear la carpeta del proyecto
Cread una carpeta para guardar todos los archivos de la práctica.
Estructura recomendada
practica_php_recuperacion/
│
├── index.php
├── formulario.php
├── guardar.php
├── listar.php
├── conexion.php
├── script.js
├── estilos.css
├── bbdd.sql
└── README.mdImportante
Aunque el proyecto sea pequeño, debéis mantener una estructura clara.
Un proyecto desordenado suele dar problemas y también dificulta explicar el trabajo.
Paso 2. Crear la base de datos
Antes de empezar con PHP, debéis crear la base de datos y la tabla donde se guardarán los datos.
Script SQL de ejemplo
CREATE DATABASE practica_php;
USE practica_php;CREATE TABLE alumnos (
id INT AUTO_INCREMENT PRIMARY KEY,
nombre VARCHAR(50) NOT NULL,
apellidos VARCHAR(100) NOT NULL,
email VARCHAR(100) NOT NULL,
curso VARCHAR(50) NOT NULL,
edad INT NOT NULL
);Qué hace este script
- crea una base de datos llamada
practica_php - selecciona esa base de datos
- crea una tabla llamada
alumnos - define un campo
idautoincremental - añade los campos del formulario
Qué debéis hacer vosotros
- ejecutar el script
- comprobar que la base de datos existe
- comprobar que la tabla se ha creado correctamente
- hacer una captura de pantalla
Ejemplo de explicación para la entrega
Primero he creado una base de datos llamada
practica_php. Después he creado una tabla llamadaalumnos, que servirá para almacenar los datos enviados desde el formulario. La tabla tiene un campoidcomo clave primaria y varios campos de texto y numéricos para guardar la información.
Paso 3. Crear la portada
La portada será la página inicial de la aplicación.
Debe incluir
- un título
- una breve descripción
- un enlace al formulario
- un enlace al listado
Ejemplo de index.php
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Miniaplicación PHP</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<h1>Miniaplicación de registro de alumnos</h1>
<p>Esta aplicación permite guardar alumnos en una base de datos y mostrar su listado.</p>
<ul>
<li><a href="formulario.php">Ir al formulario</a></li>
<li><a href="listar.php">Ver listado</a></li>
</ul>
</body>
</html>Qué debéis comprobar
- la página carga sin errores
- los enlaces funcionan
- el texto se ve correctamente
Ejemplo de explicación para la entrega
He creado una portada en el archivo
index.phppara que la aplicación tenga una página inicial. En ella he añadido un título, una descripción breve y dos enlaces: uno al formulario y otro al listado.
Paso 4. Crear el formulario
Ahora debéis crear la página que permitirá introducir los datos.
Campos obligatorios
El formulario debe incluir como mínimo:
- nombre
- apellidos
- curso
- edad
Ejemplo de formulario.php
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Formulario de alumnos</title>
<link rel="stylesheet" href="estilos.css">
<script src="script.js" defer></script>
</head>
<body>
<h1>Formulario de alumnos</h1>
<form action="guardar.php" method="post" id="formAlumno">
<label for="nombre">Nombre:</label>
<input type="text" name="nombre" id="nombre">
<label for="apellidos">Apellidos:</label>
<input type="text" name="apellidos" id="apellidos">
<label for="email">Email:</label>
<input type="text" name="email" id="email">
<label for="curso">Curso:</label>
<input type="text" name="curso" id="curso">
<label for="edad">Edad:</label>
<input type="number" name="edad" id="edad">
<button type="submit">Guardar</button>
</form>
<p><a href="index.php">Volver a la portada</a></p>
</body>
</html>Fijaos en esto
action="guardar.php"indica a qué archivo se enviarán los datosmethod="post"indica que los datos viajarán mediante POST- cada campo tiene
nameeid - el formulario tiene un
idpara poder validarlo con JavaScript
Importante
Si unnameestá mal escrito, PHP no recibirá bien ese dato.
Este es uno de los errores más comunes en este tipo de práctica.
Ejemplo de explicación para la entrega
En el archivo
formulario.phphe creado un formulario HTML con cinco campos. He usado el métodoPOSTpara enviar los datos al archivoguardar.php, que será el encargado de procesarlos en PHP.
Paso 5. Validar el formulario con JavaScript
Antes de guardar los datos, debéis comprobar en el navegador que lo que el usuario ha escrito tiene sentido.
Debéis validar al menos
- que no haya campos vacíos
- que el email tenga formato válido
- que la edad sea correcta
Ejemplo de script.js
document.addEventListener("DOMContentLoaded", function () {
const formulario = document.getElementById("formAlumno");
formulario.addEventListener("submit", function (e) {
const nombre = document.getElementById("nombre").value.trim();
const apellidos = document.getElementById("apellidos").value.trim();
const email = document.getElementById("email").value.trim();
const curso = document.getElementById("curso").value.trim();
const edad = document.getElementById("edad").value.trim();
if (nombre === "" || apellidos === "" || email === "" || curso === "" || edad === "") {
alert("Todos los campos son obligatorios.");
e.preventDefault();
return;
}
const patronEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!patronEmail.test(email)) {
alert("El email no tiene un formato válido.");
e.preventDefault();
return;
}
if (isNaN(edad) || edad < 1 || edad > 120) {
alert("La edad no es válida.");
e.preventDefault();
}
});
});Qué debéis probar
- dejar todos los campos vacíos
- escribir un email incorrecto
- escribir una edad no válida
- rellenar todo correctamente
Ejemplo de explicación para la entrega
He creado un archivo
script.jspara validar el formulario antes del envío. Primero compruebo que no haya campos vacíos. Después reviso el formato del email mediante una expresión regular y, por último, valido que la edad sea numérica y esté en un rango lógico.
Importante
La validación en JavaScript mejora la experiencia del usuario, pero no sustituye a la validación en servidor.
Como mejora opcional, podéis validar también en PHP.
Paso 6. Crear la conexión a la base de datos
Ahora debéis preparar el archivo que conectará PHP con MySQL.
Ejemplo de conexion.php
<?php
$servidor = "localhost";
$usuario = "root";
$contrasena = "";
$basedatos = "practica_php";
$conexion = new mysqli($servidor, $usuario, $contrasena, $basedatos);
if ($conexion->connect_error) {
die("Error de conexión: " . $conexion->connect_error);
}
?>Qué debéis comprobar
- el archivo conecta correctamente
- la base de datos indicada existe
- no hay errores de usuario, contraseña o nombre de base de datos
Ejemplo de explicación para la entrega
En
conexion.phphe definido las variables necesarias para conectarme a MySQL: servidor, usuario, contraseña y nombre de la base de datos. Después he usadonew mysqli(...)para abrir la conexión y he añadido una comprobación para detectar errores.
Paso 7. Guardar los datos enviados
Aquí debéis recoger los datos del formulario y guardarlos en la tabla.
Ejemplo de guardar.php
<?php
include("conexion.php");
$nombre = $_POST["nombre"];
$apellidos = $_POST["apellidos"];
$email = $_POST["email"];
$curso = $_POST["curso"];
$edad = $_POST["edad"];
$sql = "INSERT INTO alumnos (nombre, apellidos, email, curso, edad)
VALUES ('$nombre', '$apellidos', '$email', '$curso', '$edad')";
if ($conexion->query($sql) === TRUE) {
echo "<h1>Registro guardado correctamente</h1>";
echo "<p><a href='formulario.php'>Volver al formulario</a></p>";
echo "<p><a href='listar.php'>Ver listado</a></p>";
} else {
echo "Error: " . $conexion->error;
}
$conexion->close();
?>Qué debéis entender aquí
$_POSTrecoge los datos enviados por el formularioINSERT INTOañade una fila nueva a la tablaquery()ejecuta la consulta SQL- si todo va bien, se muestra un mensaje de éxito
Ejemplo de explicación para la entrega
En
guardar.phphe recogido los valores enviados desde el formulario con$_POST. Después he creado una consultaINSERTpara guardar esos datos en la tablaalumnos. Finalmente he ejecutado la consulta y he mostrado un mensaje de éxito si el guardado se ha realizado correctamente.
Importante
Este ejemplo está hecho de forma simple para trabajar los fundamentos.
Como mejora opcional, se valorará el uso de consultas preparadas.
Paso 8. Mostrar el listado de registros
Ahora debéis recuperar los datos de la tabla y mostrarlos en pantalla.
Ejemplo de listar.php
<?php
include("conexion.php");
$sql = "SELECT * FROM alumnos";
$resultado = $conexion->query($sql);
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Listado de alumnos</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<h1>Listado de alumnos</h1>
<table border="1">
<tr>
<th>ID</th>
<th>Nombre</th>
<th>Apellidos</th>
<th>Email</th>
<th>Curso</th>
<th>Edad</th>
</tr>
<?php while($fila = $resultado->fetch_assoc()) { ?>
<tr>
<td><?php echo $fila["id"]; ?></td>
<td><?php echo $fila["nombre"]; ?></td>
<td><?php echo $fila["apellidos"]; ?></td>
<td><?php echo $fila["email"]; ?></td>
<td><?php echo $fila["curso"]; ?></td>
<td><?php echo $fila["edad"]; ?></td>
</tr>
<?php } ?>
</table>
<p><a href="index.php">Volver a la portada</a></p>
</body>
</html>
<?php
$conexion->close();
?>Qué debéis entender aquí
SELECT * FROM alumnosrecupera todos los registrosquery()ejecuta la consultafetch_assoc()devuelve una fila asociativa- el
whilerecorre todas las filas
Ejemplo de explicación para la entrega
En
listar.phphe realizado una consultaSELECTpara obtener todos los registros de la tablaalumnos. Después he usado un buclewhilejunto confetch_assoc()para recorrer el resultado y mostrar cada alumno dentro de una tabla HTML.
Paso 9. Añadir un estilo básico
La parte visual no es lo principal, pero sí conviene que la aplicación tenga una presentación limpia.
Ejemplo de estilos.css
body {
font-family: Arial, sans-serif;
margin: 30px;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
form {
background: white;
padding: 20px;
width: 350px;
border: 1px solid #ccc;
}
label {
display: block;
margin-top: 10px;
}
input {
width: 100%;
padding: 8px;
margin-top: 5px;
}
button {
margin-top: 15px;
padding: 10px 15px;
}Ejemplo de explicación para la entrega
He creado un archivo
estilos.csspara dar una presentación básica al proyecto. He aplicado una tipografía sencilla, un fondo claro y un estilo mínimo al formulario y a los campos de entrada.
Comprobaciones finales
Antes de entregar, revisad todo esto:
- la portada carga correctamente
- el formulario se muestra bien
- la validación bloquea errores
- los datos correctos se guardan
- el listado muestra los registros
- no hay enlaces rotos
- la base de datos coincide con el código PHP
Qué debéis entregar
Debéis entregar un archivo comprimido .zip con esta estructura:
apellido_nombre_recuperacion_php.zip
│
├── proyecto/
│ ├── index.php
│ ├── formulario.php
│ ├── guardar.php
│ ├── listar.php
│ ├── conexion.php
│ ├── script.js
│ ├── estilos.css
│ └── bbdd.sql
│
└── documentacion/
└── memoria_practica.pdf
Tabla de evaluación
| Apartado | Qué se valora |
|---|---|
| Estructura del proyecto | Que los archivos estén organizados y tengan sentido |
| Portada | Que exista, funcione y permita navegar |
| Formulario | Que tenga los campos pedidos y funcione |
| Validación JS | Que detecte errores básicos correctamente |
| Conexión con MySQL | Que use mysqli y funcione |
| Inserción de datos | Que los datos se guarden correctamente |
| Listado | Que se muestren todos los registros |
| Claridad del código | Que el código sea simple, comprensible y ordenado |
| Documentación | Que explique el proceso paso a paso |
| Mejoras opcionales | POO, sesiones, seguridad, edición, borrado, etc. |
Plantilla completa de memoria para rellenar
A continuación tenéis una plantilla orientativa. Podéis seguir esta estructura para redactar vuestra memoria.
1. Portada
Título de la práctica:
Miniaplicación web con PHP, MySQLi y JavaScript
Nombre y apellidos del alumno:
[Escribir aquí]
Módulo:
[Escribir aquí]
Fecha:
[Escribir aquí]
2. Objetivo de la práctica
Ejemplo de redacción
El objetivo de esta práctica ha sido desarrollar una miniaplicación web en PHP conectada a una base de datos MySQL. La aplicación permite introducir datos de alumnos mediante un formulario, validarlos con JavaScript, guardarlos en la base de datos y mostrar posteriormente el listado de registros almacenados.
3. Descripción general del proyecto
Explicad qué archivos habéis creado y para qué sirve cada uno.
Ejemplo de redacción
El proyecto está compuesto por varios archivos.
index.phpactúa como portada.formulario.phpcontiene el formulario de entrada de datos.guardar.phpprocesa la información enviada y la guarda en la base de datos.listar.phpmuestra los registros.conexion.phpestablece la conexión con MySQL.script.jsvalida el formulario yestilos.cssda formato básico a la aplicación.
4. Desarrollo paso a paso
4.1 Creación de la base de datos
Explicad:
- el nombre de la base de datos
- el nombre de la tabla
- los campos creados
- el script SQL utilizado
Ejemplo
Primero he creado una base de datos llamada
practica_php. Después he creado una tabla llamadaalumnoscon un campoidautoincremental y cinco campos adicionales para almacenar nombre, apellidos, email, curso y edad.
4.2 Creación de la portada
Explicad:
- qué contiene
- por qué la habéis diseñado así
- qué enlaces tiene
Ejemplo
He creado una página principal llamada
index.phppara que el usuario tenga un punto de entrada a la aplicación. En esta página he colocado un título, una breve descripción y enlaces al formulario y al listado.
4.3 Creación del formulario
Explicad:
- qué campos tiene
- qué tipo de datos se introducen
- por qué habéis usado
POST
Ejemplo
En
formulario.phphe añadido cinco campos: nombre, apellidos, email, curso y edad. He usado el métodoPOSTporque permite enviar los datos al servidor sin mostrarlos en la URL.
4.4 Validación con JavaScript
Explicad:
- qué validaciones habéis hecho
- qué errores queríais evitar
Ejemplo
He validado que los campos no estén vacíos, que el email tenga un formato correcto y que la edad sea un número válido. De este modo evito que lleguen a PHP datos claramente incorrectos.
4.5 Conexión con la base de datos
Explicad:
- cómo funciona
mysqli - qué datos necesita la conexión
- cómo comprobáis errores
Ejemplo
Para conectar PHP con MySQL he usado
mysqli. He indicado el servidor, el usuario, la contraseña y el nombre de la base de datos. Después he comprobado si la conexión producía algún error.
4.6 Guardado de datos
Explicad:
- cómo llegan los datos a PHP
- qué hace
$_POST - qué consulta SQL habéis usado
Ejemplo
En
guardar.phphe recogido los datos enviados por el formulario con$_POST. Después he creado una consultaINSERTpara guardar la información en la tablaalumnos.
4.7 Listado de registros
Explicad:
- qué consulta habéis hecho
- cómo se recorre el resultado
- cómo se muestra en HTML
Ejemplo
En
listar.phphe usado una consultaSELECT * FROM alumnospara obtener todos los registros. Después he recorrido el resultado confetch_assoc()dentro de un buclewhilepara mostrar cada alumno en una tabla HTML.
5. Capturas de pantalla
Debéis incluir capturas de:
- base de datos creada
- formulario en pantalla
- error de validación
- inserción correcta
- listado funcionando
Ejemplo de cómo presentarlo
Captura 1. Creación de la base de datos
[Insertar captura]
Captura 2. Formulario visible
[Insertar captura]
Captura 3. Validación de campos vacíos
[Insertar captura]
Captura 4. Registro guardado correctamente
[Insertar captura]
Captura 5. Listado de alumnos
[Insertar captura]
6. Pruebas realizadas
Aquí debéis explicar las pruebas que habéis hecho.
Ejemplo de redacción
He realizado varias pruebas para comprobar el funcionamiento de la aplicación.
Primero he intentado enviar el formulario dejando campos vacíos, y la validación ha impedido el envío.
Después he escrito un email incorrecto y también se ha bloqueado el formulario.
Más tarde he introducido todos los datos correctamente y el registro se ha guardado en la base de datos.
Finalmente he accedido a la página de listado y he comprobado que el alumno aparecía correctamente.
7. Problemas encontrados y soluciones
Esta parte es muy importante. No pongáis solo “ninguno” salvo que sea verdad de forma muy clara.
Ejemplo 1
Uno de los errores que encontré fue que PHP no recibía correctamente el valor del email. Revisando el formulario vi que el atributo
namedel campo no coincidía con la clave usada en$_POST. Después de corregirlo, el dato llegó correctamente.
Ejemplo 2
Al principio no se mostraban los registros en la tabla. El problema era que el nombre de la base de datos en
conexion.phpno coincidía con el creado en MySQL. Lo corregí y el listado empezó a funcionar.
8. Conclusión personal
Explicad qué habéis aprendido y qué os ha costado más.
Ejemplo de redacción
Con esta práctica he aprendido mejor cómo se conecta una aplicación PHP con una base de datos MySQL y cómo se relacionan el formulario,
$_POST, elINSERTy elSELECT. La parte que más me costó fue comprender el flujo completo de datos desde el formulario hasta el listado, pero después de hacer varias pruebas lo entendí mejor.
Recomendaciones finales
Importante
No intentéis hacer una aplicación enorme sin dominar primero lo básico.
Es preferible una práctica sencilla, clara, funcionando bien y bien explicada, que una práctica más grande pero confusa.
Orden recomendado de trabajo
- crear la base de datos
- hacer la portada
- hacer el formulario
- validar con JavaScript
- crear la conexión
- guardar los datos
- mostrar el listado
- hacer capturas
- redactar la memoria
Mejoras opcionales para subir nota
Si termináis la parte obligatoria, podéis añadir:
- validación en servidor
- clases en PHP
- login
- sesiones
- consultas preparadas
- edición de registros
- borrado de registros
- diseño visual mejorado
El objetivo real de esta práctica es que comprendáis el circuito básico de una aplicación web:
formulario → validación → envío → PHP → SQL → listado
Ese pequeño mecanismo es la base de muchísimas aplicaciones web. Si domináis esto, ya tenéis una base muy útil para seguir creciendo.
