Ejemplos de resolución de ejercicios - Sin formularios

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

Estructura general de los ejercicios

Los ejercicios propuestos en el apartado "PHP, sin formularios" constan de:

Los ejercicios utilizan siempre la misma hoja de estilo, que debe encontrarse en la misma carpeta que las páginas .php.

Las imágenes que se utilizan en los ejercicios pueden ser imágenes SVG, PNG o JPG y se guardan en una carpeta /img.

La hoja de estilo y las imágenes que se utilizan en cada grupo de ejercicios se pueden descargar mediante un enlace que se encuentra al principio de cada página de ejercicios. El archivo se llama siempre *-plantillas.zip y contiene una carpeta con todos los archivo dentro. Una vez descomprimido el archivo zip, en la carpeta creada se pueden hacer los ejercicios (eliminando el final del nombre -plantillas).

Ejemplo de programa

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.

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.

ERROR (no puede mostrarse el objeto)
Enlace a ejemplo

Ejercicio de ejemplo resuelto

Crear el archivo .php

El primer paso es crear el archivo php que contendrá el programa. Se recomienda dar al archivo el mismo nombre del programa de ejemplo.

<?php

Copiar el código fuente HTML del ejemplo

A continuación, abrimos el ejemplo de ejercicio en una pestaña, vemos su código fuente y lo copiamos completo en nuestro programa, eliminando la etiqueta de apertura de fragmento PHP:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <title>Ejemplo de ejercicio sin formulario 1.
    Ejercicios. Programación web en 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 ejercicio sin formulario 1</h1>

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

  <table>
    <tbody>
      <tr>
       <th>Color: hsl(49, 100%, 50%)</th>
       <th>Color: hsl(352, 100%, 50%)</th>
      </tr>
      <tr>
       <td style="height: 50px; background-color: hsl(49, 100%, 50%)"></td>
       <td style="background-color: hsl(352, 100%, 50%)"></td>
      </tr>
    </tbody>
  </table>

  <footer>
    <p class="ultmod">
      Última modificación de esta página:
      <time datetime="2017-09-20">20 de septiembre de 2017</time></p>
  </footer>
</body>
</html>

Crear los fragmentos PHP necesarios

En el programa de ejemplo, hay partes de la página que permanecen siempre igual y otras que cambian cada vez que se actualiza la página. Las partes que cambian, pasamos a generarlas en un fragmento PHP (o en varios, si esas partes estuvieran muy alejadas). En el ejemplo, como las líneas en las que aparecen los códigos de colores no están muy separadas, se ha creado un único fragmento PHP:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <title>Ejemplo de ejercicio sin formulario 1.
    Ejercicios. Programación web en 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 ejercicio sin formulario 1</h1>

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

  <table>
    <tbody>
<?php
      <tr>
        <th>Color: hsl(49, 100%, 50%)</th>
        <th>Color: hsl(352, 100%, 50%)</th>
      </tr>
      <tr>
        <td style="height: 50px; background-color: hsl(49, 100%, 50%)"></td>
        <td style="background-color: hsl(352, 100%, 50%)"></td>
      </tr>
?>
    </tbody>
  </table>

  <footer>
    <p class="ultmod">
      Última modificación de esta página:
      <time datetime="2017-09-20">20 de septiembre de 2017</time></p>
  </footer>
</body>
</html>

A continuación añadimos las instrucciones print:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <title>Ejemplo de ejercicio sin formulario 1.
    Ejercicios. Programación web en 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 ejercicio sin formulario 1</h1>

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

  <table>
    <tbody>
<?php
print "      <tr>\n";
print "        <th>Color: hsl(49, 100%, 50%)</th>\n";
print "        <th>Color: hsl(352, 100%, 50%)</th>\n";
print "      </tr>\n";
print "        <tr>\n";
print "        <td style=\"height: 50px; background-color: hsl(49, 100%, 50%)\"></td>\n";
print "        <td style=\"background-color: hsl(352, 100%, 50%)\"></td>\n";
print "      </tr>\n";
?>
    </tbody>
  </table>

  <footer>
    <p class="ultmod">
      Última modificación de esta página:
      <time datetime="2017-09-20">20 de septiembre de 2017</time></p>
  </footer>
</body>
</html>

Completar el programa

Finalmente, se debe escribir el programa PHP que realice la tarea planteada.

El programa final podría ser el siguiente

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <title>Ejemplo de ejercicio sin formulario 1.
    Ejercicios. Programación web en 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 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: hsl($color1, 100%, 50%)</th>\n";
print "        <th>Color: hsl($color2, 100%, 50%)</th>\n";
print "      </tr>\n";
print "      <tr>\n";
print "        <td style=\"height: 50px; background-color: hsl($color1, 100%, 50%)\"></td>\n";
print "        <td style=\"background-color: hsl($color2, 100%, 50%)\"></td>\n";
print "      </tr>\n";
?>
    </tbody>
  </table>

  <footer>
    <p class="ultmod">
      Última modificación de esta página:
      <time datetime="2017-09-20">20 de septiembre de 2017</time></p>
  </footer>
</body>
</html>