Novidades100 - Dicas de Internet e Computador

Sistema Php para Enviar Emails

Veja como Criar um Sistema Simples para Enviar Emails com Mensagens e Imagens Anexadas

Veja aqui como colocar no seu Site um sistema simples para que seus usuários possam enviar Emails com imagens anexadas. Você pode criar vários aplicativos para festas do ano como Natal, Aniversário, Namorados, etc. Aproveitei aqui para colocar de uma forma bem simplificada, utilizando poucos arquivos, coisa que você pode e deve acrescentar o quanto achar necessário.
Para começar, crie um diretório na raiz do seu site chamado natal. Agora crie um outro diretório dentro deste (natal), e nomeie-o de images. Crie mais uma pasta, esta já dentro da pasta images e nomeie-a de thumbs. Pronto. Coloque dentro de images quatro arquivos de imagens de mais ou menos 360px por 400px, nomeando-as respectivamentes como 01, 02, 03 e 04 (Como disse, utilizarei poucos arquivos). Dentro da pasta thumbs coloque as mesmas imagens, só que em tamanhos reduzidos, tipo 100px por 80px. Todas em jpg (jpeg).
Você pode Baixar o Arquivo Completo Aqui e extrair na raiz do seu site.

Diretório do Ajax

Crie uma pasta dentro do diretório natal, nomeie-a como js e salve dentro dela o arquivo abaixo com o nome de ajax.js.

