AYUDA EN LÍNEA
 WINDEVWEBDEV Y WINDEV MOBILE

¡Nueva funcionalidad de WEBDEV 2024!
Ayuda / Tutorial WEBDEV / Tutorial - Crear un sitio WEBDEV
  • Lección 2 - Manipular una base de datos
  • Volvamos a nuestro ejemplo
  • Puntos clave de esta lección
  • Crear el archivo de datos
  • Editar la página para guardar los datos
  • Crear el control Botón
  • Código WLanguage del control Botón
  • Prueba de la página
  • Visualización de los datos introducidos
  • Agregar reglas de validación
  • Entrada obligatoria
  • Verificación de la contraseña
  • Realizar una búsqueda simple en una base de datos
  • Crear la página
  • Crear los controles
  • Prueba de la página
  • En resumen
  • Dispositivos móviles

Tutorial - Crear un sitio WEBDEV

Lección 2 - Manipular una base de datos
Abordaremos los siguientes temas:
  • Guardar datos en una base de datos.
  • Controlar la entrada de datos.
  • Realizar una búsqueda simple en una base de datos.
Durée de la leçon 30 min
Volvamos a nuestro ejemplo
En la lección anterior, utilizamos el proyecto "My_First_Pages". Volveremos a utilizar este proyecto para seguir descubriendo WEBDEV.

Puntos clave de esta lección

En la lección anterior, creamos un formulario. Al crear un formulario, lo primero que hay que hacer es guardar los datos introducidos. Estos datos se pueden guardar en un archivo de texto, en un archivo XML o incluso en una base de datos.
En este caso, elegimos la última opción.
En esta lección, vamos a:
  • definir una base de datos y vincularla a los controles creados anteriormente mediante un proceso muy sencillo: ingeniería inversa.
  • editar la página para guardar los datos en la base de datos.
  • establecer reglas de validación.
  • realizar una búsqueda simple en la base de datos.
Crear el archivo de datos
WEBDEV propone un asistente que le ayuda a crear un archivo de datos a partir de los controles que se encuentran en la página:
  1. En la cinta de opciones, en la pestaña "Página", en el grupo "Edición", despliegue "Otras acciones" y seleccione "Generar una descripción de archivo".
  2. Un nuevo editor aparece: el editor de análisis.
    En WEBDEV, la base de datos se define en un editor específico, el editor de análisis. El editor de análisis contiene la descripción de todos los archivos de datos que se utilizarán en el proyecto. Veremos más sobre este editor en el tutorial Crear un proyecto y un análisis.
  3. El asistente de generación del archivo de datos se abre.
    Asistente de creación del archivo de datos
    El nombre del archivo de datos se rellena automáticamente con el nombre de la página.
  4. Vamos a modificar algunos elementos:
    • Introduzca "Registration" en el nombre.
    • Introduzca "Registration" en el título.
    • Introduzca "a registration" en el último campo.
  5. Pase a la etapa siguiente (botón "Siguiente" en la parte inferior del asistente).
  6. Elija los controles deseados. En nuestro caso, todos los controles de la página corresponden a un campo.
    Asistente de creación del archivo de datos
  7. Pase a la etapa siguiente.
  8. Esta etapa permite definir las claves (también llamadas índices).
    Las claves permiten una búsqueda más rápida (clave con duplicados) y/o garantizan que el valor de un campo se guarde solo una vez (clave única).
    En este ejemplo, "Last_name" será una clave con duplicados y "Username" será una clave única. Por lo tanto, el archivo de datos puede contener dos personas con el mismo nombre pero no con el mismo nombre de usuario.
    Asistente de creación del archivo de datos
  9. Pase a la etapa siguiente.
  10. Valide el resumen. La descripción del archivo aparece en el editor de análisis.
  11. Guarde el análisis: haga clic en Guardar un elemento en los botones de acceso rápido (o presione Ctrl + S).
  12. Cierre el editor de análisis.
  13. Una ventana le pide que sincronice el proyecto. Se comprueba la coherencia entre las páginas creadas y los datos definidos en el análisis. Esta verificación se realiza al regresar a las páginas del proyecto si se han realizado cambios en el análisis.
  14. Haga clic en "Sí".

Volvamos al formulario de registro para determinar cómo se guardarán los datos introducidos por el usuario en el archivo de datos. Para ello, vaya a las pestañas de documentos abiertos situadas en la parte superior del editor:
Pestañas de documentos abiertos
En estas pestañas:
  • "P" representa el proyecto.
  • "PAGE_Form" representa la página de formulario.
Haga clic en "Page_Form" para abrir la página correspondiente en el editor.
Editar la página para guardar los datos
Para guardar los datos del formulario, el usuario debe hacer clic en un control Botón. El código WLanguage de este botón validará la información introducida en la página y guardará los datos en el archivo de datos Registration.

Crear el control Botón

  1. En la pestaña "Creación", en el grupo "Controles frecuentes", haga clic en Crear un control Botón.
  2. El control sigue el movimiento del cursor.
  3. Haga clic dentro de la página para crear el control (debajo de los controles Campo de entrada, por ejemplo). El control se crea.
  4. Presione la barra espaciadora: el texto pasa a modo de edición.
  5. Introduzca "Save".
  6. Presione la tecla Entrar para validar.
Guarde la página (Ctrl + S). Un ícono aparece a la derecha del control.
Este ícono indica que hay un error en la UI o una posible mejora. Pase el cursor por encima del ícono para ver más detalles.
En nuestro caso, no hay ningún método abreviado de teclado asociado al control Botón. Este problema puede solucionarse automáticamente:
  • Haga clic en el ícono .
  • En la ventana que aparece, haga clic en "Corregir".
  • La tecla de acceso Entrar se asocia automáticamente al control Botón. El ícono desaparece.

Código WLanguage del control Botón

Ahora vamos a definir las acciones que se realizarán al hacer clic en el control Botón utilizando código WLanguage.
Veamos los diferentes eventos WLanguage asociados al control. Para ello, tenemos dos opciones:
  1. Haga clic derecho en el control para abrir el menú contextual y seleccione "Código".
  2. Seleccione el control y presione F2.
Los eventos asociados al control se muestran en el editor de código. Los eventos ejecutados en el servidor y en el navegador se muestran en los encabezados.
Vamos a guardar los datos en la base de datos. Solo se puede acceder a la base de datos mediante el código Servidor: el código WLanguage se debe escribir en el evento "Clic (servidor)" de color amarillo.
Introduzca el siguiente código WLanguage:
Clic en BTN_Save (servidor)
PAGE_Form.ToFile()
Registration.Add()
Info("Record added.")
Analicemos este código:
  • La función <Página>.ToFile recupera los datos de los controles Campo de entrada de PAGE_Form y los transfiere al archivo de datos Registration.
  • La función <Archivo de datos>.Add escribe los datos en el archivo de datos Registration.
  • La función Info muestra un mensaje.
Guarde los cambios (Ctrl + S) y cierre el editor de código (haga clic en la "X" de la esquina superior derecha).

Prueba de la página

Vamos a probar la página e intentar guardar los datos introducidos:
  1. Haga clic en Probar página en los botones de acceso rápido.
  2. La página se muestra en un navegador.
  3. Defina los siguientes datos:
    • Last name: Doe
    • First name: John
    • Address: 5th avenue, New York
    • Email: john.doe@atandt.com
    • Username: john
    • Password: john
  4. Haga clic en "SAVE". El navegador muestra un mensaje para confirmar que se agregó el registro.
  5. Cierre el navegador.

Visualización de los datos introducidos

