Temmuz 15

AJAX Puanlama Uygulaması

AJAX & JavaScript & DOM & Php fonemi

Merhabalar,

Öncelikle kendimi tanıtayım. Ben Gökhan ÖZTÜRK ama genelde "fonemi" olarak tanınırım. Bir süre önce haberdar olduğum ve takip etmeye başladığım Ajax Türkiye sitesi Ajax-Tr.Com’a konuk yazar olarak yazmanın benim için bir kıvanç kaynağı olduğunu belirtmek isterim. Ajax hakkında benim ve bu işle ilgilenen herkesin birçok şey öğrenmesine vesile oldukları için sitede emeği geçenlere teşekkürü borç biliyorum.

Bu yazımızda işleyeceğimiz ve örnek uygulamasını vereceğimiz konu, AJAX Ne Gibi Durumlarda Kullanılmalı adlı yazıda da bahsedilen, bir yazıya puan verme konusu. Tabii bu konu, mantığı kavranması çok zor bir konu değil belki ama, AJAX ile yapılabilecekleri gösteren ve aynı zamanda bunların nasıl yapılacağı hakkında pekiştirici bilgiler içeren bir örnek uygulama niteliğinde.

Kısa Bilgi

Ajax-Tr sitesinde yazıların her birinin altında görebileceğiniz, yazıyı puanlama mekanizmasının benzerini kendi sitenizdeki; yazılar, makaleler, haberler gibi her türlü metin içerikli bölüme uygulamak istiyorsanız AJAX sizin için çok iyi bir çözümdür. Bu yazıda elimden geldiğince bu mekanizmanın AJAX ile nasıl yapılabileceğini göstereceğim. Bunu yaparken de prototype.js’nin hazır AJAX fonksiyonlarından faydalanacağım. Tabii siz isterseniz aynı uygulamayı kendi kütüphanenizi, eyceks kütüphanesini ya da bir başka kütüphaneyi kullanarak yazabilirsiniz.

Dosyalar

Bu kadar giriş taksiminden sonra isterseniz başlayalım. İlk olarak betiğimizde kullanacağımız dosya/dizin yapısını ve neler yapacağımızı görelim. Ana dizin içeriğini Resim 1’de ve resimler klasörünün içeriğini Resim 2’de görebilirsiniz.

oylama-resim1.jpg
Resim 1
oylama-resim2.jpg
Resim 2

Ana dizinde yer alan dosyalardan index.php, ana sayfamız oluyor. Temel işlemlerimiz bu sayfada olacak. Prototype.js, AJAX fonksiyonları ve başkaca yararlı fonksiyonları içeren JavaScript kütüphanemiz. Baglan.php, veritabanımız ile bağlantıyı sağlayan dosyamız. Oyver.php, kullanıcı oy verdiği zaman bunu veritabanına kaydeden dosya. Oyal.php ise ilgili yazının aldığı oyların durumunu ekranda görüntüleyen dosya. Resimler klasöründe de kullanacağımız ya da kullanmayacağımız bazı renkte yıldız resimleri bulunuyor. Yazının sonundaki bağlantılar aracılığıyla bu resimleri indirdiğinizde kendi uygulamalarınız için istediğiniz rengi kullanabilme şansına sahip olacaksınız.

Neler Yapacağız ?

• Öncelikle ana sayfamız olan index.php dosyasının genel şablonunu oluşturacağız. Bu sayfaya çok temel düzeyde bir makale sistemi koyacağız. Bu, örnek bir uygulama olduğundan ve göstermek istediğim asıl şey puanlama mekanizması olduğundan, diğer unsurlara pek önem vermiyorum. Bu yüzden çok basitçe yazdım. Siz kendi uygulamalarınızda geliştirebilirsiniz.

• Oyal.php adlı dosyamızı yazacağız. Bu dosya veritabanındaki puanların ana sayfamızda görüntülenmesini sağlıyor.

• Oyver.php adlı dosyamızı yazacağız. Bu dosya da kullanıcı oy verdiğinde puanların veritabanına yazılmasını sağlıyor.

• Son olarak index.php adlı ana sayfamıza dönerek Ajax ile ilgili kısımları tamamlayacağız ve puan verme sistemimiz tamamlanmış olacak.

Siz de bu yazıyla birlikte bu sistemi kodlayacaksanız, öncelikle hazır olarak kopyalanması gereken dosyaları yazının sonunda bularak ana klasörünüze kopyalayın. Bunlar; resimler klasörü ve içindeki dosyalar, prototype.js dosyası ve baglan.php dosyasıdır. Baglan.php dosyasını kendi veritabanı bilgilerinize göre değiştirmelisiniz tabii. Bu arada veritabanımızda da yazilar ve puanlar isminde iki tablo bulunuyor. Bu tabloların yapısını aşağıdaki resimlerde bulabilirsiniz. Tablo yapısı ve örnek verilere ait SQL sorgularını da yazının sonunda bulabilirsiniz.

oylama-resim3.jpg
Resim 3 yazılar tablosu
oylama-resim4.jpg
Resim 4 puanlar tablosu

Ana Sayfa

index.php’nin genel yapısı aşağıdaki gibi olacak.

PLAIN TEXT
PHP:
  1. <?php
  2. include "baglan.php";
  3. ?>
  4. <html>
  5. <head>
  6. <title>Puan Verme Örneği</title>
  7. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
  8. <script type="text/javascript" src="prototype.js"></script>
  9. </head>
  10. <body>
  11. <?php
  12. if($_GET['id']) {
  13. $sql = "SELECT * FROM yazilar WHERE id = '" . $_GET['id'] . "'";
  14. $sorgu = mysql_query($sql);
  15. $sonuc = mysql_result($sorgu, 0, "metin");
  16. echo "<p>" . $sonuc . "</p>";
  17. ?>
  18. <div id="oylama"></div>
  19. <?php
  20. } else {
  21. $sql = "SELECT * FROM yazilar ORDER BY id DESC";
  22. $sorgu = mysql_query($sql);
  23. while($sonuc = mysql_fetch_array($sorgu)) {
  24.     echo "<a href=\"index.php?id=" . $sonuc['id'] . "\">";
  25. echo $sonuc['baslik'] . "</a><br />";
  26. }
  27. }
  28. ?>
  29. </body>
  30. </html>

Şablon kodumuzda açıklayacak pek birşey yok aslında. Sayfamızda veritabanı işlemleri yapacağımız için baglan.php dosyasını en başta include ediyoruz. Ayrıca prototype.js dosyamızı da sayfamıza dahil etmeyi unutmuyoruz. Daha sonra eğer $_GET[‘id’] diye bir değişken yoksa mevcut tüm yazıları listeleyen, bunların herhangi birine tıklayınca da $_GET[‘id’] değişkeni oluşacağı için ilgili yazıyı gösteren kodu yazıyoruz. Alta da puanın gösterileceği oylama div’ini yerleştiriyoruz.

Sayfalar: 1 2

Toplamda 10148 kez okunmuş.
Şu an 1 kişi okuyor.
En fazla 6 kişi aynı anda okumuş.
Bugün 9 kez okunmuş.

Etiketler: , , , , , , 

1 oy2 oy3 oy4 oy5 oy (132 oy, ortalama 4.4) Oylanıyor ... Oylanıyor ...

  1. PHP ve Yerleşik DOM Sınıfları
  2. Javascript Sanal Klavye Yapalım
  3. Ajax Olmasaydı Ne Yapardık ? :)

Trackback Yorumları takip et Baskı Önizleme

