8 .

C O N E X I N

C O N

L A

B A S E

D E

D A T O S

8
Conexin con la base de datos

En las prcticas anteriores de la asignatura hemos utilizado tres componentes fundamentales en el desarrollo de una aplicacin web: el servidor web (Apache que esta incluido dentro de PHP), el editor HTML/PHP (Macromedia Dreamweaver) y el sistema de base de datos (MySQL exportado desde Access). En esta prctica conectaremos los tres elementos entre s para crear y probar el funcionamiento de un conjunto de pginas dinmicas que acceden a la base de datos para mostrar sus contenidos en una pgina web. Para realizar la conexin entre el editor HTML/PHP y la base de datos deberemos definir un sitio remoto, ya que el procesamiento de las pginas dinmicas se realiza en el servidor web. Aunque en nuestro caso todos los componentes de la aplicacin se encuentran en nuestro PC, es habitual que el servidor y el ordenador utilizado para editar las pginas sean distintos. Una vez establecida la conexin entre las pginas PHP y la base de datos, podemos obtener juegos de registros como resultado de ejecutar una consulta SQL. Los datos almacenados en el juego de registros pueden mostrarse, total o parcialmente, en una pgina dinmica. En esta prctica definiremos un sitio remoto para nuestra aplicacin de ejemplo RECORD Store. Una vez definido el sitio, estableceremos una conexin entre una pgina dinmica PHP y la base de datos, que nos permita obtener juegos de registros como resultado de ejecutar consultas SQL simples. Al finalizar los ejercicios, habremos aprendido a realizar las siguientes tareas: Definir un sitio remoto en Dreamweaver. Establecer una conexin entre una pgina PHP y la base de datos. Obtener un juego de registros mediante una consulta SQL.

1. Preparacin para crear pginas dinmicas

En las prcticas anteriores trabajamos con Macromedia Dreamweaver de forma local. Los distintos archivos que componen el sitio se almacenan en una carpeta del PC del aula (C:\Sites\RecordStore), y todas las pruebas se realizan sobre los archivos locales. Al trabajar con pginas dinmicas debemos mantener dos copias exactas de los archivos que componen el sitio: una copia en el PC local llamada sitio local y una copia en el servidor llamada sitio remoto. Las operaciones de edicin se realizan sobre los archivos del sitio local, y posteriormente se copian o
89

8 .

C O N E X I N

C O N

L A

B A S E

D E

D A T O S

transfieren los archivos al sitio remoto, ya que las pginas dinmicas deben procesarse en el servidor. Junto con la informacin relativa a las carpetas local y remota, la definicin del sitio se completa indicando la direccin URL que se utilizar para acceder a los archivos remotos. Esta prctica supone que disponemos de los archivos que componen el sitio de ejemplo. En la pgina web de la asignatura existe una versin de dichos archivos, junto con la base de datos necesaria para poder realizar los ejercicios de esta prctica. 1. Accede al sitio web de la asignatura, y dentro de Material adicional, abre el archivo practica8.zip. Extrae todos los archivos disponibles en la carpeta C:\Archivos de programa\EasyPHP1-7\mysql\data Comprueba que se ha creado la carpeta C:\Archivos de programa\EasyPHP17\mysql\data\RSBDatos y revisa su contenido

2.

1.1. Activacin del servidor web

Para poder comprobar el funcionamiento de las pginas dinmicas deberemos activar el servicio web (Apache) en nuestro PC de prcticas. Activaremos el servidor web y definiremos el sitio de RECORD Store. 3. desde el menu de Inicio>Programas>EasyPHP. Aparecera el icono de EasyPHP en la barra de tareas a la izquierda del reloj. Haz doble clik sobre ese icono. Se mostrara la siguiente ventana:

4.

5.

Haz clic en el botn Apache Iniciar para activar el servicio web. Comprueba que el servicio funciona correctamente abriendo una ventana de Internet Explorer y accediendo a la URL http://localhost.

90

8 .

C O N E X I N

C O N

L A

B A S E

D E

D A T O S

1.2. Definicin del sitio

Tras activar el servicio web, vamos a definir un nuevo sitio en Dreamweaver. A diferencia del trabajo que realizamos en la prctica 4, ahora definiremos la carpeta remota, la URL del sitio y otras opciones que anteriormente no utilizamos. 1. 2. Ejecuta Macromedia Dreamweaver desde el Men de Inicio de Windows. Selecciona la opcin Nuevo sitio en el men Sitio. Se despliega el cuadro de dilogo Definicin del sitio. 3. Si el cuadro de dilogo muestra la ficha Avanzadas, haz clic en Bsicas. Aparecer la primera pantalla del asistente para la Definicin del sitio:

Nota: si el cuadro de dilogo no es como el mostrado en la figura anterior, haz clic en la solapa Bsicas para cambiar la vista. 4. Introduce RECORD Store dinamico como nombre del sitio y haz clic en Siguiente > para continuar el proceso de definicin. Aparecer la siguiente pantalla del Asistente preguntndonos si deseamos trabajar con una tecnologa de servidor. Vamos a utilizar una tecnologa PHP MySQL para nuestro sitio.

5.

Activa el botn de radio S, deseo utilizar una tecnologa de servidor para indicar que el sitio ser dinmico. Se mostrar una lista desplegable con las
91

8 .

C O N E X I N

C O N

L A

B A S E

D E

D A T O S

tecnologas disponibles. Selecciona en la lista PHP MySQL y haz clic en Siguiente > para continuar con la definicin del sitio. Aparecer la siguiente pantalla del Asistente preguntndonos cmo deseamos trabajar con los archivos.
6.

Selecciona la opcin Editar copias locales en mi equipo y luego cargar al

servidor de prueba remoto.

Bajo el conjunto de botones de radio anteriores, un cuadro de texto permite especificar la carpeta del disco local donde Dreamweaver deber almacenar la versin local de los archivos del sitio. Es ms sencillo especificar un nombre de carpeta exacto utilizando Examinar en lugar de escribir la ruta. 7. Haz clic en el icono de carpeta situado junto al cuadro de texto En qu lugar del equipo desea almacenar los archivos? Aparecer el cuadro de dilogo Elegir la carpeta raz local para el sitio. 8. Utiliza el cuadro de dilogo para seleccionar la carpeta C:\Sites\RecordStore que creamos anteriormente.

9.

Haz clic en Siguiente > para continuar con el paso siguiente. Aparecer la siguiente pantalla del Asistente preguntndonos cmo vamos a conectar al servidor remoto.

10. Elige Local/Red en la lista desplegable. Bajo esta lista, una caja de texto y un icono de carpeta permiten seleccionar la carpeta remota. Tal y como vimos en la prctica 3, la carpeta remota que el servidor web Apache de EasyPHP utiliza como raz se encuentra en C:\Archivos de programa\EasyPHP1-7\www\, por lo que deberemos crear una nueva carpeta RecordStore en su interior e informar a Dreamweaver de su ubicacin. 11. Haz clic en el icono de carpeta situado junto al cuadro de texto En qu lugar del equipo desea almacenar los archivos? Utiliza el cuadro de dilogo para crear y seleccionar C:\Archivos de programa\EasyPHP1-7\www\recordstore.

92

8 .

C O N E X I N

C O N

L A

B A S E

D E

D A T O S

12. Haz clic en Siguiente > para continuar con el paso siguiente. Como ltimo paso, necesitamos informar a Dreamweaver de cual es la URL que se utilizar como prefijo del sitio. La URL prefijo permite acceder a la pgina index.htm almacenada en la raz del sitio. 13. Introduce como URL http://localhost/RecordStore y haz clic en el botn Comprobar URL para comprobar el prefijo. Si el prefijo es correcto, se informar de este hecho mediante una ventana de aviso. Haz clic en Siguiente > para continuar con el paso siguiente. En este paso Dreamweaver nos pregunta si queremos activar la proteccin de archivos. Esta tcnica permite proteger los archivos de modificaciones simultneas por parte de distintos diseadores. 14. Selecciona el botn de radio No, no activar la desproteccin y proteccin y haz clic en Siguiente > para continuar con el paso siguiente. Se muestra un resumen de la configuracin establecida.

15. Haz clic en Completado para terminar.

93

8 .

C O N E X I N

C O N

L A

B A S E

D E

D A T O S

1.3. Definicin de un origen de datos ODBC

Tras activar el servidor web Apache y definir un nuevo sitio dinmico en Dreamweaver estamos en condiciones de acceder a la base de datos para crear pginas dinmicas. Para ello, el ltimo paso necesario ser crear una cadena de conexin para nuestra base de datos de ejemplo (ver prctica 7). 1. Selecciona la opcin Configuracin/Panel de control en el Men de Inicio de Windows. Se muestra el contenido del Panel de Control de Windows. Una de las entradas del Panel, etiquetada Herramientas administrativas contiene la opcion Origenes de datos (ODBC) permite gestionar los orgenes de datos ODBC disponibles en el sistema. 2. Haz doble clic sobre el icono Origenes de datos (ODBC) en Herramientas administrativas del Panel de Control. Se muestra el Administrador de orgenes de datos ODBC de Windows.

Tal y como hicimos en la prctica 7, vamos a crear un DSN de sistema para nuestra base de datos. Definiremos el tipo de controlador (MySQL ODBC 3.51 Driver) y lo asociaremos a la base de datos que hemos descargado anteriormente. 1. 2. Haz clic en la solapa DSN de sistema para mostrar la categora. Haz clic en Agregar... para crear un nuevo DSN. Se muestra una lista de los controladores disponibles. 3. Selecciona el controlador MySQL ODBC 3.51 Driver y haz clic en Finalizar para aceptar el nuevo DSN.

94

8 .

C O N E X I N

C O N

L A

B A S E

D E

D A T O S

Se despliega el cuadro de dilogo Connector/ODBC.

Introduce RECORD Store como Data Source Name, en user pon root y en Database elige RSBDatos. Para comprobar que todo esta bien haz clic en Test. Si todo esta correcto obtendrs la siguiente ventana:

Sino hay algn error (ej. que no hayas iniciad MySQL) se mostrar la siguiente ventana:

. 4. Haz clic en Ok para completar el proceso.

El nuevo origen de datos est disponible, y ya tenemos los elementos necesarios: Servidor Web, Editor HTML y Base de Datos preparadas para establecer la conexin y comprobar la funcionalidad.

95

8 .

C O N E X I N

C O N

L A

B A S E

D E

D A T O S

2. Conexin con la base de datos

Despus de realizar las tareas previas para poder crear pginas dinmicas, vamos a utilizar Dreamweaver para crear un nuevo documento PHP que acceda a los contenidos de nuestra base de datos de ejemplo. 1. 2. Vuelve a la pantalla de Macromedia Dreamweaver y selecciona la opcin de men Archivo/Nuevo. Selecciona la categora de documentos Pgina dinmica, y dentro de la categora selecciona un tipo de documento PHP. Haz clic en Crear para crear el nuevo documento. En este momento, disponemos de un nuevo documento en blanco preparado para soportar conexiones con la base de datos va PHP. Para ello ser necesario definir una conexin con la base de datos y crear un juego de registros que mostrar en el documento. 3. En la seccin de paneles de Dreamweaver, despliega el panel Aplicacin. Sino esta visible brelo a travs del men Ventana -> Bases de datos El panel Aplicacin permite crear una conexin con la base de datos para el documento actual. Inicialmente, el panel informa de este hecho con un mensaje indicando los pasos a seguir para completar la tarea.

Los primeros tres pasos ya los hemos realizado en la seccin anterior. Ahora crearemos la conexin con nuestra base de datos. 4. Haz clic en el botn con un signo + en la parte superior del panel Aplicacin. En la lista desplegable, selecciona la opcin Conexin MySQL. Se muestra el cuadro de dilogo Conexin MySQL.

96

8 .

C O N E X I N

C O N

L A

B A S E

D E

D A T O S

5.

Introduce RecordStore como nombre de conexin. Introduce Localhost como Servidor MySQL En la lista desplegable Base de datos , selecciona la fuente RSBDatos que creamos en la prctica 8 . Haz clic en Aceptar para completar el proceso. El panel Aplicacin muestra un icono representando la nueva conexin.

6.

Haz clic en la casilla con un signo + junto a la conexin RECORDStore para desplegar su contenido. La conexin RecordStore proporciona acceso a la base de datos de ejemplo, dividiendo la informacin en tres grupos: Tablas, Vistas y Procedimientos almacenados.

7.

Haz clic en la casilla con un signo + junto a Tablas para desplegar su contenido. Las tres tablas de nuestra base de datos de ejemplo, Carro, Discos y Usuarios aparecen asociadas a la conexin RECORDStore. Despliega cada una de ellas para observar la estructura de campos que definimos en la prctica anterior.

Ya tenemos una conexin establecida entre nuestro documento PHP y la base de datos. Ahora crearemos un juego de registros (inicialmente todo el contenido de la tabla Discos) y lo utilizaremos para mostrar contenidos en la pgina PHP . 1. En el panel Aplicacin, haz clic en la solapa superior etiquetada Vinculaciones.

El contenido del panel cambia. Al igual que la primera vez que accedimos al panel, ahora muestra un conjunto de pasos a realizar, y el siguiente es crear un juego de registros. 2. Haz clic en el botn con un signo + en la parte superior del panel Aplicacin. En la lista desplegable, selecciona la opcin Juego de registros (consulta). Se muestra el cuadro de dilogo Juego de registros.
97

8 .

C O N E X I N

C O N

L A

B A S E

D E

D A T O S

Observa las distintas partes del cuadro de dilogo. Podemos elegir una conexin, una tabla dentro de la conexin, y construir una consulta SQL simple (que utilice un solo campo en el criterio de bsqueda) desde el propio cuadro de dilogo. Comenzaremos creando un juego de registros que contenga todos los campos de todos los registros de la tabla Discos. 3. 4. Introduce TodosLosDiscos como nombre del juego de registros. En la lista desplegable Tabla, selecciona la tabla discos. Haz clic en el botn Prueba para comprobar el juego de registros que obtendremos. Los registros obtenidos se muestran en un cuadro de dilogo que permite su exploracin.

5.

Haz clic en Aceptar para cerrar la ventana de exploracin.

98

8 .

C O N E X I N

C O N

L A

B A S E

D E

D A T O S

Al crear el juego de registros, lo que hemos hecho realmente es definir una consulta SQL sobre la tabla Discos (SELECT * FROM Discos). Podemos refinar esta consulta seleccionando nicamente algunos campos de la tabla, y filtrando los registros obtenidos mediante un criterio de bsqueda. 6. En el grupo de botones de radio Columnas, activa el botn Seleccionado y selecciona de la lista los campos CODIGO, INTERPRETE, TITULO y PRECIO. Haz clic en el botn Prueba para comprobar el juego de registros que obtendremos. En la lista desplegable Filtro, selecciona el campo GENERO. A su derecha, comprueba que la lista muestra el signo igual a (=). En la lista desplegable inferior selecciona la opcin Valor introducido, y en la caja de texto de su derecha escribe Blues. Haz clic en el botn Prueba para comprobar el juego de registros que obtendremos.

7.

8.

En la lista desplegable Ordenar, selecciona el campo TITULO. A su derecha, comprueba que la lista muestra el valor Ascendente. Haz clic en el botn Prueba para comprobar el juego de registros que obtendremos.

Al definir las distintas opciones del cuadro de dilogo hemos creado una consulta SQL que extrae el juego de registros de la base de datos. Podemos ver la consulta definida cambiando la vista del cuadro de dilogo para mostrar las opciones avanzadas. 9. Haz clic en el botn Avanzada... del cuadro de dilogo Juego de registros. El aspecto de la ventana cambia. La consulta SQL definida se muestra en una caja de texto.

10. Cambia el nombre al juego de registros por DiscosDeBlues y haz clic en Aceptar para cerrar el cuadro de dilogo.
99

8 .

C O N E X I N

C O N

L A

B A S E

D E

D A T O S

El panel Vinculaciones muestra una nueva entrada para el juego de registros. Despliega su contenido. Aparecen los campos seleccionados en la consulta, junto con unos indicadores (primer ndice de registros, ltimo ndice de registros, total registros) que se utilizan para navegar por el juego de registros. Ejercicio 8.1

2.1. Contenido dinmico

Una vez realizadas las tareas previas, establecida una conexin y creado un juego de registros, podemos mostrar los contenidos del juego de registros como contenidos dinmicos en nuestro documento PHP. Dreamweaver permite utilizar de forma simple los datos del juego, as como mostrar el resultado obtenido mediante su vista LiveData. 1. En Dreamweaver, arrastra el campo CODIGO incluido en el juego de registros DiscosDeBlues desde el panel Vinculaciones hasta la ventana del documento PHP. En el documento se muestra un texto indicando que al visualizar la pgina se mostrar el contenido del campo CODIGO para el registro actual del juego de registros DiscosDeBlues.

2. 3.

Coloca el cursor de insercin detrs del texto {DiscosdeBlues.CODIGO} y pulsa la tecla <Enter> para bajar a la lnea siguiente. Repite los pasos anteriores para arrastrar hasta la ventana de documento los campos INTERPRETE, TITULO y PRECIO.

4.

En la Barra de documentos de Dreamweaver, activa el botn Vista Live Data.

100

8 .

C O N E X I N

C O N

L A

B A S E

D E

D A T O S

En la ventana de documento se muestran los valores almacenados en los campos del registro actual (el primer registro del juego). 5. Guarda el documento con el nombre exploradiscos.php y cierra su ventana de documento en Dreamweaver.

Ejercicio 8.2

Ejercicios
Ejercicio 8.1
Crea las siguientes consultas a la base de datos: Muestra el Titulo, el Interprete y el Precio de los discos con un precio inferior a 15,00 . Muestra el Titulo y el Precio de los discos de Muddy Waters Muestra el Titulo, el Interprete y el Precio de los discos Infantiles con un precio inferior a 15,00 Muestra el Titulo y el Interprete de los discos publicados antes del ao 2000.

Ejercicio 8.2
Selecciona la carpeta raz del sitio en el panel Sitio, y utiliza el icono Colocar archivo(s) para copiar los contenidos del sitio a la carpeta remota.

Icono Colocar archivo(s) Selecciona la carpeta raz

Una vez hayas colocado todo el sitio en la carpeta remota, abre una nueva ventana de Internet Explorer y accede a la URL siguiente:
http://localhost/recordstore/exploradiscos.php

Analiza la funcionalidad de la pgina. Cuando acabes, abre el documento en Dreamweaver y observa sus caractersticas.
101