Ejemplo de resolución de ejercicio (sin formulario). Ejercicios. PHP. Bartolomé Sintes Marco. www.mclibre.org

En esta lección se resuelve un ejercicio similar a los que aparecen en el apartado "PHP, sin formularios".

Ejercicio de ejemplo resuelto

Estos serían los pasos a realizar para resolver el ejercicio de ejemplo.

Descargar las plantillas

Descargue el archivo comprimido de plantillas mediante el enlace que se encuentra al principio de la página de ejercicios. El texto es siempre similar a éste:
Para facilitar la realización de los ejercicios, se proporcionan unas plantillas de los ejercicios Ejemplo.
Copie el archivo comprimido en la carpeta correspondiente (ejercicios/sin-formularios, ejercicios/con-formularios, etc.).
Descomprima directamente el archivo comprimido (el archivo incluye una carpeta). En 7-zip se podría elegir la opción Extraer aquí.
Renombre la carpeta eliminando la parte final (-plantillas).
Si abre cualquier archivo .php verá que al principio hay un bloque de comentarios para indicar el nombre del autor del programa:
```
<?php
/**
 * Ejemplo de ejercicio sin formulario - ejemplo-sf-1.php
 *
 * @author    Escriba aquí su nombre
 */
?>
<!DOCTYPE html>
<html lang="es">
<head>
...
```
Para no tener que ir cambiando una a una las expresiones "Escriba aquí su nombre" por su propio nombre, en Visual Studio Code puede utilizar el buscador en archivos (haga clic en el icono en forma de lupa de la barra de actividades izquierda o escriba el atajo de teclado Ctrl+Mayús+h) y cambiar todos los archivos de una sola vez.

Abrir el archivo .php

Si ha hecho la busqueda y sustitución, su nombre aparecerá en los tres lugares indicados en la plantilla:

<?php
/**
 * Ejemplo de ejercicio sin formulario - ejemplo-sf-1.php
 *
 * @author    Barto
 */
?>
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>
    Ejemplo de ejercicio sin formulario.
    Ejemplos.
    Barto
  </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 ejercicio sin formulario 1</h1>

  <p>Actualice la página para mostrar dos nuevos colores.</p>

  <table>
    <tbody>
<?php

print "  <p class=\"aviso\">Ejercicio incompleto</p>\n";

?>
    </tbody>
  </table>

  <footer>
    <p>Barto</p>
  </footer>
</body>
</html>

Añadir el código HTML en los fragmentos PHP

Complete la plantilla añadiendo el código HTML que deberá generar cada fragmento PHP. Ese código HTML se puede copiar del ejercicio de ejemplo.

Abra el código fuente de la página web del ejercicio de ejemplo (Ctrl+u), seleccione y copie el fragmento HTML deseado:

 // ...
  <table>
    <tbody>

      <tr>
        <th>Color: hwb(49 20% 0%)</th>
        <th>Color: hwb(352 20% 0%)</th>
      </tr>
      <tr>
        <td style="height: 50px; background-color: hwb(49 20% 0%)"></td>
        <td style="background-color: hwb(352 20% 0%)"></td>
      </tr>

    </tbody>
  </table>
// ...

Si tiene instalada la extensión mclibre.org Snippets, utilice el atajo de teclado Ctrl+Alt+v Ctrl+Alt+l para pegar el código HTML en instrucciones print:

  // ...
    <table>
      <tbody>

 <?php
print "      <tr>\n";
print "        <th>Color: hwb(49 20% 0%)</th>\n";
print "        <th>Color: hwb(352 20% 0%)</th>\n";
print "      </tr>\n";
print "        <tr>\n";
print "        <td style=\"height: 50px; background-color: hwb(49 20% 0%)\"></td>\n";
print "        <td style=\"background-color: hwb(352 20% 0%)\"></td>\n";
print "      </tr>\n";
  ?>

    </tbody>
    </table>
  // ...

Nota: Este programa ya se puede ejecutar, pero mostraría siempre el mismo resultado.

Completar el programa

Finalmente, debe escribir el programa PHP que realice la tarea planteada.
- Como en los ejercicios "PHP, sin formularios" no se utilizan formularios, los programas no pueden ser interactivos, por lo que se recurre casi siempre a generar datos de forma aleatoria mediante la función rand().
- Si los datos generados se van a utilizar en varios lugares de la página (como es el caso del ejemplo), es necesario crear variables.

En este ejemplo, el código PHP para generar los colores aleatorios podría ser el siguiente:

 // ...
  <table>
    <tbody>

 <?php
$color1 = rand(0, 360);
$color2 = rand(0, 360);

print "      <tr>\n";
print "        <th>Color: hwb($color1 20% 0%)</th>\n";
print "        <th>Color: hwb($color2 20% 0%)</th>\n";
print "      </tr>\n";
print "      <tr>\n";
print "        <td style=\"height: 50px; background-color: hwb($color1 20% 0%)\"></td>\n";
print "        <td style=\"background-color: hwb($color2 20% 0%)\"></td>\n";
print "      </tr>\n";
?>

    </tbody>
  </table>
// ...

Con lo que el programa completo quedaría:

<?php
/**
 * Ejemplo de ejercicio sin formulario - ejemplo-sf-1.php
 *
 * @author    Barto
 */
?>
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>Ejemplo de ejercicio sin formulario 1.
    Barto</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 ejercicio sin formulario 1</h1>

  <p>Actualice la página para mostrar dos nuevos colores.</p>

  <table>
    <tbody>
<?php
$color1 = rand(0, 360);
$color2 = rand(0, 360);

print "      <tr>\n";
print "        <th>Color: hwb($color1 20% 0%)</th>\n";
print "        <th>Color: hwb($color2 20% 0%)</th>\n";
print "      </tr>\n";
print "      <tr>\n";
print "        <td style=\"height: 50px; background-color: hwb($color1 20% 0%)\"></td>\n";
print "        <td style=\"background-color: hwb($color2 20% 0%)\"></td>\n";
print "      </tr>\n";
?>
    </tbody>
  </table>

  <footer>
    <p>Barto</p>
  </footer>
</body>
</html>

Ejemplos de resolución de ejercicios - Sin formularios

Estructura general de los ejercicios

Ejemplo de programa

Ejercicio de ejemplo resuelto

Descargar las plantillas

Abrir el archivo .php

Añadir el código HTML en los fragmentos PHP

Completar el programa