Aplicações Web com Webbroker – Parte I

Hoje temos inúmeras formas de desenvolver uma aplicação web utilizando o Delphi. Mas tudo começou com o surgimento do WebBroker, no Delphi 3. Na época, essa tecnologia facilitou, em muito, que programadores acostumados a trabalhar com o Delphi pudessem desenvolver uma aplicação para a web.

Pois bem, o interessante é que essa tecnologia evoluiu e continua sendo uma boa alternativa para o desenvolvimento de aplicações, nos dias atuais.

Nessa série de artigos, vamos aprender a listar dados, incluir dados, alterar dados e ainda criar uma aplicação, juntando todas as operações e exigindo login. Vamos lá, mão na massa:

Abra o Delphi 7 e acesse o menu File | New | Others e na página News procure por Web Server Application. Escolha-o e de um Ok. Nisso, aparecerá a tela abaixo, solicitando o tipo de aplicação web que você deseja. Vamos tentar entender cada tipo:

ISAPI/NSAPI Dynamic Link Library

Cria uma Dll, para ser utilizada no Windows, em conjunto com o IIS (Internet Information Server – Servidor Web da Microsoft) que será carregada a primeira vez que alguém acessar a aplicação e ficará instanciada na memória. É interessante quando a aplicação será acessada por muitos usuários. Mas o desenvolvimento com esse tipo é bem perigoso pois o desenvolvedor terá que ter bastante cuidado com variáveis e objetos criados, pois os mesmos não serão destruídos automaticamente.

CGI Stand-alone executable

Cria um executável para ser utilizado em qualquer servidor web, inclusive, marcando a opção Cross Platform poderá ser utilizado em Linux. Esse executável e carregado e descarregado da memória cada vez que alguém chama a aplicação. É uma boa maneira de começar a desenvolver para web. Mas pode ser uma bomba quando se tem muitas pessoas acessando ao mesmo tempo a aplicação e o servidor possui pouca memória.

Apache Shared Module

Cria módulos para utilização com o servidor web Apache. A diferença de 1.x para 2.x é a versão do Apache que será utilizada. Funciona da mesma maneira que uma Dll, mas ela será carregada juntamente com o servidor, ou seja, torna-se um módulo do servidor.

Web App Debugger

Utilizada para testes ou em tempo de desenvolvimento. Não necessita ter um servidor web instalado na máquina para testar a aplicação.

Figura 1. Tipos de Aplicações para Web

Para nosso aprendizado vamos utilizar CGI, então selecione e de um OK. Nesse momento é criado um WebModule, muito semelhante ao DataModule que utilizamos em aplicações normais, para armazenar os componentes de acesso à dados. Mas, no WebModule, além dos componentes de acesso a dados, colocaremos os componentes de criação de conteúdos para a Web.

A idéia desse primeiro artigo é fazer a listagem de dados da tabela Country do banco DBDEMOS.

SqlConnection (Paleta DBExpress)

-Mude a propriedade LoginPrompt para False

-Clique duas vezes sobre o mesmo

-Clique no botão “mais” (+). Escolha para DriverName Interbase e de ConnectionName informe DBDemos

-Configure os parâmetros conforme a Figura 2.

Figura 2. Configuração dos parâmetros de acesso ao banco de dados

SqlDataSet (Paleta dbExpress)

-Mude a propriedade SQLConnection para SqlConnection1

-CommandType para ctTable

-CommandText para COUNTRY

DataSetProvider (Paleta Data Access)

-Mude a propriedade DataSet para SqlDataSet1

ClientDataSet (Paleta Data Access)

-Mude a propriedade ProviderName para DataSetProvider1

-Clique duas vezes sobre o componente

-No FieldEditor (tela que se abriu quando clicou duas vezes), clique com o botão direito do mouse (abrindo o menu de contexto) e escolha Add fields... (ou CTRL+A). Nesse momento serão adicionados os campos existentes na tabela Country.