WEBDEV incluye una herramienta fácil de usar para ver el contenido de los archivos de datos: WDMap. Vamos a utilizarla para comprobar si la información introducida se guardó correctamente.
WDMap permite ver el contenido de los archivos de datos durante la fase de desarrollo (por ejemplo, si aún no se han creado las páginas utilizadas para visualizar los datos). Esta herramienta no es redistribuible y solo puede utilizarse en el equipo de desarrollo.
Para ver los datos en el equipo cliente, puede utilizar el Centro de Control HSQL. Veremos más sobre esta herramienta en el tutorial Administrar una base de datos HFSQL Client/Server.
Para abrir WDMap:
  1. En la cinta de opciones, en la pestaña "Herramientas", en el grupo "Base de datos", haga clic en "WDMap".
  2. Seleccione el archivo de datos "Registration". El contenido del archivo de datos se muestra.
    Visualización de registros con WDMap
    Los datos que introdujimos anteriormente aparecen en el archivo.
  3. Cierre WDMap (botón "Cerrar").
Agregar reglas de validación
Vamos a mejorar nuestro formulario agregando reglas de validación para la entrada de datos. Vamos a:
  • establecer los controles Last name, Email y Username como campos obligatorios.
  • crear un nuevo control para confirmar la contraseña.

Entrada obligatoria

Para establecer el control "Last name" como campo obligatorio:
  1. Vuelva (si es necesario) a la página "PAGE_Form" haciendo clic en ella en las pestañas de documentos abiertos.
  2. Haga doble clic en el control "Last name": la ventana de descripción del control se abre.
  3. Vaya a la pestaña "Detalles".
  4. Seleccione la opción "Entrada obligatoria". Si esta opción está seleccionada, WEBDEV comprueba automáticamente si se rellena el control Campo de entrada.
  5. Confirme los cambios y cierre la ventana de descripción.
Para aplicar estos cambios al control "Email", no es necesario repetir todos estos pasos: WEBDEV lo hace automáticamente. Para ello:
  1. Seleccione el control "Email".
  2. Presione F4: la última acción realizada en un control se aplica al control seleccionado.
Realice las siguientes acciones: Aplique estos cambios al control "Username" usando el mismo método.

Hagamos una prueba rápida para comprobar que estos campos ahora son obligatorios:
  1. Haga clic en Probar página en los botones de acceso rápido.
  2. En la ventana que aparece, haga clic en "SAVE".
  3. Una ventana de información indica que no se han rellenado los controles obligatorios.
    Cuadro de diálogo de información
  4. Valide el cuadro de información.
  5. Cierre el navegador.

Verificación de la contraseña

Para verificar la contraseña, vamos a:
  • Crear un control Campo de entrada para que los usuarios vuelvan a introducir la contraseña.
  • Escribir el código WLanguage necesario para implementar la verificación.
Realice las siguientes acciones: Cree un nuevo control Campo de entrada. Defina el nombre "Confirm" para este control y seleccione el tipo "Contraseña".

El código WLanguage para verificar la contraseña debe escribirse en los eventos del botón "SAVE" .
  1. Haga clic en el botón "SAVE" y presione la tecla F2.
    Esta verificación compara los valores introducidos en los controles "Password" y "Confirm". No es necesario acceder al servidor para verificar la contraseña: se puede verificar directamente en el navegador.
  2. Escribe el siguiente código en el evento "Clic" (navegador):
    Clic en BTN_Save (evento onclick navegador)
    IF EDT_Password <> EDT_Confirm THEN
    Info("Error, the password and confirmation password do not match.")
    EDT_Password = ""
    EDT_Confirm = ""
    SetFocusAndReturnToUserInput(EDT_Password)
    END
  3. Analicemos este código:
    • La instrucción IF establece una condición para realizar una acción. En este caso, la acción se realiza si los controles "Password" y "Confirm" no coinciden (operador '<>').
    • Si los valores son diferentes, los controles Campo de entrada se ponen en blanco: se les asigna una cadena vacía.
    • La función SetFocusAndReturnToUserInput posiciona el cursor en el control especificado (en este caso, el control "Password") sin ejecutar el siguiente código. En nuestro caso, si las contraseñas no coinciden, el control "Password" obtiene el foco y el código que se está ejecutando se detiene: el código (servidor) que guarda los datos en la base de datos no se ejecuta.
