Bonus Pagin A Decont A To PHP

Licenciado para Jos Rodrigo Lemos Pinto, E-mail: rodrigolemos8@hotmail.
com, CPF: 03381655256
Licenciado para Jos Rodrigo Lemos Pinto, E-mail: rodrigolemos8@hotmail.com, CPF: 03381655256
Sumrio
Ol! Seja Bem-vindo(a)!5
O que voc ver neste e-book?6
Elementos HTML para construo de formulrios de contato7
Criando a pgina de contato do site do Galucho 18
Criando um arquivo PHP28
Concluso60
Pgina de contato +
arquivo PHP para envio
Ol! Seja Bem-vindo(a)!

Antes de qualquer coisa espero que voc j tenha boas noes de HTML e CSS. Caso no ainda no
tenha, leia e pratique todo contedo do E-book de Fluncia em HTML/CSS, bele?
Este um complemento do e-book citado acima. E sabe por que ele se faz necessrio?
O e-book de fluncia focado em HTML e CSS e nos elementos mais usados, porm alguns elementos HTML de bastante uso ficaram de fora. Esse o caso das tags de formulrio, porque elas
(normalmente) precisam ser integradas com uma linguagem de programao, neste caso o PHP.
E isso foge do foco do livro que somente HTML e CSS.
Caso voc tenha lido o e-book voc deve ter reparado que no construmos uma pgina de contato. Ao clicar no menu contato, direcionamos o usurio para o rodap da pgina onde fornecemos os dados de contato, entretanto no damos a opo de ele usar um formulrio para enviar
uma mensagem.
Esta opo requer o desenvolvimento com elementos HTML especficos para construo de formulrios.
Estes elementos devem fazer parte de seus conhecimentos, pois voc usar muito em seu dia a
dia e o funcionamento dos formulrios est sempre atrelado a alguma linguagem de programao para web.
O funcionamento geralmente dividido em duas aes:
A primeira realizada no lado o cliente, quando ele insere dados no formulrio e o HTML5, e at
em alguns casos o uso de scripts, valida as informaes.
A segunda acontece aps o usurio enviar os dados em um boto de submisso. Neste instante
esses dados so enviados para o servidor onde o HTML sai de campo para o PHP entrar em ao.
Ele validar as informaes e conforme desenvolvida a programao estes dados podem ir para
um banco de dados, ou serem, como no exemplo que usaremos, enviados por e-mail.
O uso de uma linguagem de programao de fundamental importncia para que a maioria das
aes dos formulrios HTML funcione. Isso justifica o porqu os elementos para construo de
formulrios no fizeram parte do e-book que foi focado somente em HTML e CSS. Ok?
NOTA IMPORTANTE: Este complemento no tem a inteno, e nem seria possvel em pouco tempo, tornar voc um programador. A ideia oferecer uma opo acessvel para voc implementar
em seus futuros projetos e quem sabe ser um estmulo para pesquisar mais sobre programao.
O que voc ver neste e-book?

Os primeiros passos no envolve programao e sero executados dentro do arquivo contato.html.:
Primeiro apresentaremos os elementos HTML5 mais usados em formulrios para contato.
Em seguida construiremos, baseado na pgina modelo do e-book de Fluncia em HTML e CSS,
uma pgina de contato e vamos alterar o que for necessrio no site para receber esta nova pgina.
Enfim colocaremos um formulrio na pgina de contato e definiremos um estilo para ele.
Depois mostraremos como funciona a validao com HTML5.
As aes seguintes sero executadas com a linguagem PHP. Veja:

Criaremos um arquivo PHP;

Desenvolveremos o cdigo;
Veremos os trechos fundamentais;
Subiremos os arquivos para um servidor para efetuar testes;
Realizaremos uma validao com PHP.
Elementos HTML para construo de formulrios de contato

Alm de formulrios de contatos encontramos formulrios para diferentes objetivos. Desde formulrios para buscas dentro de sites, cadastros, login em sistemas a at posts em redes sociais.
Praticamente todos os dados inseridos em um site so feito atravs de formulrios.
Ao construir este formulrio de contato voc ter a percepo de como funcionam todos os formulrios. Nosso foco aqui a pgina de contato, porm deixarei dois links a seguir como leitura
complementar para que voc conhea todos os elementos possveis para construo de formulrios.
Para consulta posterior:
http://www.w3c.br/pub/Agenda/PalestraFisl2011TutorialTabelasFormulariosAcessiveis/Tutorial-tabelas-formularios-acessiveis-fisl12.pdf
http://www.w3.org/TR/html5/forms.html (em Ingls)
Agora sem mais delongas apresentaremos os elementos HTML que usaremos no formulrio de
contato.
<form></form>
O elemento HTML form agrupa outros elementos que associados permitem ao usurio submeter informao a um determinado servidor web.
Em conjunto com este elemento podemos usar atributos especficos sendo que alguns so importantes como o action e o method. Vamos entend-los?
O atributo action: Ele indica a url do arquivo que ir processar os dados submetidos pelo formulrio.
7
Veja a sintaxe:
<form action=arquivo-que-processa-dados.php>
</form>
O atributo method: Ele indica o mtodo que o navegador usar para enviar os dados inseridos
nos formulrios. Existem dois valores para method:
Mtodo get: Quando enviamos os dados de um formulrio pelo mtodo GET o navegador
pega esses dados, tambm a url do local onde formulrio vai ser enviado e, separando-os
com um ponto de interrogao ?, forma a url resultante.
Mtodo post: Ele envia os dados do formulrio colocando-os no corpo da mensagem. Ele deixa a url separada dos dados que sero enviados.
Diferena entre os mtodos: A maior diferena entre os mtodos GET e POST provavelmente
como visualizamos na url resultante. Uma requisio GET enviada os dados como string anexada a URL, enquanto que na requisio POST os dados so encapsulados e ocultos junto ao corpo
da requisio HTTP. Voc no v os dados anexados na url. Outra diferena importante a saber
que o GET somente envia textos, enquanto o POST alm de textos tambm pode transportar
dados binrios.
Observao:
A requisio HTTP ocorre quando o navegador ou dispositivo envia informaes solicitando
recursos ao servidor. O HTTP, que um Protocolo de Transferncia de Dados, serve para que o
navegadores e servidores possam se comunicar.
Em nosso formulrio utilizaremos o mtodo POST. Veja a sintaxe:

8
<form action=arquivo-que-processa-dados.php method=post>

</form>
Como j dito antes, existem outro atributos, porm vamos focar nos fundamentais action e
method. Voc tambm pode usar, caso queira, os atributos id e class para fins de estilizao.
Para conhecer todos os atributos do elemento form visite a pgina a seguir (em ingls);
https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/form
<label></label>
Este elemento um rtulo que informa para que serve um campo de formulrio. Trabalhando
junto com o atributo for possvel vincular o campo de formulrio ao rtulo. Veja sintaxe:
<label for=nome>Digite seu nome</label>
</form>
Logo veremos o resultado visual, mas antes vamos apresentar o elemento responsvel por construir os campos de formulrios e entre outros controles interativos.
<input>
O elemento input usado para criar controles interativos para formulrios. O que determinar
o tipo de controle ser o valor do atributo type.
Veja a sintaxe bsica:
9
<input type=nome-do-tipo-de-controle>
Com o atributo type podemos visualizar uma infinidade de controles, geralmente chamados de
inputs, como campos para texto, e-mail, telefone, inputs tipo radio e checkbox, boto de enviar
formulrio, entre outros.
Quando no declarado, o tipo de atributo padro ser o text. Para conhecer todos os atributos
sugiro o link a seguir para leitura posterior:
https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/Input
Para nosso formulrio de contato usaremos os atributos text, email e submit.
Vamos um exemplo:

