Post on 30-Mar-2016
description
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.