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

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

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).

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).

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

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
●

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
●

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

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;

Exemplo de template

template.php

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

API

Separação em 3 camadas:
1. Definição
2. Apresentação
3. Processamento

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..

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

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

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
) );

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

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
●

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

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
●

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
●

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
●

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
●

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

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
●

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

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
●

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

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
●

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
●

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

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

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

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
●

Fim

Obrigado pela atenção

Questões?

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

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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (13)

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

Ähnlich wie Formulários Web em PHP com plug-ins avançados e AJAX (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (6)

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