Ejemplos de resolución de ejercicios - Recogida y comprobación de datos

Esta lección contiene algunos comentarios sobre la realización de ejercicios.

Estructura general de los ejercicios

La mayoría de ejercicios propuestos como ejercicios básicos constan de dos páginas:

Además hay un fichero .css que contiene la hoja de estilo, común a todos los ejercicios y algunos ejercicios incluyen imágenes.

En el caso de ejercicios más complejos, los ejercicios pueden constar de más de dos páginas .php.

¡Atención!Antes del curso 2016/17, las páginas con los formularios eran en muchos casos ficheros .html, pero a partir del curso 2016/17 todas las páginas son ficheros .php (aunque el contenido sea html sin instrucciones PHP). No he terminado de pasar los ejercicios del formato antiguo al actual por lo que algunos ejercicios todavía incluyen páginas .html, y los exámenes de cursos anteriores también.

Plantillas

Al principio de cada página de ejercicios hay un enlace para descargar un fichero *_plantillas.zip que contiene una carpeta con los archivos necesarios para hacer los ejercicios: imágenes, hoja de estilo y páginas .php.

Se recomienda cambiar el nombre de la carpeta comprimida (eliminando la parte final _plantillas) para evitar la pérdida del trabajo realizado si se vuelve a descomprimir el fichero *_plantillas.zip.

Las páginas .php contienen todo el código HTML "fijo" (es decir, que no cambia cada vez que se ejecutan los programas) que se puede copiar de los ejemplos de ejercicios. También contienen unos fragmentos PHP (vacíos) en los lugares en que el código HTML cambia cada vez que se ejecutan los programas y debe generarse con instrucciones PHP. En algunos casos deben añadirse otros fragmentos PHP para conseguir resolver el ejercicio.

Formulario: Página *-1.php

El formulario incluye controles cuyo nombre está relacionado con la información que se va a escribir en ellos.

En la mayoría de ejercicios el formulario sólo contiene código HTML, pero en algunos necesarios se necesitan añadir instrucciones PHP.

Resultado: Página *-2.php

La página *-2.php es el programa PHP que debe escribir el alumno.

En el primer bloque de ejercicios propuestos en este curso (Controles en formularios_1), la página .php tiene que realizar las tareas siguientes:

En el resto de bloques de ejercicios propuestos en este curso (operaciones aritméticas, etc.), la página .php tiene que realizar las tareas siguientes:

Hoja de estilo común

Los ejercicios utilizan siempre la misma hoja de estilo, que debe encontrarse en la misma carpeta que las páginas .html o .php. y que se incluye en el fichero comprimido *_plantillas.zip.

Ejemplo de recogida de datos sin comprobación

Este ejemplo sirve de modelo para los ejercicios del bloque de ejercicios Controles en formularios (1).

Ejemplo

En los enunciados de los ejercicios se incluye un ejemplo de ejercicio resuelto y un enlace al ejercicio resuelto, que se puede abrir en una pestaña (o ventana) diferente. Mostrando el código fuente de las páginas de ejemplo (formulario y resultado), se puede ver el código HTML buscado en cada caso. Ese código fuente se puede copiar y pegar en las páginas creadas por el alumno.

A continuación se muestra un ejemplo de ejercicio. En la parte superior derecha hay un enlace para abrir el ejemplo en otra pestaña y poder ver fácilmente su código fuente.

Puede descargar las plantillas de este ejemplo de ejercicio.

ERROR (no puede mostrarse el objeto)
Enlace a ejemplo

Solución

Formulario

El formulario no requiere código PHP porque la página es siempre la misma.

Resultado

La página .php escrita por el alumno tiene que generar el mismo código HTML que el ejemplo. Una manera de abordar la elaboración de la página .php es probar el ejemplo y copiar el código HTML que genera el ejemplo en la página .php.

En ese código podemos dividir tres partes:

  • el bloque inicial, desde DOCTYPE hasta <h1> que será siempre el mismo, y que ya está incluido en la plantilla.
  • las dos líneas que muestran los datos escritos por el usuario (el nombre y la edad), que habrá que generar en un fragmento PHP.
  • el bloque final, desde el enlace de vuelta al formulario hasta el final, que será siempre el mismo, y que también está incluido en la plantilla.

