Super Sistema De Comentários AJAX Com Suporte Gravatar
Veja aqui uma DEMO deste sistema de comentários em AJAX.
Um sistema de comentários é uma necessidade básica para qualquer site que precise de dar liberdade aos visitantes e usuários de escreverem o que pensam e sentem sobre o site.
Você poderá encontrar muitos sistemas de comentários já prontos a usar, mas é difícil encontrar exactamente o que precisamos.
O sistema de comentários que apresento é simples ao nível do código, mas é um sistema de comentários avançado em AJAX, criado com jQuery e PHP.
Uma funcionalidade fantástica que adicionei ao sistema de comentários é o suporte para Gravatar.
Se você tem conta no Gravatar e submeter um comentário na nossa demo, o seu Avatar irá aparecer.
Por defeito, irá aparecer uma imagem azul.
Vamos então à explicação do código sobre este sistema de comentários:
Estrutura Da Base De Dados MySQL
CREATE TABLE IF NOT EXISTS `comments` (
`c_id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(100) NOT NULL,
`email` varchar(100) NOT NULL,
`url` varchar(200) NOT NULL,
`date_created` datetime NOT NULL,
`comment` text NOT NULL,
`post_id` int(11) NOT NULL,
PRIMARY KEY (`c_id`)
)
Você apenas precisa duma tabela para guardar os comentários. Quero apenas mencionar uma coisa a respeito do post_id. Trata-se do ID dos comentários que vão sendo adicionados. Incialmente, coloquei id=1. Você poderá alterar este valor conforme o número de comentários já existentes.
Código jQuery
Este código irá altera a cor dos campos do formulário para amarelo, caso haja uma submissão com o campo do NOME vazio, dado que é necessário preencher o campo do NOME.
$(‘#Send’).click(function() {
// name validation
var nameVal = $(“#name”).val();
if(nameVal == ”)
{
$(“#name”).css(“background-color”, ‘#FFFFCC’);
return false
}
else
{
$(“#name”).css(“background-color”, ”);
}
Também criei uma expressão regex para validar o input do email. Se não for validado, irá também alterar a cor do campo do email para amarelo.
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
var emailaddressVal = $(“#email”).val();
if(emailaddressVal == ”)
{
$(“#email”).css(“background-color”, ‘#FFFFCC’);
return false;
}
else if(!emailReg.test(emailaddressVal))
{
$(“#email”).css(“background-color”, ‘#FFFFCC’);
return false;
}
else
{
$(“#email”).css(“background-color”, ”);
}
Código para validar o URL do website:
var urlVal= $(“#url”).val();
if(urlVal != ”)
{
if(!isUrl(urlVal))
{
$(“#url”).css(“background-color”, ‘#FFFFCC’);
return false;
}
else
{
$(“#url”).css(“background-color”, ”);
}
}
Portanto, se todas as verificações forem validadas, o próximo passo é submeter os comentários para post.php. #MYFORM é o form ID e vamos enviar os valores do formulário através da função jQuery Serialize.
Esta função submete todos os valores do fomrulário para o ficheiro da action em vez de enviar cada valor um a um.
Depois de submeter o comentário, vamos buscar o último comentário inserido e adicioná-lo ao sistema de comentários usando a função do jQuery append().
$.post(“posts.php?”+$(“#MYFORM”).serialize(), {
}, function(response){
$(“#loader”).hide();
$(“#after_submit”).html(”);
$(“#div-comments”).append(response);
$(“#Send”).after(‘<label id=”after_submit”>Your comment has been submitted.</label>’);
clear_form();
});
Esta função é para validar o URL:
function isUrl(s) {
var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/
return regexp.test(s);
}
Depois de submeter o comentário, vamos limpar os campos do formulário:
{
$(“#name”).val(”);
$(“#email”).val(”);
$(“#url”).val(”);
$(“#message”).val(”);
}
Este é o código HTML do formulário:
<form action=”#” name=”MYFORM” id=”MYFORM”>
<label>Name</label>
<label>Email</label>
<label>URL</label>
<br clear=”all” />
<input name=”name” size=”30″ type=”text” id=”name”>
<input name=”email” size=”30″ type=”text” id=”email”>
<input name=”url” size=”30″ type=”text” id=”url”>
<br clear=”all” /><br clear=”all” />
<label>Comment</label>
<br clear=”all” />
<textarea id=”message” name=”message”></textarea>
<br clear=”all” /><br clear=”all” />
<input type=”hidden” name=”post_id” id=”post_id” value=”1″>
<input value=”Add Comment” type=”submit” id=”Send”>
</form>
O ficheiro post.php vai inserir o comentário na base de dados e buscar o último comentário para que seja adicionar ao sistema de comentários como último comentário.
Usei clickable_link() para buscar os links do texto do comentário e para que seja possível clicar nesses links.
<?php
function clickable_link($text = ”)
{
$text = preg_replace(‘#(script|about|applet|activex|chrome):#is’, “\\1:”, $text);
$ret = ‘ ‘ . $text;
$ret = preg_replace(“#(^|[\n ])([\w]+?://[\w\#$%&~/.\-;:=,?@\[\]+]*)#is”, “\\1<a href=\”\\2\” target=\”_blank\” rel=\”no_follow\”>\\2</a>”, $ret);
$ret = preg_replace(“#(^|[\n ])((www|ftp)\.[\w\#$%&~/.\-;:=,?@\[\]+]*)#is”, “\\1<a href=\”http://\\2\” target=\”_blank\”>\\2</a>”, $ret);
$ret = preg_replace(“#(^|[\n ])([a-z0-9&\-_.]+?)@([\w\-]+\.([\w\-\.]+\.)*[\w]+)#i”, “\\1<a href=\”mailto:\\2@\\3\”>\\2@\\3</a>”, $ret);
$ret = substr($ret, 1);
return $ret;
}?>
Depois de gravar o comentário na base de dados e de verificar qual foi o último comentário adicionado à base de dados, vamos usar este código para adicionar esse último comentário ao sistema de comentários:
<?php
while ($row = mysql_fetch_array($result))
{?>
<div>
<?php
$strEmail = ”;
$gravtar_url = ”;
$strEmail = $row['email'];
$gravtar_url = GetGravatarURL($strEmail,100);
echo ‘<img width=”80″ height=”80″ src=”‘.$gravtar_url.’” alt=”">’;?>
<div>
<?php
if($row['url']){?>
<a rel=”external nofollow” href=”<?php echo $row['url'];?>” target=”blank”><b><?php echo $row['name'];?></b></a>
<?php
}
else
{
echo ‘<b>’.$row['name'].’</b>’;
}?> says:
<div>
<?php echo $row['date_created'];?>
</div>
<p><?php echo $row['comment'];?></p>
</div>
<br clear=”all” />
</div>
<?php
}?>
Portanto, aqui está um sistema de comentários sofistifado com suporte para Gravatar. Espero que gostem. Por favor, comentem sobre o tutorial. Façam o download dos ficheiros do código e usem este script fantástico!
Download do código usado neste tutorial: Super Sistema De Comentários AJAX Com Suporte Gravatar
Legal!
Sweet, Obrigado
Ola Gente qeria saber se isso serve pra blogspot ?
Olá, fiz todos os passos, porém não consegui enviar da página http os comentários.
Resumindo, eu só consigo add os comentários dentro do próprio banco, porém na página http quando clico em enviar, fica carregando e não envia.
O que você acha que está acontecendo?
para melhor entender o meu questionamento visite: http://diegodutra.com/comentar
Abraços
Diego Dutra
Bom eu estava fazendo o passo a passo cheguei no final estava tudo certo exceto por uma coisa ele não está reconhecendo site e ele da esse erro de php
Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in C:xampphtdocscoposts.php on line 109
Bom o sitema é bem legal, muito bom mesmo, mas tem um defeito nele, ou melhor poderia ser melhor. Consegui fazer todinho, coloquei ele em duas paginas diferente, daí veio a supreza, como é o mesmo banco de dados, os mesmo cmoentarios postados num pagina, automaticamente aparecem na outra pagina, ou seja o sistema deixa de ser util, pois repete os mesmos comentarios nas paginas que ele for colocado. Há não que queiram criar um banco de dados sempre que forem atualizar o site.
Gostaria que o amigo ajudasse a resolver isso, colocando no código um script que evita esse probleminha…
no resto ta beleza
Fala compadre!!!
Tenho uma solução para isso ….
O que você pode fazer, é criar um campo dentro do seu banco de dados, e colocar como "post_controle" … valor INT e 111 de tamanho …. não é a melhor maneira de se trabalhar mas resolve o seu problema!
Em cada página que você for inserir os seus campos para comentário, no botão SUBMIT, vc vai colocar um input type hidden e vai colocar um valor. Por exemplo, o numeral 1 para sua primeira página de comentário.
Irá, consequentemente, inserir o número 2 para a próxima página, e vai salvando esses dados de acordo com a postagem. Por exemplo, chegará uma hora que você terá 5 comentários relacionados ao número 1 e 8 relacionados ao número 2.
Feito isso, você, na hora de apresentar os comentários na página que colocou o "post_controle" igual ao numeral 1 , vai dar na instrução SQL que você quer chamar todos os comentários onde o post_controle é igual a 1!!!!
Dessa maneira, só serão exibidos os comentários onde houver o número 1 no post_controle dentro do seu banco, não necessitando, dessa maneira, criar um banco a cada notícia que se fizer necessários os comentários!
Se ficou complicado, talvez, e com permissão do moderador dessa página, eu tenho uma sequência de 3 vídeo-aulas onde ensino a montar esse tipo de sistema.
Não tão legal quanto o aqui postado, mas com algumas diferenças que podem ajudar!
http://www.andrebuzzo.com.br/sistema-de-comentari…
Abraços e valeu! Achei interessante o tutorial!!
Ola Andre Buzzo , eu Tentei usar seu codigo , até consegui usar a parte de separar as paginas , no meu caso os POSTS todos eles tem id diferente ai funcionou cadastrou tudo o PROBLEMA meu é diferentes eu faço tudo fucniona lindo! porém somente no primeiro post da pagina, pois a chamada do codigo jquery seu é por id e meus posts estão CHAMADOS dentro de um While mysql_fetch_array ai o segundo item da pagina ja nao funciona mais ele envia o formulario com REFRESH na pagina saberia me ajudar a resolver isso? meu email é internetcomerce@yahoo.com.br caso possa me ajudar ficarei grato
Legal. Consegui fazer de boa, porem, na hora que eu posto meu comentario para testar, ele aparece tudo nome data etc, mas o comentario fica com o numero 0 , e nao com o que eu escrevi.
oque eu faço?
Grato
gui_ilario@hotmail.com
Como colocar quebra de pagina no texto?
so faltou a paginação para evitar que se tenha muitos comentario na mesma pagina e demorando no carregamento
como faço para nao repetir nas outras pagina tuturial muito bom
Que nada mew vcs nao perceberão o pior erro que podia ter o script não valida o Comentário mto noob
Olá Guilherme! O objetivo do tutorial não é oferecer um sistema completo e já desenvolvido de comentários. Um Abraço noob! Rui Soares
amigo isso é facil é so vc colocar esse codigo aqui olha:
//mesagem validade
var messageVal = $("#message").val();
if(messageVal == '')
{
$("#message").css("background-color", '#FFFFCC');
return false
}
else
{
$("#message").css("background-color", '');
}
pode colocar emcima do "url validate"
ola boa tarde,gostaria de saber como separar o form do comentario?
muito bom mesmo mais tenho uma duvida: porque a data não esta diacordo com a do meu pc e nem a hora?
e tem como colocar éla tipo assim 02/03/2012 as: 21:10hrs?
espero que vc me ajude….
obrigado
Muito bom esse sistema de comentários!
valeu mesmo webmaster.pt muito bom
eu fiz deu certo mas somente no primeiro registro chamei os dados do banco por mysql_fetch_array() dai como o codigo e todo em jquery chamando por ID no segundo registro da tela ja nao funciona mais porque ele envia nao da o Return FALSE alguem sabe solucionar isso? gostei muito do codigo porem se nao resolver isso nao vai servir
Muito obrigado WebMaster, seria possível, nesse mesmo sistema, integrar uns botões de like e unlike? poderia mostrar como fazer?