4D Doc Center : Video script

4D v14

Video script

Neste vídeo, vamos aprender a configurar o servidor web integrado de 4D.

A arquitetura integrada de 4D oferece muitas vantagens como com a mesma ferramenta, com a mesma programação, você pode desenvolver tanto em autônomo e em cliente/servidor e também publicar na Web bancos de dados sem necessidade de mudar de ferramenta.

Para começar, vamos verificar o porto de publicação. Em Windows, isto não é útil. Em Mac, a porta 80 é utilizada por padrão por Apache. Assim vamos configurar esta porta, por exemplo, em 8080 e depois iniciamos o servidor web (durante a produção, selecionamos a opção "Lançar servidor web ao inicio da base" para que seja automático).

A página que aparece no navegador indica que a conexão foi realizada. Então vamos ver o que foi que passou:
Voltamos as preferências da base: podemos ver que é indicada uma página por padrão, e também um diretório por padrão. 4D procura o diretório e a página índice (e são criada porque ainda não existem). .

Agora nos corresponde mudar o conteúdo da página e caso seja necessário o nome da pasta que conterá nosso web site (tais como páginas HTML, imagens, JavaScripts, CSSs).

Para fazer seu trabalho mais fácil, lhe recomendamos organizar seus arquivos de acordo a uma arquitetura similar a esta:

CSSs
Imagens
index_en.html
index_fr.html
JS
páginas

...onde possam agrupar os diferentes tipos de arquivos em suas pastas correspondentes.

Em primeiro lugar vamos mudar a página principal para acrescentar os dados que provém de nosso banco de dados (que poderiam ser o número de registros por tabela, o conteúdo de um array, etc.).

Mas antes de fazer isso, devemos entender como circulam as mensagens entre o navegador e o servidor web de 4D.
Quando o navegador envia uma petição:

É recebida pelo servidor web, que envia com prioridade ao método "On Web Authentication" se existe
Depois, ao método "On Web Connection" que é o ponto central de processamento dos pedidos.

Este método recebe certo número de parâmetros que nos permitem dirigir os procedimentos a realizar e as respostas a enviar.

Vamos supor que o navegador solicita:

A raíz de nosso sitio web introduzindo somente a direção que vimos (127.0.0.1 e o número de porta 8080) ou o nome de domínio se estivéssemos em um lugar real: O método "On Web Connection" só recebe "/" como parâmetro.
Se for solicitado uma página específica, por exemplo 127.0.0.1:8080/TechList, neste caso, recebe tudo depois da raíz do site, ou seja, "/TechList". Então este é o parâmetro que vamos receber e que devemos analisar.

Mas antes de seguir, vamos mudar uma das preferências de 4D com a finalidade de escolher, por programação, a página que queremos enviar por padrão:

Voltamos a 4D
Nas propriedades da base
E eliminamos a página por padrão.

A partir de agora, 4D não poderá enviar a página automaticamente a menos que primeiro tomemos o controle.

Sempre que se realize uma mudança nas preferências, você deve parar o servidor web e reiniciar.

Agora, vamos modificar o método "On Web Connection" de modo que envie a página que queremos.

Como todos os métodos 4D, este método recebe parâmetros.
Ao princípio, só vamos considerar o primeiro parâmetro recebido ($1).

A continuação podemos provar se o parâmetro recebido é "/", e se é verdade, decidimos enviar uma página particular; neste caso a página index.html.
Vamos introduzir o seguinte código:

 C_TEXT($1)

 Case of

    :($1="/")

       WEB SEND FILE("index.html")

 End case

Ao estabelecer um ponto de ruptura e voltar a carregar a página em nosso navegador, podemos ver que o navegador fica na espera porque o ponto de ruptura foi executado. Podemos comprovar o parâmetro recebido em $1, o qual é "/", neste caso, vamos enviar a página index.html.

Agora vamos modificar nossa página para mostrar a data e hora, assim como uma lista de todos os técnicos.
Na pasta Webfolder, modificamos a página index.html:

Suprimimos toda esta parte aqui,
Esta também, como não a necessitamos pelo momento
E copiamos isto: o texto de uma etiqueta de tipo 4DVAR que significa que é uma variável ou um campo da base correspondente e terminamos o comentário.
O mesmo acontece aqui para a hora.

Portanto, pretendemos utilizar as variáveis e os dados da base.

Antes de continuar, é necessário saber que para cada conexão web, é criado um novo processo e portanto as variáveis e as seleções de chamadas anteriores não são conservadas por 4D. (Na documentação de 4D, você aprenderá como são tratadas as sessões, o qual não se trata aqui de modo que podemos nos centrar em entender os mecanismos subjacentes, mas é possível que as variáveis não sempre são apagadas, que é o princípio das sessões).

