HUFERSIL.WEBDEVELOPER

Criando um catálogo de produtos com Lumine e CodeIgniter – Parte 10

Hoje iremos montar nosso formulário de contato.
Usaremos para enviar os dados a biblioteca de envio de mensagens do CodeIgniter.

Preparando a Controller

A controller para enviar será bem simples.
Para facilitar a codificação, declararemos um membro na controller que é “injetado” pelo CodeIgniter dinamicamente em tempo de execução. O problema dessa injeção é que ela não nos dá o Code Completion do  Eclipse.

Também criarmos o método index sendo um alias (apelido) do método form.
Atentem aos comentários nos códigos! Tem informações importantes para enviar e-mail em caso de utilização da Locaweb como servidor de hospedagem.

Crie a controller na pasta de controllers do site, application/controllers/contato.php:

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
 
/**
 * Controller para envio de formulario de contato
 * 
 *
 * @author Hugo Ferreira da Silva
 *
 */
class Contato extends SiteController {
 
	/**
	 * Criamos esta variavel aqui para podermos ter o code completion no Eclipse
	 * 
	 * @var CI_Email
	 */
	public $email;
 
	/**
	 * Apelido para exibir o formulario
	 * 
	 * @author Hugo Ferreira da Silva
	 * @return void
	 */
	public function index(){
		$this->form();
	}
 
	/**
	 * Exibe o formulario de contato
	 * 
	 * @param string $mensagem Mensagem a ser exibida no form
	 * @author Hugo Ferreira da Silva
	 * @return void
	 */
	public function form($mensagem = null){
 
		$this->assign('mensagem', $mensagem);
		$this->loadCommonAssets();
		$this->display('contato/form');
	}
 
	/**
	 * Envia um email de contato contendo as informações do formulario
	 * 
	 * @author Hugo Ferreira da Silva
	 * @return void
	 */
	public function enviar(){
 
		$erros    = array();
		$nome     = trim($this->input->post('nome'));
		$email    = trim($this->input->post('email'));
		$mensagem = trim($this->input->post('mensagem'));
 
		if(empty($nome)){
			$erros[] = 'Informe seu nome';
		}
 
		if(empty($email)){
			$erros[] = 'Informe seu e-mail';
		} else {
			$result = Lumine_Util::validateEmail($email);
			if(!$result){
				$erros[] = 'E-mail inválido';
			}
		}
 
		if(empty($mensagem)){
			$erros[] = 'Informe a mensagem de contato';
		}
 
		// se não houveram erros
		if(empty($erros)){
			// colocando dados adicionais na mensagem
			$textoEmail = 'De: ' . $nome . PHP_EOL;
			$textoEmail .= 'E-mail: ' . $email . PHP_EOL;
			$textoEmail .= 'Mensagem: ' . $mensagem . PHP_EOL;
			$textoEmail .= 'IP: ' . $_SERVER['REMOTE_ADDR'] . PHP_EOL;
 
			// NOTA IMPORTANTE:
			// Se você está utilizando a Locaweb, o remetente (from)
			// deve ser você, com um endereço de e-mail válido na locaweb.
			// Referencias:
			// - http://wiki.locaweb.com.br/pt-br/Boas_pr%C3%A1ticas_de_envio_de_e-mail_por_seu_site
			// - http://wiki.locaweb.com.br/pt-br/Como_enviar_e-mails_com_a_fun%C3%A7%C3%A3o_mail()_do_PHP
 
			// Enviamos o formulario
			// Neste exemplo, o remetente é o usuario que envio o formulario
			$this->load->library('email');
			$this->email->from($email, $nome);
			$this->email->reply_to($email, $nome);
			$this->email->to($emailQueVaiReceberOsDadosDoFormulario);
			$this->email->subject('Contato do site ' . $_SERVER['HTTP_HOST']);
			$this->email->message($textoEmail);
			$this->email->send();
 
			// redirecionando o usuario
			// ja encerra a execução do script
			redirect('contato/form/sucesso');
		}
 
		// se chegou aqui, é porque tem problemas
		$this->assign('erros', $erros);
		$this->form('problemas');
	}
 
}

Depois de criarmos a controller, está na hora de criarmos a view.
Salve o conteúdo abaixo no caminho application/views/site/contato/form.php:

<div class="top-search clearfix">
	<h3 class="head-pet">
		<span>Pesquisa de Produtos</span>
	</h3>
	<form action="#" id="searchform" method="post">
		<p>
			<input type="text" name="2" id="s" class="field"
				value="Pesquisar Por" onfocus="this.value=''" /> <input
				type="submit" name="s_submit" id="s-submit" value="" />
		</p>
	</form>
	<p class="statement">
		<ul class="breadcrumb">
			<li>Você está em:</li>
			<li class="fireRed">Contato</li>
		</ul>
	</p>
</div>
 
<div id="content">
	<form id="whats-hot" class="formContato" method="post" action="<?php echo site_url('contato/enviar'); ?>">
		<h2 class="w-bot-border">
			Entre em <span>Contato!</span>
		</h2>
 
		<?php 
		if(!empty($mensagem)){
			switch($mensagem){
				case 'sucesso':
					echo '<div class="sucesso">Sua mensagem foi enviada com sucesso!</div>';
				break;
				case 'problemas':
					$errosStr = implode('<br />', $erros);
					echo '<div class="erros">Problemas ao enviado o formulario:<br/>', $errosStr, '</div>';
				break;
			}
		}
 
		?>
 
		<p>
			<label for="nome">Seu nome:</label>
			<input type="text" id="nome" name="nome" value="<?php echo $this->input->post('nome'); ?>" />
		</p>
 
		<p>
			<label for="email">Seu e-mail:</label>
			<input type="text" id="email" name="email" value="<?php echo $this->input->post('email'); ?>" />
		</p>
 
		<p>
			<label for="mensagem">Mensagem:</label>
			<textarea name="mensagem" id="mensagem" rows="7"><?php echo $this->input->post('mensagem'); ?></textarea>
		</p>
 
		<p class="botoes">
			<input type="submit" value="Enviar" />
			<input type="reset" value="Resetar Dados" />
		</p>
 
	</form>
</div>

E finalmente, para deixarmos o nosso formulário bonitinho, usamos CSS:

.formContato p {
	clear:both;
	padding-bottom: 5px;
}
 
.formContato p label {
	display: block;
	padding-top: 8px;
	padding-right: 3px;
	text-align: right;
	width: 200px;
	float: left;
}
 
.formContato p input[type=text], .formContato p textarea {
	width: 500px;
}
 
.formContato p input[type=reset], .formContato p input[type=submit] {
	float: left;
	color: #FFF;
	font-weight: bolder;
	border: 0px;
	padding: 5px 15px 5px 15px;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	cursor: pointer;
}
 
.formContato p input[type=reset] {
	background-color: #F00;
}
 
.formContato p input[type=submit] {
	background-color: #060;
	margin-left: 205px;
}
 
.erros {
	padding: 4px;
	background-color: #FFFF55;
	color: #FF0000;
	font-weight: bold;
	margin: 0px 10px 10px 10px;
	border: 1px solid #FC0;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}
 
.sucesso {
	padding: 4px;
	background-color: #00FF00;
	color: #000;
	font-weight: bold;
	margin: 0px 10px 10px 10px;
	border: 1px solid #060;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

Se todos os passos foram seguidos corretamente, o seu formulário deverá ficar semelhante a este.

@braços e fiquem com Deus!

Deixar uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *

*

Pode usar estas etiquetas HTML e atributos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">