Formulários Web em PHP com plug-ins avançados e AJAX

8,791 views

Published on

Tutorial sobre a classe de geração e validação de formulários Web em PHP e seus plug-ins
avançados com suporte a AJAX

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,791
On SlideShare
0
From Embeds
0
Number of Embeds
4,155
Actions
Shares
0
Downloads
104
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Formulários Web em PHP com plug-ins avançados e AJAX

  1. 1. Formulários Web avançados em PHP Formulários Web em PHP com plug-ins avançados e AJAX http://www.phpclasses.org/formsgeneration Manuel Lemos mlemos@acm.org PHPSC Conf Chapecó – Santa Catarina 20 de Junho de 2008 Licença desta palestra: Creative Commons Attribution-NoDerivs 2.5 Atribuição-Não a obras Derivadas 2.5
  2. 2. Licença Creative Commons Atribuição-Não a obras Derivadas 2.5 Você pode: copiar, distribuir, exibir e executar a obra ● fazer uso comercial da obra ● Sob as seguintes condições: Atribuição. Você deve dar crédito ao autor original, da forma especificada por Manuel Lemos. Vedada a Criação de Obras Derivadas. Você não pode alterar, transformar ou criar outra obra com base nesta. Para cada novo uso ou distribuição, você deve deixar claro para outros os termos da licença desta ● obra. Qualquer uma destas condições podem ser renunciadas, desde que Você obtenha permissão de ● Manuel Lemos. Qualquer direito de uso legítimo (ou quot;fair usequot;) concedido por lei, ou qualquer outro direito protegido pela legislação local, não são em hipótese alguma afetados pelo disposto acima. Este é um sumário para leigos da Licença Jurídica (na Íntegra).
  3. 3. Creative Commons License Deed Attribution-No Derivs 2.5 You are free: to Share -- to copy, distribute, display, and perform the work ● to make commercial use of the work ● Under the following conditions: Attribution. You must attribute the work in the manner specified by Manuel Lemos. No Derivative Works. You may not alter, transform, or build upon this work. For any reuse or distribution, you must make clear to others the license terms of this work. ● Any of these conditions can be waived if you get permission from Manuel Lemos. ● Your fair use and other rights are in no way affected by the above. This is a human-readable summary of the Legal Code (the full license).
  4. 4. Classe Forms Generation and Validation – O que é? Classe de objetos em PHP ● Gera HTML para apresentar formulários Web ● Gera Javascript para validar formulários antes do ● browser enviar para o servidor Valida formulários no servidor através do código da ● PHP da própria classe Extensível através de classes plug-in ● Open Source com licença tipo BSD ● Bastante reputada no mundo do PHP e Open Source ● Mais de 57.000 usuários distintos baixaram do site PHPClasses Número 214 no top de popularidade do Freshmeat
  5. 5. Histórico do desenvolvimento da classe 12/01/1999: Criação da classe ● ../../1999: Oferta da classe em listas de discussão ● 05/06/1999: Usuário faz grandes elogios na lista php-general ● 18/06/1999: Início do site PHPClasses ● 24/06/1999: Lançamento do site PHPClasses ● 16/12/2002: Plug-in para integração com Smarty ● 03/04/2004: Templates usando HTML com PHP ● 14/06/2004: Controles especiais usando plug-ins ● 29/12/2004: Processamento de eventos do browser no servidor ● 25/06/2005: Interligação de controles disparada por eventos ● 14/03/2006: Envio de formulários por AJAX ●
  6. 6. Histórico do lançamento dos plug-ins 14/06/2004: Date ● 29/12/2004: CAPTCHA ● 25/06/2005: Linked select ● 30/12/2005: MySQL, Metabase, MDB2 linked select ● 14/03/2006: AJAX submit ● 26/03/2006: Layout vertical ● 24/05/2006: Map location ● 21/06/2006: Autocomplete ● 12/07/2006: MySQL, Metabase, MDB2 autocomplete ● 28/07/2006: Animation ● 16/12/2006: Upload progress ● 03/04/2007: Secure submit ● 20/02/2008: Layout paged ●
  7. 7. Modo de uso O script que apresenta é o mesmo que processa Criar um Validar os objeto da valores classe enviados Não Mostrando o Definir os Os campos formulário Processar o campos do estão todos pela primeira formulário formulário válidos? Sim vez? Não Sim Mostra o Carregar os formulário valores Mostra o denotando os enviados, se campos formulário for o caso inválidos
  8. 8. Exemplo de uso if($form->WasSubmitted()) { include('forms.php'); $erro=$form->Validate($verificar); if(strlen($erro)) $form = new forms_class; echo 'Erro: ', $erro; else { $form->AddInput(array( // Processamento vai aqui 'TYPE'=>'text', $processado=true; 'NAME'=>'nome', } 'ID'=>'nome', } 'LABEL'=>'<u>N</u>ome, 'ACCESSKEY'=>'N', if($processado) 'ValidateAsNotEmpty'=>1, echo 'Formulário processado!'; 'ValidationErrorMessage'=> else { 'Não foi indicado o nome.' $form->StartLayoutCapture(); )); require('template.php'); $form->EndLayoutCapture(); $form->LoadInputValues(); $form->DisplayOutput(); } $processado=false;
  9. 9. Exemplo de template template.php <p><?php $form->AddLabelPart(array( 'FOR'=>'nome' )); ?>: <?php $form->AddInputPart('nome'); ?></p>
  10. 10. API Separação em 3 camadas: 1. Definição 2. Apresentação 3. Processamento
  11. 11. API: Definição do formulário AddInput ● Adiciona campo ao formulário com determinados parâmetros Connect ● Interligar campos de forma que quando ocorre um evento num campo, executa uma ação noutro campo Exemplo: quando muda um combo, simula o click num botão de enviar Variáveis da classe para configuração ● Exemplo: ACTION, METHOD, TARGET, etc..
  12. 12. API: Apresentação do formulário AddInputPart, AddLabelPart, AddDataPart ● Adiciona um campo, um rótulo ou HTML à apresentação do formulário StartLayoutCapture, EndLayoutCapture ● Captura automática de HTML para a apresentação do formulário FetchOutput, DisplayOutput ● Gera o HTML e Javascript do formulário PageHead, PageLoad, PageUnload ● Gera o HTML e Javascript que tem de ir para seção da página HEAD ou atributos ONLOAD e ONUNLOAD da marca BODY
  13. 13. API: Processamento do formulário LoadInputValues ● Extrai valores enviados, descarta valores forjados, converte valores escapados, formata máscaras WasSubmitted ● Verifica se o formulário está sendo enviado para processamento ou está sendo apresentado pela primeira vez Validate ● Verifica se os valores dos campos de todo formulário ou de parte são válidos GetInputValue, GetCheckedState, GetCheckedRadio ● Retorna os valores extraídos dos campos do formulário
  14. 14. Definição dos campos do formulário Array associativo passado para a função AddInput: Parâmetros obrigatórios: TYPE, NAME, ID ● Parâmetros de apresentação: CLASS, LABEL, etc. ● Parâmetros de validação ● Parâmetros específicos do tipo de campo ● Exemplo: ● $form->AddInput( array( 'TYPE'=>'password', 'NAME=>'senha', 'ID'=>'senha', 'CLASS'=>'senha' 'ValidateAsNotEmpty'=>true, 'ValidationErrorMessage'=>'O campo senha está vazio.', 'MAXLENGTH'=>10 ) );
  15. 15. Filtragem e validação de valores Geração de Javascript para validação no browser ● Carregamento de valores enviados ● Filtragem de valores forjados ● Exemplo: MAXLENGTH, DiscardInvalidValues Conversão de valores escapados – magic quotes ● Formatação de máscaras com expressões regulares ● Exemplo: CEP → “^([0-9]{5})-?([0-9]{3})$” → “1-2” Validação no lado do servidor pela classe e plug-ins ● Mensagens de erro ● Foco e iluminação dos campos inválidos ● Exemplo: InvalidCLASS, InvalidSTYLE
  16. 16. Tipos de validação pré-definidos Campo vazio, tamanho mínimo ● Campo igual ou diferente a outro ou a um valor ● Número inteiro, decimal ou vírgula flutuante ● E-mail, número de cartão de crédito ● Conforme uma expressão regular ou não ● Grupo de campos radio ou checkbox selecionado ● Funções definidas pelo desenvolvedor ● Validação especial implementada por plug-in ●
  17. 17. Apresentação do formulário usando templates Plug-in para templates de Smarty ● Pré-filtro que substitui HTML e marcas {input}, {label} por chamadas às funções AddDataPart, AddInputPart, AddLabelPart HTML com PHP ● StartLayoutCapture e EndLayoutCapture delimitam a captura de HTML para depois adicionar com AddDataPart Layout automático ● Apresentação padronizada sem definição manual de HTML
  18. 18. Plug-ins Proporcionam novos tipos de controles, ● comportamentos, validação, ou layout de outros controles Implementados por classes derivadas da classe base ● de plug-in Podem gerar HTML ou Javascript ou não ●
  19. 19. Plug-in: Data do calendário Apresenta 3 controles para escolha do ano, mês e dia ● A data aparece formatada de forma configurável ● Aceita qualquer data válida entre os anos 1 e 9999 DC ● Pode restringir a data entre um dia inicial e outro final ●
  20. 20. Plug-in: Verificação de usuário humano usando CAPTCHA Gera uma imagem com o texto que deve ser digitado ● A imagem aparece ofuscada para dificultar os robôs ● Um botão pode ser usado para redesenhar a imagem ● O texto pode expirar ao fim de um periodo de tempo ●
  21. 21. Plug-in: Localidade no mapa Obtem coordenadas dum local indicado pelo usuário ● Os mapas são apresentados pela Google Maps API ● As coordenadas aparecem em campos de texto ● O nível de zoom pode ser ajustado de várias formas ●
  22. 22. Plug-in: Animação com efeitos visuais Anima elementos da página através de efeitos visuais ● Cada animação tem uma sequência de efeitos visuais ● Várias sequências podem ser animadas em paralelo ● São suportados diversos tipos de efeitos: ● 1) Substituir ou inserir conteúdo de um elemento 2) Mostrar ou esconder elementos 3) Aparecer ou desaparecer um elemento suavemente 4) Cancelar animação paralela para sincronizar efeitos
  23. 23. Plug-in: Layout automático na vertical Dispõe vários campos na vertical, um por cada linha ● Não requer uso de HTML na forma de uso padrão ● O HTML dos templates de cada campo é redefinível ● Campos inválidos aparecem com uma marca especial ● Certos campos podem ser tornados invisíveis ●
  24. 24. Plug-in: Layout paginado Mostra vários campos por páginas, um de cada vez ● Mostar vários botões para trocar de página ● Pode usar efeito de transição suave quando troca de ● página
  25. 25. Plug-in: Envio seguro Prevenção de ataques do tipo CSRF – Cross-Site ● Request Forgery Botão de envio com campo de validação escondido ● Uma chave secreta é passada pelo campo escondido ● A chave deixa de ser valida ao fim de um certo tempo ●
  26. 26. Plug-in: Envio do formulário usando AJAX Envia o formulário sem recarregar a página ● IFRAME escondido é mais poderoso e portátil ● Pode exibir mensagens sobre atividade no servidor ● Gera Javascript para executar ações como resposta: ● 1) Substituir ou inserir conteúdo na página atual 2) Alterar uma propriedade de um elemento da página 3) Pausar durante um periodo definido 4) Redirecionar o browser para outra página 5) Executar um comando de Javascript arbitrário
  27. 27. COMET: AJAX com IFRAME
  28. 28. Plug-in: Combos interligados Pode interligar 2 ou mais campos combo em cadeia ● Quando o valor de um muda, troca as opções doutro ● Opções estáticas ou trazidas do servidor por AJAX ● Tem versões para pegar opções de bancos de dados ●
  29. 29. Plug-in: Auto-completar texto Completa texto digitado a partir de lista de palavras ● Mostra as palavras que podem completar num menu ● Pode obter as palavras do servidor através de AJAX ● Tem versões para pegar opções de bancos de dados ●
  30. 30. Plug-in: Barra de progresso de upload Envia um pedido AJAX em paralelo com o envio do ● formulário Usa a extensão uploadprogress para vigiar o ● progresso do upload a cada segundo Mostra uma barra de progresso com estatísticas ● opcionais de velocidade e tempo estimado para o fim
  31. 31. Plug-ins de terceiros Xinha: Alessandro Bianchi (Itália) ● Controle para editar HTML http://www.phpclasses.org/xinha_plug_in Cal: Alessandro Bianchi (Itália) ● Controle de calendário com popup para navegar pelos meses e anos http://www.phpclasses.org/plugin_cal_class FCKEditor: Matías Montes (Argentina) ● Controle para editar HTML http://www.phpclasses.org/form_fckeditor O seu plug-in ● Qualquer um pode desenvolver os seus plug-ins
  32. 32. Planos futuros Definição de formulários através de arquivos XML ● Templates visuais para edição em programas tipo ● DreamWeaver Cache da definição e da apresentação do formulário ● Plug-in para processar eventos de arrastar e soltar ● controles e elementos de página (Drag and Drop) Plug-in para scaffolding: andaime para montagem de ● listagens de dados dinâmicos Exemplo: inserir, listar, alteram e apagar registros de banco de dados
  33. 33. Oportunidades de contribuição Corrigir e reportar eventuais bugs ● Sugerir novas capacidades ● Desenvolver novos plug-ins ● Traduzir a documentação para Português ● Divulgar o projeto ●
  34. 34. Fim Obrigado pela atenção Questões?
  35. 35. Referências Página da classe de formulários ● http://www.phpclasses.org/formsgeneration Lista de discussão geral ● http://br.groups.yahoo.com/group/forms-dev Lista de discussão para quem fala português ● http://br.groups.yahoo.com/group/forms-pt

×