<p><label for=nome>Digite seu nome</label></p>

<p><input type=text></p>

<p><label for=email>Digite seu e-mail</label></p>

<p><input type=email></p>

<p><input type=submit></p>
</form>
Veja o resultado a seguir:
10
Note que o input text indicado para preenchimento de texto. No caso usado para digitar um
nome. O atributo for=nome corresponde ao rtulo de label e ao tipo de contedo a ser a digitado no input.
J o input email usado para digitar um e-mail
e nada mais que isso. O atributo for=email corresponde ao rtulo de label e ao tipo de contedo a ser a digitado no input.
O input submit cria um boto. Este responsvel pelo envio dos dados do formulrio quando
efetuamos um clique.
Tambm iremos inserir em nosso formulrio de contato os atributos placeholder, id e name nos
inputs type=text e type=email. Para o input type=submit usaremos o atributo value.
Veja:


<p><input type=text name=nome id=nome placeholder=Digite aqui seu nome></p>


<p><input type=email name=email id=email placeholder=Digite aqui seu e-mail></p>

<p><input type=submit value=Clique aqui para enviar></p>
</form>
Veja o resultado:
11
Podemos notar algumas diferenas em relao ao formulrio da imagem anterior. Dentro dos
campos temos agora uma instruo para o usurio tomar uma ao. Tudo isso possvel por
causa do atributo placeholder (placeholder=Digite aqui seu nome).
Outra mudana que notamos no boto de submisso do formulrio. Agora temos um texto
novo que pede para o usurio clicar no boto para fazer o envio. Voc pode colocar o texto que
bem entender, para isso basta mexer no atributo value dentro do input type=submit (value=Clique aqui para enviar).
Inserimos o atributo id e tambm um atributo de fundamental importncia que ao atributo
name. Ele auxiliar na vinculao entre os dados digitados no inputs e a codificao com o PHP.
Mas isso veremos mais a frente, OK?
12
<fieldset></fieldset>
Este elemento agrupa elementos relacionados em um formulrio e desenha uma caixa em
torno deles.
Veja a sintaxe:

<fieldset>
<p><input type=text name=nome id=nome placeholder=Digite aqui seu nome></
p>
<p><input type=email name=email id=email placeholder= Digite aqui seu
e-mail></p>
<fieldset>
</form>
Vamos ao resultado a seguir:
13
Veja que o elemento criou um Box agrupando os elementos filhos. Notamos isso pela borda padro que ele possui. Este recurso pode ficar mais bacana com o uso do prximo elemento.
<legend><legend>
Este elemento cria um rtulo para o contedo do seu ancestral, no caso o elemento fieldset.
Basta que coloquemos as tags aps a tag de abertura de fieldset e dentro coloquemos o contedo da legenda. Exemplo:
<legend>Voc deve preencher os dados a seguir:</legend>
Vamos agora inserir este cdigo acima dentro do cdigo do formulrio que vnhamos usando at
ento. Veja o resultado:
14
Interessante, no?
Bom, mas um formulrio de contato sem o assunto e sem a mensagem no cumpre sua misso, n?
Portanto podemos usar outra label e input do tipo text para o assunto. Certo?
Mas e para mensagem? O que usar?
Simples! Usaremos o elemento textarea.
Vamos ver como funciona?
15
<textarea></textarea>
Este elemento um controle de edio multilinhas para insero de textos simples. muito usado para envio de mensagens, posts em redes sociais, comentrios em blogs, alguns tipos de cadastros, entre outros.
Tem bastante utilidade quando precisamos de um campo para insero de textos longos.
Vamos ao cdigo com insero de textarea e o input para o assunto.

<fiedset>
<p><input type=text name=nome id=nome placeholder=Digite aqui seu nome></p>
<p><input type=email name=email id=email placeholder= Digite aqui seu e-mail></p>
<p><label for=assunto>Assunto:</label></p>
<p><input type=text name=assunto id=assunto
placeholder=Insira o assunto da mensagem></p>
<p><label for=mensagem>Mensagem:</label></p>
<p><textarea name=mensagem id=mensagem placeholder=Digite sua mensagem>
</textarea></p>
<fieldset>
</form>
Veja o resultado a seguir:
16
Conhecendo estes elementos e atributos HTML j possvel, pelo menos, criar a parte de interatividade com o usurio em um formulrio de contato.
Comearemos, no tpico a seguir, a construir nossa pgina de contato.
hey ho lets go!
17
Criando a pgina de contato do site do Galucho

Como sabido, criamos um simples site portflio para o Galucho dentro do E-book de Fluncia
em HTML e CSS. Neste primeiro instante construiremos a pgina de contato, tiraremos os dados
de contato do rodap de todas as pginas do site e mudaremos as urls dos links dos menus de
cada pgina.
1. Primeiro passo: construir a pgina contato.html a partir da pgina modelo.html.
Esta pgina modelo aquela que usamos no e-book de Fluncia para construir as outras pginas:
Abriremos ento, o arquivo modelo.html e salvaremos como contato.html.
2. Segundo passo: deletar os cdigos de insero dos dados de contato de todas as pginas do
site, incluindo a pgina que acabamos de construir.
18
No caso deletaremos destacado em laranja entre as tags de footer logo a seguir:

<footer class=vcard>

<h2 id=contato>Venha bater um papo com o <span class=fn>Galucho</span></h2>
<div>
<ul>

<li>Telefone fictcio do Galucho:<br><a class=tel href=tel:+551112345678>+55
11 1234-5678</a></li>

<li>E-mail fictcio do Galucho:<br><a class=email href=mailto:contato@galucho.
com.br>contato@galucho.com.br</a></li>
</ul>
</div>

<p>Copyright © 2015 - Galucho<br>Todos os Direitos Reservados</p>
</footer>
S devem restar os dados de copyright que esto no pargrafo.
Para deixar o rodap mais apresentvel deletamos o cdigo a seguir para esta consulta de mdia;
@media only screen and (min-width: 767px):

