====== 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. * [[https://techschool.murraygunn.id.au/webdev/classes/lists/4/es.php|lists.html]] * [[https://techschool.murraygunn.id.au/webdev/classes/lists/4/listsjs.php|lists.js]] * [[https://techschool.murraygunn.id.au/webdev/classes/tables/3/es.php|tables.html]] * [[https://techschool.murraygunn.id.au/webdev/classes/tables/4/cantantes.js|cantantes.js]] * [[https://techschool.murraygunn.id.au/webdev/classes/layout/2/es.php|diseño.html]] * [[https://techschool.murraygunn.id.au/webdev/classes/layout/2/style.css|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. ==== 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
a
inclusive y péguelo en 'diseno.php'.
Section 1
Section 2
Section 3
 * 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. * 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 e inclusive. Usamos 'lists.html' porque es el más completo (incluye el enlace a 'lists.js'). Document * 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'. * 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. * 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'. * 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.

¿Quién soy?

  1. Miembros de la familia
    • Padre
    • Madre
    • hermana
    • hermano
  2. Pasatiempos
    1. Música
    2. Fútbol
    3. Ciclismo
  3. Bandas favoritas
    • Shakira
    • Juanes

Lista de verificación

Lista de JavaScript

     * Tenga en cuenta que hemos agregado
    etiquetas alrededor de todo el código interno de para que se coloque correctamente. * Cree un archivo llamado 'tables.php' y agregue el siguiente código.
    Nombre Apellido Nacionalidad Edad Puesto
    David Ospina Ramírez Colombia 33 Portero
    Carlos Eccehomo Cuesta Figueroa Colombia 22 Defensa
    Juan Guillermo Cuadrado Bello Colombia 33 Centrocampista
    Radamel Falcao García Zárate Colombia 35 Delantero
    * Nuevamente, observe que hemos agregado etiquetas
    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). Tech School * 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.

    Curso de desarrollo web de Tech School

     * Guarde y cargue 'header.php' nuevamente y verifique que sus cambios se hayan aplicado a todas las páginas. ==== Codigo Final ==== * [[https://techschool.murraygunn.id.au/webdev/classes/layout/3/cabecera.es.php|cabecera.php]] * [[https://techschool.murraygunn.id.au/webdev/classes/layout/3/menu.es.php|menu.php]] * [[https://techschool.murraygunn.id.au/webdev/classes/layout/3/pie.es.php|pie.php]] * [[https://techschool.murraygunn.id.au/webdev/classes/layout/3/listas.es.php|listas.php]] * [[https://techschool.murraygunn.id.au/webdev/classes/layout/3/tablas.es.php|tablas.php]] * [[https://techschool.murraygunn.id.au/webdev/classes/layout/3/diseno.es.php|diseno.php]] * [[https://techschool.murraygunn.id.au/webdev/classes/layout/3/listas.php|resultado de listas.php]] * [[https://techschool.murraygunn.id.au/webdev/classes/layout/3/tablas.php|resultado de tablas.php]] * [[https://techschool.murraygunn.id.au/webdev/classes/layout/3/diseno.php|resultado de diseno.php]] [[es:web_development:layout:exercises|Siguiente: Ejercicios]]