PC SOFT

AYUDA EN LÍNEA
DE WINDEV, WEBDEV Y WINDEV MOBILE

¡Nueva funcionalidad WEBDEV 25!
Este contenido proviene de una traducción automática.. Haga clic aquí para ver la versión original en inglés.
  • Esta lección le enseñará los conceptos siguientes
  • Presentación
  • Proyecto de apertura
  • Creación de una página "formulario
  • Creación de la página
  • Creación de controles
  • Mejorar la página
  • Modificación del estilo de los controles "Login" y "Password
  • Prueba de página
  • Guardar los datos en un archivo de datos
  • Creación de el archivo de datos
  • Guardar datos
  • Prueba de página
  • Visualización de los datos introducidos
  • Añadir verificaciones de entrada
  • Entrada obligatoria
  • Comprobación de la contraseña
  • Búsqueda simple en una base de datos
  • Creación de la página
  • Creación de controles
  • Prueba de página
  • Conclusión
Lección 1.3. Mis primeras páginas
Esta lección le enseñará los conceptos siguientes
  • Creación de una página de formulario.
  • Guardar datos.
  • Comprobación de las entradas.
  • Búsqueda simple en una base de datos.
Duración de las clases

Tiempo estimado: 30 mn
Lección anteriorTabla de contenidoSiguiente lección
Presentación
Para empezar a desarrollar con WEBDEV, vamos a crear páginas.

Observación

Las páginas se utilizan para mostrar o introducir información en la pantalla. El usuario Web puede actuar directamente sobre las páginas a través de controles, botones,...
Estos ejemplos le permitirán comprender el modo de funcionamiento de los sitios Internet/Intranet y le permitirán manipular su primera base de datos.

Proyecto de apertura

  • Iniciar WEBDEV 25 (si es necesario).
  • Abrir el proyecto "Mis_primeras_páginas.
    1. Abrir la página web de WEBDEV (Ctrl + <).
    2. Haga clic en "Tutorial" y, a continuación, en "Mis primeras páginas (Ejercicio)".

Importante!

En esta parte, nos centraremos en la creación de páginas sencillas. El proyecto "My_First_Pages" es un proyecto vacío que se creó de antemano.
La creación del proyecto se presentará en otra lección.

Respuesta

Un proyecto corregido está disponible. Este proyecto contiene las diferentes páginas creadas en esta lección. Para abrir el proyecto corregido, en la página principal de WEBDEV, haga clic en "Tutorial" y seleccione "Mis primeras páginas (Respuesta)".
Creación de una página "formulario
Vamos a crear un formulario de inscripción. Este formulario contendrá varios controles utilizados para identificar a la persona.

Creación de la página

  • Para crear la página:
    1. Haga clic en Botón de creación en los botones de acceso rápido.
      Botón de creación (botones de acceso rápido)
    2. La ventana para crear nuevos elementos se abre. Esta ventana se utiliza para crear todos los elementos que se pueden asociar a un proyecto.
    3. Haga clic en "Página", y luego en "Página". Se inicia el asistente de creación de páginas.
    4. Seleccione "En blanco".
      Crear una página
    5. Asegúrese de que "Modo Responsive Web Design" esté desmarcado.. En esta parte, nos centraremos en la creación de páginas sencillas. Las páginas en modo Responsive Web Design se presentarán en Parte 8 de este tutorial.
    6. Valide (botón "OK"). La página se crea automáticamente en el editor. Aparece la ventana para guardar la página. En esta ventana se muestra:
      • El título de la página. Este título se mostrará en la barra de título del navegador.
      • El nombre de la página. Este nombre corresponde al nombre lógico de la página. Este nombre se utilizará para programar la página manipular.
      • La ubicación. Esta ubicación corresponde al directorio en el que se guardará el archivo correspondiente a la página.
    7. Escriba el título de la página: "Formulario".
      Guardar la página
    8. El nombre de la página (que se utilizará en la programación) se deduce automáticamente del título de la página.. Si este nombre no le conviene, tiene la posibilidad de modificarlo y de especificar un título que difiera del nombre de la página.
    9. Valide (botón "OK").

