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 SIETE: CONEXIÓN A UNA BASE DE DATOS

INTRODUCCIÓN:

En la unidad anterior, en el apartado correspondiente a Requisitos para crear aplicaciones

Web que interactúen con bases de datos, señalamos las necesidades de una herramienta

de diseño de páginas Web, el Software de servidor Web, Software de servidor de

aplicaciones que se ejecute en el servidor Web y Software DBMS o sistema de bases de

datos. Al instalar el paquete AppServ en nuestro equipo local, contamos con el servidor

Web Apache,el servidor de aplicaciones PHP y el manejador de bases de datos MySQL.

La herramienta de diseño de página usada en las actividades descritas en el presente

documento es AdobeDreamweaver CS5, mediante la cual podemos configurar un

entorno de desarrollo PHP.Los pasos para la configuración del entorno de desarrollo se

describen en las siguientes secciones de esta unidad.

Creación de la carpeta raíz:En el equipo en que se ejecuta el servidor Web, se debe

crear una carpeta raíz para la aplicación. En general esta carpeta puede ser local o

remota, según dónde se ejecute el software de servidor Web. Frente a solicitudes hechas

desde un navegador, el servidor Web puede servir páginas de la carpeta raíz de la

aplicación o de cualquiera de las subcarpetas contenidas en ella.

Se puede probar el servidor Web ubicando una página HTML de prueba en la carpeta raíz

del servidor, e intentar abrirladesde un navegador introduciendo el URL de la página. El

URL se compone del nombre de dominio y el nombre del archivo de la página HTML, por

ejemplo, www.example.com/testpage.htm.

Si el servidor Web se ejecuta en un equipo local, puede utilizar localhosten lugar del

nombre de dominio. Para el caso objeto de este taller, en que usamos el servidor

Apache,una URL completa sería http://localhost:80/pagina.html,donde : 80 se refiere al

2

número de puerto através del cual se realiza la conexión. Al realizar la instalación del

paquete AppServ, el número de puerto sugerido es el puerto 80, si se deja esa

configuración por defecto, no es necesario escribir :80 después de localhost.

Para efectos de este taller creemos una carpeta con el nombre aplicación u otro nombre

deseado, en la carpeta raíz del servidor, es decir en la carpeta C:/AppServ/www.Luego

de la realización de la acción antes descrita, definimos un sitio de Dreamweaver para

administrar los archivos de la aplicación, según se indica seguidamente.

Definición del sitio:Luego de crear la carpeta raíz, en Dreamweaver CS5, se debe crear

el sitio de la aplicación, para ello accedemos a la opción Nuevo Sitio del menú Sitio.

En la categoría Sitiose define el nombre del sitioy la carpeta del sitio local, en este caso

damos el nombre MiSitioy utilizamos la carpeta aplicacionantes creada:

En la categoría Servidores, activamos el botón + para configurar un nuevo servidor.

3

En nuestro caso, en opciones Básicas, damos como nombrede servidor,servidor1.Del

desplegable allado del texto Conectar usando eligir la opción Local/Red, en Carpeta del

servidor, eligir la de la aplicación y como URL, escribir http://localhost/aplicacion.

En la categoría Avanzadas, sección Servidor de pruebase elige la opción PHP

MySQLcomo modelo de servidor, dejamos las demás opciones sugeridas yGuardar.

4

En la ventana que aparece, se marca la casilla para que el servidor sea de prueba.

En Configuraciones avanzadas, secciónInformación localconfiguramos de la siguiente

formay activamos el botón Guardar.

5

Al guardar nos aparece la ventana para finalizar la creación del sitio.

Definición y uso de la Conexión.

La conexión a la base de datos, requiere la elaboración de una página dinámica o archivo

PHP, para ello, en Dreamweaver,accedemos al menú Archivoy seleccionamos la opción

Nuevo,y en la ventana que aparece elegimos el tipo de archivo PHP.

6

El establecimiento de la conexión se basa en la sección Datos del panel Insertar:

7

Dreamweaverhace saber los requisitos para trabajar con

bases de datos, los primeros ya los hemos cubierto en

apartes anteriores, las marcas de verificación en la

figura adjunta así lo confirman.

El paso que resta para iniciar la creación de páginas es

definir una conexión para que Dreamweaver establezca

los parámetros sobre los que se ha de realizar la

comunicación entre los archivos PHP y la base de datos.

8

Lo anterior realmente significa que se debe indicar a Dreamweaver dónde está la base

