Virtualize Interatividade Digital

Formulario de contato e envio de e-mail

Enviar e-mail é sem dúvida uma função fundamental em qualquer aplicação WEB.

Para entendermos a mecânica de envio de e-mail, precisamos entender o formato cliente-servidor da comunicação na Internet.

Quando acessamos uma página na Internet, tudo que vemos é o resultado do processamento de um arquivo que está hospedado no servidor da página. Para tanto, existem tecnologias cujo objetivo é possibilitar ao desenvolvedor da página definir como o conteúdo a ser enviado paro visitante será gerado.

Dessa forma, temos duas perspectivas na aplicação: a perspectiva do desenvolvedor, que, por exemplo, ao acessar o código fonte da página verá as diversas regras e algorítmos que definem como o conteúdo será gerado, e a persperctiva do cliente, que ao acessar o código-fonte da página verá apenas o conteúdo gerado, e desconhece as regras.

Para definir as regras para geração dinâmica de conteúdo existem linguagens como PHP, ASP ou JSP. Essas linguagem são chamadas “server-side”, pois são executadas no lado servidor. Para definir o formato, layout e mecânicas de interação da página existem linguagens como HTML, Javascript e CSS. São linguagens “client-side” pois são executadas no lado cliente (no navegador do visitante).

Para enviarmos um e-mail precisamos utilizar um servidor de e-mail. Os servidores de hospedagem de sites frequentemente possuem um servidor de e-mail integrado. Quando, por exemplo, configuramos nossa conta de e-mail no outlook (informando smtp, pop3, etc), estamos configurando a conexão entre o outlook e o servidor de e-mail, para que ele possa realizar os envios.

Da mesma forma, para enviarmos um e-mail através de uma aplicação Actionscript precisamos utilizar um servidor de e-mail. A forma mais fácil de fazer essa conexão entre nossa aplicação e o servidor de e-mail é utilizar uma página em linguagem “server-side”.

Nosso projeto em Actionscript envia os dados que desejamos enviar para a página e essa página conecta com o servidor de e-mail, enviando o e-mail. Nesse exemplo utilizarei uma página em linguagem PHP, mas isso se aplica a outras linguagens. Vamos ao exemplo!

Crie um formulário no seu projeto em Flash. Para isso crie campos de texto do tipo InpuText (nome, email e mensagem). Nomeie eles de nome_txt, email_txt e mensagem_txt. Crie também um campo de texto chamado resultado_txt (para exibirmos o resultado do envio) e um botão enviar_btn. Veja a figura (o exemplo estará disponível para download ao fim do tutorial):

O código para que nosso formulário funcione é apresentado a seguir:

// Associamos o click no botão enviar à função de envio de e-mail.
enviar_btn.addEventListener(MouseEvent.CLICK, EnviarEmail);

function EnviarEmail(evt)
{
	resultado_txt.text = "Enviando mensagem... aguarde!";

	// Cria o objeto que realizará o envio dos dados para a página
	// envio_email.php.
	var loader:URLLoader = new URLLoader();

	// Criamos o listener que será chamado ao fim da execução do script
	// de envio de e-mail.
	loader.addEventListener(Event.COMPLETE					, FimLoad);

	// Criamos os listener que serão chamados em caso de erro ao tentar abrir
	// o script (arquivo não encontrado ou em outro domínio por exemplo).
	loader.addEventListener(IOErrorEvent.IO_ERROR				, ErroLoad);
	loader.addEventListener(SecurityErrorEvent.SECURITY_ERROR	, ErroLoad);	

	// Definimos qual script enviará o e-mail e como serão enviados os
	// parâmetros para esse script.
	var request:URLRequest = new URLRequest("envio_email.php");
	request.method = "POST";

	// Definimos os parâmetros a serem passados para o script
	// envio_email.php.
	var variables:URLVariables = new URLVariables();
	variables.nome	 	= nome_txt.text;
	variables.email		= email_txt.text;
	variables.mensagem	= mensagem_txt.text;
	request.data 		= variables;

	// Solicitamos a execução do Script.
	loader.load(request);
}

function FimLoad(evt)
{
	// Exibimos o resultado do envio.
	resultado_txt.text = evt.target.data;
}

function ErroLoad(evt)
{
	resultado_txt.text = "Ocorreu um erro durante o envio do e-mail.";
}

Na linha 2 associamos o clique no botão enviar à função que realiza o envio de e-mail.

Na linha 10 criamos um objeto do tipo URLLoader. Esse objeto é utilizado para se carregar conteúdos de páginas externas. Ele servirá como ponte entre nossa aplicação em Flash e a página em PHP que realizará o envio do e-mail.

Nas linhas 14 dizemos que quando o objeto URLLoader terminar de carregar os dados da página (que definiremos qual será mais adiante) queremos que a função FimLoad seja executada. Nas linhas 18 e 19 definimos que a função ErroLoad deverá ser chamada caso ocorra algum erro durante o carregamento da página.

Na linha 23 criamos um objeto que define qual página deverá ser carregada. Na linha 24 definimos o formato do envio de dados para a página, não irei entrar em detalhes quanto a isso para não alongar o tutorial.

Na linha 28 criamos um objeto que passará parâmetros para a página que iremos carregar. Assim, poderemos definir o nome de quem está enviado o e-mail, o e-mail desta pessoa e a mensagem. Nas linhas 29 a 31 definimos os parâmetros, e na linha 32 associamos esses parâmetros ao objeto Request.

Por fim, na linha 35 solicitamos o carregamento da página. A partir daí entra em execução a página PHP que realizará o envio da mensagem, cujo código é apresentado a seguir:

// Recuperamos os parâmetros enviados através do formulário.
$nome		= $_POST["nome"];
$email		= $_POST["email"];
$mensagem	= $_POST["mensagem"];

// Definimos o título da mensagem (lembrando que '.' é operador de concatenação em PHP).
$assunto	= "Mensagem de " . $mensagem . " (" . $email . ")";

// Definimos o destinatário da mensagem.
$destino	= "seuemail@seudominio.com.br";

// Enviamos o e-mail.
if (mail($destino, $assunto, $mensagem))
{
	echo "Mensagem enviada com sucesso!";
}
else
{
	echo "Não foi possível enviar sua mensagem!";
}

Nas linhas 1 a 3 recuperamos os parâmetros que enviamos através do Actionscript 3. Observe que o nome dos parâmetros têm que ser idêntico aos digitado nas linhas 29 a 31 do código Actionscript. Na linha 13, utilizamos a função mail() do PHP, para realizar o envio do e-mail. Observe que isso tudo ocorre no lado servidor, e até agora não geramos nenhum conteúdo para o cliente (no caso a aplicação Flash). Na linha 15 utilizamos o comando “echo” para enviar um resultado ao cliente, que será recuperado na linha 41 da aplicação Flash, com o acesso a propriedade target.data do evento de fim de load.

Lembre-se que para que esse exemplo funcione você precisa enviá-lo (tanto o arquivo .swf e o arquivo .php) para um servidor de hospedagem com suporte a PHP.

O uso de linguagens dinâmicas (como o PHP) e seu acesso através do Flash possibilita a criação de sistemas que acessam banco de dados, o que é fundamental em diversos projetos.

Vamos ficando por aqui, até o próximo tutorial. Dúvidas?

Baixar tutorial

Tags: actionscript 3, criação de sites, tutorial action script, tutorial actionscript