Observación

Por cada página creada en el editor, WEBDEV genera varios tipos de archivos:
  • Un archivo "WWH" que contiene la descripción de la página para el editor de páginas.. Este archivo se guarda en el directorio del proyecto.
  • Un archivo "AWL" que corresponde a la descripción de la página del motor WEBDEV en el subdirectorio EXE del proyecto.
  • Un archivo "HTM" que contiene el código HTML y el código JavaScript de la página que se enviará al navegador.. Este archivo se guarda en el subdirectorio "\<Nombre del proyecto>_WEB\XX" (un subdirectorio por idioma, por ejemplo "US" para inglés, "ES" para español, etc.).

Creación de controles

Vamos a crear los diferentes controles de formulario. Estos controles permitirán al usuario rellenar los datos necesarios para el registro.
El formulario incluye los siguientes controles:
  • Apellido.
  • Nombre.
  • Dirección.
  • Correo electrónico.
  • Iniciar sesión.
  • Contraseña.
Todos estos controles son controles de edición, que permiten al usuario escribir datos.
  • Para crear una control Campo de entrada:
    1. En la pestaña "Creación", en el grupo "Controles frecuentes", haga clic en Creación de una control Campo de entrada.
      Creación de una control Campo de entrada
    2. El control creado actualmente sigue el movimiento del ratón.
    3. Haga clic dentro de la página en blanco para crear el control. Se crea el control y se muestran las manijas para indicar que el control está seleccionado..

      Observación

      Debe crear un control? Mostrar el panel "Creación" de WEBDEV: todos los controles disponibles son accesibles en este panel.
  • Para modificar el título del control:
    1. Haga clic en el control (simple clic): el título se vuelve editable. Si prefiere usar el teclado, presione la tecla Espacio o la tecla Aceptar para que el título se pueda editar.
      Leyenda de una control Campo de entrada en modo edición
    2. Escriba "Apellido" y pulse Intro para validar. La leyenda se modifica inmediatamente. El nombre del control también se modifica: aparece en el tooltip cuando se desplaza sobre el control: EDT_Apellido_de_apellido.
      Tooltip de una control Campo de entrada

Observación

Estudiar el nombre de control propuesto por WEBDEV: este nombre comienza con las letras "EDT_". Este prefijo se añade automáticamente porque el proyecto utiliza un estilo de código.
El estilo de código se utiliza para definir un prefijo para cada tipo de objeto, lo que le permite identificar rápidamente el elemento:
  • una página comienza con "PAGE_" (lo vimos al guardar la página).
  • una control Campo de entrada comienza con "EDT_".
  • un botón comienza con "BTN_", etc.
Si no quieres usar este estilo de código, puedes simplemente desactivarlo.: en la cinta, en el panel "Proyecto", en el grupo "Otras acciones", amplíe "Estilo de código" y desactive la casilla "Utilizar estilo de código".
  • Para modificar las características de control detalladas, todo lo que tiene que hacer es hacer doble clic en el control. Aparece una ventana de descripción del control:
    Descripción de una control Campo de entrada
  • Vamos a modificar el tamaño máximo de entrada: todo lo que tiene que hacer es escribir el nuevo tamaño (30 en nuestro caso) en el control "Input size (characters). Se pueden modificar otras características. Haga clic en "Aceptar" para guardar los cambios.
  • Ahora, es tu turno.. Utilice el mismo método para crear los siguientes controles de edición, debajo del control "Apellido:
    Títuloescribir a máquinaenvergadura
    Nombretexto30
    DirecciónTexto multilínea
    esmaltadatexto255
    de accesotexto10
    ContraseñaContraseña10
Usted puede haber notado que estos controles no tienen el mismo tipo. Para modificar el tipo de control Campo de entrada, mostrar la ventana de descripción del control.
Editar la descripción del control (Tipos disponibles)
TSe crea la base del formulario. Ahora vamos a mejorarla.
Veamos la página que queremos obtener:
Formulario
  • La "Dirección" control Campo de entrada sirve para escribir varias líneas.
  • Los diferentes controles de edición están alineados.
  • Los controles "Login" y "Password" tienen una leyenda roja.