A continuación se muestra el código fuente con las líneas que habrá que generar en un fragmento PHP resaltadas con un borde:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <title>Ejemplo de recogida de datos sin comprobación (Resultado). Ejemplo de ejercicio.
      Ejercicios. PHP. Bartolomé Sintes Marco</title>
    <link href="mclibre_php_soluciones.css" rel="stylesheet" type="text/css" title="Color" />
  </head>

  <body>
    <h1>Ejemplo de recogida de datos sin comprobación (Resultado)</h1>
    <p>Su nombre es <strong>Pepito Conejo</strong>.</p>

    <p>Su edad es <strong>4</strong> años.</p>
    <p><a href="ejemplo_recogida_datos_1-1.php">Volver al formulario.</a></p>

    <footer>
      <p class="ultmod">
        Última modificación de esta página:
        <time datetime="2016-10-26">26 de octubre de 2016</time></p>

      <p class="licencia">
        Este programa forma parte del curso <a href="http://www.mclibre.org/consultar/php/">
        Programación web en PHP</a> por <a href="http://www.mclibre.org/">Bartolomé
        Sintes Marco</a>.<br />
        El programa PHP que genera esta página está bajo
        <a rel="license" href="http://www.gnu.org/licenses/agpl.txt">licencia AGPL 3 o posterior</a>.</p>
    </footer>
  </body>
</html>

La solución propuesta a continuación contiene tres fragmentos:

  • un primer fragmento HTML con la cabecera de la página, que no depende de los datos introducidos por el usuario
  • un segundo fragmento PHP que recoge y procesa los datos
  • un tercer fragmento HTML final con el pie de página, que tampoco depende de los datos introducidos por el usuario

A continuación se muestra el código fuente con el fragmento PHP resaltado con un borde:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <title>Ejemplo de recogida de datos sin comprobación (Resultado). Ejemplo de ejercicio.
      Ejercicios. PHP. Bartolomé Sintes Marco</title>
    <link href="mclibre_php_soluciones.css" rel="stylesheet" type="text/css" title="Color" />
  </head>

  <body>
    <h1>Ejemplo de recogida de datos sin comprobación (Resultado)</h1>
<?php
function recoge($var)
{
    $tmp = (isset($_REQUEST[$var]))
        ? trim(htmlspecialchars($_REQUEST[$var], ENT_QUOTES, "UTF-8"))
        : "";
    return $tmp;
}

$nombre = recoge("nombre");
$edad   = recoge("edad");

print "    <p>Su nombre es <strong>$nombre</strong>.</p>\n";
print "\n";
print "    <p>Su edad es <strong>$edad</strong> años.</p>\n";
print "\n";
?>
    <p><a href="ejemplo_recogida_datos_1-1.php">Volver al formulario.</a></p>

    <footer>
      <p class="ultmod">
        Última modificación de esta página:
        <time datetime="2016-10-26">26 de octubre de 2016</time></p>

      <p class="licencia">
        Este programa forma parte del curso <a href="http://www.mclibre.org/consultar/php/">
        Programación web en PHP</a> por <a href="http://www.mclibre.org/">Bartolomé
        Sintes Marco</a>.<br />
        El programa PHP que genera esta página está bajo
        <a rel="license" href="http://www.gnu.org/licenses/agpl.txt">licencia AGPL 3 o posterior</a>.</p>
    </footer>
  </body>
</html>

Por supuesto, la página podría contener un único fragmento PHP en la que los fragmentos HTML fueran generados por instrucciones print.

Núcleo del programa php

El fragmento PHP que recoge y muestra los datos tiene la siguiente estructura:

  • Recogida de datos:
  • Presentación de resultados:
    • Como no hacemos ninguna comprobación, se escribe el mensaje incluyendo las variables (aunque contengan información absurda).

A continuación se muestra el código fuente con el apartado de presentación de datos resaltado con un borde:

<?php
function recoge($var)
{
    $tmp = (isset($_REQUEST[$var]))
        ? trim(htmlspecialchars($_REQUEST[$var], ENT_QUOTES, "UTF-8"))
        : "";
    return $tmp;
}

$nombre = recoge("nombre");
$edad   = recoge("edad");

print "    <p>Su nombre es <strong>$nombre</strong>.</p>\n";
print "\n";
print "    <p>Su edad es <strong>$edad</strong> años.</p>\n";
?>

Ejemplo de recogida y comprobación de datos

Este ejemplo sirve de modelo para el resto de bloques de ejercicios básicos con formularios (Controles en formularios (2), Operaciones aritméticas, etc.).

Ejemplo

En los enunciados de los ejercicios se incluye un ejemplo de ejercicio resuelto y un enlace al ejercicio resuelto, que se puede abrir en una pestaña (o ventana) diferente. Mostrando el código fuente de las páginas de ejemplo, se puede ver el código HTML buscado en cada caso. Ese código fuente se puede copiar y pegar en las páginas creadas por el alumno.

A continuación se muestra un ejemplo de ejercicio. En la parte superior derecha hay un enlace para abrir el ejemplo en otra pestaña y poder ver fácilmente su código fuente.

