Introducción Al Desarrollo Web (IDESWEB) Autor CORE
Introducción Al Desarrollo Web (IDESWEB) Autor CORE
Introducción Al Desarrollo Web (IDESWEB) Autor CORE
1. Objetivos
Aprender a instalar y configurar la plataforma de desarrollo web XAMPP.
2. Recursos
¿Cómo se instala y configura XAMPP?
XAMPP for Windows1 : sitio web oficial de esta plataforma software para el desarrollo de apli-
caciones web.
Apache HTTP Server Documentation2 : documentación del servidor web Apache disponible
en múltiples formatos.
Notepad++6 : editor gratuito de código fuente que soporta varios lenguajes de programación.
Entre otras características, posee sintaxis coloreada, envoltura de sintaxis y autocompletado.
Sublime Text7 : excelente editor compatible con múltiples lenguajes de programación y disponible
para Windows, OS X y Linux; se puede probar de forma gratuita, pero para un uso continuo hay
que adquirir una licencia.
1
3. ¿Qué tengo que hacer?
En esta práctica tienes que instalar y configurar XAMPP, una plataforma de desarrollo de aplicaciones
web que incorpora el servidor web Apache, el sistema gestor de bases de datos MySQL y los lenguajes de
programación PHP y Perl9 . A partir de ahora, usaremos XAMPP para desarrollar y probar la aplicación
web que estás desarrollando.
Por otro lado, tienes que dividir la estructura de las páginas de tu sitio web en múltiples ficheros y
tienes que utilizar PHP para combinarlos en uno solo. Detecta la partes que sean comunes a diferentes
páginas de tu sitio web (por ejemplo, la cabecera con el título, la barra de navegación y el pie de página)
y ponlas en ficheros independientes. De este modo te puedes crear una plantilla a partir de la cual se
genera cualquier página web de tu sitio web.
Además, tienes que programar con PHP las páginas web que reciban los datos enviados a partir de
los formularios que has realizado en las prácticas anteriores. Por ahora, estas páginas simplemente tienen
que mostrar los datos recibidos para comprobar que todo funciona correctamente. En próximas prácticas
almacenarás estos datos en una base de datos.
En concreto, tienes que modificar o crear las páginas que se indican con un color de relleno oscuro en
la Figura 1.
Página control de acceso No es una página visible. Controla el acceso a la parte privada para los
usuarios registrados. Por ahora, se debe limitar el acceso a dos posibles usuarios cuyos datos están
9 En concreto, la versión 1.8.3 para Windows contiene, entre otras cosas, Apache HTTPD 2.4.4, MySQL 5.6.11, PHP
2
almacenados directamente en esta página (en una próxima práctica se accederá a una base de datos
para consultar los usuarios permitidos). Si el usuario está registrado, mediante una redirección en la
parte del servidor se debe mostrar la página con el menú de usuario registrado; si el usuario no está
registrado, mediante una redirección en la parte del servidor se debe mostrar la página principal
del sitio web.
Página menú usuario registrado Contiene las funciones que puede realizar un usuario registrado:
modificar sus datos, darse de baja, visualizar sus álbumes y crear un álbum nuevo.
Página “Crear álbum” Contiene un formulario con los datos necesarios para crear un álbum (título,
descripción, fecha y país).
Respuesta “Página con el formulario de registro como nuevo usuario” Muestra los datos que
el usuario ha introducido en el formulario de registro.
Página con el listado resultado de una búsqueda Además del ejemplo de resultado de una bús-
queda que ya contiene (datos estáticos), muestra los datos que el usuario ha introducido en el
formulario de búsqueda.
Página detalle foto Además del ejemplo de detalle de la foto seleccionada en la página anterior (datos
estáticos: foto, título, fecha, país, álbum de fotos y usuario al que pertenece), muestra el identificador
de la foto que se recibe del listado resultado de una búsqueda o desde la página principal.
3.1. Nota
La parte privada de la aplicación y su integración con la parte pública la puedes plantear de varias
formas. Dos formas típicas son:
Separada La parte privada es completamente independiente de la parte pública, posee su propio menú
o barra de navegación e incluso puede poseer su propio estilo visual (CSS). Evidentemente, debe
existir una opción en el menú o barra de navegación que permita pasar de la parte pública a la
parte privada y viceversa.
Integrada La parte privada se integra como una opción más en el menú o barra de navegación de la
parte pública. La parte privada aparece como un apartado más de la parte pública, que sólo está
disponible cuando el usuario se ha identificado.
En la realización de esta práctica puedes aplicar cualquiera de estas dos estrategias o cualquiera
similar.
Por ejemplo, en el gestor de contenidos WordPress se emplea una solución mixta. Cuando un usuario
propietario de un blog no se ha identificado, el usuario visualiza el blog como cualquier otro usuario
(Figura 2).
Cuando el propietario se identifica (Figura 3), accede a la parte privada de WordPress (Figura 4), en
la que el propietario tiene acceso a todas las opciones para administrar su blog: entradas, comentarios,
apariencia, plugins, usuarios, etc. La parte privada no guarda ninguna relación con la parte pública: la
estructura y la presentación de la página es totalmente diferente.
Cuando el propietario regresa a la parte pública del blog, si sigue identificado (no ha pulsado en
“Cerrar sesión”) sobre el blog se muestra una barra de herramientas que le permite acceder a ciertas
opciones de administración directamente desde la parte pública (compara la Figura 2 con la Figura 5).
Estas opciones son realmente accesos rápidos o atajos a las opciones correspondientes en la parte
privada del blog (Figura 6).
4. ¿Cómo lo hago?
4.1. XAMPP
XAMPP es una aplicación portable que no necesita instalación, aunque puede ser instalada con un
instalador si así se desea. Al ser una aplicación portable se pueden trasladar de un ordenador a otro
sin perder datos y sin tener que realizar complicadas reconfiguraciones. En la página de XAMPP hay
disponibles varias versiones para descargar: Installer, ZIP archive y Selfextracting 7-ZIP archive. Para el
propósito de lograr una instalación portable podemos emplear cualquiera de las dos últimas.
3
Figura 2: Parte pública de un blog en WordPress cuando el usuario no está identificado
4
Figura 4: Parte privada de WordPress
Figura 5: Parte pública de un blog en WordPress cuando el usuario sí que está identificado
5
Figura 6: Parte privada de WordPress
Una vez descomprimido (se recomienda instalarlo en la raíz de una unidad, por ejemplo C:\xampp o
D:\xampp), se tiene que ejecutar desde la línea de comandos el fichero setup_xampp.bat para configurar
correctamente los directorios de ejecución de cada aplicación. Si la configuración se realiza correctamente,
debe aparecer en pantalla:
Una vez configurado, se deben iniciar el servidor web Apache y el sistema gestor de bases de datos
MySQL. Para ello existen varias formas, pero las dos más comunes son:
Ejecutar desde la línea de comandos el fichero xampp_start.exe: esta ventana no se debe cerrar
mientras se esté utilizando XAMPP, tal como indica el mensaje que se muestra al ejecutar este
fichero (ver Figura 7). Se debe emplear xampp_stop.exe para detener los servicios de Apache y
MySQL, si los servicios se detienen correctamente aparecerá un mensaje similar al mostrado en la
Figura 8.
Ejecutar el programa xampp-control.exe: inicia un panel de control de XAMPP (ver Figura 9)
que se quedará activo en la barra de tareas hasta que se cierre pulsando el botón Quit. Para iniciar
cada servicio simplemente se tiene que pulsar sobre el botón Start correspondiente. Para detener
cada servicio pulsar sobre el botón Stop correspondiente.
Estas dos formas de iniciar los servidores son equivalentes, por lo que, o se emplea una forma o la otra.
Si se emplea la primera forma con xampp_start.exe, al iniciar el panel de control de XAMPP deberían
de aparecer los puertos que se están utilizando y los identificadores de proceso PID de los servicios Apache
y MySQL.
6
Figura 7: Inicio de XAMPP desde la línea de comandos
7
Require all granted
</Directory>
Por ejemplo, en la Figura 10 se muestra una plantilla sencilla para un sitio web, donde la estructura
y contenido de todas las páginas se ha dividido en cinco partes: la cabecera (que contiene la declaración
de XML, el DOCTYPE y el <head> de la página), el inicio (que contiene el logotipo, el título del sitio
web, la barra de navegación principal y el cuadro de buscar), el control de acceso a la parte privada (que
quizás sólo aparezca en la página principal), el contenido principal de la página y el pie de la página. A
continuación se muestra el código de una posible página con esta estructura:
12 http://httpd.apache.org/docs/2.2/mod/core.html#directory
8
<?php
// Título de la página, se muestra en <title> y en el cuerpo de la página con <h2>
$title = "El título de esta página";
// Declaración de XML, DOCTYPE, <html>, <head>, <meta>, <link>, etc.
// Contiene <title><?php echo $title; ?></title>
require_once("cabecera.inc");
// Inicio de la página
// Contiene <body>
// Muestra logotipo, título del sitio web, barra de navegación principal,
// cuadro de buscar, etc.
// Contiene <h2><?php echo $title; ?></h2>, con <h1> está marcado el título
// del sitio web
require_once("inicio.inc");
<p>
Esto es lo que cambiará de una página a otra.
</p>
<?php
// El pie de la página: copyright, declaración legal, dirección de correo, etc.
// Contiene </body></html>
require_once("pie.inc");
?>
9
Deportes:
<select name="deportes[]" multiple="multiple">
<option value="1">Baloncesto</option>
<option value="2">Fútbol</option>
<option value="3">Paddle</option>
<option value="4">Tenis</option>
</select>
<br />
<input type="submit" value="Enviar" />
<input type="reset" value="Borrar" />
</p>
</form>
</body>
</html>
Los controles están etiquetados como nombre, apellidos y deportes[]. Este último control tiene
los corchetes para que desde PHP se pueda procesar correctamente como un array de valores, ya que la
lista desplegable tiene el atributo multiple y permite seleccionar varios valores a la vez. El formulario se
envía mediante HTTP POST a la página formulario.php.
La página formulario.php simplemente muestra los datos recibidos, para ello emplea la función
print_r() que permite visualizar todo el contenido de un array de una forma legible; también se emplea
$_POST para mostrar directamente el contenido de los controles nombre y apellidos:
echo "\n";
echo "Contenido de \$_POST:\n";
print_r($_POST);
echo "\n";
echo "Contenido de \$_REQUEST:\n";
print_r($_REQUEST);
?>
</pre>
<p>
Nombre: <b><?php echo $_POST["nombre"];?></b>
<br />
Apellidos: <b><?php echo $_POST["apellidos"];?></b>
</p>
</body>
</html>
Recuerda que para que estás páginas funcionen se tienen que almacenar dentro del directorio \xampp\htdocs;
todo lo que se almacene en este directorio es accesible a través de la dirección http://localhost/ a tra-
vés de un navegador. Si se abre de forma local una página web en el navegador (aparece algo como
C:\xampp\htdocs\formulario.html en la barra de direcciones), la página no será ejecutada por el ser-
vidor web y el navegador recibirá el código PHP. Recuerda también que las páginas que contengan código
10
PHP tienen que tener la extensión .php13 .
4.5. Redirección
Para realizar una redirección en el lado del servidor se emplea la función header() de PHP que permite
enviar encabezados HTTP directamente al navegador. La redirección se realiza enviando el encabezado
Location: con la URL de la página a la que se quiere redirigir.
La llamada a la función header() se tiene que hacer antes de que la página haya generado cualquier
resultado. Un simple espacio en blanco o un salto de línea ocasionará un error: el BOM del formato
de codificación UTF-8 producirá un error, por lo que se recomienda almacenar las páginas PHP con el
formato “UTF-8 sin BOM”.
En el siguiente fragmento de código se muestra cómo usar la función header() para realizar una
redirección:
<?php
/* Redirecciona a una página diferente que se encuentra en el directorio actual */
$host = $_SERVER[’HTTP_HOST’];
$uri = rtrim(dirname($_SERVER[’PHP_SELF’]), ’/\\’);
$extra = ’paginaDestino.php’;
header("Location: http://$host$uri/$extra");
exit;
?>
HTTP 1.114 obliga a utilizar URL absolutas cuando se realiza una redirección. Para obtener una URL
absoluta se emplean $_SERVER[’HTTP_HOST’] que devuelve el nombre del servidor, $_SERVER[’PHP_SELF’]
que devuelve la ruta relativa al fichero actual que se está ejecutando (por ejemplo, si el fichero se encuentra
en http://ejemplo.com/directorio/test.php devolverá /directorio/test.php) y dirname() que
devuelve la parte correspondiente al directorio indicado en una ruta a un fichero.
5. Recomendaciones
En el artículo “Install portable WAMP (Windows, Apache, MySQL, PHP)” 15 se explica cómo realizar
una instalación portable de XAMPP, de forma que la puedas mover de un ordenador a otro sin problemas
(por ejemplo, hacer una instalación en una memoria USB). Si tienes algún problema con XAMPP, consulta
“XAMPP for Windows FAQ” 16 .
Cuando instales XAMPP en un ordenador, el principal problema que puedes tener es que ya exista
algún programa que esté enlazado a los mismos puertos que utiliza XAMPP, como puede ser un servidor
web o una instalación previa de MySQL. Si existe este problema, cuando intentes iniciar XAMPP apare-
cerá un error como el mostrado en la Figura 11 donde se indica que no es posible enlazarse al puerto 80
porque ya está ocupado.
Para comprobar si los puertos están ocupados puedes emplear varios métodos. El propio panel de
control de XAMPP (ver Figura 9) dispone de una opción llamada Netstat que muestra el estado de todos
los puertos utilizados en el sistema. Por ejemplo, en la Figura 12 se puede ver que los puertos 80 (HTTP)
y 443 (HTTPS) que necesita el servidor web Apache y el puerto 3306 que necesita MySQL no están
utilizados, están disponibles. Cuando se activan estos dos servicios, si se vuelve a verificar el estado de los
puertos se comprueba que en los puertos 80 y 443 aparece el proceso httpd.exe (Apache) y en el puerto
3306 el proceso mysqld.exe.
Si se cambian los puertos que emplea Apache, se pueden tener dos o más servidores web en ejecución
en el mismo ordenador al mismo tiempo. Para ello, es necesario modificar el fichero httpd.conf que
se encuentra en el directorio \xampp\apache\conf y el fichero httpd-ssl.conf que se encuentra en
\xampp\apache\conf\extra.
En el fichero httpd.conf buscamos las siguientes líneas y cambiamos el puerto 80 por otro puerto
(normalmente se suele poner 8080):
13 El servidor web Apache se puede configurar para que interprete como fichero PHP ficheros con otras extensiones.
14 http://www.w3.org/Protocols/rfc2616/rfc2616.html
15 http://vibgyorlife.com/tech/article.aspx?xcatid=42
16 http://www.apachefriends.org/en/faq-xampp-windows.html
11
Figura 11: Error al inicio de XAMPP desde la línea de comandos
Listen 80
ServerName localhost:80
En el fichero httpd-ssl.conf buscamos las siguientes líneas y cambiamos el puerto 443 por otro
puerto (por ejemplo, 4443):
Listen 443
ServerName localhost:443
Para comprobar el estado de los puertos, también podemos utilizar el comando netstat del sistema
operativo Microsoft Windows (con los parámetros -a -b -n), que muestra el estado de todas las cone-
xiones de red. Por ejemplo, en la Figura 14 podemos observar que por un lado está enlazado el proceso
inetinfo.exe (el servidor web Internet Information Server de Microsoft) a los puertos 80 y 443, y por
otro lado apache.exe está enlazado a los puertos 4443 y 8080 (se han cambiado los puertos de Apache
porque ya estaban en uso por Internet Information Server).
¡Cuidado! Skype puede utilizar los puertos 80 y 443 para las conexiones entrantes17 , así que puedes
tener problemas con XAMPP y Skype.
Recuerda que XAMPP es una plataforma de desarrollo y no está orientada a ser usada en producción,
ya que no está configurada para obtener un máximo rendimiento y puede tener problemas de seguridad.
El manual de PHP te lo puedes descargar en diferentes formatos de su sitio web18 para tenerlo siempre
a mano y poder hacer las búsquedas de información rápidamente. También puedes acceder a través de
Internet a la ayuda de cualquier función de PHP escribiendo el nombre de la función a continuación de la
URL http://php.net/. Por ejemplo, http://php.net/header muestra la ayuda de la función header().
Si estás escribiendo correctamente el código XHTML, habrás puesto al principio de cada página la
declaración de XML19 :
Esta declaración puede ocasionar un error, ya que en PHP también se emplean los símbolos <? para
indicar el inicio del código PHP20 , por lo que el intérprete de PHP toma la declaración de XML como un
fragmento de código PHP y muestra el siguiente mensaje de error al intentar interpretarlo:
Este problema se puede solucionar de dos formas. La primera supone modificar el fichero php.ini de
configuración del intérprete de PHP para desactivar el uso de <?. En el caso de XAMPP, este fichero está
alojado en el directorio \xampp\apache\bin y se tiene que poner a Off el parámetro de configuración
short_open_tag:
17 ¿Qué puertos debo abrir para poder usar el Skype en Windows?: https://support.skype.com/es-es/faq/FA148/que-
puertos-debo-abrir-para-poder-usar-el-skype-en-windows
18 http://www.php.net/download-docs.php
19 Si estás usando HTML5 para escribir las páginas web, todo lo que se explica a continuación no se aplica.
20 No se aconseja utilizar esta sintaxis para escribir el código PHP porque puede ser que esté desactivada.
12
Figura 12: Estado de los puertos según la opción Netstat de XAMPP Control Panel
; Allow the <? tag. Otherwise, only <?php and <script> tags are recognized.
; NOTE: Using short tags should be avoided when developing applications or
; libraries that are meant for redistribution, or deployment on PHP
; servers which are not under your control, because short tags may not
; be supported on the target server. For portable, redistributable code,
; be sure not to use short tags.
short_open_tag = Off
o también:
13
Figura 13: Estado de los puertos según la opción Netstat de XAMPP Control Panel
Esta forma es la única solución que podemos emplear en aquellas situaciones donde no podamos
modificar el fichero php.ini.
14
Figura 14: Estado de los puertos según netstat
15