Mejorar la página

Vamos a hacer algunos cambios en la interfaz de esta página.
En primer lugar, echemos un vistazo al control "Address. Este control debe visualizar varias líneas en la pantalla. Vamos a ampliarla.
Luego, vamos a alinear los controles de la página.
Finalmente, modificaremos el estilo de los controles "Login" y "Password".
  • Para ampliar el control "Address":
    1. Haga clic en el control "Dirección".
    2. Aparecen las manijas.
    3. Con el ratón, agarre la manipular en la parte inferior del área de entrada y amplíe el área.
  • Esto le permite aumentar el ancho de los diferentes controles de página.
  • Para alinear los controles de la página:
    1. Seleccione el control "Apellido" y luego todos los controles de edición que se encuentran en la ventana (mantenga pulsada la tecla Ctrl mientras hace clic en los diferentes controles)..

      Observación

      Atención: el primer control seleccionado es esencial. De hecho, las opciones de alineación se basan en:
      • El tamaño del primer control seleccionado: se utilizará como referencia para el tamaño de otros controles.
      • La posición del primer control seleccionado: todos los controles seleccionados se alinearán en relación con el primer control seleccionado.
    2. Mostrar el panel "Alineación" del menú WEBDEV. Este panel contiene todas las opciones de alineación disponibles para los controles.
      Opciones de alineación
    3. Queremos que los lados izquierdo y derecho de los controles estén alineados.. Haga clic en "Justificar (por dentro y por fuera)"..

      Observación

      Si no sabe qué alineación elegir, pase el ratón por encima de las diferentes opciones propuestas por el panel "Alineación" de WEBDEV. Cuando se pasa el puntero del ratón por encima de una opción, los controles seleccionados en la página se posicionan automáticamente de acuerdo con la opción que se pasa por encima.
      Si el posicionamiento te conviene, todo lo que tienes que hacer es hacer clic en la opción.
      Si el posicionamiento no le conviene, sólo tiene que hacer clic en el interior de la página: los mandos vuelven a su posición inicial.
    4. Guardar la página: haga clic en Guardar un elemento entre los botones de acceso rápido (o presione Ctrl + S).

Modificación del estilo de los controles "Login" y "Password

Para mostrar la leyenda de los controles "Login" y "Password", vamos a modificar el estilo por defecto asociado a estos controles.
  • Para modificar el estilo por defecto:
    1. Seleccione el control "Login".
    2. Abra la ventana de descripción del control (haga doble clic en el control, por ejemplo).
    3. En la pestaña "Estilo" seleccione el elemento "Caption (CSS)".
    4. Ampliar la lista desplegable "Color" y seleccionar el color rojo.
      Estilo de un control

      Observación

      Este estilo puede ser añadido a la hoja de estilo del proyecto para ser reutilizado.. Para esto:
      1. Haga clic en "Agregar este estilo al proyecto" en el panel "Estilo WEBDEV" a la derecha de la ventana de descripción.
      2. Dale un nombre al estilo.
      3. Haga clic en el botón "Agregar".
        Añadir un estilo
      Reutilizar el estilo creado y asociarlo a otro control:
      1. Seleccione el control cuyo estilo debe ser modificado.
      2. Mostrar el menú contextual de control (clic derecho del ratón) y seleccionar "Elegir un estilo de WEBDEV".
      3. En la ventana que aparece, seleccione el estilo deseado y valide.
      Observación: La elección de un estilo existente se realizará en lección 5.
    5. Valide la ventana de descripción del control "Login".
  • Aplicar el mismo estilo al control "Password":
    1. Seleccione el control "Password".
    2. Pulsar F4.

      Observación

      La tecla F4 se utiliza para aplicar las últimas modificaciones realizadas a los controles seleccionados.. En nuestro caso, el cambio de color se aplica automáticamente al control "Password"..
    3. Obtendrá la siguiente interfaz:
      Formulario

