Saltar para o conteúdo principal
Versão: 20

Desenvolvimento Web

Esta seção "Começando" é orientada aos usuários da primeira vez que querem uma visão geral sobre como ir de zero a 4D site que lida com dados do banco de dados. Vamos começar!

Exemplo Hello World​

Vamos começar fazendo com que o servidor Web envie "Hello World" para o navegador. A maneira mais simples de fazer isso é criar um projeto, inicie o servidor web e escreva um pequeno código que retorne um texto no método banco de dados On Web Connection.

Iniciar o servidor Web​

Para iniciar o servidor web 4D:

  1. Inicie sua aplicação 4D e crie um projeto 4D novo e vazio.
  2. No menu Executar, selecione Iniciar o servidor Web.

É tudo! O servidor web está iniciado (você pode ver o item de menu se tornou Parar o servidor Web). Está agora pronto para processar pedidos. Para o verificar, vamos apresentar a página inicial padrão.

Exibição da página inicial padrão​

O servidor 4D web cria automaticamente uma página index.html padrão na pasta raiz WebFolder, criada no mesmo nível que a pasta Projeto.

  1. Inicie um navegador da Web e conecte-se ao endereço IP do servidor da Web (a porta http padrão do servidor Web 4D é 80). Se o servidor web e o navegador estiverem na mesma máquina, você pode selecionar Teste o servidor Web no menu Executar.

É apresentada a página inicial predefinida:

Exibindo Hello World​

  1. Abra o Explorer, exiba a lista de Métodos de Banco de Dados e clique duas vezes em On Web Connection.

  2. Digite o seguinte código:

Case of 
    : ($1="/hello")
        WEB SEND TEXT("Hello World!")
    Else 
        // Erro 404 por exemplo
    End case

O método banco de dados On Web Connection é chamado para as solicitações recebidas e recebe a URL de destino no parâmetro $1. Este código muito simples apenas envia o texto para o navegador.

  1. No seu browser, introduza o seguinte URL:
http://localhost/hello

O servidor da Web processa o pedido e devolve-o:

Obter dados da base de dados​

Agora vamos ver como é simples obter dados do banco de dados. Primeiro, vamos criar uma tabela e preenchê-la com alguns dados.

Criar um banco de dados básico com, por exemplo, uma tabela única contendo alguns registros:

Exibição de dados em uma página​

A solução mais simples para exibir dados é chamar uma página de modelo que contenha etiquetas.

  1. Usando qualquer editor de texto, crie um arquivo com as seguintes linhas:
<html>
<body>
<!--#4DCODE ALL RECORDS([Friends])-->
<!--#4DLOOP [Friends]-->
<!--#4DTEXT [Friends]lastName--> <!--#4DTEXT [Friends]firstName--><br/>
<!--#4DENDLOOP-->
</body>
</html>
  1. Nomeie o arquivo "friends.shtml" e salve-o no WebFolder do seu projeto.
  2. No seu browser, introduza o seguinte URL:
http://localhost/friends.shtml

as páginas .shtml são processadas automaticamente pelo servidor web. A sua página preenchida com dados é devolvida:

Pedido REST​

Se não queremos apenas exibir dados, mas para usar, podemos utilizar ORDA e o servidor REST. Graças ao conceito ORDA, a tabela Friends é automaticamente mapeada para um dataclass e está disponível através de REST.

  1. We will use the REST server to access data: go the Settings dialog box, select Web > Web Features, and check the Expose as REST server option.

  1. No seu browser, introduza o seguinte URL:
http://localhost/rest/$catalog

O servidor Web devolve os resultados em JSON:

{
    "__UNIQID": "3F1B6ACFFE12B64493629AD76011922D",
    "dataClasses": [
        {
            "name": "Friends",
            "uri": "/rest/$catalog/Friends",
            "dataURI": "/rest/Friends"
        }
    ]
}

Você tem acesso ao catálogo, ou seja, a lista de dados e atributos expostos no datastore.

Você também pode obter qualquer dado.

  1. Introduzir o seguinte URL:
http://localhost/rest/Friends

O servidor retorna as entidades, ou seja, os dados, da dataclass Friends:

{
    "__DATACLASS": "Friends",
    "__entityModel": "Friends",
    "__GlobalStamp": 0,
    "__COUNT": 4,
    "__FIRST": 0,
    "__ENTITIES": [
        {
            "__KEY": "1",
            "__TIMESTAMP": "2020-10-27T14:29:01.914Z",
            "__STAMP": 1,
            "ID": 1,
            "lastName": "Smith",
            "firstName": "John"
        },
        {
            "__KEY": "2",
            "__TIMESTAMP": "2020-10-27T14:29:16.035Z",
            "__STAMP": 1,
            "ID": 2,
            "lastName": "Brown",
            "firstName": "Danny"
        },
        {
            "__KEY": "3",
            "__TIMESTAMP": "2020-10-27T14:29:43.945Z",
            "__STAMP": 1,
            "ID": 3,
            "lastName": "Purple",
            "firstName": "Mark"
        },
        {
            "__KEY": "4",
            "__TIMESTAMP": "2020-10-27T14:34:58.457Z",
            "__STAMP": 1,
            "ID": 4,
            "lastName": "Dupont",
            "firstName": "Jenny"
        }
    ],
    "__SENT": 4
}

Este exemplo muito simples mostra como o servidor da web interage de forma transparente com o servidor REST para retornar quaisquer dados solicitados, sempre que este exposto. Nas suas interfaces da web, você pode facilmente vincular o código javascript ou html com dados retornados. Veja o Explorador de data Web integrado para ter um exemplo de interface web sofisticada vinculada às dataclass.

Login e sessão​

Nas seções acima, nós temos acesso gratuito à aplicação através de solicitações web. No entanto, no mundo de aplicações web, a segurança do acesso aos dados é a prioridade. Ao se conectar ao servidor da web 4D, os usuários devem possuir autenticação e controlar sua navegação.

Criação de uma tabela de usuários​

A maneira mais simples e segura para registrar um usuário no servidor da Web 4D é baseada no seguinte cenário:

  • Os usuários são armazenados em uma tabela dedicada e não exposta (chamado WebUsers, por exemplo)
  • A tabela WebUsers pode ser criptografada e armazena o login do usuário e um hash de sua senha.
  1. Criar uma tabela com alguns campos, por exemplo:

  1. Escreva e execute o seguinte código para criar um usuário:
var $webUser : cs. WebUsersEntity

$webUser:=ds. WebUsers.new()
$webUser.firstName:="John"
$webUser.lastName:="Doe"
// a senha seria inserida pelo usuário
$webUser.password:=Generate password hash("123")
$webUser.userId:="john@4d.com"
$webUser.save()

Autenticação de usuários​

Para ser seguro de ponta a ponta, deve toda a conexão seja estabelecida via https.

  1. Abra o Explorador e crie um método projeto chamado "login".

  2. Escreva o seguinte código:

var $indexUserId; $indexPassword : Integer
var $userId; $password : Text
var $user; $info : Object ARRAY TEXT($anames; 0)
ARRAY TEXT($avalues; 0)

// get values sent in the header of the request WEB GET VARIABLES($anames; $avalues)

// look for header login fields
$indexUserId:=Find in array($anames; "userId")
$userId:=$avalues{$indexUserId}
$indexPassword:=Find in array($anames; "password")
$password:=$avalues{$indexPassword}

//look for a user with the entered name in the users table
$user:=ds. WebUsers.query("userId = :1"; $userId).first() If ($user#Null) //a user was found
        //check the password
    If (Verify password hash($password; $user.password))
            //password ok, fill the session
        $info:=New object()
        $info.userName:=$user.firstName+" "+$user.lastName
        Session.setPrivileges($info)
            //You can use the user session to store any information
        WEB SEND TEXT("Welcome "+Session.userName)
    Else 
        WEB SEND TEXT("Wrong user name or password.")
    End if
    Else 
    WEB SEND TEXT("Wrong user name or password.")
End if
End if
  1. Exibir as propriedades do método clicando no botão [i] no editor de código, verifique as etiquetas e URLs 4D (4DACTION...) opção e clique OK.

  1. No seu browser, introduza o seguinte URL:
http://localhost/4DACTION/login/?userID=john@4d.com&password=123

Usar tais URLs não é recomendado, só é apresentado aqui para manter o exemplo simples. Uma solicitação de login mais realista deve ser tratada através de um formulário web e uma solicitação POST. Consulte esta página para ver um exemplo de formulário POST.

Em seguida, será registado para a sessão:

As credenciais incorretas serão rejeitadas:

Assim que um usuário estiver logado, você poderá lidar com a sessão associada usando o método WEB Get Current Session ID. Ver a página Sessões de usuário.