.vcard p {
margin-top: 33px;
padding-top: 20px;

}
Tambm deletamos as declaraes destacadas em laranja a seguir:
.vcard p {
margin-top: 20px;
padding-top: 15px;
text-align: center;

border-top: 1px dotted #ffffff;
}
19
3. Terceiro passo: mudar as urls dos links dos menus de cada pgina.
O link do menu de contato das pginas do site direciona o usurio para o rodap devido ao valor dentro de href que #contato. O que faremos agora alterar este valor para o endereo da
pgina de contato, contato.html.
Dever ficar assim:
<a href=contato.html><span>CONTATO</span></a>
Outra alterao importante para a usabilidade da pgina de contato o estilo aplicado ao menu
HOME. Veja que ele possui um background destacante que indica que o contedo se refere
pgina inicial. S que est errado. Este estilo deve estar aplicado ao menu CONTATO.
Para corrigir, basta retirar a class current-menu-item do menu HOME e colocar no menu
CONTATO.
Sendo assim, o nosso menu ficar assim:
<ul id=nav>
<li><a href=index.html><span>HOME</span></a></li>
<li><a href=portfolio.html><span>PORTFLIO</span></a></li>
<li class=current-menu-item><a href=#contato><span>CONTATO</span></a></li>
</ul>
Aps as alteraes basta salvar os arquivos e conferir o resultado
20
4. Quarto passo: mudar o ttulo da pgina.

A pgina ainda possui o ttulo Modelo. Basta colocar entre as tags de title o ttulo Contato ou
outro ttulo que voc desejar.
<title>Contato</title>
Colocando o formulrio na pgina de contato e definindo um

estilo
O formulrio para pgina de contato praticamente formado pelos elementos HTML j apresentados at aqui. No tem segredo!
Ento, entre as tags <div id=main></div> Colocaremos o cdigo a seguir:
21
Obs.: No final do e-book voc ter um link para acesso a os arquivos dos cdigos.
Voc ver o resultado na pgina a seguir:
Inserimos 2 inputs de texto (Nome e Assunto), 1 input de email, 1 textarea e 1 input submit.
Agora hora de deixar este formulrio mais apresentvel: entrar em ao nosso velho conhecido CSS!
Com os conhecimentos que voc adquiriu no E-book de Fluncia em HTML e CSS voc j tem
bagagem para interpretar as folhas de estilos que aplicaremos. Portanto, no aprofundaremos
neste aspecto para podermos focar no prximo passo.
E no se preocupe, pois forneceremos todos os cdigos e voc poder estudar os estilos aplicados no formulrio, ok?
Somente dois pontos novos que explicarei agora para que voc no fique perdido. Mas antes veja
como ficou o formulrio depois da estilizao.
22
Quando voc se deparar com a folha de estilo ir notar a seguinte sintaxe:

input[type=submit] {

background-color: #e37655;

display: block;

width: 50%;

margin: 0 auto;

border-radius: 5px;

cursor: pointer;

font-weight: bold;
}
O que temos de novidade aqui o seletor input [type=submit]. Ele um tipo de seleo de
elementos via atributo e valor. Basta que coloque aps elemento o atributo e o seu valor entre
colchetes. E para que serve este tipo de seleo? Como interpret-lo?
23
Simples: no formulrio da pgina temos 4 inseres de input. S que os tipos so diferentes e

quem determina estas diferenas so os atributos, que no caso so o text, email e submit.
Se colocarmos um estilo somente no seletor do elemento input, como fazamos at agora, todos os tipos de atributos destes elementos tero estilos iguais. A questo que nem sempre
queremos isso. E podemos ver que o boto de enviar, que um elemento HTML input, recebe
uma cor de fundo avermelhada enquanto os outros campos, que tambm so inputs, possuem
fundos cinza escuro. Isso s foi possvel porque alm do elemento input ns usamos seu atributo e valor.
Se quisssemos mudar, por exemplo, a cor do fundo do campo de e-mail, bastaria selecionar o
seu atributo com valor. Algo do tipo:
input[type=email] {

background-color: nova-cor-de-fundo;
}
Sacou?
Outra coisa diferente que voc encontra so seletores que iniciam com prefixos ::-webkit-, ::moz- , :-ms- . Estes prefixos so usados pelos navegadores para que certa propriedade funcione
corretamente.
Voc perceber outros tipos de prefixos. Eis os mais usados:
-webkit: para browsers como Chrome e Safari
-moz: para o Firefox
Agora j esclarecido estas novidades em nosso CSS chegou a hora de mostrar como funciona a
validao do formulrio com HTML5.
24
Validao de campos de formulrio com HTML5

Imagine voc preenchendo um formulrio de cadastro enorme que dura minutos e ao clicar no
boto enviar voc recebe uma mensagem do servidor dizendo que um campo est preenchido
incorretamente? At a tudo bem! Mas se logo em seguida voc percebe que todos os campos
que voc batalhou para digitar esto apagados e voc ter de digitar de novo? Chato, no no?
Uma forma de contornar esta situao executar uma validao no lado do cliente, ou seja, antes dos dados serem enviados ao servidor. Voc j deve ter visto algo do tipo.
Por exemplo: voc preenche um formulrio e, ao clicar no boto de enviar, a pgina lhe informa
que algo est incorreto, porm voc no perde os dados digitados nos outros campos. isso que
faremos agora.
At um tempo atrs para validar formulrios precisvamos de cdigos em javascript. Com o advento do HTML5 ns temos um atributo para elementos de formulrio que faz toda mgica economizando tempo e cdigo. Refiro-me ao atributo required.
Obs.: Existem outros atributos que auxiliam nesta tarefa. Faa uma consulta posterior neste artigo: http://blog.popupdesign.com.br/validando-formularios-like-a-boss-com-html5/
Por exemplo, em nossos campos de input e textarea do nosso formulrio requer preenchimento obrigatrio e da forma correta, principalmente no campo de e-mail. Ento basta colocar
o atributo required dentro da tags input e da tag de abertura do elemento textarea. Veja:
<input type=text name=nome id=nome placeholder=Insira seu nome required>
<input type=email name=email id=email placeholder=Insira seu e-mail required>
<input type=text name=assunto id=assunto placeholder=Insira o assunto da mensagem
required>
<textarea name=mensagem id=mensagem placeholder=Digite sua mensagem required></
textarea>
25
Com todos os campos devidamente atribudos com required que tal fazer alguns testes?
Inicialmente podemos simplesmente clicar no boto enviar sem preencher nada.

Como vimos na imagem anterior, o sistema alerta sobre o primeiro item no
preenchido.
E conforme voc deixa os prximos
campos sem preencher ele alertar o
no preenchimento.
26
O sistema tambm alerta quando o e-mail preenchido erroneamente. Veja na imagem a seguir:
Com esta validao, usando o HTML5, conseguimos prevenir problemas evitando que o usurio
perca tempo.
Prximo passo criar o arquivo PHP.
27
Criando um arquivo PHP

At o momento voc j conhece as extenses .html, .css e .js que respectivamente correspondem
a arquivos de pginas HTML, folhas de estilo em cascata e arquivos javascript.
Para construir arquivos em PHP basta que voc tenha um editor capacitado para construo desta linguagem e salvar estes arquivos com a extenso .php.
Um detalhe importante que arquivos em PHP precisam de um servidor para que possamos ver o
contedo inserido nele. Nisso ele difere do HTML cujo contedo podemos ver em nosso PC. Para
conseguirmos o mesmo com o PHP teramos que instalar um servidor em sua mquina. Porm,
para que voc j se acostume com o ambiente de publicao, indico que contrate um servio de
hospedagem de sites. Mais a frente eu explico como proceder com a hospedagem.
Desenvolvendo o cdigo PHP para coleta, tratamento e validao dos dados

