Curso de PHP: Nivel Básico – Clase 6. PHP y HTML

En lo que va del curso de PHP hemos visto bastantes conceptos sobre este lenguaje de servidor. Sin embargo, quienes lo estén siguiendo pueden estar preguntándose cómo es que PHP se utiliza para hacer páginas webs. Bueno, eso es natural dado que hasta aquí sólo hemos abordado aspectos de programación que son bastante genéricos.

En esta clase llega el momento de mezclar un poco de PHP con HTML y CSS para entender cómo es que se puede maquetar y programar un sitio web. Entiéndase por maquetar el disponer de los elementos de una página web de forma que sea atractivo desde el punto de vista del diseño. Se trata de ubicar cada bloque desde la programación en el lugar que el diseñador ha designado.

Para dominar la maquetación es necesario tener profundos conocimientos de HTML y CSS. En este curso no abordamos ese tema así que lo que use de estas tecnologías en estos ejemplos estará explicado por encima. Si les interesa el tema pueden buscar mucha más información en internet.

Los temas de PHP que vamos a abordar en este artículo son: el pasaje de variables vía GET y las funciones require, require_once y sus primas hermanas, las include e include_once.

Un sitio web de ejemplo

Para poder entender los conceptos vamos a utilizar un ejemplo. Se trata de una página web ficticia de una empresa llamada Compumundo Hiper Mega Red. Vamos a crear este espacio que tendrá tres secciones: home o página principal, una página de servicios y otra de contacto.

Hasta el momento sólo trabajábamos con un archivo de PHP. Llegó el momento de expandirnos para trabajar con más. En este ejemplo necesitaremos una estructura de carpetas y archivos como se muestra en la siguiente imagen.

archivos

Esto es necesario debido a que las páginas webs no se arman en un único archivo. Se busca dividirla en partes que sean reutilizables. Para que tengan una idea lo que vamos a hacer, el archivo index.php cargará una plantilla de HTML donde según la necesidad se le cargarán algunas partes adicionales.

Por lo general, una página web promedio tienen un encabezado, también llamado header, una barra lateral o sidebar, una sección principal y un pie que se puede llamar footer. Por cada una de esas partes crearemos un archivo PHP. Además, agregaremos tantas páginas como secciones tengamos. Si identificamos alguna parte que se repite y que podría ser reutilizable, bien podría también tener una página propia.

En la carpeta CSS, están los archivos de estilo que sirven para ubicar los elementos HTML y para darle formato al texto y a toda la página.

Método GET y pasaje de variables

Hay dos métodos para pasar variables de una página a otra en PHP: uno se llama POST y el otro GET. Al primero le prestaremos atención en una clase más adelante. En general, se explican juntos dado que su función es similar, pero yo prefiero diferenciarlos para que luego no se los confundan.

Hasta aquí, en lo que va del curso, hemos trabajado con variables siempre dentro de un mismo script de PHP, es decir, dentro de una misma página. No ha sido posible, hasta ahora, enviar información de una página a otra.

A partir de ahora este pasaje de datos empieza a ser posible. GET es un método que trae PHP que sirve para que un script obtenga el valor de una o varias variables. En base a ese valor podremos realizar cálculos o tomar decisiones.

Pero veamos mejor cómo es el funcionamiento de GET. Es muy fácil pasarle variables a una página a través de este método. Incluso lo podemos hacer utilizando el navegador. En el campo de dirección, donde se encuentra escrita la URL de la web, podemos agregar al final un signo de pregunta ? seguido del nombre de una variable, un signo igual = y un valor. Veamos un ejemplo

http://ejemplo/index.php?numero=25

Si forzamos la carga de la página presionando ENTER, el script ahora recibirá como variable vía GET una variable llamada numero cuyo valor es 25.

¿Y cómo se hace desde el script para usar esa variable? Se usa la forma $_GET[‘nombre_de_la_variable’]. Por ejemplo, si quisiéramos imprimir el valor de la variable numero haríamos:

Si se reciben valores por GET, no es obligatorio usarlos. Si quisiéramos pasar más variables, hay que usar el signo & para separarlas. Veamos un ejemplo de esto:

http://ejemplo/index.php?nombre=Juan&apellido=Perez&edad=54

Si luego quisiéramos mostrar los datos de forma prolija haríamos:

Mostrar los datos pasados es algo que se usa mucho, pero también hay una utilidad muy importante: para tomar decisiones. Veamos cómo siguiendo el ejemplo anterior:

Como ven, podemos chequear la edad de la persona. En este caso, si es menor que 18 le mostramos un mensaje. Acabamos de implementar un filtro parental, muy rústico es verdad, pero filtro al fin.

Entonces, ya sabemos que agregándole código a la dirección de la web en la que estamos podemos pasar variables por GET. Pero, ¿cómo hace un usuario? No va a estar escribiendo cosas raras en la barra de dirección de su navegador. Claro que no. La forma en que lo hace el usuario es haciendo click en los hipervínculos.  Para ello, los programadores tenemos que construir links que hagan uso de GET.

Si estamos en un archivo a.php y queremos pasar variables utilizando un link a otro archivo, llamado b.php podemos hacer lo siguiente:

Se construye un link en HTML con la etiqueta <a></a> y luego se le agrega la información que se quiere pasar en el atributo href, al final de la URL. El usuario no notará diferencia, sólo verá un enlace que lo lleva a B. El script b.php puede hacer uso de esa variable y de esta manera hacer algo distinto según su valor. Así es como funcionan las llamadas webs dinámicas.

Página principal

Empecemos viendo el código de ejemplo. El archivo index.php tiene la estructura básica de una página HTML.

<?php
if (!isset($_GET[‘sec’]))
$seccion = null;
else
$seccion = $_GET[‘sec’];

?>

Esta página, que será la que cargará todo el contenido de la web recibirá una variable por GET. Esta variable sirve para cargar distintas partes de la página, según el valor que tenga. Al principio del archivo hacemos un filtrado. Con isset() comprobamos si la variable está llegando, si no lo hace utilizamos null para evitar que PHP produzca una advertencia al intentar usarla sin tener ningún valor previo. Además, le pasamos el valor a $seccion, que es una variable común y más sencilla de manejar, pero podríamos haber usado la misma $_GET[‘sec’].

Como verán en distintas partes del script, usamos estructuras condicionales para chequear qué valor tiene y en base a eso, mostrar partes partes del código. Por ejemplo, en la sección <head></head> cargamos la hoja de estilo que corresponde con la sección en la que se está:

En la sección principal de la página cargamos las partes que nos interesan. Recuerden que cada sección del sitio está en una página distinta. Aprovechando esto, se utiliza la función require o require_once que lo que hacen ambas es cargar en su lugar el script que están llamando. Es decir que es una invocación a otro archivo, que se pega automáticamente en el lugar del require.

La diferencia entre require y require_once es que la segunda no permite que se cargue dos veces el mismo archivo. Por ejemplo, si tuviéramos un require dentro de un bucle que se ejecuta diez veces, el código al que invoca se pegaría en ese lugar diez veces. Ahora, si en vez de usar require usáramos require_once, entonces sólo  se pegaría una vez. Es útil cuando existen dependencias entre más de dos scripts y no queremos que ninguno de ellos se cargue más de una vez.

Otra opción es utilizar include ó include_once. La diferencia es que si include no encuentra el archivo que se invoca, PHP muestra una advertencia (warning) y el programa se sigue ejecutando. Por el contrario, si require no encuentra el archivo, interrumpirá la ejecución con un error.

La diferencia entre include e include_once es exactamente la misma que entre require y require_once.

Entonces, en cada parte del código donde encuentren un require_once o require, sabrán que allí se está cargando el script del archivo que se está invocando.

El sidebar

La barra lateral es la que tiene los enlaces y cada vínculo incluye la variable que se pasa con GET y su correspondiente valor.

Noten que la página destino (o página b.php, como la llamábamos antes) es la misma página. Es decir, se puede enviar información de una página a otra, incluso a sí misma.

Al cambiar el valor de sec y combinarlo con los require_once, lo que estaremos haciendo es elegir qué parte de la página ir cargando a medida que el usuario hace click en los enlaces.

Otras partes de la web

El resto de los archivos contienen las partes de la web. Como verán, no son archivos completos de HTML, es decir, no tienen todas las partes (head, body, etc.), sino sólo los elementos que se necesitan.

El encabezado, header.php es HTML puro:

El pie que corresponde al archivo footer.php también:

Para la sección contacto (contacto.php) hay un formulario de ejemplo que no hace nada.

Bucle con require

A la sección servicios le agregué algo especial. Veamos el código:

Hay un bucle for que se repite 12 veces y dentro hay un require que carga producto.php. Veamos cómo es este archivo:

HTML puro que se repetirá dentro del bucle. Esta es una buena ocasión para probar la diferencia entre require y require_once. Si aquí se usara require_once solo, el archivo producto aparecería una sola vez, a pesar de estar dentro de un bucle.

Lo que quiero mostrar con este bucle es la potencia que tiene PHP. Aquí repetimos código sin mucho sentido, pero, generalmente se baja una consulta de una base de datos y se utiliza una estructura iterativa para mostrar elementos utilizando una única plantilla, que en este ejemplo es el archivo producto.php.

Ejemplo funcionando y código fuente

pagina-ejemplo

Pueden encontrar el ejemplo funcionando aquí. Los archivos fuente, los pueden encontrar a continuación:

index.php
header.php
sidebar.php
servicios.php
producto.php
footer.php
contacto.php

Si quieren ver los archivos CSS:

css/principal.css
css/contacto.css
css/servicios.css 

Ejercitación

La idea para esta clase es tratar de armar una página web dinámica utilizando GET, es decir, poder reproducir el ejemplo que hemos visto y realizarle alguna modificación. Será necesario tener un manejo aunque sea mínimo de CSS para poder maquetar las páginas.

Bibliografía

  • Zend PHP5 Certification Study Guide de Davey Shafik con Ben Ramsey, php architect nanobooks
Soy programador web y me desempeño como Líder Técnico en Polar Bear Development. Trabajo con tecnologías como PHP, Javascript, MySQL y HTML5 para el desarrollo de sitios y sistemas web. Me especializo en Zend Framework 2 y otros frameworks MVC, como también en WordPress y otros CMS. Lidero equipos de desarrolladores trabajando con Scrum. Vivo en Buenos Aires, Argentina.
 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


*