Jquery AJAX, Mysql ve PHP ile yazılara sayfa yenilenmeden yorum eklemek

PHP , Jquery ve Mysql veritabanı ile biraz deneyiminiz varsa bu uygulamayı yapmakta zorlanacağınızı sanmıyorum. Her hangi bir sayfaya yorum eklerken sayfanın yenilenmesinden rahatsız olanlar için yazdığım bu yazıda önce Mysql veritabanında gerekli tabloları oluşturacağız ('yorumlar' ve 'yazılar' tablosu) ikinci adımda PHP ile veritabanından yazıyı, var olan yorumlarını okuyacağız ve yorum ekleme formu hazırlayıp istemciye bunu göndereceğiz. Son adımda ise Jquery ile yorum eklerken ayrıca oluşturacağımız PHP sayfasına yeni yorumu Jquery $.ajax() fonksiyonu ile yollacayacağız. Uygulamada ilişkisel veritabanı mantığını kullanacağız.

Uygulumanın çalışır haline buradan bakabilirsiniz.

Uygulamayı üç adıma ayırarak kolaylaştırmaya çalıştım. Adımlar:
  • 1. Mysql veritabanına yazilar ve yorumlar isminde ilişkisel iki tablo oluşturma. Sonra PHPmyAdmin sayfasından direk olarak bu tablolara örnek bir kaç veri girme.
  • 2. Boş bir php sayfası oluşturacağız. Bu sayfada hem Jquery hem de php kodumuz olacak. PHP ile bir adet yazı ve varsa yorumları veritabanından okuma işlemini yapacağız. Kullanıcının yorum ekleyebilmesi için yine PHP ile yorum ekleme formu oluşturacağız.
  • 3. Son adımda daha önce oluşturduğumuz PHP sayfasına Jquery $.ajax() fonksiyonu ile asenkron olarak yeni yorum ekleyeceğimiz Jquery kodumuzu yazacağız.
Uygulama biraz uzun olduğu için veritabanı oluşturma, yazıları ve yorumları okuma kısmını atlamak istiyorsanız direk 3. adıma geçmenizi öneririm.

1. adım: (Mysql veritabanı dizaynı)

İlişkisel veritabanı modeli kullanacağımız için tablonun alanlarını buna göre dizayn edeceğiz. İlişkisel veritabanı nedir bilmiyorsanız ilgili yazımı buradan okuyabilirsiniz.

Mysql veritabanında yazılarımızı içerek 'yazilar' ve yazılara ait yorumları içerecek 'yorumlar' tablosunu oluşturalım. Tabloları PhpMyAdmin sayfasından yaratmak daha kolay olacağı için http://localhost/phpmyadmin/ adresinden veritabanı işlemlerini gerçekleştirdim.

