En un comienzo los sitios web se resumían a unas pocas páginas estáticas desarrolladas prácticamente sólo con código Html, algunas ni siquiera tenían código Javascript y Css tampoco existía en los primeros años. Estas pocas páginas solían repetir código Html, pero esto no era demasiado problema, ya que los cambios debían ajustarse en unas 4 ó 5 páginas, y aunque no dejaba de ser redundante no era un trabajo tampoco de esclavo.
Con el tiempo y con el avance de la web los sitios pasaron a ser de simples archivos .html con imágenes a aplicaciones tan complejas como las aplicaciones de escritorio, esto llevo a buscar lenguajes de servidor como Perl, Asp, Java o PHP. El problema es que ahora las webs ya no eran estáticas, sino dinámicas y su mantenimiento empezó a requerir nuevas soluciones.
Ahora viene lo que debemos aprender cada día como programadores, lo que nos hace más prácticos a la hora de trabajar: la reutilización, esto no es fácil, pero al menos hay que intentarlo. Porque, y aunque parezca contradictorio, el programador más experimentado es aquel que cada vez escribe menos código.
Comencemos, para eso vamos a crear un nuevo proyecto en la carpeta htdocs (si instalaste Xampp) al que llamaremos ejemplo_importar_archivos, y dentro de éste vamos a crear cuatro archivos .php: index.php, facebook.php, twitter.php y google_more.php. También crearemos una carpeta llamada images y otra llamada css. Y por último una última llamada includes que de momento quedará vacía.
Y dentro del de la carpeta images vamos a copiar las siguientes imágenes (seis en total):
Y ahora vamos a entrar a la carpeta css y dentro vamos a crear un archivo llamado style.css con el siguiente código:
body {
background-color: #D4ECF8;
}
#contenedor {
background-color: #fff;
width: 900px;
margin: 0px auto 0px auto;
padding: 10px;
border: solid 1px #ccc;
box-shadow: 1px 1px 5px #000;
-moz-box-shadow: 1px 1px 5px #000;
-webkit-box-shadow: 1px 1px 5px #000;
}
header {
text-align: center;
}
nav ul{
width: 450px;
margin: 0px auto 0px auto;
}
nav li{
float: left;
width: 120px;
height: 20px;
list-style: none;
border: solid 1px #999;
margin-right: 10px;
background-repeat: no-repeat;
-moz-border-radius: 5px 15px 5px 5px;
-webkit-border-radius: 5px 15px 5px 5px;
text-align: center;
}
nav .google_mas {
background-image: url(../images/google_mas_icono.jpg);
}
nav .facebook {
background-image: url(../images/facebook_icono.jpg);
}
nav .twitter {
background-image: url(../images/twitter_icono.jpg);
}
nav a {
font-weight: bold;
color: #000;
text-decoration: none;
}
section .imagen_logo {
float: left;
width: auto;
}
section .descipcion p {
text-align: justify;
}
.clear {
clear: both;
}
Ok y ahora vamos a editar nuestro archivo index.php con el siguiente código:
<!DOCTYPE>
<html>
<head>
<title> Ejemplo importar archivos </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/style.css" rel="stylesheet" />
</head>
<body>
<div id="contenedor">
<header>
<h1> Redes sociales más populares </h1>
</header>
<nav>
<ul>
<li class="google_mas"> <a href="google_more.php"> Google+ </a> </li>
<li class="facebook"> <a href="facebook.php"> Facebook </a> </li>
<li class="twitter"> <a href="twitter.php"> Twitter </a> </li>
</ul>
<div class="clear"></div>
</nav>
<section>
<div class="descripcion">
<h2> Redes sociales </h2>
<p> Una red social es una forma de representar una estructura social, asignándole un grafo, si dos elementos del conjunto de actores (tales como individuos u organizaciones) están relacionados de acuerdo a algún criterio (relación profesional, amistad, parentesco, etc.) entonces se construye una línea que conecta los nodos que representan a dichos elementos. El tipo de conexión representable en una red social es una relación diádica o lazo interpersonal, que se pueden interpretar como relaciones de amistad, parentesco, laborales, entre otros. </p>
<p> Extraído de: <a target="_blank" href="https://es.wikipedia.org/wiki/Redes_sociales"> Wikipedia </a> </p>
</div>
<div class="clear"></div>
</section>
<hr />
<footer> <p> Ejemplo de importar archivos en PHP </p> </footer>
</div>
</body>
</html>
Bien, nada del otro mundo un simple código html con tres enlaces a otras páginas. Así que ahora seguimos, vamos a editar el código de las mismas:
google_more.php:
<!DOCTYPE>
<html>
<head>
<title> Ejemplo importar archivos </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/style.css" rel="stylesheet" />
</head>
<body>
<div id="contenedor">
<header>
<h1> Redes sociales más populares </h1>
</header>
<nav>
<ul>
<li class="google_mas"> <a href="google_more.php"> Google+ </a> </li>
<li class="facebook"> <a href="facebook.php"> Facebook </a> </li>
<li class="twitter"> <a href="twitter.php"> Twitter </a> </li>
</ul>
<div class="clear"></div>
</nav>
<section>
<div class="imagen_logo">
<img src="images/google_mas_logo.jpg" alt="Google" />
</div>
<div class="descripcion">
<h2> Google+ </h2>
<p> Google+ (pronunciado y a veces escrito Google Plus, a veces abreviado como G+, en algunos países de lengua hispana pronunciado Google Más) es un servicio de red social operado por Google Inc. El servicio, lanzado el 28 de junio de 2011, está basado en HTML5. Los usuarios tienen que ser mayores de 18 años de edad,2 para crear sus propias cuentas. Google+ ya es la segunda red social más popular del mundo con aproximadamente 343 millones de usuarios activos. </p>
<p> Google+ integra los servicios sociales, tales como Google Perfiles y Google Buzz, e introduce los nuevos servicios: Círculos, Quedadas, Intereses y Mensajes.3 Google+ también estará disponible como una aplicación de escritorio y como una aplicación móvil, pero sólo en los sistemas operativos Android e iOS. Fuentes tales como The New York Times lo han declarado el mayor intento de Google para competir con la red social Facebook,4 la cual tenía más de 750 millones de usuarios en 2011.5 El 20 de septiembre de 2011, Google permitió la creación de cuentas a usuarios con más de 18 años, con mejoras en sus extensiones de videoconferencias.6 </p>
<p> Extraído de: <a target="_blank" href="https://es.wikipedia.org/wiki/Google%2B"> Wikipedia </a> </p>
</div>
<div class="clear"></div>
</section>
<hr />
<footer> <p> Ejemplo de importar archivos en PHP </p> </footer>
</div>
</body>
</html>
facebook.php:
<!DOCTYPE>
<html>
<head>
<title> Ejemplo importar archivos </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/style.css" rel="stylesheet" />
</head>
<body>
<div id="contenedor">
<header>
<h1> Redes sociales más populares </h1>
</header>
<nav>
<ul>
<li class="google_mas"> <a href="google_more.php"> Google+ </a> </li>
<li class="facebook"> <a href="facebook.php"> Facebook </a> </li>
<li class="twitter"> <a href="twitter.php"> Twitter </a> </li>
</ul>
<div class="clear"></div>
</nav>
<section>
<div class="imagen_logo">
<img src="images/facebook_logo.jpg" alt="Facebook" />
</div>
<div class="descripcion">
<h2> Facebook </h2>
<p> Facebook (NASDAQ: FB) es una empresa creada por Mark Zuckerberg y fundada junto a Eduardo Saverin, Chris Hughes y Dustin Moskovitz consistente en un sitio web de redes sociales. Originalmente era un sitio para estudiantes de la Universidad de Harvard, pero actualmente está abierto a cualquier persona que tenga una cuenta de correo electrónico. Los usuarios pueden participar en una o más redes sociales, en relación con su situación académica, su lugar de trabajo o región geográfica. </p>
<p> Ha recibido mucha atención en la blogosfera y en los medios de comunicación al convertirse en una plataforma sobre la que terceros pueden desarrollar aplicaciones y hacer negocio a partir de la red social. </p>
<p> A mediados de 2007 lanzó las versiones en francés, alemán y español traducidas por usuarios de manera no remunerada,6 principalmente para impulsar su expansión fuera de Estados Unidos, ya que sus usuarios se concentran en Estados Unidos, Canadá y Reino Unido. Facebook cuenta con más de 900 millones de miembros, y traducciones a 70 idiomas.7 8 En octubre de 2012, Facebook llegó a los 1,000 millones de usuarios, de los cuáles hay más de 600 millones de usuarios móviles. Brasil, India, Indonesia, México y Estados Unidos son los países con el mayor número de usuarios.9 </p>
<p> Su infraestructura principal está formada por una red de más de 50 000 servidores que usan distribuciones del sistema operativo GNU/Linux usando LAMP.10 </p>
<p> El 9 de abril de 2012, se anunció que Facebook adquirió Instagram por mil millones de dólares.11 </p>
<p> Extraído de: <a target="_blank" href="https://es.wikipedia.org/wiki/Facebook"> Wikipedia </a> </p>
</div>
<div class="clear"></div>
</section>
<hr />
<footer> <p> Ejemplo de importar archivos en PHP </p> </footer>
</div>
</body>
</html>
twitter.php:
<!DOCTYPE>
<html>
<head>
<title> Ejemplo importar archivos </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/style.css" rel="stylesheet" />
</head>
<body>
<div id="contenedor">
<header>
<h1> Redes sociales más populares </h1>
</header>
<nav>
<ul>
<li class="google_mas"> <a href="google_more.php"> Google+ </a> </li>
<li class="facebook"> <a href="facebook.php"> Facebook </a> </li>
<li class="twitter"> <a href="twitter.php"> Twitter </a> </li>
</ul>
<div class="clear"></div>
</nav>
<section>
<div class="imagen_logo">
<img src="images/twitter_logo.jpg" alt="Twitter" />
</div>
<div class="descripcion">
<h2> Twitter </h2>
<p> Twitter es un servicio de microblogging, con sede en San Francisco, California, con filiales en San Antonio Texas y Boston (Massachusetts) en Estados Unidos. Twitter, Inc. fue creado originalmente en California, pero está bajo la jurisdicción de Delaware desde 2007.7 Desde que Jack Dorsey lo creó en marzo de 2006, y lo lanzó en julio del mismo año, la red ha ganado popularidad mundialmente y se estima que tiene más de 200 millones de usuarios, generando 65 millones de tuits al día y maneja más de 800.000 peticiones de búsqueda diarias.1 Ha sido apodado como el "SMS de Internet".8 Entre sus usuarios se destacan grandes figuras públicas, como Barack Obama, actores como Danny DeVito, músicos del estilo de Lady Gaga y Justin Bieber y otros mundialmente conocidos. </p>
<p> La red permite enviar mensajes de texto plano de corta longitud, con un máximo de 140 caracteres, llamados tuits, que se muestran en la página principal del usuario. Los usuarios pueden suscribirse a los tuits de otros usuarios – a esto se le llama "seguir" y a los usuarios abonados se les llama "seguidores",9 "followers" y a veces tweeps10 ('Twitter' + 'peeps', seguidores novatos que aún no han hecho muchos tweets). Por defecto, los mensajes son públicos, pudiendo difundirse privadamente mostrándolos únicamente a unos seguidores determinados. Los usuarios pueden tuitear desde la web del servicio, con aplicaciones oficiales externas (como para teléfonos inteligentes), o mediante el Servicio de mensajes cortos (SMS) disponible en ciertos países.11 Si bien el servicio es gratis, acceder a él vía SMS comporta soportar tarifas fijadas por el proveedor de telefonía móvil. </p>
<p> Extraído de: <a target="_blank" href="https://es.wikipedia.org/wiki/Twitter"> Wikipedia </a> </p>
</div>
<div class="clear"></div>
</section>
<hr />
<footer> <p> Ejemplo de importar archivos en PHP </p> </footer>
</div>
</body>
</html>
Podemos probarlo iniciando el xampp y visitando la dirección:
https://localhost/ejemplo_importar_archivos/
Bueno, ya tenemos nuestro sitio armado, ahora bien, sucede que si notaste bien hay redundancia de código en las cuatro páginas. Por ejemplo la cabecera, la botonera y el pie de página, también el contenido de la etiqueta head. Entonces si de pronto el cliente nos dice que hay que modificar cosas como agregar un nuevo enlace en las redes sociales, tendremos que abrir los cuatro archivos y modificar por igual. ¿Y si tuviésemos veinte páginas? Una locura.
Sin embargo en PHP existen cuatro funciones que nos permitirán importar archivos dentro de un .php. include, require, include_one y require_once.
Entonces volviendo a nuestra página, lo único que no se repite entre las cuatro es el contenido de la etiqueta de la etiqueta section, por tanto vamos a partir el código html en tres partes. Por un lado todo lo que está por encima de section, luego el section mismo y finalmente lo que está por debajo. Así que vamos a crear dos archivos dentro de la carpeta includes, uno llamado _header.php y otro llamado _footer.php.
Dentro de _header.php copiaremos el siguiente código:
<!DOCTYPE>
<html>
<head>
<title> Ejemplo importar archivos </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/style.css" rel="stylesheet" />
</head>
<body>
<div id="contenedor">
<header>
<h1> Redes sociales más populares </h1>
</header>
<nav>
<ul>
<li class="google_mas"> <a href="google_more.php"> Google+ </a> </li>
<li class="facebook"> <a href="facebook.php"> Facebook </a> </li>
<li class="twitter"> <a href="twitter.php"> Twitter </a> </li>
</ul>
<div class="clear"></div>
</nav>
Y dentro de footer.php:
<hr /> <footer> <p> Ejemplo de importar archivos en PHP </p> </footer> </div> </body> </html>
Y ahora dentro de index.php reemplazaremos el código por esto:
<?php include 'includes/_header.php'; ?>
<section>
<div class="descripcion">
<h2> Redes sociales </h2>
<p> Una red social es una forma de representar una estructura social, asignándole un grafo, si dos elementos del conjunto de actores (tales como individuos u organizaciones) están relacionados de acuerdo a algún criterio (relación profesional, amistad, parentesco, etc.) entonces se construye una línea que conecta los nodos que representan a dichos elementos. El tipo de conexión representable en una red social es una relación diádica o lazo interpersonal, que se pueden interpretar como relaciones de amistad, parentesco, laborales, entre otros. </p>
<p> Extraído de: <a target="_blank" href="https://es.wikipedia.org/wiki/Redes_sociales"> Wikipedia </a> </p>
</div>
<div class="clear"></div>
</section>
<?php include 'includes/_footer.php'; ?>
Como se ve el código ha quedado mucho más resumido y lo que que se repite en todas las páginas lo hemos puesto en archivos apartes. Así que podemos continuar modificando los otros tres archivos:
google_more.php:
<?php include 'includes/_header.php'; ?>
<section>
<div class="imagen_logo">
<img src="images/google_mas_logo.jpg" alt="Google" />
</div>
<div class="descripcion">
<h2> Google+ </h2>
<p> Google+ (pronunciado y a veces escrito Google Plus, a veces abreviado como G+, en algunos países de lengua hispana pronunciado Google Más) es un servicio de red social operado por Google Inc. El servicio, lanzado el 28 de junio de 2011, está basado en HTML5. Los usuarios tienen que ser mayores de 18 años de edad,2 para crear sus propias cuentas. Google+ ya es la segunda red social más popular del mundo con aproximadamente 343 millones de usuarios activos. </p>
<p> Google+ integra los servicios sociales, tales como Google Perfiles y Google Buzz, e introduce los nuevos servicios: Círculos, Quedadas, Intereses y Mensajes.3 Google+ también estará disponible como una aplicación de escritorio y como una aplicación móvil, pero sólo en los sistemas operativos Android e iOS. Fuentes tales como The New York Times lo han declarado el mayor intento de Google para competir con la red social Facebook,4 la cual tenía más de 750 millones de usuarios en 2011.5 El 20 de septiembre de 2011, Google permitió la creación de cuentas a usuarios con más de 18 años, con mejoras en sus extensiones de videoconferencias.6 </p>
<p> Extraído de: <a target="_blank" href="https://es.wikipedia.org/wiki/Google%2B"> Wikipedia </a> </p>
</div>
<div class="clear"></div>
</section>
<?php include 'includes/_footer.php'; ?>
facebook.php:
<?php include 'includes/_header.php'; ?>
<section>
<div class="imagen_logo">
<img src="images/facebook_logo.jpg" alt="Facebook" />
</div>
<div class="descripcion">
<h2> Facebook </h2>
<p> Facebook (NASDAQ: FB) es una empresa creada por Mark Zuckerberg y fundada junto a Eduardo Saverin, Chris Hughes y Dustin Moskovitz consistente en un sitio web de redes sociales. Originalmente era un sitio para estudiantes de la Universidad de Harvard, pero actualmente está abierto a cualquier persona que tenga una cuenta de correo electrónico. Los usuarios pueden participar en una o más redes sociales, en relación con su situación académica, su lugar de trabajo o región geográfica. </p>
<p> Ha recibido mucha atención en la blogosfera y en los medios de comunicación al convertirse en una plataforma sobre la que terceros pueden desarrollar aplicaciones y hacer negocio a partir de la red social. </p>
<p> A mediados de 2007 lanzó las versiones en francés, alemán y español traducidas por usuarios de manera no remunerada,6 principalmente para impulsar su expansión fuera de Estados Unidos, ya que sus usuarios se concentran en Estados Unidos, Canadá y Reino Unido. Facebook cuenta con más de 900 millones de miembros, y traducciones a 70 idiomas.7 8 En octubre de 2012, Facebook llegó a los 1,000 millones de usuarios, de los cuáles hay más de 600 millones de usuarios móviles. Brasil, India, Indonesia, México y Estados Unidos son los países con el mayor número de usuarios.9 </p>
<p> Su infraestructura principal está formada por una red de más de 50 000 servidores que usan distribuciones del sistema operativo GNU/Linux usando LAMP.10 </p>
<p> El 9 de abril de 2012, se anunció que Facebook adquirió Instagram por mil millones de dólares.11 </p>
<p> Extraído de: <a target="_blank" href="https://es.wikipedia.org/wiki/Facebook"> Wikipedia </a> </p>
</div>
<div class="clear"></div>
</section>
<?php include 'includes/_footer.php'; ?>
twitter.php:
<?php include 'includes/_header.php'; ?>
<section>
<div class="imagen_logo">
<img src="images/twitter_logo.jpg" alt="Twitter" />
</div>
<div class="descripcion">
<h2> Twitter </h2>
<p> Twitter es un servicio de microblogging, con sede en San Francisco, California, con filiales en San Antonio Texas y Boston (Massachusetts) en Estados Unidos. Twitter, Inc. fue creado originalmente en California, pero está bajo la jurisdicción de Delaware desde 2007.7 Desde que Jack Dorsey lo creó en marzo de 2006, y lo lanzó en julio del mismo año, la red ha ganado popularidad mundialmente y se estima que tiene más de 200 millones de usuarios, generando 65 millones de tuits al día y maneja más de 800.000 peticiones de búsqueda diarias.1 Ha sido apodado como el "SMS de Internet".8 Entre sus usuarios se destacan grandes figuras públicas, como Barack Obama, actores como Danny DeVito, músicos del estilo de Lady Gaga y Justin Bieber y otros mundialmente conocidos. </p>
<p> La red permite enviar mensajes de texto plano de corta longitud, con un máximo de 140 caracteres, llamados tuits, que se muestran en la página principal del usuario. Los usuarios pueden suscribirse a los tuits de otros usuarios – a esto se le llama "seguir" y a los usuarios abonados se les llama "seguidores",9 "followers" y a veces tweeps10 ('Twitter' + 'peeps', seguidores novatos que aún no han hecho muchos tweets). Por defecto, los mensajes son públicos, pudiendo difundirse privadamente mostrándolos únicamente a unos seguidores determinados. Los usuarios pueden tuitear desde la web del servicio, con aplicaciones oficiales externas (como para teléfonos inteligentes), o mediante el Servicio de mensajes cortos (SMS) disponible en ciertos países.11 Si bien el servicio es gratis, acceder a él vía SMS comporta soportar tarifas fijadas por el proveedor de telefonía móvil. </p>
<p> Extraído de: <a target="_blank" href="https://es.wikipedia.org/wiki/Twitter"> Wikipedia </a> </p>
</div>
<div class="clear"></div>
</section>
<?php include 'includes/_footer.php'; ?>
De este modo nosotros estamos aprendiendo que una de las cosas más importantes en la creación de aplicaciones web, la reutilización de código, no repetir cinco mil veces lo mismo.
Si ahora el cliente nos pide que debemos agregar, modificar o quitar algún contenido lo haremos en un archivo y no en cuatro o cincuenta.
Diferencias entre include, require, include_once y require_once
Por empezar todas tienen el mismo fin, importar un archivo externo, ya sea un .php, .html,.xml, etc. Comencemos:
include
Esta función intentará importar un archivo, ahora bien, puede ser que ese archivo no exista porque lo han borrado o está mal escrito, en ese caso nos devolverá un error de tipo Warning. Esto significa que al no encontrar el archivo habrá una advertencia pero el script continuará. Por ejemplo:
<?php include 'archivo_que_no_existe.php'; echo 'La vida continua'; ?>
Ahora bien, los tipos de errores independientemente de que sean Notice, Warning o Fatal error no deberían estar. En este caso el include no romperá el script pero más adelante puede pagarse caro. Por ejemplo:
<?php include 'archivo_que_no_existe.php'; funcionQueNuncaSeCargo(); echo 'La vida continua'; ?>
En este caso en la primer línea intenta cargar un archivo donde se supone que existe una función, el archivo no existe, y como se cargó con include no mostrará un Warning, el script sigue, pero en la siguiente línea se intenta llamar a una función que tampoco existe, ya que se supone que esa función estaba en el archivo. Y ahí sí, CHAU, se rompió el script definitivamente mostrando por pantalla un Fatal error y la última línea nunca se ejecuta.
require
Esta función es más estricta, si el archivo no lo encuentra tira un Fatal error y ahí se rompe el script:
<?php require 'archivo_que_no_existe.php'; echo 'La vida continua'; ?>
En este caso en la primer línea se rompe el script y la segunda nunca se ejecuta.
include_once
Hará lo mismo que include, si no encuentra el archivo devolverá un Warning, la única diferencia es que la importación del archivo la hará una vez, aunque el archivo se llame muchas veces. Por ejemplo si hacemos esto:
<?php include 'archivo_externo.php'; include 'archivo_externo.php'; ?>
Esto cargará dos veces y si se llamará a esa función con ese archivo cincuenta veces se cargará cincuenta veces también.
Ahora si usamos include_once:
<?php include_once 'archivo_externo.php'; include_once 'archivo_externo.php'; ?>
En este caso el archivo se cargará en la primer línea, pero la segunda no hará nada, ya que ese archivo con ese nombre ya ha sido cargado previamente en la primer línea.
require_once
En esta caso sucederá lo mismo que include_once, require_once importará un archivo, y se vuelve a llamar a esta función con el mismo archivo no hará nada. Pero al igual querequire, de no encontrar el archivo se romperá el script con un Fatal error.
En los cuatros casos si el archivo no es encontrado nos devolverá un error, Warning en el caso de include y include_once y Fatal error en el caso de require y require_once.
Anterior: Aprendiendo PHP, parte 14: Errores
Siguiente: Aprendiendo PHP, parte 16: Introducción a formularios (métodos GET y POST)