Crear un sitio Web asp en Dreamweaver que enlace con una base de datos de Access

Sin comentarios Enviar por correo electrnico Escribe un blog Compartir con Twitter Compartir con Facebook Para crear un sitio Web dinmico con pginas asp que muestren los registros de una base de datos de Access, seguiremos los siguientes pasos generales: 1. Instalar y configurar IIS (Internet Infomation Server) en nuestro ordenador. (ver articulo) 2. Crear un DSN o controlador que nos permita enlazar con la base de datos. (ver articulo) 3. Crear una carpeta remota de uso Web compartido para probar el funcionamiento de nuestra Web en local (ver articulo) 4. Crear una base de datos de Access con los datos necesarios. DREAMWEAVER: 5. Definir un nuevo sitio Web en Dreamweaver con los datos locales, los datos remotos y el servidor de prueba. (ver articulo) 6. Crear pginas dinmicas con extensin .asp (ver articulo) 7. Conectar desde Dreamweaver con la Base de Datos de Access. (ver articulo) 8. Crear juegos de registros (consultas) que nos permitan seleccionar los campos y los registros que nos interesan. (ver articulo) 9. Insertar los elementos dinmicos, es decir los campos de los registros seleccionados, en las pginas dinmicas. (ver articulo) 10. Crear Regiones repetidas para que se muestren todos los registros seleccionados. (ver articulo) 11. Insertar elementos que permitan la navegacin por los registros seleccionados, como Barras de navegacin (ver articulo) y estado de navegacin de juego de registros. (ver articulo) 12. Antes de probar el sitio web en local debemos Colocar los archivos en la Carpeta remota. (ver articulo)

13. Instalacin y configuracin de IIS (Internet Information Server)

14. 1 comentario 15. Enviar por correo electrnico Escribe un blog Compartir con Twitter Compartir con Facebook 16. IIS (Internet Infomation Server) es un software de Windows que nos permite crear un servidor pginas Web en local para visualizar las pginas dinmicas .asp que creemos. Se encuentra en el CD de instalacin de Windows de las versiones Windows XP y Windows 2000, tanto Server como Profesional.

En Windows XP Profesional la instalacin de IIS se hara siguiendo los siguientes pasos: Insertamos el CD de instalacin de Windows Profesional y seleccionamos la

opcin Instalar Componentes opcionales de Windows

17. Accedemos al Panel de Control desde el men Inicio Configuracin Panel de Control Dentro del panel de control seleccionamos el icono Agregar o quitar programas 18.

19.

Seleccionamos la opcin Agregar o Quitar componentes de Windows del panel que se encuentra a la izquierda.

20.

21. 22. 23. A continuacin activamos la casilla de verificacin de Servicios de Internet Information Server (IIS) 24.

25. 26. 27. Pulsamos siguiente y esperamos a que la instalacin se lleve a cabo. Para configurar IIS en Windows profesional seguimos los siguientes pasos: Desde Inicio Configuracin Panel de Control accedemos a Herramientas Administrativas Servicios de Internet Information Server 28.

29. 30. 31. De esta forma accedemos a la consola de IIS. En la parte de la izquierda vemos el equipo local. En nuestro ejemplo, necesitaremos crear un Directorio Virtual, esto lo podramos hacer en esta consola, pero en nuestro caso lo vamos a hacer de otra forma que explicaremos en el articulo 3. Crear una carpeta remota de uso Web compartido para probar el funcionamiento de nuestra Web en local

32.

Una vez instalado IIS, podemos acceder al sitio Web predeterminado tecleando la direccin: http://localhost en el navegador. De esta forma accedemos al contenido de la carpeta: C:\Inetpub\wwwroot, que es el directorio en el que Windows alberga las pginas del sitio Web predeterminado. Cuando tecleamos http://localhost accedemos a la pgina: http://localhost/localstart.asp que nos da informacin sobre IIS y una ventana emergente de ayuda con documentacin.

