1

FUNDACIÓN UNIVERSITARIA DEL ÁREA ANDINA CENTRO DE EDUCACIÓN A DISTANCIA

PROGRAMA TÉCNICO PROFESIONAL EN SISTEMAS

ASIGNATURA: IMPLEMENTACIÓN DE AMBIENTES WEB PAGINAS DINÁMICAS CON CONEXIÓN A BASES DE DATOS.

UNIDAD SEIS: PRELIMINARES Y REQUISITOS

INTRODUCCIÓN.

El presente taller se orienta al desarrollo de aplicaciones Web dinámicas desde las cuales

se puede acceder a una base de datos y realizar consultas, inserción, actualización y

eliminación de registros. Las tareas adelantadas en las unidades relacionadas con el

manejo de MySQL resultan muy útiles aquí, por ejemplo lo que atañe a la instalación del

software requerido y la creación y manejo de bases de datos. Antes de entrar en materia

respecto a la creación de páginas dinámicas, se requiere laconfiguración de un servidor de

aplicaciones Weby la conexión de una aplicación a una base de datos; la configuración del

servidor se realizó al momento de la instalación del software en torno al trabajo con

MySQL. Dada la importancia de las páginas dinámicas, resulta conveniente presentar a

continuación un resumen de conceptos relacionados.

CONCEPTOS PRELIMINARES

Presentamos aquí un conjunto de conceptos relacionados con el contexto de páginas

dinámicas, esto con el fin de aportar claridad sobre las actividadesprácticas a desarrollar.

Aplicaciones Web:Una aplicación Web es un sitio que aloja páginas cuyo contenido a

mostrar no está definido en su totalidad, este contenido se define por una aplicación con

base en parámetros de la solicitud del usuario. Dado que el contenido varía en función de

las acciones del visitante, este tipo de página se conoce como páginas dinámicas.Las

aplicaciones Web se crean en respuesta a diversas necesidades o problemas. Algunos de

los usos de las aplicaciones Webson:

Permitir a los usuarios la localización de información en un sitio Web que se almacena

grancantidad de contenido.

2

Recoger, guardar y analizar datos suministrados por los visitantes de los sitios.

Permitir guardar datos,tomados del diligenciamiento deformularios, en una base de

datos, tomar datos de una base de datos y crear informes, por ejemplo las páginas de

de servicios en línea de los bancos.

Términos empleados en el contexto de las aplicaciones Web:A continuación citamos

algunos términos de uso frecuente relacionados con el contexto de las aplicaciones Web,

su comprensión nos ha de ser de mucha utilidad en el desarrollo de los apartes del

presente taller.

Servidor Web: Software que suministra páginas Web en respuesta a solicitudes

hechas por usuarios a través de un navegador o cliente Web, la solicitud de una página

se genera cuando el usuario hace clic en un vínculo de una página Web en el

navegador, o escribe un URL en el cuadro de texto de dirección del navegador.

Servidor de aplicaciones:Software que ayuda al servidor Web a procesar páginasque

contienen scripts o etiquetasdel lado del servidor. Cuando se solicita al servidor una

página de este tipo, el servidor Web pasa la página al servidorde aplicaciones para su

procesamiento antes de enviarla al navegador. Entre los servidores de aplicaciones

más comunes figuran ColdFusion y PHP. Para efectos del desarrollo de este taller

utilizaremos PHP.

Páginas Web estáticas:Páginas, alojadas en el hardware asociado a un servidor Web,

cuyo contenido ha sido preestablecido por su diseñador, el código HTML no cambia

una vez colocado en el servidor y se muestra al usuario en el navegador tal y como fue

diseñada. Cuando el servidor Web recibe una solicitud de página estática, lee la

solicitud, localiza la página y la envía al navegador solicitante.

Páginas Web dinámicas:Como señalamos antes, son páginas cuyo contenido a

mostrar no está definido en su totalidad y es definido por la aplicación Web mediante

algún proceso en función de los parámetros de la solicitud del usuario, por ejemplo, el

usuario podría solicitar información específica sobre un tema en particular, o solicitar

sólo información de su interés de todo un cúmulo de información almacenada en una

3

base de datos. Puede decirse que una página dinámica es “personalizada” por el

servidor de aplicaciones antes de ser enviada a unnavegador.

Tecnología de servidor:Tecnología que utiliza un servidor de aplicaciones para

modificar páginas dinámicas en tiempo de ejecución.

