Desarrollo Web Lección 5 - Diseño
- Mantener la Consistencia con PHP

Desarrollo Web Lección 5 - Diseño

Mantener la Consistencia con PHP

Objetivo

En esta actividad, usaremos PHP para separar nuestras páginas en partes, algunas que cambian y otras que permanecen consistentes entre páginas, de modo que podamos reutilizar partes consistentes para facilitar los cambios.

Configuración

Trabajaremos en todos los archivos de su directorio raíz, así que asegúrese de que estén actualizados.
lists.html
lists.js
tables.html
cantantes.js
diseño.html
style.css

PHP

Si desea tener la capacidad de personalizar su sitio para sus clientes (piense en Amazon recomendando artículos particulares en función de lo que compró anteriormente o Facebook mostrando publicaciones de sus amigos), entonces necesitará un código que se ejecute en un servidor para acceder a una base de datos y proporcionar esos datos.
Los scripts del lado del servidor más utilizados son Node.js, Net.data, Python y PHP. Usaremos PHP, pero le invitamos a probar otros para ver si son mejores para sus necesidades.
El código PHP tiene muchas similitudes con Javascript, por lo que no tendrás que aprenderlo todo dos veces.
Para ser procesado por el servidor, todo el código PHP debe estar en un archivo con la extensión '.php', que puede incluir código HTML y PHP.
Su servidor necesita una forma de diferenciar PHP del resto de su código para que no lo envíe todo al cliente. Para ello, encerramos todo el código PHP en los siguientes símbolos.

<?php
    TU CÓDIGO VA AQUÍ
?>

Incluir (include)

Antes de adentrarnos en las profundidades de PHP, comencemos con algo simple, pero muy poderoso en sus capacidades de ahorro de tiempo.
Imagine que tiene veinte páginas (o más) para administrar en lugar de solo las tres que tenemos en esta carpeta hasta ahora. Ahora imagine que su jefe/cliente acaba de pedirle que cambie el número de teléfono de la empresa, que aparece en la parte inferior de cada página. Tendrías que hacer el cambio veinte veces, luego revisar cada página para asegurarte de que lo hiciste correctamente. Así es como se cometen errores.
En cambio, ¿no sería mejor tener un lugar para cambiar esos datos y cada página haría referencia a ese lugar? PHP nos permite separar nuestras páginas en partes y reutilizarlas donde queramos.
Cree un nuevo archivo llamado 'diseno.php'. Esto reemplazará nuestro archivo 'layout.html'.
Copie todo desde <main> a </main> inclusive y péguelo en 'diseno.php'.

    <main>
        <div class="contenido">Section 1</div>
        <div class="contenido">Section 2</div>
        <div class="contenido">Section 3</div>
    </main>

Esta página ahora incluye todo el contenido único de la página, pero ¿cómo obtenemos el resto?
En la parte superior de este archivo, agregue el siguiente código.

<?php
    include("cabecera.php");
    include("menu.php");
?>

Esto agregará todo el código en los archivos 'cabecera.php' y 'menu.php'.
Podríamos haber llamado a los archivos 'cabecera.html' y 'menu.html', pero es posible que queramos incluir código PHP en estos archivos en el futuro, por lo que es mejor acostumbrarse a nombrar todos los archivos HTML con el extensión '.php'.
Ahora cree un archivo llamado 'header.php' y agregue el código de 'lists.html' entre <!DOCTYPE html> e <body> inclusive. Usamos 'lists.html' porque es el más completo (incluye el enlace a 'lists.js').

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="lists.js"></script>
</head>
<body>

Ahora necesitaremos hacer lo mismo para el menú y el pie de página.
Cree archivos llamados 'menu.php' y 'pie.php'.
Agregue el siguiente código a 'menu.php'.

<nav>
    <ul>
        <li><a href="listas.php">Listas</a></li>
        <li><a href="tablas.php">Tablas</a></li>
        <li><a href="diseno.php">Diseño</a></li>
    </ul>
</nav>

Copie las últimas tres líneas de 'layout.html' en 'pie.php'. Usamos 'layout.html' porque su pie de página es el más completo.

    <footer>
        <h3>Pie de página</h3>
    </footer>
</cuerpo>
</html>

Todavía no hemos incluido 'pie.php' en nuestra página, así que hagámoslo ahora. Agrega el siguiente código al final de 'diseno.php'.

<?php
    include("pie.php");
?>

Guarde todos los archivos.
¿Puedes ver lo que hará el servidor? Pondrá todas las piezas juntas (en el orden que le indiquemos) y las enviará al cliente como un solo archivo llamado 'layout.php'.
Nuestro LiveServer no puede procesar PHP, por lo que necesitaremos cargarlo en un servidor para verlo funcionar.

Herramientas: FileZilla