Hagamos una prueba rápida:
  1. Haga clic en Probar página en los botones de acceso rápido.
  2. Introduzca la siguiente información en la página que aparece:
    • Last name: "Doe"
    • First name: "Peter"
    • Email: "Peter.Doe@gmail.com"
    • Username: "Peter"
    • Password: "Peter"
    • Confirm: "Louis"
  3. Haga clic en "SAVE".
  4. Un mensaje de error aparece automáticamente para indicar que las contraseñas no coinciden.
  5. Valide el mensaje.
  6. Cierre el navegador.
Realizar una búsqueda simple en una base de datos
Hemos visto cómo crear un formulario y guardar los valores en una base de datos. Ahora vamos a realizar una búsqueda en la base de datos.
Vamos a crear una página de inicio de sesión para introducir el nombre de usuario y la contraseña. A continuación, comprobaremos la validez de las credenciales de acceso.

Crear la página

Para crear la página:
  1. Haga clic en Crear un elemento en los botones de acceso rápido. La ventana de creación de nuevos elementos se abre.
  2. Haga clic en "Página", y luego en "Página". El asistente de creación de páginas se abre automáticamente.
  3. Seleccione "En blanco".
    Asistente de creación de páginas
  4. Valide.
  5. La página se crea y la ventana para guardar el nuevo elemento se abre automáticamente.
  6. Introduzca el título de la página: "Login".
  7. Valide.

Crear los controles

La página de inicio de sesión contendrá los siguientes controles:
  • Dos controles Campo de entrada:
    • "Username" para introducir el nombre de usuario.
    • "Password" para escribir la contraseña.
  • Dos controles Botón:
    • "LOG IN" para comprobar el nombre de usuario y la contraseña.
    • "REGISTER" para abrir la página de registro (que creamos anteriormente).
Ya hemos creado este tipo de controles, veamos de nuevo los pasos a seguir:
Para crear el control Campo de entrada:
  1. En la pestaña "Creación", en el grupo "Controles frecuentes", haga clic en Crear un control Campo de entrada.
  2. Haga clic dentro de la página en blanco para crear el control.
  3. Haga clic en el control (un solo clic): el texto pasa a modo de edición.
  4. Escriba el título ("Username" y "Password") y presione Entrar para validar. El título cambia inmediatamente.
    El control "Password" debe ser de tipo "Contraseña". Puede cambiar el tipo del control Campo de entrada en la ventana de descripción.
Para crear cada control Botón:
  1. En la pestaña "Creación", en el grupo "Controles frecuentes", haga clic en Crear un control Botón.
  2. Haga clic dentro de la página para crear el control Botón (debajo de los controles Campo de entrada, por ejemplo). El control se crea.
  3. Presione la barra espaciadora: el texto pasa a modo de edición.
  4. Escriba el título ("LOG IN" y "REGISTER") y presione la tecla Entrar para validar. El título cambia inmediatamente.
  5. Guarde la página.
Al igual que en la página anterior, en la esquina superior derecha del botón "LOG IN" aparece un ícono. Aquí tampoco se ha definido una tecla de acceso.
  • Haga clic en el ícono .
  • En la ventana que aparece, haga clic en "Corregir".
Obtendrá la siguiente página:
Página en el editor
Vamos a ver los controles Botón en detalle. En primer lugar, veamos el botón "REGISTER".
  1. Seleccione el botón "REGISTER".
  2. Haga doble clic en el control para abrir la ventana de descripción.
  3. En la pestaña "General", en el área "Acción del botón", vamos a especificar la acción a realizar. En nuestro caso, vamos a abrir la página de registro:
    • En la opción "Tipo", seleccione "Mostrar una página del sitio".
    • En la opción "Página", seleccione "PAGE_Form".
      Descripción del control Botón
  4. Confirme los cambios y cierre la ventana de descripción.
    No se requiere ningún código: en el editor, el control Botón se puede asociar directamente a la acción a realizar (en este caso, abrir una página).
