Tweet
Bom pessoal após um tempo sem programar em php decidi criar um mini-tuto meio que mastigado para o pessoal.
Se trata de um simples mural de recados em PHP e graça ao spammer do Acunetix adicionei um captcha para verificação e mais algumas outras coisinhas.
Go!
1° Criando banco de dados
Crie um banco de dados com nome qualquer, no meu caso 'mural_areax'
Logo, crie uma tabela com um nome qualquer, no meu caso 'mural_recados' com 5 aquivos.
No 1° campo
Nome: class
Tipo: int
No 2° campo
Nome: hora
Tipo: time
No 3° campo
Nome: data
Tipo: data
No 4° campo
Nome: mensagem
Tipo: text
No 5° campo
Nome: nome
Tipo: text
2° Criando conexao.pxp
Crie um arquivo php chamado conexao.php com o seguinte conteúdo:
Edite as partes necessárias e vamos para a próxima etapa.
3° Criando o arquivos index.php
Aqui é aonde todos os valores de db serão exibidos e inseridos, vamos lá.
Crie um arquivo php chamado index.php com o seginte conteúdo:
Repare que o textarea tem um número máximo de caracteres com um simples JS para melhor vizualização do usuário, junto com o popup para cada comentário, vamos ver melhor isso mais à frente.
Nota: Onde está escrito 'mural_recados' você terá que modificar com o nome da sua tabela.
Vamos para o próximo passo.
4° Criando o arquivo inserindo.php
Crie um arquivo php com o nome inserindo.php, neste coloque o seguinte conteúdo:
Nota: Onde está escrito 'mural_recados' você terá que modificar com o nome da sua tabela.
5° Criando arquivo captcha.php
Crie um arquivo php com o nome captcha.php, neste coloque o seguinte conteúdo:
Para criação do captcha, você precisa de um arquivo fonte, no meu caso eu usei uma que chamei de 'font.ttf', caso queira usar outra existe várias na pastas C:\WINDOWS\Fonts. Ecolha uma de sua preferência copie e jogue na pasta junto com o arquivo captcha.php
Depois disso, vamos para o passo final.
6° Criando o arquivo popup.php
Crien um arquivo php chamado popup.php, neste coloque o seguinte conteúdo:
Bom pessoal basicamente é isso, espero que todos tenham entendido, e para finalizar deixo os arquivos organizadinhos para download.
Apenas usuários registrados e ativados podem ver os links., Clique aqui para se cadastrar...
Senha: ar3ax
att, ar3ax
Se trata de um simples mural de recados em PHP e graça ao spammer do Acunetix adicionei um captcha para verificação e mais algumas outras coisinhas.
Go!
1° Criando banco de dados
Crie um banco de dados com nome qualquer, no meu caso 'mural_areax'
Logo, crie uma tabela com um nome qualquer, no meu caso 'mural_recados' com 5 aquivos.
No 1° campo
Nome: class
Tipo: int
No 2° campo
Nome: hora
Tipo: time
No 3° campo
Nome: data
Tipo: data
No 4° campo
Nome: mensagem
Tipo: text
No 5° campo
Nome: nome
Tipo: text
2° Criando conexao.pxp
Crie um arquivo php chamado conexao.php com o seguinte conteúdo:
Código PHP:
<?php
$host ="localhost"; // local do DB, geralmente localhost
$usuario ="root"; //usuario padrão root
$senha ="****"; //sua senha mysql
$dbname ="mural_areax"; //nome do banco de dados
mysql_connect($host,$usuario,$senha) or die(mysql_error()); // realiza a conexão
mysql_select_db($dbname) or die(mysql_error()); // seleciona o banco de dados
?>
3° Criando o arquivos index.php
Aqui é aonde todos os valores de db serão exibidos e inseridos, vamos lá.
Crie um arquivo php chamado index.php com o seginte conteúdo:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Formulário de recados</title>
<style>
#content {
width:600px;
border:#66b6fc 2px solid;
margin:0 auto;
padding:0;
}
.estilo1{
width:590px;
background-color:#F7F7F7;
padding:5px;
border:#66b6fc 2px solid;
}
.estilo2{
width:590px;
background-color:#e5e5e5;
padding:5px;
border:#66b6fc 2px solid;
}
.header_mensa{
width:300px;
background: #e5e5e5; /* Old browsers */
background: -moz-linear-gradient(top, #e5e5e5 8%, #ffffff 94%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(8%,#e5e5e5), color-stop(94%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e5e5e5 8%,#ffffff 94%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e5e5e5 8%,#ffffff 94%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #e5e5e5 8%,#ffffff 94%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #e5e5e5 8%,#ffffff 94%); /* W3C */
padding:5px;
border:#66b6fc 2px solid;
}
#ap { text-align:center;}
a, a:visited{color:#06C;text-decoration:none;}
a:hover,a:active {color:#034180;text-decoration:underline;}
</style>
</head>
<script type="text/javascript">
<!-- Função para abrir o Popup -->
function abrirPagina(link)
{
var site = link;
window.open(site,"_blank","toolbar=no, location=yes, directories=no, status=no, scrollbars=yes, resizable=yes, width=620, height=200, top=30, left=30");
}
</script>
<script>
<!-- Função para quantidades de caracteres Máx 150. -->
function conta() {
var quant = document.form1.mensagem.value.length;
var mensagem = document.form1.mensagem.value;
var maximo = 150;
var decrescente = maximo-quant;
document.getElementById('valor').innerHTML = decrescente;
if(quant > maximo-1) {
var reduzido = document.form1.mensagem.value.length-1;
var novo_valor = mensagem.substring(0, reduzido);
document.form1.mensagem.value=novo_valor;
return false;
}
}
</script>
<body>
<center><b>Deixe seu comentário!</b></center>
<form id="form1" name="form1" method="post" action="inserindo.php"> <!-- Aqui fica o arquivo inserindo.php-->
<table width="600" border="0" align="center">
<tr>
<th width="86" scope="row"> </th>
<td width="498"> </td>
</tr>
<tr>
<th scope="row">Nome</th>
<td><input name="nome" type="text" id="nome" /></td>
</tr>
<tr>
<th height="56" scope="row">Mensagem</th>
<td><label>
<textarea onKeyup="conta()" name="mensagem" cols="61" rows="7" id="mensagem"></textarea>
</label></td>
</tr>
<tr>
<th height="56" scope="row">Verificação</th>
<td><label>
<img title = "Veirificação AntiSpam!" src="captcha.php"> <!-- Aqui fica o arquivo captcha -->
</label><div id="valor" style = "float:right;">150</div> <td>
</tr>
<tr>
<td> </td>
<td> <input type="text" size = "22" name="palavra" /></td>
</tr>
<tr>
<th scope="row"> </th>
<td><input name="enviar" type="submit" id="enviar" value="Enviar" />
<input name="limpar" type="reset" id="limpar" value="Limpar" /></td>
</tr>
<tr>
<th scope="row"> </th>
<td> </td>
</tr>
</table>
</form>
<div id="content">
<?php
session_start();//Inicia a sessão - Usado para o captcha
include_once("conexao.php");// Abre a conexão com bando de dados
$limit = mysql_query("select * from mural_recados ORDER BY class DESC");//Busca resultados dentro do db de baixo para cima.
$estilo = 1;// Estilo css 'estilo1'
if(!mysql_fetch_array(mysql_query("select * from mural_recados ORDER BY class DESC"))) //Verificação de conteúdo no db
{
echo "
<p><center>Nenhum comentário!</center></p>";//Sem conteúdo.
}
else
{
while($sql = mysql_fetch_array($limit))//Cria um laço com os arrays dos resultados do db.
{
// Estilo css
if($estilo == 1)
{
$estilo++;
}
elseif($estilo == 2)
{
$estilo--;
}
//Estilo css
$nome = $sql['nome']; //Recebe nome do db
$mensagem = $sql['mensagem']; // Recebe mensagem do db
$data = $sql['data']; //Recebe data do db
$hora = $sql['hora']; //Recebe hora do db
$class = $sql['class']; //Recebe class do db
echo "
<div class = content>
<table>
<tr>
<td class = estilo$estilo>
<a style=\"float:right;font-size:25px;cursor:pointer;\" onclick=\"abrirPagina('http://127.0.0.1/mural/popup.php?nome=$nome&mensagem=$mensagem&data=$data&hora=$hora&class=$class&estilo=$estilo');\" title = \"Postado no dia $data às $hora\" href = \"#\" >#{$class}</a>
<b>Nome:</b> {$nome}<br>
<b>Data:</b> {$data}<br>
<b>Hora:</b> {$hora}<br>
</td>
</tr>
<tr>
<td class = estilo$estilo>
<p>{$mensagem}</p>
</td>
</tr>
<table>
</div>"; // Exibe os valores
}
}
?>
</div>
</body>
</html>
Nota: Onde está escrito 'mural_recados' você terá que modificar com o nome da sua tabela.
Vamos para o próximo passo.
4° Criando o arquivo inserindo.php
Crie um arquivo php com o nome inserindo.php, neste coloque o seguinte conteúdo:
Código PHP:
<?php
session_start();//inicia a sessão
include("conexao.php"); //conexão com o banco de dados
//capturando as variaveis do form no arquivo index.php
$nome =& $_POST['nome'];
$mensagem =& $_POST['mensagem'];
if (!($_POST["palavra"] == $_SESSION["palavra"]))://Verificação do captcha
?>
<script language="JavaScript">alert('Erro na verificação AntiSpam!');
location.href='http://127.0.0.1/mural/';
</script>
<?
exit;
endif;
//Filtro antixss
$nome_vetor = str_split($nome);//Quebra a string criando uma array com cada letra
$mensagem_vetor = str_split($mensagem);//Quebra a string criando uma array com cada letra
for($i=0;$i < strlen($nome);$i++)// Verificação letra por letra na variável $nome
{
if(($nome_vetor[$i] == "<") || ($nome_vetor[$i] == ">") || ($nome_vetor[$i] == ";") || ($nome_vetor[$i] == "/") || ($nome_vetor[$i] == "'"))//Verificação de caractere indesejado
{
$nome = str_replace("$nome_vetor[$i]",'',$nome);//Caso encontre, substitui por um espaço vazio.
}
}
for($i=0;$i < strlen($mensagem);$i++)// Verificação letra por letra na variável $mensagem
{
if(($mensagem_vetor[$i] == "<") || ($mensagem_vetor[$i] == ">") || ($mensagem_vetor[$i] == ";") || ($mensagem_vetor[$i] == "/") || ($nome_vetor[$i] == "'"))//Verificação de caractere indesejado
{
$mensagem = str_replace("$mensagem_vetor[$i]",'',$mensagem);//Caso encontre, substitui por um espaço vazio.
}
}
//fim filtro antixss
if(strlen($nome) > 30)://Verificação de caractere na variável $nome, Max 30.
?>
<script language="JavaScript">alert('Nome muito extenso!');
location.href='http://127.0.0.1/mural/';
</script>
<?
exit;
endif;
if((empty($nome) || empty($mensagem)) || ((strlen($mensagem)) > 150))://Verificação de campo vazio ou quantidade de caracteres.
?>
<script language="JavaScript">alert('Erro no envio!!');
location.href='http://127.0.0.1/mural/';
</script>
<?
exit;
endif;
//comando sql
$insert = "INSERT INTO mural_recados (nome, mensagem, data, hora) VALUES ('{$nome}', '{$mensagem}', CURDATE(), CURTIME())";
//comando sql para inserir o conteúdo no db
mysql_query($insert) or die ('Não foi possivel inserir os dados, <a href="javascript:history.back()">Voltar</a>');
header("location: index.php") //Retorna a index.php
?>
5° Criando arquivo captcha.php
Crie um arquivo php com o nome captcha.php, neste coloque o seguinte conteúdo:
Código PHP:
<?php
session_start(); // inicia a sessao
header("Content-type: image/jpeg"); // define o tipo do arquivo
//Váriáveis iniciais
$largura = "150"; // largura
$altura = "50"; // altura
$tamanho_fonte = "25"; // tamanho da fonte
$quantidade_letras = "5"; // Quantidade de letras
function captcha($largura,$altura,$tamanho_fonte,$quantidade_letras)//Declaração da função
{
$imagem = imagecreate($largura,$altura); // define a largura e a altura da imagem
$fonte = "font.ttf"; //Este é o arquivo fonte, deverá está na mesma pasta do arquivo captcha.php
$preto = imagecolorallocate($imagem,0,0,0); // define a cor preta
$branco = imagecolorallocate($imagem,255,255,255); // define a cor branca
// Forma a palavra conforme o parâmetro $quantidade_letras
$palavra = substr(str_shuffle("abcdefghijklmnpqrstuvyxwz23456789"),0,($quantidade_letras));//tipos de caracteres
$_SESSION["palavra"] = $palavra; // atribui para a sessao a palavra gerada
for($i = 1; $i <= $quantidade_letras; $i++){
imagettftext($imagem,$tamanho_fonte,rand(-25,25),($tamanho_fonte*$i),($tamanho_fonte + 10),$branco,$fonte,substr($palavra,($i-1),1)); // atribui as letras a imagem
}
imagejpeg($imagem); // gera a imagem
imagedestroy($imagem); // limpa a imagem da memoria
}
captcha($largura,$altura,$tamanho_fonte,$quantidade_letras); // executa a funcao captcha passando os parametros recebidos
?>
Depois disso, vamos para o passo final.
6° Criando o arquivo popup.php
Crien um arquivo php chamado popup.php, neste coloque o seguinte conteúdo:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
.estilo1{
width:590px;
background-color:#f0f9ff;
padding:5px;
border:black 1px solid;
}
.estilo2{
width:590px;
background-color:#ccebff;
padding:5px;
border:black 1px solid;
}
</style>
</head>
<body>
<?php
//Captura toas as variáveis pelo método GET
$nome =& $_GET['nome'];
$mensagem =& $_GET['mensagem'];
$data =& $_GET['data'];
$hora =& $_GET['hora'];
$class =& $_GET['class'];
$estilo =& $_GET['estilo'];
//Filtro antixss
function filtro()
{
global $nome,$mensagem,$data,$hora,$class,$estilo; //Declaração das variáveis globais
if(preg_match('([<_>_;_/])',$nome.$mensagem.$data.$hora.$class) or (!is_numeric($estilo)) or (!is_numeric($class)))//Verificação de caracteres indesejados.
{
return true; //Atribui verdadeiro a função
}
}
//fim filtro antixss
//Verificação das variáveis
if((isset($nome)) and (isset($mensagem)) and (isset($data)) and (isset($hora)) and (isset($class)) and !(filtro() == true))
{
print "<title>$nome ($data - $hora) #$class</title>";
print "
<div class = \"estilo$estilo\">
<table>
<tr>
<td width = \"8%\"><b>Nome:<b></td> <td>$nome</td>
</tr>
<tr>
<td><b>Data:</b></td> <td>$data</td>
</tr>
<tr>
<td><b>Hora:</b></td><td>$hora</td>
</tr>
<tr>
<td><b>Número:</b></td> <td>$class</td>
</tr>
<tr>
<td colspan = \"2\"><b>Mensagem:</b><br><br>$mensagem</td>
</tr>
</table></div>";
}
else
{
print "<h2>Hello ;)</h2>";
}
?>
</div>
</body>
</html>
Apenas usuários registrados e ativados podem ver os links., Clique aqui para se cadastrar...
Senha: ar3ax
att, ar3ax
Comment