Servidor web

4D v16

Servidor web

Además de las manipulaciones explicadas en el vídeo, también debe tener en cuenta que:

Puede utilizar con el servidor Web de 4D todas las tecnologías modernas relacionadas con la Web.

Para ir más lejos, le recomendamos que consulte la documentación, más concretamente, las secciones relativas a la gestión de sesiones, formularios, integración de frameworks y todos los elementos necesarios para un sitio Web.

Un concepto importante que se debe implementar es la etiqueta 4DINCLUDE, que le permite enviar siempre la misma página mientras maneja su contenido a través de esta etiqueta. Si usted tiene un buen manejo de las herramientas de Internet, también puede utilizar el comando JavaScript XMLHttpRequest, que le permite volver su sitio web totalmente compatible con 2.0.

Con el código genérico y llamando a los métodos existentes desde el método de conexión web, ahorrará mucho tiempo mediante la reutilización de código que ya ha escrito (métodos de búsqueda, así como también los métodos de adición, supresión, control, etc.).

Video script

En este vídeo, vamos a aprender a configurar el servidor web integrado de 4D.

La arquitectura integrada de 4D ofrece muchas ventajas ya que con la misma herramienta, con la misma programación, usted puede desarrollar tanto en monopuesto y en cliente/servidor y también publicar en la Web bases de datos sin necesidad de cambiar de herramienta.

Para empezar, vamos a verificar el puerto de publicación. En Windows, esto no es útil. En Mac, el puerto 80 es utilizado por defecto por Apache. Así que vamos a configurar este puerto, por ejemplo, en 8080 y luego iniciamos el servidor web (durante la producción, seleccionamos la opción "Lanzar servidor web al inicio de la base" para que sea automático).

La página que aparece en el navegador indica que la conexión se ha realizado. Así que vamos a ver lo que sucedió:
Volvemos a las preferencias de la base: podemos ver que se indica una página por defecto, así como también un directorio por defecto. 4D busca el directorio y la página índice (y las crea ya que aún no existen). .

Ahora nos corresponde a nosotros cambiar el contenido de la página y si es necesario el nombre de la carpeta que contendrá nuestro sitio web (tales como páginas HTML, imágenes, JavaScripts, CSSs).

Para hacer más fácil su trabajo, le recomendamos organizar sus archivos de acuerdo a una arquitectura similar a esta:

CSSs
Imágenes
index_en.html
index_fr.html
JS
páginas

...donde pueden agrupar los diferentes tipos de archivos en sus carpetas correspondientes.

En primer lugar vamos a cambiar la página principal para añadir los datos que provienen de nuestra base de datos (que podrían ser el número de registros por tabla, el contenido de una array, etc.).

Pero antes de hacer eso, debemos entender cómo circulan los mensajes entre el navegador y el servidor web de 4D.
Cuando el navegador envía una petición:

Es recibida por el servidor web, que la envía con prioridad al método "On Web Authentication" si existe
Luego, al método "On Web Connection" que es el punto central de procesamiento de las peticiones.

Este método recibe un cierto número de parámetros que nos permiten dirigir los procedimientos a realizar y las respuestas a enviar.

Supongamos que el navegador solicita:

La raíz de nuestro sitio introduciendo sólo la dirección que vimos (127.0.0.1 y el número de puerto 8080) o el nombre de dominio si estuviéramos en un sitio real: El método "On Web Connection" sólo recibe "/" como parámetro.
Si se solicita una página específica, por ejemplo 127.0.0.1:8080/TechList, en este caso, recibe todo después de la raíz del sitio, es decir, "/TechList". Así que este es el parámetro que vamos a recibir y que debemos analizar.

Pero antes de seguir adelante, vamos a cambiar una de las preferencias de 4D con el fin de elegir, por programación, la página que queremos enviar por defecto:

Volvamos a 4D
en las propiedades de la base
y eliminamos la página por defecto.

A partir de ahora, 4D ya no podrá enviar la página automáticamente a menos que primero tomemos el control.

Siempre que se realice un cambio en las preferencias, debe detener el servidor web y reiniciarlo.

Ahora, vamos a modificar el método "On Web Connection" de manera que envíe la página que queremos.

Como todos los métodos 4D, este método recibe parámetros.
Al principio, sólo vamos a tener en cuenta el primer parámetro recibido ($1).

A continuación podemos probar si el parámetro recibido es "/", y si es así, decidimos enviar una página particular; en este caso la página index.html.
Vamos a introducir el siguiente código:

 C_TEXT($1)

 Case of

    :($1="/")

       WEB SEND FILE("index.html")

 End case

Al establecer un punto de ruptura y volver a cargar la página en nuestro navegador, podemos ver que el navegador queda en espera porque el punto de ruptura se ejecutó. Podemos comprobar el parámetro recibido en $1, lo cual es "/", en este caso, vamos a enviar la página index.html.

Ahora vamos a modificar nuestra página para mostrar la fecha y hora, así como una lista de todos los técnicos.
En la carpeta Webfolder, modificamos la página index.html:

Suprimimos toda esta parte aquí,
Esta también, ya que no la necesitamos por el momento
Y copiamos esto: el texto de una etiqueta de tipo 4DVAR que significa que es una variable o un campo de la base correspondiente y terminamos el comentario.
Lo mismo ocurre aquí para la hora.

Por lo tanto, pretendemos utilizar las variables y los datos de la base.

Antes de continuar, es necesario saber que para cada conexión web, se crea un nuevo proceso y por lo tanto las variables y las selecciones de llamadas anteriores no son conservadas por 4D. (En la documentación de 4D, usted aprenderá cómo se manejan las sesiones, lo cual no se trata aquí de modo que podemos centrarnos en entender los mecanismos subyacentes, pero es posible que las variables no siempre se borren, que es el principio de las sesiones).