24 yorum var

  1. # yakuter | 15 Temmuz 2007, 17:55 Gravatar

    Çok teşekkür ederim Gökhan bu mükemmel makale için. Paylaşmayı bir şeyler öğretmeyi seven kişi sayısı arttıkça daha da faydalı bir site ortaya koyabileceğimize inanıyorum.

  2. # grkn | 15 Temmuz 2007, 19:36 Gravatar

    Gerçekten çok yararlı bir makale fonemi :) Eline sağlık

  3. # University Update - AJAX - AJAX Puanlama Uygulamasi | 15 Temmuz 2007, 22:42 Gravatar

    […] YouTube Link to Article ajax AJAX Puanlama Uygulamasi » Posted at ajax-tr.com | Türkçe AJAX Kaynagi on Sunday, July 15, 2007 AJAX Puanlama Uygulamasi AJAX &amp; JavaScript &amp; Dom &amp; Php fonemi Merhabalar, Öncelikle kendimi tanitayim … etmeye basladigim Ajax Türkiye sitesi Ajax-Tr.Com’a konuk yazar olarak yazmanin benim için bir kivanç kaynagi oldugunu belirtmek isterim. Ajax hakkinda benim ve bu isle ilgilenen herkesin birçok sey View Entire Article » […]

  4. # Nous | 15 Temmuz 2007, 23:42 Gravatar

    çok teşekkürler hocam.. yararlı bir makale olmuş..

  5. # edves | 16 Temmuz 2007, 15:07 Gravatar

    cok guzel acıklayıcı bır makale olmus ellerine saglık. devamını beklıyoruz

  6. # önder | 16 Temmuz 2007, 18:48 Gravatar

    bunu asp ile nasıl yapılabileceğini de anlatsanız çok güzel olacak o zaman

  7. # yakuter | 16 Temmuz 2007, 21:04 Gravatar

    ASP kodlamayı biliyorsan sorun yok. Yukarıdaki uygulamada PHP ile yaptığımız şeyleri (veritabanından veri okumak gibi…) ASP ile yaparsın ve uygulama ASP ile yapılmış olur. Javascript, html ve AJAX uygulamalarında ASP ile PHP arasında fark yok. Fakat şu var ki eğer ASP programlama konusunda bilginiz yoksa öncelikle o konuda çalışmanızı tavsiye ederim.

  8. # salih | 22 Temmuz 2007, 22:21 Gravatar

    Bence Çok güzel Bi çalışma Olmuş Emeğinize sağlık

  9. # Slyther | 23 Temmuz 2007, 00:22 Gravatar

    size bi asp ci lazım

  10. # yakuter | 23 Temmuz 2007, 00:25 Gravatar

    #Slyther, makale yazıp da konuk yazar olarak sitemizde yazmak isteyen kimseyi geri çevirmedik. Eğer bu sitedeki formatta yazmayı düşünürsen bekleriz ;)

  11. # Slyther | 23 Temmuz 2007, 06:14 Gravatar

    tabi ASP konusunda bende insanları aydınlatmak isterim. php örneklerin yanı sıra ASP’de olmalı herkes php kullanmıyor değil mi : ) e-posta adresim sizde var, bilgi verirseniz yardımcı olmak isterim.

  12. # salih | 02 Ağustos 2007, 04:13 Gravatar

    Emeğinize Sağlık fakat

    yazınca firefox ve internet explorerde gözüküyor oylama fakat operada görünmüyor bunu nasıl fixleriz Şimdiden teşekkürler

  13. # fonemi | 13 Ağustos 2007, 22:17 Gravatar

    Pardon bir süre yoktum cevap veremedim o yüzden. Opera ile test sayfasını açtım ama bir sorun göremedim. Acaba kodun bir kısmını yazarken hata mı yaptınız ?

  14. # salih | 15 Ağustos 2007, 16:05 Gravatar

    http://62.68.207.82/~makalec/diyet/ton-balikli-diyeti-denediniz-mi.html

    Misal Burada

  15. # hgirua | 17 Ağustos 2007, 23:11 Gravatar

    inanılmaz güzel bir makale ajax karşı büyük bir ilgim var bu benim çok işime yarayacak çok teşekkürşer üstad emeğine sağlık…

  16. # levent | 25 Ağustos 2007, 01:35 Gravatar

    puanlama uygluamasını asp ile nasıl yapabiliriz bunu sitemde kullanmak istiyorum fakat php olduğu için kullanamıyorum

  17. # Fubace | 01 Eylül 2007, 00:45 Gravatar

    $id = $_POST[’id’];
    $veren = $_POST[’veren’];
    $puan = $_POST[’puan’];
    $puan = @round($puan);
    $veren = getenv(”REMOTE_ADDR”);

    kafama bi yer takıldı.
    oyver.php de $veren değişkenine önce posttan geleni atıyorsunuz.daha sonra da remote_addr global değişkenini atıyorsunuz.madem remote_addr kullanıcaksınız neden yukarısında posttan gelen veriyi alıyorsunuz.

  18. # Taygun Kocabıyık | 01 Eylül 2007, 23:13 Gravatar

    Merhabalar
    Bu makaleyi yazan ve bizlerle paylaşan Gökhan Öztürk’e öncelikle teşekkürlerimi sunmak istiyorum.
    Gerçekten faydalı ve açık anlatılmış bir yazı. PHP bilmememe rağmen sadece yazıları okuyarak ASP olarak kendime uyarlayabildim. Eğer yayınlarsanız döküman haline getirip yollamaktan büyük zevk duyucam. Ayrıca müsadeniz olur ise kaynak belirterek ASP versiyonunu diğer sitelerdede paylaşmak istiyorum. ASP ile ajax kullanımı nedense çok az ve neredeyse hiç örnek yok.
    Tekrar teşekkürler
    Saygılar

  19. # fonemi | 02 Eylül 2007, 12:39 Gravatar

    @salih : Dediğin problemi inceliyorum en kısa zamanda sana dönerim. Yalnız örnek uygulamanın Opera’da sorun çıkarmayıp senin uygulamanın çıkarması ilginç tabii.

    @Fubace : Kodu yazarken önce IP adresinin bir önceki sayfadan gelmesine karar vermiştim ancak aktarımda bir problem oldu. O yüzden IP adresini o sayfada almaya karar verdim. Önceki kodu orada unutmuşum.

  20. # Murat Karabük | 28 Eylül 2007, 22:11 Gravatar

    Merhabalar ; bende bu script’i inceledim.Gayette güzel ellerine sağlık yanlız kafama bişey takıldı.Mesela en cok oy alanlar bölümü yapmak istesek?? :)

  21. # Harmankaya | 21 Ekim 2007, 19:55 Gravatar

    Demo sayfa hata veriyor. Düzenlerseniz sevinirim. ;)

  22. # turgay | 01 Haziran 2008, 17:48 Gravatar

    öncelikle cok teşekkürler cok güzel anlatmışsın

    ancak bu konularda cok cok yeni olan benim gibi arkadaşlar vardır eminim..

    1-)öncelikli sorum indirdiğimiz dosyaları ftpden bi klasör oluşturup içinemi atıcaz.

    2-) Bu oy verme yıldızlarının görünmesi için ne yazmamız gerekecek mesela resim yolu yazılır hani bunu nasıl yazacaz

    kusura bakmayın cok acemiyim ama bu sistemi kurabilmeyi cok istiyorum yardımcı olursanız cok sevinirim

  23. # alim omer abul | 03 Haziran 2008, 20:32 Gravatar

    Ya test et linkii calısmıor localhost ta denedim cok guzel calısıyor… bunu css ile yıldızın uzerıne mouse geldıgınde mesela sarı yıldızın uzerıne geldıgınde a:hoverin mavi yıldız olmasını ıstıyorum.. görsellik olarak. o konu hakkındada biraz bilgi verebilirmisin..

  24. # hüsrev | 20 Ağustos 2008, 08:49 Gravatar

    bu kullanmak hatta ASPye uyarlamak iSterdim ama teSt adreSi çalışmıyor opera firofox ve ie de denedim mysql hatası veriyor tekrar bakar mısınız lütfen?

Yorum yazın

sayfa sayacı