Prueba de página

  • Ejecute la prueba de esta página (haga clic en el icono Ejecutar la prueba de una página entre los botones de acceso rápido). Usted tiene la capacidad de escribir datos, pero estos datos no serán procesados ni guardados.
  • Cierre el navegador.
Guardar los datos en un archivo de datos
Al crear un formulario, lo primero que queremos hacer es guardar los datos tecleados. Estos datos se pueden guardar en un archivo de texto, en un archivo XML o incluso en una base de datos.
Hemos elegido la última opción.
En WEBDEV, la descripción de la base de datos se realiza en un editor específico, el editor de análisis. Este editor se presentará en detalle en la siguiente sección.
En este ejemplo, vamos a definir la base de datos relacionado a los controles creados a través de una función sencilla: la ingeniería inversa.

Creación de el archivo de datos

  • Para crear automáticamente el archivo de datos:
    1. En la cinta, en el panel "Página", en el grupo "Editar", expanda "Otras acciones" y seleccione "Generar una descripción de archivo".
    2. Aparece un nuevo editor: el editor de análisis. El editor de análisis contiene la descripción de todos los archivos de datos que serán utilizados por el proyecto.
    3. El asistente de generación de archivos de datos se inicia.
      Asistente para la creación de archivos de datos
    4. El nombre del archivo de datos se rellena automáticamente con el nombre de la página. Ahora vamos a modificar algunos elementos:
      • Escriba "Registration" en el nombre.
      • Escriba "Registration" en el título.
      • Escriba "a registration" en el último control.
    5. Vaya al siguiente paso (botón"Siguiente" en la parte inferior del asistente).
    6. Elija los controles para recuperar. En nuestro caso, todos los controles de página corresponden a un ítem.
      Asistente para la creación de archivos de datos
    7. Pase a la etapa siguiente.
    8. Este paso se utiliza para definir las teclas (también llamadas índices).

      Observación

      Una clave proporciona un acceso más rápido durante las búsquedas (clave con duplicados) y/o asegura que el valor de un elemento se pueda guardar una sola vez (clave única).
    9. En este ejemplo, el elemento "Last_name" será una clave con duplicados y el elemento "Login" será una clave única.. Por lo tanto, el archivo de datos puede contener dos personas con el mismo nombre pero no con el mismo login.
      Asistente para la creación de archivos de datos
    10. Pase a la etapa siguiente.
    11. Validar el resumen. La descripción del fichero aparece en el editor de análisis.
    12. Grabar el análisis: haga clic en Grabar un elemento entre los botones de acceso rápido (o presione Ctrl + S).
    13. Cierre el editor de análisis.
    14. Aparece una ventana proponiendo la sincronización del proyecto. Se utiliza para verificar las diferencias entre las páginas creadas y los datos definidos en el análisis.. Este paso se realiza cada vez que se modifica el análisis, al volver a las páginas del proyecto.
    15. Haga clic en "Sí".
No pasemos más tiempo en la editor de análisis. Se presentará en detalle en otra lección.

Guardar datos

  • Volvamos al formulario de registro para implementar la adición de datos tecleados por el usuario de la Web en el archivo de datos. La barra de documentos se encuentra en la parte inferior del editor. En esta barra, se muestra un botón para cada documento abierto en el editor.
    Documento de barra
    • "P" representa el proyecto.
    • "PAGE_Form" representa la página "Form".
  • Necesitamos una control Botón para guardar los datos de nuestro formulario. Este control se utilizará para validar la información introducida en la página y para guardar los datos en el archivo de datos de registro.
  • Para crear un 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 creado actualmente sigue el movimiento del ratón.
    3. Haga clic dentro de la página para crear el control (debajo de los controles de edición, por ejemplo). Se crea el control.
    4. Pulse la barra espaciadora: el título se vuelve editable.
    5. Escriba "Guardar".
    6. Pulse Intro para validar.
  • Escribir el código WLanguage asociado a la control Botón:
    1. Visualice la el menú contextual del control y seleccione "Código" (o pulse F2).
    2. Se visualizan los eventos asociados al control. Las cabeceras amarillas corresponden a los eventos realizados en el servidor, y las cabeceras verdes corresponden a los eventos realizados en el navegador.
    3. Queremos guardar los datos en la base de datos. El acceso a la base de datos sólo se puede realizar en código de servidor: debemos escribir el código WLanguage en el evento "Server click" (amarillo).
    4. Escriba el siguiente código WLanguage:
      PageToFile()
      HAdd(Registration)
      Info("Record successfully added.")
    5. Vamos a estudiar este código:
      • PáginaArchivo se utiliza para recuperar el contenido de los controles de edición de la página para transferirlo a el archivo de datos.
      • HAdd se usa para escribir los datos transferidos en el archivo de datos.
      • Info se utiliza para mostrar un mensaje.
    6. Guardar (Ctrl + S) y cerrar el editor de código (cruz en la esquina superior derecha).