Si volvemos a cargar la página en el navegador, 4D nos indica (ya que se trató de encontrar las variables vdate y vtime) que estas 2 variables no están definidas. Así que tenemos que inicializarlas y asignarles valores antes de recargar la página..

Aquí asignamos los valores a estas 2 variables:

 vDate:=Current date

 vTime:=Current time

Ahora tenemos la fecha y la hora.

Antes de enviar la página, podemos crear una selección de técnicos, por ejemplo.

ALL RECORDS([Technicians])

Cuando volvemos a cargar la página, por supuesto los técnicos no aparecen, tenemos que añadirlo en el código HTML.

Vamos a poner dos saltos de línea luego hacer un bucle en los técnicos e indicar, por ejemplo, que queremos tener el contenido de un campo, será el apellido del técnico con un retorno de carro al final.

Al volver a cargar la página, ahora tenemos todos nuestros técnicos.

Por supuesto, todos los artificios de visualización HTML (listas, arrays, CSSs, DIVs) se pueden utilizar en la creación de sus páginas. El objetivo de este vídeo es ayudarle a descubrir el fondo, no la forma.

Ahora vamos a hacer que podamos hacer clic en cada uno de los técnicos. Para ello, sólo tenemos que guardar y recargar la página y ahora podemos hacer clic en cada técnico.

Aquí vemos, en la parte inferior que no se dan detalles porque en HREF no especificamos a dónde debería apuntar este enlace.

Depende de nosotros definir que URL aparecerá en 4D, teniendo en cuenta que si queremos pasar sistemáticamente en On Web Connection, la sintaxis de 4D es: (/4DCGI).
Luego elegimos, por ejemplo, ver un técnico (display_tech).

Si guardamos esto y regresamos, ahora tenemos enlaces en los que se puede hacer clic, sin embargo, no distinguimos entre cada técnico. Así que, después de este URL, debemos indicar el ID del técnico, que asegurará encontrar el correcto.

Guardamos y recargamos la página y ahora vemos el ID del técnico al final de cada URL.

Vamos a hacer seguimiento para ver qué pasa en 4D cuando hacemos clic en un enlace.
Trace Mode => Bonaparte

En el método On Web Connection, $1 contiene lo que esperamos. De manera que vamos a modificar el método para tener en cuenta esta nueva información. Vamos que $1 puede contener otra cosa más que "/", por ejemplo /4DCGI/@. Por lo tanto estamos en el contexto donde tenemos una llamada estándar al método On Web Connection.

Vamos a estructurar esta parte como lo vemos aquí:

:($1="/4DCGI/@") //si recibimos un URL destinado a la conexión web

 $URL:=$1

 $URL:=Replace string($URL;"/4DCGI/";"")

 Case of:($URL="Display_Tech/@")

       $URL:=Replace string($URL;"Display_Tech/";"")

       QUERY([Technicians];[Technicians]ID=$URL)

       WEB SEND FILE("page_tech.html")

    Else

 End case

Asignamos un valor a una variable intermedia donde remplazamos el 4DCGI; entonces, si la petición enviada es ver un técnico, vamos a cambiar de nuevo la parte que no nos interesa para terminar con el ID que queremos en esta variable.

Así que vamos a crear una página intermediaria llamada pagetech.html que contiene el nombre y apellido del técnico y su correo electrónico. Pero primero vamos a ver si podemos obtener este resultado.
Cuando refrescamos la página:

$1 contiene la cadena completa que esperamos
y luego procedemos, vamos a sustituir el 4DCGI en esta variable URL
luego finalmente muestra display_tech
y encontramosr al técnico que nos interesa en la tabla Technicians.
luego vamos a enviar page_tech.html que vamos a crear de antemano.

Vamos a:

duplicar la página de índice, page_tech.html
y aquí vamos a eliminar la fecha y la hora
recuperar el nombre y el apellido del técnico
y poner un título.

En 4D, cuando continuamos el método, nuestro navegador recibe la información page_tech nformation con el nombre y apellido del técnico.

Ahora podemos añadir, en esta página, la lista de las próximas 10 intervenciones a realizar por los técnicos. En el método On Web Connection, antes de enviar la página, sólo debemos añadir:

la búsqueda de las futuras intervenciones
ordenar por fecha de intervención
tomar las próximas 10
y añadir en nuestra página HTML aquí, un bucle en [Interventions]
y solicitar tener, por ejemplo, la fecha de intervención y el objeto en la misma línea.

 QUERY([Interventions];[Interventions]Tech_ID=[Technicians]ID)

 QUERY SELECTION([Interventions];[Interventions]Date_Intervention>=Current date)

 ORDER BY([Interventions];[Interventions]Date_Intervention;>)

 REDUCE SELECTION([Interventions];10)

Añadimos un título con un salto de línea si es necesario. Guardamos y cuando volvemos a cargar la página, tenemos la información relativa al técnico, así como también las próximas intervenciones e incluso podemos añadir código HTML más adelante para hacer que la presentación de la página sea un poco más clara.

En este punto, también podría proceder de la misma forma para que se pueda hacer clic en cada intervención añadiendo una etiqueta href. Sólo debe guardar los cambios y por supuesto, indicar el URL en el que desea recibir en su servidor web para que cada línea que valla a convertirse en "cliqueable".

Esta primera aproximación a una manera rápida y fácil de configurar un sitio web le permite aprender a publicar sus datos en Internet utilizando el motor integrado de 4D.