El esquema de siguiente resume las etapas de solicitud/respuesta de páginas estáticas

y dinámicas. Nótesela diferencia en cuanto a la necesidad de un servidor de

aplicaciones en el proceso asociado a páginas dinámicas.

Aplicaciones Web con acceso a una base de datos: Señalamos anteriormente que un

servidor de aplicaciones, permite trabajar con recursos del lado del servidor, ejemplo de

estos recursos pueden ser las bases de datos, en este contexto, mediante una página

dinámica se puede indicar a un servidor de aplicaciones que tome datos de una base de

datos y los inserte en el código HTML de la página a mostrar, también se puede usar la

página para insertar datos en la base de datos.

4

Algunos términos empleados en el contexto de bases de datos:Recordamos a

continuación algunos términos en relación a las bases de datos.

Base de datos: Conjunto de datos almacenados en tablas. Cada fila de una tabla

constituye un registro de datos, y cada columna constituye un campo del registro.

Controlador de base de datos:Software intérprete entre una aplicación Web y una

base de datos. Los datos de una base de datos se almacenan en un formato propio de

dicha base de datos. El controlador de base de datos permite a la aplicación Web leer y

manipular datos.

Sistema de administración de base de datos (DBMS o Database Manager

System):Software utilizado para crear y administrar bases de datos. Ya anteriormente

en esta asignatura hemos tenido la oportunidad de trabajar con el DBMS MySQL.

Consulta de base de datos:Operación orientada a visualizar, modificar, insertar o

eliminar datos de una base de datos. Una consulta se crea con base en un conjunto de

criterios expresados en lenguaje SQL (StructuredQueryLanguage o lenguaje de

consulta estructurado).

Conjunto de registros (Recordset):Conjunto de datos extraídos o tomados de una o

varias tablas de una base de datos.

Base de datos relacional:Base de datos que contiene varias compartiendo datos.

En el ámbito de páginas dinámicas con acceso a bases de datos,el servidor de

aplicaciones se comunica con la base de datos a través de un controlador que actúa como

intérprete entre el servidor de aplicaciones y la base de datos. Establecida la

comunicación, se ejecuta la consulta en la base de datos y se crea un conjunto de

registros. El conjunto de registros se devuelve al servidor de aplicaciones, que emplea los

datos para completar la página. El esquema siguiente resume el proceso de consulta de

base de datos y envío de los datos al navegador:

5

En el desarrollo de robustas aplicaciones empresariales, generalmente se usa bases de

datos basadas en servidor, como las que pueden crearse mediante las herramientas

Microsoft SQL Server, Oracle 9i o MySQL. Si la base de datos se encuentra en un sistema

distinto del servidor Web, se requiere el establecimiento de una adecuada conexión.

REQUISITOS PARA CREAR APLICACIONES WEB CON INTERACTÚEN CON BASES

DE DATOS:

La creación de aplicaciones Web que interactúen con bases de datos, además de la

herramienta de diseño de páginas Web, exige el siguiente conjunto de requisitos:

Software de servidor Web.

Software de servidor de aplicaciones que se ejecute en el servidor Web.

Software DBMS o sistema de bases de datos

Controlador de base de datos compatible con la base de datos

6

Software de servidores Web:Un servidor Web Puede estar instalado en un equipo

diferente al que usamos para acceder a una página Web o en el mismo equipo local desde

el cual accedemos a una página. El nombre del servidor corresponde a la carpeta raíz del

servidor, una página Web almacenada en la carpeta raíz del servidor se puede abrir

mediante un URL de la forma:

http://nombre_de_servidor/nombre_de_archivo.

Por ejemplo, si el nombre del servidor es mi_servidory una página llamada

index.htmlestá almacenada en la carpeta del servidor, la página se puede abrir

introduciendo el URLhttp://mi_servidor/index.html.Si por ejemplo una página llamada

recursos.htmlse encuentra en una carpeta llamada “aplicación” y esta última está en la

carpeta del servidor, entonces recursos.html se puede abrir mediante la URL:

http://mi_servidor/aplicacion/index.html.

En los casos en que el servidor y la página Web a la que queremos acceder se encuentren

en el mismo equipo, se puede usar, en lugar del nombre del servidor, la palabra

localhosto la dirección 127.0.0.1.Por ejemplo, si la instalación del servidor se hace en la

carpeta appserv/www del equipo local, y en ella guardamos una carpeta “aplicación”

que contiene una página index.html, podemos acceder a index mediante alguna de estos

