Pascal para Web com CGI - Parte II

zendrael

Continuando a série de artigos sobre programação para Web com (Object) Pascal, veremos agora como trabalhar com cookies, sessions, Upload de arquivos e utilizar templates para melhorar o visual de nosso site e/ou aplicação.

[ Hits: 31.345 ]

Por: Zendrael em 29/03/2013

1 0

Denuncie Favoritos Indicar Impressora

Templates

Você já deve ter se deparado com algum site cujo conteúdo se manteve mesmo após alguma alteração visual, seja ela gritante ou sutil. Uma maneira muito útil de separar o código da aplicação e o design das páginas, é através do uso de modelos ou templates.

No nosso caso, os templates nada mais são do que páginas HTML e CSS com tags especiais que serão lidas e preenchidas (quando necessário) pelo nosso CGI, criando um conteúdo gerado dinamicamente.

Dessa maneira, podemos ter vários layouts diferentes para nosso site ou aplicação e usar as tags especiais somente onde desejamos que o conteúdo, links ou outras informações sejam exibidos.

As aplicações CGI criadas com o FreePascal/Lazarus e a biblioteca fpWeb nos permitem criar tags com os caracteres que desejarmos, inclusive diferenciando-se das tags do HTML comum.

As tags para os templates nem precisam estar no formato "<tag>", elas podem ser definidas com quaisquer sinais ou sequência deles, por exemplo:

{#tag#}
[+tag+]

Para esta parte do artigo, crie uma nova action no WebModule com o name "modelo". No evento OnRequest, vamos adicionar os códigos abaixo que, por exigirem um pouco mais de explicação, dividi nos sub-tópicos abaixo.

Configurando as tags

Iniciaremos o método preparando o formato da resposta e em seguida, diremos ao CGI que permita tags no template/modelo e qual será o formato/sintaxe dessas tags:

//configurando a resposta
AResponse.ContentType := 'text/html;charset=utf-8';
//Configurando o formato das Tags dentro do HTML
//permite que sejam usadas tags nos templates
ModuleTemplate.AllowTagParams := true;
//configura como elas serão utilizadas
(*Neste caso o formato será [+nome_da_tag+] mas pode ser alterado para como
for melhor em seu projeto.*)
ModuleTemplate.StartDelimiter := '[+';
ModuleTemplate.EndDelimiter := '+]';

Informando quais tags serão interpretadas

Para fazer o parsing das tags, devemos ter um método dedicado a isso. Vamos chamá-lo de "tagReplace" e iremos declará-lo inicialmente na seção Private da classe de nosso WebModule:

procedure tagReplace(Sender: TObject; const TagString:String; TagParams: TStringList; Out ReplaceText: String);

Após a declaração do método, já podemos conectá-lo ao gerenciador de templates do nosso projeto dentro do método da action "modelo", logo após a configuração das tags:

//Conecta o método ao WebModule
ModuleTemplate.OnReplaceTag := @tagReplace;

Podemos definir agora, quais as tags que serão substituídas e o conteúdo que receberão. Para isso, vamos implementar a Procedure tagReplace que declaramos anteriormente:

procedure TFPWebModule1.tagReplace(Sender: TObject; const TagString:String; TagParams: TStringList; Out ReplaceText: String);
var
  i: integer;
  straux: string;
begin
  if AnsiCompareText(TagString, 'DataAgora') = 0 then
  begin
     //substitui a tag pela data de hoje
     ReplaceText := FormatDateTime('dddd, dd "de" mmmm "de" yyyy', Now );
  end;
  if AnsiCompareText(TagString, 'menus') = 0 then
  begin
     //inicializa straux (string auxiliar)
     straux := '';
     //cria alguns itens de menu dinamicamente
     for i:=1 to 7 do
     begin
         straux:= straux + '<a href="#">Menu Item ' + IntToStr(i) + '</a><br />';
     end;
     //retorna os itens
     ReplaceText:= straux;
  end;
end;

Preparando a aplicação para ler o template

De volta ao método da ação "modelo", indicaremos onde está a página HTML que será usada como template. Ela ainda não precisa existir, iremos codificá-la mais adiante.

Adicione o código abaixo logo após a linha onde ligamos o método tagReplace ao nosso WebModule:

//Indica onde está o HTML a ser lido
(*Segundo as configurações do servidor no primeiro artigo, este modelo estaria
um diretório acima do cgi-bin. *)
ModuleTemplate.FileName := '../main.html';

Retornando o template (modelo) interpretado

Por fim, finalizamos este método com o retorno da página com as tags já preenchidas e sinalizamos que a action foi concluída:

//Retorna o HTML com as tags substituídas
AResponse.Content := ModuleTemplate.GetContent;
//ação finalizada
Handled:= true;

Codificando o HTML e o CSS

Todos os códigos anteriores devem estar, na sequência mencionada, dentro do evento OnRequest da action "modelo", exceto pela implementação e declaração do método que substitui as tags.

Os códigos HTML e CSS também ficarão de fora do nosso CGI. Você pode até já compilá-lo neste momento, se estiver satisfeito com as configurações e caminhos feitos.

O que vamos fazer agora, é criar um simples documento HTML com um pouco de CSS embutido e com uma estrutura que nos mostrará como as tags podem ser utilizadas.

Note que não focaremos em nenhuma beleza visual neste exemplo e o correto a se fazer, é ter um arquivo CSS separado do HTML - aqui só misturaremos para fins de estudo:

<!DOCTYPE html>
<html>
  <head>
     <title>Pascal para Web com CGI</title>
     <style>
         html, body { font-family: Arial, Helvetica, Sans Serif; }
         header, nav { display: block; }
         header h1 { color: #0099cc; }
         nav { float: left; margin-right: 30px; }
         nav a { text-decoration: none; color: green; }
         nav a:hover { text-decoration: underline; color: red; }
         #content { float:left; }
     </style>
  </head>
  <body>
     <header>
         
         <h1>Site do dia [+DataAgora+]</h1>
     </header>
     <nav>
         
         [+menus+]
     </nav>
     <div id="content">
     <p>
     Conteúdo de exemplo... preencha aqui com as frases que mais gosta dos parágrafos de Loren Ipsun... !
     </p>
     </div>
  </body>
</html>

Salve este arquivo com o nome "main.html" no diretório logo acima de "cgi-bin". Se usou outro nome e caminho, atente para quando e onde for salvar este arquivo.

Agora que todas as etapas estão concluídas, podemos acessar nossa aplicação e verificar o resultado no endereço:

http://127.0.0.1/cgi-bin/projeto.cgi/modelo

Se tudo foi programado corretamente, você deverá ver a página carregada com as informações corretas preenchidas nos lugares onde as tags foram especificadas.

Através desta técnica, podemos retornar qualquer informação, resultados de consultas em bancos de dados e até outras páginas HTML.

Só nos resta melhorar a URL de acesso ao nosso CGI... é o próximo passo!

Página anterior Próxima página

Páginas do artigo

   1. Introdução
   2. Cookies e sessions
   3. Upload de arquivos
   4. Templates
   5. Escondendo a URL do CGI

Outros artigos deste autor

Pascal para Web com CGI - Parte I

Introdução ao PHP-GTK

Leitura recomendada

Configurando o Apache para executar CGIs em Kylix

Pascal para Web com CGI - Parte I

Desenvolvendo uma agenda telefônica simples no Kylix

TCollection e Generics no Free Pascal - Uma breve visão sobre lista de objetos com o Lazarus

Capturando seu desktop com uma aplicação feita em kylix