Puede descargar las plantillas de este ejemplo de ejercicio.

ERROR (no puede mostrarse el objeto)
Enlace a ejemplo

Solución

Formulario

El formulario no requiere código PHP porque la página es siempre la misma.

Resultado

La página .php escrita por el alumno tiene que generar el mismo código HTML que el ejemplo. Una manera de abordar la elaboración de la página .php es probar el ejemplo y copiar el código HTML que genera el ejemplo en la página .php.

En ese código podemos dividir cuatro partes:

  • el bloque inicial, desde DOCTYPE hasta <h1>, que será siempre el mismo, y que ya está incluido en la plantilla.
  • las tres líneas que muestran los avisos de error o los datos escritos por el usuario (el nombre, la edad y la aceptación), que habrá que generar en un fragmento PHP.
  • el bloque final, desde el enlace de vuelta al formulario hasta el final, que será siempre el mismo, y que también está incluido en la plantilla.

A continuación se muestra el código fuente con las líneas que habrá que generar en fragmentos PHP resaltadas con un borde:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <title>Ejemplo de recogida y comprobación de datos (Resultado). Ejemplo de ejercicio.
      Ejercicios. PHP. Bartolomé Sintes Marco</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="mclibre_php_soluciones.css" rel="stylesheet" type="text/css" title="Color" />
  </head>

  <body>
    <h1>Ejemplo de recogida y comprobación de datos (Resultado)</h1>

    <p>Su nombre es <strong>Pepito Conejo</strong>.</p>

    <p>Su edad es <strong>24</strong> años.</p>

    <p><strong>Sí</strong> acepta las condiciones.</p

    <p><a href="ejemplo_recogida_datos_2-1.php">Volver al formulario.</a></p>

    <footer>
      <p class="ultmod">
        Última modificación de esta página:
        <time datetime="2016-10-26">26 de octubre de 2016</time></p>

      <p class="licencia">
        Este programa forma parte del curso <a href="http://www.mclibre.org/consultar/php/">
        Programación web en PHP</a> por <a href="http://www.mclibre.org/">Bartolomé
        Sintes Marco</a>.<br />
        El programa PHP que genera esta página está bajo
        <a rel="license" href="http://www.gnu.org/licenses/agpl.txt">licencia AGPL 3 o posterior</a>.</p>
    </footer>
  </body>
</html>

La solución propuesta a continuación contiene tres fragmentos:

  • un primer fragmento HTML con la cabecera de la página, que no depende de los datos introducidos por el usuario
  • un segundo fragmento PHP que recoge y procesa los datos
  • un tercer fragmento HTML final con el pie de página, que tampoco depende de los datos introducidos por el usuario

A continuación se muestra el código fuente con el fragmento PHP resaltados con un borde:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <title>Ejemplo de recogida y comprobación de datos (Resultado). Ejemplo de ejercicio.
      Ejercicios. PHP. Bartolomé Sintes Marco</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="mclibre_php_soluciones.css" rel="stylesheet" type="text/css" title="Color" />
  </head>

  <body>
    <h1>Ejemplo de recogida y comprobación de datos (Resultado)</h1>

<?php
function recoge($var)
{
    $tmp = (isset($_REQUEST[$var]))
        ? trim(htmlspecialchars($_REQUEST[$var], ENT_QUOTES, "UTF-8"))
        : "";
    return $tmp;
}

$nombre = recoge("nombre");
$edad   = recoge("edad");
$acepto = recoge("acepto");

$nombreOk = false;
$edadOk   = false;
$aceptoOk = false;

if ($nombre == "") {
    print "    <p class=\"aviso\">No ha escrito su nombre.</p>\n";
    print "\n";
} else {
    $nombreOk = true;
}

if ($edad == "") {
    print "    <p class=\"aviso\">No ha escrito su edad.</p>\n";
    print "\n";
} elseif (!is_numeric($edad)) {
    print "    <p  class=\"aviso\">No ha escrito la edad como número.</p>\n";
    print "\n";
} elseif (!ctype_digit($edad)) {
    print "    <p class=\"aviso\">No ha escrito la edad como número entero.</p>\n";
    print "\n";
} elseif ($edad < 1 || $edad > 120) {
    print "    <p class=\"aviso\">La edad no está entre 1 y 120 años.</p>\n";
    print "\n";
} else {
    $edadOk = true;
}

if ($acepto == "") {
    print "    <p class=\"aviso\">No ha indicado si acepta las condiciones.</p>\n";
    print "\n";
} elseif ($acepto != "Sí" && $acepto != "No") {
    print "    <p class=\"aviso\">Por favor, utilice el formulario.</p>\n";
    print "\n";
} else {
    $aceptoOk = true;
}

