ProInf.net

Páginas dinámicas (también llamadas páginas activas)

¿Qué son y para qué sirven?

• Utilizaremos páginas PHP dónde antes utilizabamos páginas HTML
• Las páginas PHP tienen incorporado un lenguaje de programación propio. El código PHP se ejecuta en el servidor. Es decir:
  • El código no se ejecuta en el cliente (en nuestro caso en el navegador Firefox).
  • El código se ejecuta en un módulo PHP del servidor web Apache.
• Con PHP podemos realizar consultas y actualizaciones sobre la base de datos MySQL.
  • Con las consultas podemos obtener distintos informes aplicando distintos filtros y ordenaciones. Por ejemplo podríamos mostrar los artículos de deportes ordenados por fecha en orden descendente.
  • Con las actualizaciones podemos añadir, modificar y borrar registros (o filas) de las tablas de nuestra base de datos MySQL. Todo esto normalmente se realiza a través de formularios HTML.
• La base de datos, así como el servidor web, se encuentra en el ordenador SERVIDOR.
• Al navegador web (al Firefox) de la página PHP sólo le llega el código HTML. El código PHP genera código HTML. Por eso si hacemos "Menú→Ver Código fuente" en el Firefox sólo vemos HTML y nada del PHP.

Tecnologías principales de páginas dinámicas

Si compramos un hospedaje para nuestro dominio la empresa nos ofrecerá nos alternativas principalmente: Una con Linux y PHP y otra con Windows y ASP.

Como empresas que ofrecen hospedaje tenemos por ejemplo a nominalia.es y arsys.es

Pasos a seguir para realizar páginas dinámicas PHP

1. Bajar un producto WAMP como el EasyPHP que nos instala todo en uno el Apache, MySQL y PHP.
2. Ver cómo funciona el servidor web Apache y cómo configurarlo en Dreamweaver
3. Ver cómo funciona el servidor de base de datos MySQL y cómo conectar con él en Dreamweaver
4. En Dreamweaver crear las páginas PHP y utilizar los botones de "Aplicación" y las ventanas de "Base de datos", de "Vinculaciones" y de "Comportamientos del servidor" para generar todo el código.

Herramientas requeridas

Estos son los programas que vamos a necesitar:

• Adobe (antes Macromedia) Dreamweaver (software privativo). Es el programa que usaremos para crear y diseñar el sitio web.
• Un navegador web, por ejemplo Mozilla Firefox (software libre).
• Un sistema WAMP, LAMP o MAMP dependiendo de qué sistema operativo tengamos: Microsoft Windows, GNU/Linux o Apple Mac/OS.

Nos vamos a decantar por un sistema WAMP puesto que Dreamweaver sólo funciona en Microsoft Windows.

Podemos instalar por separado uno por uno el Apache, MySQL y PHP o podemos decidirnos por una aplicación WAMP que haga este trabajo por nosotros. La ventaja de la aplicación WAMP es que todos los programas están ya integrados y su configuración está centralizada.

He probado dos aplicaciones WAMP que funcionan más o menos igual.

• EasyPHP → Se puede poner en español.
• Wamp server → Tiene más opciones.

Nos bajamos el que nos parezca y lo instalamos en el ordenador. Una vez que arranque este programa nos mostrará una ventana indicando que el servidor Apache y el servidor MySQL están en marcha (los semáforos son de color verde). Le damos al botón de minimizar y vemos que aparece un pequeño icono al lado de la hora. Si pulsamos ahí con el botón primario o secundario del ratón nos mostrará un menú con las opciones disponibles.

Ahora vamos a dedicarnos a ver qué podemos hacer con las nuevas herramientas que poseemos.

Uso del Apache

El Apache es el servidor web. El navegador web (pongamos que Mozilla Firefox) se comunica con el servidor web. El navegador pide páginas web (archivos html, jpg, gif, png, css, etc) y el servidor web le va proporcionando los ficheros. El navegador web se comunica con el servidor web utilizando el protocolo HTTP. Dicho protocolo es un lenguaje entre dos ordenadores para que se puedan entender. Uno de los ordenadores hace el papel de cliente y el otro de servidor. Este protocolo está especializado en transferir páginas web. El protocolo HTTP suele usar el puerto de comunicaciones 80.

Pasos a seguir:

• Para que funcione el Apache nos hemos de asegurar que la aplicación WAMP está funcionando y que el semáforo que indica el servicio del Apache está de color verde
• Hemos de conocer dónde está la carpeta del sitio web que está sirviendo el Apache
  • EasyPHP → c:\Archivos de programa\EasyPHP\www
  • Wamp Server → c:\wamp\www
  Los archivos que hay en la carpeta www se pueden borrar con total libertad.
• En Dreamweaver configuraremos nuestro sitio web, iremos a la categoría Servidor de pruebas y suministraremos la siguiente información:
  • Modelo del servidor → MySQL PHP
  • Acceso → Local o red
  • Ruta servidor → La ruta completa de la carpeta www.