function GetXMLHttp() {
if(navigator.appName == "Microsoft Internet Explorer") {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else {
xmlHttp = new XMLHttpRequest();
}
return xmlHttp;
}
var xmlRequest = GetXMLHttp();
function loadImg(url){
var url = url;
xmlRequest.open("GET",url,true);
xmlRequest.onreadystatechange = mudancaEstado;
xmlRequest.send(null);
if (xmlRequest.readyState == 1) {
document.getElementById("load_image"). innerHTML = "<div style='width:100%; height:420px;text-align:center;'>< img src=../images/loading.gif'> </div>";
}
return url;
}
function mudancaEstado(){
if (xmlRequest.readyState == 4){
document.getElementById("load_image"). innerHTML = xmlRequest.responseText;
}
}

Diretório Htm

Neste diretório, você deve salvar quatro pequenos arquivos, cada um representa uma das imagens carregadas na página principal do aplicativo.
Atenção: Cada linha abaixo representa um arquivo, ou seja, a primeira linha você copia separadamente das outras e salve como cartao-01.htm, a segunda cartao-02.htm, a terceira cartao-03.htm e a quarta e última cartao-04.htm.

<img class="image" src="images/01.jpg" alt="imagem" title="imagem"><p class="copiar">01</p>
<img class="image" src="images/02.jpg" alt="imagem" title="imagem"><p class="copiar">02</p>
<img class="image" src="images/03.jpg" alt="imagem" title="imagem"><p class="copiar">03</p>
<img class="image" src="images/04.jpg" alt="imagem" title="imagem"><p class="copiar">04</p>

Index - Arquivo Principal

O código abaixo é o arquivo principal do aplicativo, você deve salvá-lo como index.html, nele contém botões para exibir as imagens grandes (Cartões) e para chamar o formulário de envio de Emails.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>Enviar Cartões de Natal para Amigos e Parentes</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="shortcut icon" href="images/thumbs/thumb.ico">
<script type="text/javascript" src="js/ajax.js"></script>
<style type="text/css">
body{width:98%;height:auto;padding:1%; background:#800;color:#ffa;margin:0px; text-align:center;}
p{color:#ffd;font-size:90%; text-align:left;}
p.copiar{font-size:170%;font-family:arial; font-weight:bold;margin:0px;color:#900; text-align:center;}
table.cartoes{width:100%;height:auto; padding:0px;margin:0px;}
td.cartoes{width:25%;height:auto; padding:0px;margin:0px;background:#ffa;}
img.cartoes{width:100%;height:100px; margin:0px;}
button.display{width:100%;height:70%; padding:0px;margin:0px;border:0px; background:none;}
button.cartoes{background:#290; color:#fff;font-size:100%;border:1px solid #ddb;}
#load_image{width:98%;height:350px; background:#ddb;text-align:center; padding:1%;margin-top:10px;}
img.image{width:100%;height:92%;}
h1{color:#eec;text-align:center; font-size:160%;margin:5px;}
h2.cartao{font-size:120%;color:#ff7; clear:both;}
img{border:0px;}
p{color:#eee;text-align:left;}
i{color:#3cf;}
b{color:#fc0}
input{height:auto;background:#ffd; color:#00f;border:1px solid #000; background:#fff;font-size:90%; font-weight:bold;}
</style>
</head>
<body>
<h1>Enviar Cartão de Natal</h1>
<p>Para enviar um <b> Cartão de Natal</b> para um amigo e/ou parente, escolha uma das imagens da tabela abaixo clicando sobre cada uma delas, isto fará com que ela seja mostrada em tamanho grande com um número abaixo, este número será sua identificação, ou seja, este será o nome da imagem que você irá inserir no campo <b>imagem</b> do formulário para enviar. Depois de escolhida a imagem, click no botão <b>verde</b> exposto sob cada imagem da tabela para acessar o formulário de envio. </p>
<table class="cartoes"><tr> <td class="cartoes">
<button class="display" onclick="loadImg ('htm/cartao-01.htm');"><img class="cartoes" src="images/thumbs/01.jpg" alt="Enviar este Cartão de Natal"> </button>
<button class="cartoes" onclick=" window.open('htm/enviar.php','popup', 'width=520,height=570,margin-left=0, margin-top=0');">Enviar Este Cartão </button>
</td><td class="cartoes">
<button class="display" onclick="loadImg ('htm/cartao-02.htm');"><img class="cartoes" src="images/thumbs/02.jpg" alt="Enviar este Cartão de Natal" ></button>
<button class="cartoes" onclick= "window.open('htm/enviar.php','popup', 'width=520,height=570,margin-left=0, margin-top=0');">Enviar Este Cartão</button>
</td><td class="cartoes">
<button class="display" onclick=" loadImg('htm/cartao-03.htm');">< img class="cartoes" src="images/thumbs/ 03.jpg" alt="Enviar este Cartão de Natal"></button>
<button class="cartoes" onclick= "window.open('htm/enviar.php','popup', 'width=520,height=570,margin-left=0, margin-top=0');">Enviar Este Cartão</button>
</td><td class="cartoes">
<button class="display" onclick= "loadImg('htm/cartao-04.htm');">< img class="cartoes" src="images/thumbs/ 04.jpg" alt="Enviar este Cartão de Natal"></button>
<button class="cartoes" onclick= "window.open('htm/enviar.php','popup', 'width=520,height=570,margin-left=0, margin-top=0');">Enviar Este Cartão</button>
</td></tr></table>
<div id="load_image"><img class="image" src="images/01.jpg" alt="Enviar Este Cartão de Natal" title="Enviar Este Cartão de Natal"></div>
</body>
</html>

Formulário e Resposta Php

Neste exemplo especificamente eu juntei o formulário com a resposta do php, ou seja, o usuário não irá ser redirecionado.
Obs: Como eu coloquei o script em php neste arquivo ele deve ser salvo com a extensão php. Salve-o como enviar.php no diretório htm (Para não criar um outro diretório).
Atenção: Não esqueça de alterar o trecho do código na cor verde para seu domínio completo.

<html>
<head><title>Enviar Cartão de Natal</title>
</head>
<body>
<style type="text/css">
body{width:98%;height:auto;padding: 1%;background:#eec;color:#007;margin:0px;}
h1{font-size:210%;color:#280;text-align: center;}
p,a,ul,label{color:#009;font-size:90%; font-weight:bold;text-align:left;}
input{background:#ffc;color:#00a;font- weight:bold;border:1px solid #bb9;}
textarea{background:#ffc;color:#00a; font-weight:bold;border:1px solid #bb9;}
</style>
</head>
<body>
<h1>Enviar Cartão de Natal</h1>
<p>Para enviar um <b> Cartão de Natal</b> para um amigo e/ou parente preencha todos os campos corretamente, digitando no final uma mensagem com até 300 caracteres.<br>
No campo <b>Imagem</b> insira o identificador da imagem escolhida, ou seja, um número de dois dígitos, Ex: 01, 02, 03 e 04.</p>
<form method="POST" action="">
<table><tr><td> <label>Seu Nome</label>
</td><td><input name= "nome" type="text" size="35" maxlength= "50">
</td></tr><tr><td> <label>Seu Email</label> </td><td> <input name="email" type="text" size="35" maxlength="50">
</td></tr><tr><td> <label>Nome do Destinatário</label> </td><td> <input name="amigo" type="text" size="35" maxlength="50">
</td></tr><tr><td> <label>Email do Destinatário</label> </td><td> <input name="emailamigo" type=" text" size="35" maxlength="50">
</td></tr><tr><td> <label>Saudação</label> </td><td> <input name="titulo" type="text" size="35" maxlength="50">
</td></tr><tr><td> <label>Escolha uma Imagem<br> Ex: 01, 02, 03, 04.</label>
</td><td> <input name="image" type="text" size="35" maxlength="2">
</td></tr><tr> <td> <label>Digite Sua Mensagem</label> </td><td>
<textarea name="mensagem" cols="35" rows="08" maxlength="300" ></textarea>
</td></tr><tr><td>
<input name="submit" type="submit" style="margin-left:0px;background:#290; color:#fff;border:1px solid #3cf;font- weight:bold;" value="Enviar Cartão">
</td></tr></table>
</form>
<?php
$nome = $_POST['nome'];
$email = $_POST['email'];
$amigo = $_POST['amigo'];
$emailamigo = $_POST['emailamigo'];
$titulo = $_POST['titulo'];
$mensagem = $_POST['mensagem'];
if ($nome == null) {
echo "Você deve inserir seu <b>Nome</b>";
exit();
}
if ($email == null) {
echo "Por favor, digite seu <b>Email</b>";
exit();
}
if ($amigo == null) {
echo "Por favor, insira o <b>Nome do seu Amigo</b>";
exit();
}
if ($emailamigo == null) {
echo "Você deve inserir o <b>Email do seu Amigo</b>";
exit();
}
if ($titulo == null) {
echo "Você deve inserir o <b>Título da Mensagem</b>";
exit();
}
if ($image == null) {
echo "Você deve inserir a <b>Imagem</b>";
exit();
}
if ($mensagem == null) {
echo "Você deve inserir o <b>Sua Mensagem</b>";
exit();
}
$headers = "Content-type:text/html; charset=iso-8859-1";
$mensagem = "<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN'
'http://www.w3.org/TR/html4/strict. dtd'>
<html><head><title> Feliz Natal</title>
<style type='text/css'>
body{width:96%;height:auto;text-align: center;background:#fff;color:#900; margin:0px;padding:2%;}
h1{font-size:320%;color:#290;font -family:impact;}
p{font-size:110%;color:#00f;font- family:verdana;}
p.mensagem{font-size:110%;color:#009; font-family:verdana;}
b{color:#000;}
#content{width:98%;height:auto;text- align:center;padding-top:20px;padding- bottom:10px;}
img{width:86%;height:520px;border:0px;}
a{color:#280;font-size:120%;font-weight: bold;text-decoration:none;}
</style>
</head>
<body>
;<div id='content'><p> Ol&aacute; ".$amigo. ", " . $nome. " est&aacute; te enviando um <b>Cart&atilde;o de Natal</b> com uma mensagem, <b>leia</b>
:</p><h1> " .$titulo . "</h1><br><img src='http://www.seusite. com/natal/images/".$image.".jpg' title='".$titulo."'><p class=' mensagem'>".$mensagem."</p>
</div>
</body>
</html>";
$envia = mail($emailamigo,$amigo, $mensagem,$headers);
echo "Seu cartão foi enviado com sucesso!</b>";
?>
<button onclick="window.close(); ">Fechar</button>
</body>
</html>

Conclusão

Pronto. Se você já está com tudo ok, todas as respectivas pastas completas dentro do diretório natal, tudo a fazer agora é subir para o seu servidor e adicionar natal na raiz do seu Site, depois digite no navegador www.seusite.com/natal/, tudo deve funcionar sem nenhum problema, caso ocorra erro, revise e encontre o problema, ou refaça tudo do começo.

| | HomePage | Relatar Problema |