Veja aqui uma DEMO deste sistema de comentários em AJAX [4].
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 [5] 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 [6]
