crear un sitio web asp en dreamweaver que enlace con una base de datos de access
TRANSCRIPT
Crear un sitio Web asp en Dreamweaver que enlace con una base de datos de Access
Sin comentarios Enviar por correo electrónico Escribe un blog Compartir con Twitter Compartir con Facebook
Para crear un sitio Web dinámico con páginas 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 páginas dinámicas con extensión .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 dinámicos, es decir los campos de los registros
seleccionados, en las páginas dinámicas. (ver articulo) 10. Crear Regiones repetidas para que se muestren todos los registros
seleccionados. (ver articulo) 11. Insertar elementos que permitan la navegación por los registros seleccionados,
como Barras de navegación (ver articulo) y estado de navegación 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.Instalación y configuración de IIS (Internet Information Server) 14. 1 comentario 15. Enviar por correo electrónico 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 páginas Web en local para visualizar las páginas dinámicas .asp que creemos. Se encuentra en el CD de instalación de Windows de las versiones Windows XP y Windows 2000, tanto Server como Profesional.
En Windows XP Profesional la instalación de IIS se haría siguiendo los siguientes pasos:
Insertamos el CD de instalación de Windows Profesional y seleccionamos la
opción Instalar Componentes opcionales de Windows
17. Accedemos al Panel de Control desde el menú Inicio – Configuración – Panel de Control
Dentro del panel de control seleccionamos el icono Agregar o quitar programas
18.
19. Seleccionamos la opción Agregar o Quitar componentes de Windows del panel que se encuentra a la izquierda.
20.
21.22.23. A continuación activamos la casilla de verificación de Servicios de Internet
Information Server (IIS)24.
25.26.27. Pulsamos siguiente y esperamos a que la instalación se lleve a cabo.
Para configurar IIS en Windows profesional seguimos los siguientes pasos:
Desde Inicio – Configuración – 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 podríamos 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 dirección:
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 páginas del sitio Web predeterminado.Cuando tecleamos http://localhost accedemos a la página: http://localhost/localstart.asp que nos da información sobre IIS y una ventana emergente de ayuda con documentación.
33.34. Si creamos un archivo llamado prueba.asp y lo guardamos en el directorio C:\
Inetpub\wwwroot accederemos a él tecleando la dirección:
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 página prueba.asp la ruta de acceso desde el navegador sería:
http://localhost/Web_Dinamica/prueba.asp
35.Crear un DSN 36. Sin comentarios 37. Enviar por correo electrónico 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 conexión en local que nos permita diseñar 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 configuración del DSN. Normalmente este trámite se realiza rellenando un formulario Web para solicitar un DSN.
Pasos para crear un DSN:
Inicio – Configuración – Panel de control – Herramientas Administrativas – Orígenes de datos (ODBC)
Seleccionamos la pestaña 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 electrónico Escribe un blog Compartir con Twitter Compartir
con Facebook 46. Para poder probar las páginas dinámicas 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 botón derecho a las propiedades de la carpeta. En Uso Compartido Web activamos la opción 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 pestaña Uso Compartido de Web.50. De esta manera hemos creado un Directorio virtual, que nos servirá para probar
en local nuestro sitio web de páginas dinámicas.
Definir un nuevo sitio Web en Dreamweaver con los datos locales, los datos remotos y el servidor de prueba.
Sin comentarios Enviar por correo electrónico 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 también la subcarpeta imágenes, tal y como hacemos siempre en los sitios Web de
páginas no dinámicas.
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 más 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 raíz en el servidor de prueba. El servidor de prueba con IIS tiene por defecto la dirección http://localhost/. Añadimos /jugueteria que es el alias con el que hemos compartido la carpeta:
Ya hemos configurado nuestro sitio Web. Pulsamos Aceptar para finalizar.
Crear páginas dinámicas con extensión .asp
Sin comentarios Enviar por correo electrónico Escribe un blog Compartir con Twitter Compartir con Facebook
Creamos una nueva página desde el menú Archivo – Nuevo – Pagina Dinámica – ASP JavaScript.
Creamos una página 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 más adelante.
Primero creamos la estructura y diseño de la página 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 artículo explicaremos como conectar con la base de datos para mostrar en la pagina asp el nombre, el material y la descripción de cada juguete.
Conectar desde Dreamweaver con la Base de Datos de Access
Sin comentarios Enviar por correo electrónico Escribe un blog Compartir con Twitter Compartir con Facebook
Con la página productos.asp abierta accedemos al Panel Aplicaciones pulsamos en el
+ y seleccionamos Nombre de fuente de datos (DSN)
En Nombre de Conexión escribimos el nombre de la conexión, que será el nombre del script asp que nos permitirá conectar con la base de datos. Es recomendable añadir al final conn para indicar que es un script de conexión 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 botón 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 electrónico 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 +, seleccionando la opción Juego de registros (consulta)
El nombre que se da a la consulta por defecto será Recordset1, si hiciéramos otra consulta siguiente a esta, se llamaría Recordset2 y así sucesivamente.
1.Seleccionamos la tabla juguetes sobre la que queremos hacer la consulta2.Pulsamos SELECT3.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 dinámicos
Sin comentarios Enviar por correo electrónico 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 página 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 electrónico Escribe un blog Compartir con Twitter Compartir con Facebook
Para evitar que en nuestra página solo se vea el primer registro debemos crear regiones repetidas en las que se muestren los registros seleccionados en el recordset.
Una región repetida puede ser una fila de una tabla, una línea de texto, un elemento de lista, etc.
Seleccionamos la estructura de la página 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 +, y seleccionamos Repetir región.
En Mostrar seleccionamos 5 registros de una vez, para que así se muestren los registros de 5 en 5.
Pulsamos Aceptar.
Navegación por los registros
Sin comentarios Enviar por correo electrónico Escribe un blog Compartir con Twitter Compartir con Facebook
Para facilitar la navegación por los registros podemos crear una barra de navegación de juego de registros desde la Barra Aplicación:
Nos situamos en la penúltima fila de la tabla:
Seleccionamos Barra de Navegación de juego de registros de la barra Aplicación
Podemos elegir entre imagen o texto, para interactuar con la barra de navegación, en nuestro ejemplo seleccionamos imágenes:
Pulsamos Aceptar.
Podemos observar que se han creado cuatro botones para que nos podemos mover por los registros seleccionados.
Estado de navegación de juego de registros
Sin comentarios Enviar por correo electrónico Escribe un blog Compartir con Twitter Compartir con Facebook
Nos situamos en la última fila de la tabla:
Insertamos Estado de navegación de juego de registros desde la barra Aplicación:
Resultado en la vista de diseño:
De esta forma, tendremos información al número de registro en el que nos encontramos con respecto al número total de registros de la consulta.
Colocar los archivos en la carpeta remota y probar el sitio en local
Sin comentarios Enviar por correo electrónico 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 – Edición – Seleccionar todo.
A continuación 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 página en el navegador pudiendo navegar por los registros de la base de datos con la que hemos conectado nuestra página asp:
Como instalar Apache, MySql y PHP para ser utilizado con Dreamweaver
Sin comentarios Enviar por correo electrónico Escribe un blog Compartir con Twitter Compartir con Facebook
A la hora de realizar un uso dinámico 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 opción 1
Hacemos clic en DOWNLOAD WampServer 2.0
Descargamos el paquete Hacemos doble clic sobre el mismo
Nos saldrá un mensaje de advertencia indicándonos que si tenemos instalado algún paquete anterior, primero hemos de guardar todos los datos y borrar la carpeta de la anterior versión del paquete antes de instalar la nueva.
Como deseamos seguir con la instalación, hacemos clic en Sí
Se iniciará el asistente para la instalación
Hacemos clic en Next
Aparecerá un mensaje relativo a la licencia GNU
Marcamos la opción I accept the agreement
Hacemos clic en Next
El asistente muestra la carpeta en donde se instalarán los tres elementos. Si queremos, podemos modificar la ubicación, 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 instalación comenzará
Justo antes de finalizar aparecerá un cuadro de diálogo 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 instalación
El siguiente cuadro de diálogo solicitará que establezcamos el servidor SMTP y la dirección de mail que utilizaremos por defecto. Como vamos a trabajar en local dejamos los valores por defecto.
Hacemos clic en Next
Dejamos la opción Launch WampServer 2 now para que se ejecute en cuanto finalicemos la instalación
Hacemos clic en Finish
Si durante la instalación marcamos la opción Create a Desktop icon, y al finalizar el asistente no hemos marcado la opción 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 opción Localhost
Se abrirá el navegador que hayamos establecido como predeterminado con la información instalada. Si en la barra de direcciones aparece http://localhost y en la página web se muestra la información 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 opción phpMyAdmin
Si aparece la información 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 electrónico 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 números, direcciones de correo electrónico, 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 enviarán por correo electrónico, pero queremos que se cumplan las siguientes condiciones:
El campo edad debe ser un número comprendido entre 18 y 120El campo email debe ser una dirección de correo electrónico, es decir debe contener una arroba.
Para asociar el comportamiento al formulario nos situamos en la etiqueta form:
A continuación accedemos al panel comportamientos:
Pulsamos el + y elegimos la opción Validar formulario:
Se abre la ventana Validar formulario, en la que vemos los campos insertados.
Seleccionamos el campo Edad y activamos la opción 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 opción Valor Obligatorio y Dirección de correo electrónico.
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 botón 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 electrónico que no cumplen las condiciones.
Pulsamos enviar y vemos el mensaje de error que indica que el campo edad no contiene un número que cumpla el intervalo establecido y que el campo email debe contener una dirección de correo electrónico:
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 electrónico 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 validación de un formulario debemos modificar el código.Vamos a ver como personalizar el mensaje de error del ejemplo que hemos seguido en el artículo anterior:
Accedemos a la vista Código:
Accedemos a la cabecera (head) y buscamos la etiqueta script language=JavaScript, ya que la validación de datos la hemos creado mediante un comportamiento Javascript.
Buscamos la función MM_ValidateForm()
Dentro de esta función se van evaluando las condiciones que hemos indicado, y en el caso de que no se cumplan, se genera un mensaje en inglés, (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: