En esta actividad vamos a implantar Loot Figures, una tienda web de figuras de plástico inspiradas en personajes de videojuegos.
La aplicación ya está desarrollada. Nuestro trabajo consistirá en examinar sus archivos, preparar los entornos necesarios, configurar la base de datos y conseguir que funcione en dos instalaciones diferentes:
En nuestro ordenador, utilizando XAMPP.
En la máquina virtual Ubuntu Server que hemos preparado en clase.
Además de conseguir que la tienda se abra en el navegador, tendremos que comprobar sus funciones y documentar el procedimiento.
Implantar una aplicación no consiste únicamente en copiar archivos. También debemos identificar sus requisitos, configurar los servicios, preparar la base de datos, ajustar permisos y comprobar que todo funciona correctamente.
Las instrucciones siguientes utilizan una instalación de Windows situada en:
C:\xampp
Si tu instalación está en otra ubicación, adapta las rutas.
Abre el panel de control de XAMPP e inicia:
Apache.
MySQL.
Aunque el panel muestre el nombre MySQL, XAMPP puede incluir MariaDB como motor de base de datos.
Comprueba estas direcciones:
http://localhost
http://localhost/phpmyadmin
phpMyAdmin nos permitirá gestionar la base de datos de esta instalación. En la configuración básica de XAMPP se accede a él desde el propio equipo. apachefriends.org
Evidencia: captura del panel con Apache y MySQL iniciados.
10. Colocar el proyecto
Crea esta carpeta:
C:\proyectos
Coloca dentro el proyecto descomprimido:
C:\proyectos\loot-figures-clase
Comprueba que existe:
C:\proyectos\loot-figures-clase\public\index.php
La carpeta del proyecto estará fuera de htdocs. Configuraremos Apache para que publique únicamente su carpeta public.
Después, abre esta ubicación definitiva en VS Code o PhpStorm.
11. Configurar Apache para la tienda
11.1. Revisar la carga de VirtualHosts
Abre este archivo:
C:\xampp\apache\conf\httpd.conf
Busca la línea:
Include conf/extra/httpd-vhosts.conf
Si aparece comentada con #, elimina ese carácter.
Guarda el archivo.
11.2. Añadir la configuración
Abre:
C:\xampp\apache\conf\extra\httpd-vhosts.conf
Añade al final:
Listen 8080
<VirtualHost *:8080>
ServerName localhost
DocumentRoot "C:/proyectos/loot-figures-clase/public"
<Directory "C:/proyectos/loot-figures-clase/public">
Options -Indexes
AllowOverride All
Require local
</Directory>
</VirtualHost>
Importante: si ya existe una instrucción Listen 8080 en la configuración de Apache, no la añadas otra vez.
En la configuración de Apache hemos escrito las rutas con /.
¿Qué significa esta configuración?
Instrucción
Función
Listen 8080
Apache escucha también en el puerto 8080
VirtualHost *:8080
Define el sitio que responderá en ese puerto
DocumentRoot
Indica la carpeta pública de la aplicación
AllowOverride All
Permite aplicar las instrucciones de .htaccess
Require local
Permite el acceso desde el propio ordenador
Detén y vuelve a iniciar Apache desde XAMPP.
Si no arranca, revisa los mensajes y registros del servicio antes de continuar.
12. Crear la base de datos
Abre:
http://localhost/phpmyadmin
Selecciona la pestaña SQL y ejecuta:
CREATE DATABASE loot_figures
CHARACTER SET utf8mb4
COLLATE utf8mb4_unicode_ci;
CREATE USER 'loot_app'@'localhost'
IDENTIFIED BY 'CambiaEstaClaveBD!';
GRANT SELECT, INSERT, UPDATE, DELETE
ON loot_figures.*
TO 'loot_app'@'localhost';
Hemos creado:
La base de datos loot_figures.
El usuario loot_app.
Los permisos necesarios para las operaciones de la tienda.
La aplicación utilizará este usuario, no la cuenta root.
Si la base o el usuario ya existen por un intento anterior, revisa lo que has creado antes de repetir las instrucciones. No elimines bases de datos para resolver un error sin comprobar su contenido.
Apache atenderá las peticiones web; PHP ejecutará el código del servidor; MySQL almacenará los datos. La documentación de Ubuntu recoge la instalación de Apache y de PHP con su módulo para Apache. Ubuntu Server documentation
Si algunos paquetes ya estaban instalados, revisa el resultado del comando: no es necesario reinstalarlos manualmente.
Activa los servicios:
sudo systemctl enable --now apache2
sudo systemctl enable --now mysql
Comprueba su estado:
systemctl status apache2 --no-pager
systemctl status mysql --no-pager
Ambos deben aparecer activos.
Evidencia: captura de los servicios funcionando.
22. Comprobar la versión y las extensiones de PHP
Ejecuta:
php -v
Después:
php -m
Comprueba que aparecen:
mysqli
mysqlnd
fileinfo
session
Anota la versión de PHP de Ubuntu y compárala con la de XAMPP.
23. Transferir el proyecto al servidor
Para esta instalación, utiliza el ZIP original entregado por el profesor. Crearemos una base de datos nueva en Ubuntu.
Puedes transferir el archivo mediante SFTP o con scp.
Ejemplo, ejecutado desde tu ordenador y desde la carpeta donde está el ZIP:
<VirtualHost *:8080>
DocumentRoot /var/www/loot-figures-clase/public
<Directory /var/www/loot-figures-clase/public>
Options -Indexes
AllowOverride All
Require all granted
</Directory>
ErrorLog ${APACHE_LOG_DIR}/loot-figures-error.log
CustomLog ${APACHE_LOG_DIR}/loot-figures-access.log combined
</VirtualHost>
Guarda el archivo.
Activa el sitio:
sudo a2ensite loot-figures.conf
Comprueba la sintaxis:
sudo apache2ctl configtest
Si aparece:
Syntax OK
reinicia Apache:
sudo systemctl restart apache2
No desactives los sitios anteriores de clase: esta tienda utiliza otro puerto.
25. Crear la base de datos en Ubuntu
Accede a MySQL:
sudo mysql
La instalación de MySQL mediante los paquetes de Ubuntu permite administrar el servicio y crear cuentas para las aplicaciones. Ubuntu Server documentation
Ejecuta:
CREATE DATABASE loot_figures
CHARACTER SET utf8mb4
COLLATE utf8mb4_unicode_ci;
CREATE USER 'loot_app'@'localhost'
IDENTIFIED BY 'CambiaEstaClaveBD!';
GRANT SELECT, INSERT, UPDATE, DELETE
ON loot_figures.*
TO 'loot_app'@'localhost';
Sal:
EXIT;
Importa las tablas:
sudo mysql loot_figures < /var/www/loot-figures-clase/database/schema.sql
Importante: escribir localhost en el navegador de tu ordenador apunta a tu ordenador. No apunta a Ubuntu, salvo que hayas configurado una redirección de puertos.
30. Repetir las pruebas funcionales
Realiza en Ubuntu las mismas pruebas que hiciste en XAMPP:
Navegación pública.
Catálogo y filtros.
Registro.
Login y cierre de sesión.
Edición del perfil.
Carrito y pedido.
Historial.
Administración de productos.
Administración de clientes.
Cambio de contraseña.
Subida de una imagen.
Envío y consulta de un mensaje.
Comprueba especialmente la subida de imágenes: permite verificar que los permisos de uploads están preparados correctamente.
31. Comprobar qué está publicando Apache
Intenta abrir:
http://IP_DEL_SERVIDOR:8080/config/config.php
http://IP_DEL_SERVIDOR:8080/database/schema.sql
http://IP_DEL_SERVIDOR:8080/scripts/seed.php
Estas direcciones no deben permitir acceder a esos archivos, porque están fuera de la carpeta pública.
Explica por qué unas rutas son accesibles y otras no.
Bloque D. Comparación, documentación y entrega
32. Comparar las dos instalaciones
Completa esta tabla con los datos reales de tu trabajo:
Aspecto
XAMPP
Ubuntu Server
Sistema operativo
Versión de PHP
Motor y versión de base de datos
Ubicación del proyecto
Carpeta pública
Archivo de configuración del sitio Apache
Dirección de acceso
Puerto web
Usuario de la base de datos
Gestión de permisos de uploads
Ubicación de los registros de errores
Responde también:
¿Qué pasos son iguales en los dos entornos?
¿Qué pasos cambian?
¿Qué tareas facilita XAMPP?
¿Qué servicios has tenido que preparar en Ubuntu?
¿Por qué el editor no sustituye al servidor web?
¿Dónde se ejecuta PHP?
¿Dónde se ejecuta JavaScript?
¿Por qué necesitas copiar archivos y preparar también la base de datos?
33. Registrar las pruebas
Incluye una tabla de comprobación para cada instalación:
Prueba
Resultado esperado
Resultado obtenido
Evidencia
Abrir la home
Se muestran diseño e imágenes
Consultar catálogo
Se muestran los productos
Registrar cliente
Se crea la cuenta
Iniciar sesión
Se accede a la cuenta
Crear pedido
Se guarda y aparece en el historial
Editar producto
El cambio aparece en el catálogo
Cambiar contraseña
Funciona la nueva contraseña
Subir imagen
Se guarda y se muestra
Enviar contacto
El administrador puede leerlo
No marques una prueba como correcta sin realizarla.
34. Documentar incidencias
Si encuentras un problema, registra:
Qué estabas intentando hacer.
El mensaje de error.
Qué comprobaste.
La causa que identificaste.
La solución aplicada.
Cómo verificaste que funcionaba.
Si no encuentras incidencias, indica las comprobaciones preventivas que has realizado: configuración, servicios, puertos, permisos y conexión a la base de datos.
35. Documentación que debes entregar
Prepara un README.md con estas secciones:
Título, autor y objetivo.
Descripción de la aplicación.
Requisitos.
Estructura del proyecto.
Instalación en XAMPP.
Instalación en Ubuntu Server.
Configuración de Apache y base de datos.
Pruebas funcionales.
Incidencias y soluciones.
Comparación de los entornos.
Conclusiones personales.
Guarda las capturas en una carpeta:
capturas
Puedes insertarlas así:
Los comandos deben aparecer en bloques de código:
```bash
sudo systemctl status apache2 --no-pager
```
La documentación debe explicar tu instalación real, con tus rutas, tu IP, tus versiones y tus resultados.
No entregues únicamente una copia de este enunciado.
36. Entrega final
Entrega un ZIP con:
README.md.
La carpeta capturas.
Los fragmentos de configuración necesarios para comprender tu instalación, con las contraseñas sustituidas por un marcador.
Por ejemplo:
'password' => 'CONTRASEÑA_OCULTA'
No es necesario incluir los discos de la máquina virtual ni una copia completa de XAMPP.
Conserva las dos instalaciones funcionando para poder demostrarlas en clase.
37. Comprobación final antes de entregar
La aplicación funciona en XAMPP.
La aplicación funciona en Ubuntu Server.
Has comprobado las funciones de cliente y administrador.
La subida de imágenes funciona en ambos entornos.
Apache sirve únicamente la carpeta public.
Has identificado los modelos, DAO y archivos de operaciones.
Has observado una respuesta JSON.
La documentación contiene pasos, comandos y evidencias.
Las capturas se visualizan correctamente en el README.
Puedes explicar qué has configurado y por qué.
La actividad se considerará completada cuando puedas mostrar las dos instalaciones y explicar el recorrido de una petición desde el navegador hasta la base de datos.