33. 34. Si creamos un archivo llamado prueba.asp y lo guardamos en el directorio C:\Inetpub\wwwroot accederemos a l tecleando la direccin: http://localhost/prueba.asp Pero si queremos crear un sitio Web complejo con muchos archivos necesitaremos crear un directorio virtual en el que albergar todos los archivos. Si creamos el directorio Virtual Web_Dinamica y dentro albergamos la pgina prueba.asp la ruta de acceso desde el navegador sera: http://localhost/Web_Dinamica/prueba.asp

35. Crear un DSN

36. Sin comentarios 37. Enviar por correo electrnico Escribe un blog Compartir con Twitter Compartir con Facebook 38. Para comunicar con la base de datos necesitamos definir el DSN (Data Source Name) que significa Nombre de Origen de Datos. El DSN es un controlador que utilizar Dreamweaver para referirse y conectar con la base de datos especificada. Con esto podemos crear una conexin en local que nos permita disear y probar el sitio antes de publicarlo. Luego, cuando subamos el sitio al servidor debemos tener un DSN con el mismo nombre pero que apunte a la base de datos alojada en el servidor. Si tenemos un Proveedor de Servicios de Internet, hemos de solicitar la configuracin del DSN. Normalmente este trmite se realiza rellenando un formulario Web para solicitar un DSN. Pasos para crear un DSN: Inicio Configuracin Panel de control Herramientas Administrativas Orgenes de datos (ODBC)

Seleccionamos la pestaa DSN de sistema y pulsamos en Agregar.

39. Vamos a utilizar una base de datos de Access, por tanto en la lista de controladores de bases de datos elegimos Microsoft Access Driver (*.mdb) En nombre del origen de datos escribimos el nombre del DSN, en nuestro ejemplo juguetes.

40. 41. Pulsamos en seleccionar para elegir la base de datos de nuestro equipo. No tiene importancia el directorio en el que est. En nuestro ejemplo seleccionamos la base de datos agenda.mdb que se encuentra en la carpeta C:\database\prueba_access

42.

43. Crear una carpeta remota de uso Web compartido

44. Sin comentarios 45. Enviar por correo electrnico Escribe un blog Compartir con Twitter Compartir con Facebook 46. Para poder probar las pginas dinmicas en local debemos utilizar una carpeta remota. Para ello creamos una carpeta en nuestro ordenador. En nuestro caso creamos la carpeta jugueteria en C. (pero la podemos crear donde queramos) Accedemos con el botn derecho a las propiedades de la carpeta. En Uso Compartido Web activamos la opcin Compartir esta Carpeta

47. Activamos los permisos de Lectura y Escritura

48. 49. Importante: Si no tenemos instalado IIS (Internet Information Server) no tendremos disponible la pestaa Uso Compartido de Web. 50. De esta manera hemos creado un Directorio virtual, que nos servir para probar en local nuestro sitio web de pginas dinmicas.

Definir un nuevo sitio Web en Dreamweaver con los datos locales, los datos remotos y el servidor de prueba.
Sin comentarios Enviar por correo electrnico Escribe un blog Compartir con Twitter Compartir con Facebook Desde el men Sitio Nuevo Sitio creamos el sitio Juguetes:

Datos Locales: Definimos la carpeta local en la que vamos a guardar los archivos de nuestro sitio Web y tambin la subcarpeta imgenes, tal y como hacemos siempre en los sitios Web de

pginas no dinmicas.

Datos Remotos: En Acceso seleccionamos Local/red ya que vamos a probar nuestro sitio en local. En carpeta remota seleccionamos la carpeta jugueteria que hemos creado anteriormente y a la que hemos dado Uso compartido Web y permisos de lectura y escritura.

Servidor de Prueba: Seleccionamos como Modelo de servidor ASP JavaScript, porque estaremos ms familiarizados ya es un lenguaje que utilizamos al crear comportamientos en Dreamweaver. El acceso es Local/red ya que vamos a probar el sitio en local. La carpeta del servidor de prueba se refiere a la ruta de la carpeta remota que hemos creado con Uso Compartido Web, en nuestro caso C:\jugueteria. El prefijo URL se refiere a la ruta de la carpeta raz en el servidor de prueba. El servidor de prueba con IIS tiene por defecto la direccin http://localhost/. Aadimos /jugueteria que es el alias con el que hemos compartido la carpeta:

