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

Formulários Web avançados em PHPFormulários Web avançados em PHP

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

http://www.phpclasses.org/formsgeneration

Manuel Lemosmlemos@acm.org

PHPSC ConfChapecó – Santa Catarina

20 de Junho de 2008Licença desta palestra: Creative Commons

Attribution-NoDerivs 2.5 Atribuição-Não a obras Derivadas 2.5

Licença Creative Commons Licença Creative Commons Atribuição-Não a obras Derivadas 2.5Atribuiçã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 "fair use") 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).

Creative Commons License DeedCreative Commons License DeedAttribution-No Derivs 2.5 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).

Classe Forms Generation and Classe Forms Generation and Validation – O que é?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

Histórico do desenvolvimento da Histórico do desenvolvimento da classeclasse

● 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

Histórico do lançamento dos plug-insHistó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

Modo de usoModo de uso

O script que apresenta é o mesmo que processaCriar um objeto da

classe

Definir os campos do formulário

Carregar os valores

enviados, se for o caso

Mostrando o formulário

pela primeira vez?

Validar os valores

enviados

Os campos estão todos

válidos?

Processar o formulário

Mostra o formulário

Mostra o formulário

denotando os campos

inválidos

Sim

Não

Não

Sim

Exemplo de usoExemplo de usoinclude('forms.php');

$form = new forms_class;

$form->AddInput(array( 'TYPE'=>'text', 'NAME'=>'nome', 'ID'=>'nome', 'LABEL'=>'<u>N</u>ome, 'ACCESSKEY'=>'N', 'ValidateAsNotEmpty'=>1, 'ValidationErrorMessage'=> 'Não foi indicado o nome.'));

$form->LoadInputValues();

$processado=false;

if($form->WasSubmitted()) { $erro=$form->Validate($verificar); if(strlen($erro)) echo 'Erro: ', $erro; else { // Processamento vai aqui $processado=true; }}

if($processado) echo 'Formulário processado!';else { $form->StartLayoutCapture(); require('template.php'); $form->EndLayoutCapture(); $form->DisplayOutput();}

Exemplo de templateExemplo de template

template.php

<p><?php $form->AddLabelPart(array( 'FOR'=>'nome' ));?>: <?php $form->AddInputPart('nome');?></p>

APIAPI

Separação em 3 camadas:

1. Definição

2. Apresentação

3. Processamento

API: Definição do formulárioAPI: 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..

API: Apresentação do formulárioAPI: Apresentação do formulário

● AddInputPart, AddLabelPart, AddDataPartAdiciona um campo, um rótulo ou HTML à apresentação do formulário

● StartLayoutCapture, EndLayoutCaptureCaptura automática de HTML para a apresentação do formulário

● FetchOutput, DisplayOutputGera o HTML e Javascript do formulário

● PageHead, PageLoad, PageUnloadGera o HTML e Javascript que tem de ir para seção da página HEAD ou atributos ONLOAD e ONUNLOAD da marca BODY

API: Processamento do formulárioAPI: Processamento do formulário

● LoadInputValuesExtrai valores enviados, descarta valores forjados, converte valores escapados, formata máscaras

● WasSubmittedVerifica se o formulário está sendo enviado para processamento ou está sendo apresentado pela primeira vez

● ValidateVerifica se os valores dos campos de todo formulário ou de parte são válidos

● GetInputValue, GetCheckedState, GetCheckedRadioRetorna os valores extraídos dos campos do formulário

Definição dos campos do formulárioDefiniçã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

) );

Filtragem e validação de valoresFiltragem 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

Tipos de validação pré-definidosTipos 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

Apresentação do formulário usando Apresentação do formulário usando templatestemplates

● Plug-in para templates de SmartyPré-filtro que substitui HTML e marcas {input}, {label} por chamadas às funções AddDataPart, AddInputPart, AddLabelPart

● HTML com PHPStartLayoutCapture e EndLayoutCapture delimitam a captura de HTML para depois adicionar com AddDataPart

● Layout automáticoApresentação padronizada sem definição manual de HTML

Plug-insPlug-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

Plug-in: Data do calendárioPlug-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

Plug-in: Verificação de usuário Plug-in: Verificação de usuário humano usando CAPTCHAhumano 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

Plug-in: Localidade no mapaPlug-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

Plug-in: Animação com efeitos Plug-in: Animação com efeitos visuaisvisuais

● 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

Plug-in: Layout automático na verticalPlug-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

Plug-in: Layout paginadoPlug-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

Plug-in: Envio seguroPlug-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

Plug-in: Envio do formulário usando Plug-in: Envio do formulário usando AJAXAJAX

● 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

COMET: AJAX com IFRAMECOMET: AJAX com IFRAME

Plug-in: Combos interligadosPlug-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

Plug-in: Auto-completar textoPlug-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

Plug-in: Barra de progresso de Plug-in: Barra de progresso de uploadupload

● 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

Plug-ins de terceirosPlug-ins de terceiros

● Xinha: Alessandro Bianchi (Itália)Controle para editar HTMLhttp://www.phpclasses.org/xinha_plug_in

● Cal: Alessandro Bianchi (Itália)Controle de calendário com popup para navegar pelos meses e anoshttp://www.phpclasses.org/plugin_cal_class

● FCKEditor: Matías Montes (Argentina)Controle para editar HTMLhttp://www.phpclasses.org/form_fckeditor

● O seu plug-inQualquer um pode desenvolver os seus plug-ins

Planos futurosPlanos 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âmicosExemplo: inserir, listar, alteram e apagar registros de banco de dados

Oportunidades de contribuiçãoOportunidades 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

FimFim

Obrigado pela atenção

Questões?

ReferênciasReferê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