Prueba de página

  • Ejecute la prueba de esta página:
    1. Haga clic en el icono Ejecutar la prueba de una página entre los botones de acceso rápido.
    2. La página se muestra en un navegador.
    3. Escriba los siguientes datos:
      • Apellido: Doe
      • Nombre: Juan
      • Dirección: Flower Rd, 75000 París
      • esmaltada: john.doe@atandt.com
      • de acceso: john
      • Contraseña: john
    4. Haga clic en "SAVE".. El navegador muestra un mensaje para confirmar que el registro ha sido añadido!
    5. Cierre el navegador.

Visualización de los datos introducidos

WEBDEV propone una herramienta que permite ver el contenido de los archivos de datos durante el desarrollo del sitio (cuando las páginas de visualización aún no han sido creadas, por ejemplo).
Esta herramienta se llama WDMap. Vamos a utilizarlo para comprobar si la información tecleada ha sido guardada.
  • Para iniciar WDMap:
    1. En la cinta, en el panel "Herramientas", en el grupo "Base de datos", haga clic en "WDMap"..
    2. Seleccione el archivo de datos de "Registro". El contenido del archivo de datos se muestra.
      Visualización de registros con WDMap
    3. Podemos encontrar los datos mecanografiados.
    4. Cerrar WDMap (botón"Cerrar").
Añadir verificaciones de entrada
Ahora vamos a mejorar nuestro formulario añadiendo comprobaciones de entrada. Lo vamos a hacer:
  • obligar al usuario de la Web a escribir el apellido, el correo electrónico y el nombre de inicio de sesión.
  • forzar la contraseña para que se escriba dos veces para poder comprobarla.

Entrada obligatoria

  • Vuelva (si es necesario) a la página "PAGE_Form" haciendo clic en su nombre en la barra de documentos abiertos.
  • Para forzar la entrada en el control "Apellido":
    1. Haga doble clic en el control "Apellido: se muestra la ventana de descripción del control.
    2. Visualice el panel "Detalles".
    3. Seleccione la opción "Entrada obligatoria". Si esta opción está seleccionada, WEBDEV verificará automáticamente si esta control Campo de entrada fue llenada.
    4. Valide la ventana de descripción.
  • Aplicar esta modificación al control "Email":
    1. Seleccione el control "Email" (clic del ratón).
    2. Pulsar F4: la última acción realizada en un control se vuelve a ejecutar en el control seleccionado.
  • Del mismo modo, aplique esta modificación al control "Login".
  • Ejecute la prueba de esta página:
    1. Haga clic en el icono de Ejecutar la prueba de una página entre los botones de acceso rápido.
    2. En la ventana que aparece, haga clic en "SAVE".
    3. Se muestra automáticamente un cuadro de información para indicar que no se han rellenado los controles obligatorios..
      Mostrar un cuadro de diálogo de información
    4. Valide el cuadro de información.
    5. Cierre el navegador.

Comprobación de la contraseña

Para comprobar la contraseña, vamos a crear el control Campo de entrada permitiendo al usuario escribir su contraseña dos veces. Luego, escribiremos el código de WLanguage requerido para el cheque.
  • Crear una nueva control Campo de entrada. El título de este control es "Check" y su tipo es "Password".
  • El código WLanguage para comprobar la contraseña debe ser escrito en los eventos asociados con el "SAVE" control Botón.
    1. Haga clic en el control Botón "SAVE" y presione la tecla F2.
    2. Esta comprobación consiste en comparar el valor tecleado en el control "Password" con el valor tecleado en el control "Check. El servidor no está obligado a realizar esta comprobación: se puede realizar localmente en el navegador.
    3. Vamos a escribir el siguiente código en el evento "Click" del navegador:
      IF EDT_Password<>EDT_Check THEN
      Info("Error, the passwords are different.")
      EDT_Password = ""
      EDT_Check = ""
      ReturnToCapture(EDT_Password)
      END
    4. Vamos a estudiar este código:
      • La sentencia IF se utiliza para realizar una acción sobre una condición. En nuestro caso, la acción se realiza si los controles "Password" y "Check" son diferentes (operador'<>')..
      • En caso de diferencia, los controles de edición se "borran".: se les asigna una cadena vacía.
      • ReturnToCapture se utiliza para posicionar el cursor en el control especificado (el control "Password" aquí) sin ejecutar el código siguiente. En nuestro caso, si las contraseñas introducidas son diferentes, el control "Password" toma el foco y el código que se está ejecutando se detiene.: el código del servidor que se utiliza para guardar la información en la base de datos no se ejecutará.
  • Ejecute la prueba de esta página:
    1. Haga clic en el icono Ejecutar la prueba de una página entre los botones de acceso rápido.
    2. Introduzca la siguiente información en la página que aparece en un navegador:
      • Apellido: "Doe"
      • Nombre: "Peter"
      • esmaltada: "Peter.Doe@gmail.com"
      • de acceso: "Peter"
      • Contraseña: "Peter"
      • Verificar: "Louis"
    3. Haga clic en "GUARDAR".
    4. Se muestra automáticamente un mensaje de error para indicar que las contraseñas son diferentes.
    5. Valide este mensaje.
    6. Cerrar el navegador.
Búsqueda simple en una base de datos
Hemos visto cómo crear un formulario de entrada y cómo guardar valores en una base de datos. Continuemos con nuestro primer descubrimiento de WEBDEV realizando una búsqueda en la base de datos.
Vamos a crear una página de inicio de sesión donde se escribirá el nombre de usuario y la contraseña.. A continuación, comprobaremos si la información introducida es correcta.

Creación de la página

  • Para crear la página:
    1. Haga clic en Crear un elemento en los botones de acceso rápido.
    2. Se muestra la ventana para crear un nuevo elemento.
    3. Haga clic en "Página", y luego en "Página". Se inicia el asistente de creación de páginas.
    4. Seleccione "En blanco".
      Asistente para la creación de páginas
    5. Asegúrese de que "Modo Responsive Web Design" esté desmarcado.
    6. Valide.
    7. Se crea la página y se muestra automáticamente la ventana de guardar.
    8. Escriba el título de la página: "Iniciar sesión".
    9. Valide.

Creación de controles

La página de inicio de sesión contendrá los siguientes controles:
  • Dos controles de edición:
    • "Login" para escribir el nombre de usuario.
    • "Contraseña" para escribir la contraseña.
  • Controles de dos botones:
    • "Conectar" para comprobar el nombre de usuario y la contraseña.
    • "Regístrese" para abrir la página de registro (que fue creada de antemano).
