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.

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 casos se necesitan añadir instrucciones PHP. En estos casos, el fichero incluye un fragmento 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 (Controles en formularios 2, 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 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 incluyen ejemplos de ejercicios resueltos. En la parte superior derecha de cada ejemplo hay un icono de enlace (Enlace a ejemplo) para abrir el ejemplo en otra pestaña y poder ver fácilmente su código fuente HTML. 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.

Enlace a ejemplo

Al principio de cada página de ejercicios se encuentra un enlace para descargar las plantillas de los ejercicios que incluyen el código HTML "fijo" para ahorrarle trabajo y un enlace para descargar las soluciones completas de los ejercicios. En algunas páginas de ejercicios hay disponibles páginas con soluciones comentadas.

Para el ejemplo comentado aquí, puede descargar las plantillas del ejercicio o las soluciones completas.

Solución

Formulario (página -1.php)

En este caso, el formulario no requiere código PHP porque la página es siempre la misma.

Resultado (página -2.php)

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).
    Recogida de datos. Ejemplos.
    Ejercicios. PHP. Bartolomé Sintes Marco. www.mclibre.org
  </title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="mclibre-php-ejercicios.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 <strong><a href="https://www.mclibre.org/consultar/php/">Programación
      web en PHP</a></strong> de <a href="https://www.mclibre.org/" rel="author" >Bartolomé Sintes Marco</a>.<br>
      El programa PHP que genera esta página se distribuye bajo
      <a rel="license" href="https://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).
    Recogida de datos. Ejemplos.
    Ejercicios. PHP. Bartolomé Sintes Marco. www.mclibre.org
  </title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="mclibre-php-ejercicios.css" title="Color">
</head>

<body>
  <h1>Ejemplo de recogida de datos sin comprobación (Resultado)</h1>
