REACTJS - Aplicação de Página �nica - #10 Envio de Email

Nesse tutorial vamos realizar a parte backend em PHP para envio de email com REACTJS.

Envio de email com REACTJS

Primeiramente vamos ajustar nossos anchorlinks para que fiquem certinhos, para isso vamos colocar as ids nas divs que desejamos que as âncoras nos levem. O método render do componente Nav ficará assim:

render(){
    return(
        <div className="nav">
            <AnchorLink href='#home'>Home</AnchorLink>
            <AnchorLink href='#mapa'>Mapa</AnchorLink>
            <AnchorLink href='#information'>Informações</AnchorLink>
            <AnchorLink href='#contact'>Contato</AnchorLink>
        </div>

    );
}

Posteriormente para trabalharmos com envio de email utilizaremos a class PHPMailer. Vamos baixá-la e salvar dentro do diretório class.

Vamos editar nosso controllerForm.php para receber as variáveis, instanciar a class PHPMailer e enviar o email:

<?php
include($_SERVER['DOCUMENT_ROOT']."/imovel/class/PHPMailer-master/src/PHPMailer.php");
include($_SERVER['DOCUMENT_ROOT']."/imovel/class/PHPMailer-master/src/SMTP.php");
include($_SERVER['DOCUMENT_ROOT']."/imovel/class/PHPMailer-master/src/Exception.php");

$nomeUser=filter_input(INPUT_POST,"nome",FILTER_SANITIZE_SPECIAL_CHARS);
$telefoneUser=filter_input(INPUT_POST,"telefone",FILTER_SANITIZE_SPECIAL_CHARS);
$emailUser=filter_input(INPUT_POST,"email",FILTER_SANITIZE_SPECIAL_CHARS);
$mensagemUser=filter_input(INPUT_POST,"mensagem",FILTER_SANITIZE_SPECIAL_CHARS);

$mail=new \PHPMailer\PHPMailer\PHPMailer(true);
$mail->isSMTP();                                      // Set mailer to use SMTP
$mail->Host = 'MYSERVERMAIL';  // Specify main and backup SMTP servers
$mail->SMTPAuth = true;                               // Enable SMTP authentication
$mail->Username = 'MYUSER';                 // SMTP username
$mail->Password = 'MYPASSWORD';                           // SMTP password
$mail->SMTPSecure = 'tls';                            // Enable TLS encryption, `ssl` also accepted
$mail->SMTPOptions = array('ssl' => array('verify_peer' => false, 'verify_peer_name' => false, 'allow_self_signed' => true)); //Específico para Hostgator

//Recipients
$mail->setFrom($emailUser,$nomeUser);
$mail->addAddress('MYEMAIL');     // Add a recipient

//Content
$Body=" Nome: {$nomeUser} 
 Email: {$emailUser} 
 Telefone: {$telefoneUser} 
 Mensagem: {$mensagemUser} ";
$mail->isHTML(true);                                  // Set email format to HTML
$mail->Subject = 'Contato do Site';
$mail->Body    = $Body;

$mail->send();
echo 'Mensagem enviada com sucesso!';

Ao enviar o site para o ar, caso coloquemos o site em um subdiretório, por exemplo: www.meusite.com/algumdiretorio é necessário que façamos algumas alterações para que o REACTJS entenda onde é a raiz do site. O primeiro passo é abrir o arquivo package.json e colocar a propriedade/atributo homepage:

"homepage": "https://www.MYSITE.com.br/MYDIRETORIO/",

Precisamos também antes das imagens, atribuir a função que busca o caminho absoluto. Basta fazermos assim antes do caminho das imagens:

<picture>
    <source media="(max-width: 768px)" srcSet={process.env.PUBLIC_URL+"/img/logomarca-wef-imoveis-S.png"} />
    <source media="(min-width: 769px)" srcSet={process.env.PUBLIC_URL+"/img/logomarca-wef-imoveis-L.png"} />
    <img src={process.env.PUBLIC_URL+"/img/logomarca-wef-imoveis-L.png"} alt="Logomarca WEF Imóveis"/>
</picture>

O proccess.env.PUBLIC_URL busca o caminho absoluto do nosso sistema.

Sucesso nos códigos e na vida!