Hay muchos programas que puede usar para cargar su código en un servidor, pero usaremos FileZilla porque funciona en todas las plataformas.
Inicie FileZilla.
Haz clic en la flecha hacia abajo justo debajo del menú “Editar” en la parte superior izquierda. Esto abre una lista de servidores.
Seleccione 'webdev' de la lista. Esto debería conectarlo al servidor y llenará los paneles en el lado derecho. Si esto no sucede, pida ayuda.
La parte superior de la pantalla es un historial de acciones realizadas en FileZilla.
La parte inferior es una lista de archivos que se están transfiriendo (o historial si cambia de pestaña).
La parte del medio se divide con su PC local a la izquierda y el servidor (“sitio remoto”) a la derecha.
En el lado izquierdo, busque su directorio.
En el lado derecho, busque el nombre de su clase y cree un directorio con su nombre debajo. Aquí es donde guardará sus archivos.
Navegue a ese directorio.
Ahora seleccione todos los archivos y el directorio 'proyecto' en el lado izquierdo. Haga clic derecho y seleccione 'Cargar' para copiar sus archivos al servidor. Si no ve que sus archivos aparecen en el lado derecho, solicite ayuda.
Para ver su página, cambie a su navegador y navegue a https://bibliolabs.murraygunn.id.au/TUCLASE/TUNOMBRE/layout.php reemplazando TUCLASE y TUNOMBRE con los nombres de directorio apropiados. Si su página no se ve bien, pedir ayuda.

Título

Ahora hagamos lo mismo para 'lists.html' y 'tables.html'.
Cree un archivo llamado 'listas.php' e ingrese el siguiente código.

<?php
    include("cabecera.php");
    include("menu.php");
?>
    <main>
        <h2>¿Quién soy?</h2>
        <ol>
            <li>Miembros de la familia
            <ul>
                <li>Padre</li>
                <li>Madre</li>
                <li>hermana</li>
                <li>hermano</li>
            </ul>
            </li>
            <li>Pasatiempos
            <ol>
                <li>Música</li>
                <li>Fútbol</li>
                <li>Ciclismo</li>
            </ol>
            </li>
            <li>Bandas favoritas
            <ul>
                <li>Shakira</li>
                <li>Juanes</li>
            </ul>
            </li>
        </ol>

        <h2>Lista de verificación</h2>
        <ul>
            <li><input type="checkbox" name="harina" onchange="toggleCheckbox('harina')">100 g de harina</li>
            <li><input type="checkbox" name="huevos" onchange="toggleCheckbox('huevos')">2 huevos</li>
            <li><input type="checkbox" name="leche" onchange="toggleCheckbox('leche')">300 ml de leche</li>
        </ul>

        <h2>Lista de JavaScript</h2>
        <ol></ol>
    </main>
<?php
    include("pie.php");
?>

Tenga en cuenta que hemos agregado <main> etiquetas alrededor de todo el código interno de <body> para que se coloque correctamente.
Cree un archivo llamado 'tables.php' y agregue el siguiente código.

<?php
    include("cabecera.php");
    include("menu.php");
?>
<main>
    <table>
        <thead>
          <tr>
            <th>Nombre</th>
            <th>Apellido</th>
            <th>Nacionalidad</th>
            <th>Edad</th>
            <th>Puesto</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>David</td>
            <td>Ospina Ramírez</td>
            <td>Colombia</td>
            <td>33</td>
            <td>Portero</td>
          </tr>
          <tr>
            <td>Carlos Eccehomo</td>
            <td>Cuesta Figueroa</td>
            <td>Colombia</td>
            <td>22</td>
            <td>Defensa</td>
          </tr>
          <tr>
            <td>Juan Guillermo</td>
            <td>Cuadrado Bello</td>
            <td>Colombia</td>
            <td>33</td>
            <td>Centrocampista</td>
          </tr>
          <tr>
            <td>Radamel Falcao</td>
            <td>García Zárate</td>
            <td>Colombia</td>
            <td>35</td>
            <td>Delantero</td>
          </tr>
        </tbody>
    </table>
</main>
<?php
    include("pie.php");
?>

Nuevamente, observe que hemos agregado etiquetas <main> para posicionar correctamente el contenido.
Cargue estos dos archivos en el servidor y verifique que se vean correctos.
Observe también el 'título' en la pestaña, que actualmente dice 'Documento'.
Ahora cambia el título en 'cabecera.php' de 'Documento' a 'Tech School' (o lo que quieras).

    <title>Tech School</title>

Guarde y cargue 'header.php' y vea todas las páginas en su navegador.
Observe que el título ha cambiado de 'Documento' a 'Escuela técnica' en todas las páginas. PHP hace que sea muy fácil cambiar elementos en su sitio de manera consistente.
Arreglemos también nuestro Título. En 'header.php' agregue un título de sitio adecuado.

    <header>
        <h1>Curso de desarrollo web de Tech School</h1>
    </header>

Guarde y cargue 'header.php' nuevamente y verifique que sus cambios se hayan aplicado a todas las páginas.

Codigo Final

Siguiente: Ejercicios

Table of Contents