Ya hemos configurado nuestro sitio Web. Pulsamos Aceptar para finalizar.

Crear pginas dinmicas con extensin .asp

Sin comentarios Enviar por correo electrnico Escribe un blog Compartir con Twitter Compartir con Facebook Creamos una nueva pgina desde el men Archivo Nuevo Pagina Dinmica ASP JavaScript.

Creamos una pgina con una tabla en la que vamos a insertar datos que se encuentran en la tabla juguetes de la base de datos agenda. Enlazaremos con la base de datos ms adelante. Primero creamos la estructura y diseo de la pgina y la guardamos con el nombre productos.asp

La base de datos de Access de nuestro ejemplo consta de una tabla llamada juguetes, que tiene los siguientes registros:

En el siguiente artculo explicaremos como conectar con la base de datos para mostrar en la pagina asp el nombre, el material y la descripcin de cada juguete.

Conectar desde Dreamweaver con la Base de Datos de Access

Sin comentarios Enviar por correo electrnico Escribe un blog Compartir con Twitter Compartir con Facebook Con la pgina productos.asp abierta accedemos al Panel Aplicaciones pulsamos en el

+ y seleccionamos Nombre de fuente de datos (DSN)

En Nombre de Conexin escribimos el nombre de la conexin, que ser el nombre del script asp que nos permitir conectar con la base de datos. Es recomendable aadir al final conn para indicar que es un script de conexin a la base de datos.

En Nombre de fuente de datos (DSN) seleccionamos del desplegable el DSN creado para nuestra base de datos: juguetes.

Pulsamos el botn Prueba para asegurarnos que hemos conectado con xito con la base de datos.

En el panel Aplicaciones Bases de Datos veremos la base de datos, con la que hemos conectado, con las tablas y los campos:

Crear juegos de registros (consultas)

Sin comentarios Enviar por correo electrnico Escribe un blog Compartir con Twitter Compartir con Facebook

Una vez hemos conectado con la base de datos debemos crear consultas o juegos de registros que nos permitan seleccionar aquellos campos de aquellos registros que nos interesa. Accedemos al panel Vinculaciones y pulsamos en el signo Juego de registros (consulta)

+, seleccionando la opcin

El nombre que se da a la consulta por defecto ser Recordset1, si hiciramos otra consulta siguiente a esta, se llamara Recordset2 y as sucesivamente. 1.Seleccionamos la tabla juguetes sobre la que queremos hacer la consulta 2.Pulsamos SELECT 3.Aparece la sentencia SQL que selecciona todos los campos de todos los registros de la tabla juguetes.

Pulsamos Aceptar. En el panel Vinculaciones aparece la consulta que hemos efectuado con los campos seleccionados:

Insertar los elementos dinmicos

Sin comentarios Enviar por correo electrnico Escribe un blog Compartir con Twitter Compartir con Facebook Una vez hemos realizado la consulta seleccionamos cada uno de los campos del recordset (juego de registros) del panel Vinculaciones y los arrastramos a la parte de la pgina donde los queremos mostrar.

Observamos que se muestran con el nombre del recordset seguido de un punto y el nombre del campo.

Crear regiones repetidas

Sin comentarios Enviar por correo electrnico Escribe un blog Compartir con Twitter Compartir con Facebook Para evitar que en nuestra pgina solo se vea el primer registro debemos crear regiones repetidas en las que se muestren los registros seleccionados en el recordset. Una regin repetida puede ser una fila de una tabla, una lnea de texto, un elemento de lista, etc. Seleccionamos la estructura de la pgina que queremos repetir, en nuestro ejemplo es la tercera fila de la tabla, en la que hemos insertado los campos.

Accedemos al panel Comportamientos del servidor, pulsamos el Repetir regin.

+, y seleccionamos

En Mostrar seleccionamos 5 registros de una vez, para que as se muestren los registros de 5 en 5.

Pulsamos Aceptar.

Navegacin por los registros