Dentro de um cdigo PHP possvel tambm inserir HTML e isso que faremos inicialmente
com nosso arquivo. Abra um novo arquivo em seu editor, copie cole o cdigo a seguir e salve
como enviar.php.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name=viewport content=width=device-width, initial-scale=1>
<meta name=robots content=noindex, nofollow />

<style type=text/css>
body {
background-color: #ECE5CE url(img/noise.png);
28
font: bold 18px/22px Tahoma, Arial, sans-serif;

color: #444444;
padding:20px 0 0 20px;
}

</style>
</head>
<body>
</body>
</html>
Voc conhece bem est estrutura. Temos uma pgina comum com cabealho e corpo. Alis, tudo
o que resulta de um programa em PHP exposto em uma pgina HTML, mas isso eu explicarei no
tpico a seguir.
Sintaxe bsica PHP

Antes de qualquer coisa quero reforar mais uma vez que este e-book no tem a pretenso de
ensinar-te PHP e nem te tornar um programador. Ningum se torna um programador da noite
para o dia. O intuito deste e-book te oferecer uma opo funcional para que voc possa implementar sem maiores dificuldades um formulrio de contato.
possvel que voc encontre outras formas de implementao de um formulrio com PHP, porm a proposta encontrada aqui indica um norte para que voc possa seguir.
Todos os comandos em PHP devem estar inseridos em dois delimitadores para que funcione. O
delimitador inicial <?php e o final ?>. Veja abaixo:
<?php
// Aqui vo os blocos de comandos do programa
?>
29
Observao: Tome cuidado para no deixar espaos vazios nos delimitadores (<? php, ou < ?php.)
O PHP uma linguagem de que somente o servidor interpreta, portanto diferentemente do HTML,
no possvel ver os comandos usados no cdigo-fonte de uma pgina web. Tudo que vemos
puro HTML. O programa interpretado no servidor que envia at o usurio o resultado da requisio em forma de HTML.
Ento, onde colocar os cdigos PHP ento?
Colocaremos a sintaxe <?php ?> entre as tags de body. Com isso temos a possibilidade de estilizar com css e colocar links para orientar os prximos passos do usurio.
A pgina enviar.php alm de ser destino dos dados digitados no formulrio HTML tambm retorna mensagens de erro ou de sucesso para o usurio no corpo da pgina.
Tendo todos esses detalhes esclarecidos vamos efetivamente explicar a montagem dos cdigos
por etapas.
Etapa 1
O nosso formulrio precisa ser autenticado para envio da mensagem. Usaremos para isso, dados
da hospedagem e recursos em PEAR.
PEAR fornece bibliotecas estruturadas e aplicaes de cdigo PHP. Para que a autenticao de
nosso formulrio funcione precisamos inserir em nosso cdigo duas aplicaes do PEAR, o PEAR
Mail e o Mime. Voc pode baixar os pacotes destas aplicaes nos links a seguir:
Mail: http://pear.php.net/package/Mail/download
Mail Mime: http://pear.php.net/package/Mail_Mime/download
30
Depois de baixar as pastas e arquivos devemos envi-los para um diretrio na hospedagem. Em

seguida inserir o seguinte bloco de comados entre os delimitadores PHP.
<?php
// Faz o include do PEAR Mail e do Mime.
include (Mail-1.2.0/Mail/Mail.php);
include (Mail_Mime-1.8.9/Mail_Mime/Mail/mime.php);
?>
A primeira linha de cdigo um comentrio apenas para orientao. Ele no influi no processo.
As linhas seguintes no responsveis por incluir os arquivos Mail.php e mime.php. O que vemos
entre os parnteses o caminho dos arquivos no diretrio.
Etapa 2
Nesta etapa comearemos a coletar e validar os dados do formulrio HTML. A validao necessria para que a mensagem no contenha caracteres maliciosos enviados por usurios mal
intencionados que visam prejudicar o sistema de alguma forma. Vamos aos cdigos.
//conta se houve erro durante a validao
$error = 0;
A primeira linha do cdigo acima um comentrio e no interpretado pelo programa. Ele
caracterizado pelo uso de duas barras antes do texto //.
J na segunda linha construmos uma varivel. Ela serve para contar possveis erros na validao
dos dados do formulrio para que sejam exibidos aos usurios. O conceito de varival explico
mais a frente.
O cdigo anterior deve ser inserido aps os cdigos de incluso dos recursos PEAR. Segue o prximo trecho:
31
// INCIO DE COLETA E VALIDAO DE DADOS DO FORMULRIO