Estos tipos de controles ya han sido creados, veamos un recordatorio de las operaciones a realizar:
  • Para crear una control Campo de entrada:
    1. En la pestaña "Creación", en el grupo "Controles frecuentes", haga clic en Creación de una control Campo de entrada.
    2. Haga clic dentro de la página en blanco para crear el control.
    3. Haga clic en el control (simple clic): el título se vuelve editable.
    4. Escriba el título ("Login" y "Password") y pulse Enter para validar.. La leyenda se modifica inmediatamente.

      Observación

      El tipo de control "Password" debe ser "Password".. Para modificar el tipo de control Campo de entrada, muestre la ventana de descripción del control.
  • Para crear un 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 la control Botón (debajo de los controles de edición por ejemplo). Se crea el control.
    3. Pulse la barra espaciadora: el título se vuelve editable.
    4. Escriba el título ("Connect" y "Register") y pulse Enter para validar.. La leyenda se modifica inmediatamente.
  • Obtendrá la siguiente página:
    Página en el editor
  • Ahora veremos en detalle cómo funcionan los controles de los botones. En primer lugar, veamos el "REGISTRO" control Botón.
    1. Seleccione la opción "REGISTRAR" control Botón.
    2. Abra la ventana de descripción del control (haga doble clic en el control).
    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 el área de "Tipo", seleccione "Mostrar una página del sitio".
      • En el área "Página", seleccione "PAGE_Form"..
        Descripción del control Botón
    4. Valide la ventana de descripción.

      Observación

      Cero línea de código: en el editor, la control Botón está asociada a la acción a realizar (abrir una página en este caso).
  • Para la control Botón "CONNECT", debemos escribir el código WLanguage para realizar la búsqueda:
    1. Seleccione la control Botón "CONNECT" y visualice los eventos asociados (F2).
    2. Escriba el siguiente código WLanguage en el evento "Click (server)":
      HReadSeekFirst(Registration, Login, EDT_Login)
      IF NOT HFound(Registration) THEN
      Error("Unknown login.")
      ELSE
      IF EDT_Password = Registration.Password THEN
      Info("OK, you are connected.")
      ELSE
      Error("Incorrect password.")
      END
      END
    3. Echemos un vistazo a este código de WLanguage:
      • Este código se ejecuta en el código del servidor porque se realiza una búsqueda en la base de datos que se encuentra en el servidor.
      • HReadSeekFirst se utiliza para encontrar un valor en un archivo de datos. La búsqueda se realiza en el nombre completo por defecto. Para realizar una búsqueda "Comienza con", basta con añadir un parámetro: la constante hStartWith.
      • HFound se utiliza para averiguar si la búsqueda realizada en el archivo de datos del Registro tuvo éxito o no. El código "IF NOT HFound" se utiliza para definir la acción a realizar si no se encuentra el login ("Login not found") así como la acción a realizar si se encuentra el login.
      • Si se encuentra el login, la contraseña introducida en el control EDT_Password se compara con la encontrada en el archivo de datos (para el login especificado). Si las dos contraseñas son iguales, entonces el usuario está conectado, de lo contrario aparece un mensaje de error..

        Observación

        El código que aquí se presenta es para fines educativos. En un proyecto real:
        • La contraseña no debe almacenarse en un lugar seguro.. Le aconsejamos que encripte la contraseña.
        • Le aconsejamos que muestre el mismo mensaje de error en caso de que el nombre de usuario o la contraseña sean incorrectos (para evitar un intento de piratear los inicios de sesión).
    4. Guardar (Ctrl + S) y cerrar el editor de código (cruz en la esquina superior derecha).

Prueba de página

  • Ejecute la prueba de esta página:
    1. Haga clic en el icono Ejecutar la prueba de una página entre los botones de acceso rápido.
    2. Introduzca los siguientes datos en la página que aparece en un navegador:
      • de acceso: john
      • Contraseña: Juan1
    3. Haga clic en el botón "CONECTAR. Aparece un mensaje de error.
    4. Validar el mensaje y modificar la contraseña: "John".
    5. Haga clic en el botón "CONECTAR. Estás conectado.
    6. Cierre el navegador.
Conclusión
Al crear sólo dos páginas, hemos descubierto varias características de WEBDEV:
  • la creación de controles: controles de edición y controles de botones,
  • las posibilidades de alinear y organizar los controles en la página,
  • la adición de registros en los archivos de datos,
  • la secuencia de páginas,
  • la búsqueda de registros en los archivos de datos,
  • el uso del servidor WLanguage y de los eventos del navegador,
  • ...
Después de esta visión general, entraremos en más detalles en la siguiente sección, especialmente con respecto al análisis y la definición de las características de la base de datos antes de explicar cómo desarrollar un sitio completo.
Lección anteriorTabla de contenidoSiguiente lección
Versión mínima requerida
  • Versión 25
Comentarios
Haga clic en [Agregar] para publicar un comentario