Sin comentarios Enviar por correo electrnico Escribe un blog Compartir con Twitter Compartir con Facebook Para facilitar la navegacin por los registros podemos crear una barra de navegacin de juego de registros desde la Barra Aplicacin:

Nos situamos en la penltima fila de la tabla:

Seleccionamos Barra de Navegacin de juego de registros de la barra Aplicacin

Podemos elegir entre imagen o texto, para interactuar con la barra de navegacin, en nuestro ejemplo seleccionamos imgenes:

Pulsamos Aceptar.

Podemos observar que se han creado cuatro botones para que nos podemos mover por los registros seleccionados.

Estado de navegacin de juego de registros

Sin comentarios Enviar por correo electrnico Escribe un blog Compartir con Twitter Compartir con Facebook Nos situamos en la ltima fila de la tabla:

Insertamos Estado de navegacin de juego de registros desde la barra Aplicacin:

Resultado en la vista de diseo:

De esta forma, tendremos informacin al nmero de registro en el que nos encontramos con respecto al nmero total de registros de la consulta.

Colocar los archivos en la carpeta remota y probar el sitio en local

Sin comentarios Enviar por correo electrnico Escribe un blog Compartir con Twitter Compartir con Facebook Antes de probar nuestro sitio debemos Colocar todos los archivos del sitio en nuestra carpeta remota, desde el panel Sitio Edicin Seleccionar todo. A continuacin colocamos los archivos seleccionando el icono de la flecha azul del panel sitio:

Pulsamos en Vista Live Data As podremos ver los datos de los registros de la base de datos:

Pulsamos F12 para ver la pgina en el navegador pudiendo navegar por los registros de la base de datos con la que hemos conectado nuestra pgina asp:

Como instalar Apache, MySql y PHP para ser utilizado con Dreamweaver
Sin comentarios Enviar por correo electrnico Escribe un blog Compartir con Twitter Compartir con Facebook A la hora de realizar un uso dinmico de Dreamweaver necesitamos un servidor, una base de datos y un lenguaje de servidor. En notas anteriores explicamos como hacer esto con IIS, ASP y Access. En esta nota explicaremos como instalar Apache, MySql y PHP. Podemos hacerlo de dos maneras por separado o mediante un paquete conjunto. En esta nota explicaremos como hacerlo de esta segunda manera.

Hemos de descargarnos WampServer Escribimos en la barra de direcciones de nuestro navegador www.wampserver.com/en Hacemos clic en la opcin 1

Hacemos clic en DOWNLOAD WampServer 2.0

Descargamos el paquete Hacemos doble clic sobre el mismo

Nos saldr un mensaje de advertencia indicndonos que si tenemos instalado algn paquete anterior, primero hemos de guardar todos los datos y borrar la carpeta de la anterior versin del paquete antes de instalar la nueva.

Como deseamos seguir con la instalacin, hacemos clic en S Se iniciar el asistente para la instalacin

Hacemos clic en Next Aparecer un mensaje relativo a la licencia GNU

Marcamos la opcin I accept the agreement

Hacemos clic en Next

El asistente muestra la carpeta en donde se instalarn los tres elementos. Si queremos, podemos modificar la ubicacin, pero de momento dejaremos las opciones que aparecen por defecto.

Hacemos clic en Next

Podemos marcar ambas opciones, una o ninguna. En este caso, hacemos clic en Next

Hacemos clic en Install La instalacin comenzar

Justo antes de finalizar aparecer un cuadro de dilogo solicitando que establezcamos el navegador que hemos de utilizar de manera predeterminada. En nuestro caso ser Firefox.

Seleccionamos el archivo y hacemos clic en Abrir El instalador finalizar la instalacin

El siguiente cuadro de dilogo solicitar que establezcamos el servidor SMTP y la direccin de mail que utilizaremos por defecto. Como vamos a trabajar en local dejamos los valores por defecto.

Hacemos clic en Next

Dejamos la opcin Launch WampServer 2 now para que se ejecute en cuanto finalicemos la instalacin

Hacemos clic en Finish

Si durante la instalacin marcamos la opcin Create a Desktop icon, y al finalizar el asistente no hemos marcado la opcin Launch WampServer 2 now, entonces podemos hacer doble clic para iniciarlo.

