Jolvani Morgan
[email protected]
https://sites.google.com/view/professormorgan/
Desenvolvimento de Sistemas Web
Roteiro
Introdução
Passagem de Parâmetros
Formulários
Componentes HTML
Novidades HTML5
Tratamento de dados
Link: http://www.html5rocks.com/pt/tutorials/forms/html5forms/
Introdução
• Um dos objetivos na construção de páginas dinâmicas é
poder capturar dados e manipulá-los, no PHP isso pode
ser feito através de formulários em HTML.
• Outro meio de enviar dados para uma pagina PHP é
através do endereço de requisição (url):
Introdução
• O script que irá receber o Formulário deverá tratar os dados
enviados, através do método de envio post/get
• As variáveis $_POST e $_GET, são arrays que armazenam os
dados enviados pelo formulário e/ou na requisição da página,
cada campo do formulário, e cada parâmetro enviado junto com
o endereço, se transformam em um elemento desses vetores
• Existe ainda uma variável $_REQUEST, esta contem o conteúdo
de $_POST e também de $_GET
Passagem de Parâmetros
Formas para passagem de parâmetros de uma página
para outra via PHP:
URL (via método GET)
Formulário (Via métodos GET e POST, e REQUEST)
Cookies
Sessões
Método GET
As informações através de GET podem ser passadas:
Via Formulário ou via URL.
Exemplo link:
Método GET
Também é possível enviar vários Parâmetros, usando a
seguinte concatenação:
url?atrib1=valor1&atrib2=valor2&atrib3=valor3
Recuperando Valores, Método GET
Para recuperar os valores enviados através do método
GET, basta utilizar a variável global $_GET, indexado pelo
nome do parâmetro:
Formulários
Permitem passar informações adquiridas do usuário
para um arquivo PHP (gravar em um arquivo texto ou no
banco de dados).
Recebem diferentes tipos de entrada de dados
Delimitados pelas tags
<form>
...
</form>
Cada componente do formulário possui um nome “name”
e um valor “value”.
– Ex:
<input name=“nome" type="text" id="nome" value="" />
Enviar dados via formulário
No formulário, existe um atributo “action” que indica para
onde os dados serão enviados:
Exemplo:
Enviar dados via formulário
No formulário, cada campo possui um atributo “name”
que serve como parâmetro para enviar os dados :
Exemplo:
Por padrão, os dados são enviados pelo método GET.
Entretanto, é possível utilizar o método GET ou POST, que fazem
a mesma tarefa mas de maneira diferente...
GET: empacota as variáveis, e anexa os valores antes de enviar ao
servidor
POST: também empacota, mas envia de forma oculta para o servidor
Formulários
Como receber as informações do formulário?
Através das variáveis superglobais $_GET ou $_POST
$_GET
Os parâmetros são passados pela própria url:
(Inserir.php?nome=vanessa&[email protected])
OBS: observe o uso de “?” e “&”
$_POST
Os parâmetros são enviados escondidos junto com a requisição
É mais seguro e mais elegante
Enviar dados via formulário
Para especificar o tipo do método de envio, é usado o
atributo “method” da tag <form>. Se não for declarado,
por padrão usa-se o método GET.
Exemplo:
Enviar dados ao formulário via GET
No caso de se usar POST, é necessário indicar
explicitamente o método de envio:
Exemplo:
Recebendo do formulário via POST
Para receber os dados enviados pelo método POST utiliza-
se o array global $_POST, indexado pelo nome do campo:
Com esse método os dados não aparecem para o usuário,
são enviados explicitamente.
Recebendo do formulário via POST
Para receber os dados enviados tanto pelo método POST
quanto por GET, utiliza-se o array global $_REQUEST,
indexado pelo nome do campo:
Porém, em alguns casos não é desejável receber dados
por ambos os métodos, dessa forma, usa-se os arrays
específicos da origem ($_GET e $_POST).
Formulários
Exemplo usando GET
formulario.html
...
<form id="form1" name="form1" method=“GET” action="inserir.php“>
Nome: <input name="nome" type="text" id="nome" /> <br /> <input
name="Enviar" type="submit" id="Inserir" value="Inserir" />
</form>
...
inserir.php E a url fica:
... inserir.php?nome=Fernanda
<?php
echo $_GET[‘nome´];
?>
Formulários
Exemplo usando POST
formulario.html
...
<form id="form1" name="form1" method=“POST” action="inserir.php“>
Nome: <input name="nome" type="text" id="nome" /> <br />
<input name="Enviar" type="submit" id="Inserir" value="Inserir" />
</form>
...
inserir.php E a url fica:
... inserir.php
<?php
echo $_POST[‘nome´];
?>
Componentes HTML
form
É o componente principal onde se encontram todos os campos
do formulário
Sintaxe:
...
<form name=“formulario" method=“POST” action="inserir.php“>
Outros campos ...
</form>
...
Formulários
Componentes
Componentes HTML
Textfield
Sintaxe
Nome: <input name=“nome" type=“text” value=“” />
ou
Endereço: <input name=“endereco" type=“text” value=“” />
name: chave para variáveis $_GET e $_POST
type: igual a text (tipo texto)
value: valor inicial (opcional)
Componentes HTML
Password
Sintaxe
Senha: <input name=“senha" type=“password” value=“” />
name: chave para variáveis $_GET e $_POST
type: igual a password (tipo senha)
value: valor inicial (opcional)
Componentes HTML
Textarea
Cria um elemento texto com mais de uma linha de digitação
Sintaxe
Mensagem:
<textarea name=“msg" id=“msg”> [valor inicial] </textarea>
OBS: Mostrar a diferença do método GET e POST
Arquivos: exe_formulário.html e inserir.php
Componentes HTML
Exemplos:
Componentes HTML
Button
Sintaxe
<input name=“bot01" type=“submit” value=“Enviar” />
<input name=“bot02" type=“reset” value=“limpar” />
value: Rótulo do botão
type: reset ou submit
Exercício Rápido - Exemplos
1) Crie um arquivo aula05_exe01.html contendo um formulário
com 2 campos “a” e “b” e um botão que aponte para um
arquivo aula05_exe01.php que retorna a soma desses dois
números.
2) Criar formulário aula05_exe02_form.html com campos “a” e
“b” que aponte para o arquivo aula05_exe02.php e crie a
função que retorna a multiplicação entre “a” e “b” através de
somas sucessivas.
3)Agora crie em um arquivo um link passando “a” e “b”
pela URL para calcula.php. calcula.php?a=5&b=2 ->
aula05_exe03.html (Não Resolver)
Exercício Funções com formulários
1 – Montar uma função que recebe um numero como parâmetro e retorna o
nome do mês correspondente, validar a entrada para um número de mês valido.
2 – Montar um formulário HTML para entrada de alguns dados, e criar uma
página para receber, tratar e exibir esses dados.
3 –Monte um formulário para a entrada de um número, e em outra página
utilizando a função do exercício 1 mostre o mês correspondente.
4 – Monte uma função que calcule uma equação do 2° grau (bhaskara – Ex: ax² +
bx + c) e monte um formulário para a entrada dos 3 valores, e uma pagina para
exibir o resultado.
$delta = sqrt((b*b) – 4.a.c);
$x1 = (-b + $delta)/2*a;
$x2 = (-b - $delta)/2*a;
Componentes HTML
RadioButton
Sintaxe
Sexo:
<input name=“sexo" type=“radio” value=“M” /> Masculino
<input name=“sexo" type=“radio” value=“F” /> Feminino
name: chave do $_GET e $_POST (devem possuir o mesmo
nome)
value: Valor passado ao $_GET ou $_POST .
OBS: Observem que o atributo “name” possui o mesmo nome
“sexo”, então o campo “value” será enviado como parâmetro.
Componentes HTML
CheckBox
Igualmente aos RadioButton, agrupam um conjunto de
elementos através do atributo name.
Sintaxe
<input name=“opcao" type=“checkbox” value=“1” />
name: chave do $_GET e $_POST
value: Valor quando for marcado.
Componentes HTML
Checkbox – Exemplos:
Componentes HTML
Checkbox – Exemplos:
Os dados serão recebidos como um array. Podendo ser utilizado
mecanismo de manipulação de arrays para exibir os dados:
Componentes HTML
Select
Sintaxe
Cidade: <select name="cidade" id="cid">
<option value="21" selected="selected"> Passo Fundo </option>
<option value="56"> Carazinho </option>
<option value="32"> Cruz Alta </option>
</select>
name: chave do $_GET e $_POST
value: Valor da “cidade” quando a opção for selecionada.
Componentes HTML
Select
Cidade: <select name="cidade" id="cid">
<option value="21" selected="selected"> Passo Fundo </option>
<option value="56"> Carazinho </option>
<option value="32"> Cruz Alta </option>
</select>
Exercícios
3) Crie um form com os 4) Crie uma calculadora
seguintes campos e conforme exemplo
imprima na tela as abaixo:
informações digitadas:
Novidades – Formulário – HTML5
HTML5 – validação automática de campos de formulário
Novos tipos de campo (type)
Email
url
Datas e horas
Number
Novos tipos de dados e atributos
Atributo: required
Define que um campo deve ser obrigatoriamente preenchido
antes de realizar submit do form
Exemplo.: type=“text”
Novos tipos de dados e atributos
Atributo: required
Define que um campo deve ser obrigatoriamente preenchido
antes de realizar submit do form
Exemplo.: type=“radio”
Novos tipos de dados e atributos
Tipo: e-mail
Define que um campo receberá um valor referente a e-mail
validando caso o valor digitado não tenha características de
e-mail
Exemplo.:
Novos tipos de dados e atributos
Tipo: number
Define que um o valor do campo deve ser numérico
Exemplo.:
Novos tipos de dados e atributos
Tipo: min
Define um valor mínimo para o campo numérico
Tipo: max
Define um valor máximo para o campo numérico
Novos tipos de dados e atributos
Tipo: date
Formata o campo com estilo de data
Exemplo.:
Novos tipos de dados e atributos
Atributo: placeholder
Informa um texto inicial para auxiliar no preenchimento do
campo
Exemplo.:
Retornar Dados via URL
Vimos como enviar dados (parâmetros) ao servidor, mas
como enviar dados de volta para o usuário?
Exemplo.: Fazer soma de dois números e colocar o resultado
em um campo texto na mesma página
Retornar Dados via URL
Teríamos as seguintes páginas:
Retornar Dados via URL
Para devolver um valor de calcular.php para form.php é
necessário fazer um redirecionamento após o cálculo do
valor passando o resultado pela url.
Redirecionamento usando a função header():
Retornar Dados via URL
Pode-se fazer um tratamento na página form.php para que o
dado seja exibido quando receber um parâmetro via GET:
No exemplo, foi usado o operador ternário para resumir o
comando if:
Retornar Dados via URL
É possível fazer o mesmo para que os campos Número 1
e Número 2 fiquem preenchidos, incluindo os
parâmetros na url no arquivo calcular.php:
E recebendo de volta o arquivo form.php
Retornar Dados via URL
Essa é uma forma possível de efetuar a passagem de
parâmetro em PHP para o usuário;
Porém, há uma forma mais elegante para fazer esse
procedimento, usando sessões e cookies.
Validando Campos
Por que Validar?
Segurança (inputs são janelas para o sistema)
Validação (verificar se os dados fazem sentido)
Garantir a robustez da aplicação
Usuários sempre podem cometer erros
Onde Validar?
No cliente: evita que as informações chegam
desnecessariamente ao servidor
No servidor: como as informações podem burlar a validação
no cliente, se torna essencial uma validação em PHP.
Exemplo Validação
Validar o seguinte formulário?
Exemplo
Exemplo Validação
function add_erro($erro, $mensagem){
if ($erro == “”){
$retorno = $mesagem;
}else {
$retorno = $mensagem.”<br>”.$erro;
}
return $retorno;
}
Exercício 5
Valide o seguinte formulário:
Nenhum campo pode ser vazio
Os e-mails devem conferir
Um dos sexos tem que estar marcado
Achou Fácil?
Exercício 6
Valide o seguinte formulário:
Nenhum campo pode ser vazio
A pessoa deve ser maior de 18 anos
Os e-mails devem conferir
A pessoa deve aceitar os termos
Usuários maliciosos devem ser
impedidos de injetar código???