Se voltamos a carregar a página no navegador, 4D nos indica (como se tratou de encontrar as variáveis vdate e vtime) que estas 2 variáveis não estão definidas. Assim que temos que inicializar elas e atribuir valores antes de recarregar a página..

Aqui assinalamos os valores a estas 2 variáveis:

 vDate:=Current date

 vTime:=Current time

Agora temos a data e a hora.

Antes de enviar a página, podemos criar uma seleção de técnicos, por exemplo.

ALL RECORDS([Technicians])

Quando voltamos a carregar a página, é claro os técnicos não aparecem, temos que atribuir-lhe no código HTML.

Vamos colocar dois saltos de linha depois fazer um laço nos técnicos e indicar, por exemplo, que queremos ter o conteúdo de um campo, será o sobrenome do técnico com um retorno de carro ao final.

Ao retornar a carregar a página, agora temos todos nossos técnicos.

É, todos os artifício de visualização HTML (listas, arrays, CSSs, DIVs) podem ser utilizados na criação de suas páginas. O objetivo deste vídeo é lhe ajudar a descobrir o fundo, não a forma.

Agora vamos fazer clique em cada um dos técnicos. Para isso, só devemos salvar e recarregar a página e agora podemos fazer clique em cada técnico.

Aqui vemos, na parte inferior que não tem detalhes porque em HREF não especificamos aonde deveria apontar este link.

Depende de nós definir que URL aparecerá em 4D, levando em consideração que se queremos passar sistematicamente em On Web Connection, a sintaxes de 4D é: (/4DCGI).
Depois escolhemos, por exemplo, ver um técnico (display_tech).

Se guardamos isso e voltamos, agora temos links nos quais podem ser feitos cliques, no entanto, não diferenciamos entre cada técnico. Então, depois deste URL, devemos indicar o ID do técnico, que garantirá encontrar o correto.

Salvamos e recarregamos a página e agora vemos o ID do técnico ao final de cada URL.

Vamos fazer seguimento para ver o que acontece em 4D quando fazemos clique em um link.
Trace Mode => Bonaparte

No método On Web Connection, $1 contém o que esperamos. De modo que vamos modificar o método para ter em mente esta nova informação. Vamos que $1 pode conter outra coisa mais que "/", por exemplo /4DCGI/@. Portanto estamos no contexto onde temos uma chamada estandarte ao método On Web Connection.

Vamos estruturar esta parte como vemos aqui:

:($1="/4DCGI/@") //se recebemos um URL destinado à conexão 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

Atribuímos um valor a uma variável intermédia onde substituímos o 4DCGI; então, se o pedido enviado é ver um técnico, vamos mudar de novo a parte que não nos interessa para terminar com o ID que queremos nesta variável.

Então vamos criar uma página intermediária chamada pagetech.html que contém o nome e sobrenome do técnico e seu email. Mas primeiro vamos ver se podemos obter este resultado.
Quando atualizamos a página:

$1 contém a cadeia completa que esperamos
e depois procedemos, vamos a substituir o 4DCGI nesta variável URL
depois finalmente mostra display_tech
e encontramos ao técnico que nos interessa na tabela Technicians.
depois vamos enviar page_tech.html que vamos criar de antemão.

Vamos a:

duplicar a página de índice, page_tech.html
e aqui vamos a eliminar a data e a hora
recuperar o nome e o sobrenome do técnico
e colocar um título.

Em 4D, quando continuamos o método, nosso navegador recebe a informação page_tech nformation com o nome e sobrenome do técnico.

Agora podemos incrementar, nesta página, a lista das próximas 10 intervenções a realizar pelos técnicos. No método On Web Connection, antes de enviar a página, só devemos acrescentar:

a pesquisa das futuras intervenções
ordenar por data de intervenção
tomar as próximas 10
e agregar em nossa página HTML aqui, um laço em [Interventions]
e solicitar ter, por exemplo, a data de intervenção e o objeto na mesma linha.

 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)

Adicionamos um título com um salto de linha caso seja necessário. Salvamos e quando voltamos a carregar a página, temos a informação relativa ao técnico, como também as próximas intervenções e inclusive podemos adicionar código HTML mais a frente para fazer que a apresentação da página seja um pouco mais clara.

Neste ponto, também poderia proceder da mesma forma para que possa fazer clique em cada intervenção adicionando uma etiqueta href. Somente deve salvar as mudanças e é claro, indicar o URL no qual deseja receber em seu servidor web para que cada linha que se converta em "clickable".

Esta primeira aproximação de um modo rápido e fácil de configurar um site lhe permite aprender a publicar seus dados em Internet usando o motor integrado de 4D.