// Verifica se a varivel $_POST no vazia...
// ou seja: houve um submit no formulrio
if (!empty($_POST)) {
} else {
$error++;
echo <p>No houve envio do formulrio!</p>;
}
A primeira coisa que estes comandos fazem verificar se o formulrio foi enviado atravs de
if (!empty($_POST)) {. Se tudo correr bem o programa continuar a ser executado, seno, ele
exibir erros para os usurio atravs destas linhas; $error++; e echo <p>No houve envio do formulrio!</p>;.
Agora colocaremos uma sequncia de cdigos entre as chaves que vem logo aps if (!empty($_POST)). Esses cdigos servem para coletar e limpar os dados digitados em cada campo de
formulrio (nome, email, assunto, mensagem). Eles tambm servem para verificar se o usurio
realmente digitou os dados.
Para ficar mais fcil o entendimento, vamos apresentar separadamente por campos, comeando
pelo campo nome.
// Verifica se o campo nome foi preenchido e coleta o dado digitado
if (isset($_POST[nome])) {
// limpa valores no conforme do campo nome e atribui o valor digitado e limpo varivel $nome

$nome = filter_input(INPUT_POST, nome, FILTER_SANITIZE_STRING);
// Verifica se o usurio digitou o seu nome

if (!empty($nome)) {

$nome = trim($nome); // Remove os espaos em branco do valor
32

}
}
} else {
echo <p>Por favor, preencha o seu nome!</p>;
}
A linha que contm if (isset($_POST[nome])) { verifica se existe dados e tambm coleta os dados
digitados. E sabe como ocorre esta coleta?
Essa coleta possvel porque existe uma vinculao entre o cdigo PHP e o HTML. E esta vinculao acontece graas ao atributo name usado em cada input do formulrio.
$_POST uma varivel responsvel por coletar dados digitados nestes campos de formulrios
input cujo envio se d pelo mtodo post (method = post). Para isso ele deve indicar um valor
que faa um vnculo com o atributo name de um input. E se voc reparar bem, isso que realmente acontece. Veja a seguir.
HTML:
<input type=text name=nome id=nome placeholder=Insira seu nome required>
PHP:
$_POST[nome]
Notamos que o atributo name possui o valor nome (name=nome), por isso obrigatoriamente a
varivel superglobal do PHP $_POST deve efetuar vnculo atravs do valor nome $_POST[nome].
Observao: Quando o mtodo de envio de um formulrio for method = get a varivel usada
no PHP deve ser $_GET[];
33
Voc pode usar o valor que quiser nos atributos. Usamos em name o valor nome por uma
questo de semntica, porm poderia ser outro qualquer. O importante mesmo que o valor do
atributo name deve ser o mesmo usado em $_POST[].
Com os valores atribudos corretamente os dados digitados percorre um caminho lgico. Faremos agora uma simulao referente ao campo de insero do nome do usurio.
Primeiro digitamos os valores nos campos do formulrio:
O campo Nome recebeu o dado Galucho ( lembrando que este campo possui o atributo name
de valor nome.)
Aps preencher todos os campos o usurio clica no boto enviar.
O nosso arquivo PHP verificar se realmente houve o envio com if (!empty($_POST)) { . Se tudo
estiver certo segue a coleta de dados.
Logo em seguida o comando PHP $_POST[nome] coleta o dado Galucho, digitado no campo
de formulrio, que possui o atributo name com valor nome.
Analise a tabela a seguir e observe a vinculao entre o HTML e o PHP atravs do atributo name
da tag input e textarea.
34
Tag HTML
Input
valor do atributo
name
nome
valor em $_POST[]
Varivel
nome
$nome
Agora que j sabemos como feita a coleta de dados digitados no formulrio HTML para o PHP,
vamos entender o cdigo que limpa esses dados e atribui o valores dos dados a varivel $nome.
Eis as linha de comando que usamos:
// limpa valores incorretos do campo nome e atribui o valor digitado e limpo varivel $nome

Como voc j sabe a primeira linha um comentrio que explica a linha a seguir. J a segunda
reponsvel por filtrar os dados coletados em $_POST[nome] executando uma limpeza dos dados atravs das funes INPUT_POST e FILTER_SANITIZE_STRING.
Observao: Foge de nosso objetivo explicar estas funes. Caso queira conhecer mais consulte
a documentao PHP em http://php.net/manual/pt_BR/.
Continuando com nosso cdigo... Aps a filtragem, os dados so atribudos para a varivel $nome.
Logo em seguida verificado se a varivel no est vazia, caso esteja o sistema pede para o usurio preencher seu nome.



} else {


}
Voc pode estar se perguntando: Mas a gente j fez este processo l no HTML?. Sim fizemos. S
35
que por questo de segurana indicado realizar uma verificao tanto do lado do cliente (na
pgina HTML) quanto do lado do servidor com PHP. Uma segunda camada de validao se faz
necessria para impedir que um usurio use de forma indevida o nosso sistema para fins maliciosos. A validao do lado do cliente pode ser burlada, mas muito til para os usurios comuns
quando pensamos em usabilidade. Agora vamos entender o cdigo:
O trecho de cdigo anterior consiste em saber se o usurio digitou seu nome. Se sim, ele verifica
se existem espaos vazios desnecessrios. Se no, ele envia uma mensagem avisando o usurio
para preencher seu nome. Entretanto sabemos que a possibilidade de acontecer isso com um
usurio comum remota porque esta verificao j executada no prprio formulrio HTML.
Explicado o motivo de uma segunda verificao creio que ainda paira uma dvida em sua mente:
Varivel? O que isso?
o que veremos a seguir. Voc precisa saber o que so variveis antes de prosseguirmos, porque
elas so as protagonistas no restante do cdigo.
O que varivel?
um objeto que armazena um valor em uma regio da memria do computador, previamente
identificada, por um determinado espao de tempo.
Imagine a seguinte situao: Em um estabelecimento comercial todas as pessoas que o frequentem com objetivo de comprar algo so clientes. Porm nenhum cliente igual a outro, temos um
clientes chamados Joo, Maria, Jos.
No momento que um balconista pergunta o que o cliente deseja temos um cliente atendido. Em
programao cliente atendido seria uma varivel. Em PHP podemos definir como $cliente_atendido.
Digamos que no momento em que o estabelecimento comea a atender Joo, Joo se torna o
36
valor armazenado na varivel $cliente_atendido. Durante todo tempo do atendimento ele ser
o $cliente_atendido.
Esse tempo de atendimento equivale, em programao, ao tempo que um valor fica armazenado
na varivel em uma regio da memoria do computador.
Depois que Joo efetua o pagamento da compra e se despede do balconista ele deixa de ser o
valor armazenado na varivel abrindo espao para outro cliente com outras caractersticas. Pode
ser Maria, ou Jos ou outra pessoa. Entende?
Pegando esta explicao e trazendo para nosso formulrio vemos que para cada formulrio preenchido e enviado para o servidor teremos valores armazenados nas variveis do programa, por
um determinado espao do tempo, que no nosso caso se encerram assim que a mensagem
enviada para seu destino.
Isso quer dizer que os valores digitados nos campos do formulrio HTML e enviados ficam armazenados nas variveis $nome, $email, $assunto, $mensagem at que a mensagem seja enviada
com sucesso ou no. Como pessoas diferentes usaro o mesmo formulrio os valores das variveis sempre mudaro.
Com isso, agora vamos para a prxima etapa onde usaremos os valores digitados nos campos
de fomulrio email, assunto,mensagem. Coletaremos, filtraremos e armazenaremos nas variveis $email, $assunto, $mensagem de nosso programa. Em seguida verificaremos se o usurio
preencheu corretamente.
Etapa 3
Continuaremos com a validao em PHP dos dados do assunto e da mensagem que so similares
ao cdigos usados para o nome. Comeando com a validao dos dados do assunto:
37
// Verifica se o campo assunto foi preenchido e coleta o dado digitado

if (isset($_POST[assunto])) {
// limpa valores no conforme do campo assunto e atribui o valor digitado e limpo varivel
$assunto

$assunto = filter_input(INPUT_POST, assunto, FILTER_SANITIZE_STRING);
// Verifica se o usurio digitou o assunto

if (!empty($assunto)) {

$assunto = trim($assunto); // Remove os espaos em branco do valor

} else {

echo <p>Por favor, preencha o assunto da mensagem!</p>;
}
}
Cdigo para validao dos dados da mensagem:

// Verifica se o campo mensagem foi preenchido e coleta o dado digitado
if (isset($_POST[mensagem])) {
// limpa valores no conforme do campo mensagem e atribui o valor digitado e limpo varivel
$mensagem

$nome = filter_input(INPUT_POST, mensagem, FILTER_SANITIZE_STRING);
// Verifica se o usurio digitou a mensagem

if (!empty($mensagem)) {

$mensagem= trim($mensagem); // Remove os espaos em branco do valor

} else {

echo <p>Por favor, preencha a mensagem!</p>;

}
}
Se voc verificar bem os cdigos so praticamente os mesmos usados na validao dos dados do
campo nome, o que muda so os nomes das variveis.
38
Voc deve ter notado que faltam os cdigos para validao dos dados do campo email. Deixamos este por ltimo , pois ele difere dos outros: alm de verificar se ele existe, temos que verificar
tambm se ele foi digitado corretamente. Veja:
// Verifica se o campo email foi preenchido e coleta o dado digitado
if (isset($_POST[email])) {
// limpa valores no conforme do campo email e atribui o valor digitado e limpo varivel $
email

$email = filter_input(INPUT_POST, email, FILTER_SANITIZE_STRING);
// Verifica se o usurio digitou o seu email

if (!empty($email)) {

$email = trim($email); // Remove os espaos em branco do valor
// Verifica se o usurio digitou um email vlido

if(!eregi(^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]+)*(.[a-z]{2,3})$,
($email)) || (filter_var($email, FILTER_VALIDATE_EMAIL) === false)) {

echo <p>Por favor entre um endereço de email válido!</p>;

}

} else {

echo <p>Por favor, preencha o seu e-mail!</p>;
}
}
Este trecho complexo abaixo responsvel por verificar se o valor digitado mesmo um e-mail :
if(!eregi(^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]+)*(.[a-z]{2,3})$, ($email)) || (filter_
var($email, FILTER_VALIDATE_EMAIL) === false)) {
Agora abaixo todo o cdigo de coleta e validao de dados reunidos:
39
// INCIO DE COLETA E VALIDAO DE DADOS DO FORMULRIO

// Verifica se a varivel $_POST no vazia...
// ou seja: houve um submit no formulrio

// Verifica se o campo nome foi preenchido e coleta o dado digitado
if (isset($_POST[nome])) {
// limpa valores no conforme do campo nome e atribui o valor digitado e limpo varivel $nome




} else {


}
}
// Verifica se o campo email foi preenchido e coleta o dado digitado
if (isset($_POST[email])) {
// limpa valores no conforme do campo email e atribui o valor digitado e limpo varivel $
email

$email = filter_input(INPUT_POST, email, FILTER_SANITIZE_STRING);
// Verifica se o usurio digitou o seu email

if (!empty($email)) {

$email = trim($email); // Remove os espaos em branco do valor
// Verifica se o usurio digitou um email vlido

if(!eregi(^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]+)*(.[a-z]{2,3})$,
($email)) || (filter_var($email, FILTER_VALIDATE_EMAIL) === false)) {

echo <p>Por favor entre um endereço de email válido!</p>;

}

} else {

echo <p>Por favor, preencha o seu e-mail!</p>;

}
}
40
// Verifica se o campo assunto foi preenchido e coleta o dado digitado