<?php
// Función de recogida de datos
function recoge($key, $type = "")
{
    if (!is_string($key) && !is_int($key) || $key == "") {
        trigger_error("Function recoge(): Argument #1 (\$key) must be a non-empty string or an integer", E_USER_ERROR);
    } elseif ($type !== "" && $type !== []) {
        trigger_error("Function recoge(): Argument #2 (\$type) is optional, but if provided, it must be an empty array or an empty string", E_USER_ERROR);
    }
    $tmp = $type;
    if (isset($_REQUEST[$key])) {
        if (!is_array($_REQUEST[$key]) && !is_array($type)) {
            $tmp = trim(htmlspecialchars($_REQUEST[$key]));
        } elseif (is_array($_REQUEST[$key]) && is_array($type)) {
            $tmp = $_REQUEST[$key];
            array_walk_recursive($tmp, function (&$value) {
                $value = trim(htmlspecialchars($value));
            });
        }
    }
    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 <strong><a href="https://www.mclibre.org/consultar/php/">Programación
      web en PHP</a></strong> de <a href="https://www.mclibre.org/" rel="author" >Bartolomé Sintes Marco</a>.<br>
      El programa PHP que genera esta página se distribuye bajo
      <a rel="license" href="https://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 todo el código HTML fuera generado 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
// Función de recogida de datos
function recoge($key, $type = "")
{
    if (!is_string($key) && !is_int($key) || $key == "") {
        trigger_error("Function recoge(): Argument #1 (\$key) must be a non-empty string or an integer", E_USER_ERROR);
    } elseif ($type !== "" && $type !== []) {
        trigger_error("Function recoge(): Argument #2 (\$type) is optional, but if provided, it must be an empty array or an empty string", E_USER_ERROR);
    }
    $tmp = $type;
    if (isset($_REQUEST[$key])) {
        if (!is_array($_REQUEST[$key]) && !is_array($type)) {
            $tmp = trim(htmlspecialchars($_REQUEST[$key]));
        } elseif (is_array($_REQUEST[$key]) && is_array($type)) {
            $tmp = $_REQUEST[$key];
            array_walk_recursive($tmp, function (&$value) {
                $value = trim(htmlspecialchars($value));
            });
        }
    }
    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 incluyen ejemplos de ejercicios resueltos. En la parte superior derecha de cada ejemplo hay un icono de enlace (Enlace a ejemplo) para abrir el ejemplo en otra pestaña y poder ver fácilmente su código fuente HTML. 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.

Enlace a ejemplo

Al principio de cada página de ejercicios se encuentra un enlace para descargar las plantillas de los ejercicios que incluyen el código HTML "fijo" para ahorrarle trabajo y un enlace para descargar las soluciones completas de los ejercicios. En algunas páginas de ejercicios hay disponibles páginas con soluciones comentadas.

Para el ejemplo comentado aquí, puede descargar las plantillas del ejercicio o las soluciones completas.

Solución

Formulario (página -1.php)

En este caso, el formulario no requiere código PHP porque la página es siempre la misma.

Resultado (página -2.php)

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 de datos con comprobación (Resultado).
    Recogida de datos. Ejemplos.
    Ejercicios. PHP. Bartolomé Sintes Marco. www.mclibre.org
  </title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="mclibre-php-ejercicios.css" title="Color">
</head>

<body>
  <h1>Ejemplo de recogida de datos con comprobación (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 <strong><a href="https://www.mclibre.org/consultar/php/">Programación
      web en PHP</a></strong> de <a href="https://www.mclibre.org/" rel="author" >Bartolomé Sintes Marco</a>.<br>
      El programa PHP que genera esta página se distribuye bajo
      <a rel="license" href="https://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 de datos con comprobación (Resultado).
    Recogida de datos. Ejemplos.
    Ejercicios. PHP. Bartolomé Sintes Marco. www.mclibre.org
  </title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="mclibre-php-ejercicios.css" title="Color">
</head>

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

<?php
// Función de recogida de datos
function recoge($key, $type = "")
{
    if (!is_string($key) && !is_int($key) || $key == "") {
        trigger_error("Function recoge(): Argument #1 (\$key) must be a non-empty string or an integer", E_USER_ERROR);
    } elseif ($type !== "" && $type !== []) {
        trigger_error("Function recoge(): Argument #2 (\$type) is optional, but if provided, it must be an empty array or an empty string", E_USER_ERROR);
    }
    $tmp = $type;
    if (isset($_REQUEST[$key])) {
        if (!is_array($_REQUEST[$key]) && !is_array($type)) {
            $tmp = trim(htmlspecialchars($_REQUEST[$key]));
        } elseif (is_array($_REQUEST[$key]) && is_array($type)) {
            $tmp = $_REQUEST[$key];
            array_walk_recursive($tmp, function (&$value) {
                $value = trim(htmlspecialchars($value));
            });
        }
    }
    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 positivo.</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, indique si acepta o no las condiciones.</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 <strong><a href="https://www.mclibre.org/consultar/php/">Programación
      web en PHP</a></strong> de <a href="https://www.mclibre.org/" rel="author" >Bartolomé Sintes Marco</a>.<br>
      El programa PHP que genera esta página se distribuye 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 todo el código HTML fuera generado 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
// Función de recogida de datos
function recoge($key, $type = "")
{
    if (!is_string($key) && !is_int($key) || $key == "") {
        trigger_error("Function recoge(): Argument #1 (\$key) must be a non-empty string or an integer", E_USER_ERROR);
    } elseif ($type !== "" && $type !== []) {
        trigger_error("Function recoge(): Argument #2 (\$type) is optional, but if provided, it must be an empty array or an empty string", E_USER_ERROR);
    }
    $tmp = $type;
    if (isset($_REQUEST[$key])) {
        if (!is_array($_REQUEST[$key]) && !is_array($type)) {
            $tmp = trim(htmlspecialchars($_REQUEST[$key]));
        } elseif (is_array($_REQUEST[$key]) && is_array($type)) {
            $tmp = $_REQUEST[$key];
            array_walk_recursive($tmp, function (&$value) {
                $value = trim(htmlspecialchars($value));
            });
        }
    }
    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 positivo.</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, indique si acepta o no las condiciones.</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";
}
?>