Autor: ciberkaos

  • Proyecto web en PHP orientado a objetos: tienda de cuencos tibetanos

    Proyecto web en PHP orientado a objetos: tienda de cuencos tibetanos

    En este proyecto vamos a desarrollar una aplicación web completa utilizando PHP orientado a objetos, MySQL, HTML y CSS. La temática será una tienda online de cuencos tibetanos llamada Sonido Interior.

    Este proyecto es una evolución del proyecto inicial realizado con PHP básico. En la primera versión trabajamos con páginas PHP sencillas, formularios, includes, conexión directa a base de datos y consultas SQL escritas en cada archivo.

    En esta nueva versión vamos a dar un paso más importante: organizaremos el código mediante clases, separaremos responsabilidades y construiremos una estructura más cercana a la que se utiliza en aplicaciones web reales.

    El objetivo no es complicar el proyecto sin necesidad, sino aprender a programar de forma más ordenada, reutilizable y mantenible.


    1. Objetivo general del proyecto

    Vamos a crear una tienda web de cuencos tibetanos con una parte pública y una parte administrativa.

    La parte pública permitirá ver la página de inicio, consultar el catálogo de productos y visualizar información de la tienda.

    La parte administrativa permitirá iniciar sesión, añadir productos, listar productos, editar productos y borrar productos.

    La diferencia principal respecto a la versión anterior será la forma de organizar el código.

    En lugar de escribir toda la lógica directamente en archivos como producto-guardar.php, producto-editar.php o catalogo.php, crearemos clases encargadas de realizar esas tareas.

    Por ejemplo, tendremos clases como:

    • Producto
    • Categoria
    • Usuario
    • Conexion
    • ProductoDAO
    • CategoriaDAO
    • UsuarioDAO

    Con esto empezaremos a trabajar una arquitectura más limpia y profesional.


    2. Qué significa usar programación orientada a objetos

    La programación orientada a objetos, o POO, es una forma de programar basada en clases y objetos.

    Una clase es como un molde. Define qué datos tendrá un elemento y qué acciones podrá realizar.

    Un objeto es una instancia concreta de una clase.

    Por ejemplo, en nuestro proyecto podemos tener una clase Producto.

    Esa clase representa cualquier producto de la tienda.

    class Producto {
    private $idProducto;
    private $nombre;
    private $descripcion;
    private $precio;
    private $stock;
    private $imagen;
    }

    Después, un cuenco tibetano concreto sería un objeto de esa clase.

    $producto = new Producto();

    La ventaja de este enfoque es que el código queda mejor organizado. En lugar de trabajar con variables sueltas y consultas repartidas por muchas páginas, agrupamos la información y el comportamiento en clases.


    3. Diferencia entre la versión básica y la versión POO

    En la versión básica del proyecto, la conexión a la base de datos y las consultas pueden estar escritas directamente dentro de las páginas.

    Por ejemplo:

    include("includes/conexion.php");

    $sql = "SELECT * FROM productos";
    $resultado = $conexion->query($sql);

    En la versión orientada a objetos, intentaremos que la página no tenga que saber cómo se hace la consulta.

    La página pedirá los productos a una clase especializada:

    $productoDAO = new ProductoDAO();
    $productos = $productoDAO->obtenerTodos();

    La página solo se encargará de mostrar los datos. La clase ProductoDAO será la encargada de hablar con la base de datos.

    Esto hace que el proyecto sea más fácil de mantener, ampliar y corregir.


    4. Tecnologías que vamos a utilizar

    En esta versión seguiremos utilizando las mismas tecnologías principales:

    • HTML.
    • CSS.
    • PHP.
    • MySQL o MariaDB.
    • Apache.
    • phpMyAdmin.
    • Hosting o contenedor Docker.

    La diferencia es que en PHP trabajaremos con:

    • Clases.
    • Objetos.
    • Atributos.
    • Métodos.
    • Constructores.
    • Encapsulación.
    • Getters y setters.
    • Clases DAO.
    • Separación de responsabilidades.
    • Consultas preparadas.
    • Sesiones.
    • Autoload básico o includes de clases.

    5. Resultado final esperado

    Al finalizar esta versión del proyecto tendremos una aplicación web parecida a la anterior, pero con una organización interna mucho mejor.

    La aplicación incluirá:

    • Página de inicio.
    • Catálogo público de productos.
    • Página de login.
    • Zona administrativa.
    • Alta de productos.
    • Listado administrativo.
    • Edición de productos.
    • Borrado lógico de productos.
    • Subida de imagen por producto.
    • Conexión a base de datos mediante una clase.
    • Entidades representadas mediante clases.
    • Clases DAO para acceder a la base de datos.
    • Uso de sesiones para proteger la administración.
    • Código más limpio y reutilizable.

    Fases del proyecto

    Fase 1: repaso de la versión inicial

    Antes de empezar con la versión orientada a objetos, revisaremos brevemente la versión anterior del proyecto.

    Recordaremos cómo funcionaba:

    • Las páginas públicas.
    • Las páginas administrativas.
    • Los formularios.
    • Los includes.
    • La conexión a la base de datos.
    • Las consultas SELECT, INSERT, UPDATE y DELETE.
    • La subida de imágenes.
    • El login con sesiones.

    Esto es importante porque la versión POO no cambia la finalidad del proyecto. Lo que cambia es la forma de organizar el código.


    Fase 2: análisis de las clases necesarias

    El primer paso será pensar qué elementos importantes tiene nuestro proyecto.

    En una tienda de cuencos tibetanos podemos encontrar estos elementos:

    • Productos.
    • Categorías.
    • Usuarios administradores.
    • Mensajes de contacto.
    • Pedidos.
    • Detalles de pedido.
    • Carrito.
    • Imágenes.

    Cada uno de estos elementos puede representarse con una clase.

    Para empezar, trabajaremos con las clases principales:

    • Producto
    • Categoria
    • Usuario
    • Conexion

    Después añadiremos las clases encargadas de acceder a la base de datos:

    • ProductoDAO
    • CategoriaDAO
    • UsuarioDAO

    Fase 3: estructura de carpetas del proyecto

    En esta versión necesitaremos una estructura más organizada.

    Una posible estructura será esta:

    sonido-interior-poo/

    ├── index.php
    ├── catalogo.php
    ├── login.php
    ├── validar-login.php
    ├── logout.php

    ├── admin/
    │ ├── panel.php
    │ ├── productos.php
    │ ├── producto-alta.php
    │ ├── producto-guardar.php
    │ ├── producto-editar.php
    │ ├── producto-actualizar.php
    │ └── producto-borrar.php

    ├── includes/
    │ ├── header.php
    │ ├── menu.php
    │ ├── menu-admin.php
    │ ├── footer.php
    │ └── seguridad.php

    ├── clases/
    │ ├── Conexion.php
    │ ├── Producto.php
    │ ├── Categoria.php
    │ ├── Usuario.php
    │ ├── ProductoDAO.php
    │ ├── CategoriaDAO.php
    │ └── UsuarioDAO.php

    ├── css/
    │ └── estilos.css

    ├── img/
    │ └── productos/

    └── sql/
    └── tienda_cuencos.sql

    La carpeta más importante de esta versión será clases/.

    Ahí guardaremos las clases del proyecto.


    Fase 4: creación de la clase Conexion

    La primera clase que crearemos será Conexion.

    Esta clase se encargará de conectarse a la base de datos.

    En lugar de tener un archivo conexion.php con variables sueltas, crearemos una clase con un método que devuelva la conexión.

    Ejemplo:

    <?php

    class Conexion {

    private $servidor = "localhost";
    private $usuario = "root";
    private $password = "";
    private $baseDatos = "tienda_cuencos";

    public function conectar() {
    $conexion = new mysqli(
    $this->servidor,
    $this->usuario,
    $this->password,
    $this->baseDatos
    );

    if ($conexion->connect_error) {
    die("Error de conexión: " . $conexion->connect_error);
    }

    $conexion->set_charset("utf8");

    return $conexion;
    }
    }

    ?>

    Con esta clase podremos conectarnos a la base de datos desde cualquier DAO.

    Ejemplo:

    $conexionBD = new Conexion();
    $conexion = $conexionBD->conectar();

    Fase 5: creación de la clase Producto

    Después crearemos la clase Producto.

    Esta clase representará un producto de la tienda.

    Tendrá atributos privados como:

    • ID.
    • Nombre.
    • Descripción.
    • Precio.
    • Stock.
    • Imagen.
    • Diámetro.
    • Peso.
    • Material.
    • Nota musical.
    • Procedencia.
    • Activo.
    • Categoría.

    Ejemplo:

    <?php

    class Producto {

    private $idProducto;
    private $nombre;
    private $descripcion;
    private $precio;
    private $stock;
    private $imagen;
    private $diametro;
    private $peso;
    private $material;
    private $notaMusical;
    private $procedencia;
    private $activo;
    private $idCategoria;

    public function __construct(
    $idProducto = null,
    $nombre = "",
    $descripcion = "",
    $precio = 0,
    $stock = 0,
    $imagen = "",
    $diametro = 0,
    $peso = 0,
    $material = "",
    $notaMusical = "",
    $procedencia = "",
    $activo = true,
    $idCategoria = null
    ) {
    $this->idProducto = $idProducto;
    $this->nombre = $nombre;
    $this->descripcion = $descripcion;
    $this->precio = $precio;
    $this->stock = $stock;
    $this->imagen = $imagen;
    $this->diametro = $diametro;
    $this->peso = $peso;
    $this->material = $material;
    $this->notaMusical = $notaMusical;
    $this->procedencia = $procedencia;
    $this->activo = $activo;
    $this->idCategoria = $idCategoria;
    }

    public function getIdProducto() {
    return $this->idProducto;
    }

    public function getNombre() {
    return $this->nombre;
    }

    public function setNombre($nombre) {
    $this->nombre = $nombre;
    }

    public function getDescripcion() {
    return $this->descripcion;
    }

    public function setDescripcion($descripcion) {
    $this->descripcion = $descripcion;
    }

    public function getPrecio() {
    return $this->precio;
    }

    public function setPrecio($precio) {
    $this->precio = $precio;
    }

    public function getStock() {
    return $this->stock;
    }

    public function setStock($stock) {
    $this->stock = $stock;
    }
    }

    ?>

    Durante el proyecto iremos completando la clase con todos los getters y setters necesarios.


    Fase 6: creación de la clase Categoria

    La clase Categoria representará una categoría de producto.

    Ejemplo:

    <?php

    class Categoria {

    private $idCategoria;
    private $nombre;
    private $descripcion;
    private $activo;

    public function __construct(
    $idCategoria = null,
    $nombre = "",
    $descripcion = "",
    $activo = true
    ) {
    $this->idCategoria = $idCategoria;
    $this->nombre = $nombre;
    $this->descripcion = $descripcion;
    $this->activo = $activo;
    }

    public function getIdCategoria() {
    return $this->idCategoria;
    }

    public function getNombre() {
    return $this->nombre;
    }

    public function setNombre($nombre) {
    $this->nombre = $nombre;
    }

    public function getDescripcion() {
    return $this->descripcion;
    }

    public function setDescripcion($descripcion) {
    $this->descripcion = $descripcion;
    }

    public function getActivo() {
    return $this->activo;
    }

    public function setActivo($activo) {
    $this->activo = $activo;
    }
    }

    ?>

    Esta clase nos permitirá trabajar con categorías de forma ordenada.


    Fase 7: creación de la clase Usuario

    La clase Usuario representará a los usuarios administradores.

    Tendrá atributos como:

    • ID.
    • Nombre.
    • Email.
    • Usuario.
    • Password.
    • Rol.

    Ejemplo:

    <?php

    class Usuario {

    private $idUsuario;
    private $nombre;
    private $email;
    private $usuario;
    private $password;
    private $rol;

    public function __construct(
    $idUsuario = null,
    $nombre = "",
    $email = "",
    $usuario = "",
    $password = "",
    $rol = "admin"
    ) {
    $this->idUsuario = $idUsuario;
    $this->nombre = $nombre;
    $this->email = $email;
    $this->usuario = $usuario;
    $this->password = $password;
    $this->rol = $rol;
    }

    public function getIdUsuario() {
    return $this->idUsuario;
    }

    public function getNombre() {
    return $this->nombre;
    }

    public function getUsuario() {
    return $this->usuario;
    }

    public function getPassword() {
    return $this->password;
    }

    public function getRol() {
    return $this->rol;
    }
    }

    ?>

    Esta clase se usará principalmente para el login y la gestión de sesiones.


    Fase 8: qué es una clase DAO

    En esta versión del proyecto usaremos clases DAO.

    DAO significa Data Access Object, es decir, objeto de acceso a datos.

    Una clase DAO se encarga de hablar con la base de datos.

    Por ejemplo, la clase Producto representa los datos de un producto, pero no debería ser la encargada de hacer consultas SQL.

    Para eso tendremos ProductoDAO.

    La clase ProductoDAO tendrá métodos como:

    • obtenerTodos()
    • obtenerPorId($id)
    • crear($producto)
    • actualizar($producto)
    • eliminar($id)
    • disminuirStock($idProducto, $cantidad)

    La ventaja es que las consultas SQL quedan agrupadas en una clase concreta.


    Fase 9: creación de ProductoDAO

    La clase ProductoDAO será una de las más importantes del proyecto.

    Ejemplo inicial:

    <?php

    require_once "Conexion.php";
    require_once "Producto.php";

    class ProductoDAO {

    private $conexion;

    public function __construct() {
    $conexionBD = new Conexion();
    $this->conexion = $conexionBD->conectar();
    }

    public function obtenerTodos() {
    $sql = "SELECT * FROM productos WHERE activo = 1";
    $resultado = $this->conexion->query($sql);

    $productos = [];

    while ($fila = $resultado->fetch_assoc()) {
    $producto = new Producto(
    $fila["id_producto"],
    $fila["nombre"],
    $fila["descripcion"],
    $fila["precio"],
    $fila["stock"],
    $fila["imagen"],
    $fila["diametro"],
    $fila["peso"],
    $fila["material"],
    $fila["nota_musical"],
    $fila["procedencia"],
    $fila["activo"],
    $fila["id_categoria"]
    );

    $productos[] = $producto;
    }

    return $productos;
    }
    }

    ?>

    Ahora, desde catalogo.php, podremos obtener los productos así:

    require_once "clases/ProductoDAO.php";

    $productoDAO = new ProductoDAO();
    $productos = $productoDAO->obtenerTodos();

    Y después recorrerlos:

    foreach ($productos as $producto) {
    echo "<h3>" . $producto->getNombre() . "</h3>";
    echo "<p>" . $producto->getPrecio() . " €</p>";
    }

    Fase 10: mostrar el catálogo usando objetos

    En la página catalogo.php, ya no haremos directamente una consulta SQL.

    La página simplemente pedirá los productos a ProductoDAO.

    Ejemplo:

    <?php
    require_once "clases/ProductoDAO.php";
    include("includes/header.php");
    include("includes/menu.php");

    $productoDAO = new ProductoDAO();
    $productos = $productoDAO->obtenerTodos();
    ?>

    <main class="contenedor">
    <h1>Catálogo de productos</h1>

    <section class="grid-productos">
    <?php foreach ($productos as $producto): ?>
    <article class="tarjeta-producto">
    <img src="img/productos/<?php echo $producto->getImagen(); ?>" alt="<?php echo $producto->getNombre(); ?>">
    <h3><?php echo $producto->getNombre(); ?></h3>
    <p><?php echo $producto->getPrecio(); ?> €</p>
    </article>
    <?php endforeach; ?>
    </section>
    </main>

    <?php include("includes/footer.php"); ?>

    Para que esto funcione, la clase Producto deberá tener métodos como:

    • getImagen()
    • getNombre()
    • getPrecio()

    Fase 11: alta de productos usando objetos

    Cuando enviemos el formulario de alta, recogeremos los datos del formulario y crearemos un objeto Producto.

    Ejemplo en producto-guardar.php:

    require_once "../clases/Producto.php";
    require_once "../clases/ProductoDAO.php";

    $producto = new Producto();

    $producto->setNombre($_POST["nombre"]);
    $producto->setDescripcion($_POST["descripcion"]);
    $producto->setPrecio($_POST["precio"]);
    $producto->setStock($_POST["stock"]);
    $producto->setMaterial($_POST["material"]);
    $producto->setProcedencia($_POST["procedencia"]);

    $productoDAO = new ProductoDAO();
    $productoDAO->crear($producto);

    Después, dentro de ProductoDAO, tendremos el método crear().

    Ejemplo:

    public function crear($producto) {
    $sql = "INSERT INTO productos
    (nombre, descripcion, precio, stock, material, procedencia)
    VALUES (?, ?, ?, ?, ?, ?)";

    $stmt = $this->conexion->prepare($sql);

    $nombre = $producto->getNombre();
    $descripcion = $producto->getDescripcion();
    $precio = $producto->getPrecio();
    $stock = $producto->getStock();
    $material = $producto->getMaterial();
    $procedencia = $producto->getProcedencia();

    $stmt->bind_param(
    "ssdiss",
    $nombre,
    $descripcion,
    $precio,
    $stock,
    $material,
    $procedencia
    );

    return $stmt->execute();
    }

    Este enfoque es más limpio porque el archivo del formulario no contiene directamente toda la consulta SQL.


    Fase 12: listado administrativo usando objetos

    El listado administrativo también usará ProductoDAO.

    La página admin/productos.php pedirá todos los productos:

    $productoDAO = new ProductoDAO();
    $productos = $productoDAO->obtenerTodos();

    Después los mostrará en una tabla:

    <?php foreach ($productos as $producto): ?>
    <tr>
    <td><?php echo $producto->getIdProducto(); ?></td>
    <td><?php echo $producto->getNombre(); ?></td>
    <td><?php echo $producto->getPrecio(); ?> €</td>
    <td><?php echo $producto->getStock(); ?></td>
    <td>
    <a href="producto-editar.php?id=<?php echo $producto->getIdProducto(); ?>">Editar</a>
    <a href="producto-borrar.php?id=<?php echo $producto->getIdProducto(); ?>">Borrar</a>
    </td>
    </tr>
    <?php endforeach; ?>

    La página se centra en mostrar información, no en saber cómo se consulta la base de datos.


    Fase 13: obtener un producto por ID

    Para editar un producto necesitaremos recuperarlo por su ID.

    Añadiremos este método a ProductoDAO:

    public function obtenerPorId($id) {
    $sql = "SELECT * FROM productos WHERE id_producto = ?";
    $stmt = $this->conexion->prepare($sql);
    $stmt->bind_param("i", $id);
    $stmt->execute();

    $resultado = $stmt->get_result();

    if ($fila = $resultado->fetch_assoc()) {
    return new Producto(
    $fila["id_producto"],
    $fila["nombre"],
    $fila["descripcion"],
    $fila["precio"],
    $fila["stock"],
    $fila["imagen"],
    $fila["diametro"],
    $fila["peso"],
    $fila["material"],
    $fila["nota_musical"],
    $fila["procedencia"],
    $fila["activo"],
    $fila["id_categoria"]
    );
    }

    return null;
    }

    Después, desde producto-editar.php:

    $id = $_GET["id"];

    $productoDAO = new ProductoDAO();
    $producto = $productoDAO->obtenerPorId($id);

    Así podremos rellenar el formulario de edición con los datos actuales del producto.


    Fase 14: actualización de productos

    Cuando se envíe el formulario de edición, crearemos un objeto Producto con los datos actualizados.

    Después llamaremos al método actualizar() de ProductoDAO.

    Ejemplo:

    $producto = new Producto();

    $producto->setIdProducto($_POST["id_producto"]);
    $producto->setNombre($_POST["nombre"]);
    $producto->setDescripcion($_POST["descripcion"]);
    $producto->setPrecio($_POST["precio"]);
    $producto->setStock($_POST["stock"]);

    $productoDAO = new ProductoDAO();
    $productoDAO->actualizar($producto);

    El método actualizar() hará una consulta UPDATE.

    public function actualizar($producto) {
    $sql = "UPDATE productos
    SET nombre = ?, descripcion = ?, precio = ?, stock = ?
    WHERE id_producto = ?";

    $stmt = $this->conexion->prepare($sql);

    $nombre = $producto->getNombre();
    $descripcion = $producto->getDescripcion();
    $precio = $producto->getPrecio();
    $stock = $producto->getStock();
    $id = $producto->getIdProducto();

    $stmt->bind_param("ssdii", $nombre, $descripcion, $precio, $stock, $id);

    return $stmt->execute();
    }

    Fase 15: borrado lógico de productos

    En lugar de borrar físicamente un producto, lo marcaremos como inactivo.

    En ProductoDAO añadiremos un método eliminar():

    public function eliminar($id) {
    $sql = "UPDATE productos SET activo = 0 WHERE id_producto = ?";
    $stmt = $this->conexion->prepare($sql);
    $stmt->bind_param("i", $id);

    return $stmt->execute();
    }

    Desde producto-borrar.php:

    $id = $_GET["id"];

    $productoDAO = new ProductoDAO();
    $productoDAO->eliminar($id);

    header("Location: productos.php");
    exit();

    Con esto el producto seguirá en la base de datos, pero dejará de mostrarse en la tienda.


    Fase 16: gestión de categorías con CategoriaDAO

    Igual que tenemos ProductoDAO, crearemos CategoriaDAO.

    Esta clase tendrá métodos como:

    • obtenerTodas()
    • obtenerPorId($id)
    • crear($categoria)
    • actualizar($categoria)
    • eliminar($id)

    Ejemplo básico:

    <?php

    require_once "Conexion.php";
    require_once "Categoria.php";

    class CategoriaDAO {

    private $conexion;

    public function __construct() {
    $conexionBD = new Conexion();
    $this->conexion = $conexionBD->conectar();
    }

    public function obtenerTodas() {
    $sql = "SELECT * FROM categorias WHERE activo = 1";
    $resultado = $this->conexion->query($sql);

    $categorias = [];

    while ($fila = $resultado->fetch_assoc()) {
    $categoria = new Categoria(
    $fila["id_categoria"],
    $fila["nombre"],
    $fila["descripcion"],
    $fila["activo"]
    );

    $categorias[] = $categoria;
    }

    return $categorias;
    }
    }

    ?>

    Esto nos permitirá cargar categorías dinámicamente en el formulario de alta de productos.


    Fase 17: login usando UsuarioDAO

    Para el login crearemos la clase UsuarioDAO.

    Esta clase tendrá un método para buscar un usuario por su nombre de usuario o email.

    Ejemplo:

    public function obtenerPorUsuario($usuario) {
    $sql = "SELECT * FROM usuarios WHERE usuario = ? OR email = ?";
    $stmt = $this->conexion->prepare($sql);
    $stmt->bind_param("ss", $usuario, $usuario);
    $stmt->execute();

    $resultado = $stmt->get_result();

    if ($fila = $resultado->fetch_assoc()) {
    return new Usuario(
    $fila["id_usuario"],
    $fila["nombre"],
    $fila["email"],
    $fila["usuario"],
    $fila["password"],
    $fila["rol"]
    );
    }

    return null;
    }

    Después, en validar-login.php:

    session_start();

    require_once "clases/UsuarioDAO.php";

    $usuarioFormulario = $_POST["usuario"];
    $passwordFormulario = $_POST["password"];

    $usuarioDAO = new UsuarioDAO();
    $usuario = $usuarioDAO->obtenerPorUsuario($usuarioFormulario);

    if ($usuario != null && password_verify($passwordFormulario, $usuario->getPassword())) {
    $_SESSION["usuario"] = $usuario->getUsuario();
    $_SESSION["rol"] = $usuario->getRol();

    header("Location: admin/panel.php");
    exit();
    } else {
    header("Location: login.php?error=1");
    exit();
    }

    Así el login queda mucho más ordenado.


    Fase 18: protección de páginas privadas

    Seguiremos usando sesiones para proteger la parte administrativa.

    El archivo includes/seguridad.php puede mantenerse parecido a la versión anterior.

    <?php

    session_start();

    if (!isset($_SESSION["usuario"])) {
    header("Location: ../login.php");
    exit();
    }

    ?>

    En cada página privada incluiremos este archivo.

    <?php include("../includes/seguridad.php"); ?>

    Fase 19: subida de imágenes usando una función auxiliar

    La subida de imágenes puede hacerse al principio dentro de producto-guardar.php, pero podemos mejorarla creando una función o una clase auxiliar.

    Una opción sencilla sería crear:

    clases/GestorImagenes.php

    Ejemplo:

    <?php

    class GestorImagenes {

    public static function subirImagen($archivo, $carpetaDestino) {
    $nombreImagen = time() . "_" . basename($archivo["name"]);
    $rutaDestino = $carpetaDestino . $nombreImagen;

    if (move_uploaded_file($archivo["tmp_name"], $rutaDestino)) {
    return $nombreImagen;
    }

    return null;
    }
    }

    ?>

    Después, en producto-guardar.php:

    require_once "../clases/GestorImagenes.php";

    $imagen = GestorImagenes::subirImagen(
    $_FILES["imagen"],
    "../img/productos/"
    );

    $producto->setImagen($imagen);

    Esto permite separar la lógica de subida de archivos del resto del código.


    Fase 20: autoload básico de clases

    Cuando el proyecto crece, puede resultar pesado escribir muchos require_once.

    Por ejemplo:

    require_once "clases/Conexion.php";
    require_once "clases/Producto.php";
    require_once "clases/ProductoDAO.php";
    require_once "clases/Categoria.php";
    require_once "clases/CategoriaDAO.php";

    Para evitarlo, podemos crear un pequeño autoload.

    Ejemplo en includes/autoload.php:

    <?php

    spl_autoload_register(function ($nombreClase) {
    require_once __DIR__ . "/../clases/" . $nombreClase . ".php";
    });

    ?>

    Después, en cada página solo haríamos:

    require_once "includes/autoload.php";

    O desde la carpeta admin:

    require_once "../includes/autoload.php";

    Esto nos permitirá cargar clases automáticamente cuando las necesitemos.


    Fase 21: diagrama de clases

    En esta versión será especialmente importante trabajar con un diagrama de clases.

    El diagrama nos ayudará a entender qué clases existen y cómo se relacionan.

    Algunas clases principales serán:

    • Conexion
    • Producto
    • Categoria
    • Usuario
    • ProductoDAO
    • CategoriaDAO
    • UsuarioDAO
    • GestorImagenes

    La relación sería sencilla:

    • ProductoDAO usa Conexion.
    • ProductoDAO crea y devuelve objetos Producto.
    • CategoriaDAO usa Conexion.
    • CategoriaDAO crea y devuelve objetos Categoria.
    • UsuarioDAO usa Conexion.
    • UsuarioDAO crea y devuelve objetos Usuario.
    • Las páginas PHP usan los DAO para obtener o guardar datos.

    Este diagrama nos permitirá ver que las páginas ya no hablan directamente con la base de datos, sino que lo hacen a través de clases especializadas.


    Fase 22: diagrama de base de datos

    El diagrama de base de datos seguirá siendo parecido al de la versión anterior.

    Tendremos tablas como:

    • usuarios
    • categorias
    • productos
    • mensajes
    • pedidos
    • detalle_pedido
    • carrito
    • carrito_producto

    La tabla más importante al principio será productos, relacionada con categorias.

    La diferencia es que ahora intentaremos que las tablas tengan una correspondencia clara con las clases del proyecto.

    Por ejemplo:

    • Tabla productos → Clase Producto
    • Tabla categorias → Clase Categoria
    • Tabla usuarios → Clase Usuario

    Esto ayuda a entender la relación entre el modelo de datos y el modelo de objetos.


    Fase 23: preparación para hosting

    El despliegue en hosting será similar al de la versión anterior.

    Tendremos que subir:

    • Archivos PHP.
    • Carpeta clases/.
    • Carpeta includes/.
    • Carpeta css/.
    • Carpeta img/.
    • Base de datos exportada.

    También deberemos modificar los datos de conexión dentro de la clase Conexion.

    En local podríamos tener:

    private $servidor = "localhost";
    private $usuario = "root";
    private $password = "";
    private $baseDatos = "tienda_cuencos";

    En hosting tendremos otros datos:

    private $servidor = "servidor_del_hosting";
    private $usuario = "usuario_hosting";
    private $password = "password_hosting";
    private $baseDatos = "base_datos_hosting";

    Esta parte nos ayudará a entender que una aplicación debe adaptarse al entorno donde se ejecuta.


    Fase 24: ejecución en Docker

    También podremos preparar el proyecto para ejecutarlo en Docker.

    La diferencia principal será que la clase Conexion deberá conectarse al servicio de base de datos usando el nombre del contenedor.

    Por ejemplo, si en docker-compose.yml el servicio de base de datos se llama db, entonces en PHP usaremos:

    private $servidor = "db";

    Ejemplo de docker-compose.yml:

    services:
    web:
    image: php:8.2-apache
    ports:
    - "8080:80"
    volumes:
    - ./src:/var/www/html

    db:
    image: mariadb:10.11
    environment:
    MYSQL_ROOT_PASSWORD: root
    MYSQL_DATABASE: tienda_cuencos
    MYSQL_USER: usuario
    MYSQL_PASSWORD: usuario

    phpmyadmin:
    image: phpmyadmin
    ports:
    - "8081:80"
    environment:
    PMA_HOST: db

    Con esta configuración podríamos acceder a la web desde:

    http://localhost:8080

    Y a phpMyAdmin desde:

    http://localhost:8081

    Fase 25: documentación final del proyecto

    Al terminar esta versión, cada alumno deberá documentar el proyecto.

    La documentación debería incluir:

    • Explicación general del proyecto.
    • Diferencias entre la versión básica y la versión POO.
    • Estructura de carpetas.
    • Diagrama de clases.
    • Diagrama de base de datos.
    • Explicación de las clases principales.
    • Explicación de las clases DAO.
    • Explicación del CRUD.
    • Capturas de pantalla.
    • Problemas encontrados.
    • Mejoras posibles.
    • Conclusión personal.

    En esta versión será especialmente importante que el alumno sepa explicar por qué se han creado ciertas clases y qué responsabilidad tiene cada una.


    26. Qué aprenderemos con esta versión

    Con esta versión aprenderemos a organizar mejor un proyecto PHP.

    No solo veremos cómo hacer que una aplicación funcione, sino cómo estructurarla para que sea más clara y mantenible.

    Aprenderemos conceptos como:

    • Clases.
    • Objetos.
    • Atributos.
    • Métodos.
    • Constructores.
    • Getters y setters.
    • Encapsulación.
    • DAO.
    • Separación de responsabilidades.
    • Consultas preparadas.
    • Sesiones.
    • Subida de archivos.
    • Reutilización de código.
    • Relación entre tablas y clases.
    • Preparación del proyecto para hosting o Docker.

    Esta versión es un paso intermedio muy importante antes de trabajar con arquitecturas más avanzadas como MVC o frameworks como Laravel.


    27. Conclusión

    La versión orientada a objetos de Sonido Interior nos permitirá mejorar el mismo proyecto que ya conocemos.

    En lugar de empezar una aplicación totalmente nueva, evolucionaremos una tienda sencilla construida con PHP básico hacia una estructura más ordenada y profesional.

    Esto nos permitirá entender mejor por qué existe la programación orientada a objetos y qué problemas resuelve.

    La idea principal es que el alumno vea una evolución clara:

    Primero hacemos que funcione.

    Después hacemos que esté mejor organizado.

    Y finalmente preparamos el proyecto para poder crecer, mantenerse y desplegarse en un entorno real.

  • Proyecto web en PHP: tienda de cuencos tibetanos

    Proyecto web en PHP: tienda de cuencos tibetanos

    En este proyecto vamos a desarrollar paso a paso una aplicación web completa utilizando HTML, CSS, PHP y MySQL. La temática elegida será una tienda online de cuencos tibetanos, llamada Sonido Interior.

    El objetivo no es solamente crear una web bonita, sino entender cómo se construye una aplicación web real desde cero: primero diseñaremos la parte visual, después organizaremos el código con PHP, más adelante conectaremos la aplicación con una base de datos y finalmente prepararemos el proyecto para poder ejecutarlo en un hosting o dentro de un contenedor.

    Este proyecto nos servirá para repasar y aprender conceptos fundamentales del desarrollo web backend con PHP.


    1. Objetivo general del proyecto

    Vamos a crear una tienda web sencilla donde se puedan consultar productos relacionados con cuencos tibetanos, meditación y sonoterapia.

    La aplicación tendrá dos partes principales:

    La primera será la parte pública, visible para cualquier visitante. En ella se podrá ver la página de inicio, consultar el catálogo de productos y acceder a información básica de la tienda.

    La segunda será la parte administrativa, pensada para el propietario o administrador de la tienda. Desde esta zona se podrán añadir productos, consultar el listado de productos existentes, editar información y borrar productos.

    Aunque al principio trabajaremos con páginas estáticas, poco a poco iremos añadiendo funcionalidad real mediante PHP y MySQL.


    2. Tecnologías que vamos a utilizar

    Durante el proyecto trabajaremos con varias tecnologías habituales en el desarrollo web.

    Usaremos HTML para crear la estructura de las páginas. Con HTML definiremos los títulos, formularios, menús, tablas, tarjetas de productos y el resto de elementos visibles.

    Usaremos CSS para dar estilo al proyecto. Definiremos colores, tamaños, márgenes, distribución de columnas, botones, tarjetas y diseño general de la web.

    Usaremos PHP para programar la parte del servidor. PHP nos permitirá reutilizar partes comunes de la web, procesar formularios, conectarnos a la base de datos, trabajar con sesiones y generar contenido dinámico.

    Usaremos MySQL o MariaDB como sistema de base de datos. Ahí guardaremos los productos, categorías, usuarios administradores, mensajes y otros datos necesarios.

    También utilizaremos un servidor local, como XAMPP, MAMP, Laragon, Docker o una máquina Linux con Apache, PHP y MySQL instalados.


    3. Resultado final esperado

    Al terminar el proyecto tendremos una aplicación web funcional con las siguientes partes:

    • Página de inicio.
    • Catálogo público de productos.
    • Página de login para administración.
    • Panel administrativo.
    • Formulario para añadir productos.
    • Listado administrativo de productos.
    • Edición de productos.
    • Borrado de productos.
    • Subida de una imagen por producto.
    • Base de datos relacional.
    • Código organizado mediante includes.
    • Posibilidad de instalar el proyecto en un hosting o contenedor.

    El resultado será una primera versión de una tienda online. No será todavía una tienda profesional completa con pagos reales, pero sí tendrá la estructura base de una aplicación web real.


    4. Fase 1: análisis de la idea

    Antes de empezar a programar, lo primero será entender qué queremos construir.

    Nuestra tienda se llamará Sonido Interior y venderá productos como:

    • Cuencos tibetanos pequeños.
    • Cuencos tibetanos medianos.
    • Cuencos tibetanos grandes.
    • Cuencos grabados.
    • Mazas.
    • Cojines.
    • Sets de meditación.
    • Accesorios relacionados con la sonoterapia.

    Esta fase es importante porque antes de escribir código debemos saber qué páginas necesita la web, qué datos manejará y qué funcionalidades tendrá.

    En clase analizaremos las necesidades básicas de la aplicación y pensaremos qué información debe tener cada producto.

    Por ejemplo, un producto podrá tener:

    • Nombre.
    • Descripción.
    • Precio.
    • Stock.
    • Categoría.
    • Imagen.
    • Diámetro.
    • Peso.
    • Material.
    • Nota musical.
    • Procedencia.
    • Estado activo o inactivo.

    5. Fase 2: diseño del prototipo visual

    Después de definir la idea, crearemos un prototipo visual de la aplicación.

    El prototipo nos servirá como referencia antes de programar. No empezaremos directamente escribiendo código sin saber cómo queremos que se vea la web.

    Diseñaremos varias pantallas principales:

    • Home o página de inicio.
    • Página de login.
    • Página de alta de productos.
    • Catálogo público.
    • Listado administrativo de productos.

    La home tendrá una estética tranquila y artesanal, con colores beige, dorados, marrones suaves y blanco roto. La intención es que el diseño encaje con la temática de bienestar, meditación y sonido.

    En esta fase podremos usar herramientas como Figma para replicar el diseño y entender la distribución visual antes de pasar a HTML y CSS.


    6. Fase 3: creación de la maqueta en HTML y CSS

    Una vez tengamos claro el diseño, empezaremos a crear las páginas en HTML y CSS.

    En esta fase todavía no usaremos base de datos. El objetivo será construir la estructura visual de la aplicación.

    Crearemos páginas como:

    • index.html
    • catalogo.html
    • login.html
    • admin-alta-producto.html
    • admin-listado-productos.html

    También crearemos una carpeta para los estilos:

    • css/estilos.css

    Y una carpeta para las imágenes:

    • img/

    Durante esta parte trabajaremos conceptos importantes de HTML y CSS:

    • Estructura básica de una página HTML.
    • Etiquetas semánticas.
    • Formularios.
    • Tablas.
    • Tarjetas de producto.
    • Menús de navegación.
    • Botones.
    • Imágenes.
    • Organización visual mediante CSS.
    • Diseño de una zona pública y una zona administrativa.

    Esta fase es fundamental porque nos permite construir la parte visual sin mezclarnos todavía con la lógica de programación.


    7. Fase 4: conversión del proyecto a PHP

    Cuando las páginas HTML estén preparadas, convertiremos el proyecto a PHP.

    Esto significa que cambiaremos archivos como:

    • index.html por index.php
    • catalogo.html por catalogo.php
    • login.html por login.php

    La ventaja de usar PHP es que podremos dividir la web en partes reutilizables.

    Por ejemplo, muchas páginas tendrán la misma cabecera, el mismo menú y el mismo pie de página. No tiene sentido copiar y pegar ese código en todos los archivos.

    Para solucionarlo, crearemos una carpeta llamada:

    • includes/

    Dentro colocaremos archivos comunes como:

    • header.php
    • menu.php
    • menu-admin.php
    • footer.php

    Después, desde cada página principal podremos incluir esos fragmentos de código usando PHP.

    Ejemplo:

    <?php include("includes/header.php"); ?>
    <?php include("includes/menu.php"); ?>
    
    <main>
        <h1>Bienvenido a Sonido Interior</h1>
        <p>Cuencos tibetanos artesanales para meditación y bienestar.</p>
    </main>
    
    <?php include("includes/footer.php"); ?>
    

    Con esto aprenderemos uno de los usos más importantes de PHP al inicio: reutilizar partes comunes de una web.


    8. Fase 5: organización de carpetas del proyecto

    El proyecto debe estar bien organizado desde el principio.

    Una posible estructura será la siguiente:

    sonido-interior/
    │
    ├── index.php
    ├── catalogo.php
    ├── login.php
    ├── admin-alta-producto.php
    ├── admin-listado-productos.php
    │
    ├── includes/
    │   ├── header.php
    │   ├── menu.php
    │   ├── menu-admin.php
    │   └── footer.php
    │
    ├── css/
    │   └── estilos.css
    │
    ├── img/
    │   └── productos/
    │
    └── sql/
        └── base_datos.sql
    

    Más adelante añadiremos nuevos archivos para guardar, editar, borrar y consultar productos.

    La organización es importante porque en un proyecto real no podemos tener todos los archivos mezclados sin ningún criterio.


    9. Fase 6: diseño de la base de datos

    Cuando ya tengamos la parte visual y la estructura básica en PHP, pasaremos a crear la base de datos.

    La base de datos será la encargada de almacenar la información real del proyecto.

    Crearemos una base de datos llamada, por ejemplo:

    tienda_cuencos
    

    Dentro de ella podremos tener varias tablas:

    • usuarios
    • categorias
    • productos
    • mensajes
    • pedidos
    • detalle_pedido
    • carrito
    • carrito_producto

    Para empezar, nos centraremos sobre todo en las tablas más importantes:

    • usuarios
    • categorias
    • productos

    La tabla usuarios almacenará los datos de los administradores.

    La tabla categorias guardará las categorías de productos.

    La tabla productos guardará la información de cada cuenco o accesorio.


    10. Fase 7: creación de la tabla de productos

    La tabla de productos será una de las más importantes del proyecto.

    Podría tener una estructura similar a esta:

    CREATE TABLE productos (
        id_producto INT AUTO_INCREMENT PRIMARY KEY,
        nombre VARCHAR(150) NOT NULL,
        descripcion TEXT,
        precio DECIMAL(10,2) NOT NULL,
        stock INT NOT NULL,
        imagen VARCHAR(255),
        diametro DECIMAL(5,2),
        peso DECIMAL(8,2),
        material VARCHAR(100),
        nota_musical VARCHAR(50),
        procedencia VARCHAR(100),
        activo BOOLEAN DEFAULT true,
        fecha_alta DATETIME DEFAULT CURRENT_TIMESTAMP,
        id_categoria INT,
        FOREIGN KEY (id_categoria) REFERENCES categorias(id_categoria)
    );
    

    Con esta tabla podremos guardar la información de cada producto y luego mostrarla en la parte pública y administrativa.


    11. Fase 8: conexión de PHP con MySQL

    Para que PHP pueda trabajar con la base de datos, necesitaremos crear un archivo de conexión.

    Este archivo se puede llamar:

    includes/conexion.php
    

    Dentro escribiremos los datos necesarios para conectarnos al servidor MySQL.

    Ejemplo inicial:

    <?php
    
    $servidor = "localhost";
    $usuario = "root";
    $password = "";
    $baseDatos = "tienda_cuencos";
    
    $conexion = new mysqli($servidor, $usuario, $password, $baseDatos);
    
    if ($conexion->connect_error) {
        die("Error de conexión: " . $conexion->connect_error);
    }
    
    $conexion->set_charset("utf8");
    
    ?>
    

    A partir de este momento, cualquier página que necesite consultar la base de datos podrá incluir este archivo.

    Ejemplo:

    <?php include("includes/conexion.php"); ?>
    

    12. Fase 9: mostrar productos desde la base de datos

    Cuando tengamos productos guardados en la base de datos, modificaremos el catálogo público.

    Al principio, los productos estarán escritos directamente en HTML. Después, haremos que PHP los lea desde MySQL.

    La página catalogo.php realizará una consulta parecida a esta:

    $sql = "SELECT * FROM productos WHERE activo = 1";
    $resultado = $conexion->query($sql);
    

    Después recorreremos los resultados y mostraremos cada producto en una tarjeta.

    Ejemplo básico:

    while ($producto = $resultado->fetch_assoc()) {
        echo "<article class='tarjeta-producto'>";
        echo "<img src='img/productos/" . $producto["imagen"] . "' alt='" . $producto["nombre"] . "'>";
        echo "<h3>" . $producto["nombre"] . "</h3>";
        echo "<p>" . $producto["precio"] . " €</p>";
        echo "</article>";
    }
    

    Con esto veremos una de las grandes ventajas de usar PHP: la página se genera automáticamente con los datos de la base de datos.


    13. Fase 10: formulario de alta de productos

    Después crearemos la página para añadir productos desde la zona administrativa.

    La página será:

    admin-alta-producto.php
    

    El formulario tendrá campos como:

    • Nombre.
    • Descripción.
    • Categoría.
    • Precio.
    • Stock.
    • Diámetro.
    • Peso.
    • Material.
    • Nota musical.
    • Procedencia.
    • Imagen.

    El formulario enviará los datos mediante el método POST.

    Ejemplo:

    <form action="producto-guardar.php" method="POST" enctype="multipart/form-data">
        <label>Nombre del producto</label>
        <input type="text" name="nombre">
    
        <label>Precio</label>
        <input type="number" step="0.01" name="precio">
    
        <label>Stock</label>
        <input type="number" name="stock">
    
        <label>Imagen del producto</label>
        <input type="file" name="imagen">
    
        <button type="submit">Guardar producto</button>
    </form>
    

    El atributo enctype="multipart/form-data" será necesario para poder subir imágenes.


    14. Fase 11: guardar productos en la base de datos

    El formulario de alta enviará los datos a un archivo llamado:

    producto-guardar.php
    

    Ese archivo recogerá los datos enviados por POST y realizará un INSERT en la base de datos.

    Ejemplo simplificado:

    $nombre = $_POST["nombre"];
    $descripcion = $_POST["descripcion"];
    $precio = $_POST["precio"];
    $stock = $_POST["stock"];
    
    $sql = "INSERT INTO productos (nombre, descripcion, precio, stock)
            VALUES ('$nombre', '$descripcion', '$precio', '$stock')";
    
    $conexion->query($sql);
    

    Más adelante mejoraremos este código usando validaciones y consultas preparadas para evitar problemas de seguridad.


    15. Fase 12: subida de imágenes

    Cada producto tendrá una imagen principal.

    Para subir imágenes trabajaremos con la variable especial de PHP:

    $_FILES
    

    Cuando el usuario seleccione una imagen en el formulario, PHP podrá recibirla y moverla a una carpeta del proyecto.

    La carpeta recomendada será:

    img/productos/
    

    El proceso será:

    1. El usuario selecciona una imagen.
    2. El formulario envía el archivo al servidor.
    3. PHP recibe el archivo temporal.
    4. PHP mueve el archivo a img/productos/.
    5. Se guarda el nombre del archivo en la base de datos.

    Ejemplo básico:

    $nombreImagen = $_FILES["imagen"]["name"];
    $rutaTemporal = $_FILES["imagen"]["tmp_name"];
    $rutaDestino = "img/productos/" . $nombreImagen;
    
    move_uploaded_file($rutaTemporal, $rutaDestino);
    

    Después guardaremos $nombreImagen en la tabla productos.


    16. Fase 13: listado administrativo de productos

    Además del catálogo público, crearemos una página administrativa donde se puedan ver todos los productos en formato tabla.

    La página será:

    admin-listado-productos.php
    

    Mostrará datos como:

    • ID.
    • Imagen.
    • Nombre.
    • Categoría.
    • Precio.
    • Stock.
    • Estado.
    • Acciones.

    Las acciones principales serán:

    • Editar.
    • Borrar.
    • Añadir nuevo producto.

    Ejemplo de enlaces:

    <a href="producto-editar.php?id=3">Editar</a>
    <a href="producto-borrar.php?id=3">Borrar</a>
    

    Estos enlaces enviarán el identificador del producto por la URL usando el método GET.


    17. Fase 14: edición de productos

    La edición permitirá modificar los datos de un producto ya existente.

    Crearemos una página llamada:

    producto-editar.php
    

    Esta página recibirá el ID del producto mediante la URL.

    Ejemplo:

    producto-editar.php?id=3
    

    Con ese ID, PHP consultará la base de datos, recuperará los datos actuales del producto y los mostrará dentro de un formulario.

    Después, el formulario enviará los datos modificados a:

    producto-actualizar.php
    

    Ese archivo realizará una consulta UPDATE.

    Ejemplo:

    UPDATE productos 
    SET nombre = 'Cuenco tibetano mediano',
        precio = 89.00,
        stock = 5
    WHERE id_producto = 3;
    

    18. Fase 15: borrado de productos

    También implementaremos la opción de borrar productos.

    Podemos hacerlo de dos formas.

    La primera forma es el borrado físico, que elimina el producto de la base de datos.

    DELETE FROM productos WHERE id_producto = 3;
    

    La segunda forma es el borrado lógico, que no elimina realmente el producto, sino que lo marca como inactivo.

    UPDATE productos SET activo = false WHERE id_producto = 3;
    

    En este proyecto es recomendable usar borrado lógico, porque es más parecido a lo que se hace en muchas aplicaciones reales. De esta forma, el producto deja de mostrarse en el catálogo, pero sus datos siguen guardados.


    19. Fase 16: login de administración

    La zona administrativa no debería estar abierta para cualquier usuario.

    Por eso crearemos un sistema de login.

    Tendremos una página:

    login.php
    

    Y una tabla de usuarios en la base de datos.

    El formulario de login pedirá:

    • Usuario o email.
    • Contraseña.

    Cuando el administrador introduzca sus datos, PHP comprobará si existe ese usuario y si la contraseña es correcta.

    Si todo está bien, se creará una sesión.

    Ejemplo:

    session_start();
    $_SESSION["usuario"] = $usuario;
    $_SESSION["rol"] = "admin";
    

    A partir de ese momento, el administrador podrá acceder a las páginas privadas.


    20. Fase 17: protección de páginas privadas

    No basta con tener una página de login. También debemos proteger las páginas administrativas.

    Para ello crearemos un archivo:

    includes/seguridad.php
    

    Este archivo comprobará si existe una sesión iniciada.

    Ejemplo:

    <?php
    
    session_start();
    
    if (!isset($_SESSION["usuario"])) {
        header("Location: login.php");
        exit();
    }
    
    ?>
    

    Después incluiremos este archivo al principio de cada página privada.

    Ejemplo:

    <?php include("includes/seguridad.php"); ?>
    

    Así evitaremos que alguien pueda entrar directamente escribiendo la URL de una página administrativa.


    21. Fase 18: cierre de sesión

    También necesitaremos una opción para cerrar sesión.

    Crearemos un archivo:

    logout.php
    

    Este archivo destruirá la sesión y devolverá al usuario a la página de login o a la home.

    Ejemplo:

    <?php
    
    session_start();
    session_destroy();
    
    header("Location: login.php");
    exit();
    
    ?>
    

    22. Fase 19: validaciones básicas

    Una vez que la aplicación funcione, empezaremos a mejorarla con validaciones.

    Validar significa comprobar que los datos que llegan al servidor tienen sentido.

    Por ejemplo:

    • Que el nombre del producto no esté vacío.
    • Que el precio sea mayor que cero.
    • Que el stock sea un número entero.
    • Que la imagen tenga una extensión permitida.
    • Que el usuario y la contraseña del login no estén vacíos.

    Las validaciones son importantes porque nunca debemos confiar ciegamente en los datos que llegan desde un formulario.


    23. Fase 20: mejora de seguridad con consultas preparadas

    Al principio podemos hacer consultas SQL sencillas para entender el funcionamiento.

    Pero después debemos mejorar la seguridad usando consultas preparadas.

    Las consultas preparadas ayudan a evitar ataques de inyección SQL.

    En lugar de meter directamente los datos dentro de la consulta, usamos parámetros.

    Ejemplo orientativo:

    $stmt = $conexion->prepare("INSERT INTO productos (nombre, precio, stock) VALUES (?, ?, ?)");
    $stmt->bind_param("sdi", $nombre, $precio, $stock);
    $stmt->execute();
    

    Esto es más seguro y más profesional que concatenar directamente los valores dentro de una cadena SQL.


    24. Fase 21: mejora de contraseñas

    Las contraseñas no deben guardarse nunca en texto plano.

    Para guardar contraseñas correctamente usaremos:

    password_hash()
    

    Y para comprobarlas:

    password_verify()
    

    Ejemplo para crear una contraseña cifrada:

    $passwordCifrada = password_hash($password, PASSWORD_DEFAULT);
    

    Ejemplo para comprobar una contraseña:

    if (password_verify($passwordIntroducida, $passwordGuardada)) {
        echo "Contraseña correcta";
    }
    

    Esta parte es fundamental para entender la seguridad básica de una aplicación web.


    25. Fase 22: preparación para hosting

    Cuando el proyecto funcione en local, veremos cómo prepararlo para subirlo a un hosting.

    Para ello tendremos que revisar varias cosas:

    • Que los archivos estén bien organizados.
    • Que la base de datos esté exportada en un archivo .sql.
    • Que el archivo de conexión tenga los datos correctos del hosting.
    • Que las rutas de imágenes funcionen correctamente.
    • Que las carpetas de subida tengan permisos adecuados.
    • Que no subamos archivos innecesarios.

    En un hosting real, los datos de conexión no suelen ser:

    localhost
    root
    sin contraseña
    

    Normalmente el proveedor nos dará:

    • Servidor de base de datos.
    • Nombre de la base de datos.
    • Usuario de base de datos.
    • Contraseña de base de datos.

    Tendremos que modificar el archivo conexion.php con esos datos.


    26. Fase 23: exportación e importación de la base de datos

    Para mover el proyecto desde nuestro equipo local a un hosting, tendremos que exportar la base de datos.

    Si usamos phpMyAdmin, el proceso será:

    1. Entrar en phpMyAdmin.
    2. Seleccionar la base de datos.
    3. Ir a la opción exportar.
    4. Guardar el archivo .sql.

    Después, en el hosting:

    1. Crear una nueva base de datos.
    2. Entrar en phpMyAdmin del hosting.
    3. Importar el archivo .sql.
    4. Revisar que las tablas y datos se han creado correctamente.

    Esta parte nos permitirá entender que una aplicación web no está formada solo por archivos PHP, sino también por una base de datos que debe acompañar al proyecto.


    27. Fase 24: despliegue en un contenedor Docker

    Además del hosting tradicional, también veremos la posibilidad de ejecutar el proyecto usando contenedores.

    Docker nos permite levantar un entorno completo con Apache, PHP y MySQL sin instalar todo manualmente en el sistema.

    Una estructura sencilla podría tener:

    • Un contenedor para Apache con PHP.
    • Un contenedor para MySQL o MariaDB.
    • Un contenedor opcional para phpMyAdmin.

    El proyecto podría tener un archivo:

    docker-compose.yml
    

    Con este archivo podríamos levantar todo el entorno usando un comando.

    Ejemplo orientativo:

    services:
      web:
        image: php:8.2-apache
        ports:
          - "8080:80"
        volumes:
          - ./src:/var/www/html
    
      db:
        image: mariadb:10.11
        environment:
          MYSQL_ROOT_PASSWORD: root
          MYSQL_DATABASE: tienda_cuencos
          MYSQL_USER: usuario
          MYSQL_PASSWORD: usuario
    
      phpmyadmin:
        image: phpmyadmin
        ports:
          - "8081:80"
        environment:
          PMA_HOST: db
    

    Con esta opción podríamos acceder a la web desde:

    http://localhost:8080
    

    Y a phpMyAdmin desde:

    http://localhost:8081
    

    En este caso, el servidor de base de datos dentro de conexion.php no sería localhost, sino el nombre del servicio de Docker:

    $servidor = "db";
    

    Esto es muy importante, porque dentro de Docker los contenedores se comunican entre ellos usando el nombre del servicio.


    28. Fase 25: documentación final del proyecto

    Al terminar el proyecto, cada alumno deberá documentar el trabajo realizado.

    La documentación debería incluir:

    • Descripción del proyecto.
    • Tecnologías utilizadas.
    • Capturas de pantalla.
    • Estructura de carpetas.
    • Explicación de la base de datos.
    • Diagrama de base de datos.
    • Explicación de las páginas públicas.
    • Explicación de las páginas privadas.
    • Explicación del CRUD.
    • Problemas encontrados.
    • Mejoras posibles.
    • Conclusión personal.

    Documentar el proyecto es importante porque en el desarrollo real no basta con que algo funcione. También hay que saber explicar cómo se ha construido y por qué se ha hecho de esa manera.


    29. Posibles ampliaciones

    Cuando la versión básica esté terminada, podremos añadir mejoras.

    Algunas posibilidades son:

    • Buscador de productos.
    • Filtro por categoría.
    • Página de detalle de producto.
    • Carrito de compra.
    • Registro de clientes.
    • Gestión de pedidos.
    • Mensajes de contacto.
    • Panel con estadísticas.
    • Paginación de productos.
    • Validación avanzada de formularios.
    • Mejora de seguridad.
    • Diseño responsive para móviles.
    • Uso de variables de entorno.
    • Separación del código en funciones.
    • Primer acercamiento a arquitectura MVC.

    Estas ampliaciones nos permitirán convertir el proyecto en una aplicación cada vez más completa.


    30. Qué aprenderemos con este proyecto

    Este proyecto nos permitirá practicar muchos conceptos importantes.

    Aprenderemos a transformar una idea en una aplicación web. Veremos cómo pasar de un prototipo visual a páginas HTML y CSS, y después cómo convertir esas páginas en una aplicación dinámica con PHP.

    También aprenderemos a trabajar con formularios, recibir datos por POST, enviar datos por GET, consultar una base de datos, insertar registros, actualizar información y borrar datos.

    Además, veremos cómo proteger una zona privada con sesiones, cómo subir imágenes al servidor y cómo preparar el proyecto para ejecutarlo fuera del entorno local.

    El objetivo final es que cada alumno entienda el ciclo completo de desarrollo de una pequeña aplicación web: desde la idea inicial hasta su posible despliegue.


    31. Conclusión

    La tienda de cuencos tibetanos Sonido Interior será nuestro proyecto base para aprender desarrollo web con PHP.

    A lo largo de las clases iremos construyendo la aplicación paso a paso. Empezaremos por lo visual, seguiremos con la organización del código, añadiremos base de datos, implementaremos funcionalidades reales y terminaremos preparando el proyecto para su publicación.

    Este proyecto nos servirá como punto de partida para entender cómo funcionan muchas aplicaciones web reales.

    La clave será avanzar poco a poco, comprender cada fase y no limitarnos a copiar código. Cada parte del proyecto tendrá un objetivo concreto y nos ayudará a construir una base sólida para proyectos más avanzados.

  • Proyecto Mundo Oficios: diseño y desarrollo de una tienda online de muñecos por profesiones

    Proyecto Mundo Oficios: diseño y desarrollo de una tienda online de muñecos por profesiones

    Introducción

    En este proyecto vamos a diseñar, analizar y desarrollar una aplicación web completa basada en una tienda online ficticia llamada Mundo Oficios.

    La idea principal de la aplicación es crear una tienda de muñecos de estilo coleccionable, inspirados en diferentes profesiones: bomberos, doctoras, astronautas, chefs, policías, profesoras, constructores y muchas otras figuras similares.

    El objetivo no es únicamente crear una página bonita, sino recorrer varias fases reales del desarrollo de una aplicación web: desde la idea inicial y el diseño visual, hasta el análisis de clases, la base de datos, los casos de uso y la futura implementación en Java.

    Este proyecto nos servirá para practicar conceptos fundamentales del desarrollo de aplicaciones web, combinando diseño, programación, bases de datos y organización de un proyecto.


    1. Objetivo general del proyecto

    El objetivo de Mundo Oficios es construir una aplicación web que permita mostrar y gestionar productos de una tienda online.

    La aplicación tendrá dos partes principales:

    Parte pública

    Será la zona visible para cualquier usuario que visite la web. En esta parte se mostrarán los productos, las categorías, los packs, la información corporativa y las llamadas a la acción para consultar o comprar productos.

    La parte pública representa lo que vería un cliente normal al entrar en la tienda.

    Parte privada o panel de administración

    Será la zona interna de la aplicación. Solo podrán acceder usuarios autorizados, como administradores o gestores de la tienda.

    Desde esta zona privada se podrán dar de alta productos, modificar información, gestionar categorías, subir imágenes, controlar stock, revisar pedidos y consultar datos importantes de la tienda.


    2. Qué vamos a trabajar con este proyecto

    Este proyecto está pensado para trabajar varias competencias al mismo tiempo.

    Durante el desarrollo de Mundo Oficios vamos a practicar:

    • Diseño de interfaces con Figma.
    • Creación de prototipos de páginas web.
    • Organización visual de una web pública.
    • Diseño de una zona privada de administración.
    • Análisis de requisitos.
    • Diagrama de casos de uso.
    • Diagrama de clases.
    • Diagrama entidad-relación de base de datos.
    • Modelado de clases Java.
    • Diseño de tablas SQL.
    • Relación entre frontend, backend y base de datos.
    • Preparación de formularios web.
    • Gestión de productos.
    • Organización de imágenes, categorías y etiquetas.
    • Conceptos básicos de una tienda online.

    La intención es que el alumno no vea cada parte como algo aislado, sino como piezas de un mismo proyecto.

    Una aplicación real no se construye solo escribiendo código. Antes de programar hay que pensar qué necesita el usuario, cómo se va a organizar la información, qué pantallas va a tener la aplicación, qué datos se van a guardar y qué clases representarán esos datos dentro del programa.


    3. Descripción de la aplicación

    Mundo Oficios será una tienda online ficticia especializada en muñecos de diferentes profesiones.

    Cada producto representará una figura concreta. Por ejemplo:

    • Leo Bombero.
    • Nora Doctora.
    • Max Astronauta.
    • Sofía Chef.
    • Policía urbano.
    • Profesora de primaria.
    • Constructor.
    • Mecánica.
    • Científica.
    • Piloto.
    • Enfermero.

    Cada muñeco tendrá una ficha de producto con información básica:

    • Nombre del producto.
    • Profesión.
    • Categoría.
    • Precio.
    • Precio en oferta, si existe.
    • Stock disponible.
    • Edad recomendada.
    • Descripción corta.
    • Descripción completa.
    • Imágenes del producto.
    • Etiquetas.
    • Estado de publicación.
    • Indicación de si está visible o no en la tienda.

    La tienda estará organizada por categorías. Por ejemplo:

    • Emergencias.
    • Salud.
    • Educación.
    • Espacio.
    • Construcción.
    • Cocina.

    Esto nos permite trabajar una estructura típica de comercio electrónico, pero con una temática sencilla, visual y fácil de entender.


    4. Diseño de la página de inicio pública

    La primera parte del proyecto será el diseño de la home o página de inicio.

    La home es una de las páginas más importantes de una web, porque suele ser la primera pantalla que ve el usuario al entrar. Debe explicar de forma rápida qué ofrece la tienda, transmitir confianza y guiar al visitante hacia las secciones principales.

    En nuestro caso, la home de Mundo Oficios tendrá un diseño corporativo, limpio y moderno.

    Elementos principales de la home

    La página de inicio incluirá:

    Cabecera

    La cabecera contendrá el logotipo de Mundo Oficios, un menú de navegación y algunos iconos básicos.

    El menú puede incluir opciones como:

    • Inicio.
    • Profesiones.
    • Categorías.
    • Packs.
    • Sobre nosotros.
    • Contacto.

    También aparecerán iconos de búsqueda, usuario y carrito.

    La cabecera debe ser clara, sencilla y fácil de reconocer. En una web real, el usuario debe poder encontrar rápidamente las secciones importantes.

    Hero principal

    El hero es la sección principal que aparece al inicio de la página.

    En este proyecto, el hero tendrá una frase destacada como:

    Figuras articuladas que inspiran futuros

    Debajo se puede incluir un texto breve explicando la propuesta de la tienda:

    Descubre muñecos de profesiones diseñados para imaginar, jugar y aprender sin límites.

    También aparecerán botones de acción, por ejemplo:

    • Ver catálogo.
    • Conoce nuestra historia.

    El hero debe combinar texto, botones e imagen. En este caso, la imagen principal será un conjunto de muñecos representando varias profesiones.

    Sección Nuestra propuesta

    Esta sección explicará el valor de la marca.

    Puede incluir tres bloques:

    • Calidad que se siente.
    • Colecciona y combina.
    • Aprende jugando.

    Esta parte es importante porque no todo en una tienda online debe ser producto y precio. También hay que transmitir una idea de marca.

    Categorías

    La sección de categorías permitirá al usuario entrar en grupos de productos.

    Por ejemplo:

    • Emergencias.
    • Salud.
    • Espacio.
    • Construcción.

    Cada categoría puede representarse con una tarjeta sencilla, un icono y un enlace para acceder a ella.

    Productos destacados

    En lugar de mostrar muchos productos, la versión más corporativa de la home mostrará pocos productos destacados.

    Esto ayuda a que el diseño sea más limpio y elegante.

    Por ejemplo, podemos mostrar solo dos productos:

    • Leo Bombero.
    • Nora Doctora.

    Cada tarjeta de producto puede incluir:

    • Imagen.
    • Nombre.
    • Categoría.
    • Precio.
    • Valoración.
    • Botón de añadir al carrito.

    La home también puede incluir un banner para packs o colecciones.

    Por ejemplo:

    Packs y colecciones para cada aventura

    Esta sección puede servir para promocionar productos agrupados o descuentos especiales.

    Sección de confianza

    Una tienda online necesita transmitir seguridad.

    Por eso incluiremos una sección con elementos como:

    • Seguridad ante todo.
    • Diseño pensado para niños.
    • Envíos rápidos y seguros.
    • Atención cercana.

    Estos bloques ayudan a reforzar la confianza del usuario antes de comprar.

    Newsletter o llamada a la acción

    Al final de la página puede incluirse una sección para que el usuario deje su correo electrónico y reciba novedades u ofertas.

    Por ejemplo:

    Inspírate con novedades y ofertas exclusivas

    Esta parte nos permite practicar formularios simples dentro del diseño.

    El footer cerrará la página con enlaces secundarios, redes sociales, métodos de pago y datos básicos de la tienda.


    5. Diseño de la parte privada

    Además de la web pública, el proyecto tendrá una parte privada.

    La parte privada es el panel de administración de la tienda. No está pensada para clientes, sino para las personas que gestionan el contenido y los productos.

    En una aplicación real, este panel estaría protegido mediante usuario y contraseña.

    Página de login

    Antes de entrar al panel, el administrador deberá iniciar sesión.

    La pantalla de login tendrá un diseño corporativo y limpio, con dos zonas principales:

    Zona visual de marca

    En una parte de la pantalla aparecerá una imagen corporativa, con varios muñecos y un mensaje relacionado con la gestión de la tienda.

    Por ejemplo:

    Gestiona tu tienda de profesiones desde un solo lugar

    Esta zona ayuda a reforzar la identidad visual del proyecto.

    Formulario de acceso

    En la otra parte de la pantalla aparecerá el formulario de login.

    Tendrá los siguientes campos:

    • Correo electrónico.
    • Contraseña.
    • Checkbox de recordarme.
    • Enlace para recuperar contraseña.
    • Botón de iniciar sesión.
    • Opción secundaria de acceso con Google.
    • Texto de ayuda o soporte.

    Aunque en una primera fase no implementemos todas estas funcionalidades, sí es interesante diseñarlas para entender cómo sería una aplicación real.


    6. Alta de productos en la parte privada

    Una de las pantallas más importantes del panel privado será la de alta de producto.

    Esta pantalla permitirá al administrador crear una nueva ficha de producto para la tienda.

    Estructura general

    La pantalla tendrá:

    • Menú lateral.
    • Barra superior.
    • Zona principal de formulario.
    • Paneles auxiliares a la derecha.

    El menú lateral permitirá acceder a las diferentes secciones del panel.

    Puede incluir opciones como:

    • Resumen.
    • Productos.
    • Categorías.
    • Pedidos.
    • Clientes.
    • Promociones.
    • Estadísticas.
    • Ajustes.

    La opción Productos aparecerá destacada, porque estaremos dentro de esa sección.

    Barra superior

    La barra superior puede incluir:

    • Campo de búsqueda.
    • Icono de notificaciones.
    • Perfil del administrador.

    Estos elementos son habituales en paneles de administración modernos.

    Formulario de alta

    La parte central de la pantalla contendrá el formulario para crear un producto.

    Los campos principales serán:

    • Nombre del producto.
    • SKU.
    • Precio.
    • Precio oferta.
    • Categoría.
    • Profesión.
    • Stock.
    • Edad recomendada.
    • Descripción corta.
    • Descripción completa.
    • Etiquetas.
    • Producto destacado.
    • Visible en tienda.
    • Estado del producto.

    Este formulario nos permitirá trabajar muchos tipos de controles:

    • Inputs de texto.
    • Inputs numéricos.
    • Selectores desplegables.
    • Textareas.
    • Switches.
    • Radios.
    • Botones.
    • Zona de subida de imágenes.

    Galería de imágenes

    Cada producto podrá tener varias imágenes.

    Por ejemplo:

    • Imagen frontal.
    • Imagen lateral.
    • Imagen trasera.
    • Imagen de detalle.

    En el diseño aparecerá una sección de galería donde se podrán subir imágenes del producto.

    En una aplicación real, estas imágenes se guardarían en el servidor o en un servicio de almacenamiento, y en la base de datos se guardaría la ruta o URL de cada imagen.

    Panel de vista previa

    A la derecha del formulario puede aparecer una vista previa del producto.

    Esta vista previa permite comprobar cómo se verá el producto antes de publicarlo.

    Puede mostrar:

    • Imagen principal.
    • Nombre.
    • Categoría.
    • Precio.
    • Precio de oferta.
    • Stock.
    • SKU.

    Este tipo de panel ayuda mucho en aplicaciones de administración, porque permite validar la información antes de guardarla.

    Panel de organización

    También puede haber un bloque para información interna:

    • Colección.
    • Proveedor.
    • Clase de envío.
    • Notas internas.

    Esto no siempre será visible para el cliente, pero sí puede ser útil para la gestión interna de la tienda.

    Botones finales

    Al final del formulario tendremos dos acciones principales:

    • Guardar borrador.
    • Publicar producto.

    Esto nos permite explicar la diferencia entre un producto que está guardado pero no publicado y un producto que ya aparece en la tienda pública.


    7. Diagrama de casos de uso

    El diagrama de casos de uso nos ayuda a entender qué puede hacer cada tipo de usuario dentro del sistema.

    En este proyecto tenemos varios actores:

    Visitante

    Es una persona que entra en la web sin estar registrada.

    Puede:

    • Ver la página de inicio.
    • Ver el catálogo.
    • Filtrar productos.
    • Ver fichas de producto.
    • Registrarse o iniciar sesión.

    Cliente

    Es un usuario que puede comprar o consultar sus pedidos.

    Puede:

    • Ver productos.
    • Añadir productos al carrito.
    • Realizar pedidos.
    • Pagar pedidos.
    • Consultar sus pedidos.

    Administrador o gestor

    Es el usuario que accede a la parte privada.

    Puede:

    • Acceder al panel privado.
    • Gestionar productos.
    • Dar de alta productos.
    • Editar productos.
    • Eliminar o desactivar productos.
    • Subir imágenes.
    • Gestionar categorías.
    • Gestionar profesiones.
    • Gestionar pedidos.
    • Gestionar promociones.
    • Consultar estadísticas.
    • Gestionar usuarios.

    Pasarela de pago

    Es un sistema externo que interviene cuando el cliente paga un pedido.

    En una aplicación real, podría ser PayPal, Stripe, Redsys u otra plataforma similar.

    El diagrama de casos de uso nos sirve para ver el sistema desde el punto de vista funcional. No se centra en las clases ni en la base de datos, sino en las acciones que los usuarios pueden realizar.


    8. Diagrama de clases

    El diagrama de clases representa la estructura del sistema desde el punto de vista de la programación orientada a objetos.

    En Java, cada clase representará un concepto importante del proyecto.

    Clase Producto

    La clase Producto es una de las más importantes.

    Representa cada muñeco que se vende en la tienda.

    Puede tener atributos como:

    • id.
    • nombre.
    • sku.
    • precio.
    • precioOferta.
    • stock.
    • descripcionCorta.
    • descripcionCompleta.
    • edadRecomendada.
    • destacado.
    • visible.
    • estado.

    También puede tener métodos como:

    • publicar.
    • guardarBorrador.
    • aplicarOferta.
    • quitarOferta.
    • actualizarStock.
    • estaDisponible.

    Esta clase estará relacionada con otras clases como Categoria, Profesion, ImagenProducto, Etiqueta, Coleccion y Proveedor.

    Clase Categoria

    La clase Categoria sirve para agrupar productos.

    Por ejemplo:

    • Emergencias.
    • Salud.
    • Educación.
    • Espacio.
    • Construcción.
    • Cocina.

    Una categoría puede tener muchos productos.

    Clase Profesion

    La clase Profesion representa la profesión concreta del muñeco.

    Por ejemplo:

    • Bombero.
    • Doctora.
    • Astronauta.
    • Chef.
    • Policía.
    • Profesora.

    Es importante diferenciar categoría y profesión.

    Por ejemplo, un producto puede estar en la categoría Emergencias y tener la profesión Bombero.

    Clase ImagenProducto

    Un producto puede tener varias imágenes.

    Por eso existe la clase ImagenProducto.

    Esta clase puede guardar:

    • URL de la imagen.
    • Texto alternativo.
    • Si es imagen principal.
    • Orden de aparición.

    Esto permite que un mismo producto tenga una galería de imágenes.

    Clase Etiqueta

    Las etiquetas permiten clasificar productos de forma más flexible.

    Por ejemplo:

    • bombero.
    • emergencias.
    • regalo.
    • colección.
    • oferta.
    • niños.

    Un producto puede tener muchas etiquetas y una etiqueta puede estar asociada a muchos productos.

    Por eso esta relación suele convertirse en una tabla intermedia en la base de datos.

    Clase Cliente

    La clase Cliente representa a una persona que compra en la tienda.

    Puede tener:

    • nombre.
    • apellidos.
    • email.
    • teléfono.

    Un cliente puede tener varias direcciones y varios pedidos.

    Clase Pedido

    La clase Pedido representa una compra realizada por un cliente.

    Puede tener:

    • fecha.
    • estado.
    • subtotal.
    • gastos de envío.
    • total.

    Un pedido estará formado por varias líneas de pedido.

    Clase LineaPedido

    La clase LineaPedido representa cada producto concreto dentro de un pedido.

    Por ejemplo, si un cliente compra dos muñecos de bombero y uno de astronauta, el pedido tendrá dos líneas:

    • Línea 1: Leo Bombero, cantidad 2.
    • Línea 2: Max Astronauta, cantidad 1.

    Cada línea tiene su cantidad, precio unitario y subtotal.

    Clase Pago

    La clase Pago representa la información relacionada con el pago del pedido.

    Puede tener:

    • método de pago.
    • estado del pago.
    • importe.
    • fecha de pago.

    Clase Usuario

    La clase Usuario representa a quien accede al sistema.

    Puede tener distintos roles:

    • ADMIN.
    • GESTOR.
    • CLIENTE.

    En la parte privada nos interesan especialmente los usuarios administradores y gestores.


    9. Diagrama de base de datos

    El diagrama de base de datos representa cómo se guardará la información en tablas.

    Aunque el diagrama de clases y el diagrama de base de datos están relacionados, no son exactamente lo mismo.

    El diagrama de clases representa la estructura del programa en Java.

    El diagrama de base de datos representa cómo se almacenan los datos en MySQL, MariaDB u otro sistema similar.

    Tabla productos

    La tabla principal será productos.

    Contendrá campos como:

    • id_producto.
    • id_categoria.
    • id_profesion.
    • id_coleccion.
    • id_proveedor.
    • id_clase_envio.
    • nombre.
    • sku.
    • precio.
    • precio_oferta.
    • stock.
    • edad_recomendada.
    • descripcion_corta.
    • descripcion_completa.
    • destacado.
    • visible.
    • estado.
    • fecha_creacion.

    Esta tabla tendrá varias claves foráneas para relacionarse con otras tablas.

    Tabla categorias

    La tabla categorias guardará las categorías comerciales de la tienda.

    Campos principales:

    • id_categoria.
    • nombre.
    • descripcion.
    • icono.
    • activa.

    Tabla profesiones

    La tabla profesiones guardará las profesiones disponibles.

    Campos principales:

    • id_profesion.
    • nombre.
    • descripcion.
    • icono.

    Tabla imagenes_producto

    La tabla imagenes_producto guardará las imágenes asociadas a cada producto.

    Campos principales:

    • id_imagen.
    • id_producto.
    • url.
    • texto_alternativo.
    • principal.
    • orden.

    Esta tabla tiene una relación de uno a muchos con productos: un producto puede tener muchas imágenes.

    Tabla etiquetas

    La tabla etiquetas guardará etiquetas reutilizables.

    Como la relación entre productos y etiquetas es de muchos a muchos, necesitaremos una tabla intermedia llamada producto_etiqueta.

    Tabla clientes

    La tabla clientes guardará la información de los compradores.

    Campos principales:

    • id_cliente.
    • nombre.
    • apellidos.
    • email.
    • teléfono.
    • fecha_alta.

    Tabla direcciones

    La tabla direcciones permitirá guardar una o varias direcciones por cliente.

    Campos principales:

    • id_direccion.
    • id_cliente.
    • calle.
    • ciudad.
    • provincia.
    • codigo_postal.
    • país.

    Tabla pedidos

    La tabla pedidos guardará la información general de cada pedido.

    Campos principales:

    • id_pedido.
    • id_cliente.
    • id_direccion.
    • fecha.
    • estado.
    • subtotal.
    • gastos_envio.
    • total.

    Tabla lineas_pedido

    La tabla lineas_pedido guardará los productos incluidos en cada pedido.

    Campos principales:

    • id_linea.
    • id_pedido.
    • id_producto.
    • cantidad.
    • precio_unitario.
    • subtotal.

    Tabla pagos

    La tabla pagos guardará la información de pago del pedido.

    Campos principales:

    • id_pago.
    • id_pedido.
    • metodo.
    • estado.
    • importe.
    • fecha_pago.

    Tabla promociones

    La tabla promociones permitirá gestionar códigos de descuento o promociones.

    Campos principales:

    • id_promocion.
    • nombre.
    • codigo.
    • descuento.
    • fecha_inicio.
    • fecha_fin.
    • activa.

    Como una promoción puede aplicarse a varios productos, y un producto puede tener varias promociones, usaremos una tabla intermedia llamada producto_promocion.


    10. Fases del proyecto

    Para que el trabajo sea más ordenado, dividiremos el proyecto en varias fases.

    Fase 1: Comprensión del proyecto

    En esta fase analizaremos qué queremos construir.

    Responderemos preguntas como:

    • ¿Qué es Mundo Oficios?
    • ¿Qué usuarios tendrá?
    • ¿Qué productos se venderán?
    • ¿Qué partes tendrá la web?
    • ¿Qué necesita el administrador?
    • ¿Qué necesita el cliente?

    El objetivo de esta fase es entender el problema antes de diseñar o programar.

    Fase 2: Diseño visual en Figma

    En esta fase usaremos Figma para diseñar las pantallas principales.

    Trabajaremos:

    • Home pública.
    • Login de la parte privada.
    • Pantalla de alta de producto.
    • Elementos reutilizables.
    • Botones.
    • Tarjetas.
    • Formularios.
    • Menús.
    • Espaciados.
    • Colores.
    • Tipografía.

    El objetivo es que los alumnos entiendan que antes de programar una pantalla conviene diseñarla.

    Figma nos permite pensar la experiencia del usuario sin preocuparnos todavía por el código.

    Fase 3: Casos de uso

    En esta fase identificaremos qué puede hacer cada actor dentro del sistema.

    Trabajaremos con el diagrama de casos de uso para representar:

    • Visitante.
    • Cliente.
    • Administrador.
    • Pasarela de pago.

    El objetivo es comprender las funcionalidades principales de la aplicación.

    Fase 4: Diagrama de clases

    En esta fase pasaremos del análisis funcional a la estructura orientada a objetos.

    Diseñaremos las clases Java que representarán el sistema:

    • Producto.
    • Categoría.
    • Profesión.
    • ImagenProducto.
    • Cliente.
    • Pedido.
    • LíneaPedido.
    • Pago.
    • Usuario.

    El objetivo es entender cómo se transforma una idea de negocio en clases, atributos, métodos y relaciones.

    Fase 5: Diseño de base de datos

    En esta fase diseñaremos las tablas necesarias para almacenar la información.

    Trabajaremos con:

    • Claves primarias.
    • Claves foráneas.
    • Relaciones uno a muchos.
    • Relaciones muchos a muchos.
    • Tablas intermedias.
    • Tipos de datos.
    • Normalización básica.

    El objetivo es que los alumnos comprendan que la base de datos debe reflejar correctamente la estructura de la aplicación.

    Fase 6: Implementación de clases Java

    Una vez diseñado el modelo, podremos empezar a programar las clases Java.

    Por ejemplo:

    • Producto.java.
    • Categoria.java.
    • Profesion.java.
    • Cliente.java.
    • Pedido.java.
    • LineaPedido.java.

    Al principio pueden ser clases sencillas con atributos, constructores, getters, setters y algunos métodos básicos.

    Después podremos avanzar hacia una estructura más completa.

    Fase 7: Formularios web

    En esta fase empezaremos a transformar el diseño en páginas reales.

    Trabajaremos formularios como:

    • Login.
    • Alta de producto.
    • Registro de cliente.
    • Edición de producto.

    El formulario de alta de producto será especialmente importante, porque conectará con la lógica de productos de la aplicación.

    Fase 8: Conexión con base de datos

    En esta fase conectaremos la aplicación Java con la base de datos.

    Dependiendo del nivel del grupo, podremos hacerlo con:

    • JDBC.
    • DAO.
    • Servlets.
    • HTML o plantillas.
    • Frameworks más avanzados si procede.

    El objetivo será guardar, consultar, modificar y eliminar productos desde la base de datos.

    Fase 9: Panel privado funcional

    En esta fase construiremos la parte privada.

    El administrador podrá:

    • Iniciar sesión.
    • Ver productos.
    • Crear productos.
    • Editar productos.
    • Desactivar productos.
    • Subir o asignar imágenes.
    • Gestionar categorías.
    • Ver pedidos.

    No es necesario hacer todo perfecto desde el principio. Lo importante es avanzar por versiones.

    Fase 10: Revisión, pruebas y mejoras

    En la última fase revisaremos el proyecto.

    Comprobaremos:

    • Que las pantallas funcionan.
    • Que los formularios envían datos correctamente.
    • Que se validan los campos importantes.
    • Que la base de datos guarda la información.
    • Que las relaciones están bien planteadas.
    • Que el código está organizado.
    • Que el diseño es coherente.

    También podremos plantear mejoras futuras.


    11. Versión mínima del proyecto

    Como el proyecto puede crecer mucho, conviene definir una versión mínima.

    La versión mínima debería permitir:

    • Ver una home pública.
    • Ver un catálogo básico.
    • Entrar al panel privado.
    • Dar de alta productos.
    • Listar productos.
    • Editar productos.
    • Desactivar productos.
    • Guardar productos en base de datos.

    Con eso ya tendríamos una aplicación bastante completa para trabajar conceptos esenciales.

    No hace falta implementar desde el primer momento pagos reales, estadísticas avanzadas o gestión completa de clientes.


    12. Versión ampliada del proyecto

    Una vez terminada la versión mínima, se pueden añadir mejoras.

    Por ejemplo:

    • Carrito de compra.
    • Registro de clientes.
    • Gestión de pedidos.
    • Subida real de imágenes.
    • Buscador de productos.
    • Filtros por categoría.
    • Filtros por profesión.
    • Promociones y códigos de descuento.
    • Productos destacados.
    • Gestión de stock.
    • Panel de estadísticas.
    • Control de roles.
    • Validaciones avanzadas.
    • Diseño responsive.
    • API REST.
    • Integración con pasarela de pago simulada.

    Estas mejoras nos permitirían convertir el proyecto en una aplicación mucho más completa.


    13. Relación entre diseño, Java y base de datos

    Uno de los puntos más importantes de este proyecto es entender cómo se conectan las diferentes partes.

    Por ejemplo, en el diseño de Figma tenemos un formulario con el campo:

    Nombre del producto

    En Java ese dato puede corresponder al atributo:

    nombre

    Dentro de la clase:

    Producto

    Y en la base de datos se guardará en la columna:

    nombre

    Dentro de la tabla:

    productos

    Este mismo razonamiento se repite con otros campos:

    • Precio.
    • Stock.
    • Categoría.
    • Profesión.
    • Descripción.
    • Estado.
    • Visible.
    • Destacado.

    Así los alumnos pueden ver que el diseño no está separado del código. Lo que se dibuja en Figma después se convierte en HTML, formularios, clases Java y columnas de base de datos.


    14. Ejemplo de flujo: alta de producto

    Vamos a pensar en un ejemplo concreto.

    Un administrador quiere dar de alta un nuevo producto llamado Leo Bombero.

    Paso 1: Accede al panel privado

    El administrador entra en la pantalla de login e introduce su correo y contraseña.

    Si los datos son correctos, accede al panel.

    Paso 2: Entra en productos

    Dentro del menú lateral, pulsa en la opción Productos.

    Desde ahí selecciona la opción para crear un nuevo producto.

    Paso 3: Rellena el formulario

    Introduce los datos:

    • Nombre: Leo Bombero.
    • SKU: BOM-001.
    • Precio: 12,95 €.
    • Precio oferta: 9,95 €.
    • Categoría: Emergencias.
    • Profesión: Bombero.
    • Stock: 50.
    • Edad recomendada: 3+ años.
    • Descripción corta.
    • Descripción completa.
    • Etiquetas.
    • Imágenes.

    Paso 4: Guarda o publica

    El administrador puede guardar el producto como borrador o publicarlo directamente.

    Si lo publica, el producto pasará a estar visible en la tienda pública.

    Paso 5: El cliente lo ve en la tienda

    Un visitante o cliente entra en la web, ve el catálogo, filtra por emergencias y encuentra el producto Leo Bombero.

    Este ejemplo nos ayuda a conectar varias partes del proyecto:

    • Login.
    • Panel privado.
    • Formulario.
    • Producto.
    • Base de datos.
    • Catálogo público.

    15. Organización recomendada para el proyecto Java

    Cuando pasemos a Java, podemos organizar el proyecto por paquetes.

    Una estructura sencilla podría ser:

    src/
    ├── modelo/
    │ ├── Producto.java
    │ ├── Categoria.java
    │ ├── Profesion.java
    │ ├── ImagenProducto.java
    │ ├── Cliente.java
    │ ├── Pedido.java
    │ └── LineaPedido.java

    ├── dao/
    │ ├── ProductoDAO.java
    │ ├── CategoriaDAO.java
    │ └── ClienteDAO.java

    ├── controlador/
    │ ├── ProductoServlet.java
    │ ├── LoginServlet.java
    │ └── PedidoServlet.java

    ├── util/
    │ └── ConexionBD.java

    └── vista/
    ├── index.html
    ├── login.html
    ├── alta-producto.html
    └── listado-productos.html

    Esta organización separa responsabilidades:

    modelo contiene las clases principales.

    dao contiene las clases que trabajan con la base de datos.

    controlador contiene los servlets o controladores.

    util contiene clases auxiliares, como la conexión a base de datos.

    vista contiene las páginas HTML o plantillas.


    16. Posibles ampliaciones

    Los alumnos que avancen más rápido pueden añadir funcionalidades extra.

    Algunas ideas son:

    Buscador de productos

    Permitir buscar productos por nombre, profesión o categoría.

    Filtros avanzados

    Filtrar por:

    • Precio.
    • Categoría.
    • Profesión.
    • Edad recomendada.
    • Disponibilidad.
    • Producto destacado.

    Subida real de imágenes

    Permitir subir imágenes desde el formulario y guardarlas en el servidor.

    Control de roles

    Diferenciar permisos entre administrador y gestor.

    Por ejemplo:

    • El administrador puede gestionar usuarios.
    • El gestor solo puede gestionar productos y pedidos.

    Panel de estadísticas

    Mostrar datos como:

    • Número de productos.
    • Productos con poco stock.
    • Pedidos pendientes.
    • Ventas del mes.
    • Categorías más vendidas.

    Carrito completo

    Implementar un carrito con:

    • Añadir producto.
    • Modificar cantidad.
    • Eliminar producto.
    • Calcular total.
    • Confirmar pedido.

    API REST

    Crear una API para que el frontend pueda consultar productos desde Java.


    17. Qué aprenderemos realmente con este proyecto

    Aunque el proyecto se presenta como una tienda de muñecos, en realidad estamos trabajando conceptos aplicables a muchas aplicaciones web.

    Lo que aprendamos aquí se puede aplicar después a:

    • Una tienda de ropa.
    • Una tienda de videojuegos.
    • Una biblioteca.
    • Un sistema de reservas.
    • Una plataforma de cursos.
    • Un inventario de material.
    • Un sistema de gestión de alumnos.
    • Una aplicación de pedidos.

    La temática de los muñecos nos ayuda a que el proyecto sea visual y fácil de entender, pero la estructura técnica es la de una aplicación web real.


    18. Consejos

    Antes de empezar a programar, es importante entender bien el proyecto.

    No hay que lanzarse directamente al código sin pensar.

    Un buen desarrollo suele seguir este orden:

    Primero entendemos qué queremos construir.

    Después diseñamos las pantallas.

    Luego analizamos los casos de uso.

    Después pensamos las clases.

    Luego diseñamos la base de datos.

    Finalmente empezamos a programar.

    Si seguimos este proceso, el proyecto será más ordenado y será más fácil detectar errores.

    También es importante no intentar hacerlo todo de golpe. Una aplicación grande se construye por partes.

    Primero hacemos una versión sencilla que funcione. Después vamos añadiendo mejoras.


    19. Conclusión

    El proyecto Mundo Oficios nos permitirá trabajar un caso completo de desarrollo de aplicación web.

    Partiremos de una idea sencilla: una tienda online de muñecos por profesiones.

    A partir de esa idea iremos construyendo todo lo necesario:

    • Diseño visual de la web.
    • Prototipo en Figma.
    • Home pública.
    • Login privado.
    • Panel de administración.
    • Alta de productos.
    • Diagrama de casos de uso.
    • Diagrama de clases.
    • Diagrama de base de datos.
    • Clases Java.
    • Formularios.
    • Conexión con base de datos.
    • Gestión de productos.

    El objetivo final no es solo tener una aplicación funcionando, sino comprender el proceso completo que hay detrás de un proyecto web.

    Este proyecto nos va a permitir unir diseño, análisis y programación en un mismo trabajo, acercándonos a la forma en la que se desarrollan aplicaciones reales.

  • 1.1 – Presentación del curso de programación con Java

    1.1 – Presentación del curso de programación con Java

    Audio del tema
    Presentación del curso en audio (IA)

    1. Presentación del curso de programación con Java

    Bienvenido al curso de programación con Java. Este curso está pensado para aprender a programar desde la base, empezando por los conceptos más sencillos y avanzando poco a poco hasta llegar a la programación orientada a objetos, uno de los pilares fundamentales de Java y de muchos lenguajes modernos.

    A lo largo del curso no vamos a limitarnos a memorizar instrucciones ni a copiar código sin entenderlo. El objetivo principal es aprender a pensar como programadores. Esto significa aprender a analizar problemas, dividirlos en partes más pequeñas, plantear soluciones ordenadas y convertir esas soluciones en programas que pueda ejecutar un ordenador.

    Java será el lenguaje que utilizaremos para aprender estos conceptos. Es un lenguaje muy utilizado en el mundo profesional, especialmente en aplicaciones de empresa, aplicaciones web, aplicaciones móviles, sistemas de gestión, herramientas internas y muchos otros tipos de software. Además, Java es un lenguaje muy adecuado para aprender programación porque obliga a trabajar de forma ordenada y ayuda a comprender muy bien conceptos importantes como variables, condiciones, bucles, funciones, clases, objetos, herencia y estructuras de datos.

    Durante el curso utilizaremos Eclipse como entorno de desarrollo. Eclipse es un IDE, es decir, un programa que nos ayuda a escribir, organizar, ejecutar y depurar nuestro código. Aunque al principio puede parecer una herramienta con muchas opciones, poco a poco iremos usando solamente las partes necesarias. La idea no es aprender Eclipse por aprender Eclipse, sino usarlo como herramienta para programar mejor.

    Este primer curso será la base de una formación más amplia. Después de aprender los fundamentos de Java, se podrá continuar con tecnologías más avanzadas como Java EE y posteriormente Spring, que son herramientas muy utilizadas para crear aplicaciones web y sistemas empresariales. Por eso es importante construir ahora una base sólida. Si entendemos bien los fundamentos, todo lo que venga después será mucho más fácil de asimilar.

    Programar no consiste en saber todas las instrucciones de memoria. De hecho, incluso los programadores profesionales consultan documentación, buscan ejemplos y revisan código continuamente. Lo importante es comprender cómo se resuelven los problemas y cómo se estructura un programa. Este curso pretende ayudarte precisamente en eso: a construir una forma de pensar lógica, ordenada y práctica.

    Al principio trabajaremos con programas sencillos. Veremos cómo mostrar mensajes por pantalla, cómo pedir datos al usuario, cómo guardar información en variables y cómo tomar decisiones dentro de un programa. Después incorporaremos bucles para repetir acciones, métodos para organizar mejor el código y arrays para trabajar con conjuntos de datos.

    Más adelante entraremos en la programación orientada a objetos. En ese momento empezaremos a representar elementos del mundo real mediante clases y objetos. Por ejemplo, podremos crear una clase Alumno, una clase Producto, una clase Coche o una clase Reserva. Cada una tendrá sus propios datos y sus propios comportamientos. Esta forma de programar permite crear aplicaciones más grandes, organizadas y fáciles de mantener.

    Al final del curso también veremos una introducción a algunos tipos abstractos de datos, como pilas, colas, listas y una pequeña introducción a grafos. No se trata todavía de estudiarlos con una profundidad matemática avanzada, sino de entender para qué sirven y por qué son importantes en programación.

    Este curso requiere práctica. Leer los apuntes ayuda, ver vídeos ayuda, escuchar explicaciones ayuda, pero se aprende a programar programando. Es normal equivocarse, encontrarse errores, no entender algo a la primera o tener que repetir un ejercicio varias veces. Eso forma parte del proceso. Cada error corregido ayuda a mejorar.

    El objetivo final es que el alumno no solo sepa escribir pequeños programas en Java, sino que empiece a adquirir una mentalidad de desarrollador: analizar, probar, corregir, mejorar y documentar sus soluciones.


    2. Qué es programar

    Programar es darle instrucciones a un ordenador para que realice una tarea. Dicho así parece algo sencillo, pero detrás de esa idea hay una habilidad muy importante: saber transformar un problema en una serie de pasos claros, ordenados y precisos.

    Un ordenador no interpreta las cosas como una persona. Las personas somos capaces de entender frases incompletas, deducir información por contexto o improvisar soluciones. Un ordenador, en cambio, necesita instrucciones concretas. Si una instrucción está mal escrita, si falta un paso o si el orden no es correcto, el programa no funcionará como esperamos.

    Por ejemplo, imaginemos que queremos explicar a una persona cómo preparar un café. Podríamos decirle: “hazme un café”. Si esa persona sabe usar la cafetera, probablemente entenderá lo que queremos. Pero si tuviéramos que explicárselo a un ordenador o a una máquina completamente automática, tendríamos que ser mucho más precisos.

    Tendríamos que indicar pasos como comprobar si hay agua, comprobar si hay café, encender la máquina, colocar el vaso, esperar a que termine el proceso y apagarla. Programar consiste precisamente en eso: describir un proceso de forma tan clara que una máquina pueda ejecutarlo.

    En programación trabajamos constantemente con datos. Un programa puede recibir información, guardarla, modificarla, compararla y mostrar un resultado. Por ejemplo, un programa puede pedir la edad de una persona y decidir si es mayor de edad. También puede calcular el precio total de una compra, comprobar una contraseña, ordenar una lista de nombres o gestionar las reservas de un hotel.

    Un programa no suele ser una única instrucción aislada. Normalmente está formado por muchas instrucciones que trabajan juntas. Algunas sirven para guardar información, otras para tomar decisiones, otras para repetir tareas y otras para organizar mejor el código.

    Por ejemplo, si queremos hacer un programa que calcule si un alumno ha aprobado, podríamos pensar en algo como esto:

    int nota = 7;

    if (nota >= 5) {
    System.out.println("El alumno ha aprobado");
    } else {
    System.out.println("El alumno ha suspendido");
    }

    Este pequeño ejemplo ya muestra varias ideas importantes. Hay una variable llamada nota, que guarda un valor numérico. Después hay una condición que comprueba si esa nota es mayor o igual que 5. Según el resultado de esa comprobación, el programa muestra un mensaje u otro.

    Aunque el código sea corto, ya estamos haciendo algo esencial en programación: tomar una decisión. Los programas reales están llenos de decisiones de este tipo. Una aplicación bancaria decide si una operación es válida o no. Una tienda online decide si hay stock suficiente. Un videojuego decide si un personaje ha perdido vida. Una aplicación de reservas decide si una habitación está disponible.

    Programar también implica aprender a dividir los problemas. Cuando un problema es pequeño, se puede resolver de forma directa. Pero cuando el programa crece, necesitamos organizarlo mejor. No podemos escribir todo el código mezclado sin ningún orden. Por eso existen funciones, métodos, clases, paquetes y estructuras que nos ayudan a mantener el programa limpio y comprensible.

    Una parte importante de aprender a programar es aceptar que los errores son normales. Cuando un programa falla, no significa necesariamente que seamos malos programando. Significa que hay algo que revisar. Puede ser un error de sintaxis, una variable mal escrita, una condición mal planteada o una lógica incorrecta.

    Los errores forman parte del aprendizaje. De hecho, una de las habilidades más importantes de un programador es saber leer errores, buscar la causa y corregirlos. Programar no es escribir código perfecto a la primera. Programar es construir una solución, probarla, detectar problemas y mejorarla.

    También es importante entender que programar no es solo escribir código. Antes de escribir una línea, muchas veces hay que pensar. Hay que entender qué se quiere conseguir, qué datos necesitamos, qué pasos hay que seguir y qué resultado esperamos obtener. Si no entendemos el problema, difícilmente podremos resolverlo bien con código.

    Por eso, en este curso no solo escribiremos programas. También aprenderemos a analizar ejercicios, plantear soluciones y explicar lo que hace nuestro código. Esa capacidad de razonar es lo que realmente permite avanzar.


    3. Qué es Java y para qué se utiliza

    Java es un lenguaje de programación creado para desarrollar aplicaciones de forma ordenada, segura y portable. Es uno de los lenguajes más utilizados en el mundo profesional y ha sido durante muchos años una referencia en el desarrollo de software.

    Una de las características más importantes de Java es que permite escribir programas que pueden ejecutarse en diferentes sistemas operativos. Un programa Java puede funcionar en Windows, Linux o macOS siempre que el sistema tenga instalado el entorno adecuado para ejecutarlo. Esta idea se suele resumir con la frase: “escribe una vez, ejecuta en cualquier lugar”.

    Para conseguir esto, Java no funciona exactamente igual que otros lenguajes que se compilan directamente para un sistema concreto. Cuando escribimos código Java, ese código se compila y se transforma en un formato intermedio llamado bytecode. Ese bytecode se ejecuta sobre la Máquina Virtual de Java, conocida como JVM.

    La JVM actúa como una capa intermedia entre nuestro programa y el sistema operativo. Gracias a ella, el mismo programa puede ejecutarse en distintos entornos sin tener que reescribirlo desde cero.

    De forma simplificada, el proceso sería el siguiente:

    Primero escribimos un archivo con código Java, por ejemplo:

    public class HolaMundo {
    public static void main(String[] args) {
    System.out.println("Hola, mundo");
    }
    }

    Después ese código se compila. Si no hay errores, se genera un archivo intermedio que puede ejecutar la JVM. Finalmente, la máquina virtual interpreta y ejecuta el programa.

    Al principio, muchas partes de este código pueden parecer extrañas. Es normal. Todavía no es necesario entenderlo todo en profundidad. Más adelante veremos qué significa public class, qué es main, por qué se usan llaves { } y cómo se organiza un programa Java. Ahora lo importante es quedarse con la idea general: Java nos permite escribir instrucciones que el ordenador puede ejecutar.

    Java se utiliza en muchos ámbitos. Uno de los más importantes es el desarrollo de aplicaciones empresariales. Muchas empresas utilizan Java para crear sistemas de gestión, aplicaciones internas, plataformas web, servicios backend, aplicaciones bancarias, herramientas de administración y sistemas que necesitan ser estables y escalables.

    También se ha utilizado mucho en el desarrollo de aplicaciones Android. Aunque hoy en día Android también utiliza Kotlin, Java sigue siendo un lenguaje importante en ese ecosistema y muchos proyectos existentes están escritos total o parcialmente en Java.

    Otro uso importante de Java está en el desarrollo de aplicaciones web. En este curso empezaremos por los fundamentos del lenguaje, pero más adelante se puede continuar con Java EE, Servlets, JSP, Spring Boot y otras tecnologías relacionadas con el desarrollo de aplicaciones web y servicios.

    Java también se utiliza en educación porque permite aprender muy bien los conceptos fundamentales de la programación orientada a objetos. Aunque al principio puede parecer más estricto que otros lenguajes, esa exigencia ayuda a adquirir buenos hábitos. Java obliga a declarar tipos de datos, organizar el código en clases y seguir una estructura clara.

    Por ejemplo, en Java una variable debe tener un tipo. Si queremos guardar un número entero, podemos escribir:

    int edad = 20;

    Si queremos guardar texto, usamos String:

    String nombre = "Ana";

    Y si queremos guardar un valor verdadero o falso, usamos boolean:

    boolean aprobado = true;

    Esta forma de trabajar ayuda a entender qué tipo de información estamos manejando en cada momento. El programa sabe que edad es un número, que nombre es texto y que aprobado representa una condición lógica.

    Java es un lenguaje orientado a objetos. Esto significa que permite organizar el código utilizando clases y objetos. Una clase puede entenderse como un molde o plantilla. A partir de ese molde podemos crear objetos concretos.

    Por ejemplo, podríamos tener una clase Alumno:

    public class Alumno {
    String nombre;
    int edad;
    double notaMedia;
    }

    Esa clase describe qué datos puede tener un alumno. Después, en un programa, podríamos crear alumnos concretos con sus propios valores. Esta forma de trabajar se parece bastante a cómo organizamos la realidad: tenemos entidades, características y acciones.

    La programación orientada a objetos será una parte muy importante del curso, pero antes de llegar ahí necesitamos dominar la base: variables, operadores, condiciones, bucles, métodos y arrays. Intentar aprender objetos sin entender bien estos conceptos sería como intentar construir una casa sin tener buenos cimientos.

    Java también tiene una gran comunidad y muchísima documentación. Esto es importante porque ningún programador trabaja completamente aislado. Cuando aprendemos un lenguaje, necesitamos ejemplos, documentación oficial, foros, librerías y herramientas. Java cuenta con un ecosistema muy amplio, lo que lo convierte en una opción sólida para aprender y para trabajar profesionalmente.

    Otra ventaja de Java es que tiene una sintaxis parecida a otros lenguajes muy utilizados, como C#, JavaScript, C++ o PHP en algunos aspectos. Esto significa que, aunque cada lenguaje tiene sus propias características, aprender Java facilita después el aprendizaje de otros lenguajes. Muchos conceptos se repiten: variables, condiciones, bucles, funciones, clases, objetos y estructuras de datos.

    En este curso, Java será nuestro medio para aprender programación. No se trata solamente de aprender comandos de Java, sino de usar Java para comprender cómo se construye un programa desde cero. Primero haremos ejercicios pequeños y controlados. Después iremos aumentando la dificultad. Con el tiempo, los programas tendrán más clases, más métodos y más lógica.

    El objetivo no es correr, sino avanzar con seguridad. La programación requiere práctica constante, paciencia y una mentalidad de mejora. Java puede parecer exigente al principio, pero precisamente por eso es una herramienta excelente para aprender bien.

    Al terminar esta primera parte del curso, el alumno debería ser capaz de leer y escribir programas básicos en Java, entender la estructura de un programa, utilizar variables, condiciones, bucles, métodos, arrays y comenzar a trabajar con clases y objetos. Esa base será imprescindible para continuar después con tecnologías más avanzadas del ecosistema Java.

  • 1.2 – Alcance del curso

    1.2 – Alcance del curso

    Después de esa base inicial, el curso avanzará hacia la programación orientada a objetos, uno de los pilares fundamentales de Java. Aprenderemos a diseñar clases, crear objetos, aplicar encapsulación, trabajar con relaciones entre clases, usar herencia, polimorfismo, clases abstractas e interfaces. La idea no es solo aprender la sintaxis del lenguaje, sino entender cómo se piensa y se organiza una aplicación real.

    En la parte final se introducen conceptos algo más avanzados relacionados con los tipos abstractos de datos, como pilas, colas, listas y una primera aproximación a los grafos. Estos contenidos servirán como puente hacia una comprensión más profunda de las estructuras que se utilizan en programación y prepararán el camino para cursos posteriores.

    Este será el primero de tres grandes módulos. Una vez asentadas las bases de Java, continuaremos con el desarrollo de aplicaciones web mediante Java EE y, posteriormente, con Spring/Spring Boot, donde aplicaremos estos conocimientos en proyectos más completos y cercanos al desarrollo profesional.

    Bloque 1 — Introducción al curso y entorno de trabajo

    1. Presentación del curso de programación con Java
    2. Qué es programar
    3. Qué es Java y para qué se utiliza
    4. Instalación del JDK
    5. Instalación de Eclipse
    6. Configuración inicial de Eclipse
    7. Creación del primer proyecto Java
    8. Estructura básica de un programa Java
    9. Primer programa: Hola Mundo
    10. Compilar, ejecutar y corregir errores básicos

    Bloque 2 — Primeros conceptos de programación

    1. Algoritmos y pensamiento computacional
    2. Instrucciones y flujo de ejecución
    3. Datos, memoria y variables
    4. Tipos de datos primitivos en Java
    5. Constantes
    6. Conversión de tipos
    7. Entrada de datos por teclado con Scanner
    8. Salida de datos por consola
    9. Comentarios y buenas prácticas iniciales
    10. Errores comunes al empezar a programar

    Bloque 3 — Operadores y expresiones

    1. Operadores aritméticos
    2. Operadores de asignación
    3. Operadores relacionales
    4. Operadores lógicos
    5. Incremento y decremento
    6. Prioridad de operadores
    7. Expresiones simples y compuestas
    8. Ejercicios básicos de cálculo
    9. Validación de expresiones
    10. Depuración básica en Eclipse

    Bloque 4 — Estructuras condicionales

    1. Toma de decisiones en programación
    2. Condicional if
    3. Condicional if else
    4. Condicionales anidados
    5. Condiciones múltiples
    6. Operadores lógicos en condiciones
    7. Estructura switch
    8. Menús básicos con switch
    9. Validación de datos con condicionales
    10. Ejercicios prácticos de decisiones

    Bloque 5 — Bucles y control de flujo

    1. Introducción a los bucles
    2. Bucle while
    3. Bucle do while
    4. Bucle for
    5. Contadores y acumuladores
    6. Bucles anidados
    7. Control de bucles con break
    8. Control de bucles con continue
    9. Validación repetitiva de datos
    10. Ejercicios prácticos con bucles

    Bloque 6 — Métodos y organización del código

    1. Qué es un método
    2. Métodos sin parámetros y sin retorno
    3. Métodos con parámetros
    4. Métodos con valor de retorno
    5. Parámetros y argumentos
    6. Variables locales
    7. Alcance de las variables
    8. Sobrecarga de métodos
    9. Organización del código en métodos
    10. Ejercicios prácticos con métodos

    Bloque 7 — Arrays y estructuras básicas de datos

    1. Introducción a los arrays
    2. Declaración y creación de arrays
    3. Recorrido de arrays
    4. Carga de datos en arrays
    5. Búsqueda de elementos
    6. Cálculos con arrays
    7. Arrays de cadenas de texto
    8. Arrays multidimensionales
    9. Matrices en Java
    10. Ejercicios prácticos con arrays y matrices

    Bloque 8 — Cadenas de texto y clases básicas de Java

    1. La clase String
    2. Métodos principales de String
    3. Comparación de cadenas
    4. Conversión entre texto y números
    5. La clase Math
    6. Números aleatorios con Random
    7. Fechas básicas con Java
    8. Formateo básico de datos
    9. Uso de clases de utilidad
    10. Ejercicios prácticos con cadenas y utilidades

    Bloque 9 — Introducción a la programación orientada a objetos

    1. Qué es la programación orientada a objetos
    2. Clases y objetos
    3. Atributos
    4. Métodos
    5. Creación de objetos
    6. Acceso a atributos y métodos
    7. Estado y comportamiento
    8. Diseño básico de clases
    9. Diagramas sencillos de clases
    10. Primeros ejercicios con objetos

    Bloque 10 — Constructores, encapsulación y organización de clases

    1. Constructores
    2. Constructor por defecto
    3. Constructores con parámetros
    4. Sobrecarga de constructores
    5. Encapsulación
    6. Modificadores de acceso
    7. Métodos get y set
    8. Uso de this
    9. Separación de clases en archivos
    10. Ejercicios prácticos de encapsulación

    Bloque 11 — Relaciones entre clases

    1. Objetos como atributos
    2. Asociación entre clases
    3. Composición
    4. Agregación
    5. Colecciones de objetos usando arrays
    6. Clases principales y clases auxiliares
    7. Diseño de pequeños modelos de datos
    8. Programas con varias clases
    9. Diagramas UML básicos
    10. Proyecto guiado con varias clases

    Bloque 12 — Herencia y reutilización de código

    1. Introducción a la herencia
    2. Clases padre y clases hijas
    3. Uso de extends
    4. Herencia de atributos y métodos
    5. Sobrescritura de métodos
    6. Uso de super
    7. Constructores en herencia
    8. Jerarquías de clases
    9. Ventajas y límites de la herencia
    10. Ejercicios prácticos con herencia

    Bloque 13 — Polimorfismo, clases abstractas e interfaces

    1. Introducción al polimorfismo
    2. Referencias de tipo padre
    3. Sobrescritura y comportamiento dinámico
    4. Conversión entre tipos de objetos
    5. Clases abstractas
    6. Métodos abstractos
    7. Interfaces
    8. Implementación de interfaces
    9. Diferencias entre clase abstracta e interfaz
    10. Ejercicios prácticos de polimorfismo

    Bloque 14 — Gestión de errores y excepciones

    1. Errores de compilación
    2. Errores de ejecución
    3. Errores lógicos
    4. Introducción a las excepciones
    5. Bloque try catch
    6. Captura de varias excepciones
    7. Bloque finally
    8. Lanzamiento de excepciones
    9. Validación robusta de programas
    10. Ejercicios prácticos con excepciones

    Bloque 15 — Colecciones básicas de Java

    1. Limitaciones de los arrays
    2. Introducción a las colecciones
    3. ArrayList
    4. Recorrido de colecciones
    5. Búsqueda en colecciones
    6. Eliminación de elementos
    7. Colecciones de objetos
    8. Ordenación básica
    9. Diferencias entre arrays y colecciones
    10. Ejercicios prácticos con ArrayList

    Bloque 16 — Proyecto final del curso

    1. Planteamiento del proyecto final
    2. Análisis de requisitos
    3. Diseño de clases
    4. Creación del proyecto en Eclipse
    5. Desarrollo del modelo de datos
    6. Desarrollo de la lógica del programa
    7. Creación de menús por consola
    8. Validación de entradas
    9. Pruebas y corrección de errores
    10. Presentación del proyecto final

    Bloque 17 — Introducción a los tipos abstractos de datos

    1. Qué es un tipo abstracto de datos
    2. Diferencia entre estructura lógica y estructura física
    3. Estructuras estáticas
    4. Estructuras dinámicas
    5. Pilas estáticas
    6. Pilas dinámicas
    7. Colas estáticas
    8. Colas dinámicas
    9. Listas enlazadas básicas
    10. Listas simplemente enlazadas
    11. Listas doblemente enlazadas
    12. Comparación entre arrays, listas, pilas y colas
    13. Introducción a los árboles
    14. Introducción a los grafos
    15. Representación básica de grafos
    16. Recorrido básico de grafos
    17. Ejercicios introductorios de tipos abstractos de datos
  • 1.3 – Instalación y primeros pasos con Java y Eclipse 📹

    1.3 – Instalación y primeros pasos con Java y Eclipse 📹

    En este tema vamos a preparar el entorno de trabajo que usaremos durante el curso de programación con Java. Antes de empezar a escribir programas necesitamos instalar dos piezas fundamentales: el JDK, que contiene las herramientas necesarias para compilar y ejecutar programas Java, y Eclipse, que será el entorno de desarrollo desde el que escribiremos, organizaremos y probaremos nuestros proyectos.

    Actualmente, Oracle indica que JDK 26 es la versión más reciente de Java y que JDK 25 es la última versión LTS, es decir, una versión de soporte a largo plazo. Para un curso de programación es recomendable trabajar con una versión LTS porque ofrece más estabilidad. También se puede usar JDK 21 LTS si el centro o el profesor quiere mantener compatibilidad con entornos ya instalados.

    Eclipse también se mantiene actualizado y la versión Eclipse IDE 2026-03 incluye soporte para Java 25, además de herramientas para Java, Git, Maven y Gradle.


    1. Instalación del JDK 📹

    Qué es el JDK

    Para poder programar en Java necesitamos instalar el JDK, siglas de Java Development Kit. El JDK es el conjunto de herramientas que permite desarrollar aplicaciones Java. Incluye, entre otras cosas, el compilador, la máquina virtual de Java y diferentes utilidades necesarias para trabajar desde consola o desde un entorno de desarrollo como Eclipse.

    Es importante distinguir tres conceptos:

    Java es el lenguaje de programación.

    JVM, o Java Virtual Machine, es la máquina virtual que ejecuta los programas Java.

    JDK es el paquete completo para desarrolladores. Incluye la JVM, el compilador y otras herramientas.

    Cuando escribimos un programa Java, normalmente lo guardamos en un archivo con extensión .java. Ese archivo contiene código fuente, es decir, código escrito por una persona. Después, el compilador de Java transforma ese archivo en un archivo .class, que contiene bytecode. Ese bytecode será ejecutado por la JVM.

    El proceso básico sería este:

    1. Escribimos un archivo llamado HolaMundo.java.
    2. Lo compilamos.
    3. Se genera un archivo llamado HolaMundo.class.
    4. La JVM ejecuta ese archivo compilado.

    Qué versión instalar

    Para este curso se recomienda instalar una versión LTS de Java. En este momento, la versión recomendada para un entorno nuevo sería JDK 25 LTS, porque Oracle la identifica como la última versión LTS.

    También podemos usar Eclipse Temurin, que es una distribución gratuita y muy utilizada del JDK. Adoptium ofrece descargas de Temurin para distintas versiones LTS, incluyendo JDK 25, JDK 21, JDK 17, JDK 11 y JDK 8.

    Para el alumno, la recomendación sencilla es:

    Instalar JDK 25 LTS, preferiblemente desde Oracle o desde Eclipse Adoptium Temurin.


    Instalación en Windows 📹

    En Windows podemos instalar el JDK descargando el instalador desde la página oficial. El alumno debe elegir la versión correspondiente a su sistema operativo, normalmente Windows x64 Installer.

    https://www.oracle.com/es/java/technologies/downloads/#jdk26-windows

    Una vez descargado el instalador, se ejecuta y se siguen los pasos del asistente. Lo normal es aceptar la ruta de instalación por defecto. Una ruta habitual puede ser parecida a esta:

    C:\Program Files\Java\jdk-25

    Después de instalar el JDK, conviene comprobar que Windows reconoce Java desde la terminal.

    Para ello, abrimos Símbolo del sistema o PowerShell y escribimos:

    java -version

    Deberíamos ver una salida parecida a esta:

    java version "25..."
    Java(TM) SE Runtime Environment ...
    Java HotSpot(TM) 64-Bit Server VM ...

    También debemos comprobar que funciona el compilador:

    javac -version

    El comando java sirve para ejecutar programas Java. El comando javac sirve para compilar archivos .java.

    Si java -version funciona pero javac -version no funciona, normalmente significa que no se ha instalado el JDK completo o que la variable PATH no está bien configurada.


    Variables de entorno en Windows

    En algunos equipos, después de instalar el JDK, Windows no reconoce los comandos java o javac. En ese caso hay que revisar las variables de entorno.

    La variable más importante es PATH. Esta variable le dice al sistema operativo en qué carpetas debe buscar los comandos.

    La carpeta que debemos añadir al PATH suele ser la carpeta bin del JDK. Por ejemplo:

    C:\Program Files\Java\jdk-25\bin

    También se puede crear una variable llamada JAVA_HOME, que apunte a la carpeta principal del JDK:

    C:\Program Files\Java\jdk-25

    Después, en el PATH, se puede añadir:

    %JAVA_HOME%\bin

    Una vez hecho esto, hay que cerrar y volver a abrir la terminal. Si dejamos abierta la terminal antigua, es posible que no detecte los cambios.


    Instalación en macOS

    En macOS también podemos instalar el JDK desde Oracle o desde Eclipse Adoptium. Si se descarga desde la web, normalmente obtendremos un archivo .pkg, que se instala siguiendo el asistente.

    Una vez instalado, abrimos la aplicación Terminal y comprobamos:

    java -version

    Y también:

    javac -version

    Si ambos comandos devuelven una versión, el JDK está instalado correctamente.

    En macOS también se puede comprobar qué versiones de Java están instaladas con:

    /usr/libexec/java_home -V

    Este comando muestra las instalaciones de Java detectadas por el sistema.


    Instalación en Linux

    En Linux podemos instalar Java desde los repositorios de la distribución o descargarlo desde Oracle/Adoptium.

    En Ubuntu o distribuciones basadas en Debian, una instalación sencilla sería:

    sudo apt update
    sudo apt install openjdk-25-jdk

    Si la versión 25 no estuviera disponible en los repositorios de la distribución, se puede instalar una versión LTS disponible, como Java 21:

    sudo apt update
    sudo apt install openjdk-21-jdk

    Después comprobamos:

    java -version
    javac -version

    En Linux también podemos localizar dónde está instalado Java con:

    which java
    which javac

    2. Instalación de Eclipse 📹

    Qué es Eclipse

    Eclipse es un IDE, es decir, un entorno de desarrollo integrado. Un IDE es una aplicación que reúne en un mismo lugar varias herramientas necesarias para programar: editor de código, explorador de proyectos, compilación, ejecución, depuración, resaltado de errores, autocompletado y gestión de librerías.

    Podríamos escribir programas Java usando solamente un editor de texto y la terminal, pero para aprender resulta mucho más cómodo utilizar un IDE. Eclipse nos ayuda a detectar errores, organizar los proyectos y ejecutar el programa con un botón.

    Para este curso nos interesa especialmente la versión Eclipse IDE for Java Developers, que incluye las herramientas esenciales para programar en Java. La página oficial de Eclipse la describe como una distribución con herramientas para desarrollo Java, cliente Git, editor XML e integración con Maven y Gradle.


    Qué versión de Eclipse descargar

    Para este curso podemos usar:

    Eclipse IDE for Java Developers

    Esta versión es suficiente para aprender Java desde cero, trabajar con clases, paquetes, proyectos, consola, depuración y ejercicios de programación.

    Más adelante, cuando el alumno avance hacia Java EE, Servlets, JSP, Maven, servidores y aplicaciones web, puede ser interesante instalar:

    Eclipse IDE for Enterprise Java and Web Developers

    Esta otra versión incluye herramientas adicionales para aplicaciones web, JavaScript, JSP, JPA, Maven, Gradle, Git y desarrollo empresarial.

    Para este primer curso básico de Java, con Eclipse IDE for Java Developers es suficiente.


    Instalación en Windows

    Para instalar Eclipse en Windows, descargamos el instalador desde la página oficial de Eclipse. Una vez descargado, ejecutamos el instalador y seleccionamos:

    Eclipse IDE for Java Developers

    El instalador preguntará dónde queremos instalar Eclipse. Se puede dejar la ruta por defecto. También nos preguntará qué versión de Java queremos usar. Si el JDK está bien instalado, Eclipse debería detectarlo automáticamente.

    Una vez terminado el proceso, podremos iniciar Eclipse desde el menú de inicio o desde el acceso directo creado.


    Instalación en macOS

    En macOS descargamos Eclipse desde la página oficial. Normalmente obtendremos un archivo .dmg. Lo abrimos y copiamos Eclipse a la carpeta Aplicaciones.

    Al abrir Eclipse por primera vez, macOS puede mostrar un aviso de seguridad porque es una aplicación descargada de Internet. Si aparece ese aviso, debemos permitir su ejecución desde los ajustes de seguridad del sistema.


    Instalación en Linux

    En Linux podemos descargar Eclipse desde su página oficial como archivo comprimido, descomprimirlo y ejecutar el programa. Otra opción es usar el instalador oficial de Eclipse.

    Un ejemplo de instalación manual sería:

    cd Descargas
    tar -xzf eclipse-inst-jre-linux64.tar.gz
    cd eclipse-installer
    ./eclipse-inst

    Después seleccionamos:

    Eclipse IDE for Java Developers

    Y seguimos el asistente.


    3. Configuración inicial de Eclipse 📹

    La primera vez que abrimos Eclipse, nos pedirá seleccionar un workspace.

    El workspace es la carpeta donde Eclipse guardará nuestros proyectos. Es importante elegir una ubicación ordenada, porque ahí se irán creando todos los ejercicios del curso.

    Por ejemplo, podemos crear una carpeta llamada:

    CursoJava

    En Windows podría estar en:

    C:\Users\Alumno\Documents\CursoJava

    En macOS o Linux podría estar en:

    /home/alumno/CursoJava

    O en macOS:

    /Users/alumno/CursoJava

    Una buena práctica es no guardar los proyectos en carpetas mezcladas con descargas, escritorio lleno de archivos o rutas difíciles de encontrar.


    Selección del workspace

    Cuando aparezca la ventana de selección de workspace, elegimos la carpeta donde queremos trabajar.

    Podemos marcar la opción:

    Use this as the default and do not ask again

    Esto hará que Eclipse abra siempre ese workspace por defecto.

    Si más adelante queremos cambiar de workspace, podemos hacerlo desde:

    File > Switch Workspace

    Configurar el JDK en Eclipse

    Aunque Eclipse suele detectar automáticamente el JDK instalado, conviene revisar la configuración.

    Vamos a:

    Window > Preferences

    En macOS puede aparecer como:

    Eclipse > Settings

    Después entramos en:

    Java > Installed JREs

    Aquí deberíamos ver el JDK instalado. Es importante que aparezca un JDK y no solamente un JRE. El JRE sirve para ejecutar programas, pero el JDK incluye también las herramientas de desarrollo.

    Si no aparece, podemos añadirlo manualmente con:

    Add > Standard VM

    Y seleccionamos la carpeta donde está instalado el JDK.

    Por ejemplo, en Windows:

    C:\Program Files\Java\jdk-25

    En macOS puede ser algo parecido a:

    /Library/Java/JavaVirtualMachines/jdk-25.jdk/Contents/Home

    En Linux podría ser:

    /usr/lib/jvm/java-25-openjdk-amd64

    Configurar la codificación de texto

    Es recomendable configurar Eclipse para trabajar con UTF-8. Esto evita problemas con tildes, eñes y caracteres especiales.

    Vamos a:

    Window > Preferences > General > Workspace

    Buscamos la opción:

    Text file encoding

    Y seleccionamos:

    UTF-8

    Esto es especialmente importante porque en nuestros programas podemos escribir textos como:

    System.out.println("Hola, ¿qué tal?");

    Si la codificación no está bien configurada, algunos caracteres podrían verse mal.


    Configurar el tamaño de letra

    Para trabajar cómodamente en clase, especialmente si el profesor proyecta la pantalla, podemos aumentar el tamaño de letra del editor.

    La ruta puede variar según la versión, pero normalmente está en:

    Window > Preferences > General > Appearance > Colors and Fonts

    Después buscamos:

    Java > Java Editor Text Font

    Y ajustamos el tamaño.


    Mostrar números de línea

    Los números de línea son muy útiles para corregir errores. Cuando Java muestra un error, normalmente indica en qué línea se ha producido.

    Para activar los números de línea:

    Window > Preferences > General > Editors > Text Editors

    Marcamos:

    Show line numbers

    A partir de ese momento, el editor mostrará un número al lado de cada línea de código.


    4. Creación del primer proyecto Java

    Una vez instalado y configurado Eclipse, vamos a crear nuestro primer proyecto.

    Un proyecto en Eclipse es una carpeta organizada que contiene nuestros archivos Java, configuraciones y recursos. Para cada bloque de ejercicios podemos crear un proyecto diferente, o bien trabajar con un único proyecto organizado por paquetes.

    Para empezar, crearemos un proyecto sencillo.

    Vamos a:

    File > New > Java Project

    Si no aparece directamente, podemos ir a:

    File > New > Other > Java > Java Project

    En el nombre del proyecto escribimos:

    PrimerProyectoJava

    Después revisamos que Eclipse esté usando el JDK correcto.

    En la parte de configuración del proyecto podemos dejar las opciones por defecto. Eclipse creará una carpeta src, donde escribiremos el código fuente.

    Pulsamos:

    Finish

    Y veremos el proyecto en el panel izquierdo, llamado normalmente Package Explorer.


    Crear una clase Java

    Dentro del proyecto vamos a crear una clase.

    Hacemos clic derecho sobre la carpeta src:

    New > Class

    En el nombre de la clase escribimos:

    HolaMundo

    Marcamos la opción:

    public static void main(String[] args)

    Esta opción hace que Eclipse cree automáticamente el método principal del programa.

    Pulsamos:

    Finish

    Eclipse creará un archivo llamado:

    HolaMundo.java

    Ese archivo contendrá una estructura parecida a esta:

    public class HolaMundo {

    public static void main(String[] args) {

    }

    }

    Estructura básica de un programa Java

    Antes de escribir nuestro primer programa completo, vamos a entender la estructura mínima de un programa Java.

    Un programa Java básico suele estar formado por una clase y un método main.

    Ejemplo:

    public class HolaMundo {

    public static void main(String[] args) {
    System.out.println("Hola Mundo");
    }

    }

    Vamos a analizarlo poco a poco.


    La clase

    Esta línea declara una clase:

    public class HolaMundo {

    En Java, casi todo el código se escribe dentro de clases. La clase es una estructura fundamental del lenguaje. Más adelante, cuando estudiemos programación orientada a objetos, veremos las clases con mucho más detalle.

    De momento, podemos pensar que una clase es una especie de contenedor donde escribimos código.

    El nombre de la clase es:

    HolaMundo

    Por norma general, el archivo debe llamarse igual que la clase pública. Por eso, si la clase se llama HolaMundo, el archivo debe llamarse:

    HolaMundo.java

    Esto es importante. Si el archivo no se llama igual que la clase pública, Java mostrará un error.


    Las llaves

    En Java se usan llaves { } para delimitar bloques de código.

    Por ejemplo:

    public class HolaMundo {

    }

    Todo lo que está dentro de esas llaves pertenece a la clase HolaMundo.

    También el método main tiene sus propias llaves:

    public static void main(String[] args) {

    }

    Todo lo que escribamos dentro de esas llaves será parte del método principal.

    Uno de los errores más comunes al empezar es borrar una llave sin querer o colocarla en un sitio incorrecto. Cuando esto ocurre, Eclipse suele marcar errores en varias líneas, aunque el problema real sea una sola llave mal colocada.


    El método main

    El método main es el punto de entrada del programa. Cuando ejecutamos una aplicación Java, Java busca este método para saber por dónde debe empezar.

    La estructura es:

    public static void main(String[] args) {

    }

    Al principio no hace falta memorizar cada palabra, pero sí debemos acostumbrarnos a reconocerlo. Durante las primeras clases lo usaremos constantemente.

    Podemos verlo como la puerta de entrada del programa.

    Cuando damos al botón de ejecutar, Java entra en el método main y empieza a ejecutar las instrucciones que hay dentro, de arriba abajo.


    Instrucciones

    Dentro del método main escribimos instrucciones.

    Por ejemplo:

    System.out.println("Hola Mundo");

    Esta instrucción muestra un texto por pantalla, concretamente en la consola de Eclipse.

    La instrucción termina con punto y coma:

    ;

    En Java, muchas instrucciones terminan con punto y coma. Olvidar el punto y coma es uno de los errores más habituales al empezar.


    Comentarios

    Los comentarios son partes del código que Java ignora. Sirven para dejar explicaciones para nosotros o para otros programadores.

    Comentario de una línea:

    // Esto es un comentario de una línea

    Comentario de varias líneas:

    /*
    Esto es un comentario
    de varias líneas
    */

    Ejemplo completo:

    public class HolaMundo {

    public static void main(String[] args) {
    // Mostramos un mensaje por pantalla
    System.out.println("Hola Mundo");
    }

    }

    Los comentarios son útiles, pero no conviene abusar de ellos. Un buen comentario explica algo que no es evidente, no repite lo mismo que ya dice el código.


    6. Primer programa: Hola Mundo

    El primer programa tradicional en casi cualquier lenguaje de programación es Hola Mundo. Es un programa muy sencillo que sirve para comprobar que el entorno está bien instalado y que somos capaces de crear, compilar y ejecutar código.

    Nuestro programa será este:

    public class HolaMundo {

    public static void main(String[] args) {
    System.out.println("Hola Mundo");
    }

    }

    Cuando lo ejecutemos, veremos en la consola:

    Hola Mundo

    Aunque parezca un programa muy simple, aquí ya están apareciendo varias ideas importantes:

    • Estamos creando una clase.
    • Estamos usando el método principal main.
    • Estamos escribiendo una instrucción.
    • Estamos mostrando información por consola.
    • Estamos usando comillas para escribir texto.
    • Estamos terminando la instrucción con punto y coma.
    • Estamos ejecutando un programa Java real.

    Mostrar varios mensajes

    Podemos escribir más de una instrucción:

    public class HolaMundo {

    public static void main(String[] args) {
    System.out.println("Hola Mundo");
    System.out.println("Estoy aprendiendo Java");
    System.out.println("Este es mi primer programa");
    }

    }

    La salida será:

    Hola Mundo
    Estoy aprendiendo Java
    Este es mi primer programa

    Java ejecuta las instrucciones en orden, desde la primera hasta la última.


    Diferencia entre println y print

    System.out.println muestra un texto y después hace un salto de línea.

    Ejemplo:

    System.out.println("Hola");
    System.out.println("Mundo");

    Salida:

    Hola
    Mundo

    En cambio, System.out.print muestra el texto pero no cambia de línea.

    Ejemplo:

    System.out.print("Hola");
    System.out.print("Mundo");

    Salida:

    HolaMundo

    Si queremos dejar un espacio, tenemos que escribirlo nosotros:

    System.out.print("Hola ");
    System.out.print("Mundo");

    Salida:

    Hola Mundo

    Escribir textos con caracteres especiales

    Los textos en Java se escriben entre comillas dobles:

    System.out.println("Esto es un texto");

    Si queremos escribir comillas dentro del texto, necesitamos usar una barra invertida:

    System.out.println("Me dijo: \"Hola\"");

    Salida:

    Me dijo: "Hola"

    También podemos usar \n para hacer un salto de línea dentro del texto:

    System.out.println("Primera línea\nSegunda línea");

    Salida:

    Primera línea
    Segunda línea

    Y podemos usar \t para insertar una tabulación:

    System.out.println("Nombre\tEdad");
    System.out.println("Ana\t20");
    System.out.println("Luis\t22");

    Salida aproximada:

    Nombre  Edad
    Ana 20
    Luis 22

    Ejemplo un poco más completo

    Vamos a hacer un programa que muestre una pequeña ficha del alumno:

    public class FichaAlumno {

    public static void main(String[] args) {
    System.out.println("===== FICHA DEL ALUMNO =====");
    System.out.println("Nombre: Antonio");
    System.out.println("Curso: Programación con Java");
    System.out.println("Editor: Eclipse");
    System.out.println("Lenguaje: Java");
    System.out.println("============================");
    }

    }

    Salida:

    ===== FICHA DEL ALUMNO =====
    Nombre: Antonio
    Curso: Programación con Java
    Editor: Eclipse
    Lenguaje: Java
    ============================

    Este ejemplo sigue siendo muy básico, pero ya nos permite practicar la escritura de instrucciones, el uso de textos y la ejecución de programas.


    7. Compilar, ejecutar y corregir errores básicos

    Qué significa compilar

    Compilar es transformar el código fuente que hemos escrito en un formato que pueda ejecutar la máquina virtual de Java.

    El archivo que escribimos nosotros tiene extensión:

    .java

    Por ejemplo:

    HolaMundo.java

    Al compilarlo, Java genera un archivo con extensión:

    .class

    Por ejemplo:

    HolaMundo.class

    Ese archivo .class contiene bytecode, que será ejecutado por la JVM.

    En Eclipse, normalmente no tenemos que compilar manualmente. Eclipse compila automáticamente cada vez que guardamos el archivo, siempre que la opción de construcción automática esté activada.

    Podemos comprobarlo en:

    Project > Build Automatically

    Lo normal es dejar esta opción activada.


    Ejecutar un programa en Eclipse

    Para ejecutar un programa Java en Eclipse, abrimos la clase que contiene el método main.

    Después podemos pulsar el botón verde de ejecutar, con forma de play.

    También podemos hacer clic derecho sobre el archivo y elegir:

    Run As > Java Application

    Si todo está correcto, la salida aparecerá en la pestaña Console.

    Por ejemplo, si ejecutamos:

    public class HolaMundo {

    public static void main(String[] args) {
    System.out.println("Hola Mundo");
    }

    }

    Veremos:

    Hola Mundo

    Ejecutar desde consola

    Aunque durante el curso trabajaremos principalmente con Eclipse, conviene entender cómo se ejecutaría un programa desde consola.

    Supongamos que tenemos este archivo:

    HolaMundo.java

    Con este contenido:

    public class HolaMundo {

    public static void main(String[] args) {
    System.out.println("Hola Mundo desde consola");
    }

    }

    Para compilarlo desde terminal:

    javac HolaMundo.java

    Si no hay errores, se generará:

    HolaMundo.class

    Para ejecutarlo:

    java HolaMundo

    Importante: al ejecutar no escribimos .class.

    Correcto:

    java HolaMundo

    Incorrecto:

    java HolaMundo.class

    La salida será:

    Hola Mundo desde consola

    8. Errores básicos al empezar con Java

    Cuando empezamos a programar, los errores son normales. No significan que lo estemos haciendo mal. Significan que estamos aprendiendo a comunicarnos con el lenguaje.

    Lo importante es aprender a leer el error, localizar la línea y corregirlo con calma.


    Error 1: olvidar el punto y coma

    Código incorrecto:

    public class HolaMundo {

    public static void main(String[] args) {
    System.out.println("Hola Mundo")
    }

    }

    El problema está aquí:

    System.out.println("Hola Mundo")

    Falta el punto y coma al final.

    Código correcto:

    public class HolaMundo {

    public static void main(String[] args) {
    System.out.println("Hola Mundo");
    }

    }

    En Java, muchas instrucciones terminan con ;. Si falta, Eclipse marcará un error de sintaxis.


    Error 2: escribir mal System

    Código incorrecto:

    public class HolaMundo {

    public static void main(String[] args) {
    system.out.println("Hola Mundo");
    }

    }

    El problema es que hemos escrito system con minúscula.

    En Java se distinguen mayúsculas y minúsculas. No es lo mismo:

    System

    Que:

    system

    Código correcto:

    public class HolaMundo {

    public static void main(String[] args) {
    System.out.println("Hola Mundo");
    }

    }

    Este concepto se llama case sensitive. Java diferencia entre mayúsculas y minúsculas en nombres de clases, variables, métodos y palabras del lenguaje.


    Error 3: olvidar las comillas en un texto

    Código incorrecto:

    public class HolaMundo {

    public static void main(String[] args) {
    System.out.println(Hola Mundo);
    }

    }

    El texto debe ir entre comillas dobles.

    Código correcto:

    public class HolaMundo {

    public static void main(String[] args) {
    System.out.println("Hola Mundo");
    }

    }

    Cuando escribimos texto literal, usamos comillas dobles:

    "Hola Mundo"

    Error 4: nombre de clase y archivo diferentes

    Supongamos que el archivo se llama:

    HolaMundo.java

    Pero dentro escribimos:

    public class PrimerPrograma {

    public static void main(String[] args) {
    System.out.println("Hola Mundo");
    }

    }

    Esto dará error porque la clase pública se llama PrimerPrograma, pero el archivo se llama HolaMundo.java.

    En Java, si una clase es pública, el archivo debe llamarse igual.

    Solución 1: cambiar el nombre de la clase:

    public class HolaMundo {

    public static void main(String[] args) {
    System.out.println("Hola Mundo");
    }

    }

    Solución 2: cambiar el nombre del archivo a:

    PrimerPrograma.java

    Error 5: borrar una llave

    Código incorrecto:

    public class HolaMundo {

    public static void main(String[] args) {
    System.out.println("Hola Mundo");

    }

    Falta una llave de cierre. Tenemos una llave para abrir la clase y otra para abrir el método main, pero solo una llave de cierre.

    Código correcto:

    public class HolaMundo {

    public static void main(String[] args) {
    System.out.println("Hola Mundo");
    }

    }

    Una buena costumbre es escribir las llaves de forma ordenada y tabular bien el código. Eclipse puede ayudarnos con el formateo automático.

    Podemos usar:

    Source > Format

    O el atajo habitual:

    Ctrl + Shift + F

    En macOS puede variar según la configuración del teclado.


    Error 6: ejecutar la clase equivocada

    A veces tenemos varias clases en el proyecto y ejecutamos una clase que no es la que queremos probar.

    Por ejemplo, tenemos:

    HolaMundo.java
    FichaAlumno.java
    Prueba.java

    Si estamos editando FichaAlumno.java, pero Eclipse ejecuta HolaMundo.java, veremos una salida que no corresponde con el código que acabamos de cambiar.

    Para evitarlo, hacemos clic derecho sobre la clase que queremos ejecutar:

    Run As > Java Application

    Así nos aseguramos de ejecutar el archivo correcto.


    Error 7: no tener método main

    Código:

    public class HolaMundo {

    System.out.println("Hola Mundo");

    }

    Este código es incorrecto porque la instrucción está directamente dentro de la clase, pero no dentro del método main.

    Código correcto:

    public class HolaMundo {

    public static void main(String[] args) {
    System.out.println("Hola Mundo");
    }

    }

    En estos primeros programas, las instrucciones deben estar dentro del método main.


    9. Ejercicios propuestos

    Ejercicio 1: primer mensaje

    Crea un proyecto llamado:

    EjerciciosPrimerosPasos

    Dentro del proyecto, crea una clase llamada:

    Ejercicio01

    El programa debe mostrar por pantalla:

    Estoy aprendiendo Java con Eclipse

    Solución orientativa:

    public class Ejercicio01 {

    public static void main(String[] args) {
    System.out.println("Estoy aprendiendo Java con Eclipse");
    }

    }

    Ejercicio 2: ficha personal

    Crea una clase llamada:

    Ejercicio02

    El programa debe mostrar una ficha con tu nombre, curso y lenguaje que estás aprendiendo.

    Ejemplo de salida:

    Nombre: Laura
    Curso: Programación
    Lenguaje: Java
    Editor: Eclipse

    Solución orientativa:

    public class Ejercicio02 {

    public static void main(String[] args) {
    System.out.println("Nombre: Laura");
    System.out.println("Curso: Programación");
    System.out.println("Lenguaje: Java");
    System.out.println("Editor: Eclipse");
    }

    }

    Ejercicio 3: cartel con líneas

    Crea una clase llamada:

    Ejercicio03

    El programa debe mostrar:

    *************************
    * HOLA JAVA *
    *************************

    Solución orientativa:

    public class Ejercicio03 {

    public static void main(String[] args) {
    System.out.println("*************************");
    System.out.println("* HOLA JAVA *");
    System.out.println("*************************");
    }

    }

    Ejercicio 4: diferencia entre print y println

    Crea una clase llamada:

    Ejercicio04

    Prueba este código:

    public class Ejercicio04 {

    public static void main(String[] args) {
    System.out.print("Hola ");
    System.out.print("Java");
    System.out.println();
    System.out.println("Fin del programa");
    }

    }

    Salida esperada:

    Hola Java
    Fin del programa

    Observa que print no cambia de línea, mientras que println sí lo hace.


    Ejercicio 5: provocando errores

    Crea una clase llamada:

    Ejercicio05

    Escribe el programa Hola Mundo, pero provoca intencionadamente estos errores de uno en uno:

    Quita el punto y coma.

    Cambia System por system.

    Quita una comilla.

    Borra una llave.

    Cambia el nombre de la clase.

    Después observa qué error muestra Eclipse y corrígelo.

    Este ejercicio es importante porque ayuda a perder el miedo a los errores. Un programador no es alguien que nunca se equivoca. Un programador es alguien que aprende a leer, entender y corregir errores.


    10. Resumen del tema

    En este tema hemos preparado el entorno básico para empezar a programar con Java. Hemos instalado el JDK, que contiene las herramientas necesarias para compilar y ejecutar programas Java. También hemos instalado Eclipse, que será nuestro entorno de desarrollo durante el curso.

    Después hemos configurado el workspace, revisado el JDK dentro de Eclipse, activado opciones útiles como la codificación UTF-8 y los números de línea, y hemos creado nuestro primer proyecto Java.

    También hemos visto la estructura mínima de un programa Java: una clase, el método main y una o varias instrucciones. Con el programa Hola Mundo hemos comprobado que todo funciona correctamente.

    Por último, hemos repasado errores básicos muy habituales: olvidar el punto y coma, escribir mal las mayúsculas, borrar llaves, no poner comillas o ejecutar la clase equivocada.

    A partir de aquí ya podemos empezar a trabajar con los primeros conceptos de programación: variables, tipos de datos, operadores, entrada de datos y estructuras de control.

  • Crear un entorno DEV tipo XAMPP/MAMP con Docker

    Crear un entorno DEV tipo XAMPP/MAMP con Docker

    Objetivo del proyecto

    En esta práctica vamos a crear un entorno de desarrollo web usando Docker. El objetivo es tener un sistema parecido a XAMPP o MAMP, pero más profesional, portable y fácil de reconstruir.

    El entorno permitirá trabajar con:

    • Apache
    • PHP
    • Extensiones comunes de PHP
    • MySQL
    • phpMyAdmin
    • Mailpit para probar correos
    • Redis como servicio adicional opcional
    • Una carpeta local donde guardaremos todos nuestros proyectos web

    Todos los contenedores tendrán el prefijo:

    DEV_

    De esta forma podremos identificarlos fácilmente dentro de Docker.


    1. ¿Qué vamos a construir?

    El sistema tendrá esta estructura:

    Carpeta local del alumno


    +-----------------------------+
    | Carpeta DEVLOCAL |
    | |
    | proyecto1/ |
    | proyecto2/ |
    | pruebas/ |
    | _docker/ |
    +-------------+---------------+


    +-----------------------------+
    | Docker Compose |
    +-------------+---------------+


    +-----------------------------+
    | DEV_apache_php |
    | DEV_mysql |
    | DEV_phpmyadmin |
    | DEV_mailpit |
    | DEV_redis |
    +-----------------------------+

    El alumno podrá crear una carpeta con un proyecto PHP y verlo desde el navegador.

    Por ejemplo:

    http://localhost:8080/pruebas/

    2. Requisitos previos

    Cada alumno necesitará:

    • Un ordenador con Windows, Ubuntu o macOS.
    • Docker instalado.
    • Un editor de código, por ejemplo VS Code.
    • Terminal o consola.
    • Navegador web.

    Docker Compose se usará para definir y levantar varios contenedores a la vez. Docker lo describe como una herramienta para definir y ejecutar aplicaciones multicontenedor.


    3. Instalación de Docker en Windows

    En Windows se recomienda usar Docker Desktop.

    Docker Desktop para Windows incluye Docker Engine, Docker CLI y Docker Compose. La documentación oficial indica que Docker Desktop puede usar WSL 2 como motor de ejecución en Windows.

    Pasos recomendados

    1. Instalar o activar WSL 2.
    2. Instalar Docker Desktop para Windows.
    3. Reiniciar el equipo si lo solicita.
    4. Abrir Docker Desktop.
    5. Comprobar que Docker está funcionando.

    Desde PowerShell o Terminal de Windows:

    docker --version
    docker compose version

    Si ambos comandos responden con una versión, Docker está funcionando correctamente.

    Carpeta recomendada en Windows

    Para evitar problemas con permisos o sincronización, se recomienda crear la carpeta directamente en C:\.

    mkdir C:\DEVLOCAL

    No es recomendable usar carpetas dentro de OneDrive para este tipo de práctica.


    4. Instalación de Docker en Ubuntu

    En Ubuntu se puede instalar Docker Engine directamente desde los repositorios oficiales de Docker. La documentación oficial recomienda configurar primero el repositorio apt de Docker y después instalar Docker Engine y sus plugins.

    Actualizar paquetes

    sudo apt update
    sudo apt upgrade -y

    Instalar dependencias

    sudo apt install -y ca-certificates curl gnupg

    Crear carpeta para claves

    sudo install -m 0755 -d /etc/apt/keyrings

    Descargar clave oficial de Docker

    curl -fsSL https://download.docker.com/linux/ubuntu/gpg | \
    sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg

    Dar permisos a la clave

    sudo chmod a+r /etc/apt/keyrings/docker.gpg

    Añadir repositorio oficial

    echo \
    "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] \
    https://download.docker.com/linux/ubuntu \
    $(. /etc/os-release && echo "$VERSION_CODENAME") stable" | \
    sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

    Instalar Docker

    sudo apt update
    sudo apt install -y docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin

    Comprobar instalación

    docker --version
    docker compose version

    Permitir usar Docker sin sudo

    sudo usermod -aG docker $USER

    Después de este comando, el alumno debe cerrar sesión y volver a entrar.

    Carpeta recomendada en Ubuntu

    mkdir -p ~/DEVLOCAL

    5. Instalación de Docker en macOS

    En macOS se recomienda instalar Docker Desktop para Mac. La documentación oficial diferencia entre Mac con chip Intel y Mac con Apple Silicon, por lo que hay que descargar la versión adecuada.

    Pasos recomendados

    1. Descargar Docker Desktop para Mac.
    2. Elegir la versión correcta:
      • Mac Intel.
      • Mac Apple Silicon.
    3. Instalar la aplicación.
    4. Abrir Docker Desktop.
    5. Esperar a que Docker arranque completamente.
    6. Comprobar desde Terminal:
    docker --version
    docker compose version

    Carpeta recomendada en macOS

    En el caso de este ejemplo usaremos:

    /Users/antoniooteroveiga/DEVLOCAL

    Para otro usuario sería algo similar a:

    /Users/nombre_usuario/DEVLOCAL

    6. Crear la estructura del proyecto

    La estructura será la misma en Windows, Ubuntu y macOS.

    Windows

    Desde PowerShell:

    mkdir C:\DEVLOCAL
    mkdir C:\DEVLOCAL\_docker
    mkdir C:\DEVLOCAL\_docker\php
    mkdir C:\DEVLOCAL\_docker\apache
    mkdir C:\DEVLOCAL\pruebas

    Ubuntu

    Desde Terminal:

    mkdir -p ~/DEVLOCAL/_docker/php
    mkdir -p ~/DEVLOCAL/_docker/apache
    mkdir -p ~/DEVLOCAL/pruebas

    macOS

    Desde Terminal:

    mkdir -p /Users/antoniooteroveiga/DEVLOCAL/_docker/php
    mkdir -p /Users/antoniooteroveiga/DEVLOCAL/_docker/apache
    mkdir -p /Users/antoniooteroveiga/DEVLOCAL/pruebas

    La estructura final será:

    DEVLOCAL/
    ├── _docker/
    │ ├── docker-compose.yml
    │ ├── inicio.sh
    │ ├── inicio.bat
    │ ├── php/
    │ │ ├── Dockerfile
    │ │ ├── php.ini
    │ │ └── msmtprc
    │ └── apache/
    │ └── 000-default.conf
    └── pruebas/
    └── index.php

    7. Crear el archivo docker-compose.yml

    Este archivo define todos los servicios del entorno.

    Debe estar dentro de:

    DEVLOCAL/_docker/docker-compose.yml

    Contenido:

    services:

    apache_php:
    build:
    context: .
    dockerfile: php/Dockerfile
    container_name: DEV_apache_php
    restart: unless-stopped
    ports:
    - "8080:80"
    volumes:
    - ../:/var/www/html
    - ./apache/000-default.conf:/etc/apache2/sites-available/000-default.conf
    - ./php/php.ini:/usr/local/etc/php/conf.d/dev-custom.ini
    - ./php/msmtprc:/etc/msmtprc
    depends_on:
    - mysql
    - mailpit
    networks:
    - DEV_network

    mysql:
    image: mysql:8.4
    container_name: DEV_mysql
    restart: unless-stopped
    ports:
    - "3307:3306"
    environment:
    MYSQL_ROOT_PASSWORD: root
    MYSQL_DATABASE: devdb
    MYSQL_USER: devuser
    MYSQL_PASSWORD: devpass
    volumes:
    - DEV_mysql_data:/var/lib/mysql
    networks:
    - DEV_network

    phpmyadmin:
    image: phpmyadmin:latest
    container_name: DEV_phpmyadmin
    restart: unless-stopped
    ports:
    - "8081:80"
    environment:
    PMA_HOST: mysql
    PMA_PORT: 3306
    PMA_USER: root
    PMA_PASSWORD: root
    UPLOAD_LIMIT: 256M
    depends_on:
    - mysql
    networks:
    - DEV_network

    mailpit:
    image: axllent/mailpit:latest
    container_name: DEV_mailpit
    restart: unless-stopped
    ports:
    - "8025:8025"
    - "1025:1025"
    networks:
    - DEV_network

    redis:
    image: redis:latest
    container_name: DEV_redis
    restart: unless-stopped
    ports:
    - "6379:6379"
    networks:
    - DEV_network

    volumes:
    DEV_mysql_data:

    networks:
    DEV_network:
    name: DEV_network

    8. Crear el archivo Dockerfile

    Este archivo construirá nuestro contenedor de Apache con PHP.

    Debe estar en:

    DEVLOCAL/_docker/php/Dockerfile

    Contenido:

    FROM php:8.3-apache

    RUN apt-get update && apt-get install -y \
    git \
    unzip \
    zip \
    curl \
    msmtp \
    msmtp-mta \
    libzip-dev \
    libpng-dev \
    libjpeg-dev \
    libfreetype6-dev \
    libicu-dev \
    libonig-dev \
    libxml2-dev \
    libssl-dev \
    && docker-php-ext-configure gd --with-freetype --with-jpeg \
    && docker-php-ext-install \
    mysqli \
    pdo \
    pdo_mysql \
    zip \
    gd \
    intl \
    mbstring \
    bcmath \
    soap \
    opcache \
    && a2enmod rewrite headers expires \
    && apt-get clean \
    && rm -rf /var/lib/apt/lists/*

    COPY --from=composer:latest /usr/bin/composer /usr/bin/composer

    WORKDIR /var/www/html

    Con esto tendremos disponibles muchas extensiones habituales de PHP:

    • mysqli
    • pdo_mysql
    • gd
    • zip
    • intl
    • mbstring
    • bcmath
    • soap
    • opcache

    También tendremos instalado Composer, muy útil para proyectos PHP modernos.


    9. Crear el archivo php.ini

    Debe estar en:

    DEVLOCAL/_docker/php/php.ini

    Contenido:

    display_errors = On
    display_startup_errors = On
    error_reporting = E_ALL

    upload_max_filesize = 256M
    post_max_size = 256M
    memory_limit = 512M
    max_execution_time = 300
    max_input_vars = 5000

    date.timezone = Europe/Madrid

    opcache.enable = 1
    opcache.enable_cli = 1

    sendmail_path = "/usr/bin/msmtp -t"

    Este archivo ajusta PHP para un entorno de desarrollo.

    No es una configuración pensada para producción. En producción no deberíamos mostrar errores directamente al usuario.


    10. Crear el archivo msmtprc

    Este archivo permitirá enviar correos desde PHP hacia Mailpit.

    Debe estar en:

    DEVLOCAL/_docker/php/msmtprc

    Contenido:

    defaults
    auth off
    tls off

    account mailpit
    host mailpit
    port 1025
    from devlocal@example.test

    account default : mailpit

    Mailpit capturará los correos y podremos verlos desde el navegador.


    11. Crear la configuración de Apache

    Debe estar en:

    DEVLOCAL/_docker/apache/000-default.conf

    Contenido:

    <VirtualHost *:80>
    ServerAdmin webmaster@localhost
    DocumentRoot /var/www/html

    <Directory /var/www/html>
    Options Indexes FollowSymLinks
    AllowOverride All
    Require all granted
    </Directory>

    ErrorLog ${APACHE_LOG_DIR}/dev_error.log
    CustomLog ${APACHE_LOG_DIR}/dev_access.log combined
    </VirtualHost>

    La directiva importante es:

    AllowOverride All

    Esto permite usar archivos .htaccess, necesarios en muchos proyectos PHP, como WordPress, Laravel o aplicaciones con URLs amigables.


    12. Crear una página de prueba

    Creamos el archivo:

    DEVLOCAL/pruebas/index.php

    Contenido:

    <?php

    echo "<h1>Entorno DEV funcionando</h1>";
    echo "<p>Apache y PHP están funcionando correctamente.</p>";

    echo "<h2>Información de PHP</h2>";
    phpinfo();

    13. Levantar el entorno manualmente

    Windows

    Desde PowerShell:

    cd C:\DEVLOCAL\_docker
    docker compose up -d --build

    Ubuntu

    Desde Terminal:

    cd ~/DEVLOCAL/_docker
    docker compose up -d --build

    macOS

    Desde Terminal:

    cd /Users/antoniooteroveiga/DEVLOCAL/_docker
    docker compose up -d --build

    14. Comprobar los contenedores

    Ejecutamos:

    docker ps

    Deberíamos ver contenedores parecidos a estos:

    DEV_apache_php
    DEV_mysql
    DEV_phpmyadmin
    DEV_mailpit
    DEV_redis

    15. Acceder al entorno desde el navegador

    Apache + PHP

    http://localhost:8080

    Proyecto de pruebas

    http://localhost:8080/pruebas/

    phpMyAdmin

    http://localhost:8081

    Datos de acceso:

    Servidor: mysql
    Usuario: root
    Contraseña: root

    También podemos usar:

    Servidor: mysql
    Usuario: devuser
    Contraseña: devpass

    Mailpit

    http://localhost:8025

    MySQL desde el equipo anfitrión

    Para conectarse desde DBeaver, DataGrip, VS Code o MySQL Workbench:

    Host: localhost
    Puerto: 3307
    Usuario: devuser
    Contraseña: devpass
    Base de datos: devdb

    MySQL desde PHP

    Desde código PHP, el host no será localhost, sino el nombre del servicio Docker:

    Host: mysql
    Puerto: 3306
    Usuario: devuser
    Contraseña: devpass
    Base de datos: devdb

    16. Probar conexión con MySQL desde PHP

    Creamos el archivo:

    DEVLOCAL/pruebas/mysql.php

    Contenido:

    <?php

    $host = "mysql";
    $db = "devdb";
    $user = "devuser";
    $pass = "devpass";

    $conexion = new mysqli($host, $user, $pass, $db);

    if ($conexion->connect_error) {
    die("Error de conexión: " . $conexion->connect_error);
    }

    echo "<h1>Conexión correcta con MySQL</h1>";
    echo "<p>La base de datos devdb está disponible.</p>";

    $conexion->close();

    Abrimos en el navegador:

    http://localhost:8080/pruebas/mysql.php

    Si todo está correcto, veremos un mensaje confirmando la conexión.


    17. Probar envío de correo con Mailpit

    Creamos el archivo:

    DEVLOCAL/pruebas/mail.php

    Contenido:

    <?php

    $destino = "alumno@example.test";
    $asunto = "Prueba desde PHP";
    $mensaje = "Este correo ha sido enviado desde PHP y capturado por Mailpit.";
    $cabeceras = "From: devlocal@example.test";

    if (mail($destino, $asunto, $mensaje, $cabeceras)) {
    echo "<h1>Correo enviado correctamente</h1>";
    echo "<p>Abre Mailpit para verlo.</p>";
    } else {
    echo "<h1>Error al enviar el correo</h1>";
    }

    Abrimos:

    http://localhost:8080/pruebas/mail.php

    Después entramos en Mailpit:

    http://localhost:8025

    Ahí debería aparecer el correo capturado.


    18. Crear script de inicio para Ubuntu y macOS

    Creamos el archivo:

    DEVLOCAL/_docker/inicio.sh

    Contenido:

    #!/bin/bash

    clear

    echo "=============================================="
    echo " ENTORNO DEVLOCAL - DOCKER PHP MYSQL"
    echo "=============================================="
    echo ""

    DEV_PATH="$(cd "$(dirname "$0")" && pwd)"

    cd "$DEV_PATH" || exit 1

    echo "Levantando contenedores DEV..."
    echo ""

    docker compose up -d

    echo ""
    echo "Esperando a que los servicios arranquen..."
    sleep 3

    echo ""
    echo "=============================================="
    echo " CONTENEDORES ACTIVOS"
    echo "=============================================="
    echo ""

    docker ps --filter "name=DEV_"

    echo ""
    echo "=============================================="
    echo " INFORMACION DE CONEXION"
    echo "=============================================="
    echo ""

    echo "Servidor Apache + PHP:"
    echo " URL principal: http://localhost:8080"
    echo " Carpeta web: Carpeta DEVLOCAL del alumno"
    echo ""

    echo "Proyecto de prueba:"
    echo " http://localhost:8080/pruebas/"
    echo ""

    echo "phpMyAdmin:"
    echo " URL: http://localhost:8081"
    echo " Servidor: mysql"
    echo " Usuario root: root"
    echo " Password root: root"
    echo ""

    echo "MySQL desde PHP:"
    echo " Host: mysql"
    echo " Puerto: 3306"
    echo " Base de datos: devdb"
    echo " Usuario: devuser"
    echo " Password: devpass"
    echo ""

    echo "MySQL desde el equipo:"
    echo " Host: localhost"
    echo " Puerto: 3307"
    echo " Base de datos: devdb"
    echo " Usuario: devuser"
    echo " Password: devpass"
    echo ""

    echo "Mailpit:"
    echo " Panel web: http://localhost:8025"
    echo " SMTP interno: mailpit:1025"
    echo ""

    echo "Redis:"
    echo " Host desde Docker: redis"
    echo " Host desde equipo: localhost"
    echo " Puerto: 6379"
    echo ""

    echo "=============================================="
    echo " COMANDOS UTILES"
    echo "=============================================="
    echo ""

    echo "Parar entorno:"
    echo " docker compose down"
    echo ""

    echo "Ver logs:"
    echo " docker compose logs -f"
    echo ""

    echo "Entrar al contenedor PHP:"
    echo " docker exec -it DEV_apache_php bash"
    echo ""

    echo "Entrar a MySQL:"
    echo " docker exec -it DEV_mysql mysql -u root -p"
    echo ""

    echo "=============================================="
    echo " ENTORNO DEV LISTO"
    echo "=============================================="
    echo ""

    Damos permisos de ejecución:

    chmod +x inicio.sh

    Lo ejecutamos:

    ./inicio.sh

    19. Crear script de inicio para Windows

    Creamos el archivo:

    DEVLOCAL/_docker/inicio.bat

    Contenido:

    @echo off
    cls

    echo ==============================================
    echo ENTORNO DEVLOCAL - DOCKER PHP MYSQL
    echo ==============================================
    echo.

    cd /d "%~dp0"

    echo Levantando contenedores DEV...
    echo.

    docker compose up -d

    echo.
    echo Esperando a que los servicios arranquen...
    timeout /t 3 > nul

    echo.
    echo ==============================================
    echo CONTENEDORES ACTIVOS
    echo ==============================================
    echo.

    docker ps --filter "name=DEV_"

    echo.
    echo ==============================================
    echo INFORMACION DE CONEXION
    echo ==============================================
    echo.

    echo Servidor Apache + PHP:
    echo URL principal: http://localhost:8080
    echo Carpeta web: Carpeta DEVLOCAL del alumno
    echo.

    echo Proyecto de prueba:
    echo http://localhost:8080/pruebas/
    echo.

    echo phpMyAdmin:
    echo URL: http://localhost:8081
    echo Servidor: mysql
    echo Usuario root: root
    echo Password root: root
    echo.

    echo MySQL desde PHP:
    echo Host: mysql
    echo Puerto: 3306
    echo Base de datos: devdb
    echo Usuario: devuser
    echo Password: devpass
    echo.

    echo MySQL desde Windows:
    echo Host: localhost
    echo Puerto: 3307
    echo Base de datos: devdb
    echo Usuario: devuser
    echo Password: devpass
    echo.

    echo Mailpit:
    echo Panel web: http://localhost:8025
    echo SMTP interno: mailpit:1025
    echo.

    echo Redis:
    echo Host desde Docker: redis
    echo Host desde Windows: localhost
    echo Puerto: 6379
    echo.

    echo ==============================================
    echo COMANDOS UTILES
    echo ==============================================
    echo.

    echo Parar entorno:
    echo docker compose down
    echo.

    echo Ver logs:
    echo docker compose logs -f
    echo.

    echo Entrar al contenedor PHP:
    echo docker exec -it DEV_apache_php bash
    echo.

    echo Entrar a MySQL:
    echo docker exec -it DEV_mysql mysql -u root -p
    echo.

    echo ==============================================
    echo ENTORNO DEV LISTO
    echo ==============================================
    echo.

    pause

    Para ejecutarlo, el alumno puede hacer doble clic sobre inicio.bat o ejecutarlo desde PowerShell.


    20. Script para parar el entorno

    Ubuntu y macOS

    Creamos:

    DEVLOCAL/_docker/parar.sh

    Contenido:

    #!/bin/bash

    cd "$(dirname "$0")" || exit 1

    echo "Parando entorno DEV..."
    docker compose down

    echo "Entorno detenido."

    Permisos:

    chmod +x parar.sh

    Ejecución:

    ./parar.sh

    Windows

    Creamos:

    DEVLOCAL/_docker/parar.bat

    Contenido:

    @echo off
    cls

    cd /d "%~dp0"

    echo Parando entorno DEV...
    docker compose down

    echo.
    echo Entorno detenido.
    pause

    21. Comandos básicos que debe conocer el alumno

    Levantar contenedores

    docker compose up -d

    Levantar y reconstruir

    docker compose up -d --build

    Parar contenedores

    docker compose down

    Ver contenedores activos

    docker ps

    Ver todos los contenedores

    docker ps -a

    Ver logs

    docker compose logs -f

    Ver logs de un servicio concreto

    docker compose logs -f apache_php

    Entrar al contenedor de PHP

    docker exec -it DEV_apache_php bash

    Entrar al contenedor de MySQL

    docker exec -it DEV_mysql mysql -u root -p

    Contraseña:

    root

    22. Crear varios proyectos web

    El alumno puede crear diferentes carpetas dentro de DEVLOCAL.

    Por ejemplo:

    DEVLOCAL/
    ├── pruebas/
    ├── tienda/
    ├── blog/
    ├── reservas/
    └── ejercicios_php/

    Cada proyecto se abrirá desde el navegador así:

    http://localhost:8080/pruebas/
    http://localhost:8080/tienda/
    http://localhost:8080/blog/
    http://localhost:8080/reservas/
    http://localhost:8080/ejercicios_php/

    23. Ejercicio práctico

    Parte 1: Comprobar PHP

    Crear una carpeta llamada:

    alumno_php

    Dentro crear un archivo:

    index.php

    Con este contenido:

    <?php

    $nombre = "Alumno";
    $curso = "Desarrollo Web con PHP";

    echo "<h1>Hola, $nombre</h1>";
    echo "<p>Estamos trabajando en el curso de $curso.</p>";

    Abrir:

    http://localhost:8080/alumno_php/

    Parte 2: Comprobar MySQL

    Crear un archivo:

    conexion.php

    Contenido:

    <?php

    $conexion = new mysqli("mysql", "devuser", "devpass", "devdb");

    if ($conexion->connect_error) {
    die("Error: " . $conexion->connect_error);
    }

    echo "Conexión correcta con MySQL";

    Abrir:

    http://localhost:8080/alumno_php/conexion.php

    Parte 3: Crear una tabla desde phpMyAdmin

    Entrar en:

    http://localhost:8081

    Seleccionar la base de datos:

    devdb

    Crear una tabla llamada:

    alumnos

    Con estos campos:

    CampoTipoExtra
    idINTAUTO_INCREMENT, PRIMARY KEY
    nombreVARCHAR(100)
    emailVARCHAR(150)
    fecha_altaDATETIME

    SQL:

    CREATE TABLE alumnos (
    id INT AUTO_INCREMENT PRIMARY KEY,
    nombre VARCHAR(100) NOT NULL,
    email VARCHAR(150) NOT NULL,
    fecha_alta DATETIME DEFAULT CURRENT_TIMESTAMP
    );

    Insertar datos:

    INSERT INTO alumnos (nombre, email) VALUES
    ('Ana', 'ana@example.test'),
    ('Luis', 'luis@example.test'),
    ('Marta', 'marta@example.test');

    Parte 4: Leer datos desde PHP

    Crear:

    listar.php

    Contenido:

    <?php

    $conexion = new mysqli("mysql", "devuser", "devpass", "devdb");

    if ($conexion->connect_error) {
    die("Error: " . $conexion->connect_error);
    }

    $resultado = $conexion->query("SELECT * FROM alumnos");

    echo "<h1>Listado de alumnos</h1>";

    echo "<table border='1' cellpadding='8'>";
    echo "<tr>";
    echo "<th>ID</th>";
    echo "<th>Nombre</th>";
    echo "<th>Email</th>";
    echo "<th>Fecha de alta</th>";
    echo "</tr>";

    while ($fila = $resultado->fetch_assoc()) {
    echo "<tr>";
    echo "<td>" . $fila["id"] . "</td>";
    echo "<td>" . $fila["nombre"] . "</td>";
    echo "<td>" . $fila["email"] . "</td>";
    echo "<td>" . $fila["fecha_alta"] . "</td>";
    echo "</tr>";
    }

    echo "</table>";

    $conexion->close();

    Abrir:

    http://localhost:8080/alumno_php/listar.php

    24. Preguntas de reflexión para el alumno

    1. ¿Qué diferencia hay entre instalar Apache, PHP y MySQL directamente en el sistema y hacerlo con Docker?
    2. ¿Qué ventaja tiene que todos los servicios estén definidos en un archivo docker-compose.yml?
    3. ¿Por qué PHP se conecta a MySQL usando el host mysql y no localhost?
    4. ¿Qué es un volumen en Docker?
    5. ¿Dónde se guardan los datos de MySQL en este proyecto?
    6. ¿Qué pasaría si ejecutamos docker compose down -v?
    7. ¿Para qué sirve phpMyAdmin?
    8. ¿Para qué sirve Mailpit?
    9. ¿Por qué no deberíamos usar contraseñas como root o devpass en producción?
    10. ¿Qué diferencia hay entre un entorno de desarrollo y un entorno de producción?

    25. Problemas frecuentes

    Docker no arranca en Windows

    Posibles causas:

    • Docker Desktop no está abierto.
    • WSL 2 no está instalado o activado.
    • La virtualización está desactivada en BIOS/UEFI.
    • El equipo necesita reiniciarse.

    Docker recomienda usar el backend WSL 2 en Windows para Docker Desktop.


    El puerto 8080 ya está ocupado

    Puede ocurrir si otro servicio ya está usando ese puerto.

    Solución: cambiar en docker-compose.yml:

    ports:
    - "8080:80"

    Por ejemplo:

    ports:
    - "8090:80"

    Después habría que entrar por:

    http://localhost:8090

    El puerto 3307 ya está ocupado

    Cambiar:

    ports:
    - "3307:3306"

    Por ejemplo:

    ports:
    - "3308:3306"

    No aparecen los cambios en PHP

    Probar a recargar el navegador con:

    Ctrl + F5

    También se puede reiniciar el contenedor:

    docker compose restart apache_php

    Error de permisos en Ubuntu

    Si Docker pide sudo, puede faltar añadir el usuario al grupo docker.

    sudo usermod -aG docker $USER

    Después hay que cerrar sesión y volver a entrar.


    phpMyAdmin no conecta

    Comprobar que MySQL está activo:

    docker ps

    También se pueden ver los logs:

    docker compose logs -f mysql

    26. Cómo borrar todo y empezar de nuevo

    Para parar los contenedores:

    docker compose down

    Para parar y borrar también los datos de MySQL:

    docker compose down -v

    Cuidado: este comando borra el volumen de MySQL. Si hay bases de datos creadas, se perderán.


    29. Ampliaciones posibles

    Cuando el entorno básico funcione, se pueden añadir mejoras:

    • Crear dominios locales como tienda.localhost.
    • Añadir HTTPS local.
    • Añadir un contenedor de Node.js.
    • Añadir un contenedor específico para Laravel.
    • Crear plantillas para WordPress.
    • Añadir copias de seguridad automáticas de MySQL.
    • Crear un script para exportar e importar bases de datos.
    • Crear varios entornos: desarrollo, pruebas y producción.

    30. Conclusión

    Con esta práctica hemos creado un entorno de desarrollo web completo usando Docker. El resultado es similar a XAMPP o MAMP, pero con una ventaja importante: todo el entorno queda definido mediante archivos.

    Esto permite:

    • Repetir la instalación en diferentes sistemas operativos.
    • Compartir el entorno con otros compañeros.
    • Evitar conflictos con instalaciones locales.
    • Trabajar con varios servicios a la vez.
    • Preparar al alumno para entornos profesionales basados en contenedores.

    Docker Compose facilita levantar todos los servicios con un solo comando, lo que lo convierte en una herramienta especialmente útil para desarrollo web moderno.

    Script Cerrar

    Además del script inicio, vamos a crear un script llamado cerrar. Este script no solamente permite apagar el entorno, sino también eliminarlo de diferentes formas según lo que necesitemos. Esto es importante porque no siempre queremos borrar los datos. A veces solo queremos detener los contenedores, y otras veces queremos empezar desde cero.


    Diferencia entre las opciones

    OpciónComando¿Borra contenedores?¿Borra datos MySQL?¿Borra imágenes?
    Parardocker compose stopNoNoNo
    Eliminar contenedoresdocker compose downNoNo
    Eliminar con volúmenesdocker compose down -vNo
    Destruir completodocker compose down -v --rmi local

    docker compose stop

    Detiene los contenedores, pero no los elimina.

    Es como apagar una máquina virtual.


    docker compose down

    Detiene y elimina los contenedores, pero mantiene los volúmenes.

    Es decir, si teníamos una base de datos MySQL con datos, normalmente se conservará.


    docker compose down -v

    Detiene y elimina los contenedores, y también borra los volúmenes.

    En este proyecto significa que se borrarán los datos de MySQL.


    docker compose down -v --rmi local

    Además de eliminar contenedores y volúmenes, elimina imágenes locales creadas por el proyecto.

    En nuestro caso, puede borrar la imagen personalizada de Apache + PHP, por lo que en el siguiente arranque habrá que reconstruirla con:

    docker compose up -d --build

    Recomendación para uso diario

    Para el día a día, lo normal es usar la opción:

    1) Parar contenedores

    o:

    2) Parar y eliminar contenedores

    La opción 3 y 4 solo deberían usarse cuando queramos empezar desde cero.

    Especialmente la opción 3:

    docker compose down -v

    porque borra los datos de MySQL.

    Script para Ubuntu y macOS: cerrar.sh

    Crear el archivo:

    nano /Users/antoniooteroveiga/DEVLOCAL/_docker/cerrar.sh

    Contenido:

    #!/bin/bash

    clear

    echo "=============================================="
    echo " CERRAR ENTORNO DEVLOCAL"
    echo "=============================================="
    echo ""

    DEV_PATH="$(cd "$(dirname "$0")" && pwd)"
    cd "$DEV_PATH" || exit 1

    echo "Este script permite cerrar o destruir el entorno Docker DEV."
    echo ""
    echo "Elige una opcion:"
    echo ""
    echo " 1) Parar contenedores"
    echo " Equivale a: docker compose stop"
    echo ""
    echo " 2) Parar y eliminar contenedores"
    echo " Equivale a: docker compose down"
    echo ""
    echo " 3) Parar, eliminar contenedores y borrar volumenes"
    echo " Equivale a: docker compose down -v"
    echo " AVISO: se borraran las bases de datos de MySQL."
    echo ""
    echo " 4) Parar, eliminar contenedores, volumenes e imagenes del proyecto"
    echo " Equivale a: docker compose down -v --rmi local"
    echo " AVISO: se borraran las bases de datos y las imagenes creadas localmente."
    echo ""
    echo " 5) Ver contenedores DEV activos"
    echo ""
    echo " 6) Cancelar"
    echo ""

    read -p "Selecciona una opcion [1-6]: " opcion

    echo ""

    case "$opcion" in

    1)
    echo "Parando contenedores..."
    docker compose stop
    echo ""
    echo "Contenedores detenidos."
    ;;

    2)
    echo "Parando y eliminando contenedores..."
    docker compose down
    echo ""
    echo "Contenedores eliminados. Los volumenes se conservan."
    ;;

    3)
    echo "ATENCION: esta opcion borrara los volumenes."
    echo "Esto eliminara los datos persistentes de MySQL."
    echo ""
    read -p "Escribe BORRAR para confirmar: " confirmacion

    if [ "$confirmacion" = "BORRAR" ]; then
    echo ""
    echo "Eliminando contenedores y volumenes..."
    docker compose down -v
    echo ""
    echo "Entorno eliminado con volumenes."
    else
    echo ""
    echo "Operacion cancelada. No se ha borrado nada."
    fi
    ;;

    4)
    echo "ATENCION: esta opcion borrara contenedores, volumenes e imagenes locales."
    echo "Esto eliminara los datos de MySQL y obligara a reconstruir la imagen PHP."
    echo ""
    read -p "Escribe DESTRUIR para confirmar: " confirmacion

    if [ "$confirmacion" = "DESTRUIR" ]; then
    echo ""
    echo "Eliminando contenedores, volumenes e imagenes locales..."
    docker compose down -v --rmi local
    echo ""
    echo "Entorno destruido."
    else
    echo ""
    echo "Operacion cancelada. No se ha borrado nada."
    fi
    ;;

    5)
    echo "Mostrando contenedores DEV..."
    echo ""
    docker ps -a --filter "name=DEV_"
    ;;

    6)
    echo "Operacion cancelada."
    ;;

    *)
    echo "Opcion no valida."
    ;;

    esac

    echo ""
    echo "=============================================="
    echo " PROCESO FINALIZADO"
    echo "=============================================="
    echo ""

    Dar permisos de ejecución:

    chmod +x /Users/antoniooteroveiga/DEVLOCAL/_docker/cerrar.sh

    Ejecutarlo:

    cd /Users/antoniooteroveiga/DEVLOCAL/_docker
    ./cerrar.sh

    Versión más portable

    Si quieres que funcione sin depender de tu usuario concreto, es mejor decirles que creen el archivo dentro de _docker y que lo ejecuten desde ahí.

    cd ~/DEVLOCAL/_docker
    nano cerrar.sh
    chmod +x cerrar.sh
    ./cerrar.sh

    El script ya detecta automáticamente la carpeta donde está, gracias a esta línea:

    DEV_PATH="$(cd "$(dirname "$0")" && pwd)"

    Por eso vale tanto para Ubuntu como para macOS.


    Script para Windows: cerrar.bat

    Crear el archivo:

    C:\DEVLOCAL\_docker\cerrar.bat

    Contenido:

    @echo off
    cls

    cd /d "%~dp0"

    :menu
    cls
    echo ==============================================
    echo CERRAR ENTORNO DEVLOCAL
    echo ==============================================
    echo.
    echo Este script permite cerrar o destruir el entorno Docker DEV.
    echo.
    echo Elige una opcion:
    echo.
    echo 1) Parar contenedores
    echo Equivale a: docker compose stop
    echo.
    echo 2) Parar y eliminar contenedores
    echo Equivale a: docker compose down
    echo.
    echo 3) Parar, eliminar contenedores y borrar volumenes
    echo Equivale a: docker compose down -v
    echo AVISO: se borraran las bases de datos de MySQL.
    echo.
    echo 4) Parar, eliminar contenedores, volumenes e imagenes del proyecto
    echo Equivale a: docker compose down -v --rmi local
    echo AVISO: se borraran las bases de datos y las imagenes creadas localmente.
    echo.
    echo 5) Ver contenedores DEV activos
    echo.
    echo 6) Cancelar
    echo.

    set /p opcion=Selecciona una opcion [1-6]:

    if "%opcion%"=="1" goto parar
    if "%opcion%"=="2" goto eliminar
    if "%opcion%"=="3" goto volumenes
    if "%opcion%"=="4" goto destruir
    if "%opcion%"=="5" goto ver
    if "%opcion%"=="6" goto cancelar

    echo.
    echo Opcion no valida.
    pause
    goto menu

    :parar
    cls
    echo Parando contenedores...
    echo.
    docker compose stop
    echo.
    echo Contenedores detenidos.
    pause
    goto fin

    :eliminar
    cls
    echo Parando y eliminando contenedores...
    echo.
    docker compose down
    echo.
    echo Contenedores eliminados. Los volumenes se conservan.
    pause
    goto fin

    :volumenes
    cls
    echo ATENCION: esta opcion borrara los volumenes.
    echo Esto eliminara los datos persistentes de MySQL.
    echo.
    set /p confirmacion=Escribe BORRAR para confirmar:

    if "%confirmacion%"=="BORRAR" (
    echo.
    echo Eliminando contenedores y volumenes...
    docker compose down -v
    echo.
    echo Entorno eliminado con volumenes.
    ) else (
    echo.
    echo Operacion cancelada. No se ha borrado nada.
    )

    pause
    goto fin

    :destruir
    cls
    echo ATENCION: esta opcion borrara contenedores, volumenes e imagenes locales.
    echo Esto eliminara los datos de MySQL y obligara a reconstruir la imagen PHP.
    echo.
    set /p confirmacion=Escribe DESTRUIR para confirmar:

    if "%confirmacion%"=="DESTRUIR" (
    echo.
    echo Eliminando contenedores, volumenes e imagenes locales...
    docker compose down -v --rmi local
    echo.
    echo Entorno destruido.
    ) else (
    echo.
    echo Operacion cancelada. No se ha borrado nada.
    )

    pause
    goto fin

    :ver
    cls
    echo Mostrando contenedores DEV...
    echo.
    docker ps -a --filter "name=DEV_"
    echo.
    pause
    goto menu

    :cancelar
    cls
    echo Operacion cancelada.
    pause
    goto fin

    :fin
    cls
    echo ==============================================
    echo PROCESO FINALIZADO
    echo ==============================================
    echo.

  • Laboratorio DOSBox — Montaje, configuración y pruebas

    Laboratorio DOSBox — Montaje, configuración y pruebas

    1. Introducción

    En este proyecto vamos a montar un pequeño laboratorio retro usando DOSBox, una herramienta que nos permite ejecutar programas y juegos antiguos de MS-DOS en ordenadores modernos.

    El objetivo no es solamente “abrir un juego antiguo”, sino aprender cómo funcionaba un entorno DOS:

    • Unidades como C: o D:.
    • Carpetas y rutas.
    • Archivos ejecutables .EXE, .COM y .BAT.
    • Montaje de carpetas como discos duros.
    • Montaje de imágenes ISO como CD-ROM.
    • Configuración del teclado.
    • Configuración del sonido.
    • Ajustes de velocidad.
    • Automatización con la sección [autoexec].
    • Uso y modificación del archivo dosbox.conf.

    La práctica está planteada como una misión técnica. Cada alumno deberá preparar su propio entorno, probar programas, documentar los comandos utilizados y entregar evidencias.


    Parte 1 — Preparación del laboratorio

    2. Crear la carpeta principal de trabajo

    Antes de abrir DOSBox vamos a crear una carpeta en nuestro ordenador. Esta carpeta será nuestro “disco duro virtual” dentro de DOSBox.


    3. Estructura recomendada en Windows

    Crea la siguiente carpeta:

    C:\DOSLAB

    Dentro de ella crea estas subcarpetas:

    C:\DOSLAB\JUEGOS
    C:\DOSLAB\PROGRAMAS
    C:\DOSLAB\ISOS
    C:\DOSLAB\UTILIDADES
    C:\DOSLAB\CAPTURAS
    C:\DOSLAB\CONFIG

    También puedes crear las carpetas desde PowerShell:

    mkdir C:\DOSLAB
    mkdir C:\DOSLAB\JUEGOS
    mkdir C:\DOSLAB\PROGRAMAS
    mkdir C:\DOSLAB\ISOS
    mkdir C:\DOSLAB\UTILIDADES
    mkdir C:\DOSLAB\CAPTURAS
    mkdir C:\DOSLAB\CONFIG

    4. Estructura recomendada en Linux

    En Linux crea la estructura con estos comandos:

    mkdir -p ~/DOSLAB/JUEGOS
    mkdir -p ~/DOSLAB/PROGRAMAS
    mkdir -p ~/DOSLAB/ISOS
    mkdir -p ~/DOSLAB/UTILIDADES
    mkdir -p ~/DOSLAB/CAPTURAS
    mkdir -p ~/DOSLAB/CONFIG

    5. Estructura recomendada en macOS

    En macOS puedes usar la misma estructura que en Linux:

    mkdir -p ~/DOSLAB/JUEGOS
    mkdir -p ~/DOSLAB/PROGRAMAS
    mkdir -p ~/DOSLAB/ISOS
    mkdir -p ~/DOSLAB/UTILIDADES
    mkdir -p ~/DOSLAB/CAPTURAS
    mkdir -p ~/DOSLAB/CONFIG

    6. Qué guardaremos en cada carpeta

    CarpetaUso
    JUEGOSJuegos antiguos de MS-DOS
    PROGRAMASAplicaciones DOS, editores, herramientas, demos
    ISOSImágenes de CD-ROM en formato .iso
    UTILIDADESHerramientas auxiliares para DOS
    CAPTURASCapturas de pantalla del proyecto
    CONFIGArchivos de configuración personalizados

    Parte 2 — Primer arranque de DOSBox

    7. Abrir DOSBox

    Al abrir DOSBox aparecerá una ventana con un prompt parecido a este:

    Z:\>

    La unidad Z: es una unidad interna de DOSBox. No es nuestro disco duro real.

    Desde aquí todavía no podemos acceder a nuestra carpeta DOSLAB. Primero debemos montarla.


    Parte 3 — Montar carpetas como unidades

    8. Qué significa montar una carpeta

    Montar una carpeta significa decirle a DOSBox:

    “Esta carpeta de mi ordenador moderno quiero que se comporte como si fuera un disco duro dentro de DOSBox”.

    Por ejemplo, podemos hacer que:

    C:\DOSLAB

    se vea dentro de DOSBox como:

    C:

    9. Montar carpeta en Windows

    Si has creado la carpeta en:

    C:\DOSLAB

    dentro de DOSBox escribe:

    mount c c:\doslab

    Después cambia a la unidad C:

    c:

    Ahora deberías ver:

    C:\>

    Comprueba el contenido con:

    dir

    Si la carpeta está en:


    10. Montar carpeta en Linux

    ~/DOSLAB

    dentro de DOSBox escribe:

    mount c ~/DOSLAB

    Después cambia a la unidad C:

    c:

    Y comprueba:

    dir

    11. Montar carpeta en macOS

    En macOS, si la carpeta está en:

    ~/DOSLAB

    dentro de DOSBox escribe:

    mount c ~/DOSLAB

    Después:

    c:
    dir

    12. Montar una carpeta con espacios en la ruta

    Si la carpeta tiene espacios, hay que usar comillas.

    Ejemplo en Windows:

    mount c "c:\mis juegos dos"

    Ejemplo en Linux/macOS:

    mount c "~/Mis Juegos DOS"

    Aunque es posible hacerlo, para evitar problemas se recomienda usar nombres sin espacios:

    DOSLAB
    JUEGOS
    PROGRAMAS
    ISOS

    13. Desmontar una unidad

    Si queremos desmontar la unidad C:, usamos:

    mount -u c

    Después, si intentamos cambiar a C:, ya no estará disponible.


    14. Ver unidades montadas

    Para ver información sobre los montajes activos:

    mount

    15. Actividad 1 — Montaje básico

    Realiza los siguientes pasos:

    1. Abre DOSBox.
    2. Monta tu carpeta DOSLAB como unidad C:.
    3. Cambia a la unidad C:.
    4. Muestra el contenido.
    5. Crea una carpeta desde DOSBox.
    6. Comprueba desde tu sistema operativo real que la carpeta se ha creado.

    Comandos para Windows

    mount c c:\doslab
    c:
    dir
    md PRUEBA
    dir

    Comandos para Linux/macOS

    mount c ~/DOSLAB
    c:
    dir
    md PRUEBA
    dir

    Preguntas

    1. ¿Qué comando has usado para montar la unidad?
    2. ¿Qué carpeta real representa la unidad C:?
    3. ¿Qué ocurre si creas una carpeta dentro de DOSBox?
    4. ¿Puedes verla desde Windows, Linux o macOS?
    5. ¿Qué ventaja tiene este sistema?

    Parte 4 — Comandos básicos de MS-DOS

    16. Comandos de navegación

    Ver contenido

    dir

    Cambiar de carpeta

    cd NOMBRECARPETA

    Volver a la carpeta anterior

    cd ..

    Ir a la raíz de la unidad

    cd \

    Cambiar de unidad

    c:
    d:
    z:

    17. Comandos para crear y borrar carpetas

    Crear una carpeta

    md NOMBRE

    Ejemplo:

    md JUEGO1

    Borrar una carpeta vacía

    rd NOMBRE

    Ejemplo:

    rd JUEGO1

    18. Comandos para trabajar con archivos

    Copiar archivos

    copy archivo.txt copia.txt

    Copiar todos los archivos de una carpeta

    copy *.* destino

    Borrar un archivo

    del archivo.txt

    Ver el contenido de un archivo de texto

    type archivo.txt

    Renombrar archivo

    ren viejo.txt nuevo.txt

    19. Buscar ejecutables

    Los programas DOS suelen ejecutarse con archivos:

    .EXE
    .COM
    .BAT

    Para buscarlos:

    dir *.exe
    dir *.com
    dir *.bat

    20. Actividad 2 — Explorador DOS

    Dentro de DOSBox realiza:

    c:
    md MISION2
    cd MISION2
    md DATOS
    md PRUEBAS
    dir
    cd DATOS
    copy con nota.txt

    Escribe un pequeño texto, por ejemplo:

    Laboratorio DOSBox iniciado correctamente.

    Para terminar la escritura pulsa:

    Ctrl + Z
    Enter

    Ahora comprueba el archivo:

    dir
    type nota.txt

    Vuelve atrás:

    cd ..
    dir

    Preguntas

    1. ¿Qué hace el comando md?
    2. ¿Qué hace el comando cd?
    3. ¿Qué hace dir?
    4. ¿Qué extensión tiene el archivo creado?
    5. ¿Qué comando permite ver el contenido del archivo?

    Parte 5 — Ejecutar programas y juegos DOS

    21. Copiar un juego a la carpeta del laboratorio

    Supongamos que tienes un juego llamado JUEGO1.

    Copia la carpeta del juego dentro de:

    DOSLAB\JUEGOS

    Debería quedar así:

    DOSLAB
    └── JUEGOS
        └── JUEGO1
            ├── JUEGO.EXE
            ├── SETUP.EXE
            ├── README.TXT
            └── DATA

    22. Entrar en la carpeta del juego

    Dentro de DOSBox:

    c:
    cd JUEGOS
    cd JUEGO1
    dir

    23. Localizar el archivo de arranque

    Busca ejecutables:

    dir *.exe
    dir *.bat
    dir *.com

    Archivos habituales:

    GAME.EXE
    PLAY.EXE
    START.EXE
    RUN.EXE
    INSTALL.EXE
    SETUP.EXE
    CONFIG.EXE
    SOUND.EXE

    24. Ejecutar el juego

    Si el archivo se llama JUEGO.EXE, puedes escribir:

    juego

    O también:

    juego.exe

    Si el archivo se llama START.BAT:

    start

    25. Actividad 3 — Primer programa ejecutado

    Realiza estos pasos:

    c:
    cd JUEGOS
    dir
    cd JUEGO1
    dir
    dir *.exe
    dir *.bat
    dir *.com

    Después ejecuta el archivo principal:

    juego

    O el nombre correspondiente en tu caso.

    Preguntas

    1. ¿Qué ejecutables has encontrado?
    2. ¿Cuál ha arrancado correctamente?
    3. ¿Había archivo README.TXT?
    4. ¿Había archivo SETUP.EXE?
    5. ¿El programa ha funcionado directamente o ha necesitado configuración?

    Parte 6 — Montar imágenes ISO como CD-ROM

    26. Qué es una imagen ISO

    Una imagen ISO es una copia de un CD-ROM guardada en un archivo.

    Muchos juegos antiguos necesitan que el CD esté insertado. En DOSBox podemos montar una ISO como si fuera una unidad de CD.

    Normalmente usaremos la unidad D: como CD-ROM.


    27. Preparar carpeta de ISOS

    Guarda tus imágenes ISO dentro de:

    Windows

    C:\DOSLAB\ISOS

    Linux/macOS

    ~/DOSLAB/ISOS

    Ejemplo:

    DOSLAB
    └── ISOS
        └── JUEGOCD.iso

    28. Montar una ISO en Windows

    Dentro de DOSBox:

    imgmount d c:\doslab\isos\juegocd.iso -t iso

    Después entra en la unidad D:

    d:
    dir

    29. Montar una ISO en Linux

    Dentro de DOSBox:

    imgmount d ~/DOSLAB/ISOS/juegocd.iso -t iso

    Después:

    d:
    dir

    30. Montar una ISO en macOS

    Dentro de DOSBox:

    imgmount d ~/DOSLAB/ISOS/juegocd.iso -t iso

    Después:

    d:
    dir

    31. Montar una carpeta como CD-ROM

    A veces no tenemos una ISO, sino una carpeta con el contenido de un CD.

    Podemos montarla como CD-ROM usando mount.

    Windows

    mount d c:\doslab\cdrom -t cdrom

    Linux/macOS

    mount d ~/DOSLAB/CDROM -t cdrom

    Después:

    d:
    dir

    32. Montar varias imágenes de CD

    Algunos juegos tienen varios CDs. En DOSBox se pueden montar varias imágenes en una misma unidad.

    Ejemplo:

    imgmount d c:\doslab\isos\cd1.iso c:\doslab\isos\cd2.iso -t iso

    Durante la ejecución, normalmente se puede cambiar de disco con:

    Ctrl + F4

    33. Actividad 4 — El CD-ROM virtual

    Realiza estos pasos:

    1. Guarda una ISO dentro de la carpeta ISOS.
    2. Monta tu carpeta DOSLAB como C:.
    3. Monta la ISO como D:.
    4. Entra en D:.
    5. Lista el contenido.
    6. Busca archivos de instalación.

    Comandos Windows

    mount c c:\doslab
    imgmount d c:\doslab\isos\juegocd.iso -t iso
    c:
    dir
    d:
    dir
    dir *.exe
    dir *.bat

    Comandos Linux/macOS

    mount c ~/DOSLAB
    imgmount d ~/DOSLAB/ISOS/juegocd.iso -t iso
    c:
    dir
    d:
    dir
    dir *.exe
    dir *.bat

    Preguntas

    1. ¿Qué comando se usa para montar una carpeta?
    2. ¿Qué comando se usa para montar una ISO?
    3. ¿Qué unidad has usado como disco duro?
    4. ¿Qué unidad has usado como CD-ROM?
    5. ¿Qué archivos ejecutables había en el CD?

    Parte 7 — Instalar un juego desde CD a C:

    34. Instalación típica desde CD-ROM

    Muchos juegos antiguos se instalaban desde CD-ROM a disco duro.

    La estructura sería:

    • Unidad C: disco duro virtual.
    • Unidad D: CD-ROM virtual.

    Primero montamos C: y D:.

    Windows

    mount c c:\doslab
    imgmount d c:\doslab\isos\juegocd.iso -t iso

    Linux/macOS

    mount c ~/DOSLAB
    imgmount d ~/DOSLAB/ISOS/juegocd.iso -t iso

    Entramos en D:

    d:
    dir

    Buscamos instalador:

    dir *.exe
    dir *.bat

    Ejecutamos el instalador:

    install

    O:

    setup

    35. Elegir ruta de instalación

    Cuando el instalador pregunte dónde instalar, usaremos una ruta dentro de C:.

    Ejemplo:

    C:\JUEGOS\JUEGOCD

    Si la carpeta no existe, muchos instaladores la crean automáticamente.

    Si no la crean, podemos crearla antes:

    c:
    cd JUEGOS
    md JUEGOCD

    36. Ejecutar después de instalar

    Una vez instalado:

    c:
    cd JUEGOS
    cd JUEGOCD
    dir
    dir *.exe
    dir *.bat

    Ejecutamos el archivo correspondiente:

    juego

    37. Actividad 5 — Instalación completa

    Realiza una instalación desde CD-ROM o ISO.

    Comandos orientativos

    mount c c:\doslab
    imgmount d c:\doslab\isos\juegocd.iso -t iso
    d:
    dir
    install

    Después:

    c:
    cd JUEGOS
    cd JUEGOCD
    dir
    juego

    Preguntas

    1. ¿Desde qué unidad has instalado?
    2. ¿En qué carpeta se ha instalado el programa?
    3. ¿Qué archivo ejecuta el programa instalado?
    4. ¿El programa sigue necesitando el CD montado?
    5. ¿Qué ocurre si ejecutas el juego sin montar la ISO?

    Parte 8 — Configurar teclado

    38. Problema habitual con el teclado

    Puede ocurrir que algunas teclas no coincidan, especialmente:

    :
    \
    /
    -
    _
    ñ

    Para configurar el teclado español podemos probar:

    keyb sp

    O:

    keyb es

    Dependiendo de la versión de DOSBox, puede funcionar una u otra.


    39. Probar caracteres importantes

    Escribe dentro de DOSBox:

    :
    \
    /
    -
    _

    Si no salen correctamente, prueba:

    keyb sp

    Después vuelve a probar.


    40. Añadir teclado al autoexec

    Para que el teclado se configure automáticamente, luego añadiremos esto al apartado [autoexec]:

    keyb sp

    O:

    keyb es

    41. Actividad 6 — Teclado español

    Realiza:

    keyb sp

    Prueba:

    cd \
    dir
    mount c c:\doslab

    Preguntas

    1. ¿Funcionan correctamente los dos puntos?
    2. ¿Funciona correctamente la barra invertida?
    3. ¿Has usado keyb sp o keyb es?
    4. ¿Qué problema puede causar tener mal configurado el teclado?

    Parte 9 — Configurar pantalla

    42. Cambiar entre ventana y pantalla completa

    Dentro de DOSBox:

    Alt + Enter

    Esto alterna entre:

    • Modo ventana.
    • Pantalla completa.

    43. Opciones importantes de pantalla en dosbox.conf

    El archivo de configuración contiene una sección parecida a esta:

    [sdl]
    fullscreen=false
    fulldouble=false
    fullresolution=desktop
    windowresolution=original
    output=surface
    autolock=true
    sensitivity=100
    waitonerror=true
    priority=higher,normal
    mapperfile=mapper.map
    usescancodes=true

    Algunas opciones útiles:

    Arrancar directamente a pantalla completa

    fullscreen=true

    Arrancar en ventana

    fullscreen=false

    Resolución en pantalla completa

    fullresolution=desktop

    Tamaño de ventana

    windowresolution=1280x960

    Sistema de salida gráfica

    output=surface

    En algunas versiones se pueden usar otras opciones:

    output=opengl
    output=overlay

    No todas las opciones funcionan igual en todos los sistemas.


    44. Configuración recomendada básica de pantalla

    Para empezar:

    [sdl]
    fullscreen=false
    fullresolution=desktop
    windowresolution=1280x960
    output=surface
    autolock=true
    sensitivity=100

    Si se quiere arrancar a pantalla completa:

    [sdl]
    fullscreen=true
    fullresolution=desktop
    windowresolution=original
    output=surface
    autolock=true
    sensitivity=100

    45. Actividad 7 — Ajuste de pantalla

    1. Abre el archivo dosbox.conf.
    2. Localiza la sección [sdl].
    3. Cambia fullscreen=false por fullscreen=true.
    4. Guarda el archivo.
    5. Abre DOSBox.
    6. Comprueba si arranca en pantalla completa.
    7. Vuelve a dejarlo en ventana si lo prefieres.

    Preguntas

    1. ¿Qué opción activa la pantalla completa?
    2. ¿Qué combinación de teclas permite cambiar manualmente?
    3. ¿Qué resolución te resulta más cómoda?
    4. ¿Se ve deformada la imagen?

    Parte 10 — Configurar velocidad y ciclos

    46. Qué son los ciclos

    Los ciclos controlan la velocidad de la CPU emulada.

    Si los ciclos son bajos, el programa irá lento.

    Si los ciclos son demasiado altos, algunos juegos antiguos pueden funcionar demasiado rápido o de forma inestable.


    47. Cambiar ciclos durante la ejecución

    Reducir ciclos

    Ctrl + F11

    Aumentar ciclos

    Ctrl + F12

    48. Opciones de ciclos en dosbox.conf

    Busca la sección [cpu].

    Ejemplo:

    [cpu]
    core=auto
    cputype=auto
    cycles=auto
    cycleup=10
    cycledown=20

    49. Configuración automática

    cycles=auto

    Es la opción más cómoda para empezar.


    50. Configuración fija

    Para usar un número fijo de ciclos:

    cycles=10000

    Ejemplos:

    cycles=3000
    cycles=8000
    cycles=12000
    cycles=20000

    51. Configuración máxima

    cycles=max

    Puede funcionar bien en algunos programas, pero en otros puede hacer que todo vaya demasiado rápido.


    52. Configuración recomendada

    Para empezar:

    [cpu]
    core=auto
    cputype=auto
    cycles=auto
    cycleup=10
    cycledown=20

    Para juegos muy antiguos:

    [cpu]
    core=auto
    cputype=auto
    cycles=3000
    cycleup=10
    cycledown=20

    Para juegos algo más modernos:

    [cpu]
    core=auto
    cputype=auto
    cycles=12000
    cycleup=10
    cycledown=20

    53. Actividad 8 — Controlando el tiempo

    1. Ejecuta un juego o programa.
    2. Pulsa varias veces Ctrl + F12.
    3. Observa si va más rápido.
    4. Pulsa varias veces Ctrl + F11.
    5. Observa si va más lento.
    6. Cambia cycles=auto por cycles=8000.
    7. Vuelve a probar.

    Preguntas

    1. ¿Qué ocurre al aumentar ciclos?
    2. ¿Qué ocurre al reducir ciclos?
    3. ¿Qué configuración te ha funcionado mejor?
    4. ¿Por qué algunos juegos antiguos son sensibles a la velocidad?

    Parte 11 — Configurar memoria

    54. Memoria emulada

    En la sección [dosbox] o similar puede aparecer una opción de memoria:

    memsize=16

    Esto indica la memoria RAM emulada en MB.

    Valores habituales:

    memsize=16
    memsize=32
    memsize=64

    Para la mayoría de juegos DOS, 16 MB suele ser suficiente. Para pruebas más avanzadas se puede usar 32 o 64 MB.


    55. Configuración recomendada

    [dosbox]
    memsize=16

    Para pruebas avanzadas:

    [dosbox]
    memsize=32

    56. Actividad 9 — Memoria

    1. Localiza la opción memsize.
    2. Anota su valor.
    3. Cambia el valor a 32.
    4. Guarda el archivo.
    5. Ejecuta un programa.
    6. Comprueba si notas algún cambio.

    Preguntas

    1. ¿Qué valor tenía inicialmente?
    2. ¿Qué valor has puesto?
    3. ¿Ha cambiado algo en el programa probado?
    4. ¿Crees que más memoria siempre mejora el funcionamiento?

    Parte 12 — Configurar sonido

    57. Sonido en DOSBox

    Muchos juegos antiguos permiten elegir tarjeta de sonido.

    Las más comunes son:

    • PC Speaker.
    • AdLib.
    • Sound Blaster.
    • Sound Blaster Pro.
    • Sound Blaster 16.
    • General MIDI.

    58. Buscar configuración de sonido en un juego

    Dentro de la carpeta del juego busca archivos como:

    dir setup.exe
    dir install.exe
    dir setsound.exe
    dir config.exe
    dir sound.exe

    O de forma general:

    dir *.exe

    Después prueba:

    setup

    O:

    install

    59. Valores típicos de Sound Blaster en DOSBox

    Muchos juegos funcionan con estos valores:

    Sound Blaster 16
    Port: 220
    IRQ: 7
    DMA: 1
    HDMA: 5

    También puedes encontrar:

    Port: 220
    IRQ: 5
    DMA: 1

    Si una opción no funciona, prueba la otra.


    60. Sección Sound Blaster en dosbox.conf

    Busca la sección [sblaster].

    Ejemplo:

    [sblaster]
    sbtype=sb16
    sbbase=220
    irq=7
    dma=1
    hdma=5
    mixer=true
    oplmode=auto
    oplemu=default
    oplrate=44100

    61. Configuración recomendada de sonido

    [sblaster]
    sbtype=sb16
    sbbase=220
    irq=7
    dma=1
    hdma=5
    mixer=true
    oplmode=auto
    oplemu=default
    oplrate=44100

    62. Actividad 10 — Configuración de sonido

    1. Entra en la carpeta de un juego.
    2. Busca el archivo de configuración.
    3. Ejecuta setup, install, config o similar.
    4. Selecciona Sound Blaster 16.
    5. Usa puerto 220.
    6. Usa IRQ 7.
    7. Usa DMA 1.
    8. Guarda la configuración.
    9. Ejecuta el juego.

    Preguntas

    1. ¿Qué archivo has usado para configurar el sonido?
    2. ¿Qué tarjeta de sonido has seleccionado?
    3. ¿Qué puerto has usado?
    4. ¿Qué IRQ has usado?
    5. ¿Qué DMA has usado?
    6. ¿Funcionan música y efectos?
    7. ¿Qué diferencia hay entre música y efectos de sonido?

    Parte 13 — Configurar ratón

    63. Capturar y liberar el ratón

    DOSBox puede capturar el ratón dentro de su ventana.

    Para capturar o liberar el ratón:

    Ctrl + F10

    64. Opción autolock

    En la sección [sdl] aparece:

    autolock=true

    Si está activado, DOSBox intenta capturar automáticamente el ratón cuando haces clic dentro de la ventana.


    65. Sensibilidad del ratón

    También puede aparecer:

    sensitivity=100

    Podemos modificarlo:

    sensitivity=80
    sensitivity=120
    sensitivity=150

    66. Configuración recomendada de ratón

    [sdl]
    autolock=true
    sensitivity=100

    67. Actividad 11 — Ratón

    1. Ejecuta un juego que use ratón.
    2. Haz clic dentro de la ventana.
    3. Prueba a capturar y liberar con Ctrl + F10.
    4. Cambia la sensibilidad a 120.
    5. Vuelve a probar.

    Preguntas

    1. ¿El juego reconoce el ratón?
    2. ¿Qué hace Ctrl + F10?
    3. ¿Qué valor de sensibilidad te resulta más cómodo?
    4. ¿Qué problema puede aparecer si el ratón queda capturado?

    Parte 14 — Archivo dosbox.conf

    68. Qué es dosbox.conf

    dosbox.conf es el archivo principal de configuración de DOSBox.

    En él podemos configurar:

    • Pantalla.
    • Sonido.
    • CPU.
    • Memoria.
    • Teclado.
    • Ratón.
    • Montaje automático de carpetas.
    • Comandos de arranque.
    • Opciones específicas del emulador.

    69. Crear un archivo de configuración

    Dentro de DOSBox podemos generar un archivo de configuración con:

    config -writeconf dosbox.conf

    Esto crea un archivo llamado dosbox.conf en la ubicación desde la que DOSBox pueda escribirlo.

    También podemos indicar una ruta concreta.

    Windows

    config -writeconf c:\doslab\config\dosbox.conf

    Linux/macOS

    config -writeconf ~/DOSLAB/CONFIG/dosbox.conf

    70. Abrir el archivo de configuración

    El archivo se puede abrir con un editor de texto.

    Windows

    Puedes usar Bloc de notas, Notepad++ o Visual Studio Code.

    Desde PowerShell:

    notepad C:\DOSLAB\CONFIG\dosbox.conf

    Con Visual Studio Code:

    code C:\DOSLAB\CONFIG\dosbox.conf

    Linux

    nano ~/DOSLAB/CONFIG/dosbox.conf

    O con Visual Studio Code:

    code ~/DOSLAB/CONFIG/dosbox.conf

    macOS

    nano ~/DOSLAB/CONFIG/dosbox.conf

    O:

    code ~/DOSLAB/CONFIG/dosbox.conf

    71. Secciones principales de dosbox.conf

    Las secciones más importantes suelen ser:

    [sdl]
    [dosbox]
    [render]
    [cpu]
    [mixer]
    [midi]
    [sblaster]
    [gus]
    [speaker]
    [joystick]
    [serial]
    [dos]
    [ipx]
    [autoexec]

    No siempre aparecerán exactamente igual en todas las versiones, pero la idea general es la misma.


    Parte 15 — La sección [autoexec]

    72. Qué es [autoexec]

    La sección [autoexec] permite ejecutar comandos automáticamente al arrancar DOSBox.

    Es una de las partes más útiles de la configuración.

    En vez de escribir siempre:

    mount c c:\doslab
    c:
    cd juegos
    dir

    podemos dejarlo preparado en el archivo de configuración.


    73. Autoexec básico para Windows

    Al final de dosbox.conf, busca:

    [autoexec]

    Añade:

    [autoexec]
    mount c c:\doslab
    c:
    cls
    echo Laboratorio DOSBox iniciado
    dir

    74. Autoexec básico para Linux/macOS

    [autoexec]
    mount c ~/DOSLAB
    c:
    cls
    echo Laboratorio DOSBox iniciado
    dir

    75. Autoexec con teclado español

    Windows

    [autoexec]
    keyb sp
    mount c c:\doslab
    c:
    cls
    echo Laboratorio DOSBox iniciado
    dir

    Linux/macOS

    [autoexec]
    keyb sp
    mount c ~/DOSLAB
    c:
    cls
    echo Laboratorio DOSBox iniciado
    dir

    76. Autoexec entrando directamente en la carpeta JUEGOS

    Windows

    [autoexec]
    keyb sp
    mount c c:\doslab
    c:
    cd JUEGOS
    cls
    echo Carpeta de juegos cargada
    dir

    Linux/macOS

    [autoexec]
    keyb sp
    mount c ~/DOSLAB
    c:
    cd JUEGOS
    cls
    echo Carpeta de juegos cargada
    dir

    77. Autoexec montando disco duro e ISO

    Windows

    [autoexec]
    keyb sp
    mount c c:\doslab
    imgmount d c:\doslab\isos\juegocd.iso -t iso
    c:
    cls
    echo Disco duro C: y CD-ROM D: preparados
    dir

    Linux/macOS

    [autoexec]
    keyb sp
    mount c ~/DOSLAB
    imgmount d ~/DOSLAB/ISOS/juegocd.iso -t iso
    c:
    cls
    echo Disco duro C: y CD-ROM D: preparados
    dir

    78. Autoexec para arrancar un juego automáticamente

    Supongamos que tenemos el juego en:

    C:\JUEGOS\JUEGO1

    y que se ejecuta con:

    JUEGO.EXE

    Windows

    [autoexec]
    keyb sp
    mount c c:\doslab
    c:
    cd JUEGOS
    cd JUEGO1
    cls
    juego

    Linux/macOS

    [autoexec]
    keyb sp
    mount c ~/DOSLAB
    c:
    cd JUEGOS
    cd JUEGO1
    cls
    juego

    79. Autoexec con menú sencillo

    Podemos crear un pequeño menú visual usando echo.

    [autoexec]
    keyb sp
    mount c c:\doslab
    c:
    cls
    echo ================================
    echo      LABORATORIO DOSBOX
    echo ================================
    echo.
    echo Comandos utiles:
    echo   dir       - Ver archivos
    echo   cd nombre - Entrar en carpeta
    echo   cd ..     - Volver atras
    echo   cls       - Limpiar pantalla
    echo.
    echo Carpetas disponibles:
    echo   JUEGOS
    echo   PROGRAMAS
    echo   ISOS
    echo.
    dir

    Para Linux/macOS cambia la línea del montaje:

    mount c ~/DOSLAB

    80. Actividad 12 — Autoexec personalizado

    Configura DOSBox para que al arrancar:

    1. Configure teclado español.
    2. Monte la carpeta DOSLAB.
    3. Entre en la unidad C:.
    4. Limpie la pantalla.
    5. Muestre un mensaje personalizado.
    6. Liste el contenido.

    Ejemplo Windows

    [autoexec]
    keyb sp
    mount c c:\doslab
    c:
    cls
    echo Bienvenido al laboratorio retro
    echo Tu unidad C: esta preparada
    dir

    Ejemplo Linux/macOS

    [autoexec]
    keyb sp
    mount c ~/DOSLAB
    c:
    cls
    echo Bienvenido al laboratorio retro
    echo Tu unidad C: esta preparada
    dir

    Preguntas

    1. ¿Qué hace keyb sp?
    2. ¿Qué hace mount c?
    3. ¿Qué hace cls?
    4. ¿Qué hace echo?
    5. ¿Qué ventajas tiene usar [autoexec]?

    Parte 16 — Usar varios archivos de configuración

    81. Por qué crear varias configuraciones

    Podemos tener un archivo de configuración para cada juego o práctica.

    Ejemplo:

    dosbox_basico.conf
    dosbox_juego1.conf
    dosbox_cdrom.conf
    dosbox_rapido.conf
    dosbox_lento.conf

    Esto permite arrancar DOSBox con diferentes opciones según lo que queramos probar.


    82. Crear una configuración para un juego

    Copia tu archivo dosbox.conf y crea otro llamado:

    dosbox_juego1.conf

    En Windows:

    copy C:\DOSLAB\CONFIG\dosbox.conf C:\DOSLAB\CONFIG\dosbox_juego1.conf

    En Linux/macOS:

    cp ~/DOSLAB/CONFIG/dosbox.conf ~/DOSLAB/CONFIG/dosbox_juego1.conf

    83. Modificar el autoexec del juego

    Edita dosbox_juego1.conf y deja al final:

    [autoexec]
    keyb sp
    mount c c:\doslab
    c:
    cd JUEGOS
    cd JUEGO1
    juego

    En Linux/macOS:

    [autoexec]
    keyb sp
    mount c ~/DOSLAB
    c:
    cd JUEGOS
    cd JUEGO1
    juego

    84. Arrancar DOSBox con un archivo de configuración concreto

    Windows

    Desde PowerShell o CMD:

    dosbox -conf C:\DOSLAB\CONFIG\dosbox_juego1.conf

    Si el comando dosbox no funciona directamente, habrá que usar la ruta completa del ejecutable o crear un acceso directo.


    Linux

    dosbox -conf ~/DOSLAB/CONFIG/dosbox_juego1.conf

    macOS

    dosbox -conf ~/DOSLAB/CONFIG/dosbox_juego1.conf

    85. Actividad 13 — Perfil personalizado

    Crea dos archivos de configuración:

    dosbox_basico.conf
    dosbox_juego1.conf

    El primero debe arrancar en C:\.

    El segundo debe arrancar directamente dentro de la carpeta de un juego.

    Preguntas

    1. ¿Qué ventaja tiene usar varios archivos .conf?
    2. ¿Qué diferencia hay entre tus dos configuraciones?
    3. ¿Cuál usarías para una práctica general?
    4. ¿Cuál usarías para abrir directamente un juego?

    Parte 17 — Crear archivos BAT dentro de DOSBox

    86. Qué es un archivo BAT

    Un archivo .BAT contiene comandos que se ejecutan en orden.

    Sirve para automatizar tareas dentro de DOS.

    Por ejemplo, podemos crear un archivo llamado:

    MENU.BAT

    87. Crear un BAT desde DOSBox

    Entra en C:

    c:

    Crea un archivo:

    copy con menu.bat

    Escribe:

    @echo off
    cls
    echo ==========================
    echo      MENU DOSBOX
    echo ==========================
    echo.
    echo 1. Ir a juegos
    echo 2. Ir a programas
    echo.
    echo Escribe cd JUEGOS para entrar en juegos
    echo Escribe cd PROGRAMAS para entrar en programas

    Termina con:

    Ctrl + Z
    Enter

    Ejecuta:

    menu

    88. Crear un lanzador para un juego

    Supongamos que queremos crear un lanzador llamado juego1.bat.

    copy con juego1.bat

    Contenido:

    @echo off
    cls
    cd \JUEGOS\JUEGO1
    JUEGO.EXE
    cd \

    Termina con:

    Ctrl + Z
    Enter

    Ejecuta:

    juego1

    89. Actividad 14 — Crear lanzadores

    Crea al menos dos archivos .BAT:

    1. Uno que muestre un menú.
    2. Uno que arranque un juego o programa.

    Preguntas

    1. ¿Para qué sirve un archivo .BAT?
    2. ¿Qué significa @echo off?
    3. ¿Qué ventaja tiene crear lanzadores?
    4. ¿Dónde has guardado tus archivos .BAT?

    Parte 18 — Capturas de pantalla

    90. Capturas desde DOSBox

    En muchas versiones de DOSBox se pueden hacer capturas con:

    Ctrl + F5

    Las capturas se guardan en la carpeta configurada para capturas, dependiendo de la versión y sistema.

    Si no funciona, puedes usar las herramientas del sistema operativo:

    Windows

    Win + Shift + S

    macOS

    Cmd + Shift + 4

    Linux

    Depende del entorno, pero suele funcionar:

    Impr Pant

    O herramientas como Flameshot.


    91. Actividad 15 — Evidencias

    Realiza capturas de:

    1. DOSBox recién abierto.
    2. Unidad C: montada.
    3. Contenido de DOSLAB.
    4. Imagen ISO montada como D:.
    5. Juego o programa funcionando.
    6. Archivo dosbox.conf editado.
    7. Sección [autoexec].

    Parte 19 — Comandos rápidos de DOSBox

    92. Comandos internos útiles

    AcciónComando
    Montar carpeta como C:mount c ruta
    Desmontar unidadmount -u c
    Montar ISOimgmount d archivo.iso -t iso
    Cambiar a C:c:
    Cambiar a D:d:
    Ver archivosdir
    Entrar en carpetacd carpeta
    Volver atráscd ..
    Ir a raízcd \
    Limpiar pantallacls
    Crear carpetamd carpeta
    Borrar carpeta vacíard carpeta
    Borrar archivodel archivo
    Ver textotype archivo.txt
    Buscar EXEdir *.exe
    Buscar BATdir *.bat
    Buscar COMdir *.com
    Cambiar tecladokeyb sp
    Salir de DOSBoxexit

    93. Atajos útiles

    AcciónAtajo
    Pantalla completaAlt + Enter
    Capturar/liberar ratónCtrl + F10
    Bajar ciclosCtrl + F11
    Subir ciclosCtrl + F12
    Captura de pantallaCtrl + F5
    Cambiar disco en imágenes múltiplesCtrl + F4

    Parte 20 — Configuración completa recomendada

    94. Ejemplo de dosbox.conf básico para clase

    Este ejemplo no incluye todo el archivo, solo las partes más importantes que conviene revisar.

    [sdl]
    fullscreen=false
    fullresolution=desktop
    windowresolution=1280x960
    output=surface
    autolock=true
    sensitivity=100
    
    [dosbox]
    machine=svga_s3
    memsize=16
    
    [cpu]
    core=auto
    cputype=auto
    cycles=auto
    cycleup=10
    cycledown=20
    
    [sblaster]
    sbtype=sb16
    sbbase=220
    irq=7
    dma=1
    hdma=5
    mixer=true
    oplmode=auto
    oplemu=default
    oplrate=44100
    
    [autoexec]
    keyb sp
    mount c c:\doslab
    c:
    cls
    echo ================================
    echo      LABORATORIO DOSBOX
    echo ================================
    echo.
    echo Unidad C: montada correctamente.
    echo Usa DIR para ver archivos.
    echo Usa CD JUEGOS para entrar en juegos.
    echo.
    dir

    Para Linux/macOS, cambia esta línea:

    mount c c:\doslab

    por:

    mount c ~/DOSLAB

    Parte 21 — Configuración para juego con CD-ROM

    95. Ejemplo Windows

    [sdl]
    fullscreen=false
    fullresolution=desktop
    windowresolution=1280x960
    output=surface
    autolock=true
    sensitivity=100
    
    [dosbox]
    machine=svga_s3
    memsize=16
    
    [cpu]
    core=auto
    cputype=auto
    cycles=12000
    cycleup=10
    cycledown=20
    
    [sblaster]
    sbtype=sb16
    sbbase=220
    irq=7
    dma=1
    hdma=5
    mixer=true
    oplmode=auto
    oplemu=default
    oplrate=44100
    
    [autoexec]
    keyb sp
    mount c c:\doslab
    imgmount d c:\doslab\isos\juegocd.iso -t iso
    c:
    cd JUEGOS
    cd JUEGOCD
    cls
    echo Juego con CD-ROM preparado
    juego

    96. Ejemplo Linux/macOS

    [sdl]
    fullscreen=false
    fullresolution=desktop
    windowresolution=1280x960
    output=surface
    autolock=true
    sensitivity=100
    
    [dosbox]
    machine=svga_s3
    memsize=16
    
    [cpu]
    core=auto
    cputype=auto
    cycles=12000
    cycleup=10
    cycledown=20
    
    [sblaster]
    sbtype=sb16
    sbbase=220
    irq=7
    dma=1
    hdma=5
    mixer=true
    oplmode=auto
    oplemu=default
    oplrate=44100
    
    [autoexec]
    keyb sp
    mount c ~/DOSLAB
    imgmount d ~/DOSLAB/ISOS/juegocd.iso -t iso
    c:
    cd JUEGOS
    cd JUEGOCD
    cls
    echo Juego con CD-ROM preparado
    juego

    Parte 22 — Solución de problemas

    97. Error: Directory does not exist

    Significa que la carpeta indicada no existe o la ruta está mal escrita.

    Ejemplo incorrecto:

    mount c c:\doslabb

    Ejemplo correcto:

    mount c c:\doslab

    Comprueba desde tu sistema operativo que la carpeta existe.


    98. Error: Drive C already mounted

    La unidad C: ya está montada.

    Puedes desmontarla:

    mount -u c

    Y volver a montarla:

    mount c c:\doslab

    99. No encuentro el juego

    Usa:

    dir
    cd JUEGOS
    dir

    Busca ejecutables:

    dir *.exe
    dir *.bat
    dir *.com

    100. El juego pide CD

    Monta la ISO:

    imgmount d c:\doslab\isos\juegocd.iso -t iso

    O en Linux/macOS:

    imgmount d ~/DOSLAB/ISOS/juegocd.iso -t iso

    101. El juego va muy rápido

    Reduce ciclos:

    Ctrl + F11

    O cambia en dosbox.conf:

    cycles=3000

    102. El juego va muy lento

    Aumenta ciclos:

    Ctrl + F12

    O cambia:

    cycles=12000

    103. No funciona el sonido

    Ejecuta el configurador del juego:

    setup

    O:

    install

    Busca:

    dir *.exe

    Configura:

    Sound Blaster 16
    Port 220
    IRQ 7
    DMA 1
    HDMA 5

    104. No funciona el ratón

    Captura el ratón:

    Ctrl + F10

    Comprueba también si el juego tiene opción de ratón.


    105. El teclado escribe símbolos raros

    Prueba:

    keyb sp

    O:

    keyb es

    Añádelo después en [autoexec].


    Parte 23 — Entrega final del alumno

    106. Documento que debe entregar el alumno

    El alumno deberá entregar un documento con:

    1. Portada.
    2. Sistema operativo usado.
    3. Versión de DOSBox usada.
    4. Captura de la estructura de carpetas.
    5. Comandos usados para montar C:.
    6. Comandos usados para montar D: o ISO.
    7. Captura del juego o programa funcionando.
    8. Explicación de la configuración de sonido.
    9. Explicación de la configuración de ciclos.
    10. Captura del archivo dosbox.conf.
    11. Captura de la sección [autoexec].
    12. Problemas encontrados.
    13. Soluciones aplicadas.
    14. Conclusión personal.

    107. Tabla de comandos usados

    El alumno debe completar esta tabla:

    AcciónComando usadoResultado
    Montar unidad C:
    Cambiar a C:
    Ver archivos
    Entrar en carpeta
    Buscar ejecutables
    Ejecutar programa
    Montar ISO
    Cambiar a D:
    Configurar teclado
    Cambiar ciclos
    Pantalla completa
    Capturar ratón

    Parte 24 — Reto final

    108. Reto: Museo DOSBox

    Cada alumno o grupo deberá preparar un pequeño museo retro con tres elementos:

    1. Un juego.
    2. Un programa de utilidad.
    3. Un programa educativo, demo o herramienta técnica.

    Para cada elemento deberá indicar:

    CampoInformación
    Nombre
    Tipo
    Año aproximado
    Carpeta
    Ejecutable principal
    Comandos de arranque
    ¿Necesita CD-ROM?
    ¿Necesita sonido?
    Configuración usada
    Problemas encontrados
    Solución aplicada
    Captura

    Parte 25 — Conclusión

    DOSBox nos permite aprender mucho más que a ejecutar juegos antiguos.

    Con esta práctica hemos trabajado conceptos muy importantes:

    • Sistemas operativos antiguos.
    • Línea de comandos.
    • Rutas y unidades.
    • Montaje de discos.
    • Imágenes ISO.
    • Configuración de hardware emulado.
    • Sonido.
    • Ratón.
    • Teclado.
    • Automatización de arranque.
    • Documentación técnica.

    Este proyecto nos ayuda a entender mejor cómo ha evolucionado la informática y por qué muchos conceptos antiguos siguen presentes en los sistemas actuales.

    Tabla resumen de comandos principales de DOSBox

    CategoríaAcciónComando / AtajoEjemploExplicación
    UnidadesMontar una carpeta como disco duromount c rutamount c c:\doslabConvierte una carpeta real en la unidad C: dentro de DOSBox
    UnidadesMontar carpeta en Linux/macOSmount c rutamount c ~/DOSLABMonta una carpeta del usuario como unidad C:
    UnidadesCambiar a unidad C:c:c:Entra en la unidad C:
    UnidadesCambiar a unidad D:d:d:Entra en la unidad D:, normalmente usada como CD-ROM
    UnidadesCambiar a unidad Z:z:z:Vuelve a la unidad interna de DOSBox
    UnidadesVer unidades montadasmountmountMuestra información de las unidades montadas
    UnidadesDesmontar una unidadmount -u letramount -u cDesmonta la unidad indicada
    CD-ROM / ISOMontar una ISO como CD-ROMimgmount d archivo.iso -t isoimgmount d c:\doslab\isos\juego.iso -t isoMonta una imagen ISO como unidad D:
    CD-ROM / ISOMontar una carpeta como CD-ROMmount d ruta -t cdrommount d c:\doslab\cdrom -t cdromHace que una carpeta funcione como un CD-ROM
    CD-ROM / ISOMontar varias ISOsimgmount d iso1 iso2 -t isoimgmount d cd1.iso cd2.iso -t isoPermite montar varios CDs para juegos con varios discos
    CD-ROM / ISOCambiar de CD montadoCtrl + F4Ctrl + F4Cambia entre imágenes montadas en la misma unidad
    NavegaciónVer contenido de carpetadirdirLista archivos y carpetas
    NavegaciónEntrar en una carpetacd carpetacd JUEGOSCambia a una carpeta concreta
    NavegaciónVolver a la carpeta anteriorcd ..cd ..Sube un nivel en la estructura de carpetas
    NavegaciónIr a la raíz de la unidadcd \cd \Vuelve al inicio de la unidad actual
    NavegaciónLimpiar pantallaclsclsBorra el contenido visible de la pantalla
    CarpetasCrear carpetamd nombremd PRUEBACrea una carpeta
    CarpetasBorrar carpeta vacíard nombrerd PRUEBAElimina una carpeta si está vacía
    ArchivosCopiar archivocopy origen destinocopy nota.txt copia.txtCopia un archivo
    ArchivosBorrar archivodel archivodel nota.txtElimina un archivo
    ArchivosRenombrar archivoren antiguo nuevoren viejo.txt nuevo.txtCambia el nombre de un archivo
    ArchivosVer archivo de textotype archivotype readme.txtMuestra el contenido de un archivo de texto
    ArchivosCrear archivo desde consolacopy con archivo.txtcopy con nota.txtPermite crear un archivo escribiendo desde DOS
    ArchivosFinalizar creación con copy conCtrl + Z y EnterCtrl + Z + EnterGuarda el archivo creado con copy con
    EjecutablesBuscar archivos EXEdir *.exedir *.exeMuestra los ejecutables .EXE
    EjecutablesBuscar archivos BATdir *.batdir *.batMuestra scripts .BAT
    EjecutablesBuscar archivos COMdir *.comdir *.comMuestra ejecutables .COM
    EjecutablesEjecutar programanombrejuegoEjecuta un archivo .EXE, .COM o .BAT
    ConfiguraciónGenerar archivo de configuraciónconfig -writeconf archivo.confconfig -writeconf c:\doslab\config\dosbox.confCrea un archivo de configuración de DOSBox
    ConfiguraciónUsar un archivo de configuracióndosbox -conf archivo.confdosbox -conf C:\DOSLAB\CONFIG\juego.confArranca DOSBox usando una configuración concreta
    ConfiguraciónConfigurar teclado españolkeyb spkeyb spIntenta activar distribución de teclado española
    ConfiguraciónAlternativa teclado españolkeyb eskeyb esOtra opción según versión de DOSBox
    PantallaCambiar pantalla completa / ventanaAlt + EnterAlt + EnterAlterna entre modo ventana y pantalla completa
    RatónCapturar o liberar ratónCtrl + F10Ctrl + F10Hace que el ratón quede dentro o fuera de DOSBox
    VelocidadReducir ciclosCtrl + F11Ctrl + F11Reduce la velocidad de la CPU emulada
    VelocidadAumentar ciclosCtrl + F12Ctrl + F12Aumenta la velocidad de la CPU emulada
    CapturasCaptura de pantallaCtrl + F5Ctrl + F5Guarda una captura, si la versión lo soporta
    SalidaSalir de DOSBoxexitexitCierra DOSBox
    AyudaVer ayuda básicaintrointroMuestra información introductoria de DOSBox
    AyudaVer ayuda de comandoshelphelpMuestra ayuda de comandos disponibles
    AyudaAyuda de un comando concretocomando /?mount /?Muestra ayuda del comando indicado, si está disponible

    Tabla rápida de configuraciones habituales en dosbox.conf

    SecciónOpciónEjemploUso
    [sdl]fullscreenfullscreen=falseIndica si DOSBox arranca en pantalla completa
    [sdl]fullresolutionfullresolution=desktopUsa la resolución del escritorio en pantalla completa
    [sdl]windowresolutionwindowresolution=1280x960Define el tamaño de la ventana
    [sdl]outputoutput=surfaceDefine el sistema de salida gráfica
    [sdl]autolockautolock=trueCaptura automáticamente el ratón al hacer clic
    [sdl]sensitivitysensitivity=100Ajusta la sensibilidad del ratón
    [dosbox]machinemachine=svga_s3Define el tipo de máquina gráfica emulada
    [dosbox]memsizememsize=16Define la memoria RAM emulada en MB
    [cpu]corecore=autoDefine el núcleo de emulación de CPU
    [cpu]cputypecputype=autoDefine el tipo de CPU emulada
    [cpu]cyclescycles=autoControla la velocidad de la CPU emulada
    [cpu]cycleupcycleup=10Cantidad que suben los ciclos con Ctrl + F12
    [cpu]cycledowncycledown=20Cantidad que bajan los ciclos con Ctrl + F11
    [sblaster]sbtypesbtype=sb16Define el tipo de Sound Blaster
    [sblaster]sbbasesbbase=220Puerto base de la Sound Blaster
    [sblaster]irqirq=7IRQ de la tarjeta de sonido
    [sblaster]dmadma=1Canal DMA principal
    [sblaster]hdmahdma=5Canal DMA de alta velocidad
    [sblaster]mixermixer=trueActiva el mezclador de sonido
    [sblaster]oplmodeoplmode=autoConfigura la síntesis FM/AdLib
    [autoexec]mountmount c c:\doslabMonta automáticamente una carpeta al arrancar
    [autoexec]imgmountimgmount d c:\doslab\isos\juego.iso -t isoMonta una ISO automáticamente
    [autoexec]keybkeyb spConfigura el teclado automáticamente
    [autoexec]echoecho BienvenidoMuestra mensajes al arrancar
    [autoexec]clsclsLimpia la pantalla al arrancar
    [autoexec]cdcd JUEGOSEntra automáticamente en una carpeta
    [autoexec]Ejecutar programajuegoArranca automáticamente un programa o juego
  • [Prueba competencial] – Servicios utilizando Docker y Docker Compose

    1. Contexto de la práctica

    En esta práctica vas a desplegar una pequeña infraestructura de servicios utilizando Docker y Docker Compose.

    El objetivo no es únicamente “levantar contenedores”, sino comprender cómo se organizan los servicios, cómo se comunican entre ellos, cómo se almacenan los datos, cómo se exponen puertos al exterior y cómo se puede documentar y justificar una instalación técnica.

    Durante la práctica se trabajará con servicios similares a los vistos en clase:

    • Servidor web HTTP con Apache.
    • PHP para ejecutar código dinámico.
    • MySQL como base de datos relacional.
    • phpMyAdmin como herramienta de administración.
    • MongoDB como base de datos NoSQL.
    • Mongo Express como herramienta de administración.
    • Redes Docker.
    • Volúmenes persistentes.
    • Variables de entorno.
    • Logs y comprobaciones.
    • Copias de seguridad básicas.
    • Documentación técnica.

    2. Objetivos de aprendizaje

    Al finalizar la práctica, el alumno deberá ser capaz de:

    1. Explicar qué es Docker y para qué se utiliza.
    2. Diferenciar una imagen de un contenedor.
    3. Crear y ejecutar contenedores mediante Docker Compose.
    4. Configurar servicios conectados entre sí.
    5. Usar volúmenes para conservar datos.
    6. Usar redes Docker para aislar servicios.
    7. Configurar variables de entorno.
    8. Desplegar una aplicación PHP conectada a MySQL.
    9. Desplegar y consultar una base de datos MongoDB.
    10. Comprobar el estado de los servicios mediante comandos.
    11. Interpretar errores básicos mediante logs.
    12. Documentar una instalación técnica de forma clara.
    13. Defender oralmente el trabajo realizado.

    3. Resultado final esperado

    Al terminar la práctica deberás tener funcionando una infraestructura compuesta por varios contenedores:

    ServicioTecnologíaPuerto externo sugeridoFunción
    Web PHPApache + PHP8080Servidor web principal
    MySQLMySQL3306 o solo internoBase de datos relacional
    phpMyAdminphpMyAdmin8081Administración de MySQL
    MongoDBMongoDB27017 o solo internoBase de datos NoSQL
    Mongo ExpressMongo Express8082Administración de MongoDB

    La aplicación PHP deberá mostrar una página web con información del alumno, conexión a MySQL y, opcionalmente, conexión a MongoDB.


    4. Normas de entrega

    El alumno deberá entregar:

    1. Carpeta completa del proyecto.
    2. Archivo docker-compose.yml.
    3. Archivo .env.
    4. Código fuente de la aplicación PHP.
    5. Capturas de pantalla.
    6. Documento de memoria en PDF.
    7. Comandos utilizados.
    8. Respuestas a las preguntas de reflexión.
    9. Evidencias de funcionamiento.
    10. Breve vídeo opcional de demostración.

    5. Estructura recomendada del proyecto

    Crea una carpeta llamada:

    practica-docker-servicios-nombre-apellido

    Dentro de ella deberás crear una estructura similar a esta:

    practica-docker-servicios-nombre-apellido/

    ├── docker-compose.yml
    ├── .env
    ├── README.md

    ├── web/
    │ ├── index.php
    │ ├── conexion_mysql.php
    │ ├── insertar.php
    │ ├── listar.php
    │ └── estilos.css

    ├── mysql/
    │ └── init.sql

    ├── evidencias/
    │ ├── captura_01_docker_version.png
    │ ├── captura_02_contenedores.png
    │ ├── captura_03_web_funcionando.png
    │ ├── captura_04_phpmyadmin.png
    │ ├── captura_05_mongo_express.png
    │ └── captura_06_logs.png

    └── memoria/
    └── memoria_practica.pdf

    6. Fase 1 — Preparación del entorno

    6.1. Comprobar Docker

    Ejecuta los siguientes comandos:

    docker --version
    docker compose version

    Guarda una captura de pantalla donde se vea el resultado.

    Preguntas de reflexión

    Responde en tu memoria:

    1. ¿Qué diferencia hay entre Docker y Docker Compose?
    2. ¿Qué problema soluciona Docker cuando trabajamos con varios servicios?
    3. ¿Por qué puede ser útil usar Docker en un entorno educativo o de laboratorio?

    6.2. Comprobar que Docker funciona

    Ejecuta:

    docker run hello-world

    Evidencia obligatoria

    Incluye una captura del resultado del comando.

    Pregunta de reflexión

    Explica con tus palabras qué ha ocurrido al ejecutar hello-world.

    Debes mencionar:

    • Si Docker ha usado una imagen local o la ha descargado.
    • Qué es un contenedor.
    • Por qué el contenedor termina después de ejecutarse.

    7. Fase 2 — Primer diseño de la infraestructura

    Antes de escribir el docker-compose.yml, realiza un pequeño esquema de la infraestructura.

    Puedes hacerlo con una tabla, un dibujo o un diagrama sencillo.

    Debe aparecer:

    • Servicio web.
    • Base de datos MySQL.
    • phpMyAdmin.
    • MongoDB.
    • Mongo Express.
    • Red interna.
    • Volúmenes de datos.
    • Puertos publicados.

    Ejemplo conceptual:

    Navegador
    |
    | puerto 8080
    v
    Apache + PHP
    |
    | red interna docker
    v
    MySQL

    Navegador
    |
    | puerto 8081
    v
    phpMyAdmin
    |
    v
    MySQL

    Navegador
    |
    | puerto 8082
    v
    Mongo Express
    |
    v
    MongoDB

    Preguntas de reflexión

    1. ¿Por qué no es recomendable instalar todos los servicios dentro del mismo contenedor?
    2. ¿Qué ventajas tiene separar web, base de datos y herramientas de administración?
    3. ¿Qué servicios deberían ser accesibles desde el navegador y cuáles deberían quedar solo dentro de la red Docker?

    8. Fase 3 — Creación del archivo .env

    Crea un archivo llamado .env en la raíz del proyecto.

    Ejemplo:

    MYSQL_ROOT_PASSWORD=rootpassword
    MYSQL_DATABASE=asir_db
    MYSQL_USER=asir_user
    MYSQL_PASSWORD=asir_password

    MONGO_INITDB_ROOT_USERNAME=admin
    MONGO_INITDB_ROOT_PASSWORD=adminpassword
    MONGO_DATABASE=asir_mongo

    WEB_PORT=8080
    PHPMYADMIN_PORT=8081
    MONGO_EXPRESS_PORT=8082

    Importante

    El archivo .env permite separar configuración del archivo docker-compose.yml.

    No deberías escribir directamente las contraseñas dentro del docker-compose.yml si puedes evitarlo.

    Preguntas de reflexión

    1. ¿Qué ventaja tiene usar variables de entorno?
    2. ¿Por qué puede ser peligroso subir un archivo .env real a un repositorio público?
    3. ¿Qué información sensible contiene este archivo?

    9. Fase 4 — Creación del docker-compose.yml

    Crea el archivo docker-compose.yml.

    Propuesta base:

    services:

    web:
    image: php:8.2-apache
    container_name: asir_web_php
    ports:
    - "${WEB_PORT}:80"
    volumes:
    - ./web:/var/www/html
    depends_on:
    - mysql
    - mongodb
    networks:
    - red_asir

    mysql:
    image: mysql:8.0
    container_name: asir_mysql
    restart: always
    environment:
    MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD}
    MYSQL_DATABASE: ${MYSQL_DATABASE}
    MYSQL_USER: ${MYSQL_USER}
    MYSQL_PASSWORD: ${MYSQL_PASSWORD}
    volumes:
    - mysql_data:/var/lib/mysql
    - ./mysql/init.sql:/docker-entrypoint-initdb.d/init.sql
    networks:
    - red_asir

    phpmyadmin:
    image: phpmyadmin:latest
    container_name: asir_phpmyadmin
    restart: always
    ports:
    - "${PHPMYADMIN_PORT}:80"
    environment:
    PMA_HOST: mysql
    PMA_PORT: 3306
    depends_on:
    - mysql
    networks:
    - red_asir

    mongodb:
    image: mongo:latest
    container_name: asir_mongodb
    restart: always
    environment:
    MONGO_INITDB_ROOT_USERNAME: ${MONGO_INITDB_ROOT_USERNAME}
    MONGO_INITDB_ROOT_PASSWORD: ${MONGO_INITDB_ROOT_PASSWORD}
    volumes:
    - mongo_data:/data/db
    networks:
    - red_asir

    mongo-express:
    image: mongo-express:latest
    container_name: asir_mongo_express
    restart: always
    ports:
    - "${MONGO_EXPRESS_PORT}:8081"
    environment:
    ME_CONFIG_MONGODB_ADMINUSERNAME: ${MONGO_INITDB_ROOT_USERNAME}
    ME_CONFIG_MONGODB_ADMINPASSWORD: ${MONGO_INITDB_ROOT_PASSWORD}
    ME_CONFIG_MONGODB_SERVER: mongodb
    depends_on:
    - mongodb
    networks:
    - red_asir

    volumes:
    mysql_data:
    mongo_data:

    networks:
    red_asir:
    driver: bridge

    9.1. Preguntas sobre el docker-compose.yml

    Responde en tu memoria:

    1. ¿Qué significa services?
    2. ¿Qué diferencia hay entre image y container_name?
    3. ¿Para qué sirve ports?
    4. ¿Qué diferencia hay entre el puerto de la izquierda y el de la derecha en esta línea?
    - "8080:80"
    1. ¿Para qué sirve volumes?
    2. ¿Qué pasaría con los datos de MySQL si no usásemos un volumen?
    3. ¿Qué hace depends_on?
    4. ¿Qué limitación tiene depends_on?
    5. ¿Para qué sirve definir una red propia llamada red_asir?
    6. ¿Por qué el servicio web puede conectarse a MySQL usando el nombre mysql?

    10. Fase 5 — Script inicial de MySQL

    Dentro de la carpeta mysql, crea el archivo init.sql.

    Ejemplo:

    CREATE TABLE IF NOT EXISTS alumnos (
    id INT AUTO_INCREMENT PRIMARY KEY,
    nombre VARCHAR(100) NOT NULL,
    apellido VARCHAR(100) NOT NULL,
    curso VARCHAR(100) NOT NULL,
    fecha_registro TIMESTAMP DEFAULT CURRENT_TIMESTAMP
    );

    INSERT INTO alumnos (nombre, apellido, curso)
    VALUES
    ('Alumno', 'Ejemplo', 'ASIR'),
    ('Docker', 'Compose', 'Servicios');

    Este script se ejecutará automáticamente cuando se cree por primera vez el contenedor de MySQL y el volumen esté vacío.

    Preguntas de reflexión

    1. ¿Cuándo se ejecutan los scripts dentro de /docker-entrypoint-initdb.d/?
    2. Si modificas init.sql después de haber creado el volumen, ¿se vuelve a ejecutar automáticamente?
    3. ¿Qué tendrías que hacer para reiniciar completamente la base de datos desde cero?
    4. ¿Por qué hay que tener cuidado al borrar volúmenes?

    11. Fase 6 — Crear la aplicación PHP

    Dentro de la carpeta web, crea el archivo index.php.

    Ejemplo:

    <?php
    $host = 'mysql';
    $db = 'asir_db';
    $user = 'asir_user';
    $password = 'asir_password';

    $conexionCorrecta = false;
    $error = '';

    try {
    $pdo = new PDO("mysql:host=$host;dbname=$db;charset=utf8", $user, $password);
    $conexionCorrecta = true;
    } catch (PDOException $e) {
    $error = $e->getMessage();
    }
    ?>

    <!DOCTYPE html>
    <html lang="es">
    <head>
    <meta charset="UTF-8">
    <title>Práctica Docker ASIR</title>
    <link rel="stylesheet" href="estilos.css">
    </head>
    <body>

    <main>
    <h1>Práctica Docker, Docker Compose y Servicios</h1>

    <section>
    <h2>Datos del alumno</h2>
    <p><strong>Nombre:</strong> Escribe aquí tu nombre</p>
    <p><strong>Curso:</strong> ASIR</p>
    <p><strong>Módulo:</strong> Implantación de aplicaciones / Servicios / Sistemas</p>
    </section>

    <section>
    <h2>Estado de la conexión con MySQL</h2>

    <?php if ($conexionCorrecta): ?>
    <p class="ok">Conexión correcta con MySQL.</p>
    <?php else: ?>
    <p class="error">Error de conexión con MySQL.</p>
    <pre><?php echo $error; ?></pre>
    <?php endif; ?>
    </section>

    <section>
    <h2>Listado de alumnos desde MySQL</h2>

    <?php
    if ($conexionCorrecta) {
    $consulta = $pdo->query("SELECT * FROM alumnos");

    echo "<table>";
    echo "<tr><th>ID</th><th>Nombre</th><th>Apellido</th><th>Curso</th><th>Fecha</th></tr>";

    while ($fila = $consulta->fetch(PDO::FETCH_ASSOC)) {
    echo "<tr>";
    echo "<td>" . htmlspecialchars($fila['id']) . "</td>";
    echo "<td>" . htmlspecialchars($fila['nombre']) . "</td>";
    echo "<td>" . htmlspecialchars($fila['apellido']) . "</td>";
    echo "<td>" . htmlspecialchars($fila['curso']) . "</td>";
    echo "<td>" . htmlspecialchars($fila['fecha_registro']) . "</td>";
    echo "</tr>";
    }

    echo "</table>";
    }
    ?>
    </section>
    </main>

    </body>
    </html>

    11.1. Archivo CSS

    Crea estilos.css:

    body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    }

    main {
    width: 80%;
    margin: 40px auto;
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    }

    h1 {
    color: #333;
    }

    section {
    margin-bottom: 30px;
    }

    .ok {
    color: green;
    font-weight: bold;
    }

    .error {
    color: red;
    font-weight: bold;
    }

    table {
    width: 100%;
    border-collapse: collapse;
    }

    th {
    background-color: #333;
    color: white;
    }

    td, th {
    padding: 10px;
    border: 1px solid #ccc;
    }

    11.2. Problema intencionado

    Con la imagen oficial php:8.2-apache, puede ocurrir que PHP no tenga activada la extensión necesaria para conectarse a MySQL mediante PDO.

    Si al abrir la web aparece un error relacionado con MySQL o PDO, deberás investigarlo y solucionarlo.

    Pista

    Puede ser necesario crear un Dockerfile personalizado para el servicio web.


    12. Fase 7 — Crear una imagen personalizada para PHP

    Crea un archivo llamado Dockerfile dentro de la carpeta web.

    FROM php:8.2-apache

    RUN docker-php-ext-install pdo pdo_mysql mysqli

    Ahora modifica el servicio web en el docker-compose.yml.

    Antes:

    web:
    image: php:8.2-apache

    Después:

    web:
    build: ./web

    El servicio completo quedaría así:

    web:
    build: ./web
    container_name: asir_web_php
    ports:
    - "${WEB_PORT}:80"
    volumes:
    - ./web:/var/www/html
    depends_on:
    - mysql
    - mongodb
    networks:
    - red_asir

    Preguntas de reflexión

    1. ¿Qué diferencia hay entre usar image y usar build?
    2. ¿Para qué sirve un Dockerfile?
    3. ¿Qué hace esta línea?
    RUN docker-php-ext-install pdo pdo_mysql mysqli
    1. ¿Por qué necesitamos instalar extensiones de PHP?
    2. ¿Qué ventaja tiene crear nuestra propia imagen personalizada?

    13. Fase 8 — Levantar los servicios

    Ejecuta:

    docker compose up -d

    Después comprueba:

    docker compose ps

    También puedes usar:

    docker ps

    Evidencias obligatorias

    Incluye capturas donde se vea:

    • Los contenedores levantados.
    • Los puertos publicados.
    • El estado de cada contenedor.

    Preguntas de reflexión

    1. ¿Qué significa ejecutar Docker Compose con -d?
    2. ¿Qué diferencia hay entre docker compose ps y docker ps?
    3. ¿Qué significa que un contenedor esté en estado Up?
    4. ¿Qué harías si un contenedor aparece como Restarting?

    14. Fase 9 — Comprobación de servicios en navegador

    Accede desde el navegador a:

    http://localhost:8080

    Deberías ver la aplicación PHP.

    Accede también a:

    http://localhost:8081

    Deberías ver phpMyAdmin.

    Accede a:

    http://localhost:8082

    Deberías ver Mongo Express.

    Evidencias obligatorias

    Incluye capturas de:

    1. Página PHP funcionando.
    2. phpMyAdmin mostrando la base de datos.
    3. Tabla alumnos dentro de MySQL.
    4. Mongo Express funcionando.

    Preguntas de reflexión

    1. ¿Por qué accedemos a la web usando localhost:8080 y no localhost:80?
    2. ¿Qué usuario y contraseña has utilizado para entrar en phpMyAdmin?
    3. ¿Qué base de datos aparece creada automáticamente?
    4. ¿Qué diferencia hay entre administrar MySQL desde línea de comandos y hacerlo desde phpMyAdmin?
    5. ¿Qué riesgos tendría dejar phpMyAdmin abierto en un servidor real?

    15. Fase 10 — Insertar datos desde PHP

    Crea un archivo llamado insertar.php.

    <?php
    $host = 'mysql';
    $db = 'asir_db';
    $user = 'asir_user';
    $password = 'asir_password';

    try {
    $pdo = new PDO("mysql:host=$host;dbname=$db;charset=utf8", $user, $password);

    $sql = "INSERT INTO alumnos (nombre, apellido, curso) VALUES (:nombre, :apellido, :curso)";
    $stmt = $pdo->prepare($sql);

    $stmt->execute([
    ':nombre' => 'NombreAlumno',
    ':apellido' => 'ApellidoAlumno',
    ':curso' => 'ASIR'
    ]);

    echo "Registro insertado correctamente.";
    } catch (PDOException $e) {
    echo "Error: " . $e->getMessage();
    }

    Accede a:

    http://localhost:8080/insertar.php

    Después vuelve a:

    http://localhost:8080/index.php

    Comprueba que el nuevo registro aparece en la tabla.

    Trabajo obligatorio

    Modifica el archivo para que inserte tus propios datos.

    Preguntas de reflexión

    1. ¿Qué ocurre cada vez que recargas insertar.php?
    2. ¿Por qué puede ser peligroso insertar datos directamente sin un formulario controlado?
    3. ¿Qué diferencia hay entre una consulta normal y una consulta preparada?
    4. ¿Qué problema de seguridad ayudan a evitar las consultas preparadas?

    16. Fase 11 — Crear formulario de inserción

    Crea una página formulario.php.

    <!DOCTYPE html>
    <html lang="es">
    <head>
    <meta charset="UTF-8">
    <title>Formulario de alumnos</title>
    <link rel="stylesheet" href="estilos.css">
    </head>
    <body>

    <main>
    <h1>Insertar alumno</h1>

    <form action="guardar.php" method="post">
    <label>Nombre:</label><br>
    <input type="text" name="nombre" required><br><br>

    <label>Apellido:</label><br>
    <input type="text" name="apellido" required><br><br>

    <label>Curso:</label><br>
    <input type="text" name="curso" required><br><br>

    <button type="submit">Guardar</button>
    </form>
    </main>

    </body>
    </html>

    Crea ahora guardar.php.

    <?php
    $host = 'mysql';
    $db = 'asir_db';
    $user = 'asir_user';
    $password = 'asir_password';

    if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $nombre = $_POST['nombre'] ?? '';
    $apellido = $_POST['apellido'] ?? '';
    $curso = $_POST['curso'] ?? '';

    try {
    $pdo = new PDO("mysql:host=$host;dbname=$db;charset=utf8", $user, $password);

    $sql = "INSERT INTO alumnos (nombre, apellido, curso) VALUES (:nombre, :apellido, :curso)";
    $stmt = $pdo->prepare($sql);

    $stmt->execute([
    ':nombre' => $nombre,
    ':apellido' => $apellido,
    ':curso' => $curso
    ]);

    echo "Alumno guardado correctamente.";
    echo "<br><a href='index.php'>Volver al listado</a>";

    } catch (PDOException $e) {
    echo "Error: " . $e->getMessage();
    }
    }

    Evidencia obligatoria

    Incluye captura del formulario y del registro insertado.

    Preguntas de reflexión

    1. ¿Qué método HTTP utiliza el formulario?
    2. ¿Qué diferencia hay entre GET y POST?
    3. ¿Dónde llegan los datos enviados por el formulario?
    4. ¿Qué validaciones mínimas debería tener este formulario?
    5. ¿Por qué no deberíamos confiar nunca únicamente en la validación del navegador?

    17. Fase 12 — Trabajo con MongoDB

    MongoDB es una base de datos NoSQL. En lugar de trabajar con tablas y filas, trabaja con bases de datos, colecciones y documentos.

    Accede a Mongo Express:

    http://localhost:8082

    Crea una base de datos llamada:

    asir_mongo

    Crea una colección llamada:

    inventario

    Inserta al menos tres documentos similares a estos:

    {
    "nombre": "Servidor web",
    "tipo": "contenedor",
    "servicio": "Apache PHP",
    "puerto": 8080
    }
    {
    "nombre": "Base de datos relacional",
    "tipo": "contenedor",
    "servicio": "MySQL",
    "puerto": 3306
    }
    {
    "nombre": "Base de datos NoSQL",
    "tipo": "contenedor",
    "servicio": "MongoDB",
    "puerto": 27017
    }

    Evidencias obligatorias

    Incluye capturas de:

    • Base de datos creada.
    • Colección creada.
    • Documentos insertados.

    Preguntas de reflexión

    1. ¿Qué diferencia hay entre una tabla de MySQL y una colección de MongoDB?
    2. ¿Qué diferencia hay entre una fila y un documento?
    3. ¿Qué ventajas puede tener MongoDB frente a MySQL?
    4. ¿Qué ventajas puede tener MySQL frente a MongoDB?
    5. ¿En qué tipo de proyecto usarías cada uno?

    18. Fase 13 — Comandos de administración

    Ejecuta y documenta los siguientes comandos.

    Ver contenedores activos

    docker ps

    Ver todos los contenedores

    docker ps -a

    Ver imágenes

    docker images

    Ver redes

    docker network ls

    Ver volúmenes

    docker volume ls

    Ver logs del servicio web

    docker compose logs web

    Ver logs de MySQL

    docker compose logs mysql

    Entrar dentro del contenedor web

    docker exec -it asir_web_php bash

    Dentro del contenedor, ejecuta:

    ls -la /var/www/html

    Después sal:

    exit

    Evidencias obligatorias

    Incluye capturas de al menos cinco comandos anteriores.

    Preguntas de reflexión

    1. ¿Para qué sirve docker ps?
    2. ¿Qué información muestra docker images?
    3. ¿Qué diferencia hay entre una imagen y un contenedor?
    4. ¿Qué utilidad tienen los logs?
    5. ¿Para qué puede servir entrar dentro de un contenedor?
    6. ¿Por qué no deberíamos modificar manualmente demasiadas cosas dentro de un contenedor en producción?

    19. Fase 14 — Persistencia de datos

    Vas a comprobar que los datos sobreviven aunque los contenedores se detengan.

    Ejecuta:

    docker compose down

    Después vuelve a levantar:

    docker compose up -d

    Comprueba:

    • Que la web sigue funcionando.
    • Que los datos de MySQL siguen estando.
    • Que los documentos de MongoDB siguen estando.

    Ahora ejecuta:

    docker compose down -v

    Vuelve a levantar:

    docker compose up -d

    Comprueba qué ha ocurrido con los datos.

    Mucho cuidado

    El parámetro -v elimina los volúmenes asociados al proyecto.

    Preguntas de reflexión

    1. ¿Qué diferencia hay entre docker compose down y docker compose down -v?
    2. ¿Por qué se han conservado los datos en el primer caso?
    3. ¿Por qué se han perdido los datos en el segundo caso?
    4. ¿Qué papel tienen los volúmenes en Docker?
    5. ¿Por qué la persistencia es fundamental en bases de datos?

    20. Fase 15 — Copia de seguridad de MySQL

    Realiza una copia de seguridad de la base de datos MySQL.

    Ejemplo:

    docker exec asir_mysql mysqldump -u root -p asir_db > backup_asir_db.sql

    El sistema pedirá la contraseña de root.

    Después comprueba que se ha creado el archivo:

    ls -lh backup_asir_db.sql

    Evidencia obligatoria

    Incluye captura del archivo generado.

    Preguntas de reflexión

    1. ¿Qué es mysqldump?
    2. ¿Por qué es importante hacer copias de seguridad?
    3. ¿Dónde se ha guardado el archivo SQL?
    4. ¿Qué información contiene ese archivo?
    5. ¿Sería suficiente esta copia de seguridad en un entorno real? Justifica la respuesta.

    21. Fase 16 — Restauración básica de MySQL

    Para comprobar la restauración, puedes crear una nueva base de datos desde phpMyAdmin o desde consola e importar el archivo.

    Ejemplo orientativo:

    docker exec -i asir_mysql mysql -u root -p asir_db < backup_asir_db.sql

    Preguntas de reflexión

    1. ¿Qué diferencia hay entre exportar e importar una base de datos?
    2. ¿Qué riesgos existen al restaurar una copia sobre una base de datos que ya contiene información?
    3. ¿Qué medidas tomarías antes de restaurar una copia en producción?

    22. Fase 17 — Comprobación de red entre contenedores

    Entra en el contenedor web:

    docker exec -it asir_web_php bash

    Instala herramientas de red si fuera necesario:

    apt update
    apt install -y iputils-ping

    Prueba conectividad:

    ping mysql
    ping mongodb

    Sal del contenedor:

    exit

    Preguntas de reflexión

    1. ¿Por qué podemos hacer ping mysql y no necesitamos conocer la IP del contenedor?
    2. ¿Qué papel hace el DNS interno de Docker?
    3. ¿Cambiaría la IP del contenedor si lo eliminamos y lo volvemos a crear?
    4. ¿Por qué es mejor usar nombres de servicio que direcciones IP?

    23. Fase 18 — Seguridad básica

    Analiza la configuración actual.

    Responde:

    1. ¿Qué puertos están expuestos al equipo anfitrión?
    2. ¿Qué servicios son accesibles desde el navegador?
    3. ¿Tiene sentido exponer MySQL directamente al exterior?
    4. ¿Tiene sentido exponer MongoDB directamente al exterior?
    5. ¿Qué contraseñas son débiles?
    6. ¿Qué cambiarías si esto fuese un servidor real?
    7. ¿Qué riesgos tiene usar root para administrar la base de datos?
    8. ¿Qué riesgos tiene dejar herramientas como phpMyAdmin o Mongo Express accesibles públicamente?

    Mejora obligatoria

    Modifica el docker-compose.yml para que MySQL y MongoDB no publiquen puertos hacia el exterior.

    Es decir, evita configuraciones como:

    ports:
    - "3306:3306"

    o:

    ports:
    - "27017:27017"

    Los servicios internos deben comunicarse por la red Docker, no necesariamente por puertos públicos.

    Pregunta de reflexión

    Si MySQL no tiene puerto publicado, ¿por qué phpMyAdmin puede seguir conectando con él?


    24. Fase 19 — Personalización del proyecto

    El alumno deberá personalizar la práctica.

    Como mínimo deberá:

    1. Cambiar el nombre de los contenedores.
    2. Cambiar el nombre de la base de datos.
    3. Cambiar usuario y contraseña.
    4. Personalizar la página principal.
    5. Insertar datos propios.
    6. Añadir una nueva tabla en MySQL.
    7. Añadir una nueva colección en MongoDB.
    8. Documentar los cambios realizados.

    Nueva tabla obligatoria

    Crea una tabla llamada servicios.

    Ejemplo:

    CREATE TABLE IF NOT EXISTS servicios (
    id INT AUTO_INCREMENT PRIMARY KEY,
    nombre VARCHAR(100) NOT NULL,
    imagen VARCHAR(100) NOT NULL,
    puerto VARCHAR(20),
    descripcion TEXT
    );

    Inserta al menos cinco servicios:

    • Apache/PHP.
    • MySQL.
    • phpMyAdmin.
    • MongoDB.
    • Mongo Express.

    Preguntas de reflexión

    1. ¿Qué campos has elegido para la tabla servicios?
    2. ¿Por qué has elegido esos campos?
    3. ¿Qué relación existe entre esta tabla y la infraestructura desplegada?
    4. ¿Cómo podrías mostrar esta tabla desde PHP?

    25. Fase 20 — Ampliación opcional

    Para subir nota, puedes realizar una o varias de estas mejoras.

    Opción A — Añadir Nginx como proxy inverso

    Añade un contenedor Nginx que actúe como punto de entrada.

    Debe permitir acceder a la aplicación PHP desde otro puerto o ruta.

    Opción B — Añadir Adminer

    Añade Adminer como alternativa a phpMyAdmin.

    Opción C — Añadir Redis

    Añade Redis como servicio adicional y explica para qué se utiliza.

    Opción D — Crear una aplicación PHP más completa

    La aplicación deberá permitir:

    • Insertar alumnos.
    • Listar alumnos.
    • Borrar alumnos.
    • Editar alumnos.

    Opción E — Crear documentación técnica avanzada

    Incluye:

    • Diagrama de red.
    • Tabla de servicios.
    • Tabla de puertos.
    • Tabla de volúmenes.
    • Tabla de variables de entorno.
    • Problemas encontrados.
    • Soluciones aplicadas.

    26. Documento de memoria

    El documento final debe tener la siguiente estructura:

    Portada

    Debe incluir:

    • Nombre del alumno.
    • Curso.
    • Módulo o asignatura.
    • Nombre de la práctica.
    • Fecha.
    • Profesor.

    Índice

    Debe estar generado o escrito de forma ordenada.

    1. Introducción

    Explica brevemente qué se ha hecho en la práctica.

    2. Objetivos

    Enumera los objetivos técnicos.

    3. Herramientas utilizadas

    Incluye:

    • Sistema operativo.
    • Docker.
    • Docker Compose.
    • Editor de código.
    • Navegador.
    • Terminal.
    • Otros programas usados.

    4. Estructura del proyecto

    Incluye la estructura de carpetas y explica para qué sirve cada una.

    5. Explicación del docker-compose.yml

    No basta con pegar el archivo.

    Hay que explicar:

    • Servicios.
    • Imágenes.
    • Puertos.
    • Volúmenes.
    • Redes.
    • Variables de entorno.
    • Dependencias.

    6. Desarrollo de la aplicación PHP

    Explica:

    • Qué archivos has creado.
    • Cómo se conecta PHP con MySQL.
    • Cómo se insertan datos.
    • Cómo se muestran datos.

    7. Trabajo con MySQL

    Explica:

    • Base de datos creada.
    • Tablas.
    • Registros.
    • Acceso desde phpMyAdmin.
    • Copia de seguridad.

    8. Trabajo con MongoDB

    Explica:

    • Base de datos creada.
    • Colecciones.
    • Documentos.
    • Acceso desde Mongo Express.

    9. Evidencias de funcionamiento

    Incluye capturas claras y comentadas.

    Cada captura debe tener una breve explicación.

    10. Problemas encontrados

    Incluye al menos tres problemas, aunque sean pequeños.

    Ejemplos:

    • Error de puerto ocupado.
    • Error de conexión a MySQL.
    • Contenedor reiniciándose.
    • Variable mal escrita.
    • Volumen que no se reiniciaba.
    • Falta de extensión PHP.

    Para cada problema indica:

    • Qué ocurrió.
    • Cómo lo detectaste.
    • Qué comando usaste.
    • Cómo lo solucionaste.

    11. Preguntas de reflexión

    Incluye todas las preguntas respondidas.

    12. Conclusión

    Explica qué has aprendido y qué mejorarías.


    27. Defensa oral o presencial

    Después de entregar la práctica, el alumno deberá defenderla.

    La defensa puede ser online o presencial.

    El alumno deberá ser capaz de:

    1. Explicar la estructura del proyecto.
    2. Abrir el docker-compose.yml y explicar cada servicio.
    3. Levantar y detener los contenedores.
    4. Mostrar la aplicación funcionando.
    5. Enseñar phpMyAdmin y Mongo Express.
    6. Explicar qué son los volúmenes.
    7. Explicar qué son las redes.
    8. Mostrar los logs de un contenedor.
    9. Explicar cómo hizo la copia de seguridad.
    10. Justificar los problemas encontrados y las soluciones aplicadas.

    28. Preguntas posibles para la defensa

    Estas preguntas se pueden usar para comprobar la autoría real del trabajo.

    Docker básico

    1. ¿Qué es una imagen Docker?
    2. ¿Qué es un contenedor?
    3. ¿Qué diferencia hay entre imagen y contenedor?
    4. ¿Qué comando usas para ver contenedores activos?
    5. ¿Qué comando usas para ver imágenes descargadas?
    6. ¿Qué ocurre si borras un contenedor?
    7. ¿Qué ocurre si borras una imagen?

    Docker Compose

    1. ¿Para qué sirve Docker Compose?
    2. ¿Qué archivo utiliza Docker Compose por defecto?
    3. ¿Qué hace docker compose up -d?
    4. ¿Qué hace docker compose down?
    5. ¿Qué hace docker compose down -v?
    6. ¿Qué diferencia hay entre image y build?
    7. ¿Para qué sirve depends_on?

    Redes

    1. ¿Qué red has creado?
    2. ¿Por qué los contenedores pueden comunicarse usando nombres?
    3. ¿Qué diferencia hay entre una red interna Docker y la red de tu ordenador?
    4. ¿Por qué no es recomendable publicar todos los puertos?

    Volúmenes

    1. ¿Qué volúmenes has creado?
    2. ¿Para qué sirve un volumen?
    3. ¿Dónde guarda MySQL sus datos dentro del contenedor?
    4. ¿Qué pasa si eliminas los volúmenes?
    5. ¿Cómo comprobarías que los datos persisten?

    MySQL y PHP

    1. ¿Cómo se conecta PHP a MySQL?
    2. ¿Qué host usa PHP para conectarse a MySQL?
    3. ¿Por qué el host es mysql y no localhost?
    4. ¿Qué tabla has creado?
    5. ¿Qué consulta SQL has usado?
    6. ¿Qué es una consulta preparada?
    7. ¿Qué error te apareció con PHP y MySQL?

    MongoDB

    1. ¿Qué diferencia hay entre MySQL y MongoDB?
    2. ¿Qué es una colección?
    3. ¿Qué es un documento?
    4. ¿Qué herramienta has usado para administrar MongoDB?
    5. ¿Qué documentos has insertado?

    Seguridad

    1. ¿Qué contraseñas has utilizado?
    2. ¿Son contraseñas seguras?
    3. ¿Qué cambiarías en producción?
    4. ¿Expondrías phpMyAdmin a Internet?
    5. ¿Expondrías MongoDB a Internet?

    Autoría

    1. Enséñame el archivo que más te costó configurar.
    2. Explícame un error concreto que hayas tenido.
    3. Cambia ahora el puerto de la web al 8090.
    4. Añade un nuevo registro a la base de datos.
    5. Para los contenedores y vuelve a levantarlos.
    6. Muéstrame los logs de MySQL.
    7. Entra dentro del contenedor web.
    8. Explica por qué tu aplicación sigue funcionando después de reiniciar los contenedores.
    9. Borra un contenedor y vuelve a crearlo.
    10. Explica qué parte del trabajo has entendido mejor y cuál peor.

    29. Rúbrica de evaluación

    CriterioPeso
    Estructura correcta del proyecto10%
    docker-compose.yml funcional y bien organizado15%
    Uso correcto de redes y volúmenes10%
    Despliegue funcional de Apache/PHP/MySQL/phpMyAdmin15%
    Despliegue funcional de MongoDB/Mongo Express10%
    Aplicación PHP conectada a MySQL10%
    Evidencias y capturas claras10%
    Respuestas de reflexión10%
    Seguridad básica y justificación técnica5%
    Defensa oral/presencial15%

    Total: 100%


    30. Penalizaciones

    Se podrán aplicar penalizaciones por:

    MotivoPenalización
    No entrega de memoriaSuspenso
    No funciona Docker ComposeHasta -40%
    No hay evidencias suficientesHasta -20%
    No responde preguntas de reflexiónHasta -20%
    No sabe defender el trabajoHasta -50%
    Copia evidente sin comprensiónSuspenso
    Archivos desordenados o incompletosHasta -15%
    Contraseñas o datos sensibles expuestos sin explicaciónHasta -10%

    31. Entrega mínima para aprobar

    Para aprobar la práctica es obligatorio:

    1. Entregar el proyecto completo.
    2. Levantar los servicios con Docker Compose.
    3. Mostrar la web PHP funcionando.
    4. Mostrar MySQL funcionando.
    5. Mostrar phpMyAdmin funcionando.
    6. Mostrar MongoDB o Mongo Express funcionando.
    7. Usar al menos un volumen persistente.
    8. Responder las preguntas principales.
    9. Defender el trabajo oralmente.

    32. Entrega excelente

    Una entrega excelente incluirá:

    1. Proyecto ordenado.
    2. docker-compose.yml limpio y comentado.
    3. Uso correcto de .env.
    4. Aplicación PHP personalizada.
    5. Inserción y listado de datos.
    6. MySQL y MongoDB correctamente documentados.
    7. Capturas claras.
    8. Explicaciones propias.
    9. Problemas reales documentados.
    10. Defensa fluida y técnica.
    11. Mejoras opcionales implementadas.
    12. Buena presentación del PDF.

    33. Conclusión para el alumno

    Esta práctica no consiste únicamente en ejecutar comandos. El objetivo es que comprendas cómo se despliega una pequeña infraestructura de servicios usando contenedores.

    Docker permite crear entornos reproducibles, rápidos de montar y fáciles de compartir. Docker Compose permite definir varios servicios en un único archivo y levantar toda la infraestructura con un solo comando.

    Si has completado la práctica correctamente, habrás trabajado conceptos fundamentales para la administración de sistemas y el despliegue de aplicaciones modernas:

    • Servicios.
    • Contenedores.
    • Redes.
    • Puertos.
    • Volúmenes.
    • Bases de datos.
    • Aplicaciones web.
    • Seguridad básica.
    • Documentación técnica.
    • Resolución de problemas.

    Esta práctica está bastante bien como práctica troncal de evaluación. Mi recomendación sería que no la valores solo por “si funciona”, sino por tres cosas: funcionamiento, memoria técnica y defensa. Ahí es donde realmente puedes detectar si el alumno lo ha hecho, lo ha entendido o simplemente lo ha copiado.

  • 1.1 – Desarrollo Web con PHP: de cero a aplicaciones avanzadas con MySQL, JavaScript, APIs y Laravel 🎧

    1.1 – Desarrollo Web con PHP: de cero a aplicaciones avanzadas con MySQL, JavaScript, APIs y Laravel 🎧

    🎧 Audio de la lección

    En el siguiente audio generado por IA podrás escuchar un texto de introducción al curso y resumen del contexto por el que vamos a empezar nuestro curso.

    El desarrollo de aplicaciones web es una de las áreas más importantes dentro del mundo de la programación. Gran parte de los servicios que utilizamos a diario, como tiendas online, plataformas educativas, paneles de administración, sistemas de reservas, redes sociales o aplicaciones internas de empresa, funcionan sobre tecnologías web conectadas a bases de datos y servidores.

    Este módilo está diseñado para aprender a crear aplicaciones web con PHP desde cero, empezando por los fundamentos del lenguaje y avanzando progresivamente hacia el desarrollo de proyectos completos, organizados, seguros y preparados para un entorno profesional.

    A lo largo del viaje, el alumno aprenderá no solo a escribir código PHP, sino también a comprender cómo funciona una aplicación web real: cómo se reciben datos desde formularios, cómo se validan, cómo se almacenan en una base de datos, cómo se organiza el código mediante programación orientada a objetos, cómo se estructura una aplicación usando patrones como MVC y cómo se añaden funcionalidades modernas mediante JavaScript, AJAX, APIs y frameworks como Laravel.

    El objetivo principal es que el alumno pase de crear pequeños scripts a desarrollar aplicaciones completas, con usuarios, sesiones, permisos, paneles de administración, conexión a bases de datos, seguridad, despliegue en servidor y buenas prácticas de mantenimiento.

    El temario tendrá un enfoque eminentemente práctico. Cada bloque estará orientado a construir conocimiento paso a paso, combinando teoría, ejemplos guiados y proyectos reales. La idea no es memorizar instrucciones, sino entender cómo se diseña, se programa y se despliega una aplicación web desde el inicio hasta su puesta en producción.

    Al finalizar el módulo, el alumno tendrá una visión completa del desarrollo web con PHP y será capaz de crear sus propias aplicaciones, mantener proyectos existentes y continuar aprendiendo tecnologías más avanzadas dentro del ecosistema PHP moderno.

    Programa del módulo

    Bloque 1 — Fundamentos de programación y entorno

    1. Introducción al desarrollo web con PHP
    2. Instalación del entorno de trabajo
    3. Servidores web: Apache, Nginx y PHP integrado
    4. Primeros scripts en PHP
    5. Sintaxis básica de PHP
    6. Variables, tipos de datos y operadores
    7. Estructuras de control
    8. Bucles y control de flujo
    9. Funciones en PHP
    10. Organización básica de archivos en un proyecto PHP

    Bloque 2 — PHP aplicado a la web

    1. Funcionamiento de HTTP
    2. Formularios HTML y procesamiento con PHP
    3. Métodos GET y POST
    4. Validación de datos del usuario
    5. Sanitización y filtrado de entradas
    6. Manejo de errores y mensajes al usuario
    7. Redirecciones y cabeceras HTTP
    8. Inclusión de archivos y plantillas básicas
    9. Gestión de rutas simples
    10. Buenas prácticas iniciales en aplicaciones PHP

    Bloque 3 — Programación orientada a objetos en PHP

    1. Introducción a la programación orientada a objetos
    2. Clases y objetos
    3. Propiedades y métodos
    4. Constructores y destructores
    5. Encapsulación
    6. Modificadores de acceso
    7. Métodos estáticos
    8. Constantes de clase
    9. Herencia
    10. Sobrescritura de métodos
    11. Interfaces
    12. Clases abstractas
    13. Polimorfismo
    14. Traits
    15. Namespaces
    16. Autoloading de clases
    17. Organización de clases en un proyecto
    18. Buenas prácticas de POO en PHP

    Bloque 4 — Bases de datos con MySQL/MariaDB

    1. Introducción a bases de datos relacionales
    2. Diseño básico de bases de datos
    3. Entidades, atributos y relaciones
    4. Claves primarias y claves foráneas
    5. Normalización básica
    6. SQL esencial para aplicaciones web
    7. Consultas SELECT
    8. Inserción de datos
    9. Actualización de registros
    10. Eliminación de registros
    11. Conexión de PHP con MySQL
    12. MySQLi frente a PDO
    13. Consultas preparadas
    14. Control de errores en operaciones de base de datos

    Bloque 5 — JavaScript, AJAX y PHP

    1. Introducción a JavaScript para aplicaciones PHP
    2. Manipulación básica del DOM
    3. Eventos en JavaScript
    4. Validación básica de formularios en cliente
    5. Fetch API
    6. Envío de datos asíncronos
    7. Respuestas JSON desde PHP
    8. Formularios sin recargar la página
    9. Buscadores dinámicos
    10. Validación combinada cliente-servidor
    11. Tablas dinámicas
    12. Gestión de errores en AJAX
    13. Integración PHP, JavaScript y base de datos

    Bloque 6 — Proyecto CRUD básico

    1. Estructura de un CRUD en PHP
    2. Listado de registros
    3. Creación de registros
    4. Edición de registros
    5. Eliminación de registros
    6. Validaciones en un CRUD
    7. Mensajes de confirmación y error
    8. Paginación de resultados
    9. Búsqueda y filtrado
    10. Organización del código del CRUD con clases
    11. Mejora del CRUD con JavaScript y Fetch

    Bloque 7 — Arquitectura de aplicaciones PHP

    1. Separación de responsabilidades
    2. Patrón MVC
    3. Controladores
    4. Modelos
    5. Vistas
    6. Sistema básico de rutas
    7. Controlador frontal
    8. Plantillas reutilizables
    9. Configuración centralizada
    10. Organización profesional de carpetas

    Bloque 8 — Sesiones, usuarios y autenticación

    1. Cookies en PHP
    2. Sesiones en PHP
    3. Registro de usuarios
    4. Inicio de sesión
    5. Cierre de sesión
    6. Protección de páginas privadas
    7. Roles y permisos
    8. Hash seguro de contraseñas
    9. Recordar usuario de forma segura
    10. Recuperación de contraseña

    Bloque 9 — Seguridad en aplicaciones PHP

    1. Principales riesgos de seguridad web
    2. Inyección SQL
    3. Cross-Site Scripting
    4. Cross-Site Request Forgery
    5. Gestión segura de sesiones
    6. Validación avanzada de entradas
    7. Subida segura de archivos
    8. Control de acceso
    9. Protección de credenciales y configuración
    10. Buenas prácticas OWASP aplicadas a PHP

    Bloque 10 — Trabajo con archivos y recursos externos

    1. Subida de archivos
    2. Gestión de imágenes
    3. Lectura y escritura de archivos
    4. Exportación de datos a CSV
    5. Importación de datos desde CSV
    6. Generación de documentos PDF
    7. Envío de correos desde PHP
    8. Consumo de APIs externas
    9. Procesamiento de JSON
    10. Integración con servicios de terceros

    Bloque 11 — Composer y ecosistema PHP moderno

    1. Introducción a Composer
    2. Gestión de dependencias
    3. Autoload con Composer
    4. Uso de librerías externas
    5. Variables de entorno
    6. Estructura moderna de proyectos PHP
    7. Estándares PSR
    8. Herramientas de calidad de código
    9. Logging en aplicaciones PHP
    10. Configuración por entornos

    Bloque 12 — APIs REST con PHP

    1. Introducción a las APIs REST
    2. Diseño de endpoints
    3. Métodos HTTP en APIs
    4. Respuestas JSON estructuradas
    5. Códigos de estado HTTP
    6. Autenticación en APIs
    7. Tokens y JWT
    8. Validación de peticiones API
    9. Documentación de APIs
    10. Consumo de la API desde frontend

    Bloque 13 — Frameworks PHP

    1. Introducción a los frameworks PHP
    2. Instalación de Laravel
    3. Estructura de un proyecto Laravel
    4. Rutas en Laravel
    5. Controladores en Laravel
    6. Vistas con Blade
    7. Modelos y Eloquent ORM
    8. Migraciones y seeders
    9. Validaciones en Laravel
    10. Middleware y autenticación

    Bloque 14 — Laravel avanzado

    1. Relaciones entre modelos
    2. Formularios avanzados
    3. Subida de archivos en Laravel
    4. Autorización con policies y gates
    5. Jobs y colas
    6. Eventos y listeners
    7. Notificaciones
    8. APIs REST con Laravel
    9. Testing en Laravel
    10. Optimización de aplicaciones Laravel

    Bloque 15 — Testing, calidad y mantenimiento

    1. Introducción al testing
    2. Tests unitarios
    3. Tests de integración
    4. PHPUnit
    5. Pruebas de controladores
    6. Pruebas de base de datos
    7. Análisis estático de código
    8. Refactorización
    9. Documentación técnica
    10. Mantenimiento de aplicaciones PHP

    Bloque 16 — Despliegue y administración

    1. Preparación de una aplicación para producción
    2. Configuración de Apache/Nginx
    3. Despliegue en servidor Linux
    4. Permisos y estructura en producción
    5. Gestión de variables de entorno
    6. Certificados HTTPS
    7. Copias de seguridad
    8. Monitorización básica
    9. Logs y diagnóstico de errores
    10. Actualización segura de aplicaciones

    Bloque 17 — Docker, CI/CD y entorno profesional

    1. Introducción a Docker para PHP
    2. Contenedores para Apache/PHP
    3. Contenedores para MySQL/MariaDB
    4. Docker Compose para proyectos PHP
    5. Entornos de desarrollo reproducibles
    6. Git y flujo de trabajo profesional
    7. GitHub/GitLab para proyectos PHP
    8. Integración continua
    9. Despliegue continuo
    10. Automatización de pruebas y análisis

    Bloque 18 — Proyecto final de máster

    1. Análisis de requisitos
    2. Diseño de base de datos
    3. Diseño de arquitectura
    4. Desarrollo del backend
    5. Desarrollo del frontend
    6. Sistema de usuarios y permisos
    7. Panel de administración
    8. API REST del proyecto
    9. Seguridad y pruebas
    10. Despliegue final y documentación del proyecto