if (isset($_POST[assunto])) {
// limpa valores no conforme do campo assunto e atribui o valor digitado e limpo varivel
$assunto

$assunto = filter_input(INPUT_POST, assunto, FILTER_SANITIZE_STRING);
// Verifica se o usurio digitou o assunto

if (!empty($assunto)) {

$assunto = trim($assunto); // Remove os espaos em branco do valor

} else {

echo <p>Por favor, preencha o assunto da mensagem!</p>;
}
}
// Verifica se o campo mensagem foi preenchido e coleta o dado digitado
if (isset($_POST[mensagem])) {
// limpa valores no conforme do campo mensagem e atribui o valor digitado e limpo varivel
$mensagem

$nome = filter_input(INPUT_POST, mensagem, FILTER_SANITIZE_STRING);
// Verifica se o usurio digitou a mensagem

if (!empty($mensagem)) {

$mensagem= trim($mensagem); // Remove os espaos em branco do valor

} else {

echo <p>Por favor, preencha a mensagem!</p>;

}
}
} else {
$error++;
echo <p>No houve envio do formulrio!</p>;
}
Seguimos para a prxima etapa.
41
Etapa 4
Agora mostraremos os cdigos necessrios para o envio da mensagem focando nos trechos fundamentais. Veja:
E-mail de destino
Antes de qualquer coisa vamos inserir um cdigo para verificar se existem possveis erros:
// VERIFICA SE HOUVE ERROS NA VALIDAO
if($error == 0){
Agora precisamos do endereo de mail do seu site. Este e-mail receber as mensagens enviadas
pelos usurios.
Este endereo personalizado com o domnio do site aps o @. Ao adquirir um servio de hospedagem possvel criar este e-mail. Esse um dos motivos de possuir uma hospedagem. Falarei
mais sobre isso ainda neste e-book. Veja o cdigo:
// INCIO DAS INFORMAES PARA ENVIO DA MENSAGEM
// E-mail de destino. Caso seja mais de um destino, crie um array de e-mails
$email_destino = contato@endereco-do-seu-site.com.br; // Endereo de e-mail do seu site
Em seguida uma varivel chamada $recipients recebe o e-mail de destino.
// Dados obrigatrios
$recipients = array($email_destino);
42
Cabealho
Cabealhos possuem as informaes comuns que encontramos no topo do e-mail como o remetente, o destinatrio, o assunto, etc.
Em nosso cabealho estamos usando variveis j apresentadas como $email e $assunto que
definem o e-mail do usurio (From) e o assunto (Subject). Tambm usamos varivel $email para
enviar uma cpia da mensagem do usurio para ele mesmo. O envio desta cpia opcional.
Como voc j sabe, $recepients possui o e-mail do site que receber a mensagem (To).
array (
From => $email, // O From *OBRIGATRIO*. Aqui ser o e-mail de quem envia a mensagem
To
=> $recipients,// O e-mail que receber a mensagem. No caso e empresa dona do site
Cc => $email, // OPCIONAL.

Permitimos que o usurio tambm receba uma cpia da mensagem que ele enviou
Subject => $assunto,
Reply-To => $email
);
Processando as informaes do corpo da mensagem

Agora a mensagem em si. Optamos por dispor no contedo da mensagem alm do texto, tambm o nome do usurio, o assunto e o e-mail.
$body =
Nome: $nome
Email: $email
Assunto: $assunto
Mensagem: $mensagem
;
43
Parmetros para o SMTP

SMTP, Simple Mail Transfer Protocol vem da lngua Inglesa e quer dizer Protocolo de transferncia
de correio simples. De maneira bem simplria entende-se que ele o responsvel por transmitir
os e-mails. Por isso nosso arquivo PHP precisa dos parmetros SMTP para que seja possvel enviar
as mensagens.
Antes de prosseguirmos com a explicao sobre SMTP, vamos dar uma pequena pausa em nosso
cdigo PHP para entender o funcionamento bsico do painel de controle de uma hospedagem
para que possamos saber onde encontrar os dados de SMTP. Ok?
Existem diversos servios de hospedagem na web e voc livre para escolher o que bem entender. Usarei, como exemplo aqui, o Cpanel Hostgator a qual a maioria de meus sites est hospedada e tambm que sou afiliado.
Eu sugiro este servio de hospedagem http://www.hostgator.com.br/14336.html, porm como
este assunto polmico e foge do foco deste e-book aconselho que pesquise antes de adquirir.
Particularmente acredito que a maioria das hospedagens parecida (para o bem e para o mal).
indicado que o plano escolhido, com a empresa escolhida, tenha no mnimo suporte a PHP +
MySQL (prevendo a possibilidade de um site dinmico) e uma conta de e-mail com SMTP (porm
sugiro contas ilimitadas).
Caso opte pela Hostgator seus Planos M e Business suportam esta configurao mnima.
Se voc j sabe como funciona uma hospedagem, voc pode pular esta parte e ir direto para o
tpico Inserindo os parmetros SMTP na pgina 52, caso no, prossiga por aqui.
Quando for construir um site para voc ou para um cliente ser necessrio registrar um domnio e adquirir uma hospedagem. Caso queira entender mais sobre domnios sugiro que
leia este artigo do Chief of Design.
44
Na Hostgator voc tem a opo de registrar o domnio e tambm contratar o servio de hospedagem. Para isso basta que efetue uma pesquisa pelo nome desejado ao site digitando-o no
formulrio desta pgina http://www.hostgator.com.br/14336.html.
Caso o nome esteja disponvel o Hostgator exibir um boto para registrar o domnio com o custo de 30 Reais por ano (valor cobrado no perodo de construo deste e-book).
Clique ento neste boto. Com isso o domnio estar adicionado ao carrinho de compras.
Abrir um campo na pgina seguinte onde voc pode escolher o plano de hospedagem. Basta
clicar no link alterar e escolher nos campos que surgiro, o plano e o ciclo de pagamento.
Feito isso, necessrio em seguida preencher um formulrio com alguns dados obrigatrios e
45
tambm efetuar o tipo de pagamento.
46
Aps o preenchimento dos dados, v ao final da pgina e clique no boto Finalizar compra. Podem surgir alguns procedimentos adicionais como confirmao e-mail de pagamento, impresso de boleto e coisas do tipo. Por isso fique atento sua caixa e e-mails.
Necessitaro de algumas horas para que sua hospedagem esteja configurada para que voc possa hospedar os arquivos de um site. A prpria empresa explica o procedimento.
Considerando tudo funcionando de acordo, vamos agora trabalhar com os dados necessrios
para prosseguir com a construo do nosso arquivo PHP.
Voc receber da empresa de hospedagem dados para efetuar login em sua conta. V at a pgina de sua hospedagem e efetue o login usando estes dados.
47
Aps efetuar o login voc ser redirecionado para o painel de controle de sua hospedagem,
algo similar figura seguinte Com ele possvel voc gerenciar os arquivos que compe o seu
site, banco de dados, domnios e ao que mais importa a esse e-book que o gerenciamento de
e-mails. Clique no cone E-mail accounts conforme indica na imagem.
Feito isso, abrir uma pgina onde voc finalmente pode criar seu e-mail personalizado. Se seu
plano permitir voc poder criar contas de e-mail ilimitadas. Lembra-se do e-mail de destino?
Crie uma conta de e-mail para ser usado como destino das mensagens dos usurios. Este e-mail
ser usado nesta linha de cdigo j vista neste tutorial:
48
$email_destino = contato@endereco-do-seu-site.com.br; // Endereo de e-mail do seu site

Para criar o e-mail digite um prefixo de sua preferncia que anteceda o sinal de arroba @. Selecione o domnio do site e em seguida defina e confirme a senha.
Guarde estes dados, pois sero usados neste arquivo PHP e tambm para acessar sua conta
e-mail.
Bom, agora precisamos dos parmetros SMTP. Veja o cdigo abaixo:
// Parmetros para o SMTP. *OBRIGATRIO*
$params =
array (
auth => true, // Define que o SMTP requer autenticao
host =>
, // Aqui vai o servidor SMTP
49
username =>
password =>
);
, // Aqui vai o nome do usurio do SMTP

// Aqui vai a senha da sua caixa de e-mails de seu domnio
Vemos que falta preencher 3 dados. Voc obtm esses dados nas configuraes de e-mail de sua
hospedagem.
No Hostgator, na mesma pgina que voc criou a conta de e-mail, voc tem acesso a esses dados
ao seguir o menu More e depois clicar em Configure E-mail Client.
Veja na figura a seguir:
50
Voc ser redirecionado para uma pgina que fornecer dados para dois tipos de configurao.
Veja na imagem a seguir que o Hostgator fornece, no bloco esquerda, uma configurao recomendada, pois provm uma cifragem dos dados a serem transmitidos.
A opo a direita no trabalha com esta camada de segurana. Veja na imagem a seguir:
Vamos configurar primeiro com a verso mais simples, que usa os dados da direita.
Username o nome da conta de e-mail que voc criou (contato@endereco-do-seu-site.com.br).
Password a senha desta conta de e-mail;
Outgoing Sever nome do domnio do seu site precedido por mail.. Seria algo similar a isso
mail. endereco-do-seu-site.com.br.
51
Basta agora transferir estas informaes para nosso cdigo PHP.
Inserindo os parmetros SMTP

No cdigo a seguir devemos inserir os dados do SMTP que a hospedagem fornece.
$params =
array (
auth => true, // Define que o SMTP requer autenticao.
host => mail. endereco-do-seu-site.com.br, // Servidor SMTP
username => contato@endereco-do-seu-site.com.br, // Usurio do SMTP
password => asenhadasuacontadeemail // Senha da sua caixa de e-mails de seu domnio
);
Est pronto! Agora se voc quer transmitir dados com mais segurana, e se sua hospedagem oferecer este recurso, segue o cdigo adaptado:
$params =
array (
auth => true, // Define que o SMTP requer autenticao.
host =>
, // Servidor SMTP (consulte dados na configurao do e-mail)
SMTPSecure => tls,
Port => 465, // (Verifique na configurao se o valor da porta corresponde a este. Se no, troque)
username => contato@endereco-do-seu-site.com.br, // Usurio do SMTP
password => asenhadasuacontadeemail // Senha da sua caixa de e-mails de seu domnio
);
Observao: Voc deve consultar na configurao de e-mail em sua hospedagem o valor do
servidor SMTP e da porta (Port) que podem ser diferentes para transmisso de dados segura com
comparao com o modo simples.
52
Muito bem. As informaes cruciais do arquivo PHP j foram inseridas. Estamos a um passo de
terminar nosso programa.
Etapa 5
O que o cdigo a seguir faz pegar todas as informaes coletadas nas etapas anteriores e atravs das aplicaes em PEAR efetuar o envio. Caso ocorra um erro o sistema informar atravs de
uma mensagem no corpo da pgina enviar.php o erro e fornecer um link para alguma pgina,
que pode ser a de contato para que o usurio possa efetuar uma nova tentativa. Entretanto se
tudo der certo, e o que desejamos, o usurio ser informado que a mensagem foi enviada com
sucesso. Ento, conforme programado, a conta de e-mail usada no cdigo receber a mensagem
do usurio e o usurio receber uma cpia.
// Define o mtodo de envio
$mail_object =& Mail::factory(smtp, $params);
$result = $mail_object->send($recipients, $headers, $body);
if (PEAR::IsError($result)) { // Verifica se ocorre erro
echo ERRO ao tentar enviar a mensagem! ( . $result->getMessage(). ); /* Caso ocorra erro,
mostra o erro. */
echo <p><a href=http://endereco-do-seu-site.com.br/>Ir para seu site</a></p>; /* Mostra
tambm na pgina, um link para alguma pgina predefinida. */
} else { // Caso no ocorra erro (Mensagem foi enviada para destino)
echo <p>Mensagem enviada com sucesso!<br/>Em breve entraremos em contato!<br/>A
[Nome de sua empresa] agradece a sua visita!</p>; /* Exibe um mensagem afirmando que deu
tudo certo. */

echo <p><a href=http://endereco-do-seu-site.com.br/>Ir para seu site</a></p>;
}
53
} else {
//Se houve algum erro na validao, exibido essa mensagem
echo A mensagem no pde ser enviada, por haver algum erro!;
echo <p><a href=http://endereco-do-seu-site.com.br/>Ir para seu site</a></p>; // Mostra
tambm na pgina, um link para alguma pgina predefinida.
}
?>
</body>
</html>
Etapa 6
Terminamos o desenvolvimento dos cdigos necessrios para um site possuir um formulrio de
contato. A prxima etapa testar se tudo est funcionando, porm antes de qualquer coisa quero
te passar algumas recomendaes:
Voc ter acesso completo aos arquivos enviar.php e contato.html deste e-book neste link:
http://ebookhtmlcss.com/arquivos/bonus-formulario/arquivos-para-estudos.zip .
Caso voc queira usar os cdigos voc ter que adaptar alguns trechos para se enquadrar ao que
planejou em seu site, como por exemplo, os atributos name (name=) usados em seus formulrios tem que bater com os valores usados em $_POST ($_POST[].
Voc tambm deve alterar os dados de SMTP e de domnio encontrados no arquivo enviar.php
de acordo com o domnio a ser usado. No se esquea de tambm baixar o pacote PEAR indicado
no decorrer deste e-book e coloc-los nos diretrios corretos dentro dos includes PHP.
Outra coisa importante que indico que o arquivo enviar.php esteja no mesmo diretrio do
arquivo contato.html. Caso no estejam no mesmo diretrio ser necessrio mudar o valor do
atributo action dentro da tag de abertura do elemento form no documento HTML.
54
Agora que voc est por dentro destes detalhes importantes, para quando for por em prtica em
seus projetos, vamos aos testes!
Para testar agiremos como um usurio comum preenchendo o formulrio de contato do site
do Galucho.
Para visualizar a pgina pronta visite este link: http://ebookhtmlcss.com/galucho-bonus-contato/contato.html.
Usarei uma conta de e-mail do Gmail que tenho para testes.
Com tudo devidamente preenchido, basta clicar no boto enviar.

55
Se no houver erros, carregar uma pgina onde veremos a seguinte mensagem:
Agora vou at a conta de e-mail, que no caso do domnio do Ebook Solidrio, para ver se o
e-mail chegou corretamente.
Como esta conta est dentro do Hostgator, efetuo o login com os dados que ele me forneceu
quando adquiri a hospedagem.
Depois eu sigo o caminho E-mail accounts, menu more e em seguida, invs de ir em Configure E-mail Client, clico em Access Webmail. Abrir a seguinte pgina com 3 opes de
softwares de e-mail.
56
Voc pode optar por qualquer um deles porque todos devem receber a mensagem.
Como voc ver na imagem a seguir, a mensagem chegou com sucesso.
Por questo de privacidade alguns dados foram omitidos, entretanto podemos ver que o objetivo
foi cumprido. Veja que tanto no Header, quanto no corpo da mensagem os dados so os mesmos
que foram digitados no formulrio de contato.
Confira o resultado:
57
Estamos quase l.!

No sei se voc se lembra de que um dos objetivos de nosso projeto que tambm fosse enviada
uma cpia da mensagem tambm para o usurio que preencheu o formulrio.
No to comum este procedimento, mas como projetamos e executamos, c aqui estamos para
conferir o resultado.
Como fui eu que preenchi o formulrio vou at a conta de e-mail que usei no envio para ver se
est tudo est ok. Veja a imagem a seguir:
58
Muito bem! O teste foi um sucesso confirma que nosso sistema de e-mail funcional
59
Concluso
Este um modelo prtico de pgina de contato com integrao ao PHP que voc pode aplicar
em seus sites. Voc pode optar por outros se quiser. O intuito deste e-book que voc tenha uma
base para entender como funcionam os sistemas de uma forma geral, bele?
Esperamos que seja til e que esses e-book fortalea ainda mais os seus conhecimentos.
E se voc gostou de programar eu lhe sugiro continuar estudando esta parte de desenvolvimento.
Voc pode sim se tornar um desenvolvedor e com isso criar seus prprios cdigos e sistemas.
Basta voc querer e se dedicar aos estudos.
Caso voc queria saber mais sobre programao e continuar os seus estudos em PHP eu lhe indico o Curso da Playcode .
Nesse curso da Playcode voc vai aprender a programar do zero e do jeito certo!
Ento, confira o curso aqui: http://goo.gl/0SxonZ
At mais.
Abrao.
Elaborado por:
David Arty e Ed Francisco
60
PORQUE QUALQUER UM ACHA

QUE PODE DAR PITACOS, N?
visite o blog: www.chiefofdesign.com.br

Bonus Pagin A Decont A To PHP

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Bonus Pagin A Decont A To PHP

Uploaded by

Copyright:

Available Formats

Licenciado para Jos Rodrigo Lemos Pinto, E-mail: rodrigolemos8@hotmail.

com, CPF: 03381655256

Ol! Seja Bem-vindo(a)!

O que voc ver neste e-book?

Criaremos um arquivo PHP;

Elementos HTML para construo de formulrios de contato

Em nosso formulrio utilizaremos o mtodo POST. Veja a sintaxe:

<form action=arquivo-que-processa-dados.php method=post>

<form action=arquivo-que-processa-dados.php method=post>

Veja o resultado a seguir:

Criando a pgina de contato do site do Galucho

No caso deletaremos destacado em laranja entre as tags de footer logo a seguir:

4. Quarto passo: mudar o ttulo da pgina.

Colocando o formulrio na pgina de contato e definindo um

Quando voc se deparar com a folha de estilo ir notar a seguinte sintaxe:

Simples: no formulrio da pgina temos 4 inseres de input. S que os tipos so diferentes e

Validao de campos de formulrio com HTML5

Inicialmente podemos simplesmente clicar no boto enviar sem preencher nada.

Criando um arquivo PHP

Desenvolvendo o cdigo PHP para coleta, tratamento e validao dos dados

font: bold 18px/22px Tahoma, Arial, sans-serif;

Sintaxe bsica PHP

Depois de baixar as pastas e arquivos devemos envi-los para um diretrio na hospedagem. Em

// INCIO DE COLETA E VALIDAO DE DADOS DO FORMULRIO

// Verifica se o campo assunto foi preenchido e coleta o dado digitado

Cdigo para validao dos dados da mensagem:

Agora abaixo todo o cdigo de coleta e validao de dados reunidos:

// INCIO DE COLETA E VALIDAO DE DADOS DO FORMULRIO

// Verifica se o campo assunto foi preenchido e coleta o dado digitado

Processando as informaes do corpo da mensagem

Parmetros para o SMTP

tambm efetuar o tipo de pagamento.

$email_destino = contato@endereco-do-seu-site.com.br; // Endereo de e-mail do seu site

, // Aqui vai o nome do usurio do SMTP

Basta agora transferir estas informaes para nosso cdigo PHP.

Inserindo os parmetros SMTP

Com tudo devidamente preenchido, basta clicar no boto enviar.

Se no houver erros, carregar uma pgina onde veremos a seguinte mensagem:

Estamos quase l.!

PORQUE QUALQUER UM ACHA

visite o blog: www.chiefofdesign.com.br

You might also like