[Reto] – Miniaplicación web con PHP, MySQLi y JavaScript (Sin POO)

Autor:

ciberkaos

– Tema:

Aplicaciones Web con PHP

– Publicado:

marzo 15, 2026

– Actualizado:

marzo 15, 2026

Contenido

Guía paso a paso

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
email
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.md

Importante
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 id autoincremental
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 llamada alumnos, que servirá para almacenar los datos enviados desde el formulario. La tabla tiene un campo id como 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.php para 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
email
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 datos
method="post" indica que los datos viajarán mediante POST
cada campo tiene name e id
el formulario tiene un id para poder validarlo con JavaScript

Importante
Si un name está 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.php he creado un formulario HTML con cinco campos. He usado el método POST para enviar los datos al archivo guardar.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.js para 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.php he definido las variables necesarias para conectarme a MySQL: servidor, usuario, contraseña y nombre de la base de datos. Después he usado new 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í

$_POST recoge los datos enviados por el formulario
INSERT INTO añade una fila nueva a la tabla
query() ejecuta la consulta SQL
si todo va bien, se muestra un mensaje de éxito

Ejemplo de explicación para la entrega

En guardar.php he recogido los valores enviados desde el formulario con $_POST. Después he creado una consulta INSERT para guardar esos datos en la tabla alumnos. 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 alumnos recupera todos los registros
query() ejecuta la consulta
fetch_assoc() devuelve una fila asociativa
el while recorre todas las filas

Ejemplo de explicación para la entrega

En listar.php he realizado una consulta SELECT para obtener todos los registros de la tabla alumnos. Después he usado un bucle while junto con fetch_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.css para 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.php actúa como portada. formulario.php contiene el formulario de entrada de datos. guardar.php procesa la información enviada y la guarda en la base de datos. listar.php muestra los registros. conexion.php establece la conexión con MySQL. script.js valida el formulario y estilos.css da 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 llamada alumnos con un campo id autoincremental 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.php para 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.php he añadido cinco campos: nombre, apellidos, email, curso y edad. He usado el método POST porque 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.php he recogido los datos enviados por el formulario con $_POST. Después he creado una consulta INSERT para guardar la información en la tabla alumnos.

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.php he usado una consulta SELECT * FROM alumnos para obtener todos los registros. Después he recorrido el resultado con fetch_assoc() dentro de un bucle while para 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 name del 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.php no 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, el INSERT y el SELECT. 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.

Lecciones:

App Web Full-Stack (PHP/MySQL + HTML/JS)

[Reto] – Miniaplicación web con PHP, MySQLi y JavaScript (Sin POO)

¿Qué vais a hacer?

Objetivo de la práctica

Qué debe tener la aplicación

Parte obligatoria

Mejoras opcionales

Guía paso a paso

Paso 1. Crear la carpeta del proyecto

Estructura recomendada

Paso 2. Crear la base de datos

Script SQL de ejemplo

Qué hace este script

Qué debéis hacer vosotros

Ejemplo de explicación para la entrega

Paso 3. Crear la portada

Debe incluir

Ejemplo de index.php

Qué debéis comprobar

Ejemplo de explicación para la entrega

Paso 4. Crear el formulario

Campos obligatorios

Ejemplo de formulario.php

Fijaos en esto

Ejemplo de explicación para la entrega

Paso 5. Validar el formulario con JavaScript

Debéis validar al menos

Ejemplo de script.js

Qué debéis probar

Ejemplo de explicación para la entrega

Paso 6. Crear la conexión a la base de datos

Ejemplo de conexion.php

Qué debéis comprobar

Ejemplo de explicación para la entrega

Paso 7. Guardar los datos enviados

Ejemplo de guardar.php

Qué debéis entender aquí

Ejemplo de explicación para la entrega

Paso 8. Mostrar el listado de registros

Ejemplo de listar.php

Qué debéis entender aquí

Ejemplo de explicación para la entrega

Paso 9. Añadir un estilo básico

Ejemplo de estilos.css

Ejemplo de explicación para la entrega

Comprobaciones finales

Qué debéis entregar

Tabla de evaluación

Plantilla completa de memoria para rellenar

1. Portada

2. Objetivo de la práctica

Ejemplo de redacción

3. Descripción general del proyecto

Ejemplo de redacción

4. Desarrollo paso a paso

4.1 Creación de la base de datos

Ejemplo

4.2 Creación de la portada

Ejemplo

4.3 Creación del formulario

Ejemplo

4.4 Validación con JavaScript

Ejemplo

4.5 Conexión con la base de datos

Ejemplo

4.6 Guardado de datos

Ejemplo

4.7 Listado de registros

Ejemplo

5. Capturas de pantalla

Ejemplo de cómo presentarlo

6. Pruebas realizadas

Ejemplo de redacción

7. Problemas encontrados y soluciones

Ejemplo 1

Ejemplo 2

8. Conclusión personal

Ejemplo de redacción

Recomendaciones finales

Orden recomendado de trabajo

Mejoras opcionales para subir nota

Ejemplo de `index.php`

Ejemplo de `formulario.php`

Ejemplo de `script.js`

Ejemplo de `conexion.php`

Ejemplo de `guardar.php`

Ejemplo de `listar.php`

Ejemplo de `estilos.css`