URL:

http://localhost/aplicacion/index.html.

http://127.0.0.1/aplicacion/index.html

Para fines de desarrollo y prueba de aplicaciones Web, es común instalar un servidor de

pruebas en el equipo local.

Software de servidor de aplicaciones:Un servidor de aplicaciones es una aplicación de

software que ayuda a un servidor Web a procesar páginas dinámicas, estos servidores

tecnologías comoColdFusion, ASP y PHP, generalmente la elección de un servidor de

aplicaciones toma encuenta, entre otros aspectos, la tecnología de servidor. Por ejemplo,

unservidor de aplicaciones basado en tecnología de servidor PHP, ejecuta instrucciones

de código escritas mediante el uso del lenguaje PHP.

7

Sftware de SGBD:Las bases de datos pueden tener formatos distintos según la cantidad

y la complejidad de los datos quealmacenan. La elección de una base de datos

debeconsiderar aspectos como el presupuesto económico y elnúmero de usuarios que se

espera accedan a la base de datos. Existen SGBD de de gama alta que son de costosa

adquisición y administración. Otros son más sencillos y económicos, como Microsoft

Access o la base de datos de código fuente abierto MySQL.

IMPLEMENTACIÓN PRÁCTICA.

El desarrolloe implementación práctica del módulo contempla las siguientes tareas:

Instalación del software requerido.

Creación de una base de datos de prueba.

Configuración del entorno de desarrollo.

Diseño básico de la aplicación.

Instalación de software requerido:Para la creación de la aplicación Web dinámica se

hace uso de la herramienta Adobe Dreamweaver CS5, no describimos aquí la instalación

de esta herramienta asumiendo la familiaridad del estudiante con ello, igualmente se ha de

utilizarApache HTTPservercomo servidor Web, PHPcomo servidor de aplicaciones y

MySQL como sistema gestor de base de datos, estos últimos son los componentes del

paquete Appserv,instalado previamente en relación con el trabajo sobre MySQL.

AppServcontiene también la herramienta phpMyAdmin,la cual permite crear y manejar

bases de datos desde un entorno gráfico.

Creación de una base de datos mediante phpMyAdmin.

El manejo de bases de datos lo realizamos antes desde la línea de comandos de

MySQL, en este aparte trabajaremos valiéndonos de phpMyAdmin,las bases de datos

creadas pueden ser usadas en prácticas de conexión.En este ejercicio nos valemos

phpMyAdmin con fines de agilidad y su uso no sustituye la necesidad de manejo del

lenguaje SQL.Para iniciar phpMyAdmin,en el campo de direcciones del navegador

escribimos http://localhost,con lo cual aparece una ventana similar a la siguiente:

8

Desde esta ventana seleccionamos la opción resaltada, (phpMyAdminDatabase

Manager Version 2.10.3, o uno similar según la versión instalada). Con la opción

seleccionada nos aparece la ventana solicitando el nombre de usuario y contraseña, este

es el nombre dado al momento de instalar el softwareAppserv.

9

Luego del ingreso de credenciales pulsamos Aceptar, con lo cual aparece en pantalla la

ventana inicial de phpMyAdmin,que se muestra en el siguiente apartado:

Creación de la base de datos prueba.

Aquí podemos observar, como lo hemos resaltado, la sección que nos permite crear una

nueva base de datos y elegir el cotejamiento. En este punto procedamos a crear una

base de datos con el nombre prueba, escribiendo pruebaen el campo correspondiente,

el valor de cotejamiento recomendado es utf-8_spanish_ci, con el cual se mantiene la

compatibilidad con todos los caracteres del alfabeto en castellano, podemos acceder a

esa opción mediante el respectivo desplegable. Al pulsar el botón Crear podemos ver la

10

ventana de la siguiente imagen, que nos indica que la base de datos ha sido creada. El

cero (0) al lado del nombre indica que la base de datos no tiene tabla alguna.

Creación de la tablas en la base de datos prueba:En este ejercicio creamos tres tablas,

con los nombres pais,departamento y ciudad;primero creamos la tabla país con 3

campos que definimos en las secciones correspondientes a Nombre y Número de campos,

antes mostrados.Al pulsar el botón Continuarse ve la pantalla para definir los campos de

la tabla a crear. En este caso definimos los siguientes campos de la tabla país,con sus

propiedades:

codigopais: de tipo entero (INT), sin signo (UNSIGNED), no permitir valores nulos

