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. 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. |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
May 2013 (1)
July 2010 (1)
April 2010 (4)
March 2010 (1)
February 2010 (3)
December 2009 (2)
November 2009 (1)
October 2009 (4)
September 2009 (16)
August 2009 (21)
July 2009 (4)
July 2010 (1)
April 2010 (4)
March 2010 (1)
February 2010 (3)
December 2009 (2)
November 2009 (1)
October 2009 (4)
September 2009 (16)
August 2009 (21)
July 2009 (4)
Jquery ile dinamik tab ..
NetBeans ortamında Jav ..
ASP.NET ile Google son ..
Jquery ve css ile hare ..
Online SMS Gateway ve ..
Mysql veritabanında St ..
PHP ile Regular Expres ..
ASP.NET ortamında Jque ..
ASP.NET ve Google Ajax ..
Jquery ve Seçiciler (J ..
NetBeans ortamında Jav ..
ASP.NET ile Google son ..
Jquery ve css ile hare ..
Online SMS Gateway ve ..
Mysql veritabanında St ..
PHP ile Regular Expres ..
ASP.NET ortamında Jque ..
ASP.NET ve Google Ajax ..
Jquery ve Seçiciler (J ..
Etiketler
| .net | Ajax | Asp.net | Cookie | Çerez | Çoklu-dosya | Dblinq | Domdocument | Iframe | Javascript | Jquery | Linq | Linq-to-mysql | Oturum | Php | Session | Sınıf | Site-haritası | Sitemap | Url | Veri | Xml |arama
Loading
sosyal




