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!
Criando um catálogo de produtos com Lumine e CodeIgniter – Parte 9 Exemplo de ExtJS 4 e Lumine