'yazilar' ve 'yorumlar' tablosunu oluşturacak SQL kodumuz: 
 
  
  CREATE TABLE IF NOT EXISTS yazilar (
  id int(11) NOT NULL AUTO_INCREMENT,
  baslik varchar(50) CHARACTER SET utf8 COLLATE utf8_bin NOT NULL,
  text text CHARACTER SET utf8 COLLATE utf8_bin NOT NULL,
  tarih date NOT NULL,
  PRIMARY KEY (id)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 ;

CREATE TABLE IF NOT EXISTS yorumlar (
  id int(11) NOT NULL AUTO_INCREMENT,
  yorumcu_adi varchar(25) CHARACTER SET utf8 COLLATE utf8_bin NOT NULL,
  yorumcu_site varchar(60) CHARACTER SET utf8 COLLATE utf8_bin NOT NULL,
  yorumcu_yorum varchar(300) CHARACTER SET utf8 COLLATE utf8_bin NOT NULL,
  tarih date NOT NULL,
  yazi_id int(11) NOT NULL,
  PRIMARY KEY (id),
  KEY yazi_id (yazi_id)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1;
Tablolar hakkından biraz açıklama yapmak gerekirse 'yazilar' tablosu yazının başlığı, içeriği, tarihi gibi veriler içerecek. 'yorumlar' tablosu da yazılara yapılmış tüm yorumları içerecek. Hangi yorumun hangi yazıya ait olduğunu 'yorumlar' tablosunun `yazi_id` alanından anlayacağız. Yorum eklerken kullanıcı adını, sitesini ve yorumunu girebilecek. Diğer alanları otomatik olarak birazdan yazacağımız PHP scriptimizde gireceğiz.

Bir kaç örnek veri girip bir sonraki adıma geçelim. Eğer bununla uğraşmak istemiyorsanız buradan hazırladığım SQL kodunu buradan indirip import ederek örnek verilerle birlikte Mysql veritabanını hazır hale getirebilirsiniz.

2. adım : (PHP ile veritabanından yazıyı, yorumları okumak ve yorum ekleme formu hazılamak)

htdocs (www_root) klasörüne boş bir PHP sayfası oluşturup (adı yazi.php olsun) içine aşağıdaki başlangıç kodumuzu ekleyelim. 
<!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=utf-8" />
        
    <title>Ajax, Jquery ve PHP ile yorum ekleme örneği</title>
    
    <link href="menu.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>

    <script>
    // Buraya Jquery kodumuzu yazacağız
    </script>
    
 </head>
<body>

<?php
 // Buraya yazıyı, yorumları ve formu gösterecek PHP 
 // kodumuzu yazacağız.
?>

</body>
</html>
Stratejimiz şöyle olacak; Jquery kodumuzu yukarıdaki belirtilen yere, PHP komuzu da yine belirtilen yere yazacapız. Böylece bir sayfada hem html hem de php kodu olacak. Böyle bir kullanım MVC ya da template mantığında yok fakat çoğumuzun alışageldiği bir kullanım olduğu için böyle anlatmayı tercih ettim.

PHP kodumuzda veritabanına bağlanacağız ve sırayla yazıyı, yorumlarını ve yorum ekleme formunu PHP echo ile ekrana bastıracağız. Yukarıda belirttiğim yere ekleyeceğimiz PHP kodumuz: 
 
 // veritabanına bağlanma karakter setini ayarlama işlemirini
// ilk adımda hallediyoruz.
$conn=mysql_connect("localhost","root","");
mysql_select_db("test",$conn);
mysql_set_charset("utf8");
// id'si 1'e eşit olan yazıyla ilgileniyoruz bu örnekte.
$yazi_id=1;
// yazıyı veritabanından okuyoruz.
$sql="SELECT baslik, text, tarih FROM yazilar WHERE id=$yazi_id";
$result=mysql_query($sql,$conn);
// yazıyı bulduğunda echo ile yazının başlığını, yazıyı ve tarihini 
// ekrana echo ile bastırıyoruz.
if ( $row=mysql_fetch_assoc($result) )

{
	echo "<h2>".$row["baslik"]."</h2>";
	echo "<p> tarih: ".$row["tarih"]."</p>";
	echo "<p>".$row["text"]."</p>";
}

// id numarası 1'e eşit olan yazının yorumlarını getirecek
// SQL sorgusunu burada hazırlıyoruz.
$sql="SELECT yazilar.id, yorumlar.yorumcu_adi, 
	yorumlar.yorumcu_site, yorumlar.yorumcu_yorum,
	yorumlar.tarih, yorumlar.yazi_id
	FROM yazilar, yorumlar
	WHERE yazilar.id=yorumlar.yazi_id AND yazi_id=1";

// yazıya ait yorumları getirecek sorguyu çalıştırıyoruz	
$result=mysql_query($sql,$conn);

// Tüm yorumları id özniteliği 'yorumlar' olan
// div elamanına (katmanına) ekliyoruz.
echo "<div id='yorumlar'>";
echo "<b>Yorumlar :</b> ";

// while loop ile tüm yorumları veritabanından 
// satır satır okuyup yine echo ile ekrana bastırıyoruz.
while ( $row=mysql_fetch_assoc($result) )

{
	if ($row["yorumcu_site"]!="")
		echo "<br/><br/>
		Yazan: <a href='http://".$row["yorumcu_site"]."
		'title='site'>".$row["yorumcu_adi"]."</a>  
		Tarih: ".$row["tarih"];
	else
		echo "<br/><br/>Yazan: 
		<a href='#'title='site'>".$row["yorumcu_adi"]." </a> 
		Tarih: ".$row["tarih"];
		
	echo "<br/> ".$row["yorumcu_yorum"];
	
}
// eğer yorum yoksa kontrol edip 
// yorum yapılmadığını yazdırıyoruz.
if (mysql_num_rows($result)==0)
	echo "<br/><br/>Bu yazıya yorum yapılmamış.";
	
echo "</div>";

echo "<br/><br/>";
// Aşığıda echo ile yorum ekleme formunu
// kullanıcıya (ziyaretçiye) gösteriyoruz.
// Form elemanlarını düzenle olması amacıyla
// table'dan yararlanıyoruz.
echo "<table>";
echo "<form id='yorum_ekleme_formu'>";
echo "<tr>
	<td><input style='width:250px;' type='text' name='isim' /></td>
	<td>isim (zorunlu) </td>
	</tr>";
echo "<tr>
	<td><input style='width:250px;' type='text' name='site' /></td>
	<td>site</td>
	</tr>";
echo "<tr>
	<td><textarea style='width:250px;' cols='60' rows='4' name='yorum' ></textarea></td>
	<td valign='top' >yorum (zorunlu) </td>
	</tr>";
echo "<tr>
	<td><input id='yolla' type='button' value='yorumu yolla' /></td><td></td>
	</tr>";
echo "<input name='yazi_id' type='hidden' value='1' />";
echo "</form>";
echo "</table>";
2. adımı da bitirdikten sonra artık Jquery ile Ajax ile yorum ekleme kısmına geçebiliriz.

3. adım: (Jquery ile Ajax POST etme işlemi)

yazi.php sayfanın boş kalan kısmına yani Jquery kodumuzu ekleyeceğimiz kısma geçelim. Bu kısımda Jquery'nin $.ajax() fonksiyonu yardımıyla eklenen yorumu başka bir php sayfasına asenkron olarak POST edip yorumu veritabanına ekeleyeceğiz. Önce verileri POST edeceğimiz bir php sayfası oluşturalım (adı yorum_ekle.php olsun) ve aşağıdaki PHP kodumuzu oluşturduğumuz sayfaya ekleyip kaydedelim: 
 
 // veritabanına bağlanma işlemelri
$conn=mysql_connect("localhost","root","");
mysql_select_db("test",$conn);
mysql_set_charset("utf8");

// Jquery $.ajax() fonskiyonundan gelen veriler
// $_POST dizinde saklanıyor.
$isim = $_POST['isim'];
$site = $_POST['site'];
$yorum = $_POST['yorum'];
$yazi_id= $_POST['yazi_id'];

// Veritabanına yorumu ekleyecek sql kodumuzu hazırlıyoruz.
// Sql injectionlara karşı verileri filtreme kısmını
// size bırakıyorum. Bunun için regular expression'dan
// mesela  $isim=preg_replace("/[^a-zA-Z0-9 ]/i", "", $isim);
// gibi bir kullanım yapabilirsiniz.

$sql="INSERT INTO  yorumlar
(id, yorumcu_adi, yorumcu_site , yorumcu_yorum,  tarih, yazi_id)
VALUES ( 'NEW.id' , '".$isim."' , '".$site."' , '".$yorum."' , NOW() ,".$yazi_id.")";

// eğer soru sorunsuz çalışırsa 1
// çalışmazsa 0 sonucunu gönderiyoruz. 
if ($result=mysql_query($sql,$conn))
	echo "1";
else 
	echo "0";
Son olarak yazi.php sayfasının ilgili yerine ekleyeceğimiz Jquery kodumuzu da yazıp bitirelim: 
 
$(document).ready(function(){
	// yorum yollanınca çalışacak fonksiyon
	$("#yolla").click(function (){ 
		
	// Yerel saati javascript ile ay-gün-yıl 
	// formatında hazırlamak için Date nesnesinden
	// yararlanacağız.
	var zaman = new Date()
	var ay = zaman.getMonth() + 1
	var gun = zaman.getDate()
	var sene = zaman.getFullYear()
		
	// yorum ekleme formuna yazılanları serialize()
	// fonksiyonu ile verileri form değişkeninde tutuyoruz.
	var form = $("#yorum_ekleme_formu").serialize();   
    // burada Jquery ajax fonksiyonun kolaylığından
	// yararlanıp formu POST edioyuruz.
	// POST edeceğimiz verileri yorum_ekle.php
	// dosyasının adresini url'ye yazmayı unutmayalım.
	$.ajax({
		type: "POST",
		url: "yorum_ekle.php",
		data: form ,
		// Formu ajax ile doğru şekilde yollandığında
		// çağrılacak fonksiyonu yazıyoruz (success).
				
		success: function(cevap) {
		  // yorum_ekle.php dosyasından gelen ve yorum 
	      // eklendi anlamına gelen cevabın 1 olup olmadığını
		  // kontrol ediyoruz.
		  if (cevap=="1")
		  {
			// Site bilgisi girilirse farklı bir link
			// hazırlamamız gerek. Bu yüzden if ile
			// site bilgisi girilip girilmediğini
			// kontrol ediyoruz. Daha sonra yazan
			// değişkenine linkin html formatını giriyoruz.
			if ($("input[name='site']").val()!="")
			{
				var yazan= "<a href='http://"
					+$("input[name='site']").val()
					+"'title='site'>"+$("input[name='isim']").val()
					+"</a>";}
			else 
			{
				var yazan= "<a href='#'title='site'>"
					+$("input[name='isim']").val()
					+" </a>";}
						
				// yorumların bulunduğu ve id özniteliği
				// yorumlar olan div katmanını seçip
				// append ile yeni ekelenen yorumu en alta
				// ekleyoruz. append ederken tarih ve yorumu
				// gereken html formatında ekliyoruz.
				$("#yorumlar").append("<br/><br/>Yazan: "
					+yazan+" Tarih: "
					+ay + "-" 
					+ gun + "-" 
					+ sene +"<br/>"
					+ $("textarea[name='yorum']").val()
					); 
		  }
		// yorum_ekle.php'den gelen çıktı 1'den farklıysa
		// yorumun eklenmediğini yorumcuya bildiriyoruz.
		
		else
			alert("Bir sorundan dolayı yorumunuz eklenmedi !");
						
		},
		dataType: "html"
	    }); // $.ajax() fonksiyonun sonu

    });

});
Yazı ve yorumlara CSS ile biçim vererek daha renkli ve güzel hale getirebilirsiniz. Ayrıca girilen değerlerin geçerliliği (form doğrulama) gibi sunucu ve kullanıcı taraflı kontrolleri de ekleyerek uygulamayı daha kullanışlı hale getirebiliriz. Bu kısmı daha uzun olmaması amacıyla size bıraktım. Uygulamanın ait tüm dosyaları buradan indirebilirsiniz.
yazan Zülküf Küçüközer tarih   18th October 2009
primary key words  Php | Jquery | Ajax | Yorum ekleme okunma  33168
secondary key words  Asenkron | Veritabanı | Veritabanı dizayn | Mysql
writing coders writing 17th December 2009
geçeerken uğramıştım ama helal olsun güzel çalışma
writing zülküf küçüközer writing 25th December 2009
Teşekkür ederim..
writing ozturk writing 29th March 2010
teşekkürler...
writing erkan writing 11th April 2010
gördüğüm en güzel anlatım. lütfen yazmaya devam edin sizin gibi kaliteli iş çıkartan az. tebrikler.
writing demir writing 30th April 2010
Çok başarılı bir anlatım olmuş.. başarılarınız ve böylesine güzel yazılarınızın devamı olması dileğiyle... İyi çalışmalar.
writing zülküf küçüközer writing 30th April 2010
Tekrar teşşekürler..
writing travesti writing 22nd May 2010
acıklama için teşekkür ederim.birde bu durumun önetim panelinden nasıl yönlendirileceği konusunda bir makale yazarsan sevinirim
writing Gökhan writing 23rd June 2010
güzel çalışma ellrinize sağlık
writing fatih writing 2nd July 2010
bunu asp.nette yapamadım yardım edersenizsevinirim arkadaşlar
writing fatih sinan kara writing 11th July 2010
Emeğine sağlık hocam. Gerçekten çok işime yarayacak :)
writing Emre Can writing 2nd September 2010
çok güzel bir makale olmuş. teşekkürler.
writing Murat KÖKER writing 11th September 2010
süper bir makale olmuş teşekkürler.
writing indirfull writing 18th September 2010
Çok güzel bi uygulama demosunda gördüğüm kadarı ile yanlız bişi soracağım acaba bunun admin onayı varmı ??
writing zülküf küçüközer writing 19th September 2010
Merhaba, demo için onay mekanizması koymadım. Demoda yorumları veritabanına demo olduğu için kaydetmiyorum, sadece kaydediliyor gibi gösteriyorum.
writing djtutqu writing 23rd September 2010
harikasınız valla ya çok işime yarıcak
writing hakan writing 14th May 2011
merhaba, çok güzel örnek ama güvenlik kodu felan yok paso gönderiyor onu nasıl önleyelim.
writing Aylin Esen writing 19th July 2011
bilgi için tşkler.. güzel çalışma olmuş.
writing yasin aktimur writing 5th August 2011
selam bloğun tasarımını sen mi yaptın ? hangi okuldan mezunsun ? kaç yaşındasın ? öğrenebilirmiyim .
writing sayid writing 14th August 2011
gerçekten çok güzel teşekkürler
writing kral oyun writing 29th October 2011
Oldukça açıklayıcı bir çalışma olmuş. Emeğinize için teşekkürler...
writing Bekir writing 5th December 2011
Harika bir paylaşım, emeğine sağlık.
writing engin writing 19th December 2011
Evet çok yararlı oldu benim için
writing ahmet writing 14th January 2012
Eline sağlık. Çok saydası oldu.
writing ahmet writing 14th January 2012
Eline sağlık. Çok saydası oldu.
writing enes writing 12th May 2012
gayet basarılı tebrikler
writing Kemal writing 15th June 2012
Kardeş allah sevdiğine bağışlasın çok işime yaradı:)
writing Hakan Turgay writing 15th November 2012
Çok güzel bir anlatım. Tebrikler ve çalışmalarınızda başarılar dilerim.
writing vahit writing 30th January 2013
ama çekme işlemini veri tabanından yapmıyor onu yapıp yollarsan sevinirim
writing penom writing 14th February 2013
çalışmanız ve açıklamanız için teşekkür ederim. Çok güzel bir ders olmuş dosyaları sistemimde kullanmaktayım geliştirile bilirlik oranıda gayet güzel çalışmalarınızda başarılar dilerim
writing iskender writing 19th February 2013
Çok Güzel bir çalışma
writing emrah writing 26th February 2013
eline saglik ustad.
writing test edelim writing 6th March 2013
ilginç güzelmiş
writing rent a car istanbul writing 8th March 2013
Teşekkürler
writing emrah writing 5th May 2013
saol
writing isgsinavtarihleri writing 10th November 2013
Çok tesekkur ederim ögretici ve gelistirilmeye acik bir script olmus.
writing izmir rent a car writing 17th May 2014
gerçekden emek sarfedilmis çok tesekkürler güzel paylasim
writing Ferace Giyim writing 10th January 2015
Elinize saglik hocam güzel bilgilere yer vermissiniz.
writing izmir oto kiralama writing 13th February 2015
bana biraz fazla karisik geldi ama umarim çözebilirim tesekkürler
writing Nakliyat Gebze writing 15th April 2015
Tebrikler güzel yazi.
writing Otomaks Oto Kiralama writing 15th April 2015
Tebrikler emeginize saglik güzel çalisma.
writing Gebze Nakliyat writing 15th April 2015
Aktardiginiz bilgiler için tesekkürler. Iyi çalismalar.
writing Gebze Nakliyat writing 15th April 2015
Güzel fikir açikladiginiz için çok tesekkür ederim.
writing Gebze Nakliyat Firmalari writing 15th April 2015
Bilginiz için tesekkür ederim. Devamini bekliyoruz.
writing Cafe Sanat Haberleri writing 15th April 2015
Açiklamalariniz için tesekkür ederim.
writing Erkek Saatleri writing 15th April 2015
Gerçekten bilmeyen biri için güzel açiklama tesekkürler
writing Pirlanta Fiyatlari writing 15th April 2015
Sayenizde çok sevdik tesekkürler.
writing Mutfak Dolaplari writing 15th April 2015
Güzel bir yazi olmasindan kaynakli hala okuyoruz. Tesekkürler.
writing Stor Perde writing 15th April 2015
Yardimlariniz için çok tesekkür ederim. Iyi çalismalar.
writing Agir Nakliyat writing 15th April 2015
Aynen ben de katiliyorum güzel olmus gerçekten.
writing Böcek ilaçlama writing 15th April 2015
Gerçekten iyi yazi çok sagolun.
writing Kerem writing 2nd October 2015
Sitemdeki kodlamalari düzeltemiyorum, yardimci olacaklar iletisime geçebilir mi ?