Lab 02 — Variables, tipos y salida en PHP¶
| Campo | Valor |
|---|---|
| Módulo | Implantación de Aplicaciones Web (IMW) |
| Ciclo | Administración de Sistemas Informáticos en Red (ASIR) |
| Unidad | UT4 — PHP en servidor |
| Criterios de evaluación (CE) | b (relación con HTML), c (sintaxis básica) |
| Requisitos | Lab 01 completado (entorno Apache+PHP + VirtualHost gestor.local) |
| Agrupación | Individual |
| Herramientas | Navegador + editor de texto + terminal |
| Apuntes | https://ichigar.codeberg.page/imw/recursos/ut4_php_02_variables_tipos_salida/ |
| Tiempo estimado | 90–120 minutos |
Antes de empezar¶
Qué vamos a hacer
En este lab practicamos con las variables de PHP: cómo se declaran, qué tipos existen (texto, número, booleano), cómo se combinan con operaciones y cómo se muestran en una página HTML de forma segura.
Crearemos tres ficheros pequeños en ~/gestor/public/:
variables.php— para practicar variables de texto y número.tipos.php— para inspeccionar tipos convar_dump().ficha.php— página completa que integra todo lo anterior.
Al terminar tendrás interiorizado el ciclo "declaro variable → opero con ella → la muestro escapada en HTML", que es la base de todo lo que vamos a hacer a continuación.
Paralelismo con bash
En PHP, las variables empiezan por $ y las instrucciones acaban en ;. Las asignaciones se parecen mucho a bash:
| Bash | PHP |
|---|---|
titulo="Impresora sin papel" |
$titulo = 'Impresora sin papel'; |
num=7 |
$num = 7; |
echo $titulo |
echo $titulo; |
Diferencias importantes: en PHP sí distinguen mayúsculas ($var ≠ $Var), el ; es obligatorio, y al mostrar texto en HTML usamos htmlspecialchars() por seguridad (como ya viste en el Lab 01).
Antes de empezar: comprueba que gestor.local sigue funcionando
Desde el navegador de tu Windows, visita http://gestor.local. Debes ver la página que creaste en el Lab 01 (tu index.php personalizado).
Si el navegador dice "no se puede resolver el nombre" o similar, es que ha pasado tiempo desde el Lab 01 y algo se ha desconfigurado. Causas habituales:
- La IP del servidor ha cambiado (DHCP): ejecuta
ip a | grep "inet "en la VM para ver la IP actual y editaC:\Windows\System32\drivers\etc\hostsen tu Windows (como administrador) para ajustar la línea degestor.local. - Apache no está arrancado: en el servidor,
sudo systemctl start apache2.
Hasta que http://gestor.local no responda, no sigas con este lab.
Cómo se entrega este lab¶
Al terminar, empaqueta tu trabajo en un ZIP con esta estructura exacta:
apellido_nombre_lab02/
├── gestor/
│ └── public/
│ ├── variables.php
│ ├── tipos.php
│ ├── ficha.php
│ └── resumen.php
├── capturas/
│ ├── paso1_variables_texto.png
│ ├── paso2_variables_numeros.png
│ ├── paso3_vardump.png
│ ├── paso4_concatenacion.png
│ ├── paso5_ficha.png
│ └── paso6_resumen_taller.png
└── RESPUESTAS.md
Nombres prescritos
Los nombres de ficheros y carpetas son obligatorios y exactos. El script de corrección busca estos nombres concretos.
Cómo preparar el ZIP (Windows o Linux/macOS):
- Crea la carpeta
apellido_nombre_lab02en tu equipo (minúsculas, sin espacios ni acentos). - Reproduce la estructura: los 4
.phplos crearás en el servidor durante los pasos del lab y debes copiarlos a tu carpeta de entrega antes de hacer el ZIP. Guarda también las 6 capturas con el nombre exacto, y crea elRESPUESTAS.md(plantilla al final). - Comprime:
- Windows: clic derecho sobre la carpeta → Enviar a → Carpeta comprimida (en zip).
- Linux/macOS:
zip -r apellido_nombre_lab02.zip apellido_nombre_lab02/.
- Verifica que al abrir el ZIP aparece una sola carpeta raíz
apellido_nombre_lab02/.
Paso 1 — Variables de texto (strings)¶
Conceptos
- Una variable de texto (string) guarda una cadena de caracteres.
- Se puede escribir con comillas simples
'texto'o comillas dobles"texto". Hay una diferencia importante que veremos en el Paso 4. - Igual que en el Lab 01: toda variable de texto mostrada en HTML se escapa con
htmlspecialchars($var)para evitar ataques XSS. - Solo se escapan las variables de texto: los números no pueden contener etiquetas HTML, así que no necesitan
htmlspecialchars(). Lo veremos en el Paso 2.
Objetivo. Crear un primer fichero con 3 variables de texto y mostrarlas en una página HTML.
Tarea. Crea ~/gestor/public/variables.php con este contenido:
Visita http://gestor.local/variables.php y comprueba que aparecen los 3 textos.
Experimento: XSS en vivo. Para entender por qué usamos htmlspecialchars(), haz este pequeño experimento:
-
Cambia temporalmente el valor de
$tituloa: -
Quita temporalmente el
htmlspecialchars()en la línea del<h1>, dejándolo así: -
Guarda y recarga
http://gestor.local/variables.phpen el navegador. Verás aparecer un popup con "hola desde XSS". El navegador ha ejecutado el código del$tituloporque no lo escapamos.
Deshaz el experimento antes de seguir
Antes de pasar al Paso 2, deja variables.php como estaba. Tienes que hacer los dos cambios, no solo uno:
1. Restaura el valor original de $titulo:
2. Vuelve a poner htmlspecialchars() en el <h1>:
Guarda, recarga http://gestor.local/variables.php y comprueba que el popup ya no aparece y que se ve el texto "Impresora sin papel" en el <h1>. Si solo deshaces uno de los dos cambios el popup desaparece igualmente, pero la página sigue siendo insegura: por eso hay que deshacer los dos.
Pista si ves código PHP en la página
Si el navegador muestra literalmente <?php ... ?>, es que Apache no está interpretando el fichero. Revisa que lo has guardado con extensión .php y dentro de ~/gestor/public/.
Pista si la página sale en blanco o con HTTP ERROR 500
Si al recargar variables.php ves la pestaña completamente en blanco o un genérico HTTP ERROR 500, lo más probable es que tengas una errata de sintaxis en el PHP (un ; que falta, una comilla sin cerrar, un <?php mal escrito...) y que display_errors no esté activado en php.ini, así que PHP no te muestra el mensaje de error.
Vuelve al Paso 5 del lab A1 — Depuración: ver los errores de PHP — y comprueba que activaste display_errors = On en /etc/php/*/apache2/php.ini y recargaste Apache. Una vez hecho, recarga variables.php: en lugar de la pantalla en blanco aparecerá el mensaje de error con la línea exacta donde está el problema. No tendrás que volver a tocar php.ini para los próximos labs.
Responde en RESPUESTAS.md, sección ## Paso 1.
¿Qué ocurrió al recargar la página durante el experimento (paso con
<script>y sinhtmlspecialchars())? ¿Qué cambió al ponerhtmlspecialchars()de nuevo? Explícalo con tus palabras en dos o tres líneas.
Captura requerida. Guarda en capturas/paso1_variables_texto.png una captura del navegador con la página variables.php mostrando los 3 textos. Debe verse:
- La URL
http://gestor.local/variables.php. - El título "Impresora sin papel".
- El párrafo de descripción y la prioridad "alta".
Verificación.
-
~/gestor/public/variables.phpexiste y se abre desde el navegador. - Se ven los 3 textos del fichero.
- Las 3 variables se muestran con
htmlspecialchars(). - He guardado
capturas/paso1_variables_texto.png.
Paso 2 — Variables numéricas y operaciones¶
Conceptos
- Una variable numérica guarda un número entero (
int, por ejemplo7) o decimal (float, por ejemplo3.14). - No llevan comillas. Paralelismo con bash:
$n = 7;en PHP esn=7en bash. - Operadores aritméticos:
+,-,*,/,%(resto de la división). Igual que en bash pero sin el$(( ... ))— en PHP las operaciones se escriben tal cual. - La función
round($valor, $decimales)redondea un número a un número exacto de decimales. Por ejemplo,round(30.456, 1)da30.5(1 decimal) yround(30.456, 2)da30.46(2 decimales). Sin segundo argumento redondea al entero más cercano.
Objetivo. Ampliar variables.php para mostrar estadísticas básicas calculadas con operaciones aritméticas.
Tarea 1 — Añadir variables numéricas al bloque PHP. Abre ~/gestor/public/variables.php. Dentro del bloque PHP que ya tienes (entre <?php y ?>, justo después de la línea $prioridad = 'alta';), añade estas 4 líneas:
El bloque PHP completo debe quedar así (conservando lo del Paso 1 y añadiendo lo nuevo):
Tarea 2 — Añadir la sección HTML. Más abajo en el mismo fichero, justo antes de la etiqueta </body>, añade este bloque:
Observa que los números no llevan htmlspecialchars(). No hace falta: un número no puede contener etiquetas HTML ni comillas. Solo aplicamos htmlspecialchars() a texto.
Guarda y recarga http://gestor.local/variables.php. Deben aparecer las estadísticas con el porcentaje calculado debajo de los textos del Paso 1.
Pista
Si el porcentaje sale 30 en vez de 30.0, es normal: PHP omite los ceros a la derecha cuando el resultado es exacto. Si quieres forzar un formato concreto, en un lab posterior verás la función number_format().
Responde en RESPUESTAS.md, sección ## Paso 2.
Cambia los valores de
$abiertasy$resueltasa5y5. ¿Qué porcentaje aparece? ¿Y si los pones a0y10? Explica en una línea qué hace la operación$resueltas / $total * 100.
Captura requerida. Guarda en capturas/paso2_variables_numeros.png una captura con la lista de estadísticas visible. Debe verse:
- La URL
http://gestor.local/variables.php. - La lista con los 4 elementos (abiertas, resueltas, total, porcentaje).
Verificación.
-
variables.phptiene las 4 variables numéricas:$abiertas,$resueltas,$total,$porcentaje_resueltas. -
$totalse calcula como$abiertas + $resueltasy aparece correctamente en la página. - El porcentaje aparece con un decimal (usa
round(..., 1)). - He guardado
capturas/paso2_variables_numeros.png.
Paso 3 — Inspeccionar tipos con var_dump()¶
Conceptos
- PHP es de tipado dinámico: no declaras el tipo de una variable, PHP lo averigua solo. Cuando algo no funciona y no sabes por qué (un número que se trata como texto, un booleano inesperado), necesitas saber qué tipo tiene una variable. Para eso existe
var_dump($var), la herramienta principal de depuración en PHP. Úsala cada vez que algo no se comporte como esperas. var_dump()muestra el tipo y el valor de la variable.- Los tipos básicos que verás:
string(N)→ texto de N caracteres.int(N)→ número entero.float(N)→ número decimal.bool(true)obool(false)→ booleano.NULL→ valor nulo (no hay valor).
- La etiqueta HTML
<pre>preserva espacios y saltos de línea.var_dump()genera salida con varios saltos, así que envolveremos las llamadas dentro de<pre>...</pre>para que se lean bien en el navegador.
Objetivo. Crear un fichero aparte donde inspeccionar los tipos de varias variables.
Tarea. Crea ~/gestor/public/tipos.php:
Visita http://gestor.local/tipos.php. Dentro de la etiqueta <pre> verás la salida de cada var_dump().
Responde en RESPUESTAS.md, sección ## Paso 3.
Copia literalmente la línea que muestra el
var_dumpde$titulo, la de$abiertasy la de$resuelto. Luego, en una frase, explica qué información te davar_dump()que no te daría un simpleecho.
Captura requerida. Guarda en capturas/paso3_vardump.png una captura de la página tipos.php con toda la salida de var_dump() visible. Debe verse:
- La URL
http://gestor.local/tipos.php. - Las 5 líneas de salida con sus tipos (
string,int,float,bool,NULL).
Verificación.
-
~/gestor/public/tipos.phpexiste. - Aparecen los 5 tipos distintos en la salida (
string,int,float,bool,NULL). - En
RESPUESTAS.mdhe copiado literalmente las 3 líneas pedidas devar_dump(de$titulo,$abiertasy$resuelto). - He guardado
capturas/paso3_vardump.png.
Paso 4 — Concatenación y comillas simples vs dobles¶
Conceptos
- El operador
.(punto) concatena (une) cadenas en PHP. En bash es simplemente poner cadenas juntas; en PHP siempre va el.. - Comillas dobles e interpolación de variables:
- Comillas simples
'...'→ las variables no se expanden. - Comillas dobles
"..."→ las variables sí se expanden.
- Comillas simples
- Buena práctica: usa comillas simples por defecto (son marginalmente más rápidas y claras) y solo usa dobles cuando realmente necesitas expandir variables o caracteres especiales como
\n.
Objetivo. Practicar las dos formas de construir una cadena a partir de variables.
Tarea. Añade al final del bloque PHP de variables.php (antes del ?> que abre el HTML) estas variables:
Y en el HTML, antes de </body>, añade:
<h2>Tres formas de construir la etiqueta</h2>
<ul>
<li>v1 (concatenación con .): <?= htmlspecialchars($etiqueta_v1) ?></li>
<li>v2 (comillas dobles): <?= htmlspecialchars($etiqueta_v2) ?></li>
<li>v3 (comillas simples): <?= htmlspecialchars($etiqueta_v3) ?></li>
</ul>
Guarda y recarga. Fíjate en la v3: como usa comillas simples, $titulo y $prioridad no se sustituyen por su valor, sino que aparecen literalmente.
Responde en RESPUESTAS.md, sección ## Paso 4.
¿Por qué
v3muestra$tituloliteral en lugar del valor de la variable? ¿Qué ventaja tienev2frente av1en este caso? ¿En qué situaciones preferiríasv1?
Captura requerida. Guarda en capturas/paso4_concatenacion.png una captura con las 3 etiquetas visibles. Debe verse:
- La URL
http://gestor.local/variables.php. - Las 3 líneas "v1", "v2", "v3" con los resultados distintos.
Verificación.
-
variables.phptiene las 3 variables$etiqueta_v1,$etiqueta_v2,$etiqueta_v3. - En la página, v1 y v2 muestran el valor expandido; v3 muestra los
$literales. - He guardado
capturas/paso4_concatenacion.png.
Paso 5 — Página completa: ficha de una incidencia¶
Conceptos
- En este paso juntas todo lo visto: declaras variables de distintos tipos, las operas, las concatenas y las muestras en una página HTML bien estructurada.
- Cada variable de texto se escapa con
htmlspecialchars()al imprimirla. Los números van sin escape (no pueden contener HTML malicioso).
Objetivo. Crear una página ficha.php que muestre una ficha completa de una incidencia con variables de texto, numéricas y al menos una variable construida por concatenación.
Tarea. Crea ~/gestor/public/ficha.php:
Visita http://gestor.local/ficha.php. Personaliza al menos 3 valores (pon una incidencia tuya inventada, cambia el autor a tu nombre real, etc.).
Sobre <dl>, <dt>, <dd>
<dl> es una "lista de definición" HTML: cada par <dt> (término) + <dd> (definición) forma una entrada. Es la etiqueta semánticamente correcta para mostrar fichas con pares campo/valor.
Responde en RESPUESTAS.md, sección ## Paso 5.
Lista cuántas variables has declarado en
ficha.php. ¿Cuáles van escapadas conhtmlspecialchars()y cuáles no? ¿Por qué?
Captura requerida. Guarda en capturas/paso5_ficha.png una captura del navegador mostrando tu ficha personalizada. Debe verse:
- La URL
http://gestor.local/ficha.php. - La cabecera
<h1>con el formato[prioridad] título. - Las 7 filas de la
<dl>(Identificador, Descripción, Estado, Prioridad, Fecha, Horas estimadas, Registrado por) con sus valores. - Al menos 3 valores modificados respecto al ejemplo del enunciado (por ejemplo: tu nombre real como
$autoren lugar de "Ana López", otro título inventado, otra fecha).
Verificación.
-
~/gestor/public/ficha.phpexiste y carga desde el navegador. - El fichero declara 9 variables en el bloque PHP (
$id,$titulo,$descripcion,$prioridad,$estado,$fecha,$horas_estim,$autor,$cabecera). - La
<dl>tiene 7 pares<dt>/<dd>visibles. - He personalizado al menos 3 valores respecto al ejemplo del enunciado.
- Todas las variables de texto usan
htmlspecialchars()(los números y$horas_estimsin escape). - He guardado
capturas/paso5_ficha.png.
Paso 6 — Aplica lo aprendido: dashboard de tu taller de informática¶
Qué es este paso
Los cinco pasos anteriores han sido guiados: te he dado el código y tú lo has tecleado, probado y respondido. En este sexto paso no hay código de referencia. Lo que hay son requisitos, y tú aplicas lo aprendido en los pasos 1 a 5 para cumplirlos.
No te preocupes si te atascas: la pista del final te da un ejemplo numérico para orientarte.
Objetivo. Crear un fichero nuevo resumen.php donde practiques por tu cuenta los tres conceptos del lab: variables de texto, variables numéricas con operaciones, y concatenación para construir una etiqueta resumen.
Tarea. Imagina que eres el responsable de un pequeño taller de informática que repara equipos. Crea ~/gestor/public/resumen.php con los requisitos siguientes.
Esqueleto inicial del fichero
Para evitar el "miedo al folio en blanco", empieza por este esqueleto y ve rellenándolo:
Requisitos obligatorios de contenido:
- Al menos 3 variables de texto: nombre del taller, ciudad y mes del informe (por ejemplo,
'Abril 2026'). - Al menos 4 variables numéricas: equipos recibidos, equipos reparados, equipos pendientes y horas totales trabajadas.
- Al menos 2 variables calculadas a partir de las anteriores:
- Porcentaje de equipos reparados sobre los recibidos (usa
round()con un decimal). - Media de horas por equipo recibido (también con
round()).
- Porcentaje de equipos reparados sobre los recibidos (usa
- Una variable de tipo cadena construida con concatenación (operador
.o interpolación con comillas dobles) que forme una frase tipo:"Taller 'Reparaciones Chema' — Las Palmas — Abril 2026".
Requisitos de presentación HTML:
- Un
<h1>con la frase construida por concatenación. - Una lista
<ul>con una línea<li>por cada variable (texto, numérica y calculada). - Las variables de texto se muestran con
htmlspecialchars(); las numéricas sin él.
Estructura HTML esperada (orientativa, los valores los pones tú):
<h1>Taller "Reparaciones Chema" — Las Palmas — Abril 2026</h1>
<ul>
<li>Nombre del taller: ...</li>
<li>Equipos recibidos: ...</li>
<li>Porcentaje reparados: ... %</li>
<!-- una línea <li> por cada variable que hayas declarado -->
</ul>
Requisitos de calidad del código:
error_reporting(E_ALL)yini_set('display_errors', '1')al principio del fichero.- Nombra las variables con sentido (evita
$a,$b,$c). - Añade un comentario breve al principio del bloque PHP explicando qué hace el fichero.
Pista si te atascas con los cálculos
Imagina que tu taller ha recibido 12 equipos, ha reparado 9 y ha trabajado 40 horas en total. Las variables las declararías así:
Y las dos variables calculadas:
$porcentaje_reparados = round($equipos_reparados / $equipos_recibidos * 100, 1); // 75.0
$media_horas = round($horas_trabajadas / $equipos_recibidos, 1); // 3.3
Los operadores y funciones son los mismos que en el Paso 2: /, *, round().
Pista sobre la concatenación
Si te resulta más cómodo, usa interpolación con comillas dobles (como en el Paso 4 v2):
O con el operador punto:
Ambas son válidas. Elige la que te parezca más legible.
Responde en RESPUESTAS.md, sección ## Paso 6.
Lista las variables que has declarado en
resumen.php(nombre de cada una y si es de texto, numérica o calculada). Indica en qué línea del fichero has usado concatenación y qué técnica has elegido (operador.o comillas dobles con interpolación). Explica en una frase por qué los números no necesitanhtmlspecialchars()pero los textos sí.
Captura requerida. Guarda en capturas/paso6_resumen_taller.png una captura del navegador visitando http://gestor.local/resumen.php. Debe verse:
- La URL
http://gestor.local/resumen.php. - El
<h1>con la frase del taller construida por concatenación. - La lista
<ul>con todas las variables (texto, numéricas y calculadas) visibles.
Verificación.
-
~/gestor/public/resumen.phpexiste y carga en el navegador. - Tiene al menos 3 variables de texto y 4 numéricas.
- Tiene al menos 2 variables calculadas (porcentaje y media).
- El
<h1>muestra una frase construida por concatenación. - Las variables de texto se muestran con
htmlspecialchars(); las numéricas sin él. - He guardado
capturas/paso6_resumen_taller.png.
Checklist final de entrega¶
Antes de subir el ZIP al Campus:
- He creado la carpeta
apellido_nombre_lab02/con mi apellido y nombre reales. - Dentro hay
gestor/public/variables.php,tipos.php,ficha.phpyresumen.php. - Dentro hay
capturas/con los 6 PNG:paso1_variables_texto.png,paso2_variables_numeros.png,paso3_vardump.png,paso4_concatenacion.png,paso5_ficha.png,paso6_resumen_taller.png. - Dentro hay
RESPUESTAS.mdcon las 6 secciones (## Paso 1a## Paso 6) rellenas. - Los 4 ficheros PHP pasan
php -lsin errores (en el servidor:php -l ~/gestor/public/variables.phpy análogos). - El ZIP se llama
apellido_nombre_lab02.zipy al descomprimir aparece una sola carpeta raíz. - He subido el ZIP al Campus antes de la fecha límite.
Anexo — Plantilla de RESPUESTAS.md¶
Crea RESPUESTAS.md dentro de apellido_nombre_lab02/:
# Respuestas — Lab 02 Variables, tipos y salida
**Nombre:** Apellido, Nombre
**Fecha:** YYYY-MM-DD
## Paso 1
(Tu respuesta: qué pasaría sin `htmlspecialchars()` si `$titulo` fuera `<script>alert('hola')</script>`.)
## Paso 2
(Tu respuesta: porcentajes con 5/5 y 0/10, y explicación de la operación.)
## Paso 3
(Tu respuesta: las 3 líneas literales del `var_dump` y explicación de qué aporta respecto a `echo`.)
## Paso 4
(Tu respuesta: por qué v3 no expande las variables, ventaja de v2 frente a v1, cuándo preferir v1.)
## Paso 5
(Tu respuesta: número de variables declaradas, cuáles escapas con `htmlspecialchars()` y por qué.)
## Paso 6
(Tu respuesta: lista de variables declaradas en `resumen.php` con su tipo — texto, numérica o calculada —, línea donde has usado concatenación y técnica elegida, y por qué los números no necesitan `htmlspecialchars()` pero los textos sí.)