En el caso del botón "LOG IN", necesitamos escribir código WLanguage para realizar la búsqueda:
  1. Seleccione el botón "LOG IN" y abra los eventos asociados (F2).
  2. Escriba el siguiente código WLanguage en el evento "Clic en xxx (servidor)":
    Clic en BTN_Log_in (servidor)
    Registration.ReadSeekFirst(Username, EDT_Username)
    IF NOT Registration.Found() THEN
    Error ("Unknown username.")
    RETURN
    END

    IF EDT_Password = Registration.Password THEN
    Info("You are logged in.")
    ELSE
    Error ("Wrong password.")
    END
  3. Analicemos este código WLanguage:
    • El código se ejecuta en código Servidor porque la búsqueda se realiza en una base de datos que se encuentra en el servidor.
    • La función <Archivo de datos>.ReadSeekFirst busca un valor en un archivo de datos (en este caso, el archivo de datos "Registration"). De forma predeterminada, la búsqueda se realiza por palabras completas. Para realizar una búsqueda de tipo "Comienza por", simplemente agregue la constante hGeneric como parámetro.
    • La función <Archivo de datos>.Found determina si la búsqueda realizada en el archivo de datos Registration se realizó correctamente. "IF NOT Registration.found" define la acción a realizar si no se encuentra el nombre de usuario (por ejemplo, mostrar "Nombre de usuario desconocido"). La palabra clave RETURN sale del proceso actual. Si no se encuentra el nombre de usuario, no es necesario ejecutar el siguiente código.
    • Si se encuentra el nombre de usuario, la contraseña introducida en EDT_Password se compara con la del archivo de datos (para el nombre de usuario especificado). Si las dos contraseñas coinciden, el usuario se conecta, de lo contrario aparece un mensaje de error.
      El código que se presenta aquí es para fines educativos. En un proyecto real:
      • La contraseña no debe almacenarse en un formato legible. Le recomendamos cifrar la contraseña.
      • Se recomienda mostrar el mismo mensaje de error en caso de nombres de usuario o contraseñas no válidos (para evitar intentos de hackeo).
  4. Guarde los cambios (Ctrl + S) y cierre el editor de código (haga clic en la "X" de la esquina superior derecha).

Prueba de la página

Pruebe la página:
  1. Haga clic en Probar página en los botones de acceso rápido.
  2. Introduzca los siguientes datos en la página que aparece:
    • Username: john
    • Password: john1
  3. Haga clic en el botón "LOG IN". Un mensaje de error aparece.
  4. Valide el mensaje y cambie la contraseña: "john".
  5. Haga clic en el botón "LOG IN". La sesión inicia correctamente.
  6. Cierre el navegador.
En resumen
En esta lección, descubrimos nuevas posibilidades en WEBDEV:
  • cómo agregar registros a los archivos de datos,
  • cómo ir a una página específica,
  • cómo buscar registros en los archivos de datos,
  • cómo utilizar los eventos WLanguage Servidor y Navegador,
  • ...
Proyecto completado
Si desea comprobar el resultado final de los pasos descritos en este tutorial, puede abrir una versión finalizada del proyecto. Este proyecto contiene las diferentes páginas creadas en las lecciones de esta parte. Este proyecto muestra el resultado esperado.
Para abrir el proyecto completado, vaya a la página de inicio de WEBDEV y haga clic en "Tutorial", luego en "Tutorial - First website", haga doble clic en "My first pages - Answers".

Dispositivos móviles

Los sitios web deben funcionar tanto en PC como en dispositivos móviles: es una necesidad actual. Desde el principio, un sitio web debe estar diseñado para ser utilizado en dispositivos móviles.
WEBDEV incluye diferentes layouts para simplificar el uso de sitios web tanto en el PC como en dispositivos móviles. Al utilizar layouts, solo se adapta la interfaz de la página a los dispositivos móviles. El código no cambia. No es necesario utilizar dos páginas diferentes. El sitio web sigue siendo el mismo.
Dado que estamos empezando, aún no utilizaremos layouts. Veremos este tema en el tutorial "Sitio web adaptado a dispositivos móviles".
Lección anteriorTabla de contenido
Versión mínima requerida
  • Versión 2024
Comentarios
Haga clic en [Agregar] para publicar un comentario

Última modificación: 07/12/2023

Señalar un error o enviar una sugerencia | Ayuda local