Si no marcamos ninguna de estas opciones, podemos iniciar el WampServer desde men Inicio Todos los programas WampServer Start WampServer

Una vez iniciado el WampServer, para comprobar que funciona perfectamente, ha de aparecer un icono en la parte derecha de la barra de estado.

Hacemos clic sobre dicho icono Seleccionamos la opcin Localhost

Se abrir el navegador que hayamos establecido como predeterminado con la informacin instalada. Si en la barra de direcciones aparece http://localhost y en la pgina web se muestra la informacin de todos los elementos instalados, entonces es que todo est correcto.

Haremos lo mismo para comprobar la base de datos MySql.

Esta vez seleccionaremos la opcin phpMyAdmin

Si aparece la informacin relativa a la base de datos y sus opciones, entonces es que est correctamente configurada.

Como aun no hemos creado ninguna base de datos, no aparecer ninguna creada. En una nota futura, veremos como crear una base de datos MySQL.

Validar los datos enviados en un formulario

Sin comentarios Enviar por correo electrnico Escribe un blog Compartir con Twitter Compartir con Facebook En Dreamweaver podemos asociar comportamientos para que los datos que enviamos en un formulario cumplan ciertas condiciones, como por ejemplo, que sean nmeros, direcciones de correo electrnico, datos que haya que cumplimentar obligatoriamente, etc.

Vamos a ver un ejemplo para explicarlo: Partimos de un formulario llamado datos en el cual hemos creado tres campos de texto.

Los datos se enviarn por correo electrnico, pero queremos que se cumplan las siguientes condiciones: El campo edad debe ser un nmero comprendido entre 18 y 120 El campo email debe ser una direccin de correo electrnico, es decir debe contener una arroba. Para asociar el comportamiento al formulario nos situamos en la etiqueta form:

A continuacin accedemos al panel comportamientos:

Pulsamos el + y elegimos la opcin Validar formulario:

Se abre la ventana Validar formulario, en la que vemos los campos insertados. Seleccionamos el campo Edad y activamos la opcin Numero, escribimos en el primer valor 18 y en el ltimo valor 120, para indicar el intervalo de edad que permitimos.

Seleccionamos el campo Email y activamos la opcin Valor Obligatorio y Direccin de correo electrnico.

Pulsamos Aceptar.

Observamos que el comportamiento Validar formulario est asociado al evento onSubmit del formulario, es decir el formulario se validar en el momento que enviemos el formulario pulsando el botn Enviar:

Guardamos los cambios y comprobamos el funcionamiento del formulario en el navegador. En nuestro ejemplo utilizamos Internet Explorer. Introducimos datos en el campo edad y en el campo correo electrnico que no cumplen las condiciones.

Pulsamos enviar y vemos el mensaje de error que indica que el campo edad no contiene un nmero que cumpla el intervalo establecido y que el campo email debe contener una direccin de correo electrnico:

Si cambiamos los datos de forma que cumplan las condiciones, enviaremos el

formulario sin problemas:

Personalizar el mensaje de error al validar los datos de un formulario.

Sin comentarios Enviar por correo electrnico Escribe un blog Compartir con Twitter Compartir con Facebook Para personalizar el mensaje de advertencia o error que surge cuando introducimos datos que no cumplen las condiciones de validacin de un formulario debemos modificar el cdigo. Vamos a ver como personalizar el mensaje de error del ejemplo que hemos seguido en el artculo anterior:

Accedemos a la vista Cdigo:

Accedemos a la cabecera (head) y buscamos la etiqueta script language=JavaScript, ya que la validacin de datos la hemos creado mediante un comportamiento Javascript.

Buscamos la funcin MM_ValidateForm() Dentro de esta funcin se van evaluando las condiciones que hemos indicado, y en el caso de que no se cumplan, se genera un mensaje en ingls, (marcado en azul en la imagen)

Todo consiste en cambiar el mensaje que ha creado Dremweaver por el nuestro. Por ejemplo:

As, si no introducimos los datos de acuerdo a las condiciones que hemos establecido

se generar un mensaje de error personalizado: