Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de PHP

PHP: imprescindible para crear páginas web de modo profesional

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

4. Traspasar datos (I)

4.1 Incluir archivos

Manejar datos

Lo que realmente le da utilidad al lenguaje PHP es poder trabajar con datos, insertandolos, borrándolos o cambiándolos de forma dinámica en una misma página, de manera que se pueda cambiar su contenido sin tener que cambiar toda la página.

Imagina una página de un periódico, o de una cadena de televisión. Estas páginas están actualizando los datos varias veces al día. Otras páginas como en tiendas o pequeños negocios, también necesitan actualizar sus datos con frecuencia (por ejemplo la disponibilidad de artículos o los precios).

Hay por lo tanto unas partes de la página que cambian con frecuencia, mientras que otras permanecen siempre iguales. Podemos para ello separar la página en varios archivos, los cuales los juntamos mediante el código PHP. De esta manera variaremos sólo las partes que cambian, no teniendo que reescribir toda la página en cada actualización.

Incluir archivos en el código PHP

Dentro de un sitio web la mayoría de las páginas tienen muchas partes iguales, por ejemplo, en este mismo sitio que estás viendo, la cabecera, el pie de página y el menú lateral se repiten en casi todas las páginas. Para crear el sitio debemos repetir el código de estas secciones en todas las páginas.

Con php podemos guardar este código en un archivo aparte, de manera que con una simple referencia, el código se incluye en la página. Esto tiene la ventaja de que si cambiamos el código del archivo, se cambia en todas las páginas en las que tiene la referencia. No tenemos que ir página por página cambiando el código de la cabecera, por ejemplo, sino que sólo hay que cambiarlo en el archivo de referencia.

La forma de incluir un archivo externo en la página con PHP es la siguiente:

<?php
require("ruta_archivo");
?>

Donde pone ruta_archivo escribiremos la ruta para abrir ese archivo, de la misma manera que haríamos con un enlace o una etiqueta tipo link.

El archivo de referencia será un archivo creado mediante el editor de textos, y que tendrá unicamente el código que se quiera insertar en ese punto de la página. La extensión del archivo de referencia puede ser .html o .php dependiendo del tipo de código a insertar.

Hay que tener en cuenta que lo que insertamos es un trozo de código, y no una página, por lo que en el archivo de referencia no habrá etiquetas de apertura de página, o de cabecera o cuerpo (etiquetas html, head o body). Lo que escribamos en el archivo de referencia será incluido en el código HTML de la página desde la primera a la última letra.

También podemos incluir un archivo externo de la misma manera que el anterior mediante el código:

<?php
include("ruta_archivo");
?>

Este código funciona igual que el anterior, pero además es el único que PHP admite si está incluido dentro de una estructura condicional (en temas posteriores veremos qué es esto), es decir, si la inclusión o no del código depende de una condición indicada previamente.

Aunque el código puede incluir varios archivos, al navegador se manda un sólo archivo HTML, por lo que si hay código en CSS o Javascript en la página, este será interpretado igualmente en los archivos de referencia, tal como si estuviera en la misma página.

La ventaja de usar este método es que podemos dividir la página en varias secciones, y trabajar en cada una de ellas independientemente, sin tener que usar frames u otro tipo de particiones. La página aunque la hayamos construido por partes, llegará al navegador como una sola unidad.

Ejemplo de página con archivos de referencia.

La siguiente página de ejemplo se compone de varios archivos. Un archivo principal, otro archivo con el código CSS y varios archivos de referencia.

Puedes examinarla, copiarla en tu editor de textos y comprobar cómo funciona.

Todos los archivos debemos copiarlos en una subcarpeta que crearemos, llamada por ejempo "micarpeta", dentro de la carpeta "htdocs" del directorio de XAMPP. La ruta, si XAMPP está instalado en el directorio por defecto sera: C\XAMPP\htdocs\micarpeta\principal.php. Al archivo principal lo llamaremos "principal.php".

Para verlo en el navegador, debemos escribir la dirección: "localhost/micarpeta/principal.php" .

Este es el archivo principal (principal.php):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Página con archivos de referencia.</title> 
<link rel="stylesheet" type="text/css" href="principal.css" />
</head>
<body>
<?php  
require("cabecera.html");
require("menu.html");
?>
<div id="contenido">
<h2>Titulo de esta sección</h2>
<p>Este es el contenido principal de la página.  el cual se 
mostrará en este compartimento.</p>
<p>Este sitio está dividido en secciones, con  lo cual 
cada sección tendrá un contenido principal distinto de los 
demás, sin embargo tanto la cabecera, como el menú lateral como 
el pie de página serán iguales en todas las páginas del sitio.</p>
<p>Es por eso por lo que para construirlo, tanto la cabecera, como el 
menú lateral, como el pie de página están escritos en un archivo aparte, 
 el cual se incluye en el codigo mediante una referencia en PHP.</p>
<br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<?php  
include("pie.html")
?>
</body>
</html>
 

El archivo lo guardaremos con el nombre y extensión "principal.php". En color azul se ha desacado el código PHP de la página, y en color verde el enlace o link al archivo CSS.

El archivo CSS es el siguiente y su nombre y extensión sera "principal.css".

*  { margin: 0; }
/*diseño cabecera*/
#cabecera { background-color: #66ccff; }
#cabecera h1 { font: bold 1.7em Verdana; text-align: center; padding:0.5em; }
#cabecera h2 { font: bold 1.4em Verdana; text-align: center; padding:0.5em; }

/*diseño menú*/
#menu  {float: left; width: 20%; background-color: #ffccff;}
#menu h3 {font: bold 1.2em arial; text-align: center; padding: 0.5em; }
#menu p {padding: 0.5em 1.5em; }
#menu a {text-decoration: none; color:#003399; font:1em arial; }
#menu a:hover {color:#006600; }

/*diseño contenido*/
#contenido {float: left; width: 80%; }
#contenido h2 {font: bold 1.4em arial; text-align: center; padding: 1em; }
#contenido p {font: 1em arial; text-align: justify; padding: 0.5em 3em; }

/*diseño de pie de página*/
#pie {clear: both; background-color: #ccffcc; }
#pie p {font: 1.1em arial; text-align: justify; padding: 0.5em 4em; }

El cógigo PHP hace referencia a tres archivos los cuales son los siguientes:

Archivo "cabecera.html", el cual incluye la cabecera de la página:

<div id="cabecera"> 
<h1>Título de la página</p>
<h2>Subtítulo explicativo</h2>
</div>

El segundo archivo es "menu.html", en el cual incluye el menú lateral izquierdo a la página:

<div id="menu">
<h3>Apartados</h3>
<p><a href="#">Sección 1</a></p>
<p><a href="#">Sección 2</a></p>
<p><a href="#">Sección 3</a></p>
<p><a href="#">Sección 4</a></p>
</div>

El tercer archivo es el que incluye el pie de página. se llama "pie.html":

<div id="pie">
<p>Este es el pie de página, aquí se suele incluir alguna referencian al autor
o propietario de la página.</p>
<p>También su dirección de correo o alguna forma de contacto que puedan tener 
los usuarios con el mismo (Facebook, otras redes sociales, o foros en los que 
se pueden participar).</p>
</div>

Fíjate que los archivos de referencia contienen únicamente el código a insertar, insertándolo exactamente en el punto en el que está su referencia, y formando parte de la página de tal forma que el código CSS del archivo principal se aplica a estos archivos de la misma manera que al archivo principal.

En el navegador, siguiendo la ruta indicada anteriormente, verás la página de la siguiente manera:

Página con archivos de referencia

En la siguiente página veremos cómo pasar variables de una página a otra mediante enlaces.

Pasar variables por URL.

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com