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. 1
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
2
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. 3
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:
4
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 5
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. 6
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:
7
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.
8
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 9
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. 10
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.
11
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:
12
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. 13
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.
14
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 Colombia Brasil Argentina U.S.A China
Campo lengua Castellano Portugués Castellano Inglés 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.
15
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.
16