Altere a propriedade DisplayLabel de cada campo, fazendo a tradução para nosso idioma. (Name-Nome, Capital-Capital, Continent-Continente, Area-Área, Population-População).

Feito isso, podemos agora incluir um componente que criará uma Grid em Html com os dados da tabela para serem exibidos pela nossa aplicação.

Coloque o componente DataSetTableProducer e mude a propriedade DataSet para cdsPaises. Ainda, é possível configurar a aparência da Grid dando um clique duplo sobre o componente. É importante ressaltar que para isso é necessário que o ClientDataSet (cdsPaises) esteja com a propriedade Active = True para que sejam conhecidos os campos a serem configurados.

Nas configurações da aparência podem modificar a borda, cores de fundo, entre outras coisas. Isso tudo tendo uma visão de como ficará a tabela em tempo de execução.

Figura 3. Configuração da aparência da Grid

Além das propriedades exibidas no editor acima, temos, no Object Inspector mais algumas possibilidades. Inclusive o componente DataSetTableProducer possuí uma propriedade Caption para exibir um título da tabela, uma propriedade Header para exibir um cabeçalho e uma Footer para o rodapé. Nessas duas últimas propriedades é possível utilizar Tag’s Html para formatar melhor o conteúdo. Abaixo um exemplo disso, alterando a propriedade Header:

Figura 4. Colocando Tag's Html na propriedade Header

Com a utilização das Tag’s Html foi possível posicionar o texto do cabeçalho no centro, com a fonte em negrito. Para finalizarmos e testarmos a aplicação ainda é necessário adicionar uma ação (Action) na aplicação. Para tanto, clique duas vezes no WebModule e teremos o Editor de Ações.

Note que o mesmo tem um botão New. Clique no botão para criar uma ação e configure sua propriedade Default para True e PathInfo para /lista. Nessa mesma ação temos que colocar o código para retornar a Grid criada pelo componente DataSetTableProducer. Acesse a página de Eventos do Object Inspector e no evento OnAction coloque o seguinte código:

Response.Content := DataSetTableProducer1.Content;

No menu Project | Options, página Directories/Conditionals vamos configurar o Output directory para C:\Inetpub\Scripts. Com isso fica claro que estaremos utilizando o servidor web IIS da Microsoft e o diretório Scripts é o lugar onde devem estar os executáveis. Salve o projeto e compile com CTRL+F9.

Podemos fazer os primeiros testes. Abra seu navegador e tente acessar o endereço:

http://localhost/Scripts/Country.exe ou

http://localhost/Scripts/Country.exe/lista

Se você seguiu todo o artigo deverá retornar um erro. Algo como:

Figura 5. Erro amigável do servidor

Queria que acontecesse isso para nós estudarmos mais algumas possibilidades. A primeira coisa é sobre essa mensagem de erro que não me diz nada, ou seja, o que pode estar acontecendo?

Temos como alterar a configuração do nosso browser para exibir a mensagem real do erro e não essa mensagem amigável: No IE acesse o menu Ferramentas | Opções da Internet | Página | Avançadas. Procure pelo item Navegação | Mostrar mensagens de erro http amigáveis e desmarque. Acesse novamente o browser e veja a nova mensagem de erro:

Figura 6. Mensagem de erro completa

Agora sim, temos como descobrir o nosso problema. Esse erro “unavailable database” é um erro típico para usuário que sempre programaram para desktop e agora estão começando em web. Trata-se da conexão ao banco de dados, que deve ser feita através de um servidor remoto e não mais um acesso local.

Para corrigir clique duas vezes no SqlConnection1 e mude a chave DataBase para :

localhost:C:\Arquivos de programas\Arquivos comuns\Borland Shared\Data\dbdemos.gdb

ou seja, é necessário informar a máquina e o local do banco.

Figura 7. Configuração correta para o Banco

Compile novamente com o CTRL+F9, abra o browser e veja sua aplicação funcionando. No próximo artigo criaremos uma outra listagem, mais personalizada, mas com codificação manual.

Figura 8. Aplicação em funcionamento