(notnull), auto incremental (auto_increment) y que sea la llave primaria de la tabla.

nombre: de tipo VARCHAR, de longitud 50 y no permitir valores nulos.

lengua: de tipo VARCHAR, de longitud 50 y permitir la posibilidad de null.

Al diligenciar el formato de creación debemos ver lo siguiente.

11

Pulsamos el botón Grabar para crear la tabla, nos aparece la siguiente ventana.

En la parte superior de la pantalla anterior resaltamos que estamos trabajando en

localhost,en la base de datos prueba y, dentro de prueba, en la tabla pais;vemos

también el mensaje indicativo de que se ha creado la tabla, el código SQL asociado a la

creacióny la definición de la tabla creada.

12

Como hasta este punto nos encontramos aún al nivel de la tabla país, si llegásemos a

pulsar el botón Continuar, estaríamos creando un nuevo campo en esta tabla, pero como

lo que requerimos es crear una nueva tabla prueba, pasamos al nivel de base de datos

pulsando sobre su nombre en la parte superior o en la parte izquierda de la ventana,

apareciendo entonces la ventana para crear la nueva tabla. Procedamos entonces a la

creación de la tabla departamento con 3 campos.

A la nueva tabla le definimos los siguientes campos:

codigodep:de tipo entero (INT), sin signo (UNSIGNED), no permitir valores nulos

(notnull), auto incremental (auto_increment) y que sea la llave primaria de la tabla.

nombre: de tipo VARCHAR, de longitud 50 y no permitir valores nulos.

codigopais: de tipo entero, sin signo y no permitir valores nulos.

La definición de estos campos debe coincidir con la siguiente configuración:

13

De forma similar procedamos a crear la tabla ciudad con los 3 campos siguientes:

codigociu: de tipo entero (INT), sin signo (UNSIGNED), no permitir valores nulos

(notnull), auto incremental (auto_increment) y que sea la llave primaria de la tabla.

nombre: de tipo VARCHAR, de longitud 50 y no permitir valores nulos.

codigodep: de tipo entero, sin signo y no permitir valores nulos.

La configuración de la tabla ciudad debe coincidir con la siguiente:

Al pulsar el botón Grabar aparece la ventana correspondiente a la tabla creada, pasamos

al nivel de base de datos y aparece lo realizado hasta ahora sobre la base de datos, la

creación de las tres tablas.

Generación de referencias entre tablas:Recalcamos que en la tabla

departamentoincluimos el campo codigopais, el cual es la llave primaria de la tabla pais,

de igual forma, uno de los campos de la tabla ciudad es codigodep, la llave primaria de la

tabla departamento, estos campos son respectivamente las llaves foráneas en las tablas

departamentoy ciudad.

14

Para generar referencias o llaves foráneas de una tabla a otra desde PhpMyadmin,

hacemos clic sobre la pestaña SQL,lo cual nos habilita para escribir el código

correspondiente. En este caso el resultado de la edición de código debe coincidir con lo

mostrado en la figura siguiente.

Pulsemos el botón Continuar, si no hemos cometido errores en la escritura nos debe

aparecer el mensaje de creación exitosa de la consulta mostrado en la siguiente imagen

(realmente es de la creación de referencias entre diferentes tablas).

Ahora podemos proceder a la inserción de datos en la base de datos, para ello se

selecciona la tabla desde la parte izquierda de pantalla, luego se hace clic sobre el enlace

Insertar, que aparece en la parte superior de la ventana correspondiente a la tabla

seleccionada. Nos aparece una ventana como la siguiente, en la que ya hemos escrito

algunos datos.

15

Aquí sólo escribimos datos de los campos no Auto incremental. La opciones Volver, del

desplegable que hemos resaltado, permite regresar a la tabla, si no queremos insertar

mas registros, mientras que la opción Insertar un nuevo registro permite continuar con la

inserción. Para seguir con la acción deseada se pulsa el botón Continuar (oculto en la

imagen). A manera de ejemplo podemos insertar los siguientes datos

Campo nombre Campo lengua

Colombia Castellano

Brasil Portugués

Argentina Castellano

U.S.A Inglés

China Mandarín

Si pulsamos la pestaña Examinar, parte superior de la ventana, veremos el resultado de

la inserción de datos en la tabla pais.

16

Podemos continuar con la inserción de datos en departamento y ciudad teniendo cuidado

de escribir el código correcto del país o el departamento respectivamente.