de datos a la que nos queremos conectar, su nombre, un usuario con su contraseña y

suficientes privilegios para poder, al menos, visualizar los datos almacenados.

Para ello hacemos clic sobre el botón de la pestaña

Bases de datosy seleccionamos la opción Conexión

MySQL, con ello se abre el siguiente cuadro de diálogo:

En el cuadro escribimos los siguientes parámetros de la conexión, como los del ejemplo

que estamos trabajando.

Nombre de conexión: ConexionBD u otro

nombre que permita luego reconocerla.

Servidor MySQL:en este caso, puesto que la

base de datos está alojada en el mismo equipo

local, seescribe localhost.

Nombre de usuario y Contraseña:El usuario

debe tener privilegios suficientes de acceso a

la base de datos.

Base de datos:se escribe o selecciona el

nombre de la base de datos a conectar, en

nuestro caso es la base de datos prueba.

9

Con el fin de probar lo realizado, pulsamos el botón Prueba, debe aparecer un mensaje

indicando que la conexión se estableció correctamente, luego se pulsa Aceptar, con lo

cual la conexión ya se puede utilizar.

Con lo anterior, ahora el sitio cuenta con una carpeta para la conexión, al expandir el

componente Tablas de esta carpeta, vemos las tablas ciuda,departamento y paísde la

base de datos prueba.

Creación de juegos de registros o RecordSets:

Creada la conexión, se puede mostrarinformación almacenada en la base de datos, para

ello se crea un juego de registros, o RecordSet,en el cual almacenarlos datos a mostrar.

Para crear un juego de registros hacemos clic en la opción Juegos de registrosde la

sección Datos del panel Insertar, se abre el cuadro de diálogo donde se define la

información a consultar, es decir qué registros específicos de qué tablas específicas.

Un uso básico de este cuadro requiere indicar los siguientes parámetros:

10

Nombre del juego de registros:Un nombre alusivo a los datos a mostrar, por ejemplo,

RecPaises.

Conexión: Es alguna conexión creada previamente, y que ha de usarse para poder

acceder ala información de la base de datos, en nuestro caso será seleccionada

ConexionBD.También se puede hacer clic en el botón Definir… para crear una nueva tal

y como se realizó antes.

Tabla: es la tabla de donde se quiere tomar datos.

Columnas: se especifica las columnas que contiene la información a mostrar,

seleccionando una tabla aparecen sus columnas en el cuadro de columnas. Se puede

seleccionar la opción Todas,con lo que todos los campos de la tabla quedan disponibles,

o se puede marca la opción Seleccionado: para elegir alguna o algunas de las columnas

de la tabla. La tecla Ctrl permite seleccionar varias columnas.

En el cuadro de dialogo anterior mostramos un ejemplo de un juego de registros con el

nombre RecPaises,usando la conexión ConexionBD, que consulta información de la

tabla pais y específicamente de las columnas nombrey lengua.Pulsando el botón

Pruebapodemos ver los datos que contiene el juego de registros.

Si pulsamos el botón Aceptar del cuadro de definición del RecordSet nos aparece el

siguiente cuadro indicando que se ha añadido un juego de registros a la página.

11

En una página dinámica podemos crear

los juegos de registros que necesitemos,

para lo cual se debe tener claro qué

consultas se realizarán.

El panel Vinculaciones muestra los juegos

de registros creados, si se expande un

juego de registros se puede ver las

columnas participantes.

Visualización de datos dinámicos:Para

mostrar datos de una columna de una

tabla, se puede utilizar la opción Texto

dinámico, del submenúDatosdinámicos.

Utilicemos esta opción y se abrirá el

cuadro de diálogo en el que se

seleccionamos el campo a mostrar.

12

También en este cuadro podemos seleccionar el formato en que se quiere mostrar la

información.El cuadro de texto Códigomuestra el código PHP que se incluirá en la página.

Pulsando el botón Aceptar, el campo del registro se incluirá en el punto donde esté

situado el cursor. En nuestro caso, habiendo seleccionado el campo nombre, veremos lo

siguiente en vista de diseño.

Indicando que el elemento a mostrar será el de la columna nombre del

recordsetRecPaises.Si deseamos modificar alguna opción, podemos regresar al cuadro

de dialogo anterior desde el panel Comportamientos del servidor(Ctrl+F9), el cual

muestra los elementos dinámicos de la página; haciendo doble clic sobre el que se

quiere modificar, se muestra el cuadro correspondiente.

Utilizando el modo de vista Vista en vivose mostrarán los datos reales, no el nombre de

registro, también podemos probar la página pulsando F12.

Repeticiones:Con la operación detallada en el apartado anterior, en el modo Vista en

vivo, sólo veremos el primer registro del juego, para ver más de uno se requiere usar las

Repeticiones, es decir la muestra de varios registros. Para crear una repetición

seleccionamos la zona a repetir, por ejemplo el elemento de texto dinámico antes

13

insertado en la página, y pulsar el botónRepetir región de la sección Datos del panel

Insertar, con lo cual se abre el cuadro de dialogo que permite seleccionar el juego de

registros del cual queremos que se haga la repetición, indicar el número de registros que

queramos que aparezcan o escoger Todos los registros.

Al pulsar el botón Aceptar, en la vista de Diseño y con el ejemplo que venimos

trabajando, veremos lo siguiente:

Lo que dará la lista de nombres de juego de registros RecPaises.

Creación de Tablas Dinámicas:

La creación de una tabla dinámica permite

mostrar datos de todas las columnas del número

de registros que queramos. Para crear una tabla

Dinámica se utiliza la opción Tabla dinámicade

la sección Datos dinámicos, se genera una

tabla con las características que especifiquemos

en el cuadro de diálogoTabla dinámicamostrado

a continuación:

14

Orden de juegos de registros: Para ordenar los elementos almacenados en un juego de

registros podemos usar la opción Ordenar del cuadro de diálogo Juego de Registros, al

cual podemos acceder creando un nuevo Recordset o modificando uno existente, en este

último caso hacemos doble clic sobre el juego de registro a modificar en el panel

Vinculaciones (Ctrl+F10).

En nuestro ejemplo hemos seleccionado ordenar según el campo nombre y en forma

ascendente.El mismo cuadro de dialogo Juego de Registros permite que realicemos

filtrado de datos según alguna condición.

Paginación de registros: La paginación de registros es muy útil en casos en que el

listado es muy largo. Para ello es necesario definir una repetición de registros

especificando el número de registros que queremos visualizar en cada página (la

paginación no funciona si se define la repetición sobre todos los registros).

Ubicando el cursor en el punto deseado,

podemos usar las opciones del submenú

Paginación de juego de registros:mostrada

en la figura.Si elegimos la opción Mover a la

siguiente página,se abre el correspondiente

cuadro de dialogo.

15

En este cuadro se selecciona el juego de registros sobre el cual queremos definir la

paginación y pulsamos Aceptar, aparece, en la vista de Diseño el resultado de la acción.

Podemos pulsar F12 para probar el enlace creado, Dreamweaver pregunta si deseamos

guardar los cambios, pulsamos Aceptar.

Nota: probablemente aparece la notificación de un error de sintaxis en una línea

indicada, si es el caso nos dirigimos a la vista de código y colocamos la línea en

comentarios (//).

Mostrar recuento de registros:Este submenú

cuenta con las opciones Estado de

Navegaciónde juego de registros, Registro

inicial, Registro final y Total registros.

Al seleccionar alguna de las tres últimas se mostrará el cuadro de diálogo

correspondiente, en el que se puede seleccionar un Juego de registros, entre los que se

haya creado, y se pulsa Aceptar.Según la opción elegida se añade un texto a la página:

Registro inicial:Visualiza el número dentro del listado total de registros, del primer

elemento de la lista que se está mostrando en la página actual.

Registro final: Visualiza el número dentro del listado total de registros del último

elemento de la lista que se está mostrando en la página actual.

16

Total de registros:Visualiza el número total de registros del juego (la suma de todos

los registros de todas las páginas).

Al seleccionar la opción Estado de navegación de juego de registros podremos

insertar un literal que muestre el recuento exacto de los registros que se están

visualizando. En nuestro ejemplo con el juego RecPaises, se verá lo siguiente en la vista

de diseño:

Podemos probar el resultado mediante la opción Vista en vivo.

Mostrar regiones:En algunos casos es deseable

modificar el funcionamiento de la paginación, por

ejemplo, no mostrar el elemento de navegación

Anterior en la primera página. El submenú

Mostrar regionespermite realizar tales cambios

para que un elemento seleccionado en la página se

muestre o no se muestre dependiendo

elcumplimiento de alguna condición. Las opciones

se muestran en la figura adjunta.

Barra de navegación de juego de registros: Es la primera de las opciones del

submenú Paginación de juego de registros, combina recuento con la muestra y

ocultación de registros. Esta opción inserta en la página una barra de navegación a

través de las diferentes páginas del juego de registros. Al seleccionar esta opción se

abre el correspondiente cuadro de diálogo:

17

En el cuadro de dialogo se selecciona el Juego de registros, sobre el que ha de operar la

navegación, y uno de los dos modos para mostrar la barra de navegación (Texto o

Imágenes).

Uso de variables:

El uso de variables permite limitar los resultados a mostrar. Una variable informa una

página PHP, y el archivo responde según el valor de la variable.Para usar variables,

debemos tener claro como pasar las variables a una página PHP. El paso de una variable

se hace indicando una URL, como la ilustrada en la siguiente imagen. (Requiriéndose el

signo de cierre de interrogación y el signo igual en las posiciones señaladas).

Creación de enlaces con paso de variables desde Dreamweaver:En los casos en que

el valor del parámetro no cambia, se puede escribir directamente en la referencia del

vínculo, pero también podemos utilizar textos dinámicos para indicar el valor del

parámetro a pasar, en cuyo caso se indica que el valor se toma del texto dinámico, lo que

se hace posicionándonos sobre el elemento de enlace, y en la vista Código arrastramos

el campo dinámico desde el panel Vinculaciones (Ctrl + F10) hasta el vínculo para

formar la URL del enlace.

Manejo de registros.

En Dreamweaverpodemos usarformularios para la inserción, modificación o eliminación

de registros de una base de datos, a continuación detallamos estas operaciones.

18

Inserción de registros:

Podemos crear páginas para inserción de

registros mediante la opción Asistente de

formulario de inserción de registros del

submenú Insertar registro, con lo cual se

abre el respectivo cuadro de dialogo.

En este cuadro definimos la Conexión quehayamos creado, la Tabla en la que se

insertará el nuevo registro, también podemos indicar dónde queremos que se redirija la

página una vez se haya insertado el registro.Posteriormente se selecciona los campos

que deberán aparecer en el formulario, teniendo cuidado de que aparezcan todos

aquellos que no permitan valores nulos.

Luego se seleccionacada campo, y para cada uno se indica cómo será presentado en el

formulario, según se describe a continuación:

19

En Etiqueta:seescribe la etiqueta que se quiere para el campo.

En Mostrarcomo: Se indica en qué tipo de elemento de formulario estará

representado el campo, por ejemplo, caja de texto, botón de opción, un desplegable.

En Enviar como: se indicanormalmente el mismo tipo definido al crear la tabla.

En Valor predeterminado: un valor conveniente para tal efecto.

Se pulsa Aceptar para cerrar el asistente y crear

el formulario. En este caso usamos el asistente

para diseñar un formulario de inserción en la tabla

país, no incluimos el campo codigopais porque, al

ser autoincremental,no necesario. Podemos ver el

resultado en la vista de diseño.

Actualización de registros:

En una página de manejo de bases de datos se

requiere realizar actualización o modificación de

registros. Dreamweaver cuenta conel

Asistentede formulario de actualización de

registros.

La selección de esta opción abre el respectivo cuadro de dialogo, en el que se

selecciona la Conexión, la Tabla a actualizar, como debemos elegir registro de entre

toda la tabla, deberemos indicar cuál, para ello seleccionamos un campo (en Columna

de clave exclusiva) y un juego de registros (en Seleccionar registro de) para

establecer el registro que va a mostrar la página. De esta forma vincularemos el campo

del recordset de la página y se mostrará la información que coincida con él.

Otra parte del asistente permite elegir los campos a mostrar, su tipo de elemento de

formulario y la forma en la que se va a enviar y un Valor predeterminado, no lo

modifiquemos para que muestre la información almacenada.

20

Al pulsar Aceptar, el formulario se creará.Aquí

vemos, en vista de diseño,el formulario de

modificación de datos de la tabla país. Pulsando

F12 se puede probar el funcionamiento del

formulario.

Eliminación de registros:Esta operación se realiza mediante el Asistente para Eliminar

Registro.En Dreamweaver, el uso del asistente para eliminar registros requiere la

creación de una página que ha de usarse exclusivamente para eliminar el registro. La

aplicación debe funcionar de tal manera que en una página previa a la eliminación, el

usuario selecciona el registro a borrar, da la orden de borrado y con ello se enlazara a la

página de borrado pasándole el identificador del registro a borrar, la página de borrado

mostrará los datos del registro y pedirá confirmación al usuario.