Ajax ve JQuery ile Yorum Sistemi yapma

İlk olarak her zamanki gibi head etiketlerinin arasına JQuery ve stil dosyamızı çağırıyoruz.

<link rel="stylesheet" type="text/css" href="yorum.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

Bundan sonraki işlemimizi de head etiketleri arasında yapacağız, değişkenleri tanımlayalım.

<script type="text/javascript">
$(function() {

$(".submit").click(function() {

var name = $("#name").val();
var email = $("#email").val();
var comment = $("#comment").val();
var post_id = $("#post_id").val();
var dataString = 'name='+ name + '&email=' + email + '&comment=' + comment + '&post_id=' + post_id;

if(name=='' || email=='' || comment=='')
{
alert('Lütfen tüm alanları doldurun..');
}
else
{
$("#flash").show();
$("#flash").fadeIn(400).html('<img src="ajax-loader.gif" align="absmiddle">&nbsp;<span>Loading Comment...</span>');
$.ajax({
type: "POST",
url: "ajaxyorum.php",
data: dataString,
cache: false,
success: function(html){

$("ol#update").append(html);
$("ol#update li:last").fadeIn("slow");
document.getElementById('email').value='';
document.getElementById('name').value='';
document.getElementById('comment').value='';
$("#name").focus();

$("#flash").hide();

}
});
}
return false;
});

});
</script>

Geldik form ve gösterim kısmımıza, head etiketini kapattık. Benim kullandığım betiği kullanıp düzenleme yapabilirsiniz bu kısım için..

<ol id="update">

<li>
<img src="http://www.gravatar.com/avatar.php?gravatar_id=<?php echo $image; ?>">
<span> <?php echo $name; ?></span> <br />
Yorumum</li>
</ol>
<div id="flash" align="left" ></div>
<br /><br /><br />
<div style="margin-left:100px">
<form action="#" method="post">
<input type="text" name="title" id="name"/><span class="titles">İsim</span><span class="star">*</span><br />

<input type="text" name="email" id="email"/><span class="titles">E-Posta</span><span class="star">*</span><br />

<textarea name="comment" id="comment"></textarea><br />

<input type="submit" value=" Gönder! " />
</form>
</div>

Şimdi post işlemi yapacağımız yorumajax.php dosyamızı oluşturalım..

<?php
if($_POST)
{
$name=$_POST['name'];
$email=$_POST['email'];
$comment_dis=$_POST['comment'];

$lowercase = strtolower($email);
$image = md5( $lowercase );

}

else { }

?>
<li>
<img src="http://www.gravatar.com/avatar.php?gravatar_id=<?php echo $image; ?>"/><span> <?php echo $name;?></span> <br /><br />

<?php echo $comment_dis; ?>
</li>

Bu kısımda formdan aldığımız verileri değişkenlere atadık ve sayfamızda gösterdik.. İşlemlerimiz sırasıyla bu kadar arkadaşlar, genel olarak neler yaptık bir inceleyelim..

• Stil ve JQuery dosyalarımızı sayfamıza dahil ettik.


• JQuery’de değişkenlerimizi tanımladık ve AJAX dahil ettik.


• Form’un boş gönderilmemesi için kontrollerimizi yaptık.


• HTML yapımızı oluşturduk.


• Yorumların post edildiği ajaxyorum.php dosyamızı yazdık.


• Yorum sistemimizde gravatar‘dan (kullanıcı resimleri için) yararlandık.

Eğer hepsini doğru olarak yaptıysak hiçbir sorun yok, sistemimiz çalışır durumda.