Bewertungs Sterne erstellen mit Ajax Star Rating Bar
Eigene Anzeige: Ich biete professionelle Wordpress Themes mit tollen Features, hübschem Design und Premium Support. Weitere Informationen und Live Demo findest du auf meiner Website ThemeZee.com
Viele Webseiten und Blogs beinhalten eine Bewertung von Links, Downloads, Artikeln oder anderes. Meistens ist diese Bewertung in Form von Sternen, Punkten oder Prozentzahlen realisiert. Bei einigen dieser Seiten ist diese Bewertungsfunktion inzwischen mittels Ajax realisiert. Dadurch entfällt ein lästiges Aufrufen einer neuen Seite zur Bewertung. Ein klarer Vorteil für Besucher also.
Ich arbeite momentan an einem neuen, eigenen Webprojekt für welches ich eine einfache Möglichkeit gesucht habe, mittels Ajax aufgelistete Seiten zu bewerten. Ich bin nach ein wenig Suchen auf die Ajax Star Rating Bar gestoßen. (siehe Bild)
Dieser habe ich mich heute ein wenig gewidmet und möchte euch kurz meine Erfahrungen mitteilen.
Für die Rating Bar wird PHP und Mysql benötigt. Damit der Ajax-Vorteil ausgespielt wird muss der Besucher natürlich JavaScript aktiviert haben. Aber es funktioniert auch ohne. Dann wird mit der Bewertung einfach die komplette Seite neu aufgerufen.
Die Ajax Star Rating Bar kann kostenlos unter Masuga Webdesign heruntergeladen werden. Das Paket besteht aus 4 PHP, 2 Javascript und einer CSS Datei und ist knapp 50 KB groß. Die Installation der Bewertungs Bar ist kinderleicht und ist in der readme.txt genau beschrieben. Daher werde ich diese nur kurz zusammenfassen.
Installation:
Um die Bewertungen zu speichern wird eine neue Tabelle in deiner MySQL Datenbank benötigt. Dazu wird ein kleines SQL Code Schnipsel bereits vom Hersteller mitgegeben.
CREATE TABLE `ratings` (
`id` varchar(11) NOT NULL,
`total_votes` int(11) NOT NULL default 0,
`total_value` int(11) NOT NULL default 0,
`used_ips` longtext,
PRIMARY KEY (`id`)
) TYPE=MyISAM AUTO_INCREMENT=3;
Am einfachsten ist es, diesen SQL Code einfach mit phpmyadmin ausführen zu lassen. Aber es geht natürlich auch ein Aufrufen mit einer einfachen PHP Datei.
Als nächsten Schritt muss man die Zugangsdaten der Datenbank in der _config-rating.php konfigurieren, damit die Ajax Bar auch auf die Datenbank zugreifen kann. Nun kann man die Dateien in seine eigentliche Seite einbinden. Dazu ruft man möglichst am Anfang seiner index.php die _drawrating.php auf, die dann alle anderen erforderlichen Dateien mit einbindet.
require('_drawrating.php');
Ebenfalls einzufügen sind nun noch die JavaScript und CSS Dateien. Dies geschieht ganz normal im Header der Seite.
Schlussendlich kann man dann die Rating Bar an gewünschter Stelle einbinden. Dazu wird im ersten Parameter die ID und im zweiten die Anzahl der Sterne übergeben. Die ID wird dazu benötigt das die verschiedenen Bewertungen auseinander gehalten werden können. Wenn man sein Bewertungssystem nun z.B. bei einem Downloadscript einbindet, kann man hier die ID des jeweiligen Downloads der Rating Bar übergeben.
echo rating_bar('8'); // 10 stars (default), ID of 8
echo rating_bar('8xxa','5'); // 5 stars, ID of 8xxa
echo rating_bar('9b',''); // 10 stars, ID of 9b
Falls die Installation bei dir nicht klappen sollte, schreib einfach einen Kommentar, ich helfe gerne.
Anpassung
Wesentlich interessanter als die Installation ist natürlich, wie man die Bewertungssterne nun designtechnisch an seine Seite anpasst. Als Erstes haben wir hier natürlich die rating.css Datei, in der wir bestehende Style-Angaben einfach ändern können.
In der _drawrating.php steht dann der HTML Code, der ausgegeben wird. Dort kann man beispielsweise die Textausgabe (standard = 1. Rating 3.0/8 (12 Votes cast) umschreiben oder löschen, wenn man nur die Bewertungssterne anzeigen lassen will. Der Kreativität sind keine Grenzen gesetzt ;)
In der rpc.php findet sich die Ausgabe, die aufgerufen wird falls jemand votet. Standard mässig wird ein grüner Text “Thanks for Voting” angezeigt.
Was wohl mit am meisten geändert wird, sind die Grafiken der Sterne. Diese sind von Haus aus leider recht groß geraten. Für diese Änderung der Sterne muss außer dem Ersetzen der Grafik auch die definierte Breite und Höhe in der rating.css auf die neuen Größenangaben geändert werden. Zudem muss in der _config-rating.php die Variable $rating_unitwidth auf die richtige Breite deiner eingesetzten Grafik konfiguriert werden.
Falls ihr hier vor irgenwelchen Problemen steht, schreibt mir einfach ;)
Fazit
Die Ajax Star Rating Bar ist eine simple Möglichkeit, ein schnelles und cooles Bewertungssystem auf deiner Homepage zu installieren. Mit ein wenig rumspielen kann man die Bewertung individuell gestalten und an seine Website anpassen.
Hallo, hab das Rating erfolgreich in meine Website eingebaut. kann man den Hintergrund der Star Bar anpassen?
Hier ist sie eingebaut:
–>www.blut-und-ruhm-online.de/geschichten/alterak.php
Der Hintergrund sollte das selbe Image bekommen wie sie die Links haben.
MfG
Chief
Den Hintergrund der Star Rating Bar kann man leider nur sehr schlecht anpassen
dazu muss man auf jeden Fall die starrating.gif verändern
entweder man ändert direkt den Hintergrund der Grafik; Problem dabei: Die Sterne werden ja ständig wiederholt d.h. das würde bei deiner Hintergrund Grafik wahrscheinlich nicht gut aussehen
Alternative: du fügst einfach nur eine Hintergrundfarbe ein, in diesem Fall dein dunkles Braun
die zweite möglichkeit wäre den Hintergrund der starrating.gif transparent zu machen…
und in der rating.css überall wo background:url(‘../images/starrating.gif’) steht darunter die Hintergrundfarbe mit background-color einfügen
Einfacher gehts wohl nicht, hab gerade rumprobiert und nichts gefunden
Zum Ändern der Grafik braucht man halt schon ein paar Design-Fähigkeiten.. bei mir sah das Resultat leider schrecklich aus; bin kein Webdesigner ;)
Ich hoffe trotzdem ich konnte dir mit meiner Antwort weiterhelfen
PS: coole Website ^^
Hallo,
ich habe das Script einmal installiert und eine MySQL Tabelle “ratings” angelegt, einen eigenen Ordner “ratings” und dort alle Dateien reinkopiert. Da ist ja auch eine index.php dabei zum Testen Dabei. Es kommt aber eine Fehlermeldung:
“Error: 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 ‘-pet.ratings WHERE id=’id21” at line 1″
Was kann denn da falsch sein? Muss man die id irgendwo vorher manuell anlegen?
Nein, die ID muss nicht manuell in die Datenbank eingetragen werden
Das Problem liegt viel mehr an deinem Datenbankname -pet. SQL hat immer wieder bei Bindestrichen mit Problemen zu kämpfen. So auch hier.
Am Besten wäre es, einfach generell auf den Bindestrich zu verzichten oder ihn durch einen Unterstrich _ zu ersetzen
Danke für den Hinweis. Leider ist der Datenbankname bei meinem Provider hosteurope so vorgegeben, dass da immer ein Minus drin ist. Das scheint ja nicht so besonders clever zu sein, scheint aber anderen Kunden bisher kein Problem zu machen.
hi,
werde das Ratingssystem gleich mal testen.
Danke für den Beitrag
hi. ich habe das rating in meine website eingebaut. nun habe ich aber das problem, dass ich mehrmals abstimmen kann.ich wähle heute z.b. 3 sterne. anschliessend kann ich nicht mehr wählen. das ist korrekt. nun kann ich aber ein paar tage später erneut abstimmen. was könnte das sein? könnte das problem evt. daran liegen, dass ich manchmal die neuen dateien auf den webserver hochlade? mfg
[...] die Ajax Star Rating Bar habe ich sogar schon ein Tutorial [...]
Hallo Roli,
zur Sperre der Abstimmung wird die IP des Besuchers in der Datenbank gespeichert. Darum kannst du anschließend auch nicht mehr voten
Die meisten Leute sind im Internet mit keiner statischen IP online, d.h. sie bekommen am nächsten Tag von ihrem Provider wieder eine völlig andere IP zugewiesen
deswegen kann man bei der Rating Bar und auch bei allen möglichen anderen Abstimmung im Internet nie davon ausgehen dass nur jeder einmal eine Stimme abgeben kann
Ich benutze ein CMS System und habe keine Ahnung wie ich da das Teil installiere. Wie sieht der einzufügende Code denn komplett aus?
Wie füge ich etwas in den Header ein?
“Dazu ruft man möglichst am Anfang seiner index.php die _drawrating.php auf, die dann alle anderen erforderlichen Dateien mit einbindet.
” das einfach in die Öffnungsdatei einfügen?
Hat sich erledigt. Sterne werden angezeigt, aber folgendes Problem:
Fatal error: Cannot redeclare rating_bar() (previously declared in /customers/studibuch24.de/studibuch24.de/httpd.www/opn/opn2/html/ajaxstarrater/_drawrating.php:14) in /customers/studibuch24.de/studibuch24.de/httpd.www/opn/opn2/html/ajaxstarrater/_drawrating.php on line 94
Und wenn man abstimmt rechnet er ohne ergebnis…kann es nicht anzeigen
habe dir meinen Lösungsvorschlag als Antwort auf deine Email geschrieben
hab nicht gesehen dass du gleichzeitig auch noch kommentiert hast
Ich hoffe das Problem ist damit behoben
Hallo
Hab das gleiche Problem wie Benjamin,
allerdings sehe ich auch keine Sterne :-(
Wäre schön wenn mir vielleicht jemand helfen könnte
Ich wollte gerne das Script mal ausprobieren, doch die Website http://www.masugadesign.com/the-lab/scripts/unobtrusive-ajax-star-rating-bar/
ist offline :(. Kannst du es mal iwo hochladen?
Wäre super nett von dir! :)
LG
Hallo Thomas, ich finde deinen Beitrag sehr schön beschrieben. Gerne würde ich das Bewertungssystem auch auf meiner Seite einbauen, da ich leider nicht so viel Erfahrung mit PHP habe, bin ich glaube gerade ein wenig gescheitetert ;-) Bekomme folgende Fehlermdelung wenn man die Seite aufrufen will.
Fatal error: main() [function.require]: Failed opening required ‘_drawrating.php’ (include_path=’.:/usr/lib/php’) in /homepages/14/d18607126/htdocs/place2see/londondungeontest.php on line 22
Die Zeile require(‘_drawrating.php’); hat den Fehler verursacht, weil er die _drawrating.php nicht findet
die muss entweder im gleichen verzeichnis wie das eigentliche script liegen oder beim einbinden zusätzlich noch den pfad angeben
also require(‘../DATEIPFAD/_drawrating.php’);
ich hab ein kleines problem mit dem script.
möchte die id dynamisch gestalten. also mit $_GET[ID]
wenn ich das einsetzte, also
echo rating_bar('$_GET[ID]','5');funktioniert nicht!!
was mach ich falsch??
du musst die Hochkommata/Anführungszeichen bei $_GET[id] weglassen
sonst sieht php das als String an (in dem eben $_GET[id] als Wert steht) und nimmt nicht den eigentlichen Wert der ID her
also so:
echo rating_bar($_GET[ID],’5′);
Hallo Thomas,
Vielen Dank noch einmal für deine Hilfe. Hab mich heute weiter damit befasst, und es hat tatsächlich alles funktioniert :-)
Hallo alle zusammen,
ich bin totaler php- und mysqlneuling!
Ich schaffe es einfach nicht die mysql-datei in die config-rating.php einzufügen.
Müssen die dateien auf dem server sein um es testen zu können?
Hallo Michael,
ich verstehe noch nicht genau was du versucht hast.. in die config-rating.php gehören nur die mysql zugangsdaten; diese bekommst von deinem Webspace Anbieter
Danach muss die erforderliche MySQL Tabelle angelegt und die PHP Dateien auf den Server hochgeladen werden
Grüße
Thomas
Hallo
Ich habe das Script ausprobiert und mein Problem ist ich kann nicht voten. Wenn ich auf die Sterne klicke kommt nur das kleine animierte Bild bei dem sich die Striche im Kreis drehen. Das läuft ewig und nichts passiert. Hat jemand eine Idee woran das liegen könnte?
vielleicht mal unter thetaktik@freenet.de oder per icq (380797108) melden
vielen Dank im Vorraus
Tim
Hallo,
Erstmal vielen Dank für die Erklärung der Designanpassung. Obwohl ich mich bei diesen Dingen halbwegs auskenne, nimmt man immer gerne schon das, was schon gemacht wurde.
Ich werde das Skript für einen Ratenkredit Test verwenden auf folgender Site:
http://www.ratenkredit.org/ratenkredite_test.html
Selbstverständlich gibts da auch einen Credit von mir :-)
Also ich habe noch einen Verbesserungsvorschlag für die IP-Adresse:
$ip = isset($_SERVER['X_FORWARDED_FOR'])?$_SERVER['X_FORWARDED_FOR']:$_SERVER['REMOTE_ADDR'];
Dann wird eigentilch jede IP-Adresse angezeigt ;)
Kenn mich leider mit CSS nicht so gut aus. Ich möchte den Text der ausgegeben wird rechts neben den Sternen und nicht darunter haben. Kann mir jemand dabei helfen und mir sagen wie ich die CSS-Datei oder die drawrating.php anpassen muss?
Mfg
Joerg
hmm ich verstehe das nicht so ganz könnte mir vielleicht jemand per icq helfen 369-218-682
[...] Forum bin nur es gibt kein Ajax Forum. Ich hab auch ein mehr oder weniger tutorial gefunden: Bewertungs Sterne erstellen mit Ajax Star Rating Bar | Web:Manual nur ich bring das ganze nicht zum laufen. ich hab auf meiner Seite NFS-Serie.at einen Showroom und [...]
Hallo
finde das auch sehr schön beschrieben, wie man sehen kann hab ich im Freesoft Board schonmal was dazu geschrieben leider keine nützliche Antwort bekommen
Mein Problem ist das ich das ganze zwar zum laufen bekomme aber ich will machen das man Bilder bewerten kann und dazu muss ich die ID des User speichern wenn ich das aber umstelle von IP auf ID dann geht das ganze irgendwie nicht. Wenn ich das aber so lasse klappts super, nur eben ich würde gerne die ID speichern und das will nicht so wie ich will
ich hab in der DB einfach used_ips gelöscht und user_id hinzugefügt und im Script einfach überall $user_id hinzufgefügt.
Hoffentlich hab ich das richtig erklärt
MFG Lukas
Ich habe das gleiche Problem wie TIM..
alles fantastisch eingebaut, die ID dynamisch vergeben…
nur leider bekomme ich keinen richtigen Wert beim Bewerten….
In DQL wird zwar die ID richtig eingefügt, aber keinen votes….
das bearbeiten Symbol dreht sich immer weiter und es passiert nix…
was mache ich falsch?
Hallo,
Wenn ich vote, erscheint bei mir nur eine leere Seite und in der url erscheint dann http:www.domain/pfad/db.php?j=3&q=15&t=etc.
Wo liegt hier der Fehler?
Mit bestem Dank im Voraus
Wolfgang
Bei mir werden statt sterne nur folgendes angezeigt:
Currently 0.00/5
1
2
3
4
5
759 Rating: 0.0/5 (0 votes cast)
Woran könnte das liegen?
Hey,
nachdem ich mich etwas mit der Ajax Star Rating Bar beschäftigt habe und gern gewisse Modifikationen durchführen wollte, musste ich feststellen, dass man leicht an seine Grenzen stößt. Deshalb habe ich ein eigenes Rating System sowie ein zugehöriges Tutorial für eine 5 Star Rating Bar geschrieben.
Falls ihr euch für die Funktionsweise/Umsetzung interessiert lohnt sich ein Blick ;)
Viele Grüße
Pascal
Hallo,
ich bekomme auf der index.php Fatal error: Call to undefined function rating_bar() in /mnt/web7/…/voting/index.php on line 86
Habt ihr ne Ahnung wieso?
Viele Grüße
Mario
Hallo,
vilen Dank für deinen Beitrag, ohne den ich wahrscheinlich verloren gewesen wäre. Ich bin nämlich ein totaler PHP und MySql noob.
In der Index.php bekomme ich diese meldungen:
+++++++++++++++
Warning: require(/data/js/ajaxstarrater_v122/ajaxstarrater_v122/_drawrating.php) [function.require]: failed to open stream: No such file or directory in /users/digital-arts/www/data/js/ajaxstarrater_v122/ajaxstarrater_v122/index2.php on line 1
Fatal error: require() [function.require]: Failed opening required ‘/data/js/ajaxstarrater_v122/ajaxstarrater_v122/_drawrating.php’ (include_path=’.') in /users/digital-arts/www/data/js/ajaxstarrater_v122/ajaxstarrater_v122/index2.php on line 1
++++++++++++++++
Zeile 1 sieht bei mir so aus:
weiß jemand eine Lösung? Gerne könnt ihr mich auch über Icq erreichen: 572469483
Bin über jede Hilfe dankbar ;)
Sry, in Zeile 1 hab ich diese URL stehen: /data/js/ajaxstarrater_v122/ajaxstarrater_v122/_drawrating.php .
hallo! habe das script schon ein bisschen länger und damals (gewollt) ein bisschen was umgestellt.
zb sieht man nach dem voten die durchschnittssterne nicht.
dies möchte ich jetzt wieder rückgängig machen weiss aber nicht mehr wie :-(
ich hoffe mir kann wer helfen!?
lg
Christian
Ich habe das Script ausprobiert und mein Problem ist ich kann nicht voten. Wenn ich auf die Sterne klicke kommt nur das kleine animierte Bild bei dem sich die Striche im Kreis drehen. Das läuft ewig und nichts passiert. Hat jemand eine Idee woran das liegen könnte?
Bitte mailen info@filmbak.org
hey, hast mir echt weitergeholfen. Danke schön !
He,
ist es irgendwie möglich das so einzurichten, dass die ID für den User nicht zu sehen ist?
Gruß André
bei mir kommt – Error: 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 ‘WHERE id=’66334” at line 1
das gleiche script läuft auf einen anderen server gleiche einstellen ohne fehler
woran kann es liegen
Cooles Script.
Werde mal probieren, ob meine Fähigkeiten ausreichen, um es in meine Website einzubauen.
Anschaulich und detailliert erläutert – ein großes Dankeschön für die Zurverfügungstellung! :-)
Super, das funktioniert tadellos. wenn nur alles so einfach wär ;)
Gruß Michael
Scheint nicht schwer zu sein, das zu machen. Muss ich auch mal ausprobieren.
Cool. Danke für den tollen Artikel.
Klappt wunderbar.
Muss ich auch sagen: Klappt perfekt.
Nutze es nun auch.
Da ich noch totaler Newbie im Bereich Programmierung und so bin, ist das wohl mal eine gute Übung für mich das einzubauen, sodass es klappt.
Danke.
Vielen, vielen Dank ! Super Anleitung !