if ($nombreOk && $edadOk && $aceptoOk) {
    print "    <p>Su nombre es <strong>$nombre</strong>.</p>\n";
    print "\n";
    print "    <p>Su edad es <strong>$edad</strong> años.</p>\n";
    print "\n";
    print "    <p>$acepto acepta las condiciones.</p>\n";
    print "\n";
}
?>
    <p><a href="ejemplo_recogida_datos_2-1.php">Volver al formulario.</a></p>

    <footer>
      <p class="ultmod">
        Última modificación de esta página:
        <time datetime="2016-10-26">26 de octubre de 2016</time></p>

      <p class="licencia">
        Este programa forma parte del curso <a href="http://www.mclibre.org/consultar/php/">
        Programación web en PHP</a> por <a href="http://www.mclibre.org/">Bartolomé
        Sintes Marco</a>.<br />
        El programa PHP que genera esta página está bajo
        <a rel="license" href="http://www.gnu.org/licenses/agpl.txt">licencia AGPL 3 o posterior</a>.</p>
    </footer>
  </body>
</html>

Por supuesto, la página podría contener un único fragmento PHP en la que los fragmentos HTML fueran generados por instrucciones print.

Núcleo del programa php

El fragmento PHP que recoge y genera los datos tiene la siguiente estructura:

  • Recogida de datos:
  • Comprobación de datos:
    • primero se definen unas variables lógicas auxiliares, cuyo nombre es el del control y la terminación Ok (en este caso, $nombreOk y $edadOk). El valor (true o false) representa si el dato escrito por el usuario es correcto o no. Estas variables se inicializan al valor false (es decir, se empieza suponiendo que los datos escritos por el usuario son incorrectos).
    • después hay bloques if ... elseif ... else ... (uno por dato enviado por el usuario) en el que se comprueba si el dato escrito por el usuario presenta algún problema. Cada posible problema se evalúa en un condición. Si el dato no presenta ningún problema, la variable lógica auxiliar se modifica a true (es decir, que si no presenta ningún problema, se supone que el dato es correcto).

      Dependiendo del tipo de dato, puede haber más o menos comprobaciones.

  • Presentación de resultados:
    • primero hay un bloque if ... en el que se comprueba si todas las variables auxiliares son true y se hace lo que se tenga que hacer. En este ejercicio simplemente se presentan el nombre y la edad escritos por el usuario, pero en otros ejercicios más complicados hay que hacer cálculos o mostrar mensajes distintos en función del resultado de esos cálculos.

A continuación se muestra el código fuente con el apartado de comprobación de datos resaltado con un borde:

<?php
function recoge($var)
{
    $tmp = (isset($_REQUEST[$var]))
        ? trim(htmlspecialchars($_REQUEST[$var], ENT_QUOTES, "UTF-8"))
        : "";
    return $tmp;
}

$nombre = recoge("nombre");
$edad   = recoge("edad");
$acepto = recoge("acepto");

$nombreOk = false;
$edadOk   = false;
$aceptoOk = false;

if ($nombre == "") {
    print "    <p class=\"aviso\">No ha escrito su nombre.</p>\n";
    print "\n";
} else {
    $nombreOk = true;
}

if ($edad == "") {
    print "    <p class=\"aviso\">No ha escrito su edad.</p>\n";
    print "\n";
} elseif (!is_numeric($edad)) {
    print "    <p  class=\"aviso\">No ha escrito la edad como número.</p>\n";
    print "\n";
} elseif (!ctype_digit($edad)) {
    print "    <p class=\"aviso\">No ha escrito la edad como número entero.</p>\n";
    print "\n";
} elseif ($edad < 1 || $edad > 120) {
    print "    <p class=\"aviso\">La edad no está entre 1 y 120 años.</p>\n";
    print "\n";
} else {
    $edadOk = true;
}

if ($acepto == "") {
    print "    <p class=\"aviso\">No ha indicado si acepta las condiciones.</p>\n";
    print "\n";
} elseif ($acepto != "Sí" && $acepto != "No") {
    print "    <p class=\"aviso\">Por favor, utilice el formulario.</p>\n";
    print "\n";
} else {
    $aceptoOk = true;
}

if ($nombreOk && $edadOk && $aceptoOk) {
    print "    <p>Su nombre es <strong>$nombre</strong>.</p>\n";
    print "\n";
    print "    <p>Su edad es <strong>$edad</strong> años.</p>\n";
    print "\n";
    print "    <p>$acepto acepta las condiciones.</p>\n";
    print "\n";
}
?>