Sitelerin çoğunda görmeye başladığımız 5 yıldızlı oylama sistemleri web 2.0 nin vazgeçilmezleri arasında yerini aldı. Buna benzer oylamayı kullanan sitelerden örnek vermek gerecek olursak; Dailymotion, Vidivodo gibi video sitelerinin yanısıra diğer sitelerde de kullanılıyor.Sitenizin kullanıcılarınızla olan etkileşimini artırmak için kullanılan bu tür özellikleri sitemize nasıl entegre edebilceğimizi,database mimarisini ve scriptimizi anlatacağım.
Makale sonunda yapacağımız sistem aşağıdaki demo linkindeki gibi olacaktır.
Her ne kadar Ajax ile oylama sistemini anlatacak olsam da , bir site örneği üzerinden anlatarak, daha yararlı olacağını düşünüyorum. Dosyaları sayfanın altına doğru bulabilirsiniz. Sitemizin ise 4 adet bileşeni var: index.php (giriş) sayfası, makale detay sayfası, veritabanı ve oylama sisteminin entegre edilmesi.
Sitenin Yapısı:
Örnek sitemiz, 2 adet sayfadan oluşuyor.
1 – ) index.php: bu sayfa sitemizin giriş sayfası olup veritabanına eklediğimiz makaleleri, ekleme tarihine göre, son eklenen üstte olacak şekilde listelemekte. Makale başlıklarına tıklandığında ise makale detay sayfasına geçiş yapılmakta.
2 – ) makale.php : Bu sayfamız index.php de listelenen makalelerin id sine göre filtreleme yaparak(query string), ilgili makalenin veritabanındaki alanlarını çekmekte.
Bilgisayarınızda bulunması gereken araçlar:
- Gelişmiş Text Editörü (Dreamweaver, NotePad ++)
- Apache sunucusu (ben xampp ı kullanacağım)
1. ADIM – VERİTABANINI YAPILANDIRMA
Xampp’ ı bilgisayarınıza kurduktan sonra,xampp-control.exe yi çalıştırarak, Apache ve Mysql servislerini başlatın. Web browserınızı(Firefox,Internet Explorer, Chrome vb…) açarak, adres satırına http://127.0.0.1/phpmyadmin i girin.
- Karşımıza çıkan ekranda, yeni veritabanı oluşturmak için, ismini “5starrating” giriyoruz.
- Veritabanını oluşturduktan sonra, makale ve ratings isimli iki tablo oluşturacağız.
Makale Tablosu
Makale tablomuzda çok alan kullanmadım. En azından bu makalenin konusu değil. Şimdilik yapacağımız şu:
1 2 3 4 5 6 7 8 | CREATE TABLE IF NOT EXISTS `makale` ( `id` INT(11) NOT NULL AUTO_INCREMENT, `makale_baslik` VARCHAR(250) CHARACTER SET utf8 COLLATE utf8_turkish_ci NOT NULL, `makale_giris` longtext CHARACTER SET utf8 COLLATE utf8_turkish_ci NOT NULL, `makale_detay` longtext CHARACTER SET utf8 COLLATE utf8_turkish_ci NOT NULL, `tarih` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin5 AUTO_INCREMENT=1 ; |
Bu makale tablosunun yapısından biraz bahsedelim. Tabloda 5 adet sütun bulunmakta. Makale idsinin tutulacağı id alanı, makale başlığının tutulacağı makale_baslik alanı, makale girişinin bulunacağı(sadece index.php de gözükecek) makale_giris alanı, makale içeriğinin tamamının görüntülenebileceği makale_detay alanı , makalenin yazıldığı tarihin tutulacağı tarih alanı.
Bu alanları değerleri ise:
id –> int olacak, auto_increment ve primary key özellikleri
makale_baslik —> varchar 250 karakter, dil ailesiı ise utf8_turkish_ci
makale_giris —> longtext, dil ailesi utf8_turkish_ci
makale_detay —> longtext ve dil ailesi utf8_turkish_ci
tarih —> date değerinden, timestamp olacak, not null özelliği vererek, her yazılan makalede o anki zamanı almasını belirtiyoruz.
Not: Tasarladığım bu veritabanında makale_giris ile makale_detay alanları birbirinden farklıdır. Bu özelliği koyarak, makale girişini daha spesifik veya dikkat çeken bir ön yazı kullanabiliriz. makale_detay alanında ise yazı bütünlüğünü koruyacak şekilde içeriğimizi post edebiliriz.
Makale Tablosunun İçeriği
1 2 3 4 | INSERT INTO `makale` (`id`, `makale_baslik`, `makale_giris`, `makale_detay`, `tarih`) VALUES (693, 'Asp.Net 4.0 Uygulamalar&#305;nda URL Routing', '<p>Bu yaz&#305; <a href="http://www.emrekilinc.com" target="_blank">http://www.emrekilinc.com</a> adresinden al&#305;nm&#305;&#351;t&#305;r. </p><p><img src="img/emre-kilinc.png" width="200" height="200" />Merhaba arkada&#351;lar.Bu yaz&#305;mda Asp.Net MVC ile birlikte hayatlar&#305;m&#305;za giren Routing ''i Asp.Net 4.0 &nbsp;uygulamalar&#305;na nas&#305;l entegre edebilece&#287;imiz &uuml;zerinde duraca&#287;&#305;m.&#304;ki senaryomuz var.Birincisi QueryString almayan sayfalar bir di&#287;er ise QueryString alan sayfalar.&#304;lk senaryomuzu incelemeye ba&#351;layal&#305;m.Routing i&#351;lemlerini System.Web.Routing namespace i alt&#305;ndan yapaca&#287;&#305;z.QueryString almayan bir sayfa i&ccedil;in tek yapmam&#305;z gereken global.asax ''a a&#351;a&#287;&#305;daki kodu eklemek ve routing webforms &uuml;zerinde &ccedil;al&#305;&#351;acakt&#305;r. </p>', '<p>Bu yaz&#305; <a href="http://www.emrekilinc.com" target="_blank">http://www.emrekilinc.com</a> adresinden al&#305;nm&#305;&#351;t&#305;r. </p><p><img src="img/emre-kilinc.png" width="200" height="200" />Merhaba arkada&#351;lar.Bu yaz&#305;mda Asp.Net MVC ile birlikte hayatlar&#305;m&#305;za giren Routing ''i Asp.Net 4.0 &nbsp;uygulamalar&#305;na nas&#305;l entegre edebilece&#287;imiz &uuml;zerinde duraca&#287;&#305;m.&#304;ki senaryomuz var.Birincisi QueryString almayan sayfalar bir di&#287;er ise QueryString alan sayfalar.&#304;lk senaryomuzu incelemeye ba&#351;layal&#305;m.Routing i&#351;lemlerini System.Web.Routing namespace i alt&#305;ndan yapaca&#287;&#305;z.QueryString almayan bir sayfa i&ccedil;in tek yapmam&#305;z gereken global.asax ''a a&#351;a&#287;&#305;daki kodu eklemek ve routing webforms &uuml;zerinde &ccedil;al&#305;&#351;acakt&#305;r. </p>\r\n<div><br />\r\n</div>\r\n<div><strong>Global.asax</strong></div>\r\n<div><strong><br />\r\n</strong></div>\r\n<div><strong><br />\r\n</strong></div>\r\n<p>&nbsp;</p>\r\n<div><br />\r\n</div>\r\n<div><strong>Routing.aspx</strong></div>\r\n<div><strong><br />\r\n</strong></div>\r\n<p>&nbsp;</p>\r\n<div><img alt="asp.net 4.0 web forms url routing" src="http://static.emrekilinc.com/Static/post6_1.png" /><br />\r\n</div>\r\n<div><br />\r\n</div>\r\n&#350;imdi gelelim di&#287;er senaryomuza.E&#287;er bu sayfa QueryString alsayd&#305; ekstra olarak ne yapmam&#305;z gerekirdi.Bunun i&ccedil;in yapmam&#305;z gereken Global.asax ?taki kodumuza gelecek olan QueryString de&#287;erlerini eklemek.Sayfada gelen veriyi yakalamak i&ccedil;in eksi y&ouml;ntemden farkl&#305; bir y&ouml;ntem kullanarak; <strong>Page.RouteData.Values[&quot;de&#287;i&#351;kenAdi&quot;]</strong> ile yakalayaca&#287;&#305;z.\r\n<div><br />\r\n</div>\r\n<div><br />\r\n</div>\r\n<div>\r\n <p><strong>Global.asax</strong></p>\r\n <p>&nbsp;</p>\r\n</div>\r\n<div><strong><br />\r\n</strong></div>\r\n<div><strong><br />\r\n</strong></div>\r\n<div><br />\r\n</div>\r\n<div><br />\r\n</div>\r\n<div>\r\n <p><strong>Routing.aspx</strong></p>\r\n <p>&nbsp;</p>\r\n</div>\r\n<div><strong><br />\r\n</strong></div>\r\n<div><strong><br />\r\n</strong></div>\r\n<div><br />\r\n</div>\r\n<div><br />\r\n</div>\r\n<div><strong>Routing.aspx.cs</strong></div>\r\n<div><strong><br />\r\n</strong></div>\r\n<div><strong><br />\r\n</strong></div>\r\n<div><br />\r\n</div>\r\n<div><br />\r\n</div>\r\nBu kodlar&#305; yazd&#305;ktan sonra <strong>/statiksayfa/Emre/K&#305;l&#305;n&ccedil;</strong> sayfas&#305;na gitti&#287;imizde sayfa g&ouml;r&uuml;nt&uuml;s&uuml; a&#351;a&#287;&#305;daki gibi olacakt&#305;r.\r\n<div><br />\r\n</div>\r\n<div><img alt="asp.net 4.0 web forms url routing" src="http://static.emrekilinc.com/Static/post6_2.png" /><br />\r\n</div>\r\n<div><br />\r\n</div>\r\n<div><br />\r\n</div>\r\nG&ouml;rd&uuml;&#287;&uuml;n&uuml;z gibi Asp.Net 4.0 ile URL lerimizi kullan&#305;c&#305; ve SEO dostu hale getirmek bu kadar basit.Bir sonraki makalemde Routing in nas&#305;l &ccedil;al&#305;&#351;t&#305;&#287;&#305;na de&#287;inece&#287;im.\r\n<div><br />\r\n</div>\r\n<div>&nbsp;G&ouml;r&uuml;&#351;mek &uuml;zere...</div>\r\n<div>\r\n <h2> </h2>\r\n</div>', '2010-07-08 03:46:37'), (695, 'The Verve - Bittersweet Symphony', '<img src="img/verve.jpg" width="252" height="216" />cause it''s a bitter sweet symphony that''s life...<br />\r\n try to make ends meet , you''re a slave to the money then you die.<br />\r\n i''ll take you down the only road i''ve ever been down...<br />\r\n you know the one that takes you to the places where all the veins meet, yeah.<br />\r\n <br />\r\n no change, i can change, i can change, i can change,<br />\r\n but i''m here in my mould , i am here in my mould.<br />\r\n but i''m a million different people from one day to the next...<br />\r\n i can''t change my mould , no,no,no,no,no,no,no<br />\r\n <br />', '<p><img src="img/verve.jpg" width="252" height="216" />cause it''s a bitter sweet symphony that''s life...<br />\r\n try to make ends meet , you''re a slave to the money then you die.<br />\r\n i''ll take you down the only road i''ve ever been down...<br />\r\n you know the one that takes you to the places where all the veins meet, yeah.<br />\r\n <br />\r\n no change, i can change, i can change, i can change,<br />\r\n but i''m here in my mould , i am here in my mould.<br />\r\n but i''m a million different people from one day to the next...<br />\r\n i can''t change my mould , no,no,no,no,no,no,no<br />\r\n <br />\r\n well i''ve never prayed,<br />\r\n but tonight i''m on my knees, yeah.<br />\r\n i need to hear some sounds that recognise the pain in me, yeah.<br />\r\n i let the melody shine, let it cleanse my mind , i feel free now.<br />\r\n but the airwaves are clean and there''s nobody singing to me now.<br />\r\n <br />\r\n no change, i can change, i can change, i can change,<br />\r\n but i''m here in my mould , i am here in my mould.<br />\r\n and i''m a million different people from one day to the next<br />\r\n i can''t change my mould, no,no,no,no,no,no,no<br />\r\n <br />\r\n have you ever been down?<br />\r\n i can change, i can change...<br />\r\n <br />\r\n cause it''s a bittersweet symphony this life.<br />\r\n trying to make ends meet, try to find somebody then you die.<br />\r\n you know i can change, i can change, i can change,<br />\r\n but i''m here in my mould, i am here in my mould.<br />\r\n and i''m a million different people from one day to the next.<br />\r\n i can''t change my mould, no,no,no,no,no,no,no<br />\r\n <br />\r\n we''ve got ya sex and violence melody and silence<br />\r\n (have you ever been down)<br />\r\n(i''ll take you down the only road i''ve ever been down)</p>\r\n<p><object width="480" height="384"><param name="movie" value="http://www.dailymotion.com/swf/video/x8zqub"></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><embed type="application/x-shockwave-flash" src="http://www.dailymotion.com/swf/video/x8zqub" width="480" height="384" allowfullscreen="true" allowscriptaccess="always"></embed></object>&nbsp;</p>', '2010-07-08 04:32:30'), (696, 'Empire Of The Sun - We Are The People', '<img src="img/empireofthesun-we-are-the-people.jpg" width="309" height="205" />we can remember swimming in december,<br />\r\n heading for the city lights, in 1975<br />\r\n we share in each other<br />\r\n nearer than father<br />\r\n the scent of a lemon, drips from your eyes<br />\r\n <br />\r\n we are the people that rule the world<br />\r\n a force running in every boy and girl<br />\r\n all rejoicing in the world<br />\r\n take me now<br />\r\n we can try<br />\r\n <br />', '<p><object width="520" height="360"><param name="movie" value="http://www.dailymotion.com/swf/video/xctoo9"></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><embed type="application/x-shockwave-flash" src="http://www.dailymotion.com/swf/video/xctoo9" width="480" height="320" allowfullscreen="true" allowscriptaccess="always"></embed></object>&nbsp;</p><p><img src="img/empireofthesun-we-are-the-people.jpg" width="309" height="205" />we can remember swimming in december,<br />\r\n heading for the city lights, in 1975<br />\r\n we share in each other<br />\r\n nearer than father<br />\r\n the scent of a lemon, drips from your eyes<br />\r\n <br />\r\n we are the people that rule the world<br />\r\n a force running in every boy and girl<br />\r\n all rejoicing in the world<br />\r\n take me now<br />\r\n we can try<br />\r\n <br />\r\n we lived an adventure<br />\r\n love in the summer<br />\r\n followed the sun till night<br />\r\n reminiscing other times of life<br />\r\n for each every other<br />\r\n the feeling was stronger<br />\r\n the shock hit eleven<br />\r\n got lost in your eyes<br />\r\n <br />\r\n i can&rsquo;t do well when i think you&rsquo;re gonna leave me<br />\r\n but i know i try<br />\r\n are you gonna leave me now<br />\r\n can&rsquo;t you be believing now<br />\r\n <br />\r\n can you remember and humanize,<br />\r\n it was still where we&rsquo;d energized,<br />\r\n lie in the sand and visualize like its 75 again<br />\r\n <br />\r\n we are the people that rule the world<br />\r\n a force running in every boy and girl<br />\r\n all rejoicing in the world<br />\r\n take me now<br />\r\n we can try<br />\r\n <br />\r\n i can&rsquo;t do well when i think you&rsquo;re gonna leave me<br />\r\n but i know i try<br />\r\n are you gonna leave me now<br />\r\n can&rsquo;t you be believing now<br />\r\n <br />\r\n i know everything about you<br />\r\n you know everything about me<br />\r\n know everything about us<br />\r\n <br />\r\n i can&rsquo;t do well when i think you&rsquo;re gonna leave me, but i know i try<br />\r\n are you gonna leave me now<br />\r\ncan&rsquo;t you be believing now</p>', '2010-07-08 04:41:37'); |
Ratings Tablosu
Ratings tablosunda, 4 adet alan bulunuyor. Verilen her oyu veritabanına diğer alanlarla birlikte kaydedeceğimiz için, her bir oyun kendine ait id si olacak. Foreign key olarak tanımlı olan makale id si ni de tutarak, fonksiyonları çağırdığımızda böylece ilgili makalenin ortalaması ve kaç kişinin oy vermiş olduğu gibi özellikleri print yapabileceğiz. Tutacağımız 3. alan ise oy veren kişinin IP numarası, 4. alan ise verilen her oyun sayısal değeri (1=çok kötü ,5= harika gibi) kaydedilecek.
id —> int, not null,auto_increment ve primary key (bu verilen her bir oyun id si)
rating_id —>varchar 80 karakter, not null (bu makalemizin id sini tutuyor- Foreign Key )
rating_num —> int , not null
IP —> varchar 2 karakter – not null (oy veren kullanıcının IP si)
1 2 3 4 5 6 7 | CREATE TABLE IF NOT EXISTS `ratings` ( `id` INT(11) NOT NULL AUTO_INCREMENT, `rating_id` VARCHAR(80) NOT NULL, `rating_num` INT(11) NOT NULL DEFAULT '4', `IP` VARCHAR(25) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ; |
SQL Dosyasını indirip, içeri aktar diyerek veritabanını hazır duruma getirebilirsiniz.
!!! Dilerseniz PhpMyAdmin ‘de veritabanı seçiliyken, “İçeriAktar” seçenini tıklayarak makale sonunda bulunan sql dosyasını da import edebilirsiniz.
Veritabanımızdaki tabloları yapılandırdığımıza göre artık sayfaları oluşturmaya başlayabiliriz.
2 . ADIM – VERİTABANINA BAĞLANTI DOSYAMIZ- Connections/starrating.php
Yukarıda oluşturmuş olduğumuz, veritabanına bağlanmamız için gerekli olan dosyamızı oluşturuyoruz. Sitenin root klasöründe “Connections” isimli bir klasör oluşturup “starrating.php” isimli bağlantı dosyamızı yazıyoruz.
1 2 3 4 5 6 | <?php $hostname_starrating = "localhost"; $database_starrating = "5starrating"; $username_starrating = "root"; $password_starrating = ""; $starrating = mysql_pconnect($hostname_starrating, $username_starrating, $password_starrating) or trigger_error(mysql_error(),E_USER_ERROR); ?> |
hostumuz : localhost
veritabanımız: 5starrating
veritabanı kullanıcımız : root
parola : “” (yok)
3. ADIM – index.php
Tasarım konusunda çok iyi olmadığım için Free Css Templates sitesindeki,Synchronize isimli tema üzerinde çalışacağız.
Daha fazla zaman kaybetmeyip, php kodlarına geçiş yapalım. Indirmiş olduğumuz, index.html dosyasını, index.php olarak kaydedip, sayfanın en üstüne aşağıdaki kodları yerleştiriyoruz.
1 2 3 4 5 6 7 8 9 | <?php require_once('Connections/starrating.php'); ?> <?php mysql_select_db($database_starrating, $starrating); $sorgu_makale = "SELECT * FROM makale ORDER BY tarih DESC"; $makale = mysql_query($sorgu_makale, $starrating) or die(mysql_error()); $row_makale = mysql_fetch_assoc($makale); $toplam_makale = mysql_num_rows($makale); ?> <?php mysql_query("SET NAMES latin 5"); ?> |
Yukarıdaki kod bloğunun 1. satırında, veritabanımıza bağlantı yaptığımız dosyayı çağırıyoruz. 4. satırda, makale tablomuzdaki kayıtları tarihe göre DESC(son girilen en üstte görüntülenecek) olacak şekilde SQL sorgumuzu yazıyoruz. 6. satırda, kayıtlarımızı alıyoruz. Yukarıdaki kod bloğumuz zaten birçok kişinin yapabileceği türden olduğu için üzerinde çok durmuyorum.
PHP kodlarımızı yerleştirdikten sonra yer alan html kodumuzun <div id=”content”> kısmına kadar olan bölümüne birşey yapmıyoruz. Bu alandan sonra döngümüzü başlatarak, makale tablosundan çekmiş olduğumuz,kayıtları döndürmeye başlayacağız.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- Design by Free CSS Templates http://www.freecsstemplates.org Released for free under a Creative Commons Attribution 2.5 License Name : Synchronize Description: A two-column, fixed-width design with dark color scheme. Version : 1.0 Released : 20100223 --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>5 Yıldızlı Ajax Oylama sistemi PHP | 5 Star Rating | Mustafa Resul Çetinel</title> <link href="style.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <div id="wrapper"> <div id="header-wrapper"> <div id="header"> <div id="logo"> <h1><a href="#">Mr. cetinel </a></h1> <p>5 Yıldızlı Ajax Oylama Sistemi | Mustafa Resul Çetinel </p> </div> </div> </div> <!-- end #header --> <div id="page"> <div id="page-bgtop"> <div id="page-bgbtm"> <div id="content">[/html] <div id="content"> tag inden sonra ise php kodları olarak şunları yazıyoruz. [php]<?php do { ?> <div> <p><span><?php echo $row_makale['tarih']; ?></span></p> <h2><a href="makale.php?id=<?php echo $row_makale['id']; ?>"><?php echo $row_makale['makale_baslik']; ?></a></h2> <div style="clear: both;"> </div> <div> <p><?php echo $row_makale['makale_giris']; ?></p> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> </div> </div> <?php } while ($row_makale = mysql_fetch_assoc($makale)); ?><div style="clear: both;"> </div> </div></div></div></div></div></div></body></html> |
1. satırda başlattığımız döngümüzde, veritabanımızdaki kayıtların nerede ve nasıl gözükmesini istediğimizi belirtiyoruz. Mesela makale başlığının görüntüleneceği alan olarak <h2> taginin bulunduğu yere <?php echo $row_makale['makale_baslik']; ?> kodunu yazarak, makalenin başlığını print yapıyoruz. Link olarak ise, makale.php sayfasını vererek,gidecek ola sorgu parametresini id(makale.php?id=), değerini ise, veritabanından çekmiş olduğumuz makalenin id si olarak tanımlamamız gerekiyor. Bunu da dinamik olarak çekersek, her döngü sonucu listelenen makalenin kendi detay sayfasına gitmesini sağlıyoruz. Değer alanı olarak da makale tablosundaki , makale id siniprint yapıyoruz(<?php echo $row_makale['id']; ?>)
<?php } while ($row_makale = mysql_fetch_assoc($makale)); ?> satrıyla d a başlatmış olduğumuz döngüyü sonlandırıyoruz.
Bağlantıyı kapatmak için , sayfanın en altına,
1 2 3 |
Sonuç olarak index.php sayfasında bulunan kodlar şöyle oluyor.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 | <?php require_once('Connections/starrating.php'); ?> <?php mysql_select_db($database_starrating, $starrating); $sorgu_makale = "SELECT * FROM makale ORDER BY tarih DESC"; $makale = mysql_query($sorgu_makale, $starrating) or die(mysql_error()); $row_makale = mysql_fetch_assoc($makale); $toplam_makale = mysql_num_rows($makale); ?> <?php mysql_query("SET NAMES latin 5"); ?> < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- Design by Free CSS Templates http://www.freecsstemplates.org Released for free under a Creative Commons Attribution 2.5 License Name : Synchronize Description: A two-column, fixed-width design with dark color scheme. Version : 1.0 Released : 20100223 --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>5 Yıldızlı Ajax Oylama sistemi PHP | 5 Star Rating | Mustafa Resul Çetinel</title> <link href="style.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <div id="wrapper"> <div id="header-wrapper"> <div id="header"> <div id="logo"> <h1><a href="#">Mr. cetinel </a></h1> <p>5 Yıldızlı Ajax Oylama Sistemi | Mustafa Resul Çetinel </p> </div> </div> </div> <!-- end #header --> <div id="page"> <div id="page-bgtop"> <div id="page-bgbtm"> <div id="content"> <?php do { ?> <div> <p><span><?php echo $row_makale['tarih']; ?></span></p> <h2><a href="makale.php?id=<?php echo $row_makale['id']; ?>"><?php echo $row_makale['makale_baslik']; ?></a></h2> <div style="clear: both;"> </div> <div> <p><?php echo $row_makale['makale_giris']; ?></p> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> </div> </div> <?php } while ($row_makale = mysql_fetch_assoc($makale)); ?><div style="clear: both;"> </div> </div> <!-- end #content --> <div id="sidebar"> <ul> <li> <div id="search" > <form method="get" action="#"> <div> <input type="text" name="s" id="search-text" value="" /> <input type="submit" id="search-submit" value="Arama" /> </div> </form> </div> </li> <li> <h2><strong>Quae nocent docent</strong></h2> <p>"The quiter you become, The more you are able to hear " </p> </li> <li> <h2>Kategoriler</h2> <ul> <li><a href="#">Solaris</a></li> <li><a href="#">Php</a></li> <li><a href="#">Ajax</a></li> <li><a href="#">ASP.NET</a></li> <li>Linux</li> </ul> </li> <li> <h2>Blogroll</h2> <ul> <li><a href="#">Emre Kılınç </a></li> <li><a href="#">Consectetuer adipiscing elit</a></li> <li><a href="#">Metus aliquam pellentesque</a></li> <li><a href="#">Suspendisse iaculis mauris</a></li> <li><a href="#">Urnanet non molestie semper</a></li> <li><a href="#">Proin gravida orci porttitor</a></li> </ul> </li> </ul> </div> <!-- end #sidebar --> <div style="clear: both;"> </div> </div> </div> </div> <!-- end #page --> </div> <div id="footer"> <p>Copyright (c) 2008 Sitename.com. All rights reserved. Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p> </div> <!-- end #footer --> </body> </html> <?php mysql_free_result($makale); ?> |
4. ADIM – makale.php (MAKALE DETAY SAYFASI )
makle.php sayfasının en üstünde bulunan kısmına php kodlarımızı yerleştirelim.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <?php require_once('Connections/starrating.php'); ?> <?php $colname_makalefiltreleme = "-1"; if (isset($_GET['id'])) { $colname_makalefiltreleme = (get_magic_quotes_gpc()) ? $_GET['id'] : addslashes($_GET['id']); } mysql_select_db($database_starrating, $starrating); $sorgu_makalefiltreleme = sprintf("SELECT * FROM makale WHERE id = %s", $colname_makalefiltreleme); $makalefiltreleme = mysql_query($sorgu_makalefiltreleme, $starrating) or die(mysql_error()); $row_makalefiltreleme = mysql_fetch_assoc($makalefiltreleme); $toplam_makalefiltreleme = mysql_num_rows($makalefiltreleme); ?> <?php mysql_query("SET NAMES latin 5"); ?> |
index.php de listelemiş olduğumuz makalelerin detayını görmek için bir önceki sayfada parametre ve değerini belirtmiştik. Şimdi ise bu parametre ve değeri bu sayfada yakalamamız gerekiyor. Parametremiz değişmiyor ve yakalayacak olduğumuz değer de gelen int veriye göre makale id mizi kullanrak, makalenin diğer detaylarını çekmek olacak.index.php deki kodlardan fark olarak sadece bir değeri yakalamak oluyor. $sorgu_makalefiltreleme = sprintf(“SELECT * FROM makale WHERE id = %s”, $colname_makalefiltreleme); satırındaki %s değerini $colname_makalefiltreleme parametresinden alıyoruz. $colname_makalefiltreleme nin değerini de bir önceki sayfadan gönderilen değeri $GET['id'] ile alarak makale filtrelemesini de yapmış oluyoruz.
Veritabanında bulunan diğer alanları(makale_detay,makale_baslik,tarih …) html kodumuzda görmek istediğimiz html tagleri arasında print yapıyoruz.
index.php sayfamızda yaptığımız gibi bağlantımızı kapatıyoruz.
Tüm makale.php Kodumuz
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 | <?php require_once('Connections/starrating.php'); ?> <?php $colname_makalefiltreleme = "-1"; if (isset($_GET['id'])) { $colname_makalefiltreleme = (get_magic_quotes_gpc()) ? $_GET['id'] : addslashes($_GET['id']); } mysql_select_db($database_starrating, $starrating); $sorgu_makalefiltreleme = sprintf("SELECT * FROM makale WHERE id = %s", $colname_makalefiltreleme); $makalefiltreleme = mysql_query($sorgu_makalefiltreleme, $starrating) or die(mysql_error()); $row_makalefiltreleme = mysql_fetch_assoc($makalefiltreleme); $toplam_makalefiltreleme = mysql_num_rows($makalefiltreleme); ?> <?php mysql_query("SET NAMES latin 5"); ?>< ? include("includes/rating_functions.php"); ?> < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- Design by Free CSS Templates http://www.freecsstemplates.org Released for free under a Creative Commons Attribution 2.5 License Name : Synchronize Description: A two-column, fixed-width design with dark color scheme. Version : 1.0 Released : 20100223 --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>5 Yıldızlı Ajax Oylama sistemi PHP | 5 Star Rating | Mustafa Resul Çetinel</title> <link href="style.css" rel="stylesheet" type="text/css" media="screen" /> <link rel="stylesheet" type="text/css" href="css/rating_style.css" media="screen" /> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/rating_update.js" ></script> </head> <body> <div id="wrapper"> <div id="header-wrapper"> <div id="header"> <div id="logo"> <h1><a href="index.php">Mr. cetinel </a></h1> <p>5 Yıldızlı Ajax Oylama Sistemi | Mustafa Resul Çetinel </p> </div> </div> </div> <!-- end #header --> <div id="page"> <div id="page-bgtop"> <div id="page-bgbtm"> <div id="content"> <div> <p><span><?php echo $row_makalefiltreleme['tarih']; ?> </span></p> <h2><a href="makale.php?id=<?php echo $id; ?>"><?php echo $row_makalefiltreleme['makale_baslik']; ?> </a></h2> <div style="clear: both;"> <table width="200" border="0" align="right" cellpadding="0" cellspacing="0"> <tr> <td> </td> <td><span> < ? echo pullRating($row_makalefiltreleme['id'],true,false,true); ?></span> </td> </tr> </table> </div><br /> <br /> <br /> <br /> <br /> <div> <p><?php echo $row_makalefiltreleme['makale_detay']; ?>.</p> <p> </p> <p> </p> <p> </p> </div> </div> <div style="clear: both;"> </div> </div> <!-- end #content --> <div id="sidebar"> <ul> <li> <div id="search" > <form method="get" action="#"> <div> <input type="text" name="s" id="search-text" value="" /> <input type="submit" id="search-submit" value="Arama" /> </div> </form> </div> </li> <li> <h2><strong>Quae nocent docent</strong></h2> <p>"The quiter you become, The more you are able to hear " </p> </li> <li> <h2>Kategoriler</h2> <ul> <li><a href="#">Solaris</a></li> <li><a href="#">Php</a></li> <li><a href="#">Ajax</a></li> <li><a href="#">ASP.NET</a></li> <li>Linux</li> </ul> </li> <li> <h2>Blogroll</h2> <ul> <li><a href="#">Emre Kılınç </a></li> <li><a href="#">Tumblr</a><a href="#"></a></li> </ul> </li> </ul> </div> <!-- end #sidebar --> <div style="clear: both;"> </div> </div> </div> </div> <!-- end #page --> </div> <div id="footer"> <p>Copyright (c) 2008 Sitename.com. All rights reserved. Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p> </div> <!-- end #footer --> </body> </html> <?php mysql_free_result($makalefiltreleme); ?> |
5. ADIM – 5 YILDIZLI OYLAMA ALANI ( 5 STAR RATING )
Yukarıdakilerle php sayfalarının normal çalışma prosedürünü anlatmış olduk. Peki ya 5 yıldızlı oylamayı nasıl entegre edeceğiz veya nasıl yapacağız diye soruyorsanız. Bu bölümde bu aşamaları bulabilirsiniz.
Öncelikle bu oylama sisteminin dosyalarına bakalım.
- css klasörü altında, yıldızların görsel bir hale gelmesi için kullandığımız, rating_style.css
- include klasörü altındaki, rating_process.php, rating_functions.php ve rating_config.php dosyaları
- js klasörü altındaki , rating_update.js dosyası
Sayfanın altına doğru bulunan linkten bu dosyaları indirebilirsiniz.
Jordan Boesch tarafından geliştirilen ve www.boedesign.com sitesinde yer alan bu dosyaları(Türkçe) kendi sistemimize entegre edeceğiz.
1 – İlk olarak sitemizin kök dizininde, include, js ve css isimli klasörler oluşturup, sayfanın altında bulacağınız linkten bu dosyaları indirip buraya yapıştırıyorsunuz.
2 – makale.php dosyasını açarak php kodlarımızın bitip, html kodlarımızın başladığı yere şu dosyayı çağırıyoruz.
1 2 3 | < ? include("includes/rating_functions.php"); ?> |
3 - <head> taginden önceki yere tıklayarak şu yolları belirtiyoruz.
1 | <script src="js/rating_update.js" type="text/javascript"></script> |
Böylece hem css dosyamızı alarak yıldızlarımızı görsel halegetiriyorz, hem de rating_update.js dosyasını alarak, sayfada refresh yapmadan ajax ile oylama işlemini yapabiliyor olacağız . 4 - Son olarak ise , oylanacak olan makalenin id sini bu alana bildirmek kaldı. Jordan Boesch tarafından yapılan fonksiyonlarda şöyle bir kod yazarak anında ratings tablosuna kayıt yapabiliyoruz.
1 | < ? echo pullRating($row_makalefiltreleme['id'],true,false,true); ?> |
Yukarıdaki kodu sitemizin tasarımına göre, dilediğimiz yere koyabiliriz. Bu kodu açıklamak gerekirse $row_makalefiltreleme['id'] : index.php sayfasından gönderip, makale.php sayfasında yakalmış olduğumuz makalenin id si .Böylece makalenin ortalama puanının kaç olduğunu veya puan verme işlemini yapıp yapamayacağımızı görebiliyoruz.Yani kısaca makale id miz olacak. (int veri tipinde) 2. alan- true /false :3/5 şeklinde gösterilip gösterilmeyeceğini tanımlar. true olursa 5 üzerinden derecelendirilmesi gösterilir. false olursa gösterilmez. ben true olarak ayarladım. 3. alan -true/false : yüzde cinsinden hesaplamasını gösterir. 46/100 gibi. ben bunu false oalrak ayarladım . 4. alan true/false : oylamaların gösterilip gösterilmeyeceği, true diyerek gösterilmesini sağlıyoruz. 5. alan – ‘novote’ : eğer sonuncu alan olarak, bu değeri yazarsak, oylamalara kapatmış oluruz. Peki bu özelliği nerelerde kullanabiliriz. Diyelimki kullanıcılarımız index.php sayfasına geldiler. Ama makalenin içeriğini görmeden oy vermeleri pek sağlıklı olmayacağı için burada (index.php sayfası için) ‘novote’ stringini kullanarak, oylama yapılmasını engelleyebiliriz. Ama makale.php sayfasında ise oylamaya izin vermek için ‘novote’ stringini kullanmayarak, oylamayı aktif hale getiririz. Normal sitemize entegre etmek için kullanacak olduğumuz kod bloğu şu
1 | < ? echo pullRating(maklenizin veya gelen değerin id si ,true,false,true); ?> |
Böylelikle makale.php sayfasının son hali şöyle oluyor.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 | <?php require_once('Connections/starrating.php'); ?> <?php $colname_makalefiltreleme = "-1"; if (isset($_GET['id'])) { $colname_makalefiltreleme = (get_magic_quotes_gpc()) ? $_GET['id'] : addslashes($_GET['id']); } mysql_select_db($database_starrating, $starrating); $sorgu_makalefiltreleme = sprintf("SELECT * FROM makale WHERE id = %s", $colname_makalefiltreleme); $makalefiltreleme = mysql_query($sorgu_makalefiltreleme, $starrating) or die(mysql_error()); $row_makalefiltreleme = mysql_fetch_assoc($makalefiltreleme); $toplam_makalefiltreleme = mysql_num_rows($makalefiltreleme); ?><?php mysql_query("SET NAMES latin 5"); ?> < ? include("includes/rating_functions.php"); ?>< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- Design by Free CSS Templates http://www.freecsstemplates.org Released for free under a Creative Commons Attribution 2.5 License Name : Synchronize Description: A two-column, fixed-width design with dark color scheme. Version : 1.0 Released : 20100223 --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>5 Yıldızlı Ajax Oylama sistemi PHP | 5 Star Rating | Mustafa Resul Çetinel</title> <link href="style.css" rel="stylesheet" type="text/css" media="screen" /> <link rel="stylesheet" type="text/css" href="css/rating_style.css" media="screen" /> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/rating_update.js" ></script> </head> <body> <div id="wrapper"> <div id="header-wrapper"> <div id="header"> <div id="logo"> <h1><a href="index.php">Mr. cetinel </a></h1> <p>5 Yıldızlı Ajax Oylama Sistemi | Mustafa Resul Çetinel </p> </div> </div> </div> <!-- end #header --> <div id="page"> <div id="page-bgtop"> <div id="page-bgbtm"> <div id="content"> <div> <p><span><?php echo $row_makalefiltreleme['tarih']; ?> </span></p> <h2><a href="makale.php?id=<?php echo $id; ?>"><?php echo $row_makalefiltreleme['makale_baslik']; ?> </a></h2> <div style="clear: both;"> <table width="200" border="0" align="right" cellpadding="0" cellspacing="0"> <tr> <td> </td> <td><span> < ? echo pullRating($row_makalefiltreleme['id'],true,false,true); ?></span> </td> </tr> </table> </div><br /> <br /> <br /> <br /> <br /> <div> <p><?php echo $row_makalefiltreleme['makale_detay']; ?>.</p> <p> </p> <p> </p> <p> </p> </div> </div> <div style="clear: both;"> </div> </div> <!-- end #content --> <div id="sidebar"> <ul> <li> <div id="search" > <form method="get" action="#"> <div> <input type="text" name="s" id="search-text" value="" /> <input type="submit" id="search-submit" value="Arama" /> </div> </form> </div> </li> <li> <h2><strong>Quae nocent docent</strong></h2> <p>"The quiter you become, The more you are able to hear " </p> </li> <li> <h2>Kategoriler</h2> <ul> <li><a href="#">Solaris</a></li> <li><a href="#">Php</a></li> <li><a href="#">Ajax</a></li> <li><a href="#">ASP.NET</a></li> <li>Linux</li> </ul> </li> <li> <h2>Blogroll</h2> <ul> <li><a href="#">Emre Kılınç </a></li> <li><a href="#">Tumblr</a><a href="#"></a></li> </ul> </li> </ul> </div> <!-- end #sidebar --> <div style="clear: both;"> </div> </div> </div> </div> <!-- end #page --> </div> <div id="footer"> <p>Copyright (c) 2008 Sitename.com. All rights reserved. Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p> </div> <!-- end #footer --> </body> </html> <?php mysql_free_result($makalefiltreleme); ?> |
Tüm Dosyaları İndirmek İçin İkona Tıklayınız
Related posts:
hocam merhaba sistemi kurdum çok güzel çalışıyor fakat ben sadece yıldızların çıkmasını istiyorum 1 oy verildi 2 oy verildi vs. çıkmasını istemiyorum nasıl yapabiliriz ? yardımcı olursanız sevinirim
makaleye bir daha göz atarsanız. kaçırdığınız ayrıntıyı daha rahat görebilirsiniz.
< ? echo pullRating($id ,true,false,true); ?>
tekrar hatırlatmak gerekirse, yukarıdaki kodda bulunan birinci alan ($id değeri), sayfamızın id si oluyor, ikinci alan ise 5 üzerinden değerlendirmeleri(3/5, 1/5 gibi) , üçüncü alan ise yüzde türünden değerlendirmeleri (38/100, 64/100 .. gibi) , dördüncü olan alan ise kaç oy verildiğini (1 oy verildi, 2 oy verildi ) gösteriyor.Yani sizin sorunuzu düzeltmek için bu alanı false yapmanız yeterlidir.
peki hocam teşekkür ederim o zaman benim kullanacağım kod
mi olacak
Çok teşekkürler. O kadar aramama rağmen türkçe bir anlatım bulamamıştım. Projemi tamamlamama yardımcı oldu. Hem daha güzel göüküyor sitem ..
Çok teşekkür ederim. çok işime yaradı bu oy sistemi. Şiirbul.net sitesinde de kullandım çok hoş durdu.
İyi çalışmalar…
Merhaba seo kısmında sorun yaşıyorum
You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ‘[L,NC]‘ at line 1
hatasını veriyor bunu nasıl çözümlerim acaba