• Hay que copiar todos los archivos de nuestro sitio a la carpeta www. Para ello en Dreamweaver subiremos nuestro sitio al servidor de pruebas:
  • En la panel Archivos (Menú→Ventana→Archivo) seleccionamos la vista Servidor de pruebas (carpetas de color rojo)
  • Luego seleccionamos la Vista Local (carpetas de color verde)
  • Seleccionamos la carpeta raíz y le damos al botón colocar (flecha azul que apunta hacia arriba)
• Una vez subido el sitio debemos comprobar que el Apache está sirviendo el sitio web que hemos subido a la carpeta www. En el Firefox vamos a la dirección http://localhost o bien a http://127.0.0.1 Para estar seguro que estamos viendo la página actual, tendremos que pulsar el botón de recargar del navegador.
  • Notas adicionales:
    • Si estamos en una red local podríamos poner cómo dirección el nombre del ordenador: http://nombre
    • Si queremos que nuestro servidor se vea desde Internet necesitamos saber cual es nuestra IP pública en Internet. Desde un ordenador en Internet y conociendo esta dirección IP podremos ver el sitio web que está sirviendo nuestro Apache. Si estamos en una red local tendremos que configurar el router para que redirija las peticiones web (las que vienen por el puerto 80) al ordenador que esté corriendo el Apache (la IP local del ordenador). Si tenemos un cortafuegos nos hemos de asegurar que no nos esté bloqueando el puerto 80 (el cortafuegos puede encontrarse en el sistema operativo y en el router). Si tenemos IP dinámica podríamos probar no-ip para evitar el uso directo de nuestra IP pública.

Uso de MySQL

Diseño de la base de datos

Antes de nada hemos de pensar el diseño de la base de datos que queremos crear.

• Nombre de la base de datos → blog
• Cotejamiento (Collation) → Uno que ponga Spanish: latin1_spanish_ci o utf8_spanish_ci
• Campos de la tabla articulos:
  

  Nombre	Tipo de datos	Obligatorio	Indice
  id	INT (autoincrement)	NOT NULL	PRIMARY KEY
  titulo	VARCHAR(100)	NOT NULL
  contenido	TEXT	NOT NULL
  fecha	DATE	NOT NULL
  categoria	VARCHAR(50)	NOT NULL

• Campos de la tabla comentarios:
  

  Nombre	Tipo de datos	Obligatorio	Indice
  id	INT (autoincrement)	NOT NULL	PRIMARY KEY
  autor	VARCHAR(50)	NOT NULL
  comentario	TEXT	NOT NULL
  articulo_id	INT	NOT NULL

• En el nombre de la base de datos, de las tablas y de los campos conviene escribir todo en minúsculas, sin acentos, sin la eñe, sin caracteres especiales y además usar el símbolo guión bajo "_" en vez del espacio en blanco.
• El nombre de la tabla se escribe en plural y el nombre de los campos en singular.
• Toda tabla ha de tener cómo primer campo el id que es un número entero (sin decimales) y autoincremental que sirve para identificar cada registro. Por ejemplo: a cada artículo de la tabla artículos le corresponderá un número único. Así podremos estar seguro de a qué artículo de todos los que hay nos estamos refiriendo.
• Hay que observar que en la tabla comentarios se encuentra el campo articulo_id que sirve para saber a qué artículo corresponde cada comentario. Esto es una relación entre ambas tablas.

Pasos a seguir

• Nos aseguramos que está funcionando el servidor MySQL, para ello observamos que nos dice nuestra aplicación WAMP, que se encuentra iconizado cerca de la hora.
• Iremos al phpMyAdmin y allí crearemos la base de datos con sus tablas y campos. El phpMyAdmin lo encontraremos en http://localhost/mysql/ o picando en el programa WAMP. (En vez del phpMyAdmin podríamos usar el MySQL Administrator que se encuentra en la web oficial del MySQL). Podemos ver capturas de pantalla de la creación del la tabla artículos y de la tabla comentarios. El código SQL sería:

  CREATE DATABASE blog; 
  USE blog;
  CREATE TABLE articulos (
    id int NOT NULL auto_increment,
    titulo varchar(100) NOT NULL,
    contenido text NOT NULL,
    fecha date NOT NULL,
    categoria varchar(50) NOT NULL,
    PRIMARY KEY  (id)
  );
  CREATE TABLE comentarios (
    id int NOT NULL auto_increment,
    autor varchar(50) NOT NULL,
    comentario text NOT NULL,
    articulo_id int(11) NOT NULL,
    PRIMARY KEY  (id)
  );
  

• Una vez hemos finalizado podremos cerrar sin ningún problema el phpMyAdmin.
• Es bueno saber donde paran los archivos de la base de datos. Se encuentran en la carpeta data: "c:\Archivos de programa\EasyPHP\mysql\data" o bien "c:\wamp\mysql\data".
• Hasta que no creemos una política de seguridad en nuestro MySQL el usuario es root sin contraseña.

Uso de PHP con la ayuda de Dreamweaver

continuará...