 |
Jquery AJAX, Mysql ve PHP ile yazılara sayfa yenilenmeden yorum
|
 |
#3853 |
|
Kaan
User is:
  Posts: 2772
Ülke:
 İstanbul - 34Meslek: Serbest Meslek
Age: 43
|
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. 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. Uyguluman?n ?al???r haline buradan bakabilirsiniz. 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: : ysql]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 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci ; 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 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci; 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. : tml]<!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: : tml] // 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: Kod: // 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 : s] $(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. |
Emlak, Oto Galeri, Rent A Car, ?iir, Edebiyat Script Sipari?lerinizi Verebilirsiniz. Detaylar ??in: kaan@ntka.org Seditio 170 ?ndir Capte M?zik ?ndir Seditio Toolbar ?ndir |
 |
 |
