2010-02-24 97 views
20

我對網絡技術很陌生,這基本上是我的團隊正在從事的一個學期項目。我們正在研究食物評論網站。如何建立一個基本和簡單的5星級評分系統?

截至目前,我不太清楚如何實現一個簡單的5星級評分系統。我是否應該使用像PHP這樣的服務器端語言或者像Javascript這樣的客戶端語言(帶有JQuery)。環顧四周,似乎JQuery更適合這個?或者它會是兩者的結合?

什麼我在尋找儘可能的功能走的是:

  • 顆星亮起時,鼠標懸停
  • 頁面沒有被重新加載時被點擊 明星(不是真的需要)
  • 某種平均 明星
  • 評級在某處被存儲在一個MySQL數據庫(旁邊顯示這是一個好主意嗎?)

我真的很抱歉,如果這個問題聽起來含糊而愚蠢,我沒有太多的關於如何實現這一點的線索,我試着用google搜索。如果您對此有任何疑問,請告訴我。

非常感謝。

回答

20

顆星亮起時,鼠標懸停
有在網絡上一個輝煌的教程設計一個5星級評級系統:http://rog.ie/blog/css-star-rater。它純粹是CSS,所以不需要JavaScript。

頁面沒有被重新加載時被點擊的明星(不是真的需要)
Ajax是你的朋友,我所做的就是有一個<a class="one_star" href="javascript: submitRating(1, 5)">其中<a>代表的明星和使用阿賈克斯submitRating()功能要將我的評分(1/5)傳輸到服務器,服務器會存儲評分(並指定給出評分的用戶),並重新計算新的平均評分並將結果以JSON格式提交回去。

在星星旁邊顯示的某種平均值
簡單。編寫一個基於產品ID的SQL腳本,將平均評分(即1/5 + 2/5 + 4/5等)的總和,除以總評分將它乘以100.將值返回給服務器,並從服務器返回給客戶端。

評級在某處被存儲在MySQL數據庫中(這是一個好主意?)
我使用的MySQL,這和它的工作原理就像一個魅力....任何數據庫系統是好的。

+1

Ajax簡介(http://en.wikipedia.org/wiki/Ajax_%28programming%29)和JSON(http://en.wikipedia.org/wiki/JSON) – 2010-02-24 08:24:56

+0

AJAX,甚至Javascript,不是必須不重新加載頁面:http://stackoverflow.com/questions/17385583/how-does-netflix-submit-ratings-without-a-page-refresh – 2013-11-18 18:40:25

+1

鏈接broaken ... – 2013-11-26 13:38:16

3

當鼠標懸停時,星星點亮
簡單,有一個黃星圖像和白星圖像。當一顆恆星徘徊時,左邊的所有恆星都將其「src」更改爲黃色恆星,右側的所有恆星都將其srcs更改爲白色恆星。明星被點擊
查找到的Ajax/XHR時

頁面不會被重新裝入
http://en.wikipedia.org/wiki/Ajax_(programming)
提示:有一個名爲vote.php一個PHP文件,並傳遞到它你的食物和的ID用戶給出的評分。

某種平均星
大多數網站只顯示爲0%,50%之間所示,和100%的星星......用戶不會真的嚇壞了,如果他們沒有得到「確切的精度」

評級應該存儲在MySQL數據庫中
任何數據庫系統都可以。但是,是的,你可能會想要使用SQL數據庫這個

+0

爲了您的第一個答案,它可以使用CSS來完成......查看我的答案。 – 2010-02-24 08:27:17

0

是的,你的方法聽起來很完美。有一對夫婦件:

恆星懸停效果:

的jQuery:http://www.fyneworks.com/jquery/star-rating/

原型:http://www.fyneworks.com/jquery/star-rating/

CSS:http://www.henryhoffman.com/css-star-rating-tutorial.html

的onclick可以調用與jQuery的AJAX調用: http://api.jquery.com/jQuery.post/

然後在服務器端,可以保持在評級表

那裏有此更長的例子:

http://webtint.net/tutorials/5-star-rating-system-in-php-mysql-and-jquery/

0

JS和PHP的組合是去(如果PHP是你選擇的方式服務器端語言)。 JQuery是一種輕鬆實現一種主演系統的好方法,我曾經爲我後來刪除的其中一個網站開發了這個功能。這是一個簡單的事情,有5個圖像鏈接的onrollover事件。點擊後,如果它是「id 4」,它會將用戶使用jQuery的.post()函數的投票發送給一個PHP腳本,該腳本記錄了用戶並在MySQL數據庫中記錄了投票,如果他們沒有已經投了票。

0

要有一個不錯的star-clicky控件,是的,你需要JavaScript。所以你應該做jQuery。

是的,你會想要將東西存儲在數據庫中。你可以使用PHP和MySQL。

鑑於這是一個班級作業,這是很多實施。考慮通過使用現有的CMS進行作弊。特別是Drupal的功能類似於你所要求的功能。您不必學習Drupal,只需購買「使用Drupal」一書即可。第4章將告訴你如何:

...建立一個社區產品評論網站,以...和Fivestar模塊提供評級小部件。

Drupal是基於PHP的,它使用MySQL作爲它的數據庫,所以它看起來與你要去的地方相匹配。 Drupal運行可能需要一點時間......但是,您可以快速閱讀第4章。

如果老師堅持寫代碼,Drupal是開源的,並且易於添加自定義模塊。

+1

你不必只用jQuery就可以了......我用了簡單的ajax和JS ......沒有什麼大不了的! – 2010-02-24 08:29:20